/* Oxford Evensong — site stylesheet (direction H2). Tokens + shared components for every view. Light is the default; the evening palette follows prefers-color-scheme and a manual [data-theme] on . Promoted from design/style.css; view-specific blocks added below the rule. */ :root{ --paper:#F1EEE3; /* page ground */ --board:#F1EEE3; /* the bounded feed rectangle */ --ink:#22201A; /* body text */ --mid:#6C685C; /* kind, said/ghost rows, footer, clock */ --faint:#8A8474; /* slot labels, column header */ --hair:#D8D3C4; /* entry dividers */ --rule:#C3BDAB; /* board frame, column rule, header/date/footer rules */ --accent:#83A07E; /* sage — left-bars, nav underline, tint base */ --accent-ink:#4F6B4C; /* sage text — occasion, links, clock highlight */ --accent-tint:rgba(131,160,126,.12); /* expanded-row background (open/selected) */ --accent-hover:rgba(131,160,126,.06); /* passing hover — lighter than the tint */ --wk-sel:#E6ECE1; /* opaque ground for the picker's shown week */ --serif:"Spectral","Iowan Old Style",Georgia,"Times New Roman",serif; --serif-sc:"Spectral SC","Spectral","Iowan Old Style",Georgia,serif; --mono:"Spline Sans Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#191813; --board:#211F19; --ink:#E9E3D4; --mid:#9C9585; --faint:#847D6D; --hair:#37332A; --rule:#453F34; --accent:#93B38D; --accent-ink:#AEC9A8; --accent-tint:rgba(147,179,141,.13); --accent-hover:rgba(147,179,141,.06); --wk-sel:#2B382A; } } :root[data-theme="dark"]{ --paper:#191813; --board:#211F19; --ink:#E9E3D4; --mid:#9C9585; --faint:#847D6D; --hair:#37332A; --rule:#453F34; --accent:#93B38D; --accent-ink:#AEC9A8; --accent-tint:rgba(147,179,141,.13); --accent-hover:rgba(147,179,141,.06); --wk-sel:#2B382A; } *{box-sizing:border-box;margin:0;padding:0} main{display:block} html{background:var(--paper)} body{ background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:19px; line-height:1.5; -webkit-font-smoothing:antialiased; padding:1.9rem 1.4rem 3rem; } .sheet{max-width:57rem;margin:0 auto} .mono{font-family:var(--mono)} em{font-style:italic} a{color:inherit} :focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:1px} /* after a view switch we move focus to the heading (or a jumped-to entry) purely as an orientation cue for assistive tech — those targets carry tabindex="-1" and must not paint a visible ring, especially on touch. */ #main [tabindex="-1"]:focus{outline:none} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .summary .mid{color:var(--faint)} .entry .chapel a{text-decoration:none;color:inherit} .js .entry.collapsible:not(.open) .chapel a:hover{text-decoration:underline;text-decoration-color:var(--rule)} /* ---- masthead ---- */ .masthead{ display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:.3rem .1rem .65rem; } .masthead .mark{ font-family:var(--serif-sc);font-weight:600; font-size:1.16rem;letter-spacing:.05em; text-decoration:none;color:var(--ink); } .masthead .right{display:flex;align-items:center;gap:.9rem} .masthead .clock{font-family:var(--mono);font-size:.74rem;color:var(--mid)} .masthead .clock b{color:var(--accent-ink);font-weight:500} .masthead .toggle{ font-family:var(--mono);font-size:1.2rem;line-height:1; background:none;border:none;cursor:pointer; color:var(--mid);padding:0 .2rem; -webkit-tap-highlight-color:transparent; } .masthead .toggle:hover{color:var(--accent-ink)} /* ---- nav ---- */ nav{ display:grid;grid-template-columns:repeat(4,1fr); border:1px solid var(--rule); } nav a{ font-family:var(--mono); text-transform:uppercase;letter-spacing:.06em;font-size:.67rem; text-align:center;padding:.72rem .3rem; color:var(--mid);text-decoration:none; border-right:1px solid var(--rule); } nav a:last-child{border-right:none} nav a[aria-current]{ color:var(--accent-ink);background:var(--accent-tint); box-shadow:inset 0 -2px 0 var(--accent); } nav a:hover{color:var(--accent-ink)} /* ---- the board ---- */ .board{ border:1px solid var(--rule); background:var(--board); margin-top:1.4rem; } .datehead{padding:1.05rem 1.15rem .95rem;border-bottom:1px solid var(--rule)} .datehead h1{font-weight:500;font-size:2.3rem;line-height:1.05;letter-spacing:.005em} .datehead .nav-day{ display:flex;align-items:baseline;gap:.55rem; } /* no flex-wrap + a shrinkable title: when the date / week name is too long for one line its own text wraps, rather than the › arrow dropping to a new line */ .datehead .nav-day > h1, .datehead .nav-day > h2{min-width:0} /* the Tonight heading is an

wrapping the date/picker button; the button carries the type, the h1 must not add a box of its own */ .datehead .nav-day .daytitle{font:inherit;font-weight:500;font-size:2.3rem;line-height:1.05} .datehead .nav-day .wknav-title{font-weight:500;font-size:1.4rem;line-height:1.1} .datehead .nav-day a, .datehead .nav-day .step{ font-family:var(--mono);font-size:1.3rem;line-height:1; color:var(--mid);text-decoration:none;flex:none; padding:0 .1rem;background:none;border:none;cursor:pointer; } .datehead .nav-day a:hover, .datehead .nav-day .step:hover{color:var(--accent-ink)} .datehead .nav-day .pick{ display:block; /* fill the (shrinkable) h1 so long titles wrap here */ font-family:inherit;font-size:inherit;font-weight:500;letter-spacing:.005em; color:var(--ink);background:none;border:none;cursor:pointer;text-align:left; padding:0;line-height:1.05; -webkit-tap-highlight-color:transparent; } .datehead .nav-day .pick:hover{color:var(--accent-ink)} /* own line, directly under the arrow row — a fixed spot that never moves with the length of the date / week title beside the arrows */ .datehead .jump{ display:inline-block;margin-top:.5rem;padding:.15rem .25rem;margin-left:-.25rem; font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em; font-size:.62rem;color:var(--mid);text-decoration:none; -webkit-tap-highlight-color:transparent; } .datehead .jump:hover{color:var(--accent-ink)} .datehead .jump + .wk{margin-top:.35rem} .datehead .wk{ font-family:var(--mono); text-transform:uppercase;letter-spacing:.11em;font-size:.68rem; color:var(--mid);margin-top:.5rem; } .datehead .wk .occ{color:var(--accent-ink)} /* ---- column header ---- */ .colhead{ display:grid;grid-template-columns:5rem 1fr; border-bottom:1px solid var(--rule); font-family:var(--mono); text-transform:uppercase;letter-spacing:.1em;font-size:.58rem; color:var(--faint); } .colhead span{padding:.4rem .9rem .4rem 0;text-align:right;border-right:1px solid var(--rule)} .colhead span + span{padding:.4rem 1.15rem;text-align:left;border-right:none} /* the colhead opens the day's feed with a rule; a matching rule closes it — unless the last entry is open, which already frames its own end. If the feed is the board's last child its own border serves as that closing rule. */ .feed.closed{border-bottom:1px solid var(--rule)} .feed.closed:last-child{border-bottom-width:0} /* ---- service entry ---- */ .entry{ display:grid;grid-template-columns:5rem 1fr; border-bottom:1px solid var(--hair); /* when a Week chip / search row scrolls this entry to the top, leave a little air above it rather than butting it against the viewport edge */ scroll-margin-top:1.5rem; } .entry:last-child{border-bottom:none} /* open reads as a bounded "selected" card: left accent bar + rules top and bottom (heavier than the --hair divider, so two open entries in a row separate cleanly). The grid track shrinks by the border width to keep the time column rule aligned with the collapsed rows and the column header. */ .entry.open{ background:var(--accent-tint); grid-template-columns:calc(5rem - 3px) 1fr; border-left:3px solid var(--accent); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); } .entry > .time{ font-family:var(--mono); font-size:.8rem;font-weight:500; padding:1.1rem .9rem 1.1rem 0; border-right:1px solid var(--rule); text-align:right; } .entry > .time .m{display:block;font-size:.63rem;color:var(--mid);margin-top:.16rem} .entry > .body{padding:1.05rem 1.15rem 1.15rem 1.15rem;min-width:0} .js .entry.collapsible:not(.open) > .body{cursor:pointer} .js .entry.collapsible:not(.open):hover{background:var(--accent-hover)} .entry .chapel{font-family:var(--serif-sc);font-weight:500;letter-spacing:.03em;font-size:1.16rem} .entry .kind{font-style:italic;color:var(--mid);font-size:1rem} .entry .kind::before{content:" · ";font-style:normal;color:var(--faint)} .entry .choir{font-style:italic;color:var(--mid);font-size:.92rem;display:block;margin-top:.2rem} .entry .occ{ display:block;margin-top:.36rem; font-family:var(--mono); text-transform:uppercase;letter-spacing:.08em;font-size:.64rem; color:var(--accent-ink); } .entry .summary{margin-top:.4rem;max-width:44rem;text-wrap:pretty} .entry .preacher{margin-top:.35rem;font-size:.88rem;color:var(--mid)} .entry .preacher b{font-family:var(--mono);font-weight:400;font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-right:.4em} .entry .notes{margin-top:.35rem;font-size:.85rem;color:var(--mid);font-style:italic;max-width:44rem;text-wrap:pretty} .disclose{ position:relative; display:inline-block;margin-top:.8rem; font-family:var(--mono); text-transform:uppercase;letter-spacing:.09em;font-size:.62rem; color:var(--accent-ink); background:none;border:none;cursor:pointer; box-shadow:inset 0 -1px 0 var(--accent);padding:0 0 2px; } /* enlarge the tap target without moving the underline (WCAG 2.5.8) */ .disclose::after{content:"";position:absolute;inset:-11px -8px} .share{ position:relative; display:none;margin-top:.8rem;margin-left:1.6rem; font-family:var(--mono); text-transform:uppercase;letter-spacing:.09em;font-size:.62rem; color:var(--mid); background:none;border:none;cursor:pointer; box-shadow:inset 0 -1px 0 var(--rule);padding:0 0 2px; -webkit-tap-highlight-color:transparent; } .share::after{content:"";position:absolute;inset:-11px -8px} .share:hover{color:var(--accent-ink);box-shadow:inset 0 -1px 0 var(--accent)} .share.done{color:var(--accent-ink);box-shadow:none;cursor:default} /* shown only where it makes sense, and only with JS (the handler lives in app.js) */ .js .entry.open .share, .js .entry:not(.collapsible) .share{display:inline-block} /* said / not-yet-published entries have no disclosure button beside it, so it sits flush-left as its own line rather than indented against nothing */ .entry:not(.collapsible) .share{margin-left:0;margin-top:1rem} .music{margin-top:.9rem;border-top:1px solid var(--rule);padding-top:.6rem;max-width:44rem} .music .row{display:grid;grid-template-columns:6.6rem 1fr;column-gap:1.1rem;padding:.28rem 0} .music dt{ font-family:var(--mono); text-transform:uppercase;letter-spacing:.04em;font-size:.62rem; color:var(--faint);padding-top:.6em; } .music dd{font-size:1rem} .music .first-perf{font-family:var(--mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink);margin-left:.5em;white-space:nowrap} .flag{ margin-top:.95rem;padding-left:1rem; border-left:3px solid var(--accent); font-style:italic;font-size:.92rem;max-width:43rem;color:var(--ink); text-wrap:pretty; } .src{margin-top:.65rem;font-size:.8rem;color:var(--mid)} .src a{color:var(--mid);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:2px} /* ---- states ---- */ .entry.said .chapel{color:var(--mid)} .entry.said .kind{color:var(--mid)} .entry.said .summary{font-style:italic;color:var(--mid)} .entry.ghost .time,.entry.ghost .chapel,.entry.ghost .kind{color:var(--mid)} .entry.ghost .flagline, .tag-dashed{ font-family:var(--mono); text-transform:uppercase;letter-spacing:.05em;font-size:.65rem; display:inline-block;margin-top:.4rem; border:1px dashed var(--mid);padding:.16rem .42rem;color:var(--mid); } .entry.lowconf .chapel::after{ content:"?"; font-family:var(--serif);font-size:.7em;color:var(--accent-ink); vertical-align:.35em;margin-left:.15em; } .empty{ padding:2.4rem 1.15rem;text-align:center; color:var(--mid);font-style:italic;font-size:1.05rem; } .empty p{max-width:34rem;margin:0 auto} .empty .mono{display:block;font-style:normal;font-size:.66rem;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin-top:.6rem} .empty a{color:var(--accent-ink);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:2px} /* the "opens on the chapel's own site" arrow beside a music-list link (the SVG is in views.js — U+2197 is an emoji codepoint, and iOS has no text font for it, so the character arrives as a blue emoji) */ .extarrow{ width:.66em;height:.66em;margin-left:.3em;vertical-align:-.03em; fill:none;stroke:currentColor;stroke-width:1.3; stroke-linecap:round;stroke-linejoin:round; } .awaiting{padding:.95rem 1.15rem 0;font-style:italic;color:var(--mid);font-size:.92rem} .daynote{ padding:.9rem 1.15rem;border-bottom:1px solid var(--rule); font-style:italic;color:var(--mid);font-size:.9rem; } footer{ margin-top:1.7rem;border-top:1px solid var(--rule); padding:1rem .1rem 0; font-size:.83rem;color:var(--mid);line-height:1.6; } footer .mono{display:block;font-size:.68rem;letter-spacing:.02em;margin-top:.15rem;color:var(--faint)} footer a{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:2px} /* ================================================================ View-specific blocks ================================================================ */ /* ---- progressive enhancement: collapse music only when JS is on ---- No JS : .music shown inline, .summary + .disclose hidden (full list always). JS, closed: .summary + .disclose shown, .music hidden. JS, open : .summary hidden, .music shown. */ .disclose{display:none} :root:not(.js) .entry.collapsible .summary{display:none} .js .entry.collapsible .disclose{display:inline-block} .js .entry.collapsible:not(.open) .music{display:none} .js .entry.collapsible.open .summary{display:none} /* ---- expand motion ---- */ @keyframes ox-reveal{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:no-preference){ .js .entry.collapsible.open .music{animation:ox-reveal .13s ease} } /* ---- week grid ---- */ .sheet.wide{max-width:68rem} .wgrid{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--rule)} .col{border-right:1px solid var(--rule);min-width:0;display:flex;flex-direction:column} .col:last-child{border-right:none} .col.today{background:var(--accent-tint)} .colday{ padding:.6rem .6rem;min-height:3.1rem; border-bottom:1px solid var(--rule); font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em; font-size:.63rem;color:var(--ink);text-decoration:none;display:block; } .colday:hover .d{color:var(--accent-ink)} .colday .n{color:var(--faint)} .colday .occ{display:block;color:var(--accent-ink);font-size:.56rem;margin-top:.22rem;letter-spacing:.03em} .col.today .colday{box-shadow:inset 0 -2px 0 var(--accent)} .col.today .colday .d{color:var(--accent-ink)} .chip{ display:block;padding:.62rem .6rem .66rem; border-bottom:1px solid var(--hair); text-decoration:none;color:var(--ink); } /* every chip keeps its bottom border (incl. the last in a column) so each evensong box is closed; the grid's own border-bottom draws the edge that spans all seven columns below the tallest one. */ .chip:hover{background:var(--accent-hover)} .col.today .chip:hover{background:rgba(0,0,0,.04)} .chip .t{font-family:var(--mono);font-size:.65rem;font-weight:500;color:var(--mid);letter-spacing:.01em} .chip .c{ display:block;font-family:var(--serif-sc);font-weight:500; font-size:.94rem;letter-spacing:.02em;margin:.16rem 0 .05rem; } .chip .k{display:block;font-style:italic;color:var(--mid);font-size:.72rem;line-height:1.3} .chip .mus{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; font-size:.74rem;line-height:1.32;margin-top:.32rem;color:var(--ink); text-wrap:pretty; } .chip.lowconf .c::after{content:"?";color:var(--accent-ink);font-family:var(--serif);vertical-align:.35em;font-size:.7em;margin-left:.1em} .chip.said .c{color:var(--mid)} .chip.said .mus{color:var(--mid);font-style:italic} .col .none{padding:.9rem .6rem;color:var(--faint);font-style:italic;font-size:.72rem} @media (max-width:820px){ .sheet.wide{max-width:57rem} .wgrid{display:block} .col{border-right:none;border-top:1px solid var(--rule)} .col:first-child{border-top:none} .col.today{background:none} .colday{letter-spacing:.1em;font-size:.7rem;padding:.75rem 1.15rem .6rem;min-height:0} .col.today .colday{background:var(--accent-tint)} /* stacked: the next day's .col border-top is the divider, so the last chip in a column doesn't need its own; .wgrid's border-bottom closes the final one */ .chip:last-child{border-bottom:none} .chip{padding:.75rem 1.15rem .8rem} .chip .c{font-size:1.08rem;margin-top:.2rem} .chip .k{font-size:.9rem} .chip .mus{font-size:.92rem;-webkit-line-clamp:none;line-height:1.4} } /* ---- chapel page header ---- */ .chapelhead{padding:1.05rem 1.15rem 1.15rem;border-bottom:1px solid var(--rule)} .chapelhead .toprow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap} .chapelhead h1{font-family:var(--serif-sc);font-weight:600;font-size:1.5rem;letter-spacing:.03em;line-height:1.1} .chapelhead .back{ font-family:var(--mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.06em; color:var(--accent-ink);text-decoration:none;flex:none; } .chapelhead .back:hover{text-decoration:underline} .chapelhead .sub{margin-top:.4rem;font-style:italic;color:var(--mid);font-size:.95rem} .chapelhead .addr{margin-top:.15rem;font-size:.9rem;color:var(--mid)} .chapelhead .pattern{margin-top:.6rem;max-width:44rem;font-size:.95rem} .chapelhead .access{margin-top:.35rem;max-width:44rem;font-size:.88rem;color:var(--mid)} .chapelhead .listlink{ display:inline-block;margin-top:.7rem; font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.08em; color:var(--accent-ink);text-decoration:none; box-shadow:inset 0 -1px 0 var(--accent);padding:0 0 2px; } .daygroup{border-bottom:1px solid var(--hair)} .daygroup:last-child{border-bottom:none} .daygroup > h3{ font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:.6rem; font-weight:400;color:var(--faint);padding:.85rem 1.15rem .1rem; } /* ---- chapels list ---- */ .venues{list-style:none} .venues li{border-bottom:1px solid var(--hair)} .venues li:last-child{border-bottom:none} .venues a{ display:block;padding:1rem 1.15rem;text-decoration:none;color:var(--ink); } .js .venues a:hover{background:var(--accent-hover)} .venues .name{font-family:var(--serif-sc);font-weight:500;letter-spacing:.03em;font-size:1.12rem} .venues .choir{font-style:italic;color:var(--mid);font-size:.9rem;margin-top:.12rem} .venues .pat{ font-size:.86rem;color:var(--mid);margin-top:.2rem;max-width:46rem; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; } .venues .chip-status{ font-family:var(--mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.06em; border:1px dashed var(--mid);color:var(--mid);padding:.1rem .38rem; display:inline-block;margin-top:.35rem; } /* ---- search ---- */ .search-box{padding:1.05rem 1.15rem;border-bottom:1px solid var(--rule)} .search-box label{ display:block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em; font-size:.58rem;color:var(--faint);margin-bottom:.4rem; } .search-box input{ width:100%;max-width:32rem; font-family:var(--serif);font-size:1.1rem;color:var(--ink); background:var(--paper);border:1px solid var(--rule); padding:.5rem .65rem; } .search-box input:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px} .search-filters{ display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;align-items:end; padding:.85rem 1.15rem;border-bottom:1px solid var(--rule); } .search-filters label{ display:flex;flex-direction:column;gap:.3rem; font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em; font-size:.56rem;color:var(--faint); } .search-filters select{ font-family:var(--serif);font-size:.92rem;color:var(--ink); background:var(--paper);border:1px solid var(--rule);padding:.32rem .4rem; } .search-filters label.check{ flex-direction:row;align-items:center;gap:.5rem; font-size:.62rem;letter-spacing:.06em;color:var(--mid);align-self:center;cursor:pointer; } /* custom checkbox: a drawn box with a sage tick, in the design's own language */ .search-filters label.check input{ appearance:none;-webkit-appearance:none;margin:0;flex:none; width:1rem;height:1rem;display:grid;place-content:center;cursor:pointer; background:var(--paper);border:1px solid var(--rule);border-radius:0; } .search-filters label.check input::before{ content:"";width:.62rem;height:.62rem;background:var(--accent-ink); transform:scale(0);transition:transform .1s ease; clip-path:polygon(13% 46%,0 63%,40% 100%,100% 22%,84% 7%,38% 68%); } .search-filters label.check input:checked{border-color:var(--accent);background:var(--accent-tint)} .search-filters label.check input:checked::before{transform:scale(1)} .search-filters select:focus-visible, .search-filters label.check input:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px} @media (prefers-reduced-motion:reduce){ .search-filters label.check input::before{transition:none} } /* narrow: an explicit grid of full-width controls — iOS Safari renders bare