/* ========================================================================== Design tokens — the single source of truth. This block previously existed as six copy-pasted duplicates, one per page. Colours are unchanged from the original theme. The type, spacing, radius and shadow scales are NEW, but every value is reverse-engineered from what the site already used, so this is tokenisation rather than a restyle. ========================================================================== */ :root { /* --- Brand (unchanged) --- */ --primary-color: #0d47a1; --secondary-color: #1565c0; --dark-bg: #0f172a; --light-bg: #f8fafc; --text-main: #334155; --white: #ffffff; --border-light: #e2e8f0; --badge-bg: #e0f2fe; --badge-text: #0369a1; /* --- Accents that were previously hardcoded throughout the markup --- */ --sky: #38bdf8; --sky-soft: #7dd3fc; --amber: #f59e0b; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --whatsapp: #25d366; --whatsapp-dark: #1ebe5a; /* --- Neutral ramp (Tailwind slate, already in use) --- */ --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; /* --- Surfaces --- */ --surface-1: var(--white); --surface-2: var(--light-bg); --surface-3: var(--slate-100); --surface-inverse: var(--dark-bg); --tint-blue: #eff6ff; --tint-blue-strong: #eaf3ff; /* --- Type --- */ --font-head: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --fs-xs: clamp(0.75rem, 0.73rem + 0.10vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.85rem + 0.10vw, 0.9375rem); --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --fs-lg: clamp(1.125rem, 1.07rem + 0.27vw, 1.25rem); --fs-xl: clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem); --fs-2xl: clamp(1.75rem, 1.55rem + 1.00vw, 2.25rem); --fs-3xl: clamp(2.25rem, 1.90rem + 1.75vw, 3rem); --fs-4xl: clamp(2.75rem, 2.20rem + 2.75vw, 4rem); /* Display tier — hero headline only. Larger than --fs-4xl, tighter than anything else on the site. */ --fs-display: clamp(3.25rem, 2.4rem + 4.2vw, 5.5rem); --tracking-display: -0.035em; --lh-tight: 1.15; --lh-snug: 1.35; --lh-base: 1.65; --tracking-tight: -0.02em; --tracking-wide: 0.08em; /* --- Spacing --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6rem; --section-y: clamp(4rem, 8vw, 5.625rem); --container: 1200px; --header-h: 74px; /* --- Radii (matching existing usage) --- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 50px; /* --- Elevation ------------------------------------------------------- Three stacked layers per level — a tight contact shadow, a mid diffusion and a wide ambient. Tinted navy, never black: pure black shadows over a tinted background go grey and muddy, which is the single most template-looking detail on a light site. */ --el-1: 0 1px 1px rgba(15, 23, 42, 0.035), 0 2px 4px rgba(15, 23, 42, 0.035), 0 6px 14px rgba(13, 71, 161, 0.045); --el-2: 0 1px 1px rgba(15, 23, 42, 0.04), 0 4px 8px rgba(15, 23, 42, 0.04), 0 12px 28px rgba(13, 71, 161, 0.07); --el-3: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 16px rgba(15, 23, 42, 0.05), 0 24px 56px rgba(13, 71, 161, 0.10), 0 40px 90px rgba(13, 71, 161, 0.06); /* Brand-emitting — primary CTA only */ --el-brand: 0 1px 1px rgba(13, 71, 161, 0.20), 0 6px 14px rgba(13, 71, 161, 0.22), 0 16px 34px rgba(13, 71, 161, 0.18); /* One pixel of white along the top edge fakes a light source. */ --el-lip: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* Legacy aliases, kept so existing rules keep working. */ --shadow-sm: var(--el-1); --shadow-md: var(--el-2); --shadow-lg: var(--el-3); --shadow-xl: var(--el-3); --shadow-glow: var(--el-brand); /* --- Surface planes -------------------------------------------------- Rule: never place a surface against itself. A card on --plane-0 gets white + shadow; a card on white gets --plane-0 + hairline and no shadow. White-on-white with a grey border is what reads as a template. */ --plane-0: #f8fafc; /* page */ --plane-1: #f1f5f9; /* recessed — inner shadow only, never a drop shadow */ --plane-2: #ffffff; /* resting card */ --plane-3: #ffffff; /* lifted card, dropdown, modal */ --hair-1: rgba(15, 23, 42, 0.06); /* neutral hairline, ~half of #e2e8f0 */ --hair-2: rgba(13, 71, 161, 0.12); /* active / brand hairline */ /* --- Ink --------------------------------------------------------------- Four steps, nothing else. Maximum three visible in one component. */ --ink-1: #0f172a; /* headings, numerals */ --ink-2: #334155; /* body */ --ink-3: #64748b; /* secondary, captions */ --ink-4: #94a3b8; /* labels, eyebrows */ /* --- Icon scale ------------------------------------------------------ Sized with width/height, never font-size. Stroke weight is corrected per size because a constant stroke looks thin at 16px and heavy at 28. */ --icon-sm: 16px; --icon-md: 20px; --icon-lg: 28px; /* --- Texture ---------------------------------------------------------- */ --tex-ink: #0d47a1; --tex-ink-warm: #f59e0b; /* --- Brand gradient sweep ----------------------------------------------- THE accent of the redesign. Used as: text-clip on one hero keyword, primary CTA fill, card hover glow, scroll progress. Never on body text. */ --grad-brand: linear-gradient(120deg, #0d47a1, #2563eb 55%, #38bdf8); --grad-brand-soft: linear-gradient(120deg, rgba(13, 71, 161, 0.14), rgba(37, 99, 235, 0.14) 55%, rgba(56, 189, 248, 0.14)); /* Aurora wash layers — composed into section backgrounds, ≤4% opacity so text contrast is untouched. */ --aurora-blue: radial-gradient(52% 44% at 18% 22%, rgba(37, 99, 235, 0.05), transparent 70%); --aurora-sky: radial-gradient(46% 40% at 84% 12%, rgba(56, 189, 248, 0.05), transparent 70%); --aurora-warm: radial-gradient(40% 36% at 70% 88%, rgba(245, 158, 11, 0.025), transparent 70%); /* --- Motion --- --ease-out and --dur-4 are unchanged from the original reveal transition, so existing animations keep their exact feel. */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-1: 150ms; --dur-2: 300ms; --dur-3: 500ms; --dur-4: 800ms; --dur-5: 1200ms; --stagger: 90ms; /* Legacy alias — kept so existing rules using var(--transition) still work. */ --transition: all 0.3s ease; /* --- Layers --- */ --z-sidebar: 999; --z-header: 1000; --z-dropdown: 1200; --z-modal: 2000; /* --- Floating bottom stack (phone) --------------------------------------- Four fixed elements share the bottom of a phone screen: the sticky CTA bar, the assistant trigger, the assistant window and back-to-top. Every clearance below is derived from these, so they cannot be edited out of sync — which is exactly how .to-top ended up sitting on top of .bot-trigger (07-utilities.css silently overriding 04-nav.css). */ --safe-b: env(safe-area-inset-bottom, 0px); --cta-bar-h: 0px; /* .mobile-sticky-cta is display:none above 900px */ --fab-gap: 12px; --fab-size: 56px; } /* Height of .mobile-sticky-cta, measured in a browser at 360-900px rather than derived on paper — the arithmetic version came out 10px short, which left the floating buttons with about a pixel of clearance. 04-nav.css keeps the bar's button on one line below 400px so this number cannot be invalidated by the label wrapping. */ @media (max-width: 900px) { :root { --cta-bar-h: 81px; } } /* ========================================================================== Breakpoint scale — READ BEFORE ADDING A MEDIA QUERY Custom properties are illegal in a media prelude and there is no build step, so this is a convention enforced by review, not a token you can reference. 1100px xl — 5-across layouts give up (the process timeline) 1024px lg — hero splits into two columns. Pairs with min-width:1025px. 900px md — nav becomes the drawer, .mobile-sticky-cta appears, two-column blocks become one. The main phone/tablet line. 768px cmp — component density only: data tables, 2-up card grids. Not a layout tier; do not put layout changes here. 640px sm — one column everywhere, actions go full width, oversized section padding is cut back. 400px xs — the tightest real phones (360-390px). Trims gutters and floating-button geometry. Nothing targeted this before. LEGACY, do not add new rules at these: 992, 600, 560, 480. ========================================================================== */