/* ============================================================ cwfrazier.com — Personal Archive A type-led editorial system with a thin HUD on top. ============================================================ */ /* -------- Reset -------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, svg, video { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } /* -------- Tokens (light = default) -------- */ :root { /* Palette */ --paper: #f3ece0; --paper-soft: #ece4d2; --ink: #19150f; --ink-soft: #2e2820; --ink-mute: #6b6354; --ink-faint: #b9b09c; --rule: #d6cdb9; --rule-soft: #e3dcc9; --accent: #b6411a; /* burnt sienna */ --accent-ink: #7a2c11; --highlight: #ffd86b; /* warm yellow for marks */ --link: #1b3a5a; /* deep ink blue */ /* Type */ --f-display: 'Instrument Serif', 'EB Garamond', Georgia, serif; --f-body: 'Newsreader', Georgia, 'Times New Roman', serif; --f-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Sizing */ --measure: 36rem; --measure-wide: 64rem; --hud-h: 34px; --nav-h: 56px; /* Motion */ --ease-out: cubic-bezier(.16,.84,.34,1); --ease-in-out: cubic-bezier(.6,.04,.32,1); } /* Dark theme — toggled via [data-theme="dark"] on */ :root[data-theme="dark"] { --paper: #0f0e0a; --paper-soft: #181612; --ink: #ece4d2; --ink-soft: #d6cdb9; --ink-mute: #8e8676; --ink-faint: #3d3830; --rule: #2a2620; --rule-soft: #1f1c17; --accent: #e08157; --accent-ink: #f5a989; --highlight: #6a5618; --link: #8db4dc; } /* Respect OS preference if the user hasn't explicitly chosen */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #0f0e0a; --paper-soft: #181612; --ink: #ece4d2; --ink-soft: #d6cdb9; --ink-mute: #8e8676; --ink-faint: #3d3830; --rule: #2a2620; --rule-soft: #1f1c17; --accent: #e08157; --accent-ink: #f5a989; --highlight: #6a5618; --link: #8db4dc; } } /* -------- Base -------- */ html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--f-body); font-weight: 380; font-size: 19px; line-height: 1.62; font-feature-settings: "kern", "liga", "calt", "onum"; font-variant-numeric: oldstyle-nums proportional-nums; min-height: 100vh; overflow-x: hidden; transition: background-color .35s var(--ease-out), color .35s var(--ease-out); } /* Paper grain — subtle SVG noise overlay */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,"); background-size: 240px 240px; mix-blend-mode: multiply; opacity: .55; } :root[data-theme="dark"] body::before { mix-blend-mode: screen; opacity: .35; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { mix-blend-mode: screen; opacity: .35; } } /* Hairline rule along the right edge — gives the page a "bound" feel */ body::after { content: ""; position: fixed; top: 0; bottom: 0; right: 0; width: 1px; background: var(--rule); z-index: 1; pointer-events: none; } /* -------- HUD (top vitals bar) -------- */ .hud { position: sticky; top: 0; z-index: 50; height: var(--hud-h); background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; border-bottom: 1px solid var(--ink); } .hud-inner { width: 100%; max-width: var(--measure-wide); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; gap: 1.25rem; overflow: hidden; white-space: nowrap; } .hud-cell { display: inline-flex; align-items: center; gap: .45rem; color: rgba(243, 236, 224, .82); } .hud-cell strong { color: var(--paper); font-weight: 500; letter-spacing: .08em; } .hud-cell .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 8px var(--accent); animation: pulse 2.2s var(--ease-in-out) infinite; } .hud-cell .sep { color: rgba(243, 236, 224, .35); padding: 0 .35rem; } .hud-spacer { flex: 1; } .hud-toggle { color: rgba(243, 236, 224, .82); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 0 .35rem; transition: color .2s; } .hud-toggle:hover { color: var(--accent); } .hud .cell-now, .hud .cell-build { /* hidden on small screens */ } @media (max-width: 720px) { .hud-inner { gap: .75rem; padding: 0 1rem; font-size: 10px; } .hud .cell-build, .hud .cell-loc { display: none; } } @media (max-width: 480px) { .hud .cell-now { display: none; } } @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--accent); } 50% { opacity: .55; box-shadow: 0 0 2px var(--accent); } } /* -------- Masthead / Nav -------- */ .mast { position: relative; z-index: 5; padding: 1.75rem 0 1.1rem; border-bottom: 1px solid var(--rule); } .mast-inner { max-width: var(--measure-wide); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: baseline; gap: 2.5rem; flex-wrap: wrap; } .mast-brand { font-family: var(--f-display); font-style: italic; font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1; color: var(--ink); letter-spacing: -.01em; } .mast-brand sup { font-family: var(--f-mono); font-style: normal; font-size: .42em; color: var(--ink-mute); letter-spacing: .15em; text-transform: uppercase; margin-left: .5em; position: relative; top: -.95em; } .mast-nav { margin-left: auto; display: flex; gap: 1.3rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; } .mast-nav a { color: var(--ink-mute); padding: .35rem 0; position: relative; transition: color .2s var(--ease-out); } .mast-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .35s var(--ease-out); } .mast-nav a:hover, .mast-nav a[aria-current="page"] { color: var(--ink); } .mast-nav a:hover::after, .mast-nav a[aria-current="page"]::after { transform: scaleX(1); } .mast-nav a[aria-current="page"] { color: var(--accent); } @media (max-width: 720px) { .mast-inner { gap: 1rem; padding: 0 1rem; } .mast-nav { width: 100%; margin-left: 0; gap: .9rem; font-size: 10.5px; letter-spacing: .12em; } } /* -------- Page layout -------- */ .page { position: relative; z-index: 2; max-width: var(--measure-wide); margin: 0 auto; padding: 2.5rem 1.5rem 6rem; } .page-wide {} /* default — uses measure-wide */ .page-narrow { max-width: calc(var(--measure) + 6rem); } /* File/entry sigil shown next to titles — archival flavor */ .sigil { display: inline-block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); padding-bottom: .45rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; } .sigil .sigil-dot { color: var(--accent); margin: 0 .35em; } /* -------- Display type -------- */ .display, h1.display, .page-title { font-family: var(--f-display); font-weight: 400; font-style: italic; color: var(--ink); line-height: .95; letter-spacing: -.02em; font-size: clamp(2.5rem, 6vw, 4.6rem); margin: 0 0 .9rem; } .display-roman, h1.display-roman { font-style: normal; } .kicker { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: .8rem; } .lede { font-family: var(--f-body); font-size: clamp(1.15rem, 1.5vw, 1.32rem); line-height: 1.45; color: var(--ink-soft); max-width: 38ch; margin: 0 0 2rem; font-style: italic; font-weight: 320; } /* -------- Body type -------- */ .prose { max-width: var(--measure); } .prose p, .prose ul, .prose ol { margin: 0 0 1.1rem; } .prose ul, .prose ol { padding-left: 1.5rem; } .prose li { margin-bottom: .35rem; } .prose strong { font-weight: 600; color: var(--ink); } .prose em { font-style: italic; } .prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: .055em; text-underline-offset: .18em; transition: color .2s, text-decoration-color .2s; } .prose a:hover { color: var(--accent); text-decoration-color: var(--accent); } .prose blockquote { border-left: 2px solid var(--accent); margin: 1.4rem 0; padding: .25rem 0 .25rem 1.25rem; font-style: italic; color: var(--ink-soft); } /* Drop cap on first paragraph (.prose-essay opt-in) */ .prose-essay > p:first-of-type::first-letter { font-family: var(--f-display); font-style: italic; font-size: 4.2em; line-height: .85; float: left; padding: .12em .12em 0 0; color: var(--accent); } /* Section headings */ h2.section-h { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.55rem, 2.5vw, 2rem); line-height: 1.05; margin: 3rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--ink); letter-spacing: -.01em; } .label-h, h3.label-h { font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); margin: 2.25rem 0 1rem; } /* -------- Metadata row / dateline -------- */ .meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 2rem; padding-bottom: .85rem; border-bottom: 1px solid var(--rule); } .meta-row .meta-dot { width: 4px; height: 4px; background: var(--ink-faint); border-radius: 50%; } /* Back link (used on essay/historical/photo sub-pages) */ .backlink { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 1.5rem; transition: color .2s, transform .25s var(--ease-out); } .backlink::before { content: "←"; transition: transform .25s var(--ease-out); } .backlink:hover { color: var(--accent); } .backlink:hover::before { transform: translateX(-3px); } /* -------- Index list (essays / historical / etc) -------- */ .idx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); } .idx > li { border-bottom: 1px solid var(--rule); } .idx a.idx-row { display: grid; grid-template-columns: 5ch 1fr auto; gap: 1.25rem; align-items: baseline; padding: 1.1rem 0; color: var(--ink); transition: background-color .3s var(--ease-out), color .3s var(--ease-out); position: relative; } .idx a.idx-row:hover { background: var(--paper-soft); color: var(--ink); } .idx-num { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-mute); padding-left: .1rem; } .idx-title { font-family: var(--f-display); font-size: clamp(1.25rem, 2vw, 1.55rem); font-style: italic; line-height: 1.15; letter-spacing: -.01em; } .idx a.idx-row:hover .idx-title { color: var(--accent); } .idx-date { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; padding-right: .5rem; } @media (max-width: 580px) { .idx a.idx-row { grid-template-columns: 4ch 1fr; row-gap: .35rem; } .idx-date { grid-column: 2; padding-right: 0; } } /* -------- Card grids -------- */ .grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; } .card { background: var(--paper-soft); border: 1px solid var(--rule); padding: 1.25rem; transition: transform .35s var(--ease-out), border-color .25s, background-color .25s; position: relative; } .card:hover { transform: translateY(-2px); border-color: var(--accent); } /* -------- Photo grids -------- */ .cities { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .city { position: relative; overflow: hidden; background: var(--paper-soft); border: 1px solid var(--rule); transition: border-color .25s; } .city img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.85) contrast(.96); transition: transform .8s var(--ease-out), filter .4s; } .city:hover { border-color: var(--accent); } .city:hover img { transform: scale(1.04); filter: saturate(1) contrast(1); } .city-info { padding: .9rem 1.1rem 1.1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .city-name { font-family: var(--f-display); font-style: italic; font-size: 1.25rem; line-height: 1.1; color: var(--ink); } .city-count { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; } .photo-grid .photo { overflow: hidden; background: var(--paper-soft); aspect-ratio: 1; } .photo-grid img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; filter: saturate(.9); transition: transform .5s var(--ease-out), filter .3s; } .photo-grid img:hover { transform: scale(1.04); filter: saturate(1); } /* Photo modal */ .modal { display: none; position: fixed; inset: 0; background: rgba(15,14,10,.94); z-index: 200; cursor: zoom-out; align-items: center; justify-content: center; backdrop-filter: blur(8px); } .modal.open { display: flex; } .modal img { max-width: 95vw; max-height: 92vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.4); } /* -------- Apps page -------- */ .app-hero { background: var(--ink); color: var(--paper); padding: 1.6rem 1.75rem; margin: 0 0 2.5rem; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem; position: relative; overflow: hidden; } .app-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 0% 100%, var(--accent) 0%, transparent 55%); opacity: .28; pointer-events: none; } .app-hero h3 { font-family: var(--f-display); font-style: italic; font-size: 2.1rem; margin: 0 0 .35rem; line-height: 1; color: var(--paper); position: relative; } .app-hero p { font-family: var(--f-body); color: rgba(243,236,224,.78); font-size: 1rem; line-height: 1.5; margin: 0; max-width: 38ch; position: relative; } .app-hero a { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 2px; transition: opacity .2s; position: relative; } .app-hero a:hover { opacity: .8; } .apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; margin-top: 1.25rem; } .app { display: flex; gap: 1rem; padding: 1.1rem; background: var(--paper-soft); border: 1px solid var(--rule); transition: border-color .25s, background-color .25s, transform .25s; } .app:hover { border-color: var(--accent); background: var(--paper); } .app-icon { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; } .app-body { flex: 1; min-width: 0; } .app-name { font-family: var(--f-display); font-style: italic; font-size: 1.18rem; line-height: 1.1; margin: 0 0 .15rem; color: var(--ink); display: flex; align-items: baseline; gap: .65rem; flex-wrap: wrap; } .app-price { font-family: var(--f-mono); font-style: normal; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 1px 6px; white-space: nowrap; } .app-desc { font-size: .95rem; line-height: 1.45; color: var(--ink-soft); margin: .15rem 0 0; } /* -------- Resume -------- */ .cv { max-width: calc(var(--measure) + 5rem); } .cv-header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem; margin-bottom: 2.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--ink); } .cv-header h1 { font-family: var(--f-display); font-style: italic; font-size: clamp(2.5rem, 5vw, 3.8rem); line-height: .95; margin: 0; } .cv-header .cv-meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); text-align: right; line-height: 1.5; } .cv-section { margin: 2.75rem 0; } .cv-section > h2 { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 1.3rem; padding: 0; border: 0; } .cv-summary { font-family: var(--f-display); font-style: italic; font-size: 1.35rem; line-height: 1.4; color: var(--ink-soft); max-width: 42ch; } .cv-skills { display: flex; flex-wrap: wrap; gap: .35rem .55rem; } .cv-skill { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--rule); padding: 4px 9px; } .cv-stack { font-family: var(--f-mono); font-size: .82rem; line-height: 1.7; color: var(--ink-soft); } .cv-stack strong { color: var(--accent); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .cv-job { display: grid; grid-template-columns: 11ch 1fr; gap: 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--rule); } .cv-job:first-of-type { border-top: 1px solid var(--ink-faint); } .cv-dates { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); padding-top: .25rem; } .cv-job-body h3 { font-family: var(--f-display); font-style: italic; font-size: 1.45rem; line-height: 1.1; margin: 0 0 .15rem; } .cv-job-body .cv-company { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: .75rem; } .cv-job-body p { font-style: italic; color: var(--ink-soft); margin: 0 0 .55rem; } .cv-job-body ul { margin: .35rem 0 0; padding-left: 1.1rem; } .cv-job-body li { font-size: .98rem; line-height: 1.55; margin-bottom: .2rem; color: var(--ink-soft); } @media (max-width: 580px) { .cv-job { grid-template-columns: 1fr; gap: .35rem; } .cv-header { grid-template-columns: 1fr; } .cv-header .cv-meta { text-align: left; } } /* -------- Form (contact) -------- */ .form { max-width: var(--measure); margin-top: 1.5rem; } .field { margin-bottom: 1.25rem; } .field label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .4rem; } .field input, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink); font-family: var(--f-body); font-size: 1.05rem; padding: .65rem 0; border-radius: 0; transition: border-color .25s; -webkit-appearance: none; appearance: none; } .field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--accent); } .field textarea { resize: vertical; min-height: 160px; line-height: 1.55; } .field-row { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--rule); padding-bottom: .35rem; } .field-row label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; margin: 0; } .field-row input { width: 6rem; background: transparent; border: 0; color: var(--ink); font-family: var(--f-mono); font-size: 1rem; text-align: center; padding: .35rem 0; } .field-row input:focus { outline: 0; } .btn-primary { display: inline-flex; align-items: center; gap: .65rem; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: .85rem 1.5rem; border: 1px solid var(--ink); transition: background-color .25s, color .25s; } .btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); } .btn-primary:disabled { opacity: .55; cursor: not-allowed; } .status { margin-top: 1rem; padding: .85rem 1rem; font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; display: none; border-left: 3px solid var(--rule); } .status.success { display: block; border-left-color: var(--accent); color: var(--ink); } .status.error { display: block; border-left-color: #c33; color: #c33; } .hp { position: absolute; left: -9999px; } /* -------- Music page -------- */ .tools { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; margin: 1.25rem 0 2rem; padding: .85rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .tools-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); } .tools a { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin: 0 .35rem; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; } .tools a:hover { color: var(--ink); } .tools a.active { color: var(--accent); border-bottom-color: var(--accent); } .song-list { list-style: none; padding: 0; margin: 0; } .song-list li { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--rule); } .song-list li img { width: 48px; height: 48px; object-fit: cover; background: var(--paper-soft); } .song-info { min-width: 0; } .song-info a { font-family: var(--f-display); font-style: italic; font-size: 1.2rem; line-height: 1.1; color: var(--ink); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s; } .song-info a:hover { color: var(--accent); } .song-info .artist { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-top: .15rem; } /* -------- Ratings page -------- */ .ratings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1.4rem 1.1rem; margin-top: 1.25rem; } .rating-card { display: block; } .rating-card img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--paper-soft); border: 1px solid var(--rule); transition: border-color .25s, transform .35s var(--ease-out); } .rating-card:hover img { border-color: var(--accent); transform: translateY(-2px); } .rating-card .rc-title { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; line-height: 1.15; margin: .55rem 0 .1rem; color: var(--ink); } .rating-card .rc-sub { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); } .stars { margin-top: .35rem; font-family: var(--f-mono); letter-spacing: 2px; font-size: .9rem; } .star { color: var(--ink-faint); } .star.filled { color: var(--accent); } /* -------- Rate (admin) page -------- */ .rate-list { list-style: none; padding: 0; margin: 0; } .rate-card { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); transition: opacity .4s, max-height .4s; overflow: hidden; max-height: 260px; } .rate-card.done { opacity: 0; max-height: 0; padding: 0; border: 0; } .rate-card img { width: 90px; height: 130px; object-fit: cover; background: var(--paper-soft); } .rate-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .rate-title { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; line-height: 1.1; margin-bottom: .15rem; } .rate-sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: .65rem; } .star-row { display: flex; gap: .2rem; align-items: center; } .star-btn { background: transparent; border: 0; font-size: 1.6rem; line-height: 1; color: var(--ink-faint); padding: .15rem .15rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .15s, transform .15s; } .star-btn:hover, .star-btn.active { color: var(--accent); transform: scale(1.08); } .del-btn { background: transparent; border: 0; font-size: 1.1rem; color: var(--ink-faint); padding: 0 0 0 .85rem; cursor: pointer; margin-left: auto; transition: color .15s; } .del-btn:hover { color: #c33; } /* -------- Footer -------- */ .foot { position: relative; z-index: 2; margin-top: 5rem; padding: 2rem 1.5rem 4rem; border-top: 1px solid var(--rule); background: var(--paper); } .foot-inner { max-width: var(--measure-wide); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); } .foot-brand { font-family: var(--f-display); font-style: italic; font-size: 1.4rem; color: var(--ink); line-height: 1; letter-spacing: -.01em; text-transform: none; } .foot-meta { line-height: 1.7; } .foot-meta a { color: var(--ink-mute); transition: color .2s; } .foot-meta a:hover { color: var(--accent); } .foot-rule { grid-column: 1 / -1; height: 1px; background: var(--rule); margin: 1rem 0; } @media (max-width: 580px) { .foot-inner { grid-template-columns: 1fr; gap: 1rem; } } /* -------- Misc -------- */ .empty { padding: 3rem 1.25rem; text-align: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); border: 1px dashed var(--rule); } /* On-load animations for h1/lede (handled by site.js applying .is-revealed) */ [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } ::selection { background: var(--highlight); color: var(--ink); } /* ============================================================ Blog system — post lists, archive rows, topic cloud ============================================================ */ .bl-hero { padding-top: .5rem; margin-bottom: 3rem; } .bl-hero .kicker { margin-bottom: 1rem; } .bl-hero .display { font-size: clamp(2.5rem, 5.5vw, 4.3rem); } .bl-hero .lede { margin-top: 1.5rem; } .bl-tools { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: baseline; margin: 1.25rem 0 2rem; padding: .85rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .bl-tools .tools-label { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .bl-tools a { color: var(--ink-mute); border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: color .2s, border-color .2s; } .bl-tools a:hover { color: var(--accent); border-bottom-color: var(--accent); } .bl-list { display: flex; flex-direction: column; } .bl-post { padding: 1.75rem 0; border-bottom: 1px solid var(--rule); } .bl-post:first-child { padding-top: .5rem; } .bl-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .85rem; margin-bottom: .5rem; } .bl-date { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); } .bl-tags { display: flex; flex-wrap: wrap; gap: .3rem; } .bl-tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--rule); padding: 2px 8px; transition: color .2s, border-color .2s; } .bl-tag:hover { color: var(--accent); border-color: var(--accent); } .bl-title { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.55rem, 2.4vw, 1.95rem); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5rem; } .bl-title a { color: var(--ink); transition: color .2s; } .bl-title a:hover { color: var(--accent); } .bl-summary { font-size: 1rem; line-height: 1.55; color: var(--ink-soft); margin: 0 0 .5rem; max-width: 60ch; } .bl-more { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid transparent; transition: border-color .2s; display: inline-block; } .bl-more:hover { border-bottom-color: var(--accent); } .bl-pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; } .bl-pagination a { color: var(--ink-mute); border-bottom: 1px solid var(--rule); padding-bottom: 2px; transition: color .2s, border-color .2s; } .bl-pagination a:hover { color: var(--accent); border-bottom-color: var(--accent); } .bl-pagination .sep { color: var(--ink-faint); } /* Archive (writing.html) */ .ar-list { display: flex; flex-direction: column; } .ar-row { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); transition: background-color .25s, color .25s; } .ar-row:hover { background: var(--paper-soft); } .ar-row:hover .ar-title { color: var(--accent); } .ar-meta { display: flex; flex-direction: column; gap: .25rem; padding-top: .2rem; } .ar-date { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); } .ar-tags { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); } .ar-title { font-family: var(--f-display); font-style: italic; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); transition: color .2s; } .ar-desc { font-size: .95rem; line-height: 1.5; color: var(--ink-soft); margin-top: .35rem; max-width: 60ch; } @media (max-width: 580px) { .ar-row { grid-template-columns: 1fr; gap: .35rem; } } /* Topic cloud (categories.html) */ .topic-cloud { display: flex; flex-wrap: wrap; gap: .55rem; } .topic-chip { display: inline-flex; align-items: baseline; gap: .55rem; padding: .55rem .9rem; background: var(--paper-soft); border: 1px solid var(--rule); transition: border-color .25s, background-color .25s, transform .25s; } .topic-chip:hover { border-color: var(--accent); background: var(--paper); transform: translateY(-1px); } .topic-name { font-family: var(--f-display); font-style: italic; font-size: 1.05rem; color: var(--ink); } .topic-chip:hover .topic-name { color: var(--accent); } .topic-count { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ink-mute); } /* Blog-post code blocks — readable in both themes */ .prose-essay pre { background: var(--paper-soft); border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: 1rem 1.25rem; overflow-x: auto; font-family: var(--f-mono); font-size: .82rem; line-height: 1.55; margin: 1.25rem 0; } .prose-essay code { font-family: var(--f-mono); font-size: .85em; background: var(--paper-soft); border: 1px solid var(--rule); padding: 1px 5px; border-radius: 2px; color: var(--accent-ink); } .prose-essay pre code { background: none; border: 0; padding: 0; color: inherit; font-size: 1em; } .prose-essay h2 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2vw, 1.6rem); margin: 2.5rem 0 .85rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule); color: var(--ink); letter-spacing: -.01em; } .prose-essay h3 { font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 1.15rem; margin: 1.75rem 0 .5rem; color: var(--ink); letter-spacing: -.01em; } .prose-essay hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; } .prose-essay table { border-collapse: collapse; margin: 1.25rem 0; width: 100%; font-size: .92rem; } .prose-essay th, .prose-essay td { border: 1px solid var(--rule); padding: .5rem .75rem; text-align: left; vertical-align: top; } .prose-essay th { background: var(--paper-soft); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; } /* Honor reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }