/* SA302 Estimate — design system. Lightweight, no framework. */ /* Self-hosted Inter (variable). No third-party requests — keeps visitor data private. */ @font-face{ font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); } @font-face{ font-family:"Inter"; font-style:italic; font-weight:100 900; font-display:swap; src:url("/assets/fonts/inter-latin-wght-italic.woff2") format("woff2"); } :root{ --brand:#1e3a8a; --brand-600:#1d4ed8; --brand-700:#1e40af; --accent:#0d9488; --accent-weak:#ccfbf1; --ink:#0f172a; --body:#334155; --muted:#64748b; --bg:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9; --border:#e2e8f0; --border-strong:#cbd5e1; --danger:#b91c1c; --ok:#047857; --warn:#b45309; --warn-bg:#fffbeb; --warn-border:#fde68a; --radius:12px; --radius-sm:8px; --shadow-sm:0 1px 2px rgba(15,23,42,.06); --shadow:0 4px 16px rgba(15,23,42,.08); --maxw:1080px; --readw:720px; --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif; --hero-top:#eef2ff; --pill-bg:#e0e7ff; --callout-bg:#eff6ff; --callout-tip-bg:#f0fdf4; --disclaimer-ink:#713f12; --disclaimer-ink-strong:#78350f; --footer-bg:#0f172a; --footer-ink:#cbd5e1; --footer-line:#1e293b; --footer-panel:#1e293b; color-scheme:light; } /* Dark theme. Only the tokens change — every component reads them, so nothing else in this file needs a dark-specific rule. The attribute is set by an inline script in before first paint (see chrome.py). */ [data-theme="dark"]{ --brand:#3b82f6; --brand-600:#60a5fa; --brand-700:#93c5fd; --accent:#2dd4bf; --accent-weak:#134e4a; --ink:#f1f5f9; --body:#cbd5e1; --muted:#94a3b8; --bg:#0b1220; --surface:#111a2e; --surface-2:#16203a; --border:#243352; --border-strong:#33456b; --danger:#f87171; --ok:#34d399; --warn:#fbbf24; --warn-bg:#2a2010; --warn-border:#4d3a12; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 6px 22px rgba(0,0,0,.45); --hero-top:#131f3a; --pill-bg:#1e3a8a; --callout-bg:#152039; --callout-tip-bg:#10241c; --disclaimer-ink:#fcd34d; --disclaimer-ink-strong:#fde68a; --footer-bg:#080e1a; --footer-ink:#cbd5e1; --footer-line:#1e293b; --footer-panel:#141d33; color-scheme:dark; } [data-theme="dark"] .badge{color:#5eead4} [data-theme="dark"] .pill-rate{color:#dbeafe} [data-theme="dark"] .site-footer .brand span{color:#fff} /* The hero illustration is a light "dashboard card" mockup; take the glare off it on a dark page rather than recolouring 40 hard-coded SVG fills. */ [data-theme="dark"] .hero-art svg{filter:brightness(.9) saturate(.95)} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);font-size:17px;line-height:1.65;color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh} main{flex:1 0 auto} .site-footer{flex-shrink:0} h1,h2,h3,h4{color:var(--ink);line-height:1.25;font-weight:700;margin:0 0 .5em;letter-spacing:-.012em} h1{font-size:2rem}h2{font-size:1.5rem;margin-top:1.6em}h3{font-size:1.2rem;margin-top:1.4em} p{margin:0 0 1em} a{color:var(--brand-600);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;height:auto} .tnum{font-variant-numeric:tabular-nums} /* Layout */ .container{max-width:var(--maxw);margin:0 auto;padding:0 20px} .wrap{max-width:var(--readw);margin:0 auto;padding:0 20px} .section{padding:40px 0} .grid{display:grid;gap:24px} @media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}} /* Skip link + focus */ .skip{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;z-index:200} .skip:focus{left:8px;top:8px} :focus-visible{outline:3px solid var(--brand-600);outline-offset:2px;border-radius:4px} /* Header / nav */ .site-header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50} .nav{display:flex;align-items:center;gap:8px;height:64px} .nav-links{margin-left:auto} .nav-actions{display:flex;align-items:center;gap:6px} .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:1.05rem} .brand:hover{text-decoration:none} .brand .logo{width:34px;height:34px;flex:0 0 auto} .nav-links{display:flex;gap:4px;align-items:center} .nav-links a{color:var(--body);padding:8px 12px;border-radius:8px;font-size:.95rem;font-weight:500} .nav-links a:hover{background:var(--surface-2);text-decoration:none} .nav-links a.cta{background:var(--brand);color:#fff} .nav-links a.cta:hover{background:var(--brand-700)} .nav-toggle{display:none;background:none;border:1px solid var(--border-strong);border-radius:8px;width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center} .nav-toggle svg{width:22px;height:22px} @media(max-width:820px){ .nav-toggle{display:inline-flex} .nav-actions{margin-left:auto} .nav-links{position:absolute;top:64px;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;padding:8px 16px 16px;gap:2px;display:none;box-shadow:var(--shadow)} .nav-links.open{display:flex} .nav-links a{padding:12px} } /* Theme toggle */ .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; background:none;border:1px solid var(--border-strong);border-radius:8px;cursor:pointer;color:var(--body);padding:0} .theme-toggle:hover{background:var(--surface-2);color:var(--ink)} .theme-toggle svg{width:20px;height:20px} .theme-toggle .ic-sun{display:none} [data-theme="dark"] .theme-toggle .ic-sun{display:block} [data-theme="dark"] .theme-toggle .ic-moon{display:none} /* Promo ticker (own-product advert; sits above the sticky header and scrolls away) */ .promo{position:relative;background:linear-gradient(90deg,#0f172a 0%,#1e3a8a 55%,#0d9488 100%); color:#fff;font-size:.86rem;font-weight:600;overflow:hidden;display:flex;align-items:center} .promo[hidden],[data-promo="off"] .promo{display:none} .promo-viewport{flex:1 1 auto;min-width:0;overflow:hidden;color:#fff;padding:9px 0;text-decoration:none;display:block} .promo-viewport:hover{text-decoration:none} .promo-track{display:flex;width:max-content;animation:promoScroll 38s linear infinite} .promo-viewport:hover .promo-track,.promo-viewport:focus-visible .promo-track{animation-play-state:paused} .promo-half{display:flex;flex:0 0 auto} .promo-item{white-space:nowrap;padding-right:64px;display:inline-flex;align-items:center;gap:8px} .promo-arrow{display:inline-block;background:rgba(255,255,255,.18);border-radius:5px;padding:0 7px;font-weight:700} .promo-viewport:hover .promo-arrow{background:rgba(255,255,255,.32)} @keyframes promoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .promo-close{flex:0 0 auto;width:36px;height:36px;margin-right:4px;display:inline-flex;align-items:center; justify-content:center;background:none;border:none;color:rgba(255,255,255,.75);cursor:pointer;padding:0} .promo-close:hover{color:#fff} .promo-close svg{width:15px;height:15px} /* Motion-sensitive visitors get a static, centred, readable strip instead. */ @media(prefers-reduced-motion:reduce){ .promo-track{animation:none;width:100%} .promo-half:last-child{display:none} .promo-half{width:100%;justify-content:center} .promo-item{white-space:normal;padding-right:0;text-align:center} .promo-item:not(:first-child){display:none} } /* Hero */ .hero{background:linear-gradient(180deg,var(--hero-top) 0%,var(--bg) 100%);border-bottom:1px solid var(--border)} .hero .container{padding-top:48px;padding-bottom:40px} .hero h1{font-size:2.3rem;max-width:16ch} .hero p.lede{font-size:1.15rem;color:var(--muted);max-width:60ch} .badge{display:inline-block;background:var(--accent-weak);color:#0f766e;font-weight:600;font-size:.8rem;padding:5px 12px;border-radius:999px;margin-bottom:14px} .hero-grid{display:grid;gap:32px;align-items:center} @media(min-width:920px){.hero-grid{grid-template-columns:1.05fr .95fr}} .hero-copy{min-width:0} .hero-art{display:none} @media(min-width:920px){.hero-art{display:block}} .hero-art svg{width:100%;height:auto;max-width:480px;margin-left:auto;display:block} /* Hero illustration animation (decorative SaaS dashboard) */ .ha-scene{animation:haFloat 7s ease-in-out infinite} .ha-in{animation:haIn .7s cubic-bezier(.2,.8,.2,1) both} .ha-fade{animation:haFade .6s ease both} .ha-f1{animation-delay:.15s}.ha-f2{animation-delay:.3s} .ha-val,.ha-num{font-variant-numeric:tabular-nums} .ha-bar-fill,#haBar1,#haBar2,#haBar3,#haBar4,#haVal1,#haVal2,#haVal3,#haVal4,#haRingArc{transition:fill .5s ease} .ha-chip{transform-box:fill-box;transform-origin:center;animation:haPop .7s cubic-bezier(.2,.9,.3,1.5) both} .ha-c1{animation-delay:.75s}.ha-c2{animation-delay:.9s} @keyframes haFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes haIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes haFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes haPop{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}} @media(prefers-reduced-motion:reduce){ .ha-scene,.ha-in,.ha-fade,.ha-chip{animation:none!important;opacity:1!important;transform:none!important} } /* Buttons */ .btn{display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;font-weight:600;padding:13px 22px;border-radius:10px;border:none;cursor:pointer;font-size:1rem;min-height:48px} .btn:hover{background:var(--brand-700);text-decoration:none} .btn-ghost{background:transparent;color:var(--brand-600);border:1px solid var(--border-strong)} .btn-ghost:hover{background:var(--surface-2)} /* Cards */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)} .card h3{margin-top:0} .card-link{display:block;color:inherit} .card-link:hover{text-decoration:none;border-color:var(--border-strong);box-shadow:var(--shadow)} .eyebrow{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700;color:var(--accent)} /* Calculator */ .calc{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden} .calc-grid{display:grid;gap:0} @media(min-width:920px){.calc-grid{grid-template-columns:minmax(0,420px) 1fr}} .calc-inputs{padding:26px;border-bottom:1px solid var(--border)} @media(min-width:920px){.calc-inputs{border-bottom:none;border-right:1px solid var(--border)}} .calc-output{padding:26px;background:var(--surface-2)} .field{margin-bottom:16px} .field label{display:block;font-weight:600;color:var(--ink);margin-bottom:6px;font-size:.92rem} .field .hint{font-weight:400;color:var(--muted);font-size:.82rem;margin:2px 0 0} .input-money{position:relative} .input-money span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)} .field input,.field select{width:100%;min-height:48px;border:1px solid var(--border-strong);border-radius:10px;padding:12px 14px;font-size:1rem;font-family:inherit;background:var(--surface);color:var(--ink)} .input-money input{padding-left:28px;font-variant-numeric:tabular-nums} .field input:focus,.field select:focus{border-color:var(--brand-600);outline:none;box-shadow:0 0 0 3px rgba(29,78,216,.15)} .year-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px} .year-tabs button{flex:1 1 auto;min-width:74px;min-height:44px;border:1px solid var(--border-strong);background:var(--surface);border-radius:10px;font-weight:600;color:var(--body);cursor:pointer;font-size:.9rem} .year-tabs button[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)} /* Result breakdown */ .result-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px} .result-year{font-size:.85rem;color:var(--muted);font-weight:600} .total-due{font-size:2rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} .breakdown{margin:18px 0 0;border-top:1px solid var(--border);padding-top:8px} .line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-variant-numeric:tabular-nums} .line .lbl{color:var(--body)} .line .val{font-weight:600;color:var(--ink);white-space:nowrap} .line.sub{padding-left:16px;font-size:.92rem;color:var(--muted)} .line.sub .val{color:var(--body);font-weight:500} .line.group{font-weight:700;color:var(--ink);border-top:1px solid var(--border);margin-top:6px;padding-top:12px} .line.total{border-top:2px solid var(--border-strong);margin-top:8px;padding-top:12px;font-size:1.1rem} .line.total .val{color:var(--brand-700);font-weight:800} .pill-rate{display:inline-block;background:var(--pill-bg);color:var(--brand-700);font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:6px;margin-left:6px;vertical-align:middle} /* Disclaimer */ .disclaimer{background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:10px;padding:12px 16px;font-size:.86rem;color:var(--disclaimer-ink);margin-top:18px} .disclaimer strong{color:var(--disclaimer-ink-strong)} /* Article */ .article{padding:36px 0 12px} .article h1{font-size:2.1rem} .article .meta{color:var(--muted);font-size:.9rem;margin-bottom:8px} .article p,.article li{font-size:1.05rem} .article ul,.article ol{margin:0 0 1.2em;padding-left:1.3em} .article li{margin-bottom:.4em} .article table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.95rem} .article th,.article td{border:1px solid var(--border);padding:9px 12px;text-align:left;font-variant-numeric:tabular-nums} .article th{background:var(--surface-2);font-weight:700;color:var(--ink)} .callout{background:var(--callout-bg);border-left:4px solid var(--brand-600);padding:14px 18px;border-radius:0 8px 8px 0;margin:1.2em 0} .callout.tip{background:var(--callout-tip-bg);border-color:var(--ok)} .breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:14px} .breadcrumb a{color:var(--muted)} .toc{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin:0 0 24px} .toc strong{display:block;margin-bottom:6px;color:var(--ink)} .toc ul{margin:0;padding-left:1.1em} /* Related */ .related{border-top:1px solid var(--border);margin-top:32px;padding-top:24px} /* Footer */ .site-footer{background:var(--footer-bg);color:var(--footer-ink);margin-top:56px;padding:40px 0 28px;font-size:.92rem} .site-footer a{color:#e2e8f0} .footer-grid{display:grid;gap:24px;grid-template-columns:1fr} @media(min-width:720px){.footer-grid{grid-template-columns:2fr 1fr 1fr}} .site-footer h4{color:#fff;font-size:.95rem;margin:0 0 10px} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin-bottom:6px} .footer-bottom{border-top:1px solid var(--footer-line);margin-top:26px;padding-top:18px;color:#94a3b8;font-size:.82rem} .footer-disclaimer{background:var(--footer-panel);border-radius:8px;padding:12px 16px;margin-top:16px;color:#cbd5e1;font-size:.82rem} /* Utility */ .center{text-align:center} .mt-0{margin-top:0}.mb-0{margin-bottom:0} .list-plain{list-style:none;padding:0;margin:0} .article-list li{margin-bottom:14px} .tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em} @media (prefers-reduced-motion: no-preference){ a,.btn,.card-link,.year-tabs button{transition:background .15s ease,box-shadow .15s ease,border-color .15s ease} }