/* ============================================================ Motion layer — Mohammed Manjurus Samad Chowdhury Loaded AFTER style.css. Adds motion, framing and depth only. No text, image sources, links or section order are affected. ============================================================ */ /* ---------- Motion tokens ---------- */ :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1); --dur-micro: 260ms; --dur-hover: 620ms; --dur-reveal: 900ms; --dur-hero: 1200ms; --shift: 32px; --stagger: 90ms; --scrim-ink: 4, 12, 10; } /* ============================================================ PROGRESSIVE ENHANCEMENT Everything is visible by default. The .js-enabled class is added by an inline script only when JS runs AND the visitor has not asked for reduced motion. motion.js removes it again if GSAP fails to load, so content can never be stranded in a hidden state. ============================================================ */ .js-enabled { scroll-behavior: auto; } .js-enabled .section-head > .eyebrow, .js-enabled .section-head > h2, .js-enabled .section-head > p, .js-enabled .card, .js-enabled .value, .js-enabled .reach-badge, .js-enabled .timeline__item, .js-enabled .news-card, .js-enabled .testimonial, .js-enabled .gallery-item, .js-enabled .org-card, .js-enabled .stat, .js-enabled .split > img, .js-enabled .split > div > .eyebrow, .js-enabled .split > div > h2, .js-enabled .split > div > p, .js-enabled .contact-info-card, .js-enabled .form-group, .js-enabled [data-reveal] { opacity: 0; } /* Hero copy is driven by the load sequence */ .js-enabled .hero__text > *, .js-enabled .hero__media, .js-enabled .page-hero__content > * { opacity: 0; } /* Image clip-reveal start state. Scoped to images the reveal has not yet claimed: clipReveal() clearProps its inline clip-path on complete, so an unscoped rule would re-clip the image shut the instant its entrance animation finished. */ .js-enabled .card__img:not([data-m-revealed]), .js-enabled .org-card__media img:not([data-m-revealed]), .js-enabled .news-card .card__img:not([data-m-revealed]) { clip-path: inset(0 0 100% 0); } /* ============================================================ GLOBAL — header ============================================================ */ .site-header { transition: background-color var(--dur-micro) var(--ease-out-expo), backdrop-filter var(--dur-micro) var(--ease-out-expo), border-color var(--dur-micro) var(--ease-out-expo), transform 420ms var(--ease-out-expo); will-change: transform; } .site-header .nav { transition: padding var(--dur-hover) var(--ease-out-expo); } /* To sit transparently *over* the hero the header must overlay it — sticky positioning reserves space and would put pale text on cream. --m-header-h is measured by motion.js. */ .js-enabled body[data-hero="dark"] .site-header { position: fixed; top: 0; left: 0; right: 0; } .js-enabled body[data-hero="dark"] .hero { padding-top: calc(var(--m-header-h, 96px) + 18px); } .js-enabled body[data-hero="dark"] .page-hero { padding-top: var(--m-header-h, 96px); } /* Transparent over a dark hero until the page is scrolled */ .js-enabled body[data-hero="dark"] .site-header:not(.is-stuck) { background: transparent; backdrop-filter: none; border-bottom-color: transparent; } .js-enabled body[data-hero="dark"] .site-header:not(.is-stuck) .nav { padding: 26px 0; } .js-enabled body[data-hero="dark"] .site-header:not(.is-stuck) .nav__brand strong { color: #fff; } .js-enabled body[data-hero="dark"] .site-header:not(.is-stuck) .nav__links a { color: rgba(255,255,255,0.88); } .js-enabled body[data-hero="dark"] .site-header:not(.is-stuck) .nav__links a:hover, .js-enabled body[data-hero="dark"] .site-header:not(.is-stuck) .nav__links a[aria-current="page"] { color: #fff; } .js-enabled body[data-hero="dark"] .site-header:not(.is-stuck) .nav__toggle span { background: #fff; } /* Collapsed / scrolled state */ .site-header.is-stuck { background: rgba(250, 247, 240, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .site-header.is-stuck .nav { padding: 10px 0; } /* Hide on scroll-down, return on scroll-up */ .site-header.is-hidden { transform: translateY(-102%); } /* Nav underline draw */ .nav__links a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-micro) var(--ease-out-expo); } .nav__links a:hover::before { transform: scaleX(1); } .nav__links a[aria-current="page"]::before { transform: scaleX(1); } .nav__links a[aria-current="page"]::after { display: none; } /* ---------- Scroll progress ---------- */ .m-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; z-index: 200; pointer-events: none; } /* ---------- Page transition veil ---------- */ .m-veil { position: fixed; inset: 0; background: linear-gradient(180deg, #0d5c46 0%, #073d2e 100%); z-index: 300; transform: scaleY(0); transform-origin: bottom center; pointer-events: none; will-change: transform; } /* ---------- Reveal primitives ---------- */ .m-line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; } /* Keep keyboard focus obvious everywhere */ .js-enabled a:focus-visible, .js-enabled button:focus-visible, .js-enabled [tabindex]:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; } /* ============================================================ HOME — hero ============================================================ */ /* Top image strip becomes a seamless marquee filmstrip */ .js-enabled .hero__collage { display: flex; flex-wrap: nowrap; gap: 10px; padding: 0; align-items: stretch; opacity: 0.38; filter: grayscale(35%); will-change: transform; } .js-enabled .hero__collage img { flex: 0 0 auto; width: clamp(200px, 21vw, 330px); height: 100%; border-radius: 6px; } /* The scrim must not travel with the marquee, so it moves off the translating strip and onto the hero itself. */ .js-enabled .hero__collage::after { display: none; } .js-enabled .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 72% 62% at 78% 40%, rgba(10,20,36,0) 0%, rgba(10,20,36,0.6) 78%), linear-gradient(90deg, rgba(10,20,36,0.9) 0%, rgba(10,20,36,0.45) 46%, rgba(10,20,36,0) 72%); } /* Ken Burns lives on the photo; parallax on the wrapper */ .js-enabled .hero__media { will-change: transform; } .js-enabled .hero__photo { will-change: transform; } /* Decorative scroll cue (no text, aria-hidden) */ .m-scroll-cue { position: absolute; left: 50%; bottom: 22px; z-index: 4; width: 26px; height: 42px; margin-left: -13px; border: 2px solid rgba(255,255,255,0.5); border-radius: 14px; pointer-events: none; } .m-scroll-cue::after { content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--color-accent); animation: m-cue 1.9s var(--ease-out-expo) infinite; } @keyframes m-cue { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(14px); opacity: 0; } } @media (max-width: 900px) { .m-scroll-cue { display: none; } } /* ============================================================ HOME — stat band ============================================================ */ .stat { position: relative; } .m-stat-rule { display: block; height: 1px; margin: 14px auto 0; width: 56px; background: currentColor; opacity: 0.5; transform: scaleX(0); transform-origin: left center; color: var(--color-accent); } .stat__num { font-variant-numeric: tabular-nums; } /* ============================================================ CARDS — clipped frame, scrim, hover zoom, sibling dimming ============================================================ */ .card { position: relative; } .card__img { transform-origin: center center; transition: transform var(--dur-hover) var(--ease-out-expo); backface-visibility: hidden; } /* Scrim sits exactly over the 4:3 image area */ .card:has(.card__img)::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 4 / 3; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(var(--scrim-ink), 0) 40%, rgba(var(--scrim-ink), 0.25) 100%); transition: opacity var(--dur-hover) var(--ease-out-expo), background var(--dur-hover) var(--ease-out-expo); } .card:has(.card__img):hover::before { background: linear-gradient(180deg, rgba(var(--scrim-ink), 0.10) 30%, rgba(var(--scrim-ink), 0.55) 100%); } .card:has(.card__img):hover .card__img { transform: scale(1.08); will-change: transform; } .card__body { position: relative; z-index: 2; } .card__body h3 { transition: transform var(--dur-hover) var(--ease-out-expo); } .card:hover .card__body h3 { transform: translateY(-6px); } .card__body h3::after { content: ""; display: block; height: 2px; width: 34px; margin-top: 8px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-hover) var(--ease-out-expo); } .card:hover .card__body h3::after { transform: scaleX(1); } /* Sibling dimming — the hovered card is the only one at full presence */ .js-enabled .card-grid:hover .card:not(:hover) { opacity: 0.55; filter: saturate(0.7); } .js-enabled .card-grid .card { transition: opacity var(--dur-hover) var(--ease-out-expo), filter var(--dur-hover) var(--ease-out-expo), transform var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) var(--ease-out-expo); } /* ============================================================ HOME — organisation cards ============================================================ */ .js-enabled [data-motion="orgs"] .org-logo img { filter: grayscale(1); opacity: 0.6; transition: filter var(--dur-hover) var(--ease-out-expo), opacity var(--dur-hover) var(--ease-out-expo); } .js-enabled [data-motion="orgs"] .card:hover .org-logo img { filter: grayscale(0); opacity: 1; } .js-enabled [data-motion="orgs"] .card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(15, 40, 30, 0.16); } .m-tenure { display: block; height: 2px; margin-top: 14px; background: var(--color-accent); opacity: 0.85; transform: scaleX(0); transform-origin: left center; } /* ============================================================ HOME — signature roll-call ============================================================ */ .js-enabled [data-motion="rollcall"] .reach-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 26px; } .js-enabled [data-motion="rollcall"] .reach-badge { background: transparent; border-color: transparent; padding: 10px 0; font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 300; letter-spacing: 0.01em; opacity: 0.25; transition: opacity 520ms var(--ease-out-expo), font-weight 520ms var(--ease-out-expo), transform 520ms var(--ease-out-expo); } .js-enabled [data-motion="rollcall"] .reach-badge__dot { transform: scale(0.6); opacity: 0.4; transition: transform 520ms var(--ease-out-expo), opacity 520ms var(--ease-out-expo); } .js-enabled [data-motion="rollcall"] .reach-badge.is-lit { opacity: 1; font-weight: 600; } .js-enabled [data-motion="rollcall"] .reach-badge.is-lit .reach-badge__dot { transform: scale(1); opacity: 1; } /* ============================================================ HOME — featured work parallax + from the field ============================================================ */ .js-enabled [data-motion="featured"] .card__img { will-change: transform; } .js-enabled [data-motion="field"] .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: start; } .js-enabled [data-motion="field"] .gallery-item:nth-child(3n + 1) { aspect-ratio: 4 / 5; } .js-enabled [data-motion="field"] .gallery-item:nth-child(3n + 2) { aspect-ratio: 4 / 3; } .js-enabled [data-motion="field"] .gallery-item:nth-child(3n + 3) { aspect-ratio: 1 / 1; } .js-enabled [data-motion="field"] .gallery-item img { filter: saturate(0.85); transition: transform var(--dur-hover) var(--ease-out-expo), filter var(--dur-hover) var(--ease-out-expo); } .js-enabled [data-motion="field"] .gallery-item:hover img { transform: scale(1.06); filter: saturate(1); } /* Shared "View" affordance for image tiles */ .m-view-tag { position: absolute; left: 14px; bottom: 12px; z-index: 3; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity var(--dur-hover) var(--ease-out-expo), transform var(--dur-hover) var(--ease-out-expo); pointer-events: none; text-shadow: 0 1px 10px rgba(0,0,0,0.6); } .gallery-item:hover .m-view-tag, .gallery-item:focus-visible .m-view-tag { opacity: 1; transform: translateY(0); } /* ============================================================ HOME — leadership philosophy ============================================================ */ .value { position: relative; } .m-value-rule { display: block; height: 1px; margin-top: 10px; background: var(--color-accent); opacity: 0.6; transform: scaleX(0); transform-origin: left center; } /* ============================================================ ABOUT — timeline ============================================================ */ .js-enabled .timeline { border-left-color: transparent; } .m-timeline-track { position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--color-border); transform: scaleY(0); transform-origin: top center; } .js-enabled .timeline__item::before { transform: scale(0); transition: transform 520ms var(--ease-out-expo); } .js-enabled .timeline__item.is-reached::before { transform: scale(1); } .js-enabled .timeline__item.is-reached::after { content: ""; position: absolute; left: -45px; top: -2px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--color-accent); opacity: 0; animation: m-ring 900ms var(--ease-out-expo) forwards; pointer-events: none; } @keyframes m-ring { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(1.15); opacity: 0; } } /* Alternating entries + sticky year marker (desktop only) */ @media (min-width: 901px) { .js-enabled .timeline { margin-left: 0; padding-left: 0; max-width: 900px; margin-right: auto; } .js-enabled .timeline__item { width: 50%; padding-left: 0; padding-right: 44px; text-align: right; } .js-enabled .timeline__item::before { left: auto; right: -46px; } .js-enabled .timeline__item.is-reached::after { left: auto; right: -52px; } /* .m-alt is assigned in JS, not via :nth-child, because the injected track and year marker are also children of .timeline and would otherwise shift the parity. */ .js-enabled .timeline__item.m-alt { margin-left: 50%; padding-right: 0; padding-left: 44px; text-align: left; } .js-enabled .timeline__item.m-alt::before { right: auto; left: -46px; } .js-enabled .timeline__item.m-alt.is-reached::after { right: auto; left: -52px; } .js-enabled .m-timeline-track { left: 50%; margin-left: -1px; } .m-year-marker { position: sticky; top: 45vh; float: right; width: 0; height: 0; z-index: 3; } .m-year-marker span { position: absolute; left: 28px; top: -22px; display: block; white-space: nowrap; font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700; letter-spacing: 0.01em; color: var(--color-accent); opacity: 0.22; } } @media (max-width: 900px) { .m-year-marker { display: none; } } /* ============================================================ ORGANISATIONS — sticky identity column ============================================================ */ @media (min-width: 901px) { .js-enabled .org-card__body { display: grid; grid-template-columns: 300px 1fr; column-gap: 52px; align-items: start; padding: 40px; } .js-enabled .org-card__body > * { grid-column: 2; } .js-enabled .org-card__head { grid-column: 1; grid-row: 1 / 200; position: sticky; top: 120px; align-self: start; display: block; margin-bottom: 0; } .js-enabled .org-card__head .org-logo { width: 84px; height: 84px; margin-bottom: 18px; } .js-enabled .org-card__body h3 { font-size: 1.55rem; } } .js-enabled .org-card__head .org-logo img { transition: filter var(--dur-hover) var(--ease-out-expo); } /* Outbound link affordance */ .org-card__links .btn { position: relative; overflow: hidden; } .org-card__links .btn::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 9px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-micro) var(--ease-out-expo); } .org-card__links .btn:hover::after { transform: scaleX(1); } /* ============================================================ IMPACT — proportion bars, region index ============================================================ */ .m-bar { display: block; height: 3px; margin-top: 12px; border-radius: 2px; background: var(--color-accent); opacity: 0.9; transform: scaleX(0); transform-origin: left center; } .m-region-index { display: block; margin: 0 auto 26px; text-align: center; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.22em; color: var(--color-accent); font-variant-numeric: tabular-nums; } /* ============================================================ HUMANITARIAN — full-bleed pinned photographs ============================================================ */ @media (min-width: 769px) { /* Panel 1 of this sequence is the page hero; panels 2..n are .split. One token, so the two can never drift apart. */ .js-enabled body[data-page="humanitarian"] { --m-panel-h: 90vh; } /* .page-hero carries no height of its own — its shared min-height:340px is sized for interior pages whose hero is followed by ordinary padded sections. Here the hero opens a full-bleed panel sequence, so it takes the same panel height as the panels that follow it. Scoped to this page so no other hero changes. */ .js-enabled body[data-page="humanitarian"] .page-hero { min-height: var(--m-panel-h); } .js-enabled [data-motion="fullbleed"] { padding: 0; } .js-enabled [data-motion="fullbleed"] > .container { max-width: none; padding: 0; } .js-enabled [data-motion="fullbleed"] .split { display: block; position: relative; height: var(--m-panel-h, 90vh); gap: 0; /* the photograph is scaled for parallax — keep it inside the frame so the page never gains a horizontal scrollbar */ overflow: hidden; } .js-enabled [data-motion="fullbleed"] .split > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; will-change: transform; } /* --m-scrim is scrubbed 0.65 → 0.25 by motion.js so the photograph brightens as it arrives */ .js-enabled [data-motion="fullbleed"] .split { --m-scrim: 0.65; } .js-enabled [data-motion="fullbleed"] .split::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(var(--scrim-ink), calc(var(--m-scrim) + 0.22)) 0%, rgba(var(--scrim-ink), var(--m-scrim)) 45%, rgba(var(--scrim-ink), calc(var(--m-scrim) * 0.3)) 82%); pointer-events: none; } .js-enabled [data-motion="fullbleed"] .split > div { position: relative; z-index: 2; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .js-enabled [data-motion="fullbleed"] .split > div > * { max-width: 520px; } .js-enabled [data-motion="fullbleed"] .split h2 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); } .js-enabled [data-motion="fullbleed"] .split p { color: rgba(255,255,255,0.86) !important; } } /* ---------- Humanitarian — horizontal project strip ---------- */ @media (min-width: 769px) { .js-enabled [data-motion="hscroll"] .card-grid { display: flex; flex-wrap: nowrap; gap: 26px; width: max-content; will-change: transform; } .js-enabled [data-motion="hscroll"] .card-grid > .card { flex: 0 0 clamp(280px, 32vw, 420px); } .js-enabled [data-motion="hscroll"] > .container { max-width: none; overflow: hidden; } .js-enabled [data-motion="hscroll"] .section-head { max-width: var(--max-width); margin-left: auto; margin-right: auto; padding: 0 24px; } } /* ============================================================ GALLERY — masonry, hover, Flip lightbox ============================================================ */ /* Masonry via CSS columns. Each tile keeps a *defined* ratio so its height is reserved before the lazy image loads — otherwise the column would collapse and every reveal would fire at once. */ @media (min-width: 641px) { .js-enabled [data-motion="masonry"] .gallery-grid { display: block; column-count: 3; column-gap: 18px; } .js-enabled [data-motion="masonry"] .gallery-item { break-inside: avoid; margin-bottom: 18px; display: block; width: 100%; } .js-enabled [data-motion="masonry"] .gallery-item:nth-child(4n + 1) { aspect-ratio: 4 / 5; } .js-enabled [data-motion="masonry"] .gallery-item:nth-child(4n + 2) { aspect-ratio: 1 / 1; } .js-enabled [data-motion="masonry"] .gallery-item:nth-child(4n + 3) { aspect-ratio: 4 / 3; } .js-enabled [data-motion="masonry"] .gallery-item:nth-child(4n + 4) { aspect-ratio: 3 / 4; } .js-enabled [data-motion="masonry"] .gallery-item img { width: 100%; height: 100%; object-fit: cover; } } @media (min-width: 1024px) { .js-enabled [data-motion="masonry"] .gallery-grid { column-count: 4; } } .js-enabled .gallery-item img { transition: transform var(--dur-hover) var(--ease-out-expo); } .js-enabled .gallery-item:hover img { transform: scale(1.05); } .js-enabled .gallery-item::after { content: ""; position: absolute; inset: 0; background: rgba(var(--scrim-ink), 0.22); opacity: 1; transition: opacity var(--dur-hover) var(--ease-out-expo); pointer-events: none; } .js-enabled .gallery-item:hover::after { opacity: 0; } /* Circular cursor follower */ .m-cursor { position: fixed; top: 0; left: 0; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: rgba(201, 161, 59, 0.92); color: #1a1406; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none; z-index: 250; opacity: 0; transform: scale(0.4); will-change: transform; } @media (hover: none) { .m-cursor { display: none; } } /* Lightbox upgraded for Flip */ .js-enabled .lightbox { display: flex; visibility: hidden; opacity: 0; background: rgba(7, 20, 15, 0.96); transition: opacity 420ms var(--ease-out-expo), visibility 420ms; flex-direction: column; } .js-enabled .lightbox.is-open { visibility: visible; opacity: 1; } .js-enabled .lightbox > div { display: flex; flex-direction: column; align-items: center; max-height: 100%; } .js-enabled .lightbox img { max-width: min(92vw, 1200px); max-height: 80vh; width: auto; height: auto; object-fit: contain; } .js-enabled .gallery-item.is-source { background: rgba(0,0,0,0.06); } .js-enabled .gallery-item.is-source::after { opacity: 0; } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background var(--dur-micro) var(--ease-out-expo); } .lightbox__nav:hover { background: rgba(255,255,255,0.22); } .lightbox__nav--prev { left: 24px; } .lightbox__nav--next { right: 24px; } @media (max-width: 640px) { .lightbox__nav { display: none; } } /* ============================================================ NEWS ============================================================ */ .news-card { position: relative; transition: transform var(--dur-hover) var(--ease-out-expo), box-shadow var(--dur-hover) var(--ease-out-expo); } .news-card .card__img { transition: transform var(--dur-hover) var(--ease-out-expo); } .news-card:hover .card__img { transform: scale(1.07); will-change: transform; } .news-card h3 { transition: transform var(--dur-hover) var(--ease-out-expo); } .news-card:hover h3 { transform: translateX(6px); } .js-enabled .news-card__date { opacity: 0.5; transition: opacity var(--dur-hover) var(--ease-out-expo); } .js-enabled .news-card:hover .news-card__date { opacity: 1; } .news-card__body::after { content: ""; display: block; height: 1px; margin-top: 16px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-hover) var(--ease-out-expo); } .news-card:hover .news-card__body::after { transform: scaleX(1); } /* Lead story gets a larger frame */ @media (min-width: 901px) { .js-enabled [data-motion="news"] .card-grid { grid-template-columns: repeat(2, 1fr); } .js-enabled [data-motion="news"] .news-card:first-child { grid-column: 1 / -1; } .js-enabled [data-motion="news"] .news-card:first-child .card__img { aspect-ratio: 21 / 9; } .js-enabled [data-motion="news"] .news-card:first-child h3 { font-size: 1.5rem; } } /* ============================================================ CONTACT — form micro-interactions ============================================================ */ .js-enabled .form-group { position: relative; } .js-enabled .form-group label { transform-origin: left center; transition: transform var(--dur-micro) var(--ease-out-expo), color var(--dur-micro) var(--ease-out-expo); } .js-enabled .form-group.is-active label { transform: scale(0.8) translateY(-2px); color: var(--color-primary); } .js-enabled .form-group input, .js-enabled .form-group textarea { position: relative; transition: border-color var(--dur-micro) var(--ease-out-expo); } .js-enabled .form-group input:focus, .js-enabled .form-group textarea:focus { outline: none; border-color: var(--color-primary); } .m-field-rule { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-micro) var(--ease-out-expo); pointer-events: none; border-radius: 0 0 8px 8px; } .form-group.is-active .m-field-rule { transform: scaleX(1); transform-origin: left center; } .form-group.is-blurring .m-field-rule { transform: scaleX(0); transform-origin: right center; } .m-check { position: absolute; right: 12px; bottom: 14px; width: 18px; height: 18px; pointer-events: none; } .m-check path { fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset 420ms var(--ease-out-expo); } .form-group.is-valid .m-check path { stroke-dashoffset: 0; } /* Submit button states */ .m-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; animation: m-spin 720ms linear infinite; } @keyframes m-spin { to { transform: rotate(360deg); } } /* Contact detail rows */ .js-enabled .contact-info-list li { transition: transform var(--dur-hover) var(--ease-out-expo); } .js-enabled .social-row a { transition: transform var(--dur-hover) var(--ease-out-expo), background var(--dur-micro) var(--ease-out-expo); } .js-enabled .social-row a:hover { transform: rotate(8deg) scale(1.1); } /* ============================================================ FOOTER — magnetic social icons ============================================================ */ .footer-social a { will-change: transform; } .js-enabled .footer-social a:hover { transform: none; } /* ============================================================ MOBILE — no parallax, no pinning, no horizontal scroll ============================================================ */ @media (max-width: 768px) { .js-enabled .hero__collage { animation: none !important; } .m-cursor { display: none; } } /* ============================================================ REDUCED MOTION — hard stop Nothing is hidden, nothing moves, nothing pins. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js-enabled .section-head > .eyebrow, .js-enabled .section-head > h2, .js-enabled .section-head > p, .js-enabled .card, .js-enabled .value, .js-enabled .reach-badge, .js-enabled .timeline__item, .js-enabled .news-card, .js-enabled .testimonial, .js-enabled .gallery-item, .js-enabled .org-card, .js-enabled .stat, .js-enabled .split > img, .js-enabled .split > div > *, .js-enabled .contact-info-card, .js-enabled .form-group, .js-enabled .hero__text > *, .js-enabled .hero__media, .js-enabled .page-hero__content > *, .js-enabled [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; } .js-enabled .card__img, .js-enabled .org-card__media img { clip-path: none !important; } .js-enabled [data-motion="rollcall"] .reach-badge { opacity: 1 !important; font-weight: 600; } .m-scroll-cue, .m-cursor, .m-veil, .m-progress { display: none !important; } .m-timeline-track { transform: scaleY(1) !important; } .m-stat-rule, .m-tenure, .m-bar, .m-value-rule { transform: scaleX(1) !important; } .js-enabled .timeline__item::before { transform: scale(1) !important; } }