/* Theme Name: Raber Electric Theme URI: https://raberelectric.com/ Description: Custom Astra child theme for Raber Electric - residential electrical contractor serving Northeast Ohio. Hand-built layout, sticky desktop/iPad header, county landing pages. Author: Charliez Digital Author URI: https://charliezdigital.com/ Template: astra Version: 1.0.0 Text Domain: raber-electric */ /* ============================================================ 1. TOKENS ============================================================ */ :root{ --navy-900:#0A171E; --navy-850:#0C1C25; --navy-800:#0F2029; --navy-700:#16303C; --navy-600:#1E4252; --ink:#122029; --body:#3D4C55; --muted:#586770; --cyan-300:#5CE8F7; --cyan-400:#22D3EE; --cyan-500:#08B4CE; --cyan-600:#0A8AA1; --cyan-700:#0A6E80; --amber:#FFC72C; --amber-400:#FFD35A; --amber-600:#E2A400; --amber-700:#B5820A; --line:#DFE5E9; --line-soft:#EDF1F3; --surface:#FFFFFF; --surface-2:#F5F8FA; --surface-3:#EAF1F4; --red:#C0392B; --green:#1E7A4B; --ff-head:'Barlow Condensed',"Arial Narrow",Arial,sans-serif; --ff-body:'Barlow',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --wrap:1220px; --gut:22px; --r:3px; --r-lg:5px; --shadow-sm:0 1px 2px rgba(10,23,30,.08),0 2px 6px rgba(10,23,30,.05); --shadow-md:0 2px 4px rgba(10,23,30,.07),0 8px 22px rgba(10,23,30,.08); --shadow-lg:0 4px 10px rgba(10,23,30,.09),0 18px 46px rgba(10,23,30,.12); --hdr-h:84px; --util-h:38px; } /* ============================================================ 2. RESET / BASE ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body.raber{ margin:0;font-family:var(--ff-body);font-size:17px;line-height:1.68; color:var(--body);background:#fff;-webkit-font-smoothing:antialiased; overflow-x:hidden; } body.raber img{max-width:100%;height:auto;display:block} body.raber h1,body.raber h2,body.raber h3,body.raber h4,body.raber h5{ font-family:var(--ff-head);color:var(--ink);margin:0 0 .5em; font-weight:700;line-height:1.06;letter-spacing:-.005em; } body.raber h1{font-size:clamp(2.35rem,5.2vw,4.1rem);font-weight:800;text-transform:uppercase;letter-spacing:-.012em} body.raber h2{font-size:clamp(1.95rem,3.9vw,3rem);font-weight:800;text-transform:uppercase} body.raber h3{font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:700} body.raber h4{font-size:1.13rem;font-weight:700;font-family:var(--ff-body);letter-spacing:0;line-height:1.35} body.raber p{margin:0 0 1.15em} body.raber a{color:var(--cyan-700);text-decoration:none} body.raber a:hover{text-decoration:underline} body.raber ul,body.raber ol{margin:0 0 1.2em;padding-left:1.15em} body.raber li{margin-bottom:.4em} body.raber strong{color:var(--ink);font-weight:700} body.raber hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0} body.raber :focus-visible{outline:3px solid var(--cyan-500);outline-offset:2px} .rb-wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)} .rb-wrap--narrow{max-width:880px} .rb-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .rb-skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:#10202A;padding:.8rem 1.2rem;z-index:2000;font-weight:700} .rb-skip:focus{left:8px;top:8px} /* ============================================================ 3. BUTTONS - squared, tactile, trade-industry. No pills, no gradients. ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--ff-body);font-weight:700;font-size:.95rem; letter-spacing:.045em;text-transform:uppercase;text-align:center; padding:1rem 1.75rem;border-radius:var(--r);border:2px solid transparent; cursor:pointer;text-decoration:none!important;line-height:1.1; transition:background-color .15s ease,border-color .15s ease,color .15s ease, transform .1s ease,box-shadow .1s ease; } .btn svg{width:1.05em;height:1.05em;flex:0 0 auto;fill:currentColor} .btn--primary{background:var(--amber);color:#14212B;border-color:var(--amber-600);box-shadow:0 3px 0 var(--amber-700)} .btn--primary:hover{background:var(--amber-400);color:#14212B;transform:translateY(-1px);box-shadow:0 4px 0 var(--amber-700)} .btn--primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--amber-700)} .btn--dark{background:var(--navy-800);color:#fff;border-color:var(--navy-800);box-shadow:0 3px 0 #051016} .btn--dark:hover{background:var(--navy-700);color:#fff;transform:translateY(-1px);box-shadow:0 4px 0 #051016} .btn--dark:active{transform:translateY(2px);box-shadow:0 1px 0 #051016} .btn--outline{background:transparent;color:var(--navy-800);border-color:#C3D0D7;box-shadow:inset 0 0 0 0 var(--navy-800)} .btn--outline:hover{background:var(--navy-800);color:#fff;border-color:var(--navy-800)} .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)} .btn--ghost:hover{background:#fff;color:var(--navy-800);border-color:#fff} .btn--cyan{background:var(--cyan-500);color:#04222A;border-color:var(--cyan-600);box-shadow:0 3px 0 var(--cyan-700)} .btn--cyan:hover{background:var(--cyan-400);color:#04222A;transform:translateY(-1px);box-shadow:0 4px 0 var(--cyan-700)} .btn--cyan:active{transform:translateY(2px);box-shadow:0 1px 0 var(--cyan-700)} .btn--lg{padding:1.15rem 2.1rem;font-size:1.02rem} .btn--sm{padding:.65rem 1.1rem;font-size:.82rem} .btn--block{display:flex;width:100%} .rb-btnrow{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center} /* text link with a rule under it - the tertiary tier */ .rb-tlink{ display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.95rem; color:var(--cyan-700);border-bottom:2px solid var(--cyan-400);padding-bottom:2px; text-decoration:none!important;transition:color .15s,border-color .15s; } .rb-tlink:hover{color:var(--navy-800);border-color:var(--amber)} .rb-tlink::after{content:"→";font-size:1.05em;line-height:1;transition:transform .15s} .rb-tlink:hover::after{transform:translateX(3px)} /* ============================================================ 4. HEADER - sticky on desktop + iPad ============================================================ */ .rb-header{background:var(--navy-800);position:relative;z-index:900} .rb-util{background:var(--navy-900);color:#9FB3BD;font-size:.8rem;border-bottom:1px solid rgba(255,255,255,.07)} .rb-util__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--util-h)} .rb-util__list{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0} .rb-util__list li{margin:0;display:flex;align-items:center;gap:.4rem;white-space:nowrap} .rb-util__list svg{width:14px;height:14px;fill:var(--cyan-400);flex:0 0 auto} .rb-util a{color:#CFE0E7;font-weight:600} .rb-util a:hover{color:#fff;text-decoration:none} .rb-bar{display:flex;align-items:center;gap:1.4rem;min-height:var(--hdr-h);transition:min-height .2s ease} .rb-brand{display:flex;align-items:center;flex:0 0 auto;margin-right:auto} .rb-brand img{width:246px;max-width:52vw;transition:width .2s ease} .rb-brand a{display:block;line-height:0} .rb-nav{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0} .rb-nav>li{position:relative;margin:0} .rb-nav>li>a{ display:flex;align-items:center;gap:.35rem;color:#E7EFF3;font-weight:600; font-size:.94rem;letter-spacing:.012em;padding:.72rem .78rem;border-radius:var(--r); text-decoration:none!important;transition:color .15s,background .15s; } .rb-nav>li>a:hover,.rb-nav>li.is-open>a{color:#fff;background:rgba(255,255,255,.08)} .rb-nav>li.current-menu-item>a,.rb-nav>li.current-page-ancestor>a{color:var(--cyan-300)} .rb-nav>li.has-sub>a::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.7;margin-left:.15rem} .rb-sub{ position:absolute;top:calc(100% + 6px);left:0;min-width:262px;background:#fff; border:1px solid var(--line);border-top:3px solid var(--cyan-500);border-radius:var(--r-lg); box-shadow:var(--shadow-lg);padding:.5rem;list-style:none;margin:0; opacity:0;visibility:hidden;transform:translateY(6px);transition:all .16s ease;z-index:50; } .rb-nav>li:hover>.rb-sub,.rb-nav>li.is-open>.rb-sub{opacity:1;visibility:visible;transform:translateY(0)} .rb-sub li{margin:0} .rb-sub a{display:block;padding:.6rem .8rem;font-size:.92rem;font-weight:600;color:var(--navy-800);border-radius:var(--r);text-decoration:none!important} .rb-sub a:hover{background:var(--surface-2);color:var(--cyan-700)} .rb-hcta{display:flex;align-items:center;gap:.9rem;flex:0 0 auto} .rb-hphone{display:flex;flex-direction:column;line-height:1.12;text-decoration:none!important} .rb-hphone small{color:#8FA6B1;font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;font-weight:700} .rb-hphone b{color:#fff;font-family:var(--ff-head);font-size:1.5rem;font-weight:700;letter-spacing:.005em} .rb-hphone:hover b{color:var(--amber)} .rb-burger{display:none;width:46px;height:44px;border:2px solid rgba(255,255,255,.28);background:transparent;border-radius:var(--r);cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px} .rb-burger span{display:block;width:20px;height:2px;background:#fff;transition:transform .2s,opacity .2s} .rb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .rb-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .rb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* sticky: iPad (768px) and up */ @media (min-width:768px){ .rb-header{position:-webkit-sticky;position:sticky;top:0} body.admin-bar .rb-header{top:32px} .rb-header.is-stuck{box-shadow:0 6px 24px rgba(8,20,27,.32)} .rb-header.is-stuck .rb-util{display:none} .rb-header.is-stuck .rb-bar{min-height:66px} .rb-header.is-stuck .rb-brand img{width:200px} } @media (max-width:782px){body.admin-bar .rb-header{top:0}} /* mobile drawer */ .rb-mobile{display:none;background:var(--navy-850);border-top:1px solid rgba(255,255,255,.09)} .rb-mobile.is-open{display:block} .rb-mobile ul{list-style:none;margin:0;padding:0} .rb-mobile>ul{padding:.5rem 0 1rem} .rb-mobile li{margin:0;border-bottom:1px solid rgba(255,255,255,.07)} .rb-mobile li:last-child{border-bottom:0} .rb-mobile a{display:block;padding:.95rem var(--gut);color:#E7EFF3;font-weight:600;font-size:1rem;text-decoration:none!important} .rb-mobile a:hover{background:rgba(255,255,255,.06);color:#fff} .rb-mobile .rb-sub2 a{padding-left:calc(var(--gut) + 1.1rem);font-size:.93rem;color:#B8CCD6} .rb-mobile .rb-sub2 a::before{content:"- ";opacity:.5} .rb-mobile__cta{padding:1rem var(--gut) 1.3rem;display:grid;gap:.6rem;border-top:1px solid rgba(255,255,255,.09)} @media (max-width:1100px){ .rb-nav>li>a{font-size:.88rem;padding:.7rem .55rem} .rb-brand img{width:210px} .rb-hphone b{font-size:1.3rem} } @media (max-width:991px){ .rb-nav,.rb-hphone{display:none} .rb-burger{display:flex} .rb-util__list li.rb-util--hide{display:none} } @media (max-width:767px){ .rb-util__in{justify-content:center;min-height:34px} .rb-util__list{gap:1rem;font-size:.75rem} .rb-bar{min-height:70px;gap:.7rem} .rb-brand img{width:180px} .rb-hcta .btn{padding:.72rem 1rem;font-size:.82rem} } @media (max-width:420px){ .rb-brand img{width:150px} .rb-hcta .btn span{display:none} .rb-hcta .btn{padding:.72rem .85rem} } /* ============================================================ 5. SECTIONS ============================================================ */ .rb-sec{padding:76px 0} .rb-sec--tight{padding:54px 0} .rb-sec--lg{padding:96px 0} .rb-sec--alt{background:var(--surface-2)} .rb-sec--dark{background:var(--navy-800);color:#C3D4DC} .rb-sec--dark h2,.rb-sec--dark h3,.rb-sec--dark h4{color:#fff} .rb-sec--dark a{color:var(--cyan-300)} @media (max-width:767px){.rb-sec{padding:52px 0}.rb-sec--lg{padding:60px 0}.rb-sec--tight{padding:42px 0}} .rb-eyebrow{ display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-body); font-size:.775rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--cyan-700);margin:0 0 .85rem; } .rb-eyebrow::before{content:"";width:26px;height:3px;background:var(--amber);flex:0 0 auto} .rb-sec--dark .rb-eyebrow{color:var(--cyan-300)} .rb-head{max-width:760px;margin-bottom:2.6rem} .rb-head--center{margin-left:auto;margin-right:auto;text-align:center} .rb-head--center .rb-eyebrow{justify-content:center} .rb-head p{font-size:1.09rem;margin-bottom:0;color:var(--body)} .rb-sec--dark .rb-head p{color:#AFC3CD} .rb-lede{font-size:1.16rem;line-height:1.65;color:var(--ink);font-weight:500} /* ============================================================ 6. HERO ============================================================ */ .rb-hero{position:relative;background:var(--navy-800);color:#fff;overflow:hidden;isolation:isolate} .rb-hero::before{ content:"";position:absolute;inset:0;z-index:-2; background: linear-gradient(103deg,var(--cyan-600) 0%,var(--cyan-700) 26%,var(--navy-700) 52%,var(--navy-800) 74%,var(--navy-900) 100%); } .rb-hero::after{ content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image: linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:linear-gradient(115deg,#000 0%,rgba(0,0,0,.25) 62%,transparent 88%); mask-image:linear-gradient(115deg,#000 0%,rgba(0,0,0,.25) 62%,transparent 88%); } .rb-hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:3.2rem;align-items:center;padding:74px 0 78px} .rb-hero h1{color:#fff;margin-bottom:1rem} .rb-hero h1 em{font-style:normal;color:var(--amber);display:block} .rb-hero__sub{font-size:1.19rem;line-height:1.6;color:#D2E3EA;max-width:37em;margin-bottom:1.7rem} .rb-hero__pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;padding:0;list-style:none} .rb-hero__pills li{ display:flex;align-items:center;gap:.42rem;margin:0;font-size:.85rem;font-weight:600; color:#DCEAF0;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16); padding:.42rem .8rem;border-radius:var(--r); } .rb-hero__pills svg{width:14px;height:14px;fill:var(--amber);flex:0 0 auto} .rb-hero__note{margin-top:1.25rem;font-size:.9rem;color:#9FBAC6} .rb-hero__note strong{color:var(--amber)} .rb-hero__card{ background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-lg); border-top:5px solid var(--amber);overflow:hidden; } .rb-hero__card-hd{padding:1.4rem 1.6rem .2rem} .rb-hero__card-hd h2{font-size:1.6rem;margin-bottom:.3rem;color:var(--ink)} .rb-hero__card-hd p{font-size:.92rem;color:var(--muted);margin-bottom:0} .rb-hero__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.15)} .rb-hero__media img{width:100%;display:block} .rb-hero__badge{ position:absolute;left:0;bottom:0;background:var(--amber);color:#14212B; font-family:var(--ff-head);font-weight:800;text-transform:uppercase; font-size:1.05rem;letter-spacing:.02em;padding:.55rem 1.1rem; } @media (max-width:991px){ .rb-hero__grid{grid-template-columns:1fr;gap:2.2rem;padding:54px 0 58px} .rb-hero__media{max-width:560px} } /* ============================================================ 7. TRUST BAR ============================================================ */ .rb-trust{background:var(--navy-900);border-top:3px solid var(--amber)} .rb-trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0} .rb-trust__i{ display:flex;align-items:center;gap:.9rem;padding:1.5rem 1.5rem; border-right:1px solid rgba(255,255,255,.09); } .rb-trust__i:last-child{border-right:0} .rb-trust__i svg{width:30px;height:30px;fill:var(--cyan-400);flex:0 0 auto} .rb-trust__i b{display:block;color:#fff;font-family:var(--ff-head);font-size:1.22rem;font-weight:700;line-height:1.15;text-transform:uppercase} .rb-trust__i span{display:block;color:#93A9B4;font-size:.83rem;line-height:1.35} @media (max-width:991px){ .rb-trust__grid{grid-template-columns:repeat(2,1fr)} .rb-trust__i:nth-child(2){border-right:0} .rb-trust__i:nth-child(1),.rb-trust__i:nth-child(2){border-bottom:1px solid rgba(255,255,255,.09)} } @media (max-width:540px){ .rb-trust__grid{grid-template-columns:1fr} .rb-trust__i{border-right:0;border-bottom:1px solid rgba(255,255,255,.09);padding:1.1rem var(--gut)} .rb-trust__i:last-child{border-bottom:0} } /* ============================================================ 8. SERVICE CARDS ============================================================ */ .rb-grid{display:grid;gap:1.4rem} .rb-grid--2{grid-template-columns:repeat(2,1fr)} .rb-grid--3{grid-template-columns:repeat(3,1fr)} .rb-grid--4{grid-template-columns:repeat(4,1fr)} @media (max-width:991px){.rb-grid--3,.rb-grid--4{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.rb-grid--2,.rb-grid--3,.rb-grid--4{grid-template-columns:1fr}} .rb-card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:1.7rem 1.55rem 1.55rem;position:relative; transition:border-color .16s,box-shadow .16s,transform .16s; display:flex;flex-direction:column; } .rb-card::before{content:"";position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:4px;background:var(--cyan-500);border-radius:var(--r-lg) var(--r-lg) 0 0;opacity:0;transition:opacity .16s} .rb-card:hover{border-color:#C6D5DC;box-shadow:var(--shadow-md);transform:translateY(-3px)} .rb-card:hover::before{opacity:1} .rb-card__ico{ width:52px;height:52px;border-radius:var(--r);background:var(--surface-3); display:flex;align-items:center;justify-content:center;margin-bottom:1.05rem; border:1px solid #D4E2E8; } .rb-card__ico svg{width:26px;height:26px;fill:var(--cyan-700)} .rb-card h3{font-size:1.32rem;margin-bottom:.45rem} .rb-card p{font-size:.965rem;margin-bottom:1rem;color:var(--body)} .rb-card .rb-tlink{margin-top:auto;align-self:flex-start} .rb-card__num{ position:absolute;top:1.1rem;right:1.2rem;font-family:var(--ff-head); font-size:2.6rem;font-weight:800;color:var(--surface-3);line-height:1; } /* checklist */ .rb-check{list-style:none;padding:0;margin:0 0 1.3em} .rb-check li{position:relative;padding-left:1.95rem;margin-bottom:.62rem;font-size:1rem} .rb-check li::before{ content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:2px; background:var(--cyan-500); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat; } .rb-sec--dark .rb-check li::before{background:var(--amber)} .rb-check--2{columns:2;column-gap:2.2rem} @media (max-width:640px){.rb-check--2{columns:1}} /* ============================================================ 9. SPLIT / MEDIA ============================================================ */ .rb-split{display:grid;grid-template-columns:1fr 1fr;gap:3.4rem;align-items:center} .rb-split--wide-l{grid-template-columns:1.15fr .85fr} .rb-split--wide-r{grid-template-columns:.85fr 1.15fr} @media (max-width:900px){.rb-split,.rb-split--wide-l,.rb-split--wide-r{grid-template-columns:1fr;gap:2.2rem}} .rb-figure{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)} .rb-figure img{width:100%} .rb-figure figcaption{ position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.3rem .9rem; background:linear-gradient(to top,rgba(10,23,30,.88),transparent); color:#fff;font-size:.88rem;font-weight:600; } .rb-figure--accent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--amber)} /* ============================================================ 10. EMERGENCY / CTA BANDS ============================================================ */ .rb-emerg{background:var(--navy-900);color:#fff;border-top:3px solid var(--red);position:relative;overflow:hidden} .rb-emerg__in{display:flex;align-items:center;gap:2rem;padding:38px 0;flex-wrap:wrap} .rb-emerg__ico{width:58px;height:58px;border-radius:50%;background:rgba(192,57,43,.18);border:2px solid rgba(192,57,43,.55);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .rb-emerg__ico svg{width:28px;height:28px;fill:#FF7A6B} .rb-emerg__txt{flex:1 1 320px} .rb-emerg__txt h2{font-size:1.8rem;margin-bottom:.25rem;color:#fff} .rb-emerg__txt p{margin:0;color:#A9BEC8;font-size:.99rem} .rb-cta{background:var(--cyan-700);color:#fff;position:relative;overflow:hidden} .rb-cta::after{ content:"";position:absolute;right:-90px;top:-60px;width:420px;height:420px; background:rgba(255,255,255,.06);transform:rotate(22deg); } .rb-cta__in{display:flex;align-items:center;justify-content:space-between;gap:2.2rem;padding:56px 0;flex-wrap:wrap;position:relative;z-index:1} .rb-cta h2{color:#fff;margin-bottom:.4rem;max-width:20ch} .rb-cta p{color:#CFF1F7;margin:0;font-size:1.05rem;max-width:46ch} /* ============================================================ 11. FAQ ============================================================ */ .rb-faq{border-top:1px solid var(--line)} .rb-faq details{border-bottom:1px solid var(--line)} .rb-faq summary{ list-style:none;cursor:pointer;padding:1.25rem 3rem 1.25rem 0;position:relative; font-family:var(--ff-body);font-weight:700;font-size:1.06rem;color:var(--ink);line-height:1.45; } .rb-faq summary::-webkit-details-marker{display:none} .rb-faq summary::after{ content:"";position:absolute;right:.35rem;top:1.5rem;width:16px;height:16px; background:var(--cyan-700);transition:transform .2s; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E") center/16px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z'/%3E%3C/svg%3E") center/16px no-repeat; } .rb-faq details[open] summary::after{transform:rotate(45deg)} .rb-faq summary:hover{color:var(--cyan-700)} .rb-faq__a{padding:0 3rem 1.4rem 0;color:var(--body)} .rb-faq__a p:last-child{margin-bottom:0} /* ============================================================ 12. COUNTY / AREA ============================================================ */ .rb-counties{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem} @media (max-width:991px){.rb-counties{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.rb-counties{grid-template-columns:1fr}} .rb-county{ display:block;background:#fff;border:1px solid var(--line);border-left:4px solid var(--cyan-500); border-radius:var(--r);padding:1.15rem 1.2rem;text-decoration:none!important; transition:border-left-color .16s,box-shadow .16s,transform .16s; } .rb-county:hover{border-left-color:var(--amber);box-shadow:var(--shadow-md);transform:translateY(-2px)} .rb-county b{display:block;font-family:var(--ff-head);font-size:1.3rem;font-weight:700;color:var(--ink);text-transform:uppercase;line-height:1.1;margin-bottom:.25rem} .rb-county span{display:block;font-size:.85rem;color:var(--muted);line-height:1.45} .rb-sec--dark .rb-county{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-left-color:var(--cyan-400)} .rb-sec--dark .rb-county b{color:#fff} .rb-sec--dark .rb-county span{color:#9FBAC6} .rb-townlist{columns:4;column-gap:2rem;list-style:none;padding:0;margin:0;font-size:.94rem} .rb-townlist li{margin-bottom:.4rem;break-inside:avoid} @media (max-width:900px){.rb-townlist{columns:3}} @media (max-width:640px){.rb-townlist{columns:2}} @media (max-width:400px){.rb-townlist{columns:1}} /* fact strip used on county pages */ .rb-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:0 0 1.6rem;padding:0;list-style:none} @media (max-width:760px){.rb-facts{grid-template-columns:1fr}} .rb-facts li{ margin:0;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r); padding:1.05rem 1.15rem; } .rb-facts b{display:block;font-family:var(--ff-head);font-size:1.75rem;font-weight:800;color:var(--cyan-700);line-height:1;margin-bottom:.3rem} .rb-facts span{display:block;font-size:.88rem;color:var(--body);line-height:1.45} /* ============================================================ 13. FORM ============================================================ */ .rb-form{display:grid;gap:.9rem} .rb-form .rb-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem} @media (max-width:560px){.rb-form .rb-row{grid-template-columns:1fr}} .rb-field label{display:block;font-size:.8rem;font-weight:700;color:var(--navy-700);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.35rem} .rb-field input,.rb-field select,.rb-field textarea{ width:100%;font-family:var(--ff-body);font-size:1rem;color:var(--ink); padding:.8rem .9rem;border:1.5px solid #CBD8DE;border-radius:var(--r);background:#fff; transition:border-color .15s,box-shadow .15s; } .rb-field input:focus,.rb-field select:focus,.rb-field textarea:focus{ outline:none;border-color:var(--cyan-500);box-shadow:0 0 0 3px rgba(34,211,238,.18); } .rb-field textarea{min-height:104px;resize:vertical} .rb-form__fine{font-size:.8rem;color:var(--muted);margin:0} .rb-form__fine a{color:var(--cyan-700)} .rb-note{padding:.9rem 1rem;border-radius:var(--r);font-size:.93rem;margin:0} .rb-note--ok{background:#E8F6EE;border:1px solid #BFE3CE;color:#17603C} .rb-note--err{background:#FCEEEC;border:1px solid #F1C9C3;color:#8E2B1E} /* ============================================================ 14. FOOTER ============================================================ */ .rb-footer{background:var(--navy-900);color:#9DB2BC;font-size:.945rem} .rb-footer__top{padding:62px 0 46px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:2.4rem} @media (max-width:991px){.rb-footer__top{grid-template-columns:1fr 1fr;gap:2.2rem}} @media (max-width:560px){.rb-footer__top{grid-template-columns:1fr;gap:1.9rem}} .rb-footer h4{ color:#fff;font-family:var(--ff-head);font-size:1.12rem;font-weight:700; text-transform:uppercase;letter-spacing:.055em;margin:0 0 1.05rem;padding-bottom:.55rem; border-bottom:2px solid rgba(255,255,255,.12);position:relative; } .rb-footer h4::after{content:"";position:absolute;left:0;bottom:-2px;width:38px;height:2px;background:var(--amber)} .rb-footer ul{list-style:none;margin:0;padding:0} .rb-footer li{margin-bottom:.5rem} .rb-footer a{color:#B9CBD4} .rb-footer a:hover{color:#fff;text-decoration:none} .rb-footer__logo{width:230px;margin-bottom:1.1rem} .rb-footer__phone{ display:inline-flex;align-items:center;gap:.55rem;font-family:var(--ff-head); font-size:1.85rem;font-weight:700;color:#fff!important;line-height:1;margin:.3rem 0 .55rem; } .rb-footer__phone svg{width:22px;height:22px;fill:var(--amber)} .rb-footer__phone:hover{color:var(--amber)!important} .rb-footer__meta{font-size:.87rem;line-height:1.6;color:#8FA5B0} .rb-footer__meta strong{color:#CBDBE2;font-weight:700} .rb-footer__bottom{ border-top:1px solid rgba(255,255,255,.1);padding:18px 0 24px; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#7D939E; } .rb-footer__bottom a{color:#93A9B4} .rb-badges{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1rem} .rb-badges span{ display:inline-flex;align-items:center;gap:.35rem;font-size:.76rem;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:#CBDBE2; border:1px solid rgba(255,255,255,.18);border-radius:2px;padding:.34rem .62rem; } /* sticky mobile call bar */ .rb-callbar{ position:fixed;left:0;right:0;bottom:0;z-index:950;display:none; grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14); box-shadow:0 -4px 18px rgba(8,20,27,.22); padding-bottom:env(safe-area-inset-bottom,0px); } .rb-callbar a{ display:flex;align-items:center;justify-content:center;gap:.45rem; padding:.95rem .5rem;font-weight:700;font-size:.92rem;text-transform:uppercase; letter-spacing:.04em;text-decoration:none!important; } .rb-callbar a:first-child{background:var(--amber);color:#14212B} .rb-callbar a:last-child{background:var(--navy-800);color:#fff} .rb-callbar svg{width:17px;height:17px;fill:currentColor} @media (max-width:767px){.rb-callbar{display:grid}body.raber{padding-bottom:0}.rb-footer__bottom{padding-bottom:78px}} /* ============================================================ 15. BREADCRUMBS + MISC ============================================================ */ .rb-crumbs{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:.85rem;padding:.75rem 0} .rb-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;color:var(--muted)} .rb-crumbs li{margin:0;display:flex;align-items:center;gap:.45rem} .rb-crumbs li+li::before{content:"/";color:#B6C4CB} .rb-crumbs a{color:var(--cyan-700);font-weight:600} .rb-pagehero{background:var(--navy-800);color:#fff;position:relative;overflow:hidden} .rb-pagehero::before{ content:"";position:absolute;inset:0; background:linear-gradient(100deg,var(--cyan-700) 0%,var(--navy-700) 46%,var(--navy-800) 100%); } .rb-pagehero::after{ content:"";position:absolute;inset:0;opacity:.45; background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px), linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:linear-gradient(112deg,#000,transparent 82%);mask-image:linear-gradient(112deg,#000,transparent 82%); } .rb-pagehero__in{position:relative;z-index:2;padding:62px 0 66px;max-width:820px} .rb-pagehero h1{color:#fff;margin-bottom:.7rem} .rb-pagehero p{color:#CFE2EA;font-size:1.12rem;margin-bottom:0;max-width:56ch} .rb-pagehero .rb-btnrow{margin-top:1.7rem} @media (max-width:767px){.rb-pagehero__in{padding:44px 0 48px}} .rb-prose h2{margin-top:2.4rem} .rb-prose h3{margin-top:1.9rem} .rb-prose h2:first-child,.rb-prose h3:first-child{margin-top:0} .rb-prose>p:last-child{margin-bottom:0} .rb-quote{ border-left:4px solid var(--amber);background:var(--surface-2); padding:1.3rem 1.5rem;margin:1.8rem 0;border-radius:0 var(--r) var(--r) 0; } .rb-quote p{margin-bottom:.5rem;font-size:1.04rem;color:var(--ink)} .rb-quote cite{font-style:normal;font-size:.86rem;color:var(--muted);font-weight:600} .rb-tablewrap{overflow-x:auto;margin:1.6rem 0} .rb-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px} .rb-table th,.rb-table td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line)} .rb-table th{background:var(--navy-800);color:#fff;font-family:var(--ff-head);font-size:1.02rem;text-transform:uppercase;letter-spacing:.03em;font-weight:700} .rb-table tbody tr:nth-child(even){background:var(--surface-2)} @media print{.rb-header,.rb-footer,.rb-callbar,.rb-cta,.rb-emerg{display:none!important}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* ============================================================ 16. BREAK OUT OF ASTRA'S CONTENT CONTAINER ============================================================ */ body.page-template-page-raber #content, body.page-template-page-raber #content > .ast-container, body.page-template-page-raber #primary, body.page-template-page-raber .entry-content, body.page-template-page-raber .ast-container{ max-width:none!important;width:100%!important; padding-left:0!important;padding-right:0!important; margin-left:0!important;margin-right:0!important; } body.page-template-page-raber #content{padding-top:0!important;padding-bottom:0!important} body.raber .rb-main{width:100%;max-width:none} body.raber #page{overflow-x:clip} body.raber .ast-above-header-wrap, body.raber .ast-below-header-wrap, body.raber .site-header:not(.rb-header), body.raber #masthead:not(.rb-header), body.raber .ast-mobile-header-wrap, body.raber .site-footer:not(.rb-footer), body.raber #colophon:not(.rb-footer){display:none!important} body.raber .ast-scroll-top{display:none!important} /* the child theme owns typography, not Astra */ body.raber .entry-content > *, body.raber .ast-container > *{margin-left:0;margin-right:0} /* ============================================================ 17. LINK COLOUR SCOPING Buttons and nav must not inherit the prose link colour. ============================================================ */ body.raber a{color:inherit} #rb-main p a:not(.btn):not(.rb-tlink):not(.rb-county), #rb-main li a:not(.btn):not(.rb-tlink):not(.rb-county), #rb-main .rb-prose a:not(.btn):not(.rb-tlink):not(.rb-county), #rb-main .rb-faq__a a:not(.btn), #rb-main .rb-table a:not(.btn), #rb-main figcaption a:not(.btn){ color:var(--cyan-700);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px; } #rb-main p a:not(.btn):not(.rb-tlink):hover, #rb-main li a:not(.btn):not(.rb-tlink):hover, #rb-main .rb-prose a:not(.btn):not(.rb-tlink):hover{color:var(--navy-800)} #rb-main .rb-sec--dark p a:not(.btn):not(.rb-tlink):not(.rb-county), #rb-main .rb-sec--dark li a:not(.btn):not(.rb-tlink):not(.rb-county), #rb-main .rb-sec--dark .rb-prose a:not(.btn):not(.rb-tlink):not(.rb-county), #rb-main .rb-sec--dark .rb-faq__a a:not(.btn){color:var(--cyan-300)} #rb-main .rb-sec--dark p a:not(.btn):not(.rb-tlink):hover, #rb-main .rb-sec--dark li a:not(.btn):not(.rb-tlink):hover{color:#fff} body.raber .btn{text-decoration:none!important} body.raber .btn--primary{color:#14212B} body.raber .btn--primary:hover{color:#14212B} body.raber .btn--dark{color:#fff} body.raber .btn--dark:hover{color:#fff} body.raber .btn--outline{color:var(--navy-800)} body.raber .btn--outline:hover{color:#fff} body.raber .btn--ghost{color:#fff;border-color:rgba(255,255,255,.62)} body.raber .btn--ghost:hover{color:var(--navy-800)} body.raber .btn--cyan{color:#04222A} body.raber .btn--cyan:hover{color:#04222A} body.raber .rb-tlink{color:var(--cyan-700);text-decoration:none!important} body.raber .rb-tlink:hover{color:var(--navy-800)} body.raber .rb-sec--dark .rb-tlink{color:var(--cyan-300)} body.raber .rb-sec--dark .rb-tlink:hover{color:#fff} body.raber .rb-county{text-decoration:none!important} body.raber .rb-card[href]{text-decoration:none!important} body.raber .rb-card[href] h3{color:var(--ink)} body.raber .rb-footer a{text-decoration:none} body.raber .rb-footer a:hover{text-decoration:underline} body.raber .rb-crumbs a{text-decoration:none} body.raber .rb-hphone,body.raber .rb-callbar a,body.raber .rb-nav a,body.raber .rb-mobile a{text-decoration:none!important} body.raber .rb-facts a{color:inherit;text-decoration:none!important} /* ============================================================ 18. CHROME LINK COLOURS (must outrank section 17) ============================================================ */ /* Primary nav - white, uppercase. Dropdown panel keeps its own styling. */ body.raber .rb-nav > li > a{ color:#FFFFFF; text-transform:uppercase; font-weight:700; font-size:.86rem; letter-spacing:.055em; padding:.72rem .7rem; } body.raber .rb-nav > li > a:hover, body.raber .rb-nav > li.is-open > a{color:#FFFFFF;background:rgba(255,255,255,.10)} body.raber .rb-nav > li.current-menu-item > a, body.raber .rb-nav > li.current-page-ancestor > a, body.raber .rb-nav > li.current-menu-parent > a{ color:#FFFFFF;box-shadow:inset 0 -3px 0 var(--amber); } body.raber .rb-nav > li.has-sub > a::after{opacity:.85} /* Dropdown: unchanged - dark text on the white panel */ body.raber .rb-sub a{color:var(--navy-800);text-transform:none;font-weight:600;letter-spacing:0} body.raber .rb-sub a:hover{background:var(--surface-2);color:var(--cyan-700)} /* Utility bar, mobile drawer, footer, breadcrumbs, call bar */ body.raber .rb-util a{color:#CFE0E7} body.raber .rb-util a:hover{color:#fff} body.raber .rb-mobile a{color:#E7EFF3} body.raber .rb-mobile > ul > li > a{text-transform:uppercase;font-weight:700;letter-spacing:.05em;font-size:.92rem} body.raber .rb-mobile .rb-sub2 a{color:#B8CCD6;text-transform:none;font-weight:600;letter-spacing:0} body.raber .rb-mobile a:hover{color:#fff} body.raber .rb-footer a{color:#B9CBD4} body.raber .rb-footer a:hover{color:#fff} body.raber .rb-footer__phone{color:#fff} body.raber .rb-crumbs a{color:var(--cyan-700)} body.raber .rb-callbar a:first-child{color:#14212B} body.raber .rb-callbar a:last-child{color:#fff} body.raber .rb-hphone b{color:#fff} body.raber .rb-hphone:hover b{color:var(--amber)} body.raber .rb-hphone small{color:#8FA6B1} body.raber .rb-county b{color:var(--ink)} body.raber .rb-sec--dark .rb-county b{color:#fff} body.raber .rb-county span{color:var(--muted)} body.raber .rb-sec--dark .rb-county span{color:#9FBAC6} /* uppercase nav needs a little more room to breathe */ @media (max-width:1240px){ body.raber .rb-nav > li > a{font-size:.79rem;padding:.7rem .52rem;letter-spacing:.04em} } @media (max-width:1090px){ body.raber .rb-brand img{width:196px} body.raber .rb-hphone b{font-size:1.24rem} } /* 19. figures never letterbox if the stored dimensions drift */ body.raber .rb-figure img{width:100%;height:auto;display:block} body.raber .rb-hero__media img{width:100%;height:auto} /* 20. nav must never wrap onto a second line */ body.raber .rb-nav > li > a{white-space:nowrap} body.raber .rb-nav{flex-wrap:nowrap} @media (min-width:992px) and (max-width:1120px){ body.raber .rb-nav > li > a{font-size:.74rem;padding:.68rem .42rem;letter-spacing:.03em} body.raber .rb-brand img{width:178px} body.raber .rb-hphone{display:none} } @media (min-width:1121px) and (max-width:1300px){ body.raber .rb-nav > li > a{font-size:.78rem;padding:.7rem .5rem} body.raber .rb-brand img{width:200px} } /* ============================================================ 21. HERO + FOOTER PHOTOGRAPHY Photo sits under a DIRECTIONAL scrim: dense behind the text, open on the side the photo has room to breathe. Mobile gets a flatter, deeper scrim because the text spans the full width. ============================================================ */ /* ---- home hero ---- */ body.raber .rb-hero{background-color:var(--navy-800)} body.raber .rb-hero.has-photo::before{ background-image: linear-gradient(95deg, rgba(8,20,26,.80) 0%, rgba(8,20,26,.68) 36%, rgba(9,30,40,.42) 56%, rgba(10,44,56,.22) 74%, rgba(9,26,34,.26) 100%), linear-gradient(0deg, rgba(8,120,142,.14), rgba(8,120,142,.14)), var(--rb-hero-img); background-size:cover,cover,cover; background-position:center,center,var(--rb-hero-pos,center 58%); background-repeat:no-repeat,no-repeat,no-repeat; } body.raber .rb-hero.has-photo::after{opacity:.22} /* ---- inner page heroes ---- */ body.raber .rb-pagehero{background-color:var(--navy-800)} body.raber .rb-pagehero.has-photo::before{ background-image: linear-gradient(95deg, rgba(8,20,26,.78) 0%, rgba(8,20,26,.66) 34%, rgba(9,30,40,.40) 55%, rgba(9,46,58,.20) 73%, rgba(9,26,34,.24) 100%), linear-gradient(0deg, rgba(8,120,142,.12), rgba(8,120,142,.12)), var(--rb-hero-img); background-size:cover,cover,cover; background-position:center,center,var(--rb-hero-pos,center 55%); background-repeat:no-repeat,no-repeat,no-repeat; } body.raber .rb-pagehero.has-photo::after{opacity:.20} body.raber .rb-pagehero.has-photo .rb-pagehero__in{padding:78px 0 82px} /* a soft dark base under the headline block so contrast never depends on which part of the photo happens to sit behind it */ body.raber .rb-hero.has-photo .rb-hero__grid > div:first-child, body.raber .rb-pagehero.has-photo .rb-pagehero__in{ text-shadow:0 1px 14px rgba(5,14,19,.72); } body.raber .rb-hero.has-photo h1, body.raber .rb-pagehero.has-photo h1{ text-shadow:0 2px 6px rgba(5,14,19,.80), 0 4px 26px rgba(5,14,19,.65); } body.raber .rb-hero.has-photo .rb-hero__sub, body.raber .rb-pagehero.has-photo p{ text-shadow:0 1px 10px rgba(5,14,19,.78); } body.raber .rb-hero.has-photo .rb-eyebrow, body.raber .rb-pagehero.has-photo .rb-eyebrow{ text-shadow:0 1px 8px rgba(5,14,19,.8); } /* ---- iPad and below: text spans wider, so flatten and deepen ---- */ @media (max-width:1024px){ body.raber .rb-hero.has-photo::before{ background-image: linear-gradient(176deg, rgba(8,20,26,.62) 0%, rgba(10,32,42,.58) 42%, rgba(8,20,26,.76) 100%), linear-gradient(0deg, rgba(8,120,142,.16), rgba(8,120,142,.16)), var(--rb-hero-img); background-position:center,center,center 48%; } body.raber .rb-pagehero.has-photo::before{ background-image: linear-gradient(176deg, rgba(8,20,26,.60) 0%, rgba(10,34,44,.56) 46%, rgba(8,20,26,.74) 100%), linear-gradient(0deg, rgba(8,120,142,.14), rgba(8,120,142,.14)), var(--rb-hero-img); background-position:center,center,center 48%; } body.raber .rb-pagehero.has-photo .rb-pagehero__in{padding:58px 0 60px} } @media (max-width:600px){ body.raber .rb-hero.has-photo::before, body.raber .rb-pagehero.has-photo::before{ background-attachment:scroll,scroll,scroll; } body.raber .rb-hero.has-photo::before{ background-image: linear-gradient(178deg, rgba(8,20,26,.66) 0%, rgba(10,32,42,.62) 40%, rgba(8,20,26,.80) 100%), linear-gradient(0deg, rgba(8,120,142,.18), rgba(8,120,142,.18)), var(--rb-hero-img); } body.raber .rb-pagehero.has-photo::before{ background-image: linear-gradient(178deg, rgba(8,20,26,.64) 0%, rgba(10,34,44,.60) 44%, rgba(8,20,26,.78) 100%), linear-gradient(0deg, rgba(8,120,142,.16), rgba(8,120,142,.16)), var(--rb-hero-img); } body.raber .rb-hero.has-photo::after, body.raber .rb-pagehero.has-photo::after{opacity:.12} body.raber .rb-pagehero.has-photo .rb-pagehero__in{padding:44px 0 46px} } /* ---- footer band ---- */ body.raber .rb-footer{position:relative;isolation:isolate;background-color:var(--navy-900)} body.raber .rb-footer.has-photo::before{ content:"";position:absolute;inset:0;z-index:-2; background-image:var(--rb-footer-img); background-size:cover;background-position:center 62%;background-repeat:no-repeat; } body.raber .rb-footer.has-photo::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg, rgba(8,20,27,.62) 0%, rgba(8,20,27,.74) 42%, rgba(7,16,21,.90) 100%); } body.raber .rb-footer.has-photo .rb-footer__top, body.raber .rb-footer.has-photo .rb-footer__bottom{position:relative;z-index:1} @media (max-width:767px){ body.raber .rb-footer.has-photo::after{ background:linear-gradient(180deg, rgba(8,20,27,.74) 0%, rgba(7,16,21,.93) 100%); } body.raber .rb-footer.has-photo::before{background-position:center 55%} } /* a hero photo must never create a horizontal scrollbar */ body.raber .rb-hero,body.raber .rb-pagehero,body.raber .rb-footer{max-width:100%;overflow-x:clip} /* ============================================================ 22. HEADING COLOUR ON DARK SURFACES `body.raber h1..h5` (0,1,2) outranks bare section rules such as `.rb-pagehero h1` (0,1,1), which silently forced dark ink onto dark backgrounds. Everything light-on-dark is restated here at matching-or-higher specificity. ============================================================ */ body.raber .rb-hero h1, body.raber .rb-hero h2, body.raber .rb-pagehero h1, body.raber .rb-pagehero h2, body.raber .rb-sec--dark h1, body.raber .rb-sec--dark h2, body.raber .rb-sec--dark h3, body.raber .rb-sec--dark h4, body.raber .rb-sec--dark h5, body.raber .rb-cta h1, body.raber .rb-cta h2, body.raber .rb-cta h3, body.raber .rb-emerg h2, body.raber .rb-emerg h3, body.raber .rb-emerg__txt h2, body.raber .rb-footer h2, body.raber .rb-footer h3, body.raber .rb-footer h4, body.raber .rb-trust h2, body.raber .rb-trust h3{color:#FFFFFF} body.raber .rb-hero h1 em{color:var(--amber)} body.raber .rb-sec--dark .rb-county b{color:#FFFFFF} body.raber .rb-trust__i b{color:#FFFFFF} /* and the surfaces that are genuinely light keep dark ink */ body.raber .rb-hero__card h1, body.raber .rb-hero__card h2, body.raber .rb-hero__card h3, body.raber .rb-hero__card-hd h2, body.raber .rb-card h3, body.raber .rb-card h4, body.raber .rb-sec--alt h2, body.raber .rb-sec--alt h3{color:var(--ink)} body.raber .rb-sec--dark .rb-hero__card h2, body.raber .rb-sec--dark .rb-hero__card h3{color:var(--ink)} /* ============================================================ 23. INLINE TEXT ON DARK SURFACES `body.raber strong` (0,1,2) was overriding every section-level rule, so bold text inside dark bands rendered in dark ink. ============================================================ */ body.raber .rb-hero strong, body.raber .rb-hero b, body.raber .rb-hero em, body.raber .rb-hero cite, body.raber .rb-pagehero strong, body.raber .rb-pagehero b, body.raber .rb-pagehero em, body.raber .rb-pagehero cite, body.raber .rb-sec--dark strong, body.raber .rb-sec--dark b, body.raber .rb-sec--dark em, body.raber .rb-sec--dark cite, body.raber .rb-cta strong, body.raber .rb-cta b, body.raber .rb-cta em, body.raber .rb-emerg strong, body.raber .rb-emerg b, body.raber .rb-emerg em, body.raber .rb-trust strong, body.raber .rb-trust b, body.raber .rb-footer strong, body.raber .rb-footer b, body.raber .rb-footer em, body.raber .rb-footer cite, body.raber .rb-util strong, body.raber .rb-util b, body.raber .rb-mobile strong, body.raber .rb-mobile b{color:#DCE7EC} /* brand accents keep their colour */ body.raber .rb-hero__note strong{color:var(--amber)} body.raber .rb-footer__meta strong{color:#CBDBE2} body.raber .rb-facts b{color:var(--cyan-700)} body.raber .rb-sec--dark .rb-facts b{color:var(--cyan-300)} /* light cards sitting inside a dark band keep dark ink */ body.raber .rb-sec--dark .rb-hero__card strong, body.raber .rb-sec--dark .rb-hero__card b, body.raber .rb-hero .rb-hero__card strong, body.raber .rb-hero .rb-hero__card b, body.raber .rb-pagehero .rb-hero__card strong, body.raber .rb-pagehero .rb-hero__card b, body.raber .rb-sec--dark .rb-card strong, body.raber .rb-sec--dark .rb-card b{color:var(--ink)} /* supporting copy on dark bands */ body.raber .rb-footer__meta{color:#9DB2BC} body.raber .rb-trust__i span{color:#93A9B4} body.raber .rb-hero__pills li{color:#DCEAF0} body.raber .rb-sec--dark li, body.raber .rb-sec--dark p{color:#B7C9D2} body.raber .rb-sec--dark .rb-check li{color:#C4D5DD} body.raber .rb-cta p{color:#CFF1F7} body.raber .rb-emerg__txt p{color:#A9BEC8} /* ============================================================ 24. BUTTON COLOUR IS NEVER INHERITED FROM CONTEXT Belt and braces: a button keeps its designed text colour no matter which prose or dark-section rule it sits inside. ============================================================ */ #rb-main .rb-prose a.btn--primary, #rb-main .rb-sec--dark a.btn--primary, #rb-main .rb-sec--dark .rb-prose a.btn--primary, #rb-main p a.btn--primary, #rb-main li a.btn--primary, #rb-main .rb-cta a.btn--primary, #rb-main .rb-emerg a.btn--primary{color:#14212B} #rb-main .rb-prose a.btn--ghost, #rb-main .rb-sec--dark a.btn--ghost, #rb-main .rb-sec--dark .rb-prose a.btn--ghost, #rb-main p a.btn--ghost, #rb-main li a.btn--ghost, #rb-main .rb-cta a.btn--ghost, #rb-main .rb-emerg a.btn--ghost{color:#FFFFFF} #rb-main .rb-prose a.btn--ghost:hover, #rb-main .rb-sec--dark a.btn--ghost:hover, #rb-main .rb-cta a.btn--ghost:hover{color:var(--navy-800)} #rb-main .rb-prose a.btn--cyan, #rb-main .rb-sec--dark a.btn--cyan, #rb-main .rb-sec--dark .rb-prose a.btn--cyan, #rb-main p a.btn--cyan, #rb-main li a.btn--cyan{color:#04222A} #rb-main .rb-prose a.btn--dark, #rb-main .rb-sec--dark a.btn--dark, #rb-main p a.btn--dark, #rb-main li a.btn--dark{color:#FFFFFF} #rb-main .rb-prose a.btn--outline, #rb-main p a.btn--outline, #rb-main li a.btn--outline{color:var(--navy-800)} #rb-main .rb-prose a.btn--outline:hover{color:#FFFFFF} body.raber a.btn{text-decoration:none!important} /* slightly lift the footer legal strip for comfortable reading */ body.raber .rb-footer__bottom{color:#93A9B4} body.raber .rb-footer__bottom a{color:#AEC2CC} /* ============================================================ 25. CHROME IS OUTSIDE #rb-main AND OWNS ITS OWN COLOURS Header, drawer, breadcrumbs and footer are re-asserted here so no content rule can ever reach them. ============================================================ */ .rb-header .rb-nav > li > a{color:#FFFFFF} .rb-header .rb-nav > li > a:hover, .rb-header .rb-nav > li.is-open > a{color:#FFFFFF} .rb-header .rb-nav > li.current-menu-item > a, .rb-header .rb-nav > li.current-page-ancestor > a, .rb-header .rb-nav > li.current-menu-parent > a{color:#FFFFFF} .rb-header .rb-sub a{color:var(--navy-800)} .rb-header .rb-sub a:hover{color:var(--cyan-700)} .rb-header .rb-util a{color:#CFE0E7} .rb-header .rb-util a:hover{color:#FFFFFF} .rb-header .rb-util__list li{color:#9FB3BD} .rb-header .rb-hphone b{color:#FFFFFF} .rb-header .rb-hphone small{color:#8FA6B1} .rb-header .rb-hphone:hover b{color:var(--amber)} .rb-header .rb-mobile > ul > li > a{color:#E7EFF3} .rb-header .rb-mobile .rb-sub2 a{color:#B8CCD6} .rb-header .rb-mobile a:hover{color:#FFFFFF} .rb-header .btn--primary{color:#14212B} .rb-header .btn--ghost{color:#FFFFFF} .rb-footer a{color:#B9CBD4} .rb-footer a:hover{color:#FFFFFF} .rb-footer h4{color:#FFFFFF} .rb-footer strong{color:#CBDBE2} .rb-footer .rb-footer__phone{color:#FFFFFF} .rb-footer .rb-footer__phone:hover{color:var(--amber)} .rb-footer .rb-footer__meta{color:#9DB2BC} .rb-footer .rb-badges span{color:#CBDBE2} .rb-footer__bottom, .rb-footer__bottom div{color:#93A9B4} .rb-footer__bottom a{color:#AEC2CC} .rb-crumbs a{color:var(--cyan-700)} .rb-callbar a:first-child{color:#14212B} .rb-callbar a:last-child{color:#FFFFFF} /* 26. final contrast polish */ body.raber .rb-figure figcaption{ background:linear-gradient(to top, rgba(7,17,23,.94) 0%, rgba(7,17,23,.72) 55%, transparent 100%); padding:1.8rem 1.3rem .95rem; } body.raber .rb-card__num{color:#DCE6EB} body.raber .rb-crumbs ol{color:#586770} body.raber .rb-quote cite{color:#586770} /* ============================================================ 27. FORM CONTROLS Astra's dynamic CSS pins form fields to height:40px. With our 12.8px vertical padding that leaves ~12.8px of content box for 16px text, so glyphs were being clipped - most visibly on the long