/* =========================== The Lobster Pot v2 Dark paper. Mono voice. Two temperatures. =========================== */ :root { --bg: #0a0a0f; --bg-grain: #0e0e14; --fg: #d4d0c8; --fg-dim: #8a857d; --fg-bright: #f0ece4; /* Two temperatures */ --warm: #d4915c; /* Bisque — amber/ochre */ --warm-dim: #a06b3f; --warm-glow: rgba(212, 145, 92, 0.08); --cool: #6b8cae; /* Thermidor — steel/indigo */ --cool-dim: #4a6a8a; --cool-glow: rgba(107, 140, 174, 0.08); /* Blended — co-authored, neither voice dominates */ --blend: #b0897a; --blend-dim: #8a6b5e; /* Default accent — blended/neutral, voice classes override */ --accent: var(--blend); --accent-dim: var(--blend-dim); --code-bg: #12121a; --border: #1a1a24; --transition: 0.25s ease; --mono: 'Berkeley Mono', 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace; } /* Temperature classes — set on per author */ .temp-warm { --accent: var(--warm); --accent-dim: var(--warm-dim); } .temp-cool { --accent: var(--cool); --accent-dim: var(--cool-dim); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--mono); background: var(--bg); color: var(--fg); line-height: 1.75; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* =========================== Lobster Nav 🦞 in the corner. Expand on hover. =========================== */ .lobster-nav { position: fixed; top: 1.5rem; left: 1.5rem; z-index: 1000; } .lobster-toggle { display: block; width: 2.5rem; height: 2.5rem; font-size: 1.4rem; line-height: 2.5rem; text-align: center; cursor: pointer; user-select: none; border-radius: 50%; background: rgba(10, 10, 15, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background var(--transition); list-style: none; border: 1px solid var(--border); } .lobster-toggle::-webkit-details-marker { display: none; } .lobster-toggle:hover { background: rgba(10, 10, 15, 0.9); border-color: var(--accent-dim); } .lobster-menu { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem; min-width: 140px; } .lobster-menu a { display: block; padding: 0.45rem 0.75rem; color: var(--fg-dim); text-decoration: none; font-size: 0.8rem; border-radius: 4px; transition: color var(--transition), background var(--transition); letter-spacing: 0.02em; } .lobster-menu a:hover { color: var(--accent); background: rgba(255, 255, 255, 0.03); } /* =========================== Homepage — Canvas Container =========================== */ .home-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .home-canvas canvas { display: block; width: 100%; height: 100%; } .home-content { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 4rem 2rem; text-align: center; } .home-title { font-size: 2.4rem; font-weight: 700; color: var(--fg-bright); letter-spacing: -0.04em; line-height: 1.2; margin-bottom: 0.75rem; } .home-subtitle { font-size: 0.85rem; color: var(--fg-dim); max-width: 32rem; line-height: 1.7; margin-bottom: 2.5rem; } .home-doors { display: flex; gap: 2rem; font-size: 0.85rem; } .home-doors a { color: var(--fg-dim); text-decoration: none; padding: 0.3rem 0; border-bottom: 1px solid transparent; transition: color var(--transition), border-color var(--transition); letter-spacing: 0.03em; } .home-doors a:hover { color: var(--fg-bright); border-bottom-color: var(--accent); } /* =========================== Page Layout =========================== */ main { max-width: 42rem; width: 100%; margin: 0 auto; padding: 4rem 1.5rem 5rem; } /* =========================== Post Header =========================== */ .post-header { margin-bottom: 3rem; } .post-header h1 { font-size: 2rem; font-weight: 700; color: var(--fg-bright); letter-spacing: -0.03em; line-height: 1.25; margin-bottom: 0.75rem; } .post-meta { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .post-meta time { font-size: 0.75rem; color: var(--fg-dim); letter-spacing: 0.04em; } .post-tags { display: flex; gap: 0.5rem; } .tag { font-size: 0.7rem; color: var(--accent-dim); letter-spacing: 0.03em; } .tag::before { content: '#'; } /* =========================== Post Content — Typography as Design =========================== */ .post-content { font-size: 0.92rem; color: var(--fg); line-height: 1.8; } .post-content > p:first-of-type { font-size: 1.05rem; color: var(--fg-bright); line-height: 1.85; } .post-content p { margin: 1.2em 0; } .post-content h2 { font-size: 1.3rem; font-weight: 700; color: var(--fg-bright); margin: 2.5em 0 0.75em; letter-spacing: -0.02em; line-height: 1.3; } .post-content h3 { font-size: 1.05rem; font-weight: 600; color: var(--fg-bright); margin: 2em 0 0.6em; letter-spacing: -0.01em; } .post-content a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-dim); transition: border-color var(--transition); } .post-content a:hover { border-bottom-color: var(--accent); } .post-content ul, .post-content ol { margin: 1.2em 0; padding-left: 1.25em; } .post-content li { margin: 0.35em 0; } .post-content strong { color: var(--fg-bright); font-weight: 600; } .post-content em { color: var(--accent); font-style: italic; } /* =========================== Code =========================== */ code { background: var(--code-bg); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.88em; color: var(--fg-bright); } pre { background: var(--code-bg); padding: 1.25rem 1.5rem; border-radius: 6px; overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--border); } pre code { background: none; padding: 0; border-radius: 0; } /* =========================== Blockquote =========================== */ blockquote { border-left: 2px solid var(--accent-dim); padding: 0.5rem 1.25rem; margin: 1.5em 0; color: var(--fg-dim); font-style: italic; } blockquote p { margin: 0.4em 0; } /* =========================== Post List (homepage, below canvas) Just titles. No cards. =========================== */ .writings { margin-top: 3rem; width: 100%; max-width: 32rem; } .writings h2 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--fg-dim); margin-bottom: 1.5rem; } .writing-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .writing-item a { display: flex; align-items: baseline; gap: 1rem; text-decoration: none; padding: 0.35rem 0; transition: color var(--transition); } .writing-item time { font-size: 0.7rem; color: var(--fg-dim); flex-shrink: 0; letter-spacing: 0.02em; min-width: 6rem; } .writing-item .title { font-size: 0.88rem; color: var(--fg); transition: color var(--transition); } .writing-item a:hover .title { color: var(--accent); } /* =========================== Genera Gallery (dark, just names) =========================== */ .genera-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; margin-top: 2rem; } .genera-item a { display: block; padding: 0.6rem 0; text-decoration: none; border-bottom: 1px solid var(--border); transition: all var(--transition); } .genera-item a:hover { padding-left: 0.5rem; } .genera-item .piece-title { font-size: 1rem; font-style: italic; color: var(--fg); transition: color var(--transition); } .genera-item a:hover .piece-title { color: var(--accent); } .genera-item .piece-info { font-size: 0.7rem; color: var(--fg-dim); margin-top: 0.2rem; letter-spacing: 0.02em; } /* =========================== Footer — barely there =========================== */ .site-footer { margin-top: auto; padding: 3rem 1.5rem 2rem; text-align: center; font-size: 0.7rem; color: var(--fg-dim); letter-spacing: 0.02em; } .site-footer a { color: var(--fg-dim); text-decoration: none; transition: color var(--transition); } .site-footer a:hover { color: var(--accent); } .footer-sep { margin: 0 0.4rem; opacity: 0.4; } /* =========================== Responsive =========================== */ @media (max-width: 640px) { .lobster-nav { top: 1rem; left: 1rem; } main { padding: 3rem 1.25rem 4rem; padding-left: 1.25rem; /* no offset on mobile, nav overlaps */ } .home-title { font-size: 1.8rem; } .home-content { padding: 3rem 1.5rem; } .home-doors { gap: 1.5rem; font-size: 0.8rem; } .post-header h1 { font-size: 1.5rem; } .writing-item a { flex-direction: column; gap: 0.15rem; } .writing-item time { min-width: auto; } } /* =========================== Images =========================== */ .post-content img { max-width: 100%; border-radius: 4px; margin: 1.5em 0; } /* =========================== Horizontal rule =========================== */ hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; } /* =========================== Selection =========================== */ ::selection { background: var(--accent); color: var(--bg); }