/* Dave Ormonde Construction / Ormonde Construction LLC - Templeton - build #36 --------------------------------------------------------------------------- TYPE-LED BUILD. No client imagery exists: the listing has ZERO photographs of any kind, not even a customer upload. Fourth build with no client material after Paul Cuce #29, R J Potter #34 and C3 #35. ⚠⚠ FOURTH TYPE-LED PAGE IN A ROW AND THIRD CONSECUTIVE NORTH COUNTY BUILD. #34 Paso Robles, #35 Paso Robles/Templeton, #36 Templeton/Atascadero. These owners could plausibly know each other, so the banked rule - "every spec build gets its own design, changing the palette is not enough" - is doing real work here for the second day running. What is different IN KIND: 1. THE YEAR IS THE HERO. A colossal mono "SINCE 1985" is the dominant element of the page, with the headline SMALLER beneath it. That inverts the normal hierarchy. #34 and #35 both lead with a big sans headline and put their figures in a subordinate stat row. Here the number IS the image, which is the type-led principle pushed one step further. 2. A DARK DATED TIMELINE RAIL replaces #34's rounded cards and #35's A/B split band. It exists because this prospect's defining fact is duration, which neither of the others had. 3. THE LICENCE RECORD IS ON PAPER, IN A TWO-COLUMN FACT GRID - not the full-width dark
band that #34 and #35 both used. The dark ground moves to the timeline instead, so the page rhythm differs too. 4. TWO REVIEWS, SO THEY ARE TREATED AS TESTIMONY, not a grid or a ledger: one long read given the full measure with its strongest line pulled out. 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. There is none, so it is named for what it is: #1A1613 a warm near-black, browner than #35's cool ground #C4604A a brick red, chosen for barn board and old redwood. Deliberately a different HUE from #34's clay ochre and #35's pine green, not a neighbouring tone of either. #E8D9D2 a pale rose, for dark grounds only #F7F4F1 a WARM paper ground, where #35's was cool DELIBERATELY NOT MATT'S BLUE. The layout vocabulary is borrowed from alignmentautomations.com per the banked design-reference rule; the colour never is. THE THREE-TONE TRAP, EIGHTEENTH BUILD RUNNING. ⚠ EVERY RATIO BELOW WAS COMPUTED WITH A SCRIPT, NOT ESTIMATED. #C4604A on white 4.10 | on paper 3.74 -> LARGE DISPLAY ONLY #C4604A on deep 4.38 -> large display on dark #A8452F on white 5.90 | on paper 5.39 -> small text, links, fills #1A1613 on white 17.98 | on paper 16.41 #5A544F on white 7.46 | on paper 6.81 -> muted body #E8D9D2 on white 1.37 UNUSABLE | on deep 13.09 -> DARK GROUNDS ONLY #CCC4BD on deep 10.44 -> body text on dark #A29A93 on deep 6.49 -> labels on dark #8E8680 on deep 5.03 -> legal line ⚠⚠ #C4604A IS 4.10 ON WHITE AND 3.74 ON PAPER, UNDER THE 4.5 SMALL-TEXT BAR. Large display and 2px rules only, where the 3.0 bar applies. EVERY button fill and small link uses #A8452F. One token would silently fail one job. --------------------------------------------------------------------------- */ :root { --ground: #FFFFFF; --paper: #F7F4F1; /* ink on it 16.41, muted 6.81, brick-t 5.39 */ --ink: #1A1613; /* on white 17.98 */ --muted: #5A544F; /* on white 7.46 */ --rule: #E4DFD9; --rule-d: #332C27; --brick: #C4604A; /* LARGE DISPLAY + 2px rules only. white 4.10, deep 4.38 */ --brick-t: #A8452F; /* small text + links. white 5.90, paper 5.39 */ --brick-f: #A8452F; /* button fill, white on it 5.90 */ --brick-h: #8E3B2B; /* fill hover, white on it 7.47 */ --rose: #E8D9D2; /* DARK GROUNDS ONLY - 1.37 on white */ --deep: #1A1613; --body-d: #CCC4BD; /* body text on dark. 10.44 */ --dim: #A29A93; /* labels on dark. 6.49 */ --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(--brick-t); } ::selection { background: var(--rose); color: var(--deep); } :focus-visible { outline: 2px solid var(--brick-t); outline-offset: 3px; } img { max-width: 100%; height: auto; display: block; } a { color: var(--brick-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 ──────────────────────────────────────────────────────────── */ .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(--brick-t); margin: 0 0 var(--s-md); } .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--brick-t); flex: none; } .eyebrow.on-dark { color: var(--rose); } .eyebrow.on-dark::before { background: var(--brick); } /* ── Masthead: paper, with the licence number as a mono chip ──────────── */ .mast { background: var(--paper); 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 { color: var(--brick-t); font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap; border: 1px solid var(--rule); border-radius: 7px; padding: 9px 16px; background: var(--ground); } .mast .tel:hover { border-color: var(--brick-t); } /* ── HERO. ⭐ THE YEAR IS THE IMAGE. On a page with no photographs the most verifiable number on it becomes the dominant visual, and the headline sits BENEATH it rather than above. ──────────────────────────────── */ .hero { background: var(--paper); border-bottom: 1px solid var(--rule); padding-block: clamp(52px, 7.5vw, 92px); } .hero .since { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; } .hero .year { display: block; font-family: var(--mono); font-weight: 600; color: var(--ink); font-size: clamp(88px, 21vw, 260px); line-height: 0.84; letter-spacing: -0.055em; margin: 0 0 6px; } .hero .year b { color: var(--brick-t); font-weight: 600; } /* large display, 5.39 on paper */ .hero .rail { display: flex; align-items: center; gap: 14px; margin: 0 0 var(--s-xl); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } /* ⚠ min-width is load-bearing: with flex:1 alone the rule collapsed to a 3px stub on a phone and read as a stray hyphen before the text. Caught in a 375px render, invisible at desktop width. */ .hero .rail::before { content: ""; flex: 1 1 auto; min-width: 40px; height: 2px; background: var(--brick); } .hero h1 { margin: 0 0 var(--s-md); max-width: 24ch; color: var(--ink); font-size: clamp(28px, 3.9vw, 46px); line-height: 1.08; letter-spacing: -0.03em; font-weight: 800; } .hero h1 em { font-style: normal; color: var(--brick-t); } .hero p.lede { margin: 0 0 var(--s-xl); color: var(--muted); font-size: 19px; max-width: 56ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; } .btn { display: inline-block; background: var(--brick-f); color: #fff; /* 5.90:1 */ font-size: 16.5px; font-weight: 700; padding: 14px 26px; border-radius: 7px; text-decoration: none; border: 1px solid transparent; } .btn:hover { background: var(--brick-h); } .btn.ghost { background: var(--ground); color: var(--ink); border-color: #CFC8C1; } .btn.ghost:hover { border-color: var(--brick-t); } .arrow { display: inline-block; font-family: var(--mono); font-size: 13.5px; color: var(--brick-t); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .arrow:hover { color: var(--ink); } .arrow.on-dark { color: var(--rose); } .arrow.on-dark:hover { color: #fff; } /* ── Sections ─────────────────────────────────────────────────────────── */ section { padding-block: var(--sect); } .band-paper { background: var(--paper); } 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: 19px; font-weight: 800; letter-spacing: -0.015em; } p { margin: 0 0 var(--s-md); } p:last-child { margin-bottom: 0; } .lede { font-size: 19px; } .muted { color: var(--muted); } /* ── THE TIMELINE RAIL. #36's signature block. Dated stops on a dark ground. Exists because duration is this contractor's defining fact. */ .time { background: var(--deep); color: var(--body-d); } .time h2 { color: #fff; } .time .intro { color: var(--body-d); font-size: 19px; max-width: 60ch; } .time ol { list-style: none; margin: var(--s-2xl) 0 0; padding: 0; display: grid; gap: var(--s-xl); } @media (min-width: 900px) { .time ol { grid-template-columns: repeat(4, 1fr); gap: 0; } } .time li { position: relative; padding-top: var(--s-lg); border-top: 1px solid var(--rule-d); } @media (min-width: 900px) { .time li { padding-right: var(--s-lg); } } .time li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--brick); } .time .yr { display: block; font-family: var(--mono); font-weight: 600; color: var(--rose); /* 13.09 */ font-size: clamp(30px, 4vw, 42px); line-height: 1; letter-spacing: -0.03em; } .time .what { margin: 14px 0 0; font-size: 15.5px; color: var(--body-d); } .time .what b { color: #fff; font-weight: 700; } /* ── TESTIMONY. Only two reviews exist, so they are given room as testimony rather than squeezed into a grid. ──────────────────────────────── */ .say { max-width: 70ch; } .say .pull { font-size: clamp(23px, 3vw, 34px); line-height: 1.3; letter-spacing: -0.022em; font-weight: 700; color: var(--ink); margin: 0 0 var(--s-lg); padding-left: var(--s-lg); border-left: 3px solid var(--brick); } .say .long { color: var(--muted); font-size: 17.5px; } .say .long em { font-style: normal; color: var(--ink); font-weight: 600; } .who { margin: var(--s-lg) 0 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brick-t); font-weight: 600; } .who span { color: var(--muted); font-weight: 400; letter-spacing: 0.1em; } .say .second { margin-top: var(--s-2xl); padding-top: var(--s-xl); border-top: 1px solid var(--rule); } .say .second p { font-size: 19px; color: var(--ink); } /* ── THE RECORD, on paper, as a two-column fact grid. Not the dark full-width
band #34 and #35 both used. ───────────────────── */ .rec .facts { display: grid; gap: 1px; margin-top: var(--s-xl); background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; } @media (min-width: 760px) { .rec .facts { grid-template-columns: 1fr 1fr; } } .rec .facts > div { background: var(--paper); padding: var(--s-lg); } .rec dt { margin: 0 0 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .rec dd { margin: 0; font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); } .rec dd b { color: var(--brick-t); font-weight: 700; } /* 5.39 on paper */ .rec .note { margin-top: var(--s-lg); font-size: 14.5px; color: var(--muted); max-width: 74ch; } .rec .note b { color: var(--ink); } /* ── Letter ───────────────────────────────────────────────────────────── */ .letter p { color: var(--muted); } .letter strong { color: var(--ink); } .letter .sign { margin-top: var(--s-lg); color: var(--ink); font-weight: 600; } /* ── Footer ───────────────────────────────────────────────────────────── */ /* ⚠ Carried from #29/#32/#33/#34/#35: a global `footer` rule reaches INSIDE any