/* ========================================================================== KREATED — SITE STYLESHEET (live since the 2026-09-01 cutover) Reference: research/OMC_TEARDOWN.md Decisions: concepts/OMC_KREATED_TRANSLATION.md Numbers below are translated from measurements of the live OMC homepage at 1440x900 and 375x812, not invented. Where a value mirrors a measured OMC value the comment says so. ========================================================================== */ /* --- TYPE ---------------------------------------------------------------- General Sans (Indian Type Foundry, via Fontshare, ITF Free Font Licence — see assets/fonts/ITF-FreeFontLicense-GeneralSans.txt). Variable, 200-700, 38 KB. Carries hero scale, section headings, nav, buttons and body. Still a TEST, not a ruling — but a legitimately licensed one. Cormorant Garamond is deliberately RARE. It appears in exactly four places: 1. the KREATED wordmark (settled, DECISION 011) 2. one accent word in the hero headline 3. one accent word in the footer 4. the capability labels and the Work lead — the two editorial moments below the fold where the contrast materially helps Every other lead paragraph is set in the sans. If Cormorant is ever ruled out, those four places are the whole surface area. ------------------------------------------------------------------------ */ @font-face{ font-family:'General Sans';font-style:normal;font-weight:200 700;font-display:swap; src:url(/assets/fonts/general-sans-var.woff2) format('woff2'); } @font-face{ font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap; src:url(/assets/fonts/cormorant-garamond-latin.woff2) format('woff2'); } :root{ /* --- palette: inverted from OMC. Navy-dominant, light punctuation. ------ Inside the locked family (DECISION 012). No accent colour is invented — the only chroma on the page is real client photography. */ /* ⚠ HUE-LOCKED TO THE COBALT, 2026-08-30. Every dark ground used to sit at 217-220 deg while --cobalt sits at 224 deg, so the ground read 4-7 deg GREENER than the blue standing on it. That mismatch — not any single colour — is what made the dark family read slate/teal. The whole family is now 224-230 deg, saturation raised, luminance held. Measured before and after across 22 foreground/background pairs: max delta 0.15, no threshold crossed. 🚫 --cobalt and --cobalt-lift are NOT retuned; they are the identity and moving them would break brand recognition. */ /* ⚠ RE-POINTED TO BX'S MEASURED DARK GROUND, 2026-09-01. --navy was #020C2E and --ink was a second, slightly deeper dark used by the footer and a handful of panels. There are no longer two darks: BX runs its whole dark territory on ONE ground and the seam work in August had already collapsed Kreated's three darks toward that. Both names now resolve to the same colour so that a rule which still says var(--ink) cannot reintroduce a step. --navy-2 survives only as a PANEL tone, lifted off the ground rather than sunk below it. 🚫 Do not reintroduce a second ground-level dark. */ --navy:#020C2E; /* BX --a-dark-theme--dark-primary-background */ --navy-2:#0A1740; /* panel lift, ~BX card-hover #040e30 opened up */ --ink:#020C2E; /* was #060A1A — now the same ground, see above */ --paper:#F4F5FA; /* 230 deg — was #F4F5F7 @ 220 */ --white:#FFFFFF; --silver:#A6AEC7; --line:color-mix(in srgb, var(--ink-1) 16%, transparent); /* --- the identity blue --------------------------------------------------- Cobalt. Chosen by rendering five candidates against the navy as rim, fill, type and rule: #0047AB is rich but dull, #1B4DFF starts to read neon, and #0A47F0 is the one that stays electric without either. It is the same blue the Work mask is rendered in. It is only 2.83:1 on --navy, so it is NEVER small text on a dark surface. Where a label needs the blue on navy, --cobalt-lift is used instead (5.62:1). On --paper the base cobalt is 6.07:1 and is fine for text. */ --cobalt:#0A47F0; --cobalt-lift:#5B86FF; --cobalt-hover:#2B5FF5; /* primary CTA hover fill (hero) */ --cobalt-soft:rgba(10,71,240,.20); --line-dark:rgba(2,12,46,.14); /* --- type scale: OMC's two-number responsive system -------------------- Only the two display sizes change between breakpoints. Body, labels and the serif lead are identical at every width, exactly as OMC does it. */ --h1:clamp(40px, 7.1vw, 104px); /* sized so 2 lines reach OMC's measured 75vw */ --h2:clamp(30px, 2.65vw, 38px); /* OMC measured 37.44 / 32 */ --h3:22px; --lead:23px; /* OMC measured 23.2, unchanged */ --body:16px; /* OMC measured 16, unchanged */ --label:14px; /* OMC measured 14.4, unchanged */ /* --- rhythm ------------------------------------------------------------ */ --gutter:clamp(20px, 8.4vw, 120px); --gutter-hero:clamp(20px, 12.3vw, 177px); /* OMC's measured 177px = 12.3vw */ --measure:min(410px, 100%); /* OMC never exceeds ~410px */ --head-h:91px; /* OMC measured 91, both widths */ /* the entire micro-interaction budget, measured off OMC */ --t-hover:.2s ease-in-out; --t-pill:.4s cubic-bezier(.4,0,.2,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} /* overflow-x:CLIP, not hidden. `hidden` makes the body a scroll container, and position:sticky inside a scroll container sticks to THAT container rather than the viewport — which silently disabled every sticky on this page. The Services stage and Process artifact both declared sticky and neither ever engaged. `clip` prevents the same horizontal overflow without creating a scrollport, so sticky works and nothing else changes. */ html,body{margin:0;padding:0;overflow-x:clip} body{ /* ⚠ transparent. The ground is painted once on so it also fills the overscroll area; see theme.css. 🚫 Do not put a fill back on body. */ background:transparent;color:var(--ink-1); font:400 var(--body)/1.55 'General Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:1680px;margin:0 auto;padding-inline:var(--gutter)} .hero .wrap{padding-inline:var(--gutter-hero)} /* ========================================================================== SHARED PATTERNS — OMC's repeatable section unit: pill label -> h2 -> serif lead -> pill CTA + arrow ========================================================================== */ .h2{ margin:0; font-size:var(--h2);line-height:1.02; /* OMC sets section headings solid */ font-weight:700;letter-spacing:-.024em; } .h2--big{font-size:clamp(38px,4.2vw,60px);line-height:1.04} .h2 em,.foot__h em,.hero__line em{ /* the serif accent, sized 1.27x the sans exactly as OMC does */ font-family:'Cormorant Garamond',Georgia,serif; font-style:italic;font-weight:600;font-size:1.27em; letter-spacing:-.012em; } /* leads are set in the SANS by default — Cormorant is reserved (see TYPE) */ .lead{ margin:0;max-width:var(--measure); font:400 17px/1.6 'General Sans',system-ui;color:var(--ink-3); } .lead--dark{color:rgba(2,12,46,.66)} /* the one editorial lead below the fold, where the contrast earns its place */ .lead--serif{ font-family:'Cormorant Garamond',Georgia,serif; font-size:var(--lead);line-height:1.22;font-weight:500; color:var(--ink-1); } .pill-label{ display:inline-flex;align-items:center;gap:9px;margin:0 0 22px; font:600 var(--label)/1.4 'General Sans',system-ui;letter-spacing:.01em; color:var(--ink-2); } .pill-label::before{ /* a cropped cobalt pocket, not a dot — a fluid-derived detail at 9px */ content:'';width:9px;height:9px;background:var(--cobalt-lift); border-radius:58% 42% 46% 54% / 44% 56% 44% 56%; } .pill-label--dark::before{background:var(--cobalt)} .pill-label--dark{color:rgba(2,12,46,.66)} .pill{ display:inline-flex;align-items:center;gap:14px; margin-top:30px;padding:15px 22px;border-radius:999px; background:var(--cta-fill);color:var(--cta-ink); font:600 15px/1 'General Sans',system-ui;text-decoration:none; transition:background-color var(--t-hover),color var(--t-hover); } .pill__arrow{ display:grid;place-items:center;width:30px;height:30px;margin:-8px -10px -8px 0; border-radius:50%;background:var(--cta-ink);color:var(--cta-fill); font-size:13px;transition:transform var(--t-pill),background-color var(--t-hover); } .pill:hover .pill__arrow{transform:translate(2px,-2px)} .pill--light{background:var(--cta-fill);color:var(--cta-ink)} .btn{ display:inline-flex;align-items:center;justify-content:center; height:52px;padding:0 26px;border-radius:999px; font:600 15px/1 'General Sans',system-ui;text-decoration:none; transition:background-color var(--t-hover),border-color var(--t-hover),color var(--t-hover); } /* ⚠ THE SOLID PILL INVERTS WITH THE ROOM. It was a white fill with navy type, which is the loudest object on a dark page and INVISIBLE on a light one — and the hero is light territory now. --cta-fill/--cta-ink swap on the same frame as the ink, so it is cobalt-on-white in day and white-on-navy at night. Both ends measure over 8:1. */ .btn--solid{background:var(--cta-fill);color:var(--cta-ink)} .btn--solid:hover,.btn--solid:focus-visible{background:var(--cta-fill-hover)} .btn--solid:hover{background:#DDE3EC} .btn--line{border:1px solid var(--stroke-hi);color:var(--ink-1)} .btn--line:hover{border-color:var(--accent)} .btn--text{ height:auto;padding:0 0 4px;border-radius:0; border-bottom:1px solid color-mix(in srgb, var(--ink-1) 34%, transparent); } .btn--text:hover{border-bottom-color:var(--accent)} :where(a,button):focus-visible{outline:2px solid var(--stroke-focus);outline-offset:4px} /* ========================================================================== HEADER — 91px, transparent, scrolls away (OMC). Returns on scroll-up with the primary CTA (Kreated divergence 2). ========================================================================== */ /* STICKY, never fixed. This was `position:relative` switching to `position:fixed` once past 0.9vh — which pulls 91px out of the document flow, so every section below snapped up by exactly the header's height at scrollY ~820. That is the jump between the hero and Services. Sticky pins the header without ever leaving the flow, so the document height never changes and there is nothing to jump. */ /* SOLID from the first pixel, and sticky so it never leaves the flow. It used to start transparent and switch to rgba(8,13,23,.86) + blur once scrolled, which read as the header "turning opaque" partway down the page. There is no background change now — only a hairline that appears once content is actually passing underneath it, which is a border, not a material change. */ .head{ position:sticky;top:0;z-index:50;height:var(--head-h); /* ⚠ the masthead travels across BOTH territories, so it cannot own a colour. It paints the same interpolated ground as the page it is pinned over, which is why there is no edge along its bottom at any scroll position. 🚫 Do not give it a fixed fill or a blur. */ background:var(--ground); /* ⚠ SUPERSEDED 2026-09-06, owner instruction: "the header needs to stay the same throughout the entire site". This was `transparent`, and the note in .head.is-fixed below called that a deliberate difference — the homepage was the one route whose masthead opened over artwork with no hairline under it. The cost was that the header LOOKED different between routes: with no rule under it the masthead merges into the hero and reads as a taller band, and the line appears the moment you navigate anywhere else. Measured, the two headers were otherwise pixel-identical at every width from 390 to 1920 — same 91px height, same 21px mark, same positions. This border was the only difference, so it is the only thing that had to change. 🚫 Do not restore `transparent` without also removing the hairline from the other 34 routes; one of the two has to give and this is the one. */ border-bottom:1px solid color-mix(in srgb, var(--ink-1) 8%, transparent); transition:border-color var(--t-hover); } .head.is-fixed{ left:0;right:0; /* ⚠ .08, matching services.css's --line-faint. The masthead rule was .07 here and .08 on the other 17 routes — one hairline with two values. The difference is below perception, but it is the same object and it now has one number. The homepage's TRANSPARENT state at the top of the hero is a deliberate difference and stays: it is the only route whose masthead opens over artwork. */ border-bottom-color:color-mix(in srgb, var(--ink-1) 8%, transparent); transform:translateY(-100%); transition:transform .32s cubic-bezier(.4,0,.2,1),border-color var(--t-hover); } .head.is-shown{transform:translateY(0)} .head__in{ max-width:1680px;margin:0 auto;height:100%; padding-inline:var(--gutter); display:flex;align-items:center;gap:34px; } .head__mark{ font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:21px; letter-spacing:.22em;margin-right:-.22em; /* cancel trailing tracking */ text-decoration:none; } /* ⚠ BACK TO FIVE ITEMS, 2026-09-04 — "Contractors" was added with the specialisation. The 2026-09-01 note below tuned the spacing for FOUR: "The nav dropped from five items to four when Method and Contact moved to the footer. Two things needed adjusting so it reads as a deliberate four rather than a five with gaps: the items sit slightly wider apart, and the CTA is pushed off by a larger margin than the inter-item gap." The wider inter-item gap was the four-item fix, so with five it goes back down. The larger CTA margin STAYS — that one is about "Start a Project" reading as the page's action rather than another link, and is independent of how many items there are. 🚫 Do not re-widen the gap without also removing an item, or the row runs into the CTA at ~1100px. */ .head__nav{display:flex;gap:clamp(20px,2.1vw,30px);margin-left:auto} .head__cta{margin-left:clamp(18px,1.6vw,24px)} .head__nav a{ font:500 15px/1 'General Sans',system-ui;text-decoration:none; color:var(--ink-2);transition:color var(--t-hover); } .head__nav a:hover{color:var(--ink-1)} /* Persistent from the first paint. It used to be `display:none` until the sticky header engaged, so the homepage masthead had no call to action until the reader scrolled — while every service page showed one immediately. Same pill, same visual language; only its visibility changed. */ .head__cta{ display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px; background:var(--cta-fill);color:var(--cta-ink); font:600 14px/1 'General Sans',system-ui;text-decoration:none; } .head__burger{ /* ⚠ 44, not 34. services.css sized the same control 44x44 on sixteen routes and this file sized it 34x34 on three (home, audit, thanks). Both clear the 24px floor in 2.5.8, so neither was a violation — it was simply the same button at two sizes depending on which stylesheet the route loads. */ display:none;margin-left:auto;width:44px;height:44px;padding:0; background:none;border:0;cursor:pointer; } /* ⚠ THREE LINES, not two — owner call, 2026-09-02. Two reads as a list; three is the shape people have been taught means "menu". The middle line is what makes the closed state legible, and it is also what makes the X work: it fades while the outer two rotate onto each other. ⚠ Laid out with flex + gap rather than margins so the 6px collapse between adjacent spans cannot silently change the spacing when a line is added. */ /* 🚫 NO display here — the base rule above is display:none and desktop depends on it. Setting display:flex at this scope put a burger on the desktop homepage. The mobile @media block is what turns it on. */ .head__burger{flex-direction:column;justify-content:center;gap:5px} /* ⚠ WHOLE PIXELS. These were 1.5px tall, which is 4.5 device px on a 3x phone: lines 1 and 3 rounded up to 5 and the middle one rounded down to 4, so the middle bar rendered visibly thinner than its neighbours. 2px lines with a 5px gap put every edge on a whole device pixel at 1x, 2x and 3x. 🚫 Do not use fractional heights or gaps here. The block is 24x16 (2+5+2+5+2); the X collapses the outer bars onto the middle one, so translateY must equal line-height + gap = 7px. */ .head__burger span{display:block;width:24px;height:2px;background:var(--ink-1); margin:0 0 0 auto; transition:transform var(--t-hover),opacity var(--t-hover)} .head__burger[aria-expanded=true] span:first-child{transform:translateY(7px) rotate(45deg)} .head__burger[aria-expanded=true] span:nth-child(2){opacity:0} .head__burger[aria-expanded=true] span:last-child{transform:translateY(-7px) rotate(-45deg)} .drawer{ position:fixed;inset:var(--head-h) 0 auto 0;z-index:49; /* the ground, not a colour of its own: #070C14 was a fourth dark that existed only here, and the drawer opens directly under a masthead painting --ground */ background:color-mix(in srgb, var(--ground) 97%, transparent);backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .drawer nav{display:flex;flex-direction:column;padding:8px var(--gutter) 28px} .drawer a{ padding:15px 0;font:600 20px/1 'General Sans',system-ui;text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--ink-1) 8%, transparent); } .drawer__cta{margin-top:20px;border:0!important; background:var(--cta-fill);color:var(--cta-ink);border-radius:999px;text-align:center;padding:17px 0!important} .drawer__alt{border:1px solid var(--line)!important;border-radius:999px; text-align:center;margin-top:10px;padding:16px 0!important} /* ========================================================================== 1 · HERO OMC: band exactly 1.0vh; headline 75.3vw wide leaving 12.4vw open right; label column 184px, body column 380px starting 245px from the gutter. ========================================================================== */ /* accessible-only text — the stable sentence behind the typewriter. Lives above the hero block because the hero is the only consumer today but it is a general utility; it was previously defined inside the hero block and was lost when that block was replaced. */ .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* ========================================================================== 1 · HERO — SIGNAL / "FOOTNOTE" (layout L9) Replaces the WebGL glass mark and its canvas. Everything here is SVG + CSS: no renderer, no library, no canvas in the hero. Three instances of one mark, each doing a different job at a different scale, which is what lets the joke land without shrinking the brand: .hero__ghost brand presence, large, in the right column .aster the LIVE footnote marker ending the rotating line .hero__notemark the tiny static reference in the footnote itself ========================================================================== */ .hero{ position:relative;overflow:clip; min-height:calc(100svh - var(--head-h)); display:flex;flex-direction:column;justify-content:center; padding:clamp(16px,2vw,26px) 0 clamp(4px,.8vh,10px); } .hero__in{position:relative;z-index:2;width:100%} /* --- the mark, shared by all three instances ----------------------------- */ .sig{display:block;width:100%;height:100%;overflow:visible} .sig__base path{fill:var(--mark,#57637C)} .sig__base{ filter:drop-shadow(0 0 44px rgba(10,71,240,.22)) drop-shadow(0 30px 50px rgba(0,0,0,.45)); } /* The beam is clipped to the glyph, so the light reads as the mark lighting ITSELF rather than a shape passing over it. */ .sig__spin{transform-origin:300px 262px;animation:sig-rot 12s linear infinite} @keyframes sig-rot{to{transform:rotate(360deg)}} /* two outward echoes, offset in time — the "signal" */ .echo{transform-origin:300px 262px;opacity:0} .echo path{fill:none;stroke:var(--cobalt-lift);stroke-width:1.4; vector-effect:non-scaling-stroke} .echo--a{animation:sig-echo 16s cubic-bezier(.2,.6,.4,1) infinite} .echo--b{animation:sig-echo 16s cubic-bezier(.2,.6,.4,1) 1.8s infinite} @keyframes sig-echo{ 0%{transform:scale(1);opacity:0} 2%{opacity:.5} 19%{transform:scale(1.42);opacity:0} 100%{transform:scale(1.42);opacity:0} } /* --- 1 · the ghost ------------------------------------------------------- */ .hero__ghost{ position:absolute;z-index:0;pointer-events:none; right:clamp(24px,5.5vw,100px);top:41%;transform:translateY(-50%); width:min(40vw,548px);aspect-ratio:1/1; --mark:#141E35;opacity:.9; } .hero__ghost .sig__base{filter:none} .hero__ghost .echo path{stroke-opacity:.35} /* --- 2 · the headline ---------------------------------------------------- */ .hero__h1{ position:relative;z-index:2;margin:0 0 30px;max-width:14ch; font-size:clamp(42px,6.2vw,104px);line-height:1.0;font-weight:600; letter-spacing:-.034em;color:var(--ink-1); } .hero__h1 em{ font-family:'Cormorant Garamond',Georgia,serif;font-style:italic; font-weight:600;font-size:1.16em;letter-spacing:-.012em; } .hero__static{display:block} /* Width reservation is unchanged in principle: an invisible copy of the LONGEST phrase — now including its asterisk — holds the box open, so typing still cannot reflow the line. */ .hero__rotate{position:relative;display:inline-block;vertical-align:top} .hero__reserve{visibility:hidden} .hero__live{position:absolute;left:0;top:0;white-space:nowrap; color:var(--accent)} .hero__caret{ display:inline-block;width:2px;height:.78em;margin-left:.08em; vertical-align:-.06em;background:var(--cobalt-lift);opacity:0; } .js-type .hero__caret{opacity:1} .js-type.is-holding .hero__caret{animation:caret-blink 1.06s steps(1,end) infinite} @keyframes caret-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}} /* --- 3 · the asterisk ---------------------------------------------------- */ .aster{ display:inline-block;width:.42em;height:.42em;margin-left:.07em; vertical-align:.28em;position:relative;z-index:2; --mark:#7E9CFF; } .aster .sig__base{filter:drop-shadow(0 0 14px rgba(91,134,255,.5))} /* --- 4 · support + CTAs -------------------------------------------------- */ .hero__support{ position:relative;z-index:2;margin:0 0 clamp(34px,5vh,56px);max-width:45ch; font-size:clamp(16.5px,1.34vw,19.5px);line-height:1.58;color:var(--ink-2); } /* ⚠ THE THREE THINGS KREATED SELLS — added 2026-09-02, owner-reported that the paragraph "looks like plain font, grey boring text". It was one even grey run of 34 words, so the eye had nothing to catch and the sentence carried no shape. These three phrases are not decoration: they are Web Design, Local SEO and Brand Strategy said in the customer's words, and they are the three services the rest of the page is about. Lifting them to the full ink weight makes the sentence scannable in one pass and tells a reader what this studio does before they reach a single heading. 🚫 Do not emphasise a fourth phrase. Three is the offer; more is highlighter. */ .hero__key{color:var(--ink-1);font-weight:560} .hero__ctas{ position:relative;z-index:2;display:flex;align-items:center; gap:22px;flex-wrap:wrap;margin:0; } .hero__ctas .btn{height:58px;padding:0 28px;gap:12px} /* Cobalt primary, per this layout. Scoped to the hero so .btn--solid keeps its existing appearance in the header and the conversion section — this rule lived in the previous hero block and was lost when it was replaced. */ .hero__ctas .btn--solid{ background:var(--cobalt);color:#fff;position:relative;overflow:hidden; } .hero__ctas .btn--solid::before{ content:'';position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--ink-1) 0%, transparent),color-mix(in srgb, var(--ink-1) 55%, transparent) 50%,color-mix(in srgb, var(--ink-1) 0%, transparent)); opacity:0;transition:opacity var(--t-hover); } .hero__ctas .btn--solid:hover, .hero__ctas .btn--solid:focus-visible{background:var(--cobalt-hover)} .hero__ctas .btn--solid:hover::before, .hero__ctas .btn--solid:focus-visible::before{opacity:1} .hero__ctas .btn--line{border-color:color-mix(in srgb, var(--ink-1) 25%, transparent)} .hero__ctas .btn--line:hover, .hero__ctas .btn--line:focus-visible{ border-color:var(--accent);background:color-mix(in srgb, var(--ink-1) 5%, transparent); } .hero__ctas .btn:focus-visible, .hero__proof:focus-visible{outline:2px solid var(--cobalt-lift);outline-offset:3px} .btn__arrow{ display:grid;place-items:center;width:30px;height:30px; margin:-6px -12px -6px 0;border-radius:50%; background:color-mix(in srgb, var(--ink-1) 16%, transparent);font-size:13px; transition:transform var(--t-pill),background-color var(--t-hover); } .hero__ctas .btn--solid:hover .btn__arrow, .hero__ctas .btn--solid:focus-visible .btn__arrow{ transform:translate(2px,-2px);background:color-mix(in srgb, var(--ink-1) 24%, transparent); } .hero__proof{ position:relative;display:inline-flex;align-items:center;gap:8px; min-height:44px;font:600 15px/1 'General Sans',system-ui; color:var(--ink-3);text-decoration:none;border-bottom:0; padding-bottom:0;transition:color var(--t-hover); } .hero__proof::after{ content:'';position:absolute;left:0;right:0;bottom:8px;height:1px; background:color-mix(in srgb, var(--ink-1) 25%, transparent);transition:background-color var(--t-hover); } .hero__proof:hover,.hero__proof:focus-visible{color:var(--ink-1)} .hero__proof:hover::after,.hero__proof:focus-visible::after{ background:var(--cobalt-lift); } /* --- 5 · the footnote: where the kicker now lives ------------------------ */ .hero__note{ position:relative;z-index:2;display:flex;align-items:center;gap:12px; margin-top:clamp(40px,7vh,80px);padding:18px 0 30px; /* ⚠ .09, NOT .16. Every separator on this page was .16 — twice the value the rest of the site uses for the same job (services.css --line is .12, the masthead rule is .08). At 1900px the hero's rule was the brightest object above the fold after the type, and it read as a CUT rather than as a separator. The device is unchanged and still does its job; only its weight now matches the system. 🚫 Do not raise these back to .16. */ border-top:1px solid color-mix(in srgb, var(--ink-1) 9%, transparent); } .hero__notemark{flex:none;width:15px;height:15px;--mark:var(--cobalt-lift)} .hero__notemark .sig__base{filter:none} .hero__note p{ margin:0;font:500 13.5px/1.5 'General Sans',system-ui; letter-spacing:.04em;color:var(--ink-4); } /* ---- responsive --------------------------------------------------------- */ @media (max-width:900px){ /* ⚠ HEADER — SHORTER, AND IT STAYS AT THE TOP. Owner call after bx.studio. 91px was a desktop measurement applied unchanged to a 844px screen, where it spent 11% of the viewport on a wordmark and a button. 68px keeps both comfortably and gives the headline the space back. position:static, not sticky: the reference site lets the masthead scroll away, and on a phone a pinned bar costs a fixed slice of every screen for a menu that is one thumb-reach from the top anyway. 🚫 Desktop keeps sticky — this is scoped, and the drawer's `inset` still resolves against --head-h, so both follow the smaller value here. */ :root{--head-h:68px} .head{position:static;height:var(--head-h)} /* 🚫 The hero's mobile padding/min-height are NOT set here — a later @media (max-width:900px) block owns them. Search '.hero{' near the drawer rules. Geometry set at this point in the file is silently overridden. */ /* ⚠ H1 vs SUPPORT TEXT — 2026-09-02, owner-reported "competing". At 38px on line-height 1.0 the headline packs into a dense black slab, then 16.5px/1.58 body text starts 30px later. Two blocks of opposite density butting together read as a collision rather than headline-then-explanation. 1.06 lets the three lines breathe without changing where they break, and the larger margin makes the sequence obvious. Desktop keeps 1.0 and 30px: at 89px the tight setting is the whole point of the mark. */ .hero__h1{font-size:clamp(38px,9.6vw,50px);max-width:none; line-height:1.06;margin-bottom:28px} /* the rotator owns its own line so typing can never re-wrap the static text */ .hero__rotate{display:block} /* the ghost centres behind the type — the right column does not exist here */ /* QA 390/360: at top:52% / .7 the mark crossed the support paragraph for 125px of its height. It is brand presence, not content — so on mobile it lifts off the body copy and drops to a watermark. */ /* ⚠ THE MARK, THIRD AND FINAL ARRANGEMENT — 2026-09-02. History, because two of these were mine and both were wrong: · centred behind the copy at .4 — crossed the support paragraph · same position at .18 — still read through "as good online as they are on the job" at 3x · display:none — fixed the collision and lost the brand from the hero entirely, which the owner rightly called out as the worse trade The mistake in all three was treating a 296px centred glyph as the only option. The desktop hero does not centre it either: it sits in the right column, BESIDE the words. A phone has no right column, so the equivalent is to let it run off the right edge — anchored past the text column, sized large enough to read as brand architecture rather than a logo, and positioned low so the headline and the paragraph both sit clear of it. 🚫 Do not centre it again. The constraint is horizontal, not tonal: no opacity is low enough to make a glyph behind a 34-word paragraph feel considered. */ .hero__ghost{ right:-44%; /* the bulk of it is off-canvas on purpose */ top:auto;bottom:-10%; transform:none; width:min(88vw,430px); /* ⚠ .34, NOT .5. At .5 the glyph's arms are hard enough to read as a diagram, and the studio note crosses its left arm — the note sits above it on z-index so nothing is unreadable, but two things competed for the same corner. At .34 it is a ground the note sits ON rather than a shape the note collides WITH. 🚫 Do not raise it: the test is whether you can read the note without noticing the mark. */ opacity:.34; --mark:#2A3654; /* lifted off the desktop #141E35, which went muddy once the opacity came down */ } /* the support paragraph's own bottom margin is 5vh, which is 42px on a 844px screen — generous for a phone, and it was pushing everything below it down by more than the gap above the paragraph. 26px keeps the paragraph clearly separate from the buttons without spending a fifth of the remaining screen on white space. */ /* 16.5px was the floor of the desktop clamp arriving unchanged on a phone, where it has to carry more of the page. 17.5 with a slightly tighter measure reads as copy that was set rather than defaulted. */ .hero__support{margin-bottom:20px;font-size:17.5px;line-height:1.55} .hero__ctas{width:100%;gap:12px} .hero__ctas .btn{width:100%;justify-content:center} /* ⚠ PROOF ON THE FIRST SCREEN — 2026-09-02, owner call after comparing the mobile hero with bx.studio. The client strip used to start at 858px on an 844px viewport: fourteen pixels below the fold, which is the worst possible place for it. A visitor saw a headline, a paragraph, two buttons, a text link and a footnote, and nothing at all telling them anyone had hired this studio — the proof was there, just always one scroll away. The reference site puts its credibility inside the hero for exactly this reason. Kreated has no award to display and 🚫 will not invent one, but it does have three real clients, so the fix is to stop burying them: the footnote and the strip both tighten until the logos clear the fold. 🚫 Do not add padding back here without re-measuring where .clients lands on a 844px viewport. */ /* the rule above the note was drawn for a near-white ground and reads as a scratch once the field goes blue */ .hero__note{margin-top:14px;padding:12px 0 12px;border-top-color:rgba(255,255,255,.28)} /* ========================================================================== THE HERO FIELD — 2026-09-02, owner-directed after bx.studio. The hero and the client strip are now ONE surface on a phone: a vertical gradient that starts on the page ground and arrives at full cobalt behind the logos. The strip is a separate
in the markup and stays that way — moving it into the hero would change the document for every width to solve a mobile composition. Instead both halves paint the same continuous ramp and the seam between them is removed, so it reads as one block. ⚠ The two gradients MUST stay in sync. .hero runs 0 -> 78% of the ramp and .clients finishes it; if you retune one, retune the other or a hard line appears exactly where the sections meet. ========================================================================== */ .hero{ padding-bottom:0; background-image:linear-gradient(180deg, rgba(91,134,255,0) 0%, rgba(91,134,255,.10) 30%, rgba(74,116,246,.42) 64%, rgba(48,92,238,.82) 100%); } /* ---- the strip, finishing the hero's ramp ---------------------------- */ .clients{ padding-top:10px;padding-bottom:26px;margin-top:0; background-image:linear-gradient(180deg, rgba(48,92,238,.82) 0%, rgba(46,90,238,.95) 55%, rgba(40,84,234,.99) 100%); } /* the label is a grey micro-caption on white; on cobalt it has to be white or it disappears into the field it is sitting on */ .clients__label{color:rgba(255,255,255,.72)} /* ⚠ WHITE MARKS. The three logos are dark PNGs with their own colours — LLEC carries red. brightness(0) flattens every one of them to black and invert lifts that to pure white, which is the only treatment that gives three unrelated lockups the same weight on a coloured ground. 🚫 Do not use opacity to do this: it tints them toward the background and the lighter marks vanish before the heavier ones do. */ /* ⚠ invert(1) FIXED, not invert(var(--k)). The base rule further down ties the marks to the day/night flag, which is right when the strip sits on the page ground and follows it from light to dark. On a phone the strip now has its own cobalt field that does not care what the page ground is doing, so the marks are white at every scroll position. ⚠ Scoped as `.clients .client__logo` on purpose: the base rule is 170 lines LOWER in the file at equal specificity, so a bare .client__logo here loses on source order — it silently rendered black-on-cobalt until this was measured. 🚫 Do not "simplify" this back to one class. */ .clients .client__logo{filter:brightness(0) invert(1)} .clients__list.is-marquee .client{opacity:1} } /* ---- reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ /* the beam parks at a composed angle rather than spinning, and one echo is held mid-expansion, so the "signal" idea still reads statically */ .sig__spin{animation:none;transform:rotate(35deg)} .echo{animation:none!important} .echo--a{opacity:.14;transform:scale(1.18)} .echo--b{opacity:0} .hero__caret{display:none} } /* ========================================================================== BELOW THE HERO — visual-direction correction pass (Aug 2026). Architecture unchanged: Client Trust · Services (Index + Stage) · How It Works · Work + Testimonial · Investment · FAQ · Final CTA · Footer. ONE CONTINUOUS CANVAS, now with real PEAKS AND VALLEYS: Trust QUIET · Services HIGH · Process MEDIUM · Proof PEAK · Investment STRUCTURED/STILL · FAQ QUIET · Final CTA HIGH. Variation comes from scale, cropping, edge-bleed, imagery and whitespace — never from alternating section backgrounds. Motion grammar unchanged: the artwork moves, the layout never does. No scroll-linked motion below the hero. Everything stops composed under prefers-reduced-motion. ========================================================================== */ :root{ /* Cut hard. Measured at 1440 the old values put 271px of pure padding between Services and Process (150 bottom + 121 top) and 404px around the final CTA — you were scrolling through empty canvas to reach the next idea. Roughly halved here. The peak/valley RATIO is preserved, so the rhythm still reads; there is simply far less dead air carrying it. */ --sec:clamp(44px, 4.6vw, 74px); /* medium sections */ --sec-lg:clamp(56px, 5.8vw, 94px); /* peaks */ --sec-sm:clamp(30px, 3.2vw, 48px); /* valleys */ --panel:color-mix(in srgb, var(--ink-1) 3%, transparent); --panel-line:color-mix(in srgb, var(--ink-1) 10%, transparent); --r:14px; /* the one shared surface treatment for every dimensional object below the hero: top edge catches light, deep soft ground shadow */ --srf-edge:inset 0 1px 0 color-mix(in srgb, var(--ink-1) 16%, transparent); --srf-shadow:0 44px 90px rgba(0,0,0,.55); } /* --- shared section head ------------------------------------------------- */ .sec-head{ display:grid;grid-template-columns:1fr minmax(0,var(--measure)); gap:clamp(24px,4vw,70px);align-items:end; margin-bottom:clamp(30px,3.4vw,52px); } .sec-head--peak{margin-bottom:clamp(36px,4.2vw,66px)} /* peak display scale — Services, Proof. (Hero untouched; Final CTA has its own.) */ .h2--peak{ font-size:clamp(42px,5.2vw,78px);line-height:1.0; font-weight:700;letter-spacing:-.032em; } /* ========================================================================== 3 · CLIENT TRUST — a rotating rail of real client marks. Still a valley: small, monotone, low-contrast at rest. The logos are real captures of each client's own mark, flattened to one colour so three brand palettes do not compete with the page or with each other. The track holds the list TWICE and translates by exactly -50%, which is what makes the loop seamless — at -50% the second copy sits precisely where the first began, so the reset is invisible. The duplicate is aria-hidden and untabbable (see the markup), so it exists for the eye only. ========================================================================== */ /* ⚠ overflow:clip removed 2026-08-30 — it scissored the seam glow below. Nothing inside the strip can overflow; verified 1440-360. */ .clients{padding:var(--sec-sm) 0;position:relative;isolation:isolate} /* ⚠ THE `.clients::after` GLOW WAS REMOVED HERE, 2026-08-31. It predates .room__rise and was added back when the clients/room boundary was a hard cut, to carry colour across it. The rise now does that job completely and opaquely — but the two were fighting: measured at 1900px the old glow peaked at rgb(15,34,90) on the right-hand side at y=1075, and the rise begins at its DARKEST, rgb(10,17,42), at y=1100. So the ramp opened with a visible step DOWN before climbing, and because the glow was lopsided (absent at the left gutter, strong at x=1500) the step only showed in the middle and right of the page. That is the visible edge at the top of the transition. 🚫 Do not add a second light source at this boundary. One ramp owns it. */ /* ⚠ REBUILT 2026-09-01. The strip was a stacked label above a 920px-capped row of three marks justified start / centre / end. At 1440 that put the last mark at x≈1090 with a third of the page empty to its right, and because the three lockups are built completely differently the row read as three unrelated objects that had run out rather than as one strip. It looked unfinished because it was. It is now one line: the label sits on the left as a fixed column, and the three marks share the remaining width in equal cells. Equal cells is the trick — the marks are 3.6:1, 6.7:1 and 9.5:1 in aspect, so nothing short of a shared grid track makes them look deliberately placed. */ .clients__in{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:clamp(24px,4.5vw,72px); } .clients__label{ margin:0;font:600 11px/1 'General Sans',system-ui;letter-spacing:.16em; text-transform:uppercase;color:var(--ink-4); } /* A static row, not a marquee. Three clients cannot fill a loop, so the old rail duplicated the whole set to stay seamless — six marks for three clients, plus an edge mask that clipped whichever name happened to be leaving. Nothing moves now, nothing repeats, and nothing is masked, so no name can crop. */ .clients__row{position:relative} /* ========================================================================== THE CLIENT STRIP — a cycling emphasis, 2026-08-31. Owner decision: the treatment should cycle. It must not go back to the infinite conveyor, which needed six marks on screen for three clients and masked whichever name happened to be leaving. WHAT CYCLES: the LIGHT, not the logos. All three marks stay present, in place, at all times — nothing enters, leaves, duplicates or scrolls. One at a time comes forward to full strength while the other two rest, and the emphasis walks the row. Nothing is ever hidden, so there is no abundance to fake and no name can be caught mid-crop. WHY EMPHASIS AND NOT MOVEMENT: with three clients, any translation either loops (a conveyor) or leaves gaps. Emphasis reads as deliberate at any count — and it keeps every mark readable in every frame, which a slide cannot promise. ⚠ The resting state is .55, not near-zero: these are real client marks and they stay legible in every frame of the cycle. 🚫 Do not lower it to make the cycle more obvious. ========================================================================== */ .clients__list{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:clamp(20px,3vw,56px); list-style:none;margin:0;padding:0; /* 🚫 no max-width. The 920px cap is what left the dead third at the right. */ } /* every mark centred in its OWN equal cell. The old first/centre/last rule made the gaps between marks unequal, so even with the cap removed the row would still have read as misaligned. */ .clients__item{min-width:0;display:flex;justify-content:center} /* Each mark sits in a FITTED BOX of fixed height and fixed max width and is CONTAINED inside it. That is what gives the strip a real declared height, centres every mark optically, makes clipping structurally impossible, and stops any one lockup dominating on width — the three are built completely differently (llec 388x107, learnsmart 375x56, rare-raleigh 256x27). */ .client{ display:grid;place-items:center; height:var(--mark-box,56px); width:100%;max-width:var(--mark-w,206px); text-decoration:none; /* ⚠ .70 AT REST, NOT .55. On the old all-dark ground .55 read as "dimmed"; on the day ground the same value reads as "not loaded". The lit/unlit difference only has to be perceptible, and .70 -> 1 is, while leaving every mark obviously PRESENT in every frame of the cycle. */ opacity:var(--rest,.70); transition:opacity 900ms cubic-bezier(.4,0,.2,1); } .clients__list.is-cycling .client.is-lit{opacity:1} /* pointer and keyboard always beat the cycle */ .client:hover,.client:focus-visible{opacity:1;transition-duration:200ms} .client:focus-visible{outline:2px solid var(--cobalt-lift);outline-offset:8px;border-radius:4px} /* contained, never cropped, never stretched */ .client__logo{ display:block;width:auto;height:auto; max-width:100%;max-height:100%; object-fit:contain; /* ⚠ ONE INK, NOT A GREYSCALE. This was grayscale(1) invert(1 - k), which preserved each mark's internal tonal range — so the Leak Locators lockup, which contains a large filled shape, inverted into a black blob at roughly three times the optical weight of the two wordmarks beside it, while LearnSmart's lighter strokes inverted to a mid grey that barely held. Three clients, three weights, no relationship between them. brightness(0) collapses every non-transparent pixel to one value and keeps only the ALPHA channel, which is where the artwork actually lives in all three files: every opaque pixel in all three samples at (224,224,224), so they are already single-colour marks and the tonal range being preserved was noise. invert() then takes that silhouette to white for the night side. Three marks, one ink, one weight, antialiasing intact. 🚫 Do not go back to grayscale(). It is why the strip looked broken. 🚫 Do not add a second set of dark PNGs either — two files per client is two things to keep in sync, and the client owns the artwork. */ filter:brightness(0) invert(var(--k)); } /* OPTICAL tuning, one value per client, chosen so the WORDMARKS match on screen rather than the bounding boxes. LLEC is held DOWN, not up: its lockup is mostly satellite dish, so matching it on wordmark size alone would give the graphic twice any neighbour's visual mass. Rare Raleigh is a two-line lockup and is balanced on mass rather than cap height. */ /* ⚠ OPTICAL, NOT MATHEMATICAL. Tuned so the three marks carry the same visual WEIGHT, which is not the same as the same height or the same width. Leak Locators is the densest lockup and takes the smallest box; Rare Raleigh is the lightest and takes the largest. */ /* ⚠ The LLEC mark is now a GENERATED SVG, not a cropped raster: the wordmark set in Manrope ExtraBold, the typeface leaklocatorseastcoast.com itself uses, with the glyphs converted to outlines so the file needs no webfont. That took the aspect from 10.10:1 (the cropped bitmap) to 15.32:1, because Manrope is considerably wider than the original condensed lettering. ⚠ It is the longest string in the row by far, so it is sized to match its NEIGHBOURS' apparent mass, not their cap height — width and height trade directly at a fixed aspect. Retune this WITH the max-height below, and check all three rendered widths after. */ .clients__item--llec .client{--mark-w:250px} /* ⚠ 46%, and the asset is now the WORDMARK ONLY (owner call, 2026-09-02 — the pipe-and-dish illustration was cropped out). That took the aspect from 3.63:1 to 10.10:1, so height no longer governs apparent size the way it does for the other two: at the old 62% the wordmark rendered 263px wide against 146px and 215px for its neighbours and dominated the row. 🚫 Do not restore 62% without re-checking the rendered WIDTH of all three. */ .clients__item--llec .client__logo{max-height:36%} .clients__item--ls .client{--mark-w:184px} .clients__item--ls .client__logo{max-height:52%} /* was 44% — too light beside the others */ .clients__item--rr .client{--mark-w:204px} .clients__item--rr .client__logo{max-height:54%} /* was 48% — lightest mark, largest box */ /* ⚠ REDUCED MOTION AND NO-JS BOTH LAND HERE. The cycle only runs when clients.js adds `is-cycling`, and it never adds it under reduced motion. In both cases every mark simply sits at full strength — a stable, finished arrangement with nothing missing and nothing moving. */ .clients__list:not(.is-cycling) .client{opacity:.88} @media (prefers-reduced-motion:reduce){ .client{transition:none;opacity:.88} .clients__list.is-cycling .client.is-lit{opacity:.88} } @media (max-width:900px){ /* ⚠ the label column comes off below 900. .clients__in is a GRID now, so the old `flex-direction:column` further down this file has no effect on it — this is the rule that actually stacks the strip. */ .clients__in{grid-template-columns:1fr;gap:clamp(16px,3vw,22px)} .clients__list{gap:18px 28px} .client{--mark-box:46px} } @media (max-width:560px){ /* three cells cannot hold three lockups this wide on a phone, so the strip becomes a two-up with the third under it — still one row of marks per line, still nothing duplicated, still nothing hidden. The emphasis cycle is unchanged: it walks all three wherever they sit. */ .clients__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px} .client{--mark-box:42px;max-width:100%} /* the third mark sits alone on the second line, so it aligns to the start rather than floating in the middle of a two-column track */ .clients__item:last-child{justify-content:flex-start} } /* ========================================================================== THE MARQUEE — 2026-09-02, owner request. ⚠ Replaces the emphasis cycle described above. The comment block at the top of this section is kept deliberately: it records WHY the conveyor was removed in August, and anyone reversing this again should read it first. Only .is-marquee changes the layout, and only clients.js adds it — never under reduced motion. So the grid above remains the no-JS and the reduced-motion rendering, and neither is a broken version of this. ========================================================================== */ .clients__list.is-marquee{ display:flex; width:max-content; grid-template-columns:none; /* leave the three-up grid behind */ flex-wrap:nowrap; animation:clients-marquee var(--marquee-duration,26s) linear infinite; will-change:transform; } .clients__list.is-marquee .clients__item{flex:0 0 auto} /* ⚠ every mark at full strength the whole way across. The August note says the old conveyor "masked whichever name happened to be leaving" — that was a dimming effect, and there is deliberately none here. 🚫 Do not add one. */ .clients__list.is-marquee .client{opacity:1} /* the track holds exactly two copies, so -50% lands the second set precisely where the first began and the seam is unobservable */ @keyframes clients-marquee{ to{ transform:translateX(-50%) } } /* a moving link is a hostile target: stop for pointers and for keyboards */ .clients__row:hover .clients__list.is-marquee, .clients__row:focus-within .clients__list.is-marquee, .clients__list.is-marquee.is-paused{animation-play-state:paused} /* fade rather than clip, so a mark entering or leaving reads as continuing past the strip instead of being cut off at a hard edge */ .clients__row{ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); overflow:hidden; } @media (prefers-reduced-motion:reduce){ /* belt and braces: clients.js already refuses to build the marquee here */ .clients__list.is-marquee{animation:none} } /* nothing here animates any more, so reduced motion has nothing to switch off */ /* ========================================================================== 4 · SERVICES — INDEX + STAGE · "one world, five crops" The Stage is no longer a card: the artwork sits on the open canvas, bleeds to the right viewport edge, and every scene is one dominant surface. ========================================================================== */ /* ⚠ The huge top pad that used to be here existed to clear .room__rise, the opaque ramp that carried the page from dark into the old light room. The room is dark now, there is no ramp, and the padding is back to the section token. */ .svc{padding:var(--sec-lg) 0} .svc__grid{ /* 46/54, not 52/48: the diagrams carry small type (nav labels, chips, document lines) and were unreadable at the old column width. The index copy is short and loses nothing by giving the space up. */ display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr); gap:clamp(24px,3.2vw,56px);align-items:start; } /* --- the index (unchanged treatment) -------------------------------------- */ .svc__index{list-style:none;margin:0;padding:0;border-top:1px solid var(--panel-line)} .svc__item{border-bottom:1px solid var(--panel-line)} /* An , not a