/* =================================================================== D&D Legacy — NEW UI design system (built from scratch, D&D Beyond as the blueprint). Bespoke components + hand-authored CSS; NO MudBlazor look. All classes are prefixed `dd-` so they never collide with the legacy `app.css` while we migrate screen by screen. Two ingredients: • DDB's dark, squared, condensed-uppercase chrome. • Our own fantasy identity: warm ember + gold hairlines over the fantasy backdrop (drawn in app.css on ). =================================================================== */ :root { /* ---- Surfaces (LIGHT content — DDB is light; only the chrome/header is dark) ---- */ --dd-bg: #E7E8EB; /* light page */ --dd-panel: #FFFFFF; /* white card / panel */ --dd-panel-2: #F3F4F6; /* raised: inputs, hovers, inner tiles */ --dd-panel-3: #E9EBEE; /* highest raise */ --dd-chrome: #17181D; /* dark chrome: top nav / headers only */ --dd-on-chrome: #E8E9EB; /* light text on dark chrome */ --dd-on-chrome-dim: #A9ABB1; /* ---- Lines ---- */ --dd-line: #DCDEE3; --dd-line-soft: #EAEBEE; --dd-line-gold: rgba(150,120,60,.35); /* subtle gold hairline */ /* ---- Ink (dark text on light) ---- */ --dd-ink: #1F2126; --dd-ink-dim: #5C5F67; --dd-ink-faint: #93969E; --dd-ink-inv: #FFFFFF; /* ---- Accent: D&D red ---- */ --dd-red: #C42B2B; /* interactive red (deeper for light bg) */ --dd-red-hi: #D93A38; /* hover */ --dd-red-deep: #9E1D1B; --dd-red-ink: #C0242A; /* red text on light */ --dd-red-wash: rgba(196,43,43,.08); /* ---- Gold (frames, eyebrows, flourishes) ---- */ --dd-gold: #9A7A3C; --dd-gold-dim: #B79A5E; /* ---- Semantic ---- */ --dd-good: #2F9E52; --dd-warn: #C77C1E; --dd-bad: #C0392B; /* ---- Shape ---- */ --dd-r: 4px; /* DDB is squarish */ --dd-r-lg: 8px; --dd-r-pill: 999px; /* ---- Elevation (light) ---- */ --dd-sh-1: 0 1px 2px rgba(20,22,28,.08); --dd-sh-2: 0 4px 16px rgba(20,22,28,.10); --dd-sh-3: 0 16px 42px rgba(20,22,28,.20); /* ---- Type ---- */ --dd-f-display: 'Roboto Condensed', 'Oswald', system-ui, sans-serif; --dd-f-serif: 'Vollkorn', 'Georgia', serif; --dd-f-body: 'Inter', 'Roboto', system-ui, sans-serif; } /* ===================== Primitives ===================== */ .dd-scope { color: var(--dd-ink); font-family: var(--dd-f-body); } /* Eyebrow / section label — the DDB uppercase condensed micro-label */ .dd-eyebrow { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--dd-red-ink); } .dd-eyebrow--gold { color: var(--dd-gold); } .dd-eyebrow--dim { color: var(--dd-ink-faint); } /* Headings */ .dd-h1 { font-family: var(--dd-f-serif); font-weight: 800; font-size: 2.1rem; line-height: 1.08; letter-spacing: .01em; } .dd-h2 { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: 1.35rem; } .dd-h3 { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 1rem; color: var(--dd-ink); } .dd-muted { color: var(--dd-ink-dim); } .dd-faint { color: var(--dd-ink-faint); } /* Divider with a faint gold center (fantasy flourish) */ .dd-rule { height: 1px; background: var(--dd-line); border: 0; margin: 14px 0; } .dd-rule--gold { background: linear-gradient(90deg, transparent, var(--dd-line-gold) 20%, var(--dd-line-gold) 80%, transparent); } /* ===================== Buttons ===================== */ .dd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .86rem; line-height: 1; padding: 11px 18px; border-radius: var(--dd-r); border: 1px solid transparent; cursor: pointer; user-select: none; transition: background .12s ease, border-color .12s ease, transform .06s ease, box-shadow .12s ease; white-space: nowrap; } .dd-btn:active { transform: translateY(1px); } .dd-btn:disabled, .dd-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .dd-btn .dd-i { font-size: 1.1em; line-height: 0; } .dd-btn--primary { background: linear-gradient(180deg, var(--dd-red) 0%, #C9241F 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--dd-sh-1); } .dd-btn--primary:hover { background: linear-gradient(180deg, var(--dd-red-hi) 0%, var(--dd-red) 100%); } .dd-btn--secondary { background: var(--dd-panel-2); color: var(--dd-ink); border-color: var(--dd-line); } .dd-btn--secondary:hover { background: var(--dd-panel-3); border-color: #C3C4C8; } .dd-btn--ghost { background: transparent; color: var(--dd-ink-dim); border-color: transparent; } .dd-btn--ghost:hover { background: rgba(255,255,255,.06); color: var(--dd-ink); } .dd-btn--danger { background: transparent; color: var(--dd-red-ink); border-color: rgba(224,85,74,.5); } .dd-btn--danger:hover { background: var(--dd-red-wash); border-color: var(--dd-bad); } .dd-btn--sm { padding: 7px 12px; font-size: .78rem; } .dd-btn--lg { padding: 14px 24px; font-size: .95rem; } .dd-btn--block { width: 100%; } /* Icon-only button */ .dd-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--dd-r); background: transparent; border: 1px solid transparent; color: var(--dd-ink-dim); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .dd-iconbtn:hover { background: rgba(255,255,255,.06); color: var(--dd-ink); } /* ===================== Panels / cards ===================== */ .dd-panel { background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); box-shadow: var(--dd-sh-2); } .dd-panel__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--dd-line); } .dd-panel__title { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .9rem; } .dd-panel__body { padding: 16px; } /* Card with a colored top accent (character/theme color) */ .dd-card { background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); overflow: hidden; box-shadow: var(--dd-sh-2); position: relative; } .dd-card__accent { height: 4px; background: var(--dd-red); } .dd-card__body { padding: 16px; } /* Framed panel (gold hairline inset) — for hero / fantasy emphasis */ .dd-framed { position: relative; } .dd-framed::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--dd-line-gold); border-radius: calc(var(--dd-r-lg) - 3px); pointer-events: none; } /* ===================== Inputs ===================== */ .dd-field { display: flex; flex-direction: column; gap: 6px; } .dd-label { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 700; color: var(--dd-ink-dim); } .dd-input, .dd-select, .dd-textarea { background: var(--dd-panel-2); border: 1px solid var(--dd-line); border-radius: var(--dd-r); color: var(--dd-ink); font-family: var(--dd-f-body); font-size: .95rem; padding: 10px 12px; outline: none; transition: border-color .12s ease, box-shadow .12s ease; width: 100%; } .dd-input::placeholder, .dd-textarea::placeholder { color: var(--dd-ink-faint); } .dd-input:focus, .dd-select:focus, .dd-textarea:focus { border-color: var(--dd-red); box-shadow: 0 0 0 3px var(--dd-red-wash); } .dd-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dd-ink-dim) 50%), linear-gradient(135deg, var(--dd-ink-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } .dd-textarea { resize: vertical; min-height: 84px; } /* Number stepper */ .dd-number { display: inline-flex; align-items: stretch; border: 1px solid var(--dd-line); border-radius: var(--dd-r); overflow: hidden; background: var(--dd-panel-2); } .dd-number__btn { width: 34px; border: 0; background: transparent; color: var(--dd-ink-dim); font-size: 1.1rem; cursor: pointer; } .dd-number__btn:hover { background: rgba(255,255,255,.06); color: var(--dd-ink); } .dd-number__val { width: 52px; text-align: center; background: transparent; border: 0; color: var(--dd-ink); font-family: var(--dd-f-display); font-weight: 700; font-size: 1rem; outline: none; border-left: 1px solid var(--dd-line); border-right: 1px solid var(--dd-line); } /* Segmented toggle (method pickers etc.) */ .dd-seg { display: inline-flex; background: var(--dd-panel-2); border: 1px solid var(--dd-line); border-radius: var(--dd-r); padding: 3px; gap: 3px; } .dd-seg__opt { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: .78rem; padding: 7px 14px; border-radius: 3px; color: var(--dd-ink-dim); cursor: pointer; border: 0; background: transparent; transition: .12s; } .dd-seg__opt:hover { color: var(--dd-ink); } .dd-seg__opt.is-active { background: var(--dd-red); color: #fff; } /* Switch */ .dd-switch { position: relative; width: 44px; height: 24px; border-radius: var(--dd-r-pill); background: var(--dd-panel-3); border: 1px solid var(--dd-line); cursor: pointer; transition: background .15s; } .dd-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--dd-ink-dim); transition: transform .15s, background .15s; } .dd-switch.is-on { background: var(--dd-red); border-color: var(--dd-red); } .dd-switch.is-on::after { transform: translateX(20px); background: #fff; } /* Checkbox */ .dd-check { width: 18px; height: 18px; border-radius: 3px; border: 1px solid var(--dd-line); background: var(--dd-panel-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: transparent; } .dd-check.is-on { background: var(--dd-red); border-color: var(--dd-red); color: #fff; } /* ===================== Chips / badges / tags ===================== */ .dd-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--dd-r); background: var(--dd-panel-2); border: 1px solid var(--dd-line); color: var(--dd-ink); font-size: .8rem; font-weight: 600; } .dd-chip--up { background: rgba(86,178,108,.14); border-color: rgba(86,178,108,.4); color: #7FD093; } .dd-chip--dn { background: rgba(224,85,74,.12); border-color: rgba(224,85,74,.4); color: #EE8A82; } .dd-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .66rem; padding: 3px 8px; border-radius: 3px; background: var(--dd-chrome); color: #fff; border: 1px solid var(--dd-line); } .dd-badge--red { background: var(--dd-red-deep); border-color: var(--dd-red); } .dd-tag { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .06em; font-size: .62rem; font-weight: 700; color: var(--dd-gold); border: 1px solid var(--dd-line-gold); padding: 2px 7px; border-radius: 3px; } /* ===================== Stat box (bordered number tile) ===================== */ .dd-stat { background: var(--dd-panel-2); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: 12px 10px; text-align: center; } .dd-stat__num { font-family: var(--dd-f-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--dd-ink); } .dd-stat__cap { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .1em; font-size: .6rem; color: var(--dd-ink-dim); margin-top: 6px; } .dd-stat--accent { border-color: var(--dd-red); } .dd-stat--accent .dd-stat__num { color: var(--dd-red-ink); } /* ===================== Listing rows (browse lists) ===================== */ .dd-list { display: flex; flex-direction: column; } .dd-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid transparent; border-bottom-color: var(--dd-line-soft); border-left: 3px solid transparent; cursor: pointer; transition: background .1s, border-color .1s; } .dd-row:hover { background: var(--dd-panel-2); } .dd-row.is-active { background: var(--dd-red-wash); border-left-color: var(--dd-red); } .dd-row__title { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .02em; font-weight: 700; } .dd-row__sub { font-size: .74rem; color: var(--dd-ink-dim); } /* ===================== Data table ===================== */ .dd-table { width: 100%; border-collapse: collapse; background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); overflow: hidden; } .dd-table thead th { text-align: left; font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .74rem; color: var(--dd-ink-dim); background: var(--dd-chrome); padding: 10px 14px; border-bottom: 1px solid var(--dd-line); } .dd-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--dd-line-soft); font-size: .9rem; } .dd-table tbody tr:hover { background: var(--dd-panel-2); } .dd-table tbody tr:last-child td { border-bottom: 0; } /* ===================== Tabs ===================== */ .dd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--dd-line); } .dd-tab { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .84rem; padding: 10px 16px; color: var(--dd-ink-dim); cursor: pointer; border: 0; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s; } .dd-tab:hover { color: var(--dd-ink); } .dd-tab.is-active { color: var(--dd-red-ink); border-bottom-color: var(--dd-red); } /* ===================== Left step rail (builder nav) ===================== */ .dd-rail { display: flex; flex-direction: column; gap: 4px; background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); padding: 8px; } .dd-rail__item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--dd-r); border-left: 3px solid transparent; cursor: pointer; transition: background .1s; } .dd-rail__item:hover { background: var(--dd-panel-2); } .dd-rail__item.is-active { background: var(--dd-red-wash); border-left-color: var(--dd-red); } .dd-rail__ico { width: 30px; height: 30px; border-radius: var(--dd-r); display: inline-flex; align-items: center; justify-content: center; background: var(--dd-panel-3); color: var(--dd-ink-dim); flex: 0 0 auto; } .dd-rail__item.is-active .dd-rail__ico { background: var(--dd-red); color: #fff; } .dd-rail__item.is-done .dd-rail__ico { background: rgba(86,178,108,.18); color: #7FD093; } .dd-rail__label { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .03em; font-weight: 700; font-size: .82rem; line-height: 1.1; } .dd-rail__sub { font-size: .66rem; color: var(--dd-ink-dim); } /* ===================== Alert / callout ===================== */ .dd-alert { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--dd-r); border: 1px solid var(--dd-line); background: var(--dd-panel-2); font-size: .88rem; } .dd-alert--warn { border-color: rgba(215,154,60,.5); background: rgba(215,154,60,.1); color: #E6BE72; } .dd-alert--danger { border-color: rgba(224,85,74,.5); background: rgba(224,85,74,.1); color: #EE9089; } /* ===================== Styleguide layout helpers (page only) ===================== */ .sg-wrap { max-width: 1100px; margin: 0 auto; padding: 32px 24px 96px; } .sg-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; } .sg-brand { width: 40px; height: 40px; border-radius: var(--dd-r); background: linear-gradient(180deg, var(--dd-red), #C9241F); display: flex; align-items: center; justify-content: center; box-shadow: var(--dd-sh-1); } .sg-sec { margin-top: 34px; } .sg-sec > .dd-eyebrow { display: block; margin-bottom: 12px; } .sg-grid { display: grid; gap: 14px; } .sg-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .sg-swatch { border-radius: var(--dd-r); height: 64px; border: 1px solid var(--dd-line); display: flex; align-items: flex-end; padding: 6px 8px; font-size: .66rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); font-family: var(--dd-f-display); letter-spacing: .04em; } .sg-cols-2 { grid-template-columns: repeat(2, 1fr); } .sg-cols-3 { grid-template-columns: repeat(3, 1fr); } .sg-cols-6 { grid-template-columns: repeat(6, 1fr); } @media (max-width: 720px) { .sg-cols-3, .sg-cols-6 { grid-template-columns: repeat(3, 1fr); } .sg-cols-2 { grid-template-columns: 1fr; } } /* =================================================================== Reusable modal (dd- dialog; replaces MudBlazor's dialog look) =================================================================== */ .dd-overlay { position: fixed; inset: 0; background: rgba(6,6,9,.62); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; } .dd-modal { width: 100%; max-width: 400px; background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); box-shadow: var(--dd-sh-3); overflow: hidden; } .dd-modal__head { padding: 14px 18px; border-bottom: 1px solid var(--dd-line); font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .dd-modal__body { padding: 18px; color: var(--dd-ink-dim); line-height: 1.5; } .dd-modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--dd-line); } /* =================================================================== Screen: My Characters (built on the dd- system) =================================================================== */ .mych { max-width: 1160px; margin: 0 auto; padding: 10px 4px 48px; } .mych-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; } .mych-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; } .mych-card { display: flex; flex-direction: column; background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); overflow: hidden; cursor: pointer; box-shadow: var(--dd-sh-2); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .mych-card:hover { transform: translateY(-3px); box-shadow: var(--dd-sh-3); border-color: #C3C4C8; } .mych-portrait { position: relative; height: 124px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--dd-line); } .mych-portrait::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--dd-line-gold); border-radius: 4px; pointer-events: none; } .mych-mono { font-family: var(--dd-f-serif); font-weight: 800; font-size: 2.7rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.55); } .mych-lv { position: absolute; top: 10px; right: 10px; } .mych-body { padding: 12px 14px 10px; flex: 1 1 auto; min-width: 0; } .mych-name { font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.22rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mych-meta { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; color: var(--dd-ink-dim); margin-top: 3px; } .mych-foot { display: flex; align-items: center; gap: 3px; padding: 7px 8px; border-top: 1px solid var(--dd-line-soft); background: var(--dd-chrome); } .mych-foot .dd-iconbtn { width: 32px; height: 32px; } .mych-issue { display: inline-flex; align-items: center; gap: 4px; color: var(--dd-warn); font-size: .78rem; font-weight: 700; margin-right: auto; padding-left: 5px; } .mych-new { border: 2px dashed var(--dd-line); border-radius: var(--dd-r-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 222px; color: var(--dd-ink-dim); cursor: pointer; background: rgba(255,255,255,.015); transition: border-color .12s, color .12s, background .12s; } .mych-new:hover { border-color: var(--dd-red); color: var(--dd-red-ink); background: var(--dd-red-wash); } .mych-new-label { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; } .mych-empty { text-align: center; padding: 64px 20px; border: 1px dashed var(--dd-line); border-radius: var(--dd-r-lg); background: rgba(255,255,255,.02); } .mych-loading { height: 3px; background: linear-gradient(90deg, transparent, var(--dd-red), transparent); background-size: 40% 100%; border-radius: 2px; animation: mych-load 1.1s linear infinite; } @keyframes mych-load { 0% { background-position: -40% 0 } 100% { background-position: 140% 0 } } /* =================================================================== App shell — DDB top navigation bar (replaces MudBlazor chrome) =================================================================== */ .dd-shell { min-height: 100vh; } .dd-appbar { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 1200; display: flex; align-items: center; gap: 8px; padding: 0 18px; background: var(--dd-chrome); border-bottom: 1px solid #000; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 12px rgba(0,0,0,.4); } .dd-appbar__brand { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-right: 8px; } .dd-brand-logo { width: 30px; height: 30px; border-radius: 6px; background: linear-gradient(180deg, var(--dd-red), #C9241F); display: flex; align-items: center; justify-content: center; box-shadow: var(--dd-sh-1); } .dd-brand-name { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 1.12rem; color: #F2F2F3; } .dd-appbar__nav { display: flex; align-items: stretch; height: 100%; gap: 0; } .dd-navlink { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 15px; font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .82rem; color: var(--dd-ink-dim); border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; transition: color .12s, background .12s; } .dd-navlink:hover { color: var(--dd-ink); background: rgba(255,255,255,.03); } .dd-navlink.is-active { color: #fff; border-bottom-color: var(--dd-red); } .dd-navlink svg { opacity: .85; } .dd-appbar__spacer { flex: 1 1 auto; } .dd-appbar__right { display: flex; align-items: center; gap: 10px; } .dd-lang { display: inline-flex; background: var(--dd-panel-2); border: 1px solid var(--dd-line); border-radius: var(--dd-r); overflow: hidden; } .dd-lang button { padding: 5px 9px; background: transparent; border: 0; color: var(--dd-ink-dim); font-family: var(--dd-f-display); font-weight: 700; font-size: .72rem; letter-spacing: .05em; cursor: pointer; transition: background .12s, color .12s; } .dd-lang button:hover { color: var(--dd-ink); } .dd-lang button.is-active { background: var(--dd-red); color: #fff; } .dd-usr { display: flex; align-items: center; gap: 9px; padding: 5px 8px 5px 6px; border-radius: var(--dd-r); cursor: pointer; } .dd-usr:hover { background: rgba(255,255,255,.06); } .dd-usr__ava { width: 32px; height: 32px; border-radius: 6px; background: linear-gradient(180deg, var(--dd-red), #9E1D1B); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--dd-f-display); font-weight: 700; font-size: .82rem; } .dd-usr__name { font-size: .86rem; font-weight: 600; color: var(--dd-ink); } .dd-usr__chev { color: var(--dd-ink-faint); } .dd-menu-scrim { position: fixed; inset: 0; z-index: 1250; } .dd-menu { position: fixed; top: 54px; right: 16px; min-width: 200px; background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); box-shadow: var(--dd-sh-3); padding: 6px; z-index: 1260; } .dd-menu__label { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .07em; font-size: .6rem; color: var(--dd-ink-faint); padding: 7px 11px 3px; } .dd-menu__item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--dd-r); color: var(--dd-ink); cursor: pointer; font-size: .9rem; } .dd-menu__item:hover { background: var(--dd-panel-2); } .dd-menu__item.danger { color: var(--dd-red-ink); } .dd-menu__sep { height: 1px; background: var(--dd-line); margin: 5px 4px; } .dd-main { padding-top: 56px; } .dd-main__inner { max-width: 1240px; margin: 0 auto; padding: 24px 20px 56px; } @media (max-width: 760px) { .dd-navlink span.dd-navlabel { display: none; } .dd-usr__name { display: none; } .dd-brand-name { display: none; } } .dd-rail__check { margin-left: auto; color: #7FD093; display: inline-flex; } /* =================================================================== Screen: Builder shell (Create wizard) on the dd- system =================================================================== */ .bld { display: flex; flex-direction: column; gap: 16px; } .bld-topbar { position: sticky; top: 66px; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); box-shadow: var(--dd-sh-2); } .bld-ava { width: 46px; height: 46px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.4rem; color: #fff; border: 2px solid rgba(255,255,255,.25); box-shadow: var(--dd-sh-1); } .bld-id { flex: 1 1 auto; min-width: 0; } .bld-name { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--dd-line); color: var(--dd-ink); font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.3rem; padding: 2px 0 4px; outline: none; } .bld-name:focus { border-bottom-color: var(--dd-red); } .bld-name::placeholder { color: var(--dd-ink-faint); font-style: italic; } .bld-name.is-error { border-bottom-color: var(--dd-bad); } .bld-sum { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; color: var(--dd-ink-dim); margin-top: 5px; } .bld-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .bld-issue { display: inline-flex; align-items: center; gap: 4px; color: var(--dd-warn); font-weight: 700; font-size: .82rem; } .bld-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 16px; align-items: start; } .bld-grid.review { grid-template-columns: 240px minmax(0, 1fr); } @media (max-width: 1200px) { .bld-grid, .bld-grid.review { grid-template-columns: 210px minmax(0, 1fr); } .bld-side { grid-column: 1 / -1; } } @media (max-width: 760px) { .bld-grid, .bld-grid.review { grid-template-columns: 1fr; } } .bld-rail { position: sticky; top: 132px; } @media (max-width: 760px) { .bld-rail { position: static; } } .bld-main { background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); box-shadow: var(--dd-sh-2); padding: 20px 22px; min-width: 0; } .bld-main.flush { background: transparent; border: 0; box-shadow: none; padding: 0; } .bld-side { min-width: 0; } .bld-save { background: linear-gradient(180deg, var(--dd-good), #3E9256); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--dd-sh-1); } .bld-save:hover:not(:disabled) { background: linear-gradient(180deg, #64C180, var(--dd-good)); } /* =================================================================== Builder v2 — DDB structure: horizontal numbered tabs + single column (no left rail, no persistent side panel — matches D&D Beyond) =================================================================== */ .b2 { display: flex; flex-direction: column; } /* Top identity/actions strip */ .b2-top { position: sticky; top: 56px; z-index: 21; display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--dd-chrome); border: 1px solid #000; border-bottom: 0; border-radius: var(--dd-r-lg) var(--dd-r-lg) 0 0; } .b2-ava { width: 42px; height: 42px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.3rem; color: #fff; border: 2px solid rgba(255,255,255,.22); } .b2-id { flex: 1 1 auto; min-width: 0; } .b2-name { width: 100%; max-width: 420px; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.22); color: var(--dd-on-chrome); font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.2rem; padding: 2px 0 4px; outline: none; } .b2-name:focus { border-bottom-color: var(--dd-red); } .b2-name::placeholder { color: rgba(255,255,255,.4); font-style: italic; } .b2-name.is-error { border-bottom-color: var(--dd-bad); } .b2-sum { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; color: var(--dd-on-chrome-dim); margin-top: 4px; } .b2-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; } .b2-issue { display: inline-flex; align-items: center; gap: 4px; color: var(--dd-warn); font-weight: 700; font-size: .8rem; } /* Horizontal numbered section tabs */ .b2-tabs { position: sticky; top: 120px; z-index: 20; display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin; background: var(--dd-chrome); border: 1px solid #000; border-top: 0; padding: 0 6px; } .b2-tab { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 12px 14px; border: 0; background: transparent; cursor: pointer; color: var(--dd-ink-dim); font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: .8rem; border-bottom: 3px solid transparent; } .b2-tab { color: var(--dd-on-chrome-dim); } .b2-tab:hover { color: #fff; } .b2-tab.is-active { color: #fff; border-bottom-color: var(--dd-red); } .b2-tab__n { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; background: rgba(255,255,255,.1); color: var(--dd-on-chrome-dim); flex: 0 0 auto; } .b2-tab.is-active .b2-tab__n { background: var(--dd-red); color: #fff; } .b2-tab.is-done .b2-tab__n { background: #56B26C; color: #0d1a12; } .b2-tab__n svg { width: 12px; height: 12px; } /* Single-column content body */ .b2-body { background: var(--dd-panel); border: 1px solid var(--dd-line); border-top: 0; border-radius: 0 0 var(--dd-r-lg) var(--dd-r-lg); padding: 28px 24px 36px; } .b2-body.flush { background: transparent; border: 0; padding: 20px 0 0; } .b2-col { max-width: 720px; margin: 0 auto; } @media (max-width: 720px) { .b2-top { flex-wrap: wrap; } .b2-body { padding: 20px 14px 28px; } } /* ── Full-bleed builder: the header band (identity strip + section tabs) spans the full viewport width and sits flush under the app header; the content body re-centers below as a contained card. Scoped to the builder route via :has() so other pages keep the normal centered container. ── */ .dd-main__inner:has(.b2) { max-width: none; padding: 0; } .b2-top { border-radius: 0; border-left: 0; border-right: 0; padding-inline: max(20px, calc((100% - 1200px) / 2)); } .b2-tabs { border-left: 0; border-right: 0; padding-inline: max(14px, calc((100% - 1200px) / 2)); } .b2-body { max-width: min(1200px, calc(100% - 40px)); margin: 18px auto 44px; border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); } /* ── Settings/preferences form: labeled sections (DDB single-column form) ── */ .dd-form { max-width: 620px; margin: 0 auto; } .dd-set { padding: 18px 0; border-top: 1px solid var(--dd-line-soft); } .dd-set:first-child { border-top: 0; padding-top: 0; } .dd-set__t { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .92rem; color: var(--dd-ink); } .dd-set__d { font-size: .82rem; color: var(--dd-ink-dim); margin: 4px 0 12px; line-height: 1.45; } .dd-set__c { max-width: 340px; } .dd-check-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; cursor: pointer; } .dd-check-row .dd-check { margin-top: 1px; flex: 0 0 auto; } .dd-check-row__t { font-weight: 600; font-size: .9rem; color: var(--dd-ink); } .dd-check-row__d { font-size: .78rem; color: var(--dd-ink-dim); line-height: 1.4; margin-top: 1px; } /* =================================================================== Step content: Class selection (DDB pattern) — reusable for Race too =================================================================== */ .step-h { margin-bottom: 18px; } .step-h__t { font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.5rem; } .step-h__d { color: var(--dd-ink-dim); font-size: .9rem; margin-top: 2px; } .pick-search { position: relative; margin-bottom: 14px; } .pick-search input { padding-left: 38px; } .pick-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--dd-ink-faint); } /* Selection card (a class/race option) */ .pick { display: flex; align-items: flex-start; gap: 13px; padding: 13px 15px; margin-bottom: 10px; border: 1px solid var(--dd-line); border-left: 3px solid transparent; border-radius: var(--dd-r-lg); background: var(--dd-panel-2); cursor: pointer; transition: border-color .12s, background .12s, transform .1s; } .pick:hover { border-color: #C3C4C8; border-left-color: var(--dd-red); background: var(--dd-panel-3); transform: translateY(-1px); } .pick__badge { width: 42px; height: 42px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--dd-f-display); font-weight: 800; font-size: 1.1rem; } .pick__body { flex: 1 1 auto; min-width: 0; } .pick__name { font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.12rem; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .pick__meta { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; color: var(--dd-ink-dim); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .pick__meta .sep { opacity: .4; } .pick__desc { font-size: .85rem; color: var(--dd-ink-dim); margin-top: 7px; line-height: 1.45; } .pick__caster { color: var(--dd-gold); display: inline-flex; } /* Prestige-class eligibility (Sword & Fist entry requirements) */ .pick--locked { opacity: .82; } .pick__elig { align-self: center; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .04em; font-size: .66rem; font-weight: 700; white-space: nowrap; } .pick__elig--ok { color: #2E8B57; background: rgba(46,139,87,.12); border: 1px solid rgba(46,139,87,.35); } .pick__elig--no { color: #8A5A12; background: rgba(215,154,60,.12); border: 1px solid rgba(215,154,60,.4); } .dd-alert--ok { border-color: rgba(46,139,87,.45); background: rgba(46,139,87,.1); color: #2E8B57; } /* Selected class block (with features) */ .csel { border: 1px solid var(--dd-line); border-radius: var(--dd-r-lg); background: var(--dd-panel-2); margin-bottom: 16px; overflow: hidden; } .csel__head { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border-bottom: 1px solid var(--dd-line); } .csel__badge { width: 44px; height: 44px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--dd-f-display); font-weight: 800; font-size: 1.2rem; } .csel__id { flex: 1 1 auto; min-width: 0; } .csel__name { font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .csel__meta { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; color: var(--dd-ink-dim); margin-top: 2px; display: flex; gap: 6px; flex-wrap: wrap; } .csel__lvl { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .csel__lvl-lbl { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-size: .66rem; color: var(--dd-ink-dim); } .csel__x { flex: 0 0 auto; } .csel__x .dd-iconbtn:hover { color: var(--dd-red-ink); } .csel-sec { padding: 12px 15px; border-bottom: 1px solid var(--dd-line-soft); } .csel-sec:last-child { border-bottom: 0; } .csel-sec__t { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; font-weight: 700; color: var(--dd-red-ink); margin-bottom: 8px; } .feat-row { border-top: 1px solid var(--dd-line-soft); } .feat-row:first-child { border-top: 0; } .feat-row__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; cursor: pointer; } .feat-row__h:hover .feat-row__n { color: #fff; } .feat-row__n { font-weight: 600; font-size: .9rem; color: var(--dd-ink); } .feat-row__chev { color: var(--dd-ink-faint); transition: transform .15s; } .feat-row.is-open .feat-row__chev { transform: rotate(180deg); } .feat-row__d { padding: 0 4px 12px; font-size: .85rem; color: var(--dd-ink-dim); line-height: 1.5; } .cls-add { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 2px dashed var(--dd-line); border-radius: var(--dd-r-lg); background: transparent; color: var(--dd-ink-dim); cursor: pointer; font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: .82rem; transition: .12s; } .cls-add:hover { border-color: var(--dd-red); color: var(--dd-red-ink); background: var(--dd-red-wash); } /* Minimal pick card (unified) — right-side controls for the selected state */ .pick__ctrl { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .pick--sel { border-left-color: var(--dd-red); cursor: default; } .pick--sel:hover { transform: none; background: var(--dd-panel-2); border-color: var(--dd-line); border-left-color: var(--dd-red); } .pick__open { cursor: pointer; } .pick .dd-tag { cursor: pointer; } /* Class-detail modal */ .dd-modal--lg { max-width: 580px; } .dd-modal__scroll { max-height: 62vh; overflow-y: auto; } .cdet-head { display: flex; align-items: center; gap: 13px; padding: 16px 18px; color: #fff; } .cdet-head__badge { width: 48px; height: 48px; border-radius: 10px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.26); border: 2px solid rgba(255,255,255,.4); font-family: var(--dd-f-display); font-weight: 800; font-size: 1.25rem; } .cdet-head__id { flex: 1 1 auto; min-width: 0; } .cdet-head__name { font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.45rem; line-height: 1.05; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .cdet-head__sub { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; } .cdet-cap { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; color: rgba(255,255,255,.9); } .cdet-x { flex: 0 0 auto; color: #fff; opacity: .85; cursor: pointer; display: inline-flex; } .cdet-x:hover { opacity: 1; } .cdet-body { padding: 18px 20px; } .cdet-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 10px; margin-bottom: 4px; } /* =================================================================== Rules Reference — dd- redesign (list + full details view) =================================================================== */ .rules-head { display: flex; align-items: center; gap: 13px; margin-bottom: 6px; } .rules-head__ico { width: 44px; height: 44px; border-radius: 10px; flex: 0 0 auto; background: var(--dd-red); display: flex; align-items: center; justify-content: center; color: #fff; } .rules-head__t { font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.6rem; line-height: 1.1; } .rules-head__d { color: var(--dd-ink-dim); font-size: .85rem; } .rules-tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--dd-line); margin: 14px 0; } .rules-tab { display: flex; align-items: center; gap: 7px; white-space: nowrap; padding: 10px 14px; border: 0; background: transparent; cursor: pointer; color: var(--dd-ink-dim); font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: .82rem; border-bottom: 2px solid transparent; margin-bottom: -1px; } .rules-tab:hover { color: var(--dd-ink); } .rules-tab.is-active { color: var(--dd-red-ink); border-bottom-color: var(--dd-red); } .rules-tab__n { background: var(--dd-panel-3); color: var(--dd-ink-dim); border-radius: 999px; padding: 1px 8px; font-size: .68rem; } .rules-tab.is-active .rules-tab__n { background: var(--dd-red); color: #fff; } .rules-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; } .rules-filters .pick-search { flex: 1 1 260px; margin: 0; } .rules-filters .dd-select { flex: 0 0 auto; width: auto; min-width: 150px; } .rules-count { color: var(--dd-ink-dim); font-size: .74rem; margin-bottom: 8px; font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .06em; } .rules-list { display: flex; flex-direction: column; } .rules-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--dd-line); border-left: 3px solid transparent; border-radius: var(--dd-r-lg); background: var(--dd-panel-2); cursor: pointer; margin-bottom: 7px; transition: border-color .1s, background .1s, transform .1s; } .rules-row:hover { border-color: #C3C4C8; border-left-color: var(--dd-red); background: var(--dd-panel-3); transform: translateY(-1px); } .rules-row__glyph { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--dd-f-display); font-weight: 800; font-size: .9rem; } .rules-row__name { font-family: var(--dd-f-body); font-weight: 700; font-size: .98rem; letter-spacing: .01em; flex: 0 0 auto; width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rules-row__meta { color: var(--dd-ink-dim); font-size: .82rem; flex: 1 1 auto; min-width: 0; display: flex; gap: 12px; flex-wrap: wrap; } .rules-row__meta span { white-space: nowrap; } .rules-row__chev { flex: 0 0 auto; color: var(--dd-ink-faint); display: inline-flex; } @media (max-width: 720px) { .rules-row__name { width: auto; } .rules-row__meta { flex-basis: 100%; } } .rules-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0; color: var(--dd-ink-dim); font-size: .82rem; } /* Full details view */ .rd-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--dd-r-lg) var(--dd-r-lg) 0 0; color: #fff; position: relative; overflow: hidden; } .rd-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.30)); } .rd-head > * { position: relative; z-index: 1; } .rd-head__glyph { width: 52px; height: 52px; border-radius: 10px; flex: 0 0 auto; background: rgba(0,0,0,.26); border: 2px solid rgba(255,255,255,.4); display: flex; align-items: center; justify-content: center; font-family: var(--dd-f-display); font-weight: 800; font-size: 1.35rem; } .rd-head__t { font-family: var(--dd-f-serif); font-weight: 800; font-size: 1.7rem; line-height: 1.05; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .rd-head__sub { display: flex; align-items: center; gap: 9px; margin-top: 6px; flex-wrap: wrap; } .rd-head__st { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; color: rgba(255,255,255,.9); } .rd-body { background: var(--dd-panel); border: 1px solid var(--dd-line); border-top: 0; border-radius: 0 0 var(--dd-r-lg) var(--dd-r-lg); padding: 20px 22px 26px; } .rd-sec { margin-bottom: 18px; } .rd-sec:last-child { margin-bottom: 0; } .rd-sec__h { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-size: .76rem; font-weight: 700; color: var(--dd-red-ink); border-bottom: 1px solid var(--dd-line); padding-bottom: 5px; margin-bottom: 9px; } /* =================================================================== LIGHT THEME — content is light; only the top nav (chrome) is dark. These overrides sit last so they win over the base component rules. =================================================================== */ /* Dark top nav keeps light text */ .dd-appbar .dd-navlink { color: var(--dd-on-chrome-dim); } .dd-appbar .dd-navlink:hover { color: var(--dd-on-chrome); background: rgba(255,255,255,.06); } .dd-appbar .dd-navlink.is-active { color: #fff; } .dd-usr__name { color: var(--dd-on-chrome); } .dd-usr__chev { color: var(--dd-on-chrome-dim); } .dd-lang { background: rgba(0,0,0,.32); border-color: rgba(255,255,255,.12); } .dd-lang button { color: var(--dd-on-chrome-dim); } .dd-lang button:hover { color: #fff; } .dd-lang button.is-active { background: var(--dd-red); color: #fff; } /* Numeric box: hide the native up/down spinner — the −/+ buttons are the control */ .dd-number__val::-webkit-outer-spin-button, .dd-number__val::-webkit-inner-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0; } .dd-number__val { -moz-appearance: textfield; appearance: textfield; } input[type="number"].dd-input::-webkit-outer-spin-button, input[type="number"].dd-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"].dd-input { -moz-appearance: textfield; appearance: textfield; } /* Builder header + tab strip stay a DARK chrome band (DDB-style); only the content body below is light. (Active tab label is #fff — needs the dark ground.) */ /* Character-list card footers → light */ .mych-foot { background: var(--dd-panel-2); border-top-color: var(--dd-line-soft); } .mych-new { background: rgba(0,0,0,.015); } /* Hovers were tuned for dark; on light use a dark wash */ .dd-btn--ghost:hover { background: rgba(0,0,0,.05); color: var(--dd-ink); } .dd-iconbtn:hover { background: rgba(0,0,0,.05); color: var(--dd-ink); } .dd-number__btn:hover { background: rgba(0,0,0,.05); color: var(--dd-ink); } .dd-menu__item:hover { background: var(--dd-panel-2); } .mych-foot .dd-iconbtn:hover { background: rgba(0,0,0,.06); } /* Alert variant text must be dark on a light ground */ .dd-alert--warn { color: #8A5A12; } .dd-alert--danger { color: #9E2B22; } /* Data-table head sits on dark chrome */ .dd-table thead th { color: var(--dd-on-chrome-dim); } /* Chip container — the missing wrapper (chips were overlapping without it) */ .dd-chips { display: flex; flex-wrap: wrap; gap: 7px; } /* Feature accordion: name + the level it's gained + chevron */ .feat-row__right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .feat-row__lvl { font-family: var(--dd-f-display); text-transform: uppercase; letter-spacing: .05em; font-size: .64rem; font-weight: 700; color: var(--dd-gold); white-space: nowrap; } /* Popup header depth + polish */ .cdet-head { position: relative; overflow: hidden; } .cdet-head > * { position: relative; z-index: 1; } .cdet-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.30) 100%); pointer-events: none; } /* the source tag reads clearly on the coloured header */ .cdet-head .dd-tag { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(0,0,0,.25); } .dd-modal--lg .dd-modal__foot { border-top: 1px solid var(--dd-line); } .dd-modal__scroll { border-bottom: 1px solid var(--dd-line-soft); } .csel-sec__t { margin-top: 4px; }