/* ============================================================ Genlinklab design system — "Manifest" Palette: --paper #F3F5F6 (cool working-paper grey) / --paper-raised #FFFFFF --ink #12161A (near-black, blue-cool) / --line #D7DCDE --accent #2F5FE0 (wire blue — one signal color, used with restraint) --success #1B8A5A (approved) / --danger #C1432B (void/failed) Type: display = 'Fraunces' (documentary/paperwork gravitas) body = 'IBM Plex Sans' mono = 'IBM Plex Mono' (references, credits, statuses) Signature: the docket — every record (account, sheet, credit balance) is a paper docket with a rotated tab carrying a stamped status word, and every list is a manifest: a left-edge rail of bracketed status codes ([OK] / [FAIL] / [WAIT]), the way a shipping or build log marks each line. ============================================================ */ :root { /* Neutrals */ --paper: #f3f5f6; --paper-raised: #ffffff; --paper-sunken: #e7eaeb; --ink: #12161a; --ink-soft: #4a535b; --ink-faint: #7c858c; --line: #d7dcde; --line-strong: #b7bfc2; /* Legacy token names kept so JS-generated markup (generate_link.js) continues to resolve to the new palette without needing edits there. */ --bg: var(--paper); --bg-elevated: var(--paper-raised); --surface: var(--paper-raised); --surface-2: var(--paper-sunken); --border: var(--line); --text: var(--ink); --muted: var(--ink-soft); /* Accent — one signal color, as a scale */ --accent-100: #dde6fb; --accent-300: #90a9ee; --accent: #2f5fe0; --accent-2: #1b3a9c; --accent-700: #16296e; --success: #1b8a5a; --success-tint: #e3f3ea; --danger: #c1432b; --danger-tint: #fbe9e4; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; /* Fixed, non-theme-dependent tokens - these decorative panels (the docket's ink tab, the auth brand panel) stay the same dark navy in both themes rather than following --ink/--accent-2, which flip meaning between light and dark mode. */ --ink-panel: #12161a; --brand-panel: #12161a; --nav-bg: rgba(243, 245, 246, 0.92); --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; } /* ---------- Dark theme ---------- Toggled via [data-theme] on , set by theme_toggle.js and persisted in localStorage. Not just inverted grays: neutrals keep a cool tint, and the accent/success/danger hues are re-tuned for contrast and saturation against a dark ground rather than reused as-is from the light palette. */ :root[data-theme="dark"] { --paper: #15181c; --paper-raised: #1d2126; --paper-sunken: #101316; --ink: #eceef1; --ink-soft: #a7afb8; --ink-faint: #737b84; --line: #2a2f35; --line-strong: #3c434b; --accent-100: #1c2b4d; --accent-300: #7fa2ee; --accent: #5b85ea; --accent-2: #8fb0f5; --accent-700: #dbe6fb; --success: #3fbe83; --success-tint: #163224; --danger: #e2694c; --danger-tint: #3a1912; --nav-bg: rgba(21, 24, 28, 0.88); } * { box-sizing: border-box; } html, body { background: var(--paper); color: var(--ink); font-family: var(--font-body); min-height: 100%; } ::selection { background: var(--accent); color: #fff; } a { color: inherit; text-decoration: none; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; } .mono { font-family: var(--font-mono); } .eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--accent-2); } /* ---------- Focus ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Nav ---------- */ .nav { border-bottom: 1px solid var(--line); background: var(--nav-bg); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 40; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--ink); border-color: var(--line-strong); } .nav-logo { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; color: var(--ink); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; padding: 0.65rem 1.35rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { filter: brightness(1.12); } .btn-primary:disabled { background: var(--line-strong); border-color: var(--line-strong); color: var(--ink-faint); cursor: not-allowed; } .btn-ghost { background: var(--paper-raised); border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); } .btn-block { width: 100%; } /* ---------- Form fields ---------- */ .field label { display: block; font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 0.4rem; letter-spacing: 0.01em; } .field input { width: 100%; background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink); padding: 0.7rem 0.85rem; border-radius: var(--radius-sm); font-size: 0.95rem; font-family: var(--font-body); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field input::placeholder { color: var(--ink-faint); } .field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); } .field input:disabled { background: var(--paper-sunken); color: var(--ink-faint); } .field-error { color: var(--danger); font-size: 0.78rem; margin-top: 0.35rem; } /* ---------- Generator textarea (paste multiple accounts) ---------- */ .gen-textarea { width: 100%; background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink); padding: 0.7rem 0.85rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; resize: vertical; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .gen-textarea::placeholder { color: var(--ink-faint); font-family: var(--font-body); } .gen-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); } .gen-disclosure { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: none; padding: 0; cursor: pointer; color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .gen-disclosure:hover { color: var(--ink); } .gen-disclosure-arrow { font-size: 10px; display: inline-block; } /* ---------- Flash messages ---------- */ .flash { border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-size: 0.88rem; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); background: var(--paper-raised); } .flash-error { background: var(--danger-tint); border-color: rgba(193, 67, 43, 0.3); border-left-color: var(--danger); color: var(--danger); } .flash-success { background: var(--success-tint); border-color: rgba(27, 138, 90, 0.3); border-left-color: var(--success); color: var(--success); } /* ---------- Toasts ---------- */ .toast-stack { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: 0.6rem; max-width: min(22rem, calc(100vw - 2.5rem)); } .toast { padding: 0.8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); background: var(--paper-raised); color: var(--ink); font-size: 0.88rem; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.3); animation: toastIn 0.25s ease both; } .toast.is-error { background: var(--danger-tint); border-color: rgba(193, 67, 43, 0.3); border-left-color: var(--danger); color: var(--danger); } .toast.is-success { background: var(--success-tint); border-color: rgba(27, 138, 90, 0.3); border-left-color: var(--success); color: var(--success); } .toast.is-leaving { animation: toastOut 0.2s ease both; } @keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } @media (prefers-reduced-motion: reduce) { .toast, .toast.is-leaving { animation: none; } } /* ---------- Settings rows (Account page) ---------- */ .settings-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; padding: 1.25rem 1.5rem; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); } .settings-row + .settings-row { margin-top: 1rem; } .setting-title { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); } .setting-value { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: var(--ink); } .setting-description { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.35rem; max-width: 48ch; } /* ============================================================ Docket — the signature record component. A paper card with a rotated side tab that carries a stamped status word, standing in for a manually-signed paper docket. ============================================================ */ .docket { position: relative; display: flex; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 0 var(--line); } .docket-body { flex: 1; padding: 1.5rem 1.6rem; min-width: 0; } .docket-tab { width: 92px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ink-panel); border-left: 1px solid var(--line); } .docket-tab-label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.72rem; font-weight: 500; color: #fff; white-space: nowrap; } .docket-tab.is-success { background: var(--success); } .docket-tab.is-danger { background: var(--danger); } /* Flat manifest-row variant, for list entries */ .ticket-row { position: relative; background: var(--paper-raised); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.85rem 1.05rem; } .ticket-row.is-ok { border-left-color: var(--success); } .ticket-row.is-fail { border-left-color: var(--danger); } /* Bracketed manifest status code, e.g. [OK] [FAIL] [WAIT] */ .manifest-code { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); white-space: nowrap; } .manifest-code.ok { color: var(--success); background: var(--success-tint); } .manifest-code.fail { color: var(--danger); background: var(--danger-tint); } /* ---------- Credit balance figure ---------- */ .credit-counter { font-family: var(--font-mono); font-size: 3rem; font-weight: 500; line-height: 1; color: var(--ink); letter-spacing: -0.02em; } .credit-counter .unit { font-size: 1rem; color: var(--ink-soft); margin-left: 0.35rem; } /* ---------- Package selection cards ---------- */ .package-card { cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; border: 1px solid var(--line); } .package-card:hover { border-color: var(--line-strong); } .package-card.selected { border-color: var(--accent); background: var(--accent-100); box-shadow: 0 0 0 1px var(--accent); } /* ============================================================ Stamp — full-page confirmation mark. A rotated circular ring with a monospace status word, standing in for the rubber stamp an admin would put on a paper approval. ============================================================ */ .stamp { --stamp-color: var(--ink-soft); width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--stamp-color); color: var(--stamp-color); display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-8deg); margin: 0 auto 1.25rem; } .stamp.is-success { --stamp-color: var(--success); } .stamp.is-danger { --stamp-color: var(--danger); } .stamp.is-pending { --stamp-color: var(--ink-faint); } .stamp-label { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.25; } /* ---------- Animations ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.4s ease both; } @keyframes stampIn { from { opacity: 0; transform: rotate(-8deg) scale(0.8); } to { opacity: 1; transform: rotate(-8deg) scale(1); } } .stamp { animation: stampIn 0.35s ease both; } @media (prefers-reduced-motion: reduce) { .fade-up, .stamp { animation: none; } } /* ============================================================ Review card — avatar-led one-off decision screens (approve a registration, confirm a bank transfer, view a pending transfer). Deliberately not a docket/manifest entry - these are a single human decision, not a logged record, so they read as a profile summary instead of a bordered data table. ============================================================ */ .review-card { background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem; } .review-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .review-avatar { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; } .review-name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); line-height: 1.3; } .review-meta { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.1rem; } .review-lede { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 1.5rem; } .review-figure { font-family: var(--font-mono); font-size: 2.4rem; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; line-height: 1; margin-bottom: 1.5rem; } .review-figure .unit { font-size: 1rem; color: var(--ink-soft); margin-left: 0.4rem; font-weight: 400; } .review-details { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: 1.75rem; } .review-detail { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.88rem; } .review-detail-label { color: var(--ink-soft); } .review-detail-value { font-family: var(--font-mono); color: var(--ink); text-align: right; word-break: break-word; } .review-detail-value.is-accent { color: var(--accent-2); font-weight: 600; } /* ============================================================ Auth shell — split-panel layout for the entry points (homepage, login, register): a solid brand panel a visitor reads before they act, paired with the actual form. ============================================================ */ .auth-shell { min-height: 100vh; display: flex; } .auth-panel-brand { flex: 1 1 70%; background: var(--brand-panel); color: #fff; display: flex; align-items: center; justify-content: center; padding: 3rem; position: relative; overflow: hidden; } .auth-brand-inner { max-width: 30rem; position: relative; z-index: 1; } .auth-logo { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: #fff; display: inline-block; margin-bottom: 2.5rem; } .auth-panel-form { flex: 1 1 30%; min-width: 22rem; background: var(--paper-raised); display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; } .auth-form-inner { width: 100%; max-width: 26rem; } @media (max-width: 860px) { .auth-shell { flex-direction: column; } .auth-panel-brand { padding: 2.5rem 1.5rem; } .auth-brand-inner { max-width: 100%; } } /* Icon-in-field inputs, and the password show/hide toggle */ .input-icon-wrap { position: relative; } .input-icon-wrap .field-icon-mark { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; } .input-icon-wrap input { padding-left: 2.6rem; } .input-icon-wrap.has-toggle input { padding-right: 2.6rem; } .password-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 0.3rem; cursor: pointer; color: var(--ink-faint); display: flex; border-radius: var(--radius-sm); } .password-toggle:hover { color: var(--ink); } @media (max-width: 640px) { .docket { flex-direction: column; } .docket-tab { width: 100%; height: 44px; border-left: none; border-top: 1px solid var(--line); } .docket-tab-label { writing-mode: horizontal-tb; transform: none; } .credit-counter { font-size: 2.2rem; } }