/* ===================================================================== ACADEMY — public site Every string on the page comes from /api/content (edited in /admin). ===================================================================== */ *{margin:0;padding:0;box-sizing:border-box} /* Class rules like .btn{display:inline-flex} outrank the UA's [hidden] rule, which would leave `el.hidden = true` visually ignored. */ [hidden]{display:none!important} :root{ --bg:#eef1fa; --bg2:#ffffff; --ink:#1b2238; --muted:#525d84; --dim:#8a92b2; --indigo:#5b57e8; --violet:#8b5cf6; --cyan:#0ea5c4; --gold:#d98a0b; --pink:#e0459b; --glass:rgba(255,255,255,.62); --glass-brd:rgba(27,34,56,.1); --card:rgba(255,255,255,.74); --line:rgba(27,34,56,.08); --shadow:0 14px 44px rgba(30,42,90,.10); --shadow-lift:0 22px 60px rgba(30,42,90,.14); --serif:'Sora',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; } html{scroll-behavior:smooth} body{ font-family:var(--sans);color:var(--ink); background:linear-gradient(180deg,#eef1fa,#f5f7fc 60%,#eef1fa); overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6; } body.fancy-cursor{cursor:none} @media (hover:none){body.fancy-cursor{cursor:auto}} h1,h2,h3,.display{font-family:var(--serif);letter-spacing:-.02em;line-height:1.05} a{color:inherit;text-decoration:none} img{max-width:100%} ::selection{background:var(--violet);color:#fff} /* keyboard users always get a visible focus ring */ :focus-visible{outline:2.5px solid var(--indigo);outline-offset:3px;border-radius:6px} .skip-link{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--indigo);color:#fff; padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;font-size:14px} .skip-link:focus{left:0} .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} /* ---------- AMBIENT BACKGROUND ---------- */ .bg-scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none} .aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.34;animation:drift 22s ease-in-out infinite} .a1{width:52vw;height:52vw;left:-10vw;top:-12vw;background:radial-gradient(circle,#7c79ff,transparent 62%)} .a2{width:46vw;height:46vw;right:-8vw;top:6vh;background:radial-gradient(circle,#3fd0e6,transparent 62%);animation-delay:-6s} .a3{width:50vw;height:50vw;left:18vw;bottom:-18vw;background:radial-gradient(circle,#a78bfa,transparent 62%);animation-delay:-12s} .a4{width:34vw;height:34vw;right:12vw;bottom:-6vw;background:radial-gradient(circle,#f7a8d5,transparent 64%);opacity:.26;animation-delay:-3s} @keyframes drift{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(6vw,4vh) scale(1.12)} 66%{transform:translate(-5vw,-3vh) scale(.94)} } #stars{position:absolute;inset:0} .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028; background-image: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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .vignette{position:fixed;inset:0;z-index:1;pointer-events:none; background:radial-gradient(130% 100% at 50% 0%,transparent 60%,rgba(27,34,56,.07))} /* ---------- CUSTOM CURSOR ---------- */ .cur-dot,.cur-ring{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);opacity:0} body.fancy-cursor .cur-dot,body.fancy-cursor .cur-ring{opacity:1} .cur-dot{width:7px;height:7px;background:var(--indigo);transition:width .2s,height .2s,opacity .2s} .cur-ring{width:38px;height:38px;border:1.5px solid rgba(91,87,232,.5); transition:width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1),background .28s,border-color .28s} .cur-ring.hover{width:66px;height:66px;background:rgba(91,87,232,.1);border-color:transparent} .cur-dot.hover{opacity:0} @media (hover:none){.cur-dot,.cur-ring{display:none}} /* ---------- SCROLL PROGRESS ---------- */ #progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:8500; background:linear-gradient(90deg,var(--indigo),var(--cyan),var(--gold)); box-shadow:0 0 14px rgba(91,87,232,.5);transition:width .1s linear} /* ---------- PRELOADER ---------- */ #preloader{position:fixed;inset:0;z-index:10000;background:var(--bg); display:grid;place-items:center;transition:opacity .8s ease,visibility .8s} #preloader.done{opacity:0;visibility:hidden} .pl-inner{text-align:center;width:min(80vw,420px)} .pl-mark{font-family:var(--serif);font-weight:700;font-size:clamp(17px,2.4vw,26px);letter-spacing:.01em; color:var(--ink);margin-bottom:30px;opacity:0;animation:plfade .9s .1s forwards;line-height:1.25} .pl-logo{display:flex;justify-content:center;margin-bottom:20px;opacity:0;animation:plfade .8s forwards} .pl-logo svg{width:64px;height:46px;display:block;color:var(--ink)} .pl-logo img{height:auto;width:auto;max-height:96px;max-width:min(78vw,420px);object-fit:contain} .pl-count{font-family:var(--serif);font-weight:300;font-size:clamp(56px,12vw,120px);line-height:1; background:linear-gradient(120deg,#5b57e8,#8b5cf6,#0ea5c4);-webkit-background-clip:text;background-clip:text;color:transparent} .pl-count[hidden]{display:none!important} /* A light streak sweeps across the logo while content loads — the progress signal, instead of a big number. */ .pl-logo{position:relative;overflow:hidden;padding:4px 10px;margin-left:-10px;margin-right:-10px} .pl-logo:after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:34%;pointer-events:none; transform:skewX(-16deg); background:linear-gradient(100deg,transparent,rgba(91,87,232,.22) 45%,rgba(14,165,196,.18) 60%,transparent); animation:pl-sweep 1.9s cubic-bezier(.5,0,.4,1) infinite} @keyframes pl-sweep{0%{left:-45%}65%,100%{left:125%}} .pl-bar{height:3px;background:rgba(27,34,56,.09);border-radius:999px;margin-top:30px;overflow:hidden} .pl-bar i{display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--indigo),var(--violet) 50%,var(--cyan)); box-shadow:0 0 12px rgba(91,87,232,.45);transition:width .25s cubic-bezier(.3,.7,.4,1)} .pl-word{margin-top:18px;font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim); animation:pl-pulse 1.9s ease-in-out infinite} @keyframes pl-pulse{0%,100%{opacity:.55}50%{opacity:1}} @media (prefers-reduced-motion:reduce){ .pl-logo:after{display:none} .pl-word{animation:none;opacity:.8} } @keyframes plfade{to{opacity:1}} /* ---------- PAGE TRANSITION CURTAIN ---------- */ #curtain{position:fixed;inset:0;z-index:9000;pointer-events:none;display:flex} #curtain span{flex:1;background:linear-gradient(180deg,#5b57e8,#4338ca);transform:scaleY(0);transform-origin:bottom} #curtain.in span{transform:scaleY(1)} #curtain.out span{transform:scaleY(0);transform-origin:top} #curtain span:nth-child(1){transition:transform .5s cubic-bezier(.76,0,.24,1) 0s} #curtain span:nth-child(2){transition:transform .5s cubic-bezier(.76,0,.24,1) .06s} #curtain span:nth-child(3){transition:transform .5s cubic-bezier(.76,0,.24,1) .12s} #curtain span:nth-child(4){transition:transform .5s cubic-bezier(.76,0,.24,1) .18s} #curtain span:nth-child(5){transition:transform .5s cubic-bezier(.76,0,.24,1) .24s} /* ---------- NAV ---------- */ nav{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;align-items:center;justify-content:space-between; padding:22px clamp(20px,5vw,64px);transition:padding .4s,background .4s,backdrop-filter .4s,box-shadow .4s,top .4s; border-bottom:1px solid transparent} nav.scrolled{padding:14px clamp(20px,5vw,64px);background:rgba(255,255,255,.72); backdrop-filter:blur(18px);border-bottom:1px solid var(--glass-brd);box-shadow:0 6px 30px rgba(30,42,90,.06)} .logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:700;font-size:18px;background:none;border:none;color:inherit} /* Brand mark — the built-in gradient chevrons, or an uploaded logo image. */ .logo-mark{display:flex;align-items:center;flex:0 0 auto;color:var(--ink); transition:transform .45s cubic-bezier(.2,.8,.2,1)} .logo-mark svg{width:38px;height:27px;display:block} /* Image logos are usually wide wordmarks, so they get real height. */ .logo-mark img{height:42px;width:auto;max-width:clamp(190px,28vw,310px);object-fit:contain; object-position:left center;display:block} @media(max-width:600px){.logo-mark img{height:30px;max-width:196px}} /* The navigation bar is the brand's front door, so its logo runs larger than the footer's — and settles to a smaller size once the page is scrolled, in step with the bar's own padding. */ nav .logo-mark img{height:62px;max-width:clamp(200px,32vw,360px); transition:height .4s cubic-bezier(.2,.8,.2,1)} nav.scrolled .logo-mark img{height:50px} @media(max-width:900px){ nav .logo-mark img{height:52px} nav.scrolled .logo-mark img{height:44px} } @media(max-width:600px){ nav .logo-mark img{height:54px;max-width:216px} nav.scrolled .logo-mark img{height:46px} } .logo:hover .logo-mark{transform:translateX(-2px) scale(1.05)} /* With a full image logo the wordmark is already in the picture. */ body.has-logo-img .logo #navBrand,body.has-logo-img .logo #footBrand{display:none} .logo .orb{width:34px;height:34px;border-radius:10px;position:relative;overflow:hidden;flex:0 0 auto; background:conic-gradient(from 0deg,var(--indigo),var(--cyan),var(--violet),var(--pink),var(--indigo));animation:spin 8s linear infinite} .logo .orb:after{content:"";position:absolute;inset:3px;border-radius:7px;background:var(--bg2)} @keyframes spin{to{transform:rotate(360deg)}} .nav-links{display:flex;gap:6px;align-items:center} .nav-links a{font-size:14px;color:var(--muted);padding:9px 16px;border-radius:10px;position:relative;transition:color .3s;cursor:pointer} .nav-links a:hover,.nav-links a.active{color:var(--ink)} .nav-links a.active:before{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1.5px; background:linear-gradient(90deg,var(--indigo),var(--cyan))} .nav-cta{margin-left:10px} .burger{display:none;flex-direction:column;gap:5px;width:40px;height:40px;align-items:center;justify-content:center; border-radius:10px;border:1px solid var(--glass-brd);background:var(--glass);cursor:pointer} .burger span{width:20px;height:2px;background:var(--ink);transition:.3s;border-radius:2px} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- BUTTONS ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--sans);font-weight:600;font-size:14.5px; padding:14px 28px;border-radius:999px;border:none;cursor:pointer;overflow:hidden; transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} body.fancy-cursor .btn{cursor:none} /* Primary: the gradient slides within the blue family and a light sweep runs across. Deliberately stays blue — it used to flip to gold/pink, which fought the brand. No transform here: .magnetic already moves these on hover. */ .btn.primary{color:#fff; background:linear-gradient(120deg,var(--indigo) 0%,var(--cyan) 50%,var(--indigo) 100%); background-size:220% 100%;background-position:0% 50%; box-shadow:0 10px 26px rgba(91,87,232,.30); transition:box-shadow .35s,background-position .65s cubic-bezier(.2,.8,.2,1)} .btn.primary:hover{background-position:100% 50%;box-shadow:0 16px 38px rgba(91,87,232,.44)} .btn.primary:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:42%;z-index:1; pointer-events:none;transform:skewX(-18deg); background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent)} .btn.primary:hover:after{animation:btn-sheen .85s cubic-bezier(.3,.7,.4,1)} @keyframes btn-sheen{from{left:-60%}to{left:125%}} .btn.primary span{position:relative;z-index:2} .btn.ghost{color:var(--ink);background:var(--glass);border:1px solid var(--glass-brd);backdrop-filter:blur(10px); transition:background .3s,border-color .3s,color .3s,box-shadow .3s} .btn.ghost:hover{background:#fff;border-color:rgba(91,87,232,.45);color:var(--indigo); box-shadow:0 10px 28px rgba(91,87,232,.16)} .btn:active{box-shadow:0 4px 14px rgba(91,87,232,.32)} .btn.lg{padding:17px 36px;font-size:16px} .btn[disabled]{opacity:.6;pointer-events:none} .magnetic{will-change:transform} /* ---------- PAGE / SECTION ---------- */ main{position:relative;z-index:2} .page{display:none} .page.active{display:block;animation:pagein .9s cubic-bezier(.2,.8,.2,1)} @keyframes pagein{from{opacity:0}to{opacity:1}} section{position:relative;padding:clamp(90px,13vh,150px) clamp(20px,6vw,90px);max-width:1300px;margin:0 auto} .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.28em;text-transform:uppercase; color:var(--cyan);font-weight:600;margin-bottom:22px} .eyebrow:before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--cyan),transparent)} .h-xl{font-size:clamp(40px,7vw,88px);font-weight:700} .h-lg{font-size:clamp(30px,4.6vw,54px);font-weight:600} .lead{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:60ch;font-weight:400} /* reveal */ .reveal{opacity:0;transform:translateY(38px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)} .reveal.seen{opacity:1;transform:none} .reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s} .reveal.d4{transition-delay:.4s}.reveal.d5{transition-delay:.5s} /* The hero sequences itself in JS, so the canned delays are cleared there. */ .hero.hero-seq .reveal,.hero.hero-seq .tr i{transition-delay:0s} .tr{display:block;overflow:hidden} .tr i{display:block;font-style:normal;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.16,1,.3,1)} .tr.seen i{transform:none} .tr.l2 i{transition-delay:.12s}.tr.l3 i{transition-delay:.24s}.tr.l4 i{transition-delay:.36s} /* ---------- HERO ---------- */ /* The bottom padding reserves room for the scroll hint so the buttons and the proof row can never collide with it. */ .hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;max-width:1300px;margin:0 auto; padding:104px clamp(20px,6vw,90px) 124px;position:relative} .hero .kicker{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:28px; display:flex;align-items:center;gap:12px} .hero .kicker .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .hero h1{font-size:clamp(46px,8.6vw,124px);font-weight:700;margin-bottom:10px} .hero h1 .grad,.grad{background:linear-gradient(115deg,#5b57e8 10%,#0ea5c4 52%,#d98a0b 92%); -webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- ROTATING HEADLINE WORD ---------- One word at a time: the next slides up from below, the outgoing one carries on upward. The sizer reserves the width of the longest word so the line never reflows mid-cycle. The easing overshoots slightly to read as a spring. */ /* No overflow clip: the parked words are already at opacity 0, and clipping would force vertical-align:top and knock the word off the prefix baseline. */ .rot{position:relative;display:inline-block;vertical-align:baseline} .rot-sizer{display:block;visibility:hidden;pointer-events:none;white-space:nowrap} .rot-word{position:absolute;left:0;top:0;white-space:nowrap; opacity:0;transform:translateY(115%); transition:transform .8s cubic-bezier(.22,1.12,.36,1),opacity .5s ease} .rot-word.is-active{opacity:1;transform:translateY(0)} .rot-word.is-above{opacity:0;transform:translateY(-115%)} @media (prefers-reduced-motion:reduce){ /* no cycling — the first word simply stays put */ .rot-word{transition:none} } .hero .sub{font-size:clamp(16px,2vw,21px);color:var(--muted);max-width:56ch;margin:22px 0 32px;font-weight:400} .hero .actions{display:flex;gap:16px;flex-wrap:wrap} /* social proof under the hero buttons */ .hero-proof{display:flex;align-items:center;gap:13px;margin-top:24px;flex-wrap:wrap; width:fit-content;max-width:100%} .proof-stars{display:inline-flex;gap:3px;color:var(--gold)} .proof-stars svg{width:17px;height:17px;display:block} .proof-text{font-size:14px;color:var(--muted)} .scroll-hint{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.25em; text-transform:uppercase;color:var(--dim);text-align:center; opacity:0;transition:opacity .8s ease} .scroll-hint.in{opacity:1} .scroll-hint .m{width:24px;height:40px;border:1.5px solid var(--glass-brd);border-radius:14px;margin:0 auto 10px;position:relative} .scroll-hint .m:before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:4px;height:8px; border-radius:2px;background:var(--cyan);animation:scrolly 1.8s infinite} @keyframes scrolly{0%{opacity:0;top:7px}30%{opacity:1}70%{opacity:1}100%{opacity:0;top:20px}} /* Ambient keyword pills. They sit in the margins around the headline — the positions in site.js keep them clear of the type, and z-index:-1 means text always wins if a narrow viewport ever pushes them together. */ .floatchips{position:absolute;inset:0;pointer-events:none;z-index:-1; transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform} /* Pills fade in one at a time after the copy; `breathe` keeps running so the entrance never fights the float animation for the transform. */ .fchip{position:absolute;display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500; padding:9px 17px 9px 10px;border-radius:999px;background:rgba(255,255,255,.82); border:1px solid var(--glass-brd);backdrop-filter:blur(14px);color:var(--ink);white-space:nowrap; box-shadow:0 10px 30px rgba(30,42,90,.10),inset 0 1px 0 rgba(255,255,255,.9); opacity:0;transition:opacity .7s cubic-bezier(.2,.8,.2,1); animation:breathe 6s ease-in-out infinite} .fchip.in{opacity:.95} .fchip-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto; background:linear-gradient(140deg,rgba(91,87,232,.12),rgba(14,165,196,.10))} .fchip-ico svg{width:17px;height:17px;display:block} @keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* Below this width the headline fills the row and there is no margin left to float in. */ @media(max-width:1080px){.floatchips{display:none}} /* ---------- MARQUEE ---------- */ .marquee{overflow:hidden;padding:26px 0;border-top:1px solid var(--glass-brd);border-bottom:1px solid var(--glass-brd); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)} .marquee .track{display:flex;gap:52px;width:max-content;animation:scroll-x 26s linear infinite} .marquee b{font-family:var(--serif);font-weight:600;font-size:clamp(22px,3vw,40px);color:transparent; -webkit-text-stroke:1px rgba(27,34,56,.28);display:flex;align-items:center;gap:52px} .marquee b span{color:var(--indigo);-webkit-text-stroke:0;font-size:18px} @keyframes scroll-x{to{transform:translateX(-50%)}} /* ---------- CARDS / GRID ---------- */ .grid{display:grid;gap:22px} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)} .card{position:relative;border:1px solid var(--glass-brd);border-radius:var(--r-lg);padding:30px;background:var(--card); backdrop-filter:blur(10px);box-shadow:var(--shadow);overflow:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s;will-change:transform} .card:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none; background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(139,92,246,.14),transparent 55%)} .card:hover:before{opacity:1} .card:hover{border-color:rgba(91,87,232,.35);box-shadow:var(--shadow-lift)} .card h3{font-size:23px;margin:16px 0 8px;font-weight:600} .card .tagline{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);font-weight:600} .card p{color:var(--muted);font-size:14.5px;font-weight:400} .card .price{margin-top:20px;font-family:var(--serif);font-size:15px;color:var(--ink)} /* A program with its fee hidden shows a label instead — quieter than a number, and never sized up like one. */ .card .price.on-request{color:var(--muted);font-style:italic;font-size:15px!important} .icoball{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:23px; background:linear-gradient(140deg,rgba(91,87,232,.16),rgba(14,165,196,.12));border:1px solid var(--glass-brd)} .icoball svg{width:26px;height:26px;display:block;color:var(--indigo)} .feat .k svg{width:22px;height:22px;display:block;color:var(--indigo)} .contact-line .k svg{width:20px;height:20px;display:block;color:var(--indigo)} .emo{font-size:inherit;line-height:1} .pill-gold{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--gold);background:rgba(217,138,11,.12);border:1px solid rgba(217,138,11,.35);padding:5px 10px;border-radius:999px} /* ---------- CLICKABLE PROGRAM TEASER ---------- */ .card.teaser{cursor:pointer;display:flex;flex-direction:column} body.fancy-cursor .card.teaser{cursor:none} .card.teaser .price{margin-bottom:18px} .teaser-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600; color:var(--indigo);padding-top:16px;border-top:1px solid var(--line)} .teaser-more i{font-style:normal;transition:transform .35s cubic-bezier(.2,.8,.2,1)} .card.teaser:hover .teaser-more i{transform:translateX(5px)} /* the program you clicked through to, briefly highlighted on arrival */ @keyframes cardflash{ 0%{box-shadow:0 0 0 0 rgba(91,87,232,.45),var(--shadow)} 100%{box-shadow:0 0 0 14px rgba(91,87,232,0),var(--shadow)} } .card.flash{border-color:rgba(91,87,232,.55);animation:cardflash 1.4s ease-out} /* ---------- BEAM CARD ---------- Two comets orbit the border: a rotating conic gradient cut down to just the ring with a two-layer alpha mask (mask-composite:exclude), plus a blurred copy behind it that reads as cast light. Only --beam-a changes per frame, so the card contents never repaint. */ .beam-card{position:relative;isolation:isolate;border-color:transparent} .beam-card:before,.beam-card:after{content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none; background:conic-gradient(from var(--beam-a,0deg), transparent 0deg, rgba(91,87,232,.04) 18deg, rgba(91,87,232,.55) 46deg, rgba(14,165,196,1) 56deg, rgba(198,242,255,1) 60deg, transparent 63deg, transparent 198deg, rgba(217,138,11,.04) 216deg, rgba(217,138,11,.5) 244deg, rgba(217,138,11,1) 254deg, rgba(255,235,190,1) 258deg, transparent 261deg, transparent 360deg)} /* The ring: mask out the middle so only the border edge is painted. opacity is forced because .card:before is the hover spotlight and ships at opacity:0 — the ring reuses that same pseudo-element. */ .beam-card:before{padding:1.6px;opacity:1;transition:none; -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude} .beam-card:hover:before{opacity:1} /* the cast light */ .beam-card:after{filter:blur(14px);opacity:.32;z-index:-1} .beam-card:hover:after{opacity:.5} /* Where mask-composite is unavailable the ring would fill the whole card, so fall back to a plain border and skip the effect entirely. */ @supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){ .beam-card:before,.beam-card:after{display:none} .beam-card{border-color:var(--glass-brd)} } @media (forced-colors:active){ .beam-card:before,.beam-card:after{display:none} .beam-card{border-color:CanvasText} } @media (prefers-reduced-motion:reduce){ .beam-card:after{opacity:.22} } /* feature list */ .feat{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)} .feat .k{flex:0 0 auto;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font-size:20px; background:linear-gradient(140deg,rgba(139,92,246,.2),rgba(14,165,196,.12));border:1px solid var(--glass-brd)} .feat h4{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:4px} .feat p{color:var(--muted);font-size:14px;font-weight:400} /* ---------- STATS ---------- Plain and identical at rest; colour animates in only on hover. */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .stat{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center; padding:34px 22px 28px;border-radius:var(--r-xl);background:var(--bg2); border:1px solid var(--glass-brd);box-shadow:var(--shadow);overflow:hidden; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s} /* accent bar wipes across the top */ .stat:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2; background:linear-gradient(90deg,var(--indigo),var(--violet) 38%,var(--cyan) 74%,var(--gold)); transform:scaleX(0);transform-origin:left; transition:transform .55s cubic-bezier(.2,.8,.2,1)} /* colour wash fades up from the top */ .stat:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(125% 95% at 50% -5%,rgba(91,87,232,.16),rgba(14,165,196,.07) 45%,transparent 70%); transition:opacity .5s ease} .stat > *{position:relative;z-index:1} .stat:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:rgba(91,87,232,.32)} .stat:hover:before{transform:scaleX(1)} .stat:hover:after{opacity:1} /* keyboard users get the same treatment */ .stat:focus-within:before{transform:scaleX(1)} .stat:focus-within:after{opacity:1} .stat-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px; background:rgba(91,87,232,.07);border:1px solid var(--glass-brd); transition:transform .45s cubic-bezier(.2,.8,.2,1),background .45s,border-color .45s,box-shadow .45s} .stat-ic svg{width:22px;height:22px;display:block;color:var(--indigo);transition:color .45s} .stat:hover .stat-ic{transform:translateY(-3px) scale(1.07); background:rgba(91,87,232,.15);border-color:rgba(91,87,232,.34); box-shadow:0 10px 24px rgba(91,87,232,.20)} .stat:hover .stat-ic svg{color:var(--violet)} .stat:hover .l{color:var(--ink)} /* One blue for all four numbers. `color` stays as the fallback and -webkit-text-fill-color does the clipping, so a browser without background-clip:text shows solid blue rather than nothing. */ .stat .n{font-family:var(--serif);font-size:clamp(38px,4.6vw,58px);font-weight:700;line-height:1; letter-spacing:-.03em;font-variant-numeric:tabular-nums; color:var(--indigo); background:linear-gradient(120deg,var(--indigo),var(--cyan)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent} .stat .l{font-size:12px;color:var(--muted);letter-spacing:.13em;text-transform:uppercase; font-weight:600;margin-top:12px;max-width:16ch} @media(max-width:900px){.stats{grid-template-columns:1fr 1fr;gap:16px}} @media(max-width:520px){.stats{grid-template-columns:1fr;gap:14px}.stat{padding:28px 20px 24px}} /* accordion */ .acc{border:1px solid var(--glass-brd);border-radius:var(--r-md);overflow:hidden;margin-bottom:14px;background:var(--glass)} .acc summary{list-style:none;cursor:pointer;padding:22px 26px;display:flex;justify-content:space-between;align-items:center; gap:16px;font-family:var(--serif);font-weight:600;font-size:18px} body.fancy-cursor .acc summary{cursor:none} .acc summary::-webkit-details-marker{display:none} .acc summary .pl{width:26px;height:26px;position:relative;flex:0 0 auto} .acc summary .pl:before,.acc summary .pl:after{content:"";position:absolute;background:var(--cyan);transition:.3s;top:50%;left:50%;transform:translate(-50%,-50%)} .acc summary .pl:before{width:14px;height:2px} .acc summary .pl:after{width:2px;height:14px} .acc[open] summary .pl:after{transform:translate(-50%,-50%) rotate(90deg);opacity:0} .acc .body{padding:0 26px 24px} .acc .body ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px} .acc .body li{color:var(--muted);font-size:14px;padding-left:22px;position:relative;font-weight:400} .acc .body li:before{content:"✦";position:absolute;left:0;color:var(--violet)} .acc .body p{color:var(--muted);font-size:15px;max-width:75ch} /* ---------- TESTIMONIALS ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px} .quote{position:relative;border:1px solid var(--glass-brd);border-radius:var(--r-lg);padding:34px 30px 28px; background:var(--card);backdrop-filter:blur(10px);box-shadow:var(--shadow);overflow:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .5s} .quote:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift);border-color:rgba(91,87,232,.3)} .quote:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--indigo),var(--cyan),var(--gold))} .quote .mark{font-family:var(--serif);font-size:56px;line-height:.6;color:rgba(91,87,232,.22)} .quote blockquote{font-size:16px;color:var(--ink);margin:14px 0 22px;font-weight:400;line-height:1.65} .quote .who{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line)} .quote .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;flex:0 0 auto; overflow:hidden;font-family:var(--serif);font-weight:700;color:var(--indigo); background:linear-gradient(140deg,rgba(91,87,232,.18),rgba(14,165,196,.14));border:1px solid var(--glass-brd)} .quote .av img{width:100%;height:100%;object-fit:cover;display:block} .quote .who b{display:block;font-size:15px;font-family:var(--serif);font-weight:600} .quote .who span{font-size:13px;color:var(--muted)} .quote .stars{margin-left:auto;font-size:12px;color:var(--gold);letter-spacing:1px;white-space:nowrap} /* ---------- SCHOLARSHIP ---------- */ .schol-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;padding:clamp(40px,6vw,72px); background:linear-gradient(140deg,rgba(217,138,11,.12),rgba(224,69,155,.09) 60%,rgba(91,87,232,.12)); border:1px solid rgba(217,138,11,.3);box-shadow:var(--shadow)} .schol-badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700; font-size:clamp(30px,5vw,58px);color:var(--gold);line-height:1.1} .pricing-line{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px} .ptag{border:1px solid var(--glass-brd);border-radius:14px;padding:16px 20px;background:var(--bg2);min-width:190px; box-shadow:0 8px 24px rgba(30,42,90,.06);transition:transform .4s,box-shadow .4s} .ptag:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .ptag .c{font-family:var(--serif);font-weight:600;font-size:16px} .ptag .p{font-size:14px;color:var(--muted);margin-top:6px} .ptag .p b{color:var(--ink)} .ptag .s{margin-top:8px} .ptag .after{display:block;margin-top:8px;font-size:12.5px;color:var(--cyan);font-weight:600} /* ---------- SCHOLARSHIP SCHEME CARDS ---------- */ .card.scheme{display:flex;flex-direction:column;padding:32px 30px 26px} .card.scheme.featured{border-color:rgba(217,138,11,.42); background:linear-gradient(160deg,rgba(217,138,11,.07),var(--card) 55%)} .scheme-flag{position:absolute;top:0;right:0;font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:#fff;background:linear-gradient(120deg,var(--gold),#e0459b); padding:6px 14px;border-radius:0 20px 0 14px} .scheme .icoball svg{color:var(--gold)} .scheme-pct{font-family:var(--serif);font-size:46px;font-weight:700;line-height:1;margin-top:20px; background:linear-gradient(120deg,var(--indigo),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent} .scheme-pct small{font-size:15px;font-weight:600;margin-left:4px;letter-spacing:.02em} /* A card describes a scholarship in a sentence or two. Clamping it means an over-long description — 15,000 characters were once pasted in by accident — costs a few hidden lines instead of nine thousand pixels of blank page. The full text is still in the record; only the card view is bounded. */ .scheme-desc{margin-top:12px;display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:5;line-clamp:5;overflow:hidden} @supports not (-webkit-line-clamp:5){ .scheme-desc{max-height:8.4em;overflow:hidden} } .scheme-list{list-style:none;margin:18px 0 0;display:grid;gap:9px} .scheme-list li{position:relative;padding-left:24px;font-size:14px;color:var(--muted)} .scheme-list li:before{content:"✓";position:absolute;left:0;top:-1px;color:var(--cyan);font-weight:700} .scheme-foot{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 14px; font-size:12.5px;color:var(--dim)} .scheme-foot span{display:inline-flex;align-items:center;gap:6px} .scheme-foot span:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--violet)} /* ---------- FORMS ---------- */ .form-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} .form-card{border:1px solid var(--glass-brd);border-radius:24px;padding:clamp(26px,4vw,44px);background:var(--bg2);box-shadow:var(--shadow)} /* Boxed fields with the label sitting above. `order` puts the label first without changing the markup, so the floating-label spans stay valid. */ .field{position:relative;display:flex;flex-direction:column;margin-bottom:20px} .field label{order:-1;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:7px; letter-spacing:.01em;transition:color .25s} .field input,.field select,.field textarea{ order:0;width:100%;background:var(--bg2);border:1.5px solid rgba(27,34,56,.14);border-radius:var(--r-sm); color:var(--ink);font-family:var(--sans);font-size:15.5px;padding:14px 16px;outline:none; transition:border-color .25s,box-shadow .25s,background .25s} body.fancy-cursor .field input,body.fancy-cursor .field select,body.fancy-cursor .field textarea{cursor:none} .field input::placeholder,.field textarea::placeholder{color:var(--dim)} .field textarea{resize:vertical;min-height:120px;line-height:1.6} .field select{appearance:none;cursor:pointer;padding-right:44px; 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='%23525d84' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center} body.fancy-cursor .field select{cursor:none} .field select option{background:var(--bg2);color:var(--ink)} .field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(27,34,56,.24)} .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--indigo);box-shadow:0 0 0 4px rgba(91,87,232,.13)} .field input:focus~label,.field select:focus~label,.field textarea:focus~label{color:var(--indigo)} .field .bar{display:none} .field.err input,.field.err select,.field.err textarea{border-color:var(--pink);box-shadow:0 0 0 4px rgba(224,69,155,.11)} .field.err label{color:var(--pink)} .field .msg{order:2;font-size:12.5px;color:var(--pink);margin-top:6px;height:0;overflow:hidden; opacity:0;transition:opacity .25s} .field.err .msg{opacity:1;height:auto} .field :focus-visible{outline:none} .form-side h3{font-size:clamp(26px,3.4vw,40px);font-weight:600;margin-bottom:16px;white-space:pre-line} .contact-line{display:flex;gap:14px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line); transition:transform .3s cubic-bezier(.2,.8,.2,1)} a.contact-line:hover{transform:translateX(5px)} a.contact-line:hover .k{border-color:rgba(91,87,232,.4);background:#fff} a.contact-line:hover b{color:var(--indigo)} .contact-line .k{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:18px; background:var(--glass);border:1px solid var(--glass-brd);flex:0 0 auto} .contact-line b{display:block;font-size:15px} .contact-line span{font-size:13px;color:var(--muted)} .form-note{font-size:12.5px;color:var(--dim);margin-top:14px} .form-error{display:none;margin-bottom:18px;padding:12px 16px;border-radius:12px;font-size:14px; background:rgba(224,69,155,.08);border:1px solid rgba(224,69,155,.3);color:#a02165} .form-error.show{display:block} .success{display:none;text-align:center;padding:20px 0} .success.show{display:block;animation:pagein .6s} .success .ring{width:84px;height:84px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center; border:2px solid var(--cyan);position:relative;animation:pop .5s cubic-bezier(.2,1.4,.4,1)} .success .ring:before{content:"✓";font-size:38px;color:var(--cyan)} @keyframes pop{from{transform:scale(0)}to{transform:scale(1)}} .success h3{font-size:26px;font-weight:600;margin-bottom:10px} .success p{color:var(--muted);font-weight:400;max-width:40ch;margin:0 auto 22px} .success .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} /* The nudge towards the test, sitting between the confirmation and the buttons. */ .success-next{border:1px solid rgba(217,138,11,.4);background:rgba(217,138,11,.07);border-radius:var(--r-md); padding:14px 18px;font-size:14px;max-width:46ch;margin:0 auto 22px!important} /* ---------- SCHOLARSHIP TEST ---------- */ .exam-facts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px} .exam-fact{flex:1 1 90px;border:1px solid var(--glass-brd);border-radius:var(--r-md);padding:16px 18px; background:var(--bg2);box-shadow:0 8px 24px rgba(30,42,90,.06)} .exam-fact b{display:block;font-family:var(--serif);font-size:22px;font-weight:700} .exam-fact span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .exam-rules{margin:0;padding-left:20px;color:var(--muted);font-size:14.5px;line-height:1.9} .exam-rules li{padding-left:4px} .exam-gate{border:1px solid var(--glass-brd);background:var(--bg);border-radius:var(--r-md); padding:14px 18px;margin-bottom:20px;font-size:13.5px;color:var(--muted);line-height:1.6} .exam-gate:empty{display:none} /* Who the number turned out to be — shown so a mistyped digit is caught here rather than at the end of a paper sat under someone else's name. */ .exam-who{display:flex;flex-direction:column;gap:2px;border:1px solid rgba(14,165,196,.35); background:rgba(14,165,196,.07);border-radius:var(--r-md);padding:14px 18px;margin-bottom:22px} .exam-who b{font-family:var(--serif);font-size:18px} .exam-who span{font-size:12.5px;color:var(--muted)} .exam-attemptline{font-size:13px;color:var(--muted);margin:-6px 0 18px} /* "You have not applied" is only half an answer, so the way there sits with it. */ .form-error .btn{display:inline-flex} .exam-resume{border:1px solid rgba(217,138,11,.4);background:rgba(217,138,11,.07); border-radius:var(--r-md);padding:18px 20px;margin-bottom:22px} .exam-resume p{color:var(--muted);font-size:14px;margin:6px 0 14px} /* the paper */ .exam-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px} .exam-bar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .exam-code{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.04em} .exam-attempt{font-size:12.5px;color:var(--muted)} .exam-clock{font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:26px;font-weight:700; padding:6px 18px;border-radius:999px;border:1px solid var(--glass-brd);background:var(--bg2)} .exam-clock.warn{color:#b3246f;border-color:rgba(179,36,111,.45);animation:pl-pulse 1s ease-in-out infinite} .exam-progress{height:4px;border-radius:999px;background:rgba(27,34,56,.08);overflow:hidden;margin-bottom:26px} .exam-progress i{display:block;height:100%;width:0;border-radius:999px;transition:width .35s cubic-bezier(.3,.7,.4,1); background:linear-gradient(90deg,var(--indigo),var(--violet) 50%,var(--cyan))} .exam-card{border:1px solid var(--glass-brd);border-radius:24px;padding:clamp(24px,4vw,40px); background:var(--bg2);box-shadow:var(--shadow)} .exam-qhead{display:flex;justify-content:space-between;align-items:center;gap:12px; font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .exam-saved{letter-spacing:.04em;text-transform:none;font-size:12.5px;color:var(--cyan)} .exam-qtext{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);font-weight:600;line-height:1.45;margin:14px 0 26px} .exam-options{display:grid;gap:12px} .exam-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer; border:1px solid var(--glass-brd);border-radius:var(--r-md);padding:16px 18px;background:var(--bg); font-size:15.5px;color:var(--ink);transition:border-color .25s,background .25s,transform .25s} .exam-opt:hover{border-color:rgba(91,87,232,.42);transform:translateX(3px)} .exam-opt.on{border-color:var(--indigo);background:rgba(91,87,232,.08)} .exam-letter{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center; font-size:13px;font-weight:700;background:rgba(91,87,232,.1);color:var(--indigo)} .exam-opt.on .exam-letter{background:var(--indigo);color:#fff} .exam-opt-text{flex:1} .exam-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px} .exam-actions .btn.primary{margin-left:auto} .exam-palette{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px} .exam-dot{width:38px;height:38px;border-radius:11px;border:1px solid var(--glass-brd);background:var(--bg2); font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:transform .25s,border-color .25s} .exam-dot:hover{transform:translateY(-2px)} .exam-dot.done{background:rgba(14,165,196,.12);border-color:rgba(14,165,196,.4);color:var(--ink)} .exam-dot.now{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(91,87,232,.16)} .exam-foot{margin-top:16px;font-size:13px;color:var(--dim)} /* result */ .exam-result-card{max-width:560px;margin:0 auto;text-align:center;border:1px solid var(--glass-brd); border-radius:24px;padding:clamp(28px,5vw,52px);background:var(--bg2);box-shadow:var(--shadow)} .exam-result-card .ring{width:74px;height:74px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center; border:2px solid var(--cyan);animation:pop .5s cubic-bezier(.2,1.4,.4,1)} .exam-result-card .ring:before{content:"✓";font-size:34px;color:var(--cyan)} .exam-score{font-family:var(--serif);font-size:clamp(52px,10vw,86px);font-weight:300;line-height:1; background:linear-gradient(120deg,#5b57e8,#8b5cf6,#0ea5c4);-webkit-background-clip:text;background-clip:text;color:transparent} .exam-result-card h3{font-size:24px;font-weight:600;margin:16px 0 8px} .exam-result-card p{color:var(--muted);font-weight:400} .exam-result-note{margin-top:14px;font-size:14px} .exam-result-card .actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:26px} @media(max-width:600px){ /* Full-width taps, but Submit stays last: on a phone the button under your thumb should be Next, not the one that ends the test. */ .exam-actions .btn{flex:1 1 100%} .exam-actions .btn.primary{margin-left:0;margin-top:4px} .exam-clock{font-size:22px} } /* ---------- TOAST ---------- */ /* --------------------------------------------------------------------- Floating WhatsApp button Bottom right, above the fold of everything except the toast. It sits below the mobile menu's scrim (z-index 790) on purpose: with the drawer open it fades out rather than floating over a dimmed page. --------------------------------------------------------------------- */ .wa-fab{position:fixed;z-index:700;right:clamp(16px,4vw,28px); bottom:calc(clamp(16px,4vw,28px) + env(safe-area-inset-bottom)); display:inline-flex;align-items:center;gap:0;overflow:hidden; height:56px;min-width:56px;padding:0;border-radius:999px; background:#25D366;color:#fff;text-decoration:none; box-shadow:0 10px 30px rgba(37,211,102,.38),0 2px 8px rgba(16,24,40,.16); transition:width .35s cubic-bezier(.76,0,.24,1),gap .35s cubic-bezier(.76,0,.24,1), padding .35s cubic-bezier(.76,0,.24,1),transform .25s ease,box-shadow .25s ease} .wa-fab:hover,.wa-fab:focus-visible{transform:translateY(-2px); box-shadow:0 16px 38px rgba(37,211,102,.46),0 3px 10px rgba(16,24,40,.2)} .wa-fab:focus-visible{outline:3px solid var(--ink);outline-offset:3px} .wa-fab:active{transform:translateY(0) scale(.97)} .wa-fab-icon{flex:0 0 56px;height:56px;display:grid;place-items:center} .wa-fab-icon svg{width:30px;height:30px;display:block} /* WhatsApp's mark IS the bubble with the handset knocked out of it. Hiding the bubble and keeping the handset leaves a generic telephone that says nothing. Reversed onto the green button: white bubble, green handset. */ .wa-fab-icon svg path:first-child{fill:#fff} .wa-fab-icon svg path+path{fill:#25D366} /* The label is a pointer-device affordance: it expands on hover, and on a touch screen it never appears — a permanently wide pill would sit on top of half the content it is meant to sit beside. */ .wa-fab-label{max-width:0;opacity:0;white-space:nowrap;font-weight:600;font-size:15px; transition:max-width .35s cubic-bezier(.76,0,.24,1),opacity .25s ease,padding .35s ease} @media (hover:hover){ .wa-fab:hover .wa-fab-label,.wa-fab:focus-visible .wa-fab-label{max-width:200px;opacity:1;padding-right:22px} } body.menu-open .wa-fab{opacity:0;pointer-events:none;transition:opacity .2s ease} @media (prefers-reduced-motion:reduce){ .wa-fab,.wa-fab-label{transition:none} .wa-fab:hover,.wa-fab:focus-visible{transform:none} } #toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,140%);z-index:9500; display:flex;align-items:center;gap:12px;padding:14px 22px;border-radius:999px;font-size:14.5px;font-weight:500; background:rgba(27,34,56,.94);color:#fff;box-shadow:0 18px 44px rgba(30,42,90,.3); transition:transform .5s cubic-bezier(.2,.9,.2,1);max-width:min(90vw,520px)} #toast.show{transform:translate(-50%,0)} #toast.err{background:linear-gradient(120deg,#b3246f,#7c1d55)} /* ---------- FOOTER ---------- */ footer{position:relative;z-index:2;border-top:1px solid var(--glass-brd);margin:60px auto 0; padding:60px clamp(20px,6vw,90px) 40px;max-width:1300px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px} /* The footer mark sits in the widest column with nothing competing for the space, so it carries the brand at a larger size than the navigation bar. */ footer .logo-mark img{height:78px;max-width:clamp(220px,30vw,360px)} @media(max-width:900px){footer .logo-mark img{height:66px}} @media(max-width:600px){footer .logo-mark img{height:60px;max-width:230px}} .foot-grid h4{font-family:var(--serif);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px} .foot-grid a{display:block;color:var(--dim);font-size:14px;padding:5px 0;transition:color .3s;cursor:pointer} .foot-grid a:hover{color:var(--ink)} .foot-cta{font-family:var(--serif);font-size:clamp(26px,4vw,44px);font-weight:600;max-width:16ch;margin-bottom:18px;white-space:pre-line} .foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:46px; padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)} .foot-bottom a{color:var(--dim);transition:color .3s} .foot-bottom a:hover{color:var(--indigo)} /* ---------- RESPONSIVE ---------- */ @media(max-width:1000px){ .quotes{grid-template-columns:1fr 1fr} } @media(max-width:900px){ .g3,.g4,.g2{grid-template-columns:1fr} .quotes{grid-template-columns:1fr} /* .stats has its own breakpoints alongside its definition */ .form-wrap{grid-template-columns:1fr;gap:30px} .acc .body ul{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr;gap:26px} /* The drawer is a child of