/* Beyond Carpet and Tile - Nipomo - spec build #38 --------------------------------------------------------------------------- PHOTO-LED, and the second build running where the locked palette rule applies: nine of the ten listing photographs are attributed to the business itself. ⚠ The tenth is by a customer (a reviewer) and is NOT used anywhere here. ⚠⚠ NO LICENCE BAND, AND UNLIKE #37 THAT IS NOT A JUDGEMENT CALL. Carpet and upholstery cleaning is a service business, not a construction trade: California requires no CSLB licence for it. Step 0 cannot be performed and does not need to be, and there is no legal exposure in advertising a business that needs no licence. THE PAGE MAKES NO LICENSURE CLAIM ANYWHERE. ⚠⚠ THIS IS CLEANING AND RESTORATION, NOT INSTALLATION. Google's theme chips are tile cleaning, pet odour removal, grout restoration, upholstery and car interiors. NOTHING in the copy may imply they supply or fit flooring - that is #37's business, not this one. THE PALETTE IS SAMPLED FROM HIS OWN PHOTOGRAPHS: #19191B the darkest tone in his equipment shot #324E7F ⭐ THE NAVY OF HIS AIR MOVER, the blower he leaves running on a finished floor. It is the only saturated colour anywhere in his material, and it is a real object in a real photo of his. #D6CAB7 a cream from the same shot; the paper ground is this lightened to #F7F4EE, which is a derivation and is named as one, not passed off as a direct sample. #967247 a warm tan from the stair photo - rules and decor only, 4.38. ⚠ THE NAVY IS LIGHT-GROUNDS-ONLY, AND THAT ASYMMETRY IS THE TRAP HERE. #324E7F is 8.29 on white but only 2.12 on the dark ground - it disappears there. So the dark bands use the CREAM as their accent instead (10.86), and the navy never appears on them. Getting this backwards would put an invisible accent on two whole sections. ⭐ The shell is deliberately near-monochrome. Nine warm photographs are the colour on this page; a loud accent would fight them. That is also why the navy is used sparingly rather than everywhere it would pass. ⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED. #324E7F on white 8.29 | on cream 7.56 | white on it 8.29 -> text AND fills #233A61 white on it 11.36 -> hover #19191B on white 17.56 | on cream 15.99 -> ink, dark ground #57544F on white 7.54 | on cream 6.87 -> muted body #D6CAB7 on white 1.62 UNUSABLE | on deep 10.86 -> DARK ONLY #CFC9C0 on deep 10.67 -> body on dark #A49E95 on deep 6.61 -> labels on dark #967247 on white 4.38 -> RULES/LARGE ONLY --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --paper: #F7F4EE; /* cream, lightened from the sampled #D6CAB7 */ --ink: #19191B; /* on white 17.56 */ --muted: #57544F; /* on white 7.54 */ --rule: #E6E1D8; --navy: #324E7F; /* SAMPLED from his air mover. text AND fills, 8.29 */ --navy-h: #233A61; /* hover, 11.36 */ --cream: #D6CAB7; /* DARK GROUNDS ONLY - 1.62 on white */ --deep: #19191B; --rule-d: #34332F; --body-d: #CFC9C0; /* on deep 10.67 */ --dim: #A49E95; /* on deep 6.61 */ --tan: #967247; /* 4.38 on white - RULES AND DECOR ONLY */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --measure: 660px; --wide: 1160px; --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(--cream); color: var(--deep); } :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--navy); } .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(--navy); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--navy); flex: none; } /* ⚠ on dark the accent is the CREAM, never the navy - see the header note */ .eyebrow.on-dark { color: var(--cream); } .eyebrow.on-dark::before { background: var(--cream); } /* ── 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(--navy); color: #fff; font-size: 17px; font-weight: 700; /* 8.29 */ text-decoration: none; white-space: nowrap; border-radius: 7px; padding: 10px 18px; } .mast .tel:hover { background: var(--navy-h); } /* ── HERO. ⭐ HIS OWN CLEAN/DIRTY PHOTOGRAPH RUNS FULL-BLEED BENEATH THE HEADLINE, WITH NOTHING OVER IT. The scrim table said an overlay would work here (brightest 5% is only 0.3733, so a 0.55 scrim reaches 4.82) - but the photograph ALREADY CARRIES HIS OWN "Clean" and "Dirty" LABELS, and a headline on top would fight them. Measured, then declined. ──── */ .hero { background: var(--paper); padding-top: clamp(48px, 7vw, 86px); padding-bottom: 0; } .hero h1 { margin: 0 0 var(--s-md); color: var(--ink); max-width: 19ch; font-size: clamp(36px, 5.6vw, 62px); line-height: 1.04; letter-spacing: -0.034em; font-weight: 800; } .hero h1 em { font-style: normal; color: var(--navy); } /* 7.56 on cream */ .hero p.lede { margin: 0 0 var(--s-xl); color: var(--muted); font-size: 19px; max-width: 50ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: clamp(40px, 6vw, 66px); } /* the figure runs edge to edge on the dark ground, but the IMAGE is capped and centred and keeps its own aspect ratio. the first attempt used object-fit:cover with a max-height, which CROPPED THE WORD "Clean" OFF THE TOP - and that label is the entire argument of the photograph. never cover-crop an image whose content IS text. */ .shot { margin: 0; background: var(--deep); padding-top: clamp(40px, 6vw, 72px); } .shot img { width: 100%; max-width: 1000px; margin-inline: auto; height: auto; } .shot figcaption { padding: 14px 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); text-align: center; /* 6.61 on deep */ } .btn { display: inline-block; background: var(--navy); color: #fff; /* 8.29 */ font-size: 16.5px; font-weight: 700; padding: 14px 26px; border-radius: 7px; text-decoration: none; border: 1px solid transparent; } .btn:hover { background: var(--navy-h); } .btn.ghost { background: transparent; color: var(--ink); border-color: #CFC9BD; } .btn.ghost:hover { border-color: var(--navy); } .btn.light { background: var(--cream); color: var(--deep); } /* dark grounds: 10.86 */ .btn.light:hover { background: #E6DCCB; } /* ── 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: 20px; 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); } .intro { font-size: 19px; max-width: 58ch; } /* ── The responsiveness band. Every review is about how fast he answers, so that is the argument, and the seven-day hours are the proof. ─────── */ .fast .grid { display: grid; gap: var(--s-2xl); margin-top: var(--s-2xl); align-items: start; } @media (min-width: 900px) { .fast .grid { grid-template-columns: 1.15fr 1fr; } } .fast .beats { display: grid; gap: var(--s-lg); } .fast .beat { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--s-lg); align-items: start; } .fast .n { font-family: var(--mono); font-size: clamp(26px, 3.2vw, 38px); line-height: 1; font-weight: 600; color: var(--cream); /* 10.86 on deep */ } .fast .beat p { margin: 0; color: var(--body-d); font-size: 16.5px; } .fast .beat b { color: #fff; font-weight: 700; } .hours { margin: 0; border-top: 1px solid var(--rule-d); } .hours div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid var(--rule-d); font-family: var(--mono); font-size: 14.5px; } .hours dt { margin: 0; color: var(--dim); } .hours dd { margin: 0; color: #fff; font-weight: 600; } .hours .note { display: block; margin-top: var(--s-md); font-family: inherit; font-size: 14.5px; color: var(--dim); border: 0; padding: 0; } /* ── What he cleans: alternating photo / text rows. Not #37's card trio. ─ */ .jobs { display: grid; gap: var(--s-2xl); margin-top: var(--s-2xl); } .job { display: grid; gap: var(--s-lg); align-items: center; } @media (min-width: 860px) { .job { grid-template-columns: 1fr 1fr; gap: var(--s-2xl); } .job.flip figure { order: 2; } /* ⚠ LOAD-BEARING: without this the .flip class silently does nothing and every photo sits on the left. Banked on #33. */ } .job figure { margin: 0; } .job img { border-radius: 12px; width: 100%; } .job .tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; } .job p { color: var(--muted); margin: 0; } /* ── Reviews ──────────────────────────────────────────────────────────── */ .rev .score { display: inline-flex; align-items: baseline; gap: 10px; margin: 0 0 var(--s-lg); font-family: var(--mono); color: var(--ink); } .rev .score b { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; } .rev .score span { font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .rev .feature { border-left: 3px solid var(--navy); padding-left: var(--s-lg); margin: 0 0 var(--s-2xl); max-width: 62ch; } .rev .feature p { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.38; color: var(--ink); letter-spacing: -0.012em; font-weight: 600; } .rev .more { display: grid; gap: var(--s-xl); } @media (min-width: 860px) { .rev .more { grid-template-columns: repeat(3, 1fr); } } .rev .more blockquote { margin: 0; padding-top: var(--s-md); border-top: 2px solid var(--tan); } .rev .more p { color: var(--muted); font-size: 16px; margin: 0 0 12px; } /* ⚠ LOAD-BEARING, carried from #29 onward: the page footer is also a