/* * Baidu Squad - Custom Stylesheet * Domain: baidusquad.web.id * * Colors: Bright & Vibrant (No Gradients!) * Layout: Flex-based Modern Gen Z */ /* ============================================= BASE RESET & GLOBAL ============================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } /* ============================================= NAVBAR SCROLLED STATE ============================================= */ #navbar { background-color: rgba(255, 255, 255, 0); transition: background-color 0.3s ease, box-shadow 0.3s ease; } #navbar.scrolled { background-color: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } /* ============================================= NAVIGATION LINKS ACTIVE STATE ============================================= */ .nav-link.active { color: #FF2D78; font-weight: 600; } /* ============================================= REVEAL ANIMATION (Scroll-triggered) PENTING: Elemen visible by default (no-js safe) JS akan tambahkan class 'js-ready' ke baru setelah itu elemen hide + reveal diaktifkan ============================================= */ .reveal-element { opacity: 1; transform: translateY(0); /* Default: visible, supaya konten tampil tanpa JS */ } /* Hanya aktifkan animasi kalau JS sudah siap */ .js-ready .reveal-element { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-ready .reveal-element.visible { opacity: 1; transform: translateY(0); } /* ============================================= GALLERY GRID - Pure CSS Masonry Fallback (Tidak bergantung pada Tailwind columns) ============================================= */ #gallery-grid { columns: 1; column-gap: 1rem; column-fill: balance; } @media (min-width: 640px) { #gallery-grid { columns: 2; } } @media (min-width: 1024px) { #gallery-grid { columns: 3; } } @media (min-width: 1280px) { #gallery-grid { columns: 4; } } .gallery-item { display: inline-block; width: 100%; cursor: pointer; overflow: hidden; transition: transform 0.3s ease; margin-bottom: 1rem; break-inside: avoid; page-break-inside: avoid; border-radius: 1rem; } .gallery-item:hover { transform: translateY(-4px); } .gallery-item:focus { outline: 3px solid #FF2D78; outline-offset: 4px; border-radius: 1rem; } .gallery-card-wrapper { position: relative; overflow: hidden; border-radius: 1rem; } /* Pastikan gambar mengisi card */ .gallery-card-wrapper img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 1rem; transition: transform 0.5s ease; } .gallery-item:hover .gallery-card-wrapper img { transform: scale(1.05); } /* Gallery hidden state */ .gallery-item.hidden-item { display: none; } /* ============================================= GALLERY PLACEHOLDER SVG IMAGES ============================================= */ .gallery-card-wrapper img { width: 100%; object-fit: cover; border-radius: 1rem; } /* ============================================= FILTER BUTTONS ============================================= */ .filter-btn { background-color: #F3F4F6; color: #6B7280; border: 2px solid transparent; cursor: pointer; transition: all 0.2s ease; } .filter-btn:hover { background-color: #FFE4EE; color: #FF2D78; border-color: #FF2D78; } .filter-btn.active-filter { background-color: #FF2D78; color: #FFFFFF; border-color: #FF2D78; } /* ============================================= MEMBER CARD ============================================= */ .member-card { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================= LIGHTBOX ============================================= */ #lightbox { animation: none; } #lightbox.show { display: flex; animation: fadeIn 0.25s ease-out; } #lightbox img { transition: opacity 0.25s ease; } /* ============================================= TIMELINE ============================================= */ .timeline-connector { position: absolute; left: 31px; top: 68px; bottom: 0; width: 2px; background-color: #F3F4F6; } /* ============================================= BACK TO TOP BUTTON ============================================= */ #back-to-top { transition: opacity 0.3s ease, transform 0.3s ease; } #back-to-top.show { display: flex; opacity: 1; } /* ============================================= MARQUEE TICKER ============================================= */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-marquee { animation: marquee 25s linear infinite; will-change: transform; } .animate-marquee:hover { animation-play-state: paused; } /* ============================================= FLOATING ANIMATION ============================================= */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } } .animate-float { animation: float 6s ease-in-out infinite; } /* ============================================= FADE IN ANIMATION ============================================= */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============================================= PULSE GLOW ANIMATION ============================================= */ @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 120, 0); } 50% { box-shadow: 0 0 20px 6px rgba(255, 45, 120, 0.35); } } /* ============================================= SCROLLBAR STYLING ============================================= */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #F9FAFB; } ::-webkit-scrollbar-thumb { background: #FF2D78; border-radius: 999px; } /* ============================================= SELECTION COLOR ============================================= */ ::selection { background-color: #FF2D78; color: white; } /* ============================================= FOCUS STYLES (Accessibility) ============================================= */ a:focus-visible, button:focus-visible { outline: 3px solid #FF2D78; outline-offset: 3px; border-radius: 4px; } /* ============================================= MOBILE RESPONSIVE HELPERS ============================================= */ @media (max-width: 640px) { #gallery-grid { columns: 1 !important; } } @media (min-width: 641px) and (max-width: 1023px) { #gallery-grid { columns: 2 !important; } } /* ============================================= PRINT STYLES ============================================= */ @media print { #navbar, #back-to-top, .animate-float { display: none !important; } } /* ============================================= 2026 PREMIUM FEATURES (Story, Scrapbook, Tree) ============================================= */ /* Font for Handwriting */ @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap'); .font-handwriting { font-family: 'Caveat', cursive; } /* Scrapbook Canvas */ .scrapbook-canvas { background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 20px 20px; background-color: #f8fafc; } /* Polaroids in Scrapbook */ .polaroid { background: #fff; padding: 10px 10px 40px 10px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); border: 1px solid #f1f5f9; cursor: grab; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .polaroid:active { cursor: grabbing; transform: scale(1.05) !important; z-index: 50 !important; } /* Masking Tape */ .tape { background-color: rgba(255, 255, 255, 0.4); box-shadow: 0 1px 3px rgba(0,0,0,0.2); backdrop-filter: blur(2px); border-left: 1px dashed rgba(0,0,0,0.1); border-right: 1px dashed rgba(0,0,0,0.1); } /* Story Mode Progress Bars */ .story-progress-container { display: flex; gap: 4px; padding: 12px; position: absolute; top: 0; left: 0; right: 0; z-index: 60; } .story-progress-bar { height: 3px; background: rgba(255,255,255,0.3); flex: 1; border-radius: 2px; overflow: hidden; } .story-progress-fill { height: 100%; background: #fff; width: 0%; } /* Story Mode Tap Zones */ .story-tap-left { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; z-index: 50; cursor: pointer; } .story-tap-right { position: absolute; top: 0; bottom: 0; right: 0; width: 70%; z-index: 50; cursor: pointer; } /* Memory Tree SVG Path Glow */ .tree-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawPath 3s forwards ease-in-out; } @keyframes drawPath { to { stroke-dashoffset: 0; } } .tree-node { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .tree-node:hover { transform: scale(1.3); filter: drop-shadow(0 0 10px #FF2D78); z-index: 20; }