/* IX static site styles. Arial, IX Red #E10600. No external fonts, no trackers. * * Day/Night theme: tokens are defined once with CSS light-dark(). The system * preference applies by default via the :root { color-scheme: light dark } * declaration. Manual override is via or * , which flips the color-scheme and therefore * which side of every light-dark() resolves. No storage of any kind is used * for the manual override: it lives only on the documentElement attribute * and resets on page reload or navigation. See /assets/js/theme.js. */ :root { color-scheme: light dark; /* Brand red stays constant in both themes. */ --ix-red: #E10600; /* Deep red for button hover stays dark in both themes (white text on red). */ --ix-red-deep: #B30400; /* Link / accent text color: needs to be visible on either surface. */ --link-color: #B30400; --link-color: light-dark(#B30400, #FF6A60); /* Subtle red-tinted surface used on the IX standout card and similar. * Light: pale pink. Dark: deep wine that reads as "red-tinted dark surface". */ --ix-red-tint: #FFF1F0; --ix-red-tint: light-dark(#FFF1F0, #2A1413); /* Text colors. Day: near-black on white. Night: warm off-white on dark. */ --ink: #0B0B0B; --ink: light-dark(#0B0B0B, #F4F4F5); --ink-2: #1F1F1F; --ink-2: light-dark(#1F1F1F, #DEDEE2); --ink-soft: #2E2E2E; --ink-soft: light-dark(#2E2E2E, #B8B8C0); --muted: #585858; --muted: light-dark(#585858, #9999A2); --muted-2: #767676; --muted-2: light-dark(#767676, #82828A); /* Borders. Night rules are punched up so card edges read clearly on dark. */ --rule: #E5E5E5; --rule: light-dark(#E5E5E5, #2E3036); --rule-2: #EFEFEF; --rule-2: light-dark(#EFEFEF, #1F2025); /* Surfaces. Day: white/near-white. Night: genuinely dark. * Page bg < section bg < card < control. */ --bg: #FFFFFF; --bg: light-dark(#FFFFFF, #0B0B0D); --bg-soft: #F6F6F6; --bg-soft: light-dark(#F6F6F6, #14141A); --bg-tint: #FAFAFA; --bg-tint: light-dark(#FAFAFA, #101013); --card: #FFFFFF; --card: light-dark(#FFFFFF, #18181D); /* Form controls (pills, text inputs) sit on cards and need to stand apart * from --card surface in night mode. */ --control-bg: #FFFFFF; --control-bg: light-dark(#FFFFFF, #21222A); /* Pill hover surface. Subtle red-tinted hover state for unchecked pills. */ --pill-hover-bg: #FFF8F7; --pill-hover-bg: light-dark(#FFF8F7, #2A1A1C); /* Code-block surface (used for the staging pre block; intentionally deep * in both themes so it reads as a code/inset panel). */ --pre-bg: light-dark(#0B0B0B, #050608); --pre-text: light-dark(#F3F3F3, #E8E8E8); /* Footer is constant dark in both themes — design intent. */ --footer-bg: #0B0B0B; --footer-text: #C8C8C8; --footer-strong: #FFFFFF; --footer-link: #E5E5E5; --footer-link-hover: #FFFFFF; --footer-rule: #2A2A2A; --footer-muted: #8B8B8B; /* Shadows: defined twice so dark mode gets a deeper baseline. */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 0 rgba(0,0,0,0.03); --shadow-sm: light-dark(0 1px 2px rgba(0,0,0,0.04), 0 1px 0 rgba(0,0,0,0.03)); --shadow-md: 0 6px 24px -8px rgba(15,15,15,0.10), 0 2px 4px rgba(15,15,15,0.04); /* Layout. */ --maxw: 1200px; --pad: 28px; --radius: 4px; } /* Manual override: data-theme attribute on flips color-scheme, which * is what light-dark() reads. No CSS variable duplication needed. */ :root[data-theme="day"] { color-scheme: light; } :root[data-theme="night"] { color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { color: var(--link-color); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } a:hover, a:focus { color: var(--ix-red); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--ix-red); outline-offset: 2px; } h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.15; margin: 0 0 0.55em; letter-spacing: -0.015em; text-wrap: balance; } /* H1: strong but controlled. ~32px mobile, ~48px desktop. */ h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 0.55em; max-width: 22ch; } /* H2: visibly larger than body, premium. ~32px mobile, ~44px desktop. */ h2 { font-size: clamp(2rem, 3.8vw, 2.75rem); line-height: 1.14; letter-spacing: -0.018em; margin-bottom: 0.7em; max-width: 26ch; } .section h2 { max-width: 26ch; } .section.band-ink h2 { max-width: 28ch; } .legal h2 { max-width: none; font-size: clamp(1.5rem, 2.2vw, 1.85rem); } /* H3 / card titles: medium-weight feel through tighter size, looser tracking. */ h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; color: var(--ink-2); } .section h2 + p, .section h2 + .subhead, .section h2 + .lead { margin-top: 0; } p { margin: 0 0 1em; -webkit-hyphens: manual; hyphens: manual; text-wrap: pretty; } strong { font-weight: 700; color: var(--ink); } ul, ol { padding-left: 1.25em; margin: 0 0 1em; } li { margin: 0 0 0.4em; } hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); } /* ─── Skip link (always dark with white text in both themes) ───────────── */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--footer-bg); color: var(--footer-strong); padding: 10px 14px; z-index: 100; border-radius: var(--radius); } .skip-link:focus { left: 8px; top: 8px; } /* ─── Header ───────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: 0 2px 14px -8px rgba(0,0,0,0.10); } .site-header::after { content: ""; display: block; height: 4px; background: var(--ix-red); } .site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 20px; padding-bottom: 20px; min-height: 96px; } .brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); } .brand-logo { height: 64px; width: auto; display: block; } @media (max-width: 760px) { .brand-logo { height: 48px; } .site-header .container { min-height: 76px; gap: 12px; padding-top: 14px; padding-bottom: 14px; } } /* Theme-aware brand logo: show day logo by default; flip to night logo when * the system prefers dark (and no manual override), or when data-theme="night". */ .brand-logo-day { display: block; } .brand-logo-night { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="day"]) .brand-logo-day { display: none; } :root:not([data-theme="day"]) .brand-logo-night { display: block; } } :root[data-theme="night"] .brand-logo-day { display: none; } :root[data-theme="night"] .brand-logo-night { display: block; } :root[data-theme="day"] .brand-logo-day { display: block; } :root[data-theme="day"] .brand-logo-night { display: none; } .primary-nav { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; } .primary-nav a { color: var(--ink); text-decoration: none; font-size: 1rem; font-weight: 600; letter-spacing: 0.005em; padding: 8px 0; border-bottom: 2px solid transparent; } .primary-nav a:hover, .primary-nav a:focus { color: var(--link-color); border-bottom-color: var(--ix-red); } .primary-nav .cta { background: var(--ix-red); color: #fff; padding: 13px 20px; border-radius: var(--radius); text-decoration: none; font-weight: 700; border: 0; font-size: 1rem; letter-spacing: 0.01em; box-shadow: 0 1px 0 var(--ix-red-deep); } .primary-nav .cta:hover, .primary-nav .cta:focus { background: var(--ix-red-deep); color: #fff; border-bottom-color: transparent; } @media (max-width: 980px) { .primary-nav { gap: 16px; font-size: 0.9rem; } /* Child combinator so the rule only hides the top-level nav links, not the * anchor nested inside .lang-switch (which must stay visible on mobile so * the switch reads "EN / DE" / "EN / DE", never "/ DE"). */ .primary-nav > a:not(.cta) { display: none; } /* On mobile, the Start scoping CTA lives inside the open hamburger panel, * not on the closed header bar. */ .primary-nav .cta { display: none; } } /* ─── Section rhythm ───────────────────────────────────────────────────── */ main { display: block; } .section { padding: 104px 0; position: relative; } .section + .section { border-top: 1px solid var(--rule-2); } .section.band-soft { background: var(--bg-soft); } .section.band-tint { background: var(--bg-tint); } /* Closing CTA band. In light mode it integrates with the light page (page * background, dark readable text) so there is no isolated dark block before the * already-dark footer; in dark mode it stays dark. Every colour resolves through * the shared light-dark() theme tokens — headings via --ink, body via * body/--ink-2, links via --link-color, microcopy via --muted, the ghost button * via --ink — so the whole section flips correctly with the theme and needs no * per-element overrides or inline colour hacks. The footer (constant footer-* * tokens) remains the only always-dark closing block. The eyebrow keeps the red * bar + link-red text it has everywhere else. */ .section.band-ink { background: var(--bg); } /* Inline red-underline CTA link used inside closing bands. Colour comes from the * global link token, so it flips with the theme; only the red accent rule is set * here. Replaces former inline color:#fff;border-bottom… hacks. */ .cta-link { border-bottom: 2px solid var(--ix-red); text-decoration: none; } .section.tight { padding: 56px 0; } .section.section-close { padding-top: 96px; padding-bottom: 96px; } @media (max-width: 720px) { .section { padding: 56px 0; } .section.section-close { padding: 64px 0; } } .eyebrow { font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--link-color); font-weight: 700; margin: 0 0 24px; position: relative; padding-left: 36px; } .eyebrow::before { content: ""; position: absolute; left: 0; top: 50%; width: 24px; height: 2px; background: var(--ix-red); transform: translateY(-50%); } .subhead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--ink-soft); margin: 0 0 1.5em; max-width: 62ch; line-height: 1.5; font-weight: 400; } .lead { font-size: clamp(1.05rem, 1.4vw, 1.18rem); max-width: 70ch; color: var(--ink-2); line-height: 1.55; } .section p, .section li { max-width: 72ch; } .section h2 + p { color: var(--ink-2); } /* ─── Hero (homepage) ──────────────────────────────────────────────────── */ .hero { padding: 96px 0 88px; background: radial-gradient(circle at 92% 12%, rgba(225,6,0,0.06) 0%, transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); border-bottom: 1px solid var(--rule); } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; } @media (max-width: 940px) { .hero { padding: 64px 0 56px; } .hero-grid { grid-template-columns: 1fr; gap: 40px; } } .hero-visual { display: flex; justify-content: center; align-items: center; } .hero-visual svg { width: 100%; max-width: 480px; height: auto; } /* Page-hero (inner pages) — same restraint, no right module */ .page-hero { padding: 80px 0 64px; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); border-bottom: 1px solid var(--rule); } .page-hero h1 { max-width: 22ch; } @media (max-width: 720px) { .page-hero { padding: 56px 0 40px; } } /* ─── Buttons ──────────────────────────────────────────────────────────── */ .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 22px 0 8px; } .btn { display: inline-block; padding: 14px 22px; border-radius: var(--radius); font-weight: 700; text-decoration: none; border: 2px solid var(--ix-red); font-family: inherit; font-size: 1rem; cursor: pointer; line-height: 1.2; letter-spacing: 0.01em; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease; } .btn-primary { background: var(--ix-red); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--ix-red-deep); border-color: var(--ix-red-deep); color: #fff; } .btn-secondary { background: var(--card); color: var(--link-color); } .btn-secondary:hover, .btn-secondary:focus { background: var(--ix-red); color: #fff; border-color: var(--ix-red); } .btn-ghost { border-color: var(--ink); background: transparent; color: var(--ink); } .btn-ghost:hover, .btn-ghost:focus { background: var(--ink); color: #fff; } .microcopy { color: var(--muted); font-size: 0.92rem; margin: 6px 0 0; } /* ─── Cards & grids ────────────────────────────────────────────────────── */ .card-grid { display: grid; gap: 24px; margin: 24px 0 0; } .card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 940px) { .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .card-grid.cols-2, .card-grid.cols-3, .card-grid.cols-4 { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; } .card h3 { margin-top: 0; } .card p:last-child { margin-bottom: 0; } .card.card-accent { border-top: 3px solid var(--ix-red); padding-top: 26px; } .card.card-emphasis { border: 2px solid var(--ix-red); background: var(--ix-red-tint); box-shadow: var(--shadow-md); } .card .card-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ix-red); color: #fff; font-weight: 700; font-size: 0.85rem; margin-bottom: 14px; } .card .card-tag { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--ix-red-deep); margin-bottom: 8px; } /* ─── Numbered step path ───────────────────────────────────────────────── */ .steps { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: step; display: grid; gap: 0; } .steps > li { counter-increment: step; padding: 22px 0 22px 72px; border-top: 1px solid var(--rule-2); position: relative; max-width: none; } .steps > li:last-child { border-bottom: 1px solid var(--rule-2); } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--ix-red); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 0 0 4px rgba(225,6,0,0.08); } .steps > li strong { font-size: 1.05rem; } /* ─── Stage cards (how-it-works pages) ─────────────────────────────────── */ .stage { display: grid; grid-template-columns: 64px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid var(--rule-2); } .stage:last-of-type { border-bottom: 1px solid var(--rule-2); } .stage .stage-num { font-family: inherit; font-size: 2rem; font-weight: 700; color: var(--ix-red); line-height: 1; letter-spacing: -0.02em; } .stage h2 { margin-top: -4px; } .stage .meta { margin: 14px 0 0; border-left: 3px solid var(--ix-red); padding: 4px 0 4px 14px; font-size: 0.96rem; } .stage .meta p { margin: 0 0 4px; } @media (max-width: 640px) { .stage { grid-template-columns: 1fr; gap: 6px; } .stage .stage-num { font-size: 1.6rem; } } /* ─── You-provide / IX-owns ledger ─────────────────────────────────────── */ .ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 24px 0 0; } .ledger > div { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); } .ledger > div.you-provide { border-top: 3px solid var(--ink); } .ledger > div.ix-owns { border-top: 3px solid var(--ix-red); } .ledger h3 { margin-top: 0; } @media (max-width: 720px) { .ledger { grid-template-columns: 1fr; gap: 18px; } } /* ─── Standards / tag tiles ────────────────────────────────────────────── */ .tag-grid { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .tag-grid li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 18px; font-weight: 700; font-size: 1.05rem; text-align: center; box-shadow: var(--shadow-sm); position: relative; letter-spacing: 0.01em; } .tag-grid li::before { content: ""; position: absolute; left: 18px; top: 14px; width: 18px; height: 2px; background: var(--ix-red); } /* ─── Alternatives compare ─────────────────────────────────────────────── */ .compare-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; } .compare-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 10px; } .compare-card .cat { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--muted); } .compare-card strong { font-size: 1.15rem; letter-spacing: -0.005em; } .compare-card.ix { border: 2px solid var(--ix-red); background: var(--ix-red-tint); box-shadow: var(--shadow-md); } .compare-card.ix .cat { color: var(--ix-red-deep); } .compare-card.ix strong { color: var(--ix-red-deep); } @media (max-width: 980px) { .compare-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .compare-grid { grid-template-columns: 1fr; } } /* ─── Sovereignty track cards ──────────────────────────────────────────── */ .track-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 24px 0 0; } .track-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-sm); } .track-card h3 { margin-top: 0; padding-bottom: 12px; border-bottom: 2px solid var(--ix-red); display: inline-block; } .track-card ul { margin: 14px 0 0; } @media (max-width: 760px) { .track-grid { grid-template-columns: 1fr; } } /* ─── Bullet lists with red ticks ──────────────────────────────────────── */ .ticked { list-style: none; padding: 0; } .ticked > li { position: relative; padding-left: 28px; margin-bottom: 10px; } .ticked > li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 14px; height: 2px; background: var(--ix-red); } /* ─── Inline artifact note ─────────────────────────────────────────────── */ .artifact-note { display: block; border: 1px dashed var(--rule); background: var(--bg-soft); color: var(--muted); padding: 14px 16px; margin: 22px 0; font-size: 0.9rem; border-radius: var(--radius); } /* ─── Scoping page ─────────────────────────────────────────────────────── */ /* Hero: two-column with right summary card. */ body.scoping .page-hero { padding: 88px 0 80px; } body.scoping .page-hero h1 { font-size: clamp(1.75rem, 2.8vw, 2.375rem); line-height: 1.12; max-width: 24ch; margin-bottom: 0.6em; } body.scoping .page-hero .lead { font-size: clamp(1.12rem, 1.55vw, 1.25rem); line-height: 1.55; max-width: 58ch; color: var(--ink-2); margin-bottom: 1em; } body.scoping .page-hero .status-note { font-size: 1rem; color: var(--muted); max-width: 58ch; line-height: 1.5; } body.scoping .section { padding: 128px 0; } @media (max-width: 720px) { body.scoping .section { padding: 72px 0; } body.scoping .page-hero { padding: 56px 0 48px; } } /* 3-step flow on /scoping/ "What happens next" */ .flow-steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: flowstep; } .flow-steps li { counter-increment: flowstep; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--ix-red); border-radius: var(--radius); padding: 28px 26px 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; box-shadow: var(--shadow-sm); margin: 0; max-width: none; position: relative; } .flow-steps .step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--ix-red); color: #FFFFFF; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: 0 0 0 5px rgba(225,6,0,0.08); } .flow-steps .step-label { font-size: 1.08rem; font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: -0.005em; } @media (max-width: 760px) { .flow-steps { grid-template-columns: 1fr; gap: 14px; } .flow-steps li { flex-direction: row; align-items: center; padding: 22px 22px; } .flow-steps .step-num { flex-shrink: 0; } } .scoping-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; } @media (max-width: 940px) { .scoping-hero-grid { grid-template-columns: 1fr; gap: 40px; } } .scoping-summary { display: flex; justify-content: center; } .scoping-summary svg { width: 100%; max-width: 380px; height: auto; } /* Premium checklist card */ .intake-card { background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--ix-red); border-radius: var(--radius); padding: 32px 36px 28px; margin: 32px 0 0; box-shadow: var(--shadow-md); } .intake-card .card-tag { display: inline-block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; color: var(--ix-red-deep); margin: 0 0 12px; } .intake-card h3 { margin: 0 0 20px; font-size: 1.35rem; color: var(--ink); letter-spacing: -0.01em; } .intake-fields { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .intake-fields li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: center; padding: 14px 18px; background: var(--bg-soft); border-radius: var(--radius); border: 1px solid var(--rule-2); margin: 0; max-width: none; } .intake-fields .num { width: 32px; height: 32px; border-radius: 50%; background: var(--ix-red); color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 0.92rem; line-height: 1; } .intake-fields .field { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.005em; color: var(--ink); } /* Structured intake form */ .scoping-form-card { background: var(--card); border: 1px solid var(--rule); border-top: 4px solid var(--ix-red); border-radius: var(--radius); padding: 44px 48px 48px; margin: 36px 0 0; box-shadow: var(--shadow-md); } @media (max-width: 600px) { .scoping-form-card { padding: 28px 22px 32px; } } .field-group { margin: 52px 0 0; border: 0; padding: 0; } .field-group:first-of-type { margin-top: 8px; } .field-group legend, .field-label { font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--ink); margin: 0; padding: 0; display: block; line-height: 1.3; } .field-group legend::before, .field-label::before { content: ""; display: inline-block; width: 18px; height: 3px; background: var(--ix-red); margin-right: 12px; vertical-align: middle; margin-bottom: 3px; } .field-hint { display: block; font-size: 0.92rem; color: var(--muted); font-weight: 400; letter-spacing: 0; text-transform: none; margin-top: 6px; padding-left: 30px; } .pill-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; } .pill { position: relative; display: inline-flex; cursor: pointer; margin: 0; } .pill input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .pill > span { display: inline-flex; align-items: center; padding: 11px 20px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--control-bg); font-size: 0.98rem; font-weight: 600; color: var(--ink-2); line-height: 1.25; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 80ms ease; user-select: none; box-shadow: 0 1px 0 rgba(0,0,0,0.02); } .pill:hover > span { border-color: var(--ix-red); color: var(--link-color); background: var(--pill-hover-bg); } .pill input:checked + span { background: var(--ix-red); border-color: var(--ix-red); color: #FFFFFF; font-weight: 700; box-shadow: 0 2px 0 var(--ix-red-deep), 0 8px 18px -8px rgba(225,6,0,0.45); } .pill input:checked:hover + span { background: var(--ix-red-deep); border-color: var(--ix-red-deep); } .pill:focus-within > span { outline: 3px solid var(--ix-red); outline-offset: 3px; } .text-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 24px 0 0; } @media (max-width: 600px) { .text-row { grid-template-columns: 1fr; gap: 18px; } } .text-input { width: 100%; padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--control-bg); font-family: inherit; font-size: 1rem; color: var(--ink); line-height: 1.3; transition: border-color 120ms ease, box-shadow 120ms ease; color-scheme: light dark; } :root[data-theme="day"] .text-input { color-scheme: light; } :root[data-theme="night"] .text-input { color-scheme: dark; } .text-input:hover { border-color: var(--ix-red); } .text-input:focus, .text-input:focus-visible { border-color: var(--ix-red); outline: 3px solid var(--ix-red); outline-offset: 2px; } .text-field-wrap { margin: 20px 0 0; } .text-field-wrap .field-label { margin-bottom: 12px; } .text-field-wrap .text-input { margin-top: 0; } .text-input::placeholder { color: var(--muted-2); } .review-note { margin: 48px 0 0; padding: 22px 24px; background: var(--bg-soft); border: 1px solid var(--rule); border-left: 4px solid var(--ix-red); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink-2); font-size: 1rem; line-height: 1.55; } .review-note strong { color: var(--ink); display: block; margin-bottom: 4px; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; } .form-actions { margin: 48px 0 0; padding: 32px 0 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .form-actions .btn { min-width: 260px; justify-content: center; text-align: center; } .btn-lg { padding: 18px 28px; font-size: 1.08rem; letter-spacing: 0.005em; } .send-status { color: var(--muted); font-size: 0.92rem; margin: 0; } .send-status.is-error { color: var(--ix-red-deep); font-weight: 700; } .status-note { font-size: 0.92rem; color: var(--muted); margin-top: 6px; } /* ─── Legal pages ──────────────────────────────────────────────────────── */ .legal main h2 { margin-top: 2em; padding-top: 0.6em; border-top: 1px solid var(--rule-2); } .legal main h2:first-of-type { border-top: 0; padding-top: 0; } .legal .draft-banner { background: var(--ix-red-tint); border: 1px solid var(--ix-red); color: var(--ix-red-deep); padding: 14px 18px; border-radius: var(--radius); margin: 24px 0; font-weight: 700; } .legal address { font-style: normal; background: var(--bg-soft); border-left: 3px solid var(--ix-red); padding: 14px 18px; margin: 14px 0; border-radius: 0 var(--radius) var(--radius) 0; } /* ─── Footer (constant dark in both themes by design) ──────────────────── */ .site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 56px 0 40px; margin-top: 0; font-size: 0.94rem; } .site-footer::before { content: ""; display: block; height: 3px; background: var(--ix-red); margin-bottom: 56px; } .site-footer .container { padding-top: 0; } .site-footer a { color: var(--footer-link); text-decoration: none; border-bottom: 1px solid transparent; } .site-footer a:hover, .site-footer a:focus { color: var(--footer-link-hover); border-bottom-color: var(--ix-red); } .site-footer .brand-line { font-weight: 700; color: var(--footer-strong); font-size: 1.05rem; margin-bottom: 18px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; align-items: start; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } } .footer-col h4 { color: var(--footer-strong); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 14px; } .footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--footer-rule); color: var(--footer-muted); font-size: 0.85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } /* ─── Theme toggle + Nav (hamburger) toggle (header buttons) ───────────── */ .theme-toggle, .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border-radius: var(--radius); background: transparent; border: 1.5px solid var(--rule); color: var(--ink); cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; -webkit-appearance: none; appearance: none; } .theme-toggle:hover, .theme-toggle:focus-visible, .nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--ix-red); color: var(--link-color); } .theme-toggle .icon, .nav-toggle .icon { width: 22px; height: 22px; display: block; } /* Theme toggle: show the icon for the action target. */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } .theme-toggle[data-theme="night"] .icon-sun { display: block; } .theme-toggle[data-theme="night"] .icon-moon { display: none; } /* EN/DE language switch (header) — only rendered when a counterpart exists. */ .lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; margin: 0 4px; user-select: none; } .lang-switch a { color: var(--muted); text-decoration: none; padding: 4px 2px; border-bottom: 2px solid transparent; transition: color 120ms ease, border-bottom-color 120ms ease; } .lang-switch a:hover, .lang-switch a:focus-visible { color: var(--link-color); border-bottom-color: var(--ix-red); outline: none; } .lang-switch .current { color: var(--ink); padding: 4px 2px; } .lang-switch .sep { color: var(--muted-2); font-weight: 400; } @media (max-width: 760px) { .lang-switch { font-size: 0.78rem; gap: 5px; } } /* Nav toggle: only shown on mobile widths (<=980px). When open, swap icon. */ .nav-toggle { display: none; } @media (max-width: 980px) { .nav-toggle { display: inline-flex; } } .nav-toggle .icon-open { display: block; } .nav-toggle .icon-close { display: none; } .nav-toggle[aria-expanded="true"] .icon-open { display: none; } .nav-toggle[aria-expanded="true"] .icon-close { display: block; } /* Mobile nav panel (drops below the header bar; hidden on desktop). */ .mobile-nav { display: none; background: var(--bg); border-top: 1px solid var(--rule); box-shadow: 0 12px 24px -16px rgba(0,0,0,0.18); } @media (max-width: 980px) { .mobile-nav:not([hidden]) { display: block; } } .mobile-nav .container { padding-top: 16px; padding-bottom: 20px; } .mobile-nav-list { list-style: none; padding: 0; margin: 0; } .mobile-nav-list li { margin: 0; max-width: none; } .mobile-nav-list a { display: block; padding: 16px 4px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.1rem; letter-spacing: -0.005em; border-bottom: 1px solid var(--rule-2); transition: color 120ms ease, padding-left 120ms ease, border-color 120ms ease; } .mobile-nav-list a:hover, .mobile-nav-list a:focus-visible { color: var(--link-color); padding-left: 8px; border-bottom-color: var(--ix-red); } .mobile-nav-list li:last-child a { border-bottom: 0; } /* Start scoping CTA inside the open mobile menu (full-width, prominent). */ .mobile-nav-cta { margin: 22px 0 4px; } .mobile-nav-cta .btn { display: block; width: 100%; text-align: center; padding: 16px 22px; font-size: 1.05rem; } /* ─── SVG card themed colors (hero + scoping summary) ──────────────────── */ .hero-visual .svg-card, .scoping-summary .svg-card { fill: var(--card); stroke: var(--rule); } .hero-visual .svg-connector, .scoping-summary .svg-connector { stroke: var(--rule); } .hero-visual .svg-node-label, .scoping-summary .svg-node-label { fill: var(--ink); } .hero-visual .svg-accent-text, .scoping-summary .svg-accent-text { fill: var(--link-color); } /* Brand-red elements stay constant. White text on red stays white in both themes. */ .hero-visual .svg-accent-bar, .hero-visual .svg-node, .hero-visual .svg-outcome-pill, .scoping-summary .svg-accent-bar, .scoping-summary .svg-node, .scoping-summary .svg-outcome-pill { fill: var(--ix-red); } .hero-visual .svg-node-num, .hero-visual .svg-outcome-text, .scoping-summary .svg-node-num, .scoping-summary .svg-outcome-text { fill: #FFFFFF; } /* ─── Utilities ────────────────────────────────────────────────────────── */ .nowrap { white-space: nowrap; } /* ─── Visually hidden ──────────────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }