/* ============================================================= Campaign Companion — design system "A relic, not a wiki": leather chrome, vellum pages, one user-picked accent threading through everything. ============================================================= */ /* ---------- tokens ---------- */ :root { /* --accent is set inline on from the user's preference */ --accent: #a5312a; --accent-deep: color-mix(in oklab, var(--accent), #241d12 42%); --accent-tint: color-mix(in oklab, var(--accent) 12%, #e9dfc6); --ink-900: #241d12; /* headings */ --ink-700: #2f2718; /* body */ --ink-600: #3a2f1e; /* body alt */ --ink-soft: #6f5a38; /* italic subtitles */ --ink-faded: #7a6845; /* struck/finished */ --ink-mist: #8a6f45; /* misted rumor text */ --label: #8c6b34; /* mono micro-labels */ --stamp: #9a865f; /* timestamps */ --hand: #6a4a1e; /* Caveat marginalia */ --gilt: #c9a24a; --gilt-muted: #8a734a; --gilt-body: #c4ab7c; --lit: #f0e2cf; --lit-2: #e8d9b8; --hairline: rgba(58, 44, 20, .22); --hairline-strong: rgba(58, 44, 20, .3); --hairline-soft: rgba(58, 44, 20, .16); --leather: linear-gradient(160deg, #3a2513, #2b1b0d 55%, #241609); --vellum: linear-gradient(115deg, #eae0c8, #e5dabf 70%, #e0d4b6); --font-sc: 'IM Fell English SC', serif; --font-fell: 'IM Fell English', serif; --font-body: 'EB Garamond', Georgia, serif; --font-hand: 'Caveat', cursive; --font-mono: 'IBM Plex Mono', monospace; } /* ---------- base ---------- */ * { box-sizing: border-box; } body { margin: 0; background: #140f09; font-family: var(--font-body); -webkit-font-smoothing: antialiased; } input, textarea, select, button { font-family: inherit; } input:focus, textarea:focus, select:focus { outline: none; } button { cursor: pointer; } .inline-form { display: inline; margin: 0; } /* the hidden attribute must always win, even over display classes */ [hidden] { display: none !important; } @keyframes flicker { 0%, 100% { opacity: .92; transform: scale(1); } 22% { opacity: .66; transform: scale(1.05); } 47% { opacity: 1; transform: scale(.97); } 68% { opacity: .72; transform: scale(1.03); } 83% { opacity: .88; transform: scale(.99); } } @keyframes drift { 0% { transform: translate(0, 0); opacity: 0; } 14% { opacity: .6; } 100% { transform: translate(20px, -240px); opacity: 0; } } @keyframes breathe { 0%, 100% { opacity: .5; } 50% { opacity: .85; } } @keyframes mist { 0%, 100% { opacity: .55; } 50% { opacity: .3; } } /* ---------- typography helpers ---------- */ .kicker { font: 400 10px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--label); } .h1 { margin: 6px 0 3px; font-family: var(--font-sc); font-weight: 400; font-size: clamp(28px, 4.5vw, 36px); line-height: 1; color: var(--ink-900); } .subline { font-family: var(--font-fell); font-style: italic; font-size: 16px; color: var(--ink-soft); } .mono-label { font: 400 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); } .mist { font-family: var(--font-fell); font-style: italic; font-size: 14.5px; color: var(--ink-mist); animation: mist 6s ease-in-out infinite; } .hand { font-family: var(--font-hand); font-size: 19px; color: var(--hand); } .mono-link { font: 400 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--label); text-decoration: none; } .mono-link:hover { color: var(--accent); } .wiki-link { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); } /* ---------- shared components ---------- */ .btn-accent { display: inline-flex; align-items: center; gap: 9px; padding: 12px 24px; background: var(--accent); color: var(--lit); font-family: var(--font-sc); font-size: 16px; letter-spacing: .06em; border: none; border-radius: 2px; cursor: pointer; text-decoration: none; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); } .btn-accent:hover { filter: brightness(1.12); } .chip-row { display: flex; gap: 9px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 2px; cursor: pointer; text-decoration: none; font-family: var(--font-sc); font-size: 14.5px; letter-spacing: .04em; border: 1px solid rgba(58, 44, 20, .32); color: var(--ink-soft); background: transparent; } .chip.is-active { background: var(--accent); color: var(--lit); border-color: transparent; box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .4); } .panel { border: 1px solid var(--hairline); background: rgba(255, 255, 255, .22); } .panel-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--hairline-soft); background: color-mix(in oklab, var(--accent) 6%, transparent); } .panel-title { font-family: var(--font-sc); font-size: 17px; color: var(--accent-deep); letter-spacing: .03em; } /* small wax-seal dot (teasers, sealed indicators) */ .wax-dot { display: inline-block; width: 13px; height: 13px; flex: none; border-radius: 50%; background: radial-gradient(circle at 38% 34%, var(--accent), var(--accent-deep) 70%); } .wax-dot.small { width: 9px; height: 9px; } /* sealed content block: blurred filler under a wax seal */ .sealed-block { position: relative; margin: 0 0 16px; padding: 16px 17px; border: 1px solid var(--hairline-strong); background: rgba(43, 33, 18, .04); overflow: hidden; } .sealed-filler { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-700); filter: blur(4.2px); opacity: .5; user-select: none; } .sealed-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; } .sealed-overlay.row { flex-direction: row; gap: 10px; } .seal-circle { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, var(--accent), var(--accent-deep) 70%); box-shadow: 0 3px 6px rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; font-family: var(--font-sc); font-size: 18px; color: #e9c9b8; flex: none; } .seal-circle.small { width: 32px; height: 32px; font-size: 14px; } .sealed-caption { font: 500 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-deep); text-align: center; padding: 0 12px; } /* "known to you" block */ .known-block { margin: 0 0 15px; padding: 13px 15px 13px 16px; border-left: 2.5px solid var(--accent); background: color-mix(in oklab, var(--accent) 6%, transparent); } .known-chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 500 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .known-block p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-600); } /* type chip on entry rows */ .type-chip { font: 500 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid rgba(58, 44, 20, .28); padding: 1px 7px; border-radius: 3px; } .timestamp { font: 400 10px var(--font-mono); color: var(--stamp); white-space: nowrap; } /* ---------- app shell ---------- */ .shell { display: flex; min-height: 100vh; align-items: stretch; } /* leather rail (desktop) */ .rail { display: flex; flex-direction: column; width: 236px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--leather); box-shadow: inset -8px 0 18px -10px rgba(0, 0, 0, .7); } .rail-crest { display: flex; align-items: center; gap: 10px; padding: 22px 20px 16px; border-bottom: 1px solid rgba(201, 162, 74, .18); } .crest-ring { width: 26px; height: 26px; flex: none; border: 1.5px solid rgba(201, 162, 74, .6); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .crest-diamond { width: 9px; height: 9px; background: var(--accent); transform: rotate(45deg); } .rail-campaign { font-family: var(--font-sc); font-size: 17px; line-height: 1; color: var(--gilt); } .rail-tagline { font: 400 8.5px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gilt-muted); margin-top: 3px; } .rail-character { display: flex; align-items: center; gap: 11px; padding: 15px 20px; border-bottom: 1px solid rgba(201, 162, 74, .18); cursor: pointer; text-decoration: none; } .rail-character:hover { background: rgba(201, 162, 74, .06); } .rail-monogram { width: 38px; height: 38px; flex: none; border: 1.5px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-sc); font-size: 18px; color: color-mix(in oklab, var(--accent), var(--lit) 45%); background: color-mix(in oklab, var(--accent) 22%, transparent); } .rail-charname { font-family: var(--font-fell); font-size: 15.5px; line-height: 1.1; color: var(--lit-2); } .rail-charbyline { font: 400 8.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gilt-muted); margin-top: 3px; } .rail-index { padding: 14px 0 4px; } .rail-index-label { padding: 0 20px 7px; font: 400 9px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gilt-muted); } .rail-item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; cursor: pointer; text-decoration: none; border-left: 2.5px solid transparent; } .rail-item.is-active { border-left-color: var(--accent); background: color-mix(in oklab, var(--accent) 18%, transparent); } .rail-mark { width: 9px; height: 9px; flex: none; transform: rotate(45deg); border: 1.5px solid var(--gilt-muted); } .rail-item.is-active .rail-mark { background: var(--accent); border: none; } .rail-label { font-family: var(--font-sc); font-size: 16px; letter-spacing: .02em; color: var(--gilt-body); } .rail-item.is-active .rail-label { color: var(--lit); } .rail-new { padding: 16px 20px; } .btn-new { width: 100%; justify-content: center; padding: 11px 12px; font-size: 15px; box-shadow: 0 5px 14px -6px rgba(0, 0, 0, .7); } .rail-foot { margin-top: auto; padding: 16px 20px 20px; border-top: 1px solid rgba(201, 162, 74, .18); font: 400 9.5px var(--font-mono); letter-spacing: .06em; color: var(--gilt-muted); line-height: 1.7; } .rail-signout { background: none; border: none; padding: 0; font: inherit; letter-spacing: inherit; color: var(--gilt); } .rail-signout:hover { color: var(--lit-2); } /* the vellum page */ .page { flex: 1; min-width: 0; position: relative; background: var(--vellum); box-shadow: inset 18px 0 30px -18px rgba(40, 26, 10, .55); } .page-grain { position: absolute; inset: 0; filter: url(#grain); mix-blend-mode: multiply; opacity: .35; pointer-events: none; } .page-content { position: relative; z-index: 1; padding: clamp(20px, 4vw, 44px); } /* mobile top bar */ .topbar { display: none; align-items: center; justify-content: space-between; padding: 13px 18px; position: relative; z-index: 2; background: linear-gradient(160deg, #3a2513, #2b1b0d); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .6); } .topbar-brand { display: flex; align-items: center; gap: 9px; } .topbar-diamond { width: 8px; height: 8px; background: var(--accent); transform: rotate(45deg); } .topbar-campaign { font-family: var(--font-sc); font-size: 17px; color: var(--gilt); } .topbar-monogram { width: 31px; height: 31px; border: 1.5px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-sc); font-size: 14px; color: color-mix(in oklab, var(--accent), var(--lit) 45%); cursor: pointer; text-decoration: none; } /* mobile foot rail */ .footrail { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: linear-gradient(0deg, #241609, #33200f); border-top: 1px solid rgba(201, 162, 74, .25); box-shadow: 0 -8px 20px -8px rgba(0, 0, 0, .7); } .foottab { flex: 1; padding: 8px 0 7px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-decoration: none; border-top: 2px solid transparent; margin-top: -1.5px; } .foottab.is-active { border-top-color: var(--accent); } .foottab-mark { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--gilt-muted); } .foottab.is-active .foottab-mark { background: var(--accent); border: none; } .foottab.is-new .foottab-mark { width: 30px; height: 30px; margin-top: -16px; transform: none; border: 2px solid #33200f; border-radius: 50%; background: var(--accent); color: var(--lit); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .6); } .foottab-label { font: 500 9px var(--font-mono); letter-spacing: .04em; color: var(--gilt-muted); } .foottab.is-active .foottab-label { color: var(--lit); } @media (max-width: 819px) { .rail { display: none; } .topbar { display: flex; } .footrail { display: flex; } .page-content { padding-bottom: 86px; } } /* ---------- screens: shared widths ---------- */ .screen { max-width: 900px; } .screen-mid { max-width: 820px; } .screen-narrow { max-width: 700px; } .screen-form { max-width: 640px; } /* ---------- journal (dashboard) ---------- */ .journal-subline { margin-bottom: 22px; font-size: 16.5px; } .newly { margin-bottom: 20px; } .newly-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; text-decoration: none; cursor: pointer; border-bottom: 1px solid rgba(58, 44, 20, .1); } .newly-row:last-child { border-bottom: none; } a.newly-row:hover { background: rgba(255, 255, 255, .35); } .newly-diamond { color: var(--accent); font-size: 13px; } .newly-text { flex: 1; font-size: 15.5px; color: var(--ink-700); } .newly-text strong { font-weight: 600; color: var(--ink-900); } .newly-row.is-teaser { opacity: .75; } .newly-teaser-text { flex: 1; font-size: 15px; color: #5a4a30; font-style: italic; font-family: var(--font-fell); } .newly-sealed-tag { font: 400 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); } .dash-cards { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; } .dash-card { flex: 1; min-width: 270px; text-decoration: none; cursor: pointer; border: 1px solid var(--hairline); background: rgba(255, 255, 255, .22); } .dash-card:hover { background: rgba(255, 255, 255, .4); } .dash-card-head { padding: 10px 15px; border-bottom: 1px solid var(--hairline-soft); font: 400 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--label); display: flex; justify-content: space-between; } .dash-card-head .fraction { font: 600 10px var(--font-mono); color: var(--accent); } .dash-card-body { padding: 14px 15px 16px; } .dash-card-title { font-family: var(--font-sc); font-size: 20px; color: var(--ink-900); } .dash-card-sub { font-family: var(--font-fell); font-style: italic; font-size: 13.5px; color: var(--ink-soft); margin: 2px 0 8px; } .dash-card-excerpt { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-600); } .dash-resume { margin-top: 10px; font: 500 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .progress-track { height: 4px; background: rgba(58, 44, 20, .14); border-radius: 2px; overflow: hidden; margin-top: 2px; } .progress-fill { height: 100%; background: var(--accent); } .dash-next { margin-top: 9px; font-size: 14px; line-height: 1.5; color: var(--ink-600); font-style: italic; font-family: var(--font-fell); } .margin-strip { padding-top: 14px; border-top: 1px solid rgba(58, 44, 20, .18); } .margin-strip-notes { display: flex; gap: 26px; flex-wrap: wrap; font-family: var(--font-hand); font-size: 19px; color: var(--hand); } .tilt-l { display: inline-block; transform: rotate(-1deg); } .tilt-r { display: inline-block; transform: rotate(.8deg); } /* ---------- quest log ---------- */ .quest-filters { margin: 0 0 20px; } .quest { border: 1px solid rgba(58, 44, 20, .24); background: rgba(255, 255, 255, .24); padding: 16px 18px 15px; margin-bottom: 14px; } .quest.is-active { border-left: 3px solid var(--accent); } .quest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .quest-title { font-family: var(--font-sc); font-size: 21px; color: var(--ink-900); } .quest-source { margin-left: 10px; font-family: var(--font-fell); font-style: italic; font-size: 13.5px; color: var(--ink-soft); } .quest-chip { font: 500 9.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; white-space: nowrap; } .quest-chip.active { color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); } .quest-chip.rumoured { color: var(--ink-mist); border: 1px solid rgba(58, 44, 20, .3); } .quest-chip.finished { color: var(--ink-faded); border: 1px solid rgba(58, 44, 20, .25); } .objectives { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; } .objective { display: flex; gap: 10px; align-items: flex-start; } .objective-box { width: 14px; height: 14px; flex: none; margin-top: 2px; border: 1.5px solid rgba(58, 44, 20, .4); font-size: 10px; display: flex; align-items: center; justify-content: center; } .objective.is-done .objective-box { border-color: var(--accent); background: var(--accent); color: var(--lit); } .objective-text { font-size: 15px; color: var(--ink-700); } .objective.is-done .objective-text { color: var(--ink-faded); text-decoration: line-through; } .quest-note { margin-top: 11px; font-family: var(--font-hand); font-size: 19px; color: var(--hand); transform: rotate(-.6deg); } .quest.is-rumoured { border: 1px dashed rgba(58, 44, 20, .35); background: rgba(58, 44, 20, .03); padding: 16px 18px; } .quest-rumor-head { display: flex; align-items: center; gap: 10px; } .quest.is-rumoured .quest-title { color: #5a4a30; } .quest-mist { margin-top: 8px; font-family: var(--font-fell); font-style: italic; font-size: 15px; color: var(--ink-mist); animation: mist 5s ease-in-out infinite; } .quest.is-finished { border: 1px solid rgba(58, 44, 20, .18); background: rgba(255, 255, 255, .12); padding: 16px 18px; opacity: .62; } .quest.is-finished .quest-title { font-size: 19px; color: #5a4a30; } .quest-summary { margin-top: 6px; font-size: 14px; color: var(--ink-faded); font-style: italic; font-family: var(--font-fell); } /* ---------- entries list ---------- */ .entries-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; } .btn-new-inline { padding: 10px 18px; font-size: 15px; letter-spacing: .05em; } .search-box { display: flex; align-items: center; gap: 9px; margin: 16px 0 12px; padding: 9px 14px; border: 1px solid var(--hairline-strong); background: rgba(255, 255, 255, .3); border-radius: 2px; max-width: 440px; } .search-glyph { width: 11px; height: 11px; flex: none; border: 1.5px solid var(--label); border-radius: 50%; } .search-box input { flex: 1; background: transparent; border: none; font-family: var(--font-body); font-size: 15px; color: var(--ink-700); } .entry-filters { margin-bottom: 18px; } .entry-row { display: block; text-decoration: none; cursor: pointer; border: 1px solid rgba(58, 44, 20, .24); background: rgba(255, 255, 255, .24); padding: 14px 17px; margin-bottom: 11px; } .entry-row:hover { background: rgba(255, 255, 255, .42); } .entry-row.is-draft { background: color-mix(in oklab, var(--accent) 4%, transparent); border-left: 3px solid var(--accent); } .entry-row.is-draft:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); } .entry-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .entry-row-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .entry-row-title { font-family: var(--font-sc); font-size: 19px; color: var(--ink-900); } .entry-sealed-tag { display: inline-flex; align-items: center; gap: 5px; font: 500 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); } .entry-draft-tag { font: 500 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .entry-row-excerpt { margin: 7px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-600); } .entries-foot { margin-top: 16px; text-align: center; } /* ---------- entry detail ---------- */ .entry-backlink { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 16px; } .entry-subtitle { font-family: var(--font-fell); font-style: italic; font-size: 16.5px; color: var(--ink-soft); margin-bottom: 18px; } .entry-image { width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(58, 44, 20, .28); margin-bottom: 18px; color: var(--stamp); font-family: var(--font-fell); font-style: italic; font-size: 14px; background: rgba(255, 255, 255, .14); } .entry-body p.base-block { margin: 0 0 14px; font-size: 16.5px; line-height: 1.68; color: var(--ink-700); } .entry-notes { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(58, 44, 20, .18); } .entry-note { font-family: var(--font-hand); font-size: 20px; color: var(--hand); transform: rotate(-1deg); } .entry-note:nth-child(2n) { transform: rotate(.8deg); } .note-add { font-family: var(--font-hand); font-size: 18px; color: var(--stamp); cursor: pointer; text-decoration: none; border: none; background: none; padding: 0; border-bottom: 1px dashed rgba(58, 44, 20, .35); } .note-add:hover { color: var(--accent); } .note-form { display: none; align-items: baseline; gap: 10px; flex-wrap: wrap; } .note-form.is-open { display: flex; } .note-form input { background: transparent; border: none; border-bottom: 1px dashed rgba(58, 44, 20, .45); font-family: var(--font-hand); font-size: 20px; color: var(--hand); min-width: 240px; padding: 2px 4px; } .note-form button { border: none; background: none; font-family: var(--font-hand); font-size: 18px; color: var(--accent); padding: 0; } /* ---------- character ---------- */ .char-layout { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; } .char-left { flex: 0 0 264px; display: flex; flex-direction: column; gap: 14px; } .char-right { flex: 1; min-width: 280px; } .char-portrait { width: 264px; height: 330px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; border: 1px solid var(--hairline-strong); box-shadow: 0 10px 24px -12px rgba(40, 26, 10, .5); color: var(--stamp); font-family: var(--font-fell); font-style: italic; font-size: 14px; background: rgba(255, 255, 255, .14); } .colour-panel { border: 1px solid var(--hairline); background: rgba(255, 255, 255, .22); padding: 13px 15px; } .swatch-row { display: flex; gap: 10px; } .swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: none; padding: 0; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .25); } .swatch.is-active { box-shadow: 0 0 0 2px #e9dfc6, 0 0 0 4px var(--sw); } .colour-caption { margin-top: 9px; font: 400 10px var(--font-mono); line-height: 1.5; color: var(--stamp); } .stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .stat-plaque { flex: 1; min-width: 70px; border: 1px solid rgba(58, 44, 20, .28); background: rgba(255, 255, 255, .25); padding: 9px 8px; text-align: center; } .stat-label { font: 600 9px var(--font-mono); letter-spacing: .12em; color: var(--label); } .stat-value { font-family: var(--font-sc); font-size: 23px; color: var(--ink-900); } .ability-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; margin-bottom: 16px; } .ability { border: 1px solid rgba(58, 44, 20, .25); padding: 7px 0; text-align: center; } .ability.is-prof { background: color-mix(in oklab, var(--accent) 6%, transparent); } .ability-label { font: 600 9px var(--font-mono); color: var(--label); } .ability.is-prof .ability-label { color: var(--accent); } .ability-score { font-size: 15px; color: var(--ink-700); } .ability-mod { color: #7a5a38; } .skill-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .skill-chip { font-family: var(--font-fell); font-size: 14px; color: var(--ink-600); border: 1px solid var(--hairline-strong); padding: 3px 11px; border-radius: 2px; } .possessions { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } .possession { display: flex; gap: 10px; align-items: flex-start; } .possession-diamond { color: var(--stamp); font-size: 12px; margin-top: 3px; } .possession.is-notable .possession-diamond { color: var(--accent); } .possession-text { font-size: 15px; line-height: 1.5; color: var(--ink-700); } .char-section-label { margin-bottom: 8px; } .bonds { margin: 0 0 14px; font-size: 15.5px; line-height: 1.65; color: var(--ink-700); } .char-sealed { padding: 14px 16px; margin: 0; } .char-sealed .sealed-filler { font-size: 14.5px; } /* ---------- new entry form ---------- */ .form-label { margin-bottom: 8px; } .form-label.tight { margin-bottom: 6px; } .form-group { margin-bottom: 20px; } .title-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(58, 44, 20, .4); padding: 6px 2px 8px; font-family: var(--font-sc); font-size: 23px; color: var(--ink-900); } .title-input:focus { border-bottom-color: var(--accent); } .region-select { background: rgba(255, 255, 255, .3); border: 1px solid rgba(58, 44, 20, .35); border-radius: 2px; padding: 8px 12px; font-family: var(--font-body); font-size: 15px; color: var(--ink-700); } .body-textarea { width: 100%; background: rgba(255, 255, 255, .3); border: 1px solid rgba(58, 44, 20, .35); border-radius: 2px; padding: 12px 14px; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-700); resize: vertical; } .body-textarea:focus { border-color: var(--accent); } .aud-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; } .aud-row { display: flex; align-items: center; gap: 11px; padding: 11px 15px; cursor: pointer; font-size: 15px; color: var(--ink-700); border-radius: 2px; border: 1px solid rgba(58, 44, 20, .25); background: rgba(255, 255, 255, .2); } .aud-row input { position: absolute; opacity: 0; pointer-events: none; } .aud-row .aud-dot { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1.5px solid rgba(58, 44, 20, .45); } .aud-row.is-active { border-color: color-mix(in oklab, var(--accent) 55%, transparent); background: color-mix(in oklab, var(--accent) 7%, transparent); } .aud-row.is-active .aud-dot { border: 4.5px solid var(--accent); } .aud-row strong { font-weight: 600; } .aud-hint { color: var(--ink-soft); font-style: italic; font-family: var(--font-fell); } .member-chips { display: none; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; padding-left: 26px; } .member-chips.is-open { display: flex; } .member-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px; border-radius: 20px; cursor: pointer; font-family: var(--font-body); font-size: 14.5px; border: 1px solid rgba(58, 44, 20, .35); color: var(--ink-soft); } .member-chip input { position: absolute; opacity: 0; pointer-events: none; } .member-chip.is-on { background: var(--accent); color: var(--lit); border-color: transparent; } .form-footnote { font: 400 10.5px var(--font-mono); line-height: 1.6; color: var(--stamp); margin-bottom: 22px; } .form-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .discard-link { font: 400 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); cursor: pointer; text-decoration: none; } .discard-link:hover { color: var(--accent); } /* ============================================================= The Keeper's side — same relic, denser hand. ============================================================= */ /* threshold hint */ .threshold-hint { color: rgba(216, 203, 172, .22); } /* view-as bar (Keeper entry view) */ .viewas-bar { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 13px; margin-bottom: 18px; border: 1px solid var(--hairline); background: rgba(255, 255, 255, .22); } .viewas-monogram, .pulse-monogram { width: 28px; height: 28px; flex: none; border: 1.5px solid var(--member-accent, var(--accent)); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sc); font-size: 13px; color: var(--member-accent, var(--accent)); background: color-mix(in oklab, var(--member-accent, var(--accent)) 10%, transparent); text-decoration: none; cursor: pointer; } .viewas-monogram:hover { background: color-mix(in oklab, var(--member-accent, var(--accent)) 24%, transparent); } .viewas-hint { font-family: var(--font-fell); font-style: italic; font-size: 13px; color: var(--ink-soft); } .viewas-bar .btn-edit { margin-left: auto; } .btn-edit { padding: 8px 16px; font-size: 14px; } /* banner shown while reading as a player */ .viewas-banner { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 9px 13px; margin-bottom: 18px; border-left: 2.5px solid var(--accent); background: color-mix(in oklab, var(--accent) 8%, transparent); } .viewas-name { font-family: var(--font-sc); font-size: 16px; color: var(--ink-900); } .viewas-banner .mono-link { margin-left: auto; } .keeper-sight { color: var(--accent); } /* Keeper block view: every block, chipped with its audience */ .keeper-block { margin: 0 0 15px; padding: 12px 15px; border: 1px solid var(--hairline-soft); } .keeper-block.is-restricted { border-left: 2.5px solid var(--accent); background: color-mix(in oklab, var(--accent) 5%, transparent); } .keeper-block-chip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 500 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .keeper-block > p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--ink-700); } /* draft review actions */ .draft-actions { margin: 0 0 18px; padding: 13px 15px; border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 6%, transparent); } .draft-actions-text { font-size: 15px; line-height: 1.55; color: var(--ink-700); margin-bottom: 11px; } .draft-actions-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .return-form { display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .return-form input { background: transparent; border: none; border-bottom: 1px dashed rgba(58, 44, 20, .45); font-family: var(--font-hand); font-size: 18px; color: var(--hand); min-width: 200px; padding: 2px 4px; } .promoted-tag { color: var(--accent); margin-bottom: 16px; } /* Keeper dashboard */ .keeper-activity, .keeper-pulse { display: flex; flex-direction: column; gap: 9px; } .keeper-activity-row, .keeper-pulse-row { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-700); } .keeper-pulse-row { align-items: center; } .keeper-activity-row .timestamp, .keeper-pulse-row .timestamp { margin-left: auto; } .pulse-name { font-family: var(--font-fell); font-size: 15px; color: var(--ink-700); } .keeper-count { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-600); } /* block editor */ .editor-block { border: 1px solid var(--hairline); background: rgba(255, 255, 255, .2); padding: 12px 14px; margin-bottom: 14px; } .editor-block-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .editor-remove { font: 400 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stamp); cursor: pointer; } .editor-remove input { vertical-align: -1px; } .editor-text { margin-bottom: 10px; } .editor-audience .member-chips { padding-left: 0; margin-top: 8px; } .editor-audience .chip input { position: absolute; opacity: 0; pointer-events: none; } /* stat cards */ .stat-grid, .board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; } .board-screen { max-width: 1400px; } .board-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .stat-card { border: 1px solid var(--hairline-strong); background: rgba(255, 255, 255, .26); padding: 14px 16px; border-top: 3px solid var(--accent); } .stat-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .stat-card-name { font-family: var(--font-sc); font-size: 20px; color: var(--ink-900); } .stat-card-count { color: var(--accent); font-size: 17px; } .stat-card-meta { font-family: var(--font-fell); font-style: italic; font-size: 13px; color: var(--ink-soft); } .stat-card-vitals { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0; padding: 7px 0; border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); font-size: 13.5px; color: var(--ink-700); } .stat-card-vitals strong { font: 600 9.5px var(--font-mono); letter-spacing: .08em; color: var(--label); } .stat-card-abilities { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-bottom: 10px; } .stat-card-ability { border: 1px solid rgba(58, 44, 20, .2); padding: 4px 0; text-align: center; } .stat-card-ability .ability-score { font-size: 13px; } .stat-card-details { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 10px; } .stat-card-section { margin-bottom: 8px; } .stat-card-line { margin: 0 0 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-700); } .stat-card-line em { font-family: var(--font-fell); } .stat-card-foot { margin-top: 8px; font-size: 13.5px; } /* keeper forms (stat block / encounter creation) */ .keeper-form-fold { margin-top: 6px; } .keeper-form-fold summary { list-style: none; cursor: pointer; } .keeper-form-fold summary::-webkit-details-marker { display: none; } .keeper-form { margin-top: 18px; padding: 16px; border: 1px solid var(--hairline); background: rgba(255, 255, 255, .18); } .keeper-form .title-input { margin-bottom: 16px; } .keeper-form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .keeper-form-row > div { flex: 1; min-width: 90px; } .region-select.wide { width: 100%; } .region-select.num { width: 74px; } .abilities-row > div { flex: 0 0 auto; } .lineup-picker { display: flex; flex-direction: column; gap: 8px; } .lineup-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 11px; border: 1px solid var(--hairline-soft); background: rgba(255, 255, 255, .18); } .lineup-name { font-family: var(--font-fell); font-size: 15px; color: var(--ink-700); } /* the Table */ .group-form { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 11px 16px; border-top: 1px solid var(--hairline-soft); } .invite-token { font: 500 11px var(--font-mono); letter-spacing: .06em; color: var(--accent-deep); background: color-mix(in oklab, var(--accent) 8%, transparent); padding: 1px 6px; border-radius: 2px; } /* quest controls */ .objective-toggle { padding: 0; } form.objective { margin: 0; } .quest-knownto { margin-top: 10px; font: 400 9.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stamp); } /* mobile top bar: sign-out next to the monogram */ .topbar-right { display: flex; align-items: center; gap: 12px; } .topbar-signout { background: none; border: 1px solid rgba(201, 162, 74, .35); border-radius: 50%; width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--gilt-muted); padding: 0; } .topbar-signout:hover { color: var(--lit-2); border-color: rgba(201, 162, 74, .7); } /* ============================================================= Characters & parties ============================================================= */ /* My Characters list */ .char-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; margin-bottom: 11px; border: 1px solid var(--hairline); background: rgba(255, 255, 255, .22); } .char-row.is-current { border-left: 3px solid var(--accent); background: color-mix(in oklab, var(--accent) 5%, transparent); } .char-row-main { flex: 1; min-width: 0; } .char-row-name { font-family: var(--font-sc); font-size: 19px; color: var(--ink-900); text-decoration: none; } .char-row-name:hover { color: var(--accent-deep); } .char-row-byline { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; } .char-row-party { color: var(--accent-deep); } .char-row-noparty { font-family: var(--font-fell); font-style: italic; color: var(--ink-mist); } .char-party-line { font-size: 14.5px; color: var(--ink-soft); } /* party roster strip */ .party-roster { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .party-member { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px; border: 1px solid var(--hairline); border-radius: 20px; background: rgba(255, 255, 255, .24); } .party-member-name { font-family: var(--font-fell); font-size: 15px; color: var(--ink-700); } .party-release { border: none; background: none; padding: 0 0 0 3px; font-size: 11px; color: var(--stamp); } .party-release:hover { color: var(--accent); } .party-assign-form { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* shared inventory */ .inventory-row { flex-wrap: wrap; } .inventory-note { color: var(--ink-soft); font-size: 14px; } .carrier-tag { display: inline-flex; align-items: center; gap: 7px; font: 500 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-deep); white-space: nowrap; } .carrier-tag.is-chest { color: var(--stamp); } .pulse-monogram.small { width: 22px; height: 22px; font-size: 11px; } .carrier-form { display: inline-flex; align-items: center; gap: 7px; } .carrier-select { padding: 4px 8px; font-size: 13px; } /* the base */ .base-body { padding: 14px 16px 18px; display: flex; gap: 20px; flex-wrap: wrap; } .base-map { flex: 0 0 300px; min-height: 220px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; border: 1px solid var(--hairline-strong); background: rgba(255, 255, 255, .14); color: var(--stamp); font-family: var(--font-fell); font-style: italic; font-size: 14px; } .base-functions { flex: 1; min-width: 260px; } .base-tier-label { margin: 12px 0 7px; } .base-tier-label:first-child { margin-top: 0; } .base-tier-label.next { color: var(--accent-deep); } .base-function { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; } .base-function-text { font-size: 15px; line-height: 1.5; color: var(--ink-700); } .is-done-box { width: 14px; height: 14px; flex: none; margin-top: 3px; border: 1.5px solid var(--accent); background: var(--accent); color: var(--lit); font-size: 10px; display: flex; align-items: center; justify-content: center; } .base-function.is-next .base-function-text { color: var(--ink-mist); font-style: italic; font-family: var(--font-fell); } .mist-static { opacity: .8; } @media (max-width: 700px) { .base-map { flex-basis: 100%; } } /* ============================================================= The atlas — tiled maps with grouped marks ============================================================= */ .atlas-screen { max-width: 1400px; } .atlas-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .atlas-hint { color: var(--stamp); } .atlas-layout { display: flex; gap: 18px; align-items: flex-start; } .atlas-map { flex: 1; min-width: 0; height: calc(100vh - 210px); min-height: 420px; border: 1px solid var(--hairline-strong); background: #dfd3b4; box-shadow: inset 0 0 40px rgba(58, 44, 20, .18); } .atlas-side { width: 262px; flex: none; display: flex; flex-direction: column; gap: 16px; } @media (max-width: 900px) { .atlas-layout { flex-direction: column; } .atlas-side { width: 100%; } .atlas-map { width: 100%; height: 62vh; min-height: 340px; } } /* group toggles */ .atlas-groups { padding: 8px 6px; } .atlas-group { display: flex; align-items: center; gap: 9px; padding: 7px 10px; cursor: pointer; font-size: 15px; color: var(--ink-700); } .atlas-group input { accent-color: var(--accent); } .atlas-group-icon { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #f0e2cf; background: radial-gradient(circle at 38% 34%, var(--mk), color-mix(in oklab, var(--mk), #000 32%) 72%); box-shadow: 0 2px 4px rgba(0, 0, 0, .3); } .atlas-group-name { flex: 1; font-family: var(--font-fell); } .atlas-group-count { color: var(--stamp); } /* the marks themselves (Leaflet divIcons) */ .atlas-divicon { background: none; border: none; } .atlas-marker { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; color: #f0e2cf; background: radial-gradient(circle at 38% 34%, var(--mk), color-mix(in oklab, var(--mk), #000 32%) 72%); border: 1.5px solid rgba(240, 220, 190, .55); box-shadow: 0 3px 7px rgba(0, 0, 0, .4); cursor: pointer; } .atlas-marker.is-restricted { outline: 2px dashed rgba(58, 44, 20, .6); outline-offset: 2px; } /* popups in the vellum voice */ .leaflet-popup-content-wrapper { background: linear-gradient(115deg, #ece2ca, #e5dabf); color: var(--ink-700); border-radius: 3px; border: 1px solid var(--hairline-strong); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); } .leaflet-popup-tip { background: #e7dcc2; } .leaflet-popup-content { margin: 12px 15px; font-family: var(--font-body); } .atlas-popup { min-width: 180px; max-width: 240px; } .atlas-popup-name { font-family: var(--font-sc); font-size: 17px; color: var(--ink-900); line-height: 1.1; } .atlas-popup-group { font: 500 9px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; } .atlas-popup-desc { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-600); } .atlas-popup-entry { display: inline-block; margin-top: 8px; font-size: 13.5px; } .atlas-popup-audience { margin-top: 9px; font: 500 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); } .atlas-popup-edit { margin-top: 7px; border: none; background: none; padding: 0; font: 500 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } /* the Keeper's marker form */ .marker-form-body { padding: 12px 14px 14px; } .marker-form .member-chips { display: none; } .marker-form .member-chips.is-open { display: flex; } /* leaflet zoom buttons, re-inked */ .leaflet-bar a { background: linear-gradient(160deg, #3a2513, #2b1b0d); color: var(--gilt); border-bottom-color: rgba(201, 162, 74, .25); } .leaflet-bar a:hover { background: #45301a; color: var(--lit); } .leaflet-container { font-family: var(--font-body); } /* ---------- atlas v2: modes, group manager, page search, alignment ---------- */ .atlas-mode { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .atlas-map.is-editing { cursor: crosshair; } .group-manager { border-top: 1px solid var(--hairline-soft); padding: 9px 10px 4px; } .group-manager summary { list-style: none; cursor: pointer; padding-bottom: 6px; } .group-manager summary::-webkit-details-marker { display: none; } .group-edit-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed var(--hairline-soft); } .group-edit-row input[name="name"] { flex: 1; min-width: 90px; padding: 5px 8px; font-size: 14px; } .glyph-select { width: 58px; padding: 5px 4px; } .tint-select { width: 92px; padding: 5px 4px; font: 500 10px var(--font-mono); } .group-row-btn { border: none; background: none; cursor: pointer; } .group-row-btn.is-danger:hover { color: #6e211c; } .entry-bind { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 6%, transparent); border-radius: 2px; } .entry-results { border: 1px solid var(--hairline-strong); border-top: none; background: rgba(255, 255, 255, .5); max-height: 190px; overflow-y: auto; } .entry-result { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 10px; border: none; border-bottom: 1px solid var(--hairline-soft); background: none; text-align: left; font-family: var(--font-body); font-size: 14.5px; color: var(--ink-700); } .entry-result:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); } .entry-result.is-none { font-family: var(--font-fell); font-style: italic; color: var(--ink-mist); cursor: default; } .align-panel .align-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .align-panel .chip { padding: 3px 10px; } /* ---------- the margins: signed comments under an entry ---------- */ .margins { padding-top: 14px; border-top: 1px solid rgba(58, 44, 20, .18); } .margins-empty { font-family: var(--font-fell); font-style: italic; font-size: 14.5px; color: var(--ink-mist); } .margin-comment { margin-bottom: 14px; } .comment-text { font-family: var(--font-hand); font-size: 20px; line-height: 1.35; color: var(--hand); } .comment-sig { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px; } .comment-author { font-family: var(--font-fell); font-style: italic; font-size: 13.5px; color: var(--ink-soft); } .comment-action { border: none; background: none; cursor: pointer; font-size: 9.5px; } .comment-action.is-danger:hover { color: #6e211c; } .margin-comment.is-editing { max-width: 560px; } .comment-edit-input { width: 100%; background: rgba(255, 255, 255, .3); border: 1px dashed rgba(58, 44, 20, .45); border-radius: 2px; padding: 8px 10px; font-family: var(--font-hand); font-size: 20px; line-height: 1.35; color: var(--hand); resize: vertical; } .comment-actions { display: flex; gap: 14px; margin-top: 6px; } .comment-add-form { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .comment-add-input { flex: 1; min-width: 240px; max-width: 560px; background: transparent; border: none; border-bottom: 1px dashed rgba(58, 44, 20, .45); font-family: var(--font-hand); font-size: 20px; color: var(--hand); padding: 2px 4px; } .comment-footnote { margin-top: 7px; font: 400 9.5px var(--font-mono); letter-spacing: .06em; color: var(--stamp); } /* dashboard strip: your latest comments, linking home */ .margin-strip-note { display: inline-block; font-family: var(--font-hand); font-size: 19px; color: var(--hand); text-decoration: none; } .margin-strip-note:hover { color: var(--accent-deep); } .margin-strip-where { font-family: var(--font-fell); font-style: italic; font-size: 12.5px; color: var(--stamp); } /* ---------- player-directed quest log ---------- */ .quest.is-personal { border-left-color: var(--accent-deep); border-left-style: double; border-left-width: 5px; } .quest-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--hairline-soft); } .quest-raised { font-family: var(--font-fell); font-style: italic; font-size: 13px; color: var(--ink-soft); } .quest-personal-tag { display: inline-flex; align-items: center; gap: 5px; font: 500 9px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-deep); } .quest-foot .comment-action { margin-left: auto; } .quest-step-row { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .quest-step-done { width: 16px; height: 16px; flex: none; display: inline-flex; } .quest-step-done input { width: 16px; height: 16px; accent-color: var(--accent); } /* ---------- the shared journal: sessions & notes ---------- */ .journal-search { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; max-width: 460px; } .journal-session { margin: 26px 0 30px; } .journal-session-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 7px; margin-bottom: 14px; border-bottom: 1px solid color-mix(in oklab, var(--gilt) 38%, transparent); } .journal-session-date { font-style: italic; color: var(--ink-soft); font-size: 13.5px; } .journal-session-add { margin-left: auto; } .journal-note { max-width: 640px; margin-bottom: 20px; } .journal-note-text { font-size: 15.5px; line-height: 1.62; color: var(--ink-700); margin-bottom: 5px; } .mention { color: var(--member-accent, var(--accent)); font-weight: 600; } .mention::before { content: '◆ '; font-size: 9px; vertical-align: 2px; } /* the composer's @helper */ .mention-anchor { position: relative; max-width: 640px; } .mention-drop { position: absolute; left: 10px; right: 10px; top: 100%; z-index: 30; background: #f3ead3; border: 1px solid var(--gilt); box-shadow: 0 10px 26px rgba(36, 29, 18, .18); display: flex; flex-direction: column; } .mention-option { display: flex; align-items: baseline; gap: 9px; padding: 8px 12px; border: none; background: none; cursor: pointer; font-size: 13.5px; color: var(--ink-700); text-align: left; } .mention-option:hover { background: color-mix(in oklab, var(--gilt) 16%, transparent); } .mention-kind { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); min-width: 46px; } .mention-token { margin-left: auto; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--stamp); } /* ---------- the account page ---------- */ .account-email { font-family: 'IBM Plex Mono', monospace; font-size: 14.5px; color: var(--ink-700); } .account-grid { display: flex; gap: 16px; margin-top: 14px; } .monogram-input { width: 70px; text-align: center; text-transform: uppercase; } .flash-note { max-width: 560px; padding: 10px 14px; margin-bottom: 18px; font-size: 13.5px; font-style: italic; } .flash-note.is-grumble { border-left: 3px solid #6e211c; color: #6e211c; background: color-mix(in oklab, #6e211c 7%, transparent); } .flash-note.is-praise { border-left: 3px solid var(--verdigris, #2e6f5e); color: #2e5546; background: color-mix(in oklab, #2e6f5e 8%, transparent); } .rail-character.is-here { outline: 1px solid color-mix(in oklab, var(--gilt) 55%, transparent); } .account-grid { margin-bottom: 16px; } .journal-search .region-select { flex: 1; } /* ---------- claiming an invitation ---------- */ .claim-card { position: relative; z-index: 2; width: min(480px, 92vw); background: #efe5cc; border: 1px solid rgba(60, 44, 20, .5); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); padding: 38px 36px 34px; } .claim-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--label); } .claim-title { font-family: 'IM Fell English', serif; font-weight: normal; font-size: 30px; margin: 8px 0 6px; color: var(--ink-900); } .claim-sub { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); font-style: italic; } .claim-error { margin: 14px 0 0; padding: 9px 12px; font-size: 13px; font-style: italic; border-left: 3px solid #6e211c; color: #6e211c; background: color-mix(in oklab, #6e211c 7%, transparent); } .claim-form { margin-top: 20px; } .claim-form input { width: 100%; padding: 9px 11px; font-size: 15px; background: #f6efdb; border: 1px solid rgba(60, 44, 20, .35); color: var(--ink-700); } .claim-form input:focus { border-color: var(--accent); } .claim-hint { font-size: 12px; color: var(--ink-soft); font-style: italic; margin: 0 0 8px; } .claim-submit { margin-top: 20px; width: 100%; justify-content: center; }