/* ========================================================================== 24K Studios — design tokens, v4 (2026-09-08). THE SINGLE SOURCE OF TRUTH. Nothing outside this file may declare a colour, a font size or a spacing value; the pre-commit hook enforces it. v4 is the locked palette from D28: ten neutrals, NO resting brand hue. The owner reviewed /services/ rendered in three complete palettes and chose the neutral system, so #7B6B9A, #6A5B8B, #5E5079, #E8E0F5 and #F0EBF8 are all retired. Every neutral here is a true grey (chroma under 6 of 255); the v3 palette put all thirteen tokens on the violet axis at hue 290-305, which is why the page ground, the borders and even the "silver" read purple and the owner called it girly. Three font files, down from seven. Six type sizes, down from twenty-one. The retired brand token NAMES are kept below as neutral aliases on purpose. Their consumers are removed in step 4 (the surfaces pass), and deleting the names now would break 21 declarations in components.css in the same commit that changes every colour, which is exactly the kind of compound change that is impossible to review. ========================================================================== */ @font-face{font-family:Satoshi;src:url(../fonts/satoshi-700.woff2)format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:Inter;src:url(../fonts/inter-400.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Inter;src:url(../fonts/inter-600.woff2)format('woff2');font-weight:600;font-style:normal;font-display:swap} :root{ /* ---- Kadence's palette, declared HERE so it lives in git ------------------ * Kadence generates ~40 rules from --global-palette1..9. Until 2026-09-08 the * kadence_global_palette option had never been set, so those rules used factory * defaults (a blue #2B6CB0, a navy #1A202C) and painted the site underneath this * theme. Kadence declares these on a bare :root too, so specificity ties and this * file wins on load order (enqueued 16th of 18, nothing follows it). No !important. * The database option is kept in sync as belt and braces; THIS is the source of * truth, because a database row is not diffable. * * Slot 1 feeds --global-palette-highlight and --global-palette-btn-bg, which drive * a{color} site-wide and every native WooCommerce button. It does NOT drive focus * rings: that was checked by setting it to red and watching nothing move. */ --global-palette1:#1C1C21; /* links, native button fill */ --global-palette2:#2E2E36; /* its hover */ --global-palette3:#1C1C21; /* darkest: headings, dark bands, the sub-menu panel */ --global-palette4:#2E2E36; --global-palette5:#5B5B62; /* muted text */ --global-palette6:#6E6E76; /* mid grey, the metal's dark stop */ --global-palette7:#E2E2E6; /* hairline */ --global-palette8:#F7F7F9; /* paper */ --global-palette9:#FFFFFF; --global-palette9rgb:255,255,255; /* Kadence emits this as a hard literal */ color-scheme:light; /* ---- the ten neutrals (D28). Contrast is against paper #F7F7F9 unless noted. */ --k24-ink:#1C1C21; /* 15.86:1 all text on light, the inverted band, the footer */ --k24-ink-2:#2E2E36; /* white on it 13.46:1 cards inside the inverted band */ --k24-muted:#5B5B62; /* 6.30:1 secondary prose, nav at rest */ --k24-border:#86868C; /* 3.38:1 THE ONLY interactive boundary. Inputs, ghost buttons. */ --k24-metal-dark:#6E6E76; /* 4.72:1 the dark stops of the metal rule */ --k24-hairline:#E2E2E6; /* decorative ONLY: table rows, the drawer divider. 1.21:1, so it must never bound a control. Twice in two commits it was reached for as a control border; the render gate caught both. Use --k24-border for anything clickable. */ --k24-silver-light:#EAEAEC; /* ink on it 13.85:1 step numerals, the deposit note */ --k24-paper:#F7F7F9; /* the default page ground */ /* The alternate section ground. #DADAE0 is chosen, not inherited: the previous value #EAEAEC * measured 1.123:1 against paper, and injecting it live and re-running the light-run detector * moved the number on exactly zero pages. A surface has to reach about 1.25:1 before a reader * sees it as a different surface at all. This is 1.301:1, and it is the DARKEST value that * keeps --k24-text-muted #5B5B62 above the 4.5:1 body-text floor on it (4.84:1); one step * further, #D2D2D9, reads better as a band and drops muted text to 4.48:1, which is why it is * not used. Ink on this is 12.19:1. */ --k24-tint:#DADAE0; /* the alternate section ground */ /* Was annotated "NEVER a section background". That was written when tint and white were the * same value and painting both merged adjacent sections into one slab, which is exactly what * happens on /corporate/, whose --tint and --white sections are adjacent (2331+443 = 2774). * With tint now a genuinely different grey, white is the third step of a real ramp and IS a * section ground: white 1.070:1 over paper, paper 1.301:1 under tint. */ --k24-white:#FFFFFF; /* cards, the drawer, form fields, and the lightest section band */ /* ================= THE DEPTH LAYER ================================================= * Added after the owner's note: "add depth to the page sections add gradients the white * everywhere is hard on the eyes", with encounterstudios.ca named as the reference. * * MEASURING THAT REFERENCE FIRST CHANGED WHAT GOT BUILT. It has three gradient * declarations in 130,795 bytes of CSS, none of them on a section, and no 3D transform, * no parallax and no scroll listener anywhere. Its depth is flat-tone blocking: 52.1% * of its pixel height is dark or media, and the ground never runs more than 1.27 viewport * heights before it changes. * * Ours ran 9.50 viewport heights of one unpainted ground on /portfolio/, 70.4% pale * across the site, and 35 of 48 section boundaries at 1.301:1 or less, which is to say * invisible. So the fix is mostly RHYTHM, and the gradients are tonal ramps inside one * value family rather than the corner-to-corner colour ramps the word usually means. * A ramp you can see as a gradient is a decoration; one you can only see as depth is * the thing that was asked for. */ /* THE DARK RAMP. --k24-ink was doing three jobs at one value, which is why the ink CTA * band and the ink footer on /music/ merge into a single unbroken dark run. Three stops * lets two ink sections sit adjacent and still read as two. */ --k24-ink-deep:#131317; /* white 18.53:1 on-dark 15.13:1 on-dark-muted 11.23:1 */ --k24-ink-lift:#24242B; /* white 15.42:1 on-dark 12.58:1 on-dark-muted 9.34:1 */ /* THE LIGHT RAMP'S FLOOR, and it is a hard floor. #EDEDF1 is the darkest light value * allowed anywhere a control can sit: --k24-border #86868C measures 3.10:1 on it and one * step further (#E6E6EA) gives 2.91:1, under the 3:1 the render gate enforces on any * interface boundary. Same arithmetic that fixed --k24-tint at #DADAE0. */ --k24-paper-deep:#EDEDF1; /* ink 14.53:1 muted 5.77:1 border 3.10:1 */ /* THE FOUR GROUNDS. Each ramp's WORST stop clears every text token allowed on it, and no * ramp crosses from one value family into another. */ --k24-ground-paper:linear-gradient(180deg,#FFFFFF 0%,#F7F7F9 38%,#EDEDF1 100%); --k24-ground-white:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 62%,#F4F4F7 100%); /* tint's worst stop is #DADAE0: ink 12.19, muted 4.84 (the documented floor), border 2.60. * NO CONTROLS ON TINT: any boundary there uses --k24-metal-dark at 3.63:1, which is what * .k24-brands__item already does and what the gate already caught once. */ --k24-ground-tint:linear-gradient(180deg,#E6E6EA 0%,#DADAE0 100%); --k24-ground-ink:linear-gradient(180deg,#24242B 0%,#1C1C21 46%,#131317 100%); /* the dark ground inverted, for an ink section that FOLLOWS one, or that precedes the ink * footer. #131317 to #2E2E36 is a 1.377:1 internal step, above the ~1.25:1 a reader needs * to register a surface change at all. */ --k24-ground-ink-up:linear-gradient(180deg,#131317 0%,#1C1C21 54%,#2E2E36 100%); /* THE PAGE'S CLOSING RAMP, in two halves that must meet exactly. * * The CTA band and the footer used to be a step and a seam: the band ended on #2E2E36, the * footer was flat --k24-ink, and a 12% white hairline was drawn across the join. The owner * asked for one gradient across both ("just make it all one gradient... all in one kind of * like container"), so these are deliberately a PAIR: --cta ends on the same value --footer * begins on, and both run in the same direction. Change one stop and you have to change the * other or the join reappears. * * Two new values, both annotated like the rest of the dark ramp: * #26262D the join white 15.03:1 --k24-on-dark-muted 9.11:1 * #33333C the base white 12.50:1 --k24-on-dark-muted 7.58:1 */ --k24-ground-cta:linear-gradient(180deg,#131317 0%,#1C1C21 52%,#26262D 100%); --k24-ground-footer:linear-gradient(180deg,#26262D 0%,#2C2C34 46%,#33333C 100%); /* THE SEAM, and the FOLD under it. Solid, never --k24-rule: the specular gradient is * already forbidden above 180px in this file because its 1.84:1 stop lands mid-viewport. * #6E6E76 measures 5.05:1 on white, 4.72:1 on paper, 4.33:1 on paper-deep, 3.63:1 on tint * and 3.36:1 on ink, so it clears 3:1 on every ground it can touch. * * The fold is what makes a boundary depth rather than a ruled line: 96px of shadow below * the seam reads as one page laid over another. rgba(28,28,33,.10) composites to #E1E1E3 * over paper, a 1.221:1 step at the seam decaying to nothing 96px later. */ --k24-seam:var(--k24-metal-dark); --k24-fold:linear-gradient(180deg,rgba(28,28,33,.10) 0%,rgba(28,28,33,0) 100%); --k24-fold-dark:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 100%); /* THE PATTERNS. "dont be scared to add like patters of like things to the background". * All three are self-contained: two pure CSS, one an inlined SVG data URI. Nothing here * fetches a file, so nothing here can 404 or depend on a host. * * Each is pitched to move the section's mean luminance by a fraction of a percent: the * dots cover 1.6% of their area at .13 alpha, the grid ~3.5% at .08. A pattern you can * read as a texture without being able to read it as an image is the target; anything * stronger becomes wallpaper and starts competing with the type. */ --k24-tex-perf:radial-gradient(circle at 1px 1px,rgba(28,28,33,.13) 1px,transparent 1.7px); --k24-tex-perf-size:14px 14px; --k24-tex-perf-dark:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 1.7px); --k24-tex-grid:linear-gradient(rgba(28,28,33,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(28,28,33,.08) 1px,transparent 1px); --k24-tex-grid-size:56px 56px; --k24-tex-grid-dark:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); /* The hatch is SVG rather than repeating-linear-gradient because a 45-degree 1px line drawn * by a gradient renders as a 2px blur; an SVG stroke stays crisp at any device pixel ratio. * The # in the colour MUST stay percent-encoded as %23 or the data URI terminates early. */ --k24-tex-hatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1L1 -1M0 8L8 0M7 9L9 7' stroke='%231C1C21' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E"); --k24-tex-hatch-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-1 1L1 -1M0 8L8 0M7 9L9 7' stroke='%23FFFFFF' stroke-opacity='.055' stroke-width='1'/%3E%3C/svg%3E"); --k24-tex-hatch-size:8px 8px; /* THE PLATE SHADOW, read off the reference's own .why-block-item. Two layers: a tight * contact shadow and a soft ambient one. This is that site's entire answer to white cards * on a white ground, and it is not a gradient. */ --k24-shadow-plate:0 4px 8px rgba(28,28,33,.10),0 14px 14px rgba(28,28,33,.09); /* ================= end depth layer ================================================= */ --k24-on-dark-muted:#C9C9CE; /* 10.2:1 on ink secondary text on the inverted band */ --k24-on-dark:#E9E7EF; /* 13.85:1 on ink primary text on the inverted band */ /* ---- aliases kept so v3 consumers keep resolving. Step 4 removes the consumers, * then these go too. Every one is now a true grey: this is where the purple died. */ --k24-primary:#1C1C21; /* was #7B6B9A. Buttons are charcoal, white label 16.97:1. */ --k24-primary-hover:#2E2E36; /* was #5E5079 */ --k24-primary-text:#1C1C21; /* was #6A5B8B. Links stay distinguishable by their underline. */ --k24-lavender:#EDEDF0; /* was #E8E0F5. A neutral wash for hover states. */ --k24-surface-2:#F1F1F3; /* was #F0EBF8, the band that took 90.6% of the first screen. Neutral now, and step 4 deletes the bands entirely. Kept as a real step so the pages do not read flat between step 3 and 4. */ --k24-eyebrow-dark:#C9C9CE; /* was #CDBFEA */ --k24-silver:#86868C; /* was #C4C4CC at 1.62:1, a live failure on 24 controls */ --k24-charcoal:var(--k24-ink); --k24-offwhite:var(--k24-paper); --k24-base:var(--k24-paper); --k24-surface-1:var(--k24-white); --k24-text:var(--k24-ink); --k24-text-muted:var(--k24-muted); --k24-focus:var(--k24-ink); /* surface-aware: goes white on dark grounds, see below */ /* ---- state. Not brand colour: these are the only hues left on the site. */ --k24-danger:#B42318;--k24-danger-bg:#FBEAE7; --k24-ok:#1E6B3A;--k24-ok-bg:#E6F4EA; /* ---- the metal, now the ONLY non-grey device on the site. With the brand hue * retired it carries the whole visual identity, which is what makes the result * 24K rather than a copy of a monochrome reference. Step 4 promotes it to a 3px * rule under every section heading. */ /* The specular is compressed to 8% of the width on purpose. The old stops put the * light midpoint across 56% of the bar, which measured 1.84:1 on paper: more than half * of the site's most-repeated mark was invisible on the ground it sits on. Same two * values, narrow highlight. Hard constraint: no mark wider than 180px uses this, and * the one full-bleed line (the masthead seam) is painted solid --k24-metal-dark. */ --k24-rule:linear-gradient(90deg,#6E6E76 0%,#6E6E76 42%,#B8B8C0 50%,#6E6E76 58%,#6E6E76 100%); --k24-metal:linear-gradient(135deg,#F2F2F5 0%,#C2C2CA 45%,#8E8E9A 100%); --k24-shadow-card:0 1px 2px rgba(28,28,33,.04); --k24-shadow-lift:0 12px 28px -18px rgba(28,28,33,.28); /* was tinted violet */ /* ---- type: six sizes, down from twenty-one rendered. * Sizes are rem against the fluid root below, so the ladder breathes with the * window instead of needing per-element breakpoints. Values shown at a 1440 window * where the root computes to 16.7px. */ --k24-font-display:Satoshi,'Helvetica Neue',Arial,sans-serif; --k24-font-body:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --k24-display:clamp(3rem,7.2vw,6.5rem); /* 104px one word per hero, and the gate labels */ --k24-h1:clamp(2.25rem,4vw,3.5rem); /* 56px one per page */ --k24-h2:2rem; /* 33.4px every section heading */ --k24-h3:1.5rem; /* 25.1px every card, room, step and icon title */ --k24-body:1rem; /* 16.7px all prose */ --k24-label:.75rem; /* 12.5px nav, buttons, eyebrows, footer links */ --k24-lh-display:1.04; --k24-lh-body:1.6; --k24-measure:66ch; /* ---- rhythm */ --k24-s1:8px;--k24-s2:16px;--k24-s3:24px;--k24-s4:32px;--k24-s5:48px;--k24-s6:64px;--k24-s7:96px; --k24-section:clamp(64px,7.5vw,120px); /* 108px/side at 1440, 64px floor at 390 */ --k24-container:1400px; --k24-prose:720px; /* ---- motion. Taken off the reference site's own computed styles, not invented: * its reveal is `opacity .9s, transform .9s cubic-bezier(.22,1,.36,1)` (8 elements), * its slide `transform 1.2s cubic-bezier(.77,0,.175,1)` (10), and its micro-interactions * sit at .25s with colour at .3s (39 between them). Long and soft on entrances, quick on * hover: that split is what makes motion read as considered rather than busy. */ --k24-ease-out:cubic-bezier(.22,1,.36,1); /* entrances, easeOutQuint */ --k24-ease-inout:cubic-bezier(.77,0,.175,1); /* Read off encounterstudios.ca, which uses it at .85s on transform. It is a harder ease than * --k24-ease-inout: almost nothing happens for the first third, then the whole move happens * at once. Reserved for state changes a visitor triggers, where the delay reads as weight * rather than as lag. Their site has no GSAP and no ScrollTrigger; all of its motion is plain * CSS transitions and keyframes, which is why it is copyable at all. */ --k24-ease-expo:cubic-bezier(.83,0,.17,1); /* slides, easeInOutQuart */ /* .55s, was .9s. Paired with the reveal now firing a fifth of a screen before the section * reaches the fold (inc/motion.php), the entrance completes ahead of the reader instead of * making them wait for it. The old .9s was measured off the reference site, but that site * fires its reveals earlier, so copying the duration without the trigger copied half of it. */ --k24-dur-reveal:.9s; /* How far a section rises as it arrives. Was 1rem, which at 16px is a nudge you have to be * looking for. The reference site uses 3.75rem, 60px, and that travel is most of why its * sections feel like they arrive rather than appear. 2.75rem is the compromise: our reveal * fires 6% before the section reaches the fold, so a full 60px at .9s would still be moving * once the section is being read, where 44px at .7s has settled. */ --k24-reveal-rise:3.75rem; --k24-dur-slide:1.2s; --k24-dur-micro:.25s; --k24-radius:8px; --k24-radius-pill:999px; /* Buttons are square-ish, not pills. A 999px capsule is the default shape of a web app and * it was the one rounded thing left in a design whose whole grammar is hard edges: full-bleed * bands, hairline rules, tight tracking. Next to those it read as borrowed. 2px keeps the * corner from looking accidentally sharp without pretending to be a capsule. */ --k24-radius-btn:2px; } /* The fluid root: the whole type ladder breathes with the window instead of needing * per-element breakpoints. 16px below ~1130px, 16.7px at 1440, 19px above ~1860. * The floor is 16px rather than the 15px originally specced: this site carries a lot * of prose and 15px body text on a phone is below what it should be. */ html{overflow-x:clip;font-size:clamp(16px,calc(.55rem + .55vw),19px)} body{background:var(--k24-base);color:var(--k24-text);font-family:var(--k24-font-body);font-size:var(--k24-body); line-height:var(--k24-lh-body);-webkit-font-smoothing:antialiased;overflow-x:clip} /* h5 and h6 are included deliberately. Neither had a child-theme rule, so Kadence owned * them at 20px and 18px in the operating system's default font; the booking system emits * both. Nothing on this site should render in a font nobody chose. */ /* Letter-spacing is neutral, matching the reference's +0.22px at every size. This theme * previously tightened every heading to -.03em, which reads as a different kind of type * voice: tight tracking is a fashion-brand signal, theirs is a studio one. */ h1,h2,h3,h4,h5,h6{font-family:var(--k24-font-display);font-weight:700;line-height:var(--k24-lh-display); letter-spacing:0;color:var(--k24-text);text-wrap:balance} h1{font-size:var(--k24-h1);letter-spacing:0} /* weight 700, down from 900 (owner, 2026-09-08) */ h2{font-size:var(--k24-h2);letter-spacing:0} h3,h4,h5,h6{font-size:var(--k24-h3);letter-spacing:0;line-height:1.3} p,li{max-width:var(--k24-measure)} a{color:var(--k24-primary-text);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--k24-muted)} /* Video is carved out of the image rule on purpose. `height:auto` collapses a * full-bleed background video to zero height on first paint, and the imagery plan * puts one behind the hero. */ img{max-width:100%;height:auto} video{max-width:100%} hr{border:0;height:3px;background-image:var(--k24-rule);margin:var(--k24-s5) 0} ::selection{background:var(--k24-ink);color:var(--k24-white)} /* The focus ring is surface-aware. An ink ring is 15.86:1 on paper but 1.00:1 on the * charcoal hero and the inverted band, which is why the ring has to invert on dark * grounds. This is what makes the accessibility floor independent of the palette: * nobody can argue the brand hue has to stay for focus reasons. */ html body :focus-visible,html body a:focus-visible,html body button:focus-visible,html body input:focus-visible, html body select:focus-visible,html body textarea:focus-visible{outline:3px solid var(--k24-focus)!important;outline-offset:2px!important;border-radius:4px} html body .k24-hero--full :focus-visible,html body .k24-section--ink :focus-visible, html body .k24-band--ink :focus-visible,html body .site-footer :focus-visible, html body #colophon :focus-visible,html body .main-navigation ul ul.sub-menu :focus-visible, html body .k24-gate :focus-visible{outline-color:var(--k24-white)!important} html body input:focus,html body select:focus,html body textarea:focus{outline:3px solid var(--k24-focus)!important;outline-offset:1px!important;border-color:var(--k24-ink)!important} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }