/* ============================================================================ Nashville’s Web Design — "The Map Layer" A cartographic design system: survey paper, hairline grid, coordinate ticks, registration marks and the logo's pin as the recurring marker. Written mobile-first. Every block is designed at 375px, then widened. ========================================================================= */ /* ---- Fonts. Self-hosted Metropolis — the actual typeface of the logo, so the wordmark and the headings are the same voice. Public domain (UNLICENSE). --- */ @font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap} /* Metropolis has no 700 face. Seven rules ask for one, including every button, and a missing weight is synthesised differently by different engines — which is why button text looked wrong on some browsers and fine on others. The SemiBold and ExtraBold faces are declared over ranges so every weight the stylesheet asks for resolves to a real file. */ @font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-SemiBold.woff2) format('woff2');font-weight:600 690;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-ExtraBold.woff2) format('woff2');font-weight:700 800;font-style:normal;font-display:swap} @font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Black.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap} /* ---- Tokens -------------------------------------------------------------- */ :root{ /* Survey-paper palette. The red and the ink are the original brand colours; the logo artwork is recoloured to match rather than the other way round. */ --paper:#F7F5F2; --paper-2:#FFFFFF; --sunk:#EFEAE3; --ink:#1A1919; --ink-2:#403B38; --muted:#6B6560; --rule:#E2DCD3; --rule-2:#D3CBC0; --brand:#AD3533; --brand-ink:#8E2A28; --brand-lift:#C26A68; /* the red lifted for the inverted band, where #AD3533 measures 2.79:1 on --ink */ --brand-tint:#F6E9E8; --grid:rgba(26,25,25,.045); /* map grid hairline */ --contour:rgba(26,25,25,.10); --font:Metropolis,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace; --pad:clamp(1.25rem,5vw,2rem); /* gutter */ --wide:76rem; /* max content width */ --narrow:44rem; /* prose measure */ --r:2px; /* the system is drafting-table square */ --tap:44px; /* minimum tap target */ } @media (prefers-color-scheme:dark){ :root{ --paper:#141312; --paper-2:#1C1A19; --sunk:#100F0E; --ink:#F2EEE9; --ink-2:#CFC8C1; --muted:#9A928B; --rule:#2E2B29; --rule-2:#3D3936; --brand:#D8524F; --brand-ink:#E8706D; --brand-lift:#F08D8A; --brand-tint:#2A1918; --grid:rgba(242,238,233,.05); --contour:rgba(242,238,233,.09); } } /* ---- Reset --------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } body{ font-family:var(--font); font-size:1.0625rem; /* 17px — never below 16 */ line-height:1.6; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; /* `clip` not `hidden`: overflow-x:hidden forces overflow-y to compute as auto, which makes a scroll container and silently breaks in-page anchor links (#section jumps land at the top) and position:sticky. `clip` gives the same 375px protection without creating a scroller. */ overflow-x:clip; } img,svg,video{display:block;max-width:100%;height:auto} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:var(--r)} ::selection{background:var(--brand-ink);color:#fff} .skip{ position:absolute;left:-9999px;top:0;z-index:999; background:var(--ink);color:var(--paper);padding:.85rem 1.25rem;font-weight:600; } .skip:focus{left:0} /* ---- Layout -------------------------------------------------------------- */ .wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)} .narrow{max-width:var(--narrow)} /* When .narrow sits on the container itself it would centre the whole block, which reads as a jump away from the left-aligned heroes and section heads. Keep the container at full width and constrain the measure on its children instead, so prose starts on the same line as everything above it. */ .wrap.narrow{max-width:var(--wide)} .wrap.narrow>*{max-width:var(--narrow)} section{padding-block:clamp(3.5rem,9vw,6.5rem)} .sec-sunk{background:var(--sunk)} /* There is exactly one inverted-section class, and it is .band (below). An earlier .sec-ink redefined --ink on the same element that read `background:var(--ink)` — the override fed back into that declaration, so the section rendered in the PAGE colour while its children stayed light-on-light. The headline and the ghost button were invisible and the blank headline held the layout open. Never redefine a token a rule reads. */ /* The map grid. A hairline graticule behind the page — the single most recognisable piece of the system. Kept very faint so text stays AA. */ .grid-bg{position:relative;isolation:isolate} .grid-bg::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:clamp(48px,9vw,88px) clamp(48px,9vw,88px); mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%); } /* ---- Type ---------------------------------------------------------------- */ h1,h2,h3,h4{font-weight:900;line-height:1.02;letter-spacing:-.022em;text-wrap:balance} /* The headline carries the whole proposition now and is longer than the one it replaced, so it scales a little smaller — four lines of 74px was more shout than sentence. */ h1{font-size:clamp(2.15rem,7vw,4rem)} h2{font-size:clamp(1.85rem,5.4vw,3.1rem);line-height:1.05} h3{font-size:clamp(1.2rem,3vw,1.55rem);line-height:1.15;letter-spacing:-.014em} h4{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em} p{text-wrap:pretty} /* The floor was 1.09rem, which on a phone left only 1.4px between a lede and the body copy under it — not enough to read as a different level, which is why the two ran together on mobile. Raised rather than shrinking the body copy below 16px, so the separation improves legibility instead of trading it away. */ .lede{font-size:clamp(1.16rem,2.4vw,1.3rem);line-height:1.55;color:var(--ink-2)} .sub{color:var(--muted)} strong{font-weight:700} /* The coordinate tick — mono, letterspaced, red. Used as an eyebrow everywhere. Reads as a map label, and gives every section a machine-readable-looking caption without any actual clutter. */ .tick{ font-family:var(--mono); font-size:.6875rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--brand-ink); display:flex;align-items:center;gap:.6rem; } .tick::before{ content:'';flex:none;width:1.4rem;height:1px;background:var(--brand);opacity:.55; } .tick-plain::before{display:none} /* ---- Buttons ------------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; min-height:var(--tap);padding:.8rem 1.4rem; font-weight:700;font-size:1rem;letter-spacing:-.01em; text-decoration:none;border:1.5px solid transparent;border-radius:var(--r); cursor:pointer;transition:transform .12s ease,background .18s ease,color .18s ease,border-color .18s ease; } .btn:active{transform:translateY(1px)} .btn-primary{background:var(--brand-ink);color:#fff;border-color:var(--brand-ink)} .btn-primary:hover{background:var(--brand-ink);border-color:var(--brand-ink)} /* A filled button is white-on-red in every context. Nav, drawer and footer link rules are more specific than .btn-primary on their own, so without this a button dropped into one of them inherits that context's link colour and renders dark text on red. */ a.btn-primary,a.btn-primary:hover,a.btn-primary:focus,a.btn-primary:visited, button.btn-primary,.btn-primary{color:#fff} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)} .btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)} .btn-row{display:flex;flex-wrap:wrap;gap:.75rem} /* Text link with the pin-red underline that thickens on hover. */ .link{ color:var(--ink);text-decoration:none;font-weight:600; box-shadow:inset 0 -2px 0 var(--brand); transition:box-shadow .15s ease,color .15s ease; } .link:hover{box-shadow:inset 0 -1.2em 0 var(--brand-tint);color:var(--brand-ink)} /* ---- Header -------------------------------------------------------------- */ .hdr{ position:sticky;top:0;z-index:60; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--rule); } .hdr-in{display:flex;align-items:center;gap:1rem;min-height:64px} .brand{display:flex;align-items:center;flex:none;text-decoration:none;padding-block:.5rem} /* 160px, matching the width attribute — the intrinsic size and the rendered size agreeing is what stops the browser reserving the wrong box on load. */ .brand svg,.brand img{width:160px;height:auto} @media (max-width:26rem){.brand svg,.brand img{width:136px}} /* The artwork is near-black ink on transparent, so on a dark background it needs lightening rather than hue rotation — the previous filter was tuned for the navy version and turned the red chevron green. */ @media (prefers-color-scheme:dark){.brand img{filter:invert(1) brightness(1.05)}} .nav{display:none;margin-left:auto;align-items:center;gap:.35rem} .nav a:not(.btn){ text-decoration:none;font-weight:600;font-size:.95rem; padding:.6rem .8rem;border-radius:var(--r);color:var(--ink-2); min-height:var(--tap);display:inline-flex;align-items:center; } .nav a:not(.btn):hover{color:var(--ink);background:var(--sunk)} .nav a:not(.btn)[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand)} .nav .btn{margin-left:.5rem;padding-inline:1.1rem} /* This slot used to hold the phone number. There is no number now, so it states the response time instead — the thing a visitor is actually weighing before filling in a form. Plain text: a fake link is worse than no link. */ .hdr-note{ display:none;align-items:center;gap:.45rem;margin-left:auto; font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.02em; color:var(--brand-ink);min-height:var(--tap);white-space:nowrap; } .hdr-note svg{width:14px;height:14px;flex:none} .burger{ margin-left:auto;width:var(--tap);height:var(--tap); display:grid;place-content:center;gap:5px; background:none;border:1px solid var(--rule-2);border-radius:var(--r);cursor:pointer; } .burger span{display:block;width:19px;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease} .burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded=true] span:nth-child(2){opacity:0} .burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .drawer{ display:none;border-top:1px solid var(--rule);background:var(--paper); padding:.75rem var(--pad) 1.5rem; } .drawer.open{display:block} .drawer a:not(.btn){ display:flex;align-items:center;min-height:52px; text-decoration:none;font-weight:700;font-size:1.05rem; border-bottom:1px solid var(--rule); } .drawer a:not(.btn):last-of-type{border-bottom:0} .drawer .btn{width:100%;margin-top:1rem} .drawer-tel{ display:flex;align-items:center;gap:.5rem;margin-top:.75rem; font-family:var(--mono);font-size:.9rem;font-weight:600; text-decoration:none;min-height:var(--tap);color:var(--brand-ink); } @media (min-width:62rem){ .burger,.drawer{display:none!important} .nav{display:flex} .hdr-note{display:inline-flex;margin-left:1rem;order:3} .nav{margin-left:auto;order:2} } /* ---- Hero ---------------------------------------------------------------- */ .hero{position:relative;padding-block:clamp(3rem,10vw,6rem) clamp(3rem,8vw,5rem);overflow:hidden} .hero-in{position:relative;z-index:2} .hero h1{margin-block:1.1rem .9rem} .hero .lede{max-width:38ch} .hero .btn-row{margin-top:1.9rem} .hero-note{ margin-top:1.1rem;font-size:.9rem;color:var(--muted);max-width:44ch; } /* Contour lines — decorative topography behind the hero, hidden from AT. Absolutely positioned, so it is explicitly re-checked at 375px: it is clipped by .hero{overflow:hidden} and faded out under the text. */ .contour{ position:absolute;z-index:1;pointer-events:none; top:50%;left:50%;width:min(1100px,175%);translate:-50% -50%; color:var(--contour);opacity:.9; } @media (min-width:62rem){ .contour{left:auto;right:-6%;width:720px;translate:0 -50%} } /* The pin marker, lifted from the logo geometry. */ .pin{flex:none;display:inline-block;vertical-align:-.12em;width:1em;height:1em;color:var(--brand-ink)} /* ---- Cards / grid -------------------------------------------------------- */ .grid{display:grid;gap:1rem} @media (min-width:40rem){ .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)} } @media (min-width:56rem){.grid-3{grid-template-columns:repeat(3,1fr)}} .card{ position:relative;background:var(--paper-2); border:1px solid var(--rule);border-radius:var(--r); padding:clamp(1.25rem,3.4vw,1.75rem); transition:border-color .18s ease,transform .18s ease; } .card h3{margin-bottom:.5rem} .card p{color:var(--muted);font-size:.98rem} a.card{text-decoration:none;display:block} a.card:hover{border-color:var(--rule-2);transform:translateY(-2px)} a.card:hover h3{color:var(--brand-ink)} /* Registration marks — the little corner crosshairs on a printed map sheet. Pure CSS, no extra elements. */ .reg::before,.reg::after{ content:'';position:absolute;width:9px;height:9px;pointer-events:none; border-color:var(--rule-2);border-style:solid; } .reg::before{top:-1px;left:-1px;border-width:1px 0 0 1px} .reg::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0} a.card:hover.reg::before,a.card:hover.reg::after{border-color:var(--brand)} .card-tick{ font-family:var(--mono);font-size:.625rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);margin-bottom:.9rem; } .card-go{ display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem; font-weight:700;font-size:.9rem;color:var(--brand-ink); } /* ---- The stack (services as strata) -------------------------------------- */ .stack{border-top:1px solid var(--rule)} .stratum{ display:grid;gap:.35rem 1.5rem; padding-block:clamp(1.35rem,3.6vw,1.9rem); border-bottom:1px solid var(--rule); text-decoration:none;position:relative; transition:background .18s ease,padding-inline .18s ease; } .stratum:hover{background:var(--paper-2)} .stratum-n{ font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--brand-ink); align-self:start;padding-top:.35rem; } .stratum h3{transition:color .18s ease} .stratum:hover h3{color:var(--brand-ink)} .stratum p{color:var(--muted);font-size:.98rem;max-width:60ch} @media (min-width:52rem){ .stratum{grid-template-columns:5.5rem minmax(0,15rem) minmax(0,1fr);align-items:baseline} .stratum:hover{padding-inline:.9rem} } /* ---- Prose --------------------------------------------------------------- */ .prose>*+*{margin-top:1.15rem} .prose h2{margin-top:2.6rem} .prose h3{margin-top:2rem} .prose ul,.prose ol{padding-left:0;list-style:none} .prose li{position:relative;padding-left:1.6rem;margin-top:.6rem;color:var(--ink-2)} .prose li::before{ content:'';position:absolute;left:.15rem;top:.62em; width:7px;height:7px;background:var(--brand);border-radius:50%; } .prose ol{counter-reset:n} .prose ol li{counter-increment:n} .prose ol li::before{ content:counter(n,decimal-leading-zero); font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--brand-ink); background:none;width:auto;height:auto;border-radius:0;top:.28em;left:0; } .prose a:not(.btn){color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--brand)} .prose a:not(.btn):hover{color:var(--brand-ink)} /* ---- Deliverables checklist ---------------------------------------------- */ .checks{list-style:none;padding:0;display:grid;gap:.85rem} .checks li{display:grid;grid-template-columns:1.35rem 1fr;gap:.75rem;align-items:start;color:var(--ink-2)} .checks svg{width:1.1rem;height:1.1rem;color:var(--brand-ink);margin-top:.28em;flex:none} /* ---- FAQ ----------------------------------------------------------------- */ .faq{border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{ display:flex;align-items:flex-start;justify-content:space-between;gap:1rem; padding-block:1.15rem;min-height:var(--tap); font-weight:800;font-size:1.05rem;line-height:1.3; cursor:pointer;list-style:none; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:'';flex:none;width:12px;height:12px;margin-top:.42em; border-right:2px solid var(--brand);border-bottom:2px solid var(--brand); transform:rotate(45deg);transition:transform .2s ease; } .faq details[open] summary::after{transform:rotate(-135deg)} .faq details[open] summary{color:var(--brand-ink)} .faq-a{padding-bottom:1.3rem;color:var(--muted);max-width:68ch} /* ---- City plates --------------------------------------------------------- */ .plate{ position:relative;display:block;text-decoration:none; border:1px solid var(--rule);border-radius:var(--r); background:var(--paper-2);padding:1.4rem 1.4rem 1.5rem; transition:border-color .18s ease,transform .18s ease; } .plate:hover{border-color:var(--brand);transform:translateY(-2px)} .plate-coord{ font-family:var(--mono);font-size:.625rem;letter-spacing:.12em; color:var(--muted);text-transform:uppercase; } .plate h3{margin:.55rem 0 .1rem;display:flex;align-items:center;gap:.5rem} .plate .county{font-family:var(--mono);font-size:.68rem;color:var(--brand-ink);letter-spacing:.1em;text-transform:uppercase} .plate p{margin-top:.7rem;color:var(--muted);font-size:.95rem} /* ---- Callout / CTA band -------------------------------------------------- */ .band{ background:var(--ink);color:var(--paper);position:relative;overflow:hidden; /* Overrides for descendants only. --ink is deliberately NOT among them: this rule's own background reads it, and redefining it here would resolve the background to the new value and invert the whole section by accident. */ --muted:#A69E97; --ink-2:#CFC8C1; --rule:#332F2D; --rule-2:#4A4340; --paper-2:#232120; /* --brand-ink is derived for AA on paper, which leaves it at 2.79:1 on this ink. Redefining it for descendants means every `.band .x{color:var( --brand-ink)}` rule below becomes readable without restating any of them. Safe to override here for the same reason --ink is not: this rule's own background does not read it. */ --brand-ink:var(--brand-lift); } .band .tick{color:var(--brand-ink)} /* The band lifts --brand-ink so text on the dark surface reads. That is right for words and wrong for a button that uses it as a field under white text — the lifted red carries white at only 3.78:1. The primary button here uses the true brand red, which carries white at 6.30:1. */ .band .btn-primary{background:var(--brand);border-color:var(--brand);color:#fff} .band .btn-primary:hover{background:var(--brand);border-color:var(--paper)} .band .btn-ghost{color:var(--paper);border-color:rgba(255,255,255,.42)} .band .btn-ghost:hover{border-color:var(--paper);background:rgba(255,255,255,.08)} .band h1,.band h2,.band h3,.band h4{color:var(--paper)} /* Only the band's own copy gets the narrow measure — card paragraphs and the trailing trade list must not inherit a 52ch cap or the centred colour. */ .band>.wrap>p{color:var(--muted);max-width:52ch} .band .lede{color:var(--ink-2);max-width:60ch} .band .card{background:var(--paper-2);border-color:var(--rule)} .band a.card:hover{border-color:var(--brand-ink);transform:translateY(-2px)} .band a.card:hover h3{color:var(--brand-ink)} .band .card p{color:var(--muted)} .band .card-tick{color:#8A817A} .band .checks li{color:var(--ink-2)} .band .ftr-area{color:#8A817A;max-width:none} .band .stratum{border-color:var(--rule)} .band .stratum:hover{background:var(--paper-2)} .band .stack{border-color:var(--rule)} .band .btn-ghost{color:var(--paper);border-color:var(--rule-2)} .band .btn-ghost:hover{border-color:var(--paper);background:transparent} /* ---- Forms --------------------------------------------------------------- */ .form{display:grid;gap:1rem} @media (min-width:40rem){.form .half{grid-column:span 1}.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}} .field{display:grid;gap:.4rem} .field label{font-weight:700;font-size:.9rem} .field .opt{font-weight:400;color:var(--muted)} .field input,.field select,.field textarea{ width:100%;min-height:var(--tap);padding:.7rem .85rem; background:var(--paper-2);color:var(--ink); border:1.5px solid var(--rule-2);border-radius:var(--r); font-size:1rem; /* ≥16px stops iOS zooming the viewport on focus */ } .field textarea{min-height:7rem;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline-offset:1px} .form-note{font-size:.85rem;color:var(--muted)} .form-status{padding:.9rem 1rem;border-radius:var(--r);font-weight:600;font-size:.95rem;display:none} .form-status.err{display:block;background:var(--brand-tint);color:var(--brand-ink);border:1px solid var(--brand)} .form-status.ok{display:block;background:var(--sunk);color:var(--ink);border:1px solid var(--rule-2)} /* ---- Footer -------------------------------------------------------------- */ .ftr{background:var(--sunk);border-top:1px solid var(--rule);padding-block:clamp(2.5rem,6vw,4rem) 1.5rem} .ftr-top{display:grid;gap:2.25rem} @media (min-width:52rem){.ftr-top{grid-template-columns:repeat(2,1fr)}} @media (min-width:68rem){.ftr-top{grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr}} .ftr img{width:150px} @media (prefers-color-scheme:dark){.ftr img{filter:invert(1) hue-rotate(180deg) saturate(1.2)}} .ftr .ftr-h{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:1rem} .ftr ul{list-style:none;padding:0;display:grid;gap:.1rem} .ftr ul a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;color:var(--ink-2);font-size:.95rem} .ftr ul a:hover{color:var(--brand-ink)} .ftr-blurb{color:var(--muted);font-size:.95rem;margin-top:1rem;max-width:38ch} .ftr-nap{margin-top:1.25rem;display:grid;gap:.3rem;font-size:.95rem} .ftr-nap a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;font-weight:600} .ftr-nap a:hover{color:var(--brand-ink)} .ftr-area{color:var(--muted);font-size:.9rem;line-height:1.75} .ftr-btm{ margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule); display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between; font-size:.85rem;color:var(--muted); } .ftr-btm a{color:var(--muted)} .ftr-btm a:hover{color:var(--brand-ink)} /* ---- Sticky mobile call bar ---------------------------------------------- */ /* One action, not two. There is no number to call, and a sticky bar offering a single obvious next step converts better than one offering a choice. */ .callbar{ position:fixed;left:0;right:0;bottom:0;z-index:70; display:block;background:var(--paper-2); border-top:1px solid var(--rule-2); padding:.5rem var(--pad) calc(.5rem + env(safe-area-inset-bottom)); } .callbar .c-note{ display:flex;align-items:center;justify-content:center;gap:.4rem; font-family:var(--mono);font-size:.75rem;font-weight:600; color:var(--brand-ink);padding:.1rem 0 .4rem; } .callbar .c-note svg{width:13px;height:13px;flex:none} .callbar a{ display:flex;align-items:center;justify-content:center;gap:.5rem; min-height:var(--tap);text-decoration:none;font-weight:700;font-size:1rem; border-radius:var(--r); } .callbar .c-cta{background:var(--brand-ink);color:#fff} body{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))} @media (min-width:62rem){ .callbar{display:none} body{padding-bottom:0} } /* ---- Utilities ----------------------------------------------------------- */ .stack-sm>*+*{margin-top:.6rem} .stack-md>*+*{margin-top:1.15rem} .stack-lg>*+*{margin-top:2.25rem} .mt-sm{margin-top:1rem}.mt-md{margin-top:2rem}.mt-lg{margin-top:3rem} .center{text-align:center} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .sec-head{max-width:52rem} .sec-head h2{margin-block:.9rem .8rem} .crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center} .crumbs a{text-decoration:none} .crumbs a:hover{color:var(--brand-ink)} .crumbs span[aria-current]{color:var(--ink)} /* ---- Tap-target corrections ---------------------------------------------- Inline links inside a sentence are exempt from the target-size rule, but anything that reads as a standalone control is not. These three did not clear the minimum on audit. */ /* Breadcrumbs are navigation, not prose — give them a real hit area. */ .crumbs a{display:inline-flex;align-items:center;min-height:26px;padding-inline:.15rem} /* The phone and email on the contact cards are the primary actions there. */ .card h3 a[href^="tel:"], .card h3 a[href^="mailto:"]{ display:inline-flex;align-items:center;min-height:var(--tap); } /* Footer credit. */ .ftr-btm a{display:inline-flex;align-items:center;min-height:26px} /* Placement/rate table — plain data, so it stays a table rather than being forced into cards that would read as marketing. */ table.rate{width:100%;border-collapse:collapse;font-size:.95rem;max-width:34rem} table.rate th{text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em; text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 1rem .5rem 0; border-bottom:1px solid var(--rule-2);white-space:nowrap} table.rate td{padding:.6rem 1rem .6rem 0;border-bottom:1px solid var(--rule);color:var(--ink-2)} table.rate td:first-child{font-weight:700;color:var(--ink)} /* The "separate subscription" callout. Everything else on the lead-generation page is included in the monthly fee; this one is not, and a reader skimming must not carry the wrong assumption into a sales call. */ .sep-note{ border-left:3px solid var(--brand); background:var(--brand-tint); padding:.85rem 1rem; font-size:.95rem; color:var(--ink-2); max-width:60ch; } .band .sep-note{background:#2A1918;color:#CFC8C1} /* "What you will not be sent". The previous treatment stacked three negation signals — a NOT THIS label, a strikethrough heading and 72% opacity on the whole card — which between them made the copy genuinely hard to read on the dark band. One clear signal does the job: a red cross, full-contrast text. */ ul.nope{list-style:none;padding:0;display:grid;gap:1.15rem 2.25rem} @media (min-width:44rem){ul.nope{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:72rem){ul.nope{grid-template-columns:repeat(3,minmax(0,1fr))}} ul.nope li{ display:grid;grid-template-columns:1.6rem 1fr;gap:.5rem .8rem;align-items:start; padding-left:0;margin:0; } ul.nope li::before{content:none} /* cancel the .prose bullet */ .nope-x{width:1.35rem;height:1.35rem;color:var(--brand-ink);margin-top:.1rem;flex:none} ul.nope h4{font-size:1rem;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:0 0 .3rem} ul.nope p{font-size:.93rem;line-height:1.55;color:var(--muted);margin:0} /* On the dark band the muted token is already lightened, but the description needs a touch more lift to stay comfortably readable at this size. */ .band ul.nope p{color:#B4ABA4} .band ul.nope h4{color:var(--paper)} /* The magazine is a separately-subscribed channel, not part of the package the rest of the lead-generation page describes. It sits after that material and is fenced off from it, so the separation is structural and visible rather than something the reader has to take from the copy alone. */ .aside-channel{ border-top:2px solid var(--rule-2); padding-block-start:clamp(3.5rem,8vw,5.5rem); } .aside-channel::before{ content:'';display:block;width:2.5rem;height:2px;background:var(--brand); margin-bottom:clamp(1.5rem,4vw,2.25rem); } /* ---- Network category grid ------------------------------------------------ Every lead-generation site we run, linked. Dense on purpose: the value here is that you can see the whole network at once and click into any of it. */ .netgrid{ display:grid;gap:1px;background:var(--rule-2); border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden; grid-template-columns:1fr; } @media (min-width:34rem){.netgrid{grid-template-columns:repeat(2,1fr)}} @media (min-width:52rem){.netgrid{grid-template-columns:repeat(3,1fr)}} @media (min-width:72rem){.netgrid{grid-template-columns:repeat(4,1fr)}} .netcard{ display:flex;flex-direction:column;gap:.15rem; background:var(--paper-2);padding:.85rem 1rem;text-decoration:none; min-height:var(--tap);justify-content:center; transition:background .12s ease; } .netcard:hover{background:var(--brand-tint)} .netcard-name{font-weight:800;font-size:.94rem;color:var(--ink);line-height:1.25} .netcard-dom{ font-family:var(--mono);font-size:.7rem;letter-spacing:.01em; color:var(--brand-ink);word-break:break-all; } /* The one-line version of the whole offer, sat directly under the hero lede. It exists because "all in one, done for you" is the thing people are actually shopping for, and it was buried three sections down. */ .hero-claim{ margin-top:.9rem;font-weight:800;font-size:clamp(1rem,2.2vw,1.16rem); color:var(--brand-ink);max-width:46ch;line-height:1.4; } /* ---- Hero with the form alongside ---------------------------------------- The form sits next to the headline rather than under it, so the offer and the way to take it are on screen together. Below the split it stacks with the copy first — the headline has to earn the form, not compete with it. */ .hero-split{display:grid;gap:clamp(2rem,4vw,3.25rem);align-items:start} @media (min-width:64rem){ .hero-split{grid-template-columns:minmax(0,1.05fr) minmax(23rem,.95fr)} .hero-copy h1{font-size:clamp(2rem,4.4vw,3.35rem)} } .hero-form{ background:var(--paper-2); border:1px solid var(--rule-2); border-radius:var(--r); padding:clamp(1.25rem,3vw,1.75rem); box-shadow:0 1px 2px rgba(26,25,25,.05),0 12px 32px -12px rgba(26,25,25,.18); } .hero-form-h{ font-family:var(--font);font-weight:800;font-size:1.16rem; line-height:1.25;color:var(--ink);margin:0; } .hero-form-sub{margin:.4rem 0 1.1rem;font-size:.88rem;line-height:1.5;color:var(--muted)} /* Two columns from the point the card is wide enough to hold them, which is not the same breakpoint as the page — the card is narrower than the page. */ .hf-grid{display:grid;gap:.75rem} @media (min-width:26rem){.hf-grid{grid-template-columns:1fr 1fr}} .hero-form .field{display:flex;flex-direction:column;gap:.3rem;min-width:0} .hero-form label{font-size:.76rem;font-weight:600;color:var(--ink-2);letter-spacing:.01em} .hero-form input,.hero-form select{ width:100%;min-width:0;min-height:var(--tap); padding:.55rem .65rem;font:inherit;font-size:.92rem; color:var(--ink);background:var(--paper-2); border:1px solid var(--rule-2);border-radius:var(--r); } .hero-form input:focus,.hero-form select:focus{border-color:var(--brand);outline-offset:1px} .hero-form .btn{width:100%;margin-top:1rem} .hero-form .form-status{margin:.75rem 0 0} .hero-form .form-status:empty{display:none} .hero-form-note{margin:.7rem 0 0;font-size:.74rem;line-height:1.45;color:var(--muted)} /* The hero note under the copy is redundant once the form carries its own. */ @media (min-width:64rem){.hero-copy .hero-note{display:none}} /* On a phone the form is what the hero is for, and every element above it is scroll between the visitor and the thing they came to do. The two secondary links duplicate the nav and the sticky bar, so below the split they step aside and the form follows the copy directly. */ @media (max-width:63.99rem){ .hero-copy .btn-row{display:none} .hero-aside{margin-top:.25rem} .hero-copy .hero-note{margin-bottom:0} } /* ---- The network hub ------------------------------------------------------ A section per category rather than a wall of links. Forty bare links is a link farm and reads like one; naming what each site covers makes the page worth landing on, which is what makes the links pointing at it worth having. */ .netlist{display:grid;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden} @media (min-width:44rem){.netlist{grid-template-columns:1fr 1fr}} @media (min-width:76rem){.netlist{grid-template-columns:repeat(3,1fr)}} .netitem{background:var(--paper-2);padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.35rem} .netitem h3{font-size:1.02rem;line-height:1.25;margin:0} .netitem h3 a{color:var(--ink);text-decoration:none} .netitem h3 a:hover{color:var(--brand-ink)} .netitem-dom{margin:0} .netitem-dom a{font-family:var(--mono);font-size:.72rem;color:var(--brand-ink);text-decoration:none;word-break:break-all} .netitem-lede{margin:.15rem 0 0;font-size:.86rem;line-height:1.5;color:var(--ink-2)} .netitem-svc{margin:.35rem 0 0;font-size:.75rem;line-height:1.5;color:var(--muted)} .netitem-svc span{font-weight:700;color:var(--ink-2)} /* ---- Network grid (homepage) --------------------------------------------- */ /* Forty links have to stay scannable, so each is a two-line plate — trade name above, domain below — rather than a card with a paragraph in it. The full descriptions live on /leads/, which this section points at. */ .netgrid{ display:grid;gap:1px;background:var(--rule); border:1px solid var(--rule); grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); } .netcard{ background:var(--paper);padding:.85rem 1rem;text-decoration:none; display:flex;flex-direction:column;gap:.15rem;min-width:0; transition:background .15s ease; } .netcard:hover{background:var(--paper-2)} .netcard-name{ font-weight:700;color:var(--ink);font-size:.95rem;line-height:1.25; } .netcard:hover .netcard-name{color:var(--brand-ink)} .netcard-dom{ font-family:var(--mono);font-size:.7rem;letter-spacing:.01em; color:var(--brand-ink);word-break:break-all; } /* ---- Network site feature (trade category pages) -------------------------- */ .netfeature{display:grid;gap:1.25rem;align-items:start} .netfeature-main{ background:var(--paper);border:1px solid var(--rule); padding:clamp(1.1rem,3vw,1.6rem); } .netfeature-main h3{margin:0 0 .2rem;font-size:clamp(1.2rem,2.6vw,1.45rem);line-height:1.2} .netfeature-main h3 a{color:var(--ink);text-decoration:none} .netfeature-main h3 a:hover{color:var(--brand-ink)} .netfeature-dom{margin:0 0 .7rem} .netfeature-dom a{ font-family:var(--mono);font-size:.74rem;letter-spacing:.02em; color:var(--brand-ink);text-decoration:none;word-break:break-all; } .netfeature-lede{margin:0 0 .6rem;color:var(--ink);font-size:1rem;line-height:1.55} .netfeature-svc{margin:0;font-size:.85rem;line-height:1.5;color:var(--muted)} .netfeature-svc span{ font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:var(--brand-ink); } .netfeature-side{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)} .netfeature-sidehead{ margin:0;background:var(--paper);padding:.7rem .9rem; font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:var(--brand-ink); } .netfeature-rel{ background:var(--paper);padding:.75rem .9rem;text-decoration:none; display:flex;flex-direction:column;gap:.12rem;transition:background .15s ease; } .netfeature-rel:hover{background:var(--paper-2)} .netfeature-relname{font-weight:700;color:var(--ink);font-size:.92rem;line-height:1.25} .netfeature-rel:hover .netfeature-relname{color:var(--brand-ink)} .netfeature-reldom{font-family:var(--mono);font-size:.66rem;color:var(--brand-ink);word-break:break-all} .netfeature-reltag{font-size:.82rem;color:var(--muted);line-height:1.4;margin-top:.15rem} @media (min-width:900px){ .netfeature{grid-template-columns:minmax(0,1.55fr) minmax(240px,.95fr);gap:1.5rem} } /* ---- Free scanner --------------------------------------------------------- */ .scanner{background:var(--paper-2);border-block:1px solid var(--rule)} .scan-form{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem;max-width:38rem} .scan-form input{ flex:1 1 16rem;min-width:0;min-height:var(--tap);padding:.7rem .9rem; background:var(--paper);color:var(--ink);border:1.5px solid var(--rule-2); border-radius:var(--r);font-size:1rem;font-family:var(--mono); } .scan-form input:focus{border-color:var(--brand);outline-offset:1px} .scan-form .btn{flex:0 0 auto} .scan-note{margin-top:.6rem;font-size:.85rem;color:var(--muted)} /* Progress. A thirty-second wait with a spinner reads as broken, so the bar advances against the stages the scan actually goes through. */ .scan-progress{margin-top:1.5rem;max-width:38rem} .scan-bar{height:4px;background:var(--rule);border-radius:2px;overflow:hidden} .scan-bar span{display:block;height:100%;width:0;background:var(--brand);transition:width .6s ease} .scan-stage{margin-top:.6rem;font-family:var(--mono);font-size:.8rem;color:var(--brand-ink)} .scan-error{ margin-top:1.25rem;max-width:38rem;padding:.85rem 1rem;border-radius:var(--r); background:#FEF2F2;color:#991B1B;border:1px solid #FCA5A5;font-weight:600;font-size:.94rem; } .scan-result{margin-top:2rem} .scan-head{ display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1.75rem; padding-bottom:1.1rem;border-bottom:1px solid var(--rule); } .scan-score{display:flex;align-items:baseline;gap:.35rem} .scan-score-n{font-size:clamp(2.4rem,7vw,3.4rem);font-weight:800;line-height:1;color:var(--ink)} .scan-score-of{font-size:1rem;color:var(--muted)} .scan-score-label{ margin-left:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em; text-transform:uppercase;color:var(--brand-ink); } .scan-tallies{display:flex;flex-wrap:wrap;gap:.9rem;font-size:.88rem;color:var(--muted)} .scan-tally b{color:var(--ink);font-weight:800} .scan-tally.pass b{color:#166534} .scan-tally.warn b{color:#92400E} .scan-tally.fail b{color:#991B1B} .scan-url{ flex:1 0 100%;margin:0;font-family:var(--mono);font-size:.74rem; color:var(--brand-ink);word-break:break-all; } .scan-group{margin-top:1.75rem} .scan-group > h3{ font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--brand-ink);margin:0 0 .7rem; } .scan-checks{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)} .scan-check{background:var(--paper);padding:.85rem 1rem;display:grid;gap:.25rem} .scan-check-top{display:flex;align-items:baseline;gap:.6rem} .scan-badge{ flex:none;width:1.15rem;height:1.15rem;border-radius:var(--r); display:grid;place-content:center;font-size:.72rem;font-weight:800;line-height:1; } .scan-badge.pass{background:#DCFCE7;color:#166534} .scan-badge.warn{background:#FEF3C7;color:#92400E} .scan-badge.fail{background:#FEE2E2;color:#991B1B} .scan-badge.info{background:var(--sunk);color:var(--muted)} .scan-check-label{font-weight:700;font-size:.95rem;color:var(--ink)} .scan-finding{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-2);padding-left:1.75rem} .scan-fix{ margin:.3rem 0 0;padding-left:1.75rem;font-size:.86rem;line-height:1.5;color:var(--muted); } .scan-fix b{color:var(--brand-ink);font-weight:700} .scan-cta{ margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--rule); display:flex;flex-wrap:wrap;align-items:center;gap:1rem; } .scan-cta p{margin:0;font-weight:700;color:var(--ink)} /* ---- Section head: lede vs supporting copy ------------------------------- Two problems, both visible in the lead-gen band. The paragraphs had no margin between them at all — measured 0px — so on a narrow screen the lede and the paragraph under it read as one block of text. And `.band>.wrap>p` is a direct-child selector, so a paragraph nested inside .sec-head never matched it and inherited the band's bright body colour instead, leaving the supporting line brighter than the lede it supports. A paragraph after the lede is supporting copy: smaller, dimmer, and clearly separated. */ .sec-head > p + p{margin-top:1rem} .sec-head > .lede + p{ font-size:1rem;line-height:1.65;color:var(--muted);max-width:62ch; } .band .sec-head > .lede + p, .hero .sec-head > .lede + p{color:var(--muted)} @media (max-width:40rem){ .sec-head > p + p{margin-top:1.15rem} }