/* Wine Country Concrete - Paso Robles - spec build #39 --------------------------------------------------------------------------- PHOTO-LED, third in a row. All ten listing photographs are attributed to the business itself; six are used. ⭐⭐ THE FIRST OVERLAY HERO OF THIS RUN, AND IT WAS EARNED BY MEASUREMENT. #37 declined an overlay because its hero's brightest 5% was 0.7671 and even a 70% scrim only reached 3.75. #38 declined one because the photograph already carried the client's own "Clean"/"Dirty" labels. Here the numbers allow it, so the page finally uses one - a different hero shape from both. ⚠⚠ AND THE CROP CHANGED THE ANSWER, WHICH IS THE LESSON WORTH KEEPING. Measured on the FULL photograph, the headline band's brightest 5% was 0.3777 and a 0.55 scrim reached 4.77. After cropping the mulch foreground away - the crop that makes the hero work as a band - the same band measured 0.4615 and 0.55 fell to 4.08, UNDER the bar. The crop removed dark pixels and raised the worst case. ⚠ RE-MEASURE AFTER ANY CROP. A scrim figure belongs to an image, not to a photograph. ⭐ WHERE THE TEXT SITS WAS ALSO CHOSEN BY MEASUREMENT, not by taste: upper-left brightest 5% 0.5916 -> 0.65 scrim still only 4.08 left column 0.5259 -> 0.65 only 4.49 BOTTOM-LEFT 0.3638 -> the text zone, and it passes The driveway and sky are the bright parts; the bottom-left is in shade. ⭐ THE SCRIM IS A GRADIENT, AND ITS ALPHA WAS COMPUTED AGAINST THE REAL OVERLAY COLOUR (#26282A, luminance 0.0210), not against pure black: alpha 0.50 -> 4.33 fail | 0.55 -> 4.66 | 0.60 -> 5.05 | 0.65 -> 5.50 0.60 is used through the text zone, fading to 0.06 at the top so the palms, the tile roof and the sky keep their light. A flat 0.65 over the whole frame would have passed too and would have killed the photograph. THE PALETTE IS SAMPLED FROM HIS OWN PHOTOGRAPHS: #26282A a near-black, from the shadowed concrete #724A3D ⭐ THE COLOUR OF HIS STAINED AND STAMPED DRIVEWAY, taken from the hero photograph itself. The page's only accent is the finish he sells. #EFEBE5 a pale, from the smooth grey slab shot #9F9E9F mid concrete grey - 2.67 on white, RULES AND DECOR ONLY ⚠ THE STAIN IS LIGHT-GROUNDS-ONLY, the same asymmetry #38 had with its navy: #724A3D is 7.60 on white but only 1.95 on the dark ground, where it vanishes. The dark bands use the sampled pale #EFEBE5 (12.46) as their accent instead. ⭐ THE LICENCE BAND RETURNS. #37 could not print one (the C-15 at that suite trades under another name) and #38 needed none (carpet cleaning requires no licence). This build has a clean C-8 in the owner's own name, so the record is back on the page. ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED. #724A3D on white 7.60 | on paper 6.78 | white on it 7.60 -> text AND fills #26282A on white 14.80 | on paper 13.20 #55565A on white 7.33 | on paper 6.54 -> muted body #EFEBE5 on white 1.19 UNUSABLE | on deep 12.46 -> DARK ONLY #CFCFCB on deep 9.47 -> body on dark #A3A39F on deep 5.85 -> labels on dark #9F9E9F on white 2.67 -> RULES ONLY --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --paper: #F2F2F0; /* ink 13.20, stain 6.78, muted 6.54 */ --ink: #26282A; /* on white 14.80 */ --muted: #55565A; /* on white 7.33 */ --rule: #E2E2DF; --stain: #724A3D; /* SAMPLED from the stamped driveway. text AND fills, 7.60 */ --stain-h: #201C1B; /* hover, also sampled. white on it 16.89 */ --pale: #EFEBE5; /* DARK GROUNDS ONLY - 1.19 on white */ --deep: #26282A; --rule-d: #3D4042; --body-d: #CFCFCB; /* on deep 9.47 */ --dim: #A3A39F; /* on deep 5.85 */ --grey: #9F9E9F; /* 2.67 on white - RULES AND DECOR ONLY */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --measure: 660px; --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(--ink); 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(--pale); color: var(--deep); } :focus-visible { outline: 2px solid var(--stain); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--stain); } .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: 24px; } .wide { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; } /* ── Eyebrow ──────────────────────────────────────────────────────────── */ .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(--stain); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--stain); flex: none; } /* ⚠ on dark the accent is the PALE, never the stain - it is 1.95 there */ .eyebrow.on-dark { color: var(--pale); } .eyebrow.on-dark::before { background: var(--pale); } /* ⚠⚠ ON THE PHOTO THE EYEBROW IS PURE WHITE, NOT THE PALE, AND THE DIFFERENCE IS THE WHOLE POINT. Measured on the real render, the scrimmed background behind it is 0.1798: white reaches 4.57 and PASSES, but #EFEBE5 only reaches 3.84 and FAILS for 11.5px text. The pale is fine on the SOLID dark band (12.46) and not fine over a photograph. Two grounds, two colours. */ .eyebrow.on-photo { color: #fff; } .eyebrow.on-photo::before { background: #fff; } /* ── Masthead ─────────────────────────────────────────────────────────── */ .mast { background: var(--ground); border-bottom: 1px solid var(--rule); } .mast .wide { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; justify-content: space-between; padding-block: 18px; } .mast .mark { margin: 0; color: var(--ink); 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(--stain); color: #fff; font-size: 17px; font-weight: 700; /* 7.60 */ text-decoration: none; white-space: nowrap; border-radius: 7px; padding: 10px 18px; } .mast .tel:hover { background: var(--stain-h); } /* ── HERO: full-bleed photograph, gradient scrim, text in the BOTTOM-LEFT. See the measurements in the header note. ───────────────────────── */ /* ⚠ padding:0 is load-bearing: the global `section` rule gives every section 64-108px of vertical padding, which showed here as a dark empty band above and below the photograph. Caught in a render, invisible in the markup. */ .hero { position: relative; background: var(--deep); isolation: isolate; padding: 0; } .hero img { width: 100%; height: clamp(440px, 62vw, 660px); object-fit: cover; object-position: 50% 42%; /* keeps the driveway sweep and the roofline */ } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* ⚠ alpha 0.60 through the text zone = 5.05 worst-case white, COMPUTED against #26282A rather than pure black. Do not lighten these stops. */ background: linear-gradient(to top, rgba(38,40,42,.80) 0%, rgba(38,40,42,.70) 34%, rgba(38,40,42,.62) 52%, rgba(38,40,42,.26) 76%, rgba(38,40,42,.05) 100%); } .hero .copy { position: absolute; inset: auto 0 0 0; z-index: 1; padding-block: clamp(24px, 4vw, 48px); } .hero h1 { margin: 0 0 var(--s-md); color: #fff; max-width: 22ch; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.04; letter-spacing: -0.034em; font-weight: 800; } .hero p.lede { margin: 0 0 var(--s-lg); color: #fff; font-size: clamp(16.5px, 1.8vw, 19px); max-width: 44ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; } .shotnote { background: var(--deep); color: var(--dim); margin: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; padding: 12px 24px; text-align: center; } .btn { display: inline-block; background: var(--stain); color: #fff; /* 7.60 */ font-size: 16.5px; font-weight: 700; padding: 14px 26px; border-radius: 7px; text-decoration: none; border: 1px solid transparent; } .btn:hover { background: var(--stain-h); } .btn.light { background: var(--pale); color: var(--deep); } /* on dark/photo: 12.46 */ .btn.light:hover { background: #fff; } .btn.ghost { background: transparent; color: var(--ink); border-color: #CBCBC7; } .btn.ghost:hover { border-color: var(--stain); } .arrow { display: inline-block; font-family: var(--mono); font-size: 13.5px; color: var(--stain); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .arrow:hover { color: var(--ink); } .arrow.on-dark { color: var(--pale); } /* ── Sections ─────────────────────────────────────────────────────────── */ section { padding-block: var(--sect); } .band-paper { background: var(--paper); } .band-deep { background: var(--deep); color: var(--body-d); } .band-deep 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: 19ch; } 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; } .lede { font-size: 19px; } .muted { color: var(--muted); } .intro { font-size: 19px; max-width: 58ch; } /* ── The work: one wide feature, then a pair. Not #37's columns and not #38's alternating rows. ───────────────────────────────────────── */ .work .feature { margin: var(--s-2xl) 0 var(--s-lg); } .work .pair { display: grid; gap: var(--s-lg); } @media (min-width: 780px) { .work .pair { grid-template-columns: repeat(3, 1fr); } } .work figure { margin: 0; } .work img { width: 100%; border-radius: 12px; } /* the three-up mixes two landscape shots with one portrait, which left a ragged row and captions at three different heights. a fixed 4:3 with cover evens it without touching the two FEATURE images, which keep their own shape. */ .work .pair img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; } .work figcaption { margin-top: 11px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .band-deep .work figcaption, .finishes figcaption { color: var(--dim); } /* ── What he pours: a ruled list, not cards ───────────────────────────── */ .pours { margin-top: var(--s-xl); border-top: 1px solid var(--rule); } .pours .row { display: grid; gap: 4px 40px; padding-block: var(--s-lg); border-bottom: 1px solid var(--rule); } @media (min-width: 820px) { .pours .row { grid-template-columns: 240px 1fr; } } .pours h3 { margin: 0; } .pours p { margin: 0; color: var(--muted); } .pours .n { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--stain); display: block; margin-bottom: 6px; } /* ── Licence band ─────────────────────────────────────────────────────── */ .lic dl { margin: var(--s-xl) 0 0; display: grid; gap: 0; } .lic .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding: 13px 0; border-bottom: 1px solid var(--rule-d); } .lic .row:first-child { border-top: 1px solid var(--rule-d); } .lic dt { color: var(--dim); font-size: 14.5px; margin: 0; } .lic dd { margin: 0; color: #fff; font-weight: 600; font-family: var(--mono); font-size: 14.5px; } .lic dd b { color: var(--pale); font-weight: 700; } /* 12.46 on deep */ .lic .note { margin-top: var(--s-lg); font-size: 14px; color: var(--dim); max-width: 74ch; } .lic .note b { color: var(--pale); } .lic a { color: var(--pale); } /* ── Reviews ──────────────────────────────────────────────────────────── */ .says { display: grid; gap: var(--s-xl); margin-top: var(--s-xl); } @media (min-width: 860px) { .says { grid-template-columns: repeat(2, 1fr); } } .says blockquote { margin: 0; padding-top: var(--s-md); border-top: 2px solid var(--stain); } .says p { color: var(--muted); font-size: 16.5px; margin: 0 0 12px; } /* ⚠ LOAD-BEARING, carried from #29 onward: the page footer is also a