/* =================================== GROOM LAKE - Design System v2 Private Intelligence Corporation of Web3 =================================== */ /* =================================== CURSOR — force system default site-wide =================================== */ body { cursor: default !important; } a, button { cursor: pointer; } /* =================================== FONT STACK GT Flexa isn't hosted — Space Grotesk (via Google Fonts) is the primary display font and JetBrains Mono is the primary mono. If/when GT Flexa files are added to /public/fonts/, reinstate @font-face blocks here and prepend 'GT Flexa' to the --font-display and --font-mono vars. =================================== */ /* =================================== CSS CUSTOM PROPERTIES =================================== */ :root { /* Colors — sage green palette */ --bg-primary: #c8d0c8; --bg-surface: #b8c4b8; --border: #8fa88a; --text-primary: #111a11; --text-muted: #4d6148; --accent: #5F4B66; --accent-glow: rgba(95, 75, 102, 0.35); --accent-secondary: #5F4B66; --accent-deep: #2C1320; --ash: #C3CEC1; --accent-red: #ff2d2d; --accent-red-glow: rgba(255, 45, 45, 0.35); --success: #1a7a40; /* Typography — Space Grotesk display, JetBrains Mono for monospace. Both loaded from Google Fonts in the of each HTML page. */ --font-display: 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Spacing */ --section-padding: clamp(4rem, 10vw, 8rem); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; } /* Reaper sections restore the red accent — everything else uses blue-slate */ .reaper-section { --accent: #ff2d2d; --accent-glow: rgba(255, 45, 45, 0.35); } /* =================================== RESET & BASE =================================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Horizontal overflow lock. `overflow-x: hidden` would force overflow-y to compute as `auto`, making html (or body) a scroll container — which BREAKS `position: sticky` for descendants because sticky pins to its nearest scroll ancestor, and scroll events fire on the wrong container. `overflow-x: clip` does the same horizontal containment WITHOUT establishing a scroll ancestor; sticky descendants still pin to the viewport. Older browsers that don't recognise `clip` fall through to the legacy `hidden` declaration. Safari 16+, Chrome 90+, Firefox 81+, and Telegram WebView (iOS WebKit) all support clip. */ overflow-x: hidden; overflow-x: clip; } body { font-family: var(--font-display); background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; /* Same clip-instead-of-hidden treatment as html so body is not a scroll container — orbital sticky inside body must pin to the viewport, not to body's own scroll. */ overflow-x: hidden; overflow-x: clip; text-transform: uppercase; position: relative; } /* ── Global purple wash ───────────────────────────── Fixed overlay at z-index 5 — above all section panes (z-index 4) but below navigation and UI chrome. At 2.5 % opacity this tints the entire viewport with a barely perceptible violet undertone, reducing the unintentional green dominance of the sage palette. pointer-events: none means zero interaction impact. ─────────────────────────────────────────────────── */ body::after { content: ''; position: fixed; inset: 0; background: rgba(95, 75, 102, 0.032); pointer-events: none; z-index: 5; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* =================================== TYPOGRAPHY =================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; /* Neutral-to-slight positive tracking — uppercase headings read better with open spacing. Negative tracking at all sizes caused cramped composition. */ letter-spacing: 0.01em; } h1 { font-size: clamp(2.5rem, 8vw, 5rem); } h2 { font-size: clamp(2rem, 5vw, 3.5rem); } h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); } .font-display { font-family: var(--font-display); } .font-mono { font-family: var(--font-mono); } .text-muted { color: var(--text-muted); } .text-accent { color: var(--accent); } .text-success { color: var(--success); } .label { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-muted); opacity: 0.9; } .label-accent { color: var(--accent); } /* =================================== LAYOUT =================================== */ .container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 768px) { .container { padding: 0 2rem; } } @media (min-width: 1024px) { .container { padding: 0 3rem; } } section { padding: var(--section-padding) 0; position: relative; } /* =================================== BACKGROUND EFFECTS =================================== */ /* Grid Lines — background environment layer, very subtle */ .bg-grid { position: fixed; inset: 0; /* Recessed background grid — alpha reduced so the hero's Three.js panel grid (0.24α) reads as the dominant structural element. */ background-image: linear-gradient(rgba(0, 0, 0, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.07) 1px, transparent 1px); /* Responsive cell size: tracks viewport width so grid stays proportional to text at all breakpoints (calibrated to 60px at 1440px reference). */ background-size: clamp(30px, 4.2vw, 62px) clamp(30px, 4.2vw, 62px); pointer-events: none; z-index: 0; } /* Hero-only wash: further dims the bg-grid inside the hero so the splash-derived framed panel grid becomes the clear primary structure. Positioned above bg-grid (z:0) but below hero-canvas (z:1). */ .hero::before { content: ''; position: absolute; inset: 0; background: var(--bg-primary); opacity: 0.55; z-index: 0; pointer-events: none; } /* Scanning Sweep */ .bg-scan { position: fixed; inset: 0; background: linear-gradient( 180deg, transparent 0%, rgba(95, 75, 102, 0.05) 50%, transparent 100% ); background-size: 100% 200%; animation: scan-sweep 8s linear infinite; pointer-events: none; z-index: 0; } @keyframes scan-sweep { 0% { background-position: 0 -100%; } 100% { background-position: 0 100%; } } /* Telemetry scan line — single pixel sweeping downward, replaces orbit dots */ .bg-scan-line { position: fixed; top: 0; left: 0; width: 100%; height: 1px; background: rgba(17, 26, 17, 0.18); z-index: 1; pointer-events: none; animation: scan-line-down 6s linear infinite; } @keyframes scan-line-down { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } } /* Film Grain */ .bg-noise { position: fixed; inset: -50%; width: 200%; height: 200%; opacity: 0.22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E"); background-repeat: repeat; pointer-events: none; z-index: 1; animation: film-grain 0.12s steps(1) infinite; } @keyframes film-grain { 0% { transform: translate(0, 0); } 10% { transform: translate(-5%, -10%); } 20% { transform: translate(-15%, 5%); } 30% { transform: translate(7%, -15%); } 40% { transform: translate(-5%, 25%); } 50% { transform: translate(-18%, 10%); } 60% { transform: translate(15%, 5%); } 70% { transform: translate(0%, 20%); } 80% { transform: translate(3%, -20%); } 90% { transform: translate(-10%, 10%); } 100% { transform: translate(5%, 0); } } /* Heavy Black Vignette Border */ .vignette-border { position: fixed; inset: 0; box-shadow: inset 0 0 180px 80px rgba(0, 0, 0, 0.88); pointer-events: none; z-index: 9990; } /* =================================== CORNER COORDINATE READOUTS =================================== */ .corner-readout { position: fixed; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; color: rgba(0, 0, 0, 0.65); line-height: 1.6; z-index: 9992; pointer-events: none; text-transform: uppercase; } .corner-readout.tl { top: 1.25rem; left: 1.25rem; } .corner-readout.tr { top: 1.25rem; right: 1.25rem; text-align: right; } .corner-readout.bl { bottom: 3.5rem; left: 1.25rem; } .corner-readout.br { bottom: 3.5rem; right: 1.25rem; text-align: right; } .corner-readout .coord-line { display: block; } /* Corner bracket marks */ .corner-readout.tl::before, .corner-readout.tr::before, .corner-readout.bl::after, .corner-readout.br::after { content: ''; display: block; width: 14px; height: 14px; border-color: rgba(0, 0, 0, 0.5); border-style: solid; position: absolute; } .corner-readout.tl::before { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; } .corner-readout.tr::before { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; } .corner-readout.bl::after { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; } .corner-readout.br::after { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; } /* =================================== CLASSIFICATION STAMP =================================== */ .classification-stamp { position: fixed; bottom: 1.2rem; left: 1.5rem; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; z-index: 9993; pointer-events: none; border: 1.5px solid var(--accent); padding: 0.2rem 0.5rem; opacity: 0.85; } /* =================================== NAVIGATION =================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; /* Raised above every in-page overlay so content can never bleed through the header on any page or in any in-app browser. */ z-index: 9999; /* Padding trimmed from 1rem so the enlarged logo fits without increasing overall header height. */ padding: 0.9rem 0; /* ALWAYS-ON separation — a soft opaque backing + fine border establish the header as a distinct layer from first paint, not only after scroll. No transparency bleed from orbital / splash / drone sections behind it. */ background: rgba(200, 212, 196, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(143, 168, 138, 0.35); /* Keep transition hook for the .scrolled tonal shift (optional) */ transition: background var(--transition-base); } /* .scrolled retained only as a subtle tonal darken — NOT to introduce the backing (that's always on). Safe to keep or remove. */ .nav.scrolled { background: rgba(196, 209, 191, 0.96); } /* Mobile / Telegram bleed-through prevention is handled comprehensively later in the cascade (≥ line 10375). That block uses !important on solid backgrounds, kills backdrop-filter, sets transform:translateZ(0) for own compositing, contain:paint, isolation:isolate, ::before backing, and a body::before notch sentinel. Don't duplicate it here. */ .nav-inner { display: flex; align-items: center; justify-content: space-between; } .nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text-primary); } .nav-logo svg { width: 32px; height: 32px; } .site-letterhead { /* Logo anchor size — bumped ~15% from 26px for stronger header hierarchy. Mobile override (below) pushes it a bit further so it reads on small screens without crowding the hamburger. */ height: 30px; width: auto; display: block; } .nav-logo-text { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: 0.05em; } .nav-links { display: none; align-items: center; gap: 2.5rem; } @media (min-width: 768px) { .nav-links { display: flex; } } .nav-link { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); text-decoration: none; position: relative; transition: color var(--transition-fast); } /* Corner-frame acquisition hover — four L-bracket corners drawn as gradient backgrounds on a single pseudo-element. Pure CSS, no JS, works identically on every page. */ .nav-link:not([href="/reaper.html"])::after { content: ''; position: absolute; inset: -5px -7px; pointer-events: none; background: /* TL — top */ linear-gradient(var(--text-primary), var(--text-primary)) 0 0 / 9px 1.5px no-repeat, /* TL — left */ linear-gradient(var(--text-primary), var(--text-primary)) 0 0 / 1.5px 9px no-repeat, /* TR — top */ linear-gradient(var(--text-primary), var(--text-primary)) 100% 0 / 9px 1.5px no-repeat, /* TR — right */ linear-gradient(var(--text-primary), var(--text-primary)) 100% 0 / 1.5px 9px no-repeat, /* BL — bot */ linear-gradient(var(--text-primary), var(--text-primary)) 0 100% / 9px 1.5px no-repeat, /* BL — left */ linear-gradient(var(--text-primary), var(--text-primary)) 0 100% / 1.5px 9px no-repeat, /* BR — bot */ linear-gradient(var(--text-primary), var(--text-primary)) 100% 100% / 9px 1.5px no-repeat, /* BR — right */ linear-gradient(var(--text-primary), var(--text-primary)) 100% 100% / 1.5px 9px no-repeat; opacity: 0; transform: scale(0.82); transition: opacity 230ms cubic-bezier(0.22, 1, 0.36, 1), transform 230ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) { .nav-link:not([href="/reaper.html"]):hover::after { opacity: 0.85; transform: scale(1); } } .nav-link:hover { color: var(--text-primary); } /* Glitch kick — digital split-channel distortion, steps(4) keeps it non-smooth */ .nav-link.nav-glitch { animation: nav-glitch-kick 0.22s steps(4, end); } @keyframes nav-glitch-kick { 0% { transform: translateX(4px); color: var(--accent); } 25% { transform: translateX(-3px); color: var(--text-primary); } 50% { transform: translateX(3px); color: var(--accent); opacity: 0.8; } 75% { transform: translateX(-1px); } 100% { transform: translateX(0); opacity: 1; } } .nav-link.active { color: var(--accent); } /* ═════════════════════════════════════════════════════════════════════ REAPER nav link — emphasised as the primary CTA entry point. Persistent red colour + live-signal indicator dot + controlled hover glow. No flashing, no rapid blinks. Pulse is slow and subtle (2s). Single one-time scan-line sweep runs once on page load. ═════════════════════════════════════════════════════════════════════ */ .nav a[href="/reaper.html"] { color: #ff2d2d; /* slightly brighter vs #E60000 */ position: relative; text-shadow: 0 0 8px rgba(255, 45, 45, 0.30); /* Extra left padding reserves space for the live indicator dot */ padding: 4px 8px 4px 18px; cursor: pointer; /* One-time scan line — a horizontal gradient sweeps across the link once on page load, then stops. Runs on page load only. */ background: linear-gradient( 90deg, transparent 0%, rgba(255, 45, 45, 0.22) 50%, transparent 100% ); background-size: 60% 100%; background-repeat: no-repeat; background-position: -120% 0; animation: reaper-nav-scan 1200ms ease-out 600ms 1 forwards; transition: color 240ms ease, text-shadow 240ms ease, transform 120ms ease, opacity 120ms ease; } @keyframes reaper-nav-scan { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } } /* Live indicator dot — slow breathe (2s), opacity 0.4 → 1 → 0.4. Placed via ::before to the left of the text. No scale bounce. */ .nav a[href="/reaper.html"]::before { content: ""; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #ff2d2d; box-shadow: 0 0 6px rgba(255, 45, 45, 0.60); animation: reaper-dot-pulse 2s ease-in-out infinite; pointer-events: none; } @keyframes reaper-dot-pulse { 0%, 100% { opacity: 0.40; } 50% { opacity: 1.00; } } /* Tactical brackets — FOUR corners, rendered as a single ::after pseudo. At rest: only TL + BR are positioned in-place (other two sit off-stage). On hover / active-page: TR + BL slide into position for a controlled "tactical lock-on" that feels like a targeting reticle acquiring. */ .nav a[href="/reaper.html"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: /* 1–2: TL top + left (always visible) */ linear-gradient(#ff2d2d, #ff2d2d) 0 0 / 8px 1px no-repeat, linear-gradient(#ff2d2d, #ff2d2d) 0 0 / 1px 8px no-repeat, /* 3–4: BR bottom + right (always visible) */ linear-gradient(#ff2d2d, #ff2d2d) 100% 100% / 8px 1px no-repeat, linear-gradient(#ff2d2d, #ff2d2d) 100% 100% / 1px 8px no-repeat, /* 5–6: TR top + right (staged off to the right, slide in on hover) */ linear-gradient(#ff2d2d, #ff2d2d) 120% 0 / 8px 1px no-repeat, linear-gradient(#ff2d2d, #ff2d2d) 120% 0 / 1px 8px no-repeat, /* 7–8: BL bottom + left (staged off to the left, slide in on hover) */ linear-gradient(#ff2d2d, #ff2d2d) -20% 100% / 8px 1px no-repeat, linear-gradient(#ff2d2d, #ff2d2d) -20% 100% / 1px 8px no-repeat; opacity: 0.55; transition: opacity 240ms ease, filter 240ms ease, background-position 260ms cubic-bezier(0.22, 1, 0.36, 1); } /* Hover: brighter red, soft low-blur glow, all 4 brackets lock on. */ @media (hover: hover) { .nav a[href="/reaper.html"]:hover { color: #ff5555; text-shadow: 0 0 14px rgba(255, 45, 45, 0.55), 0 0 4px rgba(255, 45, 45, 0.35); } .nav a[href="/reaper.html"]:hover::after { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 45, 45, 0.45)); /* All 4 corners on-stage */ background-position: 0 0, /* TL top */ 0 0, /* TL left */ 100% 100%, /* BR bottom */ 100% 100%, /* BR right */ 100% 0, /* TR top */ 100% 0, /* TR right */ 0 100%, /* BL bottom */ 0 100%; /* BL left */ } } /* Pressed — subtle 1px drop + slight fade for tactile click feedback */ .nav a[href="/reaper.html"]:active { transform: translateY(1px); opacity: 0.92; } /* Active page state (user on /reaper.html) — stronger red, constant glow, brackets locked at full opacity. */ .nav a[href="/reaper.html"].active { color: #ff3a3a; text-shadow: 0 0 12px rgba(255, 45, 45, 0.50), 0 0 3px rgba(255, 45, 45, 0.35); } .nav a[href="/reaper.html"].active::after { opacity: 1; background-position: 0 0, 0 0, 100% 100%, 100% 100%, 100% 0, 100% 0, 0 100%, 0 100%; } .nav-mobile-btn { display: flex; padding: 0.5rem; background: none; border: none; color: var(--text-muted); cursor: pointer; } @media (min-width: 768px) { .nav-mobile-btn { display: none; } } /* Mobile Menu — z-indexes paired ABOVE the new nav layer (z: 999999). Menu sits one tier above the nav so its links remain tappable while the nav stays solid behind. Splash (lifted to 9999999 below) and transition (99999999) still cover the menu during page-load ceremonies, which is correct. */ .mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 300px; background: var(--bg-surface); border-left: 1px solid var(--border); padding: 5rem 2rem 2rem; transform: translateX(100%); transition: transform 320ms cubic-bezier(0.4, 0, 0.15, 1); will-change: transform; z-index: 1000000; } .mobile-menu.open { transform: translateX(0); } .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), visibility var(--transition-base); z-index: 999997; } .mobile-menu-overlay.open { opacity: 1; visibility: visible; } .mobile-menu-links { display: flex; flex-direction: column; gap: 1.5rem; } .mobile-menu-link { font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color var(--transition-fast); } .mobile-menu-link:hover { color: var(--text-primary); } /* Mobile menu: only REAPER uses red treatment, others stay muted */ .mobile-menu-link[href="/reaper.html"] { color: #ff2d2d; text-shadow: 0 0 6px rgba(255, 45, 45, 0.28); } .mobile-menu-link[href="/reaper.html"]:hover, .mobile-menu-link[href="/reaper.html"].active { color: #ff5555; } /* =================================== BUTTONS =================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border: none; cursor: pointer; transition: all var(--transition-base); position: relative; overflow: visible; } .btn-primary { background: var(--accent); color: var(--bg-primary); } .btn-primary:hover { box-shadow: 0 0 30px var(--accent-glow); transform: translateY(-2px); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } /* Corner-frame hover on primary + secondary buttons */ .btn-primary::before, .btn-secondary::before { content: ''; position: absolute; inset: -5px -6px; pointer-events: none; background: linear-gradient(var(--text-primary), var(--text-primary)) 0 0 / 9px 1.5px no-repeat, linear-gradient(var(--text-primary), var(--text-primary)) 0 0 / 1.5px 9px no-repeat, linear-gradient(var(--text-primary), var(--text-primary)) 100% 0 / 9px 1.5px no-repeat, linear-gradient(var(--text-primary), var(--text-primary)) 100% 0 / 1.5px 9px no-repeat, linear-gradient(var(--text-primary), var(--text-primary)) 0 100% / 9px 1.5px no-repeat, linear-gradient(var(--text-primary), var(--text-primary)) 0 100% / 1.5px 9px no-repeat, linear-gradient(var(--text-primary), var(--text-primary)) 100% 100% / 9px 1.5px no-repeat, linear-gradient(var(--text-primary), var(--text-primary)) 100% 100% / 1.5px 9px no-repeat; opacity: 0; transform: scale(0.88); transition: opacity 230ms cubic-bezier(0.22, 1, 0.36, 1), transform 230ms cubic-bezier(0.22, 1, 0.36, 1); } @media (hover: hover) { .btn-primary:hover::before, .btn-secondary:hover::before { opacity: 0.9; transform: scale(1); } } .btn-ghost { background: transparent; color: var(--text-muted); padding: 0.5rem 1rem; } .btn-ghost:hover { color: var(--text-primary); } /* =================================== CARDS =================================== */ .card { background: var(--bg-surface); border: 1px solid var(--border); padding: 2rem; position: relative; transition: all var(--transition-base); } .card::before { content: ''; position: absolute; inset: 0; border: 1px solid transparent; transition: border-color var(--transition-base); pointer-events: none; } .card:hover { transform: translateY(-4px); border-color: transparent; } .card:hover::before { border-color: var(--accent); animation: border-trace 1s linear forwards; } @keyframes border-trace { 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } 25% { clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%, 0 100%); } 50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 100%); } 75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%); } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } .card-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); margin-bottom: 1.5rem; transition: border-color var(--transition-base), box-shadow var(--transition-base); } .card:hover .card-icon { border-color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); } .card-icon svg { width: 24px; height: 24px; color: var(--accent); } /* =================================== HERO SECTION =================================== */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding-top: 5rem; } .hero-canvas { position: absolute; inset: 0; z-index: 1; } /* SVG bracket — draws in on Activate, sits above canvas below text */ .hero-net-svg { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: visible; } /* Glyph particle canvas — depth-layered network primitives */ .glyph-particles { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .hero-content { position: relative; z-index: 10; text-align: center; width: 100%; /* Controlled layout frame — 1200px max, fixed horizontal gutters per breakpoint so hero copy never brushes the viewport edge and the composition reads as an intentionally inset grid. */ max-width: 1200px; margin: 0 auto; padding: clamp(2rem, 4vw, 3.5rem) 24px; /* mobile default: 24px each side */ box-sizing: border-box; /* No static outline — the SVG panel frame animates in on Activate */ } @media (min-width: 768px) { /* Tablet: 48px inset matches the global container step-up */ .hero-content { padding-left: 48px; padding-right: 48px; } } @media (min-width: 1024px) { /* Desktop: 80px inset keeps "PRIVATE SECURITY & INTELLIGENCE CORPORATION" clearly inside the layout frame on every width up to 1920px. Left column (text) stays left-aligned; face column stays right. */ .hero-content { padding-left: 80px; padding-right: 80px; } } .hero-label { margin-bottom: 1.5rem; opacity: 0; } .hero-heading { /* 3 lines × 1.1 lh — reserves exact space for scrambled title */ min-height: calc(clamp(2rem, 3.5vw, 2.9rem) * 1.1 * 3); display: flex; align-items: flex-start; justify-content: center; /* Tightened from 1.8rem so title and subtitle read as one block */ margin-bottom: 1.1rem; } .hero-title { /* Composition-first sizing: peaks at 2.9rem (46px) so the full 3-line title fits inside the framed perimeter panel at every desktop width without crowding the top edge of the box. */ font-size: clamp(2rem, 3.5vw, 2.9rem); line-height: 1.1; letter-spacing: 0.025em; margin: 0; /* Starts invisible; JS populates and reveals via scramble */ opacity: 1; } /* Scramble chars — muted, inherit all metrics exactly so no reflow occurs */ .hero-title .ht-scr, .hero-subtitle .ht-scr { color: rgba(17, 26, 17, 0.28); font-weight: inherit; font-size: inherit; letter-spacing: inherit; } /* Revealing chars — fire animation once when char first resolves */ .hero-title .ht-rev, .hero-subtitle .ht-rev { color: inherit; opacity: 0; animation: htReveal 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* Settled chars — animation complete, static, no re-render flicker */ .hero-title .ht-done, .hero-subtitle .ht-done { color: inherit; opacity: 1; } @keyframes htReveal { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } /* Visual gap between the two copy blocks inside the headline */ .hero-title-gap { display: block; height: 0.65em; } .hero-subtitle { /* Slightly smaller support line — reads as structural caption to the h1, not a competing headline. */ font-size: clamp(1.1rem, 2.15vw, 1.55rem); font-weight: 700; color: #0a120a; letter-spacing: 0.12em; line-height: 1.5; /* No top margin — hero-heading's bottom margin sets the gap so the two blocks lock as a single left-column composition. */ margin-top: 0; margin-bottom: 2rem; /* Reserve 2 lines — matches "YOU DON'T KNOW / WHAT YOU DON'T KNOW." */ min-height: calc(clamp(1.1rem, 2.15vw, 1.55rem) * 1.5 * 2); opacity: 1; } .hero-cta { opacity: 0; } /* =================================== HERO TWO-COLUMN LAYOUT Text left / face model right on desktop =================================== */ .hero-text { text-align: center; min-width: 0; opacity: 0; transform: translateY(28px); will-change: opacity, transform; } .hero-text.hero-text-entered { transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); opacity: 1; transform: translateY(0); } .hero-face-wrap { display: none; } .face-canvas { display: block; width: 100%; height: 460px; } @media (min-width: 1024px) { .hero-content { display: flex; align-items: center; gap: 3rem; text-align: left; } .hero-text { flex: 1; min-width: 0; text-align: left; /* Preserve entrance animation state — do not override opacity/transform */ } /* Align the h1 block to the same left edge as the subtitle so the whole left column reads as one locked structural unit. Without this override, hero-heading keeps its default (mobile) justify-content: center, which left the centered title block offset from the left-aligned subtitle. */ .hero-heading { justify-content: flex-start; } .hero-face-wrap { display: block; flex: 0 0 360px; } } /* ── Medium desktop: 1280–1399px ───────────────────────────────────────── Face model narrows slightly; gap tightens so headline has room to breathe without the layout feeling cramped at common laptop screen widths. */ @media (min-width: 1024px) and (max-width: 1399px) { .hero-face-wrap { flex: 0 0 310px; } .hero-content { gap: 2.25rem; } .face-canvas { height: 400px; } } /* ── Tight desktop: 1024–1279px ────────────────────────────────────────── At these widths the fixed 360px face + 3rem gap compressed the text column to ~452px — too narrow for the headline at its default font size. Shrink the face column, reduce gap, and slightly lower the font cap so the three-line headline reservation stays accurate and text never crowds the model. */ @media (min-width: 1024px) and (max-width: 1279px) { .hero-face-wrap { flex: 0 0 260px; } .hero-content { gap: 1.75rem; } .face-canvas { height: 340px; } .hero-title { font-size: clamp(1.85rem, 3.9vw, 2.5rem); } .hero-heading { min-height: calc(clamp(1.85rem, 3.9vw, 2.5rem) * 1.1 * 3); margin-bottom: 1rem; } .hero-subtitle { font-size: clamp(1rem, 1.9vw, 1.35rem); margin-top: 0; margin-bottom: 1.5rem; min-height: calc(clamp(1rem, 1.9vw, 1.35rem) * 1.5 * 2); } } /* ── Nav link gap: tighten on mid-range widths ─────────────────────────── The 2.5rem default gap is generous; on narrow desktop / large tablet 2rem keeps the links comfortably spaced without bumping the logo. */ @media (min-width: 768px) and (max-width: 1099px) { .nav-links { gap: 2rem; } } .hero-scroll { position: absolute; bottom: 2.25rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.6rem; opacity: 0; color: rgba(17, 26, 17, 0.68); } .hero-scroll-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.26em; color: rgba(17, 26, 17, 0.72); white-space: nowrap; } /* Shaft — vertical travel line with flanking ticks */ .hero-scroll-shaft { width: 20px; height: 56px; position: relative; } /* Center travel line */ .hero-scroll-shaft::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; background: linear-gradient(180deg, rgba(17, 26, 17, 0.50), rgba(17, 26, 17, 0.04)); } .hero-scroll-pip { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; /* Accent-tinted pip — visually connects to the progress rail */ background: rgba(95, 75, 102, 0.70); animation: scroll-pip-drop 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Measurement ticks — flanking the shaft at midpoint */ .hero-scroll-tick { position: absolute; top: 50%; height: 1px; width: 6px; background: rgba(17, 26, 17, 0.35); } .hero-scroll-tick--l { right: calc(50% + 2px); } .hero-scroll-tick--r { left: calc(50% + 2px); } /* Chevron arrowhead — bounces downward to signal scroll direction */ .hero-scroll-chevron { color: rgba(17, 26, 17, 0.65); animation: scroll-chevron-drop 1.8s ease-in-out infinite; } /* ── Shared scroll animation keyframes ─────────────────────────────────── */ /* Pip: travels down the shaft and fades */ @keyframes scroll-pip-drop { 0% { top: 0; opacity: 0; } 8% { top: 0; opacity: 0.9; } 85% { top: 54px; opacity: 0.2; } 100% { top: 54px; opacity: 0; } } /* Chevron: pulses downward 8px then resets */ @keyframes scroll-chevron-drop { 0% { transform: translateY(0); opacity: 0.65; } 40% { transform: translateY(7px); opacity: 1; } 70% { transform: translateY(9px); opacity: 0.30; } 100% { transform: translateY(0); opacity: 0.65; } } /* =================================== HERO LOGO UNDER HEADLINE Flows beneath the h1 in the left/text column. Appears after Activate, drifts slowly. =================================== */ .hero-logo-under { display: block; margin-top: 2rem; width: clamp(88px, 9vw, 132px); opacity: 0; transform: translateY(8px); will-change: opacity, transform; transition: opacity 0.65s ease, transform 0.65s ease; pointer-events: none; } .hero-logo-under img { display: block; width: 100%; height: auto; opacity: 1; } .hero-logo-under.hero-logo-visible { opacity: 1; transform: translateY(0); } @keyframes hero-logo-float { 0% { transform: translateY(0) translateX(0); } 30% { transform: translateY(-13px) translateX(3px); } 70% { transform: translateY(-15px) translateX(-2px); } 100% { transform: translateY(0) translateX(0); } } .hero-logo-under.hero-logo-floating { transition: none; animation: hero-logo-float 8s ease-in-out infinite; } /* Scroll-dismiss: stops float, fades out */ .hero-logo-under.hero-logo-out { transition: opacity 0.55s ease !important; opacity: 0; animation: none; } @media (prefers-reduced-motion: reduce) { .hero-logo-under { display: none !important; } } @media (max-width: 768px) { /* Show logo on mobile — center it under the headline */ .hero-logo-under { display: block !important; margin: 1.25rem auto 0; width: clamp(60px, 16vw, 80px); } } /* =================================== STATS BAR =================================== */ .stats-bar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-surface); padding: 3rem 0; } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } } .stat { text-align: center; } .stat-value { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; } .stat-label { font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); } /* =================================== PILLARS / SERVICES =================================== */ .pillars-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); } @media (min-width: 640px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .pillars-grid { grid-template-columns: repeat(5, 1fr); } } .pillar { background: var(--bg-primary); padding: 2rem; text-align: center; transition: background var(--transition-base); } .pillar:hover { background: var(--bg-surface); } .pillar-icon { width: 56px; height: 56px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); transition: all var(--transition-base); } .pillar:hover .pillar-icon { border-color: var(--accent); box-shadow: 0 0 20px var(--accent-glow); } .pillar-icon svg { width: 24px; height: 24px; color: var(--accent); } .pillar-title { font-family: var(--font-display); font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; } .pillar-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; } /* =================================== TIMELINE =================================== */ .timeline { position: relative; padding: 2rem 0; } /* Hide the continuous lines — connectors are drawn per-item via ::after */ .timeline-line, .timeline-progress { display: none; } .timeline-items { display: flex; flex-direction: column; gap: 4rem; } /* ── Per-item connector: starts BELOW node, ends at TOP of next node ────── top: 48px = just below the 48px node box bottom: -4rem = extends through the 4rem gap exactly to the next item top No line ever passes through a node box. */ .timeline-item:not(:last-child)::after { content: ''; position: absolute; width: 2px; top: 48px; bottom: -4rem; background: rgba(17, 26, 17, 0.14); transform-origin: top center; transform: scaleY(0); transition: transform 0.55s ease 0.15s; /* grows after node activates */ z-index: 2; } /* Mobile: line aligned to center of the 48px node (left: 24px − 1px) */ .timeline-item:not(:last-child)::after { left: 23px; } /* Desktop: line aligned to center of the full-width item */ @media (min-width: 768px) { .timeline-item:not(:last-child)::after { left: calc(50% - 1px); } } .timeline-item.active:not(:last-child)::after { transform: scaleY(1); } /* ── Layout ──────────────────────────────────────────────────────────────── */ .timeline-item { display: grid; grid-template-columns: 1fr; gap: 1.25rem; position: relative; padding-left: 4rem; /* clears 48px node + breathing room on mobile */ } @media (min-width: 768px) { .timeline-item { grid-template-columns: 1fr 80px 1fr; padding-left: 0; gap: 0; align-items: start; } .timeline-item:nth-child(even) .timeline-content { grid-column: 3; padding-left: 2rem; } .timeline-item:nth-child(odd) .timeline-content { grid-column: 1; padding-right: 2rem; } .timeline-item .timeline-node { grid-column: 2; grid-row: 1; } } /* ── Node ────────────────────────────────────────────────────────────────── */ .timeline-node { position: absolute; left: 0; top: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--bg-primary); border: 1.5px solid rgba(17, 26, 17, 0.22); font-family: var(--font-mono); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(17, 26, 17, 0.28); z-index: 5; transition: border-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease; } @media (min-width: 768px) { .timeline-node { position: relative; left: auto; margin: 0 auto; } } .timeline-item.active .timeline-node { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px rgba(95, 75, 102, 0.28), 0 0 16px rgba(95, 75, 102, 0.14); } /* ── Content box — tactical operational panel ────────────────────────────── */ .timeline-content { border: 1px solid rgba(17, 26, 17, 0.12); background: rgba(17, 26, 17, 0.025); padding: 1.25rem 1.5rem; opacity: 0; transition: opacity 0.38s ease 0.02s, transform 0.38s ease 0.02s; } /* Odd items: content on left → enter from left */ .timeline-item:nth-child(odd) .timeline-content { transform: translateX(-18px); } /* Even items: content on right → enter from right */ .timeline-item:nth-child(even) .timeline-content { transform: translateX(18px); } /* Mobile: always enter from below */ @media (max-width: 767px) { .timeline-content { transform: translateY(16px); } } .timeline-item.active .timeline-content { opacity: 1; transform: translate(0); } /* ── Typography inside box ───────────────────────────────────────────────── */ .timeline-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--text-primary); } .timeline-desc { font-size: 0.86rem; color: var(--text-muted); line-height: 1.7; text-transform: none; } /* =================================== REAPER SECTION =================================== */ .reaper-section { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; } .reaper-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; } @media (min-width: 1024px) { .reaper-grid { grid-template-columns: 1fr 1fr; } } .reaper-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--accent); background: rgba(255, 45, 45, 0.1); margin-bottom: 1.5rem; } .reaper-badge-dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .reaper-title { font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: 1rem; } .reaper-title span { color: var(--accent); } .reaper-desc { font-size: 1.125rem; color: var(--text-muted); margin-bottom: 2rem; line-height: 1.7; } .reaper-terminal { background: var(--bg-primary); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.8125rem; overflow: hidden; position: relative; } .reaper-terminal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: terminal-scan 3s linear infinite; } @keyframes terminal-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .reaper-terminal-header { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--border); } .reaper-terminal-dot { width: 10px; height: 10px; border-radius: 50%; } .reaper-terminal-dot.red { background: #ff5f56; } .reaper-terminal-dot.yellow { background: #ffbd2e; } .reaper-terminal-dot.green { background: #27ca40; } .reaper-terminal-title { margin-left: 0.5rem; color: var(--text-muted); font-size: 0.75rem; } .reaper-terminal-body { padding: 1.5rem; max-height: 300px; overflow-y: auto; } .reaper-terminal-line { margin-bottom: 0.5rem; line-height: 1.5; } .reaper-terminal-line.cmd { color: var(--accent); } .reaper-terminal-line.info { color: var(--text-muted); } .reaper-terminal-line.warn { color: #ffbd2e; } .reaper-terminal-line.error { color: var(--accent); } .reaper-terminal-line.success { color: var(--success); } /* =================================== CONTACT SECTION =================================== */ .contact-form { max-width: 600px; margin: 0 auto; } .form-group { margin-bottom: 1.5rem; } .form-label { display: block; font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; } .form-input, .form-select, .form-textarea { width: 100%; padding: 1rem; font-family: var(--font-mono); font-size: 0.875rem; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--border); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-muted); } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23555555'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 3rem; cursor: pointer; } .form-textarea { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } } /* =================================== FOOTER =================================== */ .footer { border-top: 1px solid var(--border); padding: 3rem 0; } .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; } @media (min-width: 768px) { .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; } } .footer-links { display: flex; gap: 2rem; } .footer-link { font-size: 0.75rem; color: var(--text-muted); text-decoration: none; transition: color var(--transition-fast); } .footer-link:hover { color: var(--text-primary); } .footer-copy { font-size: 0.6875rem; color: var(--text-muted); } /* =================================== SCROLL REVEAL ANIMATIONS =================================== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1), transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.active { opacity: 1; transform: translateY(0); } /* Stagger children */ .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1), transform 0.62s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-stagger.active > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger.active > *:nth-child(2) { transition-delay: 100ms; } .reveal-stagger.active > *:nth-child(3) { transition-delay: 200ms; } .reveal-stagger.active > *:nth-child(4) { transition-delay: 280ms; } .reveal-stagger.active > *:nth-child(5) { transition-delay: 360ms; } .reveal-stagger.active > * { opacity: 1; transform: translateY(0); transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1), transform 0.58s cubic-bezier(0.22, 1, 0.36, 1); } /* =================================== SCROLLBAR =================================== */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-surface); } ::-webkit-scrollbar-thumb { background: rgba(44, 19, 32, 0.38); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(95, 75, 102, 0.65); } /* Firefox scrollbar */ * { scrollbar-color: rgba(44, 19, 32, 0.38) var(--bg-surface); scrollbar-width: thin; } /* =================================== SELECTION =================================== */ ::selection { background: var(--accent); color: var(--bg-primary); } /* =================================== UTILITIES =================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .section-header { text-align: center; margin-bottom: 4rem; } .section-label { display: block; margin-bottom: 1rem; } .section-title { margin-bottom: 1rem; } .section-desc { color: var(--text-muted); max-width: 600px; margin: 0 auto; } /* =================================== SPLASH SCREEN =================================== */ #splash { position: fixed; inset: 0; /* z-index lifted to 9999999 so the splash always covers the new mobile nav (z:999999) and mobile-menu (z:1000000). Page-transition overlay sits one tier above this. */ z-index: 9999999; background: #c8d4c4; display: grid; place-items: center; overflow: hidden; width: 100vw; height: 100vh; max-width: none; /* opacity/transform controlled by JS during transition */ will-change: opacity, transform; } @supports (height: 100svh) { #splash { height: 100svh; } } /* Splash scroll-lock — applied to while splash is visible so the homepage behind it cannot scroll under the user's touch. Removed when the user hits ACTIVATE GROOM LAKE. Paired with a matching overflow:hidden on to fully suppress any momentum scroll on iOS. */ body.mobile-splash-active { overflow: hidden !important; height: 100vh; height: 100dvh; touch-action: none; -webkit-overflow-scrolling: auto; overscroll-behavior: none; } html.mobile-splash-active { overflow: hidden !important; overscroll-behavior: none; } /* World map canvas */ #splash-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } /* Aged paper warm tint + scanlines */ .splash-aged { position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.013) 3px, rgba(0, 0, 0, 0.013) 4px ), radial-gradient(ellipse at 15% 10%, rgba(210, 185, 110, 0.09) 0%, transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(190, 165, 90, 0.07) 0%, transparent 55%); pointer-events: none; z-index: 1; } /* Heavy vignette — heavier than the main site */ .splash-vignette-layer { position: absolute; inset: 0; box-shadow: inset 0 0 240px 110px rgba(0, 0, 0, 0.92); pointer-events: none; z-index: 2; } /* Film grain layer */ .splash-grain-layer { position: absolute; inset: -50%; width: 200%; height: 200%; opacity: 0.2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); animation: film-grain 0.12s steps(1) infinite; pointer-events: none; z-index: 3; } /* Top doc-id bar */ .splash-doc-id { position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.18em; color: rgba(0, 0, 0, 0.35); text-transform: uppercase; white-space: nowrap; z-index: 10; pointer-events: none; text-align: center; } /* Corner readouts */ .splash-corner { position: absolute; font-family: var(--font-mono); font-size: 0.585rem; letter-spacing: 0.12em; line-height: 1.75; color: rgba(0, 0, 0, 0.5); text-transform: uppercase; z-index: 10; pointer-events: none; } .splash-corner span { display: block; } .sc-tl { top: 1.5rem; left: 1.5rem; border-top: 1px solid rgba(0,0,0,0.2); border-left: 1px solid rgba(0,0,0,0.2); padding: 0.5rem 0.6rem; } .sc-tr { top: 1.5rem; right: 1.5rem; text-align: right; border-top: 1px solid rgba(0,0,0,0.2); border-right: 1px solid rgba(0,0,0,0.2); padding: 0.5rem 0.6rem; } .sc-bl { bottom: 4rem; left: 1.5rem; border-bottom: 1px solid rgba(0,0,0,0.2); border-left: 1px solid rgba(0,0,0,0.2); padding: 0.5rem 0.6rem; } .sc-br { bottom: 4rem; right: 1.5rem; text-align: right; border-bottom: 1px solid rgba(0,0,0,0.2); border-right: 1px solid rgba(0,0,0,0.2); padding: 0.5rem 0.6rem; } /* Central splash content — grid item, centered by #splash grid */ .splash-content { position: relative; z-index: 10; text-align: left; padding: 2rem 1.5rem; max-width: 520px; width: 90%; } .splash-eyebrow { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.28em; color: rgba(0, 0, 0, 0.35); text-transform: uppercase; margin-bottom: 1rem; } .splash-rule { width: 40px; height: 1px; background: rgba(0, 0, 0, 0.2); margin: 1rem 0; } /* Decrypting text */ .splash-text { font-family: var(--font-display); font-size: clamp(1.1rem, 3.2vw, 2rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(0, 0, 0, 0.85); min-height: 3.75em; line-height: 1.25; word-break: break-word; } .splash-text .scr { color: rgba(80, 40, 10, 0.38); font-weight: 400; } .splash-text .rev { color: rgba(0, 0, 0, 0.85); } .splash-text .sp { display: inline; } /* Operation row */ .splash-op-row { display: flex; align-items: center; gap: 0; margin-top: 0.5rem; } .splash-redacted { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.12em; color: rgba(0, 0, 0, 0.38); text-transform: uppercase; white-space: nowrap; padding-right: 0.5rem; } /* Enter button — cinematic activation CTA */ .splash-btn { display: inline-flex; align-items: center; padding: 0.45rem 1rem; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; background: rgba(0, 0, 0, 0.85); color: #c8d4c4; border: none; cursor: pointer; opacity: 0; visibility: hidden; position: relative; isolation: isolate; /* contain z-index stacking for pseudo-elements */ overflow: visible; /* allow corner brackets to extend outside bounds */ transition: opacity 0.55s ease, visibility 0.55s ease, background 0.22s ease, color 0.22s ease; } .splash-btn.visible { opacity: 1; visibility: visible; } .splash-btn:hover { background: rgba(0, 0, 0, 0.97); } /* Corner bracket frame — red, extends outside button bounds. Uses the same gradient-background technique as the nav system. */ .splash-btn::before { content: ''; position: absolute; inset: -6px -8px; pointer-events: none; z-index: 2; background: linear-gradient(#E60000, #E60000) 0 0 / 10px 1.5px no-repeat, linear-gradient(#E60000, #E60000) 0 0 / 1.5px 10px no-repeat, linear-gradient(#E60000, #E60000) 100% 0 / 10px 1.5px no-repeat, linear-gradient(#E60000, #E60000) 100% 0 / 1.5px 10px no-repeat, linear-gradient(#E60000, #E60000) 0 100% / 10px 1.5px no-repeat, linear-gradient(#E60000, #E60000) 0 100% / 1.5px 10px no-repeat, linear-gradient(#E60000, #E60000) 100% 100% / 10px 1.5px no-repeat, linear-gradient(#E60000, #E60000) 100% 100% / 1.5px 10px no-repeat; opacity: 0; transform: scale(0.80); transition: opacity 230ms cubic-bezier(0.22, 1, 0.36, 1), transform 230ms cubic-bezier(0.22, 1, 0.36, 1); } /* Purple activation sweep — travels left-to-right on click. z-index: -1 keeps it behind the button text (isolation: isolate ensures -1 is relative to this stacking context, not the page). */ .splash-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, #3D2B4A 0%, #5F4B66 58%, #4A3558 100%); transform: scaleX(0); transform-origin: left center; z-index: -1; transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1); } /* Hover — brackets form */ @media (hover: hover) { .splash-btn:hover::before { opacity: 1; transform: scale(1); } } /* Activation state — brackets snap fully in, purple sweep fills */ .splash-btn--activating { color: #ddc8e8; cursor: default; } .splash-btn--activating::before { opacity: 1; transform: scale(1); /* Snap brackets immediately on click — they were already forming on hover */ transition: opacity 60ms ease, transform 60ms ease; } .splash-btn--activating::after { transform: scaleX(1); } /* Pre-text — "YOU ARE NOW ENTERING" */ .splash-pre { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.28em; color: rgba(0, 0, 0, 0.40); text-transform: uppercase; margin-bottom: 0.15rem; } /* Post-text — "↓ SCROLL TO EXPLORE" */ .splash-post { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.22em; color: rgba(0, 0, 0, 0.30); text-transform: uppercase; margin-top: 1.4rem; opacity: 0; transition: opacity 0.8s ease; pointer-events: none; } .splash-post.visible { opacity: 1; } /* =================================== SIDE NETWORK MONITORS Live drifting nodes + connecting lines on left and right edges =================================== */ .side-network { position: fixed; top: 0; height: 100vh; width: 110px; z-index: 3; pointer-events: none; } .side-net-left { left: 0; } .side-net-right { right: 0; } /* Tactical "hover markers" instruction */ .splash-interact-hint { position: absolute; top: 5.5rem; left: 1.5rem; font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.24em; color: rgba(190, 0, 0, 0.8); text-transform: uppercase; z-index: 10; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; display: flex; align-items: center; gap: 0.5rem; } .splash-interact-hint::before { content: ''; display: inline-block; width: 4px; height: 4px; background: rgba(190, 0, 0, 0.85); border-radius: 50%; animation: splash-hint-blink 1.4s ease-in-out infinite; flex-shrink: 0; } @keyframes splash-hint-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } .splash-interact-hint.visible { opacity: 1; } .splash-interact-hint.hidden { opacity: 0; transition: opacity 0.3s ease; } /* Bottom classification stamp */ .splash-bottom-stamp { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.22em; color: rgba(0, 0, 0, 0.45); text-transform: uppercase; white-space: nowrap; z-index: 10; pointer-events: none; border-top: 1px solid rgba(0, 0, 0, 0.15); padding-top: 0.35rem; } /* ── Mobile splash adjustments (≤ 767px) ───────────────────── */ @media (max-width: 767px) { /* Remove scroll prompt — redundant on touch */ #splash-scroll-hint { display: none !important; } /* Floating head canvas — fills the lower portion of portrait splash. Sized generously (78vw) so it reads clearly and closes the gap between the CTA and the CUI footer. Bottom offset is tight so the head anchors cleanly above the footer without overlap. Z-index sits above both the paper/grid underlay and the map canvas. */ #splash-head-mobile { display: block; position: absolute; bottom: 2.25rem; left: 50%; transform: translateX(-50%); width: 78vw; height: 78vw; /* Never squash vertically on taller phones */ max-height: 46vh; z-index: 2; /* above map (z:1), below aged/vignette/grain layers */ pointer-events: none; opacity: 0; transition: opacity 2s ease; } #splash-head-mobile.visible { opacity: 0.88; /* slightly stronger so the head reads as a presence */ } } /* Hide on desktop — head lives on the main page there */ @media (min-width: 768px) { #splash-head-mobile { display: none; } } /* =================================== TRANSITION OVERLAY — CINEMATIC ENTER SEQUENCE Semi-transparent logo + zoom, never blocks, pointer-events none throughout =================================== */ #transition-overlay { position: fixed; inset: 0; /* z-index lifted to 99999999 — above the splash (9999999) which is above the new mobile nav (999999). Final cinematic layer. */ z-index: 99999999; display: flex; align-items: center; justify-content: center; pointer-events: none; visibility: hidden; } #transition-overlay.active { visibility: visible; } /* Big centered logo mark — materialises fully opaque on Activate */ .tx-logo { width: min(65vw, 65vh); height: min(65vw, 65vh); object-fit: contain; opacity: 0; transform: scale(0.72); will-change: opacity, transform; } @media (prefers-reduced-motion: reduce) { .tx-logo { transition: none !important; } #splash { transition: none !important; } } /* =================================== GLITCH FX — Cold War terminal interference Jitter + chroma applied to splash scene during Enter transition. Canvas overlay handles scanlines/tears; CSS handles element-level effects. =================================== */ /* Scene jitter: discrete translate steps — no smooth interpolation */ @keyframes gl-jitter { 0% { transform: translate(0, 0); } 28% { transform: translate(-3px, 1px); } 56% { transform: translate(2px, -1px); } 78% { transform: translate(-1px, 1px); } 100% { transform: translate(0, 0); } } .glitch-jitter { animation: gl-jitter 190ms steps(3, end) 1 forwards; } /* Chroma offset: grape/green split on the decrypt text, muted palette */ @keyframes gl-chroma { 0% { text-shadow: 0.7px 0 rgba(95, 75, 102, 0.42), -0.4px 0 rgba(0, 80, 0, 0.18); } 55% { text-shadow: -0.5px 0 rgba(95, 75, 102, 0.28), 0.3px 0 rgba(0, 80, 0, 0.13); } 100% { text-shadow: none; } } .glitch-chroma { animation: gl-chroma 175ms steps(2, end) 1 forwards; } @media (prefers-reduced-motion: reduce) { .glitch-jitter, .glitch-chroma { animation: none !important; } } /* =================================== HEADING DECRYPT — scramble-reveal effect Scrambled chars are muted; final state always restores originalHTML. =================================== */ .hd-scr { color: rgba(17, 26, 17, 0.38); /* No font-weight override — inherits parent weight to prevent text reflow during scramble */ } /* =================================== GLOBE CANVAS — FIXED PARALLAX BACKGROUND =================================== */ /* Canvas: always fixed behind the whole page */ .hero-canvas { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 2; pointer-events: none; } /* Threat panel wrapper — clip-path (applied via JS) creates a stacking context. Without an explicit z-index this context sits BELOW the canvas (z-index:2), so sections inside it would render behind the globe no matter their own z-index. z-index:5 here puts the whole wrapper above the canvas in the root stacking context. */ #threat-panel-wrap { position: relative; z-index: 5; } /* Hero: transparent so globe canvas shows through cleanly */ .hero { z-index: 4; } /* Sections: frosted panes — globe glows through, text stays legible */ .stats-bar, #problem, #about, #how-we-operate, #services, #tiers, #cases, .reaper-section, .closing-section, #contact { position: relative; z-index: 4; background: rgba(197, 207, 202, 0.52) !important; backdrop-filter: blur(3px); } /* Stats bar: solid surface, no backdrop-filter so globe cannot composite through */ .stats-bar { background: rgba(200, 210, 204, 0.97) !important; backdrop-filter: none !important; } /* Problem section: same — no backdrop-filter, near-solid background */ #problem { background: rgba(200, 210, 204, 0.97) !important; backdrop-filter: none !important; overflow: hidden; } /* Belt-and-braces backing layer — additional blocker for any bleed */ #problem::before { content: ''; position: absolute; inset: 0; background: rgba(200, 210, 204, 0.60); pointer-events: none; z-index: 0; } /* All direct content sits above the radial mask */ #problem > .container { position: relative; z-index: 1; } /* =========================== THREAT SECTION — TEXT + CARD READABILITY Scoped to threat section elements only =========================== */ /* Stats strip — high contrast on white panel */ #stats-bar-sect .stat-value { color: #111111; } #stats-bar-sect .stat-label { color: #2a2a2a; } /* Section heading — no greenish text-shadow on white panel */ #problem .section-title { text-shadow: none; color: #0f0f0f; } #problem .section-label { color: var(--accent); opacity: 1; } #problem .section-desc { color: #1a1a1a; } /* Threat cards — lighter sage surface, clearly elevated above the panel Scoped to #problem for specificity over the base .threat-box rules below */ #problem .threat-box { background: rgba(220, 228, 223, 0.98); border: 1.5px solid rgba(0, 0, 0, 0.10); border-top: 3px solid #111111; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } #problem .threat-box:hover { border-top-color: var(--accent); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10); transform: translateY(-3px); } #problem .threat-box-header { background: rgba(0, 0, 0, 0.025); border-bottom: 1px solid rgba(0, 0, 0, 0.07); } #problem .threat-box-tag { color: #3a3a3a; } #problem .threat-box-class { opacity: 1; } #problem .threat-subheader { color: #111111; } #problem .threat-divider { background: rgba(0, 0, 0, 0.08); } /* Body copy — dark, readable, no muted-green tint */ #problem .threat-body { color: #1a1a1a; line-height: 1.75; } #about, #tiers { background: rgba(181, 196, 184, 0.52) !important; } /* Closing section + contact: stronger panel tone creates clear section break before the "Speak to our operative" / contact sequence */ .closing-section { background: rgba(172, 186, 176, 0.72) !important; border-top: 1px solid rgba(0, 0, 0, 0.12); } #contact { background: rgba(168, 182, 172, 0.82) !important; border-top: 2px solid rgba(0, 0, 0, 0.14); } .footer { position: relative; z-index: 4; background: rgba(197, 207, 202, 0.97) !important; } /* Text legibility over globe background */ .hero-title, .section-title, .reaper-title, h1, h2, h3 { text-shadow: 0 1px 24px rgba(197, 207, 202, 0.6); } .hero-subtitle, .section-desc, .pillar-desc, .reaper-desc { text-shadow: 0 1px 12px rgba(197, 207, 202, 0.5); } /* =================================== SPARSE ORBIT BACKGROUND ANIMATION Hidden — replaced by pixel scan elements =================================== */ .bg-orbit { display: none !important; /* circles removed per design intent */ position: fixed; border-radius: 50%; border: 1px solid rgba(17, 26, 17, 0.13); pointer-events: none; z-index: 3; } /* Two small dots riding each orbit ring */ .bg-orbit::before, .bg-orbit::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(17, 26, 17, 0.32); } .bg-orbit::before { top: -1.5px; left: 50%; margin-left: -1.5px; } .bg-orbit::after { bottom: -1.5px; left: 50%; margin-left: -1.5px; } /* Orbit 1 — large, left-centre area, slow */ .bg-orbit-1 { width: 360px; height: 360px; left: calc(6vw - 180px); top: calc(40vh - 180px); animation: orbit-spin 42s linear infinite; } /* Orbit 2 — medium, right side, moderate speed, reversed */ .bg-orbit-2 { width: 220px; height: 220px; left: calc(88vw - 110px); top: calc(60vh - 110px); animation: orbit-spin 27s linear infinite reverse; } /* Orbit 3 — small, upper-right, faster */ .bg-orbit-3 { width: 130px; height: 130px; left: calc(80vw - 65px); top: calc(18vh - 65px); animation: orbit-spin 18s linear infinite; } @keyframes orbit-spin { to { transform: rotate(360deg); } } /* =================================== THREAT / PROBLEM BOXES =================================== */ .threat-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .threat-grid { grid-template-columns: repeat(3, 1fr); } } .threat-box { background: var(--bg-primary); border: 1.5px solid rgba(17, 26, 17, 0.4); border-top: 3px solid var(--text-primary); padding: 0; position: relative; overflow: hidden; transition: border-top-color var(--transition-base), box-shadow var(--transition-base), transform 200ms cubic-bezier(0.22, 1, 0.36, 1); } .threat-box:hover { border-top-color: var(--accent); box-shadow: 0 8px 28px rgba(17, 26, 17, 0.1); transform: translateY(-3px); } /* Top header bar */ .threat-box-header { display: flex; justify-content: space-between; align-items: center; padding: 0.55rem 1.5rem; background: rgba(17, 26, 17, 0.05); border-bottom: 1px solid rgba(17, 26, 17, 0.12); } .threat-box-tag { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.2em; color: var(--text-muted); text-transform: uppercase; } .threat-box-class { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.18em; color: var(--accent); border: 1px solid var(--accent); padding: 0.1rem 0.4rem; opacity: 0.8; } /* Big stat number — red accent, maximum impact */ .threat-stat { font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 700; color: var(--accent); line-height: 1; padding: 1.5rem 1.5rem 0.2rem; letter-spacing: -0.04em; } /* Subheader below stat */ .threat-subheader { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.28em; color: var(--text-primary); text-transform: uppercase; padding: 0.2rem 1.5rem 1.25rem; } /* Thin divider rule */ .threat-divider { height: 1px; background: rgba(17, 26, 17, 0.15); margin: 0 1.5rem 1.25rem; } /* Body copy */ .threat-body { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); line-height: 1.75; padding: 0 1.5rem 1.75rem; letter-spacing: 0.02em; text-transform: none; } /* =================================== PARTNER LOGOS =================================== */ .partner-logos { margin-top: 4rem; border-top: 1px solid var(--border); padding-top: 3rem; } .partner-logos-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 1.5rem; display: block; } .partner-logo-grid { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; align-items: center; } .partner-logo-img-wrap { display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(14px); } .partner-logo-img-wrap.logo-visible { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease, transform 0.6s ease; } .partner-logo-img-wrap.logo-float { animation: logo-idle-float 4s ease-in-out infinite; } .partner-logo-img { max-height: 44px; max-width: 130px; width: auto; height: 44px; object-fit: contain; display: block; filter: grayscale(100%) brightness(1.15) opacity(0.55); transition: filter var(--transition-base); } .partner-logo-img.logo-invert { filter: invert(1) grayscale(100%) brightness(1.1) opacity(0.55); } .partner-logo-img:hover { filter: grayscale(60%) brightness(1.1) opacity(0.85); } .partner-logo-img.logo-invert:hover { filter: invert(1) grayscale(60%) brightness(1.1) opacity(0.85); } /* ICAC logo PNG ships with a white background baked into the inner shape. Two-layer cleanup: 1. mix-blend-mode: multiply drops pure-white pixels so only the dark mark survives against the sage surface. 2. A stronger grayscale+contrast+darkening filter pushes near-white anti- aliased pixels (inside the "A" counter, edges) into the darker range so multiply can also hide them. This matches the cleaner About-page treatment and kills the visible white artifact on the homepage. */ img[src*="icac-logo"] { mix-blend-mode: multiply; filter: grayscale(100%) contrast(1.18) brightness(0.72) !important; background: transparent !important; } @keyframes logo-idle-float { 0% { transform: translateY(0); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0); } } /* ── Home page: operator backgrounds ticker ────────────────────────────── Mask narrowed from 8%/92% to 3%/97% — wide fade made logos near the edges read as "half-cut" rather than entering cleanly. */ .hl-logo-ticker-outer { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%); } .hl-logo-track { display: flex; align-items: center; gap: 3.8rem; width: max-content; animation: hl-ticker-run 36s linear infinite; } /* Pause-on-hover only on hover-capable pointers. Telegram's WebView (and some Android browsers) trigger sticky :hover on touch — that was permanently pausing the ticker on mobile. (hover: hover) gates the pause to true mouse pointers. */ @media (hover: hover) { .hl-logo-ticker-outer:hover .hl-logo-track { animation-play-state: paused; } } @keyframes hl-ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } } .hl-logo-track img { height: 44px; max-height: 44px; max-width: 150px; width: auto; object-fit: contain; flex-shrink: 0; display: block; filter: grayscale(100%) brightness(1.15) opacity(0.55); transition: filter 0.28s ease; } .hl-logo-track img.logo-invert { filter: invert(1) grayscale(100%) brightness(1.1) opacity(0.55); } .hl-logo-ticker-outer:hover .hl-logo-track img { filter: grayscale(100%) brightness(1.05) opacity(0.80); } .hl-logo-ticker-outer:hover .hl-logo-track img.logo-invert { filter: invert(1) grayscale(100%) brightness(1.1) opacity(0.75); } .hl-logo-track img[data-sm] { height: 30px; max-height: 30px; } .hl-logo-track img[data-lg] { height: 62px; max-height: 62px; } /* Mobile: ensure every logo renders fully — no clipping, correct aspect ratio. max-width scales down a touch so wide logos aren't squeezed by the tighter edge fade, and object-fit: contain keeps every logo's proportions intact. */ @media (max-width: 767px) { .hl-logo-track img { max-width: 120px; object-fit: contain; object-position: center; } .hl-logo-track img[data-sm] { height: 26px; max-height: 26px; } .hl-logo-track img[data-lg] { height: 56px; max-height: 56px; } } /* ── Home ticker — logo item wrapper + acronym reveal ──────────────────── */ /* Each logo sits inside a flex column with a hidden full-name label beneath. On desktop the label fades in on hover; on touch it fades in on tap (tap routes through :focus-within via tabindex="0" on the wrapper). The label uses absolute positioning so revealing it does NOT shift the row and does NOT add horizontal overflow. */ .hl-logo-item { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; flex-shrink: 0; outline: none; cursor: default; /* Bottom padding reserves a guaranteed gap between the logo and the caption box so the caption NEVER paints over the logo. 2.75rem is enough for a 2-line caption (~32px) + 12px clear daylight from the logo's bottom edge. */ padding-bottom: 2.75rem; } /* Full-name caption — positioned BELOW the logo, inside the reserved padding area. Subtle, bounded, multi-line, never overlaps neighbours. */ .hl-logo-name { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 4px); max-width: 260px; min-width: 110px; padding: 4px 10px; font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(17, 26, 17, 0.82); background: rgba(200, 212, 196, 0.95); border: 1px solid rgba(143, 168, 138, 0.45); text-align: center; white-space: normal; word-break: normal; line-height: 1.45; opacity: 0; transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; user-select: none; /* Low z-index: caption should NEVER paint above a sibling logo's image. Only visible within its own item's bottom padding area. */ z-index: 1; } .hl-logo-item:hover, .hl-logo-item:focus-within, .hl-logo-item.hl-logo-tapped { z-index: 4; /* lift the whole item so its caption clears siblings */ } /* Hover reveal — gated to hover-capable pointers so touch devices don't trigger sticky-hover captions. Touch uses .hl-logo-tapped via the JS tap-reveal handler. */ @media (hover: hover) { .hl-logo-item:hover .hl-logo-name { opacity: 1; transform: translate(-50%, 0); } } .hl-logo-item:focus-within .hl-logo-name, .hl-logo-item.hl-logo-tapped .hl-logo-name { opacity: 1; transform: translate(-50%, 0); } .hl-logo-ticker-outer .hl-logo-item:hover img, .hl-logo-ticker-outer .hl-logo-item:focus-within img, .hl-logo-ticker-outer .hl-logo-item.hl-logo-tapped img { filter: grayscale(100%) brightness(0.9) opacity(0.95); } .hl-logo-ticker-outer .hl-logo-item:hover img.logo-invert, .hl-logo-ticker-outer .hl-logo-item:focus-within img.logo-invert, .hl-logo-ticker-outer .hl-logo-item.hl-logo-tapped img.logo-invert { filter: invert(1) grayscale(100%) brightness(1.1) opacity(0.9); } /* Pause-on-hover only on hover-capable pointers (mouse / trackpad). Touch devices keep the ticker scrolling continuously even when the user taps a logo to read its caption — tap-to-pause was disorienting on a phone where caption reveal already shifts visual focus. */ @media (hover: hover) { .hl-logo-ticker-outer:has(.hl-logo-item:hover) .hl-logo-track, .hl-logo-ticker-outer:has(.hl-logo-item:focus-within) .hl-logo-track { animation-play-state: paused; } } /* ICAC keeps its own filter (set above with !important) */ /* Mobile: touch devices latch the hover-pause on first tap. Disable the hover-pause and keep the ticker rotating continuously. Slightly faster cycle so more badges are seen per screen-time. */ @media (hover: none), (max-width: 767px) { .hl-logo-ticker-outer:hover .hl-logo-track { animation-play-state: running; } .hl-logo-track { animation-duration: 28s; } /* Soften the edge fade so badges are fully visible up to the viewport edges — prevents "cut off" appearance at phone widths. */ .hl-logo-ticker-outer { -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%); } } /* Tactical system-action link — prominent intelligence UI style */ .tactical-link { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.2em; color: var(--text-primary); text-decoration: none; position: relative; padding-bottom: 3px; } /* Animated underline sweep */ .tactical-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1.5px; background: var(--accent); transform-origin: left center; animation: tactical-sweep 2.4s ease-in-out infinite; } @keyframes tactical-sweep { 0% { transform: scaleX(0.15); opacity: 0.4; } 50% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(0.15); opacity: 0.4; } } .tactical-link:hover { color: var(--accent); } .tactical-link:hover::after { animation: none; transform: scaleX(1); opacity: 1; } /* Blinking block cursor */ .tactical-link-cursor { display: inline-block; width: 0.55em; height: 1em; background: var(--accent); vertical-align: middle; margin-left: 0.15em; animation: tactical-blink 1.1s step-end infinite; } @keyframes tactical-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* =================================== SERVICES — 3-COLUMN LAYOUT =================================== */ .services-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); } @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } .service-col { background: var(--bg-primary); padding: 2.5rem 2rem; translate: 0 0; transition: background var(--transition-base), translate 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease; } .service-col:hover { background: var(--bg-surface); translate: 0 -3px; box-shadow: 0 8px 24px rgba(17, 26, 17, 0.07); } .service-col-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .service-col-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .service-col-icon svg { width: 20px; height: 20px; color: var(--accent); } .service-col-title { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; color: var(--text-primary); } .service-list { list-style: none; display: flex; flex-direction: column; gap: 0.625rem; } .service-list li { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); letter-spacing: 0.06em; padding-left: 1.25rem; position: relative; line-height: 1.5; text-transform: none; } .service-list li::before { content: '→'; position: absolute; left: 0; color: var(--accent); } /* =================================== FULL-SPECTRUM PROTECTION Scroll-driven layered cards + 01/02/03 index =================================== */ /* ── Section header ─────────────────────────────────────────────────────── */ .fsp-header { display: flex; align-items: flex-start; gap: clamp(2rem, 5vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); } .fsp-header-meta { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; flex-shrink: 0; padding-top: 0.5rem; } .fsp-header-label { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.28em; color: var(--accent); writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); white-space: nowrap; } .fsp-header-rule { width: 1px; height: 48px; background: var(--border); } .fsp-header-code { font-family: var(--font-mono); font-size: 0.42rem; letter-spacing: 0.22em; color: var(--text-muted); opacity: 0.5; writing-mode: vertical-rl; transform: rotate(180deg); } .fsp-header-titles { flex: 1; } .fsp-title { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.0; color: var(--text-primary); margin-bottom: 1.25rem; } .fsp-subtitle { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; line-height: 1.8; color: var(--text-muted); text-transform: none; max-width: 56ch; } /* ── Body: cards (left) + index (right) ─────────────────────────────────── */ .fsp-body { display: block; } /* ── Card container — horizontal progression strip ──────────────────────── */ .fsp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; align-items: stretch; } /* ── Card wrap — receives scroll-parallax transform via JS ──────────────── */ .fsp-card-wrap { position: relative; will-change: transform; } /* Subtle vertical rhythm — middle card slightly elevated */ .fsp-card-wrap:nth-child(1) { } .fsp-card-wrap:nth-child(2) { margin-top: -1.5rem; } .fsp-card-wrap:nth-child(3) { } /* ── Card — entrance animation + hover only ─────────────────────────────── */ .fsp-card { display: flex; flex-direction: column; background: var(--bg-primary); border: 1px solid var(--border); min-height: 460px; position: relative; /* Entrance: invisible, shifted down */ opacity: 0; transform: translateY(44px); transition: opacity 0.70s cubic-bezier(0.4, 0, 0.2, 1), transform 0.70s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s ease; } /* Left accent border per phase color */ .fsp-card--1 { border-left: 3px solid rgba(59, 126, 166, 0.75); } .fsp-card--2 { border-left: 3px solid rgba(85, 112, 88, 0.75); } .fsp-card--3 { border-left: 3px solid rgba(172, 72, 52, 0.75); } /* ── Entrance resolved — toggled per-card via JS scroll thresholds ──────── */ .fsp-card--visible { opacity: 1; transform: translateY(0); } /* ── Hover (pointer devices only) ───────────────────────────────────────── */ @media (hover: hover) { /* Post-entrance: switch to fast hover transitions */ .fsp-card--visible { transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.38s ease; transition-delay: 0ms; } .fsp-card--visible:hover { box-shadow: 0 20px 52px rgba(17, 26, 17, 0.13); } /* Directional hover translate per card */ .fsp-card--1.fsp-card--visible:hover { transform: translate(-0.4rem, -0.75rem); } .fsp-card--2.fsp-card--visible:hover { transform: translateY(-0.75rem); } .fsp-card--3.fsp-card--visible:hover { transform: translate(0.3rem, -0.75rem); } /* Sibling wraps recede — targets the card inside the non-hovered wrap */ .fsp-cards:has(.fsp-card--visible:hover) .fsp-card-wrap:not(:has(.fsp-card--visible:hover)) .fsp-card--visible { opacity: 0.52; } } /* ── Cap bar ─────────────────────────────────────────────────────────────── */ .fsp-card-cap { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1.25rem; border-bottom: 1px solid var(--border); } .fsp-cap-num { font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.28em; color: var(--text-muted); opacity: 0.5; flex-shrink: 0; } .fsp-cap-line { flex: 1; height: 1px; background: var(--border); opacity: 0.6; } .fsp-cap-tag { font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.24em; color: var(--text-muted); text-transform: uppercase; flex-shrink: 0; } /* ── Card body ───────────────────────────────────────────────────────────── */ .fsp-card-body { flex: 1; display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; } .fsp-card-head { margin-bottom: 1.75rem; } .fsp-card-eyebrow { display: block; font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.28em; color: var(--text-muted); opacity: 0.6; margin-bottom: 0.7rem; } .fsp-card-title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 700; letter-spacing: 0.02em; line-height: 1.05; color: var(--text-primary); } /* ── Capability list ─────────────────────────────────────────────────────── */ .fsp-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; margin-bottom: 1.5rem; } .fsp-list li { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--text-muted); text-transform: none; line-height: 1.5; padding-left: 1rem; position: relative; } .fsp-list li::before { content: '—'; position: absolute; left: 0; color: rgba(143, 168, 138, 0.55); } .fsp-list-em { color: var(--text-primary) !important; } .fsp-list-em::before { content: '→' !important; color: var(--accent) !important; } /* ── Card foot ───────────────────────────────────────────────────────────── */ .fsp-card-foot { padding-top: 0.875rem; border-top: 1px solid var(--border); margin-top: auto; } .fsp-card-status { font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.28em; color: var(--text-muted); opacity: 0.5; text-transform: uppercase; } /* ── 01/02/03 Index sidebar ──────────────────────────────────────────────── */ .fsp-index { display: flex; flex-direction: column; padding-top: 0.25rem; } .fsp-idx-item { padding: 1.1rem 0 1.2rem; border-top: 1px solid var(--border); opacity: 0.30; transition: opacity 0.48s ease; cursor: default; user-select: none; } .fsp-idx-item--active { opacity: 1; } .fsp-idx-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; } .fsp-idx-num { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.28em; color: var(--text-muted); flex-shrink: 0; transition: color 0.35s ease; } .fsp-idx-item--active .fsp-idx-num { color: var(--accent); } /* Rule expands on activation */ .fsp-idx-rule { flex: 1; height: 1px; background: var(--border); transform-origin: left center; transform: scaleX(0); transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1); } .fsp-idx-item--active .fsp-idx-rule { transform: scaleX(1); } .fsp-idx-name { font-family: var(--font-display); font-size: clamp(0.78rem, 1.3vw, 0.96rem); font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: var(--text-primary); display: block; margin-bottom: 0.4rem; } .fsp-idx-sub { font-family: var(--font-mono); font-size: 0.42rem; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; display: block; } /* ── CTA ─────────────────────────────────────────────────────────────────── */ .fsp-cta { margin-top: 3.5rem; text-align: center; } /* ── Tablet: 2 col ───────────────────────────────────────────────────────── */ @media (max-width: 960px) and (min-width: 768px) { .fsp-cards { grid-template-columns: repeat(2, 1fr); } .fsp-card-wrap:nth-child(2) { margin-top: 0; } } /* ── Mobile ──────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .fsp-header { flex-direction: row; gap: 1.25rem; margin-bottom: 2rem; } .fsp-body { display: block; } .fsp-cards { grid-template-columns: 1fr; gap: 0.75rem; } .fsp-card-wrap { width: 100%; margin: 0 !important; will-change: auto; } .fsp-card { min-height: auto; opacity: 1 !important; transform: none !important; } /* Index: horizontal strip on mobile */ .fsp-index { flex-direction: row; border-top: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; } .fsp-idx-item { flex: 1; min-width: 0; border-top: none; border-left: 1px solid var(--border); padding: 0.875rem 0.75rem; } .fsp-idx-item:first-child { border-left: none; } .fsp-idx-rule { display: none; } } /* =================================== TIERS =================================== */ .tiers-group { margin-bottom: 0; } .tiers-group-label { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .tiers-grid { display: grid; grid-template-columns: 1fr; /* Cards now read as three equal boxed units with clean spacing between them, rather than a joined panel with hairline dividers. */ gap: 1rem; background: transparent; /* All items in a row stretch to the tallest — equal heights. */ align-items: stretch; } @media (min-width: 640px) { .tiers-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } .tier-card { background: var(--bg-primary); padding: 2rem; position: relative; display: flex; flex-direction: column; /* Consistent inset border on every tier card — all three read as equal boxed units, not as a mixture of bordered + unbordered panels. The Recommended (Core Defense) card gets a slightly stronger ring via `.tier-card-recommended` below. */ box-shadow: inset 0 0 0 1px rgba(143, 168, 138, 0.30); /* Grid items stretch by default — this ensures flex content fills the full cell height so all three cards align to the same bottom. */ height: 100%; translate: 0 0; transition: background var(--transition-base), translate 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease; } .tier-card:hover { background: var(--bg-surface); translate: 0 -3px; box-shadow: 0 8px 24px rgba(17, 26, 17, 0.08); } /* (`.tier-card-accent` removed — Special Forces now uses the same standard .tier-card treatment as the other two cards. The Recommended rule below adds a slightly stronger ring + red accent top line as the only differentiator between cards. */ /* Core Defense (Recommended) — slightly stronger ring + red top accent */ .tier-card-recommended { box-shadow: inset 0 0 0 1px rgba(143, 168, 138, 0.55); } .tier-card-recommended::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); } /* Recommended badge — absolute, never affects flow */ .tier-recommended-label { position: absolute; top: 2rem; right: 2rem; font-family: var(--font-mono); font-size: 0.54rem; font-weight: 600; letter-spacing: 0.18em; color: var(--accent); opacity: 0.75; border: 1px solid rgba(230, 0, 0, 0.35); padding: 0.2em 0.6em; } .tier-badge { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 0.6rem; } .tier-name { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: 0; } .tier-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.7; } .tier-operative-link { color: inherit; text-decoration: none; opacity: 0.7; border-bottom: 1px solid currentColor; cursor: pointer; transition: opacity 0.2s ease, color 0.2s ease; } .tier-operative-link:hover { opacity: 1; color: var(--accent); } /* CTA pinned to bottom of Core Defense card */ .tier-cta { margin-top: auto; padding-top: 1.75rem; } .tier-cta-btn { display: inline-block; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(230, 0, 0, 0.65); padding: 0.75em 2em; text-decoration: none; box-shadow: 0 0 10px rgba(230, 0, 0, 0.08); transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .tier-cta-btn:hover { background: rgba(230, 0, 0, 0.07); border-color: rgba(230, 0, 0, 0.9); box-shadow: 0 0 20px rgba(230, 0, 0, 0.2), 0 0 6px rgba(230, 0, 0, 0.12); color: var(--accent); } /* All segments identical — top divider on every segment */ .tier-segment { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(143, 168, 138, 0.4); } .tier-segment-label { display: block; font-family: var(--font-mono); font-size: 0.63rem; font-weight: 600; letter-spacing: 0.2em; color: var(--text-primary); opacity: 0.5; margin-bottom: 0.65rem; text-transform: uppercase; } /* =================================== REAPER — UPDATED LAYOUT =================================== */ .reaper-intro { text-align: center; margin-bottom: 4rem; } .reaper-tagline { font-family: var(--font-mono); font-size: clamp(0.875rem, 2vw, 1.125rem); color: var(--text-muted); letter-spacing: 0.08em; margin-top: 0.5rem; } .reaper-tiers { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); margin: 2rem 0; } @media (min-width: 640px) { .reaper-tiers { grid-template-columns: 1fr 1fr; } } .reaper-tier { background: var(--bg-primary); padding: 1.75rem; transition: background var(--transition-base); } .reaper-tier:hover { background: var(--bg-surface); } .reaper-tier-name { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 0.5rem; } .reaper-tier-slots { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .reaper-feature-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .reaper-feature-list li { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.05em; padding-left: 1.25rem; position: relative; } .reaper-feature-list li::before { content: '✓'; position: absolute; left: 0; color: var(--success); } /* =================================== CASE STUDIES =================================== */ .cases-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); } @media (min-width: 1024px) { .cases-grid { grid-template-columns: repeat(3, 1fr); } } .case-card { background: var(--bg-primary); padding: 2.5rem 2rem; transition: background var(--transition-base); } .case-card:hover { background: var(--bg-surface); } .case-op { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 0.5rem; } .case-title { font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 600; margin-bottom: 0.5rem; } .case-location { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.12em; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); } .case-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.7; } .case-status { display: inline-block; margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.15em; color: var(--success); border: 1px solid var(--success); padding: 0.2rem 0.6rem; } /* =================================== CLOSING SECTION =================================== */ .closing-section { text-align: center; } .closing-inner { max-width: 900px; margin: 0 auto; } .closing-label { margin-bottom: 2rem; } .closing-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; margin-bottom: 2.5rem; } .closing-rule { width: 60px; height: 2px; background: var(--accent); margin: 0 auto 2.5rem; } /* =================================== PILLARS GRID — 3-COLUMN OVERRIDE FOR WHO WE ARE =================================== */ @media (min-width: 1024px) { #about .pillars-grid { grid-template-columns: repeat(3, 1fr); } } /* (threat-eyebrow / threat-headline replaced by new .threat-box-header system) */ /* =================================== SERVICE LIST — FEATURED ITEMS (BAITBUSTER, REAPER) =================================== */ .service-list-featured { color: var(--accent) !important; font-weight: 600; letter-spacing: 0.1em !important; } .service-list-featured::before { content: '★' !important; color: var(--accent); } /* =================================== #OPERATIONS — FROSTED PANE =================================== */ #operations { position: relative; z-index: 4; background: rgba(197, 207, 202, 0.82) !important; backdrop-filter: blur(2px); } /* =================================== TIMELINE STEP LABELS =================================== */ .timeline-step-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.24em; color: var(--accent); margin-bottom: 0.5rem; display: block; /* inherits opacity/transform from parent .timeline-content */ } /* =================================== CLASSIFIED CASE CARDS =================================== */ /* Override case card background for richer feel */ #cases .case-card { background: var(--bg-primary); border: 1px solid var(--border); padding: 0; overflow: hidden; position: relative; } #cases .case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); } /* File header bar */ .case-file-header { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1.5rem; background: rgba(0,0,0,0.06); border-bottom: 1px solid var(--border); gap: 1rem; flex-wrap: wrap; } .case-classification { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.16em; color: var(--accent); opacity: 0.75; } .case-file-id { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.14em; color: var(--text-muted); } /* Op name label */ .case-op-name { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.22em; color: var(--text-muted); padding: 1.5rem 1.5rem 0.2rem; text-transform: uppercase; } /* Override inherited title padding */ #cases .case-title { font-size: clamp(1.5rem, 3.5vw, 2.2rem); padding: 0 1.5rem 0.5rem; margin-bottom: 0; } /* Location row */ #cases .case-location { display: flex; align-items: center; gap: 0.5rem; padding: 0 1.5rem 1rem; margin-bottom: 0; border-bottom: 1px solid var(--border); } .case-loc-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulse 2s infinite; } /* Synopsis block */ .case-synopsis { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); } .case-synopsis-label, .case-methods-label, .case-outcome-label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 0.6rem; } .case-synopsis p, .case-outcome p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.65; text-transform: none; } /* Methods / tags */ .case-methods { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); } .case-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; } .case-tag { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--text-muted); border: 1px solid var(--border); padding: 0.2rem 0.55rem; transition: all var(--transition-fast); } #cases .case-card:hover .case-tag { border-color: var(--text-muted); } /* Outcome */ .case-outcome { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); } /* Redacted text spans */ .redacted { background: rgba(17, 26, 17, 0.75); color: rgba(17, 26, 17, 0.75); border-radius: 2px; padding: 0 0.15em; letter-spacing: 0.05em; user-select: none; transition: background 0.4s ease, color 0.4s ease; cursor: default; } .redacted:hover { background: transparent; color: var(--text-muted); } /* File footer */ .case-file-footer { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.5rem; background: rgba(0,0,0,0.04); } .case-status-badge { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.15em; color: var(--success); border: 1px solid var(--success); padding: 0.2rem 0.6rem; } .case-footer-stamp { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.18em; color: rgba(0,0,0,0.3); } /* Cases section override — lighter bg to contrast cards */ #cases { background: rgba(181, 196, 184, 0.9) !important; } /* =================================== CASES GRID — NO GAP (borders on cards) =================================== */ #cases .cases-grid { background: transparent; gap: 1.5rem; } @media (min-width: 1024px) { #cases .cases-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } /* =================================== ORBIT RINGS — increased visibility =================================== */ /* Override the original faint single-border approach */ .bg-orbit { border: none !important; /* remove original 1px faint border */ pointer-events: none; position: fixed; border-radius: 50%; z-index: 3; } /* Layered ring: faint outer glow + crisp inner line */ .bg-orbit::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 8px solid transparent; box-shadow: 0 0 0 1px rgba(17, 26, 17, 0.28), /* crisp outer ring */ inset 0 0 0 1px rgba(17, 26, 17, 0.18); /* crisp inner ring */ } /* Tick marks via gradient mask — compass feel */ .bg-orbit::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient( rgba(17, 26, 17, 0.2) 0deg, rgba(17, 26, 17, 0.2) 0.4deg, transparent 0.4deg, transparent 10deg ); mask-image: radial-gradient(circle, transparent 46%, black 48%, black 52%, transparent 54%); -webkit-mask-image: radial-gradient(circle, transparent 46%, black 48%, black 52%, transparent 54%); } /* Dots riding the orbits */ .bg-orbit-1::before, .bg-orbit-2::before, .bg-orbit-3::before { box-shadow: 0 0 0 1px rgba(17, 26, 17, 0.30), inset 0 0 0 1px rgba(17, 26, 17, 0.18), 0 0 16px 2px rgba(17, 26, 17, 0.05); } /* =================================== SECTION TRANSPARENCY — let globe breathe =================================== */ /* Reduce section opacity so globe is visible through them */ .stats-bar, #problem, #services, #cases, .closing-section, #contact { background: rgba(197, 207, 202, 0.78) !important; } #about, #tiers, #operations { background: rgba(181, 196, 184, 0.80) !important; } .reaper-section { background: rgba(181, 196, 184, 0.82) !important; } /* =================================== MAN OVERLAY — fire-and-forget on Enter =================================== */ .man-overlay { position: fixed; z-index: 6; pointer-events: none; /* centred in the lower-right quadrant, above globe canvas, below headline */ width: clamp(200px, 22vw, 320px); height: auto; bottom: 14vh; right: 8vw; opacity: 0; will-change: transform, opacity; transition: opacity 0.2s ease; } .man-overlay img { display: block; width: 100%; height: auto; } /* Fade-in state */ .man-overlay.man-visible { opacity: 0.72; transition: opacity 0.2s ease; } /* Fade-out state */ .man-overlay.man-out { opacity: 0; transition: opacity 0.35s ease; } /* Float animation — applied while visible */ @keyframes man-float { 0% { transform: translate(0, 0px) rotate(-1.5deg); } 40% { transform: translate(6px, -10px) rotate(1.8deg); } 70% { transform: translate(-4px, -6px) rotate(-0.8deg); } 100% { transform: translate(0, 0px) rotate(-1.5deg); } } .man-overlay.man-floating { animation: man-float 2.6s ease-in-out forwards; } @media (prefers-reduced-motion: reduce) { .man-overlay { display: none !important; } } @media (max-width: 768px) { .man-overlay { display: none !important; } } /* =================================== PAGE HERO — Sub-page hero sections =================================== */ .page-hero { padding: clamp(7rem, 15vw, 11rem) 0 clamp(4rem, 8vw, 7rem); position: relative; z-index: 4; background: rgba(197, 207, 202, 0.78); } .page-hero-inner { max-width: 820px; } .page-hero-label { margin-bottom: 1.5rem; } .page-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 7vw, 5rem); font-weight: 700; line-height: 1.05; /* Positive tracking — matches the site's uppercase heading system */ letter-spacing: 0.04em; margin-bottom: 1.5rem; color: var(--text-primary); } .page-hero-subtitle { font-size: clamp(0.875rem, 2vw, 1rem); color: var(--text-muted); max-width: 580px; line-height: 1.75; margin-bottom: 2rem; text-transform: none; } .page-hero-meta { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--text-muted); border-left: 2px solid var(--accent); padding-left: 0.875rem; margin-top: 2.5rem; } .page-hero-cta { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } /* =================================== SUB-PAGE SECTION BACKGROUNDS =================================== */ .sub-section { position: relative; z-index: 4; background: rgba(197, 207, 202, 0.78); } .sub-section-alt { position: relative; z-index: 4; background: rgba(181, 196, 184, 0.82); } /* =================================== SERVICE DETAIL GRID — capabilities page =================================== */ .service-detail-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); margin-top: 3rem; } @media (min-width: 640px) { .service-detail-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .service-detail-grid { grid-template-columns: repeat(3, 1fr); } } .service-detail-card { background: var(--bg-primary); padding: 2rem; transition: background var(--transition-base); } .service-detail-card:hover { background: var(--bg-surface); } .service-detail-number { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 0.75rem; } .service-detail-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.65rem; letter-spacing: 0.03em; } .service-detail-desc { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); line-height: 1.65; letter-spacing: 0.02em; text-transform: none; } .pillar-intro { font-size: 0.95rem; color: var(--text-muted); max-width: 640px; line-height: 1.75; margin-top: 1.5rem; text-transform: none; } /* =================================== INTEL REPORT GRID — intel page =================================== */ .intel-report-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); margin-top: 3rem; } @media (min-width: 768px) { .intel-report-grid { grid-template-columns: repeat(2, 1fr); } } .intel-report-card { background: var(--bg-primary); padding: 2.5rem 2rem; transition: background var(--transition-base); position: relative; overflow: hidden; } .intel-report-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); } .intel-report-card:hover { background: var(--bg-surface); } .intel-report-classification { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.16em; color: var(--accent); opacity: 0.8; margin-bottom: 0.6rem; } .intel-report-date { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 1rem; } .intel-report-title { font-family: var(--font-display); font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 600; margin-bottom: 0.75rem; line-height: 1.3; text-transform: none; } .intel-report-summary { font-size: 0.78rem; color: var(--text-muted); line-height: 1.68; text-transform: none; margin-bottom: 1.25rem; } .intel-report-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; } .intel-report-tag { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; color: var(--text-muted); border: 1px solid var(--border); padding: 0.2rem 0.55rem; } .intel-report-status { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.12em; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 0.85rem; } .intel-report-status.active { color: var(--accent); } /* =================================== THREAT ACTOR GRID — intel page =================================== */ .threat-actor-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); margin-top: 3rem; } @media (min-width: 768px) { .threat-actor-grid { grid-template-columns: repeat(3, 1fr); } } .threat-actor-card { background: var(--bg-primary); padding: 2rem; transition: background var(--transition-base); } .threat-actor-card:hover { background: var(--bg-surface); } .threat-actor-label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 0.5rem; } .threat-actor-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.4rem; } .threat-actor-origin { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .threat-actor-level { display: inline-block; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.15em; color: var(--accent); border: 1px solid rgba(95, 75, 102, 0.45); padding: 0.15rem 0.55rem; margin-bottom: 0.85rem; } .threat-actor-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.68; text-transform: none; } /* =================================== OPERATOR GRID — about page =================================== */ .operator-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); margin-top: 3rem; } @media (min-width: 768px) { .operator-grid { grid-template-columns: repeat(4, 1fr); } } .operator-card { background: var(--bg-primary); padding: 2rem; transition: background var(--transition-base); } .operator-card:hover { background: var(--bg-surface); } .operator-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); margin-bottom: 1.25rem; transition: border-color var(--transition-fast); } .operator-card:hover .operator-icon { border-color: var(--accent); } .operator-icon svg { width: 18px; height: 18px; color: var(--accent); } .operator-type { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 0.5rem; } .operator-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.65rem; } .operator-desc { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); line-height: 1.65; letter-spacing: 0.02em; text-transform: none; } /* =================================== PROTECT GRID — about page =================================== */ .protect-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); margin-top: 3rem; } @media (min-width: 480px) { .protect-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .protect-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .protect-grid { grid-template-columns: repeat(5, 1fr); } } .protect-item { background: var(--bg-primary); padding: 2rem; transition: background var(--transition-base); } .protect-item:hover { background: var(--bg-surface); } .protect-number { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 0.6rem; } .protect-name { font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; margin-bottom: 0.6rem; } .protect-desc { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); line-height: 1.6; letter-spacing: 0.02em; text-transform: none; } /* =================================== CASE FILES PAGE — standalone =================================== */ .case-files-page .case-card { background: var(--bg-primary); border: 1px solid var(--border); padding: 0; overflow: hidden; position: relative; } .case-files-page .case-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), transparent); } .case-files-page .case-card:hover { background: var(--bg-surface); } .case-files-page .case-title { font-size: clamp(1.5rem, 3.5vw, 2.2rem); padding: 0 1.5rem 0.5rem; margin-bottom: 0; } .case-files-page .case-location { display: flex; align-items: center; gap: 0.5rem; padding: 0 1.5rem 1rem; margin-bottom: 0; border-bottom: 1px solid var(--border); } .case-files-page .cases-grid { background: transparent; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 1024px) { .case-files-page .cases-grid { grid-template-columns: repeat(2, 1fr); } } /* =================================== REAPER SIGNAL BLOCK — intel page Red-accented, distinct system feel =================================== */ .reaper-signal-block { position: relative; border: 1px solid rgba(255, 45, 45, 0.22); border-top: 2px solid var(--accent-red); background: var(--bg-surface); padding: 2.5rem 2.5rem 2rem; overflow: hidden; } /* Scan sweep — continuous horizontal line moving top→bottom */ .reaper-signal-block::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255,45,45,0.52) 35%, rgba(255,45,45,0.52) 65%, transparent); animation: reaper-scan 6s linear infinite; pointer-events: none; z-index: 2; } @keyframes reaper-scan { 0% { transform: translateY(0); opacity: 0; } 5% { opacity: 0.9; } 88% { opacity: 0.35; } 100% { transform: translateY(800px); opacity: 0; } } .reaper-signal-status-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .reaper-signal-eyebrow { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.24em; color: var(--accent-red); } .reaper-signal-live { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.22em; color: var(--accent-red); } .reaper-signal-pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-red); animation: signal-pulse 1.8s ease-in-out infinite; flex-shrink: 0; } @keyframes signal-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.7); } } .reaper-signal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } @media (max-width: 768px) { .reaper-signal-body { grid-template-columns: 1fr; gap: 2rem; } } .reaper-signal-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--text-primary); margin-bottom: 0.875rem; line-height: 1.1; } .reaper-signal-desc { font-family: var(--font-display); font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; text-transform: none; margin-bottom: 1.75rem; max-width: 440px; } .reaper-signal-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .reaper-signal-metric { padding: 1.25rem 1.5rem; background: var(--bg-primary); border: 1px solid rgba(255, 45, 45, 0.18); border-left: 2px solid rgba(255, 45, 45, 0.55); } .reaper-signal-value { font-family: var(--font-display); font-size: clamp(1.3rem, 2.8vw, 1.75rem); font-weight: 700; color: var(--text-primary); line-height: 1; margin-bottom: 0.5rem; animation: metric-flicker 9s ease-in-out infinite; } .reaper-signal-metric:nth-child(2) .reaper-signal-value { animation-delay: 2.1s; } .reaper-signal-metric:nth-child(3) .reaper-signal-value { animation-delay: 4.7s; } .reaper-signal-metric:nth-child(4) .reaper-signal-value { animation-delay: 7.3s; } @keyframes metric-flicker { 0%, 86%, 100% { opacity: 1; } 88% { opacity: 0.55; } 89% { opacity: 1; } 91% { opacity: 0.75; } 93% { opacity: 1; } } .reaper-signal-label { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.18em; color: rgba(77, 97, 72, 0.65); } .reaper-signal-footer { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 45, 45, 0.14); } .reaper-signal-footer span { font-family: var(--font-mono); font-size: 0.45rem; letter-spacing: 0.16em; color: rgba(77, 97, 72, 0.45); } /* Archive access module — bottom of Intel Drops */ .intel-archive-access { margin-top: 3rem; padding: 1.75rem 2rem; border: 1px solid rgba(17, 26, 17, 0.18); border-left: 2px solid rgba(17, 26, 17, 0.22); background: rgba(181, 196, 184, 0.35); display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; position: relative; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 rgba(255, 45, 45, 0); transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease, background 0.25s ease; } .intel-archive-access::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255,45,45,0.10) 35%, rgba(255,45,45,0.10) 65%, transparent); animation: archive-scan 7s linear infinite; pointer-events: none; } @keyframes archive-scan { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 90% { opacity: 0.6; } 100% { transform: translateY(500px); opacity: 0; } } .intel-archive-access:hover { box-shadow: 0 0 18px rgba(255, 45, 45, 0.18); border-color: rgba(255, 45, 45, 0.35); border-left-color: rgba(255, 45, 45, 0.55); transform: translateY(-2px); background: rgba(181, 196, 184, 0.45); } .intel-archive-access:hover .intel-archive-access-title { color: var(--accent-red); letter-spacing: 0.02em; } .intel-archive-access-label { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.24em; color: var(--text-muted); margin-bottom: 0.5rem; transition: color 0.25s ease; } .intel-archive-access-title { font-family: var(--font-display); font-size: clamp(0.9rem, 2vw, 1.05rem); font-weight: 600; color: var(--text-primary); margin-bottom: 0.35rem; transition: color 0.25s ease, letter-spacing 0.25s ease; } .intel-archive-access-desc { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.1em; color: var(--text-muted); text-transform: none; } .intel-archive-access-cta { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.62rem 1.4rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--text-primary); background: transparent; border: 1px solid rgba(17, 26, 17, 0.28); transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease; white-space: nowrap; } .intel-archive-access:hover .intel-archive-access-cta { color: var(--accent-red); border-color: rgba(255, 45, 45, 0.40); background: rgba(255, 45, 45, 0.04); } /* Feed status indicator */ .intel-feed-status { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2.5rem; font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.18em; color: var(--text-muted); } .intel-feed-indicator { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: signal-pulse 1.8s ease-in-out infinite; flex-shrink: 0; } .intel-feed-sep { color: rgba(77, 97, 72, 0.4); } .intel-feed-count { color: rgba(77, 97, 72, 0.5); } /* Archive drops */ .intel-archive { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border); } .intel-archive-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; } .intel-archive-label { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.22em; color: var(--text-muted); white-space: nowrap; } .intel-archive-rule { flex: 1; height: 1px; background: var(--border); } .intel-archive-list { display: flex; flex-direction: column; gap: 0; } .intel-archive-item { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1.25rem; align-items: baseline; padding: 0.875rem 0; border-bottom: 1px solid rgba(143, 168, 138, 0.3); } .intel-archive-item:last-child { border-bottom: none; } @media (max-width: 640px) { .intel-archive-item { grid-template-columns: 1fr; gap: 0.35rem; } } .intel-archive-date { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.12em; color: rgba(77, 97, 72, 0.55); } .intel-archive-title { font-family: var(--font-display); font-size: 0.8rem; color: var(--text-primary); text-transform: none; letter-spacing: 0; } .intel-archive-tag { font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.16em; color: var(--accent); background: rgba(95, 75, 102, 0.1); padding: 0.2rem 0.5rem; white-space: nowrap; } /* =================================== INTEL SIGNUP — intel page =================================== */ .intel-signup-box { max-width: 560px; border: 1px solid var(--border); padding: 2.5rem; background: var(--bg-primary); position: relative; overflow: hidden; } .intel-signup-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent-red); } /* ─── Live feed CTA — tactical system trigger ──────────────────────── */ @keyframes feed-scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } @keyframes feed-pulse { 0%, 100% { border-color: rgba(255, 45, 45, 0.38); box-shadow: none; } 50% { border-color: rgba(255, 45, 45, 0.65); box-shadow: 0 0 14px rgba(255, 45, 45, 0.10); } } .btn-feed { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.72rem 1.6rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--accent-red); background: rgba(255, 45, 45, 0.04); border: 1px solid rgba(255, 45, 45, 0.38); cursor: pointer; position: relative; overflow: hidden; animation: feed-pulse 3.4s ease-in-out infinite; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .btn-feed::before { content: ''; position: absolute; top: 0; left: -55%; width: 38%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 45, 45, 0.09), transparent); pointer-events: none; } .btn-feed:hover { color: #ff2d2d; background: rgba(255, 45, 45, 0.08); border-color: rgba(255, 45, 45, 0.78); box-shadow: 0 0 22px rgba(255, 45, 45, 0.16), inset 0 0 10px rgba(255, 45, 45, 0.04); animation-play-state: paused; } .btn-feed:hover::before { animation: feed-scan 0.52s ease forwards; } /* =================================== METHODOLOGY STEPS — about page =================================== */ .methodology-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); margin-top: 3rem; counter-reset: method-counter; } @media (min-width: 640px) { .methodology-grid { grid-template-columns: repeat(5, 1fr); } } .methodology-step { background: var(--bg-primary); padding: 2rem; transition: background var(--transition-base); } .methodology-step:hover { background: var(--bg-surface); } .methodology-step-num { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 0.75rem; } .methodology-step-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; margin-bottom: 0.65rem; } .methodology-step-desc { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); line-height: 1.65; letter-spacing: 0.02em; text-transform: none; } /* =================================== ENTRY CURTAIN — sub-page transition =================================== */ #entry-curtain { position: fixed; inset: 0; z-index: 99000; pointer-events: none; display: flex; flex-direction: column; } #entry-curtain .curtain-panel { flex: 1; background: #080d08; transition: transform 0.78s cubic-bezier(0.76, 0, 0.24, 1); } #entry-curtain.open .curtain-panel:first-child { transform: translateY(-100%); transition-delay: 0.04s; } #entry-curtain.open .curtain-panel:last-child { transform: translateY(100%); transition-delay: 0.04s; } #entry-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.45em; color: rgba(77, 97, 72, 0.65); pointer-events: none; white-space: nowrap; transition: opacity 0.3s ease; } /* =================================== REVEAL — extra variants for sub-pages =================================== */ .reveal-left { opacity: 0; transform: translateX(-24px); transition: opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1), transform 0.68s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-right { opacity: 0; transform: translateX(24px); transition: opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1), transform 0.68s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity 0.68s cubic-bezier(0.22, 1, 0.36, 1), transform 0.68s cubic-bezier(0.22, 1, 0.36, 1); } .reveal-left.active, .reveal-right.active, .reveal-scale.active { opacity: 1; transform: none; } /* =================================== FIELD REPORTS PAGE =================================== */ .field-report-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); margin-top: 3rem; } @media (min-width: 640px) { .field-report-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .field-report-grid { grid-template-columns: repeat(3, 1fr); } } .field-report-card { background: var(--bg-primary); padding: 2rem 1.75rem; position: relative; transition: background var(--transition-base); overflow: hidden; } .field-report-card::after { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--border); transition: background var(--transition-base); } .field-report-card:hover { background: var(--bg-surface); } .field-report-card:hover::after { background: var(--accent); } .field-report-classification { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .field-report-op { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.28em; color: var(--text-muted); margin-bottom: 0.5rem; } .field-report-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 0.5rem; line-height: 1.35; } .field-report-location { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.18em; color: var(--text-muted); margin-bottom: 1rem; } .field-report-desc { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); line-height: 1.7; letter-spacing: 0.01em; text-transform: none; } .field-report-desc .redacted { background: var(--text-primary); color: var(--text-primary); user-select: none; padding: 0 0.15em; border-radius: 1px; } .field-report-footer { margin-top: 1.25rem; padding-top: 0.875rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .field-report-status { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.2em; } .field-report-status.closed { color: var(--text-muted); } .field-report-status.active { color: var(--accent); } .field-report-status.ongoing { color: #2a7a3a; } .field-report-date { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.14em; color: var(--text-muted); } .field-report-featured { grid-column: 1 / -1; background: var(--bg-surface); border: 1px solid var(--border); padding: 3rem; position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-bottom: 1px; } @media (max-width: 768px) { .field-report-featured { grid-template-columns: 1fr; gap: 2rem; } } .field-report-featured::before { content: 'FEATURED OPERATION'; position: absolute; top: 1.5rem; right: 1.5rem; font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.28em; color: var(--accent); } .field-report-featured .field-report-title { font-size: 1.5rem; line-height: 1.2; } /* Outcome tags */ .outcome-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; } .outcome-tag { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.18em; padding: 0.3rem 0.6rem; border: 1px solid var(--border); color: var(--text-muted); } /* Stats bar — field reports */ .ops-stats-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); margin-bottom: 4rem; } @media (min-width: 640px) { .ops-stats-bar { grid-template-columns: repeat(4, 1fr); } } .ops-stat { background: var(--bg-surface); padding: 2rem 1.5rem; text-align: center; } .ops-stat-num { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin-bottom: 0.5rem; } .ops-stat-label { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.22em; color: var(--text-muted); } /* Section divider */ .section-divider { display: flex; align-items: center; gap: 1.5rem; margin: 4rem 0 2rem; } .section-divider-line { flex: 1; height: 1px; background: var(--border); } .section-divider-label { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.28em; color: var(--text-muted); white-space: nowrap; } /* =================================== PAGE TRANSITION OVERLAY =================================== */ #pt-overlay { position: fixed; inset: 0; z-index: 999500; pointer-events: none; overflow: hidden; } .pt-strip { position: absolute; left: 0; width: 100%; background: #060c06; will-change: transform; } /* Bright scan-line accent — visible leading edge on each strip */ .pt-strip::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: rgba(197, 207, 202, 0.22); } .pt-strip::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: rgba(197, 207, 202, 0.22); } /* =================================== CONTACT PAGE =================================== */ /* Hero ─────────────────────────────── */ .cx-hero { position: relative; z-index: 4; display: flex; align-items: center; overflow: hidden; background: rgba(197, 207, 202, 0.6); } .cx-hero-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem); gap: 0; } @media (max-width: 900px) { .cx-hero-inner { grid-template-columns: 1fr; padding-top: 7rem; padding-bottom: 3rem; min-height: auto; } } .cx-hero-text { position: relative; z-index: 2; padding: 6rem 0 4rem; } .cx-hero-label { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; } .cx-ref { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.22em; color: var(--text-muted); } .cx-hero-title { font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 5.5rem); font-weight: 700; line-height: 1.0; letter-spacing: 0.03em; color: var(--text-primary); margin-bottom: 2rem; } .cx-hero-sub { font-size: clamp(0.82rem, 1.8vw, 0.95rem); color: var(--text-muted); max-width: 440px; line-height: 1.75; margin-bottom: 2rem; text-transform: none; } .cx-hero-meta { font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.2em; color: var(--text-muted); border-left: 2px solid var(--accent); padding-left: 0.875rem; margin-bottom: 2.5rem; } .cx-hero-scroll { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.22em; color: var(--text-muted); } /* Direct Channels block ─────────────────── */ .cx-channels { margin: 2.5rem 0; padding: 1.5rem; border: 1px solid rgba(17, 26, 17, 0.18); background: rgba(17, 26, 17, 0.03); } .cx-channels-label { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.25em; color: rgba(17, 26, 17, 0.6); margin-bottom: 1.25rem; text-transform: uppercase; } .cx-channels-links { display: flex; flex-direction: column; gap: 1rem; } .cx-channel-link { display: inline-flex; align-items: center; gap: 0.875rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: rgba(17, 26, 17, 0.88); text-decoration: none; text-transform: uppercase; transition: color 0.2s ease; } .cx-channel-link:hover { color: var(--text-primary); } .cx-channel-platform { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid rgba(17, 26, 17, 0.35); font-size: 0.72rem; font-style: normal; flex-shrink: 0; transition: border-color 0.2s ease, background 0.2s ease; } .cx-channel-link:hover .cx-channel-platform { border-color: rgba(17, 26, 17, 0.65); background: rgba(17, 26, 17, 0.05); } .cx-channels-micro { margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.12em; color: rgba(17, 26, 17, 0.5); text-transform: uppercase; } .cx-hero-scroll svg { animation: cx-bounce 1.8s ease-in-out infinite; } @keyframes cx-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } /* Globe wrap ────────────────────────── */ .cx-globe-wrap { position: relative; width: 100%; height: clamp(380px, 50vw, 580px); display: flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .cx-globe-wrap { height: 55vw; min-height: 280px; } } #globe-canvas { display: block; width: 100% !important; height: 100% !important; } /* Form section ──────────────────────── */ .cx-form-section { position: relative; z-index: 4; background: rgba(197, 207, 202, 0.5); padding: clamp(4rem, 8vw, 7rem) 0; } .cx-layout { display: grid; grid-template-columns: 1fr 320px; gap: 3rem; align-items: start; } @media (max-width: 1100px) { .cx-layout { grid-template-columns: 1fr; } } /* Form panel ─────────────────────────── */ .cx-form-panel { position: relative; background: rgba(17, 26, 17, 0.04); border: 1px solid rgba(17, 26, 17, 0.22); padding: clamp(2rem, 4vw, 3.5rem); } .cx-form-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); } .cx-form-classification { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.28em; color: var(--accent); padding-bottom: 1.25rem; border-bottom: 1px solid rgba(17, 26, 17, 0.18); margin-bottom: 2rem; } /* Groom Lake emblem — authority marker above the Contact form header. Visible at every width; size scales gently down on phones so it doesn't dominate the form's first screen. */ .cx-form-emblem { display: flex; justify-content: center; margin: 0.25rem 0 1.25rem; } .cx-form-emblem img { display: block; width: 44px; height: 44px; color: #111a11; opacity: 0.92; filter: none; pointer-events: none; user-select: none; animation: cx-form-emblem-in 0.9s ease-out 0.1s both; } @media (min-width: 768px) { .cx-form-emblem { margin: 0.5rem 0 1.5rem; } .cx-form-emblem img { width: 56px; height: 56px; } } @keyframes cx-form-emblem-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 0.92; transform: translateY(0); } } .cx-form-eyebrow { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.28em; color: rgba(17, 26, 17, 0.7); margin-bottom: 0.6rem; } .cx-form-heading { font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 600; color: var(--text-primary); letter-spacing: 0.02em; margin-bottom: 2.5rem; } /* Form fields ──────────────────────── */ .cx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.75rem; } @media (max-width: 600px) { .cx-form-row { grid-template-columns: 1fr; } } .cx-field { margin-bottom: 1.75rem; } .cx-field:last-child { margin-bottom: 0; } .cx-label { display: block; font-family: var(--font-mono); /* Bumped from 0.5rem / weight default to 0.66rem / 600 + tighter letter-spacing — labels were unreadably small/thin. */ font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; color: rgba(17, 26, 17, 0.95); margin-bottom: 0.6rem; text-transform: uppercase; } .cx-input { width: 100%; background: transparent; border: none; /* Border-bottom darkened from 0.35 → 0.55 alpha so the field line is clearly visible without focus. */ border-bottom: 1px solid rgba(17, 26, 17, 0.55); padding: 0.85rem 0; font-family: var(--font-mono); /* Input text bumped from 0.78rem to 0.96rem and weight 500 so the value the user types reads cleanly at any contrast. */ font-size: 0.96rem; font-weight: 500; color: var(--text-primary); letter-spacing: 0.02em; transition: border-color 0.25s ease; text-transform: none; appearance: none; -webkit-appearance: none; } .cx-input:focus { outline: none; border-bottom-color: var(--accent); } .cx-input::placeholder { /* Bumped from 0.45 → 0.6 alpha so placeholders are easy to scan before the user starts typing. */ color: rgba(17, 26, 17, 0.6); font-weight: 500; } /* Invalid state — flagged when user tries to Schedule a Call with missing required fields. Red-accent bottom border + subtle inner glow. */ .cx-input--invalid { border-bottom-color: var(--accent-red) !important; box-shadow: 0 2px 0 -1px rgba(255, 45, 45, 0.20); animation: cx-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97); } .cx-input--invalid.cx-textarea { border-color: var(--accent-red) !important; box-shadow: inset 0 0 0 1px rgba(255, 45, 45, 0.20); } @keyframes cx-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-3px); } 40%, 60% { transform: translateX(3px); } } /* Schedule warning — inline message above or beside the Schedule a Call button when fields are incomplete. On-brand monospaced label with a subtle red accent bar, no browser default ugliness. */ .cx-schedule-warning { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-red); padding: 0.6rem 0.75rem; margin-top: 0.75rem; border-left: 2px solid var(--accent-red); background: rgba(255, 45, 45, 0.06); line-height: 1.5; display: none; } .cx-schedule-warning.visible { display: block; animation: cx-warn-fade 0.26s ease both; } @keyframes cx-warn-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .cx-textarea { resize: vertical; min-height: 130px; border: 1px solid rgba(17, 26, 17, 0.32); padding: 0.875rem; border-radius: 0; } .cx-textarea:focus { border-color: var(--accent); } /* Select ──────────────────────────── */ .cx-select { background: rgba(197, 207, 202, 0.04); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(200,212,196,0.4)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1rem; padding-right: 2rem; cursor: pointer; border: none; border-bottom: 1px solid rgba(197, 207, 202, 0.18); } .cx-select option { background: #0d1a0d; color: #c8d4c4; } /* Submit row ────────────────────────── */ .cx-submit-row { display: flex; align-items: center; gap: 2rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(17, 26, 17, 0.12); flex-wrap: wrap; } .cx-submit-note { font-family: var(--font-mono); /* 0.5rem / 0.55 alpha was a whisper. 0.62rem / 500 weight / 0.78 alpha lifts it into legible territory while still reading as a subtitle (not a heading). */ font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; color: rgba(17, 26, 17, 0.78); } /* Calendly row ─────────────────────── */ .cx-calendly-row { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.8rem; } .cx-calendly-divider { display: flex; align-items: center; gap: 0.8rem; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.18em; color: rgba(17, 26, 17, 0.35); } .cx-calendly-btn { align-self: flex-start; } /* Sidebar ──────────────────────────── */ .cx-sidebar { position: sticky; top: 7rem; display: flex; flex-direction: column; gap: 1px; background: rgba(17, 26, 17, 0.1); } .cx-sidebar-block { background: rgba(197, 207, 202, 0.55); padding: 1.5rem 1.25rem; } .cx-sidebar-block-label { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.28em; color: rgba(17, 26, 17, 0.62); margin-bottom: 0.5rem; } .cx-sidebar-block-value { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-primary); } .cx-sidebar-block-value.accent { color: var(--accent); } .cx-sidebar-block-value.green { color: #2a7a3a; } .cx-sidebar-divider { padding: 1rem 1.25rem 0.5rem; background: rgba(197, 207, 202, 0.55); } .cx-sidebar-divider-label { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.28em; color: rgba(17, 26, 17, 0.55); padding-bottom: 0.5rem; border-bottom: 1px solid rgba(17, 26, 17, 0.15); } /* Sidebar social links ───────────────── */ .cx-sidebar-socials { display: flex; flex-direction: column; gap: 0.875rem; } .cx-sidebar-social { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text-primary); transition: color 0.18s ease; } .cx-sidebar-social:hover { color: var(--accent); } .cx-sidebar-social-platform { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid rgba(17, 26, 17, 0.28); font-size: 0.68rem; flex-shrink: 0; transition: border-color 0.18s ease, background 0.18s ease; } .cx-sidebar-social:hover .cx-sidebar-social-platform { border-color: rgba(17, 26, 17, 0.55); background: rgba(17, 26, 17, 0.04); } .cx-sidebar-social-handle { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; } /* Fix tiny label fonts in sidebar and channel blocks */ .cx-sidebar-block-label, .cx-sidebar-divider-label { font-size: 0.58rem; letter-spacing: 0.20em; } .cx-channels-label { font-size: 0.62rem; letter-spacing: 0.18em; } .cx-channels-micro { font-size: 0.62rem; } /* Form success state ─────────────────── */ #cx-success { display: none; text-align: center; padding: 4rem 2rem; } #cx-success.visible { display: block; } .cx-success-icon { font-family: var(--font-mono); font-size: 2rem; color: #4aaa5a; margin-bottom: 1rem; } .cx-success-title { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-primary); margin-bottom: 0.75rem; } .cx-success-text { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em; color: rgba(17, 26, 17, 0.55); text-transform: none; } /* =================================== UPDATED FOOTER NAV — more links =================================== */ .footer-links-extended { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center; } /* =================================== CAPABILITIES PAGE — Three-Pillar Interface =================================== */ /* Network canvas background */ .cap-network-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* Sticky pillar navigation */ .cap-pillar-nav { position: sticky; top: 3.75rem; z-index: 20; background: rgba(197, 207, 202, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(17, 26, 17, 0.12); } .cap-pillar-nav-inner { display: flex; align-items: stretch; max-width: 1380px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem); } .cap-pillar-tab { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.22em; color: rgba(17, 26, 17, 0.38); padding: 0.85rem 2rem 0.85rem 0; margin-right: 2rem; border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; transition: color 0.22s ease, border-color 0.22s ease; white-space: nowrap; } .cap-pillar-tab:hover { color: rgba(17, 26, 17, 0.65); } .cap-pillar-tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* Pillar sections */ .cap-pillar { position: relative; z-index: 4; padding: clamp(5rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 6rem); overflow: hidden; } .cap-pillar-alt { background: rgba(17, 26, 17, 0.028); } /* ── Mesh canvas: section background node-network ─────────────────────── */ .section-mesh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } #intel-signal, #ab-services, #cap-closing { overflow: hidden; } /* Give ab-services a frosted backdrop so the mesh canvas has contrast */ #ab-services { background: rgba(181, 196, 184, 0.52); } /* Ghost background number */ .cap-pillar-bg-num { position: absolute; top: 1rem; right: clamp(-1rem, -2vw, -3rem); font-family: var(--font-display); font-size: clamp(10rem, 22vw, 22rem); font-weight: 700; color: rgba(17, 26, 17, 0.042); letter-spacing: -0.05em; line-height: 1; pointer-events: none; user-select: none; } /* Pillar header — 2-col on desktop */ .cap-pillar-header { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 5rem; align-items: start; margin-bottom: 3rem; } @media (max-width: 900px) { .cap-pillar-header { grid-template-columns: 1fr; gap: 1.5rem; } } .cap-pillar-label { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.3em; color: var(--accent); margin-bottom: 1rem; } .cap-pillar-title { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3.5rem); font-weight: 700; color: var(--text-primary); letter-spacing: 0.02em; line-height: 1.0; } .cap-pillar-right { padding-top: 0.25rem; display: flex; flex-direction: column; gap: 1.5rem; } .cap-pillar-summary { font-size: clamp(0.85rem, 1.6vw, 0.95rem); color: var(--text-muted); line-height: 1.78; text-transform: none; max-width: 480px; } .cap-pillar-count { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.25em; color: rgba(17, 26, 17, 0.3); border-left: 2px solid rgba(17, 26, 17, 0.15); padding-left: 0.875rem; } /* Accordion */ .cap-accordion { border-top: 1px solid rgba(17, 26, 17, 0.12); } .cap-acc-item { border-bottom: 1px solid rgba(17, 26, 17, 0.09); transition: background 0.18s ease; } .cap-acc-item:hover { background: rgba(17, 26, 17, 0.018); } .cap-acc-item.featured { border-left: 2px solid rgba(95, 75, 102, 0.35); margin-left: -2px; } .cap-acc-trigger { display: grid; grid-template-columns: 52px 1fr 24px; align-items: center; gap: 1rem; padding: 1.2rem 0; cursor: pointer; width: 100%; background: none; border: none; text-align: left; } .cap-acc-num { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.2em; color: rgba(17, 26, 17, 0.32); transition: color 0.2s ease; } .cap-acc-item.open .cap-acc-num, .cap-acc-item.featured .cap-acc-num { color: var(--accent); } .cap-acc-title { font-family: var(--font-display); font-size: clamp(0.9rem, 1.7vw, 1.05rem); font-weight: 600; color: var(--text-primary); letter-spacing: 0.02em; } .cap-acc-chevron { color: rgba(17, 26, 17, 0.28); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease; flex-shrink: 0; } .cap-acc-item.open .cap-acc-chevron { transform: rotate(45deg); color: var(--accent); } .cap-acc-body { overflow: hidden; max-height: 0; transition: max-height 0.40s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.30s ease; opacity: 0; } .cap-acc-item.open .cap-acc-body { max-height: 260px; opacity: 1; } .cap-acc-desc { font-size: clamp(0.82rem, 1.5vw, 0.9rem); color: var(--text-muted); line-height: 1.78; text-transform: none; padding: 0.25rem 0 1.75rem 52px; max-width: 640px; } /* =================================== ABOUT PAGE — Cinematic Build =================================== */ /* ── Hero ────────────────────────── */ .ab-hero { position: relative; min-height: 100vh; display: flex; align-items: flex-start; overflow: hidden; z-index: 4; } .ab-hero-ring { position: absolute; border-radius: 50%; pointer-events: none; } .ab-hero-ring-1 { width: 65vw; height: 65vw; top: -25vw; right: -18vw; border: 1px solid rgba(17, 26, 17, 0.07); animation: ab-spin 55s linear infinite; } .ab-hero-ring-2 { width: 50vw; height: 50vw; top: -12vw; right: -8vw; border: 1px dashed rgba(17, 26, 17, 0.05); animation: ab-spin 80s linear infinite reverse; } .ab-hero-ring-3 { width: 36vw; height: 36vw; top: -2vw; right: 2vw; border: 1px solid rgba(17, 26, 17, 0.04); animation: ab-spin 35s linear infinite; } .ab-hero-ring-4 { width: 22vw; height: 22vw; top: 8vw; right: 12vw; border: 1px dashed rgba(17, 26, 17, 0.06); animation: ab-spin 50s linear infinite reverse; } @keyframes ab-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ab-hero-content { position: relative; z-index: 2; padding: 9rem 0 5rem; max-width: 760px; } .ab-hero-eyebrow { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; } .ab-hero-eyebrow-ref { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.25em; color: rgba(17, 26, 17, 0.35); } .ab-hero-title { font-family: var(--font-display); font-size: clamp(2.8rem, 7.5vw, 7rem); font-weight: 700; line-height: 0.95; /* Consistent with site's uppercase tracking — was -0.035em (too tight) */ letter-spacing: 0.02em; color: var(--text-primary); /* Generous gap below the title so the scroll cue sits with intentional breathing room — replaces the space previously occupied by the (now removed) agency pedigree line. */ margin-bottom: 2.25rem; } .ab-hero-sub { font-size: clamp(0.9rem, 1.8vw, 1.05rem); color: var(--text-muted); max-width: 500px; line-height: 1.75; margin-bottom: 1.5rem; text-transform: none; } .ab-hero-scroll { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.2em; color: rgba(17, 26, 17, 0.45); } .ab-hero-scroll svg { animation: cx-bounce 2s ease-in-out infinite; } /* ── Credentials grid ───────────────────────────────────────────────── */ .ab-credentials { padding: 5rem 0; } @keyframes floatSlow { 0% { transform: translateY(0px); } 50% { transform: translateY(-4px); } 100% { transform: translateY(0px); } } .container-certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 75px; align-items: center; justify-items: center; margin-top: 40px; } .cert-item { width: 125px; height: 125px; display: flex; align-items: center; justify-content: center; animation: floatSlow 6s ease-in-out infinite; } .cert-item:nth-child(2) { animation-delay: 0.8s; } .cert-item:nth-child(3) { animation-delay: 1.6s; } .cert-item:nth-child(4) { animation-delay: 2.4s; } .cert-item:nth-child(5) { animation-delay: 1.2s; } .cert-item:nth-child(6) { animation-delay: 2s; } .cert-item:nth-child(7) { animation-delay: 0.5s; } .cert-item:nth-child(8) { animation-delay: 3s; } .cert-item img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(100%) brightness(0.6); opacity: 0.9; transition: opacity 0.3s ease, transform 0.3s ease; } .cert-item img:hover { opacity: 1; transform: translateY(-6px); } @media (max-width: 600px) { .container-certs { grid-template-columns: repeat(2, 1fr); gap: 40px; } } /* ── Ab-hero two-column layout ────────────────────────────────────────── The original .ab-hero-content rule (max-width:760px, padding:9rem 0 5rem) is overridden by .ab-hero-layout .ab-hero-content below. ─────────────────────────────────────────────────────────────────────── */ .ab-hero-layout { display: flex; align-items: flex-start; justify-content: flex-start; gap: clamp(2rem, 4.5vw, 5rem); width: 100%; } /* Override the original single-column max-width when inside the layout */ .ab-hero-layout .ab-hero-content { flex: 0 0 auto; max-width: 480px; padding: 4.5rem 0 2rem; } .ab-hero-model-wrap { flex: 1 1 auto; min-width: 0; height: clamp(480px, 70vh, 780px); margin-top: 2rem; position: relative; opacity: 0; transform: translateY(32px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .ab-hero-model-wrap.ab-hand-visible { opacity: 1; transform: translateY(0); } /* Canvases fill the wrap panel — they stay within the hero right column */ #ab-hand-canvas, #ab-hand-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; pointer-events: none; } #ab-hand-overlay { z-index: 1; } @media (max-width: 1024px) { .ab-hero-model-wrap { height: 400px; } } @media (max-width: 800px) { .ab-hero-layout { flex-direction: column; gap: 2rem; } .ab-hero-layout .ab-hero-content { max-width: 100%; padding: 4.5rem 0 1.5rem; } .ab-hero-model-wrap { flex: 0 0 auto; width: 280px; height: 340px; margin-top: 0; align-self: center; } } /* ── Orbital scroll section ──────── */ .ab-orbital-wrap { position: relative; height: 360vh; z-index: 4; } .ab-orbital-sticky { position: sticky; top: 0; /* 100vh first (universal), then 100svh / 100dvh for iOS Safari so the sticky container always gets a real height on iPhone Safari — some mobile Safari versions briefly return 0 for 100vh during layout, which collapsed the canvas and left the orbital invisible. */ height: 100vh; height: 100svh; height: 100dvh; min-height: 480px; /* hard floor — canvas never collapses to 0 */ overflow: hidden; background: var(--bg-primary); border-top: 1px solid rgba(17, 26, 17, 0.1); } /* Mobile active-layer headline — REMOVED. Earlier turn added a boxed top headline (.ab-orbital-active-label) to make the active layer visible on mobile. The user reports it clashes with the in-canvas ring labels (which render their own "INTELLIGENCE // 01 — CORE" etc.) and duplicates them. The element is fully suppressed at every viewport — including the desktop default — so no boxed label paints. The in-canvas labels remain the single source of layer naming. The DOM element stays in markup so older bookmarks/anchors don't shift; CSS hides it everywhere. */ .ab-orbital-active-label { display: none !important; } /* Hide the bottom phase-indicator strip's Service Model caption on mobile — the new top headline replaces it, and showing both creates the visual double-label the user reported. The progress bar itself stays so scroll progress is still visible. */ @media (max-width: 1100px) { .ab-phase-indicator-label { display: none; } /* Hide Layer 00 / Service Model panel entirely on mobile. User explicitly requested mobile show ONLY 01/02/03 — no phase 0 intro, no Service Model copy. The accordion stack panel (01/02/03) is forced visible from the start so the orbital sticky has card content immediately, regardless of scroll progress. */ #ab-panel-0 { display: none !important; } #ab-panel-stack { opacity: 1 !important; transform: none !important; pointer-events: auto !important; visibility: visible !important; } /* Likewise — kill the panel-0 mobile scroll prompt so the canvas area reads cleanly. */ .ab-orbital-mscroll { display: none !important; } } /* Mobile-only SCROLL cue — lives inside the sticky container, positioned just beneath the ring graphic so it reads as belonging to the orbital (not to the content card). Fades out once the user enters phase ≥ 1. */ .ab-orbital-mscroll { display: none; } @media (max-width: 768px) { .ab-orbital-mscroll { position: absolute; left: 50%; top: calc(27% + min(31vw, 17vh) + 10px); /* cy (27%H) + outer ring r ≈ 0.17H + gap */ transform: translateX(-50%); z-index: 7; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; pointer-events: none; color: rgba(17, 26, 17, 0.78); transition: opacity 0.4s ease; animation: ab-orbital-mscroll-breathe 2.4s ease-in-out infinite; } .ab-orbital-mscroll-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.28em; font-weight: 600; color: rgba(17, 26, 17, 0.85); text-transform: uppercase; } .ab-orbital-mscroll svg { color: var(--accent); opacity: 0.9; } /* When the user has entered phase 1+, hide the SCROLL cue via manual class (set from the click handler) or data-active-layer attribute. */ .ab-orbital-wrap.ab-orbital-manual-active .ab-orbital-mscroll, .ab-orbital-wrap[data-phase="1"] .ab-orbital-mscroll, .ab-orbital-wrap[data-phase="2"] .ab-orbital-mscroll, .ab-orbital-wrap[data-phase="3"] .ab-orbital-mscroll { opacity: 0; } @keyframes ab-orbital-mscroll-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ab-orbital-mscroll { animation: none; } } } #orbital-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* Base layer — labels, phase indicator, and content panels all sit above the canvas so the rings never paint over text. */ z-index: 1; } /* Phase nav (right edge) */ .ab-orbital-nav { position: absolute; /* Further right (smaller offset) — puts the nav tightly in the right gutter so it no longer overlaps the content panel's text column. */ right: clamp(0.75rem, 2vw, 1.75rem); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1.5rem; z-index: 10; } .ab-orbital-nav-item { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; padding: 0.25rem 0; border: none; background: none; transition: opacity 0.18s ease; } .ab-orbital-nav-item:hover { opacity: 0.75; } .ab-orbital-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(17, 26, 17, 0.18); transition: all 0.35s ease; flex-shrink: 0; } .ab-orbital-nav-dot.active { background: var(--accent); box-shadow: 0 0 8px rgba(95, 75, 102, 0.55); transform: scale(1.5); } .ab-orbital-nav-dot.past { background: rgba(17, 26, 17, 0.45); } .ab-orbital-nav-label { font-family: var(--font-mono); font-size: 0.42rem; /* Tighter letter-spacing reduces the label's horizontal footprint so the right-side nav clears the content panel at every desktop width. */ letter-spacing: 0.15em; color: rgba(17, 26, 17, 0.25); transition: color 0.35s ease; } .ab-orbital-nav-label.active { color: rgba(17, 26, 17, 0.65); } @media (max-width: 1100px) { /* Labels disappear on narrow desktops / tablets where the content panel would otherwise clash with them. Dots alone still navigate. */ .ab-orbital-nav-label { display: none; } .ab-orbital-nav { right: 1rem; } } /* Content panels */ .ab-orbital-panels { position: absolute; /* Shift the card slightly left and widen it so headlines + paragraph copy don't wrap so tightly. Target line length ~60–75 chars. */ left: 55%; top: 50%; transform: translateY(-50%); width: clamp(340px, 38vw, 520px); z-index: 8; will-change: transform; /* More horizontal padding — text no longer touches borders. */ padding: 1.9rem 2.6rem 2.4rem 2.6rem; box-sizing: border-box; /* The card height is driven by whichever inner panel is visible. Using a CSS grid with both panels in the SAME cell (grid-area: 1/1) lets the container size to the TALLEST panel and guarantees the border wraps every child — including the Security card's // POSTURE row, which previously escaped because every .ab-orbital-panel was position: absolute and contributed nothing to parent height. */ display: grid; grid-template-columns: 1fr; grid-template-rows: auto; /* Panel frame transitions in when section activates */ background: transparent; border: 1px solid transparent; transition: background 0.60s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.60s cubic-bezier(0.4, 0, 0.2, 1); } /* Active state: dossier panel frame appears */ .ab-orbital-panels--active { background: rgba(200, 212, 196, 0.60); border-color: rgba(143, 168, 138, 0.42); } .ab-orbital-panels::before { content: ''; position: absolute; left: 0; top: 4%; bottom: 4%; width: 1.5px; background: linear-gradient(to bottom, transparent, rgba(86,102,122,0.55) 20%, rgba(86,102,122,0.55) 80%, transparent); pointer-events: none; transition: opacity 0.45s ease; } /* Vertical line fades as border takes over */ .ab-orbital-panels--active::before { opacity: 0; } @media (max-width: 768px) { /* Mobile orbital scroll budget — 220vh per spec. The container spans 220vh (just over 2 viewports) so the sticky child has ~120vh of scroll travel through its 5 phases (0,1,2,3 + return). User reported the previous 300vh produced a "skip" on Telegram — too long a budget meant the sticky released before the user finished scrolling, leaving a blank gap. 220vh keeps the section short enough that even Telegram's compositing stays in sync. */ .ab-orbital-wrap { height: 220vh; margin-top: 0; margin-bottom: 0; } /* Sticky container — dynamic viewport height is critical: - 100vh on iOS Safari includes the offscreen URL bar (collapses visible content) → buggy. - 100svh = small viewport (URL bar showing). - 100dvh = dynamic, the actual visible viewport right now. Declared in fallback-then-progressive order so a browser that doesn't recognise newer units lands on 100vh; one that does overrides upward and ends at 100dvh. */ .ab-orbital-sticky { height: 100vh; height: 100svh; height: 100dvh; min-height: 100vh; } /* Horizontal padding on the canvas wrap so the rings never touch the viewport edges — ring labels have a safe gutter. */ #orbital-canvas { padding: 0; } .ab-orbital-panels { /* Full-width card on mobile with a 16-20px safe inset each side so text breathes from the viewport edge. Never overflows. The orbital sits HIGH in the viewport (cy ≈ H*0.20) and the card anchors to the bottom — rings' upper arc + the three callouts (Intelligence / Security / Incident Response) sit ABOVE the card's top edge. */ right: 1rem; left: 1rem; width: auto; /* Cap card height so it can never grow past 56% of the viewport. Anything beyond that is internally scrollable. This is what guarantees the in-canvas callouts above the card stay readable — without this cap, the panel-stack content (3 accordion items + datalists) would push the card top into the ring area. */ min-height: 0; max-height: 56vh; overflow-y: auto; -webkit-overflow-scrolling: touch; top: auto; bottom: 1.25rem; transform: none !important; padding: 1.05rem 1.15rem 1.35rem 1.25rem; /* Slightly translucent so users still perceive the rings continuing behind the card — card stays the primary focus but the orbital doesn't feel "hidden". */ background: rgba(197, 207, 202, 0.93) !important; border-color: rgba(143, 168, 138, 0.55) !important; border-radius: 3px; box-shadow: 0 8px 32px rgba(17, 26, 17, 0.16); /* touch-action: pan-y lets vertical page scroll pass through the card. The card has max-height + overflow-y:auto above; if its content exceeds 56vh the user can scroll inside the card. Outer page scroll still drives the orbital phase timeline. */ touch-action: pan-y; } .ab-orbital-panels--active { background: rgb(197, 207, 202) !important; } /* Panel title — compact on mobile to leave room for description + datalist */ .ab-panel-title { font-size: clamp(1.2rem, 5vw, 1.75rem); margin-bottom: 0.5rem; line-height: 1.15; } .ab-panel-desc { font-size: 0.78rem; line-height: 1.55; margin-bottom: 0.8rem; } /* Datalist rows: tighter gaps so Deployment / Activation / Track Record all fit inside the card without overflow. */ #ab-panel-stack .ab-panel-datalist { gap: 0.4rem !important; } .ab-datum-key, .ab-datum-val { font-size: 0.62rem !important; letter-spacing: 0.08em !important; line-height: 1.45 !important; } /* Hide the card's built-in scroll prompt on mobile — the cue now lives next to the orbital graphic via #ab-orbital-mscroll so it feels attached to the animation, not the card. */ .ab-scroll-prompt { display: none !important; } /* Stack tag (Intelligence / Security / Response label) — readable on phones */ .ab-stack-tag { font-size: 0.58rem; letter-spacing: 0.18em; } .ab-stack-num { font-size: 0.58rem; letter-spacing: 0.20em; } /* Larger tap target for the layer card headers with generous vertical spacing between items — easier touch targeting, less mis-tap. */ .ab-stack-header { padding: 0.95rem 0; min-height: 48px; /* Ensure taps on 01/02/03 register as clicks, not as panel-scroll gestures (panel has overflow-y: auto for long content). */ touch-action: manipulation; pointer-events: auto !important; position: relative; z-index: 2; } } @media (max-width: 480px) { .ab-orbital-wrap { height: 230vh; } .ab-orbital-panels { right: 1rem; left: 1rem; bottom: 3.25rem; min-height: clamp(200px, 48vh, 320px); padding: 1.2rem 1.25rem 1.2rem 1.4rem; } .ab-panel-title { font-size: clamp(1.2rem, 5.8vw, 1.7rem); line-height: 1.15; } .ab-panel-desc { font-size: 0.78rem; line-height: 1.68; } } /* Both panels occupy the same grid cell. Grid sizes to the TALLEST panel so the card border always wraps every child — Intelligence, Security, and Response all sit inside the same stable frame. Active panel fades in; others fade out but remain laid out so the card never jumps size. */ .ab-orbital-panel { grid-area: 1 / 1; min-width: 0; transition: opacity 0.52s ease, transform 0.52s ease; } /* Initial hidden state — opacity only. Do NOT use visibility: hidden here: the stack panel ships with .hidden in the HTML and the scroll handler only toggles inline opacity / transform / pointer-events. Inline styles override class opacity (making the panel appear), but inline styles do NOT override class `visibility: hidden`, so adding it here erased every card's text from phase 1 onward. Layout contribution for the grid-area: 1/1 stacking is preserved regardless of opacity — visibility is not needed. */ .ab-orbital-panel.hidden { opacity: 0; transform: translateY(18px); pointer-events: none; } /* Click-dismissed state: applied to panel 0 when user clicks 01/02/03. Kept out of pointer-events; NOT display:none so the stack panel still shares layout with a known sibling. */ .ab-orbital-panel.dismissed { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* Ensure the accordion stack panel paints above panel 0 in all cases, regardless of DOM order quirks. */ #ab-panel-stack { z-index: 2; } #ab-panel-0 { z-index: 1; } /* MANUAL SELECTION MODE — when the user has explicitly clicked a layer, panel 0 is fully suppressed at the parent level. This takes precedence over any scroll-driven class state that might otherwise re-show it. Uses display:none so the element doesn't render, doesn't paint, doesn't occupy layout space. No transition on exit either — instant suppression. */ .ab-orbital-manual-active #ab-panel-0 { display: none !important; } /* Also hide the bottom phase indicator label when a specific layer is manually selected, since it still shows "LAYER 00 — SERVICE MODEL" text from the initial HTML until the scroll handler updates it. The click handler updates its text directly, but belt-and-braces — if anything re-renders the Layer 00 string we suppress it visually. */ .ab-orbital-manual-active[data-active-layer="1"] .ab-phase-indicator-label, .ab-orbital-manual-active[data-active-layer="2"] .ab-phase-indicator-label, .ab-orbital-manual-active[data-active-layer="3"] .ab-phase-indicator-label { /* No override needed — label text is set by JS. Kept as a hook for future state-specific styling if needed. */ } .ab-orbital-panel.past { opacity: 0; transform: translateY(-18px); pointer-events: none; } .ab-orbital-panel.visible { opacity: 1; transform: translateY(0); } .ab-panel-phase { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.26em; color: var(--accent); margin-bottom: 1.5rem; } .ab-panel-title { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 700; line-height: 1.0; letter-spacing: 0.02em; color: var(--text-primary); margin-bottom: 1.75rem; } .ab-panel-desc { font-size: clamp(0.92rem, 1.8vw, 1.1rem); color: var(--text-muted); line-height: 1.85; text-transform: none; max-width: 460px; margin-bottom: 2.25rem; } /* Datalist (panel 0) */ .ab-panel-datalist { display: flex; flex-direction: column; gap: 0.875rem; border-left: 2px solid rgba(17, 26, 17, 0.12); padding-left: 1rem; } .ab-panel-datum { display: flex; flex-direction: column; gap: 0.18rem; } .ab-datum-key { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.22em; color: rgba(17, 26, 17, 0.42); } .ab-datum-val { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--text-primary); } /* Panel 0 scroll prompt */ .ab-scroll-prompt { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 2.5rem 0 3rem; } .ab-scroll-prompt-label { font-family: var(--font-mono); /* Larger + darker + heavier so users immediately clock that this section is scroll-driven. No more faded 0.45α grey. */ font-size: 0.72rem; letter-spacing: 0.26em; font-weight: 600; color: rgba(17, 26, 17, 0.82); text-transform: uppercase; animation: ab-scroll-prompt-breathe 3.2s ease-in-out infinite; } .ab-scroll-arrow { color: var(--accent); opacity: 0.95; animation: ab-arrow-float 1.8s ease-in-out infinite; } @keyframes ab-scroll-prompt-breathe { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } } @keyframes ab-arrow-float { 0% { transform: translateY(0); opacity: 0.85; } 55% { transform: translateY(7px); opacity: 0.45; } 100% { transform: translateY(0); opacity: 0.85; } } /* ── Stack accordion (panels 1–3 unified) ──────────────── */ .ab-stack-item { border-top: 1px solid rgba(143, 168, 138, 0.40); /* Subtle hover transitions — controlled, not flashy */ transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, background-color 240ms ease, box-shadow 240ms ease; } .ab-stack-item:last-child { border-bottom: 1px solid rgba(143, 168, 138, 0.40); } /* ── Refined hover state on the active stack card (Security in Practice etc.) Controlled tactical response: subtle lift, stronger border, tiny shadow, slightly darker tone. No glow, no scale > 1, no pulse. */ @media (hover: hover) { .ab-stack-item--active:hover { transform: translateY(-3px); border-top-color: rgba(143, 168, 138, 0.80); border-bottom-color: rgba(143, 168, 138, 0.80); background-color: rgba(17, 26, 17, 0.03); box-shadow: 0 4px 18px rgba(17, 26, 17, 0.08); } /* Slight text-contrast bump on hover — subtle, not a size change */ .ab-stack-item--active:hover .ab-panel-desc { color: rgba(17, 26, 17, 0.88); transition: color 240ms ease; } .ab-stack-item--active:hover .ab-panel-title { color: rgba(10, 18, 10, 1); transition: color 240ms ease; } /* Stack header + body cursor feedback */ .ab-stack-item--active { cursor: default; } .ab-stack-header { cursor: pointer; } } /* Orbital ring sync — when hovering the active card, slightly brighten the matching ring via a CSS custom property the canvas-draw JS reads. The canvas colour picks up `--orbital-ring-accent` if present. */ .ab-orbital-wrap { --orbital-ring-accent: 0; } .ab-orbital-wrap:has(.ab-stack-item--active:hover) { --orbital-ring-accent: 1; } .ab-stack-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0; cursor: pointer; user-select: none; -webkit-tap-highlight-color: rgba(95, 75, 102, 0.10); transition: background 0.18s ease; /* Always interactive, even when the parent panel is in its pre-reveal pointer-events: none state — otherwise the tap target is dead. */ pointer-events: auto; } .ab-stack-header:hover .ab-stack-num, .ab-stack-header:hover .ab-stack-tag { color: var(--text-primary); } .ab-stack-header:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } .ab-stack-num { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.25em; color: var(--text-muted); transition: color 0.35s; flex-shrink: 0; } .ab-stack-item--active .ab-stack-num { color: var(--accent); } .ab-stack-rule { flex: 1; height: 1px; background: var(--border); transform: scaleX(0); transform-origin: left; transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1); } .ab-stack-item--active .ab-stack-rule { transform: scaleX(1); } .ab-stack-tag { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.22em; color: var(--text-muted); transition: color 0.35s; flex-shrink: 0; } .ab-stack-item--active .ab-stack-tag { color: var(--text-primary); } .ab-stack-body { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.58s cubic-bezier(0.4, 0, 0.2, 1); } .ab-stack-item--active .ab-stack-body { grid-template-rows: 1fr; } .ab-stack-inner { min-height: 0; overflow: hidden; padding-bottom: 0; transition: padding-bottom 0.58s cubic-bezier(0.4, 0, 0.2, 1); /* Normal document flow for phase → title → desc → datalist so every sub-section (including // Posture) is fully contained inside the card. No absolute positioning, no negative margins. */ display: flex; flex-direction: column; gap: 0; } .ab-stack-item--active .ab-stack-inner { /* Enough bottom padding so the last datalist row (// Posture) has real breathing room from the card's inner bottom edge. */ padding-bottom: 1.5rem; } /* Tighter scale inside accordion */ /* Stack panel: left-aligned text with a comfortable inset — not pinned to the edge, not centered. Indent comes from extra left padding on the inner wrapper so copy feels deliberately placed. */ #ab-panel-stack .ab-stack-inner { text-align: left; padding-left: 1.25rem; } #ab-panel-stack .ab-panel-title { font-size: clamp(1.7rem, 3vw, 2.55rem); margin-bottom: 0.7rem; } #ab-panel-stack .ab-panel-phase { margin-bottom: 0.5rem; } #ab-panel-stack .ab-panel-desc { font-size: clamp(0.88rem, 1.6vw, 1.02rem); margin-bottom: 0.95rem; } #ab-panel-stack .ab-panel-datalist { gap: 0.55rem; /* Natural flow — ensure the datalist grows downward and doesn't escape the card. Bottom margin reserves space even at short card heights. */ position: relative; margin-bottom: 0.5rem; } #ab-panel-stack .ab-panel-datum { position: relative; /* kill any inherited absolute positioning */ margin: 0; } /* Roster (panel 1) */ .ab-panel-roster { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.75rem; } .ab-roster-item { display: flex; align-items: center; gap: 0.875rem; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--text-muted); } .ab-roster-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; } .ab-panel-orgs { font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.2em; color: rgba(17, 26, 17, 0.38); border-top: 1px solid rgba(17, 26, 17, 0.1); padding-top: 1rem; } /* Doctrine cycle (panel 2) */ .ab-panel-cycle { display: flex; align-items: flex-end; gap: 0.875rem; flex-wrap: wrap; } .ab-cycle-step { display: flex; flex-direction: column; gap: 0.25rem; align-items: center; } .ab-cycle-num { font-family: var(--font-mono); font-size: 0.44rem; letter-spacing: 0.18em; color: var(--accent); } .ab-cycle-label { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--text-primary); } .ab-cycle-arrow { font-size: 0.8rem; color: rgba(17, 26, 17, 0.22); margin-bottom: 0.25rem; } /* Stats (panel 3) */ .ab-panel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(17, 26, 17, 0.12); } .ab-panel-stat { background: var(--bg-primary); padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; } .ab-stat-val { font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 700; color: var(--accent); letter-spacing: -0.03em; line-height: 1; } .ab-stat-label { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.2em; color: var(--text-muted); } /* Phase indicator bar (bottom of orbital) */ .ab-phase-indicator { position: absolute; bottom: 2.5rem; left: clamp(2rem, 5vw, 5rem); right: clamp(2rem, 5vw, 5rem); z-index: 8; display: flex; flex-direction: column; gap: 0.75rem; } .ab-phase-indicator-label { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.22em; color: rgba(17, 26, 17, 0.45); } .ab-phase-progress { height: 1px; background: rgba(17, 26, 17, 0.12); position: relative; } .ab-phase-progress-bar { position: absolute; inset: 0; width: 0%; background: rgba(17, 26, 17, 0.55); transition: width 0.05s linear; } /* ── Pedigree section ─────────────── */ .ab-pedigree { position: relative; z-index: 4; padding: clamp(5rem, 9vw, 8rem) 0; border-top: 1px solid var(--border); } .ab-pedigree-header { margin-bottom: 3.5rem; } .ab-pedigree-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); } @media (max-width: 900px) { .ab-pedigree-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .ab-pedigree-grid { grid-template-columns: 1fr; } } .ab-pedigree-card { background: var(--bg-primary); padding: 2.25rem 2rem; position: relative; overflow: hidden; transition: background var(--transition-base), transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease; } .ab-pedigree-card:hover { background: var(--bg-surface); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(17, 26, 17, 0.07); } .ab-pedigree-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; } .ab-pedigree-card.active::after { transform: scaleX(1); } .ab-ped-num { font-family: var(--font-mono); font-size: 0.46rem; letter-spacing: 0.22em; color: rgba(17, 26, 17, 0.25); margin-bottom: 1rem; } .ab-ped-org { font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 700; color: var(--text-primary); letter-spacing: 0.04em; margin-bottom: 0.3rem; } .ab-ped-full { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 1.25rem; text-transform: uppercase; } .ab-ped-roles { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; color: rgba(17, 26, 17, 0.45); line-height: 1.7; text-transform: uppercase; } .ab-pedigree-card-dark { background: rgba(17, 26, 17, 0.06); } /* ── Pedigree split layout ────────── */ .ab-pedigree-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: start; } .ab-pedigree-text-col .ab-pedigree-header { margin-bottom: 2rem; } .ab-pedigree-text-col .pillar-intro { font-size: clamp(0.82rem, 1.5vw, 0.92rem); color: var(--text-muted); line-height: 1.8; text-transform: none; margin-top: 0; } .ab-pedigree-text-col .pillar-intro + .pillar-intro { margin-top: 1.1rem; } .ab-pedigree-logo-panel { background: rgba(17, 26, 17, 0.03); border: 1px solid rgba(17, 26, 17, 0.10); padding: 2.5rem 2rem; position: sticky; top: 7rem; } .ab-pedigree-logo-panel-label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.22em; color: rgba(17, 26, 17, 0.35); margin-bottom: 2rem; text-transform: uppercase; } .ab-pedigree-logo-panel .partner-logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1rem; align-items: center; } @media (max-width: 900px) { .ab-pedigree-split { grid-template-columns: 1fr; gap: 3rem; } .ab-pedigree-logo-panel { position: static; } .ab-pedigree-logo-panel .partner-logo-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 560px) { .ab-pedigree-logo-panel .partner-logo-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Differentiator section ───────── */ .ab-diff { position: relative; z-index: 4; padding: clamp(5rem, 9vw, 8rem) 0; border-top: 1px solid rgba(17, 26, 17, 0.1); } .ab-diff-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.20em; color: var(--accent); margin-bottom: 3rem; } .ab-diff-item { display: grid; grid-template-columns: 80px 1fr; gap: 2.5rem; align-items: start; padding: 2.5rem 2.25rem; border: 1px solid rgba(17, 26, 17, 0.09); background: rgba(17, 26, 17, 0.025); margin-bottom: 0.875rem; } .ab-diff-item:last-child { margin-bottom: 0; } /* Faster, sequential reveal — overrides global .reveal timing */ .ab-diff-item.reveal { transition: opacity 0.52s cubic-bezier(0.22, 1, 0.36, 1), transform 0.52s cubic-bezier(0.22, 1, 0.36, 1); } .ab-diff-item.reveal.active:nth-child(1) { transition-delay: 0ms; } .ab-diff-item.reveal.active:nth-child(2) { transition-delay: 90ms; } .ab-diff-item.reveal.active:nth-child(3) { transition-delay: 180ms; } @media (max-width: 640px) { .ab-diff-item { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 1.5rem; } } .ab-diff-num { font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.18em; color: rgba(17, 26, 17, 0.52); padding-top: 0.4rem; } .ab-diff-headline { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; color: var(--text-primary); line-height: 1.08; letter-spacing: 0.02em; margin-bottom: 0.875rem; } .ab-diff-body { font-size: clamp(0.82rem, 1.5vw, 0.92rem); color: var(--text-muted); line-height: 1.75; max-width: 600px; text-transform: none; } /* =================================== ABOUT: SERVICE PHILOSOPHY CARDS =================================== */ .ab-philo-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.20em; color: var(--accent); margin-bottom: 3rem; } .ab-philo-cards { display: flex; flex-direction: column; gap: 1.25rem; } .ab-philo-card { position: relative; padding: 3rem 3.5rem; border: 1px solid rgba(17, 26, 17, 0.08); border-left-width: 3px; overflow: hidden; } .ab-philo-card--violet { background: rgba(74, 30, 140, 0.055); border-left-color: #4A1E8C; } .ab-philo-card--slate { background: rgba(28, 48, 82, 0.06); border-left-color: #1C3052; } .ab-philo-card--grape { background: rgba(95, 60, 85, 0.055); border-left-color: #5F3C55; } .ab-philo-ghost-num { position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: clamp(5rem, 10vw, 9rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--text-primary); opacity: 0.04; pointer-events: none; user-select: none; } .ab-philo-inner { display: grid; grid-template-columns: 110px 1fr; gap: 3rem; align-items: start; position: relative; z-index: 1; } .ab-philo-num { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.18em; color: rgba(17, 26, 17, 0.40); padding-top: 0.6rem; line-height: 1.6; } .ab-philo-headline { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 700; color: var(--text-primary); line-height: 1.08; letter-spacing: 0.02em; margin-bottom: 1.1rem; } .ab-philo-body { font-size: clamp(0.82rem, 1.5vw, 0.92rem); color: var(--text-muted); line-height: 1.78; max-width: 600px; text-transform: none; } @media (max-width: 700px) { .ab-philo-inner { grid-template-columns: 1fr; gap: 0.75rem; } .ab-philo-card { padding: 2.25rem 1.75rem; } .ab-philo-ghost-num { font-size: 4.5rem; right: 1rem; opacity: 0.03; } } /* =================================== ABOUT: PANEL RISE ANIMATION =================================== */ /* About-page sections that need explicit z-index to sit above the fixed background canvas (z-index:3). ab-diff, ab-pedigree, ab-advisory already have z-index:4 in their own rules. */ #ab-services, #ab-tiers { position: relative; z-index: 4; } .ab-rise { opacity: 0; transform: translateY(30px); transition: opacity 0.72s ease, transform 0.82s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--ab-rise-delay, 0ms); will-change: opacity, transform; } .ab-rise.active { opacity: 1; transform: translateY(0); } /* =================================== SIDE NAV RAIL =================================== */ .sidenav-rail { position: fixed; /* Pushed to the right gutter so the hover-out labels don't overlap body text on narrower desktop widths. */ right: 0.875rem; top: 50%; transform: translateY(-50%); z-index: 9991; display: flex; flex-direction: column; align-items: center; gap: 0; pointer-events: auto; } /* Hide on small/medium viewports */ @media (max-width: 1100px) { .sidenav-rail { display: none; } } /* Vertical connecting line running through all dots */ .sidenav-rail::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 50%; transform: translateX(-50%); width: 1px; background: rgba(17, 26, 17, 0.25); pointer-events: none; } .sidenav-item { position: relative; display: flex; align-items: center; justify-content: flex-end; cursor: pointer; text-decoration: none; padding: 0.9rem 0; z-index: 1; } .sidenav-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(17, 26, 17, 0.38); background: rgba(17, 26, 17, 0.06); flex-shrink: 0; transition: background 0.25s ease, border-color 0.25s ease, transform 0.30s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; } .sidenav-item:hover .sidenav-dot { border-color: var(--accent); background: var(--accent-glow); transform: scale(1.3); } .sidenav-item.past .sidenav-dot { background: rgba(17, 26, 17, 0.26); border-color: rgba(17, 26, 17, 0.52); } .sidenav-item.active .sidenav-dot { background: var(--accent); border-color: var(--accent); transform: scale(1.85); box-shadow: 0 0 0 3px var(--accent-glow), 0 0 10px rgba(95, 75, 102, 0.55), 0 0 22px rgba(95, 75, 102, 0.22); } /* Labels: always faintly visible, stronger on hover/active */ .sidenav-label { position: absolute; right: calc(100% + 0.9rem); font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.18em; color: rgba(17, 26, 17, 0.32); white-space: nowrap; /* Hidden by default, fades in on hover/active — prevents labels from overlapping body text at rest. */ opacity: 0; transition: opacity 0.22s ease, color 0.22s ease; pointer-events: none; } .sidenav-item:hover .sidenav-label, .sidenav-item.active .sidenav-label { opacity: 1; } .sidenav-item:hover .sidenav-label { color: rgba(17, 26, 17, 0.68); } .sidenav-item.past .sidenav-label { color: rgba(17, 26, 17, 0.44); } .sidenav-item.active .sidenav-label { color: var(--accent); font-size: 0.55rem; letter-spacing: 0.20em; font-weight: 500; } /* Active item: add a subtle tick mark to the right of the dot */ .sidenav-item.active::after { content: ''; position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); width: 4px; height: 1px; background: var(--accent); opacity: 0.7; } /* ── Dark variant (Reaper page) ── */ .sidenav-rail--dark::before { background: rgba(232, 228, 220, 0.15); } .sidenav-rail--dark .sidenav-dot { border-color: rgba(232, 228, 220, 0.38); background: rgba(232, 228, 220, 0.05); } .sidenav-rail--dark .sidenav-item:hover .sidenav-dot { border-color: rgba(255, 45, 45, 0.75); background: rgba(255, 45, 45, 0.12); } .sidenav-rail--dark .sidenav-item.past .sidenav-dot { background: rgba(232, 228, 220, 0.22); border-color: rgba(232, 228, 220, 0.55); } .sidenav-rail--dark .sidenav-label { color: rgba(232, 228, 220, 0.32); } .sidenav-rail--dark .sidenav-item:hover .sidenav-label { color: rgba(232, 228, 220, 0.72); } .sidenav-rail--dark .sidenav-item.past .sidenav-label { color: rgba(232, 228, 220, 0.48); } .sidenav-rail--dark .sidenav-item.active .sidenav-label { color: #ff2d2d; } /* =================================== HOW WE OPERATE — LEGIBILITY OVERRIDES Scoped to #how-we-operate only. All values here are intentionally stronger than the global timeline defaults. =================================== */ /* 1. Section background — semi-opaque so globe reads as a background system graphic */ #how-we-operate { background: rgba(194, 206, 190, 0.84) !important; } /* 2. Section header text — ensure full readability */ #how-we-operate .section-desc { color: rgba(17, 26, 17, 0.75); } /* 3. Step cards — visible panel with clear border */ #how-we-operate .timeline-content { background: rgba(197, 207, 202, 0.72); border-color: rgba(17, 26, 17, 0.26); } #how-we-operate .timeline-item.active .timeline-content { background: rgba(197, 207, 202, 0.88); border-color: rgba(17, 26, 17, 0.34); } /* 4. Numbered node markers — clearly legible */ #how-we-operate .timeline-node { background: rgba(197, 207, 202, 0.92); border-color: rgba(17, 26, 17, 0.40); color: rgba(17, 26, 17, 0.65); } #how-we-operate .timeline-item.active .timeline-node { background: rgba(197, 207, 202, 0.96); border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 1px rgba(95, 75, 102, 0.28), 0 0 16px rgba(95, 75, 102, 0.14); } /* 5. Body text in step cards */ #how-we-operate .timeline-desc { color: rgba(17, 26, 17, 0.80); } /* 6. Connector lines — visible, accent tint on active */ #how-we-operate .timeline-item:not(:last-child)::after { background: rgba(17, 26, 17, 0.22); } #how-we-operate .timeline-item.active:not(:last-child)::after { background: linear-gradient(180deg, rgba(95, 75, 102, 0.45), rgba(17, 26, 17, 0.18)); } /* 7. Step label — accent color on active, stronger contrast at rest */ #how-we-operate .timeline-step-label { color: rgba(17, 26, 17, 0.48); font-size: 0.56rem; } #how-we-operate .timeline-item.active .timeline-step-label { color: var(--accent); } /* 8. Timeline title — stronger weight on active */ #how-we-operate .timeline-item.active .timeline-title { color: rgba(17, 26, 17, 0.92); } /* 9. Connector line — wider and stronger */ #how-we-operate .timeline-item:not(:last-child)::after { width: 2px; background: rgba(17, 26, 17, 0.28); } #how-we-operate .timeline-item.active:not(:last-child)::after { background: linear-gradient(180deg, var(--accent), rgba(17, 26, 17, 0.20)); opacity: 0.55; } /* 10. Node pulse ring on active */ #how-we-operate .timeline-item.active .timeline-node::before { content: ''; position: absolute; inset: -5px; border: 1px solid rgba(95, 75, 102, 0.28); animation: node-pulse 2.2s ease-out infinite; } @keyframes node-pulse { 0% { opacity: 0.65; transform: scale(0.94); } 65% { opacity: 0; transform: scale(1.30); } 100% { opacity: 0; transform: scale(1.30); } } /* =================================== PAGE SCROLL PROGRESS RAIL Vertical left-side indicator — minimal, tactical =================================== */ #page-progress { position: fixed; left: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 9991; pointer-events: none; } /* Hide below 1100px (same breakpoint as sidenav) */ @media (max-width: 1100px) { #page-progress { display: none; } } #pp-track { position: relative; width: 2px; height: 56vh; background: rgba(17, 26, 17, 0.10); } /* Filled portion grows downward */ #pp-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--accent), rgba(95, 75, 102, 0.40)); transition: height 0.08s linear; will-change: height; } /* Moving pip — small square marker at current position */ #pp-pip { position: absolute; left: 50%; top: 0%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 0 2px rgba(95, 75, 102, 0.18), 0 0 8px rgba(95, 75, 102, 0.45); transition: top 0.08s linear; will-change: top; } /* Tick marks at 25 / 50 / 75 percent */ .pp-tick { position: absolute; left: 100%; margin-left: 3px; width: 5px; height: 1px; background: rgba(17, 26, 17, 0.22); transform: translateY(-50%); } /* Start / end cap labels */ #pp-track::before, #pp-track::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border: 1px solid rgba(17, 26, 17, 0.28); } #pp-track::before { top: -5px; } #pp-track::after { bottom: -5px; } /* =================================== SECTION SCROLL CUE Tactical bridge indicator — appears at bottom of #problem =================================== */ .section-scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(17, 26, 17, 0.08); } /* Header row: rule ── // label ── rule */ .section-scroll-cue-header { display: flex; align-items: center; gap: 0.85rem; width: 100%; max-width: 280px; } .section-scroll-cue-rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(17, 26, 17, 0.32)); } .section-scroll-cue-header .section-scroll-cue-rule:last-child { background: linear-gradient(270deg, transparent, rgba(17, 26, 17, 0.32)); } .section-scroll-cue-label { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.22em; color: rgba(17, 26, 17, 0.62); white-space: nowrap; } /* Shaft with traveling pip */ .section-scroll-cue-shaft { width: 1px; height: 48px; background: linear-gradient(180deg, rgba(17, 26, 17, 0.48), rgba(17, 26, 17, 0.04)); position: relative; } .section-scroll-cue-pip { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; /* Same accent pip — consistent system language */ background: rgba(95, 75, 102, 0.70); animation: scroll-pip-drop 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation-delay: 0.15s; /* slight offset so cues don't sync exactly */ } /* Chevron — same bounce, same color as hero */ .section-scroll-cue-chevron { color: rgba(17, 26, 17, 0.65); animation: scroll-chevron-drop 1.8s ease-in-out infinite; animation-delay: 0.15s; } /* ============================================================= MOBILE OPTIMISATION PASS All rules are scoped to max-width breakpoints only. Zero impact on desktop styles (≥769px). ============================================================= */ /* ────────────────────────────────────────────────────────────── SITEWIDE — HUD overlays + fixed UI chrome ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Corner readouts: 0.6rem mono text — completely illegible on touch screens */ .corner-readout { display: none; } /* Classification stamp: fixed bottom-left, collides with mobile browser chrome */ .classification-stamp { display: none; } /* Side network canvases: full-height fixed overlays — visual noise + memory cost */ .side-network { display: none; } /* Vignette: remove entirely on mobile — eats too much visible area */ .vignette-border { box-shadow: none; } /* Splash interact hint: "HOVER MARKERS" is meaningless on touch */ .splash-interact-hint { display: none; } /* Splash vignette: remove on mobile — narrow screens lose too much content area to the darkened edges. */ .splash-vignette-layer { box-shadow: none; } /* Film grain: restore to near-original intensity — lighter 0.12 made the composition feel flat / washed out. */ .splash-grain-layer { opacity: 0.18; } /* Corner HUD readouts: too small to read, overlap the narrow map area */ .splash-corner { display: none; } /* Doc-id bar: white-space:nowrap overflows viewport on small screens */ .splash-doc-id { display: none; } /* Splash content: tighten padding, center text for portrait layout */ .splash-content { padding: 1.25rem 1rem; width: 92%; max-width: 440px; text-align: center; } /* Op-row: redacted label + button side-by-side breaks on small screens */ .splash-op-row { flex-direction: column; align-items: center; gap: 0.75rem; } .splash-redacted { padding-right: 0; font-size: 0.55rem; } } /* ────────────────────────────────────────────────────────────── NAVIGATION — mobile header + menu tap targets ────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Nav: always fully solid on mobile — opaque colour beats any in-app-browser quirks with semi-transparent blur layers. Header height trimmed via reduced padding so the larger logo fits. */ .nav { background: rgb(200, 212, 196); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(143, 168, 138, 0.45); padding: 0.75rem 0; } .nav.scrolled { background: rgb(196, 209, 191); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Logo slightly larger on phones so it remains the anchor; still comfortably clears the 44px hamburger target. */ .site-letterhead { height: 33px; } /* Hamburger: solid min tap target */ .nav-mobile-btn { min-width: 44px; min-height: 44px; padding: 0.625rem; color: var(--text-primary); } /* Mobile menu: full-width slide — no awkward partial drawer on small phones */ .mobile-menu { max-width: 100%; border-left: none; border-top: 1px solid var(--border); padding: 4.5rem 1.75rem 2rem; } /* Menu links: generous tap targets with clear separators */ .mobile-menu-link { font-size: 0.875rem; padding: 0.875rem 0; display: block; border-bottom: 1px solid rgba(143, 168, 138, 0.20); } .mobile-menu-links { gap: 0; } } /* ────────────────────────────────────────────────────────────── HOMEPAGE — HERO ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Ensure hero content clears the always-on nav bar */ .hero { padding-top: 5.5rem; } /* Title: reduce on phones */ .hero-title { font-size: clamp(1.85rem, 7.5vw, 2.8rem); } .hero-subtitle { font-size: clamp(1.05rem, 4.5vw, 1.45rem); margin-top: 1.25rem; margin-bottom: 1.5rem; /* 3-line min-height at mobile font scale */ min-height: calc(clamp(1.05rem, 4.5vw, 1.45rem) * 1.55 * 3); } /* Remove fixed min-height — let headline wrap naturally on mobile */ .hero-heading { min-height: auto; margin-bottom: 1.25rem; } /* Face: show below text on mobile — generous scale so the ID / vector chrome around the head reads clearly and doesn't feel cramped. The scanner brackets + telemetry readouts (drawn by the face overlay canvas) need room to breathe away from the head itself. */ .hero-face-wrap { display: block; width: min(260px, 68vw); margin: 2rem auto 1.25rem; } .face-canvas { height: min(260px, 68vw); } /* Mobile hero padding — a touch more top/bottom breathing room so the head + ID block doesn't feel bunched against the subtitle above or the stats bar below. */ .hero-content { padding-top: 1.5rem; padding-bottom: 2rem; } /* Scroll cue: restored on mobile — was hidden on short viewports, which killed the scroll affordance. Tighter scale so it fits without colliding with the stats bar below. */ .hero-scroll { display: flex; margin-top: 1.25rem; gap: 0.55rem; } .hero-scroll-label { font-size: 0.7rem; letter-spacing: 0.28em; font-weight: 600; color: rgba(17, 26, 17, 0.85); } .hero-scroll-shaft { height: 38px; } .hero-scroll-chevron { width: 14px; height: 8px; } } @media (max-width: 480px) { .hero-title { font-size: clamp(1.65rem, 8.5vw, 2.2rem); } .hero-subtitle { font-size: clamp(0.9rem, 5vw, 1.15rem); min-height: calc(clamp(0.9rem, 5vw, 1.15rem) * 1.55 * 3); } .hero-face-wrap { width: min(230px, 66vw); margin: 1.5rem auto 0.75rem; } .face-canvas { height: min(230px, 66vw); } } /* ────────────────────────────────────────────────────────────── HOMEPAGE — STATS BAR ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .stats-bar { padding: 2rem 0; } .stat-value { font-size: clamp(1.5rem, 6vw, 2rem); } .stat-label { font-size: 0.6rem; letter-spacing: 0.1em; } } /* ────────────────────────────────────────────────────────────── HOMEPAGE — CONTENT SECTION GRIDS ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Services: 3-col on desktop → 1-col on mobile (no existing breakpoint) */ .services-grid { grid-template-columns: 1fr; } /* Cases: 3-col on desktop → 1-col on mobile */ .cases-grid { grid-template-columns: 1fr; } /* Tiers: 1-col on small mobile, bump to 2-col at mid-size below */ .tiers-grid { grid-template-columns: 1fr; } /* Partner logo grid: reduce gap on small screens */ .partner-logo-grid { gap: 1.75rem; } } /* Tiers: 2-col is readable at mid-size phones (540–768px) */ @media (min-width: 540px) and (max-width: 768px) { .tiers-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { /* Logo images: slightly smaller on tiny screens */ .partner-logo-img { max-height: 32px; height: 32px; } } /* ────────────────────────────────────────────────────────────── BUTTONS / CTA — full-width on very small screens ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .btn { padding: 0.875rem 1.5rem; width: 100%; justify-content: center; } /* CTA groups: stack and stretch */ .hero-cta, .page-hero-cta, .cx-hero-cta { flex-direction: column; align-items: stretch; } } /* ────────────────────────────────────────────────────────────── SUB-PAGES — PAGE HERO (shared across about, intel, capabilities, etc.) ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .page-hero { padding-top: 5.5rem; padding-bottom: 2.5rem; } .page-hero-title { font-size: clamp(2rem, 8vw, 3.5rem); } } @media (max-width: 480px) { .page-hero-title { font-size: clamp(1.75rem, 9vw, 2.5rem); } .page-hero-subtitle { font-size: 0.875rem; } } /* ────────────────────────────────────────────────────────────── ABOUT PAGE — HERO ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Title: clamp min is 3.8rem (61px) — too large on phone hero */ .ab-hero-title { font-size: clamp(2.5rem, 8vw, 4rem); } /* Decorative orbital rings: scale back on mobile */ .ab-hero-ring-3, .ab-hero-ring-4 { display: none; } .ab-hero-ring-1 { width: 120vw; height: 120vw; top: -40vw; right: -40vw; } .ab-hero-ring-2 { width: 90vw; height: 90vw; top: -25vw; right: -25vw; } } @media (max-width: 480px) { .ab-hero-title { font-size: clamp(2rem, 9.5vw, 2.8rem); } /* Fragment canvas: collapse spacer on very small phones */ .ab-hero-model-wrap { display: none; } /* Ensure content fills full width */ .ab-hero-layout { display: block; } .ab-hero-layout .ab-hero-content { max-width: 100%; padding-top: 6.5rem; } /* Canvases hidden with wrap on very small phones */ } /* ────────────────────────────────────────────────────────────── ABOUT PAGE — PHILOSOPHY SECTION ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .ab-diff-eyebrow { font-size: 0.65rem; margin-bottom: 2rem; } } /* ────────────────────────────────────────────────────────────── INTEL PAGE — GRIDS ────────────────────────────────────────────────────────────── */ /* Operator grid: 4-col at 768px is unreadable — hold at 2-col until 1024px */ @media (max-width: 1023px) { .operator-grid { grid-template-columns: repeat(2, 1fr); } } /* Threat actor grid: 3-col at 768px is cramped on tablet — 1-col below 640px */ @media (max-width: 640px) { .threat-actor-grid { grid-template-columns: 1fr; } } /* ────────────────────────────────────────────────────────────── CONTACT FORM — small mono labels ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .cx-form-classification { font-size: 0.65rem; letter-spacing: 0.18em; } .cx-form-eyebrow { font-size: 0.68rem; letter-spacing: 0.18em; } .cx-form-heading { font-size: clamp(1.2rem, 4vw, 1.6rem); } .cx-channels { padding: 1.5rem; } } /* ────────────────────────────────────────────────────────────── CONTACT PAGE — HERO ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .cx-hero-title { font-size: clamp(2.2rem, 8vw, 3.5rem); } .cx-hero-text { padding-top: 5rem; padding-bottom: 2rem; } } @media (max-width: 480px) { .cx-hero-title { font-size: clamp(2rem, 9.5vw, 2.8rem); } .cx-channels { padding: 1.25rem; } } /* ────────────────────────────────────────────────────────────── REAPER PAGE — HERO + CONTENT ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Title: clamp(2.5rem,6vw,4rem) → reduce further on phones */ .reaper-title { font-size: clamp(1.9rem, 7.5vw, 2.8rem); } .reaper-desc { font-size: 1rem; } } /* ────────────────────────────────────────────────────────────── METHODOLOGY GRID (capabilities + field reports) ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* 5-col at min-width:640px is too aggressive at small tablet — use 3-col */ .methodology-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 480px) { .methodology-grid { grid-template-columns: repeat(2, 1fr); } } /* ────────────────────────────────────────────────────────────── OPS STATS BAR (field reports page) ────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* 4-col collapses to 2-col at this breakpoint */ .ops-stats-bar { grid-template-columns: repeat(2, 1fr); } } /* ────────────────────────────────────────────────────────────── SCROLL REVEAL — tighter translate on mobile ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Reduce translateY offset — less vertical travel on small viewport */ .reveal { transform: translateY(16px); } .reveal-stagger > * { transform: translateY(14px); } /* ab-rise: reduce travel distance on mobile/tablet */ .ab-rise { transform: translateY(16px); } /* fr-reveal: disable blur filter on mobile — GPU cost + potential CLS */ .fr-reveal { filter: none; } .fr-reveal.in { filter: none; } /* Calendly button: stretch to full width on mobile (matches .btn width:100% at 480px) */ .cx-calendly-btn { align-self: stretch; } } /* ────────────────────────────────────────────────────────────── ABOUT PAGE — PARTNERSHIPS & STRATEGIC ADVISORY SECTION ────────────────────────────────────────────────────────────── */ .ab-advisory { position: relative; z-index: 4; padding: clamp(6rem, 10vw, 10rem) 0; background: rgba(181, 196, 184, 0.45); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* Section header */ .ab-advisory-header { margin-bottom: clamp(3rem, 5vw, 5rem); } .ab-advisory-heading { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 700; letter-spacing: 0.04em; color: var(--text-primary); text-transform: uppercase; line-height: 1.1; margin: 0.75rem 0 0; } /* Two-column open layout — no card wrapper */ .ab-advisory-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; } /* Portrait column */ .ab-advisory-portrait-col { display: flex; flex-direction: column; align-items: flex-start; padding-top: 0.5rem; } .ab-advisory-portrait-frame { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(143, 168, 138, 0.45); flex-shrink: 0; } .ab-advisory-portrait { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: grayscale(55%) contrast(1.05); transition: filter 0.5s ease; } .ab-advisory-portrait-frame:hover .ab-advisory-portrait { filter: grayscale(15%) contrast(1.06); } /* Text column */ .ab-advisory-text-col { display: flex; flex-direction: column; gap: 1.75rem; } /* Name block */ .ab-advisory-name-block { display: flex; flex-direction: column; gap: 0.45rem; } .ab-advisory-name { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; letter-spacing: 0.02em; color: var(--text-primary); text-transform: none; margin: 0; } .ab-advisory-role { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; margin: 0; } .ab-advisory-rule { width: 3rem; height: 1px; background: rgba(143, 168, 138, 0.55); } /* Body text */ .ab-advisory-body { display: flex; flex-direction: column; gap: 1rem; } .ab-advisory-body p { font-size: clamp(0.88rem, 1.5vw, 0.96rem); line-height: 1.78; color: var(--text-muted); text-transform: none; letter-spacing: 0.01em; margin: 0; } /* Quote */ .ab-advisory-quote { border-left: 1px solid rgba(17, 26, 17, 0.2); padding-left: 1.5rem; margin-top: 0.25rem; } .ab-advisory-blockquote { font-size: clamp(0.88rem, 1.5vw, 0.96rem); line-height: 1.78; color: var(--text-primary); font-style: italic; text-transform: none; letter-spacing: 0.01em; margin: 0 0 0.75rem; } .ab-advisory-cite { font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.22em; color: rgba(17, 26, 17, 0.4); font-style: normal; text-transform: uppercase; } /* Disclaimer */ .ab-advisory-disclaimer { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.12em; line-height: 1.6; color: rgba(17, 26, 17, 0.38); text-transform: none; margin: 0; padding-top: 0.5rem; border-top: 1px solid rgba(143, 168, 138, 0.3); } /* Responsive */ @media (max-width: 860px) { .ab-advisory-layout { grid-template-columns: 180px 1fr; gap: 2.5rem; } .ab-advisory-portrait-frame { width: 160px; height: 160px; } } @media (max-width: 600px) { .ab-advisory-layout { grid-template-columns: 1fr; gap: 2.25rem; } .ab-advisory-portrait-col { align-items: center; flex-direction: row; gap: 1.5rem; } .ab-advisory-portrait-frame { width: 110px; height: 110px; flex-shrink: 0; } .ab-advisory-heading { font-size: clamp(1.7rem, 7vw, 2.4rem); } } /* ────────────────────────────────────────────────────────────── SECTION PADDING — reduce overall vertical whitespace on mobile ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { :root { --section-padding: clamp(3rem, 8vw, 5rem); } } @media (max-width: 480px) { :root { --section-padding: clamp(2.5rem, 7vw, 4rem); } } /* ────────────────────────────────────────────────────────────── STATS BAR — tighten grid gap on small phones ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .stats-grid { gap: 1.25rem; } } /* ────────────────────────────────────────────────────────────── PILLARS — reduce internal padding on mobile ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .pillar { padding: 1.5rem 1.25rem; } } /* ────────────────────────────────────────────────────────────── TIER CARDS — reduce padding on mobile ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .tier-card { padding: 1.5rem; } .tier-recommended-label { top: 1.5rem; right: 1.5rem; } } /* ────────────────────────────────────────────────────────────── TIMELINE — reduce gap between items on small screens ────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .timeline-items { gap: 2.5rem; } } /* ────────────────────────────────────────────────────────────── FORM INPUTS — reduce padding on very small screens ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .form-input, .form-select, .form-textarea { padding: 0.875rem; font-size: 0.8125rem; } } /* ────────────────────────────────────────────────────────────── MOBILE MENU — landscape orientation overflow fix ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) and (orientation: landscape) { .mobile-menu { max-height: 100vh; overflow-y: auto; } .mobile-menu-links { gap: 1rem; } } /* =================================== CONTACT PANEL Left-side sliding panel, triggered by the nav CONTACT link site-wide. =================================== */ /* Scroll lock while panel is open */ body.cp-body-open { overflow: hidden; } /* ── Backdrop ───────────────────────────────────────────────────────────── Blurred + dimmed overlay — the page recedes, the panel becomes foreground. visibility toggle uses a delay so it doesn't flash on close. */ .cp-backdrop { position: fixed; inset: 0; z-index: 9994; background: rgba(5, 10, 5, 0.38); backdrop-filter: blur(5px) brightness(0.88); -webkit-backdrop-filter: blur(5px) brightness(0.88); opacity: 0; visibility: hidden; transition: opacity 390ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0ms 390ms; cursor: pointer; } .cp-backdrop.cp-open { opacity: 1; visibility: visible; transition: opacity 390ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0ms 0ms; } /* ── Panel ──────────────────────────────────────────────────────────────── Slides in from the left. Width: comfortable reading width on desktop, almost full-screen on mobile. */ .cp-panel { position: fixed; top: 0; left: 0; bottom: 0; width: min(46vw, 700px); z-index: 9995; background: var(--bg-primary); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform 430ms cubic-bezier(0.4, 0, 0.15, 1); will-change: transform; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; /* Subtle accent gradient along the right edge — signals active state */ box-shadow: inset -1px 0 0 var(--border), 1px 0 18px rgba(5, 10, 5, 0.18); } .cp-panel.cp-open { transform: translateX(0); } @media (max-width: 900px) { .cp-panel { width: min(72vw, 640px); } } @media (max-width: 600px) { .cp-panel { width: 93vw; transition-duration: 360ms; } } /* ── Inner layout ─────────────────────────────────────────────────────── */ .cp-inner { display: flex; flex-direction: column; gap: 0; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 5vw, 3.5rem) 4rem; min-height: 100%; } /* ── Top bar ──────────────────────────────────────────────────────────── */ .cp-topbar { display: flex; align-items: center; justify-content: flex-end; padding-bottom: 0.5rem; margin-bottom: 0; } /* Close button — system-style, uses the corner-frame treatment on hover */ .cp-close { display: inline-flex; align-items: center; gap: 0.45rem; background: none; border: 1px solid transparent; cursor: pointer; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.48rem; letter-spacing: 0.22em; text-transform: uppercase; padding: 0.3rem 0.55rem; transition: color 0.18s ease, border-color 0.18s ease; position: relative; line-height: 1; } .cp-close > span:first-child { font-size: 1rem; line-height: 1; font-weight: 300; } .cp-close-esc { font-size: 0.4rem; letter-spacing: 0.24em; opacity: 0.5; } @media (hover: hover) { .cp-close:hover { color: var(--text-primary); border-color: var(--border); } } /* ── Groom Lake emblem — slide-out panel only ────────────────────────── Sits inside .cp-inner, BETWEEN the close-button topbar and the heading block. Centred horizontally, sized for the panel's tighter gutter (~36–48px range) — never the text wordmark. Inherits the panel's translateX slide-in for free since it's a child of .cp-inner. No animation: emblem appears the instant the panel paints, with no delayed fade that would clip during the slide. */ .cp-emblem { display: flex; justify-content: center; align-items: center; margin: 0.25rem 0 1rem; /* Clearance from the close button above (which can sit ~2rem tall in its top-right corner). Padding-top echos the .cp-head's padding so the visual rhythm matches the existing panel layout. */ padding-top: 0.25rem; pointer-events: none; } .cp-emblem img { display: block; width: 40px; height: 40px; opacity: 0.92; filter: none; user-select: none; } @media (min-width: 768px) { .cp-emblem { margin: 0.5rem 0 1.25rem; } .cp-emblem img { width: 48px; height: 48px; } } @media (max-width: 480px) { .cp-emblem { margin: 0.25rem 0 0.85rem; } .cp-emblem img { width: 36px; height: 36px; } } /* ── Heading block ────────────────────────────────────────────────────── */ .cp-head { /* Reduced from 2.5rem to 2rem since .cp-emblem now occupies the space immediately above. Total emblem-to-eyebrow gap is still comfortable (~32px). */ margin-bottom: 2rem; padding-top: 0.5rem; } .cp-eyebrow { font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.3em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 1rem; } .cp-heading { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 700; letter-spacing: 0.03em; line-height: 0.96; color: var(--text-primary); } /* ── Form area ────────────────────────────────────────────────────────── */ .cp-form-area { flex: 1; } /* Override area-grid to 2 cols inside panel — prevents cramping */ .cp-panel .cp-area-grid { grid-template-columns: repeat(2, 1fr) !important; } /* ── Success state ────────────────────────────────────────────────────── */ .cp-success { padding: 3rem 0 2rem; text-align: center; } .cp-success-check { font-family: var(--font-mono); font-size: 1.8rem; color: var(--success); margin-bottom: 1.25rem; line-height: 1; } .cp-success-title { font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 600; color: var(--text-primary); margin-bottom: 0.85rem; letter-spacing: 0.02em; } .cp-success-text { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--text-muted); line-height: 1.75; text-transform: none; margin-bottom: 2rem; } .cp-success-close { display: inline-flex; margin: 0 auto; } /* ── Reduced motion ───────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .cp-backdrop, .cp-panel { transition-duration: 0.01ms !important; } } /* ══════════════════════════════════════════════════════════════════════ MOBILE SECTION NAVIGATOR Floating quick-jump control. Visible at ≤ 1100px (sidenav hidden). Injected by /js/mobile-nav.js — styles live here for single source. ══════════════════════════════════════════════════════════════════════ */ .gl-mob-nav-btn { display: none; } @media (max-width: 1100px) { /* ── Floating trigger pill ── */ .gl-mob-nav-btn { display: flex; align-items: center; gap: 0.5rem; position: fixed; bottom: 1.5rem; right: 1.25rem; z-index: 9800; padding: 0.6rem 1.1rem; background: rgba(200, 212, 196, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(143, 168, 138, 0.45); border-radius: 2px; box-shadow: 0 4px 24px rgba(17, 26, 17, 0.14), 0 1px 4px rgba(17, 26, 17, 0.08); font-family: var(--font-mono); font-size: 0.60rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-primary); cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, opacity 0.20s ease, transform 0.20s ease; white-space: nowrap; } .gl-mob-nav-btn:active { transform: scale(0.97); } /* Pulse dot — accent colour */ .gl-mob-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 6px var(--accent-glow); } /* Fade button during fast scroll so it doesn't block content */ .gl-mob-nav-btn.scrolling { opacity: 0.35; } /* Rotate arrow when panel open */ .gl-mob-nav-btn.panel-open { border-color: var(--accent); background: rgba(200, 212, 196, 0.98); } /* ── Backdrop ── */ .gl-mob-nav-backdrop { position: fixed; inset: 0; z-index: 9798; background: rgba(17, 26, 17, 0.22); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .gl-mob-nav-backdrop.open { opacity: 1; pointer-events: auto; } /* ── Slide-up panel ── */ .gl-mob-nav-panel { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9799; background: rgba(200, 212, 196, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(143, 168, 138, 0.40); padding: 1.25rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .gl-mob-nav-panel.open { transform: translateY(0); pointer-events: auto; } /* Panel header row */ .gl-mob-nav-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(143, 168, 138, 0.25); } .gl-mob-nav-title { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.24em; color: var(--text-muted); text-transform: uppercase; } .gl-mob-nav-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(143, 168, 138, 0.15); border: 1px solid rgba(143, 168, 138, 0.30); border-radius: 2px; font-size: 0.875rem; color: var(--text-primary); cursor: pointer; transition: background 0.15s ease; } .gl-mob-nav-close:active { background: rgba(143, 168, 138, 0.30); } /* Section list */ .gl-mob-nav-list { list-style: none; margin: 0; padding: 0; } .gl-mob-nav-item { border-bottom: 1px solid rgba(143, 168, 138, 0.14); } .gl-mob-nav-item:last-child { border-bottom: none; } .gl-mob-nav-link { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 0; text-decoration: none; color: var(--text-primary); min-height: 44px; transition: color 0.15s ease; } .gl-mob-nav-link:active, .gl-mob-nav-link.active { color: var(--accent); } .gl-mob-nav-num { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.16em; color: var(--text-muted); min-width: 1.8rem; flex-shrink: 0; transition: color 0.15s ease; } .gl-mob-nav-link.active .gl-mob-nav-num { color: var(--accent); } .gl-mob-nav-name { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; flex: 1; } .gl-mob-nav-arrow { font-size: 0.875rem; color: var(--text-muted); flex-shrink: 0; transition: color 0.15s ease, transform 0.15s ease; } .gl-mob-nav-link.active .gl-mob-nav-arrow { color: var(--accent); transform: translateX(2px); } } /* ══════════════════════════════════════════════════════════════════════ GLOBAL MOBILE — SMALL MONO LABEL READABILITY Many decorative labels use 0.42–0.58rem (6–9px at 16px base). Bump to minimum legible size on touch screens. ══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* Global mono label minimum */ .label { font-size: 0.72rem; letter-spacing: 0.10em; } /* Page hero meta line */ .page-hero-meta { font-size: 0.70rem; letter-spacing: 0.12em; } /* Stats bar labels */ .stat-label { font-size: 0.65rem; letter-spacing: 0.10em; } /* Ops stat label */ .ops-stat-label { font-size: 0.65rem; } /* Outcome tags */ .outcome-tag { font-size: 0.60rem; padding: 0.4rem 0.75rem; } /* Section headers / eyebrows that use tiny mono */ .section-eyebrow, .section-label { font-size: 0.70rem; letter-spacing: 0.14em; } /* Threat stat numbers — make them hero-sized on mobile */ .threat-stat { font-size: clamp(2.5rem, 10vw, 4rem); } /* Partner logos: ensure legible gap */ .partner-logo-grid { gap: 2rem; grid-template-columns: repeat(3, 1fr); } /* Service list items */ .service-list { font-size: 0.825rem; } /* Tier card content */ .tier-name { font-size: 1rem; } .tier-desc { font-size: 0.825rem; } /* Case card text */ .case-op, .case-status { font-size: 0.65rem; letter-spacing: 0.12em; } .case-title { font-size: 1rem; } .case-desc { font-size: 0.825rem; } /* Section padding: slightly tighter on mobile */ :root { --section-padding: clamp(3rem, 8vw, 6rem); } } @media (max-width: 480px) { /* Tightest screens: reduce further */ .label { font-size: 0.65rem; } .page-hero-meta { font-size: 0.65rem; } } /* ══════════════════════════════════════════════════════════════ MOBILE UX PASS — comprehensive fixes ══════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── HERO — logo under headline + title word-break ────────────────────────────────────────────────────────────── */ @media (max-width: 600px) { /* Logo under headline: scale down on very small screens */ .hero-logo-under img { max-width: 80px; } } @media (max-width: 480px) { /* Title: ensure each
-separated line fits cleanly */ .hero-title { word-break: break-word; hyphens: none; } /* Reduce hero CTA gap on tiny screens */ .hero-cta { gap: 0.75rem; } } /* ────────────────────────────────────────────────────────────── ORBITAL / INTELLIGENCE SECTION — canvas + panel coexistence ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Phase bar: lives at the TOP on mobile but tucked BELOW the fixed main header so the two bars don't clash / visually double up. The nav on mobile is ~56-64px tall (32px padding + content). 4.25rem clears it with a consistent gap across Safari, Chrome, Telegram. */ .ab-phase-indicator { left: 0; right: 0; top: calc(4.25rem + env(safe-area-inset-top, 0px)); bottom: auto; } /* Accordion stack inside panel: tighten for small screens */ .ab-stack-header { padding: 0.5rem 0; } /* Mobile: surface 01 / 02 / 03 as explicit tap-tabs so users understand they can switch layers without having to scroll. Inactive headers are muted; active shows accent underline + bright number so the "selected" state is unmissable. */ .ab-stack-header { border-left: 2px solid transparent; padding-left: 0.55rem; transition: border-color 220ms ease, background-color 220ms ease; } .ab-stack-item--active > .ab-stack-header { border-left-color: var(--accent); background: rgba(255, 45, 45, 0.04); } /* Panel datalist: compact row spacing */ .ab-panel-datalist { gap: 0.45rem; } /* Datum key/value: reduce font-size so rows don't wrap */ .ab-datum-key, .ab-datum-val { font-size: 0.62rem; letter-spacing: 0.08em; } } @media (max-width: 480px) { /* Phase nav: push further left to avoid edge clipping */ .ab-orbital-nav { right: 0.5rem; } /* Accordion title inside panel: tightest scale */ #ab-panel-stack .ab-panel-title { font-size: clamp(1.2rem, 6vw, 1.75rem); } #ab-panel-stack .ab-panel-desc { font-size: 0.78rem; line-height: 1.65; margin-bottom: 0.6rem; } #ab-panel-stack .ab-panel-datalist { gap: 0.4rem; } } /* ────────────────────────────────────────────────────────────── PROBLEM SECTION — threat boxes ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .threat-box { padding: 1.5rem 1.25rem; } .threat-stat { font-size: clamp(2.2rem, 9vw, 3.5rem); } } /* ────────────────────────────────────────────────────────────── WHO WE ARE / ABOUT — partner logos ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .partner-logo-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } /* ────────────────────────────────────────────────────────────── SERVICES SECTION — column headers ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .service-col-title { font-size: 0.9rem; letter-spacing: 0.12em; } .service-col-header { margin-bottom: 1rem; } } /* ────────────────────────────────────────────────────────────── TIERS SECTION — card content ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .tier-card { padding: 1.5rem 1.25rem; } .tier-badge { font-size: 0.58rem; letter-spacing: 0.14em; padding: 0.3rem 0.65rem; } } /* ────────────────────────────────────────────────────────────── CASE STUDIES — card layout ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .case-card { padding: 1.5rem 1.25rem; } .case-location { font-size: 0.65rem; } } /* ────────────────────────────────────────────────────────────── CLOSING SECTION — headline ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .closing-title { font-size: clamp(1.5rem, 8vw, 2.5rem); letter-spacing: 0.01em; } } /* ────────────────────────────────────────────────────────────── CONTACT SECTION — form fields ────────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .contact-form input, .contact-form textarea, .cx-field input, .cx-field textarea { font-size: 1rem; /* Prevents iOS zoom-on-focus */ } } /* ────────────────────────────────────────────────────────────── GLOBAL — ensure nothing bleeds past viewport on narrow screens ────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Any flex row that might overflow horizontally */ .stats-grid, .partner-logo-grid { width: 100%; max-width: 100%; } /* Section containers: enforce horizontal containment */ .container { max-width: 100%; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } } /* ══════════════════════════════════════════════════════════════════ MOBILE UX OVERHAUL — spacing, hierarchy, readability All rules: max-width 767px. Desktop is completely untouched. ══════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* ── 1. Section padding: 80–120px (overrides the 48–80px reductions) ── */ :root { --section-padding: clamp(5rem, 14vw, 7.5rem); } /* ── 2. Container: consistent 20px gutter with safe-area respect ── */ .container { padding-left: max(1.25rem, env(safe-area-inset-left)) !important; padding-right: max(1.25rem, env(safe-area-inset-right)) !important; } /* ── 3. Global paragraph line-height ───────────────────────── */ p, .section-desc, .pillar-desc, .reaper-desc, .case-desc, .tier-desc { line-height: 1.65; } /* ── 4. Section headers ─────────────────────────────────────── */ .section-header { margin-bottom: 2.5rem; } .section-title { margin-top: 0.625rem; margin-bottom: 0.5rem; } .section-desc { margin-top: 0.875rem; } /* ── 5. Scroll-continue cues: no value on touch ─────────────── */ .section-scroll-cue { display: none !important; } /* ── 6. Hero ─────────────────────────────────────────────────── */ /* Increase top clearance + restore deliberate bottom space */ .hero { padding-top: 6.5rem; padding-bottom: 3.5rem; } .hero-content { padding-top: 1.5rem; padding-bottom: 2.5rem; } /* More vertical rhythm between headline and subtitle */ .hero-heading { margin-bottom: 0.875rem; } .hero-subtitle { margin-top: 1.25rem; margin-bottom: 2.25rem; line-height: 1.6; /* Remove fixed min-height — let it wrap naturally */ min-height: 0 !important; } .hero-logo-under { margin-top: 2rem; } /* Face: ~20% smaller than existing mobile size + pushed to lower third */ .hero-face-wrap { width: min(160px, 43vw); margin-top: 3rem; } .face-canvas { height: min(160px, 43vw); } /* ── 7. Stats bar ───────────────────────────────────────────── */ .stats-bar { padding: 3.5rem 0; } .stats-grid { gap: 2rem 1.5rem; } .stat-value { font-size: clamp(1.6rem, 7vw, 2.2rem); margin-bottom: 0.4rem; } .stat-label { font-size: 0.65rem; line-height: 1.5; } /* ── 8. Threat / problem boxes ───────────────────────────────── */ .threat-grid { gap: 1.5rem; } .threat-box-header { padding: 0.5rem 1.25rem; } .threat-stat { font-size: clamp(2.8rem, 13vw, 4.5rem); padding: 1.25rem 1.25rem 0.15rem; } .threat-subheader { padding: 0.15rem 1.25rem 1rem; font-size: 0.56rem; } .threat-divider { margin: 0 1.25rem 1rem; } .threat-body { line-height: 1.7; padding: 0 1.25rem 1.5rem; } /* ── 9. Services ─────────────────────────────────────────────── */ .service-col { padding: 2rem 1.5rem; } .service-col-header { margin-bottom: 1.25rem; padding-bottom: 0.875rem; } .service-list { gap: 0.75rem; } .service-list li { line-height: 1.6; } /* ── 10. Tiers ──────────────────────────────────────────────── */ .tiers-group { margin-bottom: 3.5rem; } .tiers-group-label { margin-bottom: 1.25rem; } .tiers-grid { gap: 1.25rem; } .tier-card { padding: 1.75rem 1.5rem; } .tier-badge { margin-bottom: 0.875rem; } .tier-name { margin-bottom: 0.5rem; } /* ── 11. Case studies ────────────────────────────────────────── */ .cases-grid { gap: 1.75rem; } .case-card { padding: 1.75rem; } .case-op { margin-bottom: 0.375rem; } /* ── 12. Closing section ─────────────────────────────────────── */ .closing-title { font-size: clamp(1.7rem, 7vw, 2.6rem); margin-bottom: 2rem; line-height: 1.2; } .closing-label { margin-bottom: 1.5rem; } .closing-rule { margin: 0 auto 2rem; } /* ── 13. Contact form ────────────────────────────────────────── */ .contact-form { margin-top: 2rem; } .form-group { margin-bottom: 1.25rem; } /* ── 14. Buttons ─────────────────────────────────────────────── */ .btn { min-height: 56px; } /* ── 15. Pillar cards (Who We Are) ──────────────────────────── */ .pillar { padding: 1.75rem 1.5rem; } .pillar-title { margin: 0.75rem 0 0.5rem; } /* ── 16. Partner logos ──────────────────────────────────────── */ .partner-logos { margin-top: 2.5rem; } /* ── 17. Footer ──────────────────────────────────────────────── */ .footer { padding: 3.5rem 0 calc(2.5rem + env(safe-area-inset-bottom)); } .footer-inner { gap: 2rem; } /* Wrap links so they don't overflow on tiny screens */ .footer-links { flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.25rem; } /* Links: minimum 44px tap target height */ .footer-link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.25rem; } .footer-copy { line-height: 1.65; text-align: center; } /* ── 18. Reaper section (home page CTA block) ────────────────── */ .reaper-intro { padding-top: 1.5rem; padding-bottom: 1.5rem; } .reaper-tagline { margin-bottom: 1.5rem; line-height: 1.5; } .reaper-tiers { flex-direction: column; gap: 1.5rem; } .reaper-tier { padding: 1.75rem; } .reaper-feature-list { gap: 0.75rem; } /* ── 19. Sub-page hero spacing ──────────────────────────────── */ .page-hero { padding-top: 6.5rem; padding-bottom: 3rem; } /* ── 20. Reaper section title on home page ──────────────────── */ .reaper-title { margin-bottom: 1rem; line-height: 1.1; } } /* ══════════════════════════════════════════════════════════════════ MOBILE REFINEMENT PASS — overlay cleanup, layering, splash layout Scope: max-width 767px only. No desktop impact. ══════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* ── A. Background atmosphere: quieter on mobile ───────────────── Fixed overlays compete with foreground copy on small screens. Reduce opacity and disable expensive sweeping animations. */ /* Film grain: kill the animation entirely on mobile — constant repaint is the single biggest source of jank on older phones. Static low-alpha grain keeps the texture without the per-frame cost. */ .bg-noise { opacity: 0.06; animation: none !important; } /* Grid lines: halve opacity + enforce minimum cell floor for narrow screens */ .bg-grid { background-image: linear-gradient(rgba(0, 0, 0, 0.065) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.065) 1px, transparent 1px); /* At narrow viewports the clamp hits its 30px floor — reinforce it here */ background-size: clamp(30px, 9vw, 44px) clamp(30px, 9vw, 44px); } /* Scanning sweeps: distracting + GPU-intensive on mobile — remove */ .bg-scan, .bg-scan-line { display: none; } /* Three.js globe: very faint on mobile so sections are always legible */ .hero-canvas { opacity: 0.18; } /* Glyph particles: too small to read at mobile scale, add visual noise */ .glyph-particles { display: none; } /* Hero bracket SVG: reduce so it doesn't dominate on narrow screens */ .hero-net-svg { opacity: 0.35; } /* Vignette: removed on mobile */ .vignette-border { box-shadow: none; } /* ── B. Section backgrounds: solid, no backdrop-filter ────────── backdrop-filter: blur() is expensive on mobile Safari and can cause scroll glitches when combined with sticky elements. Near-solid backgrounds preserve the tonal identity. */ #about, #how-we-operate, #services, #tiers, #cases, .reaper-section, .closing-section, #contact { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Restore distinct section tones — kept near-original hue, near-solid alpha */ #about, #tiers { background: rgba(183, 197, 186, 0.98) !important; } #services, #cases, #how-we-operate, .reaper-section { background: rgba(197, 207, 202, 0.98) !important; } .closing-section { background: rgba(174, 187, 178, 0.98) !important; } #contact { background: rgba(170, 183, 174, 0.98) !important; } /* Orbital section: NO vertical margin on mobile per user spec. The previous 3rem top + 3rem bottom margins produced a visible blank gap before/after the orbital — combined with the sticky canvas inside, the section read as "skipping" past empty space. Adjacent sections (#problem above, #how-we-operate below) carry their own padding which is enough breathing room. */ .ab-orbital-wrap { margin-top: 0 !important; margin-bottom: 0 !important; } /* Panel: raise it higher so the bottom edge of the panel has more clearance from the viewport edge — less cramped against the chrome. */ .ab-orbital-panels { bottom: 5rem !important; } /* ── C. Stacking: explicit z-index prevents orbital overlap ────── The orbital section (ab-orbital-wrap) sits at z-index 4. Sections that follow it in DOM order naturally paint above it, but explicit z-index 5 avoids any sticky-scroll artifact on iOS. */ #about, #how-we-operate, #services, #tiers, #cases, .reaper-section, .closing-section, #contact, .footer { position: relative; z-index: 5; isolation: isolate; } /* Orbital canvas: keep it visibly present on mobile so users feel the interactive rings update as they scroll / tap. Card still reads clearly because it sits at ~0.93 alpha below the ring area — rings are only partly hidden. Full canvas opacity gives the active ring enough contrast to read; the card's translucent sage fill preserves the connection between the orbital and the copy. */ #orbital-canvas { opacity: 0.9; } /* Nav: fully opaque + GPU-composited on mobile. The root causes of "bleed-through" on mobile were: (1) iOS Safari's async fixed-positioning during momentum scroll, where content can briefly paint through a fixed element. (2) Notch / safe-area: the nav didn't extend into the safe-area inset, leaving a strip of page content visible above it. (3) backdrop-filter: any value (even blur(0)) can break on some mobile browsers and show partial transparency. Fix: solid rgb(), no backdrop-filter, own compositing layer, and explicit padding into env(safe-area-inset-top). */ /* Telegram WebView header fix — GPU-compositing approach. The previous version used a body::before sentinel + nav::before backing-layer pseudo-element. Telegram's WebView paints pseudo- elements inconsistently during rubber-band scroll, so they were part of the problem rather than the fix. Now the nav is forced into its own independent compositing layer via translate3d + backface-visibility, with NO pseudo-element backing layer. */ .nav { background: rgb(200, 212, 196) !important; border-bottom: 1px solid rgba(143, 168, 138, 0.45) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding-top: calc(0.75rem + env(safe-area-inset-top)) !important; padding-bottom: 0.75rem !important; margin-top: calc(-1 * env(safe-area-inset-top)); /* GPU-promoted independent compositing layer — translate3d (not translateZ) is the canonical incantation Telegram WebView responds to. Combined with backface-visibility:hidden the nav paints in its own framebuffer and cannot share pixels with scrolling content. `contain` removed: it can interact poorly with fixed elements on some WebViews. */ transform: translate3d(0, 0, 0) !important; -webkit-transform: translate3d(0, 0, 0) !important; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; isolation: isolate; z-index: 999999 !important; } /* iOS Safari / Telegram WebView (uses iOS WebKit) — re-assert the translate3d at the @supports level so any later cascade rule can't accidentally drop it. The @supports test is iOS-specific. */ @supports (-webkit-touch-callout: none) { .nav { transform: translate3d(0, 0, 0) !important; -webkit-transform: translate3d(0, 0, 0) !important; } } /* Scrolled state: keep fully opaque — no blur, no transparency */ .nav.scrolled { background: rgb(196, 209, 191) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Orbital sticky: promote to GPU layer — eliminates iOS sticky-scroll jitter */ .ab-orbital-sticky { -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; } /* ── D. Structural: map = true full-screen background, text on top ── Composition shifted up: less dead space at the top. Map drawn in the upper third (via splash.js topY=16%), headline overlays it, CTA sits lower in the middle band, head fills the lower band. */ #splash-map { position: absolute; top: 0; left: 0; width: 100vw !important; height: 100vh !important; height: 100dvh !important; z-index: 1; /* above paper/grid texture underlay */ /* Sharper map — readable, not washed out. */ filter: blur(0.3px); } /* Paper/grid underlay — matches the subtle technical texture used elsewhere on the site so the splash feels consistent. Sits BEHIND the map canvas at z-0. */ #splash::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: #c8d4c4; background-image: linear-gradient(rgba(77, 97, 72, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(77, 97, 72, 0.07) 1px, transparent 1px), radial-gradient(ellipse at 18% 12%, rgba(77, 97, 72, 0.05) 0%, transparent 55%), radial-gradient(ellipse at 82% 88%, rgba(77, 97, 72, 0.04) 0%, transparent 55%); background-size: 36px 36px, 36px 36px, auto, auto; background-position: 0 0, 0 0, 0 0, 0 0; opacity: 0.85; } .splash-content { position: absolute; inset: 0; width: auto; max-width: none; padding: 0 1.5rem; display: flex; flex-direction: column; align-items: center; /* Anchor content to the upper third so it overlays the map, instead of being vertically centred in the whole viewport. Removes dead space above the headline. */ justify-content: flex-start; padding-top: calc(16% + 1.5rem); text-align: center; z-index: 20; transform: none; pointer-events: auto; } /* Decrypt headline: original scale + line-height, no colour overrides. Dark scramble / reveal chars (from base CSS) read cleanly against the light map background. Text-shadow adds just enough contrast at ring intersections without washing anything out. */ .splash-text { font-size: clamp(1.55rem, 6.9vw, 2.4rem); min-height: 0; line-height: 1.16; letter-spacing: 0.015em; text-align: center; } /* Eyebrow line */ .splash-pre { font-size: 0.57rem; letter-spacing: 0.22em; margin-bottom: 0.75rem; opacity: 0.68; } /* Thin rules — centered */ .splash-rule { width: 32px; margin: 0.75rem auto; } /* Op row (holds ACTIVATE GROOM LAKE): larger gap above so the CTA sits clearly below the headline with visual breathing room. */ .splash-op-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; margin-top: 3rem; } .splash-redacted { font-size: 0.5rem; opacity: 0.65; padding-right: 0; } /* Activate button: clear tap target */ .splash-btn { font-size: 0.57rem; padding: 0.5rem 1rem; } /* Bottom classification stamp: smaller and cleared of the head canvas */ .splash-bottom-stamp { bottom: 0.75rem; font-size: 0.48rem; letter-spacing: 0.14em; } /* ── Advisory (Asa Hutchinson) section: smooth dark→light transition. The desktop border-top + 0.45α background creates a visible tone "edge" at the section boundary; on mobile scroll this reads as a flicker between the preceding darker section and this one. Solidify the background to the surrounding page tone and drop the hard border so the transition is a smooth continuation, not a step. */ .ab-advisory { background: var(--bg-primary) !important; border-top: none !important; border-bottom: none !important; box-shadow: none !important; } /* Soften the portrait hover → filter transition: on mobile first tap latches :hover, can cause abrupt grayscale→color brightness jump. */ .ab-advisory-portrait { transition: filter 0.8s ease !important; } .ab-advisory-portrait-frame:hover .ab-advisory-portrait { filter: grayscale(40%) contrast(1.05) !important; } /* ── About hero on mobile ────────────────────────────────────────── Desktop min-height: 100vh creates a large empty gap below the "Scroll to enter dossier" cue on mobile (viewport is tall, content is short). Drop to min-height: auto + moderate padding so the next section (Credentials) sits immediately below the hero with no dead space. */ .ab-hero { min-height: auto !important; padding-bottom: 2rem; } /* "SCROLL TO ENTER DOSSIER" cue — darker / more legible on mobile */ .ab-hero-scroll { color: rgba(17, 26, 17, 0.85) !important; font-weight: 600; font-size: 0.60rem; letter-spacing: 0.22em; margin-top: 1.25rem; } .ab-hero-scroll svg { stroke-width: 1.8; } /* Credentials (next section): tighten top padding so it connects visually to the hero on mobile — no dead space before About content. */ .ab-credentials { padding-top: 2rem !important; } } /* ══════════════════════════════════════════════════════════════════ QA PASS — targeted fixes for layout, typography, and component polish ══════════════════════════════════════════════════════════════════ */ /* ── Problem section statement: give "THE INDUSTRY REMAINS UNPREPARED" the visual weight of a heading rather than body copy ── */ #problem .section-desc strong { display: block; font-size: clamp(1.1rem, 2.8vw, 1.6rem); font-weight: 700; color: #0f0f0f; letter-spacing: 0.04em; line-height: 1.2; } /* ── About doctrine cards: at very narrow viewports the long headline "YOU DON'T KNOW WHAT YOU DON'T KNOW." wraps to 4+ lines. Reduce size slightly so cards stay visually balanced. ── */ @media (max-width: 480px) { .ab-philo-headline { font-size: clamp(1.1rem, 5.5vw, 1.45rem); line-height: 1.15; } } /* ── Footer: ensure consistent link color across all pages (removes any rogue inline-style overrides by boosting specificity) ── */ .footer .footer-link { color: var(--text-muted); } /* ── Nav: at the smallest tablet width (768px) reduce link gap to prevent nav items crowding against the logo ── */ @media (min-width: 768px) and (max-width: 860px) { .nav-links { gap: 1.5rem; } .nav-link { font-size: 0.65rem; } } /* ── Stats grid: 2-col stays tight at 320px — add a small bottom gap so the four stats breathe evenly at the narrowest widths ── */ @media (max-width: 374px) { .stats-grid { gap: 1.75rem 1rem; } .stat-value { font-size: clamp(1.4rem, 10vw, 1.8rem); } } /* ══════════════════════════════════════════════════════════════════ MOBILE CLEANUP — general breathing room pass Scope: max-width 767px. Adds vertical gap between stacked elements that feel bunched on narrow screens. ══════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* Section headings: add bottom margin so copy doesn't run straight into cards */ .section-header { margin-bottom: 2rem; } /* Cards, panels: extra bottom spacing on mobile stack */ .reaper-tier, .tier-card, .threat-box, .case-card { margin-bottom: 1rem; } /* Services grid: ensure gap between stacked columns */ .services-grid { gap: 2rem; } /* Tiers groups: separate the two group labels from their cards */ .tiers-group { margin-bottom: 2.5rem; } /* Intel case files — mobile log phase label: keep it readable */ .icf-file-name { font-size: clamp(0.95rem, 4.5vw, 1.15rem); } /* Intel case files — toggle hover: disable the bleed-out width on all mobile (the 640px responsive block already handles this, belt-and-suspenders) */ .icf-case-toggle:hover { margin: 0; padding-left: 0; padding-right: 0; width: 100%; } /* Problem section threat boxes: stack cleanly with breathing room */ .threat-grid { gap: 1.25rem; } /* How we operate / partner logo section */ .partner-logo-grid { gap: 1rem; } } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE SYSTEMS AUDIT — comprehensive fix pass Covers: 320px–1440px, all required breakpoints, cross-device parity ══════════════════════════════════════════════════════════════════ */ /* ── A. SECTION PADDING — fix cascade priority ────────────────────── The ≤767px UX overhaul block (line ~9056) sets --section-padding to clamp(5rem, 14vw, 7.5rem). Because it comes after the ≤480px rule, it wins at 320–480px: 5rem = 80px per side is far too heavy for a phone. These rules come AFTER the 767px block and restore tighter padding. */ @media (max-width: 480px) { :root { --section-padding: clamp(2.5rem, 8vw, 4rem); } } @media (max-width: 374px) { :root { --section-padding: clamp(2rem, 7vw, 3.5rem); } } /* ── B. SERVICES GRID — 2-col intermediate at 640–767px ───────────── Without this the grid jumps directly 1→3 col at 768px, which on a tablet at landscape (768px) puts three narrow service columns that feel cramped on its tightest edge. A 2-col step provides breathing room. */ @media (min-width: 640px) and (max-width: 767px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } /* ── C. CASES GRID — 2-col at 640–1023px ─────────────────────────── Base is 1-col; 3-col activates at ≥1024px. No intermediate exists. At 640–1023px a 2-col layout keeps case cards at a legible width. */ @media (min-width: 640px) and (max-width: 1023px) { .cases-grid { grid-template-columns: repeat(2, 1fr); } } /* ── D. CONTACT PANEL — 1-col grid at very small phones ───────────── .cp-panel is 93vw at ≤600px. At 320px that is ~298px wide. With horizontal padding (~48px) the inner area is ~250px — too narrow for two grid columns. Drop to single column inside the panel at ≤400px. */ @media (max-width: 400px) { .cp-panel .cp-area-grid { grid-template-columns: 1fr !important; } } /* ── E. REAPER TIERS — clean up dead flex-direction on grid ───────── The ≤767px mobile pass applied flex-direction: column to a display:grid container (no-op for grid). Ensure 1-col layout and correct gap explicitly. */ @media (max-width: 639px) { .reaper-tiers { display: grid; grid-template-columns: 1fr; gap: 1.25rem; background: transparent; } .reaper-tier { border: 1px solid var(--border); } } /* ── F. FSP HEADER — hide decorative meta column at ≤375px ───────── The vertical-label meta column (writing-mode labels) eats horizontal space at the narrowest viewports where it provides zero informational value. */ @media (max-width: 375px) { .fsp-header-meta { display: none; } .fsp-header { gap: 0; } } /* ── G. 320–360px TYPOGRAPHY FLOOR ───────────────────────────────── At extreme narrow widths, headings and stats need explicit minimums that account for the tighter gutter and font scaling. */ @media (max-width: 360px) { h2 { font-size: clamp(1.5rem, 8vw, 2rem); } h3 { font-size: clamp(1.1rem, 5.5vw, 1.4rem); } .hero-title { font-size: clamp(1.45rem, 8.5vw, 2rem); } .section-title { font-size: clamp(1.5rem, 8vw, 2rem); } /* Threat stats: tightest fit */ .threat-stat { font-size: clamp(2.2rem, 10.5vw, 3.2rem); padding: 1rem 1rem 0.1rem; } .threat-subheader { padding: 0.1rem 1rem 0.875rem; font-size: 0.52rem; } .threat-body { padding: 0 1rem 1.25rem; font-size: 0.68rem; } /* Closing headline */ .closing-title { font-size: clamp(1.35rem, 8vw, 1.9rem); letter-spacing: 0.005em; } /* Container: tightest gutter */ .container { padding-left: 0.875rem !important; padding-right: 0.875rem !important; } } /* ── H. STATS BAR — 320–374px breathing room ──────────────────────── 2×2 grid with consistent gap at the narrowest viewport. */ @media (max-width: 374px) { .stats-grid { gap: 1.5rem 0.875rem; } .stat-value { font-size: clamp(1.35rem, 10vw, 1.65rem); } } /* ── I. NAV LINKS — 820px intermediate ────────────────────────────── At 820px (common tablet landscape) the nav gap can feel tight. Tighten to 1.25rem so links and logo have comfortable clearance. */ @media (min-width: 768px) and (max-width: 820px) { .nav-links { gap: 1.25rem; } } /* ── J. ORBITAL PANEL — safe-area-inset-bottom ────────────────────── On notched phones (iPhone X–15, many Android) env(safe-area-inset-bottom) is 20–34px. The flat 5rem bottom can undercut it on landscape. Use max() to respect whichever is larger. */ @media (max-width: 767px) { .ab-orbital-panels { bottom: max(5rem, calc(2.5rem + env(safe-area-inset-bottom))) !important; } } /* ── K. MOBILE NAV PILL — safe-area-inset-bottom ──────────────────── The floating section navigator sits at bottom: 1.5rem. On notched devices this may overlap the home indicator bar. */ @media (max-width: 1100px) { .gl-mob-nav-btn { bottom: max(1.5rem, calc(0.75rem + env(safe-area-inset-bottom))); } } /* ── L. PARTNER LOGOS — 3-col floor at 414px ──────────────────────── At ≤768px the grid switches to repeat(3, 1fr). At 414px each column is (414 - 2×20px padding - 2×28px gap) / 3 ≈ 106px — within the max-width: 130px logo constraint. No change needed but tighten gap. */ @media (min-width: 375px) and (max-width: 480px) { .partner-logo-grid { gap: 1.25rem 1.5rem; } } /* ── M. TIERS GRID — consistent gap unit inside 2-col step ───────── At 540–767px the grid is 2-col with gap derived from background. Ensure gap doesn't collapse to 1px (the background colour shows through). */ @media (min-width: 540px) and (max-width: 767px) { .tiers-grid { gap: 1px; background: var(--border); } } /* ── N. HERO CTA — full-width at 374px and below ──────────────────── The ≤480px rule already stretches buttons. Extend down to 374px with explicit column stack so CTAs are clearly separated. */ @media (max-width: 374px) { .hero-cta { flex-direction: column; align-items: stretch; gap: 0.75rem; } .btn { width: 100%; justify-content: center; } } /* ── P. HERO FACE-WRAP — proportional scaling at 320px ────────────── At 320px, min(160px, 43vw) = min(160, 137.6) = 137.6px. Good. Reduce the top margin slightly so headline and face fit above the fold. */ @media (max-width: 360px) { .hero-face-wrap { width: min(130px, 40vw); margin-top: 2rem; } .face-canvas { height: min(130px, 40vw); } } /* ── Q. PAGE HERO TITLE — 320px floor ─────────────────────────────── clamp(1.75rem, 9vw, 2.5rem) at 320px → 9vw = 28.8px < 1.75rem (28px). Already fine; ensure no overflow on very long titles. */ @media (max-width: 360px) { .page-hero-title { font-size: clamp(1.5rem, 9vw, 2rem); word-break: break-word; } } /* ── R. ABOUT ADVISORY — 320px column collapse ────────────────────── Already stacks at ≤600px. Tighten portrait size at the smallest extreme. */ @media (max-width: 360px) { .ab-advisory-portrait-frame { width: 88px; height: 88px; } .ab-advisory-heading { font-size: clamp(1.5rem, 8vw, 2rem); } } /* ── S. BROWSER ZOOM — container floor ────────────────────────────── At 200% browser zoom on a 1440px screen the effective viewport is 720px. The responsive system already handles 768px. At 150% on 1024px the effective viewport is 682px — also covered. No special rules needed; confirm by cascading coverage from min-width: 640px. */ /* ── T. 1280px LAPTOP — nav link font ceiling ─────────────────────── Standard nav link at 1280px should be legible without straining. No size change needed; the existing 0.875rem scales well at 1280–1440. */ /* ── U. ORBITAL CANVAS — reduce height on landscape mobile ────────── In landscape mode the viewport is short (e.g., 667px tall on iPhone SE). The orbital section uses height: 100vh for the sticky container. Ensure the panel still clears the bottom chrome. */ @media (max-width: 900px) and (orientation: landscape) { .ab-orbital-wrap { height: 200vh; } .ab-orbital-panels { bottom: max(1.5rem, env(safe-area-inset-bottom)) !important; min-height: clamp(140px, 38vh, 240px) !important; } } /* ── V. FSP CARD MIN-HEIGHT — remove on mobile to prevent empty space */ @media (max-width: 767px) { .fsp-card { min-height: 0; } } /* ── W. CLOSING SECTION — safe bottom on notched phones ───────────── The footer has env(safe-area-inset-bottom) padding; ensure closing section above it doesn't need extra treatment. Already fine. */ /* ── X. FORM — iOS zoom prevention at ≤480px ──────────────────────── Already applied (font-size: 1rem). Extend to selects which were missed. */ @media (max-width: 480px) { .form-select { font-size: 1rem; } } /* ══════════════════════════════════════════════════════════════════ FINAL RESPONSIVE PRODUCTION-READINESS PASS Targets: long unbroken strings, tap targets, iOS zoom edge cases, horizontal-overflow prevention. No layout redesigns. Last-cascade so it overrides earlier looser rules at the same specificity. ══════════════════════════════════════════════════════════════════ */ /* ── Y. Long-string overflow — word-break for handles, hashes, IDs ── Mono-typed strings (DROP-001, GL-OP-0047, @0xGroomLake, file paths, bracket sequences) can refuse to break and force a horizontal scroll on narrow phones. Force them to wrap when no whitespace exists. */ @media (max-width: 600px) { .case-classification, .case-file-id, .icf-case-id, .intel-drop-id, .intel-modal-id, .ic-class-chip, .ic-method-tag, .fr-case-card-meta, .fr-archive-card-class, .fr-archive-card-loc, .fr-featured-ref, .cx-channel-link, .cx-ref, .cx-form-classification, .footer-copy { word-break: break-word; overflow-wrap: anywhere; } } /* ── Z. Tap target floor — interactive items in dense lists ────── Ensure any clickable link or button has ≥44px tap height on touch devices. .nav-logo intentionally excluded — its base rule is display:flex and the logo image height is already explicit; adding min-height/inline-flex here could conflict with the letterhead's own sizing. */ @media (hover: none) and (max-width: 767px) { .cx-channel-link, .footer-link, .nav-link, .mobile-menu-link { min-height: 44px; display: inline-flex; align-items: center; } } /* ── AA. iOS zoom prevention — extend to tablet widths ──────────── The .cx-input rule at ≤480px prevents iOS focus-zoom on phones. iPad Mini portrait (768) and small Android tablets fall through without it. 16px is the iOS-Safari floor below which a focus triggers a zoom. Apply on any touch-primary device regardless of pixel width via (pointer: coarse), AND keep an explicit ≤768 width gate so emulators that don't expose `pointer: coarse` in headless still get the floor. */ @media (max-width: 768px), (pointer: coarse) { .cx-input, .cx-textarea, .form-input, .form-select, .form-textarea, .contact-form input, .contact-form textarea { font-size: 16px; } } /* ── AB removed — `html { overflow-x: hidden }` breaks `position: sticky` on iOS in the orbital section. body already handles horizontal containment for every page; adding the same on created a new clip context that prevented the orbital sticky from staying pinned. Reverted. */ /* ── AC removed — the original rule img:not([data-no-shrink]) { max-width: 100%; height: auto; } added attribute-selector specificity that beat `.site-letterhead` and `.partner-logo` height rules on mobile, collapsing the nav logo to 0×0. The individual elements already cap their own widths, so the global safety net was unnecessary and harmful. */ /* ── AD. SVG safety — same pattern, decorative SVGs only ──────────── Inline SVGs with explicit width/height attributes can extend past their container on mobile. Constrain to container width. Excludes SVGs marked as fixed-size (icons inside buttons typically have `width="14"` etc. and their tap-target wrappers handle the rest). */ @media (max-width: 480px) { .footer-inner svg, .closing-section svg:not([width]) { max-width: 100%; } } /* ── AF. Reaper graph viewport — minimum height + overflow on phone ─ The reaper-login graph has fixed heights at ≥640px. Ensure the shell at narrow widths still has a sensible minimum and clips internal overflow rather than pushing the page wider. */ @media (max-width: 639px) { .rp-graph-shell, .rp-graph-viewport { width: 100%; max-width: 100%; overflow: hidden; } } /* ── AG. Sub-nav rails: scroll, never wrap into stacked rows ──────── Sticky layer bars (.cp-layer-bar) and similar horizontal navs need to scroll horizontally on narrow screens, not collapse to multiple rows. Already set on cp-layer-bar; extend the pattern as a safety. */ @media (max-width: 600px) { .cp-layer-bar, .cp-layer-btn { flex-shrink: 0; } } /* ══════════════════════════════════════════════════════════════════ MOBILE SPACING TIGHTEN — How We Operate + general dead-space pass Targets the gaps the user reported as "excessive" on phones. Desktop ≥768px untouched. ══════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* How We Operate timeline — was 4rem between items, too airy on phones. 2.25rem keeps clear vertical rhythm without dead space. */ .timeline-items { gap: 2.25rem; } .timeline { padding: 1.25rem 0; } .timeline-item:not(:last-child)::after { bottom: -2.25rem; } /* How We Operate section: reduce header-to-timeline + tail padding. */ #how-we-operate .section-header { margin-bottom: 1.75rem; } /* Stats bar / partner-logos: trim leading margin so the section's first row sits closer to the heading above. */ .partner-logos { margin-top: 1.75rem; } /* Hero subtitle margin trim — already covered elsewhere but reinforce so the head model doesn't sit miles below the headline on phones. */ .hero-subtitle { margin-bottom: 1.5rem; } } /* ══════════════════════════════════════════════════════════════════ Telegram WebView — parent stacking-context safety rule. If any ancestor of `.nav` had a transform / filter / backdrop-filter / perspective / contain, it would create a new stacking context that the browser couldn't promote `.nav` above — and Telegram WebView would render content through the fixed header. This rule guarantees none of the obvious candidates carry one of those properties on mobile. Sections deeper in the tree (e.g. `.ab-orbital-sticky`, `.hero-canvas`) are NOT matched here — they need their own GPU-promotion transforms. ══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { html, body, main, .wrapper, .page { transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; perspective: none !important; contain: none !important; } }