/* ============================================================================= MAATARA CONSULTING - THEME assets/css/theme.css SINGLE SOURCE OF TRUTH for the visual system. This file is the design contract the whole project follows: every static HTML page links it, and the future WordPress theme will enqueue this exact file. The values below are copied verbatim from the approved design in home.html. Do not change a value here to fix one page. Change it here on purpose, then check every page that uses the class. Contents 01. Design tokens (:root) 02. Reset and base 03. Typography 04. Layout primitives 05. Buttons and links 06. Header / navigation 07. Hero 08. Client strip 09. Section framework 10. Cards and grids 11. Section components (services, industries, process, work, insights) 12. Testimonials carousel 13. FAQ accordion 14. CTA blocks 15. Contact form 16. Footer 17. Utilities 18. Motion and print WordPress mapping Section 01 -> Global Colors + Global Fonts (Elementor Site Settings) Section 02-18 -> theme.css, enqueued by the theme ========================================================================== */ /* ============================================================================= 01. DESIGN TOKENS These are the only colours, fonts, radii and spacing values in the project. ========================================================================== */ :root { color-scheme: dark; /* --- Surfaces --- */ --bg: #070B14; --bg-2: #0B1120; --card: #111827; --card-2: #152033; /* --- Borders --- */ --line: #1E293B; --line-2: #2A3448; /* --- Brand green --- Hue 152 throughout, taken from the logo's own deep green #02642D (hsl 146 96 20) and the favicon leaf #1B6B48 (hsl 154 60 26). The old value #4ADE2A sat at hue 109 and read as a lime/neon accent rather than a corporate green; moving onto the logo's hue keeps the site on-brand. A single green cannot serve both themes: on #FFFFFF a colour needs relative luminance <= 0.1833 to clear 4.5:1, while on #0F172A it needs >= 0.2147. Those bounds cross, so the mode decides which step of one ramp is used rather than one value being bent to cover both. dark mode: steps 400-700 (light on dark) light mode: steps 800-900 (dark on light) Verified ratios are in the palette table in the design-system notes. */ --brand-scale-50: #F7FAF9; --brand-scale-100: #ECF6F1; --brand-scale-200: #D9EFE5; --brand-scale-300: #B3E7CF; --brand-scale-400: #7FE1B3; --brand-scale-500: #52E39F; --brand-scale-600: #23E78B; --brand-scale-700: #0CC06C; --brand-scale-800: #069854; --brand-scale-900: #027741; /* The dark-mode values. --lime is the role token the pages already use for brand-coloured text and accents; --brand is the UI step for rules, dots and icon strokes that only need 3:1. */ --lime: #1FBF75; --brand: #23E78B; --brand-strong: #1FBF75; --brand-surface: rgba(31, 191, 117, 0.12); --brand-surface-strong: rgba(31, 191, 117, 0.2); --brand-line: rgba(31, 191, 117, 0.38); --lime-shadow: rgba(31, 191, 117, 0.18); --hero-glow-lime: rgba(31, 191, 117, 0.08); --cta-glow-lime: rgba(31, 191, 117, 0.1); --chip-ico-lime-bg: rgba(31, 191, 117, 0.14); --teal: #2E7683; --teal-ink: #E3F1F3; --lime-on-teal: #D9F6E7; --cyan: #22C3EE; --amber: #FBBF24; /* The red ink on a tinted "blocked" pill. One value has to work on the pale tint of a light theme and on the dark tint of a dark one, so the light value is the darker red and the dark value the lighter one. The light value #A64A4A reads 4.73:1 on the tint the pill actually composites to, #FDE5E5, which is darker than the nominal 14% red. */ --status-block: #FCA5A5; /* --- Icon chip background --- */ --icon-bg: #13233C; /* --- Text --- */ --text: #E6EAF2; --text-2: #A7B0C0; --text-3: #8B96AA; --white: #FFFFFF; /* --- Secondary text tints used on the dark surface --- */ --text-strong: #FFFFFF; --text-nav: #C9D1DE; --text-on-surface: #DCE2EC; --text-on-surface-2: #D9DFE9; --text-quote-mark: #1B2A42; /* The "/ 06" half of the testimonial counter. It sits on the teal band beside --on-dark, so it has to clear 4.5:1 against that fill rather than against the page. #EEF7F8 reads at 4.78:1 on #2E7683, which leaves headroom over the threshold. */ --text-count-alt: #EEF7F8; --text-amber-on: #111827; --footer-logo-bg: #070B14; /* Text that sits on a dark fill. This is not --white: a light theme still needs white text on a dark button, a dark nav and a teal panel, while the same fill elsewhere becomes light. Naming the role is what keeps those two apart when a rule is reused in the other mode. */ --on-dark: #FFFFFF; --nav-bg: rgba(7, 11, 20, 0.86); --ghost-bg: rgba(255, 255, 255, 0.04); --foot-bg: #070B14; --foot-text: #E6EAF2; --foot-text-2: #A7B0C0; --foot-text-3: #8B96AA; /* --- Decorative --- */ --pill-bg: #0C1424; --pill-line: #1F3350; --pill-text: #7DD3F0; --tag-bg: #0F2A26; --step-num: var(--cyan); --carousel-dot: rgba(255, 255, 255, 0.35); --carousel-dot-active: #FFFFFF; --ghost-hover: rgba(34, 195, 238, 0.06); --card-hover-line: rgba(34, 195, 238, 0.45); --hero-chip-bg: rgba(14, 22, 38, 0.95); --hero-chip-hover-bg: rgba(26, 42, 68, 0.95); /* The ink for anything sitting on --hero-chip-bg. The fill turns near-white in a light theme, so the ink cannot be --on-dark: that was white on white on the film's mute button. It is a token of its own because the fill is a token of its own, and the pair has to move together. */ --hero-chip-ink: #FFFFFF; --hero-chip-ink-2: #A7B0C0; --hero-chip-line: #22324B; --hero-frame-a: #1A2A44; --hero-frame-b: #0E1626; --star: var(--amber); --avatar-bg: var(--grad); --t-btn-bg-hover: rgba(255, 255, 255, 0.05); --t-btn-solid-hover: #1B2638; --footer-icon: #C9D1DE; --hero-glow-cyan: rgba(34, 195, 238, 0.12); --grid-line: rgba(255, 255, 255, 0.025); --mask-fade: linear-gradient(to bottom, #000 40%, transparent); --cta-glow-cyan: rgba(34, 195, 238, 0.2); --chip-ico-cyan-bg: rgba(34, 195, 238, 0.12); /* The dimmed backdrop behind a full-screen preview, and the chip sitting on a thumbnail. Both are the page's own background at partial opacity, so they follow the palette instead of adding a second near-black. */ --overlay-scrim: rgba(7, 11, 20, 0.92); --overlay-chip: rgba(7, 11, 20, 0.72); /* The ink for anything on --overlay-chip. The chip turns near-white in a light theme, so --on-dark put a white glyph on a white button here. Paired with the fills for the same reason --hero-chip-ink is: the fill is a token, so its ink has to be one too. */ --overlay-chip-ink: #FFFFFF; /* The hover fill is its own token and it is opaque. It was --overlay-scrim, which is a translucent wash, and a translucent fill makes the glyph's contrast depend on whatever picture is underneath: at 0.55 over one of the project's own dark screenshots a dark glyph measured 1.07:1, and the affordance vanished on hover. An opaque fill is the same colour whatever the image does, which is the only way a control laid on top of six different screenshots can be checked once and trusted. */ --overlay-chip-hover-bg: #1B2638; --overlay-chip-ink-hover: #FFFFFF; /* --- Gradients --- */ /* The primary fill. White labels sit on this in both modes, so every stop has to clear 4.5:1: #1E6FE0 gives 4.77:1 and #0B7C9E 4.78:1. The previous cyan stop, #0FA5D6, sat at 2.85:1 and put the "Book a consultation" label under the threshold on the brightest part of every button. */ --grad: linear-gradient(90deg, #1E6FE0, #0B7C9E); --grad-soft: linear-gradient(160deg, #1A2A44, #0E1626 45%); --focus: 2px solid var(--cyan); --focus-offset: 3px; --shadow-primary: 0 10px 28px rgba(15, 165, 214, 0.25); --shadow-primary-hover: 0 14px 34px rgba(15, 165, 214, 0.35); --shadow-card-hover: 0 18px 40px rgba(0, 0, 0, 0.35); --shadow-frame: 0 40px 90px rgba(0, 0, 0, 0.55); --shadow-chip: 0 16px 40px rgba(0, 0, 0, 0.5); /* --- Shape and rhythm --- */ --radius: 18px; --radius-sm: 12px; --radius-xs: 10px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --radius-cta: 28px; --wrap-w: 1200px; --gutter: 24px; --gutter-sm: 16px; --section-pad: 96px; --section-pad-sm: 72px; --section-head-gap: 52px; --section-head-gap-sm: 40px; --hero-pad: 72px 80px; --hero-pad-sm: 48px 64px; --hero-gap: 56px; --hero-gap-sm: 44px; /* The hero frame's top padding is unchanged: the chip that hangs above it overlaps the copy column, which is empty up there, so the section does not need to grow at the top. Only the bottom does, because the chip hanging below the frame has to clear the hero's own edge before the next section starts, or it lands on top of it. */ --hero-pad-block-end: 140px; --hero-pad-block-end-sm: 140px; --grid-gap: 24px; --grid-gap-4: 22px; --grid-gap-sm: 16px; /* --- Type scale --- */ --fs-body: 16px; --lh-body: 1.6; --fs-eyebrow: 12.5px; --fs-h1-min: 32px; --fs-h1-max: 46px; --lh-h1: 1.12; --fs-h2-min: 28px; --fs-h2-max: 40px; --lh-h2: 1.15; --fs-h3-card: 19px; --fs-h3-why: 18px; --fs-h3-case: 20px; --fs-h3-post: 20px; --fs-lead: 18px; --fs-sub: 15.5px; --fs-body-lg: 17px; --fs-card-p: 15px; --fs-card-p-sm: 14.5px; --fs-link: 15px; --fs-tag: 13px; --fs-foot-h4: 12.5px; --fs-quote: 15.5px; --fs-step: 28px; --fs-step-h3: 17px; --fs-step-p: 14px; --fs-ind-h3: 18px; --fs-ind-p: 14.5px; --fs-btn: 15px; --fs-btn-sm: 14px; --fs-label: 13px; --fs-small: 14px; --lh-quote: 1.7; --lh-section-p: 1.7; --lh-h3: 1.35; --fs-cat: 13px; --fs-number: 28px; --lh-number: 1; --tracking-eyebrow: 0.2em; --tracking-foot: 0.14em; --tracking-pill: 0.04em; --tracking-heading: -0.02em; --tracking-heading-soft: -0.015em; /* --- Fonts --- */ --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif; --body: 'DM Sans', 'Segoe UI', system-ui, sans-serif; /* --- Motion --- */ --t-fast: 0.2s; --t-mid: 0.25s; --t-slide: 0.55s; --t-accel: cubic-bezier(0.22, 0.8, 0.26, 1); --ease: ease; /* --- Rhythm --- */ /* A gap is spacing between components. A bleed is a negative inset that lets a element sit flush to a container edge while its box keeps the rhythm, so a card hover can lift without the shadow being clipped. Only the carousel viewport uses a bleed today. */ --bleed: 12px; /* --- Component sizing --- */ --btn-min-h: 50px; --btn-min-h-sm: 42px; --btn-px: 24px; --btn-px-sm: 18px; --btn-radius: 12px; --btn-radius-sm: 10px; --icon: 20px; --icon-sm: 18px; --ico: 48px; --ico-sm: 44px; --ico-svg: 24px; --ico-svg-sm: 22px; --nav-h: 76px; --nav-logo-h: 36px; --foot-logo-h: 42px; --t-btn-size: 50px; --tcard-qmark: 54px; --avatar: 46px; --ind-arrow: 34px; --social: 44px; --nav-toggle: 44px; --faq-q-min-h: 64px; --cta-pad: 60px 64px; --cta-pad-sm: 40px 28px; --faq-side: 360px; --faq-gap: 64px; --faq-gap-sm: 36px; --faq-sticky-top: 110px; --faq-q-pad: 16px 24px; --faq-a-pad: 0 24px 22px; --ind-min: 210px; --foot-col-gap: 16px; --foot-list-gap: 12px; --foot-pad-top: 64px; --foot-pad-bottom: 28px; --foot-bottom-gap: 52px; --foot-bottom-pad: 24px; --foot-brand-p: 320px; --nav-link-gap: 32px; --nav-gap: 24px; /* --- Services mega menu --- */ /* The panel is anchored to the header and spans the full viewport width, so the category rail and the link grid line up with the page grid inside. */ --mega-pad-y: 34px; --mega-pad-x: 0px; --mega-col-gap: 44px; --mega-rail-w: 236px; --mega-link-gap: 30px 18px; --mega-item-pad: 11px 12px; --mega-icon: 38px; --mega-search-h: 46px; --mega-shadow: 0 28px 60px rgba(2, 6, 23, 0.55); --card-pad: 30px; --card-pad-why: 30px 28px; --card-pad-ind: 24px; --card-pad-step: 24px 22px; --card-pad-tcard: 32px 30px; --card-pad-form: 32px; --card-pad-case-img: 140px; /* Outermost padding of the outcomes panel. Only service pages use it; it lives here beside its siblings so the rhythm is one list. */ --out-band-pad: 56px; --out-band-pad-sm: 30px; --case-img-pad: 18px; --card-foot-pad: 16px; --author-pad: 20px; --author-gap: 14px; --svc-gap: 14px; --tcard-gap: 20px; --pill-gap: 8px; --pill-pad: 7px 13px; --tag-pad: 6px 12px; --hero-ctas-gap: 12px; --hero-note-gap: 10px; --pills-margin: 26px; --hero-lead-mt: 18px; --hero-sub-mt: 10px; --hero-ctas-mt: 28px; --hero-note-mt: 18px; --hero-h1-mt: 16px; --icon-shift: 3px; --chip-ico: 36px; --chip-ico-radius: 10px; --chip-pad: 12px 16px; --chip-gap: 12px; --chip-radius: 14px; /* The chips hang outside the frame, above and below it, so the film is never covered. Each is pinned to the frame edge it belongs to and pushed outward by its own margin, so the gap is exact whatever the chip's height turns out to be and it cannot drift when the copy inside it grows. The margin also absorbs the bob, which moves a chip inward by --bob-distance at the far end of the cycle, so the closest the chip ever comes to the film is still --chip-gap-y. Chosen that way, a longer bob needs no second edit here. */ --chip-gap-y: 12px; --chip-a-x: -26px; --chip-a-y: calc(var(--chip-gap-y) - var(--bob-distance)); --chip-b-x: -18px; --chip-b-y: var(--chip-gap-y); --chip-a-m-x: 12px; --chip-a-m-y: calc(var(--chip-gap-y) - var(--bob-distance)); --chip-b-m-x: 12px; --chip-b-m-y: var(--chip-gap-y); --hero-frame-pad: 8px; --hero-frame-ratio: 1302/720; --hero-frame-radius: 15px; --hero-sound-size: 44px; --hero-sound-inset: 14px; /* Small screens shrink the control, but never below the 40px the rest of the site treats as a comfortable tap target. */ --hero-sound-size-sm: 42px; --hero-glow-1: 700px 420px; --hero-glow-1-at: 88% 20%; --hero-glow-2: 520px 320px; --hero-glow-2-at: 5% 90%; --hero-grid: 56px; --bob-distance: -8px; --bob-duration: 6s; --nav-logo-radius: 0; --nav-logo-pad: 0; --logo-pad: 2px; } /* ============================================================================= 01b. LIGHT MODE The dark set above is the default and stays in :root. Light mode is an override of the same token names, so every rule in sections 02-18 keeps working and a rule never has to know which mode is active. Order matters and it is deliberate: @media (prefers-color-scheme: light) - the visitor asked for light and has not expressed a preference in the site's own control [data-theme='light'] - an explicit choice, wins over the system in either direction [data-theme='dark'] - an explicit choice of the mode :root already describes `data-theme='auto'` sets no attribute at all, so the media query decides and a system change is picked up live with no reload. The brand green moves to the dark end of the same ramp here: #069854 for anything that only has to be visible (3.32:1 on white) and #058349 for brand-coloured text (4.83:1), with #026436 reserved for AAA body copy (7.29:1). See section 01 for why one green cannot serve both modes. ========================================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { color-scheme: light; /* --- Surfaces --- */ --bg: #FFFFFF; --bg-2: #F6F8FA; --card: #FFFFFF; --card-2: #F1F5F9; /* --- Borders --- */ --line: #DDE4EC; --line-2: #C6D2DE; /* --- Brand green, dark end of the same ramp --- #057944 rather than #058349: the brand green is used as a status colour on the pale green pills and rows, and the lightest of those tints is #DAEEE7, where #058349 read 3.99:1 and #057944 reads 4.54:1. It still clears AAA on white at 5.49:1. */ --lime: #057944; --brand: #0AA25B; --brand-strong: #026436; --brand-surface: rgba(10, 162, 91, 0.1); --brand-surface-strong: rgba(10, 162, 91, 0.16); --brand-line: rgba(5, 131, 73, 0.32); --lime-shadow: rgba(5, 131, 73, 0.14); --hero-glow-lime: rgba(10, 162, 91, 0.07); --cta-glow-lime: rgba(10, 162, 91, 0.09); --chip-ico-lime-bg: rgba(10, 162, 91, 0.12); /* Teal is used for rules, borders and the filled band. As a band fill in a light theme it has to stay dark enough for white copy to clear 4.5:1, so the dark-mode value is kept: #2E7683 gives 5.20:1 against white and the same ratio for its own heading. The dark mode reads the same. */ --teal: #2E7683; --teal-ink: #E3F1F3; --lime-on-teal: #D9F6E7; --cyan: #0E6F86; --amber: #8A5A00; --status-block: #A64A4A; --icon-bg: #E4F4EC; /* --- Text --- */ --text: #101828; --text-2: #414C5E; --text-3: #5A6675; --white: #FFFFFF; --text-strong: #0B1220; --text-nav: #1F2937; --text-on-surface: #16202F; --text-on-surface-2: #1B2635; --text-quote-mark: #D7E5DD; --text-count-alt: #EEF7F8; --text-amber-on: #FFFFFF; --footer-logo-bg: #FFFFFF; --on-dark: #FFFFFF; --nav-bg: rgba(255, 255, 255, 0.88); --ghost-bg: transparent; --foot-bg: #0B1220; --foot-text: #E6EAF2; --foot-text-2: #A7B0C0; --foot-text-3: #8B96AA; /* --- Decorative --- */ --pill-bg: #ECF6F1; --pill-line: #BFE3D2; --pill-text: #0B5F45; --tag-bg: #E4F4EC; --step-num: var(--cyan); --carousel-dot: rgba(16, 24, 40, 0.3); --carousel-dot-active: #101828; --ghost-hover: rgba(10, 162, 91, 0.07); --card-hover-line: rgba(5, 131, 73, 0.45); --hero-chip-bg: rgba(255, 255, 255, 0.95); --hero-chip-hover-bg: rgba(241, 245, 249, 0.95); --hero-chip-ink: #0B1220; --hero-chip-ink-2: #5A6675; --hero-chip-line: #D3DDE7; --hero-frame-a: #E8EEF4; --hero-frame-b: #D6E0E9; --star: var(--amber); --avatar-bg: var(--grad); --t-btn-bg-hover: rgba(16, 24, 40, 0.05); --t-btn-solid-hover: #E7EDF3; --footer-icon: #3A4557; --hero-glow-cyan: rgba(14, 111, 134, 0.08); --grid-line: rgba(16, 24, 40, 0.03); --mask-fade: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 40%, transparent); --cta-glow-cyan: rgba(14, 111, 134, 0.14); --chip-ico-cyan-bg: rgba(14, 111, 134, 0.12); --overlay-scrim: rgba(16, 24, 40, 0.55); --overlay-chip: rgba(255, 255, 255, 0.86); --overlay-chip-ink: #0B1220; /* Opaque, for the reason given in the dark block. White on it reads 18.72:1 whatever the screenshot underneath is, where the translucent scrim it replaced gave 1.07:1 over a dark one and 3.96:1 over a white one � the glyph was never dependable on hover. */ --overlay-chip-hover-bg: #0B1220; --overlay-chip-ink-hover: #FFFFFF; /* --- Gradients and shadows --- */ --grad: linear-gradient(90deg, #1D64C9, #0A6577); --grad-soft: linear-gradient(160deg, #EAF0F6, #F7F9FB 45%); --focus: 2px solid var(--cyan); --focus-offset: 3px; --shadow-primary: 0 10px 28px rgba(14, 111, 134, 0.18); --shadow-primary-hover: 0 14px 34px rgba(14, 111, 134, 0.26); --shadow-card-hover: 0 18px 40px rgba(16, 24, 40, 0.1); --shadow-frame: 0 40px 90px rgba(16, 24, 40, 0.14); --shadow-chip: 0 16px 40px rgba(16, 24, 40, 0.12); } } /* An explicit choice in either direction. These two blocks repeat the whole light set on purpose: `data-theme` has to beat the system preference in both directions, and a :root:not([data-theme='dark']) selector cannot express the dark choice from inside the media query. */ [data-theme='light'] { color-scheme: light; --bg: #FFFFFF; --bg-2: #F6F8FA; --card: #FFFFFF; --card-2: #F1F5F9; --line: #DDE4EC; --line-2: #C6D2DE; --lime: #057944; --brand: #0AA25B; --brand-strong: #026436; --brand-surface: rgba(10, 162, 91, 0.1); --brand-surface-strong: rgba(10, 162, 91, 0.16); --brand-line: rgba(5, 131, 73, 0.32); --lime-shadow: rgba(5, 131, 73, 0.14); --hero-glow-lime: rgba(10, 162, 91, 0.07); --cta-glow-lime: rgba(10, 162, 91, 0.09); --chip-ico-lime-bg: rgba(10, 162, 91, 0.12); --teal: #2E7683; --teal-ink: #E3F1F3; --lime-on-teal: #D9F6E7; --cyan: #0E6F86; --amber: #8A5A00; --status-block: #A64A4A; --icon-bg: #E4F4EC; --text: #101828; --text-2: #414C5E; --text-3: #5A6675; --white: #FFFFFF; --text-strong: #0B1220; --text-nav: #1F2937; --text-on-surface: #16202F; --text-on-surface-2: #1B2635; --text-quote-mark: #D7E5DD; --text-count-alt: #EEF7F8; --text-amber-on: #FFFFFF; --footer-logo-bg: #FFFFFF; --on-dark: #FFFFFF; --nav-bg: rgba(255, 255, 255, 0.88); --ghost-bg: transparent; --foot-bg: #0B1220; --foot-text: #E6EAF2; --foot-text-2: #A7B0C0; --foot-text-3: #8B96AA; --pill-bg: #ECF6F1; --pill-line: #BFE3D2; --pill-text: #0B5F45; --tag-bg: #E4F4EC; --step-num: var(--cyan); --carousel-dot: rgba(16, 24, 40, 0.3); --carousel-dot-active: #101828; --ghost-hover: rgba(10, 162, 91, 0.07); --card-hover-line: rgba(5, 131, 73, 0.45); --hero-chip-bg: rgba(255, 255, 255, 0.95); --hero-chip-hover-bg: rgba(241, 245, 249, 0.95); --hero-chip-ink: #0B1220; --hero-chip-ink-2: #5A6675; --hero-chip-line: #D3DDE7; --hero-frame-a: #E8EEF4; --hero-frame-b: #D6E0E9; --star: var(--amber); --avatar-bg: var(--grad); --t-btn-bg-hover: rgba(16, 24, 40, 0.05); --t-btn-solid-hover: #E7EDF3; --footer-icon: #3A4557; --hero-glow-cyan: rgba(14, 111, 134, 0.08); --grid-line: rgba(16, 24, 40, 0.03); --mask-fade: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 40%, transparent); --cta-glow-cyan: rgba(14, 111, 134, 0.14); --chip-ico-cyan-bg: rgba(14, 111, 134, 0.12); --overlay-scrim: rgba(16, 24, 40, 0.55); --overlay-chip: rgba(255, 255, 255, 0.86); --overlay-chip-ink: #0B1220; /* Opaque, for the reason given in the dark block. White on it reads 18.72:1 whatever the screenshot underneath is, where the translucent scrim it replaced gave 1.07:1 over a dark one and 3.96:1 over a white one � the glyph was never dependable on hover. */ --overlay-chip-hover-bg: #0B1220; --overlay-chip-ink-hover: #FFFFFF; --grad: linear-gradient(90deg, #1D64C9, #0A6577); --grad-soft: linear-gradient(160deg, #EAF0F6, #F7F9FB 45%); --focus: 2px solid var(--cyan); --focus-offset: 3px; --shadow-primary: 0 10px 28px rgba(14, 111, 134, 0.18); --shadow-primary-hover: 0 14px 34px rgba(14, 111, 134, 0.26); --shadow-card-hover: 0 18px 40px rgba(16, 24, 40, 0.1); --shadow-frame: 0 40px 90px rgba(16, 24, 40, 0.14); --shadow-chip: 0 16px 40px rgba(16, 24, 40, 0.12); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; } } [data-theme='dark'] { color-scheme: dark; } /* ============================================================================= 02. RESET AND BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Keeps an anchor target clear of the sticky header. */ scroll-padding-top: calc(var(--nav-h) + 24px); } body { margin: 0; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--bg); color: var(--text); font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; margin: 0; padding: 0; } figure, blockquote { margin: 0; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; } :focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); border-radius: var(--radius-xs); } [hidden] { display: none !important; } /* ============================================================================= 03. TYPOGRAPHY ========================================================================== */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); margin: 0; text-wrap: balance; } /* A heading on a filled band takes the on-fill colour. This sits after the blanket rule above so it wins on source order without needing a token that both modes would have to agree on. */ .section.teal h1, .section.teal h2, .section.teal h3, .section.teal h4, .cta-band h1, .cta-band h2, .cta-band h3, .cta-band h4 { color: var(--on-dark); } h1 { font-size: clamp(var(--fs-h1-min), 3.6vw, var(--fs-h1-max)); line-height: var(--lh-h1); font-weight: 800; letter-spacing: var(--tracking-heading); } h2 { font-size: clamp(var(--fs-h2-min), 3.2vw, var(--fs-h2-max)); line-height: var(--lh-h2); font-weight: 700; letter-spacing: var(--tracking-heading-soft); } h3 { font-size: var(--fs-h3-card); font-weight: 700; line-height: var(--lh-h3); } h4 { font-size: 16px; font-weight: 700; line-height: 1.4; } p { margin: 0; } strong, b { font-weight: 700; /* Only the page's strongest ink, which is the colour a bare heading would already have used. Inheriting from the parent was what left a white h3 on a white card in a light theme and white initials on a white avatar. The on-fill cases that genuinely need white say so themselves, below. */ color: var(--text-strong); } /* A card on a plain page background keeps the card surface in both themes, so a heading inside it needs the same rule as any other heading on that surface. The blanket heading rule is stated here rather than inherited, because these are the cards a light theme turns white. */ .card h1, .card h2, .card h3, .card h4 { color: var(--text-strong); } /* Inside a filled band the band paints white across its whole subtree, because the band itself needs white. Anything that paints its own surface inside that band then needs the page ink back, or white text lands on a white fill. The general case is a child that has a background of its own, which is what a card, a panel, a row or a nested band is. Naming those containers keeps the fix in one place, so a new component added to a band is covered by default rather than needing its own reset. The nested headings and emphasis are listed too, because the per-component on-fill rules below are the same specificity and come later in the file. */ .section.teal :is(.card, .faq-item, .out-band, .proof, .hero-panel, .fit, .plan, .stat, .deliv), .out-band :is(.card, .faq-item, .proof, .plan, .stat, .deliv), .cta-band :is(.card, .faq-item, .proof, .plan, .stat, .deliv) { color: var(--text-strong); } .section.teal :is(.card, .faq-item, .out-band, .proof, .hero-panel, .fit, .plan, .stat, .deliv) :is(h1, h2, h3, h4, strong, b), .out-band :is(.card, .faq-item, .proof, .plan, .stat, .deliv) :is(h1, h2, h3, h4, strong, b), .cta-band :is(.card, .faq-item, .proof, .plan, .stat, .deliv) :is(h1, h2, h3, h4, strong, b) { color: var(--text-strong); } /* Emphasis inside a card on a plain background is the same case. */ .card strong, .card b { color: var(--text-strong); } /* The blanket emphasis rule above declares a colour on every strong and b, so a child of an on-fill element inherits the page ink instead of the fill's ink. That is invisible on a filled brand circle, where the initials read as page ink on brand green. Naming the descendants that sit inside an on-fill element covers the counter and the avatar alike. */ .avatar :is(strong, b), .avatar > *, .t-count :is(strong, b), .t-count > * { color: var(--on-dark); } /* An avatar is a filled brand circle with white initials on it in both themes, so the initials need the on-fill colour rather than the page's. */ .avatar, .t-count { color: var(--on-dark); } /* A bare counter or stat sitting directly on a filled band reads white. */ .t-count, .stat b, .hero-panel-stat b, .author strong, .cta-band h4 { color: var(--on-dark); } small { font-size: var(--fs-label); color: var(--text-3); } hr { border: 0; border-top: 1px solid var(--line); margin: 0; } /* Logo: raster logos need breathing room and a dark plate to sit on. */ .nav-logo, .logo { display: inline-flex; align-items: center; border-radius: var(--nav-logo-radius); background: var(--nav-logo-pad, transparent); padding: var(--logo-pad); } .nav-logo img { height: var(--nav-logo-h); width: auto; } /* The wordmark in logo.svg is white, because the header it was drawn for is dark. On a light header it disappears, so the file carries a second variant with the same geometry and a dark wordmark, and the source swaps on the image rather than on the wrapper: an cannot be recoloured by CSS and a filter would tint the red and green marks as well. */ [data-theme='light'] .nav-logo img, [data-theme='light'] .foot-brand img { content: url('../img/logo-dark.svg'); } @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .nav-logo img, :root:not([data-theme='dark']) .foot-brand img { content: url('../img/logo-dark.svg'); } } /* Shared icon sizing. */ .icon { width: var(--icon); height: var(--icon); flex-shrink: 0; } svg { display: block; } /* ============================================================================= 04. LAYOUT PRIMITIVES ========================================================================== */ .wrap { max-width: var(--wrap-w); margin-inline: auto; padding-inline: var(--gutter); } @media (max-width: 480px) { .wrap { padding-inline: var(--gutter-sm); } } .center { display: flex; justify-content: center; margin-top: 44px; } /* A page-level shell for templates that need the full-bleed treatment. */ .page-body { background: var(--bg); } /* The inline SVG sprite is a zero-size element; keep it out of layout flow. */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* Page-level markers. No visual effect - they exist so a page or a WordPress template body can be targeted, and so an audit can confirm a class is intentional rather than a typo. */ .page-home, .page-service, .page-landing, .page-corporate { background: var(--bg); } /* Skip link: the first focusable element on every page. */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 200; padding: 12px 20px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--cyan); color: var(--bg); font-weight: 700; transition: top var(--t-fast); } .skip-link:focus { top: 0; } /* Breadcrumbs sit above the hero H1 on interior pages. */ .crumb { font-size: var(--fs-label); color: var(--text-3); margin-bottom: 18px; } .crumb a { color: var(--text-2); transition: color var(--t-fast); } .crumb a:hover { color: var(--cyan); } .crumb-sep { color: var(--text-3); padding-inline: 6px; } /* ============================================================================= 04b. PROSE The one column that is read rather than scanned: an article body, a service page's written account, and whatever the WordPress editor writes into a post. It lives here rather than in a page stylesheet because the content is editor-owned on three page types, and a rule that only existed on the blog page would leave the same markup unstyled in WordPress. The measure is capped rather than left to the wrap, because a line of text past about 75 characters is measurably harder to track back from. ========================================================================== */ .prose { max-width: 72ch; color: var(--text-2); } .prose > * + * { margin-top: 1.15em; } .prose p, .prose li { font-size: var(--fs-body-lg); line-height: 1.75; } /* An h2 in the body of an article is a landmark, not a caption: it needs enough space above it to read as a new section and enough below it to stay attached to what follows. */ .prose h2 { font-size: 26px; line-height: 1.25; color: var(--text); margin-top: 1.9em; scroll-margin-top: calc(var(--nav-h) + 24px); } .prose h3 { font-size: var(--fs-h3-card); line-height: var(--lh-h3); color: var(--text); margin-top: 1.7em; } .prose h4 { font-size: var(--fs-lead); font-weight: 700; color: var(--text); margin-top: 1.5em; } .prose > h2:first-child, .prose > h3:first-child { margin-top: 0; } .prose strong { color: var(--text); font-weight: 700; } .prose em { font-style: italic; } .prose a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { color: var(--cyan); } .prose ul, .prose ol { padding-left: 1.35em; display: flex; flex-direction: column; gap: 0.65em; } .prose li { padding-left: 0.25em; } .prose li::marker { color: var(--lime); font-weight: 700; } .prose blockquote { border-left: 3px solid var(--teal); padding: 4px 0 4px 22px; margin-inline: 0; font-size: var(--fs-lead); line-height: 1.65; color: var(--text); } .prose img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; } .prose figure { margin: 0; } .prose figcaption { font-size: var(--fs-tag); color: var(--text-3); margin-top: 10px; text-align: center; } .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 2px 6px; } .prose pre { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; overflow-x: auto; } .prose pre code { background: none; border: 0; padding: 0; } .prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.2em; } /* An editor's anchor in the body scrolls under the sticky header without it. */ .prose :target { scroll-margin-top: calc(var(--nav-h) + 24px); } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-card-p); } .prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; } .prose th { background: var(--card-2); color: var(--text); font-weight: 700; } @media (max-width: 760px) { .prose p, .prose li { font-size: var(--fs-lead); line-height: 1.7; } } /* ============================================================================= 05. BUTTONS AND LINKS ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-min-h); padding: 0 var(--btn-px); border-radius: var(--btn-radius); font-weight: 600; font-size: var(--fs-btn); white-space: nowrap; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), border-color var(--t-fast); } .btn .icon { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--t-fast); } .btn:hover .icon { transform: translateX(var(--icon-shift)); } .btn-primary { background: var(--grad); color: var(--on-dark); box-shadow: var(--shadow-primary); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary-hover); } .btn-ghost { border: 1px solid var(--line-2); color: var(--text); background: var(--ghost-bg); } .btn-ghost:hover { border-color: var(--cyan); background: var(--ghost-hover); } .btn-amber { background: var(--amber); color: var(--text-amber-on); font-weight: 700; } .btn-amber:hover { transform: translateY(-2px); } .btn-sm { min-height: var(--btn-min-h-sm); padding: 0 var(--btn-px-sm); font-size: var(--fs-btn-sm); border-radius: var(--btn-radius-sm); } .link { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font-weight: 600; font-size: var(--fs-link); } .link svg { width: 16px; height: 16px; transition: transform var(--t-fast); } .card:hover .link svg, .link:hover svg { transform: translateX(4px); } .card-foot { padding-top: var(--card-foot-pad); border-top: 1px solid var(--line); } /* ============================================================================= 06. HEADER / NAVIGATION Every page uses this header. The markup matches the WordPress header.php. ========================================================================== */ .nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--nav-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--nav-gap); height: var(--nav-h); } .nav-links { display: flex; align-items: center; gap: var(--nav-link-gap); font-size: var(--fs-btn); font-weight: 500; color: var(--text-nav); } /* The header's own links. Scoped to the direct children so the mega panel's links, which are inside .nav-links but sit on the panel surface, keep their own padding and colour rules. */ .nav-links > a, .nav-links > .nav-item > a { position: relative; padding: 6px 0; transition: color var(--t-fast); } /* The consultation CTA is an .btn inside .nav-links, so the link rule above would strip its horizontal padding and squash the label against the edges. Restore the button's own padding and drop the underline affordance. */ .nav-links .nav-cta { padding: 0 var(--btn-px-sm); } .nav-links .nav-cta::after { display: none; } /* The header sits on the page surface in both modes, so its own links take the header's ink on hover rather than --on-dark, which is white and left every menu item invisible on hover in a light theme. */ .nav-links > a:hover, .nav-links > a[aria-current='page'], .nav-links > .nav-item > a:hover, .nav-links > .nav-item > a[aria-current='page'] { color: var(--text-nav); } .nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; } /* Scoped to the header's own links for the same reason as the hover ink above: a .mega-link would otherwise draw the underline across the mega panel. */ .nav-links > .nav-item > a:hover::after, .nav-links > .nav-item > a[aria-current='page']::after, .nav-links > a:hover::after, .nav-links > a[aria-current='page']::after { transform: scaleX(1); } .nav-cta { flex-shrink: 0; } /* --- Theme mode control --- A three-way segmented control (Auto / Light / Dark) rather than a two-state toggle, because the visitor's default has to stay expressible: once someone picks Light or Dark by hand, "follow my system" is no longer a state the control can return to on its own. It sits at the top right of the header, after the CTA and before the mobile menu button. The three options are radio inputs, so a keyboard visitor gets arrow-key movement and the browser announces the checked state; each option is an icon with a visually hidden word, so the group reads as one compact tab stop rather than three labelled buttons. */ .theme-switch { display: flex; align-items: center; flex-shrink: 0; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--bg-2); } .theme-switch-opt { position: relative; display: flex; } .theme-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .theme-switch-face { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 30px; padding: 0 9px; border-radius: var(--radius-pill); color: var(--text-2); font-size: var(--fs-foot-h4); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast); pointer-events: none; } .theme-switch-face svg { width: 16px; height: 16px; flex-shrink: 0; } /* Three icons, no words. The words were shown on the Auto option, which made the control three times wider than it needed to be for something a visitor uses rarely. Each label keeps its own text as an accessible name and a title, so the icon still says what it does to a screen reader and on hover, and the words are removed from the visual layer rather than from the DOM. */ .theme-switch-face span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .theme-switch:hover .theme-switch-face, .theme-switch:focus-within .theme-switch-face { color: var(--text); } .theme-switch input:checked + .theme-switch-face { background: var(--card); /* The checked option carries the brand green as text, so it has to clear 4.5:1 against the pill it sits on rather than merely being visible. In light mode --brand is only 3.32:1 on white, so the text role is used here instead of the UI role. */ color: var(--brand-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); } .theme-switch input:focus-visible + .theme-switch-face { outline: var(--focus); outline-offset: 2px; } /* The switch is a control, so it needs a label a screen reader can read and a hit area a finger can hit. The whole group is one fieldset. */ .theme-switch legend { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 1180px) { .theme-switch-face { min-width: 32px; padding: 0 8px; } } @media (max-width: 960px) { .theme-switch { order: 3; } } @media (max-width: 520px) { .theme-switch { gap: 0; padding: 2px; } .theme-switch-face { min-width: 30px; height: 28px; padding: 0 6px; } .theme-switch-face svg { width: 14px; height: 14px; } } .nav-toggle { display: none; width: var(--nav-toggle); height: var(--nav-toggle); border-radius: var(--radius-xs); border: 1px solid var(--line-2); background: transparent; /* The button sits on the header, not on a dark fill, so it takes the header's own text colour. */ color: var(--text-nav); align-items: center; justify-content: center; } .mobile-menu { display: none; border-top: 1px solid var(--line); padding-block: 12px 20px; } .mobile-menu a { display: block; padding: 12px 0; font-weight: 500; border-bottom: 1px solid var(--line); } .mobile-menu .btn { margin-top: 16px; width: 100%; border-bottom: 0; } /* On mobile the mega panel is unreachable, so the same service list is served as an accordion inside the mobile menu. The panel itself is removed from the layout entirely rather than left for a visitor to find. */ @media (max-width: 960px) { .mega { display: none; } } .mega-mobile { border-bottom: 1px solid var(--line); } .mega-mobile > summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; font-weight: 500; cursor: pointer; list-style: none; } .mega-mobile > summary::-webkit-details-marker { display: none; } .mega-mobile > summary .chev { width: 16px; height: 16px; color: var(--text-3); transition: transform var(--t-fast); } .mega-mobile[open] > summary .chev { transform: rotate(180deg); } .mega-mobile-body { padding: 4px 0 16px; } .mega-mobile-links { display: grid; gap: 2px; } .mega-mobile-links a { display: block; padding: 9px 0 9px 14px; border-left: 2px solid var(--line-2); font-size: var(--fs-card-p-sm); color: var(--text-2); } .mega-mobile-links a:hover, .mega-mobile-links a:focus-visible { /* The hover fill stays transparent and only the border takes the brand colour, so the link keeps the page's ink. --on-dark here was white text on a near-white surface in a light theme. */ border-left-color: var(--lime); color: var(--text-strong); } @media (max-width: 960px) { .nav-links, .nav-cta { display: none; } .nav-toggle { display: inline-flex; } .nav.open .mobile-menu { display: block; } } /* ----------------------------------------------------------------------------- 06b. SERVICES MEGA MENU The "Services" item in the primary nav opens a full-width panel: a category rail on the left, a two-column link grid in the middle, and the service description plus a CTA on the right. Choosing a category swaps the link grid without navigating, which is what makes it a menu rather than a page. The rail and the grid are siblings, so both are driven by the same [data-mega-group] value. See initMega() in assets/js/site.js. -------------------------------------------------------------------------- */ .nav-item { position: static; } .nav-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; color: inherit; font: inherit; cursor: pointer; background: none; border: 0; } .nav-trigger .chev { width: 14px; height: 14px; opacity: 0.65; transition: transform var(--t-fast); } /* The trigger stays on the header, which is the page surface in both modes, so its open state takes the header's own ink. --on-dark here was white on a white header the moment the panel opened in a light theme. */ .nav-item.open .nav-trigger { color: var(--text-nav); } .nav-item.open .nav-trigger .chev { transform: rotate(180deg); opacity: 1; } /* The underline lives on the wrapper, so it sits under the whole item rather than under the button alone. */ .nav-item::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid); } .nav-item:hover::after, .nav-item.open::after, .nav-item:focus-within::after { transform: scaleX(1); } .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-2); border-block: 1px solid var(--line); box-shadow: var(--mega-shadow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid); } .nav-item.open .mega { opacity: 1; visibility: visible; transform: translateY(0); } .mega-inner { display: grid; grid-template-columns: var(--mega-rail-w) 1fr 280px; gap: var(--mega-col-gap); padding-block: var(--mega-pad-y); } /* --- Category rail --- */ .mega-rail { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); padding-right: 20px; } .mega-cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 0; border-radius: var(--radius-xs); background: none; color: var(--text-2); font: inherit; font-weight: 600; text-align: left; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .mega-cat:hover { background: var(--card); color: var(--text); } .mega-cat[aria-selected='true'] { background: var(--card-2); /* The selected rail item keeps the panel surface behind it, so it takes the page's strongest text colour. --on-dark was white on a white panel in a light theme. */ color: var(--text-strong); box-shadow: inset 3px 0 0 var(--lime); } /* Keyboard focus has to stay loud: the rail uses a roving tabindex, so this is the only cue a keyboard visitor gets for which category they are on. */ .mega-cat:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); } .mega-cat .chev { width: 13px; height: 13px; opacity: 0; transition: opacity var(--t-fast), transform var(--t-fast); color: var(--lime); } .mega-cat[aria-selected='true'] .chev { opacity: 1; } /* --- Link grid --- */ /* The wrapper is a plain block. The active group spans it and does its own column layout, so switching category cannot leave the group stranded in one narrow cell of a two-column parent. */ .mega-links { min-width: 0; } .mega-link { display: flex; align-items: flex-start; gap: 12px; padding: var(--mega-item-pad); border-radius: var(--radius-sm); /* Stated rather than inherited: this is an inside .nav-links, so the header's own link colour would otherwise reach it. The panel is a --bg-2 surface in both modes, and the title inside carries its own ink. */ color: var(--text); transition: background var(--t-fast); } .mega-link:hover, .mega-link:focus-visible { background: var(--card); } .mega-link .ico { flex-shrink: 0; width: var(--mega-icon); height: var(--mega-icon); background: var(--icon-bg); color: var(--cyan); border-color: var(--line-2); } .mega-link h3 { font-size: var(--fs-card-p-sm); margin-bottom: 2px; } .mega-link p { font-size: var(--fs-small); color: var(--text-3); line-height: 1.5; } .mega-link:hover h3 { /* The hover fill is --card, which a light theme turns near-white, so the title takes the page's strongest ink. --on-dark was white on white here. The description keeps --text-3, which clears 4.5:1 on the same fill. */ color: var(--text-strong); } /* --- Aside --- */ .mega-aside { display: flex; flex-direction: column; gap: 16px; border-left: 1px solid var(--line); padding-left: 28px; } .mega-aside p { font-size: var(--fs-small); color: var(--text-2); line-height: 1.6; } .mega-search { position: relative; display: flex; align-items: center; } .mega-search .ico { position: absolute; left: 14px; width: 18px; height: 18px; background: none; border: 0; color: var(--text-3); pointer-events: none; } .mega-search input { width: 100%; height: var(--mega-search-h); padding: 0 14px 0 42px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: inherit; font-size: var(--fs-small); } .mega-search input::placeholder { color: var(--text-3); } .mega-search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46, 118, 131, 0.28); } .mega-count { font-size: var(--fs-small); color: var(--text-3); min-height: 1.2em; } .mega-count:empty { display: none; } /* Every category is in the DOM; only the selected one is displayed. The group spans the full width of the grid and lays its own links out in two columns, so the rail, the grid and the aside line up in three bands rather than the aside being pushed down by the group's own grid placement. */ .mega-group { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mega-link-gap); align-content: start; } .mega-group.is-active { display: grid; } .mega-empty { grid-column: 1 / -1; padding: 18px 12px; font-size: var(--fs-card-p-sm); color: var(--text-3); } @media (max-width: 1180px) { .mega-inner { grid-template-columns: 200px 1fr 240px; gap: 28px; } } @media (max-width: 1040px) { .mega-inner { grid-template-columns: var(--mega-rail-w) 1fr; } .mega-aside { display: none; } } /* ============================================================================= 07. HERO The home page and every interior page share this hero. Interior pages set `.hero.is-page` to drop the pill row when a service has no tool list. ========================================================================== */ .hero { position: relative; overflow: hidden; background: radial-gradient(var(--hero-glow-1) at var(--hero-glow-1-at), var(--hero-glow-cyan), transparent 70%), radial-gradient(var(--hero-glow-2) at var(--hero-glow-2-at), var(--hero-glow-lime), transparent 70%), var(--bg); } .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--hero-grid) var(--hero-grid); mask-image: var(--mask-fade); -webkit-mask-image: var(--mask-fade); pointer-events: none; } .hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 1.1fr; gap: var(--hero-gap); align-items: center; padding-block: 72px var(--hero-pad-block-end); } .eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--cyan); } .hero h1 { margin-top: var(--hero-h1-mt); } .hero h1 .accent, .hero h1 .hl { color: var(--lime); } .hero-lead { margin-top: var(--hero-lead-mt); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-on-surface); max-width: 540px; } .hero-sub { margin-top: var(--hero-sub-mt); font-size: var(--fs-sub); line-height: 1.65; color: var(--text-2); max-width: 540px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--hero-ctas-gap); margin-top: var(--hero-ctas-mt); } .hero-note { display: flex; align-items: center; gap: var(--hero-note-gap); margin-top: var(--hero-note-mt); font-size: var(--fs-small); color: var(--text-3); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex-shrink: 0; box-shadow: 0 0 0 4px var(--lime-shadow); } .pills { display: flex; flex-wrap: wrap; gap: var(--pill-gap); margin-top: var(--pills-margin); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: var(--pill-pad); border-radius: var(--radius-pill); border: 1px solid var(--pill-line); background: var(--pill-bg); font-size: 12.5px; font-weight: 600; letter-spacing: var(--tracking-pill); text-transform: uppercase; color: var(--pill-text); } .hero-visual { position: relative; } .hero-frame { position: relative; border-radius: var(--radius-lg); padding: var(--hero-frame-pad); background: var(--grad-soft); border: 1px solid var(--hero-chip-line); box-shadow: var(--shadow-frame); } .hero-frame img, .hero-frame video { width: 100%; /* height:auto is required, otherwise the width/height attributes on the win and aspect-ratio is ignored. */ height: auto; aspect-ratio: var(--hero-frame-ratio); object-fit: cover; border-radius: var(--hero-frame-radius); } /* The hero film. The frame's own darkest tone sits behind it so the letterbox before the first frame decodes is invisible rather than a black band. */ .hero-video { display: block; background: var(--hero-frame-b); } /* The sound toggle, in the video's bottom-right corner. Both glyphs are in the markup and CSS picks one, so the button's state is never carried by an image alone and there is no icon to swap in script. */ .hero-sound { position: absolute; right: var(--hero-sound-inset); bottom: var(--hero-sound-inset); width: var(--hero-sound-size); height: var(--hero-sound-size); display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 1px solid var(--hero-chip-line); background: var(--hero-chip-bg); /* Paired with the fill above: the round button is on the chip surface, which is a light panel in a light theme and a dark one in a dark theme. */ color: var(--hero-chip-ink); box-shadow: var(--shadow-chip); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .hero-sound:hover { background: var(--hero-chip-hover-bg); border-color: var(--card-hover-line); } .hero-sound:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); } /* Both glyphs sit in the markup and exactly one is shown, chosen by the button's state, so the two can never appear side by side. The muted glyph is the default because the film starts muted. */ .hero-sound svg + svg { display: none; } .hero-sound[aria-pressed='true'] svg:first-of-type { display: none; } .hero-sound[aria-pressed='true'] svg + svg { display: block; } .float-chip { position: absolute; display: flex; align-items: center; gap: var(--chip-gap); padding: var(--chip-pad); border-radius: var(--chip-radius); background: var(--hero-chip-bg); border: 1px solid var(--hero-chip-line); box-shadow: var(--shadow-chip); /* The chip carries its own surface, which is light in a light theme, so its text has to come from the token paired with that fill rather than from the body's colour. --on-dark was white on a white chip. */ color: var(--hero-chip-ink); } .float-chip .chip-ico { width: var(--chip-ico); height: var(--chip-ico); border-radius: var(--chip-ico-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .float-chip strong { display: block; font-size: 14px; /* The title is the chip's own heading, so it takes the strongest text colour rather than the on-fill colour. On the light chip surface that is what makes it readable. */ color: var(--text-strong); font-weight: 600; line-height: 1.3; } /* The paired second tint for the chip's own surface. --text-3 is a page token measured against --bg, and the chip paints its own fill, so the caption needs a token that was chosen against that fill. */ .float-chip span { font-size: 12px; color: var(--hero-chip-ink-2); } /* Each chip is pinned to the frame's edge it hangs off, so top and bottom place the chip's near edge directly and the gap in the tokens above is what actually renders, including at the far end of the bob. */ .chip-a { left: var(--chip-a-x); top: 100%; margin-top: var(--chip-a-y); } .chip-a .chip-ico { background: var(--chip-ico-lime-bg); color: var(--lime); } .chip-b { right: var(--chip-b-x); bottom: 100%; margin-bottom: var(--chip-b-y); } .chip-b .chip-ico { background: var(--chip-ico-cyan-bg); color: var(--cyan); } @media (prefers-reduced-motion: no-preference) { .chip-a { animation: bob var(--bob-duration) var(--ease) infinite; } .chip-b { animation: bob var(--bob-duration) var(--ease) -3s infinite; } } @keyframes bob { 50% { transform: translateY(var(--bob-distance)); } } @media (max-width: 960px) { .hero-inner { grid-template-columns: 1fr; gap: var(--hero-gap-sm); padding-block: 48px var(--hero-pad-block-end-sm); } .chip-a { left: var(--chip-a-m-x); top: 100%; margin-top: var(--chip-a-m-y); } .chip-b { right: var(--chip-b-m-x); bottom: 100%; margin-bottom: var(--chip-b-m-y); } } @media (max-width: 480px) { .chip-b { display: none; } .hero-sound { width: var(--hero-sound-size-sm); height: var(--hero-sound-size-sm); } .hero-ctas .btn { flex: 1 1 100%; } } /* Service hero visual: a framed data panel built from divs, no image needed. */ .hero-panel { border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--line-2); box-shadow: var(--shadow-frame); padding: 22px; position: relative; } .hero-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .hero-panel-head b { font-family: var(--font-display); font-size: 15px; /* The panel carries --bg-2 behind it, which flips with the theme, so the label follows the panel rather than assuming a dark fill. */ color: var(--text-strong); } .hero-panel-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-strong); } .hero-panel-dots { display: flex; gap: 6px; } .hero-panel-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); } .hero-panel-row { display: flex; align-items: center; gap: 14px; padding-block: 14px; border-bottom: 1px solid var(--line); } .hero-panel-row > div:first-child { flex: 1 1 auto; min-width: 0; font-size: 14.5px; color: var(--text); } .hero-panel-row small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; } .hero-panel-bar { flex: 0 0 34%; height: 6px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; } .hero-panel-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); } .hero-panel-bar.is-warn i { background: var(--amber); } .hero-panel-foot { display: flex; gap: 28px; padding-top: 18px; } .hero-panel-stat b { display: block; font-family: var(--font-display); font-size: 20px; /* The panel carries --bg-2 behind it, which is a dark slate in the dark theme and a near-white in the light one, so the figure follows the surface. */ color: var(--text-strong); line-height: 1.2; } .hero-panel-stat span { font-size: 12.5px; color: var(--text-3); } /* ============================================================================= 08. CLIENT STRIP ============================================================================= */ .clients { background: var(--teal); padding-block: 30px 34px; text-align: center; } .clients p { font-family: var(--font-display); font-weight: 600; color: var(--on-dark); font-size: var(--fs-btn); } .clients-scroll { overflow-x: auto; margin-top: 14px; scrollbar-width: none; } .clients-scroll::-webkit-scrollbar { display: none; } .clients img { width: 1000px; max-width: none; margin-inline: auto; opacity: 0.95; } .clients-logo-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 34px; margin-top: 14px; } .clients-logo-row span { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--teal-ink); opacity: 0.9; } @media (max-width: 1040px) { .clients img { width: 760px; } } /* ============================================================================= 09. SECTION FRAMEWORK Every page is a stack of `.section` blocks. `.section.teal` is the brand-teal band used to break up long pages. ========================================================================== */ .section { padding-block: var(--section-pad); } .section.teal { background: var(--teal); /* The band is filled in both modes, so its headings cannot come from --text-strong, which flips with the page. This is the on-fill equivalent. */ color: var(--on-dark); } .section.tight { padding-block: 64px; } .section-head { max-width: 780px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: var(--section-head-gap); } .kicker { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--lime); } .teal .kicker { color: var(--lime-on-teal); } .section-head h2 { line-height: var(--lh-h2); } .section-head p { font-size: var(--fs-body-lg); line-height: var(--lh-section-p); color: var(--text-2); max-width: 700px; margin-top: 4px; } .teal .section-head p { color: var(--teal-ink); } /* display:flex is stated here rather than inherited from .section-head. This element can also carry .split, which is the two-column prose-and-panel grid declared later in this file. That grid wins on source order, so the head silently became a 1fr 1fr grid: flex-direction and justify-content stopped applying, both children took a half-width track, and the arrow buttons ended up stranded in the middle of the row. Declaring it on this selector also outranks .split on specificity, so a later rule cannot take it back. The auto margin pins the control group to the right edge, whether or not the heading beside it fills its own track. */ .section-head.split { display: flex; max-width: none; text-align: left; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; } .section-head.split > .t-controls { margin-left: auto; } .section-head.split > div:first-child { display: flex; flex-direction: column; gap: 12px; max-width: 640px; } /* Left-aligned head with a button on the right, used on case-study rows. */ .section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: var(--section-head-gap); } .section-top .section-head { margin-bottom: 0; margin-inline: 0; max-width: 640px; text-align: left; align-items: flex-start; } @media (max-width: 760px) { .section { padding-block: var(--section-pad-sm); } .section-head { margin-bottom: var(--section-head-gap-sm); } .section-head.split, .section-top { flex-direction: column; align-items: flex-start; } } /* ============================================================================= 10. CARDS AND GRIDS ========================================================================== */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid); } .teal .card { border-color: transparent; } /* The big watermark numerals on service and engagement cards. The base value is a muted ink. A card keeps its own surface even inside a teal section, so the numeral follows the card rather than the band it sits in. */ .teal .svc-num, .teal .em .n { color: var(--text-3); opacity: 0.55; } a.card:hover, .card.hoverable:hover { transform: translateY(-4px); border-color: var(--card-hover-line); box-shadow: var(--shadow-card-hover); } .ico { width: var(--ico); height: var(--ico); border-radius: var(--radius-sm); background: var(--icon-bg); color: var(--cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ico svg { width: var(--ico-svg); height: var(--ico-svg); } .ico.lime { background: var(--chip-ico-lime-bg); color: var(--lime); } .ico.cyan { background: var(--chip-ico-cyan-bg); color: var(--cyan); } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap-4); } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } @media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } } /* ============================================================================= 11. SECTION COMPONENTS ========================================================================== */ /* --- Services grid --- */ .svc { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--svc-gap); } .svc h3 { font-size: var(--fs-h3-card); font-weight: 700; margin-top: 6px; } .svc p { font-size: var(--fs-card-p); color: var(--text-2); flex-grow: 1; } .svc .link, .svc .card-foot { margin-top: auto; } /* Numbered service cards, used on service pages. The numeral is a watermark, so it uses --text-3 rather than a border token; the teal variant sits below the .teal card overrides. */ .svc-num { position: absolute; top: 22px; right: 24px; font-family: var(--font-display); font-size: var(--fs-number); font-weight: 800; color: var(--text-3); line-height: var(--lh-number); } .svc-tag { align-self: flex-start; padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: var(--bg-2); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; color: var(--pill-text); } .card.relative { position: relative; } /* --- Why grid --- */ .why { padding: var(--card-pad-why); display: flex; flex-direction: column; gap: var(--svc-gap); } .why h3 { font-size: var(--fs-h3-why); line-height: var(--lh-h3); font-weight: 700; margin-top: 6px; } .why p { font-size: var(--fs-card-p); color: var(--text-2); } /* --- Industries --- */ .ind-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } .ind { flex: 1 1 var(--ind-min); max-width: calc((100% - 80px) / 5); min-width: var(--ind-min); padding: var(--card-pad-ind); display: flex; flex-direction: column; gap: 12px; } .ind .ico { width: var(--ico-sm); height: var(--ico-sm); } .ind .ico svg { width: var(--ico-svg-sm); height: var(--ico-svg-sm); } .ind h3 { font-size: var(--fs-ind-h3); font-weight: 700; margin-top: 4px; } .ind p { font-size: var(--fs-card-p-sm); color: var(--text-2); flex-grow: 1; } .ind-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; color: var(--lime); font-weight: 600; font-size: var(--fs-card-p-sm); } .ind-arrow { width: var(--ind-arrow); height: var(--ind-arrow); border-radius: var(--radius-xs); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; color: var(--text-nav); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .ind-arrow svg { width: 16px; height: 16px; } .ind:hover .ind-arrow { background: var(--lime); border-color: var(--lime); color: var(--bg-2); } @media (max-width: 1180px) { .ind { max-width: calc((100% - 40px) / 3); } } @media (max-width: 760px) { .ind { max-width: calc((100% - 20px) / 2); min-width: 0; flex-basis: 40%; } } @media (max-width: 480px) { .ind { max-width: 100%; flex-basis: 100%; } } /* --- Process steps --- */ .steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--grid-gap-sm); /* The steps carry their own 01-06 number, so the list markers would only duplicate it. */ list-style: none; margin: 0; padding: 0; } .step { padding: var(--card-pad-step); display: flex; flex-direction: column; gap: 10px; position: relative; } .step-num { font-family: var(--font-display); font-size: var(--fs-step); font-weight: 800; color: var(--step-num); line-height: var(--lh-number); } .step h3 { font-size: var(--fs-step-h3); font-weight: 700; } .step p { font-size: var(--fs-step-p); line-height: 1.6; color: var(--text-2); } @media (max-width: 1100px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 440px) { .steps { grid-template-columns: 1fr; } } /* --- Case studies --- */ .case { padding: var(--card-pad); display: flex; flex-direction: column; gap: 16px; } .case-img { border-radius: var(--radius-sm); background: linear-gradient(140deg, #12203A, #0A1120); border: 1px solid var(--line); min-height: var(--card-pad-case-img); display: flex; align-items: center; justify-content: center; color: var(--cyan); position: relative; overflow: hidden; } .case-img svg { width: 34px; height: 34px; opacity: 0.9; } .case-img .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000, transparent 72%); } .case-img.c1 { color: var(--cyan); } .case-img.c2 { color: var(--lime); } .case-img.c3 { color: var(--pill-text); } .tag, .case-tag { align-self: flex-start; padding: var(--tag-pad); border-radius: var(--radius-pill); background: var(--tag-bg); /* The tag sits on its own green tint rather than on the page, so it takes the strongest brand ink. --lime is tuned for body text on the page surface and only reaches 4.24:1 on this tint, which is under the 4.5:1 a 13px label needs. --brand-strong clears it at 6.41:1. */ color: var(--brand-strong); font-size: var(--fs-tag); font-weight: 600; } .case h3 { font-size: var(--fs-h3-case); line-height: var(--lh-h3); font-weight: 700; } .result { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-btn); line-height: 1.5; color: var(--text-nav); flex-grow: 1; } .result svg { width: var(--icon); height: var(--icon); color: var(--cyan); margin-top: 2px; flex-shrink: 0; } .case .card-foot { margin-top: auto; } /* --- Insights / blog --- */ .post { padding: var(--card-pad); display: flex; flex-direction: column; gap: var(--svc-gap); } .post .cat { font-size: var(--fs-cat); font-weight: 600; color: var(--lime); } .post h3 { font-size: var(--fs-h3-post); line-height: var(--lh-h3); font-weight: 700; } .post p { font-size: var(--fs-card-p); color: var(--text-2); flex-grow: 1; } .post .card-foot { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-label); color: var(--text-3); } /* --- Deliverables list (service pages) --- */ /* A band of one-line claims reads as a list rather than a grid of cards: the items are peers, not titled blocks, and a card per line would put an empty heading above every one of them. */ .deliv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; } .deliv { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); } .deliv .check, .check { width: 36px; height: 36px; border-radius: var(--radius-xs); background: var(--chip-ico-cyan-bg); color: var(--cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .deliv .check svg, .check svg { width: 18px; height: 18px; } .deliv h4 { margin: 0 0 4px; } .deliv p { font-size: 14.5px; color: var(--text-2); } /* --- Stats --- */ .stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px; } .stat b { display: block; font-family: var(--font-display); font-size: 30px; font-weight: 800; /* The stat tile carries the card surface in both modes, so the number takes the page ink. --on-dark was white on a white tile in a light theme. */ color: var(--text-strong); line-height: 1.1; } .stat b em { font-style: normal; color: var(--cyan); } .stat span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); } /* Two-column split: prose on one side, supporting panel on the other. */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .split .section-head { margin-bottom: 0; max-width: 560px; text-align: left; align-items: flex-start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } } /* --- Check list --- */ .check-list { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; } .check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text-on-surface-2); } .check-list svg { width: 20px; height: 20px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; } /* --- Outcomes band --- */ .out-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); } .out { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 26px 24px; } .out b { display: block; font-family: var(--font-display); font-size: 38px; font-weight: 800; line-height: 1; color: var(--lime); } .out b em { font-style: normal; color: var(--lime); } .out p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--text-2); } @media (max-width: 1024px) { .out-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .out-grid { grid-template-columns: 1fr; } } /* --- Tabs (service pages) --- */ .tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 32px; } .tab { padding: 10px 20px; border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: var(--card); color: var(--text-2); font-size: 14.5px; font-weight: 600; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .tab:hover { /* Hover only adds an underline-weight border, so the tab keeps the card surface behind it. --on-dark would be white text on a white card in a light theme, which is what the hover state was doing. */ color: var(--text-strong); border-color: var(--cyan); } .tab[aria-selected='true'], .tab.is-active { background: var(--cyan); border-color: var(--cyan); color: var(--bg); } .tab-panel { display: none; } .tab-panel.is-active { display: grid; } .tab-panel-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; } .tab-panel h3 { font-size: 22px; margin-bottom: 10px; } .tab-panel p { color: var(--text-2); font-size: var(--fs-body-lg); line-height: var(--lh-section-p); } .tab-sub { margin-top: 22px; font-size: 12.5px; font-weight: 700; letter-spacing: var(--tracking-foot); text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .chips span { padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: var(--card); font-size: 13.5px; color: var(--text-2); } .tab-list { display: flex; flex-direction: column; gap: 14px; } .tab-list li { display: flex; gap: 14px; align-items: center; font-size: 15.5px; color: var(--text-on-surface-2); } @media (max-width: 900px) { .tab-panel-inner { grid-template-columns: 1fr; gap: 32px; } } /* --- Pricing / engagement models --- */ .plan { position: relative; padding: 30px; display: flex; flex-direction: column; gap: 14px; } .plan.is-featured { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), var(--shadow-card-hover); } .plan-badge { position: absolute; top: -12px; left: 30px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--cyan); color: var(--bg); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .plan h3 { font-size: 20px; margin-top: 4px; } .plan .sub { font-size: 14.5px; color: var(--text-2); } .plan .price { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--on-dark); line-height: 1.2; } .plan ul { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; font-size: 15px; color: var(--text-2); } .plan ul li { display: flex; gap: 10px; align-items: flex-start; } .plan ul svg { width: 18px; height: 18px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; } .plan .btn { margin-top: auto; align-self: flex-start; } /* --- Fit check --- */ .fit { padding: 30px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 18px; } .fit.is-yes { border-color: rgba(74, 222, 42, 0.4); } .fit.is-no { border-color: rgba(251, 191, 36, 0.32); } .fit h3 { display: flex; align-items: center; gap: 12px; font-size: 19px; } .fit h3 i { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-style: normal; flex-shrink: 0; } .fit.is-yes h3 i { background: var(--chip-ico-lime-bg); color: var(--lime); } .fit.is-no h3 i { background: rgba(251, 191, 36, 0.14); color: var(--amber); } .fit ul { display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; color: var(--text-2); } .fit ul li { padding-left: 20px; position: relative; } .fit ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); } .fit.is-yes ul li::before { background: var(--lime); } .fit.is-no ul li::before { background: var(--amber); } /* --- Alternating feature rows --- */ .feat { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding-block: 44px; border-bottom: 1px solid var(--line); } .feat:last-child { border-bottom: 0; padding-bottom: 0; } .feat.rev .feat-visual { order: 2; } .feat-num { font-family: var(--font-display); font-size: var(--fs-number); font-weight: 800; color: var(--cyan); line-height: var(--lh-number); margin-bottom: 12px; } .feat h3 { font-size: 22px; margin-bottom: 12px; } .feat p { font-size: var(--fs-body-lg); line-height: var(--lh-section-p); color: var(--text-2); } .feat .link { margin-top: 20px; } .feat-visual { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; min-height: 260px; display: flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .feat { grid-template-columns: 1fr; gap: 28px; padding-block: 32px; } .feat.rev .feat-visual { order: 0; } } /* --- Related content grid --- */ .rel-title { font-size: 20px; margin-bottom: 24px; } .rel { padding: 26px; display: flex; flex-direction: column; gap: 12px; height: 100%; } .rel h4 { font-size: 17px; color: var(--on-dark); } .rel p { font-size: 14.5px; color: var(--text-2); flex-grow: 1; } .rel .link { margin-top: auto; } .rel-block + .rel-block { margin-top: 56px; } /* ============================================================================= 12. TESTIMONIALS CAROUSEL ============================================================================= */ .t-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .t-count { font-family: var(--font-display); font-weight: 700; /* The counter sits on the carousel band, which is a filled surface in both modes, so it takes the on-fill colour rather than the page's. */ color: var(--on-dark); font-variant-numeric: tabular-nums; margin-right: 6px; } /* Inside a teal band the counter has to clear the band fill, which is the same job the kicker does there. */ .teal .t-count { color: var(--lime-on-teal); } .t-count span { color: var(--text-count-alt); } .t-btn { width: var(--t-btn-size); height: var(--t-btn-size); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--carousel-dot); background: transparent; color: var(--on-dark); transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast); } .t-btn:hover { background: var(--t-btn-bg-hover); } /* The filled arrow paints its own surface, and that surface is --card, which is white in a light theme and a dark slate in a dark one. --on-dark is white in both modes, so on the filled arrow it was a white glyph on a white disc in a light theme and nothing else in the page looked like it. The ink is paired with the fill the same way --hero-chip-ink is paired with its own chip, and the solid variant states it because .t-btn above is transparent and sits on the teal band, where --on-dark is exactly right. */ .t-btn.solid { background: var(--card); border-color: var(--card); color: var(--text-strong); } .t-btn.solid:hover { background: var(--t-btn-solid-hover); color: var(--text-strong); } .t-btn:disabled { opacity: 0.4; cursor: default; } .t-btn svg { width: var(--icon); height: var(--icon); } .t-viewport { /* The bleed is deliberate: a card's hover lift would otherwise be clipped by overflow:hidden on a 3-row track. It stays on the outside edge, so a slide still lines up flush with the section at slide 1. */ overflow: hidden; margin: calc(-1 * var(--bleed)); padding: var(--bleed); touch-action: pan-y; } .t-track { display: flex; gap: var(--grid-gap); transition: transform var(--t-slide) var(--t-accel); will-change: transform; } .tcard { flex: 0 0 calc((100% - 48px) / 3); padding: var(--card-pad-tcard); display: flex; flex-direction: column; gap: var(--tcard-gap); position: relative; user-select: none; } .tcard .qmark { position: absolute; right: 26px; top: 22px; width: var(--tcard-qmark); height: var(--tcard-qmark); color: var(--text-quote-mark); } .stars { display: flex; gap: 3px; color: var(--star); } .stars svg { width: 18px; height: 18px; } .tcard blockquote { margin: 0; font-size: var(--fs-quote); line-height: var(--lh-quote); color: var(--text-on-surface-2); flex-grow: 1; } .tcard blockquote b { color: var(--on-dark); } .author { display: flex; align-items: center; gap: var(--author-gap); padding-top: var(--author-pad); border-top: 1px solid var(--line); } .avatar { width: var(--avatar); height: var(--avatar); border-radius: 50%; background: var(--avatar-bg); color: var(--on-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0; } .author strong { display: block; color: var(--on-dark); font-size: 16px; font-weight: 600; line-height: 1.3; } .author span { font-size: var(--fs-small); color: var(--text-3); } .t-dots { display: flex; justify-content: center; gap: 8px; margin-top: 36px; } .t-dot { height: 8px; width: 8px; border-radius: var(--radius-pill); border: 0; padding: 0; background: var(--carousel-dot); transition: width 0.3s, background 0.3s; } .t-dot[aria-current='true'] { width: 30px; background: var(--carousel-dot-active); } .t-foot { display: flex; justify-content: center; margin-top: 36px; } @media (max-width: 1024px) { .tcard { flex-basis: calc((100% - 24px) / 2); } } @media (max-width: 680px) { .tcard { flex-basis: 100%; } .t-controls .t-count { display: none; } } /* --- Static testimonial grid (service pages) --- */ .t-card { padding: var(--card-pad-tcard); display: flex; flex-direction: column; gap: 18px; } .t-card blockquote { flex-grow: 1; } /* ============================================================================= 13. FAQ ACCORDION ========================================================================== */ .faq-layout { display: grid; grid-template-columns: var(--faq-side) 1fr; gap: var(--faq-gap); align-items: start; } .faq-intro { display: flex; flex-direction: column; gap: 12px; position: sticky; top: var(--faq-sticky-top); } .faq-intro h2 { line-height: var(--lh-h2); } .faq-intro p { font-size: var(--fs-body-lg); line-height: var(--lh-section-p); /* The intro column follows the surface it stands on: the page on a plain section, the band fill inside a teal section. */ color: var(--text-2); } .section.teal .faq-intro p, .cta-band .faq-intro p { color: var(--teal-ink); } .faq-intro .btn { align-self: flex-start; margin-top: 14px; } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--card); border: 1px solid transparent; border-radius: var(--radius-md); transition: border-color var(--t-fast); } .faq-item.open, .faq-item[aria-expanded='true'] { border-color: var(--cyan); } .faq-q { width: 100%; min-height: var(--faq-q-min-h); padding: var(--faq-q-pad); border: 0; background: transparent; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; font-size: 16px; font-weight: 600; /* The question sits on whatever band the FAQ is in, so it takes the band colour. The item below it is a card with its own surface, which is stated separately so the two stay apart. */ color: var(--on-dark); } /* A question inside a filled FAQ item has that item's surface behind it. */ .faq-item .faq-q, .section.teal .faq-item .faq-q { color: var(--text-strong); } .faq-q svg { width: var(--icon); height: var(--icon); color: var(--text-3); transition: transform 0.25s, color 0.25s; flex-shrink: 0; } .faq-item.open .faq-q svg, .faq-item[aria-expanded='true'] .faq-q svg { transform: rotate(180deg); color: var(--cyan); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); } .faq-item.open .faq-a, .faq-item[aria-expanded='true'] .faq-a { grid-template-rows: 1fr; } .faq-a > div { overflow: hidden; } .faq-a p { padding: var(--faq-a-pad); font-size: var(--fs-card-p); line-height: var(--lh-section-p); color: var(--text-2); } /* The aside note under the FAQ intro. A service page carries a short prompt and its button here; the home page uses the intro's own CTA instead. */ .faq-note { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 6px; padding: var(--card-pad-ind); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); } .faq-note h3 { font-size: var(--fs-h3-why); line-height: var(--lh-h3); color: var(--text); } .faq-note p { font-size: var(--fs-card-p); line-height: var(--lh-section-p); color: var(--text-2); } .faq-note .btn { margin-top: 6px; } @media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; gap: var(--faq-gap-sm); } .faq-intro { position: static; } } /* ============================================================================= 14. CTA BLOCKS Four CTA shapes live here. Pick by context, keep the hierarchy identical across pages. Service-page CTA bands use .cta (heading left, action right) and .cta-panel (centred, two actions); .cta-strip and .cta-center are the flat full-bleed bands, kept for a band that should run to the page edge. .cta - inline panel inside a section (home, closing section) .cta-strip - full-width band between sections .cta-center - centred band with a heading and two actions .cta-panel - bordered panel with a heading and two actions ========================================================================== */ .cta { border-radius: var(--radius-cta); padding: var(--cta-pad); background: radial-gradient(560px 280px at 92% 0%, var(--cta-glow-cyan), transparent 70%), radial-gradient(420px 240px at 0% 100%, var(--cta-glow-lime), transparent 70%), var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 40px; } .cta h2 { line-height: var(--lh-h2); } .cta p { margin-top: 12px; font-size: var(--fs-body-lg); line-height: 1.65; color: var(--text-2); max-width: 600px; } .cta-actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; } .cta-band { background: var(--grad); color: var(--on-dark); padding-block: 44px; } .cta-band .cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .cta-band h3 { font-size: 22px; } .cta-band p { margin-top: 6px; font-size: 15.5px; color: rgba(255, 255, 255, 0.88); max-width: 620px; } .cta-band .btn-ghost { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); } .cta-strip { background: var(--teal); padding-block: 40px; } .cta-strip .cta-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .cta-strip h3 { font-size: 21px; } .cta-strip p { margin-top: 6px; font-size: 15.5px; color: var(--teal-ink); max-width: 620px; } .cta-strip .btn { flex-shrink: 0; } .cta-center { background: var(--teal); padding-block: 56px; text-align: center; } .cta-center h3 { font-size: clamp(24px, 2.6vw, 32px); } .cta-center p { margin: 12px auto 0; max-width: 640px; font-size: var(--fs-body-lg); line-height: var(--lh-section-p); color: var(--teal-ink); } .cta-center .cta-actions { flex-direction: row; justify-content: center; margin-top: 26px; } .cta-panel { border-radius: var(--radius-cta); border: 1px solid var(--line); background: var(--card); padding: 48px 44px; display: flex; flex-direction: column; gap: 22px; text-align: center; align-items: center; } .cta-panel h3 { font-size: clamp(24px, 2.6vw, 32px); } .cta-panel p { max-width: 620px; font-size: var(--fs-body-lg); line-height: var(--lh-section-p); color: var(--text-2); } .cta-panel .cta-actions { flex-direction: row; margin-top: 4px; } @media (max-width: 860px) { .cta { flex-direction: column; align-items: flex-start; padding: var(--cta-pad-sm); } .cta-actions { flex-direction: row; flex-wrap: wrap; width: 100%; } .cta-actions .btn { flex: 1 1 200px; } .deliv-list { grid-template-columns: minmax(0, 1fr); } } /* ============================================================================= 15. CONTACT FORM ========================================================================== */ .contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-cta); padding: var(--card-pad-form); } .contact-panel h2 { line-height: var(--lh-h2); } .contact-panel > div > p { margin-top: 14px; font-size: var(--fs-body-lg); line-height: var(--lh-section-p); color: var(--text-2); max-width: 520px; } .commit { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; } .commit > div { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text-on-surface-2); } .commit svg { width: 20px; height: 20px; color: var(--cyan); flex-shrink: 0; margin-top: 2px; } .form { display: flex; flex-direction: column; gap: 16px; } .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .form input, .form select, .form textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--radius-xs); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .form input::placeholder, .form textarea::placeholder { color: var(--text-3); } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 195, 238, 0.18); } .form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 19px) 21px, calc(100% - 14px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 38px; } .form select option { background: var(--bg-2); color: var(--text); } .form textarea { min-height: 132px; resize: vertical; line-height: 1.6; } .form button[type='submit'] { align-self: flex-start; } .form small { display: block; font-size: 13px; color: var(--text-3); } @media (max-width: 900px) { .contact-panel { grid-template-columns: 1fr; gap: 32px; padding: 28px 24px; } .form .row { grid-template-columns: 1fr; } } /* ============================================================================= 16. FOOTER Identical on every page. The markup matches the WordPress footer.php. ========================================================================== */ .footer { border-top: 1px solid var(--line); padding-block: var(--foot-pad-top) var(--foot-pad-bottom); /* The footer keeps a dark surface in both modes. It is the one band whose copy is set in --on-dark throughout, so it needs a fill that justifies that; without one it inherits --bg and white text lands on white. */ background: var(--foot-bg); } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.5fr; gap: 48px; } .foot-brand img { height: var(--foot-logo-h); width: auto; } .foot-brand p { margin-top: 18px; font-size: var(--fs-card-p); line-height: 1.7; color: var(--foot-text-2); max-width: var(--foot-brand-p); } .social { margin-top: 20px; width: var(--social); height: var(--social); border-radius: var(--radius-xs); border: 1px solid var(--line-2); display: inline-flex; align-items: center; justify-content: center; color: var(--footer-icon); transition: border-color var(--t-fast), color var(--t-fast); } .social:hover { border-color: var(--cyan); color: var(--cyan); } .foot-col h4 { margin: 0 0 var(--foot-col-gap); font-size: var(--fs-foot-h4); font-weight: 700; /* The reference sets these headings in caps. */ text-transform: uppercase; letter-spacing: var(--tracking-foot); color: var(--on-dark); } .foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--foot-list-gap); font-size: var(--fs-btn); } .foot-col ul a { color: var(--foot-text-2); transition: color var(--t-fast); } .foot-col ul a:hover { color: var(--lime); } .foot-contact-email { color: var(--foot-text); font-size: var(--fs-btn); } .office { margin-top: var(--foot-col-gap); font-size: var(--fs-small); line-height: 1.6; } .office strong { display: block; color: var(--on-dark); font-size: var(--fs-btn); } .office .addr { color: var(--foot-text-3); } .office .tel { color: var(--foot-text); } .foot-bottom { margin-top: var(--foot-bottom-gap); padding-top: var(--foot-bottom-pad); border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: var(--fs-label); color: var(--foot-text-3); } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } } /* ============================================================================= 17. UTILITIES ========================================================================== */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .clamp-2, .clamp-3, .clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .clamp-2 { -webkit-line-clamp: 2; } .clamp-3 { -webkit-line-clamp: 3; } .clamp-4 { -webkit-line-clamp: 4; } .stack-sm { display: flex; flex-direction: column; gap: 8px; } .stack-md { display: flex; flex-direction: column; gap: 16px; } .stack-lg { display: flex; flex-direction: column; gap: 28px; } .mt-auto { margin-top: auto; } .text-lime { color: var(--lime); } .text-cyan { color: var(--cyan); } .text-muted { color: var(--text-2); } /* ============================================================================= 18. MOTION AND PRINT ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } html { scroll-behavior: auto; } } @media print { .nav, .footer, .t-controls, .t-dots { display: none; } body { background: #fff; color: #000; } }