/* ============================================================================ COREX — Design Tokens Implements PRD §2B (Brand & Design System) verbatim. Shared by the public site (style.css) and the admin panel (admin.css) so the client never switches between two visual worlds (§2B.8). Colour values are sampled from the client-supplied logo and the three packaging mockups — do not "improve" them, they match physical product. ========================================================================= */ :root { /* -------------------------------------------------------------------- §2B.1 Core brand colours -------------------------------------------------------------------- */ --corex-red: #D1060A; /* primary brand red — buttons, accents */ --corex-red-bright: #F80106; /* gradient highlight (top of logo red) */ --corex-red-deep: #A0060A; /* gradient shadow, hover states */ --corex-black: #000000; /* primary background */ --corex-silver-light: #FFFFFF; /* metallic wordmark highlight */ --corex-silver: #DCDCDC; /* body text on dark */ --corex-silver-mid: #BCBBBB; /* metallic wordmark shadow, muted text */ /* Metallic gradients — the logo's defining visual trait. Reproduce, don't flatten. (§2B.1) */ --grad-red: linear-gradient(160deg, #F80106 0%, #D1060A 45%, #A0060A 100%); --grad-silver: linear-gradient(160deg, #FFFFFF 0%, #DCDCDC 45%, #BCBBBB 100%); /* Sheen sweep used on primary CTAs (§2C.3 item 6) */ --grad-sheen: linear-gradient( 105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 62%, rgba(255,255,255,0) 100% ); /* -------------------------------------------------------------------- §2B.2 Surface & support colours -------------------------------------------------------------------- */ --surface-0: #000000; /* page background */ --surface-1: #0A0A0C; /* section alternation */ --surface-2: #141417; /* cards, panels */ --surface-3: #1E1E22; /* elevated cards, modals */ --border: #2A2A2F; /* hairlines, inputs */ --border-soft: #1C1C20; /* quieter divider */ --text-muted: #8A8A90; /* captions, labels */ /* Text roles. --text-muted on --surface-0 measures 5.5:1 — passes AA. Do not go lighter on the background or darker on the text. (§2B.8) */ --text: #DCDCDC; --text-strong: #FFFFFF; /* -------------------------------------------------------------------- §2B.3 Product accent colours (sampled from packaging) -------------------------------------------------------------------- */ --acc-ceramic: #D1060A; /* red hex pattern */ --acc-graphene: #1B3244; /* deep blue — BACKGROUNDS ONLY */ --acc-graphene-lt: #2E6BA8; /* readable blue for text/borders */ --acc-borophene: #998AC3; /* lavender microfibre / carbon */ /* -------------------------------------------------------------------- Text-safe accent variants -------------------------------------------------------------------- The PRD requires every text/background pair to clear 4.5:1 (§2B.8, §8). Measured against --surface-2 (#141417), the brand values do not: --corex-red #D1060A 3.28:1 FAIL --acc-graphene-lt #2E6BA8 3.31:1 FAIL --acc-borophene #998AC3 5.93:1 pass §2B.3 already establishes the pattern — it introduced --acc-graphene-lt because #1B3244 was unreadable on black. These tokens extend that same reasoning one step further, for SMALL TEXT specifically. Use: --*-text → any text under 24px (eyebrows, labels, links, chips) brand value → borders, fills, rules, icons, and display text 24px+, which only need 3:1 as graphical objects / large text This keeps the brand red exactly as specified everywhere it is seen as a colour, and only brightens it where it has to be read as a word. -------------------------------------------------------------------- */ --corex-red-text: #FF4548; /* 5.43:1 on surface-2 */ --acc-ceramic-text: #FF4548; /* 5.43:1 */ --acc-graphene-text: #5B9BD5; /* 6.21:1 */ --acc-borophene-text: #B0A2DC; /* 7.92:1 */ /* #1B3244 is unreadable as a border or label on black. Use --acc-graphene-lt for text, badges and outlines. (§2B.3) */ /* -------------------------------------------------------------------- §2B.4 Status colours (admin panel & verification) Never rely on colour alone — always pair with a text label and icon. -------------------------------------------------------------------- */ --status-active: #1DB954; /* 7.10:1 on surface-2 — pass */ --status-expiring: #E8A317; /* 8.48:1 — pass */ --status-expired: #8A8A90; /* 5.36:1 — pass. Grey, not red: */ /* expiry is not an error (§2B.4) */ /* Brand red measures 3.28:1 and cannot carry a 14px badge label. The badge border and background keep the brand value; only the text uses the brighter variant. */ --status-cancelled: #D1060A; --status-cancelled-text: #FF4548; /* 5.43:1 — pass */ --status-active-bg: rgba( 29, 185, 84, .12); --status-expiring-bg: rgba(232, 163, 23, .12); --status-expired-bg: rgba(138, 138, 144, .12); --status-cancelled-bg: rgba(209, 6, 10, .12); /* -------------------------------------------------------------------- §2B.5 Typography Display face matches the wordmark's wide, squared-off techno character without licensing the original. -------------------------------------------------------------------- */ --font-display: 'Rajdhani', 'Saira Condensed', 'Arial Narrow', sans-serif; --font-body: 'Inter', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Scale: 14 / 16 / 18 / 22 / 28 / 36 / 48 / 64 (§2B.5) */ --fs-xs: 0.875rem; /* 14 */ --fs-sm: 1rem; /* 16 */ --fs-md: 1.125rem; /* 18 */ --fs-lg: 1.375rem; /* 22 */ --fs-xl: 1.75rem; /* 28 */ --fs-2xl: 2.25rem; /* 36 */ --fs-3xl: 3rem; /* 48 */ --fs-4xl: 4rem; /* 64 */ --lh-heading: 1.15; --lh-body: 1.6; --ls-heading: 0.03em; /* within the 0.02–0.06em band */ --ls-eyebrow: 0.18em; /* -------------------------------------------------------------------- Spacing — 4px base -------------------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Vertical rhythm between page sections — generous space is the main signal of premium (§2C.2) */ --section-y: clamp(4rem, 9vw, 8rem); /* -------------------------------------------------------------------- Shape — hard edges over soft cards (§2C.2) Small radii only. The rounded soft-shadow card look reads SaaS, not automotive. -------------------------------------------------------------------- */ --radius-sm: 2px; --radius: 3px; --radius-md: 4px; /* The logo's chamfered corner, applied sparingly via clip-path (§2B.6) */ --chamfer: 10px; --chamfer-sm: 6px; /* -------------------------------------------------------------------- Elevation — depth, not glow soup -------------------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(0,0,0,.6); --shadow-2: 0 8px 24px rgba(0,0,0,.55); --shadow-3: 0 18px 48px rgba(0,0,0,.65); /* -------------------------------------------------------------------- §2C.3 Motion tokens — mirrored in main.js EASE/DUR. Never elastic, bounce or back easing anywhere on this site. -------------------------------------------------------------------- */ /* Long-tail deceleration curves. These decelerate for most of their duration, which is what reads as "smooth" — a curve that stops abruptly reads as a snap even at the same duration. All are pure ease-outs; no overshoot anywhere, per the §2C.3 prohibition on back/elastic/bounce. */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ≈ power3.out */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* ≈ power2.inOut */ --ease-soft: cubic-bezier(0.33, 1, 0.68, 1); /* ≈ power2.out */ /* Hover timings are deliberately slower than the 0.25s in §2C.3. At 0.25s a colour or lift change is perceived as an instant switch; 0.35–0.45s is still immediate to the user but reads as a considered movement. Mirrors the DUR object in main.js. */ --dur-micro: 0.3s; --dur-hover: 0.4s; --dur-base: 0.9s; --dur-slow: 1.2s; /* -------------------------------------------------------------------- Layout -------------------------------------------------------------------- */ /* .container uses Bootstrap 5's stepped max-widths, declared per breakpoint in style.css — 540 / 720 / 960 / 1140 / 1320. There is no single --container value any more. --container-wide is the header and the admin shell, which want more room than the reading column. --container-pad is OURS, not Bootstrap's 12px: a black, image-led layout needs the content off the edge. */ --container-wide: 1440px; --container-pad: clamp(1.25rem, 4vw, 3rem); --header-h: 84px; --header-h-scrolled: 64px; --z-header: 100; --z-menu: 200; --z-modal: 300; --z-toast: 400; } /* ============================================================================ §2B.6 Hexagon mesh motif Drawn from the packaging. Texture, not pattern — keep opacity 5–8%. It should be felt, not seen. (§2C.2) Encoded as a data-URI SVG so it costs no extra HTTP request. ========================================================================= */ .hex-mesh { position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0L56 16.17v32.33L28 64.67 0 48.5V16.17z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Cpath d='M28 64.67L56 80.83v32.34L28 129.33 0 113.17V80.83z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3C/svg%3E"); background-size: 56px 97px; opacity: 0.06; } /* Red-tinted variant for the hero, echoing the Ceramic box artwork */ .hex-mesh--red { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0L56 16.17v32.33L28 64.67 0 48.5V16.17z' fill='none' stroke='%23D1060A' stroke-width='1.2'/%3E%3Cpath d='M28 64.67L56 80.83v32.34L28 129.33 0 113.17V80.83z' fill='none' stroke='%23D1060A' stroke-width='1.2'/%3E%3C/svg%3E"); opacity: 0.10; } /* ============================================================================ §2C.3 Reduced motion Also short-circuited in JS: GSAP snaps to final state and ScrollTrigger is never registered. ========================================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }