/* Central Coast Flooring, Cabinets and Granite - San Luis Obispo - build #37 --------------------------------------------------------------------------- ⭐⭐ PHOTO-LED. THE FIRST BUILD IN FIVE WHERE THE LOCKED PALETTE RULE APPLIES. #29, #34, #35 and #36 were all type-led because no client imagery existed, and each of those files had to say "the palette was CHOSEN, not sampled". This prospect has TEN photographs, every one attributed to the business itself, so the rule is back in force and EVERY COLOUR BELOW IS SAMPLED FROM THEIR OWN MATERIAL. ⭐⭐ THE BRAND COLOUR CAME OFF THEIR OWN STOREFRONT. Their photo p01 shows the shop front: "C.C. FLOORING" in yellow on a strong blue fascia. Both were sampled from that photograph: #1C66BA the sign blue <- sampled from the fascia #DBCB3D the sign yellow <- sampled from the lettering #2C221C a warm near-black <- dominant dark in their showroom photos #9B8E7C a warm stone <- the single most dominant colour of the hero ⚠ THIS IS A BLUE, AND EVERY EARLIER BUILD DELIBERATELY AVOIDED BLUE. That rule was about not defaulting to stock contractor blue and not copying Matt's brand blue. It does not apply here: this blue is the client's OWN sign, photographed by them, which is precisely what the locked rule asks for. Sampled beats chosen every time. ⭐ AND FOR ONCE ONE ACCENT TOKEN DOES BOTH JOBS. #1C66BA is 5.74 on white AND white-on-it is 5.74, so it clears the 4.5 bar as small text and as a button fill. The three-tone trap that forced a bright/dark token pair on #34, #35 and #36 does not bite here. That is luck in the sample, not skill, and it was confirmed by computing rather than assumed. ⚠⚠ THE HERO IS A SPLIT, NOT A SCRIM, AND THAT WAS A MEASUREMENT NOT A TASTE. The banked lesson from #33 is that the AVERAGE luminance is the wrong statistic for a scrim: white text fails against the BRIGHTEST pixels. Measured on the hero photograph, in the band where an overlaid headline would sit: average 0.3859 | median 0.3763 | BRIGHTEST 5% 0.7671 It is a white kitchen shot in daylight. Running the scrim table, a 70% black overlay still only reaches 3.75 against those bright pixels - under the 4.5 bar - and a scrim that heavy would wreck the photograph, which is the whole point of a photo-led page. SO THE PHOTO IS NOT BEHIND THE TEXT. It sits beside it, in its own panel, and the headline is on a solid ground where the ratio is 15.74. No scrim, no compromise, no unreadable hero. ⚠ NO LICENCE BAND ON THIS PAGE, DELIBERATELY. An active C-15 (807022, "Services by Tim", Timothy L Stapf) is registered at this exact suite, but it trades under a DIFFERENT NAME and the public record does not state the link. Printing it under this business's name would assert something unproven - the Atwood rule. The anchor is instead the thing this prospect has and no other did: 134 reviews at 4.9, real photographs of their own work, a walk-in showroom and published hours. ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED. #1C66BA on white 5.74 | on paper 5.19 | white on it 5.74 -> text AND fills #154C8B white on it 8.61 -> hover #DBCB3D on white 1.66 UNUSABLE | on deep 9.33 | black on it 10.47 on #1C66BA 3.45 -> LARGE ONLY #1E1915 on white 17.43 | on paper 15.74 #5C544C on white 7.43 | on paper 6.71 -> muted body #2C221C white on it 15.52 -> dark ground #D5CCC1 on deep 9.79 -> body on dark #A79C90 on deep 5.77 -> labels on dark #9B8E7C on white 3.20 -> RULES ONLY #C0B6A7 on white 2.00 -> DECOR ONLY --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --paper: #F6F3EE; /* ink on it 15.74, brand 5.19, muted 6.71 */ --ink: #1E1915; /* on white 17.43 */ --muted: #5C544C; /* on white 7.43 */ --rule: #E5E0D8; --brand: #1C66BA; /* SAMPLED sign blue. text AND fills, both 5.74 */ --brand-d: #154C8B; /* hover, 8.61 */ --sun: #DBCB3D; /* SAMPLED sign yellow. DARK GROUNDS ONLY - 1.66 on white */ --deep: #2C221C; /* SAMPLED warm near-black */ --rule-d: #46382F; --body-d: #D5CCC1; /* on deep 9.79 */ --dim: #A79C90; /* on deep 5.77 */ --stone: #9B8E7C; /* 3.20 on white - RULES AND DECOR ONLY, never text */ --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(--sun); color: var(--deep); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brand); } .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(--brand); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--brand); flex: none; } .eyebrow.on-dark { color: var(--sun); } .eyebrow.on-dark::before { background: var(--sun); } /* ── 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(--brand); color: #fff; font-size: 17px; font-weight: 700; /* 5.74 */ text-decoration: none; white-space: nowrap; border-radius: 7px; padding: 10px 18px; } .mast .tel:hover { background: var(--brand-d); } /* ── HERO: a SPLIT. Photograph beside the text, never behind it. See the measurement in the header comment. ─────────────────────────────── */ .hero { background: var(--paper); border-bottom: 1px solid var(--rule); } .hero .wide { display: grid; gap: var(--s-2xl); padding-block: clamp(46px, 6vw, 78px); } @media (min-width: 940px) { .hero .wide { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-2xl); } } .hero h1 { margin: 0 0 var(--s-md); color: var(--ink); max-width: 16ch; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.05; letter-spacing: -0.032em; font-weight: 800; } .hero h1 em { font-style: normal; color: var(--brand); } /* 5.19 on paper */ .hero p.lede { margin: 0 0 var(--s-xl); color: var(--muted); font-size: 19px; max-width: 46ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero figure { margin: 0; } .hero figure img { border-radius: 14px; width: 100%; } /* the score strip under the hero copy */ .score { display: flex; flex-wrap: wrap; gap: var(--s-lg) var(--s-2xl); margin: var(--s-2xl) 0 0; padding-top: var(--s-lg); border-top: 1px solid var(--stone); } .score div { } .score .n { display: block; font-family: var(--mono); font-size: clamp(24px, 3vw, 34px); line-height: 1; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; } .score .l { display: block; margin-top: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .btn { display: inline-block; background: var(--brand); color: #fff; /* 5.74 */ font-size: 16.5px; font-weight: 700; padding: 14px 26px; border-radius: 7px; text-decoration: none; border: 1px solid transparent; } .btn:hover { background: var(--brand-d); } .btn.ghost { background: transparent; color: var(--ink); border-color: #CDC6BC; } .btn.ghost:hover { border-color: var(--brand); } .arrow { display: inline-block; font-family: var(--mono); font-size: 13.5px; color: var(--brand); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .arrow:hover { color: var(--ink); } .arrow.on-dark { color: var(--sun); } /* ── 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: 20ch; } h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.015em; } 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: 60ch; } /* ── WORK GALLERY. Their own photographs, on the warm dark ground. ───── */ /* ⚠ COLUMNS, NOT GRID, AND THE REASON MATTERS. Their four photographs have four different aspect ratios (2.58, 2.06, 1.17, 1.33). A two-column GRID left ragged rows and captions at four different heights. The obvious fix - a fixed aspect-ratio with object-fit:cover - would have cropped up to 27% off the sides of the widest shots, which on a kitchen photo means cutting the island out. Columns let every photograph keep its own shape and still stack tidily. Do not "fix" this back to a grid. */ .work .grid { columns: 1; column-gap: var(--s-lg); margin-top: var(--s-2xl); } @media (min-width: 760px) { .work .grid { columns: 2; } } .work figure { margin: 0 0 var(--s-lg); break-inside: avoid; -webkit-column-break-inside: avoid; } .work img { border-radius: 12px; width: 100%; } .work figcaption { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); /* 5.77 */ } /* ── What they do ─────────────────────────────────────────────────────── */ .does { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); } @media (min-width: 820px) { .does { grid-template-columns: repeat(3, 1fr); } } .does > div { border: 1px solid var(--rule); border-radius: 12px; padding: var(--s-lg); } .does .tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; } .does p { color: var(--muted); margin: 0; } /* ── Reviews. The score replaces the licence band as this page's anchor. */ .rev .head { display: grid; gap: var(--s-lg); align-items: end; } @media (min-width: 820px) { .rev .head { grid-template-columns: auto 1fr; gap: var(--s-2xl); } } .rev .big { font-family: var(--mono); font-size: clamp(56px, 9vw, 96px); line-height: 0.9; font-weight: 600; color: var(--sun); letter-spacing: -0.04em; margin: 0; /* 9.33 on deep */ } .rev .of { margin: 10px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim); } .rev .quotes { display: grid; gap: var(--s-xl); margin-top: var(--s-2xl); } @media (min-width: 900px) { .rev .quotes { grid-template-columns: repeat(3, 1fr); } } .rev blockquote { margin: 0; padding-top: var(--s-md); border-top: 2px solid var(--sun); } .rev blockquote p { color: var(--body-d); font-size: 16px; margin: 0 0 12px; } /* ⚠ LOAD-BEARING, carried from #29/#32/#33/#34: the page footer is also a