/* ========================================================================== Full Spectrum Safety Training — fsst.uk Built to Brand Guidelines v1.1 (August 2026). Colour rules from the guidelines: - Navy is site-wide: header, footer, logo. - Each training strand owns its page. Set data-strand on and the strand colour flows into the hero, buttons, icons and dividers. - Strong strand colour for headers/buttons/icons; pale tint for large background areas and cards. Body text stays dark on white or tint. ========================================================================== */ :root { /* Brand core */ --navy: #0C447C; --navy-deep: #042C53; --shield-outline: #B5D4F4; /* Neutrals */ --slate: #5F5E5A; --warm: #F1EFE8; --ink: #22262B; --line: #E1DFD8; --white: #fff; /* The four training strands */ --first-aid: #3B6D11; --first-aid-tint: #EAF3DE; --fire: #A32D2D; --fire-tint: #FCEBEB; --hands: #534AB7; --hands-tint: #EEEDFE; --food: #BA7517; --food-tint: #FAEEDA; /* Active strand — navy by default, overridden per page below. */ --c: var(--navy); --c-deep: var(--navy-deep); --t: var(--warm); --wrap: 1140px; --radius: 10px; --radius-lg: 16px; --shadow: 0 1px 2px rgba(4, 44, 83, .06), 0 8px 24px -12px rgba(4, 44, 83, .18); --shadow-lg: 0 2px 4px rgba(4, 44, 83, .06), 0 18px 40px -16px rgba(4, 44, 83, .24); /* The guidelines name Calibri as the everyday brand typeface, and the supplied wordmark is set in it. Carlito is the metric-compatible open equivalent; after that we fall back to the platform UI face. No web fonts are loaded, so there is no third-party request and nothing to block first paint. */ --sans: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --body: Calibri, Carlito, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } body[data-strand="first-aid"] { --c: var(--first-aid); --c-deep: #2C5209; --t: var(--first-aid-tint); } body[data-strand="fire-safety"] { --c: var(--fire); --c-deep: #7E2020; --t: var(--fire-tint); } body[data-strand="health-and-safety"]{ --c: var(--hands); --c-deep: #3F3894; --t: var(--hands-tint); } /* Food safety is the one strand whose brand colour cannot carry white text: #BA7517 gives white only 3.7:1, below the 4.5:1 WCAG AA threshold, and only 3.2:1 against its own tint. So this page works in a darker amber for anything text-bearing, and keeps the brand amber for decoration — the spectrum rule, the strand dots and the card accents, where 3:1 is the bar. */ body[data-strand="food-safety"] { --c: #8E5810; --c-deep: #6B4110; --t: var(--food-tint); } /* --------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; height: auto; } a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--navy); text-wrap: balance; } h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); } h2 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.15rem); } h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); } h4 { font-size: 1.0625rem; } p { text-wrap: pretty; } :focus-visible { outline: 3px solid var(--c); outline-offset: 2px; border-radius: 3px; } /* On any dark section the strand colour gives the focus ring only 1.0–1.7:1 against its background, well under the 3:1 WCAG 2.4.11 requires. White gives 5.9:1 on the amber hero and better everywhere else. */ .topbar :focus-visible, .masthead :focus-visible, .hero :focus-visible, .cta-band :focus-visible, .bg-navy :focus-visible, footer.site :focus-visible { outline-color: #fff; } ::selection { background: var(--shield-outline); color: var(--navy-deep); } /* ------------------------------------------------------------- layout */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; } .wrap-narrow { max-width: 760px; } section { padding-block: clamp(2.75rem, 5.5vw, 4.75rem); } section.tight { padding-block: clamp(2rem, 3.5vw, 3rem); } .bg-warm { background: var(--warm); } .bg-tint { background: var(--t); } .bg-navy { background: var(--navy-deep); color: #E8EEF6; } .bg-navy h2, .bg-navy h3 { color: var(--white); } .grid { display: grid; gap: 1.25rem; } .g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .g4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); } .lede { font-size: 1.1875rem; color: var(--slate); max-width: 62ch; } .eyebrow { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c); margin-bottom: .6rem; } .section-head { max-width: 62ch; margin-bottom: 2rem; } .center { text-align: center; margin-inline: auto; } /* Skip link */ .skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--white); color: var(--navy); padding: .7rem 1.1rem; border-radius: var(--radius); font-weight: 600; box-shadow: var(--shadow-lg); transition: top .15s ease; } .skip:focus { top: 1rem; } /* ------------------------------------------------------------- header */ .topbar { background: var(--navy); color: #DCE7F3; font-size: .875rem; border-bottom: 1px solid rgba(255, 255, 255, .12); } .topbar .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: center; justify-content: space-between; padding-block: .5rem; } .topbar a { color: var(--white); font-weight: 600; text-decoration: none; } .topbar a:hover { text-decoration: underline; } .topbar .strands { display: flex; gap: 1.1rem; } .topbar .strands span { display: inline-flex; align-items: center; gap: .4rem; } .topbar .dot { width: .55rem; height: .55rem; border-radius: 2px; flex: none; } .masthead { position: sticky; top: 0; z-index: 100; background: var(--navy-deep); box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 6px 20px -8px rgba(4, 44, 83, .5); } .masthead .wrap { display: flex; align-items: center; gap: 1rem; min-height: 74px; } .brand { margin-right: auto; display: block; line-height: 0; padding-block: .5rem; } .brand img { height: 52px; width: auto; } .nav-toggle { margin-left: auto; display: none; background: transparent; border: 1.5px solid rgba(255, 255, 255, .35); color: var(--white); border-radius: var(--radius); font: 600 .9375rem/1 var(--sans); padding: .6rem .8rem; align-items: center; gap: .5rem; cursor: pointer; } .nav-toggle:hover { border-color: rgba(255, 255, 255, .7); } .nav-toggle svg { width: 18px; height: 18px; } nav.main ul { display: flex; align-items: center; gap: .15rem; list-style: none; padding: 0; } nav.main a { display: block; padding: .55rem .7rem; font: 600 .9375rem/1.3 var(--sans); color: #DCE7F3; text-decoration: none; border-radius: var(--radius); } nav.main a:hover { color: var(--white); background: rgba(255, 255, 255, .1); } nav.main a[aria-current="page"] { color: var(--white); box-shadow: inset 0 -3px 0 var(--shield-outline); } nav.main .btn { margin-left: .6rem; } /* The guidelines keep the logo and main navigation navy on every page, so the header must look identical whichever strand you are in. These override the strand colour that themes the rest of the page. */ .masthead .btn-primary { background: var(--white); border-color: var(--white); color: var(--navy-deep); } .masthead .btn-primary:hover { background: var(--warm); border-color: var(--warm); color: var(--navy-deep); } @media (max-width: 940px) { .nav-toggle { display: inline-flex; } nav.main { display: none; position: absolute; inset-inline: 0; top: 100%; background: var(--navy-deep); border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .5); padding: .75rem 1.25rem 1.25rem; } nav.main.open { display: block; } nav.main ul { flex-direction: column; align-items: stretch; gap: .1rem; } nav.main a { padding: .8rem .6rem; font-size: 1rem; } /* A tint reads better than a rounded sliver at this size. */ nav.main a[aria-current="page"] { box-shadow: none; background: rgba(255, 255, 255, .13); } nav.main .btn { margin: .75rem 0 0; justify-content: center; } .topbar .strands { display: none; } } /* ------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font: 700 1rem/1.2 var(--sans); padding: .85rem 1.4rem; border: 2px solid transparent; border-radius: var(--radius); text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn:active { transform: none; } .btn svg { width: 18px; height: 18px; flex: none; } .btn-primary { background: var(--c); border-color: var(--c); color: var(--white); } .btn-primary:hover { background: var(--c-deep); border-color: var(--c-deep); color: var(--white); } .btn-outline { background: transparent; border-color: var(--c); color: var(--c); } .btn-outline:hover { background: var(--c); color: var(--white); } .btn-light { background: var(--white); border-color: var(--white); color: var(--navy); } .btn-light:hover { background: var(--warm); border-color: var(--warm); color: var(--navy-deep); } .btn-ghost-light { background: transparent; border-color: rgba(255, 255, 255, .55); color: var(--white); } .btn-ghost-light:hover { background: rgba(255, 255, 255, .14); border-color: var(--white); color: var(--white); } .btn-sm { font-size: .9rem; padding: .6rem 1rem; } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; } /* --------------------------------------------------------------- hero */ .hero { background: linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 100%); color: #E8EEF6; padding-block: clamp(2.75rem, 6vw, 5rem); position: relative; } .hero h1 { color: var(--white); } /* Light enough to clear 4.5:1 against every strand colour, not just navy. */ .hero p { color: #DCE7F3; } .hero .lede { color: #E8EEF6; } .hero-grid { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } @media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; gap: 2rem; } } /* Strand hero: the strand colour takes over the page. */ .hero-strand { background: linear-gradient(150deg, var(--c-deep) 0%, var(--c) 100%); } /* The spectrum rule — the four strands as a hairline divider. */ .spectrum { display: flex; height: 5px; } .spectrum i { flex: 1; } .spectrum i:nth-child(1) { background: var(--first-aid); } .spectrum i:nth-child(2) { background: var(--fire); } .spectrum i:nth-child(3) { background: var(--hands); } .spectrum i:nth-child(4) { background: var(--food); } .pill-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; } .pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: .4rem .85rem; font: 600 .875rem/1 var(--sans); color: var(--white); } .pill .dot { width: .6rem; height: .6rem; border-radius: 2px; } /* Hero side card */ .card-quote { background: var(--white); color: var(--ink); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-lg); } .card-quote h2 { font-size: 1.2rem; margin-bottom: .9rem; } .card-quote ul { list-style: none; padding: 0; display: grid; gap: .7rem; margin-bottom: 1.25rem; } .card-quote li { display: grid; grid-template-columns: 22px 1fr; gap: .65rem; font-size: .9375rem; } .card-quote .tick { color: var(--c); margin-top: .18rem; } .card-quote .btn { width: 100%; } .card-quote .note { font-size: .8125rem; color: var(--slate); margin-top: .85rem; text-align: center; } /* ------------------------------------------------------------- cards */ .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; } .card h3 { margin-bottom: .5rem; } .card p { font-size: .9375rem; color: var(--slate); } /* Strand cards on the home page — each keeps its own colour. */ .strand-card { --sc: var(--navy); --st: var(--warm); /* --sc paints borders, bullets and icons; --sc-ink carries the text, so the amber card can stay brand-amber while its heading meets contrast. */ --sc-ink: var(--sc); background: var(--st); border: 1px solid transparent; border-top: 4px solid var(--sc); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease; } .strand-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .strand-card[data-s="first-aid"] { --sc: var(--first-aid); --st: var(--first-aid-tint); } .strand-card[data-s="fire-safety"] { --sc: var(--fire); --st: var(--fire-tint); } .strand-card[data-s="health-and-safety"]{ --sc: var(--hands); --st: var(--hands-tint); } .strand-card[data-s="food-safety"] { --sc: var(--food); --sc-ink: #8E5810; --st: var(--food-tint); } .strand-card h3 { color: var(--sc-ink); } .strand-card .ico { color: var(--sc); margin-bottom: .9rem; } .strand-card .ico svg { width: 34px; height: 34px; } .strand-card ul { list-style: none; padding: 0; margin: .9rem 0 1.25rem; display: grid; gap: .4rem; font-size: .9375rem; } .strand-card li { padding-left: 1.1rem; position: relative; } .strand-card li::before { content: ""; position: absolute; left: 0; top: .62em; width: .45rem; height: .45rem; border-radius: 1px; background: var(--sc); } .strand-card .more { margin-top: auto; font: 700 .9375rem/1 var(--sans); color: var(--sc-ink); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; } .strand-card .more:hover { gap: .65rem; text-decoration: underline; } /* Feature list (why choose us) */ .feature { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start; } .feature .ico { color: var(--c); } .feature .ico svg { width: 32px; height: 32px; } .feature h3 { font-size: 1.0625rem; margin-bottom: .25rem; } .feature p { font-size: .9375rem; color: var(--slate); } /* Numbered steps */ .steps { counter-reset: step; } .step { position: relative; padding-left: 3.4rem; } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c); color: var(--white); display: grid; place-items: center; font: 700 1.1rem/1 var(--sans); } .step h3 { margin-bottom: .3rem; } .step p { font-size: .9375rem; color: var(--slate); } /* ------------------------------------------------------- testimonials */ .quote { background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--radius); padding: 1.4rem 1.5rem; display: flex; flex-direction: column; } .quote blockquote { font-size: 1rem; line-height: 1.6; margin-bottom: .9rem; } .quote figcaption { font-size: .8125rem; color: var(--slate); margin-top: auto; } .quote figcaption strong { display: block; color: var(--navy); font-size: .875rem; font-family: var(--sans); } /* ------------------------------------------------- course detail page */ .breadcrumb { font-size: .875rem; padding-block: .9rem; } .breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; color: var(--slate); } .breadcrumb a { color: var(--slate); } .breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--line); } .breadcrumb [aria-current] { color: var(--ink); font-weight: 600; } .course { border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; scroll-margin-top: 90px; } .course + .course { margin-top: 1.75rem; } .course-head { padding: 1.5rem 1.5rem 1.25rem; background: var(--t); } .course-head h2 { color: var(--c-deep); margin-bottom: .4rem; } .course-head p { color: var(--slate); font-size: .9375rem; max-width: 60ch; } .course-body { padding: 1.5rem; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } @media (max-width: 800px) { .course-body { grid-template-columns: 1fr; gap: 1.5rem; } } .meta-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .tag { display: inline-flex; align-items: center; gap: .4rem; background: var(--white); border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px; padding: .35rem .8rem; font: 600 .8125rem/1 var(--sans); color: var(--c-deep); } .tag svg { width: 14px; height: 14px; } .covers { list-style: none; padding: 0; display: grid; gap: .65rem; } .covers li { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; font-size: .9375rem; } .covers .tick { color: var(--c); margin-top: .22rem; } .price-box { background: var(--t); border-radius: var(--radius); padding: 1.25rem; } .price-box .amount { font: 700 1.9rem/1 var(--sans); color: var(--c-deep); } .price-box .basis { font-size: .875rem; color: var(--slate); margin-top: .3rem; } .price-box dl { margin: 1rem 0 1.25rem; display: grid; gap: .5rem; font-size: .875rem; } .price-box dl > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted rgba(0, 0, 0, .16); padding-bottom: .45rem; } .price-box dt { color: var(--slate); } .price-box dd { margin: 0; font-weight: 600; text-align: right; } .price-box .btn { width: 100%; } .subhead { font: 700 .78rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: .8rem; } /* Jump links along the top of a strand page */ .jump { display: flex; flex-wrap: wrap; gap: .5rem; } .jump a { font: 600 .875rem/1 var(--sans); text-decoration: none; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1rem; color: var(--c-deep); } .jump a:hover { background: var(--c); border-color: var(--c); color: var(--white); } /* ----------------------------------------------------------- prose */ .prose h2 { margin: 2.25rem 0 .75rem; } .prose h3 { margin: 1.75rem 0 .5rem; } .prose p, .prose ul, .prose ol { margin-bottom: 1rem; } .prose ul, .prose ol { padding-left: 1.35rem; } .prose li { margin-bottom: .4rem; } .prose > :first-child { margin-top: 0; } .prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .9375rem; } .prose th, .prose td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; } .prose th { font-family: var(--sans); color: var(--navy); background: var(--warm); } .table-scroll { overflow-x: auto; } /* Accordion FAQ */ .faq { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); } .faq + .faq { margin-top: .75rem; } .faq summary { cursor: pointer; list-style: none; padding: 1.05rem 3rem 1.05rem 1.25rem; position: relative; font: 600 1.0625rem/1.4 var(--sans); color: var(--navy); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 1.25rem; top: 1.45rem; width: 10px; height: 10px; border-right: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(45deg); transition: transform .18s ease; } .faq[open] summary::after { transform: rotate(225deg); } .faq summary:hover { background: var(--t); } .faq .faq-body { padding: 0 1.25rem 1.25rem; } .faq .faq-body p { font-size: .9375rem; } .faq .faq-body p + p { margin-top: .7rem; } /* --------------------------------------------------------------- form */ form .field { margin-bottom: 1.15rem; } form label, .label { display: block; font: 600 .9375rem/1.4 var(--sans); color: var(--navy); margin-bottom: .35rem; } form .hint { font-size: .8125rem; color: var(--slate); margin-top: .3rem; } .req { color: var(--fire); } input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--white); padding: .7rem .85rem; /* 3.5:1 against white — the boundary of a form control needs 3:1 (WCAG 1.4.11). */ border: 1.5px solid #8C8880; border-radius: var(--radius); transition: border-color .15s ease, box-shadow .15s ease; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235F5E5A' d='M6 8 0 1.4 1.4 0 6 4.6 10.6 0 12 1.4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 11px; padding-right: 2.4rem; } textarea { min-height: 7.5rem; resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); outline: none; } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--fire); } .err { display: none; font-size: .8125rem; color: #8A1F1F; margin-top: .3rem; font-weight: 600; } .err.show { display: block; } .check { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: start; } .check input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--c); } .check label { font-weight: 400; font-family: var(--body); color: var(--ink); font-size: .9375rem; margin: 0; } .form-grid { display: grid; gap: 0 1.15rem; grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } .span2 { grid-column: 1 / -1; } fieldset { border: 0; padding: 0; margin: 0 0 1.75rem; } legend { font: 700 1.15rem/1.3 var(--sans); color: var(--navy); margin-bottom: .25rem; padding: 0; } .fieldset-note { font-size: .9375rem; color: var(--slate); margin-bottom: 1.15rem; } .booking-layout { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; } @media (max-width: 900px) { .booking-layout { grid-template-columns: 1fr; } } .sticky-side { position: sticky; top: 100px; } /* Live estimate panel */ .estimate { background: var(--warm); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; } .estimate h2 { font-size: 1.15rem; margin-bottom: .25rem; } .estimate .course-name { font: 600 .9375rem/1.45 var(--sans); color: var(--navy); margin-bottom: 1rem; } .estimate dl { display: grid; gap: .55rem; font-size: .9375rem; margin-bottom: 1rem; } .estimate dl > div { display: flex; justify-content: space-between; gap: 1rem; } .estimate dt { color: var(--slate); } .estimate dd { margin: 0; font-weight: 600; } .estimate .total { border-top: 2px solid var(--navy); padding-top: .75rem; font-size: 1.05rem; } .estimate .total dd { font: 700 1.35rem/1 var(--sans); color: var(--navy); } .estimate .disclaimer { font-size: .8125rem; color: var(--slate); border-top: 1px solid var(--line); padding-top: .9rem; } .estimate .empty { font-size: .9375rem; color: var(--slate); } .warn { background: var(--fire-tint); border-left: 3px solid var(--fire); border-radius: 4px; padding: .7rem .85rem; font-size: .875rem; color: #7E2020; margin-bottom: 1rem; } .callout { background: var(--t); border-radius: var(--radius-lg); padding: 1.5rem; border-left: 4px solid var(--c); } .callout h3 { color: var(--c-deep); margin-bottom: .5rem; } .callout p { font-size: .9375rem; } .callout p + p { margin-top: .6rem; } .form-status { border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1.25rem; font-size: .9375rem; } .form-status[data-kind="error"] { background: var(--fire-tint); border-left: 4px solid var(--fire); color: #7E2020; } .form-status[data-kind="working"] { background: var(--warm); border-left: 4px solid var(--navy); } .form-status a { color: inherit; font-weight: 700; } [hidden] { display: none !important; } /* Contact tiles */ .contact-tile { display: flex; gap: 1rem; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.35rem; } .contact-tile .ico { color: var(--c); flex: none; } .contact-tile .ico svg { width: 26px; height: 26px; } .contact-tile h3 { font-size: 1rem; margin-bottom: .2rem; } .contact-tile a { font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; text-decoration: none; } .contact-tile a:hover { text-decoration: underline; } .contact-tile p { font-size: .875rem; color: var(--slate); margin-top: .2rem; } /* CTA band */ .cta-band { background: linear-gradient(150deg, var(--navy-deep) 0%, var(--navy) 100%); color: #E8EEF6; } .cta-band h2 { color: var(--white); } .cta-band p { color: #CBDAEC; } .cta-inner { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: center; justify-content: space-between; } .cta-inner > div { max-width: 56ch; } /* ------------------------------------------------------------- footer */ footer.site { background: var(--navy-deep); color: #B9C9DC; font-size: .9375rem; } footer.site .cols { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); padding-block: 3rem 2rem; } @media (max-width: 860px) { footer.site .cols { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { footer.site .cols { grid-template-columns: 1fr; } } footer.site img.mark { height: 58px; width: auto; margin-bottom: 1rem; } footer.site h2 { font-size: .8125rem; font-family: var(--sans); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); margin-bottom: .9rem; } footer.site ul { list-style: none; padding: 0; display: grid; gap: .5rem; } footer.site a { color: #D3E0EE; text-decoration: none; } footer.site a:hover { color: var(--white); text-decoration: underline; } footer.site p { margin-bottom: .6rem; line-height: 1.6; } footer.site .strand-key { display: inline-flex; align-items: center; gap: .5rem; } footer.site .strand-key .dot { width: .5rem; height: .5rem; border-radius: 2px; flex: none; } .legal { border-top: 1px solid rgba(255, 255, 255, .14); padding-block: 1.35rem; font-size: .8125rem; color: #93A8C0; } .legal .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; } .legal a { color: #B9C9DC; } /* --------------------------------------------------------------- misc */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media print { .masthead, .topbar, nav.main, .nav-toggle, .cta-band, .skip, .jump { display: none !important; } body { font-size: 11pt; } a { text-decoration: none; color: var(--ink); } .hero, .hero-strand, footer.site { background: none !important; color: var(--ink) !important; } .hero h1, .hero p, footer.site a { color: var(--ink) !important; } .course, .card { break-inside: avoid; border: 1px solid #ccc; } }