/* ==========================================================================
Sure Plans website refresh - Direction B "Calm premium" (CEO decision 2026-10-01)
Loaded AFTER css/main.css on the 12 refreshed pages only, so stale pages keep their old look.
Visual layer only: colours, type scale, shapes, focus and tap targets. No wording lives here.
Brand tokens from docs/IDEAS-QQ-UI-REFRESH-20260929.md section 1. Tints marked "derived" are new.
========================================================================== */
:root{
--sp-brand-dark:#265b7d; /* site body/heading blue - 7.3:1 on white */
--sp-brand:#55a0c1; /* light blue - decoration only, never under white text */
--sp-action:#3b6b8a; /* button fill - white text 5.7:1 (AA) */
--sp-action-hover:#265b7d;
--sp-ink:#1f2a33; /* derived: body text */
--sp-ink-soft:#46535f; /* derived: secondary text, 7.6:1 on white */
--sp-tint:#f4f8fb; /* derived: very light blue page band */
--sp-border:#d9e4ec; /* derived: 1px card / divider border */
--sp-on-dark:#e8f0f5; /* derived: soft white for text on brand-dark */
--sp-radius-pill:50px;
--sp-radius-card:16px;
--sp-shadow:0 1px 2px rgba(16,42,61,.06), 0 6px 20px rgba(16,42,61,.07);
--sp-shadow-hover:0 2px 4px rgba(16,42,61,.08), 0 10px 28px rgba(16,42,61,.12);
--sp-font:'Helvetica', 'HelveticaNeue', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
--sp-ease:150ms ease;
}
/* ---------- Base type ---------- */
body{font-family:var(--sp-font); color:var(--sp-ink); -webkit-font-smoothing:antialiased;}
p{color:var(--sp-ink); line-height:1.6;}
h2{font-size:clamp(28px, 1.6vw + 18px, 44px); line-height:1.15;}
h3, .what-are-doing-sec h3, .contact-frm h3{
font-size:clamp(26px, 1.4vw + 17px, 40px); line-height:1.2; font-weight:bold;
color:var(--sp-brand-dark); letter-spacing:-0.01em;
}
h4{font-size:clamp(19px, .5vw + 16px, 24px); line-height:1.35; color:var(--sp-brand-dark);}
h5{line-height:1.3;}
/* Calm motion: drop the slow 0.5s grow-from-centre effects */
a, button, img, i.fa{transition:color var(--sp-ease), background-color var(--sp-ease), border-color var(--sp-ease), box-shadow var(--sp-ease);}
@media (prefers-reduced-motion: reduce){
/* near-zero durations instead of "none": transitions still finish and fire transitionend, which js/main.js needs to reset the
phone menu after it closes (review L2) */
*, *::before, *::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important;
transition-duration:0.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important;}
}
/* ---------- Visible keyboard focus (style.css removed every outline) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
outline:3px solid var(--sp-brand-dark) !important; outline-offset:3px; border-radius:4px;
}
footer a:focus-visible, .program-sec a:focus-visible, .right-contact a:focus-visible,
.inner-banner a:focus-visible, .top-line a:focus-visible{outline-color:#fff !important;}
/* ---------- Buttons: one action colour, pill shape kept ---------- */
.read-more a, .sch-appointment a, .top-right-outer .sch-appointment a{
background:var(--sp-action) !important; color:#fff; box-shadow:none !important;
}
.read-more a{min-height:44px; display:inline-flex; align-items:center; justify-content:center; line-height:1.3; text-align:center;}
.read-more a{padding:12px 28px; font-weight:bold;}
.read-more a:after, .sch-appointment a:after{display:none !important;}
.read-more a:hover, .read-more a:focus, .sch-appointment a:hover, .sch-appointment a:focus,
.top-right-outer .sch-appointment a:hover{background:var(--sp-action-hover) !important; color:#fff;}
.with-border a{background:transparent !important; border:2px solid var(--sp-action); color:var(--sp-action);}
.with-border a:hover{background:var(--sp-action) !important; color:#fff;}
/* Footer "Schedule Appointment" tab had an inline teal (#61b7b8, fails contrast) */
a.acuity-embed-button[style]{background:var(--sp-action) !important; color:#fff !important; min-height:44px; display:inline-flex !important; align-items:center;}
/* ---------- Header ---------- */
header{box-shadow:0 1px 0 var(--sp-border);}
header.fixed{box-shadow:0 2px 12px rgba(16,42,61,.10);}
.top-line h1, .top-line h1:after{background:var(--sp-brand-dark);}
.top-line h1{font-size:14px; letter-spacing:.12em; font-weight:bold;}
.top-line h6 a{display:inline-block; padding:8px 4px; color:var(--sp-brand-dark); text-decoration:underline; text-underline-offset:2px;}
.menu-bar ul li a{color:var(--sp-brand-dark); font-weight:bold; letter-spacing:.03em; min-height:44px;}
.menu-bar ul li a:after{background:var(--sp-action); transition:none;}
.menu-bar ul li.active > a:after, .menu-bar ul li > a:hover:after{left:0; right:0;}
/* Drop-down: white panel, dark text (the active-parent rule used to turn these white) */
.menu-bar ul li .sub-menu{background:#fff; border:1px solid var(--sp-border); box-shadow:var(--sp-shadow-hover); border-radius:12px; padding:6px 0; transition:opacity var(--sp-ease), top var(--sp-ease);}
.menu-bar ul li .sub-menu li{border-bottom:none;}
.menu-bar ul li .sub-menu li a, .menu-bar ul li.active .sub-menu li a{color:var(--sp-ink) !important; font-size:15px; padding:11px 18px; text-transform:none; letter-spacing:0; min-height:0;}
.menu-bar ul li .sub-menu li a:after{display:none !important;}
.menu-bar ul li .sub-menu li a:hover, .menu-bar ul li .sub-menu li a:focus{background:var(--sp-tint); color:var(--sp-brand-dark) !important;}
/* keyboard users can open the drop-down too */
.menu-bar ul li:focus-within .sub-menu{top:100%; opacity:1; visibility:visible;}
/* ---------- Home: banner ---------- */
.banner-content h2{text-shadow:0 1px 2px rgba(0,0,0,.18);}
.banner-content span{font-size:clamp(16px, .4vw + 14px, 18px); line-height:1.5;}
/* ---------- Home: "what we do" cards ---------- */
.what-are-doing-sec h3{color:var(--sp-brand-dark);}
.what-are-doing-box{
background:#fff; border:1px solid var(--sp-border); border-radius:var(--sp-radius-card);
box-shadow:var(--sp-shadow); padding:32px 0 30px;
}
.what-are-doing-box figure img{filter:none;}
.what-are-doing-box h5{color:var(--sp-brand-dark); font-weight:bold; font-size:20px;}
.what-are-doing-box p{color:var(--sp-ink-soft);}
.what-are-doing-box:hover, .what-are-doing-box:focus{background:#fff; border-color:var(--sp-brand); box-shadow:var(--sp-shadow-hover);}
.what-are-doing-box:hover h5{color:var(--sp-brand-dark);}
.what-are-doing-box:hover p{color:var(--sp-ink-soft);}
/* ---------- Home: programme cards (on brand-dark band) ---------- */
.program-sec{background:var(--sp-brand-dark);}
.program-sec h3{color:#fff;}
.program-box{border-radius:var(--sp-radius-card); overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.18); background:#fff;}
.program-box figure{border-radius:0; margin:-24px -20px 18px;}
.program-box figure img{display:block; aspect-ratio:270/170; object-fit:cover;}
.program-box-cont{padding:24px 20px 28px; text-align:center;}
.program-box-cont h4{margin:0 0 10px; font-weight:bold;}
.program-box-cont p{color:var(--sp-ink-soft);}
/* ---------- Testimonials ---------- */
.testimonials-sec h3{color:var(--sp-brand-dark);}
.testy-box{background:var(--sp-tint); border:1px solid var(--sp-border); border-left:4px solid var(--sp-action); border-radius:12px; box-shadow:none;}
.testy-box:before, .testy-box:after{filter:none; opacity:.35;}
.testy-box p{color:var(--sp-ink); font-size:17px;}
.testy-box span{color:var(--sp-brand-dark); font-size:18px;}
/* ---------- Home: about block ---------- */
.home-about-right h3{color:var(--sp-brand-dark);}
.home-about-right h4{color:var(--sp-action); margin-bottom:12px;}
.home-about-left picture img, .home-about-left figure{border-radius:var(--sp-radius-card); overflow:hidden;}
.trust-indicators li{color:var(--sp-brand-dark); font-weight:bold; line-height:1.9;}
.home-about-sec .read-more{margin-top:18px;}
/* ---------- Inner pages ---------- */
.about-us-sec h3, .qoute-form-sec h3{color:var(--sp-brand-dark);}
.about-us-sec > .fixed-wrapper > p{color:var(--sp-ink-soft); line-height:1.65;}
.about-us-outer-left figure{border-radius:var(--sp-radius-card);}
.about-us-outer-right h4{color:var(--sp-brand-dark);}
.qoute-form-sec{background:var(--sp-tint); border-top:1px solid var(--sp-border); border-bottom:1px solid var(--sp-border);}
.qoute-form-sec h5{color:var(--sp-ink); line-height:1.5;}
.qoute-form-sec iframe{max-width:100%; border:1px solid var(--sp-border); border-radius:12px; background:#fff;}
.privacy-sec h4{color:var(--sp-brand-dark);}
.privacy-sec p a, .simple-list li a, .about-us-sec p a{color:var(--sp-brand-dark);}
.inner-banner .breadcm li a, .inner-banner .breadcm li p{display:inline-block; padding:6px 0;}
/* FAQ accordion */
.accordian-tab{border-bottom:1px solid var(--sp-border); padding-bottom:18px;}
.accordian-tab:before{color:var(--sp-brand-dark);}
.accordion .accordion-head{min-height:44px; padding-right:48px;}
.accordion .accordion-head h4{color:var(--sp-brand-dark); font-weight:bold;}
.accordion .accordion-body p{color:var(--sp-ink);}
.arrow{border-top-color:var(--sp-action);}
.accordion-head.open .arrow{border-bottom-color:var(--sp-action);}
/* Contact */
.left-contact{border:1px solid var(--sp-border); box-shadow:var(--sp-shadow); border-radius:var(--sp-radius-card);} /* no overflow:hidden - it could clip the Zoho contact form on phones (review M1) */
.right-contact{background:var(--sp-brand-dark); border-radius:var(--sp-radius-card); box-shadow:var(--sp-shadow);}
.right-contact h3{color:#fff;}
.right-contact h5 span, .right-contact .cont-list li p{color:var(--sp-on-dark);}
/* Price page trust strip (had no styles before) */
.trust-intro-sec{float:left; width:100%; padding:64px 0 48px; text-align:center;}
.trust-message h3 a{color:var(--sp-brand-dark); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;}
.trust-message h3 a:hover{color:var(--sp-action);}
.trust-tagline{color:var(--sp-ink-soft); margin:14px 0 28px;}
.trust-intro-sec .trust-indicators{display:flex; flex-wrap:wrap; justify-content:center; gap:16px;}
.trust-item{flex:1 1 200px; max-width:260px; background:#fff; border:1px solid var(--sp-border); border-radius:var(--sp-radius-card); box-shadow:var(--sp-shadow); padding:22px 16px;}
.trust-icon{display:inline-flex; width:48px; height:48px; border-radius:50%; background:var(--sp-tint); color:var(--sp-action); align-items:center; justify-content:center; margin-bottom:10px;}
.trust-icon svg{width:24px; height:24px;}
.trust-item p{font-weight:bold; color:var(--sp-brand-dark);}
.qoute-form-sec h3 a{color:var(--sp-brand-dark); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px;}
.qoute-form-sec h4{color:var(--sp-ink-soft); max-width:760px; margin:0 auto;}
/* ---------- Footer ---------- */
footer{background:var(--sp-brand-dark);}
.foot-col h5{font-weight:bold; font-size:18px; letter-spacing:.02em;}
.f-about p, .cont-list li p{color:var(--sp-on-dark);}
.ar-list li{margin-bottom:4px;}
.ar-list li a{display:inline-block; padding:8px 0;} /* 44px-ish rows */
.ar-list li:before{top:15px;}
.cont-list li p a{padding:6px 0;}
.cont-list li p i.fa{color:#fff; font-size:18px;}
.social-list li a{width:44px; height:44px;}
footer .footer-btm p, footer .footer-btm p a{color:var(--sp-on-dark);}
footer .footer-btm{border-top:1px solid rgba(255,255,255,.15); margin-top:30px;}
.footer-btm p a{text-decoration:underline; text-underline-offset:2px;}
/* ---------- Mobile-first fixes ---------- */
@media only screen and (max-width:767px){
.what-are-doing-box{width:100%; margin-right:0; min-height:0;}
.program-box{width:100%; max-width:420px; margin:0 auto 20px; display:block;}
.trust-intro-sec{padding:40px 0 32px;}
.qoute-form-sec iframe{width:100% !important;}
.testy-box p{font-size:16px;}
.f-program, .f-contact{max-width:100%;}
.read-more a{width:100%; max-width:420px;}
}
@media only screen and (max-width:479px){
.banner-content span{font-size:15px;}
}
/* ---------- Lighter images (2026-10-14, CEO asked about image sizes) ----------
The faint background swirls were PNGs wrapped in SVG (250-380 KB each). Same artwork re-saved as WebP (23-39 KB).
Hero photo: 452 KB JPG -> 110 KB WebP, and a 960px copy (~45 KB) for phones. Originals are kept for the old pages. */
.main-banner, .inner-banner{background-color:var(--sp-brand-dark); background-image:url(../images/banner-1.webp);} /* colour shows while the WebP loads or if it fails (review L1) */
.home-about-sec:after{background-image:url(../images/home-right-bg.webp);}
.program-sec:before{background-image:url(../images/program-bg.webp);}
.about-us-sec:before{background-image:url(../images/about-inner-bg.webp);}
.qoute-form-sec:after{background-image:url(../images/qoute-form-bg.webp);}
footer:before{background-image:url(../images/footer-bg.webp);}
@media only screen and (max-width:767px){
.main-banner, .inner-banner{background-image:url(../images/banner-1-960.webp);}
}
/* ---------- Testimonials without the carousel script ----------
about-us.html used an owl-carousel that was never loaded, so owl.carousel.css kept every testimonial hidden.
Show them as simple responsive columns instead - no script needed. */
#testy-slide.owl-carousel{display:block; columns:3 300px; column-gap:24px; text-align:left;}
#testy-slide .item{break-inside:avoid; margin-bottom:24px;}
#testy-slide .testy-box{max-width:none; padding:44px 24px 24px;}
#testy-slide .testy-box p{padding:0; font-size:16px;}
#testy-slide .testy-box span{padding-right:44px; font-size:17px;}
/* Phone menu: hover/tap highlight was white on light blue (2.9:1) - use the dark brand blue */
.cd-dropdown-content a:hover, .cd-dropdown-content a:focus{background:var(--sp-brand-dark); color:#fff;}
/* ---------- Item 19 (round 4): each page's real title is its ; no visual change ----------
The top bar's "SURE PLANS" was the only on every page; it is now
with the same look,
and the banner title moved from
to with the same look. */
.top-line .top-brand{width:auto; border-radius:50px 0 0 50px; background:var(--sp-brand-dark); float:right; position:relative;
padding:25px 100px 5px 97px; color:#fff; margin:0; font-size:14px; line-height:30px; letter-spacing:.12em; font-weight:bold;}
.top-line .top-brand:after{position:absolute; left:100%; top:0; bottom:0; width:5000px; background:var(--sp-brand-dark); content:'';}
.banner-content h1.page-title{font-size:clamp(28px, 1.6vw + 18px, 44px); line-height:1.15; font-weight:bold; color:#fff;
margin-bottom:8px; font-family:var(--sp-font); text-shadow:0 1px 2px rgba(0,0,0,.18);}
.inner-banner h1.page-title{margin-bottom:10px;}
@media only screen and (max-width:1650px){ .top-line .top-brand{padding:25px 100px 5px 90px;} }
@media only screen and (max-width:1365px){ .top-line .top-brand{padding:25px 85px 5px;} }
@media only screen and (max-width:1169px){ .top-line .top-brand{padding:25px 60px 5px;} }
@media only screen and (max-width:991px){ .top-line .top-brand{padding:8px 30px; width:30%;} }
@media only screen and (max-width:767px){ .top-line .top-brand{width:100%; border-radius:0;} }
@media only screen and (max-width:575px){ .top-line .top-brand{line-height:26px;} }
@media only screen and (max-width:400px){ .inner-banner h1.page-title{margin-bottom:5px;} }
/* Item 29 (round 4): the header phone link was wrapped in the obsolete tag - same centring in CSS */
.sch-appointment .sch-phone, .sch-appointment .sch-phone a{text-align:center; line-height:normal;}
/* Item 25 (round 4): inline SVG icons replace Font Awesome 4.7 from stackpath (no outside icon font) */
i.ic{display:inline-block; font-style:normal; line-height:0; vertical-align:-0.125em;}
i.ic svg{display:block; width:1em; height:1em;}
.menu-bar ul li a i.ic{font-size:14px;}
.cont-list li p i.ic{font-size:20px; color:#fff; top:1px;}
.right-contact .cont-list li:first-child i.ic{font-size:20px;}
.social-list li a i.ic{display:block; width:20px; height:20px; font-size:20px; line-height:0;}
/* Item 24 (round 4): the floating "CALL 800-710-3174" box (#contact_scroll_box on contact-us, privacy, special) was moved by
a Netscape-era script (Floating_Contents) that also wrote a stray . Script removed. The box only ever showed on phones,
where the new sticky bottom bar (item 14, CSS position:fixed) now keeps Call / Text / Get a Quote on screen, so the box stays hidden. */
#contact_scroll_box{display:none !important;}
/* ---------- Items 14-16 (round 4): Direction C mobile ---------- */
/* 14: sticky bottom bar on phones - Call / Text / Get a Quote (Quick Quoter) */
.mobile-bar{display:none;}
@media only screen and (max-width:767px){
.mobile-bar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9990; background:#fff;
border-top:1px solid var(--sp-border); box-shadow:0 -4px 16px rgba(16,42,61,.10);
padding:8px 8px calc(8px + env(safe-area-inset-bottom)); gap:8px;}
.mobile-bar a{flex:1 1 0; min-height:52px; display:flex; align-items:center; justify-content:center; gap:8px;
border-radius:12px; border:1.5px solid var(--sp-action); color:var(--sp-action); font-weight:bold; font-size:15px;
line-height:1.1; text-align:left; padding:4px 6px;}
.mobile-bar a svg{flex:none; width:20px; height:20px;}
.mobile-bar a small{display:block; font-size:11px; font-weight:normal; color:var(--sp-ink-soft); margin-top:2px;}
.mobile-bar a.mb-quote{background:var(--sp-action); color:#fff;}
.mobile-bar a:active{background:var(--sp-tint);}
.mobile-bar a.mb-quote:active{background:var(--sp-action-hover);}
body{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
/* the footer is floated: clear it so the padding lands BELOW the copyright line, not above it (PROD-MD R4-FIXES item 2) */
body::after{content:""; display:table; clear:both;}
/* a focused form field never scrolls in behind the bar */
html{scroll-padding-bottom:84px;}
/* keep the Zoho SalesIQ chat bubble above the bar */
.zsiq_floatmain, .zsiq_theme1.zsiq_floatmain{bottom:84px !important;}
}
/* 15: simpler phone header - logo + menu only. The phone number moved to the bottom bar; Schedule Appointment moved into the
menu; the "SURE PLANS" bar is dropped on phones (the logo says it); Learning Login stays in the menu as Teams Login. */
.cd-dropdown-content .mobile-only{display:block;}
@media only screen and (max-width:767px){
.top-line{display:none;}
.top-right-outer .sch-appointment{display:none;}
.top-head{padding:14px 20px;}
.cd-dropdown-wrapper a.meanmenu-reveal{top:22px !important;}
}
/* 16: one main action per page styled as a button - price.html's "Get Your Free Quote Now" was a heading link */
.trust-message h3 a{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:12px 32px;
background:var(--sp-action); color:#fff; border-radius:var(--sp-radius-pill); text-decoration:none; font-size:clamp(20px, 1vw + 14px, 26px);}
.trust-message h3 a:hover, .trust-message h3 a:focus{background:var(--sp-action-hover); color:#fff;}
/* R4-FIXES item 1: on desktop the header's menu can be taller than its fixed-height slot (.header-outer, style.css/media.css),
and the banner painted over the overflow, so the menu could not be clicked at the top of the page. Lift the header above
the banner. The slot height is kept, so nothing jumps when the header turns fixed (.fixed keeps position:fixed, z-index 99). */
@media only screen and (min-width:768px){
header{position:relative; z-index:50;}
}
/* index hero: Get a Quote button (CEO 10-16) - space above it inside the banner */
.banner-content .banner-cta{margin-top:22px;}
/* CEO 10-16: header phone button showed the old Acuity calendar icon - now a phone icon (same drawing as the phone bar) */
.sch-appointment .sch-phone a:before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") no-repeat center/100% 100%;}
/* CEO 10-16: the "SURE PLANS" tab now goes home, in an Optima-style face (Optima on Mac/iPhone, Candara on Windows) */
.top-line .top-brand, .top-line .top-brand a{font-family:Optima, Candara, "Segoe UI", sans-serif; letter-spacing:.14em;}
.top-line .top-brand a{color:#fff; text-decoration:none;}
.top-line .top-brand a:hover, .top-line .top-brand a:focus{text-decoration:underline; text-underline-offset:3px;}