/* ========================================================================== Selectsys base layer -------------------------------------------------------------------------- Two scopes, deliberately separated so the long tail is not disturbed before it has been validated: GLOBAL Rules that cannot change layout on any existing page: focus states, link colour, reduced motion, image behaviour, form control appearance, and the Bootstrap variable overrides that retune btn/link/border colour to the brand. .sx-page Everything that changes composition: type scale, content width, reading measure and section rhythm. Applied by adding the class to , which header.php does when a page opts in. Today only the homepage opts in. Requires sx-tokens.css. ========================================================================== */ /* ========================================================================== GLOBAL — safe on every one of the 388 templates ========================================================================== */ /* Bootstrap's own variables, retuned to the brand. This is how 1,127 existing buttons and every link inherit the new palette without a single markup change, and without fighting Bootstrap's rules. */ :root{ --bs-primary:#214497; --bs-primary-rgb:33,68,151; --bs-link-color:#214497; --bs-link-color-rgb:33,68,151; --bs-link-hover-color:#1A3778; --bs-link-hover-color-rgb:26,55,120; --bs-border-color:#E3E7EF; --bs-border-radius:8px; } /* --bs-heading-color, --bs-body-color and --bs-emphasis-color are deliberately NOT set globally. Legacy pages have dark hero sections whose headings inherit white from an ancestor; forcing a dark heading colour globally put near-black headings on a blue ground. They are scoped to .sx-page instead, and will be promoted when the long tail has been validated. */ .sx-page{ --bs-heading-color:#101A31; --bs-body-color:#48526A; --bs-emphasis-color:#101A31; } /* one focus treatment everywhere. The site had none that was reliably visible. */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{ outline:2px solid var(--sx-blue); outline-offset:2px; border-radius:4px; } /* the site animated on scroll through WOW.js, which set visibility:hidden inline on 7,784 elements. The initialiser has been removed, so these classes are now inert; this rule guarantees they can never hide content again even if a stray copy of the library is reintroduced. */ .wow, [class*="fadeIn"], [class*="fadeInUp"], [class*="fadeInDown"], [class*="fadeInLeft"], [class*="fadeInRight"]{ visibility:visible !important; animation-name:none !important; } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } img{max-width:100%;height:auto} /* skip link, for keyboard users. Invisible until focused. */ .sx-skip{position:absolute;left:-9999px;top:0;z-index:2000} .sx-skip:focus{ left:12px;top:12px;padding:10px 16px;background:#fff;color:var(--sx-ink); border-radius:var(--sx-radius);box-shadow:var(--sx-shadow-lg); font-weight:var(--sx-w-semi);text-decoration:none; } /* ========================================================================== PAGE SCOPE — .sx-page only ========================================================================== */ body.sx-page{ font-family:var(--sx-font); font-size:var(--sx-body-size); line-height:var(--sx-lh-body); color:var(--sx-body); background:var(--sx-white); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } /* ------------------------------------------------------------- typography */ .sx-page h1,.sx-page h2,.sx-page h3,.sx-page h4,.sx-page h5,.sx-page h6{ color:var(--sx-ink); font-weight:var(--sx-w-bold); margin:0; text-wrap:balance; } .sx-page h1{font-size:var(--sx-h1);line-height:var(--sx-lh-h1);letter-spacing:var(--sx-track-h1)} .sx-page h2{font-size:var(--sx-h2);line-height:var(--sx-lh-h2);letter-spacing:var(--sx-track-h2)} .sx-page h3{font-size:var(--sx-h3);line-height:var(--sx-lh-h3);letter-spacing:var(--sx-track-h3);font-weight:var(--sx-w-semi)} .sx-page h4{font-size:var(--sx-h4);line-height:1.35;letter-spacing:-.01em;font-weight:var(--sx-w-semi)} .sx-page p{margin:0 0 var(--sx-4)} .sx-page strong,.sx-page b{color:var(--sx-ink);font-weight:var(--sx-w-semi)} .sx-page a{color:var(--sx-blue);text-decoration:none;text-underline-offset:3px} .sx-page a:hover{color:var(--sx-blue-hover);text-decoration:underline} /* the reading measure. This is the single change that most affects how the site reads: body copy was running to a measured median of 101 characters per line and a p90 of 153. Tables, diagrams and media are excluded below. */ .sx-page .sx-section p, .sx-page .sx-section li{max-width:var(--sx-measure)} .sx-page .sx-lead{ font-size:var(--sx-lead);line-height:1.6;color:var(--sx-body); max-width:var(--sx-measure-lead); } /* anything that genuinely needs width opts out */ .sx-page .sx-wide p, .sx-page .sx-wide li, .sx-page table p, .sx-page table li, .sx-page .sx-card p, .sx-page .sx-card li, .sx-page figure p{max-width:none} /* centred blocks centre their measure too */ .sx-page .sx-center{text-align:center} .sx-page .sx-center p, .sx-page .sx-center .sx-lead{margin-left:auto;margin-right:auto} /* eyebrow: says what kind of section follows */ .sx-page .sx-eyebrow{ display:block; font-size:12px; font-weight:var(--sx-w-semi); letter-spacing:var(--sx-track-eyebrow); text-transform:uppercase; color:var(--sx-blue); margin:0 0 var(--sx-3); } .sx-page .sx-eyebrow.on-dark{color:var(--sx-blue-on-dark)} /* small print */ .sx-page .sx-small{font-size:var(--sx-small);line-height:1.55;color:var(--sx-muted)} /* ------------------------------------------------------------------ layout */ .sx-page .sx-wrap{ width:100%; max-width:calc(var(--sx-max) + (var(--sx-gutter) * 2)); margin-inline:auto; padding-inline:var(--sx-gutter); } /* section rhythm: one value, not the eight the audit found */ .sx-page .sx-section{padding-block:var(--sx-section-y)} .sx-page .sx-section.tight{padding-block:var(--sx-section-y-tight)} /* legacy style.css sets section{padding:80px !important}, which also defeats inline padding; these two utilities are the only way to run one section into the next (a lead-in sentence directly above the section it introduces). */ .sx-page .sx-section.sx-flush-bottom{padding-bottom:0 !important;border-bottom:0 !important} .sx-page .sx-section.sx-flush-top{padding-top:var(--sx-6) !important;border-top:0 !important} /* the only three grounds */ .sx-page .sx-section.ground-white{background:var(--sx-white)} .sx-page .sx-section.ground-tint{ background:var(--sx-tint); border-block:1px solid var(--sx-line); } .sx-page .sx-section.ground-blue{ background:var(--sx-blue); color:#D6E0F5; } .sx-page .sx-section.ground-blue :is(h1,h2,h3,h4){color:#fff} .sx-page .sx-section.ground-blue a:not(.sx-btn){color:var(--sx-blue-on-dark)} .sx-page .sx-section.ground-blue strong{color:#fff} /* .sx-lead, .sx-small and .sx-list all set an explicit colour, which would otherwise override the band's light text and land dark-on-blue */ .sx-page .sx-section.ground-blue :is(.sx-lead,.sx-small,p,li){color:#D6E0F5} /* section head: one composition for every section opener */ .sx-page .sx-head{margin-bottom:var(--sx-6);max-width:72ch} .sx-page .sx-head.sx-center{margin-inline:auto} .sx-page .sx-head h2 + p{margin-top:var(--sx-4)} .sx-page .sx-head > :last-child{margin-bottom:0} /* generic grid */ .sx-page .sx-grid{display:grid;gap:var(--sx-5);grid-template-columns:minmax(0,1fr)} @media (min-width:640px){ .sx-page .sx-grid.cols-2, .sx-page .sx-grid.cols-3, .sx-page .sx-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:992px){ .sx-page .sx-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .sx-page .sx-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} } /* copy beside supporting content */ .sx-page .sx-split{display:grid;gap:var(--sx-6);grid-template-columns:minmax(0,1fr);align-items:center} @media (min-width:992px){ .sx-page .sx-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sx-8)} .sx-page .sx-split.top{align-items:start} .sx-page .sx-split.lead-left{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} .sx-page .sx-split.start{align-items:start} } /* lists */ .sx-page .sx-list{list-style:none;margin:0;padding:0} .sx-page .sx-list li{ position:relative;padding-left:26px;margin-bottom:var(--sx-3); line-height:var(--sx-lh-tight); } .sx-page .sx-list li::before{ content:"";position:absolute;left:4px;top:.62em; width:7px;height:7px;border-radius:50%;background:var(--sx-blue-soft); } .sx-page .sx-section.ground-blue .sx-list li::before{background:var(--sx-blue-on-dark)} .sx-page .sx-list.two-col{columns:1} @media (min-width:760px){.sx-page .sx-list.two-col{columns:2;column-gap:var(--sx-7)}} .sx-page .sx-list.two-col li{break-inside:avoid} /* lists inside a wide card opt out of the page measure by default (see the .sx-card exception above), which is right for short card copy but wrong for a full-sentence list. .measured puts the cap back. */ .sx-page .sx-list.measured li{max-width:76ch} /* ------------------------------------------------------------------ mobile */ @media (max-width:767px){ .sx-page .sx-wrap{padding-inline:var(--sx-gutter-mob)} .sx-page .sx-section{padding-block:var(--sx-section-y-mobile)} .sx-page .sx-section.tight{padding-block:var(--sx-7)} .sx-page .sx-head{margin-bottom:var(--sx-5)} .sx-page .sx-lead{font-size:16.5px} } /* homepage: technology -> operational execution bridge statement */ /* Homepage bridge into Insurance BPO: one compact, emphasised transition line */ .sx-page .sx-section:has(+ .sx-bridge){padding-bottom:var(--sx-6) !important} .sx-page .sx-section.sx-bridge{padding-top:16px !important;padding-bottom:8px !important} .sx-page .sx-section p.sx-bridge-text{font-size:clamp(19px,1.5vw,22px) !important;line-height:1.4 !important;font-weight:500;color:var(--sx-ink);max-width:none;text-align:left;margin:0;padding:6px 0 6px 22px;border-left:4px solid var(--sx-blue)} @media (max-width:767px){.sx-page .sx-section p.sx-bridge-text{font-size:18px !important;padding-left:16px}} /* homepage: deliberate desktop gutter between the RQB visual and its copy */ @media (min-width:992px){.sx-page .sx-split.wide-gutter{gap:56px}} @media (min-width:1200px){.sx-page .sx-split.wide-gutter{gap:88px}}