/* =========================================================== MailDrop - theme system --------------------------------------------------------- Three themes, each in a light and a dark variant: brutal (default) - neobrutalist: thick borders, hard shadows typo - editorial: hairlines, serif typography skeu - skeuomorphic: linen, gloss, letterpress Components below are written against semantic tokens only (--surface, --ink, --line, ...). A theme is a set of token values plus a few structural overrides; dark mode is the same tokens with different values. Selectors: :root brutal / light [data-mode="dark"] brutal / dark [data-theme="typo"] typo / light [data-theme="typo"][data-mode="dark"] typo / dark ... and so on. theme.js resolves the stored preference (including "system") and stamps data-theme / data-mode on before first paint. =========================================================== */ /* ============================ BRUTAL / LIGHT (defaults) ============================ */ :root { color-scheme: light; --page-bg: #f4f1e8; --page-grid: rgba(17, 17, 17, 0.06); --page-grid-size: 32px; --surface: #ffffff; --surface-sunken: #ffffff; --ink: #111111; --ink-muted: #4b4b4b; --line: #111111; --line-width: 3px; --radius: 0px; --radius-pill: 0px; --shadow-card: 8px 8px 0 0 var(--line); --shadow-card-sm: 5px 5px 0 0 var(--line); --shadow-flat: none; --shadow-btn: 4px 4px 0 0 var(--line); --shadow-btn-hover: 2px 2px 0 0 var(--line); --shadow-btn-active: 0 0 0 0 var(--line); --shadow-inset: none; --accent: #ffde00; --accent-ink: #111111; --ok-bg: #2fff8d; --ok-ink: #111111; --ok-line: #111111; /* Pale notice tint - the full yellow shouted over everything else */ --warn-bg: #fdf6d6; --warn-ink: #111111; --warn-line: #111111; /* Icon carries the warning colour instead of the whole panel. Deeper than the accent yellow, which would wash out on a light surface. */ --warn-icon: #b58a00; /* Addresses read as quiet chips; the yellow only appears on hover */ --address-bg: #efeee8; --address-ink: #111111; --address-line: #c9c6ba; --danger-bg: #ff4911; --danger-ink: #ffffff; --danger-line: #111111; --danger-btn: #ff4911; --danger-btn-ink: #ffffff; --violet-bg: #efe8ff; --violet-ink: #111111; --violet-line: #111111; --violet-icon: #6b3ecc; --btn-bg: #ffffff; --btn-ink: #111111; --btn-dark-bg: #111111; --btn-dark-ink: #ffde00; --field-bg: #ffffff; --field-focus-bg: #ffde00; --marker-bg: #ffde00; --marker-ink: #111111; --wordmark-bg: #111111; --wordmark-ink: #ffde00; --overlay: rgba(17, 17, 17, 0.55); --font-display: 'Archivo Black', 'Space Grotesk', sans-serif; --font-ui: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --caps: uppercase; --track: 0.03em; --letterpress: none; } /* ============================ BRUTAL / DARK ============================ */ :root[data-mode="dark"] { color-scheme: dark; --page-bg: #232228; --page-grid: rgba(240, 236, 224, 0.07); --surface: #2e2d35; --surface-sunken: #26252c; --ink: #f4f1e6; --ink-muted: #b3aea1; --line: #f0ece0; /* Hard shadows stay hard, just dark enough to read against the page */ --shadow-card: 8px 8px 0 0 #0b0b0d; --shadow-card-sm: 5px 5px 0 0 #0b0b0d; --shadow-btn: 4px 4px 0 0 #0b0b0d; --shadow-btn-hover: 2px 2px 0 0 #0b0b0d; --shadow-btn-active: 0 0 0 0 #0b0b0d; --accent: #ffde00; --accent-ink: #111111; --ok-bg: #1f6b45; --ok-ink: #eafff2; --ok-line: #f0ece0; --warn-bg: #332b0d; --warn-ink: #f3ead0; --warn-line: #f0ece0; --warn-icon: #ffde00; --address-bg: #3b3a44; --address-ink: #f4f1e6; --address-line: #56545f; --danger-bg: #8f2a10; --danger-ink: #ffe8e0; --danger-line: #f0ece0; --danger-btn: #ff5a24; --danger-btn-ink: #1a0d07; --violet-bg: #2b2442; --violet-ink: #ded6f5; --violet-line: #f0ece0; --violet-icon: #b494ff; --btn-bg: #2e2d35; --btn-ink: #f4f1e6; --btn-dark-bg: #f0ece0; --btn-dark-ink: #1a1a1f; --field-bg: #26252c; --field-focus-bg: #3a3730; --marker-bg: #6b5600; --marker-ink: #fff6cc; /* Inverted: a yellow block with dark letters. Keeping the light ink colour as the block would leave yellow-on-cream, which is unreadable. */ --wordmark-bg: #ffde00; --wordmark-ink: #111111; --overlay: rgba(0, 0, 0, 0.65); } /* ============================ TYPO / LIGHT ============================ */ :root[data-theme="typo"] { --page-bg: #faf7f0; --page-grid: transparent; --surface: #fffdf8; --surface-sunken: #fffdf8; --ink: #1d1a16; --ink-muted: #6b6459; --line: #ded5c2; --line-width: 1px; --radius: 0px; --radius-pill: 999px; --shadow-card: 0 1px 3px rgba(29, 26, 22, 0.06); --shadow-card-sm: 0 1px 2px rgba(29, 26, 22, 0.05); --shadow-btn: none; --shadow-btn-hover: none; --shadow-btn-active: none; --accent: #7a1f2b; --accent-ink: #fffdf8; --ok-bg: #eff4ec; --ok-ink: #1d1a16; --ok-line: #3d6b35; --warn-bg: #fbf7ee; --warn-ink: #1d1a16; --warn-line: #b98a00; --warn-icon: #b98a00; --address-bg: transparent; --address-ink: #1d1a16; --address-line: #c9c1b0; --danger-bg: #f4e7e4; --danger-ink: #1d1a16; --danger-line: #7a1f2b; --danger-btn: transparent; --danger-btn-ink: #7a1f2b; --violet-bg: #f1ecf7; --violet-ink: #1d1a16; --violet-line: #5b4a8a; --violet-icon: #5b4a8a; --btn-bg: transparent; --btn-ink: #1d1a16; --btn-dark-bg: #1d1a16; --btn-dark-ink: #fffdf8; --field-bg: #fffdf8; --field-focus-bg: #ffffff; --marker-bg: transparent; --marker-ink: #1d1a16; --overlay: rgba(29, 26, 22, 0.45); --font-display: 'Playfair Display', Georgia, serif; --font-ui: 'Lora', Charter, Georgia, serif; --caps: none; --track: 0.09em; } /* ============================ TYPO / DARK ============================ */ :root[data-theme="typo"][data-mode="dark"] { --page-bg: #15130e; --surface: #1e1b15; --surface-sunken: #1a1712; --ink: #ece5d6; --ink-muted: #a29883; --line: #3b3529; --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.4); --shadow-card-sm: 0 1px 5px rgba(0, 0, 0, 0.3); --accent: #e08a92; --accent-ink: #2a1013; --ok-bg: #1c2a1a; --ok-ink: #dfe9d9; --ok-line: #5c8a52; --warn-bg: #221d11; --warn-ink: #ebe1c6; --warn-line: #b98a00; --warn-icon: #d9a94a; --address-line: #4a4335; --danger-bg: #2c1a1a; --danger-ink: #f0dcd8; --danger-line: #c76b74; --danger-btn: transparent; --danger-btn-ink: #e08a92; --violet-bg: #211c2e; --violet-ink: #e2dcef; --violet-line: #8f7cc4; --violet-icon: #a894d6; --btn-ink: #ece5d6; --btn-dark-bg: #ece5d6; --btn-dark-ink: #15130e; --field-bg: #1a1712; --field-focus-bg: #221e17; --marker-ink: #ece5d6; --overlay: rgba(0, 0, 0, 0.6); } /* ============================ SKEU / LIGHT ============================ */ :root[data-theme="skeu"] { --page-bg: #e8e4da; --page-grid: transparent; --surface: #fbfaf6; --surface-sunken: #f4f2ea; --ink: #3e3a33; --ink-muted: #7d766a; --line: #b9b2a2; --line-width: 1px; --radius: 10px; --radius-pill: 999px; --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(62, 58, 51, 0.18), 0 10px 28px rgba(62, 58, 51, 0.16); --shadow-card-sm: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(62, 58, 51, 0.16); --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(62, 58, 51, 0.3); --shadow-btn-hover: var(--shadow-btn); --shadow-btn-active: inset 0 2px 5px rgba(62, 58, 51, 0.35); --shadow-inset: inset 0 2px 4px rgba(62, 58, 51, 0.22), 0 1px 0 rgba(255, 255, 255, 0.8); --accent: #c97f1b; --accent-ink: #4c3608; --ok-bg: #dcedcd; --ok-ink: #3c5526; --ok-line: #a4bf8c; --warn-bg: #fbf7e6; --warn-ink: #5c4d1d; --warn-line: #cbb977; --warn-icon: #c97f1b; --address-bg: #eae7de; --address-ink: #3e3a33; --address-line: #cdc7b8; --danger-bg: #f6dcd1; --danger-ink: #7a321f; --danger-line: #cf9f8d; --danger-btn: #d9543a; --danger-btn-ink: #ffffff; --violet-bg: #ece3f6; --violet-ink: #4a3a68; --violet-line: #b2a0cd; --violet-icon: #6d5590; --btn-bg: #e8e4da; --btn-ink: #3e3a33; --btn-dark-bg: #4c463d; --btn-dark-ink: #f7f4ec; --field-bg: #ffffff; --field-focus-bg: #ffffff; --marker-bg: rgba(255, 214, 79, 0.75); --marker-ink: #3e3a33; --overlay: rgba(50, 45, 38, 0.5); --font-display: 'Lucida Grande', 'Segoe UI', system-ui, sans-serif; --font-ui: 'Lucida Grande', 'Segoe UI', system-ui, -apple-system, Verdana, sans-serif; --caps: none; --track: 0.02em; --letterpress: 0 1px 0 rgba(255, 255, 255, 0.8); /* gloss gradient stops, reused by buttons and chrome */ --gloss-1: #ffffff; --gloss-2: #e8e4da; --gloss-3: #d9d3c5; --gloss-4: #cfc8b8; --gloss-line: #9b9384; --linen-1: rgba(255, 255, 255, 0.35); --linen-2: rgba(120, 110, 95, 0.08); } /* ============================ SKEU / DARK ============================ */ :root[data-theme="skeu"][data-mode="dark"] { --page-bg: #2a2723; --surface: #35322c; --surface-sunken: #2e2b26; --ink: #e8e2d6; --ink-muted: #a89f90; --line: #4d483f; --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.45); --shadow-card-sm: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-btn-active: inset 0 2px 5px rgba(0, 0, 0, 0.6); --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06); --accent: #e0a04a; --accent-ink: #2a1f0c; --ok-bg: #2b3a26; --ok-ink: #d8e8cc; --ok-line: #5a7a4c; --warn-bg: #322c17; --warn-ink: #ece0b8; --warn-line: #8a7638; --warn-icon: #e0a04a; --address-bg: #3c3730; --address-ink: #e8e2d6; --address-line: #575147; --danger-bg: #40251c; --danger-ink: #f0d4c8; --danger-line: #8d5a48; --danger-btn: #b8482c; --danger-btn-ink: #ffeee8; --violet-bg: #2e2839; --violet-ink: #ddd4ec; --violet-line: #6a5a8c; --violet-icon: #b0a0d8; --btn-bg: #3f3b34; --btn-ink: #e8e2d6; --btn-dark-bg: #22201c; --btn-dark-ink: #ede7db; --field-bg: #221f1b; --field-focus-bg: #262320; --marker-bg: rgba(180, 140, 40, 0.5); --marker-ink: #f0e4bc; --overlay: rgba(0, 0, 0, 0.65); --letterpress: 0 -1px 0 rgba(0, 0, 0, 0.5); --gloss-1: #575047; --gloss-2: #443f38; --gloss-3: #3a352f; --gloss-4: #322e29; --gloss-line: #211e1a; --linen-1: rgba(255, 255, 255, 0.05); --linen-2: rgba(0, 0, 0, 0.22); } /* ================================ BASE ================================ */ .b-body { background-color: var(--page-bg); color: var(--ink); font-family: var(--font-ui); min-height: 100vh; background-image: linear-gradient(var(--page-grid) 1px, transparent 1px), linear-gradient(90deg, var(--page-grid) 1px, transparent 1px); background-size: var(--page-grid-size) var(--page-grid-size); } /* Skeu swaps the grid for a woven linen texture */ :root[data-theme="skeu"] .b-body { background-image: repeating-linear-gradient(0deg, var(--linen-1) 0px, var(--linen-1) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, var(--linen-2) 0px, var(--linen-2) 1px, transparent 1px, transparent 3px); background-size: 3px 3px; } /* ================================ CARDS ================================ */ .b-card, .b-card-sm, .b-card-flat { background: var(--surface); border: var(--line-width) solid var(--line); border-radius: var(--radius); } .b-card { box-shadow: var(--shadow-card); } .b-card-sm { box-shadow: var(--shadow-card-sm); } .b-card-flat { background: var(--surface-sunken); box-shadow: var(--shadow-flat); } .b-card-yellow { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); } .b-card-green { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); } .b-card-red { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-line); } .b-card-violet { background: var(--violet-bg); color: var(--violet-ink); border-color: var(--violet-line); } /* Typo marks tinted panels with a coloured edge instead of a full border */ :root[data-theme="typo"] .b-card-yellow, :root[data-theme="typo"] .b-card-green, :root[data-theme="typo"] .b-card-red, :root[data-theme="typo"] .b-card-violet { border-color: var(--line); } :root[data-theme="typo"] .b-card-yellow { border-left: 3px solid var(--warn-line); } :root[data-theme="typo"] .b-card-green { border-left: 3px solid var(--ok-line); } :root[data-theme="typo"] .b-card-red { border-left: 3px solid var(--danger-line); } :root[data-theme="typo"] .b-card-violet { border-left: 3px solid var(--violet-line); } /* Skeu gives panels a soft vertical sheen; the warning panel gets stitching */ :root[data-theme="skeu"] .b-card, :root[data-theme="skeu"] .b-card-sm, :root[data-theme="skeu"] .b-card-flat { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); } :root[data-theme="skeu"][data-mode="dark"] .b-card, :root[data-theme="skeu"][data-mode="dark"] .b-card-sm, :root[data-theme="skeu"][data-mode="dark"] .b-card-flat { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%); } :root[data-theme="skeu"] .b-card-yellow { outline: 1px dashed var(--warn-line); outline-offset: -7px; } /* ================================ BUTTONS ================================ */ .b-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.1rem; background: var(--btn-bg); color: var(--btn-ink); border: var(--line-width) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-btn); font-family: var(--font-ui); font-weight: 700; font-size: 0.85rem; text-transform: var(--caps); letter-spacing: var(--track); text-shadow: var(--letterpress); cursor: pointer; text-decoration: none; transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease, color 0.15s ease; user-select: none; } .b-btn:hover { box-shadow: var(--shadow-btn-hover); } .b-btn:active { box-shadow: var(--shadow-btn-active); } .b-btn:disabled, .b-btn.b-disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: var(--shadow-btn); } .b-btn-lg { padding: 0.9rem 1.5rem; font-size: 1rem; } .b-btn-sm { padding: 0.4rem 0.75rem; font-size: 0.72rem; } .b-btn-dark { background: var(--btn-dark-bg); color: var(--btn-dark-ink); } .b-btn-yellow { background: var(--accent); color: var(--accent-ink); } .b-btn-red { background: var(--danger-btn); color: var(--danger-btn-ink); } /* Brutal: the button physically presses into the page */ :root:not([data-theme]) .b-btn:hover, :root[data-theme="brutal"] .b-btn:hover { transform: translate(2px, 2px); } :root:not([data-theme]) .b-btn:active, :root[data-theme="brutal"] .b-btn:active { transform: translate(4px, 4px); } :root:not([data-theme]) .b-btn-lg, :root[data-theme="brutal"] .b-btn-lg { box-shadow: 6px 6px 0 0 var(--line); } /* Small buttons sit inside cards that already cast a shadow; a third and fourth layer of hard shadow just muddies the row. They keep their border, which in this theme is plenty, and lift on hover instead. */ :root:not([data-theme]) .b-btn-sm, :root[data-theme="brutal"] .b-btn-sm { box-shadow: none; } :root:not([data-theme]) .b-btn-sm:hover, :root[data-theme="brutal"] .b-btn-sm:hover { transform: none; box-shadow: 2px 2px 0 0 var(--line); } :root:not([data-theme]) .b-btn-sm:active, :root[data-theme="brutal"] .b-btn-sm:active { transform: translate(1px, 1px); box-shadow: none; } :root[data-mode="dark"]:not([data-theme]) .b-btn-sm:hover { box-shadow: 2px 2px 0 0 #0b0b0d; } :root[data-mode="dark"]:not([data-theme]) .b-btn-lg, :root[data-mode="dark"][data-theme="brutal"] .b-btn-lg { box-shadow: 6px 6px 0 0 #0b0b0d; } /* Typo: outline buttons that fill in on hover, no movement */ :root[data-theme="typo"] .b-btn { border-color: var(--ink); font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; } :root[data-theme="typo"] .b-btn:hover { background: var(--ink); color: var(--surface); } :root[data-theme="typo"] .b-btn-dark:hover { background: var(--accent); color: var(--accent-ink); } :root[data-theme="typo"] .b-btn-yellow, :root[data-theme="typo"] .b-btn-red { border-color: var(--accent); color: var(--accent); background: transparent; } :root[data-theme="typo"] .b-btn-yellow:hover, :root[data-theme="typo"] .b-btn-red:hover { background: var(--accent); color: var(--accent-ink); } /* Skeu: glossy pills that depress when clicked */ :root[data-theme="skeu"] .b-btn { background: linear-gradient(180deg, var(--gloss-1) 0%, var(--gloss-2) 48%, var(--gloss-3) 52%, var(--gloss-4) 100%); border-color: var(--gloss-line); border-radius: 7px; } :root[data-theme="skeu"] .b-btn:hover { filter: brightness(1.05); } :root[data-theme="skeu"] .b-btn:active { transform: translateY(1px); background: linear-gradient(180deg, var(--gloss-4) 0%, var(--gloss-2) 100%); filter: none; } :root[data-theme="skeu"] .b-btn-dark { background: linear-gradient(180deg, #6b6357 0%, #4c463d 48%, #3e3a33 52%, #35312b 100%); color: #f7f4ec; border-color: #2c2822; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } :root[data-theme="skeu"] .b-btn-yellow { background: linear-gradient(180deg, #ffd978 0%, #f2b13e 48%, #e6a02a 52%, #d18f1c 100%); border-color: #a5751a; color: #4c3608; } :root[data-theme="skeu"] .b-btn-red { background: linear-gradient(180deg, #f2917c 0%, #d9543a 48%, #c94a30 52%, #b03a24 100%); border-color: #8e2e1c; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); } /* ================================ FORMS ================================ */ .b-input, .b-select { border: var(--line-width) solid var(--line); border-radius: var(--radius); background: var(--field-bg); color: var(--ink); font-family: var(--font-ui); font-weight: 500; padding: 0.5rem 0.75rem; box-shadow: var(--shadow-inset); outline: none; } .b-input:focus, .b-select:focus { background: var(--field-focus-bg); } /* Native dropdown lists follow the UA unless told otherwise */ .b-select option, .b-select-sm option { background: var(--field-bg); color: var(--ink); } .b-select-sm { border: var(--line-width) solid var(--line); border-radius: var(--radius); background: var(--field-bg); color: var(--ink); box-shadow: var(--shadow-inset); padding: 0.15rem 0.4rem; font-size: 0.72rem; font-weight: 700; font-family: var(--font-ui); } :root:not([data-theme]) .b-input, :root[data-theme="brutal"] .b-input, :root:not([data-theme]) .b-select, :root[data-theme="brutal"] .b-select { box-shadow: 3px 3px 0 0 var(--line); } :root[data-mode="dark"]:not([data-theme]) .b-input, :root[data-mode="dark"]:not([data-theme]) .b-select { box-shadow: 3px 3px 0 0 #0b0b0d; } /* Inline control inside a list row - border only */ :root:not([data-theme]) .b-select-sm, :root[data-theme="brutal"] .b-select-sm { box-shadow: none; } :root[data-theme="skeu"] .b-input, :root[data-theme="skeu"] .b-select, :root[data-theme="skeu"] .b-select-sm { border-radius: 6px; } /* ================================ TYPOGRAPHY ================================ */ .b-display { font-family: var(--font-display); text-transform: var(--caps); letter-spacing: -0.02em; line-height: 1; text-shadow: var(--letterpress); } /* Section headings: bold and large is loud enough without capitals */ .b-title { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.01em; text-shadow: var(--letterpress); } /* Small field label above a control - stays in spaced capitals in every theme, which is what makes it read as a label rather than as content */ .b-label { font-family: var(--font-ui); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); text-shadow: var(--letterpress); } :root[data-theme="typo"] .b-label { font-family: var(--font-mono); } .b-mono { font-family: var(--font-mono); } :root[data-theme="typo"] .b-title, :root[data-theme="typo"] .b-display { font-family: var(--font-display); letter-spacing: 0; } :root[data-theme="skeu"] .b-display, :root[data-theme="skeu"] .b-title { letter-spacing: -0.01em; } /* Wordmark: the second half of "MailDrop" is highlighted per theme */ .b-wordmark { background: var(--wordmark-bg); color: var(--wordmark-ink); padding: 0 0.15em; } :root[data-theme="typo"] .b-wordmark { background: transparent; color: var(--accent); font-style: italic; padding: 0; } :root[data-theme="skeu"] .b-wordmark { background: transparent; color: var(--accent); padding: 0; } /* ================================ SMALL BITS ================================ */ .b-chip { display: inline-flex; align-items: center; gap: 0.25rem; border: calc(var(--line-width) - 1px) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted); box-shadow: var(--shadow-card-sm); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 0.15rem 0.55rem; text-shadow: var(--letterpress); } :root:not([data-theme]) .b-chip, :root[data-theme="brutal"] .b-chip { box-shadow: none; color: var(--ink); } .b-badge { display: inline-block; background: var(--ink); color: var(--page-bg); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.6rem; border-radius: var(--radius); } :root[data-theme="typo"] .b-badge { background: transparent; color: var(--ink-muted); border-top: 1px solid var(--line); padding: 0.8rem 0 0; font-family: var(--font-mono); } .b-marker { background: var(--marker-bg); color: var(--marker-ink); box-shadow: 0 0 0 2px var(--marker-bg); } :root[data-theme="typo"] .b-marker { box-shadow: none; border-bottom: 2px solid var(--accent); padding-bottom: 1px; } :root[data-theme="skeu"] .b-marker { box-shadow: none; border-radius: 3px; padding: 0 3px; } .b-divider { border-top: var(--line-width) solid var(--line); } /* Icons carry the panel's colour, so the panel itself can stay calm */ .b-warn-icon { color: var(--warn-icon); } .b-violet-icon { color: var(--violet-icon); } .b-icon-box { display: inline-flex; align-items: center; justify-content: center; border: var(--line-width) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-btn); } :root[data-theme="typo"] .b-icon-box, :root[data-theme="skeu"] .b-icon-box { border-radius: var(--radius-pill); color: var(--accent); } /* ================================ TOP BAR / TABS ================================ */ .b-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .b-account { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.85rem 0.4rem 0.4rem; background: var(--surface); border: var(--line-width) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card-sm); max-width: 100%; } :root[data-theme="skeu"] .b-account, :root[data-theme="typo"] .b-account { border-radius: var(--radius-pill); } .b-tabs { display: flex; gap: 0; border-bottom: var(--line-width) solid var(--line); } :root[data-theme="typo"] .b-tabs { border-bottom-width: 1px; } .b-tab { appearance: none; border: var(--line-width) solid var(--line); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; background: transparent; color: var(--ink-muted); font-family: var(--font-ui); font-weight: 700; font-size: 0.8rem; text-transform: var(--caps); letter-spacing: var(--track); padding: 0.6rem 1.1rem; margin-bottom: calc(var(--line-width) * -1); cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; text-shadow: var(--letterpress); } .b-tab + .b-tab { margin-left: 0.4rem; } .b-tab:hover { color: var(--ink); } .b-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); } :root[data-theme="typo"] .b-tab { border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font-family: var(--font-mono); text-transform: uppercase; } :root[data-theme="typo"] .b-tab[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink); background: transparent; } :root[data-theme="skeu"] .b-tab { border-radius: 8px 8px 0 0; border-color: var(--gloss-line); } :root[data-theme="skeu"] .b-tab[aria-selected="true"] { background: linear-gradient(180deg, var(--gloss-1) 0%, var(--gloss-2) 100%); } /* ================================ SEGMENTED CONTROL ================================ */ .b-segment { display: inline-flex; flex-wrap: wrap; border: var(--line-width) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card-sm); overflow: hidden; } :root[data-theme="skeu"] .b-segment, :root[data-theme="typo"] .b-segment { border-radius: 6px; } .b-segment-btn { appearance: none; border: none; background: transparent; color: var(--ink-muted); font-family: var(--font-ui); font-weight: 700; font-size: 0.74rem; text-transform: var(--caps); letter-spacing: var(--track); padding: 0.5rem 0.9rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; text-shadow: var(--letterpress); } .b-segment-btn + .b-segment-btn { border-left: var(--line-width) solid var(--line); } .b-segment-btn:hover { color: var(--ink); } .b-segment-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } :root[data-theme="typo"] .b-segment-btn { font-family: var(--font-mono); text-transform: uppercase; } :root[data-theme="skeu"] .b-segment-btn[aria-pressed="true"] { background: linear-gradient(180deg, #ffd978 0%, #e6a02a 100%); color: #4c3608; } :root[data-theme="skeu"][data-mode="dark"] .b-segment-btn[aria-pressed="true"] { background: linear-gradient(180deg, #c9902f 0%, #a06f1c 100%); color: #2a1f0c; } /* ================================ ADDRESS ================================ */ /* Clickable e-mail address: copies to the clipboard on click. Deliberately quiet - the accent shows up on hover, not permanently. */ .b-address { appearance: none; border: none; background: var(--address-bg); color: var(--address-ink); font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600; padding: 0.1rem 0.25rem; cursor: pointer; text-align: left; word-break: break-all; border-radius: var(--radius); } .b-address:hover { outline: 2px solid var(--accent); outline-offset: 1px; } :root[data-theme="typo"] .b-address { background: transparent; border-bottom: 1px solid var(--address-line); border-radius: 0; } :root[data-theme="typo"] .b-address:hover { border-bottom-color: var(--accent); } :root[data-theme="typo"] .b-address:hover { outline: none; background: var(--warn-bg); } :root[data-theme="skeu"] .b-address { border-radius: 3px; } /* ================================ TOASTS / OVERLAY ================================ */ .b-toast { border: var(--line-width) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card-sm); background: var(--surface); color: var(--ink); font-family: var(--font-ui); font-weight: 700; } :root:not([data-theme]) .b-toast, :root[data-theme="brutal"] .b-toast { box-shadow: 5px 5px 0 0 var(--line); } :root[data-mode="dark"]:not([data-theme]) .b-toast { box-shadow: 5px 5px 0 0 #0b0b0d; } :root[data-theme="typo"] .b-toast, :root[data-theme="skeu"] .b-toast { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); } .b-toast-success { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); } .b-toast-error { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-line); } .b-toast-info { background: var(--violet-bg); color: var(--violet-ink); border-color: var(--violet-line); } .b-overlay { background: var(--overlay); } .b-spinner { width: 22px; height: 22px; border: 3px solid var(--line); background: var(--accent); animation: b-spin 0.7s steps(8) infinite; } :root[data-theme="typo"] .b-spinner, :root[data-theme="skeu"] .b-spinner { border-color: var(--line); border-top-color: var(--accent); border-radius: 50%; background: transparent; animation: b-spin 0.8s linear infinite; } @keyframes b-spin { to { transform: rotate(360deg); } } /* ================================ MOBILE ================================ */ @media (max-width: 640px) { .b-tab { flex: 1; justify-content: center; padding: 0.55rem 0.5rem; font-size: 0.72rem; } .b-segment { width: 100%; } .b-segment-btn { flex: 1; justify-content: center; } }