@charset "UTF-8";
/* ==========================================================================
Bible Games — styles.css
--------------------------------------------------------------------------
The look is deliberately the same world as Christian Reversi, Jesus Chess
and Jesus Checkers: a deep indigo night with warm light pouring down from
above, and everything of value framed in carved olive wood banded with gold.
A visitor should be able to tell at a glance that the hub and the games
belong to one another.
The organising idea is LIGHT IN THE DARKNESS. The page is dark; every game
is a lit panel on it. Nothing decorative is added that does not serve that
one idea.
--------------------------------------------------------------------------
Contents
1. Design tokens
2. Base, background and the shafts of light
3. Accessibility helpers (skip link, visually-hidden)
4. Masthead — wordmark, lede, rotating verse
5. Shelves — section headings
6. The grid and the game tiles
7. Icons
8. Footer
9. Self-check report (?check=1)
10. Responsive
11. Reduced motion, forced colours, print
--------------------------------------------------------------------------
Re-theming: every colour in this file lives in section 1. Change the gold
and indigo tokens there and the whole page follows, icons included — the
SVG symbols in icons.php carry no colour of their own, only the four class
hooks (.ia .if .in .ik) that section 7 paints.
One value must be kept in step with Scripts.js:
--dur-verse-fade MUST equal CONFIG.FADE_MS.
========================================================================== */
/* -------------------------------------------------------------------------- */
/* 1. Design tokens */
/* -------------------------------------------------------------------------- */
:root {
/* ------------------------------------------------------------------------
Only what is UNIQUE to the hub lives here.
The night sky, the carved olive-and-gold frame, the golds, the three
levels of ink, the type stacks and --radius all come from
/biblegames/shared/theme.css, which index.php loads immediately before
this file. They used to be copy-pasted into every page, which is exactly
how two pages end up a shade apart from each other.
Re-theming the whole SITE is now one edit in shared/theme.css.
Re-theming just this PAGE is one edit here.
------------------------------------------------------------------------ */
/* The game tiles — a lit surface standing slightly proud of the night.
Named --tile-* rather than reusing the shared --panel-* because a tile is
a different object from a game's panel and the two should be free to move
apart. */
--tile-1: rgba(46, 34, 92, 0.72);
--tile-2: rgba(26, 18, 58, 0.86);
--tile-edge: rgba(255, 214, 130, 0.22);
--tile-edge-lit: rgba(255, 214, 130, 0.85);
--tile-shadow: rgba(3, 2, 12, 0.55);
/* Motion. --dur-verse-fade MUST equal CONFIG.FADE_MS in Scripts.js: the
script swaps the words at the moment the strip is fully transparent, and
if the two drift apart the swap becomes visible. */
--dur-verse-fade: 600ms;
--dur-hover: 180ms;
/* Rhythm particular to this layout. */
--gap: 16px;
--page-max: 1180px;
}
/* -------------------------------------------------------------------------- */
/* 2. Base, background and the shafts of light */
/* -------------------------------------------------------------------------- */
/* The box-sizing reset and the [hidden] rule are in
/biblegames/shared/theme.css now, where they protect every page at once. */
html {
/* The gradient goes on so it covers the overscroll area too — on iOS
a background on alone leaves a pale band when the page bounces. */
min-height: 100%;
background-color: var(--bg-deep);
background-image:
radial-gradient(ellipse 130% 60% at 50% -10%, var(--bg-glow) 0%, rgba(255, 214, 138, 0) 60%),
linear-gradient(168deg, var(--bg-mid) 0%, var(--bg-deep) 58%, #04030d 100%);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/* Never let a long game title force the page sideways. */
overflow-x: hidden;
/* Eases the jump when the skip link fires. Section 11 turns this off again
for anyone who has asked for reduced motion. */
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
min-height: 100vh;
color: var(--text);
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.55;
/* This page is a menu and is *meant* to scroll, unlike the games it links
to. Only the sideways axis is locked, by the rule on above. */
}
/* Shafts of light fanning down from above the screen.
On its own fixed element rather than as another background layer, so it can
never be clipped by a scrolling ancestor and never affects layout. It is
pinned behind everything and is inert to the pointer. */
.beams {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(96deg, transparent 30%, var(--bg-beam) 42%, transparent 54%),
linear-gradient(84deg, transparent 46%, var(--bg-beam) 58%, transparent 70%);
background-repeat: no-repeat;
}
/* Everything real sits above the beams. */
.page {
position: relative;
z-index: 1;
max-width: var(--page-max);
margin: 0 auto;
/* The right/left padding also respects a notched phone's safe area. */
padding: clamp(18px, 4vw, 40px) max(clamp(14px, 4vw, 32px), env(safe-area-inset-left))
calc(32px + env(safe-area-inset-bottom))
max(clamp(14px, 4vw, 32px), env(safe-area-inset-right));
}
/* -------------------------------------------------------------------------- */
/* 3. Accessibility helpers */
/* -------------------------------------------------------------------------- */
/* Off-screen until focused by the keyboard, then a real, visible control.
With seventeen tiles on the page, a keyboard visitor who wants the games
should not have to tab through the masthead every time. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 10;
padding: 12px 20px;
background: var(--gold-2);
color: #1a1206;
font-weight: 700;
text-decoration: none;
border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
left: 0;
}
/* .visually-hidden, the three-step focus ring and ::selection are all in
/biblegames/shared/theme.css now. The ring is written there in three steps —
:focus, :focus:not(:focus-visible), :focus-visible — so no browser is ever
left without a visible indicator.
The one thing this page adds is the tile, which is an but needs its
ring rounded to match the card it draws. */
.tile:focus,
.tile:focus-visible {
border-radius: var(--radius);
}
/* Landing point for the skip link. Without this the heading it jumps to sits
flush against the top edge of the window. */
#shelves {
scroll-margin-top: 16px;
}
/* ::selection is shared; see shared/theme.css. */
/* -------------------------------------------------------------------------- */
/* 4. Masthead */
/* -------------------------------------------------------------------------- */
.masthead {
text-align: center;
margin-bottom: clamp(24px, 5vw, 44px);
}
/* The wordmark is live text, not a picture of text: it is razor sharp on every
screen, it can be selected and read aloud, it costs no download, and it
re-flows on a narrow phone instead of shrinking to nothing. */
.wordmark {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.5rem, 9vw, 4.75rem);
line-height: 1.05;
letter-spacing: 0.01em;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(10px, 2.5vw, 22px);
}
.wordmark__text {
/* Plain gold is the base state, and on its own it already looks right.
Lifted off the night sky with a shadow and a candle-lit halo. */
color: var(--gold-1);
filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.55))
drop-shadow(0 0 22px var(--gold-glow));
}
/*
* Gold leaf: a gradient painted through the letterforms.
*
* Behind an @supports guard for a specific reason. `-webkit-text-fill-color:
* transparent` is the older and more widely implemented of the two
* properties; a browser that honours it but cannot clip a background to text
* would paint the title transparent over nothing and the headline would
* simply vanish. The guard means such a browser never sees either property
* and keeps the solid gold above.
*/
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.wordmark__text {
/* The last stop is #c9930d rather than --gold-3 (#b7860b). The deepest
gold is the bottom edge of the letterforms, and against the warm glow
behind the masthead it measured 2.85:1 at phone width — just under the
3.0:1 that large text asks for. Lifting only this one stop keeps the
gold leaf, its depth and the token untouched everywhere else, and
measures 3.40:1. The design did not have to give anything up; the
gradient's darkest sliver did. */
background-image: linear-gradient(178deg, #fffdf0 8%, var(--gold-1) 34%, var(--gold-2) 62%, #c9930d 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.wordmark__cross {
color: var(--gold-2);
font-size: 0.62em;
line-height: 1;
text-shadow: 0 0 18px var(--gold-glow);
}
.masthead__lede {
margin: 14px auto 0;
max-width: 44ch;
color: var(--text-dim);
font-size: clamp(1rem, 2.4vw, 1.15rem);
}
/* ---- the rotating verse ---- */
.verse {
margin: clamp(18px, 3.5vw, 28px) auto 0;
max-width: 62ch;
padding: 14px 20px;
/* A quiet lit panel: just enough to separate scripture from page furniture. */
background: linear-gradient(180deg, rgba(255, 232, 176, 0.07), rgba(255, 232, 176, 0.02));
border-top: 1px solid rgba(255, 214, 130, 0.25);
border-bottom: 1px solid rgba(255, 214, 130, 0.25);
/* Both properties fade together, driven by .is-fading from Scripts.js. */
transition: opacity var(--dur-verse-fade) ease, transform var(--dur-verse-fade) ease;
}
.verse.is-fading {
opacity: 0;
transform: translateY(-4px);
}
.verse__text {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.02rem, 2.5vw, 1.28rem);
font-style: italic;
color: #fdf6e3;
quotes: '\201C' '\201D';
}
.verse__text::before { content: open-quote; }
.verse__text::after { content: close-quote; }
.verse__ref {
display: block;
margin-top: 6px;
color: var(--gold-2);
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* -------------------------------------------------------------------------- */
/* 5. Shelves */
/* -------------------------------------------------------------------------- */
.shelf + .shelf {
margin-top: clamp(38px, 6vw, 62px);
}
.shelf__head {
margin-bottom: clamp(16px, 2.5vw, 24px);
}
/* The heading and its gold rule. The rule is drawn with a pseudo-element and
flex rather than a border, so it always fills exactly the space left over
beside the words, at any text length or font size. */
.shelf__title {
display: flex;
align-items: center;
gap: 16px;
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.4rem, 4vw, 2.05rem);
font-weight: 700;
color: var(--gold-1);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.shelf__title::after {
content: '';
flex: 1 1 auto;
height: 2px;
min-width: 24px;
border-radius: 2px;
background: linear-gradient(90deg, var(--gold-3), rgba(183, 134, 11, 0));
}
.shelf__lede {
margin: 8px 0 0;
max-width: 68ch;
color: var(--text-dim);
font-size: 0.98rem;
}
/* -------------------------------------------------------------------------- */
/* 6. The grid and the game tiles */
/* -------------------------------------------------------------------------- */
/* auto-fill + minmax is what makes this responsive with no media queries and
no column count to maintain: the browser fits as many 250px tiles as the
space allows and shares out the remainder. Add a game and nothing here
needs touching. */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: var(--gap);
}
/*
* The whole card is one .
*
* One link means one tab stop, one focus ring and one very large touch
* target — kinder on a phone and to a keyboard than a card full of separately
* focusable pieces. `display:flex` on an anchor is safe everywhere we care
* about, and the inner elements are spans so the markup stays valid.
*/
.tile {
position: relative;
display: flex;
align-items: center;
gap: 14px;
min-height: 92px;
padding: 14px 16px;
text-decoration: none;
color: var(--text);
background:
linear-gradient(160deg, var(--tile-1), var(--tile-2));
border: 1px solid var(--tile-edge);
border-radius: var(--radius);
box-shadow: 0 2px 10px var(--tile-shadow);
transition:
transform var(--dur-hover) ease,
border-color var(--dur-hover) ease,
box-shadow var(--dur-hover) ease,
background-color var(--dur-hover) ease;
/* Stops the grey flash Android browsers paint over a tapped link. */
-webkit-tap-highlight-color: transparent;
}
/* A thin gold seam along the top edge — the light catching the frame. */
.tile::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 1px;
border-radius: var(--radius) var(--radius) 0 0;
background: linear-gradient(90deg,
rgba(255, 214, 130, 0) 8%,
rgba(255, 214, 130, 0.55) 50%,
rgba(255, 214, 130, 0) 92%);
opacity: 0.6;
transition: opacity var(--dur-hover) ease;
}
/*
* Keyboard focus and mouse hover get the SAME treatment — a keyboard user
* should never have to guess at a highlight a mouse user gets for free.
*
* They are nonetheless written as two blocks rather than one selector list,
* because `:hover` has to be gated behind `@media (hover: hover)`. On a touch
* screen there is no such thing as hovering: the browser fakes a hover on tap
* and then leaves the tile stuck in its lit state until you tap somewhere
* else, so on a phone every game you have ever tapped ends up glowing. The
* gate gives phones a clean press-and-go while mice and trackpads keep the
* full effect. The hover half lives at the end of this section.
*/
.tile:focus-visible {
transform: translateY(-3px);
border-color: var(--tile-edge-lit);
box-shadow:
0 10px 24px rgba(3, 2, 12, 0.6),
0 0 0 1px rgba(255, 214, 130, 0.18),
0 0 26px var(--gold-glow);
}
.tile:focus-visible::before {
opacity: 1;
}
/* Pressing it should feel like pressing it. */
.tile:active {
transform: translateY(-1px);
transition-duration: 60ms;
}
/* ---- the icon medallion ---- */
.tile__art {
flex: 0 0 auto;
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 50%;
background:
radial-gradient(circle at 34% 28%, rgba(255, 232, 176, 0.20), rgba(255, 232, 176, 0) 62%),
linear-gradient(150deg, var(--frame-1), var(--frame-2));
border: 1px solid rgba(201, 162, 79, 0.55);
box-shadow: inset 0 1px 0 rgba(255, 232, 176, 0.22);
transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease;
}
.tile:focus-visible .tile__art {
border-color: var(--frame-3);
box-shadow:
inset 0 1px 0 rgba(255, 232, 176, 0.35),
0 0 16px var(--gold-glow);
}
/* ---- the words ---- */
.tile__body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0; /* lets long words wrap instead of stretching the grid cell */
}
.tile__title {
font-size: 1.06rem;
font-weight: 700;
line-height: 1.25;
color: #fffaf0;
}
.tile__blurb {
font-size: 0.855rem;
line-height: 1.4;
color: var(--text-dim);
/* Long blurbs are caught by the validator in games.php; this is the safety
net for the day one slips through. Progressive: browsers without
line-clamp simply show the full text, which is a fine outcome. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tile:focus-visible .tile__blurb {
color: #d8cdf0;
}
/* ---- optional corner ribbon ---- */
.tile__badge {
position: absolute;
top: -8px;
right: 10px;
padding: 2px 9px;
border-radius: 999px;
background: linear-gradient(180deg, var(--gold-1), var(--gold-2));
color: #241703;
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
box-shadow: 0 2px 8px rgba(3, 2, 12, 0.5);
}
/* ---- the tool shelf ----
The one shelf that is not games. Its medallion is cool steel rather than
warm olive-and-gold, so a child scanning the page for something to play can
see at a glance that this tile is a different kind of thing — without
having to read the heading. Everything else about the tile is unchanged, so
it still clearly belongs to the same page. */
.shelf--tool .tile__art {
background:
radial-gradient(circle at 34% 28%, rgba(214, 226, 255, 0.18), rgba(214, 226, 255, 0) 62%),
linear-gradient(150deg, #4a5273, #232a44);
border-color: rgba(178, 194, 232, 0.5);
}
.shelf--tool .tile__icon {
color: #dfe7ff;
}
.shelf--tool .tile__icon .ia { stroke: #b9c8f0; }
.shelf--tool .tile__icon .if { fill: #b9c8f0; }
.shelf--tool .tile:focus-visible .tile__art {
border-color: #cdd9ff;
box-shadow:
inset 0 1px 0 rgba(223, 231, 255, 0.35),
0 0 16px rgba(176, 196, 245, 0.35);
}
/* ---- the hover half of the tile treatment ----
Gated on a pointer that can genuinely hover (see the note beside
`.tile:focus-visible` above). Touch devices report `hover: none` and skip
this block entirely, so a tapped tile never stays lit. */
@media (hover: hover) {
.tile:hover {
transform: translateY(-3px);
border-color: var(--tile-edge-lit);
box-shadow:
0 10px 24px rgba(3, 2, 12, 0.6),
0 0 0 1px rgba(255, 214, 130, 0.18),
0 0 26px var(--gold-glow);
}
.tile:hover::before {
opacity: 1;
}
.tile:hover .tile__art {
border-color: var(--frame-3);
box-shadow:
inset 0 1px 0 rgba(255, 232, 176, 0.35),
0 0 16px var(--gold-glow);
}
.tile:hover .tile__blurb {
color: #d8cdf0;
}
.shelf--tool .tile:hover .tile__art {
border-color: #cdd9ff;
box-shadow:
inset 0 1px 0 rgba(223, 231, 255, 0.35),
0 0 16px rgba(176, 196, 245, 0.35);
}
}
/* -------------------------------------------------------------------------- */
/* 7. Icons */
/* -------------------------------------------------------------------------- */
/*
* The SVG symbols in icons.php carry no colour at all — only these class
* hooks. That is what lets the entire icon set re-theme from section 1.
*/
.tile__icon {
width: 34px;
height: 34px;
/* `currentColor` on the strokes below resolves to this. */
color: var(--gold-1);
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
/* Accent outline — the part of the drawing that catches the light. */
.tile__icon .ia { stroke: var(--gold-2); }
/* Solid shapes. */
.tile__icon .if { fill: var(--gold-2); stroke: none; }
/* A negative: the strike-through on "Not a Book". */
.tile__icon .in { stroke: var(--warn); stroke-width: 2.8; }
/* A knockout drawn on top of a filled shape, in the colour of the night. */
.tile__icon .ik { stroke: var(--bg-deep); stroke-width: 2.6; }
/* -------------------------------------------------------------------------- */
/* 8. Footer */
/* -------------------------------------------------------------------------- */
.footer {
margin-top: clamp(44px, 7vw, 74px);
padding-top: clamp(20px, 3vw, 30px);
border-top: 1px solid rgba(255, 214, 130, 0.18);
text-align: center;
}
.footer__verse {
margin: 0;
font-family: var(--font-display);
font-style: italic;
font-size: 1.02rem;
color: #e9dfc6;
}
.footer__ref {
display: inline-block;
margin-left: 8px;
color: var(--gold-2);
font-family: var(--font-ui);
font-style: normal;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.footer__nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px 22px;
margin-top: 12px;
}
.footer__nav a {
display: inline-flex;
align-items: center;
/* A 44px-tall target is the size a fingertip actually needs (WCAG 2.5.5).
The height comes from padding rather than a fixed value so the link still
grows if a visitor enlarges the text. */
min-height: 44px;
padding: 4px 6px;
color: var(--text-dim);
text-decoration: none;
font-size: 0.94rem;
transition: color var(--dur-hover) ease;
}
/* Underlined on hover rather than bordered: a border would be drawn at the
foot of the 44px target, a long way below the words. */
.footer__nav a:hover,
.footer__nav a:focus-visible {
color: var(--gold-1);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
}
.footer__note {
margin: 16px 0 0;
color: var(--text-faint);
font-size: 0.84rem;
}
.noscript {
margin: 24px auto 0;
max-width: var(--page-max);
padding: 12px 18px;
color: var(--text-dim);
text-align: center;
font-size: 0.9rem;
}
/* -------------------------------------------------------------------------- */
/* 9. Self-check report (?check=1) */
/* -------------------------------------------------------------------------- */
/* Everything about how the report LOOKS — its type, its colours, its stats
grid, its problem list — is in /biblegames/shared/theme.css, alongside the
bgs_report() function that emits the markup.
What is overridden here is only its POSITION, and only because this page is
genuinely different from the others. A game must never scroll, so on a game
the report is a fixed full-screen overlay that can scroll on its own. The
hub is a menu and scrolls anyway, so here the report is simply another
panel in the flow, where it reads more naturally and does not cover the
very tiles it is reporting on. */
.report {
position: relative;
inset: auto;
z-index: 1;
overflow: visible;
max-width: var(--page-max);
margin: 40px auto;
padding: 20px 24px;
background: rgba(8, 6, 26, 0.9);
border: 1px solid rgba(255, 214, 130, 0.35);
border-radius: var(--radius);
}
/* -------------------------------------------------------------------------- */
/* 10. Responsive */
/* -------------------------------------------------------------------------- */
/* Small phones: single column, and the icon shrinks a little so the words get
the room. The grid itself needs no change — auto-fill has already collapsed
it to one column by this width. */
@media (max-width: 430px) {
:root {
--gap: 12px;
}
.tile {
min-height: 84px;
padding: 12px 14px;
gap: 12px;
}
.tile__art {
width: 50px;
height: 50px;
}
.tile__icon {
width: 29px;
height: 29px;
}
.verse {
padding: 12px 14px;
}
.footer__nav {
gap: 6px 18px;
}
}
/* Very wide screens: cap the tile width so a 4K monitor does not stretch two
dozen words across half a metre of glass. */
@media (min-width: 1400px) {
.grid {
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
}
/* Short landscape (a phone turned sideways): claw back vertical space so at
least one row of tiles is visible without scrolling. */
@media (max-height: 520px) and (orientation: landscape) {
.page {
padding-top: 14px;
}
.wordmark {
font-size: clamp(1.9rem, 6vw, 2.6rem);
}
.masthead__lede,
.verse {
display: none;
}
}
/* -------------------------------------------------------------------------- */
/* 11. Reduced motion, forced colours, print */
/* -------------------------------------------------------------------------- */
/*
* Honour the operating-system "reduce motion" setting.
*
* Note this removes the *transition*, not the behaviour: tiles still light up
* on hover and the verse still changes, they simply do so instantly.
* Scripts.js checks the same preference and skips its fade to match.
*/
@media (prefers-reduced-motion: reduce) {
/* The blanket "kill every transition" rule is in shared/theme.css. This is
the part specific to the hub: a tile lifts by TRANSFORM on hover, and a
transform with no duration still jumps. Duration alone does not switch
that off; the movement itself has to go. */
.tile:hover,
.tile:focus-visible {
transform: none;
}
}
/*
* "Increase contrast", as offered by macOS, iOS and Windows.
*
* Unlike forced colours this keeps our palette; the visitor is asking for the
* same design with the edges made firmer. So: solid tile borders instead of a
* faint gold wash, brighter secondary text, and no low-opacity atmosphere.
* Every value here still comes from the tokens in section 1.
*/
@media (prefers-contrast: more) {
:root {
--text-dim: #ddd4f2;
--text-faint: #c3b9dd;
--tile-edge: rgba(255, 214, 130, 0.75);
}
.tile {
border-width: 2px;
}
.tile::before {
opacity: 1;
}
.beams {
display: none;
}
.verse {
border-top-width: 2px;
border-bottom-width: 2px;
}
}
/*
* Windows High Contrast / forced-colours mode.
*
* The system replaces our palette wholesale, which would leave the tiles as
* invisible rectangles because their edges are drawn with a colour it discards.
* Asking for a system border back is all that is needed to keep the page
* usable, and the icons follow along via currentColor.
*/
@media (forced-colors: active) {
.tile {
border: 1px solid CanvasText;
}
.tile__art {
border: 1px solid CanvasText;
}
/* Our gold ring is discarded along with the rest of the palette, so ask for
the system's own highlight colour back. Without this the focus indicator
can end up the same colour as the border it sits beside. */
a:focus,
a:focus-visible,
.tile:focus,
.tile:focus-visible {
outline: 3px solid Highlight;
outline-offset: 2px;
}
.tile__icon {
color: CanvasText;
}
.beams {
display: none;
}
.wordmark__text {
-webkit-text-fill-color: currentColor;
filter: none;
}
}
/*
* Print: ink on paper.
*
* A printed copy of this page is a list of addresses for a parent or a
* children's worker, so the tiles turn into plain rows and every link prints
* the URL it points at. Anything purely atmospheric is dropped.
*/
@media print {
html {
background: #fff;
}
body {
color: #000;
background: #fff;
}
.beams,
.skip-link,
.report,
.noscript {
display: none !important;
}
.page {
max-width: none;
padding: 0;
}
.wordmark__text {
-webkit-text-fill-color: initial;
color: #000;
background: none;
filter: none;
}
.wordmark__cross,
.shelf__title,
.verse__ref,
.footer__ref {
color: #000;
}
.grid {
display: block;
}
.tile {
display: block;
min-height: 0;
margin: 0 0 6pt;
padding: 4pt 0;
border: 0;
border-bottom: 1pt solid #ccc;
border-radius: 0;
background: none;
box-shadow: none;
color: #000;
break-inside: avoid;
}
.tile::before,
.tile__art {
display: none;
}
.tile__blurb {
color: #333;
/* Undo the clamp — on paper there is no reason to hide a third line. */
display: block;
overflow: visible;
}
/* Print the destination, since a paper link cannot be clicked. The em dash
is written as the CSS escape \2014 rather than the character itself, so
the rule survives even if this file is ever served with the wrong
charset.
Note the DOUBLE space after the escape. A CSS escape sequence is
terminated by whitespace, and that terminating space is consumed — with
only one space the output runs together as "-gojes.us". */
.tile__title::after {
content: ' \2014 gojes.us' attr(data-url);
}
.footer__nav {
display: none;
}
}