/* ========================================================================== R&D Leadership — shared section stylesheet. Source: the designer's approved `rnd-leadership` package (styles.css). Section rules are carried across unchanged; two things from that file are deliberately left out because this runs inside a live page rather than a standalone document: 1. its `:root` token block — the names (--font-display, --text-primary, --brand-primary …) already exist site-wide with their own values, so redeclaring them globally would repaint other sections. The same tokens are declared on .rnd-leadership-section instead, where they reach this section's subtree and nothing else. 2. its base layer — `body {}`, bare `a {}`, `p {}`, `ul {}` and `h1 {}` resets that would leak across every page that links this file. The handful the section actually needs are re-stated as scoped rules. Linked by index.html (Home), light/index.html and about-us/index.html. All three render identical markup, so one file serves all three. ========================================================================== */ .rnd-leadership-section { /* Designer's tokens, scoped to this subtree — see note 1 above. */ --rdl-brand-primary: #007CC3; --rdl-hover-primary: #005A91; --rdl-surface-dark: #0F172A; --rdl-border-medium: #CBD5E1; --rdl-text-primary: #0F172A; --rdl-text-secondary: #64748B; --rdl-text-inverse: #FFFFFF; --rdl-font-display: 'Plus Jakarta Sans', sans-serif; --rdl-font-body: 'Inter', sans-serif; --rdl-font-mono: 'Plus Jakarta Sans', sans-serif; --rdl-elev-hover: 0px 3px 8px rgba(0, 0, 0, 0.04), 0px 2px 12px rgba(0, 0, 0, 0.03); --rdl-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --rdl-ease-organic: cubic-bezier(0.16, 1, 0.3, 1); --rdl-grad-headline: linear-gradient(90deg, #0284C7 0%, #007CC3 55%, #06B6D4 100%); --rdl-focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.3); --rdl-duration: 300ms; /* The design width the section scales against. The designer's package is drawn against the viewport and stands 797px tall at 1920. The section it replaces occupied 631px, and that footprint is being kept so neither Home nor About Us grows. Squashing one element to claw back 166px would break the composition, so the whole design is scaled instead: every proportion below is measured against this value rather than 100vw, which tracks the viewport up to 1460px and then holds. Above that the section stops growing and sits at 631px, with the designer's ratios between headline, copy, cards and whitespace exactly as drawn. */ --rdl-w: min(100vw, 1460px); position: relative; overflow: hidden; /* soft white to pale blue, so the left stays clean where the film no longer reaches */ background: linear-gradient(118deg, #FFFFFF 0%, #FBFDFF 38%, #F2F8FD 72%, #EAF3FC 100%); min-height: clamp(520px, calc(40.6 * var(--rdl-w) / 100), 631px); display: grid; align-content: center; padding-top: clamp(34px, calc(3.1 * var(--rdl-w) / 100), 62px); padding-bottom: clamp(34px, calc(3.1 * var(--rdl-w) / 100), 62px); font-family: var(--rdl-font-body); color: var(--rdl-text-primary); -webkit-font-smoothing: antialiased; } /* From the dropped base layer — only what this section needs (note 2). */ .rnd-leadership-section *, .rnd-leadership-section *::before, .rnd-leadership-section *::after { box-sizing: border-box; } .rnd-leadership-section p { margin: 0; text-wrap: pretty; } .rnd-leadership-section video, .rnd-leadership-section img { display: block; max-width: 100%; } /* `#main-content ul, #main-content ol { margin: 0 }` in the page chrome outranks any plain class selector, so the list resets carry the ID too. */ .rnd-leadership-section ul, #main-content .rnd-leadership-section ul { margin: 0; padding: 0; list-style: none; } /* Likewise `#main-content a:not(.btn)` sets a link colour. The CTA carries .btn so it is already exempt; this keeps the rest of the section honest. */ .rnd-leadership-section a, #main-content .rnd-leadership-section a { color: inherit; text-decoration: none; } /* ---------- shared utilities the section borrows, scoped ---------- */ .rnd-leadership-section .eyebrow-row { display: flex; align-items: center; gap: 8px; margin-bottom: clamp(17px, calc(1.65 * var(--rdl-w) / 100), 30px); } .rnd-leadership-section .eyebrow { font-family: var(--rdl-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(2, 132, 199, 0.9); } .rnd-leadership-section .lead { font-size: clamp(15px, calc(1.4 * var(--rdl-w) / 100), 17px); font-weight: 400; line-height: 1.6; color: var(--rdl-text-secondary); max-width: 560px; } .rnd-leadership-section .h2-accent-inline { font-weight: 700; background: var(--rdl-grad-headline); -webkit-background-clip: text; background-clip: text; color: transparent; } .rnd-leadership-section .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--rdl-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transition: all 150ms ease; white-space: nowrap; border: none; background: none; color: inherit; } .rnd-leadership-section .btn--primary, #main-content .rnd-leadership-section .btn--primary { padding: 12px 24px; border-radius: 9999px; background: var(--rdl-surface-dark); color: var(--rdl-text-inverse); border: 1px solid transparent; } .rnd-leadership-section .btn--primary:hover, #main-content .rnd-leadership-section .btn--primary:hover { background: var(--rdl-hover-primary); transform: translateY(-2px); box-shadow: var(--rdl-elev-hover); } .rnd-leadership-section .btn:focus-visible { outline: none; box-shadow: var(--rdl-focus-ring); } /* ---------- the section ---------- */ /* Proportions follow the designer's package: a 1440px container inside the page margins, a 38/62 column split. The film sits in the right two thirds only, scaled down and shifted right, with its left edge feathered so it supports the composition instead of running under it. */ .rnd-leadership-section .rdl__bg { position: absolute; inset: 0; pointer-events: none; } .rnd-leadership-section .rdl__video, .rnd-leadership-section .rdl__still { /* The designer's file positions the film with all four insets and leaves width/height auto. A replaced element sized that way takes its intrinsic size and drops the right/bottom insets, so the 1280x720 source stopped short of the frame instead of covering it. Same box, stated as an explicit size: 32% + 71% = 103% matches their right:-3%, 4% + 92% = 96% their bottom:4%, and 71% of the section width is the figure their README gives. */ position: absolute; left: 32%; top: 4%; width: 71%; height: 92%; display: block; object-fit: cover; object-position: 56% 50%; opacity: 0.88; filter: brightness(1.04) saturate(1.04); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 12%, #000 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 12%, #000 30%, #000 100%); animation: rdl-video-in 900ms var(--rdl-ease-standard) both; } /* The still is the reduced-motion stand-in; hidden while the film is allowed. Its poster is set inline in the markup, because the three pages that link this file sit at different depths and each needs its own relative path. */ .rnd-leadership-section .rdl__still { display: none; animation: none; background-size: cover; background-position: 56% 50%; background-repeat: no-repeat; } @keyframes rdl-video-in { from { opacity: 0; } to { opacity: 0.88; } } .rnd-leadership-section .rdl__grid { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 124, 195, 0.035) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(0, 124, 195, 0.035) 0 1px, transparent 1px 48px); -webkit-mask-image: radial-gradient(62% 100% at 20% 50%, #000 22%, rgba(0, 0, 0, 0.3) 60%, transparent 94%); mask-image: radial-gradient(62% 100% at 20% 50%, #000 22%, rgba(0, 0, 0, 0.3) 60%, transparent 94%); } /* a light hold over the overlap zone only; the left is already clean */ .rnd-leadership-section .rdl__veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.72) 26%, rgba(255, 255, 255, 0.22) 48%, rgba(255, 255, 255, 0) 68%); } /* ---- the frame ---- */ .rnd-leadership-section .rdl__layout { position: relative; z-index: 1; width: 100%; /* Same container as every other section on these pages: Home, the light Home and About Us all wrap their content in Tailwind's `max-w-7xl mx-auto px-6` (1280px + 24px). The designer's package used a wider 1440px frame with its own padding, which left this section's copy sitting further left than the rest of the page. Stated literally rather than via --max-width/--gutter because Home does not load content.css, where those tokens live. */ max-width: 1280px; margin-inline: auto; padding-inline: 24px; display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(30px, calc(3.5 * var(--rdl-w) / 100), 62px); align-items: center; } /* ---- left column ---- */ .rnd-leadership-section .rdl__copy { max-width: 452px; } .rnd-leadership-section .rdl__title { font-family: var(--rdl-font-display); font-size: clamp(30px, calc(3.8 * var(--rdl-w) / 100), 73px); font-weight: 600; line-height: 1.06; letter-spacing: -0.032em; color: var(--rdl-text-primary); margin: 0 0 clamp(19px, calc(1.8 * var(--rdl-w) / 100), 33px); } .rnd-leadership-section .rdl__lead { max-width: 435px; font-size: clamp(15px, calc(1.4 * var(--rdl-w) / 100), 17px); line-height: 1.55; margin-bottom: clamp(24px, calc(2.35 * var(--rdl-w) / 100), 44px); } .rnd-leadership-section .rdl__cta, #main-content .rnd-leadership-section .rdl__cta { min-height: 49px; padding: 0 28px; margin-bottom: clamp(30px, calc(2.95 * var(--rdl-w) / 100), 54px); } .rnd-leadership-section .rdl__cta .arrow { transition: transform var(--rdl-duration) var(--rdl-ease-standard); } .rnd-leadership-section .rdl__cta:hover .arrow { transform: translateX(4px); } .rnd-leadership-section .rdl__rule { /* Lightened from the designer's solid --rdl-border-medium (#CBD5E1): against this section's near-white ground the full-strength line read as a hard divider and pulled focus from the copy above it. Same hue, ~45% strength, fading out to the right exactly as drawn. */ display: block; height: 1px; max-width: 435px; background: linear-gradient(90deg, rgba(203, 213, 225, 0.45), rgba(0, 124, 195, 0)); margin-bottom: clamp(17px, calc(1.75 * var(--rdl-w) / 100), 26px); } .rnd-leadership-section .rdl__places { /* The two Centre of Excellence lines sit side by side on one row. */ display: flex; flex-wrap: nowrap; align-items: flex-start; gap: clamp(18px, calc(1.9 * var(--rdl-w) / 100), 32px); } .rnd-leadership-section .rdl__place { display: flex; flex-direction: column; gap: 6px; } .rnd-leadership-section .rdl__place-link { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; } .rnd-leadership-section .rdl__place-name { font-family: var(--rdl-font-display); font-size: clamp(12px, calc(0.83 * var(--rdl-w) / 100), 15px); font-weight: 600; letter-spacing: -0.012em; color: var(--rdl-text-primary); } /* Sized up from the designer's 8.5-9.5px: the place name above this caption was removed, so it is now the only text in each item and has to carry it alone. */ .rnd-leadership-section .rdl__place-cap { font-family: var(--rdl-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rdl-brand-primary); } /* ---- right column: floating panels, not blocks ---- */ /* The ID carries here for the same reason as the list reset above — and because that reset's own `margin: 0` would otherwise cancel the auto margin that pushes this grid to the right of its column. */ .rnd-leadership-section .rdl__stats, #main-content .rnd-leadership-section .rdl__stats { margin: 0 0 0 auto; max-width: 530px; display: grid; grid-template-columns: repeat(2, minmax(0, 252px)); justify-content: end; gap: clamp(16px, calc(1.4 * var(--rdl-w) / 100), 26px); } .rnd-leadership-section .rdlcard { display: flex; flex-direction: column; min-height: 153px; padding: clamp(17px, calc(1.3 * var(--rdl-w) / 100), 23px); border-radius: 20px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(16px) saturate(1.06); backdrop-filter: blur(16px) saturate(1.06); border: 1px solid rgba(0, 124, 195, 0.14); box-shadow: 0 2px 6px rgba(3, 21, 47, 0.03), 0 18px 40px -26px rgba(3, 21, 47, 0.28); transition: transform var(--rdl-duration) var(--rdl-ease-organic), border-color var(--rdl-duration) var(--rdl-ease-standard), box-shadow var(--rdl-duration) var(--rdl-ease-standard); } .rnd-leadership-section .rdlcard:hover { transform: translateY(-3px); border-color: rgba(0, 124, 195, 0.32); box-shadow: 0 12px 30px rgba(0, 124, 195, 0.14); } .rnd-leadership-section .rdlcard__head { display: flex; align-items: center; gap: 8px; } .rnd-leadership-section .rdlcard__icon { line-height: 0; color: var(--rdl-brand-primary); } .rnd-leadership-section .rdlcard__label { font-family: var(--rdl-font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rdl-brand-primary); } .rnd-leadership-section .rdlcard__value { margin-top: auto; font-family: var(--rdl-font-display); font-size: clamp(21px, calc(1.65 * var(--rdl-w) / 100), 31px); font-weight: 600; line-height: 1.05; letter-spacing: -0.03em; color: var(--rdl-text-primary); font-variant-numeric: tabular-nums; } .rnd-leadership-section .rdlcard__sub { margin-top: 8px; font-family: var(--rdl-font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rdl-text-secondary); } @media (max-width: 1180px) { /* below the split the height goes back to being content-driven, and the film returns to full bleed behind a vertical veil */ .rnd-leadership-section { min-height: 0; padding-top: clamp(48px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 72px); } .rnd-leadership-section .rdl__layout { grid-template-columns: 1fr; gap: 44px; align-items: start; } .rnd-leadership-section .rdl__copy { max-width: none; } .rnd-leadership-section .rdl__lead, .rnd-leadership-section .rdl__rule { max-width: 560px; } .rnd-leadership-section .rdl__video, .rnd-leadership-section .rdl__still { left: 0; top: 0; width: 100%; height: 100%; object-position: 58% 50%; -webkit-mask-image: none; mask-image: none; } .rnd-leadership-section .rdl__veil { background: linear-gradient(180deg, rgba(255, 255, 255, 0.93) 0%, rgba(255, 255, 255, 0.78) 42%, rgba(255, 255, 255, 0.4) 100%); } .rnd-leadership-section .rdl__stats, #main-content .rnd-leadership-section .rdl__stats { margin-left: 0; max-width: none; justify-content: start; } } @media (max-width: 560px) { .rnd-leadership-section .rdl__stats { grid-template-columns: 1fr; } .rnd-leadership-section .rdlcard { min-height: 0; } .rnd-leadership-section .rdl__places { gap: 22px; } } /* The designer's package swaps the