/* 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, form.versejump { 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, form.versejump label { color: #B4B4B4; font-size: 100%; font-weight: normal; } form.weeknav input[type = "number"], form.weeknav select, form.versejump input[type = "number"], form.versejump 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"], form.versejump 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, form.versejump select { /* long tool names must never force a horizontal scrollbar on phones */ min-width: 0em; } /* The LionSword passage jump carries five controls where the week pickers carry two, so its number boxes are narrowed to keep the row from growing taller than the widgets above it on a phone. A chapter or verse number is at most three digits (Psalm 119:176 is the longest either can be), so 3.6em is generous. The two selects are allowed to shrink and share the space that is left rather than each claiming the width of its longest option. */ form.versejump input[type = "number"] { width: 3.6em; } form.versejump select { flex: 0 1 auto; min-width: 6em; } form.weeknav button, form.versejump 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, form.versejump button:hover { background-color: #0000FF; color: #FFFFFF; } form.weeknav button:active, form.versejump 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 */ /* Begin Section Quotes & Hover Tooltips */ /* Each footer section is wrapped as .footersec with its own id and (optionally) a data-tip attribute holding tooltip HTML; footer-nav.js shows a cursor- following tooltip when the pointer is anywhere over the section. */ .footersec { position: relative; } /* Motivational quote shown under a section title, above its first link. Teal is deliberately distinct from the gray headers, white links, and yellow hover so the quotes read as their own voice. */ .secquote { color: #74C7BE; font-size: 75%; font-style: italic; line-height: 1.35; margin: 0.15em 0em 0.55em 0em; } /* Words inside a quote the owner wants to stand out even more. */ .secquote .standout { color: #FFD800; font-weight: bold; } /* Scripture citation after a quote, e.g. (Neh 8:15) - slightly dimmer. */ .secquote .cite { color: #9AA0A6; font-style: normal; } /* Cursor-following tooltip box (one shared element created by footer-nav.js). */ #footer-tip { background-color: rgba(0, 0, 16, 0.96); border: 0.09em solid #FFD800; border-radius: 0.35em; box-shadow: 0em 0.2em 0.7em rgba(0, 0, 0, 0.85); color: #FFFFFF; display: none; font-size: 90%; font-style: italic; line-height: 1.4; max-width: 22em; padding: 0.5em 0.7em; pointer-events: none; position: fixed; z-index: 50; } #footer-tip.show { display: block; } #footer-tip b { color: #FFD800; font-style: normal; } @media (prefers-reduced-motion: no-preference) { #footer-tip { transition: opacity 0.08s linear; } } /* End Section Quotes & Hover Tooltips */