/* ============================================================= ROASLab — styles.css 1. Tokens 2. Reset & base 3. Utilities 4. Typography 5. Components (header, tool card, KPIs, ads, FAQ) 6. Sections 7. Effects 8. Responsive 9. Reduced motion / print ============================================================= */ /* ============================================================= 1. Tokens ============================================================= */ :root { /* Neutral scale — light */ --bg: #f4f6fb; --bg-alt: #eaeef7; --surface: #ffffff; --surface-2: #f8fafc; --line: #e2e8f0; --line-2: #cbd5e1; --ink: #0f172a; --ink-2: #334155; --ink-3: #64748b; --ink-4: #94a3b8; /* Brand + semantic */ --brand: #4f46e5; --brand-2: #6366f1; --brand-ink: #ffffff; --pos: #059669; --pos-bg: #ecfdf5; --pos-line: #a7f3d0; --neg: #dc2626; --neg-bg: #fef2f2; --neg-line: #fecaca; --warn: #b45309; --warn-bg: #fffbeb; --warn-line: #fde68a; /* Type */ --display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Space & shape */ --gutter: clamp(1rem, 4vw, 2rem); --maxw: 1180px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04); --shadow-md: 0 4px 16px rgba(15, 23, 42, .07), 0 1px 3px rgba(15, 23, 42, .05); --shadow-lg: 0 18px 48px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .06); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #070b16; --bg-alt: #0b1120; --surface: #0f172a; --surface-2: #131c31; --line: #1e293b; --line-2: #334155; --ink: #f1f5f9; --ink-2: #cbd5e1; --ink-3: #94a3b8; --ink-4: #64748b; --brand: #818cf8; --brand-2: #a5b4fc; --brand-ink: #0b1120; --pos: #34d399; --pos-bg: #052e23; --pos-line: #10603f; --neg: #f87171; --neg-bg: #3b0d0d; --neg-line: #7f1d1d; --warn: #fbbf24; --warn-bg: #351f04; --warn-line: #78500a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 16px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6); } } /* Explicit dark choice (host viewers stamp data-theme on ) beats the OS. */ :root[data-theme="dark"] { --bg: #070b16; --bg-alt: #0b1120; --surface: #0f172a; --surface-2: #131c31; --line: #1e293b; --line-2: #334155; --ink: #f1f5f9; --ink-2: #cbd5e1; --ink-3: #94a3b8; --ink-4: #64748b; --brand: #818cf8; --brand-2: #a5b4fc; --brand-ink: #0b1120; --pos: #34d399; --pos-bg: #052e23; --pos-line: #10603f; --neg: #f87171; --neg-bg: #3b0d0d; --neg-line: #7f1d1d; --warn: #fbbf24; --warn-bg: #351f04; --warn-line: #78500a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 4px 16px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6); } /* ============================================================= 2. Reset & base ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; } body { font-family: var(--sans); font-size: 16px; line-height: 1.65; color: var(--ink-2); background: var(--bg); background-image: radial-gradient(60rem 32rem at 78% -8%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%), radial-gradient(48rem 28rem at 4% 2%, color-mix(in srgb, var(--pos) 9%, transparent), transparent 70%); background-repeat: no-repeat; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } a { color: inherit; text-decoration: none; } p { text-wrap: pretty; } h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); font-family: var(--display); font-weight: 700; } ::selection { background: var(--brand); color: var(--brand-ink); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } /* ============================================================= 3. Utilities ============================================================= */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 820px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100px; left: 1rem; z-index: 9999; padding: .6rem 1rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 600; } .skip-link:focus { top: 1rem; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ============================================================= 4. Typography ============================================================= */ h1 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 2.9rem); } h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); } h3 { font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem); } .lede { font-size: clamp(1rem, .96rem + .3vw, 1.13rem); color: var(--ink-3); max-width: 62ch; } /* ============================================================= 5. Components ============================================================= */ /* --- Header ------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } .topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; } .brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--display); font-weight: 700; color: var(--ink); letter-spacing: -.02em; font-size: 1.05rem; } .brand__mark { width: 28px; height: 28px; flex: none; border-radius: 8px; } .topbar__nav { display: flex; align-items: center; gap: .35rem; } .lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); } .lang a { padding: .28rem .68rem; font-size: .78rem; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; } .lang a[aria-current="true"] { background: var(--brand); color: var(--brand-ink); } /* --- Hero --------------------------------------------------- */ .hero { padding: clamp(1.3rem, .9rem + 1.6vw, 2rem) 0 .5rem; } .eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); padding: .28rem .68rem; border-radius: 999px; margin-bottom: .7rem; } .hero h1 { margin-bottom: .55rem; } .hero .lede { margin-bottom: 1rem; } /* --- Tool card ---------------------------------------------- */ .tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .tool__grid { display: grid; grid-template-columns: 1fr; } .panel { padding: clamp(1.1rem, .8rem + 1.2vw, 1.6rem); } .panel--in { border-bottom: 1px solid var(--line); background: var(--surface); } .panel--out { background: var(--surface-2); } .panel__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; } .panel__title { font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); } /* Currency selector */ .cur { display: inline-flex; gap: .2rem; background: var(--bg-alt); border-radius: 999px; padding: .2rem; } .cur button { padding: .26rem .62rem; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--ink-3); transition: background .18s var(--ease-out), color .18s var(--ease-out); } .cur button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } /* Fields */ .fields { display: grid; gap: .85rem; } .field label { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; } .field .hint { display: block; font-size: .78rem; font-weight: 400; color: var(--ink-4); margin-top: .12rem; } .input { position: relative; display: flex; align-items: center; border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); } .input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); } .input__sym { padding-inline: .8rem; font-weight: 700; color: var(--ink-3); font-size: 1rem; border-right: 1px solid var(--line); align-self: stretch; display: grid; place-items: center; } .input input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: .72rem .85rem; font: 600 1.12rem/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; } .input input::-webkit-outer-spin-button, .input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .input input[type=number] { -moz-appearance: textfield; appearance: textfield; } .input.is-bad { border-color: var(--neg); } .tool__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .95rem; border-radius: var(--r-sm); font-size: .87rem; font-weight: 600; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--surface); transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out); } .btn:hover { border-color: var(--brand); color: var(--brand); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); } .btn--primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: var(--brand-ink); } .btn svg { width: 15px; height: 15px; flex: none; } /* Verdict banner */ .verdict { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .95rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-alt); margin-bottom: 1rem; } .verdict__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-4); margin-top: .48rem; flex: none; } .verdict__t { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1rem; line-height: 1.25; } .verdict__s { font-size: .85rem; color: var(--ink-3); margin-top: .12rem; } .tool[data-state="profit"] .verdict { background: var(--pos-bg); border-color: var(--pos-line); } .tool[data-state="profit"] .verdict__dot { background: var(--pos); } .tool[data-state="profit"] .verdict__t { color: var(--pos); } .tool[data-state="loss"] .verdict { background: var(--neg-bg); border-color: var(--neg-line); } .tool[data-state="loss"] .verdict__dot { background: var(--neg); } .tool[data-state="loss"] .verdict__t { color: var(--neg); } .tool[data-state="break"] .verdict { background: var(--warn-bg); border-color: var(--warn-line); } .tool[data-state="break"] .verdict__dot { background: var(--warn); } .tool[data-state="break"] .verdict__t { color: var(--warn); } /* KPI grid */ .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .85rem .9rem; box-shadow: var(--shadow-sm); } .kpi__k { display: flex; align-items: center; gap: .3rem; font-size: .73rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } .kpi__v { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.1rem); line-height: 1.1; margin-top: .3rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; word-break: break-word; } .kpi__n { font-size: .77rem; color: var(--ink-4); margin-top: .15rem; } .kpi--hero { grid-column: span 2; } @media (min-width: 540px) { .kpi--hero { grid-column: auto; } } /* Colour-coded headline KPIs */ .tool[data-state="profit"] .kpi--live .kpi__v { color: var(--pos); } .tool[data-state="profit"] .kpi--live { border-color: var(--pos-line); background: var(--pos-bg); } .tool[data-state="loss"] .kpi--live .kpi__v { color: var(--neg); } .tool[data-state="loss"] .kpi--live { border-color: var(--neg-line); background: var(--neg-bg); } .tool[data-state="break"] .kpi--live .kpi__v { color: var(--warn); } .tool[data-state="break"] .kpi--live { border-color: var(--warn-line); background: var(--warn-bg); } /* Break-even gauge */ .gauge { margin-top: 1rem; } .gauge__top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; } .gauge__lbl { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); } .gauge__val { font-size: .82rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .gauge__track { position: relative; height: 12px; border-radius: 999px; background: var(--bg-alt); border: 1px solid var(--line); overflow: hidden; } .gauge__fill { height: 100%; width: 0%; border-radius: 999px; background: var(--ink-4); transition: width .4s var(--ease-out), background .25s var(--ease-out); } .tool[data-state="profit"] .gauge__fill { background: linear-gradient(90deg, var(--pos), color-mix(in srgb, var(--pos) 60%, var(--brand))); } .tool[data-state="loss"] .gauge__fill { background: var(--neg); } .tool[data-state="break"] .gauge__fill { background: var(--warn); } .gauge__mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .5; left: 50%; } .gauge__scale { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ink-4); margin-top: .3rem; } /* Secondary metric strip */ .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem; margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--line); } .strip__i { background: var(--surface); padding: .6rem .75rem; } .strip__k { font-size: .71rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); } .strip__v { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: .1rem; } /* Privacy badge */ .privacy { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; font-size: .82rem; color: var(--ink-3); } .privacy svg { width: 15px; height: 15px; color: var(--pos); flex: none; } .nojs { display: none; margin-top: 1rem; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); font-size: .86rem; } html.no-js .nojs { display: block; } /* --- Ad slots ----------------------------------------------- */ .ad-slot { display: grid; place-items: center; text-align: center; border: 2px dashed var(--ink-4); background: var(--bg-alt); border-radius: var(--r-md); color: var(--ink-4); font-size: .72rem; font-weight: 700; letter-spacing: .2em; padding: 1rem; } .ad-slot--leaderboard { min-height: 110px; margin: 1.5rem 0; } .ad-slot--incontent { min-height: 260px; margin: 2rem 0; } .ad-slot--dialog { min-height: 250px; width: 100%; margin-top: 1rem; } @media (min-width: 720px) { .ad-slot--leaderboard { min-height: 100px; } .ad-slot--incontent { min-height: 250px; } } /* Interstitial dialog */ dialog.promo { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0; background: var(--surface); color: var(--ink-2); width: min(92vw, 460px); box-shadow: var(--shadow-lg); } dialog.promo::backdrop { background: rgba(2, 6, 23, .62); backdrop-filter: blur(3px); } .promo__in { padding: 1.15rem; } .promo__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .promo__t { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--ink); } .promo__s { font-size: .83rem; color: var(--ink-3); margin-top: .2rem; } .promo__x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3); transition: background .16s var(--ease-out), color .16s var(--ease-out); } .promo__x:hover { background: var(--bg-alt); color: var(--ink); } .promo__x svg { width: 16px; height: 16px; } .promo__foot { margin-top: 1rem; display: flex; justify-content: flex-end; } /* Native-ad toast */ .toast { position: fixed; left: 1rem; bottom: 1rem; z-index: 80; width: min(88vw, 300px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: .8rem .85rem; display: none; animation: toast-in .38s var(--ease-out) both; } .toast[data-open="true"] { display: block; } .toast__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; } .toast__tag { font-size: .64rem; font-weight: 700; letter-spacing: .18em; color: var(--ink-4); } .toast__x { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-4); } .toast__x:hover { background: var(--bg-alt); color: var(--ink); } .toast__x svg { width: 13px; height: 13px; } .toast__body { border: 2px dashed var(--ink-4); border-radius: var(--r-sm); background: var(--bg-alt); min-height: 92px; display: grid; place-items: center; text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .18em; color: var(--ink-4); padding: .6rem; } @keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* ============================================================= 6. Sections ============================================================= */ main { padding-bottom: 2rem; } .section { padding: clamp(1.6rem, 1rem + 2vw, 2.6rem) 0; } .section > * + * { margin-top: 1rem; } .prose h2 { margin-top: 2.2rem; } .prose h3 { margin-top: 1.6rem; } .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose p { margin-top: .8rem; color: var(--ink-2); } .prose ul, .prose ol { margin-top: .8rem; padding-left: 1.15rem; display: grid; gap: .5rem; } .prose li { color: var(--ink-2); } .prose li::marker { color: var(--brand); } .prose strong { color: var(--ink); font-weight: 700; } .prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } /* Steps */ .steps { display: grid; gap: .8rem; margin-top: 1.2rem; } .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; box-shadow: var(--shadow-sm); } .step__n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-family: var(--display); font-weight: 700; font-size: .95rem; margin-bottom: .55rem; } .step h3 { font-size: 1rem; margin: 0 0 .25rem; } .step p { font-size: .88rem; color: var(--ink-3); margin: 0; } /* Formula blocks */ .formula { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-sm); padding: .75rem .9rem; margin-top: .7rem; font-family: var(--display); font-weight: 600; color: var(--ink); font-size: .95rem; overflow-x: auto; white-space: nowrap; } .formula span { color: var(--brand); } /* Comparison table */ .table-wrap { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); } table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: .88rem; } th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); } thead th { font-family: var(--display); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); } tbody tr:last-child td { border-bottom: 0; } td:first-child { color: var(--ink); font-weight: 600; } /* FAQ */ .faq { display: grid; gap: .6rem; margin-top: 1.2rem; } details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } details[open] { box-shadow: var(--shadow-sm); } summary { cursor: pointer; list-style: none; padding: .85rem 2.4rem .85rem 1rem; position: relative; font-family: var(--display); font-weight: 600; color: var(--ink); font-size: .96rem; } summary::-webkit-details-marker { display: none; } summary::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--ink-4); border-bottom: 2px solid var(--ink-4); transform: rotate(45deg); transition: transform .22s var(--ease-out); } details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } details .faq__a { padding: 0 1rem 1rem; font-size: .92rem; color: var(--ink-2); } details .faq__a p + p { margin-top: .6rem; } /* Related tools / benchmark cards */ .cards { display: grid; gap: .8rem; margin-top: 1.2rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; box-shadow: var(--shadow-sm); } .card h3 { font-size: .98rem; margin-bottom: .3rem; } .card p { font-size: .87rem; color: var(--ink-3); } .card__v { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--brand); letter-spacing: -.02em; } /* Footer */ .footer { border-top: 1px solid var(--line); background: var(--surface); padding: 2rem 0 1.6rem; margin-top: 1.5rem; } .footer__grid { display: grid; gap: 1.4rem; } .footer__about p { font-size: .86rem; color: var(--ink-3); margin-top: .6rem; max-width: 42ch; } .footer__col h4 { font-family: var(--display); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .6rem; } .footer__col ul { list-style: none; padding: 0; display: grid; gap: .42rem; } .footer__col a { font-size: .88rem; color: var(--ink-2); } .footer__col a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .footer__legal { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--ink-4); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; } .footer__legal p { max-width: 70ch; } /* Legal pages */ .legal-hero { padding: clamp(1.6rem, 1rem + 2vw, 2.6rem) 0 .5rem; } .legal-hero .updated { font-size: .82rem; color: var(--ink-4); margin-top: .4rem; } .todo { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); border-radius: var(--r-sm); padding: .7rem .9rem; font-size: .84rem; margin-top: 1rem; } /* ============================================================= 7. Effects ============================================================= */ .reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .reveal.is-in { opacity: 1; transform: none; } html.no-js .reveal { opacity: 1; transform: none; } .flash { animation: flash .45s var(--ease-out); } @keyframes flash { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } } /* ============================================================= 8. Responsive ============================================================= */ @media (min-width: 540px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* a four-row footer is needlessly tall on a tablet */ .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .tool__grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); } .panel--in { border-bottom: 0; border-right: 1px solid var(--line); } .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; } .fields { gap: 1rem; } } @media (min-width: 1280px) { .kpi__v { font-size: 2.1rem; } } /* ============================================================= 9. Reduced motion / print ============================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .flash { animation: none; } .toast { animation: none; } .gauge__fill { transition: none; } } @media print { .topbar, .ad-slot, .toast, dialog.promo, .tool__actions, .footer { display: none !important; } body { background: #fff; } .tool { box-shadow: none; } } /* ============================================================= 10. Mobile sticky result bar The results panel sits below the fold on a 375×812 phone, so the three headline numbers follow the visitor while they type. ============================================================= */ .minibar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(15, 23, 42, .12); padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px)); } .minibar__in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; align-items: center; max-width: var(--maxw); margin-inline: auto; } .minibar__i { text-align: center; min-width: 0; } .minibar__k { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); } .minibar__v { display: block; font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-tool-state="profit"] .minibar__v--live { color: var(--pos); } :root[data-tool-state="loss"] .minibar__v--live { color: var(--neg); } :root[data-tool-state="break"] .minibar__v--live { color: var(--warn); } @media (max-width: 959px) { .minibar.is-on { display: block; } body.has-minibar .toast { bottom: 5.4rem; } } @media print { .minibar { display: none !important; } } /* ============================================================= 11. Anchor precision + theme switch ============================================================= */ /* The header is sticky, so every anchor target needs to clear it or the heading you jumped to hides underneath. */ [id] { scroll-margin-top: calc(60px + 1.25rem); } .section [id], .prose [id], details[id] { scroll-margin-top: calc(60px + 1.5rem); } /* A briefly highlighted target makes "did it jump?" unambiguous. */ :target > summary, h2:target, h3:target { animation: target-pulse 1.6s var(--ease-out) 1; } @keyframes target-pulse { 0%, 12% { background: color-mix(in srgb, var(--brand) 20%, transparent); } 100% { background: transparent; } } /* --- Theme switch ------------------------------------------- */ .theme-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-3); transition: color .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out); } .theme-btn:hover { color: var(--brand); border-color: var(--brand); } .theme-btn svg { width: 16px; height: 16px; } .theme-btn .icon-moon { display: none; } /* Show the moon when the page is currently light (clicking goes dark). */ :root:not([data-theme="dark"]) .theme-btn .icon-sun { display: none; } :root:not([data-theme="dark"]) .theme-btn .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-btn .icon-sun { display: block; } :root:not([data-theme]) .theme-btn .icon-moon { display: none; } } :root[data-theme="dark"] .theme-btn .icon-sun { display: block; } :root[data-theme="dark"] .theme-btn .icon-moon { display: none; } @media (prefers-reduced-motion: reduce) { :target > summary, h2:target, h3:target { animation: none; } } /* --- Legal documents rendered inline (single-file build) ----- */ .legal-doc[open] > summary { border-bottom: 1px solid var(--line); } /* ============================================================= 12. Multi-page structure: breadcrumbs, guide cards, page nav ============================================================= */ .breadcrumb { font-size: .82rem; color: var(--ink-4); margin-bottom: .6rem; } .breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; } .breadcrumb li { display: flex; align-items: center; gap: .3rem; } .breadcrumb li + li::before { content: "/"; color: var(--line-2); } .breadcrumb a { color: var(--ink-3); } .breadcrumb a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; } .breadcrumb [aria-current="page"] { color: var(--ink-2); } /* Guide cards on the home page — each opens its own page */ .guide-grid { display: grid; gap: .8rem; margin-top: 1.2rem; } @media (min-width: 540px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .guide-card { display: flex; flex-direction: column; gap: .35rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease-out), border-color .18s var(--ease-out), box-shadow .18s var(--ease-out); } .guide-card:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-md); } .guide-card h3 { font-size: 1rem; margin: 0; } .guide-card p { font-size: .87rem; color: var(--ink-3); margin: 0; flex: 1; } .guide-card .more { font-size: .82rem; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem; } .guide-card:hover .more { text-decoration: underline; text-underline-offset: 3px; } /* Previous / next between guide pages */ .pagenav { display: grid; gap: .7rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } @media (min-width: 720px) { .pagenav { grid-template-columns: 1fr 1fr; } } .pagenav a { border: 1px solid var(--line); border-radius: var(--r-md); padding: .8rem .95rem; background: var(--surface); transition: border-color .18s var(--ease-out); } .pagenav a:hover { border-color: var(--brand); } .pagenav .dir { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); } .pagenav .ttl { display: block; font-family: var(--display); font-weight: 600; color: var(--ink); margin-top: .15rem; font-size: .95rem; } .pagenav .next { text-align: right; } /* A compact "try the calculator" call to action for inner pages */ .tool-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem; margin: 1.6rem 0; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-md); padding: 1rem 1.1rem; } .tool-cta__t { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1rem; } .tool-cta__s { font-size: .86rem; color: var(--ink-3); margin-top: .1rem; } /* The form starts empty, so the hint has to read clearly as a hint — never as a value the visitor might mistake for their own number. */ .input input::placeholder { color: var(--ink-4); opacity: .7; font-weight: 400; }