/* FireHub — shared brand tokens. * Locked from brief §8. Don't invent new brand colors. * One global tweak: data-balance on : "navy" | "balanced" | "orange" */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400&f[]=general-sans@600,500,400&display=swap'); @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* navy ramp */ --navy-950: #0a1b2d; --navy-900: #102a43; --navy-800: #1b3a5b; --navy-700: #2a4a6b; --navy-600: #3d5f80; --navy-500: #5d7896; --navy-400: #8499b0; --navy-300: #adbccc; --navy-200: #d3dce4; --navy-100: #e6ecf2; --navy-50: #f1f4f8; /* fire / accent */ --fire-600: #ea580c; --fire-500: #f97316; --fire-400: #fb923c; --fire-300: #fdba74; --fire-200: #fed7aa; --fire-50: #fff7ed; /* status */ --safe: #16a34a; --safe-50:#dcfce7; --warn: #f59e0b; --warn-50:#fef3c7; --danger: #ef4444; --danger-50:#fee2e2; /* surface — warm neutrals */ --paper: #faf8f4; /* cream page */ --paper-2: #f3efe7; /* tinted blocks */ --paper-3: #ebe6db; /* divider blocks */ --ink: var(--navy-900); --ink-soft:var(--navy-700); --ink-quiet:var(--navy-500); /* type */ --display: 'Satoshi', 'Inter', system-ui, sans-serif; --body: 'General Sans', 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* shape */ --radius-sm: 6px; --radius: 10px; --radius-lg: 18px; --ring: 0 0 0 1px var(--navy-100); --shadow-sm: 0 1px 0 rgba(16,42,67,0.04), 0 1px 2px rgba(16,42,67,0.06); --shadow: 0 4px 16px -4px rgba(16,42,67,0.10), 0 2px 6px -2px rgba(16,42,67,0.08); --shadow-lg: 0 24px 60px -20px rgba(16,42,67,0.22), 0 8px 20px -8px rgba(16,42,67,0.12); } /* balance tweak — adjusts how much orange shows up */ :root, :root[data-balance="balanced"] { --accent: var(--fire-500); --accent-strong: var(--fire-600); --accent-wash: var(--fire-50); --accent-wash-strength: 1; --accent-rule: 2px; --accent-headline: var(--ink); --accent-tint: 0.04; } :root[data-balance="navy"] { --accent: var(--fire-500); --accent-strong: var(--fire-600); --accent-wash: transparent; --accent-wash-strength: 0; --accent-rule: 1px; --accent-headline: var(--ink); --accent-tint: 0; } :root[data-balance="orange"] { --accent: var(--fire-500); --accent-strong: var(--fire-600); --accent-wash: var(--fire-50); --accent-wash-strength: 1.5; --accent-rule: 3px; --accent-headline: var(--fire-600); --accent-tint: 0.10; } /* baseline */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--body); font-feature-settings: "ss01", "cv01"; color: var(--ink); background: var(--paper); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; } a { color: inherit; } /* inline arrow glyph used across CTAs and links. An inline has no intrinsic * width, so without this it balloons to its container and made buttons go chunky / * wrap onto several lines. Components may override (e.g. .cta .arr). */ .arr { width: 18px; height: 18px; flex-shrink: 0; } .display { font-family: var(--display); letter-spacing: -0.02em; line-height: 1.05; } .mono { font-family: var(--mono); } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-quiet); } /* primary CTA — orange filled, no glow. * Stays one line (nowrap); the arrow is an icon, so it is sized explicitly — * without a fixed size the inline has no intrinsic width and balloons, * which is what made buttons wrap onto 3 lines / go chunky. */ .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--fire-500); color: #fff; font-family: var(--display); font-weight: 500; font-size: 16px; line-height: 1.1; padding: 13px 22px; border-radius: 10px; border: 0; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s, box-shadow .15s; box-shadow: 0 1px 0 rgba(0,0,0,0.04), inset 0 -2px 0 rgba(0,0,0,0.08); } .cta:hover { background: var(--fire-600); transform: translateY(-1px); } .cta:active { transform: translateY(0); } .cta .arr { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s; } .cta:hover .arr { transform: translateX(3px); } /* secondary CTA — navy outlined */ .cta-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--ink); font-family: var(--display); font-weight: 500; font-size: 16px; line-height: 1.1; padding: 12px 20px; border-radius: 10px; border: 1px solid var(--navy-200); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .15s, border-color .15s; } .cta-ghost:hover { background: var(--navy-50); border-color: var(--navy-300); } .cta-ghost .arr { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s; } .cta-ghost:hover .arr { transform: translateX(3px); } /* compliance chip — used across directions for TEK17/FG790/lagret i Norge */ .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--navy-200); background: rgba(255,255,255,0.4); } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--safe); } .chip.warn .dot { background: var(--warn); } .chip.fire .dot { background: var(--fire-500); } /* selection */ ::selection { background: var(--fire-200); color: var(--ink); } /* utility scroll containers — direction pages set their own widths */ .wrap { width: min(1180px, 100% - 48px); margin-inline: auto; } .wrap-narrow { width: min(820px, 100% - 48px); margin-inline: auto; } /* hide-on-narrow helper */ @media (max-width: 720px) { .hide-mobile { display: none !important; } } /* —— Platform horizon · shared across directions * Modest section signalling the nine-domain roadmap. Lives between proof and * pricing. Today: FIRE + SAFE are live. The rest is a deliberate horizon, not a promise. */ .horizon-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-quiet); text-transform: uppercase; margin: 0 0 22px; display: flex; align-items: center; gap: 16px; } .horizon-meta::after { content: ''; flex: 1; max-width: 220px; height: 1px; background: var(--navy-200); } .horizon-meta em { font-style: normal; color: var(--fire-600); } .horizon-h { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 16px; max-width: 24ch; } .horizon-lede { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; margin: 0 0 40px; } .horizon-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0; border: 1px solid var(--navy-100); border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-sm); } .dom { padding: 22px 14px 16px; border-right: 1px solid var(--navy-100); background: var(--paper); color: var(--ink-quiet); display: flex; flex-direction: column; gap: 0; position: relative; } .dom:last-child { border-right: 0; } .dom-code { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-quiet); margin-bottom: 10px; } .dom-name { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink-soft); line-height: 1.2; margin-bottom: 18px; letter-spacing: -0.005em; } .dom-status { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--ink-quiet); text-transform: uppercase; border-top: 1px solid var(--navy-100); padding-top: 10px; margin-top: auto; } .dom.live { background: #fff; } .dom.live::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--fire-500); } .dom.live .dom-code { color: var(--fire-600); font-weight: 500; } .dom.live .dom-name { color: var(--ink); } .dom.live .dom-status { color: var(--safe); display: flex; align-items: center; gap: 7px; } .dom.live .dom-status::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--safe); box-shadow: 0 0 0 2px var(--safe-50); } .horizon-note { margin-top: 30px; font-size: 14px; color: var(--ink-quiet); max-width: 60ch; line-height: 1.6; border-left: 2px solid var(--navy-200); padding: 4px 0 4px 16px; } .horizon-note strong { color: var(--ink-soft); font-weight: 500; } @media (max-width: 900px) { .horizon-grid { grid-template-columns: repeat(3, 1fr); } .dom { border-bottom: 1px solid var(--navy-100); } .dom:nth-child(3n) { border-right: 0; } .dom:nth-last-child(-n+3) { border-bottom: 0; } } /* —— Language switcher styles removed (FH-HEADER-LANGUAGE-SWITCH-CLEANUP-P01): * the header now uses a compact globe dropdown — see .mh-lang / .mh-menu--lang * and .mh-mobile-lang in MarketingHeader.astro. —— */