/* TanninLab — WordPress-specific extras only. The full design system is in app.css. Add nothing here that app.css already covers. */ html { scroll-behavior: smooth; } /* Keep fixed header clear of the WP admin bar when logged in. */ body.admin-bar #tl-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar #tl-header { top: 46px; } } /* Anchor offset so sticky-header + TOC jumps land below the header. */ :target { scroll-margin-top: 96px; } [id] { scroll-margin-top: 96px; } /* WP content images inside article prose should be rounded + responsive (matches design). */ .prose-custom img { max-width: 100%; height: auto; border-radius: 14px; margin: 1.5rem 0; } .prose-custom ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1.25rem; } .prose-custom ol { list-style: decimal; padding-left: 1.25rem; margin-bottom: 1.25rem; } .prose-custom li { margin-bottom: 0.35rem; line-height: 1.6; } .prose-custom a { color: #1F6F5C; text-decoration: none; } .prose-custom a:hover { color: #B5762E; } /* Table cells with no explicit color inherited the dark-theme body color (invisible on the cream article bg). :where() keeps specificity 0 so cells that DO set a color (text-ink / text-muted-ink) are untouched; only uncolored cells fall back to ink. */ :where(.prose-custom table td) { color: #1A201E; } /* Pagination / generic WP bits in the cream content area. */ .tl-pagination a, .tl-pagination span { display: inline-block; padding: 0.5rem 0.9rem; border-radius: 10px; border: 1px solid rgba(26,32,30,0.1); margin: 0 2px; font-size: 0.875rem; color: #1A201E; } .tl-pagination .current { background: #1F6F5C; color: #F7F5F0; border-color: #1F6F5C; } /* ------------------------------------------------------------------ * * Opacity-variant utilities missing from the compiled app.css. * (Tailwind JIT didn't emit these few; define them so markup works.) * ------------------------------------------------------------------ */ .bg-abyss\/98 { background-color: rgba(11, 26, 21, 0.98); } .bg-white\/10 { background-color: rgba(255, 255, 255, 0.10); } .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.10); } /* Header mega-menu dropdown + search overlay MUST be opaque (were see-through). */ #tl-mega-nav .tl-mega-panel { background-color: rgba(11, 26, 21, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #tl-search-overlay { background-color: rgba(11, 26, 21, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ------------------------------------------------------------------ * * Entrance animations — content is ALWAYS visible by default so the * page can never render blank. theme.js adds `tl-anim` to to * enable the pre-reveal hidden state, then `.tl-in` reveals each element. * ------------------------------------------------------------------ */ .hero-headline-word, .hero-sub, .hero-cta, .hero-float, .pillar-card, .botanical-content, .trust-stat, .reveal-up, .hub-reveal, .article-reveal { opacity: 1; } html.tl-anim .hero-headline-word, html.tl-anim .hero-sub, html.tl-anim .hero-cta, html.tl-anim .hero-float, html.tl-anim .pillar-card, html.tl-anim .botanical-content, html.tl-anim .trust-stat, html.tl-anim .reveal-up, html.tl-anim .hub-reveal, html.tl-anim .article-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } html.tl-anim .hero-float { transform: translateY(28px) scale(0.96); } html.tl-anim .hero-headline-word.tl-in, html.tl-anim .hero-sub.tl-in, html.tl-anim .hero-cta.tl-in, html.tl-anim .hero-float.tl-in, html.tl-anim .pillar-card.tl-in, html.tl-anim .botanical-content.tl-in, html.tl-anim .trust-stat.tl-in, html.tl-anim .reveal-up.tl-in, html.tl-anim .hub-reveal.tl-in, html.tl-anim .article-reveal.tl-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.tl-anim .hero-headline-word, html.tl-anim .hero-sub, html.tl-anim .hero-cta, html.tl-anim .hero-float, html.tl-anim .pillar-card, html.tl-anim .botanical-content, html.tl-anim .trust-stat, html.tl-anim .reveal-up, html.tl-anim .hub-reveal, html.tl-anim .article-reveal { transition: none; opacity: 1; transform: none; } }