/* ============================================================ Vibe tokens — four palettes, swapped via [data-vibe] on ============================================================ */ :root { --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Newsreader", Georgia, serif; --font-mono: "Space Mono", ui-monospace, monospace; --wrap: 68rem; --gutter: clamp(1.25rem, 5vw, 4rem); --radius: 14px; /* default = night, overridden below */ --paper: #0e1020; --card: #171a2e; --ink: #e9e6f7; --ink-soft: #9b98b8; --line: #2a2e4a; --accent: #8b6dff; --accent-2: #4adec9; --sky: linear-gradient(90deg, #0e1020, #241a4a 45%, #3b2a6b 70%, #12162e); } [data-vibe="dawn"] { --paper: #fcece2; --card: #fff7f2; --ink: #3b2231; --ink-soft: #8a6a76; --line: #ecd4c6; --accent: #c7457f; --accent-2: #5f6fd0; --sky: linear-gradient(90deg, #f7c9b0, #f0a3a3 40%, #d98bb2 70%, #a58ad6); } [data-vibe="day"] { --paper: #eaf1f6; --card: #ffffff; --ink: #14263a; --ink-soft: #5d7183; --line: #cfdde7; --accent: #1f5fe0; --accent-2: #0d9b7a; --sky: linear-gradient(90deg, #9fd0f0, #6fb6ec 45%, #a8d8e8 75%, #d9edf7); } [data-vibe="dusk"] { --paper: #2a1f3d; --card: #362a4c; --ink: #f5e9f8; --ink-soft: #b9a5c8; --line: #48395f; --accent: #ff7a5c; --accent-2: #ffc24b; --sky: linear-gradient(90deg, #3a2450, #7b3a63 40%, #d1625a 70%, #f0a45c); } /* ============================================================ Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.6s ease, color 0.6s ease; } /* faint paper grain, sits under everything */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.35; background-image: radial-gradient(currentColor 0.5px, transparent 0.5px); background-size: 4px 4px; color: var(--ink-soft); mix-blend-mode: overlay; } .wrap { position: relative; z-index: 1; width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; } a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 2px; } a:hover { color: var(--accent); } :focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; } .mono { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } /* ============================================================ Header ============================================================ */ .site-head { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-block: 1.75rem; } .wordmark { font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.1em; text-decoration: none; border: 1.5px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem; } .wordmark:hover { border-color: var(--accent); } .site-nav { display: flex; gap: 1.5rem; align-items: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; } .site-nav a { text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; } .site-nav a[aria-current="page"] { border-bottom-color: var(--accent); } /* vibe switcher — the signature control */ .vibe-switch { display: flex; gap: 2px; padding: 3px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); } .vibe-switch button { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); background: none; border: 0; border-radius: 999px; padding: 0.35rem 0.6rem; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; } .vibe-switch button:hover { color: var(--ink); } .vibe-switch button[aria-pressed="true"] { background: var(--accent); color: var(--paper); } /* ============================================================ Hero ============================================================ */ .hero { padding-block: clamp(2.5rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); } .horizon { height: 6px; border-radius: 999px; background: var(--sky); margin-bottom: 2.5rem; transition: background 0.6s ease; } .hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 1.4rem + 6.5vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; margin: 0.6rem 0 1.5rem; max-width: 16ch; } .hero h1 em { font-style: normal; color: var(--accent); } .hero-sub { max-width: 46ch; font-size: 1.15em; color: var(--ink-soft); margin: 0; } /* ============================================================ Sections ============================================================ */ .band { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1.5px solid var(--line); } .band-head { margin-bottom: 2rem; } .band h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -0.02em; line-height: 1.1; margin: 0.5rem 0 0; } .prose { max-width: 60ch; } .prose p { margin: 0 0 1.2rem; } .prose p:last-child { margin-bottom: 0; } .notes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .note h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.5rem 0 0.5rem; } .note p { margin: 0; color: var(--ink-soft); font-size: 0.95em; } .tags { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; } .tags li { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; border: 1.5px solid var(--line); border-radius: 999px; padding: 0.3rem 0.75rem; color: var(--ink-soft); } /* ============================================================ Call to action ============================================================ */ .cta { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; background: var(--accent); color: var(--paper); border-radius: 999px; padding: 0.85rem 1.5rem; transition: transform 0.2s ease, filter 0.2s ease; } .cta:hover { color: var(--paper); filter: brightness(1.12); transform: translateY(-2px); } .cta span { transition: transform 0.2s ease; } .cta:hover span { transform: translateX(4px); } /* ============================================================ Project cards ============================================================ */ .project-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); padding: 0; margin: 0; list-style: none; } .project { display: flex; flex-direction: column; gap: 0.75rem; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1.5rem; transition: transform 0.2s ease, border-color 0.2s ease; } .project:hover { transform: translateY(-3px); border-color: var(--accent); } .project-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .status { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 999px; padding: 0.25rem 0.6rem; white-space: nowrap; border: 1.5px solid currentColor; } .status-shipped { color: var(--accent-2); } .status-building { color: var(--accent); } .status-rest { color: var(--ink-soft); } .project h3 { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } .project p { margin: 0; font-size: 0.95em; color: var(--ink-soft); flex: 1; } .project-links { display: flex; gap: 1.25rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.25rem; } .empty { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 2.5rem; text-align: center; color: var(--ink-soft); } /* ============================================================ Footer ============================================================ */ .site-foot { border-top: 1.5px solid var(--line); padding-block: 2rem 3rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } .foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; } /* ============================================================ Motion preferences ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }