@charset "UTF-8"; /* ============================================================================ * SANATAN KUTUMB FOUNDATION — SAFFRON DARK DESIGN SYSTEM * A port of the cyberkul.com cinematic dark system onto the saffron / * sacred-gold palette defined in DESIGN-BRIEF.md ("a temple at dawn, shot * at night"). * * Fonts are loaded from the HTML (one Google Fonts request): * Bebas Neue · Playfair Display · Inter · JetBrains Mono · Tiro Devanagari Hindi * There is NO @import here and no external CSS. No build step. * * FILE MAP * 00 Tokens 18 Timeline / roadmap * 01 Reset & base 19 Process rows * 02 Accessibility primitives 20 Panels: deck · GYAN · ledger * 03 Layout 21 Tables * 04 Typography 22 Forms * 05 Atmosphere & overlays 23 Donation selector * 06 Buttons 24 Badges · pills · trust marks * 07 Brand 25 Gallery + lightbox * 08 Nav & mobile menu 26 QR · callouts · asides * 09 Hero 27 Team / trustee cards * 10 Stat band & counters 28 SDG tiles + modal * 11 Mission cards 29 Legal / long-form pages * 12 Value props 30 Footer * 13 Campaign cards 31 Scroll reveal * 14 Shloka blocks 32 Utilities * 15 Testimonials 33 Legacy compatibility layer * 16 FAQ accordion 34 Responsive * 17 Marquee / ticker 35 Reduced motion · 36 Print * * TWO CONSTANTS MUST STAY IN SYNC WITH THE JS * · testimonial autoplay 6000ms == @keyframes tabFill duration (6s) * · nav solid threshold scrollY > 80 == .nav.is-scrolled * ========================================================================== */ /* ========================================================================== 00 · TOKENS Names and hex values in the first two blocks are verbatim from DESIGN-BRIEF.md §1 and §2. Everything after them is derived. ========================================================================== */ :root{ /* --- Ground & ink (brief §1) --- */ --bg: #0A0705; /* warm near-black page ground */ --bg-2: #14100A; /* raised surface / cards */ --bg-3: #1E1710; /* deeper inset, table stripes */ --ink: #F6EFE4; /* primary warm off-white text */ --ink-dim: #B0A08C; /* muted metadata text */ --hair: rgba(246,239,228,0.12); /* hairline borders */ --hair-2: rgba(246,239,228,0.06); /* --- Accents (brief §1) --- */ --saffron: #FF7A18; /* THE accent */ --saffron-deep: #D4500A; /* fills / pressed states ONLY */ --gold: #E3B23C; /* shlokas, borders, icons */ --ruby: #E2564B; --jade: #2E9E68; --umber: #C08A4E; --saffron-glow: 0 0 24px rgba(255,122,24,0.45); --gold-glow: 0 0 20px rgba(227,178,60,0.35); /* --- Mission accent mapping (brief §1) --- */ --m-edu: var(--saffron); /* Children's education */ --m-nature: var(--jade); /* Himalayan clean-up */ --m-gaushala: var(--umber); /* Gaushala Seva */ --m-temple: var(--ruby); /* Temple preservation */ /* --- Typography (brief §2) --- */ --font-display: 'Bebas Neue', Impact, sans-serif; --font-editorial:'Playfair Display', Georgia, 'Times New Roman', serif; --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-deva: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* ------------------------------------------------------------------ */ /* DERIVED TOKENS — everything below is additive, never contradictory. */ /* ------------------------------------------------------------------ */ /* Extra mission tracks used by the six-pillar grid (derived, not new hues) */ --m-health: var(--ruby); --m-gyan: var(--gold); --m-skill: var(--umber); /* Third ink tier — decorative captions. 5.7:1 on --bg-2, still AA. */ --ink-faint: #9A8B78; /* RGB triplets so every tint is written rgba(var(--x-rgb), a). cyberkul hardcoded its accent in ~30 rgba() calls and paid for it. */ --bg-rgb: 10,7,5; --ink-rgb: 246,239,228; --saffron-rgb: 255,122,24; --saffron-deep-rgb: 212,80,10; --gold-rgb: 227,178,60; --ruby-rgb: 226,86,75; --jade-rgb: 46,158,104; --umber-rgb: 192,138,78; /* Geometry */ --wrap: 1280px; --wrap-tight: 1060px; --measure: 760px; /* long-form reading column */ --gutter: clamp(20px,5vw,64px); --gutter-wide: clamp(20px,8vw,64px); /* mobile menu */ --nav-h: 64px; --section-pad: clamp(72px,11vw,140px); --head-gap: clamp(40px,6vw,72px); /* Spacing scale */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px; --s10:96px; --s11:128px; /* Radii */ --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:99px; /* Elevation */ --sh-xs: 0 6px 14px rgba(0,0,0,.45); --sh-sm: 0 12px 30px rgba(0,0,0,.45); --sh-md: 0 24px 60px rgba(0,0,0,.5); --sh-lg: 0 30px 70px rgba(0,0,0,.55); --sh-nav: 0 8px 30px rgba(0,0,0,.45); /* Z ladder — content 1 · chrome 55-60 · overlays 9997+ */ --z-atmos:0; --z-content:1; --z-hero:4; --z-menu:55; --z-nav:60; --z-progress:9997; --z-fab:9998; --z-modal:9999; /* Motion */ --spring:cubic-bezier(.16,1,.3,1); --dur-xs:.18s; --dur-sm:.25s; --dur:.3s; --dur-md:.45s; --dur-lg:.7s; color-scheme:dark; } /* ========================================================================== 01 · RESET & BASE ========================================================================== */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 24px); } /* Global horizontal-overflow guard — the site must not scroll sideways at 320px */ html,body{ overflow-x:hidden; max-width:100%; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-ui); font-weight:400; font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } @media (min-width:900px){ body{ font-size:17px; } } a{ color:inherit; text-decoration:none; } img,svg,video{ display:block; max-width:100%; } img{ height:auto; } button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; } input,textarea,select{ font:inherit; color:inherit; } h1,h2,h3,h4,h5,h6,p,figure,blockquote{ margin:0; } ul,ol{ margin:0; padding:0; list-style:none; } hr{ border:0; border-top:1px solid var(--hair); margin:0; } strong,b{ font-weight:600; color:var(--ink); } code,kbd,samp{ font-family:var(--font-mono); font-size:.88em; background:rgba(var(--ink-rgb),.05); padding:1px 6px; border-radius:var(--r-xs); } ::selection{ background:rgba(var(--saffron-rgb),.32); color:var(--ink); } /* Devanagari must always render in the Devanagari face, even when a page forgets the .deva class but remembers lang= (brief §2). */ [lang="hi"],[lang="sa"],[lang="hi-IN"]{ font-family:var(--font-deva); } /* ========================================================================== 02 · ACCESSIBILITY PRIMITIVES ========================================================================== */ /* One focus ring, site-wide (brief §4.6) */ :focus-visible{ outline:2px solid var(--saffron); outline-offset:3px; border-radius:2px; } :focus:not(:focus-visible){ outline:none; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Skip link — first in tab order, invisible until focused */ .skip-link{ position:fixed; top:12px; left:12px; z-index:calc(var(--z-modal) + 1); display:inline-block; padding:11px 18px; background:var(--saffron); color:var(--bg); font-family:var(--font-mono); font-size:.76rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; border-radius:var(--r-sm); box-shadow:var(--sh-sm); transform:translateY(-160%); transition:transform var(--dur-sm) var(--spring); } .skip-link:focus,.skip-link:focus-visible{ transform:translateY(0); } /* Anything that must be reachable but visually silent */ [hidden]{ display:none !important; } /* ========================================================================== 03 · LAYOUT ========================================================================== */ .wrap,.container{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); } .wrap--tight,.container.tight{ max-width:var(--wrap-tight); } .wrap--measure{ max-width:var(--measure); } /* Every top-level section: z-index 1 lifts it above .sk-atmosphere (z 0). Omitting this renders the section BEHIND the fixed glow layer. */ .section-pad, .section, .status-strip, .logos, .testimonials, .legal-page, .footer, main,header,footer{ position:relative; z-index:var(--z-content); } .section-pad,.section{ padding:var(--section-pad) 0; } .section-pad--sm,.section.sm{ padding:clamp(48px,7vw,88px) 0; } .section-pad--xs,.section.xs{ padding:clamp(32px,5vw,56px) 0; } .section-pad--flush{ padding-bottom:0; } .section--alt,.section.alt{ background:var(--bg-2); } .section--alt2,.section.alt-2{ background:var(--bg-3); } .section--ruled,.section.bordered{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); } /* Two-column section heading: label + h2 left, supporting paragraph right */ .section-head{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end; margin-bottom:var(--head-gap); } .section-head--center{ grid-template-columns:1fr; justify-items:center; text-align:center; } .section-head--center .body-text{ margin-inline:auto; } /* Legacy heading block (flex, label left / action right) */ .section-top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--s5); margin-bottom:var(--head-gap); } .section-top .left{ display:flex; flex-direction:column; gap:var(--s3); } /* THE HAIRLINE GRID — the 2px gap IS the divider. Cells must be opaque and must never carry their own radius. */ .hair-grid{ display:grid; gap:2px; background:var(--hair); border:1px solid var(--hair); } .hair-grid > *{ background:var(--bg-2); border-radius:0; } .hair-grid--sunken > *{ background:var(--bg); } .hair-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .hair-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .hair-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } /* Generic grids (legacy-compatible names) */ .grid{ display:grid; } .g2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .g4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .g5{ grid-template-columns:repeat(5,minmax(0,1fr)); } .g6{ grid-template-columns:repeat(6,minmax(0,1fr)); } .gap-1{ gap:var(--s1); } .gap-2{ gap:var(--s2); } .gap-3{ gap:var(--s3); } .gap-4{ gap:var(--s4); } .gap-5{ gap:var(--s5); } .gap-6{ gap:var(--s6); } .gap-7{ gap:var(--s7); } .gap-8{ gap:var(--s8); } .row{ display:flex; align-items:center; gap:var(--s3); } .row.between{ justify-content:space-between; } /* A .tag is white-space:nowrap, so a card header row could not shrink below heading + pill and the pill overflowed the card border at 720-860px. */ .card .row.between{ flex-wrap:wrap; gap:8px; } .card .row.between > h3,.card .row.between > h4{ min-width:0; } /* A pill that is intrinsically wider than the card it sits in (e.g. "Not held · Phase 03" in a 200px compliance card at 720px, or "PDF not yet published" in a 178px card at 860px) must wrap, not cross the card border. Pills that fit are untouched — max-width/white-space only ever bite on overflow. */ .card .tag,.card .pill,.card .badge-chip{ max-width:100%; white-space:normal; } .row.center{ justify-content:center; } .row.end{ justify-content:flex-end; } .row.wrap{ flex-wrap:wrap; } .row.top{ align-items:flex-start; } .col{ display:flex; flex-direction:column; } .flex-1{ flex:1; min-width:0; } .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center; } .split.wide{ grid-template-columns:1.45fr 1fr; } .split.narrow{ grid-template-columns:1fr 1.45fr; } .split.start{ align-items:start; } .split--sticky > .split__side{ position:sticky; top:calc(var(--nav-h) + 36px); align-self:start; } .span-2c{ grid-column:span 2; } .span-2r{ grid-row:span 2; } /* Section divider — a hairline that fades from the accent at its centre */ .section-divider,.rule-glow{ height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent, rgba(var(--saffron-rgb),.45) 50%, transparent); } .divider{ height:1px; border:0; background:var(--hair); } /* ========================================================================== 04 · TYPOGRAPHY ========================================================================== */ /* Eyebrow / kicker — Bebas, saffron, .14em (brief §2; diverges from cyberkul) */ .label,.eyebrow,.hero-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:400; font-size:.95rem; line-height:1.1; letter-spacing:.14em; text-transform:uppercase; color:var(--saffron); } .label--rule::before,.eyebrow::before,.hero-eyebrow::before{ content:""; display:block; width:26px; height:1px; background:var(--saffron); flex:none; } .label--dim{ color:var(--ink-dim); } .label--gold{ color:var(--gold); } /* Section heading — Playfair 700, sentence case (brief §2) */ .h-section{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(2.1rem,5vw,4rem); line-height:1.08; letter-spacing:-.02em; text-transform:none; margin:18px 0 0; color:var(--ink); text-wrap:balance; } .h-section--sm{ font-size:clamp(1.7rem,3.4vw,2.6rem); } /* The signature glowing full stop that ends every H2 */ .dot-end{ color:var(--saffron); text-shadow:var(--saffron-glow); } .display{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(2.6rem,7vw,5.4rem); line-height:1.05; letter-spacing:-.025em; color:var(--ink); } .h1{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(2.2rem,5.2vw,4.2rem); line-height:1.06; letter-spacing:-.02em; } .h2{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(1.7rem,3.4vw,2.8rem); line-height:1.1; letter-spacing:-.02em; } .h3{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(1.25rem,2vw,1.75rem); line-height:1.18; letter-spacing:-.015em; } .h4{ font-family:var(--font-editorial); font-weight:600; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.28; letter-spacing:-.01em; } .h5{ font-family:var(--font-ui); font-weight:600; font-size:.95rem; line-height:1.4; letter-spacing:.005em; } .h1,.h2,.h3,.h4{ color:var(--ink); text-wrap:balance; } .body-text{ color:var(--ink-dim); font-size:1.02rem; line-height:1.7; max-width:52ch; } .body-lg{ font-size:clamp(1.05rem,1.6vw,1.2rem); line-height:1.72; color:var(--ink); } .body { font-size:1rem; line-height:1.7; color:var(--ink-dim); } .body-sm{ font-size:.88rem; line-height:1.65; color:var(--ink-dim); } .body-xs{ font-size:.8rem; line-height:1.6; color:var(--ink-faint); } .lead{ font-family:var(--font-ui); font-size:clamp(1.05rem,1.9vw,1.4rem); line-height:1.72; color:var(--ink); max-width:62ch; margin-inline:auto; } .lead--em{ color:var(--saffron); font-weight:600; } .mono-text,.mono{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:var(--ink-dim); } .mono-label{ font-family:var(--font-mono); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); } .italic{ font-style:italic; } .text-center{ text-align:center; } .text-right{ text-align:right; } /* Accent text colours */ .clr-saffron,.clr-fire{ color:var(--saffron); } .clr-gold{ color:var(--gold); } .clr-ruby{ color:var(--ruby); } .clr-jade{ color:var(--jade); } .clr-umber{ color:var(--umber); } .clr-ink{ color:var(--ink); } .clr-dim{ color:var(--ink-dim); } .accent{ color:var(--saffron); } /* Devanagari (brief §2) */ .deva{ font-family:var(--font-deva); color:var(--gold); line-height:1.8; } .deva.sm{ font-size:.85rem; color:var(--ink-dim); } .deva.md{ font-size:clamp(1rem,1.8vw,1.4rem); } .deva.lg{ font-size:clamp(1.35rem,2.6vw,2.1rem); } .deva.xl{ font-size:clamp(1.9rem,4.5vw,3.4rem); } /* Editorial pull quote */ .pullquote{ font-family:var(--font-editorial); font-weight:600; font-style:italic; font-size:clamp(1.15rem,2vw,1.6rem); line-height:1.45; color:var(--ink); border-left:3px solid var(--saffron); padding-left:var(--s5); letter-spacing:-.005em; } /* Reading measures */ .measure-52{ max-width:52ch; } .measure-60{ max-width:60ch; } .measure-62{ max-width:62ch; } .measure-64{ max-width:64ch; } /* ========================================================================== 05 · ATMOSPHERE & OVERLAYS ========================================================================== */ /* Fixed dawn bloom behind everything. Glow only — no technical grid. */ .sk-atmosphere,.tcd-atmosphere{ position:fixed; inset:0; z-index:var(--z-atmos); pointer-events:none; background:radial-gradient(60% 50% at 50% 0%, rgba(var(--saffron-rgb),.06), transparent 70%); } /* Film grain — stops large flat dark areas from banding. */ .sk-noise,.tcd-noise{ position:fixed; inset:0; z-index:var(--z-atmos); width:100%; height:100%; pointer-events:none; opacity:.05; mix-blend-mode:overlay; } /* Reading progress bar (JS sets transform:scaleX(pct)) */ .scroll-progress{ position:fixed; top:0; left:0; z-index:var(--z-progress); height:2px; width:100%; background:var(--saffron); box-shadow:var(--saffron-glow); transform:scaleX(0); transform-origin:0 50%; pointer-events:none; } /* Mandala watermark — assets/mandala.svg, strokes are already warm-white */ .mandala-mark{ position:absolute; inset:auto; pointer-events:none; user-select:none; width:min(72vw,620px); aspect-ratio:1; background:url("mandala.svg") center / contain no-repeat; opacity:.07; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0; } .mandala-mark--corner{ top:-12%; left:auto; right:-14%; transform:none; opacity:.05; } /* Oversized Devanagari watermark (ॐ, वसुधैव …) */ .deva-watermark{ position:absolute; right:-4%; top:50%; transform:translateY(-50%); font-family:var(--font-deva); font-size:clamp(9rem,26vw,26rem); line-height:1; color:rgba(var(--ink-rgb),.045); pointer-events:none; user-select:none; z-index:0; } /* Giant ghost quote / glyph behind testimonial & shloka blocks */ .quote-mark{ position:absolute; top:6%; left:4%; z-index:0; font-family:var(--font-editorial); font-weight:700; font-size:clamp(11rem,26vw,30rem); line-height:.6; color:rgba(var(--gold-rgb),.12); pointer-events:none; user-select:none; } /* ========================================================================== 06 · BUTTONS ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-mono); font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; padding:14px 22px; border:1px solid transparent; border-radius:var(--r-pill); transition:transform var(--dur-sm) var(--spring), background var(--dur-sm), color var(--dur-sm), border-color var(--dur-sm), box-shadow var(--dur-sm); will-change:transform; } .btn:disabled,.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none !important; } /* Sizes */ .btn-sm,.btn.sm{ padding:9px 16px; font-size:.7rem; } .btn-md,.btn.md{ padding:12px 20px; font-size:.74rem; } .btn-lg,.btn.lg{ padding:16px 30px; font-size:.84rem; } /* Primary — saffron fill, --bg text (7.7:1). Never saffron-deep text. */ .btn-primary,.btn-fire{ background:var(--saffron); color:var(--bg); border-color:var(--saffron); box-shadow:var(--saffron-glow); } .btn-primary:hover,.btn-fire:hover{ transform:translateY(-2px); } .btn-primary:active,.btn-fire:active{ transform:translateY(0); background:var(--saffron-deep); border-color:var(--saffron-deep); } .btn-primary:hover .arrow,.btn-fire:hover .arrow, .btn-primary:hover .icon,.btn-fire:hover .icon{ transform:translateX(4px); } /* Gold — sacred / secondary emphasis */ .btn-gold{ background:var(--gold); color:var(--bg); border-color:var(--gold); box-shadow:var(--gold-glow); } .btn-gold:hover{ transform:translateY(-2px); } .btn-gold:active{ transform:translateY(0); filter:brightness(.94); } .btn-gold:hover .arrow,.btn-gold:hover .icon{ transform:translateX(4px); } /* Outline — the workhorse secondary */ .btn-outline{ background:transparent; color:var(--ink); border-color:var(--hair); } .btn-outline:hover{ border-color:var(--saffron); color:var(--saffron); background:rgba(var(--saffron-rgb),.06); transform:translateY(-2px); } .btn-outline:hover .arrow,.btn-outline:hover .icon{ transform:translateX(4px); } /* Ghost — text-level action, no chrome */ .btn-ghost{ background:transparent; color:var(--saffron); border-color:transparent; padding-left:0; padding-right:0; } .btn-ghost:hover{ color:var(--ink); } .btn-ghost:hover .arrow,.btn-ghost:hover .icon{ transform:translateX(5px); } /* Danger / destructive (rare — form errors, cancel) */ .btn-quiet{ background:transparent; color:var(--ink-dim); border-color:var(--hair-2); } .btn-quiet:hover{ color:var(--ink); border-color:var(--hair); } .btn-block{ width:100%; } /* The arrow — one class, three consumers */ .arrow,.btn .icon,.icon{ display:inline-flex; align-items:center; transition:transform var(--dur) var(--spring); } /* Optional breathing CTA. Opt-in via .btn--pulse, never global. */ @keyframes skGoGlow{ 0%,100%{ box-shadow:0 8px 22px rgba(0,0,0,.3), 0 0 16px rgba(var(--saffron-rgb),.35); } 50% { box-shadow:0 0 0 4px rgba(var(--saffron-rgb),.13), 0 8px 26px rgba(0,0,0,.35), 0 0 32px rgba(var(--saffron-rgb),.65); } } .btn--pulse{ animation:skGoGlow 2.1s ease-in-out infinite; } .btn--pulse:hover{ animation-play-state:paused; } /* Button rows */ .btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .btn-row--center{ justify-content:center; } /* ========================================================================== 07 · BRAND ========================================================================== */ .brand{ display:inline-flex; align-items:center; gap:10px; } .brand--stack{ flex-direction:column; align-items:flex-start; gap:2px; } .brand__dot{ width:8px; height:8px; border-radius:50%; flex:none; background:radial-gradient(circle,#fff 0%,var(--saffron) 60%,var(--saffron) 100%); box-shadow:var(--saffron-glow); animation:brandPulse 2.4s ease-in-out infinite; } .brand__name,.brand-name{ font-family:var(--font-editorial); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; color:var(--ink); line-height:1.15; } .brand__name .accent,.brand-name .accent{ color:var(--saffron); } .brand__dot-end{ font-family:var(--font-editorial); font-weight:700; font-size:1.15rem; color:var(--saffron); } .brand__deva,.brand-deva{ font-family:var(--font-deva); font-size:.72rem; color:var(--gold); letter-spacing:.02em; line-height:1.4; } .brand--lg .brand__name,.brand--lg .brand-name,.brand--lg .brand__dot-end{ font-size:clamp(1.8rem,5vw,3rem); } .brand--lg .brand__dot{ width:14px; height:14px; } .brand--lg .brand__deva,.brand--lg .brand-deva{ font-size:1rem; } @keyframes brandPulse{ 0%,100%{ opacity:.7; transform:scale(1); } 50% { opacity:1; transform:scale(1.15); } } /* A steady (non-pulsing) marker — used where nothing is actually "live" */ .mark-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; background:var(--saffron); box-shadow:0 0 10px rgba(var(--saffron-rgb),.7); } .mark-dot--gold{ background:var(--gold); box-shadow:0 0 10px rgba(var(--gold-rgb),.6); } .mark-dot--jade{ background:var(--jade); box-shadow:0 0 10px rgba(var(--jade-rgb),.6); } /* ========================================================================== 08 · NAV & MOBILE MENU ========================================================================== */ .nav,header.site-header{ position:fixed; top:0; left:0; right:0; z-index:var(--z-nav); height:var(--nav-h); background:rgba(var(--bg-rgb),.5); border-bottom:1px solid transparent; transition:background var(--dur), border-color var(--dur), box-shadow var(--dur); } /* The blur lives on a pseudo-element, NOT on the header itself: a backdrop-filter makes the 64px header a containing block for its position:fixed child .mobile-menu, which clipped the drawer to a 128px sliver and stranded 3-4 links above the scroll origin. */ .nav::before,header.site-header::before{ content:""; position:absolute; inset:0; z-index:-1; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); pointer-events:none; } .nav-inner,header.site-header .inner{ position:relative; } .nav.is-scrolled, header.site-header.is-scrolled, header.site-header.scrolled{ background:var(--bg); border-bottom-color:rgba(var(--saffron-rgb),.3); box-shadow:var(--sh-nav); } .nav-inner,header.site-header .inner{ max-width:var(--wrap); margin:0 auto; height:100%; padding:0 var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav-links,nav.site-nav{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; } .nav-links a,nav.site-nav a{ position:relative; padding:4px 0; font-family:var(--font-mono); font-size:.74rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); transition:color var(--dur); } .nav-links a::after,nav.site-nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:var(--saffron); transform:scaleX(0); transform-origin:0 50%; transition:transform var(--dur) var(--spring); } .nav-links a:hover,nav.site-nav a:hover, .nav-links a[aria-current="page"],nav.site-nav a[aria-current="page"], nav.site-nav a.active{ color:var(--saffron); } .nav-links a:hover::after,nav.site-nav a:hover::after, .nav-links a[aria-current="page"]::after, nav.site-nav a[aria-current="page"]::after, nav.site-nav a.active::after{ transform:scaleX(1); } .nav-actions,.header-actions{ display:flex; align-items:center; gap:12px; } .nav-actions .btn,.header-actions .btn{ padding:10px 18px; font-size:.72rem; } .nav-tagline{ font-family:var(--font-deva); font-size:.78rem; color:var(--gold); opacity:.9; margin-left:14px; padding-left:14px; border-left:1px solid var(--hair); white-space:nowrap; align-self:center; } /* Hamburger → X, pure CSS */ /* 44x44 hit area (WCAG 2.5.8) wrapped around the same 34x26 bar artwork: the 9px/5px padding is the only growth, and the bars are re-offset by it so the mark itself is pixel-identical to before. */ .nav-toggle,.menu-btn{ display:none; position:relative; width:44px; height:44px; flex:none; background:none; border:0; padding:9px 5px; margin-right:-5px; } .nav-toggle span,.menu-btn span{ position:absolute; left:5px; height:2px; width:34px; background:var(--ink); border-radius:2px; transition:transform var(--dur) var(--spring), opacity var(--dur), top var(--dur) var(--spring); } .nav-toggle span:nth-child(1),.menu-btn span:nth-child(1){ top:11px; } .nav-toggle span:nth-child(2),.menu-btn span:nth-child(2){ top:21px; } .nav-toggle span:nth-child(3),.menu-btn span:nth-child(3){ top:31px; } .nav-toggle.is-open span:nth-child(1), .menu-btn[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); } .nav-toggle.is-open span:nth-child(2), .menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3), .menu-btn[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); } /* Full-screen slide-over menu */ .mobile-menu,.mobile-nav{ position:fixed; inset:0; z-index:var(--z-menu); background:var(--bg); display:flex; flex-direction:column; justify-content:center; gap:8px; padding:calc(var(--nav-h) + 24px) var(--gutter-wide) 40px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-12px); transition:opacity .4s var(--spring), transform .4s var(--spring), visibility .4s; } .mobile-menu.is-open,.mobile-nav.is-open, .mobile-menu.open,.mobile-nav.open{ opacity:1; visibility:visible; transform:none; } /* COMPAT — the previous site.js opened the menu by removing the `hidden` ATTRIBUTE and never added a class. `.mobile-nav` therefore stays visible whenever it is not [hidden]; `.mobile-menu` is the class-driven variant. Use ONE of the two names, not both, or pick .mobile-menu for new markup. */ .mobile-nav:not([hidden]){ opacity:1; visibility:visible; transform:none; } .mobile-nav:not([hidden]) a:not(.btn){ opacity:1; transform:none; } .mobile-menu a,.mobile-nav a:not(.btn){ font-family:var(--font-editorial); font-weight:700; font-size:clamp(1.6rem,7vw,2.6rem); line-height:1.2; letter-spacing:-.02em; color:var(--ink); padding:6px 0; opacity:0; transform:translateY(20px); } .mobile-menu.is-open a,.mobile-menu.open a,.mobile-nav.is-open a:not(.btn){ opacity:1; transform:none; transition:opacity .5s var(--spring), transform .5s var(--spring); transition-delay:calc(.06s * var(--i,0) + .1s); } .mobile-menu a:hover,.mobile-menu a[aria-current="page"], .mobile-nav a[aria-current="page"]{ color:var(--saffron); } .mobile-menu .btn,.mobile-nav .btn{ align-self:flex-start; margin-top:18px; } .mobile-menu__deva{ font-family:var(--font-deva); color:var(--gold); font-size:1rem; margin-top:26px; } /* Announcement strip above the nav (if a page uses one) */ .announce{ position:relative; z-index:var(--z-content); background:var(--saffron-deep); color:#fff; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.09em; text-align:center; padding:9px var(--s5); } .announce a{ color:#fff; text-decoration:underline; text-underline-offset:2px; font-weight:600; } .announce .sep{ margin:0 var(--s4); opacity:.6; } /* ========================================================================== 09 · HERO Left-aligned copy over a photographic plate (there is no hero video). ========================================================================== */ .hero{ position:relative; z-index:var(--z-content); display:flex; align-items:flex-end; min-height:min(88vh,760px); margin-top:var(--nav-h); padding:clamp(64px,12vw,140px) 0 clamp(40px,7vw,80px); overflow:hidden; background:var(--bg); } .hero--short{ min-height:min(56vh,520px); align-items:center; } .hero--page{ min-height:0; padding:clamp(56px,9vw,110px) 0 clamp(32px,5vw,60px); align-items:center; } .hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--bg); } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; } /* Two-axis legibility scrim: vertical blends the photo into the page ground, horizontal darkens the left third where the copy sits. This is how warm off-white text clears 4.5:1 over a photograph. */ .hero__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(var(--bg-rgb),.34) 0%, transparent 20%, rgba(var(--bg-rgb),.5) 52%, rgba(var(--bg-rgb),.86) 80%, var(--bg) 100%), linear-gradient(90deg, rgba(var(--bg-rgb),.78) 0%, rgba(var(--bg-rgb),.44) 44%, transparent 72%); } .hero__glow{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(50% 40% at 22% 55%, rgba(var(--saffron-rgb),.14), transparent 70%); } .hero__inner{ position:relative; z-index:var(--z-hero); width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); } .hero__copy{ max-width:min(100%,720px); } .hero__title{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(2.4rem,7vw,5rem); line-height:1.05; letter-spacing:-.02em; margin:18px 0 0; color:var(--ink); text-wrap:balance; } .hero__title em,.hero__title .accent{ font-style:normal; color:var(--saffron); } .hero__body,.hero__lead{ margin-top:22px; max-width:640px; font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.75; color:var(--ink-dim); } .hero__reveal{ opacity:0; transform:translateY(18px); animation:heroReveal .9s var(--spring) .35s forwards; } @keyframes heroReveal{ to{ opacity:1; transform:none; } } /* Shloka line under the hero copy (brief §2) */ .hero-shloka,.hero__shloka{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-top:26px; font-family:var(--font-deva); color:var(--gold); font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.8; } .hero-shloka small,.hero__shloka small{ font-family:var(--font-ui); font-style:italic; font-size:.86rem; color:var(--ink-dim); letter-spacing:.01em; } .hero-trust,.hero__badges{ display:flex; flex-wrap:wrap; gap:9px; margin-top:24px; } .hero-actions,.hero__ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:30px; } .hero-split{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,60px); align-items:center; } .hero-img-col{ position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--hair); box-shadow:var(--sh-md); } .hero-img-col img{ width:100%; height:100%; object-fit:cover; } /* Scroll cue */ .hero__cue{ position:absolute; z-index:var(--z-hero); bottom:18px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); animation:cuePulse 2.4s ease-in-out infinite; } @keyframes cuePulse{ 0%,100%{ transform:translateX(-50%) translateY(0); opacity:.9; } 50% { transform:translateX(-50%) translateY(5px); opacity:.5; } } /* ========================================================================== 10 · STAT BAND & COUNTERS ========================================================================== */ /* Thin full-bleed band. NO "live" pill and no pulsing dot — nothing here is live; the marker slot carries a registration fact instead. */ .status-strip{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--bg); } .status-strip__inner{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; padding:18px var(--gutter); max-width:var(--wrap); margin:0 auto; } .status-strip__mark{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--saffron); } .status-pill{ display:inline-flex; align-items:baseline; gap:8px; font-family:var(--font-mono); font-size:.74rem; } .status-pill .val{ color:var(--ink); font-weight:600; text-shadow:0 0 12px rgba(var(--saffron-rgb),.25); } .status-pill .lbl{ color:var(--ink-dim); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; } .status-pill.flicker{ animation:flick .5s steps(2) 2; } @keyframes flick{ 50%{ opacity:.5; } } /* Big counters — Bebas numerals, saffron, glowing */ .stat-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; background:var(--hair); border:1px solid var(--hair); } .stat-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .stat-cell,.feed-stat{ background:var(--bg); padding:clamp(24px,3vw,40px); } .stat-num,.feed-stat-num{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.6rem,5vw,4.2rem); line-height:.9; white-space:nowrap; /* "Rs 5,33,100" was breaking to 2-3 lines */ color:var(--saffron); text-shadow:var(--saffron-glow); letter-spacing:.01em; } .stat-num.flicker,.feed-stat-num.flicker{ animation:flick .5s steps(2) 2; } .stat-label,.feed-stat-label{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-top:8px; } .stat-deva{ font-family:var(--font-deva); font-size:.86rem; color:var(--gold); margin-top:4px; line-height:1.6; } /* Ruled (borderless) stat block, for hero rows */ .stat-block{ border-top:1px solid var(--hair); padding-top:var(--s4); } .hero-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5) var(--s6); margin-top:clamp(36px,6vw,64px); padding-top:var(--s6); border-top:1px solid var(--hair); } .hero-stats .stat-block{ border-top:0; padding-top:0; } .hero-stats .stat-num{ font-size:clamp(2.2rem,4.4vw,3.4rem); } /* ========================================================================== 11 · MISSION CARDS (the showcase card — per-card --track accent) ========================================================================== */ .mission-grid,.disc-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); } .mission-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .mission-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .mission-card,.disc-card{ --track:var(--saffron); position:relative; display:flex; flex-direction:column; min-height:220px; padding:24px 22px 22px; background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; isolation:isolate; transition:transform .32s var(--spring), border-color .32s, box-shadow .32s, background .32s; } /* Mission accent variants (brief §1 mapping) */ .mission-card--edu,.m-edu{ --track:var(--m-edu); } .mission-card--nature,.m-nature{ --track:var(--m-nature); } .mission-card--gaushala,.m-gaushala{ --track:var(--m-gaushala); } .mission-card--temple,.m-temple{ --track:var(--m-temple); } /* derived tracks for the six-pillar grid */ .mission-card--health,.m-health{ --track:var(--m-health); } .mission-card--gyan,.m-gyan{ --track:var(--m-gyan); } .mission-card--skill,.m-skill{ --track:var(--m-skill); } /* 1px gradient ring drawn with mask-composite, faded in on hover */ .mission-card::before,.disc-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(140deg, color-mix(in srgb,var(--track) 60%,transparent), transparent 55%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .32s; } .mission-card:hover,.disc-card:hover, .mission-card:focus-within,.disc-card:focus-within{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--track) 45%,var(--hair)); box-shadow:0 20px 60px color-mix(in srgb,var(--track) 30%,transparent); } .mission-card:hover::before,.disc-card:hover::before, .mission-card:focus-within::before,.disc-card:focus-within::before{ opacity:1; } .mission-card:hover .arrow,.disc-card:hover .arrow{ transform:translateX(4px); } .mission-card__icon,.disc-icon{ width:46px; height:46px; margin-bottom:18px; display:grid; place-items:center; color:var(--track); border:1px solid color-mix(in srgb,var(--track) 32%,transparent); background:color-mix(in srgb,var(--track) 12%,transparent); border-radius:var(--r-md); transition:background .32s, border-color .32s; } .mission-card:hover .mission-card__icon,.disc-card:hover .disc-icon{ background:color-mix(in srgb,var(--track) 20%,transparent); border-color:color-mix(in srgb,var(--track) 50%,transparent); } .mission-card__icon svg,.disc-icon svg{ width:22px; height:22px; } .mission-head,.disc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .mission-name,.disc-name{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(1.2rem,1.8vw,1.5rem); line-height:1.2; letter-spacing:-.015em; color:var(--track); } .mission-badge,.disc-badge{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; padding:4px 10px; border-radius:var(--r-pill); color:var(--track); background:color-mix(in srgb,var(--track) 14%,transparent); border:1px solid color-mix(in srgb,var(--track) 32%,transparent); } .mission-body,.disc-promise{ color:var(--ink-dim); font-size:.96rem; line-height:1.66; margin:16px 0 18px; flex:1; } .mission-deva{ font-family:var(--font-deva); color:var(--gold); font-size:.9rem; line-height:1.7; margin:-8px 0 14px; } .mission-cta,.disc-cta{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--track); } .mission-rule,.disc-rule{ position:absolute; inset:auto 0 0 0; height:2px; opacity:.55; background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--track) 70%,transparent), transparent); } /* Cut-out photograph inside a mission card, sitting on an accent floor pool */ .mission-av,.disc-av{ position:relative; margin:0 0 6px; height:122px; display:flex; align-items:flex-end; justify-content:center; } .mission-av::after,.disc-av::after{ content:""; position:absolute; bottom:6px; left:50%; z-index:0; transform:translateX(-50%); width:96px; height:32px; border-radius:50%; background:radial-gradient(ellipse at center, var(--track) 0%, transparent 70%); opacity:.32; filter:blur(7px); } .mission-av img,.disc-av img{ position:relative; z-index:1; height:120px; width:auto; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); } /* ========================================================================== 12 · VALUE PROPS (hairline grid + bottom wipe) ========================================================================== */ .vp-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:var(--hair); border:1px solid var(--hair); } .vp-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .vp-card{ position:relative; overflow:hidden; background:var(--bg-2); padding:clamp(28px,3vw,40px); transition:background var(--dur); } .vp-card::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--saffron); transform:scaleX(0); transform-origin:0 50%; transition:transform .4s var(--spring); } .vp-card:hover{ background:var(--bg-3); } .vp-card:hover::after{ transform:scaleX(1); } .vp-num{ font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; color:var(--saffron); } .vp-title{ font-family:var(--font-editorial); font-weight:700; font-size:1.25rem; line-height:1.25; letter-spacing:-.015em; margin:18px 0 12px; color:var(--ink); } .vp-body{ color:var(--ink-dim); font-size:.96rem; margin:0; } /* The accent story: three numerals, three mission colours */ .vp-grid .vp-card:nth-child(1) .vp-num{ color:var(--m-edu); } .vp-grid .vp-card:nth-child(2) .vp-num{ color:var(--m-gyan); } .vp-grid .vp-card:nth-child(3) .vp-num{ color:var(--m-nature); } .vp-grid .vp-card:nth-child(4) .vp-num{ color:var(--m-temple); } /* Generic surface card */ .card{ background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(22px,2.6vw,32px); transition:border-color var(--dur), transform .32s var(--spring), box-shadow .32s, background var(--dur); } .card.hoverable:hover,.card--hover:hover{ transform:translateY(-4px); border-color:rgba(var(--saffron-rgb),.4); box-shadow:var(--sh-sm), 0 0 40px rgba(var(--saffron-rgb),.1); } .card.flat,.card--flat{ background:transparent; box-shadow:none; } .card.compact,.card--compact{ padding:var(--s5); } .card.alt-2,.card--sunken{ background:var(--bg-3); } .card.fire-accent,.card--saffron{ border-left:3px solid var(--saffron); border-radius:0 var(--r-lg) var(--r-lg) 0; } .card.gold-accent,.card--gold{ border-left:3px solid var(--gold); border-radius:0 var(--r-lg) var(--r-lg) 0; } .card--jade{ border-left:3px solid var(--jade); border-radius:0 var(--r-lg) var(--r-lg) 0; } .card--ruby{ border-left:3px solid var(--ruby); border-radius:0 var(--r-lg) var(--r-lg) 0; } /* Panel — the raised "software" surface: gradient fill + deep shadow */ .panel{ position:relative; overflow:hidden; border:1px solid var(--hair); border-radius:var(--r-lg); background:linear-gradient(180deg,#151009,var(--bg)); box-shadow:var(--sh-md); } .panel__bar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--hair); background:rgba(var(--ink-rgb),.02); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); } .panel__bar .om{ font-family:var(--font-deva); color:var(--gold); font-size:1rem; letter-spacing:0; } .panel__body{ padding:clamp(18px,2.4vw,26px); } /* ========================================================================== 13 · CAMPAIGN CARDS + PROGRESS ========================================================================== */ .camp-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); } .camp-card{ --track:var(--saffron); display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; transition:transform .32s var(--spring), border-color .32s, box-shadow .32s; } .camp-card:hover,.camp-card:focus-within{ transform:translateY(-5px); border-color:color-mix(in srgb,var(--track) 45%,var(--hair)); box-shadow:0 20px 60px color-mix(in srgb,var(--track) 26%,transparent); } .camp-card__media{ position:relative; aspect-ratio:16/10; background:var(--bg-3); } .camp-card__media img{ width:100%; height:100%; object-fit:cover; } .camp-card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(var(--bg-rgb),.75) 100%); } .camp-card__tagrow{ position:absolute; z-index:1; left:14px; bottom:12px; display:flex; flex-wrap:wrap; gap:6px; } .camp-card__body{ display:flex; flex-direction:column; gap:12px; padding:22px; flex:1; } .camp-card__title{ font-family:var(--font-editorial); font-weight:700; font-size:1.2rem; line-height:1.25; letter-spacing:-.015em; color:var(--ink); } .camp-card__desc{ color:var(--ink-dim); font-size:.94rem; margin:0; flex:1; } .camp-card__foot{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-dim); } .camp-card__foot .val{ color:var(--ink); font-weight:500; } /* Progress meter. Width is authored inline (style="--pct:62%") or set by JS. */ .progress{ display:flex; flex-direction:column; gap:8px; } .progress__meta,.bar-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-dim); } .progress__meta .pct,.bar-row .pct{ color:var(--saffron); font-weight:500; } .progress-bar,.bar{ position:relative; height:10px; overflow:hidden; background:rgba(var(--ink-rgb),.07); border-radius:var(--r-pill); } .progress-bar > i,.progress-bar .fill,.bar .fill{ display:block; height:100%; width:var(--pct,0%); border-radius:var(--r-pill); background:linear-gradient(90deg,var(--saffron-deep),var(--saffron)); box-shadow:var(--saffron-glow); transition:width .9s var(--spring); } .progress-bar--gold > i,.progress-bar--gold .fill{ background:linear-gradient(90deg,#B98A1E,var(--gold)); box-shadow:var(--gold-glow); } .progress-bar--jade > i,.progress-bar--jade .fill{ background:linear-gradient(90deg,#1E6B46,var(--jade)); box-shadow:0 0 20px rgba(var(--jade-rgb),.35); } /* ========================================================================== 14 · SHLOKA BLOCKS (Devanagari · gold · mandala watermark) ========================================================================== */ .shloka{ font-family:var(--font-deva); color:var(--gold); font-size:22px; line-height:1.8; text-align:center; margin:0; } .shloka-block{ position:relative; overflow:hidden; isolation:isolate; padding:clamp(30px,5vw,54px) clamp(20px,4vw,48px); border:1px solid rgba(var(--gold-rgb),.34); border-radius:var(--r-lg); background: linear-gradient(180deg, rgba(var(--gold-rgb),.06), rgba(var(--bg-rgb),.4)); text-align:center; } .shloka-block::before{ content:""; position:absolute; z-index:0; top:50%; left:50%; transform:translate(-50%,-50%); width:min(88%,460px); aspect-ratio:1; background:url("mandala.svg") center / contain no-repeat; opacity:.08; pointer-events:none; } .shloka-block > *{ position:relative; z-index:1; } .shloka-block .shloka{ max-width:44ch; margin-inline:auto; } .shloka-trans{ margin-top:16px; color:var(--ink-dim); font-family:var(--font-ui); font-style:italic; font-size:.98rem; line-height:1.7; max-width:56ch; margin-inline:auto; } .shloka-src{ margin-top:14px; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); } /* Inline aside variant — a gold-ruled quote inside a section */ .shloka-aside{ border-left:3px solid var(--gold); border-radius:0 var(--r-md) var(--r-md) 0; background:rgba(var(--gold-rgb),.05); padding:clamp(20px,3vw,30px); text-align:left; } .shloka-aside .shloka{ text-align:left; font-size:clamp(1.1rem,2vw,1.375rem); } /* ========================================================================== 15 · TESTIMONIALS (crossfade carousel + 6s timed tabs) ========================================================================== */ .testimonials{ position:relative; z-index:var(--z-content); overflow:hidden; padding:var(--section-pad) 0; background:var(--bg-2); } .test-inner{ position:relative; z-index:1; } .test-track{ position:relative; min-height:220px; } .test-slide{ position:absolute; inset:0; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .7s var(--spring), transform .7s var(--spring); } .test-slide.is-active{ position:relative; opacity:1; transform:none; pointer-events:auto; } .test-quote{ font-family:var(--font-editorial); font-weight:600; font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.4; letter-spacing:-.015em; color:var(--ink); margin:0; max-width:60ch; } .test-author{ margin-top:26px; display:flex; flex-direction:column; gap:2px; } .test-author b{ font-family:var(--font-mono); font-size:.82rem; font-weight:500; letter-spacing:.06em; color:var(--saffron); } .test-author span{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); } .test-tabs{ display:flex; flex-wrap:wrap; gap:2px; margin-top:44px; } .test-tab{ position:relative; padding:6px 12px 12px; min-width:44px; min-height:44px; /* WCAG 2.5.8 — was 17.9x33.8 */ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em; color:var(--ink-dim); background:none; border:0; transition:color var(--dur); } .test-tab .bar{ position:absolute; left:12px; right:12px; bottom:9px; height:2px; width:auto; background:var(--hair); overflow:hidden; } .test-tab .bar::after{ content:""; position:absolute; inset:0; width:0; background:var(--saffron); } .test-tab.is-active{ color:var(--saffron); } /* 6s == the JS autoplay interval (6000ms). Change both or neither. */ .test-tab.is-active .bar::after{ animation:tabFill 6s linear forwards; } @keyframes tabFill{ to{ width:100%; } } /* WCAG 2.2.2 pause control, injected by site.js initTestimonials(). */ .test-pause{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; margin-top:18px; min-height:44px; padding:10px 15px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--hair); background:rgba(var(--ink-rgb),.03); transition:color var(--dur), border-color var(--dur), background var(--dur); } .test-pause:hover{ color:var(--saffron); border-color:rgba(var(--saffron-rgb),.5); } .test-pause .tp-ico{ font-size:.7rem; line-height:1; } /* A paused carousel must stop the 6s tab-fill animation as well as the timer. */ .testimonials.is-paused .test-tab.is-active .bar::after{ animation-play-state:paused; } /* ========================================================================== 16 · FAQ ACCORDION ========================================================================== */ .faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,64px); } .faq-side{ position:sticky; top:calc(var(--nav-h) + 36px); align-self:start; } .faq-list,.acc{ display:flex; flex-direction:column; } .faq-item,.acc-item{ border-top:1px solid var(--hair); } .faq-item:last-child,.acc-item:last-child{ border-bottom:1px solid var(--hair); } .faq-q,.acc-q{ position:relative; width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 20px 22px 20px; background:none; border:0; color:var(--ink); font-family:var(--font-ui); font-weight:500; font-size:1.02rem; line-height:1.5; transition:color var(--dur), background var(--dur); } .faq-q:hover,.acc-q:hover{ color:var(--saffron); background:rgba(var(--saffron-rgb),.04); } /* left accent rail grows downward when open */ .faq-q::before,.acc-q::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:2px; background:var(--saffron); transform:scaleY(0); transform-origin:50% 0; transition:transform var(--dur) var(--spring); } .faq-item.is-open .faq-q::before, .faq-item.open .faq-q::before, .acc-item.is-open .acc-q::before, .acc-item.open .acc-q::before{ transform:scaleY(1); } /* + → × built from two pseudo-elements, no icon font */ .faq-toggle,.acc-icon{ position:relative; flex:none; width:16px; height:16px; } .faq-toggle::before,.faq-toggle::after, .acc-icon::before,.acc-icon::after{ content:""; position:absolute; top:50%; left:0; width:16px; height:2px; margin-top:-1px; background:var(--ink-dim); transition:transform var(--dur) var(--spring), background var(--dur); } .faq-toggle::after,.acc-icon::after{ transform:rotate(90deg); } .faq-item.is-open .faq-toggle::before,.faq-item.open .faq-toggle::before, .acc-item.is-open .acc-icon::before,.acc-item.open .acc-icon::before{ background:var(--saffron); transform:rotate(45deg); } .faq-item.is-open .faq-toggle::after,.faq-item.open .faq-toggle::after, .acc-item.is-open .acc-icon::after,.acc-item.open .acc-icon::after{ background:var(--saffron); transform:rotate(-45deg); } /* If a page ships an inside .acc-icon instead, rotate it. */ .acc-icon > svg{ position:relative; z-index:1; width:16px; height:16px; transition:transform var(--dur) var(--spring); } .acc-item.is-open .acc-icon > svg, .acc-item.open .acc-icon > svg{ transform:rotate(45deg); color:var(--saffron); } .acc-icon:has(> svg)::before,.acc-icon:has(> svg)::after{ display:none; } /* visibility:hidden takes the collapsed panel out of the a11y tree AND the tab order — max-height:0 alone left every link inside a closed answer focusable and announced. The .is-open selectors below match what site.js actually toggles, so authored-open panels also render with JS off. */ .faq-a,.acc-a{ max-height:0; overflow:hidden; visibility:hidden; transition:max-height var(--dur-md) var(--spring), visibility 0s linear var(--dur-md); } .faq-item.is-open .faq-a,.faq-item.open .faq-a, .acc-item.is-open .acc-a,.acc-item.open .acc-a{ max-height:1800px; visibility:visible; transition:max-height var(--dur-md) var(--spring), visibility 0s; } .faq-a-inner,.acc-a-inner{ padding:0 20px 24px; color:var(--ink-dim); font-size:.96rem; line-height:1.72; max-width:62ch; } .acc-a p{ padding:0 20px 24px; color:var(--ink-dim); font-size:.96rem; line-height:1.72; max-width:62ch; } .acc-a-inner p + p,.faq-a-inner p + p{ margin-top:12px; } /* ========================================================================== 17 · MARQUEE / TICKER ========================================================================== */ .logos,.ticker{ position:relative; z-index:var(--z-content); overflow:hidden; padding:clamp(40px,7vw,80px) 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); background:var(--bg); } .ticker{ padding:14px 0; } .logos .label{ margin-bottom:26px; } .marquee-mask{ position:relative; width:100%; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .marquee,.ticker-track{ display:flex; width:max-content; animation:marquee 32s linear infinite; will-change:transform; } .marquee:hover,.ticker:hover .ticker-track, .marquee-mask:hover .marquee{ animation-play-state:paused; } .marquee-row{ display:flex; align-items:center; } .marquee-item{ display:inline-flex; align-items:center; font-family:var(--font-display); font-size:clamp(1.4rem,3vw,2.2rem); letter-spacing:.02em; text-transform:uppercase; color:var(--ink-dim); opacity:.62; padding:0 32px; white-space:nowrap; border-bottom:2px solid transparent; transition:color var(--dur), opacity var(--dur), border-color var(--dur); } .marquee-item:hover{ color:var(--ink); opacity:1; border-bottom-color:var(--saffron); } .marquee-item .sep,.ticker-track .sep{ color:var(--gold); margin:0 18px; } .marquee-item[lang="sa"],.marquee-item[lang="hi"],.marquee-item .deva{ font-family:var(--font-deva); font-size:clamp(1rem,2.1vw,1.5rem); color:var(--gold); opacity:.85; text-transform:none; } @keyframes marquee{ to{ transform:translateX(-50%); } } /* Small mono ticker variant (legacy .ticker-track sizing) */ .ticker-track{ gap:0; animation-duration:40s; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--ink-dim); } .ticker-track > span{ padding:0 24px; white-space:nowrap; } /* Photo strip marquee (edge-masked card rail) */ .photo-rail{ position:relative; width:100%; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .photo-rail__track{ display:flex; gap:20px; width:max-content; animation:railScroll 55s linear infinite; will-change:transform; } .photo-rail:hover .photo-rail__track{ animation-play-state:paused; } @keyframes railScroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } } .photo-rail__card{ flex:none; width:132px; height:170px; margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid rgba(var(--saffron-rgb),.32); background:var(--bg-2); box-shadow:var(--sh-sm); } .photo-rail__card img{ width:100%; height:100%; object-fit:cover; } /* ========================================================================== 18 · TIMELINE / ROADMAP ========================================================================== */ .timeline{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-top:40px; } .timeline--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .timeline--5{ grid-template-columns:repeat(5,minmax(0,1fr)); } .timeline-line{ position:absolute; top:46px; left:0; width:100%; height:1px; background:var(--hair); overflow:hidden; } .timeline-line::after{ content:""; position:absolute; inset:0; width:0; background:var(--saffron); box-shadow:var(--saffron-glow); transition:width 1.4s var(--spring); } .timeline.is-in .timeline-line::after{ width:100%; } .tl-step{ position:relative; padding-top:34px; opacity:0; transform:translateY(18px); } .timeline.is-in .tl-step{ animation:tlIn .6s var(--spring) forwards; animation-delay:calc(.15s * var(--i,0)); } @keyframes tlIn{ to{ opacity:1; transform:none; } } .tl-node{ position:absolute; top:0; left:0; width:14px; height:14px; border-radius:50%; background:var(--track,var(--saffron)); box-shadow:0 0 16px color-mix(in srgb,var(--track,var(--saffron)) 55%,transparent); } .tl-num{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--track,var(--saffron)); } .tl-title{ font-family:var(--font-editorial); font-weight:700; font-size:1.1rem; line-height:1.25; letter-spacing:-.015em; margin:12px 0 10px; color:var(--ink); } .tl-body{ color:var(--ink-dim); font-size:.9rem; margin:0; } .tl-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; } .tl-list li{ display:flex; gap:10px; color:var(--ink-dim); font-size:.86rem; line-height:1.6; } .tl-list .idx{ font-family:var(--font-mono); font-size:.7rem; color:var(--track,var(--saffron)); flex:none; } /* NOTE: .timeline-line is the FIRST DOM child, so step N is nth-child(N+1). */ .timeline .tl-step{ --track:var(--saffron); } .timeline .tl-step:nth-child(2){ --track:var(--m-edu); } .timeline .tl-step:nth-child(3){ --track:var(--m-gyan); } .timeline .tl-step:nth-child(4){ --track:var(--m-nature); } .timeline .tl-step:nth-child(5){ --track:var(--m-temple); } .timeline .tl-step:nth-child(6){ --track:var(--m-gaushala); } /* "What this buys" ledger under a timeline */ .walkaway{ margin-top:clamp(48px,7vw,80px); padding-top:40px; border-top:1px solid var(--hair); } .walkaway h3{ font-family:var(--font-editorial); font-weight:700; font-size:1.2rem; letter-spacing:-.015em; margin:0 0 20px; color:var(--ink); } .walkaway ul{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .walkaway li{ display:flex; gap:14px; color:var(--ink-dim); font-size:.94rem; } .walkaway .idx{ font-family:var(--font-mono); color:var(--saffron); font-size:.8rem; flex:none; } /* Legacy phase rows (roadmap on vision/index) */ .phase-row{ display:grid; grid-template-columns:210px 1fr; gap:clamp(20px,4vw,48px); padding:clamp(28px,4vw,48px) 0; border-top:1px solid var(--hair); transition:border-color var(--dur), background var(--dur); } .phase-row:last-child{ border-bottom:1px solid var(--hair); } .phase-row:hover{ border-top-color:rgba(var(--saffron-rgb),.5); background:linear-gradient(90deg, rgba(var(--saffron-rgb),.04), transparent); } .phase-budget{ font-family:var(--font-display); font-size:2rem; line-height:1; color:var(--saffron); letter-spacing:.01em; margin-top:var(--s3); text-shadow:var(--saffron-glow); } .phase-items{ display:flex; flex-direction:column; gap:var(--s3); } .phase-item{ display:flex; gap:var(--s3); color:var(--ink-dim); font-size:.94rem; line-height:1.6; } .phase-item .idx{ font-family:var(--font-mono); font-size:.7rem; color:var(--saffron); letter-spacing:.1em; min-width:26px; padding-top:3px; flex:none; } /* Numbered step blocks (process pages) */ .step-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--saffron); } .step-title{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(1.1rem,2vw,1.45rem); line-height:1.25; letter-spacing:-.015em; margin-top:10px; color:var(--ink); } .step-divider{ height:1px; background:var(--hair); margin:var(--s5) 0; border:0; } /* ========================================================================== 19 · PROCESS ROWS (ruled rows + ghost numerals) ========================================================================== */ .how-list{ display:flex; flex-direction:column; } .how-row{ position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:clamp(28px,4vw,48px) 0; border-top:1px solid var(--hair); transition:background var(--dur); } .how-row:last-child{ border-bottom:1px solid var(--hair); } .how-row:hover{ background:linear-gradient(90deg, rgba(var(--saffron-rgb),.04), transparent); } .how-bgnum{ position:absolute; right:-2%; top:50%; transform:translateY(-50%); z-index:0; font-family:var(--font-display); font-size:clamp(7rem,16vw,16rem); line-height:.7; color:rgba(var(--ink-rgb),.04); pointer-events:none; user-select:none; } .how-main{ position:relative; z-index:1; max-width:60ch; } .how-eyebrow{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--saffron); } .how-title{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(1.25rem,2.4vw,1.9rem); line-height:1.2; letter-spacing:-.02em; margin:14px 0 12px; color:var(--ink); } .how-body{ color:var(--ink-dim); margin:0; } .how-meta{ position:relative; z-index:1; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); } /* Hover-indent list ("where you can contribute") */ .builtfor{ display:flex; flex-direction:column; } .builtfor li{ display:flex; align-items:center; gap:12px; padding:16px 0; border-top:1px solid var(--hair); font-family:var(--font-editorial); font-weight:600; font-size:1.1rem; color:var(--ink); transition:padding-left var(--dur) var(--spring), color var(--dur); } .builtfor li:last-child{ border-bottom:1px solid var(--hair); } .builtfor li .tick{ color:var(--saffron); font-family:var(--font-mono); flex:none; } .builtfor li:hover{ padding-left:14px; color:var(--saffron); } /* Contributor strip — hover-expand description, force-open on touch (≤480px) */ .teams-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,4vw,56px); } .teams-h{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:16px; } .teams-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; background:var(--hair); border:1px solid var(--hair); } .teams-card{ background:var(--bg-2); padding:clamp(22px,2.6vw,32px); } .teams-card h3{ font-family:var(--font-editorial); font-weight:700; font-size:1.1rem; letter-spacing:-.015em; margin:0 0 10px; color:var(--ink); } .teams-card p{ color:var(--ink-dim); font-size:.92rem; margin:0; } .teams-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; background:var(--hair); border:1px solid var(--hair); margin-top:40px; } .teams-cat{ background:var(--bg); padding:26px 24px; overflow:hidden; } .teams-cat-name{ display:block; font-family:var(--font-display); font-size:1.9rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); } .teams-cat-desc{ display:block; max-height:0; opacity:0; overflow:hidden; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-dim); transition:max-height .4s var(--spring), opacity var(--dur), margin-top .4s; } .teams-cat:hover .teams-cat-desc, .teams-cat:focus-within .teams-cat-desc{ max-height:80px; opacity:1; margin-top:10px; } .teams-cta{ margin-top:44px; } /* ========================================================================== 20 · PANELS: DECK · GYAN · COMPLIANCE LEDGER ========================================================================== */ .deck{ background:rgba(20,16,10,.7); border:1px solid var(--hair); border-radius:14px; overflow:hidden; } .deck-head{ display:flex; align-items:center; gap:14px; padding:12px 18px; border-bottom:1px solid var(--hair); font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; color:var(--ink-dim); } .deck-head .om{ font-family:var(--font-deva); color:var(--gold); font-size:1.1rem; letter-spacing:0; } .deck-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; background:var(--hair); } .deck-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:16px 18px; margin:0; border-top:1px solid var(--hair); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--ink-dim); } .hud-panel{ background:var(--bg-2); padding:clamp(22px,2.6vw,32px); } .hud-panel-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:16px; } .hud-panel.is-in .progress-bar > i, .hud-panel.is-in .progress-bar .fill{ width:var(--pct,0%); } /* GYAN 2×2 (गरीब · युवा · अन्नदाता · नारी) */ .dipp-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; background:var(--hair); border:1px solid var(--hair); border-radius:var(--r-lg); overflow:hidden; } .dipp-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .dipp-cell{ --track:var(--saffron); position:relative; background:var(--bg-2); padding:clamp(24px,3vw,34px); transition:background var(--dur); } .dipp-cell:hover{ background:var(--bg-3); } .dipp-cell:nth-child(2){ --track:var(--gold); } .dipp-cell:nth-child(3){ --track:var(--jade); } .dipp-cell:nth-child(4){ --track:var(--ruby); } .dipp-big{ font-family:var(--font-display); font-size:clamp(3.4rem,7vw,5.5rem); line-height:.9; letter-spacing:.01em; color:var(--track); text-shadow:0 0 24px color-mix(in srgb,var(--track) 40%,transparent); margin-bottom:var(--s3); } .dipp-big.gold{ color:var(--gold); } .dipp-big.jade{ color:var(--jade); } .dipp-big.ruby{ color:var(--ruby); } .dipp-hindi{ font-family:var(--font-deva); color:var(--gold); font-size:1.3rem; line-height:1.7; margin-top:var(--s2); } .dipp-title{ font-family:var(--font-editorial); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; margin-top:var(--s2); color:var(--ink); } .dipp-desc{ color:var(--ink-dim); font-size:.9rem; margin-top:8px; } /* Compliance ledger — the terminal panel repurposed as an auditable list. No liveness signals: nothing rotates, nothing pulses, nothing says LIVE. */ .ledger,.feed{ background:rgba(20,16,10,.7); border:1px solid var(--hair); border-radius:var(--r-sm); padding:18px; font-family:var(--font-mono); } .ledger-head,.feed-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); padding-bottom:14px; border-bottom:1px solid var(--hair); margin-bottom:8px; } .ledger ul,.feed ul{ margin:0; padding:0; list-style:none; } .ledger li,.feed li{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-size:.78rem; color:var(--ink); padding:12px 0; border-bottom:1px solid var(--hair-2); } .ledger li:last-child,.feed li:last-child{ border-bottom:0; } .ledger li .lx,.feed li .fx{ color:var(--saffron); } .ledger li .ldim,.feed li .fdim{ color:var(--ink-dim); margin-left:auto; } .ledger-callout,.feed-callout{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; margin-top:40px; padding-top:32px; border-top:1px solid var(--hair); } .feed-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); } .feed-stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; background:var(--hair); border:1px solid var(--hair); } /* ========================================================================== 21 · TABLES (transparency log / financials) ========================================================================== */ .table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--hair); border-radius:var(--r-md); } table,.log-table{ width:100%; border-collapse:collapse; font-size:.92rem; color:var(--ink); min-width:520px; } .table-wrap > table,.table-wrap > .log-table{ min-width:560px; } thead th,.log-table thead th{ font-family:var(--font-mono); font-weight:500; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); text-align:left; white-space:nowrap; padding:14px 16px; background:var(--bg-3); border-bottom:1px solid var(--hair); } tbody td,.log-table tbody td{ padding:14px 16px; vertical-align:middle; font-size:.9rem; color:var(--ink-dim); border-bottom:1px solid var(--hair); } tbody tr:nth-child(even) td,.log-table tbody tr:nth-child(even) td{ background:var(--bg-3); } tbody tr:hover td,.log-table tbody tr:hover td{ background:rgba(var(--saffron-rgb),.06); color:var(--ink); } tbody tr:last-child td,.log-table tbody tr:last-child td{ border-bottom:0; } caption{ caption-side:bottom; text-align:left; padding:12px 16px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; color:var(--ink-faint); } .td-month{ font-family:var(--font-editorial); font-weight:700; font-size:1.05rem; color:var(--saffron); white-space:nowrap; } .td-amount{ font-family:var(--font-mono); font-weight:500; color:var(--ink); white-space:nowrap; } .td-num{ font-family:var(--font-mono); text-align:right; color:var(--ink); } /* Key/value ledger rows (registration details) */ .detail-row{ display:flex; flex-direction:column; gap:5px; } .detail-row .key{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); } .detail-row .val{ font-family:var(--font-editorial); font-weight:700; font-size:1.05rem; color:var(--ink); letter-spacing:-.01em; } .detail-row .val.mono{ font-family:var(--font-mono); font-weight:400; font-size:.9rem; letter-spacing:.04em; } /* ========================================================================== 22 · FORMS ========================================================================== */ .form{ display:flex; flex-direction:column; gap:24px; max-width:560px; margin-top:36px; } .form--wide{ max-width:none; } .form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 22px; } .field{ display:flex; flex-direction:column; gap:8px; min-width:0; } .field label,.field-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); } .field .req{ color:var(--saffron); } .field-hint{ font-family:var(--font-ui); font-size:.78rem; color:var(--ink-faint); } /* Underline field — the editorial variant */ .field input, .field textarea{ background:transparent; color:var(--ink); border:0; border-bottom:1px solid var(--hair); font-family:var(--font-ui); font-size:1rem; line-height:1.6; padding:12px 2px; transition:border-color var(--dur), box-shadow var(--dur); } .field input::placeholder,.field textarea::placeholder{ color:rgba(176,160,140,.85); } .field input:hover,.field textarea:hover{ border-bottom-color:rgba(var(--ink-rgb),.24); } /* Focus keeps the accent underline AND a real 2px ring (brief §4.6) */ .field input:focus-visible,.field textarea:focus-visible{ outline:2px solid var(--saffron); outline-offset:2px; border-bottom-color:var(--saffron); box-shadow:0 1px 0 var(--saffron); } /* Boxed controls — inputs, textareas, selects */ .field-input,.field-textarea,.field-select, input[type="text"].boxed,select.boxed,textarea.boxed{ width:100%; min-width:0; padding:13px 15px; background:rgba(var(--ink-rgb),.03); color:var(--ink); border:1px solid var(--hair); border-radius:var(--r-md); font-family:var(--font-ui); font-size:1rem; line-height:1.5; transition:border-color .16s, box-shadow .16s, background .16s; } .field-input::placeholder,.field-textarea::placeholder{ color:rgba(176,160,140,.85); } .field-input:hover,.field-textarea:hover,.field-select:hover{ border-color:rgba(var(--ink-rgb),.24); } .field-input:focus,.field-textarea:focus,.field-select:focus{ border-color:var(--saffron); box-shadow:0 0 0 3px rgba(var(--saffron-rgb),.18); background:rgba(var(--ink-rgb),.05); } .field-input:focus-visible,.field-textarea:focus-visible,.field-select:focus-visible{ outline:2px solid var(--saffron); outline-offset:2px; } .field-textarea{ min-height:130px; resize:vertical; } .field-select{ cursor:pointer; appearance:none; -webkit-appearance:none; padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B0A08C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; } .field-select option{ background:var(--bg-2); color:var(--ink); } /* Radios & checkboxes */ .choice-list{ display:flex; flex-direction:column; gap:12px; } .choice-list--inline{ flex-direction:row; flex-wrap:wrap; gap:14px 22px; } .choice{ display:inline-flex; align-items:flex-start; gap:10px; min-height:44px; /* WCAG 2.5.8 target size (was ~23px) */ font-size:.95rem; color:var(--ink-dim); cursor:pointer; line-height:1.5; } .choice input[type="radio"], .choice input[type="checkbox"], input[type="radio"],input[type="checkbox"]{ appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; margin:2px 0 0; background:rgba(var(--ink-rgb),.04); border:1px solid var(--hair); border-radius:var(--r-xs); cursor:pointer; transition:border-color var(--dur-xs), background var(--dur-xs), box-shadow var(--dur-xs); } input[type="radio"]{ border-radius:50%; } input[type="radio"]:hover,input[type="checkbox"]:hover{ border-color:rgba(var(--saffron-rgb),.6); } input[type="checkbox"]:checked{ background:var(--saffron) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.6' stroke='%230A0705' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 10px no-repeat; border-color:var(--saffron); } input[type="radio"]:checked{ border-color:var(--saffron); background:radial-gradient(circle, var(--saffron) 0 42%, transparent 46%); } .choice input:focus-visible{ outline:2px solid var(--saffron); outline-offset:2px; } /* Error & status states */ .field-error, .field-input.field-error,.field-textarea.field-error,.field-select.field-error, [aria-invalid="true"]{ border-color:var(--ruby) !important; box-shadow:0 0 0 3px rgba(var(--ruby-rgb),.18) !important; } .fs-error,.field-msg{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--ruby); margin-top:2px; } .form-status{ min-height:1.2em; margin:0; font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; color:var(--ink-dim); } .form-status[data-kind="ok"]{ color:var(--jade); } .form-status[data-kind="warn"]{ color:var(--gold); } .form-status[data-kind="err"]{ color:var(--ruby); } .form[data-done="1"]{ opacity:.6; } .submit{ align-self:flex-start; } .form-note{ font-size:.82rem; color:var(--ink-faint); } .form-note a{ color:var(--saffron); border-bottom:1px dashed rgba(var(--saffron-rgb),.4); } /* Success panel after a submit */ .form-success{ margin-top:20px; padding:22px; border:1px solid rgba(var(--jade-rgb),.45); border-radius:var(--r-md); background:rgba(var(--jade-rgb),.07); animation:panelPop .3s var(--spring); } @keyframes panelPop{ from{ transform:translateY(10px); opacity:0; } to{ transform:none; opacity:1; } } /* ========================================================================== 23 · DONATION SELECTOR (currency tabs · cause tiles · amount chips) ========================================================================== */ .currency-tabs,.cur-tabs{ display:flex; flex-wrap:wrap; gap:8px; } .cur-tab{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; padding:8px 14px; border-radius:var(--r-pill); color:var(--ink-dim); border:1px solid var(--hair); background:rgba(var(--ink-rgb),.03); transition:color var(--dur-xs), border-color var(--dur-xs), background var(--dur-xs); } .cur-tab:hover{ color:var(--ink); border-color:rgba(var(--saffron-rgb),.45); } .cur-tab[aria-pressed="true"],.cur-tab.is-active{ color:var(--saffron); border-color:rgba(var(--saffron-rgb),.55); background:rgba(var(--saffron-rgb),.12); } .currency-symbol{ font-family:var(--font-mono); color:var(--saffron); } .choice-grid,.amount-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; } .choice-tile,.amount-tile{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:var(--s5) var(--s4); color:var(--ink); text-align:center; background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-md); cursor:pointer; transition:border-color .16s, background .16s, transform .16s var(--spring), box-shadow .16s; } .choice-tile:hover,.amount-tile:hover{ border-color:rgba(var(--saffron-rgb),.5); background:rgba(var(--saffron-rgb),.08); transform:translateY(-2px); box-shadow:var(--sh-xs); } .choice-tile[aria-pressed="true"],.amount-tile[aria-pressed="true"], .choice-tile.is-active,.amount-tile.is-active{ border-color:var(--saffron); background:rgba(var(--saffron-rgb),.14); box-shadow:0 0 0 3px rgba(var(--saffron-rgb),.14); } .choice-tile .c-icon{ color:var(--saffron); } .choice-tile .c-label{ font-family:var(--font-ui); font-size:.9rem; font-weight:600; } .choice-tile .c-meta,.amount-tile .sub{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; color:var(--ink-faint); } .amount-tile .amt{ font-family:var(--font-display); font-size:1.75rem; line-height:1; letter-spacing:.01em; color:var(--ink); } .amount-tile[aria-pressed="true"] .amt,.amount-tile.is-active .amt{ color:var(--saffron); text-shadow:var(--saffron-glow); } .custom-amount-wrap{ display:flex; align-items:center; gap:10px; padding:4px 6px 4px 14px; border:1px solid var(--hair); border-radius:var(--r-md); background:rgba(var(--ink-rgb),.03); } .custom-amount-wrap:focus-within{ border-color:var(--saffron); box-shadow:0 0 0 3px rgba(var(--saffron-rgb),.18); } .custom-amount-wrap input{ flex:1; min-width:0; background:transparent; border:0; color:var(--ink); font-family:var(--font-mono); font-size:1rem; padding:10px 0; } .custom-amount-wrap input:focus{ outline:none; } /* ========================================================================== 24 · BADGES · PILLS · TRUST MARKS ========================================================================== */ /* Canonical pill recipe: pill radius · mono · uppercase · accent @12-14% fill · accent @30-32% border. */ .tag,.pill,.badge-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:.65rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; padding:5px 11px; border-radius:var(--r-pill); color:var(--ink-dim); border:1px solid var(--hair); background:rgba(var(--ink-rgb),.03); } .tag.fire,.tag.saffron,.pill--saffron{ color:var(--saffron); border-color:rgba(var(--saffron-rgb),.32); background:rgba(var(--saffron-rgb),.12); } .tag.gold,.pill--gold{ color:var(--gold); border-color:rgba(var(--gold-rgb),.32); background:rgba(var(--gold-rgb),.12); } .tag.jade,.pill--jade,.tag.done{ color:var(--jade); border-color:rgba(var(--jade-rgb),.34); background:rgba(var(--jade-rgb),.12); } .tag.ruby,.pill--ruby{ color:var(--ruby); border-color:rgba(var(--ruby-rgb),.34); background:rgba(var(--ruby-rgb),.12); } .tag.umber{ color:var(--umber); border-color:rgba(var(--umber-rgb),.34); background:rgba(var(--umber-rgb),.12); } .tag.dark,.tag.pending{ color:var(--ink-dim); border-color:var(--hair); background:rgba(var(--ink-rgb),.04); } .tag.process{ color:var(--gold); border-color:rgba(var(--gold-rgb),.34); background:rgba(var(--gold-rgb),.10); } .status-dot{ width:6px; height:6px; border-radius:50%; flex:none; background:currentColor; display:inline-block; } /* Per-chip accent via inline --c (badge wall) */ .badge-chip{ color:var(--c,var(--saffron)); background:color-mix(in srgb,var(--c,var(--saffron)) 12%,transparent); border-color:color-mix(in srgb,var(--c,var(--saffron)) 30%,transparent); } /* Trust badges — the registration facts row */ .trust-badges{ display:flex; flex-wrap:wrap; gap:9px; } .trust-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(var(--gold-rgb),.3); background:rgba(var(--gold-rgb),.07); } .trust-badge svg{ width:14px; height:14px; } .trust-badge--neutral{ color:var(--ink-dim); border-color:var(--hair); background:rgba(var(--ink-rgb),.03); } .badge-wall{ display:flex; flex-wrap:wrap; gap:9px; } /* ========================================================================== 25 · PHOTOS · GALLERY · LIGHTBOX ========================================================================== */ .photo{ position:relative; overflow:hidden; min-height:200px; background:var(--bg-3) center / cover no-repeat; border:1px solid var(--hair); border-radius:var(--r-lg); } .photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(var(--bg-rgb),.72) 100%); } .photo img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; } .photo.lg{ min-height:380px; } .photo.md{ min-height:260px; } .photo.sm{ min-height:160px; } .photo-label{ position:absolute; z-index:2; bottom:14px; left:14px; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:rgba(var(--bg-rgb),.72); border:1px solid var(--hair); padding:5px 11px; border-radius:var(--r-pill); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .img-section{ width:100%; min-height:320px; overflow:hidden; border:1px solid var(--hair); border-radius:var(--r-xl); background:var(--bg-3) center / cover; } .img-section img{ width:100%; height:100%; object-fit:cover; } /* Gallery grid — hairline gaps, accent lift on hover */ .gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:2px; background:var(--hair); border:1px solid var(--hair); } .gallery--roomy{ gap:16px; background:none; border:0; } .gal-item{ position:relative; margin:0; overflow:hidden; background:var(--bg-2); aspect-ratio:4/3; cursor:zoom-in; } .gallery--roomy .gal-item{ border-radius:var(--r-md); border:1px solid var(--hair); } .gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--spring), filter .4s; } .gal-item:hover img,.gal-item:focus-within img{ transform:scale(1.04); filter:brightness(1.06); } .gal-cap{ position:absolute; inset:auto 0 0 0; z-index:1; padding:34px 14px 12px; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; color:var(--ink); background:linear-gradient(180deg,transparent,rgba(var(--bg-rgb),.55) 35%,rgba(var(--bg-rgb),.92)); } .gal-item::after{ content:""; position:absolute; inset:0; pointer-events:none; border:2px solid transparent; transition:border-color .3s; } .gal-item:hover::after,.gal-item:focus-within::after{ border-color:rgba(var(--saffron-rgb),.6); } /* Lightbox */ .lightbox{ position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; padding:clamp(16px,4vw,48px); background:rgba(var(--bg-rgb),.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity var(--dur) var(--spring), visibility var(--dur); } .lightbox[hidden]{ display:none; } .lightbox.is-open{ opacity:1; visibility:visible; } .lightbox img{ max-width:min(100%,1100px); max-height:78vh; width:auto; object-fit:contain; border:1px solid var(--hair); border-radius:var(--r-md); box-shadow:var(--sh-lg); } .lightbox figcaption,.lightbox__cap{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.06em; color:var(--ink-dim); text-align:center; max-width:60ch; } .lightbox__close{ position:absolute; top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px); width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--hair); border-radius:50%; background:rgba(var(--bg-rgb),.7); color:var(--ink); font-size:1.1rem; transition:border-color var(--dur), color var(--dur), transform var(--dur) var(--spring); } .lightbox__close:hover{ border-color:var(--saffron); color:var(--saffron); transform:rotate(90deg); } /* ========================================================================== 26 · QR · CALLOUTS · ASIDES ========================================================================== */ .qr-frame{ display:inline-flex; flex-direction:column; align-items:center; gap:14px; margin:30px auto 0; padding:22px 22px 18px; border:1.5px solid rgba(var(--saffron-rgb),.5); border-radius:var(--r-xl); background:linear-gradient(180deg, rgba(var(--saffron-rgb),.05), rgba(var(--bg-rgb),.55)); box-shadow:0 0 0 6px rgba(var(--saffron-rgb),.05), var(--sh-lg), 0 0 42px rgba(var(--saffron-rgb),.12); transition:transform var(--dur-xs) ease, box-shadow .2s ease; } .qr-frame:hover{ transform:translateY(-3px); box-shadow:0 0 0 6px rgba(var(--saffron-rgb),.08), 0 36px 84px rgba(0,0,0,.6), 0 0 56px rgba(var(--saffron-rgb),.26); } /* The white plate is required for scannability — keep it. */ .qr-frame img{ width:min(72vw,240px); height:auto; aspect-ratio:1; background:#fff; padding:12px; border-radius:var(--r-md); } .qr-frame__label{ font-family:var(--font-mono); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--saffron); } /* Accent callout: 1px accent @40% + accent @6% fill */ .callout,.trust-box,.policy-callout,.aside-card{ padding:clamp(20px,3vw,28px); border:1px solid rgba(var(--saffron-rgb),.4); border-radius:var(--r-md); background:rgba(var(--saffron-rgb),.06); color:var(--ink-dim); } .callout h3,.trust-box h3,.policy-callout h3,.aside-card h3{ font-family:var(--font-editorial); font-weight:700; font-size:1.1rem; color:var(--ink); margin:0 0 10px; letter-spacing:-.015em; } .callout--gold,.trust-box{ border-color:rgba(var(--gold-rgb),.4); background:rgba(var(--gold-rgb),.06); } .callout--jade{ border-color:rgba(var(--jade-rgb),.4); background:rgba(var(--jade-rgb),.06); } .callout--ruby{ border-color:rgba(var(--ruby-rgb),.4); background:rgba(var(--ruby-rgb),.06); } .callout--quiet{ border-color:var(--hair); background:var(--bg-2); } .callout--dashed{ border-style:dashed; border-color:rgba(var(--saffron-rgb),.35); background:rgba(var(--saffron-rgb),.04); } .trust-sidebar{ display:flex; flex-direction:column; gap:var(--s5); } /* Floating action buttons (optional) */ .fab-group{ position:fixed; right:20px; bottom:20px; z-index:var(--z-fab); display:flex; flex-direction:column; gap:10px; } .fab{ display:inline-flex; align-items:center; gap:9px; padding:11px 14px; border-radius:var(--r-lg); font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid rgba(var(--saffron-rgb),.45); background:rgba(var(--bg-rgb),.92); color:var(--ink); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 22px rgba(var(--saffron-rgb),.14); transition:transform .18s ease, box-shadow .18s ease; } .fab:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.6), 0 0 28px rgba(var(--saffron-rgb),.28); } .fab--solid{ background:var(--saffron-deep); color:#fff; border-color:var(--saffron-deep); } /* ========================================================================== 27 · TEAM / TRUSTEE / ROLE CARDS ========================================================================== */ .people-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px); } .person{ display:flex; flex-direction:column; gap:14px; padding:clamp(24px,3vw,34px); background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-lg); transition:border-color .32s, transform .32s var(--spring), box-shadow .32s; } .person:hover{ transform:translateY(-4px); border-color:rgba(var(--gold-rgb),.45); box-shadow:var(--sh-sm), 0 0 40px rgba(var(--gold-rgb),.1); } /* No trustee photographs exist — a gold monogram plate stands in for one. */ .person__monogram{ width:76px; height:76px; display:grid; place-items:center; border-radius:50%; font-family:var(--font-editorial); font-weight:700; font-size:1.7rem; letter-spacing:.02em; color:var(--gold); border:2px solid rgba(var(--gold-rgb),.55); background:rgba(var(--gold-rgb),.08); box-shadow:0 0 0 8px rgba(var(--gold-rgb),.06); } .person__photo img{ width:clamp(160px,34vw,220px); height:clamp(160px,34vw,220px); object-fit:cover; object-position:center 30%; border-radius:50%; border:2px solid rgba(var(--saffron-rgb),.55); box-shadow:0 0 0 8px rgba(var(--saffron-rgb),.06), var(--sh-md); } .person__name{ font-family:var(--font-editorial); font-weight:700; font-size:1.25rem; letter-spacing:-.015em; color:var(--ink); } .person__role{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--saffron); } .person__bio{ color:var(--ink-dim); font-size:.94rem; max-width:64ch; margin:0; } .person__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; } /* Volunteer role cards (join page) */ .role-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,22px); } .role-card{ --track:var(--saffron); display:flex; flex-direction:column; gap:12px; padding:clamp(22px,2.6vw,30px); background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-lg); transition:border-color .32s, transform .32s var(--spring), box-shadow .32s; } .role-card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--track) 45%,var(--hair)); box-shadow:0 18px 46px color-mix(in srgb,var(--track) 24%,transparent); } .role-icon{ width:42px; height:42px; display:grid; place-items:center; color:var(--track); border-radius:var(--r-md); border:1px solid color-mix(in srgb,var(--track) 30%,transparent); background:color-mix(in srgb,var(--track) 12%,transparent); } .role-title{ font-family:var(--font-editorial); font-weight:700; font-size:1.1rem; letter-spacing:-.015em; color:var(--ink); } .role-desc{ color:var(--ink-dim); font-size:.92rem; margin:0; flex:1; } .role-tag{ align-self:flex-start; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border-radius:var(--r-pill); color:var(--track); background:color-mix(in srgb,var(--track) 13%,transparent); border:1px solid color-mix(in srgb,var(--track) 32%,transparent); } .role-grid .role-card:nth-child(3n+2){ --track:var(--gold); } .role-grid .role-card:nth-child(3n+3){ --track:var(--jade); } /* ========================================================================== 28 · SDG TILES + MODAL / DETAIL BRIEF ========================================================================== */ .sdg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; } .sdg-tile{ --track:var(--saffron); display:flex; flex-direction:column; gap:6px; text-align:left; width:100%; padding:var(--s5); background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-md); transition:border-color .25s, transform .25s var(--spring), box-shadow .25s, background .25s; } .sdg-tile:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--track) 50%,var(--hair)); box-shadow:0 14px 34px color-mix(in srgb,var(--track) 22%,transparent); } .sdg-tile.active,.sdg-tile[aria-expanded="true"]{ border-color:var(--track); background:color-mix(in srgb,var(--track) 10%,var(--bg-2)); } .sdg-num{ font-family:var(--font-display); font-size:2.2rem; line-height:1; color:var(--track); letter-spacing:.01em; } .sdg-name{ font-family:var(--font-editorial); font-weight:700; font-size:.98rem; line-height:1.25; letter-spacing:-.01em; color:var(--ink); } .sdg-desc{ font-size:.82rem; line-height:1.6; color:var(--ink-dim); margin:0; } .sdg-tile-hint{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } .sdg-span-2{ grid-column:span 2; } /* Inline expanding brief under the grid */ .sdg-brief{ margin-top:16px; border:1px solid rgba(var(--saffron-rgb),.35); border-radius:var(--r-md); background:rgba(var(--saffron-rgb),.05); } .sdg-brief-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(20px,3vw,36px); padding:clamp(20px,3vw,32px); } .sdg-brief-title{ font-family:var(--font-editorial); font-weight:700; font-size:1.15rem; letter-spacing:-.015em; color:var(--saffron); } .sdg-brief-desc{ color:var(--ink-dim); font-size:.94rem; margin-top:10px; } .sdg-brief-skf{ border-left:2px solid rgba(var(--gold-rgb),.5); padding-left:18px; } .sdg-brief-skf-label{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; } .sdg-brief-skf ul{ display:flex; flex-direction:column; gap:8px; } .sdg-brief-skf li{ position:relative; padding-left:18px; color:var(--ink-dim); font-size:.9rem; line-height:1.6; } .sdg-brief-skf li::before{ content:"◆"; position:absolute; left:0; top:0; color:var(--gold); font-size:.6rem; line-height:1.9; } /* Modal */ .modal-overlay{ position:fixed; inset:0; z-index:var(--z-modal); display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,48px); background:rgba(var(--bg-rgb),.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:opacity var(--dur) var(--spring), visibility var(--dur); } .modal-overlay.open,.modal-overlay.is-open{ opacity:1; visibility:visible; } .modal-box{ position:relative; width:min(100%,720px); max-height:86vh; overflow-y:auto; padding:clamp(24px,4vw,40px); background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-lg); box-shadow:var(--sh-lg); transform:translateY(14px); transition:transform var(--dur) var(--spring); } .modal-overlay.open .modal-box,.modal-overlay.is-open .modal-box{ transform:none; } .modal-close{ position:absolute; top:14px; right:14px; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--hair); border-radius:50%; color:var(--ink-dim); background:rgba(var(--ink-rgb),.03); transition:color var(--dur), border-color var(--dur), transform var(--dur) var(--spring); } .modal-close:hover{ color:var(--saffron); border-color:var(--saffron); transform:rotate(90deg); } .modal-sdg-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--saffron); } .modal-sdg{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.2; letter-spacing:-.02em; color:var(--ink); margin:10px 0 14px; } .modal-feat-list{ display:flex; flex-direction:column; gap:10px; margin-top:18px; } .modal-feat-list li{ position:relative; padding-left:20px; color:var(--ink-dim); font-size:.94rem; line-height:1.65; } .modal-feat-list li::before{ content:"→"; position:absolute; left:0; top:0; color:var(--saffron); font-family:var(--font-mono); font-size:.8rem; } .modal-shloka-block{ margin-top:22px; padding:18px 20px; border-left:3px solid var(--gold); border-radius:0 var(--r-md) var(--r-md) 0; background:rgba(var(--gold-rgb),.06); font-family:var(--font-deva); color:var(--gold); font-size:1.05rem; line-height:1.8; } /* ========================================================================== 29 · LEGAL / LONG-FORM PAGES ========================================================================== */ .legal-page{ padding:clamp(48px,9vw,110px) 0; } .legal-wrap,.legal-body{ max-width:var(--measure); margin:0 auto; padding:0 var(--gutter); } .legal-back{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); } .legal-back:hover{ color:var(--saffron); } .legal-page h1{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(2rem,5vw,3.2rem); line-height:1.08; letter-spacing:-.02em; margin:18px 0 8px; color:var(--ink); } .legal-updated,.legal-meta{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 30px; } .legal-body h2,.legal-page h2{ font-family:var(--font-editorial); font-weight:700; font-size:1.3rem; letter-spacing:-.015em; margin:34px 0 8px; color:var(--ink); } .legal-body h3,.legal-page h3{ font-family:var(--font-editorial); font-weight:600; font-size:1.1rem; margin:24px 0 6px; color:var(--ink); } .legal-body p,.legal-page p{ color:var(--ink-dim); line-height:1.75; margin:0 0 14px; } .legal-body ul,.legal-page ul{ margin:0 0 16px; padding-left:0; } .legal-body li,.legal-page li{ position:relative; padding-left:20px; margin-bottom:8px; color:var(--ink-dim); line-height:1.7; } .legal-body li::before,.legal-page li::before{ content:"—"; position:absolute; left:0; top:0; color:var(--saffron); } .legal-body a,.legal-page a{ color:var(--saffron); border-bottom:1px solid rgba(var(--saffron-rgb),.35); } .legal-body a:hover,.legal-page a:hover{ border-bottom-color:var(--saffron); } .legal-foot{ margin-top:44px; padding-top:20px; border-top:1px solid var(--hair); font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; color:var(--ink-dim); } /* ========================================================================== 30 · FOOTER ========================================================================== */ .footer,footer.site-footer{ position:relative; z-index:var(--z-content); overflow:hidden; background:var(--bg); border-top:1px solid rgba(var(--saffron-rgb),.4); margin-top:clamp(64px,10vw,120px); } .footer::before,footer.site-footer::before{ content:""; position:absolute; inset:0; opacity:.03; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .footer-inner,footer.site-footer .inner{ position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; padding:clamp(56px,8vw,90px) var(--gutter) 40px; } /* Giant ghost wordmark */ /* Sized so a two-word mark ("SANATAN KUTUMB") still fits one line at ≥1100px */ .footer-mark{ font-family:var(--font-display); font-size:clamp(2.4rem,10vw,8.5rem); line-height:.85; letter-spacing:.02em; white-space:nowrap; color:rgba(var(--ink-rgb),.06); pointer-events:none; user-select:none; } .footer-mark--deva{ font-family:var(--font-deva); font-size:clamp(2.4rem,11vw,8rem); line-height:1.1; } .footer-top,.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin-top:20px; padding-top:40px; padding-bottom:40px; border-top:1px solid var(--hair); } .footer-brand .desc,.footer-tag{ color:var(--ink-dim); font-size:.92rem; max-width:44ch; margin-top:14px; } .footer-meta,.footer-ids{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin:18px 0 14px; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-dim); line-height:1.9; } .footer-ids{ display:block; } .footer-status{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s4); } .footer-col h3,.footer-grid h5{ font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin:0 0 16px; } .footer-col ul,.footer-grid ul{ display:flex; flex-direction:column; gap:11px; } .footer-col a,.footer-grid li,.footer-grid li a{ color:var(--ink-dim); font-size:.9rem; transition:color .2s; } .footer-col a:hover,.footer-grid li a:hover{ color:var(--saffron); } /* Social buttons — not links; they are labelled "coming soon" */ .footer-social{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s4); } .footer-social a,.social-btn{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--hair); border-radius:var(--r-md); color:var(--ink-dim); background:rgba(var(--ink-rgb),.03); opacity:.65; cursor:default; transition:color .15s, border-color .15s, background .15s, opacity .15s; } .footer-social a:hover,.social-btn:hover{ color:var(--ink); border-color:rgba(var(--ink-rgb),.24); background:rgba(var(--ink-rgb),.06); opacity:.9; } .footer-social a{ cursor:pointer; } .footer-social a:hover{ color:var(--saffron); border-color:var(--saffron); } .footer-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; padding-top:24px; border-top:1px solid var(--hair); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-dim); } .footer-bottom a{ color:var(--ink-dim); transition:color .2s; } .footer-bottom a:hover{ color:var(--saffron); } .footer-bottom .tokens{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; } .footer-domain{ color:var(--saffron); } /* ========================================================================== 31 · SCROLL REVEAL ========================================================================== */ [data-reveal],.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-lg) var(--spring), transform var(--dur-lg) var(--spring); transition-delay:calc(.08s * var(--i,0)); } [data-reveal].is-in,.reveal.is-in,.reveal.in{ opacity:1; transform:none; } .reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.40s; } .reveal.d6{ transition-delay:.48s; } /* Panel-scoped entrance for chips inside .hud-panel */ .hud-panel .badge-chip{ opacity:0; transform:scale(.6); } .hud-panel.is-in .badge-chip{ animation:chipPop .5s var(--spring) forwards; animation-delay:calc(.09s * var(--d,0)); } @keyframes chipPop{ 60%{ transform:scale(1.08); opacity:1; } 100%{ transform:scale(1); opacity:1; } } /* ========================================================================== 32 · UTILITIES ========================================================================== */ .mt-1{margin-top:var(--s1);} .mt-2{margin-top:var(--s2);} .mt-3{margin-top:var(--s3);} .mt-4{margin-top:var(--s4);} .mt-5{margin-top:var(--s5);} .mt-6{margin-top:var(--s6);} .mt-7{margin-top:var(--s7);} .mt-8{margin-top:var(--s8);} .mt-9{margin-top:var(--s9);} .mb-2{margin-bottom:var(--s2);} .mb-3{margin-bottom:var(--s3);} .mb-4{margin-bottom:var(--s4);} .mb-5{margin-bottom:var(--s5);} .mb-6{margin-bottom:var(--s6);} .mx-auto{ margin-inline:auto; } .no-wrap{ white-space:nowrap; } .full{ width:100%; } .relative{ position:relative; } .z1{ position:relative; z-index:1; } .hide{ display:none !important; } @media (max-width:640px){ .hide-sm{ display:none !important; } } @media (min-width:641px){ .only-sm{ display:none !important; } } /* ========================================================================== 33 · LEGACY COMPATIBILITY LAYER Aliases so markup and inline styles written against the previous light theme keep rendering correctly on the dark saffron ground. New pages should prefer the component names above. ========================================================================== */ :root{ --fire:var(--saffron); --fire-lt:#FF9445; --fire-dim:rgba(255,122,24,0.10); --fire-glo:rgba(255,122,24,0.18); --gold-lt:#EFC661; --ruby-lt:#E8705F; --jade-lt:#3FBA80; --umber-dim:rgba(192,138,78,0.10); --gold-dim:rgba(227,178,60,0.10); --ruby-dim:rgba(226,86,75,0.10); --jade-dim:rgba(46,158,104,0.10); --bg-1:var(--bg-2); --bg-4:#241C14; --ink-2:var(--ink-dim); --ink-3:var(--ink-dim); --ink-4:var(--ink-faint); --ink-5:var(--hair); --ink-6:var(--hair-2); --br:var(--hair); --br-2:rgba(246,239,228,0.2); --br-3:rgba(246,239,228,0.32); --font-body:var(--font-ui); --font-sans:var(--font-ui); --container:var(--wrap); --container-tight:var(--wrap-tight); --header-h:var(--nav-h); --r-sm-legacy:var(--r-sm); --ease:var(--spring); --ease-soft:cubic-bezier(.4,0,.2,1); } /* Legacy layout blocks that had no rules before but are referenced in markup */ .pillar-section{ position:relative; z-index:var(--z-content); padding:var(--section-pad) 0; } .pillar-layout{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center; } .pillar-layout.flip .pillar-visual{ order:2; } .pillar-text{ min-width:0; } .pillar-visual{ min-width:0; } .pillar-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); } .join-layout,.donate-layout{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px); align-items:start; } .trust-sidebar{ position:sticky; top:calc(var(--nav-h) + 32px); } /* Legacy pillar card → the mission-card treatment */ .pillar-card{ --track:var(--saffron); position:relative; display:flex; flex-direction:column; padding:clamp(24px,3vw,32px); background:var(--bg-2); border:1px solid var(--hair); border-top:2px solid color-mix(in srgb,var(--track) 55%,var(--hair)); border-radius:0 0 var(--r-lg) var(--r-lg); transition:transform .32s var(--spring), border-color .32s, box-shadow .32s, background .32s; } .pillar-card:hover{ transform:translateY(-4px); background:var(--bg-3); border-top-color:var(--track); box-shadow:0 18px 46px color-mix(in srgb,var(--track) 24%,transparent); } .pillar-card .p-num{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); } .pillar-card .p-name{ font-family:var(--font-editorial); font-weight:700; font-size:clamp(1.15rem,1.9vw,1.5rem); line-height:1.2; letter-spacing:-.015em; margin-top:var(--s3); color:var(--ink); } .pillar-card .p-desc{ font-size:.92rem; color:var(--ink-dim); margin-top:var(--s3); line-height:1.7; } .pillar-card .p-icon{ width:44px; height:44px; display:grid; place-items:center; margin-bottom:var(--s5); border-radius:var(--r-md); color:var(--track); border:1px solid color-mix(in srgb,var(--track) 30%,transparent); background:color-mix(in srgb,var(--track) 12%,transparent); transition:border-color .25s, background .25s; } .pillar-card:hover .p-icon{ border-color:color-mix(in srgb,var(--track) 50%,transparent); background:color-mix(in srgb,var(--track) 20%,transparent); } .pillar-card .p-link{ display:inline-flex; align-items:center; gap:7px; margin-top:var(--s5); font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--track); transition:gap .2s var(--spring); } .pillar-card:hover .p-link{ gap:11px; } /* Legacy hero eyebrow spacing */ .hero-eyebrow{ margin-bottom:var(--s5); } /* Legacy gallery figure wrapper */ .gallery figure{ margin:0; } /* ========================================================================== 33b · COMPONENTS ADDED FOR THE HOMEPAGE REBUILD Two groups: (a) CHROME GAPS — class names that assets/site.js injects on EVERY page but that had no rule yet (mobile menu inner nav, footer link row, language toggle, button spinner, form-success tick, shloka [Translate] button, lightbox nav/counter, gallery filter). (b) HOMEPAGE COMPONENTS — hero cut-out plate, honest "figures pending" note, marquee pause control (WCAG 2.2.2), campaign banner, SDG rail. ========================================================================== */ /* --- (a) chrome injected by site.js ------------------------------------- */ .mobile-menu__nav{ display:flex; flex-direction:column; gap:8px; } .mobile-menu__cta{ align-self:flex-start; margin-top:22px; } .footer-brand-col{ min-width:0; } .footer-links{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; } .footer-note{ color:var(--ink-faint); } .lang-toggle{ display:inline-flex; align-items:center; gap:4px; padding:3px; border:1px solid var(--hair); border-radius:var(--r-pill); } .lang-btn{ padding:6px 12px; font-size:.66rem; border-color:transparent; } .lang-btn[aria-pressed="true"],.lang-btn.is-active{ color:var(--saffron); background:rgba(var(--saffron-rgb),.14); border-color:rgba(var(--saffron-rgb),.4); } /* Disclosure button under a shloka. site.js creates it as .shloka-toggle.btn.btn-quiet.btn-sm when a page ships only the translation. */ .shloka-toggle{ margin-top:16px; } /* site.js looks for .shloka-translation; .shloka-trans is the CSS-side name. Both must render identically so either spelling works. */ .shloka-translation{ margin-top:16px; color:var(--ink-dim); font-family:var(--font-ui); font-style:italic; font-size:.98rem; line-height:1.7; max-width:56ch; } .shloka-block > .shloka-translation{ margin-inline:auto; } .shloka-aside > .shloka-translation{ margin-inline:0; } .btn-spinner{ width:13px; height:13px; flex:none; display:inline-block; margin-right:8px; opacity:.85; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:btnSpin .7s linear infinite; } @keyframes btnSpin{ to{ transform:rotate(360deg); } } .form-success__tick{ width:34px; height:34px; margin-bottom:12px; display:grid; place-items:center; border-radius:50%; background:rgba(var(--jade-rgb),.18); color:var(--jade); font-size:1rem; line-height:1; } .lightbox__figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; } .lightbox__img{ max-width:min(100%,1100px); max-height:78vh; } .lightbox__nav{ top:50%; transform:translateY(-50%); } .lightbox__prev{ left:clamp(12px,3vw,28px); right:auto; } .lightbox__next{ right:clamp(12px,3vw,28px); } .lightbox__nav:hover{ transform:translateY(-50%) scale(1.06); } .lightbox__caption{ text-align:center; } .nav-brand{ min-width:0; } .shloka-deva{ font-family:var(--font-deva); color:var(--gold); line-height:1.8; } .lightbox__count{ margin:0; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .gal-filter{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; padding:12px 16px; min-height:44px; border-radius:var(--r-pill); color:var(--ink-dim); border:1px solid var(--hair); background:rgba(var(--ink-rgb),.03); transition:color var(--dur-xs), border-color var(--dur-xs), background var(--dur-xs); } .gal-filter:hover{ color:var(--ink); border-color:rgba(var(--saffron-rgb),.45); } .gal-filter[aria-pressed="true"],.gal-filter.is-active{ color:var(--saffron); border-color:rgba(var(--saffron-rgb),.55); background:rgba(var(--saffron-rgb),.12); } /* No-JS fallback chrome. Header/footer are JS-injected, so a page that never runs its script would otherwise have no navigation and no contact details. */ .noscript-bar{ position:relative; z-index:var(--z-content); padding:16px var(--gutter); background:var(--bg-2); border-bottom:1px solid var(--hair); font-size:.86rem; color:var(--ink-dim); } .noscript-bar p{ margin:0 0 10px; } .noscript-bar ul{ display:flex; flex-wrap:wrap; gap:8px 18px; } .noscript-bar a{ color:var(--saffron); } /* --- (b) homepage components -------------------------------------------- */ /* Hero cut-out plate. assets/A-Photoroom.png is a transparent PNG cut-out, so it is lit from behind with a saffron bloom and a gold floor pool instead of being framed like a photograph. */ .hero-cutout{ position:relative; margin:0; min-width:0; display:flex; align-items:flex-end; justify-content:center; } .hero-cutout .mandala-mark{ width:min(100%,480px); opacity:.06; top:46%; } .hero-cutout::before{ content:""; position:absolute; z-index:0; left:50%; bottom:2%; transform:translateX(-50%); width:90%; height:72%; pointer-events:none; background:radial-gradient(58% 50% at 50% 66%, rgba(var(--saffron-rgb),.28), transparent 72%); } .hero-cutout::after{ content:""; position:absolute; z-index:0; left:50%; bottom:3%; transform:translateX(-50%); width:54%; height:26px; border-radius:50%; pointer-events:none; background:radial-gradient(ellipse at center, rgba(var(--gold-rgb),.42), transparent 70%); filter:blur(9px); } .hero__copy .shloka-block{ max-width:540px; } .hero-cutout picture{ position:relative; z-index:1; display:block; width:100%; } .hero-cutout img{ position:relative; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:44% 50%; max-height:min(66vh,600px); filter:drop-shadow(0 26px 54px rgba(0,0,0,.6)); } .hero-cutout img::before{ content:""; position:absolute; inset:0; border-radius:var(--r-md); background:linear-gradient(140deg,rgba(var(--saffron-rgb),.20), rgba(var(--gold-rgb),.12) 70%,transparent); } /* UN SDG composite logo used as a quiet link mark. The official artwork is navy-on-white, so it needs a light plate to be legible on --bg — the same rule the QR code follows: never repaint someone else's mark, back it. */ .sdg-mark{ display:inline-flex; align-items:center; opacity:.9; transition:opacity var(--dur); } .sdg-mark:hover{ opacity:1; } .sdg-mark img{ background:rgba(var(--ink-rgb),.93); padding:5px 9px; border-radius:var(--r-sm); aspect-ratio:213/61; height:auto; max-height:44px; object-fit:contain; font-size:0; /* no-image failure state stays 126x36 */ } /* Injected header: the brand is two long strings (wordmark + Sanskrit motto) and the nav carries eight items — both must stop wrapping inside a 64px bar. */ .site-header .brand,.nav .brand{ flex:none; flex-direction:column; align-items:flex-start; gap:1px; } .site-header .brand-name,.nav .brand-name{ white-space:nowrap; font-size:1.02rem; line-height:1.22; } .site-header .brand-deva,.nav .brand-deva{ white-space:nowrap; font-size:.66rem; } .nav-links a,nav.site-nav a{ white-space:nowrap; } /* The honest counterpart to the stat row: says plainly which figures are NOT published yet, instead of printing an unverifiable number. */ .hero-stats__note{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; max-width:80ch; margin-top:var(--s5); padding-top:var(--s4); border-top:1px dashed rgba(var(--saffron-rgb),.28); font-size:.84rem; line-height:1.65; color:var(--ink-faint); } .hero-stats__note .mono-label{ flex:none; color:var(--saffron); } .hero-stats__note > span:last-child{ flex:1 1 520px; min-width:0; } .hero-stats__note strong{ color:var(--ink-dim); font-weight:600; } .hero-stats__note a{ color:var(--saffron); border-bottom:1px dashed rgba(var(--saffron-rgb),.45); } .hero-stats__note a:hover{ border-bottom-color:var(--saffron); } /* Marquee header + pause control. WCAG 2.2.2 needs a real, keyboard-reachable pause for motion that runs longer than 5s — hover-pause alone is not enough. Implemented with a visually-hidden checkbox so it works with JS disabled. */ .logos__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:26px; } .logos__head .label{ margin-bottom:0; } .marquee-pause{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; padding:7px 13px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--hair); background:rgba(var(--ink-rgb),.03); transition:color var(--dur), border-color var(--dur), background var(--dur); } .marquee-pause:hover{ color:var(--saffron); border-color:rgba(var(--saffron-rgb),.5); } .mp-play{ display:none; } .marquee-toggle:checked ~ .marquee-mask .marquee{ animation-play-state:paused; } .marquee-toggle:checked ~ .logos__head .mp-pause{ display:none; } .marquee-toggle:checked ~ .logos__head .mp-play{ display:inline; } .marquee-toggle:focus-visible ~ .logos__head .marquee-pause{ outline:2px solid var(--saffron); outline-offset:3px; } /* Featured campaign banner (progress bar + dual CTA) */ .camp-banner{ position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:1.45fr .55fr; gap:clamp(24px,4vw,56px); align-items:center; padding:clamp(26px,4vw,44px); border:1px solid rgba(var(--saffron-rgb),.4); border-radius:var(--r-lg); background:linear-gradient(120deg, rgba(var(--saffron-rgb),.10), rgba(var(--bg-rgb),.4) 62%); box-shadow:var(--sh-md); } .camp-banner::before{ content:""; position:absolute; z-index:0; top:-18%; right:-8%; width:min(52%,420px); aspect-ratio:1; pointer-events:none; background:url("mandala.svg") center / contain no-repeat; opacity:.06; } .camp-banner > *{ position:relative; z-index:1; min-width:0; } .camp-banner__main{ min-width:0; } .camp-banner__side{ display:flex; flex-direction:column; } /* SDG rail — 17 goals as a horizontally scrolling strip. The official goal hex is used only as a 3px top rule; as text on --bg several of them fail AA (e.g. #a21942 = 2.7:1), so all wording stays on --ink / --gold. */ .sdg-strip{ display:flex; gap:10px; margin:0; padding:4px 2px 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:rgba(var(--saffron-rgb),.5) rgba(var(--ink-rgb),.06); } .sdg-strip::-webkit-scrollbar{ height:6px; } .sdg-strip::-webkit-scrollbar-track{ background:rgba(var(--ink-rgb),.06); border-radius:var(--r-pill); } .sdg-strip::-webkit-scrollbar-thumb{ background:rgba(var(--saffron-rgb),.45); border-radius:var(--r-pill); } .sdg-strip > li{ flex:none; scroll-snap-align:start; } .sdg-chip{ --track:var(--saffron); display:flex; flex-direction:column; gap:5px; width:172px; height:100%; padding:16px 16px 18px; background:var(--bg-2); border:1px solid var(--hair); border-top:3px solid var(--track); border-radius:var(--r-md); transition:transform .25s var(--spring), background .25s, box-shadow .25s, border-color .25s; } .sdg-chip--wide{ width:250px; } .sdg-chip:hover,.sdg-chip:focus-visible{ transform:translateY(-3px); background:var(--bg-3); border-color:rgba(var(--saffron-rgb),.4); border-top-color:var(--track); box-shadow:0 14px 34px rgba(0,0,0,.45); } .sdg-chip__num{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .sdg-chip__name{ font-family:var(--font-editorial); font-weight:700; font-size:.95rem; line-height:1.25; letter-spacing:-.01em; color:var(--ink); } .sdg-chip__deva{ font-family:var(--font-deva); font-size:.82rem; line-height:1.6; color:var(--gold); } /* Per-element hero entrance stagger (cyberkul staggers, the base rule does not) */ .hero__reveal{ animation-delay:calc(.35s + .09s * var(--i,0)); } @media (max-width:980px){ .hero-cutout{ max-width:420px; margin-inline:auto; } } @media (max-width:880px){ .camp-banner{ grid-template-columns:1fr; align-items:start; } } @media (max-width:520px){ .sdg-chip{ width:150px; } .sdg-chip--wide{ width:220px; } .logos__head{ justify-content:flex-start; } } @media (prefers-reduced-motion:reduce){ .sdg-chip:hover,.sdg-chip:focus-visible{ transform:none !important; } .lightbox__nav:hover{ transform:translateY(-50%) !important; } .btn-spinner{ animation:none !important; } } /* ========================================================================== 34 · RESPONSIVE Breakpoint ladder mirrors the reference: 1200 · 1100 · 980 · 880 · 860 · 820 · 780 · 700 · 680 · 640 · 560 · 520 · 480 · 360. ========================================================================== */ @media (max-width:1200px){ .mission-grid--4{ grid-template-columns:repeat(3,minmax(0,1fr)); } .g5,.g6{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:1100px){ .nav-tagline{ display:none; } .camp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } /* SK's primary nav carries 8 items + a CTA (cyberkul had 5), so the row needs tightening before it collapses at 980px. Measured at 981px: the stacked brand + 8 nowrap links + CTA fits only with these reductions. */ .nav-links,nav.site-nav{ gap:14px; } .nav-links a,nav.site-nav a{ font-size:.7rem; letter-spacing:.06em; } .nav-actions .btn,.header-actions .btn{ padding:9px 13px; font-size:.66rem; } .site-header .brand-name,.nav .brand-name{ font-size:.88rem; } .site-header .brand-deva,.nav .brand-deva{ font-size:.58rem; } .nav-inner,header.site-header .inner{ gap:14px; } } @media (max-width:980px){ .feed-grid{ grid-template-columns:1fr; } .people-grid,.role-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .dipp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .hero-split{ grid-template-columns:1fr; } .pillar-layout,.pillar-layout.flip{ grid-template-columns:1fr; } .pillar-layout.flip .pillar-visual{ order:0; } .join-layout,.donate-layout{ grid-template-columns:1fr; } .trust-sidebar{ position:static; } .sdg-brief-inner{ grid-template-columns:1fr; } } @media (max-width:880px){ .section-head{ grid-template-columns:1fr; gap:20px; } .teams-grid{ grid-template-columns:1fr; } .faq-grid{ grid-template-columns:1fr; } .faq-side{ position:static; } .footer-top,.footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } .mission-grid,.disc-grid,.pillar-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .split,.split.wide,.split.narrow{ grid-template-columns:1fr; gap:var(--s6); } .split--sticky > .split__side{ position:static; } .phase-row{ grid-template-columns:1fr; gap:var(--s5); } .form-grid{ grid-template-columns:1fr; } /* Timeline: horizontal → vertical, line draws on height instead of width */ .timeline,.timeline--4,.timeline--5{ grid-template-columns:1fr; gap:0; padding-top:0; padding-left:24px; } .timeline-line{ top:0; left:6px; width:1px; height:100%; } .timeline-line::after{ width:100%; height:0; transition:height 1.4s var(--spring); } .timeline.is-in .timeline-line::after{ width:100%; height:100%; } .tl-step{ padding:0 0 34px 24px; } .tl-node{ left:-24px; top:4px; } } /* NAV COLLAPSE — also the root fix for horizontal clipping on small screens. cyberkul collapsed at 860px with 5 links; measured at 880px an 8-link SK nav plus the CTA still overruns the viewport, so SK collapses at 980px. */ @media (max-width:980px){ .nav-links,nav.site-nav{ display:none; } .nav-actions,.header-actions{ display:none; } .nav-toggle,.menu-btn{ display:block; } .nav-inner,header.site-header .inner{ justify-content:space-between; gap:12px; } } @media (max-width:860px){ .fab-group{ right:14px; bottom:14px; } } @media (max-width:820px){ .mission-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .camp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:780px){ .deck-grid{ grid-template-columns:1fr; } .hair-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:700px){ .hero{ min-height:0; padding-top:clamp(40px,10vw,80px); } .hero__media img{ object-position:center 25%; } .stat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:680px){ .vp-grid,.vp-grid--2{ grid-template-columns:1fr; } .teams-strip,.teams-cards{ grid-template-columns:1fr; } .walkaway ul{ grid-template-columns:1fr; } .hair-grid--3{ grid-template-columns:1fr; } .people-grid,.role-grid{ grid-template-columns:1fr; } } @media (max-width:640px){ .how-row{ grid-template-columns:1fr; } .how-bgnum{ right:-6%; opacity:.9; } .g2,.g3,.g4,.g5,.g6{ grid-template-columns:1fr; } .hero-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); } .section-head{ margin-bottom:clamp(28px,7vw,44px); } .sdg-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); } .sdg-span-2{ grid-column:span 1; } } @media (max-width:560px){ .mission-av,.disc-av{ height:104px; } .mission-av img,.disc-av img{ height:102px; } .photo-rail__card{ width:104px; height:138px; } .photo-rail__track{ gap:14px; } .quote-mark{ font-size:9rem; top:2%; left:2%; } .gallery{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); } } @media (max-width:520px){ .mission-grid,.disc-grid,.pillar-grid,.camp-grid,.mission-grid--4{ grid-template-columns:1fr; } .footer-top,.footer-grid{ grid-template-columns:1fr; } .hair-grid--2,.hair-grid--4{ grid-template-columns:1fr; } .btn-row{ flex-direction:column; align-items:stretch; } .btn-row .btn{ width:100%; justify-content:center; } .dipp-grid{ grid-template-columns:1fr; } .table-wrap{ border-radius:var(--r-sm); } } @media (max-width:480px){ /* Hover-only affordances must be permanently open where hover cannot exist */ .teams-cat-desc{ max-height:none; opacity:1; margin-top:10px; } .stat-grid,.stat-grid--2,.feed-stats{ grid-template-columns:1fr; } .hero-stats{ grid-template-columns:1fr 1fr; } .choice-grid,.amount-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } .teams-cta .btn,.hero-actions .btn{ width:100%; justify-content:center; } .test-tabs{ gap:2px; } .modal-box{ padding:22px 18px; } } @media (max-width:520px){ .footer-mark{ white-space:normal; } } @media (max-width:360px){ :root{ --gutter:16px; } .choice-grid,.amount-row{ grid-template-columns:1fr; } .marquee-item{ padding:0 20px; } .footer-mark{ font-size:2.4rem; } } /* ========================================================================== 35 · REDUCED MOTION The global wildcard is NOT enough: anything whose RESTING state is opacity:0 / transform must be explicitly restored, or it stays invisible. Add every new animated component to the list below. ========================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html{ scroll-behavior:auto !important; } /* Resting-hidden elements → visible */ [data-reveal],.reveal, .hero__reveal, .tl-step, .badge-chip,.hud-panel .badge-chip, .test-slide.is-active, .mobile-menu a,.mobile-nav a:not(.btn), .modal-box{ opacity:1 !important; transform:none !important; } /* Inactive carousel slides must stay hidden but not animate */ .test-slide:not(.is-active){ opacity:0 !important; } /* Force-complete progress-style animations */ .timeline-line::after{ width:100% !important; height:100% !important; transition:none !important; } .progress-bar > i,.progress-bar .fill,.bar .fill{ transition:none !important; } .test-tab.is-active .bar::after{ animation:none !important; width:100% !important; } /* Kill loops and infinite motion */ .marquee,.ticker-track{ animation:none !important; flex-wrap:wrap; width:100%; } .marquee-row[aria-hidden="true"],.ticker-track [aria-hidden="true"]{ display:none; } .photo-rail__track{ animation:none !important; flex-wrap:wrap; width:100%; } .brand__dot,.mark-dot,.hero__cue,.btn--pulse, .tag.process .status-dot{ animation:none !important; } /* No hover translations */ .btn:hover,.mission-card:hover,.disc-card:hover,.camp-card:hover, .card.hoverable:hover,.card--hover:hover,.person:hover,.role-card:hover, .sdg-tile:hover,.qr-frame:hover,.fab:hover,.choice-tile:hover,.amount-tile:hover, .pillar-card:hover{ transform:none !important; } .gal-item:hover img,.gal-item:focus-within img{ transform:none !important; } } /* ========================================================================== 36 · PRINT (receipts, transparency reports, legal pages) ========================================================================== */ @media print{ .nav,header.site-header,.mobile-menu,.mobile-nav,.scroll-progress, .sk-atmosphere,.tcd-atmosphere,.sk-noise,.tcd-noise,.fab-group, .marquee-mask,.logos,.ticker,.skip-link,.hero__cue{ display:none !important; } html,body{ background:#fff !important; color:#000 !important; } .h-section,.h1,.h2,.h3,.h4,.hero__title,.display{ color:#000 !important; } .body-text,.body,.body-sm,p,li,td,th{ color:#222 !important; } a{ color:#000 !important; text-decoration:underline; } .card,.panel,.mission-card,.camp-card,.person,.role-card,.callout{ background:#fff !important; border-color:#bbb !important; box-shadow:none !important; } .footer,footer.site-footer{ border-top:1px solid #bbb !important; } .table-wrap{ overflow:visible !important; border-color:#bbb !important; } thead th,tbody td{ border-color:#bbb !important; background:#fff !important; color:#000 !important; } [data-reveal],.reveal{ opacity:1 !important; transform:none !important; } } /* ========================================================================== 37 · CAMPAIGN MEDIA — real photograph frame + honest photo placeholder Appended for campaigns.html. Nothing above is modified. · .camp-figure a credited photograph inside the featured campaign banner · .camp-ph PRD §4.6 gradient placeholder, used ONLY where a campaign has not run yet, so no field photograph can exist. ========================================================================== */ .camp-figure{ position:relative; margin:0 0 18px; border:1px solid var(--hair); border-radius:var(--r-md); overflow:hidden; background:var(--bg-3); } .camp-figure img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; } .camp-figure figcaption{ padding:9px 12px; border-top:1px solid var(--hair); background:var(--bg-2); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); } .camp-ph{ position:absolute; inset:0; z-index:1; /* above .camp-card__media::after scrim */ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:16px; text-align:center; background:linear-gradient(135deg, rgba(var(--saffron-rgb),.20), rgba(var(--gold-rgb),.14)); } .camp-ph svg{ width:38px; height:38px; color:var(--gold); opacity:.85; } .camp-ph > span{ max-width:24ch; font-family:var(--font-mono); font-size:.64rem; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); } /* ========================================================================== 37 · IMPACT PAGE (impact.html) — appended 2026-08-14 Scoped to .impact-* so no sibling page's component changes. Everything else on that page reuses the existing system (.stat-grid, .gallery--roomy, .gal-item, .gal-filter, .callout, .testimonials, .card). ========================================================================== */ /* Pillar filter row above the gallery (buttons themselves are .gal-filter) */ .impact-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:var(--s5); } /* PRD §6.6 asks for 3-up desktop / 2-up mobile rather than the auto-fill default */ .impact-gallery{ grid-template-columns:repeat(3,minmax(0,1fr)); } /* .gal-item is a real