/* footer-nav.css - styles ONLY for footer-nav.php (the footer navigation). Loaded by footer-nav.php itself via a tag (valid inside in HTML5). Scope: the interactive week pickers / tool jumper controls and the Subscribe link shine effect. The general footer appearance still comes from /wylh.css (footer, .content, .splitcols, ul.list); nothing here restyles that. */ /* Begin Uniform Section Titles */ /* wylh.css does not set an h2/h3 font-size, so browsers default to h2 ~1.5em and h3 ~1.17em - different sizes even though every footer section title (h2 for the main groups, h3 for the sub-topics under Bible Questions By Topic) should read as the same level of heading. Scoped to the footer nav only so this never affects h2/h3 elsewhere on the site. */ nav[aria-label = "Footer"] header h2, nav[aria-label = "Footer"] header h3 { font-size: 125%; margin-bottom: 0.3em; margin-top: 1em; } /* End Uniform Section Titles */ /* Begin Footer Week Pickers & Tool Jumper */ /* wylh.css has site-wide form rules (150% bold labels, 1em input padding, thick inset borders) meant for full-page forms; the selectors below are deliberately more specific so the small footer controls stay small. */ form.weeknav { align-items: center; display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0.3em 0em 0.8em 0em; max-width: 100%; /* anchor for the absolutely-positioned number wheel popup */ position: relative; } form.weeknav label { color: #B4B4B4; font-size: 100%; font-weight: normal; } form.weeknav input[type = "number"], form.weeknav select { background-color: #1A1A1A; border: 0.09em solid #B4B4B4; border-radius: 0.3em; color: #FFFFFF; font-size: 100%; max-width: 100%; padding: 0.3em 0.4em; } form.weeknav input[type = "number"] { /* touch-action none lets the up/down drag gesture change the number instead of scrolling the page while the finger is on the box */ touch-action: none; width: 5em; } form.weeknav select { /* long tool names must never force a horizontal scrollbar on phones */ min-width: 0em; } form.weeknav button { background-color: #000080; border: 0.09em outset #B4B4B4; border-radius: 0.3em; color: #FFFFFF; cursor: pointer; font-size: 100%; font-weight: bold; padding: 0.3em 0.8em; } form.weeknav button:hover { background-color: #0000FF; color: #FFFFFF; } form.weeknav button:active { border-style: inset; } /* validation / help message, announced politely to screen readers */ form.weeknav .weeknav-msg { color: #FFD800; display: block; font-size: 90%; width: 100%; } /* Number wheel popup: opens under a focused week box showing 2 numbers above and 2 below the current one; created and positioned by footer-nav.js. It is a transient popup (never sticky/fixed): it closes on blur, Escape, or choosing a number. */ .weeknav-wheel { background-color: #1A1A1A; border: 0.09em solid #B4B4B4; border-radius: 0.3em; box-shadow: 0em 0.2em 0.6em rgba(0, 0, 0, 0.8); display: none; min-width: 4em; position: absolute; text-align: center; touch-action: none; -webkit-user-select: none; user-select: none; z-index: 5; } .weeknav-wheel.open { display: block; } .weeknav-wheel-num { color: #B4B4B4; cursor: pointer; padding: 0.15em 0.6em; } .weeknav-wheel-num:hover { background-color: #0000FF; color: #FFFFFF; } .weeknav-wheel-current { background-color: #000080; color: #FFD800; font-weight: bold; } .weeknav-wheel-blank { padding: 0.15em 0.6em; } /* End Footer Week Pickers & Tool Jumper */ /* small explanatory note under a footer link list (e.g. pointing out that some series parts are linked elsewhere) - quieter than a normal link/list item, still readable against the black footer background */ .footnote { color: #808080; font-size: 85%; margin-top: 0.3em; } /* Begin Subscribe Link Shine */ /* Sequence (one 8s loop): a diagonal white shine sweeps across the letters polishing them, the whole link glows briefly, then a plain-looking pause, then a second slower "glaze" polish sweeps across, then rest. A soft text-shadow swells during the sweeps to fake a slight bolding/unbolding without shifting the layout. Only runs where background-clip: text is supported; everywhere else the link just stays a normal white footer link. */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { footer a.subscribe-shine { animation: subscribeshine 8s linear infinite; /* the letters are painted by the background (clipped to the text), so a solid base color is REQUIRED here: whenever the moving gradient band sits off to the side, this color is what the letters show. With transparent here the letters vanish for most of the loop. */ background-color: #D8D8D8; background-image: linear-gradient(115deg, #D8D8D8 0%, #D8D8D8 41%, #FFFFFF 46%, #FFFDE7 50%, #FFFFFF 54%, #D8D8D8 59%, #D8D8D8 100%); background-position: 165% 0%; background-repeat: no-repeat; background-size: 320% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; } /* hovering/focusing pauses the effect and restores the site's normal yellow hover style so nothing distracts from clicking it */ footer a.subscribe-shine:hover, footer a.subscribe-shine:focus, footer a.subscribe-shine:active { animation: none; background-color: #FFFF00; background-image: none; color: #FFFF00 !important; -webkit-text-fill-color: #FFFF00; text-shadow: none; } } @keyframes subscribeshine { /* polish sweep no. 1 (fast) with slight faux-bold swelling */ 0% { background-position: 165% 0%; text-shadow: none; } 6% { text-shadow: 0em 0em 0.03em rgba(255, 255, 255, 0.55); } 13% { background-position: -65% 0%; text-shadow: none; } /* brief glow of the whole link */ 16% { text-shadow: 0em 0em 0.35em rgba(255, 255, 255, 0.9), 0em 0em 0.7em rgba(255, 216, 0, 0.6); } 22% { background-position: -65% 0%; text-shadow: none; } /* pause: nothing happening (the band then jumps back to the start off-screen in 0.1% of the loop so no reverse sweep is ever visible) */ 55% { background-position: -65% 0%; text-shadow: none; } 55.1% { background-position: 165% 0%; } /* glaze polish sweep no. 2 (slower, gentler) */ 62% { text-shadow: 0em 0em 0.02em rgba(255, 255, 255, 0.35); } 78% { background-position: -65% 0%; text-shadow: none; } /* rest until the loop restarts */ 100% { background-position: -65% 0%; text-shadow: none; } } /* accessibility: users who ask the OS for reduced motion get a plain link */ @media (prefers-reduced-motion: reduce) { footer a.subscribe-shine { animation: none; background-image: none; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; text-shadow: none; } } /* End Subscribe Link Shine */ /* Begin Footer Social Media Icons */ /* white brand icons (from the CC0 Simple Icons set, stored in /!html/svg/social/) shown near the Contact link; a soft gold glow on hover/keyboard-focus matches the footer's yellow link hover color */ .socialicons { margin-top: 0.3em; } .socialicons a { display: inline-block; padding: 0.25em 0.3em; } .socialicons img { height: 1.5em; vertical-align: middle; width: 1.5em; } .socialicons a:hover img, .socialicons a:focus img { filter: drop-shadow(0em 0em 0.25em #FFD800); } /* End Footer Social Media Icons */