/* Theme Name: ALS Sustainability Review 2026 Description: Styles for the 2026 single-page sustainability microsite. Scope: All rules are namespaced under #sr2026 so they cannot leak into or collide with the rest of the site. Deploy to: /-/media/sustainability/2026/css/styles.css */ /* ---------- tokens ---------- */ #sr2026{ --blue:#004CAB; --sky:#4AA8FF; --peri-a:#AEC3FB; --peri-b:#DFECFD; --green:#023A06; --green-btn:#0E7A2C; --amber:#FEBD03; --amber-btn:#6b4b00; --ceo:#131110; --black:#010101; --grey:#F0F0F0; --ink:#231F20; --purple:#7b2fbe; --maxw:1180px; --section-min:calc((100vh - 88px) * 0.8); /* uniform section height, 20% reduced; expands if content is taller */ font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; } @supports (height:100dvh){ #sr2026{--section-min:calc((100dvh - 88px) * 0.8);} } /* dynamic vh: stable with mobile browser UI */ #sr2026 *{box-sizing:border-box;} #sr2026 img{max-width:100%; display:block;} /* ---------- layout helpers ---------- */ #sr2026 .sr-band{position:relative; width:100%; padding:96px 24px; display:flex; flex-direction:column; justify-content:center; /* vertically center content (like the hero) */ min-height:var(--section-min); scroll-margin-top:88px;} /* offset scroll target below the sticky header so the section top is visible */ #sr2026 .sr-inner{width:100%; max-width:var(--maxw); margin:0 auto;} /* width:100% prevents flex shrink-wrap so content stays left-aligned */ #sr2026 .sr-cols{display:flex; gap:64px; align-items:center;} #sr2026 .sr-cols > div{flex:1 1 0; min-width:0;} #sr2026 .sr-cols.sr-mirror{flex-direction:row-reverse;} /* ---------- typography ---------- */ #sr2026 h1,#sr2026 h2{margin:0 0 .4em; font-weight:800; line-height:1.05; letter-spacing:-.01em;} #sr2026 h2.sr-title{font-size:clamp(34px,4.4vw,58px);} #sr2026 .sr-lead{font-weight:600; margin:0 0 .5em;} #sr2026 p{margin:0 0 1em;} #sr2026 .sr-band ul{margin:0 0 1.4em; padding:0; list-style:none;} #sr2026 .sr-band ul li{position:relative; padding-left:22px; margin-bottom:.7em;} #sr2026 .sr-band ul li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85;} /* ---------- buttons ---------- */ #sr2026 .sr-btn{display:inline-block; border:0; cursor:pointer; font-family:inherit; font-weight:700; font-size:16px; line-height:1; padding:16px 28px; border-radius:999px; text-decoration:none; transition:transform .15s ease, opacity .15s ease, background .15s ease;} #sr2026 .sr-btn:hover{transform:translateY(-2px); opacity:.92;} #sr2026 .sr-btn--blue{background:var(--blue); color:#fff;} #sr2026 .sr-btn--white{background:#fff; color:var(--blue);} #sr2026 .sr-btn--sky{background:var(--sky); color:#fff;} #sr2026 .sr-btn--green{background:var(--green-btn); color:#fff;} #sr2026 .sr-btn--amber{background:#fff; color:var(--amber-btn);} #sr2026 .sr-btn--purple{background:var(--purple); color:#fff;} /* ---------- keyboard focus visibility (works on light & dark bands) ---------- */ #sr2026 a:focus-visible, #sr2026 button:focus-visible{outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 6px rgba(0,40,90,.65); border-radius:6px;} /* ---------- respect reduced-motion preference ---------- */ @media (prefers-reduced-motion: reduce){ #sr2026 *,#sr2026 *::before,#sr2026 *::after{ transition-duration:.01ms !important; animation-duration:.01ms !important;} } /* ---------- down-arrow scroll control ---------- */ /* small, thin circle pinned near the bottom-center of each section */ #sr2026 .sr-down{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); width:34px; height:34px; border:2px solid currentColor; border-radius:50%; opacity:.75; transition:opacity .15s ease, transform .15s ease;} #sr2026 .sr-down:hover{opacity:1; transform:translateX(-50%) translateY(3px);} #sr2026 .sr-down::after{content:""; position:absolute; left:50%; top:43%; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translate(-50%,-50%) rotate(45deg);} /* ---------- 0. header ---------- */ /* Sticky header — pinned to top; page scrolls beneath it. To let it scroll away instead, use: position:relative; */ #sr2026 .sr-header{position:sticky; top:0; z-index:50; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:14px 32px; box-shadow:0 1px 0 rgba(0,0,0,.06);} #sr2026 .sr-logo img{height:46px; width:auto;} #sr2026 .sr-header-right{display:flex; align-items:center; gap:24px;} #sr2026 .sr-lang{display:flex; gap:10px; align-items:center; font-size:14px; font-weight:600;} #sr2026 .sr-lang a{color:var(--blue); text-decoration:underline;} #sr2026 .sr-lang .sr-current{color:var(--ink); text-decoration:none;} #sr2026 .sr-lang span.sep{color:#bbb;} /* ---------- floating section nav (dot rail) ---------- */ #sr2026 .sr-dots{position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:13px; padding:14px 9px; background:rgba(18,28,48,.28); border-radius:999px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);} #sr2026 .sr-dots a{position:relative; display:block; width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.55); transition:background .2s ease, transform .2s ease;} #sr2026 .sr-dots a:hover{background:#fff; transform:scale(1.15);} #sr2026 .sr-dots a.active{background:#fff; transform:scale(1.35);} #sr2026 .sr-dots a .sr-dot-label{position:absolute; right:22px; top:50%; transform:translateY(-50%); white-space:nowrap; background:rgba(18,28,48,.9); color:#fff; font-size:12px; font-weight:600; padding:5px 10px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .15s ease;} #sr2026 .sr-dots a:hover .sr-dot-label{opacity:1;} /* ---------- mobile section menu (button + overlay) — shown only ≤860px ---------- */ #sr2026 .sr-menu-toggle{display:none;} #sr2026 .sr-menu{display:none;} /* ---------- 1. hero ---------- */ #sr2026 .sr-hero{padding:0 24px; justify-content:center; /* horizontal gutter on the band (matches other sections) so hero text aligns with CEO text */ background:#cfe3f5 center top/cover no-repeat; /* anchor crop to top so the image top is never cut */ background-image:url('/-/media/sustainability/2026/images/hero-lab.jpg');} #sr2026 .sr-hero .sr-inner{width:100%; padding:64px 0;} #sr2026 .sr-hero h1{color:var(--blue); font-size:clamp(44px,6vw,84px); margin-bottom:.15em;} #sr2026 .sr-hero .sr-sub{color:var(--blue); font-weight:700; font-size:clamp(22px,2.6vw,34px); line-height:1.08; margin:0 0 28px;} /* ---------- 2. CEO ---------- */ /* Solid blue band; text left + circular portrait right (same motif as innovation). */ #sr2026 .sr-ceo{color:#fff; background:var(--blue);} #sr2026 .sr-ceo h2{color:#fff; font-size:clamp(30px,3.4vw,46px);} #sr2026 .sr-ceo .sr-sig{font-weight:700; margin-top:24px; line-height:1.3;} /* ---------- 3. at a glance ---------- */ #sr2026 .sr-glance{background:#73BCFF; color:#fff; text-align:center;} #sr2026 .sr-glance h2{color:#fff; font-size:clamp(32px,4vw,52px); margin-bottom:48px;} #sr2026 .sr-tiles{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(16px,3vw,40px); max-width:1000px; margin:0 auto 44px;} #sr2026 .sr-tile{flex:0 0 auto; width:clamp(200px,23vw,280px); aspect-ratio:1; border-radius:50%; background:#004cab; border:2px solid #004cab; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:26px;} #sr2026 .sr-tile .sr-num{font-size:clamp(40px,4.6vw,64px); font-weight:800; line-height:1; white-space:nowrap;} #sr2026 .sr-tile .sr-cap{font-size:clamp(14px,1.35vw,18px); font-weight:500; max-width:86%;} #sr2026 .sr-tile--text .sr-cap{font-weight:500; font-size:clamp(13px,1.2vw,16px); max-width:90%;} /* ---------- 4. innovation ---------- */ #sr2026 .sr-innov{background:var(--grey);} #sr2026 .sr-innov h2{color:var(--blue); font-size:clamp(30px,3.8vw,50px);} #sr2026 .sr-circle{width:min(460px,100%); aspect-ratio:1/1; border-radius:50%; object-fit:cover; margin:0 auto;} /* ---------- 5. progress with purpose ---------- */ #sr2026 .sr-progress{background:var(--blue); color:#fff;} #sr2026 .sr-progress h2{color:#fff; font-size:clamp(34px,4.2vw,56px);} #sr2026 .sr-cover{width:100%; max-width:430px; margin:0; border-radius:6px; /* left-aligned to the gutter, fills the column */ box-shadow:0 18px 40px rgba(0,0,0,.28);} /* ---------- 6-9. pillars ---------- Each pillar = full-bleed photo on the RIGHT blending into the colored band, with text on a constrained left block (same motif as hero/CEO). */ #sr2026 .sr-pillar h2{font-size:clamp(36px,4.6vw,62px);} #sr2026 .sr-pillar-text{max-width:540px; position:relative; z-index:1;} #sr2026 .sr-people{color:var(--ink); background:var(--peri-b) right top/cover no-repeat; background-image:url('/-/media/sustainability/2026/images/people.jpg');} #sr2026 .sr-people h2{color:var(--blue);} #sr2026 .sr-planet{color:#fff; background:var(--green) center top/cover no-repeat; /* dark-green overlay kept: white text sits over the leaf, so the scrim is needed for legibility */ background-image:linear-gradient(90deg,rgba(2,40,6,.92) 0%,rgba(2,40,6,.6) 55%,rgba(2,40,6,.15) 100%),url('/-/media/sustainability/2026/images/planet-leaf.jpg');} #sr2026 .sr-planet h2{color:#fff;} #sr2026 .sr-community{color:#fff; background:var(--amber) right top/cover no-repeat; background-image:url('/-/media/sustainability/2026/images/community.jpg');} #sr2026 .sr-community h2{color:#fff;} #sr2026 .sr-business{color:#fff; background:var(--black) right top/cover no-repeat; background-image:url('/-/media/sustainability/2026/images/business.jpg');} #sr2026 .sr-business h2{color:#fff;} /* ---------- 10. awards ---------- */ #sr2026 .sr-awards{background:var(--grey); text-align:center;} #sr2026 .sr-awards h2{color:var(--blue); font-size:clamp(32px,4.2vw,54px);} #sr2026 .sr-awards > .sr-inner > p{max-width:780px; margin:0 auto 56px;} #sr2026 .sr-cards{display:flex; gap:30px; text-align:left;} #sr2026 .sr-card{flex:1 1 0; background:#fff; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 10px 30px rgba(0,0,0,.07);} #sr2026 .sr-card img{width:100%; height:190px; object-fit:cover;} #sr2026 .sr-card-body{padding:26px 26px 30px; display:flex; flex-direction:column; flex:1;} #sr2026 .sr-card h3{color:var(--blue); font-size:22px; font-weight:700; margin:0 0 14px;} #sr2026 .sr-card p{font-size:15px; flex:1;} #sr2026 .sr-card .sr-btn{align-self:center; margin-top:8px;} /* ---------- 11. looking ahead ---------- */ #sr2026 .sr-ahead{background:var(--blue); color:#fff;} #sr2026 .sr-ahead h2{color:#fff; font-size:clamp(36px,4.6vw,62px);} /* 2026 large at left, stretched flush from the top of 2025 to the bottom of 2024; 2025 + 2024 smaller, stacked at right */ #sr2026 .sr-reports{display:grid; grid-template-columns:2.2fr 1fr; gap:16px 20px; align-items:stretch; max-width:560px; margin-inline:auto;} #sr2026 .sr-report{text-align:center;} #sr2026 .sr-report a{display:block;} #sr2026 .sr-report img{width:100%; border-radius:4px; box-shadow:0 12px 28px rgba(0,0,0,.3);} #sr2026 .sr-report:nth-child(1){grid-column:1; grid-row:1 / 3; display:flex; flex-direction:column;} /* 2026 */ #sr2026 .sr-report:nth-child(1) a{flex:1 1 auto; min-height:0;} #sr2026 .sr-report:nth-child(1) img{height:100%; object-fit:cover;} /* fill the spanned height; crop slightly rather than distort */ #sr2026 .sr-report:nth-child(2){grid-column:2; grid-row:1;} /* 2025 */ #sr2026 .sr-report:nth-child(3){grid-column:2; grid-row:2;} /* 2024 */ #sr2026 .sr-report:nth-child(3) img{box-shadow:0 0 0 1.5px rgba(255,255,255,.8),0 12px 28px rgba(0,0,0,.3);} /* white ring so the all-blue 2024 cover doesn't blend into the band */ #sr2026 .sr-report span{display:block; margin-top:10px; font-weight:700;} #sr2026 .sr-tagline{font-weight:800; font-size:clamp(24px,2.4vw,34px); line-height:1.15; margin:8px 0 0;} /* ---------- responsive ---------- Strategy: fluid by default (clamp/vw/flex). Three structural breakpoints: ~1100px (tighten desktop spacing), 860px (stack two-column bands & cards), 480px (small-phone scale-down). */ /* laptop / portrait tablet — tighten spacing before anything stacks */ @media (max-width:1100px){ #sr2026 .sr-band{padding:80px 24px;} #sr2026 .sr-cols{gap:44px;} #sr2026 .sr-cards{gap:22px;} } /* phones & portrait tablets — single column */ @media (max-width:860px){ #sr2026{--section-min:auto;} /* natural section heights on mobile (no forced full-viewport) */ #sr2026 .sr-dots{display:none;} /* hide the dot rail on mobile */ #sr2026 .sr-band{padding:64px 20px;} /* floating menu button */ #sr2026 .sr-menu-toggle{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; position:fixed; right:16px; bottom:16px; z-index:70; width:52px; height:52px; border:0; border-radius:50%; background:var(--blue); cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.32);} #sr2026 .sr-menu-toggle span{display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .2s ease, opacity .2s ease;} #sr2026 .sr-menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} #sr2026 .sr-menu-toggle.open span:nth-child(2){opacity:0;} #sr2026 .sr-menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* full-screen overlay menu */ #sr2026 .sr-menu{display:flex; flex-direction:column; position:fixed; inset:0; z-index:65; background:rgba(0,76,171,.98); padding:76px 28px 40px; overflow-y:auto; opacity:0; pointer-events:none; transition:opacity .2s ease;} #sr2026 .sr-menu.open{opacity:1; pointer-events:auto;} #sr2026 .sr-menu a{color:#fff; text-decoration:none; font-weight:700; font-size:18px; line-height:1.2; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.16);} #sr2026 .sr-menu a.active{color:var(--sky);} #sr2026 .sr-cols,#sr2026 .sr-cols.sr-mirror{flex-direction:column; gap:36px; align-items:stretch;} /* full-width stacked columns so children (e.g. report covers) center cleanly */ #sr2026 .sr-cols > div{width:100%;} /* explicit full width so .sr-reports can center its covers */ #sr2026 .sr-planet > div{max-width:none;} /* let Planet text run full width */ #sr2026 .sr-cards{flex-direction:column;} #sr2026 .sr-card{flex:0 0 auto;} /* size to content height; flex-basis:0 would collapse them in a column */ #sr2026 .sr-card img{height:210px;} #sr2026 .sr-tile{width:min(250px,72vw);} /* circles stacked on mobile; sized so the text circle still fits */ #sr2026 .sr-hero{min-height:64vh; background-image:linear-gradient(180deg,rgba(223,236,253,.92),rgba(223,236,253,.5)),url('/-/media/sustainability/2026/images/hero-lab.jpg');} /* pillars: strong color wash over the photo so single-column text stays readable */ #sr2026 .sr-pillar-text{max-width:none;} #sr2026 .sr-people{background-position:center top; background-image:linear-gradient(180deg,rgba(223,236,253,.93),rgba(174,195,251,.93)),url('/-/media/sustainability/2026/images/people.jpg');} #sr2026 .sr-planet{background-position:center top; background-image:linear-gradient(180deg,rgba(2,40,6,.82),rgba(2,40,6,.92)),url('/-/media/sustainability/2026/images/planet-leaf.jpg');} #sr2026 .sr-community{background-position:center top; background-image:linear-gradient(180deg,rgba(254,189,3,.93),rgba(254,189,3,.93)),url('/-/media/sustainability/2026/images/community.jpg');} #sr2026 .sr-business{background-position:center top; background-image:linear-gradient(180deg,rgba(1,1,1,.86),rgba(1,1,1,.92)),url('/-/media/sustainability/2026/images/business.jpg');} #sr2026 .sr-header{padding:12px 18px; flex-wrap:wrap; gap:10px 16px;} #sr2026 .sr-header-right{gap:14px; flex-wrap:wrap;} #sr2026 .sr-reports{justify-content:center;} /* center section CTA buttons (header button unaffected) */ #sr2026 .sr-band .sr-btn{display:block; width:fit-content; margin-left:auto; margin-right:auto;} /* down-arrow flows below the content (no overlap on natural-height sections); position:relative keeps it in flow AND anchors the ::after chevron inside the circle */ #sr2026 .sr-down{position:relative; left:auto; bottom:auto; display:block; margin:28px auto 0; transform:none;} #sr2026 .sr-down:hover{transform:translateY(3px);} } /* small phones — scale down type, padding & chrome (clamp() mins don't go this low) */ @media (max-width:480px){ #sr2026 .sr-band{padding:52px 16px;} #sr2026 .sr-hero h1{font-size:40px;} #sr2026 .sr-hero .sr-sub{font-size:22px;} #sr2026 .sr-tile .sr-num{font-size:40px;} #sr2026 .sr-btn{font-size:15px; padding:14px 22px;} #sr2026 .sr-logo img{height:38px;} #sr2026 .sr-down{margin-top:28px;} }