/* A & M Roofing, Atascadero - spec build #30 --------------------------------------------------------------------------- PALETTE SAMPLED FROM THEIR ONE PHOTOGRAPH - the red blended composition roof on their Google profile. Measured off a scaled grid of the frame: lit shingle #A27961 #AE856D #986A55 #AA7C67 shingle in shadow #391C16 #2D2222 sky #5BA8E4 #4C99D5 deep shadow #1A181D #1C1A18 THE THREE-TONE TRAP, TWELFTH BUILD RUNNING. Measured: #9E4227 white 6.44 PASS | white ON it 6.44 PASS -> links + button fills #1C1A18 white 17.35 -> dark grounds #E0A07F white ~2.2 UNUSABLE | on deep 7.85 PASS -> DARK BANDS ONLY #CBBFB8 white 1.5 unusable | on deep 9.65 PASS -> body text on dark ⚠ ONE PHOTOGRAPH EXISTS AND THAT IS ALL. 1080x810, the only image on the listing's "By owner" tab. So this is the NARROW EDITORIAL COLUMN (#17): a type-led hero carrying the licence record, and the single photograph used ONCE, at a size 1080px can actually hold. It is never reused and it is never stretched to full bleed, where it would go soft. ⚠⚠ SCOPE DISCIPLINE. He advertises SIDING on Yelp and two reviews describe a whole-house fan install. HIS LICENCE IS C-39 ROOFING ONLY. Nothing on this page offers siding, fans, or any electrical work - the photo caption calls the black shroud a roof vent, which is what it is from the roof's side. --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --pale: #F5F2F0; --ink: #1C1A18; /* on white 17.35 */ --muted: #5C5450; /* on white 7.40 */ --rule: #E4DEDA; --rule-d: #3A3330; --brick: #9E4227; /* links, button fills */ --brick-d: #7C331E; /* hover */ --clay: #E0A07F; /* DARK GROUNDS ONLY */ --deep: #1C1A18; --deep-2: #241F1C; --stone: #CBBFB8; /* 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(--brick); } ::selection { background: var(--clay); color: var(--deep); } :focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brick); } .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(--stone); 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(--clay); 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(--clay); } .mast .sub { color: var(--stone); font-size: 15px; } /* ── Type hero. ⚠ explicit padding-block: 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: 16ch; 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(--clay); } /* 7.85:1 */ .hero .lede { margin: 0 0 var(--s-xl); color: var(--stone); font-size: clamp(17px, 2vw, 21px); max-width: 52ch; } /* the record strip, which does the work a second 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 { color: #9A8F88; font-size: 15px; margin: 0; } .rec dd { margin: 0; color: #fff; font-weight: 600; } .rec dd b { color: var(--clay); font-weight: 700; } .btn { display: inline-block; background: var(--brick); color: #fff; /* 6.44:1 */ font-size: 17px; font-weight: 700; padding: 15px 32px; border-radius: 4px; text-decoration: none; } .btn:hover { background: var(--brick-d); } /* ── 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; } /* ── The one photograph. ⚠ It is 1080x810 and that is the whole photo library, so it gets ONE slot, in the measure column, where 1080px is comfortably over 1x. Never full-bleed - it would go soft. ───────── */ .shot { margin: 0; } .shot img { width: 100%; border-radius: 5px; } .shot figcaption { margin-top: 12px; font-size: 14.5px; color: var(--muted); } /* ── 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(--brick); 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(--brick-d); } .strip .btn:hover { background: var(--pale); } /* ── Testimonials ─────────────────────────────────────────────────────── */ .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(--brick); font-size: 34px; line-height: 1; font-weight: 800; margin-bottom: 6px; } .says p { color: var(--muted); font-size: 16px; } /* ⚠ background:none is LOAD-BEARING - the page footer is also a