/* ═══════════════════════════════════════════════════════════════════════════ TORII · SAAS SAVINGS CALCULATOR — STYLES torii-savings-calculator.css ═══════════════════════════════════════════════════════════════════════════ SAFE TO DROP INTO AN EXISTING SITE. Everything is namespaced twice over: · every class is prefixed .tsc- · every custom property is prefixed --tsc- · every rule is scoped under .tsc — there are NO bare element selectors, so this file cannot restyle your body, your buttons or your inputs RESPONSIVE VIA CONTAINER QUERIES, NOT VIEWPORT WIDTH. The card goes two-column when the CARD is wider than 620px, not when the browser is. That matters because these land inside page columns narrower than the viewport — a viewport media query would flip to two columns while the card was still 560px wide and the hero number would clip. Browsers without container query support (pre-2023) get the single-column stacked layout everywhere, which is the mobile-first fallback and is fully functional. CONTRAST. Every text pairing here has been measured. Values are noted inline. The three substituted tokens are deliberate: Torii Mid Gray #6B7280 fails AA on our sunken surface at 4.43:1, so --tsc-ink-2 is #5F6B7A instead. Do not "correct" these back to the brand sheet without re-measuring. ═══════════════════════════════════════════════════════════════════════════ */ .tsc { /* ── brand ────────────────────────────────────────────────────────────── */ --tsc-blue: #0054FF; /* 5.66:1 on white ✓ */ --tsc-hover: #003FCC; /* 8.13:1 ✓ */ --tsc-dark-blue: #1A41A5; /* 8.96:1 ✓ */ --tsc-ink: #0A0A0A; /* 19.80:1 white · 18.77:1 pane tint ✓ */ --tsc-ink-2: #5F6B7A; /* SUBSTITUTE for Mid Gray. 5.43:1 white · 5.14:1 pane ✓ */ --tsc-good: #12805A; /* 4.93:1 white · 4.67:1 pane · 4.55:1 pill ✓ */ /* ── surfaces ─────────────────────────────────────────────────────────── */ --tsc-surface: #FFFFFF; --tsc-sunken: #F4F5F7; --tsc-pane: #F7F9FC; /* results column */ --tsc-tint: #E6EDFF; /* blue pills — blue on it is 4.83:1 ✓ */ --tsc-good-pill: #EFF8F3; /* green pill. #E3F1EA failed at 4.23:1 */ --tsc-chip-bg: #EDEFF3; /* ── lines ────────────────────────────────────────────────────────────── */ --tsc-border-ui: #7E8798; /* 3.62:1 ✓ WCAG 1.4.11 — FUNCTIONAL borders only */ --tsc-border: #E4E7EC; /* decorative rules */ --tsc-border-tile: #D8DDE6; /* decorative tile outline */ --tsc-track: #DDE3EC; /* slider track — the FILL carries the meaning */ --tsc-focus: #0A0A0A; /* 19.80:1 vs white, 3.50:1 vs the blue button */ /* ── type ─────────────────────────────────────────────────────────────── */ /* If your site already sets Eudoxus Sans on , change this to `inherit` and drop the font from the include. */ --tsc-font: 'Eudoxus Sans', 'Plus Jakarta Sans', Arial, sans-serif; --tsc-t-body: 1rem; --tsc-t-small: .8125rem; --tsc-t-micro: .6875rem; /* NOTE THE SPACES AROUND EVERY `+`. CSS math requires them; without them the whole declaration is silently dropped and the hero falls back to 16px. That bug shipped twice. Do not let a formatter strip them. */ --tsc-t-big: clamp(2.125rem, 1.35rem + 3.1vw, 3.25rem); /* 34 → 52 */ --tsc-t-hc: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem); /* headcount readout */ --tsc-t-mid: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); /* ── space, radius, targets ───────────────────────────────────────────── */ --tsc-s-1: .25rem; --tsc-s-2: .5rem; --tsc-s-3: .75rem; --tsc-s-4: 1rem; --tsc-s-5: 1.25rem; --tsc-s-6: 1.75rem; --tsc-r-sm: 6px; --tsc-r-md: 10px; --tsc-r-lg: 14px; --tsc-r-pill: 999px; --tsc-tap: 48px; /* WCAG 2.5.8 — every control clears this */ --tsc-shadow: 0 1px 2px rgba(10, 10, 10, .04), 0 8px 24px rgba(10, 10, 10, .07); /* The card is its own query container. See the note at the top of this file. */ container-type: inline-size; container-name: tsc; color-scheme: light; font-family: var(--tsc-font); font-size: var(--tsc-t-body); line-height: 1.55; color: var(--tsc-ink); background: var(--tsc-surface); border: 1px solid var(--tsc-border); border-radius: var(--tsc-r-lg); box-shadow: var(--tsc-shadow); overflow: hidden; -webkit-font-smoothing: antialiased; } .tsc, .tsc *, .tsc *::before, .tsc *::after { box-sizing: border-box; } .tsc :focus-visible { outline: 3px solid var(--tsc-focus); outline-offset: 2px; border-radius: 2px; } .tsc :focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { .tsc *, .tsc *::before, .tsc *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; } } /* ── header ─────────────────────────────────────────────────────────────── */ .tsc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--tsc-s-3); flex-wrap: wrap; padding: var(--tsc-s-3) var(--tsc-s-5); border-bottom: 1px solid var(--tsc-border); background: var(--tsc-surface); } .tsc-title { margin: 0; font-size: var(--tsc-t-small); font-weight: 800; letter-spacing: -.01em; } /* Neutral, not blue — the stamp is provenance, not a call to action, and a blue pill up here competed with the CTA for the same attention. 4.71:1 ✓ */ .tsc-chip { font: 700 var(--tsc-t-micro)/1 var(--tsc-font); letter-spacing: .09em; text-transform: uppercase; padding: 5px 10px; border-radius: var(--tsc-r-pill); background: var(--tsc-chip-bg); border: 1px solid var(--tsc-border); color: var(--tsc-ink-2); white-space: nowrap; } /* ── two-column body ───────────────────────────────────────────────────── */ .tsc-body { display: grid; } .tsc-pane { padding: var(--tsc-s-5); } .tsc-pane--out { border-top: 1px solid var(--tsc-border); background: var(--tsc-pane); display: flex; flex-direction: column; } @container tsc (min-width: 620px) { /* Results column is the wider one — it carries the hero number and cluster. */ .tsc-body { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); } .tsc-pane--out { border-top: 0; border-left: 1px solid var(--tsc-border); } } /* ── inputs · headcount readout ────────────────────────────────────────── */ .tsc-label { display: block; margin-bottom: var(--tsc-s-1); font-size: var(--tsc-t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tsc-ink-2); } /* Tier sits BESIDE the number, baseline-aligned, so the two read as one fact. */ .tsc-hc { display: flex; align-items: baseline; gap: var(--tsc-s-3); flex-wrap: wrap; } .tsc-hc__v { font-size: var(--tsc-t-hc); font-weight: 800; letter-spacing: -.035em; color: var(--tsc-ink); font-variant-numeric: tabular-nums; line-height: 1; } .tsc-hc__tier { font: 800 var(--tsc-t-micro)/1 var(--tsc-font); letter-spacing: .09em; text-transform: uppercase; color: var(--tsc-blue); } /* ── inputs · slider ───────────────────────────────────────────────────── */ /* --tsc-pct is written by JS onto the input itself and the track gradient reads it, so the fill and the thumb can never drift apart. */ .tsc-slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: var(--tsc-tap); margin: 0; background: transparent; cursor: pointer; } .tsc-slider::-webkit-slider-runnable-track { height: 6px; border: 0; border-radius: var(--tsc-r-pill); background: linear-gradient(to right, var(--tsc-blue) var(--tsc-pct, 50%), var(--tsc-track) var(--tsc-pct, 50%)); } .tsc-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--tsc-surface); border: 3px solid var(--tsc-blue); box-shadow: 0 0 0 6px rgba(0, 84, 255, .10), 0 1px 4px rgba(10, 10, 10, .22); } .tsc-slider::-moz-range-track { height: 6px; border: 0; border-radius: var(--tsc-r-pill); background: var(--tsc-track); } .tsc-slider::-moz-range-progress { height: 6px; border-radius: var(--tsc-r-pill); background: var(--tsc-blue); } .tsc-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--tsc-surface); border: 3px solid var(--tsc-blue); box-shadow: 0 0 0 6px rgba(0, 84, 255, .10), 0 1px 4px rgba(10, 10, 10, .22); } .tsc-slider:hover::-webkit-slider-thumb { border-color: var(--tsc-hover); } .tsc-slider:hover::-moz-range-thumb { border-color: var(--tsc-hover); } .tsc-ticks { display: flex; justify-content: space-between; margin-top: -8px; font-size: var(--tsc-t-micro); color: var(--tsc-ink-2); font-variant-numeric: tabular-nums; } /* ── inputs · industry ─────────────────────────────────────────────────── */ .tsc-field { margin-top: var(--tsc-s-4); } /* Native chevron removed and redrawn so it sits where the design puts it and inherits --tsc-ink-2 rather than the OS accent colour. */ .tsc-sel { position: relative; } .tsc-sel select { -webkit-appearance: none; appearance: none; width: 100%; min-height: var(--tsc-tap); padding: var(--tsc-s-2) 2.25rem var(--tsc-s-2) var(--tsc-s-4); font: inherit; font-size: var(--tsc-t-small); font-weight: 600; color: var(--tsc-ink); background: var(--tsc-surface); border: 1.5px solid var(--tsc-border-ui); border-radius: var(--tsc-r-md); } .tsc-sel select:hover { border-color: var(--tsc-blue); } .tsc-sel::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--tsc-ink-2); border-bottom: 2px solid var(--tsc-ink-2); transform: rotate(45deg); pointer-events: none; } /* ── inputs · basis spec list ──────────────────────────────────────────── */ /* These are inputs to the number, not part of the headline, so they belong on the input side of the card rather than under the hero. */ .tsc-spec { margin-top: var(--tsc-s-5); border-top: 1px solid var(--tsc-border); } .tsc-spec__r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tsc-s-3); padding: var(--tsc-s-3) 0; border-bottom: 1px solid var(--tsc-border); } .tsc-spec__k { font-size: var(--tsc-t-micro); color: var(--tsc-ink-2); line-height: 1.35; } .tsc-spec__v { font-size: var(--tsc-t-small); font-weight: 800; color: var(--tsc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; } /* ── results · hero ───────────────────────────────────────────────────── */ .tsc-kicker { margin: 0 0 var(--tsc-s-2); font: 700 var(--tsc-t-micro)/1.3 var(--tsc-font); letter-spacing: .1em; text-transform: uppercase; color: var(--tsc-ink-2); } .tsc-res { display: flex; align-items: baseline; gap: var(--tsc-s-3); flex-wrap: wrap; } .tsc-res__v { font-size: var(--tsc-t-big); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--tsc-good); font-variant-numeric: tabular-nums; white-space: nowrap; } .tsc-res__pct { font: 800 var(--tsc-t-small)/1 var(--tsc-font); color: var(--tsc-good); background: var(--tsc-good-pill); padding: 6px 10px; border-radius: var(--tsc-r-pill); white-space: nowrap; } .tsc-res__sub { margin: var(--tsc-s-3) 0 0; font-size: var(--tsc-t-micro); color: var(--tsc-ink-2); line-height: 1.5; } /* ── results · the app cluster ────────────────────────────────────────── */ .tsc-cluster { position: relative; margin-top: var(--tsc-s-5); padding-top: var(--tsc-s-5); border-top: 1px solid var(--tsc-border); } .tsc-cluster__stack { position: relative; margin-bottom: calc(var(--tsc-s-3) + 17px); } /* Two offset cards peeking below the real one — depth without a drop shadow doing the work. Pseudo-elements, so they are invisible to assistive tech. PAINT ORDER MATTERS: ::after paints over ::before, so the deepest and narrowest card must be ::before or the taper collapses into one card. */ .tsc-cluster__stack::before, .tsc-cluster__stack::after { content: ""; position: absolute; z-index: 0; height: 26px; background: var(--tsc-surface); border: 1px solid var(--tsc-border-tile); border-radius: 0 0 var(--tsc-r-sm) var(--tsc-r-sm); } .tsc-cluster__stack::before { left: 19px; right: 19px; bottom: -16px; } .tsc-cluster__stack::after { left: 8px; right: 8px; bottom: -8px; } .tsc-cluster__card { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--tsc-s-2); padding: var(--tsc-s-3); background: var(--tsc-surface); border: 1px solid var(--tsc-border-tile); border-radius: var(--tsc-r-md); } .tsc-tiles { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1 1 auto; } .tsc-tile { width: 28px; height: 28px; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--tsc-surface); border: 1px solid var(--tsc-border-tile); border-radius: 7px; } /* Logos are yours. Any aspect ratio works — object-fit keeps them square-safe. */ .tsc-tile__img, .tsc-tile__fb { display: block; width: 18px; height: 18px; object-fit: contain; } /* The long tail as a count, not as a row of empty squares — the number is the persuasive part, and a pill can carry four digits where a square cannot. */ .tsc-cluster__more { margin-left: auto; flex: none; font: 800 var(--tsc-t-micro)/1 var(--tsc-font); letter-spacing: .02em; color: var(--tsc-blue); background: var(--tsc-tint); padding: 8px 10px; border-radius: var(--tsc-r-pill); white-space: nowrap; } .tsc-cluster__cap { margin: 0; font-size: var(--tsc-t-micro); color: var(--tsc-ink-2); line-height: 1.5; } .tsc-cluster__cap b { color: var(--tsc-ink); font-weight: 800; } /* ── details drawer ───────────────────────────────────────────────────── */ .tsc-drawer { border-top: 1px solid var(--tsc-border); } .tsc-drawer > summary { list-style: none; cursor: pointer; min-height: var(--tsc-tap); display: flex; align-items: center; justify-content: space-between; gap: var(--tsc-s-3); padding: var(--tsc-s-3) var(--tsc-s-5); background: var(--tsc-sunken); } .tsc-drawer > summary::-webkit-details-marker { display: none; } .tsc-drawer__t { font-size: var(--tsc-t-small); font-weight: 700; } .tsc-drawer__t small { display: block; margin-top: 1px; font-weight: 400; font-size: var(--tsc-t-micro); color: var(--tsc-ink-2); } /* Circular toggle. Deliberately NOT a