/* ============================================================ LULIUS INNOVATION — Operational design system warm-black ground · heavy tight sans · warm metal accent · mono labels v2 — warm elevation tiers + readability pass ============================================================ */ :root { /* ── warm elevation scale + gold glow (Option A) ── Each tier = a soft gold radial glow layered over a vertical gradient. surface-0 = page base (solid) · tier-1 = banded section · tier-2 = highest band panel = raised cards · climax = radial gold focal section */ --surface-0: #060605; /* solid page base (also used as a text color) */ --tier-1: radial-gradient(90% 130% at 0% 0%, rgba(200,164,92,.08) 0%, transparent 55%), linear-gradient(180deg, #120E08 0%, #0B0806 100%); --tier-2: radial-gradient(100% 130% at 50% 0%, rgba(200,164,92,.10) 0%, transparent 60%), linear-gradient(180deg, #1A140B 0%, #100C07 100%); --panel-grad: linear-gradient(180deg, #221A10 0%, #181109 100%); --panel-2: #2A2114; /* card hover */ --panel-line: #312615; /* warm card border */ --climax-grad: radial-gradient(120% 150% at 50% 0%, rgba(200,164,92,.22) 0%, transparent 55%), radial-gradient(120% 140% at 50% 0%, #1C1109 0%, #0C0806 60%); /* ── legacy aliases (so existing components keep working) ── --ink → page base color (was #050505) --ink-2 → banded section (was #0C0C0C) — now the warm gradient + glow --ink-3 → highest band (was #141414) --panel → raised cards */ --ink: var(--surface-0); --ink-2: var(--tier-1); --ink-3: var(--tier-2); --panel: var(--panel-grad); --paper: #F5F5F4; --paper-2: #E7E5E2; /* readability: --mute lightened from #6E6E6A (~3.9:1, FAILS AA) to ~5.4:1 */ --mute: #8A8A85; --mute-2: #9A9A95; --line: #211F19; /* faintly warm hairline */ --line-2: #2E2A22; --accent: #C8A45C; /* warm metal */ --signal: #E94842; /* alert red, used sparingly */ --max: 1320px; --pad-x: clamp(20px, 4vw, 56px); --f-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif; --f-body: "Inter", ui-sans-serif, system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* ── READABILITY RULE OF THUMB ────────────────────────────── Mono UI labels: floor at 12px. Use --mute-2 for anything below ~18px; reserve --mute for larger/decorative text only. ──────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* #root clips horizontal overflow (e.g. a .wrap's edge padding spilling a few px past a narrow phone) so the page can't scroll sideways. Applied to the app container, NOT to — overflow on the root element propagates to the viewport and breaks position: sticky (the entry-page aside). clip on a non-root element does neither. */ #root { overflow-x: clip; } body { background: var(--surface-0); color: var(--paper); font-family: var(--f-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* ─────── grid overlay (operational vibe) ─────── */ body.grid-on::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(to right, rgba(200,164,92,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(200,164,92,.045) 1px, transparent 1px); background-size: 80px 80px; mix-blend-mode: screen; } /* ─────── layout primitives ─────── */ .wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad-x); } .row { display: flex; } .col { display: flex; flex-direction: column; } .hide-mobile { } @media (max-width: 760px) { .hide-mobile { display: none !important; } } /* ─────── type system ─────── */ .eyebrow { font-family: var(--f-mono); font-size: 14px; /* was 16 — calmed to read as a label, not a heading */ letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .eyebrow.mute { color: var(--mute-2); } .eyebrow .dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: 8px; transform: translateY(-1px); } .display { font-family: var(--f-display); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; font-size: clamp(40px, 7.5vw, 112px); text-wrap: balance; } .display.lg { font-size: clamp(56px, 10vw, 160px); line-height: 0.92; } .h1 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.0; font-size: clamp(36px, 5.4vw, 76px); text-wrap: balance; } .h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(28px, 3.8vw, 52px); text-wrap: balance; } .h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; font-size: clamp(20px, 2vw, 26px); } .lede { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; color: var(--paper); max-width: 60ch; } .lede.mute { color: var(--mute-2); } /* ─────── buttons ─────── */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-family: var(--f-mono); font-size: 12px; /* was 11 — floor for tracked uppercase */ letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--paper); background: var(--paper); color: var(--ink); transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); } .btn .arrow { font-family: var(--f-display); font-size: 14px; letter-spacing: 0; } .btn.ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.35); } .btn.ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn.compact { padding: 10px 14px; font-size: 11px; } /* was 10.5 */ /* ─────── section ─────── */ .section { padding: clamp(80px, 10vw, 160px) 0; position: relative; } .section.tight { padding: clamp(56px, 7vw, 96px) 0; } .section.flush { padding: 0; } .divider { height: 1px; background: var(--line); width: 100%; } .divider.accent { background: var(--accent); } /* index label like "01 / Capabilities" */ .idx { font-family: var(--f-mono); font-size: 14px; /* was 19 — was shouty + low-contrast */ letter-spacing: .14em; color: var(--mute-2); /* was --mute (failed contrast) */ text-transform: uppercase; display: flex; align-items: center; gap: 12px; } .idx .num { color: var(--accent); } /* ─────── card primitives — raised above their section ─────── */ .tile { border: 1px solid var(--panel-line); background: var(--panel); padding: 28px; display: flex; flex-direction: column; gap: 18px; transition: border-color .2s ease, background .2s ease, transform .2s ease; position: relative; } .tile:hover { border-color: var(--panel-2); background: var(--panel-2); } .tile .num { font-family: var(--f-mono); font-size: 12px; /* was 11 */ letter-spacing: .14em; color: var(--accent); } /* ─────── scrolling marquee ─────── */ @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee { display: flex; width: max-content; animation: marquee 40s linear infinite; } /* ─────── nav ─────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 16px var(--pad-x); display: flex; align-items: center; justify-content: space-between; transition: background .2s ease, border-color .2s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(6,6,5,.80); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); } .nav-links { display: flex; gap: 28px; font-family: var(--f-mono); font-size: 12px; /* was 11.5 */ letter-spacing: .12em; text-transform: uppercase; color: var(--paper); } .nav-links a { position: relative; padding: 6px 0; opacity: 0.85; /* was .78 */ transition: opacity .15s ease; } .nav-links a:hover, .nav-links a.active { opacity: 1; } .nav-links a.active::after { content: ""; position: absolute; bottom: -2px; left: 0; height: 1px; width: 100%; background: var(--accent); } .nav-right { display: flex; align-items: center; gap: 18px; } /* ─────── drawer ─────── */ .drawer { position: fixed; inset: 0; background: var(--surface-0); z-index: 200; display: flex; flex-direction: column; transform: translateY(-100%); transition: transform .55s cubic-bezier(.7,.05,.2,1); overflow: hidden; } .drawer.open { transform: translateY(0); } .drawer-inner { flex: 1; padding: 28px var(--pad-x) 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-content: stretch; } @media (max-width: 880px) { .drawer-inner { grid-template-columns: 1fr; gap: 40px; } } .drawer-list { display: flex; flex-direction: column; gap: 2px; margin-top: 60px; } .drawer-link { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.025em; font-size: clamp(40px, 6vw, 80px); line-height: 1.05; padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; justify-content: space-between; gap: 20px; transition: padding-left .25s ease, color .2s ease; color: var(--paper); } .drawer-link:hover { padding-left: 12px; color: var(--accent); } .drawer-link .idxno { font-family: var(--f-mono); font-size: 12px; font-weight: 400; letter-spacing: .14em; color: var(--mute-2); /* was --mute */ } .drawer-side { border-left: 1px solid var(--line); padding-left: 40px; margin-top: 60px; display: flex; flex-direction: column; gap: 36px; } @media (max-width: 880px) { .drawer-side { border-left: none; padding-left: 0; margin-top: 20px; } } .drawer-block .label { font-family: var(--f-mono); font-size: 12px; /* was 11 */ letter-spacing: .16em; text-transform: uppercase; color: var(--mute-2); /* was --mute */ margin-bottom: 12px; } /* close button */ .x-close { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; /* was 11 */ letter-spacing: .14em; text-transform: uppercase; color: var(--paper); } .x-close .x { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--paper); } /* ─────── footer ─────── */ .foot { border-top: 1px solid var(--line); padding: 80px 0 40px; background: var(--tier-1); /* banded — warm gradient + glow lifts footer off the base */ } .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; align-items: start; } @media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } } .foot h5 { font-family: var(--f-mono); font-size: 12px; /* was 11 */ letter-spacing: .16em; text-transform: uppercase; color: var(--mute-2); /* was --mute */ margin: 0 0 14px; font-weight: 500; } .foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .foot a { opacity: .9; transition: opacity .15s, color .15s; } /* was .85 */ .foot a:hover { color: var(--accent); opacity: 1; } /* ─────── hero ─────── */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding-top: 120px; } .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,6,5,.55) 0%, rgba(6,6,5,.4) 40%, rgba(6,6,5,.92) 100%); } .hero-media image-slot { width: 100%; height: 100%; } .hero-content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px, 6vw, 88px); } .hero-meta { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.18); margin-bottom: 32px; } .hero-meta .item { font-family: var(--f-mono); font-size: 12px; /* was 11 */ letter-spacing: .14em; text-transform: uppercase; color: var(--paper); opacity: .9; /* was .8 — over bright video frames */ } .hero-meta .item b { color: var(--accent); font-weight: 500; } @media (max-width: 760px) { .hero-meta { flex-direction: column; align-items: flex-start; gap: 12px; } } /* corner ticks */ .corner-ticks { position: absolute; top: 96px; left: var(--pad-x); right: var(--pad-x); bottom: 24px; pointer-events: none; z-index: 1; } .corner-ticks::before, .corner-ticks::after, .corner-ticks > i:nth-child(1), .corner-ticks > i:nth-child(2) { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--accent); border-style: solid; border-width: 0; } .corner-ticks::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; } .corner-ticks::after { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; } .corner-ticks > i:nth-child(1) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; display:block; } .corner-ticks > i:nth-child(2) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; display:block; } /* ─────── logo strip ─────── */ .logo-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; display: flex; align-items: center; gap: 56px; overflow: hidden; } .logo-strip .label { flex-shrink: 0; padding: 0 var(--pad-x) 0 var(--pad-x); border-right: 1px solid var(--line); min-height: 40px; display: flex; align-items: center; } .logo-strip-track { overflow: hidden; flex: 1; } .logo-strip .item { display: inline-flex; align-items: center; height: 40px; padding: 0 56px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .04em; color: var(--mute-2); text-transform: uppercase; white-space: nowrap; } /* ─────── product cards — raised above their section ─────── */ .product-card { display: grid; grid-template-columns: 1fr; border: 1px solid var(--panel-line); background: var(--panel); overflow: hidden; transition: border-color .25s ease, background .25s ease; } .product-card:hover { border-color: var(--accent); } .product-card .media { aspect-ratio: 4 / 3; background: #0A0908; position: relative; border-bottom: 1px solid var(--panel-line); } .product-card .body { padding: 28px; display: flex; flex-direction: column; gap: 16px; } .product-card .body .meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 12px; /* was 11 */ letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); /* was --mute */ } .product-card .body .meta b { color: var(--accent); font-weight: 500; } /* ─────── numbers / stats ─────── */ .stat .n { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.03em; line-height: 0.95; font-size: clamp(48px, 6vw, 84px); color: var(--paper); display: flex; align-items: baseline; gap: 4px; } .stat .n .u { font-size: 0.45em; color: var(--accent); font-weight: 500; letter-spacing: -0.01em; } .stat .lbl { font-family: var(--f-mono); font-size: 12px; /* was 11 */ letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); /* was --mute */ margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } /* ─────── blockquote ─────── */ .pull { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(28px, 3.4vw, 44px); color: var(--paper); text-wrap: balance; } .pull .accent { color: var(--accent); } /* ─────── breadcrumb ─────── */ .crumb { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 12px; /* was 11 */ letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); /* was --mute */ } .crumb a { color: var(--mute-2); transition: color .15s; } .crumb a:hover { color: var(--paper); } .crumb .sep { color: var(--line-2); } .crumb .curr { color: var(--accent); } /* ─────── utility ─────── */ .mute { color: var(--mute-2); } .accent-text { color: var(--accent); } .tabular { font-variant-numeric: tabular-nums; } .no-scroll { overflow: hidden; } /* ── opt-in tier classes ────────────────────────────────────── Add these to any
to override its default tier: .surface-1 warm banded gradient + glow (same as --ink-2 default) .surface-2 highest warm band — use for the Platform section .climax radial gold focal glow — use for the Contact CTA ──────────────────────────────────────────────────────────── */ .surface-1 { background: var(--tier-1) !important; } .surface-2 { background: var(--tier-2) !important; } .climax { background: var(--climax-grad) !important; } /* ─────── small-screen ─────── */ @media (max-width: 760px) { .nav-links { display: none; } } /* breadcrumb + doc-id header rows: stack instead of squeezing side-by-side */ @media (max-width: 600px) { .doc-head { flex-direction: column !important; align-items: flex-start !important; gap: 10px; } /* Long CTA labels (e.g. "Inside Aviation Status Dashboard") are nowrap by default, which forces a grid track wider than a phone and clips the arrow. Allow buttons to wrap on small screens so they stay inside the column. */ .btn { white-space: normal; } }