/* ============================================================ PROOF :: "here is the price, and here is the proof" For the trade where the customer's real fear is being gouged, and where the finished job photographs well: junk removal, hauling, demolition, clean-outs, pressure washing. Two things close that sale, and this design is built around exactly those two: a published number, and a photograph of the same corner of the same yard taken twice. Everything else defers to them. The type is a plain condensed grotesque shouting in caps, the palette is one bright fill on a dark or a bone ground, and there is no ornament anywhere, because ornament reads as money spent on the website rather than on the truck. THE DIAL --proof 0 to 3 How hard the evidence is framed. At 0 the before/after images butt together bare and the price cards are hairlines: quiet, almost editorial. At 3 the chips are heavy, the seam between before and after is a thick accent rule, and the picked tier carries a full corner flag. Same markup, same palette, different volume of insistence. Set on , never on :root, and see the note on derived geometry below. ============================================================ */ :root { /* ---- grounds, shared by every palette ---- The two grounds do not change with the accent. The whole page alternates between them, and that alternation is doing the structural work that borders would otherwise have to do. */ --night: #121513; /* the dark ground */ --night-2: #1B211C; /* raised surfaces on the dark ground */ --bone: #F4F5F0; /* the light ground */ --bone-2: #FFFFFF; /* raised surfaces on the light ground */ --ink: #14171A; /* text on the light ground */ --ink-2: #555C5F; /* muted text on the light ground */ --on-night: #F2F4F1; /* text on the dark ground */ --on-night-2: #A6AEA6; /* muted text on the dark ground */ --line: #DCDED6; /* hairline on the light ground */ --line-night: #2C332D; /* hairline on the dark ground */ --plate: #3A3F39; /* base.css image plate, so a slow photo is not a hole */ --display: 'Arial Narrow', 'Helvetica Neue Condensed', 'Liberation Sans Narrow', 'Roboto Condensed', system-ui, sans-serif; --body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --wrap: 1180px; } /* ---- palettes ---- Each declares THREE values, not one. A single accent cannot clear AA in every position: the bright fill that makes a button feel urgent is far too light to be read as text on bone, and a green dark enough to read on bone is muddy as a fill. So the accent is split by job: --accent the fill. Dark ink is printed on it, never white. --accent-on-night the accent used AS TEXT on the dark ground. --accent-on-bone the accent used AS TEXT on the light ground. All three are gated by a11y.json against every palette. This is the same lesson the white-on-orange hero taught: an accent is not a colour, it is a colour plus the surface it lands on. */ [data-theme="lime"] { --accent: #8DC63F; --accent-on-night: #A2D455; --accent-on-bone: #4C7615; } [data-theme="amber"] { --accent: #F0A500; --accent-on-night: #F5B933; --accent-on-bone: #7A5200; } [data-theme="sky"] { --accent: #4FB3E8; --accent-on-night: #6FC4F0; --accent-on-bone: #135E7C; } [data-theme="coral"] { --accent: #FF6B4A; --accent-on-night: #FF8A6E; --accent-on-bone: #9E2F12; } [data-theme="wda"] { --accent: #2BFF66; --accent-on-night: #2BFF66; --accent-on-bone: #0F7A34; } /* ---- derived geometry ---- THIS MUST LIVE ON body, NOT ON :root. --proof is set as an inline style on . A custom property that calls calc() freezes at the point it is DECLARED, so a rule written on :root computes against :root's --proof and can never see the body's override: the slider would move and nothing on the page would change. Declaring the derived values here, on the same element that carries the dial, is what makes the dial actually work. Four designs in this vault have now been bitten by this exact thing. */ body { --proof: 2; --seam: calc(1px + var(--proof) * 2px); /* the before/after divider */ --chip-pad: calc(.28rem + var(--proof) * .07rem); --chip-size: calc(.6rem + var(--proof) * .02rem); --edge: calc(1px + var(--proof) * .7px); /* card borders */ --flag-show: calc(var(--proof) / 3); /* the corner flag fades in */ margin: 0; background: var(--night); color: var(--on-night); font-family: var(--body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); } .wrap--narrow { max-width: 820px; } .skip { position: absolute; left: .5rem; top: -3rem; z-index: 50; background: var(--accent); color: var(--ink); padding: .6rem 1rem; font-weight: 700; text-decoration: none; transition: top var(--dur) var(--ease); } .skip:focus { top: .5rem; } :where(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ================= type ================= */ h1, h2, h3, .display { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: .95; text-wrap: balance; margin: 0; } h1 { font-size: clamp(2.6rem, 7.4vw, 5rem); max-width: var(--measure-display); } h2 { font-size: clamp(2rem, 5vw, 3.4rem); } h3 { font-size: 1.18rem; letter-spacing: .01em; } .lead { font-size: 1.05rem; color: var(--on-night-2); max-width: var(--measure-body); margin: 1.1rem 0 0; } .lead--center { margin-inline: auto; text-align: center; } /* The eyebrow: a short accent rule then letterspaced caps. It is the only repeating motif in the design, which is what lets the sections alternate grounds without the page falling apart. */ .eyebrow { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-on-night); margin: 0 0 .9rem; } .eyebrow__rule { display: block; width: 2rem; height: 2px; background: currentColor; flex: none; } .tag { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; } /* ================= buttons ================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .8rem 1.4rem; font-family: var(--display); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; border: 2px solid currentColor; border-radius: 4px; color: var(--on-night); background: transparent; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .btn:hover { transform: translateY(-2px); } /* Ink on the fill, never white. Every palette here is a bright, high-luminance colour, and white on any of them lands around 2:1. */ .btn--fill { background: var(--accent); border-color: var(--accent); color: var(--ink); } .btn--ink { background: var(--ink); border-color: var(--ink); color: var(--bone); } .btn--ghost { color: var(--ink); } .btn--lg { font-size: 1.12rem; padding: 1rem 1.7rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; } .btn-row--center { justify-content: center; } /* ================= chrome ================= */ .meta { background: #0C0F0D; border-bottom: 1px solid var(--line-night); } .meta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .5rem; color: var(--on-night-2); flex-wrap: wrap; } .meta__phone { color: var(--accent-on-night); text-decoration: none; font-weight: 700; font-family: var(--mono); font-size: .78rem; } .bar { background: var(--night); border-bottom: 1px solid var(--line-night); } .bar .wrap { display: flex; align-items: center; gap: 1rem; padding-block: .9rem; flex-wrap: wrap; } .brand { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; letter-spacing: .01em; color: var(--on-night); text-decoration: none; margin-right: auto; } .nav { display: flex; gap: 1.15rem; flex-wrap: wrap; } .nav a { color: var(--on-night-2); text-decoration: none; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } .nav a:hover { color: var(--accent-on-night); } /* ================= hero ================= */ .hero { background: var(--night); padding-block: clamp(2.5rem, 6vw, 4.5rem); } .hero__grid { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; } @media (min-width: 900px) { .hero__grid { grid-template-columns: 1fr 440px; } } .ticks { list-style: none; margin: 1.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; } .ticks li { position: relative; padding-left: 1.4rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-night-2); } .ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-on-night); font-weight: 700; } /* The quote card. Raised off the dark ground with an accent cap so it reads as the one place on the page that does something. */ .quote-card { background: var(--night-2); border: 1px solid var(--line-night); border-top: 4px solid var(--accent); border-radius: 8px; padding: clamp(1.3rem, 3vw, 1.9rem); } .quote-card h2 { font-size: clamp(1.6rem, 3.4vw, 2.1rem); } .quote-card__lead { color: var(--on-night-2); font-size: .93rem; margin: .5rem 0 1.3rem; } .field { margin: 0 0 .9rem; display: block; } .field label { display: block; font-size: .82rem; font-weight: 600; color: var(--on-night); margin-bottom: .35rem; } .field__opt { color: var(--on-night-2); font-weight: 400; } .field input, .field textarea { width: 100%; min-height: 46px; padding: .6rem .75rem; background: #10140F; color: var(--on-night); border: 1px solid var(--line-night); border-radius: 5px; font: inherit; font-size: .93rem; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: #6E766E; } .fineprint { font-size: .72rem; line-height: 1.5; color: var(--on-night-2); margin: .9rem 0 0; } /* ================= sections ================= */ .section { padding-block: clamp(3rem, 7vw, 5.5rem); background: var(--bone); color: var(--ink); } .section .lead { color: var(--ink-2); } .section .eyebrow { color: var(--accent-on-bone); } .section--night { background: var(--night); color: var(--on-night); } .section--night .lead { color: var(--on-night-2); } .section--night .eyebrow { color: var(--accent-on-night); } .section--edge { border-block: 1px solid var(--line); } /* Centred section heads sit above centred leads. */ .section > .wrap > .eyebrow { justify-content: center; } .section > .wrap > h2.display { text-align: center; } /* ================= before and after ================= */ .sets { display: grid; gap: clamp(1.2rem, 3vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); } @media (min-width: 860px) { .sets { grid-template-columns: repeat(2, 1fr); } .sets > .set:first-child { grid-column: 1 / -1; } } .set { margin: 0; border: var(--edge) solid var(--line-night); border-radius: 8px; overflow: hidden; background: var(--night-2); } /* No gap between the halves. The seam is a rule, not a space: the two frames have to read as one photograph that changed, not as two photographs. */ .set__pair { display: grid; grid-template-columns: 1fr 1fr; } .set__half { position: relative; } .set__half + .set__half { border-left: var(--seam) solid var(--accent); } .set__half svg { display: block; width: 100%; height: auto; } .chip { position: absolute; top: .6rem; left: .6rem; z-index: 1; font-family: var(--mono); font-size: var(--chip-size); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: var(--chip-pad) calc(var(--chip-pad) * 2); border-radius: 3px; } .chip--before { background: rgba(10, 12, 10, .82); color: #FFFFFF; } .chip--after { background: var(--accent); color: var(--ink); } .set__cap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.1rem; flex-wrap: wrap; } .set__title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; color: var(--on-night); } .set__result { font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-night); } /* ================= services ================= */ .cards { display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); } @media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .cards { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--bone-2); border: var(--edge) solid var(--line); border-radius: 8px; padding: 1.4rem 1.3rem 1.2rem; transition: transform var(--dur) var(--ease); } .card:hover { transform: translateY(-3px); } .card--mark { border-color: var(--accent); } .card__n { font-family: var(--mono); font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--accent-on-bone); } .card h3 { margin: .5rem 0 .5rem; } .card p { margin: 0; color: var(--ink-2); font-size: .94rem; } .card__more { display: inline-block; margin-top: .9rem; font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-bone); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; } /* ================= pricing ================= */ .tiers { display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); } @media (min-width: 780px) { .tiers { grid-template-columns: repeat(3, 1fr); } } .tier { position: relative; overflow: hidden; background: var(--bone-2); border: var(--edge) solid var(--line); border-radius: 8px; padding: 1.5rem 1.4rem; } /* The picked tier inverts to the dark ground. That is the same alternation the page already uses, applied at component scale, so it needs no new colour. */ .tier--pick { background: var(--night); border-color: var(--night); color: var(--on-night); } .tier__label { font-size: 1.05rem; } .tier--pick .tier__label { color: var(--on-night); } .tier__price { font-family: var(--display); font-weight: 700; line-height: 1; font-size: clamp(2.6rem, 6vw, 3.6rem); color: var(--accent-on-bone); margin: .6rem 0 .5rem; font-variant-numeric: tabular-nums; } .tier--pick .tier__price { color: var(--accent-on-night); } .tier__note { margin: 0; font-size: .9rem; color: var(--ink-2); } .tier--pick .tier__note { color: var(--on-night-2); } /* The corner flag, and a note on why it is built this way. The obvious way to draw a corner ribbon is one rotated bar poking out past both edges of the card, relying on the card's overflow:hidden to trim the ends. That renders correctly and still fails the vault's layout bar, because the bar measures every box against the VIEWPORT and knows nothing about clipping ancestors: at 390px the poking-out ends sit past the right edge and get reported as overflow. That report is a false positive, and the tempting fix is to teach the harness about clipping ancestors. Not worth it. Loosening a layout guard so a new design can pass is how guards quietly stop guarding, and this shape can be drawn without overflowing anything at all: a square wedge clipped to a triangle, with the label rotated INSIDE it. Nothing leaves the card, so nothing can leave the viewport. */ .tier__flag { position: absolute; top: 0; right: 0; width: 7.5rem; height: 7.5rem; clip-path: polygon(100% 0, 0 0, 100% 100%); background: var(--accent); opacity: var(--flag-show); /* at --proof 0 the flag is gone, not small */ pointer-events: none; } .tier__flag > span { position: absolute; top: 1.9rem; right: 0; width: 6.4rem; transform: rotate(45deg); color: var(--ink); text-align: center; font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .addons { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; } @media (min-width: 780px) { .addons { grid-template-columns: repeat(3, 1fr); } } .addons li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--bone-2); border: var(--edge) solid var(--line); border-radius: 6px; padding: .85rem 1.1rem; font-size: .93rem; } .addons b { font-family: var(--display); font-size: 1.15rem; color: var(--accent-on-bone); font-variant-numeric: tabular-nums; } .note-bar { margin: 1.6rem 0 0; padding: 1rem 1.2rem; border-left: 4px solid var(--accent); background: var(--bone-2); border-radius: 0 6px 6px 0; font-size: .95rem; color: var(--ink-2); } /* ================= split ================= */ .split { display: grid; gap: clamp(1.8rem, 4vw, 3rem); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr .8fr; } } .portrait { border-radius: 8px; overflow: hidden; } .portrait svg { display: block; width: 100%; height: auto; } .marks { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .6rem; } .marks li { position: relative; padding-left: 1.6rem; color: var(--on-night-2); font-size: .95rem; } .marks li::before { content: ""; position: absolute; left: 0; top: .55em; width: .6rem; height: .6rem; background: var(--accent); } /* ================= reviews ================= */ .says { display: grid; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); } @media (min-width: 820px) { .says { grid-template-columns: repeat(3, 1fr); } } .say { margin: 0; background: var(--bone-2); border: var(--edge) solid var(--line); border-radius: 8px; padding: 1.4rem 1.3rem; } .say__stars { margin: 0 0 .7rem; color: var(--accent-on-bone); letter-spacing: .1em; font-size: .95rem; } .say blockquote { margin: 0 0 1rem; font-size: .96rem; color: var(--ink); } .say figcaption { display: flex; flex-direction: column; gap: .1rem; } .say__who { font-weight: 700; font-size: .9rem; } .say__meta { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); } /* ================= areas ================= */ .roll { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .roll a { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--line-night); border-radius: 4px; color: var(--on-night-2); text-decoration: none; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .roll a:hover { border-color: var(--accent); color: var(--accent-on-night); } /* ================= faq ================= */ .qa { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); } .qa details { border-bottom: 1px solid var(--line); } .qa summary { cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; position: relative; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .01em; color: var(--ink); } .qa summary::-webkit-details-marker { display: none; } .qa summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 1.3rem; color: var(--accent-on-bone); line-height: 1; } .qa details[open] summary::after { content: "–"; } .qa details p { margin: 0 0 1.2rem; color: var(--ink-2); font-size: .95rem; max-width: var(--measure-body); } /* ================= closing band ================= */ .band { background: var(--accent); color: var(--ink); padding-block: clamp(2.6rem, 6vw, 4rem); text-align: center; } .band h2 { font-size: clamp(2rem, 5.4vw, 3.4rem); } .band p { margin: .9rem auto 0; max-width: var(--measure-body); color: var(--ink); opacity: .82; } /* ================= demo controls ================= */ .controls { background: var(--night-2); border-top: 1px solid var(--line-night); padding-block: 2.2rem; text-align: center; } .controls h3 { color: var(--on-night); } .note { color: var(--on-night-2); font-size: .85rem; max-width: var(--measure-body); margin: .6rem auto 0; } .note--spaced { margin-top: 1.4rem; display: flex; align-items: center; justify-content: center; gap: .7rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } .swatches { display: flex; justify-content: center; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap; } .swatch { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line-night); cursor: pointer; padding: 0; } .swatch[aria-pressed="true"] { border-color: var(--on-night); transform: scale(1.12); } .slider { accent-color: var(--accent); } /* ================= footer ================= */ .foot { background: #0C0F0D; color: var(--on-night-2); padding-block: 2.6rem 1.6rem; border-top: 1px solid var(--line-night); } .foot-grid { display: grid; gap: 1.8rem; } @media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } } .foot h4 { font-family: var(--display); text-transform: uppercase; font-size: .95rem; color: var(--on-night); margin: 0 0 .7rem; letter-spacing: .04em; } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; } .foot a { color: var(--on-night-2); text-decoration: none; font-size: .9rem; } .foot a:hover { color: var(--accent-on-night); } .foot .note { margin-left: 0; margin-top: .7rem; } .colophon { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line-night); margin-top: 2rem; padding-top: 1.2rem; color: var(--on-night-2); }