/* ========================================================================== apple.css — Apple-Education-style intro, rhythm and scroll effects. Loads after fix.css. Everything animated is transform/opacity only. ========================================================================== */ :root { --ax-sec: clamp(40px, 4.5vw, 68px); /* one vertical rhythm for every band */ --ax-gap: clamp(14px, 2vw, 24px); /* card / column gutter */ --ax-r: clamp(20px, 2.4vw, 32px); /* card radius */ --ax-ease: cubic-bezier(.2, .7, .2, 1); } /* ---- 1. THE INTRO: no more blur-in --------------------------------------- v91 faded the first band in from filter:blur(18px) + scale(1.04). The blur read as an out-of-focus page and forced a full-band filter layer. It is now a clean rise; on the home hero each element rises in turn instead. */ @keyframes wift-intro-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } .wift-intro-reveal { filter: none !important; animation-duration: .8s; } .wift-edu-hero.wift-intro-reveal { animation: none; } @keyframes ax-up { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } } .wift-edu-hero .ax-up { animation: ax-up .95s var(--ax-ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); } .wift-edu-hero { padding: clamp(64px, 8vw, 112px) 0 clamp(40px, 6vw, 72px); } .wift-edu-crest { width: clamp(132px, 17vw, 208px); height: auto; background: none; margin-bottom: clamp(16px, 2.4vw, 28px); } .wift-edu-h1 { font-size: clamp(32px, 6vw, 72px); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; } .wift-edu-h2 { font-size: clamp(24px, 4.4vw, 56px); line-height: 1.08; margin-top: clamp(8px, 1.2vw, 14px); text-wrap: balance; } .wift-edu-lead { font-size: clamp(17px, 1.9vw, 24px); max-width: 44ch; margin-top: clamp(16px, 2.2vw, 26px); text-wrap: pretty; } .wift-edu-links { margin-top: clamp(18px, 2.4vw, 28px); } .wift-edu-links a { font-size: clamp(17px, 1.5vw, 21px); min-height: 44px; } /* Hero text drifts up and fades as you scroll past (js/apple.js sets --ax-h 0→1). Verified live: at scroll 0 the section carries `--ax-h: 0.000` inline, written by the first rAF frame, so these calcs resolve to opacity 1 / no shift at rest and only dim once the band is actually leaving the viewport. */ .wift-edu-hero .ax-fade { opacity: calc(1 - var(--ax-h, 0) * .85); transform: translate3d(0, calc(var(--ax-h, 0) * -34px), 0); } /* collage: the block scales up as it enters, tiles drift at two speeds */ .wift-edu-collage { gap: var(--ax-gap); transform: scale(calc(.9 + var(--ax-e, 1) * .1)); transform-origin: 50% 0; } .wift-edu-collage img { border-radius: var(--ax-r); transform: translate3d(0, calc((.5 - var(--ax-p, .5)) * var(--ax-par, 36px)), 0); } .wift-edu-collage picture:nth-child(even) img { --ax-par: 72px; } .wift-edu-collage picture:nth-child(odd) img { --ax-par: 30px; } @media (max-width: 700px) { .wift-edu-collage { grid-template-columns: repeat(2, 1fr); } .wift-edu-collage img { --ax-par: 18px !important; } } /* ---- 2. SECTION RHYTHM ---------------------------------------------------- Bands used pt-160 / pt-120 / pb-200 / pb-50 in turn, so gaps ranged 50–200px. Every content band now has the same top and bottom padding. The list is explicit rather than `main > *`, because
also carries a non-band child: index.html's "Who We Partner With" strip is a
(needs the rhythm; the old `main > section` skipped it and left a 185px gap against 131px everywhere else), but its `.wift-subnav` is a