/* ============================================================ Prohurtz — "Paper" Minimal editorial: narrow column, serif display, monospace meta, warm paper + a single rust accent. Text-forward, flat. Vanilla CSS, no frameworks. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500&display=swap"); /* ---------- Theme tokens ---------- */ :root { --display: "Newsreader", Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Fallback light palette = Cobalt (used if no data-palette is set) */ --img-tile: #f1f3f6; --bg: #f4f5f7; --surface: #fafbfc; --text: #1b1d22; --text-2: #4c4f57; --muted: #888c96; --line: rgba(20, 24, 34, 0.13); --line-2: rgba(20, 24, 34, 0.07); --accent: #2f5cff; --accent-2: #4a6dff; --accent-soft: rgba(47, 92, 255, 0.10); --green: #2f7d54; --green-soft: rgba(47, 125, 84, 0.12); } /* ============================================================ Palettes — switch with data-palette on . Light tokens live on [data-palette]; dark tokens on the [data-theme="dark"][data-palette] pair (higher specificity). ============================================================ */ /* ----- Pine ----- */ [data-palette="pine"] { --img-tile: #f3f4ee; --bg: #f2f4ee; --surface: #f8f9f3; --text: #1a1f1a; --text-2: #4d544a; --muted: #868d80; --line: rgba(26, 31, 22, 0.13); --line-2: rgba(26, 31, 22, 0.07); --accent: #2f6b4f; --accent-2: #387a5b; --accent-soft: rgba(47, 107, 79, 0.10); --green: #8a6a1c; --green-soft: rgba(138, 106, 28, 0.12); } [data-theme="dark"][data-palette="pine"] { --bg: #0e130f; --surface: #151b16; --text: #e6eae3; --text-2: #aab2a4; --muted: #7c8475; --line: rgba(230, 234, 227, 0.14); --line-2: rgba(230, 234, 227, 0.06); --accent: #6fc295; --accent-2: #82cda4; --accent-soft: rgba(111, 194, 149, 0.14); --green: #d8b15a; --green-soft: rgba(216, 177, 90, 0.16); } /* ----- Ink & Cobalt ----- */ [data-palette="cobalt"] { --img-tile: #f1f3f6; --bg: #f4f5f7; --surface: #fafbfc; --text: #1b1d22; --text-2: #4c4f57; --muted: #888c96; --line: rgba(20, 24, 34, 0.13); --line-2: rgba(20, 24, 34, 0.07); --accent: #2f5cff; --accent-2: #4a6dff; --accent-soft: rgba(47, 92, 255, 0.10); --green: #2f7d54; --green-soft: rgba(47, 125, 84, 0.12); } [data-theme="dark"][data-palette="cobalt"] { --bg: #0f1115; --surface: #171a20; --text: #e8eaf0; --text-2: #a7abb8; --muted: #777c89; --line: rgba(232, 234, 240, 0.14); --line-2: rgba(232, 234, 240, 0.06); --accent: #6f8cff; --accent-2: #88a0ff; --accent-soft: rgba(111, 140, 255, 0.16); --green: #6cc795; --green-soft: rgba(108, 199, 149, 0.16); } /* ----- Mono Slate ----- */ [data-palette="mono"] { --img-tile: #f4f4f2; --bg: #f6f6f4; --surface: #fbfbf9; --text: #181818; --text-2: #4a4a48; --muted: #8a8a86; --line: rgba(20, 20, 18, 0.14); --line-2: rgba(20, 20, 18, 0.07); --accent: #3a3a3a; --accent-2: #555555; --accent-soft: rgba(40, 40, 40, 0.08); --green: #56705c; --green-soft: rgba(86, 112, 92, 0.12); } [data-theme="dark"][data-palette="mono"] { --bg: #121212; --surface: #1a1a1a; --text: #ededed; --text-2: #aeaeae; --muted: #7a7a7a; --line: rgba(237, 237, 237, 0.14); --line-2: rgba(237, 237, 237, 0.06); --accent: #cfcfcf; --accent-2: #e0e0e0; --accent-soft: rgba(207, 207, 207, 0.12); --green: #9fb4a3; --green-soft: rgba(159, 180, 163, 0.14); } /* ----- Plum ----- */ [data-palette="plum"] { --img-tile: #f4f2f7; --bg: #f4f2f7; --surface: #faf9fc; --text: #1e1a26; --text-2: #555065; --muted: #918da0; --line: rgba(30, 22, 42, 0.13); --line-2: rgba(30, 22, 42, 0.07); --accent: #6a4cc4; --accent-2: #7b5fd0; --accent-soft: rgba(106, 76, 196, 0.10); --green: #9c7a1e; --green-soft: rgba(156, 122, 30, 0.12); } [data-theme="dark"][data-palette="plum"] { --bg: #141220; --surface: #1c1930; --text: #ece8f5; --text-2: #b3aecc; --muted: #807c9c; --line: rgba(236, 232, 245, 0.14); --line-2: rgba(236, 232, 245, 0.06); --accent: #a892f0; --accent-2: #b9a6f5; --accent-soft: rgba(168, 146, 240, 0.16); --green: #d8b15a; --green-soft: rgba(216, 177, 90, 0.16); } /* ----- Paper (original warm rust) ----- */ [data-palette="paper"] { --img-tile: #f5f3ec; --bg: #f6f4ee; --surface: #faf9f5; --text: #20201c; --text-2: #56544c; --muted: #8f8c82; --line: rgba(40, 38, 30, 0.13); --line-2: rgba(40, 38, 30, 0.07); --accent: #b5532a; --accent-2: #c2682c; --accent-soft: rgba(181, 83, 42, 0.10); --green: #3f7d54; --green-soft: rgba(63, 125, 84, 0.10); } [data-theme="dark"][data-palette="paper"] { --bg: #16140f; --surface: #1d1b15; --text: #ece8dd; --text-2: #b3aea0; --muted: #807c70; --line: rgba(236, 232, 221, 0.14); --line-2: rgba(236, 232, 221, 0.06); --accent: #e0916b; --accent-2: #e8a47f; --accent-soft: rgba(224, 145, 107, 0.14); --green: #7fb98f; --green-soft: rgba(127, 185, 143, 0.14); } /* Dark fallback (no palette set) = Pine dark */ [data-theme="dark"] { --bg: #0e130f; --surface: #151b16; --text: #e6eae3; --text-2: #aab2a4; --muted: #7c8475; --line: rgba(230, 234, 227, 0.14); --line-2: rgba(230, 234, 227, 0.06); --accent: #6fc295; --accent-2: #82cda4; --accent-soft: rgba(111, 194, 149, 0.14); --green: #d8b15a; --green-soft: rgba(216, 177, 90, 0.16); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--bg); line-height: 1.7; min-height: 100vh; overflow-x: hidden; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color 0.25s ease, color 0.25s ease; } ::selection { background: var(--accent-soft); } /* ---------- Top bar (flows with content, narrow column) ---------- */ .menubar { max-width: 680px; margin: 0 auto; padding: 2rem clamp(20px, 5vw, 28px) 1.4rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; } .menubar-brand { display: inline-flex; align-items: baseline; font-family: var(--display); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--text); text-decoration: none; white-space: nowrap; } /* Brand glitch effect — see index.js (toggles .is-glitching). */ .brand-text { position: relative; display: inline-block; } .brand-text.is-glitching { animation: brand-glitch-skew 0.4s steps(2, end) infinite; } .brand-text.is-glitching::before, .brand-text.is-glitching::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; background: var(--bg); } .brand-text.is-glitching::before { color: var(--accent); animation: brand-glitch-anim-1 0.4s steps(2, end) infinite; } .brand-text.is-glitching::after { color: var(--accent-2); animation: brand-glitch-anim-2 0.4s steps(2, end) infinite; } @keyframes brand-glitch-skew { 0% { transform: skewX(0deg); } 25% { transform: skewX(-3deg); } 50% { transform: skewX(2deg); } 75% { transform: skewX(-1deg); } 100% { transform: skewX(0deg); } } @keyframes brand-glitch-anim-1 { 0% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, -1px); } 50% { clip-path: inset(70% 0 5% 0); transform: translate(2px, 1px); } 100% { clip-path: inset(10% 0 75% 0); transform: translate(-1px, 1px); } } @keyframes brand-glitch-anim-2 { 0% { clip-path: inset(65% 0 10% 0); transform: translate(2px, 1px); } 50% { clip-path: inset(15% 0 65% 0); transform: translate(-2px, -1px); } 100% { clip-path: inset(80% 0 5% 0); transform: translate(1px, -1px); } } @media (prefers-reduced-motion: reduce) { .brand-text.is-glitching, .brand-text.is-glitching::before, .brand-text.is-glitching::after { animation: none; } } .menubar-nav { order: 3; flex-basis: 100%; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.3rem; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--line-2); margin-left: -0.5rem; } .nav-link { font-family: var(--mono); font-weight: 400; font-size: 0.8rem; text-transform: lowercase; color: var(--text-2); text-decoration: none; padding: 0.2rem 0.5rem; border-radius: 4px; white-space: nowrap; transition: color 0.15s ease, background-color 0.15s ease; } .nav-link:hover { color: var(--accent); } .nav-link[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .nav-link:focus-visible, .menubar-btn:focus-visible, .menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .menubar-right { display: inline-flex; align-items: baseline; gap: 0.6rem; flex-shrink: 0; margin-left: auto; } .clock { font-family: var(--mono); font-weight: 400; font-size: 0.72rem; color: var(--muted); white-space: nowrap; } .menubar-btn, .menu-btn { border: none; background: none; color: var(--text-2); font-size: 0.95rem; line-height: 1; cursor: pointer; padding: 0.15rem; transition: transform 0.15s ease, opacity 0.15s ease; opacity: 0.85; } .menubar-btn:hover, .menu-btn:hover { opacity: 1; transform: scale(1.1); } .menu-btn { display: none; } /* Palette switcher (injected by index.js) */ .palette-select { font-family: var(--mono); font-size: 0.72rem; text-transform: lowercase; color: var(--text-2); background: none; border: 1px solid var(--line); border-radius: 5px; padding: 0.18rem 0.35rem; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .palette-select:hover { color: var(--accent); border-color: var(--accent); } .palette-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Layout ---------- */ .container { max-width: 680px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 28px); position: relative; } /* ---------- Sections ---------- */ .panel { padding: 1.6rem 0; border-top: 1px solid var(--line-2); } .panel.hero { border-top: none; padding: 1rem 0 1.8rem; } h1 { font-family: var(--display); font-size: clamp(2.1rem, 6vw, 2.9rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.9rem; } h2 { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 1.2rem; display: flex; align-items: center; gap: 0.6rem; } /* leading hairline accent for section labels */ h2::before { content: ""; width: 16px; height: 1px; background: var(--accent); flex-shrink: 0; } .panel p { color: var(--text-2); margin: 0.9rem 0; font-size: 1.05rem; max-width: 60ch; } .lead { font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.4rem); font-weight: 400; line-height: 1.5; color: var(--text); max-width: 50ch; margin: 0; } .panel p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: var(--accent-soft); transition: text-decoration-color 0.15s ease; } .panel p a:hover { text-decoration-color: var(--accent); } /* ---------- Cards → flat list entries ---------- */ .card { position: relative; display: block; background: none; border: none; border-top: 1px solid var(--line-2); border-radius: 0; padding: 1.1rem 0; margin: 0; transition: none; } .card:first-of-type { border-top: none; } a.card { text-decoration: none; color: inherit; } a.card::after { content: "→"; position: absolute; top: 1.1rem; right: 0; font-family: var(--mono); color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity 0.18s ease, transform 0.18s ease; } a.card:hover h3, a.card:focus-visible h3 { color: var(--accent); } a.card:hover::after, a.card:focus-visible::after { opacity: 1; transform: translateX(0); } a.card:focus-visible { outline: none; } .card-row { display: flex; align-items: flex-start; gap: 1rem; } .card-icon { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line-2); padding: 4px; } .card-emoji { width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; background: var(--accent-soft); } .card-emoji.green { background: var(--green-soft); } .card-body { min-width: 0; } .card-body h3 { font-family: var(--display); margin: 0 0 0.25rem; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; padding-right: 1.5rem; transition: color 0.15s ease; } /* h3 when used directly under a card (no card-row) */ .card > h3 { font-family: var(--display); margin: 0 0 0.25rem; font-size: 1.2rem; font-weight: 600; } .card-body p, .card > p { margin: 0; font-size: 0.97rem; color: var(--text-2); max-width: 60ch; } /* ---------- Chips → mono tags ---------- */ .chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; } .chip { font-family: var(--mono); font-size: 0.68rem; font-weight: 400; padding: 0.12rem 0.5rem; border-radius: 4px; border: 1px solid var(--line); background: none; color: var(--muted); white-space: nowrap; } .chip-accent { border-color: var(--accent-soft); color: var(--accent); } .chip-green { border-color: var(--green-soft); color: var(--green); } .chip-award { border-color: var(--accent-soft); color: var(--accent); background: var(--accent-soft); } /* ---------- Grids → simple stacks ---------- */ .grid-2, .grid-3 { display: grid; gap: 0; margin-top: 0.4rem; } .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-2 .card, .grid-3 .card { margin: 0; height: auto; border-top: 1px solid var(--line-2); } .grid-2 .card:first-child, .grid-3 .card:first-child { border-top: none; } /* ---------- Project list (larger thumbnails) ---------- */ .project-card .card-row { gap: 1.3rem; align-items: center; } .project-card .card-icon, .project-card .card-emoji { width: 104px; height: 104px; border-radius: 12px; padding: 8px; } /* Keep logos/screenshots legible in both themes */ .project-card .card-icon { background: var(--img-tile); } .project-card .card-emoji { font-size: 2.6rem; padding: 0; } .project-card .card-body h3 { font-size: 1.3rem; } /* ---------- Project detail pages ---------- */ .back-link { display: inline-block; margin: 0.4rem 0 0.2rem; font-family: var(--mono); font-size: 0.78rem; text-transform: lowercase; color: var(--text-2); text-decoration: none; transition: color 0.15s ease; } .back-link:hover { color: var(--accent); } .project-figure { margin: 1.6rem 0 0.4rem; padding: 1.6rem; background: var(--img-tile); border: 1px solid var(--line-2); border-radius: 14px; display: flex; justify-content: center; } .project-figure img { max-width: 100%; max-height: 360px; border-radius: 8px; display: block; } /* ---------- Footer ---------- */ footer { max-width: 680px; margin: 2rem auto 0; padding: 1.6rem clamp(20px, 5vw, 28px) 3rem; border-top: 1px solid var(--line-2); text-align: left; font-family: var(--mono); font-weight: 400; font-size: 0.72rem; color: var(--muted); } /* ---------- Motion preferences ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } a.card::after { transition: none; } } /* ---------- Mobile ---------- */ @media (max-width: 600px) { .menubar { padding: 1.6rem 20px 1.2rem; position: relative; flex-wrap: wrap; } .clock { display: none; } .menu-btn { display: inline-block; font-size: 1.05rem; } .menubar-nav { order: 3; flex-basis: 100%; display: none; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 0.6rem; margin-left: 0; padding-top: 0.6rem; border-top: 1px solid var(--line-2); } .menubar-nav.open { display: flex; } .nav-link { padding: 0.5rem 0; font-size: 0.95rem; } .card-row { gap: 0.8rem; } .card-icon, .card-emoji { width: 40px; height: 40px; font-size: 1.25rem; } .project-card .card-row { gap: 1rem; } .project-card .card-icon, .project-card .card-emoji { width: 76px; height: 76px; font-size: 1.9rem; } .project-figure { padding: 1rem; } }