/** * kids-components.css: site-level structural styling for embedded content * components that the Theme Studio token editor cannot easily target. * * Purpose: style the HTML components baked into hub/detail page content * (the Quick Facts box) and wire the playful page background. All colors * read from Theme Studio tokens (var(--ts-*)) with sensible fallbacks, so * when the site owner sets the palette in Theme Studio those choices flow * straight through here. Structure lives here, color stays in the theme. * Depends on: engine renderTokensCss() emitting :root --ts-* custom props * (every engine page) and core/head.php loading this via site.php site_css. * Consumes: .quick-facts-box / .quick-facts-list (content body_html), body. * Loaded: config/site.php 'site_css' array, after theme CSS. */ /* ---- Playful page background -------------------------------------------- */ /* Old site signature look: full-bleed illustration. background.png already ships in public/images. A soft fixed scrim keeps body text readable over the illustration even on blocks that have no surface of their own. */ body { background-color: #cfeaf5; /* sky fallback while the image loads */ background-image: url("/images/background.png"); background-position: center top; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } body::before { content: ""; position: fixed; inset: 0; /* Light haze only: content now sits on its own cards, so the playful background can show through far more than the old heavy white veil. */ background: rgba(255, 255, 255, 0.15); pointer-events: none; z-index: -1; } /* Fixed backgrounds are janky / costly on mobile: let it scroll there. */ @media (max-width: 768px) { body { background-attachment: scroll; } } /* ---- Quick Facts box ---------------------------------------------------- */ /* Present on every hub + the 177 animal pages as

...

..: ..

. Shipped with no CSS, so it rendered as a raw indented definition list. */ .quick-facts-box { background: var(--ts-color-tip-bg, #eaf7fb); border: 3px solid var(--ts-color-primary, #0e79a0); border-radius: var(--ts-radius-md, 18px); padding: var(--ts-space-lg, 1.5rem) var(--ts-space-xl, 2rem); margin: var(--ts-space-xl, 2rem) 0; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10); } .quick-facts-title { margin: 0 0 0.75rem 0; font-family: var(--ts-font-heading, inherit); color: var(--ts-color-primary, #0e79a0); font-size: var(--ts-font-size-lg, 1.35rem); } .quick-facts-list { margin: 0; display: grid; gap: 0.4rem 1.25rem; } .quick-facts-list dt { font-weight: var(--ts-font-weight-bold, 700); color: var(--ts-color-text-default, #2e2e2e); } .quick-facts-list dd { margin: 0; color: var(--ts-color-text-muted, #555); } /* Wider screens: render as a clean two-column facts table (term | value). */ @media (min-width: 560px) { .quick-facts-list { grid-template-columns: max-content 1fr; align-items: baseline; } } /* ======================================================================== KIDS THEME POLISH (site-level overrides) ------------------------------------------------------------------------ Theme Studio block CSS is emitted inline AFTER this stylesheet loads, so every rule below is scoped under .ts-page (the class) to win specificity over the block library's single-class selectors. The palette keeps every white-on-color text pairing at or above WCAG AA contrast. Goal: vibrant, kid-friendly, clearly better than the old flat theme, with content floating on cards over the playful background. ======================================================================== */ /* ---- Prominent, kid-friendly primary navigation ---------------------- */ /* A solid vibrant bar so the menu cannot be overlooked, and a wider inner row so all seven animal groups sit on one line instead of wrapping early. */ .ts-page .ts-nav-light-blur-sticky, .ts-page .ts-nav-light-blur-sticky.ts-nav-solid { background-color: #0e79a0; background-image: linear-gradient(90deg, #0c6f93, #0e79a0); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 3px solid rgba(255, 255, 255, 0.45); box-shadow: 0 4px 16px rgba(14, 60, 80, 0.25); } .ts-page .ts-nav-light-blur-sticky .ts-nav-inner { max-width: var(--ts-content-width-xl, 1440px); gap: var(--ts-space-sm, 8px); } .ts-page .ts-nav-light-blur-sticky .ts-nav-brand { color: #ffffff; } .ts-page .ts-nav-light-blur-sticky .ts-nav-brand:hover, .ts-page .ts-nav-light-blur-sticky .ts-nav-brand:focus-visible { color: #fff3c4; } .ts-page .ts-nav-light-blur-sticky .ts-nav-items { gap: 6px; } .ts-page .ts-nav-light-blur-sticky .ts-nav-item { color: #ffffff; font-weight: 700; padding: 8px 14px; border-radius: 999px; } .ts-page .ts-nav-light-blur-sticky .ts-nav-item:hover { color: #0a5f80; background-color: #ffffff; } .ts-page .ts-nav-light-blur-sticky .ts-nav-item.ts-nav-current { color: #0a5f80; background-color: #ffd23f; /* sunny highlight marks the current section */ font-weight: 800; } .ts-page .ts-nav-light-blur-sticky .ts-nav-burger-bar { background-color: #ffffff; } /* Mobile dropdown panel: dark surface so the white pill links stay readable. */ @media (max-width: 768px) { .ts-page .ts-nav-light-blur-sticky .ts-nav-items { background-color: #0e79a0; background-image: linear-gradient(180deg, #0e79a0, #0a5f80); border-bottom-color: rgba(255, 255, 255, 0.3); } .ts-page .ts-nav-light-blur-sticky .ts-nav-item, .ts-page .ts-nav-light-blur-sticky .ts-nav-item.ts-nav-current { border-radius: 0; } } /* ---- Hero: vibrant banner instead of a flat white band --------------- */ /* hero-minimal-text-only is used on hub + animal detail pages. A deep blue gradient (white text clears AA at every stop) replaces the empty white. */ .ts-page .ts-hero-minimal-text-only { background-color: #0e79a0; background-image: linear-gradient(135deg, #0e79a0 0%, #0a5f80 100%); color: #ffffff; box-shadow: 0 8px 24px rgba(14, 60, 80, 0.2); } .ts-page .ts-hero-minimal-text-only .ts-minimal-title { color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22); } .ts-page .ts-hero-minimal-text-only .ts-minimal-subtitle { color: rgba(255, 255, 255, 0.96); } .ts-page .ts-hero-minimal-text-only .ts-minimal-eyebrow { color: #fff3c4; } /* ---- Content as elevated cards floating over the background ---------- */ /* Each prose block becomes a rounded translucent-white card with a soft shadow and vertical gaps, so the playful background shows between cards. */ .ts-page .ts-prose { background-color: rgba(255, 255, 255, 0.95); border: 2px solid rgba(255, 255, 255, 0.7); border-radius: var(--ts-radius-md, 18px); box-shadow: 0 10px 28px rgba(14, 60, 80, 0.16); padding: var(--ts-space-lg, 36px); margin-top: var(--ts-space-md, 18px); margin-bottom: var(--ts-space-md, 18px); transition: transform 160ms ease-out, box-shadow 160ms ease-out; } .ts-page .ts-prose:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(14, 60, 80, 0.22); } /* The Quick Facts block renders its own styled box; keep its wrapper transparent so we never double-frame it. */ .ts-page .ts-prose:has(> .ts-prose-content > .quick-facts-box) { background-color: transparent; border: none; box-shadow: none; padding-top: 0; padding-bottom: 0; } .ts-page .ts-prose:has(> .ts-prose-content > .quick-facts-box):hover { transform: none; } /* Playful section headings and bold, obvious animal links for engagement. */ .ts-page .ts-prose-content h2 { color: #0e79a0; } .ts-page .ts-prose-content h3 { color: #0a5f80; } .ts-page .ts-prose-content a { color: #0e79a0; font-weight: 700; } .ts-page .ts-prose-content a:hover { color: #0a5f80; } /* ---- Whole category card clickable (kids click the picture, not just text) ---- */ /* The card image sits outside the card's link, so only the text was clickable. Stretch the existing link across the whole card via an empty ::after overlay, no markup change, the entire card (image included) becomes one big tap target. IMPORTANT: the block gives .ts-card-link a hover transform; a transform makes the link its own containing block, which collapses the overlay to just the link text on hover (jumpy, intermittent clicks). So we cancel that transform and move the hover feedback to the whole card. Verified via workbench render (before/after). */ .ts-page .ts-cards-3up .ts-card { position: relative; transition: transform 160ms ease-out, box-shadow 160ms ease-out; } .ts-page .ts-cards-3up .ts-card-link, .ts-page .ts-cards-3up .ts-card-link:hover, .ts-page .ts-cards-3up .ts-card-link:focus-visible { transform: none; } .ts-page .ts-cards-3up .ts-card .ts-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .ts-page .ts-cards-3up .ts-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(14, 60, 80, 0.22); } /* ---- Footer: dark surface so the white footer text is readable ------- */ /* The footer block paints surface-2 (white) with on-dark (white) text, which renders white-on-white. Give it a dark kid-palette surface so the existing white text clears AA contrast. */ .ts-page .ts-footer-three-column { background-color: #0a4a63; background-image: linear-gradient(180deg, #0e6485, #0a4a63); } /* ---- Category-page content sections (cool facts, sub-categories, FAQ) ---- These come from the hub pages' migrated body_html and shipped with NO CSS, so they rendered as tiny default text + plain bullets ("looks like garbage"). Style them to the kids theme: readable body size, playful fact + FAQ cards. Scoped to .ts-page. Verified via workbench before/after render. */ .ts-page .ts-prose-content p, .ts-page .ts-prose-content li { font-size: var(--ts-font-size-md, 18px); line-height: var(--ts-line-height-relaxed, 1.7); color: var(--ts-color-text-default, #143642); } .ts-page .cool-facts-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.85rem; } .ts-page .cool-facts-list li { background: var(--ts-color-surface-1, #f3fbfe); border-left: 6px solid var(--ts-color-primary, #0e79a0); border-radius: var(--ts-radius-sm, 10px); padding: 0.9rem 1.15rem; box-shadow: 0 3px 10px rgba(14, 60, 80, 0.08); } .ts-page .cool-facts-list li strong { color: var(--ts-color-primary, #0e79a0); } .ts-page .sub-category-section { margin: 1.25rem 0; padding: 1.1rem 1.3rem; background: var(--ts-color-surface-1, #f3fbfe); border-radius: var(--ts-radius-md, 18px); } .ts-page .sub-category-section h2 { margin-top: 0; } .ts-page .faq-item { background: var(--ts-color-surface-1, #f3fbfe); border-radius: var(--ts-radius-sm, 10px); padding: 0.9rem 1.2rem; margin: 0.75rem 0; } .ts-page .faq-item h3 { margin: 0 0 0.4rem; color: var(--ts-color-primary-hover, #0b6082); } .ts-page .faq-item p { margin: 0; } .ts-page .related-categories { text-align: center; padding: 0.5rem 0; }