/* ============================================================================= Source Intelligence — light + yellow + holographic. Palette: • Warm cream paper background — soft, editorial, not pure white. • Warm-black ink for type. Sets a deliberate, lab-paper tone. • Sunshine yellow as the primary accent — eyebrows, primary button. • Prismatic gradient as the signature visual element — applied sparingly to the hero orb, headline emphasis spans, brand mark, and the contact email line. Holographic, not garish. ========================================================================= */ :root { /* Surfaces */ --paper: #faf7ee; --paper-pale: #f3eedf; --paper-edge: rgba(19, 18, 16, 0.10); /* Ink */ --ink: #131210; --ink-soft: #4a4640; --ink-faint: rgba(19, 18, 16, 0.45); /* Yellow accent */ --sun: #f5b800; --sun-glow: #ffd34d; --sun-pale: #fff3cc; /* Holographic palette — a smooth circular hue cycle. */ --prism: conic-gradient( from 200deg at 50% 50%, #ff9ec5 0%, #f5b800 18%, #b6f59c 34%, #7fd6f5 52%, #b09cf5 70%, #ff9ec5 88%, #ff9ec5 100% ); --prism-soft: linear-gradient( 100deg, #ffd6e5 0%, #fff0b5 22%, #d5f5c8 44%, #c5ecff 64%, #d9c8ff 84%, #ffd6e5 100% ); /* Typography */ --font-serif: "Fraunces", "Tiempos Headline", Georgia, serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace; --max-w: 78rem; --gutter: clamp(1.25rem, 4vw, 2.5rem); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background: var(--sun-glow); color: var(--ink); } a { color: inherit; text-decoration: none; transition: color 160ms ease, opacity 160ms ease, background 160ms ease; } /* --------------------------------------------------------------------------- Accessibility primitives. .skip-link: pulled offscreen until keyboard-focused, then materialises in the top-left corner so keyboard users can jump past the nav. :focus-visible: a single high-contrast outline ring around any keyboard- focused control. Mouse clicks don't show the outline (because :focus-visible only triggers for keyboard focus); keyboard users get a clear ring on every link, button, input, etc. prefers-reduced-motion: dialled down via the [data-reduced-motion=true] attribute the JS sets on . The genesis stage, prism animations, orbital rings, and spiral spin all key off that attribute. --------------------------------------------------------------------------- */ .skip-link { position: fixed; top: 12px; left: 12px; z-index: 9999; padding: 0.6rem 1rem; background: var(--ink); color: var(--paper); border-radius: 6px; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; transform: translateY(-200%); transition: transform 180ms ease; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: none; } :focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 4px; } /* Buttons + the CTA already have radius; give them a tighter ring. */ .btn:focus-visible, .nav-cta:focus-visible { outline-color: var(--ink); outline-offset: 3px; } /* The brand-mark in nav uses a custom prismatic disc; the default ring reads cleanly on top. */ .nav-brand:focus-visible { outline-offset: 4px; } /* Inputs: replace the outline with a glow that matches the existing focus treatment on the alpha form. */ input:focus-visible { outline: none; border-color: var(--sun); box-shadow: 0 0 0 4px rgba(245, 184, 0, 0.18); } /* Reduced motion — pause every infinite animation across the page. CSS-driven animations stop; the JS-driven sacred-geometry loop is also paused via the same flag (see main.js → applyMotion). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } [data-reduced-motion="true"] *, [data-reduced-motion="true"] *::before, [data-reduced-motion="true"] *::after { animation-play-state: paused !important; } /* Fallback for background-clip:text — older Safari (<14) and very old Firefox don't paint the prism gradient through the text. In those cases the holographic-text simply renders as a solid ink colour instead of invisible. */ @supports not (-webkit-background-clip: text) { .holographic-text { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; } } /* --------------------------------------------------------------------------- HOLOGRAPHIC primitives — text + mark. .holographic-text: applies the prismatic conic gradient to the text fill itself via background-clip. The gradient slowly rotates, so the colour sweeps across the letters like real holographic foil. --------------------------------------------------------------------------- */ .holographic-text { background: var(--prism); background-size: 200% 200%; /* Start at 200% (the right edge of the gradient image) and animate toward 0% — this makes the colour pattern visibly move left to right across the text, matching Western reading direction. */ background-position: 200% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: prism-shift 11s linear infinite; font-style: italic; } @keyframes prism-shift { from { background-position: 200% 50%; } to { background-position: 0% 50%; } } .holographic-mark { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--prism); box-shadow: 0 0 14px rgba(245, 184, 0, 0.35); animation: mark-spin 8s linear infinite; } @keyframes mark-spin { to { transform: rotate(360deg); } } /* Brand symbol image — the interference Seed-of-Life mark. Replaces the legacy spinning prism dot in the nav + footer brand lockups. Source art is ~423px, so it stays crisp on retina when shown small here. */ .nav-mark-img { display: inline-block; flex: none; width: 2rem; height: 2rem; object-fit: contain; } .foot-brand .nav-mark-img { width: 2.25rem; height: 2.25rem; } /* Brand wordmark image — "Source Intelligence" in the logo lettering (the vortex/circuit style), replacing the old plain text. Master art is 440px so it stays crisp small. width:auto preserves the aspect ratio from height. */ .nav-wordmark { display: inline-block; height: 1.15rem; width: auto; } .foot-brand .nav-wordmark { height: 1.35rem; } /* Combined logo lockup (symbol + wordmark as one artwork — the "S" tucked against the symbol). Used in the nav + footer brand. The symbol art is much taller than the text, so it needs a generous height to keep the words legible. */ .nav-logo { display: block; height: 2.7rem; width: auto; } .foot-brand .nav-logo { height: 3.4rem; } /* --------------------------------------------------------------------------- NAV — slim, sticky, paper-colored when scrolled. --------------------------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 1.15rem var(--gutter); background: rgba(250, 247, 238, 0.55); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid transparent; transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .nav-scrolled { background: rgba(250, 247, 238, 0.92); border-bottom-color: var(--paper-edge); box-shadow: 0 6px 24px -16px rgba(19, 18, 16, 0.18); } .nav-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-sans); font-weight: 600; font-size: 0.98rem; letter-spacing: -0.005em; color: var(--ink); } /* Left cluster (brand + links) and right cluster (CTA + burger). The header itself is justify-content: space-between, so these sit at the two ends. */ .nav-left { display: inline-flex; align-items: center; gap: 2rem; } .nav-right { display: inline-flex; align-items: center; gap: 1rem; } .nav-links { display: inline-flex; align-items: center; gap: 1.4rem; font-size: 0.85rem; /* tighter, in line with major-lab navs (~13.5px) */ color: var(--ink-soft); } .nav-links a { font-weight: 500; position: relative; } .nav-links > a::after, .nav-dropdown-trigger::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--prism); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; } .nav-links a:hover { color: var(--ink); } .nav-links > a:hover::after, .nav-dropdown-wrap:hover .nav-dropdown-trigger::after { transform: scaleX(1); } /* --------------------------------------------------------------------------- Dropdown menu (Company → About Us / Careers). --------------------------------------------------------------------------- */ .nav-dropdown-wrap { position: relative; display: inline-flex; align-items: center; /* Extend the hover area downward into the gap between the trigger and the panel, so moving the cursor onto the panel never crosses a dead zone (which was making the menu close before you could reach the items). */ padding-bottom: 0.85rem; margin-bottom: -0.85rem; } /* The trigger inherits the link styling but gets a small chevron to signal the sub-menu. Padding-right makes room for the chevron without affecting the underline width. */ .nav-dropdown-trigger { display: inline-flex; align-items: center; gap: 0.3rem; } .nav-dropdown-trigger::before { content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: 0.6; transition: transform 220ms ease, opacity 220ms ease; order: 2; /* place chevron AFTER the text */ } .nav-dropdown-wrap:hover .nav-dropdown-trigger::before { transform: rotate(225deg) translate(-2px, -2px); opacity: 1; } /* The panel itself. Hidden by default; revealed on hover / focus-within. Positioned just below the trigger with a soft elevated card look that matches the cream palette. */ .nav-dropdown { position: absolute; top: 100%; /* flush with the padded wrap → continuous hover area */ left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 11rem; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 10px; box-shadow: 0 14px 40px -10px rgba(19, 18, 16, 0.18), 0 4px 10px -4px rgba(19, 18, 16, 0.08); padding: 0.35rem 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; z-index: 5; } .nav-dropdown::before { /* Small arrow pointing up at the trigger; sits over the top border. */ content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; background: var(--paper); border-left: 1px solid var(--paper-edge); border-top: 1px solid var(--paper-edge); transform: translateX(-50%) rotate(45deg); } /* Direct-child links only (simple dropdowns: SI Platform, Resources, Company). Mega-panel items are styled by their own .mega-* rules so the two don't collide on specificity. */ .nav-dropdown > a { display: block; padding: 0.42rem 0.7rem; margin: 0 0.1rem; border-radius: 7px; color: var(--ink); font-size: 0.8rem; font-weight: 400; white-space: nowrap; transition: background 140ms ease, color 140ms ease; } .nav-dropdown > a::after { display: none; } /* no prism underline in the panel */ /* Hover highlight — soft warm fill only. The text colour stays put (changing the name colour on hover read as glitchy). */ .nav-dropdown > a:hover, .mega-grid a:hover, .mega-cols a:hover { background: rgba(245, 184, 0, 0.10); color: var(--ink); } /* SI Platform external links — ↗ marker (opens in a new tab). */ .nav-dropdown > a.ext { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .nav-dropdown > a.ext::before { content: "↗"; order: 2; font-size: 0.85rem; color: var(--ink-faint); transition: color 140ms ease, transform 140ms ease; } .nav-dropdown > a.ext:hover::before { color: #8a6900; transform: translate(1px, -1px); } /* Reveal on hover OR keyboard focus within the wrap. focus-within ensures tab navigation works. */ .nav-dropdown-wrap:hover .nav-dropdown, .nav-dropdown-wrap:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity 180ms ease, transform 180ms ease, visibility 0s; } /* --------------------------------------------------------------------------- MEGA PANELS — wider dropdowns for Products (name + descriptor grid) and Solutions (two-column name list). Share the reveal mechanism above. --------------------------------------------------------------------------- */ .nav-mega { padding: 0.9rem; min-width: 34rem; max-width: calc(100vw - 2rem); } .nav-mega--cols { min-width: 22rem; } .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem; } .mega-grid a { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.7rem; border-radius: 7px; white-space: normal; /* descriptions wrap */ } .mega-name { font-family: var(--font-sans); font-weight: 500; font-size: 0.84rem; color: var(--ink); } .mega-desc { font-family: var(--font-sans); font-weight: 400; font-size: 0.74rem; line-height: 1.3; color: var(--ink-soft); } .mega-foot { display: flex; gap: 0.6rem; margin-top: 0.6rem; padding: 0.8rem 0.3rem 0.2rem; border-top: 1px solid var(--paper-edge); } /* Rectangular action buttons (vs the pill CTA up in the bar). Compact — roughly half the previous height. */ .mega-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0.32rem 0.7rem; border-radius: 5px; font-family: var(--font-sans); font-size: 0.74rem; font-weight: 500; white-space: nowrap; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; } .mega-btn--quiet { border: 1px solid var(--paper-edge); color: var(--ink); background: transparent; } .mega-btn--quiet:hover { border-color: var(--ink); background: transparent; } .mega-btn--primary { background: var(--sun); color: var(--ink); } .mega-btn--primary:hover { background: var(--sun-glow); } .mega-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0.05rem 0.4rem; } .mega-cols a { display: block; padding: 0.42rem 0.7rem; border-radius: 7px; font-size: 0.8rem; font-weight: 400; color: var(--ink); transition: background 140ms ease, color 140ms ease; } /* Join Alpha — primary CTA pill. Sun-yellow with a soft glow; lifts on hover. Sits right of the link group, visually weighted to read as the page's primary action. */ .nav-cta { display: inline-flex; align-items: center; padding: 0.5rem 1.05rem; font-family: var(--font-sans); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.005em; color: var(--ink); background: var(--sun); border-radius: 999px; box-shadow: 0 4px 14px rgba(245, 184, 0, 0.28); transition: background 160ms ease, transform 140ms ease, box-shadow 200ms ease; } .nav-cta:hover { background: var(--sun-glow); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(245, 184, 0, 0.40); color: var(--ink); } /* --------------------------------------------------------------------------- THESIS / HERO — shared split layout. Text left, holographic orb right. The .thesis section is the page's first content block (problem framing); .hero is kept as an alias in case content ever needs both treatments. --------------------------------------------------------------------------- */ .hero, .thesis { position: relative; max-width: var(--max-w); margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) var(--gutter) clamp(4rem, 7vw, 6rem); display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .hero-text, .thesis-text { max-width: 38rem; } /* Thesis-specific typography: same scale as the old hero h1. */ .thesis-title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.9rem, 4.3vw, 3.4rem); line-height: 1.04; letter-spacing: -0.022em; color: var(--ink); } .thesis-body { margin-top: 1.4rem; max-width: 44ch; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); } .thesis-body + .thesis-body { margin-top: 1rem; } .thesis-text .hero-actions { margin-top: 2rem; } .eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.7rem; } .eyebrow::before { content: ""; display: inline-block; width: 1.4rem; height: 2px; background: var(--prism); border-radius: 1px; } .hero-title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.1rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.022em; color: var(--ink); } .hero-lede { margin-top: 1.7rem; max-width: 44ch; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); } /* --------------------------------------------------------------------------- BRAND INTRO — the new opening section above the hero. Tall, centered, quiet. A brand overture before the research-focused hero kicks in. --------------------------------------------------------------------------- */ .brand-intro { min-height: clamp(560px, 88vh, 880px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(5rem, 10vw, 8rem) var(--gutter) clamp(3rem, 6vw, 5rem); text-align: center; position: relative; overflow: hidden; } .brand-eyebrow { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 2rem; display: inline-flex; align-items: center; gap: 0.7rem; } .brand-eyebrow::before, .brand-eyebrow::after { content: ""; display: inline-block; width: 1.4rem; height: 2px; background: var(--prism); border-radius: 1px; } .brand-name { font-family: var(--font-serif); font-weight: 300; font-size: clamp(3rem, 10vw, 8.2rem); line-height: 0.96; letter-spacing: -0.035em; color: var(--ink); max-width: 14ch; } .brand-tagline { margin-top: 1rem; font-family: var(--font-serif); /* `.holographic-text` already applies italic + prism fill. */ font-weight: 400; font-size: clamp(1.6rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -0.018em; } .brand-rule { margin-top: 3rem; width: clamp(120px, 18vw, 220px); height: 1px; background: var(--prism); background-size: 200% 100%; animation: prism-shift 14s linear infinite; opacity: 0.8; } .brand-scroll { margin-top: 3rem; display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .brand-scroll:hover { color: var(--ink); } .brand-scroll-arrow { display: inline-block; animation: scroll-bob 1.8s ease-in-out infinite; } @keyframes scroll-bob { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(4px); opacity: 1; } } .hero-actions { margin-top: 2.2rem; display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; padding: 0.75rem 1.25rem; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; border: 1px solid transparent; border-radius: 999px; transition: transform 140ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 200ms ease; } .btn-primary { background: var(--sun); color: var(--ink); box-shadow: 0 6px 20px rgba(245, 184, 0, 0.30); } .btn-primary:hover { background: var(--sun-glow); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(245, 184, 0, 0.42); } .btn-quiet { color: var(--ink); border-color: var(--paper-edge); background: transparent; } .btn-quiet:hover { border-color: var(--ink); background: rgba(19, 18, 16, 0.04); } /* --------------------------------------------------------------------------- SACRED-GEOMETRY STAGE — sequenced genesis. Architecture: • All elements start at opacity 0 (their default). • js/main.js adds phase classes (.is-dot1, .is-dot2, …) at scheduled times. Each class triggers a forwards-filled CSS animation on its targets, leaving them in their final visible state. • On reset, the JS removes all phase classes; without the animation rule, every element reverts to opacity 0 and the cycle restarts. --------------------------------------------------------------------------- */ .sacred-stage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; max-width: clamp(280px, 36vw, 460px); margin: 0 auto; min-height: clamp(280px, 36vw, 460px); } .sacred-stage .genesis { width: 100%; height: 100%; overflow: visible; transition: opacity 0.9s ease; } /* During the reset window the JS adds .is-reset and the whole SVG fades out. */ .sacred-stage.is-reset .genesis { opacity: 0; } /* ----- Element defaults: everything starts hidden ----- */ .genesis .dot, .genesis .rotator-line, .genesis .trace-circle, .genesis .spiral-path { opacity: 0; } .genesis .dot { /* Simple dark dots, no decorative ring. The yellow halo was visually loud and read as "floating yellow markers" rather than as the two creation points of the genesis sequence. */ fill: var(--ink); stroke: none; transform-box: view-box; transform-origin: 0 0; } /* Both dots are declared at their FINAL positions ((100,150) and (200,150)). No default transform — the initial "centred" positions are set by the 0% keyframes of dot1-appear / dot2-spread. Avoiding a default transform here is critical: when is-dotsfade kicks in, the dot-fade-out animation only touches opacity, so the transform property reverts to whatever the cascade says. If the cascade had `translate(±50)` here, the dots would visibly SNAP back to the centre during their fade — exactly the "jump" bug. With no default, the cascade is `none` (identity), and the dots stay at their declared (100,150)/(200,150) positions through the fade. */ /* Compass-arm: golden, the line that rotates around each circle's centre. linecap: butt (square ends) — rounded ends would render as tiny moving discs at the line tips, which read as floating yellow dots. */ .genesis .rotator-line { stroke: rgba(245, 184, 0, 0.92); stroke-width: 1; stroke-linecap: butt; } /* The connecting line spans (100,150)→(200,150). It begins at scaleX(0) pivoted on its midpoint (150,150), so it's collapsed to a point at the centre. During emergence it stretches outward symmetrically — its end- points follow the two dots exactly because they're all moving from the same centre point at the same rate. */ .genesis .line-connect { stroke: rgba(139, 108, 255, 0.9); transform-box: view-box; transform-origin: 150px 150px; transform: scaleX(0); } .genesis .trace-circle { fill: none; stroke: rgba(139, 108, 255, 0.65); stroke-width: 0.7; stroke-linecap: round; /* 2π · r = 2π · 50 ≈ 314.16 — used for the "drawing" stroke animation. */ stroke-dasharray: 314.16; stroke-dashoffset: 314.16; } .genesis .spiral-path { /* --len + stroke-dasharray set by JS once the path is generated. transform-origin lives in SVG user units (matched to the spiral's centre, which is the centre of the viewBox) so the continuous rotation below pivots cleanly around the lattice centre. */ transform-box: view-box; transform-origin: 150px 150px; } /* Every rotator pivots at its own circle's centre. --ox / --oy are set inline per rotator. transform-box:view-box lets transform-origin live in SVG user units. */ .genesis .rotator { transform-box: view-box; transform-origin: var(--ox, 150px) var(--oy, 150px); } /* ===== PHASE ANIMATIONS — added by .is-PHASE on the .sacred-stage ===== */ /* Phase: dot1 — the first point appears at the centre. Because dot-1's default transform is translate(50,0), it renders at (150,150). */ .sacred-stage.is-dot1 .dot-1 { animation: dot1-appear 0.7s ease-out forwards; } /* Phase: dot2 — dot-2 appears at the same central point as dot-1 (it shares the centre via its translate(-50,0) default). Then BOTH dots slide apart symmetrically, and the connecting line stretches outward from the centre. All three animations share duration + easing so the line's endpoints stay glued to the dots. */ .sacred-stage.is-dot2 .dot-1 { animation: dot1-spread 1.1s ease-out forwards; } .sacred-stage.is-dot2 .dot-2 { animation: dot2-spread 1.1s ease-out forwards; } .sacred-stage.is-dot2 .line-connect { animation: line-stretch 1.1s ease-out forwards; } /* Phase: dotsfade — both dots fade out gracefully so they don't linger for the rest of the cycle. The CSS rule's animation property overrides the earlier fade-in rule because this selector appears later in source order (same specificity → document order decides). */ .sacred-stage.is-dotsfade .dot { animation: dot-fade-out 1.2s ease-out forwards; } /* Phase: circle1 — rotator-1 sweeps 360° around dot-1, dot-2 rides along, and the first circle's stroke is drawn at the same pace. */ .sacred-stage.is-circle1 .rotator-1 { animation: rotate-full 2.8s linear forwards; } .sacred-stage.is-circle1 .rotator-1 .line-connect { /* Line was already opacity 1 from the line phase — keep it that way through the rotation, then fade at the very end. */ animation: line-hold-fade 2.8s linear forwards; } .sacred-stage.is-circle1 .circle-1 { animation: fade-in 0.2s linear forwards, draw-stroke 2.8s linear forwards; } /* Phase: circle2 — its own rotator sweeps around dot-2; line fades in fresh, holds through the rotation, fades out. */ .sacred-stage.is-circle2 .rotator-2 { animation: rotate-full 2.0s linear forwards; } .sacred-stage.is-circle2 .rotator-2 .rotator-line { animation: line-sweep 2.0s linear forwards; } .sacred-stage.is-circle2 .circle-2 { animation: fade-in 0.2s linear forwards, draw-stroke 2.0s linear forwards; } /* Phase: seed — five rotators sweep, staggered by --i. stagger 0.30s × 5 + sweep 1.4s ≈ 2.9s total. */ .sacred-stage.is-seed .rotator-seed { animation: rotate-full 1.4s linear forwards; animation-delay: calc(var(--i, 0) * 0.30s); } .sacred-stage.is-seed .rotator-seed .rotator-line { animation: line-sweep 1.4s linear forwards; animation-delay: calc(var(--i, 0) * 0.30s); } .sacred-stage.is-seed .seed-c { animation: fade-in 0.2s linear forwards, draw-stroke 1.4s linear forwards; animation-delay: calc(var(--i, 0) * 0.30s), calc(var(--i, 0) * 0.30s); } /* Phase: flower — twelve rotators sweep, tighter stagger. stagger 0.18s × 12 + sweep 1.1s ≈ 3.3s total. */ .sacred-stage.is-flower .rotator-flower { animation: rotate-full 1.1s linear forwards; animation-delay: calc(var(--i, 0) * 0.18s); } .sacred-stage.is-flower .rotator-flower .rotator-line { animation: line-sweep 1.1s linear forwards; animation-delay: calc(var(--i, 0) * 0.18s); } .sacred-stage.is-flower .flower-c { animation: fade-in 0.2s linear forwards, draw-stroke 1.1s linear forwards; animation-delay: calc(var(--i, 0) * 0.18s), calc(var(--i, 0) * 0.18s); } /* Phase: spiral — golden ratio spiral, many turns, meditative draw. Three stacked animations: 1) fade-in — opacity 0 → 1 over 0.4s 2) draw-spiral — stroke-dashoffset full → 0 over 6s 3) spiral-spin — once the spiral is fully drawn (delay 6s), rotate around the lattice centre continuously for the rest of the cycle. ~45s/turn keeps the motion meditative rather than dizzying. The spin persists through all subsequent Platonic-solid phases because .is-spiral stays on .sacred-stage until the reset, so the rule (and its infinite animation) remain in effect the whole way. */ .sacred-stage.is-spiral .spiral-path { /* The continuous rotation is no longer a CSS animation — it's driven from the rAF loop in main.js so it stays in sync with the per-frame Platonic-solid work. Previously CSS transform on an SVG path with transform-box: view-box wasn't always GPU-composited, which meant the rotation ran on the main thread and stuttered exactly when the solids' per-frame attribute writes were heaviest (the last shapes). */ animation: fade-in 0.4s linear 0s forwards, draw-spiral 6s ease-in-out 0s forwards; } /* ===== KEYFRAMES ===== */ @keyframes fade-in { to { opacity: 1; } } @keyframes rotate-full { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes draw-stroke { to { stroke-dashoffset: 0; } } @keyframes draw-spiral { from { stroke-dashoffset: var(--len, 2000); } to { stroke-dashoffset: 0; } } /* line-hold-fade: the connect-line stays at its full width (scaleX 1) through the rotation, then fades at the end. transform: scaleX(1) is explicit because this animation REPLACES the line-stretch rule when is-circle1 is added, and without restating it the line would snap back to scaleX(0) from the cascade default. */ @keyframes line-hold-fade { 0% { opacity: 1; transform: scaleX(1); } 86% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } } /* line-sweep: line is fresh — fade in at start, hold, fade out at end. */ @keyframes line-sweep { 0% { opacity: 0; } 12% { opacity: 0.92; } 82% { opacity: 0.92; } 100% { opacity: 0; } } /* dot1-appear: dot-1 fades in. It stays at translate(50,0) — i.e. visually at the flower centre (150,150) — because its declared position is (100,150). The +50 translate brings it to the centre. */ @keyframes dot1-appear { 0% { opacity: 0; transform: translate(50px, 0); } 100% { opacity: 1; transform: translate(50px, 0); } } /* dot1-spread: dot-1 slides FROM the centre (translate 50) outward to its declared position (translate 0 → cx=100). Opacity stays at 1 throughout — explicit in the keyframes so the forwards-fill doesn't accidentally let the cascade pull opacity back to 0. */ @keyframes dot1-spread { 0% { opacity: 1; transform: translate(50px, 0); } 20% { opacity: 1; transform: translate(50px, 0); } 100% { opacity: 1; transform: translate(0, 0); } } /* dot2-spread: mirror of dot1-spread. dot-2 fades in at the centre (translate -50, overlapping dot-1) in the first 20%, then slides to its declared position (translate 0 → cx=200). */ @keyframes dot2-spread { 0% { opacity: 0; transform: translate(-50px, 0); } 20% { opacity: 1; transform: translate(-50px, 0); } 100% { opacity: 1; transform: translate(0, 0); } } /* line-stretch: the connecting line is initially scaled to 0 width with transform-origin at its midpoint (150,150). As the dots slide apart, the line stretches outward symmetrically from the centre, its end- points tracking the dots. */ @keyframes line-stretch { 0% { opacity: 0; transform: scaleX(0); } 20% { opacity: 1; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } } /* dot-fade-out: simple opacity 1 → 0. */ @keyframes dot-fade-out { from { opacity: 1; } to { opacity: 0; } } /* --------------------------------------------------------------------------- PLATONIC SOLIDS — every solid group is permanently at opacity 1; their visibility is controlled instead by per-edge stroke-dashoffset in JS (animatePlatonicSolids). A solid at drawProgress=0 has all edges fully "un-drawn" (dashoffset = length), so it's invisible. As drawProgress climbs to 1, each edge's offset shrinks toward 0 and the lines visibly extend into existence — staggered, like a wire-frame unfolding. The previous solid simultaneously runs in reverse, withdrawing its lines. --------------------------------------------------------------------------- */ .platonic-solids { pointer-events: none; } .platonic-solids .solid { /* Always rendered; lines are individually shown/hidden via stroke-dash. */ } .platonic-solids .solid line { stroke: rgba(245, 184, 0, 0.92); stroke-width: 1.3; /* linecap: butt — same reason as compass arms. At low drawProgress the visible line is short; rounded caps render as tiny discs that read as floating dots. Square caps stay invisible until the line has length. */ stroke-linecap: butt; fill: none; filter: drop-shadow(0 0 2px rgba(245, 184, 0, 0.28)); } /* --------------------------------------------------------------------------- HOLOGRAPHIC ORB — kept for archival; not currently used. --------------------------------------------------------------------------- */ .orb-stage { position: relative; display: grid; place-items: center; min-height: clamp(260px, 36vw, 480px); } .orb { position: relative; width: clamp(220px, 28vw, 360px); aspect-ratio: 1 / 1; border-radius: 50%; background: var(--prism); background-size: 200% 200%; /* Soft outer glow so the orb feels like it's emitting light. */ box-shadow: 0 24px 80px -10px rgba(245, 184, 0, 0.35), 0 10px 40px -5px rgba(180, 156, 245, 0.30), inset 0 0 60px rgba(255, 255, 255, 0.30); animation: orb-rotate 16s linear infinite, orb-float 7s ease-in-out infinite; filter: saturate(1.05); } /* A bright specular highlight — sells the "glass / hologram" feel. */ .orb-shimmer { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient( ellipse 55% 38% at 32% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60% ); mix-blend-mode: screen; } /* A second softer highlight on the opposite side. */ .orb-highlight { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient( ellipse 70% 45% at 70% 78%, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 65% ); mix-blend-mode: screen; } /* Concentric rings — orbiting, faint. Adds scale + depth. */ .orb-ring { position: absolute; width: 78%; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--paper-edge); pointer-events: none; animation: ring-rotate 22s linear infinite; } .orb-ring::before { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 10px var(--sun-glow); transform: translateX(-50%); } .orb-ring-2 { width: 96%; border-style: dashed; opacity: 0.55; animation-duration: 38s; animation-direction: reverse; } .orb-ring-2::before { background: var(--prism); box-shadow: 0 0 10px rgba(180,156,245,0.6); } @keyframes orb-rotate { to { transform: rotate(360deg); background-position: 200% 50%; } } @keyframes orb-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } } @keyframes ring-rotate { to { transform: rotate(360deg); } } /* --------------------------------------------------------------------------- SECTIONS — generous padding, alternating paper / pale. --------------------------------------------------------------------------- */ .section { /* Centre an at-most --max-w content column via padding, so every child shares the same left edge. (The old approach gave each child margin:auto, which centred short titles independently and broke alignment.) */ padding-top: clamp(4.5rem, 9vw, 8rem); padding-bottom: clamp(4.5rem, 9vw, 8rem); padding-left: max(var(--gutter), calc((100% - var(--max-w)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); position: relative; } .section > *:not(:last-child) { margin-bottom: 0; } .section > * { max-width: var(--max-w); } .section-pale { background: var(--paper-pale); border-top: 1px solid var(--paper-edge); border-bottom: 1px solid var(--paper-edge); } .section-title { margin-top: 1.4rem; font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.5rem, 2.9vw, 2.2rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--ink); max-width: 30ch; } /* --------------------------------------------------------------------------- APPROACH — three pillar cards with subtle holographic top edge. --------------------------------------------------------------------------- */ .three-up { margin-top: 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .pillar { position: relative; padding: 2rem 1.6rem; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 14px; transition: transform 200ms ease, box-shadow 200ms ease; overflow: hidden; } /* A thin holographic stripe runs along the top of each card. */ .pillar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--prism); background-size: 200% 100%; animation: prism-shift 14s linear infinite; opacity: 0.7; } .pillar:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -10px rgba(19, 18, 16, 0.08); } .pillar-num { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--sun-pale); color: #8a6900; margin-bottom: 1rem; } .pillar h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin-bottom: 0.6rem; color: var(--ink); letter-spacing: -0.01em; } .pillar p { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); } /* --------------------------------------------------------------------------- COMMITMENTS — stark, single-sentence promises framed as lines we will not cross. Editorial typography (serif, light weight, large size), thin hairline rules between rows, mono index numbers. The reviewer's point: "Safe Superintelligence" as a headline creates a debt to the reader; this section pays it. --------------------------------------------------------------------------- */ .commitments-lede { margin-top: 1.4rem; font-size: 1.05rem; color: var(--ink-soft); max-width: 48ch; } .commitments { list-style: none; margin-top: 2.6rem; display: grid; max-width: 64rem; } .commitments li { display: grid; grid-template-columns: auto 1fr; gap: 2.2rem; align-items: baseline; padding: 1.9rem 0; border-top: 1px solid var(--paper-edge); } .commitments li:last-child { border-bottom: 1px solid var(--paper-edge); } .commitments .c-num { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--ink-faint); align-self: start; padding-top: 0.4rem; white-space: nowrap; } .commitments li > p { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.15rem, 2.1vw, 1.55rem); line-height: 1.32; letter-spacing: -0.012em; color: var(--ink); max-width: 38ch; } @media (max-width: 760px) { .commitments li { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.4rem 0; } } /* --------------------------------------------------------------------------- RESEARCH — editorial paper list with holographic hover underline. --------------------------------------------------------------------------- */ .paper-list { margin-top: 3rem; list-style: none; display: grid; gap: 1.5rem; } .paper { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.6rem 2rem; padding: 1.7rem 0; border-top: 1px solid var(--paper-edge); transition: background 160ms ease; } .paper:hover { background: rgba(255, 255, 255, 0.4); } .paper-meta { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .paper h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.18; letter-spacing: -0.015em; color: var(--ink); max-width: 32ch; } .paper p { grid-column: 1; font-size: 0.96rem; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; } .paper-link { align-self: end; font-family: var(--font-sans); font-size: 0.92rem; font-weight: 600; color: var(--ink); white-space: nowrap; position: relative; padding-bottom: 2px; } .paper-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--prism); transform: scaleX(0); transform-origin: left; transition: transform 240ms ease; } .paper-link:hover::after { transform: scaleX(1); } /* --------------------------------------------------------------------------- LAB — copy + stats. --------------------------------------------------------------------------- */ .lab-grid { margin-top: 3rem; display: grid; grid-template-columns: 1.5fr 1fr; gap: 4rem; align-items: start; } .lab-copy { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ink); max-width: 56ch; } .lab-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.4rem; } .lab-stats > div { padding-top: 1rem; border-top: 1px solid var(--paper-edge); } .lab-stats dt { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.45rem; } .lab-stats dd { font-family: var(--font-serif); font-weight: 400; font-size: 1.55rem; color: var(--ink); } .lab-stats dd.num { font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; color: var(--sun); } /* --------------------------------------------------------------------------- CONTACT — form (not a mailto link). Same input/focus treatment as the alpha form so the two read as a coherent system. --------------------------------------------------------------------------- */ .contact-lede { margin-top: 1.4rem; font-size: 1.05rem; color: var(--ink-soft); max-width: 56ch; } .contact-email { /* Legacy class — kept so older anchors don't break. The new form replaces the inline email line; this rule is retained but unused on the live page. */ display: inline-block; margin-top: 2.2rem; font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.5rem, 3.4vw, 2.6rem); letter-spacing: -0.018em; font-style: italic; } .contact-form { margin-top: 2.4rem; max-width: 38rem; display: grid; gap: 1.1rem; } .contact-form .form-row { display: grid; gap: 0.4rem; } .contact-form label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .contact-form .form-opt { letter-spacing: 0.05em; text-transform: none; font-size: 0.72rem; color: var(--ink-faint); } .contact-form input, .contact-form select, .contact-form textarea { font-family: var(--font-sans); font-size: 1rem; padding: 0.7rem 0.9rem; border-radius: 10px; border: 1px solid var(--paper-edge); background: rgba(255, 255, 255, 0.85); color: var(--ink); outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ink-faint); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--sun); box-shadow: 0 0 0 4px rgba(245, 184, 0, 0.18); } .contact-form textarea { resize: vertical; min-height: 7rem; font-family: var(--font-sans); } .contact-form select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 10px 6px; padding-right: 2.4rem; } .contact-form .btn { margin-top: 0.4rem; justify-self: start; } .form-note { margin-top: 0.4rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.10em; color: var(--ink-faint); } .form-note.success { color: #1f7a3d; } .form-note.error { color: #b34040; } /* Closing CTA on the homepage Contact section + Careers page primary CTA. A modest top margin so the button doesn't crowd the lede above. */ .contact-cta, .careers-cta { margin-top: 2rem; } /* The careers list on /careers.html doesn't need the top hairline rule that the homepage sub-block had (it was visually subordinate to the lab-grid above it). On its own page it stands alone. */ .careers--page { margin-top: 0; padding-top: 0; border-top: none; } /* --------------------------------------------------------------------------- FOOTER — major-lab pattern. Brand block on the left, five link columns on the right matching the top nav (Research · Products · Solutions · Company · Resources). Below: thin bottom strip with copyright + legal. --------------------------------------------------------------------------- */ .foot { padding: clamp(3rem, 6vw, 5rem) var(--gutter) 1.8rem; border-top: 1px solid var(--paper-edge); background: var(--paper-pale); color: var(--ink-soft); } .foot-top { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 1.05fr) 3fr; gap: clamp(2rem, 5vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); } /* ----- Brand block (left) ----- */ .foot-brand-block { max-width: 22rem; } .foot-brand-block .foot-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-sans); font-weight: 600; font-size: 1rem; color: var(--ink); } .foot-tagline { margin-top: 0.9rem; font-family: var(--font-serif); font-weight: 300; font-size: 1.1rem; letter-spacing: -0.01em; /* `.holographic-text` already provides italic + prism fill */ } .foot-mission { margin-top: 0.8rem; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); max-width: 28ch; } .foot-social { margin-top: 1.4rem; display: inline-flex; gap: 1.2rem; } .foot-social a { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--ink-soft); position: relative; padding-bottom: 2px; } .foot-social a:hover { color: var(--ink); } .foot-social a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--prism); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; } .foot-social a:hover::after { transform: scaleX(1); } /* ----- Link columns (right) ----- */ .foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2rem; } .foot-col h4 { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.1rem; } .foot-col ul { list-style: none; display: grid; gap: 0.55rem; } .foot-col a { font-family: var(--font-sans); font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); line-height: 1.4; } .foot-col a:hover { color: var(--ink); } /* External (new-tab) links get a ↗, mirroring the SI Platform dropdown in the top nav so the two read symmetrically. */ .foot-col a.ext::after { content: " ↗"; font-size: 0.8em; color: var(--ink-faint); } .foot-col a.ext:hover::after { color: var(--ink); } /* ----- Bottom strip: copyright + legal ----- */ .foot-bottom { max-width: var(--max-w); margin: 0 auto; padding-top: 1.8rem; border-top: 1px solid var(--paper-edge); display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--ink-faint); } .foot-meta { color: var(--ink-faint); } .foot-legal { display: inline-flex; gap: 1.5rem; flex-wrap: wrap; } .foot-legal a { color: var(--ink-faint); font-size: 0.82rem; font-weight: 500; } .foot-legal a:hover { color: var(--ink); } /* ----- Responsive ----- */ @media (max-width: 960px) { .foot-top { grid-template-columns: 1fr; gap: 2.6rem; } .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; } } @media (max-width: 600px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-bottom { flex-direction: column; align-items: flex-start; gap: 0.9rem; } } /* --------------------------------------------------------------------------- CAPABILITIES — 2×2 grid of cards, similar treatment to pillars but bigger. --------------------------------------------------------------------------- */ .cap-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; } .cap { position: relative; padding: 2rem 1.8rem; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 14px; transition: transform 200ms ease, box-shadow 200ms ease; overflow: hidden; } .cap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--prism); background-size: 200% 100%; animation: prism-shift 16s linear infinite; opacity: 0.7; } .cap:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(19, 18, 16, 0.10); } .cap-num { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.16em; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--sun-pale); color: #8a6900; margin-bottom: 1rem; } .cap h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.35rem; line-height: 1.2; margin-bottom: 0.55rem; color: var(--ink); letter-spacing: -0.01em; max-width: 26ch; } .cap p { font-size: 0.97rem; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; } /* --------------------------------------------------------------------------- MARKETS — horizontal tag/pill list. Tags read as labeled chips with a short one-line note underneath. Quiet, informational. --------------------------------------------------------------------------- */ .markets { margin-top: 3.5rem; padding-top: 2.2rem; border-top: 1px solid var(--paper-edge); } .markets-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.4rem; } .market-pills { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.8rem; } .market-pills li { display: grid; gap: 0.15rem; padding: 0.8rem 1rem; border: 1px solid var(--paper-edge); border-radius: 10px; background: rgba(255, 255, 255, 0.45); transition: border-color 160ms ease, transform 160ms ease; } .market-pills li:hover { border-color: rgba(245, 184, 0, 0.5); transform: translateY(-1px); } .market-name { font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; color: var(--ink); } .market-note { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--ink-soft); } /* --------------------------------------------------------------------------- ALPHA ACCESS — email capture. Centered, generous, prism-flavoured. --------------------------------------------------------------------------- */ .alpha { position: relative; overflow: hidden; } .alpha::before { /* Soft prismatic wash behind the form — diffused, low opacity. */ content: ""; position: absolute; inset: -20% -10%; background: var(--prism-soft); filter: blur(80px) saturate(140%); opacity: 0.45; z-index: 0; pointer-events: none; } .alpha-inner { position: relative; z-index: 1; max-width: 42rem; margin: 0 auto; text-align: center; } .alpha-inner .section-title { margin-left: auto; margin-right: auto; } .alpha-lede { margin-top: 1.2rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); max-width: 38rem; margin-left: auto; margin-right: auto; } .alpha-form { margin: 2.3rem auto 0; display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; max-width: 34rem; } .alpha-form input { font-family: var(--font-sans); font-size: 1rem; padding: 0.85rem 1.1rem; border-radius: 999px; border: 1px solid var(--paper-edge); background: rgba(255, 255, 255, 0.9); color: var(--ink); outline: none; transition: border-color 160ms ease, box-shadow 160ms ease; } .alpha-form input::placeholder { color: var(--ink-faint); } .alpha-form input:focus { border-color: var(--sun); box-shadow: 0 0 0 4px rgba(245, 184, 0, 0.18); } .alpha-form button { /* inherits .btn .btn-primary */ justify-content: center; white-space: nowrap; } .alpha-note { margin-top: 1rem; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.10em; color: var(--ink-faint); } .alpha-note.success { color: #1f7a3d; } .alpha-note.error { color: #b34040; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- MOBILE. --------------------------------------------------------------------------- */ @media (max-width: 900px) { .hero, .thesis { grid-template-columns: 1fr; text-align: left; } .orb-stage { min-height: 320px; order: -1; margin-bottom: 1rem; } .three-up { grid-template-columns: 1fr; } .cap-grid { grid-template-columns: 1fr; } .market-pills { grid-template-columns: 1fr; } .paper { grid-template-columns: 1fr; } .paper-link { justify-self: start; margin-top: 0.6rem; } .lab-grid { grid-template-columns: 1fr; gap: 2.5rem; } .alpha-form { grid-template-columns: 1fr; } } @media (max-width: 1100px) { /* Tighten left-cluster + link spacing so it all fits on one line. */ .nav-left { gap: 1.4rem; } .nav-links { gap: 1rem; font-size: 0.82rem; } .nav-cta { padding: 0.45rem 0.9rem; font-size: 0.82rem; } } @media (max-width: 900px) { /* On tablets/phones, drop the inline link list (six dropdowns won't fit) and reveal the geometric menu button → full-screen drawer. Brand + Join Alpha + quantum-field button remain in the bar. NOTE: `.nav-right .nav-burger` (two classes) is used deliberately so this show-rule out-specifies the base `.nav-burger { display:none }` that is defined LATER in the file — media queries don't add specificity, so a plain `.nav-burger` here would lose to the later base rule on source order, leaving the button hidden on mobile. */ .nav-links { display: none; } .nav-cta { padding: 0.45rem 0.85rem; font-size: 0.82rem; } .nav-right .nav-burger { display: inline-flex; } .nav-right { gap: 0.6rem; } } @media (max-width: 430px) { /* Phones: keep the full logo (symbol + words) visible — shrink so the wider horizontal lockup still leaves room for the CTA + burger. */ .nav-brand .nav-logo { height: 2.05rem; } .nav-cta { padding: 0.4rem 0.7rem; font-size: 0.78rem; } } @media (max-width: 360px) { /* Smallest phones: shrink a touch more to guarantee one-line fit. */ .nav-brand .nav-logo { height: 1.85rem; } } @media (max-width: 520px) { .lab-stats { grid-template-columns: 1fr; } } /* --------------------------------------------------------------------------- STUB SECTIONS — Products (3 cards mirrored from pillars), News, Careers. --------------------------------------------------------------------------- */ .products-lede { margin-top: 1.4rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); max-width: 56ch; } .products-cta { margin-top: 2.5rem; } .news-lede { margin-top: 1.4rem; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; margin-bottom: 2rem; } /* Careers sub-block (inside the Company section). Visually subordinate to the main lab-grid above it: smaller eyebrow, mid-weight heading, tighter list. Adds a top hairline so the transition reads as a sub- section, not a new section. */ .careers { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--paper-edge); max-width: var(--max-w); } .careers-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.20em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem; } .careers-title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.3rem, 2.4vw, 1.9rem); line-height: 1.15; letter-spacing: -0.018em; color: var(--ink); max-width: 32ch; margin-bottom: 2rem; } .careers-list { list-style: none; display: grid; gap: 0.4rem; margin-bottom: 1.4rem; } .careers-list li { display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; align-items: baseline; padding: 1rem 0; border-top: 1px solid var(--paper-edge); } .careers-list li:last-child { border-bottom: 1px solid var(--paper-edge); } .career-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .careers-list p { font-family: var(--font-sans); font-size: 0.96rem; line-height: 1.55; color: var(--ink); max-width: 60ch; } @media (max-width: 760px) { .careers-list li { grid-template-columns: 1fr; gap: 0.3rem; padding: 1rem 0; } } /* --------------------------------------------------------------------------- MOBILE MENU BUTTON — a geometric "quantum field" of nine prism dots arranged in a 3×3 lattice, in place of a hamburger. Echoes the sacred-geometry / particle-manifold language of the hero. At rest: the field gently breathes (a slow scale pulse). Hover: dots brighten toward the prism gradient. Open: the lattice contracts toward its centre and rotates 45°, becoming a tight diamond cluster — the "collapse" gesture. --------------------------------------------------------------------------- */ .nav-burger { display: none; width: 38px; height: 38px; padding: 0; background: transparent; border: 1px solid var(--paper-edge); border-radius: 9px; cursor: pointer; position: relative; align-items: center; justify-content: center; transition: border-color 180ms ease, background 180ms ease; } .nav-burger:hover { border-color: rgba(245, 184, 0, 0.5); background: rgba(245, 184, 0, 0.05); } .qfield { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3.5px; width: 18px; height: 18px; /* The whole lattice rotates + breathes via these transforms. */ transform-origin: 50% 50%; transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1); animation: qfield-breathe 6s ease-in-out infinite; } .qfield i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--ink); opacity: 0.8; transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), background 220ms ease, opacity 220ms ease; } /* Hover: dots take the prism tint, brightening the field. */ .nav-burger:hover .qfield i { background: var(--prism); opacity: 1; } @keyframes qfield-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* OPEN STATE — lattice rotates 45° into a diamond and the outer dots pull toward the centre (the "collapse"). Each dot is nudged inward along its own diagonal so the 3×3 grid tightens to a compact cluster. */ .nav-burger[aria-expanded="true"] .qfield { transform: rotate(45deg) scale(0.92); animation: none; } .nav-burger[aria-expanded="true"] .qfield i { background: var(--prism); opacity: 1; } /* Corners pull diagonally inward; edges pull straight in; centre holds. */ .nav-burger[aria-expanded="true"] .qfield i:nth-child(1) { transform: translate( 35%, 35%); } .nav-burger[aria-expanded="true"] .qfield i:nth-child(2) { transform: translateY( 35%); } .nav-burger[aria-expanded="true"] .qfield i:nth-child(3) { transform: translate(-35%, 35%); } .nav-burger[aria-expanded="true"] .qfield i:nth-child(4) { transform: translateX( 35%); } .nav-burger[aria-expanded="true"] .qfield i:nth-child(6) { transform: translateX(-35%); } .nav-burger[aria-expanded="true"] .qfield i:nth-child(7) { transform: translate( 35%, -35%); } .nav-burger[aria-expanded="true"] .qfield i:nth-child(8) { transform: translateY(-35%); } .nav-burger[aria-expanded="true"] .qfield i:nth-child(9) { transform: translate(-35%, -35%); } /* Reduced motion: no breathing pulse. The open-state transform still works (it's a discrete state change, not continuous motion). */ [data-reduced-motion="true"] .qfield { animation: none; } /* --------------------------------------------------------------------------- MOBILE DRAWER — x.ai-style: a full-screen overlay, content left-aligned, grouped into labelled sections. Top-level items render large; grouped items sit beneath a small mono label. Scrolls if taller than the screen. --------------------------------------------------------------------------- */ .mobile-menu { position: fixed; inset: 0; z-index: 18; background: var(--paper); padding: 5rem 1.5rem 3rem; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, visibility 0s linear 320ms; display: none; /* enabled at the mobile breakpoint */ } .mobile-menu.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease; } .mm-inner { display: flex; flex-direction: column; max-width: 30rem; margin: 0 auto; } /* ── Accordion sections ────────────────────────────────────────────── Each .mm-group is a collapsible: a full-width .mm-toggle header that expands its .mm-panel (links) on tap. Keeps the menu short — you only scroll into the section you want. */ .mm-group { border-bottom: 1px solid var(--paper-edge); } .mm-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; background: none; border: none; cursor: pointer; font-family: var(--font-display, var(--font-sans)); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink); padding: 1rem 0; text-align: left; } /* Chevron — rotates down when the section is open. */ .mm-toggle::after { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(-45deg); transition: transform 240ms ease; flex: none; } .mm-group.open .mm-toggle::after { transform: rotate(45deg); } /* Panel collapses to zero height; expands when the group is open. */ .mm-panel { max-height: 0; overflow: hidden; transition: max-height 340ms cubic-bezier(0.4, 0, 0.2, 1); } .mm-group.open .mm-panel { max-height: 34rem; } .mm-link { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 1.05rem; color: var(--ink-soft); padding: 0.5rem 0 0.5rem 0.2rem; } .mm-link:first-child { padding-top: 0.2rem; } .mm-link:last-child { padding-bottom: 1rem; } .mm-link:hover { color: var(--ink); } /* External links get the ↗ marker, mirroring the desktop dropdowns. */ .mm-link.ext::after { content: " ↗"; font-size: 0.85em; color: var(--ink-faint); } /* Standalone top-level link (News) — styled like a toggle, no panel. */ .mm-standalone { display: block; font-family: var(--font-display, var(--font-sans)); font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--ink); padding: 1rem 0; border-bottom: 1px solid var(--paper-edge); } .mm-standalone:hover { color: var(--ink); } .mm-cta { display: flex; align-items: center; justify-content: center; /* centre the "Join Alpha" text */ margin-top: 2rem; background: var(--sun); border-radius: 999px; text-align: center; font-weight: 600; padding: 0.85rem 1rem; font-size: 1rem; } [data-reduced-motion="true"] .mobile-menu { transition: opacity 120ms ease, visibility 0s; transform: none; } @media (max-width: 900px) { .mobile-menu { display: block; } } /* --------------------------------------------------------------------------- LEGAL PAGES (terms / privacy / responsible-use / cookies) — same body styles as the main site; just a constrained reading column. .nav--lite is a slimmed-down nav used on policy and 404 pages: brand on the left, "← Home" link on the right. No primary nav, no CTA — the user came here for one piece of content. --------------------------------------------------------------------------- */ .nav--lite { justify-content: space-between; } .nav-back { font-family: var(--font-sans); font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); position: relative; padding-bottom: 2px; } .nav-back::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--prism); transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; } .nav-back:hover { color: var(--ink); } .nav-back:hover::after { transform: scaleX(1); } .legal-page { max-width: 44rem; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(3rem, 6vw, 5rem); } .legal-page article { /* Reading-optimised column. Serif heads, sans body, tight rhythm. */ } .legal-eyebrow { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.4rem; } .legal-title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.75rem, 3.6vw, 2.7rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 1.6rem; } .legal-lede { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5; color: var(--ink-soft); margin-bottom: 2.6rem; padding-bottom: 2rem; border-bottom: 1px solid var(--paper-edge); } .legal-page h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: -0.015em; color: var(--ink); margin-top: 2.4rem; margin-bottom: 0.7rem; } .legal-page p { font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--ink); margin-bottom: 1rem; } .legal-page ul, .legal-page ol { margin: 0 0 1.2rem 1.4rem; } .legal-page li { font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; color: var(--ink); margin-bottom: 0.5rem; } .legal-page a { color: var(--ink); border-bottom: 1px solid var(--paper-edge); padding-bottom: 1px; } .legal-page a:hover { border-bottom-color: var(--sun); } .legal-page em { color: var(--ink-soft); } .legal-footnote { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--paper-edge); font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.6; color: var(--ink-faint); } /* Cookie table — used on cookies.html for the per-cookie breakdown. */ .cookie-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-family: var(--font-sans); font-size: 0.92rem; } .cookie-table th, .cookie-table td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--paper-edge); vertical-align: top; } .cookie-table th { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; } .cookie-table td:first-child { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); } /* foot--lite: simpler footer for legal/404 pages. The full multi-column footer would be overkill there. */ .foot--lite { padding: 2rem var(--gutter); } .foot--lite .foot-bottom { padding-top: 0; border-top: none; } /* --------------------------------------------------------------------------- BLOG — index list + post pages. Both reuse the .legal-page reading column (same family as the policy/contact pages), with blog-specific touches. --------------------------------------------------------------------------- */ .blog-list { list-style: none; margin-top: 2.4rem; display: grid; } .blog-item { padding: 1.7rem 0; border-top: 1px solid var(--paper-edge); } .blog-item:last-child { border-bottom: 1px solid var(--paper-edge); } .blog-item-meta { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.5rem; } .blog-item h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 0.45rem; } .blog-item h2 a { color: var(--ink); } .blog-item h2 a:hover { color: var(--ink); border-bottom: 2px solid var(--sun); } .blog-item p { font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.6; color: var(--ink-soft); max-width: 58ch; margin-bottom: 0; } .blog-empty { margin-top: 2rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-faint); } /* Post body typography — richer than the policy pages: serif feel for reading, mono code blocks, prism-accented blockquotes. */ .post-body { margin-top: 0.4rem; } .post-body h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.25rem, 2.1vw, 1.6rem); letter-spacing: -0.015em; color: var(--ink); margin-top: 2.4rem; margin-bottom: 0.7rem; } .post-body h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-top: 1.8rem; margin-bottom: 0.5rem; } .post-body p { font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.7; color: var(--ink); margin-bottom: 1.1rem; } .post-body a { color: var(--ink); border-bottom: 1px solid var(--sun); padding-bottom: 1px; } .post-body a:hover { border-bottom-width: 2px; } .post-body ul, .post-body ol { margin: 0 0 1.2rem 1.4rem; } .post-body li { font-family: var(--font-sans); font-size: 1.02rem; line-height: 1.65; margin-bottom: 0.45rem; color: var(--ink); } .post-body blockquote { margin: 1.6rem 0; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 2px solid transparent; border-image: var(--prism-soft) 1; } .post-body blockquote p { font-family: var(--font-serif); font-weight: 300; font-size: 1.15rem; line-height: 1.5; color: var(--ink-soft); margin-bottom: 0; } .post-body pre { margin: 1.4rem 0; padding: 1rem 1.2rem; background: var(--ink); border-radius: 10px; overflow-x: auto; } .post-body pre code { font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.55; color: var(--paper); background: none; padding: 0; } .post-body code { font-family: var(--font-mono); font-size: 0.88em; background: var(--paper-pale); border: 1px solid var(--paper-edge); border-radius: 4px; padding: 0.1em 0.35em; } .post-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.4rem 0; } /* Responsive 16:9 video embeds (YouTube / Vimeo via @youtube[…] / @vimeo[…]). */ .post-body .embed-video { position: relative; aspect-ratio: 16 / 9; margin: 1.6rem 0; } .post-body .embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; } .post-body hr { border: none; height: 1px; background: var(--paper-edge); margin: 2.2rem 0; } .post-tags { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 2rem; } .post-tag { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper-pale); border: 1px solid var(--paper-edge); border-radius: 999px; padding: 0.25rem 0.7rem; } .post-related { max-width: 44rem; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid var(--paper-edge); } .post-related-title { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1rem; } .post-related ul { list-style: none; display: grid; gap: 0.6rem; } .post-related li { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; } .post-related a { font-family: var(--font-serif); font-size: 1.1rem; color: var(--ink); } .post-related a:hover { border-bottom: 1px solid var(--sun); } .post-related-date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); white-space: nowrap; } /* --------------------------------------------------------------------------- 404 PAGE --------------------------------------------------------------------------- */ .not-found { min-height: 60vh; display: grid; place-items: center; padding: clamp(3rem, 8vw, 6rem) var(--gutter); } .nf-wrap { max-width: 36rem; text-align: center; } .nf-code { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.4rem; } .nf-title { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 1.5rem; } .nf-lede { font-family: var(--font-sans); font-size: 1.05rem; color: var(--ink-soft); margin-bottom: 2rem; } .nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.6rem; margin-bottom: 2.2rem; } .nf-links a { color: var(--ink); font-family: var(--font-sans); font-weight: 500; font-size: 0.95rem; padding-bottom: 2px; border-bottom: 1px solid var(--paper-edge); } .nf-links a:hover { border-bottom-color: var(--sun); } .nf-quiet { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-faint); } .nf-quiet a { color: var(--ink-soft); text-decoration: underline; } /* --------------------------------------------------------------------------- SCROLL-REVEAL — sections and cards fade up 12px as they enter the viewport. Driven by an IntersectionObserver in main.js that adds .revealed. Elements opt in via [data-reveal] (set by JS on load, so pages without JS — and crawlers — see everything immediately; the hidden initial state only exists when JS is running). --------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal].revealed { opacity: 1; transform: translateY(0); } /* Stagger children inside revealed grids: each card takes its index delay. */ [data-reveal].revealed[style*="--reveal-delay"] { transition-delay: var(--reveal-delay, 0ms); } /* Reduced motion: reveal instantly, no translate. */ [data-reduced-motion="true"] [data-reveal] { opacity: 1; transform: none; transition: none; } /* --------------------------------------------------------------------------- SCROLL PROGRESS HAIR — 2px prism line pinned to the very top of the viewport, filling left→right as the page scrolls. Sits above the nav. Width is driven by main.js writing --scroll-progress (0..1). --------------------------------------------------------------------------- */ .scroll-hair { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 30; background: var(--prism); background-size: 200% 100%; transform-origin: left; transform: scaleX(var(--scroll-progress, 0)); pointer-events: none; } /* --------------------------------------------------------------------------- PERFORMANCE HINTS — tell the compositor which elements are going to animate continuously, so it promotes them to their own GPU layer instead of repainting on the main thread each frame. --------------------------------------------------------------------------- */ .holographic-mark, .orb-core, .orb-swirl, .orb-tendril, .spiral-path, .rotator, .platonic-solids .solid line, .brand-scroll-arrow, .holographic-text, .nav-cta, .btn-primary { will-change: transform; } .holographic-text { will-change: background-position; } /* --------------------------------------------------------------------------- PRINT — strip the animation, drop the dark colours, lay everything out linearly. Lab folks occasionally print research lab pages; make sure it doesn't print as a black square of holographic gradient. --------------------------------------------------------------------------- */ @media print { :root { --paper: #ffffff; --paper-pale: #ffffff; --paper-edge: #cccccc; --ink: #000000; --ink-soft: #333333; --ink-faint: #666666; } html, body { background: #fff !important; color: #000 !important; } .nav, .nav-burger, .mobile-menu, .sacred-stage, .alpha-form, .nav-cta, .btn-primary, .btn-quiet, .skip-link, .foot-social, .brand-rule, .brand-scroll, .hero-trace, .latent-orb { display: none !important; } .section, .thesis, .hero, .alpha { padding: 1.5rem 0 !important; break-inside: avoid; } .holographic-text { background: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important; font-style: italic; } a { color: #000 !important; text-decoration: underline; } .commitments li, .careers-list li, .paper { break-inside: avoid; } }