/* ============================================================================ BASE — identical on every Pittsburgh IT build. The visitor never sees any of it. Token NAMES are fixed; only the VALUES change per client. Everything below the token block is structural: the accessibility floor, the form skeleton, tap targets, the motion contract. Roughly 20 lines get rewritten per client and several hundred lines of quality are inherited. MOBILE FIRST — every rule here is the small-screen rule. Breakpoints add. ========================================================================== */ :root{ --surface:#FFFFFF; --surface-2:#F7F4EE; --band:#C08A1E; --band-ink:#241703; --band-ink-2:#3A2604; --accent-on-band:#2B1B02; --ink:#131313; --ink-2:#4B4945; --ink-3:#5F5D58; --accent:#8A6110; --accent-2:#6E4C0B; --accent-ink:#FFFFFF; --line:#E2DED4; --maxw:1200px; --gutter:22px; --radius:0px; --accent-a12:rgba(138,97,16,.12); /* THE BOARD's surfaces. All four are DERIVED from --surface by an HSL lightness step in build.py, so the services section separates from the page by TONE and can never be a white card on a grey page. --board-accent is --accent unless it cannot hold 4.5:1 on --board, in which case build.py has already swapped it. */ --board:#e4e2de; --board-cell:#f6f5f3; --board-line:rgba(138,97,16,.30); --board-accent:#6E4C0B; --board-glow:rgba(138,97,16,.13); --board-shadow-1:rgba(19,19,19,.08); --board-shadow-2:rgba(19,19,19,.26); --font-display:'Libre Caslon Display',Georgia,'Times New Roman',serif; --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--surface);color:var(--ink); font-family:var(--font-body);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden} img,svg,video{max-width:100%;height:auto;display:block} h1,h2,h3,h4{font-family:var(--font-display);margin:0;line-height:1.08; font-weight:400;letter-spacing:-.012em} p{margin:0 0 1em} a{color:inherit} ul{margin:0;padding:0;list-style:none} /* --- container ------------------------------------------------------------ */ .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)} @media(min-width:760px){:root{--gutter:34px}} @media(min-width:1180px){:root{--gutter:48px}} /* --- accessibility floor -------------------------------------------------- */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent); color:var(--accent-ink);padding:12px 18px;border-radius:0 0 var(--radius) 0; font-weight:700;text-decoration:none} .skip:focus{left:0} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); clip-path:inset(50%);white-space:nowrap} /* honeypot: OFF-SCREEN, never display:none — a hidden field some bots skip, and a screen reader is told to leave it alone. */ .hp{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px; opacity:0;pointer-events:none} /* --- tap targets ---------------------------------------------------------- */ a,button,input,select,textarea,summary{font-family:inherit} .btn,button,input[type=submit]{min-height:48px} nav a,footer a{display:inline-block;min-height:24px} /* --- button skeleton (templates restyle the skin, not the mechanics) ------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em; padding:14px 26px;border:1px solid transparent;border-radius:var(--radius); font-weight:650;font-size:16px;line-height:1.1;text-decoration:none;cursor:pointer; transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} /* --- form skeleton -------------------------------------------------------- */ .form{display:grid;gap:16px} .field{display:grid;gap:7px} .field label{font-size:12.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-2)} .field input,.field select,.field textarea{ width:100%;min-height:50px;padding:13px 15px;border:1px solid var(--line); border-radius:var(--radius);background:var(--surface);color:var(--ink); font-size:16px;/* 16px stops iOS zooming the page on focus */ font-family:inherit;transition:border-color .18s ease,box-shadow .18s ease} .field textarea{min-height:140px;resize:vertical;line-height:1.55} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(138,97,16,.26)} .field ::placeholder{color:var(--ink-3);opacity:1} .frow{display:grid;gap:16px} @media(min-width:680px){.frow{grid-template-columns:1fr 1fr}} .thanks{display:none;border:1px solid var(--line);border-radius:var(--radius); padding:28px;background:var(--surface-2)} .thanks.show{display:block} .thanks h3{font-size:24px;margin-bottom:10px} .formerror{color:#E0A93A;font-size:15px;font-weight:600;margin-top:10px} /* --- MOTION CONTRACT ------------------------------------------------------ Nothing starts hidden unless JavaScript has already run. The `js` class is set by an inline script, and ONLY when prefers-reduced-motion is not set. No JS, blocked JS, old browser, or reduced motion => the page is simply visible. This is the inverse of how most sites do it, and it is why a script failure here cannot produce a blank page on a lead-generating site. */ html.js .reveal{opacity:0;transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)} html.js .reveal.in{opacity:1;transform:none} html.js .reveal.d1{transition-delay:.08s} html.js .reveal.d2{transition-delay:.16s} html.js .reveal.d3{transition-delay:.24s} @media(prefers-reduced-motion:reduce){ html.js .reveal,html.js .reveal.in{opacity:1!important;transform:none!important;transition:none!important} *{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important} } /* --- nav skeleton --------------------------------------------------------- */ #nav{position:fixed;top:0;left:0;right:0;z-index:100; transition:background .25s ease,box-shadow .25s ease,border-color .25s ease} .nav-inner{display:flex;align-items:center;justify-content:space-between; gap:16px;min-height:70px} .navtoggle{display:inline-flex;align-items:center;justify-content:center; width:48px;height:48px;margin-right:-10px;background:none;border:0; color:inherit;cursor:pointer} @media(min-width:940px){.navtoggle{display:none}} .nav-links{display:none} .nav-links.open{display:flex} .nav-links{gap:0} /* Desktop nav reset. Deliberately scoped to #nav so its specificity (1,1,0) beats any later `.nav-links{position:absolute…}` a template writes for its mobile drawer — equal specificity later in the file wins over a media query, which silently left the drawer stacked at the left edge on six of seven templates before this was scoped. It sets ONLY the structural properties that must not leak from mobile to desktop; gap, colour and type stay the template's business. */ @media(min-width:940px){ #nav .nav-links,#nav .nav-links.open{display:flex;position:static;inset:auto; flex-direction:row;align-items:center;padding:0;margin:0;border:0;background:none; width:auto;height:auto;min-height:0;max-height:none;box-shadow:none;transform:none; visibility:visible;opacity:1;overflow:visible; gap:var(--nav-gap,32px)} } html.menu-open,html.menu-open body{overflow:hidden} /* --- footer skeleton ------------------------------------------------------ */ footer a{text-decoration:none} .credit{font-size:13.5px} .credit a{text-decoration:underline;text-underline-offset:3px} /* --- button rows ---------------------------------------------------------- On a phone two CTAs sitting side by side at different intrinsic widths look accidental, and neither is a comfortable thumb target. They go full width until there is room for a row. Scoped as `.btnrow > .btn` (0,2,0) so a template's own `.btn{}` rule later in the file cannot silently undo it — the same cascade trap that left the desktop nav stacked. */ .btnrow{display:flex;flex-wrap:wrap;gap:12px} .btnrow > .btn{flex:1 1 100%} @media(min-width:560px){.btnrow > .btn{flex:0 0 auto}} /* --- long-string guard ---------------------------------------------------- A client email address or a compound word set in a heavy display face at 20px uppercase does not wrap, and pushes a 390px page sideways. Found on the Ironworks contact page: dispatch@vantagemechanical.com forced the document to 462px. Plumbing, so every template inherits the fix. */ /* Headings are deliberately NOT in this guard. break-word on a display heading shatters a word mid-syllable the moment its container is narrower than the word — it turned "Everything we make," into "Everyth / ing we / make," on Marquee. A heading that does not fit is a LAYOUT bug; fix the column, do not hyphenate it. */ h1,h2,h3,h4{overflow-wrap:normal;word-break:normal} a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere} .crow span,.crow b,.cinfo span,address{overflow-wrap:anywhere} /* --- utility -------------------------------------------------------------- */ .sec{padding:64px 0} @media(min-width:760px){.sec{padding:96px 0}} @media(min-width:1180px){.sec{padding:124px 0}} .eyebrow{font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase; color:var(--accent);margin:0 0 14px} .lead{font-size:19px;line-height:1.6;color:var(--ink-2)} @media(min-width:760px){.lead{font-size:21px}} /* ============================================================ THE BOARD ===== THE ONE services section for every one-page build, current and future. Jon, 2026-08-14: this replaces the board/menu section on every skeleton. Ruleset and worked examples: _system/onepage/SERVICES-SECTION.md. It renders BOTH shapes the contract carries, through one loop, because build.py normalises them into board.groups before this file ever sees them: services[] 4-6 headline offerings -> one untitled group menu[] a grouped price list -> one titled group each A barber with six services and a restaurant with eight menu groups get the same instrument, and the skeleton does not know which it got. WHY IT LIFTS BY TONE, NOT BY SHADOW. The page background is the brand's neutral base. The container is the SAME neutral at a different value, so it separates even before the shadow renders — on a low-contrast screen, in forced-colours, and in print, where the shadow is simply gone. A white card on a grey page is the default this exists to replace: it is the one move that makes a spec site look like a template, because it belongs to no brand. --board / --board-cell / --board-line are DERIVED FROM --surface in build.py by an HSL lightness step, never hand-typed, so they cannot drift off-palette when a client's logo repaints the page. THE PRICE IS A COLUMN, NOT THE POINT. A row with no price omits the cell and the other two tracks take the space; the section still renders, because the reason it exists is the list of services, not the figures beside them. One hook note prints above the grid when anything is unpriced — that is the only moment the page speaks to its own owner, and it is why a prospect writes back. TOKENS a skeleton sets (all have working defaults): --bd-cols columns in the grid default 1, 2 from 820px --bd-gap gutter between cells default 10px --bd-pad padding inside the container default 20px, 32px from 820px --bd-cell-pad padding inside a cell default 16px --bd-icon the icon plate default 46px, 52px from 820px --bd-glyph the glyph inside it default 24px, 26px from 820px --bd-price the price size default 21px, 24px from 820px --bd-edge the accent edge on a cell default a 2px gradient bar --bd-radius corner radius default calc(var(--radius)*1.4) --bd-glow accent halation around the panel DEFAULT OFF - opt in only on a skeleton whose idea is light --bd-accent the accent that is SAFE here — build.py falls back to --accent-2, then to --ink, if --accent cannot hold 4.5:1 on the container. Small uppercase text in a brand colour on a tonal surface is the exact place a palette goes unreadable. Parts to skin: .board .bgrid .bitem .bicon .bname .bdesc .btag .bprice .bgh ========================================================================== */ .board{ --bd-cols:1; --bd-gap:10px; --bd-pad:20px; --bd-cell-pad:16px; --bd-icon:46px; --bd-glyph:24px; --bd-price:21px; --bd-radius:calc(var(--radius) * 1.4); --bd-accent:var(--board-accent); --bd-glow:transparent; --bd-edge:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 62%,transparent 100%); background:var(--board); border:1px solid var(--board-line); border-radius:var(--bd-radius); padding:var(--bd-pad); /* THE GLOW IS OPT-IN AND OFF BY DEFAULT. Jon, 2026-08-14: "glow isn't right on all sites, we have a template that does glow... everything else is accurate." A halation is a LIGHT effect and it belongs to the skeleton whose organising idea is light (04 Lightbox). On a ruled ledger or a flat midday page it is a borrowed trick, and a device used everywhere is decoration. A skeleton opts in with --bd-glow:var(--board-glow). The lift itself does NOT depend on it: the colour step and the accent hairline carry it, which is why they are derived and not optional. */ box-shadow:0 0 46px -6px var(--bd-glow), 0 1px 2px var(--board-shadow-1), 0 26px 56px -24px var(--board-shadow-2); } @media(min-width:820px){.board{--bd-pad:32px;--bd-icon:52px;--bd-glyph:26px;--bd-price:24px}} /* THE GRID. Two columns from 820px, one below it, and the cell layout is the SAME at every width — icon, then the flexible middle, then the price. It does not restack on mobile, because a row that reflows into a different shape is a second design to maintain and it always reads as the cheaper one. */ .bgrid{display:grid;grid-template-columns:repeat(var(--bd-cols),minmax(0,1fr)); gap:var(--bd-gap);margin:0;padding:0;list-style:none} @media(min-width:820px){.board{--bd-cols:2}} .bitem{position:relative;display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start;column-gap:14px; padding:var(--bd-cell-pad); border-radius:calc(var(--bd-radius) * .7); background:var(--board-cell); overflow:hidden} /* The edge accent is a PSEUDO-ELEMENT, never a border-top: a border changes the box and a gradient cannot live on one side of it. ::before also means a skeleton can move the edge (left rail, full underline) by restyling one rule without touching the grid. */ .bitem::before{content:"";position:absolute;inset:0 0 auto 0;height:2px; background:var(--bd-edge)} .bicon{display:flex;align-items:center;justify-content:center; width:var(--bd-icon);height:var(--bd-icon);flex:none; border-radius:calc(var(--bd-radius) * .55); background:var(--accent-a12);color:var(--bd-accent)} /* The glyph is sized HERE and nowhere else. Every icon on the page is one library at one stroke weight (icons.py writes the wrapper), so the only thing a template may change is the size and the colour of the whole set. */ .bicon > svg{width:var(--bd-glyph);height:var(--bd-glyph);display:block} /* the flexible middle. min-width:0 or a long unbroken word (a URL in a blurb, an email address) blows the track out and pushes the price off the row. */ .bmain{grid-column:2;min-width:0} .bname{margin:0;font-family:var(--font-body);font-size:16.5px;font-weight:700; line-height:1.3;color:var(--ink)} .bdesc{margin:5px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-3)} /* justify-self:start or the chip fills its grid cell — a grid item stretches by default, and "45 MIN" drew a 350px rounded rectangle across the row the first time this was built. Found on the render, not in the markup. */ .btag{display:inline-block;justify-self:start;margin:8px 0 0; padding:3px 9px;border:1px solid var(--board-line); border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-2)} .bprice{grid-column:3;align-self:center;font-family:var(--font-display); font-size:var(--bd-price);font-weight:700;line-height:1.1; font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)} /* A GROUP HEADING IN THE BRAND COLOUR, and it stays with its list. */ .bgroup + .bgroup{margin-top:26px} .bgh{margin:0 0 10px;line-height:1.2;font-family:var(--font-body);font-size:12.5px;font-weight:750; letter-spacing:.14em;text-transform:uppercase;color:var(--bd-accent)} /* THE REPLY HOOK. Printed once, above the grid, only when something is unpriced. It is not an empty state — the cells with no price are already complete — it is the page asking its owner for the one thing only they have. */ .bhook{margin:0 0 16px;padding:13px 15px;border:1px dashed var(--board-line); border-radius:calc(var(--bd-radius) * .6);background:transparent} .bhook-l{display:block;margin:0 0 3px;font-size:11.5px;font-weight:750; letter-spacing:.14em;text-transform:uppercase;color:var(--bd-accent)} .bhook-t{display:block;font-size:14px;line-height:1.5;color:var(--ink-2)} /* ============================================================================ THE BAND — a page that changes its mind once, in public, and never changes it back. The top half is ink on white and behaves like a printed sheet. Then one solid amber section, a full viewport tall, carries a single sentence and the Google figure and NOTHING else. Everything after it is cream on near-black for the rest of the page. TWO RULES CARRY THE WHOLE DESIGN: 1 the surface changes EXACTLY TWICE in this file — white to amber, amber to near-black. There is no third change and there must never be one. 2 the amber is never a background anywhere else. It is a true ochre and it appears at size in one place; everywhere else it is a lit accent on the dark half and a deep ochre on the light one. Break either and the band stops being a hinge and becomes a stripe. MOBILE FIRST. Every rule here is the phone rule; breakpoints only add. ========================================================================== --------------------------------------------------------------------------- CLIENT SWAP BLOCK — the only lines that change per client live in template.json `defaults.brand` and `design`; nothing below hard-codes a colour or a face: --surface / --surface-2 the light half #FFFFFF / #F7F4EE --ink / --ink-2 / --ink-3 type on the light half --band / --band-ink / --band-ink-2 / --accent-on-band THE BAND, amber #C08A1E --dark / --dark-2 the inverted half #131313 / #1C1B19 --cream / --cream-2 type on the inverted half --amber-lit the amber where it lands on the dark half --accent / --accent-2 the ochre that is legible on white #8A6110 --hero-floor the worst pixel under the hero scrim --font-display Libre Caslon Display 400 --font-body Plus Jakarta Sans --radius 0px --maxw 1200px --------------------------------------------------------------------------- */ :root{ --dark:#131313; --dark-2:#1C1B19; --cream:#F4F0E8; --cream-2:#B9B3A6; --amber-lit:#E0A93A; --hero-floor:#2A2318; --grade:saturate(1.08) contrast(1.05); --nav-gap:30px; --rule:1px solid var(--line); --rule-d:1px solid rgba(244,240,232,.18); } /* ONE grade, one rule, every photograph on the page — the most saturated in the set, because this page's second half is atmosphere. There is no second filter in this file and there must never be one. */ .heroshot img,.mos-t img,.mframe img{filter:var(--grade)} /* ---------------------------------------------------------------- type ----- */ body{background:var(--surface)} /* PAGE HEIGHT. The contract's phone ceiling is 7,500px and this skeleton measured over it on the render, so the phone section rhythm is tightened here and only here - the desktop steps in base.css are untouched. */ .sec{padding:54px 0} /* Libre Caslon Display has ONE weight, so hierarchy here is size, colour and space — which suits a page that argues by changing surface rather than by getting louder. */ h1{font-size:clamp(36px,6.2vw,66px);line-height:1.06;letter-spacing:-.014em;margin:0} .h-lg{font-size:clamp(28px,4.2vw,44px);line-height:1.1;letter-spacing:-.012em} .h-md{font-size:clamp(24px,3.2vw,32px);line-height:1.14} h3{font-family:var(--font-body);font-size:17px;line-height:1.35;font-weight:700;letter-spacing:-.004em} .measure{max-width:56ch} .elab{font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--accent);margin:0 0 14px} .elab.ondark{color:var(--amber-lit)} .mono{font-family:var(--font-display);letter-spacing:.02em} /* THE INVERTED HALF. One class, declared once, and every section after the band carries it. Nothing below re-states a colour that this block already sets. */ .dark{background:var(--dark);color:var(--cream)} .dark h1,.dark h2,.dark h3{color:var(--cream)} .dark .lead,.dark p{color:var(--cream-2)} .dark a{color:var(--cream)} .dark :focus-visible{outline-color:var(--amber-lit)} /* ------------------------------------------------------------ preview bar -- */ .tplbar{position:fixed;top:0;left:0;right:0;z-index:130;background:var(--dark); color:var(--cream-2);font-size:12.5px;line-height:1.45;padding:8px var(--gutter);text-align:center} .tplbar b{color:var(--cream)} :root:has(.tplbar){--tpl-h:58px} @media(min-width:760px){:root:has(.tplbar){--tpl-h:36px}} #nav{padding-top:var(--tpl-h,0px)} /* -------------------------------------------------------------------- nav -- The masthead is cream over the photograph and ink on white once there is a page under it. It never goes amber: the amber is spent in one place. */ #nav.scrolled{background:var(--surface);box-shadow:0 1px 0 var(--line)} .nav-inner{gap:12px;flex-wrap:wrap} .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);min-height:44px} .brand .mono{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border-radius:50%;font-size:14px;color:var(--dark);background:var(--amber-lit)} .brandmark{width:40px;height:40px;object-fit:contain} .brandtype{font-family:var(--font-display);font-size:21px;letter-spacing:-.01em;white-space:nowrap} .navtoggle .bars{display:block;width:22px} .navtoggle .bars i{display:block;height:2px;margin:5px 0;background:var(--ink)} .navtoggle .bars i:nth-child(2){width:14px} .nav-links{flex:1 0 100%;flex-direction:column;align-items:flex-start;gap:2px;width:100%; padding:6px 0 16px;margin-top:6px;border-top:var(--rule)} .nav-links a{color:var(--ink-2);text-decoration:none;font-size:16px;font-weight:600; padding:11px 0;min-height:44px;display:flex;align-items:center;width:100%} .nav-links a:hover{color:var(--accent)} .drawhours{color:var(--ink-3);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;margin:8px 0 4px} .drawtel{color:var(--accent)!important;font-family:var(--font-display);font-size:22px!important} .navcta{background:var(--ink);color:var(--cream)!important;padding:0 22px!important; justify-content:center!important;border-radius:999px;font-weight:700;margin-top:8px} html.menu-open #nav{background:var(--surface)} #nav:not(.scrolled) .brandtype,#nav:not(.scrolled) .navtoggle{color:var(--cream)} #nav:not(.scrolled) .navtoggle .bars i{background:var(--cream)} html.menu-open #nav .brandtype,html.menu-open #nav .navtoggle{color:var(--ink)} html.menu-open #nav .navtoggle .bars i{background:var(--ink)} /* THE MASTHEAD SITS ON AN UNKNOWN PHOTOGRAPH. A spec site is sent to a prospect whose picture we have never seen, so the menu cannot depend on that picture having a dark corner. It gets a shadow on the TYPE rather than a scrim over the image: the photograph keeps its own exposure, which is the rule on this page, and the words stay legible over a bright one. Found on the render - the links landed on a chrome highlight and disappeared. */ #nav:not(.scrolled) .brandtype,#nav:not(.scrolled) .nav-links a, #nav:not(.scrolled) .navtoggle{text-shadow:0 1px 4px rgba(0,0,0,.55)} #nav:not(.scrolled) .nav-links a.navcta{text-shadow:none} @media(min-width:940px){ .nav-inner{flex-wrap:nowrap} .nav-links{flex:0 0 auto;width:auto;padding:0;margin:0;border:0;align-items:center} .nav-links a{width:auto;padding:0;font-size:14px;letter-spacing:.01em;color:var(--cream)} #nav.scrolled .nav-links a{color:var(--ink-2)} /* (0,2,0) DELIBERATELY. `.nav-links a{display:flex}` above is (0,1,1), so a bare `.drawtel{display:none}` LOSES to it and the drawer phone number printed in the desktop bar, in the accent, over the hero photograph. Found on the render. */ .nav-links .drawhours,.nav-links .drawtel{display:none} .navcta{padding:0 20px!important;min-height:42px;color:var(--cream)!important} #nav.scrolled .nav-links a.navcta{color:var(--cream)!important} } /* ------------------------------------------------------------------- hero -- ABOVE THE EDGE THE PHOTOGRAPH IS UNTOUCHED. The scrim is a BOUNDED BOX with a straight top, not a fade into the picture: the eye reads a printed band laid over the image rather than the image going murky, and the client's photograph keeps its own exposure across five sixths of the first screen. */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--dark)} .heroshot{position:absolute;inset:0;overflow:hidden} .heroshot picture{display:block;height:100%} .heroshot img{width:100%;height:100%;object-fit:cover;object-position:52% 52%} .heroscrim{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1; background:linear-gradient(0deg,rgba(11,10,9,.94) 0%,rgba(11,10,9,.82) 62%,rgba(11,10,9,.70) 100%)} .herowrap{position:relative;z-index:2;width:100%;padding-bottom:30px} .hkick{font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--amber-lit);margin:0 0 12px} .hero h1{color:var(--cream);max-width:20ch} /* THE DRAWN MOMENT — THE AMBER ITALIC, the house gesture. Colour and slope only. */ .hero .h1b{font-style:italic;color:var(--amber-lit)} .herofoot{margin-top:18px} .hsub{margin:0 0 20px;font-size:16.5px;line-height:1.55;color:var(--cream-2);max-width:52ch} .hero .btn-primary{background:var(--amber-lit);color:var(--dark);border-color:var(--amber-lit)} .hero .btn-primary:hover{background:#EFBB4E;border-color:#EFBB4E} .hero .btn-ghost{color:var(--cream);border-color:rgba(244,240,232,.5)} .hero .btn-ghost:hover{background:rgba(244,240,232,.12);border-color:var(--cream)} @media(min-width:860px){ .heroshot img{object-position:50% 46%} .heroscrim{height:34%} .herowrap{padding-bottom:44px} .hsub{font-size:18px;margin-bottom:0} .herofoot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end; column-gap:44px;margin-top:22px} } /* ------------------------------------------------------------------ facts -- */ .shead{margin-bottom:28px} .factlist{display:grid;gap:0;border-top:var(--rule)} .fact{padding:20px 0;border-bottom:var(--rule)} .fact h3{margin:0 0 4px} .fact p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)} .fstand{display:flex;flex-wrap:wrap;gap:4px 18px;margin:24px 0 0;font-size:14.5px;color:var(--ink-3)} .fstand b{color:var(--ink);font-weight:700} @media(min-width:760px){ .factlist{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:34px;border-bottom:var(--rule)} .fact{border-bottom:0} } /* ------------------------------------------------------------------- list -- The last thing on the light half. Everything after the band is atmosphere, so every number in the file lives here. */ .list{background:var(--surface-2)} .list .board{--bd-gap:10px;--bd-pad:24px;--bd-cell-pad:20px;--bd-price:26px; background:var(--surface);border-color:var(--line);border-radius:0} .list .bitem{background:var(--surface-2);border-radius:0} .list .bitem::before{background:var(--band)} .list .bname{font-size:17px} .list .bprice{font-family:var(--font-display);font-weight:400;color:var(--ink)} .list .btag{border-radius:999px;border-color:var(--line);color:var(--ink-3)} .list .bicon{border-radius:50%} .list .bhook{border-radius:0;border-style:dashed} .lfoot{margin:22px 0 0;font-size:14.5px;color:var(--ink-3);max-width:62ch} @media(min-width:820px){.list .board{--bd-pad:34px;--bd-price:30px}} /* ======================== THE BAND — the signature ========================== One viewport tall, one sentence, one number. Nothing else is allowed in here: no image, no button, no list, no eyebrow stack. It is the loudest thing in the set and it is loud by being almost empty. */ .band{background:var(--band);color:var(--band-ink); min-height:100svh;display:flex;align-items:center;padding:80px 0} .bandwrap{width:100%} .bandsay{margin:0;padding:0} /* 84px was right for a two-line review and wrong for the contract's placeholder, which ships as a paragraph of INSTRUCTION and must be rendered as written. 62px over 20ch holds both: a real review still fills a viewport on its own, and the instruction no longer runs to four screens. Measured on the render. */ .bandsay blockquote,.bandsay-plain{margin:0;font-family:var(--font-display); font-size:clamp(27px,4.6vw,62px);line-height:1.14;letter-spacing:-.016em; color:var(--band-ink);max-width:20ch} .bandsay blockquote::before{content:"\201C"} .bandsay blockquote::after{content:"\201D"} .bandsay figcaption{margin-top:20px;font-family:var(--font-body);font-size:11.5px; font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-on-band)} /* THE GOOGLE RATING, on the amber. Never a stat in a card: it is the only hard checkable fact on the page and it takes display scale. The attribution pill carries the OFFICIAL white asset unmodified, so it is given a near-black ground of its own rather than being recoloured — recolouring Google's wordmark is an imitation mark, not compliance. */ .rating{margin-top:44px;display:block} .rating-fig{position:relative} .rstars{position:relative;display:inline-block;font-size:clamp(21px,2.8vw,30px); letter-spacing:.14em;line-height:1;white-space:nowrap} .rstars i{font-style:normal;display:block} .rs-off{color:rgba(36,23,3,.3)} .rs-on{position:absolute;inset:0;overflow:hidden;width:var(--fill,100%);color:var(--band-ink)} .rnum{display:block;font-family:var(--font-display);letter-spacing:-.04em; font-size:clamp(86px,15vw,180px);line-height:.86;color:var(--band-ink);margin-top:8px} .rsay{margin:14px 0 0;font-family:var(--font-display);font-size:clamp(18px,2vw,25px); line-height:1.3;color:var(--band-ink-2);max-width:24ch} .rsay .rcount{color:var(--band-ink)} .gmpill{display:inline-flex;align-items:center;gap:9px;margin:18px 0 0;padding:9px 15px 9px 13px; border-radius:999px;text-decoration:none;background:var(--band-ink);border:1px solid var(--band-ink)} .gmpill:hover{background:#000;border-color:#000} .gmpill img{display:block;height:17px;width:auto} .gmpill .gmgo{font:700 13px/1 var(--font-body);color:#fff;white-space:nowrap} /* The empty review slots do not belong in a section whose whole design is that it carries one sentence — the ask for real reviews is made in the close instead. */ .band .rquotes{display:none} @media(min-width:900px){ .rating-fig{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:center} .rstars{grid-column:1;grid-row:1} .rnum{grid-column:1;grid-row:2;margin-top:0} .rsay{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0;max-width:15ch} .gmpill{grid-column:2;grid-row:3;justify-self:start} } /* ------------------------------------------------------------------- wall -- The first thing on the inverted half. */ .wallbleed{width:100%;margin-top:6px} .wallbleed .mos{--mos-gap:6px;--mos-gap-sm:5px;--mos-text-bg:var(--dark-2); /* the shared row height maxes at 190px, which letterboxes a wall bled to a 1440+ viewport (a 948x190 tile is five to one). Bleeding it is this template's decision. */ grid-auto-rows:clamp(120px,20vw,320px); grid-template-rows:repeat(var(--mos-rows,3),clamp(120px,20vw,320px))} .ourplates{margin:0 0 20px;font-size:14.5px;line-height:1.55;color:var(--cream-2);max-width:62ch} .crew{display:grid;gap:20px;margin-top:34px;grid-template-columns:repeat(2,minmax(0,1fr))} .mate h3{margin:12px 0 2px} .mate p{margin:0;font-size:14px;color:var(--cream-2)} .mframe{display:block;overflow:hidden;background:var(--dark-2)} .mframe img{display:block;width:100%;height:auto} @media(min-width:760px){.crew{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}} /* ------------------------------------------------------------------- asks -- */ .askgrid{display:grid;gap:26px} .askcall{margin:0;font-size:15px;color:var(--cream-2)} .askcall a{color:var(--amber-lit)!important;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor} .asklist{border-top:var(--rule-d)} .ask{border-bottom:var(--rule-d)} .ask summary{display:flex;align-items:flex-start;justify-content:space-between;gap:18px; padding:18px 0;cursor:pointer;list-style:none;font-weight:700;font-size:16.5px;color:var(--cream);min-height:44px} .ask summary::-webkit-details-marker{display:none} .ask summary i{flex:none;width:14px;height:14px;margin-top:6px;position:relative} .ask summary i::before,.ask summary i::after{content:"";position:absolute;background:var(--amber-lit)} .ask summary i::before{inset:6px 0 auto 0;height:2px} .ask summary i::after{inset:0 6px 0 auto;width:2px;transition:opacity .2s ease} .ask[open] summary i::after{opacity:0} .ask p{margin:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--cream-2);max-width:66ch} @media(min-width:900px){.askgrid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px}} /* ------------------------------------------------------------------ close -- */ .cgrid{display:grid;gap:34px;margin-top:34px} .week{display:grid;border-top:var(--rule-d)} .wrow{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:var(--rule-d);font-size:15.5px} .wd{color:var(--cream-2)} .wt{color:var(--cream);font-weight:700;font-variant-numeric:tabular-nums} .card{border:var(--rule-d);padding:20px} .cardlab{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-lit)} .cardline{margin:0 0 12px;font-family:var(--font-display);font-size:23px;color:var(--cream)} .cardask{margin:0;padding-top:12px;border-top:var(--rule-d);font-size:14px;line-height:1.55;color:var(--cream-2)} .crow{display:grid;gap:5px;margin-top:24px} .cbig{font-family:var(--font-display);font-size:23px;color:var(--cream);text-decoration:none} .cbig:hover{color:var(--amber-lit)} .crow address{font-style:normal;font-size:15.5px;color:var(--cream-2);margin-top:8px} .area{margin-top:24px;padding-top:20px;border-top:var(--rule-d)} .area h3{margin:0 0 6px} .area p{margin:0 0 10px;font-size:15.5px;color:var(--cream-2)} .towns{display:flex;flex-wrap:wrap;gap:7px} .towns span{border:var(--rule-d);border-radius:999px;padding:5px 12px;font-size:12.5px;color:var(--cream-2)} .formpanel{background:var(--dark-2);border:var(--rule-d);padding:24px} .formpanel .field label{color:var(--cream-2)} .formpanel .field input,.formpanel .field select,.formpanel .field textarea{ background:var(--dark);color:var(--cream);border-color:rgba(244,240,232,.24);border-radius:0} .formpanel .field ::placeholder{color:#8C877E} .formpanel .btn-primary{width:100%;background:var(--amber-lit);color:var(--dark);border-color:var(--amber-lit)} .formpanel .btn-primary:hover{background:#EFBB4E;border-color:#EFBB4E} .fineprint{margin:0;font-size:13px;line-height:1.55;color:var(--cream-2)} .thanks{border-radius:0;background:var(--dark-2);border-color:rgba(244,240,232,.24)} @media(min-width:760px){.formpanel{padding:30px}} @media(min-width:960px){.cgrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:52px}} /* ----------------------------------------------------------------- footer -- Still inverted. The page turned over once and it does not turn back. */ footer{background:var(--dark);color:var(--cream-2);padding:52px 0 34px;border-top:var(--rule-d)} .fgrid{display:grid;gap:30px} .fbrand .mono.big{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px; border-radius:50%;font-size:17px;color:var(--dark);background:var(--amber-lit)} .fname{margin:14px 0 6px;font-family:var(--font-display);font-size:23px;color:var(--cream)} .fabout{margin:0;font-size:14.5px;line-height:1.6;max-width:44ch} .fh{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:#8C877E;margin:0 0 12px} .fcol a,.fcol .fplain{display:block;font-size:15.5px;color:var(--cream-2);margin-bottom:5px} .fcol a:hover{color:var(--amber-lit)} .fcol address{font-style:normal;font-size:15.5px;margin-top:6px} .fnav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:36px;padding-top:22px;border-top:var(--rule-d)} .fnav a{font-size:14.5px;color:var(--cream-2)} .fnav a:hover{color:var(--amber-lit)} .fbase{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:13px;color:#8C877E} .fbase a{color:var(--cream-2)} @media(min-width:760px){.fgrid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:40px}} /* ==================================================== THE MOSAIC COMPONENT === One component, ten hardcoded layouts (see mosaic.py). The layout decides every tile's column span and row span; nothing is computed from the photographs, and nothing is randomised at runtime. Each layout is pre-validated so its tiles fill the 12-column grid exactly — no gaps, no orphan hanging below the rest. The tile is the shape. The picture fills it (cover), so any source aspect crops cleanly and the wall is a rectangle whatever the client sends. Row height is a clamp, so a twelve-tile layout is a wall and not a scroll. */ .mos{display:grid;grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(96px,13.5vw,190px); grid-template-rows:repeat(var(--mos-rows,3),clamp(96px,13.5vw,190px)); gap:var(--mos-gap,10px)} .mos-t{position:relative;overflow:hidden;border-radius:var(--radius,3px); background:var(--surface-2,#171512);margin:0;min-width:0} .mos-t img{display:block;width:100%;height:100%;object-fit:cover} /* a caption sits on the tile, so it never changes the tile's height */ .mos-cap figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px; display:flex;flex-direction:column;gap:1px;pointer-events:none; background:linear-gradient(180deg,rgba(9,8,7,0),rgba(9,8,7,.82))} .mos-cap figcaption b{font-size:13.5px;font-weight:600;color:#F0EAE0;line-height:1.25} .mos-cap figcaption span{font-size:11px;letter-spacing:.11em;text-transform:uppercase; color:rgba(240,234,224,.72)} /* a text tile is just another tile — same grid maths, no special case */ .mos-text{display:flex;flex-direction:column;justify-content:center; padding:clamp(14px,1.6vw,26px); background:var(--mos-text-bg,var(--surface-2,#171512))} .mos-text b{display:block;margin-bottom:7px;font-family:var(--font-display,inherit); font-size:clamp(15px,1.5vw,21px);font-weight:600;line-height:1.2; color:var(--ink,#F0EAE0)} .mos-text p{margin:0;font-size:clamp(12.5px,1.05vw,15px);line-height:1.5; color:var(--ink-2,#B8AE9E)} /* THE PHONE. A twelve-column mosaic is unreadable at 390px, but stacking every tile full width is not the answer either: it turned an eight-tile wall into 2,071px of scroll and pushed whole pages past the height ceiling. It also stops being a mosaic. So the phone gets a TWO-column mosaic. Same tiles, same order, square cells - the wall is still a wall and the height roughly quarters. THE ODD-COUNT ORPHAN, which is the thing Jon actually objected to: with two columns an odd number of tiles leaves the last one alone on its row. `:last-child:nth-child(odd)` is true only when the tile is BOTH last and at an odd position - i.e. exactly when the count is odd - and widening it to both columns closes the block. Even counts are already flush, and the rule cannot fire on them. */ @media(max-width:699px){ .mos{grid-template-columns:repeat(2,1fr);grid-template-rows:none; grid-auto-rows:auto;gap:var(--mos-gap-sm,8px)} .mos-t{grid-column:auto/span 1 !important;grid-row:auto !important; aspect-ratio:var(--mos-sm-ar,1/1)} .mos-t:last-child:nth-child(odd){grid-column:auto/span 2 !important; aspect-ratio:var(--mos-sm-ar-wide,16/9)} .mos-text{aspect-ratio:auto !important;min-height:132px} .mos-cap figcaption{padding:20px 10px 9px} .mos-cap figcaption b{font-size:12.5px} } /* Very narrow phones: two columns of a 12-photo wall get tight, but one column is still worse than a small tile, so the columns hold and only the gap tightens. */ @media(max-width:359px){ .mos{gap:6px} } /* ============================================ THE PITTSBURGH IT BLURB (bottom) === Jon, 2026-08-14. First the three how-it-works boxes were flagged - "this isn't an actual part of their site" - then: "wait, just remove it... maybe just put a blurb all the way at the bottom saying what those 3 boxes say, and put it in our branding." So the three boxes are GONE from every skeleton, and what they said is now one branded block below the footer. It is the only place on the page that is Pittsburgh IT speaking rather than the shop, and it looks like it: our gold rule, our name, our contact. A prospect can tell in one glance which words are theirs and which are ours. Shared, and loaded after every template sheet, so it cannot drift per skeleton. */ .pghblurb{ /* PITTSBURGH IT GOLD, hardcoded on purpose. Using var(--accent-2) inherited the CLIENT's colour, so the block that is supposed to read as US came out in THEIR brand - Roberto's printed it orange. Nothing in here may take a client token. */ border-top:3px solid #e3c05a; background:#0E0D0C;color:#B8AE9E; padding:26px 0 30px;font-size:14px;line-height:1.62} .pghblurb .pgb{max-width:min(1160px,92vw);margin:0 auto} .pghblurb .pgb-mark{ margin:0 0 7px;font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:#e3c05a} .pghblurb .pgb-body{margin:0;max-width:64ch;color:#CFC6B8} .pghblurb .pgb-body b{color:#F0EAE0;font-weight:600} .pghblurb .pgb-line{ margin:13px 0 0;font-size:13px;color:#8E8677; display:flex;gap:9px;flex-wrap:wrap;align-items:baseline} .pghblurb .pgb-line a{color:#e3c05a;text-decoration:none;border-bottom:1px solid rgba(227,192,90,.4)} .pghblurb .pgb-line a:hover{border-bottom-color:#e3c05a} .pghblurb .pgb-sep{opacity:.45} @media(max-width:699px){ .pghblurb{padding:22px 0 26px;font-size:13.5px} .pghblurb .pgb-line{gap:6px} }