/* css/guide.css — styles for the /guide page, the site footer, and the first-visit nudge. Uses only the shared custom properties from styles.css, so light and dark themes are handled automatically. */ /* --- Full-page takeover ------------------------------------------------- The guide is the app's first full-page content view: the list view owns #speciesTable and the detail view uses #detailModal, so the guide instead lives in its own container and hides the table region while active. GuideView toggles `route-guide` on ; CSS owns all the visibility so the view only flips one class. */ #guideView { display: none; } body.route-guide .table-container, body.route-guide #tableFooter { display: none; } body.route-guide #guideView { display: block; } /* --- Guide article ------------------------------------------------------ */ .guide-view { padding: 1.5rem 1rem 3rem; } .guide { max-width: 46rem; margin: 0 auto; color: var(--surface-9); line-height: 1.6; } .guide h1 { font-size: 1.9rem; margin: 0 0 0.25rem; } /* h1 is a programmatic focus target (tabindex="-1") reached only on route entry, never by Tab — suppress the ring so it doesn't read as interactive. */ .guide h1:focus { outline: none; } .guide-lede { color: var(--surface-8); margin: 0 0 1rem; } .guide h2 { font-size: 1.3rem; margin: 1.75rem 0 0.5rem; } .guide h3 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; } .guide p { margin: 0 0 0.75rem; } .guide ul, .guide ol { margin: 0 0 0.75rem; padding-left: 1.25rem; } .guide li { margin: 0.25rem 0; } .guide a { color: var(--brand-3); } /* Inline icons mirror real UI controls (search, add, confirm, change log); tint them so readers register them as buttons they'll see in the app. */ .guide .fa-solid { color: var(--brand-3); } .guide-divider { border: none; border-top: 1px solid var(--surface-5); margin: 2rem 0; } .guide-callout { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 3px solid var(--brand-2); background: var(--surface-3); border-radius: 4px; } .guide-faq dt { font-weight: 600; margin-top: 0.75rem; } .guide-faq dd { margin: 0.25rem 0 0; padding: 0; color: var(--surface-8); } /* --- Site footer -------------------------------------------------------- */ .site-footer { margin-top: 1rem; padding: 1.25rem 1rem; color: var(--surface-8); } .site-footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .site-footer-nav a { color: var(--surface-8); text-decoration: none; } .site-footer-nav a:hover, .site-footer-nav a:focus-visible { color: var(--brand-3); text-decoration: underline; } /* The Guide control is icon-only (its label is .sr-only), so size the glyph up and suppress the nav's hover underline — with no visible text there's nothing to underline; hover just recolors. The selector outranks the .site-footer-nav a:hover rule above. */ .site-footer-guide { font-size: 1.5rem; line-height: 1; } .site-footer-nav a.site-footer-guide:hover, .site-footer-nav a.site-footer-guide:focus-visible { text-decoration: none; } /* Screen-reader-only text: visually hidden, still announced. */ .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; } /* The Guide control shows one icon + one accessible label at a time, keyed on the route: info/"Guide" normally, ×/"Close guide" while the guide is open. GuideView toggles body.route-guide, so the swap needs no JS. */ .site-footer-icon-close, .site-footer-label-close { display: none; } body.route-guide .site-footer-icon-open, body.route-guide .site-footer-label-open { display: none; } body.route-guide .site-footer-icon-close, body.route-guide .site-footer-label-close { display: inline; } /* --- First-visit nudge -------------------------------------------------- */ /* Center the banner and cap its width so it doesn't span the whole viewport. */ #guideNudge { max-width: 500px; margin: 0 auto; } /* Two-column grid: [text + link | dismiss]. The dismiss owns its own column and stays vertically centered even when the left column wraps to two lines at narrow widths. */ .guide-nudge { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem; margin: 0.75rem 1rem 1rem; padding: 0.6rem 0.9rem; background: var(--surface-3); border: 1px solid var(--surface-5); border-radius: 6px; color: var(--surface-9); } .guide-nudge-main { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; } .guide-nudge-text { font-weight: 600; } .guide-nudge-link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--brand-3); text-decoration: none; } .guide-nudge-link:hover, .guide-nudge-link:focus-visible { text-decoration: underline; } /* Match the app's other circle-xmark controls (e.g. the add-species cancel button): brand tint, larger glyph. align-self centers it in its column. */ .guide-nudge-dismiss { align-self: center; padding: 0.25rem; background: none; border: none; line-height: 1; font-size: 1.33rem; color: var(--brand-2); cursor: pointer; } .guide-nudge-dismiss:hover, .guide-nudge-dismiss:focus-visible { color: var(--brand-3); } /* Subtle entrance; the global prefers-reduced-motion block neutralizes motion, but gate the keyframe animation explicitly to be safe. */ @media (prefers-reduced-motion: no-preference) { .guide-nudge { animation: guide-nudge-in 200ms ease-out; } @keyframes guide-nudge-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } }