/* WarForge Merc — site styles. Mirrors warforge.org gold-accent design. Supports a `data-theme="light"` override on for the light scheme. */ :root { /* Dark (default) — matches warforge.org exactly */ --bg:#08090d; --bg2:#12151c; --bg3:#1a1e2a; --gold:#f0b232; --gold-mid:#c8922a; --gold-dim:#8a6420; --gold-glow:rgba(240,178,50,0.15); --green:#38c96a; --red:#d44040; --purple:#7b68ee; --blue:#5dc6e8; --border:rgba(240,178,50,0.08); --border-gold:rgba(240,178,50,0.2); --text:#e8e4dc; --text2:#9b978e; --text3:#5e5b54; --shadow:0 6px 24px rgba(0,0,0,0.4); --font:'Barlow','Segoe UI',sans-serif; --font-d:'Cinzel',Georgia,serif; --font-m:'Fira Code',monospace; --radius:6px; --radius-lg:12px; color-scheme: dark; } html[data-theme="light"] { --bg:#f5f3ee; --bg2:#ffffff; --bg3:#ebe7df; --gold:#b07a14; --gold-mid:#c8922a; --gold-dim:#8a6420; --gold-glow:rgba(176,122,20,0.12); --green:#1f8a45; --red:#b62828; --purple:#5b4ad6; --blue:#1d8db5; --border:rgba(0,0,0,0.06); --border-gold:rgba(176,122,20,0.3); --text:#1a1814; --text2:#5a564c; --text3:#9b978e; --shadow:0 6px 24px rgba(0,0,0,0.08); color-scheme: light; } * { margin:0; padding:0; box-sizing:border-box; } body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.7; -webkit-font-smoothing:antialiased; min-height:100vh; } a { color:var(--gold-mid); text-decoration:none; } a:hover { color:var(--gold); } /* ─── Nav ────────────────────────────────────────────── */ nav { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(8,9,13,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:0 24px; height:64px; display:flex; align-items:center; } html[data-theme="light"] nav { background:rgba(245,243,238,0.92); } .nav-inner { max-width:1024px; margin:0 auto; width:100%; display:flex; align-items:center; justify-content:space-between; } .nav-logo { font-family:var(--font-d); font-size:1.3rem; font-weight:900; color:var(--gold); text-decoration:none; letter-spacing:2px; display:flex; align-items:center; gap:10px; } .nav-logo svg { width:28px; height:28px; fill:var(--gold); } .nav-logo .tag { font-family:var(--font); font-size:0.55rem; font-weight:600; color:var(--text3); letter-spacing:1.5px; text-transform:uppercase; } .nav-links { display:flex; gap:20px; list-style:none; align-items:center; } .nav-links a { font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--text2); } .nav-links a:hover { color:var(--gold); } /* Theme toggle button */ .theme-toggle { background:transparent; border:1px solid var(--border-gold); color:var(--text2); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; padding:0; } .theme-toggle:hover { color:var(--gold); border-color:var(--gold); } .theme-toggle svg { width:16px; height:16px; } .theme-toggle .sun { display:none; } .theme-toggle .moon { display:block; } html[data-theme="light"] .theme-toggle .sun { display:block; } html[data-theme="light"] .theme-toggle .moon { display:none; } /* ─── Layout ─────────────────────────────────────────── */ .wrap { max-width:720px; margin:0 auto; padding:100px 24px 80px; } .wrap-wide { max-width:1024px; margin:0 auto; padding:100px 24px 80px; } h1 { font-family:var(--font-d); font-size:clamp(1.6rem,4vw,2.2rem); font-weight:900; color:var(--gold); line-height:1.3; margin-bottom:16px; } h2 { font-family:var(--font-d); font-size:1.3rem; font-weight:700; color:var(--text); margin-bottom:14px; } h3 { font-family:var(--font-d); font-size:1.05rem; color:var(--text); margin-bottom:8px; } p { color:var(--text2); margin-bottom:14px; } .muted { color:var(--text3); font-size:0.85rem; } .mono { font-family:var(--font-m); } /* ─── Cards / panels ─────────────────────────────────── */ .card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; margin-bottom:20px; } .card.gold { border-color:var(--border-gold); } .card h3 { margin-bottom:14px; } /* ─── Buttons ────────────────────────────────────────── */ .btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:linear-gradient(135deg, var(--gold), var(--gold-mid)); color:#000; font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:1.5px; border-radius:var(--radius); border:none; cursor:pointer; text-decoration:none; transition:transform 0.15s, box-shadow 0.15s; } .btn:hover { transform:translateY(-1px); box-shadow:0 6px 18px var(--gold-glow); color:#000; } .btn:disabled { opacity:0.5; cursor:not-allowed; transform:none; } .btn-ghost { background:transparent; color:var(--text2); border:1px solid var(--border-gold); } .btn-ghost:hover { color:var(--gold); border-color:var(--gold); background:var(--gold-glow); } .btn-sm { padding:8px 14px; font-size:0.75rem; } .btn-danger { background:linear-gradient(135deg, var(--red), #9b2828); color:#fff; } .btn-danger:hover { color:#fff; } /* ─── Forms ──────────────────────────────────────────── */ input[type=email], input[type=text], input[type=password], input[type=number], select { width:100%; padding:12px 14px; background:var(--bg3); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); font-family:var(--font); font-size:0.95rem; outline:none; transition:border-color 0.15s; } input:focus, select:focus { border-color:var(--gold-mid); } label { display:block; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:1.5px; color:var(--text3); margin-bottom:6px; } .form-row { margin-bottom:16px; } /* ─── Points widget ──────────────────────────────────── */ .points-widget { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; } .stat { background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); padding:14px 18px; } .stat .label { font-family:var(--font-m); font-size:0.7rem; color:var(--text3); text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; } .stat .value { font-family:var(--font-d); font-size:1.7rem; font-weight:900; color:var(--gold); line-height:1.1; } .stat.compact .value { font-size:1.1rem; color:var(--text); } .stat .sub { font-size:0.72rem; color:var(--text3); margin-top:4px; } /* ─── Camp list ──────────────────────────────────────── */ .camp-row { display:grid; grid-template-columns: 70px 1fr 90px 90px 110px; gap:14px; align-items:center; padding:14px 16px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; font-size:0.88rem; } .camp-row .kingdom { font-family:var(--font-m); color:var(--gold); font-weight:600; } .camp-row .coords { font-family:var(--font-m); font-size:0.95rem; } .camp-row .coords.redacted { color:var(--text3); letter-spacing:1px; } .camp-row .state-badge { display:inline-block; padding:3px 10px; border-radius:50px; font-family:var(--font-m); font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; } .s-fresh { background:rgba(56,201,106,0.15); color:var(--green); } .s-somewhat_fresh { background:rgba(93,198,232,0.15); color:var(--blue); } .s-less_crowded { background:rgba(123,104,238,0.15); color:var(--purple); } .s-crowded { background:rgba(240,178,50,0.15); color:var(--gold-mid); } .s-super_crowded { background:rgba(212,64,64,0.15); color:var(--red); } .s-unknown { background:rgba(94,91,84,0.15); color:var(--text3); } .camp-row .age { font-family:var(--font-m); color:var(--text2); font-size:0.82rem; } .camp-row .cost { color:var(--gold); font-weight:600; } /* ─── Filter bar ─────────────────────────────────────── */ .filter-bar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; padding:14px; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); } .filter-bar label { margin:0; } .filter-bar select, .filter-bar input { width:auto; padding:8px 10px; font-size:0.85rem; } /* ─── Modal ──────────────────────────────────────────── */ .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:2000; backdrop-filter:blur(4px); } .modal { background:var(--bg2); border:1px solid var(--border-gold); border-radius:var(--radius-lg); padding:28px; max-width:420px; width:90vw; box-shadow:var(--shadow); } .modal h3 { font-family:var(--font-d); color:var(--gold); margin-bottom:8px; } .modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; } /* ─── Alerts / toast ─────────────────────────────────── */ .alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:14px; font-size:0.88rem; border:1px solid; background:var(--bg2); } .alert.info { border-color:rgba(93,198,232,0.3); color:var(--blue); } .alert.error { border-color:rgba(212,64,64,0.3); color:var(--red); background:rgba(212,64,64,0.06); } .alert.success { border-color:rgba(56,201,106,0.3); color:var(--green); } /* ─── Footer ─────────────────────────────────────────── */ footer { border-top:1px solid var(--border); padding:32px 24px; text-align:center; font-size:0.78rem; color:var(--text3); max-width:1024px; margin:0 auto; } footer a { color:var(--gold-dim); } @media (max-width:700px) { .nav-links { display:none; } .nav-links.theme-only { display:flex; } .camp-row { grid-template-columns: 60px 1fr 80px; gap:8px; font-size:0.82rem; } .camp-row .age, .camp-row .cost { display:none; } }