/* ========================================================= programs-premium.css — CADECT Programs page luxury (v1.4) Requires: Load AFTER assets/css/styles.css v1.4 upgrades: ✅ Programs Overview premium block ✅ Mission statement + donation use breakdown ✅ Scenic dividers between sections ✅ Sticky action rail (desktop) ✅ Current Programs slider (snap + controls) ========================================================= */ body.page-programs{ --px-bg: var(--bg, #06110D); --px-bg2: var(--bg2, #071812); --px-surface: var(--surface, rgba(244,240,232,.05)); --px-surface2: var(--surface2, rgba(244,240,232,.08)); --px-text: var(--text, #F4F0E8); --px-muted: var(--muted, rgba(244,240,232,.72)); --px-line: var(--line, rgba(244,240,232,.10)); --px-line-strong: var(--line-strong, rgba(244,240,232,.14)); --px-gold: var(--gold, #C9A227); --px-gold2: var(--gold2, #E1C76A); --px-emerald: var(--emerald, #1F8A70); --px-shadow: var(--shadow, 0 18px 46px rgba(0,0,0,.48)); --px-shadow-soft: var(--shadow-soft, 0 10px 26px rgba(0,0,0,.34)); --px-radius: 18px; --px-radius-lg: 26px; --px-ease: cubic-bezier(.2,.8,.2,1); color: var(--px-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ body.page-programs{ scroll-behavior: auto; } body.page-programs *, body.page-programs *::before, body.page-programs *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } body.page-programs :focus-visible{ outline: none; box-shadow: 0 0 0 .22rem rgba(201,162,39,.18); border-radius: 12px; } body.page-programs section[id]{ scroll-margin-top: 96px; } /* Keep page width untouched; only applies to this page if container-wide exists */ body.page-programs .container-wide{ width: min(1200px, calc(100% - 48px)); margin: 0 auto; } /* ========================================================= LINKS ========================================================= */ body.page-programs a{ text-decoration-thickness: 1px; text-underline-offset: .18em; } body.page-programs a:not(.btn):not(.toc-link){ color: var(--px-gold2) !important; text-decoration-color: rgba(225,199,106,.55); } body.page-programs a:not(.btn):not(.toc-link):hover{ color: var(--px-gold2) !important; text-decoration-thickness: 2px; text-decoration-color: rgba(225,199,106,.85); } /* ========================================================= BUTTONS ========================================================= */ body.page-programs .btn{ border-radius: 999px; letter-spacing: .01em; text-decoration: none !important; transition: transform .16s var(--px-ease), filter .16s var(--px-ease), border-color .16s var(--px-ease), background-color .16s var(--px-ease); } body.page-programs .btn:hover{ transform: translateY(-1px); } body.page-programs .btn:active{ transform: translateY(0); } body.page-programs .btn-primary{ background: radial-gradient(520px 220px at 18% 0%, rgba(201,162,39,.30), rgba(201,162,39,.10) 55%, rgba(201,162,39,.06)), linear-gradient(180deg, rgba(201,162,39,.18), rgba(201,162,39,.08)); border: 1px solid rgba(201,162,39,.52); color: rgba(244,240,232,.96); } body.page-programs .btn-primary:hover{ border-color: rgba(201,162,39,.70); filter: brightness(1.03); } body.page-programs .btn-secondary{ background: linear-gradient(180deg, rgba(244,240,232,.07), rgba(244,240,232,.03)); border: 1px solid rgba(244,240,232,.18); color: rgba(244,240,232,.95); } body.page-programs .btn-secondary:hover{ background: linear-gradient(180deg, rgba(244,240,232,.09), rgba(244,240,232,.04)); border-color: rgba(201,162,39,.22); } body.page-programs .btn-outline{ background: transparent; border: 1px solid rgba(244,240,232,.18); color: rgba(244,240,232,.92); } body.page-programs .btn-outline:hover{ border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.08); color: rgba(244,240,232,.96); } body.page-programs .btn-ghost{ background: rgba(244,240,232,.03); border: 1px solid rgba(244,240,232,.12); color: rgba(244,240,232,.92); } body.page-programs .btn-ghost:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); } /* ========================================================= HERO background (assets/css -> ../img/) ========================================================= */ body.page-programs .hero-bg{ background: linear-gradient(180deg, rgba(6,17,13,.62), rgba(6,17,13,.92)), radial-gradient(900px 420px at 18% 0%, rgba(201,162,39,.12), transparent 60%), radial-gradient(900px 420px at 92% 0%, rgba(31,138,112,.10), transparent 60%), url("../img/hero.jpg"); background-size: cover; background-position: center; } body.page-programs .px-hero{ position: relative; overflow: hidden; } body.page-programs .px-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(980px 460px at 18% 0%, rgba(201,162,39,.10), transparent 62%), radial-gradient(980px 460px at 92% 0%, rgba(31,138,112,.08), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.015), rgba(244,240,232,0) 55%); z-index: 1; } body.page-programs .px-hero > *{ position: relative; z-index: 2; } /* ========================================================= PREMIUM SECTION HEAD ========================================================= */ body.page-programs .px-head{ margin-bottom: 22px; } body.page-programs .px-kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .74rem; color: rgba(244,240,232,.68); margin-bottom: 10px; } body.page-programs .px-title{ font-size: clamp(1.65rem, 2.4vw, 2.25rem); line-height: 1.10; margin: 0 0 10px 0; color: rgba(244,240,232,.96); } body.page-programs .px-lead{ margin: 0; max-width: 78ch; color: rgba(244,240,232,.72); line-height: 1.78; } body.page-programs .px-divider{ height: 1px; background: linear-gradient(90deg, rgba(244,240,232,.22), rgba(201,162,39,.28), rgba(244,240,232,.08), rgba(244,240,232,0) ); margin-top: 14px; } /* ========================================================= SECTION LIGHTING + SUBTLE GRAIN ========================================================= */ body.page-programs .px-section, body.page-programs .section, body.page-programs .cta-band{ position: relative; border-top: 1px solid var(--px-line); } body.page-programs .px-section::before, body.page-programs .section::before, body.page-programs .cta-band::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(244,240,232,.018), rgba(244,240,232,0) 55%), radial-gradient(780px 420px at 10% -10%, rgba(201,162,39,.045), transparent 62%), radial-gradient(820px 420px at 110% 0%, rgba(31,138,112,.035), transparent 62%); } body.page-programs .px-section::after, body.page-programs .section::after, body.page-programs .cta-band::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } body.page-programs .px-section > .container, body.page-programs .px-section > .container-wide, body.page-programs .section > .container, body.page-programs .section > .container-wide, body.page-programs .cta-band > .container{ position: relative; z-index: 1; } /* ========================================================= SCENIC DIVIDERS ========================================================= */ body.page-programs .px-scenic{ width: min(1100px, calc(100% - 48px)); margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 12px 0; opacity: .95; } body.page-programs .px-scenic span{ height: 1px; flex: 1 1 auto; background: linear-gradient(90deg, rgba(244,240,232,0), rgba(244,240,232,.18), rgba(201,162,39,.26), rgba(244,240,232,.10), rgba(244,240,232,0)); } body.page-programs .px-scenic i{ width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(201,162,39,.22); background: rgba(201,162,39,.08); color: rgba(244,240,232,.92); } /* ========================================================= TOC BASE (kept) ========================================================= */ body.page-programs .px-toc{ border: 1px solid rgba(244,240,232,.14); background: radial-gradient(650px 260px at 12% 0%, rgba(201,162,39,.08), transparent 60%), linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02)); box-shadow: 0 16px 40px rgba(0,0,0,.28); border-radius: 20px; } body.page-programs .toc-link{ border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); border-radius: 16px; text-decoration: none !important; transition: transform .16s var(--px-ease), border-color .16s var(--px-ease), background-color .16s var(--px-ease); } body.page-programs .toc-link:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.22); background: rgba(201,162,39,.06); } body.page-programs .toc-link.is-active{ border-color: rgba(201,162,39,.55); background: radial-gradient(420px 140px at 20% 0%, rgba(201,162,39,.16), rgba(201,162,39,.06) 60%, rgba(201,162,39,.03)), rgba(244,240,232,.02); } /* ========================================================= HERO PROOF + EVIDENCE ========================================================= */ body.page-programs .px-proof-strip{ margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } body.page-programs .px-proof{ display: flex; gap: 10px; align-items: flex-start; padding: .80rem .85rem; border-radius: 16px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); box-shadow: 0 10px 24px rgba(0,0,0,.18); } body.page-programs .px-proof-ic{ width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(201,162,39,.22); background: rgba(201,162,39,.08); color: rgba(244,240,232,.95); flex: 0 0 auto; } body.page-programs .px-proof-title{ font-weight: 900; color: rgba(244,240,232,.95); line-height: 1.2; } body.page-programs .px-proof-sub{ color: rgba(244,240,232,.72); font-size: .90rem; line-height: 1.35; margin-top: 2px; } body.page-programs .px-evidence{ margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; } body.page-programs .px-evidence-pill{ display: inline-flex; align-items: center; gap: 8px; padding: .55rem .75rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); color: rgba(244,240,232,.88) !important; text-decoration: none !important; } body.page-programs .px-evidence-pill:hover{ border-color: rgba(201,162,39,.28); background: rgba(201,162,39,.07); } body.page-programs .px-logo-wall{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; } body.page-programs .px-logo-wall span{ padding: .50rem .70rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.04); color: rgba(244,240,232,.86); font-weight: 800; font-size: .90rem; } /* ========================================================= PREMIUM CARDS ========================================================= */ body.page-programs .card.luxe, body.page-programs .step.card.luxe{ position: relative; overflow: hidden; border-radius: 18px; border: 1px solid rgba(244,240,232,.12); background: linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02)); box-shadow: 0 14px 34px rgba(0,0,0,.22); transition: transform .18s var(--px-ease), border-color .18s var(--px-ease), filter .18s var(--px-ease); isolation: isolate; } body.page-programs .card.luxe::before, body.page-programs .step.card.luxe::before{ content:""; position:absolute; inset:-1px; pointer-events:none; background: radial-gradient(700px 260px at 14% 0%, rgba(201,162,39,.10), transparent 62%), radial-gradient(700px 260px at 112% 10%, rgba(31,138,112,.06), transparent 62%); opacity: .95; } body.page-programs .card.luxe:hover, body.page-programs .step.card.luxe:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.22); filter: brightness(1.01); } body.page-programs .card.luxe::after, body.page-programs .step.card.luxe::after{ content:""; position:absolute; inset:-1px; pointer-events:none; opacity:0; transition: opacity .25s var(--px-ease); background: linear-gradient(115deg, transparent 0%, rgba(244,240,232,.06) 18%, rgba(201,162,39,.10) 34%, rgba(244,240,232,.06) 52%, transparent 70%); transform: translateX(-18%); } body.page-programs .card.luxe:hover::after, body.page-programs .step.card.luxe:hover::after{ opacity:.85; } body.page-programs .px-card-top, body.page-programs .px-program-top, body.page-programs .px-download-top{ display:flex; gap: 12px; align-items:flex-start; margin-bottom: 10px; } body.page-programs .px-ic{ width: 44px; height: 44px; border-radius: 999px; display:grid; place-items:center; border: 1px solid rgba(201,162,39,.22); background: rgba(201,162,39,.08); color: rgba(244,240,232,.95); flex: 0 0 auto; margin-top: 2px; } body.page-programs .px-chips{ display:flex; flex-wrap:wrap; gap: 10px; margin: 12px 0 0; } body.page-programs .px-chip{ border: 1px solid rgba(244,240,232,.12); color: rgba(244,240,232,.74); padding: 7px 11px; border-radius: 999px; background: rgba(244,240,232,.02); font-weight: 800; font-size: .86rem; } /* Better lists */ body.page-programs .px-list{ list-style: none; padding-left: 0; margin: 0; display: grid; gap: 10px; color: rgba(244,240,232,.78); line-height: 1.55; } body.page-programs .px-list li{ position: relative; padding-left: 28px; } body.page-programs .px-list li::before{ content:""; position:absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 999px; border: 1px solid rgba(201,162,39,.28); background: rgba(201,162,39,.10); } body.page-programs .px-list li::after{ content:""; position:absolute; left: 6px; top: .55em; width: 7px; height: 4px; border-left: 2px solid rgba(244,240,232,.92); border-bottom: 2px solid rgba(244,240,232,.92); transform: rotate(-45deg); } body.page-programs .px-note{ background: radial-gradient(650px 260px at 12% 0%, rgba(31,138,112,.06), transparent 60%), linear-gradient(180deg, rgba(244,240,232,.05), rgba(244,240,232,.02)); } body.page-programs .px-download{ display:block; text-decoration:none !important; } body.page-programs .px-arrow{ display:inline-flex; align-items:center; gap: 8px; margin-top: 10px; color: rgba(244,240,232,.88); font-weight: 850; } /* ========================================================= PROGRAM OVERVIEW (TOC band) — premium upgrade ========================================================= */ body.page-programs .px-overview{ padding: 1.15rem 1.1rem; } body.page-programs .px-overview-grid{ display: grid; grid-template-columns: 1.25fr .75fr; gap: 14px; align-items: start; } body.page-programs .px-overview-title{ margin: .15rem 0 .4rem; font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1.12; color: rgba(244,240,232,.96); } body.page-programs .px-overview-sub{ margin: 0 0 .75rem; max-width: 70ch; line-height: 1.75; } body.page-programs .px-overview-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin: .55rem 0 .75rem; } /* Mission statement */ body.page-programs .px-mission{ display:flex; gap: 12px; align-items:flex-start; padding: .85rem .9rem; border-radius: 18px; border: 1px solid rgba(201,162,39,.22); background: radial-gradient(520px 220px at 18% 0%, rgba(201,162,39,.14), rgba(201,162,39,.05) 60%, rgba(244,240,232,.02)), rgba(244,240,232,.03); box-shadow: 0 14px 34px rgba(0,0,0,.22); margin: .55rem 0 .65rem; } body.page-programs .px-mission-ic{ width: 38px; height: 38px; border-radius: 999px; display:grid; place-items:center; border: 1px solid rgba(201,162,39,.28); background: rgba(201,162,39,.10); color: rgba(244,240,232,.95); flex: 0 0 auto; } body.page-programs .px-mission-kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; color: rgba(244,240,232,.70); margin-bottom: 4px; } body.page-programs .px-mission-text{ color: rgba(244,240,232,.92); line-height: 1.55; font-weight: 700; } /* Bullets */ body.page-programs .px-overview-bullets{ display: grid; gap: 10px; margin-top: .35rem; } body.page-programs .px-bullet{ display: flex; gap: 10px; align-items: flex-start; padding: .75rem .8rem; border-radius: 16px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); } body.page-programs .px-bullet-ic{ width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(201,162,39,.22); background: rgba(201,162,39,.08); color: rgba(244,240,232,.92); flex: 0 0 auto; margin-top: 2px; } body.page-programs .px-bullet-title{ font-weight: 900; color: rgba(244,240,232,.95); line-height: 1.2; } body.page-programs .px-bullet-sub{ margin-top: 2px; color: rgba(244,240,232,.72); font-size: .92rem; line-height: 1.4; } /* Facts panel */ body.page-programs .px-overview-side{ display: grid; gap: 10px; } body.page-programs .px-fact{ display: flex; gap: 10px; align-items: flex-start; padding: .85rem .9rem; border-radius: 18px; border: 1px solid rgba(244,240,232,.12); background: radial-gradient(520px 220px at 18% 0%, rgba(244,240,232,.04), rgba(244,240,232,.02)), rgba(244,240,232,.03); box-shadow: 0 12px 30px rgba(0,0,0,.22); } body.page-programs .px-fact-ic{ width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; border: 1px solid rgba(201,162,39,.22); background: rgba(201,162,39,.08); color: rgba(244,240,232,.92); flex: 0 0 auto; } body.page-programs .px-fact-title{ font-weight: 950; color: rgba(244,240,232,.95); line-height: 1.2; } body.page-programs .px-fact-sub{ margin-top: 2px; color: rgba(244,240,232,.72); font-size: .92rem; line-height: 1.4; } body.page-programs .px-fact--gold{ border-color: rgba(201,162,39,.28); background: radial-gradient(520px 220px at 18% 0%, rgba(201,162,39,.14), rgba(201,162,39,.05) 60%, rgba(244,240,232,.02)), rgba(244,240,232,.03); } /* Donation use mini breakdown */ body.page-programs .px-funds{ margin-top: 2px; padding: .95rem .95rem; border-radius: 20px; border: 1px solid rgba(244,240,232,.12); background: radial-gradient(650px 260px at 12% 0%, rgba(31,138,112,.05), transparent 60%), linear-gradient(180deg, rgba(244,240,232,.05), rgba(244,240,232,.02)); box-shadow: 0 14px 34px rgba(0,0,0,.22); } body.page-programs .px-funds-title{ font-weight: 950; color: rgba(244,240,232,.95); line-height: 1.2; } body.page-programs .px-funds-sub{ margin-top: 2px; color: rgba(244,240,232,.70); font-size: .90rem; line-height: 1.4; } body.page-programs .px-funds-grid{ display: grid; gap: 10px; margin-top: 10px; } body.page-programs .px-fund{ padding: .75rem .8rem; border-radius: 16px; border: 1px solid rgba(244,240,232,.10); background: rgba(244,240,232,.03); } body.page-programs .px-fund-top{ display:flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } body.page-programs .px-fund-pct{ font-weight: 950; color: rgba(244,240,232,.95); letter-spacing: .01em; } body.page-programs .px-fund-label{ font-weight: 850; color: rgba(244,240,232,.88); } body.page-programs .px-fund-bar{ height: 8px; border-radius: 999px; background: rgba(244,240,232,.08); border: 1px solid rgba(244,240,232,.10); overflow: hidden; } body.page-programs .px-fund-bar span{ display:block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(201,162,39,.92), rgba(31,138,112,.45)); } body.page-programs .px-fund-note{ margin-top: 6px; color: rgba(244,240,232,.70); font-size: .90rem; line-height: 1.35; } body.page-programs .px-funds-cta{ margin-top: 10px; display:grid; gap: 10px; } /* Overview nav grid */ body.page-programs .px-overview-nav{ margin-top: 12px; display: grid; gap: 10px; } body.page-programs .px-overview .toc-link{ border-radius: 16px; } /* ========================================================= IMPACT SNAPSHOT ========================================================= */ body.page-programs .px-impact-grid{ margin-top: 14px; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } body.page-programs .px-impact-card{ position: relative; overflow: hidden; display:flex; gap: 12px; align-items:flex-start; padding: 1rem 1.05rem; border-radius: 18px; border: 1px solid rgba(244,240,232,.12); background: linear-gradient(180deg, rgba(244,240,232,.07), rgba(244,240,232,.02)); box-shadow: 0 14px 34px rgba(0,0,0,.22); transition: transform .18s var(--px-ease), border-color .18s var(--px-ease), filter .18s var(--px-ease); isolation:isolate; } body.page-programs .px-impact-card::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(560px 240px at 18% 0%, rgba(201,162,39,.10), transparent 60%), radial-gradient(560px 240px at 110% 10%, rgba(31,138,112,.06), transparent 60%); opacity:.95; } body.page-programs .px-impact-card:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.22); filter: brightness(1.01); } body.page-programs .px-impact-ic{ width: 44px; height: 44px; border-radius: 999px; display:grid; place-items:center; border: 1px solid rgba(201,162,39,.22); background: rgba(201,162,39,.08); color: rgba(244,240,232,.95); flex:0 0 auto; position: relative; z-index:1; } body.page-programs .px-impact-body{ position: relative; z-index:1; } body.page-programs .px-impact-num{ font-weight: 950; color: rgba(244,240,232,.96); line-height: 1.2; letter-spacing: .01em; } body.page-programs .px-impact-label{ margin-top: 4px; color: rgba(244,240,232,.72); line-height: 1.45; font-size: .95rem; } body.page-programs .px-impact-foot{ margin-top: 14px; display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; } body.page-programs .px-impact-actions{ display:flex; gap: 10px; flex-wrap: wrap; } /* ========================================================= CURRENT PROGRAMS SLIDER ========================================================= */ body.page-programs .px-slider{ position: relative; } body.page-programs .px-slider-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin: 12px 0 10px; } body.page-programs .px-slider-controls{ display:flex; gap: 10px; } body.page-programs .px-arrowbtn{ width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(244,240,232,.16); background: rgba(6,17,13,.45); color: rgba(244,240,232,.92); display:grid; place-items:center; box-shadow: 0 14px 34px rgba(0,0,0,.22); transition: transform .16s var(--px-ease), border-color .16s var(--px-ease), background-color .16s var(--px-ease); } body.page-programs .px-arrowbtn:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.28); background: rgba(201,162,39,.08); } body.page-programs .px-track{ display:flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } body.page-programs .px-track::-webkit-scrollbar{ height: 8px; } body.page-programs .px-track::-webkit-scrollbar-thumb{ background: rgba(244,240,232,.12); border-radius: 999px; } body.page-programs .px-program{ min-width: 340px; scroll-snap-align: start; } body.page-programs .px-program-foot{ margin-top: 14px; display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap: wrap; } body.page-programs .px-loc{ color: rgba(244,240,232,.72); font-weight: 800; display:inline-flex; align-items:center; gap: 6px; } /* ========================================================= MICRO UX: progress + top + mini nav + target flash ========================================================= */ body.page-programs .px-progress{ position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 9999; background: rgba(244,240,232,.06); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(244,240,232,.10); } body.page-programs .px-progress > span{ display:block; width: 0%; height: 100%; background: linear-gradient(90deg, rgba(201,162,39,.95), rgba(31,138,112,.55)); } body.page-programs .px-top{ position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 9998; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(244,240,232,.16); background: rgba(6,17,13,.55); backdrop-filter: blur(10px); color: rgba(244,240,232,.92); font-weight: 950; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s var(--px-ease), transform .2s var(--px-ease), border-color .2s var(--px-ease), background-color .2s var(--px-ease); } body.page-programs .px-top.is-show{ opacity: 1; pointer-events: auto; transform: translateY(0); } body.page-programs .px-top:hover{ border-color: rgba(201,162,39,.35); background: rgba(6,17,13,.62); } body.page-programs section:target{ animation: pxTargetFlash 900ms cubic-bezier(.2,.8,.2,1); border-radius: 18px; } @keyframes pxTargetFlash{ 0% { box-shadow: 0 0 0 0 rgba(201,162,39,.0); } 25% { box-shadow: 0 0 0 10px rgba(201,162,39,.14); } 100% { box-shadow: 0 0 0 0 rgba(201,162,39,.0); } } body.page-programs .px-mininav{ position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); z-index: 9997; display:flex; gap: 8px; align-items:center; padding: 10px 10px; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(6,17,13,.55); backdrop-filter: blur(10px); box-shadow: 0 14px 38px rgba(0,0,0,.30); opacity: 0; pointer-events: none; transition: opacity .2s var(--px-ease), transform .2s var(--px-ease), border-color .2s var(--px-ease), background-color .2s var(--px-ease); } body.page-programs .px-mininav.is-show{ opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } body.page-programs .px-mininav a{ display:inline-flex; align-items:center; justify-content:center; padding: 8px 12px; border-radius: 999px; text-decoration:none !important; font-weight: 800; font-size: .88rem; color: rgba(244,240,232,.88); border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); transition: transform .16s var(--px-ease), border-color .16s var(--px-ease), background-color .16s var(--px-ease), color .16s var(--px-ease); } body.page-programs .px-mininav a:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.28); background: rgba(201,162,39,.08); color: rgba(244,240,232,.95); } body.page-programs .px-mininav a.is-active{ border-color: rgba(201,162,39,.55); background: radial-gradient(420px 140px at 20% 0%, rgba(201,162,39,.18), rgba(201,162,39,.06) 60%, rgba(201,162,39,.04)), rgba(244,240,232,.03); color: rgba(244,240,232,.96); } /* ========================================================= STICKY ACTION RAIL ========================================================= */ body.page-programs .px-rail{ position: fixed; right: 16px; top: 50%; transform: translateY(-50%) translateX(10px); z-index: 9996; display: grid; gap: 10px; opacity: 0; pointer-events: none; padding: 10px; border-radius: 18px; border: 1px solid rgba(244,240,232,.12); background: rgba(6,17,13,.50); backdrop-filter: blur(10px); box-shadow: 0 16px 42px rgba(0,0,0,.35); transition: opacity .2s var(--px-ease), transform .2s var(--px-ease); } body.page-programs .px-rail.is-show{ opacity: 1; pointer-events: auto; transform: translateY(-50%) translateX(0); } body.page-programs .px-rail-btn{ display:flex; align-items:center; gap: 10px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(244,240,232,.90) !important; text-decoration:none !important; font-weight: 900; transition: transform .16s var(--px-ease), border-color .16s var(--px-ease), background-color .16s var(--px-ease); } body.page-programs .px-rail-btn i{ width: 30px; height: 30px; border-radius: 999px; display:grid; place-items:center; border: 1px solid rgba(201,162,39,.22); background: rgba(201,162,39,.08); } body.page-programs .px-rail-btn:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.26); background: rgba(201,162,39,.07); } body.page-programs .px-rail-btn.is-primary{ border-color: rgba(201,162,39,.48); background: radial-gradient(420px 140px at 20% 0%, rgba(201,162,39,.18), rgba(201,162,39,.08) 60%, rgba(201,162,39,.05)), rgba(244,240,232,.03); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 1100px){ body.page-programs .px-rail{ display:none; } } @media (max-width: 980px){ body.page-programs .px-proof-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-programs .px-impact-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-programs .px-program{ min-width: 320px; } body.page-programs .px-overview-grid{ grid-template-columns: 1fr; } } @media (max-width: 560px){ body.page-programs .container-wide{ width: min(1200px, calc(100% - 28px)); } body.page-programs .px-proof-strip{ grid-template-columns: 1fr; } body.page-programs .px-impact-grid{ grid-template-columns: 1fr; } body.page-programs .px-mininav{ max-width: calc(100% - 90px); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.page-programs .px-mininav::-webkit-scrollbar{ display:none; } body.page-programs .px-scenic{ width: min(1100px, calc(100% - 28px)); } } /* Touch devices: reduce hover transforms */ @media (hover: none){ body.page-programs .btn:hover{ transform:none; } body.page-programs .card.luxe:hover, body.page-programs .step.card.luxe:hover{ transform:none; } body.page-programs .px-impact-card:hover{ transform:none; } body.page-programs .px-rail-btn:hover{ transform:none; } }