:root { --logo: url("logo-mark.png"); } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── Design tokens ──────────────────────────────────────────────────────── WCAG contrast ratios (bg = #0A0B14, relative luminance ≈ 0.00142) #E2DFF2 lum≈0.2120 → (0.2120+0.05)/(0.00142+0.05) = 15.0:1 ✓ AA+AAA #A8A3C8 lum≈0.1055 → (0.1055+0.05)/(0.00142+0.05) = 8.16:1 ✓ AA+AAA #B9B4D6 lum≈0.1444 → (0.1444+0.05)/(0.00142+0.05) = 9.87:1 ✓ AA+AAA #9894B0 lum≈0.0840 → (0.0840+0.05)/(0.00142+0.05) = 6.72:1 ✓ AA #9E9ABD lum≈0.0897 → (0.0897+0.05)/(0.00142+0.05) = 7.29:1 ✓ AA #B7A8FF lum≈0.1669 → (0.1669+0.05)/(0.00142+0.05) = 9.39:1 ✓ AA+AAA #46B8FF lum≈0.1741 → (0.1741+0.05)/(0.00142+0.05) = 9.77:1 ✓ AA+AAA #A9E8FF lum≈0.5432 → (0.5432+0.05)/(0.00142+0.05) = 23.1:1 ✓ AA+AAA #F0C09C (ember text) lum≈0.1980 → ~13.0:1 ✓ AA+AAA #C4B0E8 (specced) lum≈0.1476 → ~10.1:1 ✓ AA+AAA #B9B4D6 (product) → same as text-micro above ✓ AA+AAA ─────────────────────────────────────────────────────────────────────── */ :root { /* Ground */ --ground: #0A0B14; --ground-2: #0D0E1A; --ground-card: #10111C; /* Group accent — Nethric purple */ --accent: #6D5AE0; --accent-hi: #B7A8FF; /* Text — all ≥4.5:1 on #0A0B14 */ --text: #E2DFF2; --text-secondary: #A8A3C8; --text-micro: #B9B4D6; --text-muted: #AEAACA; --text-footer: #9E9ABD; /* Cortex lane */ --cortex-blue: #46B8FF; --cortex-ice: #A9E8FF; /* Ember lane */ --ember: #E8A87C; --ember-hi: #F0C09C; --ember-dim: #C4885A; /* Glass */ --glass-bg: rgba(255,255,255,0.04); --glass-bg-hover: rgba(109,90,224,0.10); --glass-border: rgba(183,168,255,0.16); --glass-border-hi: rgba(183,168,255,0.32); /* Mark */ --mark-bright: #B7A8FF; --mark-fade: #6D5AE0; --mark-node: #E8E6F2; } html, body { /* min-height (not height:100%) lets grow to the full document height, so the absolute aurora layer can span the entire scroll as one piece. */ min-height: 100%; position: relative; /* BG03 trial: the tall aurora is one continuous backdrop spanning the whole document, scrolling 1:1 with the page (see .bg-photo). */ background: #07080F; color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100svh; } /* Text links share the palette on every route, including visited links. Component styles can keep their own glass, card or navigation treatment. */ :where(a[href]) { color: var(--link-color, var(--accent-hi)); text-underline-offset: .25em; text-decoration-thickness: 1px; transition: color .2s ease, text-decoration-color .2s ease; } :where(a[href]:hover) { color: var(--link-hover-color, var(--text)); } /* Keep document content above decorative layers, even before scroll reveals. */ main { position: relative; z-index: 1; } /* ─── Skip link ─── */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; } .skip-link:focus { left: 0; padding: 8px 16px; background: var(--accent); color: #fff; text-decoration: none; } /* ─── Tall aurora parallax backdrop ─── A fixed layer holding the tall aurora at `cover`. JS pans background-position-y from 0%→100% across the full page scroll, so you travel down through the whole aurora and it trails behind the content. Falls back to a static mid-frame when JS is off or reduced-motion is requested. */ .bg-photo { /* absolute (not fixed): the flat landscape aurora is anchored to the top of the document and scrolls UP and away with the page, revealing calm deep space below. Masked at the bottom so it dissolves with no hard edge. */ position: absolute; top: 0; left: 0; right: 0; height: 116vh; max-height: 100%; z-index: 0; pointer-events: none; background: url('aurora.jpg') center top / cover no-repeat; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); } /* Readability wash: keeps the centre channel calm and darkens the lower page so copy stays legible regardless of where the aurora has panned to. */ .bg-wash { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 8%, transparent 0%, rgba(7,8,15,0.20) 70%, rgba(7,8,15,0.42) 100%), linear-gradient(to bottom, rgba(7,8,15,0.18) 0%, rgba(7,8,15,0.40) 55%, rgba(7,8,15,0.66) 100%); } @media (prefers-reduced-motion: reduce) { .bg-photo { will-change: auto; } } /* ─── Starfield ─── */ /* ─── Living cosmos background: canvas starfield + drifting nebula, hero-focused, masked to dissolve into the page gradient below the fold ─── */ .cosmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; /* fade the whole field out toward the bottom so it concentrates on the hero */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 92%); } .cosmos-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .cosmos-neb { position: absolute; border-radius: 50%; filter: blur(64px); mix-blend-mode: screen; will-change: transform; } .neb-a { width: 62vw; height: 62vw; top: -18vh; left: -8vw; background: radial-gradient(circle, rgba(109,90,224,0.11) 0%, rgba(109,90,224,0) 68%); animation: neb-a 46s ease-in-out infinite alternate; } .neb-b { width: 52vw; height: 52vw; top: -10vh; right: -8vw; background: radial-gradient(circle, rgba(70,184,255,0.07) 0%, rgba(70,184,255,0) 68%); animation: neb-b 58s ease-in-out infinite alternate; } .neb-c { width: 44vw; height: 44vw; top: 24vh; left: 28vw; background: radial-gradient(circle, rgba(122,108,224,0.06) 0%, rgba(122,108,224,0) 70%); animation: neb-c 70s ease-in-out infinite alternate; } @keyframes neb-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,4vh,0) scale(1.08); } } @keyframes neb-b { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-5vw,5vh,0) scale(1.10); } } @keyframes neb-c { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4vw,-3vh,0) scale(0.94); } } /* ───────────────────────────────────────────────────────────────────────── NAV ───────────────────────────────────────────────────────────────────────── */ header nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: clamp(14px,2vw,20px) clamp(20px,5vw,60px); /* extra bottom padding gives the feathered backdrop room to dissolve */ padding-bottom: clamp(20px,2.6vw,28px); } /* Backdrop + blur live on a feathered pseudo so they dissolve with NO hard edge or hairline. The blur's rectangular boundary is hidden by the mask. */ header nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10,11,20,0.92) 0%, rgba(10,11,20,0.55) 50%, transparent 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); pointer-events: none; } .nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .nav-mark { flex-shrink: 0; width: 26px; height: 26px; background: var(--logo) center/contain no-repeat; } .nav-wordmark { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-hi); } .nav-links { display: flex; align-items: center; gap: clamp(16px,2.8vw,34px); list-style: none; } .nav-links a { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.09em; color: var(--text-secondary); text-decoration: none; transition: color 0.25s ease; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--accent-hi); } .nav-cta { display: inline-flex; align-items: center; gap: 6px; padding: 7px 18px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--accent-hi); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; text-decoration: none; box-shadow: inset 0 1px 0 rgba(183,168,255,0.10), 0 1px 3px rgba(0,0,0,0.35); transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .nav-cta:hover, .nav-cta:focus-visible { background: var(--glass-bg-hover); border-color: var(--glass-border-hi); color: #fff; } /* ─── Glass button (shared) ─── */ .glass-btn { display: inline-flex; align-items: center; gap: 8px; padding: clamp(10px,1.5vmin,14px) clamp(24px,3.2vw,36px); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--accent-hi); font-size: clamp(0.75rem,1.4vw,0.875rem); font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; min-height: 44px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(183,168,255,0.10), 0 1px 4px rgba(0,0,0,0.40), 0 4px 16px rgba(0,0,0,0.22); transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .glass-btn:hover, .glass-btn:focus-visible { background: var(--glass-bg-hover); border-color: var(--glass-border-hi); color: #fff; } .glass-btn:focus-visible { box-shadow: inset 0 1px 0 rgba(183,168,255,0.10), 0 0 0 2px rgba(109,90,224,0.5); } .btn-arrow { opacity: 0.6; } /* ───────────────────────────────────────────────────────────────────────── HERO (verbatim from nethric.html — operator-approved hA direction) ───────────────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; padding: clamp(100px,14vh,160px) clamp(20px,6vw,80px) clamp(70px,10vh,120px); text-align: center; } .hero-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: clamp(320px,68vmin,680px); height: clamp(320px,68vmin,680px); border-radius: 50%; background: radial-gradient( circle, rgba(109,90,224,0.17) 0%, rgba(109,90,224,0.07) 40%, transparent 70% ); filter: blur(36px); z-index: 1; animation: hero-glow-pulse 14s ease-in-out infinite alternate; } @keyframes hero-glow-pulse { 0% { opacity: 0.6; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 1.0; transform: translate(-50%,-50%) scale(1.10); } } .hero-mark-wrap { position: relative; z-index: 2; width: clamp(200px,40vmin,420px); height: clamp(200px,40vmin,420px); flex-shrink: 0; animation: mark-drift 9s ease-in-out infinite; } @keyframes mark-drift { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } } .hero-mark-img { width: 100%; height: 100%; background: var(--logo) center/contain no-repeat; } .hero-mark-svg { width: 100%; height: 100%; overflow: visible; } .h-stroke-bright { stroke: var(--mark-bright); fill: none; stroke-linecap: round; stroke-linejoin: round; } .h-stroke-fade { stroke: var(--mark-fade); fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.42; } @keyframes shimmer-bright { 0% { stroke-dashoffset: 500; } 100% { stroke-dashoffset: -500; } } @keyframes shimmer-fade { 0% { stroke-dashoffset: 360; } 100% { stroke-dashoffset: -360; } } .h-shimmer-bright { stroke: #DACCFF; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 55 500; stroke-dashoffset: 500; opacity: 0.65; animation: shimmer-bright 22s ease-in-out infinite; } .h-shimmer-fade { stroke: rgba(183,168,255,0.50); fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 38 360; stroke-dashoffset: 360; opacity: 0.45; animation: shimmer-fade 28s ease-in-out infinite; } .hero-type { position: relative; z-index: 2; margin-top: clamp(30px,5vmin,58px); display: flex; flex-direction: column; align-items: center; gap: clamp(10px,1.8vmin,20px); max-width: 680px; /* no box — keep the copy readable over the glow with a soft text shadow, the same calm approach the Cortex hero uses. */ text-shadow: 0 1px 16px rgba(4,5,12,0.65), 0 1px 3px rgba(4,5,12,0.55); } .hero-wordmark { font-size: clamp(1.75rem,5.5vw,3.6rem); font-weight: 500; letter-spacing: clamp(0.30em,1.3vw,0.48em); text-transform: uppercase; color: var(--text); text-wrap: balance; line-height: 1; } .hero-tagline { font-size: clamp(0.75rem,1.7vw,0.9375rem); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-hi); text-wrap: balance; } .hero-oneliner { font-size: clamp(0.875rem,1.9vw,1.0625rem); font-weight: 400; letter-spacing: 0.01em; line-height: 1.68; color: var(--text-secondary); max-width: 560px; text-wrap: balance; margin-top: clamp(4px,0.6vmin,8px); } .hero-bip { position: relative; display: inline-block; isolation: isolate; /* own stacking context so the soft fill sits behind only this line */ padding: 5px 18px; font-size: clamp(0.75rem,1.35vw,0.875rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-micro); text-wrap: balance; } /* very soft, feathered translucent fill behind ONLY the "Building in public" line — blurred edges so there is no hard rectangle and no hard shadow */ .hero-bip::before { content: ""; position: absolute; inset: -2px -4px; z-index: -1; background: rgba(10,11,22,0.55); border-radius: 999px; filter: blur(9px); pointer-events: none; } .hero-cta-wrap { margin-top: clamp(20px,3vmin,34px); } /* ───────────────────────────────────────────────────────────────────────── CHASSIS (s1 comp) Horizontal violet→blue dawn — faint purple constellation from left edge, fine blue lattice glow at right edge; NO vertical seam lines. Logo lockup: small hourglass-N mark + NETHRIC, centered, above headline. ───────────────────────────────────────────────────────────────────────── */ .chassis { position: relative; z-index: 1; padding: clamp(72px,10vh,112px) clamp(20px,6vw,80px); overflow: hidden; background: linear-gradient( to right, rgba(109,90,224,0.07) 0%, rgba(10,11,20,0.0) 44%, rgba(70,184,255,0.06) 100% ); border-top: 1px solid rgba(183,168,255,0.06); border-bottom: 1px solid rgba(70,184,255,0.07); } /* Purple constellation glow — left third only */ .chassis-aurora-left { position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: radial-gradient( ellipse at 0% 50%, rgba(109,90,224,0.13) 0%, rgba(109,90,224,0.04) 45%, transparent 70% ); pointer-events: none; } /* Blue lattice glow — right third only */ .chassis-lattice-right { position: absolute; top: 0; right: 0; width: 42%; height: 100%; pointer-events: none; overflow: hidden; } .chassis-lattice-right::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(70,184,255,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(70,184,255,0.055) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse at 100% 50%, black 20%, transparent 70%); } .chassis-lattice-right::after { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at 100% 50%, rgba(70,184,255,0.10) 0%, rgba(70,184,255,0.03) 40%, transparent 65% ); } .chassis-inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: clamp(20px,3.5vmin,34px); } /* S1 approved logo lockup — small hourglass-N + NETHRIC, letterspaced, centered */ .chassis-logo-lockup { display: flex; align-items: center; gap: 9px; opacity: 0.72; } .chassis-logo-mark { width: 26px; height: 26px; flex-shrink: 0; background: var(--logo) center/contain no-repeat; } .chassis-logo-wordmark { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.30em; text-transform: uppercase; color: var(--accent-hi); } .chassis-headline { font-size: clamp(1.5rem,3.8vw,2.6rem); font-weight: 400; letter-spacing: -0.02em; color: var(--text); text-wrap: balance; max-width: 780px; line-height: 1.22; } .chassis-headline .cortex-word { color: var(--cortex-blue); } .chassis-subline { font-size: clamp(0.875rem,1.8vw,1.0625rem); font-weight: 400; color: var(--text-secondary); text-wrap: balance; max-width: 560px; line-height: 1.6; } /* Qualitative mono row */ .chassis-mono-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; font-size: clamp(0.6875rem,1.3vw,0.8125rem); font-variant-numeric: tabular-nums; color: var(--text-muted); letter-spacing: 0.04em; margin-top: clamp(6px,1.2vmin,14px); } .chassis-mono-item { white-space: nowrap; padding: 0 clamp(10px,1.8vw,18px); } .chassis-mono-sep { color: rgba(183,168,255,0.25); user-select: none; } /* ───────────────────────────────────────────────────────────────────────── WHAT WE BUILD (s2 comp) "Five lanes. One substrate." top-left Asymmetric grid: CORTEX flagship large (left ~55%), four smaller cards right ───────────────────────────────────────────────────────────────────────── */ .lanes-section { position: relative; z-index: 1; padding: clamp(64px,10vh,100px) clamp(20px,6vw,80px); border-top: 1px solid rgba(183,168,255,0.05); overflow: hidden; } /* Faint purple ambient right-edge per comp */ .lanes-ambient { position: absolute; top: 0; right: 0; width: 38%; height: 100%; pointer-events: none; background: radial-gradient( ellipse at 100% 40%, rgba(109,90,224,0.07) 0%, transparent 60% ); } .lanes-header { max-width: 1160px; margin: 0 auto clamp(32px,5vmin,52px); } .lanes-title { font-size: clamp(1.3rem,3.2vw,2.1rem); font-weight: 400; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; } /* Asymmetric grid: left ~col 1-7 (flagship), right col 8-12 (2×2 smaller) */ .lanes-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; gap: clamp(10px,1.6vw,16px); align-items: stretch; } /* Flagship card — left column, full height (spans 2 rows) */ .lcard-flagship { grid-column: 1; grid-row: 1 / 3; } /* Smaller cards — right column, 2×2 */ .lcard-sm-1 { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr; gap: clamp(10px,1.6vw,16px); } .lcard-sm-2 { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: 1fr; gap: clamp(10px,1.6vw,16px); } /* ── Card base ─── */ .lcard { position: relative; border-radius: 12px; overflow: hidden; background: var(--ground-card); border: 1px solid rgba(183,168,255,0.08); transition: border-color 0.3s ease, box-shadow 0.3s ease; } .lcard:hover { border-color: rgba(183,168,255,0.16); box-shadow: 0 8px 28px rgba(0,0,0,0.28); } /* Lane top accent lines */ .lcard-cortex { --link-color: var(--cortex-ice); --link-hover-color: var(--cortex-blue); border-top: 2px solid rgba(70,184,255,0.42); } .lcard-services { border-top: 2px solid rgba(183,168,255,0.20); } .lcard-witchbyte { border-top: 2px solid rgba(140,100,180,0.30); /* Subtle green-tinged inner glow per comp */ box-shadow: inset 0 0 40px rgba(80,160,100,0.04); } .lcard-kits { border-top: 2px solid rgba(160,155,190,0.22); } .lcard-dungeon { --link-color: var(--ember-hi); --link-hover-color: var(--ember); border-top: 2px solid rgba(232,168,124,0.40); } /* ── Flagship inner layout ─── */ .lcard-flagship-inner { display: flex; flex-direction: column; height: 100%; min-height: 380px; } /* Flagship body */ .lcard-flagship-body { padding: clamp(28px,4vmin,44px) clamp(24px,3.5vw,40px); display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: clamp(20px,3vmin,32px); } /* Blue corner light-leak on flagship */ .lcard-cortex::after { content: ''; position: absolute; top: 0; right: 0; width: 42%; height: 42%; background: radial-gradient( ellipse at 100% 0%, rgba(70,184,255,0.10) 0%, transparent 65% ); pointer-events: none; } /* Flagship node constellation (visual right area, inside the card) */ .flagship-constellation { position: absolute; top: 0; right: 0; width: 45%; height: 100%; pointer-events: none; opacity: 0.45; } /* ── Secondary card body ─── */ .lcard-body { padding: clamp(18px,2.8vmin,28px) clamp(16px,2.4vw,24px); display: flex; flex-direction: column; gap: 14px; height: 100%; } .lcard-stack { display: flex; flex-direction: column; gap: 10px; flex: 1; } .lcard-footer { display: flex; flex-direction: column; gap: 9px; margin-top: auto; } /* Title rows */ .lcard-title-row { display: flex; align-items: center; gap: 9px; } .lcard-node { width: 26px; height: 26px; flex-shrink: 0; } .lcard-flagship .lcard-node { width: 34px; height: 34px; } .lcard-lane-name { font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.20em; text-transform: uppercase; color: var(--text-muted); } .lcard-cortex .lcard-lane-name { color: rgba(70,184,255,0.72); } .lcard-witchbyte .lcard-lane-name { color: rgba(183,168,255,0.62); } .lcard-dungeon .lcard-lane-name { color: rgba(232,168,124,0.72); } .lcard-name { font-size: clamp(0.9375rem,2vw,1.3rem); font-weight: 500; letter-spacing: -0.01em; color: var(--text); line-height: 1.1; } .lcard-flagship .lcard-name { font-size: clamp(1.5rem,2.8vw,2.1rem); } .lcard-name .name-pending { display: block; margin-top: 4px; font-size: 0.55em; font-weight: 400; color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; } .lcard-promise { font-size: clamp(0.8rem,1.5vw,0.9rem); font-weight: 400; color: var(--text-secondary); line-height: 1.58; text-wrap: balance; } /* Status badges */ .lcard-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.625rem; font-weight: 400; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 4px; width: fit-content; } .lstatus-active { background: rgba(70,184,255,0.10); border: 1px solid rgba(70,184,255,0.24); color: var(--cortex-ice); } .lstatus-sellable { background: rgba(183,168,255,0.08); border: 1px solid rgba(183,168,255,0.18); color: var(--text-micro); } .lstatus-specced { background: rgba(150,100,200,0.08); border: 1px solid rgba(150,100,200,0.18); color: #C4B0E8; } .lstatus-product { background: rgba(160,155,190,0.08); border: 1px solid rgba(160,155,190,0.16); color: var(--text-micro); } .lstatus-ember { background: rgba(232,168,124,0.10); border: 1px solid rgba(232,168,124,0.24); color: var(--ember-hi); } .lstatus-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .lstatus-active .lstatus-dot { background: var(--cortex-blue); } .lstatus-sellable .lstatus-dot { background: var(--accent-hi); opacity: 0.70; } .lstatus-specced .lstatus-dot { background: #B47FD8; opacity: 0.80; } .lstatus-product .lstatus-dot { background: var(--text-micro); opacity: 0.70; } .lstatus-ember .lstatus-dot { background: var(--ember); } /* Descend link */ .lcard-link { font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.06em; color: var(--link-color, var(--accent-hi)); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: color 0.25s ease; margin-top: 6px; } .lcard-link:hover, .lcard-link:focus-visible { color: var(--link-hover-color, var(--text)); text-decoration: underline; } /* Dungeon Inn ember doorway glow — CSS-only approximation of the comp's lit doorway */ .dungeon-ember-glow { position: absolute; bottom: 0; left: 50%; right: 0; transform: translateX(-20%); width: 80%; height: 55%; pointer-events: none; background: radial-gradient( ellipse at 50% 100%, rgba(232,140,60,0.22) 0%, rgba(200,100,30,0.10) 35%, transparent 65% ); } /* ───────────────────────────────────────────────────────────────────────── BUILD LOG (s3 comp) Two-column layout: left ~⅓ (label + heading + caption), right ~⅔ (ledger) Faint purple aurora behind left caption only ───────────────────────────────────────────────────────────────────────── */ .buildlog-section { position: relative; z-index: 1; padding: clamp(64px,10vh,100px) clamp(20px,6vw,80px); border-top: 1px solid rgba(183,168,255,0.05); overflow: hidden; } /* Faint purple aurora left-side only */ .buildlog-aurora { position: absolute; top: 0; left: 0; width: 32%; height: 100%; pointer-events: none; background: radial-gradient( ellipse at 0% 55%, rgba(109,90,224,0.14) 0%, rgba(109,90,224,0.04) 40%, transparent 65% ); } .buildlog-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px,5vw,72px); align-items: start; } /* Left column */ .buildlog-left { position: relative; } .buildlog-eyebrow { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: clamp(14px,2.4vmin,22px); } .buildlog-heading { font-size: clamp(1.6rem,3.8vw,2.8rem); font-weight: 400; letter-spacing: -0.025em; color: var(--text); line-height: 1.08; margin-bottom: clamp(12px,2vmin,20px); } .buildlog-caption { font-size: clamp(0.8125rem,1.6vw,0.9375rem); font-weight: 400; color: var(--text-secondary); line-height: 1.60; text-wrap: balance; } /* Right column — ledger */ .buildlog-ledger { display: flex; flex-direction: column; } .log-entry { display: grid; grid-template-columns: 72px 16px 1fr; gap: clamp(10px,1.8vw,20px); padding: clamp(18px,2.8vmin,26px) 0; border-bottom: 1px solid rgba(183,168,255,0.06); align-items: baseline; } .log-entry:last-child { border-bottom: none; } .log-date { font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace; font-size: 0.75rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0.03em; white-space: nowrap; } .log-dash { color: rgba(183,168,255,0.28); font-family: ui-monospace, monospace; font-size: 0.75rem; align-self: baseline; padding-top: 1px; } .log-text { font-size: clamp(0.8125rem,1.55vw,0.9375rem); font-weight: 400; color: var(--text); line-height: 1.55; text-wrap: balance; } /* ───────────────────────────────────────────────────────────────────────── LOCAL FIRST (replaces house rules — mini-minimalist) Vast negative space, one calm large statement. s4 visual register. ───────────────────────────────────────────────────────────────────────── */ .local-section { position: relative; z-index: 1; padding: clamp(96px,16vh,160px) clamp(20px,6vw,80px); border-top: 1px solid rgba(183,168,255,0.04); text-align: center; overflow: hidden; } /* Whisper purple ambient — very subtle center glow */ .local-ambient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( ellipse at 50% 50%, rgba(109,90,224,0.06) 0%, transparent 58% ); } .local-statement { position: relative; font-size: clamp(2.0rem,5.5vw,4.0rem); font-weight: 400; letter-spacing: -0.025em; color: var(--text); text-wrap: balance; line-height: 1.1; } /* ───────────────────────────────────────────────────────────────────────── LAUNCH NOTES (s5 comp) Centered; soft radial purple dawn vignette from bottom edge. ───────────────────────────────────────────────────────────────────────── */ .launch-section { position: relative; z-index: 1; padding: clamp(80px,14vh,140px) clamp(20px,6vw,80px) clamp(64px,10vh,100px); border-top: 1px solid rgba(183,168,255,0.05); text-align: center; overflow: hidden; } /* Radial purple dawn rising from bottom — matches comp vignette */ .launch-dawn { position: absolute; bottom: 0; left: 0; right: 0; height: 70%; pointer-events: none; background: radial-gradient( ellipse at 50% 110%, rgba(109,90,224,0.20) 0%, rgba(90,70,200,0.08) 35%, transparent 65% ); } /* Very faint starfield density bump in this section */ .launch-stars { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(183,168,255,0.40) 1px, transparent 1px), radial-gradient(circle, rgba(183,168,255,0.22) 1px, transparent 1px); background-size: 73px 73px, 41px 41px; background-position: 17px 23px, 37px 11px; opacity: 0.18; } .launch-inner { position: relative; max-width: 580px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(16px,3vmin,26px); } .launch-headline { font-size: clamp(1.2rem,2.8vw,1.9rem); font-weight: 400; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; line-height: 1.2; } .launch-sub { font-size: clamp(0.8125rem,1.6vw,0.9375rem); color: var(--text-secondary); line-height: 1.62; text-wrap: balance; max-width: 480px; } .launch-form { display: flex; gap: 10px; width: 100%; max-width: 440px; flex-wrap: wrap; margin-top: clamp(6px,1.2vmin,12px); } .launch-input { flex: 1; min-width: 0; padding: 11px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(183,168,255,0.16); border-radius: 8px; color: var(--text); font-size: 0.875rem; font-family: inherit; outline: none; transition: border-color 0.25s ease; cursor: not-allowed; } .launch-input::placeholder { color: var(--text-muted); } /* ───────────────────────────────────────────────────────────────────────── FOOTER ───────────────────────────────────────────────────────────────────────── */ footer { position: relative; z-index: 1; padding: clamp(24px,4vmin,40px) clamp(20px,6vw,80px); border-top: 1px solid rgba(183,168,255,0.06); text-align: center; } .footer-line { font-size: 0.6875rem; color: var(--text-footer); letter-spacing: 0.06em; } .footer-links { margin-top: 8px; } footer a { color: var(--text-secondary); display: inline-block; padding: 8px 2px; } footer a:hover, footer a[aria-current="page"] { color: var(--accent-hi); } /* ───────────────────────────────────────────────────────────────────────── SCROLL REVEAL (enhance, never gate — opacity 0.6→1 + 12px rise) ───────────────────────────────────────────────────────────────────────── */ .reveal { opacity: 0.6; transform: translateY(12px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal.visible { opacity: 1; transform: translateY(0); } /* ───────────────────────────────────────────────────────────────────────── REDUCED MOTION ───────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } .hero-mark-wrap { animation: none; } .cosmos-neb { animation: none; } .cosmos-stars { display: none; } .h-shimmer-bright, .h-shimmer-fade { animation: none; opacity: 0; } .reveal { opacity: 1; transform: none; transition: none; } } /* ───────────────────────────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .lanes-grid { grid-template-columns: 1fr 1fr; } .lcard-flagship { grid-column: 1 / -1; grid-row: 1; } .lcard-sm-1 { grid-column: 1 / -1; grid-row: 2; } .lcard-sm-2 { grid-column: 1 / -1; grid-row: 3; } .lcard-sm-1 .lcard, .lcard-sm-2 .lcard { min-height: 96px; } .buildlog-inner { grid-template-columns: 1fr; gap: clamp(28px,4vmin,44px); } } @media (max-width: 700px) { .lcard-sm-1, .lcard-sm-2 { grid-template-columns: 1fr; } .lcard-flagship-inner { min-height: unset; } .flagship-constellation { display: none; } .nav-links li:not(:last-child) { display: none; } .chassis-mono-row { flex-direction: column; gap: 8px; } .chassis-mono-sep { display: none; } } @media (max-width: 460px) { .hero { min-height: 92svh; padding-top: clamp(82px,11vh,108px); padding-bottom: clamp(42px,7vh,62px); } .hero-mark-wrap { width: clamp(180px,54vmin,240px); height: clamp(180px,54vmin,240px); } .launch-form { flex-direction: column; } .log-entry { grid-template-columns: 60px 12px 1fr; gap: 8px; } } a:focus-visible, button:focus-visible { outline: 2px solid var(--link-color, var(--accent-hi)); outline-offset: 4px; } /* ── Multi-page nav additions ─────────────────────────────────────────── */ .nav-links a.nav-active, .nav-links a[aria-current="page"] { color: var(--accent-hi); border-bottom: 1.5px solid var(--accent-hi); padding-bottom: 2px; } .nav-links a.nav-cta { padding: 7px 16px; font-size: .6875rem; color: var(--accent-hi); } .nav-links a.nav-cta[aria-current="page"] { border-color: var(--accent-hi); border-bottom-width: 1px; } /* Hamburger button — hidden on desktop */ .nav-menu-btn { display: none; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; z-index: 110; } .nav-burger { display: block; width: 22px; height: 2px; background: var(--accent-hi); border-radius: 2px; position: relative; transition: background 0.2s; } .nav-burger::before, .nav-burger::after { content: ''; display: block; width: 22px; height: 2px; background: var(--accent-hi); border-radius: 2px; position: absolute; left: 0; transition: transform 0.22s ease, top 0.22s ease; } .nav-burger::before { top: -7px; } .nav-burger::after { top: 7px; } /* Mobile sheet */ .nav-mobile-sheet { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(10,11,20,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); flex-direction: column; align-items: flex-start; padding: clamp(24px,6vw,48px); padding-top: clamp(64px,10vh,96px); } .nav-mobile-sheet:not([hidden]) { display: flex; } .nav-mobile-sheet ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; width: 100%; } .nav-mobile-sheet li a { display: block; font-size: clamp(1.25rem,5vw,1.75rem); font-weight: 400; letter-spacing: 0.06em; color: var(--text); text-decoration: none; padding: 14px 0; min-height: 44px; border-bottom: 1px solid rgba(183,168,255,0.08); transition: color 0.2s; } .nav-mobile-sheet li a:hover, .nav-mobile-sheet li a[aria-current="page"] { color: var(--accent-hi); } .nav-close-btn { position: absolute; top: clamp(16px,3vh,28px); right: clamp(20px,5vw,40px); background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: 1.25rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: color 0.2s; } .nav-close-btn:hover { color: var(--text); } @media (max-width: 700px) { .nav-links { display: none; } .nav-menu-btn { display: flex; } } /* Mobile nav keyboard trap + body scroll lock when sheet is open */ body.nav-open { overflow: hidden; } /* Current homepage: retain the aurora, mark, colour system and glass controls. */ .home-page .hero { min-height: 90svh; padding-bottom: clamp(56px, 8vh, 88px); } .home-page .hero-mark-wrap { width: clamp(180px, 30vmin, 300px); height: clamp(180px, 30vmin, 300px); } .home-page .hero-type { margin-top: clamp(24px, 4vmin, 40px); max-width: 720px; } .home-page .hero-tagline { letter-spacing: .13em; line-height: 1.65; } .home-page .hero-oneliner { max-width: 540px; } .home-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 24px; } .home-actions .glass-btn { min-height: 46px; } .glass-btn-primary { background: rgba(109, 90, 224, .23); border-color: rgba(183, 168, 255, .4); } .glass-btn-primary:hover { background: rgba(109, 90, 224, .35); } .hero-project-note { color: var(--text-secondary); font-size: .75rem; line-height: 1.6; text-decoration: none; margin-top: 14px; } .hero-project-note:hover { color: var(--accent-hi); } .home-page .lanes-section { scroll-margin-top: 60px; } .home-project-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; } .home-project-heading .buildlog-eyebrow { margin-bottom: 14px; } .home-section-note { font-size: .875rem; line-height: 1.65; color: var(--text-secondary); } .home-project-grid { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .home-project { display: flex; flex-direction: column; } .project-art { height: 210px; position: relative; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(183, 168, 255, .08); } .cortex-art { background: radial-gradient(ellipse at center, rgba(70, 184, 255, .09), transparent 70%); } .cortex-art svg { width: 260px; height: 195px; } .deck-art { background: radial-gradient(ellipse at center, rgba(109, 90, 224, .13), transparent 70%); } .deck-art img { position: relative; border-radius: 8px; transform: rotate(-8deg); box-shadow: 0 12px 35px #080711; } .deck-mark-orbit { position: absolute; width: 152px; height: 152px; border: 1px solid rgba(183, 168, 255, .18); border-radius: 24px; transform: rotate(-8deg); } .deck-mark-orbit::after { content: ''; position: absolute; inset: -25px; border: 1px solid rgba(183, 168, 255, .08); border-radius: 36px; } .underveil-art { background: #151822; } .underveil-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; } .home-project-body { padding: clamp(20px, 2.2vw, 28px); display: flex; flex: 1; flex-direction: column; gap: 12px; } .project-category { font-size: .625rem; text-transform: uppercase; letter-spacing: .16em; color: var(--text-muted); } .home-project .lcard-name { font-size: 1.5rem; font-weight: 450; } .home-project .lcard-promise { text-wrap: pretty; line-height: 1.7; } .home-project .lcard-footer { padding-top: 14px; gap: 12px; } .home-project .lcard-link { min-height: 44px; margin-top: 0; font-size: .8125rem; } .home-project-footnote { max-width: 1160px; margin: 28px auto 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.8; } .home-project-footnote a, .home-text-link { text-underline-offset: 5px; } .home-project-footnote a { display: inline-block; padding: 8px 0; margin-left: 8px; } .home-approach { padding-top: clamp(64px, 9vh, 100px); padding-bottom: clamp(64px, 9vh, 100px); } .home-approach .buildlog-heading { line-height: 1.25; } .home-approach .buildlog-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .home-approach .buildlog-heading { font-size: clamp(1.6rem, 3vw, 2.375rem); } .home-method { list-style: none; padding: 0; margin: 0; } .home-method li { display: grid; grid-template-columns: 28px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid rgba(183, 168, 255, .12); } .home-method .log-date { padding-top: 3px; } .home-method h3 { font-weight: 450; font-size: 1rem; margin-bottom: 10px; color: var(--text); } .home-method p { color: var(--text-secondary); font-size: .875rem; line-height: 1.75; max-width: 54ch; } .home-contact { padding-top: clamp(64px, 9vh, 100px); padding-bottom: clamp(64px, 9vh, 100px); } .home-contact .launch-headline { font-size: clamp(1.75rem, 4vw, 2.8rem); } .home-contact .launch-sub { max-width: 550px; font-size: .9375rem; line-height: 1.8; } .home-text-link { padding: 14px 0; font-size: .8125rem; } @media (max-width: 1024px) { .home-approach .buildlog-inner { grid-template-columns: 1fr; } } @media (max-width: 850px) { .home-project-grid { grid-template-columns: 1fr; max-width: 600px; } .home-project-heading { flex-direction: column; align-items: start; max-width: 600px; gap: 16px; } .home-project-footnote { max-width: 600px; } .project-art { height: 220px; } .underveil-art img { object-fit: contain; } } @media (max-width: 460px) { .home-page .hero { padding-top: 94px; } .home-page .hero-type { gap: 14px; } .home-page .hero-cta-wrap { width: 100%; margin-top: 14px; } .home-actions .glass-btn { justify-content: center; } .home-project-footnote a { margin-left: 0; display: block; } } /* Navigation remains usable when JavaScript is unavailable. */ @media (max-width: 700px) { html:not(.js) .nav-links { display: flex; flex-wrap: wrap; gap: 10px 16px; } html:not(.js) .nav-links li { display: block; } html:not(.js) .nav-menu-btn { display: none; } html:not(.js) header nav { flex-wrap: wrap; } } /* ── Reduced-motion: disable mobile sheet transitions ─────────────────── */ @media (prefers-reduced-motion: reduce) { .nav-mobile-sheet { transition: none; } .nav-burger, .nav-burger::before, .nav-burger::after { transition: none; } }