/* =========================================================================
Lorcappa — lorcappa.com • shared stylesheet (home + all deck subpages)
-------------------------------------------------------------------------
- DARK is the default theme (fantasy purple, not pitch black).
Light mode = , toggled by js/site.js.
Both themes live in this one file as CSS custom properties, so a single
stylesheet serves every page. To re-skin, edit the token blocks below.
- Two languages live in the markup at once; CSS shows one set based on
. English is the default on first visit.
- No frameworks, no build step. Plain CSS only.
========================================================================= */
/* ---- Theme tokens : DARK (default) ------------------------------------- */
:root {
/* Fantasy purple, like the Darkwood/Astral backgrounds. SWAP freely. */
--bg-1: #1a1130; /* base */
--bg-2: #2a1c44; /* glow */
--bg-3: #100a1f; /* deepest corner */
--surface: rgba(255, 255, 255, 0.05);
--surface-2: rgba(255, 255, 255, 0.08);
--border: rgba(255, 255, 255, 0.12);
--text: #f3f0fb;
--text-muted: #c5bcdd;
--accent: #ffcf5c; /* lore gold */
--accent-2: #b9a4ff; /* lavender */
--glow: rgba(185, 164, 255, 0.45);
--link: #ffd97a;
/* Shape / motion */
--radius: 14px;
--radius-sm: 10px;
--maxw: 1020px; /* short, focused page width */
--ease: cubic-bezier(.2, .7, .3, 1);
/* SWAP fonts here. System stack = zero network requests, instant render.
To use a custom display font later, add @font-face and change --font-head. */
--font-body: "Hiragino Maru Gothic ProN", "Segoe UI", system-ui,
-apple-system, "Helvetica Neue", Arial, sans-serif;
--font-head: "Hiragino Maru Gothic ProN", "Trebuchet MS", system-ui, sans-serif;
}
/* ---- Theme tokens : LIGHT (parchment, toggled from the header) ---------- */
:root[data-theme="light"] {
--bg-1: #efe9dc;
--bg-2: #f7f2e7;
--bg-3: #e6ddcb;
--surface: rgba(60, 40, 90, 0.05);
--surface-2: rgba(60, 40, 90, 0.09);
--border: rgba(60, 40, 90, 0.16);
--text: #2a2140;
--text-muted: #5a4f72;
--accent: #b07d1a;
--accent-2: #6a4fb0;
--glow: rgba(106, 79, 176, 0.30);
--link: #7a4fce;
}
/* ---- Reset-ish --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100vh;
font-family: var(--font-body);
color: var(--text);
line-height: 1.6;
/* Instant, weightless gradient background — no multi-MB wallpaper to load. */
background:
radial-gradient(1100px 620px at 50% -8%, var(--bg-2), transparent 60%),
radial-gradient(800px 520px at 92% 4%, rgba(90, 209, 200, 0.10), transparent 55%),
linear-gradient(180deg, var(--bg-1), var(--bg-3));
background-attachment: fixed;
}
/* Faint sparkle tile over the gradient (a few KB). SWAP images/pattern.svg
for in-house artwork, or comment this whole block out to disable. */
body::before {
content: "";
position: fixed;
inset: 0;
background-image: url("/images/pattern.svg");
background-size: 160px 160px;
pointer-events: none;
z-index: 0;
}
body > * { position: relative; z-index: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); }
/* Accessible "visually hidden" helper (labels for screen readers). */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
/* =========================================================================
Language switching: both languages are in the DOM; CSS shows one.
Use …… pairs in the markup.
========================================================================= */
:root[data-lang="en"] [lang="ja"] { display: none; }
:root[data-lang="ja"] [lang="en"] { display: none; }
/* =========================================================================
Page shell
========================================================================= */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
/* ---- Header : brand (left) + socials & toggles (right) ------------------ */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
max-width: var(--maxw);
margin: 0 auto;
padding: 14px 18px;
}
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--text);
font-family: var(--font-head);
font-weight: 800;
font-size: 1.15rem;
}
.brand img {
width: 44px; height: 44px;
border-radius: 50%; /* keeps any square art circular */
transition: transform .25s var(--ease);
}
.brand:hover img { transform: rotate(-6deg) scale(1.06); }
.header-actions { display: inline-flex; align-items: center; gap: 6px; }
/* Icon buttons (socials + toggles). Inline SVGs inherit currentColor,
so they recolor automatically in light mode. SWAP any of them for image
files by replacing the