/* ========================================================= about-premium.css — About-only luxury + width control (v2.5) Requires: Load AFTER assets/css/styles.css Notes: - Keeps your width rules (no global page width change) - Adds premium micro-interactions + better hierarchy - ✅ Uniform hover glow across ALL cards (no straight-line sheen) - ✅ Objectives arrows/chevrons now match Index collaboration notes (gold2) ========================================================= */ body.page-about{ /* Use existing palette */ --ab-bg: var(--bg, #06110D); --ab-bg2: var(--bg2, #071812); --ab-text: var(--text, #F4F0E8); --ab-muted: var(--muted, rgba(244,240,232,.72)); --ab-line: var(--line, rgba(244,240,232,.10)); --ab-line-strong: var(--line-strong, rgba(244,240,232,.14)); --ab-gold: var(--gold, #C9A227); --ab-gold2: var(--gold2, #E1C76A); --ab-emerald: var(--emerald, #1F8A70); --ab-shadow: var(--shadow, 0 18px 46px rgba(0,0,0,.48)); --ab-shadow-soft: var(--shadow-soft, 0 10px 26px rgba(0,0,0,.34)); /* Premium tokens */ --ab-radius: 18px; --ab-radius-lg: 26px; --ab-blur: 12px; --ab-ease: cubic-bezier(.2,.8,.2,1); color: var(--ab-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Smooth scroll (respect reduced motion) */ body.page-about{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ body.page-about{ scroll-behavior: auto; } body.page-about *, body.page-about *::before, body.page-about *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Nice focus */ body.page-about :focus-visible{ outline: none; box-shadow: 0 0 0 .22rem rgba(201,162,39,.18); border-radius: 12px; } /* Link polish */ body.page-about a{ color: var(--ab-gold2); text-decoration-thickness: 1px; text-underline-offset: .18em; } body.page-about a:hover{ color: var(--ab-gold2); text-decoration-thickness: 2px; } /* ========================================================= BOOTSTRAP THEME BRIDGE (about-only) ========================================================= */ body.page-about{ --bs-body-bg: var(--ab-bg); --bs-body-color: var(--ab-text); --bs-secondary-color: var(--ab-muted); --bs-border-color: var(--ab-line); --bs-tertiary-bg: rgba(244,240,232,.03); --bs-primary: var(--ab-gold); --bs-link-color: var(--ab-gold2); --bs-link-hover-color: var(--ab-gold2); --bs-border-radius: 1rem; --bs-border-radius-lg: 1.25rem; } /* ========================================================= WIDTH CONTROL (page default) ✅ Keep: width: min(1200px, calc(100% - 48px)); ========================================================= */ body.page-about .container, body.page-about .container-wide{ width: min(1200px, calc(100% - 48px)); margin-left: auto; margin-right: auto; max-width: none; /* override Bootstrap max-width */ padding-left: 0; /* width already accounts for 48px total */ padding-right: 0; } /* ONLY this section wider (your option A) */ body.page-about #assurance > .container{ width: min(1320px, calc(100% - 48px)); } /* ========================================================= SECTION RHYTHM (premium bands) ========================================================= */ body.page-about .section{ position: relative; padding: 92px 0; border-top: 1px solid var(--ab-line); background: transparent; } /* soft “museum lighting” */ body.page-about .section::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(244,240,232,.018), rgba(244,240,232,0) 58%), radial-gradient(820px 420px at 10% -10%, rgba(201,162,39,.050), transparent 62%), radial-gradient(860px 440px at 110% 0%, rgba(31,138,112,.040), transparent 62%); opacity: 1; } body.page-about .section.alt{ background: rgba(244,240,232,.008); } body.page-about .toc-band.section{ padding: 56px 0; } /* Ensure content sits above section sheen */ body.page-about .section > .container, body.page-about .section > .container-wide{ position: relative; z-index: 1; } /* Better anchor behavior when jumping */ body.page-about section[id]{ scroll-margin-top: 96px; } /* ========================================================= TYPO + HEADERS ========================================================= */ body.page-about .section-head{ max-width: 860px; } body.page-about .section-head h2{ position: relative; padding-bottom: 12px; letter-spacing: .01em; } body.page-about .section-head h2::after{ content:""; position:absolute; left: 0; bottom: 0; width: 84px; height: 1px; background: linear-gradient(90deg, rgba(201,162,39,.85), rgba(201,162,39,0)); } /* make “lead” feel more editorial */ body.page-about .lead{ line-height: 1.75; color: rgba(244,240,232,.86); } /* Tiny label (your hero badge uses .badge) */ body.page-about .hero .badge{ display: inline-flex; align-items: center; gap: 8px; padding: .45rem .70rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(244,240,232,.88); letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; } /* ========================================================= BUTTONS — quiet luxury (tight + consistent) ========================================================= */ body.page-about .btn{ border-radius: 999px; letter-spacing: .01em; box-shadow: none; transition: transform .16s var(--ab-ease), filter .16s var(--ab-ease), border-color .16s var(--ab-ease), background-color .16s var(--ab-ease); } body.page-about .btn:hover{ transform: translateY(-1px); } body.page-about .btn:active{ transform: translateY(0); } body.page-about .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-about .btn-primary:hover{ border-color: rgba(201,162,39,.70); filter: brightness(1.03); } body.page-about .btn-secondary{ background: rgba(244,240,232,.04); border: 1px solid rgba(244,240,232,.16); color: rgba(244,240,232,.92); } body.page-about .btn-secondary:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); } body.page-about .btn-outline{ background: transparent; border: 1px solid rgba(244,240,232,.20); color: rgba(244,240,232,.92); } body.page-about .btn-outline:hover{ border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.08); color: rgba(244,240,232,.96); } body.page-about .btn-ghost{ background: rgba(244,240,232,.03); border: 1px solid rgba(244,240,232,.14); color: rgba(244,240,232,.92); } body.page-about .btn-ghost:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); } /* ========================================================= CARDS — premium gradient border + calmer shadow ========================================================= */ body.page-about .card.luxe{ position: relative; border-radius: var(--ab-radius-lg); 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 18px 48px rgba(0,0,0,.28); overflow: hidden; } /* subtle “rim light” */ body.page-about .card.luxe::before{ content:""; position:absolute; inset:-1px; pointer-events:none; background: radial-gradient(640px 260px at 12% 0%, rgba(201,162,39,.12), transparent 62%), radial-gradient(640px 260px at 112% 10%, rgba(31,138,112,.08), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)); opacity: .75; } body.page-about .toc-wrap.card.luxe{ background: radial-gradient(720px 240px at 12% 0%, rgba(201,162,39,.09), transparent 60%), radial-gradient(720px 240px at 112% 10%, rgba(31,138,112,.06), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02)); } body.page-about .ab-card-lite{ background: linear-gradient(180deg, rgba(244,240,232,.05), rgba(244,240,232,.018)) !important; box-shadow: 0 16px 44px rgba(0,0,0,.24); border-radius: var(--ab-radius-lg); } /* ========================================================= HERO — premium overlay + better hero-card ========================================================= */ body.page-about .hero.hero--plain{ position: relative; overflow: hidden; } body.page-about .hero.hero--plain::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(980px 460px at 18% 0%, rgba(201,162,39,.12), transparent 62%), radial-gradient(980px 460px at 92% 0%, rgba(31,138,112,.10), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.015), rgba(244,240,232,0) 55%); opacity: 1; } body.page-about .hero.hero--plain > *{ position: relative; z-index: 1; } /* Hero “At a glance” card (your aside uses hero-card--premium) */ body.page-about .hero-card--premium{ position: relative; border-radius: 28px; border: 1px solid rgba(244,240,232,.14); background: radial-gradient(760px 320px at 12% 0%, rgba(201,162,39,.10), transparent 62%), radial-gradient(760px 320px at 112% 10%, rgba(31,138,112,.08), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02)); box-shadow: 0 26px 72px rgba(0,0,0,.34); overflow: hidden; } body.page-about .hero-card--premium .kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; color: rgba(244,240,232,.70); margin-bottom: 10px; } body.page-about .hero-card--premium .card-title{ margin: 0 0 10px; color: rgba(244,240,232,.95); } body.page-about .hero-card--premium .card-sub{ color: rgba(244,240,232,.78); line-height: 1.65; } /* Stat strip */ body.page-about .stat-strip{ margin-top: 18px; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } body.page-about .stat{ border-radius: 16px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); padding: .70rem .80rem; } body.page-about .stat-num{ display:block; font-weight: 900; color: rgba(244,240,232,.95); } body.page-about .stat-label{ display:block; font-size: .85rem; color: rgba(244,240,232,.70); } /* ========================================================= TOC — links feel more premium + interactive ========================================================= */ body.page-about .toc-head .kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; color: rgba(244,240,232,.68); } body.page-about .toc-grid{ margin-top: 14px; display: grid; gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); } body.page-about .toc-link{ position: relative; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: .75rem .85rem; border-radius: 18px; text-decoration: none; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); color: rgba(244,240,232,.90); transition: transform .16s var(--ab-ease), border-color .16s var(--ab-ease), background-color .16s var(--ab-ease); } body.page-about .toc-link:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.30); background: rgba(244,240,232,.03); text-decoration: none; } body.page-about .toc-k{ font-weight: 950; letter-spacing: .12em; font-size: .78rem; color: rgba(201,162,39,.90); } body.page-about .toc-v{ font-weight: 850; color: rgba(244,240,232,.92); } /* ========================================================= PREMIUM EDITORIAL BLOCKS ========================================================= */ body.page-about .ab-split{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: start; } body.page-about .ab-split--tight{ grid-template-columns: 1.05fr .95fr; } body.page-about .ab-h3{ margin: 0 0 10px 0; color: rgba(244,240,232,.92); } body.page-about .ab-kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .74rem; color: rgba(244,240,232,.68); margin-bottom: 12px; } body.page-about .ab-rule{ height: 1px; background: linear-gradient(90deg, rgba(244,240,232,.22), rgba(201,162,39,.30), rgba(244,240,232,.08), rgba(244,240,232,0) ); margin: 16px 0; } /* Pills */ body.page-about .pill-row{ display:flex; flex-wrap: wrap; gap: 10px; } body.page-about .pill{ padding: .50rem .70rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(244,240,232,.86); font-weight: 800; font-size: .92rem; } /* ========================================================= FACTS GRID ========================================================= */ body.page-about .ab-fact{ padding: .85rem .9rem; border-radius: 16px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); } body.page-about .ab-fact dt{ font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,240,232,.72); margin-bottom: .25rem; } body.page-about .ab-fact dd{ margin: 0; color: rgba(244,240,232,.92); font-weight: 800; line-height: 1.45; } body.page-about .ab-facts-grid{ margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ========================================================= OBJECTIVES ========================================================= */ body.page-about .ab-objectives{ border-top: 1px solid rgba(244,240,232,.10); border-bottom: 1px solid rgba(244,240,232,.10); padding: 18px 0; /* ✅ Match Index “collaboration notes” arrow color */ --obj-arrow: var(--ab-gold2); } /* ✅ If objectives are normal lists */ body.page-about .ab-objectives li::marker{ color: var(--obj-arrow); } /* ✅ If objectives use pseudo-element arrows (li::before) */ body.page-about .ab-objectives li::before{ color: var(--obj-arrow); } /* ✅ If objectives use inline arrow spans / bootstrap icons */ body.page-about .ab-objectives .ab-arrow, body.page-about .ab-objectives .obj-arrow, body.page-about .ab-objectives .arrow, body.page-about .ab-objectives .bi{ color: var(--obj-arrow) !important; } /* ✅ If objectives use SVG icons */ body.page-about .ab-objectives svg{ color: var(--obj-arrow); } body.page-about .ab-objectives svg [stroke]{ stroke: currentColor; } body.page-about .ab-objectives svg [fill="currentColor"]{ fill: currentColor; } /* ✅ Objectives accordion chevrons (Bootstrap) — match gold2 */ body.page-about #objectivesAcc{ --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E1C76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 6.5l6 6 6-6'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E1C76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1.5 6.5l6 6 6-6'/%3e%3c/svg%3e"); } body.page-about #objectivesAcc .accordion-button::after{ opacity: .92; } body.page-about #objectivesAcc .accordion-button:not(.collapsed)::after{ opacity: 1; } body.page-about .ab-highlight{ border-radius: 20px; padding: 1rem 1.05rem; border: 1px solid rgba(244,240,232,.14); background: linear-gradient(180deg, rgba(244,240,232,.08), rgba(244,240,232,.03)); box-shadow: 0 18px 54px rgba(0,0,0,.24); position: relative; overflow: hidden; } body.page-about .ab-highlight::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(560px 240px at 15% 0%, rgba(201,162,39,.10), transparent 62%), radial-gradient(560px 240px at 115% 10%, rgba(31,138,112,.07), transparent 62%); opacity: .9; } body.page-about .ab-highlight p{ position: relative; z-index: 1; margin: 0; color: rgba(244,240,232,.92); line-height: 1.78; font-weight: 700; } body.page-about .ab-two{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; align-items: start; } /* Objectives chips */ body.page-about .ab-obj-meta{ position: relative; z-index: 1; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; } body.page-about .ab-chip{ padding: .55rem .75rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(244,240,232,.88); font-weight: 850; font-size: .92rem; } body.page-about .ab-theme-list{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; color: rgba(244,240,232,.80); } body.page-about .ab-theme-dot{ display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 999px; background: radial-gradient(circle at 30% 30%, rgba(244,240,232,.55), rgba(201,162,39,.92)); border: 1px solid rgba(244,240,232,.14); box-shadow: 0 12px 22px rgba(0,0,0,.22); vertical-align: middle; } body.page-about .ab-obj-note{ margin-top: 14px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); border-radius: 16px; padding: .85rem .9rem; color: rgba(244,240,232,.88); line-height: 1.55; } /* ========================================================= ACCORDION polish (cleaner + premium) ========================================================= */ body.page-about .accordion-item{ background: rgba(244,240,232,.02); border-color: var(--ab-line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.16); } body.page-about .accordion-item + .accordion-item{ margin-top: 10px; } body.page-about .accordion-button{ background: transparent; color: var(--ab-text); padding-top: 1rem; padding-bottom: 1rem; font-weight: 900; letter-spacing: .01em; } body.page-about .accordion-button:not(.collapsed){ background: radial-gradient(560px 220px at 14% 0%, rgba(201,162,39,.10), transparent 62%), rgba(244,240,232,.02); color: var(--ab-text); box-shadow: none; } body.page-about .accordion-button:focus{ box-shadow: 0 0 0 .2rem rgba(201,162,39,.18); } body.page-about .accordion-body{ color: var(--ab-muted); line-height: 1.75; background: rgba(0,0,0,.10); } /* ========================================================= Media frame ========================================================= */ body.page-about .ix-media{ position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(244,240,232,.14); background: radial-gradient(640px 240px at 20% 0%, rgba(201,162,39,.11), transparent 60%), rgba(244,240,232,.02); box-shadow: var(--ab-shadow-soft); transform: translateY(0); transition: transform .22s var(--ab-ease), border-color .22s var(--ab-ease); } body.page-about .ix-media:hover{ transform: translateY(-2px); border-color: rgba(201,162,39,.26); } body.page-about .ix-media::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.18) 65%, rgba(0,0,0,.40)); opacity: .78; } body.page-about .ix-img{ width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(1.05) contrast(1.03); transform: scale(1.02); transition: transform .35s var(--ab-ease); } body.page-about .ix-media:hover .ix-img{ transform: scale(1.05); } body.page-about .ix-caption{ position: absolute; left: 12px; right: 12px; bottom: 10px; padding: .6rem .75rem; border-radius: 14px; border: 1px solid rgba(244,240,232,.14); background: rgba(6,17,13,.55); backdrop-filter: blur(var(--ab-blur)); color: rgba(244,240,232,.92); font-weight: 800; font-size: .92rem; z-index: 2; } body.page-about .ix-pos-b{ object-position: center 55%; } /* ========================================================= FULL-WIDTH HERO + QUICK NAV (TOC) ========================================================= */ body.page-about .hero.hero--plain > .container, body.page-about .toc-band.section > .container{ width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; } @media (max-width: 560px){ body.page-about .hero.hero--plain > .container, body.page-about .toc-band.section > .container{ padding-left: 18px !important; padding-right: 18px !important; } } /* ========================================================= GOVERNANCE & FUNDING (combined section styles) ========================================================= */ body.page-about .ab-gf{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; } @media (min-width: 992px){ body.page-about .ab-gf-side{ position: sticky; top: 96px; align-self: start; } } body.page-about .ab-gf-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } body.page-about .ab-gf-panel{ border-radius: 22px; border: 1px solid rgba(244,240,232,.12); background: radial-gradient(760px 280px at 10% 0%, rgba(201,162,39,.08), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02)); box-shadow: 0 20px 54px rgba(0,0,0,.26); padding: 1rem 1.05rem 1.1rem; } body.page-about .ab-keylist, body.page-about .ab-checklist{ margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: rgba(244,240,232,.82); line-height: 1.6; } body.page-about .ab-checklist li{ position: relative; padding-left: 28px; } body.page-about .ab-checklist li::before{ content:"✓"; position:absolute; left:0; top:0; width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(201,162,39,.92); font-weight: 900; } body.page-about .ab-actions-row{ margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } body.page-about .ab-gf-strip{ margin-top: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid rgba(244,240,232,.10); } body.page-about .ab-gf-chip{ padding: .65rem .7rem; border-radius: 16px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); color: rgba(244,240,232,.86); font-weight: 850; text-align: center; font-size: .92rem; } body.page-about .ab-gf-downloads{ margin-top: 12px; display: grid; gap: 10px; } body.page-about .ab-pill-link{ display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: .78rem .88rem; border-radius: 16px; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.04); color: rgba(244,240,232,.90); font-weight: 900; text-decoration: none; transition: transform .16s var(--ab-ease), border-color .16s var(--ab-ease), background-color .16s var(--ab-ease); } body.page-about .ab-pill-link::after{ content:"→"; opacity: .70; transform: translateX(0); transition: transform .16s var(--ab-ease), opacity .16s var(--ab-ease); } body.page-about .ab-pill-link:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); transform: translateY(-1px); text-decoration: none; } body.page-about .ab-pill-link:hover::after{ opacity: 1; transform: translateX(2px); } body.page-about .ab-gf-quote{ margin-top: 12px; border: 1px solid rgba(244,240,232,.12); background: radial-gradient(740px 260px at 10% 0%, rgba(201,162,39,.07), transparent 62%), rgba(244,240,232,.02); border-radius: 18px; padding: 1rem 1.05rem; } body.page-about .ab-gf-quote p{ margin: 0 0 .35rem; font-weight: 900; color: rgba(244,240,232,.92); } /* ========================================================= ACTIVITIES — current markup ========================================================= */ body.page-about #activities .ab-activities-wrap{ position: relative; z-index: 2; } body.page-about #activities .ab-activities-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } body.page-about #activities .ab-activity-card{ position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; border: 1px solid rgba(244,240,232,.12); background: radial-gradient(760px 280px at 10% 0%, rgba(201,162,39,.08), transparent 62%), linear-gradient(180deg, rgba(244,240,232,.06), rgba(244,240,232,.02)); box-shadow: 0 22px 62px rgba(0,0,0,.30); transform: translateY(0); transition: transform .18s var(--ab-ease), border-color .18s var(--ab-ease), box-shadow .18s var(--ab-ease), filter .18s var(--ab-ease); display: flex; flex-direction: column; } body.page-about #activities .ab-activity-card:hover{ transform: translateY(-2px); border-color: rgba(201,162,39,.26); box-shadow: 0 30px 84px rgba(0,0,0,.34); filter: brightness(1.02); } body.page-about #activities .ab-activity-media{ position: relative; margin: 0; height: 190px; overflow: hidden; border-bottom: 1px solid rgba(244,240,232,.10); } body.page-about #activities .ab-activity-img{ width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(1.06) contrast(1.04); transform: scale(1.03); transition: transform .35s var(--ab-ease); } body.page-about #activities .ab-activity-card:hover .ab-activity-img{ transform: scale(1.06); } body.page-about #activities .ab-activity-media::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(560px 240px at 14% 0%, rgba(201,162,39,.18), transparent 62%), radial-gradient(560px 240px at 112% 10%, rgba(31,138,112,.12), transparent 62%), linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.42)); opacity: .95; } body.page-about #activities .ab-activity-caption{ position: absolute; left: 12px; bottom: 10px; z-index: 2; padding: .45rem .7rem; border-radius: 999px; border: 1px solid rgba(244,240,232,.14); background: rgba(6,17,13,.55); backdrop-filter: blur(var(--ab-blur)); color: rgba(244,240,232,.92); font-weight: 950; letter-spacing: .14em; text-transform: uppercase; font-size: .70rem; } body.page-about #activities .ab-activity-body{ padding: 1rem 1.05rem 1.15rem; display: flex; flex-direction: column; flex: 1; } body.page-about #activities .ab-activity-kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; color: rgba(201,162,39,.86); font-weight: 950; margin-bottom: 8px; } body.page-about #activities .ab-activity-body h3{ margin: 0 0 10px 0; color: rgba(244,240,232,.96); } body.page-about #activities .ab-activity-body p{ margin: 0 0 12px; } body.page-about #activities .ab-ticks{ list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: rgba(244,240,232,.80); line-height: 1.6; } body.page-about #activities .ab-ticks li{ position: relative; padding-left: 28px; } body.page-about #activities .ab-ticks li::before{ content:"✓"; position:absolute; left:0; top:0; width: 20px; height: 20px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.03); color: rgba(201,162,39,.92); font-weight: 950; } body.page-about #activities .ab-activity-actions{ margin-top: auto; padding-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; } body.page-about #activities .ab-activity-footnote{ margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(244,240,232,.10); } body.page-about #activities .ab-pos-a{ object-position: center 35%; } body.page-about #activities .ab-pos-b{ object-position: center 55%; } body.page-about #activities .ab-pos-c{ object-position: center 20%; } body.page-about #activities .grid-3{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px !important; margin-top: 18px; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 980px){ body.page-about .section{ padding: 74px 0; } body.page-about .toc-band.section{ padding: 44px 0; } body.page-about .ab-split, body.page-about .ab-two{ grid-template-columns: 1fr; } body.page-about .ab-facts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-about .toc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-about .ab-gf{ grid-template-columns: 1fr; } body.page-about .ab-gf-cols{ grid-template-columns: 1fr; } body.page-about .ab-gf-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-about .stat-strip{ grid-template-columns: 1fr; } body.page-about #activities .ab-activities-grid{ grid-template-columns: 1fr; } body.page-about #activities .ab-activity-media{ height: 220px; } } @media (max-width: 560px){ body.page-about .ab-facts-grid{ grid-template-columns: 1fr; } body.page-about .ab-gf-strip{ grid-template-columns: 1fr; } } /* ========================================================= PREMIUM ADDITIONS - Scroll progress bar (.ab-progress) - TOC active state (.toc-link.is-active) - Back-to-top button (.ab-top) - Grain texture + uniform card glow ========================================================= */ /* ✅ Scroll progress bar */ body.page-about .ab-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-about .ab-progress > span{ display: block; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(201,162,39,.95), rgba(31,138,112,.55)); } /* ✅ TOC active state (for IntersectionObserver JS) */ body.page-about .toc-link.is-active{ border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.10); transform: translateY(-1px); } body.page-about .toc-link.is-active .toc-k{ color: rgba(201,162,39,.98); } body.page-about .toc-link.is-active::before{ content:""; position:absolute; left: 10px; top: 50%; width: 6px; height: 6px; border-radius: 999px; transform: translateY(-50%); background: rgba(201,162,39,.95); box-shadow: 0 0 0 6px rgba(201,162,39,.12); } /* ✅ Back to top button */ body.page-about .ab-top{ position: fixed; right: 18px; bottom: 18px; 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(--ab-ease), transform .2s var(--ab-ease), border-color .2s var(--ab-ease), background-color .2s var(--ab-ease); } body.page-about .ab-top.is-show{ opacity: 1; pointer-events: auto; transform: translateY(0); } body.page-about .ab-top:hover{ border-color: rgba(201,162,39,.35); background: rgba(6,17,13,.62); } /* ✅ Ultra-subtle grain overlay (premium print feel) */ body.page-about .section::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"); } /* ========================================================= ✅ UNIFORM CARD HOVER GLOW (NO straight line) ========================================================= */ body.page-about .hero-card--premium, body.page-about .card.luxe, body.page-about #activities .ab-activity-card, body.page-about .ab-highlight, body.page-about .ab-gf-panel, body.page-about .ab-fact, body.page-about .toc-link, body.page-about .accordion-item{ position: relative; overflow: hidden; isolation: isolate; } body.page-about .hero-card--premium::after, body.page-about .card.luxe::after, body.page-about #activities .ab-activity-card::after, body.page-about .ab-highlight::after, body.page-about .ab-gf-panel::after, body.page-about .ab-fact::after, body.page-about .toc-link::after, body.page-about .accordion-item::after{ content:""; position:absolute; inset:-45% -40%; pointer-events:none; background: radial-gradient(120% 70% at 10% 38%, rgba(244,240,232,.08) 0%, rgba(201,162,39,.14) 26%, rgba(244,240,232,.06) 44%, rgba(244,240,232,0) 70%); opacity: 0; transform: translateX(-24%) rotate(8deg); mix-blend-mode: overlay; transition: opacity .22s var(--ab-ease), transform .55s var(--ab-ease); } body.page-about .hero-card--premium:hover::after, body.page-about .card.luxe:hover::after, body.page-about #activities .ab-activity-card:hover::after, body.page-about .ab-highlight:hover::after, body.page-about .ab-gf-panel:hover::after, body.page-about .ab-fact:hover::after, body.page-about .toc-link:hover::after, body.page-about .accordion-item:hover::after{ opacity: .92; transform: translateX(10%) rotate(8deg); } @media (hover: none){ body.page-about .hero-card--premium:hover::after, body.page-about .card.luxe:hover::after, body.page-about #activities .ab-activity-card:hover::after, body.page-about .ab-highlight:hover::after, body.page-about .ab-gf-panel:hover::after, body.page-about .ab-fact:hover::after, body.page-about .toc-link:hover::after, body.page-about .accordion-item:hover::after{ opacity: .55; transform: translateX(2%) rotate(8deg); } }