/* ========================================================================== New Britain Dumpster Rental Guys — styles.css Theme: "Hardware City" — brand GREEN #146B31 + brand RED #D42026 on deep pine #12341F, over bright cream paper #FBF9F5 Type: Archivo (display) + Source Sans 3 (text) Motif: arcade divider (semicircles) + 20px corners NOTE: `--red` holds the GREEN and `--teal` holds the RED on this build. The kit uses those as ROLE names, not hues. Read the values. 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:#12341F; /* dark anchor (slate) */ --red:#146B31; /* brand primary / CTA */ --teal:#D42026; /* accent (cypress) */ --ink-2:#1A472A; --ink-3:#265C39; --red-dk:#0F5325; --red-lt:#E6F4EA; --teal-dk:#A8171C; --teal-lt:#FCE9EA; --steel:#8F8F8F; --tx:#1B211D; --tx-2:#555D57; --tx-3:#868D88; --line:#E1E5E0; --line-2:#EDF0EB; --bg:#FBF9F5; /* warm bone paper, not white */ --bg-2:#F3F1EB; --bg-3:#E6E3DA; --paper:#FFFFFF; --ff-d:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --ff-t:'Source Sans 3',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; --r:20px; /* card radius — hard-edged industrial */ --r-s:14px; /* button radius */ --wrap:1180px; --sh:0 1px 2px rgba(18,52,31,.05),0 10px 26px -16px rgba(18,52,31,.20); --sh-lg:0 2px 5px rgba(18,52,31,.07),0 26px 50px -22px rgba(18,52,31,.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(20,107,49,.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:#146B31} .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(20,107,49,.85)} .btn-red:hover{background:var(--red-dk);color:#fff} .btn-amber{background:var(--teal);color:#fff;box-shadow:0 6px 16px -8px rgba(143,224,166,.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:#146B31} .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(143,224,166,.16),transparent 62%), radial-gradient(600px 420px at 2% 92%,rgba(143,224,166,.18),transparent 64%), linear-gradient(165deg,#8FE0A6 0%,#12341F 60%,#0B2214 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:#146B31} .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:#146B31;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:#146B31} .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:#173F26; 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:#D8DDD8;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:#C6CCC7} .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:#8FE0A6;border-top-color:var(--teal)} .sec-dark .card p{color:#C6CCC7} .sec-dark .card-ic{background:rgba(20,107,49,.15);color:#146B31} /* ----------------------------------------------------------------- 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:#8FE0A6} .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:#C6CCC7} /* --------------------------------------------------------------- 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:#146B31} /* ------------------------------------------------------------- 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:#8FE0A6;border-left-color:#146B31} .sec-dark .stats b{color:#fff} .sec-dark .stats span{color:#C6CCC7} /* ----------------------------------------------------------------- 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:#FBDDDE} .cta-act{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem} .cta-note{font-size:.85rem;color:#FBDDDE} .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:#B6BDB8;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:#B6BDB8;text-decoration:none;font-size:.885rem} .ftr-l a:hover{color:#fff} .ftr-l b{color:#146B31} .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:#146B31;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 #8FE0A6;color:#B6BDB8;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 #163D24;margin:0;min-width:0} .hrs b{color:#D3DCE1;font-weight:600;white-space:nowrap} .hrs-note{font-size:.8rem!important;color:#868D88} .ftr-map{border:1px solid #8FE0A6} .ftr-map iframe{display:block;filter:grayscale(.4) contrast(1.05)} .ftr-bot{border-top:1px solid #163D24;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:#B6BDB8;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:#D8DDD8;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:#EDF5EF} .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(143,224,166,.14),transparent 62%), linear-gradient(168deg,#8FE0A6 0%,var(--ink) 58%,#0B2214 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:#F2F5F1} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#146B31} .eyebrow-amber{color:var(--teal)} /* --- section rules and small accents --- */ .sec-dark{background:linear-gradient(168deg,#8FE0A6,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(11,34,20,.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(143,224,166,.14),transparent 60%), linear-gradient(166deg,#8FE0A6 0%,var(--ink) 56%,#0B2214 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,#8FE0A6,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(18,52,31,.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(143,224,166,.14),transparent 60%), linear-gradient(164deg,#8FE0A6 0%,var(--ink) 58%,#0B2214 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,#8FE0A6,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:#DDE2DD} .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:#DDE2DD} .hdr .burger span{background:#EFF2EE} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#B9C0BA} /* --- hero --- */ .hero{background: radial-gradient(960px 520px at 84% 10%,rgba(20,107,49,.15),transparent 60%), linear-gradient(163deg,#1A472A 0%,var(--ink) 56%,#0B2214 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:#DDE2DD} .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:#F2F5F1} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#146B31} .eyebrow-amber{color:#8FE0A6} .sec-dark{background:linear-gradient(163deg,#1A472A,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(143,224,166,.10),transparent 58%), linear-gradient(162deg,#1A472A 0%,var(--ink) 55%,#0B2214 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:#DDE2DD} .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:#F2F5F1} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#146B31} .eyebrow-amber{color:#146B31} .sec-dark{background:linear-gradient(162deg,#1A472A,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(18,52,31,.16), 0 2px 6px rgba(18,52,31,.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(20,107,49,.15),transparent 62%), linear-gradient(162deg,#1A472A 0%,var(--ink) 55%,#0B2214 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:#0F5325;border-color:#0F5325;color:#101C30} .btn-amber{background:var(--teal);border-color:var(--teal);color:#FFFFFF} .btn-amber:hover{background:#0F5325;border-color:#0F5325} .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:#F2F5F1} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:var(--teal)} .eyebrow-amber{color:var(--teal)} .sec-dark{background:linear-gradient(162deg,#1A472A,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(143,224,166,.10),transparent 58%), linear-gradient(162deg,#1A472A 0%,var(--ink) 55%,#0B2214 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:#8FE0A6} .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:#F2F5F1} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#8FE0A6} .eyebrow-amber{color:#8FE0A6} .sec-dark{background:linear-gradient(162deg,#1A472A,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:#E4EFE7} .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:#E4EFE7} .hdr .burger span{background:#EDF5EF} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#A9BEB0} /* --- hero --- */ .hero{background: radial-gradient(940px 520px at 84% 10%,rgba(143,224,166,.18),transparent 62%), linear-gradient(162deg,#1A472A 0%,var(--ink) 55%,#0B2214 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:#8FE0A6} .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:#F2F5F1} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#8FE0A6} .eyebrow-amber{color:#8FE0A6} .sec-dark{background:linear-gradient(162deg,#1A472A,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 (#146B31) 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 #8FE0A6 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:#8FE0A6} .ftr-l b{color:#8FE0A6} /* ============================================================ 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(143,224,166,.10),transparent 58%), linear-gradient(162deg,#1A472A 0%,var(--ink) 55%,#0B2214 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:#E4EFE7} .trust .ic{color:#8FE0A6} .eyebrow::before{background:var(--red)} /* --- DARK BRAND ACCENT ON A DARK FIELD ----------------------- Brand red #146B31 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 #8FE0A6 instead. Measured, not assumed - see the delivery notes. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F2F5F1} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#8FE0A6} .eyebrow-amber{color:#8FE0A6} .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:#8FE0A6} .ftr-l b{color:#8FE0A6} .sec-dark{background:linear-gradient(162deg,#1A472A,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:#E4EFE7} .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:#E4EFE7} .hdr .burger span{background:#EDF5EF} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#A9BEB0} /* --- 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(143,224,166,.10),transparent 58%), linear-gradient(162deg,#1A472A 0%,var(--ink) 55%,#0B2214 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:#E4EFE7} .trust .ic{color:#8FE0A6} .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 #146B31 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 #8FE0A6 instead. Measured against the HERO, not just against the CTA. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F2F5F1} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#8FE0A6} .eyebrow-amber{color:#8FE0A6} .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:#8FE0A6} .ftr-l b{color:#8FE0A6} .sec-dark{background:linear-gradient(162deg,#1A472A,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(143,224,166,.10),transparent 58%), linear-gradient(162deg,#1A472A 0%,var(--ink) 55%,#0B2214 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:#E4EFE7} .trust .ic{color:#8FE0A6} .eyebrow::before{background:var(--red)} /* --- DARK-FIELD ACCENT: A LIGHTENED SECONDARY, NOT A TINT OF THE PRIMARY. Brand red #146B31 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 #8FE0A6 so it clears 4.5 against EVERY band including a glow-lightened sample (worst case 5.01). Plain #8FE0A6 measured 3.36 at worst and was rejected. */ .hero .eyebrow,.sec-dark .eyebrow{color:#F2F5F1} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#8FE0A6} .eyebrow-amber{color:#8FE0A6} .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:#8FE0A6} .ftr-l b{color:#8FE0A6} .sec-dark{background:linear-gradient(162deg,#1A472A,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:#E4EFE7} .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:#E4EFE7} .hdr .burger span{background:#EDF5EF} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#A9BEB0} /* --- 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(143,224,166,.10),transparent 58%), linear-gradient(162deg,#1A472A 0%,var(--ink) 55%,#0B2214 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:#E4EFE7} .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 #8FE0A6 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:#F2F5F1} .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,#1A472A,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(143,224,166,.09),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:#E4EFE7} .hdr .nav-l>li>a:hover,.hdr .nav-l>li>a[aria-current]{color:#fff} .hdr .nav-l>li>a[aria-current]::after{background:#8FE0A6;height:3px} .hdr .sub-b{color:#E4EFE7} .hdr .burger span{background:#EDF5EF} .hdr .logo-w b{color:#fff} .hdr .logo-w span{color:#A9BEB0} /* --- 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(143,224,166,.10),transparent 60%), linear-gradient(162deg,#1A472A 0%,var(--ink) 55%,#0B2214 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(143,224,166,.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:#E4EFE7} .trust .ic{color:#8FE0A6} .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 #8FE0A6 clears 5.01:1 against the worst band. Measured against EVERY band including a glow-lightened sample. */ .hero .eyebrow,.sec-dark .eyebrow{color:#EDF5EF} .hero .eyebrow::before,.sec-dark .eyebrow::before{background:#8FE0A6} .eyebrow-amber{color:#8FE0A6} .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:#8FE0A6} .ftr-l b{color:#8FE0A6} .sec-dark{background:linear-gradient(162deg,#1A472A,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}}