/* Roster Builder design system — a grimdark-Imperial palette, not reused from kill-signal's amber CRT theme. Deep charcoal + parchment-gold + blood-red accents. */ :root { /* Night (default) — grimdark charcoal + parchment-gold. */ --rb-bg: #121110; --rb-bg-panel: #1c1a17; --rb-bg-panel-raised: #242019; --rb-border: #3a332a; --rb-border-strong: #5a4d38; --rb-text: #e8e2d4; --rb-text-muted: #a89f8c; --rb-gold: #c9a227; --rb-gold-bright: #e8c34a; --rb-red: #8b2020; --rb-red-bright: #c73838; --rb-green: #3f7a4f; --rb-radius: 6px; --rb-space-1: 0.25rem; --rb-space-2: 0.5rem; --rb-space-3: 0.75rem; --rb-space-4: 1rem; --rb-space-6: 1.5rem; --rb-space-8: 2rem; } /* Day — aged parchment + dark ink; the same palette inverted for light rooms / printing. Selected via the theme toggle (sets data-theme="light" on ). */ :root[data-theme="light"] { --rb-bg: #ded4bd; --rb-bg-panel: #ebe3ce; --rb-bg-panel-raised: #f5eeda; --rb-border: #c3b48f; --rb-border-strong: #9c855a; --rb-text: #2a2318; --rb-text-muted: #6b5d42; --rb-gold: #8a6d12; --rb-gold-bright: #9c7a12; --rb-red: #8b2020; --rb-red-bright: #a82626; --rb-green: #2f6f4f; } * { box-sizing: border-box; } a { color: var(--rb-gold); text-decoration: none; } a:hover { color: var(--rb-gold-bright); text-decoration: underline; } a:visited { color: var(--rb-gold); } body.rb-body { background: var(--rb-bg); background-image: radial-gradient(circle at 20% 20%, rgba(201, 162, 39, 0.03) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(139, 32, 32, 0.03) 0%, transparent 40%); color: var(--rb-text); font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: var(--rb-space-6) var(--rb-space-8); line-height: 1.5; } .rb-container { max-width: 92rem; margin: 0 auto; } .rb-topbar { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--rb-space-4); border-bottom: 2px solid var(--rb-border-strong); padding-bottom: var(--rb-space-4); margin-bottom: var(--rb-space-6); } .rb-title { color: var(--rb-gold-bright); font-size: 1.6rem; font-weight: 700; margin: 0 0 var(--rb-space-1); letter-spacing: 0.01em; } .rb-breadcrumb { color: var(--rb-text-muted); font-size: 0.85rem; } .rb-breadcrumb a { color: var(--rb-gold); text-decoration: none; } .rb-breadcrumb a:hover { text-decoration: underline; } /* --- Layout --- */ .rb-layout { display: grid; grid-template-columns: 20rem 1fr 18rem; gap: var(--rb-space-6); align-items: start; } @media (max-width: 1200px) { .rb-layout { grid-template-columns: 18rem 1fr; } .rb-sidebar { grid-column: span 2; } } @media (max-width: 900px) { .rb-layout { grid-template-columns: 1fr; } .rb-sidebar { grid-column: auto; } } /* --- Unit browser (left column) --- */ .rb-unit-browser { position: sticky; top: var(--rb-space-6); max-height: calc(100vh - 3rem); display: flex; flex-direction: column; } .rb-unit-browser .rb-panel-body { padding: var(--rb-space-3); overflow-y: auto; } .rb-unit-list { display: flex; flex-direction: column; gap: var(--rb-space-2); } .rb-unit-row { display: flex; flex-direction: column; gap: var(--rb-space-2); background: var(--rb-bg); border: 1px solid var(--rb-border); border-radius: var(--rb-radius); padding: var(--rb-space-2) var(--rb-space-3); } .rb-unit-row-title { font-weight: 600; font-size: 0.85rem; } .rb-unit-row-form { display: flex; gap: var(--rb-space-1); flex-wrap: wrap; align-items: center; } .rb-unit-row-form select { flex: 1; min-width: 0; font-size: 0.8rem; padding: var(--rb-space-1) var(--rb-space-2); } /* --- Panels / cards --- */ .rb-panel { background: var(--rb-bg-panel); border: 1px solid var(--rb-border); border-radius: var(--rb-radius); margin-bottom: var(--rb-space-6); overflow: hidden; } .rb-panel-header { display: flex; justify-content: space-between; align-items: center; padding: var(--rb-space-3) var(--rb-space-4); background: var(--rb-bg-panel-raised); border-bottom: 1px solid var(--rb-border); } .rb-panel-header h3 { margin: 0; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rb-gold); } .rb-panel-body { padding: var(--rb-space-4); } /* --- Stat summary sidebar --- */ .rb-stat-list { display: flex; flex-direction: column; gap: var(--rb-space-3); } .rb-stat { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--rb-space-2); border-bottom: 1px solid var(--rb-border); } .rb-stat:last-child { border-bottom: none; padding-bottom: 0; } .rb-stat-label { color: var(--rb-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } .rb-stat-value { font-size: 1.15rem; font-weight: 700; color: var(--rb-text); font-variant-numeric: tabular-nums; } .rb-stat-value.rb-over { color: var(--rb-red-bright); } .rb-stat-value.rb-ok { color: var(--rb-green); } /* --- Tables --- */ .rb-table { width: 100%; border-collapse: collapse; } .rb-table th, .rb-table td { text-align: left; padding: var(--rb-space-2) var(--rb-space-3); border-bottom: 1px solid var(--rb-border); font-size: 0.9rem; } .rb-table th { color: var(--rb-gold); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .rb-table tr:last-child td { border-bottom: none; } .rb-muted { color: var(--rb-text-muted); font-size: 0.85rem; } /* --- Chips / badges --- */ .rb-chip { display: inline-flex; align-items: center; gap: var(--rb-space-2); background: var(--rb-bg-panel-raised); border: 1px solid var(--rb-border-strong); border-radius: 999px; padding: var(--rb-space-1) var(--rb-space-3); font-size: 0.8rem; } .rb-chip.rb-chip-upgrade { border-color: var(--rb-gold); color: var(--rb-gold-bright); } .rb-warlord-star { color: var(--rb-gold-bright); font-weight: 700; } /* --- Forms & buttons --- */ .rb-form-row { display: flex; gap: var(--rb-space-3); align-items: center; flex-wrap: wrap; } select, input[type=text], input[type=number], input[type=search] { background: var(--rb-bg); color: var(--rb-text); border: 1px solid var(--rb-border-strong); border-radius: var(--rb-radius); padding: var(--rb-space-2) var(--rb-space-3); font-size: 0.9rem; } select:focus, input:focus { outline: none; border-color: var(--rb-gold); } .rb-btn { background: var(--rb-gold); color: #1a1710; border: none; border-radius: var(--rb-radius); padding: var(--rb-space-2) var(--rb-space-4); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: background 0.15s; } .rb-btn:hover { background: var(--rb-gold-bright); } .rb-btn:disabled { background: var(--rb-border); color: var(--rb-text-muted); cursor: not-allowed; } .rb-btn-danger { background: var(--rb-red); color: #f2e6e6; } .rb-btn-danger:hover { background: var(--rb-red-bright); } .rb-btn-ghost { background: transparent; border: 1px solid var(--rb-border-strong); color: var(--rb-text); } .rb-btn-ghost:hover { border-color: var(--rb-gold); color: var(--rb-gold); } .rb-btn-sm { padding: var(--rb-space-1) var(--rb-space-2); font-size: 0.75rem; } form.rb-inline { display: inline; } /* --- Messages / warnings --- */ .rb-messages, .rb-warnings { list-style: none; padding: 0; margin: 0 0 var(--rb-space-4); } .rb-messages li { background: rgba(139, 32, 32, 0.25); border: 1px solid var(--rb-red-bright); color: #f2e0e0; padding: var(--rb-space-2) var(--rb-space-3); border-radius: var(--rb-radius); margin-bottom: var(--rb-space-2); font-size: 0.9rem; } .rb-warnings li { background: rgba(201, 162, 39, 0.12); border: 1px solid var(--rb-gold); color: #f0e6c8; padding: var(--rb-space-2) var(--rb-space-3); border-radius: var(--rb-radius); margin-bottom: var(--rb-space-2); font-size: 0.85rem; } /* --- Roster list page --- */ .rb-roster-card { display: flex; justify-content: space-between; align-items: center; padding: var(--rb-space-4); background: var(--rb-bg-panel); border: 1px solid var(--rb-border); border-radius: var(--rb-radius); margin-bottom: var(--rb-space-3); } .rb-roster-card a { color: var(--rb-gold-bright); text-decoration: none; font-weight: 700; font-size: 1.05rem; } .rb-roster-card a:hover { text-decoration: underline; } /* Unit-add datalist search */ .rb-unit-search { position: relative; } /* ============================================================ New-Recruit-style build-mode (rb2-*) — lives inside the w40k shell ============================================================ */ .rb2 { max-width: 78rem; } .rb2-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--rb-space-3); margin-bottom: var(--rb-space-4); } .rb2-namebar { display: flex; align-items: center; gap: var(--rb-space-2); } .rb2-name-input { font-size: 1.15rem; font-weight: 700; color: var(--rb-gold-bright); width: 18rem; max-width: 46vw; } .rb2-lim-input { width: 5rem; } .rb2-toolbar-actions { display: flex; gap: var(--rb-space-2); } .rb2-stage { display: flex; gap: var(--rb-space-6); align-items: flex-start; } .rb2-army { flex: 1; min-width: 0; } /* --- summary bar --- */ .rb2-summary { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--rb-space-3); background: var(--rb-bg-panel-raised); border: 1px solid var(--rb-border-strong); border-radius: var(--rb-radius); padding: var(--rb-space-3) var(--rb-space-4); margin-bottom: var(--rb-space-3); position: sticky; top: var(--rb-space-2); z-index: 5; } .rb2-pts { font-size: 1.8rem; font-weight: 800; color: var(--rb-gold-bright); font-variant-numeric: tabular-nums; } .rb2-pts-lim { color: var(--rb-text-muted); font-size: 0.95rem; } .rb2-over { color: var(--rb-red-bright) !important; } .rb2-summary-stats { display: flex; gap: var(--rb-space-4); } .rb2-stat { color: var(--rb-text-muted); font-size: 0.85rem; } .rb2-stat b { color: var(--rb-text); font-variant-numeric: tabular-nums; } .rb2-error { background: rgba(139,32,32,0.25); border: 1px solid var(--rb-red-bright); color: #f2e0e0; padding: var(--rb-space-2) var(--rb-space-3); border-radius: var(--rb-radius); margin-bottom: var(--rb-space-3); font-size: 0.9rem; } .rb2-warnings { list-style: none; margin: 0 0 var(--rb-space-3); padding: 0; } .rb2-warnings li { background: rgba(201,162,39,0.12); border: 1px solid var(--rb-gold); color: #f0e6c8; padding: var(--rb-space-1) var(--rb-space-3); border-radius: var(--rb-radius); margin-bottom: var(--rb-space-1); font-size: 0.82rem; } /* --- sections (detachments, roles) --- */ .rb2-section-head { display: flex; align-items: baseline; gap: var(--rb-space-2); margin: var(--rb-space-4) 0 var(--rb-space-2); } .rb2-section-head h3 { margin: 0; color: var(--rb-gold); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; } .rb2-count { color: var(--rb-text-muted); font-size: 0.75rem; } .rb2-muted { color: var(--rb-text-muted); font-size: 0.85rem; } .rb2-chips { display: flex; flex-wrap: wrap; gap: var(--rb-space-2); align-items: center; } .rb2-chip { display: inline-flex; align-items: center; gap: var(--rb-space-1); background: var(--rb-bg-panel-raised); border: 1px solid var(--rb-border-strong); border-radius: 999px; padding: 2px var(--rb-space-2) 2px var(--rb-space-3); font-size: 0.82rem; } .rb2-chip em { color: var(--rb-gold); font-style: normal; font-size: 0.72rem; } .rb2-x { display: inline; } .rb2-x button { background: none; border: none; color: var(--rb-text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 2px; } .rb2-x button:hover { color: var(--rb-red-bright); } .rb2-addform { margin-top: var(--rb-space-2); } /* --- stratagems (reference list, per detachment) --- */ .rb2-strat-group { border: 1px solid var(--rb-border); border-radius: var(--rb-radius); margin-bottom: var(--rb-space-2); background: var(--rb-bg-panel); } .rb2-strat-group summary { cursor: pointer; padding: var(--rb-space-2) var(--rb-space-3); font-weight: 600; font-size: 0.85rem; color: var(--rb-gold); list-style: none; } .rb2-strat-group summary::-webkit-details-marker { display: none; } .rb2-strat-group summary:before { content: '▸ '; } .rb2-strat-group[open] summary:before { content: '▾ '; } .rb2-strat-list { list-style: none; margin: 0; padding: 0 var(--rb-space-3) var(--rb-space-2) var(--rb-space-6); display: flex; flex-direction: column; gap: 2px; } .rb2-strat-list li { font-size: 0.85rem; } /* --- unit rows --- */ .rb2-unit { display: flex; align-items: center; gap: var(--rb-space-2); background: var(--rb-bg-panel); border: 1px solid var(--rb-border); border-radius: var(--rb-radius); margin-bottom: var(--rb-space-1); padding-right: var(--rb-space-3); } .rb2-unit:hover { border-color: var(--rb-border-strong); } .rb2-unit.rb2-warlord { border-left: 3px solid var(--rb-gold); } .rb2-unit-open { flex: 1; display: flex; align-items: center; gap: var(--rb-space-2); flex-wrap: wrap; background: none; border: none; color: var(--rb-text); text-align: left; cursor: pointer; padding: var(--rb-space-3); font-size: 0.95rem; } .rb2-unit-open:hover .rb2-unit-name { color: var(--rb-gold-bright); } .rb2-star { color: var(--rb-gold-bright); } .rb2-unit-name { font-weight: 600; } .rb2-unit-sub { color: var(--rb-text-muted); font-size: 0.78rem; } .rb2-enh-chip { background: var(--rb-bg-panel-raised); border: 1px solid var(--rb-gold); color: var(--rb-gold-bright); border-radius: 999px; padding: 0 var(--rb-space-2); font-size: 0.72rem; } .rb2-unit-pts { color: var(--rb-gold-bright); font-weight: 700; font-variant-numeric: tabular-nums; } .rb2-empty { color: var(--rb-text-muted); padding: var(--rb-space-8); text-align: center; border: 1px dashed var(--rb-border-strong); border-radius: var(--rb-radius); } /* --- drawers (browser + config share the right slot) --- */ .rb2-drawer { width: 24rem; flex-shrink: 0; position: sticky; top: var(--rb-space-2); max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--rb-bg-panel); border: 1px solid var(--rb-border-strong); border-radius: var(--rb-radius); } .rb2-drawer-head, .rb2-config-head { display: flex; justify-content: space-between; align-items: center; padding: var(--rb-space-3) var(--rb-space-4); background: var(--rb-bg-panel-raised); border-bottom: 2px solid var(--rb-gold); position: sticky; top: 0; } .rb2-drawer-head h2, .rb2-config-head h2 { margin: 0; color: var(--rb-gold-bright); font-size: 1.1rem; } .rb2-drawer-close, .rb2-config-close { background: none; border: none; color: var(--rb-text-muted); font-size: 1.3rem; cursor: pointer; line-height: 1; } .rb2-drawer-close:hover, .rb2-config-close:hover { color: var(--rb-gold-bright); } .rb2-browser-filter { display: block; width: calc(100% - 2 * var(--rb-space-4)); margin: var(--rb-space-3) var(--rb-space-4); } .rb2-browser-body { padding: 0 var(--rb-space-3) var(--rb-space-3); } .rb2-browser-role h3 { color: var(--rb-gold); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; margin: var(--rb-space-3) var(--rb-space-1) var(--rb-space-1); } .rb2-browser-row { display: flex; align-items: center; gap: var(--rb-space-2); padding: var(--rb-space-1) var(--rb-space-2); border-radius: var(--rb-radius); } .rb2-browser-row:hover { background: var(--rb-bg-panel-raised); } .rb2-browser-name { flex: 1; font-size: 0.88rem; } .rb2-browser-pts { color: var(--rb-gold); font-size: 0.75rem; white-space: nowrap; } .rb2-browser-add { display: inline; } /* --- config drawer --- */ .rb2-config-link { font-size: 0.75rem; } .rb2-config-body { padding: var(--rb-space-4); } .rb2-field { margin-bottom: var(--rb-space-3); } .rb2-field > label { display: block; color: var(--rb-text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } .rb2-field > label em { color: var(--rb-gold); font-style: normal; } .rb2-field select { width: 100%; } .rb2-static { color: var(--rb-text); font-size: 0.9rem; } .rb2-is-warlord { color: var(--rb-gold-bright); } .rb2-wargear-grp { border-top: 1px solid var(--rb-border); padding-top: var(--rb-space-3); margin-top: var(--rb-space-3); } .rb2-wargear-model { color: var(--rb-gold-bright); font-weight: 700; font-size: 0.85rem; margin-bottom: var(--rb-space-2); } .rb2-enh-field { border-top: 1px solid var(--rb-border); padding-top: var(--rb-space-3); } .rb2-enh-taken { display: flex; justify-content: space-between; align-items: center; background: var(--rb-bg); border: 1px solid var(--rb-gold); border-radius: var(--rb-radius); padding: var(--rb-space-1) var(--rb-space-3); font-size: 0.85rem; } .rb2-enh-taken em { color: var(--rb-gold); font-style: normal; } .rb2-config-remove { margin-top: var(--rb-space-4); } /* --- roster list page --- */ .rb2-new { max-width: 46rem; } .rb2-newform { display: flex; gap: var(--rb-space-3); flex-wrap: wrap; align-items: center; } .rb2-roster-list { margin-top: var(--rb-space-6); max-width: 52rem; } .rb2-roster-card { display: flex; justify-content: space-between; align-items: center; padding: var(--rb-space-4); background: var(--rb-bg-panel); border: 1px solid var(--rb-border); border-radius: var(--rb-radius); margin-bottom: var(--rb-space-3); } .rb2-roster-card a { color: var(--rb-gold-bright); font-weight: 700; font-size: 1.05rem; } @media (max-width: 900px) { .rb2-stage { flex-direction: column; } .rb2-drawer { width: 100%; position: static; max-height: none; } }