/* R J Potter Construction Inc - Paso Robles - spec build #34 --------------------------------------------------------------------------- ⚠⚠⚠ TYPE-LED BUILD. NO CLIENT IMAGERY OF ANY KIND EXISTS. The Places API returns ZERO photos for this listing - not a logo, not a job, not even a customer upload. Second build in the set with no client material at all after Paul Cuce #29, and the first under Matt's 2026-09-16 rule that no photographs is not a disqualification. ⚠⚠ THE PALETTE WAS CHOSEN, NOT SAMPLED, AND THIS FILE SAYS SO OUTRIGHT. The locked rule is that the palette comes from the client's own material. It CANNOT be followed here because no material exists, so it is named for what it is rather than dressed up as sampled: #14161A a cool near-black ground #A9712F a clay ochre, chosen to read as Paso Robles limestone and raw timber rather than the stock contractor blue #E6D6BC a pale sand, for dark grounds only ⚠ DELIBERATELY NOT MATT'S BLUE. The STRUCTURE below is borrowed from alignmentautomations.com; the colour is not, because this is the client's page and a Paso Robles builder is not a software brand. ⭐⭐ REBUILT TWICE ON 2026-09-16. Matt: *"i feel the site could have a better layout and look more modern"*, then *"look at my website, alignmentautomations.com. no photos but looks great."* ATTEMPT ONE put the hero, every heading, every paragraph and both cards in ONE 640px centred column, so every block had the same width, weight and shape and nothing led the eye. ATTEMPT TWO fixed the monotony but reached for a SERIF display, which was a divergence from Matt's own house style rather than an application of it. ⭐ WHAT alignmentautomations.com ACTUALLY DOES, and what is borrowed here: 1. **BOLD SANS DISPLAY, TIGHT TRACKING** - not a serif. With an ACCENT COLOUR ON THE KEY PHRASE inside the headline ("...is *closing the job*"). 2. **MONOSPACE AS THE ACCENT TYPEFACE** for eyebrows, labels and technical lines. ⭐ This is the most useful borrow of the three, because a licence number, a classification and an issue date ARE record data - monospace says "you can check this" in a way no other typeface does, and this whole page rests on the licence being checkable. 3. **EYEBROWS: a short accent rule, then uppercase mono, widely letterspaced.** 4. **DATA AS BIG FIGURES** - his "$950" treatment, applied to the licence. 5. **SUBTLE ROUNDED CARDS with hairline borders**, not the left-stripe boxes of attempt one, which read as 2015. 6. **ARROW LINKS** in the accent colour for secondary actions. 7. **Dark section, then white section**, alternating. THE THREE-TONE TRAP, SIXTEENTH BUILD RUNNING: #A9712F white 4.13 -> LARGE TEXT ONLY, never small body copy #8A5B24 white 5.83 -> small text, links, fills #14161A white 18.11 -> dark grounds #E6D6BC white 1.43 UNUSABLE | on deep 12.69 -> DARK GROUNDS ONLY #CFC7BA on deep 10.81 -> body text on dark ⚠⚠ #A9712F IS 4.13 ON WHITE, UNDER THE 4.5 SMALL-TEXT BAR. It is used ONLY for large display accents and the 2px eyebrow rules, where the 3.0 bar applies. EVERY button fill and every small link uses #8A5B24 at 5.83. --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --pale: #F7F5F2; --ink: #14161A; /* on white 18.11 */ --muted: #52565C; /* on white 7.38 */ --rule: #E3E0DB; --rule-d: #2E3238; --clay: #A9712F; /* large display + eyebrow rules only. white 4.13 */ --clay-t: #8A5B24; /* small text + links. on white 5.83 */ --clay-f: #8A5B24; /* button fill, white on it 5.83 */ --sand: #E6D6BC; /* DARK GROUNDS ONLY - 1.43 on white */ --deep: #14161A; --deep-2: #1B1E23; --body-d: #CFC7BA; /* body text on dark. 10.81 */ --dim: #9AA0A8; /* labels on dark. 6.87 */ --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, 112px); } * { 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; caret-color: var(--clay); } ::selection { background: var(--sand); color: var(--deep); } :focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--clay-t); } .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: short accent rule, then uppercase mono. His pattern. ────── */ .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(--clay-t); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--clay); flex: none; } .eyebrow.on-dark { color: var(--sand); } .eyebrow.on-dark::before { background: var(--sand); } /* ── Masthead ─────────────────────────────────────────────────────────── */ .mast { background: var(--deep); border-bottom: 1px solid var(--rule-d); } .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: #fff; 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(--dim); margin-top: 5px; font-weight: 400; } .mast .tel { color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid var(--rule-d); border-radius: 7px; padding: 9px 16px; } .mast .tel:hover { border-color: var(--sand); color: var(--sand); } /* ── HERO. No image. Bold sans, left aligned, accent on the key phrase. ─ */ .hero { background: linear-gradient(180deg, rgba(169,113,47,.07), transparent 55%), var(--deep); color: #fff; padding-block: clamp(62px, 9vw, 110px); } .hero h1 { margin: 0 0 var(--s-lg); max-width: 18ch; color: #fff; font-size: clamp(38px, 6.4vw, 72px); line-height: 1.03; letter-spacing: -0.035em; font-weight: 800; } .hero h1 em { font-style: normal; color: var(--clay); } /* large display on deep: 4.39, over the 3.0 bar */ .hero p.lede { margin: 0 0 var(--s-xl); color: var(--body-d); font-size: clamp(16.5px, 1.85vw, 20px); max-width: 52ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s-2xl); } /* ⭐ DATA AS BIG FIGURES - his "$950" treatment. On a page with no photographs the licence figures are both the imagery and the most verifiable thing on it, and the mono says "check this" better than any other typeface. */ .stats { display: grid; gap: var(--s-lg) var(--s-2xl); grid-template-columns: repeat(auto-fit, minmax(138px, max-content)); padding-top: var(--s-xl); border-top: 1px solid var(--rule-d); } .stats .n { display: block; font-family: var(--mono); color: var(--sand); /* 12.69 */ font-size: clamp(27px, 3.6vw, 40px); line-height: 1; letter-spacing: -0.02em; font-weight: 600; } .stats .l { display: block; margin-top: 11px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim); /* 6.87 */ } .btn { display: inline-block; background: var(--clay-f); color: #fff; /* 5.83:1 */ font-size: 16.5px; font-weight: 700; padding: 14px 26px; border-radius: 7px; text-decoration: none; border: 1px solid transparent; } .btn:hover { background: #71491C; } .btn.ghost { background: transparent; color: #fff; border-color: var(--rule-d); } .btn.ghost:hover { background: rgba(255,255,255,.06); border-color: var(--sand); } /* arrow link, his secondary-action pattern */ .arrow { display: inline-block; font-family: var(--mono); font-size: 13.5px; color: var(--clay-t); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .arrow:hover { color: var(--ink); } .arrow.on-dark { color: var(--sand); } .arrow.on-dark:hover { color: #fff; } /* ── Sections ─────────────────────────────────────────────────────────── */ section { padding-block: var(--sect); } .band-pale { background: var(--pale); } .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.6vw, 42px); line-height: 1.1; letter-spacing: -0.032em; 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; } .muted { color: var(--muted); } .lede { font-size: 19px; } /* ── Cards. Subtle hairline + rounded, his treatment - NOT the left-stripe boxes of attempt one. ────────────────────────────────────────────── */ .cards { display: grid; gap: var(--s-lg); margin-top: var(--s-xl); } @media (min-width: 780px) { .cards { grid-template-columns: repeat(2, 1fr); } } .cards > div { border: 1px solid var(--rule); border-radius: 12px; padding: var(--s-lg); background: var(--ground); } .cards .tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--clay-t); margin-bottom: 12px; } .cards p { color: var(--muted); margin: 0; } /* ── Call strip ───────────────────────────────────────────────────────── */ .strip { background: var(--deep-2); 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-2xl); } .strip h2 { margin: 0; color: #fff; font-size: clamp(22px, 2.7vw, 30px); max-width: 24ch; } /* ── Testimonials. One featured pull-quote, then two smaller. ─────────── */ .pull { font-size: clamp(22px, 2.9vw, 32px); line-height: 1.32; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); margin: 0 0 var(--s-md); max-width: 26ch; } .says { display: grid; gap: var(--s-xl); margin-top: var(--s-2xl); } @media (min-width: 820px) { .says { grid-template-columns: repeat(2, 1fr); } } .says blockquote { margin: 0; padding-top: var(--s-md); border-top: 2px solid var(--clay); } .says p { color: var(--muted); margin: 0 0 12px; font-size: 16.5px; } /* ⚠⚠ LOAD-BEARING. The page footer is also a