From c9d96eabe45b53fd4004cfaf1907bb9c3171fae5 Mon Sep 17 00:00:00 2001 From: Dodo Date: Thu, 4 Jun 2026 14:40:40 +0700 Subject: [PATCH 01/10] feat(tapops): add css modules, js scripts, and viewer page --- groups/Tapops/css/base-scoped.css | 123 +++++ groups/Tapops/css/documents.css | 845 ++++++++++++++++++++++++++++++ groups/Tapops/css/hero.css | 276 ++++++++++ groups/Tapops/css/nav.css | 286 ++++++++++ groups/Tapops/css/responsive.css | 45 ++ groups/Tapops/css/sections.css | 429 +++++++++++++++ groups/Tapops/css/variables.css | 15 + groups/Tapops/css/viewer.css | 234 +++++++++ groups/Tapops/index.html | 521 ++++++++---------- groups/Tapops/js/i18n-tapops.js | 182 +++++++ groups/Tapops/js/main.js | 775 +++++++++++++++++++++++++++ groups/Tapops/js/viewer.js | 220 ++++++++ groups/Tapops/viewer.html | 73 +++ package-lock.json | 1 - pnpm-lock.yaml | 654 +++++++++++++++++++++++ pnpm-workspace.yaml | 2 + 16 files changed, 4379 insertions(+), 302 deletions(-) create mode 100644 groups/Tapops/css/base-scoped.css create mode 100644 groups/Tapops/css/documents.css create mode 100644 groups/Tapops/css/hero.css create mode 100644 groups/Tapops/css/nav.css create mode 100644 groups/Tapops/css/responsive.css create mode 100644 groups/Tapops/css/sections.css create mode 100644 groups/Tapops/css/variables.css create mode 100644 groups/Tapops/css/viewer.css create mode 100644 groups/Tapops/js/i18n-tapops.js create mode 100644 groups/Tapops/js/main.js create mode 100644 groups/Tapops/js/viewer.js create mode 100644 groups/Tapops/viewer.html create mode 100644 pnpm-lock.yaml create mode 100644 pnpm-workspace.yaml diff --git a/groups/Tapops/css/base-scoped.css b/groups/Tapops/css/base-scoped.css new file mode 100644 index 0000000..7316c29 --- /dev/null +++ b/groups/Tapops/css/base-scoped.css @@ -0,0 +1,123 @@ +/* =========================================== + Base / Reset — scoped under .tapops-doc-root + Prevents contaminating Tailwind nav/footer. + =========================================== */ + +.tapops-doc-root *, +.tapops-doc-root *::before, +.tapops-doc-root *::after { + box-sizing: border-box; +} + +/* Font is set on the root only (inherited), NOT on `*`. + A universal `.tapops-doc-root *` rule would tie Font Awesome's + `.fas` font-family in specificity and—loading later—override it, + blanking every icon. Inheritance loses to FA's explicit rule, so + icons render while normal text still gets Roboto. */ +.tapops-doc-root { + font-family: 'Roboto', sans-serif; + color: var(--text-dark); + line-height: 1.6; +} + +/* Form controls don't inherit font-family by default — opt them in. + These elements never hold Font Awesome glyphs, so this is icon-safe. */ +.tapops-doc-root input, +.tapops-doc-root select, +.tapops-doc-root textarea, +.tapops-doc-root button { + font-family: inherit; +} + +.tapops-doc-root a { + text-decoration: none; + color: inherit; +} + +.tapops-doc-root img { + display: block; +} + +/* --- Shared Section Styles --- */ + +.tapops-doc-root .section-header { + margin-bottom: 50px; +} + +.tapops-doc-root .section-tag { + font-size: 0.75rem; + font-weight: 800; + letter-spacing: 2px; + background-color: var(--secondary-gold); + color: var(--primary-blue); + display: inline-block; + padding: 6px 14px; + text-transform: uppercase; + margin-top: 10px; +} + +.tapops-doc-root .section-title { + font-size: 2.5rem; + font-weight: 800; + color: var(--primary-blue); + letter-spacing: -1px; + line-height: 1.15; +} + +/* --- Shared Button Styles --- */ + +.tapops-doc-root .btn-join, +.tapops-doc-root .btn-outline { + padding: 17px 30px; + font-weight: 800; + font-size: 0.9rem; + letter-spacing: 1px; + display: inline-flex; + align-items: center; + gap: 12px; + transition: all 0.3s ease; +} + +.tapops-doc-root .btn-join { + background-color: var(--secondary-gold); + color: var(--primary-blue); +} + +.tapops-doc-root .btn-outline { + border: 1px solid rgba(255, 255, 255, 0.18); + color: white; +} + +.tapops-doc-root .btn-join:hover, +.tapops-doc-root .btn-outline:hover { + transform: translateY(-2px); +} + +.tapops-doc-root .btn-join:hover { + background-color: #fff; + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25); +} + +.tapops-doc-root .btn-outline:hover { + border-color: var(--secondary-gold); + color: var(--secondary-gold); +} + +@media (max-width: 768px) { + .tapops-doc-root .btn-join, + .tapops-doc-root .btn-outline { + padding: 14px 24px; + font-size: 0.82rem; + width: 100%; + justify-content: center; + } +} + +@media (max-width: 480px) { + .tapops-doc-root .btn-join, + .tapops-doc-root .btn-outline { + padding: 12px 20px; + font-size: 0.78rem; + letter-spacing: 0.5px; + } +} diff --git a/groups/Tapops/css/documents.css b/groups/Tapops/css/documents.css new file mode 100644 index 0000000..19ae003 --- /dev/null +++ b/groups/Tapops/css/documents.css @@ -0,0 +1,845 @@ +/* =========================================== + Document Hub & Dashboard Layout + =========================================== */ + +.documents-section { + padding: 120px 5%; + background: hsl(0, 0%, 100%); +} + +.repo-dashboard-container { + max-width: 1200px; + margin: 0 auto; + display: grid; + grid-template-columns: 280px 1fr; + gap: 40px; + align-items: start; +} + +/* --- Sidebar Styling --- */ + +.repo-sidebar { + position: sticky; + top: 150px; +} + +/* Mobile category dropdown wrapper (hidden on desktop) */ +.mobile-category-control-group { + display: none !important; +} + +.sidebar-title { + font-size: 0.75rem; + letter-spacing: 2px; + font-weight: 800; + color: #94a3b8; + margin-bottom: 20px; + text-transform: uppercase; +} + +.document-filter-wrapper { + display: flex; + flex-direction: column; + gap: 8px; + margin-bottom: 30px; +} + +/* Desktop: show buttons, hide dropdown */ +.filter-btn-group { + display: flex; + flex-direction: column; + gap: 8px; +} + +.filter-select-group { + display: none; +} + +.doc-filter-btn { + text-align: left; + padding: 14px 18px; + background: white; + border: 1px solid #e2e8f0; + font-size: 0.85rem; + font-weight: 700; + color: var(--primary-blue); + cursor: pointer; + transition: all 0.2s ease; + border-radius: 4px; +} + +.doc-filter-btn.active { + background: var(--primary-blue); + color: white; + border-color: var(--primary-blue); + box-shadow: 0 4px 12px rgba(0, 49, 80, 0.15); +} + +.doc-filter-btn:hover:not(.active) { + border-color: var(--secondary-gold); + background: #fffdf5; +} + +/* --- Custom UI Dropdown --- */ +.custom-dropdown { + position: relative; + width: 100%; +} + +.custom-dropdown-trigger { + width: 100%; + padding: 14px 18px; + background: white; + border: 1px solid #e2e8f0; + border-radius: 4px; + font-family: inherit; + font-size: 0.9rem; + font-weight: 700; + color: var(--primary-blue); + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} + +.custom-dropdown-trigger:hover { + border-color: var(--secondary-gold); + background: #fffdf5; +} + +.custom-dropdown-trigger:focus-visible { + outline: none; + border-color: var(--primary-blue); + box-shadow: 0 0 0 3px rgba(0, 49, 80, 0.08); +} + +.custom-dropdown-trigger .trigger-arrow { + font-size: 0.8rem; + transition: transform 0.25s ease; + color: var(--primary-blue); +} + +.custom-dropdown.active .custom-dropdown-trigger .trigger-arrow { + transform: rotate(180deg); +} + +.custom-dropdown.active .custom-dropdown-trigger { + border-color: var(--primary-blue); + box-shadow: 0 0 0 3px rgba(0, 49, 80, 0.08); +} + +.custom-dropdown-menu { + position: absolute; + top: calc(100% + 6px); + left: 0; + right: 0; + background: white; + border: 1px solid #e2e8f0; + border-radius: 6px; + box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + z-index: 100; + opacity: 0; + visibility: hidden; + transform: translateY(-8px); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; + max-height: 300px; + overflow-y: auto; +} + +.custom-dropdown.active .custom-dropdown-menu { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.custom-dropdown-item { + padding: 12px 18px; + font-size: 0.88rem; + font-weight: 600; + color: #475569; + cursor: pointer; + transition: all 0.15s ease; + display: flex; + align-items: center; + justify-content: space-between; +} + +.custom-dropdown-item:hover { + background: #f1f5f9; + color: var(--primary-blue); +} + +.custom-dropdown-item.active { + background: #f0f7ff; + color: var(--primary-blue); + font-weight: 700; +} + +/* Tick mark for selected item */ +.custom-dropdown-item.active::after { + content: "\f00c"; + font-family: "Font Awesome 5 Free"; + font-weight: 900; + font-size: 0.75rem; + color: var(--primary-blue); +} + +/* --- Filter Skeleton Loading --- */ + +.filter-skeleton { + display: flex; + flex-direction: column; + gap: 8px; +} + +.filter-skeleton-item { + height: 48px; + border-radius: 4px; + background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); + background-size: 200% 100%; + animation: skeleton-shimmer 1.5s ease-in-out infinite; +} + +.filter-skeleton-item.short { + width: 70%; +} + +@keyframes skeleton-shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +.sidebar-info-box { + background: #f1f5f9; + padding: 20px; + border-radius: 4px; + display: flex; + gap: 12px; +} + +.sidebar-info-box i { + color: var(--primary-blue); + margin-top: 3px; +} + +.sidebar-info-box p { + font-size: 0.82rem; + color: #64748b; + line-height: 1.5; +} + +/* --- Content Area & Search --- */ + +.repo-main-content { + min-height: 800px; + min-width: 0; +} + +.repo-content-header { + display: flex; + flex-direction: column; + gap: 30px; + margin-bottom: 50px; +} + +.header-title-area .section-title { + margin-bottom: 8px; +} + +.section-subtitle { + font-size: 0.95rem; + color: #64748b; + font-weight: 400; +} + +.repo-controls { + display: flex; + justify-content: space-between; + align-items: flex-end; + gap: 24px; + background: white; + padding: 24px; + border-radius: 8px; + border: 1px solid #e2e8f0; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); +} + +.search-container { + flex: 1; + max-width: 500px; +} + +.search-input-group { + position: relative; + width: 100%; +} + +.search-icon { + position: absolute; + left: 18px; + top: 50%; + transform: translateY(-50%); + color: #94a3b8; + font-size: 1rem; +} + +#doc-search { + width: 100%; + padding: 16px 16px 16px 50px; + background: white; + border: 1px solid #e2e8f0; + border-radius: 4px; + font-size: 0.95rem; + color: var(--primary-blue); + transition: all 0.3s ease; +} + +#doc-search:focus { + outline: none; +} + +/* --- Filter Controls --- */ + +.filter-controls { + display: flex; + gap: 16px; + align-items: flex-end; +} + +.control-group { + display: flex; + flex-direction: column; + gap: 8px; +} + +.date-range-group { + min-width: 320px; +} + +.control-label { + font-size: 0.7rem; + font-weight: 800; + color: #94a3b8; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.select-wrapper { + position: relative; + min-width: 140px; +} + +#sort-filter-wrapper { + position: relative; + min-width: 140px; +} + +.select-icon { + position: absolute; + left: 14px; + top: 50%; + transform: translateY(-50%); + color: var(--primary-blue); + font-size: 0.8rem; + pointer-events: none; +} + +/* --- Date Range Filter --- */ +.date-range-inputs { + display: flex; + align-items: center; + gap: 10px; + background: #f8fafc; + border: 1px solid #e2e8f0; + padding: 4px 12px; + border-radius: 4px; + transition: all 0.2s ease; +} + +.date-range-inputs:focus-within { + background: white; +} + +.date-range-inputs .input-wrapper { + position: relative; + display: flex; + align-items: center; +} + +.date-range-inputs input[type="date"] { + border: none; + background: transparent; + padding: 8px 0; + font-family: inherit; + font-size: 0.85rem; + font-weight: 700; + color: var(--primary-blue); + cursor: pointer; + min-width: 120px; +} + +.date-range-inputs input[type="date"]:focus { + outline: none; +} + +.date-range-inputs input[type="date"]::-webkit-calendar-picker-indicator { + cursor: pointer; + opacity: 0.6; + transition: opacity 0.2s; +} + +.date-range-inputs input[type="date"]::-webkit-calendar-picker-indicator:hover { + opacity: 1; +} + +.range-divider { + font-size: 0.7rem; + font-weight: 800; + color: #94a3b8; + text-transform: uppercase; + padding: 0 4px; +} + +.filter-select, +select#sort-filter { + width: 100%; + padding: 12px 12px 12px 36px; + background: #f8fafc; + border: 1px solid #e2e8f0; + border-radius: 4px; + font-size: 0.85rem; + font-weight: 700; + color: var(--primary-blue); + cursor: pointer; + appearance: none; + transition: all 0.2s ease; +} + +.filter-select:hover, +select#sort-filter:hover { + border-color: var(--secondary-gold); + background: white; +} + +.filter-select:focus, +select#sort-filter:focus { + outline: none; +} + +/* --- Document Cards Grid --- */ + +.document-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 24px; +} + +.document-card { + background: white; + border: 1px solid #e2e8f0; + padding: 30px; + display: flex; + flex-direction: column; + transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); + border-radius: 4px; +} + +.document-card:hover { + border-color: var(--secondary-gold); + box-shadow: 0 20px 40px rgba(0, 49, 80, 0.05); + transform: translateY(-5px); +} + +.doc-type-icon { + font-size: 2.2rem; + margin-bottom: 20px; +} + +.doc-type-pdf { + color: #ef4444; +} + +.doc-type-docx { + color: #3b82f6; +} + +.doc-title { + font-size: 1.15rem; + font-weight: 800; + color: var(--primary-blue); + margin-bottom: 12px; + line-height: 1.4; +} + +.doc-meta { + display: flex; + gap: 8px; + margin-bottom: 25px; + flex-wrap: wrap; +} + +.doc-badge { + font-size: 0.65rem; + font-weight: 800; + padding: 4px 10px; + background: #f1f5f9; + color: #64748b; + text-transform: uppercase; +} + +.doc-badge.date { + background: hsl(200, 95%, 95%); + color: hsl(200, 95%, 30%); +} + +/* --- Tag Badges --- */ + +.doc-tags { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + margin-bottom: 20px; +} + +.doc-tags-icon { + font-size: 0.7rem; + color: #94a3b8; + margin-right: 2px; +} + +.doc-tag { + font-size: 0.65rem; + font-weight: 700; + padding: 3px 10px; + background: hsl(43, 100%, 95%); + color: hsl(43, 80%, 35%); + border: 1px solid hsl(43, 80%, 85%); + border-radius: 20px; + text-transform: lowercase; + letter-spacing: 0.3px; + transition: all 0.2s ease; +} + +.doc-tag:hover { + background: hsl(43, 80%, 88%); + border-color: hsl(43, 80%, 70%); +} + +.doc-actions { + margin-top: auto; + display: flex; + flex-direction: column; + gap: 10px; +} + +.btn-action-primary, +.btn-action-outline { + padding: 12px; + text-align: center; + text-decoration: none; + font-weight: 800; + font-size: 0.75rem; + letter-spacing: 0.5px; + text-transform: uppercase; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: all 0.2s ease; + border-radius: 4px; + width: 100%; +} + +a.btn-action-primary { + background: var(--primary-blue); + color: white; + border: 1px solid var(--primary-blue); +} + +a.btn-action-primary:hover { + background: var(--secondary-gold); + border-color: var(--secondary-gold); + color: var(--primary-blue); +} + +a.btn-action-outline { + background: transparent; + color: var(--primary-blue); + border: 1px solid #e2e8f0; +} + +a.btn-action-outline:hover { + border-color: var(--primary-blue); + background: #f8fafc; +} + +/* =========================================== + Responsive — Tablet (≤1024px) + =========================================== */ + +@media (max-width: 1024px) { + .repo-dashboard-container { + grid-template-columns: 1fr; + } + + .repo-sidebar { + display: none; + } + + .mobile-category-control-group { + display: flex !important; + flex-direction: column; + gap: 8px; + } + + /* Mobile: show dropdown */ + .filter-select-group { + display: block; + } + + /* Skeleton single bar on mobile */ + .filter-skeleton { + flex-direction: column; + } + + .filter-skeleton-item { + height: 48px; + } + + .filter-skeleton-item.short { + display: none; + } + + .filter-skeleton-item:not(.short) ~ .filter-skeleton-item:not(.short) { + display: none; + } + + .repo-controls { + flex-direction: column; + align-items: stretch; + } + + .search-container { + max-width: 100%; + } + + .filter-controls { + justify-content: flex-start; + } + + .control-group { + flex: 1; + } +} + +/* =========================================== + Responsive — Tablet / Large Phone (≤768px) + =========================================== */ + +@media (max-width: 768px) { + .documents-section { + padding: 80px 16px; + } + + .repo-content-header { + gap: 20px; + margin-bottom: 30px; + } + + .repo-controls { + padding: 16px; + gap: 16px; + } + + #doc-search { + padding: 14px 14px 14px 44px; + font-size: 0.88rem; + } + + .filter-controls { + flex-direction: column; + gap: 12px; + } + + .control-group { + width: 100%; + } + + .date-range-group { + min-width: 0; + } + + .date-range-inputs { + display: grid; + grid-template-columns: 1fr auto 1fr; + align-items: center; + gap: 8px; + border: none; + background: transparent; + padding: 0; + } + + .date-range-inputs .input-wrapper { + background: #f8fafc; + border: 1px solid #e2e8f0; + padding: 10px 14px; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + } + + .date-range-inputs .input-wrapper:focus-within { + background: white; + border-color: var(--primary-blue); + box-shadow: 0 0 0 3px rgba(0, 49, 80, 0.08); + } + + .date-range-inputs input[type="date"] { + width: 100%; + border: none; + background: transparent; + padding: 0; + font-family: inherit; + font-size: 0.82rem; + font-weight: 700; + color: var(--primary-blue); + min-width: 0; + flex: 1; + cursor: pointer; + } + + .range-divider { + font-size: 0.75rem; + font-weight: 800; + color: #94a3b8; + padding: 0 4px; + text-transform: uppercase; + } + + .select-wrapper, + #sort-filter-wrapper { + min-width: 0; + width: 100%; + } + + /* Cards: 2-column when space permits, else single */ + .document-grid { + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 16px; + } + + .document-card { + padding: 22px; + } + + .document-card:hover { + transform: none; + } + + .doc-type-icon { + font-size: 1.8rem; + margin-bottom: 14px; + } + + .doc-title { + font-size: 1rem; + } + + .doc-meta { + margin-bottom: 16px; + } + + .doc-tags { + margin-bottom: 14px; + } + + .repo-main-content { + min-height: 400px; + } +} + +/* =========================================== + Responsive — Phone (≤480px) + =========================================== */ + +@media (max-width: 480px) { + .documents-section { + padding: 50px 12px; + } + + .custom-dropdown-trigger { + padding: 12px 14px; + font-size: 0.85rem; + } + + /* Single column cards */ + .document-grid { + grid-template-columns: 1fr; + gap: 12px; + } + + .document-card { + padding: 18px; + } + + .doc-title { + font-size: 0.95rem; + margin-bottom: 8px; + } + + .doc-type-icon { + font-size: 1.5rem; + margin-bottom: 10px; + } + + .doc-meta { + margin-bottom: 12px; + } + + .doc-tags { + margin-bottom: 10px; + gap: 4px; + } + + .doc-tag { + font-size: 0.6rem; + padding: 2px 8px; + } + + .btn-action-primary, + .btn-action-outline { + padding: 10px; + font-size: 0.7rem; + } + + .doc-actions { + gap: 8px; + } + + .repo-controls { + padding: 12px; + gap: 12px; + } + + #doc-search { + padding: 12px 12px 12px 40px; + font-size: 0.85rem; + } + + .search-icon { + left: 14px; + font-size: 0.9rem; + } + + .repo-content-header { + gap: 16px; + margin-bottom: 20px; + } +} diff --git a/groups/Tapops/css/hero.css b/groups/Tapops/css/hero.css new file mode 100644 index 0000000..0dd8092 --- /dev/null +++ b/groups/Tapops/css/hero.css @@ -0,0 +1,276 @@ +/* =========================================== + Hero Section (Centered & Immersive) — Tapops + =========================================== */ + +.research-hero.immersive-hero { + background: radial-gradient(circle at center, #003150 0%, #001e35 100%); + color: white; + padding: 160px 5% 180px; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding-bottom: 200px; +} + +.research-hero::before { + content: ''; + position: absolute; + width: 800px; + height: 800px; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + + background: conic-gradient(from 180deg at 50% 50%, + transparent 0deg, + rgba(254, 180, 1, 0.15) 180deg, + transparent 360deg); + + -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff 0); + mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff 0); + + border-radius: 50%; + pointer-events: none; + z-index: 1; + animation: rotate-orbit 30s linear infinite; +} + +@keyframes rotate-orbit { + from { + transform: translate(-50%, -50%) rotate(0deg); + } + + to { + transform: translate(-50%, -50%) rotate(360deg); + } +} + +.hero-container-centered { + max-width: 900px; + position: relative; + z-index: 2; + width: 100%; + padding: 0 16px; +} + +.hero-kicker { + font-size: 0.85rem; + letter-spacing: 4px; + font-weight: 800; + color: var(--secondary-gold); + text-transform: uppercase; + margin-bottom: 24px; + display: inline-block; +} + +.hero-title { + font-size: 4.8rem; + font-weight: 800; + line-height: 1.05; + letter-spacing: -3px; + margin-bottom: 30px; +} + +.hero-tagline { + font-size: 1.25rem; + line-height: 1.6; + opacity: 0.85; + margin-bottom: 45px; +} + +.hero-actions { + display: flex; + justify-content: center; + gap: 20px; +} + +/* --- Floating Insight Bar --- */ + +.hero-floating-stat-bar { + position: absolute; + bottom: 50px; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + background: rgba(255, 255, 255, 0.03); + backdrop-filter: blur(20px); + border: 1px solid rgba(255, 255, 255, 0.1); + padding: 25px 60px; + border-radius: 4px; + z-index: 3; + gap: 40px; + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); + max-width: calc(100% - 32px); + box-sizing: border-box; +} + +.stat-bar-item { + display: flex; + flex-direction: column; + align-items: center; + white-space: nowrap; +} + +.stat-bar-value { + font-size: 2.2rem; + font-weight: 800; + color: var(--secondary-gold); + line-height: 1.1; +} + +.stat-bar-label { + font-size: 0.7rem; + letter-spacing: 1.5px; + text-transform: uppercase; + font-weight: 700; + opacity: 0.6; + margin-top: 4px; +} + +.stat-bar-divider { + width: 1px; + height: 40px; + background: rgba(255, 255, 255, 0.1); +} + +/* =========================================== + Hero Responsive + =========================================== */ + +@media (max-width: 992px) { + .research-hero.immersive-hero { + padding: 120px 5% 180px; + } + + .hero-title { + font-size: 3.5rem; + letter-spacing: -2px; + } + + .hero-tagline { + font-size: 1.1rem; + } + + .hero-floating-stat-bar { + padding: 20px 32px; + gap: 24px; + } + + .stat-bar-value { + font-size: 1.6rem; + } +} + +@media (max-width: 768px) { + .research-hero.immersive-hero { + padding: 100px 16px 130px; + } + + .hero-kicker { + font-size: 0.68rem; + letter-spacing: 2.5px; + margin-bottom: 16px; + } + + .hero-title { + font-size: 2.2rem; + letter-spacing: -1px; + margin-bottom: 18px; + } + + .hero-tagline { + font-size: 0.9rem; + line-height: 1.5; + margin-bottom: 28px; + } + + .hero-actions { + flex-direction: column; + align-items: stretch; + gap: 12px; + width: 100%; + max-width: 320px; + margin: 0 auto; + } + + .hero-floating-stat-bar { + width: 100%; + max-width: 320px; + padding: 18px 24px; + gap: 20px; + bottom: 30px; + } + + .stat-bar-value { + font-size: 1.3rem; + } + + .stat-bar-label { + font-size: 0.6rem; + letter-spacing: 1px; + } + + .stat-bar-divider { + height: 30px; + } + + .research-hero::before { + width: 400px; + height: 400px; + } +} + +@media (max-width: 480px) { + .research-hero.immersive-hero { + padding: 80px 12px 125px; + } + + .hero-kicker { + font-size: 0.6rem; + letter-spacing: 2px; + } + + .hero-title { + font-size: 1.8rem; + letter-spacing: -0.5px; + margin-bottom: 14px; + } + + .hero-tagline { + font-size: 0.82rem; + line-height: 1.45; + margin-bottom: 22px; + } + + .hero-actions { + max-width: 280px; + } + + .hero-floating-stat-bar { + flex-direction: row; + bottom: 20px; + gap: 16px; + padding: 14px 20px; + width: 100%; + max-width: 280px; + justify-content: space-evenly; + } + + .stat-bar-divider { + width: 1px; + height: 24px; + } + + .stat-bar-value { + font-size: 1.2rem; + } + + .research-hero::before { + width: 280px; + height: 280px; + } +} diff --git a/groups/Tapops/css/nav.css b/groups/Tapops/css/nav.css new file mode 100644 index 0000000..c68e1d3 --- /dev/null +++ b/groups/Tapops/css/nav.css @@ -0,0 +1,286 @@ +/* =========================================== + Navigation & Mega Menu Styles + Extracted from inline + + + + + + + + + + @@ -345,7 +73,7 @@ @@ -1139,22 +867,211 @@ -
-
-
- Tugas Halaman Statis -

Berkas Penting

-

Kelompok 09 — TAPOPS  ·  Informatika UNTAN 2026

-
-
- -

Tulis konten halaman kelompok di sini.

-

Subjudul

-

Gunakan paragraf, list, tabel, gambar, dan elemen konten lainnya.

- +
+ + +
+
+ Digital Administrative Hub +

Administrasi Akademik Digital

+

+ Satu pintu menuju semua dokumen penting. Akses terpusat menuju repositori dokumen akademik Program Studi + Informatika Universitas Tanjungpura untuk mahasiswa dan staf. +

+
+ Cari Dokumen + ALUR PENGAJUAN
-
+ +
+
+ — + Dokumen Aktif +
+
+
+ — + Pembaruan Terbaru +
+
+ + + +
+
+ + + + +
+
+
+

Eksplorasi Dokumen Prodi

+

Temukan berkas administrasi dan akademik terbaru Program Studi + Informatika.

+
+ +
+
+
+ + +
+
+ +
+
+ Periode Unggahan +
+
+ +
+ s/d +
+ +
+
+
+ +
+ Urutkan +
+
+ +
+ Kategori Berkas +
+
+
+
+
+ +
+
+ + Menghubungkan ke repositori berkas... +
+
+
+
+
+ + +
+
+
+

Tata Cara Pengajuan Berkas

+ Alur Pengajuan +
+ +
+ +
+
+
+
01
+
+
+
+

Unduh Formulir

+

Pilih kategori pengajuan Anda, lalu unduh formulir versi terbaru. Pastikan kode revisi pada formulir sesuai dengan yang tertera di halaman ini.

+
+
+ + +
+
+
+
02
+
+
+
+

Lengkapi Formulir

+

Isi setiap kolom dengan lengkap dan teliti. Sertakan seluruh dokumen pendukung yang diminta sebelum pengiriman.

+
+
+ + +
+
+
+
03
+
+
+

Kirim Berkas

+

Kirimkan formulir beserta dokumen pendukung melalui email resmi atau WhatsApp admin prodi. Berkas yang lengkap akan langsung diproses oleh admin prodi.

+
+
+
+
+
+ + +
+
+
+

Butuh Bantuan Lebih Lanjut?

+

Tim admin kami siap membantu Anda melalui kanal komunikasi resmi di bawah ini.

+
+ +
+
+
+
+

Korespondensi Resmi (Email)

+

Gunakan untuk permohonan form khusus non-publik atau administrasi formal lainnya.

+
    +
  • Respon Maks. 24 Jam
    • +
  • Pelayanan Formal
    • +
+ HUBUNGI ADMIN +
+
+ +
+
+
+

Quick Support (WhatsApp)

+

Konsultasi cepat alur birokrasi atau pelaporan kendala akses pada berkas repositori.

+
    +
  • Respon Instan Jam Kerja
    • +
  • Konsultasi Teknis
    • +
+ CHAT WHATSAPP +
+
+
+
+
+ +