:root { --font-ui:"Exo 2",sans-serif; --font-display:"Rubik",sans-serif; --text:#0e3c70; --muted:#255b85; --border:#4a91d5; --label:#258ccb; --card-border:#4a94d9; --card-bg:linear-gradient(#ffffffed,#d9ecffcc); --benefit-border:rgba(94,159,224,.82); --benefit-bg:linear-gradient(#ffffffe6,#d9edffb8); --bar:linear-gradient(#cbe6a5,#91b95c 50%,#6b963d); --bar-text:#274713; --hill:radial-gradient(100% 85% at 48% 112%,#75bb55 0 40%,transparent 40.2%),radial-gradient(85% 65% at 73% 116%,#cce9af 0 43%,transparent 43.2%); }
body[data-theme="web2-glossy"] { --font-ui:"Barlow",sans-serif; --font-display:"Archivo Black",sans-serif; --text:#174776; --muted:#416383; --border:#8cc3ec; --label:#4599d7; --card-border:#8fc8f1; --card-bg:linear-gradient(#ffffffe0,#d8eeff9e); --benefit-border:rgba(156,206,240,.82); --benefit-bg:linear-gradient(#ffffffe6,#ddefffb8); --bar:linear-gradient(#ddf2ff,#80b9e8 50%,#4b95d0); --bar-text:#fff; --hill:radial-gradient(100% 70% at 45% 117%,#84c8e9 0 41%,transparent 41.2%),radial-gradient(85% 65% at 84% 106%,#e2f4ff 0 40%,transparent 40.2%); }
* { box-sizing:border-box; } body { min-width:320px; min-height:100vh; margin:0; background:radial-gradient(115% 66% at 50% 118%,#e2f1cf 0%,#c4e3c5 46%,rgba(183,221,201,.55) 61%,transparent 73%),linear-gradient(180deg,#fff 0%,#eaf6ff 16%,#98c9ed 46%,#b9dfc9 66%,#d8ecc4 82%,#e6f2d8 100%); color:var(--text); font-family:var(--font-ui); } body[data-theme="web2-glossy"] { background:linear-gradient(180deg,#f8fcff 0%,#d9ecfc 43%,#b9dcf5 100%); } .page-shell { position:relative; width:min(1200px,100%); aspect-ratio:1200/820; min-height:560px; margin:0 auto; overflow:hidden; } .page-shell::after { content:""; position:absolute; z-index:-1; top:79.3%; left:-11.7%; width:125%; height:39%; background:var(--hill); } body[data-theme="web2-glossy"] .page-shell::after { top:61%; transform:rotate(-6deg); }
.theme-nav { position:absolute; top:2.9%; right:3.33%; display:flex; align-items:center; gap:9px; font-size:13px; } .theme-nav button { padding:0; border:0; background:transparent; color:var(--muted); font:600 13px var(--font-ui); cursor:pointer; } .theme-nav button.is-active { text-decoration:underline; text-underline-offset:2px; } .theme-nav span { color:#7892aa; } .landing-header { position:absolute; top:6.1%; left:3.33%; display:flex; align-items:center; justify-content:space-between; width:93.33%; height:7.07%; padding:0 clamp(16px,1.92vw,23px); border:1px solid var(--border); border-radius:10px 10px 0 0; background:#fff; box-shadow:0 3px 7px rgba(47,120,189,.1),inset 0 1px 2px rgba(255,255,255,.92); } .landing-header a { color:var(--muted); font:600 14px var(--font-ui); } .landing-header .logo { color:var(--text); text-decoration:none; font:700 17px var(--font-display); } .signature { position:absolute; top:13.17%; left:3.33%; width:93.33%; height:3.66%; overflow:hidden; border:1px solid var(--border); border-radius:0 0 10px 10px; background:var(--bar); color:var(--bar-text); font-size:clamp(9px,1vw,12px); font-weight:600; letter-spacing:.08em; white-space:nowrap; } .signature-track { display:flex; width:max-content; height:100%; align-items:center; animation:signature-marquee 30s linear infinite; } .signature-track span { padding-left:clamp(16px,2.08vw,25px); padding-right:clamp(780px,72vw,900px); } @keyframes signature-marquee { to { transform:translateX(-50%); } }
.hero-copy { position:absolute; top:23.17%; left:4.67%; width:50.83%; } h1,h2,p { margin:0; } h1,h2 { font-family:var(--font-display); } h1 { font-size:clamp(32px,3.75vw,45px); line-height:1.44; letter-spacing:-.035em; text-shadow:0 1px 1.4px rgba(51,104,145,.24); } .hero-copy p { width:92%; margin:clamp(30px,6.42vw,77px) 0 0 4px; color:var(--muted); font-size:clamp(14px,1.5vw,18px); line-height:1.45; text-shadow:0 1px 1px rgba(51,104,145,.18); } .feature-card { position:absolute; top:25.61%; left:58.33%; width:34.17%; height:45.12%; padding:clamp(18px,2.67vw,32px) clamp(20px,2.42vw,29px); border:1px solid var(--card-border); border-radius:12px; background:var(--card-bg); box-shadow:0 8px 16px rgba(39,111,175,.18),inset 0 1px 2px rgba(255,255,255,.84); } .card-kicker { color:var(--label); font-size:clamp(10px,1.08vw,13px); font-weight:600; } .feature-xp { margin-top:clamp(12px,1.75vw,21px); color:#174776; font-size:clamp(12px,1.33vw,16px); line-height:1.28; } body[data-theme="web2-glossy"] .feature-card { top:24.39%; height:42.68%; border-radius:20px; padding-top:clamp(18px,2.58vw,31px); } body[data-theme="web2-glossy"] .feature-xp { color:#22537e; }
.explore { position:absolute; top:76.83%; left:5%; color:#1e6aaa; font-size:clamp(10px,1vw,12px); font-weight:600; } body[data-theme="web2-glossy"] .explore { color:#4b9dde; } .benefits { position:absolute; top:80.49%; left:5%; width:57.5%; display:grid; grid-template-columns:repeat(3,1fr); gap:2.13%; } .benefits article { width:100%; height:clamp(104px,9.833vw,118px); padding:clamp(46px,5vw,60px) clamp(12px,1.33vw,16px) 0; border:1px solid var(--benefit-border); border-radius:8px; background:var(--benefit-bg); box-shadow:0 3px 7px rgba(46,118,187,.12),inset 0 1px 2px rgba(255,255,255,.8); } .benefits h2 { color:#124d87; font-size:clamp(12px,1.17vw,14px); } .benefits p { margin-top:clamp(8px,1.08vw,13px); color:#3e6d99; font-size:clamp(10px,1vw,12px); } body[data-theme="web2-glossy"] .benefits article { border-radius:18px; padding-top:0; } body[data-theme="web2-glossy"] .benefits h2 { margin-top:-4px; color:#22537e; } body[data-theme="web2-glossy"] .benefits p { color:#416383; }
@media (max-width:760px) { body { min-height:100vh; } .page-shell { width:100%; min-height:100vh; overflow:visible; padding:0 20px 40px; } .theme-nav,.landing-header,.signature,.hero-copy,.feature-card,.explore,.benefits { position:static; width:auto; height:auto; } .theme-nav { justify-content:flex-end; padding:22px 0 14px; } .landing-header { padding:18px 0; border-radius:0; border-width:0 0 1px; box-shadow:none; } .signature { margin:0 -20px; padding:8px 20px; border-radius:0; } .hero-copy { margin-top:52px; } h1 { font-size:clamp(32px,10vw,45px); line-height:1.12; } .hero-copy p { width:auto; margin:28px 0 0; } .feature-card { margin-top:34px; } .explore { margin-top:36px; } .benefits { grid-template-columns:1fr; gap:12px; margin-top:16px; } .benefits article { width:auto; } .page-shell::after { display:none; } }
body[data-theme="web2-glossy"] .page-shell::after { top:auto; bottom:-18%; left:-5%; width:110%; height:44%; transform:none; background:radial-gradient(ellipse at 50% 100%, rgba(105,181,223,.2) 0%, rgba(183,224,247,.12) 38%, transparent 72%); }
.theme-nav button.is-active { text-decoration:none; }
.theme-nav button, .landing-header a:not(.logo) { position:relative; text-decoration:none; }
.theme-nav button::after, .landing-header a:not(.logo)::after { content:""; position:absolute; right:0; bottom:-3px; left:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform 160ms ease; }
.theme-nav button:hover::after, .theme-nav button:focus-visible::after, .landing-header a:not(.logo):hover::after, .landing-header a:not(.logo):focus-visible::after { transform:scaleX(1); transform-origin:left; }
@media (prefers-reduced-motion: reduce) { .signature-track { animation:none; } .theme-nav button::after, .landing-header a:not(.logo)::after { transition:none; } }