:root { --wd-text-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; --wd-text-font-weight: 400; --wd-text-color: #767676; --wd-text-font-size: 14px; --wd-title-font: var(--wd-text-font); --wd-title-font-weight: 600; --wd-title-color: #242424; --wd-entities-title-font: var(--wd-title-font); --wd-entities-title-font-weight: 500; --wd-entities-title-color: #333333; --wd-entities-title-color-hover: rgb(51 51 51 / 65%); --wd-alternative-font: var(--wd-text-font); --wd-widget-title-font: var(--wd-title-font); --wd-widget-title-font-weight: 600; --wd-widget-title-transform: uppercase; --wd-widget-title-color: #333; --wd-widget-title-font-size: 16px; --wd-header-el-font: var(--wd-text-font); --wd-header-el-font-weight: 700; --wd-header-el-transform: uppercase; --wd-header-el-font-size: 13px; --wd-otl-style: dotted; --wd-otl-width: 2px; --wd-primary-color: #83b735; --wd-alternative-color: #fbbc34; --btn-default-bgcolor: #f7f7f7; --btn-default-bgcolor-hover: #efefef; --btn-accented-bgcolor: #83b735; --btn-accented-bgcolor-hover: #74a32f; --wd-form-brd-width: 2px; --notices-success-bg: #459647; --notices-success-color: #fff; --notices-warning-bg: #E0B252; --notices-warning-color: #fff; --wd-link-color: #333333; --wd-link-color-hover: #242424; } .wd-age-verify-wrap { --wd-popup-width: 500px; } .wd-popup.wd-promo-popup { background-color: #111111; background-image: none; background-repeat: no-repeat; background-size: contain; background-position: left center; } .wd-promo-popup-wrap { --wd-popup-width: 800px; } :is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content { max-height: 223px; } .wd-page-title .wd-page-title-bg img { object-fit: cover; object-position: center center; } .wd-footer { background-color: #ffffff; background-image: none; } .mfp-wrap.wd-popup-quick-view-wrap { --wd-popup-width: 920px; } :root{ --wd-form-brd-radius: 0px; --btn-default-color: #333; --btn-default-color-hover: #333; --btn-accented-color: #fff; --btn-accented-color-hover: #fff; --btn-default-brd-radius: 0px; --btn-default-box-shadow: none; --btn-default-box-shadow-hover: none; --btn-default-box-shadow-active: none; --btn-default-bottom: 0px; --btn-accented-bottom-active: -1px; --btn-accented-brd-radius: 0px; --btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); --btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15); --wd-brd-radius: 0px; } .wd-page-title { background-color: #0a0a0a; } /* ============================================================ Fonts: self-hosted (Poppins + Lato). 2026-08-09: switched back OFF the Google Fonts @import. Confirmed live (via direct DOM/network inspection) that it never actually worked: WoodMart's Custom CSS box always PREPENDS its own generated `:root{...}` theme-settings block before whatever gets pasted into the box, and `@import` is only valid as the literal first rule in a stylesheet (nothing before it, not even `:root`) - so the browser silently dropped our @import every single time, no matter how carefully/recently it was re-pasted. `@font-face` has no such positional requirement, so it works regardless of what WoodMart puts ahead of it. These 6 files already exist on the server from an earlier self-hosting attempt and are confirmed loading (200, font/woff2) - reused as-is, no new uploads needed. Root-relative paths (not https://xsaasolutions.com/...) so these don't need updating when the site moves off the staging domain. Note: a leftover Elementor-generated @font-face block (likely from an old Custom Fonts / Kit typography entry) also references these same files, but registers weights 500/600/800 under mismatched family names ("Poppins Medium"/"Poppins SemiBold"/"Poppins ExtraBold" instead of "Poppins") - harmless to leave, since our correctly-named declarations below are what every `font-family: 'Poppins'` reference in this file actually resolves to, but worth cleaning up in Elementor's settings eventually to avoid confusion. ============================================================ */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/poppins-500.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/wp-content/uploads/fonts/poppins-600.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/poppins-700.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/wp-content/uploads/fonts/poppins-800.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/lato-400.woff2') format('woff2'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/lato-700.woff2') format('woff2'); } /* ============================================================ Swift eLearning Services, Design System One shared stylesheet for every page (add once in WordPress). Fonts: Poppins (headings) + Lato (body), loaded in . ============================================================ */ :root { /* Brand tokens (from logo) */ --c-blue: #3070B0; --c-blue-dark: #245C88; --c-navy: #0E3A66; --c-navy-deep: #0A2C50; --c-orange: #F0982F; --c-orange-dark: #D97F14; --c-ink: #16283C; --c-slate: #405060; --c-muted: #64748B; --c-tint: #F2F7FC; --c-tint-2: #E7F0F9; --c-line: #DCE7F2; --c-white: #FFFFFF; --font-head: 'Poppins', 'Segoe UI', Arial, sans-serif; --font-body: 'Lato', 'Segoe UI', Arial, sans-serif; --radius: 14px; --radius-sm: 8px; --shadow-sm: 0 1px 3px rgba(14, 58, 102, .08); --shadow-md: 0 8px 28px rgba(14, 58, 102, .12); --shadow-lg: 0 18px 50px rgba(14, 58, 102, .18); --container: 1180px; --header-h: 76px; /* Vertical rhythm, change these, not individual sections. Section padding applies top AND bottom, so it doubles between two sections; keep it modest or pages feel empty. */ --space-section: clamp(36px, 4.4vw, 56px); /* section padding-block */ --space-head: clamp(20px, 2.4vw, 32px); /* gap under a section heading */ } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--c-slate); background: var(--c-white); } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--c-blue); text-decoration: none; } a:hover { color: var(--c-blue-dark); } ul { padding-left: 1.2em; } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--c-ink); line-height: 1.22; margin: 0 0 .6em; font-weight: 700; } h1 { font-size: clamp(2rem, 4.2vw, 3.15rem); font-weight: 800; letter-spacing: -0.02em; } h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); letter-spacing: -0.015em; } h3 { font-size: 1.25rem; } h4 { font-size: 1.05rem; } p { margin: 0 0 1.1em; } /* ---------- WordPress theme overrides ---------- Targets WoodMart's own wrapper classes/elements directly, so these intentionally do NOT carry the swift-swel- prefix (that prefix is for our classes; this is neutralizing theirs). .wd-content-layout was boxing the page content in padding, fighting the full-bleed hero/navy/CTA-band sections that are meant to reach edge to edge. */ .wd-content-layout { padding: 0px; } /* WoodMart's theme settings set html{font-size} from --wd-text-font-size, currently 14px (Appearance/Theme Settings, not 16px default). Every size in this file is in rem, built and screenshot-verified against a 16px root - at 14px everything (headings, body text, spacing) silently renders ~12.5% smaller than designed. Force it back. */ html { font-size: 16px; } /* WoodMart's base.css sets :is(ul,ol) li{margin-bottom:var(--li-mb)} sitewide, zeroed only on :last-child. Every swift-swel- list already spaces its own items with `gap` (grid/flex), so this is pure unwanted extra space stacking on top - and in flex-wrap grids (.swift-swel-logo-strip, .swift-swel-audience-grid) align-items:stretch equalizes each row's outer (margin) box, so the last item - the only one WoodMart zeroes - grows taller than its siblings to compensate. Kill it at the source for every list we author. */ ul[class*="swift-swel-"] li, ol[class*="swift-swel-"] li { margin-bottom: 0; } /* ---------- Layout helpers ---------- */ .swift-swel-container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .swift-swel-section { padding-block: var(--space-section); } .swift-swel-section--tint { background: var(--c-tint); } .swift-swel-section--navy { background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-deep) 100%); } .swift-swel-section--navy h2, .swift-swel-section--navy h3 { color: var(--c-white); } .swift-swel-section--navy p { color: #C9DCF0; } /* White cards keep dark text even inside navy sections */ .swift-swel-section--navy .swift-swel-card h3 { color: var(--c-ink); } .swift-swel-section--navy .swift-swel-card p { color: var(--c-slate); } .swift-swel-section--navy .swift-swel-catalog-promo h3 { color: var(--c-ink); } .swift-swel-section--navy .swift-swel-catalog-promo p { color: var(--c-slate); } .swift-swel-section--navy .swift-swel-catalog-promo .swift-swel-eyebrow { color: var(--c-blue); } .swift-swel-section-head { max-width: 780px; margin: 0 auto var(--space-head); text-align: center; } .swift-swel-section-head p:last-child { margin-bottom: 0; } .swift-swel-section-head--left { margin-inline: 0; text-align: left; } .swift-swel-section-head--wide { max-width: 960px; } .swift-swel-section-head p { font-size: 1.1rem; } /* Centred single-paragraph explainer ("why this matters") - a bare heading + paragraph on a tint background reads as empty next to the icon/card-heavy sections around it. Wraps the same content in a bordered card with a large icon badge instead of forcing the copy into bullets or fabricating an image it doesn't need. */ .swift-swel-highlight-panel { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 44px 40px; text-align: center; } .swift-swel-highlight-panel-ic { width: 64px; height: 64px; border-radius: 16px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-tint), var(--c-tint-2)); color: var(--c-blue); } .swift-swel-highlight-panel-ic svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .swift-swel-highlight-panel h2 { margin-bottom: .5em; } .swift-swel-highlight-panel p { margin: 0; color: var(--c-slate); } .swift-swel-highlight-panel--text-left p { text-align: left; } @media (max-width: 600px) { .swift-swel-highlight-panel { padding: 32px 24px; } } .swift-swel-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-blue); margin-bottom: 14px; } .swift-swel-eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--c-orange); } .swift-swel-section--navy .swift-swel-eyebrow { color: #C9DCF0; } /* Visually matches h2 but is not a heading element - used where the real (keyword) topic name already carries the h2 tag via .swift-swel-eyebrow, and this text is decorative/marketing copy that shouldn't also compete for an h2. */ .swift-swel-section-title { font-family: var(--font-head); color: var(--c-ink); line-height: 1.22; margin: 0 0 .6em; font-weight: 700; font-size: clamp(1.55rem, 3vw, 2.3rem); letter-spacing: -0.015em; } .swift-swel-section--navy .swift-swel-section-title { color: var(--c-white); } .swift-swel-cta-band .swift-swel-section-title { color: #fff; text-wrap: balance; } .swift-swel-grid { display: grid; gap: 24px; } .swift-swel-grid--2 { grid-template-columns: repeat(2, 1fr); } .swift-swel-grid--3 { grid-template-columns: repeat(3, 1fr); } .swift-swel-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .swift-swel-grid--3, .swift-swel-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .swift-swel-grid--2, .swift-swel-grid--3, .swift-swel-grid--4 { grid-template-columns: 1fr; } } /* Auto-fitting card grid: wraps to as many columns as fit and CENTRES a partial last row, so a group of 5 doesn't leave one card stranded left. */ .swift-swel-grid--fit { display: flex; flex-wrap: wrap; justify-content: center; } .swift-swel-grid--fit > * { flex: 1 1 235px; max-width: 278px; } /* Wider variant: caps rows at 3 cards instead of grid--fit's default ~4, so a partial last row (e.g. 5 items -> 3+2) still centres like grid--fit. */ .swift-swel-grid--fit3 > * { flex: 1 1 330px; max-width: 380px; } /* Widest variant: caps rows at 2 cards, for small groups (e.g. 4 items) that should read as larger feature-style cards rather than a dense grid. */ .swift-swel-grid--fit2 > * { flex: 1 1 380px; max-width: 460px; } @media (max-width: 640px) { .swift-swel-grid--fit > * { flex: 1 1 100%; max-width: none; } } /* ---------- Buttons ---------- */ .swift-swel-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 1rem; text-transform: none; padding: 14px 28px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; line-height: 1.2; text-align: center; } .swift-swel-btn:hover { transform: translateY(-2px); } .swift-swel-btn--primary { background: var(--c-orange); color: var(--c-ink); box-shadow: 0 6px 20px rgba(240, 152, 47, .35); } .swift-swel-btn--primary:hover { background: var(--c-orange-dark); color: var(--c-ink); box-shadow: 0 10px 26px rgba(240, 152, 47, .45); } .swift-swel-btn--outline { border-color: var(--c-blue); color: var(--c-blue); background: transparent; } .swift-swel-btn--outline:hover { background: var(--c-blue); color: #fff; } /* "Preview Course" CTA: inverse of .swift-swel-btn--outline (solid by default, outline on hover). Scoped so it doesn't touch .swift-swel-btn--outline's other users. */ .swift-swel-btn--preview-course { border-color: var(--c-blue); color: #fff; background: var(--c-blue); } .swift-swel-btn--preview-course:hover { background: transparent; color: var(--c-blue); } .swift-swel-btn--ghost-light { border-color: rgba(255, 255, 255, .55); color: #fff; background: transparent; } .swift-swel-btn--ghost-light:hover { background: rgba(255, 255, 255, .12); color: #fff; } .swift-swel-btn--sm { padding: 10px 20px; font-size: .92rem; } .swift-swel-btn .swift-swel-arr { transition: transform .18s ease; } .swift-swel-btn:hover .swift-swel-arr { transform: translateX(4px); } /* ---------- Header / Nav ---------- */ .swift-swel-site-header { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--c-line); } /* Glass effect on desktop only: backdrop-filter creates a containing block that would trap the fixed-position mobile nav inside the header. */ @media (min-width: 1081px) { .swift-swel-site-header { background: rgba(255, 255, 255, .96); backdrop-filter: blur(10px); } } .swift-swel-site-header.swift-swel-is-scrolled { box-shadow: var(--shadow-sm); } .swift-swel-nav-wrap { display: flex; align-items: center; gap: 28px; height: var(--header-h); max-width: var(--container); margin-inline: auto; padding-inline: 24px; position: relative; /* anchor for the full-width mega menu */ } .swift-swel-brand { display: flex; align-items: center; flex-shrink: 0; } .swift-swel-brand img { height: 58px; width: auto; } .swift-swel-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .swift-swel-nav > .swift-swel-nav-item { position: relative; } .swift-swel-nav a.swift-swel-nav-link, .swift-swel-nav button.swift-swel-nav-link { display: flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: .95rem; font-weight: 500; text-transform: none; color: var(--c-ink); padding: 10px 14px; border-radius: var(--radius-sm); background: none; border: 0; cursor: pointer; } .swift-swel-nav a.swift-swel-nav-link:hover.swift-swel-nav button.swift-swel-nav-link:hover { color: var(--c-blue); background: var(--c-tint); } .swift-swel-nav-link .swift-swel-caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; } .swift-swel-nav-item.swift-swel-is-open > .swift-swel-nav-link .swift-swel-caret { transform: rotate(225deg) translateY(-1px); } .swift-swel-dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 10px; display: none; z-index: 1001; } .swift-swel-nav-item.swift-swel-is-open > .swift-swel-dropdown { display: block; } /* Invisible bridge across the 8px gap so moving the mouse from the nav item into the dropdown doesn't fire mouseleave and close it. */ .swift-swel-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } .swift-swel-dropdown a { display: block; padding: 9px 14px; border-radius: var(--radius-sm); color: var(--c-slate); font-size: .95rem; line-height: 1.4; } .swift-swel-dropdown a:hover { background: var(--c-tint); color: var(--c-blue); } .swift-swel-dropdown .swift-swel-dropdown-label { font-family: var(--font-head); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); padding: 10px 14px 4px; } /* Mega menu (Our Solutions), full header width. Must out-specify `.swift-swel-nav > .swift-swel-nav-item { position: relative }` so the mega dropdown anchors to .swift-swel-nav-wrap (full width), not the small nav item. */ .swift-swel-nav > .swift-swel-nav-item--mega { position: static; } .swift-swel-dropdown--mega { left: 24px; right: 24px; top: calc(100% + 8px); min-width: 0; padding: 26px 28px; } /* Taller bridge: the full-width mega panel sits ~25px below the button, so its connector must span the whole gap (no timer, pure cursor position). */ .swift-swel-dropdown--mega::before { top: -27px; height: 27px; } .swift-swel-mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 28px; } .swift-swel-mega-col .swift-swel-dropdown-label { padding: 0 0 10px; border-bottom: 1px solid var(--c-line); margin-bottom: 6px; } /* Column headings double as links to their hub page */ .swift-swel-dropdown-label--link { display: block; color: var(--c-muted); transition: color .18s ease; } .swift-swel-dropdown-label--link:hover { color: var(--c-blue); background: none; } .swift-swel-dropdown-label--link span { opacity: 0; transition: opacity .18s ease, transform .18s ease; display: inline-block; } .swift-swel-dropdown-label--link:hover span { opacity: 1; transform: translateX(3px); } .swift-swel-mega-col a { padding: 7px 10px; } .swift-swel-mega-links--2 { columns: 2; column-gap: 22px; } .swift-swel-mega-links--2 a { break-inside: avoid; } .swift-swel-mega-feature { grid-column: 1 / -1; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .swift-swel-mega-feature span { font-size: .95rem; color: var(--c-muted); } .swift-swel-mega-feature--end { justify-content: flex-end; } /* .swift-swel-dropdown a / a:hover (generic link styling for plain dropdown links) outrank .swift-swel-btn--primary on specificity, so a primary button dropped inside a dropdown (Get a Quote, About Us) silently lost its white text and orange hover state to the grey/blue link colors. Restore both. */ .swift-swel-dropdown a.swift-swel-btn--primary { color: var(--c-ink); } .swift-swel-dropdown a.swift-swel-btn--primary:hover { background: var(--c-orange-dark); color: var(--c-ink); } .swift-swel-nav-cta { margin-left: 10px; } .swift-swel-nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; position: relative; } .swift-swel-nav-toggle span, .swift-swel-nav-toggle span::before, .swift-swel-nav-toggle span::after { content: ""; position: absolute; height: 2px; background: var(--c-ink); border-radius: 2px; transition: all .2s ease; } .swift-swel-nav-toggle span { top: 21px; left: 11px; right: 11px; } .swift-swel-nav-toggle span::before.swift-swel-nav-toggle span::after { left: 0; right: 0; } .swift-swel-nav-toggle span::before { top: -7px; } .swift-swel-nav-toggle span::after { top: 7px; } .swift-swel-nav-toggle[aria-expanded="true"] span { background: transparent; } .swift-swel-nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .swift-swel-nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 1080px) { .swift-swel-nav-toggle { display: block; } .swift-swel-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 999; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: 18px 22px 40px; overflow-y: auto; display: none; margin: 0; } .swift-swel-nav.swift-swel-is-open { display: flex; } .swift-swel-nav a.swift-swel-nav-link, .swift-swel-nav button.swift-swel-nav-link { width: 100%; justify-content: space-between; padding: 14px 10px; font-size: 1.05rem; border-bottom: 1px solid var(--c-tint-2); border-radius: 0; } .swift-swel-dropdown { position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 6px 10px; border-radius: 0; } .swift-swel-dropdown--mega { left: 0; right: 0; padding: 0 0 6px 10px; } .swift-swel-mega-grid { grid-template-columns: 1fr; gap: 0; } .swift-swel-mega-links--2 { columns: 1; } .swift-swel-mega-col .swift-swel-dropdown-label { border-bottom: 0; padding-top: 12px; } .swift-swel-mega-feature { display: none; } /* Unlike the eLearning Services CTA (redundant with the always-visible nav Get a Quote button), the About Us button is the only path to /about-us/ inside this dropdown - must stay visible on mobile. */ .swift-swel-mega-feature--end { display: flex; margin-top: 12px; padding-top: 12px; } .swift-swel-mega-feature--end .swift-swel-btn { width: 100%; justify-content: center; } .swift-swel-nav-cta { margin: 18px 0 0; } .swift-swel-nav-cta .swift-swel-btn { width: 100%; } } /* ---------- Hero ---------- */ .swift-swel-hero { position: relative; overflow: hidden; background: radial-gradient(900px 420px at 88% -10%, rgba(48, 112, 176, .14), transparent 60%), radial-gradient(720px 380px at -8% 115%, rgba(240, 152, 47, .12), transparent 55%), linear-gradient(160deg, #FFFFFF 0%, #EAF1F9 100%); color: var(--c-ink); border-bottom: 1px solid var(--c-line); } .swift-swel-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(14, 58, 102, .06) 1px, transparent 1.4px); background-size: 26px 26px; mask-image: linear-gradient(115deg, rgba(0, 0, 0, .5), transparent 55%); -webkit-mask-image: linear-gradient(115deg, rgba(0, 0, 0, .5), transparent 55%); } .swift-swel-hero-inner { position: relative; display: grid; grid-template-columns: 60fr 40fr; gap: 48px; align-items: center; padding-block: clamp(24px, 3.5vw, 48px); } .swift-swel-hero h1 { color: var(--c-ink); margin-bottom: .5em; } .swift-swel-hero h1 .swift-swel-accent { color: var(--c-orange); } .swift-swel-hero .swift-swel-lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--c-slate); max-width: 560px; } .swift-swel-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } /* Light hero: secondary button needs a dark outline (the light-ghost variant is invisible here) */ .swift-swel-hero .swift-swel-btn--ghost-light { border: 1.5px solid var(--c-navy); color: var(--c-navy); background: transparent; } .swift-swel-hero .swift-swel-btn--ghost-light:hover { background: var(--c-navy); color: #fff; } .swift-swel-hero-trust { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px 26px; color: #9FBFDE; font-size: .95rem; } .swift-swel-hero-trust span { display: inline-flex; align-items: center; gap: 8px; } .swift-swel-hero-trust .swift-swel-tick { color: var(--c-orange); font-weight: 700; } .swift-swel-hero-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 11px; } .swift-swel-hero-points li { display: flex; align-items: center; gap: 10px; color: var(--c-ink); font-weight: 600; font-size: .98rem; } .swift-swel-hero-points .swift-swel-hp-tick { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--c-tint-2); color: var(--c-orange); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .72rem; } .swift-swel-hero-card { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--radius); backdrop-filter: blur(8px); padding: 30px 28px; box-shadow: var(--shadow-lg); } .swift-swel-hero-card h3 { color: #fff; font-size: 1.15rem; margin-bottom: 14px; } .swift-swel-hero-card ul { list-style: none; padding: 0; margin: 0 0 20px; } .swift-swel-hero-card li { display: flex; gap: 10px; padding: 7px 0; color: #DAE8F6; font-size: .98rem; } .swift-swel-hero-card li::before { content: "✓"; color: var(--c-orange); font-weight: 700; flex-shrink: 0; } /* Hero contact form: crisp white lead-capture card */ .swift-swel-hero-form { background: #fff; border: 1.5px solid var(--c-navy); backdrop-filter: none; padding: 28px 28px 22px; box-shadow: 0 24px 54px rgba(14, 58, 102, .16); } .swift-swel-hero-form-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .swift-swel-hero-form-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(240, 152, 47, .14); color: var(--c-orange); } .swift-swel-hero-form-ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .swift-swel-hero-form h2 { color: var(--c-ink); font-size: 1.18rem; margin: 0; line-height: 1.25; } .swift-swel-hero-form-sub { color: var(--c-muted); font-size: .9rem; line-height: 1.45; margin: 3px 0 0; } .swift-swel-hero-form .swift-swel-form-grid { gap: 14px; } .swift-swel-hero-form label { color: var(--c-ink); font-size: .82rem; margin-bottom: 6px; } .swift-swel-hero-form input, .swift-swel-hero-form textarea { background: var(--c-tint); border: 1px solid var(--c-line); color: var(--c-ink); padding: 12px 14px; } .swift-swel-hero-form input::placeholder, .swift-swel-hero-form textarea::placeholder { color: var(--c-muted); } .swift-swel-hero-form input:focus, .swift-swel-hero-form textarea:focus { background: #fff; border-color: var(--c-orange); box-shadow: 0 0 0 3px rgba(240, 152, 47, .18); } @media (max-width: 900px) { .swift-swel-hero-inner { grid-template-columns: 1fr; gap: 36px; } .swift-swel-hero-card { max-width: 520px; } } /* ---------- Stats band ---------- */ .swift-swel-stats { border-block: 1px solid var(--c-line); background: #fff; } /* When a .swift-swel-stats band sits directly under a .swift-swel-page-hero, the hero's own border-bottom and this band's border-top stack into a doubled, overly prominent line that no other hero->section transition shows. Drop both in that specific adjacency only - every other .swift-swel-page-hero keeps its border-bottom unchanged. */ .swift-swel-page-hero:has(+ .swift-swel-stats) { border-bottom: 0; } .swift-swel-page-hero + .swift-swel-stats { border-top: 0; } .swift-swel-stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; padding-block: 26px; } .swift-swel-stat { text-align: center; } .swift-swel-stat .swift-swel-num { font-family: var(--font-head); font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 800; color: var(--c-blue); line-height: 1.1; } .swift-swel-stat .swift-swel-num em { color: var(--c-orange); font-style: normal; } .swift-swel-stat .swift-swel-lbl { font-size: .92rem; color: var(--c-muted); margin-top: 4px; } @media (max-width: 900px) { .swift-swel-stats-row { grid-template-columns: repeat(3, 1fr); row-gap: 26px; } } @media (max-width: 560px) { .swift-swel-stats-row { grid-template-columns: repeat(2, 1fr); } } /* Modifier for stat bands that don't have exactly 5 items (the default grid is a fixed 5-column track, so 4 items leave an empty trailing column and read as off-centre). Add stats-row--N for any other count as needed. */ .swift-swel-stats-row--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 700px) { .swift-swel-stats-row--4 { grid-template-columns: repeat(2, 1fr); row-gap: 26px; } } .swift-swel-stats-row--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 700px) { .swift-swel-stats-row--3 { grid-template-columns: 1fr; row-gap: 26px; } } /* ---------- Cards ---------- */ .swift-swel-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; display: flex; flex-direction: column; } .swift-swel-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #BFD6EC; } .swift-swel-card h3 { margin-bottom: .4em; } .swift-swel-card p { font-size: .98rem; margin-bottom: 1em; } .swift-swel-card .swift-swel-card-link { margin-top: auto; font-family: var(--font-head); font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: 6px; } .swift-swel-card .swift-swel-card-link::after { content: "→"; transition: transform .18s ease; } .swift-swel-card:hover .swift-swel-card-link::after { transform: translateX(4px); } /* Temporarily-disabled card link: the target page isn't built yet. Original href/label are kept in data-href/data-label so re-enabling later is a straight swap back to a real , not a rewrite from scratch. */ .swift-swel-card-link.swift-swel-card-link--disabled { color: var(--c-muted); cursor: default; } .swift-swel-card-link.swift-swel-card-link--disabled::after { content: ""; } .swift-swel-card:hover .swift-swel-card-link.swift-swel-card-link--disabled::after { transform: none; } .swift-swel-card-icon { width: 52px; height: 52px; border-radius: 12px; margin-bottom: 18px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--c-tint), var(--c-tint-2)); color: var(--c-blue); font-size: 1.45rem; flex-shrink: 0; } .swift-swel-card-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .swift-swel-card:nth-child(3n+2) .swift-swel-card-icon { color: var(--c-orange); } /* Solid navy variant - used where a .card grid sits directly below another .card grid on the same page (e.g. "Who Needs a Learning Management System?" below "Key System Objectives & Core Capabilities") so the two sections read as visually distinct despite sharing the same card component, without introducing an off-brand colour. */ .swift-swel-card-icon--navy { background: linear-gradient(135deg, var(--c-navy), var(--c-navy-deep)); color: #fff; } .swift-swel-card:nth-child(3n+2) .swift-swel-card-icon--navy { color: #fff; } /* Course card with a full-bleed photo - variant of .swift-swel-card used in the free-course catalog grid. The image fills the entire card; only the title shows at rest inside a translucent overlay bar pinned to the bottom. On hover/focus the overlay grows to reveal the description + Read More link (grid-template-rows 0fr->1fr, animatable unlike height: auto, and copes with the 14 cards' differing text lengths without a guessed max-height). The card's own box size never changes so the grid doesn't reflow when a card expands - the overlay just grows upward, covering more of the image underneath it. */ .swift-swel-course-card { position: relative; padding: 0; overflow: hidden; aspect-ratio: 4 / 5; } .swift-swel-course-card-img { position: absolute; inset: 0; width: 100%; height: 100%; } .swift-swel-course-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .swift-swel-course-card:hover .swift-swel-course-card-img img, .swift-swel-course-card:focus-within .swift-swel-course-card-img img { transform: scale(1.06); } .swift-swel-course-card-img .swift-swel-img-ph { position: absolute; inset: 0; height: 100%; width: 100%; aspect-ratio: auto; border: none; border-radius: 0; background: linear-gradient(135deg, var(--c-tint), var(--c-tint-2)); padding: 16px; gap: 8px; } .swift-swel-course-card-img .swift-swel-img-ph svg { width: 32px; height: 32px; } .swift-swel-course-card-img .swift-swel-img-ph-title { font-size: .88rem; } .swift-swel-course-card-img .swift-swel-img-ph small { font-size: .74rem; max-width: 200px; } .swift-swel-course-card-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; background: rgba(10, 37, 66, .6); color: #fff; padding: 18px 20px; transition: padding .35s ease; } .swift-swel-course-card-overlay h3 { color: #fff; margin: 0; font-size: 1.05rem; line-height: 1.25; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.5em; } .swift-swel-course-card-desc { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows .4s ease, margin-top .4s ease; } .swift-swel-course-card-desc-inner { overflow: hidden; opacity: 0; transition: opacity .25s ease; } .swift-swel-course-card-desc p { color: #EDF3F9; font-size: .9rem; margin: 0 0 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .swift-swel-course-card-desc .swift-swel-card-link { color: #fff; margin-top: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); } .swift-swel-course-card:hover .swift-swel-course-card-overlay, .swift-swel-course-card:focus-within .swift-swel-course-card-overlay { padding-top: 20px; padding-bottom: 22px; } .swift-swel-course-card:hover .swift-swel-course-card-desc, .swift-swel-course-card:focus-within .swift-swel-course-card-desc { grid-template-rows: 1fr; margin-top: 10px; } .swift-swel-course-card:hover .swift-swel-course-card-desc-inner, .swift-swel-course-card:focus-within .swift-swel-course-card-desc-inner { opacity: 1; transition: opacity .35s ease .1s; } /* Touch devices have no real :hover - keep the description permanently expanded there instead of hiding it behind an unreachable gesture. */ @media (hover: none) { .swift-swel-course-card-desc { grid-template-rows: 1fr; margin-top: 10px; } .swift-swel-course-card-desc-inner { opacity: 1; } } /* ---------- More-services link chips ---------- */ .swift-swel-more-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 36px; } .swift-swel-more-links .swift-swel-more-label { font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: var(--c-muted); display: inline-flex; align-items: center; padding: 11px 4px; } .swift-swel-more-links a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: #fff; background: var(--c-blue); border: 1px solid var(--c-blue); border-radius: 999px; padding: 10px 20px; transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .swift-swel-more-links a:hover { background: var(--c-tint); border-color: var(--c-line); color: var(--c-blue); transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Global "Get in Touch" section (pre-footer, dark navy so it stands apart from the light footer below). Restyle the intro for a dark background; the form card stays white with dark text. */ .swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-points b { color: #fff; } .swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-points p { color: #C9DCF0; } .swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-points a { color: #fff; text-decoration: underline; } .swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-ic { background: rgba(255, 255, 255, .12); color: #fff; } .swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-note { color: #C9DCF0; } .swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-note a { color: #fff; text-decoration: underline; } .swift-swel-section--navy.swift-swel-contact-cta .swift-swel-contact-card h3 { color: var(--c-ink); } /* Contact section (home), split intro + elevated form card */ .swift-swel-contact-wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 4vw, 54px); align-items: stretch; } @media (max-width: 860px) { .swift-swel-contact-wrap { grid-template-columns: 1fr; } } .swift-swel-contact-intro { align-self: center; } .swift-swel-contact-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; } .swift-swel-contact-points li { display: flex; align-items: flex-start; gap: 14px; } .swift-swel-contact-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--c-tint-2); color: var(--c-blue); display: flex; align-items: center; justify-content: center; } .swift-swel-contact-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .swift-swel-contact-points b { display: block; color: var(--c-ink); font-family: var(--font-head); font-size: .98rem; } .swift-swel-contact-points p { margin: 2px 0 0; font-size: .92rem; color: var(--c-slate); } .swift-swel-contact-points a { color: var(--c-blue); font-weight: 600; } .swift-swel-contact-note { margin: 18px 0 0; font-size: .92rem; color: var(--c-slate); } .swift-swel-contact-note a { color: var(--c-blue); font-weight: 600; } .swift-swel-contact-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: clamp(24px, 3.2vw, 36px); } .swift-swel-contact-card h3 { font-size: 1.15rem; margin: 0 0 4px; } .swift-swel-contact-card .swift-swel-card-sub { font-size: .92rem; color: var(--c-muted); margin: 0 0 20px; } /* ---------- Pills / tools strip ---------- */ .swift-swel-pill-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .swift-swel-pill { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--c-navy); background: #fff; border: 1px solid var(--c-line); padding: 10px 20px; border-radius: 999px; box-shadow: var(--shadow-sm); } .swift-swel-section--navy .swift-swel-pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #DAE8F6; } a.swift-swel-pill { transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } a.swift-swel-pill:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; transform: translateY(-2px); } .swift-swel-section--navy a.swift-swel-pill:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); color: #fff; } /* ---------- Industries grid (rich cross-link section on navy) ---------- */ .swift-swel-ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: var(--space-head); } .swift-swel-ind-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px 22px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; } .swift-swel-ind-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); box-shadow: var(--shadow-lg); } .swift-swel-ind-ic { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: rgba(240, 152, 47, .16); color: var(--c-orange); } .swift-swel-ind-ic svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .swift-swel-ind-card h3 { color: #fff; font-size: 1.08rem; margin: 0; } .swift-swel-ind-card p { color: #C9DCF0; font-size: .9rem; line-height: 1.55; margin: 0; } @media (max-width: 1000px) { .swift-swel-ind-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .swift-swel-ind-grid { grid-template-columns: 1fr; } } /* ---------- Tool logo strip ---------- */ .swift-swel-logo-group-label { font-family: var(--font-head); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); text-align: center; margin: 0 0 16px; } /* Bigger/bluer variant - bigger than the default label but still smaller than .swift-swel-section-title above it, so the reading hierarchy stays intact */ .swift-swel-logo-group-label--lg { font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; color: var(--c-blue); } /* Flex + centred wrapping so a partial last row sits centred, not left-ragged */ .swift-swel-logo-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none; padding: 0; margin: 0; } .swift-swel-logo-tile { flex: 0 1 172px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm); min-height: 92px; padding: 16px 12px; text-align: center; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } @media (max-width: 560px) { .swift-swel-logo-tile { flex: 1 1 42%; min-height: 80px; } } .swift-swel-logo-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #BFD6EC; } /* Real logos: drop an in and it renders greyscale, colouring on hover */ .swift-swel-logo-tile img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .18s ease, opacity .18s ease; } .swift-swel-logo-tile:hover img { filter: none; opacity: 1; } /* Wordmark fallback used until real logo files are supplied */ .swift-swel-logo-tile .swift-swel-logo-name { font-family: var(--font-head); font-weight: 600; font-size: .92rem; color: var(--c-navy); line-height: 1.3; } .swift-swel-section--navy .swift-swel-logo-tile, .swift-swel-section--tint .swift-swel-logo-tile { background: #fff; } .swift-swel-section--navy .swift-swel-logo-tile { border-color: rgba(255, 255, 255, .16); } /* ---------- Process steps ---------- */ /* Process steps: connected, numbered timeline with filled gradient badges */ .swift-swel-steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; counter-reset: step; } .swift-swel-step { position: relative; counter-increment: step; padding: 30px 22px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: 16px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .swift-swel-step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #C7DAEE; } .swift-swel-step::before { content: "0" counter(step); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 13px; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; color: #fff; background: linear-gradient(140deg, var(--c-navy), var(--c-blue)); box-shadow: 0 8px 18px rgba(14, 58, 102, .28); } /* connector between badges (desktop only) */ .swift-swel-step:not(:last-child)::after { content: ""; position: absolute; top: 54px; left: 70px; right: -22px; height: 2px; background: linear-gradient(90deg, var(--c-line), transparent); } .swift-swel-steps--3 { grid-template-columns: repeat(3, 1fr); } .swift-swel-step h3 { font-size: 1.14rem; margin: 0 0 .45em; color: var(--c-ink); } .swift-swel-step p { font-size: .93rem; margin: 0; color: var(--c-slate); line-height: 1.6; } @media (max-width: 1024px) { .swift-swel-steps { grid-template-columns: repeat(2, 1fr); } .swift-swel-step:not(:last-child)::after { display: none; } } @media (max-width: 560px) { .swift-swel-steps { grid-template-columns: 1fr; } } /* ---------- Process timeline (detailed, homepage) ---------- */ .swift-swel-process { list-style: none; margin: var(--space-head) auto 0; padding: 0; position: relative; max-width: 920px; } .swift-swel-process::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--c-blue), var(--c-tint-2)); } .swift-swel-proc-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 26px; padding-bottom: 24px; } .swift-swel-proc-step:last-child { padding-bottom: 0; } .swift-swel-proc-num { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: #fff; background: linear-gradient(140deg, var(--c-navy), var(--c-blue)); box-shadow: 0 10px 22px rgba(14, 58, 102, .30); } .swift-swel-proc-card { background: #fff; border: 1px solid var(--c-line); border-radius: 16px; padding: 24px 28px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .swift-swel-proc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #C7DAEE; } .swift-swel-proc-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .swift-swel-proc-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--c-tint-2); color: var(--c-blue); } .swift-swel-proc-ic svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .swift-swel-proc-kicker { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-blue); } .swift-swel-proc-card h3 { margin: 3px 0 0; font-size: 1.22rem; color: var(--c-ink); } .swift-swel-proc-card > p { margin: 0 0 16px; color: var(--c-slate); line-height: 1.65; } .swift-swel-proc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .swift-swel-proc-points li { position: relative; padding-left: 28px; font-size: .92rem; color: var(--c-slate); line-height: 1.5; } .swift-swel-proc-points li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-tint-2); color: var(--c-blue); font-size: .7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } @media (max-width: 640px) { .swift-swel-proc-step { grid-template-columns: 44px 1fr; gap: 16px; } .swift-swel-proc-num { width: 44px; height: 44px; font-size: .95rem; border-radius: 13px; } .swift-swel-process::before { left: 21px; } .swift-swel-proc-card { padding: 20px 20px; } } /* Screenshot(s) inside a .proc-card (tutorial/how-to steps) - one image full width, or several side by side when a step has more than one ("...one after another" in source docs). */ .swift-swel-proc-media { display: flex; gap: 12px; margin-top: 4px; } .swift-swel-proc-media img { flex: 1 1 0; width: 100%; min-width: 0; border-radius: 12px; border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); display: block; } @media (max-width: 560px) { .swift-swel-proc-media { flex-direction: column; } } /* Modifier: stack vertically instead of side by side ("...one below the other" in some source docs). */ .swift-swel-proc-media--stack { flex-direction: column; } /* ---------- Feature / why-us list ---------- */ .swift-swel-feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; } .swift-swel-feature-list li { display: flex; gap: 14px; align-items: flex-start; } .swift-swel-feature-list .swift-swel-fi { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--c-tint-2); color: var(--c-blue); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; margin-top: 3px; } .swift-swel-feature-list b { color: var(--c-ink); font-family: var(--font-head); font-weight: 600; } .swift-swel-feature-list p { margin: 2px 0 0; font-size: .95rem; } /* ---------- Split section ---------- */ .swift-swel-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } @media (max-width: 900px) { .swift-swel-split { grid-template-columns: 1fr; } } .swift-swel-split-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: linear-gradient(145deg, var(--c-tint), var(--c-tint-2)); min-height: 300px; display: flex; align-items: center; justify-content: center; } .swift-swel-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- FAQ ---------- */ .swift-swel-faq { max-width: 820px; margin-inline: auto; } .swift-swel-faq details { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; } .swift-swel-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-family: var(--font-head); font-weight: 600; color: var(--c-ink); font-size: 1.02rem; } .swift-swel-faq summary::-webkit-details-marker { display: none; } .swift-swel-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--c-blue); transition: transform .2s ease; flex-shrink: 0; } .swift-swel-faq details[open] summary::after { transform: rotate(45deg); } .swift-swel-faq details[open] summary { color: var(--c-blue); } .swift-swel-faq .swift-swel-faq-a { padding: 0 22px 20px; font-size: .98rem; } .swift-swel-faq .swift-swel-faq-a p:last-child { margin-bottom: 0; } /* ---------- CTA band ---------- */ .swift-swel-cta-band { background: radial-gradient(700px 300px at 90% 0%, rgba(240, 152, 47, .28), transparent 60%), linear-gradient(140deg, var(--c-blue) 0%, var(--c-navy) 80%); border-radius: var(--radius); padding: clamp(40px, 6vw, 64px); text-align: center; color: #fff; box-shadow: var(--shadow-lg); } .swift-swel-cta-band h2 { color: #fff; text-wrap: balance; } .swift-swel-cta-band .swift-swel-section-head { max-width: 900px; } .swift-swel-cta-band p { color: #D5E5F5; max-width: 640px; margin-inline: auto; } .swift-swel-cta-band .swift-swel-hero-ctas { justify-content: center; } /* Full-bleed variant: cta-band applied directly to the
(no inset box) - same gradient as the whole section background, edge to edge, like .swift-swel-section--navy. Horizontal inset comes from .swift-swel-container as usual. */ .swift-swel-section.swift-swel-cta-band { border-radius: 0; box-shadow: none; padding-block: var(--space-section); padding-inline: 0; } .swift-swel-cta-band .swift-swel-eyebrow { color: #FFC98A; } .swift-swel-cta-band .swift-swel-eyebrow::before { background: #fff; } /* ---------- Breadcrumbs ---------- */ .swift-swel-breadcrumbs { font-size: .88rem; color: var(--c-muted); margin-bottom: 18px; } .swift-swel-breadcrumbs a { color: var(--c-blue); } .swift-swel-breadcrumbs a:hover { color: var(--c-navy); } .swift-swel-breadcrumbs .swift-swel-sep { margin-inline: 8px; opacity: .6; } /* ---------- Page hero (inner pages) ---------- */ .swift-swel-page-hero { position: relative; overflow: hidden; color: var(--c-ink); background: radial-gradient(820px 380px at 90% -20%, rgba(48, 112, 176, .14), transparent 60%), radial-gradient(700px 360px at -8% 120%, rgba(240, 152, 47, .10), transparent 55%), linear-gradient(160deg, #FFFFFF 0%, #EAF1F9 100%); padding-block: clamp(40px, 4.6vw, 64px); border-bottom: 1px solid var(--c-line); } .swift-swel-page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(14, 58, 102, .06) 1px, transparent 1.4px); background-size: 26px 26px; mask-image: linear-gradient(115deg, rgba(0, 0, 0, .45), transparent 55%); -webkit-mask-image: linear-gradient(115deg, rgba(0, 0, 0, .45), transparent 55%); } .swift-swel-page-hero .swift-swel-container { position: relative; } .swift-swel-page-hero h1 { color: var(--c-ink); max-width: 800px; } .swift-swel-page-hero .swift-swel-lead { color: var(--c-slate); font-size: 1.12rem; max-width: 680px; } .swift-swel-page-hero .swift-swel-btn--ghost-light { border: 1.5px solid var(--c-navy); color: var(--c-navy); background: transparent; } .swift-swel-page-hero .swift-swel-btn--ghost-light:hover { background: var(--c-navy); color: #fff; } .swift-swel-page-hero .swift-swel-hero-trust { color: var(--c-slate); } /* Solution-page hero with an image slot on the right */ .swift-swel-page-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 5vw, 56px); align-items: center; } .swift-swel-page-hero-grid .swift-swel-page-hero-content { min-width: 0; } .swift-swel-page-hero-grid h1, .swift-swel-page-hero-grid .swift-swel-lead { max-width: none; } .swift-swel-page-hero-media { min-width: 0; } .swift-swel-page-hero-media > img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-lg); display: block; } /* Full-width hero variant: no side media/form, so the heading and lead should span the whole container instead of the capped line-length used on the standard single-column hero. */ .swift-swel-page-hero--full h1, .swift-swel-page-hero--full .swift-swel-lead { max-width: none; } /* Opt-in modifier: forces a specific long H1 onto one line at desktop widths (>900px, where the hero grid is two-column) by scaling the font down from the sitewide clamp and removing the 800px max-width cap, so it can use the hero's full container width instead of just the left grid column. Page-specific - doesn't touch the sitewide h1/.page-hero-grid rules other heroes rely on. Shared by all OHS course pages using this class, each with a different H1 length, so the cap has to hold for the longest ones, not just be tuned to one page's text. FIXED 2026-08-18: the previous cap (2.3125rem) fit Accident Investigation's title (the longest one this was originally tuned against) with 0px of margin - text width measured exactly equal to the available container width in testing. That's a knife-edge fit: any small difference in font rendering (a fallback font if Poppins fails to load, a different browser's hinting/kerning for this bold 800-weight, negative-letter-spacing text) tips it into wrapping, which is what Anwar saw live. Reduced the cap to 2.15rem, which measured ~80px of real margin for the same title - same tuning method (measure actual rendered text width against the container, not estimate), just with slack this time instead of an exact match. */ .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop { margin-bottom: 22px; } @media (min-width: 901px) { .swift-swel-page-hero h1.swift-swel-hero-h1--fit-desktop { max-width: none; font-size: clamp(1.7rem, calc(-0.05rem + 3.1vw), 2.15rem); } } /* Reusable image placeholder box (light hero) */ .swift-swel-img-ph { aspect-ratio: 4 / 3; width: 100%; border: 2px dashed var(--c-line); border-radius: var(--radius); background: rgba(255, 255, 255, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; color: var(--c-muted); } .swift-swel-img-ph svg { width: 56px; height: 56px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; } .swift-swel-img-ph .swift-swel-img-ph-title { font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; color: var(--c-navy); } .swift-swel-img-ph small { font-size: .82rem; color: var(--c-muted); max-width: 240px; } @media (max-width: 900px) { .swift-swel-page-hero-grid { grid-template-columns: 1fr; } } /* ---------- Footer (light panel, so the full-colour logo reads) ---------- */ .swift-swel-site-footer { background: #E9EFF7; color: var(--c-slate); font-size: .95rem; border-top: 1px solid var(--c-line); } .swift-swel-footer-top { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1.2fr; gap: 28px; padding-block: 44px 32px; } .swift-swel-site-footer h4 { color: var(--c-navy); font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; } .swift-swel-site-footer ul { list-style: none; padding: 0; margin: 0; } .swift-swel-site-footer li { margin-bottom: 9px; } .swift-swel-site-footer a { color: var(--c-slate); } .swift-swel-site-footer a:hover { color: var(--c-blue); } .swift-swel-footer-social { display: flex; gap: 10px; margin-top: 18px; } .swift-swel-footer-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--c-line); background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--c-navy); transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .swift-swel-footer-social a:hover { background: var(--c-blue); color: #fff; border-color: var(--c-blue); transform: translateY(-2px); } .swift-swel-footer-social svg { display: block; width: 17px; height: 17px; fill: currentColor; } .swift-swel-footer-social svg.swift-swel-social-fb { width: 19px; height: 19px; } .swift-swel-footer-offices li { display: flex; gap: 10px; margin-bottom: 12px; line-height: 1.5; } .swift-swel-footer-offices .swift-swel-flag { flex-shrink: 0; } .swift-swel-footer-offices .swift-swel-flag svg { width: 18px; height: 18px; margin-top: 2px; stroke: var(--c-blue); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .swift-swel-footer-bottom { border-top: 1px solid var(--c-line); padding-block: 20px; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .88rem; color: var(--c-slate); } @media (max-width: 980px) { .swift-swel-footer-top { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .swift-swel-footer-top { grid-template-columns: 1fr; } } /* ---------- Forms (contact page) ---------- */ .swift-swel-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .swift-swel-form-grid .swift-swel-full { grid-column: 1 / -1; } @media (max-width: 640px) { .swift-swel-form-grid { grid-template-columns: 1fr; } } .swift-swel-form-grid label { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--c-ink); display: block; margin-bottom: 6px; } .swift-swel-form-grid label .swift-swel-opt { font-weight: 400; color: var(--c-muted); } /* Scoped under .swift-swel-form-grid (every form field sitewide lives inside one) rather than a bare input/textarea/select selector: WoodMart's base.css targets input[type="text"], input[type="email"], etc. directly, which is MORE specific than a bare element selector (attribute selector beats plain element regardless of cascade order) and was winning on padding/height - fields were rendering at a flat 42px with 0 vertical padding instead of ours. The class-scoped version matches WoodMart's specificity, and our Custom CSS box loading after the theme's own CSS settles the tie in our favor. */ .swift-swel-form-grid input, .swift-swel-form-grid textarea, .swift-swel-form-grid select { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--c-ink); padding: 13px 16px; border: 1px solid var(--c-line); border-radius: var(--radius-sm); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .swift-swel-form-grid input:focus, .swift-swel-form-grid textarea:focus, .swift-swel-form-grid select:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(48, 112, 176, .15); } /* Contact Form 7 support: CF7 renders each field inside its own and appends its own validation tips / response banner, none of which exist in the plain markup the rest of this file targets. Restyle those CF7-specific elements to match rather than leaving the plugin's bare-bones defaults. */ .swift-swel-form-grid .wpcf7-form-control-wrap { display: block; width: 100%; } .swift-swel-form-grid .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: .82rem; color: #C0392B; } .swift-swel-form-grid input.wpcf7-not-valid, .swift-swel-form-grid textarea.wpcf7-not-valid { border-color: #C0392B; } .swift-swel-form-grid .wpcf7-response-output { grid-column: 1 / -1; margin: 10px 0 0; padding: 12px 16px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: .92rem; border: 1px solid var(--c-line); } .swift-swel-form-grid form.sent .wpcf7-response-output { border-color: #2E7D4F; background: #EAF7EF; color: #205C39; } .swift-swel-form-grid form.failed .wpcf7-response-output, .swift-swel-form-grid form.aborted .wpcf7-response-output, .swift-swel-form-grid form.spam .wpcf7-response-output { border-color: #C0392B; background: #FCEBEA; color: #8E2A20; } .swift-swel-form-grid form.invalid .wpcf7-response-output { border-color: var(--c-orange); background: #FDF3E7; color: var(--c-orange-dark); } /* CF7's submit is a bare - it can't hold the hover-slide markup a