/* ========================================================================== theme.css — the product design layer. Load order: appx-brand-kit/brand-kit.css → theme.css → style.css Three layers, each with one job: brand-kit.css shared AppX foundation (fonts, palette tokens, header/ footer, reset). Copied in from the brand kit, not edited here — see appx-brand-kit/appx-website-brand-kit.md. theme.css THIS FILE. Tokens and shared components for this product: the page shell, the card surface, the sliders, the big figure. Where this product departs from the site's defaults, it departs here. style.css this one page's layout, measures and copy styling. Starting a new artifact? brand-kit.css and this file are the reusable pair. style.css is the part you rewrite. Three rules below are marked CARRIED — they are the only surviving rules from the original billable-gap calculator's stylesheet, which this page loaded for its whole prototype life. Everything else in that file styled markup this page does not have. They sit here rather than in style.css because they are element-level defaults, not page layout. Verified live before carrying: each one is the last word on a property nothing else sets. ========================================================================== */ :root { color-scheme: light; /* Light/electric-blue palette. --navy is an alias kept so the name still reads correctly in rules inherited from the calculator lineage. */ --bg: #f3f6fb; --white: #ffffff; --border: rgba(16, 27, 51, 0.1); --border-lt: rgba(16, 27, 51, 0.06); --text: #101b33; --text-2: #57628a; --text-3: #8891ac; --navy: var(--color-electric-blue); --navy-lt: rgba(51, 136, 255, 0.1); /* Calculator surface tokens */ --calc-ink: #101b33; --calc-ink-soft: #57628a; --calc-ink-faint: #8891ac; --calc-surface: #ffffff; --calc-surface-border: rgba(16, 27, 51, 0.08); --calc-accent-soft: rgba(51, 136, 255, 0.1); --calc-width: 30rem; } body { position: relative; background-color: var(--bg); color: var(--text); } /* brand-kit.css's shared h1-h6 rule sets color:#fff for the dark site — wrong for this page's light background. */ h1 { color: var(--text); font-weight: 500; font-size: 26px; line-height: 1.3; letter-spacing: -0.02em; /* CARRIED. Nothing else sets h1's bottom margin, and style.css's negative margin-top on .sub below 1024px was tuned against this value — drop it and the H1/lede gap collapses. */ margin-bottom: 12px; } /* Fixed noise overlay —

is the first element inside . */ .grain-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-repeat: repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.06 0 0 0 0 0.11 0 0 0 0 0.2 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Lift real content above .grain-layer */ .calculator, .site-footer { position: relative; z-index: 1; } /* ============================ page shell ============================ */ .calculator { max-width: var(--calc-width); margin: 0 auto; padding: 2.25rem 1.25rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; } /* CARRIED. The lede under the H1. style.css overrides its measure and margins per breakpoint but never these three properties, so they are still the live values at every width. */ .sub { font-size: 15px; color: var(--text-2); line-height: 1.65; max-width: 430px; margin-bottom: 40px; } /* ============================ components ============================ */ .hero-stat { font-size: clamp(3rem, 15vw, 4.25rem); color: var(--calc-ink); letter-spacing: -0.02em; } .calc-card { background: var(--calc-surface); border: 1px solid var(--calc-surface-border); border-radius: 20px; padding: 1.5rem; box-shadow: 0 1px 20px rgba(16, 27, 51, 0.05); } .scenario-slider-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.85rem; color: var(--calc-ink-soft); } .scenario-slider-row strong { color: var(--color-electric-blue); font-size: 1rem; } /* ============================= sliders ============================= */ /* CARRIED. touch-action is the important half: without it, a vertical finger-scroll that starts on a slider track is read as a drag, so grazing a thumb while scrolling jumps the value to wherever the touch landed. Nothing else on the page sets it. */ input[type="range"] { accent-color: var(--navy); touch-action: pan-y; } /* Track and thumb read --fill, the per-slider progress variable calculator.js sets on each element — this page has six independent sliders, each needing its own fill amount. */ .calculator input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient( to right, var(--color-electric-blue) 0%, var(--color-electric-blue) var(--fill, 0%), rgba(16, 27, 51, 0.12) var(--fill, 0%), rgba(16, 27, 51, 0.12) 100% ); } .calculator input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--color-electric-blue); box-shadow: 0 2px 8px rgba(16, 27, 51, 0.25); cursor: pointer; } .calculator input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--color-electric-blue); box-shadow: 0 2px 8px rgba(16, 27, 51, 0.25); cursor: pointer; }