/* Central Coast Concrete - Arroyo Grande - spec build #42 --------------------------------------------------------------------------- PHOTO-LED, and the structure is built around ONE photograph. p02 holds the poured half and the unpoured half of the same driveway in a single frame, split by the form board across the middle. That is the page's thesis image and it sits directly under the headline, at its NATURAL PORTRAIT ASPECT with the caption beside it. Every predecessor used its photographs differently and this one must too: #37 text beside one photo #38 text above one full-bleed photo #39 text over a photo #40 a triptych, three edge to edge #41 no photographs at all, the reviews were the spine Here the sequence of the work is the spine, because there is no testimony to build one out of. ⚠⚠ THIS BUSINESS HAS ZERO REVIEWS. A first. No rating, no reviews, no hours published. So the page cannot lean on customers at all. What carries it instead is the STATE RECORD and HIS OWN PHOTOGRAPHS - the R J Potter #34 thesis - plus one Google post in his own words from 2026-09-02. Do not add a testimonial section; there is nothing true to put in one. ⭐⭐ THE PALETTE IS SAMPLED FROM HIS OWN LOGO, which was sitting in the photo set as p05 (a printed card photographed on a wall). The card is NOT published - it is skewed and colour-cast and would read as a snapshot of a business card - but it gave the real brand colours. ⚠ AND IT HAD TO BE WHITE-BALANCED FIRST. The card stock photographs as about #BCC5CF, not white, so sampling straight off it pulled every colour toward blue. The ink was found by clustering saturated pixels by hue rather than by guessing coordinates - a first attempt at eyeballed coordinates landed on blank card five times out of five. #0F3865 navy hue 211 the dominant ink: the arc and the CONCRETE wordmark #458345 green hue 120 the CENTRAL COAST wordmark and the inner arc #4285B5 sky hue 205 the upper arc ⚠⚠ THE NAVY COLLIDES WITH #37's SAMPLED SIGN BLUE - hue 211.4 against 211.9, which is the same colour. The locked rule is that the palette comes from the client's own material, so the brand wins over the separation rule. THE PAGE IS KEPT APART FROM #37 BY LEADING WITH THE GREEN instead: hue 120 is unlike anything in the last five builds (#39 stain 15, #40 olive 39, #41 teal 182, #37 blue 212, #38 navy 218). ⚠⚠ BOTH SAMPLED ACCENTS DIE ON THE DARK GROUND - green 2.58 on the navy, sky 2.96. That is the light-grounds-only trap for the FOURTH time in five builds (#38 navy 2.12, #39 stain 1.95, #40 olive 1.84). Checked before choosing this time, not after, so the dark band uses white and a light green instead. ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED. #0F3865 on white 11.84 | on paper 10.78 | white on it 11.84 #376F37 on white 6.01 | on paper 5.48 -> body text ok #458345 on white 4.58 -> large text/fills #4285B5 on white 4.00 ⚠ FAILS NORMAL TEXT - large text and fills ONLY #4A5560 on white 7.61 | on paper 6.93 -> muted body #8FD18F on navy 6.59 | on white 1.80 DARK GROUNDS ONLY #C8D6E6 on navy 8.01 -> body on dark #93A8C2 on navy 4.86 -> labels on dark --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --paper: #F2F5F3; /* navy 10.78, green 5.48, muted 6.93 */ --navy: #0F3865; /* SAMPLED. ink, headings, and the dark ground */ --green: #376F37; /* brand green, darkened to clear body text at 6.01 */ --green-s:#458345; /* SAMPLED as-is. large text and fills only, 4.58 */ --green-h:#2C5C2B; /* hover, white on it 7.86 */ --sky: #4285B5; /* SAMPLED. ⚠ 4.00 - large text and fills ONLY */ --muted: #4A5560; /* on white 7.61 */ --rule: #DFE5E2; --green-l:#8FD18F; /* DARK GROUNDS ONLY - 1.80 on white */ --rule-d: #2A4A73; --body-d: #C8D6E6; /* on navy 8.01 */ --dim-d: #93A8C2; /* on navy 4.86 */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --wide: 1180px; --s-sm: 8px; --s-md: 16px; --s-lg: 26px; --s-xl: 36px; --s-2xl: 60px; --sect: clamp(64px, 9vw, 108px); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--navy); font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } ::selection { background: var(--green-l); color: var(--navy); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--green); } /* One container width, so every section shares a left edge. Reading measure is imposed on the prose elements - the #41 lesson, where a 680px container made three service cards 200px wide in a 1440px window. */ .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; } .eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--green); flex: none; } /* ⚠ on the navy the accent is the LIGHT green - the brand green is 2.58 there */ .eyebrow.on-dark { color: var(--green-l); } .eyebrow.on-dark::before { background: var(--green-l); } /* ── Masthead ─────────────────────────────────────────────────────────── */ .mast { border-bottom: 1px solid var(--rule); } .mast .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; padding-block: 18px; } .mast .mark { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; } .mast .mark span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted); margin-top: 5px; font-weight: 400; } .mast .tel { background: var(--green); color: #fff; font-size: 17px; font-weight: 700; /* 6.01 */ text-decoration: none; white-space: nowrap; border-radius: 7px; padding: 10px 18px; } .mast .tel:hover { background: var(--green-h); } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { background: var(--paper); padding-block: clamp(54px, 8vw, 92px); } .hero h1 { margin: 0 0 var(--s-md); max-width: 30ch; font-size: clamp(34px, 5.2vw, 56px); line-height: 1.05; letter-spacing: -0.034em; font-weight: 800; } .hero h1 em { font-style: normal; color: var(--green); } /* 5.48 on paper */ .hero p.lede { margin: 0 0 var(--s-xl); color: var(--muted); font-size: 19px; max-width: 56ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; } .btn { display: inline-block; background: var(--green); color: #fff; /* 6.01 */ font-size: 16.5px; font-weight: 700; padding: 14px 26px; border-radius: 7px; text-decoration: none; border: 1px solid transparent; } .btn:hover { background: var(--green-h); } .btn.ghost { background: var(--ground); color: var(--navy); border-color: #C6D0CC; } .btn.ghost:hover { border-color: var(--green); } .btn.light { background: var(--green-l); color: var(--navy); } /* dark grounds */ .btn.light:hover { background: #A6DCA6; } /* ── THE THESIS PHOTO: full bleed, straight under the headline ────────── */ /* ⚠ THIS PHOTO IS PORTRAIT, 1200x1600, AND IT MUST NOT BE COVER-CROPPED. The first draft ran it full bleed with `object-fit: cover; max-height: 78vh` and the crop threw away the top of the frame - the same mistake as #38, where cover cropped the word "Clean" off the hero. The whole point of the picture is that it holds BOTH halves of the driveway at once, so cropping it destroys the one thing it is there to show. It runs at its natural aspect, beside its caption, and the caption is top-aligned to the photo's top edge. */ .thesis { background: var(--paper); padding-bottom: var(--sect); } .thesis figure { margin: 0; } .thesis .cap { display: grid; gap: var(--s-xl) 48px; align-items: start; } @media (min-width: 900px) { .thesis .cap { grid-template-columns: minmax(340px, 560px) 1fr; } } .thesis .shot { width: 100%; border-radius: 10px; } .thesis .cap .tag { margin-top: 4px; margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--green); font-weight: 600; } .thesis .cap p { margin: 0; color: var(--muted); max-width: 64ch; } .thesis .cap strong { color: var(--navy); } /* ── Sections ─────────────────────────────────────────────────────────── */ section { padding-block: var(--sect); } .band-paper { background: var(--paper); } .band-navy { background: var(--navy); color: var(--body-d); } .band-navy h2 { color: #fff; } h2 { margin: 0 0 var(--s-md); font-size: clamp(28px, 3.5vw, 40px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; max-width: 24ch; } h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.018em; } p { margin: 0 0 var(--s-md); } p:last-child { margin-bottom: 0; } .intro { font-size: 19px; max-width: 58ch; color: var(--muted); } /* ── The finished work ────────────────────────────────────────────────── */ .jobs { display: grid; gap: var(--s-xl); margin-top: var(--s-2xl); } @media (min-width: 900px) { .jobs { grid-template-columns: 1fr 1fr; align-items: start; } } /* equal columns: both photos are 4:3, so the captions line up */ .jobs figure { margin: 0; } .jobs img { border-radius: 10px; } .jobs figcaption { margin-top: 12px; color: var(--muted); font-size: 15.5px; max-width: 52ch; } .jobs figcaption b { color: var(--navy); font-weight: 700; } /* ── The detail shot beside its text ──────────────────────────────────── */ .detail { display: grid; gap: var(--s-2xl); align-items: center; } @media (min-width: 900px) { .detail { grid-template-columns: 0.85fr 1fr; } } .detail img { border-radius: 10px; } /* ── The licence band ─────────────────────────────────────────────────── */ .record { margin-top: var(--s-xl); border-top: 1px solid var(--rule-d); } .record div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 13px 0; border-bottom: 1px solid var(--rule-d); font-family: var(--mono); font-size: 14.5px; } .record dt { margin: 0; color: var(--dim-d); } .record dd { margin: 0; color: #fff; font-weight: 600; text-align: right; } .record .lic dd { color: var(--green-l); } /* 6.59 on the navy */ /* ── His own words ────────────────────────────────────────────────────── */ .post { border-left: 3px solid var(--green); padding-left: var(--s-lg); margin-top: var(--s-xl); } .post blockquote { margin: 0; } .post blockquote p { margin: 0 0 12px; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.38; font-weight: 600; letter-spacing: -0.015em; color: var(--navy); } /* ⚠ a

, never a nested