/* ============================================================ Mozart — directions.css Six self-contained "worlds." Each overrides the design-system tokens (so the entire page — both the light "page" world and the dark "cabinet" world — re-skins at once), restyles the written wordmark, and adds a handful of layout/texture rules. Applied via (N = 1..6). Each is mono/technical in the wordmark, but a distinct world of type, color, and layout. Vinyl grooves recur as the motif. ============================================================ */ /* shared — wordmark plumbing + blink */ .word { position: relative; } .wm-text { font-style: normal; display: inline-block; } @keyframes mz-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* ============================================================ DIRECTION 1 — "LETTERPRESS" Warm editorial. A refined, quieter evolution of today's Mozart. Newsreader serif · Hanken Grotesk · IBM Plex Mono. ============================================================ */ :root[data-direction="1"] { --font-display: 'Newsreader', Georgia, serif; --font-sans: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --chalk: #F4F1E8; --chalk-deep: #E9E3D4; --paper: #FCFAF4; --ink: #221B14; --cabinet: #221A13; --cabinet-deep: #150F09; --cabinet-2: #2F261C; --terracotta: #A8431F; --terracotta-deep: #7E3015; --terracotta-glow: #CB6034; --terracotta-soft: #E4C9B4; --steel: #6E5C3F; --steel-deep: #463A28; --steel-soft: #A2895E; --stone: #8A7F6E; --stone-2: #A89C87; --fg-2: #463B30; --fg-3: #8A7F6E; --rule: #DBD3C1; --rule-strong: #C9C0AC; --hairline: rgba(34,27,20,0.13); --radius-1: 2px; --radius-2: 3px; --radius-3: 6px; } :root[data-direction="1"] .wm-text { font-family: var(--font-mono); font-weight: 500; text-transform: lowercase; letter-spacing: 0.02em; color: var(--ink); } :root[data-direction="1"] .word::after { content: "."; color: var(--terracotta); font-family: var(--font-mono); } :root[data-direction="1"] footer.mz-foot .wm-text { color: var(--chalk); } /* literary heads — Newsreader looks best a touch larger & looser */ :root[data-direction="1"] h2.h, :root[data-direction="1"] .hero h1 { letter-spacing: -0.012em; } /* ============================================================ DIRECTION 2 — "PHOSPHOR TERMINAL" Retro-computer. Green-on-black, scanlines, blinking cursor. JetBrains Mono everywhere · Space Grotesk for body. ============================================================ */ :root[data-direction="2"] { --font-display: 'JetBrains Mono', ui-monospace, monospace; --font-sans: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --chalk: #E4EDE4; --chalk-deep: #D2DDCF; --paper: #EEF3EB; --ink: #0B1A11; --cabinet: #07110A; --cabinet-deep: #030806; --cabinet-2: #0E1C12; --terracotta: #2FBF5E; --terracotta-deep: #1C9446; --terracotta-glow: #5DEA8A; --terracotta-soft: #B6E6C4; --steel: #4A5C50; --steel-deep: #2A3830; --steel-soft: #7A8E80; --stone: #6E7E72; --stone-2: #8FA092; --fg-2: #21372A; --fg-3: #5E7065; --rule: #C6D2C4; --rule-strong: #AEBDAC; --hairline: rgba(11,26,17,0.16); --radius-1: 0; --radius-2: 0; --radius-3: 0; --accent-fg: #04140A; } /* display headings render as bold mono, not italic serif */ :root[data-direction="2"] h2.h, :root[data-direction="2"] h3.h, :root[data-direction="2"] .hero h1, :root[data-direction="2"] p.lead, :root[data-direction="2"] .stat-big, :root[data-direction="2"] .price, :root[data-direction="2"] .testi .quote, :root[data-direction="2"] .final-cta h2, :root[data-direction="2"] .principles .p h4, :root[data-direction="2"] .levels .lvl h5, :root[data-direction="2"] .role-card h4, :root[data-direction="2"] .fit h3, :root[data-direction="2"] .hero-visual .sleeve .caption .agent, :root[data-direction="2"] .hero-visual .sleeve .caption .orchestration { font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: -0.02em; } :root[data-direction="2"] p.lead { font-weight: 500; line-height: 1.5; } :root[data-direction="2"] .hero h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; } :root[data-direction="2"] .wm-text { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); } :root[data-direction="2"] .word::before { content: "~/"; color: var(--terracotta-deep); font-family: var(--font-mono); font-weight: 500; opacity: 0.8; } :root[data-direction="2"] .word::after { content: "\2588"; color: var(--terracotta); margin-left: 2px; animation: mz-blink 1.05s steps(1) infinite; font-family: var(--font-mono); } :root[data-direction="2"] footer.mz-foot .wm-text { color: var(--terracotta-glow); } :root[data-direction="2"] footer.mz-foot .word::before { color: var(--steel-soft); } /* bracketed section numbers, terminal style */ :root[data-direction="2"] .secnum::before { content: "["; } :root[data-direction="2"] .secnum::after { content: "]"; } :root[data-direction="2"] .secnum { letter-spacing: 0.14em; } /* scanlines on the dark world */ :root[data-direction="2"] section.band.cabinet, :root[data-direction="2"] .final-cta, :root[data-direction="2"] footer.mz-foot, :root[data-direction="2"] .plan.feature { background-image: repeating-linear-gradient(0deg, rgba(95,234,138,0.05) 0 1px, transparent 1px 3px); background-blend-mode: screen; } :root[data-direction="2"] .hero { background-image: repeating-linear-gradient(0deg, rgba(11,26,17,0.025) 0 1px, transparent 1px 3px); } /* phosphor glow on the lit accents */ :root[data-direction="2"] .final-cta h2 em { text-shadow: 0 0 18px rgba(93,234,138,0.5); } :root[data-direction="2"] .hero h1 em { color: var(--terracotta-deep); } /* vinyl reads as a green oscilloscope ring */ :root[data-direction="2"] .hero-visual .vinyl { background: radial-gradient(circle at center, #1c2a1f 0%, #0c150f 60%, #050a07 100%); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.7), inset 0 0 60px rgba(47,191,94,0.12), inset 0 0 0 1px rgba(47,191,94,0.18); } :root[data-direction="2"] .hero-visual .vinyl::after { box-shadow: 0 0 0 1px rgba(47,191,94,0.4); } /* ============================================================ DIRECTION 3 — "SWISS SIGNAL" Linear-grade minimalism. Neutral ground, one electric cobalt. Space Grotesk · Space Mono. Razor hairlines, zero radius. ============================================================ */ :root[data-direction="3"] { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-sans: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --chalk: #F6F6F4; --chalk-deep: #ECECE9; --paper: #FCFCFB; --ink: #14151A; --cabinet: #0C0D11; --cabinet-deep: #060709; --cabinet-2: #181A21; --terracotta: #3B43FF; --terracotta-deep: #2A30D6; --terracotta-glow: #7C82FF; --terracotta-soft: #C7C9FF; --steel: #6B6E76; --steel-deep: #3C3E45; --steel-soft: #9A9DA5; --stone: #84878F; --stone-2: #A6A9B0; --fg-2: #3A3C44; --fg-3: #84878F; --rule: #E1E1DD; --rule-strong: #CDCDC8; --hairline: rgba(20,21,26,0.11); --radius-1: 0; --radius-2: 0; --radius-3: 0; } /* geometric display — Space Grotesk, upright, tight */ :root[data-direction="3"] h2.h, :root[data-direction="3"] h3.h, :root[data-direction="3"] .hero h1, :root[data-direction="3"] .stat-big, :root[data-direction="3"] .price, :root[data-direction="3"] .final-cta h2, :root[data-direction="3"] .principles .p h4, :root[data-direction="3"] .levels .lvl h5, :root[data-direction="3"] .role-card h4, :root[data-direction="3"] .fit h3, :root[data-direction="3"] .hero-visual .sleeve .caption .agent, :root[data-direction="3"] .hero-visual .sleeve .caption .orchestration { font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: -0.03em; } :root[data-direction="3"] p.lead, :root[data-direction="3"] .testi .quote { font-family: var(--font-display); font-style: normal; font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; } :root[data-direction="3"] .wm-text { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); } :root[data-direction="3"] .word { border: 1.5px solid var(--ink); padding: 3px 8px 2px; } :root[data-direction="3"] footer.mz-foot .word { border-color: var(--chalk); } :root[data-direction="3"] footer.mz-foot .wm-text { color: var(--chalk); } /* hero accent stays cobalt, not a tint */ :root[data-direction="3"] .hero h1 em, :root[data-direction="3"] .final-cta h2 em { color: var(--terracotta); font-style: normal; } /* flat cards — kill shadows, lean on hairlines */ :root[data-direction="3"] .stat-card, :root[data-direction="3"] .principles .p, :root[data-direction="3"] .role-card, :root[data-direction="3"] .testi, :root[data-direction="3"] .plan, :root[data-direction="3"] .levels .lvl { box-shadow: none; } :root[data-direction="3"] .levels .lvl:hover { transform: translateY(-4px); box-shadow: none; border-color: var(--terracotta); } :root[data-direction="3"] .levels .lvl:nth-child(even):hover { transform: translateY(-4px); } /* oversized tabular section numbers */ :root[data-direction="3"] .secnum { font-size: 12px; letter-spacing: 0.22em; color: var(--terracotta); } /* vinyl as a precise hairline technical disc */ :root[data-direction="3"] .hero-visual .vinyl { background: repeating-radial-gradient(circle at center, transparent 0 7px, rgba(20,21,26,0.14) 7px 7.6px), radial-gradient(circle at center, var(--terracotta) 0 17%, transparent 17.5%), var(--paper); border: 1.5px solid var(--ink); box-shadow: none; } :root[data-direction="3"] .hero-visual .vinyl::before { background: var(--terracotta); box-shadow: 0 0 0 1.5px var(--ink); } :root[data-direction="3"] .hero-visual .vinyl::after { background: var(--ink); box-shadow: none; } :root[data-direction="3"] .hero-visual { transform: rotate(0deg); } :root[data-direction="3"] .hero-visual .sleeve { border-width: 1.5px; box-shadow: none; } /* ============================================================ DIRECTION 4 — "MAISON NOIR" Boutique luxury. Espresso-dark dominant, champagne gold. Bodoni Moda italic · Jost · Spline Sans Mono nameplate. ============================================================ */ :root[data-direction="4"] { --font-display: 'Bodoni Moda', 'Didot', Georgia, serif; --font-sans: 'Jost', system-ui, sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, monospace; --chalk: #ECE6DA; --chalk-deep: #DDD5C5; --paper: #F4EFE5; --ink: #1A1510; --cabinet: #161210; --cabinet-deep: #0B0806; --cabinet-2: #221B16; --terracotta: #C2A063; --terracotta-deep: #9C7E45; --terracotta-glow: #E0C28B; --terracotta-soft: #E7D7B6; --steel: #8A744B; --steel-deep: #564732; --steel-soft: #B49C6E; --stone: #968A78; --stone-2: #B0A491; --fg-2: #4A4034; --fg-3: #968A78; --rule: #D6CDBB; --rule-strong: #C2B7A1; --hairline: rgba(26,21,16,0.14); --radius-1: 0; --radius-2: 0; --radius-3: 2px; --accent-fg: #1A1510; } /* high-contrast fashion serif, big and airy */ :root[data-direction="4"] h2.h, :root[data-direction="4"] .hero h1, :root[data-direction="4"] .final-cta h2 { letter-spacing: 0; line-height: 1.02; } :root[data-direction="4"] .secnum, :root[data-direction="4"] .hero .tag { letter-spacing: 0.34em; color: var(--steel); } :root[data-direction="4"] section.band.cabinet .secnum { color: var(--terracotta-glow); } :root[data-direction="4"] .wm-text { font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.42em; padding-left: 0.42em; background: linear-gradient(180deg, var(--terracotta-glow), var(--terracotta-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-direction="4"] footer.mz-foot .wm-text { background: linear-gradient(180deg, var(--terracotta-glow), var(--terracotta)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* gold buttons — the brass catches light */ :root[data-direction="4"] .hero .ctas .primary, :root[data-direction="4"] .plan.feature .btn, :root[data-direction="4"] .final-cta .btn, :root[data-direction="4"] .mz-hdr-min .cta { background: linear-gradient(180deg, var(--terracotta-glow), var(--terracotta)); color: #1A1510; border-color: var(--terracotta-deep); } :root[data-direction="4"] .hero .ctas .primary:hover, :root[data-direction="4"] .plan.feature .btn:hover, :root[data-direction="4"] .final-cta .btn:hover, :root[data-direction="4"] .mz-hdr-min .cta:hover { filter: brightness(1.06); background: linear-gradient(180deg, var(--terracotta-glow), var(--terracotta)); } :root[data-direction="4"] .hero h1 em, :root[data-direction="4"] .final-cta h2 em { color: var(--terracotta-deep); } :root[data-direction="4"] section.band.cabinet h2.h em, :root[data-direction="4"] .final-cta h2 em { color: var(--terracotta-glow); } /* generous, ceremonial spacing */ :root[data-direction="4"] section.band { padding: 120px 0; } :root[data-direction="4"] .plan.feature { background: linear-gradient(160deg, #1F1813, var(--cabinet-deep)); } /* gold-rimmed record */ :root[data-direction="4"] .hero-visual .vinyl { box-shadow: 0 24px 48px -12px rgba(0,0,0,0.6), inset 0 0 80px rgba(0,0,0,0.55), 0 0 0 2px var(--terracotta-deep); } /* ============================================================ DIRECTION 5 — "BLUEPRINT" Engineering schematic. Blueprint navy + cyan, grid paper. Martian Mono display · IBM Plex Sans · IBM Plex Mono. ============================================================ */ :root[data-direction="5"] { --font-display: 'Martian Mono', ui-monospace, monospace; --font-sans: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --chalk: #E7EEF2; --chalk-deep: #D6E1E8; --paper: #EFF4F7; --ink: #0E2233; --cabinet: #0C1A28; --cabinet-deep: #06101A; --cabinet-2: #13283A; --terracotta: #1E9AB0; --terracotta-deep: #14707F; --terracotta-glow: #4FC9DB; --terracotta-soft: #B5DFE7; --steel: #4E6373; --steel-deep: #2E3F4C; --steel-soft: #7E94A2; --stone: #6E8190; --stone-2: #92A3AF; --fg-2: #2C4356; --fg-3: #6E8190; --rule: #C8D6DE; --rule-strong: #B2C4CE; --hairline: rgba(14,34,51,0.13); --radius-1: 0; --radius-2: 0; --radius-3: 0; } /* Martian Mono is heavy — display headings shrink a touch & go upright */ :root[data-direction="5"] h2.h, :root[data-direction="5"] h3.h, :root[data-direction="5"] .hero h1, :root[data-direction="5"] .principles .p h4, :root[data-direction="5"] .levels .lvl h5, :root[data-direction="5"] .role-card h4, :root[data-direction="5"] .fit h3, :root[data-direction="5"] .final-cta h2, :root[data-direction="5"] .hero-visual .sleeve .caption .agent, :root[data-direction="5"] .hero-visual .sleeve .caption .orchestration { font-family: var(--font-display); font-style: normal; font-weight: 600; letter-spacing: -0.04em; } :root[data-direction="5"] h2.h, :root[data-direction="5"] .hero h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; } :root[data-direction="5"] .final-cta h2 { font-size: clamp(30px, 4vw, 52px); } :root[data-direction="5"] .stat-big, :root[data-direction="5"] .price { font-family: var(--font-display); font-style: normal; font-weight: 600; } :root[data-direction="5"] p.lead, :root[data-direction="5"] .testi .quote { font-family: var(--font-sans); font-style: normal; } :root[data-direction="5"] .wm-text { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: -0.02em; font-size: 0.82em; color: var(--ink); } :root[data-direction="5"] .word::before { content: "\2316 "; color: var(--terracotta-deep); font-family: var(--font-mono); font-weight: 400; } :root[data-direction="5"] footer.mz-foot .wm-text { color: var(--chalk); } :root[data-direction="5"] footer.mz-foot .word::before { color: var(--terracotta-glow); } :root[data-direction="5"] .hero h1 em, :root[data-direction="5"] .final-cta h2 em { color: var(--terracotta-deep); } :root[data-direction="5"] .final-cta h2 em { color: var(--terracotta-glow); } /* blueprint grid on the light world */ :root[data-direction="5"] .hero, :root[data-direction="5"] section.band:not(.cabinet) { background-image: repeating-linear-gradient(0deg, rgba(14,34,51,0.05) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(14,34,51,0.05) 0 1px, transparent 1px 28px); } :root[data-direction="5"] section.band.cabinet, :root[data-direction="5"] .final-cta { background-image: repeating-linear-gradient(0deg, rgba(79,201,219,0.05) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(79,201,219,0.05) 0 1px, transparent 1px 28px); } /* schematic cards — crisp cyan corner ticks */ :root[data-direction="5"] .stat-card::before { background: none; border-top: 1px solid var(--terracotta); border-left: 1px solid var(--terracotta); border-radius: 0; width: 10px; height: 10px; } /* vinyl as a measured technical circle */ :root[data-direction="5"] .hero-visual .vinyl { background: repeating-radial-gradient(circle at center, transparent 0 6px, rgba(79,201,219,0.16) 6px 6.8px), radial-gradient(circle at center, var(--terracotta-deep) 0 17%, transparent 17.5%), radial-gradient(circle at center, #0c1a28 0%, #06101a 100%); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(79,201,219,0.25); } /* ============================================================ DIRECTION 6 — "RISOGRAPH" Future-pop duotone. Clay paper, aubergine ink, riso pink. Instrument Serif italic · Bricolage Grotesque · Spline Sans Mono. ============================================================ */ :root[data-direction="6"] { --font-display: 'Instrument Serif', Georgia, serif; --font-sans: 'Bricolage Grotesque', system-ui, sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, monospace; --chalk: #F3ECE2; --chalk-deep: #EADFCF; --paper: #FBF6EE; --ink: #241528; --cabinet: #241528; --cabinet-deep: #150C18; --cabinet-2: #34203B; --terracotta: #E8456E; --terracotta-deep: #C32B53; --terracotta-glow: #FF7DA0; --terracotta-soft: #F8C7D6; --steel: #7A6A86; --steel-deep: #4E4258; --steel-soft: #A695B0; --stone: #8A7E92; --stone-2: #ABA0B2; --fg-2: #4A3650; --fg-3: #8A7E92; --rule: #E0D2DA; --rule-strong: #CDB9C6; --hairline: rgba(36,21,40,0.12); --radius-1: 4px; --radius-2: 8px; --radius-3: 14px; /* secondary riso ink for accents */ --riso-blue: #2C5BE0; } /* Instrument Serif is a large-display face — scale up, keep italic. It sits a touch low in its box, so headings get slightly looser leading and clear bottom margins. */ :root[data-direction="6"] h2.h { font-size: clamp(38px, 5vw, 64px); letter-spacing: 0; line-height: 1.14; margin-bottom: 26px; } :root[data-direction="6"] .final-cta h2 { font-size: clamp(40px, 5.4vw, 68px); letter-spacing: 0; line-height: 1.12; } :root[data-direction="6"] .hero h1 { font-size: clamp(38px, 4.8vw, 60px); letter-spacing: 0; line-height: 1.12; margin-bottom: 28px; } :root[data-direction="6"] h3.h { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.16; } :root[data-direction="6"] .principles .p h4, :root[data-direction="6"] .levels .lvl h5, :root[data-direction="6"] .role-card h4, :root[data-direction="6"] .fit h3 { line-height: 1.16; } :root[data-direction="6"] .principles .p h4, :root[data-direction="6"] .levels .lvl h5, :root[data-direction="6"] .role-card h4, :root[data-direction="6"] .testi .quote, :root[data-direction="6"] .stat-big, :root[data-direction="6"] .price, :root[data-direction="6"] .fit h3 { font-size-adjust: none; } :root[data-direction="6"] p.lead { font-size: 26px; line-height: 1.4; } :root[data-direction="6"] .wm-text { font-family: var(--font-mono); font-weight: 600; text-transform: lowercase; letter-spacing: 0.01em; background: linear-gradient(110deg, var(--terracotta) 0%, var(--terracotta) 50%, var(--riso-blue) 50%, var(--riso-blue) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-direction="6"] .word::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--terracotta) 0 5px, transparent 5px 8px); } :root[data-direction="6"] footer.mz-foot .wm-text { background: linear-gradient(110deg, var(--terracotta-glow) 0%, var(--terracotta-glow) 50%, #6E8CFF 50%, #6E8CFF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root[data-direction="6"] .hero h1 em, :root[data-direction="6"] .final-cta h2 em { color: var(--terracotta); } /* riso "misregistration" — a blue ghost behind the big serif heads */ :root[data-direction="6"] .hero h1 { text-shadow: 3px 3px 0 rgba(44,91,224,0.16); } :root[data-direction="6"] .final-cta h2 { text-shadow: 3px 3px 0 rgba(255,125,160,0.22); } /* rounder, friendlier cards with a soft pop shadow */ :root[data-direction="6"] .principles .p, :root[data-direction="6"] .role-card, :root[data-direction="6"] .testi, :root[data-direction="6"] .stat-card, :root[data-direction="6"] .plan { box-shadow: 0 12px 28px -18px rgba(36,21,40,0.4); } :root[data-direction="6"] .secnum { color: var(--riso-blue); } :root[data-direction="6"] section.band.cabinet .secnum { color: var(--terracotta-glow); } /* vivid duotone vinyl */ :root[data-direction="6"] .hero-visual .vinyl { background: radial-gradient(circle at center, var(--terracotta) 0 17%, transparent 17.5%), repeating-radial-gradient(circle at center, transparent 0 4px, rgba(255,255,255,0.10) 4px 5px), radial-gradient(circle at 30% 28%, rgba(255,255,255,0.10) 0 38%, transparent 38%), radial-gradient(circle at center, #3a2142 0%, #241528 60%, #150c18 100%); box-shadow: 0 24px 48px -12px rgba(36,21,40,0.55), inset 0 0 80px rgba(0,0,0,0.45), 0 0 0 2px var(--riso-blue); } :root[data-direction="6"] .hero-visual { transform: rotate(-5deg); } :root[data-direction="6"] .hero-visual .sleeve .caption .orchestration { color: var(--riso-blue); } /* ============================================================ DIRECTION 7 — "PHOSPHOR DAYLIGHT" Phosphor's terminal soul, but the everyday pages go clean white with green as a pure accent. The dark "cabinet" feature sections keep the black-green CRT glow + scanlines for contrast. JetBrains Mono · Space Grotesk. ============================================================ */ :root[data-direction="7"] { --font-display: 'JetBrains Mono', ui-monospace, monospace; --font-sans: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --chalk: #FFFFFF; --chalk-deep: #F1F4F1; --paper: #FFFFFF; --ink: #11150F; --cabinet: #07110A; --cabinet-deep: #030806; --cabinet-2: #0E1C12; --terracotta: #12A24B; --terracotta-deep: #0B7D39; --terracotta-glow: #4FE08A; --terracotta-soft: #BCE8CC; --steel: #5A675E; --steel-deep: #353E38; --steel-soft: #8B968E; --stone: #74807A; --stone-2: #9AA39D; --fg-2: #3A423C; --fg-3: #74807A; --rule: #E4E8E4; --rule-strong: #D2D8D2; --hairline: rgba(17,21,15,0.10); --radius-1: 0; --radius-2: 0; --radius-3: 0; --accent-fg: #FFFFFF; } /* display headings render as bold mono, not italic serif */ :root[data-direction="7"] h2.h, :root[data-direction="7"] h3.h, :root[data-direction="7"] .hero h1, :root[data-direction="7"] p.lead, :root[data-direction="7"] .stat-big, :root[data-direction="7"] .price, :root[data-direction="7"] .testi .quote, :root[data-direction="7"] .final-cta h2, :root[data-direction="7"] .principles .p h4, :root[data-direction="7"] .levels .lvl h5, :root[data-direction="7"] .role-card h4, :root[data-direction="7"] .fit h3, :root[data-direction="7"] .hero-visual .sleeve .caption .agent, :root[data-direction="7"] .hero-visual .sleeve .caption .orchestration { font-family: var(--font-display); font-style: normal; font-weight: 700; letter-spacing: -0.02em; } :root[data-direction="7"] p.lead { font-weight: 500; line-height: 1.5; } :root[data-direction="7"] .hero h1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; } :root[data-direction="7"] .wm-text { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); } :root[data-direction="7"] .word::before { content: "~/"; color: var(--terracotta-deep); font-family: var(--font-mono); font-weight: 500; } :root[data-direction="7"] .word::after { content: "\2588"; color: var(--terracotta); margin-left: 2px; animation: mz-blink 1.05s steps(1) infinite; font-family: var(--font-mono); } :root[data-direction="7"] footer.mz-foot .wm-text { color: var(--terracotta-glow); } :root[data-direction="7"] footer.mz-foot .word::before { color: var(--steel-soft); } /* bracketed section numbers, terminal style */ :root[data-direction="7"] .secnum::before { content: "["; } :root[data-direction="7"] .secnum::after { content: "]"; } :root[data-direction="7"] .secnum { letter-spacing: 0.14em; color: var(--terracotta-deep); } :root[data-direction="7"] section.band.cabinet .secnum { color: var(--terracotta-glow); } /* the green pops on white */ :root[data-direction="7"] .hero h1 em { color: var(--terracotta); } :root[data-direction="7"] .final-cta h2 em { color: var(--terracotta-glow); text-shadow: 0 0 18px rgba(79,224,138,0.5); } /* scanlines stay on the dark world only — the white pages read clean */ :root[data-direction="7"] section.band.cabinet, :root[data-direction="7"] .final-cta, :root[data-direction="7"] footer.mz-foot, :root[data-direction="7"] .plan.feature { background-image: repeating-linear-gradient(0deg, rgba(79,224,138,0.05) 0 1px, transparent 1px 3px); background-blend-mode: screen; } /* crisp flat cards on white — lean on hairlines, not shadows */ :root[data-direction="7"] .stat-card, :root[data-direction="7"] .principles .p, :root[data-direction="7"] .role-card, :root[data-direction="7"] .testi, :root[data-direction="7"] .plan { box-shadow: none; } :root[data-direction="7"] .levels .lvl:hover { transform: translateY(-4px); box-shadow: none; border-color: var(--terracotta); background: var(--chalk-deep); } :root[data-direction="7"] .levels .lvl:nth-child(even):hover { transform: translateY(-4px); } /* vinyl reads as a green oscilloscope ring */ :root[data-direction="7"] .hero-visual .vinyl { background: radial-gradient(circle at center, #1c2a1f 0%, #0c150f 60%, #050a07 100%); box-shadow: 0 24px 48px -12px rgba(0,0,0,0.4), inset 0 0 60px rgba(47,191,94,0.12), inset 0 0 0 1px rgba(18,162,75,0.3); } :root[data-direction="7"] .hero-visual .vinyl::before { background: var(--terracotta); box-shadow: 0 0 0 1px var(--terracotta-deep), inset 0 0 0 1px rgba(255,255,255,0.18); } :root[data-direction="7"] .hero-visual .vinyl::after { box-shadow: 0 0 0 1px rgba(47,191,94,0.4); }