/** * What the canvas design could not express, and what a browser needs anyway. * * The pages carry their layout in inline styles, which beat any selector here — * so the few rules that have to win are marked !important on purpose, and there * are no others. Everything else is behaviour the design has no way to state: * which nav item is the page you are on, what a keyboard user sees, what * happens on a phone, and what prints. */ /* Revealed by assets/site.js only when it has something true to put in them. */ [hidden] { display: none !important; } /* ── you are here ───────────────────────────────────────────────────────── * The header is the same markup on all twelve pages, so the current page is * marked on and the nav reads it. Download is already a filled button * and needs no help. */ body[data-page='guide'] a[data-nav='guide'], body[data-page='faq'] a[data-nav='faq'], body[data-page='about'] a[data-nav='about'], body[data-page='contact'] a[data-nav='contact'] { color: var(--text-heading) !important; border-bottom: 1px solid var(--accent); padding-bottom: 3px; } /* ── the hero, with nothing around it ───────────────────────────────────── * In the dark the stage draws a room: a floor, pews, a beam of light. Without * the bordered box it used to sit in, that floor simply stops at the edge of * the canvas in a straight line, which is the box coming back by another road. * The mask dissolves it into the page instead. In daylight the room is not * drawn at all — the screens hang on the paper with nothing behind them — so * there is nothing to fade and the mask would only nibble at their corners. */ :root[data-theme='dark'] sanctuary-stage { -webkit-mask-image: radial-gradient(ellipse 64% 66% at 50% 44%, #000 52%, rgba(0, 0, 0, 0.6) 78%, transparent 100%); mask-image: radial-gradient(ellipse 64% 66% at 50% 44%, #000 52%, rgba(0, 0, 0, 0.6) 78%, transparent 100%); } /* ── keyboard users ─────────────────────────────────────────────────────── * Inline styles cannot describe focus. Without this the whole site is * navigable by tab and invisible while you do it. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } /* The sticky header would otherwise sit on top of whatever an anchor lands on. */ [id] { scroll-margin-top: 92px; } img { max-width: 100%; } /* ── phones ─────────────────────────────────────────────────────────────── * The header is a fixed 68px row holding a logo and five links. On a narrow * screen the nav wraps and overflows that height onto the page beneath it, so * below 720px the row is allowed to grow and the nav takes its own line. */ @media (max-width: 720px) { header > div { height: auto !important; padding: 12px 18px !important; flex-wrap: wrap !important; gap: 10px 18px !important; } header nav { margin-left: 0 !important; width: 100%; gap: 8px 18px !important; } header nav a[data-nav='download'] { padding: 9px 14px !important; } } /* ── people who get sick from movement ──────────────────────────────────── * The hero button floats, its arrow bobs, a sheen crosses it, and the stage * turns continuously. All of it is decoration and none of it is missed. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } html { scroll-behavior: auto !important; } } /* ── paper ──────────────────────────────────────────────────────────────── * The licence, the terms and the privacy policy are documents a church may * well want on paper, and dark grey on near-black does not survive a printer. */ @media print { body, body > div, section, div, header, footer { background: #fff !important; } *, h1, h2, h3, p, li, td, strong, span, a { color: #111 !important; box-shadow: none !important; } header, [data-print-hide] { display: none !important; } a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 11px; color: #555 !important; } section { padding: 18px 0 !important; } }