/* ========================================================================== Ada and Children Upper Room International Academy — main stylesheet Loaded asynchronously. Critical above-the-fold rules live inline in . ========================================================================== */ /* -------------------------------------------------------------------------- 1. NAVIGATION -------------------------------------------------------------------------- */ .nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-5)} .nav__list{display:none;align-items:center;gap:.15rem} .nav__link{ --nav-underline:0; position:relative; display:block; padding:.6rem .78rem; border-radius:var(--r-sm); font-size:.925rem; font-weight:500; color:var(--ink-2); text-decoration:none; white-space:nowrap; transition:color var(--dur) var(--ease-soft); } .nav__link::after{ content:""; position:absolute; left:.78rem; right:.78rem; bottom:.34rem; height:2px; background:var(--gold); border-radius:2px; transform:scaleX(var(--nav-underline)); transform-origin:left; transition:transform var(--dur) var(--ease-out); } .nav__link:hover{color:var(--ink);--nav-underline:1} .nav__link[aria-current="page"]{color:var(--ink);font-weight:600;--nav-underline:1} .nav__cta{display:none} .nav-toggle{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:2.85rem; height:2.85rem; border-radius:var(--r-sm); color:var(--ink); transition:background var(--dur) var(--ease-soft); } .nav-toggle:hover{background:var(--cream-2)} .nav-toggle__bars{position:relative;width:1.25rem;height:.75rem} .nav-toggle__bars span{ position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; transition:transform var(--dur) var(--ease-out),opacity var(--dur-fast) linear; } .nav-toggle__bars span:nth-child(1){top:0} .nav-toggle__bars span:nth-child(2){top:50%;margin-top:-1px} .nav-toggle__bars span:nth-child(3){bottom:0} [aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(.343rem) rotate(45deg)} [aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0;transform:scaleX(.4)} [aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-.343rem) rotate(-45deg)} /* Mobile drawer */ .nav-drawer{ position:fixed; inset:0; z-index:150; display:grid; grid-template-rows:1fr; visibility:hidden; pointer-events:none; } .nav-drawer[data-open="true"]{visibility:visible;pointer-events:auto} .nav-drawer__scrim{ position:absolute; inset:0; background:rgba(10,30,51,.55); opacity:0; transition:opacity var(--dur) var(--ease-soft); } @supports (backdrop-filter:blur(2px)){.nav-drawer__scrim{backdrop-filter:blur(3px)}} .nav-drawer[data-open="true"] .nav-drawer__scrim{opacity:1} .nav-drawer__panel{ position:absolute; inset-block:0; right:0; width:min(23rem,88vw); background:var(--cream); box-shadow:var(--shadow-3); display:flex; flex-direction:column; padding:var(--sp-5) var(--sp-5) var(--sp-6); overflow-y:auto; overscroll-behavior:contain; transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out); } .nav-drawer[data-open="true"] .nav-drawer__panel{transform:translateX(0)} .nav-drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-5)} .nav-drawer__title{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700} .nav-drawer__close{ display:inline-flex;align-items:center;justify-content:center; width:2.75rem;height:2.75rem;border-radius:var(--r-sm);color:var(--ink); transition:background var(--dur) var(--ease-soft); } .nav-drawer__close:hover{background:var(--cream-2)} .nav-drawer__list{display:flex;flex-direction:column;gap:.15rem} .nav-drawer__link{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-height:3rem; padding:.7rem .85rem; border-radius:var(--r-md); font-size:1.06rem; font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--border); transition:background var(--dur) var(--ease-soft),padding-left var(--dur) var(--ease-out); } .nav-drawer__link:hover{background:var(--cream-2);color:var(--ink);padding-left:1.15rem} .nav-drawer__link[aria-current="page"]{color:var(--gold-ink);font-weight:700} .nav-drawer__link .chev{width:.85rem;height:.85rem;opacity:.4} .nav-drawer__foot{margin-top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-3)} .nav-drawer__foot .btn{width:100%} .nav-drawer__contact{margin-top:var(--sp-5);font-size:var(--step--1);color:var(--muted);line-height:1.7} @media (min-width:62rem){ .nav__list{display:flex} .nav__cta{display:inline-flex} .nav-toggle{display:none} .nav-drawer{display:none} } /* -------------------------------------------------------------------------- 2. SECTIONS & SECTION HEADERS -------------------------------------------------------------------------- */ .section{padding-block:clamp(3.5rem,8vw,6.5rem)} .section--tight{padding-block:clamp(2.5rem,5vw,4rem)} .section--cream2{background:var(--cream-2)} .section--surface{background:var(--surface)} .section--navy{background:var(--navy-deep);color:var(--on-navy)} .section--navy h2,.section--navy h3,.section--navy h4{color:var(--on-navy)} .section--navy p{color:var(--on-navy-muted)} /* Skip rendering work for off-screen sections on slow devices */ .section:not(.hero):not(.section--eager){content-visibility:auto;contain-intrinsic-size:auto 640px} .section-head{max-width:52ch;margin-bottom:clamp(2rem,4vw,3.25rem)} .section-head--center{margin-inline:auto;text-align:center} .section-head--wide{max-width:64ch} .eyebrow{ display:inline-flex; align-items:center; gap:.55rem; margin-bottom:var(--sp-4); font-size:.68rem; font-weight:700; letter-spacing:.19em; text-transform:uppercase; color:var(--gold-ink); } .eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--gold);border-radius:2px} .section-head--center .eyebrow::after{content:"";width:1.6rem;height:2px;background:var(--gold);border-radius:2px} .section--navy .eyebrow{color:var(--gold-bright)} .section--navy .eyebrow::before,.section--navy .eyebrow::after{background:var(--gold-bright)} .lede{font-size:var(--step-1);color:var(--muted);margin-top:var(--sp-4);line-height:1.6} .section--navy .lede{color:var(--on-navy-muted)} /* -------------------------------------------------------------------------- 3. GRIDS -------------------------------------------------------------------------- */ .grid{display:grid;gap:var(--sp-5)} .grid--2{grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))} .grid--3{grid-template-columns:repeat(auto-fit,minmax(min(16.5rem,100%),1fr))} .grid--4{grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))} .split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center} @media (min-width:56rem){ .split{grid-template-columns:1fr 1fr} .split--wide-left{grid-template-columns:1.15fr .85fr} .split--wide-right{grid-template-columns:.85fr 1.15fr} .split--flip>*:first-child{order:2} } /* -------------------------------------------------------------------------- 4. CARDS -------------------------------------------------------------------------- */ .card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(1.4rem,2.5vw,2rem); box-shadow:var(--shadow-1); overflow:hidden; transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease-soft); } .card::after{ content:""; position:absolute; inset-inline:0; top:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-slow) var(--ease-out); } .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-3);border-color:transparent} .card:hover::after{transform:scaleX(1)} .card:focus-within{border-color:var(--navy)} .card__icon{ width:3.1rem; height:3.1rem; margin-bottom:var(--sp-4); border-radius:var(--r-md); background:var(--gold-wash); color:var(--gold-ink); display:grid; place-items:center; transition:transform var(--dur-slow) var(--ease-out),background var(--dur) var(--ease-soft); } .card__icon svg{width:1.6rem;height:1.6rem} .card:hover .card__icon{transform:scale(1.07) rotate(-4deg);background:#F6E4C0} .card h3{margin-bottom:var(--sp-3);font-size:var(--step-1)} .card p{color:var(--muted);font-size:var(--step--1);line-height:1.7} .card__link{ display:inline-flex; align-items:center; gap:.45rem; margin-top:var(--sp-4); font-weight:600; font-size:var(--step--1); color:var(--gold-ink); text-decoration:none; } .card__link svg{width:.9rem;height:.9rem;transition:transform var(--dur) var(--ease-out)} .card__link:hover svg,.card:hover .card__link svg{transform:translateX(4px)} /* Whole-card click target that keeps the link as the accessible name */ .card--linked .card__link::before{content:"";position:absolute;inset:0} .card--navy{background:var(--navy);border-color:rgba(251,247,241,.14);color:var(--on-navy)} .card--navy h3{color:var(--on-navy)} .card--navy p{color:var(--on-navy-muted)} .card--navy .card__icon{background:rgba(233,180,76,.16);color:var(--gold-bright)} .card--flat{box-shadow:none;background:transparent;border-color:var(--border)} /* -------------------------------------------------------------------------- 5. STATS -------------------------------------------------------------------------- */ .stats{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr))} .stat{position:relative;padding-left:var(--sp-5);border-left:2px solid var(--gold)} .section--navy .stat{border-left-color:var(--gold-bright)} .stat__num{ font-family:var(--font-display); font-weight:700; line-height:1; font-size:var(--step-4); letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; } .section--navy .stat__num{color:var(--on-navy)} .stat__label{ margin-top:var(--sp-2); font-size:var(--step--1); color:var(--muted); line-height:1.5; } .section--navy .stat__label{color:var(--on-navy-muted)} /* -------------------------------------------------------------------------- 6. HERO ARTWORK -------------------------------------------------------------------------- */ .hero__sky{ background: radial-gradient(120% 85% at 78% 8%,rgba(233,180,76,.30) 0%,rgba(233,180,76,0) 55%), radial-gradient(95% 70% at 12% 96%,rgba(168,69,43,.28) 0%,rgba(168,69,43,0) 60%), linear-gradient(168deg,#0A1E33 0%,#123A5E 52%,#0E2A45 100%); } .hero__grain{ position:absolute; inset:0; z-index:2; opacity:.5; mix-blend-mode:overlay; pointer-events:none; background-image:url("../img/grain.svg"); background-size:180px 180px; } .hero__inner{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center} @media (min-width:60rem){ .hero__inner{grid-template-columns:1.08fr .92fr} } .hero__badge{ display:inline-flex; align-items:center; gap:.6rem; margin-bottom:var(--sp-5); padding:.42rem .95rem .42rem .5rem; border-radius:var(--r-pill); background:rgba(251,247,241,.09); border:1px solid rgba(233,180,76,.4); font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-bright); } .hero__badge svg{width:1rem;height:1rem} .hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)} .hero__facts{ margin-top:clamp(1.75rem,4vw,2.5rem); padding-top:var(--sp-5); border-top:1px solid rgba(251,247,241,.16); display:grid; gap:var(--sp-4) var(--sp-5); grid-template-columns:repeat(auto-fit,minmax(min(7.5rem,100%),1fr)); } .hero__fact dt{ font-size:.66rem;letter-spacing:.17em;text-transform:uppercase; color:var(--gold-bright);font-weight:700;margin-bottom:.3rem; } .hero__fact dd{margin:0;color:var(--on-navy);font-size:var(--step--1);line-height:1.55;font-weight:500} /* Hero card (right column) */ .hero__panel{ position:relative; z-index:3; background:rgba(251,247,241,.07); border:1px solid rgba(251,247,241,.16); border-radius:var(--r-xl); padding:clamp(1.5rem,3vw,2.1rem); box-shadow:var(--shadow-3); } @supports (backdrop-filter:blur(10px)){ .hero__panel{backdrop-filter:blur(12px) saturate(1.3)} } .hero__panel h2{font-size:var(--step-2);color:var(--on-navy);margin-bottom:var(--sp-2)} .hero__panel-sub{color:var(--on-navy-muted);font-size:var(--step--1);margin-bottom:var(--sp-5)} .bell{display:flex;flex-direction:column;gap:.1rem} .bell__row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-4); padding:.62rem 0; border-bottom:1px solid rgba(251,247,241,.12); } .bell__row:last-child{border-bottom:0} .bell__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--gold-bright)} .bell__row--dim .bell__dot{background:rgba(251,247,241,.3)} .bell__label{color:var(--on-navy);font-size:var(--step--1);font-weight:500} .bell__time{ color:var(--gold-bright); font-size:var(--step--1); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; } .bell__row--dim .bell__time{color:var(--on-navy-muted)} /* -------------------------------------------------------------------------- 7. PAGE HEADER (interior pages) -------------------------------------------------------------------------- */ .page-head{ position:relative; overflow:hidden; isolation:isolate; background:var(--navy-deep); color:var(--on-navy); padding-block:clamp(3rem,7vw,5rem) clamp(3rem,7vw,4.5rem); } .page-head::before{ content:""; position:absolute; inset:0; z-index:0; background: radial-gradient(85% 120% at 88% 0%,rgba(233,180,76,.24) 0%,rgba(233,180,76,0) 58%), radial-gradient(70% 100% at 0% 100%,rgba(168,69,43,.22) 0%,rgba(168,69,43,0) 62%); } .page-head::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:3.75rem; z-index:1; background-image:url("../img/pattern-band.svg"); background-size:auto 100%; background-repeat:repeat-x; opacity:.1; } .page-head>*{position:relative;z-index:2} .page-head h1{color:var(--on-navy);max-width:20ch} .page-head .lede{color:var(--on-navy-muted);max-width:56ch} .breadcrumb{margin-bottom:var(--sp-5)} .breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--step--1)} .breadcrumb li{display:flex;align-items:center;gap:.5rem;color:var(--on-navy-muted)} .breadcrumb li::after{content:"/";color:rgba(251,247,241,.32)} .breadcrumb li:last-child::after{display:none} .breadcrumb a{color:var(--on-navy-muted);text-decoration:none} .breadcrumb a:hover{color:var(--gold-bright)} .breadcrumb [aria-current="page"]{color:var(--on-navy);font-weight:600} /* -------------------------------------------------------------------------- 8. FEATURE / MEDIA BLOCKS -------------------------------------------------------------------------- */ .figure-art{ position:relative; border-radius:var(--r-xl); overflow:hidden; background:var(--navy-deep); box-shadow:var(--shadow-3); aspect-ratio:4/3; /* reserves space — keeps CLS at 0 */ } .figure-art>svg,.figure-art>img{width:100%;height:100%;object-fit:cover;display:block} .figure-art--wide{aspect-ratio:16/9} .figure-art--square{aspect-ratio:1/1} .figure-art__caption{ position:absolute; inset-inline:0; bottom:0; z-index:2; padding:var(--sp-6) var(--sp-5) var(--sp-4); background:linear-gradient(to top,rgba(10,30,51,.9),rgba(10,30,51,0)); color:var(--on-navy); font-size:var(--step--1); font-weight:500; } .art-stack{position:relative} .art-stack__accent{ position:absolute; z-index:-1; border-radius:var(--r-xl); inset:auto -1.15rem -1.15rem auto; width:62%; height:62%; background:var(--gold-wash); border:1px solid var(--border); } .art-stack__accent--tl{inset:-1.15rem auto auto -1.15rem} .feature-list{display:flex;flex-direction:column;gap:var(--sp-5);margin-top:var(--sp-6)} .feature{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:start} .feature__icon{ width:2.6rem;height:2.6rem;border-radius:var(--r-md);flex:0 0 auto; background:var(--gold-wash);color:var(--gold-ink);display:grid;place-items:center; } .section--navy .feature__icon{background:rgba(233,180,76,.16);color:var(--gold-bright)} .feature__icon svg{width:1.35rem;height:1.35rem} .feature h3{font-size:var(--step-1);margin-bottom:.35rem} .feature p{color:var(--muted);font-size:var(--step--1);line-height:1.7} .section--navy .feature p{color:var(--on-navy-muted)} /* -------------------------------------------------------------------------- 9. PROSE (policy pages) -------------------------------------------------------------------------- */ .prose{max-width:68ch} .prose>*+*{margin-top:var(--sp-5)} .prose h2{font-size:var(--step-2);margin-top:var(--sp-8);scroll-margin-top:calc(var(--header-h) + 2rem)} .prose h2:first-child{margin-top:0} .prose h3{font-size:var(--step-1);margin-top:var(--sp-6)} .prose p,.prose li{color:var(--ink-2);line-height:1.78} .prose ul,.prose ol{padding-left:1.35rem;display:flex;flex-direction:column;gap:var(--sp-3)} .prose ul{list-style:none;padding-left:0} .prose ul li{position:relative;padding-left:1.6rem} .prose ul li::before{ content:""; position:absolute; left:.3rem; top:.72em; width:.42rem;height:.42rem;border-radius:50%;background:var(--gold); } .prose ol{list-style:decimal;padding-left:1.5rem} .prose ol li::marker{color:var(--gold-ink);font-weight:700} .prose strong{color:var(--ink);font-weight:650} .prose a{color:var(--gold-ink);font-weight:500} .prose hr{border:0;border-top:1px solid var(--border);margin-block:var(--sp-7)} .policy-meta{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-7); background:var(--cream-2); border:1px solid var(--border); border-radius:var(--r-md); font-size:var(--step--1); color:var(--muted); } .policy-meta strong{color:var(--ink);font-weight:650} /* Sticky in-page table of contents */ .toc{font-size:var(--step--1)} .toc__title{ font-size:.66rem;letter-spacing:.19em;text-transform:uppercase; color:var(--muted);font-weight:700;margin-bottom:var(--sp-4); } .toc ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:.1rem} .toc a{ display:block;padding:.5rem .8rem;border-radius:var(--r-sm); color:var(--muted);text-decoration:none;border-left:2px solid var(--border); transition:color var(--dur) var(--ease-soft),border-color var(--dur) var(--ease-soft),background var(--dur) var(--ease-soft); } .toc a:hover{color:var(--ink);background:var(--cream-2);border-left-color:var(--gold)} .toc a[aria-current="true"]{color:var(--ink);font-weight:600;border-left-color:var(--gold);background:var(--gold-wash)} .layout-doc{display:grid;gap:clamp(2rem,5vw,3.5rem)} @media (min-width:60rem){ .layout-doc{grid-template-columns:15.5rem 1fr;align-items:start} .layout-doc__aside{position:sticky;top:calc(var(--header-h) + 1.5rem)} } /* -------------------------------------------------------------------------- 10. CALLOUTS -------------------------------------------------------------------------- */ .callout{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); padding:var(--sp-5); border-radius:var(--r-md); background:var(--gold-wash); border:1px solid #EBD9B4; border-left:4px solid var(--gold); } .callout__icon{width:1.4rem;height:1.4rem;color:var(--gold-ink);margin-top:.15rem;flex:0 0 auto} .callout h3{font-size:var(--step-0);font-family:var(--font-sans);font-weight:700;margin-bottom:.3rem} .callout p{color:var(--ink-2);font-size:var(--step--1);line-height:1.7} .callout p+p{margin-top:var(--sp-3)} .callout--info{background:#EEF4F9;border-color:#D3E2EE;border-left-color:var(--navy)} .callout--info .callout__icon{color:var(--navy)} /* -------------------------------------------------------------------------- 11. ACCORDION (native details/summary — keyboard-free by default) -------------------------------------------------------------------------- */ .accordion{display:flex;flex-direction:column;gap:var(--sp-3)} .acc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; transition:border-color var(--dur) var(--ease-soft),box-shadow var(--dur) var(--ease-soft); } .acc[open]{border-color:#DCCFB6;box-shadow:var(--shadow-1)} .acc__summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:1.05rem clamp(1rem,2.5vw,1.4rem); cursor:pointer; list-style:none; font-weight:600; font-size:var(--step-0); color:var(--ink); min-height:3.2rem; transition:background var(--dur) var(--ease-soft); } .acc__summary::-webkit-details-marker{display:none} .acc__summary:hover{background:var(--cream-2)} .acc__summary:focus-visible{outline-offset:-3px} .acc__chev{ width:1.1rem;height:1.1rem;flex:0 0 auto;color:var(--gold-ink); transition:transform var(--dur) var(--ease-out); } .acc[open] .acc__chev{transform:rotate(180deg)} .acc__body{padding:0 clamp(1rem,2.5vw,1.4rem) 1.3rem} .acc__body p,.acc__body li{color:var(--muted);font-size:var(--step--1);line-height:1.72} .acc[open] .acc__body{animation:accIn var(--dur-slow) var(--ease-out) both} @keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* -------------------------------------------------------------------------- 12. SUPPLY CHECKLIST -------------------------------------------------------------------------- */ .supplies{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fill,minmax(min(17.5rem,100%),1fr)); counter-reset:supply; } .supply{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); align-items:start; padding:.95rem 1.1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); transition:transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease-soft),box-shadow var(--dur) var(--ease-soft); } .supply:hover{transform:translateX(3px);border-color:#DCCFB6;box-shadow:var(--shadow-1)} .supply__n{ counter-increment:supply; width:1.85rem;height:1.85rem;border-radius:50%; background:var(--navy-deep); color:var(--gold-bright); display:grid; place-items:center; font-size:.76rem; font-weight:700; font-variant-numeric:tabular-nums; flex:0 0 auto; } .supply__n::before{content:counter(supply)} .supply__t{font-weight:600;font-size:var(--step--1);line-height:1.45} .supply__d{color:var(--muted);font-size:.82rem;margin-top:.18rem;line-height:1.5} .supply--optional{background:var(--cream-2);border-style:dashed} .supply--optional .supply__n{background:var(--muted);color:var(--cream)} /* -------------------------------------------------------------------------- 13. SCHEDULE TABLE -------------------------------------------------------------------------- */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md)} .table-wrap:focus-visible{outline:3px solid var(--navy);outline-offset:2px} table.data{width:100%;border-collapse:collapse;background:var(--surface);min-width:34rem} table.data caption{ text-align:left;padding-bottom:var(--sp-4);color:var(--muted);font-size:var(--step--1); } table.data th,table.data td{ padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--border); font-size:var(--step--1); } table.data thead th{ background:var(--navy-deep); color:var(--on-navy); font-weight:600; font-size:.74rem; letter-spacing:.11em; text-transform:uppercase; border-bottom:0; white-space:nowrap; } table.data thead th:first-child{border-top-left-radius:var(--r-md)} table.data thead th:last-child{border-top-right-radius:var(--r-md)} table.data tbody tr:last-child td{border-bottom:0} table.data tbody tr{transition:background var(--dur-fast) var(--ease-soft)} table.data tbody tr:hover{background:var(--gold-wash)} table.data td:first-child{font-weight:600;color:var(--ink)} table.data .t-time{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--gold-ink);font-weight:600} /* -------------------------------------------------------------------------- 14. TIMELINE -------------------------------------------------------------------------- */ .timeline{position:relative;display:flex;flex-direction:column;gap:var(--sp-6);padding-left:2.5rem} .timeline::before{ content:""; position:absolute; left:.87rem; top:.6rem; bottom:.6rem; width:2px; background:linear-gradient(to bottom,var(--gold),var(--border)); } .tl-item{position:relative} .tl-item::before{ content:""; position:absolute; left:-2.5rem; top:.3rem; width:1.75rem;height:1.75rem;border-radius:50%; background:var(--cream); border:2px solid var(--gold); box-shadow:0 0 0 5px var(--cream); } .tl-item::after{ content:""; position:absolute; left:-1.94rem; top:.94rem; width:.63rem;height:.63rem;border-radius:50%;background:var(--gold); } .section--cream2 .tl-item::before{background:var(--cream-2);box-shadow:0 0 0 5px var(--cream-2)} .tl-item h3{font-size:var(--step-1);margin-bottom:.3rem} .tl-item p{color:var(--muted);font-size:var(--step--1);line-height:1.7} .tl-step{ display:inline-block;margin-bottom:.5rem;font-size:.66rem;font-weight:700; letter-spacing:.17em;text-transform:uppercase;color:var(--gold-ink); } /* -------------------------------------------------------------------------- 15. QUOTE -------------------------------------------------------------------------- */ .quote{position:relative;padding:clamp(1.75rem,4vw,3rem);border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--border)} .quote__mark{ position:absolute; top:1rem; left:1.35rem; font-family:var(--font-display); font-size:5.5rem; line-height:1; color:var(--gold-wash); z-index:0; user-select:none; } .quote blockquote{position:relative;z-index:1;font-family:var(--font-display);font-size:var(--step-2);line-height:1.42;color:var(--ink);letter-spacing:-.012em} .quote figcaption{position:relative;z-index:1;margin-top:var(--sp-5);display:flex;align-items:center;gap:var(--sp-4)} .avatar{ width:3rem;height:3rem;border-radius:50%;flex:0 0 auto;display:grid;place-items:center; background:var(--navy-deep);color:var(--gold-bright); font-family:var(--font-display);font-weight:700;font-size:1.06rem;letter-spacing:.01em; } .avatar--lg{width:4.5rem;height:4.5rem;font-size:1.5rem} .quote__who{font-weight:650;font-size:var(--step--1)} .quote__role{color:var(--muted);font-size:.84rem} /* -------------------------------------------------------------------------- 16. FORMS -------------------------------------------------------------------------- */ .form{display:flex;flex-direction:column;gap:var(--sp-5)} .field{display:flex;flex-direction:column;gap:.45rem} .field label{font-weight:600;font-size:var(--step--1);color:var(--ink)} .field .req{color:var(--clay);margin-left:.15rem} .field__hint{font-size:.82rem;color:var(--muted);line-height:1.5} .field input,.field textarea,.field select{ width:100%; padding:.78rem .95rem; min-height:2.9rem; background:var(--surface); color:var(--ink); border:1.5px solid var(--border-strong); border-radius:var(--r-sm); font-size:var(--step-0); line-height:1.5; transition:border-color var(--dur) var(--ease-soft),box-shadow var(--dur) var(--ease-soft); } .field textarea{min-height:8.5rem;resize:vertical} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%230E2338' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:.75rem;padding-right:2.5rem} .field input:hover,.field textarea:hover,.field select:hover{border-color:var(--navy-soft)} .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(18,58,94,.18); } .field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none} .field[data-invalid="true"] input,.field[data-invalid="true"] textarea,.field[data-invalid="true"] select{ border-color:var(--clay);box-shadow:0 0 0 3px rgba(168,69,43,.15); } .field__error{ display:none; align-items:center; gap:.4rem; color:var(--clay); font-size:.84rem; font-weight:600; } .field__error svg{width:.95rem;height:.95rem;flex:0 0 auto} .field[data-invalid="true"] .field__error{display:flex} .form__status{ padding:var(--sp-4) var(--sp-5); border-radius:var(--r-md); font-size:var(--step--1); font-weight:500; line-height:1.6; } .form__status:empty{display:none} .form__status[data-tone="ok"]{background:#E7F2ED;border:1px solid #BFDCD0;color:#14523F} .form__status[data-tone="error"]{background:#FBEDE9;border:1px solid #EBCFC6;color:#8A3320} .form-grid{display:grid;gap:var(--sp-5)} @media (min-width:44rem){.form-grid--2{grid-template-columns:1fr 1fr}} /* -------------------------------------------------------------------------- 17. CONTACT CARDS -------------------------------------------------------------------------- */ .contact-card{ display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); align-items:start; padding:var(--sp-5); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out); } .contact-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)} .contact-card__icon{ width:2.75rem;height:2.75rem;border-radius:var(--r-md);flex:0 0 auto; background:var(--navy-deep);color:var(--gold-bright);display:grid;place-items:center; } .contact-card__icon svg{width:1.3rem;height:1.3rem} .contact-card dt{ font-size:.66rem;letter-spacing:.17em;text-transform:uppercase; color:var(--muted);font-weight:700;margin-bottom:.3rem; } .contact-card dd{margin:0;font-size:var(--step-0);font-weight:600;line-height:1.5} .contact-card dd a{color:var(--ink);text-decoration:none} .contact-card dd a:hover{color:var(--gold-ink);text-decoration:underline} .contact-card__note{display:block;font-weight:400;color:var(--muted);font-size:.84rem;margin-top:.25rem;line-height:1.5} /* -------------------------------------------------------------------------- 18. CTA BAND -------------------------------------------------------------------------- */ .cta-band{position:relative;overflow:hidden;isolation:isolate;background:var(--navy-deep);color:var(--on-navy)} .cta-band::before{ content:"";position:absolute;inset:0;z-index:0; background: radial-gradient(70% 130% at 15% 10%,rgba(233,180,76,.26) 0%,rgba(233,180,76,0) 60%), radial-gradient(60% 110% at 92% 90%,rgba(168,69,43,.26) 0%,rgba(168,69,43,0) 62%); } .cta-band__inner{position:relative;z-index:1;text-align:center;padding-block:clamp(3.25rem,7vw,5.25rem)} .cta-band h2{color:var(--on-navy);max-width:22ch;margin-inline:auto} .cta-band p{color:var(--on-navy-muted);max-width:52ch;margin-inline:auto;margin-top:var(--sp-4);font-size:var(--step-1)} .cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-6)} /* -------------------------------------------------------------------------- 19. FOOTER -------------------------------------------------------------------------- */ .site-footer{background:var(--ink);color:var(--on-navy);padding-block:clamp(3rem,6vw,4.5rem) var(--sp-6)} .site-footer a{color:var(--on-navy-muted);text-decoration:none} .site-footer a:hover{color:var(--gold-bright);text-decoration:underline} .footer-grid{display:grid;gap:var(--sp-7);grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr))} @media (min-width:56rem){.footer-grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}} .footer-brand .brand__name,.footer-brand .brand{color:var(--on-navy)} .footer-brand p{color:var(--on-navy-muted);font-size:var(--step--1);line-height:1.7;margin-top:var(--sp-4);max-width:34ch} .footer-col h2{ font-family:var(--font-sans); font-size:.66rem; letter-spacing:.19em; text-transform:uppercase; color:var(--gold-bright); font-weight:700; margin-bottom:var(--sp-4); } .footer-col ul{display:flex;flex-direction:column;gap:.6rem;font-size:var(--step--1)} .footer-col li{line-height:1.5} .footer-col a{display:inline-block;padding-block:.1rem} .footer-bottom{ margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:var(--sp-5); border-top:1px solid rgba(251,247,241,.14); display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5); align-items:center; justify-content:space-between; font-size:.84rem; color:var(--on-navy-muted); } .footer-legal{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5)} /* -------------------------------------------------------------------------- 20. DECORATIVE MOTIFS -------------------------------------------------------------------------- */ .motif-band{height:.5rem;background-image:url("../img/pattern-band.svg");background-size:auto 100%;background-repeat:repeat-x;opacity:.85} .deco-dots{ position:absolute;z-index:0;pointer-events:none;opacity:.5; background-image:radial-gradient(var(--gold) 1.2px,transparent 1.2px); background-size:14px 14px; } .has-deco{position:relative;isolation:isolate} .has-deco>*{position:relative;z-index:1} /* -------------------------------------------------------------------------- 21. BACK TO TOP -------------------------------------------------------------------------- */ .to-top{ position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:90; width:2.9rem; height:2.9rem; border-radius:50%; display:grid; place-items:center; background:var(--navy-deep); color:var(--gold-bright); box-shadow:var(--shadow-2); opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition:opacity var(--dur) var(--ease-soft),transform var(--dur) var(--ease-out),background var(--dur) var(--ease-soft); } .to-top[data-visible="true"]{opacity:1;transform:none;pointer-events:auto} .to-top:hover{background:var(--navy)} .to-top svg{width:1.1rem;height:1.1rem} /* -------------------------------------------------------------------------- 22. MOTION — scroll reveals & entrances Only `transform` and `opacity` are animated: both run on the compositor, so they never trigger layout or paint on the main thread. -------------------------------------------------------------------------- */ .js [data-reveal]{ opacity:0; transform:translate3d(0,var(--reveal-y,18px),0) scale(var(--reveal-s,1)); transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out); transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; } .js [data-reveal="left"]{--reveal-y:0;transform:translate3d(-24px,0,0)} .js [data-reveal="right"]{--reveal-y:0;transform:translate3d(24px,0,0)} .js [data-reveal="scale"]{--reveal-y:10px;--reveal-s:.96} .js [data-reveal].is-revealed{opacity:1;transform:none;will-change:auto} /* Staggered children */ .js [data-stagger]:not(.is-settled)>*{ opacity:0; transform:translate3d(0,18px,0); transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out); } .js [data-stagger].is-revealed:not(.is-settled)>*{opacity:1;transform:none} .js [data-stagger].is-revealed:not(.is-settled)>*:nth-child(1){transition-delay:0ms} .js [data-stagger].is-revealed:not(.is-settled)>*:nth-child(2){transition-delay:70ms} .js [data-stagger].is-revealed:not(.is-settled)>*:nth-child(3){transition-delay:140ms} .js [data-stagger].is-revealed:not(.is-settled)>*:nth-child(4){transition-delay:210ms} .js [data-stagger].is-revealed:not(.is-settled)>*:nth-child(5){transition-delay:280ms} .js [data-stagger].is-revealed:not(.is-settled)>*:nth-child(6){transition-delay:350ms} .js [data-stagger].is-revealed:not(.is-settled)>*:nth-child(7){transition-delay:420ms} .js [data-stagger].is-revealed:not(.is-settled)>*:nth-child(8){transition-delay:490ms} .js [data-stagger].is-revealed:not(.is-settled)>*:nth-child(n+9){transition-delay:560ms} /* Hero entrance — runs immediately, no observer needed */ .hero__inner>*{animation:heroIn 900ms var(--ease-out) backwards} .hero__inner>*:nth-child(2){animation-delay:130ms} @keyframes heroIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}} .hero__scene{animation:sceneIn 1400ms var(--ease-out) 120ms backwards} @keyframes sceneIn{from{opacity:0;transform:translate3d(0,24px,0)}to{opacity:1;transform:none}} /* Gentle ambient float for hero art layers */ .float-slow{animation:floatY 9s var(--ease-soft) infinite} .float-slower{animation:floatY 13s var(--ease-soft) infinite reverse} @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* Underline sweep for text links in body copy */ .link-sweep{ position:relative;text-decoration:none;color:var(--gold-ink);font-weight:600; background-image:linear-gradient(var(--gold),var(--gold)); background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat; transition:background-size var(--dur) var(--ease-out),color var(--dur) var(--ease-soft); padding-bottom:2px; } .link-sweep:hover,.link-sweep:focus-visible{background-size:100% 2px;color:var(--clay)} /* -------------------------------------------------------------------------- 23. REDUCED MOTION — honours the OS setting completely -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important} .hero__inner>*,.hero__scene{animation:none;opacity:1;transform:none} .card:hover,.contact-card:hover,.btn:hover,.supply:hover{transform:none} .float-slow,.float-slower{animation:none} } /* -------------------------------------------------------------------------- 24. DATA SAVER — drop non-essential decoration when the user asks for it -------------------------------------------------------------------------- */ @media (prefers-reduced-data:reduce){ .hero__grain,.deco-dots,.art-stack__accent{display:none} .page-head::after{display:none} } /* -------------------------------------------------------------------------- 25. FORCED COLORS (Windows High Contrast) -------------------------------------------------------------------------- */ @media (forced-colors:active){ .btn{border:1px solid ButtonText} .card,.supply,.contact-card,.acc{border:1px solid CanvasText} .nav__link[aria-current="page"]{outline:1px solid CanvasText} .hero__grain,.deco-dots{display:none} :focus-visible{outline:3px solid Highlight} } /* -------------------------------------------------------------------------- 26. PRINT — the supply list is the page families actually print -------------------------------------------------------------------------- */ @media print{ @page{margin:16mm} html,body{background:#fff!important;color:#000!important;font-size:11pt} .site-header,.nav-drawer,.to-top,.cta-band,.site-footer,.hero__bg, .motif-band,.deco-dots,.breadcrumb,.skip-link,.no-print{display:none!important} .hero,.page-head{background:#fff!important;color:#000!important;padding-block:0 1rem!important} .hero h1,.page-head h1,.hero__lede,.page-head .lede{color:#000!important} .section{padding-block:.75rem!important;content-visibility:visible!important} .card,.supply,.acc,.contact-card{ box-shadow:none!important;border:1px solid #999!important; break-inside:avoid;page-break-inside:avoid; } .supplies{grid-template-columns:1fr 1fr} .acc__body{display:block!important} h1,h2,h3{break-after:avoid;page-break-after:avoid} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;word-break:break-all} a[href^="#"]::after,a[href^="tel"]::after,a[href^="mailto"]::after{content:""} [data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important} } /* -------------------------------------------------------------------------- 27. UTILITIES -------------------------------------------------------------------------- */ .text-center{text-align:center} .mt-0{margin-top:0} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)} .mt-7{margin-top:var(--sp-7)} .mb-5{margin-bottom:var(--sp-5)} .mb-6{margin-bottom:var(--sp-6)} .flow>*+*{margin-top:var(--sp-4)} .flow-lg>*+*{margin-top:var(--sp-5)} .cluster{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center} .tag{ display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .75rem; border-radius:var(--r-pill);background:var(--gold-wash);color:var(--gold-ink); font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; border:1px solid #EBD9B4; } .tag--navy{background:rgba(18,58,94,.09);color:var(--navy);border-color:rgba(18,58,94,.18)} .tag--green{background:#E7F2ED;color:#14523F;border-color:#BFDCD0} /* -------------------------------------------------------------------------- 28. PHOTOGRAPHY — responsive, blur-up, low-bandwidth aware -------------------------------------------------------------------------- */ .ph{ position:relative; margin:0; overflow:hidden; border-radius:var(--r-xl); background-color:var(--navy-deep); background-image:var(--lqip); background-size:cover; background-position:center; } .ph--bare{border-radius:0} .ph img{width:100%;height:100%;object-fit:cover;display:block} .ph picture,.ph .ph-open{display:block;height:100%} /* Blur-up: photo fades over its inlined placeholder. Gated on .js so the image is never hidden when scripts fail. */ .js .ph img{opacity:0;transform:scale(1.025);transition:opacity .7s var(--ease-soft),transform 1.2s var(--ease-out)} .js .ph img.is-loaded{opacity:1;transform:none} .ph-open{ display:block; width:100%; padding:0; border-radius:inherit; cursor:zoom-in; } .ph-open:focus-visible{outline-offset:4px} .figure-art .ph, .figure-art.ph{border-radius:0} /* Inner-image scroll drift (figure depth). The .is-loaded variant must restate the transform at equal-or-higher specificity than the blur-up rule's `transform:none`, or loading a photo silently kills its drift. Transition covers opacity only — the drift updates every frame. */ .js [data-plx-inner] img{ transform:scale(1.12) translate3d(0,var(--plx-y,0px),0); transition:opacity .7s var(--ease-soft); } .js [data-plx-inner] img.is-loaded{ opacity:1; transform:scale(1.12) translate3d(0,var(--plx-y,0px),0); } /* -------------------------------------------------------------------------- 29. PHOTO BANDS — full-bleed interludes with a line of text -------------------------------------------------------------------------- */ .band{ position:relative; isolation:isolate; overflow:hidden; background:var(--navy-deep); color:var(--on-navy); min-height:clamp(18rem,44vh,26rem); display:grid; align-items:end; } .band__media{position:absolute;inset:-12% 0;z-index:0} .band__media .ph{position:absolute;inset:0;border-radius:0;background-image:var(--lqip)} .band::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top,rgba(10,30,51,.93) 0%,rgba(10,30,51,.55) 34%,rgba(10,30,51,.22) 70%,rgba(10,30,51,.3) 100%); } .band__inner{position:relative;z-index:2;padding-block:clamp(2rem,5vw,3.25rem)} .band__quote{ font-family:var(--font-display); font-size:var(--step-3); line-height:1.2; letter-spacing:-.015em; color:var(--on-navy); max-width:24ch; text-wrap:balance; } .band__attr{margin-top:var(--sp-3);color:var(--gold-bright);font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase} /* -------------------------------------------------------------------------- 30. 3D TILT CARDS (fine pointers only; JS sets the custom properties) -------------------------------------------------------------------------- */ @media (hover:hover) and (pointer:fine){ .js [data-tilt]{ transform:perspective(52.5rem) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--tilt-lift,0)); transition:transform .5s var(--ease-out),box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease-soft); } .js [data-tilt].is-tilting{transition:box-shadow var(--dur-slow) var(--ease-out)} .js [data-tilt]::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; opacity:var(--glare-o,0); background:radial-gradient(34rem circle at var(--glare-x,50%) var(--glare-y,50%), rgba(251,247,241,.16), transparent 42%); transition:opacity var(--dur) var(--ease-soft); } .js .card[data-tilt]:hover{transform:perspective(52.5rem) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px)} } /* -------------------------------------------------------------------------- 31. LIGHTBOX — native , keyboard-first -------------------------------------------------------------------------- */ .lightbox{ border:0; padding:0; margin:auto; background:transparent; width:min(96vw,72rem); max-height:92vh; overflow:visible; } .lightbox::backdrop{background:rgba(7,20,34,.9)} @supports (backdrop-filter:blur(6px)){.lightbox::backdrop{backdrop-filter:blur(7px)}} .lightbox__stage{position:relative;display:grid;gap:var(--sp-4)} .lightbox__img{ width:100%; max-height:78vh; object-fit:contain; border-radius:var(--r-lg); box-shadow:var(--shadow-3); background:var(--navy-deep); } .lightbox__bar{display:flex;align-items:center;gap:var(--sp-4);color:var(--on-navy)} .lightbox__caption{font-size:var(--step--1);color:var(--on-navy-muted);margin-right:auto} .lightbox__count{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--on-navy-muted)} .lightbox__btn{ display:inline-grid; place-items:center; width:2.9rem; height:2.9rem; flex:0 0 auto; border-radius:50%; background:rgba(251,247,241,.1); color:var(--on-navy); transition:background var(--dur) var(--ease-soft),transform var(--dur-fast) var(--ease-out); } .lightbox__btn:hover{background:rgba(251,247,241,.22);transform:scale(1.06)} .lightbox__btn svg{width:1.15rem;height:1.15rem} .lightbox__btn[disabled]{opacity:.35;pointer-events:none} .js body.lightbox-open{overflow:hidden} /* -------------------------------------------------------------------------- 32. GALLERY GRID -------------------------------------------------------------------------- */ .gallery{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr))} .gallery .ph{aspect-ratio:4/3;border-radius:var(--r-lg)} .gallery .ph-open{transition:transform var(--dur-slow) var(--ease-out)} .gallery .ph-open:hover{transform:translateY(-4px)} /* -------------------------------------------------------------------------- 33. CROSS-PAGE TRANSITIONS (progressive; Chromium only, free elsewhere) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} ::view-transition-old(root){animation:vtOut 240ms var(--ease-soft) both} ::view-transition-new(root){animation:vtIn 320ms var(--ease-out) both} } @keyframes vtOut{to{opacity:0;transform:translateY(-8px)}} @keyframes vtIn{from{opacity:0;transform:translateY(10px)}} /* Motion & data preferences for the new systems */ @media (prefers-reduced-motion:reduce){ .js .ph img{opacity:1;transform:none;transition:none} .js [data-tilt]{transform:none!important} .js [data-plx],.js [data-plx-inner] img,.hero__layer{transform:none!important} } @media (prefers-reduced-data:reduce){ .band{min-height:14rem} } /* -------------------------------------------------------------------------- 34. GIVING — amount selector (real radios, styled) -------------------------------------------------------------------------- */ .amt-set{border:0;padding:0;margin:0 0 var(--sp-5)} .amt-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(6.4rem,1fr))} .amt{position:relative;display:block;cursor:pointer} .amt input{position:absolute;inset:0;opacity:0;cursor:pointer} .amt__box{ display:flex; align-items:center; justify-content:center; gap:.15rem; min-height:3.4rem; padding:.6rem .5rem; border-radius:var(--r-md); background:var(--surface); border:1.5px solid var(--border-strong); font-family:var(--font-display); font-size:1.35rem; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur) var(--ease-soft), background var(--dur) var(--ease-soft),box-shadow var(--dur) var(--ease-soft); } .amt__cur{font-size:.85rem;align-self:flex-start;margin-top:.42rem;color:var(--gold-ink)} .amt--custom .amt__box{font-family:var(--font-sans);font-size:.95rem;font-weight:600;letter-spacing:.04em} .amt:hover .amt__box{border-color:var(--navy);transform:translateY(-2px)} .amt input:checked+.amt__box{ background:var(--navy-deep); border-color:var(--navy-deep); color:var(--on-navy); box-shadow:var(--shadow-2); } .amt input:checked+.amt__box .amt__cur{color:var(--gold-bright)} .amt input:focus-visible+.amt__box{outline:3px solid var(--navy);outline-offset:3px} #donate-form .cluster{margin-top:var(--sp-5)} #donate-form [data-amt]{font-variant-numeric:tabular-nums;margin-inline:.28em}