/* ─────────────────────────────────────────────────────────────── Salary calculator — "e-Estonia" style. Flag tricolour, crisp grid, Manrope typeface. Light (warm) / dark theme — follows the OS system setting. ─────────────────────────────────────────────────────────────── */ /* ── Self-hosted fonts (variable woff2, latin + cyrillic subsets) ── Self-hosted instead of the Google Fonts CDN: faster (Core Web Vitals) and GDPR-clean (the CDN would expose the visitor's IP to Google). */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("/fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/jetbrainsmono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("/fonts/jetbrainsmono-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* ── LIGHT THEME (warm, default) ── */ :root { --bg: #f3efe6; /* warm paper instead of harsh white */ --panel: #fcfaf5; --ink: #15171c; --muted: #5f6470; --line: #ddd6c5; --blue: #0063b8; /* Estonian flag blue, darkened for WCAG AA text contrast */ --blue-ink: #ffffff; /* text on blue */ --panel-border: #15171c; --panel-border-w: 1.5px; --field-bg: #ffffff; --tip-bg: #e9f1fa; /* flag: blue — black — white */ --flag-2: #15171c; --flag-3: #ffffff; /* hairline that frames the tricolour so the white stripe stays visible on the warm paper background (and the black stripe on the dark one) */ --flag-edge: rgba(21, 23, 28, 0.3); /* gold accent — premium mark for the maximum contribution */ --gold: #8a6400; --gold-ink: #ffffff; --gold-bg: #f3e9c8; /* breakdown semantics (used in app.js via var()) */ --c-net: #0072ce; --c-tax: #15171c; --c-unemp: #ffffff; --c-pension: #5aa7e6; } /* ── DARK THEME ── Applied in two cases: 1. System dark theme — but only if the user has not picked a theme manually (then has no data-theme attribute). 2. Manual "dark" choice — has data-theme="dark". The variable set is the same; the selectors differ, hence the duplication. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #15171c; --panel: #1e2128; --ink: #e9e7e0; --muted: #9298a4; --line: #2e323b; --blue: #429eec; --blue-ink: #0b1016; --panel-border: #2e323b; --panel-border-w: 1px; --field-bg: #262a32; --tip-bg: #1f2a36; --flag-2: #000000; --flag-3: #ffffff; --flag-edge: rgba(255, 255, 255, 0.22); --gold: #e8c060; --gold-ink: #15171c; --gold-bg: #2a2614; --c-net: #2f93e6; --c-tax: #c7cbd4; --c-unemp: #ffffff; --c-pension: #1f6aa8; } } :root[data-theme="dark"] { --bg: #15171c; --panel: #1e2128; --ink: #e9e7e0; --muted: #9298a4; --line: #2e323b; --blue: #429eec; --blue-ink: #0b1016; --panel-border: #2e323b; --panel-border-w: 1px; --field-bg: #262a32; --tip-bg: #1f2a36; --flag-2: #000000; --flag-3: #ffffff; --flag-edge: rgba(255, 255, 255, 0.22); --gold: #e8c060; --gold-ink: #15171c; --gold-bg: #2a2614; --c-net: #2f93e6; --c-tax: #c7cbd4; --c-unemp: #ffffff; --c-pension: #1f6aa8; } * { box-sizing: border-box; margin: 0; padding: 0; } /* [hidden] must hide the element even if it has a display from a class */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: "Manrope", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.55; padding: 0 16px 64px; } /* ── Flag tricolour bar — sticky at the top while scrolling ── */ .flagbar { display: flex; height: 6px; margin: 0 -16px 0; position: sticky; top: 0; z-index: 100; } .flagbar { box-shadow: inset 0 0 0 1px var(--flag-edge); } .flagbar i { flex: 1; } .flagbar i:nth-child(1) { background: var(--blue); } .flagbar i:nth-child(2) { background: var(--flag-2); } .flagbar i:nth-child(3) { background: var(--flag-3); } /* ── Soft language banner (shown by app.js to a matching browser lang) ── */ .langbanner { display: flex; align-items: center; gap: 12px; max-width: 540px; margin: 14px auto 0; padding: 10px 14px; background: var(--tip-bg); border: var(--panel-border-w) solid var(--blue); font-size: 0.85rem; } .langbanner__text { flex: 1; min-width: 0; color: var(--ink); } .langbanner__go { flex: none; font-weight: 700; color: var(--blue); text-underline-offset: 2px; } .langbanner__close { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; } .langbanner__close:hover { color: var(--ink); } /* ── Sheet ── */ .sheet { max-width: 540px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } /* ── Masthead ── */ .masthead { padding: 34px 2px 4px; } .masthead__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .masthead__controls { display: flex; align-items: center; gap: 8px; } /* On narrow screens the kicker and the controls fight for one row, which wraps the kicker into ragged 3-line text. Give the controls their own row and let the kicker span the full width on a single line. */ @media (max-width: 560px) { .masthead__row { flex-wrap: wrap; } .masthead__controls { order: -1; margin-left: auto; } .kicker { flex-basis: 100%; } } /* Language switcher — real links, mirrors the theme toggle style */ .langswitch { display: flex; flex: none; } .langswitch__opt { font-family: "Manrope", sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); text-decoration: none; border: 1.5px solid var(--line); padding: 6px 8px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .langswitch__opt + .langswitch__opt { margin-left: -1.5px; } /* shared border */ .langswitch__opt.is-active { color: var(--blue-ink); background: var(--blue); border-color: var(--blue); } .langswitch__opt:not(.is-active):hover { color: var(--blue); border-color: var(--blue); } .langswitch__opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* active / hovered option on top — its full border is visible */ .langswitch__opt.is-active, .langswitch__opt:hover, .langswitch__opt:focus-visible { position: relative; z-index: 1; } /* Theme toggle: light ↔ dark */ .themetoggle { display: inline-flex; align-items: center; gap: 7px; flex: none; font-family: "Manrope", sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: transparent; border: 1.5px solid var(--line); padding: 6px 10px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .themetoggle:hover { color: var(--blue); border-color: var(--blue); } .themetoggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .themetoggle__icon { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; } /* light — empty circle, dark — filled */ .themetoggle[data-theme="dark"] .themetoggle__icon { background: currentColor; } /* Plain inline text — NOT flex: a flex kicker turns the year and each text run into separate flex items, which scatters 9px gaps through the line (e.g. detaches the Estonian ordinal dot: "2026 . aasta"). */ .kicker { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); } .kicker__mark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px; vertical-align: middle; border: 1.5px solid var(--blue); font-family: "JetBrains Mono", monospace; font-size: 0.78rem; /* no inherited tracking — it adds trailing space and shifts the € left */ letter-spacing: normal; } .masthead__title { font-weight: 800; font-size: clamp(2.1rem, 8.4vw, 3rem); line-height: 1.04; letter-spacing: -0.03em; margin-top: 12px; } /* ── Panels ── */ .panel { background: var(--panel); border: var(--panel-border-w) solid var(--panel-border); padding: 22px; scroll-margin-top: 18px; /* offset for anchor jumps — below the flag bar */ } .panel__title { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; display: flex; align-items: center; gap: 9px; margin-bottom: 18px; } .panel__num { font-family: "JetBrains Mono", monospace; font-size: 0.7rem; font-weight: 700; background: var(--ink); color: var(--bg); padding: 2px 6px; } /* ── Input fields ── */ .inputs { display: flex; flex-direction: column; gap: 22px; } /* Gross↔net mode switch */ .modeswitch { display: flex; border: var(--panel-border-w) solid var(--panel-border); } .modeswitch__btn { flex: 1; font-family: "Manrope", sans-serif; font-size: 0.82rem; font-weight: 800; color: var(--muted); background: transparent; border: 0; padding: 11px 8px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .modeswitch__btn + .modeswitch__btn { border-left: var(--panel-border-w) solid var(--panel-border); } .modeswitch__btn.is-active { background: var(--blue); color: var(--blue-ink); } .modeswitch__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; } .field { display: flex; flex-direction: column; gap: 8px; } .field__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); } .field__hint { font-weight: 700; } .field__wrap { position: relative; display: flex; align-items: center; } .field__input { width: 100%; font-family: "Manrope", sans-serif; font-size: 1.2rem; color: var(--ink); background: transparent; border: 0; border-bottom: 2.5px solid var(--ink); padding: 9px 2px; transition: border-color 0.16s ease; } .field__input--num { font-family: "JetBrains Mono", monospace; font-weight: 700; letter-spacing: -0.01em; } /* Hide the browser's native spinners — replaced by large +/- buttons */ .field__input--num::-webkit-outer-spin-button, .field__input--num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .field__input--num { -moz-appearance: textfield; appearance: textfield; } .field__input:focus { outline: none; border-bottom-color: var(--blue); } .field__input--select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px; } .field__wrap:has(.field__input--select)::after { content: ""; position: absolute; right: 4px; width: 9px; height: 9px; border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: translateY(-3px) rotate(45deg); pointer-events: none; } .field__unit { font-family: "JetBrains Mono", monospace; font-size: 1.05rem; font-weight: 700; color: var(--muted); padding-left: 8px; } /* Field with +/- buttons — large touch targets, both buttons together on the right */ .field__wrap--stepper { gap: 8px; } .field__wrap--stepper .field__input { flex: 1; min-width: 0; width: auto; } /* One framed unit: the border lives on the wrapper and a single fixed divider sits between the buttons. No overlap or z-index juggling, so pressing a button never nudges the layout by a pixel. */ .stepper { display: flex; flex: none; border: 2px solid var(--ink); } .stepper-btn { flex: none; width: 46px; /* 40 + 2×2px border = 44px — a whole number of device pixels at every common scaling factor; app.js snapToGrid() pins it to the grid so the frame stays even, including when a pressed button fills with blue. */ height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink); font-family: "JetBrains Mono", monospace; font-size: 1.5rem; font-weight: 700; line-height: 1; cursor: pointer; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.12s ease, color 0.12s ease; } .stepper-btn + .stepper-btn { border-left: 2px solid var(--ink); } .stepper-btn:hover { color: var(--blue); } .stepper-btn:active { background: var(--blue); color: var(--blue-ink); } .stepper-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* Spacing between fields in panels (except the input block — it has its own flex-gap) */ .panel:not(.inputs) > .field + .field { margin-top: 20px; } .field__labelrow { display: flex; align-items: center; gap: 7px; } .hint { display: inline-grid; place-items: center; width: 19px; height: 19px; flex: none; border: 0; border-radius: 50%; background: var(--blue); color: var(--blue-ink); font-family: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer; padding: 0; } .hint:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* Persistent small note under a field */ .field__note { font-size: 0.8rem; line-height: 1.4; color: var(--muted); } /* Hint note, expands on a click of the "?" */ .tip { font-size: 0.86rem; line-height: 1.5; color: var(--ink); background: var(--tip-bg); border-left: 3px solid var(--blue); padding: 10px 12px; } .tip[hidden] { display: none; } /* Checkbox with a label — employment status etc. */ .check { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; } .check__box { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--blue); cursor: pointer; } .check__body { display: flex; flex-direction: column; gap: 3px; } .check__title { font-weight: 700; font-size: 0.92rem; } .check__note { font-size: 0.8rem; line-height: 1.4; color: var(--muted); max-width: 46ch; } /* Panel intro paragraph */ .panel__lead { font-size: 0.9rem; line-height: 1.55; color: var(--muted); margin-bottom: 16px; max-width: 52ch; } .panel__lead b { color: var(--ink); } /* ── Verdict: how much take-home ── */ .verdict { position: relative; overflow: hidden; background: var(--blue); color: var(--blue-ink); padding: 30px 26px 32px; } .verdict__glyph { position: absolute; right: -6px; bottom: -56px; font-weight: 800; font-size: 12rem; line-height: 1; color: var(--blue-ink); opacity: 0.12; user-select: none; } .verdict__caption { position: relative; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; } .verdict__value { position: relative; display: flex; align-items: baseline; gap: 8px; margin-top: 6px; white-space: nowrap; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: clamp(2.6rem, 12vw, 4rem); letter-spacing: -0.04em; } .verdict__cur { font-size: 0.42em; font-weight: 700; opacity: 0.8; } /* ── Breakdown bar ── */ .bar { display: flex; /* 24px keeps the height a whole number of device pixels at every common display-scaling factor (1×, 1.25×, 1.5×, 2×) — so both horizontal borders land on the pixel grid. app.js snapBar() pins the top edge, which keeps the thin frame crisp and even on every side. */ height: 24px; overflow: hidden; background: var(--line); border: var(--panel-border-w) solid var(--panel-border); } .bar__seg { height: 100%; transition: flex-grow 0.4s cubic-bezier(0.22,1,0.36,1); } /* ── Breakdown list (rows built by app.js) ── */ .breakdown { list-style: none; margin-top: 12px; display: flex; flex-direction: column; } /* Grid: title in col1/row1, amount+annual in col2 spanning both rows, note in col1/row2. The note sits right under the title (no dead gap) and, being in its own column, can never overlap the "за год" line. */ .row { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); } .row:first-child { border-top: 0; padding-top: 0; } .row__fund { grid-column: 1 / -1; grid-row: 3; } /* Thin gap standing in for the wide monospace grouping space inside numbers */ .numgap { display: inline-block; width: 0.22em; } .row__top { grid-column: 1; grid-row: 1; min-width: 0; display: flex; align-items: flex-start; gap: 9px; } /* Hairline ring so the white legend dot stays visible on the light panel */ .row__dot { width: 11px; height: 11px; flex: none; margin-top: 5px; box-shadow: inset 0 0 0 1px var(--panel-border); } .row__name { font-weight: 700; font-size: 0.98rem; min-width: 0; } .row__amount { grid-column: 2; grid-row: 1 / span 2; align-self: start; white-space: nowrap; text-align: right; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .row__note { grid-column: 1; grid-row: 2; font-size: 0.8rem; line-height: 1.4; color: var(--muted); padding-left: 20px; margin-top: 3px; } /* Special II pillar row — how much actually goes into the pension fund */ .row__fund { margin-top: 6px; margin-left: 20px; font-size: 0.8rem; font-weight: 700; color: var(--blue); background: var(--tip-bg); border-left: 3px solid var(--blue); padding: 6px 9px; } .row__fund b { font-family: "JetBrains Mono", monospace; white-space: nowrap; } /* ── "Cost to the employer" section ── */ /* Full cost of the employee — one large amount */ .empcost { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .empcost__val { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: clamp(1.8rem, 7.5vw, 2.3rem); letter-spacing: -0.03em; color: var(--blue); white-space: nowrap; } .ledger { list-style: none; display: flex; flex-direction: column; } .led { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); } .led:first-child { border-top: 0; padding-top: 2px; } .led__top { grid-column: 1; grid-row: 1; min-width: 0; display: flex; align-items: flex-start; gap: 9px; } .led__name { font-weight: 700; font-size: 0.98rem; min-width: 0; } .led__pct, .row__pct { font-family: "JetBrains Mono", monospace; font-size: 0.68rem; font-weight: 700; color: var(--blue-ink); background: var(--blue); padding: 1px 5px; flex: none; margin-top: 3px; } .led__amount { grid-column: 2; grid-row: 1 / span 2; align-self: start; white-space: nowrap; text-align: right; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .led__note { grid-column: 1; grid-row: 2; font-size: 0.8rem; line-height: 1.4; color: var(--muted); margin-top: 4px; } /* Narrow screens: a side amount column would squeeze the title and note into a cramped strip. Stack instead — title, amount, note — each full width. */ @media (max-width: 560px) { .row, .led { grid-template-columns: 1fr; } .row__amount, .led__amount { grid-column: 1; grid-row: 2; text-align: left; } /* Indent the amount to line up with the title text and note, which sit past the breakdown row's colour dot. */ .row__amount { padding-left: 20px; } .row__note, .led__note { grid-row: 3; } .row__fund { grid-row: 4; } } /* ── Panel 03: II pillar rate comparison ── */ .rates { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .rate { border: var(--panel-border-w) solid var(--line); padding: 13px 14px; display: flex; flex-direction: column; gap: 11px; } .rate--active { border-color: var(--blue); background: var(--tip-bg); } .rate__head { display: flex; align-items: center; gap: 8px; } .rate__badge { font-family: "JetBrains Mono", monospace; font-size: 0.82rem; font-weight: 700; color: var(--blue-ink); background: var(--blue); padding: 2px 9px; } .rate__tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); } /* 6% — the maximum contribution: premium gold mark */ .rate--max { border-color: var(--gold); } .rate--max.rate--active { background: var(--gold-bg); border-color: var(--gold); } .rate--max .rate__badge { background: var(--gold); color: var(--gold-ink); } .rate__tag--max { color: var(--gold); } .rate__praise, .rate__caution { font-size: 0.84rem; line-height: 1.5; font-weight: 600; color: var(--ink); padding-left: 11px; } .rate__praise { border-left: 3px solid var(--gold); } .rate__caution { border-left: 3px solid var(--muted); } .rate__figs { display: flex; gap: 14px; } .rate__fig { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .rate__fig-label { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .rate__fig-val { /* Pin to the bottom so values stay aligned when one label wraps */ margin-top: auto; font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; white-space: nowrap; } .rate__fig--future .rate__fig-val { color: var(--blue); } /* Asterisk footnote marker */ .ref { color: var(--blue); font-weight: 800; } .fineprint { font-size: 0.78rem; line-height: 1.5; color: var(--muted); margin-top: 12px; } /* ── Panel 04: compact fund list ── */ .funds { list-style: none; display: flex; flex-direction: column; margin-top: 4px; } .fund { display: flex; flex-direction: column; gap: 5px; padding: 11px 0; border-top: 1px solid var(--line); } .fund:first-child { border-top: 0; } .fund__top { display: flex; align-items: baseline; gap: 8px; } .fund__rank { flex: none; width: 1.5em; text-align: right; font-family: "JetBrains Mono", monospace; font-size: 0.74rem; font-weight: 700; color: var(--muted); } .fund__name { flex: 1; min-width: 0; font-weight: 700; font-size: 0.93rem; } .fund__return { flex: none; font-family: "JetBrains Mono", monospace; font-size: 0.76rem; font-weight: 700; color: var(--blue-ink); background: var(--blue); padding: 1px 7px; white-space: nowrap; } .fund__bot { padding-left: calc(1.5em + 8px); /* aligned under the fund name */ } .fund__meta { font-size: 0.78rem; font-weight: 600; color: var(--muted); white-space: nowrap; } /* ── Panel 05: III pillar income tax refund ── */ .refund { margin-top: 16px; border: var(--panel-border-w) solid var(--blue); background: var(--tip-bg); padding: 16px 16px 14px; } .refund__caption { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .refund__val { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: clamp(1.7rem, 7vw, 2.2rem); letter-spacing: -0.03em; color: var(--blue); white-space: nowrap; margin-top: 3px; } .refund__hook { font-size: 0.88rem; line-height: 1.5; color: var(--ink); margin-top: 6px; } .refund__hook b { font-family: "JetBrains Mono", monospace; white-space: nowrap; } .refund__cap { font-size: 0.82rem; line-height: 1.45; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } /* ── Panel 06: what people usually do next ── */ .nextsteps__summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; list-style: none; padding: 2px 0; } .nextsteps__summary::-webkit-details-marker { display: none; } .nextsteps__summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .nextsteps__chev { flex: none; width: 9px; height: 9px; border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; } .nextsteps[open] .nextsteps__chev { transform: translateY(2px) rotate(-135deg); } .nextsteps__body { margin-top: 16px; } .steps { list-style: none; display: flex; flex-direction: column; gap: 14px; } .step { display: flex; gap: 11px; align-items: flex-start; } .step__num { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; font-weight: 700; color: var(--blue-ink); background: var(--blue); } .step__body { display: flex; flex-direction: column; gap: 3px; } .step__title { font-weight: 700; font-size: 0.95rem; } .step__note { font-size: 0.8rem; line-height: 1.4; color: var(--muted); max-width: 48ch; } /* Key points in a step — highlighted with the main text colour */ .step__note b { color: var(--ink); font-weight: 700; } /* Anchor link inside a step */ .step__link { color: var(--blue); font-weight: 700; text-underline-offset: 2px; } /* Annual amount in small text next to the monthly one */ .annual { display: block; font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 700; color: var(--muted); margin-top: 2px; } /* ── Panel 07: FAQ accordion ── */ .faq { border-top: 1px solid var(--line); } .faq:first-of-type { border-top: 0; } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 0.95rem; cursor: pointer; list-style: none; padding: 13px 0; } .faq__q::-webkit-details-marker { display: none; } .faq__q:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .faq__chev { flex: none; width: 9px; height: 9px; border-right: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; } .faq[open] .faq__chev { transform: translateY(2px) rotate(-135deg); } .faq__a { font-size: 0.85rem; line-height: 1.5; color: var(--muted); padding: 0 0 13px; max-width: 52ch; } /* ── Footer ── */ .colophon { font-size: 0.76rem; line-height: 1.6; color: var(--muted); text-align: center; padding: 18px 12px 0; border-top: 1px solid var(--line); } .colophon__copy { display: block; margin-top: 10px; font-weight: 700; letter-spacing: 0.01em; } /* ── Panel 06 — decisions summary ── */ .decisions { background: var(--tip-bg); border-left: 3px solid var(--blue); padding: 14px 16px; margin-bottom: 18px; } .decisions:empty { display: none; } .decisions__title { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); margin: 0 0 9px; } .decisions__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; line-height: 1.5; } /* ── Reveal on load — opacity only (no transform: a translateY would add transient scroll overflow and make the page jump on load) ── */ .reveal { opacity: 0; animation: rise 0.6s ease forwards; animation-delay: calc(var(--d, 0) * 0.09s); } @keyframes rise { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .reveal { animation: none; opacity: 1; } .bar__seg { transition: none; } html { scroll-behavior: auto; } } @media (min-width: 560px) { .panel, .verdict { padding-left: 30px; padding-right: 30px; } }