/* Fonts are loaded by the Systeme page header, not by this element. The header must carry Newsreader and Instrument Sans — see the note at the top of this file. Nothing here requests a font. */ /* ──────────────────────────────────────────────────────────────────────── Every rule is scoped under .rbc. No bare element selectors anywhere, so this cannot leak into the Systeme page, and Systeme's own styles cannot reach in past the reset below. Units: px and em, not rem. rem is relative to the host page's font-size, which Systeme controls and can change. .rbc pins its own 16px base and everything scales from that instead. ──────────────────────────────────────────────────────────────────────── */ .rbc { /* Brand. These are the same values the report uses, so the calculator, the thank you page and the report are one system. */ --rbc-navy: #16344E; /* dark surfaces, headings */ --rbc-aqua: #4FA8B2; /* accents, progress, links */ --rbc-sand: #F2ECE1; /* warm neutral, section separation */ --rbc-ink: #26333E; /* body text */ --rbc-paper: #FCFAF7; /* the report's page colour */ /* Muted is #5C6B77. It is set per surface below rather than here, for the reason given against --rbc-muted. */ /* Navy surface. The default, because a white button with navy text only reads on a dark ground. Switch with CONFIG.theme. */ --rbc-surface: #16344E; --rbc-text: #D5E3EB; --rbc-text-strong: #FFFFFF; /* The brand muted is #5C6B77, which is correct on a light ground and all but invisible on navy. The navy surface uses the report's lighter equivalent instead: same role, legible contrast. The paper theme below restores #5C6B77 exactly. */ --rbc-muted: #9DBACB; --rbc-rule: rgba(255, 255, 255, 0.16); --rbc-field-bg: rgba(255, 255, 255, 0.05); --rbc-field-border: rgba(255, 255, 255, 0.22); --rbc-field-text: #FFFFFF; /* Square, understated, white on navy — matching the homepage. */ --rbc-btn-bg: #FFFFFF; --rbc-btn-text: #16344E; --rbc-btn-bg-hover: #F2ECE1; --rbc-btn-border: transparent; --rbc-error: #E8A79E; --rbc-track: rgba(255, 255, 255, 0.14); /* Sharp. 2px, never rounded. */ --rbc-radius: 2px; --rbc-pad: clamp(26px, 5.5vw, 52px); --rbc-field-h: 58px; box-sizing: border-box; display: block; width: 100%; min-height: 100%; margin: 0; padding: 0; font-size: 16px; font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; line-height: 1.6; color: var(--rbc-text); background: var(--rbc-surface); text-align: left; -webkit-font-smoothing: antialiased; } /* Paper surface. The button keeps its white ground and navy text, but gains a hairline so it does not disappear against a light page. */ .rbc[data-theme="paper"] { --rbc-surface: #FCFAF7; --rbc-text: #26333E; --rbc-text-strong: #16344E; --rbc-muted: #5C6B77; --rbc-rule: #EBE5D9; --rbc-field-bg: #FFFFFF; --rbc-field-border: #EBE5D9; --rbc-field-text: #26333E; --rbc-btn-bg: #FFFFFF; --rbc-btn-text: #16344E; --rbc-btn-bg-hover: #F2ECE1; --rbc-btn-border: #E0D8C7; --rbc-error: #A8412F; --rbc-track: #EBE5D9; } /* Reset, scoped. Neutralises anything the host page sets on our children. */ .rbc *, .rbc *::before, .rbc *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; font: inherit; color: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; text-align: left; background: transparent; list-style: none; max-width: none; float: none; } .rbc__inner { display: flex; flex-direction: column; width: 100%; min-height: 100%; max-width: 560px; margin: 0 auto; padding: var(--rbc-pad); } /* Progress — aqua, thin, understated ──────────────────────────────────── */ .rbc__progress { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(32px, 6vw, 52px); } .rbc__progress-track { flex: 1 1 auto; height: 2px; background: var(--rbc-track); overflow: hidden; } .rbc__progress-fill { display: block; height: 100%; width: 0%; background: var(--rbc-aqua); transition: width 300ms cubic-bezier(.4,0,.2,1); } .rbc__progress-label { flex: 0 0 auto; font-size: 0.68em; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rbc-muted); white-space: nowrap; } .rbc__progress--done .rbc__progress-label { color: var(--rbc-aqua); } /* Stage ───────────────────────────────────────────────────────────────── */ .rbc__stage { flex: 1 1 auto; display: flex; flex-direction: column; } /* Opacity only. Nothing slides, nothing decorative. */ .rbc__screen { display: flex; flex-direction: column; flex: 1 1 auto; animation: rbc-in 220ms ease both; } @keyframes rbc-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .rbc__screen { animation: none; } .rbc__progress-fill { transition: none; } } /* Type ────────────────────────────────────────────────────────────────── */ .rbc__eyebrow { font-size: 0.7em; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rbc-aqua); margin-bottom: 18px; } .rbc__intro { font-size: 0.94em; color: var(--rbc-muted); margin-bottom: 32px; max-width: 46em; } .rbc__question { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(1.5em, 4.8vw, 1.95em); line-height: 1.28; color: var(--rbc-text-strong); margin-bottom: 12px; letter-spacing: -0.012em; } .rbc__helper { font-size: 0.85em; color: var(--rbc-muted); margin-bottom: 28px; max-width: 46em; } .rbc__question + .rbc__field { margin-top: 24px; } /* Fields ──────────────────────────────────────────────────────────────── */ .rbc__field { position: relative; display: block; margin-bottom: 8px; } .rbc__field + .rbc__field { margin-top: 20px; } .rbc__label { display: block; font-size: 0.7em; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rbc-muted); margin-bottom: 9px; } .rbc__input, .rbc__select { display: block; width: 100%; height: var(--rbc-field-h); padding: 0 16px; font-family: inherit; font-size: 1.05em; font-weight: 400; color: var(--rbc-field-text); background: var(--rbc-field-bg); /* Longhands rather than the border shorthand, so the themed colour is its own declaration alongside the transition that animates it. */ border-width: 1px; border-style: solid; border-color: var(--rbc-field-border); border-radius: var(--rbc-radius); -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color 140ms ease; } .rbc__input::-webkit-outer-spin-button, .rbc__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rbc__input[type="number"] { -moz-appearance: textfield; } .rbc__input::placeholder { color: var(--rbc-muted); opacity: 0.65; } /* The border turns aqua. A second inset line thickens it without a glow. */ .rbc__input:focus, .rbc__select:focus { outline: none; border-color: var(--rbc-aqua); box-shadow: inset 0 0 0 1px var(--rbc-aqua); } .rbc__select { padding-right: 46px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%234FA8B2' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; } .rbc__select option { color: #26333E; background: #FFFFFF; } .rbc__field--affix .rbc__input { padding-left: 42px; } .rbc__field--affix-right .rbc__input { padding-right: 42px; padding-left: 16px; } .rbc__affix { position: absolute; top: 0; height: var(--rbc-field-h); display: flex; align-items: center; font-size: 1.05em; color: var(--rbc-muted); pointer-events: none; } .rbc__affix--left { left: 16px; } .rbc__affix--right { right: 16px; } .rbc__field--affix.rbc__field--has-label .rbc__affix, .rbc__field--affix-right.rbc__field--has-label .rbc__affix { top: 30px; } .rbc__error { display: none; font-size: 0.82em; color: var(--rbc-error); margin-top: 10px; } .rbc__field--invalid .rbc__error { display: block; } .rbc__field--invalid .rbc__input, .rbc__field--invalid .rbc__select { border-color: var(--rbc-error); } /* Actions ─────────────────────────────────────────────────────────────── */ .rbc__actions { margin-top: auto; padding-top: 40px; } /* Square and understated, as on the homepage. White ground, navy text, 2px corners, sand on hover. No shadow, no lift, no transform. */ .rbc__btn { display: block; width: 100%; height: var(--rbc-field-h); padding: 0 32px; cursor: pointer; font-family: inherit; font-size: 1em; font-weight: 500; letter-spacing: 0.005em; color: var(--rbc-btn-text); background: var(--rbc-btn-bg); border-width: 1px; border-style: solid; border-color: var(--rbc-btn-border); border-radius: var(--rbc-radius); transition: background-color 140ms ease; } .rbc__btn:hover { background: var(--rbc-btn-bg-hover); } .rbc__btn:focus-visible { outline: 2px solid var(--rbc-aqua); outline-offset: 3px; } .rbc__note { font-size: 0.78em; color: var(--rbc-muted); margin-top: 18px; max-width: 46em; } .rbc__back { display: inline-block; margin-top: 22px; cursor: pointer; font-size: 0.84em; color: var(--rbc-muted); background: none; text-decoration: none; transition: color 140ms ease; } .rbc__back:hover { color: var(--rbc-text); text-decoration: underline; text-underline-offset: 3px; } .rbc__back:focus-visible { outline: 2px solid var(--rbc-aqua); outline-offset: 3px; } /* Result ──────────────────────────────────────────────────────────────── */ .rbc__result-lead { font-size: 0.94em; color: var(--rbc-text); margin-bottom: 4px; } .rbc__total { font-family: 'Newsreader', Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(2.6em, 10.5vw, 3.6em); line-height: 1.04; color: var(--rbc-text-strong); letter-spacing: -0.028em; font-variant-numeric: tabular-nums lining-nums; margin: 6px 0 12px; } .rbc__echo { font-size: 0.88em; color: var(--rbc-muted); } .rbc__rule { height: 1px; background: var(--rbc-rule); margin: 32px 0; } .rbc__lines { display: block; } .rbc__line { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 13px 0; } .rbc__line-label { font-size: 0.95em; color: var(--rbc-text); } .rbc__line-value { font-family: 'Newsreader', Georgia, serif; font-size: 1.2em; font-weight: 400; color: var(--rbc-text-strong); white-space: nowrap; font-variant-numeric: tabular-nums; } .rbc__line--emphasis .rbc__line-value { font-size: 1.6em; } .rbc__callout { border-left: 1px solid var(--rbc-aqua); padding: 2px 0 2px 18px; font-size: 0.88em; color: var(--rbc-muted); margin-top: 32px; } .rbc__footnote { font-size: 0.8em; color: var(--rbc-muted); margin-top: 24px; } /* Embedded variant. On the Systeme thank you page the result screen sits between ordinary page elements rather than filling a popup, so it must not demand full height. Add rbc--inline to the root there. */ .rbc--inline, .rbc--inline .rbc__inner { min-height: 0; } .rbc--inline .rbc__screen { animation: none; } /* Small screens ───────────────────────────────────────────────────────── */ @media (max-width: 480px) { .rbc { --rbc-field-h: 54px; } /* still generous for a thumb */ .rbc__actions { padding-top: 30px; } .rbc__progress { margin-bottom: 30px; } }