/* Pat Dalton Construction - Nipomo - spec build #33 --------------------------------------------------------------------------- ⚠⚠ THERE IS NO LOGO. NONE WAS FOUND AND NONE WAS INVENTED. All three of his photographs are finished work; there is no mark anywhere on the listing, and nothing was supplied. So the masthead is TYPESET - his name in the page's own serif - which is honest in a way a fabricated mark would not be. This is the second build with no logo after Paul Cuce #29, and the opposite problem to iwerks #32, where the logo turned up inside the photo set and dictated a white masthead. PALETTE SAMPLED FROM HIS OWN TILE, surface by surface rather than by averaging the whole frame: #71695C the shower tile, read off the wall #7D7367 the linear accent band in that shower #382D21 the travertine wainscot in the master bath, in shadow #768384 the marble vanity top ⭐ AND THE READING IS THE OPPOSITE OF THE LAST BUILD. iwerks came back overwhelmingly hue ~30, warm timber, because every photograph was raw fir. These come back NEUTRAL AND WARM-GREY - hue 0 and hue 60 at 10-20% saturation - because the work is stone, travertine and quiet paint. A bath-and-kitchen remodeler does not get a timber palette just because the last one did. THE THREE-TONE TRAP, FIFTEENTH BUILD RUNNING: #6E6350 white 5.89 PASS | white ON it 5.89 PASS -> links, button fills #554C3C white 8.45 -> hover #2B2721 white 14.84 -> dark grounds #C9BFA8 white 1.83 UNUSABLE | on deep 8.13 PASS -> DARK BANDS ONLY #D5CDBE on deep 9.40 -> body text on dark ⚠ #C9BFA8 IS THE TRAVERTINE AND IT CANNOT GO ON WHITE. 1.83 is invisible. ⚠ THE HERO BUTTON IS WHITE, not the stone fill, and the reason is banked from iwerks #32: a button in the page's own sampled colour DISAPPEARED against a scrim over a photograph in that same colour, while passing contrast against its own label at 5.89. Ratios answer "can the label be read", not "can the button be found". This hero is a warm stone bathroom, so the same trap is live here and is pre-empted rather than discovered. ⚠ THE ADDRESS IS A MAILBOX AND IS NOT ON THIS PAGE. CSLB lists PO Box 462; the Google listing lists 630 W Tefft St #462, which is the same box written as a street. Town only, the Paul Cuce and Santa Maria Roofing treatment. ⚠ HIS WORKERS' COMP IS REAL (State Compensation Insurance Fund, to 04/2027), so unlike iwerks #32 a crew IS supportable here. The page still leads with Pat by name because all three reviews do. --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --pale: #F7F4EF; /* warm off-white, pulled toward the travertine */ --ink: #2B2721; /* on white 14.84 */ --muted: #5A544A; /* on white 7.50 */ --rule: #E4DFD5; --rule-d: #45403A; --stone: #6E6350; /* his tile. links, button fills. on white 5.89 */ --stone-d: #554C3C; /* hover. on white 8.45 */ --stone-l: #C9BFA8; /* travertine. DARK GROUNDS ONLY - 1.83 on white */ --deep: #2B2721; --body-d: #D5CDBE; /* body text on dark. 9.40 */ --dim: #AEA694; /* labels on dark. 6.14 */ --measure: 700px; --wide: 1180px; --s-sm: 8px; --s-md: 16px; --s-lg: 26px; --s-xl: 36px; --s-2xl: 56px; --sect: clamp(58px, 8vw, 96px); } * { 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.62; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; caret-color: var(--stone); } ::selection { background: var(--stone-l); color: var(--deep); } :focus-visible { outline: 2px solid var(--stone); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--stone); } .wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: 22px; } .wide { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 22px; } /* ── Utility bar ──────────────────────────────────────────────────────── */ .util { background: var(--deep); color: var(--body-d); font-size: 13.5px; } .util .wide { display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; justify-content: center; padding-block: 9px; } .util b { color: #fff; font-weight: 600; } .util .dot { color: var(--rule-d); } /* ── Masthead. TYPESET, because there is no logo to place. The name is set in the serif the page uses for nothing else, so it reads as a wordmark rather than as a heading that wandered up the page. ───────────────── */ .mast { background: var(--deep); border-bottom: 1px solid var(--rule-d); } .mast .wide { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; padding-block: 18px; } .mast .mark { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-size: clamp(21px, 2.6vw, 27px); font-weight: 400; letter-spacing: 0.01em; color: #fff; line-height: 1.1; margin: 0; } .mast .mark span { display: block; font-family: inherit; font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-top: 5px; } .mast .right { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; } .mast .tel { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } .mast .tel:hover { color: var(--stone-l); text-decoration: underline; } /* ── Full-bleed photo hero. ⚠ padding-block:0 — it is a
and would otherwise inherit the generic section padding and open a dead band under the masthead (banked on Landers, build #26). ──────────────────────── */ .hero { display: grid; background: var(--deep); padding-block: 0; } .hero > img, .hero .scrim { grid-area: 1 / 1; } .hero > img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; max-height: 600px; object-position: 50% 55%; } .hero .scrim { display: grid; place-items: center; text-align: center; padding: clamp(44px, 7vw, 86px) 22px; /* ⚠ SET FROM MEASURED LUMINANCE, NOT BY EYE. The first pass used the house default .44/.84 and crushed a room that is actually bright. Guessing a lighter value was no better, so the photo was sampled under each text box: headline box avg 0.177 p95 0.458 <- the mirror reflection intrudes lede + button avg 0.094 p95 0.227 ⚠ THE AVERAGE IS THE WRONG NUMBER TO TUNE ON. The headline sits over a mid -dark wall on average, but 5% of what is behind it is the bright mirror, and white on THAT is what fails. At .28 the p95 gives 2.75, under the 3.0 that large text needs. At .38 it is 3.12 and clears. The lede sits over a genuinely dark area, so the bottom stop can be much lighter than .84 and still give 5.4 on its own p95. */ background: linear-gradient(180deg, rgba(20,17,13,.38), rgba(20,17,13,.60)); } /* ⚠ margin-inline:auto on BOTH, not margin:0 — a max-width child inside a centred grid item sizes to the widest sibling and then sits flush LEFT without it. The bug Matt caught on Paso, build #24. */ .hero h1 { margin: 0 auto var(--s-md); color: #fff; max-width: 19ch; font-size: clamp(30px, 4.9vw, 54px); line-height: 1.06; letter-spacing: -0.032em; font-weight: 800; } .hero p { margin: 0 auto var(--s-xl); color: rgba(255,255,255,.94); font-size: clamp(16px, 1.9vw, 20px); max-width: 56ch; } .btn { display: inline-block; background: var(--stone); color: #fff; /* 5.89:1 */ font-size: 17px; font-weight: 700; padding: 15px 32px; border-radius: 4px; text-decoration: none; } .btn:hover { background: var(--stone-d); } /* ⚠ WHITE ON THE HERO, PRE-EMPTING THE iwerks #32 BUG. A stone fill on a scrim over a warm stone bathroom is the same colour on the same colour; it passes contrast against its own label and still cannot be found. */ .hero .btn { background: #fff; color: var(--stone-d); } /* 8.45 on white */ .hero .btn:hover { background: var(--pale); } /* ── Sections ─────────────────────────────────────────────────────────── */ section { padding-block: var(--sect); } .band-pale { background: var(--pale); } h2 { margin: 0 0 var(--s-md); font-size: clamp(25px, 3.2vw, 35px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 800; max-width: 22ch; } h3 { margin: 0 0 var(--s-sm); font-size: 19px; font-weight: 800; letter-spacing: -0.018em; } p { margin: 0 0 var(--s-md); } p:last-child { margin-bottom: 0; } .muted { color: var(--muted); } .lede { font-size: 19px; } /* ── Three cards ──────────────────────────────────────────────────────── */ .cards { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); } @media (min-width: 820px) { .cards { grid-template-columns: repeat(3, 1fr); } } .cards > div { border: 1px solid var(--rule); border-radius: 5px; padding: var(--s-lg); background: var(--ground); } .cards p { color: var(--muted); margin: 0; } .cards .cls { display: inline-block; background: var(--deep); color: var(--stone-l); /* 8.13:1 */ font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em; padding: 4px 9px; border-radius: 3px; margin-bottom: 10px; } /* ── Call strip. padding-block:0 — the section rule already spaces it. ── */ .strip { background: var(--stone); color: #fff; padding-block: 0; } .strip .wide { display: flex; flex-wrap: wrap; gap: var(--s-md) var(--s-xl); align-items: center; justify-content: space-between; padding-block: var(--s-xl); } .strip h2 { margin: 0; color: #fff; font-size: clamp(21px, 2.6vw, 27px); max-width: 26ch; } .strip .btn { background: #fff; color: var(--stone-d); } .strip .btn:hover { background: var(--pale); } /* ── Alternating feature rows ─────────────────────────────────────────── */ .feat { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; } @media (min-width: 880px) { .feat { grid-template-columns: 1.05fr 1fr; } /* reverse the tracks on a flipped row, or the two photos come out different widths (banked on Leo's, build #28) */ .feat.flip { grid-template-columns: 1fr 1.05fr; } /* ⚠⚠ THIS LINE WAS MISSING AND `.flip` DID NOTHING. Caught in the render on build #33: the kitchen row carried .flip and its photo still sat on the left, so both feature rows ran photo-left and the page read unvaried. Reversing the TRACKS without reordering the CHILD only changes the column widths — the figure is still the first grid item. Invisible in the source, and the class looks applied. */ .feat.flip figure { order: 2; } /* ⚠ the roll-in shower is 900x1599, a tall portrait. Without .portrait it towers over its paragraph and opens a dead gap beside it - the #20 rule. */ .feat.portrait { grid-template-columns: 0.66fr 1fr; } .feat.portrait.flip { grid-template-columns: 1fr 0.66fr; } } .feat + .feat { margin-top: var(--s-2xl); } .feat figure { margin: 0; } .feat img { border-radius: 5px; width: 100%; max-height: 620px; object-fit: cover; } .feat figcaption { margin-top: 10px; font-size: 14.5px; color: var(--muted); } .feat h2 { max-width: 19ch; } /* ── What customers wrote ─────────────────────────────────────────────── */ .says { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); } @media (min-width: 820px) { .says { grid-template-columns: repeat(3, 1fr); } } .says blockquote { margin: 0; padding: var(--s-lg); border: 1px solid var(--rule); border-radius: 5px; background: var(--ground); } .says p { color: var(--muted); margin: 0 0 12px; } /* ⚠⚠ LOAD-BEARING. The page footer is also a