/* ============================================================ The Cybernetic Meadow — shared stylesheet A calm, literary, twilight-meadow theme. Colors live in CSS variables so light/dark mode is one toggle. ============================================================ */ /* ---- Fonts ---- Body: Cormorant (elegant literary serif) ASCII / code: Cousine (monospace, preserves whitespace) Loaded via in each page's . */ /* ============================================================ THEME VARIABLES Light mode (default) = warm cream dusk. Dark mode = deep twilight, set with . ============================================================ */ :root { --bg: #f3ede1; /* warm cream */ --bg-soft: #ebe3d4; /* slightly deeper panel */ --bg-glow: #efe7dd; /* header wash */ --ink: #3a3340; /* muted plum-brown text */ --ink-soft: #6c6472; /* secondary text */ --ink-faint: #9a92a0; /* captions, meta */ --accent: #8a6f9e; /* dusk lavender */ --accent-2: #b08968; /* warm meadow gold */ --line: #d8cfbf; /* hairlines */ --shadow: 0 1px 40px rgba(120, 100, 130, 0.10); } html[data-theme="dark"] { --bg: #15131c; /* deep twilight */ --bg-soft: #1e1b28; --bg-glow: #1a1723; --ink: #e7ded0; /* soft warm parchment */ --ink-soft: #b3a9b8; --ink-faint: #7d7488; --accent: #c3a7d6; /* glowing lavender */ --accent-2: #d6b58c; /* warm gold */ --line: #2e2a3a; --shadow: 0 1px 60px rgba(0, 0, 0, 0.4); } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Cormorant", Georgia, "Times New Roman", serif; font-size: 21px; font-weight: 500; line-height: 1.65; transition: background 0.5s ease, color 0.5s ease; /* faint meadow-at-dusk wash from the top */ background-image: radial-gradient(120% 60% at 50% -10%, var(--bg-glow) 0%, transparent 70%); background-attachment: fixed; } ::selection { background: var(--accent); color: var(--bg); } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } a:hover { color: var(--accent-2); border-bottom-color: currentColor; } img { max-width: 100%; height: auto; } /* ============================================================ LAYOUT ============================================================ */ .container { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 28px; } main { padding: 8px 0 40px; } /* ============================================================ SITE HEADER + NAV ============================================================ */ .site-header { text-align: center; padding: 64px 0 8px; } .site-title { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 500; letter-spacing: 0.5px; margin: 0; line-height: 1.1; } .site-title a { color: var(--ink); border: none; } .site-title a:hover { color: var(--accent); } .tagline { max-width: 34ch; margin: 18px auto 0; font-style: italic; font-size: 1.05rem; color: var(--ink-soft); text-wrap: pretty; } /* navigation */ .site-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 26px; padding: 34px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 44px; } .site-nav a { color: var(--ink-soft); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; border: none; padding: 4px 2px; } .site-nav a:hover { color: var(--accent); } .site-nav a.current { color: var(--ink); border-bottom: 1px solid var(--accent); } /* theme toggle button */ .theme-toggle { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-family: inherit; font-size: 0.82rem; letter-spacing: 0.1em; padding: 5px 14px; border-radius: 999px; cursor: pointer; transition: all 0.25s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } /* ============================================================ TYPOGRAPHY / PAGE HEADINGS ============================================================ */ .page-title { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 500; margin: 0 0 6px; } .page-intro { color: var(--ink-soft); font-style: italic; margin: 0 0 8px; max-width: 56ch; text-wrap: pretty; } h2 { font-size: 1.5rem; font-weight: 500; margin: 2.4em 0 0.4em; } h3 { font-size: 1.2rem; font-weight: 600; margin: 1.8em 0 0.3em; } p { text-wrap: pretty; } /* soft decorative divider (a little sprig) */ .sprig { text-align: center; color: var(--accent); margin: 46px 0; font-size: 1.1rem; letter-spacing: 0.6em; opacity: 0.7; } /* ============================================================ HOME PAGE ============================================================ */ .lede { font-size: 1.28rem; line-height: 1.7; color: var(--ink); } .rooms { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 2px; } .room { display: block; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--bg-soft); transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .room:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--ink); } .room .room-name { font-size: 1.35rem; display: block; margin-bottom: 2px; } .room .room-desc { color: var(--ink-soft); font-size: 0.98rem; font-style: italic; } /* ============================================================ WRITING ENTRIES ============================================================ */ .entry { margin: 0 0 60px; } .entry-title { font-size: 1.6rem; font-weight: 500; margin: 0 0 2px; } .entry-meta { color: var(--ink-faint); font-size: 0.85rem; letter-spacing: 0.05em; margin: 0 0 18px; text-transform: uppercase; } .poem { font-size: 1.15rem; line-height: 1.9; white-space: pre-wrap; /* preserves poem line breaks */ margin: 0; } .prose p { margin: 0 0 1em; } /* ============================================================ ASCII GALLERY ============================================================ */ .ascii-piece { margin: 0 0 56px; } .ascii-piece .entry-title { margin-bottom: 14px; } .ascii-art { font-family: "Cousine", ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.25; white-space: pre; /* preserve every space */ overflow-x: auto; /* scroll wide art on mobile */ padding: 22px 24px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); -webkit-overflow-scrolling: touch; } /* ============================================================ RESEARCH ============================================================ */ .study { padding: 26px 28px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 34px; } .study .entry-title { margin-top: 0; } .paper-list { list-style: none; padding: 0; margin: 8px 0 0; } .paper-list li { padding: 16px 0; border-bottom: 1px solid var(--line); } .paper-list li:last-child { border-bottom: none; } .paper-title { font-size: 1.12rem; } .paper-meta { color: var(--ink-faint); font-size: 0.85rem; font-style: italic; } /* ============================================================ LINKS ============================================================ */ .linklist { list-style: none; padding: 0; margin: 0; } .linklist li { padding: 18px 0; border-bottom: 1px solid var(--line); } .linklist li:last-child { border-bottom: none; } .link-head { font-size: 1.15rem; } .link-src { color: var(--ink-faint); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; } .link-note { color: var(--ink-soft); font-size: 0.98rem; margin: 3px 0 0; } /* ============================================================ GUESTBOOK PLACEHOLDER ============================================================ */ .coming-soon { text-align: center; padding: 40px 0 20px; } .coming-soon .big { font-size: 4rem; color: var(--accent); opacity: 0.65; line-height: 1; margin-bottom: 20px; } /* ============================================================ FOOTER ============================================================ */ .site-footer { text-align: center; padding: 56px 0 60px; margin-top: 40px; border-top: 1px solid var(--line); color: var(--ink-faint); } .site-footer .blessing { font-style: italic; font-size: 1.05rem; color: var(--ink-soft); } .site-footer .fine { font-size: 0.8rem; letter-spacing: 0.05em; margin-top: 10px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 560px) { body { font-size: 18px; } .site-header { padding-top: 44px; } .site-nav { gap: 4px 18px; } .container { padding: 0 20px; } .ascii-art { font-size: 11px; } }