/* Coastal Concrete & Remodeling - Carpinteria - spec build #40 --------------------------------------------------------------------------- PHOTO-LED, fourth in a row. All ten listing photographs are owner-attributed; seven are used. ⚠ p03 and p07 are excluded as 640x480 - too soft at any useful width - and p10 because a person is visible in it. ⭐ THE HERO IS A TRIPTYCH, WHICH IS THE ARGUMENT OF THE PAGE. Three photographs edge to edge directly under the headline: poured steps against a block wall, a louvered pergola over a deck, and a stone fireplace with a timber mantel. Concrete, structure, interior - his range in one row, before a word of copy. It also keeps this hero clear of the last three: #37 text beside one photo | #38 text above one full-bleed photo #39 text OVER the photo with a gradient scrim | #40 text above THREE No scrim is needed because no text sits on an image. ⭐ AND THE RANGE IS WHAT THE LICENCE ACTUALLY SAYS: C-8 CONCRETE plus B-2 RESIDENTIAL REMODELING. The photographs and the state record agree, which is the whole spine of the page. ⚠ Presented as a two-column split on PAPER with small mono tags - deliberately NOT #35's two giant mono glyphs on a divided dark ground, which is the same idea and must not look the same. THE PALETTE IS SAMPLED FROM HIS OWN PHOTOGRAPHS: #2B2723 a warm near-black, from the shadowed stone #5A4F3A ⭐ AN OLIVE-TAN taken from the block retaining wall in his steps photograph. ⚠ HUE 39. #39's stain was #724A3D at HUE 12 - a red-brown. Two warm accents in a row would have been lazy; these are 27 degrees apart and read as olive against red. #D5CEBA a warm sand, from the concrete walkway shot #B7B2A9 the fireplace stone - 2.2 on white, RULES AND DECOR ONLY ⚠⚠ THE LIGHT-GROUNDS-ONLY TRAP, THIRD BUILD RUNNING. #5A4F3A is 8.03 on white and 1.84 on the dark ground, where it disappears - exactly as #38's navy (2.12) and #39's stain (1.95) did. The dark bands use the sampled sand #D5CEBA (9.43) instead. THIS IS NOW A PATTERN, NOT A COINCIDENCE: a mid-dark accent sampled from a photograph will almost always die on a dark ground. Check both grounds every time. ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED. #5A4F3A on white 8.03 | on paper 7.19 | white on it 8.03 -> text AND fills #463D2C on white 10.69 -> hover #2B2723 on white 14.82 | on paper 13.26 #57534C on white 7.64 | on paper 6.84 -> muted body #D5CEBA on white 1.33 UNUSABLE | on deep 9.43 -> DARK ONLY #CFC9BF on deep 9.00 -> body on dark #A79F93 on deep 5.66 -> labels on dark #B7B2A9 on white 2.20 -> RULES ONLY --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --paper: #F5F2EC; /* ink 13.26, olive 7.19, muted 6.84 */ --ink: #2B2723; /* on white 14.82 */ --muted: #57534C; /* on white 7.64 */ --rule: #E5E0D6; --olive: #5A4F3A; /* SAMPLED from the block wall. text AND fills, 8.03 */ --olive-h: #463D2C; /* hover, 10.69 */ --sand: #D5CEBA; /* DARK GROUNDS ONLY - 1.33 on white */ --deep: #2B2723; --rule-d: #423C36; --body-d: #CFC9BF; /* on deep 9.00 */ --dim: #A79F93; /* on deep 5.66 */ --stone: #B7B2A9; /* 2.20 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(--sand); color: var(--deep); } :focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--olive); } .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(--olive); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--olive); flex: none; } /* ⚠ on dark the accent is the SAND, never the olive - it is 1.84 there */ .eyebrow.on-dark { color: var(--sand); } .eyebrow.on-dark::before { background: var(--sand); } /* ── 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(--olive); color: #fff; font-size: 17px; font-weight: 700; /* 8.03 */ text-decoration: none; white-space: nowrap; border-radius: 7px; padding: 10px 18px; } .mast .tel:hover { background: var(--olive-h); } /* ── HERO: copy on paper, then a full-width triptych. No text over an image, so no scrim is needed anywhere on this build. ───────────────────── */ .hero { background: var(--paper); padding-block: clamp(48px, 7vw, 86px) 0; } .hero h1 { margin: 0 0 var(--s-md); color: var(--ink); max-width: 21ch; 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(--olive); } /* 7.19 on paper */ .hero p.lede { margin: 0 0 var(--s-xl); color: var(--muted); font-size: 19px; max-width: 52ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(38px, 6vw, 64px); } .triptych { display: grid; gap: 2px; background: var(--rule); } @media (min-width: 760px) { .triptych { grid-template-columns: repeat(3, 1fr); } } .triptych figure { margin: 0; background: var(--paper); } .triptych img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .triptych figcaption { padding: 12px 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .btn { display: inline-block; background: var(--olive); color: #fff; /* 8.03 */ font-size: 16.5px; font-weight: 700; padding: 14px 26px; border-radius: 7px; text-decoration: none; border: 1px solid transparent; } .btn:hover { background: var(--olive-h); } .btn.ghost { background: transparent; color: var(--ink); border-color: #CEC8BC; } .btn.ghost:hover { border-color: var(--olive); } .btn.light { background: var(--sand); color: var(--deep); } /* dark grounds: 9.43 */ .btn.light:hover { background: #E4DECD; } .arrow { display: inline-block; font-family: var(--mono); font-size: 13.5px; color: var(--olive); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .arrow:hover { color: var(--ink); } .arrow.on-dark { color: var(--sand); } /* ── 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); } /* ── The range: a big pull quote, then the two classifications side by side. ⚠ NOT #35's giant glyphs on a divided dark band - same idea, and it must not look the same. Small mono tags on paper instead. ───────────── */ .pull { font-size: clamp(21px, 2.7vw, 30px); line-height: 1.34; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); margin: 0 0 var(--s-md); max-width: 30ch; padding-left: var(--s-lg); border-left: 3px solid var(--olive); } .attrib { margin: 0 0 var(--s-2xl) var(--s-lg); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--olive); font-weight: 600; } .attrib span { color: var(--muted); font-weight: 400; } .halves { display: grid; gap: var(--s-xl); } @media (min-width: 840px) { .halves { grid-template-columns: 1fr 1fr; gap: var(--s-2xl); } } .halves > div { padding-top: var(--s-lg); border-top: 2px solid var(--stone); } .halves .code { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--olive); margin-bottom: 10px; } .halves p { color: var(--muted); margin: 0; } /* ── Gallery ──────────────────────────────────────────────────────────── */ .grid4 { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); } @media (min-width: 760px) { .grid4 { grid-template-columns: repeat(2, 1fr); } } .grid4 figure { margin: 0; } .grid4 img { width: 100%; border-radius: 12px; aspect-ratio: 4 / 3; object-fit: cover; } .grid4 figcaption { margin-top: 11px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ── 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(--sand); font-weight: 700; } /* 9.43 on deep */ .lic .note { margin-top: var(--s-lg); font-size: 14px; color: var(--dim); max-width: 74ch; } .lic .note b { color: var(--sand); } .lic a { color: var(--sand); } /* ── 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(--olive); } .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