/* ============================================================= BOARD OF DIRECTORS — page-specific styles Structurally matches the Environmental inside pages. Dark theme by default; Energy Saver Mode switches it to light. ============================================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Page-scoped theme tokens (dark = default) */ --bod-bg: #0a1628; --bod-bg-deep: #061525; --bod-card-bg: rgba(255,255,255,0.04); --bod-card-bd: rgba(255,255,255,0.10); --bod-photo-bg: linear-gradient(160deg, #0e2238 0%, #0a1a2c 100%); --bod-text: rgba(255,255,255,0.85); --bod-text-strong: #ffffff; --bod-name: #0a9bd6; --bod-label: #ffffff; --bod-meta-head: #ffffff; --bod-meta-body: rgba(255,255,255,0.72); --bod-rule: rgba(255,255,255,0.14); --bod-line: #0069aa; --bod-note: rgba(255,255,255,0.55); } /* Light theme — rides on Energy Saver Mode (header toggles `is-saver`). The pre-paint script sets it on ; the shared header sets it on ; an inline mirror keeps them in sync, so `.is-saver` covers both. */ .is-saver { --bod-bg: #f4f6f9; --bod-bg-deep: #ffffff; --bod-card-bg: #ffffff; --bod-card-bd: rgba(10,30,60,0.10); --bod-photo-bg: linear-gradient(160deg, #e7edf4 0%, #dbe4ee 100%); --bod-text: #2a3340; --bod-text-strong: #0d1b2e; --bod-name: #0069aa; --bod-label: #0d1b2e; --bod-meta-head: #0d1b2e; --bod-meta-body: #495464; --bod-rule: rgba(10,30,60,0.12); --bod-line: #0069aa; --bod-note: #5a6573; } body { background: var(--bod-bg); color: var(--bod-text-strong); font-family: "proxima-nova", "Proxima Nova", Arial, sans-serif; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; } /* ══════════════════════════════════════ HEADER — keep fixed + solid (matches env pages) ══════════════════════════════════════ */ .site-header { position: fixed !important; top: 0 !important; transform: translateY(0) !important; } .site-header .nav-bar { background: var(--navy-glass, rgba(4, 14, 32, 0.96)) !important; -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); box-shadow: 0 4px 24px -8px rgba(0,0,0,0.55); } .site-header .utility-bar { background: rgba(4, 14, 26, 0.92) !important; } /* In light mode (Energy Saver on), lighten the fixed header so it reads on a light page */ .is-saver .site-header .nav-bar { background: rgba(255,255,255,0.96) !important; box-shadow: 0 4px 24px -10px rgba(10,30,60,0.25); } .is-saver .site-header .utility-bar { background: #eef2f7 !important; } .is-saver .nav-link, .is-saver .utility-links a, .is-saver .tts-toggle span, .is-saver .saver-toggle__label { color: #1c2530 !important; } .is-saver .nav-link__caret { border-top-color: #1c2530 !important; } /* ══════════════════════════════════════ PAGE WRAPPER + BREADCRUMB ══════════════════════════════════════ */ .bod-page { padding-top: 62px; position: relative; background: var(--bod-bg); transition: background 0.4s ease; } .bod-breadcrumb { position: absolute; top: calc(38px + 76px + 8px); left: 0; width: 100%; z-index: 89; pointer-events: none; } .bod-breadcrumb__inner { max-width: 1440px; margin: 0 auto; padding: 0 48px; display: flex; align-items: center; pointer-events: auto; } .bod-breadcrumb__item { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.2s ease; white-space: nowrap; } .bod-breadcrumb__item:hover { color: #7fb942; } .bod-breadcrumb__sep { font-size: 11px; color: rgba(255,255,255,0.25); padding: 0 12px; user-select: none; } .bod-breadcrumb__item--active { color: rgba(255,255,255,0.75); pointer-events: none; } .is-saver .bod-breadcrumb__item { color: #6b7585; } .is-saver .bod-breadcrumb__sep { color: #aab2bd; } .is-saver .bod-breadcrumb__item--active { color: #1c2530; } .is-saver .bod-breadcrumb__item:hover { color: #0069aa; } /* ══════════════════════════════════════ HERO BANNER (replicates environmental .env-hero__inner) Text + Key Takeaway on the left, image on the right. ══════════════════════════════════════ */ .bod-hero { position: relative; height: auto; overflow: hidden; background: var(--bod-bg-deep); padding-bottom: 0px !important; } .bod-hero__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,21,37,0.90) 0%, rgba(6,21,37,0.60) 50%, rgba(6,21,37,0.75) 100%), linear-gradient(to bottom, rgba(6,21,37,0.2) 0%, rgba(6,21,37,0.85) 100%); pointer-events: none; } .is-saver .bod-hero__overlay { background: none; } /* Banner animations */ @keyframes bodSlideLeft { 0% { opacity: 0; transform: translateX(-80px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes bodSlideRight { 0% { opacity: 0; transform: translateX(80px); } 100% { opacity: 1; transform: translateX(0); } } /* Inner grid — text left, image right */ .bod-hero__inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 58% 1fr; grid-template-rows: auto auto; grid-template-areas: "headline image" "takeaway image"; padding: 142px clamp(2rem, 8vw, 7rem) 20px; gap: 28px 48px; } /* Left top: heading text */ .bod-banner-text { grid-area: headline; display: flex; flex-direction: column; gap: 20px; animation: bodSlideLeft 0.9s cubic-bezier(0.22,1,0.36,1) 0.2s both; } /* Icon + page name on one row */ .bod-banner-text__row { display: flex; align-items: center; gap: 14px; } .bod-banner-icon { width: 56px; height: 56px; display: block; flex: none; } .bod-banner-text__top { display: block; font-family: 'League Gothic', sans-serif; font-size: 28px; font-weight: 400; line-height: 0.95; letter-spacing: 0; text-transform: uppercase; color: var(--bod-text-strong); } /* Eyebrow above the main title — "Charting the course for" */ .bod-banner-text__eyebrow { display: block; font-family: 'League Gothic', sans-serif; font-size: 24px; font-weight: 400; line-height: 0.95; letter-spacing: 0; text-transform: uppercase; color: var(--bod-name); margin-bottom: 4px; } .bod-banner-text__main { font-family: 'League Gothic', sans-serif; font-size: clamp(28px, 3.6vw, 48px); text-transform: uppercase; font-weight: 400; line-height: 0.95; letter-spacing: -0.01em; color: #ffffff; background: none; -webkit-text-fill-color: #ffffff; margin-bottom: 8px; -webkit-text-fill-color: transparent; color: rgb(0, 105, 170); margin-bottom: 19px; background: linear-gradient(90deg, rgb(0, 105, 170) 0%, rgb(114, 191, 68) 100%) text; } /* ── Title block with a green→blue gradient patch behind it ── */ .bod-titleblock { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; padding: 14px 28px 14px 20px; isolation: isolate; } /* the gradient patch — a narrow slice behind only the left edge of the text */ .bod-titleblock__bg { position: absolute; top: 0; left: 0; width: 25px; height: 100%; background: linear-gradient(180deg, #4D6DB3 0%, #70AAA5 55%, #5DB787 100%); z-index: -1; } .bod-titleblock__title { display: block; font-family: 'League Gothic', sans-serif; font-size: 28px; font-weight: 400; line-height: 0.95; letter-spacing: 0; text-transform: uppercase; color: #ffffff; margin-left: -10px; } .bod-titleblock__sub { display: block; font-family: 'League Gothic', sans-serif; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #ffffff; margin-top: 4px; margin-left: -10px; } /* Right: image */ .bod-hero__img-wrap { grid-column: 2; grid-row: 2; align-self: stretch; width: 100%; min-height: 320px; position: relative; animation: bodSlideRight 1s cubic-bezier(0.22,1,0.36,1) 0.15s both; } .bod-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 0; } /* Empty-state placeholder (until a real image is dropped in) */ .bod-hero__img-wrap:not(:has(img)) { background: var(--bod-photo-bg); border: 1px dashed var(--bod-rule); } .bod-hero__img-wrap:not(:has(img))::after { content: 'IMAGE'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; letter-spacing: 0.2em; color: var(--bod-note); } /* ── Left bottom: Key Takeaway card (replicates .env-takeaway) ── */ .bod-takeaway-outer { grid-area: takeaway; position: relative; display: block; } .bod-takeaway-shadow { position: absolute; inset: 0; transform: translate(7px, 7px); background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%); opacity: 0.30; z-index: 0; } .bod-takeaway { padding: 36px 40px; background: #081C33; /* solid (matches env .env-takeaway) so the gradient shadow stays an edge accent */ width: 100%; position: relative; z-index: 1; border: none; transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s cubic-bezier(0.22,1,0.36,1); } .is-saver .bod-takeaway { background: #ffffff; } .bod-takeaway__list li { color: rgba(232, 237, 242, 0.90); } .is-saver .bod-takeaway__list li { color: #495464; } .bod-takeaway:hover { transform: translateY(-10px) scale(1.015); box-shadow: 0 24px 60px rgba(0,105,170,0.25), 0 8px 24px rgba(0,0,0,0.4); } .bod-takeaway::before { content: ''; position: absolute; inset: 0; padding: 1.5px; background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .bod-takeaway__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 18px; position: relative; } .bod-takeaway__header::after { content: ''; position: absolute; bottom: 0; left: -40px; right: -40px; height: 1.5px; background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%); } .bod-takeaway__heading { font-family: 'League Gothic', sans-serif; font-size: clamp(19px, 1.55vw, 28px); font-weight: 400; letter-spacing: 0; text-transform: uppercase; background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .bod-takeaway__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .bod-takeaway__list li { font-size: 14px; font-weight: 400; line-height: 1.7; letter-spacing: 0; } /* ══════════════════════════════════════ COMMITTEE DETAILS LEGEND ══════════════════════════════════════ */ .bod-legend-wrap { max-width: 1440px; margin: 0 auto; padding: 10px clamp(2rem, 8vw, 7rem) 70px; } .bod-legend__title { font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: #0069aa; padding-top: 22px; margin-bottom: 22px; border-top: 1px solid var(--bod-rule); } .bod-legend { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(40px, 6vw, 96px); row-gap: 16px; } .bod-legend__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--bod-meta-body); } .bod-legend__txt { line-height: 1.4; } .bod-legend__icon { flex: none; width: 34px; height: 24px; object-fit: contain; display: block; } /* ══════════════════════════════════════ DIRECTOR GRID (3 columns) ══════════════════════════════════════ */ .bod-grid-wrap { max-width: 1440px; margin: 0 auto; padding: 40px clamp(2rem, 8vw, 7rem) 80px; } .bod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } /* ── Director card (styled per PAGE-STYLE-HANDOVER — env-secnav card look) ── */ .bod-card { position: relative; display: flex; flex-direction: column; background: var(--bod-card-bg); border: 1px solid var(--bod-card-bd); border-radius: 12px; padding: 22px 22px 26px; transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s cubic-bezier(0.22,1,0.36,1), background 0.3s; } .bod-card:hover { transform: translateY(-6px); /* lift shadow + soft blue/green background glow */ box-shadow: 0 20px 48px rgba(0,0,0,0.30), 0 0 40px rgba(0,105,170,0.30), 0 0 70px rgba(114,191,68,0.18); } .is-saver .bod-card:hover { box-shadow: 0 20px 48px rgba(10,30,60,0.14), 0 0 36px rgba(0,105,170,0.18), 0 0 64px rgba(114,191,68,0.12); } /* Full gradient border that draws around the whole card on hover. The masked gradient sits on the border ring; a clip-path inset wipes it in from the bottom edge up to the top. */ .bod-card::after { content: ''; position: absolute; inset: 0; border-radius: 12px; padding: 1.5px; /* = border thickness */ background: linear-gradient(135deg, #0069aa 0%, #72bf44 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; clip-path: inset(100% 0 0 0); /* hidden: clipped from the top */ transition: clip-path 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.25s ease; } .bod-card:hover::after { opacity: 1; clip-path: inset(0 0 0 0); /* reveal bottom → top */ } /* Name + DIN + designation */ .bod-card__name { font-size: 16px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--bod-name); line-height: 1.25; margin-top: 16px; } .bod-card__din { display: block; font-size: 14px; font-weight: 700; color: var(--bod-meta-head); margin-top: 6px; } .bod-card__role { display: block; font-size: 14px; font-weight: 700; color: var(--bod-meta-head); margin-top: 2px; line-height: 1.3; } /* Media row: photo + role badges beside it */ .bod-card__media { display: flex; align-items: flex-start; gap: 12px; } /* Role badges column */ .bod-badges { display: flex; flex-direction: column; gap: 6px; flex: none; } .bod-badge { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; border-radius: 5px; letter-spacing: 0; } .bod-badge--green { background: #7fb942; color: #0d1b2e; } .bod-badge--plain { background: transparent; color: var(--bod-meta-head); border: 1px solid var(--bod-rule); } .is-saver .bod-badge--plain { background: #f0f3f7; border-color: rgba(10,30,60,0.12); } /* Director photo — identical framed size for every card, with a soft blue gradient patch behind the portrait (matches the report's headshot style). */ .bod-card__photo { flex: 1; overflow: hidden; line-height: 0; /* border: 1px solid var(--bod-card-bd); */ border-radius: 8px; background: radial-gradient(120% 120% at 0% 100%, rgb(63, 127, 174) 0%, rgb(143, 195, 223) 40%, rgba(207, 232, 245, 0.5) 70%, transparent 100%), white;} .is-saver .bod-card__photo { background: radial-gradient(120% 100% at 78% 12%, #eaf4fb 0%, #c4ddee 28%, #9cc3df 60%, #6fa3c8 100%); } .bod-card__photo img { width: 100%; height: 300px; /* identical box for every photo */ object-fit: cover; /* fill the box → every figure at the same scale */ object-position: top center; /* anchor the head; only lower body is trimmed */ display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); } /* Smooth zoom on hover */ .bod-card:hover .bod-card__photo img { transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { .bod-card__photo img { transition: none; } .bod-card:hover .bod-card__photo img { transform: none; } } /* ── Scroll reveal: fade-in-up, one by one ── */ .bod-card[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); transition-delay: var(--reveal-delay, 0s); } .bod-card[data-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* Respect reduced-motion / Energy Saver — show immediately, no transform */ @media (prefers-reduced-motion: reduce) { .bod-card[data-reveal] { opacity: 1; transform: none; transition: none; } } body.is-saver .bod-card[data-reveal] { transition-duration: 0.01ms; } /* Meta blocks (Directorship / Qualification) */ .bod-meta { margin-top: 4px; } .bod-meta + .bod-meta { margin-top: 16px; } .bod-meta__label { font-size: 14px; font-weight: 800; color: var(--bod-meta-head); margin-bottom: 4px; } .bod-meta__text { font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--bod-meta-body); } .bod-card__note { margin-top: 16px; font-size: 11.5px; font-style: italic; line-height: 1.5; color: var(--bod-note); } /* ══════════════════════════════════════ BOARD DIVERSITY ══════════════════════════════════════ */ .bod-div { position: relative; overflow: hidden; background: linear-gradient(135deg, #3046a6 0%, #1f93b4 55%, #6cc24a 100%); /* fallback */ } /* Layer 0 — EPUB gradient swirl, covers the whole section */ .bod-div__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .bod-div__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Layer 1 — scoop waves (assets/scoop-waves.svg), above the gradient, anchored at the bottom */ .bod-div__waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; z-index: 1; opacity: 0.3; pointer-events: none; display: block; } .bod-div__inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 64px clamp(2rem, 8vw, 7rem) 96px; } .bod-div__title { font-size: 18px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: #ffffff; margin-bottom: 20px; } /* Board-table illustration (from the EPUB) */ .bod-div__art { display: block; width: 100%; max-width: 300px; height: auto; margin-bottom: 44px; } /* ── Average-tenure feature: bar-chart / arrow art with overlaid stat ── */ .bod-feature { position: relative; /* overflow: hidden; */ /* border-radius: 10px; */ width: 100%; max-width: 480px; margin-left: auto; aspect-ratio: 5 / 4; /* keeps the reference card proportions */ } /* Art fills the whole card, anchored bottom-right */ .bod-feature__art { position: absolute; inset: 0; width: 100%; height: 100%; /* object-fit: cover; */ object-position: right bottom; pointer-events: auto; /* allow the image to respond to its own hover */ z-index: 0; top: 85px; } /* Text overlaid top-left, drives nothing — art is full-bleed */ .bod-feature__text { position: absolute; top: 0; left: 0; z-index: 1; padding: clamp(20px, 5vw, 40px) clamp(1.5rem, 6vw, 44px); color: #ffffff; } .bod-feature__num { display: block; font-family: 'League Gothic', sans-serif; font-size: clamp(48px, 8vw, 84px); line-height: 1; letter-spacing: 0.5px; } .bod-feature__num .bod-stat__feature-num { font: inherit; } .bod-feature__label { display: block; margin-top: 14px; font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; line-height: 1.25; } /* The 4 stat panels in a 2 × 2 grid */ .bod-div__rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px clamp(32px, 5vw, 72px); align-items: stretch; padding-top: 50px; /* panels in the same row match height */ } /* Average-tenure feature card spans both columns, below the 2×2 grid */ .bod-div__rows .bod-feature { grid-column: 1 / -1; justify-self: start; } /* ── A stat panel (Age / Board Composition / Tenure / Gender) ── */ .bod-stat { position: relative; display: flex; flex-direction: column; height: 100%; /* fill the equal-height grid cell */ } /* heading: main logo (top-left) + title — OUTSIDE the bordered body. Its thick underline sits flush with the top of the body border. */ .bod-stat__head-row { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; height: 48px; /* fixed = icon height, so heads with/without an icon match */ box-sizing: content-box; padding-bottom: 14px; margin-bottom: 0; /* underline touches the body border top */ } .bod-stat__head-row::after { /* thick underline under the heading */ content: ''; position: absolute; left: 0; bottom: -2px; width: 150px; height: 5px; background: #ffffff; } .bod-stat__icon { width: 54px; height: 48px; flex: none; display: inline-flex; align-items: center; justify-content: center; } .bod-stat__icon img { width: 100%; height: 100%; object-fit: contain; } .bod-stat__icon--sm { width: 50px; height: 50px; } .bod-stat__head { font-size: 18px; font-weight: 700; color: #ffffff; } /* Bordered body — wraps only the stats. Top border touches the head underline. */ .bod-stat__body { position: relative; flex: 1; /* stretch to equalise panel heights in a row */ padding: 40px 44px 56px; /* extra bottom room for the downward tail */ } /* White border: top + right + bottom, with a 45° tail pointing DOWN at bottom-left. */ .bod-stat__border { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .bod-stat__border path { fill: none; stroke: rgba(255,255,255,0.85); stroke-width: 1.5; vector-effect: non-scaling-stroke; /* round joins/caps close any hairline gap at the sharp, heavily-stretched corners */ stroke-linejoin: round; stroke-linecap: round; } /* Stats in a tidy 2-column grid inside each panel */ .bod-stat__items { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px clamp(24px, 3vw, 48px); align-items: start; } .bod-stat__item { display: flex; flex-direction: column; } .bod-stat__item--row { flex-direction: row; /* align-items: center; */ /* icon centered against the number + label stack */ justify-content: flex-start; gap: 17px; } /* number stacked above its label */ .bod-stat__txt { display: flex; flex-direction: column; justify-content: center; } .bod-stat__num { font-family: 'League Gothic', sans-serif; font-size: clamp(36px, 3vw, 48px); font-weight: 400; line-height: 0.9; color: #ffffff; letter-spacing: 0; } .bod-stat__label { font-size: 14px; font-weight: 700; line-height: 1.35; color: #ffffff; margin-top: 8px; } .bod-stat__item--row .bod-stat__label { margin-top: 4px; } /* ══════════════════════════════════════ BOARD DIVERSITY — scroll reveal animations ══════════════════════════════════════ */ /* Base: fade-in-up. JS adds .is-revealed and a staggered --reveal-delay. */ [data-div-reveal] { opacity: 0; transform: translateY(42px); transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } [data-div-reveal].is-revealed { opacity: 1; transform: translateY(0); } /* The title gets a left-to-right slide for a bit of variety */ .bod-div__title[data-div-reveal] { transform: translateX(-32px); } .bod-div__title[data-div-reveal].is-revealed { transform: translateX(0); } /* Reveal the panel's white border by FADING the whole SVG in (never the dash) — the complete border is always rendered, so it can never be cropped/cut. It just fades up with a gentle scale-from-center for a smooth settle. */ .bod-stat[data-div-reveal] .bod-stat__border { opacity: 0; transform: scale(0.985); transform-origin: center; transition: opacity 0.9s ease 0.25s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s; } .bod-stat[data-div-reveal].is-revealed .bod-stat__border { opacity: 1; transform: scale(1); } /* The path stays a complete, solid stroke at all times — no dash math. */ .bod-stat__border path { stroke-dasharray: none; stroke-dashoffset: 0; } /* Icons + numbers pop in slightly after their panel */ .bod-stat[data-div-reveal] .bod-stat__icon, .bod-stat[data-div-reveal] .bod-stat__icon--sm { opacity: 0; transform: scale(0.6); } .bod-stat[data-div-reveal].is-revealed .bod-stat__icon, .bod-stat[data-div-reveal].is-revealed .bod-stat__icon--sm { opacity: 1; transform: scale(1); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1); transition-delay: calc(var(--reveal-delay, 0s) + 0.35s); } /* Feature card: the bar-chart art lifts in from the bottom */ .bod-feature[data-div-reveal] .bod-feature__art { opacity: 0; transform: translateY(28px) scale(1.02); } .bod-feature[data-div-reveal].is-revealed .bod-feature__art { opacity: 1; transform: translateY(0) scale(1); transition: opacity 0.9s ease 0.2s, transform 1s cubic-bezier(0.22,1,0.36,1) 0.2s; } /* ══════════════════════════════════════ BOARD DIVERSITY — hover interactions (only apply once revealed, so they never fight the entrance animation) ══════════════════════════════════════ */ /* Whole panel: gentle lift + brighter border on hover. The lift transition lives on :hover (and a matching one on the revealed state for the return) so it never shortens the longer entrance animation. */ .bod-stat[data-div-reveal].is-revealed:hover { transform: translateY(-6px); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .bod-stat.is-revealed .bod-stat__border path { transition: stroke 0.4s ease, stroke-width 0.4s ease; } .bod-stat.is-revealed:hover .bod-stat__border path { stroke: #ffffff; stroke-width: 2; } /* Head underline grows a touch on hover */ .bod-stat.is-revealed .bod-stat__head-row::after { transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease; } .bod-stat.is-revealed:hover .bod-stat__head-row::after { width: 180px; } /* Icons spring on hover (override the reveal rule's transition + delay so it feels instant — selector specificity matches the reveal rule). */ .bod-stat[data-div-reveal].is-revealed:hover .bod-stat__icon, .bod-stat[data-div-reveal].is-revealed:hover .bod-stat__icon--sm { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: 0s; } .bod-stat[data-div-reveal].is-revealed:hover .bod-stat__icon { transform: scale(1.12) rotate(-3deg); } .bod-stat[data-div-reveal].is-revealed:hover .bod-stat__icon--sm { transform: scale(1.15); } /* Numbers lift slightly + glow on hover */ .bod-stat.is-revealed .bod-stat__num { transition: transform 0.35s ease, text-shadow 0.35s ease; } .bod-stat.is-revealed:hover .bod-stat__num { transform: translateY(-3px); text-shadow: 0 6px 18px rgba(255, 255, 255, 0.28); } /* Feature card: no whole-card hover — effects live on the text + image. Image breathes up when its own art is hovered. */ .bod-feature[data-div-reveal].is-revealed .bod-feature__art { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .bod-feature[data-div-reveal].is-revealed .bod-feature__art:hover { transform: scale(1.06); transition-delay: 0s; } /* "4.33" number lifts + glows when the text is hovered */ .bod-feature.is-revealed .bod-feature__num { display: block; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.35s ease; } .bod-feature.is-revealed .bod-feature__text:hover .bod-feature__num { transform: translateY(-3px); text-shadow: 0 8px 22px rgba(255, 255, 255, 0.3); } /* label nudges in slightly when the text is hovered */ .bod-feature.is-revealed .bod-feature__label { display: block; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .bod-feature.is-revealed .bod-feature__text:hover .bod-feature__label { transform: translateX(4px); } /* Respect reduced-motion / Energy Saver — show immediately, no transform */ @media (prefers-reduced-motion: reduce) { [data-div-reveal], .bod-stat[data-div-reveal] .bod-stat__border, .bod-stat[data-div-reveal] .bod-stat__icon, .bod-stat[data-div-reveal] .bod-stat__icon--sm, .bod-feature[data-div-reveal] .bod-feature__art { opacity: 1; transform: none; transition: none; } /* no hover motion under reduced-motion */ .bod-stat.is-revealed:hover, .bod-stat.is-revealed:hover .bod-stat__icon, .bod-stat.is-revealed:hover .bod-stat__icon--sm, .bod-stat.is-revealed:hover .bod-stat__num, .bod-feature.is-revealed:hover, .bod-feature.is-revealed:hover .bod-feature__art { transform: none; } } body.is-saver [data-div-reveal] { transition-duration: 0.01ms; } /* ══════════════════════════════════════ SECTION NAV CARDS ══════════════════════════════════════ */ .bod-secnav { max-width: 1440px; margin: 0 auto 60px; padding: 0 clamp(2rem, 8vw, 7rem); } .bod-secnav__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .bod-secnav__card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 24px; background: var(--bod-card-bg); border: 1px solid var(--bod-card-bd); border-radius: 10px; text-decoration: none; cursor: pointer; transition: background 0.25s, border-color 0.25s, transform 0.25s; } .bod-secnav__card:hover { border-color: rgba(114,191,68,0.5); transform: translateY(-3px); } .bod-secnav__card--active { border-color: #72bf44; background: rgba(114,191,68,0.08); } .bod-secnav__label { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--bod-text-strong); line-height: 1.3; } .bod-secnav__arrow { flex-shrink: 0; color: #72bf44; font-size: 18px; line-height: 1; } /* ══════════════════════════════════════ SENIOR MANAGEMENT TEAM ══════════════════════════════════════ */ /* Simple hero variant (no image/takeaway) */ .bod-hero__inner--simple { display: block; padding: 130px clamp(2rem, 8vw, 7rem) 40px; } .bod-hero__inner--simple .bod-banner-text { max-width: 760px; } .smt-wrap { max-width: 1440px; margin: 0 auto; padding: 54px clamp(2rem, 8vw, 7rem) 80px; } .smt-hint { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--bod-note); margin-bottom: 24px; } /* ── Card grid ── */ .smt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } /* ── A team card (button) ── */ .smt-card { appearance: none; -webkit-appearance: none; text-align: left; cursor: pointer; font: inherit; display: flex; flex-direction: column; background: var(--bod-card-bg); border: 1px solid var(--bod-card-bd); border-radius: 14px; padding: 18px 18px 22px; position: relative; overflow: hidden; transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), box-shadow 0.45s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, background 0.3s; } /* Gradient border ring — fades in on hover */ .smt-card::after { content: ''; position: absolute; inset: 0; border-radius: 14px; padding: 1.5px; background: linear-gradient(135deg, #0069aa 0%, #72bf44 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .smt-card:hover, .smt-card:focus-visible { transform: translateY(-8px); border-color: transparent; box-shadow: 0 22px 50px rgba(0,0,0,0.32), 0 0 40px rgba(0,105,170,0.28), 0 0 64px rgba(114,191,68,0.14); outline: none; } .smt-card:hover::after, .smt-card:focus-visible::after { opacity: 1; } .is-saver .smt-card:hover, .is-saver .smt-card:focus-visible { box-shadow: 0 22px 50px rgba(10,30,60,0.14), 0 0 32px rgba(0,105,170,0.12); } /* Card photo */ .smt-card__photo { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; margin-bottom: 16px; background: radial-gradient( 120% 120% at 0% 100%, rgb(63, 127, 174) 0%, rgb(143, 195, 223) 40%, rgba(207, 232, 245, 0.5) 70%, transparent 100% ), white; } .is-saver .smt-card__photo { background: radial-gradient(120% 100% at 78% 12%, #eaf4fb 0%, #c4ddee 28%, #9cc3df 60%, #6fa3c8 100%); } .smt-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); } .smt-card:hover .smt-card__photo img, .smt-card:focus-visible .smt-card__photo img { transform: scale(1.05); } /* Initials placeholder for unmapped photos */ .smt-card--noimg .smt-card__photo, .smt-modal__photo--noimg { display: flex; align-items: center; justify-content: center; } .smt-initials { font-family: 'League Gothic', sans-serif; font-size: clamp(40px, 5vw, 64px); color: rgba(255,255,255,0.92); letter-spacing: 0.02em; } .smt-card__name { font-size: 16px; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bod-name); line-height: 1.25; } .smt-card__role { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--bod-meta-body); margin-top: 6px; flex: 1; } .smt-card__cue { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #72bf44; margin-top: 14px; opacity: 0.8; transition: gap 0.25s ease, opacity 0.25s ease; } .smt-card:hover .smt-card__cue, .smt-card:focus-visible .smt-card__cue { gap: 10px; opacity: 1; } /* Keep "View profile" a clear, solid green in both dark and light (Energy Saver) modes — at 0.8 opacity the green washes out on the white light-mode background. */ .is-saver .smt-card__cue, body.is-saver .smt-card__cue, html.is-saver .smt-card__cue { color: #72bf44; opacity: 1; } /* Scroll reveal */ .smt-card[data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); transition-delay: var(--reveal-delay, 0s); } .smt-card[data-reveal].is-revealed { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .smt-card[data-reveal] { opacity: 1; transform: none; transition: none; } .smt-card__photo img { transition: none; } } /* ── Detail modal (photo left · bio right) ── */ .smt-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .smt-modal.is-open { visibility: visible; opacity: 1; transition: opacity 0.3s ease; } .smt-modal__scrim { position: absolute; inset: 0; background: rgba(3, 10, 22, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .smt-modal__card { position: relative; z-index: 1; display: grid; grid-template-columns: 300px 1fr; gap: 0; width: min(860px, 100%); max-height: 88vh; overflow: hidden; border-radius: 16px; /* gradient border frame: inner navy fill + blue→green ring */ border: 1.5px solid transparent; background: linear-gradient(var(--bod-bg), var(--bod-bg)) padding-box, linear-gradient(135deg, #0069aa 0%, #72bf44 100%) border-box; box-shadow: 0 40px 90px rgba(0,0,0,0.5); transform: translateY(24px) scale(0.97); opacity: 0; transition: transform 0.45s cubic-bezier(0.22,1,0.36,1), opacity 0.45s ease; } .smt-modal.is-open .smt-modal__card { transform: translateY(0) scale(1); opacity: 1; } .is-saver .smt-modal__card { box-shadow: 0 40px 90px rgba(10,30,60,0.25); } /* Light (Energy Saver) mode: light modal card with dark text. Set explicitly so the popup flips theme even if the page-token variables don't reach the modal. */ .is-saver .smt-modal__card, body.is-saver .smt-modal__card, html.is-saver .smt-modal__card { background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, #0069aa 0%, #72bf44 100%) border-box; } .is-saver .smt-modal__name { color: #0069aa; } .is-saver .smt-modal__role { color: #0d1b2e; } .is-saver .smt-modal__bio { color: #495464; } .smt-modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.35); color: #fff; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .smt-modal__close svg { width: 18px; height: 18px; } .smt-modal__close:hover { background: rgba(0,105,170,0.5); border-color: #72bf44; transform: rotate(90deg); } .is-saver .smt-modal__close { background: rgba(255,255,255,0.7); border-color: rgba(10,30,60,0.2); color: #0d1b2e; } /* modal photo (left) */ .smt-modal__media { min-height: 100%; } .smt-modal__photo { width: 100%; height: 100%; min-height: 320px; overflow: hidden; background: radial-gradient(120% 100% at 78% 12%, #cfe8f5 0%, #8fc3df 22%, #3f7fae 52%, #14365c 100%); } .is-saver .smt-modal__photo { background: radial-gradient(120% 100% at 78% 12%, #eaf4fb 0%, #c4ddee 28%, #9cc3df 60%, #6fa3c8 100%); } .smt-modal__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } /* modal body (right) */ .smt-modal__body { padding: 40px 40px 40px 36px; overflow-y: auto; } .smt-modal__name { font-size: 22px; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: var(--bod-name); line-height: 1.2; } .smt-modal__role { font-size: 14px; font-weight: 700; color: var(--bod-meta-head); margin-top: 8px; } .smt-modal__rule { width: 64px; height: 3px; margin: 18px 0; background: linear-gradient(90deg, #0069aa 0%, #72bf44 100%); } .smt-modal__bio { font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--bod-meta-body); } /* ══════════════════════════════════════ FLOATING WIDGET HIT-AREA FIX The Zincky widget container reserves the width of its (hidden) chat panel, so its invisible box overlaps the right-hand column and steals clicks from those cards. Let the container pass clicks through; only its visible children (FAB + open chat) stay interactive. ══════════════════════════════════════ */ .zincky-widget { pointer-events: none; } .zincky-fab, .zincky-chat { pointer-events: auto; } .smt-card__role, .smt-modal__role { white-space: pre-line; } /* Cinematic mode turns the page white but doesn't ride on `.is-saver`, so the default (dark-theme) text tokens stay white and render invisibly on white. Remap the bod text tokens to their light values here, matching `.is-saver`. */ body.energy-saver { --bod-card-bg: #ffffff; --bod-card-bd: rgba(10,30,60,0.10); --bod-text: #2a3340; --bod-text-strong: #0d1b2e; --bod-name: #0069aa; --bod-label: #0d1b2e; --bod-meta-head: #0d1b2e; --bod-meta-body: #495464; --bod-rule: rgba(10,30,60,0.12); --bod-note: #5a6573; } /* Cinematic: hero overlay turns white; hero title text recolors for contrast */ body.energy-saver .bod-hero__overlay { background: #ffffff !important; } body.energy-saver .bod-titleblock__title{ color: #0d1b2e !important; } body.energy-saver .bod-titleblock__sub{ color: #495464 !important; } body.energy-saver main a:not(.btn-download):not(.menu-foot-download):not(.pane-links a):not(.env-back-btn):not(.bed-back-btn):not(.op-back-btn):not(.bod-breadcrumb__item) { color: #fff!important; } /* Breadcrumb recolors dark in cinematic mode, matching other pages */ body.energy-saver .bod-breadcrumb__item { color: #0c2340!important; } body.energy-saver .bod-breadcrumb__item.bod-breadcrumb__item--active { color: #0c2340!important; } body.energy-saver .bod-breadcrumb__sep { color: #0c2340!important; } body.energy-saver .bod-card { box-shadow: 0 12px 32px rgba(8, 32, 55, 0.35); } body.energy-saver .bod-badge--plain{ border: 1px solid #0c2340; } body.energy-saver .smt-card { border: 1px solid #0c2340; } body.energy-saver .smt-card { box-shadow: 0 12px 32px rgba(8, 32, 55, 0.35); } /* zincky-widget click pass-through fix: let the container be transparent to clicks (its hidden chat reserves layout space) so the in-page "Back to top" button beneath it stays clickable; FAB + chat remain interactive. */ .zincky-widget { pointer-events: none; } .zincky-fab, .zincky-chat { pointer-events: auto; }