/* ========================================================================== NextWaters / Clearwater theme: "airy aqua glass" Daylight through clean water. Frosted glass layers float over water, photos and soft aqua washes; the logo's three bubbles are the brand glyph. 1. Tokens (light, then the dark mode's values) 2. Reset and base elements 3. Links, focus, skip link, utilities 4. Layout: containers, sections, tones, grids, wave edges 5. Header and navigation 6. Buttons and arrow links 7. Typography components: eyebrow, section head, lead, prose 8. Heroes: home hero window, inner-page heroes, breadcrumb 9. Components: glass, cards, icon chips, bubbles, media frames, lists, steps, spec list, tags, callout, quote, facts, accordion, tabs 10. CTA band, contact section, form, footer 11. Motion: reveal, hero load, caustics, reduced motion 12. Arabic pages: font, line heights, right-to-left flips Inline spacing and positions use logical properties (padding-inline-start, inset-inline-end, text-align: start …), so the layout mirrors by itself on the Arabic pages (). Physical left/right is kept for what must not mirror: the logo's bubble arrangement, image crops, centred marks. ========================================================================== */ /* 1. Tokens ================================================================ */ :root { color-scheme: light; /* Colour: surfaces */ --bg: #F5FBFD; /* page background */ --bg-tint: #E9F6FA; /* aqua wash sections */ --bg-tint-2: #DAF0F6; /* deeper wash, form fields on tint */ --surface: #FFFFFF; /* solid cards, map frame */ --raised: #FFFFFF; /* the lit pill: selected tab or option, glass button hover */ --glass: rgba(255, 255, 255, .62); /* glass cards on washes */ --glass-strong: rgba(255, 255, 255, .8); /* glass that carries text over photos/video */ --glass-soft: rgba(255, 255, 255, .4); /* faint glass, chips on glass */ --glass-border: rgba(255, 255, 255, .8); --glass-blur: blur(18px) saturate(140%); /* Colour: text */ --ink: #0B2A3C; /* headings, body on light */ --ink-2: #24495C; /* secondary text on glass over imagery (AA) */ --muted: #4E6B7A; /* secondary text on bg / tint / glass-on-wash (5.1:1+) */ --line: rgba(11, 42, 60, .1); /* soft hairline, never harsh */ --line-strong: rgba(11, 42, 60, .18); /* Colour: brand */ --primary: #0E7FC0; /* ocean: fills, icons, large text */ --primary-ink: #0A6AA3; /* ocean for small text and links (5.5:1 on bg) */ --primary-deep: #0A5A8F; --aqua: #22C3D6; /* decorative only on light (never text) */ --mint: #7FE3D2; /* decorative; text colour on deep */ --sky: #CDEFF7; /* Colour: the rare dark section and footer */ --deep: #06324A; --deep-2: #042538; --on-deep: #FFFFFF; --on-deep-muted: rgba(226, 244, 250, .78); --on-deep-line: rgba(255, 255, 255, .14); /* Colour: states */ --danger: #B4232C; --danger-rgb: 180, 35, 44; /* the danger colour for rgba(): invalid fields, the error message */ --success: #0B6E5B; --success-soft: rgba(127, 227, 210, .38); /* the sent message */ --focus: #0A6AA3; --focus-on-deep: #7FE3D2; /* The form's status glyphs, drawn on --success / --danger */ --icon-sent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --icon-failed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); /* Colour: translucent layers, as RGB triplets for rgba(var(--…-rgb), alpha), so that one component rule serves both modes (the dark mode swaps the triplets) */ --glass-rgb: 255, 255, 255; /* glass fills: frosted white by day, lit deep blue by night */ --rim-rgb: 255, 255, 255; /* glass rims and the edges of photos */ --ocean-rgb: 14, 127, 192; /* ocean tints: hovers, soft fills, hairlines on glass */ --shade-rgb: 6, 50, 74; /* shadows */ --field-line: rgba(11, 42, 60, .16); /* form field border */ --placeholder: #6F8894; --photo-filter: none; /* photos and video (the dark mode dims them a little) */ --map-filter: saturate(.9); /* the Google map */ /* Gradients */ --grad: linear-gradient(120deg, #0E7FC0, #22C3D6); /* brand: icon chips, bubbles, bars */ --grad-cta: linear-gradient(120deg, #0A5E9C 0%, #0B71AF 55%, #0A7E9E 100%); /* buttons with white text (AA) */ --grad-text: linear-gradient(105deg, #0A5E9C 0%, #0E7FC0 42%, #0797AD 100%); /* highlight words (large text only) */ --grad-text-light: linear-gradient(105deg, #A6F0E3 0%, #6FDDEB 50%, #9FDBFF 100%); /* highlight words on deep */ --grad-soft: linear-gradient(135deg, #E3F5FB 0%, #D3EFF6 100%); --grad-deep: linear-gradient(125deg, #04283F 0%, #06324A 38%, #0A5A8C 78%, #0E7FC0 100%); --wash: radial-gradient(55% 60% at 8% 0%, rgba(34, 195, 214, .16), transparent 70%), radial-gradient(45% 55% at 100% 12%, rgba(14, 127, 192, .12), transparent 70%), radial-gradient(38% 32% at 72% 62%, rgba(127, 227, 210, .16), transparent 70%); --edge-fade: linear-gradient(180deg, var(--bg) 0, rgba(245, 251, 253, 0) 180px, rgba(245, 251, 253, 0) calc(100% - 180px), var(--bg) 100%); /* Type */ --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-display: clamp(2.4rem, 1.6rem + 3.2vw, 4.5rem); /* home hero h1: 38 → 72 */ --fs-h1: clamp(2.4rem, 1.4rem + 3.8vw, 5rem); /* inner hero h1: 38 → 77 */ --fs-h2: clamp(2rem, 1.35rem + 2.3vw, 3.4rem); /* section titles: 32 → 54 */ --fs-h3: clamp(1.3rem, 1.12rem + .6vw, 1.625rem); /* card / sub-section: 21 → 26 */ --fs-h4: clamp(1.125rem, 1.04rem + .3vw, 1.3rem); /* small headings: 18 → 21 */ --fs-statement: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem); /* vision, pull quotes: 24 → 38 */ --fs-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem); /* ledes: 18 → 22 */ --fs-body: 1.0625rem; /* 17px */ --fs-sm: .9375rem; /* 15px */ --fs-xs: .8125rem; /* 13px */ --lh-tight: 1.04; --lh-heading: 1.1; --lh-body: 1.65; --track-display: -.035em; --track-h: -.028em; --track-sm: -.012em; /* Space */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --section-y: clamp(4.5rem, 2.8rem + 6.5vw, 9rem); --head-gap: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); /* section head → content */ --gutter: clamp(1.25rem, .6rem + 2.6vw, 2.5rem); --grid-gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); /* Shape */ --r-xs: 10px; --r-sm: 14px; /* inputs, small chips */ --r-md: 20px; /* accordion rows, small cards */ --r-lg: 28px; /* cards, frames */ --r-xl: 40px; /* windows: hero, CTA band */ --r-pill: 999px; /* Shadow: soft, blue-tinted, layered */ --shadow-xs: 0 1px 2px rgba(6, 50, 74, .06), 0 4px 12px -6px rgba(14, 127, 192, .18); --shadow-sm: 0 1px 2px rgba(6, 50, 74, .05), 0 12px 32px -14px rgba(14, 127, 192, .28); --shadow-md: 0 2px 6px rgba(6, 50, 74, .05), 0 20px 60px -20px rgba(14, 127, 192, .35); --shadow-lg: 0 4px 14px rgba(6, 50, 74, .06), 0 40px 90px -30px rgba(14, 127, 192, .45); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .9); /* Containers and header */ --container: 1200px; --container-wide: 1320px; --container-narrow: 780px; --header-h: 68px; --header-h-condensed: 58px; --header-top: 16px; --header-offset: calc(var(--header-h) + var(--header-top)); --header-max: 1240px; --hero-inset: clamp(8px, 1vw, 14px); /* Motion */ --ease-out: cubic-bezier(.22, .8, .24, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --dur-1: .18s; --dur-2: .35s; --dur-3: .7s; --dur-reveal: 1s; } /* Dark mode: deep ocean at night, the same aqua glass lit from within. Only colour tokens change. It follows the system's mode unless the visitor chose one in the header's theme control: site.js stores the choice and the layout's head script sets data-theme="light" or "dark" on before the page renders. The two blocks below hold the same values (a unit test compares them): the first for the system's dark mode, the second for a chosen one. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #042538; --bg-tint: #06324A; --bg-tint-2: #0A3D5A; --surface: #0A3D5A; --raised: #1B5A7E; --glass: rgba(18, 74, 106, .6); --glass-strong: rgba(18, 74, 106, .84); --glass-soft: rgba(18, 74, 106, .4); --glass-border: rgba(64, 124, 158, .7); --ink: #E6F3F8; --ink-2: #C9DEE7; --muted: #A3BFCC; --line: rgba(201, 222, 231, .12); --line-strong: rgba(201, 222, 231, .2); --primary: #3BA9E0; --primary-ink: #7CCDF2; --primary-deep: #A8E1FA; --deep: #021B2A; --deep-2: #01111C; --danger: #FF9A9E; --danger-rgb: 255, 154, 158; --success: #6EDDC8; --success-soft: rgba(110, 221, 200, .14); --focus: #7CCDF2; --icon-sent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23042538' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --icon-failed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23042538' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); --glass-rgb: 18, 74, 106; --rim-rgb: 64, 124, 158; --ocean-rgb: 124, 205, 242; --shade-rgb: 0, 9, 16; --field-line: rgba(201, 222, 231, .24); --placeholder: #8FAAB7; --photo-filter: brightness(.9) saturate(.95); --map-filter: invert(.9) hue-rotate(180deg) saturate(.7) brightness(.95); --grad-text: linear-gradient(105deg, #A6F0E3 0%, #6FDDEB 50%, #9FDBFF 100%); --grad-soft: linear-gradient(135deg, rgba(124, 205, 242, .16) 0%, rgba(34, 195, 214, .12) 100%); --wash: radial-gradient(55% 60% at 8% 0%, rgba(34, 195, 214, .1), transparent 70%), radial-gradient(45% 55% at 100% 12%, rgba(14, 127, 192, .16), transparent 70%), radial-gradient(38% 32% at 72% 62%, rgba(127, 227, 210, .07), transparent 70%); --shadow-xs: 0 1px 2px rgba(0, 9, 16, .3), 0 4px 12px -6px rgba(0, 9, 16, .55); --shadow-sm: 0 1px 2px rgba(0, 9, 16, .25), 0 12px 32px -14px rgba(0, 9, 16, .65); --shadow-md: 0 2px 6px rgba(0, 9, 16, .25), 0 20px 60px -20px rgba(0, 9, 16, .75); --shadow-lg: 0 4px 14px rgba(0, 9, 16, .3), 0 40px 90px -30px rgba(0, 9, 16, .85); --glass-inset: inset 0 1px 0 rgba(150, 214, 240, .14); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #042538; --bg-tint: #06324A; --bg-tint-2: #0A3D5A; --surface: #0A3D5A; --raised: #1B5A7E; --glass: rgba(18, 74, 106, .6); --glass-strong: rgba(18, 74, 106, .84); --glass-soft: rgba(18, 74, 106, .4); --glass-border: rgba(64, 124, 158, .7); --ink: #E6F3F8; --ink-2: #C9DEE7; --muted: #A3BFCC; --line: rgba(201, 222, 231, .12); --line-strong: rgba(201, 222, 231, .2); --primary: #3BA9E0; --primary-ink: #7CCDF2; --primary-deep: #A8E1FA; --deep: #021B2A; --deep-2: #01111C; --danger: #FF9A9E; --danger-rgb: 255, 154, 158; --success: #6EDDC8; --success-soft: rgba(110, 221, 200, .14); --focus: #7CCDF2; --icon-sent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23042538' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --icon-failed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23042538' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); --glass-rgb: 18, 74, 106; --rim-rgb: 64, 124, 158; --ocean-rgb: 124, 205, 242; --shade-rgb: 0, 9, 16; --field-line: rgba(201, 222, 231, .24); --placeholder: #8FAAB7; --photo-filter: brightness(.9) saturate(.95); --map-filter: invert(.9) hue-rotate(180deg) saturate(.7) brightness(.95); --grad-text: linear-gradient(105deg, #A6F0E3 0%, #6FDDEB 50%, #9FDBFF 100%); --grad-soft: linear-gradient(135deg, rgba(124, 205, 242, .16) 0%, rgba(34, 195, 214, .12) 100%); --wash: radial-gradient(55% 60% at 8% 0%, rgba(34, 195, 214, .1), transparent 70%), radial-gradient(45% 55% at 100% 12%, rgba(14, 127, 192, .16), transparent 70%), radial-gradient(38% 32% at 72% 62%, rgba(127, 227, 210, .07), transparent 70%); --shadow-xs: 0 1px 2px rgba(0, 9, 16, .3), 0 4px 12px -6px rgba(0, 9, 16, .55); --shadow-sm: 0 1px 2px rgba(0, 9, 16, .25), 0 12px 32px -14px rgba(0, 9, 16, .65); --shadow-md: 0 2px 6px rgba(0, 9, 16, .25), 0 20px 60px -20px rgba(0, 9, 16, .75); --shadow-lg: 0 4px 14px rgba(0, 9, 16, .3), 0 40px 90px -30px rgba(0, 9, 16, .85); --glass-inset: inset 0 1px 0 rgba(150, 214, 240, .14); } /* 2. Reset and base elements =============================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; min-height: 100vh; background-color: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); overflow-x: clip; text-rendering: optimizeLegibility; } img, picture, video, svg, iframe { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink); font-weight: 800; line-height: var(--lh-heading); letter-spacing: var(--track-h); text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--track-display); } h2 { font-size: var(--fs-h2); line-height: 1.06; } h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } h4 { font-size: var(--fs-h4); font-weight: 700; letter-spacing: var(--track-sm); line-height: 1.3; } h5, h6 { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0; line-height: 1.4; } :where(p, ul, ol, dl, figure, blockquote) { margin: 0; } p { text-wrap: pretty; } :where(p) + :where(p) { margin-top: 1em; } ul, ol { padding: 0; } strong, b { font-weight: 700; color: var(--ink); } small { font-size: var(--fs-sm); } hr { height: 1px; margin: var(--sp-7) 0; border: 0; background: var(--line); } address { font-style: normal; } table { border-collapse: collapse; width: 100%; } /* 3. Links, focus, skip link, utilities ==================================== */ a { color: var(--primary-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: color var(--dur-1) ease; } a:hover { color: var(--primary-deep); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .section--deep :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible { outline-color: var(--focus-on-deep); } ::selection { background: rgba(34, 195, 214, .32); color: var(--ink); } .skip-link { position: fixed; top: 12px; inset-inline-start: 12px; z-index: 1000; padding: .75rem 1.25rem; border-radius: var(--r-pill); background: var(--deep); color: #fff; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-160%); transition: transform var(--dur-2) var(--ease-out); } .skip-link:focus { transform: none; color: #fff; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* Gradient-filled highlight words. Large text only (h1/h2/statements). */ .text-grad { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .section--deep .text-grad, .text-grad--light { background-image: var(--grad-text-light); } .text-muted { color: var(--muted); } .text-center { text-align: center; } .mt-0 { margin-top: 0 !important; } .stack > * + * { margin-top: var(--stack, 1rem); } /* The logo: the white PNG used as a mask, so it takes any colour (currentColor). */ .logo-mark { display: block; width: 92px; aspect-ratio: 235 / 211; background: currentColor; -webkit-mask: url(../images/logo-slider.png) center / contain no-repeat; mask: url(../images/logo-slider.png) center / contain no-repeat; } /* 4. Layout ================================================================ */ .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } .container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); } .container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); } [id] { scroll-margin-top: calc(var(--header-offset) + 1.5rem); } .section { position: relative; padding-block: var(--section-y); overflow-x: clip; } .section--tight { padding-block: calc(var(--section-y) * .6); } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } /* Tones */ .section--tint { background: var(--edge-fade), var(--wash), var(--bg-tint); } .section--white { background: var(--surface); } .section--wash { background: var(--wash), var(--bg); } .section--deep { background: radial-gradient(40% 45% at 88% 40%, rgba(34, 195, 214, .16), transparent 70%), radial-gradient(45% 50% at 6% 65%, rgba(14, 127, 192, .28), transparent 70%), var(--deep); color: var(--on-deep-muted); overflow-x: clip; overflow-y: visible; } .section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4, .section--deep strong { color: var(--on-deep); } .section--deep a:not(.btn) { color: var(--mint); } .section--deep a:not(.btn):hover { color: #fff; } .section--deep .text-muted { color: var(--on-deep-muted); } /* Wave edges: put inside a positioned section; they overhang the neighbour. Colour comes from `color` (defaults to the deep section colour). */ .wave-edge { position: absolute; left: 0; z-index: 1; display: block; width: 100%; height: clamp(34px, 5vw, 84px); color: var(--deep); fill: currentColor; pointer-events: none; } .wave-edge--top { bottom: calc(100% - 1px); } .wave-edge--bottom { top: calc(100% - 1px); transform: scaleY(-1); } .wave-edge__back { fill: var(--primary); opacity: .2; } /* Grids */ .grid { display: grid; gap: var(--grid-gap); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } /* Split: text + media side by side */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: center; } .split--media-wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split--text-wide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .split--top { align-items: start; } .split--reverse > :first-child { order: 2; } @media (max-width: 999.98px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 899.98px) { .split, .split--media-wide, .split--text-wide { grid-template-columns: minmax(0, 1fr); } .split--reverse > :first-child { order: 0; } } @media (max-width: 759.98px) { .grid--2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 639.98px) { .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } } /* 5. Header and navigation ================================================= */ .site-header { position: fixed; top: var(--header-top); left: 0; right: 0; z-index: 100; pointer-events: none; transition: top var(--dur-2) var(--ease-out); } .site-header__bar { position: relative; isolation: isolate; display: flex; align-items: center; gap: 1rem; width: min(100% - 32px, var(--header-max)); height: var(--header-h); margin-inline: auto; padding: 0; padding-inline: 1.1rem .5rem; border-radius: var(--r-pill); pointer-events: auto; transition: height var(--dur-2) var(--ease-out); } /* Glass lives on a pseudo-element so the mobile nav sheet can have its own backdrop blur. */ .site-header__bar::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(var(--glass-rgb), .7); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border: 1px solid rgba(var(--rim-rgb), .85); box-shadow: 0 10px 40px -18px rgba(var(--shade-rgb), .38), var(--glass-inset); transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) ease; } .site-header.is-scrolled { top: 10px; } .site-header.is-scrolled .site-header__bar { height: var(--header-h-condensed); } .site-header.is-scrolled .site-header__bar::before { background: rgba(var(--glass-rgb), .84); box-shadow: 0 18px 50px -20px rgba(var(--shade-rgb), .45), var(--glass-inset); } .brand { display: flex; align-items: center; margin-inline-end: auto; padding: 4px; border-radius: 14px; color: var(--primary); } .brand:hover { color: var(--primary-deep); } .brand .logo-mark { width: 54px; transition: width var(--dur-2) var(--ease-out); } .site-header.is-scrolled .brand .logo-mark { width: 48px; } .site-nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } .site-nav__link { position: relative; display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 .85rem; border-radius: var(--r-pill); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--track-sm); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) ease, color var(--dur-1) ease; } /* Just wide enough for the whole bar (menu, language, Contact, colour theme): tighter links */ @media (min-width: 1000px) and (max-width: 1099.98px) { .site-nav__link { padding-inline: .55rem; } .lang-switch { padding-inline: .65rem; } } .site-nav__link:hover { background: rgba(var(--ocean-rgb), .08); color: var(--primary-ink); } .site-nav__link[aria-current="page"] { color: var(--primary-ink); background: rgba(var(--ocean-rgb), .1); } .site-nav__link[aria-current="page"]::after { content: ""; position: absolute; inset-inline-start: 50%; bottom: 4px; width: 5px; height: 5px; margin-inline-start: -2.5px; border-radius: 50%; background: var(--grad); } .site-nav__cta { margin-inline-start: .5rem; } .site-nav__cta .btn { gap: .5rem; } /* Language switcher: the page in the other language, before the Contact button */ .site-nav__lang { margin-inline-start: .35rem; } .lang-switch { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: 0 .85rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--primary-ink); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease; } .lang-switch:hover { color: var(--primary-deep); background: rgba(var(--ocean-rgb), .08); border-color: rgba(var(--ocean-rgb), .38); } .lang-switch .icon { width: 1.05rem; height: 1.05rem; } /* Colour theme control ([data-theme-switch], web/js/site.js): System / Light / Dark radios. Wide screens: a round button in the bar opens them in a small glass panel. In the mobile menu: a labelled segmented row. Hidden without JS, which could not store the choice. */ .site-nav__theme { position: relative; margin-inline-start: .35rem; } html:not(.js) .site-nav__theme { display: none; } .theme-switch__toggle { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--ocean-rgb), .08); color: var(--primary-ink); transition: background-color var(--dur-1) ease, color var(--dur-1) ease; } .theme-switch__toggle:hover, .theme-switch__toggle[aria-expanded="true"] { background: rgba(var(--ocean-rgb), .16); color: var(--primary-deep); } .theme-switch__toggle .icon { grid-area: 1 / 1; width: 1.25rem; height: 1.25rem; } .theme-switch__toggle [data-theme-icon] { display: none; } .theme-switch[data-current="system"] [data-theme-icon="system"], .theme-switch[data-current="light"] [data-theme-icon="light"], .theme-switch[data-current="dark"] [data-theme-icon="dark"] { display: block; } .theme-switch__options { min-width: 0; margin: 0; padding: 0; border: 0; } /* Floated, so the legend sits inside the panel instead of on its border */ .theme-switch__legend { float: inline-start; width: 100%; padding: .35rem .75rem .5rem; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; } .theme-switch__list { clear: both; display: grid; gap: 2px; } .theme-switch__option { position: relative; display: flex; align-items: center; gap: .65rem; min-height: 2.5rem; padding-block: 0; padding-inline: .75rem .9rem; border-radius: 12px; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur-1) ease, color var(--dur-1) ease; } /* The radio covers its option (invisibly), so a click anywhere on it chooses it */ .theme-switch__option input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .theme-switch__option .icon { width: 1.15rem; height: 1.15rem; color: var(--primary); } .theme-switch__option:hover { background: rgba(var(--ocean-rgb), .08); color: var(--primary-ink); } .theme-switch__option:has(input:checked) { background: rgba(var(--ocean-rgb), .12); color: var(--primary-ink); } .theme-switch__option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; } /* High-contrast modes drop the fills: outline the choice instead (the focus ring stays outside) */ @media (forced-colors: active) { .theme-switch__option:has(input:checked) { outline: 2px solid Highlight; outline-offset: -2px; } .theme-switch__option:has(input:checked:focus-visible) { outline-width: 3px; outline-offset: 1px; } } @media (min-width: 1000px) { .theme-switch__options { position: absolute; top: calc(100% + .85rem); inset-inline-end: -.35rem; width: 12rem; padding: .4rem; border-radius: var(--r-md); background: rgba(var(--glass-rgb), .9); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(var(--rim-rgb), .9); box-shadow: var(--shadow-lg), var(--glass-inset); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); } .theme-switch.is-open .theme-switch__options { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } /* The current choice gets the menu's dot */ .theme-switch__option:has(input:checked)::after { content: ""; width: 6px; height: 6px; margin-inline-start: auto; border-radius: 50%; background: var(--grad); } } .nav-toggle { display: none; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; padding: 0; border: 0; border-radius: 50%; background: var(--grad-cta); color: #fff; box-shadow: 0 10px 22px -10px rgba(10, 94, 156, .8), inset 0 1px 0 rgba(255, 255, 255, .3); } .nav-toggle__lines, .nav-toggle__lines::before, .nav-toggle__lines::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) ease; } .nav-toggle__lines { position: relative; background: transparent; } .nav-toggle__lines::before, .nav-toggle__lines::after { content: ""; position: absolute; inset-inline-start: 0; } .nav-toggle__lines::before { top: -4px; } .nav-toggle__lines::after { top: 4px; width: 12px; } .nav-toggle[aria-expanded="true"] .nav-toggle__lines::before { transform: translateY(4px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__lines::after { width: 18px; transform: translateY(-4px) rotate(-45deg); } @media (max-width: 999.98px) { :root { --header-h: 62px; --header-h-condensed: 56px; --header-top: 12px; } .site-header__bar { width: calc(100% - 24px); padding-inline: .9rem .45rem; } .brand .logo-mark { width: 46px; } .site-header.is-scrolled .brand .logo-mark { width: 42px; } .nav-toggle { display: inline-grid; } .site-nav { position: absolute; top: calc(100% + .6rem); left: 0; right: 0; max-height: calc(100svh - var(--header-offset) - 1.5rem); padding: .6rem; overflow-y: auto; overscroll-behavior: contain; border-radius: var(--r-lg); background: rgba(var(--glass-rgb), .88); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(var(--rim-rgb), .9); box-shadow: var(--shadow-lg), var(--glass-inset); visibility: hidden; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: 50% 0; transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); } .site-nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; } .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; } .site-nav__link { display: flex; justify-content: space-between; min-height: 3.25rem; padding: 0 1.1rem; border-radius: 18px; font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; } .site-nav__link[aria-current="page"]::after { inset-inline-start: auto; inset-inline-end: 1.1rem; bottom: 50%; margin: 0 0 -3px; width: 7px; height: 7px; } .site-nav__cta { margin: .5rem 0 0; } .site-nav__cta .btn { width: 100%; min-height: 3.25rem; } .site-nav__lang { margin: .35rem 0 0; } .lang-switch { display: flex; min-height: 3.25rem; padding: 0 1.1rem; border-radius: 18px; font-size: 1.125rem; } .site-nav__theme { margin: .6rem 0 0; padding: .75rem .35rem .35rem; border-top: 1px solid var(--line); } .theme-switch__toggle { display: none; } .theme-switch__legend { padding: 0 .75rem .6rem; } .theme-switch__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-pill); background: rgba(var(--ocean-rgb), .08); } .theme-switch__option { justify-content: center; gap: .45rem; min-height: 2.75rem; padding: 0 .5rem; border-radius: var(--r-pill); } .theme-switch__option:has(input:checked) { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-xs); } html.nav-open { overflow: hidden; } .site-header::after { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(var(--shade-rgb), .28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--dur-2) ease, visibility 0s linear var(--dur-2); } html.nav-open .site-header::after { opacity: 1; visibility: visible; transition-delay: 0s; } } /* 6. Buttons and arrow links =============================================== */ .btn { --btn-h: 3.25rem; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: var(--btn-h); padding: 0 1.5rem; border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font); font-size: 1rem; font-weight: 700; line-height: 1; letter-spacing: var(--track-sm); text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) ease, background-color var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease; } .btn .icon { width: 1.15em; height: 1.15em; transition: transform var(--dur-2) var(--ease-out); } .btn:hover .icon--arrow { transform: translateX(3px); } .btn:active { transform: translateY(1px) scale(.99); } .btn--primary { color: #fff; background: var(--grad-cta); box-shadow: 0 12px 28px -12px rgba(10, 94, 156, .75), inset 0 1px 0 rgba(255, 255, 255, .28); } .btn--primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 18px 38px -14px rgba(14, 127, 192, .85), 0 0 0 4px rgba(34, 195, 214, .2), inset 0 1px 0 rgba(255, 255, 255, .3); } .btn--glass { color: var(--ink); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-border); box-shadow: var(--shadow-sm), var(--glass-inset); } .btn--glass:hover { color: var(--primary-deep); background: var(--raised); } .btn--outline { color: var(--primary-ink); background: transparent; border-color: rgba(var(--ocean-rgb), .38); } .btn--outline:hover { color: var(--primary-deep); background: rgba(var(--ocean-rgb), .07); border-color: var(--primary); } .btn--light { color: var(--deep); background: #fff; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45), inset 0 -2px 0 rgba(14, 127, 192, .12); } .btn--light:hover { color: #0A5A8F; background: #EFFBFE; transform: translateY(-1px); } .btn--ghost-light { color: #fff; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .42); } .btn--ghost-light:hover { color: #fff; background: rgba(255, 255, 255, .14); border-color: #fff; } .btn--sm { --btn-h: 2.5rem; padding: 0 1.1rem; font-size: var(--fs-sm); } .btn--lg { --btn-h: 3.75rem; padding: 0 1.9rem; font-size: 1.0625rem; } .btn--block { width: 100%; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; } /* Text link with an arrow bubble */ .link-arrow { display: inline-flex; align-items: center; gap: .7rem; color: var(--primary-ink); font-weight: 700; letter-spacing: var(--track-sm); text-decoration: none; } .link-arrow__icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(var(--ocean-rgb), .14); color: var(--primary-ink); transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) ease, color var(--dur-2) ease; } .link-arrow__icon .icon { width: 1rem; height: 1rem; } .link-arrow:hover { color: var(--primary-deep); } .link-arrow:hover .link-arrow__icon { transform: translateX(3px); background: var(--grad-cta); color: #fff; } .section--deep .link-arrow { color: var(--mint); } .section--deep .link-arrow__icon { background: rgba(255, 255, 255, .1); color: var(--mint); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } /* 7. Typography components ================================================= */ /* Eyebrow: sentence case, led by the logo's three bubbles. Never uppercase. */ .eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem; color: var(--primary-ink); font-size: var(--fs-sm); font-weight: 700; letter-spacing: -.005em; line-height: 1.3; } .eyebrow::before { content: ""; flex: none; width: 1.3rem; height: 1.1rem; background: radial-gradient(circle at 60% 26%, var(--primary) 0 4px, transparent 4.6px), radial-gradient(circle at 20% 72%, var(--aqua) 0 2.8px, transparent 3.4px), radial-gradient(circle at 84% 80%, var(--mint) 0 2.2px, transparent 2.8px); } .eyebrow--pill { padding: .4rem .9rem; padding-inline-start: .7rem; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xs); } .section--deep .eyebrow, .eyebrow--light { color: var(--mint); } .section--deep .eyebrow::before, .eyebrow--light::before { background: radial-gradient(circle at 60% 26%, #fff 0 4px, transparent 4.6px), radial-gradient(circle at 20% 72%, var(--aqua) 0 2.8px, transparent 3.4px), radial-gradient(circle at 84% 80%, var(--mint) 0 2.2px, transparent 2.8px); } .section-head { max-width: 48rem; margin-bottom: var(--head-gap); } .section-head__title { margin: 0; font-size: var(--fs-h2); font-weight: 800; line-height: 1.06; letter-spacing: var(--track-h); } .section-head__lede { margin-top: 1.25rem; color: var(--muted); font-size: var(--fs-lead); line-height: 1.55; max-width: 40rem; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .section-head__lede { margin-inline: auto; } .section-head--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; max-width: none; } .section-head--split .section-head__lede { margin-top: 0; } .section-head__aside > * + * { margin-top: 1.25rem; } .section--deep .section-head__lede { color: var(--on-deep-muted); } @media (max-width: 899.98px) { .section-head--split { grid-template-columns: minmax(0, 1fr); } } .lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.55; letter-spacing: -.01em; } .section--deep .lead { color: rgba(236, 248, 252, .9); } .statement { color: var(--ink); font-size: var(--fs-statement); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; } .section--deep .statement { color: #fff; } /* Long-form text */ .prose { max-width: 44rem; } .prose > * + * { margin-top: 1.1em; } .prose h2 { margin-top: 2em; font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.2rem); } .prose h3 { margin-top: 1.8em; } .prose h4 { margin-top: 1.6em; } .prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; } .prose ul, .prose ol { padding-inline-start: 0; list-style: none; } .prose ul > li, .prose ol > li { position: relative; padding-inline-start: 1.6rem; } .prose ul > li + li, .prose ol > li + li { margin-top: .45em; } .prose ul > li::before { content: ""; position: absolute; inset-inline-start: .2rem; top: .62em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--grad); } .prose ol { counter-reset: prose; } .prose ol > li { counter-increment: prose; } .prose ol > li::before { content: counter(prose) "."; position: absolute; inset-inline-start: 0; color: var(--primary-ink); font-weight: 700; } .prose a { font-weight: 600; } /* 8. Heroes ================================================================ */ /* 8a. Home hero: the water window. The media is inset from the page edges; glass cards float on it. Markup in docs/CLEARWATER-THEME.md. */ .hero { position: relative; padding: var(--hero-inset); } .hero__stage { position: relative; display: flex; align-items: flex-end; min-height: clamp(620px, calc(100vh - 2 * var(--hero-inset)), 940px); min-height: clamp(620px, calc(100svh - 2 * var(--hero-inset)), 940px); } .hero__media { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: var(--r-xl); background: #0A5A8C url(../images/slide-01-vdo.jpg) center / cover no-repeat; box-shadow: var(--shadow-lg); } .hero__media > video, .hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } /* Stills for the highlight steps; the active one is shown (page JS). */ .hero__media > [data-hero-media] { opacity: 0; transform: scale(1.06); transition: opacity 1.2s var(--ease-in-out), transform 7s var(--ease-out); } .hero__media > [data-hero-media].is-active { opacity: 1; transform: none; } /* Soft grade over every medium: keeps the header and cards grounded. */ .hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: linear-gradient(180deg, rgba(6, 50, 74, .28) 0%, rgba(6, 50, 74, 0) 22%, rgba(6, 50, 74, 0) 55%, rgba(6, 50, 74, .34) 100%), linear-gradient(120deg, rgba(14, 127, 192, .12), rgba(34, 195, 214, .06)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); pointer-events: none; } .hero__inner { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem); align-items: end; width: 100%; max-width: 1400px; margin-inline: auto; padding: calc(var(--header-offset) + 3rem) clamp(1rem, 3.6vw, 3.25rem) clamp(1rem, 3.6vw, 3.25rem); } .hero__card { max-width: 780px; padding: clamp(1.5rem, .9rem + 2.4vw, 3.25rem); border-radius: 32px; background: var(--glass-strong); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(var(--rim-rgb), .85); box-shadow: var(--shadow-lg), var(--glass-inset); } .hero__title { margin: 0; color: var(--ink); font-size: var(--fs-display); font-weight: 800; line-height: 1.02; letter-spacing: var(--track-display); } .hero__lede { max-width: 36rem; margin-top: 1.25rem; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.55; } .hero__actions { margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); } /* Highlight steps panel (the three carousel messages) */ .hero__panel { padding: clamp(1.25rem, .9rem + 1.2vw, 1.9rem); border-radius: 28px; background: rgba(var(--glass-rgb), .74); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(var(--rim-rgb), .85); box-shadow: var(--shadow-lg), var(--glass-inset); } .hero__panel-head { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; } .hero__tabs { display: flex; flex: 1; gap: 4px; min-width: 0; padding: 4px; border-radius: var(--r-pill); background: rgba(var(--ocean-rgb), .08); } .hero__tab { position: relative; flex: 1 1 auto; min-width: 0; min-height: 2.25rem; padding: 0 .5rem; overflow: hidden; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease; } .hero__tab:hover { color: var(--primary-deep); background: rgba(var(--glass-rgb), .6); } .hero__tab[aria-selected="true"] { color: var(--ink); background: var(--raised); box-shadow: var(--shadow-xs); } .hero__tab-fill { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; } .hero__tab[aria-selected="true"] .hero__tab-fill { transform: scaleX(1); } .hero__toggle { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; padding: 0; border: 0; border-radius: 50%; background: rgba(var(--ocean-rgb), .08); color: var(--primary-ink); transition: background-color var(--dur-1) ease; } .hero__toggle:hover { background: rgba(var(--ocean-rgb), .16); } .hero__toggle .icon { width: 1.1rem; height: 1.1rem; } .hero__toggle [data-icon="play"] { display: none; } .hero__panel.is-paused .hero__toggle [data-icon="play"] { display: block; } .hero__panel.is-paused .hero__toggle [data-icon="pause"] { display: none; } .hero__slide + .hero__slide { margin-top: 1.5rem; } .hero__slide-title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 800; letter-spacing: -.025em; } .hero__slide p { margin-top: .6rem; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.6; } .hero__slide .link-arrow { margin-top: 1rem; font-size: var(--fs-sm); } /* Without JS every message is listed; with JS they stack and step. */ html:not(.js) .hero__panel-head { display: none; } .js .hero__slides { display: grid; } .js .hero__slide { grid-area: 1 / 1; margin: 0; transition: opacity .6s ease, transform .6s var(--ease-out), visibility 0s linear 0s; } .js .hero__slide:not(.is-active) { visibility: hidden; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s; } @media (max-width: 1099.98px) { .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 23.5rem); } } @media (max-width: 899.98px) { .hero__stage { min-height: 0; } .hero__inner { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--header-offset) + 34vh); } .hero__card { max-width: none; } } @media (max-width: 639.98px) { .hero { padding: 8px 8px 0; } .hero__stage { display: block; } .hero__media { position: relative; height: min(64svh, 540px); min-height: 420px; border-radius: 30px; } .hero__inner { margin-top: -8.5rem; padding: 0 8px; gap: 12px; } .hero__card { padding: 1.6rem 1.35rem 1.5rem; border-radius: 26px; } .hero__panel { border-radius: 24px; background: rgba(var(--glass-rgb), .7); } .hero__actions .btn { flex: 1 1 100%; } } /* 8b. Inner-page heroes. Three options, all clear the fixed header. .page-hero wash: title + lede on an aqua wash with bubbles .page-hero--split wash + a media frame on the right .page-hero--window a rounded photo window with a glass title card overlapping it */ .page-hero { position: relative; padding: calc(var(--header-offset) + clamp(2.5rem, 1.2rem + 4.5vw, 6rem)) 0 clamp(3.5rem, 2rem + 5vw, 7rem); background: var(--wash), var(--bg); overflow-x: clip; } .page-hero__inner { position: relative; z-index: 1; } .page-hero__title { margin: 0; color: var(--ink); font-size: var(--fs-h1); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--track-display); max-width: 16ch; } .page-hero__lede { max-width: 40rem; margin-top: 1.5rem; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.55; } .page-hero__actions { margin-top: 2rem; } .page-hero .bubbles { --bubbles-size: clamp(8rem, 5rem + 12vw, 17rem); top: calc(var(--header-offset) + 2rem); inset-inline-end: max(var(--gutter), calc((100% - var(--container)) / 2 - 2rem)); } .page-hero--split .page-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); align-items: center; } .page-hero--split .page-hero__media { position: relative; } .page-hero--split .page-hero__media .bubbles { --bubbles-size: clamp(6rem, 4rem + 6vw, 10rem); top: -2.5rem; inset-inline-end: -1.5rem; } .page-hero--split .page-hero__title { max-width: 14ch; } .page-hero--window { padding: var(--hero-inset) var(--hero-inset) clamp(3rem, 2rem + 4vw, 6rem); background: var(--bg); } .page-hero__window { position: relative; height: clamp(340px, 30vw + 200px, 560px); overflow: hidden; isolation: isolate; border-radius: var(--r-xl); background: var(--deep); box-shadow: var(--shadow-lg); } .page-hero__window > img, .page-hero__window > video { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .page-hero__window::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(6, 50, 74, .3), rgba(6, 50, 74, 0) 30%, rgba(6, 50, 74, 0) 60%, rgba(6, 50, 74, .25)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); pointer-events: none; } .page-hero__card { position: relative; z-index: 2; max-width: 54rem; margin-top: clamp(-9rem, -4rem - 5vw, -5rem); padding: clamp(1.5rem, 1rem + 2.4vw, 3.25rem); border-radius: 32px; background: var(--glass-strong); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border: 1px solid rgba(var(--rim-rgb), .85); box-shadow: var(--shadow-lg), var(--glass-inset); } .page-hero--window .page-hero__title { max-width: 18ch; } @media (max-width: 899.98px) { .page-hero--split .page-hero__inner { grid-template-columns: minmax(0, 1fr); } .page-hero .bubbles { opacity: .7; } } @media (max-width: 639.98px) { .page-hero--window { padding: 8px 8px clamp(3rem, 2rem + 4vw, 6rem); } .page-hero__window { height: 300px; border-radius: 28px; } .page-hero__card { margin-top: -4.5rem; border-radius: 24px; } .page-hero--window .container { width: calc(100% - 16px); } .page-hero .bubbles { --bubbles-size: 6.5rem; top: calc(var(--header-offset) + .5rem); inset-inline-end: .75rem; } } /* Breadcrumb: a small glass pill above an inner-page title */ .breadcrumb { margin-bottom: 1.5rem; } .breadcrumb ol { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; padding: .4rem .95rem; margin: 0; list-style: none; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xs); font-size: var(--fs-sm); font-weight: 600; } .breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); } .breadcrumb li + li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--grad); } .breadcrumb a { color: var(--primary-ink); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--ink); } /* 9. Components ============================================================ */ /* Glass surface utility */ .glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md), var(--glass-inset); } .glass--strong { background: var(--glass-strong); } /* Icons: inline SVG, 24×24, stroke from here */ .icon { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon--sm { width: 1.125rem; height: 1.125rem; } .icon--lg { width: 2rem; height: 2rem; stroke-width: 1.5; } /* Icon chip: gradient squircle with a white line icon */ .icon-chip { --chip: 3.25rem; position: relative; display: inline-grid; place-items: center; width: var(--chip); height: var(--chip); flex: none; border-radius: 16px; background: var(--grad); color: #fff; box-shadow: 0 12px 24px -12px rgba(14, 127, 192, .75), inset 0 1px 0 rgba(255, 255, 255, .45); overflow: hidden; } .icon-chip::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, .45), transparent 55%); pointer-events: none; } .icon-chip .icon { position: relative; } .icon-chip--sm { --chip: 2.5rem; border-radius: 12px; } .icon-chip--sm .icon { width: 1.2rem; height: 1.2rem; } .icon-chip--lg { --chip: 4rem; border-radius: 20px; } .icon-chip--lg .icon { width: 1.9rem; height: 1.9rem; stroke-width: 1.6; } .icon-chip--round { border-radius: 50%; } .icon-chip--soft { background: var(--grad-soft); color: var(--primary-ink); box-shadow: inset 0 0 0 1px rgba(var(--ocean-rgb), .14); } .icon-chip--soft::before { display: none; } .icon-chip--glass { background: rgba(var(--glass-rgb), .72); color: var(--primary); box-shadow: var(--shadow-xs), inset 0 0 0 1px rgba(var(--rim-rgb), .9); } .section--deep .icon-chip--soft, .icon-chip--deep { background: rgba(255, 255, 255, .08); color: var(--mint); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } /* Bubbles: three glass spheres arranged like the logo's dots. Decorative. Place inside a positioned parent; size with --bubbles-size, position with top/right/bottom/left. */ .bubbles { position: absolute; z-index: 0; width: var(--bubbles-size, 9rem); aspect-ratio: 1; pointer-events: none; } .bubbles > span { position: absolute; border-radius: 50%; aspect-ratio: 1; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .45) 18%, transparent 42%), radial-gradient(circle at 70% 78%, rgba(34, 195, 214, .38), transparent 60%), linear-gradient(150deg, rgba(205, 239, 247, .55), rgba(14, 127, 192, .32)); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset -6px -10px 18px rgba(14, 127, 192, .2), inset 4px 6px 12px rgba(255, 255, 255, .55), 0 22px 40px -20px rgba(14, 127, 192, .55); -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%); } .bubbles > span:nth-child(1) { width: 50%; left: 30%; top: 0; } .bubbles > span:nth-child(2) { width: 30%; left: 4%; top: 56%; } .bubbles > span:nth-child(3) { width: 22%; left: 66%; top: 66%; } .bubbles--solid > span { background: var(--grad); border: 0; box-shadow: 0 14px 30px -14px rgba(14, 127, 192, .7), inset 0 2px 0 rgba(255, 255, 255, .35); -webkit-backdrop-filter: none; backdrop-filter: none; } .bubbles--light > span { opacity: .55; } /* Cards */ .card { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); border-radius: var(--r-lg); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm), var(--glass-inset); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease, background-color var(--dur-2) ease; } .card--solid { background: var(--surface); border-color: rgba(var(--ocean-rgb), .08); } .card--deep { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; color: var(--on-deep-muted); } .card--deep .card__title { color: #fff; } .card .icon-chip { margin-bottom: .5rem; } .card__title { font-size: var(--fs-h3); } .card__text { color: var(--muted); } .section--deep .card__text { color: var(--on-deep-muted); } .card__foot { margin-top: auto; padding-top: .75rem; } /* Whole-card link: put .card__link on the title's . */ .card__link { color: inherit; text-decoration: none; } .card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .card__link:focus-visible { outline: none; } .card:has(.card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; } .card:has(.card__link):hover { transform: translateY(-4px); background: rgba(var(--glass-rgb), .82); box-shadow: var(--shadow-md), var(--glass-inset); } .card:has(.card__link):hover .link-arrow__icon { transform: translateX(3px); background: var(--grad-cta); color: #fff; } /* Glass grid: one frosted sheet split into cells (offerings, values). Needs something colourful behind it (a .section--tint and/or .bubbles). */ .glass-grid { --cols: 3; position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 32px; background: rgba(var(--ocean-rgb), .12); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); } .glass-grid--2 { --cols: 2; } .glass-grid__cell { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.5rem, 1rem + 1.4vw, 2.4rem); background: rgba(var(--glass-rgb), .68); transition: background-color var(--dur-2) ease; } .glass-grid__cell .icon-chip { margin-bottom: .6rem; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) ease; } .glass-grid__title { font-size: clamp(1.2rem, 1.08rem + .4vw, 1.375rem); } .glass-grid__text { color: var(--muted); font-size: var(--fs-sm); line-height: 1.6; } .glass-grid__cell .link-arrow { margin-top: auto; padding-top: .6rem; font-size: var(--fs-sm); } .glass-grid__cell:has(.card__link):hover { background: rgba(var(--glass-rgb), .92); } .glass-grid__cell:has(.card__link):hover .icon-chip { transform: translateY(-3px) rotate(-4deg); box-shadow: 0 16px 30px -12px rgba(14, 127, 192, .8), inset 0 1px 0 rgba(255, 255, 255, .45); } .glass-grid__cell:has(.card__link):hover .link-arrow__icon { transform: translateX(3px); background: var(--grad-cta); color: #fff; } .glass-grid__cell:has(.card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: -5px; border-radius: 24px; } @media (max-width: 999.98px) { .glass-grid { --cols: 2; } .glass-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (max-width: 639.98px) { .glass-grid { --cols: 1; border-radius: 26px; } .glass-grid__cell { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem; align-items: start; padding: 1.35rem 1.25rem; } .glass-grid__cell > .icon-chip { grid-row: 1 / span 3; margin: 0; --chip: 2.75rem; border-radius: 14px; } .glass-grid__cell > .icon-chip .icon { width: 1.3rem; height: 1.3rem; } .glass-grid__cell > :not(.icon-chip) { grid-column: 2; } .glass-grid__cell .link-arrow { padding-top: .25rem; } } /* Numbered steps (only for real sequences).
    */ .steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; } .step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0 1.25rem; padding-bottom: 1.75rem; counter-increment: step; } .step::before { content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--grad); color: #fff; font-size: .9375rem; font-weight: 800; letter-spacing: -.02em; box-shadow: 0 12px 24px -12px rgba(14, 127, 192, .8), inset 0 1px 0 rgba(255, 255, 255, .4); font-variant-numeric: tabular-nums; } .step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(1.5rem - 1px); top: 3.5rem; bottom: .5rem; border-inline-start: 2px dotted rgba(var(--ocean-rgb), .35); } .step__title { align-self: center; min-height: 3rem; display: flex; align-items: center; font-size: var(--fs-h4); } .step__text { grid-column: 2; color: var(--muted); } .section--deep .step__text { color: var(--on-deep-muted); } /* Steps as a grid of glass tiles (many short steps, e.g. 11 turnkey stages) */ .steps--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--grid-gap); } .steps--grid .step { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.5rem; border-radius: var(--r-md); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm), var(--glass-inset); } .steps--grid .step::before { width: 2.5rem; height: 2.5rem; font-size: .8125rem; } .steps--grid .step::after { display: none; } .steps--grid .step__title { min-height: 0; font-size: 1.0625rem; line-height: 1.35; } .steps--grid .step__text { grid-column: auto; } /* Check list */ .list-check { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; } .list-check > li { position: relative; padding-inline-start: 2.2rem; line-height: 1.55; } .list-check > li::before { content: ""; position: absolute; inset-inline-start: 0; top: .02em; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--grad-soft); box-shadow: inset 0 0 0 1px rgba(var(--ocean-rgb), .18); } .list-check > li::after { content: ""; position: absolute; inset-inline-start: .52rem; top: calc(.02em + .3rem); width: .4rem; height: .7rem; border: solid var(--primary-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); } .list-check--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 2rem; } .list-check--glass > li { padding: .85rem 1rem; padding-inline-start: 3.1rem; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xs); } .list-check--glass > li::before { inset-inline-start: .9rem; top: .9rem; } .list-check--glass > li::after { inset-inline-start: calc(.9rem + .52rem); top: calc(.9rem + .3rem); } .section--deep .list-check > li::before { background: rgba(127, 227, 210, .14); box-shadow: inset 0 0 0 1px rgba(127, 227, 210, .3); } .section--deep .list-check > li::after { border-color: var(--mint); } @media (max-width: 639.98px) { .list-check--cols { grid-template-columns: minmax(0, 1fr); } } /* Bubble-dot list */ .list-dots { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; } .list-dots > li { position: relative; padding-inline-start: 1.5rem; } .list-dots > li::before { content: ""; position: absolute; inset-inline-start: .15rem; top: .6em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--grad); } /* Spec list:
    with .spec__row > dt + dd */ .spec { border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); overflow: hidden; } .spec__row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .35rem 2rem; padding: 1.1rem 1.5rem; } .spec__row + .spec__row { border-top: 1px solid var(--line); } .spec dt { color: var(--ink); font-weight: 700; } .spec dd { margin: 0; color: var(--muted); } @media (max-width: 639.98px) { .spec__row { grid-template-columns: minmax(0, 1fr); } } /* Tags */ .tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; } .tag { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.1rem; padding: .35rem .9rem; border-radius: var(--r-pill); background: rgba(var(--ocean-rgb), .08); color: var(--primary-deep); font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; } .tag--glass { background: var(--glass-strong); color: var(--ink); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xs); } .section--deep .tag { background: rgba(255, 255, 255, .08); color: #EAF8FB; } /* A sequence of tags joined by small dots (e.g. design → commissioning → O&M) */ .tag-list--flow { gap: .5rem 1rem; } .tag-list--flow > li { position: relative; } .tag-list--flow > li:not(:last-child)::after { content: ""; position: absolute; top: 50%; inset-inline-end: -.68rem; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--grad); opacity: .85; } /* Callout */ .callout { position: relative; display: flex; gap: 1.25rem; align-items: flex-start; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border-radius: var(--r-lg); background: radial-gradient(80% 120% at 0% 0%, rgba(34, 195, 214, .16), transparent 60%), var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm), var(--glass-inset); } .callout__title { font-size: var(--fs-h4); margin-bottom: .35rem; } .callout__body { min-width: 0; } .callout__body > * + * { margin-top: .6rem; } .callout--deep { background: var(--grad-deep); border-color: rgba(255, 255, 255, .12); color: var(--on-deep-muted); } .callout--deep .callout__title, .callout--deep strong { color: #fff; } .callout--deep a { color: var(--mint); } /* Pull quote */ .quote { position: relative; padding-inline-start: clamp(0rem, 4vw, 1rem); } .quote::before { content: "\201C"; display: block; height: .55em; margin-bottom: .25rem; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(4rem, 3rem + 3vw, 6.5rem); font-weight: 800; line-height: 1; } .quote blockquote { margin: 0; } .quote blockquote p { color: var(--ink); font-size: var(--fs-statement); font-weight: 700; line-height: 1.28; letter-spacing: -.025em; text-wrap: balance; } .quote figcaption { margin-top: 1rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; } .section--deep .quote::before { background-image: var(--grad-text-light); } .section--deep .quote blockquote p { color: #fff; } /* Facts: true counts only ("9 offerings"). */ .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--grid-gap); } .fact { padding: 1.5rem 1.5rem 1.35rem; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm), var(--glass-inset); } .fact__value { display: block; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .fact__label { display: block; margin-top: .6rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; } .section--deep .fact { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none; } .section--deep .fact__value { background-image: var(--grad-text-light); } .section--deep .fact__label { color: var(--on-deep-muted); } /* Accordion:
    */ .accordion { display: grid; gap: .75rem; } .accordion__item { border-radius: var(--r-md); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xs), var(--glass-inset); transition: background-color var(--dur-2) ease, box-shadow var(--dur-2) ease; } .accordion__item[open] { background: var(--glass-strong); box-shadow: var(--shadow-md), var(--glass-inset); } .accordion__summary { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; padding-inline-start: 1.5rem; border-radius: inherit; color: var(--ink); font-size: var(--fs-h4); font-weight: 700; letter-spacing: var(--track-sm); line-height: 1.35; list-style: none; cursor: pointer; } .accordion__summary::-webkit-details-marker { display: none; } .accordion__summary > :is(h2, h3, h4) { font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; } .accordion__summary .icon-chip { --chip: 2.5rem; border-radius: 12px; } .accordion__summary .icon-chip .icon { width: 1.2rem; height: 1.2rem; } .accordion__label { flex: 1; min-width: 0; } .accordion__marker { position: relative; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; background: rgba(var(--ocean-rgb), .08); transition: background-color var(--dur-2) ease, transform var(--dur-2) var(--ease-out); } .accordion__marker::before, .accordion__marker::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--primary-ink); transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-2) ease; } .accordion__marker::after { transform: rotate(90deg); } .accordion__summary:hover .accordion__marker { background: rgba(var(--ocean-rgb), .16); } .accordion__item[open] .accordion__marker { background: var(--grad-cta); } .accordion__item[open] .accordion__marker::before, .accordion__item[open] .accordion__marker::after { background: #fff; } .accordion__item[open] .accordion__marker::after { transform: rotate(0deg); opacity: 0; } .accordion__body { padding: 0 1.5rem 1.5rem; color: var(--muted); } .accordion__body > * + * { margin-top: 1rem; } /* Tabs: [data-tabs] > .tabs__list[role=tablist] > .tabs__tab[role=tab]; .tabs__panel[role=tabpanel]. Page JS sets aria-selected / hidden (web/js/site.js). Without JS every panel shows. */ .tabs__list { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin-bottom: 2rem; padding: 5px; overflow-x: auto; scrollbar-width: none; border-radius: var(--r-pill); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm), var(--glass-inset); } .tabs__list::-webkit-scrollbar { display: none; } html:not(.js) .tabs__list { display: none; } .tabs__tab { flex: none; min-height: 2.75rem; padding: 0 1.2rem; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; transition: background-color var(--dur-2) ease, color var(--dur-2) ease, box-shadow var(--dur-2) ease; } .tabs__tab:hover { color: var(--primary-deep); background: rgba(var(--ocean-rgb), .07); } .tabs__tab[aria-selected="true"] { color: #fff; background: var(--grad-cta); box-shadow: 0 10px 22px -12px rgba(10, 94, 156, .8), inset 0 1px 0 rgba(255, 255, 255, .28); } .tabs__tab:focus-visible { outline-offset: -3px; } .tabs__panel:focus-visible { outline-offset: 6px; border-radius: var(--r-md); } html:not(.js) .tabs__panel + .tabs__panel { margin-top: 3rem; } /* Side tabs: a vertical list on wide screens (long lists such as nine offerings) */ @media (min-width: 1000px) { .tabs--side { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; } .tabs--side .tabs__list { position: sticky; top: calc(var(--header-offset) + 1.5rem); flex-direction: column; width: auto; margin: 0; padding: 8px; border-radius: var(--r-lg); } .tabs--side .tabs__tab { justify-content: flex-start; min-height: 3rem; padding: .6rem 1rem; border-radius: 16px; text-align: start; white-space: normal; line-height: 1.3; } } /* Media frames */ .frame { position: relative; margin: 0; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); background: var(--bg-tint-2); box-shadow: var(--shadow-md); } .frame > img, .frame > video { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter); } .frame::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(var(--rim-rgb), .5), inset 0 1px 0 rgba(var(--rim-rgb), .6); pointer-events: none; } .frame--4x5 { aspect-ratio: 4 / 5; } .frame--square { aspect-ratio: 1; } .frame--wide { aspect-ratio: 16 / 10; } .frame--cinema { aspect-ratio: 21 / 9; } .frame--window { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); } /* The nextw-0x.png cut-outs have an old grey drop shadow baked into two edges. .frame--trim crops the right + bottom edges; .frame--trim-left crops left + bottom (nextw-01.png). */ .frame--trim > img { transform-origin: 0 0; scale: 1.06; } .frame--trim-left > img { transform-origin: 100% 0; scale: 1.06; } .frame__caption { position: absolute; inset-inline-start: 1rem; bottom: 1rem; z-index: 3; max-width: calc(100% - 2rem); padding: .55rem 1rem; border-radius: var(--r-pill); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; box-shadow: var(--shadow-sm); } /* Caustic light over a photo/video: add inside .frame or .hero__media */ .caustics { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light; } .caustics::before, .caustics::after { content: ""; position: absolute; inset: -30%; background-repeat: no-repeat; } .caustics::before { background-image: radial-gradient(closest-side, rgba(255, 255, 255, .75), transparent), radial-gradient(closest-side, rgba(127, 227, 210, .6), transparent), radial-gradient(closest-side, rgba(255, 255, 255, .6), transparent), radial-gradient(closest-side, rgba(34, 195, 214, .55), transparent); background-size: 42% 36%, 34% 30%, 48% 40%, 30% 34%; background-position: 22% 26%, 74% 18%, 56% 78%, 88% 62%; } .caustics::after { background-image: repeating-radial-gradient(circle at 40% 45%, transparent 0 22px, rgba(255, 255, 255, .22) 24px, transparent 28px); opacity: .45; } /* 10. CTA band, contact, form, footer ====================================== */ .cta-band-section { position: relative; z-index: 2; padding-top: clamp(1rem, 2vw, 2rem); margin-bottom: calc(-1 * clamp(4rem, 3rem + 3vw, 6rem)); } .cta-band { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding: clamp(2rem, 1.2rem + 3.4vw, 4.5rem) clamp(1.5rem, 1rem + 3.5vw, 4.5rem); overflow: hidden; border-radius: var(--r-xl); background: var(--grad-deep); color: var(--on-deep-muted); box-shadow: 0 40px 90px -36px rgba(var(--shade-rgb), .75); } .cta-band .caustics { mix-blend-mode: soft-light; opacity: .9; } .cta-band .bubbles { --bubbles-size: clamp(7rem, 5rem + 5vw, 10rem); inset-inline-end: clamp(1rem, 3vw, 3rem); top: -2.25rem; z-index: 0; } .cta-band__content { position: relative; z-index: 1; max-width: 40rem; } .cta-band__title { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.06; letter-spacing: -.032em; } .cta-band__text { margin-top: 1rem; font-size: var(--fs-lead); line-height: 1.5; color: rgba(236, 248, 252, .86); } .cta-band__actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .75rem; align-items: stretch; } @media (max-width: 759.98px) { .cta-band { grid-template-columns: minmax(0, 1fr); border-radius: 30px; } .cta-band .bubbles { --bubbles-size: 6rem; inset-inline-end: -1.75rem; top: -2rem; opacity: .45; } .cta-band__actions { flex-direction: row; flex-wrap: wrap; } .cta-band__actions .btn { flex: 1 1 14rem; } } .contact { position: relative; padding: calc(var(--section-y) + clamp(4rem, 3rem + 3vw, 6rem)) 0 calc(var(--section-y) + clamp(2rem, 4vw, 4rem)); background: var(--edge-fade), var(--wash), var(--bg-tint); overflow-x: clip; } .contact > .bubbles { --bubbles-size: clamp(8rem, 5rem + 10vw, 16rem); inset-inline-start: -3rem; bottom: 18%; opacity: .9; } .contact__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: start; } .contact__title { font-size: var(--fs-h2); } .contact__intro { margin-top: 1.25rem; color: var(--muted); font-size: var(--fs-lead); line-height: 1.55; } .contact__details { display: grid; gap: .75rem; margin: 2rem 0 0; padding: 0; list-style: none; } /* General and sales enquiries: a glass card each, a phone line and an email line with several links */ .contact__groups { display: grid; gap: .75rem; margin-top: 2rem; } .contact__groups + .contact__details { margin-top: .75rem; } .contact__group { padding: 1rem 1rem 1rem .75rem; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xs), var(--glass-inset); } .contact__group-title { padding-left: .25rem; font-size: var(--fs-body); font-weight: 800; line-height: 1.3; } .contact__line { display: flex; align-items: flex-start; gap: 1rem; margin-top: .85rem; } .contact__values { display: grid; gap: .1rem; } .contact__item { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; padding-inline-start: .75rem; border-radius: var(--r-md); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-xs), var(--glass-inset); } .contact__label { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; } .contact__value { display: block; color: var(--ink); font-weight: 700; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; } a.contact__value:hover { color: var(--primary-ink); text-decoration: underline; } .contact__map { position: relative; margin-top: 1.25rem; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); background: var(--bg-tint-2); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md); } .contact__map iframe { width: 100%; height: 100%; border: 0; filter: var(--map-filter); } .contact__card { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: 32px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg), var(--glass-inset); } .contact__card-title { font-size: var(--fs-h3); } .contact__card-text { margin-top: .4rem; color: var(--muted); font-size: var(--fs-sm); } @media (max-width: 899.98px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } } /* Side by side, the form card is as tall as "Get in touch"; the message box takes the extra height */ @media (min-width: 900px) { .contact__card { display: flex; flex-direction: column; align-self: stretch; } .contact__card .form { display: flex; flex: 1; flex-direction: column; } .contact__card .form__grid { flex: 1; grid-template-rows: auto auto 1fr; } .contact__card .field--full { grid-template-rows: auto 1fr; } .contact__card .field--full textarea { height: 100%; } } /* Form */ .form { margin-top: 1.75rem; } .form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; } .field { display: grid; gap: .45rem; min-width: 0; } .field--full { grid-column: 1 / -1; } .field label { color: var(--ink); font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; } .field__optional { color: var(--muted); font-weight: 500; } .input, .field input, .field textarea, .field select { width: 100%; min-height: 3.25rem; padding: .8rem 1.05rem; border: 1px solid var(--field-line); border-radius: var(--r-sm); background: rgba(var(--glass-rgb), .86); color: var(--ink); font-size: 1rem; line-height: 1.4; box-shadow: inset 0 1px 2px rgba(var(--shade-rgb), .05); transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease, background-color var(--dur-1) ease; -webkit-appearance: none; appearance: none; } .field textarea { min-height: 9.5rem; resize: vertical; } .field input:hover, .field textarea:hover { border-color: rgba(var(--ocean-rgb), .45); } .field input:focus, .field textarea:focus { outline: none; } .field input:focus-visible, .field textarea:focus-visible, .field input:focus, .field textarea:focus { border-color: var(--primary); background: rgb(var(--glass-rgb)); box-shadow: 0 0 0 4px rgba(34, 195, 214, .3), inset 0 1px 2px rgba(var(--shade-rgb), .05); } .field input:user-invalid, .field textarea:user-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(var(--danger-rgb), .12); } .field input::placeholder, .field textarea::placeholder { color: var(--placeholder); } .form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 1.5rem; } .form__note { color: var(--muted); font-size: var(--fs-xs); } /* Who uses the form's details and why, at the point of collection, above the button */ .form__privacy { margin: 1.25rem 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.5; } .form__privacy a { font-weight: 600; } .form__footer + .form__note { margin-top: 1rem; } /* reCAPTCHA v3: Google's badge stays hidden (visibility, the way Google allows; display: none would stop reCAPTCHA), and the form's .form__note says that reCAPTCHA protects it */ .grecaptcha-badge { visibility: hidden; } /* Status (written by site.js) */ [data-form-status] { display: flex; align-items: flex-start; gap: .65rem; flex: 1 1 16rem; margin: 0; padding: .8rem 1rem; border-radius: var(--r-sm); background: rgba(var(--ocean-rgb), .08); color: var(--primary-deep); font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; } [data-form-status][hidden] { display: none; } [data-form-status]::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem; border-radius: 50%; } form[data-state="sending"] [data-form-status]::before { border: 2px solid rgba(var(--ocean-rgb), .25); border-top-color: var(--primary); animation: cw-spin .8s linear infinite; } form[data-state="success"] [data-form-status] { background: var(--success-soft); color: var(--success); } form[data-state="success"] [data-form-status]::before { background: var(--success) var(--icon-sent) center / 70% no-repeat; } form[data-state="error"] [data-form-status] { background: rgba(var(--danger-rgb), .08); color: var(--danger); } form[data-state="error"] [data-form-status]::before { background: var(--danger) var(--icon-failed) center / 70% no-repeat; } @keyframes cw-spin { to { transform: rotate(360deg); } } @media (max-width: 539.98px) { .form__grid { grid-template-columns: minmax(0, 1fr); } .form__footer .btn { width: 100%; } } /* Footer */ .site-footer { position: relative; padding: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 0 2rem; background: radial-gradient(34% 40% at 88% 48%, rgba(34, 195, 214, .14), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(14, 127, 192, .24), transparent 70%), linear-gradient(180deg, var(--deep) 0%, var(--deep) 20%, var(--deep-2) 100%); color: var(--on-deep-muted); font-size: var(--fs-sm); } .site-footer .wave-edge--top { color: var(--deep); } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, 1.2fr); gap: 2.5rem clamp(1.5rem, 3vw, 3.5rem); } .footer__brand .brand { color: #fff; margin: 0 0 1.25rem; padding: 0; width: fit-content; } .footer__brand .logo-mark { width: 96px; } .footer__about { max-width: 22rem; line-height: 1.6; } .footer__heading { margin-bottom: 1rem; color: #fff; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; } .footer__links { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; } .footer__links a { color: var(--on-deep-muted); text-decoration: none; } .footer__links a:hover { color: #fff; text-decoration: underline; } .footer__contact { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; } .footer__contact li { display: flex; gap: .75rem; align-items: flex-start; } .footer__contact .icon { width: 1.15rem; height: 1.15rem; margin-top: .2rem; color: var(--mint); } .footer__contact a { color: #fff; font-weight: 600; text-decoration: none; } .footer__contact a:hover { text-decoration: underline; } .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--on-deep-line); font-size: var(--fs-xs); } .footer__bottom p { margin: 0; } .footer__top-link { color: var(--on-deep-muted); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; } .footer__top-link:hover { color: #fff; } .footer__top-link .icon { width: 1rem; height: 1rem; } /* The privacy policy, and "Cookie settings" where a tool asks for consent (needs JavaScript) */ .footer__legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; } .footer__legal a, .footer__legal button { padding: 0; border: 0; background: none; color: var(--on-deep-muted); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .footer__legal a:hover, .footer__legal button:hover { color: #fff; text-decoration: underline; } [data-consent-only][hidden] { display: none; } .site-footer :focus-visible { outline-color: var(--focus-on-deep); } @media (max-width: 999.98px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 539.98px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } } /* Consent (views/layouts/_consent.php, web/js/consent.js, frontend/components/Consent.php): a glass panel in the bottom corner, above the page but never blocking it. The head script's class on picks the view: consent-ask (the question), consent-notice (the notice), and from "Cookie settings" consent-open (a switch per tool). Accept and Reject look alike. */ .consent { display: none; position: fixed; z-index: 90; bottom: 1rem; inset-inline-start: 1rem; width: min(100% - 2rem, 30rem); } html.consent-ask .consent, html.consent-notice .consent, html.consent-open .consent { display: block; } .consent__panel { max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.25rem; border-radius: var(--r-lg); background: rgba(var(--glass-rgb), .94); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(var(--rim-rgb), .9); box-shadow: var(--shadow-lg), var(--glass-inset); color: var(--ink); } .consent__view { display: none; } html.consent-ask .consent__view--ask, html.consent-notice .consent__view--notice { display: block; } html.consent-open .consent__view--ask, html.consent-open .consent__view--notice { display: none; } html.consent-open .consent__view--choices { display: block; } .consent__title { margin: 0; font-size: var(--fs-h4); font-weight: 800; line-height: var(--lh-heading); } .consent__text { margin: .5rem 0 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; } .consent__view--notice .consent__text { margin-top: 0; } .consent__text a { font-weight: 600; } .consent__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; margin-top: 1rem; } .consent__link { padding: .35rem .25rem; border: 0; background: none; color: var(--primary-ink); font: inherit; font-size: var(--fs-sm); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; cursor: pointer; } .consent__link:hover { color: var(--primary-deep); } .consent__choices { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; } .consent__choice { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem .85rem; border-radius: var(--r-md); background: rgba(var(--glass-rgb), .6); border: 1px solid var(--line); } .consent__choice label { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; cursor: pointer; } .consent__choice strong { display: block; color: var(--ink); } /* A checkbox drawn as a switch */ .consent__switch { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 2.5rem; height: 1.5rem; margin: .1rem 0 0; border-radius: var(--r-pill); background: var(--muted); cursor: pointer; transition: background-color var(--dur-2) ease; } .consent__switch::before { content: ""; position: absolute; top: .1875rem; inset-inline-start: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-xs); transition: transform var(--dur-2) var(--ease-out); } .consent__switch:checked { background: var(--primary); } .consent__switch:checked::before { transform: translateX(1rem); } [dir="rtl"] .consent__switch:checked::before { transform: translateX(-1rem); } .consent__switch:disabled { opacity: .55; cursor: not-allowed; } @media (forced-colors: active) { .consent__switch { -webkit-appearance: auto; appearance: auto; width: auto; height: auto; } .consent__switch::before { content: none; } } @media (max-width: 539.98px) { .consent { bottom: .75rem; inset-inline: .75rem; width: auto; } .consent__panel { padding: 1rem; } } /* 11. Motion =============================================================== */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* Reveal: content surfaces gently, as if rising through water. */ html.js [data-reveal] { transition: opacity var(--dur-reveal) var(--ease-out), transform calc(var(--dur-reveal) * 1.15) var(--ease-out); } html.js [data-reveal]:not(.is-revealed) { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); } html.js [data-reveal="fade"]:not(.is-revealed) { transform: none; } html.js [data-reveal="scale"]:not(.is-revealed) { transform: scale(.96); } /* Home hero: the one orchestrated load moment. */ .hero__media { animation: cw-window 1.6s var(--ease-out) both; } .hero__card { animation: cw-rise 1.1s .25s var(--ease-out) both; } .hero__panel { animation: cw-rise 1.1s .45s var(--ease-out) both; } .page-hero__card { animation: cw-rise 1s .2s var(--ease-out) both; } /* Caustic shimmer drifts slowly over water media. */ .caustics::before { animation: cw-caustic 20s var(--ease-in-out) infinite alternate; } .caustics::after { animation: cw-caustic 28s var(--ease-in-out) infinite alternate-reverse; } /* Hero highlight progress (page JS advances on animationend). */ .hero__tab[aria-selected="true"] .hero__tab-fill { animation: cw-progress var(--hero-interval, 7s) linear both; } .hero__panel.is-paused .hero__tab-fill, .hero__panel:hover .hero__tab-fill, .hero__panel:focus-within .hero__tab-fill { animation-play-state: paused; } } @keyframes cw-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); } to { opacity: 1; transform: none; } } @keyframes cw-window { from { opacity: 0; transform: scale(.975); } to { opacity: 1; transform: none; } } @keyframes cw-caustic { 0% { transform: translate3d(-4%, -3%, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(3%, 2%, 0) rotate(7deg) scale(1.08); } 100% { transform: translate3d(-2%, 4%, 0) rotate(-5deg) scale(1.04); } } @keyframes cw-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } html.js [data-reveal], html.js [data-reveal]:not(.is-revealed) { opacity: 1; transform: none; } /* Show the poster instead of the video. */ .hero__media > video, [data-motion-video] { visibility: hidden; } .hero__toggle { display: none; } } /* 12. Arabic pages ========================================================= */ /* One Arabic family: IBM Plex Sans Arabic (loaded by the layout on the Arabic pages only). Latin words and figures keep Plus Jakarta Sans. Arabic letters rise and fall further than Latin ones, so lines open up; and cursive Arabic is never letter-spaced. */ :root:lang(ar) { --font: "Plus Jakarta Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; --lh-tight: 1.35; --lh-heading: 1.4; --lh-body: 1.85; --track-display: 0; --track-h: 0; --track-sm: 0; } :lang(ar), :lang(ar)::before, :lang(ar)::after { letter-spacing: 0 !important; } :lang(ar) h1, :lang(ar) h2, :lang(ar) .hero__title, :lang(ar) .page-hero__title, :lang(ar) .section-head__title, :lang(ar) .cta-band__title { line-height: var(--lh-tight); } :lang(ar) h3, :lang(ar) h4, :lang(ar) .statement, :lang(ar) .quote blockquote p { line-height: var(--lh-heading); } /* Right to left: arrows point the other way, progress fills from the right, the pull quote opens with the right-hand mark. Checkmarks, play and phone icons stay as they are. */ [dir="rtl"] .icon--arrow, [dir="rtl"] .link-arrow__icon { scale: -1 1; } [dir="rtl"] .hero__tab-fill { transform-origin: 100% 50%; } [dir="rtl"] .quote::before { content: "\201D"; } /* A phone number reads left to right on one line, digit group after digit group: Arabic-Indic digits separated by spaces would otherwise be laid out right to left */ [dir="rtl"] a[href^="tel:"] { white-space: nowrap; } [dir="rtl"] a[href^="tel:"][dir="ltr"], [dir="rtl"] a[href^="tel:"] [dir="ltr"] { unicode-bidi: isolate-override; } /* Arabic-Indic digits (٠١٢٣٤٥٦٧٨٩) in the Arabic text, the counters too: ٠١، ٠٢ … */ @counter-style arabic-indic-leading-zero { system: extends arabic-indic; pad: 2 "٠"; } :lang(ar) .step::before { content: counter(step, arabic-indic-leading-zero); } :lang(ar) .prose ol > li::before { content: counter(prose, arabic-indic) "."; } /* Fallback when backdrop-filter is unsupported: make glass more opaque. The selectors match :root in every mode, as heavily as the dark-mode blocks do. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root, :root[data-theme], :root:not([data-theme="light"]) { --glass: rgba(var(--glass-rgb), .9); --glass-strong: rgba(var(--glass-rgb), .95); } .site-header__bar::before { background: rgba(var(--glass-rgb), .95); } .glass-grid__cell { background: rgba(var(--glass-rgb), .95); } }