. */ } /* Consistent list styles */ ul, ol { margin: 0; padding: 0; list-style: none; /* or keep disc, but remove padding */ } /* Images are block-level and responsive by default */ img { display: block; max-width: 100%; height: auto; } /* Consistent focus styles that don't break layout */ :focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════════ LETLOU ENERGY — GLOBAL Fonts Self hosted fonts. ═══════════════════════════════════════════════════════════════════════ */ /* barlow-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow'; font-style: normal; font-weight: 300; src: url('../assets/fonts/barlow-v13-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow'; font-style: normal; font-weight: 400; src: url('../assets/fonts/barlow-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow'; font-style: normal; font-weight: 500; src: url('../assets/fonts/barlow-v13-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow'; font-style: normal; font-weight: 600; src: url('../assets/fonts/barlow-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow'; font-style: normal; font-weight: 700; src: url('../assets/fonts/barlow-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-condensed-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; src: url('../assets/fonts/barlow-condensed-v13-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-condensed-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; src: url('../assets/fonts/barlow-condensed-v13-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-condensed-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; src: url('../assets/fonts/barlow-condensed-v13-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-condensed-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; src: url('../assets/fonts/barlow-condensed-v13-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* barlow-condensed-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; src: url('../assets/fonts/barlow-condensed-v13-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* ═══════════════════════════════════════════════════════════════════════ LETLOU ENERGY — GLOBAL DESIGN TOKENS Single source of truth for all colour, type, spacing, and radius values. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── BRAND PRIMARIES ── */ --color-navy: #122C4B; --color-navy-deep: #0a1a2e; --color-navy-darker: #0E2342; /* deepest navy — hover states on dark surfaces */ --color-navy-mid: rgba(18, 44, 75, 0.90); --color-navy-mid-solid: #1a3a5c; /* solid mid-navy — career modal headers */ --color-amber: #F8A61F; --color-amber-hover: #E09310; --color-amber-tint: color-mix(in srgb, var(--color-amber) 12%, transparent); --color-amber-border: rgba(248, 166, 31, 0.35); /* ── SEMANTIC / FUNCTIONAL ── */ --color-error: #C0392B; /* form validation, invalid field borders */ --color-error-dark: #991B1B; /* error message text */ --color-error-bg: #FEF2F2; /* error banner background */ /* Stage badge colours — project lifecycle (used in Components modal stage badges) */ --color-stage-construction: #9a3412; /* orange-rust — construction stage text */ --color-stage-commissioning:#5b21b6; /* deep violet — commissioning stage text */ /* Legal hub tag colours */ --color-tag-statutory: #1a6040; /* dark teal — statutory tag text */ /* ── OPACITY GUIDE (for rgba() usages in component files) ────────────── Where possible, prefer color-mix() over raw rgba() so the value always stays anchored to the token: color-mix(in srgb, var(--color-navy) 8%, transparent) Common patterns in use across the codebase: Navy (#122C4B): 3% 4% 5% 6% 8% 10% 12% 20% 55% Navy-deep (#0a1a2e): 15% 25% 55% 65% 75% 80% 90% 92% Amber (#F8A61F): 3% 4% 6% 8% 9% 10% 12% 15% 16% 18% 20% 30% 35% White: 4% 5% 6% 7% 8% 9% 10% 12% 15% 20% 25% 50% 55% 60% 65% 70% 75% 82% 85% 90% 95% ────────────────────────────────────────────────────────────────────── */ /* ── NEUTRALS ── */ --color-white: #FFFFFF; --color-off-white: #F4F6F9; --color-bg: #FFFFFF; --color-bg-secondary: #F7F6F3; /* ── ACCENT SOLID ALIASES ───────────────────────────────────────────── These alias the most-used stops from the ramps below so components can reference a semantic name rather than a ramp step number. They do NOT introduce new colours — they point at ramp values. */ --color-teal: var(--teal-600); /* var(--color-teal) — career/legal badges, exp dots */ --color-teal-dark: var(--teal-700); /* #0B5A46 — completed stage dots */ --color-purple: var(--purple-600); /* #534AB7 — LTA/corporate badges */ --color-purple-dark: var(--purple-800); /* #3C3489 — contact icon bg */ --color-indigo: var(--indigo-500); /* #5460DE — corporate career track */ --color-indigo-hover: var(--indigo-700); /* #3241C0 — corporate btn hover */ --color-amber-dark: var(--amber-800); /* #633806 — amber text on light bg */ /* ── TEXT ── */ --color-text: #111111; --color-text-mid: #333333; --color-text-muted: #5F5E5A; --color-text-hint: #696862; /* darkened from #888780 — WCAG AA 4.5:1 on all light backgrounds */ --color-text-light: rgba(255, 255, 255, 0.82); --color-text-faint: rgba(255, 255, 255, 0.50); /* raised from 0.45 — WCAG AA 4.5:1 on navy-deep */ /* ── BORDERS ── */ --color-border: rgba(0, 0, 0, 0.12); --color-border-soft: rgba(0, 0, 0, 0.07); --color-border-amber: rgba(248, 166, 31, 0.25); /* ── ACCENT RAMPS ── */ --teal-50: #E1F5EE; --teal-200: #5DCAA5; /* --teal-500 / --teal-700 are referenced throughout LetlouCareer.css (career-role-card borders, badge--vac, site-role-req bullets, etc.) but were never defined here — added to fill that gap rather than leaving those rules resolve to nothing. Interpolated between the existing 200/600/800 steps. */ --teal-500: #1C9A78; --teal-600: var(--color-teal); --teal-700: #0B5A46; --teal-800: #085041; --teal-900: #04342C; --purple-50: #EEEDFE; --purple-200: #AFA9EC; --purple-600: #534AB7; --purple-800: #3C3489; --purple-900: #26215C; --coral-50: #FAECE7; --coral-200: #F0997B; --coral-600: #993C1D; --coral-800: #712B13; --coral-900: #4A1B0C; --amber-50: #FAEEDA; --amber-200: #EF9F27; --amber-600: var(--amber-600); --amber-800: #633806; --amber-900: #412402; /* Slate */ --slate-50: #EBF0F5; --slate-300: #96AEBF; --slate-500: #5C8399; --slate-700: #2E5F7A; --slate-800: #1B4259; /* Stone */ --stone-50: #F5F3EF; --stone-300: #C0BAA8; --stone-500: #958E78; --stone-700: #6B6450; --stone-800: #4D4938; /* Moss */ --moss-50: #EBF2E8; --moss-300: #8FBF6C; --moss-500: #5C9C3A; --moss-700: #3A7322; --moss-800: #254F14; /* Copper */ --copper-50: #FAF0E8; --copper-300: #DFA26E; --copper-500: #C07A3E; --copper-700: #955A20; --copper-800: #6B3D10; /* Charcoal */ --charcoal-50: #EFEDEA; --charcoal-300: #A9A59D; --charcoal-500: #757068; --charcoal-700: #514C45; --charcoal-800: #363128; /* Forest */ --forest-50: #E4F0E8; --forest-300: #6DAB7F; --forest-500: #37854F; --forest-700: #1B6134; --forest-800: #0E4423; /* Indigo */ --indigo-50: #ECEFFE; --indigo-300: #8B95F0; --indigo-500: #5460DE; --indigo-700: #3241C0; --indigo-800: #202E96; /* Sienna */ --sienna-50: #FBF0EA; --sienna-300: #E89F64; --sienna-500: #D0712A; --sienna-700: #A85018; --sienna-800: #7A360C; /* Sage */ --sage-50: #EBF1ED; --sage-300: #8EAC97; --sage-500: #5B8969; --sage-700: #366B4A; --sage-800: #1E4D33; /* Gold */ --gold-50: #FDF6E3; --gold-300: #EFC94C; --gold-500: #D4A017; --gold-700: #A07810; --gold-800: #73550A; /* Rust */ --rust-50: #FBEEE8; --rust-300: #E58A5A; --rust-500: #CC5A20; --rust-700: #A03A0E; --rust-800: #742406; /* Warm Grey */ --warm-grey-50: #F5F2EE; --warm-grey-300: #C4BDB2; --warm-grey-500: #9B9186; --warm-grey-700: #706760; --warm-grey-800: #504840; /* Steel */ --steel-50: #E8EEF4; --steel-300: #6E91AA; --steel-500: #3A6985; --steel-700: #1C4E6A; --steel-800: #0E354F; /* Sand */ --sand-50: #FAF8F2; --sand-300: #D0C8A8; --sand-500: #AFA07C; --sand-700: #8A7D59; --sand-800: #635A3B; /* Role badge colours */ --lta-bg: #EEEDFE; --lta-c: #3C3489; --oe-bg: #E1F5EE; --oe-c: #085041; --ie-bg: #FAECE7; --ie-c: #712B13; --adhoc-bg: #FAEEDA; --adhoc-c: #633806; /* ── NEWS TAG TOKENS ── Applied via data-tag attribute on .news-tag and .news-featured-tag. JS sets only the attribute; all colour lives here in the token layer. To add a new tag: one token pair here + one rule in the selector block below. */ --tag-announcement-bg: color-mix(in srgb, var(--color-amber) 12%, transparent); --tag-announcement-color: var(--amber-600); /* --amber-600 */ --tag-project-bg: color-mix(in srgb, var(--color-teal) 10%, transparent); --tag-project-color: var(--color-teal); /* --teal-600 */ --tag-technology-bg: rgba(83, 74, 183, 0.10); --tag-technology-color: #534AB7; /* --purple-600 */ --tag-partnership-bg: rgba(153, 60, 29, 0.10); --tag-partnership-color: #993C1D; /* --coral-600 */ /* Tech colours */ --solar-bg: rgba(248,166,31,0.12); --solar-c: #7A500A; --wind-bg: rgba(14,110,86,0.10); --wind-c: #0F5C45; --biogas-bg: rgba(83,74,183,0.10); --biogas-c: #3C3489; --hydro-bg: rgba(29,100,170,0.10); --hydro-c: #1A5C99; --multi-bg: rgba(0,0,0,0.06); --multi-c: #444; /* Shadows */ --shadow-sm: 0 1px 6px color-mix(in srgb, var(--color-navy) 6%, transparent); --shadow-md: 0 4px 16px color-mix(in srgb, var(--color-navy) 10%, transparent); --shadow-lg: 0 12px 40px color-mix(in srgb, var(--color-navy) 16%, transparent); /* Transitions — three speeds; use these instead of hardcoded values */ --transition: 0.18s ease; /* default: most interactions */ --transition-fast: 0.12s ease; /* hover colour/opacity flicks */ --transition-normal: 0.22s ease; /* transforms, shadows */ --transition-slow: 0.4s ease; /* reveals, modals */ /* Header height — hardcoded structural value; 76px at ≥1400px (see @media below) */ --header-height: 68px; /* Shorthand aliases — consumed by LetlouServices and LetlouScope instead of the full var(--color-*) form. Defined once here so both files stay in sync. */ --ink: var(--color-text); --muted: var(--color-text-muted); --hint: var(--color-text-hint); --b: var(--color-border); --b-s: var(--color-border-soft); --off: var(--color-off-white); --trans: var(--transition-normal); --rmd: var(--radius-md); --rlg: var(--radius-lg); /* Typography */ --font-sans: 'Roboto', Arial, Helvetica, sans-serif; --font-display: 'Georgia', 'Times New Roman', serif; --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif; /* Shape */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; } /* ═══════════════════════════════════════════════════════════════ LARGE SCREEN — projectors, TVs, wide monitors (≥1400px) Widens containers, nudges up font sizes for viewing distance. ═══════════════════════════════════════════════════════════════ */ @media (min-width: 1400px) { :root { --header-height: 76px; /* matches LetlouHeader.css large-screen tier */ } /* Wider content containers */ .footer-body, .about-inner, .registration-inner { max-width: 1400px; } /* Slightly larger base type */ body { font-size: 1.05rem; } p { font-size: 1.05rem; } /* step up from 0.95rem base */ /* Section header headline now scales via clamp(2rem,4vw,3.75rem) — no hard override needed here. */ .section-header p { font-size: 1.1rem; max-width: 680px; } /* Eyebrow labels */ .section-eyebrow { font-size: 0.85rem; } } /* Ultra-wide / 4K (≥1920px): prevent runaway line lengths */ @media (min-width: 1920px) { .footer-body, .about-inner, .registration-inner { max-width: 1600px; } body { font-size: 1.1rem; } p { font-size: 1.1rem; } /* step up from 1.05rem at 1400px */ /* section-header h2 continues scaling via clamp — no override needed */ } /* ═══════════════════════════════════════════════════════════════ PRINT — suppress chrome, show content cleanly ═══════════════════════════════════════════════════════════════ */ @media print { /* Strip dark backgrounds — saves ink and looks professional */ header, footer, .hero-video-wrap, .phase-rail, .phase-rail-bridge, .independence-band, .cta-section, .about-bottom-cta, .home-news-flash, .hero-stats, .section-header::before, .video-progress-bar { display: none !important; } body { background: #fff; color: #111; font-size: 11pt; line-height: 1.6; } .section-header { background: none !important; color: #111 !important; padding: 1rem 0 0.5rem; border-bottom: 2px solid #F8A61F; } .section-header h2, .section-header p, .section-eyebrow { color: #111 !important; } a { color: #122C4B; text-decoration: underline; } /* Avoid page breaks inside cards */ .about-pillar, .about-mvp-card, .svc-card, .news-card, .founder-card-condensed { break-inside: avoid; page-break-inside: avoid; } } /* Dark mode overrides */ @media (prefers-color-scheme: dark) { :root { --color-bg: #1a1a18; --color-bg-secondary: #222220; --color-text: #F0EFE9; --color-text-mid: #D4D3CC; --color-text-muted: #B4B2A9; --color-text-hint: #828280; /* lightened for dark bg — WCAG AA 4.5:1 on #1a1a18 */ --color-border: rgba(255, 255, 255, 0.12); --color-border-soft: rgba(255, 255, 255, 0.07); --teal-50: #04342C; --teal-500: #4DBE99; --teal-600: #5DCAA5; --teal-700: #7DD6B8; --teal-800: #9FE1CB; --purple-50: #26215C; --purple-600: #AFA9EC; --purple-800: #CECBF6; --coral-50: #4A1B0C; --coral-600: #F0997B; --coral-800: #F5C4B3; --amber-50: #412402; --amber-600: #EF9F27; --amber-800: #FAC775; } } /* ── RESET ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Horizontal overflow is contained at the component level (individual sections use overflow-x:hidden/clip where needed). Never set overflow-x on html or body — it removes the root scroll container and breaks all anchor navigation. */ /* ── INTRINSIC LAYOUT — overflow containment ────────────────────── These rules cascade globally and are the first line of defence against horizontal overflow on mobile. They remove the need for most overflow-specific media queries. RULES: 1. All block-level elements are capped at their container width. This catches any element (section, div, article) that would otherwise grow wider than its parent due to padding or border. 2. Flex children get min-width:0 by default. Without this, flex children refuse to shrink below their intrinsic content size (e.g. a long word, a table, a code block), which is the #1 cause of the "black strip" overflow seen on mobile. Applies only to direct flex children to avoid unintended side-effects on button/icon components that rely on intrinsic sizing. 3. Images, videos, and iframes are always fluid. max-width:100% is already set on img in the reset above, but restated here for video and iframe which were previously unconstrained. WHY NOT overflow-x:hidden on body? Setting overflow-x:hidden on silently promotes to the scroll container (instead of the viewport), which breaks position:sticky on the header and causes LetlouNav.scrollTo() to misread window.scrollY. Individual overflow-x:clip rules on specific sections are safe and preferred when a local clip is genuinely needed. ────────────────────────────────────────────────────────────────── */ /* Rule 1: cap all block elements at container width */ *, *::before, *::after { max-width: 100%; } /* Rule 1 exceptions: elements that legitimately break out of their container by design — position:fixed/absolute elements, SVG internals, pseudo-elements used as decorative overlays, and the html/body shell. */ html, body, header, dialog, .skip-link, .cookie-banner, .cookie-floating-trigger, .legal-hub-btn, .gsearch-overlay, .hero-video-wrap, .hero-video-wrap::after, .hero-section, .section-header::before, svg, svg * { max-width: none; } /* Rule 2: flex children shrink to zero before overflowing */ .navlinks > *, .hero-ctas > *, .hero-stats > *, .footer-body > *, .footer-social > *, .footer-bottom > *, .footer-legal-links > *, .section-header-ctas > *, .cookie-banner__panel-actions > * { min-width: 0; } /* footer and main are direct flex children of body — both need min-width:0 so they can shrink below their content size on narrow viewports. main already gets this via its own rule below; footer gets it here. */ footer { min-width: 0; } /* Rule 3: fluid media */ video, iframe, embed, object { max-width: 100%; height: auto; } html { /* scroll-behavior is intentionally NOT set to smooth here. Chrome aborts smooth scroll animations when IntersectionObserver callbacks fire layout-forcing reads (offsetTop, getBoundingClientRect) mid-animation — which every section lazy-init guard on this site does. Native anchor jumps therefore use instant positioning (reliable, correct). Programmatic smooth scrolling is handled in LetlouNav.scrollTo via window.scrollTo({ behavior: 'smooth' }), which runs outside the IO callback cycle and is unaffected by this constraint. */ scroll-padding-top: var(--header-height, 68px); } /* ── Skip link (accessibility) ────────────────────────────────── Must be the very first child of — before

