/* * Roots 'n' Fruits — /about page styles. * * Enqueued only on the rnf_about route (see functions.php). Full-bleed Scotland * photo with a strong, even dark scrim and light body copy, on the shared design * tokens (assets/css/tokens.css). Header/footer/shell come from offer.css, which * loads site-wide. The scrim is a ::before layer over the photo and under the * text — the photo file is untouched. The filename case 'Scottland.JPG' is * intentional and exact: the live host is case-sensitive. */ .rnf-aboutpage { position: relative; isolation: isolate; /* own stacking context so the scrim sits under the text */ background-image: url('../images/Scottland.JPG'); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--paper); /* light base */ padding-block: clamp(80px, 12vw, 140px); /* generous top/bottom */ padding-inline: 24px; /* comfortable side margins, esp. on mobile */ } /* Strong, even scrim so white text stays readable across the ENTIRE section, including over the bright sky — this is long body copy, so contrast first. */ .rnf-aboutpage::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.64)); pointer-events: none; } .rnf-aboutpage__inner { position: relative; z-index: 1; /* text above the scrim */ max-width: 680px; /* readable measure (~640–720px), centered column */ margin-inline: auto; } /* "About Us" header — light serif, matching the site's hero-title treatment so it reads clearly on the darkened photo. Left-aligned in the column. */ .rnf-aboutpage__title { font-family: var(--font-serif); font-weight: 500; color: var(--paper2); font-size: clamp(32px, 5vw, 46px); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 24px; /* even gap before the first paragraph */ } .rnf-aboutpage__p { color: var(--paper2); /* light body text, strong contrast on the scrim */ font-size: 17px; line-height: 1.75; /* generous paragraph spacing */ margin: 0 0 22px; } .rnf-aboutpage__p:last-child { margin-bottom: 0; } /* BEGIN 2026-09-16 about cream: cream surface, near-black text. Delete this block to revert. * * SCOPE. Two things already confine this to /about and nothing else: about.css is * enqueued only on the rnf_about route (functions.php:1446), and .rnf-aboutpage * exists only in template-about.php. No body-class hook is available - /about is a * rewrite, not a Page, so body_class() emits no page-id or template class; the * rendered tag is just , which is site-wide. * * APPENDED, not edited in place: every rule above is left exactly as written, so * the original dark treatment is restored by deleting this block alone. Source * order gives these rules the win at equal specificity - no !important needed. * * TOKENS ONLY, no new hex. --paper (#f5f0e8) is the same cream body already paints * site-wide (tokens.css:168); --ink (#111111) is the same body text colour * (tokens.css:167). Links use --rnf-sage-strong rather than the site-wide * a { color: var(--pine) }, which resolves to near-black #111111. * * NOTE 2026-09-16: the photo at line 15, assets/images/Scottland.JPG, DOES NOT * EXIST in this theme - it 404s - so the section was rendering as the bare black * scrim over no image. The url() above is left untouched; background-image:none * below simply stops the failing request. */ .rnf-aboutpage { background-image: none; background-color: var(--paper); color: var(--ink); } /* Neutralises the black scrim. background:none rather than content:none or display:none so the ::before layer keeps its box and nothing below it reflows. */ .rnf-aboutpage::before { background: none; } .rnf-aboutpage__title, .rnf-aboutpage__p { color: var(--ink); } /* Legible accent on cream, 7.87:1. Currently inert - template-about.php contains no at all - so this is forward cover for when prose links are added. */ .rnf-aboutpage__inner a { color: var(--rnf-sage-strong); } /* END 2026-09-16 about cream */