/* ===================================================================== DMATBLAZE FX - colour themes, scroll reveal, click ripples, hover spotlight, tilt, page transitions and the Appearance panel. Accent themes are set on ; light/dark stays on data-theme. Motion follows the visitor's system setting and the "Animations" choice in Appearance (html.fx-off / html.fx-subtle). ===================================================================== */ /* ---------- shared component tokens (Blaze = the original look) ---------- */ :root{ --btn-a:var(--navy-700); --btn-b:var(--navy); --btn-ink:#fff; --btn-glow:rgba(15,42,74,.22); --cta-1:#FFC957; --cta-2:#F2B233; --cta-3:#E9A21F; --cta-ink:#241800; --cta-glow:rgba(233,162,31,.34); --hl-a:#FFD27A; --hl-b:#FF9F6B; --hl-c:#FFD27A; --foot-1:#0B1F36; --foot-2:#07111F; --foot-glow:rgba(242,178,51,.10); --sel:rgba(242,178,51,.35); --spot:rgba(242,178,51,.14); --orb-1:rgba(242,178,51,.22); --orb-2:rgba(59,125,216,.18); --orb-3:rgba(228,87,46,.12); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --btn-a:#7DB2F1; --btn-b:#5B98E6; --btn-ink:#06142A; --btn-glow:rgba(0,0,0,.4); --spot:rgba(125,178,241,.12); } } :root[data-theme="dark"]{ --btn-a:#7DB2F1; --btn-b:#5B98E6; --btn-ink:#06142A; --btn-glow:rgba(0,0,0,.4); --spot:rgba(125,178,241,.12); } /* ---------- OCEAN: deep teal, aqua and coral ---------- */ :root[data-accent="ocean"]{ --navy-900:#032B36; --navy:#06394A; --navy-700:#0B5566; --navy-600:#0E6B7F; --ink:#06394A; --paper:#F3F9FA; --surface-2:#EAF5F7; --line:#D3E6EA; --line-2:#E3F0F3; --blue-50:#ECF8FA; --blue-100:#D5F0F4; --blue-200:#A9E0E9; --blue-500:#0EA5B7; --blue-600:#0B8A9A; --blue-ink:#07707E; --gold:#2DD4BF; --gold-ink:#0B6B61; --gold-soft:#DDF7F3; --flame:#FF6F61; --flame-soft:#FFE7E4; --glow:radial-gradient(900px 420px at 88% -10%,rgba(45,212,191,.18),transparent 60%),radial-gradient(700px 380px at -5% 0%,rgba(14,165,183,.14),transparent 60%); --cta-1:#7CF0DD; --cta-2:#2DD4BF; --cta-3:#14B8A6; --cta-ink:#032B28; --cta-glow:rgba(20,184,166,.34); --hl-a:#7CF0DD; --hl-b:#7DD3FC; --hl-c:#FF9A8F; --foot-1:#06394A; --foot-2:#021C24; --foot-glow:rgba(45,212,191,.12); --sel:rgba(45,212,191,.32); --spot:rgba(45,212,191,.14); --orb-1:rgba(45,212,191,.24); --orb-2:rgba(14,165,183,.18); --orb-3:rgba(255,111,97,.12); } /* ---------- AURORA: indigo, violet and pink ---------- */ :root[data-accent="aurora"]{ --navy-900:#1E0B4B; --navy:#2A1263; --navy-700:#40208C; --navy-600:#5B34B0; --ink:#2A1263; --paper:#F8F6FD; --surface-2:#F2EEFC; --line:#E1D9F5; --line-2:#ECE6FA; --blue-50:#F4F0FE; --blue-100:#E8DFFD; --blue-200:#D2C2FA; --blue-500:#8B5CF6; --blue-600:#7C3AED; --blue-ink:#6D28D9; --gold:#F472B6; --gold-ink:#9D174D; --gold-soft:#FCE7F3; --flame:#F97316; --flame-soft:#FFEDD5; --glow:radial-gradient(900px 420px at 88% -10%,rgba(244,114,182,.18),transparent 60%),radial-gradient(700px 380px at -5% 0%,rgba(139,92,246,.16),transparent 60%); --cta-1:#F9A8D4; --cta-2:#F472B6; --cta-3:#EC4899; --cta-ink:#3B0322; --cta-glow:rgba(236,72,153,.32); --hl-a:#F9A8D4; --hl-b:#C4B5FD; --hl-c:#FDBA74; --foot-1:#2A1263; --foot-2:#12062E; --foot-glow:rgba(244,114,182,.12); --sel:rgba(244,114,182,.3); --spot:rgba(167,139,250,.16); --orb-1:rgba(244,114,182,.22); --orb-2:rgba(139,92,246,.2); --orb-3:rgba(249,115,22,.1); } /* ---------- FOREST: emerald and lime ---------- */ :root[data-accent="forest"]{ --navy-900:#032A1E; --navy:#063D2C; --navy-700:#0A5A41; --navy-600:#0E7555; --ink:#063D2C; --paper:#F4FAF6; --surface-2:#EBF6EF; --line:#D4E8DB; --line-2:#E4F1E8; --blue-50:#EDF8F1; --blue-100:#D7F0E0; --blue-200:#AEE0C2; --blue-500:#10B981; --blue-600:#059669; --blue-ink:#047857; --gold:#A3E635; --gold-ink:#3F6212; --gold-soft:#ECFCCB; --flame:#F59E0B; --flame-soft:#FEF3C7; --glow:radial-gradient(900px 420px at 88% -10%,rgba(163,230,53,.18),transparent 60%),radial-gradient(700px 380px at -5% 0%,rgba(16,185,129,.14),transparent 60%); --cta-1:#D9F99D; --cta-2:#A3E635; --cta-3:#84CC16; --cta-ink:#1A2E05; --cta-glow:rgba(132,204,22,.34); --hl-a:#D9F99D; --hl-b:#6EE7B7; --hl-c:#FCD34D; --foot-1:#063D2C; --foot-2:#021A12; --foot-glow:rgba(163,230,53,.1); --sel:rgba(163,230,53,.34); --spot:rgba(16,185,129,.13); --orb-1:rgba(163,230,53,.22); --orb-2:rgba(16,185,129,.18); --orb-3:rgba(245,158,11,.12); } /* ---------- SUNSET: plum, rose and orange ---------- */ :root[data-accent="sunset"]{ --navy-900:#3A0F2E; --navy:#4C1540; --navy-700:#6B1F57; --navy-600:#8A2A6E; --ink:#4C1540; --paper:#FDF7F6; --surface-2:#FBEFEE; --line:#F0DADA; --line-2:#F6E7E6; --blue-50:#FDF0F2; --blue-100:#FBE0E6; --blue-200:#F6C0CC; --blue-500:#E11D48; --blue-600:#BE123C; --blue-ink:#9F1239; --gold:#FB923C; --gold-ink:#9A3412; --gold-soft:#FFEDD5; --flame:#E11D48; --flame-soft:#FFE4E6; --glow:radial-gradient(900px 420px at 88% -10%,rgba(251,146,60,.2),transparent 60%),radial-gradient(700px 380px at -5% 0%,rgba(225,29,72,.13),transparent 60%); --cta-1:#FDBA74; --cta-2:#FB923C; --cta-3:#F97316; --cta-ink:#3A1300; --cta-glow:rgba(249,115,22,.34); --hl-a:#FDBA74; --hl-b:#FDA4AF; --hl-c:#FDE68A; --foot-1:#4C1540; --foot-2:#22081C; --foot-glow:rgba(251,146,60,.12); --sel:rgba(251,146,60,.32); --spot:rgba(251,146,60,.15); --orb-1:rgba(251,146,60,.24); --orb-2:rgba(225,29,72,.15); --orb-3:rgba(253,230,138,.16); } /* ---------- NEON: midnight indigo, cyan and magenta ---------- */ :root[data-accent="neon"]{ --navy-900:#0B0826; --navy:#110C36; --navy-700:#241B6B; --navy-600:#3A2E9E; --ink:#15103F; --paper:#F6F7FE; --surface-2:#EEF0FD; --line:#DCDFF7; --line-2:#E8EAFB; --blue-50:#EFF1FE; --blue-100:#E0E4FD; --blue-200:#C3CAFA; --blue-500:#6366F1; --blue-600:#4F46E5; --blue-ink:#4338CA; --gold:#22D3EE; --gold-ink:#0E7490; --gold-soft:#CFFAFE; --flame:#D946EF; --flame-soft:#FAE8FF; --glow:radial-gradient(900px 420px at 88% -10%,rgba(34,211,238,.18),transparent 60%),radial-gradient(700px 380px at -5% 0%,rgba(217,70,239,.14),transparent 60%); --cta-1:#67E8F9; --cta-2:#22D3EE; --cta-3:#06B6D4; --cta-ink:#03222A; --cta-glow:rgba(34,211,238,.4); --hl-a:#67E8F9; --hl-b:#F0ABFC; --hl-c:#A5B4FC; --foot-1:#110C36; --foot-2:#05031A; --foot-glow:rgba(217,70,239,.14); --sel:rgba(34,211,238,.3); --spot:rgba(34,211,238,.16); --orb-1:rgba(34,211,238,.22); --orb-2:rgba(217,70,239,.18); --orb-3:rgba(99,102,241,.18); } /* ---------- dark versions of each accent ---------- */ :root[data-theme="dark"][data-accent="ocean"]{ --ink:#E3F6F8; --paper:#041318; --surface:#08212A; --surface-2:#0C2C36; --line:#16414D; --line-2:#11343F; --blue-50:#0B2A33; --blue-100:#0F3945; --blue-200:#16505F; --blue-500:#38D6E8; --blue-600:#67E3F0; --blue-ink:#8BEAF3; --gold-ink:#7CF0DD; --gold-soft:#0B3530; --flame:#FF8A7E; --flame-soft:#3A1714; --btn-a:#5EEAD4; --btn-b:#22C3B0; --btn-ink:#022420; --spot:rgba(94,234,212,.12); } :root[data-theme="dark"][data-accent="aurora"]{ --ink:#EFE9FF; --paper:#0C0720; --surface:#150D30; --surface-2:#1C133D; --line:#2F2458; --line-2:#251C4A; --blue-50:#1C1340; --blue-100:#271A57; --blue-200:#3A2A7A; --blue-500:#A78BFA; --blue-600:#C4B5FD; --blue-ink:#D6CBFE; --gold-ink:#F9A8D4; --gold-soft:#3A0F2A; --flame:#FDBA74; --flame-soft:#3A2210; --btn-a:#C4B5FD; --btn-b:#A78BFA; --btn-ink:#160A38; --spot:rgba(196,181,253,.12); } :root[data-theme="dark"][data-accent="forest"]{ --ink:#E6F7EC; --paper:#04130D; --surface:#082016; --surface-2:#0C2A1D; --line:#17402D; --line-2:#113424; --blue-50:#0B2A1D; --blue-100:#0F3A27; --blue-200:#175236; --blue-500:#34D399; --blue-600:#6EE7B7; --blue-ink:#A7F3D0; --gold-ink:#D9F99D; --gold-soft:#243510; --flame:#FBBF24; --flame-soft:#382A0B; --btn-a:#6EE7B7; --btn-b:#34D399; --btn-ink:#032017; --spot:rgba(110,231,183,.11); } :root[data-theme="dark"][data-accent="sunset"]{ --ink:#FCEAEE; --paper:#16060F; --surface:#220B19; --surface-2:#2C1022; --line:#4A1D38; --line-2:#3A162C; --blue-50:#2E0D1E; --blue-100:#3F1128; --blue-200:#5E1A3A; --blue-500:#FB7185; --blue-600:#FDA4AF; --blue-ink:#FECDD3; --gold-ink:#FDBA74; --gold-soft:#3A1E0C; --flame:#FB7185; --flame-soft:#3A1220; --btn-a:#FDA4AF; --btn-b:#FB7185; --btn-ink:#2A0512; --spot:rgba(253,186,116,.12); } :root[data-theme="dark"][data-accent="neon"]{ --ink:#EDEBFF; --paper:#05031A; --surface:#0C0928; --surface-2:#130F36; --line:#26205A; --line-2:#1C174A; --blue-50:#14103C; --blue-100:#1D1752; --blue-200:#2C2478; --blue-500:#818CF8; --blue-600:#A5B4FC; --blue-ink:#C7D2FE; --gold-ink:#67E8F9; --gold-soft:#062E36; --flame:#F0ABFC; --flame-soft:#35103C; --btn-a:#A5B4FC; --btn-b:#818CF8; --btn-ink:#0B0826; --spot:rgba(34,211,238,.14); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"])[data-accent="ocean"]{ --ink:#E3F6F8; --paper:#041318; --surface:#08212A; --surface-2:#0C2C36; --line:#16414D; --line-2:#11343F; --blue-50:#0B2A33; --blue-100:#0F3945; --blue-200:#16505F; --blue-500:#38D6E8; --blue-600:#67E3F0; --blue-ink:#8BEAF3; --gold-ink:#7CF0DD; --gold-soft:#0B3530; --flame:#FF8A7E; --flame-soft:#3A1714; --btn-a:#5EEAD4; --btn-b:#22C3B0; --btn-ink:#022420; --spot:rgba(94,234,212,.12); } :root:not([data-theme="light"])[data-accent="aurora"]{ --ink:#EFE9FF; --paper:#0C0720; --surface:#150D30; --surface-2:#1C133D; --line:#2F2458; --line-2:#251C4A; --blue-50:#1C1340; --blue-100:#271A57; --blue-200:#3A2A7A; --blue-500:#A78BFA; --blue-600:#C4B5FD; --blue-ink:#D6CBFE; --gold-ink:#F9A8D4; --gold-soft:#3A0F2A; --flame:#FDBA74; --flame-soft:#3A2210; --btn-a:#C4B5FD; --btn-b:#A78BFA; --btn-ink:#160A38; --spot:rgba(196,181,253,.12); } :root:not([data-theme="light"])[data-accent="forest"]{ --ink:#E6F7EC; --paper:#04130D; --surface:#082016; --surface-2:#0C2A1D; --line:#17402D; --line-2:#113424; --blue-50:#0B2A1D; --blue-100:#0F3A27; --blue-200:#175236; --blue-500:#34D399; --blue-600:#6EE7B7; --blue-ink:#A7F3D0; --gold-ink:#D9F99D; --gold-soft:#243510; --flame:#FBBF24; --flame-soft:#382A0B; --btn-a:#6EE7B7; --btn-b:#34D399; --btn-ink:#032017; --spot:rgba(110,231,183,.11); } :root:not([data-theme="light"])[data-accent="sunset"]{ --ink:#FCEAEE; --paper:#16060F; --surface:#220B19; --surface-2:#2C1022; --line:#4A1D38; --line-2:#3A162C; --blue-50:#2E0D1E; --blue-100:#3F1128; --blue-200:#5E1A3A; --blue-500:#FB7185; --blue-600:#FDA4AF; --blue-ink:#FECDD3; --gold-ink:#FDBA74; --gold-soft:#3A1E0C; --flame:#FB7185; --flame-soft:#3A1220; --btn-a:#FDA4AF; --btn-b:#FB7185; --btn-ink:#2A0512; --spot:rgba(253,186,116,.12); } :root:not([data-theme="light"])[data-accent="neon"]{ --ink:#EDEBFF; --paper:#05031A; --surface:#0C0928; --surface-2:#130F36; --line:#26205A; --line-2:#1C174A; --blue-50:#14103C; --blue-100:#1D1752; --blue-200:#2C2478; --blue-500:#818CF8; --blue-600:#A5B4FC; --blue-ink:#C7D2FE; --gold-ink:#67E8F9; --gold-soft:#062E36; --flame:#F0ABFC; --flame-soft:#35103C; --btn-a:#A5B4FC; --btn-b:#818CF8; --btn-ink:#0B0826; --spot:rgba(34,211,238,.14); } } /* ---------- components follow the theme tokens ---------- */ .btn:not(.ghost):not(.soft):not(.gold){background:linear-gradient(180deg,var(--btn-a),var(--btn-b)) !important;color:var(--btn-ink) !important;box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 8px 20px var(--btn-glow) !important} .btn.gold{background:linear-gradient(180deg,var(--cta-1),var(--cta-2) 55%,var(--cta-3)) !important;color:var(--cta-ink) !important;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 8px 22px var(--cta-glow) !important} .btn.gold:hover{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 14px 32px var(--cta-glow) !important} .vhero h1 em,.hl{background:linear-gradient(90deg,var(--hl-a),var(--hl-b),var(--hl-c),var(--hl-a));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent} .footer{background:radial-gradient(800px 300px at 90% 0%,var(--foot-glow),transparent 60%),linear-gradient(180deg,var(--foot-1),var(--foot-2))} .footer h4{color:var(--hl-a)} ::selection{background:var(--sel)} .pill.gold{background:var(--gold-soft);color:var(--gold-ink)} .price.featured{box-shadow:0 22px 50px var(--cta-glow)} .promo-plan .tag{background:var(--cta-2);color:var(--cta-ink)} .mainnav .top.on{box-shadow:inset 0 -2px 0 var(--cta-2)} .card.link-card:hover{border-color:var(--cta-2)} /* ---------- appearance panel ---------- */ .ap h2{margin:0 0 4px} .ap-sec{margin-top:18px} .ap-sec > b{display:block;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:8px} .ap-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2)} .ap-seg button{border:0;background:transparent;border-radius:10px;padding:9px 6px;font-weight:700;font-size:.88rem;color:var(--text-2);cursor:pointer;display:flex;gap:6px;align-items:center;justify-content:center} .ap-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)} .ap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .ap-sw{border:2px solid var(--line-2);border-radius:16px;padding:10px;background:var(--surface);cursor:pointer;text-align:left;display:grid;gap:8px;transition:transform .15s,border-color .15s,box-shadow .15s} .ap-sw:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)} .ap-sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 3px var(--sel)} .ap-sw i{display:block;height:46px;border-radius:11px;position:relative;overflow:hidden} .ap-sw i::after{content:"";position:absolute;right:8px;bottom:8px;width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px rgba(255,255,255,.55)} .ap-sw span{font-weight:700;font-size:.9rem;color:var(--ink);line-height:1.2} .ap-sw small{display:block;font-weight:500;color:var(--text-3);font-size:.74rem} @media (max-width:520px){ .ap-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ---------- scroll progress + back to top ---------- */ #fxProgress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:300;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--cta-2),var(--flame),var(--blue-500));pointer-events:none;will-change:transform} html[dir="rtl"] #fxProgress{transform-origin:100% 50%} #fxTop{position:fixed;left:16px;bottom:18px;z-index:90;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;box-shadow:var(--shadow-2);cursor:pointer;opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .25s,transform .25s} #fxTop.on{opacity:1;transform:none;pointer-events:auto} html[dir="rtl"] #fxTop{left:auto;right:16px} /* ---------- scroll reveal ---------- */ html.fx .rv{opacity:0;transform:translate3d(0,22px,0) scale(.985);transition:opacity .7s cubic-bezier(.16,.84,.24,1),transform .7s cubic-bezier(.16,.84,.24,1);transition-delay:calc(var(--rv-i,0) * 70ms)} html.fx .rv.rv-l{transform:translate3d(-26px,0,0)} html.fx .rv.rv-z{transform:scale(.94)} html.fx .rv.in{opacity:1;transform:none} html.fx-subtle .rv{transform:none !important;transition-duration:.45s} /* ---------- page transition ---------- */ html.fx #main.pg-in > *{animation:pgIn .55s cubic-bezier(.16,.84,.24,1) both} @keyframes pgIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}} /* ---------- click ripple, press and spark ---------- */ .fx-rip{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0} .fx-rip span{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:currentColor;opacity:.22;animation:fxRip .65s cubic-bezier(.2,.7,.2,1) forwards} .btn.gold .fx-rip span,.btn:not(.ghost):not(.soft) .fx-rip span{background:#fff;opacity:.35} @keyframes fxRip{to{transform:translate(-50%,-50%) scale(1);opacity:0}} html.fx .btn:active,html.fx .chip:active,html.fx .tab:active,html.fx .ap-sw:active{transform:scale(.965)} html.fx .card.link-card:active{transform:scale(.985)} .fx-spark{position:fixed;left:0;top:0;width:7px;height:7px;border-radius:2px;pointer-events:none;z-index:400;animation:fxSpark .75s cubic-bezier(.2,.7,.3,1) forwards} @keyframes fxSpark{from{transform:translate(var(--x0),var(--y0)) rotate(0) scale(1);opacity:1}to{transform:translate(var(--x1),var(--y1)) rotate(var(--r)) scale(.4);opacity:0}} /* ---------- gold button shine ---------- */ html.fx .btn.gold{overflow:hidden;position:relative} html.fx .btn.gold::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:fxShine 4.5s ease-in-out infinite;pointer-events:none} @keyframes fxShine{0%,70%{left:-60%}100%{left:130%}} /* ---------- hover spotlight + tilt ---------- */ @media (hover:hover) and (pointer:fine){ html.fx .fx-spot{background-image:radial-gradient(520px circle at var(--mx,-999px) var(--my,-999px),var(--spot),transparent 42%)} html.fx .fx-tilt{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s;transform-style:preserve-3d;will-change:transform} .mainnav .top{position:relative} html.fx .mainnav .top::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cta-2),var(--flame));transform:scaleX(0);transform-origin:0 50%;transition:transform .25s ease} html.fx .mainnav .top:hover::after{transform:scaleX(1)} } /* ---------- living backgrounds ---------- */ html.fx .page-head::before{content:"";position:absolute;inset:-40%;pointer-events:none;z-index:0; background:radial-gradient(28% 34% at 20% 30%,var(--orb-1),transparent 70%),radial-gradient(30% 36% at 80% 20%,var(--orb-2),transparent 70%),radial-gradient(26% 30% at 60% 80%,var(--orb-3),transparent 70%); animation:fxOrbs 22s ease-in-out infinite alternate;filter:blur(8px)} @keyframes fxOrbs{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(4%,3%,0) rotate(8deg)}100%{transform:translate3d(-3%,5%,0) rotate(-6deg)}} html.fx .vhero h1 em,html.fx .hl{animation:fxHl 8s linear infinite} @keyframes fxHl{to{background-position:300% 0}} html.fx .eyebrow::before{animation:fxPulse 2.8s ease-in-out infinite} @keyframes fxPulse{0%,100%{transform:rotate(45deg) scale(1)}50%{transform:rotate(45deg) scale(1.35)}} html.fx .kpi::before{background:linear-gradient(180deg,var(--cta-2),var(--flame),var(--blue-500));background-size:100% 300%;animation:fxBar 6s ease-in-out infinite alternate} @keyframes fxBar{to{background-position:0 100%}} html.fx input[type="checkbox"]:checked{animation:fxPop .3s cubic-bezier(.2,.9,.3,1.4)} @keyframes fxPop{50%{transform:scale(1.25)}} html.fx .bar > i,html.fx .bar > span{transition:width 1.1s cubic-bezier(.16,.84,.24,1)} /* subtle mode: keep colour and reveal, drop continuous motion */ html.fx-subtle .page-head::before,html.fx-subtle .btn.gold::after{animation:none;display:none} html.fx-subtle .vhero h1 em,html.fx-subtle .hl,html.fx-subtle .eyebrow::before,html.fx-subtle .kpi::before{animation:none} @media (prefers-reduced-motion: reduce){ #fxProgress{display:none} .fx-spark{display:none} } @media print{ #fxProgress,#fxTop{display:none !important} .rv{opacity:1 !important;transform:none !important} } /* ===================================================================== Student experience: goal ring, streak, calendar heatmap, badges, weekly report bars, study hub tiles, focus timer pill, bottom nav ===================================================================== */ .st-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} @media (max-width:860px){ .st-panel{grid-template-columns:minmax(0,1fr)} } .st-ring{width:112px;height:112px;flex:0 0 auto} .st-ring circle{fill:none;stroke-width:10} .st-ring .bg{stroke:var(--line-2)} .st-ring .fg{stroke:var(--cta-2);stroke-linecap:round;transform:rotate(-90deg);transform-origin:55px 55px;transition:stroke-dashoffset 1.2s cubic-bezier(.16,.84,.24,1)} .st-ring .v{font-family:var(--display);font-weight:800;font-size:26px;fill:var(--ink)} .st-ring .l{font-size:10px;fill:var(--text-3);font-weight:600} .st-flame{font-family:var(--display);font-size:1.35rem;color:var(--ink)} .st-flame b{font-weight:800} .st-hm{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(var(--w),1fr);gap:4px;width:100%} .st-hm i,.st-hm-key i{display:block;aspect-ratio:1;border-radius:4px;background:var(--line-2)} .st-hm i.st-hm-f{background:transparent} .st-hm i.l1,.st-hm-key i.l1{background:color-mix(in srgb,var(--cta-2) 30%,var(--line-2))} .st-hm i.l2,.st-hm-key i.l2{background:color-mix(in srgb,var(--cta-2) 55%,var(--line-2))} .st-hm i.l3,.st-hm-key i.l3{background:color-mix(in srgb,var(--cta-2) 80%,var(--flame))} .st-hm i.l4,.st-hm-key i.l4{background:linear-gradient(135deg,var(--cta-2),var(--flame))} .st-hm-key{display:inline-grid;grid-template-columns:repeat(5,12px);gap:3px} .st-bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px} .st-b{border:1px dashed var(--line);border-radius:14px;padding:10px;text-align:center;display:grid;gap:2px;opacity:.55;filter:grayscale(1);transition:transform .2s,opacity .2s} .st-b span{font-size:1.6rem;line-height:1.2} .st-b b{font-size:.82rem;color:var(--ink)} .st-b small{font-size:.7rem;color:var(--text-3);line-height:1.3} .st-b.on{opacity:1;filter:none;border-style:solid;border-color:var(--cta-2);background:linear-gradient(180deg,var(--gold-soft),var(--surface));box-shadow:0 6px 18px var(--cta-glow)} html.fx .st-b.on:hover{transform:translateY(-3px) rotate(-1deg)} .st-bars{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;align-items:end;height:170px} .st-bars div{display:grid;grid-template-rows:1fr auto;gap:6px;height:100%;text-align:center} .st-bars i{align-self:end;display:block;min-height:4px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--cta-2),var(--flame))} .st-bars span{font-size:.72rem;color:var(--text-3);font-weight:600} .st-tile{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .st-tile-main{display:flex;align-items:center;gap:14px;flex:1;min-width:200px;text-decoration:none;color:inherit} .st-tile-main b{display:block;color:var(--ink);font-family:var(--display);font-size:1.1rem} .st-tile-main small{display:block;color:var(--text-2)} .st-tile .icon-tile{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto} .focus-pill{position:fixed;left:50%;transform:translateX(-50%);top:74px;z-index:95;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);font-size:.9rem} .focus-pill b{font-family:var(--mono);font-size:1.05rem;color:var(--ink)} .focus-pill .ph{color:var(--text-2);font-weight:600} .focus-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--cta-2);box-shadow:0 0 0 0 var(--cta-glow);animation:fxDot 1.6s infinite} .focus-pill.brk .dot{background:var(--green)} .focus-pill button{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;color:var(--text-2);font-size:1rem;line-height:1} @keyframes fxDot{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}} @media print{ .focus-pill,.bnav{display:none !important} } .bnav{display:none} @media (max-width:760px){ .bnav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:92;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:6px;border-radius:20px; background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.14)} .bnav a{display:grid;justify-items:center;gap:2px;padding:6px 2px;border-radius:14px;color:var(--text-3);text-decoration:none;font-size:.68rem;font-weight:700;position:relative} .bnav a.on{color:var(--ink);background:var(--gold-soft)} .bnav a.on svg{color:var(--gold-ink)} html.fx .bnav a.on svg{animation:fxPop .35s cubic-bezier(.2,.9,.3,1.4)} body.has-bnav{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))} body.has-bnav .ai-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))} body.has-bnav .wa-fab{bottom:calc(144px + env(safe-area-inset-bottom,0px))} body.has-bnav #fxTop{bottom:calc(88px + env(safe-area-inset-bottom,0px))} body.focus-mode .bnav{display:none} body.focus-mode.has-bnav{padding-bottom:0} .focus-pill{top:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px))} } /* ===================================================================== Application tools: kanban board, timeline, APS steps ===================================================================== */ .kb{display:grid;grid-template-columns:repeat(6,minmax(230px,1fr));gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity} .kb-col{background:var(--surface-2);border:1px solid var(--line-2);border-radius:18px;padding:10px;min-height:260px;scroll-snap-align:start;transition:background-color .15s,border-color .15s} .kb-col.over{border-color:var(--cta-2);background:color-mix(in srgb,var(--gold-soft) 60%,var(--surface-2))} .kb-col header{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px;font-family:var(--display);color:var(--ink)} .kb-list{display:grid;gap:10px} .kb-card{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:12px;box-shadow:var(--shadow-1);cursor:grab;transition:transform .15s,box-shadow .15s} .kb-card:hover{box-shadow:var(--shadow-2)} .kb-card.drag{opacity:.5;transform:rotate(2deg) scale(.98)} .kb-t{display:block;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.3} .kb-t:hover{text-decoration:underline} .kb-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px} .kb-foot select{min-height:30px;padding:2px 6px;font-size:.8rem;max-width:110px} .kb-empty{text-align:center;padding:24px 0;border:2px dashed var(--line);border-radius:12px;margin:0} @media (max-width:760px){ .kb{grid-template-columns:repeat(6,82%)} } .tl{list-style:none;margin:22px 0 0;padding:0;position:relative} .tl::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--blue-200),var(--cta-2),var(--flame))} .tl li{position:relative;padding:0 0 18px 38px} .tl-dot{position:absolute;left:3px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--surface);border:3px solid var(--blue-500)} .tl li.past .tl-dot{border-color:var(--line);background:var(--line-2)} .tl li.past .tl-body{opacity:.6} .tl li.next .tl-dot{border-color:var(--cta-2);box-shadow:0 0 0 6px var(--sel)} html.fx .tl li.next .tl-dot{animation:fxDot 1.8s infinite} .tl-body{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-1)} .tl li.next .tl-body{border-color:var(--cta-2)} .aps-step{padding:10px 0;border-bottom:1px solid var(--line-2)} .aps-step:last-child{border-bottom:0} .aps-step.done b{text-decoration:line-through;text-decoration-color:var(--green);color:var(--text-2)} /* University Match */ .mk-card{display:flex;gap:16px;align-items:flex-start} .mk-score{--p:50;flex:0 0 auto;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;align-content:center;background:conic-gradient(var(--cta-2) calc(var(--p) * 1%),var(--line-2) 0);position:relative} .mk-score::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--surface)} .mk-score b,.mk-score small{position:relative;line-height:1} .mk-score b{font-family:var(--display);font-size:1.15rem;color:var(--ink)} .mk-score small{font-size:.6rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em} .mk-list{margin:8px 0 0;padding-left:18px} .mk-list li{margin:2px 0} .mk-list.ok li::marker{content:"\2713 ";color:var(--green)} .mk-list.warn li::marker{content:"! ";color:var(--amber);font-weight:800} @media (max-width:520px){ .mk-card{flex-direction:column} } /* ===================================================================== FX round 2: ticker, stats band, landing pages, magnetic buttons, animated border glow, heading underline draw, confetti, hero sparkles ===================================================================== */ .ticker{overflow:hidden;background:linear-gradient(90deg,var(--navy-900),var(--navy),var(--navy-900));color:#fff;border-block:1px solid rgba(255,255,255,.08);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ticker-track{display:flex;gap:42px;width:max-content;padding:13px 0;font-weight:700;font-size:.9rem;letter-spacing:.01em;white-space:nowrap} .ticker-track span{opacity:.92} .ticker-track span::first-letter{color:var(--cta-2)} html.fx .ticker-track{animation:fxTicker 38s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} @keyframes fxTicker{to{transform:translateX(-50%)}} html[dir="rtl"] .ticker-track{animation-direction:reverse} .stats-band{background:var(--surface);border-bottom:1px solid var(--line-2)} .stats-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:26px 0} .stats-grid div{text-align:center;display:grid;gap:4px} .stats-grid b{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;line-height:1;background:linear-gradient(135deg,var(--ink),var(--blue-500));-webkit-background-clip:text;background-clip:text;color:transparent} .stats-grid span{font-size:.8rem;color:var(--text-2);font-weight:600} @media (max-width:860px){ .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:480px){ .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } .lp-hero{position:relative;overflow:hidden;color:#fff;padding:84px 0 70px;background:radial-gradient(900px 500px at 85% -10%,var(--orb-1),transparent 60%),radial-gradient(700px 420px at 0% 100%,var(--orb-2),transparent 60%),linear-gradient(135deg,var(--navy-900),var(--navy) 55%,var(--navy-700))} .lp-hero .eyebrow{color:var(--hl-a)} .lp-title{color:#fff;font-size:clamp(2.1rem,5vw,3.8rem);max-width:18ch;margin-top:12px} .lp-lede{font-size:1.15rem;max-width:58ch;opacity:.9;margin-top:14px} .lp-hero .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.3)} .btn.lg{height:52px;padding:0 24px;font-size:1.02rem;border-radius:14px} .lp-point{position:relative;padding-top:28px} .lp-num{position:absolute;top:-16px;left:18px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;color:var(--cta-ink);background:linear-gradient(135deg,var(--cta-1),var(--cta-3));box-shadow:0 8px 20px var(--cta-glow)} .ref-code{font-family:var(--mono);font-size:1.8rem;font-weight:700;letter-spacing:.08em;color:var(--ink);background:var(--gold-soft);border:2px dashed var(--cta-2);border-radius:14px;padding:8px 16px;display:inline-block} html.fx .ref-code{animation:fxPop .5s cubic-bezier(.2,.9,.3,1.4)} /* hero sparkles */ html.fx .vhero::after,html.fx .lp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.55; background-image:radial-gradient(1.5px 1.5px at 12% 22%,#fff,transparent),radial-gradient(1.5px 1.5px at 32% 68%,#fff,transparent),radial-gradient(2px 2px at 58% 18%,var(--hl-a),transparent),radial-gradient(1.5px 1.5px at 76% 58%,#fff,transparent),radial-gradient(2px 2px at 88% 30%,var(--hl-b),transparent),radial-gradient(1.5px 1.5px at 46% 88%,#fff,transparent),radial-gradient(1.5px 1.5px at 6% 80%,var(--hl-a),transparent); animation:fxTwinkle 5s ease-in-out infinite alternate} @keyframes fxTwinkle{0%{opacity:.25;transform:translateY(0)}100%{opacity:.7;transform:translateY(-8px)}} .lp-hero .wrap{position:relative;z-index:2} /* animated gradient border on featured cards */ html.fx .price.featured,html.fx .ctaband{position:relative;isolation:isolate} html.fx .price.featured::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;z-index:-1;background:conic-gradient(from var(--fx-ang,0deg),var(--cta-1),var(--flame),var(--blue-500),var(--cta-2),var(--cta-1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxSpin 6s linear infinite} @property --fx-ang{syntax:"";inherits:false;initial-value:0deg} @keyframes fxSpin{to{--fx-ang:360deg}} /* section headings: underline draws in when revealed */ html.fx .section h2{position:relative} html.fx .section h2.fx-line::after{content:"";display:block;width:64px;height:4px;border-radius:4px;margin-top:10px;background:linear-gradient(90deg,var(--cta-2),var(--flame));transform:scaleX(0);transform-origin:0 50%;transition:transform .9s cubic-bezier(.16,.84,.24,1) .15s} html.fx .section .center h2.fx-line::after,html.fx .section h2.fx-line[style*="center"]::after{margin-inline:auto;transform-origin:50% 50%} html.fx .section h2.fx-line.fx-drawn::after{transform:scaleX(1)} /* typing caret */ .fx-type::after{content:"";display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-2px;background:currentColor;animation:fxCaret 1s steps(1) infinite} @keyframes fxCaret{50%{opacity:0}} /* confetti */ .fx-conf{position:fixed;top:0;left:0;width:8px;height:12px;z-index:500;pointer-events:none;border-radius:2px;animation:fxConf var(--d,1.6s) cubic-bezier(.2,.6,.4,1) forwards} @keyframes fxConf{0%{transform:translate(var(--x0),var(--y0)) rotate(0);opacity:1}100%{transform:translate(var(--x1),var(--y1)) rotate(var(--r));opacity:0}} /* magnetic buttons */ html.fx .fx-magnet{transition:transform .25s cubic-bezier(.2,.7,.2,1)} /* loading skeleton shimmer */ html.fx .skeleton{background:linear-gradient(90deg,var(--line-2) 25%,var(--surface-2) 50%,var(--line-2) 75%);background-size:200% 100%;animation:fxShimmer 1.2s linear infinite} @keyframes fxShimmer{to{background-position:-200% 0}} /* toast slide */ html.fx .toast{animation:fxToast .35s cubic-bezier(.2,.9,.3,1.2)} @keyframes fxToast{from{opacity:0;transform:translate(-50%,16px) scale(.96)}} /* icon tiles bounce on card hover */ @media (hover:hover){ html.fx .card:hover .icon-tile,html.fx .card:hover .lp-num{animation:fxBob .6s ease} } @keyframes fxBob{40%{transform:translateY(-5px) rotate(-6deg)}70%{transform:translateY(1px)}} html.fx-subtle .ticker-track,html.fx-subtle .price.featured::before,html.fx-subtle .vhero::after,html.fx-subtle .lp-hero::after{animation:none} /* ===================================================================== FX round 3: particle hero, cursor glow, title wipe, route loader, parallax, glare, card shine, university marquee, footer wave, menu stagger, logo flame, bottom-nav blob, progress stripes ===================================================================== */ /* particle network canvas */ .fx-net{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.85} .vhero .inner,.lp-hero .wrap{position:relative;z-index:3} /* cursor glow (desktop) */ #fxCursor{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:55; background:radial-gradient(circle,var(--spot) 0%,transparent 62%);opacity:0;transition:opacity .4s;will-change:transform} html.fx.fx-cursor-on #fxCursor{opacity:1} @media (hover:none),(pointer:coarse){ #fxCursor{display:none} } /* page title wipe-in */ html.fx .page-head h1.fx-wipe{animation:fxWipe 1s cubic-bezier(.16,.84,.24,1) both} @keyframes fxWipe{0%{clip-path:inset(0 100% 0 0);filter:blur(6px);transform:translateY(8px)}60%{filter:blur(0)}100%{clip-path:inset(0 0 0 0);transform:none}} html.fx .page-head .eyebrow{animation:fxSlideIn .7s cubic-bezier(.16,.84,.24,1) both} @keyframes fxSlideIn{from{opacity:0;transform:translateX(-18px)}} html.fx .page-head .actions .btn{animation:fxPopIn .55s cubic-bezier(.2,.9,.3,1.25) both} html.fx .page-head .actions .btn:nth-child(2){animation-delay:.08s} html.fx .page-head .actions .btn:nth-child(3){animation-delay:.16s} @keyframes fxPopIn{from{opacity:0;transform:scale(.85) translateY(8px)}} /* route loader bar */ #fxLoader{position:fixed;left:0;top:0;height:3px;width:100%;z-index:310;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);opacity:0; background:linear-gradient(90deg,transparent,var(--cta-1),var(--flame),var(--blue-500));box-shadow:0 0 12px var(--cta-glow)} #fxLoader.go{animation:fxLoad .7s cubic-bezier(.3,.8,.3,1) forwards} @keyframes fxLoad{0%{opacity:1;transform:scaleX(0)}70%{opacity:1;transform:scaleX(.9)}100%{opacity:0;transform:scaleX(1)}} /* glare on pricing / media cards */ .fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;z-index:2} .fx-glare::before{content:"";position:absolute;width:180%;height:180%;left:var(--gx,-200%);top:var(--gy,-200%);transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,255,255,.28),transparent 45%);opacity:var(--go,0);transition:opacity .3s} /* card shine sweep on hover */ @media (hover:hover){ html.fx .card.link-card,html.fx .st-tile,html.fx .kb-card{overflow:hidden;position:relative} html.fx .card.link-card::after,html.fx .st-tile::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);opacity:0} html.fx .card.link-card:hover::after,html.fx .st-tile:hover::after{animation:fxCardShine .8s ease forwards} } @keyframes fxCardShine{0%{left:-75%;opacity:1}100%{left:130%;opacity:0}} /* university marquee */ .uni-marquee{padding:30px 0 34px;background:var(--surface-2);border-block:1px solid var(--line-2);overflow:hidden} .uni-marquee h2{text-align:center;font-size:clamp(1.2rem,2.4vw,1.6rem);margin:0 0 6px} .uni-marquee p{text-align:center;margin:0 auto 18px;color:var(--text-2)} .um-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .um-row + .um-row{margin-top:10px} .um-track{display:flex;gap:10px;width:max-content} .um-track a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);text-decoration:none;font-weight:600;font-size:.88rem;white-space:nowrap;box-shadow:var(--shadow-1);transition:transform .2s,border-color .2s} .um-track a:hover{transform:translateY(-2px);border-color:var(--cta-2)} .um-track a small{color:var(--text-3);font-weight:600} .um-track a i{width:8px;height:8px;border-radius:50%;background:var(--cta-2);flex:0 0 auto} .um-track a i.vpd{background:var(--blue-500)} .um-track a i.ua{background:var(--flame)} html.fx .um-track{animation:fxTicker 70s linear infinite} html.fx .um-row.rev .um-track{animation-direction:reverse;animation-duration:85s} .um-row:hover .um-track{animation-play-state:paused} /* footer wave */ .fx-wave{display:block;width:100%;height:60px;margin-bottom:-2px;position:relative;z-index:1} .fx-wave path{fill:var(--foot-1)} html.fx .fx-wave .w1{animation:fxWave 9s ease-in-out infinite alternate} html.fx .fx-wave .w2{animation:fxWave 12s ease-in-out infinite alternate-reverse;opacity:.55} @keyframes fxWave{to{transform:translateX(-60px)}} /* mega menu + drawer stagger */ html.fx .mainnav .item.open .mega a{animation:fxMenuIn .35s cubic-bezier(.2,.9,.3,1.1) both} html.fx .mainnav .item.open .mega a:nth-child(2){animation-delay:.03s} html.fx .mainnav .item.open .mega a:nth-child(3){animation-delay:.06s} html.fx .mainnav .item.open .mega a:nth-child(4){animation-delay:.09s} html.fx .mainnav .item.open .mega a:nth-child(5){animation-delay:.12s} html.fx .mainnav .item.open .mega a:nth-child(6){animation-delay:.15s} html.fx .mainnav .item.open .mega a:nth-child(n+7){animation-delay:.18s} @keyframes fxMenuIn{from{opacity:0;transform:translateY(-6px)}} html.fx .mega a:hover .ico{animation:fxBob .5s ease} html.fx .drawer.open .panel > *{animation:fxSlideIn .4s cubic-bezier(.2,.9,.3,1) both} /* logo flame flicker on hover */ @media (hover:hover){ html.fx .brand:hover img.mark{animation:fxFlame .9s ease-in-out} } @keyframes fxFlame{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.08)}50%{transform:rotate(6deg) scale(1.12);filter:saturate(1.4) drop-shadow(0 0 8px var(--cta-glow))}75%{transform:rotate(-3deg) scale(1.04)}} /* bottom nav sliding blob */ .bnav{position:fixed} .bnav-blob{position:absolute;top:6px;bottom:6px;left:6px;border-radius:14px;background:var(--gold-soft);box-shadow:0 4px 14px var(--cta-glow);transition:transform .45s cubic-bezier(.2,.9,.3,1.15),width .3s;z-index:0;pointer-events:none} .bnav a{position:relative;z-index:1;background:transparent !important} /* progress bars: moving stripes */ html.fx .bar > i{position:relative;overflow:hidden} html.fx .bar > i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translateX(-100%);animation:fxBarSheen 2.6s ease-in-out infinite} @keyframes fxBarSheen{60%,100%{transform:translateX(100%)}} /* click ring */ .fx-ring{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--cta-2);pointer-events:none;z-index:450;animation:fxRing .55s cubic-bezier(.2,.7,.3,1) forwards} @keyframes fxRing{to{transform:translate(var(--x),var(--y)) scale(5);opacity:0}} html.fx-subtle .fx-net,html.fx-subtle #fxCursor,html.fx-subtle .fx-wave .w1,html.fx-subtle .fx-wave .w2,html.fx-subtle .bar > i::after{animation:none;display:none} html.fx-subtle .um-track{animation-duration:140s} @media print{ .fx-net,#fxCursor,#fxLoader,.fx-wave,.uni-marquee{display:none !important} } /* ---------- small phones: header must never overflow ---------- */ @media (max-width:420px){ .head-in{gap:6px !important;padding:0 10px !important} .head-actions{gap:6px !important} .head-actions .theme-btn,.head-actions .lang-btn,.head-actions .hamb{width:36px !important;height:36px !important;min-width:36px;padding:0 !important} .head-search{flex:0 0 36px !important;width:36px !important;min-width:36px} .brand{gap:6px !important;min-width:0;flex:0 1 auto !important} .brand img.mark{width:30px !important;height:30px !important} .site-head .brand img.wordmark{height:17px !important} } @media (max-width:420px) and (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .site-head .brand img.wordmark{padding:2px 5px !important} } @media (max-width:420px){ :root[data-theme="dark"] .site-head .brand img.wordmark{padding:2px 5px !important} } @media (max-width:350px){ .site-head .brand img.wordmark{height:14px !important} .head-actions .lang-btn{display:none !important} } /* small phones: tapping search expands it across the header */ @media (max-width:640px){ .site-head .head-in{position:relative} .head-search:focus-within{position:absolute !important;left:10px;right:10px;top:50%;transform:translateY(-50%);width:auto !important;max-width:none !important;flex:none !important;z-index:20;animation:fxSearchOpen .25s cubic-bezier(.2,.9,.3,1)} .head-search:focus-within input{width:100%;background:var(--surface);box-shadow:var(--shadow-2)} .head-search:focus-within .search-pop{left:0;right:0;width:auto} } @keyframes fxSearchOpen{from{opacity:.4;transform:translateY(-50%) scaleX(.6)}} /* ===================================================================== Student features plus: daily challenge, word of the day, readiness, interview practice, SOP checker, certificates ===================================================================== */ .dc-banner{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 22px;border-radius:20px;margin-bottom:20px;color:#fff; background:radial-gradient(500px 200px at 90% 0%,var(--orb-1),transparent 60%),linear-gradient(120deg,var(--navy-900),var(--navy-700));box-shadow:var(--shadow-2);position:relative;overflow:hidden} .dc-banner > div{flex:1;min-width:200px;display:grid;gap:2px} .dc-banner b{font-family:var(--display);font-size:1.3rem} .dc-banner span{opacity:.8;font-size:.9rem} html.fx .dc-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);transform:translateX(-100%);animation:fxBarSheen 4s ease-in-out infinite;pointer-events:none} .dc-q{transition:border-color .3s,box-shadow .3s} .dc-q.ok{border-color:var(--green)} .dc-q.bad{border-color:var(--red)} .dc-opt{justify-content:flex-start !important;text-align:left;height:auto !important;min-height:44px;padding:10px 14px !important;white-space:normal;line-height:1.35} .wod{position:relative;overflow:hidden} .wod-w{font-family:var(--display);font-size:2rem;font-weight:800;color:var(--ink);margin:8px 0 2px;letter-spacing:-.02em} html.fx .wod-w{background:linear-gradient(90deg,var(--ink),var(--blue-500),var(--flame),var(--ink));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fxHl 9s linear infinite} .rd-card{display:grid;gap:6px} .rd-gauge{width:100%;max-width:200px;margin:4px auto 0;display:block} .rd-gauge path{fill:none;stroke-width:10;stroke-linecap:round} .rd-gauge .bg{stroke:var(--line-2)} .rd-gauge .fg{transition:stroke-dashoffset 1.4s cubic-bezier(.16,.84,.24,1)} .rd-gauge text{font-family:var(--display);font-weight:800;font-size:22px;fill:var(--ink)} html.fx .rd-gauge .fg{animation:fxGauge 1.4s cubic-bezier(.16,.84,.24,1) both} @keyframes fxGauge{from{stroke-dashoffset:132}} .iv-card{padding:22px} .iv-q{font-size:clamp(1.3rem,3vw,1.8rem);margin:12px 0 16px} .sc-row{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--line-2)} .sc-row:last-of-type{border-bottom:0} .cert-card{text-align:center;display:grid;justify-items:center} .cert-card .bar{width:100%} .cert-ico{font-size:2.2rem;line-height:1} html.fx .cert-card.ok .cert-ico{animation:fxBob 2.2s ease-in-out infinite} .cert{background:#fffdf7;color:#1b2a3c;border-radius:12px;padding:14px} .cert-in{border:3px double #c9a24a;border-radius:8px;padding:34px 28px;text-align:center;background:radial-gradient(600px 300px at 50% 0%,rgba(242,178,51,.12),transparent 70%)} .cert-logo{height:30px;width:auto;margin:0 auto 12px;display:block} .cert-kicker{letter-spacing:.3em;text-transform:uppercase;font-size:.78rem;color:#8a5b00;font-weight:700} .cert-name{font-family:var(--display);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:800;color:#0f2a4a;margin:14px 0 6px;outline:none;border-bottom:2px solid #e6d3a3;display:inline-block;padding:0 12px} .cert-course{font-family:var(--display);font-size:1.5rem;font-weight:700;color:#0f2a4a;margin:4px 0 8px} .cert p{color:#4a5c72;margin:6px auto;max-width:60ch} .cert-foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px;font-size:.85rem;color:#4a5c72;border-top:1px solid #e6d3a3;padding-top:10px} .cert-note{font-size:.72rem !important;color:#6e8199 !important;margin-top:12px !important} /* ===================================================================== FX round 4: check draw, badge unlock, CTA attention pulse, border beam, blur-up media, tab indicator, digit roll, streak flame ===================================================================== */ html.fx .check input[type="checkbox"]:checked,html.fx label.check input:checked{position:relative} html.fx .check input[type="checkbox"]:checked::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--green);opacity:0;animation:fxCheckRing .6s ease-out} @keyframes fxCheckRing{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.5);opacity:0}} .badge-pop{text-align:center;padding:10px 4px} .badge-pop .bp-ico{font-size:4rem;line-height:1;display:inline-block;animation:fxBadge 1s cubic-bezier(.2,.9,.3,1.3) both} @keyframes fxBadge{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}} .badge-pop h2{margin:10px 0 4px} html.fx .lp-hero .btn.gold,html.fx .ctaband .btn.gold{animation:fxAttention 5s ease-in-out 2s infinite} @keyframes fxAttention{0%,88%,100%{transform:none;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 8px 22px var(--cta-glow)}92%{transform:scale(1.045);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 14px 34px var(--cta-glow)}96%{transform:scale(.99)}} html.fx .ctaband,html.fx .dc-banner{position:relative;isolation:isolate} html.fx .ctaband::before,html.fx .dc-banner::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:-1; background:conic-gradient(from var(--fx-ang,0deg),transparent 0deg,var(--cta-1) 40deg,var(--flame) 80deg,transparent 140deg,transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxSpin 7s linear infinite} .mediacard img,.mediacard video,.uni-card img{transition:filter .6s ease,transform .6s ease} html.fx .mediacard img[data-loading],html.fx .mediacard video[data-loading]{filter:blur(14px) saturate(.7);transform:scale(1.04)} .tabs{position:relative} .tab-ind{position:absolute;bottom:0;height:2.5px;border-radius:3px;background:linear-gradient(90deg,var(--cta-2),var(--flame));transition:transform .4s cubic-bezier(.2,.9,.3,1.1),width .3s;pointer-events:none} html.fx .tab[aria-selected="true"]{border-bottom-color:transparent !important} .digit-roll{display:inline-flex;overflow:hidden;height:1em;vertical-align:-.08em} .digit-roll i{display:block;font-style:normal;animation:fxRoll .9s cubic-bezier(.2,.8,.2,1) both} @keyframes fxRoll{from{transform:translateY(100%);opacity:0}} html.fx .st-flame{position:relative;display:inline-block} html.fx .st-flame::after{content:"";position:absolute;left:-6px;right:-6px;top:-4px;bottom:-4px;border-radius:12px;background:radial-gradient(closest-side,var(--cta-glow),transparent);opacity:.7;z-index:-1;animation:fxPulse 2.4s ease-in-out infinite} html.fx-subtle .lp-hero .btn.gold,html.fx-subtle .ctaband .btn.gold,html.fx-subtle .ctaband::before,html.fx-subtle .dc-banner::before{animation:none} /* ===================================================================== FX round 5: scroll ring, aurora background, digit roll, heatmap pop, report bars, input focus glow, mini progress header ===================================================================== */ #fxTop{position:fixed} #fxTop svg.ring{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);transform:rotate(-90deg);pointer-events:none} #fxTop svg.ring circle{fill:none;stroke-width:2.5} #fxTop svg.ring .r-bg{stroke:var(--line-2)} #fxTop svg.ring .r-fg{stroke:var(--cta-2);stroke-linecap:round;transition:stroke-dashoffset .1s linear} html.fx body::before{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;opacity:0;transition:opacity .6s; background:radial-gradient(35% 35% at 20% 25%,var(--orb-1),transparent 70%),radial-gradient(30% 30% at 80% 15%,var(--orb-2),transparent 70%),radial-gradient(35% 35% at 60% 85%,var(--orb-3),transparent 70%); filter:blur(40px);animation:fxOrbs 26s ease-in-out infinite alternate} @media (prefers-color-scheme:dark){ html.fx:not([data-theme="light"]) body::before{opacity:.5} } html.fx[data-theme="dark"] body::before{opacity:.5} html.fx .st-hm i{animation:fxCell .5s cubic-bezier(.2,.9,.3,1.2) both} @keyframes fxCell{from{transform:scale(.3);opacity:0}} html.fx .st-bars i{animation:fxGrow .9s cubic-bezier(.16,.84,.24,1) both;transform-origin:50% 100%} @keyframes fxGrow{from{transform:scaleY(0)}} html.fx input:focus,html.fx select:focus,html.fx textarea:focus{box-shadow:0 0 0 4px var(--sel);border-color:var(--cta-2);transition:box-shadow .2s,border-color .2s} #fxMini{position:fixed;left:0;right:0;top:0;z-index:58;display:flex;align-items:center;gap:10px;padding:8px 18px; background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2); transform:translateY(-100%);transition:transform .35s cubic-bezier(.2,.9,.3,1);font-weight:700;color:var(--ink);font-size:.92rem} #fxMini.on{transform:none} #fxMini .mini-bar{flex:1;height:4px;border-radius:4px;background:var(--line-2);overflow:hidden;max-width:320px} #fxMini .mini-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cta-2),var(--flame));width:0} #fxMini span.t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw} @media (max-width:640px){ #fxMini{padding:7px 12px;font-size:.85rem} } html.fx-subtle body::before,html.fx-subtle .st-hm i,html.fx-subtle .st-bars i{animation:none} @media print{ #fxMini{display:none !important} } /* ---------- words of the day (10 + 10) ---------- */ .wod-list{display:grid;gap:8px} .wod-item{display:grid;grid-template-columns:26px 1fr auto auto;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer; border:1px solid var(--line-2);background:var(--surface);border-radius:14px;padding:10px 12px;position:relative;overflow:hidden; transition:border-color .2s,transform .2s,box-shadow .2s,background-color .2s} html.fx .wod-item{animation:fxWordIn .5s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 55ms)} @keyframes fxWordIn{from{opacity:0;transform:translateY(10px) scale(.97)}} .wod-item:hover{border-color:var(--cta-2);transform:translateY(-2px);box-shadow:var(--shadow-1)} .wod-item:active{transform:scale(.99)} .wod-num{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:var(--gold-ink);background:var(--gold-soft)} .wod-main{display:grid;gap:1px;min-width:0} .wod-main b{font-family:var(--display);font-size:1.12rem;color:var(--ink);line-height:1.2} .wod-main span{font-size:.86rem;color:var(--text-2)} .wod-main i{font-size:.78rem;color:var(--text-3)} .wod-main .pill{justify-self:start;margin-top:3px;font-size:.62rem;padding:1px 7px} .wod-play{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--blue-ink);background:var(--blue-50);flex:0 0 auto;transition:transform .2s} .wod-play:hover{transform:scale(1.12) rotate(-6deg)} .wod-check{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);color:transparent;transition:all .25s} .wod-item.known{border-color:var(--green);background:linear-gradient(90deg,var(--green-soft),var(--surface) 60%)} .wod-item.known .wod-check{background:var(--green);border-color:var(--green);color:#fff} .wod-item.known .wod-main b{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--green) 60%,transparent)} html.fx .wod-item.known{animation:fxKnown .45s cubic-bezier(.2,.9,.3,1.3)} @keyframes fxKnown{40%{transform:scale(1.03)}} html.fx .wod-item::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);transform:translateX(-100%);opacity:0} html.fx .wod-item:hover::after{animation:fxCardShine .7s ease} @media (max-width:520px){ .wod-main i{display:none} } /* ---------- smart alerts, plan weeks, sparkline ---------- */ .sm-alerts{display:grid;gap:10px} .sm-alert{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 14px;padding:14px 16px;border-radius:16px;border:1px solid var(--line-2);background:var(--surface);box-shadow:var(--shadow-1)} .sm-alert b{grid-column:1;font-family:var(--display);font-size:1.02rem;color:var(--ink)} .sm-alert span{grid-column:1;font-size:.88rem;color:var(--text-2)} .sm-alert .btn{grid-column:2;grid-row:1 / span 2} .sm-alert.red{border-left:4px solid var(--red)} .sm-alert.amber{border-left:4px solid var(--amber)} .sm-alert.info{border-left:4px solid var(--blue-500)} html.fx .sm-alert{animation:fxWordIn .5s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 70ms)} html.fx .sm-alert.red::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 40%,transparent);animation:fxDot 2.4s infinite;pointer-events:none} .sm-alert{position:relative} .sm-week .panel-b{padding-top:6px} .spark{width:100%;height:54px;display:block;margin:6px 0 2px;overflow:visible} .spark-area{fill:color-mix(in srgb,var(--cta-2) 16%,transparent);stroke:none} .spark-line{fill:none;stroke:var(--cta-2);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .spark-line.up{stroke:var(--green)} .spark-line.down{stroke:var(--flame)} .spark-dot{fill:var(--surface);stroke:var(--cta-2);stroke-width:2} .spark-dot.last{fill:var(--cta-2)} html.fx .spark-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:fxDraw 1.4s cubic-bezier(.16,.84,.24,1) forwards} html.fx .spark-area{opacity:0;animation:fxFade .8s .5s forwards} html.fx .spark-dot{opacity:0;animation:fxFade .3s forwards;animation-delay:1.1s} @keyframes fxDraw{to{stroke-dashoffset:0}} @keyframes fxFade{to{opacity:1}} /* ---------- selling honestly: value blocks, trial band, upsell modal ---------- */ .sell-top{display:grid;gap:14px;margin-bottom:22px} .sell-anchor{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-radius:16px;background:linear-gradient(120deg,var(--gold-soft),var(--surface));border:1px solid var(--cta-2)} .sell-anchor b{font-family:var(--display);font-size:1.2rem;color:var(--ink)} .sell-anchor span{color:var(--text-2);font-size:.92rem} .sell-inv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .sell-inv a{display:grid;gap:2px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);text-decoration:none;text-align:center;transition:transform .2s,border-color .2s} .sell-inv a:hover{transform:translateY(-3px);border-color:var(--cta-2)} .sell-inv b{font-family:var(--display);font-size:1.5rem;color:var(--ink);line-height:1} .sell-inv span{font-size:.76rem;color:var(--text-2)} html.fx .sell-inv a{animation:fxWordIn .5s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 50ms)} @media (max-width:860px){ .sell-inv{grid-template-columns:repeat(2,minmax(0,1fr))} } .sell-why .card{text-align:left} .sell-emoji{font-size:2rem;line-height:1} html.fx .sell-why .card{animation:fxWordIn .55s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 80ms)} .sell-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px} .sell-trust > div{display:grid;gap:4px;padding:14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-2)} .sell-trust b{color:var(--ink);font-size:.95rem} .sell-trust span{font-size:.82rem;color:var(--text-2)} .sell-trust .icon-tile{width:34px;height:34px;border-radius:10px;display:grid;place-items:center} @media (max-width:860px){ .sell-trust{grid-template-columns:repeat(2,minmax(0,1fr))} } .up-band{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;border-radius:18px;color:#fff; background:radial-gradient(500px 200px at 85% 0%,var(--orb-1),transparent 60%),linear-gradient(120deg,var(--navy-900),var(--navy-700));box-shadow:var(--shadow-2)} .up-band > div{flex:1;min-width:220px;display:grid;gap:3px} .up-band b{font-family:var(--display);font-size:1.15rem} .up-band span{opacity:.86;font-size:.9rem} .up-actions{display:grid;gap:4px;justify-items:center} .up-actions .tiny{opacity:.75} .up-modal{text-align:center} .up-ico{font-size:2.6rem;line-height:1} .up-list{list-style:none;padding:0;margin:0 auto 14px;max-width:420px;display:grid;gap:8px;text-align:left} .up-list li{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start;font-size:.92rem} .up-list svg{color:var(--green);margin-top:3px} .up-price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .up-plan{display:grid;gap:2px;padding:12px;border-radius:14px;border:2px solid var(--line-2);text-decoration:none;background:var(--surface);transition:transform .2s,border-color .2s} .up-plan:hover{transform:translateY(-2px);border-color:var(--cta-2)} .up-plan.best{border-color:var(--cta-2);background:linear-gradient(180deg,var(--gold-soft),var(--surface))} .up-plan b{font-family:var(--display);font-size:1.4rem;color:var(--ink)} .up-plan span{font-size:.85rem;color:var(--text)} .up-plan em{font-style:normal;font-size:.72rem;color:var(--text-3)} .plan-note{font-size:.8rem;color:var(--gold-ink);background:var(--gold-soft);border-radius:8px;padding:4px 8px;display:inline-block;margin:6px 0 2px} .trial-band{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;border-radius:18px;margin-bottom:18px;border:2px dashed var(--cta-2);background:linear-gradient(120deg,var(--gold-soft),var(--surface) 70%)} .trial-band > div{flex:1;min-width:220px;display:grid;gap:2px} .trial-band b{font-family:var(--display);font-size:1.12rem;color:var(--ink)} .trial-band span{font-size:.9rem;color:var(--text-2)} .trial-band.on{border-style:solid;border-color:var(--green);background:linear-gradient(120deg,var(--green-soft),var(--surface) 70%)} html.fx .trial-band.offer{animation:fxTrial 3.5s ease-in-out infinite} @keyframes fxTrial{0%,92%,100%{box-shadow:0 0 0 0 transparent}96%{box-shadow:0 0 0 6px var(--sel)}} #trialStrip{display:flex;align-items:center;justify-content:center;gap:10px;padding:7px 14px;background:linear-gradient(90deg,var(--green),var(--blue-500));color:#fff;font-size:.86rem;font-weight:700} #trialStrip a{color:#fff;text-decoration:underline} .em-emoji{font-size:2.4rem;line-height:1} @media print{ .up-band,.trial-band,#trialStrip{display:none !important} } /* ---------- words of the day: colour, context and progress ---------- */ .wod .panel-h{gap:8px} .wod-ico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;color:#fff} .wod-de .wod-ico{background:linear-gradient(135deg,var(--flame),var(--cta-2))} .wod-en .wod-ico{background:linear-gradient(135deg,var(--blue-500),var(--teal,#0e9aa7))} .wod-track{height:5px;background:var(--line);overflow:hidden} .wod-track i{display:block;height:100%;width:0;border-radius:0 4px 4px 0;transition:width .6s cubic-bezier(.2,.9,.3,1.1)} .wod-de .wod-track i{background:linear-gradient(90deg,var(--cta-2),var(--flame))} .wod-en .wod-track i{background:linear-gradient(90deg,var(--blue-500),var(--green))} .wod-de .wod-num{background:var(--gold-soft);color:var(--gold-ink)} .wod-en .wod-num{background:var(--blue-50);color:var(--blue-ink)} .wod-de .wod-play{background:linear-gradient(135deg,var(--flame),var(--cta-2));color:#fff} .wod-en .wod-play{background:linear-gradient(135deg,var(--blue-500),var(--blue-600,#1d4ed8));color:#fff} .wod-play:active{transform:scale(.92)} .wod-item:hover .wod-play{box-shadow:0 6px 14px -6px var(--cta-2)} .wod-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px} .wtag{font-style:normal;font-size:.63rem;font-weight:700;letter-spacing:.02em;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-2);border:1px solid var(--line-2)} .wtag.g-der{background:#dbeafe;color:#1e40af;border-color:#bfdbfe} .wtag.g-die{background:#fce7f3;color:#9d174d;border-color:#fbcfe8} .wtag.g-das{background:#dcfce7;color:#166534;border-color:#bbf7d0} .wtag.lv{background:var(--gold-soft);color:var(--gold-ink);border-color:var(--cta-2)} .wtag.src{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} html[data-theme="dark"] .wtag.g-der,html[data-theme="midnight"] .wtag.g-der{background:#1e3a8a33;color:#93c5fd;border-color:#1e40af} html[data-theme="dark"] .wtag.g-die,html[data-theme="midnight"] .wtag.g-die{background:#83184833;color:#f9a8d4;border-color:#9d174d} html[data-theme="dark"] .wtag.g-das,html[data-theme="midnight"] .wtag.g-das{background:#14532d33;color:#86efac;border-color:#166534} .wod.full .panel-h h3::after{content:" \2713";color:var(--green)} html.fx .wod.full .wod-track i{animation:fxBarPulse 1.6s ease-in-out infinite} @keyframes fxBarPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}} /* ---------- course finder ---------- */ .uni-course select{max-width:100%} .course-note{margin:-6px 0 18px} .course-group{margin-top:26px} .course-group-h{align-items:center;gap:10px;margin-bottom:12px} .course-group-h h2{font-size:1.16rem;margin:0} .course-emo{font-size:1.3rem;line-height:1} .course-grid{gap:12px} .course-card{display:grid;gap:4px;text-decoration:none;padding:14px;border-radius:14px;transition:transform .2s,border-color .2s,box-shadow .2s} .course-card h3{font-size:1.02rem;margin:0;color:var(--ink)} .course-card:hover{transform:translateY(-3px);border-color:var(--cta-2);box-shadow:var(--shadow-1)} .course-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px} .course-tags .wtag.se{background:var(--gold-soft);color:var(--gold-ink);border-color:var(--cta-2)} .course-tags .wtag.nc{background:#fee2e2;color:#991b1b;border-color:#fecaca} .course-tags .wtag.port{background:#ede9fe;color:#5b21b6;border-color:#ddd6fe} html[data-theme="dark"] .course-tags .wtag.nc,html[data-theme="midnight"] .course-tags .wtag.nc{background:#7f1d1d33;color:#fca5a5;border-color:#991b1b} html[data-theme="dark"] .course-tags .wtag.port,html[data-theme="midnight"] .course-tags .wtag.port{background:#4c1d9533;color:#c4b5fd;border-color:#5b21b6} .course-go{font-size:.76rem;color:var(--text-3);margin-top:8px;display:inline-flex;align-items:center;gap:4px} .course-card:hover .course-go{color:var(--blue-ink)} html.fx .course-card{animation:fxWordIn .45s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 26ms)} /* ---------- Find Your University hub ---------- */ .hub-grid{gap:14px} .hub-card{display:grid;gap:6px;text-decoration:none;padding:20px;border-radius:18px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s} .hub-card h3{margin:2px 0 0;font-size:1.08rem;color:var(--ink)} .hub-ico{font-size:1.9rem;line-height:1} .hub-go{margin-top:auto;padding-top:10px;font-size:.84rem;font-weight:700;color:var(--blue-ink);display:inline-flex;align-items:center;gap:5px} .hub-card:hover{transform:translateY(-4px);border-color:var(--cta-2);box-shadow:var(--shadow-2)} .hub-card.hub-best{background:linear-gradient(170deg,var(--gold-soft),var(--surface) 65%);border-color:var(--cta-2)} .hub-card::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-120%)} html.fx .hub-card:hover::after{animation:fxCardShine .8s ease} html.fx .hub-card{animation:fxWordIn .5s cubic-bezier(.2,.9,.3,1.1) both} html.fx .hub-grid .hub-card:nth-child(2){animation-delay:.07s} html.fx .hub-grid .hub-card:nth-child(3){animation-delay:.14s} /* ---------- everyday German words and phrases ---------- */ .dw-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 18px;border-radius:18px;background:linear-gradient(120deg,var(--gold-soft),var(--surface) 70%);border:1px solid var(--line-2)} .dw-top-t{flex:1;min-width:240px;display:grid;gap:2px} .dw-top-t b{font-family:var(--display);font-size:1.1rem;color:var(--ink)} .dw-ring{--p:0;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; background:conic-gradient(var(--cta-2) calc(var(--p) * 1%), var(--line) 0);transition:--p .8s ease} .dw-ring-in{width:68px;height:68px;border-radius:50%;background:var(--surface);display:grid;place-items:center;line-height:1.1} .dw-ring-in b{font-family:var(--display);font-size:1.3rem;color:var(--ink)} .dw-ring-in span{font-size:.68rem;color:var(--text-2)} html.fx .dw-ring{animation:fxRingIn .9s cubic-bezier(.2,.9,.3,1.1) both} @keyframes fxRingIn{from{transform:scale(.7) rotate(-90deg);opacity:0}to{transform:none;opacity:1}} .dw-sets{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .dw-sets .chip{transition:transform .2s,background .2s,border-color .2s} .dw-sets .chip:hover{transform:translateY(-2px)} .dw-sets .chip b{font-weight:800;opacity:.6;margin-left:4px;font-size:.72rem} .dw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:16px} .dw-card{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);cursor:pointer; transition:transform .2s,border-color .2s,box-shadow .2s;position:relative;overflow:hidden} .dw-card:hover{transform:translateY(-3px);border-color:var(--cta-2);box-shadow:var(--shadow-1)} .dw-main{flex:1;min-width:0;display:grid;gap:1px} .dw-main b{font-family:var(--display);font-size:1rem;color:var(--ink);line-height:1.25;word-break:break-word} .dw-m{font-size:.82rem;color:var(--text-2);transition:opacity .25s,filter .25s} .dw-card.hide .dw-m{opacity:0;filter:blur(5px)} .dw-card.hide.open .dw-m{opacity:1;filter:none} .dw-card .wtag{justify-self:start;margin-top:3px} .dw-acts{display:flex;gap:5px;flex:0 0 auto} .dw-say,.dw-ok{width:28px;height:28px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s,color .2s} .dw-say{background:linear-gradient(135deg,var(--flame),var(--cta-2));color:#fff} .dw-ok{background:var(--surface-2);color:var(--text-3);border:1px solid var(--line)} .dw-say:hover,.dw-ok:hover{transform:scale(1.12)} .dw-say.spin{animation:fxPulseRing .6s ease} .dw-card.known{border-color:var(--green);background:linear-gradient(90deg,var(--green-soft),var(--surface) 60%)} .dw-card.known .dw-ok{background:var(--green);color:#fff;border-color:var(--green)} html.fx .dw-card{animation:fxWordIn .4s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 14ms)} html.fx .dw-card.known{animation:fxKnown .45s cubic-bezier(.2,.9,.3,1.3)} .ph-panel .panel-h{gap:8px} .ph-list{display:grid;gap:8px} .ph-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);transition:transform .2s,border-color .2s} .ph-item:hover{transform:translateX(3px);border-color:var(--cta-2)} .ph-de{flex:1;min-width:0;display:grid;gap:2px} .ph-de b{font-family:var(--display);font-size:1rem;color:var(--ink);line-height:1.3} .ph-de span{font-size:.84rem;color:var(--text-2)} html.fx .ph-item{animation:fxWordIn .42s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 22ms)} @media (max-width:520px){ .dw-grid{grid-template-columns:1fr} .dw-ring{width:72px;height:72px} .dw-ring-in{width:56px;height:56px} } .gw-bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:10px 0 2px} .gw-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cta-2),var(--flame));border-radius:99px;transition:width .8s cubic-bezier(.2,.9,.3,1.1)} /* ---------- round 7: progress bar, page fade, heading underline ---------- */ #fxProg{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;opacity:0;transition:opacity .3s} #fxProg.on{opacity:1} #fxProg i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cta-2),var(--flame),var(--blue-500));box-shadow:0 0 10px -2px var(--cta-2)} html:not(.fx) #fxProg{display:none} html.fx #main.page-in{animation:fxPageIn .38s cubic-bezier(.2,.9,.3,1.05) both} @keyframes fxPageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} html.fx #main h2[data-hl]{position:relative} html.fx #main h2[data-hl]::after{content:"";position:absolute;left:0;bottom:-5px;height:3px;width:0;border-radius:3px;background:linear-gradient(90deg,var(--cta-2),var(--flame));transition:width .7s cubic-bezier(.2,.9,.3,1.05)} html.fx #main h2.hl-on::after{width:52px} html.fx .dw-card.hide .dw-main{transform-style:preserve-3d} html.fx .dw-card.hide .dw-m{transform:rotateX(-70deg);transform-origin:top center;transition:transform .35s cubic-bezier(.2,.9,.3,1.2),opacity .3s,filter .3s} html.fx .dw-card.hide.open .dw-m{transform:none} html.fx .chip.on{animation:fxChipPop .35s cubic-bezier(.2,.9,.3,1.3)} @keyframes fxChipPop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:none}} html.fx .dw-ring::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--cta-2);opacity:0} html.fx .dw-top:hover .dw-ring::after{animation:fxPulseRing 1.4s ease-out} .dw-ring{position:relative} @media print{ #fxProg{display:none} } /* ---------- Blaze, the study companion ---------- */ .mascot{display:block;overflow:visible} .m-shadow{fill:rgba(15,42,74,.12)} .m-head{fill:var(--navy-700)} .m-face{fill:color-mix(in srgb,var(--navy-700) 82%,#fff)} .m-crest{fill:var(--cta-2)} .m-eye{fill:#fff} .m-gl{fill:var(--navy-900)} .m-arc{fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round} .m-brow{stroke:#fff;stroke-width:2.6;stroke-linecap:round;opacity:.85} .m-beak{fill:var(--cta-2)} .m-mouth{fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round} .m-mouth.open{fill:var(--flame);stroke:none} .m-scarf{fill:var(--flame)} .m-wing{fill:var(--navy-900);opacity:.85} .m-flame path{fill:var(--flame)} .m-star path{fill:var(--cta-2)} .m-tick path{stroke:var(--green)} .m-bulb circle,.m-bulb rect{fill:var(--cta-2)} .m-bell path,.m-bell rect{fill:var(--cta-2)} .m-zt{fill:var(--text-3);font-size:14px;font-weight:800} .m-zt.small{font-size:10px} html[data-theme="dark"] .m-face,html[data-theme="midnight"] .m-face{fill:color-mix(in srgb,var(--navy-700) 62%,#fff)} html[data-theme="dark"] .m-shadow,html[data-theme="midnight"] .m-shadow{fill:rgba(0,0,0,.35)} html.fx .mascot .m-body{transform-origin:55px 90px;animation:mBreathe 4.2s ease-in-out infinite} @keyframes mBreathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2.5px) rotate(-1deg)}} html.fx .m-correct .m-body,html.fx .m-cheer .m-body{animation:mHop .6s cubic-bezier(.2,.9,.3,1.4)} @keyframes mHop{0%{transform:translateY(0)}35%{transform:translateY(-10px) rotate(-3deg)}70%{transform:translateY(2px)}100%{transform:none}} html.fx .m-wrong .m-body{animation:mShake .5s ease} @keyframes mShake{0%,100%{transform:none}20%{transform:translateX(-4px) rotate(-2deg)}60%{transform:translateX(4px) rotate(2deg)}} html.fx .m-prop{transform-origin:88px 30px;animation:mProp 2.4s ease-in-out infinite} @keyframes mProp{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.06)}} html.fx .m-milestone .m-star{animation:mSpin 3.4s linear infinite} @keyframes mSpin{to{transform:rotate(360deg)}} html.fx .m-sleep .m-body{animation:mBreathe 6s ease-in-out infinite} .m-says{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .m-holder{flex:0 0 auto} .m-bubble{position:relative;flex:1;min-width:180px;padding:12px 16px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line-2);font-size:.95rem;color:var(--text)} .m-bubble::before{content:"";position:absolute;left:-7px;top:50%;width:14px;height:14px;transform:translateY(-50%) rotate(45deg);background:var(--surface-2);border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} html.fx .m-bubble{animation:fxWordIn .45s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:.12s} .empty.m-empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:26px 16px} .empty.m-empty .mascot{margin-bottom:2px} @media (prefers-reduced-motion:reduce){ .mascot *{animation:none !important} } /* ---------- progress, levels and streak calendar ---------- */ .gm-hero-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .gm-hero-t{flex:1;min-width:220px} .gm-hero-t b{font-family:var(--display);font-size:1.05rem;color:var(--ink);display:block} .gm-lv{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:10px} .gm-lv i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cta-2),var(--flame));transition:width 1s cubic-bezier(.2,.9,.3,1.1)} html.fx .gm-lv i{animation:gmFill 1.1s cubic-bezier(.2,.9,.3,1.05) both} @keyframes gmFill{from{width:0 !important}} .gm-dash{margin-bottom:18px;background:linear-gradient(120deg,var(--gold-soft),var(--surface) 65%)} .gm-dash-a{display:grid;gap:6px;flex:0 0 auto} .gm-cal{display:grid;grid-template-columns:repeat(14,1fr);gap:5px} .gm-cal i{aspect-ratio:1;border-radius:5px;background:var(--line);display:block} .gm-cal i.on{background:var(--green)} .gm-cal i.fix{background:var(--cta-2)} .gm-cal i.today{outline:2px solid var(--blue-500);outline-offset:1px} html.fx .gm-cal i{animation:fxWordIn .4s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 16ms)} .gm-weeks{display:flex;align-items:flex-end;gap:8px;height:120px} .gm-week{flex:1;display:grid;justify-items:center;gap:4px;height:100%;grid-template-rows:1fr auto} .gm-week i{display:block;width:100%;max-width:34px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--cta-2),var(--flame));align-self:end} .gm-week span{font-size:.68rem;color:var(--text-3)} html.fx .gm-week i{animation:gmBar .7s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 60ms)} @keyframes gmBar{from{height:2% !important;opacity:.3}} .gm-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px} .gm-step{padding:14px;border-radius:14px;border:1px solid var(--line-2);background:var(--surface);opacity:.6;transition:transform .2s,opacity .3s} .gm-step.on{opacity:1;border-color:var(--cta-2);background:linear-gradient(180deg,var(--gold-soft),var(--surface))} .gm-step:hover{transform:translateY(-3px)} .gm-step b{font-family:var(--display);display:block;color:var(--ink)} @media (max-width:560px){ .gm-cal{grid-template-columns:repeat(7,1fr)} .gm-weeks{height:96px} } /* ---------- facts that age in the open ---------- */ .verify.verify .fact-age,.fact-age{display:block;width:100%;font-size:.8rem;margin-top:4px} .fact-age.verify{color:var(--gold-ink)} .fact-age.old{color:var(--red)} .verify.old .badge,.verify.verify .badge{border-color:currentColor} .fig{display:inline-flex;flex-direction:column;line-height:1.15;font-weight:700;color:var(--ink)} .fig em{font-style:normal;font-size:.68rem;font-weight:600;color:var(--text-3)} .fig.verify em{color:var(--gold-ink)} .fig.old em{color:var(--red)} /* ---------- home: every feature one tap away ---------- */ .hf-sec{padding-top:34px} .hf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px} .hf-tile{display:grid;gap:3px;align-content:start;padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line-2);text-decoration:none;position:relative;overflow:hidden; transition:transform .22s cubic-bezier(.2,.9,.3,1.1),border-color .22s,box-shadow .22s} .hf-tile b{font-family:var(--display);font-size:1.02rem;color:var(--ink);margin-top:4px} .hf-sub{font-size:.82rem;color:var(--text-2);line-height:1.35} .hf-ico{font-size:1.6rem;line-height:1} .hf-go{margin-top:8px;font-size:.76rem;font-weight:700;color:var(--blue-ink);display:inline-flex;align-items:center;gap:4px;opacity:.75;transition:opacity .2s,gap .2s} .hf-tile:hover{transform:translateY(-4px);border-color:var(--cta-2);box-shadow:var(--shadow-2)} .hf-tile:hover .hf-go{opacity:1;gap:7px} .hf-tile.gold{background:linear-gradient(170deg,var(--gold-soft),var(--surface) 70%);border-color:var(--cta-2)} .hf-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-120%)} html.fx .hf-tile:hover::after{animation:fxCardShine .75s ease} html.fx .hf-tile{animation:fxWordIn .5s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 40ms)} @media (max-width:560px){ .hf-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .hf-tile{padding:13px} .hf-tile b{font-size:.94rem} .hf-sub{font-size:.76rem} } /* file inputs have an intrinsic minimum width and pushed the document vault past the viewport on narrow phones - make them shrink like every other field */ input[type="file"]{max-width:100%;width:100%;min-width:0;box-sizing:border-box;font-size:.88rem} input[type="file"]::file-selector-button{margin-right:8px;padding:6px 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer} .field{min-width:0} @media (max-width:420px){ input[type="file"]{font-size:.8rem} } /* ---------- eligibility self-check and safety ---------- */ .elig-grid{display:grid;gap:12px} .elig-q{transition:border-color .25s,transform .2s} .elig-q.done{border-color:var(--green)} .elig-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--text-2);font-size:.76rem;font-weight:800;flex:0 0 auto} .elig-q.done .elig-n{background:var(--green);color:#fff} html.fx .elig-q{animation:fxWordIn .45s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 55ms)} .elig-f{border-left:4px solid var(--line-2)} .elig-f.ok{border-left-color:var(--green)} .elig-f.check{border-left-color:var(--cta-2)} .elig-f.do{border-left-color:var(--blue-500)} .elig-f.stop{border-left-color:var(--red)} html.fx .elig-f{animation:fxWordIn .5s cubic-bezier(.2,.9,.3,1.1) both} .sf-h{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin:14px 0 6px} .sf-list{margin:0;padding-left:20px;display:grid;gap:6px} .sf-list li{font-size:.92rem} .sf-list.bad li::marker{color:var(--red)} .sf-list.ok li::marker{color:var(--green)} html.fx .sf-card{animation:fxWordIn .5s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 60ms)} /* ---------- install prompt ---------- */ #pwaBar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:58; display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 24px));padding:12px 16px;border-radius:18px; background:var(--surface);border:1px solid var(--cta-2);box-shadow:var(--shadow-2)} #pwaBar .pwa-t{flex:1;min-width:0;display:grid;gap:2px} #pwaBar b{font-family:var(--display);font-size:.98rem;color:var(--ink)} #pwaBar span{font-size:.82rem;color:var(--text-2)} #pwaBar .pwa-a{display:flex;gap:6px;flex:0 0 auto} #pwaBar .pwa-i{flex:0 0 auto} html.fx #pwaBar{animation:pwaIn .5s cubic-bezier(.2,.9,.3,1.15) both} @keyframes pwaIn{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}} @media (max-width:560px){ #pwaBar{bottom:calc(74px + env(safe-area-inset-bottom,0px));flex-wrap:wrap} #pwaBar .pwa-a{width:100%;justify-content:flex-end} } @media print{ #pwaBar{display:none} } /* ---------- routes: Bachelor's, Master's, Ausbildung ---------- */ .pt-hub{gap:14px} .pt-card{display:grid;gap:6px;align-content:start;text-decoration:none;padding:20px;border-radius:18px;border-top:4px solid var(--line-2);transition:transform .22s,box-shadow .22s} .pt-card.blue{border-top-color:var(--blue-500)} .pt-card.gold{border-top-color:var(--cta-2)} .pt-card.green{border-top-color:var(--green)} .pt-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .pt-card h3{margin:2px 0 0;color:var(--ink);font-size:1.12rem} .pt-emo{font-size:2rem;line-height:1} .pt-facts{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px} .pt-facts li{display:grid;gap:1px;font-size:.84rem} .pt-facts b{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)} html.fx .pt-card{animation:fxWordIn .5s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 70ms)} .pt-steps{list-style:none;padding:0;margin:0;display:grid;gap:14px;position:relative} .pt-steps li{display:flex;gap:12px;position:relative} .pt-steps li:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:-14px;width:2px;background:var(--line)} .pt-n{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--blue-500),var(--cta-2))} html.fx .pt-steps li{animation:fxWordIn .45s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 70ms)} .pt-list{display:grid;gap:6px} .pt-check{display:flex;align-items:flex-start;gap:10px;text-align:left;width:100%;padding:9px 10px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font:inherit;color:var(--text);transition:border-color .2s,background .2s} .pt-check span:last-child{font-size:.88rem} .pt-check.done{border-color:var(--green);background:linear-gradient(90deg,var(--green-soft),var(--surface) 70%)} .pt-check.done .wod-check{background:var(--green);border-color:var(--green);color:#fff} .pt-link{display:grid;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);text-decoration:none;transition:border-color .2s,transform .2s} .pt-link:hover{border-color:var(--cta-2);transform:translateX(3px)} .pt-link b{color:var(--ink)} @media (max-width:860px){ #ptGrid{grid-template-columns:1fr !important} } .ab-grid{gap:12px} .ab-card{display:grid;align-content:start;gap:4px} .ab-card h3{font-size:1rem;margin:6px 0 0;color:var(--ink);line-height:1.3} html.fx .ab-card{animation:fxWordIn .45s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 30ms)} /* ---------- hero: the owl gets its own side of the screen ---------- */ .vhero video.hero-owl{background:#05070d} @media (min-width:901px){ /* text on the left, the owl on the right, fading into the navy background */ .vhero video.hero-owl{left:auto;right:0;width:62%;object-position:50% 55%; -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%);mask-image:linear-gradient(90deg,transparent 0%,#000 26%)} .vhero:has(video.hero-owl) .scrim{background:linear-gradient(90deg,rgba(7,17,31,.96) 0%,rgba(9,22,42,.88) 38%,rgba(9,22,42,.25) 62%,rgba(9,22,42,.08) 100%)} } @media (max-width:900px){ /* on phones the owl sits behind the text, dimmed so every word stays readable */ .vhero video.hero-owl{object-position:50% 40%;opacity:.55} } /* ---------- journey map ---------- */ .jm-wrap{position:relative} .jm-head{align-items:center;gap:10px;margin-bottom:6px} .jm-head b{font-family:var(--display);font-size:1.08rem;color:var(--ink)} .jm-canvas{width:100%} .jm-svg{display:block;width:100%;height:auto;overflow:visible} .jm-road{fill:none;stroke:var(--line);stroke-width:26;stroke-linecap:round;stroke-linejoin:round;opacity:.55} .jm-lane{fill:none;stroke:var(--surface);stroke-width:3;stroke-dasharray:14 14;stroke-linecap:round;opacity:.9} .jm-prog{fill:none;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0} .jm-spark{fill:#fff;filter:drop-shadow(0 0 6px var(--cta-2))} .jm-dot{fill:var(--surface);stroke:var(--line-2);stroke-width:3;transition:transform .25s} .jm-emo{font-size:26px} .jm-badge circle{fill:var(--surface-2);stroke:var(--line-2);stroke-width:2} .jm-badge text{font-size:13px;font-weight:800;fill:var(--text-2)} .jm-label{font-size:18px;font-weight:700;fill:var(--text);font-family:var(--display)} .jm-node{cursor:pointer;text-decoration:none} .jm-node:hover .jm-dot,.jm-node:focus-visible .jm-dot{stroke:var(--cta-2);stroke-width:4} .jm-node:hover .jm-label{fill:var(--ink)} .jm-node.done .jm-dot{fill:var(--green-soft);stroke:var(--green)} .jm-node.done .jm-badge circle{fill:var(--green);stroke:var(--green)} .jm-node.done .jm-badge text{fill:#fff} .jm-node.current .jm-dot{fill:var(--gold-soft);stroke:var(--cta-2);stroke-width:4} .jm-node.current .jm-badge circle{fill:var(--cta-2);stroke:var(--cta-2)} .jm-node.current .jm-badge text{fill:#fff} .jm-node.current .jm-label{fill:var(--ink)} .jm-pulse{fill:none;stroke:var(--cta-2);stroke-width:3;opacity:.6} .jm-flag rect{fill:var(--cta-2)} .jm-flag text{font-size:13px;font-weight:800;fill:#fff;letter-spacing:.02em} /* motion: only after the map scrolls into view, and only when animations are on */ html.fx .jm-wrap .jm-road,html.fx .jm-wrap .jm-lane{opacity:0} html.fx .jm-wrap.jm-in .jm-road{animation:jmFade .6s ease forwards} html.fx .jm-wrap.jm-in .jm-lane{animation:jmFade .6s ease .2s forwards} html.fx .jm-wrap .jm-prog{stroke-dashoffset:1} html.fx .jm-wrap.jm-in .jm-prog{animation:jmDraw 1.6s cubic-bezier(.6,.05,.3,1) .35s forwards} html.fx .jm-wrap .jm-node{opacity:0} html.fx .jm-wrap.jm-in .jm-node{animation:jmPop .55s cubic-bezier(.2,.9,.3,1.35) forwards;animation-delay:calc(.25s + var(--i,0) * 90ms)} html.fx .jm-wrap .jm-spark{opacity:0} html.fx .jm-wrap.jm-in .jm-spark{animation:jmFade .4s ease 2s forwards} html.fx .jm-pulse{transform-box:fill-box;transform-origin:center;animation:jmPulse 1.8s ease-out infinite} html.fx .jm-flag{animation:jmBob 2.4s ease-in-out infinite} @keyframes jmDraw{to{stroke-dashoffset:0}} @keyframes jmFade{to{opacity:.55}} @keyframes jmPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}} @keyframes jmPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}} @keyframes jmBob{0%,100%{transform:translate(0,-58px)}50%{transform:translate(0,-64px)}} html.fx .jm-wrap.jm-in .jm-lane{animation-name:jmFadeLane} @keyframes jmFadeLane{to{opacity:.9}} .jm-node{transform-box:fill-box;transform-origin:center} @media (prefers-reduced-motion:reduce){ .jm-wrap *{animation:none !important;opacity:1 !important;stroke-dashoffset:0 !important} } @media (max-width:620px){ .jm-label{font-size:21px} .jm-emo{font-size:30px} } /* ---------- shortlist and compare ---------- */ .sl-btns{display:inline-flex;gap:6px;flex-wrap:wrap} .sl-btn{font:inherit;font-size:.78rem;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);cursor:pointer;transition:all .2s} .sl-btn:hover{border-color:var(--cta-2);color:var(--ink)} .sl-btn.on{background:var(--gold-soft);border-color:var(--cta-2);color:var(--gold-ink)} #slFloat{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:57;display:flex;gap:6px;padding:6px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow-2)} #slFloat a{font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--ink);background:var(--surface-2)} #slFloat a:hover{background:var(--gold-soft)} html.fx #slFloat:not([hidden]){animation:pwaIn .45s cubic-bezier(.2,.9,.3,1.15) both} @media (max-width:560px){ #slFloat{bottom:calc(78px + env(safe-area-inset-bottom,0px));left:10px} #slFloat a{padding:5px 10px;font-size:.74rem} } .sl-col.dream .panel-h{border-top:3px solid var(--flame)} .sl-col.target .panel-h{border-top:3px solid var(--cta-2)} .sl-col.safe .panel-h{border-top:3px solid var(--green)} .sl-item{display:grid;gap:4px;margin-bottom:10px;padding:12px} .sl-name{font-weight:800;color:var(--ink);text-decoration:none} .sl-note{width:100%;min-height:54px;margin-top:6px;font:inherit;font-size:.82rem;padding:8px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--text);resize:vertical;box-sizing:border-box} html.fx .sl-item{animation:fxWordIn .4s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 50ms)} .sl-cmp td,.sl-cmp th{vertical-align:top;min-width:170px} .sl-cmp th a{color:var(--ink)} @media print{ #slFloat{display:none} } .perf-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;font:inherit;font-weight:800;font-size:.9rem;padding:10px 18px;border-radius:999px;border:0;background:rgba(9,22,42,.82);color:#fff;cursor:pointer;box-shadow:var(--shadow-2)} /* ---------- swipe cards ---------- */ .sw-stack{position:relative;height:360px;margin:0 auto;max-width:440px;perspective:1200px} .sw-card{position:absolute;inset:0;touch-action:pan-y;user-select:none;cursor:grab;transition:transform .28s cubic-bezier(.2,.9,.3,1.1),opacity .28s; transform:translateY(calc(var(--d,0) * 12px)) scale(calc(1 - var(--d,0) * .045));z-index:calc(10 - var(--d,0))} .sw-card.behind{pointer-events:none;opacity:calc(1 - var(--d,0) * .25)} .sw-card:active{cursor:grabbing} .sw-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.9,.3,1.1)} .sw-card.flipped .sw-inner{transform:rotateY(180deg)} .sw-face{position:absolute;inset:0;display:grid;place-content:center;gap:12px;text-align:center;padding:26px;border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden; background:linear-gradient(160deg,var(--surface),var(--surface-2));border:1px solid var(--line-2);box-shadow:var(--shadow-2)} .sw-front b{font-family:var(--display);font-size:clamp(1.6rem,6vw,2.3rem);color:var(--ink);line-height:1.15} .sw-back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--gold-soft),var(--surface))} .sw-back b{font-size:1.25rem;color:var(--ink);line-height:1.35} .sw-tag{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)} .sw-hint{font-size:.78rem;color:var(--text-3)} .sw-stamp{position:absolute;top:24px;padding:6px 14px;border-radius:10px;font-weight:900;letter-spacing:.08em;border:3px solid;opacity:0;transition:opacity .15s;z-index:3} .sw-stamp.yes{left:22px;color:var(--green);border-color:var(--green);transform:rotate(-12deg)} .sw-stamp.no{right:22px;color:var(--red);border-color:var(--red);transform:rotate(12deg)} .sw-card.lean-right .sw-stamp.yes,.sw-card.lean-left .sw-stamp.no{opacity:1} .sw-card.fly-right{transform:translateX(130%) rotate(24deg) !important;opacity:0} .sw-card.fly-left{transform:translateX(-130%) rotate(-24deg) !important;opacity:0} .sw-actions{display:flex;justify-content:center;gap:16px;margin-top:22px} .sw-btn{width:58px;height:58px;border-radius:50%;border:0;display:grid;place-items:center;font-size:1.4rem;font-weight:900;cursor:pointer;box-shadow:var(--shadow-1);transition:transform .15s} .sw-btn:hover{transform:scale(1.08)} .sw-btn:active{transform:scale(.94)} .sw-btn.no{background:#fee2e2;color:#b91c1c} .sw-btn.yes{background:#dcfce7;color:#15803d} .sw-btn.say{background:linear-gradient(135deg,var(--flame),var(--cta-2));color:#fff;width:48px;height:48px;align-self:center} .sw-btn.flip{background:var(--surface-2);color:var(--text);width:48px;height:48px;align-self:center} .sw-done{display:grid;justify-items:center;gap:8px;text-align:center;padding:30px 10px} .sw-done h3{margin:6px 0 0;color:var(--ink)} @media (max-width:420px){ .sw-stack{height:320px} } /* ---------- exam countdown ---------- */ .cd-panel{margin-bottom:18px} .cd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .cd-item{display:grid;justify-items:center;gap:2px;padding:12px;border-radius:16px;border:1px solid var(--line-2);text-decoration:none;text-align:center;transition:transform .2s,border-color .2s} .cd-item:hover{transform:translateY(-3px);border-color:var(--cta-2)} .cd-item b{color:var(--ink);font-family:var(--display)} .cd-ring{width:76px;height:76px} .cd-ring .bg{fill:none;stroke:var(--line);stroke-width:7} .cd-ring .fg{fill:none;stroke-width:7;stroke-linecap:round;transform:rotate(-90deg);transform-origin:38px 38px;transition:stroke-dashoffset 1s cubic-bezier(.2,.9,.3,1.1)} .cd-ring .v{font-size:19px;font-weight:800;fill:var(--ink);font-family:var(--display)} .cd-ring .l{font-size:9px;fill:var(--text-3);font-weight:700} html.fx .cd-item{animation:fxWordIn .45s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i,0) * 70ms)} #slFloat[hidden],#pwaBar[hidden]{display:none !important} /* "hidden" must always hide, whatever display a component sets */ [hidden]:not([hidden="until-found"]){display:none !important} /* ---------- passes, money note, founder, donate ---------- */ .pass-card{border-top:3px solid var(--blue-500)} .money-note{background:linear-gradient(120deg,var(--green-soft),var(--surface) 70%)} .founder-row{display:flex;align-items:center;gap:14px} .founder-av{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.2rem;color:#fff;flex:0 0 auto; background:linear-gradient(135deg,var(--navy-700),var(--blue-500));box-shadow:0 0 0 3px var(--gold-soft)} .founder{border-left:4px solid var(--cta-2)} .donate-btn{background:linear-gradient(135deg,#e11d48,#f97316);color:#fff;border:0} .donate-btn:hover{filter:brightness(1.06)} .support-modal{text-align:center} html.fx .founder{animation:fxWordIn .5s cubic-bezier(.2,.9,.3,1.1) both} /* ---------- sign-in: password field, strength meter, code input ---------- */ .pw-wrap{position:relative;display:block} .pw-wrap input{padding-right:64px;width:100%} .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--text-2);font:600 .78rem var(--sans);padding:6px 8px;border-radius:var(--r-sm);cursor:pointer} .pw-eye:hover,.pw-eye:focus-visible{background:var(--surface-2);color:var(--text)} .pw-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px} .pw-meter i{height:4px;border-radius:2px;background:var(--line)} .pw-meter .pw-txt{grid-column:1/-1} .pw-meter[data-s="1"] i:nth-child(-n+1){background:var(--red)} .pw-meter[data-s="2"] i:nth-child(-n+2){background:var(--amber)} .pw-meter[data-s="3"] i:nth-child(-n+3){background:var(--green)} .pw-meter[data-s="4"] i:nth-child(-n+4){background:var(--green)} .otp-in{font:600 1.4rem var(--mono);letter-spacing:.35em;text-align:center} .code-grant{display:block;margin:4px 0 8px;color:var(--green-ink)}