Readying for design
This commit is contained in:
parent
d73256ca2b
commit
fadf473dde
50 changed files with 1478 additions and 1259 deletions
|
|
@ -199,11 +199,11 @@
|
|||
--color-circle-founder-dark: #76432a;
|
||||
--color-circle-founder-bg: rgba(178, 104, 64, 0.1);
|
||||
|
||||
/* Practitioner - deep gold/ochre */
|
||||
--color-circle-practitioner: #8a7658;
|
||||
--color-circle-practitioner-light: #b7a487;
|
||||
--color-circle-practitioner-dark: #5a4d39;
|
||||
--color-circle-practitioner-bg: rgba(138, 118, 88, 0.1);
|
||||
/* 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;
|
||||
|
|
@ -250,23 +250,23 @@
|
|||
--halftone-size: 8px 8px;
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
/* Dark mode - doubled opacity for perceptible candlelight warmth */
|
||||
.dark:root {
|
||||
--ambient-bg:
|
||||
radial-gradient(
|
||||
circle at 20% 80%,
|
||||
rgba(224, 184, 110, 0.03) 0%,
|
||||
rgba(224, 184, 110, 0.06) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 20%,
|
||||
rgba(218, 154, 114, 0.02) 0%,
|
||||
rgba(218, 154, 114, 0.04) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 40% 40%,
|
||||
rgba(183, 164, 135, 0.01) 0%,
|
||||
transparent 50%
|
||||
circle at 50% 50%,
|
||||
rgba(183, 164, 135, 0.02) 0%,
|
||||
transparent 60%
|
||||
);
|
||||
|
||||
--halftone-pattern: radial-gradient(
|
||||
|
|
@ -351,7 +351,7 @@ body {
|
|||
text-shadow: 0 0 10px rgba(224, 184, 110, 0.25);
|
||||
}
|
||||
|
||||
/* Subtle noise overlay */
|
||||
/* Subtle noise overlay - SVG filter based, no image dependency */
|
||||
.ink-grain {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -359,19 +359,15 @@ body {
|
|||
.ink-grain::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url("/textures/grain.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 128px 128px;
|
||||
inset: 0;
|
||||
filter: url(#grain-fine);
|
||||
mix-blend-mode: overlay;
|
||||
opacity: 0.04;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Paper fiber overlay */
|
||||
/* Paper fiber overlay - SVG filter based */
|
||||
.paper-texture {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -379,15 +375,27 @@ body {
|
|||
.paper-texture::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url("/textures/paper.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 256px 256px;
|
||||
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 */
|
||||
|
|
@ -410,10 +418,14 @@ body {
|
|||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Warm interior feel for content areas */
|
||||
/* Warm interior feel for content areas - enclosed, lit space */
|
||||
.guild-interior {
|
||||
background: var(--ambient-bg);
|
||||
box-shadow: inset 0 2px 8px rgba(26, 21, 16, 0.06);
|
||||
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 */
|
||||
|
|
@ -446,6 +458,112 @@ body {
|
|||
-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);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-ui-mono {
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-body-sm);
|
||||
}
|
||||
|
||||
/* Illustration integration utilities */
|
||||
.guild-illustration {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
filter: drop-shadow(0 0 20px rgba(184, 135, 58, 0.08));
|
||||
}
|
||||
|
||||
.guild-illustration-adaptive {
|
||||
color: var(--color-guild-300);
|
||||
}
|
||||
|
||||
.dark .guild-illustration-adaptive {
|
||||
color: var(--color-guild-600);
|
||||
}
|
||||
|
||||
/* Prose overrides for guild wiki/long-form content */
|
||||
.prose-guild {
|
||||
max-width: 72ch;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue