/* ============================================================================ style-variants.css — structural options, applied via data attributes on by render.ts from client.json. This file exists because colour alone does not differentiate a template. Three sites with different palettes but identical corner radius, identical card treatment, and an identical hero still read as the same product. These knobs change the *shape* of the page, which is what a prospect actually registers as "a different design". Applied as: Every attribute is optional; omitting one falls back to the tokens.css default, so an old client.json keeps rendering exactly as before. ========================================================================== */ /* ---------- Corner radius ---------- */ html[data-radius="sharp"]{ --radius:0px; --radius-sm:0px; --radius-lg:0px } html[data-radius="soft"] { --radius:3px; --radius-sm:4px; --radius-lg:8px } html[data-radius="round"]{ --radius:10px; --radius-sm:12px; --radius-lg:20px } /* Sharp corners want a squarer button and a flatter brand mark to match — a pill-shaped tag next to 0px cards looks like an oversight. */ html[data-radius="sharp"] .ba-tag, html[data-radius="sharp"] .tier-flag{ border-radius:0 } html[data-radius="round"] .btn{ border-radius:100px } html[data-radius="round"] .brand-mark{ border-radius:50% } /* ---------- Card treatment ---------- */ html[data-cards="elevated"] .card, html[data-cards="elevated"] .service-card, html[data-cards="elevated"] .quote, html[data-cards="elevated"] .form-card{ border-color:transparent; box-shadow:0 4px 14px rgba(0,0,0,.18),0 18px 40px rgba(0,0,0,.22); } html[data-cards="elevated"] .card:hover, html[data-cards="elevated"] .service-card:hover{ box-shadow:0 8px 22px rgba(0,0,0,.24),0 26px 56px rgba(0,0,0,.3); } html[data-cards="flat"] .card, html[data-cards="flat"] .service-card, html[data-cards="flat"] .quote, html[data-cards="flat"] .form-card{ border-color:transparent;box-shadow:none; background:color-mix(in srgb, var(--accent) 7%, var(--bg-elev)); } html[data-cards="flat"] .card:hover, html[data-cards="flat"] .service-card:hover{ transform:none; background:color-mix(in srgb, var(--accent) 12%, var(--bg-elev)); box-shadow:none; } /* ---------- Hero: split ---------- Copy in one column, image in the other. Structurally different from the full-bleed default — no scrim, no overlay, the photo is a sibling of the text rather than a backdrop. Suits businesses whose photo is a product or a person rather than a scene. */ html[data-hero="split"] .hero{ min-height:0;align-items:stretch;background:var(--bg); } html[data-hero="split"] .hero::after{ display:none } /* no scrim over a side-by-side */ html[data-hero="split"] .hero-bg{ position:relative;order:2;flex:1 1 46%;min-height:340px; } html[data-hero="split"] .hero-bg img{ height:100%;width:100%;object-fit:cover } html[data-hero="split"] .hero-inner{ order:1;flex:1 1 54%;display:flex;flex-direction:column;justify-content:center; max-width:none;padding-block:clamp(80px,10vw,140px); padding-inline:var(--space-gutter); } html[data-hero="split"] .hero{ display:flex;flex-wrap:wrap;gap:0; max-width:var(--maxw);margin-inline:auto; } html[data-hero="split"] .hero h1{ max-width:16ch } @media (max-width:860px){ html[data-hero="split"] .hero-bg{ flex-basis:100%;min-height:260px;order:1 } html[data-hero="split"] .hero-inner{ flex-basis:100%;order:2;padding-block:clamp(44px,7vw,72px) } } /* ---------- Hero: centered ---------- Tighter image band with the copy centered over it. Reads more like a landing page than a brochure; good when the photo is atmospheric rather than informative. */ html[data-hero="centered"] .hero{ min-height:clamp(480px,72vh,720px);align-items:center;text-align:center; } html[data-hero="centered"] .hero-inner{ padding-block:clamp(90px,12vh,140px) } html[data-hero="centered"] .hero h1{ max-width:20ch;margin-inline:auto } html[data-hero="centered"] .hero .sub{ margin-inline:auto } html[data-hero="centered"] .hero-ctas, html[data-hero="centered"] .hero-badges{ justify-content:center } html[data-hero="centered"] .eyebrow{ justify-content:center } /* The eyebrow's leading rule reads as broken when the text is centred. */ html[data-hero="centered"] .eyebrow::before{ display:none } /* ---------- Display type weight & tracking ---------- Set per-typeface from typefaces.json. A condensed grotesque at 800 and a high-contrast serif at 500 need different letter-spacing to sit right, and hardcoding one value made every pairing look like the same font. */ h1,h2,h3,h4,h5{ font-weight:var(--display-weight,600); letter-spacing:var(--display-tracking,-0.02em); } /* ============================================================================ HERO ARCHITECTURES These are not skins. Each one is a different DOM emitted by hero() in renderer.mjs, and the rules below arrange it. A gallery built on a single hero structure reads as one template in six colourways — which is precisely what a prospect browsing styles is trying to rule out. Selectors hang off the section class, not off html[data-hero], because the markup itself differs per variant now. ========================================================================== */ /* ---------- Editorial: type only, no photograph ---------- */ .hero--editorial{ min-height:0;display:block; background:var(--bg-elev); border-bottom:1px solid var(--border-soft); } .hero--editorial .hero-inner{ padding-block:clamp(80px,14vh,170px) clamp(48px,7vh,90px); display:grid;gap:clamp(28px,5vw,64px); grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end; } .hero--editorial h1{ /* Derived from the scale, not fixed, so the type dial reaches this hero too. The multiplier keeps the editorial opening deliberately larger than the others, which was the point of the hardcoded value. */ font-size:calc(var(--text-hero) * 1.07); line-height:.98;max-width:14ch;margin-bottom:0; } .hero--editorial .hero-ed-foot .sub{margin-bottom:28px;font-size:1.06rem} @media (max-width:860px){ .hero--editorial .hero-inner{grid-template-columns:1fr;gap:26px} } /* ---------- Stacked: copy on colour, photograph beneath ---------- */ .hero--stacked{min-height:0;display:block;background:var(--bg-elev)} .hero--stacked .hero-inner{ position:static;padding-block:clamp(70px,11vh,130px) clamp(40px,6vh,72px); } .hero--stacked h1{max-width:17ch} .hero--stacked .hero-plate{ position:relative;inset:auto;height:clamp(320px,52vh,620px); } .hero--stacked .hero-plate img{width:100%;height:100%;object-fit:cover} .hero--stacked::after{display:none} /* ---------- Offset: photograph off the right edge, copy overlapping ------- */ .hero--offset{ min-height:clamp(560px,80vh,860px);display:flex;align-items:center; background:var(--bg-elev); } .hero--offset::after{display:none} .hero--offset .hero-slab{ position:absolute;right:0;top:0;bottom:0;width:62%;z-index:0; } .hero--offset .hero-slab img{width:100%;height:100%;object-fit:cover} .hero--offset .hero-inner{padding-block:clamp(50px,8vh,90px)} .hero--offset .hero-card{ position:relative;z-index:2;max-width:min(600px,58%); padding:clamp(28px,3.4vw,52px); background:var(--bg-elev); border:1px solid var(--border-soft); box-shadow:0 40px 100px rgba(0,0,0,.28); } .hero--offset h1{max-width:14ch} @media (max-width:900px){ .hero--offset{min-height:0;display:block} .hero--offset .hero-slab{position:relative;width:100%;height:300px} .hero--offset .hero-card{max-width:none;box-shadow:none;border:0;padding-inline:0} } /* ---------- Frame: inset, centred, photograph held inside a margin -------- */ .hero--frame{min-height:0;display:block;background:var(--bg)} .hero--frame::after{display:none} .hero--frame .hero-inner{ padding-block:clamp(66px,10vh,120px) 0;text-align:center; } .hero--frame h1{max-width:20ch;margin-inline:auto} .hero--frame .sub{margin-inline:auto} .hero--frame .hero-ctas, .hero--frame .hero-badges{justify-content:center} .hero--frame .eyebrow{justify-content:center} .hero--frame .eyebrow::before{display:none} .hero--frame .hero-framed{ position:relative;inset:auto;margin-top:clamp(38px,6vw,72px); border-radius:var(--radius-lg);overflow:hidden; aspect-ratio:21/9; } .hero--frame .hero-framed img{width:100%;height:100%;object-fit:cover} /* Keep the legacy html[data-hero] rules from fighting the new architectures — they were written for a single shared structure that no longer exists. */ html[data-hero] .hero--editorial, html[data-hero] .hero--stacked, html[data-hero] .hero--offset, html[data-hero] .hero--frame{display:revert} /* ============================================================================ VARIETY AXES 2 — buttons, rhythm, ink, and the new section variants. Added when 36 unique skins still shared the same bones: identical buttons, identical section separation, identical quote/FAQ/CTA shapes. Each axis is CSS-only and defaults to the classic look when the attribute is absent. ========================================================================== */ /* ---------- data-buttons: the most-touched element on the page ---------- */ html[data-buttons="pill"] .btn{border-radius:100px;padding-inline:26px} html[data-buttons="square"] .btn{border-radius:0} html[data-buttons="ghost"] .btn{ border-radius:0;background:transparent; border:2px solid var(--accent);color:var(--accent); text-transform:uppercase;letter-spacing:.08em;font-size:.82em; } html[data-buttons="ghost"] .btn-primary:hover{background:var(--accent);color:var(--accent-ink)} html[data-buttons="ghost"] .btn-outline{border-color:var(--border-accent);color:var(--fg)} /* ---------- data-rhythm: how sections separate ---------- */ /* flat: pure whitespace — no bands, more breathing room */ html[data-rhythm="flat"] .section-alt{background:transparent} html[data-rhythm="flat"] .section{padding-block:calc(var(--space-section) * 1.18)} /* ruled: no bands either — a firm rule above each section head instead */ html[data-rhythm="ruled"] .section-alt{background:transparent} html[data-rhythm="ruled"] .section-head{border-top:2px solid var(--fg);padding-top:22px} html[data-rhythm="ruled"] .section-head .eyebrow::before{display:none} /* banded is the default look — no override needed */ /* ---------- data-ink: how loudly the accent speaks ---------- */ /* mono: accent almost silenced — primary CTA only */ html[data-ink="mono"] .eyebrow{color:var(--fg-muted)} html[data-ink="mono"] .eyebrow::before{background:var(--fg-muted)} html[data-ink="mono"] .quote-stars svg{color:var(--fg-muted)} html[data-ink="mono"] .jr-cap .jr-idx, html[data-ink="mono"] .svc-menu dd{color:var(--fg)} /* loud: the accent claims surfaces, not just glyphs */ html[data-ink="loud"] .eyebrow{ color:var(--accent-ink);background:var(--accent); padding:5px 12px;border-radius:var(--radius-sm); } html[data-ink="loud"] .eyebrow::before{display:none} html[data-ink="loud"] .cta-band, html[data-ink="loud"] .cta-poster{background:var(--accent)} html[data-ink="loud"] .cta-band h2,.cta-poster h2, html[data-ink="loud"] .cta-band p{color:var(--accent-ink)} html[data-ink="loud"] .cta-band .btn-primary, html[data-ink="loud"] .cta-poster .btn-primary{ background:var(--accent-ink);color:var(--accent); } /* ---------- testimonial variants ---------- */ .tst-lead blockquote{ font-family:var(--font-display);font-weight:var(--display-weight,600); font-size:clamp(1.5rem, 1.1rem + 2.2vw, 2.7rem);line-height:1.25; max-width:26ch;margin:0 0 18px; } .tst-lead cite{color:var(--fg-muted);font-style:normal} .tst-lead cite strong{color:var(--fg);margin-right:8px} .tst-rest{ margin-top:clamp(26px,4vw,42px);display:grid;gap:14px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .tst-rest p{color:var(--fg-muted);font-size:.94rem;line-height:1.6;margin:0} .tst-rest cite{font-style:normal;opacity:.7} .tst-strip{padding-block:clamp(28px,4vw,44px);border-block:1px solid var(--border-soft)} .tst-strip-row{display:grid;gap:clamp(18px,3vw,40px);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .tst-strip figure{margin:0} .tst-strip blockquote{margin:8px 0 6px;font-size:.94rem;line-height:1.55} .tst-strip cite{color:var(--fg-muted);font-style:normal;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase} /* ---------- FAQ open variant ---------- */ .faq-cols{display:grid;gap:clamp(20px,3vw,36px);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0} .faq-cell dt{font-weight:600;margin-bottom:8px} .faq-cell dd{margin:0;color:var(--fg-muted);line-height:1.65} /* ---------- CTA variants ---------- */ .cta-poster{ min-height:min(72vh,680px);display:flex;align-items:center; background:var(--bg-elev);text-align:center; } .cta-poster h2{ font-size:clamp(2.2rem, 1.4rem + 4vw, 4.6rem);max-width:18ch; margin:0 auto 18px; } .cta-poster p{color:var(--fg-muted);max-width:52ch;margin:0 auto 30px;font-size:var(--text-lg)} .cta-line{padding-block:clamp(30px,5vw,54px);border-block:1px solid var(--border-soft)} .cta-line-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .cta-line h2{font-size:clamp(1.3rem,1rem + 1.4vw,2rem);margin:0;max-width:28ch}