/* ===== Shared Legends Collection hub styles ===== */ :root{ --bg:#0a0e14; --bg-2:#0d1420; --panel:#111a28; --panel-2:#0f1826; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14); --text:#eef2f7; --muted:#93a1b5; --muted-2:#6f7f95; --radius:14px; --radius-sm:10px; --maxw:1080px; --shadow:0 18px 50px -20px rgba(0,0,0,.75); --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* Per-series accent — set on */ body[data-series="am"]{--accent:#e8792b;--accent-2:#f0b562;--accent-deep:#9c4413} body[data-series="fr"]{--accent:#e23b2e;--accent-2:#f7a23c;--accent-deep:#8f1c14} body[data-series="nh"]{--accent:#3fa46a;--accent-2:#6fd39a;--accent-deep:#155230} body[data-series="jr"]{--accent:#2f9be0;--accent-2:#8fd0f2;--accent-deep:#155a8c} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--font);color:var(--text);line-height:1.55;-webkit-font-smoothing:antialiased; background: radial-gradient(1100px 560px at 50% -12%, color-mix(in srgb, var(--accent) 22%, #16233a) 0%, transparent 62%), radial-gradient(900px 500px at 100% 8%, #10202e 0%, transparent 55%), var(--bg); } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px} /* Top bar */ .topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px); background:linear-gradient(180deg,rgba(10,14,20,.86),rgba(10,14,20,.55)); border-bottom:1px solid var(--line)} .topbar .row{display:flex;align-items:center;justify-content:space-between;height:56px} .back{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted); padding:8px 12px;border-radius:9px;border:1px solid var(--line);transition:.2s} .back:hover{color:var(--text);border-color:var(--line-strong);background:rgba(255,255,255,.04)} .topbar .mark{font-weight:900;font-size:15px;letter-spacing:.02em;color:var(--accent-2)} /* Hero banner */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .hero .scene{position:absolute;inset:0} .hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(8,11,17,.35) 0%,rgba(8,11,17,.55) 55%,rgba(10,14,20,.96) 100%)} .hero .inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:64px 18px 46px} .hero .kicker{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.16em;color:#fff; background:color-mix(in srgb,var(--accent) 80%,#000);padding:6px 12px;border-radius:999px;margin-bottom:16px; box-shadow:0 6px 18px -6px color-mix(in srgb,var(--accent) 60%,transparent)} .hero h1{margin:0 0 12px;font-size:clamp(30px,6vw,56px);font-weight:900;letter-spacing:-.02em;line-height:1.02; text-shadow:0 4px 24px rgba(0,0,0,.5)} .hero .lede{margin:0;max-width:none;font-size:clamp(14px,1.85vw,16px);color:#d7e0ec;text-shadow:0 2px 10px rgba(0,0,0,.5)} @media (min-width:1000px){ .hero .lede{white-space:nowrap} } .hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .btn{display:inline-block;text-align:center;font-weight:800;font-size:13.5px;letter-spacing:.01em; padding:12px 20px;border-radius:var(--radius-sm);border:1px solid transparent;transition:filter .2s,transform .1s} .btn:active{transform:translateY(1px)} .btn.solid{background:linear-gradient(180deg,var(--accent),var(--accent-deep));border-color:color-mix(in srgb,var(--accent) 40%,transparent);color:#fff} .btn.solid:hover{filter:brightness(1.12)} .btn.ghost{background:rgba(255,255,255,.05);border-color:var(--line-strong);color:var(--text)} .btn.ghost:hover{background:rgba(255,255,255,.1)} /* Stat strip */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:28px 0} .stat{background:var(--panel);padding:18px 16px;text-align:center} .stat .n{font-size:24px;font-weight:900;color:var(--accent-2)} .stat .l{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted-2);margin-top:4px;text-transform:uppercase} /* Section scaffolding */ section{padding:30px 0} .sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px} .sec-head .left{display:flex;gap:12px} .sec-head .ico{font-size:22px} .sec-head h2{margin:0;font-size:18px;font-weight:800} .sec-head .desc{margin:3px 0 0;color:var(--muted);font-size:13px} .ghost-btn{white-space:nowrap;font-size:12px;font-weight:700;padding:9px 14px;border-radius:9px; border:1px solid var(--line-strong);background:rgba(255,255,255,.03);color:var(--text);transition:.2s} .ghost-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)} /* Story */ .story{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--panel-2)); padding:26px;display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:center} .story p{margin:0 0 14px;color:#c3cedd;font-size:15px} .story p:last-child{margin-bottom:0} .story .aside{border-left:2px solid var(--accent);padding-left:18px} .story .aside h4{margin:0 0 8px;font-size:13px;letter-spacing:.06em;color:var(--accent-2);text-transform:uppercase} .story .aside ul{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;display:flex;flex-direction:column;gap:6px} /* Tables grid */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel); display:flex;flex-direction:column;transition:transform .22s,border-color .22s} .table:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow)} .table .thumb{position:relative;height:150px;overflow:hidden} .table .thumb .scene{position:absolute;inset:0} .table .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(10,14,20,.55))} .table .emoji{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:52px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))} .status{position:absolute;top:12px;left:12px;z-index:2;font-size:10px;font-weight:900;letter-spacing:.08em; padding:5px 10px;border-radius:6px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)} .status.avail{background:rgba(47,155,110,.92)} .status.pre{background:color-mix(in srgb,var(--accent) 90%,#000)} .status.wip{background:rgba(232,121,43,.92)} .table .info{padding:15px 16px 17px;display:flex;flex-direction:column;gap:8px;flex:1} .table .info h4{margin:0;font-size:15.5px;font-weight:800} .table .info .blurb{margin:0;color:var(--muted);font-size:13px;flex:1} .table .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px} .table .ship{color:var(--muted-2);font-size:12px} .table .link{font-size:12.5px;font-weight:800;color:var(--accent-2)} /* Roadmap */ .roadmap{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--panel-2));padding:22px 22px 8px} .rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:4px} .rail::before{content:"";position:absolute;top:7px;left:2%;right:2%;height:2px; background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,#9b6bd6))} .phase{position:relative;padding-top:26px} .phase .dot{position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;border:3px solid var(--bg-2);background:var(--accent)} .phase:nth-child(4) .dot{background:#9b6bd6} .phase h3{margin:0 0 10px;font-size:12px;font-weight:900;letter-spacing:.1em;color:var(--accent-2)} .phase:nth-child(4) h3{color:#b892e6} .phase ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px} .phase li{color:var(--muted);font-size:13px;padding-left:14px;position:relative} .phase li::before{content:"•";position:absolute;left:0;color:var(--muted-2)} /* Blog cards */ .blogrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .blog{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel); display:flex;flex-direction:column;transition:transform .22s,border-color .22s} .blog:hover{transform:translateY(-3px);border-color:var(--line-strong)} .blog .thumb{position:relative;height:120px;overflow:hidden} .blog .thumb .scene{position:absolute;inset:0} .blog .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(10,14,20,.6))} .blog .pill{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:900;letter-spacing:.1em; padding:5px 9px;border-radius:6px;color:#fff;background:color-mix(in srgb,var(--accent) 88%,#000);text-shadow:0 1px 3px rgba(0,0,0,.5)} .blog .body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:7px;flex:1} .blog h4{margin:0;font-size:14px;font-weight:800} .blog .blurb{margin:0;color:var(--muted);font-size:12.5px;flex:1} .blog .meta{color:var(--muted-2);font-size:11.5px;display:flex;gap:8px;align-items:center} .blog .meta .sep{width:3px;height:3px;border-radius:50%;background:var(--muted-2)} /* Community band */ .community{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);padding:38px 26px;text-align:center; background: radial-gradient(600px 200px at 50% 0%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%), linear-gradient(180deg,var(--panel),var(--panel-2))} .community h2{margin:0 0 8px;font-size:22px;font-weight:900} .community p{margin:0 auto 20px;max-width:520px;color:var(--muted);font-size:14px} .community .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} footer{padding:34px 0 48px;color:var(--muted-2);font-size:12px;text-align:center;border-top:1px solid var(--line);margin-top:26px} footer a{color:var(--muted)} footer a:hover{color:var(--text)} /* ===== CSS-art scenes ===== */ .scene.am{background:linear-gradient(180deg,#3a2a1e 0%,#7a4a2a 45%,#d98a3f 72%,#f0b562 100%)} .scene.am::before{content:"";position:absolute;left:0;right:0;bottom:0;height:44%; background:linear-gradient(180deg,rgba(20,14,10,0),rgba(20,14,10,.9)),repeating-linear-gradient(90deg,#2a1c12 0 14px,#33241700 14px 30px)} .scene.am .sun{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:72px;height:72px;border-radius:50%; background:radial-gradient(circle,#ffe6a8,#ff9d3d 60%,transparent 72%);filter:blur(1px)} .scene.fr{background:linear-gradient(180deg,#2a0f0a 0%,#7a1c10 40%,#d63a1e 66%,#f7a23c 100%)} .scene.fr::before{content:"";position:absolute;inset:0; background:radial-gradient(120px 80px at 30% 78%,rgba(255,180,60,.55),transparent 70%),radial-gradient(140px 90px at 70% 82%,rgba(255,120,40,.5),transparent 72%)} .scene.nh{background:linear-gradient(180deg,#12312b 0%,#1c5442 46%,#2f7a4f 74%,#5aa86a 100%)} .scene.nh::before{content:"";position:absolute;left:8%;bottom:0;width:60%;height:70%;background:radial-gradient(60% 100% at 40% 100%,#0e241d 0%,transparent 70%)} .scene.jr{background:linear-gradient(180deg,#8fd0f2 0%,#bfe6fb 55%,#e9f6ff 100%)} .scene.jr::before{content:"";position:absolute;bottom:0;left:0;right:0;height:35%;background:linear-gradient(180deg,transparent,#cfeeff)} @media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr)} .grid,.blogrow{grid-template-columns:repeat(2,1fr)} .story{grid-template-columns:1fr} .rail{grid-template-columns:repeat(2,1fr);gap:26px} .rail::before{display:none} } @media (max-width:540px){ .grid,.blogrow,.stats{grid-template-columns:1fr} .rail{grid-template-columns:1fr} .sec-head{flex-direction:column} }