/* ============================================================ Practically Adventist — theme styles ------------------------------------------------------------ Scope rule (factory.known_rules #165): this file styles blocks that exist. It never hides content, and it never carries a colour literal — every colour resolves to a theme.json preset. Anything theme.json can express lives in theme.json instead: block style variations (pa-paper, pa-kicker, pa-signature), element styling, spacing and type scales. What remains here is only what block markup cannot say: sticky behaviour, full-bleed breakout, object-fit cropping, gradients, and the EWWW workaround. ============================================================ */ /* No measure cap here on purpose. WordPress's constrained layout centres any child narrower than the column using margin:auto !important, so capping the text put headings and body on two different left edges and no override short of !important could pull it back. contentSize IS the measure -- 600px, about 67 characters in IBM Plex Sans at 18px, measured. */ /* ============================================================ HERO One declaration per property. Earlier builds set object-position three times and the scrim twice; only the last of each ever applied, so the rest was dead weight. ============================================================ */ /* Full bleed comes from the block's own align:full, not from CSS. The old 100vw breakout overflowed horizontally whenever a scrollbar was present, which forced an overflow-x guard on -- and that guard made body a scroll container, which is what stopped position:sticky from working. */ .wp-block-cover.pa-hero{ position:relative; border-radius:0; display:flex; align-items:flex-end; overflow:hidden; /* Default article-hero height: one rule replacing the old base plus two breakpoint overrides. Deliberately NOT !important -- the page heroes (home 54vh, about/articles/vault 58vh) set their own height as a block attribute, and the block's own choice must win over the theme default. */ min-height:clamp(22rem, 68vh, 41.25rem); } /* EWWW's WebP delivery wraps cover images in a that is position:relative with no dimensions, so the absolutely-positioned image inside resolves 100% against zero and never paints. */ .wp-block-cover.pa-hero > picture{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; } .wp-block-cover.pa-hero .wp-block-cover__image-background, .wp-block-cover.pa-hero img.wp-post-image{ position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; /* these are night photographs that carry their own darkness, and they put their light at the horizon — bias the crop below centre so cropping does not throw the light away. */ object-position:center 55%; filter:brightness(1.18) saturate(1.04); } /* The scrim has to serve two kinds of photograph. Bottom-anchored alone is right for a night image and useless for a bright one: on the dawn-over-water hero the kicker measured 1.34:1 and the title 2.08:1 against the actual pixels. A panel behind the text fixed the contrast but read as a slab with visible edges. So it is two full-frame gradients instead — one up from the base, one in from the left, where the type sits. They cover the same ground with no boundary to see, and they adapt to any image because they never stop covering. */ .wp-block-cover.pa-hero > .wp-block-cover__background.has-background-dim{ opacity:0; } .pa-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--night) 84%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--night) 34%, transparent) 46%, transparent 88%), linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--night) 66%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--night) 34%, transparent) 40%, transparent 72%); } .wp-block-cover.pa-hero .wp-block-cover__inner-container{ position:relative; z-index:3; width:min(var(--wp--style--global--content-size, 600px), 100% - 2.5rem); margin-inline:auto; display:flex; flex-direction:column; align-items:flex-start; padding-bottom:2.5rem; } .wp-block-cover.pa-hero .wp-block-post-title{ max-width:15ch; text-wrap:balance; } .wp-block-cover.pa-hero .wp-block-post-excerpt{ max-width:46ch; } /* ---------- page header band ---------- Archive, search and 404 open on a night band so a listing page has the same arrival as an article, without inventing copy for it. Night surface on a paper page, so it is scoped exactly like the hero. */ .pa-pagehead{ text-align:left; } .pa-pagehead .wp-block-query-title, .pa-pagehead h1{ color:var(--wp--preset--color--linen); margin:0; } .pa-pagehead .wp-block-term-description, .pa-pagehead p{ color:var(--wp--preset--color--dust); max-width:52ch; margin:.75rem 0 0; } .pa-pagehead a{ color:var(--wp--preset--color--dawn); } .pa-pagehead .pa-horizon{ background:linear-gradient(90deg,var(--wp--preset--color--dawn),transparent); } /* ---------- the horizon rule — the lamp arriving at the edge ---------- */ .pa-horizon{ height:2px; width:74px; border:0; margin:0 auto 1.25rem 0; background:linear-gradient(90deg, var(--wp--preset--color--brass-deep), transparent); } /* The hero is the one dark surface on a paper site, so the light-ground colours must not reach it. */ .wp-block-cover.pa-hero{ background:var(--wp--preset--color--night); } .wp-block-cover.pa-hero .wp-block-post-title{ color:var(--wp--preset--color--linen); } .wp-block-cover.pa-hero .wp-block-post-excerpt{ color:var(--wp--preset--color--linen); } .wp-block-cover.pa-hero .wp-block-post-terms, .wp-block-cover.pa-hero .wp-block-post-terms a, .wp-block-cover.pa-hero .pa-kicker, .wp-block-cover.pa-hero a{ color:var(--wp--preset--color--dawn); } .wp-block-cover.pa-hero .pa-horizon{ background:linear-gradient(90deg,var(--wp--preset--color--dawn),transparent); } /* ---------- byline ---------- */ .pa-byline{ font-family:var(--wp--preset--font-family--mono); font-size:.6875rem; letter-spacing:.04em; color:var(--wp--preset--color--dust); } /* ---------- drop cap ---------- */ .pa-lede.has-drop-cap:first-letter, .pa-lede p:first-of-type::first-letter{ font-family:var(--wp--preset--font-family--sans); float:left; font-weight:600; font-size:3.4em; line-height:.9; padding:.04em .12em 0 0; color:var(--wp--preset--color--brass-deep); } /* ---------- "why this is on your desk" ---------- */ .pa-relevance{ background:var(--wp--preset--color--surface); border-top:1px solid var(--wp--preset--color--hairline); border-bottom:1px solid var(--wp--preset--color--hairline); } .pa-relevance .pa-tag{ display:inline-block; font-family:var(--wp--preset--font-family--sans); font-size:.625rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--wp--preset--color--brass); border:1px solid var(--wp--preset--color--brass); border-radius:2px; padding:.3rem .55rem; } /* ============================================================ COLLAPSING SECTIONS core/details with the pa-deeper class. Closed by default; the reader opens what they want. This replaced a sticky-bar implementation that could never pin, because the single section on each article sits at the end of the document with nothing after it to scroll through. ============================================================ */ .wp-block-details.pa-deeper{ margin:30px 0; overflow:hidden; padding:0; } .wp-block-details.pa-deeper + .wp-block-details.pa-deeper{ margin-top:-1px; } .wp-block-details.pa-deeper > summary{ list-style:none; cursor:pointer; padding:16px 18px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:center; } .wp-block-details.pa-deeper > summary::-webkit-details-marker{ display:none; } .wp-block-details.pa-deeper > summary::marker{ content:""; } .wp-block-details.pa-deeper > summary:hover{ background:var(--wp--preset--color--raise); } .wp-block-details.pa-deeper > summary:focus-visible{ outline:2px solid var(--wp--preset--color--brass-deep); outline-offset:-2px; } .dlabel{ font-family:var(--wp--preset--font-family--sans); font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--wp--preset--color--brass-deep); } .dtitle{ font-family:var(--wp--preset--font-family--sans); font-size:15px; font-weight:500; color:var(--wp--preset--color--ink); } .dhint{ font-family:var(--wp--preset--font-family--mono); font-size:11px; color:var(--wp--preset--color--ink-dim); white-space:nowrap; } .wp-block-details.pa-deeper > :not(summary){ padding:0 18px; } .wp-block-details.pa-deeper > :not(summary):first-of-type{ padding-top:16px; margin-top:0; border-top:1px solid var(--wp--preset--color--hairline); } .wp-block-details.pa-deeper > :last-child{ padding-bottom:20px; } .wp-block-details.pa-deeper p, .wp-block-details.pa-deeper li{ font-size:16.5px; } /* ---------- masthead ---------- This must sit on the template-part wrapper, not on a group inside it. position:sticky only travels within its parent's box, and the wrapper is exactly as tall as the masthead -- so a sticky child had nowhere to go and scrolled away with the page. The wrapper's parent is the page, so it works. The element selector is a fallback in case the block drops the className; theme.json declares exactly one header part, so it cannot over-match. */ .pa-masthead, header.wp-block-template-part{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--wp--preset--color--hairline); } .pa-masthead .pa-mark, header.wp-block-template-part .pa-mark{ width:34px; height:34px; flex:none; } /* The mark ships in two grounds. The reverse (linen ring, dawn light) is for night surfaces; on the paper masthead it measured about 1.05:1 and was effectively invisible. The Site Logo is a WordPress option rather than a theme file, so it is set to the paper mark in the database — assets/images/pa-mark.svg is the same artwork for anywhere the theme draws it directly. */ /* ---------- figures ---------- */ .pa-article figure img{ border-radius:2px; } .pa-article figcaption{ max-width:60ch; } /* ---------- light ground ---------- Colour lives in theme.json (styles.blocks.core/group.variations.pa-paper). Only the link colour is here, because it is derived from brass rather than being a palette entry of its own. */ .is-style-pa-paper a{ color:var(--wp--preset--color--brass-deep); } /* ---------- containment ---------- No overflow-x guard here on purpose. `overflow-x:hidden` on html/body makes body a scroll container and silently kills position:sticky for every descendant, which is exactly how the masthead came to be non-sticky. With full bleed handled by align:full there is nothing to guard against; verified at 1440px and 375px on articles, pages and the two visualisation-heavy posts. */ .pa-article img, .entry-content img{ max-width:100%; height:auto; } .pa-article .wp-block-table, .entry-content .wp-block-table{ overflow-x:auto; display:block; } /* ---------- phone ---------- One breakpoint block. 1.6.0 had two, with overlapping rules in both. */ @media (max-width:38rem){ .wp-block-cover.pa-hero .wp-block-cover__inner-container{ width:calc(100% - 2rem); padding-bottom:1.75rem; } .wp-block-cover.pa-hero .wp-block-cover__image-background{ object-position:center 62%; } .pa-masthead .wp-block-group, header.wp-block-template-part .wp-block-group{ gap:.6rem; } .wp-block-details.pa-deeper > summary{ padding:14px 12px; grid-template-columns:auto minmax(0,1fr); } .dhint{ display:none; } .wp-block-details.pa-deeper > :not(summary){ padding-left:12px; padding-right:12px; } figure.wp-block-image img{ width:100%; height:auto; } .wp-block-columns{ gap:1.25rem; } } @media (prefers-reduced-motion:reduce){ .wp-block-details.pa-deeper > summary{ transition:none; } } /* ---------- search ---------- theme.json styles the core/search wrapper but not the inside it, which keeps the user agent's white field on a dark page. Palette tokens only; no literals. */ .wp-block-search__input{ background:var(--wp--preset--color--ash); color:var(--wp--preset--color--linen); border:1px solid var(--wp--preset--color--rule); border-radius:2px; padding:.6rem .75rem; font-family:var(--wp--preset--font-family--sans); } .wp-block-search__input::placeholder{ color:var(--wp--preset--color--dust); } .wp-block-search__input:focus-visible{ outline:2px solid var(--wp--preset--color--dawn); outline-offset:2px; } /* ---------- o-MATIC credit ---------- The wordmark is o-MATIC's, operator-locked: gold #FFD33D with black outlines and the terminal-cursor block after the C. It is placed, never redrawn, and never recoloured — the black outlines are what carry it on the paper footer. */ .pa-credit{ align-items:center; row-gap:.35rem; } .pa-credit p{ margin:0; } .pa-omatic{ margin:0; line-height:0; } .pa-omatic img{ display:block; width:109px; height:auto; } .pa-omatic a:focus-visible{ outline:2px solid var(--wp--preset--color--brass-deep); outline-offset:3px; } /* ---------- The Vault ---------- Entries are collapsing bands (core/details), not cards. Two reasons beyond the feel: the page stays short enough to scan, and no iframe exists until a reader opens one — so nothing reaches Google on page load. Thumbnails are sideloaded locally for the same reason. */ .pa-vault-eyebrow{ font-family:var(--wp--preset--font-family--sans); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--wp--preset--color--brass-deep); margin:0 0 .5rem; } .pa-vault-lede{ font-style:italic; max-width:60ch; } .pa-vault-section h2{ margin-top:0; } .pa-vault-entry + .pa-vault-entry{ margin-top:-1px; } .pa-vault-cols{ margin:0; align-items:flex-start; } .pa-vault-thumb{ margin:0; } .pa-vault-thumb img{ display:block; width:100%; height:auto; border-radius:3px; border:1px solid var(--wp--preset--color--hairline); } .pa-vault-entry p{ font-size:16px; } .pa-vault-link a{ font-family:var(--wp--preset--font-family--sans); font-size:13px; font-weight:600; letter-spacing:.02em; } @media (max-width:600px){ .pa-vault-cols{ flex-wrap:wrap; } }