/* ========================================================================== FUSION CNC — DESIGN TOKENS The single source of truth for colour, type, space and motion. Nothing below this file should hardcode a colour or a pixel scale. COLOUR PROVENANCE --brand is set to #ec691f by client direction. For reference, sampling the official images/logo.png pixel-by-pixel gives #EB6E35 (1847px, the dominant orange in the mark) and #7B7877 (233px, the wordmark grey). The two oranges are within ~2% of each other, so either reads as Fusion Orange; the client's value is authoritative here. Per the brand style guide this is a redesign, not a rebrand: orange is the ONLY accent colour, and blue is never used as a brand colour. IF --brand CHANGES, update --brand-rgb below to match. Every tinted glow, grade and border on the site derives from that channel triplet, so the two must stay in step or the glow will be a different hue to the button it surrounds. ========================================================================== */ :root{ /* --- Brand ------------------------------------------------------------ Rebrand per client direction, 2026: matched to the reference site chaosheng-cnc.com, whose own stylesheet defines --main-bg-color:#d7340b (used across its active/selected states) and whose product photography confirms it as the physical machine colour, not an incidental accent. Three red tokens exist for a reason — see ACCESSIBILITY note below. Use --brand for fills and graphics, --brand-ink for text on light. */ --brand: #d7340b; /* fills, rules, icons — the only accent */ --brand-rgb: 215, 52, 11; /* same colour as channels, for rgba() tints */ --brand-hover: #b32a09; /* button hover — darkened ~15% */ --brand-ink: #d7340b; /* red text on white — see note below */ --brand-wash: #FBEAE5; /* faintest red tint for surfaces */ --brand-logo-grey: #7B7877; /* sampled from logo.png wordmark */ /* Brightened red for small/persistent TEXT on the --ink dark ground only (eyebrows, numerals, link text in dark-canvas sections). --brand itself only measures 3.4:1 on --ink — below 4.5:1 AA for normal text — where the old orange passed at 6.13:1. Borders, icons and large text can stay on --brand (3:1 non-text / large-text threshold still clears); only small persistent text needs this brighter value. Measures 6.1:1 on --ink. */ --brand-bright: #FF5A3C; /* --- Neutrals --------------------------------------------------------- */ --ink: #111111; /* headings, dark surfaces */ --ink-2: #222222; /* body text */ --ink-3: #5A5A5A; /* secondary text — 7.0:1 on white */ --ink-4: #767676; /* muted / captions — 4.6:1 on white, AA floor */ --line: #E2E2E2; /* hairlines and dividers */ --line-strong: #CFCFCF; --surface: #FFFFFF; /* page background */ --surface-2: #F5F5F5; /* section contrast panel */ --surface-3: #ECECEC; /* WhatsApp — darkened from the platform #25D366 so white text clears AA (5.43:1). Kept as its own token so it is never mistaken for a brand hue. */ --wa: #147A4B; --wa-hover: #0F5C39; --on-dark: #FFFFFF; --on-dark-2: rgba(255,255,255,0.72); --on-dark-3: rgba(255,255,255,0.52); --line-on-dark: rgba(255,255,255,0.16); /* ACCESSIBILITY — measured against #d7340b, not assumed. --brand-ink on white ..... 4.78:1 PASSES AA for normal text. white on --brand ......... 4.78:1 PASSES AA — .btn--primary text, contact-card icons on dark, etc. --brand on --ink (dark) .. 3.4:1 Large text / UI only, not body — same role as the old orange eyebrow use, still fine at that size. Unlike the previous orange (#ec691f, 3.18:1 on white), this red clears AA for normal-size text on a light ground outright, so --brand-ink can equal --brand with no separate darkened value needed. It is a WORSE choice as text on the dark --ink ground, since red and near-black are both low-luminance — anywhere the brand colour sits on --ink as small text (eyebrows, the range rail numerals), keep it large/bold or pair it with a lighter neutral rather than relying on the red alone. --ink (near-black text) on --brand background is NOT used anywhere — .btn--primary and similar fills use white text (--on-dark) instead, since dark-on-dark-red fails contrast outright. */ /* --- Type ------------------------------------------------------------- Manrope for display, Inter for body — per the brand style guide. */ --font-display: 'Manrope', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Consolas', monospace; /* Fluid scale. clamp() means no layout-shifting breakpoint jumps and the spec tables stay readable at 360px without a separate mobile scale. */ --t-display: clamp(2.75rem, 1.6rem + 5.1vw, 5.75rem); --t-h1: clamp(2.25rem, 1.5rem + 3.3vw, 4rem); --t-h2: clamp(1.875rem, 1.35rem + 2.3vw, 3rem); --t-h3: clamp(1.375rem, 1.15rem + 0.95vw, 1.875rem); --t-h4: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); --t-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); --t-body: 1rem; --t-sm: 0.9375rem; --t-xs: 0.8125rem; --t-eyebrow: 0.75rem; --lh-tight: 1.04; --lh-snug: 1.18; --lh-body: 1.65; --tracking-eyebrow: 0.16em; --tracking-display: -0.03em; --tracking-tight: -0.02em; /* --- Space — 4px base -------------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-7: 1.75rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; /* Section rhythm — generous whitespace is a brand-guide requirement. */ --section-y: clamp(4.5rem, 3rem + 7vw, 9rem); /* --- Layout ------------------------------------------------------------ */ --container: 1320px; --container-nar: 920px; --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem); --header-h: 88px; --header-h-sm: 68px; /* --- Radius ------------------------------------------------------------ Deliberately near-square. The brand guide forbids "rounded soft UI" and "playful button treatments" — 2px reads as machined, not startup. */ --r-sm: 2px; --r: 3px; --r-lg: 4px; /* --- Elevation --------------------------------------------------------- Shadows are tight and neutral. No coloured glows, no glassmorphism — the brand guide bans decorative translucent layers outright. */ --shadow-sm: 0 1px 2px rgba(17,17,17,0.06); --shadow: 0 2px 8px rgba(17,17,17,0.07); --shadow-md: 0 10px 30px rgba(17,17,17,0.10); --shadow-lg: 0 24px 60px rgba(17,17,17,0.14); /* Brand glow — a warm, tinted elevation carried at REST as well as on hover, so primary actions read as lit rather than merely hovered. On the near-black sections a literal black shadow is invisible, so elevation there has to be made of light, not darkness. */ --glow: 0 12px 30px -12px rgba(var(--brand-rgb), 0.55); --glow-hover: 0 20px 44px -14px rgba(var(--brand-rgb), 0.78); --glow-soft: 0 18px 40px -22px rgba(var(--brand-rgb), 0.45); /* --- Motion ------------------------------------------------------------ */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* decelerate — reveals */ --ease-io: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric — toggles */ --dur-1: 160ms; --dur-2: 260ms; --dur-3: 420ms; --dur-4: 720ms; /* --- Z-index ----------------------------------------------------------- */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300; --z-float: 350; --z-modal: 400; } /* Honour the OS reduced-motion setting everywhere. Required by the brand guide's motion section and by WCAG 2.3.3. */ @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; } }