:root{ --bg:#071a1c; --bg2:#071316; --panel:rgba(255,255,255,.05); --panel2:rgba(255,255,255,.03); --text:#e9f3ff; --muted:rgba(233,243,255,.72); --line:rgba(255,255,255,.10); --accent:#2bc7d6; --accent2:#1e9bb8; /* MonstraLens rarity palette (locked) */ --rar-wild:#E6D486; /* Wild */ --rar-feral:#80512D; /* Feral */ --rar-primal:#2E7D32; /* Primal */ --rar-alpha:#53A9FF; /* Alpha */ --rar-apex:#1C84AB; /* Apex */ } *{box-sizing:border-box} html, body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text); /* Base backdrop only (DNA art handled by ::before/::after) */ background: radial-gradient(1100px 520px at 18% 0%, rgba(28,132,171,.30), transparent 60%), radial-gradient(900px 520px at 92% 10%, rgba(0,255,157,.14), transparent 60%), linear-gradient(rgba(7,10,15,.92), rgba(7,10,15,.94)), #070A0F; } a{color:inherit;text-decoration:none} a:focus-visible{ outline:2px solid rgba(43,199,214,.75); outline-offset:3px; border-radius:10px; } /* ===== MonstraLens DNA background (site-wide) ===== Requires: on each page */ body.dna-bg::before{ content:""; position:fixed; inset:0; /* Put your DNA/scene art here */ background-image:url("/assets/img/bg_dna_forest.png"); background-size:cover; background-position:center; background-repeat:no-repeat; /* Visibility target: ~50–60% */ opacity:0.58; filter:saturate(1.35) contrast(1.22) brightness(1.00); pointer-events:none; z-index:-2; } /* Optional logo/pixel overlay layer */ body.dna-bg::after{ content:""; position:fixed; inset:0; background-image:url("/assets/img/monstralens_logo_bg.png"); background-size:900px auto; background-position:80% 18%; background-repeat:no-repeat; opacity:0.14; filter:saturate(1.30) contrast(1.15); pointer-events:none; z-index:-1; } .container{max-width:1100px;margin:0 auto;padding:28px 18px 44px} .topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap} .brand{display:flex;align-items:center;gap:12px;min-width:240px} .badge{ width:36px;height:36px;border-radius:12px; background:linear-gradient(135deg,rgba(43,199,214,.85),rgba(25,99,120,.85)); box-shadow:0 10px 30px rgba(0,0,0,.35) } .brand h1{font-size:16px;margin:0} .brand .sub{font-size:12px;color:var(--muted);margin-top:2px} .nav{ display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:flex-end; align-items:center; } .nav a{ font-size:13px; color:var(--muted); font-weight:800; letter-spacing:.02em; padding:6px 8px; border-radius:10px; } .nav a:hover{color:var(--text)} .nav a.active{ color:var(--text); background:rgba(43,199,214,.12); border:1px solid rgba(43,199,214,.22); } .hero{margin-top:28px;display:grid;grid-template-columns: 1.2fr .8fr;gap:18px;align-items:start} @media (max-width: 900px){ .hero{grid-template-columns:1fr} .nav{justify-content:flex-start} } .kicker{ font-size:12px; color:rgba(43,199,214,.98); font-weight:900; letter-spacing:.14em; text-transform:uppercase } .title{font-size:56px;line-height:1.05;margin:8px 0 10px;font-weight:950} @media (max-width: 600px){ .title{font-size:40px} } .lead{color:var(--muted);font-size:16px;line-height:1.6;max-width:58ch} /* Stronger panel readability to offset brighter DNA bg */ .panel{ background: rgba(8, 20, 28, 0.80); border:1px solid rgba(255,255,255,0.10); border-radius:18px; padding:18px; box-shadow:0 18px 60px rgba(0,0,0,.50); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px} .btn{ display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,.06); color:var(--text); padding:10px 14px; border-radius:12px; font-weight:900; cursor:pointer; transition: transform .12s ease, filter .12s ease, background .12s ease; } .btn.primary{ background:linear-gradient(180deg, rgba(43,199,214,.92), rgba(30,155,184,.78)); border-color:rgba(43,199,214,.40); box-shadow: 0 10px 28px rgba(30,155,184,.18); } .btn:hover{transform:translateY(-1px);filter:saturate(1.05)} .btn:active{transform:translateY(0px)} .btn:focus-visible{ outline:2px solid rgba(43,199,214,.75); outline-offset:3px; } .small{font-size:13px;color:var(--muted);line-height:1.55} .cards{margin-top:18px;display:grid;grid-template-columns: repeat(3, 1fr); gap:14px} @media (max-width: 900px){ .cards{grid-template-columns:1fr} } .card{ padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,0.10); background:rgba(8, 20, 28, 0.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .card h3{margin:0 0 8px;font-size:14px} .card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55} .hr{height:1px;background:rgba(255,255,255,0.12);margin:22px 0} .footer{ margin-top:22px; color:var(--muted); font-size:12px; line-height:1.6; } .footer a{ color:rgba(233,243,255,.86); text-decoration:underline; text-decoration-color: rgba(43,199,214,.40); text-underline-offset: 3px; } .footer a:hover{ color:var(--text); text-decoration-color: rgba(43,199,214,.85); } .pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .pill{ display:flex;align-items:center;gap:8px; border:1px solid rgba(255,255,255,0.12); border-radius:999px; padding:7px 10px; background:rgba(8, 20, 28, 0.55); font-size:12px; color:var(--muted); font-weight:800 } .dot{width:10px;height:10px;border-radius:999px}