/* ========================================================= index-premium.css — Index-only luxury + Bootstrap bridge (v3.1) Requires: Load AFTER assets/css/styles.css Updates in v3.1: ✅ FIXED Hero card hover sheen: soft “spotlight” glow that fades (no straight line) ✅ Keeps Trust Downloads (Bootstrap row/col) + Partners sub-section row + Impact, etc. ========================================================= */ body.page-index{ /* Use your existing palette (no new colors) */ --ix-bg: var(--bg, #06110D); --ix-bg2: var(--bg2, #071812); --ix-surface: var(--surface, rgba(244,240,232,.05)); --ix-surface2: var(--surface2, rgba(244,240,232,.08)); --ix-text: var(--text, #F4F0E8); --ix-muted: var(--muted, rgba(244,240,232,.72)); --ix-line: var(--line, rgba(244,240,232,.10)); --ix-line-strong: var(--line-strong, rgba(244,240,232,.14)); --ix-gold: var(--gold, #C9A227); --ix-gold2: var(--gold2, #E1C76A); --ix-emerald: var(--emerald, #1F8A70); --ix-shadow: var(--shadow, 0 18px 46px rgba(0,0,0,.48)); --ix-shadow-soft: var(--shadow-soft, 0 10px 26px rgba(0,0,0,.34)); /* Premium tokens */ --ix-radius: 18px; --ix-radius-lg: 26px; --ix-blur: 12px; --ix-ease: cubic-bezier(.2,.8,.2,1); /* Bootstrap theme bridge (index-only) */ --bs-body-bg: var(--ix-bg); --bs-body-color: var(--ix-text); --bs-secondary-color: var(--ix-muted); --bs-border-color: var(--ix-line); --bs-tertiary-bg: rgba(244,240,232,.03); --bs-primary: var(--ix-gold); --bs-link-color: var(--ix-gold2); --bs-link-hover-color: var(--ix-gold2); --bs-border-radius: 1rem; --bs-border-radius-lg: 1.25rem; color: var(--ix-text); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } /* Smooth scroll (respect reduced motion) */ @media (prefers-reduced-motion: reduce){ body.page-index{ scroll-behavior: auto; } body.page-index *, body.page-index *::before, body.page-index *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Premium focus ring */ body.page-index :focus-visible{ outline: none; box-shadow: 0 0 0 .22rem rgba(201,162,39,.18); border-radius: 12px; } /* Better anchor jumping (header/hero doesn’t cover section titles) */ body.page-index section[id]{ scroll-margin-top: 96px; } /* ========================================================= ✅ LINKS = YELLOW (match About) ========================================================= */ body.page-index a{ text-decoration-thickness: 1px; text-underline-offset: .18em; } /* Make standard links yellow (exclude buttons so they keep button colors) */ body.page-index a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-outline-primary):not(.btn-outline):not(.btn-ghost){ color: var(--ix-gold2) !important; text-decoration-color: rgba(225,199,106,.55); } body.page-index a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-outline-primary):not(.btn-outline):not(.btn-ghost):hover{ color: var(--ix-gold2) !important; text-decoration-thickness: 2px; text-decoration-color: rgba(225,199,106,.85); } /* Optional: muted links still readable */ body.page-index a.muted, body.page-index .muted a{ color: rgba(225,199,106,.82) !important; text-decoration-color: rgba(225,199,106,.45); } /* ========================================================= BUTTONS (quiet luxury) ========================================================= */ body.page-index .btn{ border-radius: 999px; letter-spacing: .01em; box-shadow: none; transition: transform .16s var(--ix-ease), filter .16s var(--ix-ease), border-color .16s var(--ix-ease), background-color .16s var(--ix-ease); text-decoration: none !important; /* prevent underline from link styles */ } body.page-index .btn:hover{ transform: translateY(-1px); } body.page-index .btn:active{ transform: translateY(0); } /* Bootstrap .btn-primary */ body.page-index .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-index .btn-primary:hover{ border-color: rgba(201,162,39,.70); filter: brightness(1.03); } /* Bootstrap .btn-secondary (used in hero card) */ body.page-index .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-index .btn-secondary:hover{ background: linear-gradient(180deg, rgba(244,240,232,.09), rgba(244,240,232,.04)); border-color: rgba(201,162,39,.22); } /* Bootstrap .btn-outline-primary */ body.page-index .btn-outline-primary{ border-color: rgba(201,162,39,.40); color: rgba(244,240,232,.92); } body.page-index .btn-outline-primary:hover{ background: rgba(201,162,39,.10); border-color: rgba(201,162,39,.55); color: rgba(244,240,232,.96); } /* Your site buttons used in markup (.btn-outline / .btn-ghost) — index-only polish */ body.page-index .btn-outline{ background: transparent; border: 1px solid rgba(244,240,232,.18); color: rgba(244,240,232,.92); } body.page-index .btn-outline:hover{ border-color: rgba(201,162,39,.45); background: rgba(201,162,39,.08); color: rgba(244,240,232,.96); } body.page-index .btn-ghost{ background: rgba(244,240,232,.03); border: 1px solid rgba(244,240,232,.12); color: rgba(244,240,232,.92); } body.page-index .btn-ghost:hover{ border-color: rgba(201,162,39,.35); background: rgba(244,240,232,.05); } /* ========================================================= HERO BG FIX (when CSS lives in assets/css/) ========================================================= */ body.page-index .hero-bg{ background: linear-gradient(180deg, rgba(6,17,13,.68), 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; } /* Extra “museum lighting” overlay on hero */ body.page-index .hero.hero--image{ position: relative; overflow: hidden; } body.page-index .hero.hero--image::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%); opacity: 1; z-index: 1; } body.page-index .hero.hero--image > *{ position: relative; z-index: 2; } /* Premium badge in hero */ body.page-index .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; } /* Hero card */ body.page-index .hero-card--premium{ border-radius: var(--ix-radius-lg); border: 1px solid rgba(244,240,232,.14); background: radial-gradient(650px 260px at 12% 0%, rgba(201,162,39,.10), transparent 60%), linear-gradient(180deg, rgba(244,240,232,.07), rgba(244,240,232,.02)); box-shadow: 0 18px 44px rgba(0,0,0,.30); backdrop-filter: blur(var(--ix-blur)); position: relative; /* needed for hero card sheen */ overflow: hidden; /* keeps sheen inside the glass */ } /* Backdrop-filter fallback */ @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){ body.page-index .hero-card--premium{ background: rgba(6,17,13,.78); } } /* ========================================================= ✅ HERO TRUST PROOF STRIP ========================================================= */ body.page-index .ix-proof-strip{ margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } body.page-index .ix-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-index .ix-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); font-weight: 900; flex: 0 0 auto; } body.page-index .ix-proof-title{ font-weight: 900; color: rgba(244,240,232,.95); line-height: 1.2; } body.page-index .ix-proof-sub{ color: rgba(244,240,232,.72); font-size: .90rem; line-height: 1.35; margin-top: 2px; } /* ========================================================= SECTION RHYTHM — apply About-style to Index sections too ========================================================= */ body.page-index .ix-section, body.page-index .section, body.page-index .donate, body.page-index .cta-band{ position: relative; padding: 92px 0; border-top: 1px solid var(--ix-line); background: transparent; } /* museum lighting */ body.page-index .ix-section::before, body.page-index .section::before, body.page-index .donate::before, body.page-index .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%); opacity: 1; } /* ultra-subtle grain */ body.page-index .ix-section::after, body.page-index .section::after, body.page-index .donate::after, body.page-index .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"); } /* Ensure content stays above lighting layers */ body.page-index .ix-wrap, body.page-index .section > .container, body.page-index .donate .container, body.page-index .cta-band .container{ position: relative; z-index: 1; } body.page-index .ix-wrap{ width: min(1200px, calc(100% - 48px)); margin: 0 auto; } body.page-index .ix-head{ margin-bottom: 28px; } body.page-index .ix-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: 16px 0; } /* About-style underline on .section-head titles too */ body.page-index .section-head h2{ position: relative; padding-bottom: 12px; } body.page-index .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)); } /* ========================================================= TYPOGRAPHY ========================================================= */ body.page-index .ix-kicker{ letter-spacing: .18em; text-transform: uppercase; font-size: .74rem; color: rgba(244,240,232,.68); margin-bottom: 12px; } body.page-index .ix-title{ font-size: clamp(1.75rem, 2.7vw, 2.45rem); line-height: 1.08; margin: 0 0 12px 0; color: var(--ix-text); position: relative; padding-bottom: 10px; } body.page-index .ix-title::after{ content:""; position:absolute; left: 0; bottom: 0; width: 72px; height: 1px; background: linear-gradient(90deg, rgba(201,162,39,.75), rgba(201,162,39,0)); } body.page-index .ix-lead{ margin: 0; max-width: 78ch; color: var(--ix-muted); line-height: 1.78; } body.page-index .ix-subtitle{ margin: 0 0 12px 0; color: rgba(244,240,232,.92); } /* ========================================================= LINKS + CTA ========================================================= */ body.page-index .ix-actions{ display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 18px; } /* ========================================================= Accordions / list-group = premium glass strips ========================================================= */ body.page-index .accordion-item, body.page-index .list-group-item{ background: rgba(244,240,232,.02); border-color: var(--ix-line); } body.page-index .accordion-item{ border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,.16); transition: transform .18s var(--ix-ease), border-color .18s var(--ix-ease); } body.page-index .accordion-item:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.18); } body.page-index .accordion-item + .accordion-item{ margin-top: 10px; } body.page-index .accordion-button{ background: transparent; color: var(--ix-text); padding-top: 1rem; padding-bottom: 1rem; } body.page-index .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(--ix-text); box-shadow: none; } body.page-index .accordion-button:focus{ box-shadow: 0 0 0 .2rem rgba(201,162,39,.18); } body.page-index .accordion-button::after{ filter: brightness(1.1); opacity: .9; } /* Optional: keep long partner headings readable */ body.page-index #partners .accordion-button{ line-height: 1.28; font-weight: 850; } body.page-index #partners .accordion-body{ color: rgba(244,240,232,.72); line-height: 1.55; } /* ========================================================= LAYOUT SPLIT ========================================================= */ body.page-index .ix-split{ display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; margin-top: 18px; } body.page-index .ix-split--partners{ grid-template-columns: 1fr 1fr; } body.page-index .ix-copy p{ color: var(--ix-muted); line-height: 1.78; margin: 0; } /* ========================================================= CHIPS (About) ========================================================= */ body.page-index .ix-chips{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; } body.page-index .ix-chip{ border: 1px solid rgba(244,240,232,.12); color: rgba(244,240,232,.74); padding: 8px 12px; border-radius: 999px; background: rgba(244,240,232,.02); font-weight: 700; font-size: .88rem; transition: transform .16s var(--ix-ease), border-color .16s var(--ix-ease), background-color .16s var(--ix-ease); } body.page-index .ix-chip:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.18); background: rgba(244,240,232,.03); } /* ========================================================= ABOUT — Mission/Vision LIGHT CARDS + Facts row 4-up ========================================================= */ body.page-index #about .ix-kv-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; } body.page-index #about .ix-litecard{ position: relative; overflow: hidden; border-radius: 18px; 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 14px 34px rgba(0,0,0,.22); } body.page-index #about .ix-litecard::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(520px 220px at 15% 0%, rgba(201,162,39,.09), transparent 60%), radial-gradient(520px 220px at 115% 10%, rgba(31,138,112,.06), transparent 60%); opacity: .9; } body.page-index #about .ix-lite-k{ position: relative; z-index: 1; letter-spacing: .18em; text-transform: uppercase; font-size: .72rem; font-weight: 900; color: rgba(201,162,39,.84); margin-bottom: .55rem; } body.page-index #about .ix-litecard p{ position: relative; z-index: 1; margin: 0; line-height: 1.7; } body.page-index #about .ix-facts-row{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 10px; } body.page-index #about .ix-fact-card{ border-radius: 16px; padding: .95rem .95rem; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); } body.page-index #about .ix-fact-k{ font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,240,232,.72); margin-bottom: .35rem; } body.page-index #about .ix-fact-v{ color: rgba(244,240,232,.92); font-weight: 750; line-height: 1.45; } /* ========================================================= MEDIA FRAMES (images look premium) ========================================================= */ body.page-index .ix-media{ position: relative; border-radius: 18px; overflow: hidden; border: 1px solid rgba(244,240,232,.14); background: radial-gradient(600px 220px at 20% 0%, rgba(201,162,39,.10), transparent 60%), rgba(244,240,232,.02); box-shadow: var(--ix-shadow-soft); transform: translateY(0); transition: transform .22s var(--ix-ease), border-color .22s var(--ix-ease); } body.page-index .ix-media:hover{ transform: translateY(-2px); border-color: rgba(201,162,39,.26); } body.page-index .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,.35)); opacity: .75; } body.page-index .ix-media--tall{ min-height: 340px; } body.page-index .ix-img{ width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(1.03) contrast(1.02); transform: scale(1.02); transition: transform .35s var(--ix-ease); } body.page-index .ix-media:hover .ix-img{ transform: scale(1.05); } /* crops so reusing hero.jpg still looks different */ body.page-index .ix-pos-a{ object-position: center 35%; } body.page-index .ix-pos-b{ object-position: center 55%; } body.page-index .ix-pos-c{ object-position: center 20%; } body.page-index .ix-pos-d{ object-position: center 70%; } body.page-index .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(10px); color: rgba(244,240,232,.92); font-weight: 750; font-size: .9rem; z-index: 2; } /* Backdrop-filter fallback */ @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))){ body.page-index .ix-caption{ background: rgba(6,17,13,.78); } } /* ========================================================= MOSAIC + PHOTO BAND ========================================================= */ body.page-index .ix-mosaic{ margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } body.page-index .ix-mosaic img{ border-radius: 16px; border: 1px solid rgba(244,240,232,.12); box-shadow: 0 12px 26px rgba(0,0,0,.28); height: 120px; object-fit: cover; } body.page-index .ix-photo-band{ margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } body.page-index .ix-photo-band img{ border-radius: 16px; border: 1px solid rgba(244,240,232,.12); height: 132px; object-fit: cover; } /* ========================================================= PARTNERS — wall of names ========================================================= */ body.page-index .ix-logo-wall{ margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; } body.page-index .ix-logo, body.page-index .ix-logo-wall span{ padding: .55rem .75rem; 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: .9rem; } body.page-index .ix-bullets{ margin: 0; padding-left: 1.1rem; color: var(--ix-muted); line-height: 1.75; } body.page-index .ix-bullets li{ margin: .25rem 0; } /* ========================================================= ✅ PARTNERS — Full-width sub-section row (Collaboration notes) ========================================================= */ body.page-index #partners .ix-partners-sub{ margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ix-line, rgba(244,240,232,.10)); } body.page-index #partners .ix-partners-subhead{ display:flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } body.page-index #partners .ix-partners-subgrid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } body.page-index #partners .ix-accordion{ margin: 0; } /* ========================================================= TRUST SECTION ========================================================= */ body.page-index .ix-trust-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } body.page-index .ix-trust-list li{ display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: .85rem .9rem; border-radius: 16px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.03); } body.page-index .ix-trust-ic{ width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(201,162,39,.22); background: rgba(201,162,39,.08); color: rgba(244,240,232,.92); font-weight: 900; } body.page-index .ix-trust-list strong{ display: block; color: rgba(244,240,232,.95); margin-bottom: 2px; } body.page-index .ix-trust-list .muted{ display: block; line-height: 1.55; } /* Quote card */ body.page-index .ix-quote{ margin-top: 12px; padding: 1rem 1.05rem; border-radius: 18px; border: 1px solid rgba(244,240,232,.12); background: radial-gradient(650px 260px at 12% 0%, rgba(201,162,39,.08), transparent 60%), rgba(244,240,232,.02); box-shadow: 0 14px 34px rgba(0,0,0,.22); } body.page-index .ix-quote p{ margin: 0 0 .45rem 0; color: rgba(244,240,232,.92); line-height: 1.65; font-weight: 650; } /* ========================================================= ✅ DOWNLOAD LINKS — Bootstrap friendly (row/col + badge + icons) ========================================================= */ body.page-index .ix-download{ display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: .90rem 1rem; border-radius: 16px; border: 1px solid rgba(244,240,232,.12); background: rgba(244,240,232,.02); color: rgba(244,240,232,.92) !important; text-decoration: none !important; box-shadow: 0 10px 24px rgba(0,0,0,.12); transition: transform .16s var(--ix-ease), border-color .16s var(--ix-ease), background-color .16s var(--ix-ease), filter .16s var(--ix-ease); } /* Remove old arrow — badges are the “right side” UI */ body.page-index .ix-download::after{ content: none !important; } body.page-index .ix-download:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.22); background: rgba(244,240,232,.03); filter: brightness(1.01); } /* Make left label flexible (prevents overflow in col-md-6) */ body.page-index .ix-download > span:first-child{ display: flex; align-items: center; gap: 10px; min-width: 0; } body.page-index .ix-download > span:first-child *{ min-width: 0; } /* Badge: premium chip look, still Bootstrap */ body.page-index .ix-download .badge{ flex: 0 0 auto; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(244,240,232,.14); background: rgba(244,240,232,.06) !important; color: rgba(244,240,232,.88) !important; } /* Icon polish (Bootstrap icons) */ body.page-index .ix-download i.bi{ opacity: .92; font-size: 1.05rem; } /* ========================================================= ✅ IMPACT SNAPSHOT ========================================================= */ body.page-index .ix-impact-grid{ margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } body.page-index .ix-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(--ix-ease), border-color .18s var(--ix-ease), filter .18s var(--ix-ease); isolation: isolate; } body.page-index .ix-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-index .ix-impact-card:hover{ transform: translateY(-1px); border-color: rgba(201,162,39,.22); filter: brightness(1.01); } body.page-index .ix-impact-ic{ width: 42px; height: 42px; 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); font-size: 1.05rem; flex: 0 0 auto; position: relative; z-index: 1; } body.page-index .ix-impact-body{ position: relative; z-index: 1; } body.page-index .ix-impact-num{ font-weight: 950; color: rgba(244,240,232,.96); line-height: 1.2; letter-spacing: .01em; } body.page-index .ix-impact-label{ margin-top: 4px; color: rgba(244,240,232,.72); line-height: 1.45; font-size: .95rem; } body.page-index .ix-impact-foot{ margin-top: 14px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; } body.page-index .ix-impact-foot p{ margin: 0; max-width: 78ch; } /* ========================================================= Delivery strip (premium, no cards) ========================================================= */ body.page-index .ix-delivery{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding-top: 14px; border-top: 1px solid var(--ix-line); } body.page-index .ix-delivery-item{ border-left: 1px solid var(--ix-line); padding-left: 14px; } body.page-index .ix-delivery-item:first-child{ border-left: none; padding-left: 0; } body.page-index .ix-delivery-k{ font-weight: 900; letter-spacing: .12em; color: rgba(201,162,39,.82); font-size: .78rem; } body.page-index .ix-delivery-t{ color: rgba(244,240,232,.92); font-weight: 900; margin-top: 6px; } body.page-index .ix-delivery-d{ color: var(--ix-muted); margin-top: 6px; line-height: 1.55; font-size: .92rem; } /* ========================================================= MICRO-UX (Progress + Back to top) ========================================================= */ body.page-index .ix-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-index .ix-progress > span{ display: block; width: 0%; height: 100%; background: linear-gradient(90deg, rgba(201,162,39,.95), rgba(31,138,112,.55)); } body.page-index .ix-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(--ix-ease), transform .2s var(--ix-ease), border-color .2s var(--ix-ease), background-color .2s var(--ix-ease); } body.page-index .ix-top.is-show{ opacity: 1; pointer-events: auto; transform: translateY(0); } body.page-index .ix-top:hover{ border-color: rgba(201,162,39,.35); background: rgba(6,17,13,.62); } /* ========================================================= ✅ Target flash on anchor jump ========================================================= */ body.page-index section:target{ animation: ixTargetFlash 900ms cubic-bezier(.2,.8,.2,1); border-radius: 18px; } @keyframes ixTargetFlash{ 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); } } /* ========================================================= ✅ Floating mini nav (bottom-center “pill”) ========================================================= */ body.page-index .ix-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(--ix-ease), transform .2s var(--ix-ease), border-color .2s var(--ix-ease), background-color .2s var(--ix-ease); } body.page-index .ix-mininav.is-show{ opacity: 1; pointer-events: auto; transform: translate(-50%, 0); } body.page-index .ix-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(--ix-ease), border-color .16s var(--ix-ease), background-color .16s var(--ix-ease), color .16s var(--ix-ease); } body.page-index .ix-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-index .ix-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); } /* ========================================================= LUXE SHEEN (quiet, premium) NOTE: Hero card uses a custom soft glow (below) to avoid straight-line sheen. ========================================================= */ body.page-index .hero-card--premium, body.page-index .ix-litecard, body.page-index .ix-media, body.page-index .accordion-item, body.page-index .ix-impact-card{ isolation: isolate; } /* Sheen for non-hero components */ body.page-index .ix-litecard::after, body.page-index .ix-media::before, body.page-index .accordion-item::after, body.page-index .ix-impact-card::after{ content:""; position:absolute; inset:-1px; pointer-events:none; opacity:0; transition: opacity .25s var(--ix-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-index .ix-litecard:hover::after, body.page-index .ix-media:hover::before, body.page-index .accordion-item:hover::after, body.page-index .ix-impact-card:hover::after{ opacity:.85; } /* ✅ HERO CARD — Soft “spotlight” glow that fades out (no straight line) */ body.page-index .hero-card--premium::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(--ix-ease), transform .55s var(--ix-ease); } body.page-index .hero-card--premium:hover::after{ opacity: .92; transform: translateX(10%) rotate(8deg); } /* Touch devices: don’t overdo hover transforms */ @media (hover: none){ body.page-index .btn:hover{ transform:none; } body.page-index .accordion-item:hover{ transform:none; } body.page-index .ix-media:hover{ transform:none; } body.page-index .ix-media:hover .ix-img{ transform: scale(1.03); } body.page-index .ix-impact-card:hover{ transform:none; } body.page-index .hero-card--premium:hover::after{ opacity: .55; transform: translateX(2%) rotate(8deg); } } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width: 980px){ body.page-index .ix-split, body.page-index .ix-split--partners, body.page-index .ix-split--programs{ grid-template-columns: 1fr; } body.page-index #about .ix-kv-cards{ grid-template-columns: 1fr; } body.page-index #about .ix-facts-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-index .ix-mosaic{ grid-template-columns: 1fr 1fr; } body.page-index .ix-mosaic img{ height: 140px; } body.page-index .ix-photo-band{ grid-template-columns: 1fr; } body.page-index .ix-photo-band img{ height: 170px; } body.page-index .ix-delivery{ grid-template-columns: repeat(2, minmax(0, 1fr)); } body.page-index .ix-delivery-item:nth-child(odd){ border-left: none; padding-left: 0; } body.page-index .ix-trust-list li{ grid-template-columns: 30px 1fr; } body.page-index .ix-trust-ic{ width: 30px; height: 30px; } body.page-index .ix-proof-strip{ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Impact: 2-up on tablets */ body.page-index .ix-impact-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Partners subgrid stacks */ body.page-index #partners .ix-partners-subgrid{ grid-template-columns: 1fr; } } @media (max-width: 560px){ body.page-index #about .ix-facts-row{ grid-template-columns: 1fr; } body.page-index .ix-delivery{ grid-template-columns: 1fr; } body.page-index .ix-delivery-item{ border-left: none; padding-left: 0; border-top: 1px solid var(--ix-line); padding-top: 12px; } body.page-index .ix-delivery-item:first-child{ border-top: none; padding-top: 0; } body.page-index .ix-wrap{ width: min(1200px, calc(100% - 28px)); } /* proof strip 1-up */ body.page-index .ix-proof-strip{ grid-template-columns: 1fr; } /* Impact: 1-up on phones */ body.page-index .ix-impact-grid{ grid-template-columns: 1fr; } /* keep mini-nav usable */ body.page-index .ix-mininav{ max-width: calc(100% - 90px); /* leaves space for back-to-top */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body.page-index .ix-mininav::-webkit-scrollbar{ display:none; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ body.page-index .ix-mininav, body.page-index .ix-top{ transition: none; } body.page-index .ix-mininav a{ transition: none; } body.page-index section:target{ animation: none; } body.page-index .hero-card--premium::after{ transition: none; transform: none; } } /* ========================================================= FORCE accordion chevron “V” to yellow (#E1C76A) Scope: ONLY .ix-accordion Paste at VERY BOTTOM of your CSS file ========================================================= */ .ix-accordion .accordion-button::after{ /* hard override the icon */ background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2 5l6 6 6-6' fill='none' stroke='%23E1C76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center/var(--bs-accordion-btn-icon-width,1.25rem) no-repeat !important; filter: none !important; opacity: 1 !important; } /* Open state uses same yellow icon (keeps Bootstrap rotation behavior) */ .ix-accordion .accordion-button:not(.collapsed)::after{ background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M2 5l6 6 6-6' fill='none' stroke='%23E1C76A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") center/var(--bs-accordion-btn-icon-width,1.25rem) no-repeat !important; }