/* * SIMPulse design tokens. * * Transcribed from design/DESIGN-SYSTEM.md §1.8 plus the layer/geometry values * from §1.4, §3.1 and §7. This file is the SINGLE place a value is defined -- * a component that hard-codes a colour, a size or a duration is a bug. * * Two rules the whole system rests on: * - radius is 0 everywhere except --sp-radius-circle (50%), used 5 times. * - there are no @media breakpoints; responsiveness is clamp() and * repeat(auto-fit, minmax(Npx, 1fr)). The single exception is the mobile * nav drawer (components/header.css), which the prototype simply lacks. */ :root { /* ---------- Brand ---------- */ --sp-red: #EC1C24; --sp-red-hover: #ff2a33; --sp-green: rgb(32, 171, 62); /* ---------- Surfaces ---------- */ --sp-bg: #1B1B1B; /* page ground */ --sp-bg-deep: #111111; /* alternating bands, inputs, footer */ --sp-surface: #232323; /* cards */ --sp-surface-sunken: #161616; /* modal footer, video box */ --sp-stripe: #1f1f1f; /* map placeholder */ --sp-grey-rule: rgb(79, 79, 79); /* ---------- Text ---------- */ --sp-text: #ffffff; --sp-text-82: rgba(255, 255, 255, 0.82); --sp-text-78: rgba(255, 255, 255, 0.78); --sp-text-60: rgba(255, 255, 255, 0.60); /* card body */ --sp-text-55: rgba(255, 255, 255, 0.55); --sp-text-50: rgba(255, 255, 255, 0.50); --sp-text-45: rgba(255, 255, 255, 0.45); /* micro-labels */ --sp-text-40: rgba(255, 255, 255, 0.40); --sp-text-35: rgba(255, 255, 255, 0.35); /* Hairlines. Added while building the home page: DESIGN-SYSTEM uses these three values but the first token pass did not name them. */ --sp-line-14: rgba(255, 255, 255, 0.14); /* hero stats rule, rating badge border */ --sp-line-row: rgba(255, 255, 255, 0.07); /* leaderboard row divider */ --sp-text-disabled: rgba(255, 255, 255, 0.27); /* 0.26-0.28 unified */ --sp-text-muted-l: rgb(182, 182, 182); --sp-text-muted-d: rgb(150, 150, 150); /* ---------- Lines ---------- */ --sp-line-faint: rgba(255, 255, 255, 0.06); --sp-line-card: rgba(255, 255, 255, 0.08); --sp-line: rgba(255, 255, 255, 0.10); --sp-line-strong: rgba(255, 255, 255, 0.12); --sp-line-field: rgba(255, 255, 255, 0.16); --sp-line-ghost: rgba(255, 255, 255, 0.20); --sp-line-ghost-lg: rgba(255, 255, 255, 0.34); --sp-line-hover: rgba(236, 28, 36, 0.60); --sp-line-hover-sub: rgba(236, 28, 36, 0.50); /* ---------- Tints ---------- */ --sp-tint-white-3: rgba(255, 255, 255, 0.03); --sp-tint-white-4: rgba(255, 255, 255, 0.04); --sp-tint-white-8: rgba(255, 255, 255, 0.08); /* ghost hover */ --sp-tint-red-8: rgba(236, 28, 36, 0.08); --sp-tint-red-10: rgba(236, 28, 36, 0.10); --sp-tint-red-12: rgba(236, 28, 36, 0.12); --sp-tint-red-16: rgba(236, 28, 36, 0.16); /* selected option */ --sp-tint-red-20: rgba(236, 28, 36, 0.20); /* selected calendar day */ --sp-tint-red-25: rgba(236, 28, 36, 0.25); /* focus ring */ --sp-red-disabled: rgba(236, 28, 36, 0.40); --sp-red-sublabel: rgba(236, 28, 36, 0.85); --sp-chip-fill: rgba(27, 27, 27, 0.72); /* ---------- Overlays ---------- */ --sp-header-bg: rgba(17, 17, 17, 0.86); --sp-modal-veil: rgba(10, 10, 10, 0.86); --sp-scrim-hero: linear-gradient(102deg, rgba(27, 27, 27, 0.18) 16%, rgba(17, 17, 17, 0.95) 70%); --sp-scrim-top: linear-gradient(180deg, rgba(17, 17, 17, 0.5), rgba(17, 17, 17, 0.94)); --sp-scrim-left: linear-gradient(96deg, rgba(17, 17, 17, 0.96) 40%, rgba(17, 17, 17, 0.6)); --sp-blur-header: blur(20px); --sp-blur-modal: blur(8px); /* ---------- Type families ---------- */ --sp-font-display: Barlow, "Helvetica Neue", Arial, sans-serif; /* always italic + uppercase */ --sp-font-body: Poppins, "Helvetica Neue", Arial, sans-serif; --sp-font-mono: "Courier New", monospace; /* ---------- Type scale, fixed ---------- */ --sp-fs-nano: 9px; --sp-fs-tiny: 11px; --sp-fs-micro: 12px; /* + ls .14em uppercase */ --sp-fs-xs: 13px; --sp-fs-sm: 14px; --sp-fs-base: 15px; --sp-fs-md: 16px; --sp-fs-md-lg: 18px; /* leaderboard period tag, ghost button padding step */ --sp-fs-btn: 17px; --sp-fs-lg: 19px; --sp-fs-20: 20px; /* pricing-perk title, contact success title, modal total label */ --sp-fs-xl: 22px; --sp-fs-2xl: 26px; --sp-fs-3xl: 32px; /* ---------- Type scale, fluid ---------- */ --sp-fs-h2: clamp(26px, 3.4vw, 48px); --sp-fs-h1-page: clamp(28px, 3.6vw, 52px); --sp-fs-h2-sub: clamp(24px, 3vw, 40px); --sp-fs-display: clamp(30px, 4vw, 62px); --sp-fs-display-lg: clamp(34px, 5.4vw, 84px); --sp-fs-hero: clamp(42px, 6.4vw, 100px); --sp-fs-wordmark: clamp(46px, 6.6vw, 110px); --sp-fs-lede: clamp(17px, 1.7vw, 26px); --sp-fs-lede-sm: clamp(17px, 1.6vw, 24px); --sp-fs-eyebrow: clamp(13px, 1.2vw, 18px); --sp-fs-eyebrow-lg: clamp(14px, 1.4vw, 22px); --sp-fs-kicker: clamp(18px, 2vw, 30px); --sp-fs-nav: clamp(14px, 1.2vw, 21px); --sp-fs-nav-cta: clamp(14px, 1.2vw, 21px); --sp-fs-footer-link: clamp(14px, 0.95vw, 18px); --sp-fs-footer-cta: clamp(15px, 1.05vw, 20px); --sp-fs-copyright: clamp(12px, 0.8vw, 15px); --sp-fs-btn-hero: clamp(15px, 1.4vw, 21px); --sp-fs-btn-band: clamp(15px, 1.3vw, 24px); /* ---------- Line heights ---------- */ --sp-lh-hero: 0.94; --sp-lh-display: 1; --sp-lh-tight: 1.1; --sp-lh-snug: 1.3; --sp-lh-lede: 1.45; --sp-lh-body: 1.6; /* ---------- Letter spacing ---------- */ --sp-ls-nav: .02em; --sp-ls-pill: .04em; --sp-ls-btn: .05em; --sp-ls-eyebrow: .08em; --sp-ls-eyebrow-lg: .10em; --sp-ls-label: .14em; --sp-ls-tag: .16em; /* ---------- Layout ---------- */ --sp-container: 1400px; --sp-container-mid: 1100px; --sp-container-text: 900px; --sp-container-copy: 700px; --sp-modal-max: 880px; --sp-gutter: clamp(20px, 3vw, 40px); --sp-section-y: clamp(52px, 7vw, 104px); --sp-section-y-top: clamp(48px, 6vw, 88px); --sp-section-y-band: clamp(48px, 6vw, 96px); /* * How far the footer's red panel bleeds ABOVE the footer's top edge, over the * last section on the page. Read by components/footer.css (which produces the * bleed) and by layout.css (which pays it back as bottom padding on the last * section, so the section's content is never crowded by the panel). One value, * so the two can never drift apart. */ --sp-footer-bleed: clamp(40px, 5vw, 80px); --sp-heading-gap: clamp(26px, 3.5vw, 42px); --sp-heading-gap-lg: clamp(30px, 4vw, 54px); --sp-cta-gap: clamp(22px, 3vw, 36px); --sp-grid-gap: clamp(16px, 2vw, 28px); --sp-grid-gap-sm: clamp(14px, 1.8vw, 22px); --sp-grid-gap-lg: clamp(20px, 3vw, 50px); /* ---------- Spacing steps ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 14px; --sp-5: 16px; --sp-6: 18px; --sp-7: 20px; --sp-8: 22px; --sp-9: 24px; --sp-10: 26px; --sp-11: 30px; --sp-12: 34px; /* ---------- Radius (deliberately minimal) ---------- */ --sp-radius: 0; --sp-radius-circle: 50%; /* ---------- Borders ---------- */ --sp-border: 1px solid var(--sp-line-card); --sp-border-field: 1px solid var(--sp-line-field); --sp-border-ghost: 1px solid var(--sp-line-ghost); --sp-border-hero: 1px solid var(--sp-line-ghost-lg); --sp-border-accent: 2px solid var(--sp-red); /* ---------- Shadow ---------- */ --sp-shadow-red: 0 14px 34px rgba(236, 28, 36, 0.38); --sp-shadow-card: 0 26px 60px rgba(0, 0, 0, 0.5); --sp-shadow-render: drop-shadow(0 44px 66px rgba(0, 0, 0, 0.65)); /* ---------- Motion ---------- */ --sp-dur-fast: .18s; --sp-dur-base: .25s; --sp-dur-slow: .4s; --sp-ease: ease; /* ---------- Z-index layers ---------- */ --sp-z-base: 1; --sp-z-raised: 2; /* hero copy over the scrim */ --sp-z-pinned: 50; /* the checkout's pinned Selection, under the header */ --sp-z-sticky: 60; /* header */ --sp-z-drawer: 70; /* mobile nav panel */ --sp-z-modal: 90; /* booking modal overlay */ --sp-z-toast: 100; /* ---------- Signature shapes ---------- */ --sp-skew: skewX(-14deg); --sp-clip-cta: polygon(4% 0, 100% 0, 96% 100%, 0 100%); --sp-clip-hero-cut: polygon(0 100%, 100% 0, 100% 100%); --sp-clip-footer: polygon(0 7%, 100% 0, 100% 100%, 0 100%); }