feat: replace design system tokens with zine direction palette and typography
This commit is contained in:
parent
30ac314a74
commit
238d68d063
4 changed files with 173 additions and 629 deletions
|
|
@ -4,15 +4,9 @@ export default defineAppConfig({
|
|||
primary: "amber",
|
||||
neutral: "stone",
|
||||
},
|
||||
formField: {
|
||||
slots: {
|
||||
label: "block font-medium text-[--ui-text-dimmed]",
|
||||
},
|
||||
},
|
||||
},
|
||||
colorMode: {
|
||||
preference: "system", // default value of $colorMode.preference
|
||||
fallback: "dark", // fallback value if not system preference found
|
||||
classSuffix: "", // default is '', set to '-mode' to have 'dark-mode' and 'light-mode'
|
||||
preference: "light",
|
||||
fallback: "light",
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,47 +1,8 @@
|
|||
/*
|
||||
* Font declarations for Ghost Guild
|
||||
* Font declarations for Ghost Guild — Zine Direction
|
||||
*
|
||||
* Quietism: Display/heading font (serif)
|
||||
* Place woff2 files in public/fonts/
|
||||
* Expected files: Quietism-Regular.woff2, Quietism-Medium.woff2,
|
||||
* Quietism-Bold.woff2, Quietism-Italic.woff2
|
||||
* Brygada 1918: Display/heading serif (Google Fonts, variable 400-700, italic)
|
||||
* Commit Mono: Body/UI monospace (Google Fonts)
|
||||
*
|
||||
* Inter and Ubuntu Mono are loaded via @nuxt/fonts module.
|
||||
* See nuxt.config.ts for configuration.
|
||||
* Loaded via Google Fonts link in nuxt.config.ts head.
|
||||
*/
|
||||
|
||||
/* @font-face declarations commented out until .woff2 files are added to public/fonts/
|
||||
Uncomment these when Quietism font files are available:
|
||||
|
||||
@font-face {
|
||||
font-family: "Quietism";
|
||||
src: url("/fonts/Quietism-Regular.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Quietism";
|
||||
src: url("/fonts/Quietism-Medium.woff2") format("woff2");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Quietism";
|
||||
src: url("/fonts/Quietism-Bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Quietism";
|
||||
src: url("/fonts/Quietism-Italic.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,615 +1,188 @@
|
|||
/*
|
||||
* Ghost Guild Design System
|
||||
* ========================
|
||||
* Ghost Guild Design System — Zine Direction
|
||||
* ============================================
|
||||
*
|
||||
* Token naming convention:
|
||||
* --color-{palette}-{shade} Color palettes (50-950 scale)
|
||||
* --color-circle-{name}-{variant} Circle-specific tokens
|
||||
* --font-{role} Font family tokens
|
||||
* --text-{scale} Typographic scale
|
||||
* --leading-{role} Line heights
|
||||
* --tracking-{role} Letter spacing
|
||||
*
|
||||
* Palettes:
|
||||
* guild-* Warm neutral ground (dark hall / workshop)
|
||||
* candlelight-* Primary warm accent (amber/gold/ochre)
|
||||
* parchment-* Light content surfaces (cream/vellum)
|
||||
* ember-* Secondary warm accent (deeper amber/rust)
|
||||
* earth-* Tertiary muted tones (brown/ochre)
|
||||
*
|
||||
* Usage guidelines:
|
||||
* Backgrounds: guild-900/950 (dark), parchment-50/100 (light surfaces)
|
||||
* Text primary: guild-100 (dark mode), guild-900 (light mode)
|
||||
* Text secondary: guild-300/400
|
||||
* Borders: guild-700 (dark), guild-300 (light)
|
||||
* Accents: candlelight-* for links, highlights, interactive
|
||||
* Surfaces: parchment-* for readable content areas
|
||||
*
|
||||
* Effect classes:
|
||||
* .ink-grain Subtle noise overlay (mix-blend-mode: overlay)
|
||||
* .paper-texture Paper fiber overlay
|
||||
* .woodcut-border Irregular line border via border-image
|
||||
* .candlelight-glow Warm box-shadow (replaces .ethereal-glow)
|
||||
* .warm-text Warm text-shadow (replaces .ethereal-text)
|
||||
* .guild-stamp Circular decorative double-border frame
|
||||
* .halftone-texture Dot pattern overlay (updated for warm palette)
|
||||
* .dithered-bg Cross-hatch dither pattern
|
||||
* .dithered-warm Amber-tinted dither variant
|
||||
* .prose-guild Wiki/long-form content styling
|
||||
* 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";
|
||||
|
||||
@plugin "@tailwindcss/typography";
|
||||
/* ---- COLOR TOKENS ---- */
|
||||
|
||||
@theme {
|
||||
/* Font families */
|
||||
--font-sans: "Inter", sans-serif;
|
||||
--font-body: "Inter", sans-serif;
|
||||
--font-mono: "Ubuntu Mono", monospace;
|
||||
--font-display: "Georgia", serif;
|
||||
--font-serif: "Georgia", serif;
|
||||
|
||||
/* Guild - warm neutral ground (light mode: dark values for text on light bg) */
|
||||
--color-guild-50: #1a1510;
|
||||
--color-guild-100: #2a241c;
|
||||
--color-guild-200: #3a332a;
|
||||
--color-guild-300: #524939;
|
||||
--color-guild-400: #6b5f4d;
|
||||
--color-guild-500: #8a7c68;
|
||||
--color-guild-600: #a49585;
|
||||
--color-guild-700: #bfb3a2;
|
||||
--color-guild-800: #d9d0c3;
|
||||
--color-guild-900: #f0ebe4;
|
||||
--color-guild-950: #f8f5f0;
|
||||
|
||||
/* Candlelight - primary warm accent (amber/gold/ochre) */
|
||||
--color-candlelight-50: #1f1708;
|
||||
--color-candlelight-100: #3d2c0f;
|
||||
--color-candlelight-200: #5c4118;
|
||||
--color-candlelight-300: #7b5822;
|
||||
--color-candlelight-400: #9a6f2c;
|
||||
--color-candlelight-500: #b8873a;
|
||||
--color-candlelight-600: #d09e4e;
|
||||
--color-candlelight-700: #e0b86e;
|
||||
--color-candlelight-800: #ecd09a;
|
||||
--color-candlelight-900: #f5e6c5;
|
||||
--color-candlelight-950: #faf2e0;
|
||||
|
||||
/* Parchment - light content surfaces (cream/vellum) */
|
||||
--color-parchment-50: #1d1a14;
|
||||
--color-parchment-100: #332e24;
|
||||
--color-parchment-200: #4a4234;
|
||||
--color-parchment-300: #635844;
|
||||
--color-parchment-400: #7d6e56;
|
||||
--color-parchment-500: #97866c;
|
||||
--color-parchment-600: #afa088;
|
||||
--color-parchment-700: #c8baa5;
|
||||
--color-parchment-800: #ddd3c3;
|
||||
--color-parchment-900: #f0ebe0;
|
||||
--color-parchment-950: #f9f6f0;
|
||||
|
||||
/* Ember - secondary warm accent (deeper amber/rust) */
|
||||
--color-ember-50: #1e120b;
|
||||
--color-ember-100: #3b2215;
|
||||
--color-ember-200: #58321f;
|
||||
--color-ember-300: #76432a;
|
||||
--color-ember-400: #945535;
|
||||
--color-ember-500: #b26840;
|
||||
--color-ember-600: #c87e55;
|
||||
--color-ember-700: #da9a72;
|
||||
--color-ember-800: #e8b899;
|
||||
--color-ember-900: #f3d6c0;
|
||||
--color-ember-950: #f9ebe0;
|
||||
|
||||
/* Earth - tertiary muted tones (brown/ochre) */
|
||||
--color-earth-50: #17140e;
|
||||
--color-earth-100: #2d271c;
|
||||
--color-earth-200: #433a2a;
|
||||
--color-earth-300: #5a4d39;
|
||||
--color-earth-400: #726148;
|
||||
--color-earth-500: #8a7658;
|
||||
--color-earth-600: #a08c6d;
|
||||
--color-earth-700: #b7a487;
|
||||
--color-earth-800: #cebda4;
|
||||
--color-earth-900: #e5d7c2;
|
||||
--color-earth-950: #f2ece1;
|
||||
:root {
|
||||
--bg: #f4efe4;
|
||||
--surface: #e8dfc8;
|
||||
--surface-hover: #e0d6bc;
|
||||
--border: #b8a880;
|
||||
--border-d: #a89470;
|
||||
--candle: #7a5a10;
|
||||
--candle-dim: #9a7420;
|
||||
--candle-faint: #c4a448;
|
||||
--ember: #8a4420;
|
||||
--text: #2a2015;
|
||||
--text-bright: #1a1008;
|
||||
--text-dim: #5a5040;
|
||||
--text-faint: #8a7e6a;
|
||||
--parch: #2a2015;
|
||||
--parch-text: #ede4d0;
|
||||
--c-community: #7a4838;
|
||||
--c-founder: #8a4420;
|
||||
--c-practitioner: #2a4650;
|
||||
--green: #4a6a38;
|
||||
--green-bg: rgba(74, 106, 56, 0.08);
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Guild - warm neutral (dark mode: light values) */
|
||||
--color-guild-50: #f0ebe4;
|
||||
--color-guild-100: #d9d0c3;
|
||||
--color-guild-200: #bfb3a2;
|
||||
--color-guild-300: #a49585;
|
||||
--color-guild-400: #8a7c68;
|
||||
--color-guild-500: #6b5f4d;
|
||||
--color-guild-600: #524939;
|
||||
--color-guild-700: #3a332a;
|
||||
--color-guild-800: #2a241c;
|
||||
--color-guild-900: #1a1510;
|
||||
--color-guild-950: #110e0a;
|
||||
|
||||
/* Candlelight - primary warm accent (dark mode) */
|
||||
--color-candlelight-50: #faf2e0;
|
||||
--color-candlelight-100: #f5e6c5;
|
||||
--color-candlelight-200: #ecd09a;
|
||||
--color-candlelight-300: #e0b86e;
|
||||
--color-candlelight-400: #d09e4e;
|
||||
--color-candlelight-500: #b8873a;
|
||||
--color-candlelight-600: #9a6f2c;
|
||||
--color-candlelight-700: #7b5822;
|
||||
--color-candlelight-800: #5c4118;
|
||||
--color-candlelight-900: #3d2c0f;
|
||||
--color-candlelight-950: #1f1708;
|
||||
|
||||
/* Parchment - light content surfaces (dark mode) */
|
||||
--color-parchment-50: #f9f6f0;
|
||||
--color-parchment-100: #f0ebe0;
|
||||
--color-parchment-200: #ddd3c3;
|
||||
--color-parchment-300: #c8baa5;
|
||||
--color-parchment-400: #afa088;
|
||||
--color-parchment-500: #97866c;
|
||||
--color-parchment-600: #7d6e56;
|
||||
--color-parchment-700: #635844;
|
||||
--color-parchment-800: #4a4234;
|
||||
--color-parchment-900: #332e24;
|
||||
--color-parchment-950: #1d1a14;
|
||||
|
||||
/* Ember - secondary warm accent (dark mode) */
|
||||
--color-ember-50: #f9ebe0;
|
||||
--color-ember-100: #f3d6c0;
|
||||
--color-ember-200: #e8b899;
|
||||
--color-ember-300: #da9a72;
|
||||
--color-ember-400: #c87e55;
|
||||
--color-ember-500: #b26840;
|
||||
--color-ember-600: #945535;
|
||||
--color-ember-700: #76432a;
|
||||
--color-ember-800: #58321f;
|
||||
--color-ember-900: #3b2215;
|
||||
--color-ember-950: #1e120b;
|
||||
|
||||
/* Earth - tertiary muted tones (dark mode) */
|
||||
--color-earth-50: #f2ece1;
|
||||
--color-earth-100: #e5d7c2;
|
||||
--color-earth-200: #cebda4;
|
||||
--color-earth-300: #b7a487;
|
||||
--color-earth-400: #a08c6d;
|
||||
--color-earth-500: #8a7658;
|
||||
--color-earth-600: #726148;
|
||||
--color-earth-700: #5a4d39;
|
||||
--color-earth-800: #433a2a;
|
||||
--color-earth-900: #2d271c;
|
||||
--color-earth-950: #17140e;
|
||||
--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-text: #2a2015;
|
||||
--c-community: #a06850;
|
||||
--c-founder: #c06030;
|
||||
--c-practitioner: #4a7080;
|
||||
}
|
||||
|
||||
/* Circle-specific tokens */
|
||||
:root {
|
||||
/* Community - warm hearth amber */
|
||||
--color-circle-community: #b8873a;
|
||||
--color-circle-community-light: #e0b86e;
|
||||
--color-circle-community-dark: #7b5822;
|
||||
--color-circle-community-bg: rgba(184, 135, 58, 0.1);
|
||||
/* ---- TAILWIND @THEME MAPPING ---- */
|
||||
|
||||
/* Founder - forge copper/orange */
|
||||
--color-circle-founder: #b26840;
|
||||
--color-circle-founder-light: #da9a72;
|
||||
--color-circle-founder-dark: #76432a;
|
||||
--color-circle-founder-bg: rgba(178, 104, 64, 0.1);
|
||||
@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;
|
||||
|
||||
/* Practitioner - sage green (growth, wisdom, mentorship) */
|
||||
--color-circle-practitioner: #6b7c58;
|
||||
--color-circle-practitioner-light: #8fa47a;
|
||||
--color-circle-practitioner-dark: #4a5a39;
|
||||
--color-circle-practitioner-bg: rgba(107, 124, 88, 0.1);
|
||||
|
||||
/* Typographic scale */
|
||||
--text-display-xl: 3.5rem;
|
||||
--text-display-lg: 2.5rem;
|
||||
--text-display: 2rem;
|
||||
--text-display-sm: 1.5rem;
|
||||
--text-body-lg: 1.125rem;
|
||||
--text-body: 1rem;
|
||||
--text-body-sm: 0.875rem;
|
||||
--text-caption: 0.75rem;
|
||||
--text-overline: 0.6875rem;
|
||||
|
||||
/* Line heights */
|
||||
--leading-display: 1.15;
|
||||
--leading-body: 1.65;
|
||||
|
||||
/* Letter spacing */
|
||||
--tracking-display: -0.02em;
|
||||
--tracking-wide: 0.05em;
|
||||
|
||||
/* Ambient background - warm radial gradients */
|
||||
--ambient-bg:
|
||||
radial-gradient(
|
||||
circle at 20% 80%,
|
||||
rgba(184, 135, 58, 0.03) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 20%,
|
||||
rgba(178, 104, 64, 0.02) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 40% 40%,
|
||||
rgba(138, 118, 88, 0.01) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
|
||||
--halftone-pattern: radial-gradient(
|
||||
circle,
|
||||
rgba(42, 36, 28, 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
--halftone-size: 8px 8px;
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* Dark mode - doubled opacity for perceptible candlelight warmth */
|
||||
.dark:root {
|
||||
--ambient-bg:
|
||||
radial-gradient(
|
||||
circle at 20% 80%,
|
||||
rgba(224, 184, 110, 0.06) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 20%,
|
||||
rgba(218, 154, 114, 0.04) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 50% 50%,
|
||||
rgba(183, 164, 135, 0.02) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
|
||||
--halftone-pattern: radial-gradient(
|
||||
circle,
|
||||
rgba(240, 235, 228, 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
}
|
||||
|
||||
html {
|
||||
@apply text-[--ui-text];
|
||||
}
|
||||
/* ---- BASE STYLES ---- */
|
||||
|
||||
body {
|
||||
background: var(--ambient-bg), #f0ebe4;
|
||||
background-attachment: fixed;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.dark body {
|
||||
background: var(--ambient-bg), #1a1510;
|
||||
}
|
||||
a { color: var(--candle); text-decoration: none; }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
/* Display typography utilities */
|
||||
.text-display-xl {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display-xl);
|
||||
line-height: var(--leading-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
|
||||
.text-display-lg {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display-lg);
|
||||
line-height: var(--leading-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
|
||||
.text-display {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display);
|
||||
line-height: var(--leading-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
|
||||
.text-display-sm {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-display-sm);
|
||||
line-height: var(--leading-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
|
||||
/* Halftone texture overlay */
|
||||
.halftone-texture {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.halftone-texture::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--halftone-pattern);
|
||||
background-size: var(--halftone-size);
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Craft/Material Effects */
|
||||
|
||||
/* Warm box-shadow (replaces .ethereal-glow) */
|
||||
.candlelight-glow {
|
||||
box-shadow:
|
||||
0 0 20px rgba(184, 135, 58, 0.12),
|
||||
0 0 40px rgba(184, 135, 58, 0.06),
|
||||
inset 0 1px 0 rgba(240, 235, 228, 0.08);
|
||||
}
|
||||
|
||||
/* Warm text-shadow (replaces .ethereal-text) */
|
||||
.warm-text {
|
||||
text-shadow: 0 0 10px rgba(224, 184, 110, 0.25);
|
||||
}
|
||||
|
||||
/* Subtle noise overlay - SVG filter based, no image dependency */
|
||||
.ink-grain {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ink-grain::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
filter: url(#grain-fine);
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0.04;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Paper fiber overlay - SVG filter based */
|
||||
.paper-texture {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.paper-texture::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
filter: url(#grain-paper);
|
||||
opacity: 0.04;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Generic grain overlay utility */
|
||||
.texture-grain-overlay {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.texture-grain-overlay::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
filter: url(#grain-fine);
|
||||
opacity: 0.035;
|
||||
mix-blend-mode: overlay;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Irregular line border */
|
||||
.woodcut-border {
|
||||
border-image: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--color-guild-700) 0px,
|
||||
var(--color-guild-600) 2px,
|
||||
var(--color-guild-700) 3px,
|
||||
transparent 3px,
|
||||
transparent 6px
|
||||
) 4;
|
||||
}
|
||||
|
||||
/* Circular decorative frame */
|
||||
.guild-stamp {
|
||||
border: 2px solid var(--color-candlelight-600);
|
||||
outline: 2px solid var(--color-candlelight-700);
|
||||
outline-offset: 3px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Warm interior feel for content areas - enclosed, lit space */
|
||||
.guild-interior {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(26, 21, 16, 0.2) 0%, transparent 200px),
|
||||
var(--ambient-bg);
|
||||
box-shadow:
|
||||
inset 0 2px 12px rgba(26, 21, 16, 0.12),
|
||||
inset 0 0 60px rgba(26, 21, 16, 0.04);
|
||||
}
|
||||
|
||||
/* Dithered gradients */
|
||||
.dithered-bg {
|
||||
background:
|
||||
linear-gradient(45deg, var(--color-guild-800) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--color-guild-800) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--color-guild-700) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--color-guild-700) 75%);
|
||||
background-size: 4px 4px;
|
||||
background-position:
|
||||
0 0,
|
||||
0 2px,
|
||||
2px -2px,
|
||||
-2px 0px;
|
||||
}
|
||||
|
||||
/* Amber-tinted dither variant */
|
||||
.dithered-warm {
|
||||
background:
|
||||
linear-gradient(45deg, var(--color-candlelight-800) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--color-candlelight-800) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--color-candlelight-700) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--color-candlelight-700) 75%);
|
||||
background-size: 4px 4px;
|
||||
background-position:
|
||||
0 0,
|
||||
0 2px,
|
||||
2px -2px,
|
||||
-2px 0px;
|
||||
}
|
||||
|
||||
/* Fine dither - 2px, subtle surface texture */
|
||||
.dithered-fine {
|
||||
background-image:
|
||||
linear-gradient(45deg, var(--color-guild-700) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--color-guild-700) 25%, transparent 25%);
|
||||
background-size: 2px 2px;
|
||||
}
|
||||
|
||||
/* Dither fade - gradient from dithered to solid */
|
||||
.dithered-fade-top {
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
var(--color-guild-800) 0px,
|
||||
var(--color-guild-800) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
);
|
||||
mask-image: linear-gradient(to bottom, black, transparent);
|
||||
-webkit-mask-image: linear-gradient(to bottom, black, transparent);
|
||||
}
|
||||
|
||||
.dithered-fade-bottom {
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
0deg,
|
||||
var(--color-guild-800) 0px,
|
||||
var(--color-guild-800) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px
|
||||
);
|
||||
mask-image: linear-gradient(to top, black, transparent);
|
||||
-webkit-mask-image: linear-gradient(to top, black, transparent);
|
||||
}
|
||||
|
||||
/* Circle badge utilities */
|
||||
.circle-badge-community {
|
||||
background-color: var(--color-circle-community-bg);
|
||||
color: var(--color-circle-community-light);
|
||||
border: 1px solid color-mix(in srgb, var(--color-circle-community) 40%, transparent);
|
||||
}
|
||||
|
||||
.circle-badge-founder {
|
||||
background-color: var(--color-circle-founder-bg);
|
||||
color: var(--color-circle-founder-light);
|
||||
border: 1px solid color-mix(in srgb, var(--color-circle-founder) 40%, transparent);
|
||||
}
|
||||
|
||||
.circle-badge-practitioner {
|
||||
background-color: var(--color-circle-practitioner-bg);
|
||||
color: var(--color-circle-practitioner-light);
|
||||
border: 1px solid color-mix(in srgb, var(--color-circle-practitioner) 40%, transparent);
|
||||
}
|
||||
|
||||
/* Circle surface treatments - subtle background for circle-specific sections */
|
||||
.circle-surface-community {
|
||||
background-color: var(--color-circle-community-bg);
|
||||
}
|
||||
|
||||
.circle-surface-founder {
|
||||
background-color: var(--color-circle-founder-bg);
|
||||
}
|
||||
|
||||
.circle-surface-practitioner {
|
||||
background-color: var(--color-circle-practitioner-bg);
|
||||
}
|
||||
|
||||
/* Parchment surface for elevated content panels */
|
||||
.parchment-surface {
|
||||
background-color: var(--color-parchment-950);
|
||||
border: 1px solid var(--color-parchment-800);
|
||||
}
|
||||
|
||||
.dark .parchment-surface {
|
||||
background-color: var(--color-guild-800);
|
||||
border-color: var(--color-guild-700);
|
||||
}
|
||||
|
||||
/* UI typography utilities */
|
||||
.text-ui-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-overline);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
/* ---- SECTION LABELS ---- */
|
||||
.section-label {
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-faint);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.text-ui-mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-body-sm);
|
||||
/* ---- 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;
|
||||
}
|
||||
|
||||
/* Illustration integration utilities */
|
||||
.guild-illustration {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
filter: drop-shadow(0 0 20px rgba(184, 135, 58, 0.08));
|
||||
/* ---- 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;
|
||||
}
|
||||
|
||||
.guild-illustration-adaptive {
|
||||
color: var(--color-guild-300);
|
||||
/* ---- 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 {
|
||||
border: none;
|
||||
border-top: 1px dashed var(--border);
|
||||
margin: 20px 0 14px;
|
||||
}
|
||||
|
||||
.dark .guild-illustration-adaptive {
|
||||
color: var(--color-guild-600);
|
||||
}
|
||||
|
||||
/* Prose overrides for guild wiki/long-form content */
|
||||
.prose-guild {
|
||||
max-width: 72ch;
|
||||
}
|
||||
|
||||
.prose-guild h1,
|
||||
.prose-guild h2,
|
||||
.prose-guild h3,
|
||||
.prose-guild h4 {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: var(--tracking-display);
|
||||
}
|
||||
|
||||
.prose-guild a {
|
||||
color: var(--color-candlelight-600);
|
||||
text-decoration-color: var(--color-candlelight-700);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
.prose-guild a:hover {
|
||||
color: var(--color-candlelight-500);
|
||||
text-decoration-color: var(--color-candlelight-500);
|
||||
}
|
||||
|
||||
.prose-guild blockquote {
|
||||
background-color: var(--color-parchment-900);
|
||||
border-left-color: var(--color-candlelight-600);
|
||||
border-left-width: 3px;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
.dark .prose-guild blockquote {
|
||||
background-color: var(--color-parchment-900);
|
||||
border-left-color: var(--color-candlelight-500);
|
||||
}
|
||||
|
||||
/* Mobile responsive utilities */
|
||||
/* ---- MOBILE ---- */
|
||||
@media (max-width: 1023px) {
|
||||
/* Prevent horizontal scroll on mobile */
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Adjust halftone pattern for mobile */
|
||||
.halftone-texture::before {
|
||||
background-size: 6px 6px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue