Jennie Robinson Faber
03dfdab20e
Bump --text-faint from #746a58 (4.01:1 on cream surfaces — fails AA) to #665c4b (4.94:1 — passes AA for small text). Preserves the "quieter than --text-dim" semantic the variable was named for. Lifts ~33 sites into compliance with one diff. Also keeps the BoardPostCard per-selector swap to --text-dim that shipped with the original /board fix; can revert to --text-faint in a follow-up now that the variable itself is accessible.
376 lines
8.9 KiB
CSS
376 lines
8.9 KiB
CSS
/*
|
|
* Ghost Guild Design System — Zine Direction
|
|
* ============================================
|
|
*
|
|
* Two fonts: Brygada 1918 (display/serif), Commit Mono (body/mono)
|
|
* Dashed borders, cream backgrounds, content-dense zine layout
|
|
* Single palette via CSS custom properties, minimal Tailwind @theme mapping
|
|
*/
|
|
|
|
@import "./fonts.css";
|
|
@import "tailwindcss";
|
|
@import "@nuxt/ui";
|
|
|
|
/* ---- COLOR TOKENS ---- */
|
|
|
|
:root {
|
|
--bg: #f4efe4;
|
|
--input-bg: #faf8f2;
|
|
--surface: #e8dfc8;
|
|
--surface-hover: #e0d6bc;
|
|
--border: #b8a880;
|
|
--border-d: #a89470;
|
|
--candle: #7a5a10;
|
|
--candle-dim: #866518;
|
|
--candle-faint: #c4a448;
|
|
--ember: #8a4420;
|
|
--text: #2a2015;
|
|
--text-bright: #1a1008;
|
|
--text-dim: #5a5040;
|
|
/* Darkened from #746a58 (4.01:1 on --surface, fails WCAG AA) to #665c4b
|
|
(4.94:1 on --surface, 5.13:1 on --bg). Stays visually quieter than
|
|
--text-dim (5.80:1) while meeting AA for small text. */
|
|
--text-faint: #665c4b;
|
|
--parch: #2a2015;
|
|
--parch-hover: #3a3025;
|
|
--parch-text: #ede4d0;
|
|
--parch-text-dim: #b8ae98;
|
|
--parch-accent: #c4a448;
|
|
--parch-border: #b8a880;
|
|
--c-community: #7a4838;
|
|
--c-founder: #8a4420;
|
|
--c-practitioner: #2a4650;
|
|
--green: #4a6a38;
|
|
--green-bg: rgba(74, 106, 56, 0.08);
|
|
--ember-bg: rgba(138, 68, 32, 0.1);
|
|
--page-pad-x: 28px;
|
|
--page-pad-y: 24px;
|
|
--page-collapse: 1024px;
|
|
}
|
|
|
|
.dark {
|
|
--bg: #131210;
|
|
--input-bg: #1c1a17;
|
|
--surface: #1a1815;
|
|
--surface-hover: #252220;
|
|
--border: #2a2520;
|
|
--border-d: #3a3530;
|
|
--candle: #d4a03a;
|
|
--candle-dim: #b8922e;
|
|
--candle-faint: #8a7030;
|
|
--ember: #ca6a3a;
|
|
--text: #a89880;
|
|
--text-bright: #d0c8b0;
|
|
--text-dim: #958774;
|
|
--text-faint: #8b7b62;
|
|
/* Parch family intentionally stays pinned to light-mode values —
|
|
inverted blocks are a consistent zine/terminal inset in both themes.
|
|
See: --parch-accent and --parch-border for on-parch accents/borders. */
|
|
--c-community: #a06850;
|
|
--c-founder: #c06030;
|
|
--c-practitioner: #4a7080;
|
|
--green: #6e9c52;
|
|
--green-bg: rgba(110, 156, 82, 0.12);
|
|
--ember-bg: rgba(202, 106, 58, 0.14);
|
|
--page-pad-x: 28px;
|
|
--page-pad-y: 24px;
|
|
--page-collapse: 1024px;
|
|
}
|
|
|
|
/* ---- TAILWIND @THEME MAPPING ---- */
|
|
|
|
@theme {
|
|
--font-sans: "Commit Mono", monospace;
|
|
--font-body: "Commit Mono", monospace;
|
|
--font-mono: "Commit Mono", monospace;
|
|
--font-display: "Brygada 1918", serif;
|
|
--font-serif: "Brygada 1918", serif;
|
|
|
|
/* Map primary to candle for Nuxt UI components */
|
|
--color-primary-500: var(--candle);
|
|
--color-primary-600: var(--candle-dim);
|
|
--color-primary-400: var(--candle-faint);
|
|
}
|
|
|
|
/* ---- BASE STYLES ---- */
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: "Commit Mono", monospace;
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ---- NOISE TEXTURE OVERLAY ---- */
|
|
body::after {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
background: url("~/assets/images/noise.webp") repeat;
|
|
opacity: 0.025;
|
|
}
|
|
|
|
a {
|
|
color: var(--candle);
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p a, blockquote a {
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
/* ---- SECTION LABELS ---- */
|
|
.section-label {
|
|
font-size: 10px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: var(--text-faint);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* ---- CIRCLE BADGES (dashed) ---- */
|
|
.badge {
|
|
display: inline-block;
|
|
font-size: 10px;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
padding: 2px 8px;
|
|
border: 1px dashed;
|
|
}
|
|
.badge.community {
|
|
color: var(--c-community);
|
|
border-color: rgba(122, 72, 56, 0.35);
|
|
}
|
|
.badge.founder {
|
|
color: var(--c-founder);
|
|
border-color: rgba(138, 68, 32, 0.35);
|
|
}
|
|
.badge.practitioner {
|
|
color: var(--c-practitioner);
|
|
border-color: rgba(42, 70, 80, 0.35);
|
|
}
|
|
.badge.all {
|
|
color: var(--text-dim);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* ---- BUTTONS ---- */
|
|
.btn {
|
|
font-family: "Commit Mono", monospace;
|
|
font-size: 12px;
|
|
padding: 7px 18px;
|
|
border: 1px dashed var(--border);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
letter-spacing: 0.04em;
|
|
transition: all 0.15s;
|
|
}
|
|
.btn:hover {
|
|
background: var(--surface-hover);
|
|
border-color: var(--border-d);
|
|
}
|
|
/* WCAG 2.4.7 — keyboard focus must be visibly indicated. Dashed outline
|
|
echoes the design system's zine/dashed aesthetic. */
|
|
.btn:focus-visible {
|
|
outline: 2px dashed var(--candle);
|
|
outline-offset: 3px;
|
|
}
|
|
.btn-primary {
|
|
background: var(--candle);
|
|
color: var(--bg);
|
|
border-color: var(--candle);
|
|
border-style: solid;
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--candle-dim);
|
|
border-color: var(--candle-dim);
|
|
}
|
|
.btn-danger {
|
|
color: var(--ember);
|
|
border-color: var(--ember);
|
|
}
|
|
.btn-danger:hover {
|
|
background: var(--ember);
|
|
color: var(--bg);
|
|
border-style: solid;
|
|
}
|
|
|
|
/* ---- FORM FIELDS ---- */
|
|
.field {
|
|
margin-bottom: 12px;
|
|
}
|
|
.field label {
|
|
font-size: 10px;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--text-faint);
|
|
margin-bottom: 3px;
|
|
display: block;
|
|
}
|
|
.field input,
|
|
.field select,
|
|
.field textarea {
|
|
width: 100%;
|
|
padding: 5px 8px;
|
|
font-family: "Commit Mono", monospace;
|
|
font-size: 13px;
|
|
color: var(--text-bright);
|
|
background: var(--input-bg);
|
|
border: 1px dashed var(--border);
|
|
outline: none;
|
|
}
|
|
.field input:focus,
|
|
.field select:focus,
|
|
.field textarea:focus {
|
|
border-color: var(--candle);
|
|
border-style: solid;
|
|
}
|
|
|
|
/* ---- DASHED BOX ---- */
|
|
.dashed-box {
|
|
border: 1px dashed var(--border);
|
|
padding: 20px 24px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
.dashed-box:hover {
|
|
border-color: var(--candle-faint);
|
|
}
|
|
.dashed-box.no-hover:hover {
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* ---- SEGMENTED CONTROL (flush dashed-border groups) ---- */
|
|
/* Negative-margin overlap: every item keeps all 4 borders,
|
|
siblings overlap by 1px, active item paints on top via z-index. */
|
|
.segmented {
|
|
display: flex;
|
|
}
|
|
.segmented > * {
|
|
position: relative;
|
|
}
|
|
.segmented > * + * {
|
|
margin-left: -1px;
|
|
}
|
|
|
|
/* ---- SECTION DIVIDERS ---- */
|
|
.section-divider {
|
|
display: block;
|
|
width: 100%;
|
|
max-width: none;
|
|
box-sizing: border-box;
|
|
border: 0;
|
|
border-top: 1px dashed var(--border);
|
|
margin: 20px 0 14px;
|
|
padding: 0;
|
|
flex: 0 0 auto;
|
|
align-self: stretch;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ---- Nuxt UI placeholder contrast ----
|
|
Default Nuxt UI placeholder uses `text-dimmed` (#a6a09b) which fails WCAG
|
|
AA on cream and white backgrounds (≈2.4:1). Override globally to --text-dim
|
|
so USelect/USelectMenu placeholders meet the 4.5:1 ratio. */
|
|
[data-slot="placeholder"] {
|
|
color: var(--text-dim);
|
|
}
|
|
|
|
/* ---- SHARED USelectMenu STYLES ----
|
|
Apply via: <USelectMenu class="zine-select" :ui="{ content: 'tz-content', item: 'tz-item', input: 'tz-input' }" />
|
|
Classes are global (not scoped) because Nuxt UI portals the popup content to body. */
|
|
button.zine-select,
|
|
button.timezone-select {
|
|
display: flex !important;
|
|
width: 100%;
|
|
padding: 5px 8px !important;
|
|
font-family: "Commit Mono", monospace !important;
|
|
font-size: 13px !important;
|
|
color: var(--text-bright) !important;
|
|
background: var(--input-bg) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
outline: none !important;
|
|
min-height: 0;
|
|
--tw-ring-shadow: 0 0 #0000;
|
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
--tw-ring-color: transparent;
|
|
}
|
|
|
|
button.zine-select:hover,
|
|
button.timezone-select:hover {
|
|
background: var(--input-bg) !important;
|
|
}
|
|
|
|
button.zine-select:focus,
|
|
button.zine-select:focus-visible,
|
|
button.zine-select[aria-expanded="true"],
|
|
button.timezone-select:focus,
|
|
button.timezone-select:focus-visible,
|
|
button.timezone-select[aria-expanded="true"] {
|
|
border-color: var(--candle) !important;
|
|
}
|
|
|
|
.tz-content {
|
|
background: var(--input-bg) !important;
|
|
border: 1px solid var(--border) !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
|
|
--tw-ring-shadow: 0 0 #0000 !important;
|
|
--tw-ring-offset-shadow: 0 0 #0000 !important;
|
|
font-family: "Commit Mono", monospace !important;
|
|
}
|
|
|
|
.tz-input {
|
|
border-bottom: 1px dashed var(--border) !important;
|
|
}
|
|
|
|
.tz-input input {
|
|
font-family: "Commit Mono", monospace !important;
|
|
font-size: 13px !important;
|
|
color: var(--text-bright) !important;
|
|
background: transparent !important;
|
|
border-radius: 0 !important;
|
|
padding: 6px 8px !important;
|
|
box-shadow: none !important;
|
|
--tw-ring-shadow: 0 0 #0000 !important;
|
|
--tw-ring-offset-shadow: 0 0 #0000 !important;
|
|
}
|
|
|
|
.tz-item {
|
|
font-family: "Commit Mono", monospace !important;
|
|
font-size: 13px !important;
|
|
color: var(--text) !important;
|
|
border-radius: 0 !important;
|
|
padding: 6px 8px !important;
|
|
}
|
|
|
|
.tz-item::before {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
.tz-item[data-highlighted]::before,
|
|
.tz-item[data-highlighted]:not([data-disabled])::before {
|
|
background: var(--surface-hover) !important;
|
|
}
|
|
|
|
.tz-item[data-highlighted],
|
|
.tz-item[data-highlighted]:not([data-disabled]) {
|
|
color: var(--text-bright) !important;
|
|
}
|
|
|
|
/* ---- MOBILE ---- */
|
|
@media (max-width: 1023px) {
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
}
|