Jennie Robinson Faber
c40f2c7c63
Add aria-labels to form controls (selects, checkboxes, switches), set html lang attribute and page title, fix color contrast for --candle-dim and --text-faint tokens, underline inline links, remove opacity hack. Harden dev login endpoints with atomic findOneAndUpdate and tokenVersion in JWT. Update Playwright timeouts and E2E test helpers.
201 lines
4.8 KiB
CSS
201 lines
4.8 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;
|
|
--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;
|
|
--text-faint: #746a58;
|
|
--parch: #2a2015;
|
|
--parch-hover: #3a3025;
|
|
--parch-text: #ede4d0;
|
|
--parch-text-dim: #b8ae98;
|
|
--c-community: #7a4838;
|
|
--c-founder: #8a4420;
|
|
--c-practitioner: #2a4650;
|
|
--green: #4a6a38;
|
|
--green-bg: rgba(74, 106, 56, 0.08);
|
|
}
|
|
|
|
.dark {
|
|
--bg: #131210;
|
|
--surface: #1a1815;
|
|
--surface-hover: #252220;
|
|
--border: #2a2520;
|
|
--border-d: #3a3530;
|
|
--candle: #d4a03a;
|
|
--candle-dim: #b8922e;
|
|
--candle-faint: #8a7030;
|
|
--ember: #c06030;
|
|
--text: #a89880;
|
|
--text-bright: #d0c8b0;
|
|
--text-dim: #8a7e6a;
|
|
--text-faint: #5a5040;
|
|
--parch: #ede4d0;
|
|
--parch-hover: #d4c8a8;
|
|
--parch-text: #2a2015;
|
|
--parch-text-dim: #5a5040;
|
|
--c-community: #a06850;
|
|
--c-founder: #c06030;
|
|
--c-practitioner: #4a7080;
|
|
}
|
|
|
|
/* ---- 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;
|
|
}
|
|
|
|
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); }
|
|
.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(--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); }
|
|
|
|
/* ---- 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;
|
|
}
|
|
|
|
/* ---- MOBILE ---- */
|
|
@media (max-width: 1023px) {
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
}
|