/* ========================================================================== ICL Education & Training — Design tokens & global styles ========================================================================== */ :root { /* Colour tokens (navy/blue gradient system, sampled from ICL brand mark) */ --color-navy-950: #050e1f; --color-navy-900: #0a1a35; --color-navy-800: #0f2547; --color-navy-700: #16335e; --color-blue-600: #1c5aa6; --color-blue-500: #2e7fd6; --color-blue-400: #4fa0e8; --color-blue-300: #7dbdf2; --color-white: #ffffff; --color-ink-900: #0b1220; --color-ink-700: #33415a; --color-slate-100: #eef2f8; --color-slate-200: #dbe3ee; --color-surface: #f6f8fb; --color-border: #e2e8f2; --color-primary: var(--color-blue-500); --color-primary-hover: var(--color-blue-400); --color-error: #b3261e; --color-on-primary: #ffffff; --gradient-navy: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 55%, var(--color-blue-600) 130%); --gradient-blue: linear-gradient(135deg, var(--color-blue-600) 0%, var(--color-blue-400) 100%); /* Typography */ --font-heading: 'Lexend', 'Source Sans 3', system-ui, sans-serif; --font-body: 'Source Sans 3', system-ui, sans-serif; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; /* Spacing scale (8pt rhythm) */ --space-1: 0.5rem; --space-2: 0.75rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; --space-6: 3rem; --space-7: 4rem; --space-8: 6rem; --space-9: 8rem; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-full: 999px; --shadow-sm: 0 2px 8px rgba(5, 14, 31, 0.06); --shadow-md: 0 8px 24px rgba(5, 14, 31, 0.12); --shadow-lg: 0 20px 48px rgba(5, 14, 31, 0.22); --container-w: 1200px; --transition: 200ms ease; /* BRIDGES framework — exact brand colours, sourced from ICL's own toolkit assets */ --bridges-b: #9f891d; --bridges-r: #d6732f; --bridges-i: #7db928; --bridges-d: #0a4799; --bridges-g: #6e2b9c; --bridges-e: #aa2b2e; --bridges-s: #173524; --cycle-design: #5b8def; --cycle-deliver: #2bb8b0; --cycle-review: #b07fe0; --cycle-improve: #9ad126; /* Embed environment — optional per-organisation brand colour. Stays ICL blue for every org unless js/embed-org.js finds a saved brand colour and sets --embed-brand + [data-embed-branded] on at runtime, so the dashboard looks identical for everyone else. It tints the header and sub-nav (via a dark-blended derived token so white text still passes) and adds accents around the dashboard — but never the BRIDGES element colours, the radar or the status pills. See the html[data-embed-branded] block lower down for the derived tokens. */ --embed-brand: var(--color-blue-500); /* Traffic-light status colours for review scores — deliberately distinct from the BRIDGES letter/cycle palette above so "this needs attention" never gets lost among decorative brand colour. */ --status-good: #2f9e44; --status-warning: #e8a33d; --status-alert: #dc3d3d; --status-none: #b7c0cf; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } /* Without this, any element that also sets its own `display` (e.g. .btn's inline-flex) silently ignores the `hidden` attribute, since author rules always win over the UA stylesheet's default [hidden] { display: none } regardless of specificity. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6; color: var(--color-ink-900); background: var(--color-white); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-3); letter-spacing: -0.01em; } p { margin: 0 0 var(--space-3); } button { font-family: inherit; cursor: pointer; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---- Layout helpers ---- */ .container { width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: var(--space-4); } .section { padding-block: var(--space-8); } .section-light { background: var(--color-white); } .section-surface { background: var(--color-surface); } .section-navy { background: var(--gradient-navy); color: var(--color-white); } .eyebrow { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-blue-500); margin-bottom: var(--space-2); } .section-navy .eyebrow { color: var(--color-blue-300); } .section-head { max-width: 640px; margin-bottom: var(--space-6); } .section-head.center { margin-inline: auto; text-align: center; } .text-muted { color: var(--color-ink-700); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .hidden-field { display: none; } .skip-link { position: absolute; top: -60px; left: var(--space-3); background: var(--color-blue-500); color: #fff; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); z-index: 1000; transition: top var(--transition); } .skip-link:focus { top: var(--space-3); } /* ---- Scroll reveal ---- Visible by default (no-JS / reduced-motion safe). Only animates once main.js confirms IntersectionObserver support and no motion preference against it, at which point it stamps html.js-reveal. */ .reveal { opacity: 1; transform: none; } html.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1); } html.js-reveal .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } .panels .panel:nth-child(2) { transition-delay: 120ms; } .audience-grid .audience-card:nth-child(2) { transition-delay: 80ms; } .audience-grid .audience-card:nth-child(3) { transition-delay: 160ms; } .audience-grid .audience-card:nth-child(4) { transition-delay: 240ms; } .partners-grid .partner-logo:nth-child(2) { transition-delay: 80ms; } .partners-grid .partner-logo:nth-child(3) { transition-delay: 160ms; } .partners-grid .partner-logo:nth-child(4) { transition-delay: 240ms; } .about-grid .quote-card { transition-delay: 120ms; } .feature-grid .reveal:nth-child(2) { transition-delay: 80ms; } .feature-grid .reveal:nth-child(3) { transition-delay: 160ms; } .feature-grid .reveal:nth-child(4) { transition-delay: 240ms; } .cycle-grid .reveal:nth-child(2) { transition-delay: 80ms; } .cycle-grid .reveal:nth-child(3) { transition-delay: 160ms; } .resource-grid .reveal:nth-child(2) { transition-delay: 80ms; } .resource-grid .reveal:nth-child(3) { transition-delay: 160ms; } .check-grid .reveal:nth-child(2) { transition-delay: 60ms; } .check-grid .reveal:nth-child(3) { transition-delay: 120ms; } .check-grid .reveal:nth-child(4) { transition-delay: 180ms; } .check-grid .reveal:nth-child(5) { transition-delay: 240ms; } .check-grid .reveal:nth-child(6) { transition-delay: 300ms; } .contact-grid .reveal:nth-child(2) { transition-delay: 120ms; } .two-col .reveal:nth-child(2) { transition-delay: 120ms; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.875rem 1.75rem; border-radius: var(--radius-full); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; border: 1.5px solid transparent; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; white-space: nowrap; vertical-align: middle; } .btn:focus-visible { outline: 3px solid var(--color-blue-300); outline-offset: 2px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn.is-selected { background: var(--color-blue-500); border-color: var(--color-blue-500); color: #fff; } @media (max-width: 480px) { .btn { white-space: normal; text-align: center; } } .btn svg { width: 18px; height: 18px; flex-shrink: 0; display: block; transition: transform 180ms ease; } .btn:hover svg { transform: translateX(3px); } .btn-primary { background: var(--color-blue-500); color: #fff; } .btn-primary:hover { background: var(--color-blue-400); } .btn-primary:active { background: var(--color-blue-600); } .btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: var(--color-white); } .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); } .btn-outline-dark { background: transparent; border-color: var(--color-navy-700); color: var(--color-navy-900); } .btn-outline-dark:hover { background: var(--color-navy-900); color: #fff; } .btn-accent-green { background: var(--cycle-improve); border-color: var(--cycle-improve); color: var(--color-navy-950); } .btn-accent-green:hover { background: #86bc1f; border-color: #86bc1f; } .btn-block { width: 100%; justify-content: center; } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(10, 26, 53, 0.92); border-bottom: 1px solid rgba(255,255,255,0.08); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: 0.625rem; } .brand { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .brand img { height: 63px; width: auto; flex-shrink: 0; } /* A swapped-in organisation logo (set by js/embed-org.js on Embed pages): unknown aspect ratio, so cap both dimensions and letterbox rather than stretch. Capped at the ICL logo's own height so the header can't grow. */ /* max-width tracks the viewport on small screens so a wide wordmark logo can't crowd the menu toggle off the edge; stays 240px on desktop. */ .brand img.is-org-logo { height: auto; width: auto; max-height: 63px; max-width: min(240px, 42vw); object-fit: contain; } .nav-primary { display: flex; align-items: center; gap: var(--space-5); } .nav-primary a { font-size: var(--fs-sm); font-weight: 500; color: rgba(255,255,255,0.85); padding-block: var(--space-1); border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition); } .nav-primary a:hover, .nav-primary a[aria-current="page"] { color: #fff; border-color: var(--color-blue-400); } .header-actions { display: flex; align-items: center; gap: var(--space-3); } .nav-toggle { display: none; background: transparent; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); color: #fff; } .nav-toggle svg { width: 24px; height: 24px; } @media (max-width: 900px) { .nav-primary { position: fixed; inset: 72px 0 0 0; background: var(--color-navy-900); flex-direction: column; align-items: stretch; padding: var(--space-4); /* Clear the fixed Log in/Dashboard + Get in touch stack pinned to the bottom, so the last menu items can scroll out from behind it. js/main.js measures the real stack and overrides --nav-cta-inset; this calc is the no-JS fallback (roomy enough for two buttons). */ padding-bottom: var(--nav-cta-inset, calc(7rem + var(--space-2) + var(--space-4) * 2)); gap: 0; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); overflow-y: auto; } .nav-primary a { padding: var(--space-3) var(--space-1); border-bottom: 1px solid rgba(255,255,255,0.08); font-size: var(--fs-md); } body.nav-open .nav-primary { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Below the desktop nav breakpoint the header keeps only the logo and the menu toggle. The CTA and the auth button (Log in / Dashboard) would otherwise crowd and squash the logo, so they drop out of the inline header and reappear as a stacked group pinned to the bottom of the open mobile menu. */ .header-actions .btn { display: none; } body.nav-open .header-actions .btn-primary, body.nav-open .header-actions #header-login-link:not([hidden]), body.nav-open .header-actions #header-dashboard-link:not([hidden]) { display: inline-flex; position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); justify-content: center; z-index: 101; } /* Only one of Log in / Dashboard is ever shown; it stacks directly above "Get in touch". */ body.nav-open .header-actions #header-login-link:not([hidden]), body.nav-open .header-actions #header-dashboard-link:not([hidden]) { bottom: calc(var(--space-4) + 3rem + var(--space-2)); } .nav-toggle { display: inline-flex; } } /* BRIDGES nav dropdown — CSS-only (hover/focus-within), no JS needed. Desktop: absolutely-positioned panel revealed on hover or keyboard focus. Mobile (see media query below): unwrapped via display:contents so the trigger and its links just flow as extra items in the existing full- screen nav-primary list, always visible, no toggle of their own. */ .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: inline-flex !important; align-items: center; gap: 4px; } .nav-dropdown-caret { width: 14px; height: 14px; transition: transform var(--transition); } .nav-dropdown:hover .nav-dropdown-caret, .nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: var(--space-2); min-width: 210px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-primary .nav-dropdown-menu a { color: var(--color-ink-900) !important; padding: var(--space-2) var(--space-3) !important; border-radius: var(--radius-sm); border-bottom: none !important; font-size: var(--fs-sm); } .nav-primary .nav-dropdown-menu a:hover { background: var(--color-slate-100); color: var(--color-blue-600) !important; } /* "BRIDGES overview" link that js/main.js injects for the mobile accordion — the desktop trigger is already a working link to the hub, so hide it there. */ .nav-dropdown-menu [data-nav-hub] { display: none; } @media (max-width: 900px) { .nav-dropdown { display: contents; } /* Trigger becomes an accordion header: label left, caret right, and the submenu stays collapsed until js/main.js toggles .is-open on tap. */ .nav-dropdown-trigger { justify-content: space-between; } .nav-dropdown-caret { display: block; width: 18px; height: 18px; flex-shrink: 0; } .nav-dropdown.is-open .nav-dropdown-caret { transform: rotate(180deg); } .nav-dropdown-menu { display: none; position: static; margin-top: 0; min-width: 0; background: transparent; border: none; box-shadow: none; padding: 0; opacity: 1; visibility: visible; transform: none; gap: 0; } .nav-dropdown.is-open .nav-dropdown-menu { display: flex; } .nav-primary .nav-dropdown-menu a { padding: var(--space-2) var(--space-1) var(--space-2) var(--space-5) !important; font-size: var(--fs-sm); color: rgba(255,255,255,0.65) !important; } .nav-primary .nav-dropdown-menu [data-nav-hub] { display: block; } } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; overflow: hidden; padding-block: var(--space-8); } @media (max-width: 640px) { .hero { padding-block: var(--space-6); } .hero .hero-grid { gap: var(--space-4); } .hero .hero-rule { margin: var(--space-3) 0 var(--space-4); } .hero .hero-copy p.lede { max-width: none; } } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); pointer-events: none; } .hero::before { width: 640px; height: 640px; right: -220px; top: -160px; } .hero::after { width: 420px; height: 420px; left: -160px; bottom: -180px; border-color: rgba(79,160,232,0.15); } /* Photo hero: background photo (Clint delivering, BRIDGES on screen) + gradient scrim so the copy on the left stays legible while the presenter and screen stay visible under the floating cards. */ .hero-photo { position: absolute; inset: 0; z-index: 0; background-size: 110% auto; background-position: min(58% + 70px, 0%) min(10% + 15px, 0%); background-repeat: no-repeat; } .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(10, 22, 45, 0.24), rgba(10, 22, 45, 0.24)), radial-gradient(50% 48% at 76% 18%, rgba(28, 90, 166, 0.42) 0%, rgba(28, 90, 166, 0.2) 55%, rgba(28, 90, 166, 0) 90%), radial-gradient(48% 42% at 86% 88%, rgba(28, 90, 166, 0.5) 0%, rgba(28, 90, 166, 0.26) 55%, rgba(28, 90, 166, 0) 90%), linear-gradient(180deg, rgba(6, 15, 32, 0) 0%, rgba(6, 15, 32, 0) 62%, rgba(6, 15, 32, 0.35) 82%, rgba(6, 15, 32, 0.55) 100%), linear-gradient(100deg, var(--color-navy-950) 0%, var(--color-navy-950) 22%, rgba(6, 15, 32, 0.78) 38%, rgba(6, 15, 32, 0.4) 58%, rgba(6, 15, 32, 0.14) 78%, rgba(6, 15, 32, 0.05) 100%); } @media (max-width: 1080px) { .hero-photo { background-size: 190% auto; background-position: 34% 10%; } .hero-photo::after { background: linear-gradient(rgba(10, 22, 45, 0.24), rgba(10, 22, 45, 0.24)), radial-gradient(55% 45% at 78% 22%, rgba(28, 90, 166, 0.55) 0%, rgba(28, 90, 166, 0.3) 55%, rgba(28, 90, 166, 0) 85%), linear-gradient(100deg, var(--color-navy-950) 0%, var(--color-navy-950) 12%, rgba(6,15,32,0.82) 28%, rgba(6,15,32,0.4) 48%, rgba(6,15,32,0.1) 68%, rgba(6,15,32,0) 85%), linear-gradient(180deg, rgba(6,15,32,0) 0%, rgba(6,15,32,0) 50%, rgba(6,15,32,0.65) 68%, var(--color-navy-950) 85%, var(--color-navy-950) 100%); } } @media (max-width: 640px) { .hero-photo { background-size: 300% auto; background-position: 32% 12%; } .hero-photo::after { background: linear-gradient(rgba(10, 22, 45, 0.24), rgba(10, 22, 45, 0.24)), radial-gradient(60% 55% at 78% 32%, rgba(28, 90, 166, 0.6) 0%, rgba(28, 90, 166, 0.35) 55%, rgba(28, 90, 166, 0) 85%), linear-gradient(100deg, var(--color-navy-950) 0%, var(--color-navy-950) 12%, rgba(6,15,32,0.82) 28%, rgba(6,15,32,0.4) 48%, rgba(6,15,32,0.1) 68%, rgba(6,15,32,0) 85%), linear-gradient(180deg, rgba(6,15,32,0) 0%, rgba(6,15,32,0) 50%, rgba(6,15,32,0.65) 68%, var(--color-navy-950) 85%, var(--color-navy-950) 100%); } } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); align-items: center; position: relative; z-index: 1; } .hero .hero-grid { gap: var(--space-6); } .hero .offer-cards { max-width: 500px; margin-inline: auto; width: 100%; } .hero-copy h1 { font-size: var(--fs-3xl); color: #fff; } .hero-copy h1 .accent { color: var(--color-blue-300); } /* Homepage hero carries three statement lines, so it needs a smaller, balanced scale than the single-line page-hero headings elsewhere. */ .hero .hero-copy h1 { font-size: clamp(1.4rem, 1rem + 1.3vw, 1.9rem); line-height: 1.2; text-wrap: balance; } .hero-rule { width: 64px; height: 4px; border-radius: var(--radius-full); background: var(--gradient-blue); margin: var(--space-4) 0 var(--space-5); } .hero-copy h1 .sm-break { display: none; } @media (max-width: 560px) { .hero-copy h1 .sm-break { display: block; } } .hero-copy p.lede { font-size: var(--fs-md); color: rgba(255,255,255,0.82); max-width: 46ch; } .hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); } /* ---- Homepage hero entrance ---- Plays once on load (hero is always above the fold, so no scroll trigger needed). Heading leads, then the divider/paragraph/CTAs cascade in. */ @keyframes heroEnter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroAccentGlow { 0% { text-shadow: 0 0 0 rgba(79,160,232,0); } 45% { text-shadow: 0 0 22px rgba(79,160,232,0.5); } 100% { text-shadow: 0 0 0 rgba(79,160,232,0); } } .hero .hero-copy h1 { animation: heroEnter 900ms cubic-bezier(0.16, 1, 0.3, 1) both; } .hero .hero-copy h1 .accent { animation: heroAccentGlow 1500ms ease-out both; animation-delay: 250ms; } .hero .hero-rule { animation: heroEnter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 280ms; } .hero .hero-copy p.lede { animation: heroEnter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 380ms; } .hero .hero-ctas { animation: heroEnter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 480ms; } .hero .offer-card { animation: heroEnter 900ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 1600ms; } .hero .offer-card-delivery { animation-delay: 1850ms; } @media (prefers-reduced-motion: reduce) { .hero .hero-copy h1, .hero .hero-copy h1 .accent, .hero .hero-rule, .hero .hero-copy p.lede, .hero .hero-ctas, .hero .offer-card { animation: none !important; opacity: 1 !important; transform: none !important; text-shadow: none !important; } } .hero-visual { position: relative; } .hero-photo-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: linear-gradient(160deg, var(--color-navy-800), var(--color-navy-950)); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); } .placeholder-tag { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; color: rgba(255,255,255,0.55); padding: var(--space-4); } .placeholder-tag svg { width: 44px; height: 44px; opacity: 0.7; } /* Homepage hero: two coordinated cards, one per ICL offer */ .offer-cards { display: flex; flex-direction: column; gap: var(--space-4); } .offer-card { --card-glow: rgba(79,160,232,0.14); --border-glow: rgba(255,255,255,0.32); position: relative; overflow: hidden; border: 1.5px solid transparent; background: radial-gradient(140% 120% at 100% 100%, var(--card-glow) 0%, transparent 55%) padding-box, linear-gradient(160deg, var(--color-navy-800), var(--color-navy-950)) padding-box, linear-gradient(135deg, var(--border-glow), rgba(255,255,255,0.03) 45%, rgba(255,255,255,0.12) 100%) border-box; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.07); padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); min-height: 148px; transition: transform 260ms ease, box-shadow 260ms ease; } .offer-card:hover { --border-glow: rgba(255,255,255,0.55); transform: translateY(-4px); box-shadow: 0 30px 64px rgba(2,6,15,0.5), inset 0 1px 0 rgba(255,255,255,0.09); } .offer-card-bridges { --card-glow: rgba(209,178,74,0.16); --decor-dot: rgba(214,183,84,0.65); } .offer-card-delivery { --card-glow: rgba(79,160,232,0.18); --decor-dot: rgba(125,189,242,0.65); } .offer-card-decor { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(var(--decor-dot) 1.2px, transparent 1.2px); background-size: 15px 15px; background-position: right bottom; -webkit-mask-image: radial-gradient(ellipse 75% 75% at 100% 100%, black 0%, black 30%, transparent 72%); mask-image: radial-gradient(ellipse 75% 75% at 100% 100%, black 0%, black 30%, transparent 72%); } .offer-card-top { display: flex; align-items: center; gap: var(--space-3); position: relative; z-index: 1; } .offer-card-arrow { margin-left: auto; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; color: rgba(255,255,255,0.55); opacity: 0; transform: translateX(-6px); transition: opacity 220ms ease, transform 220ms ease, color 220ms ease; } .offer-card-arrow svg { width: 18px; height: 18px; } .offer-card:hover .offer-card-arrow, .offer-card:focus-visible .offer-card-arrow { opacity: 1; transform: translateX(0); } .offer-card-bridges:hover .offer-card-arrow, .offer-card-bridges:focus-visible .offer-card-arrow { color: #d1b24a; } .offer-card-delivery:hover .offer-card-arrow, .offer-card-delivery:focus-visible .offer-card-arrow { color: var(--color-blue-300); } @media (prefers-reduced-motion: reduce) { .offer-card-arrow { transition: none; } } .offer-card-icon { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid; } .offer-card-icon::before { content: ""; position: absolute; inset: -10px; border-radius: inherit; background: currentColor; opacity: 0.16; filter: blur(11px); z-index: -1; } .offer-card-icon svg { width: 22px; height: 22px; position: relative; z-index: 1; } .offer-card-bridges .offer-card-icon { border-color: rgba(209,178,74,0.6); color: #d1b24a; background: linear-gradient(150deg, rgba(209,178,74,0.2), rgba(209,178,74,0.03)); } .offer-card-delivery .offer-card-icon { border-color: rgba(125,189,242,0.6); color: var(--color-blue-300); background: linear-gradient(150deg, rgba(125,189,242,0.2), rgba(125,189,242,0.03)); } .offer-card-name { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); letter-spacing: 0.015em; color: #fff; margin: 0; } .offer-card-tagline { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); letter-spacing: 0.01em; margin: 0; position: relative; z-index: 1; } .offer-card .bridges-bar { max-width: 200px; position: relative; z-index: 1; box-shadow: 0 0 14px rgba(0,0,0,0.25); } .offer-card-bar { height: 6px; width: 100%; max-width: 200px; border-radius: var(--radius-full); background: var(--gradient-blue); box-shadow: 0 0 16px rgba(79,160,232,0.45); position: relative; z-index: 1; } .placeholder-tag span.label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: rgba(255,255,255,0.75); } .placeholder-tag span.hint { font-size: var(--fs-xs); max-width: 22ch; } /* ========================================================================== BRIDGES tile system — exact brand colours, matches ICL's own toolkit assets ========================================================================== */ .tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 22%; color: #fff; font-family: var(--font-heading); font-weight: 700; box-shadow: var(--shadow-sm); } .tile-sm { width: 34px; height: 34px; font-size: 1rem; border-radius: 9px; } .tile-md { width: 52px; height: 52px; font-size: 1.4rem; border-radius: 12px; } .tile-lg { width: 58px; height: 58px; font-size: 1.7rem; border-radius: 14px; box-shadow: var(--shadow-md); } .tile-b { background: var(--bridges-b); } .tile-r { background: var(--bridges-r); } .tile-i { background: var(--bridges-i); } .tile-d { background: var(--bridges-d); } .tile-g { background: var(--bridges-g); } .tile-e { background: var(--bridges-e); } .tile-s { background: var(--bridges-s); } .tile-strip { display: flex; gap: 8px; flex-wrap: wrap; } /* #framework — the seven moves named next to their brand tiles. Makes the BRIDGES acronym legible and ownable without turning it into a card grid. */ .framework-moves { list-style: none; margin: 0 auto var(--space-6); padding: 0; max-width: 720px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); } .framework-moves li { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-sm); color: var(--color-white); } .framework-moves .tile-sm { width: 30px; height: 30px; font-size: 0.95rem; } @media (max-width: 640px) { .framework-moves { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; gap: var(--space-2); } } .bridges-bar { display: flex; height: 6px; width: 100%; max-width: 380px; border-radius: var(--radius-full); overflow: hidden; } .bridges-bar span { flex: 1; } .bridges-bar span:nth-child(1) { background: var(--bridges-b); } .bridges-bar span:nth-child(2) { background: var(--bridges-r); } .bridges-bar span:nth-child(3) { background: var(--bridges-i); } .bridges-bar span:nth-child(4) { background: var(--bridges-d); } .bridges-bar span:nth-child(5) { background: var(--bridges-g); } .bridges-bar span:nth-child(6) { background: var(--bridges-e); } .bridges-bar span:nth-child(7) { background: var(--bridges-s); } /* Hero lockup: wordmark + colour bar + tile row, replaces generic photography */ .bridges-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); height: 100%; padding: var(--space-7) var(--space-4); border-radius: var(--radius-lg); background: radial-gradient(120% 100% at 100% 100%, rgba(125,189,242,0.14) 0%, transparent 55%), linear-gradient(160deg, var(--color-navy-800), var(--color-navy-950)); border: 1px solid rgba(255,255,255,0.12); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.07); position: relative; overflow: hidden; transition: transform 260ms ease, box-shadow 260ms ease; } .bridges-lockup:hover, .bridges-lockup:focus-visible { transform: translateY(-4px); box-shadow: 0 30px 64px rgba(2,6,15,0.5), inset 0 1px 0 rgba(255,255,255,0.09); } .lockup-hint { position: absolute; top: var(--space-4); right: var(--space-4); display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); padding: 6px 12px; border-radius: var(--radius-full); opacity: 0; transform: translateY(-4px); transition: opacity 220ms ease, transform 220ms ease; z-index: 2; } .lockup-hint svg { width: 14px; height: 14px; } .bridges-lockup:hover .lockup-hint, .bridges-lockup:focus-visible .lockup-hint { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .lockup-hint { transition: none; } } .bridges-lockup::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); right: -120px; bottom: -140px; pointer-events: none; } .bridges-lockup .wordmark { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: 0.05em; color: #fff; margin: 0; } .bridges-lockup .lockup-caption { color: rgba(255,255,255,0.68); font-size: var(--fs-sm); margin: 0; } .bridges-lockup .tile-strip { margin-top: auto; gap: 6px; } .bridges-lockup .tile-strip .tile-lg { width: 50px; height: 50px; font-size: 1.4rem; border-radius: 12px; } @media (max-width: 1080px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { max-width: 460px; margin-inline: auto; width: 100%; } .hero .hero-ctas { display: none; } } @media (max-width: 640px) { .bridges-lockup { padding-inline: var(--space-3); } .bridges-lockup .tile-strip, #framework .tile-strip { gap: 4px; flex-wrap: nowrap; width: 100%; } .bridges-lockup .tile-strip .tile-lg, #framework .tile-strip .tile-lg { flex: 1 1 0; flex-shrink: 1; width: auto; height: auto; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; font-size: clamp(0.65rem, 4.5vw, 1.05rem); border-radius: 20%; } } @media (max-width: 560px) { .hero-copy h1 { font-size: var(--fs-2xl); } .tile-lg { width: 54px; height: 54px; font-size: 1.6rem; } .offer-card { padding: var(--space-4); min-height: 176px; } .offer-card-icon { width: 36px; height: 36px; } .offer-card-icon svg { width: 19px; height: 19px; } .offer-card-name { font-size: var(--fs-md); } } /* ========================================================================== Service panels ========================================================================== */ .panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .panel { border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.07); transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease; } .panel:hover { transform: translateY(-4px); box-shadow: 0 30px 64px rgba(2,6,15,0.4), inset 0 1px 0 rgba(255,255,255,0.09); } .panel-bridges { background: var(--gradient-navy); color: #fff; border: 1px solid rgba(255,255,255,0.1); } .panel-bridges:hover { border-color: rgba(255,255,255,0.2); } .panel-leadership { background: var(--color-navy-800); color: #fff; border: 1px solid rgba(255,255,255,0.08); } .panel-leadership:hover { border-color: rgba(255,255,255,0.18); } .panel-icon { position: relative; width: 56px; height: 56px; border-radius: var(--radius-md); background: rgba(255,255,255,0.1); display: grid; place-items: center; margin-bottom: var(--space-1); } .panel-icon::before { content: ""; position: absolute; inset: -10px; border-radius: inherit; background: var(--color-blue-400); opacity: 0.14; filter: blur(12px); z-index: -1; } .panel-icon svg { width: 28px; height: 28px; color: var(--color-blue-300); position: relative; } .panel h3 { font-size: var(--fs-xl); margin-bottom: 0; } .panel .panel-kicker { font-size: var(--fs-sm); color: rgba(255,255,255,0.7); margin-bottom: var(--space-2); } .panel p { color: rgba(255,255,255,0.82); } .panel-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 var(--space-4); } .panel-list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-sm); color: rgba(255,255,255,0.9); } .panel-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-blue-300); margin-top: 1px; } .panel-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; } .panel-link svg { width: 16px; height: 16px; transition: transform var(--transition); } .panel-link:hover svg { transform: translateX(4px); } @media (max-width: 860px) { .panels { grid-template-columns: 1fr; } } /* ========================================================================== Who we work with ========================================================================== */ .audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } .audience-card { text-align: center; padding: var(--space-4); } .audience-icon { width: 64px; height: 64px; margin-inline: auto var(--space-3); margin-bottom: var(--space-3); border-radius: 50%; background: var(--color-slate-100); display: grid; place-items: center; } .audience-icon svg { width: 30px; height: 30px; color: var(--color-blue-500); } .audience-card h3 { font-size: var(--fs-md); margin-bottom: var(--space-1); } .audience-card p { font-size: var(--fs-sm); color: var(--color-ink-700); margin-bottom: 0; } @media (max-width: 860px) { .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .audience-grid { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Partners strip ========================================================================== */ .partners { background: var(--color-navy-950); padding-block: var(--space-6); } .partners-label { text-align: center; color: rgba(255,255,255,0.65); font-size: var(--fs-sm); margin-bottom: var(--space-5); } .partners-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6); } .partner-logo { display: flex; align-items: center; justify-content: center; height: 76px; width: 160px; padding: var(--space-3); background: #fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .partner-logo img { max-width: 100%; max-height: 100%; object-fit: contain; } .partners-note { text-align: center; margin-top: var(--space-4); font-size: var(--fs-xs); color: rgba(255,255,255,0.45); } /* ========================================================================== About teaser ========================================================================== */ .about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-6); align-items: start; } .about-right { display: flex; flex-direction: column; gap: var(--space-5); } .about-photo-frame { aspect-ratio: 3/4; border-radius: var(--radius-lg); background: var(--color-slate-100); border: 1px solid var(--color-border); overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); } .about-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .about-photo-frame .placeholder-tag { color: var(--color-ink-700); } .about-photo-frame .placeholder-tag span.label { color: var(--color-ink-900); } .about-photo-frame svg { color: var(--color-blue-500); } .quote-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.6); } .quote-card .quote-mark { color: var(--color-blue-300); font-size: 2.5rem; line-height: 1; font-family: var(--font-heading); } .quote-card blockquote { margin: 0 0 var(--space-3); font-size: var(--fs-md); color: var(--color-ink-900); } .quote-card cite { font-style: normal; font-size: var(--fs-sm); font-weight: 700; display: block; } .quote-card .quote-role { font-size: var(--fs-xs); color: var(--color-ink-700); } .testimonial-carousel { display: grid; } .testimonial-slide { grid-area: 1 / 1; opacity: 0; pointer-events: none; transition: opacity 500ms ease; } .testimonial-slide.is-active { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .testimonial-slide { transition: none; } } .testimonial-dots { display: flex; gap: var(--space-2); margin-top: var(--space-4); } .testimonial-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: var(--color-border); cursor: pointer; transition: background 220ms ease, transform 220ms ease; } .testimonial-dot:hover { background: var(--color-blue-300); } .testimonial-dot.is-active { background: var(--color-blue-500); transform: scale(1.3); } .testimonial-dot:focus-visible { outline: 2px solid var(--color-blue-400); outline-offset: 2px; } .about-content .eyebrow { color: var(--color-blue-600); } .two-col { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-6); align-items: start; } @media (max-width: 900px) { .about-grid, .two-col { grid-template-columns: 1fr; } } /* ========================================================================== Page hero (sub-pages) ========================================================================== */ .page-hero { position: relative; overflow: hidden; padding-block: var(--space-8) var(--space-7); } @media (max-width: 640px) { .page-hero { padding-block: var(--space-6) var(--space-5); } } .delivery-hero { padding-bottom: var(--space-3); } .delivery-hero .hero-grid { align-items: start; } .page-hero::before { content: ""; position: absolute; width: 520px; height: 520px; right: -180px; top: -220px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.08); pointer-events: none; } .page-hero .container { position: relative; z-index: 1; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: rgba(255,255,255,0.55); margin-bottom: var(--space-4); } .breadcrumb a { color: rgba(255,255,255,0.75); } .breadcrumb a:hover { color: #fff; } .page-hero h1 { color: #fff; font-size: var(--fs-2xl); max-width: 20ch; } .page-hero .lede { color: rgba(255,255,255,0.82); font-size: var(--fs-md); max-width: 60ch; } .page-hero .hero-ctas { margin-top: var(--space-4); } /* Confirmation badge — flags a hero as a post-action / success state, distinct from the ordinary .eyebrow label */ .confirm-badge { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--cycle-improve); background: rgba(154, 209, 38, 0.14); border: 1px solid rgba(154, 209, 38, 0.35); border-radius: var(--radius-full); padding: 8px 16px; margin: 0 0 var(--space-3); } .confirm-badge svg { width: 18px; height: 18px; flex-shrink: 0; } .confirm-badge.is-develop { color: var(--color-blue-600); background: rgba(46, 127, 214, 0.12); border-color: rgba(46, 127, 214, 0.35); } /* ---- BRIDGES page hero entrance ---- Mirrors the homepage hero cascade, then staggers the wordmark, colour bar and individual letter tiles in the lockup card. */ .bridges-hero .breadcrumb, .bridges-hero .eyebrow, .bridges-hero h1, .bridges-hero .lede, .bridges-hero .hero-ctas, .bridges-hero .bridges-lockup { animation: heroEnter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; } .bridges-hero .breadcrumb { animation-delay: 0ms; } .bridges-hero .eyebrow { animation-delay: 80ms; } .bridges-hero h1 { animation-delay: 160ms; } .bridges-hero .lede { animation-delay: 280ms; } .bridges-hero .hero-ctas { animation-delay: 380ms; } .bridges-hero .bridges-lockup { animation-delay: 480ms; } .bridges-hero .bridges-lockup .wordmark { animation: heroEnter 600ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 620ms; } @keyframes bridgesBarWipe { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } .bridges-hero .bridges-lockup .bridges-bar { transform-origin: left; animation: bridgesBarWipe 600ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 700ms; } .bridges-hero .bridges-lockup .lockup-caption { animation: heroEnter 600ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: 780ms; } @keyframes tilePopIn { from { opacity: 0; transform: translateY(14px) scale(0.85); } to { opacity: 1; transform: translateY(0) scale(1); } } .bridges-hero .bridges-lockup .tile-strip .tile { animation: tilePopIn 700ms cubic-bezier(0.16, 1, 0.3, 1) both; } .bridges-hero .bridges-lockup .tile-strip .tile:nth-child(1) { animation-delay: 900ms; } .bridges-hero .bridges-lockup .tile-strip .tile:nth-child(2) { animation-delay: 1080ms; } .bridges-hero .bridges-lockup .tile-strip .tile:nth-child(3) { animation-delay: 1260ms; } .bridges-hero .bridges-lockup .tile-strip .tile:nth-child(4) { animation-delay: 1440ms; } .bridges-hero .bridges-lockup .tile-strip .tile:nth-child(5) { animation-delay: 1620ms; } .bridges-hero .bridges-lockup .tile-strip .tile:nth-child(6) { animation-delay: 1800ms; } .bridges-hero .bridges-lockup .tile-strip .tile:nth-child(7) { animation-delay: 1980ms; } @media (prefers-reduced-motion: reduce) { .bridges-hero .breadcrumb, .bridges-hero .eyebrow, .bridges-hero h1, .bridges-hero .lede, .bridges-hero .hero-ctas, .bridges-hero .bridges-lockup, .bridges-hero .bridges-lockup .wordmark, .bridges-hero .bridges-lockup .bridges-bar, .bridges-hero .bridges-lockup .lockup-caption, .bridges-hero .bridges-lockup .tile-strip .tile { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ========================================================================== Delivery & Coaching hero — three large overlapping glass panels ========================================================================== */ .delivery-panels { position: relative; width: 100%; min-height: 435px; } .glass-panel { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 80%; height: 158px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid rgba(125, 189, 242, 0.38); background: radial-gradient(140% 120% at 100% 0%, rgba(79, 160, 232, 0.16) 0%, transparent 60%) padding-box, linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)) padding-box, linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.05) 60%) border-box; box-shadow: 0 28px 56px rgba(2, 6, 15, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease; animation: heroEnter 700ms cubic-bezier(0.16, 1, 0.3, 1) both; } .glass-panel:hover { transform: translateY(-6px); border-color: rgba(125, 189, 242, 0.8); box-shadow: 0 34px 64px rgba(2, 6, 15, 0.48), 0 0 40px rgba(79, 160, 232, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .glass-panel-delivery { top: -21px; left: 0; z-index: 1; animation-delay: 200ms; } .glass-panel-facilitation { top: 125px; left: 6.5%; z-index: 3; box-shadow: 0 34px 64px rgba(2, 6, 15, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); animation-delay: 380ms; } .glass-panel-facilitation:hover { box-shadow: 0 38px 70px rgba(2, 6, 15, 0.54), 0 0 46px rgba(79, 160, 232, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .glass-panel-coaching { top: 271px; left: 13%; z-index: 2; animation-delay: 560ms; } .glass-panel-top { display: flex; align-items: center; gap: var(--space-3); } .glass-panel-icon { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(125, 189, 242, 0.6); color: var(--color-blue-300); background: linear-gradient(150deg, rgba(125, 189, 242, 0.22), rgba(125, 189, 242, 0.04)); transition: border-color 260ms ease; } .glass-panel-icon::before { content: ""; position: absolute; inset: -9px; border-radius: inherit; background: currentColor; opacity: 0.14; filter: blur(10px); z-index: -1; transition: opacity 260ms ease; } .glass-panel:hover .glass-panel-icon { border-color: rgba(125, 189, 242, 0.95); } .glass-panel:hover .glass-panel-icon::before { opacity: 0.32; } .glass-panel-icon svg { width: 22px; height: 22px; } .glass-panel-label { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); letter-spacing: 0.03em; text-transform: uppercase; color: #fff; margin: 0; } .glass-panel-rule { width: 44px; height: 4px; border-radius: var(--radius-full); background: var(--gradient-blue); } .glass-panel-copy { font-size: var(--fs-md); line-height: 1.5; color: rgba(255, 255, 255, 0.72); margin: 0; } @media (max-width: 1080px) { .delivery-panels { max-width: 460px; margin-inline: auto; } } @media (max-width: 640px) { .delivery-panels { min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 420px; } .glass-panel, .glass-panel-facilitation, .glass-panel-coaching { position: relative; top: auto; left: auto; width: 100%; height: auto; padding: var(--space-3) var(--space-4); } .glass-panel-icon { width: 40px; height: 40px; } .glass-panel-icon svg { width: 18px; height: 18px; } .glass-panel-label { font-size: var(--fs-md); } .glass-panel-rule { width: 36px; height: 3px; } .glass-panel-copy { font-size: var(--fs-sm); } } @media (prefers-reduced-motion: reduce) { .glass-panel { transition: none; animation: none !important; opacity: 1 !important; transform: none !important; } } /* ========================================================================== Feature list (icon + text rows on light backgrounds) ========================================================================== */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .feature-card { background: var(--color-white); border: 1px solid var(--color-border); border-top: 3px solid var(--accent, var(--color-blue-500)); border-radius: var(--radius-md); padding: var(--space-4); display: flex; gap: var(--space-3); box-shadow: var(--shadow-sm); transition: transform 240ms ease, box-shadow 240ms ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .feature-card .feature-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--accent, var(--color-blue-500)); box-shadow: 0 6px 16px -4px var(--accent, var(--color-blue-500)); display: grid; place-items: center; } .feature-card .feature-icon svg { width: 22px; height: 22px; color: #fff; } .feature-card h3 { font-size: var(--fs-md); margin-bottom: 4px; } .feature-card p { font-size: var(--fs-sm); color: var(--color-ink-700); margin-bottom: 0; } .feature-card.accent-design { --accent: var(--cycle-design); } .feature-card.accent-improve { --accent: var(--cycle-improve); } .feature-card.accent-review { --accent: var(--cycle-review); } .feature-card.accent-gold { --accent: var(--bridges-b); } @media (max-width: 720px) { .feature-grid { grid-template-columns: 1fr; } } /* ========================================================================== Framework list — the seven BRIDGES moves, exact colours + genuine copy ========================================================================== */ .non-linear-note { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-full); padding: 8px 16px; margin-bottom: var(--space-5); } .non-linear-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-blue-300); } .framework-list { display: flex; flex-direction: column; gap: var(--space-3); } .framework-row { display: flex; gap: var(--space-4); align-items: flex-start; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-md); padding: var(--space-4); } .framework-row h3 { font-size: var(--fs-md); color: #fff; margin-bottom: 4px; } .framework-row p { font-size: var(--fs-sm); color: rgba(255,255,255,0.75); margin-bottom: 0; } @media (max-width: 560px) { .framework-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); } } /* ========================================================================== Design / Review / Improve cycle ========================================================================== */ .cycle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .cycle-card { position: relative; background: var(--color-navy-800); border-radius: var(--radius-md); padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 10px); overflow: hidden; } .cycle-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; } .cycle-card.cycle-design::before { background: var(--cycle-design); } .cycle-card.cycle-deliver::before { background: var(--cycle-deliver); } .cycle-card.cycle-review::before { background: var(--cycle-review); } .cycle-card h3 { font-size: var(--fs-md); color: #fff; margin-bottom: var(--space-2); } .cycle-card h3 .with { font-weight: 600; font-size: var(--fs-sm); } .cycle-card.cycle-design h3 .with { color: var(--cycle-design); } .cycle-card.cycle-deliver h3 .with { color: var(--cycle-deliver); } .cycle-card.cycle-review h3 .with { color: var(--cycle-review); } .cycle-card p { font-size: var(--fs-sm); color: rgba(255,255,255,0.75); margin-bottom: 0; } @media (max-width: 860px) { .cycle-grid { grid-template-columns: 1fr; } } /* Outcome callout — the result of the Design/Deliver/Review cycle, not a fourth step */ .cycle-outcome { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); text-align: center; } .cycle-outcome svg { width: 22px; height: 22px; color: var(--cycle-improve); flex-shrink: 0; } .outcome-badge { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; color: var(--color-ink-900); background: var(--color-slate-100); border-radius: var(--radius-full); padding: 10px 20px; margin: 0; } .outcome-badge .outcome-label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cycle-improve); } @media (max-width: 480px) { .cycle-outcome { flex-direction: column; gap: var(--space-2); } } /* ========================================================================== Check grid — short "ways we work" style lists ========================================================================== */ .check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); } .check-item { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--fs-md); font-weight: 500; } .check-item svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-blue-500); margin-top: 2px; } @media (max-width: 640px) { .check-grid { grid-template-columns: 1fr; } } /* ========================================================================== Video frame — rounded, shadowed wrapper for embedded