/* Site Sprint template — token-driven so a rebrand is a variable change. Four theme presets selected by (set from data.js). */ :root { --ink:#1A2330; --dim:#5C6B7A; --bg:#FFFFFF; --soft:#F5F7FA; --line:#E4E9EF; /* --accent fills, --accent-text is the same colour as TYPE (site.js contrast-corrects it when a pale client accent can't carry 15px text) */ --accent:#1E62D0; --accent-ink:#FFFFFF; --accent-text:var(--accent); --radius:12px; --font:-apple-system,"Segoe UI",Roboto,sans-serif; --display:var(--font); } [data-theme="trade"] { --accent:#D96B12; --ink:#20242B; --soft:#F7F4EF; } [data-theme="warm"] { --accent:#7A8450; --ink:#2E2A24; --bg:#FDFBF7; --soft:#F4EFE6; --line:#E7DFD2; } [data-theme="sharp"] { --ink:#EAF0F6; --dim:#93A1B0; --bg:#101720; --soft:#18212C; --line:#243040; --accent:#E8B54A; --accent-ink:#141414; } [data-theme="studio"] { --ink:#F2F6FF; --dim:#8FA0BC; --bg:#070B14; --soft:#0F1727; --line:#1D2A47; --accent:#F5B84D; --accent-ink:#160F02; --dw:800; } * { box-sizing:border-box; margin:0; } body { font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6; } img { max-width:100%; display:block; border-radius:var(--radius); } .wrap { max-width:1020px; margin:0 auto; padding:0 20px; } header.top { position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--line); z-index:10; } /* padding-block, NOT the shorthand: this element is class="wrap topRow" and the shorthand zeroes .wrap's horizontal padding. Invisible on desktop, where the wrap is narrower than the viewport and centred anyway — but on a phone that padding is the only thing holding content off the screen edge, and the logo sat flush against it while the last nav link fell off the other side. */ .topRow { display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:12px; } .logo { font-weight:900; font-size:19px; color:var(--ink); text-decoration:none; } nav[data-nav] { display:flex; gap:18px; align-items:center; } nav[data-nav] a { color:var(--ink); text-decoration:none; font-weight:600; font-size:15px; } nav[data-nav] a.navCta { background:var(--accent); color:var(--accent-ink); padding:9px 18px; border-radius:9px; font-weight:800; } .hero { padding:64px 0 44px; } .hero h1 { font-family:var(--display); font-size:clamp(30px,5.4vw,54px); line-height:1.08; font-weight:var(--dw,900); max-width:720px; letter-spacing:-.5px; } .hero .tag { margin-top:14px; font-size:18px; color:var(--dim); max-width:600px; } .ctaRow { margin-top:26px; display:flex; gap:12px; flex-wrap:wrap; } .btn { display:inline-block; padding:13px 26px; border-radius:10px; font-weight:800; text-decoration:none; font-size:16px; } .btn.primary { background:var(--accent); color:var(--accent-ink); } .btn.ghost { border:1.5px solid var(--accent-text); color:var(--accent-text); } .proofStrip { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; padding:26px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .stat { text-align:center; } .stat b { display:block; font-size:24px; font-weight:900; color:var(--accent-text); } .stat span { color:var(--dim); font-size:13.5px; } section { padding:46px 0; } section + section { border-top:1px solid var(--line); } h2 { font-family:var(--display); font-size:26px; font-weight:900; margin-bottom:10px; } .lead { color:var(--dim); max-width:640px; margin-bottom:24px; } .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; } /* auto-fit put 4 services in a 3-up row and left the fourth stranded beside two empty columns — the shape reads as a card that failed to load. Four items want 2x2; five or more are fine flowing. */ .grid:has(> :nth-child(4):last-child) { grid-template-columns:repeat(2,minmax(250px,1fr)); } @media (max-width:640px) { .grid:has(> :nth-child(4):last-child) { grid-template-columns:1fr; } } .card { background:var(--soft); border:1px solid var(--line); border-radius:var(--radius); padding:22px; } .card h3 { font-size:17px; margin-bottom:8px; } .card p { color:var(--dim); font-size:14.5px; } .card .price { margin-top:12px; font-weight:800; color:var(--accent-text); } .chips { display:flex; flex-wrap:wrap; gap:8px; } .chip { border:1px solid var(--line); background:var(--soft); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600; } dl[data-faq] dt { font-weight:800; margin-top:18px; } dl[data-faq] dd { margin:6px 0 0; color:var(--dim); } form[data-form] { max-width:520px; } form[data-form] label { display:block; font-weight:700; font-size:14px; margin:14px 0 6px; } form[data-form] input, form[data-form] textarea, form[data-form] select { width:100%; border:1.5px solid var(--line); border-radius:9px; padding:11px 12px; font:inherit; font-size:15px; background:var(--bg); color:var(--ink); } form[data-form] input:focus, form[data-form] textarea:focus { outline:none; border-color:var(--accent-text); } form[data-form] button { margin-top:18px; background:var(--accent); color:var(--accent-ink); border:0; font-weight:800; font-size:16px; padding:13px 30px; border-radius:10px; cursor:pointer; } .formMsg { margin-top:10px; font-size:14px; font-weight:700; color:var(--accent-text); } .gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; } footer.bottom { border-top:1px solid var(--line); padding:30px 0 44px; color:var(--dim); font-size:14px; } footer.bottom a { color:var(--dim); } footer.bottom [data-footer] { display:flex; flex-direction:column; gap:6px; } @media (max-width:640px) { nav[data-nav] a:not(.navCta) { display:none; } /* phone: logo + CTA only */ .hero { padding:44px 0 32px; } } @media print { header.top, .ctaRow, form[data-form] { display:none; } } /* ---------- v2 industry blocks ---------- */ .emerg { display:flex; justify-content:center; gap:14px; align-items:center; background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:14px; padding:9px 14px; } .emerg a { color:inherit; text-decoration:underline; font-weight:900; } .badgeRow { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .badge { border:1px solid var(--line); background:var(--soft); border-radius:7px; padding:4px 10px; font-size:12px; font-weight:700; color:var(--dim); } .ctaTrust { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .licLine { margin-top:8px; font-size:12.5px; color:var(--dim); } .offersGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; } .offer { border:2px dashed var(--accent); border-radius:12px; padding:18px; background:var(--soft); display:flex; flex-direction:column; gap:6px; } .offer b { font-size:18px; } .offer span { color:var(--dim); font-size:13px; } .offer a { margin-top:8px; align-self:flex-start; background:var(--accent); color:var(--accent-ink); font-weight:800; border-radius:8px; padding:8px 16px; text-decoration:none; font-size:14px; } .finBand { border-radius:var(--radius); background:var(--soft); border:1px solid var(--line); padding:24px; } .finInner { display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .finInner b { font-size:19px; } .finInner span { color:var(--dim); } .finInner a { margin-left:auto; } .clubCard { border:1.5px solid var(--accent); border-radius:var(--radius); padding:24px; max-width:460px; background:var(--soft); } .clubHead { display:flex; justify-content:space-between; align-items:baseline; } .clubHead b { font-size:19px; } .clubPrice { font-weight:900; color:var(--accent-text); font-size:22px; } .clubCard ul { margin:14px 0 18px 18px; } .clubCard li { margin-bottom:6px; } .teamCard .teamTitle { color:var(--accent-text); font-weight:700; font-size:13px; margin:2px 0 8px; } .teamCard .teamBook { display:inline-block; margin-top:10px; border:1.5px solid var(--accent-text); color:var(--accent-text); border-radius:8px; padding:7px 14px; text-decoration:none; font-weight:800; font-size:13.5px; } .quoteCard { background:var(--soft); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:20px 22px; } .quoteCard p { font-size:16px; font-weight:600; } .quoteCard .who { margin-top:8px; color:var(--dim); font-size:13.5px; font-weight:700; } .quotes { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; } .shot { margin:0; } .shot img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:1px solid var(--line); } .shot figcaption { font-size:13px; color:var(--dim); margin-top:6px; font-weight:600; } .heroImgBand.hasImg { background-size:cover; background-position:center; border-radius:var(--radius); min-height:300px; position:relative; } .pricingNote { color:var(--dim); font-size:14px; margin-top:14px; max-width:640px; } /* live embed frame (studio) */ .buildBar { display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); border-bottom:0; border-radius:14px 14px 0 0; background:var(--soft); } .buildBar .dot { width:10px; height:10px; border-radius:50%; background:var(--line); } .buildBar .addr { flex:1; text-align:center; font-size:12.5px; color:var(--dim); font-weight:600; font-family:ui-monospace,Consolas,monospace; } .vpClip { position:relative; height:520px; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:0 0 14px 14px; } .vpClip iframe { border:0; display:block; background:#fff; transform-origin:0 0; } /* process steps (was missing — found by dogfood v2) */ .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; } .step { background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:18px; color:var(--dim); font-size:14px; } .step b { display:block; margin:6px 0 4px; font-size:15.5px; color:var(--ink); } .step .n { color:var(--accent-text); font-weight:900; font-size:11.5px; letter-spacing:1.6px; } /* instant-quote calculator */ .calc { background:var(--soft); border:1.5px solid var(--accent); border-radius:16px; padding:22px; max-width:560px; } .calcRow { display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .calcRow label { font-weight:700; font-size:13.5px; } .calcRow select { border:1.5px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; background:var(--bg); color:var(--ink); } .calcFreq { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; } .freqBtn { border:1.5px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:7px 14px; font-weight:700; font-size:13.5px; cursor:pointer; } .freqBtn em { font-style:normal; color:var(--accent-text); font-weight:800; } .freqBtn.on { border-color:var(--accent-text); background:var(--accent); color:var(--accent-ink); } .freqBtn.on em { color:inherit; } .calcAdd { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px; } .addChk { font-size:13.5px; font-weight:600; display:flex; gap:6px; align-items:center; } .addChk input { width:auto; } .addChk span { color:var(--dim); } .calcOut { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; flex-wrap:wrap; } .calcPrice { font-size:34px; font-weight:900; color:var(--accent-text); } .calcPer { color:var(--dim); font-size:13.5px; } .calcNote { margin-top:10px; font-size:12.5px; color:var(--dim); } /* Services page rhythm. Six identical stacks of prose is a wall; alternating bands give the eye somewhere to rest and make each service feel like its own answer rather than another paragraph. Full-bleed so the band reads as a change of room, not an indented box. */ .svcBand { position:relative; } /* Contained, not full-bleed. The bleed pushed a pseudo-element 50vw past each edge, which is 100vw of overflow — the services page scrolled sideways by 490px on desktop and 175px on a phone, and overflow-x:clip on the body did not hold it. A tinted card inside the column gives the same rhythm and cannot overflow by construction. */ .svcBand { background:color-mix(in srgb, var(--accent) 6%, var(--bg)); border-radius:14px; padding:28px 30px; margin:22px 0; } @media (max-width:640px) { .svcBand { padding:22px 20px; margin:16px 0; } } /* Client-only photo slots — see the note in site.js */ .photoSlot { display:none; } .isPreview .photoSlot { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:2px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius:12px; background:color-mix(in srgb, var(--accent) 4%, var(--bg)); min-height:190px; padding:22px; margin-top:20px; text-align:center; } .isPreview .photoSlot b { font-size:15px; color:var(--ink); } .isPreview .photoSlot span { font-size:13.5px; color:var(--dim); max-width:44ch; line-height:1.5; } .isPreview .photoSlot em { font-size:12px; color:var(--dim); font-style:normal; opacity:.75; } /* Price rows — the money in two seconds instead of three paragraphs */ .priceRows { display:grid; gap:0; margin:6px 0 16px; } .priceRows > div { display:flex; align-items:baseline; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); } .priceRows > div:last-child { border-bottom:0; } .priceRows dt { font-size:26px; font-weight:800; letter-spacing:-0.01em; color:var(--ink); min-width:86px; } .priceRows dd { margin:0; color:var(--dim); font-size:15.5px; } /* Numbered steps — a sequence should look like one */ .steps { list-style:none; counter-reset:s; padding:0; margin:6px 0 14px; display:grid; gap:12px; } .steps li { counter-increment:s; position:relative; padding-left:44px; font-size:15.5px; color:var(--dim); line-height:1.55; } .steps li b { color:var(--ink); } .steps li::before { content:counter(s); position:absolute; left:0; top:-1px; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; } .lede { color:var(--dim); font-size:15.5px; } /* A punch list should look like one — the shape does half the explaining */ .jobList { list-style:none; padding:0; margin:10px 0 14px; display:grid; gap:8px; } .jobList li { position:relative; padding-left:26px; color:var(--dim); font-size:15.5px; } .jobList li::before { content:''; position:absolute; left:2px; top:.5em; width:9px; height:9px; border:2px solid var(--accent); border-radius:2px; } /* The line that stops a town list reading as a whitelist */ .areaNote { color:var(--dim); font-size:15px; margin-top:12px; max-width:60ch; } /* The page headline sits ON the banner. Without an image it is a plain heading — no dark box, no empty band, nothing to remove at go-live. */ /* The page title has to outrank the section headings under it. At 32px against a 26px h2 it read as one more heading rather than the title of the page, and 4px of clearance below put it right on top of the first one. */ .pageHead { margin:6px 0 34px; } .pageHead.has h1 { font-size:clamp(32px,4.6vw,52px); line-height:1.04; } .pageHead.has { position:relative; border-radius:14px; overflow:hidden; min-height:clamp(210px,30vw,330px); display:flex; align-items:flex-end; background-size:cover; background-position:center; box-shadow:0 18px 44px rgba(20,28,40,.18); } .pageHead.has::before { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(12,18,26,.86) 0%, rgba(12,18,26,.5) 52%, rgba(12,18,26,.2) 100%); } .pageHead.has .phInner { position:relative; padding:26px 30px 28px; max-width:62ch; } .pageHead.has h1 { color:#fff; } .pageHead.has .tag { color:rgba(255,255,255,.9); } @media (max-width:640px) { .pageHead.has .phInner { padding:20px 20px 22px; } } /* PHONE HEADER — the inner pages load THIS file, not dna.css. * * Every phone header rule was written in dna.css, which only index.html loads. * So the homepage got working navigation and services/about/contact got a logo * and a button — no way to reach anything — while every check I ran passed, * because I was only ever testing the homepage URL. * * Same behaviour as the homepage: links visible, the redundant CTA gone (the * page has its own, and the call bar is pinned), nothing wrapping. */ @media (max-width:640px) { header.top nav.mainNav a:not(.navCta):not(.navPhone) { display:inline-block; font-size:14.5px; } /* Both buttons on one line, like the homepage hero. This rule existed only in dna.css, which the inner pages do not load — so services/about/contact stacked two half-width buttons that read as one broken control. Third time today a phone rule was written in the stylesheet only the HOMEPAGE loads. */ .ctaRow { flex-wrap:nowrap; gap:8px; } .ctaRow .btn { flex:1 1 0; text-align:center; padding-left:10px; padding-right:10px; white-space:nowrap; font-size:15px; } nav.mainNav { display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:18px; align-items:center; } nav.mainNav a.navCta { display:none; } nav.mainNav .navPhone { display:none; } /* padding-block only — the shorthand killed .wrap's horizontal padding on the same element (class="wrap topRow"), which put the logo flush against the screen edge and pushed the last nav link off the other side. */ .topRow { align-items:center; padding-top:12px; padding-bottom:12px; } .logo { font-size:17px; line-height:1.12; } } /* Contact: form and the details beside it. */ .contactCols { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:start; } .contactAside h2 { margin-top:0; } .contactAside .chips { margin-top:10px; } @media (max-width:820px) { .contactCols { grid-template-columns:1fr; gap:30px; } }