:root { --bg:#090a12; --surface:#101321; --surface-2:#161a2a; --text:#edf0fb; --muted:#aeb6cc; --gold:#e7bd68; --violet:#a180ee; --green:#6ed19e; --red:#f18282; --line:rgba(218,226,255,.13); --shadow:0 16px 48px rgba(0,0,0,.28); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:radial-gradient(circle at 70% -10%,#2b1d4d 0,transparent 32rem),var(--bg); font:16px/1.65 Inter,Arial,sans-serif; } h1,h2,h3,p { margin-top:0; } h1,h2,h3,.brand { font-family:Cinzel,Georgia,serif; line-height:1.15; } h1 { font-size:clamp(2.5rem,6vw,5rem); max-width:840px; margin-bottom:1rem; } h2 { font-size:clamp(1.7rem,3vw,2.65rem); } h3 { font-size:1.16rem; } a { color:inherit; } .container { width:min(1160px,calc(100% - 2.5rem)); margin:auto; } .skip-link { position:absolute; left:-10000px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; padding:.7rem; background:#fff; color:#000; } .hero { min-height:700px; border-bottom:1px solid var(--line); background:linear-gradient(120deg,rgba(9,10,18,.18),rgba(9,10,18,.88)),radial-gradient(circle at 75% 35%,rgba(161,128,238,.3),transparent 17rem); } .nav { display:flex; justify-content:space-between; align-items:center; padding:1.35rem 0; } .brand { text-decoration:none; font-weight:700; letter-spacing:.04em; } .brand span { color:var(--gold); } .nav-links { display:flex; gap:1.25rem; font-size:.9rem; color:var(--muted); } .nav-links a { text-decoration:none; } .nav-links a:hover { color:var(--gold); } .hero-content { padding:6.4rem 0 4rem; } .eyebrow { color:var(--gold); font-size:.76rem; font-weight:700; letter-spacing:.15em; } .lead { max-width:720px; color:var(--muted); font-size:1.12rem; } .hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin:2rem 0 2.2rem; } .button { padding:.8rem 1.1rem; border-radius:.45rem; font-weight:700; text-decoration:none; } .primary { background:var(--gold); color:#251b0d; } .secondary { border:1px solid var(--line); background:rgba(255,255,255,.04); } .rule { max-width:780px; padding:1rem 1.2rem; border-left:3px solid var(--violet); background:rgba(161,128,238,.09); color:#d9d2ee; } .hero-infographic { display:flex; gap:.8rem; align-items:stretch; max-width:930px; margin-top:2rem; } .info-step { width:185px; padding:1rem; border:1px solid rgba(231,189,104,.3); border-radius:.6rem; background:linear-gradient(135deg,rgba(231,189,104,.12),rgba(161,128,238,.1)); } .info-step span,.info-step b,.info-step small { display:block; } .info-step span { color:var(--gold); font-family:Cinzel,serif; font-size:.75rem; } .info-step b { margin:.18rem 0; } .info-step small { color:var(--muted); font-size:.74rem; line-height:1.45; } .info-arrow { align-self:center; color:var(--gold); font-size:1.3rem; } .section { padding:5.5rem 0; } .surface { background:rgba(255,255,255,.025); border-block:1px solid var(--line); } .section-heading { max-width:760px; margin-bottom:2.2rem; } .section-heading > p:last-child { color:var(--muted); } .decision-grid,.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .decision,.info-grid article,.rune-card { border:1px solid var(--line); border-radius:.75rem; background:var(--surface); box-shadow:var(--shadow); } .decision { padding:1.4rem; } .decision ul { padding-left:1.1rem; color:var(--muted); } .status { display:inline-block; margin-bottom:.8rem; padding:.25rem .55rem; border-radius:99px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; } .sell .status { background:rgba(241,130,130,.14); color:var(--red); } .check .status { background:rgba(231,189,104,.15); color:var(--gold); } .keep .status { background:rgba(110,209,158,.14); color:var(--green); } .table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:.75rem; } table { width:100%; min-width:780px; border-collapse:collapse; text-align:left; } th,td { padding:1rem; border-bottom:1px solid var(--line); vertical-align:top; } th { background:rgba(161,128,238,.1); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; } td { color:var(--muted); } td:first-child { color:var(--gold); font-weight:700; } tr:last-child td { border:0; } .two-columns { display:grid; grid-template-columns:1.35fr .8fr; gap:2.5rem; align-items:start; } .role-list { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; margin-top:1.5rem; } .role-list div { padding:.9rem; border-left:2px solid var(--violet); background:rgba(255,255,255,.035); } .role-list b,.role-list span { display:block; } .role-list span { color:var(--muted); font-size:.9rem; } .callout { padding:1.5rem; border:1px solid rgba(231,189,104,.3); background:linear-gradient(145deg,rgba(231,189,104,.11),rgba(161,128,238,.08)); border-radius:.75rem; } .callout p:last-child { margin-bottom:0; color:#d1c9de; } .legend { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; margin-bottom:1.25rem; color:var(--muted); font-size:.82rem; } .legend span { display:flex; align-items:center; gap:.45rem; } .legend i { width:.7rem; height:.7rem; border-radius:50%; display:inline-block; } .legend-main { background:var(--gold); } .legend-sub { background:var(--violet); } .legend-note { background:var(--green); } .filters { display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; margin-bottom:1rem; } .search { display:flex; gap:.55rem; align-items:center; width:min(410px,100%); padding:.65rem .85rem; background:var(--surface); border:1px solid var(--line); border-radius:.45rem; color:var(--gold); } input { min-width:0; flex:1; border:0; outline:0; color:var(--text); background:transparent; font:inherit; } .filter-buttons { display:flex; flex-wrap:wrap; gap:.45rem; } .filter-button { cursor:pointer; padding:.45rem .7rem; border:1px solid var(--line); border-radius:99px; background:transparent; color:var(--muted); font:inherit; font-size:.82rem; } .filter-button:hover,.filter-button.active { color:#221a0e; background:var(--gold); border-color:var(--gold); } .result-count { color:var(--muted); font-size:.9rem; } .rune-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .rune-card { display:flex; flex-direction:column; overflow:hidden; position:relative; } .rune-card::before { content:""; position:absolute; top:-38px; right:-32px; width:100px; height:100px; border:1px solid rgba(231,189,104,.28); transform:rotate(45deg); background:radial-gradient(circle,rgba(161,128,238,.17),transparent 67%); } .rune-card header { position:relative; padding:1.2rem 1.25rem 1rem; border-bottom:1px solid var(--line); background:linear-gradient(115deg,rgba(161,128,238,.15),transparent); } .rune-card h3 { margin:0 0 .2rem; } .rune-meta { color:var(--gold); font-size:.84rem; } .rune-card dl { margin:0; padding:1.15rem 1.25rem 0; } .rune-card dt { margin-top:1rem; color:var(--violet); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } .rune-card dt:first-child { margin-top:0; } .rune-card dd { margin:.18rem 0 0; color:var(--muted); font-size:.91rem; } .main-stat-slots { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin-top:.4rem; } .main-stat-slots span { min-height:54px; padding:.38rem; border:1px solid rgba(231,189,104,.23); border-radius:.35rem; background:rgba(231,189,104,.07); color:#e9dcba; font-size:.73rem; line-height:1.35; } .main-stat-slots b { display:block; margin-bottom:.1rem; color:var(--gold); font-size:.68rem; } .note { margin-top:1.1rem; padding:.85rem 1.25rem; background:rgba(110,209,158,.07); border-top:1px solid rgba(110,209,158,.16); color:#d9d3ea; font-size:.88rem; } .info-grid { grid-template-columns:repeat(3,1fr); } .info-grid article { padding:1.25rem; } .info-grid p { margin:0; color:var(--muted); } .checklist { padding:0; list-style:none; } .checklist li { margin:.8rem 0; padding-left:1.7rem; position:relative; color:var(--muted); } .checklist li::before { content:"✦"; position:absolute; left:0; color:var(--gold); } footer { padding:1.5rem 0; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; } footer .container { display:flex; justify-content:space-between; gap:1rem; } footer a { color:var(--gold); } @media (max-width:850px) { .decision-grid,.rune-grid,.info-grid { grid-template-columns:repeat(2,1fr); } .two-columns { grid-template-columns:1fr; } .hero-infographic { max-width:600px; flex-wrap:wrap; } .info-arrow { display:none; } .info-step { flex:1; min-width:130px; } } @media (max-width:570px) { .container { width:min(100% - 1.5rem,1160px); } .nav-links { display:none; } .hero { min-height:570px; } .hero-content { padding-top:5rem; } .section { padding:3.5rem 0; } .decision-grid,.rune-grid,.info-grid,.role-list { grid-template-columns:1fr; } .hero-infographic { display:grid; grid-template-columns:1fr 1fr; } .info-step { width:auto; } footer .container { flex-direction:column; } }