/* ========================================================= LEVEL TEN — art directions Driven by [data-direction] and [data-mode] on . Personality (shape, type, density, hero layout) is per direction; dark surfaces are a composable [data-mode] layer. ========================================================= */ /* ========================================================= COMPOSABLE DARK MODE (works under any direction) ========================================================= */ html[data-mode="dark"] { --bg: #0C0C0F; --bg-2: #121216; --surface: #15151A; --surface-2: #1A1A20; --ink: #F5F4EF; --ink-2: #E4E3DC; --mute: #9A9AA2; --mute-2: #6E6E76; --line: rgba(255,255,255,0.09); --line-2: rgba(255,255,255,0.06); --line-strong: rgba(255,255,255,0.16); --field: #1A1A20; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px -18px rgba(0,0,0,0.7); --shadow: 0 2px 6px rgba(0,0,0,0.4), 0 36px 80px -40px rgba(0,0,0,0.8); --shadow-lg: 0 50px 110px -48px rgba(0,0,0,0.9); } html[data-mode="dark"] body { background: var(--bg); } /* In dark mode the "night" feature blocks lift slightly so they don't vanish */ html[data-mode="dark"] { --night: #131318; --night-2: #1A1A20; --night-3: #222229; } html[data-mode="dark"] .site-nav { background: color-mix(in srgb, var(--bg) 78%, transparent); } html[data-mode="dark"] .btn.ink { background: var(--ink); color: #0C0C0F; } html[data-mode="dark"] .nav-cta { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); } html[data-mode="dark"] .nav-cta:hover { background: var(--accent); color: #fff; } html[data-mode="dark"] .ins-thumb.t1 { background: linear-gradient(150deg, #1c1c22, #26242c); } html[data-mode="dark"] .ins-thumb.t3 { background: linear-gradient(150deg, #1b1b21, #25232b); } /* ========================================================= 1 — EDITORIAL & LUXE Oversized display, gallery whitespace, hairline order, flat surfaces. Single-column hero, type leads everything. ========================================================= */ html[data-direction="editorial"] { --scale: 1.1; --display-track: -0.045em; --h1-track: -0.05em; --radius: 6px; --radius-sm: 4px; --radius-lg: 10px; --btn-radius: 999px; --section-y: clamp(80px, 9vw, 150px); --bg: #FCFCFA; --bg-2: #F6F5F0; --line: #E8E7E0; --gutter: 32px; } html[data-direction="editorial"] .eyebrow { background: transparent; border-color: transparent; padding: 0; color: var(--mute); font-size: 11px; letter-spacing: 0.22em; gap: 11px; } html[data-direction="editorial"] .eyebrow::before { width: 22px; height: 1.5px; border-radius: 0; background: var(--accent); } html[data-direction="editorial"] .hero { padding-top: 150px; } html[data-direction="editorial"] .hero-inner { grid-template-columns: 1fr; gap: 0; } html[data-direction="editorial"] .hero-panel-wrap { display: none; } html[data-direction="editorial"] .hero h1 { font-size: calc(clamp(46px, 8.5vw, 116px) * 1); letter-spacing: -0.05em; line-height: 0.96; } html[data-direction="editorial"] .hero-copy { max-width: 1000px; } html[data-direction="editorial"] .hero p.lead { max-width: 600px; font-size: 20px; } html[data-direction="editorial"] .hero-stats { margin-top: 56px; gap: 64px; } html[data-direction="editorial"] .hero-stats .stat strong { font-size: calc(42px * 1); } /* flat, gallery cards */ html[data-direction="editorial"] .svc-card, html[data-direction="editorial"] .quote-card, html[data-direction="editorial"] .ins-card { box-shadow: none; } html[data-direction="editorial"] .svc-card:hover, html[data-direction="editorial"] .quote-card:hover, html[data-direction="editorial"] .ins-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); } html[data-direction="editorial"] .svc-grid { gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; } html[data-direction="editorial"] .svc-card { border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; } html[data-direction="editorial"] .svc-card:hover { background: var(--bg-2); transform: none; box-shadow: none; } html[data-direction="editorial"] .svc-ic { background: transparent; border-color: var(--line-strong); } html[data-direction="editorial"] .section-head h2 { font-size: calc(clamp(34px,5vw,64px)); } /* ========================================================= 2 — PRECISE & TECHNICAL Sharp grid, mono labels, tabular data, crisp hairlines, denser. Blueprint confidence. Hero keeps system panel. ========================================================= */ html[data-direction="technical"] { --scale: 0.94; --display-track: -0.03em; --h1-track: -0.035em; --radius: 3px; --radius-sm: 2px; --radius-lg: 4px; --btn-radius: 4px; --section-y: clamp(58px, 6vw, 96px); --bg: #FAFAF8; --bg-2: #F1F1ED; --line: #E2E1DA; --line-strong: #CFCEC5; } /* faint engineering grid on the page */ html[data-direction="technical"] body { background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 46px 46px; background-position: center top; } html[data-direction="technical"] .eyebrow { border-radius: 3px; font-family: var(--mono); letter-spacing: 0.18em; font-size: 10.5px; background: var(--surface); border-color: var(--line-strong); color: var(--ink); } html[data-direction="technical"] .eyebrow::before { border-radius: 0; width: 7px; height: 7px; } html[data-direction="technical"] .hero h1 { font-weight: 800; } html[data-direction="technical"] .hero-stats .stat strong, html[data-direction="technical"] .sys-stat .v { font-variant-numeric: tabular-nums; } html[data-direction="technical"] .svc-card { border-radius: 3px; } html[data-direction="technical"] .svc-ic { border-radius: 3px; } html[data-direction="technical"] .svc-more, html[data-direction="technical"] .ins-link, html[data-direction="technical"] .sector-detail .sd-foot, html[data-direction="technical"] .foot-col h5, html[data-direction="technical"] .sys-label, html[data-direction="technical"] .partners .ph span { font-family: var(--mono); } /* corner ticks on key cards */ html[data-direction="technical"] .svc-card, html[data-direction="technical"] .quote-card { position: relative; } html[data-direction="technical"] .quote-card .mark { font-family: var(--mono); } html[data-direction="technical"] .domain-card, html[data-direction="technical"] .comp-list, html[data-direction="technical"] .sys-panel { border-radius: 4px; } html[data-direction="technical"] .section-head .lead, html[data-direction="technical"] .hero p.lead { letter-spacing: -0.005em; } html[data-direction="technical"] .field { border-radius: 3px; } /* ========================================================= 3 — WARM & HUMAN Warmer cream, soft rounded surfaces, gentle elevation, approachable. Aura on. Friendly. ========================================================= */ html[data-direction="warm"] { --scale: 1.0; --display-track: -0.03em; --radius: 18px; --radius-sm: 13px; --radius-lg: 28px; --btn-radius: 999px; --bg: #FBF7F1; --bg-2: #F4ECE1; --surface: #FFFDFA; --surface-2: #FBF6EF; --line: #ECE2D4; --line-2: #F2EBE0; --line-strong: #DECfBb; --ink: #211B14; --ink-2: #3A322A; --mute: #756A5C; --mute-2: #A99C8A; } html[data-direction="warm"] .eyebrow { border-radius: 999px; } html[data-direction="warm"] .svc-card, html[data-direction="warm"] .quote-card, html[data-direction="warm"] .ins-card { box-shadow: var(--shadow-sm); } html[data-direction="warm"] .svc-card:hover, html[data-direction="warm"] .quote-card:hover { box-shadow: var(--shadow); } html[data-direction="warm"] .svc-ic { border-radius: 14px; } html[data-direction="warm"] .hero p.lead { color: var(--mute); } html[data-direction="warm"] .domain-bullets li::before { background: var(--accent-soft); } /* warm dark feature blocks get a touch warmer */ html[data-direction="warm"] { --night: #1C1714; --night-2: #241D19; --night-line: rgba(255,240,225,0.10); --night-ink: #FBF4EC; --night-mute: rgba(251,244,236,0.62); } /* ========================================================= 4 — DARK & PREMIUM (direction = its own dark theme) Moody surfaces, high contrast, orange glow. Forces mode. ========================================================= */ html[data-direction="dark"] { --scale: 1.0; --display-track: -0.035em; --radius: 14px; --radius-lg: 22px; --btn-radius: 999px; } html[data-direction="dark"] .hero-aura { opacity: 1; height: 820px; } html[data-direction="dark"] .partners, html[data-direction="dark"] .proof, html[data-direction="dark"] .domain { background: var(--bg-2); } html[data-direction="dark"] .cta { background: #08080A; } html[data-direction="dark"] .svc-card, html[data-direction="dark"] .quote-card, html[data-direction="dark"] .ins-card, html[data-direction="dark"] .comp-list, html[data-direction="dark"] .domain-card { background: var(--surface); } html[data-direction="dark"] .hero h1, html[data-direction="dark"] .section-head h2 { text-shadow: 0 0 60px color-mix(in srgb, var(--accent) 20%, transparent); } /* reduce engineering grid heaviness on small screens */ @media (max-width: 700px){ html[data-direction="technical"] body { background-size: 34px 34px; } }