/* ========================================================================== Design tokens. Single source of truth for colour, type and metrics. Phase 2 (Cinqo rebrand) should be mostly an edit of THIS file plus content. Values read from the live Elementor kit on the reference site. ========================================================================== */ :root { /* --- Colour ---------------------------------------------------------- */ --c-primary: #ffffff; --c-secondary: #1b1b1b; --c-text: #f5f5f4; /* THE FOUR BRAND COLOURS ARE CINQO'S OWN AS OF 2026-09-07, phase 4 unit 6. They were the reference's Elementor kit values; they are now derived from the REAL LOGO, sampled off `new-cinqo-logo.png` (moved 2026-09-10 to `docs/sources/`, out of the shipped tree) and `cinqo-c-logo.webp`. The mark is a TEAL-TO-PURPLE gradient, not the reference's magenta: #006080 -> #007898 teal (44% of the opaque pixels) running into #583890 -> #504890 purple. So the purple is BLUER and the teal is a real brand colour rather than a link tint borrowed from nowhere. EACH VALUE TAKES THE LOGO'S HUE AND SATURATION AND KEEPS THE PREVIOUS CONTRAST RATIO ON BLACK, solved rather than eyeballed. That is why the logo's own #583890 does not appear here literally: at 2.38:1 on black it is darker than the accent needs to be, and dropping to it would have made every icon stroke and button muddier than the design was drawn for. accent #7d3ea3 -> #6c44b0 3.09:1 on black, unchanged accent-alt #8224e3 -> #733ecf 3.32:1 (was 3.31) dropdown-bg #500a7a -> #3e2171 1.66:1 (was 1.67) link #22d3f0 -> #2ad1ff 11.66:1 (was 11.64) `portsec` DOES COMPARE COLOUR. `secmap.js` records a `col` property alongside the box, which is easy to miss when skimming it, and this edit lit up 19 differences across hero, stats, services, intro and how-it-works before the baseline was moved with it. **`_reference` ROUND 17** is the same four swaps in `_reference/assets/css/tokens.css`. Geometry moved 0.0px, as expected -- colour changes no box -- but "no gate can see it" was WRONG and the gate is what proved it. `img/bg-gradient.jpg` IS CINQO'S, and the note that used to sit here saying otherwise was stale. It was the reference's magenta raster (peak ~#5e1984, hue 283); it was regenerated during unit 6 and measures hue 228. The body glow on every page is Cinqo's own, so the palette is complete. THE TEAL-LED VARIANT IS CLOSED AND NOT ADOPTED, 2026-09-09. It was parked on 2026-09-07 pending that tile, and the user has now said plainly that they are happy with the colours as they stand and left the call here. It is declined, on four grounds: 1. The only real test of a palette is someone looking at it, and the person whose brand it is has looked and is satisfied. 2. The condition it was parked on is MET, so this is a decision made in the right light rather than another deferral. The tile is no longer magenta, the two-schemes-fighting objection is void, and the answer having seen it properly is still the purple-led scheme. 3. It buys nothing a visitor can perceive. Both variants are derived from the same real logo, so this was never a "still the competitor's" problem, only a preference between two honest readings of one mark. 4. It is the most expensive edit left in the repo: 73 `--c-accent` uses across every page, plus `_reference` ROUND 18, plus re-running the colour half of `portsec` on the whole build, days before launch. The values are kept so nobody has to re-derive them if it is ever reopened. B is the one to take: A holds the purple's exact 3.09:1 on black and still reads muddy, because teal is duller than purple at equal luminance. `--c-accent-alt` and `--c-link` are unchanged in both. --c-accent #1793b4 --c-dropdown-bg #1d4463 ("B", lifted) --c-accent #0c637b --c-dropdown-bg #183552 ("A", contrast-matched) DO NOT RE-RAISE IT. Reopening costs `_reference` ROUND 18 because `portsec` compares colour, and it needs the user to ask. */ --c-accent: #6c44b0; --c-accent-alt: #733ecf; --c-black: #000000; --c-white: #ffffff; --c-divider: rgba(255, 255, 255, .1); --c-divider-dark: rgba(247, 251, 250, .1); --c-dropdown-bg: #3e2171; /* deep purple behind the services menu */ --c-link: #2ad1ff; /* the logo's teal, used for inline links */ --c-body-bg: var(--c-black); /* --- Type families --------------------------------------------------- */ --ff-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --ff-display: "Puritan", "Plus Jakarta Sans", system-ui, sans-serif; --ff-display-alt: "Radio Canada Big", "Plus Jakarta Sans", system-ui, sans-serif; /* --- Type scale ------------------------------------------------------ */ --fs-body: 16px; --lh-body: 1.7; --fs-lead: 16px; --lh-lead: 1.8; --fs-head: 29px; /* section heading band */ --fs-display: 50px; /* large section titles */ --fs-about-title: 31px; --fs-block-title: 22px; --fs-h-primary: 50px; --fw-h-primary: 300; --lh-h-primary: 1.2; --fs-h-secondary: 22px; --fw-h-secondary: 700; --lh-h-secondary: 1.2; --fs-accent: 16px; --fw-accent: 700; --lh-accent: 1.4; /* Eyebrow / `.section-title`: small, heavily tracked, asterisk-marked. */ --fs-eyebrow: 14px; --fw-eyebrow: 600; --lh-eyebrow: 1.2; --ls-eyebrow: 2.8px; --eyebrow-indent: 24px; /* 15 x 24, not 16 square. The reference renders the SAME asterisk file (identical viewBox and path) at 15x24 with `object-fit: fill`, so it is deliberately squashed narrow and tall. Ours used a 16x16 box with `mask-size: cover`, which crops instead of squashing and reads as a different, rounder mark. The eyebrow's ::before is absolutely positioned and vertically centred, so this is visual only. */ --eyebrow-mark-w: 15px; --eyebrow-mark-h: 24px; /* Client logo marquees (section 12). The reference travels 740.4px in 20s, which is 37.02 px/s. A 12-card group plus its gaps travels 3110px, so 84s holds exactly that speed while making the loop genuinely seamless. */ --logo-card-w: 240px; --logo-card-h: 100px; --logo-gap: 20px; --logo-dur: 62.94s; /* Social pills (section 14) */ --social-icon: 80px; --social-link: 36px; /* Service cards (section 10) */ --card-radius: 30px; --card-pad: 40px; --card-gap: 30px; --card-icon: 60px; --card-link: 34px; /* Font Awesome insets its Instagram glyph inside the em box, so it renders at .8775 of the height the letterform marks reach. Both social rows carry that ratio rather than two hard-coded pixel heights, so the exception stays legible as what it is. */ --social-inset: .8775; /* --- Layout ---------------------------------------------------------- */ /* The about column's left padding. The timeline rule sits on that column's left edge and the dots are centred on the rule, so the dot offset is a function of this number rather than a constant. Stated once so the two cannot drift apart when the breakpoints change it. */ --about-main-pad: 50px; --container: 1300px; --gutter: 10px; /* --- Showreel -------------------------------------------------------- */ /* The resting inset of the full-bleed showreel, and the travel its scroll scrub eats away. DELIBERATELY NOT DERIVED FROM `--container`: that is a flat 1300px, so a container-based rest state would travel 70px a side at 1440 and only 10px at 1024, where the move would read as a glitch rather than an effect. A clamped gutter reproduces humaan's own near-constant 40 to 53px travel at every desktop width, and lands the resting box at 1347.8 against their measured 1347.2. */ --showreel-gutter: clamp(30px, 3.2vw, 56px); --showreel-radius: 30px; /* --- Header ---------------------------------------------------------- */ --header-h: 106px; --header-pad-y: 15px; --header-brand-w: 197px; --header-nav-w: 869px; --header-social-w: 208px; --header-logo-w: 177px; --header-logo-h: 50px; --nav-link-fs: 16px; --nav-link-fw: 600; --nav-link-lh: 1.6; --nav-link-pad: 15px; --nav-caret-size: 18px; --nav-caret-stroke: 1.2; --nav-caret-gap: 8px; /* --- Hero ------------------------------------------------------------ */ --hero-h: 703px; --hero-content-x: 200px; /* Elementor applies this as a translateX */ --hero-content-w: 1829px; --hero-h1-fs: 101px; --hero-h1-lh: 1.2; --hero-h1-ls: -2px; --hero-h2-fs: 90px; --hero-h2-lh: 1.2; --hero-fancy-fs: 27px; --hero-fancy-lh: 1.3; /* Offset drop shadow that gives both display headlines their layered look */ --hero-h1-shadow: 3px 2px 0 var(--c-accent); --hero-h2-shadow: 6px -1px 0 var(--c-accent); --hero-circle-size: 105px; /* --- Buttons --------------------------------------------------------- */ --btn-pad: 14px 25px; --btn-radius: 100px; --btn-icon-size: 50px; /* --- Magic cursor ---------------------------------------------------- */ --cursor-size: 10px; --cursor-size-hover: 34px; --cursor-ease: .2; /* read by main.js, not by CSS */ /* --- WhatsApp widget (section 29) ------------------------------------ Two palettes on purpose. The launcher and the panel heading take the site accent, which phase 2 swaps for Cinqo cyan; the agent row keeps WhatsApp's own green, because that is what identifies the service the row actually opens. The reference makes the same split. */ --wa-offset: 30px; /* from the viewport's right and bottom edges */ --wa-launcher: 56px; --wa-panel-w: 351px; --wa-panel-lift: 102px; /* panel's bottom, clearing the launcher */ --wa-panel-slide: 50px; /* how far it travels while opening */ --wa-accent: var(--c-accent-alt); --wa-brand: #2db742; /* WhatsApp green, agent row only */ --wa-panel-bg: #ffffff; --wa-head-fg: #d9ebc6; --wa-label-bg: #f5f7f9; --wa-label-fg: #43474e; --wa-notice-fg: #a5abb7; --wa-name-fg: #363c47; --wa-role-fg: #989b9f; --wa-status-fg: #f5a623; --wa-row-bg: #f5f7f9; --wa-row-bg-hov: #ffffff; --wa-row-off-bg: #ebedf0; --wa-row-off-fg: #595b60; --wa-row-off-rule:#c0c5ca; /* --- Motion ---------------------------------------------------------- */ --ease: cubic-bezier(.25, .1, .25, 1); --ease-in-out: cubic-bezier(.42, 0, .58, 1); /* reference button easing */ --dur-fast: .25s; --dur: .4s; --spin-dur: 30s; /* 35.3s, not 40s. The track travels one group width (2723.7px at desktop) per cycle, so the duration IS the speed: 2723.7 / 35.29 = 77.2 px/s, which is what the reference runs at, measured live off its own ticker. At 40s it was 68px/s, about 12% slow. The number is tied to the group width, so it has to be recomputed if .ticker__sep or the label set changes. RECOMPUTED 2026-09-07, WHEN THE LABEL SET BECAME CINQO'S. That is the edit this comment warned about. The track went 5447.4 -> 5334.0 because two of the reference's service names came out, so at the old 35.3s the band slowed to 76.4 px/s measured. Holding the same 77.16 px/s: 5334.0 / 2 / 77.16 = 34.57s. The narrow value in `responsive.css` was recomputed against its OWN measured track, not scaled from this one. RECOMPUTED 2026-09-08, WHEN LOCAL SEO BECAME SOCIAL MEDIA MANAGEMENT. Same warning firing a second time in two days. The label went 9 chars to 23, so the track went 5334.0 -> 5649.1 and at the old 34.57s the band ran 81.7 px/s measured, about 6% fast. Holding the same 77.16 px/s: 5649.1 / 2 / 77.16 = 36.61s. The narrow value in `responsive.css` was again recomputed against its OWN measured track. */ --ticker-dur: 36.61s; --ticker-fs: 20px; }