65d06f1754
The Build Ledger now uses a two-column grid: the builder UI stays on the left, and a new sticky CharacterSummary panel on the right aggregates the whole character at a glance — house, level, total XP, skill/intel point pools (with POI bonus broken out), per-spec levels with cumulative XP and perks unlocked, current faction tier and progress to next, skill allocations grouped by class, and the six most recent perk unlocks across character + specs. The previous separate "Skill Summary" panel is subsumed by the sidebar. Wrap width grows from 1240px to 1560px. Below 1180px the layout collapses to one column and the summary becomes non-sticky. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
611 lines
14 KiB
CSS
611 lines
14 KiB
CSS
:root {
|
|
/* Neutral surface palette (shared across houses) */
|
|
--bg: #1a1410;
|
|
--bg-2: #221a14;
|
|
--panel: #2b2018;
|
|
--panel-2: #352720;
|
|
--line: #4a3628;
|
|
--line-soft: #3a2a1f;
|
|
--ink: #f4e9d8;
|
|
--ink-dim: #c9b89c;
|
|
--ink-muted: #8a7560;
|
|
|
|
/* Default accents — neutral sand/spice (Dune base). House themes below
|
|
override these. */
|
|
--sand: #e6c98a;
|
|
--sand-2: #d4a85a;
|
|
--ember: #c8643a;
|
|
--spice: #e08a3c;
|
|
--green: #8fb87a;
|
|
|
|
/* House identity colors — used on the house-pick cards even when the
|
|
opposing house's theme is active. */
|
|
--atreides: #6ec06a; /* forest green */
|
|
--harkonnen: #e08a3c; /* blood orange */
|
|
|
|
--shadow: 0 1px 0 rgba(255, 255, 255, 0.04),
|
|
0 12px 32px -16px rgba(0, 0, 0, 0.6);
|
|
|
|
--bg-gradient-a: rgba(224, 138, 60, 0.10);
|
|
--bg-gradient-b: rgba(212, 168, 90, 0.06);
|
|
}
|
|
|
|
/* ---------- House Atreides theme: green & black ---------- */
|
|
body[data-house='atreides'] {
|
|
--bg: #0f140f;
|
|
--bg-2: #161d15;
|
|
--panel: #1d271c;
|
|
--panel-2: #243023;
|
|
--line: #2f4a2c;
|
|
--line-soft: #243a22;
|
|
|
|
--sand: #9bd996; /* leaf green — headings, highlights */
|
|
--sand-2: #6ec06a; /* deeper green — borders / active */
|
|
--ember: #1d3a1d; /* near-black green — gradient start */
|
|
--spice: #4f9c4d; /* forest green — primary accent */
|
|
--green: #b8e8a8; /* lighter green — "good" status */
|
|
|
|
--bg-gradient-a: rgba(110, 192, 106, 0.10);
|
|
--bg-gradient-b: rgba(60, 110, 56, 0.08);
|
|
}
|
|
|
|
/* ---------- House Harkonnen theme: blue & orange ---------- */
|
|
body[data-house='harkonnen'] {
|
|
--bg: #10131a;
|
|
--bg-2: #161a23;
|
|
--panel: #1c2230;
|
|
--panel-2: #232a3a;
|
|
--line: #3a4b6a;
|
|
--line-soft: #2a3850;
|
|
|
|
--sand: #f0a460; /* warm orange — headings, highlights */
|
|
--sand-2: #5a9be0; /* steel blue — borders / active */
|
|
--ember: #2b5a8a; /* deep blue — gradient start */
|
|
--spice: #e08a3c; /* blood orange — primary accent */
|
|
--green: #9bd996; /* keep green for "good" status */
|
|
|
|
--bg-gradient-a: rgba(224, 138, 60, 0.10);
|
|
--bg-gradient-b: rgba(74, 134, 197, 0.10);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
}
|
|
body {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
background:
|
|
radial-gradient(1200px 600px at 80% -10%, var(--bg-gradient-a), transparent 60%),
|
|
radial-gradient(900px 500px at -10% 110%, var(--bg-gradient-b), transparent 60%),
|
|
var(--bg);
|
|
min-height: 100vh;
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
a { color: var(--sand); }
|
|
|
|
.wrap {
|
|
max-width: 1560px;
|
|
margin: 0 auto;
|
|
padding: 48px 28px 96px;
|
|
}
|
|
|
|
.layout {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 400px;
|
|
gap: 28px;
|
|
align-items: start;
|
|
}
|
|
.builder {
|
|
min-width: 0; /* prevents grid from blowing out on long content */
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.summary {
|
|
position: static !important;
|
|
max-height: none !important;
|
|
}
|
|
}
|
|
header.hero {
|
|
margin-bottom: 32px;
|
|
}
|
|
.eyebrow {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
color: var(--sand-2);
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.eyebrow::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, var(--line) 0%, transparent 100%);
|
|
}
|
|
h1 {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-weight: 500;
|
|
font-size: clamp(36px, 5vw, 56px);
|
|
line-height: 1;
|
|
margin: 0 0 14px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
h1 em {
|
|
font-style: italic;
|
|
color: var(--sand);
|
|
font-weight: 500;
|
|
}
|
|
.lede {
|
|
color: var(--ink-dim);
|
|
max-width: 640px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.panel {
|
|
background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 4px;
|
|
padding: 22px 26px;
|
|
margin-bottom: 22px;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.panel-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 18px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px dashed var(--line-soft);
|
|
}
|
|
.panel-head h2 {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-weight: 500;
|
|
font-size: 26px;
|
|
margin: 0;
|
|
letter-spacing: 0.01em;
|
|
}
|
|
.panel-head .sub {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.row-grid {
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
.card {
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 4px;
|
|
padding: 18px 20px;
|
|
position: relative;
|
|
}
|
|
.card h3 {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
margin: 0 0 12px;
|
|
}
|
|
.card .sym {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
letter-spacing: 0.2em;
|
|
color: var(--ink-muted);
|
|
text-transform: uppercase;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.field label {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-muted);
|
|
}
|
|
.field input[type='number'],
|
|
.field select {
|
|
background: var(--bg);
|
|
border: 1px solid var(--line-soft);
|
|
color: var(--ink);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 15px;
|
|
padding: 8px 12px;
|
|
border-radius: 3px;
|
|
width: 100%;
|
|
}
|
|
.field input[type='number']:focus,
|
|
.field select:focus {
|
|
outline: none;
|
|
border-color: var(--sand-2);
|
|
background: #1f1812;
|
|
}
|
|
input[type='number']::-webkit-inner-spin-button,
|
|
input[type='number']::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
input[type='number'] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
.row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.row.single {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.progress {
|
|
margin-top: 10px;
|
|
height: 4px;
|
|
background: var(--bg);
|
|
border-radius: 999px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.progress::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
width: var(--pct, 0%);
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--ember) 0%,
|
|
var(--spice) 60%,
|
|
var(--sand) 100%
|
|
);
|
|
transition: width 0.25s ease;
|
|
}
|
|
.progress-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
color: var(--ink-muted);
|
|
margin-top: 6px;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.house-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 14px;
|
|
}
|
|
.house-pick {
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 4px;
|
|
background: var(--bg-2);
|
|
padding: 18px 22px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, background 0.15s, transform 0.15s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.house-pick:hover {
|
|
border-color: var(--line);
|
|
}
|
|
.house-pick.active {
|
|
background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
|
|
border-color: var(--sand-2);
|
|
}
|
|
.house-pick.active.atreides { border-color: var(--atreides); }
|
|
.house-pick.active.harkonnen { border-color: var(--harkonnen); }
|
|
.house-pick h3 {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 24px;
|
|
margin: 0;
|
|
font-weight: 500;
|
|
}
|
|
.house-pick.atreides h3 { color: var(--atreides); }
|
|
.house-pick.harkonnen h3 { color: var(--harkonnen); }
|
|
.house-pick .meta {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-muted);
|
|
}
|
|
|
|
.class-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.class-pick {
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 4px;
|
|
background: var(--bg-2);
|
|
padding: 14px 12px;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-dim);
|
|
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
|
}
|
|
.class-pick:hover {
|
|
color: var(--sand);
|
|
border-color: var(--line);
|
|
}
|
|
.class-pick.active {
|
|
color: var(--sand);
|
|
border-color: var(--sand-2);
|
|
background: rgba(224, 138, 60, 0.06);
|
|
}
|
|
|
|
/* Buttons */
|
|
button {
|
|
background: transparent;
|
|
border: 1px solid var(--line);
|
|
color: var(--ink-dim);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
padding: 8px 16px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: border-color 0.15s, color 0.15s, background 0.15s;
|
|
}
|
|
button:hover {
|
|
border-color: var(--sand-2);
|
|
color: var(--sand);
|
|
background: rgba(224, 138, 60, 0.06);
|
|
}
|
|
button.primary {
|
|
background: var(--spice);
|
|
color: #1f1812;
|
|
border-color: var(--spice);
|
|
font-weight: 600;
|
|
}
|
|
button.primary:hover {
|
|
background: var(--sand);
|
|
border-color: var(--sand);
|
|
}
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.totals {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
background: var(--bg-2);
|
|
margin-bottom: 22px;
|
|
}
|
|
.total {
|
|
padding: 20px 22px;
|
|
border-right: 1px solid var(--line-soft);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
|
|
}
|
|
.total:last-child { border-right: none; }
|
|
.total .lbl {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10.5px;
|
|
letter-spacing: 0.2em;
|
|
text-transform: uppercase;
|
|
color: var(--ink-muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
.total .val {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-weight: 500;
|
|
font-size: 36px;
|
|
line-height: 1;
|
|
color: var(--sand);
|
|
}
|
|
.total .val .unit {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--ink-muted);
|
|
letter-spacing: 0.15em;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
/* Share bar */
|
|
.share-bar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
background: rgba(26, 20, 16, 0.92);
|
|
backdrop-filter: blur(8px);
|
|
border-bottom: 1px solid var(--line-soft);
|
|
padding: 12px 0;
|
|
margin: -48px 0 32px;
|
|
}
|
|
.share-inner {
|
|
max-width: 1560px;
|
|
margin: 0 auto;
|
|
padding: 0 28px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.share-inner .grow { flex: 1; }
|
|
.share-link {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
color: var(--sand);
|
|
background: var(--bg-2);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 3px;
|
|
padding: 6px 10px;
|
|
user-select: all;
|
|
word-break: break-all;
|
|
}
|
|
.toast {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
color: var(--green);
|
|
}
|
|
|
|
/* Skill tree */
|
|
.tree-wrap {
|
|
position: relative;
|
|
background: var(--bg);
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 4px;
|
|
padding: 24px;
|
|
overflow: auto;
|
|
min-height: 520px;
|
|
}
|
|
.tree-grid {
|
|
position: relative;
|
|
display: grid;
|
|
gap: 12px;
|
|
margin: 0 auto;
|
|
}
|
|
.tree-cell {
|
|
width: 96px;
|
|
height: 96px;
|
|
position: relative;
|
|
}
|
|
.tree-node {
|
|
width: 96px;
|
|
height: 96px;
|
|
border: 2px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--bg-2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: border-color 0.15s, background 0.15s, transform 0.1s;
|
|
}
|
|
.tree-node:hover { border-color: var(--sand-2); }
|
|
.tree-node.allocated { border-color: var(--spice); background: rgba(224, 138, 60, 0.1); }
|
|
.tree-node.maxed { border-color: var(--sand); background: rgba(230, 201, 138, 0.14); }
|
|
.tree-node.kind-ability { border-style: solid; }
|
|
.tree-node.kind-attribute { border-style: dashed; }
|
|
.tree-node.kind-perk { border-radius: 50%; }
|
|
.tree-node.kind-spice { border-style: double; }
|
|
.tree-node .label {
|
|
position: absolute;
|
|
bottom: -22px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 9.5px;
|
|
letter-spacing: 0.1em;
|
|
color: var(--ink-dim);
|
|
text-align: center;
|
|
width: 130px;
|
|
pointer-events: none;
|
|
text-shadow: 0 0 4px var(--bg);
|
|
}
|
|
.tree-node .pts {
|
|
position: absolute;
|
|
bottom: 4px;
|
|
right: 4px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
padding: 1px 5px;
|
|
border-radius: 2px;
|
|
color: var(--sand);
|
|
}
|
|
.tree-node .name {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 1.1;
|
|
padding: 4px;
|
|
color: var(--ink-dim);
|
|
}
|
|
.tree-edges {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
.tree-node-wrap { position: relative; z-index: 1; }
|
|
|
|
/* Faction tiers list */
|
|
.tier-list {
|
|
display: grid;
|
|
gap: 6px;
|
|
margin-top: 10px;
|
|
}
|
|
.tier-row {
|
|
display: grid;
|
|
grid-template-columns: 36px 1fr auto auto;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 8px 10px;
|
|
border: 1px solid var(--line-soft);
|
|
border-radius: 3px;
|
|
background: var(--bg-2);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 12px;
|
|
color: var(--ink-dim);
|
|
}
|
|
.tier-row.reached { border-color: var(--sand-2); color: var(--sand); }
|
|
.tier-row.current { background: rgba(224, 138, 60, 0.08); border-color: var(--spice); }
|
|
.tier-row .num {
|
|
font-family: 'Cormorant Garamond', serif;
|
|
font-size: 18px;
|
|
color: var(--sand);
|
|
}
|
|
|
|
.footer-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--ink-muted);
|
|
letter-spacing: 0.1em;
|
|
border-top: 1px solid var(--line-soft);
|
|
padding-top: 18px;
|
|
margin-top: 40px;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.wrap { padding: 32px 18px 64px; }
|
|
.house-grid { grid-template-columns: 1fr; }
|
|
.totals { grid-template-columns: 1fr; }
|
|
.total { border-right: none; border-bottom: 1px solid var(--line-soft); }
|
|
.total:last-child { border-bottom: none; }
|
|
}
|