/* ==========================================================================
sypian.ski — stylesheet, 9 themes
Switch via data-theme on , persisted in localStorage.
scriptorium — original house style, warm cream + gold (default, unchanged)
vellum — refined scriptorium: drop cap, small-caps sections, ✦ dividers
palimpsest — ivory + burnt copper, Fraunces headings, ⁂ asterism dividers
noir — dark scriptorium, ink-blue + candle amber
tesserae — Byzantine mosaic maximalism, porphyry + gold + teal
samizdat — brutalist monospace, newsprint + crimson
abbasid — indigo + saffron, Amiri + Reem Kufi, Arab-manuscript register
terminal — phosphor-green CRT, scanlines, blinking cursor, JetBrains Mono
isotype — Vienna Method: chalk + red + ochre, Jost, pictographic dividers
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;1,400;1,500&family=Alegreya+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Jacquard+12&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,700;1,9..144,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cinzel:wght@400;500;600;700&family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Reem+Kufi:wght@400;500;600;700&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:ital,wght@0,300;0,400;0,500;0,700;0,800;1,400&display=swap');
/* ==========================================================================
1. Reset & base
========================================================================== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
/* ==========================================================================
2. Theme: Scriptorium — original house style (default)
Preserves the original aesthetic exactly: warm cream + gold, Alegreya body,
Alegreya h2 with hairline top rule, Jacquard 12 hero, fade-gradient dividers
with no glyph, no drop cap, no paper grain.
========================================================================== */
:root,
[data-theme="scriptorium"] {
--bg: #f7f5f0;
--bg-alt: #efeadf;
--bg-grain: none;
--ink: #1a1a1a;
--ink-soft: #4a4740;
--ink-mute: #807b72;
--ink-faint: #b0a998;
--rule: #e0dcd4;
--accent: #c9a227;
--accent-dark: #8a6a10;
--accent-soft: #b8941f;
--accent-glow: transparent;
--link-rest: #c8c3b8;
--link-hover: #c9a227;
--font-hero: 'Jacquard 12', 'Alegreya', serif;
--font-display: 'Alegreya', serif;
--font-body: 'Alegreya Sans', system-ui, sans-serif;
--hero-size: 3.5rem;
--hero-weight: 400;
--hero-tracking: 0;
--hero-transform: none;
--h2-size: 1.5rem;
--h2-weight: 400;
--h2-tracking: 0;
--h2-transform: none;
--body-leading: 1.7;
--section-gap: 2.25rem;
--divider-glyph: "";
--divider-color: transparent;
--rule-thickness: 1px;
--rule-gradient: linear-gradient(to right, transparent, rgba(201, 162, 39, 0.38) 20%, #d0c8b8 50%, rgba(201, 162, 39, 0.38) 80%, transparent);
color-scheme: light;
}
/* ==========================================================================
2b. Theme: Vellum — refined variant of the default
Same palette and fonts, but adds drop caps, small-caps section labels with
a gold rule, ✦ glyph on the fade-gradient dividers, and paper grain.
========================================================================== */
[data-theme="vellum"] {
--bg: #f6f3ee;
--bg-alt: #efeadf;
--bg-grain: url("data:image/svg+xml;utf8,");
--ink: #1a1a1a;
--ink-soft: #4a4740;
--ink-mute: #807b72;
--ink-faint: #b0a998;
--rule: #e0dcd4;
--accent: #c9a227;
--accent-dark: #8a6a10;
--accent-soft: #b8941f;
--accent-glow: transparent;
--link-rest: #c8c3b8;
--link-hover: #c9a227;
--font-hero: 'Jacquard 12', 'Alegreya', serif;
--font-display: 'Alegreya', serif;
--font-body: 'Alegreya Sans', system-ui, sans-serif;
--hero-size: 3.5rem;
--hero-weight: 400;
--hero-tracking: 0;
--hero-transform: none;
--h2-size: 1.05rem;
--h2-weight: 400;
--h2-tracking: 0.08em;
--h2-transform: lowercase;
--body-leading: 1.7;
--section-gap: 2.25rem;
--divider-glyph: "\2726"; /* ✦ */
--divider-color: var(--accent);
--rule-thickness: 1px;
--rule-gradient: linear-gradient(to right, transparent, rgba(201, 162, 39, 0.38) 20%, #d0c8b8 50%, rgba(201, 162, 39, 0.38) 80%, transparent);
color-scheme: light;
}
/* ==========================================================================
3. Theme: Palimpsest — sibling of default (warmer, softer)
========================================================================== */
[data-theme="palimpsest"] {
--bg: #ede5d3;
--bg-alt: #e2d8c0;
--bg-grain: url("data:image/svg+xml;utf8,");
--ink: #2a1e10;
--ink-soft: #57442e;
--ink-mute: #867152;
--ink-faint: #b8a37d;
--rule: #cfbf9f;
--accent: #a64e1b;
--accent-dark: #6e2f08;
--accent-soft: #b96430;
--accent-glow: transparent;
--link-rest: #c8b48a;
--link-hover: #a64e1b;
--font-hero: 'Fraunces', 'Alegreya', serif;
--font-display: 'Fraunces', 'Alegreya', serif;
--font-body: 'Alegreya Sans', system-ui, sans-serif;
--hero-size: 4rem;
--hero-weight: 300;
--hero-tracking: -0.01em;
--hero-transform: none;
--h2-size: 1.55rem;
--h2-weight: 400;
--h2-tracking: 0;
--h2-transform: none;
--h2-style: palimpsest;
--body-leading: 1.85;
--section-gap: 2.75rem;
--divider-glyph: "\2042"; /* ⁂ asterism */
--divider-color: var(--accent);
--rule-thickness: 1px;
}
/* ==========================================================================
4. Theme: Scriptorium Noir — dark academic
========================================================================== */
[data-theme="noir"] {
--bg: #0f131c;
--bg-alt: #171d2a;
--bg-grain: url("data:image/svg+xml;utf8,");
--ink: #e8dfc8;
--ink-soft: #b9b09a;
--ink-mute: #8a8170;
--ink-faint: #5f5848;
--rule: #2a3142;
--accent: #e8b04f;
--accent-dark: #f2c576;
--accent-soft: #b68434;
--accent-glow: 0 0 24px rgba(232, 176, 79, 0.22);
--link-rest: #6b6352;
--link-hover: #e8b04f;
--font-hero: 'Cormorant Garamond', 'EB Garamond', serif;
--font-display: 'Cormorant Garamond', 'EB Garamond', serif;
--font-body: 'EB Garamond', 'Alegreya', serif;
--hero-size: 4.25rem;
--hero-weight: 300;
--hero-tracking: 0.015em;
--hero-transform: none;
--h2-size: 1.6rem;
--h2-weight: 400;
--h2-tracking: 0.04em;
--h2-transform: none;
--h2-style: noir;
--body-leading: 1.7;
--section-gap: 2.5rem;
--divider-glyph: "\25C6"; /* ◆ */
--divider-color: var(--accent);
--rule-thickness: 1px;
color-scheme: dark;
}
/* ==========================================================================
5. Theme: Tesserae — Byzantine mosaic maximalism
========================================================================== */
[data-theme="tesserae"] {
--bg: #170b1d;
--bg-alt: #251031;
--bg-grain: url("data:image/svg+xml;utf8,");
--ink: #ebe0c8;
--ink-soft: #c4b89e;
--ink-mute: #8a7f66;
--ink-faint: #5e5443;
--rule: #3a2545;
--accent: #d4a841;
--accent-dark: #e8bd5a;
--accent-soft: #a5802f;
--accent-glow: 0 0 30px rgba(212, 168, 65, 0.25);
--accent-teal: #2d8388;
--accent-red: #a83248;
--link-rest: #7a6c54;
--link-hover: #d4a841;
--font-hero: 'Cinzel', 'Cormorant Garamond', serif;
--font-display: 'Cinzel', 'Cormorant Garamond', serif;
--font-body: 'Cormorant Garamond', 'EB Garamond', serif;
--hero-size: 2.5rem;
--hero-weight: 500;
--hero-tracking: 0.14em;
--hero-transform: uppercase;
--h2-size: 1.1rem;
--h2-weight: 600;
--h2-tracking: 0.24em;
--h2-transform: uppercase;
--h2-style: tesserae;
--body-leading: 1.75;
--section-gap: 2.75rem;
--divider-glyph: "\2720"; /* ✠ cross pattée */
--divider-color: var(--accent);
--rule-thickness: 1px;
color-scheme: dark;
}
/* ==========================================================================
6. Theme: Samizdat — brutalist monospace
========================================================================== */
[data-theme="samizdat"] {
--bg: #ece8dc;
--bg-alt: #ddd8c8;
--bg-grain: url("data:image/svg+xml;utf8,");
--ink: #0f0f0f;
--ink-soft: #2d2d2d;
--ink-mute: #5a5a5a;
--ink-faint: #8d8d8d;
--rule: #0f0f0f;
--accent: #8b1a1a;
--accent-dark: #5a0000;
--accent-soft: #a42525;
--accent-glow: transparent;
--link-rest: #0f0f0f;
--link-hover: #8b1a1a;
--font-hero: 'IBM Plex Mono', ui-monospace, monospace;
--font-display: 'IBM Plex Mono', ui-monospace, monospace;
--font-body: 'IBM Plex Sans', system-ui, sans-serif;
--hero-size: 2.15rem;
--hero-weight: 500;
--hero-tracking: 0.04em;
--hero-transform: uppercase;
--h2-size: 0.88rem;
--h2-weight: 600;
--h2-tracking: 0.16em;
--h2-transform: uppercase;
--h2-style: samizdat;
--body-leading: 1.6;
--section-gap: 2rem;
--divider-glyph: "\25A0"; /* ■ */
--divider-color: var(--ink);
--rule-thickness: 2px;
}
/* ==========================================================================
6b. Theme: Abbasid — Arab-manuscript register, indigo + saffron
========================================================================== */
[data-theme="abbasid"] {
--bg: #161a34;
--bg-alt: #1f2446;
--bg-grain: url("data:image/svg+xml;utf8,");
--ink: #f4e9d4;
--ink-soft: #d8cdb4;
--ink-mute: #9a9079;
--ink-faint: #5c5848;
--rule: #30345a;
--accent: #f0b929;
--accent-dark: #ffd158;
--accent-soft: #c08f16;
--accent-glow: 0 0 22px rgba(240, 185, 41, 0.22);
--link-rest: #6f6a50;
--link-hover: #f0b929;
--accent-red: #c92636;
--font-hero: 'Reem Kufi', 'Amiri', serif;
--font-display: 'Reem Kufi', 'Amiri', serif;
--font-body: 'Amiri', 'EB Garamond', serif;
--hero-size: 3.4rem;
--hero-weight: 500;
--hero-tracking: 0.02em;
--hero-transform: none;
--h2-size: 1.5rem;
--h2-weight: 500;
--h2-tracking: 0.03em;
--h2-transform: none;
--body-leading: 1.9;
--section-gap: 2.5rem;
--divider-glyph: "\06DE"; /* ۞ */
--divider-color: var(--accent);
--rule-thickness: 1px;
color-scheme: dark;
}
/* ==========================================================================
6c. Theme: Terminal — phosphor-green CRT, scanlines, monospace
========================================================================== */
[data-theme="terminal"] {
--bg: #0a1008;
--bg-alt: #0f1a0c;
--bg-grain: none;
--ink: #5bff9c;
--ink-soft: #3fd37a;
--ink-mute: #2a9a58;
--ink-faint: #1d6b3d;
--rule: #1d6b3d;
--accent: #00ff7f;
--accent-dark: #8bffb5;
--accent-soft: #00cc66;
--accent-glow: 0 0 10px rgba(91, 255, 156, 0.55), 0 0 2px rgba(91, 255, 156, 0.9);
--link-rest: #2a9a58;
--link-hover: #00ff7f;
--font-hero: 'JetBrains Mono', ui-monospace, monospace;
--font-display: 'JetBrains Mono', ui-monospace, monospace;
--font-body: 'JetBrains Mono', ui-monospace, monospace;
--hero-size: 1.8rem;
--hero-weight: 500;
--hero-tracking: 0.06em;
--hero-transform: uppercase;
--h2-size: 0.95rem;
--h2-weight: 500;
--h2-tracking: 0.06em;
--h2-transform: uppercase;
--body-leading: 1.55;
--section-gap: 2rem;
--divider-glyph: "";
--divider-color: transparent;
--rule-thickness: 1px;
color-scheme: dark;
}
/* ==========================================================================
6d. Theme: Isotype — Vienna Method, chalk + red + ochre, Jost geometric
========================================================================== */
[data-theme="isotype"] {
--bg: #f0ead8;
--bg-alt: #e4dcc5;
--bg-grain: none;
--ink: #161616;
--ink-soft: #3a3a3a;
--ink-mute: #6a6a6a;
--ink-faint: #a0a0a0;
--rule: #161616;
--accent: #c72a2a;
--accent-dark: #8f1616;
--accent-soft: #d46b6b;
--accent-glow: transparent;
--accent-ochre: #d89b22;
--accent-blue: #2b4a8a;
--link-rest: #161616;
--link-hover: #c72a2a;
--font-hero: 'Jost', system-ui, sans-serif;
--font-display: 'Jost', system-ui, sans-serif;
--font-body: 'Jost', system-ui, sans-serif;
--hero-size: 2.6rem;
--hero-weight: 800;
--hero-tracking: -0.02em;
--hero-transform: uppercase;
--h2-size: 1rem;
--h2-weight: 700;
--h2-tracking: 0.14em;
--h2-transform: uppercase;
--body-leading: 1.65;
--section-gap: 2.5rem;
--divider-glyph: "\25CF"; /* ● */
--divider-color: var(--accent);
--rule-thickness: 3px;
color-scheme: light;
}
/* ==========================================================================
7. Body & layout
========================================================================== */
body {
font-family: var(--font-body);
line-height: var(--body-leading);
color: var(--ink);
background: var(--bg);
background-image: var(--bg-grain);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
position: relative;
transition: background-color 0.4s ease, color 0.4s ease;
}
/* Noir vignette */
[data-theme="noir"] body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at 50% -10%, rgba(232, 176, 79, 0.06), transparent 55%),
radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.4), transparent 55%);
z-index: 0;
}
/* Tesserae: subtle dome light from top */
[data-theme="tesserae"] body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 80% 40% at 50% 0%, rgba(212, 168, 65, 0.12), transparent 60%),
radial-gradient(ellipse 60% 50% at 50% 100%, rgba(168, 50, 72, 0.08), transparent 65%);
z-index: 0;
}
/* Abbasid: warm indigo gradient with saffron glow at top */
[data-theme="abbasid"] body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 70% 45% at 50% 0%, rgba(240, 185, 41, 0.10), transparent 65%),
radial-gradient(ellipse 90% 40% at 50% 100%, rgba(201, 38, 54, 0.05), transparent 70%);
z-index: 0;
}
/* Terminal: scanline overlay + soft phosphor vignette */
[data-theme="terminal"] body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(to bottom,
rgba(91, 255, 156, 0.045) 0px,
rgba(91, 255, 156, 0.045) 1px,
transparent 1px,
transparent 3px),
radial-gradient(ellipse at 50% 50%, rgba(0, 255, 127, 0.04), transparent 75%);
z-index: 2;
mix-blend-mode: screen;
}
[data-theme="terminal"] body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
z-index: 3;
}
/* Isotype: firm top and bottom color bands */
[data-theme="isotype"] body::before {
content: "";
position: fixed;
left: 0;
right: 0;
top: 0;
height: 6px;
pointer-events: none;
background:
linear-gradient(to right,
var(--accent) 0 33%,
var(--accent-ochre, #d89b22) 33% 66%,
var(--ink) 66% 100%);
z-index: 5;
}
main {
max-width: 750px;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
position: relative;
z-index: 1;
}
[data-theme="samizdat"] main {
padding: 2.5rem 1.5rem 5rem;
}
/* ==========================================================================
8. Hero (first h1 + following paragraphs)
========================================================================== */
main > h1:first-child {
font-family: var(--font-hero);
font-size: var(--hero-size);
font-weight: var(--hero-weight);
letter-spacing: var(--hero-tracking);
text-transform: var(--hero-transform);
text-align: center;
margin-bottom: 0.5rem;
display: inline-block;
width: 100%;
line-height: 1.05;
background: linear-gradient(
90deg,
var(--ink) 0%,
var(--ink) 40%,
var(--accent) 50%,
var(--ink) 60%,
var(--ink) 100%
);
background-size: 200% 100%;
background-position: 100% 0;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer 3s ease-in-out forwards;
text-shadow: var(--accent-glow);
}
@keyframes shimmer {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
main > h1:first-child:hover {
animation: shimmer 2s ease-in-out forwards;
}
main > h1:first-child a {
text-decoration: none;
background: inherit;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Tesserae: gold rule flanks hero */
[data-theme="tesserae"] main > h1:first-child::before,
[data-theme="tesserae"] main > h1:first-child::after {
content: "";
display: inline-block;
width: 2rem;
height: 1px;
background: var(--accent);
vertical-align: middle;
margin: 0 0.8rem;
opacity: 0.6;
}
/* Terminal: prompt prefix + blinking cursor suffix on hero */
[data-theme="terminal"] main > h1:first-child {
background: none;
-webkit-text-fill-color: var(--ink);
color: var(--ink);
animation: none;
text-align: left;
padding-left: 1rem;
text-shadow: var(--accent-glow);
}
[data-theme="terminal"] main > h1:first-child a {
-webkit-text-fill-color: var(--ink);
color: var(--ink);
}
[data-theme="terminal"] main > h1:first-child::before {
content: "$ whoami\A";
display: block;
white-space: pre;
color: var(--ink-soft);
font-size: 0.7em;
letter-spacing: 0.02em;
margin-bottom: 0.3rem;
opacity: 0.8;
text-transform: none;
}
[data-theme="terminal"] main > h1:first-child::after {
content: "_";
display: inline-block;
margin-left: 0.3em;
color: var(--accent);
animation: blink 1.1s steps(2, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
/* Abbasid: 8-point star framing above hero */
[data-theme="abbasid"] main > h1:first-child::before,
[data-theme="abbasid"] main > h1:first-child::after {
content: "\06DE";
display: inline-block;
margin: 0 0.7rem;
color: var(--accent);
font-size: 0.55em;
vertical-align: 0.35em;
opacity: 0.75;
}
/* Isotype: square frame around hero */
[data-theme="isotype"] main > h1:first-child {
background: none;
-webkit-text-fill-color: var(--ink);
color: var(--ink);
animation: none;
padding: 0.4rem 0;
border-top: 4px solid var(--ink);
border-bottom: 4px solid var(--ink);
}
[data-theme="isotype"] main > h1:first-child a {
-webkit-text-fill-color: var(--ink);
color: var(--ink);
}
/* Samizdat: block-stamp hero frame */
[data-theme="samizdat"] main > h1:first-child {
border-top: 3px solid var(--ink);
border-bottom: 3px solid var(--ink);
padding: 0.6rem 0 0.5rem;
margin-bottom: 0.75rem;
background: none;
-webkit-text-fill-color: var(--ink);
color: var(--ink);
animation: none;
}
[data-theme="samizdat"] main > h1:first-child a {
-webkit-text-fill-color: var(--ink);
color: var(--ink);
}
main > h1:first-child + p {
text-align: center;
font-size: 1.25rem;
color: var(--ink-soft);
margin-bottom: 0.5rem;
font-style: italic;
}
[data-theme="samizdat"] main > h1:first-child + p { font-style: normal; }
[data-theme="terminal"] main > h1:first-child + p { font-style: normal; }
[data-theme="isotype"] main > h1:first-child + p { font-style: normal; }
[data-theme="vellum"] main > h1:first-child + p,
[data-theme="palimpsest"] main > h1:first-child + p,
[data-theme="noir"] main > h1:first-child + p {
font-family: var(--font-display);
font-weight: 400;
font-style: italic;
}
[data-theme="tesserae"] main > h1:first-child + p {
font-family: var(--font-body);
letter-spacing: 0.02em;
}
[data-theme="samizdat"] main > h1:first-child + p {
font-family: var(--font-hero);
font-size: 0.95rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/* ==========================================================================
9. Language switcher
========================================================================== */
.lang-switch {
text-align: center;
font-size: 0.8rem;
letter-spacing: 0.05em;
margin-top: 0.5rem;
margin-bottom: 0;
color: var(--ink-faint);
}
.lang-switch a {
color: var(--ink-faint);
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
transition: color 0.15s ease;
}
.lang-switch a:hover {
color: var(--accent);
}
.lang-switch a.active {
color: var(--ink);
font-weight: 700;
}
[data-theme="samizdat"] .lang-switch {
font-family: var(--font-hero);
letter-spacing: 0.12em;
}
/* ==========================================================================
10. Horizontal rules & section headings
========================================================================== */
hr {
border: none;
height: calc(var(--rule-thickness));
background: none;
margin: var(--section-gap) 0;
position: relative;
overflow: visible;
}
hr::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: var(--rule-thickness);
background: var(--rule-gradient, linear-gradient(to right,
transparent,
color-mix(in srgb, var(--rule) 100%, transparent) 20%,
var(--rule) 50%,
color-mix(in srgb, var(--rule) 100%, transparent) 80%,
transparent));
}
hr::after {
content: var(--divider-glyph);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: var(--divider-color);
background: var(--bg);
padding: 0 0.75em;
font-size: 0.8rem;
line-height: 1;
opacity: 0.85;
}
/* Original default: no center glyph on dividers. */
[data-theme="scriptorium"] hr::after {
content: none;
}
[data-theme="samizdat"] hr::before {
background: var(--ink);
height: 2px;
}
[data-theme="samizdat"] hr::after {
font-size: 0.6rem;
color: var(--ink);
padding: 0 0.5em;
}
[data-theme="tesserae"] hr::after,
[data-theme="noir"] hr::after {
background: var(--bg);
font-size: 0.9rem;
}
main > h1:first-child + p + p + hr {
margin-top: 2.5rem;
}
hr + h2 {
border-top: none;
padding-top: 0;
margin-top: 0;
}
h2 {
font-family: var(--font-display);
font-size: var(--h2-size);
font-weight: var(--h2-weight);
letter-spacing: var(--h2-tracking);
text-transform: var(--h2-transform);
color: var(--ink);
margin-top: var(--section-gap);
margin-bottom: 0.75rem;
padding-top: 0.5rem;
border-top: 1px solid var(--rule);
position: relative;
}
/* Vellum: small-caps refinement on secondary h2 */
[data-theme="vellum"] h2 {
font-feature-settings: "smcp" 1, "c2sc" 1;
letter-spacing: 0.08em;
font-size: 1.05rem;
color: var(--ink-soft);
text-transform: lowercase;
border-top: none;
padding-top: 1rem;
}
[data-theme="vellum"] h2::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 2.5rem;
height: 1px;
background: var(--accent);
}
/* Palimpsest: hairline rule above, Fraunces upright */
[data-theme="palimpsest"] h2 {
border-top: none;
padding-top: 0;
margin-top: calc(var(--section-gap) + 0.5rem);
font-style: italic;
font-weight: 400;
}
[data-theme="palimpsest"] h2::before {
content: "§";
position: absolute;
left: -1.75rem;
top: 0.35rem;
color: var(--accent);
font-style: normal;
font-size: 1.1rem;
opacity: 0.7;
}
/* Noir: amber underline, capital initial */
[data-theme="noir"] h2 {
border-top: none;
padding-top: 0.2rem;
padding-bottom: 0.45rem;
font-variant: small-caps;
letter-spacing: 0.06em;
text-shadow: var(--accent-glow);
}
[data-theme="noir"] h2::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 3rem;
height: 1px;
background: var(--accent);
box-shadow: var(--accent-glow);
}
/* Tesserae: gold brackets and uppercase */
[data-theme="tesserae"] h2 {
border-top: none;
padding-top: 0.4rem;
margin-top: calc(var(--section-gap) + 0.5rem);
color: var(--accent);
text-align: center;
position: relative;
}
[data-theme="tesserae"] h2::before,
[data-theme="tesserae"] h2::after {
content: "\2720";
display: inline-block;
color: var(--accent);
margin: 0 0.9rem;
font-size: 0.8em;
vertical-align: 0.1em;
opacity: 0.75;
}
/* Samizdat: bracketed section tag */
[data-theme="samizdat"] h2 {
border-top: 2px solid var(--ink);
padding: 0.4rem 0;
margin-top: calc(var(--section-gap) + 0.5rem);
font-family: var(--font-hero);
}
[data-theme="samizdat"] h2::before {
content: "[ ";
}
[data-theme="samizdat"] h2::after {
content: " ]";
}
/* Abbasid: gold hairline + 8-point star bullet */
[data-theme="abbasid"] h2 {
border-top: none;
padding-top: 0.6rem;
margin-top: calc(var(--section-gap) + 0.5rem);
color: var(--accent);
}
[data-theme="abbasid"] h2::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(to right, var(--accent) 0%, var(--accent) 3rem, transparent 3rem);
opacity: 0.75;
}
/* Terminal: green prompt prefix */
[data-theme="terminal"] h2 {
border-top: none;
padding-top: 0.2rem;
padding-bottom: 0.3rem;
color: var(--accent);
text-shadow: var(--accent-glow);
}
[data-theme="terminal"] h2::before {
content: "> ";
color: var(--ink-mute);
}
/* Isotype: red block h2 with ochre bar */
[data-theme="isotype"] h2 {
border-top: 3px solid var(--ink);
padding: 0.45rem 0 0.3rem;
margin-top: calc(var(--section-gap) + 0.5rem);
color: var(--accent);
}
[data-theme="isotype"] h2::after {
content: "";
position: absolute;
left: 0;
bottom: -0.3rem;
width: 2.5rem;
height: 3px;
background: var(--accent-ochre, #d89b22);
}
h3 {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 400;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
color: var(--ink);
}
p {
margin-bottom: 0.75rem;
}
/* ==========================================================================
11. Lists
========================================================================== */
ul {
list-style: none;
padding-left: 0;
margin-bottom: 0.75rem;
}
li {
padding-left: 1rem;
position: relative;
margin-bottom: 0.5rem;
}
li::before {
content: "\2013";
position: absolute;
left: 0;
color: var(--accent);
opacity: 0.6;
}
[data-theme="tesserae"] li::before {
content: "\2756"; /* ❖ */
font-size: 0.7em;
top: 0.25em;
}
[data-theme="samizdat"] li::before {
content: "\25AA"; /* ▪ */
color: var(--accent);
opacity: 1;
}
/* ==========================================================================
12. Inline type & links
========================================================================== */
strong, em {
font-size: 1em !important;
}
strong {
font-weight: 700;
color: var(--ink);
}
em {
font-style: italic;
}
a {
font-size: inherit;
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
text-decoration-color: var(--link-rest);
transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover {
color: var(--accent-dark);
text-decoration-color: var(--link-hover);
}
[data-theme="noir"] a {
color: var(--ink);
text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
}
[data-theme="noir"] a:hover {
color: var(--accent);
text-decoration-color: var(--accent);
}
[data-theme="tesserae"] a {
color: var(--accent);
text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
[data-theme="tesserae"] a:hover {
color: var(--accent-dark);
text-decoration-color: var(--accent-dark);
}
[data-theme="samizdat"] a {
color: var(--ink);
text-decoration-color: var(--accent);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
[data-theme="samizdat"] a:hover {
background: var(--accent);
color: var(--bg);
text-decoration: none;
padding: 0 0.1em;
margin: 0 -0.1em;
}
/* Dates / standalone em */
p > em:only-child {
font-size: 0.9rem;
color: var(--ink-mute);
font-style: normal;
}
/* ==========================================================================
13. Publications
========================================================================== */
.pub {
display: grid;
grid-template-columns: 3rem 1fr;
gap: 0 0.5rem;
margin-bottom: 1.25rem;
}
.pub .year {
grid-column: 1;
grid-row: 1 / 3;
font-size: 0.85rem !important;
font-weight: 700;
color: var(--accent-soft);
opacity: 0.85;
font-variant-numeric: tabular-nums;
}
[data-theme="samizdat"] .pub .year {
font-family: var(--font-hero);
color: var(--accent);
opacity: 1;
}
[data-theme="tesserae"] .pub .year {
color: var(--accent);
opacity: 0.9;
letter-spacing: 0.05em;
}
.pub-title {
grid-column: 2;
grid-row: 1;
margin-bottom: 0.1rem;
}
.pub-details {
grid-column: 2;
grid-row: 2;
font-size: 0.9rem;
color: var(--ink-soft);
margin-bottom: 0;
}
.pub-details em {
font-style: italic !important;
}
.pub-summary {
grid-column: 2;
grid-row: 3;
font-size: 0.82rem;
color: var(--ink-mute);
font-style: italic;
margin-bottom: 0;
margin-top: 0.1rem;
line-height: 1.45;
}
[data-theme="samizdat"] .pub-summary {
font-style: normal;
padding-left: 0.75rem;
border-left: 2px solid var(--rule);
}
/* ==========================================================================
14. Projects grid
========================================================================== */
.projects {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 1rem;
}
.project-card {
display: grid;
grid-template-columns: 2rem 1fr auto;
grid-template-rows: auto auto;
align-items: center;
column-gap: 0.875rem;
text-decoration: none !important;
color: var(--ink);
padding: 0.75rem 0;
border-bottom: 1px solid var(--border, #e8e3da);
transition: background 0.15s ease;
}
.project-card:first-child {
border-top: 1px solid var(--border, #e8e3da);
}
.project-card:hover {
color: var(--ink);
text-decoration: none !important;
}
.project-card:hover .project-name {
color: var(--accent-dark);
}
.project-card:hover .project-icon {
opacity: 0.9;
}
.project-card:hover .project-arrow {
opacity: 1;
transform: translateX(2px);
}
.project-icon {
display: flex;
align-items: center;
justify-content: center;
color: var(--accent);
opacity: 0.5;
grid-column: 1;
grid-row: 1 / 3;
transition: opacity 0.2s ease;
}
.project-icon svg {
width: 1.25rem;
height: 1.25rem;
}
.project-name {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 500;
color: var(--ink);
grid-column: 2;
grid-row: 1;
transition: color 0.15s ease;
}
[data-theme="tesserae"] .project-name {
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.85rem;
font-family: var(--font-hero);
}
[data-theme="samizdat"] .project-name {
font-family: var(--font-hero);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.85rem;
}
.project-desc {
font-size: 0.8rem;
color: var(--ink-mute);
line-height: 1.4;
grid-column: 2;
grid-row: 2;
}
.project-arrow {
font-size: 0.85rem;
color: var(--accent-soft);
opacity: 0;
grid-column: 3;
grid-row: 1 / 3;
align-self: center;
transition: opacity 0.15s ease, transform 0.2s ease;
}
/* Multi-link card (div, not a) */
.project-card--multi {
grid-template-columns: 2rem 1fr;
cursor: default;
align-items: start;
}
.project-card--multi .project-name {
padding-top: 0.1rem;
}
.project-sublinks {
grid-column: 2;
grid-row: 2;
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-top: 0.2rem;
}
.project-sublink {
display: flex;
align-items: baseline;
gap: 0;
font-size: 0.8rem;
color: var(--ink-mute);
text-decoration: none;
line-height: 1.5;
transition: color 0.15s ease;
}
.project-sublink:hover {
color: var(--ink);
text-decoration: none;
}
.project-sublink-label {
font-family: var(--font-display);
font-size: 0.8rem;
font-weight: 500;
color: var(--ink);
transition: color 0.15s ease;
}
.project-sublink:hover .project-sublink-label {
color: var(--accent-dark);
}
.project-sublink-dash {
color: var(--ink-mute);
}
.project-sublink-arrow {
margin-left: 0.35rem;
font-size: 0.75rem;
color: var(--accent-soft);
opacity: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.project-sublink:hover .project-sublink-arrow {
opacity: 1;
transform: translateX(2px);
}
/* Samizdat: bold left border per row */
[data-theme="samizdat"] .project-card {
border-bottom: 1px solid var(--ink);
border-top: none;
padding: 0.75rem 0;
padding-left: 0.5rem;
border-left: 3px solid var(--ink);
background: none;
}
[data-theme="samizdat"] .project-card:first-child {
border-top: none;
}
[data-theme="samizdat"] .project-card:hover {
background: var(--accent);
color: var(--bg);
border-color: var(--ink);
}
[data-theme="samizdat"] .project-card:hover .project-name,
[data-theme="samizdat"] .project-card:hover .project-desc,
[data-theme="samizdat"] .project-card:hover .project-icon {
color: var(--bg);
}
/* Tesserae: rule lines between rows */
[data-theme="tesserae"] .project-card {
border-top: none;
border-bottom: 1px solid var(--rule);
padding: 0.8rem 0.5rem;
position: relative;
}
[data-theme="tesserae"] .project-card:first-child {
border-top: 1px solid var(--rule);
}
[data-theme="tesserae"] .project-card:hover {
border-bottom-color: var(--accent);
}
/* ==========================================================================
15. Contact section
========================================================================== */
h2:has(+ .contact) {
text-align: center;
}
.contact {
text-align: center;
}
.contact-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25rem 1.25rem;
margin-bottom: 0.5rem;
}
.contact-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-decoration: none !important;
color: var(--ink-soft);
font-size: 0.92rem;
padding: 0.25rem 0;
transition: color 0.15s ease;
}
.contact-item:hover {
color: var(--accent-dark);
text-decoration: none !important;
}
.contact-item svg {
color: var(--accent);
opacity: 0.55;
flex-shrink: 0;
}
[data-theme="samizdat"] .contact-item {
font-family: var(--font-hero);
font-size: 0.82rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
[data-theme="samizdat"] .contact-item:hover {
background: var(--accent);
color: var(--bg);
padding: 0.25rem 0.4rem;
margin: 0 -0.4rem;
}
/* ==========================================================================
16. Drop cap — first paragraph after the hero (Vellum + Palimpsest)
========================================================================== */
[data-theme="vellum"] main > h1:first-child ~ hr + h2 + p::first-letter,
[data-theme="palimpsest"] main > h1:first-child ~ hr + h2 + p::first-letter {
font-family: var(--font-display);
font-size: 3.3rem;
font-weight: 500;
float: left;
line-height: 0.85;
padding: 0.4rem 0.55rem 0 0;
color: var(--accent);
}
[data-theme="palimpsest"] main > h1:first-child ~ hr + h2 + p::first-letter {
font-weight: 300;
font-size: 3.8rem;
line-height: 0.8;
padding-top: 0.5rem;
}
/* ==========================================================================
17. Theme selector widget
========================================================================== */
.theme-switch {
position: fixed;
right: 1.25rem;
bottom: 1.25rem;
z-index: 100;
font-family: var(--font-body);
}
.theme-switch__btn {
appearance: none;
-webkit-appearance: none;
background: var(--bg-alt);
border: 1px solid var(--rule);
color: var(--ink);
border-radius: 999px;
padding: 0.55rem 0.9rem 0.55rem 0.6rem;
font-size: 0.8rem;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.theme-switch__btn:hover {
border-color: var(--accent);
transform: translateY(-1px);
}
.theme-switch__btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.theme-switch__swatch {
width: 0.9rem;
height: 0.9rem;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
background: linear-gradient(135deg, var(--bg) 50%, var(--accent) 50%);
flex-shrink: 0;
}
.theme-switch__label {
letter-spacing: 0.04em;
font-size: 0.78rem;
}
.theme-switch__panel {
position: absolute;
right: 0;
bottom: calc(100% + 0.6rem);
min-width: 230px;
background: var(--bg);
border: 1px solid var(--rule);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
padding: 0.5rem;
display: none;
flex-direction: column;
gap: 0.15rem;
border-radius: 4px;
backdrop-filter: blur(8px);
}
.theme-switch[data-open="true"] .theme-switch__panel {
display: flex;
animation: theme-panel-in 0.18s ease-out;
}
@keyframes theme-panel-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.theme-switch__panel-title {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink-mute);
padding: 0.4rem 0.6rem 0.5rem;
border-bottom: 1px solid var(--rule);
margin-bottom: 0.2rem;
}
.theme-switch__option {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: none;
text-align: left;
padding: 0.5rem 0.6rem;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.65rem;
color: var(--ink);
font-family: inherit;
font-size: 0.88rem;
transition: background 0.12s ease;
}
.theme-switch__option:hover {
background: var(--bg-alt);
}
.theme-switch__option[aria-current="true"] {
background: var(--bg-alt);
color: var(--accent-dark);
}
[data-theme="noir"] .theme-switch__option[aria-current="true"],
[data-theme="tesserae"] .theme-switch__option[aria-current="true"] {
color: var(--accent);
}
.theme-switch__option-check {
margin-left: auto;
color: var(--accent);
font-size: 0.9rem;
opacity: 0;
}
.theme-switch__option[aria-current="true"] .theme-switch__option-check {
opacity: 1;
}
.theme-switch__option-swatch {
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
position: relative;
overflow: hidden;
}
.theme-switch__option-swatch::after {
content: "";
position: absolute;
inset: 0;
background: var(--preview-accent);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.theme-switch__option-swatch {
background: var(--preview-bg);
}
.theme-switch__option-meta {
display: flex;
flex-direction: column;
gap: 0.05rem;
line-height: 1.2;
}
.theme-switch__option-name {
font-weight: 500;
}
.theme-switch__option-hint {
font-size: 0.72rem;
color: var(--ink-mute);
letter-spacing: 0.01em;
}
/* Swatch previews (inline vars set on option) */
.theme-switch__option[data-preview="scriptorium"] { --preview-bg: #f7f5f0; --preview-accent: #c9a227; }
.theme-switch__option[data-preview="vellum"] { --preview-bg: #f6f3ee; --preview-accent: #c9a227; }
.theme-switch__option[data-preview="palimpsest"] { --preview-bg: #ede5d3; --preview-accent: #a64e1b; }
.theme-switch__option[data-preview="noir"] { --preview-bg: #0f131c; --preview-accent: #e8b04f; }
.theme-switch__option[data-preview="tesserae"] { --preview-bg: #170b1d; --preview-accent: #d4a841; }
.theme-switch__option[data-preview="samizdat"] { --preview-bg: #ece8dc; --preview-accent: #8b1a1a; }
.theme-switch__option[data-preview="abbasid"] { --preview-bg: #161a34; --preview-accent: #f0b929; }
.theme-switch__option[data-preview="terminal"] { --preview-bg: #0a1008; --preview-accent: #00ff7f; }
.theme-switch__option[data-preview="isotype"] { --preview-bg: #f0ead8; --preview-accent: #c72a2a; }
/* Samizdat: squared widget */
[data-theme="samizdat"] .theme-switch__btn {
border-radius: 0;
border-width: 2px;
border-color: var(--ink);
font-family: var(--font-hero);
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.08em;
}
[data-theme="samizdat"] .theme-switch__panel {
border-radius: 0;
border-width: 2px;
border-color: var(--ink);
}
/* ==========================================================================
18. Blog
========================================================================== */
.blog-meta-top {
text-align: center;
font-size: 0.85rem;
color: var(--ink-mute);
letter-spacing: 0.04em;
margin-top: -0.25rem;
margin-bottom: 0.25rem;
text-transform: uppercase;
}
[data-theme="samizdat"] .blog-meta-top {
font-family: var(--font-hero);
}
.post-list {
margin-top: 0.5rem;
display: flex;
flex-direction: column;
gap: 0;
}
.post-item {
display: grid;
grid-template-columns: 5.5rem 1fr;
gap: 0 1.1rem;
align-items: baseline;
padding: 1.4rem 0;
border-top: 1px solid var(--rule);
transition: background 0.18s ease;
}
[data-theme="samizdat"] .post-item {
grid-template-columns: 7rem 1fr;
}
.post-item:last-child {
border-bottom: 1px solid var(--rule);
}
.post-item__date {
font-size: 0.78rem;
color: var(--accent-soft);
font-variant-numeric: tabular-nums;
font-weight: 500;
letter-spacing: 0.04em;
padding-top: 0.25rem;
white-space: nowrap;
}
[data-theme="samizdat"] .post-item__date,
[data-theme="tesserae"] .post-item__date {
font-family: var(--font-hero);
color: var(--accent);
}
.post-it/* Append to ~/www/sypianski.cc/styles.css.
Reuses existing palette / typography. eink-friendly: no gradients, no shadows. */
.support-button {
display: inline-block;
padding: 0.5em 1em;
border: 1px solid currentColor;
text-decoration: none;
margin-top: 0.3em;
}
.support-button:hover {
background: rgba(0, 0, 0, 0.05);
}
.support-line {
margin-top: 1.5em;
font-size: 0.95em;
opacity: 0.85;
}
.support-line a {
text-decoration: underline;
}
.supporters {
list-style: none;
padding: 0;
columns: 2;
column-gap: 2em;
font-size: 0.9em;
}
.supporters li {
break-inside: avoid;
padding: 0.15em 0;
}
/* subteno — tier cards and goals table */
.tier {
margin: 0.8em 0 1.4em;
padding-left: 0;
}
.tier-price {
font-variant-numeric: tabular-nums;
color: var(--ink-mute);
font-size: 0.88em;
margin-bottom: 0.1em;
}
.goals-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
margin: 1em 0 1.5em;
}
.goals-table td, .goals-table th {
padding: 0.45em 0.6em;
border-bottom: 1px solid var(--rule);
vertical-align: top;
}
.goals-table th {
text-align: left;
color: var(--ink-mute);
font-weight: normal;
font-size: 0.85em;
}
.goals-table td:nth-child(2),
.goals-table td:nth-child(3) {
white-space: nowrap;
color: var(--ink-mute);
font-size: 0.88em;
}
/* ==========================================================================
Mobile: larger base font
========================================================================== */
@media (max-width: 600px) {
html {
font-size: 18px;
}
main {
padding: 2rem 1.25rem 4rem;
}
}