/* ========================================================================== Oxin Studio — main stylesheet Warm, human, quiet. No external requests: fonts are self-hosted, icons are inline SVG. A site about privacy should not phone home to load a typeface. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Fonts (self-hosted, variable) -------------------------------------------------------------------------- */ @font-face { font-family: 'Inter var'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter var'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces var'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces var'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* -------------------------------------------------------------------------- 2. Design tokens -------------------------------------------------------------------------- */ :root { /* Light — warm paper */ --paper: #FBF8F3; --paper-2: #F4EDE2; --paper-3: #EFE6D8; --card: #FFFFFF; --ink: #1F1B16; --ink-2: #4E463C; --ink-3: #6E6558; --line: #E5DACA; --line-soft: #EFE7DA; --accent: #A8431A; /* terracotta — links, primary action */ --accent-2: #86340F; /* hover / pressed */ --accent-tint:#FBEEE6; --pine: #275248; /* privacy + trust marks */ --pine-tint: #E6EFEA; --sun: #8E5804; /* donation / highlight text — AA on paper and on sun-tint */ --sun-tint: #FBF0DA; --sun-on-ink: #EDBB63; /* amber that stays legible on the dark ink sections */ --shadow-1: 0 1px 2px rgba(31, 27, 22, .05), 0 2px 8px rgba(31, 27, 22, .04); --shadow-2: 0 2px 4px rgba(31, 27, 22, .06), 0 12px 32px rgba(31, 27, 22, .09); /* Type */ --font-display: 'Fraunces var', ui-serif, Georgia, 'Times New Roman', serif; --font-body: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --step--1: clamp(.8125rem, .78rem + .16vw, .875rem); --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem); --step-1: clamp(1.125rem, 1.06rem + .32vw, 1.3125rem); --step-2: clamp(1.375rem, 1.25rem + .6vw, 1.75rem); --step-3: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem); --step-4: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem); /* Space + shape */ --gutter: clamp(1.25rem, 4vw, 2.5rem); --wrap: 74rem; --wrap-narrow: 46rem; /* matches theme.json contentSize */ --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 999px; --header-h: 68px; color-scheme: light; } /* Dark scheme. Which of these applies is controlled by the data-scheme attribute that the theme puts on (Appearance → Customize → Oxin Studio → Colour scheme): data-scheme="light" → dark styles never apply data-scheme="dark" → dark styles always apply data-scheme="auto" → dark styles follow the visitor's system setting Default is "light", because hand-written page content often hardcodes light background colours without also setting a text colour — and light text on a hardcoded cream panel is invisible. Switch to "auto" once your page content uses theme colours rather than fixed ones. */ :root[data-scheme="dark"] { --paper: #14120E; --paper-2: #1C1914; --paper-3: #23201A; --card: #1F1B15; --ink: #F6F1E8; --ink-2: #CCC2B3; --ink-3: #A09687; --line: #332D25; --line-soft: #292319; --accent: #F0916A; --accent-2: #F7B295; --accent-tint:#2C1D15; --pine: #8CC9B2; --pine-tint: #17251F; --sun: #EDBB63; --sun-tint: #292014; --sun-on-ink: #EDBB63; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-scheme="auto"] { --paper: #14120E; --paper-2: #1C1914; --paper-3: #23201A; --card: #1F1B15; --ink: #F6F1E8; --ink-2: #CCC2B3; --ink-3: #A09687; --line: #332D25; --line-soft: #292319; --accent: #F0916A; --accent-2: #F7B295; --accent-tint:#2C1D15; --pine: #8CC9B2; --pine-tint: #17251F; --sun: #EDBB63; --sun-tint: #292014; --sun-on-ink: #EDBB63; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .45); color-scheme: dark; } } /* -------------------------------------------------------------------------- 3. Reset + base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } body { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.65; font-feature-settings: 'cv05' 1, 'ss01' 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, li { text-wrap: pretty; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 40; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-3); } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { color: var(--accent-2); } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; } hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; } ::selection { background: var(--accent-tint); color: var(--ink); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 999; background: var(--ink); color: var(--paper); padding: .75rem 1.25rem; border-radius: var(--r-sm); text-decoration: none; font-weight: 600; } .skip-link:focus { top: 1rem; color: var(--paper); } /* -------------------------------------------------------------------------- 4. Layout helpers -------------------------------------------------------------------------- */ .wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; } .wrap--narrow { width: min(var(--wrap-narrow), 100% - var(--gutter) * 2); } .section { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); } .section--paper2 { background: var(--paper-2); } /* Dark bands stay dark in both colour schemes — they must not flip with the --ink / --paper tokens, or the text lands on its own background. */ .section--ink { --band-bg: #1F1B16; --band-fg: #FBF8F3; --band-fg-2: #D6CCBD; --band-accent: #EDBB63; background: var(--band-bg); color: var(--band-fg); } [data-scheme="dark"] .section--ink { --band-bg: #241F18; } @media (prefers-color-scheme: dark) { [data-scheme="auto"] .section--ink { --band-bg: #241F18; } } .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--band-fg); } .section--ink p, .section--ink li { color: var(--band-fg-2); } .section--ink a { color: var(--band-accent); } .section--ink .steps li::before { background: rgba(237, 187, 99, .15); color: var(--band-accent); } .eyebrow { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; } .section--ink .eyebrow { color: var(--band-accent); } .lede { font-size: var(--step-1); color: var(--ink-2); line-height: 1.6; max-width: 46ch; } .section--ink .lede { color: var(--band-fg-2); } .section-head { max-width: 52ch; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .lede { margin-inline: auto; } .grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } /* -------------------------------------------------------------------------- 5. Buttons + chips -------------------------------------------------------------------------- */ .btn { --btn-bg: var(--accent); --btn-fg: #FFFFFF; display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.5rem; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid transparent; border-radius: var(--r-pill); font-weight: 600; font-size: var(--step-0); line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .btn:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: var(--shadow-2); } .btn:active { transform: translateY(0); } .btn svg { width: 1.1em; height: 1.1em; flex: none; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--paper-2); box-shadow: none; } .btn--onink { --btn-bg: var(--paper); --btn-fg: var(--ink); } .btn--ghost-onink { --btn-bg: transparent; --btn-fg: var(--paper); border-color: rgba(255, 255, 255, .28); } .btn--ghost-onink:hover { background: rgba(255, 255, 255, .08); box-shadow: none; } [data-scheme="dark"] .btn { --btn-fg: #1A120C; } @media (prefers-color-scheme: dark) { [data-scheme="auto"] .btn { --btn-fg: #1A120C; } } .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: var(--r-pill); background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--step--1); font-weight: 500; line-height: 1.4; } .chip--free { background: var(--pine-tint); border-color: transparent; color: var(--pine); font-weight: 600; } .chip--store { background: var(--sun-tint); border-color: transparent; color: var(--sun); font-weight: 600; } /* -------------------------------------------------------------------------- 6. Header + navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line-soft); } .site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; margin-right: auto; } .brand:hover { color: var(--ink); } .brand img { max-height: 34px; width: auto; } .brand__mark { width: 30px; height: 30px; flex: none; border-radius: 9px; background: linear-gradient(145deg, var(--accent), var(--sun)); display: grid; place-items: center; color: #fff; font-size: .9rem; font-weight: 700; font-family: var(--font-body); } .nav { display: flex; align-items: center; gap: .25rem; } .nav ul { list-style: none; display: flex; align-items: center; gap: .25rem; padding: 0; margin: 0; } .nav li { position: relative; } .nav a { display: block; padding: .5rem .8rem; border-radius: var(--r-sm); color: var(--ink-2); font-size: .95rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .nav a:hover, .nav li:hover > a { background: var(--paper-2); color: var(--ink); } .nav .current-menu-item > a, .nav .current_page_item > a, .nav .current-menu-ancestor > a { color: var(--ink); font-weight: 600; } /* Dropdowns */ .nav ul ul { position: absolute; top: calc(100% + .4rem); left: 0; min-width: 15rem; flex-direction: column; align-items: stretch; gap: 0; padding: .45rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; } .nav li:hover > ul, .nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); } .nav ul ul a { padding: .5rem .7rem; } .nav ul ul ul { top: -.45rem; left: calc(100% + .3rem); } .header-cta { display: inline-flex; gap: .5rem; } .header-cta .btn { padding: .55rem 1.1rem; font-size: .93rem; } .nav-toggle { display: none; align-items: center; gap: .5rem; padding: .5rem .85rem; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 600; font-size: .9rem; cursor: pointer; } .nav-toggle svg { width: 1.1rem; height: 1.1rem; } @media (max-width: 62rem) { .nav-toggle { display: inline-flex; } .header-cta { display: none; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2); padding: 1rem var(--gutter) 1.5rem; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .nav.is-open { display: block; } .nav > div, .nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; } .nav a { padding: .7rem .5rem; font-size: 1.02rem; border-radius: var(--r-sm); } .nav ul ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 0 0 .5rem .5rem; padding: 0 0 0 .5rem; background: transparent; min-width: 0; } .nav ul ul a { color: var(--ink-3); font-size: .95rem; } } /* -------------------------------------------------------------------------- 7. Hero -------------------------------------------------------------------------- */ .hero { position: relative; padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; } .hero::before { content: ''; position: absolute; inset: -30% -10% auto -10%; height: 70%; background: radial-gradient(50% 60% at 20% 40%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), radial-gradient(45% 55% at 78% 30%, color-mix(in srgb, var(--pine) 12%, transparent), transparent 70%); pointer-events: none; z-index: -1; } .hero__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 62rem) { .hero__inner { grid-template-columns: 1.05fr .95fr; } } .hero h1 { margin-bottom: 1.25rem; } .hero h1 em { font-style: normal; color: var(--accent); font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 90; } .hero .lede { max-width: 52ch; font-size: var(--step-1); } .hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; } .hero__note { margin-top: 1.25rem; font-size: var(--step--1); color: var(--ink-3); } .promises { display: flex; flex-wrap: wrap; gap: .5rem .5rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid var(--line); list-style: none; padding-left: 0; } .promises li { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--step--1); font-weight: 600; color: var(--pine); background: var(--pine-tint); padding: .4rem .8rem; border-radius: var(--r-pill); } .promises svg { width: 1rem; height: 1rem; flex: none; } /* Hero app stack */ .hero__stack { display: grid; gap: .875rem; } .stack-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); text-decoration: none; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .stack-card:hover { color: var(--ink); transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-2); } .stack-card__icon { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); } .stack-card__icon svg { width: 24px; height: 24px; } .stack-card__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .stack-card__icon--art { background: none; border-radius: 22.5%; overflow: hidden; } .stack-card__body { min-width: 0; } .stack-card__title { display: block; font-weight: 650; font-size: 1rem; line-height: 1.3; } .stack-card__meta { display: block; font-size: var(--step--1); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 62rem) { .hero__stack > :nth-child(even) { margin-left: clamp(0px, 3vw, 2.25rem); } } /* -------------------------------------------------------------------------- 8. Cards -------------------------------------------------------------------------- */ .card { display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); } .card h3 { font-size: var(--step-1); } .card p { color: var(--ink-2); } .card--plain { background: transparent; border-color: transparent; box-shadow: none; padding-inline: 0; } .card__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); margin-bottom: .4rem; } .card__icon svg { width: 22px; height: 22px; } .card__icon--pine { background: var(--pine-tint); color: var(--pine); } .card__icon--sun { background: var(--sun-tint); color: var(--sun); } /* App card */ .app-card { position: relative; display: flex; flex-direction: column; gap: .75rem; padding: clamp(1.25rem, 2.5vw, 1.6rem); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .app-card__top { display: flex; align-items: flex-start; gap: .9rem; } .app-card__icon { width: 52px; height: 52px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); overflow: hidden; } .app-card__icon img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Real artwork gets no tinted plate behind it — the icon is the plate. */ .app-card__icon--art { background: none; border-radius: 22.5%; } .app-card__icon svg { width: 26px; height: 26px; } .app-card__name { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); line-height: 1.2; } .app-card__name a { color: var(--ink); text-decoration: none; } .app-card__name a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .app-card__name a:hover { color: var(--accent); } .app-card__platform { font-size: var(--step--1); color: var(--ink-3); margin-top: .15rem; } .app-card p { color: var(--ink-2); font-size: .97rem; flex: 1; } .app-card__tags { display: flex; flex-wrap: wrap; gap: .4rem; } .app-group + .app-group { margin-top: clamp(2.5rem, 5vw, 4rem); } .app-group__head { display: flex; align-items: baseline; gap: .75rem; padding-bottom: .75rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); } .app-group__head h3 { font-size: var(--step-2); } .app-group__count { font-size: var(--step--1); color: var(--ink-3); } /* Numbered steps */ .steps { counter-reset: step; list-style: none; padding: 0; } .steps li { counter-increment: step; position: relative; padding-left: 3.25rem; } .steps li + li { margin-top: 1.75rem; } .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; } .steps h3 { font-size: var(--step-1); margin-bottom: .3rem; } .steps p { color: var(--ink-2); } /* Quote / pull */ .pull { border-left: 3px solid var(--accent); padding-left: 1.5rem; font-family: var(--font-display); font-size: var(--step-2); line-height: 1.35; color: var(--ink); } /* Split feature block */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } @media (min-width: 56rem) { .split { grid-template-columns: 1fr 1fr; } } .split--flip > :first-child { order: 2; } @media (max-width: 55.99rem) { .split--flip > :first-child { order: 0; } } /* Donate band */ .donate { display: grid; gap: 1.5rem; padding: clamp(1.75rem, 4vw, 3rem); border-radius: var(--r-lg); background: var(--sun-tint); border: 1px solid color-mix(in srgb, var(--sun) 25%, transparent); } @media (min-width: 52rem) { .donate { grid-template-columns: 1fr auto; align-items: center; } } .donate h2 { font-size: var(--step-2); margin-bottom: .5rem; } .donate p { color: var(--ink-2); max-width: 52ch; } /* -------------------------------------------------------------------------- 9. Page + post content -------------------------------------------------------------------------- */ .page-hero { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--line-soft); background: var(--paper-2); } /* On pages whose body is prose, the hero title sits in the same column as the text below it, so the two share a left edge. */ .page-hero--narrow .wrap > * { max-width: var(--wrap-narrow); margin-inline: auto; } .breadcrumbs { font-size: var(--step--1); color: var(--ink-3); margin-bottom: .75rem; } .breadcrumbs a { color: var(--ink-3); text-decoration: none; } .breadcrumbs a:hover { color: var(--accent); text-decoration: underline; } .breadcrumbs span[aria-hidden] { padding-inline: .4rem; opacity: .6; } .entry { padding-block: clamp(2.5rem, 5vw, 4rem); } .entry-content { font-size: var(--step-0); } .entry-content > * + * { margin-top: 1.1em; } .entry-content > h2 { margin-top: 2.2em; } .entry-content > h3 { margin-top: 1.8em; } .entry-content > h2 + *, .entry-content > h3 + * { margin-top: .7em; } .entry-content ul, .entry-content ol { padding-left: 1.4rem; } .entry-content li + li { margin-top: .4em; } .entry-content img, .entry-content figure { border-radius: var(--r); } .entry-content figcaption { font-size: var(--step--1); color: var(--ink-3); margin-top: .6rem; text-align: center; } .entry-content blockquote { border-left: 3px solid var(--accent); padding: .25rem 0 .25rem 1.35rem; color: var(--ink-2); font-style: italic; } .entry-content code { font-family: var(--font-mono); font-size: .89em; background: var(--paper-2); border: 1px solid var(--line); border-radius: 5px; padding: .12em .38em; } .entry-content pre { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.25rem; overflow-x: auto; } .entry-content pre code { background: none; border: 0; padding: 0; } .entry-content table { width: 100%; border-collapse: collapse; font-size: .95rem; } .entry-content th, .entry-content td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); } .entry-content th { font-weight: 650; } /* Block alignment. .entry-content is its own grid rather than a box with max-width, so the column a block lands in is decided by the layout — not by whatever margins the block's own markup happens to set. Hand-written HTML that carries `margin: 36px 0` used to knock itself out of centre; here it cannot. Three tracks are available: content — the reading measure (matches theme.json contentSize). This is the default for everything, including multi-column blocks, so a page has one left edge unless you deliberately ask for another. wide — blocks you set to "Wide width" in the editor, plus any heading immediately above one full — "Full width" blocks, edge to edge Change the widths by editing --wrap and --wrap-narrow at the top of this file; keep --wrap-narrow equal to contentSize in theme.json. */ .entry-content { display: grid; grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [wide-start] minmax(0, calc((var(--wrap) - var(--wrap-narrow)) / 2)) [content-start] min(var(--wrap-narrow), 100% - var(--gutter) * 2) [content-end] minmax(0, calc((var(--wrap) - var(--wrap-narrow)) / 2)) [wide-end] minmax(var(--gutter), 1fr) [full-end]; } .entry-content > * { grid-column: content; min-width: 0; /* The grid decides horizontal placement. Auto side margins — which WordPress applies to constrained-layout children, and which hand-written HTML often sets too — would make a grid item shrink to its text width and drift off the column. Neutralised here so every block starts on the same line. */ margin-inline: 0; } .entry-content > .alignwide { grid-column: wide; } /* A heading that introduces a wide block joins that block, so the two share a left edge. Without this you get an orphaned heading floating in the middle above a wider grid, which reads as a mistake even though both are centred. */ .entry-content > :is(h1, h2, h3, h4, h5, h6):has(+ .alignwide) { grid-column: wide; } .entry-content > .alignfull { grid-column: full; max-width: none; } .entry-content > .alignleft { justify-self: start; margin-right: 1.5rem; } .entry-content > .alignright { justify-self: end; margin-left: 1.5rem; } .entry-content > .aligncenter { justify-self: center; } /* Nested content (inside a group, a column, a quote) still floats normally. */ .entry-content .alignleft:not(.entry-content > *) { float: left; margin: .3rem 1.5rem 1rem 0; } .entry-content .alignright:not(.entry-content > *) { float: right; margin: .3rem 0 1rem 1.5rem; } /* The container spans the reading column so the page-hero's centring rule aligns it with the title; the artwork itself sits at that column's left edge rather than floating in the middle of it. */ .app-hero-icon { max-width: var(--wrap-narrow); margin-bottom: 1.1rem; } .app-hero-icon img { width: 76px; height: 76px; object-fit: cover; display: block; border-radius: 22.5%; box-shadow: var(--shadow-1); } /* Post meta */ .post-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: var(--step--1); color: var(--ink-3); margin-top: .75rem; } .post-list { display: grid; gap: 1.25rem; } .post-list article { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-soft); } .post-list h2 { font-size: var(--step-2); } .post-list h2 a { color: var(--ink); text-decoration: none; } .post-list h2 a:hover { color: var(--accent); } .pagination { margin-top: 2.5rem; display: flex; gap: .4rem; flex-wrap: wrap; } .pagination .page-numbers { display: grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding-inline: .6rem; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; color: var(--ink-2); } .pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); } .pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent); } /* Search form */ .search-form { display: flex; gap: .5rem; } .search-form input[type='search'] { flex: 1; padding: .7rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); } .search-form input[type='search']:focus-visible { border-color: var(--accent); } /* 404 */ .notfound { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); } .notfound__code { font-family: var(--font-display); font-size: clamp(4rem, 16vw, 8rem); line-height: 1; color: var(--accent); font-variation-settings: 'SOFT' 60, 'WONK' 1, 'opsz' 144; } /* -------------------------------------------------------------------------- 10. Footer -------------------------------------------------------------------------- */ .site-footer { --band-bg: #1F1B16; background: var(--band-bg); color: #CFC6B8; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; margin-top: auto; } .site-footer a { color: #CFC6B8; text-decoration: none; } .site-footer a:hover { color: #FFF; text-decoration: underline; } .footer-grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .footer-brand { max-width: 30ch; } .footer-brand .brand { color: var(--paper); margin-bottom: .85rem; } .footer-brand p { font-size: .95rem; color: #A9A093; } .site-footer h2 { font-family: var(--font-body); font-size: var(--step--1); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #8C8377; margin-bottom: .9rem; } .site-footer ul { list-style: none; padding: 0; display: grid; gap: .45rem; font-size: .95rem; } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--step--1); color: #8C8377; } .footer-bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; } .social { display: flex; gap: .6rem; margin-top: 1.25rem; } .social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; } .social a:hover { background: rgba(255, 255, 255, .1); } .social svg { width: 17px; height: 17px; } /* -------------------------------------------------------------------------- 11. Sticky footer scaffolding -------------------------------------------------------------------------- */ body { display: flex; flex-direction: column; min-height: 100dvh; } #main { flex: 1; } /* -------------------------------------------------------------------------- 11b. Hand-written content safety net Page content pasted as raw HTML often sets its own background colour and leaves the text colour to the theme. In dark mode that produces light text on a hardcoded light panel. Inside those elements we put the light-scheme text tokens back. :where() has zero specificity, so any colour the markup sets on itself still wins. -------------------------------------------------------------------------- */ :where([data-scheme="dark"] .entry-content [style*="background"]), :where([data-scheme="dark"] .entry-content [bgcolor]), :where([data-scheme="dark"] .entry-content .has-background) { --ink: #1F1B16; --ink-2: #4E463C; --ink-3: #6E6558; --accent: #A8431A; --accent-2: #86340F; --pine: #275248; --sun: #8E5804; color: var(--ink); } @media (prefers-color-scheme: dark) { :where([data-scheme="auto"] .entry-content [style*="background"]), :where([data-scheme="auto"] .entry-content [bgcolor]), :where([data-scheme="auto"] .entry-content .has-background) { --ink: #1F1B16; --ink-2: #4E463C; --ink-3: #6E6558; --accent: #A8431A; --accent-2: #86340F; --pine: #275248; --sun: #8E5804; color: var(--ink); } } /* -------------------------------------------------------------------------- 12. Print -------------------------------------------------------------------------- */ [data-scheme="dark"] .site-footer { --band-bg: #100E0B; } @media (prefers-color-scheme: dark) { [data-scheme="auto"] .site-footer { --band-bg: #100E0B; } } @media print { .site-header, .site-footer, .hero__stack, .btn { display: none !important; } body { background: #fff; color: #000; } }