/* Santa Maria Roofing / Paul Cuce Roofing - spec build #29 --------------------------------------------------------------------------- ⚠⚠ THE FIRST BUILD IN TWENTY-NINE WITH NO CLIENT MATERIAL OF ANY KIND. No logo. No photographs - the Google listing has only "All" and "Street View & 360°", with NO "By owner" and NO "House" tab, so there is not one picture of their own work anywhere. No website, no Facebook, no brand colours. So the standing rule "the palette must come from the client's own material" CANNOT BE FOLLOWED HERE, and this file says so rather than dressing a chosen palette up as a sampled one. What it is instead: a weathered-asphalt charcoal and a warm amber, picked to read as a roof rather than as a generic trade blue. CHOSEN, not sampled. If Paul converts, ask for photographs first - they would change this page more than anything else could. ⚠ LAYOUT IS TYPE-LED (#16 Alpha), because with no photographs the house style's full-bleed hero and feature rows have nothing to carry them. The weight has to come from the licence record and the reviews, which are the only two real assets that exist. THE THREE-TONE TRAP, ELEVENTH BUILD RUNNING. Measured: #8A5A12 white 5.91 PASS | white ON it 5.91 PASS -> links + button fills #17191C white 17.61 -> dark grounds #E0A94B white 2.11 UNUSABLE | on deep 8.34 PASS -> DARK BANDS ONLY #B9C0C7 white 1.55 unusable | on deep 9.58 PASS -> body text on dark --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --pale: #F4F4F2; --ink: #17191C; /* on white 17.61 */ --muted: #555C64; /* on white 6.77 */ --rule: #E0E1DE; --rule-d: #32363C; --amber: #8A5A12; /* links, button fills */ --amber-l: #E0A94B; /* DARK GROUNDS ONLY */ --deep: #17191C; --deep-2: #1F2226; --steel: #B9C0C7; /* body text on the dark grounds */ --measure: 700px; --wide: 1120px; --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(--amber); } ::selection { background: var(--amber-l); color: var(--deep); } :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--amber); } .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(--steel); 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 a { color: var(--amber-l); text-decoration: none; font-weight: 600; } .util a:hover { text-decoration: underline; } .util .dot { color: var(--rule-d); } /* ── Masthead. No logo exists, so this is a wordmark. ─────────────────── */ .mast { background: var(--deep-2); border-bottom: 1px solid var(--rule-d); } .mast .wide { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; justify-content: space-between; padding-block: 18px; } .mast .name { margin: 0; color: #fff; font-size: clamp(21px, 2.6vw, 26px); font-weight: 800; letter-spacing: -0.03em; } .mast .name em { font-style: normal; color: var(--amber-l); } .mast .sub { color: var(--steel); font-size: 15px; } /* ── Type hero. ⚠ padding-block set explicitly: it is a
and the generic section rule would otherwise stack on top of its own. ────── */ .hero { background: var(--deep); color: #fff; padding-block: clamp(52px, 8vw, 104px); } .hero h1 { margin: 0 0 var(--s-lg); color: #fff; max-width: 17ch; font-size: clamp(34px, 6vw, 62px); line-height: 1.02; letter-spacing: -0.038em; font-weight: 800; } .hero h1 em { font-style: normal; color: var(--amber-l); } /* 8.34:1 */ .hero .lede { margin: 0 0 var(--s-xl); color: var(--steel); font-size: clamp(17px, 2vw, 21px); max-width: 52ch; } /* the record strip, which does the work a photograph would */ .rec { margin: var(--s-xl) 0 0; display: grid; gap: 1px; border-top: 1px solid var(--rule-d); } .rec > div { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--rule-d); } .rec dt, .rec .k { color: #8E979F; font-size: 15px; margin: 0; } .rec dd, .rec .v { margin: 0; color: #fff; font-weight: 600; } .rec .v b { color: var(--amber-l); font-weight: 700; } .btn { display: inline-block; background: var(--amber); color: #fff; /* 5.91:1 */ font-size: 17px; font-weight: 700; padding: 15px 32px; border-radius: 4px; text-decoration: none; } .btn:hover { background: #6E480E; } /* ── 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; } /* ── Call strip. padding-block:0 - the section rule already spaces it. ── */ .strip { background: var(--amber); 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: #6E480E; } .strip .btn:hover { background: var(--pale); } /* ── Testimonials. With no photographs these are the page's main event, so they get four cards and more room than the house style gives them. ─ */ .says { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); } @media (min-width: 760px) { .says { grid-template-columns: repeat(2, 1fr); } } .says blockquote { margin: 0; border: 1px solid var(--rule); border-radius: 5px; padding: var(--s-lg); background: var(--ground); display: flex; flex-direction: column; } .says .mark { display: block; color: var(--amber); font-size: 34px; line-height: 1; font-weight: 800; margin-bottom: 6px; } .says p { color: var(--muted); font-size: 16px; } /* ⚠ background:none and the padding reset are LOAD-BEARING. The page footer is also a