/* ============================================================ RJ Barranco – barranco.com A warm, human tribute portfolio. Palette: themeable moods (default Cozy Blue) – see [data-theme]. Type: Newsreader (hero) + Fraunces (headings) + Figtree (sans). ============================================================ */ :root { /* Default mood = Cozy Blue. Other moods live in [data-theme="..."] blocks below and are swapped by the palette picker (bottom-left). The --clay / --sage names are kept as stable accent tokens across moods (their VALUES change per theme) so markup never changes. */ --paper: #EEF2F7; --paper-2: #E0E8F1; --card: #FBFCFE; --ink: #1E2A35; --ink-2: #43525F; --ink-3: #7A8896; --clay: #4C7B9D; /* accent — cozy denim blue */ --clay-deep: #305E7E; /* accent, deeper */ --sage: #6E8E8C; /* secondary — muted slate-teal */ --gold: #CCA45C; /* warm highlight, keeps it cozy */ --accent-rgb: 76,123,157; --gold-rgb: 204,164,92; --on-accent: #fff; --header-bg: rgba(238,242,247,.82); --line: rgba(44,39,34,.12); --line-soft: rgba(44,39,34,.07); --shadow-sm: 0 1px 2px rgba(58,38,22,.05), 0 2px 8px rgba(58,38,22,.05); --shadow-md: 0 6px 18px rgba(58,38,22,.08), 0 22px 48px rgba(58,38,22,.07); --shadow-lg: 0 18px 50px rgba(58,38,22,.13); --radius: 18px; --radius-sm: 12px; --radius-lg: 28px; --container: 1120px; --gutter: clamp(20px, 5vw, 56px); --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; /* Hero display face — calmer than Fraunces (no swashy J). */ --hero-font: "Newsreader", Georgia, "Times New Roman", serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Consolas, monospace; --ease: cubic-bezier(.22,.61,.36,1); } /* ── MOODS (palette picker) ───────────────────────────────── Each block only overrides the color tokens; everything else inherits. data-theme is set on by the picker + an inline no-flash script in the header. (No data-theme = Cozy Blue above.) */ /* Terracotta — the original warm clay */ [data-theme="terracotta"] { --paper: #FBF6EE; --paper-2: #F4EADC; --card: #FFFCF6; --ink: #2C2722; --ink-2: #5A5147; --ink-3: #8C8173; --clay: #BC5A39; --clay-deep: #9A4528; --sage: #6F7A5C; --gold: #C99A52; --accent-rgb: 188,90,57; --gold-rgb: 201,154,82; --on-accent: #fff; --header-bg: rgba(251,246,238,.82); } /* Sage — cozy garden green */ [data-theme="sage"] { --paper: #F1F4EC; --paper-2: #E5EBDB; --card: #FCFDF8; --ink: #232A20; --ink-2: #4E5746; --ink-3: #828B74; --clay: #5E7C4F; --clay-deep: #415A36; --sage: #8A7B5A; --gold: #C7A24E; --accent-rgb: 94,124,79; --gold-rgb: 199,162,78; --on-accent: #fff; --header-bg: rgba(241,244,236,.82); } /* Dusk — soft plum evening */ [data-theme="dusk"] { --paper: #F5F0F4; --paper-2: #EAE0E8; --card: #FEFBFD; --ink: #2A2230; --ink-2: #564A5C; --ink-3: #897E8E; --clay: #8A5A86; --clay-deep: #67406A; --sage: #7E7193; --gold: #C99A6B; --accent-rgb: 138,90,134; --gold-rgb: 201,154,107; --on-accent: #fff; --header-bg: rgba(245,240,244,.82); } /* Night — dark, cozy blue */ [data-theme="night"] { --paper: #161B22; --paper-2: #1F2730; --card: #1F2730; --ink: #ECEFF3; --ink-2: #BAC4CE; --ink-3: #8593A0; --clay: #79A9CB; --clay-deep: #9AC4E0; --sage: #8FB39E; --gold: #D8B870; --accent-rgb: 121,169,203; --gold-rgb: 216,184,112; --on-accent: #10141A; --header-bg: rgba(22,27,34,.82); --line: rgba(236,239,243,.12); --line-soft: rgba(236,239,243,.07); --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.3); --shadow-md: 0 6px 18px rgba(0,0,0,.35), 0 22px 48px rgba(0,0,0,.3); --shadow-lg: 0 18px 50px rgba(0,0,0,.45); } /* Night: the deliberately-dark surfaces (footer, music panel) need to stay darker than the page, since --ink is now light. */ [data-theme="night"] .site-footer, [data-theme="night"] .listen__player { background: #10141A; } /* keep light text on those dark surfaces (──paper is dark in this mood) */ [data-theme="night"] .site-footer__col h3, [data-theme="night"] .brand__word--big, [data-theme="night"] .listen__player h3 { color: #ECEFF3; } [data-theme="night"] .grain { mix-blend-mode: overlay; opacity: .06; } [data-theme="night"] .hero__roles li, [data-theme="night"] .field input, [data-theme="night"] .field textarea, [data-theme="night"] .field select { background: var(--paper-2); } /* Sci-Fi — cold, clinical "enhanced future". FORCED on the stories section (set server-side on ), not offered in the picker. */ [data-theme="scifi"] { --paper: #0B0F14; --paper-2: #121A22; --card: #121A22; --ink: #E7EEF4; --ink-2: #A7B6C2; --ink-3: #687888; --clay: #4FD3E4; --clay-deep: #86E6F2; --sage: #7FB0BE; --gold: #BFD6DF; --accent-rgb: 79,211,228; --gold-rgb: 188,214,223; --on-accent: #06131A; --header-bg: rgba(11,15,20,.85); --line: rgba(159,200,214,.14); --line-soft: rgba(159,200,214,.08); --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4); --shadow-md: 0 6px 18px rgba(0,0,0,.5), 0 22px 48px rgba(0,0,0,.4); --shadow-lg: 0 18px 50px rgba(0,0,0,.6); } [data-theme="scifi"] .site-footer, [data-theme="scifi"] .listen__player { background: #080C10; } [data-theme="scifi"] .site-footer__col h3, [data-theme="scifi"] .brand__word--big { color: #E7EEF4; } [data-theme="scifi"] .grain { mix-blend-mode: overlay; opacity: .05; } [data-theme="scifi"] .eyebrow { font-family: var(--mono); letter-spacing: .2em; } /* the mood picker is irrelevant here — the section theme is fixed */ [data-theme="scifi"] .palette { display: none; } /* ── reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; height: auto; } a { color: var(--clay-deep); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--clay); } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.08; color: var(--ink); letter-spacing: -.01em; } ::selection { background: var(--clay); color: var(--on-accent); } /* ── grain overlay — gentle paper tooth ────────────────────── */ .grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── layout helpers ────────────────────────────────────────── */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; z-index: 1; padding: clamp(64px, 9vw, 128px) 0; } .section--tint { background: var(--paper-2); } .section--tight { padding-block: clamp(48px, 6vw, 80px); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--clay-deep); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--clay); opacity: .6; } .lede { font-size: clamp(1.12rem, 1.6vw, 1.32rem); color: var(--ink-2); line-height: 1.6; } .muted { color: var(--ink-3); } /* ── buttons ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--sans); font-weight: 600; font-size: 1rem; padding: 13px 26px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease); line-height: 1; } .btn--primary { background: var(--clay); color: var(--on-accent); box-shadow: 0 8px 22px rgba(var(--accent-rgb),.28); } .btn--primary:hover { background: var(--clay-deep); color: var(--on-accent); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--accent-rgb),.34); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--clay); color: var(--clay-deep); transform: translateY(-2px); } /* ── accessibility ─────────────────────────────────────────── */ .skip-link { position: absolute; left: 12px; top: -48px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; transition: top .2s var(--ease); } .skip-link:focus { top: 12px; color: var(--paper); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2.5px solid var(--clay); outline-offset: 3px; border-radius: 4px; } /* ── header ────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line-soft); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 600; } .brand:hover { color: var(--ink); } .brand__mark { color: var(--clay); display: grid; place-items: center; flex: none; } .brand__word { font-family: var(--hero-font); font-size: 1.22rem; font-weight: 600; letter-spacing: -.01em; } .brand__word--big { font-size: clamp(1.7rem, 3vw, 2.3rem); } .site-nav { display: flex; align-items: center; } .site-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; padding: 0; } .site-nav__list a { display: inline-block; padding: 9px 14px; border-radius: 999px; font-size: .96rem; font-weight: 500; color: var(--ink-2); } .site-nav__list a:hover { color: var(--ink); background: rgba(44,39,34,.05); } .site-nav__list a.is-active { color: var(--clay-deep); } .site-nav__cta { color: var(--on-accent) !important; background: var(--clay); margin-left: 8px; font-weight: 600 !important; } .site-nav__cta:hover { background: var(--clay-deep) !important; } .site-nav__toggle { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: none; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; } .site-nav__toggle-bar { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .25s var(--ease); } @media (max-width: 860px) { .site-nav__toggle { display: flex; } .site-nav__list { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px; background: var(--paper); padding: 18px var(--gutter) 28px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .28s var(--ease), opacity .28s var(--ease); } .site-nav__list.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .site-nav__list a { padding: 13px 14px; font-size: 1.05rem; } .site-nav__cta { margin-left: 0; text-align: center; margin-top: 6px; } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(2) { opacity: 0; } .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ── hero ──────────────────────────────────────────────────── */ .hero { position: relative; z-index: 1; padding: clamp(28px, 4.5vw, 64px) 0 clamp(48px, 7vw, 88px); overflow: hidden; } .hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .5; } .hero::before { width: 520px; height: 520px; top: -180px; right: -120px; background: radial-gradient(circle, rgba(var(--gold-rgb),.45), transparent 70%); } .hero::after { width: 460px; height: 460px; bottom: -200px; left: -140px; background: radial-gradient(circle, rgba(var(--accent-rgb),.30), transparent 70%); } .hero__inner { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .hero__title { font-family: var(--hero-font); font-size: clamp(2.9rem, 7vw, 5.4rem); line-height: 1.0; letter-spacing: -.015em; font-weight: 600; } .hero__title em { font-style: italic; color: var(--clay); font-weight: 500; } .hero__roles { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 26px 0 6px; list-style: none; padding: 0; } .hero__roles li { font-size: .9rem; font-weight: 600; letter-spacing: .02em; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink-2); } .hero__lede { margin-top: 24px; max-width: 46ch; font-size: clamp(1.12rem, 1.7vw, 1.35rem); color: var(--ink-2); } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } /* portrait / emblem */ .hero__portrait { position: relative; } .portrait-frame { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: radial-gradient(120% 120% at 30% 20%, rgba(var(--gold-rgb),.30), transparent 55%), linear-gradient(160deg, var(--paper-2), var(--paper-2)); border: 1px solid var(--line); box-shadow: var(--shadow-lg); display: grid; place-items: center; overflow: hidden; } .portrait-frame img { width: 100%; height: 100%; object-fit: cover; } .portrait-frame__placeholder { text-align: center; padding: 28px; color: var(--clay-deep); } .portrait-frame__placeholder .mono { font-family: var(--serif); font-size: 5.5rem; line-height: 1; font-style: italic; opacity: .8; } .portrait-frame__placeholder p { margin-top: 12px; font-size: .82rem; color: var(--ink-3); letter-spacing: .04em; } .hero__stamp { position: absolute; bottom: -18px; left: -18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow-sm); font-size: .82rem; color: var(--ink-2); max-width: 200px; } .hero__stamp strong { color: var(--ink); font-family: var(--serif); } @media (max-width: 820px) { .hero__inner { grid-template-columns: 1fr; } .hero__portrait { order: -1; max-width: 320px; } } /* ── section heading block ─────────────────────────────────── */ .section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); } .section-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); } .section-head .lede { margin-top: 18px; } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } /* ── the human (about) ─────────────────────────────────────── */ .human__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; } .human__prose p { font-size: clamp(1.1rem, 1.5vw, 1.28rem); color: var(--ink-2); margin-bottom: 1.1em; } .human__prose p:first-of-type { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.35; color: var(--ink); font-weight: 400; } .human__prose em { color: var(--clay-deep); font-style: italic; } .values { list-style: none; padding: 0; display: grid; gap: 14px; } .values li { display: flex; gap: 14px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .values li b { display: block; font-family: var(--serif); font-size: 1.12rem; color: var(--ink); margin-bottom: 3px; } .values li span.k { font-size: 1.4rem; line-height: 1; flex: none; } .values li p { font-size: .98rem; color: var(--ink-2); margin: 0; } @media (max-width: 760px) { .human__grid { grid-template-columns: 1fr; } } /* ── devotions ─────────────────────────────────────────────── */ .devotions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .devotion { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px 32px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } .devotion:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(var(--accent-rgb),.35); } .devotion::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--clay), var(--gold)); opacity: .8; } .devotion__num { font-family: var(--serif); font-style: italic; font-size: .95rem; color: var(--clay); } .devotion h3 { font-size: 1.6rem; margin: 6px 0 2px; } .devotion__line { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 1.05rem; margin-bottom: 14px; } .devotion p { color: var(--ink-2); font-size: 1rem; } /* ── writing previews ──────────────────────────────────────── */ .writing-list { display: grid; gap: 4px; } .writing-item { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 18px 24px; padding: 26px 8px; border-top: 1px solid var(--line); transition: padding-left .25s var(--ease); } .writing-item:last-child { border-bottom: 1px solid var(--line); } .writing-item:hover { padding-left: 16px; } .writing-item__kicker { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--clay-deep); } .writing-item__main h3 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); margin-bottom: 4px; } .writing-item__main h3 a { color: var(--ink); } .writing-item__main h3 a:hover { color: var(--clay-deep); } .writing-item__main p { color: var(--ink-2); font-size: 1.02rem; } .writing-item__date { font-size: .88rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; } @media (max-width: 680px) { .writing-item { grid-template-columns: 1fr; gap: 6px; } .writing-item__date { order: 3; } } .writing-empty { padding: 40px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--ink-3); background: var(--card); } /* ── work grid ─────────────────────────────────────────────── */ .work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .work-card { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 24px; box-shadow: var(--shadow-sm); position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } a.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--ink); } .work-card__kind { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); } .work-card h3 { font-size: 1.45rem; } .work-card p { color: var(--ink-2); font-size: .98rem; flex: 1; } .work-card__go { font-size: .9rem; font-weight: 600; color: var(--clay-deep); display: inline-flex; align-items: center; gap: 6px; } a.work-card:hover .work-card__go { gap: 10px; } .work-card--static .work-card__go { color: var(--ink-3); } /* ── listen / music ────────────────────────────────────────── */ .listen { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; } .listen__copy h2 { font-size: clamp(2rem, 4vw, 3rem); } .listen__copy p { color: var(--ink-2); margin-top: 16px; font-size: 1.12rem; } .listen__player { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .listen__player::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% 0%, rgba(var(--gold-rgb),.22), transparent 60%); pointer-events: none; } .listen__player h3 { color: var(--paper); font-style: italic; } .eq { display: flex; align-items: flex-end; gap: 5px; height: 64px; margin: 22px 0; } .eq span { flex: 1; background: linear-gradient(var(--gold), var(--clay)); border-radius: 3px; animation: eq 1.4s var(--ease) infinite; transform-origin: bottom; } .eq span:nth-child(2){animation-delay:.15s} .eq span:nth-child(3){animation-delay:.3s} .eq span:nth-child(4){animation-delay:.45s} .eq span:nth-child(5){animation-delay:.1s} .eq span:nth-child(6){animation-delay:.5s} .eq span:nth-child(7){animation-delay:.25s} .eq span:nth-child(8){animation-delay:.4s} .eq span:nth-child(9){animation-delay:.2s} @keyframes eq { 0%,100%{transform:scaleY(.25)} 50%{transform:scaleY(1)} } @media (prefers-reduced-motion: reduce) { .eq span { animation: none; transform: scaleY(.55); } } .listen__note { font-size: .9rem; color: rgba(251,246,238,.7); } @media (max-width: 760px) { .listen { grid-template-columns: 1fr; } } /* ── contact ───────────────────────────────────────────────── */ .contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; } .contact__aside h2 { font-size: clamp(2rem, 4vw, 3rem); } .contact__aside p { color: var(--ink-2); margin-top: 16px; font-size: 1.1rem; } .contact__direct { margin-top: 24px; font-family: var(--serif); font-size: 1.2rem; } .contact__direct a { color: var(--clay-deep); } .form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 38px); box-shadow: var(--shadow-md); } .field { margin-bottom: 18px; } .field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 7px; color: var(--ink); } .field input, .field textarea, .field select { width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink); padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--clay); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.14); } .field textarea { resize: vertical; min-height: 130px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } } .form__note { font-size: .85rem; color: var(--ink-3); margin-top: 6px; } .form__status { margin-top: 14px; font-weight: 600; min-height: 1.2em; } .form__status.is-ok { color: var(--sage); } .form__status.is-err { color: var(--clay-deep); } @media (max-width: 760px) { .contact { grid-template-columns: 1fr; } } /* ── pull-quote ────────────────────────────────────────────── */ .quote { text-align: center; max-width: 800px; margin-inline: auto; } .quote blockquote { font-family: var(--serif); font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.25; font-weight: 400; color: var(--ink); font-style: italic; } .quote blockquote::before { content: "“"; color: var(--clay); } .quote blockquote::after { content: "”"; color: var(--clay); } .quote cite { display: block; margin-top: 22px; font-style: normal; font-family: var(--sans); font-weight: 600; color: var(--ink-3); letter-spacing: .04em; font-size: .9rem; text-transform: uppercase; } /* ── page head (interior pages) ────────────────────────────── */ .page-head { padding: clamp(56px, 8vw, 104px) 0 clamp(24px, 4vw, 48px); position: relative; z-index: 1; } .page-head h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); } .page-head .lede { margin-top: 18px; max-width: 60ch; } .breadcrumbs { font-size: .85rem; color: var(--ink-3); margin-bottom: 22px; } .breadcrumbs a { color: var(--ink-2); } /* ── article (writing piece) ───────────────────────────────── */ .article { max-width: 680px; margin-inline: auto; padding-bottom: clamp(56px, 8vw, 104px); position: relative; z-index: 1; } .article__meta { display: flex; gap: 16px; align-items: center; color: var(--ink-3); font-size: .9rem; margin-bottom: 10px; } .article__meta .kicker { color: var(--clay-deep); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; } .article h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 28px; } .article__body { font-size: 1.18rem; line-height: 1.78; color: var(--ink); } .article__body p { margin-bottom: 1.3em; } .article__body h2 { font-size: 1.7rem; margin: 1.6em 0 .5em; } .article__body h3 { font-size: 1.3rem; margin: 1.4em 0 .4em; } .article__body blockquote { border-left: 3px solid var(--clay); padding-left: 22px; margin: 1.5em 0; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink-2); } .article__body em { font-style: italic; } .article__body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--accent-rgb),.4); } .article__back { display: inline-flex; align-items: center; gap: 8px; margin-top: 48px; font-weight: 600; } /* ── footer ────────────────────────────────────────────────── */ .site-footer { position: relative; z-index: 1; background: var(--ink); color: var(--paper); margin-top: clamp(56px, 8vw, 104px); } .site-footer a { color: rgba(251,246,238,.82); } .site-footer a:hover { color: #fff; } .site-footer__inner { display: grid; grid-template-columns: 1.2fr 1.6fr; gap: clamp(32px, 6vw, 80px); padding-block: clamp(48px, 7vw, 84px); } .site-footer__lead .brand__word--big { color: var(--paper); display: block; } .site-footer__tag { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: rgba(251,246,238,.85); margin-top: 8px; } .site-footer__place { color: rgba(251,246,238,.55); margin-top: 6px; font-size: .95rem; } .site-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .site-footer__col h3 { color: var(--paper); font-size: 1rem; margin-bottom: 14px; font-family: var(--sans); font-weight: 700; letter-spacing: .04em; } .site-footer .muted { color: rgba(251,246,238,.55); } .link-list { list-style: none; padding: 0; display: grid; gap: 9px; } .link-list a { font-size: .98rem; } .site-footer .btn--primary { margin-top: 14px; } .site-footer__base { border-top: 1px solid rgba(251,246,238,.12); } .site-footer__base-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-block: 22px; font-size: .85rem; color: rgba(251,246,238,.6); } @media (max-width: 760px) { .site-footer__inner { grid-template-columns: 1fr; } .site-footer__cols { grid-template-columns: 1fr 1fr; } } /* ── scroll reveal ─────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── palette / mood picker ────────────────────────────────── Fixed to the BOTTOM-LEFT on purpose: the bottom-right corner is reserved for the Chaibot chat widget, so they never collide. */ .palette { position: fixed; left: 18px; bottom: 18px; z-index: 90; } .palette__toggle { width: 46px; height: 46px; border-radius: 999px; cursor: pointer; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-md); color: var(--clay); display: grid; place-items: center; transition: transform .2s var(--ease), color .2s var(--ease); } .palette__toggle:hover { transform: translateY(-2px) rotate(-8deg); color: var(--clay-deep); } .palette__toggle svg { width: 22px; height: 22px; } .palette__panel { position: absolute; left: 0; bottom: 58px; min-width: 188px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 12px; display: grid; gap: 2px; opacity: 0; transform: translateY(8px) scale(.97); transform-origin: bottom left; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); } .palette[data-open="true"] .palette__panel { opacity: 1; transform: none; pointer-events: auto; } .palette__title { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 4px 8px 8px; } .palette__opt { display: flex; align-items: center; gap: 11px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 9px 8px; border-radius: 10px; color: var(--ink-2); font-family: var(--sans); font-size: .94rem; font-weight: 500; transition: background .15s var(--ease), color .15s var(--ease); } .palette__opt:hover { background: rgba(var(--accent-rgb),.10); color: var(--ink); } .palette__opt[aria-checked="true"] { color: var(--ink); font-weight: 600; } .palette__dot { width: 18px; height: 18px; border-radius: 999px; flex: none; border: 1.5px solid rgba(0,0,0,.12); box-shadow: inset 0 0 0 2px var(--card); background: var(--swatch, #ccc); } .palette__opt[aria-checked="true"] .palette__dot { box-shadow: inset 0 0 0 2px var(--card), 0 0 0 2px var(--clay); } @media (prefers-reduced-motion: reduce) { .palette__toggle:hover { transform: none; } .palette__panel { transition: none; } } /* ── fiction: collection landing ────────────────────────────── */ .collection-hero { position: relative; z-index: 1; padding: clamp(40px, 7vw, 96px) 0 clamp(20px, 4vw, 44px); overflow: hidden; } .collection-hero::before { content: ""; position: absolute; z-index: -1; top: -160px; right: -120px; width: 480px; height: 480px; border-radius: 50%; filter: blur(70px); opacity: .5; background: radial-gradient(circle, rgba(var(--accent-rgb),.30), transparent 70%); } .collection-hero__inner { max-width: 760px; } .collection-hero__title { font-family: var(--hero-font); font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -.02em; } .collection-hero__sub { font-family: var(--hero-font); font-style: italic; color: var(--ink-2); font-size: clamp(1.2rem, 2.6vw, 1.75rem); margin-top: 6px; } .collection-hero__byline { font-family: var(--mono); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--clay); margin-top: 20px; } .collection-hero__blurb { margin-top: 26px; } .epigraph { margin: 34px 0 0; padding: 16px 22px; border-left: 2px solid var(--clay); background: var(--card); border-radius: 0 12px 12px 0; } .epigraph blockquote { font-family: var(--hero-font); font-style: italic; font-size: 1.15rem; color: var(--ink); } .epigraph figcaption { margin-top: 8px; font-family: var(--mono); font-size: .76rem; letter-spacing: .03em; color: var(--ink-3); } .contents-label { font-family: var(--mono); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--clay); margin-bottom: 6px; } .contents-note { color: var(--ink-2); font-size: .96rem; margin-bottom: 20px; max-width: 60ch; } .contents { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; } .contents__item { border-top: 1px solid var(--line); } .contents__item:last-child { border-bottom: 1px solid var(--line); } .contents__row { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 22px; padding: 20px 6px; color: var(--ink); } a.contents__row { transition: padding-left .25s var(--ease); } a.contents__row:hover { padding-left: 14px; color: var(--ink); } .contents__row--locked { cursor: default; } .contents__num { font-family: var(--mono); font-size: .95rem; color: var(--clay); } .contents__title { font-family: var(--hero-font); font-size: clamp(1.3rem, 2.2vw, 1.7rem); } .contents__excerpt { display: block; color: var(--ink-2); font-size: .96rem; margin-top: 5px; } .contents__go { color: var(--clay); font-size: 1.1rem; align-self: center; transition: transform .2s var(--ease); } .contents__go--locked { color: var(--ink-3); font-size: .85rem; } a.contents__row:hover .contents__go { transform: translateX(5px); } @media (max-width: 600px) { .contents__row { grid-template-columns: auto 1fr; gap: 16px; } .contents__go { display: none; } } /* ── fiction: a single story ────────────────────────────────── */ .story__body hr.scene { border: 0; height: auto; margin: 2.2em 0; text-align: center; } .story__body hr.scene::before { content: "◦ ◦ ◦"; letter-spacing: .55em; font-size: .85rem; color: var(--clay); } .story-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; } .story-nav__link { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); transition: border-color .2s var(--ease), transform .2s var(--ease); } .story-nav__link:hover { border-color: var(--clay); transform: translateY(-2px); color: var(--ink); } .story-nav__link--next { text-align: right; } .story-nav__dir { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); } .story-nav__title { font-family: var(--hero-font); font-size: 1.15rem; color: var(--ink); } @media (max-width: 560px) { .story-nav { grid-template-columns: 1fr; } .story-nav__link--next { text-align: left; } } /* ── fiction: locked (print/eBook-only) stories ─────────────── */ .contents__lock { display: inline-block; margin-left: 12px; vertical-align: middle; white-space: nowrap; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; } .locked-note { margin-top: 1.6em; padding: 24px 26px; text-align: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .locked-note__label { margin: 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--clay); } .locked-note__sub { margin-top: 8px; font-size: 1rem; color: var(--ink-2); }