. Hidden off-screen via transform (not top:-100%, which can bleed into flex/grid layout if the element is a container child). Slides down into view only on :focus so keyboard users can jump straight to main content. Never affects visual layout. ─────────────────────────────────────────────────────────────── */ .skip-link { position: fixed; top: 0; left: 1rem; z-index: 9999; transform: translateY(-100%); background: var(--color-amber, #F8A61F); color: var(--color-navy, #122C4B); font-weight: 700; font-size: 0.9rem; padding: 0.6rem 1.2rem; border-radius: 0 0 8px 8px; text-decoration: none; transition: transform 0.15s ease; } .skip-link:focus { transform: translateY(0); outline: 3px solid var(--color-navy, #122C4B); outline-offset: 2px; } /* ── Body layout — header/main/footer column flex ─────────────── Flex column: header (sticky, natural height), main (flex:1 — fills all remaining space so short pages never show a gap below the footer), footer (natural height, pinned to bottom on short pages). This is a simpler, more predictable alternative to CSS grid for this shell — position:sticky on the header behaves exactly as expected in normal flex flow, with no named-area or item-count pitfalls (extra direct children such as the legal-hub button or skip-link do not disrupt placement). IMPORTANT: do NOT set overflow-y on main — doing so creates a second scroll container that breaks position:sticky on the header and causes content to misalign on secondary pages. ─────────────────────────────────────────────────────────────── */ body { margin: 0; width: 100%; min-height: 100dvh; /* dvh: accounts for mobile browser chrome */ display: flex; flex-direction: column; font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: 1.7; -webkit-font-smoothing: antialiased; } main { flex: 1 0 auto; min-width: 0; /* flex child must be allowed to shrink — prevents body-level overflow */ width: 100%; /* claim full container width without exceeding it */ overflow-x: clip; /* universal fallback — clips any child that escapes its section's own clip, without creating a scroll container that would break position:sticky on section headers */ margin-top: var(--header-height, 68px); /* pushes content below fixed header */ } /* General Styles */ hr { border: none; border-top: 2px solid #ccc; width: 50%; margin: 0 auto; } p { color: inherit; max-width: 100%; line-height: 1.5; /* Stepped breakpoints replace the former clamp(0.95rem, 0.9vw+0.1rem, 1.15rem) which only began scaling above 1511px — effectively static for all visitors. Steps align with the body { font-size } overrides at the same breakpoints. */ font-size: 0.95rem; } /* ═══════════════════════════════════════════════════════════════ STANDARDISED SECTION HEADER Used by: About · Services · Experience · News · Career · Contact ═══════════════════════════════════════════════════════════════ */ .section-header { background-color: var(--color-navy); background-image: linear-gradient( color-mix(in srgb, var(--color-navy) 85%, transparent), color-mix(in srgb, var(--color-navy) 85%, transparent) ), var(--sh-image, none); background-attachment: fixed; background-size: cover; background-position: center; padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.5rem, 6vw, 5rem) clamp(1.75rem, 3.5vw, 2.75rem); position: relative; overflow: hidden; color: var(--color-text-light); } .section-header::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, transparent, transparent 40px, rgba(248, 166, 31, 0.035) 40px, rgba(248, 166, 31, 0.035) 41px); pointer-events: none; } .section-header-inner { position: relative; z-index: 1; max-width: 700px; } .section-eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-amber); margin-bottom: 1rem; } .section-eyebrow::before { content: ""; display: block; width: 28px; height: 2px; background: var(--color-amber); flex-shrink: 0; } .section-header h2 { font-family: var(--font-display); /* Single continuous scale replaces clamp(2rem,4vw,3rem) + hard 3.25rem/3.75rem overrides at 1400px/1920px. 4vw hits 3rem at 1200px, then continues scaling to 3.75rem at 1500px — no abrupt jumps at breakpoints. */ font-size: clamp(2rem, 4vw, 3.75rem); font-weight: 700; color: var(--color-white); margin: 0 0 0.75rem; line-height: 1.2; } .section-header p { color: rgba(255, 255, 255, 0.75); font-size: clamp(0.95rem, 1.1vw, 1.05rem); max-width: 560px; line-height: 1.65; margin: 0; } .section-header-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } /* Fix: background-attachment:fixed is unsupported on iOS Safari for non-body elements — it causes repaint flicker and incorrect heights on real iPhones and iPads. Switch to scroll on all touch-primary devices using the pointer/hover capability query, which correctly targets touch screens regardless of physical screen size. */ @media (hover: none), (pointer: coarse) { .section-header { background-attachment: scroll; } } @media (max-width: 640px) { .section-header-ctas { flex-direction: column; align-items: stretch; gap: 0.75rem; } .section-header-ctas > * { width: 100%; text-align: center; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════ LEGAL DRAWER — classes that replace inline styles in LetlouGlobal.js renderMenu / loadDoc ═══════════════════════════════════════════════════════════════ */ /* Menu item label */ .drawer-menu-label { font-weight: 700; font-size: 0.9rem; color: var(--color-navy); flex: 1; } /* Menu item chevron */ .drawer-menu-chevron { opacity: 0.3; font-size: 0.8rem; transition: opacity var(--transition), transform var(--transition); } .drawer-menu-item:hover .drawer-menu-chevron { opacity: 0.7; transform: translateX(3px); } /* Loading state */ .drawer-loading-icon { font-size: 1.5rem; color: var(--color-amber); } .drawer-loading-text { font-size: 0.82rem; color: var(--color-text-muted); } /* Error state */ .drawer-error { text-align: center; padding: 2rem 1rem; } .drawer-error-icon { color: var(--color-amber); font-size: 2rem; display: block; margin-bottom: 1rem; } .drawer-error-text { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1rem; } .drawer-reload-btn { margin: 1rem auto 0; display: inline-flex; } /* ═══════════════════════════════════════════════════════════════ NEWS TAG ATTRIBUTE SELECTORS Consumed by LetlouNews.css (.news-tag, .news-img-icon etc.) via the scoped --_tag-bg / --_tag-color custom properties. JS renders: Adding a new tag = one token pair in :root above + one rule here. ═══════════════════════════════════════════════════════════════ */ [data-tag] { background: var(--_tag-bg); color: var(--_tag-color); border-color: var(--_tag-color); } [data-tag="announcement"] { --_tag-bg: var(--tag-announcement-bg); --_tag-color: var(--tag-announcement-color); } [data-tag="project"] { --_tag-bg: var(--tag-project-bg); --_tag-color: var(--tag-project-color); } [data-tag="technology"] { --_tag-bg: var(--tag-technology-bg); --_tag-color: var(--tag-technology-color); } [data-tag="partnership"] { --_tag-bg: var(--tag-partnership-bg); --_tag-color: var(--tag-partnership-color); } /* ═══════════════════════════════════════════════════════════════ TURNSTILE WIDTH WRAPPER Constrains the Cloudflare widget to a reasonable width. Applied to .turnstile-wrap (static HTML) and .cf-turnstile-container (dynamically created by Career/Global JS). ═══════════════════════════════════════════════════════════════ */ .turnstile-wrap, .cf-turnstile-container { max-width: 300px; margin: 0.75rem 0; } /* ═══════════════════════════════════════════════════════════════ COOKIE CONSENT BANNER ─────────────────────────────────────────────────────────────── Design: static card, always shown fully expanded — no collapse/expand interaction. Floating card, bottom-right on desktop; bottom sheet on mobile. Never covers the home-page news-flash strip (which sits at the very bottom of the hero, not at the viewport bottom). Three consent categories drawn from Cookie Policy §2: 1. Strictly Necessary — always ON, locked badge, no toggle 2. Analytics & Perf — opt-in (GA4 + Clarity) 3. Functional — opt-in (reserved for future use: language preference, form-progress autosave) Markup (static HTML, see components/cookie-banner.html): Visibility: The banner is shown/hidden via a single class on : .show-cookie-banner #cookieBanner { display: flex; } Set synchronously by an inline head script (before paint) and toggled by LetlouGlobal.js once a consent decision is made. ═══════════════════════════════════════════════════════════════ */ /* ── Outer shell ── Hidden by default; shown only when carries .show-cookie-banner (set by the head script / consent JS). This avoids any flash-of-banner and removes the need for a JS-driven enter/leave animation class. */ .cookie-banner { display: none; position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1090; width: clamp(300px, 92vw, 400px); max-height: calc(100dvh - 3rem); overflow-y: auto; flex-direction: column; background: var(--color-navy-deep); border: 1px solid color-mix(in srgb, var(--color-amber) 22%, transparent); border-radius: var(--radius-lg); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04) inset; animation: cb-enter 0.32s var(--transition-normal) both; } .show-cookie-banner .cookie-banner { display: flex; } @keyframes cb-enter { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Amber accent rule across the top */ .cookie-banner::before { content: ''; display: block; height: 3px; background: linear-gradient( 90deg, var(--color-amber) 0%, color-mix(in srgb, var(--color-amber) 35%, transparent) 100% ); flex-shrink: 0; } /* ── Intro bar ── */ .cookie-banner__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem 0.85rem 1.1rem; } .cookie-banner__bar-icon { color: var(--color-amber); font-size: 1rem; flex-shrink: 0; line-height: 1; } .cookie-banner__bar-text { flex: 1; font-size: 0.78rem; color: rgba(255, 255, 255, 0.72); line-height: 1.45; margin: 0; } .cookie-banner__bar-text strong { color: var(--color-white); font-weight: 700; display: block; font-size: 0.8rem; margin-bottom: 0.15rem; } .cookie-banner__bar-text a { color: var(--color-amber); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--color-amber) 35%, transparent); font-weight: 500; font-size: 0.74rem; transition: border-color var(--transition-fast); white-space: nowrap; } .cookie-banner__bar-text a:hover { border-color: var(--color-amber); } .cookie-policy-link { display: inline; } /* ── Action buttons (reused in .cookie-banner__panel-actions) ── */ .cookie-btn-accept-all { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--color-amber); color: var(--color-navy-deep); font-family: var(--font-body); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.03em; padding: 0.55rem 0.9rem; border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background var(--transition-fast), transform var(--transition-fast); } .cookie-btn-accept-all:hover { background: var(--color-amber-hover); transform: translateY(-1px); } .cookie-btn-accept-all:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } .cookie-btn-accept-all i { font-size: 0.7rem; } .cookie-btn-decline-all { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: rgba(255, 255, 255, 0.5); font-family: var(--font-body); font-weight: 600; font-size: 0.74rem; padding: 0.55rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); } .cookie-btn-decline-all:hover { color: rgba(255, 255, 255, 0.82); border-color: rgba(255, 255, 255, 0.28); } .cookie-btn-decline-all:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; } /* ── Preference panel — always visible ── */ .cookie-banner__panel { border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 0.9rem 1.1rem 0; } .cookie-banner__panel-heading { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.50); /* raised from 0.45 — WCAG AA 4.5:1 on navy-deep */ margin-bottom: 0.65rem; } /* ── Individual category row ── */ .cookie-category { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .cookie-category:last-of-type { border-bottom: none; } .cookie-category__info { flex: 1; min-width: 0; } .cookie-category__name { font-size: 0.8rem; font-weight: 700; color: var(--color-white); display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.2rem; line-height: 1.3; } .cookie-category__name i { color: var(--color-amber); font-size: 0.72rem; flex-shrink: 0; width: 14px; text-align: center; } .cookie-category__desc { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); line-height: 1.5; margin: 0; } /* Required badge — replaces toggle for locked category */ .cookie-required-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-amber); /* raised from 0.70 opacity — WCAG AA 4.5:1 on tinted bg */ background: color-mix(in srgb, var(--color-amber) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-amber) 20%, transparent); border-radius: 99px; padding: 0.22rem 0.55rem; white-space: nowrap; margin-top: 0.15rem; cursor: not-allowed; user-select: none; } .cookie-required-badge i { font-size: 0.58rem; } /* ── Toggle switch ── */ .cookie-toggle { position: relative; flex-shrink: 0; margin-top: 0.15rem; } .cookie-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .cookie-toggle__track { display: block; width: 36px; height: 20px; background: rgba(255, 255, 255, 0.12); border-radius: 99px; border: 1px solid rgba(255, 255, 255, 0.15); cursor: pointer; transition: background var(--transition-normal), border-color var(--transition-normal); position: relative; } .cookie-toggle__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: rgba(255, 255, 255, 0.45); border-radius: 50%; transition: transform var(--transition-normal), background var(--transition-normal); } /* Checked state */ .cookie-toggle input:checked + .cookie-toggle__track { background: var(--color-amber); border-color: var(--color-amber); } .cookie-toggle input:checked + .cookie-toggle__track::after { transform: translateX(16px); background: var(--color-navy-deep); } /* Focus ring on the label (accessible keyboard target) */ .cookie-toggle input:focus-visible + .cookie-toggle__track { outline: 2px solid var(--color-amber); outline-offset: 2px; } /* Hover */ .cookie-toggle__track:hover { border-color: rgba(255, 255, 255, 0.3); } .cookie-toggle input:checked + .cookie-toggle__track:hover { background: var(--color-amber-hover); border-color: var(--color-amber-hover); } /* ── Panel footer actions — Decline / Save / Accept ── */ .cookie-banner__panel-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0.85rem 1.1rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 0.1rem; } .cookie-btn-save { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--color-amber); color: var(--color-navy-deep); font-family: var(--font-body); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.03em; padding: 0.6rem 1rem; border: none; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background var(--transition-fast), transform var(--transition-fast); } .cookie-btn-save:hover { background: var(--color-amber-hover); transform: translateY(-1px); } .cookie-btn-save:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; } .cookie-btn-save i { font-size: 0.7rem; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .cookie-banner { animation: none; } } /* ── Floating "Cookie Settings" trigger ── Shown after a consent decision has been recorded, so users can reopen the banner at any time. Hidden via the `hidden` attribute until LetlouGlobal.js reveals it. */ /* Cookie floating trigger — retired on all screen sizes in favour of the Cookie Settings item in the Legal nav dropdown. The trigger element remains in the DOM so LetlouGlobal.js cookie logic still works (the nav Cookie Settings button calls trigger.click()). Hidden via CSS only — do not remove the HTML element. */ .cookie-floating-trigger { display: none !important; } .cookie-floating-trigger:hover { background: var(--color-navy); border-color: var(--color-amber); transform: translateY(-2px); } .cookie-floating-trigger:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; } .cookie-floating-trigger i { font-size: 0.85rem; } @media (max-width: 640px) { .cookie-floating-trigger { /* .legal-hub-btn becomes a 48px circle pinned to bottom:20px; right:20px on screens ≤640px (see LetlouLegal.css). Stack the cookie trigger directly above it with a clear gap so the two floating controls never overlap. */ bottom: calc(20px + 48px + 12px); /* legal btn bottom + height + gap */ right: 1rem; padding: 0.55rem 0.9rem; font-size: 0.72rem; } /* Match .legal-hub-btn i's mobile size (1rem) so the two stacked floating icons read at the same scale. */ .cookie-floating-trigger i { font-size: 1rem; } .cookie-floating-trigger__label { display: none; } } /* ── Mobile: full-width bottom sheet ── */ @media (max-width: 480px) { .cookie-banner { bottom: 0; right: 0; left: 0; width: 100%; max-height: 80dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-left: none; border-right: none; border-bottom: none; /* Ensure it sits above any fixed bottom UI */ padding-bottom: env(safe-area-inset-bottom, 0px); } .cookie-banner__bar { padding: 0.9rem 1rem 0.75rem; } .cookie-banner__panel-actions { padding: 0.85rem 1rem 1rem; } }