@layer reset, fonts, elements, theme, colour, layout, modifiers, text, containers, button, swiper, components, gallery; @import url("https://use.typekit.net/mup1cec.css") layer(fonts); /* 1. Declare the layer order once */ /* 2. Import each stylesheet into the right layer */ @layer reset{ @layer reset { *, *::before, *::after { box-sizing: border-box; } html, body, div, span, applet, button, input, select, textarea, object, iframe, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { background: transparent; border: 0; font: inherit; font-size: 100%; margin: 0; min-width: 0; outline: 0; padding: 0; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } body { line-height: 1; } ol, ul, menu { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } img, svg { display: block; } table { border-collapse: collapse; border-spacing: 0; } } } @layer fonts{ @layer fonts { @font-face { font-family: "TT Norms Pro"; src: url("../fonts/TT_Norms_Pro_Normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "TT Norms Pro"; src: url("../fonts/TT_Norms_Pro_Medium.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; } } } @layer elements{ html { background: var(--color-surface-page, var(--color-canvas)); min-height: -webkit-fill-available; scroll-padding-top: calc(var(--font-size) * 3.875); } html:has(dialog[open]) { overflow: hidden; } body { background: var(--color-surface-page, var(--color-canvas)); color: var(--color-text-page, var(--color-ink)); display: flex; flex-direction: column; gap: 0; font-family: var(--font-family-ttnorms); font-size: var(--font-size); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-style: normal; font-weight: 400; letter-spacing: var(--letter-spacing); line-height: var(--line-height); min-height: 100vh; position: relative; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; } ::selection { background: var(--color-steel-500); } a { color: var(--color-steel-500); /* font-weight: 700; text-decoration: underline; */ text-decoration-thickness: from-font; transition: color var(--transition); } b, strong { font-weight: 700; } i, em { font-style: italic; } img, source, video { height: auto; max-width: 100%; width: 100%; } @media (hover: hover) { a { transition: color var(--transition); } a:hover, a:focus-visible { color: var(--color-blue-hover); } } /* Keyboard / AT: visible ring (WCAG 2.4.7). Mouse focus: no outline (see :focus-visible). */ :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 3px solid var(--color-focus, var(--color-teal-400, #00b3a6)); outline-offset: 3px; } @supports (-webkit-touch-callout: none) { body { min-height: -webkit-fill-available; } } } @layer theme{ @layer theme { :root { color-scheme: light; /* COLOUR DEFINITIONS */ /* Copper */ --lch-copper-50: 96% 0.02 38.9; --color-copper-50: oklch(var(--lch-copper-50)); --lch-copper-100: 92% 0.04 38.9; --color-copper-100: oklch(var(--lch-copper-100)); --lch-copper-200: 84% 0.08 38.9; --color-copper-200: oklch(var(--lch-copper-200)); --lch-copper-300: 76% 0.12 38.9; --color-copper-300: oklch(var(--lch-copper-300)); --lch-copper-400: 70% 0.15 38.9; --color-copper-400: oklch(var(--lch-copper-400)); --lch-copper-500: 64% 0.18 38.9; /* base */ --color-copper-500: oklch(var(--lch-copper-500)); --lch-copper-600: 56% 0.16 38.9; --color-copper-600: oklch(var(--lch-copper-600)); --lch-copper-700: 46% 0.14 38.9; --color-copper-700: oklch(var(--lch-copper-700)); --lch-copper-800: 36% 0.11 38.9; --color-copper-800: oklch(var(--lch-copper-800)); --lch-copper-900: 26% 0.08 38.9; --color-copper-900: oklch(var(--lch-copper-900)); --lch-copper-950: 16% 0.04 38.9; --color-copper-950: oklch(var(--lch-copper-950)); /* Rose */ --lch-rose-50: 96% 0.02 24; --color-rose-50: oklch(var(--lch-rose-50)); --lch-rose-100: 92% 0.05 24; --color-rose-100: oklch(var(--lch-rose-100)); --lch-rose-200: 84% 0.1 24; --color-rose-200: oklch(var(--lch-rose-200)); --lch-rose-300: 76% 0.15 24; --color-rose-300: oklch(var(--lch-rose-300)); --lch-rose-400: 68% 0.18 24; --color-rose-400: oklch(var(--lch-rose-400)); --lch-rose-500: 61% 0.22 24; /* base */ --color-rose-500: oklch(var(--lch-rose-500)); --lch-rose-600: 53% 0.2 24; --color-rose-600: oklch(var(--lch-rose-600)); --lch-rose-700: 43% 0.16 24; --color-rose-700: oklch(var(--lch-rose-700)); --lch-rose-800: 33% 0.12 24; --color-rose-800: oklch(var(--lch-rose-800)); --lch-rose-900: 23% 0.08 24; --color-rose-900: oklch(var(--lch-rose-900)); --lch-rose-950: 15% 0.04 24; --color-rose-950: oklch(var(--lch-rose-950)); /* Magenta */ --lch-magenta-50: 96% 0.02 355.87; --color-magenta-50: oklch(var(--lch-magenta-50)); --lch-magenta-100: 92% 0.05 355.87; --color-magenta-100: oklch(var(--lch-magenta-100)); --lch-magenta-200: 84% 0.1 355.87; --color-magenta-200: oklch(var(--lch-magenta-200)); --lch-magenta-300: 76% 0.15 355.87; --color-magenta-300: oklch(var(--lch-magenta-300)); --lch-magenta-400: 69% 0.19 355.87; --color-magenta-400: oklch(var(--lch-magenta-400)); --lch-magenta-500: 62% 0.23 355.87; /* base */ --color-magenta-500: oklch(var(--lch-magenta-500)); --lch-magenta-600: 54% 0.21 355.87; --color-magenta-600: oklch(var(--lch-magenta-600)); --lch-magenta-700: 44% 0.17 355.87; --color-magenta-700: oklch(var(--lch-magenta-700)); --lch-magenta-800: 34% 0.13 355.87; --color-magenta-800: oklch(var(--lch-magenta-800)); --lch-magenta-900: 24% 0.09 355.87; --color-magenta-900: oklch(var(--lch-magenta-900)); --lch-magenta-950: 15% 0.05 355.87; --color-magenta-950: oklch(var(--lch-magenta-950)); /* Violet */ --lch-violet-50: 95% 0.02 321.58; --color-violet-50: oklch(var(--lch-violet-50)); --lch-violet-100: 90% 0.04 321.58; --color-violet-100: oklch(var(--lch-violet-100)); --lch-violet-200: 80% 0.08 321.58; --color-violet-200: oklch(var(--lch-violet-200)); --lch-violet-300: 70% 0.11 321.58; --color-violet-300: oklch(var(--lch-violet-300)); --lch-violet-400: 59% 0.13 321.58; --color-violet-400: oklch(var(--lch-violet-400)); --lch-violet-500: 48% 0.16 321.58; /* base */ --color-violet-500: oklch(var(--lch-violet-500)); --lch-violet-600: 42% 0.14 321.58; --color-violet-600: oklch(var(--lch-violet-600)); --lch-violet-700: 34% 0.12 321.58; --color-violet-700: oklch(var(--lch-violet-700)); --lch-violet-800: 26% 0.09 321.58; --color-violet-800: oklch(var(--lch-violet-800)); --lch-violet-900: 18% 0.06 321.58; --color-violet-900: oklch(var(--lch-violet-900)); --lch-violet-950: 12% 0.03 321.58; --color-violet-950: oklch(var(--lch-violet-950)); /* Indigo */ --lch-indigo-50: 94% 0.02 306.21; --color-indigo-50: oklch(var(--lch-indigo-50)); --lch-indigo-100: 88% 0.03 306.21; --color-indigo-100: oklch(var(--lch-indigo-100)); --lch-indigo-200: 76% 0.07 306.21; --color-indigo-200: oklch(var(--lch-indigo-200)); --lch-indigo-300: 64% 0.1 306.21; --color-indigo-300: oklch(var(--lch-indigo-300)); --lch-indigo-400: 52% 0.12 306.21; --color-indigo-400: oklch(var(--lch-indigo-400)); --lch-indigo-500: 40% 0.14 306.21; /* base */ --color-indigo-500: oklch(var(--lch-indigo-500)); --lch-indigo-600: 35% 0.12 306.21; --color-indigo-600: oklch(var(--lch-indigo-600)); --lch-indigo-700: 28% 0.1 306.21; --color-indigo-700: oklch(var(--lch-indigo-700)); --lch-indigo-800: 21% 0.07 306.21; --color-indigo-800: oklch(var(--lch-indigo-800)); --lch-indigo-900: 15% 0.05 306.21; --color-indigo-900: oklch(var(--lch-indigo-900)); --lch-indigo-950: 10% 0.03 306.21; --color-indigo-950: oklch(var(--lch-indigo-950)); /* Navy */ --lch-navy-50: 94% 0.01 270.62; --color-navy-50: oklch(var(--lch-navy-50)); --lch-navy-100: 88% 0.03 270.62; --color-navy-100: oklch(var(--lch-navy-100)); --lch-navy-200: 76% 0.06 270.62; --color-navy-200: oklch(var(--lch-navy-200)); --lch-navy-300: 64% 0.08 270.62; --color-navy-300: oklch(var(--lch-navy-300)); --lch-navy-400: 52% 0.1 270.62; --color-navy-400: oklch(var(--lch-navy-400)); --lch-navy-500: 40% 0.12 270.62; /* base */ --color-navy-500: oklch(var(--lch-navy-500)); --lch-navy-600: 35% 0.1 270.62; --color-navy-600: oklch(var(--lch-navy-600)); --lch-navy-700: 28% 0.08 270.62; --color-navy-700: oklch(var(--lch-navy-700)); --lch-navy-800: 21% 0.06 270.62; --color-navy-800: oklch(var(--lch-navy-800)); --lch-navy-900: 15% 0.04 270.62; --color-navy-900: oklch(var(--lch-navy-900)); --lch-navy-950: 10% 0.02 270.62; --color-navy-950: oklch(var(--lch-navy-950)); /* Steel */ --lch-steel-50: 95% 0.01 250; --color-steel-50: oklch(var(--lch-steel-50)); --lch-steel-100: 90% 0.02 250; --color-steel-100: oklch(var(--lch-steel-100)); --lch-steel-200: 80% 0.05 250; --color-steel-200: oklch(var(--lch-steel-200)); --lch-steel-300: 70% 0.07 250; --color-steel-300: oklch(var(--lch-steel-300)); --lch-steel-400: 60% 0.08 250; --color-steel-400: oklch(var(--lch-steel-400)); --lch-steel-500: 50% 0.1 250; /* base */ --color-steel-500: oklch(var(--lch-steel-500)); --lch-steel-600: 44% 0.09 250; --color-steel-600: oklch(var(--lch-steel-600)); --lch-steel-700: 36% 0.07 250; --color-steel-700: oklch(var(--lch-steel-700)); --lch-steel-800: 28% 0.05 250; --color-steel-800: oklch(var(--lch-steel-800)); --lch-steel-900: 20% 0.04 250; --color-steel-900: oklch(var(--lch-steel-900)); --lch-steel-950: 13% 0.02 250; --color-steel-950: oklch(var(--lch-steel-950)); /* Baby */ --lch-baby-50: 97% 0.01 237.51; --color-baby-50: oklch(var(--lch-baby-50)); --lch-baby-100: 94% 0.03 237.51; --color-baby-100: oklch(var(--lch-baby-100)); --lch-baby-200: 88% 0.05 237.51; --color-baby-200: oklch(var(--lch-baby-200)); --lch-baby-300: 82% 0.08 237.51; --color-baby-300: oklch(var(--lch-baby-300)); --lch-baby-400: 77% 0.09 237.51; --color-baby-400: oklch(var(--lch-baby-400)); --lch-baby-500: 73% 0.11 237.51; /* base */ --color-baby-500: oklch(var(--lch-baby-500)); --lch-baby-600: 64% 0.1 237.51; --color-baby-600: oklch(var(--lch-baby-600)); --lch-baby-700: 52% 0.08 237.51; --color-baby-700: oklch(var(--lch-baby-700)); --lch-baby-800: 40% 0.06 237.51; --color-baby-800: oklch(var(--lch-baby-800)); --lch-baby-900: 28% 0.04 237.51; --color-baby-900: oklch(var(--lch-baby-900)); --lch-baby-950: 18% 0.02 237.51; --color-baby-950: oklch(var(--lch-baby-950)); /* Powder */ --lch-powder-50: 98% 0.01 196.36; --color-powder-50: oklch(var(--lch-powder-50)); --lch-powder-100: 95% 0.02 196.36; --color-powder-100: oklch(var(--lch-powder-100)); --lch-powder-200: 90% 0.04 196.36; --color-powder-200: oklch(var(--lch-powder-200)); --lch-powder-300: 85% 0.06 196.36; --color-powder-300: oklch(var(--lch-powder-300)); --lch-powder-400: 81% 0.07 196.36; --color-powder-400: oklch(var(--lch-powder-400)); --lch-powder-500: 78% 0.09 196.36; /* base */ --color-powder-500: oklch(var(--lch-powder-500)); --lch-powder-600: 68% 0.08 196.36; --color-powder-600: oklch(var(--lch-powder-600)); --lch-powder-700: 56% 0.06 196.36; --color-powder-700: oklch(var(--lch-powder-700)); --lch-powder-800: 44% 0.05 196.36; --color-powder-800: oklch(var(--lch-powder-800)); --lch-powder-900: 32% 0.03 196.36; --color-powder-900: oklch(var(--lch-powder-900)); --lch-powder-950: 22% 0.02 196.36; --color-powder-950: oklch(var(--lch-powder-950)); /* Teal */ --lch-teal-50: 96% 0.01 184.4; --color-teal-50: oklch(var(--lch-teal-50)); --lch-teal-100: 92% 0.03 184.4; --color-teal-100: oklch(var(--lch-teal-100)); --lch-teal-200: 84% 0.05 184.4; --color-teal-200: oklch(var(--lch-teal-200)); --lch-teal-300: 76% 0.08 184.4; --color-teal-300: oklch(var(--lch-teal-300)); --lch-teal-400: 70% 0.09 184.4; --color-teal-400: oklch(var(--lch-teal-400)); --lch-teal-500: 65% 0.11 184.4; /* base */ --color-teal-500: oklch(var(--lch-teal-500)); --lch-teal-600: 57% 0.1 184.4; --color-teal-600: oklch(var(--lch-teal-600)); --lch-teal-700: 47% 0.08 184.4; --color-teal-700: oklch(var(--lch-teal-700)); --lch-teal-800: 37% 0.06 184.4; --color-teal-800: oklch(var(--lch-teal-800)); --lch-teal-900: 27% 0.04 184.4; --color-teal-900: oklch(var(--lch-teal-900)); --lch-teal-950: 17% 0.02 184.4; --color-teal-950: oklch(var(--lch-teal-950)); /* Emerald */ --lch-emerald-50: 96% 0.02 142.52; --color-emerald-50: oklch(var(--lch-emerald-50)); --lch-emerald-100: 92% 0.04 142.52; --color-emerald-100: oklch(var(--lch-emerald-100)); --lch-emerald-200: 84% 0.07 142.52; --color-emerald-200: oklch(var(--lch-emerald-200)); --lch-emerald-300: 76% 0.1 142.52; --color-emerald-300: oklch(var(--lch-emerald-300)); --lch-emerald-400: 69% 0.12 142.52; --color-emerald-400: oklch(var(--lch-emerald-400)); --lch-emerald-500: 62% 0.15 142.52; /* base */ --color-emerald-500: oklch(var(--lch-emerald-500)); --lch-emerald-600: 54% 0.13 142.52; --color-emerald-600: oklch(var(--lch-emerald-600)); --lch-emerald-700: 44% 0.11 142.52; --color-emerald-700: oklch(var(--lch-emerald-700)); --lch-emerald-800: 34% 0.08 142.52; --color-emerald-800: oklch(var(--lch-emerald-800)); --lch-emerald-900: 24% 0.06 142.52; --color-emerald-900: oklch(var(--lch-emerald-900)); --lch-emerald-950: 15% 0.03 142.52; --color-emerald-950: oklch(var(--lch-emerald-950)); /* Green */ --lch-green-50: 97% 0.02 133.91; --color-green-50: oklch(var(--lch-green-50)); --lch-green-100: 94% 0.04 133.91; --color-green-100: oklch(var(--lch-green-100)); --lch-green-200: 88% 0.08 133.91; --color-green-200: oklch(var(--lch-green-200)); --lch-green-300: 82% 0.12 133.91; --color-green-300: oklch(var(--lch-green-300)); --lch-green-400: 77% 0.14 133.91; --color-green-400: oklch(var(--lch-green-400)); --lch-green-500: 72% 0.17 133.91; /* base */ --color-green-500: oklch(var(--lch-green-500)); --lch-green-600: 63% 0.15 133.91; --color-green-600: oklch(var(--lch-green-600)); --lch-green-700: 51% 0.12 133.91; --color-green-700: oklch(var(--lch-green-700)); --lch-green-800: 39% 0.09 133.91; --color-green-800: oklch(var(--lch-green-800)); --lch-green-900: 27% 0.06 133.91; --color-green-900: oklch(var(--lch-green-900)); --lch-green-950: 17% 0.03 133.91; --color-green-950: oklch(var(--lch-green-950)); /* Lime */ --lch-lime-50: 98% 0.02 116.18; --color-lime-50: oklch(var(--lch-lime-50)); --lch-lime-100: 95% 0.04 116.18; --color-lime-100: oklch(var(--lch-lime-100)); --lch-lime-200: 91% 0.08 116.18; --color-lime-200: oklch(var(--lch-lime-200)); --lch-lime-300: 87% 0.12 116.18; --color-lime-300: oklch(var(--lch-lime-300)); --lch-lime-400: 84% 0.14 116.18; --color-lime-400: oklch(var(--lch-lime-400)); --lch-lime-500: 81% 0.17 116.18; /* base */ --color-lime-500: oklch(var(--lch-lime-500)); --lch-lime-600: 71% 0.15 116.18; --color-lime-600: oklch(var(--lch-lime-600)); --lch-lime-700: 58% 0.12 116.18; --color-lime-700: oklch(var(--lch-lime-700)); --lch-lime-800: 45% 0.09 116.18; --color-lime-800: oklch(var(--lch-lime-800)); --lch-lime-900: 32% 0.06 116.18; --color-lime-900: oklch(var(--lch-lime-900)); --lch-lime-950: 22% 0.03 116.18; --color-lime-950: oklch(var(--lch-lime-950)); /* Yellow */ --lch-yellow-50: 98% 0.02 92.15; --color-yellow-50: oklch(var(--lch-yellow-50)); --lch-yellow-100: 96% 0.04 92.15; --color-yellow-100: oklch(var(--lch-yellow-100)); --lch-yellow-200: 93% 0.08 92.15; --color-yellow-200: oklch(var(--lch-yellow-200)); --lch-yellow-300: 90% 0.12 92.15; --color-yellow-300: oklch(var(--lch-yellow-300)); --lch-yellow-400: 88% 0.15 92.15; --color-yellow-400: oklch(var(--lch-yellow-400)); --lch-yellow-500: 87% 0.18 92.15; /* base */ --color-yellow-500: oklch(var(--lch-yellow-500)); --lch-yellow-600: 76% 0.16 92.15; --color-yellow-600: oklch(var(--lch-yellow-600)); --lch-yellow-700: 62% 0.13 92.15; --color-yellow-700: oklch(var(--lch-yellow-700)); --lch-yellow-800: 48% 0.1 92.15; --color-yellow-800: oklch(var(--lch-yellow-800)); --lch-yellow-900: 34% 0.07 92.15; --color-yellow-900: oklch(var(--lch-yellow-900)); --lch-yellow-950: 24% 0.04 92.15; --color-yellow-950: oklch(var(--lch-yellow-950)); /* Amber */ --lch-amber-50: 98% 0.02 79.55; --color-amber-50: oklch(var(--lch-amber-50)); --lch-amber-100: 95% 0.04 79.55; --color-amber-100: oklch(var(--lch-amber-100)); --lch-amber-200: 90% 0.07 79.55; --color-amber-200: oklch(var(--lch-amber-200)); --lch-amber-300: 86% 0.11 79.55; --color-amber-300: oklch(var(--lch-amber-300)); --lch-amber-400: 83% 0.13 79.55; --color-amber-400: oklch(var(--lch-amber-400)); --lch-amber-500: 80% 0.15 79.55; /* base */ --color-amber-500: oklch(var(--lch-amber-500)); --lch-amber-600: 70% 0.13 79.55; --color-amber-600: oklch(var(--lch-amber-600)); --lch-amber-700: 57% 0.11 79.55; --color-amber-700: oklch(var(--lch-amber-700)); --lch-amber-800: 44% 0.08 79.55; --color-amber-800: oklch(var(--lch-amber-800)); --lch-amber-900: 31% 0.06 79.55; --color-amber-900: oklch(var(--lch-amber-900)); --lch-amber-950: 21% 0.03 79.55; --color-amber-950: oklch(var(--lch-amber-950)); /* Orange */ --lch-orange-50: 97% 0.02 59.94; --color-orange-50: oklch(var(--lch-orange-50)); --lch-orange-100: 94% 0.04 59.94; --color-orange-100: oklch(var(--lch-orange-100)); --lch-orange-200: 88% 0.07 59.94; --color-orange-200: oklch(var(--lch-orange-200)); --lch-orange-300: 82% 0.11 59.94; --color-orange-300: oklch(var(--lch-orange-300)); --lch-orange-400: 77% 0.13 59.94; --color-orange-400: oklch(var(--lch-orange-400)); --lch-orange-500: 72% 0.16 59.94; /* base */ --color-orange-500: oklch(var(--lch-orange-500)); --lch-orange-600: 63% 0.14 59.94; --color-orange-600: oklch(var(--lch-orange-600)); --lch-orange-700: 51% 0.12 59.94; --color-orange-700: oklch(var(--lch-orange-700)); --lch-orange-800: 39% 0.09 59.94; --color-orange-800: oklch(var(--lch-orange-800)); --lch-orange-900: 27% 0.06 59.94; --color-orange-900: oklch(var(--lch-orange-900)); --lch-orange-950: 17% 0.03 59.94; --color-orange-950: oklch(var(--lch-orange-950)); --lch-black: 0% 0 0; --lch-white: 100% 0 0; /* Semantic UI tokens (light mode defaults) */ --color-canvas: lch(96.46% 3.65 74.71); --color-canvas-light: oklch(var(--lch-steel-50)); --color-ink: lch(12.246% 1.433 1.245); --color-grey: lch(58.72% 2.42 85.34); --color-palegrey: lch(92.35% 0 0); --color-surface-page: var(--color-canvas); --color-text-page: var(--color-ink); --color-text-muted: oklch(var(--lch-navy-300)); --color-text-accent: oklch(var(--lch-navy-500)); --color-blue-hover: oklch(var(--lch-teal-600)); --color-focus: oklch(var(--lch-teal-500)); --color-border-overlay: rgba(0, 0, 0, 0.1); --color-nav-overlay: var(--color-navy-500); --color-office-map-fill: var(--color-grey); --color-office-map-fill-light: var(--color-steel-50); --color-office-map-fill-dark: var(--color-steel-500); --font-family-abril: "abril-text", serif; --font-family-ttnorms: "TT Norms Pro", Sans-Serif; /* @link https://utopia.fyi/type/calculator?c=360,18,1.25,2000,24,1.333,6,2,1240&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */ /* Slightly smaller than Utopia defaults for meta / small text (steps above --fs-0 in this file) */ --fs--2: clamp(0.68rem, 0.651rem + 0.1138cqi, 0.794rem); --fs--1: clamp(0.85rem, 0.799rem + 0.2066cqi, 1.058rem); --fs-0: clamp(1.125rem, 1.0427rem + 0.3659cqi, 1.5rem); --fs-1: clamp(1.4063rem, 1.276rem + 0.5788cqi, 1.9995rem); --fs-2: clamp(1.7578rem, 1.5586rem + 0.8854cqi, 2.6653rem); --fs-3: clamp(2.1973rem, 1.8997rem + 1.3226cqi, 3.5529rem); --fs-4: clamp(2.7466rem, 2.3099rem + 1.9409cqi, 4.736rem); --fs-5: clamp(3.4332rem, 2.8011rem + 2.8096cqi, 6.3131rem); --fs-6: clamp(4.2915rem, 3.3863rem + 4.0232cqi, 8.4153rem); --letter-spacing: -0.01em; --letter-spacing-tight: -0.015em; --letter-spacing-tighter: -0.0175em; --letter-spacing-loose: 0.005em; --letter-spacing-looser: 0.0075em; --line-height: 1.4; --line-height-tight: 1.3; --line-height-tighter: 1.2; --line-height-tightest: 1.1; --space-3xs: clamp(0.25rem, 0.2378rem + 0.0543vw, 0.3125rem); --space-2xs: clamp(0.5rem, 0.4755rem + 0.1087vw, 0.625rem); --space-xs: clamp(0.75rem, 0.7255rem + 0.1087vw, 0.875rem); --space-s: clamp(1rem, 0.9633rem + 0.163vw, 1.1875rem); --space-m: clamp(1.5rem, 1.4389rem + 0.2717vw, 1.8125rem); --space-l: clamp(2rem, 1.9266rem + 0.3261vw, 2.375rem); --space-xl: clamp(3rem, 2.8899rem + 0.4891vw, 3.5625rem); --space-2xl: clamp(4rem, 3.8533rem + 0.6522vw, 4.75rem); --space-3xl: clamp(6rem, 5.7799rem + 0.9783vw, 7.125rem); --space-4xl: clamp(8rem, 7.7065rem + 1.3043vw, 9.5rem); /* Max line length / alignment reference; slightly narrower than 1920 for readability */ --content-width: 1720px; --content-width-padding: max(4vw, 50vw - var(--content-width) / 2.5); --content-width-margin: 10vw; --content-width-margin-mobile: 4vw; --transition: 0.25s cubic-bezier(0.37, 1, 0.74, 1); --layout-fluid-min: 35ch; --layout-default-repeat: 3; --layout-default-gap: 2vmax; --desktop-nav-height: 8rem; --box-shadow: 0 0 0 1px oklch(var(--lch-black) / 0.075), 0 0.2em 0.1em -0.2em oklch(var(--lch-black) / 0.075), 0 0.4em 0.8em -0.4em oklch(var(--lch-black) / 0.075), 0 0.8em 1.6em -1.2em oklch(var(--lch-black) / 0.075); --box-shadow-pill: 0 0 0 1px oklch(var(--lch-black) / 0.0875), 0 0.1em 0.2em -0.1em oklch(var(--lch-black) / 0.05), 0 0.2em 0.4em -0.2em oklch(var(--lch-black) / 0.05), 0 0.3em 0.6em -0.3em oklch(var(--lch-black) / 0.05); --box-shadow-pill-hover: 0 0 0 1px oklch(var(--lch-black) / 0.125), 0 0.1em 0.2em -0.1em oklch(var(--lch-black) / 0.0875), 0 0.2em 0.4em -0.2em oklch(var(--lch-black) / 0.0875), 0 0.3em 0.6em -0.3em oklch(var(--lch-black) / 0.0875); } @media (prefers-color-scheme: dark) { :root[data-color-mode="system"] { color-scheme: dark; --color-canvas-light: oklch(var(--lch-navy-800)); --color-surface-page: oklch(var(--lch-navy-900)); --color-text-page: oklch(var(--lch-steel-50)); --color-text-muted: oklch(var(--lch-steel-200)); --color-text-accent: oklch(var(--lch-baby-300)); --color-blue-hover: oklch(var(--lch-baby-300)); --color-focus: oklch(var(--lch-teal-300)); --color-border-overlay: rgba(255, 255, 255, 0.14); --color-nav-overlay: oklch(var(--lch-navy-800)); --color-office-map-fill: oklch(var(--lch-navy-700)); --color-office-map-fill-light: oklch(var(--lch-steel-300)); --color-office-map-fill-dark: oklch(var(--lch-navy-700)); --box-shadow: 0 0 0 1px oklch(var(--lch-white) / 0.1), 0 0.2em 0.1em -0.2em oklch(var(--lch-black) / 0.45), 0 0.4em 0.8em -0.4em oklch(var(--lch-black) / 0.45), 0 0.8em 1.6em -1.2em oklch(var(--lch-black) / 0.45); --box-shadow-pill: 0 0 0 1px oklch(var(--lch-white) / 0.15), 0 0.1em 0.2em -0.1em oklch(var(--lch-black) / 0.35), 0 0.2em 0.4em -0.2em oklch(var(--lch-black) / 0.35), 0 0.3em 0.6em -0.3em oklch(var(--lch-black) / 0.35); --box-shadow-pill-hover: 0 0 0 1px oklch(var(--lch-white) / 0.24), 0 0.1em 0.2em -0.1em oklch(var(--lch-black) / 0.45), 0 0.2em 0.4em -0.2em oklch(var(--lch-black) / 0.45), 0 0.3em 0.6em -0.3em oklch(var(--lch-black) / 0.45); } } :root[data-color-mode="light"] { color-scheme: light; --color-canvas: lch(96.46% 3.65 74.71); --color-canvas-light: oklch(var(--lch-steel-50)); --color-ink: lch(12.246% 1.433 1.245); --color-surface-page: var(--color-canvas); --color-text-page: var(--color-ink); --color-text-muted: oklch(var(--lch-navy-300)); --color-text-accent: oklch(var(--lch-navy-500)); --color-blue-hover: oklch(var(--lch-teal-600)); --color-focus: oklch(var(--lch-teal-500)); --color-border-overlay: rgba(0, 0, 0, 0.1); --color-nav-overlay: var(--color-navy-500); --color-office-map-fill: #d3d3d3; --color-office-map-fill-light: var(--color-steel-50); --color-office-map-fill-dark: var(--color-steel-500); } :root[data-color-mode="dark"] { color-scheme: dark; --color-canvas-light: oklch(var(--lch-navy-800)); --color-surface-page: oklch(var(--lch-navy-900)); --color-text-page: oklch(var(--lch-steel-50)); --color-text-muted: oklch(var(--lch-steel-200)); --color-text-accent: oklch(var(--lch-baby-300)); --color-blue-hover: oklch(var(--lch-baby-300)); --color-focus: oklch(var(--lch-teal-300)); --color-border-overlay: rgba(255, 255, 255, 0.14); --color-nav-overlay: oklch(var(--lch-navy-800)); --color-office-map-fill: oklch(var(--lch-navy-700)); --color-office-map-fill-light: oklch(var(--lch-steel-300)); --color-office-map-fill-dark: oklch(var(--lch-navy-700)); } } } @layer colour{ @layer colour { /* Text color utilities */ .text-copper, a.text-copper { color: var(--color-copper-500); } .text-rose, a.text-rose { color: var(--color-rose-500); } .text-magenta, a.text-magenta { color: var(--color-magenta-500); } .text-violet, a.text-violet { color: var(--color-violet-500); } .text-indigo, a.text-indigo { color: var(--color-indigo-500); } .text-navy, a.text-navy { color: var(--color-navy-500); } .text-steel, a.text-steel { color: var(--color-steel-500); } .text-baby, a.text-baby { color: var(--color-baby-500); } .text-powder, a.text-powder { color: var(--color-powder-500); } .text-teal, a.text-teal { color: var(--color-teal-500); } .text-emerald, a.text-emerald { color: var(--color-emerald-500); } .text-green, a.text-green { color: var(--color-green-500); } .text-lime, a.text-lime { color: var(--color-lime-500); } .text-yellow, a.text-yellow { color: var(--color-yellow-500); } .text-amber, a.text-amber { color: var(--color-amber-500); } .text-orange, a.text-orange { color: var(--color-orange-500); } .text-canvas, a.text-canvas { color: var(--color-canvas); } .text-ink, a.text-ink { color: var(--color-ink); } .text-white, a.text-white { color: #fff; } /* Background color utilities */ .bg-copper { background-color: var(--color-copper-500); } .bg-rose { background-color: var(--color-rose-500); } .bg-magenta { background-color: var(--color-magenta-500); } .bg-violet { background-color: var(--color-violet-500); } .bg-indigo { background-color: var(--color-indigo-500); } .bg-navy { background-color: var(--color-navy-500); } .bg-steel { background-color: var(--color-steel-500); } .bg-steel-50 { background-color: var(--color-steel-50); } .bg-steel-100 { background-color: var(--color-steel-100); } .bg-palegrey { background-color: var(--color-palegrey); } .bg-baby { background-color: var(--color-baby-500); } .bg-powder { background-color: var(--color-powder-500); } .bg-teal { background-color: var(--color-teal-500); } .bg-emerald { background-color: var(--color-emerald-500); } .bg-green { background-color: var(--color-green-500); } .bg-lime { background-color: var(--color-lime-500); } .bg-yellow { background-color: var(--color-yellow-500); } .bg-amber { background-color: var(--color-amber-500); } .bg-orange { background-color: var(--color-orange-500); } .bg-canvas { background-color: var(--color-canvas); } .bg-white { background-color: #fff; } .bg-ink { background-color: var(--color-ink); } /* * Links on navy / emerald / steel sections with canvas body copy: * lighter tints stay distinct from text-canvas while staying readable on -500 surfaces. */ .bg-navy.text-canvas a:not(.text-white), .bg-navy .text-canvas a:not(.text-white) { color: var(--color-navy-200); } .bg-emerald.text-canvas a:not(.text-white), .bg-emerald .text-canvas a:not(.text-white) { color: var(--color-emerald-200); } .bg-green.text-canvas a:not(.text-white), .bg-green .text-canvas a:not(.text-white) { color: var(--color-green-200); } .bg-steel.text-canvas a:not(.text-white), .bg-steel .text-canvas a:not(.text-white) { color: var(--color-steel-200); } } } @layer layout{ /* https://www.smashingmagazine.com/2024/05/modern-css-layouts-no-framework-needed/ */ @layer layout { .repeating-grid { --_grid-repeat: var(--grid-repeat, var(--layout-default-repeat)); --_repeating-grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat(var(--_grid-repeat), 1fr); gap: var(--_repeating-grid-gap); } .repeating-flex { --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat)); --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap)); --_gap-count: calc(var(--_flex-repeat) - 1); --_gap-repeater-calc: calc( var(--_repeating-flex-gap) / var(--_flex-repeat) * var(--_gap-count) ); display: flex; flex-wrap: wrap; gap: var(--_repeating-flex-gap); > * { flex: 1 1 calc((100% / var(--_flex-repeat)) - var(--_gap-repeater-calc)); } } .fluid-grid { --_fluid-grid-min: var(--fluid-grid-min, var(--layout-fluid-min)); --_fluid-grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat( auto-fit, minmax(min(var(--_fluid-grid-min), 100%), 1fr) ); gap: var(--_fluid-grid-gap); } .fluid-flex { --_fluid-flex-min: var(--fluid-flex-min, var(--layout-fluid-min)); --_fluid-flex-gap: var(--flex-gap, var(--layout-default-gap)); display: flex; flex-wrap: wrap; gap: var(--_fluid-flex-gap); > * { flex: 1 1 var(--_fluid-flex-min); } } .subgrid-rows { --subgrid-gap: 1em; &:has(> :nth-child(1):last-child) { --subgrid-rows: 1; } &:has(> :nth-child(2):last-child) { --subgrid-rows: 2; } &:has(> :nth-child(3):last-child) { --subgrid-rows: 3; } &:has(> :nth-child(4):last-child) { --subgrid-rows: 4; } &:has(> :nth-child(5):last-child) { --subgrid-rows: 5; } &:has(> :nth-child(6):last-child) { --subgrid-rows: 6; } > * { display: grid; gap: var(--subgrid-gap, 0); grid-row: auto / span var(--subgrid-rows, 5); grid-template-rows: subgrid; } } :is( .fluid-grid:not(.subgrid-rows), .repeating-grid:not(.subgrid-rows), .repeating-flex, .fluid-flex ) { > * { container: var(--grid-item-container, grid-item) / inline-size; } } /* Spacing utilities - Padding */ /* All sides */ .p-3xs { padding: var(--space-3xs); } .p-2xs { padding: var(--space-2xs); } .p-xs { padding: var(--space-xs); } .p-s { padding: var(--space-s); } .p-m { padding: var(--space-m); } .p-l { padding: var(--space-l); } .p-xl { padding: var(--space-xl); } .p-2xl { padding: var(--space-2xl); } .p-3xl { padding: var(--space-3xl); } .p-4xl { padding: var(--space-4xl); } /* Horizontal (left + right) */ .px-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); } .px-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); } .px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); } .px-s { padding-left: var(--space-s); padding-right: var(--space-s); } .px-m { padding-left: var(--space-m); padding-right: var(--space-m); } .px-l { padding-left: var(--space-l); padding-right: var(--space-l); } .px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); } .px-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); } .px-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); } .px-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); } /* Vertical (top + bottom) */ .py-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); } .py-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); } .py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); } .py-s { padding-top: var(--space-s); padding-bottom: var(--space-s); } .py-m { padding-top: var(--space-m); padding-bottom: var(--space-m); } .py-l { padding-top: var(--space-l); padding-bottom: var(--space-l); } .py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .py-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); } .py-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } .py-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); } /* Individual sides */ .pt-3xs { padding-top: var(--space-3xs); } .pt-2xs { padding-top: var(--space-2xs); } .pt-xs { padding-top: var(--space-xs); } .pt-s { padding-top: var(--space-s); } .pt-m { padding-top: var(--space-m); } .pt-l { padding-top: var(--space-l); } .pt-xl { padding-top: var(--space-xl); } .pt-2xl { padding-top: var(--space-2xl); } .pt-3xl { padding-top: var(--space-3xl); } .pt-4xl { padding-top: var(--space-4xl); } .pr-3xs { padding-right: var(--space-3xs); } .pr-2xs { padding-right: var(--space-2xs); } .pr-xs { padding-right: var(--space-xs); } .pr-s { padding-right: var(--space-s); } .pr-m { padding-right: var(--space-m); } .pr-l { padding-right: var(--space-l); } .pr-xl { padding-right: var(--space-xl); } .pr-2xl { padding-right: var(--space-2xl); } .pr-3xl { padding-right: var(--space-3xl); } .pr-4xl { padding-right: var(--space-4xl); } .pb-3xs { padding-bottom: var(--space-3xs); } .pb-2xs { padding-bottom: var(--space-2xs); } .pb-xs { padding-bottom: var(--space-xs); } .pb-s { padding-bottom: var(--space-s); } .pb-m { padding-bottom: var(--space-m); } .pb-l { padding-bottom: var(--space-l); } .pb-xl { padding-bottom: var(--space-xl); } .pb-2xl { padding-bottom: var(--space-2xl); } .pb-3xl { padding-bottom: var(--space-3xl); } .pb-4xl { padding-bottom: var(--space-4xl); } .pl-3xs { padding-left: var(--space-3xs); } .pl-2xs { padding-left: var(--space-2xs); } .pl-xs { padding-left: var(--space-xs); } .pl-s { padding-left: var(--space-s); } .pl-m { padding-left: var(--space-m); } .pl-l { padding-left: var(--space-l); } .pl-xl { padding-left: var(--space-xl); } .pl-2xl { padding-left: var(--space-2xl); } .pl-3xl { padding-left: var(--space-3xl); } .pl-4xl { padding-left: var(--space-4xl); } /* Mobile-only padding utilities - only apply on small viewports */ /* All sides */ @media (max-width: 767px) { .p-mobile-0 { padding: 0; } .p-mobile-3xs { padding: var(--space-3xs); } .p-mobile-2xs { padding: var(--space-2xs); } .p-mobile-xs { padding: var(--space-xs); } .p-mobile-s { padding: var(--space-s); } .p-mobile-m { padding: var(--space-m); } .p-mobile-l { padding: var(--space-l); } .p-mobile-xl { padding: var(--space-xl); } .p-mobile-2xl { padding: var(--space-2xl); } .p-mobile-3xl { padding: var(--space-3xl); } .p-mobile-4xl { padding: var(--space-4xl); } /* Horizontal (left + right) */ .px-mobile-0 { padding-left: 0; padding-right: 0; } .px-mobile-3xs { padding-left: var(--space-3xs); padding-right: var(--space-3xs); } .px-mobile-2xs { padding-left: var(--space-2xs); padding-right: var(--space-2xs); } .px-mobile-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); } .px-mobile-s { padding-left: var(--space-s); padding-right: var(--space-s); } .px-mobile-m { padding-left: var(--space-m); padding-right: var(--space-m); } .px-mobile-l { padding-left: var(--space-l); padding-right: var(--space-l); } .px-mobile-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); } .px-mobile-2xl { padding-left: var(--space-2xl); padding-right: var(--space-2xl); } .px-mobile-3xl { padding-left: var(--space-3xl); padding-right: var(--space-3xl); } .px-mobile-4xl { padding-left: var(--space-4xl); padding-right: var(--space-4xl); } /* Vertical (top + bottom) */ .py-mobile-0 { padding-top: 0; padding-bottom: 0; } .py-mobile-3xs { padding-top: var(--space-3xs); padding-bottom: var(--space-3xs); } .py-mobile-2xs { padding-top: var(--space-2xs); padding-bottom: var(--space-2xs); } .py-mobile-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); } .py-mobile-s { padding-top: var(--space-s); padding-bottom: var(--space-s); } .py-mobile-m { padding-top: var(--space-m); padding-bottom: var(--space-m); } .py-mobile-l { padding-top: var(--space-l); padding-bottom: var(--space-l); } .py-mobile-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } .py-mobile-2xl { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); } .py-mobile-3xl { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } .py-mobile-4xl { padding-top: var(--space-4xl); padding-bottom: var(--space-4xl); } /* Individual sides */ .pt-mobile-0 { padding-top: 0; } .pt-mobile-3xs { padding-top: var(--space-3xs); } .pt-mobile-2xs { padding-top: var(--space-2xs); } .pt-mobile-xs { padding-top: var(--space-xs); } .pt-mobile-s { padding-top: var(--space-s); } .pt-mobile-m { padding-top: var(--space-m); } .pt-mobile-l { padding-top: var(--space-l); } .pt-mobile-xl { padding-top: var(--space-xl); } .pt-mobile-2xl { padding-top: var(--space-2xl); } .pt-mobile-3xl { padding-top: var(--space-3xl); } .pt-mobile-4xl { padding-top: var(--space-4xl); } .pr-mobile-0 { padding-right: 0; } .pr-mobile-3xs { padding-right: var(--space-3xs); } .pr-mobile-2xs { padding-right: var(--space-2xs); } .pr-mobile-xs { padding-right: var(--space-xs); } .pr-mobile-s { padding-right: var(--space-s); } .pr-mobile-m { padding-right: var(--space-m); } .pr-mobile-l { padding-right: var(--space-l); } .pr-mobile-xl { padding-right: var(--space-xl); } .pr-mobile-2xl { padding-right: var(--space-2xl); } .pr-mobile-3xl { padding-right: var(--space-3xl); } .pr-mobile-4xl { padding-right: var(--space-4xl); } .pb-mobile-0 { padding-bottom: 0; } .pb-mobile-3xs { padding-bottom: var(--space-3xs); } .pb-mobile-2xs { padding-bottom: var(--space-2xs); } .pb-mobile-xs { padding-bottom: var(--space-xs); } .pb-mobile-s { padding-bottom: var(--space-s); } .pb-mobile-m { padding-bottom: var(--space-m); } .pb-mobile-l { padding-bottom: var(--space-l); } .pb-mobile-xl { padding-bottom: var(--space-xl); } .pb-mobile-2xl { padding-bottom: var(--space-2xl); } .pb-mobile-3xl { padding-bottom: var(--space-3xl); } .pb-mobile-4xl { padding-bottom: var(--space-4xl); } .pl-mobile-0 { padding-left: 0; } .pl-mobile-3xs { padding-left: var(--space-3xs); } .pl-mobile-2xs { padding-left: var(--space-2xs); } .pl-mobile-xs { padding-left: var(--space-xs); } .pl-mobile-s { padding-left: var(--space-s); } .pl-mobile-m { padding-left: var(--space-m); } .pl-mobile-l { padding-left: var(--space-l); } .pl-mobile-xl { padding-left: var(--space-xl); } .pl-mobile-2xl { padding-left: var(--space-2xl); } .pl-mobile-3xl { padding-left: var(--space-3xl); } .pl-mobile-4xl { padding-left: var(--space-4xl); } } /* Spacing utilities - Margin */ /* All sides */ .m-3xs { margin: var(--space-3xs); } .m-2xs { margin: var(--space-2xs); } .m-xs { margin: var(--space-xs); } .m-s { margin: var(--space-s); } .m-m { margin: var(--space-m); } .m-l { margin: var(--space-l); } .m-xl { margin: var(--space-xl); } .m-2xl { margin: var(--space-2xl); } .m-3xl { margin: var(--space-3xl); } .m-4xl { margin: var(--space-4xl); } /* Horizontal (left + right) */ .mx-3xs { margin-left: var(--space-3xs); margin-right: var(--space-3xs); } .mx-2xs { margin-left: var(--space-2xs); margin-right: var(--space-2xs); } .mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); } .mx-s { margin-left: var(--space-s); margin-right: var(--space-s); } .mx-m { margin-left: var(--space-m); margin-right: var(--space-m); } .mx-l { margin-left: var(--space-l); margin-right: var(--space-l); } .mx-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); } .mx-2xl { margin-left: var(--space-2xl); margin-right: var(--space-2xl); } .mx-3xl { margin-left: var(--space-3xl); margin-right: var(--space-3xl); } .mx-4xl { margin-left: var(--space-4xl); margin-right: var(--space-4xl); } /* Vertical (top + bottom) */ .my-3xs { margin-top: var(--space-3xs); margin-bottom: var(--space-3xs); } .my-2xs { margin-top: var(--space-2xs); margin-bottom: var(--space-2xs); } .my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); } .my-s { margin-top: var(--space-s); margin-bottom: var(--space-s); } .my-m { margin-top: var(--space-m); margin-bottom: var(--space-m); } .my-l { margin-top: var(--space-l); margin-bottom: var(--space-l); } .my-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); } .my-2xl { margin-top: var(--space-2xl); margin-bottom: var(--space-2xl); } .my-3xl { margin-top: var(--space-3xl); margin-bottom: var(--space-3xl); } .my-4xl { margin-top: var(--space-4xl); margin-bottom: var(--space-4xl); } /* Individual sides */ .mt-3xs { margin-top: var(--space-3xs); } .mt-2xs { margin-top: var(--space-2xs); } .mt-xs { margin-top: var(--space-xs); } .mt-s { margin-top: var(--space-s); } .mt-m { margin-top: var(--space-m); } .mt-l { margin-top: var(--space-l); } .mt-xl { margin-top: var(--space-xl); } .mt-2xl { margin-top: var(--space-2xl); } .mt-3xl { margin-top: var(--space-3xl); } .mt-4xl { margin-top: var(--space-4xl); } .mr-3xs { margin-right: var(--space-3xs); } .mr-2xs { margin-right: var(--space-2xs); } .mr-xs { margin-right: var(--space-xs); } .mr-s { margin-right: var(--space-s); } .mr-m { margin-right: var(--space-m); } .mr-l { margin-right: var(--space-l); } .mr-xl { margin-right: var(--space-xl); } .mr-2xl { margin-right: var(--space-2xl); } .mr-3xl { margin-right: var(--space-3xl); } .mr-4xl { margin-right: var(--space-4xl); } .mb-3xs { margin-bottom: var(--space-3xs); } .mb-2xs { margin-bottom: var(--space-2xs); } .mb-xs { margin-bottom: var(--space-xs); } .mb-s { margin-bottom: var(--space-s); } .mb-m { margin-bottom: var(--space-m); } .mb-l { margin-bottom: var(--space-l); } .mb-xl { margin-bottom: var(--space-xl); } .mb-2xl { margin-bottom: var(--space-2xl); } .mb-3xl { margin-bottom: var(--space-3xl); } .mb-4xl { margin-bottom: var(--space-4xl); } .ml-3xs { margin-left: var(--space-3xs); } .ml-2xs { margin-left: var(--space-2xs); } .ml-xs { margin-left: var(--space-xs); } .ml-s { margin-left: var(--space-s); } .ml-m { margin-left: var(--space-m); } .ml-l { margin-left: var(--space-l); } .ml-xl { margin-left: var(--space-xl); } .ml-2xl { margin-left: var(--space-2xl); } .ml-3xl { margin-left: var(--space-3xl); } .ml-4xl { margin-left: var(--space-4xl); } /* Spacing utilities - Gap */ .gap-0 { /* Drive both grid + flex gap via custom properties */ --grid-gap: 0; --flex-gap: 0; gap: 0; } .gap-1 { --grid-gap: 1px; --flex-gap: 1px; gap: 1px; } .gap-3xs { --grid-gap: var(--space-3xs); --flex-gap: var(--space-3xs); gap: var(--space-3xs); } .gap-2xs { --grid-gap: var(--space-2xs); --flex-gap: var(--space-2xs); gap: var(--space-2xs); } .gap-xs { --grid-gap: var(--space-xs); --flex-gap: var(--space-xs); gap: var(--space-xs); } .gap-s { --grid-gap: var(--space-s); --flex-gap: var(--space-s); gap: var(--space-s); } .gap-m { --grid-gap: var(--space-m); --flex-gap: var(--space-m); gap: var(--space-m); } .gap-l { --grid-gap: var(--space-l); --flex-gap: var(--space-l); gap: var(--space-l); } .gap-xl { --grid-gap: var(--space-xl); --flex-gap: var(--space-xl); gap: var(--space-xl); } .gap-2xl { --grid-gap: var(--space-2xl); --flex-gap: var(--space-2xl); gap: var(--space-2xl); } .gap-3xl { --grid-gap: var(--space-3xl); --flex-gap: var(--space-3xl); gap: var(--space-3xl); } .gap-4xl { --grid-gap: var(--space-4xl); --flex-gap: var(--space-4xl); gap: var(--space-4xl); } /* Responsive gap utilities - mobile overrides */ @media (max-width: 767px) { .gap-mobile-0 { --grid-gap: 0; --flex-gap: 0; gap: 0; } .gap-mobile-3xs { --grid-gap: var(--space-3xs); --flex-gap: var(--space-3xs); gap: var(--space-3xs); } .gap-mobile-2xs { --grid-gap: var(--space-2xs); --flex-gap: var(--space-2xs); gap: var(--space-2xs); } .gap-mobile-xs { --grid-gap: var(--space-xs); --flex-gap: var(--space-xs); gap: var(--space-xs); } .gap-mobile-s { --grid-gap: var(--space-s); --flex-gap: var(--space-s); gap: var(--space-s); } .gap-mobile-m { --grid-gap: var(--space-m); --flex-gap: var(--space-m); gap: var(--space-m); } .gap-mobile-l { --grid-gap: var(--space-l); --flex-gap: var(--space-l); gap: var(--space-l); } } /* Column gap (horizontal) */ .gap-x-3xs { column-gap: var(--space-3xs); } .gap-x-2xs { column-gap: var(--space-2xs); } .gap-x-xs { column-gap: var(--space-xs); } .gap-x-s { column-gap: var(--space-s); } .gap-x-m { column-gap: var(--space-m); } .gap-x-l { column-gap: var(--space-l); } .gap-x-xl { column-gap: var(--space-xl); } .gap-x-2xl { column-gap: var(--space-2xl); } .gap-x-3xl { column-gap: var(--space-3xl); } .gap-x-4xl { column-gap: var(--space-4xl); } /* Row gap (vertical) */ .gap-y-3xs { row-gap: var(--space-3xs); } .gap-y-2xs { row-gap: var(--space-2xs); } .gap-y-xs { row-gap: var(--space-xs); } .gap-y-s { row-gap: var(--space-s); } .gap-y-m { row-gap: var(--space-m); } .gap-y-l { row-gap: var(--space-l); } .gap-y-xl { row-gap: var(--space-xl); } .gap-y-2xl { row-gap: var(--space-2xl); } .gap-y-3xl { row-gap: var(--space-3xl); } .gap-y-4xl { row-gap: var(--space-4xl); } /* Auto margins for centering */ .mx-auto { margin-left: auto; margin-right: auto; } .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .h100 { height: 100%; } .ar169 { aspect-ratio: 16 / 9; } .ar32 { aspect-ratio: 3 / 2; } .ar31 { aspect-ratio: 3 / 1; } .ar21 { aspect-ratio: 2 / 1; } .ar11 { aspect-ratio: 1 / 1; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-row { flex-direction: column; } .space-between { justify-content: space-between; } .space-around { justify-content: space-around; } .flex-start { justify-content: flex-start; } .flex-end { justify-content: flex-end; } .flex-center { justify-content: center; } .relative { position: relative; } .sticky { position: sticky; top: var(--space-m); } .content-width { padding-left: var(--content-width-padding); padding-right: var(--content-width-padding); } .content-width-left { padding-left: var(--content-width-padding); } @media (min-width: 1024px) { .content-width { padding-left: var(--content-width-padding) !important; padding-right: var(--content-width-padding) !important; } } @media (min-width: 1024px) { .content-width-left { padding-left: var(--content-width-padding) !important; } } /* Break out of content-width container on mobile */ @media (max-width: 767px) { .full-width-mobile { /* width: calc(100% + 8vw); */ margin-left: calc(-2vw); margin-right: calc(-2vw); padding-left: 0 !important; padding-right: 0 !important; } } /* When split-swiper lives in a content-width container, let the inner component handle the full-bleed breakout so the image can reach the viewport edge without an extra left margin. */ @media (min-width: 768px) { .content-width, .content-width-left, .content-width-right { &:has(> .swiper-split) { padding-left: 0; padding-right: 0; width: 100%; } } } .grid-responsive-2 { --grid-columns: 1; } .grid-mobile-2 { --grid-columns: 2; /* mobile: 2 columns */ } @media (min-width: 768px) { .grid-responsive-2 { --grid-columns: 2; } .grid-mobile-2 { --grid-columns: 1; /* desktop: 1 column */ } } /* For use with GSAP ScrollTrigger when ScrollSmoother is active */ .pin-spacer { /* Placeholder for GSAP pinned elements */ } /* Column span grid system */ .grid { --_grid-columns: var(--grid-columns, 12); --_grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat(var(--_grid-columns), 1fr); gap: var(--_grid-gap); } /* Column spans */ .col-span-1 { grid-column: span 1; } .col-span-2 { grid-column: span 2; } .col-span-3 { grid-column: span 3; } .col-span-4 { grid-column: span 4; } .col-span-5 { grid-column: span 5; } .col-span-6 { grid-column: span 6; } .col-span-7 { grid-column: span 7; } .col-span-8 { grid-column: span 8; } .col-span-9 { grid-column: span 9; } .col-span-10 { grid-column: span 10; } .col-span-11 { grid-column: span 11; } .col-span-12 { grid-column: 1 / -1; } .col-span-1\/2 { grid-column: span 6; } .col-span-full { grid-column: 1 / -1; } /* Row spans */ .row-span-1 { grid-row: span 1; } .row-span-2 { grid-row: span 2; } .row-span-3 { grid-row: span 3; } .row-span-4 { grid-row: span 4; } .row-span-5 { grid-row: span 5; } .row-span-6 { grid-row: span 6; } /* Container query responsive spans */ @container grid-item (min-width: 400px) { .col-span-sm-1 { grid-column: span 1; } .col-span-sm-2 { grid-column: span 2; } .col-span-sm-3 { grid-column: span 3; } .col-span-sm-4 { grid-column: span 4; } .col-span-sm-6 { grid-column: span 6; } .col-span-sm-full { grid-column: 1 / -1; } } @container grid-item (min-width: 768px) { .col-span-md-1 { grid-column: span 1; } .col-span-md-2 { grid-column: span 2; } .col-span-md-3 { grid-column: span 3; } .col-span-md-4 { grid-column: span 4; } .col-span-md-5 { grid-column: span 5; } .col-span-md-6 { grid-column: span 6; } .col-span-md-7 { grid-column: span 7; } .col-span-md-8 { grid-column: span 8; } .col-span-md-full { grid-column: 1 / -1; } } @container grid-item (min-width: 1024px) { .col-span-lg-1 { grid-column: span 1; } .col-span-lg-2 { grid-column: span 2; } .col-span-lg-3 { grid-column: span 3; } .col-span-lg-4 { grid-column: span 4; } .col-span-lg-6 { grid-column: span 6; } .col-span-lg-8 { grid-column: span 8; } .col-span-lg-9 { grid-column: span 9; } .col-span-lg-full { grid-column: 1 / -1; } } /* Common layout patterns */ .grid-sidebar-left { --_sidebar-width: var(--sidebar-width, 250px); --_grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: 1fr; gap: var(--_grid-gap); } @media (min-width: 768px) { .grid-sidebar-left { grid-template-columns: var(--_sidebar-width) 1fr; } } .grid-sidebar-right { --_sidebar-width: var(--sidebar-width, 250px); --_grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: 1fr; gap: var(--_grid-gap); } @media (min-width: 768px) { .grid-sidebar-right { grid-template-columns: 1fr var(--_sidebar-width); } } .grid-holy-grail { --_grid-gap: var(--grid-gap, var(--layout-default-gap)); --_sidebar-min: var(--sidebar-min, 200px); --_content-min: var(--content-min, 50%); display: grid; grid-template-columns: 1fr; gap: var(--_grid-gap); } @media (min-width: 1024px) { .grid-holy-grail { grid-template-columns: minmax(var(--_sidebar-min), 1fr) minmax(var(--_content-min), 3fr) minmax(var(--_sidebar-min), 1fr); } } /* Auto-fill responsive grid (alternative to fluid-grid) */ .grid-auto { --_grid-min: var(--grid-min, 250px); --_grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat( auto-fill, minmax(min(var(--_grid-min), 100%), 1fr) ); gap: var(--_grid-gap); } /* Grid alignment utilities */ .place-center { place-items: center; } .place-start { place-items: start; } .place-end { place-items: end; } .justify-center { justify-content: center; justify-items: center; } .justify-start { justify-items: start; } .justify-end { justify-items: end; } .align-center { align-items: center; } .align-start { align-items: start; } .align-end { align-items: end; } /* Media query responsive spans for viewport-based layouts */ @media (min-width: 768px) { .col-span-md-1 { grid-column: span 1; } .col-span-md-2 { grid-column: span 2; } .col-span-md-3 { grid-column: span 3; } .col-span-md-4 { grid-column: span 4; } .col-span-md-5 { grid-column: span 5; } .col-span-md-6 { grid-column: span 6; } .col-span-md-7 { grid-column: span 7; } .col-span-md-8 { grid-column: span 8; } .col-span-md-full { grid-column: 1 / -1; } } @media (min-width: 1024px) { .col-span-lg-1 { grid-column: span 1; } .col-span-lg-2 { grid-column: span 2; } .col-span-lg-3 { grid-column: span 3; } .col-span-lg-4 { grid-column: span 4; } .col-span-lg-6 { grid-column: span 6; } .col-span-lg-8 { grid-column: span 8; } .col-span-lg-9 { grid-column: span 9; } .col-span-lg-full { grid-column: 1 / -1; } } /* In-page filter anchors sit below the fixed nav (+ desktop breadcrumbs when scrolled) */ #podcast-filters, #project-filters { scroll-margin-top: calc( var(--desktop-nav-height, 8rem) + var(--space-m, 1rem) ); } @media (min-width: 768px) { #podcast-filters, #project-filters { scroll-margin-top: calc( var(--desktop-nav-height, 8rem) + 2.75rem + var(--space-m, 1rem) ); } } } } @layer modifiers{ .round-s { border-radius: var(--fs--2); } .round-m { border-radius: var(--fs-0); } .round-l { border-radius: var(--fs-l); } .shadow { box-shadow: var(--box-shadow); } .shadow-pill { box-shadow: var(--box-shadow-pill); } .shadow-pill:hover { box-shadow: var(--box-shadow-pill-hover); } .border-overlay { outline: 1px solid var(--color-border-overlay, rgba(0, 0, 0, 0.1)); outline-offset: -1px; } .aside-column { display: flex; flex-direction: column; gap: var(--space-l); padding: var(--space-l) var(--space-m); } @media (max-width: 1024px) { .aside-column { padding: var(--space-l) 0; } } @media (min-width: 768px) { .aside-column--sticky { align-self: start; padding-top: 0; } /* Match main copy column pt-xl until the aside pins */ .aside-column--sticky .aside-column__sticky { padding-top: var(--space-xl); } .aside-column--sticky .aside-column__sticky.is-pinned { padding-top: 0; } @media (prefers-reduced-motion: reduce) { .aside-column__sticky { position: sticky; top: calc(var(--desktop-nav-height, 8rem) + var(--space-m)); } .aside-column__sticky.is-pinned { padding-top: 0; } } } /* Grid border utilities - only show on desktop */ .grid-border-right, .border-right { border-right: 1px solid var(--color-text-page, var(--color-ink, #000)); } .grid-border-bottom, .border-bottom { border-bottom: 1px solid var(--color-text-page, var(--color-ink, #000)); } .grid-border-left, .border-left { border-left: 1px solid var(--color-text-page, var(--color-ink, #000)); } .grid-border-top, .border-top { border-top: 1px solid var(--color-text-page, var(--color-ink, #000)); } /* Hide on mobile */ @media (max-width: 1024px) { .grid-border-right, .grid-border-bottom, .grid-border-left, .grid-border-top { border: none; } .grid-mobile-border-right { border-right: 1px solid var(--color-text-page, var(--color-ink, #000)); } .grid-mobile-border-bottom { border-bottom: 1px solid var(--color-text-page, var(--color-ink, #000)); } .grid-mobile-border-left { border-left: 1px solid var(--color-text-page, var(--color-ink, #000)); } .grid-mobile-border-top { border-top: 1px solid var(--color-text-page, var(--color-ink, #000)); } } /* Skip to main content - off-screen until focused (keyboard / EEA accessibility) */ .skip-link { position: absolute; top: 0; left: -9999px; z-index: 9999; padding: var(--space-s, 0.5rem) var(--space-m, 1rem); background: var(--color-canvas, #fff); color: var(--color-ink, #000); font-weight: 500; text-decoration: none; border: 2px solid currentColor; } .skip-link:focus-visible { left: var(--space-m, 1rem); top: var(--space-m, 1rem); outline-offset: 2px; } /* Screen reader only - visually hide but keep accessible to assistive tech */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Keep short phrases (e.g. "Season 2") on one line */ .nowrap { white-space: nowrap; } /* Reduce single-word widows/orphans in headings and labels */ .text-pretty { text-wrap: pretty; } /* change the cursor to indicate clickability */ .pointer { cursor: pointer; } /* Responsive visibility utilities */ /* Hide on mobile (≤767px) */ .hide-mobile { @media (max-width: 767px) { display: none !important; } } /* Show only on mobile (≤767px) */ .show-mobile { display: none !important; @media (max-width: 767px) { display: block !important; } } /* Show only on mobile as flex */ .show-mobile-flex { display: none !important; @media (max-width: 767px) { display: flex !important; } } /* Show only on mobile as inline */ .show-mobile-inline { display: none !important; @media (max-width: 767px) { display: inline !important; } } /* Show only on mobile as inline-block */ .show-mobile-inline-block { display: none !important; @media (max-width: 767px) { display: inline-block !important; } } /* Hide on desktop (≥768px) */ .hide-desktop { @media (min-width: 768px) { display: none !important; } } /* Show only on desktop (≥768px) */ .show-desktop { display: none !important; @media (min-width: 768px) { display: block !important; } } /* Show only on desktop as flex */ .show-desktop-flex { display: none !important; @media (min-width: 768px) { display: flex !important; } } /* Show only on desktop as inline */ .show-desktop-inline { display: none !important; @media (min-width: 768px) { display: inline !important; } } /* Show only on desktop as inline-block */ .show-desktop-inline-block { display: none !important; @media (min-width: 768px) { display: inline-block !important; } } } @layer text{ /** * Shared prose rules for frontend `.text` and CKEditor `.ck-content`. * Unlayered so CP editor styles beat CKEditor’s default unlayered rules. * Imported by main.css (layer text) and config/ckeditor/rich-text-content.css (unlayered). */ /* Prose roots — typography only; colour utilities (e.g. .text-canvas) live in colour.css */ :is(.text, .ck-content) { font-family: var(--font-family-ttnorms); letter-spacing: var(--letter-spacing); line-height: var(--line-height); } /* Default CP editor colours; frontend inherits from section/theme utilities */ .ck-content { color: var(--color-ink); } .ck-content a { color: var(--color-steel-500); text-decoration-thickness: from-font; } :is(.text, .ck-content) > * + * { margin-top: var(--space-m); } :is(.text, .ck-content) > h1, :is(.text, .ck-content) > h2, :is(.text, .ck-content) > h3, :is(.text, .ck-content) > h4, :is(.text, .ck-content) > h5, :is(.text, .ck-content) > h6 { margin-top: var(--space-xl); } :is(.text, .ck-content) > p:empty { display: none; margin: 0; padding: 0; height: 0; line-height: 0; } :is(.text, .ck-content) > p:not(:empty) { margin-top: var(--space-m); } :is(.text, .ck-content) > ul, :is(.text, .ck-content) > ol { margin: var(--space-s) 0; padding: 0; } :is(.text, .ck-content) > dl { padding-left: 0; } :is(.text, .ck-content) ul li, :is(.text, .ck-content) ol li, :is(.text, .ck-content) > dl dt { margin-top: var(--space-xs); } :is(.text, .ck-content) > dl dt { font-weight: 700; } :is(.text, .ck-content) ul li:first-child, :is(.text, .ck-content) ol li:first-child, :is(.text, .ck-content) > dl dt:first-child { margin-top: 0; } :is(.text, .ck-content) ul ul, :is(.text, .ck-content) ul ol, :is(.text, .ck-content) ol ul, :is(.text, .ck-content) ol ol { margin: var(--space-xs) 0; } :is(.text, .ck-content) > blockquote:not(.text-pull-quote) { margin: var(--space-l) var(--space-m); padding-left: var(--space-m); border-left: 3px solid currentColor; font-style: italic; } :is(.text, .ck-content) > blockquote:not(.text-pull-quote) p { margin: 0; font-family: var(--font-family-ttnorms); font-size: var(--fs-0); line-height: var(--line-height); letter-spacing: var(--letter-spacing); font-style: italic; } :is(.text, .ck-content) > blockquote:not(.text-pull-quote) p + p { margin-top: var(--space-m); } :is(.text, .ck-content) > blockquote.text-pull-quote { position: relative; margin: var(--space-l) 0 var(--space-l) var(--space-m); padding-left: 0; border-left: none; font-style: normal; overflow-wrap: break-word; } :is(.text, .ck-content) > blockquote.text-pull-quote p { margin: 0; font-family: var(--font-family-abril); font-size: var(--fs-2); line-height: var(--line-height-tightest); font-style: normal; } :is(.text, .ck-content) > blockquote.text-pull-quote p + p { margin-top: var(--space-m); } :is(.text, .ck-content) > pre { margin-top: var(--space-m); padding: var(--space-m); overflow-x: auto; } :is(.text, .ck-content) code { padding: 0.125em 0.25em; font-size: 0.875em; } :is(.text, .ck-content) > img, :is(.text, .ck-content) > figure { margin-top: var(--space-l); margin-bottom: var(--space-l); } :is(.text, .ck-content) > figure > img { margin: 0; } :is(.text, .ck-content) figcaption { margin-top: var(--space-2xs); font-size: var(--fs--1); font-style: normal; color: var(--color-text-muted, var(--color-navy-300)); } .text iframe[src*="youtube.com"], .text iframe[src*="youtu.be"], .text iframe[src*="vimeo.com"], .text iframe[src*="genial"], .text iframe[src*="issuu.com"] { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; margin-block: var(--space-l); border: 0; } .text > figure.media > iframe { display: block; width: 100%; max-width: 100%; min-height: 24rem; margin: 0; border: 0; } :is(.text, .ck-content) > hr { margin-top: var(--space-xl); margin-bottom: var(--space-xl); border: none; border-top: 1px solid currentColor; opacity: 0.2; } :is(.text, .ck-content) > table { margin-top: var(--space-l); margin-bottom: var(--space-l); width: 100%; border-collapse: collapse; } :is(.text, .ck-content) table th, :is(.text, .ck-content) table td { padding: var(--space-xs) var(--space-s); text-align: left; border-bottom: 1px solid currentColor; } :is(.text, .ck-content) table th { font-weight: 600; } :is(.text, .ck-content) > .download-inline { margin: var(--space-xl) 0 var(--space-m) 0; } :is(.text, .ck-content) > h6 { font-size: var(--fs--1); line-height: var(--line-height); } :is(.text, .ck-content) > h5, :is(.text, .ck-content) > p, :is(.text, .ck-content) > ul { font-size: var(--fs-0); line-height: var(--line-height); letter-spacing: var(--letter-spacing); } :is(.text, .ck-content) ul, :is(.text, .ck-content) ul ul, :is(.text, .ck-content) ul ul ul { list-style-type: square; list-style-position: outside; padding: 0; padding-left: var(--space-m); margin-left: 0; } :is(.text, .ck-content) ul > li::marker { color: var(--color-text-accent, var(--color-navy-500)); } :is(.text, .ck-content) ul ul li::marker { color: var(--color-teal-500); font-size: 0.875em; } :is(.text, .ck-content).text-canvas ul li::marker { color: var(--color-canvas); } :is(.text, .ck-content) ol { list-style: decimal; list-style-position: outside; padding-left: var(--space-m); } :is(.text, .ck-content) ol li::marker { font-weight: bold; } :is(.text, .ck-content) ol ol li::marker, :is(.text, .ck-content) ul ol li::marker { color: var(--color-teal-500); font-size: 0.875em; } :is(.text, .ck-content).text-canvas ol li::marker { color: var(--color-canvas); } :is(.text, .ck-content) > h5 { font-size: var(--fs--1); line-height: var(--line-height); } :is(.text, .ck-content).fs-sm > :is(p, ul, ol, h4, h5) { font-size: var(--fs--1); line-height: var(--line-height); } :is(.text, .ck-content) > h4 { font-size: var(--fs-0); line-height: var(--line-height); } :is(.text, .ck-content) > h3 { font-size: var(--fs-1); line-height: var(--line-height-tight); } :is(.text, .ck-content) > h2 { font-size: var(--fs-2); line-height: var(--line-height-tighter); letter-spacing: var(--letter-spacing-tighter); } :is(.text, .ck-content) > h1 { font-size: var(--fs-3); line-height: var(--line-height-tighter); letter-spacing: var(--letter-spacing-tighter); } :is(.text, .ck-content) > h4, :is(.text, .ck-content) > h5 { font-weight: 700; } :is(.text, .ck-content) > :first-child:not(script):not(style) { margin-top: 0; } @media (min-width: 1024px) { :is(.text, .ck-content) > blockquote.text-pull-quote { float: right; clear: right; width: min(22rem, 50%); max-width: min(22rem, 50%); margin: var(--space-m) 0 var(--space-m) var(--space-m); } :is(.text, .ck-content) > figure.image--float { max-width: 50%; float: right; margin-left: var(--space-m); } :is(.text, .ck-content) > figure.image--floatLeft { max-width: 50%; float: left; margin-right: var(--space-m); } :is(.text, .ck-content) > figure.image--float:first-child + h3, :is(.text, .ck-content) > figure.image--floatLeft:first-child + h3 { margin-top: 0 !important; } } } @layer text{ /* NB > any 'rich' text is defined in text-prose.css */ @layer text { body { font-family: var(--font-family-ttnorms); line-height: var(--line-height); -webkit-font-smoothing: antialiased; } sup, sub { font-size: calc(0.5em + 4px); vertical-align: baseline; position: relative; top: calc(-0.5 * 0.83 * 2 * (1em - 4px)); /* Simplified top: calc(-0.83em + 3.32px) */ } sub { top: calc(0.25 * 0.83 * 2 * (1em - 4px)); /* Simplified top: calc(0.42em - 1.66px) */ } .balanced { /* max-inline-size: 50ch; */ text-wrap: balance; } .text-center { text-align: center; } .text-bold, .bold { font-weight: 700; } /* Font size utilities */ .fs-xs { font-size: var(--fs--2); line-height: var(--line-height); } .fs-sm { font-size: var(--fs--1); line-height: var(--line-height); } body, .fs-base { font-size: var(--fs-0); line-height: var(--line-height); letter-spacing: var(--letter-spacing); } .fs-xs { font-size: var(--fs--2); line-height: var(--line-height); } .fs-sm { font-size: var(--fs--1); line-height: var(--line-height); } .fs-base { font-size: var(--fs-0); line-height: var(--line-height); } .fs-md { font-size: var(--fs-1); line-height: var(--line-height-tight); } .fs-lg { font-size: var(--fs-2); line-height: var(--line-height-tighter); letter-spacing: var(--letter-spacing-tighter); } .fs-xl { font-size: var(--fs-3); line-height: var(--line-height-tighter); letter-spacing: var(--letter-spacing-tighter); } .fs-2xl { font-size: var(--fs-4); line-height: var(--line-height-tightest); letter-spacing: var(--letter-spacing-tighter); } .fs-3xl { font-size: var(--fs-5); line-height: var(--line-height-tightest); letter-spacing: var(--letter-spacing-tighter); } .fs-4xl { font-size: var(--fs-6); line-height: var(--line-height-tightest); letter-spacing: var(--letter-spacing-tighter); } @media screen and (max-width: 767px) { .fs-mobile-sm { font-size: var(--fs--1); } } .font-abril { font-family: var(--font-family-abril); font-weight: bold; font-variant-numeric: proportional-nums lining-nums; } .c-quote { position: relative; margin: 0 0 var(--space-l) 0; container-type: inline-size; } figure.c-quote .c-quote__text p { margin: 0; font-family: var(--font-family-abril); font-size: var(--fs-3); line-height: var(--line-height-tightest); font-style: normal; } .c-quote__meta { margin-top: var(--space-l); } .c-quote__author { font-weight: 700; } .c-quote__role { font-weight: 400; margin-left: 0.5rem; } .c-quote__person { display: inline-flex; align-items: center; gap: var(--space-s); } .c-quote__avatar { flex: 0 0 auto; width: clamp(var(--fs-3), 15cqi, var(--fs-6)); height: clamp(var(--fs-3), 15cqi, var(--fs-6)); overflow: hidden; } .c-quote__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .c-quote__person-text { display: flex; flex-direction: column; font-size: var(--fs-0); } .c-quote__person-text .c-quote__role { margin-left: 0; } .c-quote__icon { width: clamp(var(--fs-3), 15cqi, var(--fs-5)); height: clamp(var(--fs-3), 15cqi, var(--fs-5)); margin-bottom: var(--space-m); } .statement-section p { font-size: clamp(var(--fs-1), 4vw, var(--fs-3)); } } } @layer containers{ @layer containers { .container { padding-left: var(--space-m); padding-right: var(--space-m); } .card { padding: var(--space-l); background: var(--color-white); } .section { position: relative; /* background-color: var(--color-steel-100); */ } .card { background-color: var(--color-orange-100); } .full-width-video { overflow: hidden; padding-inline: 0; } /* 16:9 stage so Vimeo background iframe has height outside the hero layout */ .full-width-video--vimeo { position: relative; aspect-ratio: 16 / 9; background: oklch(var(--lch-navy-500)); } .full-width-video__vimeo-inner { position: absolute; inset: 0; overflow: hidden; } .full-width-video__vimeo-inner iframe { box-sizing: border-box; width: 177.77777778vh; height: 56.25vw; min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; } .full-width-video__loading { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); background: oklch(var(--lch-navy-500)); color: var(--color-canvas); font-weight: 500; letter-spacing: 0.02em; transition: opacity 0.45s ease-out, visibility 0.45s ease-out; } .full-width-video__loading-spinner { box-sizing: border-box; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid rgb(255 255 255 / 0.22); border-top-color: var(--color-canvas); animation: full-width-video-spinner-rotate 0.7s linear infinite; } @keyframes full-width-video-spinner-rotate { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .full-width-video__loading-spinner { animation: none; opacity: 0.9; } } .full-width-video__vimeo-inner.loaded .full-width-video__loading, .full-width-video--file.loaded .full-width-video__loading { opacity: 0; visibility: hidden; pointer-events: none; } .full-width-video__consent-message { display: none; margin: 0; max-width: 28ch; padding-inline: var(--space-m); text-align: center; line-height: 1.45; } .full-width-video__consent-link { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; font-weight: 600; padding: 0; text-decoration: underline; text-underline-offset: 0.15em; } .full-width-video__consent-link:hover, .full-width-video__consent-link:focus-visible { opacity: 0.85; } .full-width-video__loading--consent .full-width-video__loading-spinner, .full-width-video__loading--consent .full-width-video__loading-text { display: none; } .full-width-video__loading--consent .full-width-video__consent-message { display: block; } [data-decorative-video][data-vimeo-consent-blocked] .decorative-video__control { display: none; } .full-width-video--file { position: relative; } .full-width-video--file .full-width-video__media { position: relative; z-index: 1; } /* Content player: same full-bleed stage; iframe fits 16:9 instead of cover-crop. */ .full-width-video--content .full-width-video__vimeo-inner iframe { box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; position: absolute; inset: 0; transform: none; border: 0; } .full-width-video__media { display: block; width: 100%; height: auto; } /* Same overlay treatment as image-slider captions */ .full-width-video__caption { position: absolute; left: var(--space-m, 1.5rem); top: var(--space-m, 1.5rem); z-index: 3; max-width: calc(100% - (var(--space-m, 1.5rem) * 2)); margin: 0; padding: 0.35em 0.55em; text-align: left; text-wrap: balance; background: rgba(0, 0, 0, 0.55); pointer-events: none; } @media (max-width: 767px) { .full-width-video__caption { left: var(--space-s, 1rem); top: var(--space-s, 1rem); max-width: calc(100% - (var(--space-s, 1rem) * 2)); } } /* WCAG 2.2.2: pause/play for decorative autoplay video */ .decorative-video__control { position: absolute; left: 50%; top: 50%; z-index: 12; display: inline-flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem; padding: 0; border: 2px solid rgb(255 255 255 / 0.9); border-radius: 100%; background: oklch(var(--lch-navy-800) / 0.8); color: var(--color-canvas); cursor: pointer; pointer-events: auto; transform: translate(-50%, -50%); opacity: 0; /* Stay focusable when hidden — visibility:hidden removes the control from tab order */ pointer-events: none; transition: opacity 0.25s ease, background-color 0.2s ease, border-color 0.2s ease; } [data-decorative-video]:hover .decorative-video__control, [data-decorative-video]:focus-within .decorative-video__control, [data-decorative-video].decorative-video--paused .decorative-video__control, .decorative-video__control:focus { opacity: 1; pointer-events: auto; } .decorative-video__control:hover, .decorative-video__control:focus-visible { background: oklch(var(--lch-navy-800) / 0.95); border-color: var(--color-canvas); } .decorative-video__control:focus-visible { outline: 2px solid var(--color-canvas); outline-offset: 2px; } .decorative-video__control-icon { width: 1.75rem; height: 1.75rem; display: block; } .decorative-video__control-icon--play { display: none; } .decorative-video__control[aria-pressed="true"] .decorative-video__control-icon--pause { display: none; } .decorative-video__control[aria-pressed="true"] .decorative-video__control-icon--play { display: block; } [data-decorative-video].decorative-video--paused .hero__video-wrapper.loaded ~ .hero__image--fallback, .hero.decorative-video--paused .hero__video-wrapper.loaded ~ .hero__image--fallback { opacity: 1; } [data-decorative-video].decorative-video--paused .hero-split__video-wrapper.loaded ~ .hero-split__image--background, .hero-split__media.decorative-video--paused .hero-split__video-wrapper.loaded ~ .hero-split__image--background { opacity: 1; } @media (prefers-reduced-motion: reduce) { .decorative-video__control { transition: opacity 0.01s ease, background-color 0.2s ease, border-color 0.2s ease; } } .hero { position: relative; overflow: hidden; } .hero__background { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: oklch(var(--lch-navy-500)); } .hero__video-wrapper { position: absolute; inset: 0; overflow: hidden; z-index: 1; } .hero__video-wrapper iframe { box-sizing: border-box; width: 177.77777778vh; height: 56.25vw; min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__image--fallback { opacity: 1; z-index: 0; transition: opacity 0.6s ease-out; } .hero__video-wrapper.loaded ~ .hero__image--fallback { opacity: 0; } .hero__overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, oklch(var(--lch-navy-500) / 0.4), oklch(var(--lch-navy-800) / 0.6) ); mix-blend-mode: multiply; } /* Full-bleed hero: theme background (alternative to image/video; aligns with hero-split) */ .hero--theme-navy .hero__background { background: var(--color-navy-500); } .hero--theme-steel .hero__background { background: var(--color-steel-500); } .hero--theme-emerald .hero__background { background: var(--color-emerald-500); } .hero--theme-green .hero__background { background: var(--color-green-500); } .hero--theme-teal .hero__background { background: var(--color-teal-500); } .hero--theme-steel .hero__overlay { background: linear-gradient( 180deg, oklch(var(--lch-steel-500) / 0.4), oklch(var(--lch-steel-800) / 0.6) ); } .hero--theme-emerald .hero__overlay { background: linear-gradient( 180deg, oklch(var(--lch-emerald-500) / 0.4), oklch(var(--lch-emerald-800) / 0.6) ); } .hero--theme-green .hero__overlay { background: linear-gradient( 180deg, oklch(var(--lch-green-500) / 0.4), oklch(var(--lch-green-800) / 0.6) ); } .hero--theme-teal .hero__overlay { background: linear-gradient( 180deg, oklch(var(--lch-teal-500) / 0.4), oklch(var(--lch-teal-800) / 0.6) ); } .hero--solid-theme .hero__overlay { display: none; } /* * Full-bleed hero (hero.twig): copy sits in .hero__inner over .hero__background. * With no Theme field, background stays the default navy tint — use navy link accents. * With hero--theme-steel | emerald | green | teal | navy, match hero-split / utility themed sections. */ .hero:not(.hero-split) .hero__inner a { color: var(--color-navy-200); } .hero:not(.hero-split) .hero__inner a svg { fill: var(--color-navy-200); } .hero:not(.hero-split).hero--theme-steel .hero__inner a { color: var(--color-steel-200); } .hero:not(.hero-split).hero--theme-steel .hero__inner a svg { fill: var(--color-steel-200); } .hero:not(.hero-split).hero--theme-emerald .hero__inner a { color: var(--color-emerald-200); } .hero:not(.hero-split).hero--theme-emerald .hero__inner a svg { fill: var(--color-emerald-200); } .hero:not(.hero-split).hero--theme-green .hero__inner a { color: var(--color-green-200); } .hero:not(.hero-split).hero--theme-green .hero__inner a svg { fill: var(--color-green-200); } .hero:not(.hero-split).hero--theme-teal .hero__inner a { color: var(--color-teal-200); } .hero:not(.hero-split).hero--theme-teal .hero__inner a svg { fill: var(--color-teal-200); } .hero__inner { position: relative; z-index: 1; } .hero-section { min-height: 80vh; } .hero-section--compact { min-height: 60vh; } .hero-section.hero-section--compact { /* justify-content: flex-start; */ padding-top: calc(var(--desktop-nav-height) + var(--space-xl)); padding-bottom: var(--space-2xl); } .hero--simple .hero__overlay { display: none; } .hero__bar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: var(--space-l) 0; } .hero__bar-inner { position: relative; } .hero__bar-inner .grid { --grid-columns: 4; } .hero__bar-caret { display: flex; align-items: center; justify-content: flex-end; } .hero__bar-caret-icon { color: var(--color-canvas); width: var(--fs-3); /* height: var(--fs-3); */ } .hero__bar-text { color: var(--color-canvas); font-size: var(--font-size); line-height: var(--line-height); } .hero__media-credit { position: absolute; right: var(--content-width-padding); bottom: var(--space-m); z-index: 11; max-width: 42ch; text-align: right; text-wrap: balance; } /* * Zoom / long titles: credit drops into document flow under the headline with * the same horizontal inset as .content-width (browser zoom does not fire MQs). */ .hero-section.hero--credit-stacked { justify-content: flex-start; } .hero-section.hero--credit-stacked .hero__media-credit { position: static; z-index: 1; max-width: 42ch; text-align: left; margin: var(--space-m) 0 0; padding-left: var(--content-width-padding); padding-right: var(--content-width-padding); align-self: stretch; box-sizing: border-box; } @media screen and (max-width: 768px) { .hero__bar { padding: var(--space-m) 0; } .hero__bar-inner .grid { --grid-columns: 1; } .hero__bar-text { font-size: calc(var(--font-size) * 0.875); } .hero__bar-caret--hidden-mobile { display: none; } .hero__bar-text--mobile { margin-bottom: var(--space-xs); } .hero__bar-text--mobile:last-child { margin-bottom: 0; } .hero__media-credit { right: 4vw; bottom: var(--space-s); max-width: calc(100vw - 8vw); } .hero-section.hero--credit-stacked .hero__media-credit { padding-left: 4vw; padding-right: 4vw; max-width: none; margin-bottom: var(--space-s); } } /* Hero Split Layout */ .hero-split { background: var(--color-canvas); } .hero-split__container { display: flex; align-items: stretch; min-height: 70vh; height: 100%; position: relative; } .hero-split__content { flex: 0 0 50%; display: flex; align-items: flex-end; padding-left: var(--content-width-padding); padding-right: 5vw; padding-top: calc(var(--space-4xl) + var(--space-2xl)); padding-bottom: var(--space-2xl); position: relative; z-index: 1; } /* Media container with layered images */ .hero-split__media { flex: 0 0 50%; position: relative; overflow: hidden; } .hero-split__video-wrapper { position: absolute; inset: 0; overflow: hidden; z-index: 1; } .hero-split__video-wrapper iframe { box-sizing: border-box; width: 177.77777778vh; height: 56.25vw; min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .hero-split__picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .hero-split__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } @media (min-width: 1025px) { .hero-split--has-image-overlay .hero-split__image { object-position: left !important; } } .hero-split__image--background { z-index: 1; opacity: 1; transition: opacity 0.6s ease-out; } .hero-split__video-wrapper.loaded ~ .hero-split__image--background { opacity: 0; } .hero-split__image--overlay { z-index: 2; pointer-events: none; } /* Gradient overlay for better nav visibility */ .hero-split__media::after { content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100% ); pointer-events: none; } .hero-split--no-tinted-overlay .hero-split__media::after { content: none; } .hero-split__brand-device { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 4; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; } .hero-split__media-credit { position: absolute; right: var(--space-m); bottom: var(--space-m); z-index: 11; max-width: calc(100% - (var(--space-m) * 2)); text-align: right; text-wrap: balance; } .hero-split__meta { display: inline-flex; gap: 0.35em; align-items: baseline; } .hero-split__meta a { display: flex; } .hero-split__meta a svg { display: inline-flex; width: var(--fs-1); height: var(--fs-1); } .hero-split__meta-channel-link svg { transition: transform 0.2s ease; } .hero-split__meta-channel-link:hover svg, .hero-split__meta-channel-link:focus-visible svg { transform: translateX(var(--space-s)); } @media (prefers-reduced-motion: reduce) { .hero-split__meta-channel-link svg { transition: none; } } /* Themed left panel backgrounds */ .hero-split--theme-steel .hero-split__content { background-color: var(--color-steel-500); color: var(--color-canvas); } .hero-split--theme-navy .hero-split__content { background-color: var(--color-navy-500); color: var(--color-canvas); } .hero-split--theme-emerald .hero-split__content { background-color: var(--color-emerald-500); color: var(--color-canvas); } .hero-split--theme-green .hero-split__content { background-color: var(--color-green-500); color: var(--color-canvas); } .hero-split--theme-teal .hero-split__content { background-color: var(--color-teal-500); color: var(--color-canvas); } .hero-split--theme-canvas .hero-split__content { background-color: var(--color-canvas); color: var(--color-ink); } /* Hero split: links read off canvas copy using lighter brand tints */ .hero-split--theme-steel .hero-split__content a { color: var(--color-steel-200); } .hero-split--theme-steel .hero-split__content a svg { fill: var(--color-steel-200); } .hero-split--theme-navy .hero-split__content a { color: var(--color-navy-200); } .hero-split--theme-navy .hero-split__content a svg { fill: var(--color-navy-200); } .hero-split--theme-emerald .hero-split__content a { color: var(--color-emerald-200); } .hero-split--theme-emerald .hero-split__content a svg { fill: var(--color-emerald-200); } .hero-split--theme-green .hero-split__content a { color: var(--color-green-200); } .hero-split--theme-green .hero-split__content a svg { fill: var(--color-green-200); } .hero-split--theme-teal .hero-split__content a { color: var(--color-teal-200); } .hero-split--theme-teal .hero-split__content a svg { fill: var(--color-teal-200); } /* .hero-split--theme-canvas .hero-split__content a { color: var(--color-teal-500); } .hero-split--theme-canvas .hero-split__content a svg { fill: var(--color-teal-500); } */ .hero-split__channel a { text-decoration: none; } .hero-split__channel a:hover { text-decoration: underline; } /* Responsive layout - tablet/mobile stacking */ @media screen and (max-width: 1024px) { .hero-split__container { flex-direction: column; } .hero-split__content { flex: 1 1 auto; min-height: auto; padding: var(--space-2xl) 10vw var(--space-2xl) var(--content-width-margin-mobile); order: 2; /* Content comes after image */ } .hero-split__content-inner { max-width: 100%; } .hero-split__media { flex: 1 1 auto; min-height: 60vh; order: 1; /* Image comes first, behind header */ min-height: 50vh; } .hero-split__image--overlay { display: none; } .hero-split__brand-device { left: auto; right: 0; bottom: 50%; transform: translateY(50%); align-items: center; justify-content: flex-end; } .hero-split__brand-device .brand-device { --device-size: 4rem !important; --device-rotation: 180deg !important; } .hero-split__media-credit { right: 4vw; bottom: var(--space-s); max-width: calc(100vw - 8vw); } } /* Mobile - match nav 4vw padding */ @media screen and (max-width: 767px) { .hero-split__content { padding: var(--space-xl) 4vw; } } /* Title-Copy block: flex column aside; brand device in flow at bottom (not absolute) */ .title-copy__aside { display: flex; flex-direction: column; min-height: 0; } .title-copy__brand-device { display: none; flex-shrink: 0; margin-top: auto; padding-top: var(--space-m); } .title-copy--reverse .title-copy__brand-device { align-self: flex-end; } @media screen and (max-width: 767px) { .title-copy__aside { height: auto; } } @media screen and (min-width: 768px) { .title-copy__aside--device-fits .title-copy__brand-device { display: block; } } /* Title-Copy: reverse — copy column first (left in LTR grid), title aside second */ .title-copy--reverse .title-copy__main { order: 1; } .title-copy--reverse .title-copy__aside { order: 2; } } } @layer button{ @layer button { .button-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); } .button-group .button { margin: 0; } .button { align-items: center; background: var(--color-steel-500); color: var(--color-canvas); cursor: pointer; display: inline-flex; font-family: var(--font-family-ttnorms); font-feature-settings: normal; font-size: var(--fs--1); font-weight: 600; justify-content: center; letter-spacing: 0.025em; line-height: 1.05em; pointer-events: auto; position: relative; text-decoration: none; text-transform: none; user-select: none; -webkit-user-select: none; } .button span { margin-bottom: -0.1625em; margin-top: -0.1875em; padding: 0.7375em 1.0875em; } .button--ghost, .button--ghost span { padding: 0; margin: 0; } /* * Icon buttons — text block + attached icon square (single control). * Override padding via the custom properties below. */ .button.button--icon { --button-icon-text-bg: var(--color-navy-500); --button-icon-text-bg-hover: var(--color-navy-700); --button-icon-icon-bg: var(--color-steel-500); --button-icon-icon-bg-hover: var(--color-steel-700); --button-icon-text-padding-block: 0.7375em; --button-icon-text-padding-inline: 1.0875em; --button-icon-square-padding: 0.5875em; --button-icon-glyph-size: 1.15em; --button-icon-square-size: calc( var(--button-icon-text-padding-block) * 2 + 1.05em ); align-items: stretch; background: transparent; gap: 0; padding: 0; } .button.button--icon[data-theme="navy"] { --button-icon-text-bg: var(--color-navy-500); --button-icon-text-bg-hover: var(--color-navy-700); --button-icon-icon-bg: var(--color-navy-700); --button-icon-icon-bg-hover: var(--color-navy-800); } .button.button--icon[data-theme="steel"] { --button-icon-text-bg: var(--color-steel-500); --button-icon-text-bg-hover: var(--color-steel-700); --button-icon-icon-bg: var(--color-steel-700); --button-icon-icon-bg-hover: var(--color-steel-800); } .button.button--icon[data-theme="emerald"] { --button-icon-text-bg: var(--color-emerald-500); --button-icon-text-bg-hover: var(--color-emerald-700); --button-icon-icon-bg: var(--color-emerald-700); --button-icon-icon-bg-hover: var(--color-emerald-800); } .button.button--icon span { align-items: center; background-color: var(--button-icon-text-bg); display: flex; flex: 0 0 auto; margin: 0; padding: var(--button-icon-text-padding-block) var(--button-icon-text-padding-inline); } .button.button--icon svg { background-color: var(--button-icon-icon-bg); box-sizing: border-box; display: block; flex: 0 0 var(--button-icon-square-size); height: var(--button-icon-square-size); margin: 0; max-height: none; padding: var(--button-icon-square-padding); width: var(--button-icon-square-size); } .button.button--icon svg use { fill: currentColor; } .button.button--large { font-size: var(--font-size-x-small); } .button.button--large span { margin-bottom: -0.1125em; margin-top: -0.2em; padding: 0.8375em 1.1875em; } .button.button--large.button--icon { --button-icon-text-padding-block: 0.8375em; --button-icon-text-padding-inline: 1.1875em; --button-icon-square-padding: 0.675em; } .button.button--icon.icon--expanded svg { transform: rotate(180deg); } .button.button--outline { background: var(--color-canvas-light, var(--color-canvas)); outline: 1px solid var(--color-ink); outline-offset: -1px; color: var(--color-text-page, var(--color-ink)); } .button.button--icon.button--outline { --button-icon-text-bg: var(--color-canvas-light, var(--color-canvas)); --button-icon-text-bg-hover: var(--color-canvas); --button-icon-icon-bg: var(--color-canvas-light, var(--color-canvas)); --button-icon-icon-bg-hover: var(--color-canvas); background: transparent; color: var(--color-text-page, var(--color-ink)); outline: 1px solid var(--color-ink); outline-offset: -1px; } .button--ghost, .button--ghost span { background: transparent; color: var(--color-text-page, var(--color-ink)); text-decoration: none; text-transform: none; } .button.button--icon.button--ghost { gap: 0.35em; } .button.button--icon.button--ghost span, .button.button--icon.button--ghost svg { background-color: transparent; } .button.button--icon.button--ghost span { padding: 0; } .button.button--icon.button--ghost svg { align-self: center; aspect-ratio: auto; height: var(--button-icon-glyph-size); padding: 0; width: var(--button-icon-glyph-size); } @media (hover: hover) { .button { transition: background var(--transition), box-shadow var(--transition), color var(--transition), transform var(--transition); will-change: transform; } .button:hover, .button:focus-visible { background: var(--color-navy-800); color: var(--color-canvas); } .button:active { transform: scale(0.98) translateY(0.0125em); } .button.button--outline:hover, .button.button--outline:focus-visible { background: var(--color-canvas); box-shadow: var(--box-shadow-pill-hover); color: var(--color-text-page, var(--color-ink)); } .button.button--ghost:hover, .button.button--ghost:focus-visible { color: var(--color-text-page, var(--color-ink)); background-color: transparent !important; } .button.button--icon { transition: color var(--transition), transform var(--transition); } .button.button--icon span, .button.button--icon svg { transition: background-color var(--transition), transform 0.2s ease; } .button.button--icon:hover, .button.button--icon:focus-visible { background: transparent; color: var(--color-canvas); } .button.button--icon:hover span, .button.button--icon:focus-visible span { background-color: var(--button-icon-text-bg-hover); } .button.button--icon:hover svg, .button.button--icon:focus-visible svg { background-color: var(--button-icon-icon-bg-hover); } .button.button--icon.button--ghost:hover, .button.button--icon.button--ghost:focus-visible { color: var(--color-text-page, var(--color-ink)); } .button.button--icon.button--ghost:hover span, .button.button--icon.button--ghost:focus-visible span, .button.button--icon.button--ghost:hover svg, .button.button--icon.button--ghost:focus-visible svg { background-color: transparent; } .button.button--icon.button--outline:hover, .button.button--icon.button--outline:focus-visible { background: transparent; box-shadow: var(--box-shadow-pill-hover); color: var(--color-text-page, var(--color-ink)); } .button.button--icon.button--outline:hover span, .button.button--icon.button--outline:focus-visible span, .button.button--icon.button--outline:hover svg, .button.button--icon.button--outline:focus-visible svg { background-color: var(--color-canvas); } } /* @media (prefers-color-scheme: dark) { .button { color: var(--color-navy-200); } @media (hover: hover) { .button:focus, .button:hover { color: var(--color-ink); } } } */ } } @layer swiper{ /** * Swiper 12.0.3 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2025 Vladimir Kharlampidi * * Released under the MIT License * * Released on: October 21, 2025 */ :root { --swiper-theme-color: var(--color-canvas); } :host { display: block; margin-left: auto; margin-right: auto; position: relative; z-index: 1; } .swiper { display: block; list-style: none; margin-left: auto; margin-right: auto; overflow: hidden; padding: 0; position: relative; z-index: 1; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { box-sizing: initial; display: flex; height: 100%; position: relative; transition-property: transform; transition-timing-function: var( --swiper-wrapper-transition-timing-function, initial ); width: 100%; z-index: 1; } .swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper { transform: translateZ(0); } .swiper-horizontal { touch-action: pan-y; } .swiper-vertical { touch-action: pan-x; } .swiper-slide { display: block; flex-shrink: 0; height: 100%; position: relative; transition-property: transform; width: 100%; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height; } .swiper-backface-hidden .swiper-slide { backface-visibility: hidden; transform: translateZ(0); } .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px; } .swiper-3d .swiper-wrapper { transform-style: preserve-3d; } .swiper-3d { perspective: 1200px; .swiper-cube-shadow, .swiper-slide { transform-style: preserve-3d; } } .swiper-css-mode { > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } } > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } &.swiper-horizontal { > .swiper-wrapper { scroll-snap-type: x mandatory; } } &.swiper-vertical { > .swiper-wrapper { scroll-snap-type: y mandatory; } } &.swiper-free-mode { > .swiper-wrapper { scroll-snap-type: none; } > .swiper-wrapper > .swiper-slide { scroll-snap-align: none; } } &.swiper-centered { > .swiper-wrapper:before { content: ""; flex-shrink: 0; order: 9999; } > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; scroll-snap-stop: always; } } &.swiper-centered.swiper-horizontal { > .swiper-wrapper > .swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before); } > .swiper-wrapper:before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } } &.swiper-centered.swiper-vertical { > .swiper-wrapper > .swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before); } > .swiper-wrapper:before { height: var(--swiper-centered-offset-after); min-width: 1px; width: 100%; } } } .swiper-3d { .swiper-slide-shadow, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left, .swiper-slide-shadow-right, .swiper-slide-shadow-top { height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 10; } .swiper-slide-shadow { background: #00000026; } .swiper-slide-shadow-left { background-image: linear-gradient(270deg, #00000080, #0000); } .swiper-slide-shadow-right { background-image: linear-gradient(90deg, #00000080, #0000); } .swiper-slide-shadow-top { background-image: linear-gradient(0deg, #00000080, #0000); } .swiper-slide-shadow-bottom { background-image: linear-gradient(180deg, #00000080, #0000); } } .swiper-lazy-preloader { border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top: 4px solid #0000; box-sizing: border-box; height: 42px; left: 50%; margin-left: -21px; margin-top: -21px; position: absolute; top: 50%; transform-origin: 50%; width: 42px; z-index: 10; } .swiper-watch-progress .swiper-slide-visible, .swiper:not(.swiper-watch-progress) { .swiper-lazy-preloader { animation: swiper-preloader-spin 1s linear infinite; } } .swiper-lazy-preloader-white { --swiper-preloader-color: #fff; } .swiper-lazy-preloader-black { --swiper-preloader-color: #000; } @keyframes swiper-preloader-spin { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; transform: translateZ(0); } .swiper-virtual.swiper-css-mode { .swiper-wrapper:after { content: ""; left: 0; pointer-events: none; position: absolute; top: 0; } } .swiper-virtual.swiper-css-mode.swiper-horizontal { .swiper-wrapper:after { height: 1px; width: var(--swiper-virtual-size); } } .swiper-virtual.swiper-css-mode.swiper-vertical { .swiper-wrapper:after { height: var(--swiper-virtual-size); width: 1px; } } :root { --swiper-navigation-size: var(--fs-s); } .swiper-button-next, .swiper-button-prev { align-items: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); cursor: pointer; display: flex; height: var(--swiper-navigation-size); justify-content: center; position: absolute; width: var(--swiper-navigation-size); z-index: 10; &.swiper-button-disabled { cursor: auto; color: color-mix( in srgb, var(--swiper-navigation-color, var(--swiper-theme-color)) 35%, transparent ); opacity: 1; pointer-events: none; } &.swiper-button-hidden { cursor: auto; opacity: 0; pointer-events: none; } .swiper-navigation-disabled & { display: none !important; } svg { height: 100%; object-fit: contain; transform-origin: center; width: 100%; fill: currentColor; pointer-events: none; } } .swiper-button-lock { display: none; } .swiper-button-next, .swiper-button-prev { margin-top: calc(0px - var(--swiper-navigation-size) / 2); top: var(--swiper-navigation-top-offset, 50%); } .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 4px); right: auto; .swiper-navigation-icon { transform: rotate(180deg); } } .swiper-button-next { left: auto; right: var(--swiper-navigation-sides-offset, 4px); } .swiper-horizontal { .swiper-button-next, .swiper-button-prev, ~ .swiper-button-next, ~ .swiper-button-prev { margin-left: 0; margin-top: calc(0px - var(--swiper-navigation-size) / 2); top: var(--swiper-navigation-top-offset, 50%); } &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next, & ~ .swiper-button-prev, .swiper-button-prev { left: var(--swiper-navigation-sides-offset, 4px); right: auto; } &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev, & ~ .swiper-button-next, .swiper-button-next { left: auto; right: var(--swiper-navigation-sides-offset, 4px); } &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next, & ~ .swiper-button-prev, .swiper-button-prev { .swiper-navigation-icon { transform: rotate(180deg); } } &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev { .swiper-navigation-icon { transform: rotate(0deg); } } } .swiper-vertical { .swiper-button-next, .swiper-button-prev, ~ .swiper-button-next, ~ .swiper-button-prev { left: var(--swiper-navigation-top-offset, 50%); margin-left: calc(0px - var(--swiper-navigation-size) / 2); margin-top: 0; right: auto; } .swiper-button-prev, ~ .swiper-button-prev { bottom: auto; top: var(--swiper-navigation-sides-offset, 4px); .swiper-navigation-icon { transform: rotate(-90deg); } } .swiper-button-next, ~ .swiper-button-next { bottom: var(--swiper-navigation-sides-offset, 4px); top: auto; .swiper-navigation-icon { transform: rotate(90deg); } } } .swiper-pagination { position: absolute; text-align: center; transform: translateZ(0); transition: opacity 0.3s; z-index: 10; &.swiper-pagination-hidden { opacity: 0; } &.swiper-pagination-disabled, .swiper-pagination-disabled > & { display: none !important; } } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: var(--swiper-pagination-bottom, 8px); left: 0; top: var(--swiper-pagination-top, auto); width: 100%; } .swiper-pagination-bullets-dynamic { font-size: 0; overflow: hidden; .swiper-pagination-bullet { position: relative; transform: scale(0.33); } .swiper-pagination-bullet-active, .swiper-pagination-bullet-active-main { transform: scale(1); } .swiper-pagination-bullet-active-prev { transform: scale(0.66); } .swiper-pagination-bullet-active-prev-prev { transform: scale(0.33); } .swiper-pagination-bullet-active-next { transform: scale(0.66); } .swiper-pagination-bullet-active-next-next { transform: scale(0.33); } } .swiper-pagination-bullet { background: var( --swiper-pagination-bullet-inactive-color, color-mix( in srgb, var(--swiper-pagination-color, var(--swiper-theme-color)) 25%, transparent ) ); border-radius: var(--swiper-pagination-bullet-border-radius, 50%); display: inline-block; height: var( --swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px) ); opacity: var(--swiper-pagination-bullet-inactive-opacity, 1); width: var( --swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px) ); button& { appearance: none; border: none; box-shadow: none; margin: 0; padding: 0; } .swiper-pagination-clickable & { cursor: pointer; } &:only-child { display: none !important; } } .swiper-pagination-bullet-active { background: var(--swiper-pagination-color, var(--swiper-theme-color)); opacity: var(--swiper-pagination-bullet-opacity, 1); } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { left: var(--swiper-pagination-left, auto); right: var(--swiper-pagination-right, 8px); top: 50%; transform: translate3d(0, -50%, 0); .swiper-pagination-bullet { display: block; margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; } &.swiper-pagination-bullets-dynamic { top: 50%; transform: translateY(-50%); width: 8px; .swiper-pagination-bullet { display: inline-block; transition: transform 0.2s, top 0.2s; } } } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-horizontal.swiper-pagination-bullets { .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } &.swiper-pagination-bullets-dynamic { left: 50%; transform: translateX(-50%); white-space: nowrap; .swiper-pagination-bullet { transition: transform 0.2s, left 0.2s; } } } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: transform 0.2s, right 0.2s; } .swiper-pagination-fraction { color: var(--swiper-pagination-fraction-color, inherit); } .swiper-pagination-progressbar { background: var(--swiper-pagination-progressbar-bg-color, #00000040); position: absolute; .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); height: 100%; left: 0; position: absolute; top: 0; transform: scale(0); transform-origin: left top; width: 100%; } .swiper-rtl & .swiper-pagination-progressbar-fill { transform-origin: right top; } &.swiper-pagination-horizontal, &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-horizontal > &, .swiper-vertical > &.swiper-pagination-progressbar-opposite { height: var(--swiper-pagination-progressbar-size, 4px); left: 0; top: 0; width: 100%; } &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, &.swiper-pagination-vertical, .swiper-horizontal > &.swiper-pagination-progressbar-opposite, .swiper-vertical > & { height: 100%; left: 0; top: 0; width: var(--swiper-pagination-progressbar-size, 4px); } } .swiper-pagination-lock { display: none; } .swiper-scrollbar { background: var(--swiper-scrollbar-bg-color, #0000001a); border-radius: var(--swiper-scrollbar-border-radius, 10px); position: relative; touch-action: none; &.swiper-scrollbar-disabled, .swiper-scrollbar-disabled > & { display: none !important; } &.swiper-scrollbar-horizontal, .swiper-horizontal > & { bottom: var(--swiper-scrollbar-bottom, 4px); height: var(--swiper-scrollbar-size, 4px); left: var(--swiper-scrollbar-sides-offset, 1%); position: absolute; top: var(--swiper-scrollbar-top, auto); width: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2); z-index: 50; } &.swiper-scrollbar-vertical, .swiper-vertical > & { height: calc(100% - var(--swiper-scrollbar-sides-offset, 1%) * 2); left: var(--swiper-scrollbar-left, auto); position: absolute; right: var(--swiper-scrollbar-right, 4px); top: var(--swiper-scrollbar-sides-offset, 1%); width: var(--swiper-scrollbar-size, 4px); z-index: 50; } } .swiper-scrollbar-drag { background: var(--swiper-scrollbar-drag-bg-color, #00000080); border-radius: var(--swiper-scrollbar-border-radius, 10px); height: 100%; left: 0; position: relative; top: 0; width: 100%; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { align-items: center; display: flex; height: 100%; justify-content: center; text-align: center; width: 100%; > canvas, > img, > svg { max-height: 100%; max-width: 100%; object-fit: contain; } } .swiper-slide-zoomed { cursor: move; touch-action: none; } .swiper .swiper-notification { left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { margin: 0 auto; transition-timing-function: ease-out; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-direction: column; flex-wrap: wrap; } .swiper-fade { &.swiper-free-mode { .swiper-slide { transition-timing-function: ease-out; } } .swiper-slide { pointer-events: none; transition-property: opacity; .swiper-slide { pointer-events: none; } } .swiper-slide-active { pointer-events: auto; & .swiper-slide-active { pointer-events: auto; } } } .swiper.swiper-cube { overflow: visible; } .swiper-cube { .swiper-slide { backface-visibility: hidden; height: 100%; pointer-events: none; transform-origin: 0 0; visibility: hidden; width: 100%; z-index: 1; .swiper-slide { pointer-events: none; } } &.swiper-rtl .swiper-slide { transform-origin: 100% 0; } .swiper-slide-active { &, & .swiper-slide-active { pointer-events: auto; } } .swiper-slide-active, .swiper-slide-next, .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube-shadow { bottom: 0; height: 100%; left: 0; opacity: 0.6; position: absolute; width: 100%; z-index: 0; &:before { background: #000; bottom: 0; content: ""; filter: blur(50px); left: 0; position: absolute; right: 0; top: 0; } } } .swiper-cube { .swiper-slide-next + .swiper-slide { pointer-events: auto; visibility: visible; } } .swiper-cube { .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-slide-shadow-cube.swiper-slide-shadow-top { backface-visibility: hidden; z-index: 0; } } .swiper.swiper-flip { overflow: visible; } .swiper-flip { .swiper-slide { backface-visibility: hidden; pointer-events: none; z-index: 1; .swiper-slide { pointer-events: none; } } .swiper-slide-active { &, & .swiper-slide-active { pointer-events: auto; } } } .swiper-flip { .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-slide-shadow-flip.swiper-slide-shadow-top { backface-visibility: hidden; z-index: 0; } } .swiper-creative { .swiper-slide { backface-visibility: hidden; overflow: hidden; transition-property: transform, opacity, height; } } .swiper.swiper-cards { overflow: visible; } .swiper-cards { .swiper-slide { backface-visibility: hidden; overflow: hidden; transform-origin: center bottom; } } /* Custom: Swiper container constraints */ [data-swiper] { width: 100%; max-width: 100%; overflow: hidden; } [data-swiper] > .swiper { width: 100%; max-width: 100%; overflow: hidden; } [data-swiper] > .swiper .swiper-wrapper { width: 100%; max-width: 100%; } /* Ensure slides and content fit within container */ [data-swiper] .swiper-slide { width: 100%; max-width: 100%; box-sizing: border-box; } [data-swiper] .swiper-slide img { width: 100%; max-width: 100%; height: auto; display: block; } /* Image slider: ensure images fill the aspect-ratio frame */ .image-slider .swiper-slide .image-slider__image { height: 100%; object-fit: cover; } /* Image slider: overlay controls on bottom of slider */ .image-slider .swiper-controls { position: absolute; inset-inline: var(--space-m, 1.5rem); bottom: var(--space-xs, 1rem); z-index: 2; } /* In the image slider, match arrow colour to pagination dots */ .image-slider .swiper-controls .swiper-button-prev, .image-slider .swiper-controls .swiper-button-next { color: var(--color-canvas, #fff); } @media (max-width: 767px) { .image-slider .swiper-controls { inset-inline: var(--space-s, 1rem); bottom: var(--space-s, 1rem); } } /* Navigation controls wrapper */ [data-swiper] .swiper-controls { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m, 1.5rem); padding: var(--space-s); } /* Navigation buttons */ [data-swiper] .swiper-controls .swiper-button-prev, [data-swiper] .swiper-controls .swiper-button-next { position: relative; top: auto; left: auto; right: auto; margin: 0; flex-shrink: 0; width: var(--swiper-navigation-size); height: var(--swiper-navigation-size); color: var(--swiper-navigation-color); } [data-swiper] .swiper-controls .swiper-button-prev { order: 1; } [data-swiper] .swiper-controls .swiper-button-next { order: 3; } /* Pagination centered */ [data-swiper] .swiper-controls .swiper-pagination { position: relative; bottom: auto; left: auto; top: auto; width: auto; margin: 0; order: 2; flex: 1; display: flex; justify-content: center; } /* Custom: Bullet colors — inactive uses muted colour, not opacity (keeps focus rings visible) */ [data-swiper] .swiper-pagination-bullet { --swiper-pagination-bullet-inactive-color: color-mix( in srgb, var(--color-canvas, #fff) 35%, transparent ); --swiper-pagination-bullet-inactive-opacity: 1; } [data-swiper] .swiper-pagination-bullet-active { --swiper-pagination-color: var(--color-canvas, #fff); } /* Split swiper: 1/3 image (fade) left, 2/3 content (slide) right, controls inside right block */ .swiper-split { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-l, 2rem); align-items: stretch; min-height: 20rem; width: 100%; overflow: hidden; } /* Modifier: 50/50 split — match split-50 column geometry (no gap, true viewport midpoint) */ .swiper-split--50-50 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; } .swiper-split__media { position: relative; overflow: hidden; min-height: 14rem; } .swiper-split__media-item { position: absolute; inset: 0; opacity: 0; transition: opacity var(--swiper-split-fade-duration, 0.5s) ease-in-out; pointer-events: none; } .swiper-split__media-item.is-active { opacity: 1; pointer-events: auto; z-index: 1; } .swiper-split__media-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .swiper-split__content { display: flex; flex-direction: column; min-width: 0; overflow: hidden; } /* Constrain viewport width so Swiper reads correct size (avoids slide width going to 17M+ px) */ .swiper-split__content > .swiper { flex: 1; overflow: hidden; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .swiper-split__content .swiper-wrapper { box-sizing: border-box; } .swiper-split__content .swiper-slide { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; justify-content: center; } .swiper-split__slide-inner { width: 100%; padding: var(--space-2xl) var(--space-xl); } .swiper-split__content .swiper-controls { flex-shrink: 0; margin-top: auto; } /* Desktop: make image column full-bleed like split-50, keep swiper content constrained */ @media (min-width: 768px) { .swiper-split { /* Break out of the content container so the media can bleed to viewport edge */ width: 100vw; margin-inline: calc(50% - 50vw); } .swiper-split__media { /* Match the more immersive height used by split-50 */ min-height: clamp(320px, 60vh, 640px); } .swiper-split__content { display: flex; flex-direction: column; justify-content: center; } .swiper-split__content > .swiper { /* Let the swiper fill the content column; inner slide content is constrained instead */ width: 100%; max-width: 100%; } .swiper-split__slide-inner { max-width: var(--content-width); margin-inline: auto; padding-block: var(--space-3xl); /* padding-inline: var(--content-width-padding); */ } /* On desktop, keep using Swiper's built-in overlay navigation, but shift both prev/next buttons in from the viewport edge so they visually align with the content-width padding. */ [data-swiper-split] .swiper { --swiper-navigation-sides-offset: var(--content-width-padding); } } @media (min-width: 1200px) { .swiper-split--50-50 .swiper-split__media { aspect-ratio: 1 / 1; } } /* When text colour is set on split swiper, nav and pagination use it */ [data-swiper-split][class*="text-"] { --swiper-theme-color: currentColor; --swiper-navigation-color: currentColor; --swiper-pagination-color: currentColor; --swiper-pagination-bullet-inactive-color: color-mix( in srgb, currentColor 35%, transparent ); --swiper-pagination-bullet-inactive-opacity: 1; } @media (max-width: 767px) { .swiper-split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: auto; } .swiper-split__media { min-height: 12rem; order: 1; } .swiper-split__content { order: 2; } .swiper-split__content .swiper-slide { padding: 0; justify-content: start; } .swiper-split__slide-inner { padding-block: var(--space-m); padding-inline: var(--space-xl); padding-bottom: var(--space-l); } .swiper-split__content .swiper-button-prev { left: var(--space-m); right: auto; } .swiper-split__content .swiper-button-next { right: var(--space-m); left: auto; } } .image-slider { width: 100%; max-width: 100%; position: relative; /* Match navigation colour with pagination dots for this slider */ --swiper-navigation-color: var(--color-canvas, #fff); } /* Hidden 8/4 grid row: marker supplies desktop column-B edge for peek alignment (JS). */ .image-slider__column-align-bridge { height: 0; overflow: hidden; visibility: hidden; pointer-events: none; margin: 0; padding-block: 0; } .image-slider__column-align-bridge-grid { min-height: 0; margin: 0; } .image-slider__column-align-bridge-spacer, .image-slider__column-align-bridge-marker { min-height: 0; box-sizing: border-box; } .image-slider__column-align-bridge-spacer { padding: 0; } /* Full column-B inset read by JS; COLUMN_B_PADDING_FRACTION of it is subtracted from the 8|9 line. */ .image-slider__column-align-bridge-marker { padding: 0; padding-inline-start: var(--space-l); } /* Image slider: subtle bottom gradient to improve control legibility */ .image-slider::after { content: ""; position: absolute; inset-inline: 0; top: 0; bottom: 0; z-index: 1; background: linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 65%, rgba(0, 0, 0, 0.6) 100% ); pointer-events: none; } .image-slider__slide { position: relative; overflow: hidden; } .image-slider__image { width: 100%; height: 100%; object-fit: cover; display: block; } .image-slider__caption { position: absolute; left: var(--space-m, 1.5rem); top: var(--space-m, 1.5rem); z-index: 2; max-width: calc(100% - (var(--space-m, 1.5rem) * 2)); margin: 0; padding: 0.35em 0.55em; text-align: left; text-wrap: balance; background: rgba(0, 0, 0, 0.55); pointer-events: none; } @media (max-width: 767px) { .image-slider__caption { left: var(--space-s, 1rem); top: var(--space-s, 1rem); max-width: calc(100% - (var(--space-s, 1rem) * 2)); } } /* On larger screens, break the slider out to full viewport width so the leading slide is full-width and the next slide peeks in. */ @media (min-width: 768px) { .image-slider.image-slider--peek[data-swiper] { width: 100vw; /* margin-inline: calc(50% - 50vw); */ box-sizing: border-box; } } /* Square image row — whole slides only; white pagination overlay at bottom centre */ .square-slider { width: 100%; position: relative; } .square-slider .swiper-slide { height: auto; } .square-slider__slide-inner { position: relative; width: 100%; } .square-slider__image { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; } .square-slider__caption { position: absolute; left: var(--space-s, 0.5rem); bottom: var(--space-s, 0.5rem); z-index: 2; max-width: calc(100% - (var(--space-s, 0.5rem) * 2)); margin: 0; padding: 0.35em 0.55em; text-align: left; text-wrap: balance; background: rgba(0, 0, 0, 0.55); pointer-events: none; } .square-slider__pagination { position: absolute; bottom: var(--space-s, 1rem); left: 50%; transform: translateX(-50%); width: auto; z-index: 2; pointer-events: auto; } .square-slider .swiper-pagination-bullet { --swiper-pagination-bullet-inactive-color: color-mix(in srgb, #fff 45%, transparent); --swiper-pagination-bullet-inactive-opacity: 1; --swiper-pagination-color: #fff; } /* Focus/hover: full opacity so keyboard rings stay obvious */ .swiper-button-prev:focus-visible, .swiper-button-next:focus-visible, .swiper-pagination-bullet:focus-visible { opacity: 1; } } @layer components{ @layer components { /* Navigation Container */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1010; --nav-focus-ring: var(--color-canvas); transition: background var(--transition, 0.3s ease), transform 0.3s ease, box-shadow var(--transition, 0.3s ease); transform: translateY(0); } .nav--hidden { transform: translateY(-100%); } /* Scrolled state - white background with dark text (always overrides light/dark variants) */ .nav--scrolled { background: var(--color-canvas) !important; --nav-focus-ring: var(--color-ink); } .nav--scrolled .nav__logo, .nav--scrolled .nav__link, .nav--scrolled .nav__submenu-toggle { color: var(--color-ink) !important; } /* Open button lives outside