@charset "utf-8"; /* ============================================================================ SWISS TAX KIT — app.css Single stylesheet. Plain CSS + custom properties. No build step, no Tailwind. Mobile-first. Breakpoints: 480 / 768 / 960 (nav) / 1100 (table) / 1280 (max). Colour is defined ONCE per slot with light-dark(); the manual theme toggle flips `color-scheme` on . Baseline-2024 feature, ~99% of traffic. Legacy escape hatch documented at the end of the token block. ---------------------------------------------------------------------------- Brand direction: "Federal Instrument" — ink as the brand, one cold blue for interaction, green reserved strictly for recovered money, paper-cool neutrals, hairlines and tabular numerals. NO Swiss cross, NO Swiss red: see the note above the brand tokens and LEGAL.md. Type: IBM Plex Sans + Plex Mono, with Plex Sans Condensed as the German escape hatch. All contrast ratios are computed and stated inline. ========================================================================= */ @layer reset, tokens, base, layout, components, content, utilities; /* ========================================================================== 1. TOKENS ========================================================================== */ @layer tokens { :root { color-scheme: light dark; /* --- 1.1 Type families ------------------------------------------------ ONE webfont family. Two network requests max (CSS + woff2 subset). --font-display defaults to the sans; if the brand adds a display face later, override ONLY this token — every heading already uses it. */ --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-sans); --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; /* The German escape hatch. When Verrechnungssteuerrückerstattung has to fit a column header, switch FAMILY rather than dropping below 12px. */ --font-condensed: "IBM Plex Sans Condensed", var(--font-sans); /* --- 1.2 Type scale --------------------------------------------------- Fluid only where it matters (display sizes). Body text is fixed so that long German compounds never reflow between breakpoints. */ --fs-3xs: 0.6875rem; /* 11 — table micro-labels */ --fs-2xs: 0.75rem; /* 12 — eyebrows, legal */ --fs-xs: 0.8125rem; /* 13 — table body, meta */ --fs-sm: 0.875rem; /* 14 — UI, captions */ --fs-base: 1rem; /* 16 — body */ --fs-md: 1.0625rem; /* 17 — prose body */ --fs-lg: 1.1875rem; /* 19 — lede, card titles */ --fs-xl: 1.375rem; /* 22 — h3 */ --fs-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem); /* h2 */ --fs-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.5rem); /* h1 on inner pages */ --fs-4xl: clamp(2.125rem, 1.35rem + 3.6vw, 3.25rem); /* hero h1 */ --fs-figure: clamp(2.5rem, 1.6rem + 4.6vw, 4rem); /* the CHF number */ --lh-flat: 1; --lh-tight: 1.08; /* display only */ --lh-snug: 1.22; /* h2/h3 */ --lh-normal: 1.45; /* UI */ --lh-relaxed: 1.65; /* prose — German needs the air */ --tracking-display: -0.021em; --tracking-tight: -0.012em; --tracking-normal: 0; --tracking-caps: 0.07em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --measure: 68ch; /* prose max width */ --measure-narrow: 46ch; /* lede, card copy */ /* --- 1.3 Space scale (4px base) -------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* Vertical rhythm. Every
uses one of these three. No exceptions. */ --section-y: clamp(3rem, 1.5rem + 5vw, 5rem); /* default */ --section-y-tight: clamp(2rem, 1.2rem + 3.2vw, 3.25rem);/* strips, notes */ --section-y-loose: clamp(5rem, 3rem + 9vw, 8.5rem); /* hero, pricing */ /* --- 1.4 Layout ------------------------------------------------------ */ --container: 1200px; /* the widest any block may be: the nav's width */ --container-narrow: 760px; /* centred forms and result cards */ --container-app: 1040px; /* every /app/* screen: one width for card, table and panel */ --container-wide: var(--container); /* retired: nothing may be wider than the nav */ --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); --nav-h: 56px; /* --- 1.5 Radii -------------------------------------------------------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; --r-card: var(--r-lg); --r-field: var(--r-sm); /* --- 1.6 Borders ------------------------------------------------------ */ --bw: 1px; --bw-strong: 1.5px; --border: var(--bw) solid var(--c-border); --border-strong: var(--bw) solid var(--c-border-strong); --border-dashed: var(--bw-strong) dashed var(--c-border-strong); /* --- 1.7 Elevation ---------------------------------------------------- Hierarchy is carried by BORDER + SURFACE STEP first, shadow second. Dark mode keeps the same tokens but the shadows read as depth, not blur. */ --shadow-0: none; --shadow-1: 0 1px 2px light-dark(rgba(16,18,22,.05), rgba(0,0,0,.5)); --shadow-2: 0 1px 2px light-dark(rgba(16,18,22,.05), rgba(0,0,0,.5)), 0 8px 20px -12px light-dark(rgba(16,18,22,.18), rgba(0,0,0,.7)); --shadow-3: 0 2px 4px light-dark(rgba(16,18,22,.06), rgba(0,0,0,.55)), 0 18px 42px -18px light-dark(rgba(16,18,22,.24), rgba(0,0,0,.8)); --shadow-scroll: light-dark(rgba(16,18,22,.14), rgba(0,0,0,.6)); /* --- 1.8 Motion ------------------------------------------------------- */ --dur-1: 90ms; /* hover/active colour */ --dur-2: 150ms; /* small transforms, dropzone state */ --dur-3: 220ms; /* accordion, drawer */ --dur-4: 320ms; /* page-level reveals (max) */ --ease-out: cubic-bezier(.22, .8, .32, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --ease-emphasis: cubic-bezier(.34, 1.3, .64, 1); /* one bounce, used twice on the whole site */ /* --- 1.9 Colour: neutrals (final) ------------------------------------- light-dark(LIGHT, DARK). Warm-neutral greys; the dark end is a true near-black so the OLED phone half of the audience gets real contrast. */ --c-canvas: light-dark(#f7f7f5, #0d0f12); /* page ground */ --c-surface: light-dark(#ffffff, #15181c); /* cards, nav, table */ --c-surface-raised: light-dark(#ffffff, #1b1f24); /* popovers, drawer */ --c-surface-sunken: light-dark(#f1f1ee, #101317); /* inputs, code, zebra*/ --c-surface-inverse: light-dark(#14161a, #f2f4f6); --c-ink: light-dark(#14161a, #f3f5f7); /* headings, figures ~16:1 */ --c-ink-2: light-dark(#3c4149, #c5ccd4); /* body ~10:1 */ --c-ink-3: light-dark(#5e6570, #949ca6); /* meta, captions ~5.1:1 */ --c-ink-4: light-dark(#8a9099, #6b737d); /* decorative ONLY, never text*/ --c-ink-inverse: light-dark(#ffffff, #14161a); --c-border: light-dark(#e4e4e0, #272c32); --c-border-strong: light-dark(#cdcdc8, #3a4148); --c-overlay: light-dark(rgba(20,22,26,.45), rgba(0,0,0,.66)); /* --- 1.10 Colour: brand + accent ------------------------------------- "Federal Instrument". Ink is the brand; one cold blue carries interaction; green is a SEMANTIC reserved for recovered money and is never used decoratively. Every rival spends its accent on everything, so the reclaimable CHF figure ends up being the only green thing on the page — which is exactly where the eye should go at the moment of the CHF 19 decision. NO SWISS CROSS AND NO SWISS RED, ANYWHERE. Both are legally permitted to a private company, and both are wrong here. The IPI's own examination guidelines use a private advisory service with a Swiss-prefixed name and a Swiss cross as the textbook example of misleading "official character" — tax filing is more government- adjacent than that example, not less. A red cross-or-plus glyph on white separately risks the Rotkreuzgesetz, which protects the inverse mark in any shade of red on any white ground. And red means loss in every financial UI on earth, which is semantically backwards for a product about getting money back. Red is reserved 100% for danger. See LEGAL.md. #0a47c7 sits 18° off Tailwind indigo (the sibling product), 10° off Bootstrap blue and 19° off moneyland's blue, and hits 7.67:1 against white in BOTH directions — so one value works as link text and as a button fill, at AAA. */ --c-brand: light-dark(#0a47c7, #93b0ff); /* 7.67:1 / 8.10:1 AAA */ --c-brand-hover: light-dark(#08379b, #b3c8ff); /* 10.34:1 */ --c-brand-ink: light-dark(#ffffff, #0a121c); /* on-brand text */ --c-brand-tint: light-dark(#eaf0fe, #101f3a); /* brand on tint 6.72:1 */ --c-brand-border: light-dark(#c3d3f7, #24375c); --c-accent: light-dark(#0a47c7, #93b0ff); /* no second hue */ --c-accent-tint: light-dark(#eaf0fe, #101f3a); /* --- 1.11 Colour: semantic status (final) ----------------------------- */ /* Money recovered. Reserved — never a decorative green. WARNING, and this is not optional: under protanopia the money green and the danger red separate by only 1.14:1, and in dark mode by 1.03:1 under deuteranopia — i.e. for red-green colourblind users they are INDISTINGUISHABLE. Therefore money-positive ALWAYS carries an explicit "+" and the CHF label, and danger ALWAYS carries an icon. Colour is never the sole carrier of meaning here (WCAG 1.4.1). */ --c-positive: light-dark(#0a5730, #4ed88e); /* 8.68:1 / 9.44:1 AAA */ --c-positive-ink: light-dark(#0a5730, #7ae2b5); --c-positive-tint: light-dark(#e9f6ee, #0f2b1e); --c-positive-border: light-dark(#0f6b3c, #1d5340); --c-warning: light-dark(#8a5300, #e8a33d); --c-warning-tint: light-dark(#fdf3e3, #2c2008); --c-warning-border: light-dark(#f0dcb4, #55411a); --c-danger: light-dark(#b3261e, #ff6b61); --c-danger-ink: light-dark(#8c1c16, #ff9d96); --c-danger-tint: light-dark(#fdeceb, #2c1311); --c-danger-border: light-dark(#f2c6c2, #5c2925); --c-focus: light-dark(#14161a, #f3f5f7); /* focus ring: ink, not brand — guarantees 3:1 on every surface whatever the brand hue becomes */ --c-selection: light-dark(#dbe6ff, #2a3d6b); /* ◼ BRAND-adjacent */ } /* Manual override. Server renders from a cookie, so there is no flash and no blocking inline script. */ :root[data-theme="light"] { color-scheme: only light; } :root[data-theme="dark"] { color-scheme: only dark; } /* LEGACY ESCAPE HATCH (only if analytics ever shows pre-2024 browsers): wrap a light-only palette in @supports not (color: light-dark(#000,#fff)) { :root { --c-canvas:#f7f7f5; … } } and it degrades to light mode instead of breaking. */ } /* ========================================================================== 2. RESET + BASE ========================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Sticky nav must never obscure a focused element or an anchor target (WCAG 2.2 — 2.4.11 Focus Not Obscured). Global, not per-component. */ scroll-padding-top: calc(var(--nav-h) + var(--space-4)); scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { min-height: 100svh; background: var(--c-canvas); color: var(--c-ink-2); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video, canvas { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; } ::selection { background: var(--c-selection); } /* German compounds (Verrechnungssteuer-Rückforderungsformular) must never blow out a grid cell, so overflow-wrap is universal. Hyphenation is NOT: it is switched on only under a German, French or Italian . The old form — an element rule setting hyphens:auto, then [lang="en"] { hyphens: manual } on the html element only — lost on every element to the element rule, and English shipped hyphenated site-wide ("sum-mary", "ac-count", "ex-ceeds"). tests/composition.spec.ts pins it. */ h1, h2, h3, h4, p, li, td, th, dd, dt, summary, label, figcaption { overflow-wrap: break-word; hyphens: manual; } :lang(de) :is(h1, h2, h3, h4, p, li, td, th, dd, dt, summary, label, figcaption), :lang(fr) :is(h1, h2, h3, h4, p, li, td, th, dd, dt, summary, label, figcaption), :lang(it) :is(h1, h2, h3, h4, p, li, td, th, dd, dt, summary, label, figcaption) { hyphens: auto; } } @layer base { h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-ink); font-weight: var(--fw-semibold); text-wrap: balance; } h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); } h2 { font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); } h4 { font-size: var(--fs-lg); line-height: var(--lh-snug); } p { text-wrap: pretty; } a { color: var(--c-brand); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--c-brand-hover); } /* One ring, everywhere. Never remove without replacing. */ :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-xs); } :focus:not(:focus-visible) { outline: none; } strong, b { font-weight: var(--fw-semibold); color: var(--c-ink); } small { font-size: var(--fs-sm); } code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; } /* All currency, percentages, dates, ISINs: one column width per glyph. */ .num, td.num, th.num, .figure-chf, time, .tabular { font-variant-numeric: tabular-nums lining-nums slashed-zero; font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1; } [hidden] { display: none !important; } } /* ========================================================================== 3. LAYOUT PRIMITIVES ========================================================================== */ @layer layout { .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .container--app { max-width: var(--container-app); } .container--wide { max-width: var(--container-wide); } .section { padding-block: var(--section-y); } .section--tight { padding-block: var(--section-y-tight); } .section--loose { padding-block: var(--section-y-loose); } /* A section that continues the one above it (the "I'm stuck" rail under a flow screen): no top padding, so the gap is one section's worth, not two. */ .section--joined { padding-block-start: 0; } .section:has(+ .section--joined) { padding-block-end: var(--space-5); } .section--surface { background: var(--c-surface); border-block: var(--border); } .section--sunken { background: var(--c-surface-sunken); } /* Below-the-fold sections skip layout/paint until near the viewport. Always pair with contain-intrinsic-size or you reintroduce CLS. */ .section--deferred { content-visibility: auto; contain-intrinsic-size: auto 640px; } .stack > * + * { margin-block-start: var(--flow, var(--space-4)); } .stack--lg { --flow: var(--space-6); } .stack--sm { --flow: var(--space-2); } .cluster { display: flex; flex-wrap: wrap; gap: var(--gap, var(--space-3)); align-items: center; } .section-head { max-width: 52ch; margin-block-end: var(--space-8); } .section-head .eyebrow { margin-block-end: var(--space-2); } .section-head p { margin-block-start: var(--space-3); font-size: var(--fs-lg); color: var(--c-ink-3); } .eyebrow { display: block; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-3); } } /* ========================================================================== 4. COMPONENTS ========================================================================== */ @layer components { /* --- 4.0 Skip link ---------------------------------------------------- */ .skip-link { position: absolute; inset-inline-start: var(--space-4); top: var(--space-2); z-index: 100; transform: translateY(-160%); padding: var(--space-3) var(--space-4); background: var(--c-surface-raised); color: var(--c-ink); border: var(--border-strong); border-radius: var(--r-sm); box-shadow: var(--shadow-3); transition: transform var(--dur-2) var(--ease-out); } .skip-link:focus-visible { transform: translateY(0); } /* --- 4.1 Buttons ------------------------------------------------------ min-height 44px everywhere (WCAG 2.2 SC 2.5.8 asks 24; we ship 44 because half the traffic is thumbs on a deadline). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: var(--space-3) var(--space-5); border-radius: var(--r-md); font-size: var(--fs-base); font-weight: var(--fw-medium); line-height: var(--lh-normal); text-align: center; text-decoration: none; cursor: pointer; white-space: normal; /* German labels wrap, never clip */ transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); } .btn:active { transform: translateY(1px); } .btn[aria-disabled="true"], .btn:disabled { opacity: .7; pointer-events: none; } .btn--primary { background: var(--c-brand); color: var(--c-brand-ink); border: var(--bw) solid transparent; box-shadow: var(--shadow-1); } .btn--primary:hover { background: var(--c-brand-hover); color: var(--c-brand-ink); } .btn--secondary { background: var(--c-surface); color: var(--c-ink); border: var(--border-strong); } .btn--secondary:hover { background: var(--c-surface-sunken); color: var(--c-ink); } .btn--ghost { color: var(--c-ink-2); border: var(--bw) solid transparent; } .btn--ghost:hover { background: var(--c-surface-sunken); color: var(--c-ink); } .btn--lg { min-height: 52px; padding-inline: var(--space-6); font-size: var(--fs-lg); } .btn--block { width: 100%; } .btn--icon { min-width: 44px; padding: var(--space-2); } /* --- 4.2 Badges / chips ------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .01em; border: var(--bw) solid transparent; /* A badge is a label, not a paragraph. Without this a two-word status in a narrow table column wraps to three lines and doubles the row height. The table already scrolls horizontally, so there is somewhere for it to go. */ white-space: nowrap; } .badge--neutral { background: var(--c-surface-sunken); color: var(--c-ink-2); border-color: var(--c-border); } .badge--positive { background: var(--c-positive-tint); color: var(--c-positive-ink); border-color: var(--c-positive-border); } .badge--warning { background: var(--c-warning-tint); color: var(--c-warning); border-color: var(--c-warning-border); } .badge--danger { background: var(--c-danger-tint); color: var(--c-danger-ink); border-color: var(--c-danger-border); } .badge--brand { background: var(--c-brand-tint); color: var(--c-brand); border-color: var(--c-brand-border); } /* A badge inside a flex column (the price card) would be stretched to the column's width; it is a label and keeps its own. */ .price-card > .badge { align-self: flex-start; margin-block: var(--space-4) var(--space-2); } /* The suggested tier's label, above the name so it is read before the price rather than as a footnote to it. Scoped to beat `.price-card > .badge` above, which is two classes deep and was still applying its space-4 top margin here: as the card's first child it needs no gap but the padding. */ .price-card > .price-card__badge { margin-block: 0 var(--space-3); } .price-card__badge--none { visibility: hidden; } /* --- 4.3 Nav ----------------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; background: color-mix(in srgb, var(--c-canvas) 84%, transparent); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-block-end: var(--bw) solid transparent; transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); } /* 4 lines of vanilla JS set data-scrolled; the hairline only appears once content is behind the bar. No shadow — it would shift nothing but it reads heavier than the rest of the page. */ .nav[data-scrolled] { border-block-end-color: var(--c-border); } @supports not (backdrop-filter: blur(1px)) { .nav { background: var(--c-canvas); } } .nav__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: var(--space-4); } .nav__brand { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; /* it is a link: a real target, not a caption */ font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-base); letter-spacing: var(--tracking-tight); color: var(--c-ink); text-decoration: none; margin-inline-end: auto; } .nav__brand svg, .nav__brand img { width: 22px; height: 22px; } .nav__links { display: none; } .nav__actions { display: flex; align-items: center; gap: var(--space-1); } /* The header CTA never wraps. At 375px the brand, the button and the menu share 341px: the theme toggle moves into the drawer below 480px, which is what lets "Create tax statement" fit beside the brand without wrapping. */ .nav__actions > .btn { white-space: nowrap; } @media (max-width: 479px) { .nav__actions > .btn--primary { padding-inline: var(--space-3); font-size: var(--fs-sm); } .nav__actions .theme-toggle--header { display: none; } } /* Below 360px even that does not fit beside the brand and the burger, so the button drops "tax": the accessible name stays the full label. */ .nav__cta-short { display: none; } @media (max-width: 359px) { .nav__cta-long { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nav__cta-short { display: inline; } .nav__actions > .btn--primary { padding-inline: var(--space-2); } } @media (min-width: 480px) { .drawer .theme-toggle--drawer { display: none; } } /* The brand stays on one line from 360px up. Below that the four header items do not fit 320px on one line, and a wrapped brand beats a page that scrolls sideways (tests/a11y.spec.ts G8). */ @media (min-width: 360px) { .nav__brand { white-space: nowrap; } } .nav__link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-3); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-2); text-decoration: none; } .nav__link:hover { background: var(--c-surface-sunken); color: var(--c-ink); } .nav__link[aria-current="page"] { color: var(--c-ink); font-weight: var(--fw-semibold); } .nav__burger { display: inline-flex; } @media (min-width: 960px) { :root { --nav-h: 64px; } .nav__links { display: flex; align-items: center; gap: var(--space-1); } .nav__burger { display: none; } } /* In app mode the six links live in the drawer at every width; the burger therefore stays. Only Contact (help) is in the bar, at >= 768px. */ .nav--app .nav__burger { display: inline-flex; } /* Language switcher — native
, works with zero JS. Labels are full language names, never 2-letter codes only. */ .lang { position: relative; } .lang > summary { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-3); border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-2); cursor: pointer; list-style: none; } .lang > summary::-webkit-details-marker { display: none; } .lang > summary:hover { background: var(--c-surface-sunken); color: var(--c-ink); } .lang[open] > summary { background: var(--c-surface-sunken); color: var(--c-ink); } .lang__menu { position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-1)); min-width: 12rem; padding: var(--space-1); background: var(--c-surface-raised); border: var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-3); display: grid; gap: 2px; } .lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--c-ink-2); text-decoration: none; } .lang__menu a:hover { background: var(--c-surface-sunken); color: var(--c-ink); } .lang__menu a[aria-current="true"] { color: var(--c-ink); font-weight: var(--fw-semibold); } .lang__code { font-size: var(--fs-2xs); color: var(--c-ink-3); text-transform: uppercase; letter-spacing: var(--tracking-caps); } /* Theme toggle — 3-state (system / light / dark) is over-engineering for a once-a-year user. Two states; the server remembers via cookie. */ .theme-toggle { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border-radius: var(--r-sm); color: var(--c-ink-2); cursor: pointer; } .theme-toggle:hover { background: var(--c-surface-sunken); color: var(--c-ink); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } /* Drawer below 960px — native : focus trap, Esc, inert background and ::backdrop for free. Two lines of JS: showModal() / close(). */ .drawer { width: min(92vw, 380px); max-width: none; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; border-inline-start: var(--border); background: var(--c-surface-raised); color: var(--c-ink-2); box-shadow: var(--shadow-3); } .drawer::backdrop { background: var(--c-overlay); } .drawer__inner { display: flex; flex-direction: column; height: 100%; padding: var(--space-4); gap: var(--space-2); } .drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--nav-h); } .drawer__links { display: grid; gap: 2px; margin-block: var(--space-4); } .drawer__links a { display: flex; align-items: center; min-height: 48px; padding-inline: var(--space-3); border-radius: var(--r-sm); font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--c-ink); text-decoration: none; } .drawer__links a:hover { background: var(--c-surface-sunken); } .drawer__foot { margin-block-start: auto; padding-block-start: var(--space-4); border-block-start: var(--border); } /* NOT `@media (min-width:960px) { .drawer[open] { display:none } }`. display:none does not close a modal or release the top layer: the dialog stays open and modal, the document stays inert, and the page is dead to both mouse and keyboard with nothing visible to explain it. A tablet rotated to landscape with the menu open is enough to trigger it. The drawer is closed in JS on the breakpoint change instead. */ .drawer[open] { animation: drawer-in var(--dur-3) var(--ease-out); } .drawer[open]::backdrop { animation: fade-in var(--dur-3) var(--ease-out); } @keyframes drawer-in { from { transform: translateX(100%); } } @keyframes fade-in { from { opacity: 0; } } /* --- 4.4 Hero ---------------------------------------------------------- Single column to 960. No stock illustration, no floating phone mockup. Every box that could load late has a reserved size → CLS 0. */ .hero { padding-block: calc(var(--section-y-loose) * .8) var(--section-y); } .hero__brandline { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-3); margin-block-end: var(--space-4); } .hero__brandline::before { content: ""; inline-size: 18px; block-size: 2px; border-radius: 2px; background: var(--c-brand); } .hero h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); font-weight: var(--fw-bold); max-width: 17ch; /* the promise, not a paragraph */ } .hero__lede { margin-block-start: var(--space-5); font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--c-ink-3); max-width: var(--measure-narrow); } .hero__cta { margin-block-start: var(--space-8); --gap: var(--space-3); } .hero__meta { margin-block-start: var(--space-4); font-size: var(--fs-sm); color: var(--c-ink-3); } .hero__meta strong { color: var(--c-ink); } .hero__grid { display: grid; gap: var(--space-10); } @media (min-width: 960px) { /* Two columns only when there is something for the right one. A hero without a figure used to reserve the column anyway and left its text hugging the left edge of an empty half-page. */ .hero__grid:has(.hero__figure) { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-16); align-items: center; } .hero__grid:has(.hero__figure) h1 { max-width: 15ch; } .hero__grid:not(:has(.hero__figure)) { text-align: center; } .hero__grid:not(:has(.hero__figure)) h1, .hero__grid:not(:has(.hero__figure)) .hero__lede, .hero__grid:not(:has(.hero__figure)) .hero__meta { margin-inline: auto; } .hero__grid:not(:has(.hero__figure)) .hero__cta { justify-content: center; } .hero__grid:not(:has(.hero__figure)) .hero__meta { max-width: var(--measure-narrow); } } .hero .launch-badge { margin-block-start: var(--space-4); } /* Slot for the product shot / live dropzone. Aspect ratio reserved up-front. */ .hero__figure { aspect-ratio: 4 / 3; border: var(--border); border-radius: var(--r-xl); background: var(--c-surface); box-shadow: var(--shadow-2); overflow: hidden; } @media (max-width: 959px) { .hero__figure { margin-block-start: var(--space-10); aspect-ratio: 5/4; } } /* --- 4.5 Proof strip --------------------------------------------------- 5 claims. On mobile it is a LIST, not a horizontal scroller: claims that have to be swiped for are claims nobody reads and Google can't weight. */ .proof { border-block: var(--border); background: var(--c-surface); padding-block: var(--space-6); } /* The band names itself. Deliberately NOT a full .section-head: a display h2 plus an eyebrow plus a lede directly under the hero competes with the H1 and turns the strip into a section. One line at lede size is enough to stop five facts reading as orphan ticks, and it gives the list the accessible name it had no way to get before. */ .proof__heading { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: normal; font-weight: var(--fw-semibold); color: var(--c-ink); margin: 0 0 var(--space-5); } .proof__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } .proof__item { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--c-ink-2); min-height: 44px; /* reserves height before the icon font/SVG paints */ } .proof__item:not(:has(> svg)) { display: block; } .proof__item svg { inline-size: 20px; block-size: 20px; color: var(--c-positive); margin-block-start: 1px; } .proof__item b { display: block; color: var(--c-ink); font-weight: var(--fw-semibold); } @media (min-width: 640px) { .proof__grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-5) var(--space-8); } } @media (min-width: 1100px) { .proof__grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--space-6); } .proof__item { border-inline-start: var(--border); padding-inline-start: var(--space-4); grid-template-columns: 1fr; } .proof__item svg { margin-block-end: var(--space-2); } } /* --- 4.6 Stepper (3-step how it works) --------------------------------- */ /* An ordered list is the correct semantics for steps, so the component has to survive being one: without the reset the browser markers render next to the numbered circles and every step reads "1. 1.". */ .stepper { display: grid; gap: var(--space-8); counter-reset: step; list-style: none; padding: 0; margin: 0; } .step { position: relative; padding-inline-start: calc(var(--space-10) + var(--space-2)); counter-increment: step; } .step::before { content: counter(step); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--c-surface); border: var(--border-strong); color: var(--c-ink); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; } /* Connector rail */ .step::after { content: ""; position: absolute; inset-inline-start: 19.5px; inset-block: 48px -32px; inline-size: var(--bw); background: var(--c-border); } .step:last-child::after { display: none; } .step h3 { font-size: var(--fs-lg); margin-block-end: var(--space-2); } .step p { color: var(--c-ink-3); max-width: 44ch; } /* A page's own detail under a station's one-line job (explainer notes). */ .step p + p { margin-block-start: var(--space-2); } @media (min-width: 860px) { .stepper { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-8); } .step { padding-inline-start: 0; padding-block-start: calc(40px + var(--space-5)); } .step::after { inset: 20px auto auto 48px; inline-size: auto; block-size: var(--bw); inset-inline: 48px calc(var(--space-8) * -1); } } /* --- 4.7 Upload dropzone ---------------------------------------------- States driven by a single data-state attribute set by vanilla JS: idle | dragover | uploading | parsed | error Drag is an ENHANCEMENT only — the native input + visible "Choose file" button satisfy WCAG 2.2 SC 2.5.7 (Dragging Movements). */ .dropzone { position: relative; display: grid; place-items: center; gap: var(--space-4); min-height: 280px; /* fixed → no CLS when state changes */ padding: var(--space-8) var(--space-5); text-align: center; background: var(--c-surface); border: var(--border-dashed); border-radius: var(--r-xl); transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .dropzone__icon { inline-size: 40px; block-size: 40px; color: var(--c-ink-3); } /* The one line above a document list that says how many are needed. */ .spec__lead { margin: 0 0 var(--space-3); font-size: var(--fs-sm); color: var(--c-ink-2); } .spec dt .badge { margin-inline-end: var(--space-1); vertical-align: middle; } /* One box per required file. The group of the checked broker tile shows; no script is needed to switch. Adding a live broker means adding its selector here — the upload page test checks that every live broker has one. */ [data-upload] .slots { display: none; gap: var(--space-5); } [data-upload]:has(input[name="broker"][value="ibkr"]:checked) .slots[data-slots="ibkr"], [data-upload]:has(input[name="broker"][value="degiro"]:checked) .slots[data-slots="degiro"] { display: grid; } .slots__lead { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-2); } .slot { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--border-strong); border-radius: var(--r-lg); background: var(--c-surface); } @media (min-width: 640px) { .slot { padding: var(--space-5); } } .slot__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); } .slot__name { font-weight: var(--fw-semibold); color: var(--c-ink); font-size: var(--fs-md); } .slot__spec { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--fs-sm); } .slot__spec div { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: baseline; min-inline-size: 0; } .slot__spec dt { font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-ink-3); } .slot__spec dd { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; } .slot__why { margin: 0; font-size: var(--fs-xs); color: var(--c-ink-3); } .dropzone--slot { min-height: 176px; padding: var(--space-5) var(--space-4); border-radius: var(--r-lg); background: var(--c-surface-sunken); } .dropzone--slot:hover { border-color: var(--c-brand); background: var(--c-brand-tint); } .dropzone--slot .dropzone__icon { inline-size: 44px; block-size: 44px; padding: 10px; border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-border); } .dropzone--slot .dropzone__state { gap: var(--space-3); } .dropzone--slot .dropzone__title { font-size: var(--fs-md); } .dropzone__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink); } .dropzone__hint { font-size: var(--fs-sm); color: var(--c-ink-3); max-width: 38ch; } .dropzone__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; } /* The native lives inside the zone and is visually hidden but focusable; its focus ring is projected onto the whole zone. */ .dropzone:has(.dropzone__input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; } .dropzone[data-state="dragover"] { border-style: solid; border-color: var(--c-brand); background: var(--c-brand-tint); box-shadow: var(--shadow-2); } .dropzone[data-state="uploading"] { border-style: solid; border-color: var(--c-border-strong); } .dropzone[data-state="parsed"] { border-style: solid; border-color: var(--c-positive-border); background: var(--c-positive-tint); } .dropzone[data-state="error"] { border-style: solid; border-color: var(--c-danger-border); background: var(--c-danger-tint); } /* Only show the block matching the current state. */ .dropzone__state { display: none; flex-direction: column; align-items: center; gap: var(--space-4); } .dropzone[data-state="idle"] .dropzone__state[data-for="idle"], .dropzone[data-state="dragover"] .dropzone__state[data-for="dragover"], .dropzone[data-state="uploading"] .dropzone__state[data-for="uploading"], .dropzone[data-state="parsed"] .dropzone__state[data-for="parsed"], .dropzone[data-state="error"] .dropzone__state[data-for="error"] { display: flex; } .progress { inline-size: min(320px, 100%); block-size: 6px; background: var(--c-surface-sunken); border-radius: var(--r-pill); overflow: hidden; } .progress__bar { block-size: 100%; inline-size: var(--value, 0%); background: var(--c-brand); border-radius: inherit; transition: inline-size var(--dur-3) var(--ease-out); } /* Indeterminate parse step */ .progress--indeterminate .progress__bar { inline-size: 35%; animation: indeterminate 1.1s var(--ease-in-out) infinite; } @keyframes indeterminate { 0% { transform: translateX(-100%);} 100% { transform: translateX(320%);} } .filechip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: 100%; padding: var(--space-2) var(--space-3); background: var(--c-surface-sunken); border: var(--border); border-radius: var(--r-pill); font-size: var(--fs-sm); } .filechip svg { inline-size: 16px; block-size: 16px; flex: none; color: var(--c-positive); } .filechip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 22ch; } .filechip__size { color: var(--c-ink-3); font-variant-numeric: tabular-nums; flex: none; } /* Errors: icon + text + colour. Never colour alone (WCAG 1.4.1). */ .field-error, .form-error { display: flex; align-items: start; gap: var(--space-2); font-size: var(--fs-sm); color: var(--c-danger-ink); text-align: start; } .form-error { padding: var(--space-4); background: var(--c-danger-tint); border: var(--bw) solid var(--c-danger-border); border-radius: var(--r-md); } .form-error h2 { font-size: var(--fs-base); color: var(--c-danger-ink); } .form-error a { color: var(--c-danger-ink); text-decoration: underline; } [aria-invalid="true"] { border-color: var(--c-danger) !important; } /* --- 4.8 Result / preview card ----------------------------------------- */ .result { background: var(--c-surface); border: var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-2); overflow: hidden; } .result__head { padding: var(--space-6) var(--space-5) var(--space-5); background: var(--c-positive-tint); border-block-end: var(--bw) solid var(--c-positive-border); text-align: center; } /* The zero case. Green is reserved for recovered money and a CHF 0.00 reclaim is not that, so the head drops to neutral rather than claiming a win the user did not get. The figure stays large: when the answer is nothing, a big honest zero says it better than a paragraph. */ .result__head--muted { background: var(--c-surface-sunken); border-block-end-color: var(--c-border); } .result__head--muted .result__label, .result__head--muted .result__sub { color: var(--c-ink-3); } .result__head--muted .figure-chf { color: var(--c-ink-2); } .result__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-positive-ink); } .figure-chf { display: flex; align-items: baseline; justify-content: center; gap: .18em; margin-block-start: var(--space-2); font-family: var(--font-display); font-size: var(--fs-figure); font-weight: var(--fw-bold); line-height: var(--lh-flat); letter-spacing: -0.03em; color: var(--c-positive-ink); } .figure-chf .cur { font-size: .42em; font-weight: var(--fw-semibold); letter-spacing: 0; opacity: .85; } .figure-chf .dec { font-size: .48em; font-weight: var(--fw-semibold); } .result__sub { margin-block-start: var(--space-3); font-size: var(--fs-sm); color: var(--c-positive-ink); } /* The figure next to the price. A rule above it, because it is a different claim from the explanation it follows: not what the credit is, but what it is worth paying for. Never on the muted head — see above. */ .result__gain { margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: var(--bw) solid var(--c-positive-border); font-size: var(--fs-base); color: var(--c-positive-ink); } .result__rows { padding: var(--space-2) var(--space-5); } .result__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-block-end: var(--bw) solid var(--c-border); font-size: var(--fs-sm); } .result__row:last-child { border-block-end: 0; } .result__row dt { color: var(--c-ink-2); } /* Per-row explanation, closed by default. The summary is a 1.1em "i" disc. */ .hint { display: inline; } .hint > summary { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.1em; block-size: 1.1em; margin-inline-start: var(--space-2); border: 1px solid var(--c-ink-3); border-radius: 50%; font-size: .7em; font-weight: var(--fw-semibold); font-style: italic; font-family: Georgia, serif; color: var(--c-ink-3); cursor: pointer; list-style: none; vertical-align: 1px; } .hint > summary::-webkit-details-marker { display: none; } .hint > summary:hover, .hint[open] > summary { color: var(--c-brand); border-color: var(--c-brand); } .hint > summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } .hint > p { margin: var(--space-1) 0 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--c-ink-3); max-inline-size: 34rem; } .result__row dd { color: var(--c-ink); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums lining-nums; text-align: end; } .result__foot { padding: var(--space-5); border-block-start: var(--border); background: var(--c-surface-sunken); } /* The answer's own call to action. A link at the end of a sentence is read as prose; this is the next step and looks like one. */ .result__foot--cta { display: grid; gap: var(--space-3); justify-items: start; } .result__foot--cta p { margin: 0; } /* Downloads — the delivery list. One link per file and the whole row is the target; the file the canton actually reads is the only row in brand colour. File type, purpose and size sit in the row, so nothing trails after the link and wraps on its own at 375px. */ /* The DA-1 sheet on screen: a picture of the blank form with the figures laid over it as text at the form's own field positions (fractions of the sheet, from data/forms/da-1-2025-de.boxes.json). Sized by container query units so the type scales with the sheet; the image is grayscale and stays as it is in dark mode — a form is white paper. */ .form-preview { margin: 0; max-width: 36rem; } .form-preview__sheet { position: relative; container-type: inline-size; overflow: hidden; border: var(--bw) solid var(--c-line); border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); } .form-preview__form { display: block; width: 100%; height: auto; } .form-preview__field { position: absolute; display: flex; align-items: center; box-sizing: border-box; padding-inline: 0.4cqw; font-size: 1.3cqw; line-height: 1; color: #1b3a8a; white-space: nowrap; overflow: hidden; } .form-preview__field[style*="text-align:end"] { justify-content: flex-end; } .form-preview__field[style*="text-align:center"] { justify-content: center; } .form-preview__stamp { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12cqw; font-weight: 700; letter-spacing: 0.12em; color: var(--c-warning); opacity: 0.22; transform: rotate(-28deg); pointer-events: none; } .form-preview__caption { margin-block-start: var(--space-2); font-size: var(--fs-sm); color: var(--c-ink-3); } @supports not (font-size: 1cqw) { .form-preview__field { font-size: 0.72rem; } .form-preview__stamp { font-size: 4rem; } } .downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); } .download { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); min-height: 64px; padding: var(--space-4) var(--space-5); border: var(--border); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-ink); text-decoration: none; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .download:hover { border-color: var(--c-brand); background: var(--c-brand-tint); color: var(--c-ink); } .download--lead { border-color: var(--c-brand); box-shadow: inset 0 0 0 var(--bw) var(--c-brand); } .download__kind { min-inline-size: 3.25rem; padding: var(--space-1) var(--space-2); text-align: center; border-radius: var(--r-sm); background: var(--c-surface-sunken); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-2); } .download--lead .download__kind { background: var(--c-brand); color: var(--c-brand-ink); } .download__body { display: grid; gap: 2px; min-inline-size: 0; } .download__label { font-weight: var(--fw-semibold); line-height: var(--lh-snug); } .download__meta { font-size: var(--fs-xs); color: var(--c-ink-3); line-height: var(--lh-normal); } .download__arrow { inline-size: 20px; block-size: 20px; color: var(--c-brand); } @media (max-width: 479px) { .download { grid-template-columns: auto minmax(0, 1fr); } .download__arrow { display: none; } } /* Key-value metadata (document reference, generated, standard). A bare
renders as an undifferentiated stack, which reads as broken markup. */ .meta-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; font-size: var(--fs-sm); } .meta-dl dt { color: var(--c-ink-3); } .meta-dl dd { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums lining-nums; } @media (max-width: 479px) { .meta-dl { grid-template-columns: 1fr; gap: var(--space-1); } .meta-dl dd { margin-block-end: var(--space-2); } } /* "I'm stuck" follows the column it sits under. On a prose page that column is the measure, not the narrow container, and a wider panel under a narrower column reads as misaligned rather than as a design. The class sits on the panel's CONTAINER so it gets the same padding, centring and font size as the prose container above it — 68ch is only the same width when it is measured in the same font. */ body:has(.container--narrow.prose) .stuck { max-inline-size: var(--measure); font-size: var(--fs-md); } /* Locked preview: show enough to trust, blur the rest. Never blur the money. */ .locked { position: relative; } .locked__veil { position: absolute; inset: auto 0 0; block-size: 62%; background: linear-gradient(to bottom, transparent, var(--c-surface) 72%); display: grid; align-items: end; justify-items: center; padding-block-end: var(--space-5); } .locked__blur { filter: blur(4px); user-select: none; pointer-events: none; } /* --- 4.9 Pricing ------------------------------------------------------- */ .pricing { display: grid; gap: var(--space-5); } @media (min-width: 860px) { .pricing { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: var(--space-6); } } /* Three tiers in two columns left the third alone on its own row. */ @media (min-width: 1100px) { .pricing { grid-template-columns: repeat(3, minmax(0, 360px)); } } .price-card { display: flex; flex-direction: column; padding: var(--space-6); background: var(--c-surface); border: var(--border); border-radius: var(--r-xl); } .price-card--featured { border-color: var(--c-brand-border); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--c-brand-border); } .price-card__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink); } .price-card__for { margin-block-start: var(--space-1); font-size: var(--fs-sm); color: var(--c-ink-3); } .price-card__amount { display: flex; align-items: baseline; gap: var(--space-2); margin-block: var(--space-5); font-family: var(--font-display); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 2.75rem); font-weight: var(--fw-bold); line-height: var(--lh-flat); letter-spacing: -0.03em; color: var(--c-ink); font-variant-numeric: tabular-nums lining-nums; } .price-card__amount .cur { font-size: .5em; font-weight: var(--fw-semibold); color: var(--c-ink-3); } .price-card__once { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--c-ink-3); letter-spacing: 0; } .price-card ul { list-style: none; padding: 0; margin-block: var(--space-2) var(--space-6); display: grid; gap: var(--space-3); } .price-card li { display: grid; grid-template-columns: 18px 1fr; gap: var(--space-3); font-size: var(--fs-sm); } /* See the note on .note: an icon-slot grid with no icon renders its text one character wide. Same guard, same reason. */ .price-card li:not(:has(> svg)) { display: block; } .price-card li svg { inline-size: 18px; block-size: 18px; color: var(--c-positive); margin-block-start: 2px; } .price-card li[data-excluded] { color: var(--c-ink-3); } .price-card li[data-excluded] svg { color: var(--c-ink-4); } /* Last element in the card, so every tier's button sits on one line however long the feature list and the fine print above it are. */ .price-card .btn { margin-block-start: auto; } .price-note { margin-block-start: var(--space-4); font-size: var(--fs-xs); color: var(--c-ink-3); } /* --- 4.10 Data table --------------------------------------------------- The fee table and the canton matrix are the two most linkable assets in the business. Rules, not zebra. Tabular figures. Real at every width — never flattened to cards, because the comparison IS the value and a screenshot of stacked cards is worthless. Sticky-header caveat, decided deliberately: `overflow-x:auto` makes the wrapper a scroll container, which breaks a thead that is sticky to the viewport. So the wrapper only scrolls below 1100px; above it the table fits and thead sticks under the nav. Below it, the sticky FIRST COLUMN carries row identity, which matters more on a phone than a sticky header row. */ .table-wrap { overflow-x: auto; overflow-y: hidden; /* the x scrollbar's own height otherwise triggers a y scrollbar */ overscroll-behavior-x: contain; border: var(--border); border-radius: var(--r-lg); background: linear-gradient(to right, var(--c-surface) 30%, rgba(255,255,255,0)) left center / 44px 100% no-repeat local, linear-gradient(to left, var(--c-surface) 30%, rgba(255,255,255,0)) right center / 44px 100% no-repeat local, radial-gradient(farthest-side at 0% 50%, var(--shadow-scroll), rgba(255,255,255,0)) left center / 16px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, var(--shadow-scroll), rgba(255,255,255,0)) right center / 16px 100% no-repeat scroll, var(--c-surface); } /* Keyboard users must be able to scroll it: give the wrapper role="region" aria-label="…" tabindex="0" in the HTML. */ .table-wrap:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } /* A second horizontal scrollbar that stays at the bottom of the viewport while a tall table scrolls through it, so nobody has to reach the table's end to move sideways. The script adds it after a .table-wrap and shows it only while the table both overflows and is taller than most of the viewport; it mirrors the wrap's scroll position both ways. */ .table-scroller { position: sticky; bottom: 0; z-index: 4; overflow-x: auto; overflow-y: hidden; block-size: 18px; margin-block-start: calc(-1 * var(--space-2)); background: var(--c-surface); border-block-start: var(--border); } .table-scroller > div { block-size: 1px; } .table { inline-size: 100%; min-inline-size: 42rem; /* below this the columns crush */ border-collapse: collapse; font-size: var(--fs-xs); font-variant-numeric: tabular-nums lining-nums slashed-zero; } @media (min-width: 768px) { .table { font-size: var(--fs-sm); } } .table caption { caption-side: top; padding: var(--space-4) var(--space-4) var(--space-3); text-align: start; font-size: var(--fs-sm); color: var(--c-ink-3); border-block-end: var(--bw) solid var(--c-border); } .table caption b { display: block; margin-block-end: var(--space-1); font-size: var(--fs-lg); color: var(--c-ink); font-weight: var(--fw-semibold); } .table caption .meta { font-size: var(--fs-xs); } .table thead th { position: sticky; top: 0; z-index: 3; padding: var(--space-3) var(--space-4); background: var(--c-surface-sunken); border-block-end: var(--bw-strong) solid var(--c-border-strong); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-ink-3); text-align: start; white-space: nowrap; } /* Once upon a time this switched .table-wrap to overflow: visible above 1100px so the header could stick to the viewport. That assumes every table fits its column at 1100px, and a five-column securities table does not: it spilled past the card edge on the preview, invisible to axe and to every text assertion. The wrap now clips at every width. The header still sticks within the wrap, which is the behaviour a scrolling table actually needs; tests/layout.spec.ts checks the geometry at 1100, 1280 and 1600. */ @media (min-width: 1100px) { .table thead th { top: 0; } } /* Body AND foot. Scoping this to tbody left every tfoot cell on the UA's defaults — `padding: 1px` and, on a th, centred text. Nobody noticed while the figures were small: a six-figure total in the larger type of the total row filled its cell to within 2px of the next one, so "CHF 1'234'567.89" and the DA-1 credit beside it read as a single number. The foot carries the figures a reader copies onto a form, so it is the last place that can afford to be ambiguous. */ .table tbody td, .table tbody th, .table tfoot td, .table tfoot th { padding: var(--space-3) var(--space-4); vertical-align: baseline; text-align: start; } .table tbody td, .table tbody th { border-block-end: var(--bw) solid var(--c-border); } .table tbody tr:last-child td, .table tbody tr:last-child th { border-block-end: 0; } /* The closing line of a security's movements: a rule above, the rest as a row. */ .table tbody tr.table__subtotal td, .table tbody tr.table__subtotal th { border-block-start: var(--bw-strong) solid var(--c-border-strong); background: var(--c-surface-sunken); } /* The total of a table, set apart: the figure a reader carries to the form. Set apart by tint, rule and weight — deliberately NOT by size. It used to be two type steps above its own column (19px over a 13px body), which cost the one thing tabular figures exist to provide: a total whose digits sit directly under the digits it totals. It also sized itself out of a column whose width was computed from the smaller body text, so a six-figure total ran into the total beside it. Emphasis that changes the type size inside a column is emphasis the column cannot pay for. */ .table tfoot tr.table__total th, .table tfoot tr.table__total td { background: var(--c-brand-tint); border-block-start: var(--bw-strong) solid var(--c-brand-border); font-weight: var(--fw-semibold); } .table tfoot tr.table__total strong { font-weight: var(--fw-bold); } /* A section of the statement page: a disclosure whose summary is the heading. */ .disclosure--section > summary { grid-template-columns: minmax(0, 1fr) 12px; grid-template-areas: "title chev"; } .disclosure--section .disclosure__title { font-size: var(--fs-xl); } .prose .disclosure { margin-block: var(--space-6); } /* `.prose > * + *` is a direct-child rule, so prose inside a disclosure body got no rhythm at all and paragraphs ran together. The body is a prose container in its own right; give it the same rule. */ .prose .disclosure__body > * + * { margin-block-start: var(--space-5); } .prose .disclosure__body > :first-child, .prose .disclosure .table-wrap { margin-block-start: 0; } .prose .disclosure .table-wrap { margin-block: 0; } /* A payment under its security: indented, lighter, so the security rows read as headings. */ .table tbody th.table__sub { padding-inline-start: calc(var(--space-4) + 1.5rem + var(--space-2)); font-weight: var(--fw-regular); color: var(--c-ink-2); } .table tbody tr:hover td, .table tbody tr:hover th { background: var(--c-surface-sunken); } /* Row header = the institution name. Sticky on phones — and it WRAPS there. nowrap plus the permalink used to hand "PostFinance E-Trading #" three quarters of a 375px viewport and push the Cost column off screen. */ .table tbody th[scope="row"] { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--c-surface); font-weight: var(--fw-semibold); color: var(--c-ink); border-inline-end: var(--bw) solid var(--c-border); white-space: normal; min-inline-size: 7rem; max-inline-size: 38vw; } @media (min-width: 768px) { .table tbody th[scope="row"] { white-space: nowrap; max-inline-size: none; } /* Payment descriptions ("VT(US9220427424) CASH DIVIDEND USD 0.72 PER SHARE") are long; letting them wrap is what lets five columns fit the app width without a sideways scroll. */ .disclosure .table tbody th[scope="row"] { white-space: normal; max-inline-size: 26rem; } } @media (min-width: 1100px) { .table tbody th[scope="row"] { position: static; border-inline-end: 0; } } /* The primary value column sits right after the row header, so it is on screen beside the sticky name at 375px. Tables with two or three short columns need no minimum width at all. */ .table--narrow { min-inline-size: 0; } .table--narrow tbody th[scope="row"] { max-inline-size: 44vw; } /* A note that belongs to a row: a real second with one cell spanning the table, so the note never becomes a fourth column that wraps into a 300px-tall row. The inner block is sticky to the left edge so the note stays in the viewport while the table scrolls sideways on a phone. */ .table tbody tr.table__note-row td { padding-block: 0 var(--space-3); border-block-end: var(--bw) solid var(--c-border); font-size: var(--fs-xs); color: var(--c-ink-3); vertical-align: top; } .table tbody tr:has(+ .table__note-row) td, .table tbody tr:has(+ .table__note-row) th { border-block-end: 0; padding-block-end: var(--space-1); } .table__note { display: block; position: sticky; inset-inline-start: 0; max-inline-size: min(100%, calc(100vw - 2 * var(--gutter) - 2 * var(--space-4))); line-height: var(--lh-normal); } .table__note a { display: inline; min-block-size: 0; } .table tbody tr.table__note-row:hover td { background: transparent; } /* Numbers right-aligned, decimal-consistent, unit in the header not the cell. */ /* Links inside a table row are targets, not prose: SC 2.5.8's inline-in-a- sentence exemption does not cover them, and at the default 13px body size they render ~17px tall. The row padding already supplies the width. */ .table a { display: inline-flex; align-items: center; min-block-size: 24px; } .table .num { text-align: end; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; } .table th.num { text-align: end; } .table .num--zero { color: var(--c-positive); font-weight: var(--fw-semibold); } .table .num--high { color: var(--c-danger); } .table .cell-note { display: block; font-size: var(--fs-3xs); color: var(--c-ink-3); font-variant-numeric: normal; } /* The running number of a position, repeated on each of its payments in the "one by one" list so the two tables can be matched by eye. */ /* The "N payments" toggle in a security row: a button that reads as the cell's text, with a chevron that turns when the payments are shown. */ .fold { display: inline-flex; align-items: center; gap: var(--space-2); min-block-size: 24px; padding: 0 var(--space-1); margin-inline-start: calc(-1 * var(--space-1)); border: 0; border-radius: var(--r-sm); background: none; font: inherit; color: var(--c-brand); cursor: pointer; white-space: nowrap; } .fold:hover { text-decoration: underline; } .fold:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } .fold__chev { inline-size: 0.5em; block-size: 0.5em; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(-45deg) translateY(-1px); transition: transform var(--dur-2) var(--ease-out); } .fold[aria-expanded="true"] .fold__chev { transform: rotate(45deg) translateY(-2px); } /* --- The late DA-1 claim ------------------------------------------------ A second door into the same engine. It borrows every component the statement flow uses; what it adds is the deadline line, the three confirmations and the offer of another year. */ .claim-banner { margin-block-start: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: var(--c-brand-tint); font-size: var(--fs-sm); color: var(--c-ink-2); max-width: var(--measure-narrow); } .claim-banner a { margin-inline-start: var(--space-2); } .claim-checks { display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: 0; list-style: none; counter-reset: claim; } .claim-check { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-2); } .claim-check .check { margin: 0; } /* The DA-1 waiting list: one checkbox per tax year still open. The legend reads as a field label, not a heading. */ .year-picks { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); min-inline-size: 0; } .year-picks > legend { padding: 0; margin-block-end: var(--space-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); } .year-picks .check { min-block-size: 44px; align-items: center; } .waitlist-da1 { max-width: var(--measure-narrow); } /* The same list on the past-year page, which sits in a plain container rather than prose, so it brings its own spacing. */ .late-wait { display: grid; gap: var(--space-3); max-width: var(--measure); margin-block-start: var(--space-10); padding-block-start: var(--space-8); border-block-start: var(--border); } .late-wait > * { margin: 0; } .waitlist-da1 .year-picks { margin-block-start: var(--space-2); } /* "I have a code" on a claim: a real disclosure, not the round "i" that .hint renders, because its summary is a sentence the reader must read. */ .code-disclosure { margin-block-start: var(--space-3); border-block-start: var(--border); padding-block-start: var(--space-3); } .code-disclosure > summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2); } .code-disclosure > summary:hover { color: var(--c-brand); } .code-disclosure > summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-sm); } .code-disclosure > .stack { margin-block-start: var(--space-3); } .past-years { margin-block-start: var(--space-2); } .past-years a { white-space: nowrap; } /* A pay button that cannot yet do anything says so, rather than failing on click. */ [data-da1-gate] button[disabled] { opacity: 0.55; cursor: not-allowed; } .rownum { display: inline-block; min-inline-size: 1.5rem; margin-inline-end: var(--space-2); padding: 0 var(--space-1); border: var(--border); border-radius: var(--r-sm); background: var(--c-surface-sunken); font-size: var(--fs-3xs); font-weight: var(--fw-semibold); line-height: 1.5rem; color: var(--c-ink-3); text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; } .table .row-notes { margin: var(--space-1) 0 0; padding-inline-start: 1em; font-size: var(--fs-3xs); font-weight: var(--fw-regular); color: var(--c-warning-ink, var(--c-ink-2)); font-variant-numeric: normal; } .table .row-notes li + li { margin-block-start: 2px; } .table .row-notes .hint > p { font-size: var(--fs-3xs); max-inline-size: 42rem; color: var(--c-ink-2); } /* Per-row permalink. Always in the DOM and focusable; revealed on hover/focus. */ /* Faint rather than hidden. opacity:0-until-hover means the permalink does not exist on touch, which is ~half the traffic, on the two pages whose whole job is being linked to and quoted. */ .row-link { display: inline-block; margin-inline-start: var(--space-2); min-inline-size: 24px; min-block-size: 24px; /* SC 2.5.8 */ color: var(--c-ink-3); text-decoration: none; opacity: .55; transition: opacity var(--dur-1) var(--ease-out); } /* On a phone the permalink drops to its own line under the name instead of widening the sticky column. */ @media (max-width: 767px) { .row-link { display: block; margin-inline-start: 0; } } tr:hover .row-link, .row-link:focus-visible { opacity: 1; color: var(--c-brand); } @media (hover: none) { .row-link { opacity: 1; } } .table tbody tr:target th[scope="row"] { box-shadow: inset 3px 0 0 0 var(--c-brand); } .table tbody tr:target td, .table tbody tr:target th { background: var(--c-brand-tint); } /* `.table--stack` was here: a max-width:559px opt-in that set thead visually-hidden, tr to display:block and td to display:flex with ::before labels. Deleted rather than documented, because that pattern strips table semantics from the accessibility tree and no comment saying "only for 2-3 column tables" survives contact with a deadline. A narrow table fits at 320px; lower its min-inline-size instead. */ /* Provenance line under every table — the thing that gets quoted with you. */ .table-source { margin-block-start: var(--space-3); font-size: var(--fs-xs); color: var(--c-ink-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); } /* Canton acceptance matrix: a compact variant with symbol cells. */ .table--matrix td { text-align: center; } /* Colour reinforces, never carries. Under protanopia the positive green and the danger red separate by ~1.14:1, so every status glyph in these tables is paired with text the markup supplies (a .visually-hidden word at minimum). Do not reduce these to a bare coloured tick. */ .table--matrix .yes { color: var(--c-positive); font-weight: var(--fw-semibold); } .table--matrix .no { color: var(--c-ink-3); } .table .num--zero { font-weight: var(--fw-semibold); } /* the cell already reads 0.00 */ /* --- 4.11 FAQ accordion — native
, zero JS -------------------- */ .faq { border-block-start: var(--border); } .faq__item { border-block-end: var(--border); } .faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 60px; padding-block: var(--space-4); font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink); cursor: pointer; list-style: none; } .faq__item > summary::-webkit-details-marker { display: none; } .faq__item > summary::after { content: ""; flex: none; inline-size: 11px; block-size: 11px; border-inline-end: 2px solid var(--c-ink-3); border-block-end: 2px solid var(--c-ink-3); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-2) var(--ease-out); } .faq__item[open] > summary::after { transform: rotate(225deg) translateY(-2px); } .faq__item > summary:hover { color: var(--c-brand); } .faq__body { padding-block-end: var(--space-5); color: var(--c-ink-2); max-width: var(--measure); } .faq__body > * + * { margin-block-start: var(--space-3); } /* Smooth open where supported; instant elsewhere. No JS, no height hacks. */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .faq__item::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size var(--dur-3) var(--ease-out), content-visibility var(--dur-3) allow-discrete, opacity var(--dur-2) var(--ease-out); } .faq__item[open]::details-content { block-size: auto; opacity: 1; } } /* --- 4.11b Form controls ----------------------------------------------- These did not exist. The token layer always anticipated them (--c-surface-sunken is commented "inputs, code, zebra") but no component was ever written, so every and