/***************************************************************************************************************************************************************************************/ /* HTML5 BOILERPLATE MINIFIED */ /***************************************************************************************************************************************************************************************/ *{box-sizing:border-box;}article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;}canvas{display:inline;}video{display:inline;}audio:not([controls]){display:none}[hidden]{display:none}html{color:#222;font-family:sans-serif;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}button{-webkit-appearance:button;color:#222;cursor:pointer;font-family:sans-serif;font-size:100%;line-height:normal;margin:0;overflow:visible;vertical-align:middle}input{color:#222;font-family:sans-serif;font-size:100%;line-height:normal;margin:0;vertical-align:middle}select{color:#222;font-family:sans-serif;font-size:100%;margin:0;vertical-align:middle}textarea{color:#222;font-family:sans-serif;font-size:100%;margin:0;overflow:auto;resize:vertical;vertical-align:top}body{font-size:1em;line-height:1.4;margin:0}::-moz-selection{background:#333;color:#fff;text-shadow:none}::selection{background:#333;color:#fff;text-shadow:none}a{color:#00e}a:hover{color:#06e;outline:0}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{bottom:-.25em;font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{font-size:75%;line-height:0;position:relative;top:-.5em;vertical-align:baseline}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0;white-space:normal}input[type="button"]{-webkit-appearance:button;cursor:pointer;overflow:visible}input[type="reset"]{-webkit-appearance:button;cursor:pointer;overflow:visible}input[type="submit"]{-webkit-appearance:button;cursor:pointer;overflow:visible}button[disabled]{cursor:default}input[disabled]{cursor:default}input[type="checkbox"]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type="radio"]{box-sizing:border-box;height:13px;padding:0;width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}.chromeframe{background:#ccc;color:#000;margin:.2em 0;padding:.2em 0} /***************************************************************************************************************************************************************************************/ /* FONTS */ /***************************************************************************************************************************************************************************************/ @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('assets/fonts/poppins-regular.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 400; src: url('assets/fonts/poppins-italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('assets/fonts/poppins-medium.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 500; src: url('assets/fonts/poppins-medium-italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('assets/fonts/poppins-semibold.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 600; src: url('assets/fonts/poppins-semibold-italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('assets/fonts/poppins-bold.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Poppins'; font-style: italic; font-weight: 700; src: url('assets/fonts/poppins-bold-italic.woff2') format('woff2'); } @font-face { font-display: swap; font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; src: url('assets/fonts/bricolage-grotesque-variable.woff2') format('woff2'); } /***************************************************************************************************************************************************************************************/ /* BODY STYLES */ /***************************************************************************************************************************************************************************************/ :root { --storm: #396463; --dark-teal: #02726e; --light-teal: #51afac; --aqua: #8bc6c1; --aqua-light: #c1fffa; --sun: #f7d432; --ray: #f9d778; --fern: #637a36; --tea-green: #ccdb9c; --charcoal: #3d443e; --linen: #e7e4dc; --white: #fff; --off-white: #fafaf8; --blush: #b875a6; --lilac: #cfa6c7; --petal: #edc9e8; --pollen: #ffba1f; --tangerine: #ffc482; --peach: #ffbab2; --apricot: #ffb766; --apricot-pale: #ffe7cc; --text-gray: #5c615b; --text-gray-light: #747474; --sun-light: #fdf0b2; --teal-pale: #e4f5f4; --tea-green-pale: #f2f5e8; /* The quote mark's disc and the glyph on it. Comp values answering to no other token, and shared by the testimonial panel and the inline quote — which is why they are here rather than stated twice. */ --quote-disc: #ced8cc; --quote-mark: #3c6533; --charcoal-pale: #e8e9e8; --white-muted: #c5c7c5; --field-border: #828282; --aqua-30: rgba(139, 198, 193, 0.3); --charcoal-5: rgba(61, 68, 62, 0.05); --charcoal-10: rgba(61, 68, 62, 0.1); --charcoal-15: rgba(61, 68, 62, 0.15); --charcoal-25: rgba(61, 68, 62, 0.25); --charcoal-40: rgba(61, 68, 62, 0.4); --linen-50: rgba(231, 228, 220, 0.5); --petal-40: #f8e9f6; --white-5: rgba(255, 255, 255, 0.05); --white-10: rgba(255, 255, 255, 0.1); --white-15: rgba(255, 255, 255, 0.15); --white-25: rgba(255, 255, 255, 0.25); --white-60: rgba(255, 255, 255, 0.6); --storm-dark: #2b5352; --focus-ring: #3d443e; --focus-halo: #fff; /* The band behind a Program hero. Named for its job, not a colour, because a programme sets it: this is only the value used when none has. It was `--forest: #0b3e00` in this block, which is IBT's green — so an unbranded Program hero rendered as IBT. */ --program-band: var(--storm); /* Highlighted values on a Program hero. `--apricot` is not the right home for this: two of its three uses are house furniture — every WYSIWYG list bullet, and the quote tile's "Apricot" variant — so a programme re-pointing it would recolour bullets sitewide. */ --program-highlight: var(--sun); --watermark-color: var(--charcoal); --footer-callout-overlap: 200px; --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --motion-fast: 150ms; --motion: 250ms; --motion-slow: 350ms; --motion-slower: 450ms; --error-color: #914a7e; --overlay-dim: rgba(0, 0, 0, 0.25); --overlay-nav: rgba(0, 0, 0, 0.4); --overlay-scrim: rgba(0, 0, 0, 0.4); --overlay-darker: rgba(0, 0, 0, 0.8); --overlay-scrim-strong: rgba(0, 0, 0, 0.68); --overlay-scrim-soft: rgba(0, 0, 0, 0.25); --overlay-scrim-copy: rgba(0, 0, 0, 0.45); --overlay-medium: rgba(0, 0, 0, 0.5); --overlay-dark: rgba(0, 0, 0, 0.6); --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.06); --shadow-strong: -15px 15px 40px rgba(0, 0, 0, 0.15); --body-font: 'Poppins', Arial, Helvetica, sans-serif; --heading-font: 'Bricolage Grotesque', Arial, Helvetica, sans-serif; /* The subnav renders inside the header, so it is part of what an overlay hero has to clear. Zero unless section-nav.css is on the page, which it only is where the bar renders. */ --header-height: calc(128px + var(--section-nav-height)); --section-nav-height: 0px; --sticky-nav-height: 0px; --container-width: 90vw; --container-max-width: 2000px; --container-outer-padding: 50px; --container-outer-margin: calc((100vw - var(--container-width)) / 2); --viewport-edge: calc((var(--container-outer-margin) + var(--container-outer-padding)) * -1); --container-breakout-full: min(0px, 64px - var(--container-outer-margin) - var(--container-outer-padding)); --container-breakout: max(-42px, var(--container-breakout-full)); --one-column-width: ((100vw - (2 * (var(--container-outer-margin) + var(--container-outer-padding)))) - (11 * var(--gap))) / 12; --gap: 40px; --grid: repeat(12, minmax(0,1fr)); --text-spacing-xxsmall: 8px; --text-spacing-xsmall: 16px; --text-spacing-small: 24px; --text-spacing-medium: 32px; --text-spacing-large: 40px; --text-spacing-xlarge: 48px; --text-spacing-xxlarge: 56px; --module-spacing-small: 64px; --module-spacing-medium: 80px; --module-spacing-large: 120px; --module-spacing-xlarge: 160px; interpolate-size: allow-keywords; } /*** Brand: program palettes ***/ /* The `[data-brand="…"]` blocks are written at runtime from Site Settings → Programs, and printed into the head by `simpatico_print_program_palette_css()`. They used to be authored here, which meant a second sub-brand needed a developer. Nothing else about the mechanism changed: a palette still only re-points custom properties, and a module still follows it by using the shipped token name rather than a hex value. See `functions/programs.php`. */ html { font-size: 100%; scroll-padding-top: calc(var(--sticky-nav-height) + var(--text-spacing-small)); scrollbar-gutter: stable; } body { background: var(--off-white); color: var(--charcoal); font: 1rem var(--body-font); overflow-wrap: break-word; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /* The house palette as a scope of its own, for a module set to GRID inside a programme's page. Every token a programme may re-point is put back: the ones :root gives a value take that value, the ones only a programme sets go invalid so their var() fallbacks answer again. */ [data-brand="grid"] { color: var(--charcoal); --charcoal: #3d443e; --charcoal-10: rgba(61, 68, 62, 0.1); --charcoal-15: rgba(61, 68, 62, 0.15); --charcoal-25: rgba(61, 68, 62, 0.25); --charcoal-40: rgba(61, 68, 62, 0.4); --focus-ring: #3d443e; --heading-color: initial; --program-band: var(--storm); --program-dark: initial; --program-disc: initial; --program-highlight: var(--sun); --program-marker: initial; --program-mid: initial; --program-pill: initial; --program-step: initial; --program-warm: initial; --program-wash: initial; --sun: #f7d432; --sun-light: #fdf0b2; --teal-pale: #e4f5f4; } .svg-inline--fa { display: inline-block; font-size: inherit; height: 1em; overflow: visible; vertical-align: -0.125em; } .svg-inline--fa path { fill: currentColor; } a { text-decoration: none; transition: all var(--motion) var(--ease-out), box-shadow 0s, outline-color 0s, outline-offset 0s, outline-width 0s; } input[type=submit], button { border-radius: 0; font-family: inherit; transition: all var(--motion) var(--ease-out), box-shadow 0s, outline-color 0s, outline-offset 0s, outline-width 0s; } img, svg, iframe, picture { max-width: 100%; } img, svg, picture { height: auto; } h1, .heading-1, h2, .heading-2, h3, .heading-3, h4, .heading-4, h5, .heading-5, h6, .heading-6 { color: var(--heading-color, inherit); font-family: var(--heading-font); font-variation-settings: 'opsz' 14; margin: 0; } .mega { font-family: var(--heading-font); font-size: calc(148rem / 16); font-variation-settings: 'opsz' 14; font-weight: 400; letter-spacing: -0.0338em; line-height: calc(126 / 148); } .mega.xlarge { font-size: calc(204rem / 16); font-weight: 500; letter-spacing: -0.0245em; line-height: calc(140 / 204); } h1, .heading-1 { font-size: calc(112rem / 16); font-weight: 400; letter-spacing: -0.0446em; line-height: calc(108 / 112); } h2, .heading-2 { font-size: calc(84rem / 16); font-weight: 400; letter-spacing: -0.0238em; line-height: calc(84 / 84); } h3, .heading-3 { font-size: calc(68rem / 16); font-weight: 300; letter-spacing: -1.4px; line-height: calc(78 / 68); } h4, .heading-4 { font-family: var(--body-font); font-size: calc(56rem / 16); font-weight: 600; letter-spacing: -0.0179em; line-height: calc(64 / 56); } h5, .heading-5 { font-size: calc(48rem / 16); font-weight: 400; letter-spacing: -0.0292em; line-height: calc(56 / 48); } h6, .heading-6 { font-family: var(--body-font); font-size: calc(46rem / 16); font-weight: 600; letter-spacing: -0.0217em; line-height: calc(54 / 46); } /** Article titles — Poppins counterpart to the heading scale, for card and post titles **/ .article-title, .content-styles :is(h1, h2, h3, h4, h5, h6):not([class^="heading-"]) { font-family: var(--body-font); font-size: calc(68rem / 16); font-weight: 600; letter-spacing: -0.0206em; line-height: calc(78 / 68); } .article-title.medium, .content-styles h2:not([class^="heading-"]) { font-size: calc(38rem / 16); letter-spacing: -0.0026em; line-height: calc(46 / 38); } .article-title.small, .content-styles h3:not([class^="heading-"]) { font-size: calc(22rem / 16); letter-spacing: 0; line-height: calc(30 / 22); } .article-title.xsmall, .content-styles :is(h4, h5, h6):not([class^="heading-"]) { font-size: calc(16rem / 16); letter-spacing: -0.1px; line-height: calc(26 / 16); } .article-title > :is(p, ul, ol) { font-size: inherit; letter-spacing: inherit; line-height: inherit; } p, ul, ol, p.medium, ul.medium, ol.medium, .regular-text, .regular-text p, .regular-text ul, .regular-text ol, .medium-text, .medium-text p, .medium-text ul, .medium-text ol { font-size: calc(18rem / 16); letter-spacing: -0.1px; line-height: calc(30 / 18); } p.xxlarge, ul.xxlarge, ol.xxlarge, .xxlarge-text, .xxlarge-text p, .xxlarge-text ul, .xxlarge-text ol { font-size: calc(38rem / 16); font-weight: 600; letter-spacing: -0.0158em; line-height: calc(48 / 38); } p.xlarge, ul.xlarge, ol.xlarge, .xlarge-text, .xlarge-text p, .xlarge-text ul, .xlarge-text ol { font-size: calc(32rem / 16); font-weight: 600; letter-spacing: -0.0125em; line-height: calc(42 / 32); } p.large, ul.large, ol.large, .large-text, .large-text p, .large-text ul, .large-text ol { font-size: calc(22rem / 16); letter-spacing: -0.0091em; line-height: calc(36 / 22); } p.longform, ul.longform, ol.longform, .longform-text, .longform-text p, .longform-text ul, .longform-text ol { font-size: calc(18rem / 16); letter-spacing: -0.1px; line-height: calc(34 / 18); } p.small, ul.small, ol.small, .small-text, .small-text p, .small-text ul, .small-text ol { font-size: calc(15rem / 16); letter-spacing: -0.1px; line-height: calc(26 / 15); } p.xsmall, ul.xsmall, ol.xsmall, .xsmall-text, .xsmall-text p, .xsmall-text ul, .xsmall-text ol { font-size: calc(13rem / 16); letter-spacing: 0; line-height: calc(22 / 13); } p.xsmall a:not(.btn, .card-link), .xsmall-text a:not(.btn, .card-link) { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } p.large a:not(.btn, .card-link), p.medium a:not(.btn, .card-link), p.small a:not(.btn, .card-link), p.longform a:not(.btn, .card-link), .article-title a:not(.btn, .card-link), .large-text a:not(.btn, .card-link), .medium-text a:not(.btn, .card-link), .regular-text a:not(.btn, .card-link), .longform-text a:not(.btn, .card-link), .small-text a:not(.btn, .card-link) { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } p.xsmall a:not(.btn, .card-link):is(:hover, :focus-visible), p.large a:not(.btn, .card-link):is(:hover, :focus-visible), p.medium a:not(.btn, .card-link):is(:hover, :focus-visible), p.small a:not(.btn, .card-link):is(:hover, :focus-visible), p.longform a:not(.btn, .card-link):is(:hover, :focus-visible), .article-title a:not(.btn, .card-link):is(:hover, :focus-visible), .large-text a:not(.btn, .card-link):is(:hover, :focus-visible), .xsmall-text a:not(.btn, .card-link):is(:hover, :focus-visible), .medium-text a:not(.btn, .card-link):is(:hover, :focus-visible), .regular-text a:not(.btn, .card-link):is(:hover, :focus-visible), .longform-text a:not(.btn, .card-link):is(:hover, :focus-visible), .small-text a:not(.btn, .card-link):is(:hover, :focus-visible) { color: color-mix(in srgb, currentColor 85%, transparent); text-underline-offset: 3px; } .xxlarge-text, .xlarge-text, .large-text, .regular-text, .medium-text, .longform-text, .small-text, .xsmall-text { font-family: var(--body-font); } /* A cohort article's own h3 is always a label over a group inside a section, never the head of one — the h2s are the sections, and the only other h3s in that article belong to the FAQ's accordions. It keeps the element, and so the outline, and takes this cut. */ .eyebrow, .single.cohort .article > h3 { display: block; font-family: var(--body-font); font-size: calc(16rem / 16); font-weight: 700; letter-spacing: 1px; line-height: calc(26 / 16); text-transform: uppercase; } .eyebrow.small { font-size: calc(12rem / 16); letter-spacing: 1px; line-height: calc(16 / 12); } .eyebrow.muted { color: var(--text-gray); } .eyebrow.medium { font-size: calc(14rem / 16); letter-spacing: 1.8px; line-height: calc(16 / 14); } .eyebrow:has(.mark) { align-items: center; display: flex; gap: var(--text-spacing-xxsmall); } .eyebrow .mark { align-items: center; /* Brand furniture, so it follows the programme's marker where one is set — the same fallback shape the content-styles bullet uses. */ color: var(--program-marker, var(--light-teal)); display: flex; flex-shrink: 0; } .eyebrow .mark svg { display: block; height: 1.6875em; width: auto; } .pill { align-items: center; background: var(--tea-green); border-radius: 40px; color: var(--charcoal); display: inline-flex; font-family: var(--body-font); font-size: calc(14rem / 16); font-weight: 700; gap: var(--text-spacing-xxsmall); justify-content: center; letter-spacing: 1.8px; line-height: calc(16 / 14); padding: 8px 24px; text-transform: uppercase; } .pill.tangerine { background: var(--program-warm, var(--tangerine)); } .pill.petal { background: var(--petal); } .pill.peach { background: var(--peach); } .pill.aqua { background: var(--aqua); } .pill.ray { background: var(--ray); } .pill.small { border-radius: 30px; font-size: calc(12rem / 16); letter-spacing: 1px; line-height: calc(16 / 12); padding: 4.5px 16px 3.5px; } .tag { } .quote-small { font-size: calc(18rem / 16); font-style: italic; font-weight: 600; letter-spacing: -0.3px; line-height: calc(28 / 18); } .legal, .legal p, .legal ul, .legal ol { font-size: calc(12rem / 16); letter-spacing: 0; line-height: calc(18 / 12); } .legal a { color: inherit; font-weight: 600; text-decoration: underline; } .meta { color: var(--text-gray); font-size: calc(12rem / 16); font-weight: 500; letter-spacing: 0.3px; line-height: calc(20 / 12); } .amount { font-family: var(--heading-font); font-size: calc(60rem / 16); font-variation-settings: 'opsz' 14; font-weight: 600; letter-spacing: -0.0233em; line-height: calc(62 / 60); } .currency { font-size: 0.645em; } .form-amount { font-family: var(--body-font); font-size: calc(12rem / 16); font-weight: 700; letter-spacing: 1px; line-height: calc(16 / 12); margin-left: var(--text-spacing-xsmall); text-transform: uppercase; } .form-field-text { color: var(--text-gray-light); font-size: calc(14rem / 16); letter-spacing: 0; line-height: calc(26 / 14); } .form-field-text.small { color: var(--text-gray); font-size: calc(13rem / 16); font-weight: 500; line-height: calc(24 / 13); } /** Weight modifiers — stand in for every Regular/Bold and Light/Semibold pair in the scale **/ .bold { font-weight: 700; } .semibold { font-weight: 600; } strong, b { font-weight: 700; } /** Emphasis — the display run an editor marks with bold inside a heading WYSIWYG **/ .emphasis { color: var(--dark-teal); display: block; font-family: var(--heading-font); font-size: calc(84rem / 16); font-variation-settings: 'opsz' 14; font-weight: 700; letter-spacing: -0.0238em; line-height: calc(84 / 84); } .emphasis.medium { font-size: calc(68rem / 16); font-weight: 600; letter-spacing: -0.0206em; line-height: calc(78 / 68); } .emphasis.inline { color: var(--pollen); display: inline; font-family: inherit; font-size: inherit; font-variation-settings: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; } header, section, footer, article { width: 100%; } .container { clear: both; margin: 0 auto; max-width: var(--container-max-width); padding: 0 var(--container-outer-padding); position: relative; width: var(--container-width); } .container-full { clear: both; padding: 0 var(--container-outer-padding); position: relative; width: 100%; } .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .flex-container, .flex { display: flex; flex-wrap: wrap; justify-content: space-between; } .grid-container, .grid { display: grid; gap: var(--gap); grid-template-columns: var(--grid); } ul.flex-container, ul.flex, ul.grid-container, ul.grid, ol.flex-container, ol.flex, ol.grid-container, ol.grid { list-style: none; margin: 0; padding: 0; } :focus-visible, a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .accessibility, .hidden_label > label, .hidden_label > legend, .sr-text { backface-visibility: hidden; left: -999999999px; opacity: 0; position: absolute; } #skip-to-content { pointer-events: none; top: 0; z-index: 9999999; } /* Sun rather than charcoal: the header is a dark band on most pages, and a dark pill on it was the one control on the site a keyboard reader could miss. */ #skip-to-content:focus { backface-visibility: visible; background: var(--sun); border: 1px solid var(--charcoal); color: var(--charcoal); left: var(--container-outer-padding); opacity: 1; pointer-events: auto; top: var(--text-spacing-xsmall); } #skip-to-content:focus:hover { box-shadow: inset 0px 0px 0px 2px var(--charcoal); } .image-zoom { overflow: hidden; } .image-zoom > img, .image-zoom > picture { display: block; height: 100%; object-fit: cover; transition: all var(--motion) var(--ease-out); width: 100%; } .tablet-only, .mobile-only { display: none !important; } /*** Maps ***/ /* The hover tip: Google's bubble with its chrome pared back to the name. The wrapper classes are Google's own, which is why they are named here; the padding is inline, which is why the override has to shout. */ [data-locations-map] .gm-style-iw-c { border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); outline: none; padding: 0 !important; } [data-locations-map] .gm-style-iw-d { overflow: hidden !important; } [data-locations-map] .map-tip { color: var(--charcoal); display: block; font-size: calc(14rem / 16); font-weight: 600; line-height: calc(20 / 14); padding: 6px 12px; white-space: nowrap; } [data-locations-map] > img { display: block; height: 100%; object-fit: cover; width: 100%; } /* Google paints into the same element, so the graphic behind it is redundant once it has. */ [data-locations-map].is-live > img { display: none; } /*** Carousels ***/ .carousel:not(.btn), .jazzy-carousel-wrapper, .slide { height: 100%; } .carousel:not(.btn) { margin: 0 var(--viewport-edge); overflow: visible; padding: 0 calc(var(--container-outer-margin) + var(--container-outer-padding)); position: relative; width: 100vw; } .jazzy-carousel-wrapper { overflow: hidden; position: relative; } .jazzy-carousel { -webkit-touch-callout: none; -webkit-user-select: none; box-sizing: border-box; position: relative; touch-action: pan-y; user-select: none; } .jazzy-carousel.jazzy-slide { display: flex; transition: transform var(--motion-slow) var(--ease-in-out); will-change: transform; } .jazzy-carousel.jazzy-adaptive-height { transition: height var(--motion-slow) var(--ease-out); } .jazzy-carousel.jazzy-slide.jazzy-adaptive-height { transition: height var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-in-out); } .jazzy-carousel.jazzy-adaptive-height > *:not([data-jazzy-carousel-exclude]) { align-self: flex-start; } .jazzy-carousel.jazzy-fade { display: grid; } [data-jazzy-carousel="fade"]:not(.jazzy-carousel) > *:not(:first-child) { display: none; } .jazzy-carousel.jazzy-fade > *:not([data-jazzy-carousel-exclude]) { grid-column: 1; grid-row: 1; opacity: 0; transition: opacity var(--motion-slow) var(--ease-out); } .jazzy-carousel.jazzy-fade > .is-active { opacity: 1; } .jazzy-carousel.jazzy-fade > .jazzy-pause-item { opacity: 1; position: relative; z-index: 1; } .jazzy-carousel.is-dragging { cursor: grabbing; transition: none; } /** Arrows **/ .jazzy-arrows { display: flex; gap: var(--text-spacing-xxsmall); } .jazzy-prev[disabled], .jazzy-next[disabled] { opacity: 0.4; pointer-events: none; } .btn[disabled] { opacity: 0.4; pointer-events: none; } /** Dots **/ .jazzy-dots { display: flex; justify-content: center; } .jazzy-dot { align-items: center; background: none; border: 0; display: flex; height: 24px; justify-content: center; opacity: 0.3; padding: 0; width: 24px; } .jazzy-dot::before { background: currentColor; border-radius: 50%; content: ''; height: 10px; width: 10px; } .jazzy-dot.is-active { opacity: 1; } /** Counter **/ .jazzy-counter { display: flex; gap: 6px; margin: 0; } .jazzy-counter .divider { opacity: .4; } /** Pause/Play Rotation **/ .jazzy-pause { align-items: center; background: transparent; border: 0; cursor: pointer; display: inline-flex; justify-content: center; } /** Non-active / hidden slides **/ .jazzy-fade > [aria-hidden="true"] { pointer-events: none; } /*** Media ***/ .media { aspect-ratio: 16 / 9; overflow: hidden; position: relative; } .media-fallback { align-items: center; background: var(--linen); display: flex; justify-content: center; padding: var(--text-spacing-small); } .media > .media-fallback { inset: 0; position: absolute; } .media-fallback svg { color: var(--white); height: auto; max-height: 55%; max-width: 160px; width: 30%; } .media img { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; } .media:is(.video, .background) :is(video, iframe) { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; } .media.video.is-embed iframe { object-fit: contain; } .media.video::after { background: rgb(0 0 0 / 25%); content: ''; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity var(--motion-fast) var(--ease-out); z-index: 1; } .media.video:hover::after, .media.video:focus-within::after { opacity: 1; } .media.video .play { background: none; border: 0; cursor: pointer; inset: 0; padding: 0; position: absolute; z-index: 2; } .media.video .play-control { align-items: center; bottom: var(--text-spacing-medium); display: flex; gap: var(--text-spacing-xsmall); left: var(--text-spacing-medium); position: absolute; } /* The triangle's mass sits left of its box, so centring it on the circle reads off. In em so the offset holds its ratio through the two smaller cuts below. */ .media.video .play-icon { align-items: center; background: var(--sun); border-radius: 50%; color: var(--charcoal); display: flex; flex-shrink: 0; font-size: calc(28rem / 16); height: 100px; justify-content: center; padding-left: 0.18em; transition: scale var(--motion-fast) var(--ease-out); width: 100px; } .media.video .play:hover .play-icon, .media.video .play:focus-visible .play-icon { scale: 1.08; } .media.video .play:focus-visible { outline: none; } .media.video .play:focus-visible .play-icon { box-shadow: 0 0 0 2px var(--focus-halo); outline: 2px solid var(--focus-ring); outline-offset: 2px; } .media.video .play-label { color: var(--white); opacity: 0; transition: opacity var(--motion-fast) var(--ease-out); } .media.video .play:hover .play-label, .media.video .play:focus-visible .play-label { opacity: 1; } .media.video .play .icon-pause, .media.video .play[data-state="playing"] .icon-play { display: none; } .media.video .play[data-state="playing"] .icon-pause { display: block; } /* Once it is playing the disc sits over a moving picture, where a solid sun circle reads as a control competing with the frame rather than a way out of it. It drops back to a white wash the picture shows through. The pause bars are symmetrical where the triangle above is not, so they want the disc's true centre: the optical nudge that rule carries comes back off here. */ .media.video .play[data-state="playing"] .play-icon { background: color-mix(in srgb, var(--white) 25%, transparent); color: var(--white); padding-left: 0; } .media.video .play[data-state="playing"] .play-label, .media.video:has(.play[data-state="playing"])::after { opacity: 0; } /*** Cards ***/ .card { --card-hover-color: var(--text-gray); background: var(--white); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; position: relative; } .cards-linen .card { background: var(--linen-50); } .card .media { aspect-ratio: 361 / 242; } .card .media img { transition: transform var(--motion) var(--ease-out); } .card:hover .media img { transform: scale(1.05); } .card .media .pill { left: var(--text-spacing-xxsmall); position: absolute; top: var(--text-spacing-xxsmall); z-index: 1; } .card .content { align-items: flex-start; display: flex; flex-direction: column; gap: var(--text-spacing-xxsmall); padding: var(--text-spacing-small) var(--text-spacing-medium); transition: color var(--motion) var(--ease-out); } .card .content p { margin: 0; } .card:hover .content { color: var(--card-hover-color); } .card:has(.card-link > .title) :is(.card-link > .title, .text > p) { transition: transform var(--motion) var(--ease-out); } .card:has(.card-link > .title) .text > p { pointer-events: none; } .card:has(.card-link > .title):is(:hover, :focus-within) :is(.card-link > .title, .text > p) { transform: translateY(-4px); } .card .text { align-items: flex-start; display: flex; flex-direction: column; gap: var(--text-spacing-xxsmall); } .card .location { align-items: center; display: flex; gap: var(--text-spacing-xxsmall); } .card .location .icon, .card.event .details .icon, .archive-content .featured .location .icon { align-items: center; aspect-ratio: 1; background: var(--charcoal-10); border-radius: 30px; color: var(--charcoal); display: flex; flex-shrink: 0; font-size: calc(11rem / 16); height: 24px; justify-content: center; line-height: calc(16 / 11); padding: 4px 0; width: 24px; } .card > .arrow { align-items: center; align-self: flex-end; background: var(--sun); border-radius: 40px; display: flex; justify-content: center; margin: auto var(--text-spacing-xsmall) var(--text-spacing-xsmall) 0; padding: 11.5px 0; transition: background-color var(--motion) var(--ease-out); width: 48px; } .card:hover > .arrow { background: var(--sun-light); } .card > .arrow svg { display: block; height: 11px; width: 13px; } .card > .arrow.small { margin: auto 0 0; padding: 7.5px 0; width: 32px; } .card > .arrow.small svg { height: 9px; width: 10px; } /** Card - video **/ .card.video .media .icon { align-items: center; background: var(--sun); border-radius: 50%; color: var(--charcoal); display: flex; font-size: calc(16rem / 16); height: 48px; justify-content: center; left: 50%; pointer-events: none; position: absolute; top: 50%; translate: -50% -50%; width: 48px; z-index: 1; } /** Card - project **/ .card.project { isolation: isolate; } .card.project .content { gap: var(--text-spacing-xsmall); } .card.project .watermark { aspect-ratio: 307 / 135; bottom: 0; color: var(--charcoal); opacity: 0; pointer-events: none; position: absolute; right: calc(-108 / 361 * 100%); transition: opacity var(--motion-slow) var(--ease-out), translate var(--motion-slower) var(--ease-out); translate: 40px 40px; width: calc(307 / 361 * 100%); z-index: -1; } .card.project .watermark svg { display: block; max-width: none; opacity: .05; width: 100%; } .card.project:hover .watermark, .card.project:focus-within .watermark { opacity: 1; translate: 0 0; } /** Plain cards — no surface until hover, when the card fills in and the arrow appears **/ .card.plain { background: none; border-radius: 20px; padding: var(--text-spacing-xsmall); transition: background var(--motion) var(--ease-out); } .card.plain:hover { background: var(--aqua-30); } .card.plain .media { border-radius: 10px; } .card.plain .content { gap: var(--text-spacing-xxsmall); padding: var(--text-spacing-medium) var(--text-spacing-xsmall) var(--text-spacing-small); } .card.plain > .arrow { margin: auto 0 0; opacity: 0; transition: background-color var(--motion) var(--ease-out), opacity var(--motion) var(--ease-out); } .card.plain:hover > .arrow, .card.plain:focus-within > .arrow { background: var(--sun); opacity: 1; } .card.plain:hover .content { color: inherit; } .card.plain .text { gap: 4px; } /** Feature cards — photo fills the card, copy sits on it, pinned to the foot **/ /* The ratio is the card's shape, not a ceiling. Copy longer than it raises the box — the card is a flex item and its automatic minimum is content-based — and the photograph, inset to the card's own box, comes up with it. Do not pin this with an explicit `min-height`: naming one replaces that automatic minimum and caps the card back at the ratio. */ .card.feature { aspect-ratio: 628 / 416; background: var(--charcoal); justify-content: flex-end; padding: var(--text-spacing-xlarge); --focus-ring: var(--white); /* Dark band: charcoal on charcoal is 1:1 */ } a.card.feature:focus-visible { box-shadow: 0 0 0 2px var(--focus-halo); outline: 2px solid #3d443e; outline-offset: 2px; } .card.feature .media { aspect-ratio: auto; border-radius: inherit; inset: 0; position: absolute; } .card.feature .media::after { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)); border-radius: inherit; content: ''; inset: 0; position: absolute; transition: background-color var(--motion-slow) var(--ease-out); } .card.feature:not(.callout):hover .media::after, .card.feature:not(.callout):focus-within .media::after { background-color: var(--overlay-dark); } .card.feature .content { color: var(--white); gap: var(--text-spacing-small); padding: 0; position: relative; } .card.feature:hover .content { color: var(--white); } .card.feature .description { display: grid; grid-template-rows: 0fr; margin-top: 0; opacity: 0; transition: grid-template-rows var(--motion-slow) var(--ease-out), margin-top var(--motion-slow) var(--ease-out), opacity var(--motion-slow) var(--ease-out); } .card.feature .description > * { min-height: 0; overflow: hidden; } .card.feature:hover .description, .card.feature:focus-within .description { grid-template-rows: 1fr; margin-top: var(--text-spacing-xxsmall); opacity: 1; } @media (hover: none) { .card.feature .description { grid-template-rows: 1fr; margin-top: var(--text-spacing-xxsmall); opacity: 1; } } .card.feature .watermark { bottom: 0; height: 62.019%; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; transition: opacity var(--motion-slower) var(--ease-out); width: 60.51%; z-index: 1; } .card.feature .watermark svg { aspect-ratio: 990 / 434; color: var(--white); display: block; height: 100%; max-width: none; opacity: .1; transition: translate var(--motion-slower) var(--ease-out); translate: 50px 50px; width: auto; } .card.feature:hover .watermark, .card.feature:focus-within .watermark { opacity: 1; } .card.feature:hover .watermark svg, .card.feature:focus-within .watermark svg { translate: 0 0; } .card.feature { overflow: visible; } .card.feature .media, .card.feature .media::after { border-radius: 10px; overflow: hidden; } .card.feature .sunray { color: var(--pollen); left: -55px; opacity: 0; pointer-events: none; position: absolute; rotate: -12deg; scale: .7; top: -55px; transition: opacity var(--motion-slower) var(--ease-out), rotate var(--motion-slower) var(--ease-out), scale var(--motion-slower) var(--ease-out); width: 110px; z-index: 2; } .card.feature .sunray svg { display: block; height: auto; max-width: none; width: 100%; } .card.feature:hover .sunray, .card.feature:focus-within .sunray { opacity: 1; rotate: 0deg; scale: 1; } /** Donation cards — the amount sits on the photo, the caption below it **/ .card.donation { background: none; border-radius: 0; gap: var(--text-spacing-small); } .card.donation .media { aspect-ratio: 287 / 216; border-radius: 10px; } .card.donation .media::after { background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75)); border-radius: inherit; content: ''; inset: 0; position: absolute; } .card.donation .amount { bottom: var(--text-spacing-xsmall); color: var(--petal); left: 20px; margin: 0; position: absolute; z-index: 1; } .card.donation .content { padding: 0; } .card.donation .amount .card-link { appearance: none; background: none; border: none; color: inherit; font: inherit; letter-spacing: inherit; padding: 0; } /** Event cards — the photo opens past the container as the page scrolls **/ .card.event:not(.row):not(.compact) { aspect-ratio: 1440 / 694; background: none; border-radius: 0; justify-content: flex-end; padding: 0 0 var(--module-spacing-large) calc(var(--module-spacing-small) + 98px); } .card.event:not(.row):not(.compact) .media { aspect-ratio: auto; background: var(--charcoal); clip-path: inset(0 calc(var(--module-spacing-small) * (1 - var(--jazzy-progress, 0)))); inset: 0; position: absolute; } .card.event:not(.row):not(.compact) .media::after { background: linear-gradient(90deg, var(--overlay-darker) 0%, var(--overlay-darker) 55.3%, rgba(0, 0, 0, .35) 68%, transparent 100%); content: ''; inset: 0; position: absolute; } .card.event:not(.row):not(.compact) .content { color: var(--white); gap: var(--text-spacing-large); max-width: 641px; padding: 0; position: relative; } .card.event:not(.row):not(.compact) .text { gap: var(--text-spacing-small); } .card.event .details { display: flex; flex-direction: column; gap: var(--text-spacing-xsmall); list-style: none; margin: 0; padding: 0; } .card.event .details li { align-items: center; display: flex; gap: 12px; } .card.event .details .icon { background: var(--ray); } /* The pair wraps as whole values rather than squeezing into halves: a venue too long to share a line takes one of its own and the city drops under it, instead of both folding into two narrow columns side by side. The separator has to survive that. It sits in the gap, pulled left by its own width and margin, so between two values on one line it reads exactly as before — and when the second value starts a line, the pull puts the separator past the row's left edge, where the clip takes it. Otherwise the wrapped city would open with a stray rule. Every variant's separator is the same 2px with the same margin, so one pull serves all four. */ .card.event .values { align-items: center; column-gap: calc(var(--text-spacing-xxsmall) * 2 + 2px); display: flex; flex-wrap: wrap; overflow-x: clip; row-gap: 0; } .card.event .values > * + *::before { margin-left: calc(-1 * (var(--text-spacing-xxsmall) + 2px)); } .card.event:not(.row):not(.compact) .values > * + *::before { background: var(--white); content: ''; display: inline-block; height: 16px; margin-right: var(--text-spacing-xxsmall); opacity: .25; vertical-align: middle; width: 2px; } /** Pagination — Jazzy sets the wrapper class; shared by every archive **/ .pagination { align-items: center; display: flex; list-style: none; margin: var(--module-spacing-medium) 0 0; padding: 0; } .pagination li { display: flex; } .pagination:not(:has(.page:not(.current))) { display: none; } .pagination li:has(.previous) { margin-right: auto; } .pagination li:has(.next) { margin-left: auto; } .pagination li:has(:is(.page, .extend)):has(+ li .current) { margin-right: var(--text-spacing-xxsmall); } .pagination li:has(.current) + li:has(:is(.page, .extend)) { margin-left: var(--text-spacing-xxsmall); } .pagination :is(.page, .current, .extend) { align-items: center; border-radius: 30px; color: var(--charcoal); display: flex; font-family: var(--body-font); font-size: calc(13rem / 16); font-weight: 700; height: 32px; justify-content: center; letter-spacing: 1px; line-height: calc(18 / 13); width: 32px; } .pagination .page:not(.current):hover { background: var(--charcoal-10); } .pagination .current { background: var(--aqua); } /** Pagination arrows — the design's Carousel Button, bridged onto Jazzy's classes below **/ .pagination :is(.previous, .next) { align-items: center; display: inline-flex; font-size: 0; } .pagination :is(.previous, .next)::before { background: currentColor; content: ''; height: 13px; mask: url('assets/svgs/arrow.svg') no-repeat center / contain; width: 15px; } .pagination .previous::before { scale: -1 1; } .pagination li:has(.previous):has(+ li .current) .previous, .pagination li:has(.current) + li:has(.next) .next { border-color: var(--charcoal-40); color: var(--charcoal-40); } .pagination li:has(.previous):has(+ li .current) .previous:hover, .pagination li:has(.current) + li:has(.next) .next:hover { background: none; } /** Feature card pair — two .card.feature side by side **/ .feature-pair { display: grid; gap: var(--text-spacing-small); grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0 var(--container-breakout); padding: 0; } /* The row is as tall as the card with the most copy, and the other card matches it. The list item already stretches to the row; making it a flex container is what passes that height on to the card inside, whose own aspect-ratio would otherwise size it and leave the pair uneven. */ .feature-pair > li { display: flex; } /* `min-width: 0`, because a flex item's automatic minimum is its min-content width and a box with an `aspect-ratio` computes that from how tall its copy would be at one word per line — a number far wider than the column. Left alone it pushed both tracks past the container. */ .feature-pair > li > .card { min-width: 0; width: 100%; } /** Callout — the pair below a story: flat dim at rest, a step darker on hover **/ /* Large, and the spacer below cancels exactly this — the two are a pair, so a change to one without the other spends the hover's lift opening a gap instead of moving the copy. */ .card.feature.callout .content { flex: 1; gap: var(--text-spacing-large); justify-content: flex-end; } /* The copy reads from the top of the box and the button stays at its foot, which a spacer between the two carries. Ordered rather than placed: a pseudo-element is always last in source, and this one has to sit between the copy and the button. Its own gap is cancelled, or the space it opens would be paid for twice. */ .card.feature.callout .content::after { content: ''; flex: 1 1 0; margin-bottom: calc(-1 * var(--text-spacing-large)); order: 1; } .card.feature.callout .content > .btn { order: 2; } .card.feature.callout .media::after { background-color: rgba(0, 0, 0, .5); } .card.feature.callout:hover .emphasis.inline, .card.feature.callout:focus-within .emphasis.inline { color: var(--aqua-light); } /* Its own stacking context, so the hover layer's z-index ranks it over the scrim and nothing else. */ .card.feature.callout .media { isolation: isolate; } /* The hover darkens on a layer of its own; changing the scrim's own background mid-hover flickers. */ .card.feature.callout .media::before { background: #000; border-radius: inherit; content: ''; inset: 0; opacity: 0; position: absolute; transition: opacity var(--motion-slow) var(--ease-out); z-index: 1; } .card.feature.callout:hover .media::before, .card.feature.callout:focus-within .media::before { opacity: .15; } /** Row cards — press listings sit on the page background rather than on a card surface **/ .card.row { align-items: center; background: none; border-radius: 0; flex-direction: row; overflow: visible; } .card.row .content { padding: 0; } .card.row .date, .card.row .logo { background: var(--white); border-radius: 10px; flex-shrink: 0; } /** Person card — portrait, name, role, and a read-bio mark **/ .card.person .media { aspect-ratio: 1 / 1; } .card.person .media-fallback svg { max-width: 200px; width: 37.5%; } .card.person .content { gap: 6px; padding-inline: var(--text-spacing-small); } .card.person.has-bio .content { padding-bottom: var(--text-spacing-xxlarge); } .card.person .content > :is(h2, h3, h4, h5, h6) { margin: 0; } .card.person.has-bio > .arrow { bottom: var(--text-spacing-xxsmall); margin: 0; pointer-events: none; position: absolute; right: var(--text-spacing-xxsmall); } .card.person .card-link { appearance: none; background: none; border: none; color: inherit; font: inherit; letter-spacing: inherit; padding: 0; text-align: left; } .card.person:not(.has-bio):hover .media img { transform: none; } .card.person:not(.has-bio):hover .content { color: inherit; } /** Row card - press mention **/ .card.row.mention { gap: var(--text-spacing-large); } .card.row.mention .logo { align-items: center; display: flex; height: 120px; justify-content: center; width: 178px; } .card.row.mention .logo img { height: auto; max-height: 40px; max-width: 120px; width: auto; } .card.row.mention .content { flex: 1; gap: var(--text-spacing-xxsmall); min-width: 0; } .card.row.mention .text { gap: 4px; } .card.row.mention .external { flex-shrink: 0; margin-left: var(--text-spacing-xsmall); } .card.row.mention:hover .external, .card.row.mention:focus-within .external { background: var(--charcoal); color: var(--white); } /** Row card - press release **/ .card.row.release { align-items: flex-start; gap: var(--text-spacing-large); } .card.row.release .date { align-items: center; display: flex; flex-direction: column; font-family: var(--body-font); font-weight: 700; gap: 4px; padding: var(--text-spacing-small) 0; text-align: center; width: 120px; } .card.row.release .date .month, .card.row.release .date .year { font-size: calc(12rem / 16); letter-spacing: 1px; line-height: calc(16 / 12); text-transform: uppercase; } .card.row.release .date .day { color: var(--storm); font-size: calc(48rem / 16); letter-spacing: -1.4px; line-height: calc(56 / 48); } .card.row.release .content { gap: var(--text-spacing-xsmall); } .card.row.release:hover .btn.tertiary, .card.row.release:focus-within .btn.tertiary { color: var(--text-gray); } .card.row.release:hover .btn.tertiary::after, .card.row.release:focus-within .btn.tertiary::after { transform: translateY(-3px); } .card.row.release:hover .btn.tertiary.white, .card.row.release:focus-within .btn.tertiary.white { color: var(--white-muted); } a.card, a.card:hover, .card-link, .card-link:hover { color: inherit; } .card-link::after { content: ''; inset: 0; position: absolute; } .card :is(a, button):not(.card-link), .featured :is(a, button):not(.card-link) { position: relative; z-index: 1; } /*** Buttons ***/ .btn, .wForm .primaryAction { align-items: center; display: inline-flex; font-family: var(--body-font); font-size: calc(14rem / 16); font-weight: 700; letter-spacing: 0.8px; line-height: calc(26 / 14); text-transform: uppercase; transition: background-color var(--motion) var(--ease-out), border-color var(--motion) var(--ease-out), color var(--motion) var(--ease-out), gap var(--motion) var(--ease-out); } .btn.mega { font-size: calc(14rem / 16); font-weight: 700; letter-spacing: 0.8px; line-height: calc(26 / 14); } .btn .text svg { display: block; flex-shrink: 0; height: 9px; width: 9px; } /** Button - Primary **/ .btn.primary, .wForm .primaryAction { background: var(--sun); border: 2px solid transparent; border-radius: 40px; color: var(--charcoal); gap: var(--text-spacing-xxsmall); justify-content: center; padding: 11px 22px; } .btn.primary svg { display: block; flex-shrink: 0; height: 12px; width: 12px; } .btn.primary:not(.jump):hover, .card.feature:hover .btn.primary:not(.jump), .card.feature:focus-within .btn.primary:not(.jump) { gap: 12px; } .btn.primary:hover, .wForm .primaryAction:hover { background: var(--sun-light); } .btn.primary.mega { padding: 17px 38px; } .btn.primary.charcoal { background: var(--charcoal); color: var(--white); } .btn.primary.charcoal:hover { background: var(--text-gray); } .btn.primary.ghost { background: none; border-color: var(--charcoal); color: var(--charcoal); } .btn.primary.ghost:hover { background: var(--charcoal); color: var(--white); } .btn.primary.ghost.white { border-color: var(--white); color: var(--white); } .btn.primary.ghost.white:hover, .card.feature:hover .btn.primary.ghost.white, .card.feature:focus-within .btn.primary.ghost.white { background: var(--white); color: var(--charcoal); } /** Button - Secondary **/ .btn.secondary { color: var(--charcoal); font-size: calc(13rem / 16); gap: var(--text-spacing-xxsmall); letter-spacing: 1px; line-height: calc(18 / 13); } .btn.secondary:hover { gap: 12px; } .btn.secondary.white { color: var(--white); } .btn.secondary .arrow { align-items: center; align-self: center; background: var(--sun); color: var(--charcoal); border-radius: 40px; display: flex; flex-shrink: 0; height: 34px; justify-content: center; transition: background-color var(--motion) var(--ease-out); width: 48px; } .btn.secondary:hover .arrow { background: var(--sun-light); } .btn.secondary .arrow svg { display: block; height: 11px; width: 13px; } .btn.secondary .arrow.external svg { width: 11px; } .btn.secondary .arrow.download svg { height: 15px; width: auto; } .btn.secondary.tiny { font-size: calc(12rem / 16); font-weight: 700; line-height: calc(16 / 12); text-transform: uppercase; } .btn.secondary.tiny .arrow { height: 24px; width: 32px; } .btn.secondary.tiny .arrow svg { height: 8px; width: 8px; } .btn.secondary.large .arrow { height: 48px; width: 64px; } .btn.secondary.large .arrow svg { height: 14px; width: 16px; } .btn.secondary.mega .arrow { height: 64px; width: 80px; } .btn.secondary.mega .arrow svg { height: 17px; width: 20px; } .btn.secondary.jump .arrow { height: 34px; padding: 0; } .btn.secondary.jump .arrow svg { rotate: 90deg; } /* A down arrow sits inside the pill rather than trailing it, so its hover nudge travels into the padding instead of opening the gap and widening the yellow. */ .btn.primary.jump .arrow { align-items: center; display: flex; flex-shrink: 0; justify-content: center; transition: translate var(--motion) var(--ease-out); width: 13px; } .btn.primary.jump:hover .arrow, .card.feature:hover .btn.primary.jump .arrow, .card.feature:focus-within .btn.primary.jump .arrow { translate: 4px 0; } .btn.primary.jump .arrow svg { display: block; height: 13px; rotate: 90deg; width: 15px; } /** Button - Tertiary **/ .btn.tertiary { align-items: flex-start; color: var(--charcoal); flex-direction: column; font-size: calc(12rem / 16); gap: 3px; letter-spacing: 1px; line-height: calc(16 / 12); transition: color var(--motion) var(--ease-out); } .btn.tertiary::after { background: currentColor; content: ''; height: 1.5px; transition: transform var(--motion) var(--ease-out); width: 100%; } .btn.tertiary:hover { color: var(--text-gray); } .btn.tertiary:hover::after { transform: translateY(-3px); } .btn.tertiary .text { align-items: center; display: flex; gap: 6px; } .btn.tertiary.white { color: var(--white); } .btn.tertiary.white:hover { color: var(--white-muted); } /** Button - Underline **/ .btn.underline { } /** Button - Icon **/ .btn.icon { align-items: center; background: var(--sun); border: none; border-radius: 100%; color: var(--charcoal); display: flex; font-size: calc(16rem / 16); height: 48px; justify-content: center; letter-spacing: 0; line-height: calc(17 / 16); padding: 0; width: 48px; } .btn.icon.scrim { background: var(--white-5); color: var(--white); height: 54px; width: 54px; } .btn.icon.scrim:hover { background: var(--white-15); } .btn.icon:hover { background: var(--sun-light); } /* Sits over moving pictures, so it recedes onto the same scrim as the scenes' dots rather than competing with the frame. */ .btn.icon.pause { background: var(--overlay-scrim-strong); color: var(--white); font-size: calc(12rem / 16); height: 40px; transition: color var(--motion-fast) var(--ease-out); width: 40px; } .btn.icon.pause:hover { background: var(--overlay-scrim-strong); color: var(--sun); } .btn.icon.pause:focus-visible { box-shadow: 0 0 0 2px var(--focus-halo); outline: 2px solid var(--focus-ring); } /** Button - Arrow (circular) **/ .btn.arrow { background: none; border: 2px solid var(--charcoal); border-radius: 100%; color: var(--charcoal); height: 54px; justify-content: center; letter-spacing: 0; padding: 0; position: relative; width: 54px; } .btn.arrow:hover { background: var(--sun); } .btn.arrow::before { background: currentColor; content: ''; height: 2px; position: absolute; right: 20px; transition: right var(--motion) var(--ease-out), width var(--motion) var(--ease-out); width: 1px; } .btn.arrow:hover::before { right: 16px; width: 22px; } .btn.arrow svg { display: block; height: 10px; position: relative; right: 0; rotate: 90deg; transition: right var(--motion) var(--ease-out); width: 20px; } .btn.arrow:hover svg { right: -5px; } .btn.arrow.small { height: 44px; width: 44px; } /** Button - Carousel **/ .btn.carousel, .pagination :is(.previous, .next) { background: none; border: 2px solid var(--charcoal); border-radius: 40px; color: var(--charcoal); height: 48px; justify-content: center; letter-spacing: 0; padding: 0; width: 64px; } .btn.carousel:is(:hover, :focus-visible) { background: var(--sun); color: var(--charcoal); } .pagination :is(.previous, .next):is(:hover, :focus-visible) { background: var(--charcoal); color: var(--white); } /* Whole arrow at rest. It was clipped to the head and released on hover, which is the Arrow Button's behaviour, not this pager's — the comps draw the shaft in both states and only the fill changes. */ .btn.carousel svg { display: block; height: 13px; width: 15px; } /** Button - Chip (the design's Secondary Arrow, standing alone) **/ .btn.chip { background: var(--sun); border: 0; border-radius: 40px; color: var(--charcoal); justify-content: center; letter-spacing: 0; padding: 11.5px 0; width: 48px; } .btn.chip:hover { background: var(--sun-light); } .btn.chip svg { display: block; height: 11px; width: 13px; } .btn.chip.prev svg { scale: -1 1; } .btn.carousel.prev svg { scale: -1 1; } /** Button - External (circular, stroked) **/ .btn.external { background: none; border: 1.5px solid var(--charcoal); border-radius: 100%; color: var(--charcoal); height: 48px; justify-content: center; letter-spacing: 0; padding: 0; width: 48px; } .btn.external:hover { background: var(--charcoal); color: var(--white); } .btn.external svg { display: block; height: 11px; width: 11px; } /** Button rows **/ .buttons { align-items: center; display: flex; flex-wrap: wrap; gap: var(--text-spacing-medium); } /** Navigation link type — likely folds into header/footer structural selectors once those are built **/ .subnav-primary { font-family: var(--body-font); font-size: calc(12rem / 16); font-weight: 700; letter-spacing: 1px; line-height: calc(20 / 12); text-transform: uppercase; } .subnav-cta { font-family: var(--body-font); font-size: calc(12rem / 16); font-weight: 700; letter-spacing: 0.6px; line-height: calc(20 / 12); } .subnav-link { font-family: var(--body-font); font-size: calc(12rem / 16); font-weight: 600; letter-spacing: 0.6px; line-height: calc(20 / 12); } .header-link { font-family: var(--body-font); font-size: calc(14rem / 16); font-weight: 600; letter-spacing: 0.2px; line-height: calc(20 / 14); } .footer-link { font-family: var(--body-font); font-size: calc(18rem / 16); font-weight: 600; letter-spacing: 0.2px; line-height: calc(24 / 18); } /*** Form Styles ***/ input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], input[type="search"], textarea, select:not([multiple]) { background: var(--white); border: 1px solid var(--field-border); border-radius: 40px; color: var(--charcoal); font-family: var(--body-font); font-size: calc(14rem / 16); font-weight: 500; line-height: calc(26 / 14); padding: 12px var(--text-spacing-xsmall) 12px var(--text-spacing-medium); width: 100%; } input::placeholder, textarea::placeholder { color: var(--text-gray-light); font-weight: 400; } input:focus, textarea:focus, select:focus { border-color: var(--storm); } .gfield_label, .embed form label, .wForm label.preField { color: var(--text-gray); display: block; font-family: var(--body-font); font-size: calc(12rem / 16); font-weight: 700; letter-spacing: 1px; line-height: calc(16 / 12); margin-bottom: 4px; margin-left: var(--text-spacing-xsmall); text-transform: uppercase; } .gfield_label > .gfield_required, .embed form label > span { color: var(--text-gray); font-weight: 400; } .gfield_label > .gfield_required::before { content: '*'; } /* The words stay for a screen reader — the asterisk alone names nothing — hidden the way `.accessibility` hides anything else that is read but not seen. */ .gfield_label .gfield_required_text { backface-visibility: hidden; left: -999999999px; opacity: 0; position: absolute; } /* The doubled border is the field's focus indicator, so the global ring is turned off rather than drawn on top of it — two rings on one input read as an error state. */ .gfield :is(input, textarea, select):focus-visible, .embed form :is(input, textarea, select):focus-visible, .wForm .inputWrapper > :is(input, textarea, select):focus-visible { border-color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); outline: none; } .ginput_container--name { display: flex; gap: 10px; } .ginput_container--name > span { display: flex; flex: 1; flex-direction: column; min-width: 0; } .gform-field-label--type-sub { color: var(--text-gray); font-size: calc(12rem / 16); font-weight: 400; letter-spacing: 0.3px; line-height: calc(20 / 12); margin-left: var(--text-spacing-xsmall); padding-top: 4px; } /** Embedded form **/ /* A pasted subscribe form with its platform's dressing stripped (clean_form_embed). Its class names are generated, so only tags and attributes are addressed: a field is a label over an input, and one the platform left untyped is a short text field that shares a row. */ .embed form { display: grid; gap: var(--text-spacing-small) 10px; grid-template-columns: repeat(2, 1fr); } .embed form > div { display: contents; } .embed form > div > div { grid-column: 1 / -1; } .embed form > div > div:empty { display: none; } .embed form > div > div:has(input:not([type])) { grid-column: span 1; } .embed form > .btn { grid-column: 1 / -1; justify-self: start; } /** FormAssembly **/ /* A FormAssembly (tfaforms) embed pasted into a WYSIWYG. Its own stylesheet isn't loaded, so its markup borrows the Gravity Forms dressing above; this block only lays it out. wpautop runs over the paste, so the
s it drops between tags, the empty

s its stray

s leave behind, and the paragraphs that hold nothing but scripts or hidden inputs are taken out of the flow. */ .content-styles p:empty, .content-styles p:has(> script):not(:has(> :not(script, br))), .wForm p:has(> input[type="hidden"]):not(:has(> :not(input[type="hidden"], br))), .wForm br { display: none; } .wForm form { display: flex; flex-direction: column; gap: var(--text-spacing-small); } .content-styles .wForm form > p { margin: 0; } .wForm .oneField { display: flex; flex-direction: column; } .wForm .oneField:first-of-type { margin-top: var(--text-spacing-xxsmall); } .wForm label.reqMark::after { color: var(--text-gray); content: '*'; font-weight: 400; padding-left: 4px; } /* A choice group has no input to sit in from, so its boxes follow the label, as they do in GF. */ .wForm .inputWrapper:has(> .choices), .wForm .oneField > p { margin-left: var(--text-spacing-xsmall); } .wForm .inputWrapper:has(> .choices) { margin-top: var(--text-spacing-xxsmall); } .wForm .hint { display: block; padding: var(--text-spacing-xxsmall) 0 0 var(--text-spacing-xsmall); } .wForm .inputWrapper:has(> .choices) .hint { padding-left: 0; } .content-styles .wForm .oneField > p { margin: var(--text-spacing-xxsmall) var(--text-spacing-xsmall) 0; } .wForm select:not([multiple]) { appearance: none; background: var(--white) url('assets/svgs/caret-circle.svg') no-repeat right 12px center / 24px; cursor: pointer; padding-right: 48px; } .wForm .actions { margin-top: var(--text-spacing-xsmall); } .wForm .primaryAction { border: 2px solid transparent; cursor: pointer; } /* wForms marks a failed field and writes its message after the input. */ .wForm .errFld :is(input:not([type="radio"], [type="checkbox"]), select, textarea) { border-color: var(--error-color); } .wForm .errMsg { color: var(--error-color); font-size: calc(12rem / 16); font-style: italic; padding: 4px 0 0 var(--text-spacing-xsmall); } .wForm .inputWrapper:has(> .choices) .errMsg { padding-left: 0; } /* FormAssembly's own help link, after the form. It carries a class, so the WYSIWYG link rule passes it by. */ .content-styles .wForm .supportInfo { font-size: calc(13rem / 16); line-height: calc(22 / 13); margin: var(--text-spacing-large) 0 0; } .wForm .contactInfoLink { color: var(--text-gray); text-decoration: underline; text-underline-offset: 3px; } .wForm .contactInfoLink:is(:hover, :focus-visible) { color: var(--charcoal); } /** Search field **/ /* Archive filter fold — the one control a phone gets in place of a row of dropdowns. Hidden here: the archives that fold show it in their own mobile block, each deciding what it folds and where it sits. It keeps the button's type and gives up the button's box, so the element selector is there to outrank `.btn.secondary` whatever the order of the files. The disc is the one the search's own mark stands in, carrying the caret the fields draw. */ .filters-bar button.filters-toggle { align-items: center; background: none; border: 0; color: var(--charcoal); display: none; gap: var(--text-spacing-xxsmall); padding: 0; } .filters-toggle .caret { align-items: center; background: var(--charcoal-10); border-radius: 30px; display: flex; flex-shrink: 0; height: 24px; justify-content: center; transition: rotate var(--motion) var(--ease-out); width: 24px; } .filters-toggle .caret svg { display: block; height: 4px; width: 6px; } .filters-toggle[aria-expanded="true"] .caret { rotate: 180deg; } .search-field { align-items: center; border: 1px solid var(--field-border); border-radius: 40px; display: flex; gap: var(--text-spacing-xsmall); justify-content: space-between; padding: 11px var(--text-spacing-xsmall) 11px var(--text-spacing-small); } .search-field input[type="search"] { background: none; border: none; border-radius: 0; color: var(--text-gray); font-size: calc(13rem / 16); line-height: calc(24 / 13); padding: 0; } .search-field input[type="search"]:focus-visible { outline: none; } .search-field:has(input:focus-visible) { border-color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); } .search-field button { align-items: center; background: var(--charcoal-10); border: none; border-radius: 30px; color: var(--charcoal); display: flex; flex-shrink: 0; justify-content: center; padding: 7.5px 6.5px 6.5px 7.5px; } .search-field button svg { display: block; height: 10px; width: 10px; } .gform_fields { display: flex; flex-direction: column; gap: var(--text-spacing-xsmall); } input[type=email], input[type=text], input[type=tel], select, textarea { } input[type=email]:focus:not(:focus-visible), input[type=text]:focus:not(:focus-visible), input[type=tel]:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) { outline: none; } input[type=email]::placeholder, input[type=text]::placeholder, input[type=tel]::placeholder, select::placeholder, textarea::placeholder, select:invalid /* Mark your selects as 'required' to get 'placeholder' styling! */ { opacity: 1; } /* Shown, not hidden: the per-field messages cover a form with required fields, but a form with none — the newsletter — fails with nothing but this summary, and hidden it failed in silence. It is also what takes focus after a failed submit, so the keyboard lands on the reason. */ .gform_validation_errors { border-left: 3px solid var(--error-color); margin-bottom: var(--text-spacing-small); padding-left: var(--text-spacing-xsmall); } .gform_validation_errors:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; } .gform_validation_errors .gform_submission_error { color: var(--error-color); font-family: var(--body-font); font-size: calc(14rem / 16); font-weight: 600; line-height: calc(20 / 14); margin: 0; } .gform_validation_errors .gform-icon { display: none; } .gform_validation_container { display: none !important; } .gform-field-label__text + .gfield_required { padding-left: 4px; } .validation_message { color: var(--error-color); font-size: calc(12rem/16); font-style: italic; padding-top: 4px; } .gfield_description, .wForm .hint, .wForm .oneField > p { color: var(--text-gray); font-size: calc(13rem / 16); letter-spacing: 0; line-height: calc(22 / 13); } /* Indented with the field labels, which sit in from the inputs' rounded ends; a checkbox group has no input to sit in from, so its copy and boxes follow the label instead. */ .gform_wrapper .gfield--type-choice :is(.gfield_description, .ginput_container) { margin-left: var(--text-spacing-xsmall); } .gform_wrapper .gfield--type-choice .gfield_description + .ginput_container { margin-top: var(--text-spacing-xxsmall); } /** Choices — checkbox & radio **/ .gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio, .wForm .choices { display: flex; flex-direction: column; gap: var(--text-spacing-xxsmall); } .gform_wrapper .gchoice, .gform_wrapper .ginput_container_consent, .wForm .oneChoice { align-items: flex-start; display: flex; gap: var(--text-spacing-xxsmall); } .gform_wrapper .gchoice label, .gform_wrapper .gfield_consent_label, .wForm label.postField { color: var(--charcoal); font-size: calc(13rem / 16); font-weight: 600; line-height: calc(22 / 13); } .gform_wrapper input[type="checkbox"], .gform_wrapper input[type="radio"], .wForm input[type="checkbox"], .wForm input[type="radio"] { appearance: none; background: transparent; border: 1px solid var(--field-border); cursor: pointer; flex: none; height: 12px; margin: 5px 0 0; position: relative; transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); width: 12px; } .gform_wrapper input[type="checkbox"], .wForm input[type="checkbox"] { border-radius: 3px; } .gform_wrapper input[type="radio"], .wForm input[type="radio"] { border-radius: 100%; } .gform_wrapper input[type="checkbox"]::after, .gform_wrapper input[type="radio"]::after, .wForm input[type="radio"]::after { background: var(--storm); content: ''; opacity: 0; position: absolute; transition: opacity var(--motion-fast) var(--ease-out); } .gform_wrapper input[type="checkbox"]::after, .wForm input[type="checkbox"]::after { inset: -1px; mask: url('assets/svgs/check-small.svg') no-repeat center / contain; } .gform_wrapper input[type="radio"]::after, .wForm input[type="radio"]::after { border-radius: 100%; inset: 2px; } .gform_wrapper input[type="checkbox"]:checked, .gform_wrapper input[type="checkbox"]:indeterminate, .gform_wrapper input[type="radio"]:checked, .wForm input[type="checkbox"]:checked, .wForm input[type="checkbox"]:indeterminate, .wForm input[type="radio"]:checked { background: var(--aqua); border-color: transparent; } .gform_wrapper input[type="checkbox"]:checked::after, .gform_wrapper input[type="checkbox"]:indeterminate::after, .gform_wrapper input[type="radio"]:checked::after, .wForm input[type="checkbox"]:checked::after, .wForm input[type="checkbox"]:indeterminate::after, .wForm input[type="radio"]:checked::after { opacity: 1; } .gform_wrapper input[type="checkbox"]:indeterminate::after, .wForm input[type="checkbox"]:indeterminate::after { background: linear-gradient(var(--storm), var(--storm)) no-repeat center / 6px 2px; mask: none; } .gform_wrapper .gchoice:hover input:not(:checked, :disabled), .wForm .oneChoice:hover input:not(:checked, :disabled), .gform_wrapper .ginput_container_consent:hover input[type="checkbox"]:not(:checked, :disabled) { border-color: var(--storm); } .gform_wrapper input[type="checkbox"]:focus-visible, .gform_wrapper input[type="radio"]:focus-visible, .wForm input[type="checkbox"]:focus-visible, .wForm input[type="radio"]:focus-visible { box-shadow: 0 0 0 2px var(--focus-halo); outline: 2px solid var(--focus-ring); outline-offset: 2px; } .gform_wrapper input[type="checkbox"]:disabled, .gform_wrapper input[type="radio"]:disabled, .wForm input[type="checkbox"]:disabled, .wForm input[type="radio"]:disabled { cursor: not-allowed; opacity: .5; } /** Multi-select **/ select[multiple] { background: var(--white); border: 1px solid var(--field-border); border-radius: 10px; color: var(--charcoal); font-family: var(--body-font); font-size: calc(14rem / 16); font-weight: 500; line-height: calc(26 / 14); padding: var(--text-spacing-xxsmall); width: 100%; } select[multiple] option { border-radius: 8px; padding: 6px 12px; } select[multiple]:focus-visible { box-shadow: 0 0 0 2px var(--focus-halo); } /** List field **/ .gfield_list_group { align-items: center; display: flex; gap: var(--text-spacing-xsmall); } .gfield_list_group_item { flex: 1; min-width: 0; } .gfield_list_icons { align-items: center; display: flex; flex: none; gap: var(--text-spacing-xsmall); } .gfield_list_icons button { align-items: flex-start; background: none; border: none; color: var(--charcoal); display: inline-flex; flex-direction: column; font-family: var(--body-font); font-size: calc(12rem / 16); font-weight: 700; gap: 3px; letter-spacing: 1px; line-height: calc(16 / 12); padding: 0; text-transform: uppercase; transition: color var(--motion) var(--ease-out), gap var(--motion) var(--ease-out); } .gfield_list_icons button::after { background: currentColor; content: ''; height: 1.5px; width: 100%; } .gfield_list_icons button:hover { color: var(--text-gray); gap: 0; } .gfield_list_icons button:focus-visible { box-shadow: 0 0 0 2px var(--focus-halo); } /*** Lightboxes ***/ dialog::backdrop { background: var(--charcoal); opacity: .6; } /** Location — a map pin's details, opened from the pin **/ .jazzy-dialog.location { background: var(--white); border-radius: 10px; max-width: min(560px, calc(100vw - (2 * var(--container-outer-padding)))); } .jazzy-dialog.location > [data-jazzy-dialog-close] { background: var(--charcoal-10); margin: var(--text-spacing-xsmall) var(--text-spacing-xsmall) 0 0; right: 0; top: 0; } .jazzy-dialog.location > [data-jazzy-dialog-close]:hover { background: var(--charcoal-15); } .jazzy-dialog.location .panel { display: flex; flex-direction: column; gap: var(--text-spacing-xsmall); padding: var(--text-spacing-large); } /* Cleared by the close button's own seat, with the pin's colour carried onto the tag. */ .jazzy-dialog.location .panel > .pill { align-self: flex-start; background: var(--pin, var(--tea-green)); margin-right: var(--text-spacing-xxlarge); } .jazzy-dialog.location .panel > :is(.heading-6, .address, .reach) { margin: 0; } .jazzy-dialog.location .reach { align-items: baseline; display: flex; flex-wrap: wrap; gap: var(--text-spacing-xxsmall); } .jazzy-dialog.location .reach a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .jazzy-dialog.location .reach a:is(:hover, :focus-visible) { color: color-mix(in srgb, currentColor 85%, transparent); text-underline-offset: 3px; } .jazzy-dialog.location .description > * { margin: 0; } .jazzy-dialog.location .description > * + * { margin-top: var(--text-spacing-xsmall); } .jazzy-dialog.location .panel > .btn { align-self: flex-start; margin-top: var(--text-spacing-xsmall); } /** Qgiv — the platform's own form, opened on an amount the page already carries **/ .jazzy-dialog.qgiv { background: transparent; border-radius: 10px; max-height: 90dvh; max-width: 657px; overflow-y: auto; padding: var(--text-spacing-xsmall); } .jazzy-dialog.qgiv[open] { display: flex; flex-direction: column; } .jazzy-dialog.qgiv [data-qgiv-close] { background: var(--white); position: fixed; right: var(--text-spacing-xsmall); top: var(--text-spacing-xsmall); z-index: 1; } .jazzy-dialog.qgiv .mount { min-height: 620px; } /* Qgiv sets this frame's height inline, in pixels, from the form's own content on every step, so no rule here may outrank it — an `!important` height wins and drops the frame to the 150px an iframe defaults to. These two only unset the dialog's 16/9 video rules, for the moment before Qgiv's script has measured anything. */ .jazzy-dialog.qgiv iframe { aspect-ratio: auto; display: block; height: auto; width: 100%; } /* The frame is as tall as the step it is showing; the dialog scrolls to it rather than squeezing it into the flex column. */ .jazzy-dialog.qgiv .mount { flex: none; } .jazzy-dialog { background: var(--charcoal); border: none; margin: auto; max-width: 80vw; padding: 0; width: 100%; } .jazzy-dialog video, .jazzy-dialog iframe { aspect-ratio: 16/9; height: 100%; object-fit: contain; width: 100%; } .jazzy-dialog [data-jazzy-dialog-close] { border: none; padding: 0; position: absolute; right: var(--text-spacing-xxsmall); top: var(--text-spacing-xxsmall); } /** Person bio — the biography read in place, since a person is not a destination on this build **/ .jazzy-dialog.person-bio { background: var(--white); border-radius: 10px; max-height: 90dvh; max-width: min(960px, calc(100vw - (2 * var(--container-outer-padding)))); overflow: hidden auto; } .jazzy-dialog.person-bio[open] { display: grid; grid-template-columns: minmax(0, 1fr) auto; } .jazzy-dialog.person-bio > [data-jazzy-dialog-close] { align-self: start; background: var(--charcoal-10); grid-column: 2; grid-row: 1; margin: var(--text-spacing-xsmall) var(--text-spacing-xsmall) 0 0; position: sticky; right: auto; top: var(--text-spacing-xsmall); } .jazzy-dialog.person-bio > [data-jazzy-dialog-close]:hover { background: var(--charcoal-15); } /* Opening the dialog moves focus to the first thing in it, which is this button — so a tap on a card drew a focus ring nobody asked for. Only the ring goes, and only when the focus did not come from the keyboard: tab to it and it is drawn as it always was. */ .jazzy-dialog [data-jazzy-dialog-close]:focus:not(:focus-visible) { box-shadow: none; outline: none; } .jazzy-dialog.person-bio .panel { column-gap: var(--text-spacing-xxlarge); display: grid; grid-column: 1; grid-row: 1; grid-template-columns: 360px minmax(0, 1fr); padding: var(--text-spacing-xlarge) 0 var(--text-spacing-xlarge) var(--text-spacing-xlarge); } .jazzy-dialog.person-bio .panel:not(:has(.media)) { grid-template-columns: minmax(0, 1fr); } .jazzy-dialog.person-bio .panel:not(:has(.media)) .profile { background: none; margin: 0; padding: 0; } .jazzy-dialog.person-bio .profile { background: var(--linen); margin: calc(-1 * var(--text-spacing-xlarge)) 0 calc(-1 * var(--text-spacing-xlarge)) calc(-1 * var(--text-spacing-xlarge)); padding: var(--text-spacing-xlarge); } .jazzy-dialog.person-bio .profile > * { margin: 0; } .jazzy-dialog.person-bio .media { aspect-ratio: 4 / 5; border-radius: 10px; margin-bottom: var(--text-spacing-xsmall); } .jazzy-dialog.person-bio .meta { margin-top: 6px; } /*** Tooltips — the info mark beside a label, and the note it opens ***/ /* Global rather than the module that drew it first: a figure's caption was the first thing to carry one, and a value prop's label carries the same mark for the same reason. */ .tooltip { display: inline-block; } /* The popup is bounded by the label line rather than by the icon. The icon can sit a few characters from the edge of the screen, and a 240px box centred on it there has nowhere to go but off it — hanging it off the label keeps it inside the column whatever the copy does. */ p:has(> .tooltip) { position: relative; } .tooltip-trigger { align-items: center; background: var(--charcoal-10); border: 0; border-radius: 100%; color: var(--charcoal); cursor: pointer; display: inline-flex; height: 20px; justify-content: center; margin-left: 6px; padding: 0; vertical-align: middle; width: 20px; } /* The glyph is the bar and dot alone — the disc it stands in is the button's own background, so it is sized against that rather than filling it. */ .tooltip-trigger svg { display: block; height: 10px; width: auto; } /* Centred between the label's own edges and capped by them, so it hangs left of centre against the right edge of the column and right of centre against the left, and never past either. It states its own cut because the caption it sits in is a different one per style — Body Small on the Row, an uppercase Small Pill on the Feature Row, which it would otherwise inherit and set the note in capitals. */ .tooltip-popup { background: var(--charcoal); bottom: calc(100% + var(--text-spacing-xxsmall)); color: var(--white); font-size: calc(13rem / 16); font-weight: 400; inset-inline: 0; letter-spacing: 0; line-height: calc(22 / 13); margin-inline: auto; max-width: min(240px, 100%); opacity: 0; padding: var(--text-spacing-xxsmall) var(--text-spacing-small); position: absolute; text-transform: none; transition: opacity var(--motion-fast) var(--ease-out), visibility var(--motion-fast); visibility: hidden; width: max-content; } /* Bridges the gap over the trigger, so a pointer travelling up to read the popup does not pass through a strip where nothing is hovered and take the popup with it. */ .tooltip-popup::after { content: ''; inset: 0 0 -16px; position: absolute; z-index: -1; } /* The caption opens it, not the 20px icon alone. The popup is anchored to the caption's top edge, so on a label that wraps the icon sits a line or two below the popup and the pointer crossed dead ground getting there — the bridge below only ever covered the 8px gap. The icon stays the keyboard and touch target; this is what makes the pointer reach it. */ /* The note is set in the meta cut, which carries the page's grey — on the popup's own charcoal that is a colour reading against a colour. It takes the popup's instead. */ .tooltip-popup .meta { color: inherit; } p:has(> .tooltip):is(:hover, :focus-within) .tooltip-popup { opacity: 1; visibility: visible; } p:has(> .tooltip.is-dismissed) .tooltip-popup { opacity: 0; visibility: hidden; } /*** Breadcrumbs ***/ .breadcrumbs { margin-top: var(--text-spacing-xsmall); padding: 0 var(--text-spacing-xlarge); } .breadcrumbs ol { color: var(--text-gray); display: flex; flex-wrap: wrap; font-size: calc(12rem / 16); font-weight: 700; gap: var(--text-spacing-xxsmall); letter-spacing: 1px; line-height: calc(16 / 12); list-style: none; margin: 0; padding: 0; text-transform: uppercase; } .breadcrumbs a { color: inherit; } .breadcrumbs a:hover, .breadcrumbs a:focus-visible { text-decoration: underline; } .breadcrumbs li + li::before { content: '/'; margin-right: var(--text-spacing-xxsmall); } /*** Accordions ***/ .accordion > :is(h1, h2, h3, h4, h5, h6) { margin: 0; } .accordion button { align-items: center; background: none; border: none; color: var(--charcoal); display: flex; flex-wrap: nowrap; gap: var(--text-spacing-small); padding: var(--text-spacing-medium) 0; text-align: left; width: 100%; } .accordion { display: grid; grid-template-rows: auto 0fr; } .accordion.active { grid-template-rows: auto 1fr; } .accordion > :nth-child(n + 2) { min-height: 0; overflow: hidden; } .accordion:not(.active) > :nth-child(n + 2) { opacity: 0; visibility: hidden; } .accordion button .expand, .accordion button .collapse, .accordion button .toggle { flex-shrink: 0; } .accordion .toggle { align-items: center; border: 2px solid var(--charcoal); border-radius: 100%; color: var(--charcoal); display: flex; height: var(--accordion-toggle, 54px); justify-content: center; position: relative; transition: background-color var(--motion) var(--ease-out), opacity var(--motion) var(--ease-out); width: var(--accordion-toggle, 54px); --accordion-toggle: 54px; } /* An open row's control has already been used; it steps back so the answer beneath it leads. */ .accordion.active .toggle { opacity: .6; } .accordions.style-small .accordion { --accordion-toggle: 44px; } .accordions.style-small .toggle { border-width: 1.5px; } .accordions.style-small .toggle .chevron svg { height: 8px; width: 16px; } /* Both marks sit on the ring rather than in it, so nothing resizes the control. */ .accordion .toggle > span { align-items: center; display: flex; inset: 0; justify-content: center; position: absolute; transition: translate var(--motion) var(--ease-out); } .accordion .toggle svg { display: block; } .accordion .toggle .chevron svg { height: 10px; rotate: 180deg; width: 20px; } .accordion.active .toggle .chevron svg { rotate: 0deg; } /* The shaft is drawn rather than swapped in. It ends on the chevron's own point and grows back from it, so the two never separate mid-transition and nothing overshoots the join. A quarter turn from the rows style, which points its rows across rather than down. */ .accordion .toggle::after { background: currentColor; content: ''; height: 20px; left: 50%; position: absolute; scale: 1 0; transform-origin: center bottom; transition: scale var(--motion) var(--ease-out); translate: -50% -50%; top: 50%; width: 1.5px; } .accordion:not(.active) button:hover .toggle, .accordion:not(.active) button:focus-visible .toggle { background: var(--sun); } .accordion:not(.active) button:hover .toggle .chevron, .accordion:not(.active) button:focus-visible .toggle .chevron { translate: 0 7px; } .accordion:not(.active) button:hover .toggle::after, .accordion:not(.active) button:focus-visible .toggle::after { scale: 1 1; } /* Open, the ring has already been used: hovering it only brings it back to full. */ .accordion.active button:hover .toggle, .accordion.active button:focus-visible .toggle { opacity: 1; } .accordion:not(.active) .collapse, .accordion.active .expand { display: none; } .accordions .accordion { border-bottom: 1px solid var(--charcoal-15); padding: var(--text-spacing-medium) 0; } .accordions .accordion button { gap: var(--text-spacing-xxlarge); justify-content: space-between; padding: 0; } .accordions .accordion button:hover, .accordions .accordion button:focus-visible { color: var(--text-gray); } .accordions .accordion.active > :nth-child(n + 2) { padding-top: var(--text-spacing-xxsmall); } .accordions .accordion > :nth-child(n + 2) { padding-right: calc(var(--accordion-toggle, 54px) + var(--text-spacing-xsmall)); } .accordions .accordion > :nth-child(n + 2) > :first-child { margin-top: 0; } .accordions .accordion > :nth-child(n + 2) > :last-child { margin-bottom: 0; } /*** Content Styles ***/ .content-styles a:not([class]) { color: var(--charcoal); font-weight: bold; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; } .content-styles a:not([class]):is(:hover, :focus-visible) { color: color-mix(in srgb, currentColor 85%, transparent); text-underline-offset: 4px; } .content-styles :is(ul, ol):not([class]) { margin-block: var(--text-spacing-small); } .content-styles :is(ul, ol):not([class]) { padding-left: 20px; } .content-styles ul:not([class]) { list-style: none; } .content-styles ul:not([class]) > li { position: relative; } .content-styles ul:not([class]) > li::before { /* The fallback is the house colour, so a page under no programme is unchanged. A branded page takes the programme's marker instead — this bullet reads as brand furniture, and on IBT it was a third orange sitting beside the button and the hero's facts. */ background: var(--program-marker, var(--apricot)); border-radius: 50%; content: ''; height: 8px; left: -20px; position: absolute; top: calc(0.5lh - 4px); width: 8px; } .content-styles :is(ul, ol):not([class]) > li + li { margin-top: var(--text-spacing-xxsmall); } .content-styles ul:not([class]) > li:has(> a:only-child > img:only-child)::before { content: none; } .content-styles ul:not([class]):has(> li > a:only-child > img:only-child) { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-left: 0; } .content-styles ul:not([class]):has(> li > a:only-child > img:only-child) > li + li { margin-top: 0; } .content-styles ul:not([class]) > li > a:only-child > img:only-child { display: block; height: auto; width: 100%; } .content-styles ul:not([class]) > li > a:has(> img:only-child) { display: block; transition: translate var(--motion) var(--ease-out); } .content-styles ul:not([class]) > li > a:has(> img:only-child):is(:hover, :focus-visible) { translate: 0 -4px; } .content-styles h2:not([class^="heading-"]), .content-styles h4:not([class^="heading-"]) { margin-bottom: var(--text-spacing-xsmall); } .content-styles h3:not([class^="heading-"]) { margin-bottom: var(--text-spacing-xxsmall); } .content-styles * + h2:not([class^="heading-"]) { margin-top: var(--text-spacing-xxlarge); } .content-styles * + h3:not([class^="heading-"]) { margin-top: var(--text-spacing-large); } .content-styles * + h4:not([class^="heading-"]) { margin-top: var(--text-spacing-medium); } .content-styles :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4):not([class^="heading-"]) { margin-top: var(--text-spacing-small); } .alignleft { float: left; margin-right: var(--text-spacing-xsmall); } .alignright { float: right; margin-left: var(--text-spacing-xsmall); } .aligncenter { display: block; margin: 0 auto var(--text-spacing-small); } .alignnone { display: block; margin: 0 0 var(--text-spacing-small); } .wp-caption { max-width: 100%; } /** Body images and their captions — shared by the WYSIWYG and the figure tile **/ .content-styles img { border-radius: 10px; vertical-align: top; } .content-styles :is(figure, .wp-caption), .content-styles .shortcode.figure { margin-block: var(--text-spacing-xlarge); } .content-styles p:not(:has(img ~ img)) > img:first-child, .content-styles p:not(:has(img ~ img)) > :is(a, em, strong):first-child:has(> img:only-child) > img { display: block; margin-bottom: var(--text-spacing-small); margin-top: var(--text-spacing-large); } .content-styles :is(figcaption, .wp-caption-text), .content-styles .shortcode.figure .caption { align-items: center; color: var(--charcoal); display: flex; font-size: calc(13rem / 16); gap: var(--text-spacing-xxsmall); letter-spacing: 0; line-height: calc(22 / 13); margin: var(--text-spacing-small) 0 0; text-align: left; } .content-styles :is(figcaption, .wp-caption-text)::before, .content-styles .shortcode.figure .caption::before { background: var(--dark-teal); content: ''; flex-shrink: 0; height: 20px; mask: url('assets/svgs/logomark.svg') no-repeat center / contain; width: 20px; } /** Body tables — a WYSIWYG's own , and the Table tile's **/ .content-styles table { background: var(--white); border: 1px solid var(--charcoal-15); margin-block: var(--text-spacing-xlarge); width: 100%; } /* script.js boxes each table; the box carries the table's step and scrolls sideways once the columns outgrow it. */ .content-styles .table-scroll { margin-block: var(--text-spacing-xlarge); overflow-x: auto; } .content-styles .table-scroll > table { margin-block: 0; } .content-styles table col { width: auto; } .content-styles table :is(td, th) { font-size: calc(16rem / 16); letter-spacing: -0.1px; line-height: calc(26 / 16); padding: var(--text-spacing-small); text-align: left; vertical-align: top; } .content-styles table :is(td, th) :is(p, ul, ol) { font-size: inherit; line-height: inherit; } .content-styles table :is(td, th) > :first-child { margin-top: 0; } .content-styles table :is(td, th) > :last-child { margin-bottom: 0; } .content-styles table tr + tr > :is(td, th) { border-top: 1px solid var(--charcoal-15); } .content-styles table tbody > tr > :is(td, th):first-child { color: var(--storm); font-weight: 600; width: 22%; } .content-styles table :is(thead th, thead td), .content-styles table:not(:has(thead)) > tbody > tr:first-child > td { background: var(--storm); color: var(--white); font-weight: 600; } /*** Media Contact ***/ .media-contact > * { margin: 0; } .media-contact > * + * { margin-top: var(--text-spacing-xsmall); } .media-contact .person > * { margin: 0; } .media-contact .info > * { margin: 0; } .media-contact .info > * + * { margin-top: 4px; } .media-contact .info a { color: var(--dark-teal); font-weight: 700; text-decoration: underline; } .media-contact .info a:hover, .media-contact .info a:focus-visible { color: var(--charcoal); } /***************************************************************************************************************************************************************************************/ /* HEADER STYLES */ /***************************************************************************************************************************************************************************************/ /* Above the Sticky Navigation module's 20. The takeover is fixed over the whole viewport but its z-index only ranks it among the header's own children, so at 10 the pinned bar on the page underneath painted straight through it. */ #header { display: flex; flex-direction: column; position: relative; z-index: 30; } /* Three things exist only for the mobile panel: the Back control, the call to action the row stands beside the toggle, and the sunburst behind the panel's foot. The desktop bar renders Donate from the menu itself and has no second view to go back to. */ #header #back-to-main-nav, #header .btn.mobile-cta, #header .utility-nav > .watermark { display: none; } /** Overlay — the page's first module paints its own full-bleed background **/ #header.on-light, #header.on-dark { left: 0; position: absolute; right: 0; top: 0; z-index: 30; } #header.on-dark { color: var(--white); } /* The bar over a dark hero: charcoal on the scrim is under 2:1, white clears 3:1. Not while the mobile menu is open — that is a light panel, and the white panels re-set it themselves. */ #header.on-dark:not(.active) { --focus-ring: var(--white); } #header .menu { align-items: center; display: flex; list-style: none; margin: 0; padding: 0; } #header a, #header nav button { align-items: center; color: inherit; display: flex; } #header nav button:not(.btn) { background: none; border: none; cursor: pointer; font-family: var(--body-font); padding: 0; } /** Utility nav **/ #header .utility-nav { align-items: center; background: var(--storm); color: var(--white); display: flex; justify-content: space-between; position: relative; --focus-ring: var(--white); /* Dark band: charcoal reaches 1.5:1 here, white 6.6:1 */ } /* Matched as a child, not a descendant: the two navs are named for the classes the primary and secondary buttons already carry, and the takeover renders inside the primary nav — a button in the panel answering to either name was being styled as though it were the bar itself. */ /* 8 rather than 10: the 2px went into the links, which are 24px tall now — the bar's height has not changed. */ #header .utility-nav > .primary { background: var(--storm-dark); padding: 8px var(--text-spacing-xlarge); } #header .utility-nav .primary .menu { gap: var(--text-spacing-xsmall); } #header .utility-nav .primary .menu > li + li::before { background: var(--white); content: ''; height: 16px; opacity: .25; width: 1px; } #header .utility-nav .primary .menu > li { align-items: center; display: flex; gap: var(--text-spacing-xsmall); } #header .utility-nav .primary a, #header .utility-nav .primary button { font-size: calc(12rem / 16); font-weight: 700; gap: 6px; letter-spacing: 1px; line-height: calc(20 / 12); padding-block: 2px; text-transform: uppercase; transition: background-color var(--motion) var(--ease-out), opacity var(--motion) var(--ease-out); } /* The takeover is fixed over the page at z-index 30 and the primary links are lifted above it, so without this the whole right-hand group — Careers, Events, the language switch — went under the panel the moment it opened. The comp keeps them readable. */ #header .utility-nav > .secondary { position: relative; z-index: 31; } #header .utility-nav > .secondary .menu { gap: var(--text-spacing-small); padding-right: var(--text-spacing-xlarge); } #header .utility-nav > .secondary a, #header .utility-nav > .secondary button { font-size: calc(12rem / 16); font-weight: 600; gap: 4px; letter-spacing: 0.6px; line-height: calc(20 / 12); padding-block: 2px; transition: background-color var(--motion) var(--ease-out), opacity var(--motion) var(--ease-out); } /* The bar's own rows only. Written as a descendant of the nav, the dim reached everything the takeover holds — a card went to 70% white over the storm band, which reads as the panel changing colour rather than as a row being hovered, and each Learn more went with it. */ #header .utility-nav .primary .menu > li > :is(a, button):is(:hover, :focus-visible), #header .utility-nav > .secondary li:not(.subnav-cta) :is(a, button):is(:hover, :focus-visible) { opacity: .75; } #header .utility-nav .subnav-cta > a { background: var(--sun); border-radius: 40px; color: var(--charcoal); font-weight: 700; padding: 4px 14px; } #header .utility-nav .subnav-cta > a:hover { background: var(--sun-light); } /** Language switcher **/ /* Its own `.open` state, not `.menu-item-has-children.active`: the megamenu script and the mobile panel's `sub-open` view both key on that pair. */ #header .utility-nav .language-switcher { position: relative; } #header .utility-nav .language-switcher .flag { display: block; flex-shrink: 0; } #header .utility-nav .language-switcher .flag img { border-radius: 2px; display: block; height: 14px; width: 18px; } #header .utility-nav .language-switcher.open > button > .menu-caret { transform: rotate(180deg); } /* Above the secondary nav's own lift (31), so it clears an open takeover. */ #header .utility-nav .language-menu { background: var(--white); border-radius: 8px; box-shadow: 0 8px 24px var(--charcoal-25); color: var(--charcoal); list-style: none; margin: 0; min-width: 168px; opacity: 0; padding: 6px; position: absolute; right: 0; top: calc(100% + 8px); transform: translateY(-4px); transition: opacity var(--motion) var(--ease-out), transform var(--motion) var(--ease-out), visibility 0s var(--motion); visibility: hidden; z-index: 32; --focus-ring: var(--charcoal); /* White panel: the band's white ring vanishes here */ } #header .utility-nav .language-switcher.open > .language-menu { opacity: 1; transform: none; transition-delay: 0s; visibility: visible; } #header .utility-nav .language-menu a { border-radius: 4px; gap: 8px; letter-spacing: 0; padding: 8px 10px; text-transform: none; white-space: nowrap; } #header .utility-nav .language-menu a:is(:hover, :focus-visible) { background: var(--charcoal-5); opacity: 1; } #header .utility-nav .language-menu a[aria-current] { font-weight: 700; } #header .utility-nav .language-menu .check { display: flex; margin-left: auto; padding-left: 8px; } #header .utility-nav .language-menu .check svg { display: block; height: 12px; width: 12px; } /** Main nav **/ /* Positioned for the graphic megamenu, which spans the whole bar rather than its own item and so has nothing nearer to anchor to. Against #header it would clear the section subnav as well, and open a band lower on the pages that carry one. */ #header .main-nav { align-items: center; display: flex; justify-content: space-between; padding: var(--text-spacing-xsmall) var(--text-spacing-xlarge); position: relative; transition: background var(--motion) var(--ease-out), color var(--motion) var(--ease-out); } #header .main-nav .logo { flex-shrink: 0; width: 152px; } #header .main-nav .logo svg { display: block; height: auto; width: 100%; } #header .main-nav nav .menu { gap: var(--text-spacing-medium); } #header .main-nav nav .menu > li > a, #header .main-nav nav .menu > li > button { font-size: calc(14rem / 16); font-weight: 600; gap: 6px; letter-spacing: 0.2px; line-height: calc(20 / 14); } #header .menu-caret { align-items: center; align-self: center; background: var(--charcoal-10); border-radius: 30px; display: flex; flex-shrink: 0; padding: 9px 7px 7px; transition: background var(--motion) var(--ease-out), transform var(--motion) var(--ease-out); } #header .menu-item-has-children.active > a > .menu-caret, #header .menu-item-has-children.active > button > .menu-caret { transform: rotate(180deg); } #header .menu-caret svg { display: block; height: 4px; width: 6px; } #header .utility-nav .menu-caret { background: none; padding: 0; } #header .main-nav nav .menu > li.nav-btn > a, #header .main-nav nav .menu > li.nav-btn > button { background: var(--sun); border-radius: 40px; color: var(--charcoal); font-size: calc(13rem / 16); font-weight: 700; letter-spacing: 0.6px; line-height: calc(20 / 13); padding: 10px 20px; text-transform: uppercase; } #header .main-nav nav .menu > li.nav-btn > a:hover, #header .main-nav nav .menu > li.nav-btn > button:hover { background: var(--sun-light); } /** On dark **/ #header.on-dark .main-nav { color: var(--white); } #header.on-dark:not(.active) .main-nav .menu-caret { background: var(--white-10); } /** Overlay — hovered, focused, or holding an open panel **/ #header:is(.on-light, .on-dark) .main-nav:has(.menu-item-has-children:is(.active, :focus-within), .menu-item-has-children > :is(a, button):hover) { background: var(--white); color: var(--charcoal); --focus-ring: var(--charcoal); } #header.on-dark .main-nav:has(.menu-item-has-children:is(.active, :focus-within), .menu-item-has-children > :is(a, button):hover) .menu-caret { background: var(--charcoal-10); } .alert-bar.desktop-only ~ #header { margin-top: 38px; } #menu-main { align-items: center; display: flex; gap: var(--text-spacing-xlarge); } #menu-main.has-scroll:before { background: linear-gradient(to bottom, transparent, var(--off-white)); bottom: 0; content: ''; height: 140px; left: 0; opacity: 0; pointer-events: none; position: fixed; transition: all var(--motion) var(--ease-out); width: 100%; z-index: 5; } #menu-main.has-scroll:has(.menu-item-has-children.active):before { opacity: 1; } #menu-main > .menu-item > button { background: none; border: none; cursor: pointer; padding: 0; } #menu-main > .menu-item > a, #menu-main > .menu-item > button { display: flex; } #header .main-nav nav { align-self: stretch; display: flex; } #menu-main > .menu-item:not(.nav-btn) { align-self: stretch; } #menu-main > .menu-item:not(.nav-btn) > a, #menu-main > .menu-item:not(.nav-btn) > button { height: 100%; } #menu-main > .menu-item-has-children > a, #menu-main > .menu-item-has-children > button { position: relative; z-index: 5; } #menu-main > .menu-item > .menu-caret { display: block; flex-shrink: 0; } #menu-main > .menu-item > .menu-caret svg { } #menu-main > .menu-item:hover > a, #menu-main > .menu-item:hover > button { } #menu-main .menu-label { transition: opacity var(--motion) var(--ease-out); } #menu-main:has(> .menu-item:hover) > .menu-item:not(:hover) > :is(a, button) > .menu-label { opacity: .75; } /*** Mega Menu ***/ #menu-main > .menu-item-has-children { position: relative; } #menu-main .sub-menu { background: var(--white); border-radius: 10px; box-shadow: var(--shadow-subtle); display: block; min-width: 280px; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; top: 100%; transform: translate3d(0, -15px, 0); transition: opacity var(--motion) var(--ease-in-out), transform var(--motion) var(--ease-in-out), visibility 0s .25s; visibility: hidden; z-index: -2; } #menu-main .sub-menu { margin-top: var(--text-spacing-xxsmall); padding: 12px; } #menu-main .sub-menu li { margin: 0; } #menu-main .sub-menu a { border-radius: 8px; color: var(--charcoal); display: block; font-family: var(--body-font); font-size: calc(14rem / 16); font-weight: 600; letter-spacing: 0.2px; line-height: calc(20 / 14); padding: 10px 12px; white-space: nowrap; } #menu-main > .menu-item-has-children:not(:has(~ .menu-item-has-children)) > .sub-menu:not(.graphic_links) { left: auto; right: 0; } #menu-main .sub-menu a:hover, #menu-main .sub-menu a:focus-visible { background: var(--teal-pale); color: var(--charcoal); } /** Megamenu: graphic links **/ #menu-main > .menu-item-has-children:has(> .sub-menu.graphic_links) { position: static; } #menu-main .sub-menu.graphic_links { background: none; border-radius: 0; box-shadow: none; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; left: 0; margin: 0; min-width: 0; padding: 0; right: 0; top: 100%; } #menu-main .sub-menu.graphic_links > li { min-width: 0; } /* A grid rather than a flex row so the label and the arrow are one row: `align-content: end` holds that row on the foot of the photograph, and `align-items: center` centres each of the two in it. Bottom-aligned, which is what a flex row did, put a single line of label on the arrow's bottom edge instead of across its middle — and it did it differently again as soon as a tile carried a second line. */ #menu-main .sub-menu.graphic_links > li > a { align-content: end; align-items: center; background: var(--charcoal); border-radius: 0; color: var(--white); display: grid; grid-template-columns: minmax(0, 1fr) auto; height: 360px; overflow: hidden; padding: var(--text-spacing-xsmall); position: relative; white-space: normal; } #menu-main .sub-menu.graphic_links .media { aspect-ratio: auto; inset: 0; position: absolute; } #menu-main .sub-menu.graphic_links > li > a::before { background: linear-gradient(180deg, transparent, #000); bottom: 0; content: ''; height: 100px; left: 0; position: absolute; right: 0; transition: height var(--motion) var(--ease-out), opacity var(--motion) var(--ease-out); z-index: 1; } #menu-main .sub-menu.graphic_links > li > a:hover::before, #menu-main .sub-menu.graphic_links > li > a:focus-visible::before { height: 160px; } #menu-main .sub-menu.graphic_links > li > a:not(:has(.media))::before { content: none; } /*** Audience panel — the audience bar's dropdown ***/ html.has-takeover { overflow: hidden; } #header .utility-nav .menu-item-has-children:has(> .sub-menu.audience) { position: static; } /* A row that opens no panel still has to clear the one that is open: the takeover is fixed over the whole page and only the rows that carry a panel were lifted above it, so For Contractors went under a takeover it has nothing to do with. */ #header .utility-nav .primary .menu > li:not(:has(> .sub-menu.audience)) { position: relative; z-index: 31; } #header .utility-nav .menu-item-has-children:has(> .sub-menu.audience) > a, #header .utility-nav .menu-item-has-children:has(> .sub-menu.audience) > button { position: relative; z-index: 31; } #header .utility-nav .sub-menu.audience { background: var(--storm); border-radius: 0; box-shadow: none; color: var(--white); display: block; inset: 0; margin: 0; min-width: 0; opacity: 0; overflow: hidden auto; overscroll-behavior: contain; padding: calc(var(--module-spacing-large) + var(--text-spacing-xxlarge)) 0 var(--module-spacing-medium); pointer-events: none; position: fixed; transition: opacity var(--motion) var(--ease-in-out), visibility 0s .25s; visibility: hidden; z-index: -2; } #header .utility-nav .menu-item-has-children.active > .sub-menu.audience { opacity: 1; pointer-events: auto; transition: opacity var(--motion) var(--ease-in-out); visibility: visible; z-index: 30; } #header .utility-nav .sub-menu.audience .grid { margin-inline: var(--container-breakout-full); position: relative; z-index: 1; } #header .utility-nav .sub-menu.audience > .panel > .watermark { aspect-ratio: 803 / 444; bottom: 0; color: var(--white-5); left: 0; overflow: hidden; pointer-events: none; position: fixed; width: calc(803 / 1440 * 100vw); } /* The mark is wider than the window it shows through — the window crops it. Without max-width the global img/svg clamp holds it to the window's width, and it lands 92px short of the foot of the screen; the comp sticks it to the bottom of the viewport. */ #header .utility-nav .sub-menu.audience > .panel > .watermark svg { display: block; margin-left: calc(-211 / 803 * 100%); max-width: none; width: calc(1014 / 803 * 100%); } #header .utility-nav .sub-menu.audience > .panel > .close { font-size: calc(24rem / 16); position: fixed; right: var(--text-spacing-xlarge); top: var(--module-spacing-small); z-index: 10; } #header .utility-nav .sub-menu.audience .promo :is(.short, .btn.chip) { display: none; } /** Left — the statement and its offramps **/ #header .utility-nav .sub-menu.audience .intro { align-items: flex-start; display: flex; flex-direction: column; gap: var(--text-spacing-xlarge); grid-column: 1 / span 6; padding-right: var(--text-spacing-xlarge); } #header .utility-nav .sub-menu.audience .statement { color: var(--tea-green); text-transform: none; } #header .utility-nav .sub-menu.audience .statement > * { margin: 0; } #header .utility-nav .sub-menu.audience .promos { align-items: flex-start; display: flex; flex-direction: column; gap: var(--text-spacing-xlarge); padding-right: var(--text-spacing-xxlarge); } #header .utility-nav .sub-menu.audience .promo { align-items: flex-start; color: var(--white); display: flex; font-size: inherit; gap: var(--text-spacing-xsmall); letter-spacing: normal; text-transform: none; white-space: normal; } #header .utility-nav .sub-menu.audience .promo .icon { align-items: center; background: var(--petal-40); /* The panel is dark and the disc is pale, so the glyph cannot inherit the panel's white. */ color: var(--charcoal); border-radius: 100%; display: flex; flex-shrink: 0; height: 48px; justify-content: center; width: 48px; } /* Both answers ride the row and CSS picks: the takeover has room for a drawn glyph, the panel on a phone shows the photograph beside a short label. Either alone still draws. */ #header .utility-nav .sub-menu.audience .promo:has(.icon.glyph) .icon.photo { display: none; } #header .utility-nav .sub-menu.audience .promo .icon > svg { height: 24px; width: 24px; } #header .utility-nav .sub-menu.audience .promo .icon > img { height: 24px; object-fit: contain; width: 24px; } /* The bar sets type on every link beneath it, so a tertiary button here arrives on the bar's 20px line with its 6px gap, and the rule fell away from the label. Restated as the values .btn.tertiary sets, so the offramp reads as the same button it is everywhere else. */ #header .utility-nav .sub-menu.audience .promo .btn.tertiary { gap: 3px; line-height: calc(16 / 12); } /* "#header a { color: inherit }" outranks .btn.tertiary.white:hover, so the offramp took the panel's white and held it — the one part of the tertiary hover that never arrived. */ #header .utility-nav .sub-menu.audience .promo .btn.tertiary:hover { color: var(--white-muted); } #header .utility-nav .sub-menu.audience .promo > .text { align-items: flex-start; display: flex; flex-direction: column; gap: var(--text-spacing-xsmall); } /** Right — an optional lead, then the section's pages **/ #header .utility-nav .sub-menu.audience .groups { display: flex; flex-direction: column; gap: var(--text-spacing-large); grid-column: 7 / span 6; } #header .utility-nav .sub-menu.audience .lead { align-items: flex-start; display: flex; flex-direction: column; } #header .utility-nav .sub-menu.audience .lead > * { margin: 0; } #header .utility-nav .sub-menu.audience .lead > .btn { margin-top: var(--text-spacing-small); } /* The overview is drawn two ways, and which one is authored on the menu item rather than read off which fields are filled. Below 1200 neither is drawn: the panel is the phone's, and keeps only the button, as a line of copy under the rows. */ @media only screen and (min-width: calc(1201rem/16)) { /* Card — the overview stands at the head of the list as one more of its cards, and takes the same shape. Its heading and the button's label are different strings: the label is the narrow panel's line. */ #header .utility-nav .sub-menu.audience .lead.style-card { align-items: center; background: var(--white); border-radius: 10px; color: var(--charcoal); flex-direction: row; gap: var(--text-spacing-small); order: -1; padding: var(--text-spacing-xsmall); position: relative; transition: background-color var(--motion) var(--ease-out); } #header .utility-nav .sub-menu.audience .lead > .media { aspect-ratio: 132 / 100; background: var(--linen); border-radius: 8px; flex: none; overflow: hidden; width: 132px; } #header .utility-nav .sub-menu.audience .lead > .media img { height: 100%; object-fit: cover; transition: transform var(--motion) var(--ease-out); width: 100%; } #header .utility-nav .sub-menu.audience .lead.style-card:is(:hover, :focus-within) > .media img { transform: scale(1.05); } #header .utility-nav .sub-menu.audience .lead.style-card > .text { display: flex; flex: 1; flex-direction: column; min-width: 0; } /* The button is the card's only anchor, so it covers the card; on this treatment its label belongs to the narrow panel and only the arrow is drawn. */ #header .utility-nav .sub-menu.audience .lead.style-card > .btn { align-self: flex-end; font-size: 0; gap: 0; letter-spacing: 0; margin: 0; } #header .utility-nav .sub-menu.audience .lead.style-card > .btn::after { content: ''; inset: 0; position: absolute; } #header .utility-nav .sub-menu.audience .lead.style-card > .btn .arrow { transition: background-color var(--motion) var(--ease-out), translate var(--motion) var(--ease-out); } #header .utility-nav .sub-menu.audience .lead.style-card:is(:hover, :focus-within) > .btn .arrow { background: var(--sun-light); translate: 4px 0; } /* The label belongs to the rows below it, and with the overview card standing at the head of the same list the comp drops it. A second, named group keeps its own. */ #header .utility-nav .sub-menu.audience .lead.style-card + .group > .eyebrow { display: none; } /* A lead drawn as a card is one of the cards, so it closes to the list's own gap. Written as a negative margin rather than a gap on .groups: :has() cannot be nested inside :has(), so ".groups:has(> .lead.style-card)" would have been the tidier selector had .lead needed one. */ #header .utility-nav .sub-menu.audience .lead.style-card { margin-bottom: calc(var(--text-spacing-xsmall) - var(--text-spacing-large)); } /* The gap opening is a 4px push and the disc lightens, which is the site's secondary hover — on this band it does not read, so the arrow also travels, the way the card's does. */ #header .utility-nav .sub-menu.audience .lead.style-feature > .btn .arrow { transition: background-color var(--motion) var(--ease-out), translate var(--motion) var(--ease-out); } #header .utility-nav .sub-menu.audience .lead.style-feature > .btn:is(:hover, :focus-visible) .arrow { translate: 4px 0; } /* Feature — the overview stands above the list under its own heading, on a rule. */ #header .utility-nav .sub-menu.audience .lead.style-feature > .text { display: flex; flex-direction: column; gap: var(--text-spacing-xxsmall); } #header .utility-nav .sub-menu.audience .lead.style-feature + .group { border-top: 1px solid var(--white-15); padding-top: var(--text-spacing-large); } } #header .utility-nav .sub-menu.audience .group { display: flex; flex-direction: column; gap: var(--text-spacing-small); } #header .utility-nav .sub-menu.audience .group > .eyebrow { color: var(--white); margin: 0; } #header .utility-nav .sub-menu.audience .cards { display: flex; flex-direction: column; gap: var(--text-spacing-xsmall); } /* A row is an inside the utility bar, so it arrives bold, uppercase, 12px and tracked out. Everything a card sets it sets from scratch — the weight included, or the description under each title reads Bold where the comp sets Regular. */ #header .utility-nav .sub-menu.audience .row { --focus-ring: var(--charcoal); align-items: center; background: var(--white); border-radius: 10px; color: var(--charcoal); display: flex; font-size: inherit; font-weight: 400; gap: var(--text-spacing-small); letter-spacing: normal; padding: var(--text-spacing-xsmall); text-transform: none; white-space: normal; } #header .utility-nav .sub-menu.audience .row .media { aspect-ratio: 132 / 100; background: var(--linen); border-radius: 8px; flex: none; overflow: hidden; position: relative; width: 132px; } #header .utility-nav .sub-menu.audience .row .media:not(:has(img)) { display: none; } #header .utility-nav .sub-menu.audience .row .text { display: flex; flex-direction: column; min-width: 0; } #header .utility-nav .sub-menu.audience .row .description { color: var(--charcoal); } #header .utility-nav .sub-menu.audience .row .chip { align-self: flex-end; flex: none; margin-left: auto; transition: background-color var(--motion) var(--ease-out), translate var(--motion) var(--ease-out); } #header .utility-nav .sub-menu.audience .row .media img { transition: transform var(--motion) var(--ease-out); } /* The same three moves the overview card at the head of the list makes. The chip's own `:hover` only fires with the pointer on the chip itself, and the row is the link — so the row says it. */ #header .utility-nav .sub-menu.audience .row:is(:hover, :focus-visible) .chip { background: var(--sun-light); translate: 4px 0; } #header .utility-nav .sub-menu.audience .row:is(:hover, :focus-visible) .media img { transform: scale(1.05); } #menu-main .sub-menu.graphic_links > li > a::after { background: var(--white); content: ''; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity var(--motion) var(--ease-out); z-index: 2; } #menu-main .sub-menu.graphic_links:has(> li > a:hover) > li > a:not(:hover)::after, #menu-main .sub-menu.graphic_links:has(> li > a:focus-visible) > li > a:not(:focus-visible)::after { opacity: .25; } #menu-main .sub-menu.graphic_links:has(> li > a:hover) > li > a:not(:hover)::before, #menu-main .sub-menu.graphic_links:has(> li > a:focus-visible) > li > a:not(:focus-visible)::before { opacity: .75; } #menu-main .sub-menu.graphic_links > li > a:focus-visible { box-shadow: none; outline: none; } #menu-main .sub-menu.graphic_links > li > a:focus-visible::after { background: none; border: 2px solid var(--focus-halo); box-shadow: inset 0 0 0 2px var(--focus-ring); opacity: 1; transition-duration: 0s; } #menu-main .sub-menu.graphic_links .text { display: flex; flex-direction: column; gap: var(--text-spacing-xxsmall); min-width: 0; position: relative; transition: transform var(--motion) var(--ease-out); z-index: 3; } #menu-main .sub-menu.graphic_links .label { font-size: calc(13rem / 16); font-weight: 700; letter-spacing: 1px; line-height: calc(18 / 13); text-transform: uppercase; } #menu-main .sub-menu.graphic_links > li > a:hover .text, #menu-main .sub-menu.graphic_links > li > a:focus-visible .text { transform: translateY(-10px); } #menu-main .sub-menu.graphic_links .arrow { align-items: center; position: relative; z-index: 3; border: 1px solid var(--white); border-radius: 40px; display: flex; flex-shrink: 0; height: 34px; justify-content: center; transition: background-color var(--motion) var(--ease-out), border-color var(--motion) var(--ease-out), color var(--motion) var(--ease-out); width: 48px; } #menu-main .sub-menu.graphic_links .arrow svg { display: block; height: 11px; width: 13px; } #menu-main .sub-menu.graphic_links > li > a:hover .arrow, #menu-main .sub-menu.graphic_links > li > a:focus-visible .arrow { background: var(--sun); border-color: var(--sun); color: var(--charcoal); } #menu-main .menu-item-has-children.active > .sub-menu { opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0); transition: opacity var(--motion) var(--ease-in-out), transform var(--motion) var(--ease-in-out), visibility 0s 0s; visibility: visible; z-index: 4; } /** Megamenu: scrim **/ html::after { background: var(--overlay-nav); content: ''; inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity var(--motion) var(--ease-in-out), visibility 0s .25s; visibility: hidden; z-index: 9; } html:has(#header:not(.active) #menu-main > .menu-item-has-children.active)::after { opacity: 1; transition: opacity var(--motion) var(--ease-in-out), visibility 0s 0s; visibility: visible; } #header:not(.active):has(#menu-main > .menu-item-has-children.active) { background: var(--off-white); --focus-ring: var(--charcoal); } /*** Alert Bar ***/ .alert-bar { background: var(--charcoal); color: var(--white); left: 0; margin: 0; overflow-x: auto; overflow-y: hidden; padding: var(--text-spacing-xxsmall) var(--container-outer-padding); position: absolute; text-align: center; top: 0; white-space: nowrap; width: 100%; z-index: 4; } /***************************************************************************************************************************************************************************************/ /* FOOTER STYLES */ /***************************************************************************************************************************************************************************************/ #footer { color: var(--white); overflow-x: clip; position: relative; --focus-ring: var(--white); /* Storm band: charcoal reaches 1.8:1 here */ } #footer::before { background: var(--storm); bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: var(--footer-callout-overlap); } #footer:not(:has(.cta))::before { top: 0; } /* Three lengths that have to move together — the clip box, its width and the drawing inside it — so the breakpoints scale them from one number rather than restating all three. */ #footer .watermark { --footer-watermark: 1; bottom: 0; display: block; height: calc(530px * var(--footer-watermark)); overflow: hidden; pointer-events: none; position: absolute; right: 0; width: calc(945px * var(--footer-watermark)); } #footer .watermark svg { display: block; height: 100%; max-width: none; opacity: .05; width: calc(1210px * var(--footer-watermark)); } #footer .cta, #footer .main { position: relative; } /** Intro block **/ #footer .cta { display: grid; } #footer .cta > * { grid-column: 1; grid-row: 1; } #footer .cta .media { aspect-ratio: auto; background: var(--storm-dark); clip-path: inset(0 calc(var(--module-spacing-small) * (1 - var(--jazzy-progress, 0)))); } #footer .cta .media img { transform: scale(calc(1 + 0.06 * (1 - var(--jazzy-progress, 0)))); transform-origin: center; } #footer .cta .media::after { background: var(--overlay-dark); content: ''; inset: 0; position: absolute; } #footer .cta .intro { align-items: flex-start; display: flex; gap: 120px; margin: 0 auto; max-width: var(--container-max-width); padding-block: 140px; padding-inline: calc(var(--container-outer-padding) + max(0px, var(--module-spacing-small) - var(--container-outer-margin))); position: relative; width: var(--container-width); } #footer .cta .logo { color: inherit; display: block; flex-shrink: 0; width: 271px; } #footer .cta .logo svg { display: block; height: auto; width: 100%; } #footer .cta .content { align-items: flex-start; display: flex; flex-direction: column; gap: var(--text-spacing-medium); padding-top: var(--text-spacing-xxsmall); } #footer .cta .content p { margin: 0; max-width: 805px; } /** Link columns **/ #footer .main { margin: 0 var(--module-spacing-small); padding: var(--module-spacing-medium) var(--text-spacing-xsmall) var(--text-spacing-xxlarge); } #footer .main > nav > .menu { display: grid; gap: var(--text-spacing-xxlarge); grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; } #footer .main > nav > .menu > li { align-items: flex-start; display: flex; flex-direction: column; gap: var(--text-spacing-medium); } #footer .sub-menu { align-self: stretch; display: flex; flex-direction: column; gap: var(--text-spacing-small); list-style: none; margin: 0; padding: 0 0 0 var(--text-spacing-xxsmall); } #footer .sub-menu a { color: inherit; display: block; font-size: calc(18rem / 16); font-weight: 600; letter-spacing: 0.2px; line-height: calc(24 / 18); } /* .75 is the last step that keeps white on the storm band at 4.5:1 at these sizes. */ #footer .sub-menu a:is(:hover, :focus-visible) { opacity: .75; } /** Legal & social **/ #footer .legal-social { --focus-ring: var(--charcoal); align-items: center; display: flex; gap: var(--text-spacing-small); justify-content: space-between; margin-top: var(--module-spacing-large); } #footer .legal { align-items: center; background: var(--white); border-radius: 64px; color: var(--charcoal); display: flex; gap: var(--text-spacing-xsmall); min-height: 64px; padding: var(--text-spacing-xsmall) var(--text-spacing-large) var(--text-spacing-xsmall) var(--text-spacing-medium); } #footer .legal .mark { color: var(--dark-teal); display: block; flex-shrink: 0; width: 25px; } #footer .legal .mark svg { display: block; height: auto; width: 100%; } #footer .legal p { font-size: calc(12rem / 16); line-height: calc(18 / 12); margin: 0; white-space: nowrap; } /* The rule is out of the flow, and the row is indented past it by exactly what it and its gap used to occupy — so every link sits where it always did, and a second row starts under the first link rather than under the rule. A wrapped line belongs to the list, not to the mark that separates the list from the copyright. */ #footer .legal .menu { align-items: center; display: flex; flex-wrap: wrap; gap: 4px var(--text-spacing-xsmall); list-style: none; margin: 0; padding: 0 0 0 calc(1px + var(--text-spacing-xsmall)); position: relative; } #footer .legal .menu::before { background: var(--charcoal); content: ''; height: 16px; left: 0; opacity: .25; position: absolute; /* On the first row rather than the middle of the block, which is where centring a flex item put it while it was one. The row is the links' 18px line box plus the 4px they pad either side of it, so this is half of what that leaves over the 16px rule. */ top: calc((18px + 8px - 16px) / 2); width: 1px; } #footer .legal .menu a { color: inherit; display: inline-block; font-size: calc(12rem / 16); font-weight: 600; line-height: calc(18 / 12); opacity: .75; padding-block: 4px; text-decoration: underline; white-space: nowrap; } #footer .legal .menu a:is(:hover, :focus-visible) { opacity: 1; } #footer .social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; } /*** Sticky Toast ***/ .sticky-toast { background: var(--charcoal); bottom: 10px; box-shadow: var(--shadow-strong); color: var(--white); max-width: calc(100% - 20px); opacity: 1; padding: var(--text-spacing-medium); pointer-events: auto; position: fixed; right: 10px; transition: opacity var(--motion-fast) var(--ease-out), visibility var(--motion-fast) var(--ease-out); visibility: visible; width: 360px; z-index: 99; } .sticky-toast.hidden { opacity: 0; pointer-events: none; visibility: hidden; } .sticky-toast button { background: none; border: none; border-radius: 0; color: var(--white); font-size: calc(18rem/16); line-height: 0; padding: 9px 12px; position: absolute; right: 5px; top: 5px; } .sticky-toast button:hover { opacity: .6; } .sticky-toast h2, .sticky-toast p { margin-bottom: var(--text-spacing-xxsmall); } /***************************************************************************************************************************************************************************************/ /* DEFAULT PAGE STYLES */ /***************************************************************************************************************************************************************************************/ .page-content { padding: var(--module-spacing-large) 0; } .page-content article { grid-column: 3 / span 8; } .page-content article h1 { margin-bottom: var(--text-spacing-small); } .page-content .content-styles h1:not([class^="heading-"]) { font-size: calc(48rem / 16); } .page-content .content-styles h2:not([class^="heading-"]) { font-size: calc(32rem / 16); line-height: calc(42 / 32); } .page-content .content-styles :is(h4, h5, h6):not([class^="heading-"]) { font-size: calc(18rem / 16); line-height: calc(26 / 18); } .page-content .content-styles a:not([class]) { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 2px; } /*** 404 Page ***/ .error404 .page-content article { text-align: center; } .error404 .page-content p.heading-6 { margin-bottom: var(--text-spacing-large); } /***************************************************************************************************************************************************************************************/ /* PAGE BUILDER STYLES */ /***************************************************************************************************************************************************************************************/ /* Overlap — the band is pulled up under what precedes it, and what precedes it is lifted over the band. It has to be lifted rather than the band sunk: a negative z-index on the band reads the same but drops it below its own ancestors in paint order, and hit-testing follows paint order, so everything inside the band goes unhoverable and unclickable while still taking focus. */ .module.margin-overlap, .wash.margin-overlap { --module-overlap: 80px; margin-top: calc(var(--module-overlap) * -1); position: relative; } :is(.module, .wash):has(+ :is(.module, .wash).margin-overlap) { position: relative; z-index: 1; } .module.margin-spacing-small, .wash.margin-spacing-small { margin-top: var(--module-spacing-small); } .module.margin-spacing-medium, .wash.margin-spacing-medium { margin-top: var(--module-spacing-medium); } .module.margin-spacing-large, .wash.margin-spacing-large { margin-top: var(--module-spacing-large); } .module.margin-spacing-xlarge, .wash.margin-spacing-xlarge { margin-top: var(--module-spacing-xlarge); } .page-builder > .module:last-child, .page-builder > .wash:last-child > .module:last-child { margin-bottom: var(--module-spacing-xlarge); } /* A closing band pays for the space under its last module itself — see the run-out and linen inset below. Left on the module, that margin collapses through the wrapper and the band stops at the module's foot with a step of white beneath it before the footer. */ .page-builder > .wash:not(.module):last-child > .module:last-child { margin-bottom: 0; } /* Then the band itself takes the step, so it stands off the footer the way a plain last module does rather than butting against it. Not when what closes it is built to land on the footer — a callout band, a full-bleed photograph. A media CTA is neither: it sits in whatever wash it is given, and its photograph lands on that band's edge, not the footer's. */ .page-builder > .wash:not(.module):last-child:not(:has(> .module:last-child:is(.cta:not(.style-media), .full-width-image, .testimonial.style-single, .bg-photo))) { margin-bottom: var(--module-spacing-xlarge); } /** Logo tile **/ .logo-tile { align-items: center; aspect-ratio: 186 / 124; background: var(--white); border-radius: 10px; display: flex; height: 124px; justify-content: center; } .logo-tile img { height: auto; max-height: min(calc(100% - (var(--text-spacing-medium) * 2)), 100px); max-width: min(calc(100% - (var(--text-spacing-small) * 2)), 160px); object-fit: contain; position: static; width: auto; } .logo-tile picture { display: contents; } .logo-tile.large { aspect-ratio: 281 / 186; height: 186px; } /***************************************************************************************************************************************************************************************/ /* MQ MAX-WIDTH 950 - Tablet Sizes */ /***************************************************************************************************************************************************************************************/ @media only screen and (max-width: calc(950rem/16)) { .logo-tile { height: 100px; } .logo-tile.large { height: 150px; } } /***************************************************************************************************************************************************************************************/ /* MQ MAX-WIDTH 650 - Mobile Sizes */ /***************************************************************************************************************************************************************************************/ @media only screen and (max-width: calc(650rem/16)) { .logo-tile { height: 96px; } /* The desktop 32px inset leaves a tile this short almost no room for the mark. */ .logo-tile img { max-height: calc(100% - (var(--text-spacing-xsmall) * 2)); max-width: calc(100% - (var(--text-spacing-xsmall) * 2)); } .logo-tile.large { height: 126px; } } /** Marquee — a continuously scrolling row **/ .marquee { --marquee-gap: 80px; overflow-x: clip; position: relative; } .marquee .track { display: flex; gap: var(--marquee-gap); list-style: none; margin: 0; padding: 0; width: max-content; } .marquee.static .track { justify-content: safe center; width: 100%; } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } } @media (prefers-reduced-motion: no-preference) { .marquee.scrolling .track { animation: marquee var(--marquee-duration, 30s) linear infinite; } .marquee.scrolling.paused .track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); } } } /** Wash — a gradient spanning a run of consecutive modules **/ .wash { isolation: isolate; position: relative; } .wash::before { content: ''; inset: 0; position: absolute; z-index: -1; } .wash.aqua { --watermark-color: var(--white); } .wash.aqua::before { background: linear-gradient(180deg, color-mix(in srgb, var(--aqua) 0%, transparent) 0%, var(--aqua) 100%); } .wash.linen::before { background-color: var(--linen-50); background-image: url('assets/svgs/dot-grid.svg'); } .wash.ray::before { background: linear-gradient(180deg, color-mix(in srgb, var(--ray) 0%, transparent) 0%, color-mix(in srgb, var(--ray) 50%, transparent) 100%); } /* Ray's ramp on whatever the programme running the page calls its own — the same 0%-to-50% shape, so the field holds the colour itself rather than the colour already mixed into a page background. Unbranded it is ray, so the choice degrades to the wash beside it. */ .wash.program::before { background: linear-gradient(180deg, color-mix(in srgb, var(--program-wash, var(--ray)) 0%, transparent) 0%, color-mix(in srgb, var(--program-wash, var(--ray)) 50%, transparent) 100%); } /** Wash run-out **/ .page-builder > .wash:is(.aqua, .ray, .program):not(.module) { padding-bottom: var(--module-spacing-large); } /* A band that closes the page keeps its run-out: it is the space under the last module now, and the footer meets the colour rather than a strip of white. The exceptions are a run whose last module reaches the band's edge itself — a full-bleed photograph, a statement callout that overlaps the footer, a cut-out standing on the foot. */ .page-builder > .wash:is(.aqua, .ray, .program):not(.module):has(> .module:last-child:is(.full-width-image, .bg-photo, .bg-linen)), .page-builder > .wash:is(.aqua, .ray, .program):not(.module):last-child:has(> .module:last-child.cta.style-statement), .page-builder > .wash:is(.aqua, .ray, .program):not(.module):has(+ .module:is(.full-width-image, .bg-photo, .bg-linen)), .page-builder > .wash:is(.aqua, .ray, .program):not(.module):has(> .module:last-child:is(.image-left, .image-right):is(.cta.style-media, .newsletter, .testimonial.style-single, .media-content.style-lists, .media-content.style-feature)) { padding-bottom: 0; } /* The run-out goes to nothing so a full-bleed photograph below can meet the band, which holds while whatever ends the run reaches the band's own edge. A run of cards does not: flush, the photograph started on the last card's foot. Short of the full run-out — the band is closing on the picture, not leaving a field before it. */ .page-builder > .wash:is(.aqua, .ray, .program):not(.module):has(> .module:last-child.value-props.style-split):has(+ .module:is(.full-width-image, .bg-photo, .bg-linen)) { padding-bottom: var(--module-spacing-small); } /** Linen band inset **/ .page-builder > .wash.linen:not(.module) { padding-block: var(--module-spacing-large); } /* An overlapped run has to clear what it slid under, not merely sit against it: its own inset starts at the top of the band, which is now above whatever it is behind. So the run pays back the overlap it took, and then the 80 the comp leaves. After the sticky bar it pays back half the bar as well — that is the rest of what the band's top edge climbed past. Not the sticky bar itself, which wears the same class for a different job: it pulls itself up over the hero and has no band to clear, so paying anything back only makes the bar 160px taller and pushes the run it is riding down the page. */ .page-builder > :is(.module, .wash).margin-overlap:not(.module.wash, .sticky-navigation) { padding-top: calc(var(--module-overlap) + 80px); } .module.sticky-navigation.style-bar + :is(.module, .wash).margin-overlap { padding-top: calc(var(--sticky-nav-height) / 2 + var(--module-overlap) + 80px); } .page-builder > .wash:not(.module) > .module:first-child { margin-top: 0; } /* The marquee is no longer in either list: a band around it is the point of giving it one, and image-marquee.css states the inset it wants. */ .page-builder > .wash.linen:not(.module):has(> .module:first-child:is(.full-width-image, .sticky-navigation, .bg-photo, .bg-linen)) { padding-top: 0; } .page-builder > .wash.linen:not(.module):has(> .module:last-child:is(.full-width-image, .bg-photo, .bg-linen)), .page-builder > .wash.linen:not(.module):has(> .module:last-child:is(.image-left, .image-right):is(.cta.style-media, .newsletter, .testimonial.style-single, .media-content.style-lists, .media-content.style-feature)) { padding-bottom: 0; } /* The report stands a 608-tall portrait cover on the band, so the band is already as deep as the run needs; the wide inset on top of it leaves the cover adrift in a field of linen. 64 is what the module asks for when it paints its own linen, and what the comp measures either side. */ .page-builder > .wash.linen:not(.module):has(> .module:only-child.media-content.style-report) { padding-block: var(--module-spacing-small); } /** Linen band **/ .bg-linen { background-color: var(--linen-50); background-image: url('assets/svgs/dot-grid.svg'); } .page-builder > .module.bg-linen:last-child { margin-bottom: 0; } /** Map **/ .acf-map { height: 500px; } /***************************************************************************************************************************************************************************************/ /* JAZZY SELECT */ /***************************************************************************************************************************************************************************************/ /*** Trigger ***/ .jazzy-select { display: grid; position: relative; } .jazzy-select > .sizer, .jazzy-select > .trigger { grid-area: 1 / 1; } .jazzy-select .sizer { border-inline: 1px solid transparent; display: flex; font-family: var(--body-font); font-size: calc(14rem / 16); font-weight: 500; gap: var(--text-spacing-xxsmall); height: 0; line-height: calc(26 / 14); overflow: hidden; padding: 0 var(--text-spacing-xxsmall) 0 var(--text-spacing-small); visibility: hidden; width: max-content; } .jazzy-select .sizer .label { display: grid; } .jazzy-select .sizer .label > span { grid-area: 1 / 1; white-space: nowrap; } .jazzy-select .source { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .jazzy-select .trigger { align-items: center; background: var(--white); border: 1px solid var(--field-border); border-radius: 40px; color: var(--charcoal); cursor: pointer; display: flex; font-family: var(--body-font); font-size: calc(14rem / 16); font-weight: 500; gap: var(--text-spacing-xxsmall); justify-content: space-between; line-height: calc(26 / 14); height: 48px; padding: 0 var(--text-spacing-xxsmall) 0 var(--text-spacing-small); text-align: left; width: 100%; } .jazzy-select .trigger:hover { border-color: var(--storm); } .jazzy-select .caret { flex-shrink: 0; height: 20px; width: 20px; } .jazzy-select .caret:empty { background: url('assets/svgs/caret-circle.svg') no-repeat center / contain; } .jazzy-select.is-open .caret { rotate: 180deg; } /*** Panel ***/ .jazzy-select .panel { background: var(--white); border-radius: 10px; box-shadow: var(--shadow-subtle); left: 0; list-style: none; margin: var(--text-spacing-xxsmall) 0 0; max-height: 320px; min-width: 100%; overflow-y: auto; padding: var(--text-spacing-xxsmall); position: absolute; top: 100%; width: max-content; z-index: 30; } .jazzy-select .panel[hidden] { display: none; } .jazzy-select .panel label, .jazzy-select [role="option"] { align-items: center; border-radius: 8px; color: var(--charcoal); cursor: pointer; display: flex; font-size: calc(14rem / 16); font-weight: 600; gap: var(--text-spacing-xxsmall); letter-spacing: 0.2px; line-height: calc(20 / 14); padding: 6px 12px; white-space: nowrap; } .jazzy-select .panel label:hover, .jazzy-select [role="option"]:hover, .jazzy-select [role="option"].is-active { background: var(--teal-pale); } .jazzy-select [role="option"][aria-selected="true"] { color: var(--charcoal); } .jazzy-select .clear { background: none; border: 0; color: var(--text-gray); cursor: pointer; font-family: var(--body-font); padding: var(--text-spacing-xxsmall); text-decoration: underline; } .jazzy-select .badge { background: var(--dark-teal); border-radius: 50%; color: var(--white); display: inline-grid; font-size: calc(12rem / 16); height: 20px; place-items: center; width: 20px; } /***************************************************************************************************************************************************************************************/ /* ARCHIVE STYLES */ /***************************************************************************************************************************************************************************************/ /*** Archive Content ***/ .archive-content { padding-bottom: var(--module-spacing-large); } .archive-content .grid > form { grid-column: span 3; } .archive-content .grid > article { grid-column: span 9; } .archive-content.loading { pointer-events: none; } .archive-content:not(.loading) .svg-loader { display: none; } .archive-content .svg-loader { animation: spinner 700ms linear infinite; border: 2px solid rgb(from var(--charcoal) r g b / .2); border-radius: 100%; border-top-color: var(--charcoal); height: calc(32rem / 16); left: 50%; position: fixed; top: 50%; translate: -50% -50%; width: calc(32rem / 16); z-index: 5; } @keyframes spinner { to { rotate: 360deg; } } @media (prefers-reduced-motion: reduce) { .archive-content .svg-loader { display: none; } .archive-content.loading #sidebar-container, .archive-content.loading [jx-form-results] { opacity: .5; } } .archive-content #open-filters, .archive-content #close-filters { display: none; } /** Sort **/ .archive-content .sort-bar .results-count { margin: 0; transition: opacity var(--motion) var(--ease-out); } .archive-content .sort-bar .results-count > [jx-form-results-count="1"] + .s { display: none; } .archive-content .sort-bar .results-count:has([jx-form-results-count]:empty) { opacity: 0; } .archive-content .sort { align-items: center; display: flex; gap: var(--text-spacing-xsmall); position: absolute; right: var(--container-outer-padding); top: 0; } /** Filters **/ .archive-content .search-sort { align-items: center; display: flex; flex-wrap: wrap; gap: var(--text-spacing-xxsmall); justify-content: space-between; margin-bottom: var(--text-spacing-medium); position: relative; } .archive-content .search-sort label { margin: 0; } .archive-content .search-sort .search-container { align-items: center; display: flex; position: relative; width: 100%; } .archive-content .search-sort input[type="text"] { width: 100%; } .archive-content form ul { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; } .archive-content form ul li.accordion > ul { gap: var(--text-spacing-xxsmall); margin: 0; } .archive-content form ul li.accordion.active > ul { display: flex; margin: var(--text-spacing-xxsmall) 0 0; } .archive-content .filters > li { border-bottom: 1px solid var(--charcoal); padding-bottom: var(--text-spacing-xsmall); } .archive-content .filters > li button { align-items: center; background: none; border: none; padding: 0; text-align: left; width: 100%; } .archive-content .filters h3 { margin: 0; } .archive-content .filters label:not(.accessibility) { display: block; line-height: var(--label-line-height); padding-left: var(--text-spacing-small); position: relative; --label-line-height: calc(24em/16); } .archive-content .filters label:not(.accessibility):before, .archive-content .filters label:not(.accessibility):after { content: ''; position: absolute; } .archive-content .filters label:not(.accessibility):before { border: 1px solid var(--charcoal); height: 11px; left: 0; top: calc((var(--label-line-height) - 11px) / 2); width: 11px; } .archive-content .filters label:after { background: var(--charcoal); height: 7px; left: 3px; opacity: 0; top: calc((var(--label-line-height) - 11px) / 2 + 3px); width: 7px; } .archive-content .filters input:checked + label:after { opacity: 1; } /** Results **/ .archive-content article [jx-form-results-items] { display: flex; flex-direction: column; gap: var(--gap); line-height: 1; list-style: none; margin: 0; padding: 0; } /** Pagination **/ .archive-content .btn.primary.load-more-complete { display: none; } /***************************************************************************************************************************************************************************************/ /* TOOLBAR */ /***************************************************************************************************************************************************************************************/ body.admin-bar { --wp-admin-bar-height: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --wp-admin-bar-height: 46px; } } body.admin-bar header, body.admin-bar .alert-bar, body.admin-bar .sticky-menu { top: var(--wp-admin-bar-height); } /***************************************************************************************************************************************************************************************/ /* MQ MIN-WIDTH 2222 - Container at Max-Width */ /***************************************************************************************************************************************************************************************/ @media only screen and (min-width: calc(2222rem/16)) { :root { --container-width: var(--container-max-width); --one-column-width: 121px; } } /***************************************************************************************************************************************************************************************/ /* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */ /***************************************************************************************************************************************************************************************/ @media only screen and (max-width: calc(1400rem/16)) { :root { --container-width: 100%; --container-outer-margin: 0px; } /*** Breadcrumbs ***/ .breadcrumbs { padding-inline: var(--container-outer-padding); } /*** Footer ***/ #footer .legal-social { align-items: flex-start; flex-direction: column; } #footer .legal { flex-wrap: wrap; } } /***************************************************************************************************************************************************************************************/ /* MQ MAX-WIDTH 1234 - Where the footer's legal links take a row of their own */ /***************************************************************************************************************************************************************************************/ /* Not a rung on the ladder — it is the width the pill stops fitting the copyright and the links on one line, measured rather than chosen. The rule divides the two while they share a line; once the links lead a line of their own it is a stray mark at the start of it, so it goes, and the indent that held the row clear of it goes with it. The row is taken deliberately rather than left to fall out of the widths, because those two removals hand back 17px — enough for the links to fit beside the copyright again at exactly the width they stopped fitting, which would leave a band of a few pixels sharing a line with no rule to divide it. Claiming the line settles it either way. */ @media only screen and (max-width: calc(1234rem/16)) { #footer .legal .menu { flex-basis: 100%; padding-left: 0; } #footer .legal .menu::before { display: none; } } /***************************************************************************************************************************************************************************************/ /* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */ /***************************************************************************************************************************************************************************************/ @media only screen and (max-width: calc(1200rem/16)) { :root { --container-outer-padding: 40px; --header-height: calc(92px + var(--section-nav-height)); } /*** Typography ***/ .mega { font-size: calc(120rem / 16); } .mega.xlarge { font-size: calc(164rem / 16); } h1, .heading-1 { font-size: calc(92rem / 16); } h2, .heading-2 { font-size: calc(72rem / 16); } h3, .heading-3 { font-size: calc(60rem / 16); letter-spacing: -1.2px; } h4, .heading-4 { font-size: calc(50rem / 16); } h5, .heading-5 { font-size: calc(44rem / 16); } h6, .heading-6 { font-size: calc(42rem / 16); } .article-title, .content-styles h1:not([class^="heading-"]) { font-size: calc(60rem / 16); } .article-title.medium, .content-styles h2:not([class^="heading-"]) { font-size: calc(34rem / 16); } .emphasis { font-size: calc(72rem / 16); } .emphasis.medium { font-size: calc(60rem / 16); } p.xxlarge, ul.xxlarge, ol.xxlarge, .xxlarge-text, .xxlarge-text p, .xxlarge-text ul, .xxlarge-text ol { font-size: calc(34rem / 16); } p.xlarge, ul.xlarge, ol.xlarge, .xlarge-text, .xlarge-text p, .xlarge-text ul, .xlarge-text ol { font-size: calc(28rem / 16); } .amount { font-size: calc(54rem / 16); } html.active, html.active body { height: 100%; overflow: hidden; } /*** Header ***/ #header .utility-nav { display: none; } #header { position: relative; } /* The panel is two views over one scroll container: the list of sections, and one section's own page. `sub-open` says which is showing. */ #header.active { background: var(--off-white); color: var(--charcoal); inset: 0; overflow-y: auto; position: fixed; z-index: 9999; } #header.active.sub-open { background: var(--linen); } #header .logo { margin: 0; position: relative; z-index: 2; } #header .mobile-menu { align-items: center; background: var(--charcoal-10); border: 0; border-radius: 100%; color: inherit; cursor: pointer; display: flex !important; flex-direction: column; height: 44px; justify-content: center; margin: 0; order: 3; overflow: visible; position: relative; width: 44px; z-index: 2; --menu-bar-height: 1px; /* Height of an individual menu bar */ --menu-bar-margin: 5px; /* Amount of spacing between the menu bars */ --menu-bar-width: 18px; /* Width of the menu bars */ } #header.on-dark:not(.active) .mobile-menu { background: var(--white-15); } #header .mobile-menu span:not(.accessibility) { background: var(--charcoal); border-radius: 1px; display: block; height: var(--menu-bar-height); position: relative; width: var(--menu-bar-width); } #header.on-dark:not(.active) .mobile-menu span:not(.accessibility) { background: var(--white); } #header .mobile-menu span:nth-of-type(2) { margin: var(--menu-bar-margin) 0; } /** Close **/ #header.active .mobile-menu span:nth-of-type(1) { transform: translateY(calc(var(--menu-bar-height) + var(--menu-bar-margin))) rotate(45deg); } #header.active .mobile-menu span:nth-of-type(2) { margin-right: auto; width: 0; } #header.active .mobile-menu span:nth-of-type(3) { transform: translateY(calc((var(--menu-bar-height) + var(--menu-bar-margin)) * -1)) rotate(-45deg); } /** Header row — Back or the logo, the menu's call to action, and the toggle **/ #header .main-nav { align-items: center; display: flex; flex-wrap: wrap; gap: var(--text-spacing-xxsmall); padding: var(--text-spacing-xsmall) var(--container-outer-padding); transition: none; } /* The panel is its own light surface, so the treatment for a bar sitting on a dark first module stops at its edge. Left in, the row's colour came from whether anything inside it happened to hold focus — white on the way back from a section, charcoal on the way in. */ #header.active .main-nav { color: inherit; } #header:is(.on-light, .on-dark) .main-nav:has(.menu-item-has-children:is(.active, :focus-within), .menu-item-has-children > :is(a, button):hover) { background: none; color: inherit; } #header .main-nav .btn.mobile-cta { color: var(--charcoal); display: inline-flex; font-size: calc(13rem / 16); margin-left: auto; min-height: 44px; order: 2; padding: 0 20px; } /* Back takes the logo's place rather than sitting under it, so the row keeps one control at each end in both views. Reversed, because the button helper puts its icon after the label and a back control reads with the arrow first. */ #header.active.sub-open #back-to-main-nav { background: none; border: 0; color: inherit; display: inline-flex; flex-direction: row-reverse; font-size: calc(13rem / 16); font-weight: 700; gap: var(--text-spacing-xxsmall); letter-spacing: 1px; margin-right: auto; min-height: 44px; order: 0; padding: 0; text-decoration: none; text-transform: uppercase; } #header.active.sub-open #back-to-main-nav::after { background: currentColor; content: ''; height: 13px; mask: url('assets/svgs/arrow.svg') no-repeat center / contain; scale: -1 1; width: 15px; } #header.active.sub-open .logo { display: none; } /** Main nav **/ #header .main-nav nav { display: none; flex-basis: 100%; order: 4; width: 100%; } #header.active .main-nav nav { display: block; } #header nav #menu-main { align-items: stretch; flex-direction: column; gap: var(--text-spacing-xsmall); line-height: 1.2; padding: var(--module-spacing-small) 0 var(--text-spacing-large); text-align: left; width: 100%; } #header nav #menu-main > li { padding: 0; width: 100%; } /* The call to action is rendered into the header row instead, from the same menu item. */ #header nav #menu-main > li.nav-btn { display: none; } #header nav #menu-main > li > a, #header nav #menu-main > li > button { align-items: center; display: flex; font-family: var(--heading-font); font-size: calc(24rem / 16); font-weight: 600; justify-content: space-between; letter-spacing: -0.5px; min-height: 36px; padding: 0; width: 100%; } /* The caret is a solid triangle, which reads as a dropdown; a section that opens its own page wants the chevron that means "forward". Drawn rather than swapped so the markup stays one element across both breakpoints. */ #header nav #menu-main > li > :is(a, button) .menu-caret { align-items: center; background: none; border: 1px solid var(--charcoal-40); padding: 0; border-radius: 100%; display: flex; flex: none; height: 36px; justify-content: center; transition: none; width: 36px; } #header nav #menu-main > li > :is(a, button) .menu-caret svg { display: none; } #header nav #menu-main > li > :is(a, button) .menu-caret::after { border-right: 1.5px solid; border-top: 1.5px solid; content: ''; height: 7px; margin-left: -3px; rotate: 45deg; width: 7px; } /** A section's own page **/ /* Either list can hold the open section — the main menu or the audience bar — so the view switch is written against both, and whichever list is not holding it drops out whole. */ #header.active.sub-open :is(#menu-main, .utility-nav .menu) > li:not(.active) { display: none; } #header.active.sub-open .main-nav nav:not(:has(#menu-main > li.active)) { display: none; } #header.active.sub-open .utility-nav:not(:has(.menu > li.active)) { display: none; } #header.active.sub-open #menu-main { padding-top: var(--text-spacing-medium); } /* The trigger stays where it is and becomes the page's heading — the label is already the section's name, and re-rendering it would let the two drift. */ #header.active.sub-open :is(#menu-main, .utility-nav .menu) > li.active > :is(a, button) { font-family: var(--heading-font); font-size: calc(28rem / 16); font-weight: 600; letter-spacing: -0.5px; line-height: calc(36 / 28); pointer-events: none; text-transform: none; } /* The bar dims a row to 70% while it is hovered. This is not a row any more, it is the heading — and a touch screen leaves the hover on whatever was last tapped, which is exactly this, so the heading arrived grey and stayed grey until something else was touched. */ #header.active.sub-open :is(#menu-main, .utility-nav .menu) > li.active > :is(a, button), #header.active.sub-open :is(#menu-main, .utility-nav .menu) > li.active > :is(a, button):is(:hover, :focus-visible) { opacity: 1; } #header.active.sub-open :is(#menu-main, .utility-nav .menu) > li.active > :is(a, button) .menu-caret { display: none; } /** Dropdown **/ #header #menu-main > li > .sub-menu { background: none; display: none; opacity: 1; position: static; transform: none; visibility: visible; width: 100%; } #header #menu-main > li.active > .sub-menu { display: grid; gap: var(--text-spacing-xsmall); grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--text-spacing-small) 0 var(--module-spacing-small); } #header #menu-main > li.active > .sub-menu.graphic_links { grid-auto-flow: row; grid-template-columns: 1fr; } /* The tile keeps the proportion it has on the desktop bar — 288 wide by 360 across a five-card row — rather than the letterbox a fixed height made of a full-width column, which cropped each photograph to a band. */ #header #menu-main .sub-menu.graphic_links > li > a { aspect-ratio: 288 / 360; height: auto; } #header #menu-main .sub-menu.graphic_links .description { display: none; } #header #menu-main .sub-menu.graphic_links .arrow { flex: none; } /* The tile's hover state stands at rest from here down. It is not decoration: the gradient is what the label is legible against, and the filled arrow is what says the tile is a link. A touch either follows the tile or does nothing, so a state that only arrives once you have committed arrives too late to do either job. */ #header #menu-main .sub-menu.graphic_links > li > a::before { height: 160px; } #header #menu-main .sub-menu.graphic_links .arrow { background: var(--sun); border-color: var(--sun); color: var(--charcoal); } /* On the bar the tiles are a flush run of five and a corner would break the band. Here they are separate cards with a gap between them, so they take one — and the clip that draws it sits on the photograph, which is the thing that needs one. The height comes off the photograph too, rather than off the tile. A ratio on the tile plus a clip on the tile is a box that decides its own height and then eats whatever does not fit, and what did not fit was the label — invisibly in every desktop browser, and half a line short of the bottom edge on a real tablet. The picture is a real box with a real ratio, the label and its arrow lie over it, and there is no longer a height for them to be too tall for. The lockup gets a row of its own at the foot of the picture rather than sharing the picture's cell, so the arrow centres against the whole label instead of hanging off whichever line happens to be last. One line or two, it sits in the middle of them. */ #header #menu-main .sub-menu.graphic_links > li > a { align-items: center; aspect-ratio: auto; border-radius: 10px; grid-template-rows: 1fr auto; overflow: visible; padding: 0; } #header #menu-main .sub-menu.graphic_links .media { aspect-ratio: 288 / 360; border-radius: 10px; grid-column: 1 / -1; grid-row: 1 / -1; inset: auto; overflow: hidden; position: relative; } #header #menu-main .sub-menu.graphic_links .text { align-self: center; grid-column: 1; grid-row: 2; margin: var(--text-spacing-xsmall); } #header #menu-main .sub-menu.graphic_links .arrow { align-self: center; grid-column: 2; grid-row: 2; margin: var(--text-spacing-xsmall); } /* Both of the tile's washes are square boxes over a rounded one, and the corner they used to borrow from the tile's own clip is now theirs to draw. */ #header #menu-main .sub-menu.graphic_links > li > a::before { border-radius: 0 0 10px 10px; } #header #menu-main .sub-menu.graphic_links > li > a::after { border-radius: 10px; } /** Dropdown: the audience panel, laid out as the section's page **/ /* The desktop panel is a fixed full-viewport takeover on a storm fill. Here it is simply the rest of the page under its own heading, so everything positional comes off — and these selectors carry the class weight to outrank that, since a media query adds none. */ #header.active.sub-open .utility-nav .menu > li.active > .sub-menu.audience { background: none; color: inherit; display: block; inset: auto; opacity: 1; overflow: visible; padding: 0; pointer-events: auto; position: static; transition: none; visibility: visible; z-index: auto; } #header.active.sub-open .utility-nav .sub-menu.audience .panel { background: none; display: block; height: auto; inset: auto; padding: 0; position: static; } #header.active.sub-open .utility-nav .sub-menu.audience > .panel > :is(.watermark, .close) { display: none; } #header.active.sub-open .utility-nav .sub-menu.audience .container { margin: 0; max-width: none; padding: 0; width: 100%; } /* The offramps are drawn below the section's links, but the markup keeps them beside the statement they share an intro with — so the intro stops being a box and its two halves take their places in the column directly. */ #header.active.sub-open .utility-nav .sub-menu.audience .grid { display: flex; flex-direction: column; margin-inline: 0; } #header.active.sub-open .utility-nav .sub-menu.audience .intro { display: contents; } #header.active.sub-open .utility-nav .sub-menu.audience .statement { color: inherit; font-family: var(--body-font); font-size: calc(15rem / 16); font-weight: 400; letter-spacing: -0.1px; line-height: calc(24 / 15); order: 1; padding-top: var(--text-spacing-small); } #header.active.sub-open .utility-nav .sub-menu.audience .groups { display: block; order: 2; padding-top: var(--text-spacing-medium); } #header.active.sub-open .utility-nav .sub-menu.audience .group + .group { padding-top: var(--text-spacing-medium); } #header.active.sub-open .utility-nav .sub-menu.audience .lead + .group { border-top: 0; padding-top: var(--text-spacing-medium); } #header.active.sub-open .utility-nav .sub-menu.audience .group > .eyebrow { color: var(--text-gray); margin: 0 0 var(--text-spacing-large); } #header.active.sub-open .utility-nav .sub-menu.audience .cards { display: block; } /* The hairline belongs to the row rather than to a gap, because it sits between rows and under the last one, not above the first. */ #header.active.sub-open .utility-nav .sub-menu.audience .row { background: none; border-bottom: 1px solid var(--charcoal-25); border-radius: 0; color: inherit; gap: var(--text-spacing-xsmall); padding: var(--text-spacing-xsmall) 0; } #header.active.sub-open .utility-nav .sub-menu.audience .row:is(:hover, :focus-visible) { background: none; } #header.active.sub-open .utility-nav .sub-menu.audience .row :is(.media, .description) { display: none; } #header.active.sub-open .utility-nav .sub-menu.audience .row .title { font-family: var(--body-font); font-size: calc(13rem / 16); font-weight: 700; letter-spacing: 1px; line-height: calc(18 / 13); text-transform: uppercase; } #header.active.sub-open .utility-nav .sub-menu.audience .row .btn.chip { background: var(--sun); color: var(--charcoal); flex: none; margin-left: auto; } /* The lead is written above the list and drawn below it: on this width it is the way out to the section's own page, which reads last. */ #header.active.sub-open .utility-nav .sub-menu.audience .groups { display: flex; flex-direction: column; } #header.active.sub-open .utility-nav .sub-menu.audience .lead { order: 1; padding-top: var(--text-spacing-small); } #header.active.sub-open .utility-nav .sub-menu.audience .lead > .text { display: none; } /* An underlined line of copy, not a bordered pill — the panel already ends on a button. */ #header.active.sub-open .utility-nav .sub-menu.audience .lead > .btn { background: none; border: 0; color: inherit; font-family: var(--body-font); font-size: calc(15rem / 16); font-weight: 600; letter-spacing: -0.1px; margin: 0; padding: 0; text-decoration: underline; text-transform: none; text-underline-offset: 3px; } #header.active.sub-open .utility-nav .sub-menu.audience .lead > .btn .arrow { display: none; } /* The photograph is the phone's answer to the takeover's glyph. */ #header.active.sub-open .utility-nav .sub-menu.audience .promo:has(.icon.photo) .icon.glyph { display: none; } #header.active.sub-open .utility-nav .sub-menu.audience .lead > .media { display: none; } /* The offramps close the page on a filled band that runs the full width of the view, which is why it breaks the panel's side padding rather than sitting inside it. */ #header.active.sub-open .utility-nav .sub-menu.audience .promos { background: var(--storm); color: var(--white); gap: var(--text-spacing-xsmall); margin: var(--text-spacing-large) calc(-1 * var(--container-outer-padding)) 0; order: 3; padding: var(--text-spacing-medium) var(--container-outer-padding) calc(48px + var(--text-spacing-large)); } /* A band with nothing in it is a slab of teal under the links saying nothing. `:empty` does not catch it — the markup leaves whitespace inside — so it is asked what it holds instead, and the older rule is kept for the case where it really is empty. */ #header.active.sub-open .utility-nav .sub-menu.audience .promos:empty, #header.active.sub-open .utility-nav .sub-menu.audience .promos:not(:has(.promo)) { display: none; } #header.active.sub-open .utility-nav .sub-menu.audience .promo { align-items: center; } #header.active.sub-open .utility-nav .sub-menu.audience .promo .icon { background: none; border-radius: 4px; height: 64px; overflow: hidden; width: 85px; } #header.active.sub-open .utility-nav .sub-menu.audience .promo .icon > img { height: 100%; object-fit: cover; width: 100%; } /* One line and an arrow, not a question and a link under it — the takeover's copy does not fit the width, and the affordance moves onto the row. */ #header.active.sub-open .utility-nav .sub-menu.audience .promo > .text { gap: 0; } #header.active.sub-open .utility-nav .sub-menu.audience .promo:has(.short) .title, #header.active.sub-open .utility-nav .sub-menu.audience .promo .btn.tertiary { display: none; } #header.active.sub-open .utility-nav .sub-menu.audience .promo .short { display: block; } #header.active.sub-open .utility-nav .sub-menu.audience .promo .btn.chip { background: none; border: 1px solid currentColor; color: inherit; display: inline-flex; flex: none; margin-left: auto; } /* The bar lays each item out as a row so its trigger and panel can sit side by side; in the panel the panel *is* the page, and follows the heading. */ #header.active.sub-open .utility-nav .menu > li.active { display: block; } /* A section's page is longer than the view, and Donate has to stay reachable without scrolling back to a header row that has scrolled away — so the same button leaves the row and pins to the foot. The band above it reserves the space it no longer occupies. */ #header.active.sub-open .main-nav .btn.mobile-cta { bottom: var(--text-spacing-xsmall); justify-content: center; left: var(--container-outer-padding); margin: 0; position: fixed; right: var(--container-outer-padding); /* Over everything the panel draws. The tiles' labels and arrows are lifted to 3 to clear their own photograph, and matching it left them winning on source order alone. */ z-index: 40; } /** Utility nav, folded into the panel **/ /* Held at its own height. The header is a full-screen flex column and the scroller, and a flex item that clips is let shrink to nothing by default — so the band gave up whatever the sections above left it, cut its own links off, and the panel had nothing to scroll to. The clip stays for the watermark; the band just stops shrinking under it. */ #header.active .utility-nav { background: var(--storm); color: var(--white); display: block; flex-shrink: 0; margin-top: auto; order: 5; overflow: hidden; /* The foot clears Safari's bottom bar, which sits over a fixed panel that has nothing left to scroll. */ padding: var(--text-spacing-large) var(--container-outer-padding) calc(var(--module-spacing-large) + env(safe-area-inset-bottom, 0px)); position: relative; } /* The clip above belongs to the band this is in the other view — a strip at the foot of the list of sections, where nothing should spill. Here the same element is the whole panel, and hidden meant everything past one screen was not merely off-view but unreachable: the header is the scroller, and content a clipped child never reports has nothing to scroll to. */ #header.active.sub-open .utility-nav { background: none; color: inherit; margin: 0; overflow: visible; padding: var(--text-spacing-medium) var(--container-outer-padding) 0; --focus-ring: var(--charcoal); } /* `nav`, not a bare class: `.secondary` is also a button variant, and without the element the rule hid every secondary button inside the open panel. */ #header.active.sub-open .utility-nav .watermark, #header.active.sub-open .utility-nav nav:is(.primary, .secondary):not(:has(li.active)) { display: none; } #header.active.sub-open .utility-nav nav.secondary { border-top: 0; margin-top: 0; padding-top: 0; } #header.active .utility-nav .watermark { bottom: -20%; display: block; color: var(--white); left: -45%; opacity: .05; pointer-events: none; position: absolute; width: 128%; } #header.active .utility-nav .watermark svg { display: block; height: auto; width: 100%; } #header.active .utility-nav nav:is(.primary, .secondary) { background: none; padding: 0; position: relative; } #header.active .utility-nav nav.secondary { margin-top: var(--text-spacing-small); } #header.active .utility-nav .menu { align-items: flex-start; flex-direction: column; gap: var(--text-spacing-small); padding: 0; } #header.active .utility-nav .menu > li { width: 100%; } #header.active .utility-nav .menu > li > a, #header.active .utility-nav .menu > li > button { align-items: center; display: flex; min-height: 24px; min-width: 24px; } #header.active .utility-nav .primary .menu > li > :is(a, button) { font-size: calc(13rem / 16); font-weight: 700; justify-content: space-between; letter-spacing: 1px; text-transform: uppercase; width: 100%; } /* Same forward chevron the main list uses, at the size this row is set in. */ #header.active .utility-nav .primary .menu .menu-caret svg { display: none; } #header.active .utility-nav .primary .menu .menu-caret::after { border-right: 1.5px solid; border-top: 1.5px solid; content: ''; display: block; height: 6px; rotate: 45deg; width: 6px; } #header.active .utility-nav .secondary .menu { align-items: center; flex-direction: row; flex-wrap: wrap; gap: var(--text-spacing-xsmall) var(--text-spacing-xsmall); padding-right: 0; } #header.active .utility-nav .secondary .menu > li { width: auto; } #header.active .utility-nav .secondary .menu > li > :is(a, button) { text-decoration: underline; text-underline-offset: 3px; } /* The call to action leads the quick links as a button in its own row, and the rule that parts the two navs is drawn under it — so it reads with the sections above rather than as one more link in the row below. */ #header.active .utility-nav .secondary .menu > li.subnav-cta { order: -1; width: 100%; } /* The same button as Donate in the row above: its type and its 44 tall box. */ #header.active .utility-nav .secondary .menu > li.subnav-cta > a { align-items: center; border-radius: 40px; display: inline-flex; font-size: calc(13rem / 16); letter-spacing: 0.8px; min-height: 44px; padding: 0 20px; text-decoration: none; text-transform: uppercase; width: auto; } #header.active .utility-nav .secondary .menu > li.subnav-cta::after { border-top: 1px solid var(--white-25); content: ''; display: block; margin-top: var(--text-spacing-medium); padding-top: var(--text-spacing-xsmall); } #header.active .utility-nav .primary .menu > li + li::before { content: none; } /* The row already lays its links out flat, so both languages sit in it; no disclosure. */ #header.active .utility-nav .menu > li.language-switcher > button { display: none; } #header.active .utility-nav .language-menu { background: none; border-radius: 0; box-shadow: none; color: inherit; display: flex; gap: var(--text-spacing-xsmall); min-width: 0; opacity: 1; padding: 0; position: static; transform: none; transition: none; visibility: visible; } #header.active .utility-nav .language-menu a { border-radius: 0; gap: 6px; padding: 0; text-decoration: underline; text-underline-offset: 3px; } #header.active .utility-nav .language-menu a:is(:hover, :focus-visible) { background: none; } #header.active .utility-nav .language-menu a[aria-current] { text-decoration: none; } #header.active .utility-nav .language-menu .check { display: none; } /*** Default Page ***/ .page-content article { grid-column: 2 / -2; } /*** Archive ***/ .archive-content [data-jazzy-scroll] { transform: unset !important; } .archive-content .grid { gap: 0; } .archive-content .grid > form, .archive-content .grid > article { grid-column: 1 / -1; } .archive-content #open-filters { background: none; border: none; display: flex; max-width: max-content; padding: 0; } .archive-content .sidebar-container { background: var(--white); height: 100dvh; left: unset; max-width: 310px; overflow: auto; padding: var(--text-spacing-xlarge) var(--text-spacing-small) var(--text-spacing-small); pointer-events: none; position: fixed; right: 0; top: 0; transform: translate3d(100%, 0, 0); transition: transform var(--motion) var(--ease-out), visibility var(--motion) var(--ease-out); visibility: hidden; width: 100vw; z-index: 99999; } .archive-content .sidebar-container.active { pointer-events: auto; transform: translate3d(0, 0, 0); visibility: visible; } .archive-content .sidebar-container #close-filters { display: block; position: absolute; right: 0; top: 0; } /*** Footer ***/ #footer .cta .intro { padding-block: var(--module-spacing-medium); } /*** Toolbar ***/ body.admin-bar header { top: 0; } } /***************************************************************************************************************************************************************************************/ /* MQ MAX-WIDTH 950 - Tablet Sizes */ /***************************************************************************************************************************************************************************************/ @media only screen and (max-width: calc(950rem/16)) { /* The trail sits a hair under the header rather than a full step, which is what the cutout's already does. Its own rule there is heavier and keeps the header's height in the sum. */ .breadcrumbs { margin-top: var(--text-spacing-xxsmall); } :root { --module-spacing-large: 100px; --module-spacing-medium: 64px; --module-spacing-small: 56px; --module-spacing-xlarge: 120px; } .media.video .play-icon { font-size: calc(22rem / 16); height: 80px; width: 80px; } /*** Typography ***/ .mega { font-size: calc(96rem / 16); letter-spacing: -3.5px; line-height: calc(90 / 96); } .mega.xlarge { font-size: calc(126rem / 16); } h1, .heading-1 { font-size: calc(76rem / 16); letter-spacing: -3px; line-height: calc(78 / 76); } h2, .heading-2 { font-size: calc(64rem / 16); letter-spacing: -1.6px; line-height: calc(68 / 64); } h3, .heading-3 { font-size: calc(60rem / 16); letter-spacing: -1.2px; line-height: calc(70 / 60); } h4, .heading-4 { font-size: calc(42rem / 16); } h5, .heading-5 { font-size: calc(38rem / 16); } h6, .heading-6 { font-size: calc(36rem / 16); } .article-title, .content-styles h1:not([class^="heading-"]) { font-size: calc(60rem / 16); letter-spacing: -1.2px; line-height: calc(70 / 60); } .article-title.medium, .content-styles h2:not([class^="heading-"]) { font-size: calc(30rem / 16); } .emphasis { font-size: calc(64rem / 16); letter-spacing: -1.6px; line-height: calc(68 / 64); } .emphasis.medium { font-size: calc(60rem / 16); letter-spacing: -1.2px; line-height: calc(70 / 60); } p.xxlarge, ul.xxlarge, ol.xxlarge, .xxlarge-text, .xxlarge-text p, .xxlarge-text ul, .xxlarge-text ol { font-size: calc(30rem / 16); } p.xlarge, ul.xlarge, ol.xlarge, .xlarge-text, .xlarge-text p, .xlarge-text ul, .xlarge-text ol { font-size: calc(26rem / 16); } .amount { font-size: calc(46rem / 16); } .tablet-only { display: block !important; } .desktop-only { display: none !important; } .alert-bar.desktop-only + header { margin-top: 0; /* If the alert bar next to the header is desktop-only, there is no mobile version */ } /*** Default Page ***/ .page-content .content-styles h1:not([class^="heading-"]) { font-size: calc(40rem / 16); } .page-content .content-styles h2:not([class^="heading-"]) { font-size: calc(28rem / 16); } /*** Content Styles ***/ .content-styles table :is(td, th) { padding: var(--text-spacing-xsmall); } /*** Cards ***/ .feature-pair { grid-template-columns: minmax(0, 1fr); } /*** Footer ***/ /* Stacked, the logo, the line and the button all share one axis, so they centre on it rather than hanging off a left edge the row layout gave them. */ #footer .cta .intro { align-items: center; flex-direction: column; gap: var(--text-spacing-large); padding-block: var(--module-spacing-large); text-align: center; } /* A feature card is mostly padding at this width — the copy is the same length and the box is two thirds of it. */ .card.feature { padding: var(--text-spacing-medium); } .card.feature.callout .content { gap: var(--text-spacing-medium); } #footer .cta .content { align-items: center; } /* The mark's rays run further right than left, so a box centred on the axis does not read as centred. Nudged back by eye. */ #footer .cta .logo { flex-shrink: 1; max-width: 271px; translate: -15px 0; width: 100%; } #footer .main { margin: 0; padding-inline: 20px; } /* Same axis, same answer: the pill and the social row centre, and the pill's own contents with them once they wrap. */ #footer .legal-social { align-items: center; } #footer .legal { justify-content: center; text-align: center; } /* Half the pill's gap between the mark and the line it sits against, and the pill's own gap everywhere else — a negative margin rather than a smaller `gap`, which would also tighten the row the links wrap onto and pull them off the centre they now sit on. */ #footer .legal .mark { margin-right: calc(var(--text-spacing-xxsmall) * -1); } #footer .legal .menu { justify-content: center; } #footer .main > nav > .menu { gap: var(--text-spacing-xlarge); grid-template-columns: repeat(2, 1fr); } /*** Person bio dialog ***/ /* The whole screen from here down. A panel with the page showing round it is a card you can put down; on a tablet there is not enough room either side for that inset to read as one anyway, and the page behind it only competes with the biography. Corners go with the inset — there is no edge left for them to round. */ .jazzy-dialog.person-bio { border-radius: 0; height: 100dvh; max-height: none; max-width: none; width: 100vw; } /* Still beside the headshot, not under it: the screen is wide enough for both and stacking them pushes the biography a photograph's height down the page. Mobile stacks. */ /* Both columns start 80 lower than the panel's own padding, to clear the close button — which is stuck to the top right of a screen-high dialog and would otherwise sit on the first line of the biography. The linen still runs to the top: the profile's negative margin tracks the panel's padding, so the column is full height and only what is printed on it moves down. */ .jazzy-dialog.person-bio .panel { gap: var(--text-spacing-medium); grid-column: 1 / -1; grid-template-columns: 240px minmax(0, 1fr); padding: calc(var(--text-spacing-medium) + 80px) 0 var(--text-spacing-medium) var(--text-spacing-medium); } .jazzy-dialog.person-bio .profile { margin: calc(-1 * (var(--text-spacing-medium) + 80px)) 0 calc(-1 * var(--text-spacing-medium)) calc(-1 * var(--text-spacing-medium)); padding: calc(var(--text-spacing-medium) + 80px) var(--text-spacing-medium) var(--text-spacing-medium); } /* An extra 4 off each edge so the disc is not sitting in the corner of the tile. */ .card.person.has-bio > .arrow { bottom: calc(var(--text-spacing-xxsmall) + 4px); right: calc(var(--text-spacing-xxsmall) + 4px); } .jazzy-dialog.person-bio .media { max-width: 240px; } .jazzy-dialog.person-bio .bio { padding-right: var(--text-spacing-medium); } } /***************************************************************************************************************************************************************************************/ /* MQ MAX-WIDTH 1200, NO HOVER - The open menu on a screen being touched */ /***************************************************************************************************************************************************************************************/ /* Asked of the pointer rather than the width. The tile's hover state stands at rest on this rung, so all a hover still changed was the lift on a label and the wash over its neighbours — which on a touch screen is a tile left looking stuck after a tap. On anything with a pointer they are the feedback they were written to be, and a narrow window on a desktop is still a desktop, so width alone would take them from the one person who can use them. */ @media only screen and (max-width: calc(1200rem/16)) and (hover: none) { #header #menu-main .sub-menu.graphic_links > li > a:hover .text { transform: none; } #header #menu-main .sub-menu.graphic_links:has(> li > a:hover) > li > a:not(:hover)::after { opacity: 0; } #header #menu-main .sub-menu.graphic_links:has(> li > a:hover) > li > a:not(:hover)::before { opacity: 1; } } /***************************************************************************************************************************************************************************************/ /* MQ 651-1200 - The open menu */ /***************************************************************************************************************************************************************************************/ /* The menu's own rung: 1200 is where the bar becomes a hamburger and this panel starts existing, so that is where everything about it begins. Bounded at the bottom rather than running to zero because the phone draws the same panel differently — its own rules are in the 650 block. */ @media only screen and (min-width: calc(651rem/16)) and (max-width: calc(1200rem/16)) { #header nav #menu-main { gap: var(--text-spacing-small); } #header nav #menu-main > li > a, #header nav #menu-main > li > button { font-size: calc(30rem / 16); } /* The open section's own name, which is the panel's headline rather than one of a list of links — it takes the size that says so, and drops the tracking a list needs. */ /* Colour stated outright and the transition off. It already resolves to this by inheritance, but the trigger animates its colour as a link, and on a real tablet the headline was landing in the dimmed half of that and staying there until a touch forced a repaint. Nothing here should be animating anyway: it stopped being a link the moment it became the heading. */ #header.active.sub-open :is(#menu-main, .utility-nav .menu) > li.active > :is(a, button) { color: var(--charcoal); font-size: calc(36rem / 16); letter-spacing: 0; transition: none; } /* The headline and the panel under it are the two halves of one lockup, and the gap between them is the item's own — it is a flex column once the panel fills the screen. Half what the list of sections wants between its rows, because these two belong together. */ #header.active.sub-open .utility-nav .menu > li.active { row-gap: var(--text-spacing-xxsmall); } /* Two across, which is what the other dropdowns already do here. A tile keeps the portrait proportion it has on the bar, so halving its width is what makes the photograph smaller — a full-width column at this size gives the list one image per screen and buries the rest. */ #header #menu-main > li.active > .sub-menu.graphic_links { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* The audience panel is the same column at every width under 1200, and at this one it was spending most of the screen on the spaces between things: a label sat a full text-spacing off its own list, the list sat that far off the statement above it, and the rows it led were the tightest thing on the page. The label closes onto its list, the rows open up, and the group starts straight under the statement. */ #header.active.sub-open .utility-nav .sub-menu.audience .groups { padding-top: 0; } #header.active.sub-open .utility-nav .sub-menu.audience .group > .eyebrow { margin: 0 0 var(--text-spacing-xsmall); } #header.active.sub-open .utility-nav .sub-menu.audience .row { padding: var(--text-spacing-small) 0; } /* The label's own margin is the whole of the space under it now — the list's gap was opening a second one under that, and a label wants binding to what it labels. */ #header.active.sub-open .utility-nav .sub-menu.audience .group { row-gap: 0; } /* The overview sits on the run the groups already leave between them rather than adding to it. Under the rows that reads as the end of the list; over them, for the feature, it closes by half onto the statement it belongs to. */ #header.active.sub-open .utility-nav .sub-menu.audience .lead { padding-top: 0; } #header.active.sub-open .utility-nav .sub-menu.audience .lead.style-feature { margin-top: calc(-1 * var(--text-spacing-xsmall)); } /* With the spaces above closed up, this panel's copy no longer fills a tablet screen — and the offramps band, which is the last thing in it, stopped partway down with the page's linen under it. The band is meant to be the foot of the view, so the column it sits in is made to fill the height it has and the band takes up the slack. Every step from the scroller down has to carry it or the growth stops there; the audience list needs naming the long way because the rule that makes it a block is more specific than a short one. */ #header.active.sub-open .utility-nav, #header.active.sub-open .utility-nav .primary, #header.active.sub-open .utility-nav .primary > .menu, #header.active.sub-open .utility-nav .menu > li.active, #header.active.sub-open .utility-nav .menu > li.active > .sub-menu.audience, #header.active.sub-open .utility-nav .sub-menu.audience > .panel, #header.active.sub-open .utility-nav .sub-menu.audience .container, #header.active.sub-open .utility-nav .sub-menu.audience .grid { align-items: stretch; display: flex; flex: 1 1 auto; flex-direction: column; } /* Only when there is something in it. An audience whose panel carries no offramps still renders the band, and grown to the slack that is a screen of flat teal under the links. */ #header.active.sub-open .utility-nav .sub-menu.audience .promos:has(.promo) { flex-grow: 1; } /* The panel's one run of prose, and on a screen this size it is the thing being read rather than a caption over the links. The ratio in the line-height below it is unitless, so it comes with. The padding goes: the 16 this sits off the headline was being added to a 24 of its own, so what was specified as 16 drew at 40 — and at this size the headline's own line box leaves several more under it again. */ #header.active.sub-open .utility-nav .sub-menu.audience .statement { font-size: calc(20rem / 16); padding-top: 0; } /* The feature overview is the statement's own button, so it goes back above the list and lands directly under the statement — the groups follow it, and it is their first child. The card overview keeps its place under the rows: that one is a way out of the section rather than an introduction to it, and it reads last. */ #header.active.sub-open .utility-nav .sub-menu.audience .lead.style-feature { order: 0; padding-top: 0; } /* Drawn as the button it is on the bar rather than the line of underlined copy the phone's panel flattens it to. `.btn.secondary` is already an uppercase line against a sun chip, so undoing that flattening is the whole of it — except the colour, which stays inherited instead of going back to `white`, because this panel is linen and the takeover is not. */ #header.active.sub-open .utility-nav .sub-menu.audience .lead.style-feature > .btn { font-size: calc(13rem / 16); font-weight: 700; gap: var(--text-spacing-xxsmall); letter-spacing: 1px; line-height: calc(18 / 13); text-decoration: none; text-transform: uppercase; } #header.active.sub-open .utility-nav .sub-menu.audience .lead.style-feature > .btn .arrow { display: flex; } } /***************************************************************************************************************************************************************************************/ /* MQ MAX-WIDTH 650 - Mobile Sizes */ /***************************************************************************************************************************************************************************************/ @media only screen and (max-width: calc(650rem/16)) { /* The same close-up the tablet rung takes, for the same reason: the label was sitting a full text-spacing off its own list with the list another one off the statement, which on a phone is most of a screen spent on the gaps between three things. */ #header.active.sub-open .utility-nav .sub-menu.audience .groups { padding-top: 0; } /* Nothing is drawn above the group: the lead is written before it but ordered under the rows, so the clearance that rule leaves for a lead that is actually there is a phantom, and it was most of the space over the label. The label's own margin goes too — the list's gap already separates the two, and an eyebrow wants binding to what it labels rather than floating between the two things equally. */ #header.active.sub-open .utility-nav .sub-menu.audience .lead + .group { padding-top: 0; } #header.active.sub-open .utility-nav .sub-menu.audience .group > .eyebrow { margin: 0 0 var(--text-spacing-xxsmall); } /* The whole of the space under the headline here — the item is not the flex column it is on the rung above, so there is no gap of its own to halve, and this padding is it. */ #header.active.sub-open .utility-nav .sub-menu.audience .statement { padding-top: var(--text-spacing-xsmall); } /* The overview reads as the end of the list, so it sits a clear run under the last rule rather than the two runs the group gap and its own padding were making between them. */ #header.active.sub-open .utility-nav .sub-menu.audience .groups { row-gap: var(--text-spacing-medium); } #header.active.sub-open .utility-nav .sub-menu.audience .lead { padding-top: 0; } /* An extra 16 between the rows only — side by side the tiles are as close as they should be. */ #header #menu-main > li.active > .sub-menu.graphic_links { row-gap: calc(var(--text-spacing-xsmall) * 2); } /* Two to a row, and the tile stops being a photograph with its label written across it: at half a phone's width the crop is too small to carry type over it. The picture becomes a picture, the label and its arrow sit under it in the panel's own ink, and the scrim that was only ever there to make white type legible comes off with them. */ #header #menu-main > li.active > .sub-menu.graphic_links { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* `#header` on the front to outrank the rule that gives the tile the bar's portrait ratio — without it the tile stays locked to that height and the picture, which is now a row of its own rather than the whole box, overruns the label underneath it. */ #header #menu-main .sub-menu.graphic_links > li > a { align-content: start; aspect-ratio: auto; background: none; border-radius: 0; color: var(--charcoal); gap: var(--text-spacing-xxsmall); grid-template-columns: minmax(0, 1fr); height: auto; padding: 0; } /* One column, so the arrow drops under the label rather than taking a bite out of its measure. Half a phone's width is about four words a line, and the button was costing one of them. */ #header #menu-main .sub-menu.graphic_links .label { font-size: calc(12rem / 16); } /* The button's tiny cut. Under a label rather than beside a photograph it is a mark on the card, not the thing you aim at, and the full one was as tall as two lines of the label. */ #header #menu-main .sub-menu.graphic_links .arrow { height: 24px; justify-self: start; width: 32px; } #header #menu-main .sub-menu.graphic_links .arrow svg { height: 8px; width: 8px; } /* No hover here at all, by width rather than by pointer. The rung above asks the pointer, because a narrow window on a desktop is still a desktop — at this one it is a phone whatever the browser reports, and a tile left looking stuck after a tap is the only thing hovering could still produce. */ #header #menu-main .sub-menu.graphic_links > li > a:hover .text { transform: none; } #header #menu-main .sub-menu.graphic_links:has(> li > a:hover) > li > a:not(:hover)::after { opacity: 0; } #header #menu-main .sub-menu.graphic_links:has(> li > a:hover) > li > a:not(:hover)::before { opacity: 1; } /* `display: block` because it is a span, and an inline box takes neither the ratio nor the corner. It was a block by consequence before — absolute positioning made it one. Carrying `#header` like the rung above, because a media query adds no weight of its own and the rule up there would otherwise outrank this one at every width. */ #header #menu-main .sub-menu.graphic_links .media { aspect-ratio: 288 / 360; border-radius: 10px; display: block; grid-column: 1 / -1; grid-row: auto; inset: auto; overflow: hidden; position: relative; width: 100%; } #header #menu-main .sub-menu.graphic_links .media img { height: 100%; object-fit: cover; width: 100%; } /* Their own rows under the picture rather than laid over it. */ #header #menu-main .sub-menu.graphic_links .text, #header #menu-main .sub-menu.graphic_links .arrow { align-self: auto; grid-column: auto; grid-row: auto; margin: 0; } #header #menu-main .sub-menu.graphic_links > li > a { grid-template-rows: auto; } #header #menu-main .sub-menu.graphic_links > li > a::before { content: none; } :root { --container-outer-padding: 20px; --grid: minmax(0, 1fr); --module-spacing-large: 64px; --module-spacing-medium: 56px; --module-spacing-small: 48px; --module-spacing-xlarge: 80px; } .media.video .play-icon { font-size: calc(18rem / 16); height: 64px; width: 64px; } /*** Typography ***/ .mega { font-size: calc(80rem / 16); letter-spacing: -3px; line-height: calc(76 / 80); } .mega.xlarge { font-size: calc(82rem / 16); } h1, .heading-1 { font-size: calc(60rem / 16); letter-spacing: -2px; line-height: calc(64 / 60); } h2, .heading-2 { font-size: calc(52rem / 16); letter-spacing: -1.4px; line-height: calc(58 / 52); } h3, .heading-3 { font-size: calc(42rem / 16); letter-spacing: -1px; line-height: calc(52 / 42); } h4, .heading-4 { font-size: calc(38rem / 16); letter-spacing: -0.8px; line-height: calc(42 / 38); } h5, .heading-5 { font-size: calc(34rem / 16); letter-spacing: -0.6px; line-height: calc(40 / 34); } h6, .heading-6 { font-size: calc(32rem / 16); letter-spacing: -0.4px; line-height: calc(40 / 32); } .article-title, .content-styles h1:not([class^="heading-"]) { font-size: calc(42rem / 16); letter-spacing: -1px; line-height: calc(52 / 42); } .article-title.medium, .content-styles h2:not([class^="heading-"]) { font-size: calc(28rem / 16); line-height: calc(34 / 28); } .article-title.small, .content-styles h3:not([class^="heading-"]) { font-size: calc(18rem / 16); line-height: calc(26 / 18); } .emphasis { font-size: calc(52rem / 16); letter-spacing: -1.4px; line-height: calc(58 / 52); } .emphasis.medium { font-size: calc(42rem / 16); letter-spacing: -1px; line-height: calc(52 / 42); } p.xxlarge, ul.xxlarge, ol.xxlarge, .xxlarge-text, .xxlarge-text p, .xxlarge-text ul, .xxlarge-text ol { font-size: calc(26rem / 16); letter-spacing: -0.4px; line-height: calc(36 / 26); } p.xlarge, ul.xlarge, ol.xlarge, .xlarge-text, .xlarge-text p, .xlarge-text ul, .xlarge-text ol { font-size: calc(22rem / 16); letter-spacing: -0.2px; line-height: calc(32 / 22); } p.large, ul.large, ol.large, .large-text, .large-text p, .large-text ul, .large-text ol { font-size: calc(18rem / 16); letter-spacing: -0.2px; line-height: calc(30 / 18); } p, ul, ol, p.medium, ul.medium, ol.medium, .regular-text, .regular-text p, .regular-text ul, .regular-text ol, .medium-text, .medium-text p, .medium-text ul, .medium-text ol { font-size: calc(16rem / 16); letter-spacing: -0.1px; line-height: calc(28 / 16); } p.small, ul.small, ol.small, .small-text, .small-text p, .small-text ul, .small-text ol { font-size: calc(14rem / 16); letter-spacing: -0.1px; line-height: calc(24 / 14); } p.xsmall, ul.xsmall, ol.xsmall, .xsmall-text, .xsmall-text p, .xsmall-text ul, .xsmall-text ol { font-size: calc(12rem / 16); letter-spacing: 0.1px; line-height: calc(20 / 12); } .eyebrow { font-size: calc(14rem / 16); letter-spacing: 1px; line-height: calc(22 / 14); } /* A row of two here more often than not, and as a flex row the second line began beside the mark, in a column the mark's width narrower than the first — which reads as an indent nobody asked for. Inline, the mark sits in the text's own flow: the run wraps under it and takes whatever alignment the module is set to, so a centred one centres and a left one does not. */ .eyebrow:has(.mark) { display: block; } .eyebrow .mark { display: inline-flex; margin-right: var(--text-spacing-xxsmall); vertical-align: middle; } /* Two lines, so the mark takes one of its own and the run has the eyebrow's whole width under it. A block rather than a flex row, because its glyph is then inline content and lands where `text-align` puts it — the same answer the run below it gets. script.js sets the class; the count of line boxes is the one thing CSS cannot work out for itself. */ .eyebrow.mark-stacked .mark { display: block; margin-bottom: var(--text-spacing-xxsmall); margin-right: 0; } .accordion .toggle { --accordion-toggle: 44px; } /* The body opens right under its own heading here — the row's padding is the rest of the step and at this width the two together read as a break in the run. */ .accordions .accordion.active > :nth-child(n + 2) { padding-right: 0; padding-top: 4px; } .eyebrow.mark-stacked .mark svg { display: inline-block; vertical-align: middle; } .pill { font-size: calc(13rem / 16); letter-spacing: 1.8px; line-height: calc(16 / 13); } .eyebrow.small, .pill.small { font-size: calc(11rem / 16); letter-spacing: 1px; line-height: calc(16 / 11); } .amount { font-size: calc(38rem / 16); } .mobile-only { display: block !important; } /* The arrows keep the row's ends and the pages centre between them, which is what the auto margins above already do — they were zeroed here for a row that wrapped to two lines. It no longer has to: the rule below cuts the pages down to what a thumb needs. */ .pagination { flex-wrap: wrap; row-gap: var(--text-spacing-xsmall); } /* Where you are, either side of it, the first page and the last, with the break that stands for what is skipped. Fifteen numbers is a row nobody reads on a phone; the arrows are the step and these are the jumps. */ .pagination li:has(:is(.page, .current, .extend)) { display: none; } .pagination li:nth-child(2), .pagination li:nth-last-child(2), .pagination li:has(.current), .pagination li:has(.extend):nth-child(3), .pagination li:has(.extend):nth-last-child(3) { display: flex; } /* An end has a side with nothing on it, so it takes two steps on the side it has: page one shows 1 2 3, the last shows the two before it. In the middle the arrows are the step and the row stays five wide — the neighbours either side would put it on three lines at 390. */ .pagination li:nth-child(2):has(.current) + li, .pagination li:nth-child(2):has(.current) + li + li, .pagination li:has(+ li:nth-last-child(2) .current), .pagination li:has(+ li + li:nth-last-child(2) .current) { display: flex; } /*** Header ***/ #header .main-nav .logo { width: 119px; } /*** Default Page ***/ .page-content article { grid-column: 1 / -1; } .page-content .content-styles h1:not([class^="heading-"]) { font-size: calc(32rem / 16); } .page-content .content-styles h2:not([class^="heading-"]) { font-size: calc(24rem / 16); } /*** Page Builder ***/ /* The release keeps its date beside the headline rather than stacking: the block is a stamp, so it narrows to 80 and the copy takes the room it gives up. The rail variant is a sidebar card with no room for either, and stacks as it did. */ .card.row.release:not(.rail) { align-items: flex-start; flex-direction: row; gap: var(--text-spacing-small); } .card.row.release:not(.rail) .date { padding-block: var(--text-spacing-xsmall); width: 80px; } .card.row.release:not(.rail) .date .day { font-size: calc(40rem / 16); } /* Every trail, not only a hero's: a phone has one screen to say what the page is, and a line of it spent on where the page sits is a line the page does not get. The header's own menu is the way back at this width. */ .breadcrumbs { display: none; } /* A closing band runs into the footer here. The page leaves a module-sized step under its last one, which is right where that module ends on the page's own ground — a band carrying its own colour instead reads as a strip of it with a gap beneath, and the two dark edges want to meet. Only a band: a module on the page's ground keeps the step. A wash's run wrapper already zeroes its last module at every width. */ .page-builder > .module:is(.cta, .newsletter)[class*="bg-"]:last-child, main > * > .module:is(.cta, .newsletter):is(.wash, [class*="bg-"]):last-child { margin-bottom: 0; } .module.margin-overlap, .wash.margin-overlap { --module-overlap: 64px; } /* The run stands 40 below the bar rather than 80. That 80 is a desktop's clear space; on a phone it put the band's first line most of a screen below the bar it belongs to. */ .module.sticky-navigation.style-bar + :is(.module, .wash).margin-overlap { padding-top: calc(var(--sticky-nav-height) / 2 + var(--module-overlap) + var(--text-spacing-large)); } /*** Content Styles ***/ /* The columns hold their shape and the box scrolls; a cell that wrapped to a word a line would be no easier to read than one off the edge. */ .content-styles table :is(td, th) { min-width: 160px; } /*** Media ***/ .media.video .play-control { bottom: var(--text-spacing-xsmall); left: var(--text-spacing-xsmall); } /*** Cards ***/ .card .content { padding-inline: var(--text-spacing-small); } .card.row.mention .logo { height: 72px; width: 108px; } .card.row.mention .external { display: none; } /*** Footer ***/ /* The container's own gutter and nothing on top of it: at this width the inset the desktop composition puts around the copy costs more than the copy can spare. */ #footer .cta .intro { gap: var(--text-spacing-small); padding-block: var(--text-spacing-xxlarge); padding-inline: var(--container-outer-padding); } /* The photograph opens out from an inset and scales down as the section arrives. On a phone it is full-bleed from the first frame: the reveal is a widening, and there is no width here for it to widen across. */ #footer .cta .media { clip-path: none; } #footer .cta .media img { transform: none; } #footer .watermark { --footer-watermark: .5; } #footer .legal { border-radius: 24px; } #footer .main > nav > .menu { gap: var(--text-spacing-large); grid-template-columns: 1fr; } #footer .legal .menu { flex-wrap: wrap; } #footer .legal p, #footer .legal .menu a { white-space: normal; } #footer .legal { padding: var(--text-spacing-small) var(--text-spacing-medium); } .ginput_container--name { flex-direction: column; gap: var(--text-spacing-xsmall); } /*** Location dialog ***/ .jazzy-dialog.location .panel { padding: var(--text-spacing-medium) var(--text-spacing-small); } /*** Qgiv dialog ***/ .jazzy-dialog.qgiv { max-width: 92vw; } .jazzy-dialog.qgiv [data-qgiv-close] { right: var(--text-spacing-xxsmall); top: var(--text-spacing-xxsmall); } /*** Person bio dialog ***/ .jazzy-dialog.person-bio .panel { display: block; padding: var(--text-spacing-medium) 0 var(--text-spacing-medium) var(--text-spacing-small); } .jazzy-dialog.person-bio .profile { margin: calc(-1 * var(--text-spacing-medium)) 0 0 calc(-1 * var(--text-spacing-medium)); padding: var(--text-spacing-medium); } .jazzy-dialog.person-bio > [data-jazzy-dialog-close] { margin: var(--text-spacing-xsmall) var(--text-spacing-xsmall) 0 0; top: var(--text-spacing-xsmall); } /*** Accordions ***/ .accordions .accordion { padding-block: var(--text-spacing-small); } } /***************************************************************************************************************************************************************************************/ /* ACCESSIBILITY REDUCE MOTIONS */ /***************************************************************************************************************************************************************************************/ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /*** Accordions ***/ .accordion { transition: grid-template-rows var(--motion-slower) var(--ease-out); } .accordion > :nth-child(n + 2) { transition: opacity var(--motion) var(--ease-out) .12s, padding var(--motion-slower) var(--ease-out), visibility 0s; } .accordion:not(.active) > :nth-child(n + 2) { transition: opacity var(--motion) var(--ease-out), padding var(--motion-slower) var(--ease-out), visibility 0s .45s; } .accordion .toggle svg { transition: rotate var(--motion-slower) var(--ease-out); } /*** JazzyScroll Animations ***/ [data-jazzy-scroll] { pointer-events: none; transition-duration: var(--motion-slower); transition-property: opacity, transform; transition-timing-function: var(--ease-out); } [data-jazzy-scroll].animated-in { pointer-events: all; } /** All fade ins **/ [data-jazzy-scroll*="fade-in"] { opacity: 0; transition-property: opacity; } [data-jazzy-scroll*="fade-in"].animated-in { opacity: 1; } /* `anywhere`, not `break-word`. A split part is an inline-block, so its width is shrink-to-fit off its own min-content — and `break-word` is defined not to affect min-content, so a word longer than the line could not break and the box ran past the container instead. `anywhere` is the one that does affect it. Inert until a word genuinely cannot fit. */ [data-jazzy-scroll^="reveal-"].is-split .split-part { display: inline-block; overflow-wrap: anywhere; opacity: 0; transform: translate3d(0, .45em, 0); transition-delay: calc(var(--i) * var(--split-stagger, 40ms)); transition-duration: var(--split-duration, var(--motion-slower)); transition-property: opacity, transform; transition-timing-function: var(--ease-out); } [data-jazzy-scroll^="reveal-"].is-split.animated-in .split-part { opacity: 1; transform: translate3d(0, 0, 0); } [data-jazzy-scroll="reveal-lines"].is-split .split-part { --split-stagger: 60ms; display: block; } [data-jazzy-scroll^="reveal-"].reveal-slow { --split-duration: 800ms; --split-stagger: 90ms; } /** Fade in up **/ [data-jazzy-scroll="fade-in-up"] { position: relative; transform: translate3d(0, 60px, 0); transition-property: opacity, transform; } [data-jazzy-scroll="fade-in-up"].animated-in { transform: translate3d(0, 0, 0); } /** Fade in scale **/ [data-jazzy-scroll="fade-in-scale"] { scale: .85; transition-property: opacity, scale; } [data-jazzy-scroll="fade-in-scale"].animated-in { scale: 1; } /*** Header ***/ header .mobile-menu span:not(.accessibility) { transition: var(--motion) var(--ease-out); } /*** Zoom Images ***/ a:hover .image-zoom img, button:hover .image-zoom img { transform: scale(1.05); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-delay: 0s !important; transition-duration: .01ms !important; } }