/* ========================================================================== MARSAPIENS // STYLE MANIFEST Production Build — Mobile-First Responsive ========================================================================== */ /* --- 1. DESIGN TOKENS --------------------------------------------------- */ :root { --color-primary: #ffffff; --color-accent: #007bff; --color-danger: #ff003c; --color-cyan: #00f0ff; --color-bg: #000000; --color-surface: #050505; --color-muted: #888888; --color-success: #00ff00; --font-sans: 'Arial', 'Helvetica Neue', Helvetica, sans-serif; --font-mono: 'Courier New', Courier, monospace; --z-base: 1; --z-slideshow: 1; --z-vfx: 5; --z-ui: 10; --z-nav-overlay: 100; --z-nav-panel: 110; --z-sync: 9999; --header-height: 64px; --touch-min: 44px; /* WCAG minimum touch target */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* --- 2. RESET & BASE ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body { font-family: var(--font-sans); background-color: var(--color-bg); color: var(--color-primary); overflow: hidden; opacity: 1; transition: opacity 1s ease-in-out; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.fade-out { opacity: 0; } /* Allow scrolling on pages that need it (avatar-lab) */ body[data-page-id="avatar-lab"] { overflow-y: auto; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; outline: none; background: none; font-family: inherit; transition: all 0.3s ease; -webkit-appearance: none; appearance: none; } ul { list-style: none; } /* --- 3. LAYOUT PRIMITIVES ----------------------------------------------- */ .landing-ui-layer { position: relative; z-index: var(--z-ui); height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; pointer-events: none; } .landing-ui-layer header, .landing-ui-layer .hero-section, .landing-ui-layer .site-footer { pointer-events: auto; } /* --- 4. HEADER ---------------------------------------------------------- */ header { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; min-height: var(--header-height); } .logo { display: flex; align-items: center; font-weight: 700; font-size: 1.1rem; letter-spacing: 1px; } .logo img { height: 22px; width: auto; margin-right: 8px; flex-shrink: 0; } .logo-link { display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: opacity 0.3s ease; } .logo-link:hover { opacity: 0.8; filter: drop-shadow(0 0 5px var(--color-primary)); } /* --- 5. NAVIGATION ------------------------------------------------------ */ .main-nav { display: flex; align-items: center; } /* Hamburger — always visible (off-canvas pattern) */ .hamburger-menu { position: relative; z-index: var(--z-nav-panel); cursor: pointer; width: var(--touch-min); height: var(--touch-min); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0; -webkit-tap-highlight-color: transparent; } .hamburger-menu .bar { display: block; width: 24px; height: 2px; background-color: var(--color-primary); margin: 3px 0; transition: transform 0.35s ease, opacity 0.25s ease; transform-origin: center; } /* When open, hamburger is moved to and needs fixed positioning */ .hamburger-menu.open { position: fixed; top: 24px; right: 16px; z-index: calc(var(--z-nav-panel) + 1); } .hamburger-menu.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger-menu.open .bar:nth-child(2) { opacity: 0; } .hamburger-menu.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Backdrop overlay when nav is open */ .nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: var(--z-nav-overlay); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .nav-backdrop.active { opacity: 1; visibility: visible; } /* Off-canvas panel */ .nav-links { position: fixed; top: 0; right: 0; width: 280px; max-width: 85vw; height: 100vh; height: 100dvh; background: rgba(5, 5, 5, 0.98); border-left: 1px solid var(--color-danger); display: flex; flex-direction: column; padding: 100px 32px 40px; z-index: var(--z-nav-panel); transform: translateX(100%); transition: transform 0.4s var(--ease-out-expo); overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-links.active { transform: translateX(0); } .nav-links li { margin-bottom: 28px; } .nav-links a { font-family: var(--font-mono); font-size: 0.95rem; letter-spacing: 2px; text-transform: uppercase; transition: color 0.3s ease; display: block; padding: 8px 0; min-height: var(--touch-min); display: flex; align-items: center; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--color-danger); text-shadow: 0 0 8px var(--color-danger); } .nav-links a.special { color: var(--color-accent); } .nav-links a.special:hover { color: var(--color-danger); } /* --- 6. HERO SECTION ---------------------------------------------------- */ .hero-section { text-align: center; padding: 0 16px; margin-bottom: 12vh; } .hero-section h1 { font-size: clamp(1.4rem, 5vw, 3.5rem); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; line-height: 1.2; margin-bottom: 16px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } .separator { width: 50px; height: 4px; background-color: var(--color-accent); margin: 0 auto 32px; } /* --- 7. BUTTONS --------------------------------------------------------- */ .cta-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 28px; min-height: var(--touch-min); font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #00f0ff; background: rgba(0, 20, 35, 0.75); border: 1px solid rgba(0, 240, 255, 0.85); box-shadow: 0 0 12px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.06); clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%); overflow: hidden; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; -webkit-tap-highlight-color: transparent; } /* inner tinted background */ .cta-button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,240,255,0.12) 0%, rgba(0,100,200,0.06) 100%); transition: opacity 0.25s ease; } /* scan-line sweep on hover */ .cta-button::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0,240,255,0.18), transparent); transition: left 0.45s ease; } /* corner tick marks */ .cta-button .cta-corner { position: absolute; width: 6px; height: 6px; border-color: rgba(0, 240, 255, 0.7); border-style: solid; transition: border-color 0.25s ease; } .cta-button .cta-corner--tl { top: 3px; left: 3px; border-width: 1px 0 0 1px; } .cta-button .cta-corner--tr { top: 3px; right: 3px; border-width: 1px 1px 0 0; } .cta-button .cta-corner--bl { bottom: 3px; left: 3px; border-width: 0 0 1px 1px; } .cta-button .cta-corner--br { bottom: 3px; right: 3px; border-width: 0 1px 1px 0; } .cta-button:hover, .cta-button:focus-visible { color: #fff; background: rgba(0, 40, 60, 0.9); border-color: #00f0ff; box-shadow: 0 0 24px rgba(0, 240, 255, 0.55), 0 0 60px rgba(0, 240, 255, 0.18), inset 0 0 18px rgba(0, 240, 255, 0.12); animation: glitch-skew 0.3s var(--ease-out-back) both; } .cta-button:hover::before { opacity: 1.6; } .cta-button:hover::after { left: 140%; } .cta-button:hover .cta-corner { border-color: rgba(0, 240, 255, 1); } .cta-button.mini { padding: 10px 20px; font-size: 0.85rem; } .action-button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; min-height: var(--touch-min); font-size: 0.875rem; font-weight: 700; color: var(--color-primary); background-color: rgba(0, 0, 0, 0.5); border: 2px solid var(--color-primary); text-transform: uppercase; letter-spacing: 1px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-tap-highlight-color: transparent; } .action-button:hover, .action-button:focus-visible { background-color: var(--color-primary); color: var(--color-bg); } /* --- 8. CORNER DECORATION ----------------------------------------------- */ .corner-decoration { position: absolute; width: 16px; height: 16px; background-color: var(--color-primary); transform: rotate(45deg); pointer-events: none; } .corner-decoration.bottom-right { bottom: 16px; right: 16px; } /* --- 9. SLIDESHOW ------------------------------------------------------- */ .slideshow-container { position: absolute; inset: 0; z-index: var(--z-slideshow); } .background-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform-origin: 0 0; opacity: 0; transition: opacity 1.5s ease-in-out, transform 0.1s ease-out; will-change: transform, opacity; z-index: 1; } .background-image.active { opacity: 1; z-index: 2; } /* --- 10. SPACE-VIEW PAGE ------------------------------------------------ */ .space-view-page { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; } .space-view-page.looking-around .background-image { cursor: zoom-in; } .space-view-page.looking-around .background-image:active { cursor: grabbing; } .content-overlay.fixed-overlay { position: absolute; bottom: max(10vh, 60px); left: 50%; transform: translateX(-50%); z-index: var(--z-ui); pointer-events: none; width: 100%; padding: 0 16px; } .button-container { pointer-events: auto; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* --- 11. VFX OVERLAYS --------------------------------------------------- */ .vfx-overlay { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-vfx); } /* Vignette */ .vfx-overlay::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); z-index: 1; } /* Scanlines */ .vfx-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.15) 100%); background-size: 100% 4px; opacity: 0.4; z-index: 2; } /* Animated grain */ .noise-layer { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.06; animation: staticNoise 0.2s steps(2) infinite; z-index: 3; } .scanline-layer { position: absolute; inset: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03)); background-size: 100% 4px, 3px 100%; pointer-events: none; z-index: 5; } @keyframes staticNoise { 0% { transform: translate(0, 0); } 10% { transform: translate(-2%, -2%); } 20% { transform: translate(-4%, 2%); } 30% { transform: translate(2%, -4%); } 40% { transform: translate(-2%, 6%); } 50% { transform: translate(-4%, 2%); } 60% { transform: translate(6%, 0); } 70% { transform: translate(0, 4%); } 80% { transform: translate(-6%, 0); } 90% { transform: translate(4%, 2%); } 100% { transform: translate(2%, 0); } } /* --- 12. GLITCH TEXT ---------------------------------------------------- */ .glitch-text { animation: glitch-skew 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; position: relative; } @keyframes glitch-skew { 0% { transform: skew(0deg); } 4% { transform: skew(0deg); text-shadow: none; } 4.1% { transform: skew(10deg); text-shadow: -4px 0 var(--color-danger), 4px 0 var(--color-cyan); } 4.5% { transform: skew(-10deg); text-shadow: 4px 0 var(--color-danger), -4px 0 var(--color-cyan); filter: blur(1px); } 4.6% { transform: skew(0deg); text-shadow: none; filter: blur(0); } 50% { transform: skew(0deg); } 50.1% { transform: skew(4deg); text-shadow: -2px 0 var(--color-danger), 2px 0 var(--color-cyan); } 50.3% { transform: skew(-4deg); text-shadow: 2px 0 var(--color-danger), -2px 0 var(--color-cyan); } 50.4% { transform: skew(0deg); text-shadow: none; } 100% { transform: skew(0deg); } } /* --- 13. SYNC / TERMINAL OVERLAY ---------------------------------------- */ .sync-overlay { position: fixed; inset: 0; background: var(--color-surface); z-index: var(--z-sync); display: none; justify-content: center; align-items: center; font-family: var(--font-mono); color: var(--color-danger); padding: 24px; } .terminal-content { width: 100%; max-width: 480px; text-align: left; } .line { margin: 5px 0; overflow: hidden; white-space: nowrap; border-right: 2px solid var(--color-danger); animation: typing 1s steps(30, end), blink 0.5s step-end infinite; font-size: clamp(0.65rem, 2.5vw, 0.9rem); } .progress-bar-container { width: 100%; height: 4px; background: #222; margin-top: 20px; border-radius: 2px; overflow: hidden; } .progress-fill { width: 0%; height: 100%; background: var(--color-danger); transition: width 2s ease-in-out; } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink { from, to { border-color: transparent; } 50% { border-color: var(--color-danger); } } .bg-video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; /* Behind everything */ transform: translate(-50%, -50%); /* Centers the video */ object-fit: cover; /* Ensures it fills the screen perfectly */ filter: brightness(0.6) contrast(1.2); /* Keep it dystopian and dark */ } .bg-media { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; /* This is the magic property for both tags */ z-index: -1; filter: brightness(0.5) contrast(1.1); } .fade-in { animation: simpleFade 1.5s ease-in; } @keyframes simpleFade { from { opacity: 0; } to { opacity: 1; } } /* --- 14. ERROR PAGE ----------------------------------------------------- */ .error-page { background-color: var(--color-surface); display: flex; justify-content: center; align-items: center; height: 100vh; height: 100dvh; text-align: center; color: var(--color-danger); padding: 24px; } .error-container { width: 100%; max-width: 560px; } .error-container h1 { font-size: clamp(4rem, 15vw, 8rem); margin: 0; letter-spacing: 0.1em; line-height: 1; } .sub-glitch { font-size: clamp(1rem, 3vw, 1.5rem); color: var(--color-primary); letter-spacing: 3px; margin-bottom: 16px; } .error-container p { max-width: 500px; color: var(--color-muted); line-height: 1.6; margin: 0 auto 24px; font-size: clamp(0.85rem, 2vw, 1rem); } /* --- 15. AVATAR LAB ----------------------------------------------------- */ .lab-header { position: sticky; top: 0; z-index: var(--z-ui); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 8px; padding: 12px 16px; min-height: var(--header-height); background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* Page title badge — centered in header */ .page-title-badge { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); pointer-events: none; overflow: hidden; min-width: 0; } .page-title-badge span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .page-title-badge svg { opacity: 0.8; flex-shrink: 0; width: 14px; height: 14px; } .lab-main { position: relative; z-index: var(--z-ui); display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px; min-height: calc(100vh - var(--header-height) - 80px); min-height: calc(100dvh - var(--header-height) - 80px); } .glass-panel { background: rgba(10, 10, 10, 0.85); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); border: 1px solid rgba(255, 0, 60, 0.3); padding: 24px 20px; width: 100%; max-width: 700px; border-radius: 4px; } .panel-header { margin-bottom: 8px; } .panel-header .glitch-text { font-size: clamp(1rem, 3.5vw, 1.5rem); letter-spacing: 1px; } .status-text { font-family: var(--font-mono); font-size: clamp(0.7rem, 2vw, 0.8rem); color: var(--color-success); letter-spacing: 2px; margin-top: 4px; } .upload-area { border: 2px dashed rgba(255, 0, 60, 0.2); padding: 32px 16px; text-align: center; margin: 20px 0; transition: all 0.3s ease; border-radius: 4px; } .upload-area:hover, .upload-area.drag-over { border-color: var(--color-danger); background: rgba(255, 0, 60, 0.05); } .upload-icon { font-size: 2.5rem; margin-bottom: 12px; line-height: 1; } .upload-area p { font-size: clamp(0.75rem, 2vw, 0.9rem); color: var(--color-muted); margin-bottom: 16px; letter-spacing: 1px; } .protocol-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; } .protocol-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); padding: 20px; text-align: center; transition: all 0.4s var(--ease-out-back); cursor: pointer; position: relative; overflow: hidden; border-radius: 2px; } .protocol-card h3 { font-size: 0.9rem; margin-bottom: 4px; color: var(--color-danger); } .protocol-card p { font-size: 0.75rem; color: #ccc; margin-bottom: 12px; } .protocol-card::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 0, 60, 0.1), transparent); transform: rotate(45deg); transition: 0.6s ease; opacity: 0; } .protocol-card:hover::after { opacity: 1; left: 100%; } .protocol-btn { background: transparent; border: 1px solid var(--color-danger); color: var(--color-danger); padding: 10px 20px; min-height: var(--touch-min); font-family: var(--font-mono); font-size: 0.8rem; cursor: pointer; transition: all 0.3s ease; } .protocol-btn:hover, .protocol-btn:focus-visible { background: var(--color-danger); color: var(--color-primary); box-shadow: 0 0 15px var(--color-danger); } /* --- 16. DEVELOPER FOOTER ----------------------------------------------- */ .dev-footer { position: relative; z-index: var(--z-ui); border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: #666; padding: 16px; text-align: center; } .dev-info p { margin: 2px 0; } .social-links { display: flex; gap: 16px; } .dev-link { transition: color 0.3s ease; padding: 4px; min-height: var(--touch-min); display: flex; align-items: center; } .dev-link:hover { color: var(--color-danger); } .highlight { color: var(--color-danger); font-weight: 700; } /* --- 17. FOCUS & ACCESSIBILITY ------------------------------------------ */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Disable heavy VFX for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .glitch-text, .noise-layer, .line { animation: none !important; } .background-image, .progress-fill, .nav-links, .nav-backdrop { transition-duration: 0.01ms !important; } } /* ========================================================================== RESPONSIVE BREAKPOINTS — TABLET (≥600px) ========================================================================== */ @media screen and (min-width: 600px) { .landing-ui-layer { padding: 20px 32px; } header { padding: 16px 8px; } .hamburger-menu.open { top: 32px; right: 32px; } .hero-section { margin-bottom: 15vh; padding: 0 32px; } .cta-button { padding: 11px 28px; font-size: 0.9rem; } .action-button { padding: 12px 30px; font-size: 1rem; } .button-container { gap: 20px; flex-wrap: nowrap; } .glass-panel { padding: 30px; } .upload-area { padding: 40px 24px; } .protocol-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; } .dev-footer { flex-direction: row; justify-content: space-between; text-align: left; padding: 16px 24px; } .terminal-content { max-width: 480px; } .error-container p { padding: 0; } .lab-header { display: flex; justify-content: space-between; gap: 0; padding: 12px 32px; } .page-title-badge { position: absolute; left: 50%; transform: translateX(-50%); justify-content: flex-start; gap: 10px; font-size: 0.88rem; letter-spacing: 2.5px; overflow: visible; min-width: unset; } .page-title-badge span { overflow: visible; text-overflow: clip; white-space: nowrap; } .page-title-badge svg { width: 20px; height: 20px; } .lab-main { padding: 32px; } } /* ========================================================================== RESPONSIVE BREAKPOINTS — DESKTOP (≥1024px) ========================================================================== */ @media screen and (min-width: 1024px) { .landing-ui-layer { padding: 20px 40px; } header { padding: 20px 0; } .hamburger-menu.open { top: 36px; right: 40px; } .logo { font-size: 1.2rem; } .logo img { height: 24px; } .nav-links { width: 300px; } .nav-links a { font-size: 1.05rem; } .cta-button { padding: 12px 32px; font-size: 0.95rem; } .protocol-card:hover { border-color: var(--color-danger); background: rgba(255, 0, 60, 0.05); transform: translateY(-5px) scale(1.02); box-shadow: 0 0 20px rgba(255, 0, 60, 0.2); } .content-overlay.fixed-overlay { bottom: 10vh; } .corner-decoration { width: 20px; height: 20px; } .corner-decoration.bottom-right { bottom: 20px; right: 20px; } .lab-header { padding: 16px 40px; } .lab-main { align-items: center; padding: 40px; } } /* ========================================================================== RESPONSIVE BREAKPOINTS — LARGE DESKTOP (≥1440px) ========================================================================== */ @media screen and (min-width: 1440px) { .hero-section h1 { font-size: 4rem; } } /* ========================================================================== UTILITY: LANDSCAPE PHONES ========================================================================== */ @media screen and (max-height: 500px) and (orientation: landscape) { .hero-section { margin-bottom: 4vh; } .hero-section h1 { font-size: clamp(1.1rem, 4vw, 2rem); } .content-overlay.fixed-overlay { bottom: max(4vh, 24px); } .separator { margin-bottom: 16px; } } .transformed-result { max-width: 100%; border: 2px solid #ff003c; /* Mars Red */ box-shadow: 0 0 15px rgba(255, 0, 60, 0.5); margin-bottom: 20px; } .download-btn { margin-top: 15px; background: #00ff00; /* Terminal Green */ color: #000; font-weight: bold; letter-spacing: 2px; } /* --- NAV ORBS (Landing page quick-navigation) --------------------------- */ .nav-orbs { display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; margin-bottom: 52px; } .nav-orb { position: relative; width: 100px; height: 100px; border-radius: 50%; border: 1px solid rgba(255, 0, 60, 0.4); background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; text-decoration: none; color: rgba(255, 255, 255, 0.72); overflow: hidden; transition: transform 0.35s var(--ease-out-expo), border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease; } /* Themed icon */ .orb-icon { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .orb-icon svg { width: 100%; height: 100%; } /* Text label */ .orb-label { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1.35; } /* Rotating targeting ring — activates on hover */ .nav-orb::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid transparent; border-top-color: var(--color-cyan); border-right-color: var(--color-cyan); opacity: 0; transition: opacity 0.3s ease; animation: orb-spin 2s linear infinite; animation-play-state: paused; } /* Vertical scan line sweeps through on hover */ .nav-orb::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--color-cyan), transparent); top: -10%; opacity: 0; } .nav-orb:hover, .nav-orb:focus-visible { border-color: var(--color-cyan); box-shadow: 0 0 20px rgba(0, 240, 255, 0.45), 0 0 50px rgba(0, 240, 255, 0.14), inset 0 0 20px rgba(0, 240, 255, 0.07); transform: translateY(-8px) scale(1.08); color: var(--color-cyan); outline: none; } .nav-orb:hover::before, .nav-orb:focus-visible::before { opacity: 1; animation-play-state: running; } .nav-orb:hover::after, .nav-orb:focus-visible::after { opacity: 1; animation: orb-scan 1.1s linear infinite; } @keyframes orb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes orb-scan { from { top: -5%; } to { top: 105%; } } /* --- SATELLITE ORB SYSTEM ------------------------------------------------ */ /* Wrapper: same footprint as the orb, overflow visible so satellites show */ .orb-wrapper { position: relative; flex-shrink: 0; } /* Lift wrapper above siblings so satellites aren't clipped by adjacent orbs */ .orb-wrapper:hover { z-index: 20; } /* Each satellite */ .orb-satellite { --sat-angle: calc(var(--sat-i) * 72deg - 90deg); position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(0, 220, 80, 0.45); background: rgba(2, 12, 4, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; text-decoration: none; color: rgba(255, 255, 255, 0.82); outline: none; box-shadow: 0 0 10px rgba(0, 220, 80, 0.18), inset 0 0 8px rgba(0, 220, 80, 0.06); /* Collapsed position — close in, invisible */ opacity: 0; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--sat-angle)) translateY(-58px) rotate(calc(-1 * var(--sat-angle))); /* Delay before hiding gives mouse time to cross gap to satellite */ transition: opacity 0.18s ease 0.16s, transform 0.22s ease 0.16s, border-color 0.2s ease 0.16s, box-shadow 0.2s ease 0.16s; } /* Show state: bloom outward, staggered by index */ .orb-wrapper:hover .orb-satellite { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) rotate(var(--sat-angle)) translateY(-100px) rotate(calc(-1 * var(--sat-angle))); transition: opacity 0.22s ease calc(var(--sat-i) * 0.045s), transform 0.35s cubic-bezier(0.19,1,0.22,1) calc(var(--sat-i) * 0.045s), border-color 0.2s ease, box-shadow 0.2s ease; } .orb-satellite:hover, .orb-satellite:focus-visible { border-color: var(--color-cyan); box-shadow: 0 0 14px rgba(0, 240, 255, 0.4), inset 0 0 10px rgba(0, 240, 255, 0.06); color: var(--color-cyan); } .sat-key { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 1.5px; color: rgba(0, 220, 80, 0.9); line-height: 1; } .orb-satellite:hover .sat-key, .orb-satellite:focus-visible .sat-key { color: var(--color-cyan); } .sat-name { font-family: var(--font-mono); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.5px; line-height: 1.25; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); } /* Hide satellites on touch / small screens — hover doesn't work reliably */ @media (max-width: 540px) { .nav-orbs { gap: 14px; margin-bottom: 36px; } .nav-orb { width: 80px; height: 80px; } .orb-icon { width: 24px; height: 24px; } .orb-label { font-size: 0.55rem; } .orb-satellite { display: none; } } @media (prefers-reduced-motion: reduce) { .nav-orb::before { animation: none; } .nav-orb:hover::after, .nav-orb:focus-visible::after { animation: none; top: 50%; } .nav-orb:hover, .nav-orb:focus-visible { transform: none; } } /* ========================================================================== THE ARCHIVE — Classified Database Terminal ========================================================================== */ /* --- Page-level overrides ------------------------------------------------ */ body[data-page-id="archive"] { overflow: hidden; background: #020702; --color-terminal: #00ff41; --color-terminal-dim: rgba(0, 255, 65, 0.45); --color-terminal-bg: rgba(0, 18, 4, 0.92); --color-amber: #ffb700; --color-classified: #ff2442; } body[data-page-id="archive"] .scanline-layer { display: block; opacity: 0.055; } /* --- Archive header ------------------------------------------------------- */ .archive-header { border-bottom: 1px solid rgba(0, 255, 65, 0.18); background: rgba(0, 8, 2, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .archive-header .logo span, .archive-header .logo-link { color: var(--color-terminal); text-shadow: 0 0 8px rgba(0, 255, 65, 0.45); } .archive-header .bar { background-color: var(--color-terminal); } /* --- Terminal status bar -------------------------------------------------- */ .terminal-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 5px 20px; background: rgba(0, 255, 65, 0.06); border-bottom: 1px solid rgba(0, 255, 65, 0.18); font-family: var(--font-mono); font-size: 0.6rem; color: var(--color-terminal); letter-spacing: 2px; text-transform: uppercase; flex-shrink: 0; } /* --- Status bar auth widget ----------------------------------------------- */ .status-auth { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .status-login-btn { padding: 3px 10px; background: rgba(0, 255, 65, 0.08); border: 1px solid rgba(0, 255, 65, 0.4); color: rgba(0, 255, 65, 0.85); font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background 0.15s, border-color 0.15s; white-space: nowrap; } .status-login-btn:hover { background: rgba(0, 255, 65, 0.15); border-color: rgba(0, 255, 65, 0.7); } .status-agent { display: flex; align-items: center; gap: 5px; } .status-agent-name { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 1.2px; color: rgba(0, 255, 65, 0.85); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .status-level-badge { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 1px; color: #00f0ff; border: 1px solid rgba(0, 240, 255, 0.4); padding: 1px 4px; flex-shrink: 0; } .status-logout-btn { padding: 3px 8px; background: transparent; border: 1px solid rgba(255, 36, 66, 0.3); color: rgba(255, 36, 66, 0.6); font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: border-color 0.15s, color 0.15s; white-space: nowrap; } .status-logout-btn:hover { border-color: rgba(255, 36, 66, 0.7); color: rgba(255, 36, 66, 0.9); } /* --- Main terminal container --------------------------------------------- */ .archive-terminal { display: flex; flex-direction: column; height: calc(100vh - var(--header-height)); height: calc(100dvh - var(--header-height)); position: relative; z-index: var(--z-ui); overflow: hidden; /* desktop: internal scroll only */ } /* --- Two-column layout --------------------------------------------------- */ .archive-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; } /* --- Sidebar ------------------------------------------------------------- */ .folder-sidebar { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid rgba(0, 255, 65, 0.18); background: rgba(0, 10, 2, 0.82); overflow: hidden; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-family: var(--font-mono); font-size: 0.6rem; color: rgba(0, 255, 65, 0.75); letter-spacing: 3px; background: rgba(0, 255, 65, 0.06); border-bottom: 1px solid rgba(0, 255, 65, 0.14); flex-shrink: 0; } .sidebar-count { font-size: 0.55rem; letter-spacing: 2px; opacity: 0.7; } .sidebar-path { padding: 6px 16px; font-family: var(--font-mono); font-size: 0.52rem; color: rgba(0, 255, 65, 0.28); letter-spacing: 1px; border-bottom: 1px solid rgba(0, 255, 65, 0.08); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .folder-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0, 255, 65, 0.2) transparent; } .folder-list::-webkit-scrollbar { width: 4px; } .folder-list::-webkit-scrollbar-track { background: transparent; } .folder-list::-webkit-scrollbar-thumb { background: rgba(0, 255, 65, 0.2); border-radius: 2px; } .sidebar-footer { padding: 8px 16px; font-family: var(--font-mono); font-size: 0.52rem; color: rgba(0, 255, 65, 0.22); letter-spacing: 1px; border-top: 1px solid rgba(0, 255, 65, 0.08); flex-shrink: 0; } /* Sidebar auth — login/logout area */ .sidebar-auth { padding: 10px 16px; border-top: 1px solid rgba(0, 255, 65, 0.1); flex-shrink: 0; } .sidebar-login-btn { width: 100%; padding: 7px 10px; background: rgba(0, 255, 65, 0.08); border: 1px solid rgba(0, 255, 65, 0.35); color: rgba(0, 255, 65, 0.85); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 1.5px; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .sidebar-login-btn:hover { background: rgba(0, 255, 65, 0.15); border-color: rgba(0, 255, 65, 0.6); } .sidebar-agent { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .sidebar-agent-name { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 1.2px; color: rgba(0, 255, 65, 0.85); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-level-badge { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 1px; color: #00f0ff; border: 1px solid rgba(0, 240, 255, 0.35); padding: 1px 5px; flex-shrink: 0; } .sidebar-logout-btn { width: 100%; padding: 5px 10px; background: transparent; border: 1px solid rgba(0, 255, 65, 0.2); color: rgba(0, 255, 65, 0.45); font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 1.5px; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .sidebar-logout-btn:hover { border-color: rgba(255, 36, 66, 0.5); color: rgba(255, 36, 66, 0.7); } /* Folder entries */ .folder-entry { padding: 13px 16px 13px 20px; font-family: var(--font-mono); font-size: 0.72rem; color: rgba(0, 255, 65, 0.85); letter-spacing: 0.8px; cursor: pointer; border-bottom: 1px solid rgba(0, 255, 65, 0.1); transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease, border-left 0.2s ease; border-left: 3px solid transparent; line-height: 1.4; text-shadow: 0 0 6px rgba(0, 255, 65, 0.25); } .folder-entry:hover, .folder-entry:focus-visible { color: #00ff41; background: rgba(0, 255, 65, 0.07); padding-left: 26px; border-left: 3px solid rgba(0, 255, 65, 0.6); text-shadow: 0 0 10px rgba(0, 255, 65, 0.5); outline: none; } .folder-entry.active { color: #00ff41; background: rgba(0, 255, 65, 0.1); padding-left: 26px; border-left: 3px solid #00ff41; text-shadow: 0 0 12px rgba(0, 255, 65, 0.6); } .folder-tag { display: block; font-size: 0.56rem; color: rgba(0, 255, 65, 0.52); margin-top: 4px; letter-spacing: 1.2px; } .folder-entry.active .folder-tag { color: rgba(0, 255, 65, 0.7); } /* --- Document viewer ----------------------------------------------------- */ .document-viewer { flex: 1; overflow-y: auto; padding: 36px 44px; background: rgba(1, 6, 1, 0.65); scrollbar-width: thin; scrollbar-color: rgba(0, 255, 65, 0.15) transparent; } .document-viewer::-webkit-scrollbar { width: 4px; } .document-viewer::-webkit-scrollbar-track { background: transparent; } .document-viewer::-webkit-scrollbar-thumb { background: rgba(0, 255, 65, 0.15); border-radius: 2px; } /* Empty / prompt state */ .doc-select-prompt { height: 100%; display: flex; align-items: center; justify-content: center; } .prompt-inner { text-align: center; font-family: var(--font-mono); } .prompt-icon { width: 48px; height: 48px; margin: 0 auto 20px; color: rgba(0, 255, 65, 0.2); } .prompt-icon svg { width: 100%; height: 100%; } .prompt-inner p { font-size: 0.85rem; color: rgba(0, 255, 65, 0.25); letter-spacing: 4px; text-transform: uppercase; margin-bottom: 8px; } .prompt-sub { font-size: 0.58rem !important; color: rgba(0, 255, 65, 0.15) !important; letter-spacing: 2px !important; } /* --- Loading state ------------------------------------------------------- */ .doc-loading { padding: 80px 0; font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-terminal); letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 255, 65, 0.5); } .doc-loading--error { color: var(--color-classified); text-shadow: 0 0 10px rgba(255, 36, 66, 0.5); } /* --- Classification banner ----------------------------------------------- */ .doc-classification-banner { display: inline-block; background: var(--color-classified); color: #fff; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 4px; padding: 4px 20px; margin-bottom: 28px; clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%); text-transform: uppercase; } /* --- Document header ----------------------------------------------------- */ .doc-header { border-bottom: 1px solid rgba(0, 255, 65, 0.18); padding-bottom: 22px; margin-bottom: 28px; } .doc-log-id { font-family: var(--font-mono); font-size: 0.58rem; color: rgba(0, 255, 65, 0.38); letter-spacing: 3px; margin-bottom: 10px; text-transform: uppercase; } .doc-title { font-family: var(--font-mono); font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 700; color: var(--color-terminal); letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 18px rgba(0, 255, 65, 0.45), 0 0 40px rgba(0, 255, 65, 0.18); line-height: 1.2; margin-bottom: 14px; } .doc-meta { display: flex; flex-wrap: wrap; gap: 6px 28px; font-family: var(--font-mono); font-size: 0.6rem; color: rgba(0, 255, 65, 0.42); letter-spacing: 1px; } .doc-meta span::before { content: '// '; opacity: 0.5; } /* --- Document body ------------------------------------------------------- */ .doc-body { font-family: var(--font-mono); color: rgba(0, 255, 65, 0.82); font-size: 0.88rem; line-height: 1.9; letter-spacing: 0.4px; } /* Declassified asset frame */ .doc-image-container { position: relative; margin: 26px 0; border: 1px solid rgba(0, 255, 65, 0.2); overflow: hidden; } .doc-image-container::before { content: 'DECLASSIFIED ASSET'; position: absolute; top: 8px; left: 8px; font-family: var(--font-mono); font-size: 0.52rem; color: rgba(0, 255, 65, 0.7); letter-spacing: 3px; background: rgba(0, 14, 3, 0.85); padding: 2px 8px; z-index: 1; } .doc-image { display: block; width: 100%; max-height: 300px; object-fit: cover; /* green-tinted monochrome */ filter: sepia(100%) saturate(280%) hue-rotate(88deg) brightness(0.65); opacity: 0.85; } /* Paragraph styles */ .doc-paragraph { margin-bottom: 20px; } /* Redacted spans */ .doc-redacted { background: rgba(0, 255, 65, 0.88); color: transparent; padding: 1px 4px; user-select: none; cursor: not-allowed; border-radius: 1px; transition: background 0.3s ease; } .doc-redacted:hover { background: rgba(255, 36, 66, 0.8); } /* Italic emphasis inside lore */ .doc-body em { color: rgba(0, 255, 65, 0.65); font-style: italic; font-weight: normal; } /* Footnote */ .doc-footnote { margin-top: 36px; padding-top: 14px; border-top: 1px solid rgba(0, 255, 65, 0.12); font-family: var(--font-mono); font-size: 0.6rem; color: rgba(0, 255, 65, 0.3); letter-spacing: 1.5px; text-transform: uppercase; } /* --- Blinking cursor ----------------------------------------------------- */ @keyframes blink-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } .cursor-blink { color: var(--color-terminal, #00ff41); animation: blink-cursor 1.1s step-start infinite; } /* --- Title glitch flash -------------------------------------------------- */ @keyframes glitch-flash { 0% { text-shadow: 0 0 18px rgba(0, 255, 65, 0.45), 2px 0 rgba(255, 36, 66, 0.6); } 20% { text-shadow: -2px 0 rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 255, 65, 0.7); } 40% { text-shadow: 2px 0 rgba(255, 36, 66, 0.6), 0 0 18px rgba(0, 255, 65, 0.45); } 60% { text-shadow: 0 0 40px rgba(0, 255, 65, 0.9), -2px 0 rgba(0, 240, 255, 0.4); } 100% { text-shadow: 0 0 18px rgba(0, 255, 65, 0.45); } } .glitch-flash { animation: glitch-flash 0.6s ease forwards; } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 720px) { body[data-page-id="archive"] { overflow-y: auto; } .archive-terminal { height: auto; overflow: visible; } .archive-layout { flex-direction: column; overflow: visible; height: auto; } .folder-sidebar { width: 100%; max-height: 38vh; border-right: none; border-bottom: 1px solid rgba(0, 255, 65, 0.18); } .document-viewer { padding: 20px 16px; } .terminal-status-bar { font-size: 0.5rem; letter-spacing: 1px; padding: 5px 12px; } } @media (prefers-reduced-motion: reduce) { .cursor-blink { animation: none; opacity: 1; } .glitch-flash { animation: none; } .doc-paragraph { transition: none !important; opacity: 1 !important; transform: none !important; } } /* ========================================================================== ARCHIVE — FS TERMINAL (single-panel file navigator) ========================================================================== */ .archive-fs-terminal { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; } .fs-toolbar { display: flex; align-items: center; gap: 14px; padding: 8px 22px; background: rgba(0, 255, 65, 0.04); border-bottom: 1px solid rgba(0, 255, 65, 0.14); flex-shrink: 0; } .fs-back-btn { display: flex; align-items: center; gap: 5px; padding: 5px 12px; background: rgba(0, 255, 65, 0.06); border: 1px solid rgba(0, 255, 65, 0.28); color: rgba(0, 255, 65, 0.75); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 1.5px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; flex-shrink: 0; text-transform: uppercase; } .fs-back-btn:hover:not(:disabled) { background: rgba(0, 255, 65, 0.12); border-color: rgba(0, 255, 65, 0.55); color: #00ff41; } .fs-back-btn:disabled { opacity: 0.3; cursor: default; } .fs-back-dots { letter-spacing: 0; font-size: 0.75rem; opacity: 0.8; } .fs-path-bar { flex: 1; font-family: var(--font-mono); font-size: 0.6rem; color: rgba(0, 255, 65, 0.45); letter-spacing: 1.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-entry-count { font-family: var(--font-mono); font-size: 0.54rem; color: rgba(0, 255, 65, 0.28); letter-spacing: 1.5px; flex-shrink: 0; } .fs-file-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0, 255, 65, 0.2) transparent; padding: 6px 0; columns: 3; column-gap: 0; } .fs-file-list::-webkit-scrollbar { width: 4px; } .fs-file-list::-webkit-scrollbar-track { background: transparent; } .fs-file-list::-webkit-scrollbar-thumb { background: rgba(0, 255, 65, 0.2); border-radius: 2px; } .fs-entry { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid rgba(0, 255, 65, 0.07); border-left: 3px solid transparent; transition: background 0.14s, border-left-color 0.14s, padding-left 0.14s; font-family: var(--font-mono); break-inside: avoid; -webkit-column-break-inside: avoid; } .fs-entry:hover, .fs-entry:focus-visible { background: rgba(0, 255, 65, 0.055); border-left-color: rgba(0, 255, 65, 0.55); padding-left: 20px; outline: none; } .fs-entry--classified:hover, .fs-entry--classified:focus-visible { background: rgba(255, 36, 66, 0.055); border-left-color: rgba(255, 36, 66, 0.55); } /* Type-specific colors */ .fs-entry--folder { color: rgba(0, 255, 65, 0.95); } .fs-entry--log { color: rgba(0, 255, 65, 0.78); } .fs-entry--image { color: rgba(0, 240, 255, 0.78); } .fs-entry--video { color: rgba(0, 240, 255, 0.78); } .fs-entry--classified { color: rgba(255, 70, 90, 0.92); border-bottom-color: rgba(255, 36, 66, 0.08); } .fs-entry-icon { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.5px; flex-shrink: 0; width: 40px; text-align: center; padding: 2px 4px; border: 1px solid rgba(0, 255, 65, 0.28); color: rgba(0, 255, 65, 0.6); opacity: 0.85; } .fs-entry--classified .fs-entry-icon { border-color: rgba(255, 36, 66, 0.4); color: rgba(255, 36, 66, 0.75); } .fs-entry--image .fs-entry-icon, .fs-entry--video .fs-entry-icon { border-color: rgba(0, 240, 255, 0.32); color: rgba(0, 240, 255, 0.65); } .fs-entry-body { flex: 1; min-width: 0; } .fs-entry-label { font-size: 0.78rem; letter-spacing: 0.8px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 6px rgba(0, 255, 65, 0.2); } .fs-entry--classified .fs-entry-label { text-shadow: 0 0 6px rgba(255, 36, 66, 0.3); } .fs-entry--image .fs-entry-label, .fs-entry--video .fs-entry-label { text-shadow: 0 0 6px rgba(0, 240, 255, 0.2); } .fs-entry-tag { font-size: 0.54rem; letter-spacing: 1.2px; opacity: 0.5; display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-entry-arrow { font-size: 0.9rem; opacity: 0.3; flex-shrink: 0; font-family: var(--font-mono); } .fs-entry--classified .fs-entry-arrow { opacity: 0.4; } /* === VIEW TOGGLE === */ .fs-view-toggle { display: flex; gap: 2px; flex-shrink: 0; } .fs-view-btn { display: flex; align-items: center; gap: 4px; padding: 4px 9px; background: rgba(0, 255, 65, 0.04); border: 1px solid rgba(0, 255, 65, 0.18); color: rgba(0, 255, 65, 0.45); font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 1.5px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; text-transform: uppercase; } .fs-view-btn:hover { background: rgba(0, 255, 65, 0.1); border-color: rgba(0, 255, 65, 0.45); color: rgba(0, 255, 65, 0.85); } .fs-view-btn.active { background: rgba(0, 255, 65, 0.12); border-color: rgba(0, 255, 65, 0.55); color: #00ff41; } /* === ICON GRID VIEW === */ .fs-file-list--icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; padding: 18px 20px; align-content: start; overflow-y: auto; } .fs-file-list--icons .fs-entry { flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px 10px 12px; border-bottom: none; border: 1px solid rgba(0, 255, 65, 0.12); border-left: 1px solid rgba(0, 255, 65, 0.12); text-align: center; min-height: 90px; transition: background 0.14s, border-color 0.14s, transform 0.14s; } .fs-file-list--icons .fs-entry:hover, .fs-file-list--icons .fs-entry:focus-visible { background: rgba(0, 255, 65, 0.07); border-color: rgba(0, 255, 65, 0.45); padding-left: 10px; transform: translateY(-2px); outline: none; } .fs-file-list--icons .fs-entry--classified:hover, .fs-file-list--icons .fs-entry--classified:focus-visible { background: rgba(255, 36, 66, 0.07); border-color: rgba(255, 36, 66, 0.45); } .fs-file-list--icons .fs-entry-icon { width: 52px; height: 44px; font-size: 0.58rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fs-file-list--icons .fs-entry-body { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; width: 100%; } .fs-file-list--icons .fs-entry-label { font-size: 0.6rem; text-align: center; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; line-height: 1.3; word-break: break-word; } .fs-file-list--icons .fs-entry-tag { display: none; } .fs-file-list--icons .fs-entry-arrow { display: none; } .fs-classified-lock { display: inline-flex; align-items: center; margin-right: 5px; opacity: 0.8; vertical-align: middle; } .fs-loading-state, .fs-empty-state { padding: 80px 32px; font-family: var(--font-mono); font-size: 0.72rem; color: rgba(0, 255, 65, 0.3); letter-spacing: 2.5px; text-align: center; line-height: 2; } .fs-footer { display: flex; justify-content: space-between; align-items: center; padding: 6px 22px; font-family: var(--font-mono); font-size: 0.5rem; color: rgba(0, 255, 65, 0.18); letter-spacing: 1px; border-top: 1px solid rgba(0, 255, 65, 0.08); flex-shrink: 0; } /* === DOCUMENT MODAL === */ .doc-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 8000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; padding: 20px; } .doc-modal-backdrop.active { opacity: 1; visibility: visible; } .doc-modal { width: 100%; max-width: 760px; max-height: 88vh; background: rgba(1, 6, 1, 0.97); border: 1px solid rgba(0, 255, 65, 0.28); box-shadow: 0 0 60px rgba(0, 255, 65, 0.07), 0 0 120px rgba(0, 255, 65, 0.03); display: flex; flex-direction: column; transform: translateY(18px); transition: transform 0.3s var(--ease-out-expo, ease); } .doc-modal-backdrop.active .doc-modal { transform: translateY(0); } .doc-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 9px 18px; border-bottom: 1px solid rgba(0, 255, 65, 0.12); flex-shrink: 0; background: rgba(0, 255, 65, 0.03); } .doc-modal-title { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 2.5px; color: rgba(0, 255, 65, 0.35); } .doc-modal-close { padding: 4px 12px; background: rgba(0, 255, 65, 0.05); border: 1px solid rgba(0, 255, 65, 0.28); color: rgba(0, 255, 65, 0.65); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 2px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .doc-modal-close:hover { background: rgba(0, 255, 65, 0.1); border-color: rgba(0, 255, 65, 0.55); color: #00ff41; } .doc-modal-inner { flex: 1; overflow-y: auto; padding: 36px 44px; scrollbar-width: thin; scrollbar-color: rgba(0, 255, 65, 0.15) transparent; } .doc-modal-inner::-webkit-scrollbar { width: 4px; } .doc-modal-inner::-webkit-scrollbar-track { background: transparent; } .doc-modal-inner::-webkit-scrollbar-thumb { background: rgba(0, 255, 65, 0.15); border-radius: 2px; } @media (max-width: 720px) and (min-width: 421px) { .fs-file-list { columns: 2; } } @media (max-width: 720px) { .archive-fs-terminal { overflow: visible; } .fs-file-list { overflow-y: visible; } .fs-entry { padding: 10px 12px; } .fs-entry:hover, .fs-entry:focus-visible { padding-left: 18px; } .fs-entry-tag { display: none; } .doc-modal-inner { padding: 20px 16px; } .doc-modal { max-height: 95vh; } body[data-page-id="archive"] { overflow-y: auto; } .archive-terminal { height: auto; overflow: visible; } } @media (max-width: 420px) { .fs-file-list { columns: 1; } } /* ========================================================================== ARCHIVE — HIGHLY CLASSIFIED SIDEBAR SECTION ========================================================================== */ .classified-section-header { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; background: rgba(255, 36, 66, 0.08); border-top: 1px solid rgba(255, 36, 66, 0.35); border-bottom: 1px solid rgba(255, 36, 66, 0.2); flex-shrink: 0; } .classified-label { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; color: #ff2442; letter-spacing: 2.5px; text-transform: uppercase; text-shadow: 0 0 8px rgba(255, 36, 66, 0.5); } .classified-label svg { flex-shrink: 0; color: #ff2442; } .classified-tier { font-family: var(--font-mono); font-size: 0.52rem; color: rgba(255, 36, 66, 0.65); letter-spacing: 2px; border: 1px solid rgba(255, 36, 66, 0.4); padding: 1px 5px; } .classified-path { padding: 5px 16px; font-family: var(--font-mono); font-size: 0.5rem; color: rgba(255, 36, 66, 0.4); letter-spacing: 1px; border-bottom: 1px solid rgba(255, 36, 66, 0.1); flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .redact-path { color: rgba(255, 36, 66, 0.6); } /* Classified entries */ .classified-entry { padding: 12px 16px 12px 18px; font-family: var(--font-mono); font-size: 0.7rem; color: rgba(255, 70, 90, 0.88); letter-spacing: 0.6px; cursor: pointer; border-bottom: 1px solid rgba(255, 36, 66, 0.1); transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease, border-left 0.2s ease; border-left: 3px solid transparent; line-height: 1.4; text-shadow: 0 0 6px rgba(255, 36, 66, 0.25); } .classified-entry:hover, .classified-entry:focus-visible { color: #ff4458; background: rgba(255, 36, 66, 0.07); padding-left: 24px; border-left: 3px solid rgba(255, 36, 66, 0.55); text-shadow: 0 0 10px rgba(255, 36, 66, 0.5); outline: none; } .classified-lock { display: inline-flex; align-items: center; margin-right: 6px; opacity: 0.75; vertical-align: middle; } .classified-tag { color: rgba(255, 36, 66, 0.45) !important; } .classified-entry:hover .classified-tag, .classified-entry:focus-visible .classified-tag { color: rgba(255, 36, 66, 0.65) !important; } /* ========================================================================== ARCHIVE — AUTH MODAL ========================================================================== */ .auth-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.93); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: calc(var(--z-sync) - 1); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .auth-modal-backdrop.active { opacity: 1; visibility: visible; } .auth-modal { width: 100%; max-width: 520px; margin: 16px; background: #0c0000; border: 2px solid #ff2442; box-shadow: 0 0 60px rgba(255, 36, 66, 0.45), 0 0 120px rgba(255, 36, 66, 0.15), inset 0 0 40px rgba(255, 36, 66, 0.05); padding: 0; transform: translateY(16px); transition: transform 0.3s var(--ease-out-expo); font-family: var(--font-mono); } .auth-modal-backdrop.active .auth-modal { transform: translateY(0); } /* Modal header */ .auth-modal-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px; background: rgba(255, 36, 66, 0.15); border-bottom: 2px solid rgba(255, 36, 66, 0.5); color: #ff2442; text-shadow: 0 0 16px rgba(255, 36, 66, 0.9); } .auth-modal-header svg { flex-shrink: 0; width: 24px; height: 24px; color: #ff2442; filter: drop-shadow(0 0 8px rgba(255, 36, 66, 0.9)); } .auth-modal-header h2 { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin: 0; } .auth-modal-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; padding: 9px 24px; font-size: 0.72rem; color: rgba(255, 80, 100, 0.8); letter-spacing: 1.5px; border-bottom: 1px solid rgba(255, 36, 66, 0.2); background: rgba(255, 36, 66, 0.05); } .auth-file-label { padding: 14px 24px 0; font-size: 0.74rem; color: rgba(255, 120, 135, 0.9); letter-spacing: 1.5px; text-transform: uppercase; } /* Form */ #auth-form-state { padding: 20px 24px 24px; } .auth-field { margin-bottom: 18px; } .auth-label { display: block; font-family: var(--font-mono); font-size: 0.78rem; color: rgba(255, 60, 80, 0.95); letter-spacing: 3px; margin-bottom: 8px; text-shadow: 0 0 8px rgba(255, 36, 66, 0.4); } .auth-input { width: 100%; background: rgba(18, 0, 0, 0.95); border: 1px solid rgba(255, 36, 66, 0.55); color: #ff9aaa; font-family: var(--font-mono); font-size: 1rem; letter-spacing: 2px; padding: 11px 14px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; -webkit-appearance: none; appearance: none; border-radius: 0; } .auth-input::placeholder { color: rgba(255, 36, 66, 0.28); letter-spacing: 1px; font-size: 0.88rem; } .auth-input:focus { border-color: #ff2442; box-shadow: 0 0 18px rgba(255, 36, 66, 0.4), inset 0 0 8px rgba(255, 36, 66, 0.08); } .auth-actions { display: flex; gap: 12px; margin-top: 22px; } .auth-btn { flex: 1; padding: 13px 16px; font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; border: 1px solid; transition: all 0.2s ease; } .auth-btn--submit { background: rgba(255, 36, 66, 0.18); border-color: #ff2442; color: #ff2442; text-shadow: 0 0 10px rgba(255, 36, 66, 0.7); box-shadow: 0 0 16px rgba(255, 36, 66, 0.25); } .auth-btn--submit:hover { background: rgba(255, 36, 66, 0.3); box-shadow: 0 0 28px rgba(255, 36, 66, 0.5); } .auth-btn--abort { background: transparent; border-color: rgba(255, 36, 66, 0.4); color: rgba(255, 36, 66, 0.7); } .auth-btn--abort:hover { border-color: rgba(255, 36, 66, 0.7); color: rgba(255, 36, 66, 0.95); } /* Verifying state */ .auth-verify-state { padding: 52px 24px 56px; text-align: center; display: none; } #auth-dots { display: flex; justify-content: center; gap: 14px; margin-bottom: 32px; } #auth-dots span { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 36, 66, 0.1); border: 1px solid rgba(255, 36, 66, 0.45); transition: background 0.2s ease, box-shadow 0.2s ease; } #auth-dots span.active { background: #ff2442; box-shadow: 0 0 20px rgba(255, 36, 66, 1), 0 0 40px rgba(255, 36, 66, 0.5); } .auth-verify-text { font-family: var(--font-mono); font-size: 0.9rem; color: rgba(255, 80, 100, 0.95); letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 12px rgba(255, 36, 66, 0.5); } /* Denied state */ .auth-denied-state { padding: 48px 24px 44px; text-align: center; display: none; } .auth-denied-icon { font-size: 3.5rem; color: #ff2442; text-shadow: 0 0 30px rgba(255, 36, 66, 1), 0 0 70px rgba(255, 36, 66, 0.6); margin-bottom: 20px; line-height: 1; } .auth-denied-title { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: #ff2442; letter-spacing: 5px; text-shadow: 0 0 24px rgba(255, 36, 66, 1), 0 0 50px rgba(255, 36, 66, 0.5); margin-bottom: 14px; } .auth-denied-sub { font-family: var(--font-mono); font-size: 0.82rem; color: rgba(255, 90, 110, 0.9); letter-spacing: 2px; margin-bottom: 22px; line-height: 1.7; } .auth-denied-register { font-family: var(--font-mono); font-size: 0.88rem; color: rgba(255, 140, 155, 0.95); letter-spacing: 2px; margin-bottom: 30px; text-shadow: 0 0 10px rgba(255, 36, 66, 0.35); cursor: default; } .auth-btn--close { width: auto; flex: none; margin: 0 auto; display: block; padding: 11px 36px; } /* Auth modal — tabs */ .auth-tabs { display: flex; border-bottom: 1px solid rgba(255, 36, 66, 0.25); } .auth-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 12px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 1.5px; color: rgba(255, 36, 66, 0.5); cursor: pointer; transition: color 0.2s, border-color 0.2s; margin-bottom: -1px; } .auth-tab.active, .auth-tab:hover { color: #ff2442; border-color: #ff2442; } /* Auth modal — message bar */ .auth-msg { min-height: 18px; font-size: 0.7rem; letter-spacing: 1.5px; font-family: var(--font-mono); padding: 6px 24px 0; text-align: center; } .auth-msg--error { color: #ff2442; } .auth-msg--ok { color: #00f0ff; } /* Auth modal — form body */ .auth-form-body { padding: 16px 24px 24px; } /* Auth modal — tier note */ .auth-tier-note { font-family: var(--font-mono); font-size: 0.68rem; color: rgba(0, 240, 255, 0.7); letter-spacing: 0.5px; margin-bottom: 16px; line-height: 1.6; } .auth-tier-note small { color: rgba(255, 255, 255, 0.4); letter-spacing: 0; } /* Auth modal — granted state */ .auth-granted-state { padding: 48px 24px 44px; text-align: center; } .auth-granted-icon { font-size: 3.5rem; color: #00f0ff; margin-bottom: 12px; } .auth-granted-title { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; color: #00f0ff; letter-spacing: 4px; margin-bottom: 8px; } .auth-granted-sub { font-family: var(--font-mono); font-size: 0.78rem; color: rgba(0, 240, 255, 0.65); letter-spacing: 1.5px; } /* ============================================================================= EVIDENCE VAULT — RIGHT SIDEBAR ============================================================================= */ .vault-sidebar { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid rgba(0, 255, 65, 0.18); background: rgba(0, 10, 2, 0.82); overflow-y: auto; overflow-x: hidden; } .vault-header { padding: 10px 14px 8px; background: rgba(0, 255, 65, 0.05); border-bottom: 1px solid rgba(0, 255, 65, 0.14); flex-shrink: 0; } .vault-title-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; color: var(--color-terminal, #00ff41); } .vault-title { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 400; letter-spacing: 3px; color: rgba(0, 255, 65, 0.75); text-shadow: 0 0 8px rgba(0, 255, 65, 0.35); margin: 0; } .vault-subtitle { font-family: var(--font-mono); font-size: 0.52rem; color: rgba(0, 255, 65, 0.35); letter-spacing: 1.5px; margin: 0; } /* Vault body scrollable area */ .vault-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0 16px; } /* Empty state */ .vault-empty { font-family: var(--font-mono); font-size: 0.58rem; color: rgba(0, 255, 65, 0.35); letter-spacing: 1.5px; text-align: center; padding: 28px 12px; line-height: 1.9; } .vault-empty-icon { display: block; font-size: 1.4rem; opacity: 0.25; margin-bottom: 10px; } .vault-empty-sub { font-size: 0.5rem; opacity: 0.45; margin-top: 6px; line-height: 1.7; } /* Section header */ .vault-section-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px 5px; margin-top: 8px; border-bottom: 1px solid rgba(0, 255, 65, 0.1); } .vault-section-title { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 2.5px; color: rgba(0, 255, 65, 0.7); } .vault-section-desc { display: none; /* too wide for sidebar */ } .vault-section-count { font-family: var(--font-mono); font-size: 0.5rem; color: rgba(0, 255, 65, 0.3); letter-spacing: 1px; } /* Item list */ .vault-grid { display: flex; flex-direction: column; padding: 4px 0; } .vault-thumb { display: flex; align-items: center; gap: 8px; padding: 6px 14px; cursor: pointer; outline: none; transition: background 0.15s; border-left: 2px solid transparent; } .vault-thumb:hover, .vault-thumb:focus-visible { background: rgba(0, 255, 65, 0.06); border-left-color: rgba(0, 255, 65, 0.5); } /* Small preview thumbnail */ .vault-thumb-media { width: 36px; height: 24px; flex-shrink: 0; overflow: hidden; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 255, 65, 0.15); position: relative; display: flex; align-items: center; justify-content: center; } .vault-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.8) saturate(0.6); } .vault-thumb-vid-el { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.7); pointer-events: none; } /* Play icon centred over video preview */ .vault-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: rgba(0, 255, 65, 0.9); } .vault-thumb-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.5px; color: rgba(0, 255, 65, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .vault-thumb-type { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 1.5px; color: rgba(0, 255, 65, 0.25); flex-shrink: 0; } /* Classified video thumbnails — red accent */ .vault-thumb--classified { border-color: rgba(255, 36, 66, 0.4); box-shadow: 0 0 8px rgba(255, 36, 66, 0.12); } .vault-thumb--classified:hover, .vault-thumb--classified:focus-visible { border-color: rgba(255, 36, 66, 0.75); box-shadow: 0 0 14px rgba(255, 36, 66, 0.25); background: rgba(255, 36, 66, 0.04); } .vault-thumb--classified .vault-thumb-type { color: rgba(255, 36, 66, 0.4); } .vault-classified-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(20, 0, 5, 0.82); color: rgba(255, 36, 66, 0.75); } .vault-classified-label { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 2.5px; color: rgba(255, 36, 66, 0.65); } .vault-section-header--classified .vault-section-title { color: rgba(255, 36, 66, 0.85); text-shadow: 0 0 8px rgba(255, 36, 66, 0.3); } .vault-section-header--classified { border-left: 3px solid rgba(255, 36, 66, 0.5); border-bottom: 1px solid rgba(255, 36, 66, 0.15); } .vault-classified-placeholder { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: rgba(255, 36, 66, 0.4); font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 1.5px; } /* ============================================================================= MEDIA LIGHTBOX ============================================================================= */ .media-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; z-index: 9000; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .media-lightbox.active { opacity: 1; pointer-events: all; } .lightbox-close { position: absolute; top: 18px; right: 22px; background: none; border: 1px solid rgba(0, 255, 65, 0.35); color: rgba(0, 255, 65, 0.8); font-family: var(--font-mono); font-size: 1rem; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; z-index: 10; } .lightbox-close:hover { background: rgba(0, 255, 65, 0.12); color: #00ff41; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 255, 65, 0.25); color: rgba(0, 255, 65, 0.7); font-size: 2.5rem; font-family: var(--font-mono); width: 48px; height: 80px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; z-index: 10; line-height: 1; } .lightbox-nav:hover { background: rgba(0, 255, 65, 0.1); color: #00ff41; } .lightbox-prev { left: 16px; } .lightbox-next { right: 16px; } .lightbox-content { max-width: 90vw; max-height: 82vh; display: flex; align-items: center; justify-content: center; } .lightbox-image { max-width: 90vw; max-height: 82vh; object-fit: contain; display: block; box-shadow: 0 0 40px rgba(0, 255, 65, 0.08); } .lightbox-video { max-width: 90vw; max-height: 80vh; display: block; outline: none; } .lightbox-caption { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 2px; color: rgba(0, 255, 65, 0.45); white-space: nowrap; text-align: center; pointer-events: none; } /* Responsive: vault sidebar stacks below on mobile */ @media (max-width: 720px) { .vault-sidebar { width: 100%; height: 280px; border-left: none; border-top: 1px solid rgba(0, 255, 65, 0.18); } } @media (max-width: 480px) { .lightbox-nav { width: 36px; height: 60px; font-size: 1.8rem; } } /* ============================================================================= MARSAPIEN SQUAD — Operations Hub ============================================================================= */ body[data-page-id="marsapien-squad"] { overflow-x: hidden; overflow-y: auto; background: #030610; --color-squad: #00c8ff; --color-squad-dim: rgba(0, 200, 255, 0.4); } body[data-page-id="marsapien-squad"] .scanline-layer { display: block; opacity: 0.04; } /* ---- Squad background — slideshow-ready layers ---- */ #squad-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* CSS space canvas — visible when no image layers are active */ #squad-bg::before { content: ''; position: absolute; inset: 0; background: /* distant star cluster shimmer */ radial-gradient(ellipse 120% 80% at 70% 20%, rgba(0, 80, 160, 0.28) 0%, transparent 60%), /* warm nebula blush — upper left */ radial-gradient(ellipse 90% 60% at 15% 30%, rgba(80, 0, 160, 0.18) 0%, transparent 55%), /* cyan arc — colony beacon */ radial-gradient(ellipse 60% 100% at 90% 60%, rgba(0, 180, 255, 0.12) 0%, transparent 50%), /* deep rust horizon — Mars tint */ radial-gradient(ellipse 140% 40% at 50% 100%, rgba(160, 40, 10, 0.22) 0%, transparent 55%), /* base void */ linear-gradient(160deg, #04071a 0%, #02040e 45%, #06030f 100%); animation: squad-nebula-drift 28s ease-in-out infinite alternate; } /* Subtle star-points layer */ #squad-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 8%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(1px 1px at 88% 14%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(1px 1px at 34% 22%, rgba(255,255,255,0.30) 0%, transparent 100%), radial-gradient(1px 1px at 60% 5%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(1px 1px at 75% 35%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 22% 50%, rgba(255,255,255,0.25) 0%, transparent 100%), radial-gradient(1px 1px at 92% 52%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(1px 1px at 48% 65%, rgba(255,255,255,0.30) 0%, transparent 100%), radial-gradient(1px 1px at 5% 78%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 67% 82%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(1px 1px at 38% 90%, rgba(255,255,255,0.28) 0%, transparent 100%), radial-gradient(1px 1px at 82% 95%, rgba(200,220,255,0.35) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 55% 44%, rgba(180,220,255,0.50) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 20% 18%, rgba(255,255,255,0.60) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 78% 70%, rgba(255,255,255,0.45) 0%, transparent 100%); animation: squad-stars-twinkle 6s ease-in-out infinite alternate; } @keyframes squad-nebula-drift { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.04) translate(-8px, 12px); } 100% { transform: scale(1.02) translate(10px, -6px); } } @keyframes squad-stars-twinkle { 0% { opacity: 0.55; } 50% { opacity: 0.85; } 100% { opacity: 0.65; } } /* Crossfade-ready image slide layers */ .squad-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.4s ease; } .squad-bg-layer.active { opacity: 1; } /* Darkening vignette so text/cards stay readable */ #squad-bg-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(3, 6, 16, 0.55) 0%, rgba(3, 6, 16, 0.15) 30%, rgba(3, 6, 16, 0.25) 65%, rgba(3, 6, 16, 0.75) 100% ); } /* Header */ .squad-header { border-bottom: 1px solid rgba(0, 200, 255, 0.15); background: rgba(2, 3, 10, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .squad-header .logo span, .squad-header .logo-link { color: var(--color-squad); text-shadow: 0 0 8px rgba(0,200,255,0.4); } .squad-header .bar { background-color: var(--color-squad); } .squad-header .nav-links a:hover { color: var(--color-squad); } /* Hero */ .squad-main { position: relative; z-index: var(--z-ui); min-height: calc(100vh - var(--header-height)); padding: 0 24px 60px; } .squad-hero { position: sticky; top: var(--header-height); z-index: calc(var(--z-ui) - 1); text-align: center; padding: 22px 16px 16px; /* glass backing so cards don't bleed through */ background: rgba(3, 6, 16, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Boundary line below the tag */ .squad-hero::after { content: ''; display: block; margin-top: 16px; height: 1px; background: linear-gradient( to right, transparent 0%, rgba(255, 255, 255, 0.12) 20%, rgba(0, 200, 255, 0.30) 50%, rgba(255, 255, 255, 0.12) 80%, transparent 100% ); } .squad-hero-tag { font-family: var(--font-mono); font-size: clamp(0.62rem, 1.3vw, 0.76rem); letter-spacing: 5px; color: rgba(255, 255, 255, 0.72); text-transform: uppercase; } /* Department grid — cinematic cards */ .squad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; max-width: 1100px; margin: 0 auto; padding-top: 32px; } .squad-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 18px; background: rgba(8, 14, 32, 0.72); border: 1px solid rgba(255, 255, 255, 0.07); border-top: 3px solid var(--card-accent, rgba(0, 200, 255, 0.5)); text-decoration: none; color: inherit; position: relative; overflow: hidden; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color 0.25s, box-shadow 0.25s, background 0.25s, transform 0.2s; } /* Subtle glow wash behind the icon */ .squad-card::before { content: ''; position: absolute; top: -30px; right: -20px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--card-accent-glow, rgba(0,200,255,0.12)) 0%, transparent 70%); pointer-events: none; } .squad-card:hover { border-color: rgba(255, 255, 255, 0.12); border-top-color: var(--card-accent, rgba(0, 200, 255, 0.9)); background: rgba(12, 20, 44, 0.82); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.04); transform: translateY(-2px); } /* Per-department color themes */ .squad-card[data-dept="farming"] { --card-accent: #3ddc84; --card-accent-glow: rgba(61, 220, 132, 0.14); --card-icon-color: #3ddc84; } .squad-card[data-dept="engine-labs"] { --card-accent: #ff8c42; --card-accent-glow: rgba(255, 140, 66, 0.14); --card-icon-color: #ff8c42; } .squad-card[data-dept="security"] { --card-accent: #ff4d6d; --card-accent-glow: rgba(255, 77, 109, 0.14); --card-icon-color: #ff4d6d; } .squad-card[data-dept="genetics"] { --card-accent: #c77dff; --card-accent-glow: rgba(199, 125, 255, 0.14); --card-icon-color: #c77dff; } .squad-card[data-dept="administration"] { --card-accent: #00c8ff; --card-accent-glow: rgba(0, 200, 255, 0.14); --card-icon-color: #00c8ff; } /* Card icon */ .squad-card-icon { width: 36px; height: 36px; color: var(--card-icon-color, rgba(0, 200, 255, 0.8)); opacity: 0.85; flex-shrink: 0; transition: opacity 0.2s, transform 0.2s; } .squad-card:hover .squad-card-icon { opacity: 1; transform: scale(1.08); } .squad-card-id { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 2.5px; color: var(--card-accent, rgba(0, 200, 255, 0.5)); opacity: 0.7; } .squad-card-title { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 700; letter-spacing: 2px; color: rgba(255, 255, 255, 0.92); margin-top: 2px; } .squad-card-detail { font-family: var(--font-sans); font-size: 0.69rem; color: rgba(255, 255, 255, 0.45); line-height: 1.5; flex: 1; } .squad-card-arrow { font-size: 0.8rem; color: var(--card-accent, rgba(0, 200, 255, 0.3)); opacity: 0.4; align-self: flex-end; transition: opacity 0.2s, transform 0.2s; } .squad-card:hover .squad-card-arrow { opacity: 1; transform: translateX(4px); } @media (max-width: 600px) { .squad-hero { padding: 40px 0 32px; } .squad-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 400px) { .squad-grid { grid-template-columns: 1fr; } } /* ============================================================ DEPARTMENT PAGES — Martian surface aesthetic ============================================================ */ /* Shared body base */ body[data-page-id^="dept-"] { overflow-x: hidden; overflow-y: auto; background: #1a0a04; } /* ---- Shared background canvas ---- */ .dept-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* Martian surface base — iron-oxide rust, dust haze */ .dept-bg::before { content: ''; position: absolute; inset: 0; background: /* bright rust horizon glow */ radial-gradient(ellipse 160% 55% at 50% 105%, rgba(210, 80, 20, 0.65) 0%, transparent 55%), /* left flank iron dust */ radial-gradient(ellipse 70% 80% at 0% 70%, rgba(180, 55, 10, 0.40) 0%, transparent 60%), /* right upper haze */ radial-gradient(ellipse 80% 50% at 95% 25%, rgba(160, 45, 8, 0.30) 0%, transparent 55%), /* mid-sky amber */ radial-gradient(ellipse 120% 40% at 50% 45%, rgba(140, 60, 15, 0.18) 0%, transparent 60%), /* base: warm dark rust, not pure black */ linear-gradient(175deg, #2a0d04 0%, #1a0805 35%, #160604 70%, #100402 100%); animation: dept-surface-drift 32s ease-in-out infinite alternate; } /* Dust particulate layer */ .dept-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 12%, rgba(200,120, 60,0.45) 0%, transparent 100%), radial-gradient(1px 1px at 85% 8%, rgba(200,120, 60,0.30) 0%, transparent 100%), radial-gradient(1px 1px at 30% 25%, rgba(255,180,100,0.25) 0%, transparent 100%), radial-gradient(1px 1px at 65% 18%, rgba(200,120, 60,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 50% 45%, rgba(255,200,120,0.20) 0%, transparent 100%), radial-gradient(1px 1px at 20% 55%, rgba(200,100, 50,0.30) 0%, transparent 100%), radial-gradient(1px 1px at 90% 50%, rgba(220,130, 70,0.25) 0%, transparent 100%), radial-gradient(1px 1px at 75% 72%, rgba(200,120, 60,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 8% 80%, rgba(255,180,100,0.28) 0%, transparent 100%), radial-gradient(1px 1px at 42% 85%, rgba(200,120, 60,0.22) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 55% 35%, rgba(255,200,140,0.40) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 22% 90%, rgba(220,140, 80,0.35) 0%, transparent 100%); animation: dept-dust-shimmer 8s ease-in-out infinite alternate; } @keyframes dept-surface-drift { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.03) translate(-6px, 10px); } 100% { transform: scale(1.02) translate(8px, -5px); } } @keyframes dept-dust-shimmer { 0% { opacity: 0.5; } 100% { opacity: 0.8; } } /* Per-dept: keep the Martian rust base, add a dept-tinted upper sky */ .dept-bg--farming::before { background: radial-gradient(ellipse 160% 55% at 50% 105%, rgba(210, 80, 20, 0.65) 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 0% 70%, rgba(61, 160, 80, 0.20) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 95% 25%, rgba(40, 120, 40, 0.18) 0%, transparent 55%), linear-gradient(175deg, #1c1004 0%, #180804 35%, #160604 70%, #100402 100%); } .dept-bg--engine-labs::before { background: radial-gradient(ellipse 160% 55% at 50% 105%, rgba(220, 90, 15, 0.70) 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 0% 70%, rgba(200, 80, 10, 0.35) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 95% 25%, rgba(255,100, 20, 0.22) 0%, transparent 55%), linear-gradient(175deg, #2e0d02 0%, #1e0804 35%, #180604 70%, #100402 100%); } .dept-bg--security::before { background: radial-gradient(ellipse 160% 55% at 50% 105%, rgba(200, 30, 30, 0.55) 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 0% 70%, rgba(160, 20, 20, 0.35) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 95% 25%, rgba(180, 50, 10, 0.25) 0%, transparent 55%), linear-gradient(175deg, #260604 0%, #180404 35%, #140304 70%, #0e0202 100%); } .dept-bg--genetics::before { background: radial-gradient(ellipse 160% 55% at 50% 105%, rgba(200, 70, 20, 0.60) 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 0% 70%, rgba(100, 20,140, 0.25) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 95% 25%, rgba( 80, 10,100, 0.20) 0%, transparent 55%), linear-gradient(175deg, #1e0610 0%, #160408 35%, #120304 70%, #0e0202 100%); } .dept-bg--administration::before { background: radial-gradient(ellipse 160% 55% at 50% 105%, rgba(190, 70, 18, 0.58) 0%, transparent 55%), radial-gradient(ellipse 70% 80% at 0% 70%, rgba( 0, 80,140, 0.22) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 95% 25%, rgba( 0, 60,120, 0.18) 0%, transparent 55%), linear-gradient(175deg, #060e16 0%, #0a0608 35%, #100404 70%, #0e0302 100%); } /* Shared vignette — light touch, let the rust breathe */ .dept-bg-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(10, 3, 2, 0.45) 0%, rgba(10, 3, 2, 0.05) 25%, rgba(10, 3, 2, 0.05) 65%, rgba(10, 3, 2, 0.55) 100% ); } /* ---- Header — fully opaque so no content bleeds through ---- */ .dept-header { border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(14, 4, 2, 0.92) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .dept-header--farming { border-bottom-color: rgba(61, 220, 132, 0.2); } .dept-header--farming .logo-link, .dept-header--farming .logo span { color: #3ddc84; } .dept-header--farming .bar { background-color: #3ddc84; } .dept-header--engine-labs { border-bottom-color: rgba(255, 140, 66, 0.2); } .dept-header--engine-labs .logo-link, .dept-header--engine-labs .logo span { color: #ff8c42; } .dept-header--engine-labs .bar { background-color: #ff8c42; } .dept-header--security { border-bottom-color: rgba(255, 77, 109, 0.2); } .dept-header--security .logo-link, .dept-header--security .logo span { color: #ff4d6d; } .dept-header--security .bar { background-color: #ff4d6d; } .dept-header--genetics { border-bottom-color: rgba(199, 125, 255, 0.2); } .dept-header--genetics .logo-link, .dept-header--genetics .logo span { color: #c77dff; } .dept-header--genetics .bar { background-color: #c77dff; } .dept-header--administration { border-bottom-color: rgba(0, 200, 255, 0.2); } .dept-header--administration .logo-link, .dept-header--administration .logo span { color: #00c8ff; } .dept-header--administration .bar { background-color: #00c8ff; } /* ---- Main layout — independent scroll container below the header ---- */ .dept-main { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; z-index: var(--z-ui); overflow-y: auto; overflow-x: hidden; padding: 0 24px 80px; } /* Breadcrumb — sticky within the scroll container, not the viewport */ .dept-breadcrumb { position: sticky; top: 0; z-index: 5; margin-left: -24px; margin-right: -24px; padding: 16px 24px 14px; display: flex; align-items: center; gap: 12px; background: rgba(16, 4, 2, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-family: var(--font-mono); text-transform: uppercase; } /* Separator slash */ .dept-breadcrumb span:not(:first-child):not(:last-child) { color: rgba(255, 255, 255, 0.20); font-size: 0.7rem; } /* Current page label */ .dept-breadcrumb span:last-child { font-size: 0.58rem; letter-spacing: 2px; color: rgba(255, 255, 255, 0.40); } /* Back link — large, prominent */ .dept-breadcrumb a { font-size: 0.78rem; font-weight: 700; letter-spacing: 2.5px; color: rgba(255, 255, 255, 0.85); text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color 0.2s; } .dept-breadcrumb a:hover { color: #fff; } /* Boundary line under breadcrumb */ .dept-breadcrumb::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient( to right, transparent 0%, rgba(200, 80, 20, 0.30) 20%, rgba(255, 140, 60, 0.45) 50%, rgba(200, 80, 20, 0.30) 80%, transparent 100% ); } /* Content area — starts below the sticky breadcrumb (breadcrumb ~50px) */ .dept-content { max-width: 1100px; margin: 0 auto; padding: 48px 0 0; } /* ---- Section ---- */ .dept-section { margin-bottom: 64px; } .dept-section-label { font-family: var(--font-mono); font-size: 0.60rem; font-weight: 700; letter-spacing: 3px; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; margin-bottom: 16px; } .dept-title { font-family: var(--font-mono); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; letter-spacing: 4px; line-height: 1.0; color: rgba(255, 255, 255, 0.95); margin: 0 0 40px; } .dept-title-sub { display: block; font-size: 0.45em; font-weight: 400; letter-spacing: 8px; color: rgba(255, 255, 255, 0.35); margin-top: 6px; } /* Nav card — same style as status card, sits beside it in the grid */ .dept-nav-card { background: rgba(10, 6, 4, 0.65); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 2px solid rgba(255, 120, 50, 0.35); padding: 20px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .dept-nav-card-header { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 3px; color: rgba(255, 255, 255, 0.70); text-transform: uppercase; margin-bottom: 14px; } .dept-nav-strip { display: flex; flex-wrap: wrap; gap: 6px; } .dept-section-title { font-family: var(--font-mono); font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 700; letter-spacing: 4px; color: rgba(255, 255, 255, 0.80); margin: 0 0 28px; } /* ---- About card ---- */ .dept-about-card { background: rgba(10, 6, 4, 0.65); border: 1px solid rgba(255, 255, 255, 0.08); border-top: 2px solid rgba(255, 120, 50, 0.35); padding: 28px 32px 32px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* Top row: text left, stats right */ .dept-about-top { display: flex; align-items: flex-start; gap: 32px; } .dept-about-text { flex: 1 1 0; min-width: 0; } .dept-about-text p { font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.75; color: rgba(255, 255, 255, 0.60); margin: 0 0 14px; } .dept-about-text p:last-child { margin-bottom: 0; } /* Stats — top right */ .dept-stats-row { display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; padding-left: 32px; border-left: 1px solid rgba(255, 255, 255, 0.07); text-align: right; } .dept-stat { display: flex; flex-direction: column; gap: 3px; } .dept-stat-val { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: rgba(255, 255, 255, 0.90); letter-spacing: 1px; white-space: nowrap; } .dept-stat-lbl { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 2.5px; color: rgba(255, 255, 255, 0.28); text-transform: uppercase; } /* Nav strip — below the text, inside card */ .dept-about-nav { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .dept-about-nav .dept-nav-card-header { margin-bottom: 10px; } .dept-about-nav .dept-nav-strip { display: flex; flex-wrap: wrap; gap: 6px; } .dept-nav-btn { font-family: var(--font-mono); font-size: 0.54rem; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; text-decoration: none; padding: 5px 10px; border: 1px solid currentColor; color: var(--dept-nav-color, rgba(255,255,255,0.35)); background: transparent; opacity: 0.55; transition: opacity 0.18s, background 0.18s; white-space: nowrap; } .dept-nav-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); } .dept-nav-btn.current { opacity: 1; background: rgba(255, 255, 255, 0.06); cursor: default; pointer-events: none; } /* Per-dept accent colours for the nav buttons */ [data-page-id="dept-farming"] .dept-nav-btn { --dept-nav-color: #3ddc84; } [data-page-id="dept-engine-labs"] .dept-nav-btn { --dept-nav-color: #ff8c42; } [data-page-id="dept-security"] .dept-nav-btn { --dept-nav-color: #ff4d6d; } [data-page-id="dept-genetics"] .dept-nav-btn { --dept-nav-color: #c77dff; } [data-page-id="dept-administration"] .dept-nav-btn { --dept-nav-color: #00c8ff; } /* Status dots — still used in division ops cards */ .dept-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .dept-status-dot.active { background: #3ddc84; box-shadow: 0 0 6px rgba(61, 220, 132, 0.6); } .dept-status-dot.warn { background: #ffb340; box-shadow: 0 0 6px rgba(255, 179, 64, 0.6); } /* ---- Divider ---- */ .dept-divider { height: 1px; margin: 0 0 64px; background: linear-gradient( to right, transparent 0%, rgba(255, 120, 50, 0.20) 25%, rgba(255, 180, 100, 0.30) 50%, rgba(255, 120, 50, 0.20) 75%, transparent 100% ); } /* ---- Gallery ---- */ .dept-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 12px; } .dept-gallery-item--wide { grid-column: span 2; } /* placeholder (no content yet) */ .dept-gallery-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 16 / 10; background: rgba(10, 6, 4, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.25); font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; padding: 16px; transition: border-color 0.2s, background 0.2s; } .dept-gallery-placeholder svg { width: 48px; height: auto; } .dept-gallery-item:hover .dept-gallery-placeholder { border-color: rgba(255, 120, 50, 0.25); background: rgba(16, 10, 6, 0.75); } /* real image slot */ .dept-gallery-img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.2s, filter 0.2s; filter: brightness(0.88) saturate(0.9); } .dept-gallery-item:hover .dept-gallery-img { border-color: rgba(255, 120, 50, 0.35); filter: brightness(1) saturate(1.05); } /* lore / report text card */ .dept-gallery-card { display: flex; flex-direction: column; gap: 10px; aspect-ratio: 16 / 10; background: rgba(10, 6, 4, 0.65); border: 1px solid rgba(255, 255, 255, 0.07); padding: 18px 20px; transition: border-color 0.2s, background 0.2s; overflow: hidden; } .dept-gallery-item:hover .dept-gallery-card { border-color: rgba(255, 120, 50, 0.3); background: rgba(18, 10, 6, 0.8); } .dept-gallery-card-tag { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 160, 80, 0.7); } .dept-gallery-card-title { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); line-height: 1.3; } .dept-gallery-card-body { font-size: 0.68rem; line-height: 1.6; color: rgba(220, 200, 185, 0.65); flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } .dept-gallery-card-footer { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.2); margin-top: auto; } /* ---- Dept image slideshow ---- */ /* Crossfading background images loaded from S3 per department. JS adds .dept-slide divs inside #dept-slideshow and cycles opacity. */ #dept-slideshow { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .dept-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1.6s ease-in-out; } .dept-slide.active { opacity: 0.22; } /* subtle, Martian bg still bleeds through */ /* ---- Division section ---- */ .dept-division-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 8px; } .dept-division-card { background: rgba(10, 6, 4, 0.60); border: 1px solid rgba(255, 255, 255, 0.07); border-top: 2px solid rgba(255, 120, 50, 0.25); padding: 16px 18px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .dept-division-card-title { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); margin-bottom: 12px; } .dept-division-card-items { display: flex; flex-direction: column; gap: 8px; } .dept-division-card-item { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; color: rgba(255, 255, 255, 0.82); } .dept-division-card-item .dept-status-dot { flex-shrink: 0; } /* ---- Data section ---- */ .dept-data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 8px; } .dept-metric { background: rgba(8, 5, 3, 0.70); border: 1px solid rgba(255, 255, 255, 0.07); padding: 18px 20px; position: relative; overflow: hidden; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .dept-metric::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, rgba(255,120,50,0.4), transparent); } .dept-metric-lbl { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.80); margin-bottom: 10px; } .dept-metric-val { font-family: var(--font-mono); font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: 1px; color: #ffffff; line-height: 1; } .dept-metric-unit { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 1px; color: rgba(255, 255, 255, 0.60); margin-top: 6px; text-transform: uppercase; } .dept-metric-tag { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(61, 220, 132, 0.95); margin-top: 8px; } .dept-metric-tag.warn { color: rgba(255, 179, 64, 1.0); } .dept-metric-tag.err { color: rgba(255, 80, 80, 1.0); } .dept-data-note { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, 0.28); margin-top: 14px; } /* ---- Responsive ---- */ @media (max-width: 900px) { .dept-about-top { flex-direction: column; } .dept-stats-row { flex-direction: row; border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 16px; text-align: left; } } @media (max-width: 760px) { .dept-about-top { flex-direction: column; } .dept-division-grid { grid-template-columns: 1fr; } .dept-data-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .dept-data-grid { grid-template-columns: 1fr; } .dept-stats-row { gap: 20px; } } /* ============================================================ SURF PLANET — real NASA planetary imagery ============================================================ */ body[data-page-id="surf-planet"] { overflow: hidden; background: #000; } /* ---- Cinematic background layers (crossfade) ---- */ #sp-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; cursor: pointer; } .sp-bg-layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; } .sp-bg-layer.active { opacity: 1; } /* Gradient darken for HUD/selector legibility */ #sp-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.10) 35%, rgba(0,0,0,0.25) 65%, rgba(0,0,0,0.70) 100% ); z-index: 1; pointer-events: none; } /* ---- Planet selector pill bar ---- */ .sp-selector { position: fixed; top: 78px; left: 50%; transform: translateX(-50%); z-index: 15; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 0 16px; } .sp-planet-btn { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 2px; text-transform: uppercase; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(0, 200, 255, 0.3); color: rgba(0, 200, 255, 0.7); padding: 6px 14px; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sp-planet-btn:hover { background: rgba(0, 200, 255, 0.12); color: #00c8ff; border-color: rgba(0, 200, 255, 0.6); } .sp-planet-btn.active { background: rgba(0, 200, 255, 0.18); color: #ffffff; border-color: rgba(0, 200, 255, 0.9); } .sp-planet-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ---- Gallery thumbnail strip ---- */ .sp-gallery { position: fixed; bottom: 55px; left: 0; right: 0; z-index: 15; padding: 0 20px; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .sp-gallery.visible { opacity: 1; pointer-events: all; } .sp-gallery-inner { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0; scrollbar-width: none; } .sp-gallery-inner::-webkit-scrollbar { display: none; } .sp-thumb { flex-shrink: 0; width: 80px; height: 60px; cursor: pointer; border: 1px solid rgba(0, 200, 255, 0.2); overflow: hidden; transition: border-color 0.15s, transform 0.15s; } .sp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sp-thumb:hover { border-color: rgba(0, 200, 255, 0.7); transform: scale(1.06); } .sp-thumb.active { border-color: #00c8ff; border-width: 2px; } /* ---- Loading state ---- */ .sp-loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.2s; } .sp-loading.visible { opacity: 1; } .sp-loading-text { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 3px; color: rgba(0, 200, 255, 0.75); animation: tv-signal-blink 1.2s infinite; } /* ---- Error state ---- */ .sp-error { position: fixed; bottom: 130px; left: 50%; transform: translateX(-50%); z-index: 20; pointer-events: none; opacity: 0; transition: opacity 0.2s; white-space: nowrap; } .sp-error.visible { opacity: 1; } .sp-error-text { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 2px; color: rgba(255, 80, 80, 0.85); } /* ---- Detail overlay (lightbox) ---- */ .sp-detail { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, 0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .sp-detail.active { opacity: 1; pointer-events: all; } .sp-detail-close { position: absolute; top: 18px; right: 22px; background: none; border: 1px solid rgba(0, 200, 255, 0.35); color: rgba(0, 200, 255, 0.8); font-family: var(--font-mono); font-size: 1rem; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .sp-detail-close:hover { background: rgba(0, 200, 255, 0.12); color: #00c8ff; } .sp-detail-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 200, 255, 0.25); color: rgba(0, 200, 255, 0.7); font-size: 2.5rem; width: 48px; height: 80px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; z-index: 10; line-height: 1; } .sp-detail-nav:hover { background: rgba(0, 200, 255, 0.1); color: #00c8ff; } .sp-detail-prev { left: 16px; } .sp-detail-next { right: 16px; } .sp-detail-img-wrap { max-width: 90vw; max-height: 72vh; display: flex; align-items: center; justify-content: center; } .sp-detail-img { max-width: 90vw; max-height: 72vh; object-fit: contain; display: block; box-shadow: 0 0 60px rgba(0, 200, 255, 0.08); } .sp-detail-caption { margin-top: 16px; text-align: center; font-family: var(--font-mono); max-width: 70vw; padding: 0 16px; } .sp-detail-title { font-size: 0.78rem; letter-spacing: 2px; color: rgba(255, 255, 255, 0.9); margin-bottom: 6px; } .sp-detail-meta { font-size: 0.6rem; letter-spacing: 1.5px; color: rgba(0, 200, 255, 0.55); line-height: 1.7; } /* ---- Header sits above everything ---- */ .surf-header { position: fixed; left: 0; right: 0; z-index: 20; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%); backdrop-filter: none; } /* ---- HUD overlay ---- */ .surf-hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: var(--font-mono); color: rgba(0, 200, 255, 0.85); } .hud-top-left { position: absolute; top: 90px; left: 24px; } .hud-top-right { position: absolute; top: 90px; right: 24px; text-align: right; } .hud-bottom-left { position: absolute; bottom: 58px; left: 24px; } .hud-bottom { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); } .hud-label { font-size: 0.58rem; letter-spacing: 0.18em; opacity: 0.5; text-transform: uppercase; margin-bottom: 4px; } .hud-value { font-size: 0.82rem; letter-spacing: 0.08em; } .hud-controls { font-size: 0.56rem; letter-spacing: 0.2em; opacity: 0.4; white-space: nowrap; } /* Corner bracket decorations */ .hud-corner { position: absolute; width: 36px; height: 36px; border-color: rgba(0, 200, 255, 0.25); border-style: solid; } .hud-corner--tl { top: 70px; left: 16px; border-width: 1px 0 0 1px; } .hud-corner--tr { top: 70px; right: 16px; border-width: 1px 1px 0 0; } .hud-corner--bl { bottom: 16px; left: 16px; border-width: 0 0 1px 1px; } .hud-corner--br { bottom: 16px; right: 16px; border-width: 0 1px 1px 0; } @media (max-width: 600px) { .hud-top-left, .hud-top-right { top: 76px; } .hud-corner--tl, .hud-corner--tr { top: 58px; } .sp-selector { top: 64px; gap: 5px; } .sp-planet-btn { font-size: 0.56rem; padding: 5px 10px; } .sp-detail-nav { width: 36px; height: 60px; font-size: 1.8rem; } .sp-detail-caption { max-width: 90vw; } .sp-thumb { width: 64px; height: 48px; } .hud-bottom-left { bottom: 52px; } } /* ========================================================================== ORBITAL RELAY — live satellite tracker ========================================================================== */ body[data-page-id="orbital-relay"] { overflow: hidden; } #cesium-container { position: fixed; inset: 0; z-index: 0; } /* Strip Cesium's default chrome — keep only the globe */ #cesium-container .cesium-widget-credits { display: none !important; } #cesium-container .cesium-viewer-toolbar, #cesium-container .cesium-viewer-animationContainer, #cesium-container .cesium-viewer-timelineContainer, #cesium-container .cesium-viewer-bottom { display: none !important; } /* Shared HUD card */ .orbital-hud { position: fixed; z-index: 15; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 1.4px; color: rgba(200, 240, 255, 0.95); background: linear-gradient(145deg, rgba(0, 12, 24, 0.92) 0%, rgba(0, 25, 45, 0.88) 100%); border: 1px solid rgba(0, 210, 255, 0.45); border-radius: 8px; padding: 18px 22px; backdrop-filter: blur(16px); min-width: 210px; box-shadow: 0 0 30px rgba(0, 210, 255, 0.08), 0 4px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* ISS panel — amber accent */ #iss-hud { top: 90px; left: 24px; border-color: rgba(245, 166, 35, 0.55); box-shadow: 0 0 30px rgba(245, 166, 35, 0.12), 0 4px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .hud-title { font-size: 0.6rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: rgba(0, 210, 255, 0.6); border-bottom: 1px solid rgba(0, 210, 255, 0.2); padding-bottom: 8px; margin-bottom: 12px; } #iss-hud .hud-title { color: rgba(245, 166, 35, 0.7); border-color: rgba(245, 166, 35, 0.2); } .hud-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 6px; } .hud-label { color: rgba(200, 240, 255, 0.45); font-size: 0.62rem; letter-spacing: 1.5px; } .hud-val { color: #ffffff; font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(255, 255, 255, 0.3); } .hud-live { margin-top: 12px; padding-top: 8px; border-top: 1px solid rgba(245, 166, 35, 0.2); color: #f5a623; font-size: 0.62rem; font-weight: 700; letter-spacing: 2px; animation: tv-signal-blink 1.6s infinite; } .hud-divider { border: none; border-top: 1px solid rgba(0, 210, 255, 0.15); margin: 12px 0; } .hud-controls { font-size: 0.58rem; color: rgba(200, 240, 255, 0.35); letter-spacing: 1.5px; line-height: 1.7; } .hud-controls-hint { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0, 210, 255, 0.15); font-size: 0.58rem; color: rgba(200, 240, 255, 0.35); letter-spacing: 1.5px; text-align: center; } /* Bottom satellite count bar */ .orbital-sat-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 15; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 600; letter-spacing: 2px; color: rgba(200, 240, 255, 0.7); background: rgba(0, 12, 24, 0.82); border: 1px solid rgba(0, 210, 255, 0.3); border-radius: 20px; padding: 8px 20px; backdrop-filter: blur(12px); white-space: nowrap; box-shadow: 0 0 20px rgba(0, 210, 255, 0.06); } .orbital-sat-bar span { color: #ffffff; font-weight: 700; } /* Mission year bar */ #year-bar-mission { position: fixed; bottom: 76px; left: 24px; min-width: 210px; max-width: 250px; } .year-track-wrap { display: flex; align-items: center; gap: 8px; margin: 8px 0 6px; } .year-label { font-size: 0.6rem; color: rgba(200, 240, 255, 0.45); letter-spacing: 1px; white-space: nowrap; } .year-track { flex: 1; height: 4px; background: rgba(0, 210, 255, 0.15); border-radius: 2px; position: relative; } .year-pip--now { position: absolute; left: 0%; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: #f5a623; border-radius: 50%; box-shadow: 0 0 8px #f5a623, 0 0 16px rgba(245,166,35,0.4); } .year-status { font-size: 0.58rem; color: rgba(245, 166, 35, 0.65); letter-spacing: 1.5px; text-align: center; margin-top: 2px; } /* Relay ship overlay */ #relay-ship { position: fixed; bottom: -18px; right: 36px; width: 80px; z-index: 3; color: #f5a623; opacity: 0.55; filter: drop-shadow(0 0 10px rgba(245,166,35,0.45)); pointer-events: none; } /* Signal Key toggle button */ .key-hud-toggle { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; color: inherit; font-family: inherit; font-size: inherit; letter-spacing: inherit; width: 100%; text-align: left; } .key-hud-toggle-arrow { font-size: 0.55rem; color: rgba(0, 210, 255, 0.6); transition: transform 0.2s ease; display: inline-block; } #key-hud:not(.key-hud--collapsed) .key-hud-toggle-arrow { transform: rotate(90deg); } .key-hud-body { margin-top: 12px; } /* Collapsed state: shrink min-width to just fit the title row */ .key-hud--collapsed { min-width: 0; } /* ISS HUD toggle uses amber accent to match ISS color */ #iss-hud .key-hud-toggle-arrow { color: rgba(245, 166, 35, 0.7); } /* Constellation layers panel — top right (replaces former signal key position) */ #layers-hud { top: 90px; right: 24px; min-width: 0; } .layer-list { list-style: none; padding: 0; margin: 8px 0 0; } .layer-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 9px; } .layer-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.68rem; font-family: var(--font-mono); letter-spacing: 1.2px; color: rgba(200, 240, 255, 0.85); user-select: none; } /* Hide native checkbox — swatch acts as indicator */ .layer-label input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .layer-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; opacity: 0.3; transition: opacity 0.2s ease, transform 0.2s ease; } /* Swatch + label brighten when checked */ .layer-label:has(input:checked) .layer-swatch { opacity: 1; transform: scale(1.3); } .layer-label:has(input:checked) { color: rgba(255, 255, 255, 0.95); } .layer-name { font-weight: 600; letter-spacing: 1.5px; } .layer-flag { font-size: 0.78rem; line-height: 1; } .layer-status { font-size: 0.58rem; color: rgba(200, 240, 255, 0.4); letter-spacing: 1px; min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; } /* ISS row — no checkbox, static indicator */ .layer-label--static { cursor: default; user-select: none; } .layer-label--static .layer-swatch { opacity: 1; } /* Section divider rows inside layer list */ .layer-item--section { margin-top: 6px; margin-bottom: 4px; border-top: 1px solid rgba(0, 210, 255, 0.12); padding-top: 6px; justify-content: flex-start; } .layer-section-label { font-size: 0.55rem; font-weight: 700; letter-spacing: 2px; color: rgba(0, 210, 255, 0.35); text-transform: uppercase; } /* Starlink density sub-row inside layers panel */ .layer-item--slider { display: block; padding: 4px 0 2px; border-top: 1px solid rgba(0, 210, 255, 0.1); margin-top: -4px; margin-bottom: 6px; } .sl-slider-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 4px; } .sl-label-min, .sl-label-max { white-space: nowrap; font-size: 0.58rem; color: rgba(200, 240, 255, 0.4); letter-spacing: 1px; min-width: 24px; } .sl-label-max { text-align: right; } .sl-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: rgba(0, 210, 255, 0.2); border-radius: 2px; outline: none; cursor: pointer; } .sl-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #00ccff; box-shadow: 0 0 6px rgba(0, 204, 255, 0.6); cursor: pointer; } .sl-slider::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: #00ccff; box-shadow: 0 0 6px rgba(0, 204, 255, 0.6); cursor: pointer; } .sl-slider-val { font-size: 0.6rem; color: rgba(200, 240, 255, 0.5); letter-spacing: 1.5px; text-align: center; } .sl-slider-val span { color: #00ccff; font-weight: 700; } @media (max-width: 600px) { #iss-hud { top: 76px; left: 12px; } #layers-hud { display: none; } #year-bar-mission { display: none; } #relay-ship { width: 56px; right: 12px; } .orbital-hud { font-size: 0.64rem; padding: 12px 16px; min-width: 170px; } } /* ========================================================================== VAULT GATE MODAL ========================================================================== */ .vault-gate-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: calc(var(--z-sync) + 10); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 16px; } .vault-gate-backdrop.active { opacity: 1; visibility: visible; } .vault-gate-modal { width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: #080000; border: 2px solid #ff2442; box-shadow: 0 0 80px rgba(255, 36, 66, 0.5), 0 0 160px rgba(255, 36, 66, 0.15), inset 0 0 50px rgba(255, 36, 66, 0.04); font-family: var(--font-mono); transform: translateY(20px); transition: transform 0.35s var(--ease-out-expo); } .vault-gate-backdrop.active .vault-gate-modal { transform: translateY(0); } /* Header */ .vault-gate-header { padding: 24px 28px 20px; border-bottom: 2px solid rgba(255, 36, 66, 0.4); background: rgba(255, 36, 66, 0.08); text-align: center; } .vault-gate-stamp { display: inline-block; font-size: 1.5rem; font-weight: 900; letter-spacing: 10px; color: #ff2442; border: 3px solid #ff2442; padding: 4px 18px; margin-bottom: 14px; text-shadow: 0 0 20px rgba(255, 36, 66, 1); box-shadow: 0 0 18px rgba(255, 36, 66, 0.5), inset 0 0 12px rgba(255, 36, 66, 0.15); transform: rotate(-2deg); } .vault-gate-title { font-size: 0.95rem; font-weight: 700; letter-spacing: 3px; color: #ff2442; margin: 0 0 12px; text-shadow: 0 0 12px rgba(255, 36, 66, 0.7); } .vault-gate-subtitle { font-size: 0.7rem; line-height: 1.75; color: rgba(255, 140, 155, 0.85); letter-spacing: 1.2px; margin: 0; } /* Tabs */ .vault-gate-tabs { display: flex; border-bottom: 1px solid rgba(255, 36, 66, 0.25); } .vg-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; color: rgba(255, 120, 135, 0.6); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 2px; padding: 12px 8px; cursor: pointer; transition: color 0.2s, border-color 0.2s; text-transform: uppercase; margin-bottom: -1px; } .vg-tab.active, .vg-tab:hover { color: #ff2442; border-color: #ff2442; } /* Message bar */ .vg-msg { min-height: 20px; font-size: 0.7rem; letter-spacing: 1.5px; padding: 0 28px; line-height: 2; text-align: center; } .vg-msg--error { color: #ff2442; } .vg-msg--ok { color: #00f0ff; } /* Form */ .vg-form { padding: 16px 28px 24px; } .vg-field { margin-bottom: 14px; } .vg-label { display: block; font-size: 0.65rem; letter-spacing: 2px; color: rgba(255, 100, 120, 0.8); margin-bottom: 6px; text-transform: uppercase; } .vg-input { width: 100%; background: rgba(255, 36, 66, 0.05); border: 1px solid rgba(255, 36, 66, 0.35); color: #fff; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 1.5px; padding: 10px 12px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; border-radius: 0; -webkit-appearance: none; appearance: none; } .vg-input:focus { border-color: #ff2442; box-shadow: 0 0 12px rgba(255, 36, 66, 0.3); } .vg-input::placeholder { color: rgba(255, 100, 120, 0.4); letter-spacing: 1px; } /* Radio group */ .vg-radio-group { display: flex; flex-direction: column; gap: 8px; } .vg-radio-label { display: flex; align-items: flex-start; gap: 10px; font-size: 0.72rem; color: rgba(255, 180, 190, 0.85); letter-spacing: 1px; cursor: pointer; line-height: 1.5; } .vg-radio-label input[type="radio"] { accent-color: #ff2442; margin-top: 2px; flex-shrink: 0; } /* Actions */ .vg-actions { display: flex; gap: 12px; margin-top: 20px; } .vg-submit { flex: 1; background: rgba(255, 36, 66, 0.15); border: 1px solid #ff2442; color: #ff2442; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 2.5px; padding: 12px 8px; cursor: pointer; text-transform: uppercase; transition: background 0.2s, box-shadow 0.2s, color 0.2s; } .vg-submit:hover:not(:disabled) { background: rgba(255, 36, 66, 0.3); box-shadow: 0 0 18px rgba(255, 36, 66, 0.4); color: #fff; } .vg-submit:disabled { opacity: 0.5; cursor: not-allowed; } .vg-cancel { background: none; border: 1px solid rgba(255, 36, 66, 0.3); color: rgba(255, 100, 120, 0.6); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 2px; padding: 12px 16px; cursor: pointer; text-transform: uppercase; transition: border-color 0.2s, color 0.2s; } .vg-cancel:hover { border-color: #ff2442; color: #ff2442; } /* Success state */ .vg-success { padding: 36px 28px; text-align: center; } .vg-success-icon { font-size: 2.5rem; color: #00f0ff; text-shadow: 0 0 24px rgba(0, 240, 255, 0.9); margin-bottom: 16px; } .vg-success-name-line { font-size: 0.85rem; font-weight: 700; letter-spacing: 3px; color: #00f0ff; text-shadow: 0 0 12px rgba(0, 240, 255, 0.6); margin: 0 0 10px; } .vg-success-level { font-size: 0.7rem; letter-spacing: 1.5px; color: rgba(255, 180, 190, 0.8); margin: 0; } @media (max-width: 480px) { .vault-gate-modal { max-height: 100vh; border-left: none; border-right: none; } .vault-gate-header { padding: 18px 16px 14px; } .vg-form { padding: 12px 16px 20px; } .vault-gate-stamp { font-size: 1.1rem; letter-spacing: 6px; } } /* ═══════════════════════════════════════════════════════════════ TV ORB — Lore Terminal Button ═══════════════════════════════════════════════════════════════ */ .tv-orb { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 90px; height: 76px; border-radius: 10px; border: 1.5px solid rgba(245, 166, 35, 0.4); background: rgba(0, 0, 0, 0.55); color: rgba(245, 166, 35, 0.7); cursor: pointer; padding: 0; font-family: var(--font-mono); letter-spacing: 1.5px; margin-bottom: 20px; transition: border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s; backdrop-filter: blur(4px); animation: tv-orb-pulse 2.2s ease-in-out infinite; } .tv-orb::before { content: ''; position: absolute; inset: -7px; border-radius: 15px; border: 1px solid rgba(245, 166, 35, 0); transition: border-color 0.3s, box-shadow 0.3s; } .tv-orb:hover { animation: none; border-color: rgba(245, 166, 35, 0.9); color: #f5a623; box-shadow: 0 0 22px rgba(245, 166, 35, 0.45), 0 0 45px rgba(245, 166, 35, 0.15); transform: translateY(-4px); } .tv-orb:hover::before { border-color: rgba(245, 166, 35, 0.22); box-shadow: 0 0 32px rgba(245, 166, 35, 0.1); } .tv-orb:active { transform: translateY(-1px); } .tv-orb-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; } .tv-orb-icon svg { width: 42px; height: 38px; } .tv-orb-label { text-transform: uppercase; font-size: 0.62rem; font-weight: 700; letter-spacing: 3px; color: inherit; } /* ═══════════════════════════════════════════════════════════════ TV VIEWPORT OVERLAY ═══════════════════════════════════════════════════════════════ */ .tv-viewport { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .tv-viewport.tv-viewport--open { opacity: 1; pointer-events: auto; } /* ── TV Body ──────────────────────────────────────────────────── */ .tv-body { display: flex; flex-direction: column; align-items: center; transform: scale(0.82) translateY(20px); transition: transform 0.55s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); } .tv-viewport.tv-viewport--open .tv-body { transform: scale(1) translateY(0); } .tv-bezel { background: linear-gradient(155deg, #2e2418 0%, #1c1710 55%, #0f0d09 100%); border-radius: 18px; padding: 20px 24px 18px; box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.18), 0 0 0 4px rgba(0, 0, 0, 0.8), 0 30px 80px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.6); width: min(820px, 92vw); position: relative; } /* ── Antennas ─────────────────────────────────────────────────── */ .tv-antenna-bar { display: flex; justify-content: center; gap: 90px; margin-bottom: 6px; height: 38px; align-items: flex-end; } .tv-antenna { width: 3px; background: linear-gradient(to top, #a87c20, #f0c840); border-radius: 2px; transform-origin: bottom center; position: relative; } .tv-antenna--left { height: 38px; transform: rotate(-20deg); } .tv-antenna--right { height: 38px; transform: rotate(20deg); } .tv-antenna::after { content: ''; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: #f5a623; box-shadow: 0 0 10px rgba(245, 166, 35, 0.9), 0 0 20px rgba(245, 166, 35, 0.4); } /* ── CRT Screen ───────────────────────────────────────────────── */ .tv-screen-wrap { border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.9), 0 0 0 3px #0a0806, 0 0 0 5px rgba(245, 166, 35, 0.1); } .tv-screen { position: relative; background: #020603; height: min(440px, 52vh); overflow: hidden; border-radius: 8px; } /* TV orb idle pulse — draws the eye before hover */ @keyframes tv-orb-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(245, 166, 35, 0.18); border-color: rgba(245, 166, 35, 0.38); } 50% { box-shadow: 0 0 36px rgba(245, 166, 35, 0.88), 0 0 70px rgba(245, 166, 35, 0.38), 0 0 100px rgba(245, 166, 35, 0.12); border-color: rgba(245, 166, 35, 1); } } /* Power-on: screen expands from a horizontal slit */ @keyframes tv-power-on { 0% { clip-path: inset(49% 0 49% 0); opacity: 0.4; } 50% { clip-path: inset(8% 0 8% 0); opacity: 1; } 100% { clip-path: inset(0% 0 0% 0); opacity: 1; } } @keyframes tv-power-off { 0% { clip-path: inset(0% 0 0% 0); opacity: 1; } 60% { clip-path: inset(8% 0 8% 0); opacity: 1; } 100% { clip-path: inset(49% 0 49% 0); opacity: 0; } } .tv-screen.tv-screen--powering-on { animation: tv-power-on 0.75s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) forwards; } .tv-screen.tv-screen--powering-off { animation: tv-power-off 0.42s ease-in forwards; } /* CRT glow on screen edges */ .tv-screen::after { content: ''; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 60px rgba(0, 255, 101, 0.04); pointer-events: none; z-index: 20; } /* Scanlines */ .tv-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 2px, rgba(0, 0, 0, 0.22) 2px, rgba(0, 0, 0, 0.22) 4px ); pointer-events: none; z-index: 15; } /* Screen inner content */ .tv-screen-inner { position: relative; z-index: 5; padding: 14px 20px 10px; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; } /* Header bar */ .tv-header-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 255, 101, 0.18); margin-bottom: 10px; flex-shrink: 0; } .tv-channel-badge { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 2px; color: rgba(0, 255, 101, 0.45); border: 1px solid rgba(0, 255, 101, 0.2); padding: 2px 7px; border-radius: 2px; flex-shrink: 0; } .tv-screen-title { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 1.5px; color: rgba(0, 255, 101, 0.45); flex: 1; } .tv-signal-dot { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 1px; color: #00ff65; animation: tv-signal-blink 1.6s infinite; flex-shrink: 0; } @keyframes tv-signal-blink { 0%, 65%, 100% { opacity: 1; } 35% { opacity: 0.1; } } /* Log text area */ .tv-log { flex: 1; overflow-y: auto; font-family: var(--font-mono); font-size: clamp(0.72rem, 1.4vw, 0.9rem); line-height: 1.75; color: #00ff65; text-shadow: 0 0 7px rgba(0, 255, 101, 0.45); scrollbar-width: thin; scrollbar-color: rgba(0, 255, 101, 0.25) transparent; white-space: pre-wrap; word-break: break-word; } .tv-log::-webkit-scrollbar { width: 4px; } .tv-log::-webkit-scrollbar-track { background: transparent; } .tv-log::-webkit-scrollbar-thumb { background: rgba(0, 255, 101, 0.25); border-radius: 2px; } .tv-log-line { display: block; } .tv-log-line--pending { opacity: 0; } .tv-log-line--dim { color: rgba(0, 255, 101, 0.4); text-shadow: none; } .tv-log-line--bright { color: #80ffb4; text-shadow: 0 0 12px rgba(0, 255, 101, 0.7); font-weight: bold; } .tv-log-line--warn { color: #f5c842; text-shadow: 0 0 8px rgba(245, 200, 66, 0.5); } /* Line reveal animation */ @keyframes tv-line-reveal { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } .tv-log-line--reveal { animation: tv-line-reveal 0.22s ease-out forwards; } /* Cursor + prompt row */ .tv-cursor-line { height: 1.6em; flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .tv-cursor { font-family: var(--font-mono); font-size: 0.75rem; color: #00ff65; text-shadow: 0 0 10px rgba(0, 255, 101, 0.7); animation: tv-blink 0.85s step-end infinite; flex-shrink: 0; } @keyframes tv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .tv-prompt { display: none; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 1.5px; color: rgba(0, 255, 101, 0.32); animation: tv-prompt-pulse 1.6s ease-in-out infinite; } .tv-prompt.tv-prompt--visible { display: inline; } @keyframes tv-prompt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } /* ── Controls bar ─────────────────────────────────────────────── */ .tv-controls-bar { display: flex; align-items: center; gap: 18px; padding-top: 14px; } .tv-power-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(245, 166, 35, 0.4); background: rgba(245, 166, 35, 0.07); color: rgba(245, 166, 35, 0.65); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.25s; flex-shrink: 0; } .tv-power-btn:hover { border-color: rgba(245, 166, 35, 0.9); color: #f5a623; background: rgba(245, 166, 35, 0.15); box-shadow: 0 0 18px rgba(245, 166, 35, 0.35); } .tv-power-btn svg { width: 18px; height: 18px; } .tv-speaker-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(245, 166, 35, 0.45); background: rgba(0, 0, 0, 0.4); color: rgba(245, 166, 35, 0.7); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .tv-speaker-btn:hover { border-color: rgba(245, 166, 35, 0.9); color: #f5a623; background: rgba(245, 166, 35, 0.15); box-shadow: 0 0 18px rgba(245, 166, 35, 0.35); } .tv-speaker-btn svg { width: 18px; height: 18px; } /* Show/hide correct icon based on mute state */ .tv-speaker-btn .tv-icon-muted { display: none; } .tv-speaker-btn--muted .tv-icon-on { display: none; } .tv-speaker-btn--muted .tv-icon-muted { display: block; } .tv-speaker-btn--muted { border-color: rgba(255, 0, 60, 0.5); color: rgba(255, 0, 60, 0.6); } .tv-pause-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(245, 166, 35, 0.45); background: rgba(0, 0, 0, 0.4); color: rgba(245, 166, 35, 0.7); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .tv-pause-btn:hover { border-color: rgba(245, 166, 35, 0.9); color: #f5a623; background: rgba(245, 166, 35, 0.15); box-shadow: 0 0 18px rgba(245, 166, 35, 0.35); } .tv-pause-btn svg { width: 16px; height: 16px; } /* Show pause icon by default; show play icon when paused */ .tv-pause-btn .tv-icon-play { display: none; } .tv-pause-btn--paused .tv-icon-pause { display: none; } .tv-pause-btn--paused .tv-icon-play { display: block; } .tv-pause-btn--paused { border-color: rgba(0, 200, 100, 0.5); color: rgba(0, 200, 100, 0.7); } .tv-knob-row { display: flex; gap: 10px; align-items: center; } .tv-knob { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a3c28, #18140d); border: 1px solid rgba(245, 166, 35, 0.18); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7); position: relative; } .tv-knob::after { content: ''; position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 2px; height: 7px; background: rgba(245, 166, 35, 0.45); border-radius: 1px; } .tv-knob--small { width: 14px; height: 14px; } .tv-vent-holes { margin-left: auto; display: grid; grid-template-columns: repeat(2, 7px); gap: 5px; } .tv-vent { width: 7px; height: 7px; border-radius: 1px; background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(245, 166, 35, 0.07); } /* ── Stand ────────────────────────────────────────────────────── */ .tv-stand { display: flex; flex-direction: column; align-items: center; } .tv-stand-neck { width: 56px; height: 18px; background: linear-gradient(to bottom, #2a1f12, #18140d); clip-path: polygon(18% 0%, 82% 0%, 96% 100%, 4% 100%); } .tv-stand-base { width: 130px; height: 12px; border-radius: 0 0 10px 10px; background: linear-gradient(to bottom, #1c1710, #0e0c08); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7); } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 600px) { .tv-bezel { padding: 14px 14px 14px; width: 96vw; } .tv-screen { height: min(340px, 50vh); } .tv-antenna-bar { gap: 55px; } .tv-stand-base { width: 90px; } .tv-stand-neck { width: 36px; } .tv-controls-bar { gap: 10px; } .tv-orb { width: 72px; height: 62px; } .tv-orb-icon, .tv-orb-icon svg { width: 34px; height: 30px; } .tv-screen-title { display: none; } } /* ── TV Orb Row (lore + film side by side) ──────────────────── */ .tv-orb-row { display: flex; align-items: flex-end; gap: 18px; justify-content: center; margin-bottom: 20px; } /* When inside a row, orbs don't carry their own bottom margin */ .tv-orb-row .tv-orb { margin-bottom: 0; } /* Film orb — same dimensions/pulse as base tv-orb, amber accent to differentiate */ .tv-orb--video { border-color: rgba(245, 130, 35, 0.38); animation: tv-video-orb-pulse 2.4s ease-in-out infinite; } .tv-orb--video:hover { color: rgba(245, 130, 35, 1); border-color: rgba(245, 130, 35, 1); box-shadow: 0 0 28px rgba(245, 130, 35, 0.7), 0 0 60px rgba(245, 130, 35, 0.3); } @keyframes tv-video-orb-pulse { 0%, 100% { box-shadow: 0 0 8px rgba(245, 130, 35, 0.18); border-color: rgba(245, 130, 35, 0.38); } 50% { box-shadow: 0 0 36px rgba(245, 130, 35, 0.88), 0 0 70px rgba(245, 130, 35, 0.38), 0 0 100px rgba(245, 130, 35, 0.12); border-color: rgba(245, 130, 35, 1); } } /* ── TV Video Screen inner layout ───────────────────────────── */ .tv-video-screen-inner { position: relative; z-index: 5; padding: 14px 0 0; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; } /* Push header inside standard padding */ .tv-video-screen-inner .tv-header-bar { padding-left: 20px; padding-right: 20px; } /* Video element — fills remaining screen height */ #tv-video-el { width: 100%; flex: 1; display: block; object-fit: contain; background: #000; min-height: 0; } /* Progress row */ .tv-video-progress-row { display: flex; align-items: center; gap: 10px; padding: 6px 14px; flex-shrink: 0; } .tv-video-progress-bar { flex: 1; height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; cursor: pointer; position: relative; } .tv-video-progress-bar:hover { background: rgba(255, 255, 255, 0.2); } .tv-video-progress-fill { height: 100%; width: 0%; background: #00ff65; border-radius: 2px; pointer-events: none; transition: width 0.25s linear; } .tv-video-time { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 1px; color: rgba(0, 255, 101, 0.45); white-space: nowrap; flex-shrink: 0; } /* Title prompt at bottom (reuses tv-prompt visibility logic) */ .tv-video-title-prompt { font-family: var(--font-mono); font-size: clamp(0.6rem, 1.2vw, 0.75rem); letter-spacing: 1.2px; color: rgba(0, 255, 101, 0.5); padding: 4px 14px 8px; opacity: 0; transition: opacity 0.5s ease; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tv-video-title-prompt.tv-prompt--visible { opacity: 1; } /* Video screen: taller to give video more room */ .tv-video-screen { height: min(480px, 58vh); } @media (max-width: 600px) { .tv-video-screen { height: min(360px, 54vh); } .tv-orb-row { gap: 12px; } } /* ═══════════════════════════════════════════════════════════════ BOOT SPLASH SCREEN ═══════════════════════════════════════════════════════════════ */ .boot-splash { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000; opacity: 1; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .boot-splash--out { opacity: 0; pointer-events: none; } .boot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .boot-scanlines { position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px ); pointer-events: none; animation: boot-scanline-drift 8s linear infinite; opacity: 0.6; } @keyframes boot-scanline-drift { from { background-position: 0 0; } to { background-position: 0 40px; } } .boot-logo-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: boot-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes boot-entrance { from { opacity: 0; transform: scale(0.7) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } .boot-logo { width: clamp(180px, 24vw, 280px); height: clamp(180px, 24vw, 280px); filter: drop-shadow(0 0 24px rgba(0, 240, 255, 0.7)) drop-shadow(0 0 60px rgba(120, 0, 255, 0.4)); animation: boot-logo-pulse 1.6s ease-in-out infinite alternate; } @keyframes boot-logo-pulse { from { filter: drop-shadow(0 0 20px rgba(0,240,255,0.6)) drop-shadow(0 0 50px rgba(120,0,255,0.3)); } to { filter: drop-shadow(0 0 36px rgba(0,240,255,0.95)) drop-shadow(0 0 80px rgba(180,0,255,0.55)) drop-shadow(0 0 6px #fff); } } .boot-wordmark { font-family: var(--font-mono); font-size: clamp(1rem, 3.5vw, 1.8rem); font-weight: 900; letter-spacing: 0.45em; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px rgba(0, 240, 255, 0.9), 0 0 30px rgba(0, 240, 255, 0.4); animation: boot-wordmark-in 0.9s 0.2s cubic-bezier(0.16,1,0.3,1) both; } @keyframes boot-wordmark-in { from { opacity: 0; letter-spacing: 0.9em; } to { opacity: 1; letter-spacing: 0.45em; } } .boot-tagline { font-family: var(--font-mono); font-size: clamp(0.55rem, 1.6vw, 0.72rem); letter-spacing: 0.18em; color: rgba(0, 240, 255, 0.65); animation: boot-blink 1.1s 0.5s step-end infinite, boot-tagline-in 0.8s 0.4s ease both; } @keyframes boot-tagline-in { from { opacity: 0; } to { opacity: 1; } } @keyframes boot-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @media (prefers-reduced-motion: reduce) { .boot-logo { animation: none; } .boot-logo-wrap { animation: none; } .boot-wordmark { animation: none; } .boot-tagline { animation: none; } .boot-scanlines { animation: none; } } /* ═══════════════════════════════════════════════════════════════ PLAY GAME HINT — tv-orb row, icon only, hover tooltip ═══════════════════════════════════════════════════════════════ */ .tv-orb--game-hint { border-color: rgba(120, 80, 255, 0.35); color: rgba(140, 100, 255, 0.6); cursor: pointer; position: relative; user-select: none; pointer-events: auto; } .tv-orb--game-hint:hover, .tv-orb--game-hint:focus-visible { animation: none; border-color: rgba(160, 120, 255, 0.75); color: rgba(190, 160, 255, 0.95); box-shadow: 0 0 22px rgba(120, 80, 255, 0.45), 0 0 50px rgba(100, 60, 255, 0.18); transform: translateY(-4px); } .tv-orb-game-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(8, 4, 24, 0.94); border: 1px solid rgba(120, 80, 255, 0.45); color: rgba(190, 160, 255, 0.9); font-family: var(--font-mono); font-size: 0.52rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; } .tv-orb--game-hint:hover .tv-orb-game-tooltip, .tv-orb--game-hint:focus-visible .tv-orb-game-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } /* ═══════════════════════════════════════════════════════════════ SITE FOOTER ═══════════════════════════════════════════════════════════════ */ .site-footer { position: relative; z-index: var(--z-ui); padding: 8px 4px 14px; } .footer-copy { font-family: var(--font-mono); font-size: clamp(0.72rem, 1.4vw, 0.9rem); font-weight: 600; letter-spacing: 1.5px; color: rgba(0, 240, 255, 0.35); white-space: nowrap; text-shadow: 0 0 8px rgba(0, 240, 255, 0.12); } /* Footer on non-landing pages — centered, separated from content */ main + .site-footer, .squad-main + .site-footer, .archive-main + .site-footer { text-align: center; padding: 20px 16px 28px; border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: auto; } /* Footer inside dept scroll container */ .dept-content .site-footer { text-align: center; padding: 24px 0 8px; margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .landing-ui-layer .hero-section { flex: 1; margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════════ COLONY BUILDER ═══════════════════════════════════════════════════════════════ */ body[data-page-id="colony"] { overflow: hidden; background: #0a0400; } /* ── Header ── */ .colony-header { position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: var(--z-ui); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: rgba(10, 4, 0, 0.92); border-bottom: 1px solid rgba(0, 240, 255, 0.15); backdrop-filter: blur(8px); } .colony-header-left { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 1.5px; } .colony-header-left .logo-link { display: flex; align-items: center; gap: 4px; opacity: 0.6; } .colony-header-sep { opacity: 0.3; } .colony-header-title { color: var(--color-cyan); font-weight: 700; } .colony-header-center { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 1px; } .colony-sol-badge { color: var(--color-cyan); } .colony-pop-badge { color: #4caf50; } .colony-morale-badge { color: #f5c542; } .colony-header-right { display: flex; gap: 6px; } .colony-btn-sm { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 1px; color: var(--color-cyan); background: rgba(0, 240, 255, 0.08); border: 1px solid rgba(0, 240, 255, 0.25); padding: 3px 8px; border-radius: 3px; cursor: pointer; transition: all 0.2s; } .colony-btn-sm:hover { background: rgba(0, 240, 255, 0.18); border-color: rgba(0, 240, 255, 0.5); } /* ── Resource Bar ── */ .colony-resource-bar { position: fixed; top: 44px; left: 0; right: 0; z-index: var(--z-ui); display: flex; align-items: center; justify-content: center; gap: 2px; padding: 4px 8px; background: rgba(10, 4, 0, 0.88); border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; } .colony-res-item { display: flex; align-items: center; gap: 4px; padding: 2px 8px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.5px; } .colony-res-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .colony-res-label { color: rgba(255, 255, 255, 0.5); font-weight: 600; } .colony-res-val { color: #fff; font-weight: 700; } .colony-res-prod { font-size: 0.55rem; } .colony-res-prod.pos { color: #4caf50; } .colony-res-prod.neg { color: #ff003c; } /* ── Viewport ── */ .colony-viewport { position: fixed; top: 72px; left: 0; right: 0; bottom: 44px; overflow: hidden; } .colony-viewport canvas { width: 100% !important; height: 100% !important; } /* ── Side Panels ── */ .colony-panel { position: absolute; top: 0; width: 240px; max-height: 100%; overflow-y: auto; background: rgba(10, 4, 0, 0.92); border: 1px solid rgba(0, 240, 255, 0.15); backdrop-filter: blur(8px); z-index: 20; } .colony-build-panel { left: 0; } .colony-info-panel { right: 0; } .colony-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 2px; color: var(--color-cyan); border-bottom: 1px solid rgba(0, 240, 255, 0.12); } .colony-panel-close { color: rgba(255, 255, 255, 0.4); font-size: 1rem; cursor: pointer; background: none; border: none; padding: 0 4px; line-height: 1; } .colony-panel-close:hover { color: var(--color-cyan); } .colony-panel-body { padding: 6px; } /* ── Build Menu Items ── */ .colony-build-tier-label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 2px; color: rgba(0, 240, 255, 0.5); padding: 8px 8px 2px; font-weight: 700; } .colony-build-item { padding: 8px; margin: 3px 0; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; cursor: pointer; transition: all 0.15s; } .colony-build-item:hover { border-color: rgba(0, 240, 255, 0.3); background: rgba(0, 240, 255, 0.05); } .colony-build-item.selected { border-color: var(--color-cyan); background: rgba(0, 240, 255, 0.1); box-shadow: 0 0 12px rgba(0, 240, 255, 0.15); } .colony-build-item.locked { opacity: 0.3; cursor: not-allowed; } .colony-build-item.unaffordable { opacity: 0.55; } .colony-build-name { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 700; letter-spacing: 1px; color: #fff; } .colony-build-desc { font-size: 0.55rem; color: rgba(255, 255, 255, 0.45); margin-top: 2px; line-height: 1.3; } .colony-build-costs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .colony-cost-tag { font-family: var(--font-mono); font-size: 0.5rem; padding: 1px 5px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); } .colony-cost-tag.short { color: #ff003c; background: rgba(255, 0, 60, 0.12); } .colony-build-time { font-family: var(--font-mono); font-size: 0.48rem; color: rgba(0, 240, 255, 0.5); margin-top: 3px; letter-spacing: 0.5px; } /* ── Event Log ── */ .colony-event-log { position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: rgba(10, 4, 0, 0.85); border-top: 1px solid rgba(0, 240, 255, 0.1); overflow: hidden; } .colony-event-log-inner { height: 100%; overflow-y: auto; padding: 4px 12px; scrollbar-width: thin; scrollbar-color: rgba(0, 240, 255, 0.2) transparent; } .colony-event-line { font-family: var(--font-mono); font-size: 0.55rem; color: rgba(0, 240, 255, 0.6); padding: 1px 0; line-height: 1.4; letter-spacing: 0.3px; } /* ── Bottom Toolbar ── */ .colony-toolbar { position: fixed; bottom: 0; left: 0; right: 0; height: 44px; z-index: var(--z-ui); display: flex; align-items: center; justify-content: center; gap: 4px; background: rgba(10, 4, 0, 0.94); border-top: 1px solid rgba(0, 240, 255, 0.15); } .colony-toolbar-btn { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 1.5px; color: rgba(255, 255, 255, 0.5); padding: 6px 14px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; transition: all 0.2s; background: none; } .colony-toolbar-btn:hover { color: var(--color-cyan); border-color: rgba(0, 240, 255, 0.2); } .colony-toolbar-btn.active { color: var(--color-cyan); background: rgba(0, 240, 255, 0.1); border-color: rgba(0, 240, 255, 0.35); } .colony-toolbar-btn svg { opacity: 0.7; } .colony-toolbar-btn.active svg, .colony-toolbar-btn:hover svg { opacity: 1; stroke: var(--color-cyan); } /* ── Modals ── */ .colony-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); } .colony-modal[hidden] { display: none; } .colony-modal-content { width: 90%; max-width: 520px; max-height: 80vh; background: rgba(10, 4, 0, 0.96); border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; } .colony-modal-body { padding: 12px; overflow-y: auto; flex: 1; } /* ── Research Items ── */ .colony-research-note { font-family: var(--font-mono); font-size: 0.55rem; color: rgba(255, 255, 255, 0.4); margin-bottom: 12px; line-height: 1.4; } .colony-research-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 2px 0; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 3px; font-family: var(--font-mono); font-size: 0.6rem; } .colony-research-item.locked { opacity: 0.3; } .colony-research-item.built { border-color: rgba(0, 255, 0, 0.2); } .colony-research-item.in-progress { border-color: rgba(245, 197, 66, 0.3); } .colony-research-tier { font-size: 0.5rem; color: var(--color-cyan); font-weight: 700; min-width: 20px; } .colony-research-name { flex: 1; color: rgba(255, 255, 255, 0.8); } .colony-research-status { font-size: 0.48rem; letter-spacing: 1px; color: rgba(255, 255, 255, 0.4); } .colony-research-item.built .colony-research-status { color: #4caf50; } .colony-research-item.in-progress .colony-research-status { color: #f5c542; } /* ── Stats ── */ .colony-stats-grid { display: flex; flex-direction: column; gap: 2px; } .colony-stat-row { display: flex; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-family: var(--font-mono); font-size: 0.6rem; } .colony-stat-label { color: rgba(255, 255, 255, 0.5); } .colony-stat-val { color: #fff; font-weight: 700; } /* ── Info Panel ── */ .colony-info-content h3 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 1.5px; color: var(--color-cyan); margin-bottom: 8px; } .colony-info-desc { font-size: 0.58rem; color: rgba(255, 255, 255, 0.5); line-height: 1.4; margin-bottom: 6px; } .colony-info-tier, .colony-info-constructing, .colony-info-prod, .colony-info-provides { font-family: var(--font-mono); font-size: 0.55rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 4px; } .colony-info-constructing { color: #f5c542; } /* ── Colony CTA (for farming page) ── */ .colony-cta-wrap { text-align: center; padding: 24px 0; } .colony-cta-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 3px; color: var(--color-cyan); background: rgba(0, 240, 255, 0.06); border: 1px solid rgba(0, 240, 255, 0.3); padding: 12px 28px; border-radius: 6px; text-decoration: none; transition: all 0.3s ease; } .colony-cta-btn:hover { background: rgba(0, 240, 255, 0.14); border-color: rgba(0, 240, 255, 0.6); box-shadow: 0 0 24px rgba(0, 240, 255, 0.15); transform: translateY(-1px); } /* ── Scrollbar styling for panels ── */ .colony-panel-body::-webkit-scrollbar, .colony-event-log-inner::-webkit-scrollbar, .colony-modal-body::-webkit-scrollbar { width: 4px; } .colony-panel-body::-webkit-scrollbar-track, .colony-event-log-inner::-webkit-scrollbar-track, .colony-modal-body::-webkit-scrollbar-track { background: transparent; } .colony-panel-body::-webkit-scrollbar-thumb, .colony-event-log-inner::-webkit-scrollbar-thumb, .colony-modal-body::-webkit-scrollbar-thumb { background: rgba(0, 240, 255, 0.2); border-radius: 2px; } /* ── Leave Game button ── */ .colony-btn-leave { color: #ff003c !important; border-color: rgba(255, 0, 60, 0.3) !important; background: rgba(255, 0, 60, 0.06) !important; text-decoration: none; display: inline-flex; align-items: center; } .colony-btn-leave:hover { background: rgba(255, 0, 60, 0.15) !important; border-color: rgba(255, 0, 60, 0.6) !important; } /* ── Mobile adjustments ── */ @media (max-width: 600px) { .colony-header-center { display: none; } .colony-panel { width: 200px; } .colony-res-item { padding: 2px 4px; } .colony-res-label { display: none; } .colony-toolbar-btn span { display: none; } } /* ═══════════════════════════════════════════════════════════════ GAMES HUB PAGE ═══════════════════════════════════════════════════════════════ */ body[data-page-id="games"] { overflow-y: auto; overflow-x: hidden; } /* ── Games page nebula + star backgrounds ── */ .games-nebula { position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 110% 70% at 75% 15%, rgba(0, 80, 200, 0.22) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 10% 40%, rgba(120, 0, 200, 0.16) 0%, transparent 50%), radial-gradient(ellipse 60% 90% at 85% 70%, rgba(0, 200, 255, 0.1) 0%, transparent 50%), radial-gradient(ellipse 130% 40% at 50% 100%, rgba(200, 50, 10, 0.18) 0%, transparent 50%), linear-gradient(160deg, #04071a 0%, #02040e 50%, #060310 100%); animation: games-nebula-drift 24s ease-in-out infinite alternate; pointer-events: none; } .games-stars { position: fixed; inset: 0; z-index: 0; background-image: radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(1px 1px at 22% 5%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 38% 18%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(1px 1px at 55% 8%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1px 1px at 72% 22%, rgba(255,255,255,0.45) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 88% 6%, rgba(255,255,255,0.55) 0%, transparent 100%), radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.30) 0%, transparent 100%), radial-gradient(1px 1px at 45% 70%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(1px 1px at 65% 48%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 80% 60%, rgba(255,255,255,0.50) 0%, transparent 100%), radial-gradient(1px 1px at 92% 80%, rgba(255,255,255,0.40) 0%, transparent 100%), radial-gradient(1px 1px at 30% 88%, rgba(255,255,255,0.35) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 58% 92%, rgba(255,255,255,0.45) 0%, transparent 100%); animation: games-stars-twinkle 7s ease-in-out infinite alternate; pointer-events: none; } @keyframes games-nebula-drift { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.04) translate(-8px, 6px); } } @keyframes games-stars-twinkle { 0% { opacity: 0.55; } 100% { opacity: 0.85; } } @keyframes games-scan-sweep { 0% { left: -60%; opacity: 0; } 10% { opacity: 1; } 100% { left: 120%; opacity: 0; } } .games-main { position: relative; z-index: var(--z-ui); min-height: 100vh; padding-top: var(--header-height); } .games-hero { text-align: center; padding: 16px 16px 8px; } .games-title { display: none; } .games-subtitle { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 4px; color: rgba(255, 255, 255, 0.28); margin-top: 0; text-transform: uppercase; } /* ── Game Cards Grid ── */ .games-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1100px; margin: 0 auto; padding: 8px 24px 48px; } .games-card { --card-accent: 0, 240, 255; --card-bg: none; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(var(--card-accent), 0.18); border-radius: 8px; overflow: hidden; transition: all 0.22s ease; text-decoration: none; color: inherit; cursor: pointer; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.06); } .games-card:hover { border-color: rgba(var(--card-accent), 0.55); background: rgba(var(--card-accent), 0.06); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(var(--card-accent), 0.18), inset 0 1px 0 rgba(255,255,255,0.08); } .games-card--locked { cursor: default; opacity: 0.35; pointer-events: none; } /* ── Card Thumbnail ── */ .games-card-thumb { position: relative; display: flex; align-items: center; justify-content: center; height: 90px; background: rgba(var(--card-accent), 0.04); border-bottom: 1px solid rgba(var(--card-accent), 0.12); overflow: hidden; } /* Background image layer — shows screenshot/art if --card-bg is set */ .games-card-bg-img { position: absolute; inset: 0; background-image: var(--card-bg); background-size: cover; background-position: center; opacity: 0.25; transition: opacity 0.3s ease; z-index: 0; } .games-card:hover .games-card-bg-img { opacity: 0.45; } /* Radial glow behind icon */ .games-card-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, rgba(var(--card-accent), 0.22) 0%, transparent 65%); transition: opacity 0.22s; opacity: 0.7; z-index: 1; } .games-card:hover .games-card-glow { opacity: 1; } /* Scan-line sweep on hover */ .games-card-thumb::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, transparent, rgba(var(--card-accent), 0.2), transparent); left: -60%; opacity: 0; pointer-events: none; z-index: 3; } .games-card:hover .games-card-thumb::after { animation: games-scan-sweep 1.1s ease-in-out; } .games-card-icon { position: relative; width: 38px; height: 38px; color: rgb(var(--card-accent)); opacity: 0.85; transition: opacity 0.22s, filter 0.22s; filter: drop-shadow(0 0 6px rgba(var(--card-accent), 0.5)); z-index: 2; } .games-card:hover .games-card-icon { opacity: 1; filter: drop-shadow(0 0 14px rgba(var(--card-accent), 0.9)); } .games-card-badge { position: absolute; top: 6px; right: 6px; font-family: var(--font-mono); font-size: 0.38rem; font-weight: 700; letter-spacing: 1.5px; padding: 2px 6px; border-radius: 3px; background: rgba(0, 255, 80, 0.15); color: #5dde60; border: 1px solid rgba(0, 255, 80, 0.3); z-index: 4; } .games-card-badge.coming { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.4); border-color: rgba(255, 255, 255, 0.12); } /* ── Card Info ── */ .games-card-info { padding: 9px 11px 11px; } .games-card-name { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 1.2px; color: rgba(255, 255, 255, 0.95); margin-bottom: 4px; text-shadow: 0 0 16px rgba(var(--card-accent), 0.4); } .games-card-name-suffix { font-size: 0.55em; opacity: 0.55; letter-spacing: 0.5px; } .games-card-desc { font-size: 0.55rem; color: rgba(255, 255, 255, 0.48); line-height: 1.5; margin-bottom: 7px; } .games-card-tag { font-family: var(--font-mono); font-size: 0.38rem; letter-spacing: 1.8px; color: rgba(var(--card-accent), 0.65); font-weight: 600; } /* ── Games page footer ── */ .games-main .site-footer { text-align: center; padding: 24px 16px 28px; border-top: 1px solid rgba(255, 255, 255, 0.05); margin-top: auto; } @media (max-width: 900px) { .games-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .games-grid { grid-template-columns: 1fr; padding: 12px 16px 40px; } }