/* Theme Name: StoryNest Theme URI: https://example.com/storynest/ Author: StoryNest Author URI: https://example.com/ Description: A calm, lightning-fast storytelling theme built for comfortable long-form reading — large type, very high contrast and zero external requests. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: storynest Tags: blog, news, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready */ /* ===== 1. TOKENS & THEMES ===== */ :root{ --sn-bg:#FFFDF9;--sn-surface:#FFFFFF;--sn-surface-2:#FFF4EC;--sn-surface-3:#FBF6F0; --sn-text:#1F1B18;--sn-text-2:#544C46;--sn-text-3:#6E645C; --sn-accent:#D9451E;--sn-accent-hover:#B8391A;--sn-accent-soft:#FDEDE6;--sn-accent-ink:#8E2A0D; /* Fills carry text so they take the darkest shade (#FFF on #8E2A0D = 8.4:1); --sn-accent stays the lighter coral for ink-free decoration: focus ring, drop cap, rules. */ --sn-on-accent:#FFFFFF;--sn-accent-fill:var(--sn-accent-ink);--sn-accent-fill-hover:var(--sn-accent-ink); --sn-line:#EBE1D6;--sn-line-strong:#DACEC0; --sn-shadow:0 1px 2px rgba(31,27,24,.05),0 10px 28px -16px rgba(31,27,24,.18); --sn-shadow-lift:0 2px 6px rgba(31,27,24,.06),0 18px 40px -20px rgba(31,27,24,.26); --sn-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif; --sn-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --sn-base:20px; --sn-wrap:1180px;--sn-measure:38rem;--sn-gap:clamp(1.25rem,3vw,2rem); --sn-r:16px;--sn-r-sm:12px;--sn-r-pill:999px; --sn-s1:.5rem;--sn-s2:.75rem;--sn-s3:1rem;--sn-s4:1.5rem;--sn-s5:2rem;--sn-s6:3rem;--sn-s7:4rem; color-scheme:light; } /* Reader text-size control (theme.js writes data-sn-size on ) */ :root[data-sn-size="s"]{--sn-base:18px} :root[data-sn-size="m"]{--sn-base:20px} :root[data-sn-size="l"]{--sn-base:23px} :root[data-sn-theme="dark"]{ --sn-bg:#15120F;--sn-surface:#1D1916;--sn-surface-2:#251F1A;--sn-surface-3:#221D19; --sn-text:#F6F0E9;--sn-text-2:#C9BFB4;--sn-text-3:#B0A69B; --sn-accent:#FF7A4D;--sn-accent-hover:#FF9370;--sn-accent-soft:#2B1D17;--sn-accent-ink:#FF9370; --sn-on-accent:#1A0F09;--sn-accent-fill:var(--sn-accent);--sn-accent-fill-hover:var(--sn-accent-hover); --sn-line:#332C26;--sn-line-strong:#453C34; --sn-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.6); --sn-shadow-lift:0 2px 6px rgba(0,0,0,.45),0 18px 40px -20px rgba(0,0,0,.7); color-scheme:dark; } @media (prefers-color-scheme:dark){ :root:not([data-sn-theme="light"]){ --sn-bg:#15120F;--sn-surface:#1D1916;--sn-surface-2:#251F1A;--sn-surface-3:#221D19; --sn-text:#F6F0E9;--sn-text-2:#C9BFB4;--sn-text-3:#B0A69B; --sn-accent:#FF7A4D;--sn-accent-hover:#FF9370;--sn-accent-soft:#2B1D17;--sn-accent-ink:#FF9370; --sn-on-accent:#1A0F09;--sn-accent-fill:var(--sn-accent);--sn-accent-fill-hover:var(--sn-accent-hover); --sn-line:#332C26;--sn-line-strong:#453C34; --sn-shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -16px rgba(0,0,0,.6); --sn-shadow-lift:0 2px 6px rgba(0,0,0,.45),0 18px 40px -20px rgba(0,0,0,.7); color-scheme:dark; } } /* theme.json's palette can only hold light hex values, so re-point the presets at the tokens: a block coloured "Ink" or "Paper" then flips with dark mode instead of staying a light slab. Doubled :root keeps this ahead of the global-styles block WordPress prints. */ :root:root{ --wp--preset--color--base:var(--sn-bg);--wp--preset--color--surface:var(--sn-surface); --wp--preset--color--text:var(--sn-text);--wp--preset--color--muted:var(--sn-text-2); --wp--preset--color--accent:var(--sn-accent);--wp--preset--color--accent-soft:var(--sn-accent-soft); --wp--preset--color--line:var(--sn-line); } /* ===== 2. RESET & BASE ===== */ *,*::before,*::after{box-sizing:border-box} html{font-size:var(--sn-base);scroll-padding-block-start:5.5rem} body{margin:0;background:var(--sn-bg);color:var(--sn-text);font-family:var(--sn-sans);font-size:1rem;font-weight:400;line-height:1.75;text-rendering:optimizeLegibility;overflow-wrap:break-word} h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul{margin:0} ol,ul{padding-inline-start:0;list-style:none} img,picture,video,iframe,svg,canvas{max-width:100%;height:auto;display:block} /* Theme icons only: a blanket svg{fill:none} beats the fill attribute and would blank out solid SVGs in post content (social icons, plugin logos). Inline attrs carry the rest. */ .sn-icon-arrow,.sn-icon-moon,.sn-icon-sun,.sn-search__icon,.sn-burger svg{fill:none;stroke:currentColor} a{color:var(--sn-accent-ink);text-decoration:none} a:hover{color:var(--sn-accent-hover)} hr{border:0;border-block-start:1px solid var(--sn-line);margin-block:2rem} ::selection{background:var(--sn-accent-soft);color:var(--sn-text)} /* Focus ring — mandatory, visible on every focusable element */ :focus-visible{outline:3px solid var(--sn-accent);outline-offset:3px;border-radius:4px} /* 48px touch targets; inline prose links are the exception */ button,input,select,textarea{min-height:48px} .sn-skip,a.sn-pill,.sn-menu a,.sn-catlist a,.sn-crumbs a,.sn-sectionhead__more,.sn-footer__nav a, .sn-footer__social a,.widget li a,.wp-block-button__link,.sn-authorbox__link{display:inline-flex;align-items:center;min-height:48px} input[type="checkbox"],input[type="radio"]{min-height:0;width:22px;height:22px;accent-color:var(--sn-accent)} textarea{min-height:8rem} /* Shared horizontal cluster */ .sn-header__inner,.sn-tools,.sn-search,.sn-cats,.sn-tags,.sn-crumbs,.sn-post__byline, .sn-post__actions,.sn-footer__social,.sn-footer__legal,.comment-meta,.comment-author, .page-links,.sn-pagination .nav-links{display:flex;flex-wrap:wrap;align-items:center} /* ===== 3. TYPOGRAPHY ===== */ h1,h2,h3,h4,h5,h6{font-family:var(--sn-serif);font-weight:700;color:var(--sn-text);letter-spacing:-.01em;text-wrap:balance} h1,.sn-post__title{font-size:clamp(2.1rem,5vw,3rem);line-height:1.14} h2,.sn-sectionhead__title,.comments-title,.comment-reply-title{font-size:clamp(1.6rem,3.2vw,2.1rem);line-height:1.2} h3{font-size:1.35rem;line-height:1.3} h4{font-size:1.15rem;line-height:1.35} h5,h6{font-size:1rem;line-height:1.4} /* Serif body copy shared by excerpts, ledes and bios */ .sn-hero__excerpt,.sn-card__excerpt,.sn-post__lede,.sn-authorbox p,.sn-footer__brand p{font-family:var(--sn-serif);color:var(--sn-text-2);line-height:1.7} /* Meta text — .85rem floor, --sn-text-2, never dimmed with opacity */ .sn-hero__meta,.sn-card__meta,.sn-post__meta,.sn-trend__date,.sn-nl__note,.sn-crumbs, .sn-footer__legal,.comment-metadata,.comment-notes,.logged-in-as,.wp-caption-text, figcaption,.gallery-caption{font-size:.85rem;line-height:1.6;color:var(--sn-text-2)} /* Secondary links: underlined, never colour alone */ .sn-crumbs a,.comment-metadata a,.sn-footer__legal a{color:var(--sn-text-2)} .sn-crumbs a,.comment-metadata a,.sn-footer__legal a,.sn-authorbox a{text-decoration:underline;text-underline-offset:3px} .sn-crumbs a:hover,.comment-metadata a:hover,.sn-footer__legal a:hover{color:var(--sn-accent-ink)} .sn-time{font-variant-numeric:tabular-nums} .sn-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--sn-line-strong);vertical-align:middle;margin-inline:.6em} /* ===== 4. LAYOUT & WRAP ===== */ .sn-wrap{width:100%;max-width:var(--sn-wrap);margin-inline:auto;padding-inline:var(--sn-gap)} .sn-main{padding-block:var(--sn-s5) var(--sn-s7);min-height:60vh} .sn-layout{display:grid;grid-template-columns:1fr;gap:var(--sn-s6);align-items:start} .sn-col-main{min-width:0} .sn-col-side{min-width:0;display:grid;gap:1.5rem} .sn-sectionhead,.sn-related .sn-sectionhead__title{margin-block-end:1.5rem;padding-block-end:.75rem;border-block-end:2px solid var(--sn-line)} .sn-sectionhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem 1.5rem} .sn-archivehead{flex-direction:column;align-items:flex-start;gap:.5rem} .sn-sectionhead__more{gap:.4em;font-size:.9rem;font-weight:600;color:var(--sn-accent-ink)} .sn-sectionhead__more:hover{text-decoration:underline} .sn-skip{position:absolute;inset-inline-start:1rem;inset-block-start:-100%;z-index:999;padding:.75rem 1.5rem;border-radius:0 0 var(--sn-r-sm) var(--sn-r-sm);font-weight:600} .sn-skip:focus{inset-block-start:0;color:var(--sn-on-accent)} /* Reading progress — width from --sn-progress (theme.js) */ .sn-progress{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:60;height:4px;width:var(--sn-progress,0%);max-width:100%;background:var(--sn-accent);border-end-end-radius:4px;pointer-events:none} /* Share / copy confirmation */ .sn-toast{position:fixed;inset-block-end:2rem;inset-inline:0;margin-inline:auto;width:max-content;z-index:80;background:var(--sn-text);color:var(--sn-bg);font-weight:600;padding:.75rem 1.5rem;border-radius:var(--sn-r-pill);box-shadow:var(--sn-shadow-lift)} /* Stand-in for a story with no featured image */ .sn-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--sn-accent-soft),var(--sn-surface-2) 55%,var(--sn-surface-3));border-radius:inherit} /* ===== 5. BUTTONS, PILLS, CHIPS ===== */ /* Shared control shell */ .sn-btn,.sn-chip,.sn-tag,.sn-action,.sn-burger,.sn-themetoggle,.comment-reply-link, .sn-pagination .page-numbers,.page-links a,.page-links>span{display:inline-flex;align-items:center;min-height:48px;justify-content:center;gap:.5em;padding:.4em 1.1em;border:1px solid var(--sn-line-strong);border-radius:var(--sn-r-pill);background:var(--sn-surface);color:var(--sn-text-2);font-family:var(--sn-sans);font-size:.9rem;font-weight:600;line-height:1.2;cursor:pointer} /* Deltas come BEFORE the accent fill so --primary/--solid win */ .sn-btn{padding:.7em 1.4em;color:var(--sn-text);font-size:1rem} .sn-chip{padding:.5em 1.2em} .sn-tag{background:var(--sn-surface-3)} .sn-icon-arrow,.sn-action svg,.sn-footer__social svg,.sn-postnav__label svg{width:1em;height:1em;flex:none} .sn-share{gap:.45em} /* Category pills — small, uppercase, letter-spaced. Never emoji. */ .sn-pill{display:inline-flex;align-items:center;min-height:34px;padding:.3em .9em;border:1px solid transparent;border-radius:var(--sn-r-pill);background:var(--sn-accent-soft);color:var(--sn-accent-ink);font-family:var(--sn-sans);font-size:.74rem;font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase} a.sn-pill{padding-inline:1.1em} /* Shared quiet hover */ .sn-btn:hover{background:var(--sn-surface-2);color:var(--sn-text)} .sn-chip:hover,.sn-tag:hover,.sn-action:hover,.sn-burger:hover,.sn-themetoggle:hover, .comment-reply-link:hover,.sn-pagination a.page-numbers:hover,.page-links a:hover{background:var(--sn-surface-2);border-color:var(--sn-accent);color:var(--sn-accent-ink)} /* Shared accent fill — the only consumer of --sn-on-accent */ .sn-btn--primary,.sn-pill--solid,.sn-chip.is-active,.sn-skip,.sn-textsize__btn[aria-pressed="true"], .sn-pagination .page-numbers.current,.page-links>span:not(.page-links-title), .wp-block-button__link,input[type="submit"],button[type="submit"]{background:var(--sn-accent-fill);border-color:var(--sn-accent-fill);color:var(--sn-on-accent)} /* Light mode has nothing darker than the fill, so hover is signalled by the underline instead of a lighter background that would drop the label under 7:1. */ .sn-btn--primary:hover,.sn-chip.is-active:hover,.sn-pill--solid:hover,a.sn-pill:hover, .sn-textsize__btn[aria-pressed="true"]:hover, .wp-block-button__link:hover,input[type="submit"]:hover,button[type="submit"]:hover{background:var(--sn-accent-fill-hover);border-color:var(--sn-accent-fill-hover);color:var(--sn-on-accent);text-decoration:underline;text-underline-offset:3px} .sn-btn--primary{box-shadow:var(--sn-shadow)} /* Keeps the category link clickable above the stretched title link */ .sn-pill--cat{position:relative;z-index:2} .sn-cats{gap:var(--sn-s2);margin-block:var(--sn-s5)} /* Form controls */ input:where(:not([type="submit"],[type="checkbox"],[type="radio"])),select,textarea{width:100%;padding:.65em .9em;border:1px solid var(--sn-line-strong);border-radius:var(--sn-r-sm);background:var(--sn-surface);color:var(--sn-text);font-family:var(--sn-sans);font-size:1rem;line-height:1.5} input::placeholder,textarea::placeholder{color:var(--sn-text-3);opacity:1} input:focus,select:focus,textarea:focus{border-color:var(--sn-accent)} label{display:inline-block;font-family:var(--sn-sans);font-size:.9rem;font-weight:600;color:var(--sn-text-2);margin-block-end:.5rem} input[type="submit"],button[type="submit"]{display:inline-flex;align-items:center;justify-content:center;width:auto;padding:.7em 1.6em;border:1px solid var(--sn-accent-fill);border-radius:var(--sn-r-pill);font-family:var(--sn-sans);font-size:1rem;font-weight:600;cursor:pointer} /* ===== 6. HEADER & NAV ===== */ .sn-header{position:sticky;inset-block-start:0;z-index:50;background:var(--sn-bg);border-block-end:1px solid var(--sn-line)} .sn-header__inner{gap:1.5rem;padding-block:.75rem} .sn-brand{display:flex;flex-direction:column;gap:2px;margin-inline-end:auto} .sn-brand__link{display:inline-flex;align-items:center;gap:.75rem;min-height:48px;color:var(--sn-text)} /* .custom-logo is the class the_custom_logo() emits; .sn-brand__link img covers the fallback. */ .sn-brand__link img,.sn-brand .custom-logo{max-height:44px;width:auto} .sn-brand__name{font-family:var(--sn-serif);font-size:1.5rem;font-weight:700;line-height:1.1;letter-spacing:-.015em} .sn-brand__name span{color:var(--sn-accent)} .sn-brand__tag{font-size:.8rem;line-height:1.3;color:var(--sn-text-2)} .sn-burger{display:none;width:48px;padding:0;border-radius:var(--sn-r-sm);color:var(--sn-text)} .sn-burger svg{width:24px;height:24px} .sn-menu{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem} .sn-menu li{position:relative} .sn-menu a,.sn-menu__link{padding:.3em .8em;border-radius:var(--sn-r-sm);font-size:.95rem;font-weight:600;color:var(--sn-text-2)} .sn-menu a:hover,.sn-menu__link:hover{background:var(--sn-surface-2);color:var(--sn-accent-ink)} .sn-menu .current-menu-item>a,.sn-menu .current-menu-item>.sn-menu__link,.sn-menu .current_page_item>a{color:var(--sn-accent-ink);border-radius:0;box-shadow:inset 0 -3px 0 var(--sn-accent)} .sn-menu .sub-menu{display:none;position:absolute;inset-block-start:100%;inset-inline-start:0;z-index:20;min-width:14rem;padding:.5rem;background:var(--sn-surface);border:1px solid var(--sn-line);border-radius:var(--sn-r-sm);box-shadow:var(--sn-shadow-lift)} .sn-menu li:hover>.sub-menu,.sn-menu li:focus-within>.sub-menu{display:block} .sn-menu .sub-menu a{width:100%} .sn-tools{gap:.75rem} .sn-search{position:relative;min-width:12rem} .sn-search__icon{position:absolute;inset-inline-start:.8em;width:20px;height:20px;color:var(--sn-text-2);pointer-events:none} .sn-search__input{padding-inline:2.6em .9em;border-radius:var(--sn-r-pill);background:var(--sn-surface-3);font-size:.95rem} .sn-textsize{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--sn-line-strong);border-radius:var(--sn-r-pill);background:var(--sn-surface-3)} .sn-textsize__btn{min-width:48px;padding:0;border:0;border-radius:var(--sn-r-pill);background:transparent;color:var(--sn-text-2);font-family:var(--sn-serif);font-weight:700;line-height:1;cursor:pointer} .sn-textsize__btn[data-sn-size="s"]{font-size:.8rem} .sn-textsize__btn[data-sn-size="m"]{font-size:1rem} .sn-textsize__btn[data-sn-size="l"]{font-size:1.25rem} .sn-textsize__btn:hover{background:var(--sn-surface-2);color:var(--sn-text)} .sn-themetoggle{width:48px;padding:0;background:var(--sn-surface-3);color:var(--sn-text)} .sn-icon-moon,.sn-icon-sun{width:22px;height:22px} .sn-icon-sun{display:none} :root[data-sn-theme="dark"] .sn-icon-moon{display:none} :root[data-sn-theme="dark"] .sn-icon-sun{display:block} @media (prefers-color-scheme:dark){ :root:not([data-sn-theme="light"]) .sn-icon-moon{display:none} :root:not([data-sn-theme="light"]) .sn-icon-sun{display:block} } /* ===== 7. HERO ===== */ .sn-hero{position:relative;display:grid;grid-template-columns:1fr;margin-block-start:1.5rem;background:var(--sn-surface-2);overflow:hidden} /* Spec: the title carries the stretched link */ .sn-hero__link{display:none} .sn-hero__media,.sn-card__media{position:relative;aspect-ratio:16/10;background:var(--sn-surface-3);overflow:hidden} .sn-hero__media img,.sn-card__media img{width:100%;height:100%;object-fit:cover} .sn-hero__body,.sn-card__body,.sn-post__head{display:flex;flex-direction:column;align-items:flex-start} .sn-hero__body{gap:1rem;padding:clamp(1.5rem,4vw,3rem)} .sn-hero__title{font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1.14} .sn-hero__title a,.sn-card__title a{color:var(--sn-text)} .sn-hero__title a::after,.sn-card__title a::after{content:"";position:absolute;inset:0;z-index:1} .sn-hero__title a:hover{color:var(--sn-accent-ink)} .sn-hero__excerpt{font-size:1.1rem;max-width:34rem} .sn-hero__cta{margin-block-start:.5rem} /* ===== 8. CARDS & GRID ===== */ /* Track count follows the column the grid sits in, not the viewport: three fixed tracks inside the 700px column beside the sidebar left only ~146px of text per card. */ .sn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--sn-gap)} /* Related stories sit inside the narrower article column, so they use a larger minimum: two comfortable cards there, three only when the row genuinely has the width for them. */ .sn-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))} /* Shared warm panel surface */ .sn-card,.sn-hero,.sn-panel,.comment-body,.comment-respond,.sn-authorbox,.sn-postnav a, .post-password-form{border:1px solid var(--sn-line);border-radius:var(--sn-r);box-shadow:var(--sn-shadow)} .sn-card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--sn-surface);overflow:hidden} .sn-card:hover{border-color:var(--sn-line-strong);box-shadow:var(--sn-shadow-lift)} .sn-card__mediaLink{display:block;width:100%;height:100%} .sn-card__body{gap:var(--sn-s2);padding:var(--sn-s4);flex:1 1 auto} .sn-card__title{font-size:1.25rem;line-height:1.32} .sn-card:hover .sn-card__title a{color:var(--sn-accent-ink)} .sn-card__excerpt{font-size:1rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .sn-card__meta{margin-block-start:auto;padding-block-start:.5rem} /* ===== 9. SIDEBAR PANELS ===== */ .sn-panel{background:var(--sn-surface);padding:var(--sn-s4)} .sn-panel__title{font-size:1.15rem;line-height:1.3;margin-block-end:1rem;padding-block-end:.75rem;border-block-end:1px solid var(--sn-line)} .sn-panel p,.sn-archivehead__desc,.sn-comments__closed{color:var(--sn-text-2)} .sn-panel a{color:var(--sn-text)} .sn-panel a:hover{color:var(--sn-accent-ink);text-decoration:underline} .sn-panel--newsletter{background:var(--sn-surface-2)} .sn-nl{display:grid;gap:.75rem} .sn-nl__input{background:var(--sn-surface)} .sn-nl__btn{width:100%} .sn-panel--trending,.sn-panel--cats{padding-block-end:1rem} .sn-trend{display:grid;gap:1rem} .sn-trend__item{display:flex;align-items:flex-start;gap:.75rem} .sn-trend__num{flex:none;width:2rem;padding-block-start:var(--sn-s1);font-family:var(--sn-serif);font-size:1.35rem;font-weight:700;line-height:1.3;color:var(--sn-accent)} .sn-trend__link{display:block;min-height:48px;padding-block:var(--sn-s1);font-family:var(--sn-serif);font-size:1.02rem;font-weight:700;line-height:1.4;color:var(--sn-text)} .sn-trend__link:hover{color:var(--sn-accent-ink);text-decoration:underline} .sn-trend__date{display:block;margin-block-start:2px} .sn-catlist{display:grid;gap:2px} .sn-catlist a{justify-content:space-between;gap:.75rem;padding:.35em .6em;border-radius:var(--sn-r-sm);font-size:.95rem;font-weight:600;color:var(--sn-text)} .sn-catlist a:hover{background:var(--sn-surface-2);color:var(--sn-accent-ink)} .sn-catlist__count{flex:none;min-width:2.2em;padding:.1em .5em;border-radius:var(--sn-r-pill);background:var(--sn-accent-soft);color:var(--sn-accent-ink);font-size:.8rem;font-weight:600;text-align:center} .sn-panel--quote{background:var(--sn-accent-soft);border-color:var(--sn-line-strong)} .sn-quote{margin:0;padding:2rem 0 0;background:none;border:0;font-size:1.2rem} /* Widget areas render inside .sn-panel */ .widget ul{display:grid;gap:.5rem} /* ===== 10. SINGLE POST & ARTICLE TYPOGRAPHY ===== */ .sn-post{display:block} .sn-crumbs,.sn-post__head,.sn-post__content,.sn-post__footer,.sn-postnav,.sn-comments, .post-password-form{max-width:var(--sn-measure);margin-inline:auto} .sn-crumbs{gap:.4em;margin-block-end:1.5rem} .sn-post__head{gap:var(--sn-s3)} .sn-post__lede{font-size:1.2rem} .sn-post__byline{gap:1rem;width:100%;padding-block:1rem;border-block:1px solid var(--sn-line)} .sn-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--sn-line);flex:none} .sn-post__bylineText{display:flex;flex-direction:column;gap:2px;margin-inline-end:auto} .sn-post__author,.sn-crumbs__current{font-size:.95rem;font-weight:600;color:var(--sn-text)} .sn-post__actions{gap:.75rem} .sn-post__media{margin:2rem auto;max-width:min(100%,60rem)} .sn-post__media img{width:100%;border-radius:var(--sn-r);border:1px solid var(--sn-line)} /* The article body has .sn-post__content AND .entry-content */ .entry-content{font-family:var(--sn-serif);font-size:1.05rem;line-height:1.85;color:var(--sn-text)} .entry-content>*{margin-block:0 1.5rem} .entry-content>*:last-child{margin-block-end:0} .entry-content h2{margin-block:3rem 1rem} .entry-content h3{margin-block:2rem .75rem} .entry-content h4{margin-block:1.5rem .75rem} .entry-content ul,.entry-content ol{padding-inline-start:1.6em} .entry-content ul{list-style:disc} .entry-content ol{list-style:decimal} .entry-content li{margin-block-end:.5rem} .entry-content li::marker{color:var(--sn-accent)} /* Prose links are underlined, never colour-only */ .entry-content a,.comment-content a{color:var(--sn-accent-ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px;text-decoration-skip-ink:auto} /* Hover tints the background; the ink stays put so the text never gets lighter than 7:1 */ .entry-content a:hover,.comment-content a:hover{color:var(--sn-accent-ink);background:var(--sn-accent-soft)} /* Drop cap — serif, three lines tall, accent coloured */ .sn-post__content>p:first-of-type::first-letter{float:left;font-family:var(--sn-serif);font-size:4.9em;line-height:.8;font-weight:700;color:var(--sn-accent);margin-inline-end:.08em;margin-block-start:.06em;padding-block-end:.04em} .sn-post__footer{margin-block-start:var(--sn-s6);display:grid;gap:var(--sn-s5)} /* Grid items default to min-width:auto, so one wide child stretches the whole track and pushes the page sideways on a phone. Letting them shrink keeps the story column honest. */ .sn-post__footer>*{min-width:0} .sn-tags{gap:var(--sn-s1)} .sn-authorbox{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1.5rem;padding:1.5rem;background:var(--sn-surface-2);box-shadow:none} .sn-authorbox img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:none} .sn-authorbox h2,.sn-authorbox h3{font-size:1.25rem;margin-block-end:.5rem} .sn-authorbox p{font-size:1rem} /* flex-basis already asks for 16rem; a hard min-width floor instead forced the bio wider than a phone's story column, which is what pushed the whole page sideways. Let it shrink and wrap. */ .sn-authorbox__body{flex:1 1 16rem;min-width:0} /* Coloured here, not left to the global-styles link rule */ .sn-authorbox__link{margin-block-start:.5rem;color:var(--sn-accent-ink);text-decoration:underline;text-underline-offset:3px} .sn-related{margin-block-start:var(--sn-s7)} /* ===== 11. COMMENTS ===== */ .comments-area,.sn-comments{margin-block-start:4rem;padding-block-start:2rem;border-block-start:1px solid var(--sn-line)} .comments-title,.comment-reply-title,.sn-comments__title{margin-block-end:1.5rem} .comment-list{display:grid;gap:1.5rem;margin-block-end:2rem} .comment-list .children{display:grid;gap:1.5rem;margin-block-start:1.5rem;padding-inline-start:1.5rem;border-inline-start:3px solid var(--sn-line)} .comment-body{background:var(--sn-surface);padding:1.5rem} .comment-meta{gap:.75rem;margin-block-end:.75rem} .comment-author{gap:.75rem;font-size:.95rem;font-weight:600;color:var(--sn-text)} .comment-author .avatar{width:48px;height:48px;border-radius:50%;flex:none} .comment-author a{color:var(--sn-accent-ink);text-decoration:underline;text-underline-offset:3px} .says{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .comment-content{font-family:var(--sn-serif);font-size:1.02rem;line-height:1.8;color:var(--sn-text)} .comment-content p{margin-block-end:1rem} .reply{margin-block-start:.75rem} .comment-reply-link{background:var(--sn-surface-3)} .bypostauthor>.comment-body{background:var(--sn-surface-2);border-color:var(--sn-accent);box-shadow:inset 3px 0 0 var(--sn-accent),var(--sn-shadow)} .comment-respond{background:var(--sn-surface-3);box-shadow:none;padding:1.5rem} .comment-form{display:grid;gap:1rem} .comment-form-cookies-consent{display:flex;align-items:flex-start;gap:.5rem;font-size:.85rem;font-weight:400;color:var(--sn-text-2)} /* ===== 12. PAGINATION & POST NAV ===== */ .sn-pagination{margin-block-start:3rem} .sn-pagination .nav-links{justify-content:center;gap:.5rem} .sn-pagination .page-numbers{min-width:48px;padding:.3em .8em;font-size:.95rem} .sn-postnav{margin-block-start:3rem;display:grid;grid-template-columns:1fr;gap:1rem} .sn-postnav__item{min-width:0} .sn-postnav a{display:block;height:100%;padding:1.5rem;background:var(--sn-surface);color:var(--sn-text);font-family:var(--sn-serif);font-size:1.1rem;font-weight:700;line-height:1.35} .sn-postnav a:hover{border-color:var(--sn-accent);color:var(--sn-accent-ink)} .sn-postnav__label{display:flex;align-items:center;gap:.4em;margin-block-end:.5rem;font-family:var(--sn-sans);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sn-text-2)} .sn-postnav__item--next{text-align:end} .sn-postnav__item--next .sn-postnav__label{justify-content:flex-end} /* ===== 13. FOOTER ===== */ .sn-footer{background:var(--sn-surface-3);border-block-start:1px solid var(--sn-line);padding-block:3rem 1.5rem;margin-block-start:4rem} .sn-footer__inner{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start;padding-block-end:2rem;border-block-end:1px solid var(--sn-line)} .sn-footer__brand{display:grid;gap:.5rem;max-width:26rem} .sn-footer__brand p{font-size:1rem} .sn-footer__nav ul{display:grid;gap:2px} .sn-footer__nav a,.sn-footer__social a{gap:.5em;font-size:.95rem;font-weight:600;color:var(--sn-text-2)} .sn-footer__nav a:hover,.sn-footer__social a:hover{color:var(--sn-accent-ink);text-decoration:underline} .sn-footer__social{gap:1rem} .sn-footer__legal{justify-content:space-between;gap:.75rem 1.5rem;padding-block-start:1.5rem} /* ===== 14. WORDPRESS CORE CLASSES ===== */ .screen-reader-text{border:0;clip-path:inset(50%);width:1px;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap} .screen-reader-text:focus{clip-path:none;width:auto;height:auto;margin:0;padding:.75rem 1rem;inset:.5rem auto auto .5rem;z-index:100000;background:var(--sn-surface);color:var(--sn-accent-ink);box-shadow:var(--sn-shadow-lift);font-weight:600} .alignleft{float:left;margin:.35em 1.5rem 1rem 0;max-width:50%} .alignright{float:right;margin:.35em 0 1rem 1.5rem;max-width:50%} .aligncenter{display:block;margin-inline:auto;margin-block-end:1rem} .alignwide{width:auto;max-width:min(1100px,92vw);margin-inline:auto} .alignfull{width:100vw;max-width:none;margin-inline:calc(50% - 50vw)} .wp-caption{margin-block-end:1rem} .wp-caption img,.gallery-item img{width:100%;border-radius:var(--sn-r-sm)} .wp-caption-text,figcaption,.gallery-caption{font-family:var(--sn-sans);text-align:center;margin-block-start:.5rem} /* Tinted quote panel with a large serif open-quote glyph */ blockquote,.wp-block-quote{position:relative;margin-block:2rem;padding:2rem 1.5rem 1.5rem;background:var(--sn-accent-soft);border:1px solid var(--sn-line);border-inline-start:5px solid var(--sn-accent);border-radius:var(--sn-r);font-family:var(--sn-serif);font-size:1.12rem;font-style:italic;line-height:1.7;color:var(--sn-text)} blockquote::before,.wp-block-quote::before{content:"\201C";position:absolute;inset-block-start:-.06em;inset-inline-start:.35em;font-family:var(--sn-serif);font-size:4rem;line-height:1;font-style:normal;color:var(--sn-accent);pointer-events:none} blockquote>*:last-child,.wp-block-quote>*:last-child{margin-block-end:0} blockquote cite,.wp-block-quote cite{display:block;margin-block-start:.75rem;font-family:var(--sn-sans);font-size:.85rem;font-style:normal;font-weight:600;color:var(--sn-text-2)} .wp-block-pullquote{margin-block:3rem;padding:2rem 1.5rem;background:var(--sn-surface-2);border-block:3px solid var(--sn-accent);border-inline:0;border-radius:0;text-align:center} .wp-block-pullquote blockquote{margin:0;padding:0;background:none;border:0;border-radius:0} .wp-block-pullquote blockquote::before{content:none} .wp-block-pullquote p{font-family:var(--sn-serif);font-size:1.5rem;line-height:1.4;font-style:italic} .entry-content img,.wp-block-image img{border-radius:var(--sn-r-sm)} .wp-block-button__link{justify-content:center;padding:.7em 1.6em;border:1px solid var(--sn-accent-fill);border-radius:var(--sn-r-pill);font-family:var(--sn-sans);font-size:1rem;font-weight:600;line-height:1.2} .sticky.sn-card{border-color:var(--sn-accent)} .sticky.sn-card .sn-card__body{border-block-start:3px solid var(--sn-accent)} .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem;margin-block:2rem} .page-links{gap:.5rem;margin-block-start:2rem;color:var(--sn-text-2)} .page-links a,.page-links>span{min-width:48px;padding:.3em .8em} .post-password-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem;padding:1.5rem;background:var(--sn-surface-2);box-shadow:none} .post-password-form p{flex:1 1 14rem} .post-password-form label{display:block;width:100%} /* ===== 15. UTILITIES ===== */ .sn-measure{max-width:var(--sn-measure);margin-inline:auto} /* ===== 16. ADS (v1.1) ===== */ /* A reader of 70 must never mistake a paid unit for the next paragraph of the story, so every unit is fenced by a hairline rule top and bottom with generous space outside it, and carries an honest label above the creative. Separation is the point — ads never blend in here. */ /* The fence is --sn-text-3, not --sn-line: a boundary that carries meaning has to clear 3:1 (WCAG 1.4.11), and --sn-line is 1.27:1 light / 1.38:1 dark — a rule an older reader cannot see. box-sizing:content-box is load-bearing too. inc/ads.php prints the reserved figure inline (style="min-height:280px") on THIS element; under border-box that figure has to swallow ~80px of padding, hairlines and label, leaving 200px for a 300x250 creative — which then shoves the story down ~50px as it lands. On the content box, with the label lifted into the top padding below, the number the owner types is the number the creative gets. */ .sn-ad{--sn-ad-label-h:2rem;box-sizing:content-box;display:block;position:relative;min-height:90px;margin-block:var(--sn-s6);padding-block:calc(var(--sn-s3) + var(--sn-ad-label-h)) var(--sn-s3);border-block:1px solid var(--sn-text-3);text-align:center;overflow:hidden} /* Units that carry no label (and the anchor bar, which sets its own padding) get the band back. */ .sn-ad:not(.sn-ad--anchor):not(:has(.sn-ad__label)){padding-block-start:var(--sn-s3)} /* The one string that tells a reader this is paid space obeys the SPEC contrast floor: .85rem is the smallest size any --sn-text-* may take, and --sn-text-2 is 8.3:1 light where --sn-text-3 at .74rem was 5.7:1. Absolute so it sits in the padding band and cannot eat the creative's room; DOM order is untouched, so it is still read out before the ad it labels. */ .sn-ad__label{position:absolute;inset-block-start:var(--sn-s3);inset-inline:0;display:block;margin:0;font-family:var(--sn-sans);font-size:.85rem;font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--sn-text-2)} .sn-ad__inner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;max-width:100%} .sn-ad__inner img,.sn-ad__inner iframe{max-width:100%;height:auto;margin-inline:auto} /* Story-column slots sit on the same measure the article text uses (see section 10). */ .sn-ad--top,.sn-ad--after_title,.sn-ad--in_content,.sn-ad--after_content,.sn-ad--before_comments{max-width:var(--sn-measure);margin-inline:auto} /* An injected unit is a direct child of .entry-content, whose `>*` margin would otherwise flatten the very spacing that keeps the ad from reading as part of the story. */ .entry-content>.sn-ad{margin-block:var(--sn-s6)} /* Sidebar unit — the sidebar grid supplies its spacing; sticky only from 1024px (section 18). */ /* Not sticky until there is a sidebar to stick in — but it must stay `relative`, because .sn-ad__label is absolutely positioned and `static` would orphan it to the top of the page. */ .sn-ad--sidebar{position:relative;margin-block:0} /* Anchor bar. ONE figure drives all of it: --sn-anchor-ad-h is the creative's own room, and both the bar and the padding held open under the document derive from it, so the bar can neither sit on the footer nor crop the unit it holds. 100px fits both shapes networks ship here (728x90 and 320x100); +21px is the chrome (10px padding each side plus the hairline), in px not rem so the text-size control cannot grow it into the creative. inc/ads.php registers 90 for this slot but returns before its height block runs, so the bar is sized here — and the README quotes this. */ body.has-sn-anchor{--sn-anchor-ad-h:100px;--sn-anchor-h:calc(var(--sn-anchor-ad-h) + 21px);padding-block-end:calc(var(--sn-anchor-h) + env(safe-area-inset-bottom,0px))} /* min-height is the creative's room (content box), and there is deliberately no max-height: a taller unit grows the bar instead of being cut off by the overflow:hidden above, and every network scores a clipped unit as a viewability failure. Hairline as above: it has to be seen. */ .sn-ad--anchor{position:fixed;inset-inline:0;inset-block-end:0;z-index:70;display:flex;align-items:center;gap:var(--sn-s2);min-height:var(--sn-anchor-ad-h,100px);max-height:none;margin:0;padding-block:10px;padding-block-end:calc(10px + env(safe-area-inset-bottom,0px));padding-inline:var(--sn-s3);background:var(--sn-surface);border-block:1px solid var(--sn-text-3);border-block-end:0;box-shadow:var(--sn-shadow-lift)} /* The close button is first in the DOM (so it is reachable immediately) but sits at the trailing edge, in flow, where it can never be covered by the creative. */ .sn-ad--anchor .sn-ad__inner{order:1;flex:1 1 auto;min-width:0} .sn-ad__close{order:2;flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;border:1px solid var(--sn-line-strong);border-radius:var(--sn-r-pill);background:var(--sn-surface-3);color:var(--sn-text);cursor:pointer} .sn-ad__close:hover{background:var(--sn-surface-2);border-color:var(--sn-accent);color:var(--sn-accent-ink)} .sn-ad__close svg{width:22px;height:22px;fill:none;stroke:currentColor} /* The share confirmation lives at the bottom too — lift it clear of the bar, not behind it. */ body.has-sn-anchor .sn-toast{inset-block-end:calc(var(--sn-anchor-h) + 1rem + env(safe-area-inset-bottom,0px))} /* Dismissed anchor: theme.js empties the