/* ============================================================ Andres / Red Valdez — personal site Vanilla CSS. Cream paper, ink, brick-red accent. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..600&family=Geist:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { --paper: oklch(0.96 0.012 85); --paper-2: oklch(0.93 0.014 82); --ink: oklch(0.22 0.015 60); --ink-2: oklch(0.38 0.013 65); --muted: oklch(0.55 0.012 70); --hair: oklch(0.85 0.014 80); --hair-2: oklch(0.78 0.014 75); --accent: oklch(0.55 0.18 25); --accent-soft: oklch(0.55 0.18 25 / 0.12); --accent-ink: oklch(0.40 0.14 25); --serif: "Newsreader", "Source Serif 4", Georgia, serif; --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --maxw: 720px; } /* Cream paper is the committed default. To offer dark mode later, add a [data-theme="dark"] block here and a toggle that sets it on . */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "ss02"; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; margin: 0; } a { color: inherit; text-decoration: none; } p { margin: 0; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .wrap--wide { max-width: 920px; } /* ---- shared inline helpers ---- */ .mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--muted); } .red { color: var(--accent); } .muted { color: var(--muted); } .italic { font-style: italic; } .lnk { border-bottom: 1px solid var(--hair-2); transition: color .15s, border-color .15s; } .lnk:hover { color: var(--accent); border-bottom-color: var(--accent); } hr.rule { border: 0; border-top: 1px solid var(--hair); margin: 0; } /* ============================================================ NAV ============================================================ */ .nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 40px 0 22px; border-bottom: 1px solid var(--hair); } .brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; } .brand__crest { width: 30px; height: 30px; display: block; flex: 0 0 auto; } .brand__name { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1; white-space: nowrap; } .brand__name em { font-style: italic; color: var(--accent); } .brand__slash { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.1em; white-space: nowrap; } .nav__links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; } .nav__links a { font-size: 0.82rem; color: var(--ink-2); padding-bottom: 2px; transition: color .15s; } .nav__links a:hover { color: var(--accent); } .nav__links a.is-active { color: var(--accent); border-bottom: 1px solid var(--accent); } /* view toggle button */ .toggle { appearance: none; border: 1px solid var(--hair-2); background: transparent; border-radius: 6px; width: 32px; height: 27px; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); transition: border-color .15s, color .15s; } .toggle:hover { border-color: var(--accent); color: var(--accent); } .toggle svg { display: block; } /* ============================================================ HERO ============================================================ */ .hero { padding: 38px 0 30px; } .hero h1 { font-size: 2.35rem; line-height: 1.15; margin-bottom: 10px; } .hero h1 .slash { color: var(--muted); } .hero h1 em { font-style: italic; color: var(--accent); } .tagline { font-family: var(--serif); font-size: 1.32rem; font-style: italic; line-height: 1.4; color: var(--ink); margin-bottom: 14px; } .tagline .red { color: var(--accent); } .lede { font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); max-width: 560px; } /* ============================================================ SECTION + LISTS ============================================================ */ .section { padding: 22px 0; } .sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; } .sec-title { font-family: var(--sans); font-size: 0.78rem; font-weight: 500; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; } .sec-more { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); } .sec-more:hover { color: var(--accent); } .list { list-style: none; padding: 0; margin: 0; } .row { display: grid; gap: 16px; align-items: baseline; padding: 10px 0; } .row--post { grid-template-columns: 66px 1fr auto; } .row--film { grid-template-columns: 44px 1fr auto; } .row + .row { border-top: 1px dotted var(--hair); } .row__date { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); } .row__date--film { color: var(--accent); } .row__title { font-family: var(--serif); font-size: 1.06rem; color: var(--ink); transition: color .15s; } .row__title:hover { color: var(--accent); } .row__title--film { font-style: italic; } .row__meta { color: var(--muted); font-size: 0.82rem; margin-left: 10px; } .row__read { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); } /* ============================================================ FOOTER ============================================================ */ .foot { margin-top: 40px; padding: 24px 0 36px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; } .foot__meta { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); letter-spacing: 0.04em; } .foot__links { display: flex; gap: 16px; font-size: 0.78rem; color: var(--ink-2); } .foot__links a:hover { color: var(--accent); } /* ============================================================ HOME — view switching (Index <-> Two Worlds) ============================================================ */ #view-index { display: none; } body.view-two #view-index { display: none; } body.view-two #view-two { display: block; } body.view-index #view-index { display: block; } body.view-index #view-two { display: none; } /* ---- Two Worlds ---- */ .tw-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 40px 0 18px; border-bottom: 1px solid var(--hair); } .tw-top__brand { font-family: var(--serif); font-size: 1rem; letter-spacing: 0.05em; } .tw-top__phrase { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; } .tw-top__nav { display: flex; align-items: center; gap: 16px; font-size: 0.78rem; } .tw-top__nav a { color: var(--ink-2); transition: color .15s; } .tw-top__nav a:hover { color: var(--accent); } .tw-top__nav a.is-active { color: var(--accent); border-bottom: 1px solid var(--accent); } .two-cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; padding-top: 30px; } .tw-divider { background: var(--hair); } .tw-col { display: flex; flex-direction: column; } .tw-col--left { padding-right: 40px; } .tw-col--right { padding-left: 40px; } .tw-col__head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px; } .tw-col__crest { width: 44px; height: 44px; flex: 0 0 auto; } .tw-col__head h2 { font-size: 1.7rem; line-height: 1; white-space: nowrap; } .tw-col--right .tw-col__head h2 { font-style: italic; color: var(--accent); } .tw-col__lede { font-family: var(--serif); font-size: 1rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 22px; } .tw-col__label { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.1em; margin-bottom: 10px; } .tw-item { padding: 8px 0; border-bottom: 1px dotted var(--hair); } .tw-item__title { font-family: var(--serif); font-size: 0.96rem; color: var(--ink); display: block; margin-bottom: 2px; transition: color .15s; } .tw-item__title:hover { color: var(--accent); } .tw-item__title--film { font-style: italic; } .tw-item__meta { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); } .tw-item--film { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; } .tw-item__year { font-family: var(--mono); font-size: 0.7rem; color: var(--accent); } /* ============================================================ WRITING INDEX ============================================================ */ .page-head { padding: 34px 0 8px; } .page-head__kicker { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.14em; margin-bottom: 8px; } .page-head h1 { font-size: 2.5rem; line-height: 1.1; } .page-head h1 em { font-style: italic; color: var(--accent); } .page-head__lede { font-family: var(--serif); font-size: 1rem; color: var(--ink-2); margin-top: 14px; max-width: 540px; } .year-group { padding-top: 22px; } .year-head { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; } .year-head h2 { font-family: var(--serif); font-size: 1.4rem; font-style: italic; color: var(--accent); } .year-head__count { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.1em; } .year-head__line { flex: 1; border-bottom: 1px solid var(--hair); } .entry { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; padding: 12px 0; align-items: baseline; border-bottom: 1px dotted var(--hair); } .entry__mo { font-family: var(--mono); font-size: 0.66rem; color: var(--muted); } .entry__title { font-family: var(--serif); font-size: 1.08rem; color: var(--ink); transition: color .15s; } .entry__title:hover { color: var(--accent); } .entry__desc { font-size: 0.8rem; color: var(--muted); margin-top: 2px; line-height: 1.4; } .entry__read { font-family: var(--mono); font-size: 0.64rem; color: var(--muted); } /* ============================================================ SINGLE POST ============================================================ */ .article { padding: 34px 0 0; max-width: 680px; margin: 0 auto; } .back { font-family: var(--mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.12em; } .article__head { margin: 14px 0 24px; } .article__head h1 { font-size: 2.5rem; line-height: 1.12; margin-bottom: 10px; } .article__meta { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.06em; } .article__meta .red { color: var(--accent); } .prose { font-family: var(--serif); font-size: 1.15rem; line-height: 1.65; color: var(--ink); } .prose p + p { margin-top: 18px; } .prose .drop { font-family: var(--serif); font-size: 3.2rem; line-height: 0.9; float: left; padding: 6px 10px 0 0; color: var(--accent); font-weight: 500; } .prose blockquote.pull { margin: 24px 0; padding: 12px 18px 12px 22px; border-left: 2px solid var(--accent); font-style: italic; color: var(--ink-2); font-size: 1.06rem; } .article__foot { margin-top: 40px; padding: 20px 0 36px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: baseline; } .article__foot a, .article__foot span { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); } .article__foot a:hover { color: var(--accent); } .article__foot a.next { color: var(--accent); } /* ============================================================ FILMS INDEX ============================================================ */ .film-link { display: grid; grid-template-columns: 72px 1fr 60px; gap: 24px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--hair); color: inherit; } .film-link:hover .film-link__title { color: var(--accent); } .film-thumb { width: 72px; height: 54px; background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, var(--paper) 6px 12px); border: 1px solid var(--hair); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.6rem; color: var(--muted); } .film-link__title { display: block; font-family: var(--serif); font-size: 1.35rem; font-style: italic; transition: color .15s; } .film-link__roles { display: block; font-family: var(--mono); font-size: 0.62rem; color: var(--muted); margin-top: 4px; letter-spacing: 0.06em; } .film-link__len { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-2); } .film-link__year { font-family: var(--mono); font-size: 0.9rem; color: var(--accent); text-align: right; } /* ============================================================ EMPTY STATE ============================================================ */ .empty-state { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); letter-spacing: 0.04em; padding: 14px 0; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 720px) { .nav { flex-wrap: wrap; gap: 14px; padding-top: 28px; } .nav__links { gap: 16px; } .brand__slash { display: none; } .hero h1 { font-size: 1.9rem; } .two-cols { grid-template-columns: 1fr; } .tw-divider { display: none; } .tw-col--left { padding-right: 0; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--hair); } .tw-col--right { padding-left: 0; } .tw-top__phrase { display: none; } .film-link { grid-template-columns: 56px 1fr auto; } .film-link__len { display: none; } .page-head h1 { font-size: 2rem; } .article__head h1 { font-size: 2rem; } } @media (max-width: 460px) { .row--post { grid-template-columns: 52px 1fr; } .row__read { display: none; } .foot { flex-direction: column; gap: 12px; } }