/* ========================================================================== Maricopa Dumpster Rental Guys — styles.css Theme: "Sonoran" — ESPRESSO #3A2A22 + brand RED #C0181D + desert GREEN #3E7D33, with warm SAND #F2E3C2 on dark fields, over warm linen paper #FAF4ED Type: Epilogue (display) + Figtree (text) Motif: DIAMOND BAND divider + 24px corners + CENTRED section headings NOTE: `--red` is red and `--teal` holds a GREEN — but read the values anyway, because several builds in this chain inverted them. NOTE: *** THE LOGO'S BRAND GREEN IS 1.92:1 ON THIS PAPER *** — it is a dark-field colour only. Light-field marks use desert green #3E7D33. NOTE: hero/dark-section buttons carry a 2px SAND RING. That is a WCAG 1.4.11 fix, not decoration — the red fill is only 1.65:1 against the green hero, so without the ring the button has no visible boundary. NOTE: the header is DARK, so nav colours are SCOPED to the desktop breakpoint with an explicit mobile override. Writing them at top level makes the mobile drawer illegible — that shipped three times. NOTE: this banner is a COMMENT, so no colour or place sweep will ever update it. Rewrite it by hand on every clone. ========================================================================== */ :root{ /* brand — repoint these three to recolour the whole site */ --ink:#3A2A22; /* dark anchor (slate) */ --red:#C0181D; /* brand primary / CTA */ --teal:#3E7D33; /* accent (cypress) */ --ink-2:#27591F; --ink-3:#3E7D33; --red-dk:#9A1216; --red-lt:#FBE8E8; --teal-dk:#2C5C24; --teal-lt:#E9F2E4; --steel:#8F8F8F; --tx:#2A211C; --tx-2:#6A5A50; --tx-3:#9C8E84; --line:#E4DACE; --line-2:#EFE7DC; --bg:#FAF4ED; /* pale sage paper — MUST match the divider tile fill */ --bg-2:#F3EADF; --bg-3:#E5D8C8; --paper:#FFFFFF; --ff-d:'Epilogue',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --ff-t:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --r:24px; /* card radius — hard-edged industrial */ --r-s:14px; /* button radius */ --wrap:1180px; --sh:0 1px 2px rgba(58,42,34,.05),0 10px 26px -16px rgba(58,42,34,.20); --sh-lg:0 2px 5px rgba(58,42,34,.07),0 26px 50px -22px rgba(58,42,34,.30); --hdr-h:66px; } /* ------------------------------------------------------------------ base */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } body{margin:0;font-family:var(--ff-t);font-size:17px;line-height:1.68;color:var(--tx); background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip} img,svg,iframe,video{max-width:100%} img{height:auto;display:block} h1,h2,h3,h4{font-family:var(--ff-d);color:var(--ink);margin:0 0 .5em; letter-spacing:-.028em;line-height:1.12;font-weight:700;overflow-wrap:break-word} h1{font-size:clamp(2rem,1.3rem + 2.75vw,3.35rem);font-weight:800;letter-spacing:-.038em} h2{font-size:clamp(1.58rem,1.16rem + 1.6vw,2.3rem);font-weight:750;letter-spacing:-.032em} h3{font-size:clamp(1.12rem,1.02rem + .4vw,1.3rem);font-weight:700} h4{font-size:1.02rem;font-weight:700} p{margin:0 0 1.15em} a{color:var(--red);text-decoration-color:rgba(62,125,51,.30);text-underline-offset:3px} a:hover{color:var(--red-dk)} ul,ol{padding-left:1.15em} li{margin:.34em 0} strong,b{font-weight:700;color:var(--ink)} :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:2px} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--red);color:#fff; padding:.7rem 1.1rem;font-weight:700} .skip:focus{left:0} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px} .wrap-narrow{max-width:820px} .ic{width:20px;height:20px;flex:none} .arw{display:inline-block;transition:transform .18s ease;margin-left:.35em} a:hover .arw,.btn:hover .arw{transform:translateX(4px)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* --------------------------------------------------------------- eyebrow */ /* signature: leading diamond rather than a rule */ .eyebrow{font-family:var(--ff-d);font-size:.72rem;font-weight:800;letter-spacing:.19em; text-transform:uppercase;color:var(--tx-3);margin:0 0 .8rem;display:flex; align-items:center;gap:.55rem} .eyebrow::before{content:"";width:8px;height:8px;background:currentColor;flex:none; transform:rotate(45deg)} .eyebrow-amber{color:var(--teal-dk)} .hero .eyebrow-amber,.sec-dark .eyebrow-amber{color:#C0181D} .lede{font-size:1.08rem;color:var(--tx-2);max-width:66ch} /* --------------------------------------------------------------- buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem; font-family:var(--ff-d);font-weight:750;font-size:.85rem;letter-spacing:.06em; text-transform:uppercase;padding:.86rem 1.4rem;border-radius:var(--r-s); border:2px solid transparent;text-decoration:none;cursor:pointer; transition:background .18s,color .18s,border-color .18s,transform .12s,box-shadow .18s; line-height:1.2;text-align:center} .btn:active{transform:translateY(1px)} .btn-ic{width:18px;height:18px} .btn-lg{padding:1.02rem 1.7rem;font-size:.92rem} .btn-sm{padding:.64rem 1rem;font-size:.775rem} .btn-red{background:var(--red);color:#fff;box-shadow:0 6px 16px -8px rgba(62,125,51,.85)} .btn-red:hover{background:var(--red-dk);color:#fff} .btn-amber{background:var(--teal);color:#fff;box-shadow:0 6px 16px -8px rgba(242,227,194,.85)} .btn-amber:hover{background:var(--teal-dk);color:#fff} .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)} .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff} .btn-line{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-line:hover{background:var(--ink);color:#fff} .btn-dark{background:var(--ink);color:#fff} .btn-dark:hover{background:var(--ink-2);color:#fff} /* ---------------------------------------------------------------- header */ /* dark header with a red underscore rule */ .hdr{position:sticky;top:0;z-index:60;background:var(--bg); border-bottom:1px solid var(--line)} .hdr-top{background:#0F1920;color:#93A4AD;font-size:.78rem; border-bottom:1px solid rgba(255,255,255,.07)} .hdr-top-in{display:flex;gap:1.7rem;align-items:center;justify-content:center; min-height:34px;flex-wrap:wrap} .ht-item{display:inline-flex;align-items:center;gap:.42rem;font-weight:500} .ht-ic{width:15px;height:15px;color:#C0181D} .hdr-in{display:flex;align-items:center;gap:1rem;min-height:var(--hdr-h)} .brand{display:flex;align-items:center;text-decoration:none;flex:none;min-width:0} /* Stacked lockup (1.356:1) with a two-line wordmark - needs more height than the square badges of the previous builds, or the subline is illegible. Revert to ~44px if a future clone uses a round badge. */ .brand img{height:58px;width:auto;object-fit:contain} .brand-tx{display:none} /* the lockup already contains the name */ .nav{margin-left:auto;display:flex;align-items:center;gap:1rem;min-width:0} .nav-l{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0} .nav-l>li{margin:0;position:relative} .nav-l>li>a{display:block;padding:.55rem .66rem;font-family:var(--ff-d);font-weight:650; font-size:.855rem;color:#D4DCE1;text-decoration:none} .nav-l>li>a:hover{color:#fff} .nav-l>li>a[aria-current="page"]{color:#fff} .nav-l>li>a[aria-current="page"]::after{content:"";display:block;height:3px; background:var(--red);margin-top:4px} .has-sub>.sub-t::after{content:"";display:inline-block;width:6px;height:6px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px);margin-left:.45rem;opacity:.65} .sub-b{display:none} .sub{position:absolute;top:calc(100% + 8px);left:0;min-width:270px;background:var(--paper); border:1px solid var(--line);border-top:3px solid var(--red);box-shadow:var(--sh-lg); list-style:none;margin:0;padding:.45rem;opacity:0;visibility:hidden; transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s;z-index:70} .sub::before{content:"";position:absolute;top:-11px;left:0;right:0;height:11px} .has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none} .sub li{margin:0} .sub a{display:block;padding:.52rem .7rem;font-size:.875rem;font-weight:550;color:var(--ink-2); text-decoration:none} .sub a:hover{background:var(--bg-2);color:var(--red)} .sub-wide{display:grid;grid-template-columns:1fr 1fr;min-width:490px;gap:0 .2rem} .sub-right{left:auto;right:0} .sub-all{grid-column:1/-1;border-top:1px solid var(--line-2);margin-top:.3rem;padding-top:.3rem} .sub-all a{color:var(--red);font-weight:750} .nav-cta{display:none} .hdr-act{display:flex;align-items:center;gap:.6rem;flex:none} .hdr-call{display:inline-flex;align-items:center;gap:.45rem;background:var(--red);color:#fff; font-family:var(--ff-d);font-weight:750;font-size:.87rem;padding:.66rem 1.05rem; border-radius:var(--r-s);text-decoration:none;white-space:nowrap;letter-spacing:.02em} .hdr-call:hover{background:var(--red-dk);color:#fff} .burger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.28); background:transparent;border-radius:var(--r-s);cursor:pointer;padding:0; flex-direction:column;gap:5px;justify-content:center;align-items:center} .burger span{display:block;width:20px;height:2px;background:#fff;transition:transform .2s,opacity .2s} .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)} .scrim{position:fixed;inset:0;background:rgba(12,20,25,.55);z-index:58;border:0} /* ------------------------------------------------------------------ hero */ .hero{position:relative;background:var(--ink);color:#DCE3E7; padding:clamp(2.6rem,1.4rem + 4vw,4.4rem) 0 clamp(3rem,2rem + 4vw,4.8rem); overflow:hidden;isolation:isolate} .hero::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(720px 400px at 78% 12%,rgba(242,227,194,.08),transparent 62%), radial-gradient(600px 420px at 2% 92%,rgba(242,227,194,.08),transparent 64%), linear-gradient(165deg,#C0181D 0%,#3A2A22 60%,#12300F 100%)} /* signature: fine diagonal hatch on dark panels */ .hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.032) 0 1px,transparent 1px 9px)} .hero-in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(1.8rem,1rem + 3vw,3.4rem);align-items:center} .hero-tx{min-width:0} .hero h1{color:#fff} .hero h1 em{font-style:normal;color:#C0181D} .hero-lede{font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);color:#B4C2C9;max-width:52ch} .hero-ul{list-style:none;padding:0;margin:1.4rem 0 1.7rem;display:grid;gap:.55rem} .hero-ul li{display:flex;gap:.6rem;align-items:flex-start;font-size:.955rem; color:#CFD9DE;font-weight:500;margin:0} .hero-ul .ic{color:#C0181D;width:19px;height:19px;margin-top:3px} .hero-act{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.1rem} .hero-fine{display:flex;align-items:center;gap:.45rem;font-size:.84rem;color:#8B9BA4;margin:0} .hero-fine .ic{width:16px;height:16px;color:#C0181D} .hero-md{position:relative;min-width:0} /* hard-edged frame with a thick red top rule — no offset outline */ .hero-frame{position:relative;border-top:6px solid var(--red);background:#3A2A22; box-shadow:0 26px 56px -26px rgba(0,0,0,.85)} .hero-frame img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block} .hero-badge{position:absolute;left:0;bottom:-26px;z-index:2;background:var(--red); color:#fff;padding:.72rem 1.05rem;max-width:250px;display:flex;align-items:baseline;gap:.55rem} .hero-badge b{font-family:var(--ff-d);font-size:1.3rem;font-weight:800;line-height:1; letter-spacing:-.03em} .hero-badge span{font-size:.74rem;font-weight:600;line-height:1.25;opacity:.95} .hero-cut{display:none} /* -------------------------------------------------------- sub-page hero */ .crumbs{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:.82rem} .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:.6rem 0} .crumbs li{margin:0;display:flex;align-items:center;gap:.4rem;color:var(--tx-3);min-width:0} .crumbs li+li::before{content:"/";color:var(--line);font-weight:600} .crumbs a{color:var(--tx-2);text-decoration:none;font-weight:600} .crumbs a:hover{color:var(--red)} .crumbs span{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis} .phero{padding:clamp(1.8rem,1.2rem + 2vw,2.9rem) 0 0;background:var(--bg)} /* signature: left vertical red rule on sub-page headings */ .phero h1{max-width:20ch;border-left:5px solid var(--red);padding-left:1.1rem} .phero-lede{font-size:clamp(1.02rem,.98rem + .25vw,1.13rem);color:var(--tx-2);max-width:68ch} .phero-act{display:flex;flex-wrap:wrap;gap:.65rem;margin:1.3rem 0 1.9rem} .phero-md{border-top:5px solid var(--red);position:relative;background:var(--ink)} .phero-md img{width:100%;max-height:340px;object-fit:cover;display:block} @media (min-width:900px){.phero-md img{max-height:380px}} /* ------------------------------------------------------------- trust bar */ /* light bone strip with thin vertical dividers and teal icons */ .tbar{background:var(--bg-2);color:var(--ink-2);border-bottom:1px solid var(--line)} .tbar-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem; padding-block:1rem} .tbar-i{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-d); font-size:.84rem;font-weight:700;position:relative;padding-right:1.1rem;min-width:0} .tbar-i .ic{width:19px;height:19px;color:var(--teal)} .tbar-i:not(:last-child)::after{content:"";position:absolute;right:0;top:50%; transform:translateY(-50%);width:1px;height:22px;background:var(--line)} /* -------------------------------------------------------------- sections */ .sec{padding:clamp(2.6rem,1.8rem + 3vw,4.4rem) 0} .sec-alt{background:var(--bg-2)} .sec-dark{background:var(--ink);color:#E2D6C7;position:relative;isolation:isolate} .sec-dark::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 9px)} .sec-dark h2,.sec-dark h3{color:#fff} .sec-dark .lede{color:#D8CBBC} .sec>.wrap>h2{max-width:24ch} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem; flex-wrap:wrap;margin-bottom:1.9rem} .sec-head>div{min-width:0;flex:1 1 420px} .sec-head h2{margin-bottom:.35em} .prose>h2{margin-top:2.1em} .prose>h2:first-child{margin-top:0} .prose>h3{margin-top:1.7em} .prose ul,.prose ol{margin:0 0 1.15em} .prose li{margin:.42em 0} /* ----------------------------------------------------------------- cards */ /* top accent rule, hard corners */ .grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr))} .grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))} .grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))} .card{position:relative;background:var(--paper);border:1px solid var(--line); border-top:3px solid var(--ink);border-radius:var(--r); padding:1.4rem 1.35rem;min-width:0;transition:box-shadow .2s,transform .2s,border-top-color .2s} .card:hover{box-shadow:var(--sh);transform:translateY(-2px);border-top-color:var(--red)} .card h3{margin:0 0 .4em} .card h3 a{color:var(--ink);text-decoration:none} .card h3 a::after{content:"";position:absolute;inset:0} .card:hover h3 a{color:var(--red)} .card p{margin:0;font-size:.94rem;color:var(--tx-2)} .card-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px; background:var(--teal-lt);color:var(--teal-dk);margin-bottom:.9rem;border-radius:var(--r)} .card-ic .ic{width:21px;height:21px} .card-n{font-family:var(--ff-d);font-size:1.05rem;font-weight:800;line-height:1; color:#fff;background:var(--red);display:inline-flex;width:34px;height:34px; align-items:center;justify-content:center;margin-bottom:.75rem;border-radius:var(--r)} .card-more{display:inline-block;margin-top:.9rem;font-family:var(--ff-d);font-size:.78rem; font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.07em} .sec-alt .card{background:var(--paper)} .sec-dark .card{background:var(--ink-2);border-color:#C0181D;border-top-color:var(--teal)} .sec-dark .card p{color:#D8CBBC} .sec-dark .card-ic{background:rgba(62,125,51,.15);color:#C0181D} /* ----------------------------------------------------------------- steps */ /* filled circular numerals joined by a connector line */ .steps{list-style:none;padding:0;margin:0;display:grid;gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))} .steps li{margin:0;min-width:0;position:relative;padding-top:3.2rem} .steps li::before{content:"";position:absolute;top:22px;left:0;right:0;height:2px; background:var(--line)} .steps li:last-child::before{right:50%} .stp-n{position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%; background:var(--red);color:#fff;font-family:var(--ff-d);font-size:1.05rem;font-weight:800; display:flex;align-items:center;justify-content:center;z-index:1; box-shadow:0 0 0 6px var(--bg)} .sec-alt .stp-n{box-shadow:0 0 0 6px var(--bg-2)} .sec-dark .stp-n{box-shadow:0 0 0 6px var(--ink)} .sec-dark .steps li::before{background:#C0181D} .steps h3{margin:0 0 .35em;font-size:1.03rem} .steps p{margin:0;font-size:.92rem;color:var(--tx-2)} .sec-dark .steps p{color:#D8CBBC} /* --------------------------------------------------------------- feature */ .split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:clamp(1.6rem,1rem + 2.4vw,3.2rem);align-items:center} .split>div{min-width:0} .split .imgwrap img,.split-md img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block} .split .imgwrap,.split-md .imgwrap{border-top:5px solid var(--red)} .split-md{position:relative} .ticks{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.6rem} .ticks li{display:flex;gap:.6rem;align-items:flex-start;margin:0;font-size:.96rem} .ticks .ic{color:var(--teal);width:19px;height:19px;margin-top:4px;flex:none} .sec-dark .ticks .ic{color:#C0181D} /* ------------------------------------------------------------- stat band */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr)); gap:1rem;margin:0;padding:0;list-style:none} .stats li{margin:0;min-width:0;padding:1.2rem 1.1rem;background:var(--paper); border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r)} .stats b{display:block;font-family:var(--ff-d);font-size:1.95rem;font-weight:800; line-height:1;color:var(--ink);letter-spacing:-.04em} .stats span{display:block;font-size:.85rem;color:var(--tx-2);margin-top:.4rem;font-weight:550} .sec-dark .stats li{background:var(--ink-2);border-color:#C0181D;border-left-color:#C0181D} .sec-dark .stats b{color:#fff} .sec-dark .stats span{color:#D8CBBC} /* ----------------------------------------------------------------- table */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line); background:var(--paper);max-width:100%;border-radius:var(--r)} .table-scroll:focus-visible{outline:3px solid var(--teal);outline-offset:2px} .tbl-compare{border-collapse:collapse;width:100%;min-width:660px;font-size:.925rem} .tbl-compare caption{text-align:left;padding:.9rem 1rem;font-family:var(--ff-d); font-weight:700;font-size:.86rem;color:var(--tx-2);border-bottom:1px solid var(--line)} .tbl-compare th,.tbl-compare td{padding:.78rem 1rem;text-align:left; border-bottom:1px solid var(--line-2);vertical-align:top} .tbl-compare thead th{background:var(--ink);color:#fff;font-family:var(--ff-d); font-weight:700;font-size:.76rem;letter-spacing:.09em;text-transform:uppercase; border-bottom:0;white-space:nowrap} .tbl-compare tbody th{font-family:var(--ff-d);font-weight:800;color:var(--ink);white-space:nowrap} .tbl-compare tbody th a{color:var(--ink);text-decoration:none} .tbl-compare tbody th a:hover{color:var(--red)} .tbl-compare tbody tr:nth-child(even){background:var(--bg-2)} .tbl-compare tbody tr:last-child th,.tbl-compare tbody tr:last-child td{border-bottom:0} .tbl-plain{border-collapse:collapse;width:100%;font-size:.93rem;margin:0 0 1.3rem; background:var(--paper)} .tbl-plain th,.tbl-plain td{padding:.64rem .8rem;border-bottom:1px solid var(--line-2); text-align:left;overflow-wrap:anywhere} .tbl-plain thead th{font-family:var(--ff-d);font-size:.76rem;text-transform:uppercase; letter-spacing:.09em;color:var(--tx-2);border-bottom:2px solid var(--ink)} .table-scroll>.tbl-plain{margin:0;border:0} .prose .table-scroll{margin:0 0 1.3rem} /* ------------------------------------------------------------------- faq */ .faqs{display:grid;gap:.55rem;margin-top:1.6rem} .faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .faq[open]{border-color:var(--ink);box-shadow:var(--sh)} .faq[open] summary{background:var(--bg-2)} .faq summary{cursor:pointer;list-style:none;padding:1rem 3rem 1rem 1.15rem;position:relative; font-family:var(--ff-d);font-weight:700;font-size:1rem;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:1.2rem;top:1.42rem;width:12px;height:2px; background:var(--red)} .faq summary::before{content:"";position:absolute;right:1.2rem;top:1.42rem;width:12px;height:2px; background:var(--red);transform:rotate(90deg);transition:transform .2s} .faq[open] summary::before{transform:rotate(0)} .faq summary:hover{color:var(--red)} .faq-a{padding:1rem 1.15rem 1.1rem;color:var(--tx-2);font-size:.955rem} .faq-a p:last-child,.faq-a ul:last-child{margin-bottom:0} .sec-faq{background:var(--bg-2)} /* --------------------------------------------------------------- reviews */ .revs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); margin-top:1.9rem} .rev{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r); padding:1.4rem;min-width:0;position:relative;border-top:3px solid var(--teal)} .stars{display:flex;gap:2px;color:var(--red);margin-bottom:.75rem} .stars .st{width:17px;height:17px;fill:currentColor;stroke:none} .rev blockquote{margin:0;padding:0} .rev p{font-size:.955rem;color:var(--tx);margin:0 0 .9rem} .rev figcaption{font-family:var(--ff-d);font-weight:800;font-size:.9rem;color:var(--ink)} .rev figcaption span{display:block;font-family:var(--ff-t);font-weight:500;font-size:.8rem; color:var(--tx-3);margin-top:2px} /* ------------------------------------------------------------ link lists */ .links{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.55rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))} .links li{margin:0;min-width:0} .links a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center; column-gap:.7rem;padding:.9rem 1rem;background:var(--paper); border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--r); text-decoration:none;transition:border-color .18s,box-shadow .18s;min-width:0} .links a:hover{border-left-color:var(--red);box-shadow:var(--sh)} .links b{grid-column:1;grid-row:1;min-width:0;font-family:var(--ff-d);font-size:.955rem; color:var(--ink);font-weight:750;overflow-wrap:anywhere} .links span{grid-column:1;grid-row:2;min-width:0;font-size:.83rem;color:var(--tx-2); margin-top:1px;overflow-wrap:anywhere} .links a>i{grid-column:2;grid-row:1/-1;justify-self:end;color:var(--red); font-style:normal;flex:none} .chips{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem} .chips li{margin:0} .chips a{display:inline-block;padding:.44rem .9rem;background:var(--paper); border:1px solid var(--line);border-radius:var(--r);font-size:.855rem;font-weight:650; color:var(--ink-2);text-decoration:none} .chips a:hover{border-color:var(--red);color:var(--red)} /* ------------------------------------------------------------- cta strip */ .cta-strip{background:var(--red);color:#FFE6E5;position:relative;overflow:hidden; padding:clamp(2.4rem,1.6rem + 2.6vw,3.6rem) 0} .cta-strip::before{content:"";position:absolute;inset:0;opacity:.55; background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.05) 0 1px,transparent 1px 9px)} .cta-in{position:relative;display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:1.8rem;align-items:center} .cta-in>div{min-width:0} .cta-in h2{color:#fff;margin-bottom:.4em} .cta-in p{margin:0;font-size:1rem;max-width:56ch;color:#FFDFDE} .cta-strip .eyebrow,.cta-strip .eyebrow-amber{color:#F7EEDA} .cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem} .cta-note{font-size:.85rem;color:#F7EEDA} .cta-strip .btn-amber{background:#fff;color:var(--red);box-shadow:none} .cta-strip .btn-amber:hover{background:var(--ink);color:#fff} @media (min-width:820px){.cta-act{align-items:flex-end}} /* ---------------------------------------------------------------- footer */ .ftr{background:var(--ink);color:#C9BBAB;font-size:.92rem;position:relative;isolation:isolate} .ftr::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 9px)} .ftr-in{display:grid;gap:2rem;padding-block:clamp(2.2rem,1.6rem + 2vw,3.2rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))} .ftr-col{min-width:0} .ftr h3{color:#fff;font-size:.78rem;letter-spacing:.17em;text-transform:uppercase; margin:0 0 1.1rem;font-weight:800;position:relative;padding-bottom:.6rem} .ftr h3::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:3px;background:var(--red)} .ftr-brand img{width:auto;max-width:100%;height:auto;margin-bottom:.9rem} .ftr-name{display:none} .ftr p{margin:0 0 1rem;font-size:.885rem;line-height:1.62} .ftr-l{list-style:none;padding:0;margin:0} .ftr-l li{margin:0 0 .55rem} .ftr-l a{color:#C9BBAB;text-decoration:none;font-size:.885rem} .ftr-l a:hover{color:#fff} .ftr-l b{color:#C0181D} .ftr-l-2{columns:2;column-gap:1rem} .nap{font-style:normal;display:grid;gap:.65rem;margin:0 0 1.1rem} .nap span{display:flex;gap:.6rem;align-items:flex-start;min-width:0} .nap .ic{color:#C0181D;width:18px;height:18px;margin-top:2px;flex:none} .nap a{color:#BCC8CE;text-decoration:none;font-size:.885rem;min-width:0;overflow-wrap:anywhere} .nap a:hover{color:#fff} .ftr-mail{overflow-wrap:anywhere;word-break:break-word} .soc{display:flex;gap:.5rem} .soc a{display:inline-flex;width:38px;height:38px;align-items:center;justify-content:center; border:1px solid #C0181D;color:#C9BBAB;border-radius:var(--r)} .soc a:hover{border-color:var(--red);color:#fff;background:var(--red)} .soc svg{width:19px;height:19px} .hrs{list-style:none;padding:0;margin:0 0 1rem;font-size:.85rem} .hrs li{display:flex;justify-content:space-between;gap:.7rem;padding:.32rem 0; border-bottom:1px dashed #123F56;margin:0;min-width:0} .hrs b{color:#D3DCE1;font-weight:600;white-space:nowrap} .hrs-note{font-size:.8rem!important;color:#9C8E84} .ftr-map{border:1px solid #C0181D} .ftr-map iframe{display:block;filter:grayscale(.4) contrast(1.05)} .ftr-bot{border-top:1px solid #123F56;font-size:.82rem} .ftr-bot-in{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between; align-items:center;padding-block:1.1rem} .ftr-bot p{margin:0;font-size:.82rem} .ftr-bot ul{list-style:none;display:flex;flex-wrap:wrap;gap:1.2rem;margin:0;padding:0} .ftr-bot li{margin:0} .ftr-bot a{color:#C9BBAB;text-decoration:none} .ftr-bot a:hover{color:#fff} /* -------------------------------------------------------- sticky callbar */ .callbar{display:none} /* ------------------------------------------------------------- utilities */ .imgwrap{overflow:hidden} .fig{margin:1.8rem 0} .fig img{width:100%;border-top:4px solid var(--red)} .fig figcaption{font-size:.83rem;color:var(--tx-3);margin-top:.55rem;font-style:italic} .note{background:var(--teal-lt);border-left:4px solid var(--teal);padding:1.05rem 1.2rem; margin:1.6rem 0;font-size:.95rem} .note p:last-child{margin-bottom:0} .note b{color:var(--ink)} .note-red{background:var(--red-lt);border-left-color:var(--red)} .callout{background:var(--ink);color:#E2D6C7;padding:1.6rem 1.7rem;margin:2rem 0; border-left:5px solid var(--red)} .callout h3{color:#fff;margin-top:0} .callout p:last-child{margin-bottom:0} .callout .btn{margin-top:.6rem} .toc{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--ink); padding:1.2rem 1.4rem;margin:0 0 2.2rem} .toc h2{font-size:.76rem!important;letter-spacing:.16em;text-transform:uppercase; color:var(--tx-2);margin:0 0 .8rem!important} .toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:1.6rem} .toc li{font-size:.9rem;break-inside:avoid} @media (max-width:620px){.toc ol{columns:1}} .meta-row{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;font-size:.85rem; color:var(--tx-3);margin:0 0 1.4rem} .meta-row span{display:inline-flex;align-items:center;gap:.4rem} .meta-row .ic{width:16px;height:16px;color:var(--red)} .pill{display:inline-block;background:var(--ink);color:#fff;font-family:var(--ff-d); font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; padding:.3rem .7rem;border-radius:var(--r)} .post-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))} .post{background:var(--paper);border:1px solid var(--line);overflow:hidden; display:flex;flex-direction:column;min-width:0;position:relative; transition:box-shadow .2s,transform .2s;border-radius:var(--r)} .post:hover{box-shadow:var(--sh);transform:translateY(-2px)} .post img{width:100%;aspect-ratio:16/9;object-fit:cover} .post-b{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1} .post h3{font-size:1.05rem;margin:.55rem 0 .45em} .post h3 a{color:var(--ink);text-decoration:none} .post h3 a::after{content:"";position:absolute;inset:0} .post:hover h3 a{color:var(--red)} .post p{font-size:.9rem;color:var(--tx-2);margin:0 0 .9rem} .post-m{margin-top:auto;font-size:.8rem;color:var(--tx-3);display:flex;gap:.8rem;flex-wrap:wrap} .two-col{display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem} @media (min-width:1000px){.two-col{grid-template-columns:minmax(0,1fr) 305px}} .aside{min-width:0} .aside-box{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--red); padding:1.35rem;margin-bottom:1.1rem;position:sticky;top:calc(var(--hdr-h) + 46px)} .aside-box h3{font-size:1rem;margin-top:0} .aside-box ul{list-style:none;padding:0;margin:0} .aside-box li{margin:0 0 .5rem;font-size:.9rem} .aside-box a{color:var(--ink-2);text-decoration:none;font-weight:550} .aside-box a:hover{color:var(--red)} .big-q{font-family:var(--ff-d);font-size:clamp(1.15rem,1.05rem + .5vw,1.38rem);font-weight:700; color:var(--ink);line-height:1.4;border-left:5px solid var(--red);padding-left:1.2rem;margin:2rem 0} .err{text-align:center;padding:clamp(3rem,2rem + 5vw,6rem) 0} .err b{display:block;font-family:var(--ff-d);font-size:clamp(4rem,2rem + 12vw,8rem); font-weight:800;line-height:1;color:var(--red);letter-spacing:-.055em;margin-bottom:.4rem} /* ============================== RESPONSIVE ============================== */ @media (max-width:1100px){ .nav-l>li>a{padding:.55rem .48rem;font-size:.82rem} .brand img{height:50px} } @media (max-width:980px){ .sub-b{display:block} .nav{position:fixed;top:0;right:0;bottom:0;width:min(365px,86vw);background:var(--paper); flex-direction:column;align-items:stretch;gap:0;padding:calc(var(--hdr-h) + 12px) 0 90px; overflow-y:auto;transform:translateX(102%);transition:transform .26s ease; box-shadow:-16px 0 44px -20px rgba(0,0,0,.45);z-index:62;margin-left:0} .nav.open{transform:none} .nav-l{flex-direction:column;align-items:stretch;gap:0;padding:0 14px} .nav-l>li{border-bottom:1px solid var(--line-2)} .nav-l>li>a{padding:.9rem .5rem;font-size:1rem;color:var(--ink-2)} .nav-l>li>a:hover,.nav-l>li>a[aria-current="page"]{color:var(--red)} .nav-l>li>a[aria-current="page"]::after{display:none} .has-sub{display:grid;grid-template-columns:1fr 46px;align-items:center} .has-sub>.sub-t::after{display:none} .sub-b{grid-column:2;width:46px;height:46px;border:0;background:transparent;cursor:pointer; position:relative;justify-self:end} .sub-b::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px; border-right:2px solid var(--tx-2);border-bottom:2px solid var(--tx-2); transform:translate(-50%,-70%) rotate(45deg);transition:transform .2s} .sub-b[aria-expanded="true"]::after{transform:translate(-50%,-30%) rotate(-135deg)} .sub{position:static;grid-column:1/-1;min-width:0!important;display:none;opacity:1; visibility:visible;transform:none;box-shadow:none;border:0;border-top:1px solid var(--line-2); padding:.3rem 0 .8rem;background:var(--bg-2);margin:0 -14px; grid-template-columns:1fr!important} .sub.open,.sub-wide.open{display:block} .sub a{padding:.6rem 1.2rem;font-size:.93rem} .sub-right{right:auto} .nav-cta{display:block;padding:1.1rem 20px 0} .nav-cta .btn{width:100%} .burger{display:flex} .hdr-in{min-height:66px} :root{--hdr-h:58px} } @media (max-width:900px){ .hero-in{grid-template-columns:minmax(0,1fr)} .hero-md{order:-1;margin-bottom:2.2rem} .hero-badge{left:0;bottom:-20px;max-width:230px} .two-col{grid-template-columns:minmax(0,1fr)} .aside-box{position:static} .steps li{padding-top:0;padding-left:3.7rem;min-height:44px} .steps li::before{display:none} .stp-n{box-shadow:none!important} } @media (max-width:760px){ body{font-size:16.5px} .callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:57; background:var(--red);box-shadow:0 -6px 22px -10px rgba(0,0,0,.55)} .callbar a{display:flex;align-items:center;justify-content:center;gap:.65rem; padding:.74rem 1rem;color:#fff;text-decoration:none} .callbar .ic{width:22px;height:22px;flex:none} .callbar span{display:flex;flex-direction:column;line-height:1.18;min-width:0} .callbar b{font-family:var(--ff-d);font-size:.8rem;font-weight:700;color:#fff; text-transform:uppercase;letter-spacing:.06em} .callbar i{font-style:normal;font-family:var(--ff-d);font-size:1.04rem;font-weight:800} .ftr,.cta-strip{padding-bottom:0} .ftr-bot-in{padding-bottom:calc(1.1rem + 62px)} .ht-hide{display:none} .tbar-in{justify-content:flex-start;gap:.55rem .9rem} .tbar-i{font-size:.77rem;padding-right:.85rem} .tbar-i .ic{width:16px;height:16px} .stats b{font-size:1.6rem} } @media (max-width:520px){ .wrap{padding-inline:16px} .hero-act .btn,.phero-act .btn{width:100%} .hero-badge{position:static;max-width:none;margin-top:1.4rem} .rev,.card{padding:1.15rem} .ftr-l-2{columns:1} .cta-act .btn{width:100%} .brand img{height:44px} .phero h1{padding-left:.85rem;border-left-width:4px} } @media (max-width:430px){ .hdr-call-tx{display:none} .hdr-call{padding:.64rem .78rem} .brand img{height:30px} } @media (max-width:360px){ .hdr-top{font-size:.72rem} .brand img{height:27px} } @media print{ .hdr,.callbar,.cta-strip,.ftr-map,.scrim{display:none!important} body{font-size:11pt;background:#fff} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555} } /* ============================================================ ORCHARD RIDGE — theme overrides Light header on warm paper, deep-green hero, apple-red CTAs, rounded cards and pill buttons, arc divider under the hero. ============================================================ */ /* --- header: light, with the green utility strip above it --- */ .hdr-top{background:var(--ink);color:#CBDFD1} .hdr-top a{color:#F0EADF} .hdr .nav-l>li>a{color:var(--tx)} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)} .hdr .nav-l>li>a[aria-current]::after{background:var(--red)} .hdr .sub-b{color:var(--tx)} .hdr .burger span{background:var(--tx)} .hdr .logo-w b{color:var(--ink)} .hdr .logo-w span{color:var(--tx-2)} /* --- hero sits on the deep orchard green --- */ .hero{background: radial-gradient(1100px 620px at 82% 12%,rgba(242,227,194,.08),transparent 62%), linear-gradient(168deg,#C0181D 0%,var(--ink) 58%,#12300F 100%)} /* signature: a soft arc scooped out of the bottom of the hero, so the paper colour rises into it. Distinct from the previous builds' diagonal cut and flat edge. */ .hero::after{ content:"";position:absolute;left:-4%;right:-4%;bottom:-1px;height:74px; background:var(--bg); border-radius:50% 50% 0 0 / 100% 100% 0 0; z-index:2} @media(max-width:760px){.hero::after{height:44px}} /* --- buttons: pills --- */ .btn{border-radius:var(--r-s)} .btn-amber{background:var(--teal);color:#FFFFFF;border-color:var(--teal)} .btn-amber:hover{background:#8E1014;border-color:#8E1014} /* --- cards: rounded, with a gold corner tab instead of a left bar --- */ .card,.svc-c,.size-c,.post,.aside-box,.links a,.note,.callout,.table-scroll{ border-radius:var(--r)} .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:58px;height:4px; background:var(--teal);border-radius:var(--r) 0 var(--r) 0} .card,.svc-c{position:relative;overflow:hidden} .card:hover::before,.svc-c:hover::before{width:100%;transition:width .28s ease} /* --- trust bar: gold ticks on the green field --- */ .trust{background:var(--ink);color:#D7E6DB} .trust .ic{color:var(--teal)} /* --- eyebrow rule --- */ .eyebrow::before{background:var(--red)} /* red on navy is a low-contrast pair, so eyebrows on dark fields go light */ .hero .eyebrow,.sec-dark .eyebrow{color:#F1F4EE} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:var(--teal)} /* --- section rules and small accents --- */ .sec-dark{background:linear-gradient(168deg,#C0181D,var(--ink))} .big-q{border-left-color:var(--teal)} blockquote{border-left-color:var(--teal)} /* --- footer stays deep green; the badge logo has a white disc so it reads --- */ .ftr{background:var(--ink)} /* --- rounded images --- */ .imgwrap,.imgwrap img,figure img,.post img{border-radius:var(--r)} /* ============================================================ HEADER — slimmed top bar Desktop: thin strip, trust signals left, phone right. Mobile: removed entirely (redundant with the header Call button and the sticky bottom call bar), which reclaims 35px of permanently sticky viewport. ============================================================ */ .hdr-top{background:var(--ink);color:#D6E5DB;font-size:.795rem;border-bottom:0} .hdr-top-in{display:flex;align-items:center;justify-content:space-between; gap:1.2rem;min-height:30px;flex-wrap:nowrap} .ht-left{display:flex;align-items:center;gap:1.5rem;min-width:0} .ht-item{white-space:nowrap;font-weight:500} .ht-ic{width:14px;height:14px;color:var(--teal)} /* the phone is the point of the bar, so it reads as a link */ .ht-tel{display:inline-flex;align-items:center;gap:.45rem;flex:none; color:#fff;font-family:var(--ff-d);font-weight:700;letter-spacing:.01em; text-decoration:none;white-space:nowrap;padding:.2rem 0} .ht-tel .ht-ic{color:var(--teal)} .ht-tel:hover{color:var(--teal)} .ht-tel:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px} /* header body: tighter, so the sticky chrome stops eating the fold */ .hdr-in{min-height:var(--hdr-h);padding-block:.4rem} .brand img{height:40px} /* drop the third trust item before it crowds the phone */ @media(max-width:1180px){.ht-hide + .ht-hide{display:none}} @media(max-width:1024px){.ht-hide{display:none}} /* mobile: no top bar at all */ @media(max-width:900px){ .hdr-top{display:none} .brand img{height:44px} .hdr-in{padding-block:.3rem} } /* ============================================================ HERO BADGE — was apple red sitting on an orange-red dumpster, square-cornered, flush to the image edge and unlifted. Now a paper card: separates from the photo above and the deep green hero below, and matches the rounded theme. ============================================================ */ .hero-badge{ left:22px; /* deliberate inset, not flush to the edge */ bottom:-24px; background:var(--bg); /* warm paper - reads on red photo AND green field */ color:var(--tx); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 12px 30px rgba(18,48,15,.34); padding:.7rem .95rem; align-items:center; gap:.7rem; max-width:268px} .hero-badge b{ color:var(--red); /* apple red numeral, now legible */ font-size:1.45rem; letter-spacing:-.01em} .hero-badge span{ color:var(--tx-2); opacity:1; font-weight:600} /* tablet: keep the inset proportional */ @media(max-width:1100px){ .hero-badge{left:16px;bottom:-20px;max-width:238px} } /* mobile: it drops out of the image and becomes a normal block, so it does not need the lift - but it should still look like the same component */ @media(max-width:900px){ .hero-badge{ position:static;max-width:none;margin-top:1.2rem; box-shadow:none; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16)} .hero-badge b{color:var(--teal)} .hero-badge span{color:#D3E3D8} } /* ============================================================ HERO BADGE TYPOGRAPHY The numeral used to be a single "13 yrs" string in a flex item that shrank to 43px, so it wrapped to two same-size lines and read as two words rather than a statistic. Now split into a figure and a unit with a dividing rule. Class selectors are doubled up (.hero-badge .hb-*) so they beat the base .hero-badge b / .hero-badge span element rules. ============================================================ */ .hero-badge{display:flex;align-items:center;gap:0;padding:.72rem 1.05rem;max-width:336px} .hero-badge .hb-stat{ display:flex;flex-direction:column;align-items:center;justify-content:center; flex:none;white-space:nowrap;line-height:1; padding-right:.9rem;margin-right:.9rem; border-right:1px solid var(--line)} .hero-badge .hb-n{ font-family:var(--ff-d);font-size:1.85rem;font-weight:800; line-height:1;letter-spacing:-.025em;color:var(--red)} .hero-badge .hb-u{ font-family:var(--ff-d);font-size:.63rem;font-weight:700; text-transform:uppercase;letter-spacing:.13em;line-height:1; color:var(--tx-3);margin-top:.28rem} .hero-badge .hb-tx{ font-size:.795rem;line-height:1.38;font-weight:600; color:var(--tx-2);min-width:0;opacity:1; text-wrap:balance} /* avoids a one-word widow on the last line */ @media(max-width:1100px){ .hero-badge{max-width:300px;padding:.64rem .9rem} .hero-badge .hb-n{font-size:1.65rem} .hero-badge .hb-tx{font-size:.755rem} } /* mobile: block on the green hero, so the rule and colours invert */ @media(max-width:900px){ .hero-badge{max-width:none;padding:.85rem 1rem} .hero-badge .hb-stat{border-right-color:rgba(255,255,255,.22)} .hero-badge .hb-n{color:var(--teal)} .hero-badge .hb-u{color:rgba(255,255,255,.6)} .hero-badge .hb-tx{color:#D6E4DA} } /* ============================================================ RIVER & RAIL — Paducah Navy header, gold accents, slab-serif display, and a quilt strip under the hero (Paducah is a UNESCO Creative City of Crafts & Folk Art / National Quilt Museum). ============================================================ */ /* --- header: navy, with a gold hairline, and no utility strip --- */ .hdr{background:var(--ink);border-bottom:3px solid var(--teal)} .hdr .nav-l>li>a{color:#D3DEEC} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:var(--teal)} .hdr .sub-b{color:#D3DEEC} .hdr .burger span{background:#E8EEF6} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#9FB4CE} /* --- hero on the deep navy, with a soft gold wash top-right --- */ .hero{background: radial-gradient(1000px 560px at 84% 10%,rgba(242,227,194,.08),transparent 60%), linear-gradient(166deg,#C0181D 0%,var(--ink) 56%,#12300F 100%)} /* --- SIGNATURE: quilt strip under the hero --- */ .hero::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:14px;z-index:2; background: repeating-linear-gradient(90deg, var(--teal) 0 28px, #14498C 28px 56px); opacity:.95} @media(max-width:760px){.hero::after{height:10px; background:repeating-linear-gradient(90deg,var(--teal) 0 18px,#14498C 18px 36px)}} /* --- CTAs: gold on dark fields, royal blue on light --- */ .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--teal);border-color:var(--teal);color:#FFFFFF} .hero .btn-red:hover,.sec-dark .btn-red:hover{background:#9E1116;border-color:#9E1116} .btn-amber{background:var(--teal);color:#FFFFFF;border-color:var(--teal)} .btn-amber:hover{background:#9E1116;border-color:#9E1116} /* --- cards: squared slab feel, gold top rule instead of a corner tab --- */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:100%;height:3px; background:var(--line);border-radius:0} .card:hover::before,.svc-c:hover::before{background:var(--teal);transition:background .22s ease} /* --- trust bar --- */ .trust{background:var(--ink);color:#CFDCEC} .trust .ic{color:var(--teal)} /* --- accents --- */ .eyebrow::before{background:var(--teal)} .eyebrow-amber{color:var(--teal)} .sec-dark{background:linear-gradient(166deg,#C0181D,var(--ink))} .big-q{border-left-color:var(--teal)} blockquote{border-left-color:var(--teal)} .ftr{background:var(--ink)} /* slab headings want a touch less letter-spacing */ h1,h2,h3,.logo-w b{letter-spacing:-.012em} /* ============================================================ SHOALS SOUND — Florence, AL Light ivory header (the previous build ran a navy one), gold CTAs with navy text, geometric display face, 10px radius, and a soundwave divider under the hero — Florence sits in the Shoals, home of FAME and Muscle Shoals Sound. ============================================================ */ /* --- header: light ivory, navy type, gold underline --- */ .hdr{background:var(--bg);border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(58,42,34,.04)} .hdr .nav-l>li>a{color:var(--tx)} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)} .hdr .nav-l>li>a[aria-current]::after{background:var(--teal);height:3px} .hdr .sub-b{color:var(--tx)} .hdr .burger span{background:var(--ink)} .hdr .logo-w b{color:var(--ink)} .hdr .logo-w span{color:var(--tx-2)} /* --- hero: deep navy with a gold wash --- */ .hero{background: radial-gradient(980px 540px at 82% 8%,rgba(242,227,194,.08),transparent 60%), linear-gradient(164deg,#C0181D 0%,var(--ink) 58%,#12300F 100%)} /* --- SIGNATURE: soundwave bars under the hero ------------------ A row of gold bars at varying heights, like a level meter. The Shoals is a music town, so the motif belongs here rather than being generic decoration. Pure CSS, no image request. */ .hero::after{ /* SELF-CONTAINED ON PURPOSE. Four .hero::after rules are stacked in this file, one per build in the clone chain: a base diagonal hatch (inset:0, z-index:-1, opacity:.5), an arc scoop (border-radius + negative left/right) and a quilt strip (opacity:.95). Any property an earlier rule sets that this one does not reset will leak through. So reset all of them: top:auto - base uses inset:0, which pins top:0. With bottom AND height also set the box is over-constrained and the browser honours top, putting the bar at the TOP. border-radius:0 - otherwise the arc scoop curves this bar. opacity:1 - otherwise the quilt rule's .95 applies. */ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:20px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; /* each layer is a 4px bar inside a 64px tile, so the bars do NOT tile solid. 8 layers offset 8px apart = 4px bar, 4px gap, heights staggered. */ background-image: linear-gradient(to right,var(--teal) 0 4px,transparent 4px), linear-gradient(to right,var(--teal) 0 4px,transparent 4px), linear-gradient(to right,var(--teal) 0 4px,transparent 4px), linear-gradient(to right,var(--teal) 0 4px,transparent 4px), linear-gradient(to right,var(--teal) 0 4px,transparent 4px), linear-gradient(to right,var(--teal) 0 4px,transparent 4px), linear-gradient(to right,var(--teal) 0 4px,transparent 4px), linear-gradient(to right,var(--teal) 0 4px,transparent 4px); background-size: 64px 9px, 64px 20px, 64px 12px, 64px 16px, 64px 7px, 64px 18px, 64px 11px, 64px 14px; background-position: 0px bottom, 8px bottom, 16px bottom, 24px bottom, 32px bottom, 40px bottom, 48px bottom, 56px bottom} @media(max-width:760px){ .hero::after{height:14px; background-size: 48px 6px, 48px 14px, 48px 8px, 48px 11px, 48px 5px, 48px 12px, 48px 7px, 48px 9px; background-position: 0px bottom, 6px bottom, 12px bottom, 18px bottom, 24px bottom, 30px bottom, 36px bottom, 42px bottom}} /* --- CTAs: GOLD with navy text. Gold is a fill colour only; it never carries small text on white, which would fail contrast. --- */ .btn-red{background:var(--teal);border-color:var(--teal);color:#FFFFFF} .btn-red:hover{background:#A9151A;border-color:#A9151A;color:#101F16} .btn-amber{background:var(--teal);border-color:var(--teal);color:#FFFFFF} .btn-amber:hover{background:#A9151A;border-color:#A9151A} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff} /* --- cards: gold left rule, squared-off corners on the accent --- */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--line);border-radius:0} .card:hover::before,.svc-c:hover::before{background:var(--teal); transition:background .22s ease} .trust{background:var(--ink);color:#CFDCE9} .trust .ic{color:var(--teal)} .eyebrow::before{background:var(--teal)} .eyebrow-amber{color:var(--teal)} .sec-dark{background:linear-gradient(164deg,#C0181D,var(--ink))} .big-q{border-left-color:var(--teal)} blockquote{border-left-color:var(--teal)} .ftr{background:var(--ink)} /* geometric face sets tight */ h1,h2,h3,.logo-w b{letter-spacing:-.02em} /* ============================================================ KATY LINE — Katy, TX Deep rail blue, brand red CTAs, Archivo display, 4px radius, and a RAILROAD TRACK divider under the hero. Katy is named after the Missouri-Kansas-Texas Railroad — the "K-T", the Katy. ============================================================ */ /* --- header: deep blue with a red underline --- */ .hdr{background:var(--ink);border-bottom:3px solid var(--red);box-shadow:none} .hdr .nav-l>li>a{color:#E4DACE} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px} .hdr .sub-b{color:#E4DACE} .hdr .burger span{background:#F2EAE0} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#CCBFB0} /* --- hero --- */ .hero{background: radial-gradient(960px 520px at 84% 10%,rgba(62,125,51,.15),transparent 60%), linear-gradient(163deg,#27591F 0%,var(--ink) 56%,#12300F 100%)} /* --- SIGNATURE: railroad track under the hero ------------------ Two rails with crossties between them. Self-contained on purpose: four .hero::after rules are stacked in this file, one per build in the clone chain, and any property not reset here leaks through. top:auto - the base rule's inset:0 pins top:0, which would put the track at the TOP of the hero border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:18px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-image: /* crossties: 10px tie, 14px gap */ linear-gradient(to right,var(--red) 0 10px,transparent 10px), /* top rail */ linear-gradient(var(--teal),var(--teal)), /* bottom rail */ linear-gradient(var(--teal),var(--teal)); background-size: 24px 12px, 100% 3px, 100% 3px; background-position: 0 bottom 3px, 0 bottom 12px, 0 bottom 0} @media(max-width:760px){ .hero::after{height:13px; background-size:18px 9px,100% 2px,100% 2px; background-position:0 bottom 2px,0 bottom 9px,0 bottom 0}} /* --- CTAs: brand red, white text --- NOTE the compound selectors. An earlier build's override block in this file sets `.hero .btn-red, .sec-dark .btn-red, .callbar .btn-red` (specificity 0,2,0), which beats a bare `.btn-red` (0,1,0) and left every hero CTA rendering in the accent colour instead of brand red. Match the specificity rather than relying on source order. */ .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff} /* --- cards: red top rule, square corners on the accent --- */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:100%;height:3px; background:var(--line);border-radius:0} .card:hover::before,.svc-c:hover::before{background:var(--red); transition:background .22s ease} .trust{background:var(--ink);color:#E4DACE} .trust .ic{color:var(--red)} .eyebrow::before{background:var(--red)} /* red on navy is a low-contrast pair, so eyebrows on dark fields go light */ .hero .eyebrow,.sec-dark .eyebrow{color:#F1F4EE} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:#C0181D} .sec-dark{background:linear-gradient(163deg,#27591F,var(--ink))} .big-q{border-left-color:var(--red)} blockquote{border-left-color:var(--red)} .ftr{background:var(--ink)} h1,h2,h3,.logo-w b{letter-spacing:-.018em} /* ============================================================ PINEY WOODS — Longview, TX Light warm-paper header, slab-serif display, square corners, and a PINE TREELINE divider under the hero. Longview sits in the East Texas Piney Woods. ============================================================ */ /* --- header: light warm paper, slate type, red underline --- */ .hdr{background:var(--bg);border-bottom:2px solid var(--red);box-shadow:none} .hdr .nav-l>li>a{color:var(--tx)} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)} .hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px} .hdr .sub-b{color:var(--tx)} .hdr .burger span{background:var(--ink)} .hdr .logo-w b{color:var(--ink)} .hdr .logo-w span{color:var(--tx-2)} /* --- hero --- */ /* GLOW OPACITY MUST SCALE WITH THE LUMINANCE GAP. The previous builds used .22-.36 for a blue or sky glow over navy, where the glow and the base are close in luminance. Brand YELLOW over near-black is an enormous gap, and .22 washed the whole upper hero to a solid olive-gold (#513: rgba mixes to (81,67,25)) - which is exactly the fast-food read this palette has to avoid. Dropped to .07 and tightened, which lifts the corner without colouring it. */ .hero{background: radial-gradient(720px 400px at 88% 6%,rgba(168,201,240,.10),transparent 58%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- SIGNATURE: pine treeline under the hero ------------------ A sawtooth of paper-coloured peaks rising into the dark hero, reading as a treeline on the horizon. Longview is the gateway to the East Texas Piney Woods. Self-contained on purpose. FIVE .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0, which would put the treeline at the TOP of the hero border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:24px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:0 bottom; background-size:36px 24px; background-image: linear-gradient(-45deg,var(--bg) 12px,transparent 0), linear-gradient( 45deg,var(--bg) 12px,transparent 0); /* a solid paper foot under the peaks so the join is clean */ box-shadow:none} .hero::before{} @media(max-width:760px){ .hero::after{height:16px;background-size:24px 16px; background-image: linear-gradient(-45deg,var(--bg) 8px,transparent 0), linear-gradient( 45deg,var(--bg) 8px,transparent 0)}} /* --- CTAs: brand red, white text. Compound selectors deliberately match the specificity an earlier build's block uses (.hero .btn-red etc, 0,2,0) - a bare .btn-red loses to it regardless of source order. --- */ .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.5);color:#fff} /* --- cards: square, red left rule --- */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--line);border-radius:0} .card:hover::before,.svc-c:hover::before{background:var(--red); transition:background .22s ease} .trust{background:var(--ink);color:#E4DACE} .trust .ic{color:var(--red)} .eyebrow::before{background:var(--red)} /* red on slate is a low-contrast pair, so eyebrows on dark fields go light */ .hero .eyebrow,.sec-dark .eyebrow{color:#F1F4EE} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:#C0181D} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--red)} blockquote{border-left-color:var(--red)} .ftr{background:var(--ink)} /* slab face wants a touch more room */ h1,h2,h3{letter-spacing:-.01em} .logo-w b{letter-spacing:-.005em} /* ============================================================ CARD HOVER — self-contained, and it has to be. FIVE .card::before rules are stacked in this file, one per build in the clone chain. An early build's card used a small 58px x 4px TOP tab that grew to full width on hover, so it set `.card:hover::before{width:100%}`. That rule still applies. This build's ::before is a 4px-wide FULL-HEIGHT left rule, so that width made it a solid brand-red panel covering the whole card and painting over the heading and body text on hover. So the hover state below re-states width AND height explicitly rather than trusting source order, and the lift is done on the card itself. ============================================================ */ .card,.svc-c{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease} .card:hover,.svc-c:hover, .card:focus-within,.svc-c:focus-within{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(58,42,34,.16), 0 2px 6px rgba(58,42,34,.08); border-color:var(--line)} /* the accent rule keeps its geometry and only changes colour */ .card:hover::before,.svc-c:hover::before, .card:focus-within::before,.svc-c:focus-within::before{ width:4px;height:100%;top:0;left:0;right:auto;bottom:auto; background:var(--red); transition:background .22s ease} /* ONE accent, not two. The base stylesheet already gives .card a 3px top border, which is the accent actually visible at rest - the ::before left rule reads as almost nothing against the pale --line colour. So drive the hover off the top border and neutralise ::before, rather than lighting up two different edges. */ .card:hover,.svc-c:hover, .card:focus-within,.svc-c:focus-within{border-top-color:var(--red)} .card::before,.svc-c::before, .card:hover::before,.svc-c:hover::before, .card:focus-within::before,.svc-c:focus-within::before{background:transparent} /* The heading link colour comes from `.card:hover h3 a`, not from the h3, so setting the h3 here would be dead code. Brand red on white measures 5.6:1, which passes AA, so the red heading on hover stays as a deliberate affordance. Body copy is left alone. */ .card:hover p,.svc-c:hover p{color:var(--tx-2)} /* ============================================================ BOLD TEXT ON DARK FIELDS The base stylesheet sets a global `strong, b {color:var(--ink)}`, which is right on white but renders bold text in EXACTLY the background colour inside .hero, .sec-dark and the footer - so the lead-in phrase of every dark-section bullet was invisible. ============================================================ */ .hero strong,.hero b, .sec-dark strong,.sec-dark b, .ftr strong,.ftr b, .trust strong,.trust b{color:#fff} /* the hero reassurance line now sits ABOVE the buttons, so give it a little more room and enough contrast to actually be read */ .hero-fine{margin-top:1.5rem!important;color:#BFC9D2;margin:0 0 1rem;font-size:.84rem} .hero-act{margin-top:0} /* ============================================================ NORTH COUNTRY — Watertown, NY Dark navy header, brand gold CTAs, pill buttons, 16px cards, cool snow-white paper, and a SNOWDRIFT divider under the hero. Watertown is one of the snowiest cities in the country - the lake-effect belt off Lake Ontario runs straight over it. ============================================================ */ /* --- header: deep navy with a gold underline --- */ .hdr{background:var(--ink);border-bottom:3px solid var(--teal);box-shadow:none} .hdr .nav-l>li>a{color:#CBDCE9} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:var(--teal);height:3px} .hdr .sub-b{color:#CBDCE9} .hdr .burger span{background:#E7EEF5} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#A3B8CC} /* --- hero --- */ .hero{background: radial-gradient(950px 520px at 84% 10%,rgba(62,125,51,.15),transparent 62%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- SIGNATURE: snowdrift under the hero ---------------------- A run of soft paper-coloured mounds along the bottom edge, so the page below reads as drifted snow banking up against the dark field. Two offset layers of different radius keep it from looking like a mechanical scallop. Self-contained on purpose. SIX .hero::after rules are stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0, which would put the drift at the TOP of the hero border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:26px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:0 bottom, 34px bottom; background-size:96px 26px, 96px 26px; background-image: radial-gradient(30px 22px at 30px 26px,var(--bg) 99%,transparent 100%), radial-gradient(42px 26px at 42px 28px,var(--bg) 99%,transparent 100%)} @media(max-width:760px){ .hero::after{height:16px; background-position:0 bottom, 22px bottom; background-size:62px 16px, 62px 16px; background-image: radial-gradient(20px 13px at 20px 16px,var(--bg) 99%,transparent 100%), radial-gradient(28px 16px at 28px 17px,var(--bg) 99%,transparent 100%)}} /* --- CTAs: brand GOLD with navy text. Gold is a fill colour only; it never carries small text on white, which would fail contrast. Compound selectors match the specificity an earlier build's block uses (.hero .btn-red etc, 0,2,0) - a bare .btn-red loses to it regardless of source order. --- */ .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--teal);border-color:var(--teal);color:#FFFFFF} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:#9A1216;border-color:#9A1216;color:#101C30} .btn-amber{background:var(--teal);border-color:var(--teal);color:#FFFFFF} .btn-amber:hover{background:#9A1216;border-color:#9A1216} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} /* --- cards: rounded, gold left rule --- */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--line);border-radius:0} .trust{background:var(--ink);color:#CFDCEC} .trust .ic{color:var(--teal)} .eyebrow::before{background:var(--teal)} .hero .eyebrow,.sec-dark .eyebrow{color:#F1F4EE} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:var(--teal)} .eyebrow-amber{color:var(--teal)} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--teal)} blockquote{border-left-color:var(--teal)} .ftr{background:var(--ink)} h1,h2,h3{letter-spacing:-.02em} /* ============================================================ HARBOUR LINE — Port Charlotte, FL Light sand header, brand red CTAs, 12px cards, squared buttons, and a WATERWAY divider under the hero. Port Charlotte is built around one of the largest residential canal networks in the country, on Charlotte Harbor. ============================================================ */ /* --- header: warm sand, navy type, red underline --- */ .hdr{background:var(--bg);border-bottom:3px solid var(--red);box-shadow:none} .hdr .nav-l>li>a{color:var(--tx)} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)} .hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px} .hdr .sub-b{color:var(--tx)} .hdr .burger span{background:var(--ink)} .hdr .logo-w b{color:var(--ink)} .hdr .logo-w span{color:var(--tx-2)} /* --- hero --- */ /* GLOW OPACITY MUST SCALE WITH THE LUMINANCE GAP. The previous builds used .22-.36 for a blue or sky glow over navy, where the glow and the base are close in luminance. Brand YELLOW over near-black is an enormous gap, and .22 washed the whole upper hero to a solid olive-gold (#513: rgba mixes to (81,67,25)) - which is exactly the fast-food read this palette has to avoid. Dropped to .07 and tightened, which lifts the corner without colouring it. */ .hero{background: radial-gradient(720px 400px at 88% 6%,rgba(168,201,240,.10),transparent 58%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- SIGNATURE: waterway under the hero ---------------------- A smooth double wave, drawn as an inline SVG so the curve is exact rather than faked with stacked gradients. Reads as the canal network / harbour shoreline this town is built on. Self-contained on purpose. SEVEN .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0, which would put the wave at the TOP of the hero border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:34px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:200px 34px; background-image:url("data:image/svg+xml;utf8,\ \ \ \ ")} @media(max-width:760px){.hero::after{height:22px;background-size:130px 22px}} /* --- CTAs: brand red, white text. Compound selectors match the specificity an earlier build's block uses (.hero .btn-red etc, 0,2,0) - a bare .btn-red loses to it regardless of source order. --- */ .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--line);border-radius:0} .trust{background:var(--ink);color:#CBDCE9} .trust .ic{color:#C0181D} .eyebrow::before{background:var(--red)} /* brand red on a navy field is a low-contrast pair, so eyebrows go light there */ .hero .eyebrow,.sec-dark .eyebrow{color:#F1F4EE} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:#C0181D} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--red)} blockquote{border-left-color:var(--red)} .ftr{background:var(--ink)} h1,h2,h3{letter-spacing:-.018em} /* "Port Charlotte, FL" is a long place name and the inherited h1 clamp pushed "FL" onto a line of its own. Measured across sizes: 3rem is the largest that still sets the headline as two clean lines in this column. NOTE: text-wrap:balance was tried first and made it WORSE - it balances across the accent as well, giving five short ragged lines. Don't. */ .hero h1{font-size:clamp(2.05rem,3.9vw,3rem)} /* ============================================================ SPINDLETOP — Beaumont, TX Dark navy header, brand green CTAs, SERIF display face, near-square corners, cool grey-green paper, and a DERRICK SKYLINE divider under the hero. The Spindletop gusher came in just south of town in 1901 and made this an oil city. ============================================================ */ /* --- header: deep navy with a green underline --- */ .hdr{background:var(--ink);border-bottom:3px solid var(--red);box-shadow:none} .hdr .nav-l>li>a{color:#E9F2E4} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px} .hdr .sub-b{color:#E9F2E4} .hdr .burger span{background:#F0EADF} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#B3A596} /* --- hero --- */ .hero{background: radial-gradient(940px 520px at 84% 10%,rgba(242,227,194,.08),transparent 62%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- SIGNATURE: derrick skyline under the hero --------------- A repeating run of narrow tapered towers along the bottom edge, reading as the wooden derrick forest that stood over Spindletop after the 1901 gusher. Drawn as an inline SVG so the taper is exact, and built so the tile LOOPS: the path starts and ends mid-gap at the same height, which is what stops a visible notch at every repeat. Self-contained on purpose. EIGHT .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0, which would put the skyline at the TOP of the hero border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:56px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:230px 56px; background-image:url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ ")} @media(max-width:760px){.hero::after{height:34px;background-size:145px 34px}} /* --- CTAs: brand green, white text. Compound selectors match the specificity an earlier build's block uses (.hero .btn-red etc, 0,2,0) - a bare .btn-red loses to it regardless of source order. --- */ .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--line);border-radius:0} .trust{background:var(--ink);color:#CBDCE9} .trust .ic{color:#C0181D} .eyebrow::before{background:var(--red)} /* mid green on a navy field is a weak pair, so eyebrows on dark fields go light */ .hero .eyebrow,.sec-dark .eyebrow{color:#F1F4EE} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:#C0181D} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--red)} blockquote{border-left-color:var(--red)} .ftr{background:var(--ink)} /* Fraunces is a serif and sets tighter than the grotesks used previously */ h1,h2,h3{letter-spacing:-.012em} .hero h1{font-size:clamp(2.15rem,4.2vw,3.3rem)} /* --- GREEN ON NAVY NEEDS THE LIGHT TINT ----------------------- The brand green (#C0181D) is a DARK green. It is correct on white (5.4:1 as a CTA fill with white text) but on the navy hero it measures only 2.33:1 - well under the 4.5:1 minimum - so the H1 accent and every bullet tick were barely legible. Dark fields get the lighter tint #C0181D instead. Same hue family, reads as the same brand colour, but it actually passes. GENERAL RULE for this kit: whenever the brand accent is DARK, it cannot be reused as text or iconography on a dark field. Check it. */ .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:#C0181D} .ftr-l b{color:#C0181D} /* ============================================================ LAKESHORE — Roseville, MI Light bone header, brand red CTAs, 10px radius, warm bone paper, and a CHEVRON BELT divider under the hero. Macomb County is Detroit's manufacturing belt and Roseville sits on the Groesbeck / Gratiot industrial corridor. ============================================================ */ /* --- header: warm bone, navy type, red underline --- */ .hdr{background:var(--bg);border-bottom:3px solid var(--red);box-shadow:none} .hdr .nav-l>li>a{color:var(--tx)} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)} .hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px} .hdr .sub-b{color:var(--tx)} .hdr .burger span{background:var(--ink)} .hdr .logo-w b{color:var(--ink)} .hdr .logo-w span{color:var(--tx-2)} /* --- hero --- */ /* GLOW OPACITY MUST SCALE WITH THE LUMINANCE GAP. The previous builds used .22-.36 for a blue or sky glow over navy, where the glow and the base are close in luminance. Brand YELLOW over near-black is an enormous gap, and .22 washed the whole upper hero to a solid olive-gold (#513: rgba mixes to (81,67,25)) - which is exactly the fast-food read this palette has to avoid. Dropped to .07 and tightened, which lifts the corner without colouring it. */ .hero{background: radial-gradient(720px 400px at 88% 6%,rgba(168,201,240,.10),transparent 58%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- SIGNATURE: chevron belt under the hero ------------------ A run of paper-coloured chevrons along the bottom edge, like a conveyor or drive belt. Macomb County is the manufacturing belt and Roseville sits on the Groesbeck corridor. Drawn as an inline SVG so the angles are exact, and built to LOOP: the tile starts and ends mid-gap at the same height, so there is no notch at the repeat. VERIFY THIS ON SCREEN - a previous build shipped a divider with a visible seam. Self-contained on purpose. NINE .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0, which would put the belt at the TOP of the hero border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height must MATCH the background-size height, or the tile is cropped. That height sits on a line SHARED with left/right/top/bottom - patch the block, not the line. */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:34px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:120px 34px; background-image:url("data:image/svg+xml;utf8,")} @media(max-width:760px){.hero::after{height:22px;background-size:80px 22px}} /* --- CTAs: brand red, white text. Compound selectors match the specificity an earlier build's block uses (.hero .btn-red etc, 0,2,0) - a bare .btn-red loses to it regardless of source order. --- */ .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--line);border-radius:0} .trust{background:var(--ink);color:#E9F2E4} .trust .ic{color:#C0181D} .eyebrow::before{background:var(--red)} /* --- DARK BRAND ACCENT ON A DARK FIELD ----------------------- Brand red #C0181D is a DARK red. It is correct as a CTA fill with white text, but as text or iconography on the navy hero it fails contrast badly. Dark fields get the lighter tint #C0181D instead. Measured, not assumed - see the delivery notes. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F1F4EE} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:#C0181D} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:#C0181D} .ftr-l b{color:#C0181D} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--red)} blockquote{border-left-color:var(--red)} .ftr{background:var(--ink)} h1,h2,h3{letter-spacing:-.02em} /* ============================================================ PIEDMONT — Loganville, GA Dark navy header, brand red CTAs, PILL buttons, 14px cards, warm greige paper, and a ROLLING RIDGELINE divider under the hero. Loganville sits at 978 ft on the rolling red-clay ridges of the Georgia Piedmont, east of Atlanta. Roseville shared this navy/red palette, so every other lever is pushed hard the other way: dark header (Roseville was light bone), Bricolage Grotesque (was Familjen Grotesk), ridgeline (was chevron belt), pills (was 10px), greige (was bone), and a brighter navy and red from this logo. ============================================================ */ /* --- header: deep navy with a red underline --- */ .hdr{background:var(--ink);border-bottom:3px solid var(--red);box-shadow:none} .hdr .nav-l>li>a{color:#E9F2E4} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px} .hdr .sub-b{color:#E9F2E4} .hdr .burger span{background:#F0EADF} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#B3A596} /* --- hero --- */ /* GLOW OPACITY MUST SCALE WITH THE LUMINANCE GAP. The previous builds used .22-.36 for a blue or sky glow over navy, where the glow and the base are close in luminance. Brand YELLOW over near-black is an enormous gap, and .22 washed the whole upper hero to a solid olive-gold (#513: rgba mixes to (81,67,25)) - which is exactly the fast-food read this palette has to avoid. Dropped to .07 and tightened, which lifts the corner without colouring it. */ .hero{background: radial-gradient(720px 400px at 88% 6%,rgba(168,201,240,.10),transparent 58%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- SIGNATURE: rolling ridgeline under the hero ------------- Two overlapping smooth hill curves, deliberately ROUNDED to sit against the pill buttons and to read differently from the angular chevrons and spiky derricks of the last two builds. The Georgia Piedmont is rolling red-clay ridge country and Loganville sits at 978 ft on one of them. Built to LOOP: the path enters at x=0 and leaves at x=240 at the SAME y (28) with the same direction, so there is no notch at the repeat. VERIFY THIS ON SCREEN. Self-contained on purpose. TEN .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0 border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height MUST MATCH the background-size height or the tile is cropped. That height sits on a line SHARED with left/right/top/bottom - patch the BLOCK, not the line, then verify the computed height in the browser. */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:44px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:240px 44px; background-image:url("data:image/svg+xml;utf8,")} @media(max-width:760px){.hero::after{height:28px;background-size:160px 28px}} /* --- SIGNATURE 2: PILL buttons. No build in this run has used them, and they pair with the rounded ridgeline. --- */ .btn,.btn-red,.btn-ghost,.btn-amber,.callbar a{border-radius:999px} /* --- CTAs: brand red, white text. Compound selectors match the specificity an earlier build's block uses (.hero .btn-red etc, 0,2,0) - a bare .btn-red loses to it regardless of source order. --- */ .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff;border-radius:999px} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--line);border-radius:0} .trust{background:var(--ink);color:#E9F2E4} .trust .ic{color:#C0181D} .eyebrow::before{background:var(--red)} /* --- DARK BRAND ACCENT ON A DARK FIELD ----------------------- Applied UP FRONT, as a standard clone step, because this has now bitten twice. Brand red #C0181D is a strong mid-dark red: correct as a CTA fill with white text, but as TEXT or icons on the navy hero it does not clear 4.5:1. Dark fields use the lighter tint #C0181D instead. Measured against the HERO, not just against the CTA. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F1F4EE} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:#C0181D} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:#C0181D} .ftr-l b{color:#C0181D} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--red)} blockquote{border-left-color:var(--red)} .ftr{background:var(--ink)} /* Bricolage Grotesque runs wide, so pull the display tracking in */ h1,h2,h3{letter-spacing:-.026em} .hero h1{font-size:clamp(2.05rem,4vw,3.15rem)} /* --- HEADER LOCKUP SIZING ------------------------------------ An ancestor build's header block sets `.brand img{height:40px}` partway down this file, which beats the base rule on source order. 40px suits the SQUARE badges those builds used; this build's logo is a STACKED LOCKUP (1.356:1) carrying a two-line wordmark, and at 40px the subline renders about 6px tall and is unreadable. Overriding here, at the end of the file, where it wins - the same approach the stacked .hero::after rules take. Revert to 40px if a future clone goes back to a round badge. */ .brand img{height:58px} @media(max-width:900px){.brand img{height:50px}} @media(max-width:520px){.brand img{height:42px}} /* ============================================================ POWDER HOLLOW — Enfield, CT Light blue-grey header with a TWO-TONE rule, brand red CTAs, SQUARE corners, cool blue-grey paper, and a SAWTOOTH MILL ROOF divider under the hero. Enfield's Thompsonville wove carpet at the Bigelow mills and Hazardville made gunpowder in Powder Hollow, so a north-light factory roofline is the honest local motif. The last three builds were all navy-primary. This one is RED primary on a cool SLATE ink - no navy anywhere - with sky blue as the secondary. Square corners follow Loganville's pills and Roseville's 10px. ============================================================ */ /* --- header: pale, with a two-tone red-over-sky rule -------- Roseville also used a light header, so this one is differentiated by the DOUBLE rule and the slate type. */ .hdr{background:var(--bg);border-bottom:3px solid var(--red); box-shadow:0 2px 0 0 var(--teal)} .hdr .nav-l>li>a{color:var(--tx)} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)} .hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px} .hdr .sub-b{color:var(--tx)} .hdr .burger span{background:var(--ink)} .hdr .logo-w b{color:var(--ink)} .hdr .logo-w span{color:var(--tx-2)} /* --- hero: slate, with a sky-blue glow --- */ /* GLOW OPACITY MUST SCALE WITH THE LUMINANCE GAP. The previous builds used .22-.36 for a blue or sky glow over navy, where the glow and the base are close in luminance. Brand YELLOW over near-black is an enormous gap, and .22 washed the whole upper hero to a solid olive-gold (#513: rgba mixes to (81,67,25)) - which is exactly the fast-food read this palette has to avoid. Dropped to .07 and tightened, which lifts the corner without colouring it. */ .hero{background: radial-gradient(720px 400px at 88% 6%,rgba(168,201,240,.10),transparent 58%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- SIGNATURE: sawtooth mill roof under the hero ------------ A north-light factory roofline: a vertical riser, a long shallow rake down, repeated. Deliberately ASYMMETRIC, which is what separates it from the symmetric chevron belt two builds back and the rounded ridgeline of the last one. Built to LOOP: the path enters at x=0 and leaves at x=200 at the SAME height with the same direction, so there is no notch at the repeat. VERIFY ON SCREEN. Self-contained on purpose. ELEVEN .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0 border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height MUST MATCH the background-size height or the tile is cropped. That height sits on a line SHARED with left/right/top/bottom - patch the BLOCK, not the line, then verify the computed height in the browser. */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:38px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:200px 38px; background-image:url("data:image/svg+xml;utf8,")} @media(max-width:760px){.hero::after{height:24px;background-size:126px 24px}} /* --- SQUARE corners. Loganville used pills, Roseville 10px, so this build goes hard the other way. --- */ .btn,.btn-red,.btn-ghost,.btn-amber,.callbar a{border-radius:0} /* --- CTAs: brand red, white text (5.9:1). Compound selectors match the specificity an earlier build's block uses (.hero .btn-red etc, 0,2,0) - a bare .btn-red loses to it regardless of source order. --- */ .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff;border-radius:0} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--line);border-radius:0} .trust{background:var(--ink);color:#E9F2E4} .trust .ic{color:#C0181D} .eyebrow::before{background:var(--red)} /* --- DARK-FIELD ACCENT: A LIGHTENED SECONDARY, NOT A TINT OF THE PRIMARY. Brand red #C0181D measures 1.53-2.48:1 across the hero bands - unusable as text there. Rather than invent a pink tint, this build uses the SECONDARY sky blue, lightened to #C0181D so it clears 4.5 against EVERY band including a glow-lightened sample (worst case 5.01). Plain #C0181D measured 3.36 at worst and was rejected. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F1F4EE} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:#C0181D} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:#C0181D} .ftr-l b{color:#C0181D} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--red)} blockquote{border-left-color:var(--red)} .ftr{background:var(--ink)} /* Chivo is a sturdy grotesque; it sets a touch looser than Bricolage */ h1,h2,h3{letter-spacing:-.018em} .hero h1{font-size:clamp(2.05rem,4vw,3.2rem)} /* --- HEADER LOCKUP SIZING ------------------------------------ Carried from the previous build and still required: an ancestor build's header block sets `.brand img{height:40px}` partway down this file and beats the base rule on source order. That suits a square badge; this build's logo is another STACKED LOCKUP with a two-line wordmark, illegible at 40px. Override here at the end, where it wins. Revert if a future clone uses a round badge. */ .brand img{height:58px} @media(max-width:900px){.brand img{height:50px}} @media(max-width:520px){.brand img{height:42px}} /* ============================================================ CAMBRIA IRON — Johnstown, PA Near-black header with a YELLOW rule, deep red CTAs carrying a yellow safety-stripe edge, 6px corners, warm neutral paper, and a MILL STACK divider under the hero. First WARM-ONLY palette in the run - red and yellow on a warm near-black, with no blue or slate anywhere. Red+yellow can read as fast food, so: the red is DEEP rather than bright, the yellow is accent/rule/dark-field only and never a large fill, the near-black dominates, and the paper stays restrained. The divider is a BLOCKY STEPPED silhouette - rectangles at varying heights, no diagonals and no curves at all - which is what separates it from the sawtooth, the chevron belt and the ridgeline. Johnstown was built on the Cambria Iron Works and the yard address is Iron Street. ============================================================ */ /* --- header: near-black with a yellow rule --- */ .hdr{background:var(--ink);border-bottom:3px solid var(--teal);box-shadow:none} .hdr .nav-l>li>a{color:#E9F2E4} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:var(--teal);height:3px} .hdr .sub-b{color:#E9F2E4} .hdr .burger span{background:#F0EADF} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#B3A596} /* --- hero: warm charcoal with a low yellow glow --- */ /* GLOW OPACITY MUST SCALE WITH THE LUMINANCE GAP. The previous builds used .22-.36 for a blue or sky glow over navy, where the glow and the base are close in luminance. Brand YELLOW over near-black is an enormous gap, and .22 washed the whole upper hero to a solid olive-gold (#513: rgba mixes to (81,67,25)) - which is exactly the fast-food read this palette has to avoid. Dropped to .07 and tightened, which lifts the corner without colouring it. */ .hero{background: radial-gradient(720px 400px at 88% 6%,rgba(168,201,240,.10),transparent 58%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- SIGNATURE: mill stack divider under the hero ------------ A run of paper-coloured rectangular blocks at varying heights with a solid base rail - a mill roofline and stack profile. Deliberately ORTHOGONAL: no diagonals, no curves. Built to LOOP: the tile starts and ends mid-gap at the same height, so there is no notch at the repeat. VERIFY ON SCREEN. Self-contained on purpose. TWELVE .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0 border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height MUST MATCH the background-size height or the tile is cropped. That height sits on a line SHARED with left/right/top/bottom - patch the BLOCK, not the line, then verify the computed height in the browser. */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:40px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:220px 40px; background-image:url("data:image/svg+xml;utf8,")} @media(max-width:760px){.hero::after{height:26px;background-size:143px 26px}} /* --- CTAs: deep red, white text (6.55:1), with a yellow safety-stripe bottom edge. The stripe is this build's small signature detail and pairs with the header rule. --- */ .btn,.btn-red,.btn-ghost,.btn-amber,.callbar a{border-radius:6px} .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff;border-radius:6px; box-shadow:inset 0 -3px 0 0 var(--teal)} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff; box-shadow:inset 0 -3px 0 0 var(--teal)} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--line);border-radius:0} .trust{background:var(--ink);color:#E9F2E4} .trust .ic{color:var(--teal)} .eyebrow::before{background:var(--red)} /* --- DARK-FIELD ACCENT: THE BRAND YELLOW AT FULL STRENGTH ----- A third distinct case in this run, and the simplest yet. Loganville dark accent -> invent a lighter tint Enfield secondary too dark -> lighten the secondary Johnstown the secondary IS light - brand #C0181D measures 10.37:1 on this near-black, so NO tint is invented and the true brand colour carries the dark fields. Brand red measures 2.04:1 here and is never used as text on dark. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F1F4EE} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:var(--teal)} .eyebrow-amber{color:var(--teal)} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:var(--teal)} .ftr-l b{color:var(--teal)} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--red)} blockquote{border-left-color:var(--red)} .ftr{background:var(--ink)} /* Oswald is CONDENSED and sets tall and narrow - it needs looser tracking and a slightly larger size than the previous grotesques, and its lowercase wants a touch more line-height. */ h1,h2,h3{letter-spacing:.004em} .hero h1{font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.12} /* --- HEADER LOCKUP SIZING ------------------------------------ Carried from the previous two builds and still required: an ancestor block sets `.brand img{height:40px}` partway down this file and beats the base rule on source order. THIS lockup is SIDE-BY-SIDE at 2.78:1 - much wider than the stacked ones - so it needs a SMALLER height than they did or it overruns the nav. Sized by width, not height. */ .brand img{height:42px} @media(max-width:900px){.brand img{height:38px}} @media(max-width:520px){.brand img{height:32px}} /* --- NEUTRALISE THE ANCESTOR .hero::before GLOW LAYER --------- THE REAL CAUSE of this build's washed-out hero, and worth recording because the mechanism is subtle. An ancestor build stacks a SECOND glow layer on `.hero::before` (three gradients, z-index:-1) on top of the `.hero` background. My stale-literal colour sweep recoloured it correctly and mechanically - and that is exactly the problem. In the ancestor the third layer was `linear-gradient(165deg, 0%, ...)`, where a mid-tone start reads as a subtle tint. Swapping that hex for a VERY LIGHT brand yellow turned the same gradient into a solid yellow wash across the whole upper hero. The sweep was syntactically perfect and semantically wrong: the ROLE of the colour changed even though the substitution was valid. Nothing automated catches that - only looking at it does. Note also the empty `.hero::before{}` rule further up the file: an earlier build clearly hit this and tried to blank it, but an empty declaration block has no effect. Override the properties. This build's `.hero` already carries its own base gradient, so ::before only needs one restrained highlight. */ .hero::before{ background:radial-gradient(680px 380px at 86% 8%,rgba(242,227,194,.07),transparent 60%)} /* ============================================================ HARDWARE CITY — New Britain, CT Deep pine header carrying the BRAND colour, green CTAs, red as the light-field accent, 20px corners and an ARCADE divider. Second Connecticut build in the chain, so the state carries none of the distinctiveness - the palette does. GREEN primary with a red accent is unused in this run, and the header is the first BRAND-COLOURED one: every previous build used a neutral dark or a neutral light. TOKEN NAMING IS INVERTED HERE: `--red` is the CTA token and holds the brand GREEN; `--teal` is the secondary token and holds the brand RED. The kit has always used `--red` as a role name rather than a hue. Read the values. ============================================================ */ /* --- header: deep pine, the brand family, with a red rule --- */ .hdr{background:var(--ink);border-bottom:3px solid var(--teal);box-shadow:none} .hdr .nav-l>li>a{color:#E9F2E4} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:#C0181D;height:3px} .hdr .sub-b{color:#E9F2E4} .hdr .burger span{background:#F0EADF} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#B3A596} /* --- hero: pine, with a restrained mint lift -------------- Opacity chosen against the LUMINANCE GAP, per the previous build: mint over pine is a moderate gap, so .10 here reads as the .07 yellow-over-black did. Both glow layers are set - see the ::before override below. --- */ .hero{background: radial-gradient(760px 420px at 86% 8%,rgba(168,201,240,.10),transparent 60%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- NEUTRALISE THE ANCESTOR .hero::before GLOW LAYER -------- Carried forward deliberately. An ancestor build stacks a SECOND glow layer on `.hero::before` (three gradients, z-index:-1) and a colour sweep will recolour it mechanically - which is exactly how the previous build shipped a washed-out hero into QA. The third layer there is a linear-gradient whose 0% stop becomes whatever the sweep substituted, and a light substitution turns a subtle tint into a solid wash. Override it explicitly every clone. --- */ .hero::before{ background:radial-gradient(680px 380px at 88% 6%,rgba(168,201,240,.08),transparent 62%)} /* --- SIGNATURE: arcade divider under the hero ---------------- A row of discrete SEMICIRCLES - a colonnade or arcade. Every other shape language in this run is taken: spikes, zigzag, rolling curves, asymmetric triangles, orthogonal blocks. Repeating half-circles is what is left, and it pairs with the 20px corners. Built to LOOP: the tile begins and ends exactly at the join between two arches, so there is no notch at the repeat. VERIFY ON SCREEN. Self-contained on purpose. THIRTEEN .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0 border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height MUST MATCH the background-size height or the tile is cropped. That height sits on a line SHARED with left/right/top/bottom - patch the BLOCK, not the line, then verify the computed height in the browser. */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:34px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:132px 34px; background-image:url("data:image/svg+xml;utf8,")} @media(max-width:760px){.hero::after{height:22px;background-size:86px 22px}} /* --- CTAs: brand GREEN, white text (6.61:1). 20px corners, the roundest in the run without being a pill. --- */ .btn,.btn-red,.btn-ghost,.btn-amber,.callbar a{border-radius:20px} .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff;border-radius:20px; box-shadow:none} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} /* red earns its keep as the accent on LIGHT fields, where it measures 4.95:1 on this paper */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--teal);border-radius:0} .trust{background:var(--ink);color:#E9F2E4} .trust .ic{color:#C0181D} .eyebrow::before{background:var(--teal)} /* --- DARK-FIELD ACCENT: A LIGHTENED PRIMARY, BECAUSE BOTH BRAND COLOURS FAIL. A fourth distinct case in this run: Loganville dark primary -> lighten the primary Enfield secondary too dark -> lighten the secondary Johnstown secondary already light -> use it RAW, no tint New Britain BOTH fail -> no raw option exists Brand green measures 2.86:1 on this pine and brand red 2.63:1, so neither could be used as text on dark at any size. The mint #C0181D clears 5.01:1 against the worst band. Measured against EVERY band including a glow-lightened sample. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F0EADF} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:#C0181D} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:#C0181D} .ftr-l b{color:#C0181D} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--teal)} blockquote{border-left-color:var(--teal)} .ftr{background:var(--ink)} /* Archivo is a sturdy normal-width grotesque after Oswald's condensed - it needs slightly tighter tracking and a smaller clamp ceiling than the condensed face did. */ h1,h2,h3{letter-spacing:-.016em} .hero h1{font-size:clamp(2.05rem,4vw,3.15rem);line-height:1.14} /* --- HEADER LOGO SIZING -------------------------------------- Back to a CIRCULAR BADGE after three lockup builds, so this reverts toward the badge sizing. An ancestor block still sets `.brand img{height:40px}` mid-cascade, so the override stays - but a square badge wants more height than the wide side-by-side lockup did, and less than the tall stacked ones. */ .brand img{height:54px} @media(max-width:900px){.brand img{height:46px}} @media(max-width:520px){.brand img{height:40px}} /* ============================================================ WHIP CITY — Westfield, MA TWO-TIER header (navy utility strip over a white nav bar), brand red CTAs, navy as the structural secondary, 4px corners, light steel paper, and a DOVETAIL divider. Navy + red was already used by two earlier builds in this chain, so the palette cannot differentiate. The STRUCTURE does: a two-tier header is new (every previous build was single-tier), and the DOVETAIL divider is a row of trapezoids - flat tops, angled sides - which is the one silhouette left after spikes, zigzag, rolling curves, asymmetric triangles, orthogonal rectangles and semicircles. TOKENS ARE CONVENTIONAL AGAIN: --red is the red, --teal is the navy. The previous build inverted them; that note does not apply here. ============================================================ */ /* --- TWO-TIER HEADER: navy utility strip above a white nav --- The markup already carries `.hdr-top`; earlier builds hid it or let it inherit. Here it is the signature. --- */ .hdr{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 1px 0 0 rgba(58,42,34,.04)} .hdr-top{display:block;background:var(--ink);color:#E9F2E4; border-bottom:3px solid var(--red);font-size:.78rem;letter-spacing:.01em} .hdr-top-in{display:flex;align-items:center;justify-content:space-between; gap:1rem;padding:.42rem 0} .hdr-top-l,.hdr-top-r{display:inline-flex;align-items:center;gap:.4rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hdr-top .ic{width:14px;height:14px;flex:none;color:#C0181D} .hdr-top a{color:#E9F2E4} .hdr-top a:hover{color:#fff} .hdr .nav-l>li>a{color:var(--tx)} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)} .hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px} .hdr .sub-b{color:var(--tx)} .hdr .burger span{background:var(--ink)} .hdr .logo-w b{color:var(--ink)} .hdr .logo-w span{color:var(--tx-2)} @media(max-width:900px){.hdr-top{display:none}} /* --- hero: deep navy with a restrained ice-blue lift --- */ .hero{background: radial-gradient(760px 420px at 86% 8%,rgba(242,227,194,.08),transparent 60%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- NEUTRALISE THE ANCESTOR .hero::before GLOW LAYER -------- Carried forward every clone. An ancestor build stacks a SECOND glow layer here (three gradients, z-index:-1) and a colour sweep recolours it mechanically - which is how a washed-out hero once reached QA. Override it explicitly. --- */ .hero::before{ background:radial-gradient(680px 380px at 88% 6%,rgba(242,227,194,.07),transparent 62%)} /* --- SIGNATURE: dovetail divider under the hero -------------- A row of TRAPEZOIDS: flat tops, angled sides, even gaps - joinery tabs, apt for a town built on toolmaking. Built to LOOP: the tile starts and ends mid-gap at the same height, so there is no notch at the repeat. VERIFY ON SCREEN. Self-contained on purpose. FOURTEEN .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0 border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height MUST MATCH the background-size height or the tile is cropped. That height sits on a line SHARED with left/right/top/bottom - patch the BLOCK, not the line, then verify the computed height in the browser. */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:32px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:168px 32px; background-image:url("data:image/svg+xml;utf8,")} @media(max-width:760px){.hero::after{height:22px;background-size:116px 22px}} /* --- CTAs: brand red, white text (5.98:1), 4px corners --- */ .btn,.btn-red,.btn-ghost,.btn-amber,.callbar a{border-radius:4px} .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff;border-radius:4px; box-shadow:none} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} /* navy is the structural secondary - card rules and tiles */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--teal);border-radius:0} .trust{background:var(--ink);color:#E9F2E4} .trust .ic{color:#C0181D} .eyebrow::before{background:var(--red)} /* --- DARK-FIELD ACCENT: a lightened NAVY, because red fails. A fifth distinct case in this run: Loganville dark primary -> lighten the primary Enfield secondary too dark -> lighten the secondary Johnstown secondary already light -> use it RAW New Britain BOTH fail -> lighten the primary Westfield red fails on navy, and the navy IS the field -> lighten the SECONDARY well past the field Brand red measures 1.68:1 against the lightest hero band. The ice blue #C0181D clears 5.05:1 against every band including a glow-lightened sample; #8FB8E8 measured 4.19 and was rejected. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F0EADF} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:#C0181D} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:#C0181D} .ftr-l b{color:#C0181D} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--red)} blockquote{border-left-color:var(--red)} .ftr{background:var(--ink)} /* Urbanist is a clean geometric grotesque - it sets a little wide, so pull the display tracking in slightly. */ h1,h2,h3{letter-spacing:-.02em} .hero h1{font-size:clamp(2.05rem,4vw,3.2rem);line-height:1.13} /* --- HEADER LOGO SIZING -------------------------------------- STACKED LOCKUP at 1.22:1 - taller than the side-by-side one and squarer than the previous stacked ones. An ancestor block still sets `.brand img{height:40px}` mid-cascade, so the override stays. --- */ .brand img{height:52px} @media(max-width:900px){.brand img{height:46px}} @media(max-width:520px){.brand img{height:38px}} /* ============================================================ GULF COAST — Largo, FL Ocean-teal header, BLUE CTAs, brand green as the structural secondary, 8px corners, warm sand paper, and a SCALLOP divider of overlapping arcs. First Florida build in this chain. The palette moves to an OCEAN TEAL ink - a hue not used by any previous build, which have run navy, slate, pine and near-black - and the CTA is BLUE, which no previous build has used either (they have been red, green or navy). The SCALLOP divider is overlapping arcs, reading as both roof tile and water. It is distinct from New Britain's arcade because those semicircles sit discrete and separate; these overlap. ============================================================ */ /* --- header: ocean teal. Reverting to single-tier: the previous build's two-tier strip was its own signature and this build differentiates on hue and motif instead. --- */ .hdr{background:var(--ink);border-bottom:3px solid var(--teal);box-shadow:none} .hdr-top{display:none} .hdr .nav-l>li>a{color:#E9F2E4} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:#C0181D;height:3px} .hdr .sub-b{color:#E9F2E4} .hdr .burger span{background:#F0EADF} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#B3A596} /* --- hero: ocean teal, TIGHTENED gradient with a WEAK aqua glow. The gradient ceiling and the glow strength were both tuned by measurement, not by eye: with the wider gradient this build started from, NO accent colour cleared 4.5 against the glow-lightened band without going essentially white. Pulling the top band down and the glow to .08 let the brand-adjacent aqua work instead. --- */ .hero{background: radial-gradient(720px 400px at 86% 8%,rgba(242,227,194,.08),transparent 60%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- NEUTRALISE THE ANCESTOR .hero::before GLOW LAYER -------- Carried forward every clone. An ancestor build stacks a SECOND glow layer here (three gradients, z-index:-1) and a colour sweep recolours it mechanically - which is how a washed-out hero once reached QA. Override it explicitly. --- */ .hero::before{ background:radial-gradient(680px 380px at 88% 6%,rgba(242,227,194,.06),transparent 62%)} /* --- SIGNATURE: scallop divider under the hero --------------- A row of OVERLAPPING arcs - barrel tile, or water. The overlap is what separates it from the discrete semicircle arcade of an earlier build. Built to LOOP: the tile begins and ends mid-arc at the same height, so there is no notch at the repeat. VERIFY ON SCREEN. Self-contained on purpose. FIFTEEN .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0 border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height MUST MATCH the background-size height or the tile is cropped. That height sits on a line SHARED with left/right/top/bottom - patch the BLOCK, not the line, then verify the computed height in the browser. */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:30px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:120px 30px; background-image:url("data:image/svg+xml;utf8,")} @media(max-width:760px){.hero::after{height:20px;background-size:80px 20px}} /* --- CTAs: brand BLUE, white text (8.11:1), 8px corners. No previous build in this chain has used a blue CTA fill. --- */ .btn,.btn-red,.btn-ghost,.btn-amber,.callbar a{border-radius:8px} .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red{ background:var(--red);border-color:var(--red);color:#fff;border-radius:8px; box-shadow:none} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} /* brand green is the structural secondary - card rules and ticks */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--teal);border-radius:0} .trust{background:var(--ink);color:#E9F2E4} .trust .ic{color:#C0181D} .eyebrow::before{background:var(--teal)} /* --- DARK-FIELD ACCENT: a light AQUA, and the gradient had to move to make it work. A sixth distinct case: Loganville dark primary -> lighten the primary Enfield secondary too dark -> lighten the secondary Johnstown secondary already light -> use it RAW New Britain both brand colours fail -> lighten the primary Westfield red fails, navy IS field-> lighten the secondary Largo BOTH fail AND nothing cleared the glow band -> tighten the GRADIENT as well as the accent Brand blue measures 1.12:1 and brand green 1.01:1 against the glow-lightened band of the gradient this build started from - no tint of either would have worked without going white. The fix was to pull the gradient ceiling down and the glow to .08, after which #C0181D clears 5.42:1 against every band. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F0EADF} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#C0181D} .eyebrow-amber{color:#C0181D} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:#C0181D} .ftr-l b{color:#C0181D} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--teal)} blockquote{border-left-color:var(--teal)} .ftr{background:var(--ink)} /* Plus Jakarta Sans is a touch wide and quite round */ h1,h2,h3{letter-spacing:-.022em} .hero h1{font-size:clamp(2.05rem,4vw,3.15rem);line-height:1.14} /* --- HEADER LOGO SIZING -------------------------------------- Back to a CIRCULAR BADGE. An ancestor block still sets `.brand img{height:40px}` mid-cascade, so the override stays - a square badge wants more height than a wide lockup. --- */ .brand img{height:54px} @media(max-width:900px){.brand img{height:46px}} @media(max-width:520px){.brand img{height:40px}} /* ============================================================ MOBILE NAV DRAWER — CONTRAST FIX ============================================================ *** LATENT INHERITED DEFECT, PRESENT IN EVERY DARK-HEADER BUILD IN THIS CHAIN, NOT JUST THIS ONE. *** Each dark-header clone adds a block like: .hdr .nav-l>li>a{color:#E9F2E4} .hdr .nav-l>li>a[aria-current]{color:#fff} written for the dark header BAR, and written at TOP LEVEL so it applies at every viewport width. At <=1100px `.nav` becomes a fixed drawer with `background:var(--paper)` — i.e. WHITE. The base stylesheet correctly sets `.nav-l>li>a{color:var(--ink-2)}` inside that breakpoint, but the clone rule carries the `.hdr` prefix and therefore HIGHER SPECIFICITY (0,3,1 vs 0,2,1), so it wins regardless of the media query. Result: pale blue links on white — nearly invisible — and the CURRENT page, which resolves to `color:#fff`, is COMPLETELY invisible. Three of these blocks are now stacked in this file, so scoping only the newest one is not enough; the older two still cascade. This block must therefore OVERRIDE ALL OF THEM, sit LAST, and carry at least the same specificity. >>> A DARK-HEADER COLOUR RULE MUST BE SCOPED TO THE DESKTOP BREAKPOINT. The header bar is dark; the mobile drawer that shares its markup is not. <<< ============================================================ */ @media(max-width:1100px){ .hdr .nav-l>li>a, .hdr .nav-l>li>a:hover{color:var(--ink-2)} .hdr .nav-l>li>a[aria-current], .hdr .nav-l>li>a[aria-current="page"]{color:var(--red)} .hdr .nav-l>li>a[aria-current]::after, .hdr .nav-l>li>a[aria-current="page"]::after{display:none;background:none} .hdr .sub-b{color:var(--tx-2)} .hdr .sub-b::after{border-right-color:var(--tx-2);border-bottom-color:var(--tx-2)} .hdr .sub a{color:var(--ink-2)} .hdr .sub a:hover{color:var(--red)} } /* ============================================================ CLOCKMAKER — Bristol, CT LIGHT stone header, deep navy hero, GOLD CTA fill with a NAVY label, 14px corners, and a TICK-MARK divider. *** GOLD IS A FILL, NOT A TEXT COLOUR. *** #C0181D on the stone paper measures 1.53:1. It must never be used for text, icons, eyebrow ticks or card rules on a light field - those take navy or the blue secondary. Gold is only safe as a FILL carrying a navy label, or as an accent on the dark hero, where it measures 5.54:1 raw. ============================================================ */ /* --- header: LIGHT stone, navy type. Reverting from the previous build's dark header; the gold accent rule carries the brand instead. --- */ .hdr{background:var(--bg);border-bottom:3px solid var(--red);box-shadow:none} .hdr-top{display:none} .hdr .nav-l>li>a{color:var(--ink-2)} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:var(--ink)} .hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px} .hdr .sub-b{color:var(--tx-2)} .hdr .burger span{background:var(--ink)} .hdr .logo-w b{color:var(--ink)} .hdr .logo-w span{color:var(--tx-2)} /* --- hero: deep navy with a WEAK gold glow. Gold over navy is a wide luminance gap, so the glow stays low (.10) - the same scaling rule that keeps a bright accent from washing the panel. --- */ .hero{background: radial-gradient(700px 400px at 84% 10%,rgba(242,227,194,.08),transparent 60%), linear-gradient(158deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} /* --- NEUTRALISE THE ANCESTOR .hero::before GLOW LAYER -------- Carried forward every clone. An ancestor build stacks a SECOND glow layer here and a colour sweep recolours it mechanically, which is how a washed-out hero once reached QA. --- */ .hero::before{ background:radial-gradient(660px 380px at 86% 8%,rgba(242,227,194,.06),transparent 62%)} /* --- SIGNATURE 1: MIRRORED HERO ------------------------------ Image LEFT, copy RIGHT on desktop. Every previous build in this chain runs copy-left / image-right, so this reads as a different layout at a glance rather than a recolour. Scoped to min-width:901px, so THE MOBILE STACK IS UNTOUCHED and still matches every previous build in the chain - media first, then copy, then the call buttons. Verified side by side against the previous build at 390px: identical offsets, direction:ltr. Only the desktop two-column order flips, so nothing about the mobile conversion path moves. */ @media(min-width:901px){ /* The grid element is `.hero-in`, NOT `.hero-grid`. I wrote this rule against `.hero-grid` first and it styled NOTHING - the same failure as an earlier build in this chain, where a stylesheet rule referenced markup that did not exist and nobody noticed for several clones. >>> VERIFY THE SELECTOR AGAINST THE DOM BEFORE TRUSTING THE RULE. <<< `.hero-in` also carries `.wrap`, whose `padding-inline:var(--pad)` sets both sides equally, so flipping direction cannot unbalance it. */ .hero-in{direction:rtl} .hero-in>*{direction:ltr} } /* --- SIGNATURE 2: TICK-MARK divider -------------------------- Alternating tall and short vertical strokes - a clock face laid flat. Bristol was the clockmaking capital of America and the museum is still here. Every previous divider in this chain has been a filled SILHOUETTE edge (triangles, arcs, trapezoids, ridgelines). This one is LINEAR STROKES on a solid base, which is a different kind of mark entirely. Built to LOOP: the tile is 96px wide with strokes at a regular 12px pitch, so the repeat lands mid-gap. VERIFY ON SCREEN. Self-contained on purpose. SIXTEEN .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0 border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height MUST MATCH the background-size height or the tile is cropped. That height sits on a line SHARED with left/right/top/bottom - patch the BLOCK, not the line, then verify the computed height in the browser. */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:26px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:96px 26px; background-image:url("data:image/svg+xml;utf8,")} @media(max-width:760px){.hero::after{height:18px;background-size:66px 18px}} /* --- SIGNATURE 3: GOLD CTA WITH A NAVY LABEL ----------------- *** THE FIRST LIGHT CTA FILL IN THIS CHAIN. *** Every previous build filled its CTA with a dark colour and put white on it. Here white measures 1.72:1 against the gold and navy measures 8.02:1, so the label colour has to be overridden EVERYWHERE the button appears - hero, dark sections, cards and the sticky mobile call bar - because the inherited rules all assume a dark fill and hardcode #fff. */ .btn,.btn-red,.btn-ghost,.btn-amber,.callbar a{border-radius:14px} .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red,.callbar a{ background:var(--red);border-color:var(--red);color:var(--ink);border-radius:14px; box-shadow:none;font-weight:700} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:var(--ink)} .btn-red .ic,.callbar a .ic,.hero .btn-red .ic,.sec-dark .btn-red .ic{color:var(--ink)} .btn-amber{background:var(--red);border-color:var(--red);color:var(--ink);box-shadow:none} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk);color:var(--ink)} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} /* blue secondary carries the structural marks on LIGHT fields, because gold is unreadable there (1.53:1) */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--teal);border-radius:0} .eyebrow{color:var(--teal)} .eyebrow::before{background:var(--teal)} .trust{background:var(--ink);color:#E9F2E4} .trust .ic{color:var(--red)} /* --- DARK-FIELD ACCENT: gold used RAW. A seventh distinct case, and only the second where the brand colour needed no adjustment at all: Loganville dark primary -> lighten the primary Enfield secondary too dark -> lighten the secondary Johnstown secondary already light -> use it RAW New Britain both brand colours fail -> lighten the primary Westfield red fails, navy IS field-> lighten the secondary Largo both fail, nothing cleared the glow band -> tighten the GRADIENT Bristol gold already light -> use it RAW (5.54:1) The catch on this build is the OPPOSITE of the usual one: gold is fine on the dark hero and unusable on the light paper, so the accent rules have to be scoped to dark fields only. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F7EEDA} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:var(--red)} .eyebrow-amber{color:var(--red)} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:var(--red)} .ftr-l b{color:var(--red)} .sec-dark{background:linear-gradient(158deg,#27591F,var(--ink))} .big-q{border-left-color:var(--teal)} blockquote{border-left-color:var(--teal)} .ftr{background:var(--ink)} /* Sora runs wide and geometric; pull the display tracking in */ h1,h2,h3{letter-spacing:-.03em} .hero h1{font-size:clamp(2rem,3.9vw,3.05rem);line-height:1.15} /* --- HEADER LOGO SIZING -------------------------------------- A CIRCULAR BADGE again. An ancestor block still sets `.brand img{height:40px}` mid-cascade, so the override stays - a square badge wants more height than a wide lockup. --- */ .brand img{height:54px} @media(max-width:900px){.brand img{height:46px}} @media(max-width:520px){.brand img{height:40px}} /* ============================================================ TWO RANGES — Mt Pleasant, MI DEEP BLUE header carrying a LIGHT logo variant, deep blue hero, GREEN CTA with a white label, 16px corners, and a TWO-TONE LAYERED PEAK divider. NOTE: `--red` holds the GREEN and `--teal` holds the BLUE on this build. They are ROLE names, not hues. Read the values. ============================================================ */ /* --- header: DEEP BLUE with a green rule, carrying the LIGHT logo variant. This lockup has NO white interior disc (unlike the circular badges of recent builds), so the full-colour file would vanish here - its wordmark and its graphic are both blue. --- */ .hdr{background:#3A2A22;border-bottom:3px solid var(--red);box-shadow:none} .hdr-top{display:none} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#E8D9C4} .hdr .burger span{background:#fff} /* --- DESKTOP-ONLY nav colours ------------------------------ *** SCOPED DELIBERATELY. *** A dark header shares its markup with the MOBILE DRAWER, which has `background:var(--paper)` - white. Writing these light colours at top level (as several earlier builds in this chain did) makes them win at every width via the `.hdr` prefix's higher specificity, and the drawer becomes pale-on-white with the CURRENT PAGE, which resolves to #fff, completely invisible. That defect shipped on three builds before it was caught by a client looking at their phone. It is prevented here by scoping from the start, and the explicit mobile block below is kept as a belt-and-braces override because several stacked ancestor rules still cascade. --- */ @media(min-width:1101px){ .hdr .nav-l>li>a{color:#FBE8E8} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:var(--red);height:3px} .hdr .sub-b{color:#E8D9C4} } @media(max-width:1100px){ .hdr .nav-l>li>a, .hdr .nav-l>li>a:hover{color:var(--ink-2)} .hdr .nav-l>li>a[aria-current]{color:var(--red)} .hdr .nav-l>li>a[aria-current]::after{display:none} .hdr .sub-b{color:var(--tx-2)} .hdr .sub a{color:var(--ink-2)} } /* --- hero: deep blue, weak green glow --- */ .hero{background: radial-gradient(720px 420px at 82% 12%,rgba(242,227,194,.08),transparent 60%), linear-gradient(160deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} .hero::before{ background:radial-gradient(680px 390px at 84% 10%,rgba(242,227,194,.06),transparent 62%)} /* --- SIGNATURE: TWO-TONE LAYERED PEAK divider ---------------- *** THE FIRST MULTI-COLOUR DIVIDER IN THIS CHAIN. *** Every previous one has been a single flat silhouette cut in one colour. This stacks a MID-BLUE range behind a PAPER range, offset by half a period, so it reads as depth rather than as an edge. It also echoes the client's logo. Built to LOOP: tile is 120px wide with a 60px peak period, so two full peaks per tile and the repeat lands on a peak base. Self-contained on purpose. SEVENTEEN .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0 border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height MUST MATCH the background-size height or the tile is cropped. That height sits on a line SHARED with left/right/top/bottom - patch the BLOCK, not the line, then verify the computed height in the browser. --- */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:34px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:120px 34px; background-image:url("data:image/svg+xml;utf8,")} @media(max-width:760px){.hero::after{height:24px;background-size:84px 24px}} /* --- GREEN CTA, white label (5.41:1). Back to a dark fill after the previous build's light gold, so the inherited #fff labels are correct again - but the previous build OVERRODE them to navy, and those overrides must be undone. --- */ .btn,.btn-red,.btn-ghost,.btn-amber,.callbar a{border-radius:16px} .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red,.callbar a{ background:var(--red);border-color:var(--red);color:#fff;border-radius:16px; box-shadow:none;font-weight:600} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-red .ic,.callbar a .ic,.hero .btn-red .ic,.sec-dark .btn-red .ic{color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk);color:#fff} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} /* structural marks on LIGHT fields use the blue secondary */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--teal);border-radius:0} .eyebrow{color:var(--teal)} .eyebrow::before{background:var(--teal)} .trust{background:var(--ink);color:#E9F2E4} .trust .ic{color:#F2E3C2} /* --- DARK-FIELD ACCENT: green LIGHTENED to #F2E3C2. An eighth distinct case, and back to the commonest one: Loganville dark primary -> lighten the primary Enfield secondary too dark -> lighten the secondary Johnstown secondary already light -> use it RAW New Britain both brand colours fail -> lighten the primary Westfield red fails, navy IS field-> lighten the secondary Largo both fail, nothing cleared the glow band -> tighten the GRADIENT Bristol gold already light -> use it RAW Mt Pleasant brand green 1.55:1 -> LIGHTEN to #F2E3C2 Brand green measures 1.55:1 on the hero - one of the worst raw readings in the series. #F2E3C2 clears every band including the glow-lightened sample at 5.30:1. --- */ .hero .eyebrow,.sec-dark .eyebrow{color:#F7EEDA} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#F2E3C2} .eyebrow-amber{color:#F2E3C2} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:#F2E3C2} .ftr-l b{color:#F2E3C2} .sec-dark{background:linear-gradient(160deg,#27591F,var(--ink))} .big-q{border-left-color:var(--teal)} blockquote{border-left-color:var(--teal)} .ftr{background:var(--ink)} /* Space Grotesk is wide and geometric; pull display tracking in */ h1,h2,h3{letter-spacing:-.025em} .hero h1{font-size:clamp(2rem,3.85vw,3rem);line-height:1.16} /* --- HEADER LOGO SIZING -------------------------------------- A STACKED LOCKUP at roughly 1.05:1, so it wants height rather than width. An ancestor block still sets `.brand img{height:40px}` mid-cascade, so this override stays on every clone. --- */ .brand img{height:50px} @media(max-width:900px){.brand img{height:44px}} @media(max-width:520px){.brand img{height:38px}} /* --- REVERT THE PREVIOUS BUILD'S MIRRORED HERO --------------- The clone source made image-left / copy-right its signature layout. It survived the sweep because it is pure CSS with no place name in it, so nothing flagged it - and it would have shipped here, quietly undoing that build's differentiation AND this one's. >>> A STRUCTURAL RULE FROM THE PREVIOUS BUILD IS INVISIBLE TO EVERY TEXT-BASED CHECK. Diff the theme block's STRUCTURAL rules, not just its colours, on every clone. <<< Restored to the chain-standard copy-left / image-right. */ @media(min-width:901px){ .hero-in{direction:ltr} .hero-in>*{direction:ltr} } /* --- STACKED LOCKUP NEEDS MORE HEIGHT THAN A BADGE ----------- At 50px the three-line wordmark under the graphic renders at roughly 10px and stops being readable. A circular badge is legible small because it is one mark; a lockup is not. */ .brand img{height:62px} @media(max-width:900px){.brand img{height:54px}} @media(max-width:520px){.brand img{height:46px}} /* ============================================================ FLOOD GAUGE — Bloomsburg, PA DEEP RED header, deep blue hero, RED CTA with a white label, GOLD on dark fields, 12px corners, and a STEPPED GAUGE divider. *** THE FIRST TRI-COLOUR SYSTEM IN THIS CHAIN. *** Every previous build ran two brand colours; this logo carries three. NOTE: `--red` genuinely holds RED on this build and `--teal` holds a BLUE. After several builds of inverted tokens that is worth stating rather than assuming - read the values anyway. *** GOLD IS A DARK-FIELD COLOUR ONLY. *** Brand gold measures 1.93:1 on the pale slate paper. It may never carry text, icons or rules on a light field; those take the blue secondary or the red. Gold appears on the hero, the dark sections, the footer and the deep red header rule. ============================================================ */ /* --- header: DEEP RED, white nav, gold rule ------------------ The first red header in the chain. White on this red measures 7.98:1 and the gold rule 5.36:1. The badge logo needs NO light variant here: it carries an intact white interior disc, which separates it from the red exactly as it would from a dark blue or a pale paper. --- */ .hdr{background:#3A2A22;border-bottom:3px solid #F2E3C2;box-shadow:none} .hdr-top{display:none} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#E8D9C4} .hdr .burger span{background:#fff} /* --- DESKTOP-ONLY nav colours ------------------------------ *** SCOPED DELIBERATELY, as on the previous dark-header build. A dark header shares its markup with the MOBILE DRAWER, which has `background:var(--paper)`. Writing these light colours at top level makes them win at every width through the `.hdr` prefix's higher specificity, and the drawer becomes pale-on-white with the CURRENT PAGE - which resolves to #fff - completely invisible. That shipped on three builds in this family before a client caught it on their phone. --- */ @media(min-width:1101px){ .hdr .nav-l>li>a{color:#FBE8E8} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:#F2E3C2;height:3px} .hdr .sub-b{color:#E8D9C4} } @media(max-width:1100px){ .hdr .nav-l>li>a, .hdr .nav-l>li>a:hover{color:var(--ink-2)} .hdr .nav-l>li>a[aria-current]{color:var(--red)} .hdr .nav-l>li>a[aria-current]::after{display:none} .hdr .sub-b{color:var(--tx-2)} .hdr .sub a{color:var(--ink-2)} } /* --- hero: deep blue, TIGHTENED gradient -------------------- The gradient itself is a contrast lever, not just decoration. With a lighter top stop (#155A93) NOTHING cleared 4.5:1 - brand gold managed 3.08 and even a much-lightened gold only 3.92. Darkening the top stop to #27591F lets #F2E3C2 clear every band at 5.23:1 including the glow-lightened sample. Second time in this chain the gradient had to move. --- */ .hero{background: radial-gradient(720px 420px at 80% 12%,rgba(242,227,194,.08),transparent 60%), linear-gradient(162deg,#27591F 0%,var(--ink) 55%,#12300F 100%)} .hero::before{ background:radial-gradient(680px 390px at 82% 10%,rgba(242,227,194,.06),transparent 62%)} /* --- SIGNATURE: STEPPED GAUGE divider ------------------------ Solid blocks of stepped height, reading as marks on a river gauge. Bloomsburg floods when the gauge at the Town reaches 19 feet and the Town publishes its crest history in feet, so the motif is the local fact rather than decoration. Every previous divider in this chain has been triangles, arcs, trapezoids, ridgelines, thin ticks or layered peaks. Solid stepped blocks are none of those. Built to LOOP: the tile is 132px wide and the step sequence returns to its starting height at the tile edge. Self-contained on purpose. EIGHTEEN .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0 border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height MUST MATCH the background-size height or the tile is cropped. That height sits on a line SHARED with left/right/top/bottom - patch the BLOCK, not the line, then verify the computed height in the browser. --- */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:30px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:132px 30px; background-image:url("data:image/svg+xml;utf8,")} @media(max-width:760px){.hero::after{height:22px;background-size:96px 22px}} /* --- RED CTA, white label (6.23:1) -------------------------- Back to a dark fill, so the inherited #fff labels are correct again. Two builds ago they were overridden to navy for a light gold fill; those overrides are undone here. --- */ .btn,.btn-red,.btn-ghost,.btn-amber,.callbar a{border-radius:12px} .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red,.callbar a{ background:var(--red);border-color:var(--red);color:#fff;border-radius:12px; box-shadow:none;font-weight:600} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover,.callbar .btn-red:hover{ background:var(--red-dk);border-color:var(--red-dk);color:#fff} .btn-red .ic,.callbar a .ic,.hero .btn-red .ic,.sec-dark .btn-red .ic{color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk);color:#fff} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} /* structural marks on LIGHT fields use the BLUE secondary - gold is 1.93:1 on this paper and must never appear there */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--teal);border-radius:0} .eyebrow{color:var(--teal)} .eyebrow::before{background:var(--teal)} .trust{background:var(--ink);color:#E9F2E4} .trust .ic{color:#F2E3C2} /* --- DARK-FIELD ACCENT: gold LIGHTENED to #F2E3C2, and the GRADIENT TIGHTENED as well. A ninth distinct case, and only the second needing both moves at once: Loganville dark primary -> lighten the primary Enfield secondary too dark -> lighten the secondary Johnstown secondary already light -> use it RAW New Britain both brand colours fail -> lighten the primary Westfield red fails, navy IS field-> lighten the secondary Largo both fail, nothing cleared the glow band -> tighten the GRADIENT Bristol gold already light -> use it RAW Mt Pleasant brand green 1.55:1 -> lighten to #8FE09B Bloomsburg gold 3.08 AND a light gold only 3.92 -> LIGHTEN *AND* TIGHTEN --- */ .hero .eyebrow,.sec-dark .eyebrow{color:#F7EEDA} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#F2E3C2} .eyebrow-amber{color:#F2E3C2} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:#F2E3C2} .ftr-l b{color:#F2E3C2} .sec-dark{background:linear-gradient(162deg,#27591F,var(--ink))} .big-q{border-left-color:var(--teal)} blockquote{border-left-color:var(--teal)} .ftr{background:var(--ink)} /* Zilla Slab is a SLAB SERIF - the first serif display in this chain since the second build. It sets wider and taller than a grotesque, so the display scale comes down slightly and the tracking stays near neutral rather than tightening. */ h1,h2,h3{letter-spacing:-.012em} .hero h1{font-size:clamp(1.95rem,3.7vw,2.9rem);line-height:1.18} /* --- HEADER LOGO SIZING -------------------------------------- A CIRCULAR BADGE, so height rather than width, and it stays legible smaller than the previous build's stacked lockup did. An ancestor block still sets `.brand img{height:40px}` mid-cascade, so this override stays on every clone. --- */ .brand img{height:54px} @media(max-width:900px){.brand img{height:46px}} @media(max-width:520px){.brand img{height:40px}} /* ============================================================ SONORAN — Maricopa, AZ ESPRESSO header #3A2A22, deep GREEN hero, RED CTA with a white label, SAND on dark fields, 24px corners, and a DIAMOND BAND divider on warm linen paper. `--red` is red and `--teal` holds a GREEN on this build. Read the values regardless - several builds inverted them. *** BRAND GREEN IS A DARK-FIELD COLOUR ONLY. *** The logo's green measures 1.92:1 on this paper and may never carry text on a light field. Light-field marks use the DESERT GREEN #3E7D33 (4.59:1). The bright logo green appears only on the espresso header rule, where it reads 6.52:1. ============================================================ */ /* --- header: ESPRESSO, white nav, brand-green rule ---------- The first warm-dark header in the chain. White on this brown measures 13.69:1 and the brand-green rule 6.52:1. The badge logo needs NO light variant - it carries an intact white interior disc. --- */ .hdr{background:#3A2A22;border-bottom:3px solid #94C150;box-shadow:none} .hdr-top{display:none} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#E8D9C4} .hdr .burger span{background:#fff} /* --- DESKTOP-ONLY nav colours ------------------------------ *** SCOPED DELIBERATELY. *** A dark header shares its markup with the MOBILE DRAWER, which has `background:var(--paper)`. At top level these light colours win at every width through the `.hdr` prefix's specificity and the drawer becomes pale-on-white, with the CURRENT PAGE - which resolves to #fff - completely invisible. That shipped on three builds in this family before a client caught it on their phone. --- */ @media(min-width:1101px){ .hdr .nav-l>li>a{color:#EFE4D4} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:#94C150;height:3px} .hdr .sub-b{color:#E8D9C4} } @media(max-width:1100px){ .hdr .nav-l>li>a, .hdr .nav-l>li>a:hover{color:var(--ink)} .hdr .nav-l>li>a[aria-current]{color:var(--red)} .hdr .nav-l>li>a[aria-current]::after{display:none} .hdr .sub-b{color:var(--tx-2)} .hdr .sub a{color:var(--ink)} } /* --- hero: DEEP GREEN, first green hero in the chain -------- Top stop chosen by measurement, not taste. At #2E6B27 the sand accent managed only 4.36:1; #27591F lifts it to 5.47:1 across every band including the glow-lightened sample. --- */ .hero{background: radial-gradient(720px 420px at 78% 12%,rgba(242,227,194,.08),transparent 60%), linear-gradient(160deg,#27591F 0%,#1F4A1C 55%,#12300F 100%)} .hero::before{ background:radial-gradient(680px 390px at 80% 10%,rgba(242,227,194,.06),transparent 62%)} /* --- SIGNATURE: DIAMOND BAND divider ------------------------ A row of lozenges on a baseline, referencing Southwestern textile banding. Every previous divider in this chain has been triangles, arcs, trapezoids, ridgelines, thin ticks, layered peaks or stepped blocks - never diamonds. Built to LOOP: the tile is 120px and the diamond sequence returns to its start at the tile edge. Self-contained on purpose. NINETEEN .hero::after rules are now stacked in this file, one per build in the clone chain, and any property this rule does not reset leaks through: top:auto - the base rule's inset:0 pins top:0 border-radius:0 - or an earlier arc scoop curves it opacity:1 - or an earlier quilt rule's .95 applies AND the element height MUST MATCH the background-size height or the tile is cropped. --- */ .hero::after{ content:"";position:absolute; left:0;right:0;top:auto;bottom:0;height:30px; z-index:2;opacity:1;border-radius:0; background-repeat:repeat-x; background-position:bottom left; background-size:132px 30px; background-image:url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ \ ")} @media(max-width:760px){.hero::after{height:22px;background-size:96px 22px}} /* --- RED CTA, white label (6.20:1) -------------------------- *** THE SAND RING IS A CONTRAST FIX, NOT DECORATION. *** WCAG 1.4.11 wants 3:1 between a control's boundary and the surface behind it. The red fill measures just 1.65:1 against this green hero, so as a SHAPE the button barely exists even though its LABEL is perfectly legible at 6.20:1. That gap is real and it is not new: on the previous build a red CTA sat at 1.71:1 on its blue hero, and the one before that at 2.06:1. Every build was checking label-on-button and none was checking button-on-field. The 2px sand ring supplies the boundary: 8.05:1 against the hero and 4.88:1 against the red fill itself. On light fields no ring is needed - red on linen is already 5.67:1. --- */ .btn,.btn-red,.btn-ghost,.btn-amber,.callbar a{border-radius:24px} .btn-red, .hero .btn-red,.sec-dark .btn-red,.callbar .btn-red,.callbar a{ background:var(--red);border-color:var(--red);color:#fff;border-radius:24px; box-shadow:none;font-weight:600} .hero .btn-red,.sec-dark .btn-red{border:2px solid #F2E3C2} .btn-red:hover, .hero .btn-red:hover,.sec-dark .btn-red:hover{ background:var(--red-dk);border-color:#F2E3C2;color:#fff} .btn-red .ic,.callbar a .ic,.hero .btn-red .ic,.sec-dark .btn-red .ic{color:#fff} .btn-amber{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none} .btn-amber:hover{background:var(--red-dk);border-color:var(--red-dk);color:#fff} .hero .btn-ghost,.sec-dark .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff} /* structural marks on LIGHT fields use DESERT GREEN - the logo's brand green is 1.92:1 on this paper and never appears as a light-field mark */ .card::before,.svc-c::before{ content:"";position:absolute;top:0;left:0;width:4px;height:100%; background:var(--teal);border-radius:0} .eyebrow{color:var(--teal)} .eyebrow::before{background:var(--teal)} .trust{background:var(--ink);color:#F0EADF} .trust .ic{color:#F2E3C2} /* --- DARK-FIELD ACCENT: warm SAND #F2E3C2 ------------------- Tenth distinct accent case in the chain. The logo's own green could not be made to work on a green hero at any lightness that still read as the brand colour, so the accent moves to the third colour in the desert palette instead. --- */ .hero .eyebrow,.sec-dark .eyebrow{color:#F7EEDA} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#F2E3C2} .eyebrow-amber{color:#F2E3C2} .hero h1 em, .hero .hero-ul .ic,.hero .hero-fine .ic, .sec-dark .ticks .ic,.sec-dark .card-ic, .hero .ic,.sec-dark .ic{color:#F2E3C2} .ftr-l b{color:#F2E3C2} .sec-dark{background:linear-gradient(160deg,#27591F,#1F4A1C)} .big-q{border-left-color:var(--teal)} blockquote{border-left-color:var(--teal)} .ftr{background:var(--ink)} /* --- STRUCTURAL FIRST: CENTRED SECTION HEADINGS ------------- Every previous build in this chain left-aligns section headings. Centring them - with a short centred rule under the h2 - changes the page rhythm noticeably while leaving the conversion structure untouched. *** SELECTOR VERIFIED AGAINST THE DOM. *** The class is `.sec-head`, NOT `.sec-h`, and it wraps the eyebrow, h2 and lede in an inner
. Written against the wrong name these rules match nothing and fail silently - the stylesheet looks right and the page is simply unchanged. Scoped to section headers only: the HERO stays copy-left, and body prose, cards and article text stay left-aligned, because centred running text is harder to read. --- */ .sec-head{display:block;text-align:center} .sec-head>div{margin-left:auto;margin-right:auto;max-width:760px} .sec-head .eyebrow{justify-content:center} .sec-head h2::after{ content:"";display:block;width:56px;height:3px;border-radius:2px; background:var(--teal);margin:14px auto 0} .sec-dark .sec-head h2::after,.hero .sec-head h2::after{background:#F2E3C2} .sec-head .lede{margin-left:auto;margin-right:auto} .sec-head .btn,.sec-head .sec-cta{margin-left:auto;margin-right:auto} @media(max-width:760px){.sec-head>div{max-width:none}} /* Epilogue sets tighter and more geometric than the previous build's slab, so the display scale comes up slightly and the tracking tightens. */ h1,h2,h3{letter-spacing:-.022em} .hero h1{font-size:clamp(2rem,3.9vw,3.05rem);line-height:1.14} /* --- HEADER LOGO SIZING -------------------------------------- A CIRCULAR BADGE, so height rather than width. An ancestor block still sets `.brand img{height:40px}` mid-cascade, so this override stays on every clone. --- */ .brand img{height:56px} @media(max-width:900px){.brand img{height:48px}} @media(max-width:520px){.brand img{height:42px}}