/* ============================================================ 401k Loan Deadline.com — house stylesheet Red Goggles portfolio · calm retirement/tax voice Source of truth for styles. Critical above-the-fold rules are mirrored inline in index.html (keep both in sync). ============================================================ */ :root { /* paper / ink */ --paper: #f6f8f7; --surface: #ffffff; --surface-2: #fbfcfb; --ink: oklch(0.26 0.012 172); --ink-soft: oklch(0.47 0.012 172); --ink-faint: oklch(0.60 0.010 172); --line: oklch(0.905 0.006 172); --line-soft: oklch(0.945 0.005 172); /* accent — pine/teal (the brand + the "do this" action) */ --accent: oklch(0.52 0.085 168); --accent-press: oklch(0.45 0.085 168); --accent-ink: oklch(0.38 0.07 168); --accent-tint: oklch(0.962 0.022 168); --accent-line: oklch(0.88 0.04 168); /* taxable — muted clay (the outcome to avoid; never alarmist) */ --clay: oklch(0.55 0.115 40); --clay-ink: oklch(0.44 0.10 40); --clay-tint: oklch(0.963 0.028 46); --clay-line: oklch(0.88 0.05 44); /* type */ --serif: "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --maxw: 1200px; --col: 720px; --radius: 14px; --radius-sm: 9px; --shadow-card: 0 1px 2px oklch(0.4 0.02 172 / 0.04), 0 6px 22px oklch(0.4 0.02 172 / 0.06); --shadow-pop: 0 12px 40px oklch(0.3 0.02 172 / 0.16); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.62; font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0; color: var(--ink); } a { color: var(--accent-ink); text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--accent-press); } .sans { font-family: var(--sans); } .tnum { font-variant-numeric: tabular-nums; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; font-family: var(--sans); font-weight: 600; font-size: 15px; } .skip-link:focus { left: 0; color: #fff; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } /* ============================================================ HEADER */ .site-header { border-bottom: 1px solid var(--line); background: oklch(0.985 0.004 172 / 0.85); backdrop-filter: saturate(1.2) blur(8px); position: sticky; top: 0; z-index: 60; } .site-header__inner { max-width: var(--maxw); margin: 0 auto; padding: 13px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); } .brand__mark { width: 30px; height: 30px; border-radius: 8px; display: block; flex: none; box-shadow: 0 1px 2px oklch(0.3 0.05 168 / 0.25); } .brand__name { font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; } .brand__tld { color: var(--accent); font-weight: 700; } .site-nav { display: flex; align-items: center; gap: 4px; font-family: var(--sans); } .site-nav a { color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; } .site-nav a:hover { color: var(--ink); background: oklch(0.95 0.006 172); } .site-nav .nav-updated { color: var(--accent-ink); background: var(--accent-tint); border: 1px solid var(--accent-line); display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; } .nav-updated .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } /* ============================================================ HERO */ .hero { padding: 46px 0 26px; } .hero__eyebrow { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; } .hero__eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--accent); border-radius: 2px; } .hero h1 { font-size: clamp(2.05rem, 5vw, 3rem); line-height: 1.14; max-width: 19ch; margin-bottom: 20px; text-wrap: balance; } .hero h1 .u { color: var(--accent); } .hero__sub { font-size: clamp(1.08rem, 2.3vw, 1.32rem); color: var(--ink-soft); max-width: 50ch; line-height: 1.5; margin: 0 0 22px; } .hero__meta { display: flex; flex-wrap: wrap; gap: 9px 10px; font-family: var(--sans); font-size: 13.5px; } .meta-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-weight: 600; } .meta-pill svg { width: 14px; height: 14px; flex: none; } /* ============================================================ AD SLOTS */ .ad-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; width: 100%; } .ad-slot ins.adsbygoogle { display: block; width: 100%; } /* Reserved-but-empty until AdSense fills (docs/ad_slots.md): the "Advertisement" label and any unfilled stay hidden, so a no-fill pageview shows clean reserved space. */ .ad-slot-label { display: none; font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; align-self: center; } .ad-slot:has(ins[data-ad-status="filled"]) .ad-slot-label { display: block; } .ad-slot ins[data-ad-status="unfilled"] { display: none; } .ad-slot--top-banner { min-height: 90px; max-width: 728px; margin-block: 8px 0; } .ad-slot--pre-result { min-height: 250px; max-width: 300px; } .ad-slot--mid-content { min-height: 90px; max-width: 728px; margin: 6px auto; } .ad-slot--pre-faq { min-height: 90px; max-width: 728px; margin: 6px auto; } .ad-slot--sidebar { min-height: 600px; max-width: 300px; } @media (max-width: 760px) { .ad-slot--top-banner { min-height: 100px; max-width: 320px; } .ad-slot--mid-content { min-height: 250px; max-width: 300px; } .ad-slot--pre-faq { min-height: 250px; max-width: 300px; } } /* ============================================================ CALCULATOR */ .tool-band { padding: 8px 0 8px; } .tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; max-width: var(--col); margin: 0 auto; } .tool__head { padding: 22px 26px 0; } .tool__kicker { font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); } .tool__title { font-size: 1.5rem; margin: 7px 0 3px; } .tool__note { font-family: var(--sans); font-size: 13.5px; color: var(--ink-faint); margin: 0; } .tool__inputs { padding: 20px 26px 24px; display: grid; gap: 22px; } .field { display: grid; gap: 9px; } .field__label { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--ink); } .field__hint { font-family: var(--sans); font-size: 13px; color: var(--ink-faint); line-height: 1.45; margin: -3px 0 0; } input[type="date"], input[type="text"], input[type="number"], select { font-family: var(--sans); font-size: 16px; color: var(--ink); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 13px; width: 100%; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); } /* segmented loan-status control */ .segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .seg { position: relative; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); padding: 13px 14px; cursor: pointer; transition: all .14s; display: grid; gap: 3px; } .seg:hover { border-color: var(--accent-line); } .seg input { position: absolute; opacity: 0; pointer-events: none; } .seg__t { font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--ink); } .seg__d { font-family: var(--sans); font-size: 12.5px; color: var(--ink-faint); line-height: 1.35; } .seg:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 3px var(--accent-tint); } .seg:has(input:checked) .seg__t { color: var(--accent-ink); } .seg:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-tint); } /* toggle row */ .toggle-row { display: flex; align-items: flex-start; gap: 13px; padding: 14px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; } .toggle-row:hover { border-color: var(--accent-line); } .toggle-row__text { flex: 1; display: grid; gap: 2px; } .toggle-row__t { font-family: var(--sans); font-weight: 700; font-size: 14.5px; } .toggle-row__d { font-family: var(--sans); font-size: 12.5px; color: var(--ink-faint); line-height: 1.4; } .switch { position: relative; width: 44px; height: 26px; flex: none; margin-top: 1px; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch__track { position: absolute; inset: 0; background: oklch(0.86 0.006 172); border-radius: 999px; transition: background .16s; } .switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .16s; } .switch input:checked + .switch__track { background: var(--accent); } .switch input:checked + .switch__track::after { transform: translateX(18px); } .switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--accent-tint); } /* optional dollarize disclosure */ .optional { border-top: 1px solid var(--line-soft); padding-top: 20px; } .optional__summary { display: flex; align-items: center; gap: 9px; cursor: pointer; list-style: none; font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--ink-soft); } .optional__summary::-webkit-details-marker { display: none; } .optional__chev { width: 16px; height: 16px; transition: transform .18s; color: var(--ink-faint); } .optional[open] .optional__chev { transform: rotate(90deg); } .optional__body { display: grid; gap: 16px; padding-top: 16px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .input-affix { position: relative; } .input-affix > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-family: var(--sans); color: var(--ink-faint); font-size: 16px; pointer-events: none; } .input-affix input { padding-left: 27px; } .input-affix--suffix > span { left: auto; right: 13px; } .input-affix--suffix input { padding-left: 13px; padding-right: 30px; } /* ============================================================ RESULTS */ .tool__result { border-top: 1px solid var(--line); background: var(--surface-2); padding: 24px 26px 26px; } .result-empty { font-family: var(--sans); color: var(--ink-faint); font-size: 14.5px; text-align: center; padding: 8px 0; display: flex; align-items: center; justify-content: center; gap: 9px; } .result-empty svg { width: 17px; height: 17px; } .verdicts { display: grid; gap: 14px; } .verdict { border-radius: var(--radius-sm); padding: 18px 20px; border: 1px solid; display: grid; gap: 5px; position: relative; } .verdict__label { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 7px; } .verdict__date { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.05rem); letter-spacing: -0.015em; line-height: 1.05; } .verdict__sub { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; } .verdict--taxable { background: var(--clay-tint); border-color: var(--clay-line); color: var(--clay-ink); } .verdict--taxable .verdict__date { color: var(--clay-ink); } .verdict--rollover { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-ink); } .verdict--rollover .verdict__date { color: var(--accent-ink); } .verdict__icon { width: 15px; height: 15px; } .verdict__ext { margin-top: 4px; font-family: var(--sans); font-size: 13px; color: var(--accent-ink); padding-top: 9px; border-top: 1px dashed var(--accent-line); display: flex; gap: 8px; align-items: baseline; } .verdict__ext b { font-weight: 700; } /* branch explainer chip */ .branch { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); font-family: var(--sans); font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .branch svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--accent); } .branch b { color: var(--ink); font-weight: 700; } /* caveat (plan acceleration) — mandatory, prominent */ .caveat { display: flex; gap: 12px; align-items: flex-start; padding: 15px 17px; border-radius: var(--radius-sm); background: var(--clay-tint); border: 1px solid var(--clay-line); font-family: var(--sans); font-size: 13.5px; color: var(--clay-ink); line-height: 1.5; } .caveat svg { width: 19px; height: 19px; flex: none; margin-top: 1px; } .caveat b { font-weight: 800; } /* dollarized exposure */ .exposure { margin-top: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; } .exposure__h { font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 12px; } .exposure__grid { display: grid; gap: 10px; } .exposure__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-family: var(--sans); font-size: 14.5px; } .exposure__row .k { color: var(--ink-soft); } .exposure__row .v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .exposure__row--total { border-top: 1.5px solid var(--line); padding-top: 11px; margin-top: 3px; } .exposure__row--total .k { color: var(--ink); font-weight: 700; } .exposure__row--total .v { color: var(--clay-ink); font-size: 1.25rem; } .result-disclaimer { margin-top: 16px; font-family: var(--sans); font-size: 12px; color: var(--ink-faint); line-height: 1.55; text-align: center; } /* ============================================================ CONTENT LAYOUT (explainer + sidebar) */ .content-band { padding: 40px 0 10px; } .content-grid { display: grid; grid-template-columns: minmax(0, var(--col)) 300px; gap: 48px; max-width: calc(var(--col) + 300px + 48px); margin: 0 auto; align-items: start; } .sidebar-rail { position: sticky; top: 84px; } .sidebar-rail .ad-slot-label { align-self: center; } .prose h2 { font-size: 1.62rem; margin: 38px 0 14px; scroll-margin-top: 80px; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 1.2rem; font-weight: 600; margin: 26px 0 8px; font-family: var(--sans); letter-spacing: -0.005em; } .prose p { margin: 0 0 16px; color: oklch(0.32 0.012 172); } .prose p.lead { font-size: 1.18rem; color: var(--ink-soft); } .prose strong { font-weight: 700; color: var(--ink); } .prose ul { margin: 0 0 18px; padding-left: 0; list-style: none; display: grid; gap: 10px; } .prose ul li { position: relative; padding-left: 26px; color: oklch(0.32 0.012 172); } .prose ul li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .prose a { font-weight: 500; } .section-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin: 20px 0; } /* QPLO vs deemed comparison */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; } .compare__col { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 19px; background: var(--surface); } .compare__col--good { border-color: var(--accent-line); background: var(--accent-tint); } .compare__col--bad { border-color: var(--clay-line); background: var(--clay-tint); } .compare__tag { font-family: var(--sans); font-weight: 800; font-size: 11.5px; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 4px; } .compare__col--good .compare__tag { color: var(--accent-ink); } .compare__col--bad .compare__tag { color: var(--clay-ink); } .compare__h { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; margin-bottom: 9px; } .compare__list { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; display: grid; gap: 8px; } .compare__list div { padding-left: 19px; position: relative; color: var(--ink-soft); } .compare__list div::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; } .compare__col--good .compare__list div::before { background: var(--accent); } .compare__col--bad .compare__list div::before { background: var(--clay); } .callout { border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 15px 18px; margin: 20px 0; font-size: 1rem; color: var(--accent-ink); } .callout p { margin: 0; color: var(--accent-ink); } .callout .callout__h { font-family: var(--sans); font-weight: 800; font-size: 12.5px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 5px; } /* ============================================================ FAQ */ .faq { max-width: var(--col); margin: 0 auto; } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { list-style: none; cursor: pointer; padding: 19px 40px 19px 2px; position: relative; font-family: var(--serif); font-weight: 600; font-size: 1.16rem; color: var(--ink); line-height: 1.35; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; position: absolute; right: 6px; top: 26px; width: 11px; height: 11px; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg); transition: transform .2s; } .faq__item[open] summary::after { transform: rotate(-135deg); top: 30px; } .faq__item summary:hover { color: var(--accent-ink); } .faq__a { padding: 0 2px 20px; } .faq__a p { margin: 0 0 12px; color: oklch(0.32 0.012 172); font-size: 1.02rem; } .faq__a p:last-child { margin-bottom: 0; } /* ============================================================ FOOTER */ .site-footer { margin-top: 56px; border-top: 1px solid var(--line); background: var(--surface); } .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; padding: 46px 0 34px; } .footer-brand__mark { width: 34px; height: 34px; border-radius: 9px; display: block; margin-bottom: 13px; } .footer-brand__name { font-family: var(--sans); font-weight: 700; font-size: 18px; color: var(--ink); margin-bottom: 8px; } .footer-brand__tag { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); max-width: 30ch; line-height: 1.5; } .footer-col h4 { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer-col a, .footer-col button.linklike { font-family: var(--sans); font-size: 14.5px; color: var(--ink-soft); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; text-align: left; } .footer-col a:hover, .footer-col button.linklike:hover { color: var(--accent-ink); } .footer-col .ext::after { content: "↗"; font-size: 11px; margin-left: 4px; color: var(--ink-faint); } .footer-divider { height: 1px; background: var(--line); } .footer-legal { padding: 24px 0; font-family: var(--sans); font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; max-width: 92ch; } .footer-legal strong { color: var(--ink-soft); font-weight: 700; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0 40px; border-top: 1px solid var(--line-soft); font-family: var(--sans); font-size: 13px; color: var(--ink-faint); } .footer-bottom button.linklike { font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--accent-ink); background: none; border: none; cursor: pointer; padding: 0; } /* ============================================================ MOBILE STICKY AD */ .mobile-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; align-items: center; justify-content: center; background: oklch(0.99 0.003 172 / 0.97); backdrop-filter: blur(6px); border-top: 1px solid var(--line); padding: 7px 40px 7px 12px; min-height: 64px; } .mobile-sticky ins.adsbygoogle { display: block; width: 320px; height: 50px; } .mobile-sticky__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; } .mobile-sticky__label { position: absolute; left: 12px; top: 4px; font-family: var(--sans); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } /* ============================================================ PRIVACY MODAL */ .modal-scrim { position: fixed; inset: 0; z-index: 120; background: oklch(0.2 0.02 172 / 0.46); display: none; align-items: flex-start; justify-content: center; padding: 5vh 18px; opacity: 0; transition: opacity .18s; } .modal-scrim.open { display: flex; opacity: 1; } .modal { background: var(--surface); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-pop); transform: translateY(8px); transition: transform .2s; } .modal-scrim.open .modal { transform: translateY(0); } .modal__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 24px; border-bottom: 1px solid var(--line); } .modal__title { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; } .modal__title span { color: var(--accent); } .modal__close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-soft); cursor: pointer; font-size: 19px; line-height: 1; flex: none; } .modal__close:hover { background: oklch(0.95 0.006 172); } .modal__body { padding: 22px 24px; overflow-y: auto; font-size: 15.5px; } .modal__body h3 { font-family: var(--sans); font-size: 15px; font-weight: 800; margin: 22px 0 7px; color: var(--ink); } .modal__body h3:first-child { margin-top: 0; } .modal__body p, .modal__body li { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; } .modal__body p { margin: 0 0 12px; } .modal__body .short { background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 18px; color: var(--accent-ink); } .modal__body ul { margin: 0 0 14px; padding-left: 20px; } .modal__body li { margin-bottom: 6px; } .modal__foot { padding: 16px 24px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; } .btn { font-family: var(--sans); font-weight: 700; font-size: 15px; padding: 11px 22px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; transition: background .14s; } .btn:hover { background: var(--accent-press); } .btn--ghost { background: transparent; color: var(--accent-ink); } .btn--ghost:hover { background: var(--accent-tint); } /* ============================================================ RESPONSIVE */ @media (max-width: 1080px) { .content-grid { grid-template-columns: minmax(0, 1fr); max-width: var(--col); } .sidebar-rail { display: none; } } @media (max-width: 760px) { body { font-size: 17px; } .hero { padding: 32px 0 20px; } .site-nav .nav-link { display: none; } .footer-top { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; } .compare { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .segmented { grid-template-columns: 1fr; } .mobile-sticky.show { display: flex; } body.has-sticky { padding-bottom: 72px; } } @media (max-width: 380px) { .brand__name { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ============================================================ COOKIECONSENT v3 THEME Themes the vendored CookieConsent v3 banner + preferences modal to the site palette (docs/consent.md — theme the library, never replace it). */ #cc-main { --cc-font-family: var(--sans); --cc-bg: var(--surface); --cc-primary-color: var(--ink); --cc-secondary-color: var(--ink-soft); --cc-link-color: var(--accent-ink); --cc-btn-primary-bg: var(--accent); --cc-btn-primary-color: #fff; --cc-btn-primary-border-color: var(--accent); --cc-btn-primary-hover-bg: var(--accent-press); --cc-btn-primary-hover-color: #fff; --cc-btn-primary-hover-border-color: var(--accent-press); --cc-btn-secondary-bg: var(--accent-tint); --cc-btn-secondary-color: var(--accent-ink); --cc-btn-secondary-border-color: var(--accent-line); --cc-btn-secondary-hover-bg: var(--accent-line); --cc-btn-secondary-hover-color: var(--accent-ink); --cc-btn-secondary-hover-border-color: var(--accent-line); --cc-toggle-on-bg: var(--accent); --cc-toggle-off-bg: var(--ink-faint); --cc-toggle-readonly-bg: var(--line); --cc-toggle-on-knob-bg: #fff; --cc-toggle-off-knob-bg: #fff; --cc-cookie-category-block-bg: var(--surface-2); --cc-cookie-category-block-border: var(--line); --cc-cookie-category-block-hover-bg: var(--accent-tint); --cc-cookie-category-block-hover-border: var(--accent-line); --cc-separator-border-color: var(--line); --cc-modal-border-radius: var(--radius); --cc-btn-border-radius: var(--radius-sm); --cc-pm-toggle-border-radius: 999px; --cc-z-index: 130; }