/*============================================================================== Digi Kydo — LOCKED DESIGN TOKENS (mockup mirror) This file is the plain-CSS twin of the `@theme` block in resources/css/app.css, so the static mockups render without a Tailwind build. If a value changes, change it in BOTH files. laravel-design owns both. Every value was measured from https://digikydo.com on 2026-07-28. Load order matters: this file must come AFTER theme.css / core.css / main.css. !! LOAD ORDER IS NOW LOAD-BEARING FOR FONTS. theme.css:94-95 still declares `--primary-font: lato` and `--secondary-font: proxima-nova` — those are the reproduced live-site values and both families are GONE (Typekit removed 2026-07-28). This file overrides them. If tokens.css ever fails to load or is moved before theme.css, every heading falls back to a system sans. Do not "clean up" by deleting the overrides below; fix theme.css instead, or keep the order. ==============================================================================*/ :root { /* ---- Colour (source: theme.css :root, verified via getComputedStyle) ---- */ --primary-color: #509bbc; --primary-15-color: #07beb826; /* stale ramp from the stock template */ --primary-25-color: #07beb840; --primary-50-color: #07beb880; --primary-75-color: #07beb8bf; /* ---- SECONDARY = THE LOGO ORANGE (rebrand 2026-07-29) ------------------ Owner decision: the site's green accent is replaced everywhere by the orange in assets/img/kydo-logo.webp. The logo mark is navy #172b56 plus a gradient #ED220B -> #F13311 -> #F95E1A. #F95E1A is the tone used as the brand surface because it is the only stop of the three that carries INK text at AA (5.48:1); #ED220B carries ink at only 3.99:1. The green rule carries over UNCHANGED IN SHAPE: #F95E1A is 3.16:1 against white in both directions. So it is a SURFACE, a keyline and an on-dark accent. Orange TEXT on a light surface is --secondary-deep or --secondary-deepest, never this. */ --secondary-color: #f95e1a; --secondary-hover-color: #fb7538; /* lighter, so ink goes 5.48 -> 6.35 */ --secondary-15-color: #f95e1a26; /* was a stale purple ramp; repointed */ --secondary-25-color: #f95e1a40; --secondary-50-color: #f95e1a80; --secondary-75-color: #f95e1abf; /* The logo's other colour. Available deliberately (deep navy is the natural partner for this orange) but NOT introduced as a third accent — it is used only where a near-black brand tone reads better than pure ink. */ --navy-color: #172b56; /* carries white at 13.85:1 */ --tertiary-color: #ff1791; /* legacy. Unused. */ --accent-color: #f95e1a; --success-color: #007a4d; --info-color: #023e8a; --warning-color: #ff9800; --danger-color: #e63946; --white-color: #fff; --white-10-color: rgba(255, 255, 255, 0.1); --white-25-color: rgba(255, 255, 255, 0.25); --white-50-color: rgba(255, 255, 255, 0.5); --white-65-color: rgba(255, 255, 255, 0.65); --white-75-color: rgba(255, 255, 255, 0.75); --white-85-color: rgba(255, 255, 255, 0.85); --gray-color: #8f93a5; --gray-10-color: rgba(143, 147, 165, 0.1); --gray-25-color: rgba(143, 147, 165, 0.25); --gray-50-color: rgba(143, 147, 165, 0.5); --gray-65-color: rgba(143, 147, 165, 0.65); --gray-75-color: rgba(143, 147, 165, 0.75); --gray-85-color: rgba(143, 147, 165, 0.85); --black-color: #1a1a20; --black-10-color: rgba(26, 26, 32, 0.1); --black-25-color: rgba(26, 26, 32, 0.25); --black-50-color: rgba(26, 26, 32, 0.5); --black-65-color: rgba(26, 26, 32, 0.65); --black-75-color: rgba(26, 26, 32, 0.75); --black-85-color: rgba(26, 26, 32, 0.85); --link-legacy-color: #0d6efd; /* Bootstrap default leaking through .content a */ /* ---- ACCESSIBLE TEXT + SURFACE RAMP (added 2026-07-29) ----------------- Reason: --gray-color #8f93a5 measures 3.05:1 on #fff. That is a WCAG AA FAILURE for body copy (needs 4.5:1) and it was the site's default body colour. It is NOT deleted — .gray/.gray-75 etc. are used decoratively for rules, borders and overlays all over main.css, and changing it there would move pixels on pages nobody asked me to touch. Instead body copy now reads --text-body-color, and editorial.css repoints the text uses. Every ratio below was computed against the WCAG 2.x relative-luminance formula, not eyeballed. Full matrix in the handoff. ON #fff / #f6f7f9 / #fdf1ea / #e9eff2 (all four light surfaces): --black-color 17.32 .. 14.92 headings --text-body-color 6.86 .. 5.91 body copy --primary-deep 6.89 .. 5.94 links, eyebrows, icons --secondary-deep 5.36 .. 4.83 links, eyebrows, icons (AA, tight) --secondary-deepest 7.11 .. 6.33 same, with headroom ON --black-color #1a1a20: #fff 17.32 body copy --secondary-color 5.48 accents --primary-color 5.57 accents HARD RULE, measured: --secondary-color #f95e1a is 3.16:1 against white. Never white-on-orange and never bright-orange-on-white for text. An orange band carries INK text (5.48:1); orange text uses --secondary-deep, or --secondary-deepest on a tinted surface where 4.83:1 is too close to the line to be comfortable. */ --text-body-color: #565a69; /* 6.86:1 on white — replaces --gray-color for prose */ --primary-deep: #2d6076; /* #509bbc darkened; carries white at 6.89:1 */ --secondary-deep: #c4380f; /* #f95e1a darkened; carries white at 5.36:1 */ --secondary-deepest: #a32e0c; /* more headroom; carries white at 7.11:1 */ --tertiary-deep: #a30056; /* legacy, unused */ /* Tinted section bands. Ink/body/deep-accent text only — see matrix above. */ --surface-neutral: #f6f7f9; --surface-primary: #e9eff2; /* blue tint */ --surface-secondary: #fdf1ea; /* orange tint (was the green #e9f1ed) */ --surface-ink: #1a1a20; --border-subtle: #e2e5ea; /* ---- Typefaces ---------------------------------------------------------- Both families are self-hosted from assets/fonts/ with font-display:swap. ZERO external font requests. Adobe Typekit kit `zeh8dub` is GONE (owner decision 2026-07-28: no Proxima Nova licence purchase). --primary-font (body copy) is Lato and is NOT swappable — it is the live site's own family and it is free. --secondary-font (display) IS swappable and is NO LONGER DECLARED HERE. It, plus the whole per-type-scale tuning table that goes with it (--weight-display-*, --tracking-display-*, --weight-article-*, --tracking-article-*, --weight-footer-title, --weight-nav, and the family's size-adjust), now lives in the family file: assets/fonts/montserrat.css <- ACTIVE assets/fonts/hanken-grotesk.css selected by the single @import in assets/fonts/display-font.css, which is linked immediately after this file. See html/README.md § Display font swap. Keeping the family name and its tuning numbers in one file is deliberate: the two are only valid together, and a bare 800/700/100 with either family looks wrong. */ --primary-font: "Lato", sans-serif; /* ---- Type scale (theme.css .text-style-*, re-measured) ---------------- */ --text-display-1: 6.2rem; /* 99.2px w800 */ --text-display-2: 5.2rem; /* 83.2px w800 */ --text-display-3: 4.2rem; /* 67.2px w800 */ --text-display-4: 4.2rem; /* 67.2px w100 */ --text-display-5: 3.2rem; /* 51.2px w800 */ --text-display-6: 3.2rem; /* 51.2px w100 */ --text-display-7: 2.2rem; /* 35.2px w700 */ --text-display-8: 2.2rem; /* 35.2px w100 */ --text-display-9: 1.75rem; /* 28px w700 */ --text-display-10: 1.75rem; /* 28px w100 */ --text-display-11: 1.2rem; /* 19.2px w700 */ --text-display-12: 1.2rem; /* 19.2px w400 */ /* ---- Weight axis map + per-step tracking: SEE THE FAMILY FILE --------- --weight-display-1..12, --weight-article-1..3, --weight-footer-title, --weight-nav, --tracking-display-1..12, --tracking-article-1..3, --tracking-footer-title and --tracking-nav are all defined in the ACTIVE display-family file (assets/fonts/montserrat.css), together with that family's size-adjust. They are consumed by overrides.css section 8. They are NOT defined here because they are only meaningful for one specific family — moving them here would let the family and its tuning drift apart. Do not re-add them to this file. */ --text-article-1: 1.75rem; /* 28px w700 (was .content h3) */ --text-article-2: 1.25rem; /* 20px w700 (was .content h5) */ --text-article-3: 1rem; /* 16px w700 (was .content h6) */ --text-body: 1rem; /* 16px w400 / 1.5 */ --text-small: 0.85rem; /* 13.6px */ --text-footer-title: 1.1rem;/* 17.6px w600 */ --leading-heading: 1.2; --leading-body: 1.5; /* ---- Spacing rhythm (core.css .pt-n/.pb-n; halved below 1200px) ------- The existing --space-1..5 are 16/32/48/64/80px, already an 8px multiple. The three added below complete the 8px scale downward and give the new editorial sections a section-spacing tier above 80px. */ --space-05: 0.5rem; /* 8px */ --space-15: 1.5rem; /* 24px */ --space-6: 6rem; /* 96px — section band padding at >=992px */ --space-1: 1rem; --space-2: 2rem; --space-3: 3rem; --space-4: 4rem; --space-5: 5rem; --space-intro-gap: 3.5rem; /* .mb-35 */ --space-heading-gap: 1.5rem; /* h1-h6 margin-bottom */ --space-navbar-y: 25px; --space-navbar-x: 35px; /* ---- Layout ----------------------------------------------------------- */ --container-max: 1140px; --container-gutter: 12px; --navbar-height: 118px; --menu-toggle-size: 68px; --logo-width: 112px; --logo-height: 60px; /* ---- Radii ------------------------------------------------------------ */ --radius-none: 0px; --radius-sm: 4px; /* .badge */ --radius-md: 6px; /* .rounded */ --radius-full: 9999px; /* ---- Shadows (core.css, verbatim) ------------------------------------- */ --shadow-small: 0 5px 10px 0 rgba(0, 0, 0, 0.15); --shadow-default: 0 20px 50px 0 rgba(0, 0, 0, 0.15); /* ---- Motion ----------------------------------------------------------- */ --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 400ms; --duration-underline: 500ms; --duration-autoplay: 10000ms; --ease-navbar: cubic-bezier(0.365, 0.85, 0.45, 1); --ease-emphasis: cubic-bezier(0, 0, 0, 1); }