-
Your request
+
Your request
Fill in the details below. Remember: the card list is final once received, and
double-sided cards count as 2 slots.
@@ -118,7 +120,7 @@ const siteKey = turnstileSiteKey();
-
Orders are not being taken right now
+
Orders are not being taken right now
I open a limited number of slots at a time. Check back here — the meters above
show live availability, and the order form appears as soon as orders reopen. You can
diff --git a/src/styles/global.css b/src/styles/global.css
index 7079fc2..0ffb2b3 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -28,17 +28,28 @@
* section wrapper (`data-surface`) instantly restyles every component.
* ------------------------------------------------------------------------- */
@theme {
- /* Brand colors (fixed, do not change with theme). Night-sky mystical set:
- * star gold, mystic violet, nebula teal, midnight indigo, star-white. */
- --color-amber: #e8b54a; /* star gold */
- --color-amber-soft: #f4cd72; /* brighter gold for hovers */
- --color-violet: #8b7bd8; /* mystic violet */
- --color-violet-deep: #6f5fb6;
- --color-teal: #6fb6ad; /* nebula teal */
- --color-teal-deep: #4f8c84;
- --color-slate: #161b3a; /* deep indigo-slate */
- --color-ink: #0b1026; /* midnight indigo */
- --color-cream: #f4f1e8; /* star-white */
+ /* Brand corner radius: cards and panels are 10px; buttons and tags are pills. */
+ --radius-xl: 10px;
+ --radius-2xl: 10px;
+ --radius-3xl: 10px;
+
+ /* Brand colors (fixed, do not change with theme). The Patiun LLC palette,
+ * shared by Patiun (craft) and Greg Kilmer (web). Source of truth: the
+ * Patiun brand record / Claude Design tokens. Gold is structure and sparkle
+ * (stars, rules, small labels), never a large fill. Violet and indigo are
+ * background light only (nebula glows, gradient ends), never text. */
+ --color-teal: #14a39a; /* Patiun Teal, primary: buttons, fills, the glyph */
+ --color-teal-bright: #2bc2b7; /* teal for text/links on dark grounds */
+ --color-teal-deep: #0f8c84; /* teal on light grounds; hover/active icons */
+ --color-slate-teal: #2d4a58; /* dark end of the Tide gradient */
+ --color-gold: #c9a24a; /* Alchemist Gold, flat gold on screen */
+ --color-gold-bright: #d8b35a; /* gold text/eyebrows on dark grounds */
+ --color-gold-deep: #8a6516; /* gold text under 24px on Starlight */
+ --color-violet: #6a2fe0; /* Nebula Violet, background light only */
+ --color-indigo: #3b1f8f; /* Astral Indigo, gradient midpoints */
+ --color-midnight: #131c2b; /* Midnight: panels, tiles, theme color */
+ --color-sky: #0e1522; /* night-sky ground */
+ --color-starlight: #f4f2ed; /* Starlight: text on dark, paper ground */
/* Semantic tokens (resolve per theme/section via variables). */
--color-surface: var(--surface);
@@ -53,9 +64,16 @@
--color-secondary: var(--secondary);
/* Typography. */
- --font-sans: "Plus Jakarta Sans Variable", "Inter Variable", ui-sans-serif,
- system-ui, sans-serif;
- --font-body: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+ /* Typography. Cinzel for names, wordmarks and headings (never paragraphs);
+ * Montserrat for body, UI, labels and uppercase eyebrows. JetBrains Mono is
+ * kept only for genuinely code-like blocks. */
+ --font-display: "Cinzel Variable", Cinzel, "Trajan Pro", Georgia, serif;
+ --font-sans: "Montserrat Variable", Montserrat, "Helvetica Neue", Arial,
+ ui-sans-serif, sans-serif;
+ --font-body: "Montserrat Variable", Montserrat, "Helvetica Neue", Arial,
+ ui-sans-serif, sans-serif;
+ --font-eyebrow: "Montserrat Variable", Montserrat, "Helvetica Neue", Arial,
+ ui-sans-serif, sans-serif;
--font-mono: "JetBrains Mono Variable", ui-monospace, "SFMono-Regular", monospace;
/* Motion tokens (used across reveal + transition classes). */
@@ -107,10 +125,11 @@
h2,
h3,
h4 {
- font-family: var(--font-sans);
+ font-family: var(--font-display);
font-weight: 700;
line-height: 1.15;
- letter-spacing: -0.02em;
+ /* Cinzel is a capital-led display face: open tracking, never negative. */
+ letter-spacing: 0.04em;
color: var(--color-text);
}
@@ -131,7 +150,7 @@
transition: color 0.2s var(--ease-out-soft);
}
a:hover {
- color: var(--color-amber-soft);
+ color: var(--color-gold-bright);
}
/* Visible, on-brand focus ring for keyboard users. */
@@ -142,8 +161,8 @@
}
::selection {
- background: var(--color-amber);
- color: var(--color-ink);
+ background: var(--color-teal);
+ color: var(--color-midnight);
}
/* Better default for images: never overflow, lazy by default in components. */
@@ -175,7 +194,7 @@
.card {
background-color: var(--color-surface-raised);
border: 1px solid var(--color-border);
- border-radius: 1rem;
+ border-radius: 10px;
padding: 1.5rem;
transition:
transform 0.3s var(--ease-out-soft),
@@ -184,7 +203,7 @@
}
.card-interactive:hover {
transform: translateY(-4px);
- box-shadow: 0 18px 40px -24px rgba(11, 16, 38, 0.55);
+ box-shadow: 0 18px 40px -24px rgba(14, 21, 34, 0.6);
border-color: var(--color-accent);
}
@@ -202,14 +221,14 @@
border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}
- /* Primary (amber) and secondary (outlined) CTA buttons. */
+ /* Primary (Patiun Teal) and secondary (outlined) CTA buttons. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
- border-radius: 0.6rem;
+ border-radius: 999px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 1rem;
@@ -224,14 +243,15 @@
.btn:active {
transform: translateY(1px);
}
+ /* Filled buttons: Patiun Teal with Midnight text, never white text. */
.btn-primary {
- background: var(--color-amber);
- color: var(--color-ink);
- box-shadow: 0 10px 30px -12px rgba(245, 158, 11, 0.7);
+ background: var(--color-teal);
+ color: var(--color-midnight);
+ box-shadow: 0 10px 30px -12px rgba(20, 163, 154, 0.7);
}
.btn-primary:hover {
- background: var(--color-amber-soft);
- color: var(--color-ink);
+ background: var(--color-teal-bright);
+ color: var(--color-midnight);
transform: translateY(-2px);
}
.btn-secondary {
@@ -246,6 +266,21 @@
}
}
+/* Night-sky bands (nav, page heroes). The semantic Tailwind tokens resolve at
+ * :root, where the Starlight values live, so anything sitting on the dark sky
+ * re-points accent and gold to their on-dark brand values here. */
+.on-sky {
+ --color-accent: var(--color-teal-bright);
+ --color-secondary: var(--color-gold-bright);
+ --icon-gold: var(--color-gold);
+}
+
+/* Gold star accent inside the brand icons: deep gold on Starlight (matches the
+ * light icon set), flat Alchemist Gold on the night sky (.on-sky above). */
+:root {
+ --icon-gold: var(--color-gold-deep);
+}
+
/* Visually hidden but available to screen readers. */
.sr-only {
position: absolute;
diff --git a/src/styles/themes.css b/src/styles/themes.css
index 1b034e0..b7295d4 100644
--- a/src/styles/themes.css
+++ b/src/styles/themes.css
@@ -5,9 +5,14 @@
*
* 1. Global light/dark mode -> set on
* 2. Section surface tone -> set on
- * data-surface="neutral" Home / About / Contact (deep night-sky)
- * data-surface="professional" Professional wing (obsidian + violet/gold)
- * data-surface="interest" Interests wing (candlelit study)
+ * data-surface="neutral" Home / About / Contact (Patiun night sky)
+ * data-surface="professional" Professional wing (Tide: slate-teal night)
+ * data-surface="interest" Interests wing (Nebula: indigo night)
+ *
+ * PALETTE: every value here comes from the Patiun brand (Night sky theme for
+ * dark, Starlight theme for light). Text uses Starlight tones, links and
+ * accents use teal, small gold labels use the bright gold, and violet/indigo
+ * only tint the surfaces (never text).
*
* SELECTOR MODEL: data-theme lives on , data-surface on . We match
* the descendant combination `html[data-theme=...] body[data-surface=...]`.
@@ -26,93 +31,99 @@
* DEFAULT / NEUTRAL SURFACE (Home, About, Contact)
* ======================================================================== */
-/* Light + neutral — fallback (not currently used; dark is forced). */
+/* Light + neutral: Starlight paper (fallback; not currently used, dark is
+ * forced in theme-init, but these are the values the content sections
+ * actually render with, since the Tailwind tokens resolve at :root). The
+ * brand's deep teal #0F8C84 is 3.7:1 on Starlight, so --accent uses a
+ * slightly darker teal that passes AA for small text. */
:root,
html[data-theme='light'] body[data-surface='neutral'] {
- --surface: #efe7d2;
- --surface-raised: #f7f0dc;
- --surface-sunken: #e3d9bd;
- --text: #1b1730;
- --text-muted: #4a445e;
- --text-subtle: #6b6582;
- --border: #d2c6a2;
- --accent: #7e5512;
- --accent-contrast: #f7f0dc;
- --secondary: #5e4f9e;
+ --surface: #f4f2ed; /* Starlight */
+ --surface-raised: #ffffff;
+ --surface-sunken: #e9e5dc;
+ --text: #131c2b; /* Midnight */
+ --text-muted: #4a5f6b;
+ --text-subtle: #5c6e78;
+ --border: #d9d4c8;
+ --accent: #0a726b; /* deep teal, darkened to 5.2:1 so small links pass AA */
+ --accent-contrast: #f4f2ed;
+ --secondary: #8a6516; /* deep gold, 4.75:1: small gold text and eyebrows */
}
-/* Dark + neutral — the canonical deep mystical nightscape. High-contrast text. */
+/* Dark + neutral: the canonical Patiun night sky. High-contrast text. */
html[data-theme='dark'] body[data-surface='neutral'] {
- --surface: #070a1c; /* near-void midnight indigo */
- --surface-raised: #11163a; /* indigo panel, violet-edged */
- --surface-sunken: #04061a; /* deep cosmic void */
- --text: #f6f4ff; /* near-white for max legibility */
- --text-muted: #d4d0f0; /* bright enough to read clearly on deep blue */
- --text-subtle: #a8a2d8; /* lifted from the old #7e79b8 for contrast */
- --border: #2e3470;
- --accent: #f0c262; /* slightly lifted gold for pop on dark */
- --accent-contrast: #070a1c;
- --secondary: #b3a4ec; /* brighter violet, easier on the eye */
+ --surface: #0e1522; /* night sky */
+ --surface-raised: #131c2b; /* Midnight panel */
+ --surface-sunken: #0a1019; /* deeper void */
+ --text: #ece9e2; /* Starlight text, 15:1 */
+ --text-muted: #b9c8cf;
+ --text-subtle: #9fb3bd; /* brand muted, 7.9:1 on panels */
+ --border: #26344a;
+ --accent: #2bc2b7; /* teal on dark, 7.7:1 */
+ --accent-contrast: #0e1522;
+ --secondary: #d8b35a; /* gold accents and chips */
}
/* ===========================================================================
- * PROFESSIONAL SURFACE — violet-dominant obsidian, dark by default.
+ * PROFESSIONAL SURFACE: the web side. A slate-teal night (the Tide gradient),
+ * dark by default.
* ======================================================================== */
body[data-surface='professional'],
html[data-theme='dark'] body[data-surface='professional'] {
- --surface: #080a20;
- --surface-raised: #121638;
- --surface-sunken: #040517;
- --text: #f6f4ff;
- --text-muted: #cec9f2;
- --text-subtle: #a59fd6;
- --border: #2e3270;
- --accent: #f0c262;
- --accent-contrast: #080a20;
- --secondary: #b3a4ec;
+ --surface: #0c1820;
+ --surface-raised: #12222c;
+ --surface-sunken: #081117;
+ --text: #ece9e2;
+ --text-muted: #b9c8cf;
+ --text-subtle: #9fb3bd;
+ --border: #23394a;
+ --accent: #2bc2b7;
+ --accent-contrast: #0c1820;
+ --secondary: #d8b35a;
}
html[data-theme='light'] body[data-surface='professional'] {
- --surface: #21183f;
- --surface-raised: #2c2152;
- --surface-sunken: #18113a;
- --text: #f1edff;
- --text-muted: #d5cff0;
- --text-subtle: #aaa3d6;
- --border: #3c3170;
- --accent: #7e5512;
- --accent-contrast: #f1edff;
- --secondary: #b6a6e8;
+ --surface: #2d4a58; /* Slate Teal: the professional wing stays dark */
+ --surface-raised: #355766;
+ --surface-sunken: #243c48;
+ --text: #f4f2ed;
+ --text-muted: #d9e2e6;
+ --text-subtle: #bccbd2;
+ --border: #46687a;
+ --accent: #7fdcd5;
+ --accent-contrast: #131c2b;
+ --secondary: #e2c57e;
}
/* ===========================================================================
- * INTEREST SURFACE — warm plum-brown night, dark by default.
+ * INTEREST SURFACE: the craft side. An indigo night lit by the Nebula
+ * gradient, dark by default.
* ======================================================================== */
body[data-surface='interest'],
html[data-theme='dark'] body[data-surface='interest'] {
- --surface: #170f24; /* warm plum-brown night */
- --surface-raised: #221630;
- --surface-sunken: #100920;
- --text: #fbf2e4; /* warm near-white */
- --text-muted: #ecdcc6; /* lifted for contrast */
- --text-subtle: #c4ab8e; /* lifted from #a99a86 */
- --border: #3e2f4a;
- --accent: #f0c262;
- --accent-contrast: #170f24;
- --secondary: #c8abe0;
+ --surface: #110f22; /* indigo night */
+ --surface-raised: #1a1730;
+ --surface-sunken: #0b0a18;
+ --text: #ece9e2;
+ --text-muted: #c3bfd6;
+ --text-subtle: #a49fbd;
+ --border: #2e2a52;
+ --accent: #2bc2b7;
+ --accent-contrast: #110f22;
+ --secondary: #d8b35a;
}
html[data-theme='light'] body[data-surface='interest'] {
- --surface: #f4e9cf;
- --surface-raised: #fdf4d9;
- --surface-sunken: #e8d8b2;
- --text: #22152e;
- --text-muted: #5c4733;
- --text-subtle: #826a4f;
- --border: #d8c290;
- --accent: #7e5512;
- --accent-contrast: #fdf4d9;
- --secondary: #5e4f9e;
+ --surface: #f4f2ed;
+ --surface-raised: #ffffff;
+ --surface-sunken: #e9e5dc;
+ --text: #131c2b;
+ --text-muted: #4a5f6b;
+ --text-subtle: #5c6e78;
+ --border: #d9d4c8;
+ --accent: #0f8c84;
+ --accent-contrast: #131c2b;
+ --secondary: #8a6516;
}