:root { --bg: #eceff2; --wall: #d8dce0; --bg-warm-soft: #e6e8ea; --ink: #1a1a1a; --muted: #6b6764; --amber: #c8862c; /* Darker amber for small-text usage. The brand amber #b8923a is fine for large text and UI elements (passes 3:1 against white) but fails WCAG AA at 4.5:1 for normal body text. --amber-text is the accessible companion: deep enough to pass on white (5.5:1) and on parchment (5.1:1), close enough in hue to read as the same family. */ --amber-text: #8a6a23; --walnut: #6b4f3a; --candlelight: #f4d68a; --orange: #e26a2c; --white: #ffffff; --green: #4a8a3a; --yellow: #d8a83a; --ambiguous: #7a6cbd; --red: #b54a2c; --border: #e3ddd3; --serif: "Fraunces", Georgia, serif; --sans: "Inter", system-ui, -apple-system, sans-serif; --content: 72rem; --radius: 14px; --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 30px rgba(60,40,20,0.06); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* ── Accessibility scaffolding (WCAG 2.1 AA pass) ────────────────────── Skip-to-main-content link, injected by js/modules/a11y.js into every page. Visually hidden until focused so it does not disturb the visual design, then surfaces at top-left with high contrast so a keyboard user can bypass the site-header nav without 40 tab presses. */ .a11y-skip-link { position: absolute; top: -100px; left: 0; background: #2a3540; color: #fff; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; padding: 0.7rem 1.2rem; text-decoration: none; border-bottom-right-radius: 6px; z-index: 10000; transition: top 0.15s ease-out; } .a11y-skip-link:focus, .a11y-skip-link:focus-visible { top: 0; outline: 3px solid #b8923a; outline-offset: 1px; } /* Site-wide focus-visible rule. WCAG 2.4.7 (Focus Visible) requires that every interactive element has a clearly visible focus indicator. Browser defaults vary; some are nearly invisible against a parchment background. This rule sets a consistent 2px solid amber ring on any element that receives keyboard focus, with offset so the ring sits outside the element's own border. Applies only on :focus-visible so mouse clicks don't show a focus ring. */ :focus-visible { outline: 2px solid #b8923a; outline-offset: 2px; border-radius: 3px; } /* Buttons and links can override above with their own focus styling if needed. Inputs with their own focus styles (textareas, search inputs) keep their styles plus the global outline. */ /* sr-only utility class for content that should be available to screen readers but not visually rendered (e.g., chart descriptions, button labels that are already implied by an icon). Standard WCAG pattern. */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* ── Print stylesheet (P3 Print or Save as PDF) ──────────────────────── When the visitor clicks the Print button on a verdict, product-agent adds the .pa-printing class to and .pa-print-target to the result container. We use those hooks to hide everything except the target verdict + a print-only header and footer with The Dose attribution and the verdict source URL. The browser's Print dialog handles Save-as-PDF natively; we just make sure what gets printed is clean. */ @media print { /* Universal cleanup: black ink on white paper, no background colors for ink-saving by default. Visitors can override via the browser's "Background graphics" checkbox if they want colors. */ * { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; } /* Hide chrome on every page: nav, footers, related pages, the auth widgets, the search widget, the font-scale toggle, the skip link. None of those belong on a printed page. */ .site-header, .site-footer, .related-pages, #related-pages, .a11y-skip-link, .sn-wrap, .auth-wrap, .font-scale-toggle, .hp-positioning, .hp-daily-dose, .hp-whatsnew, .hp-featured, .dose-team, .popup, .pa-save-row, .mv-tabs, .mv-card-actions, .mm-scan, .mm-add-actions { display: none !important; } /* The verdict body itself gets the page. Print color-adjust EXACT so the verdict pill backgrounds (green/yellow/red) stay visible — they carry meaning, not decoration. */ .pa-verdict, .pa-verdict *, .mv-verdict-pill, .folk-dot, .sr-pill, .mm-kind-pill, .folk-trad-pill { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } /* Strong type defaults for paper. */ body { font-size: 11pt !important; line-height: 1.5 !important; font-family: Georgia, "Times New Roman", serif; } h1, h2, h3 { page-break-after: avoid; color: #000 !important; } a[href]::after { /* Show the URL for any link so the printed reference is verifiable on paper. Suppress for short fragment links so the page isn't polluted with #foo-id markers. */ content: " (" attr(href) ")"; font-size: 9pt; color: #444 !important; } a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; } /* Avoid mid-card page breaks where possible. */ .pa-claim-item, .pa-list li, .folk-card, .mv-card, .mm-card { page-break-inside: avoid; } /* When the visitor explicitly hits Print on a verdict, the .pa-printing class is on . Hide page-specific input UI and lists so the printed page is just the verdict + its print-only header and footer. Approach: hide the chrome the verdict shouldn't carry, but DO NOT hide ancestors of the verdict (main, section, etc.) because that would hide the verdict too. The @media print rules above already killed the global chrome (site-header, site-footer, nav). Here we kill the page-specific surrounding UI. */ body.pa-printing .ing-search-row, body.pa-printing .pharmacy-host, body.pa-printing .at-intro, body.pa-printing .at-band, body.pa-printing .mv-title, body.pa-printing .mv-lede, body.pa-printing .mv-eyebrow, body.pa-printing .mv-signin-host, body.pa-printing .mv-tabs, body.pa-printing #mv-list-host, body.pa-printing .mm-title, body.pa-printing .mm-lede, body.pa-printing .mm-eyebrow, body.pa-printing .mm-disclaimer, body.pa-printing .mm-add, body.pa-printing #mm-list-host, body.pa-printing .sr-eyebrow, body.pa-printing .sr-title, body.pa-printing .sr-lede, body.pa-printing .sr-form, body.pa-printing .sr-status, body.pa-printing #sr-results, body.pa-printing .sv-eyebrow, body.pa-printing .sv-headline, body.pa-printing .sv-meta, body.pa-printing .sv-shared-banner, body.pa-printing .sv-cta-row, body.pa-printing .pa-form, body.pa-printing #pa-root .pa-status, body.pa-printing .ing-agent-status, body.pa-printing .growing-plant-cycle, body.pa-printing .character-host, body.pa-printing .pa-addmeds-btn, body.pa-printing .pa-print-btn, body.pa-printing .pa-save-btn, body.pa-printing .pa-save-msg, body.pa-printing .mv-detail-back { display: none !important; } /* The result container holds the verdict markup; surface it. */ body.pa-printing .pa-print-target { display: block !important; margin: 0 !important; padding: 0 !important; } /* Print-only attribution band at the top of the page. The product-agent script inserts this before window.print() and removes it after. */ .pa-print-header { display: block !important; border-bottom: 1px solid #000; padding-bottom: 8pt; margin-bottom: 14pt; font-family: Georgia, serif; } .pa-print-header h1 { font-size: 18pt; margin: 0 0 2pt; font-weight: 700; } .pa-print-header p { font-size: 10pt; margin: 0; color: #333 !important; font-style: italic; } /* Print footer with full attribution + the date the printout was made. Useful for the pharmacist or physician reading it later. */ .pa-print-footer { display: block !important; border-top: 1px solid #000; padding-top: 6pt; margin-top: 16pt; font-size: 9pt; color: #333 !important; font-family: Georgia, serif; line-height: 1.4; } .pa-print-footer strong { color: #000 !important; } } /* Outside @media print, the print-only header/footer are removed from flow entirely so they never appear on screen. */ .pa-print-header, .pa-print-footer { display: none; } body { font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.5em; } h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); } h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); } h3 { font-size: 1.2rem; } a { color: var(--walnut); } a:hover { color: var(--orange); } .container { max-width: var(--content); margin: 0 auto; padding: 0 1.5rem; } /* PORTAL BAR — communicates the three-portal architecture without metaphor */ .portal-bar { background: var(--ink); color: #d8d3cb; border-bottom: 1px solid rgba(255,255,255,0.06); } .portal-bar-inner { max-width: var(--content); margin: 0 auto; padding: 0.55rem 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem 0.4rem; align-items: center; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.02em; } .portal-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.22rem 0.75rem; border-radius: 999px; white-space: nowrap; } .portal-pill-active { background: var(--candlelight); color: var(--ink); font-weight: 600; } .portal-pill-future { color: #a8a39b; border: 1px dashed rgba(216,211,203,0.25); cursor: not-allowed; } /* Clickable portal-pill (anchor variant). Used for cross-portal navigation when a phase has gone live (e.g., Education Portal pill links to education.html from any consumer-portal page). */ a.portal-pill { color: inherit; text-decoration: none; cursor: pointer; border: 1px solid rgba(216,211,203,0.18); transition: background 0.15s, color 0.15s, border-color 0.15s; } a.portal-pill:hover { background: rgba(255,255,255,0.06); color: var(--candlelight); border-color: rgba(216,211,203,0.4); } .portal-phase { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8a857d; background: rgba(255,255,255,0.05); padding: 0.06rem 0.4rem; border-radius: 999px; } @media (max-width: 540px) { .portal-bar-inner { font-size: 0.76rem; } } /* HEADER */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; max-width: var(--content); margin: 0 auto; } .brand { display: flex; flex-direction: column; line-height: 1.1; } .brand-mark { font-family: var(--serif); font-weight: 700; font-size: 1.4rem; color: var(--ink); } .brand-tag { font-size: 0.78rem; color: var(--muted); font-style: italic; margin-top: 2px; } .site-nav a { text-decoration: none; font-size: 0.92rem; margin-left: 1.25rem; color: var(--ink); } .site-nav a:hover { color: var(--orange); } /* HERO */ .hero { background: radial-gradient(ellipse at 80% 50%, rgba(244,214,138,0.35), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg-warm-soft)); padding: 3rem 1.5rem 4rem; } .hero-inner { max-width: var(--content); margin: 0 auto; display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 2.5rem; align-items: center; } @media (max-width: 760px) { .hero-inner { grid-template-columns: 1fr; } } /* Text-only hero variant: no character column, text spans full width, centered with comfortable measure. Used on the homepage now that Margaret lives in the chat section just below. */ .hero-inner-text-only { grid-template-columns: 1fr; text-align: center; max-width: 50rem; } .hero-inner-text-only .lede { margin-left: auto; margin-right: auto; } /* Old homepage hero character CSS removed. The hero illustration was pulled when Margaret got her own chat section, but the .char-open and .char-closed class selectors lingered. They collided with the body.char-open class character.js adds when a popup opens, so the whole page was running a 6s opacity-blink animation while any modal was visible — the "full-screen flash every 6 seconds" Terry saw on Henry's vitamin cards. Dropping the dead rules entirely. */ .hero-copy h1 { margin-bottom: 1rem; /* Fraunces' lowercase "f" has a swashy descender by design that read as wobbly at hero size. Lora is a clean transitional serif with a normal vertical-descender "f" — keeps the page voice without the warp. */ font-family: "Lora", Georgia, serif; font-optical-sizing: auto; font-variation-settings: normal; } .lede { font-size: 1.08rem; color: var(--ink); max-width: 38rem; } .cta { display: inline-block; margin-top: 1.4rem; padding: 0.85rem 1.4rem; background: var(--ink); color: var(--white); text-decoration: none; border-radius: 999px; font-weight: 500; font-size: 0.95rem; transition: background 0.2s; } .cta:hover { background: var(--orange); color: var(--white); } /* WILD FORAGING — visual-first: seasonal compass + US region map + cards */ .wild-foraging { padding: 4rem 0; } .wf-controls { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 1.6rem; align-items: center; margin: 1.6rem 0 1.4rem; } @media (max-width: 820px) { .wf-controls { grid-template-columns: 1fr; } } .wf-control { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .wf-control-heading { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0; } .wf-season-wheel { width: 100%; max-width: 220px; height: auto; cursor: pointer; } .wf-season-sector { transition: opacity 0.15s, stroke 0.15s; stroke: white; stroke-width: 2; opacity: 0.55; } .wf-season-sector:hover { opacity: 0.85; } .wf-season-sector.active { opacity: 1; stroke: var(--ink); stroke-width: 3; } .wf-season-text { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--ink); pointer-events: none; } .wf-map { width: 100%; max-width: 440px; height: auto; cursor: pointer; } .wf-region { transition: fill 0.15s, stroke 0.15s; stroke: white; stroke-width: 2; } .wf-region:hover { fill: var(--candlelight); } .wf-region.active { fill: var(--amber); stroke: var(--ink); stroke-width: 3; } .wf-region-text { font-family: var(--sans); font-size: 10px; font-weight: 600; fill: var(--ink); pointer-events: none; } .wf-active-line { font-size: 0.95rem; color: var(--ink); margin: 0.4rem 0 0.4rem; } .wf-active-line strong { color: var(--walnut); } .wf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 0.8rem; } .wf-card { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--green); border-radius: var(--radius); padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; } .wf-card-mushroom { border-left-color: var(--amber); } /* Optional Wikipedia photo at the top of the card. If the image errors, the onerror handler removes it and adds .wf-card-no-photo (no visible change needed, the card falls back to its emoji-headed layout). */ .wf-card-photo { width: calc(100% + 2.2rem); margin: -1rem -1.1rem 0.5rem; height: 160px; object-fit: cover; display: block; background: #f3ede4; } .wf-card-head { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .wf-card-emoji { font-size: 2.4rem; line-height: 1; } .wf-card-name { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin: 0; color: var(--ink); } .wf-card-latin { font-family: var(--serif); font-size: 0.85rem; color: var(--muted); margin: 0; } .wf-card-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; } .wf-card-season { font-family: var(--sans); font-size: 0.72rem; background: rgba(74,138,58,0.1); color: var(--green); padding: 0.15rem 0.55rem; border-radius: 999px; } .wf-card-region { font-family: var(--sans); font-size: 0.72rem; background: rgba(107,79,58,0.1); color: var(--walnut); padding: 0.15rem 0.55rem; border-radius: 999px; } .wf-card-eat, .wf-card-id { font-size: 0.88rem; color: var(--ink); margin: 0; line-height: 1.5; } .wf-card-caution { padding: 0.5rem 0.7rem; background: rgba(181,74,44,0.07); border-left: 3px solid var(--red); border-radius: 4px; margin: 0.2rem 0; } .wf-card-caution-label { display: block; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--red); margin-bottom: 0.2rem; } .wf-card-caution p { margin: 0; font-size: 0.85rem; color: var(--ink); line-height: 1.5; } /* TRENDING TREATMENTS — cards with real-vs-hype sections */ .trending-treatments { padding: 4rem 0; } .tt-name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 0.1rem 0 0; line-height: 1.25; } .tt-aka { font-family: var(--serif); font-size: 0.85rem; color: var(--muted); margin: 0 0 0.3rem; } .tt-one-liner { font-size: 0.95rem; color: var(--ink); margin: 0.3rem 0 0.5rem; } .tt-section { padding: 0.55rem 0.8rem; border-radius: 6px; border-left: 4px solid var(--border); margin: 0.3rem 0; } .tt-section p { margin: 0; font-size: 0.88rem; color: var(--ink); line-height: 1.5; } .tt-section-label { display: block; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.2rem; } .tt-real { border-left-color: var(--green); background: rgba(74,138,58,0.05); } .tt-real .tt-section-label { color: var(--green); } .tt-hype { border-left-color: var(--amber); background: rgba(200,134,44,0.06); } .tt-hype .tt-section-label { color: var(--amber); } .tt-benefits { border-left-color: var(--walnut); background: rgba(107,79,58,0.04); } .tt-benefits .tt-section-label { color: var(--walnut); } .tt-risks { border-left-color: var(--red); background: rgba(181,74,44,0.06); } .tt-risks .tt-section-label { color: var(--red); } /* Trending-treatment tile-collapse: emoji + name + verdict, click to expand */ .tt-card { padding: 0; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .tt-card:hover { box-shadow: var(--shadow); } .tt-card.expanded { grid-column: 1 / -1; } @media (min-width: 720px) { .tt-card.expanded { grid-column: span 2; } } .tt-tile { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.4rem 1rem 1.2rem; width: 100%; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: center; color: var(--ink); } .tt-tile-emoji { font-size: 3.4rem; line-height: 1; display: block; } .tt-tile-name { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; margin: 0.3rem 0 0.05rem; line-height: 1.25; } .tt-tile-aka { font-family: var(--serif); font-size: 0.78rem; color: var(--muted); margin: 0; font-style: italic; } .tt-tile-verdict { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--sans); font-size: 0.78rem; color: var(--ink); margin-top: 0.35rem; } .tt-tile-hint { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); font-style: italic; margin-top: 0.3rem; } .tt-card.expanded .tt-tile-hint { display: none; } .tt-details { padding: 0 1.3rem 1.3rem; border-top: 1px solid var(--border); animation: fadeIn 0.3s ease both; display: flex; flex-direction: column; gap: 0.55rem; } .tt-details > :first-child { margin-top: 0.8rem; } /* DANGEROUS LOOK-ALIKES — paired deadly vs safe comparison cards */ .dangerous-lookalikes { padding: 4rem 0; } .dl-warning { margin: 1.4rem 0 2rem; padding: 1rem 1.2rem; background: rgba(181,74,44,0.08); border: 1px solid rgba(181,74,44,0.3); border-left: 5px solid var(--red); border-radius: var(--radius); font-size: 0.95rem; color: var(--ink); line-height: 1.5; } .dl-warning strong { color: var(--red); } .dl-grid { display: flex; flex-direction: column; gap: 1.4rem; } .dl-pair { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.4rem; } .dl-pair-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; margin-bottom: 1rem; } @media (max-width: 720px) { .dl-pair-row { grid-template-columns: 1fr; } .dl-vs { display: none; } } .dl-side { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem 0.9rem 1rem; border-radius: 8px; } .dl-side-dangerous { background: rgba(181,74,44,0.06); border: 1px solid rgba(181,74,44,0.3); border-top: 4px solid var(--red); } .dl-side-safe { background: rgba(74,138,58,0.06); border: 1px solid rgba(74,138,58,0.3); border-top: 4px solid var(--green); } .dl-side-tag { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.4rem; } .dl-side-dangerous .dl-side-tag { color: var(--red); } .dl-side-safe .dl-side-tag { color: var(--green); } .dl-side-emoji { font-size: 2.6rem; line-height: 1; margin-bottom: 0.3rem; } /* Side photo replaces emoji when present. The side-by-side IS the visual, so we render the photos prominently. Emoji fallback shows ONLY if the image errors out (onerror adds .dl-side-no-photo on the .dl-side). Photo first; the static emoji span sits at display:none unless the image fails. */ .dl-side-photo { width: 100%; max-width: 280px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: 0.6rem; background: #f3ede4; box-shadow: 0 2px 8px rgba(0,0,0,0.12); } .dl-side-emoji-fallback { display: none; } .dl-side.dl-side-no-photo .dl-side-emoji-fallback { display: block; } /* Bigger side cards so the photo has room to breathe */ .dl-side { padding: 1.2rem 1rem 1.1rem; } .dl-side-name { margin-top: 0.2rem; } .dl-side-name { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; margin: 0 0 0.15rem; color: var(--ink); } .dl-side-latin { font-family: var(--serif); font-size: 0.82rem; color: var(--muted); margin: 0 0 0.5rem; } .dl-side-toxicity { display: inline-block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; color: var(--white); background: var(--red); padding: 0.18rem 0.55rem; border-radius: 999px; margin-bottom: 0.5rem; } .dl-side-kind { display: inline-block; font-size: 0.78rem; color: var(--green); font-style: italic; margin-bottom: 0.4rem; } .dl-side-note { font-size: 0.85rem; color: var(--ink); margin: 0; line-height: 1.5; text-align: left; } .dl-vs { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--muted); align-self: center; } .dl-expand { display: block; width: 100%; margin: 0.6rem 0 0.2rem; padding: 0.55rem 0.8rem; background: var(--white); border: 1px dashed var(--border); border-radius: 8px; font-family: var(--sans); font-size: 0.82rem; color: var(--walnut); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .dl-expand:hover { border-color: var(--amber); background: rgba(200,134,44,0.05); } .dl-details { animation: fadeIn 0.3s ease both; display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.4rem; } /* Defensive: the [hidden] attribute means display: none. Our flex/grid rules above the cascade override that, so make sure hidden wins. */ .dl-details[hidden], .plant-details[hidden], .tt-details[hidden], .ing-details[hidden], .gyb-card-details[hidden], .ws-card-details[hidden] { display: none !important; } .dl-side-note-mechanism { background: rgba(181,74,44,0.06); border-left: 4px solid var(--red); padding: 0.6rem 0.9rem; border-radius: 6px; font-size: 0.88rem; color: var(--ink); margin: 0; } .dl-tell, .dl-rule { padding: 0.7rem 0.9rem; border-radius: 8px; margin-bottom: 0.6rem; } .dl-tell { background: rgba(200,134,44,0.08); border-left: 4px solid var(--amber); } .dl-rule { background: rgba(107,79,58,0.06); border-left: 4px solid var(--walnut); } .dl-tell-label, .dl-rule-label { display: block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.3rem; } .dl-tell-label { color: var(--amber); } .dl-rule-label { color: var(--walnut); } .dl-tell p, .dl-rule p { margin: 0; font-size: 0.92rem; color: var(--ink); line-height: 1.5; } /* WEED OR MEDICINAL? — quiz on the medicinal plants page */ .weed-or-plant { padding: 4rem 0; background: linear-gradient(180deg, transparent, rgba(74,138,58,0.04)); } .wp-board { margin-top: 1.6rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.8rem; max-width: 44rem; } .wp-meta { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.03em; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .wp-score-line strong { color: var(--ink); font-weight: 600; } .wp-prompt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; } .wp-prompt-med { color: var(--green); font-weight: 600; } .wp-prompt-weed { color: var(--walnut); font-weight: 600; } .wp-plant-card { text-align: center; padding: 1.6rem 1rem 1.4rem; background: rgba(74,138,58,0.05); border: 1px solid rgba(74,138,58,0.18); border-radius: var(--radius); margin-bottom: 1.2rem; } .wp-emoji { font-size: 3.6rem; line-height: 1; display: block; margin-bottom: 0.5rem; } .wp-name { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin: 0 0 0.3rem; color: var(--ink); } .wp-latin { font-family: var(--serif); font-size: 0.95rem; color: var(--muted); margin: 0; } .wp-answers { display: flex; gap: 0.8rem; margin-bottom: 1.2rem; } .wp-btn { flex: 1; font-family: var(--sans); font-size: 1rem; font-weight: 500; padding: 0.85rem 1rem; border: 1px solid var(--border); background: var(--white); color: var(--ink); border-radius: var(--radius); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .wp-btn:hover:not(:disabled) { transform: translateY(-1px); } .wp-btn-medicinal:hover:not(:disabled) { border-color: var(--green); } .wp-btn-weed:hover:not(:disabled) { border-color: var(--walnut); } .wp-btn:disabled { cursor: default; opacity: 0.78; } .wp-btn.correct { background: var(--green); border-color: var(--green); color: var(--white); opacity: 1; } .wp-btn.incorrect { background: var(--red); border-color: var(--red); color: var(--white); opacity: 1; } .wp-reveal { margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--border); animation: fadeIn 0.3s ease both; } .wp-reveal-meta { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.4rem; font-weight: 600; } .wp-reveal-meta.right { color: var(--green); } .wp-reveal-meta.wrong { color: var(--red); } .wp-badge { display: inline-block; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; padding: 0.3rem 0.7rem; border-radius: 999px; margin-bottom: 0.6rem; } .wp-badge-medicinal { background: rgba(74,138,58,0.15); color: var(--green); } .wp-badge-weed { background: rgba(107,79,58,0.12); color: var(--walnut); } .wp-reveal-text { font-size: 0.97rem; color: var(--ink); margin: 0 0 0.9rem; } .wp-source { display: block; font-size: 0.88rem; text-decoration: none; color: var(--walnut); padding: 0.4rem 0; border-top: 1px solid var(--border); } .wp-source:hover { color: var(--orange); } .wp-next { margin-top: 1rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; padding: 0.7rem 1.3rem; background: var(--ink); color: var(--white); border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.15s; } .wp-next:hover { background: var(--green); } .wp-end { text-align: center; padding: 1rem 0 0.4rem; } .wp-end-title { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 0 0 0.6rem; } .wp-end-text { font-size: 1rem; color: var(--ink); margin: 0 0 1.2rem; } .wp-end-text strong { color: var(--green); font-weight: 600; } /* THROUGH THE AGES — historical timeline of medicine on the medicinal plants page */ .medical-history { padding: 4rem 0; background: linear-gradient(180deg, transparent, rgba(107,79,58,0.04)); border-top: 1px solid var(--border); } .mh-timeline { display: grid; grid-template-columns: repeat(11, 1fr); gap: 0.4rem; margin: 1.6rem 0 1.6rem; } @media (max-width: 1200px) { .mh-timeline { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 720px) { .mh-timeline { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 420px) { .mh-timeline { grid-template-columns: repeat(2, 1fr); } } .mh-marker { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.7rem 0.4rem 0.6rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; text-align: center; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .mh-marker:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--walnut); } .mh-marker.active { background: var(--walnut); color: var(--white); border-color: var(--walnut); } .mh-marker-emoji { font-size: 1.6rem; line-height: 1; } .mh-marker-label { font-family: var(--sans); font-size: 0.78rem; font-weight: 500; margin-top: 0.15rem; } .mh-marker-range { font-size: 0.66rem; letter-spacing: 0.03em; opacity: 0.75; } .mh-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.4rem; } .mh-panel-head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--border); margin-bottom: 0.9rem; } .mh-panel-emoji { font-size: 2.6rem; line-height: 1; } .mh-panel-title { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin: 0; } .mh-panel-range { font-size: 0.88rem; color: var(--muted); margin: 0; } .mh-panel-blurb { font-size: 0.98rem; color: var(--ink); margin: 0; font-style: italic; flex: 1; } .mh-image-row { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1.4rem; align-items: start; margin-bottom: 1.2rem; } @media (max-width: 720px) { .mh-image-row { grid-template-columns: 1fr; } } .mh-figure { margin: 0; padding: 0; background: var(--white); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .mh-figure-broken { display: none; } .mh-image { display: block; width: 100%; height: auto; background: #f4f1ec; } .mh-figcaption { font-size: 0.78rem; color: var(--muted); padding: 0.5rem 0.7rem; line-height: 1.45; } .mh-figcaption a { display: block; margin-top: 0.2rem; color: var(--walnut); font-weight: 500; } .mh-figcaption a:hover { color: var(--orange); } .mh-image-link { margin: 0; font-size: 0.88rem; } .mh-image-link a { color: var(--walnut); text-decoration: none; font-weight: 500; } .mh-image-link a:hover { color: var(--orange); } .mh-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1rem; } @media (max-width: 900px) { .mh-cols { grid-template-columns: 1fr; } } .mh-col { padding: 0.9rem 1rem 1rem; border-radius: 8px; border-left: 4px solid var(--border); } .mh-col-used { background: rgba(107,79,58,0.05); border-left-color: var(--walnut); } .mh-col-survived { background: rgba(74,138,58,0.06); border-left-color: var(--green); } .mh-col-wrong { background: rgba(181,74,44,0.06); border-left-color: var(--red); } .mh-col-heading { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; margin: 0 0 0.5rem; } .mh-col-used .mh-col-heading { color: var(--walnut); } .mh-col-survived .mh-col-heading { color: var(--green); } .mh-col-wrong .mh-col-heading { color: var(--red); } .mh-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; } .mh-bullet { font-size: 0.9rem; color: var(--ink); padding-left: 0.7rem; position: relative; line-height: 1.5; } .mh-bullet::before { content: "•"; position: absolute; left: 0; color: var(--muted); } /* AGES AND DOSES — item-first lookup. The user picks a treatment, the six life-stage figures light up by verdict color and show the per-stage note. */ .ages-and-doses { padding: 4rem 0; } /* Search row */ .ages-search-row { display: flex; gap: 0.5rem; margin: 1.2rem 0 0.4rem; align-items: stretch; } .ages-search-input { flex: 1 1 auto; font-family: var(--sans); font-size: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--ink); } .ages-search-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(200,134,44,0.2); } .ages-lookup-btn { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; padding: 0.7rem 1.2rem; border: 1px solid var(--ink); background: var(--ink); color: var(--white); border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ages-lookup-btn:hover { background: var(--walnut); border-color: var(--walnut); } .ages-lookup-btn:disabled { opacity: 0.5; cursor: wait; } .ages-status { margin: 0.2rem 0 0.8rem; font-family: var(--sans); font-size: 0.88rem; color: var(--muted); font-style: italic; min-height: 1.2em; } /* Quick-pick chips */ .ages-chips-wrap { margin: 0.4rem 0 1.4rem; background: var(--bg-warm-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 1rem 1rem; } .ages-chips-summary { font-family: var(--sans); font-weight: 500; color: var(--walnut); cursor: pointer; padding: 0.2rem 0; list-style: none; } .ages-chips-summary::-webkit-details-marker { display: none; } .ages-chips-summary::before { content: "▸ "; display: inline-block; transition: transform 0.15s; margin-right: 0.2rem; } .ages-chips-wrap[open] .ages-chips-summary::before { content: "▾ "; } .ages-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; } .ages-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--sans); font-size: 0.84rem; padding: 0.4rem 0.8rem; background: var(--white); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; color: var(--ink); transition: border-color 0.15s, background 0.15s, transform 0.1s; } .ages-chip:hover { border-color: var(--amber); background: rgba(200,134,44,0.06); transform: translateY(-1px); } .ages-chip-emoji { font-size: 1.05rem; line-height: 1; } /* Active-item summary header */ .ages-summary { margin: 0.6rem 0 0.8rem; } .ages-summary-empty { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); font-style: italic; margin: 0; } .ages-summary-title { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 0; display: flex; align-items: center; gap: 0.6rem; } .ages-summary-emoji { font-size: 1.8rem; line-height: 1; } .ages-summary-tagline { font-size: 0.88rem; color: var(--muted); font-style: italic; margin: 0.2rem 0 0; } /* Quick-check sentence: "I gave ___ ITEM. Can I give it to ___?" */ .ages-quick-check { margin: 0.4rem 0 1.4rem; } .ages-quick-check:empty { display: none; } .ages-qc-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; padding: 0.9rem 1rem; background: var(--bg-warm-soft); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--serif); font-size: 1.05rem; color: var(--ink); } .ages-qc-prompt { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); } .ages-qc-label { display: inline-flex; } .ages-qc-select { font-family: var(--sans); font-size: 0.92rem; padding: 0.4rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--ink); cursor: pointer; max-width: 100%; } .ages-qc-select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(200,134,44,0.2); } .ages-qc-hint { margin: 0.6rem 0 0; font-family: var(--sans); font-size: 0.88rem; color: var(--muted); font-style: italic; } .ages-qc-banner { margin-top: 0.7rem; padding: 1rem 1.2rem; border-radius: var(--radius); border-left: 6px solid var(--border); background: var(--white); border: 1px solid var(--border); } .ages-qc-banner-green { border-left-color: var(--green); background: rgba(74,138,58,0.06); } .ages-qc-banner-yellow { border-left-color: var(--yellow); background: rgba(216,168,58,0.08); } .ages-qc-banner-red { border-left-color: var(--red); background: rgba(181,74,44,0.06); } .ages-qc-banner-unknown { border-left-color: var(--ambiguous); background: rgba(120,120,120,0.06); } .ages-qc-banner-headline { display: flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.95rem; color: var(--muted); margin-bottom: 0.25rem; } .ages-qc-banner-emoji { font-size: 1.5rem; line-height: 1; } .ages-qc-banner-verdict { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.2; margin: 0.1rem 0 0.4rem; } .ages-qc-banner-green .ages-qc-banner-verdict { color: var(--green); } .ages-qc-banner-yellow .ages-qc-banner-verdict { color: #8a6a18; } .ages-qc-banner-red .ages-qc-banner-verdict { color: var(--red); } .ages-qc-banner-unknown .ages-qc-banner-verdict { color: var(--muted); } .ages-qc-banner-note { margin: 0; font-size: 0.95rem; color: var(--ink); line-height: 1.55; } .ages-qc-compare { margin-top: 0.85rem; padding-top: 0.7rem; border-top: 1px dashed var(--border); } .ages-qc-compare-label { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); margin-right: 0.4rem; } .ages-qc-compare-tag { display: inline-block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 0.15rem 0.55rem; border-radius: 999px; } .ages-qc-compare-tag-green { background: rgba(74,138,58,0.14); color: var(--green); } .ages-qc-compare-tag-yellow { background: rgba(216,168,58,0.18); color: #8a6a18; } .ages-qc-compare-tag-red { background: rgba(181,74,44,0.14); color: var(--red); } .ages-qc-compare-tag-unknown { background: rgba(120,120,120,0.15); color: var(--muted); } .ages-qc-compare-note { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--ink); line-height: 1.5; } .ages-overview-title { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0.8rem 0 0.4rem; } /* The six lit-up figures with notes directly underneath */ .ages-figures-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8rem; margin: 1.2rem 0 1.2rem; } @media (max-width: 1080px) { .ages-figures-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .ages-figures-grid { grid-template-columns: repeat(2, 1fr); } } .ages-figure { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-top-width: 5px; border-top-color: var(--border); border-radius: var(--radius); padding: 0.9rem 0.8rem 0.9rem; transition: box-shadow 0.2s, transform 0.2s, opacity 0.2s; opacity: 0.55; filter: grayscale(0.3); } .ages-figure.lit { opacity: 1; filter: none; box-shadow: var(--shadow); } .ages-figure-green { border-top-color: var(--green); } .ages-figure-yellow { border-top-color: var(--yellow); } .ages-figure-red { border-top-color: var(--red); } .ages-figure-unknown { border-top-color: var(--ambiguous); } .ages-figure-neutral { border-top-color: var(--border); } .ages-figure-top { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; position: relative; } .ages-figure-emoji { font-size: 2.4rem; line-height: 1; } /* Subtle size progression suggests growing through the stages */ .ages-figure:nth-child(1) .ages-figure-emoji { font-size: 1.8rem; } .ages-figure:nth-child(2) .ages-figure-emoji { font-size: 2.05rem; } .ages-figure:nth-child(3) .ages-figure-emoji { font-size: 2.25rem; } .ages-figure:nth-child(4) .ages-figure-emoji { font-size: 2.45rem; } .ages-figure:nth-child(5) .ages-figure-emoji { font-size: 2.5rem; } .ages-figure:nth-child(6) .ages-figure-emoji { font-size: 2.5rem; } .ages-figure-label { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; margin-top: 0.2rem; color: var(--ink); } .ages-figure-range { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--muted); } .ages-figure-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--white); } .ages-figure-dot-green { background: var(--green); } .ages-figure-dot-yellow { background: var(--yellow); } .ages-figure-dot-red { background: var(--red); } .ages-figure-dot-unknown { background: var(--ambiguous); } .ages-figure-note { margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px dashed var(--border); font-size: 0.82rem; line-height: 1.45; color: var(--ink); } .ages-figure-note p { margin: 0.3rem 0 0; } .ages-figure-note-empty p { color: var(--muted); font-style: italic; } .ages-figure-verdict { display: inline-block; font-family: var(--sans); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.15rem 0.5rem; border-radius: 999px; } .ages-figure-verdict-green { background: rgba(74,138,58,0.14); color: var(--green); } .ages-figure-verdict-yellow { background: rgba(216,168,58,0.18); color: #8a6a18; } .ages-figure-verdict-red { background: rgba(181,74,44,0.14); color: var(--red); } .ages-figure-verdict-unknown { background: rgba(120,120,120,0.15); color: var(--muted); } .ages-sources { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; } .ages-sources:empty { display: none; } /* GROWING PLANT — homepage centerpiece. Plant grows on a 60s loop; facts rotate every 12s; references accumulate as facts cycle. */ .growing-plant { padding: 3rem 0; background: radial-gradient(ellipse at 20% 30%, rgba(95,184,79,0.08), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg-warm-soft)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .gp-stage { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 2rem; align-items: center; } @media (max-width: 720px) { .gp-stage { grid-template-columns: 1fr; } } .gp-plant-col { display: flex; justify-content: center; } .gp-svg { width: 100%; max-width: 220px; height: auto; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08)); } .gp-label { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; display: block; margin-bottom: 0.5rem; } .gp-fact { font-family: var(--serif); font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.5; color: var(--ink); margin: 0 0 0.7rem; min-height: 6rem; transition: opacity 0.35s ease; } .gp-cite { font-size: 0.85rem; color: var(--muted); margin: 0; transition: opacity 0.35s ease; } .gp-cite a { color: var(--walnut); text-decoration: none; } .gp-cite a:hover { color: var(--orange); } .gp-cite-link { color: var(--amber); text-decoration: none; font-weight: 600; font-family: var(--sans); font-size: 0.85em; vertical-align: super; padding: 0 0.15em; } .gp-cite-link:hover { color: var(--orange); } .gp-refs-wrap { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); } .gp-refs-heading { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem; font-weight: 600; } .gp-refs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; } .gp-ref-item { color: var(--ink); scroll-margin-top: 80px; } .gp-ref-item:target { background: var(--candlelight); border-radius: 4px; padding: 0.1rem 0.3rem; margin: 0 -0.3rem; } .gp-ref-num { font-family: var(--sans); font-weight: 600; color: var(--walnut); margin-right: 0.3rem; font-variant-numeric: tabular-nums; } .gp-ref-item a { color: var(--walnut); text-decoration: none; } .gp-ref-item a:hover { color: var(--orange); } /* CHECK THIS — homepage CTA, immediate Stoplight entry for the highest-stakes claims */ .check-this { padding: 3rem 0 3.4rem; background: radial-gradient(ellipse at 50% 0%, rgba(244,214,138,0.25), transparent 60%), linear-gradient(180deg, var(--bg-warm-soft), var(--bg)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .check-this-headline { font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; margin: 0 0 0.7rem; max-width: 44rem; } .check-this-lede { font-size: 1rem; color: var(--ink); max-width: 44rem; margin: 0 0 1.6rem; } /* Vintage TV with a charlatan inside, sits above the example claim cards. Screen flickers, mouth opens and closes (talking), bottle shines, and small "$$$", "MIRACLE!", "guaranteed!", "ONLY $5!" callouts float up. */ .snake-tv-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 0.8rem 0 1.6rem; } .snake-tv { width: 100%; max-width: 480px; height: auto; display: block; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.18)); } /* Vimeo iframe wrapper: keeps a 16:9 aspect at any width with a soft walnut frame so it sits in the page like a vintage TV. */ .snake-tv-video { width: 100%; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,0.18); background: #1a1208; } .snake-tv-video iframe { width: 100%; height: 100%; border: 0; display: block; } .snake-tv-caption { font-family: var(--serif); font-size: 0.92rem; color: var(--walnut); font-style: italic; text-align: center; margin: 0; max-width: 28rem; } /* Talking mouth: opens and closes on a quick cycle */ @keyframes tvMouth { 0%, 30%, 60%, 100% { transform: scaleY(0.4); } 10%, 45% { transform: scaleY(2.2); } 20%, 55% { transform: scaleY(1.1); } } .tv-mouth { transform-origin: 210px 148px; transform-box: fill-box; animation: tvMouth 1.4s ease-in-out infinite; } /* Charlatan sways slightly as he sells */ @keyframes tvSway { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-3px) rotate(-1.2deg); } } .tv-charlatan { transform-origin: 210px 240px; transform-box: fill-box; animation: tvSway 3.2s ease-in-out infinite; } /* Bottle bobs and the shine sweeps across it */ @keyframes tvBottleBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(3deg); } } .tv-bottle { transform-origin: 281px 95px; transform-box: fill-box; animation: tvBottleBob 2.6s ease-in-out infinite; } @keyframes tvBottleShine { 0%, 100% { transform: translateX(0); opacity: 0.7; } 50% { transform: translateX(14px); opacity: 0.3; } } .tv-bottle-shine { animation: tvBottleShine 2.6s ease-in-out infinite; } /* Screen flicker, occasional jolts */ @keyframes tvFlicker { 0%, 88%, 92%, 100% { opacity: 0; } 90% { opacity: 0.18; } 91% { opacity: 0.05; } } .tv-flicker { animation: tvFlicker 4.5s linear infinite; } /* Spotlight pulses gently like a stage light */ @keyframes tvSpotlight { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.45; } } .tv-spotlight { animation: tvSpotlight 3.6s ease-in-out infinite; } /* Scanlines drift down */ @keyframes tvScanlinesDrift { 0% { transform: translateY(0); } 100% { transform: translateY(20px); } } .tv-scanlines { animation: tvScanlinesDrift 2s linear infinite; opacity: 0.5; } /* Floating callouts: each one rises and fades on its own offset */ @keyframes tvFxFloat { 0% { opacity: 0; transform: translateY(10px) scale(0.7); } 20% { opacity: 1; transform: translateY(0) scale(1.1); } 60% { opacity: 1; transform: translateY(-8px) scale(1); } 100% { opacity: 0; transform: translateY(-22px) scale(0.85); } } .tv-fx text { transform-origin: center; transform-box: fill-box; animation: tvFxFloat 3.2s ease-in-out infinite; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); } .tv-fx-1 { animation-delay: 0s !important; } .tv-fx-2 { animation-delay: 0.8s !important; } .tv-fx-3 { animation-delay: 1.6s !important; } .tv-fx-4 { animation-delay: 2.4s !important; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .tv-mouth, .tv-charlatan, .tv-bottle, .tv-bottle-shine, .tv-flicker, .tv-spotlight, .tv-scanlines, .tv-fx text { animation: none; } } .check-this-examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.4rem; } @media (max-width: 820px) { .check-this-examples { grid-template-columns: 1fr; } } .check-this-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.2rem 1.2rem; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--red); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .check-this-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-left-color: var(--ink); } .check-this-claim { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; line-height: 1.25; color: var(--ink); } .check-this-source { font-family: var(--sans); font-size: 0.85rem; color: var(--walnut); font-weight: 500; } .check-this-card:hover .check-this-source { color: var(--orange); } .check-this-cta { display: inline-block; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; padding: 0.75rem 1.4rem; background: var(--ink); color: var(--white); text-decoration: none; border-radius: 999px; transition: background 0.15s; } .check-this-cta:hover { background: var(--orange); color: var(--white); } /* MODULES */ .modules { padding: 4rem 0; } .section-title { display: flex; align-items: center; gap: 0.6rem; } .badge { font-family: var(--sans); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: var(--white); border: 1px solid var(--border); padding: 0.25rem 0.55rem; border-radius: 999px; } .module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.5rem; } @media (max-width: 960px) { .module-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .module-grid { grid-template-columns: 1fr; } } .module-card { display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.3rem 1.5rem; text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; position: relative; } .module-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--amber); } .module-num { font-family: var(--serif); font-size: 0.85rem; color: var(--amber); letter-spacing: 0.1em; } .module-card h3 { margin: 0.4rem 0 0.5rem; } .module-card p { margin: 0; color: var(--muted); font-size: 0.94rem; } /* STOPLIGHT */ .stoplight-demo { padding: 3rem 0; background: linear-gradient(180deg, transparent, rgba(216,220,224,0.4)); } .muted { color: var(--muted); max-width: 50rem; } .stoplight-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .state { display: flex; flex-direction: column; gap: 0.4rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.2rem 1.4rem; position: relative; } .state strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; } .state-desc { color: var(--muted); font-size: 0.92rem; } .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 4px rgba(0,0,0,0.04); } .state-green .dot { background: var(--green); box-shadow: 0 0 18px rgba(74,138,58,0.55); } .state-yellow .dot { background: var(--yellow); } .state-ambiguous .dot { background: var(--ambiguous); } .state-red .dot { background: var(--red); } .info-btn { position: absolute; top: 0.8rem; right: 0.8rem; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--walnut); font-weight: 600; cursor: pointer; font-family: var(--sans); line-height: 1; } .info-btn:hover { background: var(--candlelight); color: var(--ink); } /* STOPLIGHT FORM + LIVE */ .sl-form { margin-top: 1.6rem; max-width: 44rem; } .sl-label { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.45rem; } .sl-input-row { display: flex; gap: 0.6rem; } .sl-input { flex: 1; font-family: var(--sans); font-size: 1rem; padding: 0.85rem 1rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); transition: border-color 0.15s; } .sl-input:focus { outline: none; border-color: var(--amber); } .sl-submit { font-family: var(--sans); font-size: 0.95rem; font-weight: 500; padding: 0 1.3rem; background: var(--ink); color: var(--white); border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.15s; } .sl-submit:hover:not(:disabled) { background: var(--orange); } .sl-submit:disabled { opacity: 0.55; cursor: wait; } .sl-examples { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--muted); } .sl-example { background: transparent; border: 1px dashed var(--border); color: var(--walnut); font-size: 0.85rem; padding: 0.25rem 0.65rem; border-radius: 999px; margin: 0 0.25rem 0.25rem 0; cursor: pointer; } .sl-example:hover { background: var(--white); border-style: solid; border-color: var(--amber); color: var(--ink); } .sl-result { margin-top: 1.8rem; background: transparent; border: none; padding: 0; } /* Dedicated Stoplight page: streetlight floats centered, no card behind it, sits above the form so it's the first thing visible even before checking. */ .stoplight-page .sl-streetlight-wrap { margin: 1.4rem auto 2rem; } .stoplight-page .sl-form { margin: 0 auto 1.6rem; max-width: 44rem; } .stoplight-page .sl-result { text-align: left; } .stoplight-page .sl-verdict { background: transparent; } .stoplight-page .sl-verdict-text, .stoplight-page .sl-sources, .stoplight-page .sl-tiebreak { background: transparent; } .stoplight-page .sl-legend { background: transparent; } /* Claim-set tabs + chip rows. Each tab swaps which 20 chips show below. */ .sl-examples { display: flex; flex-direction: column; gap: 0.7rem; margin: 1rem 0 0; font-size: 0.85rem; color: var(--muted); } .sl-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } .sl-tab { font-family: var(--sans); font-size: 0.9rem; font-weight: 500; padding: 0.45rem 1rem; background: transparent; color: var(--ink); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sl-tab:hover { border-color: var(--amber); } .sl-tab.active { background: var(--ink); color: var(--white); border-color: var(--ink); } .sl-set-blurb { font-size: 0.88rem; color: var(--muted); font-style: italic; margin: 0; } .sl-chip-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .sl-examples-lead { margin-right: 0.2rem; } .sl-status { font-size: 0.95rem; color: var(--muted); display: flex; align-items: center; gap: 0.6rem; min-height: 1.5rem; } .sl-status .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--amber); animation: pulseDot 1.2s ease-in-out infinite; } @keyframes pulseDot { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } } /* Streetlight visual — real traffic-signal housing with three hooded lights. Recognition before reading: one light glows brightly; the other two stay dark. */ .sl-streetlight-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 1.4rem 0 1.6rem; } .sl-streetlight { width: 130px; height: auto; display: block; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.22)); } .sl-light { transition: fill 0.25s, filter 0.25s; } /* Off state is already painted in the SVG via the muted fill. Active state swaps to a bright fill, applies a colored glow, and pulses softly. */ .sl-light.active[data-state="red"] { fill: #ea4a2e; filter: drop-shadow(0 0 14px rgba(234,74,46,0.95)); animation: lightPulse 2.2s ease-in-out infinite; } .sl-light.active[data-state="yellow"] { fill: #f5c842; filter: drop-shadow(0 0 14px rgba(245,200,66,0.95)); animation: lightPulse 2.2s ease-in-out infinite; } .sl-light.active[data-state="green"] { fill: #5fb84f; filter: drop-shadow(0 0 14px rgba(95,184,79,0.95)); animation: lightPulse 2.2s ease-in-out infinite; } @keyframes lightPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.86; } } .sl-light-ambig-note { font-size: 0.88rem; color: var(--muted); font-style: italic; margin: 0; max-width: 22rem; text-align: center; } .sl-verdict { animation: fadeIn 0.4s ease both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .sl-verdict-label { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 0.5rem; } .sl-verdict-label.green { color: var(--green); } .sl-verdict-label.yellow { color: var(--yellow); } .sl-verdict-label.ambiguous { color: var(--ambiguous); } .sl-verdict-label.red { color: var(--red); } .sl-verdict-text { font-size: 1rem; color: var(--ink); margin: 0 0 1rem; } .sl-tiebreak { font-size: 0.85rem; color: var(--muted); font-style: italic; padding: 0.5rem 0.8rem; background: var(--bg); border-left: 3px solid var(--amber); margin-bottom: 1rem; } .sl-sources { border-top: 1px solid var(--border); padding-top: 1rem; } .sl-sources h4 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; font-weight: 500; } .sl-source-item { display: block; font-size: 0.92rem; color: var(--walnut); text-decoration: none; padding: 0.4rem 0; border-bottom: 1px solid var(--border); } .sl-source-item:last-child { border-bottom: none; } .sl-source-item:hover { color: var(--orange); } .sl-source-meta { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; } /* Group label rendered above each source-type cluster (Primary literature, Clinical trials, FDA drug label, NIH supplement label). Reads like a small inline subhead, not a heavy heading. */ .sl-source-group-label { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0.9rem 0 0.3rem; padding-top: 0.5rem; border-top: 1px dashed var(--border); } .sl-source-group-label:first-of-type { margin-top: 0.4rem; padding-top: 0; border-top: none; } .sl-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem 1.2rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--border); font-size: 0.88rem; color: var(--muted); } .legend-item { display: flex; align-items: center; gap: 0.55rem; position: relative; } .legend-item .info-btn { position: static; width: 22px; height: 22px; font-size: 0.85rem; } .dot-green { background: var(--green); } .dot-yellow { background: var(--yellow); } .dot-ambig { background: var(--ambiguous); } .dot-red { background: var(--red); } /* FOLK REMEDIES, CHECKED */ .folk-remedies { padding: 4rem 0; } .folk-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0 0.4rem; } .folk-filter { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.88rem; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.8rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .folk-filter:hover { border-color: var(--amber); } .folk-filter.active { background: var(--ink); color: var(--white); border-color: var(--ink); } .folk-filter-count { font-size: 0.78rem; opacity: 0.7; font-variant-numeric: tabular-nums; } .folk-filter-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .folk-filter-dot-green { background: var(--green); } .folk-filter-dot-yellow { background: var(--yellow); } .folk-filter-dot-ambiguous { background: var(--ambiguous); } .folk-filter-dot-red { background: var(--red); } /* Cultural-tradition filter chips and in-card pills (P2). Same pill geometry as the verdict filters so the visitor reads them as a second pivot, not a different kind of control. The color-dot on the left of each chip uses the tradition's own color. */ .folk-traditions-explainer { font-family: var(--serif); font-size: 0.92rem; color: var(--ink); background: #fbf8f1; border: 1px solid #eccd7a; border-left: 3px solid #b8923a; border-radius: 6px; padding: 0.7rem 1rem; margin: 1.2rem 0 0.7rem; line-height: 1.55; } .folk-traditions-explainer strong { color: #2a3540; font-family: var(--sans); font-weight: 600; } .folk-traditions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 0.6rem; } .folk-trad-filter { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.85rem; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .folk-trad-filter:hover { border-color: var(--amber); } .folk-trad-filter.active { background: var(--ink); color: var(--white); border-color: var(--ink); } .folk-trad-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* Tradition pills shown inline on each card. Smaller than the filter chips, color comes from the tradition's own palette via inline style. Clickable: a tap filters the page. */ .folk-traditions-pills { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.2rem 0 0.5rem; } .folk-trad-pill { display: inline-block; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.15rem 0.55rem; border: 1px solid; border-radius: 999px; cursor: pointer; transition: filter 0.15s; } .folk-trad-pill:hover { filter: brightness(0.95); } .folk-count-line { font-size: 0.82rem; color: var(--muted); margin: 0.3rem 0 1.2rem; } .folk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .folk-card { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; } .folk-card-green { border-left-color: var(--green); } .folk-card-yellow { border-left-color: var(--yellow); } .folk-card-ambiguous{ border-left-color: var(--ambiguous); } .folk-card-red { border-left-color: var(--red); } .folk-verdict { display: flex; align-items: center; gap: 0.5rem; font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .folk-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .folk-dot-green { background: var(--green); } .folk-dot-yellow { background: var(--yellow); } .folk-dot-ambiguous { background: var(--ambiguous); } .folk-dot-red { background: var(--red); } .folk-verdict-label { font-weight: 500; } .folk-claim { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 0.1rem 0 0; line-height: 1.25; } .folk-qualifier { font-size: 0.82rem; color: var(--muted); font-style: italic; margin: 0; } .folk-explanation { font-size: 0.95rem; color: var(--ink); margin: 0.2rem 0 0.4rem; } .folk-explanation.is-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .folk-explanation-more { background: none; border: 0; padding: 0; margin: 0 0 0.4rem; font-family: var(--sans); font-size: 0.85rem; color: var(--accent, #b8923a); cursor: pointer; font-weight: 600; align-self: flex-start; } .folk-explanation-more:hover { text-decoration: underline; } .folk-source, .folk-recipe { font-size: 0.85rem; text-decoration: none; color: var(--walnut); padding-top: 0.45rem; border-top: 1px solid var(--border); } .folk-source:hover, .folk-recipe:hover { color: var(--orange); } .folk-recipe { color: var(--amber); font-weight: 500; } .folk-recipe:hover { color: var(--orange); } /* Family-tradition story block on folk-remedy cards. Sits between the qualifier and the clinical explanation. Visually distinct from the factual content so visitors know they're hearing a story, not a fact. */ .folk-story { background: linear-gradient(to bottom right, #fbf6ec, #f6efe0); border: 1px solid #e5dac1; border-radius: 6px; padding: 0.85rem 0.95rem 0.9rem; margin: 0.4rem 0 0.5rem; display: flex; flex-direction: column; gap: 0.55rem; } .folk-story-head { display: flex; align-items: center; gap: 0.65rem; } .folk-story-portrait { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--amber); flex-shrink: 0; } .folk-story-by { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .folk-story-byline { font-family: 'Inter', sans-serif; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); font-weight: 700; } .folk-story-title { font-family: 'Fraunces', 'Lora', serif; font-size: 0.98rem; line-height: 1.3; color: var(--ink); font-style: italic; } .folk-story-text { font-family: 'Lora', serif; font-size: 0.95rem; line-height: 1.55; color: #3a2e1a; margin: 0; } .folk-story-btn { align-self: flex-start; background: var(--amber); color: #fff; border: none; padding: 0.4rem 0.85rem; border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s; } .folk-story-btn:hover { background: #a07f1f; } .folk-story-btn-playing { background: #6a4818; } .folk-story-btn-playing:hover { background: #543612; } /* BODY MAP — upload a label, light up where ingredients act */ .body-map { padding: 4rem 0; } .bm-stage { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 2rem; margin-top: 1.6rem; align-items: start; } @media (max-width: 780px) { .bm-stage { grid-template-columns: 1fr; } } .bm-body-col { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .bm-gender-toggle { display: inline-flex; background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem; } .bm-gender-btn { font-family: var(--sans); font-size: 0.85rem; padding: 0.35rem 0.9rem; border: none; background: transparent; color: var(--muted); border-radius: 999px; cursor: pointer; } .bm-gender-btn.active { background: var(--ink); color: var(--white); } .bm-body-svg { width: 100%; max-width: 320px; height: auto; display: block; } /* Clean panel behind the flat body figure. No operating-table border, no cream gradient — a soft neutral cream that lets the flat body illustration carry the visual weight. */ .bm-board { background: #f6efe1; border-radius: 14px; padding: 0.8rem; box-shadow: inset 0 1px 3px rgba(60,40,20,0.06); display: flex; justify-content: center; } /* Flat body images — one visible based on the data-gender attribute */ .bm-body-svg .bm-body-img { display: none; } .bm-body-svg[data-gender="m"] .bm-body-img-m, .bm-body-svg[data-gender="f"] .bm-body-img-f { display: inline; } .bm-tip { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); font-style: italic; text-align: center; margin: 0.6rem 0 0; } /* Ailment patches — clickable, hoverable, with buzz pulse on click */ .bm-ailment { cursor: pointer; transition: transform 0.15s, filter 0.15s; transform-origin: center; transform-box: fill-box; } .bm-ailment:hover ellipse { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.18)); } .bm-ailment:hover { transform: scale(1.06); } .bm-ailment:focus { outline: none; } .bm-ailment:focus ellipse { stroke-width: 3.5; filter: drop-shadow(0 0 6px rgba(200,134,44,0.55)); } /* Lit state — visitor MUST be able to tell at a glance which patches are active vs. inactive. Bright orange stroke, saturated fill, strong double-glow, gentle continuous pulse so the eye returns to it. */ .bm-ailment.active ellipse { stroke-width: 4 !important; stroke: #ff6b3a !important; fill: #fff7ed !important; filter: drop-shadow(0 0 18px rgba(255,107,58,1)) drop-shadow(0 0 8px rgba(255,180,90,0.85)); animation: bmAilmentLit 1.8s ease-in-out infinite; } .bm-ailment.active text { font-weight: 700; } .bm-ailment.active { transform: scale(1.12); } @keyframes bmAilmentLit { 0%, 100% { filter: drop-shadow(0 0 14px rgba(255,107,58,0.95)) drop-shadow(0 0 6px rgba(255,180,90,0.75)); } 50% { filter: drop-shadow(0 0 24px rgba(255,107,58,1)) drop-shadow(0 0 12px rgba(255,200,120,0.95)); } } @keyframes bmAilmentPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,107,58,0)); } 30% { transform: scale(1.22); filter: drop-shadow(0 0 18px rgba(255,107,58,0.9)); } 60% { transform: scale(0.95); } } .bm-ailment.bm-ailment-pulse { animation: bmAilmentPulse 0.7s ease; } /* The famous red ball nose — flashes red and pulses when an ailment is hit */ .bm-nose { transition: fill 0.12s, filter 0.12s; } @keyframes bmNoseBuzz { 0%, 100% { fill: #b54a2c; filter: drop-shadow(0 0 0 transparent); transform: scale(1); } 20% { fill: #ff3b1a; filter: drop-shadow(0 0 14px #ff3b1a); transform: scale(1.35); } 50% { fill: #ff5a3a; filter: drop-shadow(0 0 10px #ff5a3a); transform: scale(1.15); } 75% { fill: #ff3b1a; filter: drop-shadow(0 0 14px #ff3b1a); transform: scale(1.25); } } .bm-nose.bm-nose-buzz { transform-origin: center; transform-box: fill-box; animation: bmNoseBuzz 0.7s ease; } /* Female toggle: swap the hair, slightly different gown trim */ .bm-body-svg[data-gender="f"] .bm-hair-m { d: path("M 122,55 Q 130,30 160,30 Q 190,30 198,55 Q 200,75 196,90 L 188,80 Q 186,55 160,52 Q 134,55 132,80 L 124,90 Q 120,75 122,55 Z"); } .bm-body-svg[data-gender="f"] .bm-gown { fill: #fad6db; } .bm-body-svg .body-outline { fill: #d8dce0; stroke: #a8acb0; stroke-width: 1.2; } /* Female silhouette: subtle hourglass tweak via CSS variables not feasible without altering paths, so for now both genders share the same outline and the toggle is structural for future M/F art. */ .bm-body-svg[data-gender="f"] .body-head { rx: 32; ry: 38; } .bm-body-svg .region { fill: transparent; pointer-events: none; transition: fill 0.5s, filter 0.5s; } .bm-body-svg .region.active { fill: var(--amber); fill-opacity: 0.55; filter: drop-shadow(0 0 10px rgba(200,134,44,0.85)); animation: regionPulse 2.4s ease-in-out infinite; } .bm-body-svg .region-skin.active { fill: transparent; stroke: var(--amber); stroke-width: 2.5; stroke-opacity: 0.85; filter: drop-shadow(0 0 6px rgba(200,134,44,0.7)); } @keyframes regionPulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(200,134,44,0.65)); } 50% { filter: drop-shadow(0 0 16px rgba(200,134,44,0.95)); } } /* Upload column */ .bm-upload-col { display: flex; flex-direction: column; gap: 1rem; } .bm-upload-box { background: var(--white); border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.6rem 1.4rem; text-align: center; } .bm-upload-btn { font-family: var(--sans); font-size: 0.98rem; font-weight: 500; padding: 0.85rem 1.4rem; background: var(--ink); color: var(--white); border: none; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; transition: background 0.15s; } .bm-upload-btn:hover { background: var(--orange); } .bm-upload-icon { font-size: 1.1rem; } .bm-upload-hint { font-size: 0.82rem; color: var(--muted); margin: 0.7rem 0 0; } .bm-samples { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.85rem; } .bm-samples-lead { color: var(--muted); } .bm-sample-btn { font-family: var(--sans); font-size: 0.82rem; background: transparent; border: 1px dashed var(--border); color: var(--walnut); padding: 0.22rem 0.65rem; border-radius: 999px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .bm-sample-btn:hover { background: var(--white); border-style: solid; border-color: var(--amber); color: var(--ink); } .bm-upload-status { font-size: 0.92rem; color: var(--muted); margin-top: 0.7rem; min-height: 1.2rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .bm-upload-status .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); animation: pulseDot 1.2s ease-in-out infinite; } .bm-result-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem 1.4rem; } .bm-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; border-bottom: 1px solid var(--border); padding-bottom: 0.6rem; } .bm-product { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 0; } .bm-reset { font-family: var(--sans); font-size: 0.78rem; background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.7rem; color: var(--walnut); cursor: pointer; } .bm-reset:hover { border-color: var(--amber); color: var(--orange); } .bm-no-lights { background: rgba(181,74,44,0.08); border: 1px solid rgba(181,74,44,0.25); color: var(--ink); padding: 0.7rem 0.85rem; border-radius: 8px; font-size: 0.92rem; margin: 0 0 0.8rem; } .bm-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .bm-item { border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; padding: 0.65rem 0.85rem 0.75rem; } .bm-item-green { border-left-color: var(--green); } .bm-item-yellow { border-left-color: var(--yellow); } .bm-item-ambiguous { border-left-color: var(--ambiguous); } .bm-item-red { border-left-color: var(--red); } .bm-item-unknown { border-left-color: var(--muted); } .bm-item-top { display: flex; align-items: center; gap: 0.5rem; } .bm-item-name { font-size: 0.95rem; } .bm-item-verdict { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-left: auto; } .bm-item-note { font-size: 0.88rem; color: var(--ink); margin: 0.3rem 0 0.4rem; } .bm-item-systems { display: flex; flex-wrap: wrap; gap: 0.3rem; } .bm-item-syschip { font-size: 0.72rem; color: var(--amber); background: rgba(200,134,44,0.1); border: 1px solid rgba(200,134,44,0.28); padding: 0.1rem 0.5rem; border-radius: 999px; } .bm-item-systems-empty { font-size: 0.78rem; color: var(--muted); font-style: italic; } .bm-unmapped-note { margin: 0.9rem 0 0; padding: 0.6rem 0.8rem; background: rgba(216,168,58,0.1); border: 1px solid rgba(216,168,58,0.3); border-radius: 8px; font-size: 0.85rem; color: var(--ink); } /* Non-oral routes explainer — for the visitor who hears "fed by IV" and pictures saline */ .non-oral-routes { margin: 2.6rem 0 0; padding: 1.6rem 1.6rem 1.4rem; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--walnut); border-radius: var(--radius); } .non-oral-title { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin: 0 0 0.6rem; color: var(--ink); } .non-oral-lede { font-size: 0.96rem; color: var(--ink); margin: 0 0 1rem; } .non-oral-list { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.7rem; } .non-oral-list li { font-size: 0.92rem; color: var(--ink); padding-left: 0.9rem; border-left: 2px solid var(--border); line-height: 1.5; } .non-oral-list li strong { color: var(--walnut); font-weight: 600; } .non-oral-footer { font-size: 0.9rem; color: var(--muted); margin: 0.6rem 0 0; font-style: italic; } /* Browse-by-system toggle */ .bm-browse-wrap { margin-top: 2.2rem; } .bm-browse-toggle { font-family: var(--sans); font-size: 0.9rem; background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 1rem; color: var(--walnut); cursor: pointer; } .bm-browse-toggle:hover { border-color: var(--amber); color: var(--orange); } .bm-browse { margin-top: 1.2rem; } .bm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1.4rem; } .bm-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; font-family: var(--sans); background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.1rem 1.2rem; text-align: left; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .bm-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--amber); } .bm-icon { font-size: 1.6rem; line-height: 1; } .bm-system-name { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; margin: 0.1rem 0 0; color: var(--ink); } .bm-count { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .bm-detail { margin-top: 1.4rem; } .bm-back { font-family: var(--sans); font-size: 0.88rem; background: transparent; color: var(--walnut); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.85rem; cursor: pointer; margin-bottom: 1rem; } .bm-back:hover { border-color: var(--amber); color: var(--orange); } .bm-detail-title { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 0 0 1.1rem; display: flex; align-items: center; gap: 0.5rem; } .bm-detail-icon { font-size: 1.4rem; } .bm-type-tag { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--walnut); background: rgba(107,79,58,0.08); border: 1px solid rgba(107,79,58,0.2); padding: 0.1rem 0.45rem; border-radius: 999px; margin-left: auto; font-weight: 500; } .bm-subtitle { font-family: var(--serif); font-size: 0.88rem; color: var(--muted); margin: 0 0 0.3rem; } /* 100 REAL — side-by-side calorie portion visualizer */ .hundred-real { padding: 4rem 0; background: linear-gradient(180deg, transparent, rgba(216,220,224,0.4)); } .hr-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.4rem; } @media (max-width: 700px) { .hr-pickers { grid-template-columns: 1fr; } } .hr-picker-col { display: flex; flex-direction: column; gap: 0.6rem; } .hr-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .hr-chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.84rem; color: var(--ink); background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 0.32rem 0.7rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .hr-chip:hover { border-color: var(--amber); } .hr-chip.active { background: var(--ink); color: var(--white); border-color: var(--ink); } .hr-chip-emoji { font-size: 1rem; } .hr-actions { display: flex; justify-content: center; margin: 1.4rem 0 0.8rem; } .hr-surprise { font-family: var(--sans); font-size: 0.92rem; font-weight: 500; padding: 0.6rem 1.2rem; background: var(--candlelight); color: var(--ink); border: 1px solid var(--candlelight); border-radius: 999px; cursor: pointer; transition: background 0.15s; } .hr-surprise:hover { background: var(--amber); color: var(--white); border-color: var(--amber); } .hr-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin: 0.6rem 0 1.2rem; } @media (max-width: 600px) { .hr-compare { grid-template-columns: 1fr; } .hr-vs { display: none; } } .hr-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem 1.2rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .hr-emoji { font-size: 3.6rem; line-height: 1; } .hr-food-name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 0.2rem 0 0.2rem; } .hr-portion { display: flex; flex-direction: column; gap: 0.15rem; align-items: center; } .hr-grams { font-family: var(--serif); font-size: 2rem; color: var(--amber); font-weight: 600; font-variant-numeric: tabular-nums; } .hr-portion-label { font-size: 0.92rem; color: var(--ink); } .hr-cal-density { font-size: 0.78rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 0.4rem; width: 100%; font-variant-numeric: tabular-nums; } /* Plain-language card styling — leads with the household portion, demotes the gram math to a small footnote. Built after user-testing showed the prior layout (big "63 g" + "160 kcal per 100 g") was too dense for a general-public visitor. */ .hr-cal-line { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 0.3rem; } .hr-portion-plain { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--amber); line-height: 1.25; margin: 0.1rem 0 0.4rem; padding: 0 0.4rem; } .hr-richness { font-size: 0.95rem; color: var(--ink); line-height: 1.45; margin-top: 0.2rem; padding: 0 0.4rem; } .hr-richness strong { color: var(--amber); } .hr-tiny-note { font-size: 0.7rem; color: var(--muted); border-top: 1px solid var(--border); padding-top: 0.5rem; margin-top: 0.6rem; width: 100%; font-style: italic; } .hr-vs { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--muted); } .hr-insight { font-size: 1rem; color: var(--ink); text-align: center; padding: 1rem 1.2rem; background: rgba(244,214,138,0.18); border-radius: var(--radius); margin: 0 0 1rem; } .hr-insight strong { font-weight: 600; } .hr-footnote { font-size: 0.88rem; color: var(--muted); margin: 0; } /* INGREDIENT LOOKUP — extends folk-card with what-it-is, dose, doctor question */ .ingredient-lookup .ing-search-row { display: flex; flex-direction: column; gap: 0.4rem; max-width: 44rem; margin-top: 1.4rem; margin-bottom: 0.5rem; } /* Tile-collapse for ingredient cards: each card is a bottle on a shelf until the user taps it. The full evidence reveals on expand. */ .ing-card { padding: 0; overflow: hidden; transition: box-shadow 0.15s, transform 0.1s; } .ing-card:hover { box-shadow: var(--shadow); } .ing-card.expanded { grid-column: 1 / -1; } @media (min-width: 720px) { .ing-card.expanded { grid-column: span 2; } } .ing-tile { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1rem 0.9rem 1rem; width: 100%; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: center; color: var(--ink); } .ing-thumb { width: 100%; max-width: 200px; height: 90px; object-fit: cover; border-radius: 8px; margin-bottom: 0.2rem; background: #f3ede4; } .ing-no-thumb .ing-thumb { display: none; } .ing-bottle-svg { width: 90px; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); transition: transform 0.25s; } .ing-tile:hover .ing-bottle-svg { transform: translateY(-2px) rotate(-1.5deg); } /* Realistic photo pill bottle with text overlaid on the white label. The label sits on the natural label area of the photo (roughly 18% from each side, 38-78% vertical). Pure CSS positioning means no per- ingredient tuning is needed. */ .ing-bottle { position: relative; width: 100px; aspect-ratio: 100 / 200; margin: 0 auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18)); transition: transform 0.25s ease; } .ing-tile:hover .ing-bottle { transform: translateY(-2px) rotate(-1.5deg); } .ing-bottle-img { width: 100%; height: 100%; object-fit: contain; display: block; } .ing-bottle-label { position: absolute; /* Maps to the white label area of the photo. Tweaked to fit both pill_1 (black cap) and pill_2 (white cap) since both use the same bottle body. */ left: 16%; right: 16%; top: 38%; bottom: 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4% 2%; box-sizing: border-box; line-height: 1.15; pointer-events: none; } .ing-bottle-label-name { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 0.78rem; color: #2a221a; margin-bottom: 0.25rem; } .ing-bottle-label-meta { font-family: var(--sans); font-size: 0.42rem; letter-spacing: 0.06em; color: #6b574a; border-top: 0.5px solid rgba(0,0,0,0.15); padding-top: 0.18rem; margin-top: 0.1rem; } .ing-bottle-label-verdict { font-family: var(--sans); font-size: 0.5rem; letter-spacing: 0.04em; color: #6b574a; margin-top: 0.1rem; } @media (min-width: 520px) { .ing-bottle { width: 110px; } .ing-bottle-label-name { font-size: 0.85rem; } } .ing-tile-name { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; margin-top: 0.2rem; line-height: 1.2; } .ing-tile-aka { font-family: var(--serif); font-size: 0.78rem; color: var(--muted); font-style: italic; line-height: 1.3; } /* Body-system icon badges (brain, heart, immune, bone, etc.) */ .ing-systems { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; margin-top: 0.4rem; } .ing-system { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--sans); font-size: 0.72rem; padding: 0.18rem 0.55rem; background: var(--bg-warm-soft); border: 1px solid var(--border); border-radius: 999px; color: var(--walnut); } .ing-system-emoji { font-size: 0.95rem; line-height: 1; } .ing-system-label { font-weight: 500; } .ing-tile-hint { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); font-style: italic; margin-top: 0.4rem; } .ing-card.expanded .ing-tile-hint { display: none; } .ing-details { padding: 0 1.2rem 1.2rem; border-top: 1px solid var(--border); animation: fadeIn 0.3s ease both; display: flex; flex-direction: column; gap: 0.5rem; } .ing-details > :first-child { margin-top: 0.8rem; } .ing-card .ing-aka { font-family: var(--serif); font-size: 0.88rem; color: var(--muted); font-style: italic; margin: 0 0 0.4rem; } .ing-card .ing-what { font-size: 0.92rem; color: var(--ink); margin: 0.2rem 0 0.3rem; } .ing-card .ing-claims { font-size: 0.9rem; color: var(--ink); margin: 0.2rem 0; } .ing-card .ing-claims strong, .ing-card .folk-explanation strong { font-weight: 600; color: var(--ink); } .ing-dose { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.5rem 0.7rem; background: rgba(200,134,44,0.06); border: 1px solid rgba(200,134,44,0.22); border-radius: 8px; margin: 0.2rem 0; } .ing-dose-label { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: var(--amber); } .ing-dose-text { font-size: 0.88rem; color: var(--ink); } .ing-doctor { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.75rem; background: rgba(107,79,58,0.06); border-left: 3px solid var(--walnut); border-radius: 4px; margin: 0.3rem 0 0.2rem; } .ing-doctor-label { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: var(--walnut); } .ing-doctor-text { font-size: 0.9rem; font-style: italic; color: var(--ink); } .ing-empty { margin-top: 1.2rem; padding: 1rem; background: var(--white); border: 1px dashed var(--border); border-radius: var(--radius); } .ing-fallback { margin: 0; font-size: 0.92rem; color: var(--ink); } .ing-fallback a { font-weight: 500; } /* MEDICINAL PLANTS — extends folk-card patterns with plant-specific fields */ .medicinal-plants .plant-filter-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.9rem; } .medicinal-plants .plant-filter-row:first-of-type { margin-top: 1.4rem; } .plant-filter-label { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; min-width: 5.5rem; } .folk-filter-condition.active { background: var(--walnut); color: var(--white); border-color: var(--walnut); } .plant-reset { font-family: var(--sans); font-size: 0.78rem; background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.6rem; color: var(--walnut); cursor: pointer; margin-left: 0.6rem; } .plant-reset:hover { border-color: var(--amber); color: var(--orange); } .plant-name { margin-bottom: 0; } .plant-latin { font-family: var(--serif); font-size: 0.92rem; color: var(--muted); margin: 0 0 0.3rem; } .plant-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.2rem 0 0.2rem; } .plant-tag { font-family: var(--sans); font-size: 0.72rem; color: var(--walnut); background: rgba(200,134,44,0.08); border: 1px solid rgba(200,134,44,0.25); padding: 0.15rem 0.55rem; border-radius: 999px; } .plant-traditional { font-size: 0.85rem; color: var(--muted); margin: 0.1rem 0 0; } .plant-safety { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.85rem; margin: 0.3rem 0 0.2rem; } .plant-safety-label { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; } .plant-safety-notes { color: var(--ink); } .plant-safety-low { background: rgba(74,138,58,0.08); border: 1px solid rgba(74,138,58,0.22); } .plant-safety-low .plant-safety-label { color: var(--green); } .plant-safety-medium { background: rgba(216,168,58,0.1); border: 1px solid rgba(216,168,58,0.3); } .plant-safety-medium .plant-safety-label { color: #8a6a18; } .plant-safety-high { background: rgba(181,74,44,0.08); border: 1px solid rgba(181,74,44,0.3); } .plant-safety-high .plant-safety-label { color: var(--red); } .plant-empty { color: var(--muted); font-style: italic; padding: 1rem 0; grid-column: 1 / -1; } /* Tile-collapse for medicinal plants. Cards collapse to emoji + name + verdict dot; click to reveal traditional use, evidence, safety, source. */ .plant-card { padding: 0; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .plant-card:hover { box-shadow: var(--shadow); } .plant-card.expanded { grid-column: 1 / -1; } @media (min-width: 720px) { .plant-card.expanded { grid-column: span 2; } } .plant-tile { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 1.4rem 1rem 1.2rem; width: 100%; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: center; color: var(--ink); } .plant-tile-emoji { font-size: 3.4rem; line-height: 1; display: block; } .plant-tile-name { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; margin: 0.3rem 0 0.05rem; line-height: 1.2; } .plant-tile-latin { font-family: var(--serif); font-size: 0.78rem; color: var(--muted); margin: 0; font-style: italic; } .plant-tile-verdict { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--sans); font-size: 0.78rem; color: var(--ink); margin-top: 0.35rem; } .plant-tile-hint { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); font-style: italic; margin-top: 0.3rem; } .plant-card.expanded .plant-tile-hint { display: none; } /* Real photo on the tile, replaces the big emoji when present. The emoji sits below as a fallback that only shows when the image fails to load (onerror handler adds .plant-tile-no-photo to the .plant-tile). */ .plant-tile-photo { width: 100%; max-width: 220px; height: 140px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 0.3rem; background: #f3ede4; } .plant-tile-emoji-fallback { display: none; } .plant-tile.plant-tile-no-photo .plant-tile-emoji-fallback { display: block; } .plant-details { padding: 0 1.3rem 1.3rem; border-top: 1px solid var(--border); animation: fadeIn 0.3s ease both; display: flex; flex-direction: column; gap: 0.55rem; } .plant-details > :first-child { margin-top: 0.8rem; } /* Age-specific warning callout — used on ingredients and medicinal plants where geriatric pharmacology research supports extra caution after 65. */ .age-warning { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; padding: 0.65rem 0.85rem; background: repeating-linear-gradient( 45deg, rgba(181,74,44,0.06), rgba(181,74,44,0.06) 8px, rgba(181,74,44,0.1) 8px, rgba(181,74,44,0.1) 16px ); border: 1px solid rgba(181,74,44,0.3); border-left: 4px solid var(--red); border-radius: 6px; } .age-warning-label { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--red); } .age-warning-text { font-size: 0.88rem; color: var(--ink); line-height: 1.5; } /* GROW YOUR OWN BAR — gin / wine / mead plants page */ .grow-your-bar { padding: 4rem 0; } /* Back-of-the-bar shelf hero. Bottles rest on a wooden shelf; clicking a bottle filters the plant grid. A subtle sheen sweeps across the shelf on load. Bottles wobble on hover. */ .gyb-shelf { margin: 1.6rem 0 1.6rem; padding: 0.8rem 0.6rem 0.4rem; background: radial-gradient(ellipse at center 90%, rgba(0,0,0,0.18), transparent 60%), linear-gradient(180deg, rgba(255,250,240,0.5), rgba(240,228,200,0.7)); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .gyb-shelf-svg { display: block; width: 100%; height: auto; max-height: 240px; } .gyb-bottle { cursor: pointer; transform-origin: bottom center; transform-box: fill-box; transition: transform 0.25s ease, filter 0.25s; } .gyb-bottle:hover, .gyb-bottle:focus { outline: none; animation: gybWobble 0.7s ease; filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25)); } .gyb-bottle.active { filter: drop-shadow(0 0 8px rgba(216,168,58,0.7)); } @keyframes gybWobble { 0% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(-4deg) translateY(-2px); } 50% { transform: rotate(3deg) translateY(0); } 75% { transform: rotate(-2deg) translateY(-1px); } 100% { transform: rotate(0deg) translateY(0); } } /* Sheen sweep across the shelf on load and on a slow loop */ .gyb-shelf-sheen { animation: gybSheen 6s ease-in-out infinite; } @keyframes gybSheen { 0% { transform: translateX(0); } 60% { transform: translateX(820px); } 100% { transform: translateX(820px); } } .gyb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1rem; } .gyb-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); border-top: 4px solid var(--border); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .gyb-card:hover { box-shadow: var(--shadow); } .gyb-card.expanded { grid-column: 1 / -1; } @media (min-width: 720px) { .gyb-card.expanded { grid-column: span 2; } } .gyb-card-gin { border-top-color: #6b8a30; } .gyb-card-wine { border-top-color: #8e2d4a; } .gyb-card-mead { border-top-color: var(--amber); } .gyb-card-tile { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 1.4rem 1rem 1.2rem; width: 100%; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: center; color: var(--ink); } .gyb-card-emoji-big { font-size: 3.6rem; line-height: 1; } /* Real plant photo at the top of each card, with the emoji as fallback. */ .gyb-card-photo { width: calc(100% + 2rem); margin: -1.4rem -1rem 0.4rem; height: 140px; object-fit: cover; display: block; background: #f3ede4; } .gyb-card-tile .gyb-card-photo + .gyb-card-emoji-big { display: none; } .gyb-card-tile.gyb-card-no-photo .gyb-card-emoji-big { display: block; } .gyb-card-name { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; margin: 0.3rem 0 0.1rem; } .gyb-card-latin { font-family: var(--serif); font-size: 0.82rem; color: var(--muted); margin: 0; } .gyb-expand-hint { font-family: var(--sans); font-size: 0.74rem; color: var(--muted); font-style: italic; margin-top: 0.4rem; } .gyb-card.expanded .gyb-expand-hint { display: none; } .gyb-card-details { padding: 0 1.3rem 1.3rem; border-top: 1px solid var(--border); animation: fadeIn 0.3s ease both; display: flex; flex-direction: column; gap: 0.5rem; } .gyb-card-details > * { margin-top: 0.5rem; } .gyb-section p { margin: 0; font-size: 0.9rem; color: var(--ink); line-height: 1.55; } .gyb-section-label { display: block; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--walnut); margin-bottom: 0.2rem; } .gyb-history, .gyb-growing, .gyb-recipe { padding: 0.55rem 0.75rem; border-radius: 4px; } .gyb-history { background: rgba(107,79,58,0.05); border-left: 3px solid var(--walnut); } .gyb-growing { background: rgba(74,138,58,0.06); border-left: 3px solid var(--green); } .gyb-recipe { background: rgba(244,214,138,0.2); border-left: 3px solid var(--amber); } .gyb-footer-note { margin-top: 2rem; padding: 0.9rem 1.1rem; background: rgba(107,79,58,0.06); border-left: 4px solid var(--walnut); border-radius: 6px; font-size: 0.88rem; color: var(--ink); line-height: 1.55; } /* HOMESTEAD CONTENT HUB — creator code, red flags, never-post, calendar */ .homestead { padding: 3rem 0 4rem; } .hs-section { margin-bottom: 2.4rem; } /* Social Media Post Generator — top of the Homestead page. */ .spg-section { background: var(--bg-warm-soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.8rem; margin-bottom: 3rem; } .spg-field { margin-bottom: 1rem; } .spg-label { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--walnut); margin-bottom: 0.35rem; } .spg-input { width: 100%; font-family: var(--sans); font-size: 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--ink); } .spg-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(200,134,44,0.2); } .spg-suggested { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; } .spg-suggest { font-family: var(--sans); font-size: 0.78rem; padding: 0.3rem 0.65rem; background: var(--white); border: 1px dashed var(--border); border-radius: 999px; color: var(--walnut); cursor: pointer; transition: border-color 0.15s, background 0.15s; } .spg-suggest:hover { border-style: solid; border-color: var(--amber); background: rgba(200,134,44,0.06); } .spg-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .spg-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--sans); font-size: 0.86rem; padding: 0.45rem 0.9rem; background: var(--white); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; color: var(--ink); transition: border-color 0.15s, background 0.15s; } .spg-chip:hover { border-color: var(--amber); } .spg-chip.active { background: var(--ink); color: var(--white); border-color: var(--ink); } .spg-controls { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 1rem; } .spg-generate-btn { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; padding: 0.7rem 1.4rem; background: var(--ink); color: var(--white); border: 1px solid var(--ink); border-radius: 999px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .spg-generate-btn:hover:not(:disabled) { background: var(--walnut); border-color: var(--walnut); } .spg-generate-btn:disabled { opacity: 0.5; cursor: wait; } .spg-status { margin: 0; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); font-style: italic; } .spg-output { margin-top: 1.2rem; } .spg-output:empty { display: none; } .spg-output-card { background: var(--white); border: 1px solid var(--border); border-left: 5px solid var(--walnut); border-radius: var(--radius); padding: 1.2rem 1.4rem 1.3rem; animation: fadeIn 0.3s ease both; } .spg-output-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--border); } .spg-output-platform { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--walnut); } .spg-output-count { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; } .spg-post-text { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); line-height: 1.6; white-space: pre-wrap; background: var(--bg-warm-soft); padding: 0.9rem 1.1rem; border-radius: 8px; border: 1px solid var(--border); } .spg-hashtags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; } .spg-hashtag { font-family: var(--sans); font-size: 0.82rem; color: var(--walnut); background: rgba(107,79,58,0.08); padding: 0.18rem 0.55rem; border-radius: 999px; } .spg-actions { margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .spg-copy-btn, .spg-regen-btn { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 999px; cursor: pointer; transition: filter 0.15s, transform 0.1s; } .spg-copy-btn { background: var(--green); color: var(--white); border: 1px solid var(--green); } .spg-copy-btn:hover:not(:disabled) { filter: brightness(0.92); transform: translateY(-1px); } .spg-copy-btn:disabled { opacity: 0.8; cursor: default; } .spg-regen-btn { background: var(--white); color: var(--ink); border: 1px solid var(--border); } .spg-regen-btn:hover { border-color: var(--walnut); color: var(--walnut); } .spg-voice-notes { margin-top: 1rem; padding: 0.7rem 0.95rem; background: rgba(200,134,44,0.06); border-left: 4px solid var(--amber); border-radius: 4px; } .spg-voice-label { display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.2rem; } .spg-voice-notes p { margin: 0; font-size: 0.92rem; color: var(--ink); font-style: italic; } .spg-citations { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--border); } .spg-citations h4 { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--walnut); margin: 0 0 0.5rem; } .spg-citations ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; } .spg-cite a { font-family: var(--sans); font-size: 0.88rem; color: var(--ink); text-decoration: none; padding: 0.4rem 0.65rem; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--walnut); border-radius: 4px; display: block; transition: border-color 0.15s, background 0.15s; } .spg-cite a:hover { border-left-color: var(--amber); background: var(--bg-warm-soft); } .spg-cite-dose a { border-left-color: var(--amber); } .spg-cite-label { color: var(--muted); } .hs-section-title { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 1.6rem 0 0.4rem; } .hs-section-blurb { font-size: 0.95rem; color: var(--muted); margin: 0 0 1rem; font-style: italic; } .hs-code { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; } .hs-code-card { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); border-left: 4px solid var(--green); padding: 1.1rem 1.2rem 1.1rem 1.2rem; } .hs-code-num { position: absolute; top: 0.6rem; right: 0.8rem; font-family: var(--serif); font-size: 1.6rem; font-weight: 600; opacity: 0.35; color: var(--green); line-height: 1; } .hs-code-rule { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; margin: 0 2.2rem 0.4rem 0; color: var(--ink); } .hs-code-detail { margin: 0; font-size: 0.9rem; color: var(--ink); line-height: 1.55; } .hs-flags { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; } .hs-flag-card { background: rgba(181,74,44,0.05); border: 1px solid rgba(181,74,44,0.25); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 1rem 1.1rem; } .hs-flag-flag { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; margin: 0 0 0.4rem; color: var(--red); } .hs-flag-why { margin: 0; font-size: 0.9rem; color: var(--ink); line-height: 1.55; } .hs-never { display: flex; flex-direction: column; gap: 0.6rem; } .hs-never-card { background: rgba(181,74,44,0.07); border-left: 5px solid var(--red); border-radius: 6px; padding: 0.9rem 1.1rem; } .hs-never-claim { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; margin: 0 0 0.3rem; color: var(--red); } .hs-never-why { margin: 0; font-size: 0.9rem; color: var(--ink); line-height: 1.55; } .hs-calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; } .hs-month { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; } .hs-month-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .hs-month-name { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin: 0; } .hs-month-theme { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--walnut); } .hs-month-posts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; color: var(--ink); line-height: 1.5; } .hs-month-posts li { padding-left: 0.9rem; position: relative; } .hs-month-posts li::before { content: "•"; position: absolute; left: 0.1rem; color: var(--amber); font-weight: 700; } /* Garden indoor toggle button */ .garden-indoor-btn { font-family: var(--sans); font-size: 0.9rem; padding: 0.5rem 1rem; background: var(--white); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .garden-indoor-btn:hover { border-color: var(--amber); } .garden-indoor-btn.active { background: var(--green); color: var(--white); border-color: var(--green); } /* WINES & SPIRITS — after-hours playful page with a darker candlelight feel */ .wines-and-spirits { /* Top padding kept tight because the page already shows the page-hosts strip + Wyatt's standing-host banner above this section. Stacking 3rem on top of those created an empty band before the section title. */ padding: 0.5rem 0 4rem; background: radial-gradient(ellipse at 80% 10%, rgba(244,214,138,0.18), transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(107,79,58,0.10), transparent 50%), linear-gradient(180deg, #efebe3, var(--bg)); } /* Wyatt's standing-host banner on the wines page is a seated-at-the-bar shot, narrower than the other standing portraits (MJ in her garden, Dr. Henry at the pharmacy). 380px min-height was sized for the taller portraits; for Wyatt it left a tall empty band. */ .page-wines-and-spirits .character-host-standing .character-host-inner { min-height: 280px; } .ws-hero { display: flex; align-items: center; gap: 1.2rem; margin: 1.4rem 0 1.6rem; } .ws-hero-emoji { font-size: 3.4rem; line-height: 1; } .ws-hero-title { margin: 0; } .ws-hero-blurb { margin: 0.3rem 0 0; max-width: 48rem; } .ws-disclaimer { padding: 1rem 1.2rem; background: rgba(107,79,58,0.07); border: 1px solid rgba(107,79,58,0.3); border-left: 5px solid var(--walnut); border-radius: var(--radius); font-size: 0.92rem; color: var(--ink); line-height: 1.55; margin-bottom: 1.6rem; } .ws-disclaimer strong { color: var(--walnut); } .ws-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0.4rem; } .ws-filter { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.85rem; padding: 0.35rem 0.85rem; background: var(--white); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; } .ws-filter:hover { border-color: var(--walnut); } .ws-filter.active { background: var(--walnut); color: var(--white); border-color: var(--walnut); } .ws-filter-count { font-size: 0.74rem; opacity: 0.75; font-variant-numeric: tabular-nums; } /* ====== Build Your Own Bottle ====== */ .bottle-builder { margin: 2rem 0 3rem; padding: 1.6rem 1.4rem 2rem; background: var(--bg-warm-soft); border: 1px solid var(--border); border-radius: var(--radius); position: relative; } .bb-header { position: relative; padding-right: 7rem; } .bb-title { font-family: var(--serif); font-size: 1.7rem; font-weight: 500; margin: 0 0 0.2rem; color: var(--ink); } .bb-subtitle { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; line-height: 1.5; } .bb-reset { position: absolute; top: 0; right: 0; font-family: var(--sans); font-size: 0.82rem; padding: 0.4rem 0.85rem; background: var(--white); border: 1px solid var(--border); border-radius: 999px; color: var(--walnut); cursor: pointer; } .bb-reset:hover { border-color: var(--amber); color: var(--orange); } .bb-step-heading { display: flex; align-items: baseline; gap: 0.5rem; margin: 1rem 0 0.4rem; } .bb-step-num { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; color: var(--walnut); } .bb-step-label { font-family: var(--sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; } /* Style cards (step 1) */ .bb-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; margin-bottom: 0.6rem; } .bb-style-card { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0.8rem 0.85rem 0.85rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; font-family: inherit; color: var(--ink); text-align: left; transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s; } .bb-style-card:hover { border-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); } .bb-style-card.active { border-color: var(--walnut); background: var(--bg-warm-soft); box-shadow: 0 0 0 2px rgba(107,79,58,0.25); } .bb-style-emoji { font-size: 1.9rem; line-height: 1; } .bb-style-name { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; } .bb-style-tag { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; color: var(--walnut); background: rgba(107,79,58,0.08); padding: 0.1rem 0.5rem; border-radius: 999px; } .bb-style-blurb { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); line-height: 1.45; margin-top: 0.2rem; } /* Checklist of required ingredients */ .bb-checklist { margin: 0.4rem 0 0.6rem; padding: 0.8rem 1rem; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--walnut); border-radius: 8px; } .bb-checklist:empty { display: none; } .bb-check-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; margin: 0 0 0.3rem; color: var(--ink); } .bb-check-sub { font-family: var(--sans); font-size: 0.84rem; color: var(--muted); margin: 0 0 0.4rem; } .bb-check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; } .bb-check-item { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--sans); font-size: 0.88rem; padding: 0.35rem 0.8rem; border: 1px dashed var(--border); border-radius: 999px; background: var(--bg-warm-soft); color: var(--ink); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .bb-check-item:hover { background: rgba(184,146,42,0.10); border-color: var(--amber); } .bb-check-item:active { transform: scale(0.98); } .bb-check-item.done { border-style: solid; border-color: var(--green); background: rgba(74,138,58,0.08); } .bb-check-item.done:hover { background: rgba(74,138,58,0.14); border-color: var(--green); } .bb-check-mark { font-weight: 700; color: var(--muted); } .bb-check-item.done .bb-check-mark { color: var(--green); } .bb-check-emoji { font-size: 1rem; line-height: 1; } .bb-check-hint { font-size: 0.7rem; font-style: italic; color: var(--muted); margin-left: 0.2rem; } .bb-check-item.done .bb-check-hint { color: rgba(74,138,58,0.7); } .bb-check-allowed { margin: 0.5rem 0 0; font-family: var(--sans); font-size: 0.82rem; color: var(--muted); } .bb-check-done { margin: 0.5rem 0 0; font-family: var(--sans); font-size: 0.88rem; color: var(--green); font-weight: 500; } /* Help-me button. When the user is stuck, this points to the next missing required ingredient and pulses its tile. They can click it as many times as needed to walk through every ingredient. */ .bb-help-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0.6rem 0 0; } .bb-help-btn { font-family: var(--sans); font-size: 0.88rem; font-weight: 600; padding: 0.45rem 0.9rem; background: var(--amber); color: var(--white); border: 1px solid var(--amber); border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; transition: background 0.15s, transform 0.1s; } .bb-help-btn:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-1px); } .bb-help-hint { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); font-style: italic; } /* Pulsing highlight on a tile that "Help me" just pointed at */ @keyframes bbTileHintFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,134,44,0); transform: translateY(0); } 20% { box-shadow: 0 0 0 4px rgba(200,134,44,0.45); transform: translateY(-2px); } 60% { box-shadow: 0 0 0 8px rgba(200,134,44,0.15); transform: translateY(0); } } .bb-tile.bb-tile-hint-flash { animation: bbTileHintFlash 1.2s ease 2; border-color: var(--amber) !important; background: rgba(200,134,44,0.06) !important; position: relative; z-index: 1; } /* Feedback line ("Required ingredient added" / "doesn't belong in X") */ .bb-feedback { min-height: 1.3em; margin: 0 0 0.45rem; font-family: var(--sans); font-size: 0.88rem; font-style: italic; color: transparent; transition: color 0.2s; } .bb-feedback-good { color: var(--green); font-style: normal; } .bb-feedback-bad { color: var(--red); font-style: normal; } /* Filter pills (step 2 head) */ .bb-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.3rem 0 0.6rem; } .bb-filter { font-family: var(--sans); font-size: 0.82rem; padding: 0.32rem 0.75rem; background: var(--white); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; color: var(--ink); transition: border-color 0.15s, background 0.15s; } .bb-filter:hover { border-color: var(--amber); } .bb-filter.active { background: var(--ink); color: var(--white); border-color: var(--ink); } /* Botanical tile board */ .bb-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; margin-bottom: 1.4rem; } .bb-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.18rem; padding: 0.55rem 0.7rem 0.65rem; background: var(--white); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-family: inherit; color: var(--ink); text-align: left; transition: border-color 0.15s, transform 0.1s, opacity 0.15s; overflow: hidden; } .bb-tile:hover:not(:disabled) { border-color: var(--amber); transform: translateY(-1px); } .bb-tile:disabled { cursor: not-allowed; opacity: 0.4; } .bb-tile.picked { border-color: var(--green); background: rgba(74,138,58,0.05); } /* Style-driven role hints on tiles. We don't HIDE wrong tiles, the teaching point is to let users click and learn. We do tint them so the visual is alive. */ .bb-tile-role-required:not(.picked) { border-color: rgba(107,79,58,0.45); } .bb-tile-role-required:not(.picked) .bb-tile-name::after { content: " ★"; color: var(--walnut); font-size: 0.9em; } /* Shake + X animation for wrong picks */ @keyframes bbShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } .bb-tile-shake { animation: bbShake 0.45s ease; border-color: var(--red) !important; background: rgba(181,74,44,0.08) !important; } .bb-tile-xmark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3.4rem; font-weight: 700; color: var(--red); pointer-events: none; text-shadow: 0 0 6px rgba(255,255,255,0.7); animation: bbShake 0.45s ease; } .bb-tile-color { position: absolute; top: 0; left: 0; width: 5px; height: 100%; } .bb-tile-emoji { font-size: 1.3rem; line-height: 1; } .bb-tile-name { font-family: var(--serif); font-size: 0.9rem; font-weight: 500; line-height: 1.2; } .bb-tile-flavor { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); line-height: 1.35; } .bb-tile-check { position: absolute; top: 5px; right: 7px; color: var(--green); font-weight: 700; font-size: 1rem; } /* Results row: bottle + recipe */ .bb-results { display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: 1.4rem; align-items: start; } @media (max-width: 720px) { .bb-results { grid-template-columns: 1fr; } } .bb-bottle-col { position: sticky; top: 1rem; } .bb-bottle { display: flex; justify-content: center; } .bb-bottle-svg { width: 180px; height: auto; } .bb-label { margin-top: 0.5rem; background: #fffaf0; border: 1px solid rgba(60,40,20,0.25); border-radius: 4px; padding: 0.7rem 0.8rem; text-align: center; font-family: var(--serif); color: var(--ink); } .bb-label-empty { font-style: italic; color: var(--muted); margin: 0; font-size: 0.85rem; } .bb-label-line { margin: 0.1rem 0; } .bb-label-flourish { color: var(--walnut); letter-spacing: 0.4em; } .bb-label-name { font-size: 1.05rem; font-weight: 600; } .bb-label-base { font-size: 0.8rem; color: var(--muted); } .bb-label-meta { font-family: var(--sans); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.06em; } /* Recipe card */ .bb-recipe { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem; } .bb-recipe-empty { margin: 0; font-style: italic; color: var(--muted); font-size: 0.92rem; } .bb-recipe-title { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin: 0 0 0.3rem; color: var(--ink); } .bb-recipe-base { margin: 0 0 0.6rem; font-size: 0.94rem; color: var(--ink); } .bb-recipe-subnote { display: block; font-size: 0.82rem; color: var(--muted); font-style: italic; } .bb-recipe-tip { margin: 0.5rem 0 0; font-size: 0.88rem; color: var(--muted); font-style: italic; } .bb-recipe-hint { margin: 0.6rem 0 0; font-size: 0.88rem; color: var(--walnut); } .bb-recipe-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 0.8rem; font-size: 0.88rem; } .bb-recipe-table th { font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border); } .bb-recipe-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--ink); } .bb-row-color { width: 14px; padding: 0.4rem 0.3rem !important; } .bb-row-color span { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); } .bb-row-emoji { font-size: 1.05rem; margin-right: 0.25rem; } .bb-row-name { font-weight: 500; } .bb-row-ratio, .bb-row-time { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .bb-recipe-steps h4, .bb-recipe-cautions h4 { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--walnut); margin: 0.8rem 0 0.4rem; } .bb-recipe-steps ol { margin: 0; padding-left: 1.2rem; } .bb-recipe-steps li { margin: 0.3rem 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink); } .bb-recipe-profile { margin: 0.9rem 0 0.6rem; padding: 0.6rem 0.85rem; background: rgba(200,134,44,0.06); border-left: 4px solid var(--amber); border-radius: 4px; } .bb-recipe-profile-label { display: block; font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.15rem; } .bb-recipe-profile p { margin: 0; font-size: 0.92rem; color: var(--ink); } .bb-recipe-cautions ul { margin: 0; padding-left: 1.1rem; } .bb-caution-item { font-size: 0.88rem; color: var(--ink); line-height: 1.45; margin: 0.25rem 0; } .bb-recipe-legal { margin: 1rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--border); font-family: var(--sans); font-size: 0.78rem; color: var(--muted); line-height: 1.5; } .bb-recipe-legal strong { color: var(--red); } /* Right column wraps recipe card + step-by-step how-to */ .bb-right-col { display: flex; flex-direction: column; gap: 1rem; } /* The how-to steps that build up as ingredients are added */ .bb-steps { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.2rem; } .bb-steps-empty { margin: 0; font-style: italic; color: var(--muted); font-size: 0.9rem; } .bb-steps-title { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--walnut); margin: 0 0 0.6rem; } .bb-steps-list { list-style: none; padding: 0; margin: 0; counter-reset: bb-step; } .bb-steps-list li { margin: 0.4rem 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink); padding-left: 1.8rem; position: relative; } .bb-steps-list .bb-step-num { position: absolute; left: 0; top: 0; font-family: var(--serif); font-weight: 600; font-size: 0.95rem; color: var(--walnut); } .bb-step-final { margin-top: 0.7rem !important; padding-top: 0.7rem !important; border-top: 1px dashed var(--border); color: var(--walnut) !important; font-style: italic; } /* Print + download buttons under the bottle */ .bb-actions { display: flex; gap: 0.4rem; margin-top: 0.6rem; justify-content: center; } .bb-action-btn { font-family: var(--sans); font-size: 0.84rem; font-weight: 600; padding: 0.45rem 0.9rem; background: var(--ink); color: var(--white); border: 1px solid var(--ink); border-radius: 999px; cursor: pointer; transition: background 0.15s, border-color 0.15s, opacity 0.15s; } .bb-action-btn:hover:not(:disabled) { background: var(--walnut); border-color: var(--walnut); } .bb-action-btn:disabled { opacity: 0.4; cursor: not-allowed; } .bb-action-btn-secondary { background: var(--white); color: var(--ink); } .bb-action-btn-secondary:hover:not(:disabled) { background: var(--bg-warm-soft); color: var(--ink); border-color: var(--walnut); } /* Print stylesheet: when printing the recipe card from the popup window, strip everything that isn't the recipe text. */ @media print { body * { visibility: hidden; } pre, h1, .meta { visibility: visible; } pre { position: static !important; } } /* ====== Character popup ====== Pharmacist (Ingredient Lookup), Gardener (Garden), Mixologist (Wines & Spirits, Grow Your Bar), Herbalist (Medicinal Plants). Same module, four thematic characters who "tell" the visitor about the item they clicked. */ body.char-open { overflow: hidden; } .char-overlay { position: fixed; inset: 0; background: rgba(20, 14, 10, 0.55); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 1.2rem; /* No backdrop blur and no entry fade. The 2px blur was causing visible repaint flicker on some hardware (the "flashing" Terry was seeing on Henry's vitamin cards). The 0.18s fade-in compounded it by triggering a backdrop-filter recalculation mid-animation. Popup now appears instantly. */ } .char-overlay[hidden] { display: none; } .char-panel { --char-color: #4a7faa; --char-bg: #eef4f9; position: relative; background: var(--white); border: 1px solid var(--border); border-top: 6px solid var(--char-color); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.4); animation: charRise 0.22s ease both; } @keyframes charRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .char-close { position: absolute; top: 0.6rem; right: 0.6rem; width: 36px; height: 36px; background: var(--white); border: 1px solid var(--border); border-radius: 50%; font-size: 1.4rem; line-height: 1; color: var(--ink); cursor: pointer; z-index: 2; } .char-close:hover { border-color: var(--char-color); color: var(--char-color); } .char-header { display: grid; grid-template-columns: 180px 1fr; gap: 1.2rem; padding: 1.4rem 1.4rem 1.2rem; background: var(--char-bg); border-bottom: 1px solid var(--border); align-items: end; } @media (max-width: 540px) { .char-header { grid-template-columns: 110px 1fr; gap: 0.8rem; padding: 1rem; } } .char-avatar { display: block; } .char-avatar svg { width: 100%; height: auto; max-width: 120px; } /* Illustrated portrait with a blinking effect: the "eyes open" image is normally on top; we briefly swap to "eyes closed" via the animation below. Each character runs on a slightly offset cycle so multiple characters don't blink in lockstep on the rare page that shows two. */ .char-avatar-img-wrap { position: relative; width: 100%; max-width: 200px; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(60,40,20,0.18); } .char-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .char-avatar-open { z-index: 1; } .char-avatar-closed { z-index: 2; opacity: 0; /* Slower cycle + linear easing with explicit fade-in/fade-out keyframes. The old steps(1, end) snap blink read as a hard flash up close in the character popup. Soft fade matches the homepage Margaret blink that Terry approved earlier. */ animation: charBlink 9s linear infinite; } @keyframes charBlink { 0%, 93% { opacity: 0; } 94% { opacity: 0.5; } 95%, 96% { opacity: 1; } 97% { opacity: 0.5; } 98%, 100% { opacity: 0; } } /* Stagger so the three characters never blink at the exact same instant */ .char-panel[data-char="gardener"] .char-avatar-closed { animation-delay: 1.3s; } .char-panel[data-char="mixologist"] .char-avatar-closed { animation-delay: 2.6s; } .char-panel[data-char="pharmacist"] .char-avatar-closed { animation-delay: 0.4s; } .char-panel[data-char="herbalist"] .char-avatar-closed { animation-delay: 3.7s; } .char-panel[data-char="doctor"] .char-avatar-closed { animation-delay: 1.9s; } .char-panel[data-char="forager"] .char-avatar-closed { animation-delay: 4.2s; } .char-panel[data-char="factchecker"] .char-avatar-closed { animation-delay: 2.1s; } .char-panel[data-char="nutritionist"] .char-avatar-closed { animation-delay: 3.1s; } /* Listen button: top-right of character popup, next to close. Visible only when the character has a voiceId in their record (Margaret, Henry, ...). State labels swap on idle/loading/playing. */ .char-listen { position: absolute; top: 1rem; right: 3.4rem; display: inline-flex; align-items: center; gap: 0.4rem; background: var(--char-color); color: #fffaf0; border: none; border-radius: 999px; padding: 0.4rem 0.9rem; font-family: var(--sans); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.05s; z-index: 2; } .char-listen:hover { filter: brightness(0.92); } .char-listen:active { transform: translateY(1px); } .char-listen[data-state="loading"] { opacity: 0.7; cursor: wait; } .char-listen-icon { font-size: 0.95rem; line-height: 1; } .char-listen-label { font-size: 0.82rem; } @media (max-width: 520px) { .char-listen { right: 2.8rem; padding: 0.35rem 0.7rem; } .char-listen-label { display: none; } } .char-speech { min-width: 0; padding-top: 0.4rem; } .char-bubble { position: relative; background: var(--white); border: 1px solid var(--char-color); border-radius: 14px; padding: 0.55rem 0.85rem; margin-bottom: 0.5rem; } .char-bubble::after { content: ""; position: absolute; left: -10px; bottom: 12px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 10px solid var(--char-color); } .char-bubble::before { content: ""; position: absolute; left: -7px; bottom: 13px; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 9px solid var(--white); z-index: 1; } .char-bubble-intro { margin: 0; font-family: var(--serif); font-size: 0.92rem; color: var(--ink); line-height: 1.4; } .char-bubble-intro strong { color: var(--char-color); } .char-title { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 0; color: var(--ink); } .char-subtitle { margin: 0.15rem 0 0; font-family: var(--serif); font-style: italic; color: var(--muted); font-size: 0.88rem; } .char-body { padding: 1rem 1.4rem 1.2rem; } .char-section { margin: 0.7rem 0; } .char-section-heading { font-family: var(--sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--char-color); margin: 0 0 0.25rem; } .char-section p { margin: 0.3rem 0; font-size: 0.94rem; line-height: 1.55; color: var(--ink); } .char-sources { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--border); } .char-sources a { font-family: var(--sans); font-size: 0.84rem; color: var(--char-color); text-decoration: none; } .char-sources a:hover { text-decoration: underline; } .char-actions { margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; } .char-action-btn { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; padding: 0.45rem 0.95rem; background: var(--char-color); color: var(--white); border: 1px solid var(--char-color); border-radius: 999px; cursor: pointer; transition: filter 0.15s, transform 0.1s; } .char-action-btn:hover { filter: brightness(0.9); transform: translateY(-1px); } /* Remove button inside Bottle Builder recipe table */ .bb-row-remove { width: 32px; text-align: right; padding-right: 0.3rem !important; } .bb-remove-btn { width: 24px; height: 24px; background: transparent; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s, background 0.15s; } .bb-remove-btn:hover { border-color: var(--red); color: var(--white); background: var(--red); } /* Stoplight verdict gets a Fact-Checker call-out */ .sl-factchecker-btn { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; font-family: var(--sans); font-size: 0.88rem; font-weight: 600; padding: 0.5rem 1rem; background: #5a6a8a; color: #fff; border: 1px solid #5a6a8a; border-radius: 999px; cursor: pointer; transition: filter 0.15s, transform 0.1s; } .sl-factchecker-btn:hover { filter: brightness(0.92); transform: translateY(-1px); } /* Shared Print / Save toolbar. Used on Stoplight verdicts, Medicinal Plants cards, Trending Treatments cards, and Ages and Doses lookups. */ .ps-share-bar { display: inline-flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; } .ps-share-btn { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; padding: 0.32rem 0.75rem; background: var(--white); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; } .ps-share-btn:hover { border-color: var(--walnut); background: var(--bg-warm-soft); color: var(--walnut); } .ps-share-btn-print { background: var(--ink); color: var(--white); border-color: var(--ink); } .ps-share-btn-print:hover { background: var(--walnut); border-color: var(--walnut); color: var(--white); } .ps-share-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Ages and Doses: title + share bar in one row */ .ages-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* ====== Meet the Dose Team (homepage) ====== Eight illustrated portraits with name, role, one-line bio, link to the page where each character works. Blink animations staggered per card so they don't cycle in unison. */ .dose-team { padding: 4rem 0 3rem; background: radial-gradient(ellipse at 80% 0%, rgba(200,134,44,0.05), transparent 55%), linear-gradient(180deg, var(--bg-warm-soft), var(--bg)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .team-heading { font-family: var(--serif); font-weight: 500; font-size: 2rem; color: var(--ink); margin: 0 0 0.4rem; } .team-sub { font-family: var(--sans); font-size: 0.95rem; color: var(--muted); line-height: 1.55; margin: 0 0 1.8rem; } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 980px) { .team-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .team-grid { grid-template-columns: 1fr; } } .team-card { --team-color: var(--walnut); display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-top: 5px solid var(--team-color); border-radius: var(--radius); text-decoration: none; color: inherit; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .team-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(60,40,20,0.18); border-color: var(--team-color); } .team-portrait { position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--bg-warm-soft); overflow: hidden; } .team-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .team-portrait-open { z-index: 1; } .team-portrait-closed { z-index: 2; opacity: 0; animation: charBlink 6.2s steps(1, end) infinite; } /* (charBlink keyframes already defined for the popup) */ .team-card-body { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .team-name { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; color: var(--ink); } .team-role { font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--team-color); margin-bottom: 0.15rem; } .team-bio { font-family: var(--sans); font-size: 0.85rem; color: var(--ink); line-height: 1.5; margin: 0.2rem 0 0.4rem; flex: 1; } .team-cta { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--team-color); transition: transform 0.15s; text-decoration: none; } .team-card:hover .team-cta { transform: translateX(3px); } /* CTA row at the bottom of each team card: IM button + Visit link. */ .team-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: auto; padding-top: 0.4rem; } .team-im-btn { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: #fff; background: var(--team-color); border: none; padding: 0.45rem 0.85rem; border-radius: 4px; cursor: pointer; transition: opacity 0.15s, transform 0.15s; } .team-im-btn:hover { opacity: 0.9; transform: translateY(-1px); } .team-im-btn:focus-visible { outline: 2px solid var(--team-color); outline-offset: 2px; } /* Two-button "Their story / Their role" voice pair under each team card. Only rendered for characters with voiceId + bioLong + roleLong. */ .team-voice-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.4rem 0 0.8rem; } .team-voice-row { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid rgba(0,0,0,0.15); background: rgba(255,255,255,0.6); font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--team-color, #444); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; text-align: left; line-height: 1; border-radius: 4px; } .team-voice-row:hover { background: rgba(255,255,255,0.9); border-color: var(--team-color, #444); } .team-voice-row[data-state="playing"] { background: var(--team-color, #444); color: #fff; border-color: var(--team-color, #444); } .team-voice-row[data-state="loading"] { color: rgba(0,0,0,0.4); } .team-voice-row[data-state="loading"] .team-voice-glyph { display: none; } .team-voice-row[data-state="loading"]::before { content: ""; display: inline-block; width: 9px; height: 9px; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: team-voice-spin 0.7s linear infinite; } @keyframes team-voice-spin { to { transform: rotate(360deg); } } .team-voice-row[data-state="error"] { border-color: #b54a2c; color: #b54a2c; } .team-voice-glyph { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; font-size: 0.55rem; flex-shrink: 0; } .team-voice-label { flex: 1; } /* ====== Food as Medicine ====== */ .food-as-medicine { padding: 4rem 0; } .fam-step-label { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--walnut); margin: 1.6rem 0 0.6rem; } .fam-conditions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; } .fam-cond-btn { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--sans); font-size: 0.85rem; padding: 0.45rem 0.9rem; background: var(--white); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; color: var(--ink); transition: border-color 0.15s, background 0.15s, transform 0.1s; } .fam-cond-btn:hover { border-color: var(--amber); transform: translateY(-1px); } .fam-cond-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); } .fam-cond-emoji { font-size: 1.05rem; line-height: 1; } .fam-cond-count { font-family: var(--sans); font-size: 0.72rem; opacity: 0.7; margin-left: 0.2rem; } .fam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; } .fam-card { padding: 1.1rem 1.2rem 1.1rem; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s; } .fam-card:hover { box-shadow: var(--shadow); transform: translateY(-1px); } .fam-card-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.6rem; } .fam-card-emoji { font-size: 2.2rem; line-height: 1; } .fam-card-food { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin: 0; line-height: 1.2; } .fam-card-verdict { display: flex; align-items: center; gap: 0.35rem; margin: 0.15rem 0 0; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); } .fam-card-conds { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0 0.6rem; } .fam-card-cond { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--sans); font-size: 0.72rem; padding: 0.18rem 0.55rem; background: var(--bg-warm-soft); border: 1px solid var(--border); border-radius: 999px; color: var(--walnut); } .fam-card-effect { font-size: 0.92rem; color: var(--ink); margin: 0.4rem 0 0.6rem; line-height: 1.55; } .fam-card-tap { font-family: var(--sans); font-size: 0.74rem; color: var(--muted); font-style: italic; margin: 0; } .fam-footer-note { margin-top: 1.4rem; padding: 0.9rem 1.1rem; background: var(--bg-warm-soft); border: 1px solid var(--border); border-left: 4px solid var(--walnut); border-radius: 8px; font-family: var(--sans); font-size: 0.88rem; color: var(--ink); font-style: italic; } /* "What's next?" cross-link strip that auto-attaches to every page above the footer. Two to four sister cards, one-line "why this next" blurb. */ #related-pages:empty { display: none; } #related-pages { margin: 3rem 0 2rem; padding: 2rem 0; background: radial-gradient(ellipse at 80% 20%, rgba(200,134,44,0.06), transparent 55%), linear-gradient(180deg, var(--bg), var(--bg-warm-soft)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .related-heading { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 0 0 0.2rem; color: var(--ink); } .related-sub { margin: 0 0 1.2rem; color: var(--muted); font-size: 0.92rem; font-style: italic; } .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; } .related-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--walnut); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s; } .related-card:hover { border-color: var(--amber); border-left-color: var(--amber); transform: translateY(-1px); box-shadow: var(--shadow); } .related-card-emoji { font-size: 1.7rem; line-height: 1; } .related-card-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .related-card-label { font-family: var(--serif); font-size: 1.02rem; font-weight: 500; color: var(--ink); } .related-card-blurb { font-family: var(--sans); font-size: 0.82rem; color: var(--muted); line-height: 1.4; } .related-card-arrow { font-family: var(--sans); font-size: 1.1rem; color: var(--walnut); font-weight: 600; transition: transform 0.15s; } .related-card:hover .related-card-arrow { transform: translateX(3px); color: var(--orange); } .ws-section-divider { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--walnut); margin: 2.4rem 0 1rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); } .ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-top: 1rem; } /* Collapsed-by-default tile: big emoji, name, plant, legal badge. Click to expand the technique / fun fact / caveat section. */ .ws-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .ws-card:hover { border-color: var(--amber); box-shadow: var(--shadow); } .ws-card.expanded { grid-column: 1 / -1; border-color: var(--walnut); } @media (min-width: 720px) { .ws-card.expanded { grid-column: span 2; } } .ws-card-tile { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 1.4rem 1rem 1.2rem; width: 100%; background: transparent; border: none; cursor: pointer; font-family: inherit; text-align: center; color: var(--ink); } .ws-card-emoji-big { font-size: 3.6rem; line-height: 1; display: block; } .ws-card-name { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; margin: 0.3rem 0 0.1rem; line-height: 1.2; } .ws-card-plant { font-family: var(--serif); font-size: 0.78rem; color: var(--muted); margin: 0; font-style: italic; } .ws-legal { display: inline-block; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; padding: 0.2rem 0.55rem; border-radius: 999px; } .ws-legal-yes { background: rgba(74,138,58,0.12); color: var(--green); } .ws-legal-no { background: rgba(181,74,44,0.12); color: var(--red); } .ws-expand-hint { font-family: var(--sans); font-size: 0.74rem; color: var(--muted); font-style: italic; margin-top: 0.4rem; } .ws-card.expanded .ws-expand-hint { display: none; } .ws-card-details { padding: 0 1.3rem 1.3rem; border-top: 1px solid var(--border); animation: fadeIn 0.3s ease both; } .ws-card-details > * { margin-top: 0.6rem; } .ws-section { margin: 0.3rem 0; } .ws-section p { margin: 0; font-size: 0.9rem; color: var(--ink); line-height: 1.55; } .ws-section-label { display: block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--walnut); margin-bottom: 0.2rem; } .ws-fun { padding: 0.6rem 0.8rem; background: rgba(244,214,138,0.22); border-left: 4px solid var(--amber); border-radius: 4px; } .ws-fun .ws-section-label { color: var(--amber); } .ws-caveat { padding: 0.6rem 0.8rem; background: rgba(181,74,44,0.06); border-left: 4px solid var(--red); border-radius: 4px; } .ws-caveat .ws-section-label { color: var(--red); } /* EATING DISORDERS page — lead-with-help, type cards, myth->reality blocks */ .eating-disorders { padding: 3rem 0 4rem; } .ed-lede { font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; color: var(--ink); margin: 1.2rem 0 2rem; max-width: 52rem; } /* Help block first so the page leads with action, not theory */ .ed-help { background: rgba(181,74,44,0.06); border: 1px solid rgba(181,74,44,0.3); border-left: 5px solid var(--red); border-radius: var(--radius); padding: 1.4rem 1.5rem 1.5rem; margin-bottom: 2.4rem; } .ed-help-title { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; margin: 0 0 1rem; color: var(--red); } .ed-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.8rem; } .ed-resource { display: block; background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem 1rem; text-decoration: none; color: var(--ink); transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; } .ed-resource:hover { transform: translateY(-2px); border-color: var(--red); box-shadow: var(--shadow); } .ed-resource-name { font-family: var(--serif); font-weight: 500; font-size: 1rem; margin: 0 0 0.3rem; color: var(--ink); } .ed-resource-contact { font-family: var(--sans); font-size: 0.92rem; color: var(--red); font-weight: 600; margin: 0 0 0.4rem; } .ed-resource-note { font-size: 0.85rem; color: var(--muted); margin: 0; line-height: 1.5; } .ed-section { margin-bottom: 2.4rem; } .ed-section-title { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 0 0 0.5rem; } .ed-section-blurb { font-size: 0.95rem; color: var(--muted); margin: 0 0 1.2rem; font-style: italic; } .ed-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .ed-type { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; } .ed-type-head { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0.4rem; } .ed-type-emoji { font-size: 1.8rem; line-height: 1; } .ed-type-name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 0; } .ed-type-one-liner { font-size: 0.92rem; color: var(--ink); margin: 0 0 0.4rem; } .ed-type-section { margin: 0.2rem 0; } .ed-type-label { display: block; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--walnut); margin-bottom: 0.2rem; } .ed-type-section p, .ed-type-severity p { margin: 0; font-size: 0.88rem; color: var(--ink); line-height: 1.5; } .ed-type-severity { padding: 0.55rem 0.75rem; background: rgba(181,74,44,0.06); border-left: 4px solid var(--red); border-radius: 4px; margin: 0.3rem 0; } .ed-type-severity-label { display: block; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--red); margin-bottom: 0.2rem; } .ed-myths { display: flex; flex-direction: column; gap: 0.9rem; } .ed-myth-block { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } @media (max-width: 720px) { .ed-myth-block { grid-template-columns: 1fr; } } .ed-myth-side { padding: 1rem 1.1rem; border-radius: 8px; } .ed-myth-myth { background: rgba(181,74,44,0.07); border-left: 4px solid var(--red); } .ed-myth-reality { background: rgba(74,138,58,0.07); border-left: 4px solid var(--green); } .ed-myth-label { display: block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; margin-bottom: 0.4rem; } .ed-myth-myth .ed-myth-label { color: var(--red); } .ed-myth-reality .ed-myth-label { color: var(--green); } .ed-myth-side p { margin: 0; font-size: 0.95rem; color: var(--ink); line-height: 1.55; } .ed-signs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.5rem; } .ed-sign { padding: 0.7rem 0.9rem 0.7rem 1.6rem; background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--amber); border-radius: 6px; font-size: 0.92rem; color: var(--ink); line-height: 1.5; position: relative; } .ed-sign::before { content: "•"; position: absolute; left: 0.7rem; color: var(--amber); font-weight: 700; } /* NOVA PROCESSING SPECTRUM — visual at the top of /diets.html */ .nova-spectrum { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.6rem; margin: 1.6rem 0 1.4rem; } .nova-title { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 0 0 0.4rem; } .nova-lede { font-size: 0.95rem; color: var(--ink); margin: 0 0 1.2rem; } .nova-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } @media (max-width: 960px) { .nova-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .nova-grid { grid-template-columns: 1fr; } } .nova-level { position: relative; padding: 1rem 0.9rem 1rem; border-radius: 8px; border-left: 5px solid transparent; display: flex; flex-direction: column; gap: 0.5rem; } .nova-1 { background: rgba(74,138,58,0.08); border-left-color: var(--green); } .nova-2 { background: rgba(168,212,154,0.18); border-left-color: #6b8a30; } .nova-3 { background: rgba(216,168,58,0.12); border-left-color: var(--yellow); } .nova-4 { background: rgba(181,74,44,0.10); border-left-color: var(--red); } .nova-num { position: absolute; top: 0.6rem; right: 0.8rem; font-family: var(--serif); font-size: 1.8rem; font-weight: 700; opacity: 0.4; line-height: 1; } .nova-1 .nova-num { color: var(--green); } .nova-2 .nova-num { color: #6b8a30; } .nova-3 .nova-num { color: var(--yellow); } .nova-4 .nova-num { color: var(--red); } .nova-level-title { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; margin: 0; padding-right: 2rem; line-height: 1.25; } .nova-examples { font-size: 1.6rem; line-height: 1.2; letter-spacing: 0.15em; } .nova-desc { font-size: 0.86rem; color: var(--ink); margin: 0; line-height: 1.5; } .nova-stat { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); margin: 0; letter-spacing: 0.03em; } .nova-stat strong { color: var(--ink); font-size: 1.1rem; font-variant-numeric: tabular-nums; } .nova-stat-kids { display: block; font-size: 0.74rem; opacity: 0.85; } .nova-source { margin: 1.2rem 0 0; padding: 0.8rem 1rem; background: rgba(244,214,138,0.2); border-left: 4px solid var(--amber); border-radius: 6px; font-size: 0.9rem; color: var(--ink); line-height: 1.5; } .nova-source a { color: var(--walnut); font-weight: 500; } .nova-source a:hover { color: var(--orange); } /* Winter callout on the wild-foraging page */ .wf-winter-note { display: flex; align-items: flex-start; gap: 0.9rem; padding: 1.1rem 1.3rem; background: linear-gradient(180deg, rgba(168,196,216,0.25), rgba(168,196,216,0.10)); border: 1px solid rgba(168,196,216,0.45); border-left: 5px solid #6b8aa6; border-radius: var(--radius); margin-bottom: 1rem; grid-column: 1 / -1; } .wf-winter-emoji { font-size: 2rem; line-height: 1; } .wf-winter-title { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin: 0 0 0.3rem; color: var(--ink); } .wf-winter-text { margin: 0; font-size: 0.92rem; color: var(--ink); line-height: 1.5; } /* DIETS, RATED — 1-to-10 sliding-scale cards */ .diets { padding: 4rem 0; } .diets-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin: 1.4rem 0 0.6rem; } .diet-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; } .diet-filter { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.85rem; padding: 0.35rem 0.8rem; background: var(--white); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .diet-filter:hover { border-color: var(--amber); } .diet-filter.active { background: var(--ink); color: var(--white); border-color: var(--ink); } .diet-filter-count { font-size: 0.74rem; opacity: 0.75; font-variant-numeric: tabular-nums; } .diet-sort { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-size: 0.85rem; color: var(--muted); } .diet-sort-label { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .diet-sort-select { font-family: var(--sans); font-size: 0.88rem; padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--white); color: var(--ink); } .diets-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; } .diet-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; } .diet-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; } .diet-name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 0; color: var(--ink); line-height: 1.2; } .diet-score { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; } .diet-score-suffix { font-size: 0.7em; color: var(--muted); font-weight: 400; } .diet-score-green { color: var(--green); } .diet-score-yellow { color: var(--yellow); } .diet-score-orange { color: var(--orange); } .diet-score-red { color: var(--red); } .diet-one-liner { font-size: 0.95rem; color: var(--ink); margin: 0; } /* Sliding-scale bar: red to yellow to green gradient with a marker */ .diet-scale { position: relative; height: 18px; margin: 0.5rem 0 1rem; } .diet-scale-bar { position: absolute; top: 6px; left: 0; right: 0; height: 8px; background: linear-gradient(to right, #b54a2c 0%, #d8a83a 50%, #4a8a3a 100%); border-radius: 4px; } .diet-scale-marker { position: absolute; top: -2px; width: 22px; height: 22px; background: var(--white); border: 3px solid var(--ink); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 1px 4px rgba(0,0,0,0.2); } .diet-scale-labels { position: absolute; bottom: -16px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); font-variant-numeric: tabular-nums; } .diet-scale-labels span:nth-child(2) { position: absolute; left: 50%; transform: translateX(-50%); } .diet-section { border-left: 4px solid var(--border); padding: 0.55rem 0.8rem; border-radius: 0 6px 6px 0; font-size: 0.9rem; } .diet-section p { margin: 0; } .diet-section-label { display: block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; margin-bottom: 0.25rem; } .diet-section-good { border-left-color: var(--green); background: rgba(74,138,58,0.06); } .diet-section-good .diet-section-label { color: var(--green); } .diet-section-bad { border-left-color: var(--red); background: rgba(181,74,44,0.06); } .diet-section-bad .diet-section-label { color: var(--red); } .diet-section-confusion { border-left-color: var(--amber); background: rgba(200,134,44,0.08); } .diet-section-confusion .diet-section-label { color: var(--amber); } /* PLANT YOUR GARDEN */ .garden { padding: 4rem 0; } .garden-controls { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1.4rem; align-items: end; margin: 1.6rem 0 1.6rem; } @media (max-width: 780px) { .garden-controls { grid-template-columns: 1fr; } } .garden-control { display: flex; flex-direction: column; gap: 0.4rem; } .garden-control-label { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .garden-zone-slider { width: 100%; accent-color: var(--green); } .garden-zone-value { font-family: var(--serif); font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; } .garden-season-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .garden-season-btn { font-family: var(--sans); font-size: 0.88rem; padding: 0.4rem 0.9rem; background: transparent; color: var(--ink); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .garden-season-btn:hover { border-color: var(--amber); } .garden-season-btn.active { background: var(--green); color: var(--white); border-color: var(--green); } .garden-board { display: grid; grid-template-columns: minmax(180px, 220px) 1fr minmax(220px, 280px); gap: 1.2rem; align-items: start; } @media (max-width: 980px) { .garden-board { grid-template-columns: 1fr; } } .garden-side-title { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; font-weight: 600; } .garden-palette-col, .garden-detail-col { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem; max-height: 540px; overflow-y: auto; } .garden-palette { display: flex; flex-direction: column; gap: 0.5rem; } .garden-palette-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; background: var(--white); border: 1px solid var(--border); border-radius: 8px; cursor: grab; text-align: left; font-family: var(--sans); transition: border-color 0.15s, transform 0.1s; } .garden-palette-card:hover { border-color: var(--amber); } .garden-palette-card:active { cursor: grabbing; } .garden-palette-card.dragging { opacity: 0.5; } .garden-palette-emoji { font-size: 1.6rem; line-height: 1; } .garden-palette-name { font-size: 0.95rem; color: var(--ink); font-weight: 500; flex: 1; } .garden-palette-meta { display: block; font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .garden-palette-card { flex-wrap: wrap; } .garden-palette-card .garden-palette-name, .garden-palette-card .garden-palette-meta { width: calc(100% - 2.2rem); } .garden-palette-empty { font-size: 0.88rem; color: var(--muted); font-style: italic; } .garden-plot { display: grid; grid-template-columns: repeat(var(--plot-cols, 6), 1fr); gap: 4px; padding: 8px; background: #6b4f3a; border-radius: var(--radius); } .garden-square { aspect-ratio: 1 / 1; background: #d2b48c; border: 2px dashed #b89a6e; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s, border-color 0.15s; } .garden-square:hover { background: #c8a574; } .garden-square.over { background: #f4d68a; border-color: var(--amber); border-style: solid; } .garden-square.filled { background: #8eb04a; border-style: solid; border-color: #6b8a30; } .garden-plant { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1; } .garden-plot-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-top: 0.8rem; flex-wrap: wrap; } .garden-clear-btn { font-family: var(--sans); font-size: 0.85rem; padding: 0.4rem 0.9rem; background: transparent; color: var(--walnut); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; } .garden-clear-btn:hover { border-color: var(--red); color: var(--red); } .garden-textbook-link { font-family: var(--sans); font-size: 0.85rem; color: var(--walnut); text-decoration: none; } .garden-textbook-link:hover { color: var(--orange); } .garden-detail-empty { font-size: 0.88rem; color: var(--muted); font-style: italic; } .garden-detail-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } .garden-detail-emoji { font-size: 2.4rem; line-height: 1; } .garden-detail-name { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin: 0; } .garden-detail-latin { font-family: var(--serif); font-size: 0.88rem; color: var(--muted); margin: 0; } .garden-detail-grow { font-size: 0.9rem; color: var(--ink); margin-bottom: 0.7rem; } .garden-detail-grow p { margin: 0 0 0.4rem; } .garden-detail-note { color: var(--muted); font-style: italic; } .garden-detail-med { border-top: 1px solid var(--border); padding-top: 0.7rem; font-size: 0.9rem; } .garden-detail-med p { margin: 0 0 0.5rem; } .garden-fun-fact, .plant-fun-fact { margin: 0.6rem 0; padding: 0.7rem 0.85rem; background: rgba(244,214,138,0.22); border-left: 4px solid var(--amber); border-radius: 6px; } .garden-fun-fact-label, .plant-fun-fact-label { display: block; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--amber); margin-bottom: 0.25rem; } .garden-fun-fact-text, .plant-fun-fact-text { margin: 0; font-size: 0.92rem; color: var(--ink); line-height: 1.5; } .garden-feedback-section { margin-top: 1.6rem; padding: 1rem 1.2rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); } .garden-feedback { display: flex; flex-direction: column; gap: 0.5rem; } .garden-feedback-empty { font-size: 0.88rem; color: var(--muted); font-style: italic; margin: 0; } .garden-feedback-item { font-size: 0.92rem; padding: 0.55rem 0.8rem; border-radius: 8px; border-left: 4px solid var(--border); } .garden-feedback-good { background: rgba(74,138,58,0.08); border-left-color: var(--green); } .garden-feedback-warn { background: rgba(216,168,58,0.1); border-left-color: var(--yellow); } .garden-feedback-neutral { background: rgba(107,79,58,0.06); border-left-color: var(--walnut); } /* DAILY CROSSWORD */ .crossword { padding: 4rem 0; } .cw-meta { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 1.4rem; font-size: 0.9rem; } .cw-theme-label { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .cw-theme { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); font-weight: 500; } .cw-blurb { font-size: 0.95rem; color: var(--muted); font-style: italic; margin: 0.4rem 0 1.4rem; } .cw-board { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 1.6rem; align-items: start; } @media (max-width: 820px) { .cw-board { grid-template-columns: 1fr; } } .cw-grid { display: grid; grid-template-columns: repeat(var(--cw-cols, 5), 1fr); gap: 2px; padding: 6px; background: var(--ink); border-radius: var(--radius); max-width: 360px; } .cw-cell { aspect-ratio: 1 / 1; position: relative; background: var(--white); border-radius: 2px; display: flex; align-items: center; justify-content: center; } .cw-cell-blocked { background: var(--ink); } .cw-cell-num { position: absolute; top: 1px; left: 3px; font-size: 0.65rem; font-family: var(--sans); color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; } .cw-cell-input { width: 100%; height: 100%; border: none; background: transparent; text-align: center; font-family: var(--sans); font-size: clamp(1.2rem, 4vw, 1.6rem); font-weight: 600; color: var(--ink); text-transform: uppercase; padding: 0; caret-color: var(--amber); } .cw-cell-input:focus { outline: none; } .cw-cell.cw-active-cell { background: var(--candlelight); } .cw-cell.cw-active-word:not(.cw-active-cell) { background: rgba(244,214,138,0.4); } .cw-cell-input.cw-correct { color: var(--green); } .cw-cell-input.cw-incorrect { color: var(--red); } .cw-clues { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 540px) { .cw-clues { grid-template-columns: 1fr; } } .cw-clue-block { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1rem 1rem; } .cw-clue-heading { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; font-weight: 600; } .cw-clue-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--sans); font-size: 0.92rem; color: var(--ink); } .cw-clue { cursor: pointer; padding: 0.25rem 0.45rem; border-radius: 6px; transition: background 0.15s; } .cw-clue:hover { background: rgba(200,134,44,0.08); } .cw-clue.active { background: var(--candlelight); font-weight: 500; } .cw-clue-num { font-weight: 600; color: var(--walnut); margin-right: 0.3rem; font-variant-numeric: tabular-nums; } .cw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.4rem; } .cw-btn { font-family: var(--sans); font-size: 0.9rem; padding: 0.5rem 1.1rem; background: var(--white); color: var(--ink); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .cw-btn:hover { border-color: var(--amber); } .cw-btn-primary { background: var(--ink); color: var(--white); border-color: var(--ink); } .cw-btn-primary:hover { background: var(--orange); border-color: var(--orange); } .cw-status { font-size: 0.92rem; color: var(--muted); margin: 0 0 0 0.4rem; } /* DAILY WORD SEARCH */ .word-search { padding: 4rem 0; } .ws-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1rem; margin-top: 1.4rem; font-size: 0.9rem; color: var(--muted); } .ws-theme-label { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .ws-theme { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); font-weight: 500; } .ws-progress { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); } .ws-progress span { font-weight: 600; } .ws-blurb { font-size: 0.95rem; color: var(--muted); font-style: italic; margin: 0.4rem 0 1rem; } .ws-size-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1.2rem; } .ws-size-label { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-right: 0.3rem; } .ws-size-btn { font-family: var(--sans); font-size: 0.88rem; padding: 0.35rem 0.8rem; background: transparent; color: var(--ink); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .ws-size-btn:hover { border-color: var(--amber); } .ws-size-btn.active { background: var(--ink); color: var(--white); border-color: var(--ink); } .ws-board { display: grid; grid-template-columns: 1fr minmax(180px, 220px); gap: 1.6rem; align-items: start; } @media (max-width: 780px) { .ws-board { grid-template-columns: 1fr; } } .ws-grid { display: grid; grid-template-columns: repeat(var(--ws-grid-size, 14), 1fr); gap: 2px; padding: 8px; background: var(--ink); border-radius: var(--radius); user-select: none; -webkit-user-select: none; touch-action: none; } .ws-cell { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: var(--ws-cell-font, clamp(0.9rem, 2vw, 1.2rem)); font-weight: 600; color: var(--ink); background: var(--white); border: none; border-radius: 2px; cursor: pointer; transition: background 0.1s, color 0.1s, transform 0.1s; padding: 0; } /* User-selectable cell sizes; defaults to "large" via the data-size attribute on the .word-search section. Persisted in localStorage by word-search.js. */ .word-search[data-size="normal"] .ws-cell { font-size: clamp(0.8rem, 1.6vw, 1rem); } .word-search[data-size="large"] .ws-cell { font-size: clamp(1rem, 2.2vw, 1.4rem); } .word-search[data-size="xl"] .ws-cell { font-size: clamp(1.2rem, 2.8vw, 1.8rem); font-weight: 700; } .word-search[data-size="xl"] .ws-grid { gap: 3px; padding: 10px; } .word-search[data-size="xl"] .ws-words { font-size: 1.05rem; } .word-search[data-size="large"] .ws-words { font-size: 0.98rem; } .ws-cell:hover { background: var(--candlelight); } .ws-cell.selecting { background: var(--amber); color: var(--white); } .ws-cell.found { background: var(--green); color: var(--white); } .ws-cell.found.selecting { /* a cell that was already found should not look "selectable" again */ background: var(--green); } .ws-side { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem; } .ws-side-title { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.7rem; font-weight: 600; } .ws-words { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--sans); font-size: 0.92rem; color: var(--ink); } .ws-words li { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; display: flex; flex-direction: column; gap: 0.2rem; } .ws-words li.found .ws-word { text-decoration: line-through; color: var(--muted); } .ws-words li.found .ws-definition { display: block; } .ws-definition { font-size: 0.78rem; color: var(--ink); margin: 0.1rem 0 0.3rem 0.2rem; padding: 0.45rem 0.6rem; background: rgba(74,138,58,0.08); border-left: 3px solid var(--green); border-radius: 4px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45; animation: fadeIn 0.4s ease both; } .ws-win { margin-top: 1.6rem; padding: 1.2rem 1.4rem; background: rgba(74,138,58,0.08); border: 1px solid rgba(74,138,58,0.3); border-radius: var(--radius); } .ws-win-title { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; color: var(--green); margin: 0 0 0.4rem; } .ws-win-text { font-size: 0.95rem; color: var(--ink); margin: 0; } /* MYTHBUSTER */ .mythbuster { padding: 4rem 0; background: linear-gradient(180deg, transparent, rgba(216,220,224,0.4)); } .myth-board { margin-top: 1.6rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.8rem; max-width: 44rem; } .myth-meta { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.03em; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .myth-score-line strong { color: var(--ink); font-weight: 600; } .myth-prompt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.6rem; } .myth-prompt-real { color: var(--green); font-weight: 600; } .myth-prompt-myth { color: var(--red); font-weight: 600; } .myth-claim { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; line-height: 1.25; margin: 0 0 1.2rem; } .myth-answers { display: flex; gap: 0.8rem; margin-bottom: 1.2rem; } .myth-btn { flex: 1; font-family: var(--sans); font-size: 1rem; font-weight: 500; padding: 0.85rem 1rem; border: 1px solid var(--border); background: var(--white); color: var(--ink); border-radius: var(--radius); cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .myth-btn:hover:not(:disabled) { border-color: var(--amber); transform: translateY(-1px); } .myth-btn:disabled { cursor: default; opacity: 0.78; } .myth-btn.correct { background: var(--green); border-color: var(--green); color: var(--white); opacity: 1; } .myth-btn.incorrect { background: var(--red); border-color: var(--red); color: var(--white); opacity: 1; } .myth-reveal { margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--border); animation: fadeIn 0.3s ease both; } .myth-reveal-meta { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 0.4rem; font-weight: 600; } .myth-reveal-meta.right { color: var(--green); } .myth-reveal-meta.wrong { color: var(--red); } .myth-badge { display: inline-block; font-family: var(--sans); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; padding: 0.3rem 0.7rem; border-radius: 999px; margin-bottom: 0.6rem; } .myth-badge-green { background: rgba(74,138,58,0.15); color: var(--green); } .myth-badge-yellow { background: rgba(216,168,58,0.18); color: #8a6a18; } .myth-badge-red { background: rgba(181,74,44,0.15); color: var(--red); } .myth-reveal-text { font-size: 0.97rem; color: var(--ink); margin: 0 0 0.9rem; } .myth-reveal-text em { color: var(--muted); font-style: italic; } .myth-source, .myth-recipe { display: block; font-size: 0.88rem; text-decoration: none; color: var(--walnut); padding: 0.4rem 0; border-top: 1px solid var(--border); } .myth-source:hover, .myth-recipe:hover { color: var(--orange); } .myth-recipe { color: var(--amber); font-weight: 500; } .myth-next { margin-top: 1rem; font-family: var(--sans); font-size: 0.95rem; font-weight: 500; padding: 0.7rem 1.3rem; background: var(--ink); color: var(--white); border: none; border-radius: var(--radius); cursor: pointer; transition: background 0.15s; } .myth-next:hover { background: var(--orange); } .myth-end { text-align: center; padding: 1rem 0 0.4rem; } .myth-end-title { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 0 0 0.6rem; } .myth-end-text { font-size: 1rem; color: var(--ink); margin: 0 0 1.2rem; } .myth-end-text strong { color: var(--amber); font-weight: 600; } /* FOOTER */ .site-footer { background: var(--ink); color: #d8d3cb; padding: 2.5rem 0 2rem; margin-top: 4rem; } .disclaimer { font-size: 0.95rem; margin: 0 0 0.8rem; } .disclaimer strong { color: var(--candlelight); } .footer-meta { font-size: 0.8rem; color: #8a857d; margin: 0; } /* POPUP */ .popup { position: fixed; inset: 0; background: rgba(20,16,12,0.55); display: none; align-items: center; justify-content: center; padding: 1.5rem; z-index: 100; } .popup.open { display: flex; } .popup-card { background: var(--white); border-radius: var(--radius); max-width: 32rem; width: 100%; padding: 1.8rem 1.8rem 1.6rem; position: relative; box-shadow: var(--shadow); } .popup-close { position: absolute; top: 0.5rem; right: 0.6rem; background: none; border: none; font-size: 1.8rem; color: var(--muted); cursor: pointer; line-height: 1; } .popup-close:hover { color: var(--ink); } .popup-title { margin-top: 0; } .popup-body { color: var(--ink); font-size: 0.98rem; } .popup-source { margin-top: 1rem; font-size: 0.85rem; color: var(--muted); padding-top: 0.8rem; border-top: 1px solid var(--border); } .popup-source a { color: var(--walnut); } /* ────────────────────────────────────────────────────────────────────── Margaret — homepage conversational layer. Two-column shell: portrait on the left (sticky-ish on desktop), conversation on the right. Collapses to single column on narrow screens with portrait pinned above. Visual language matches the rest of The Dose: cream paper, walnut accents, generous breathing room. ────────────────────────────────────────────────────────────────────── */ .margaret-chat { padding: 3rem 0 2.5rem; background: linear-gradient(180deg, #f6efe1 0%, #ede4d2 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .mc-shell { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; } @media (max-width: 760px) { .mc-shell { grid-template-columns: 1fr; gap: 1.2rem; } .mc-portrait-col { display: flex; align-items: center; gap: 1rem; } .mc-portrait { width: 140px; flex: 0 0 140px; } } .mc-portrait-col { text-align: center; } .mc-portrait { width: 300px; max-width: 100%; margin: 0 auto; background: var(--white); border-radius: 10px; padding: 6px; box-shadow: var(--shadow); overflow: hidden; position: relative; } .mc-margaret-img { width: 100%; height: auto; display: block; border-radius: 6px; } /* Closed-eyes layer fades in over the open-eyes base. Because both paintings share composition, the fade reads as just the eyes closing and opening, not as an image swap. Linear timing on a 9s cycle: eyes hold open most of the time, fade closed quickly (~100ms), hold closed briefly (~150ms), fade open (~100ms). The open-eyes painting underneath is always at full opacity, so no background ever shows through. */ .mc-margaret-closed { position: absolute; inset: 6px; width: calc(100% - 12px); opacity: 0; animation: mc-margaret-blink 9s linear infinite; } @keyframes mc-margaret-blink { 0%, 93% { opacity: 0; } 94% { opacity: 0.5; } 95%, 96% { opacity: 1; } 97% { opacity: 0.5; } 98%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mc-margaret-closed { animation: none; } } /* Homepage portrait steam — same approach as the call page, sized and positioned for the smaller portrait above the mug location. */ .mc-steam { position: absolute; left: 8%; top: 50%; width: 22%; height: 25%; pointer-events: none; z-index: 3; } .mc-steam-wisp { position: absolute; bottom: 0; width: 14px; height: 14px; background: radial-gradient(circle, rgba(255,250,240,0.55) 0%, rgba(255,250,240,0) 70%); border-radius: 50%; filter: blur(4px); opacity: 0; animation: mc-steam-rise 5.4s ease-out infinite; } .mc-steam-wisp:nth-child(1) { left: 25%; animation-delay: 0s; animation-duration: 5.4s; } .mc-steam-wisp:nth-child(2) { left: 50%; animation-delay: 1.9s; animation-duration: 6.3s; } .mc-steam-wisp:nth-child(3) { left: 72%; animation-delay: 3.6s; animation-duration: 5.9s; } @keyframes mc-steam-rise { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; } 15% { opacity: 0.6; } 50% { transform: translate(-4px, -32px) scale(1.0); opacity: 0.4; } 100% { transform: translate(6px, -80px) scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mc-steam-wisp { animation: none; opacity: 0; } } /* Homepage candle flicker. Positioned over the actual lit candle in margaret_call_listening.png — far right, behind her right shoulder, next to the fruit bowl. Re-tuned 2026-05-16; previous left:58% top:22% landed the glow over her ear. */ .mc-candle-glow { position: absolute; left: 73%; top: 14%; width: 12%; height: 18%; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, rgba(255, 190, 110, 0.55) 0%, rgba(255, 170, 90, 0.25) 35%, rgba(255, 170, 90, 0) 70%); mix-blend-mode: screen; opacity: 0.7; animation: mc-candle-flicker 12s ease-in-out infinite; } @keyframes mc-candle-flicker { 0%, 18% { opacity: 0.7; transform: scale(1.0); } 19% { opacity: 1.0; transform: scale(1.15); } 20% { opacity: 0.45; transform: scale(0.9); } 21% { opacity: 0.95; transform: scale(1.1); } 22% { opacity: 0.7; transform: scale(1.0); } 23%, 57% { opacity: 0.7; transform: scale(1.0); } 58% { opacity: 1.0; transform: scale(1.15); } 59% { opacity: 0.4; transform: scale(0.85); } 60% { opacity: 0.9; transform: scale(1.08); } 61% { opacity: 0.55; transform: scale(0.95); } 62% { opacity: 0.85; transform: scale(1.05); } 63%, 100% { opacity: 0.7; transform: scale(1.0); } } @media (prefers-reduced-motion: reduce) { .mc-candle-glow { animation: none; opacity: 0.7; } } .mc-portrait-name { margin-top: 0.8rem; font-family: var(--serif); } .mc-portrait-name strong { display: block; font-size: 1.35rem; color: var(--ink); letter-spacing: -0.01em; } .mc-portrait-name span { display: block; font-family: var(--sans); font-size: 0.88rem; color: var(--muted); font-style: italic; margin-top: 0.1rem; } .mc-portrait-alias { font-size: 0.82rem !important; color: var(--walnut) !important; font-style: normal !important; } @media (max-width: 760px) { .mc-portrait-name { text-align: left; margin-top: 0; } } .mc-conversation-col { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem 1.4rem 1.2rem; } .mc-thread { display: flex; flex-direction: column; gap: 0.9rem; max-height: 420px; overflow-y: auto; padding-right: 0.4rem; margin-bottom: 1rem; } .mc-thread::-webkit-scrollbar { width: 8px; } .mc-thread::-webkit-scrollbar-thumb { background: #d8cfbf; border-radius: 4px; } .mc-msg { display: flex; gap: 0.6rem; align-items: flex-start; } .mc-msg-visitor { justify-content: flex-end; } .mc-msg-margaret { justify-content: flex-start; } .mc-avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: #f5ecdc; color: var(--walnut); font-family: var(--serif); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 32px; border: 1px solid var(--border); font-size: 0.95rem; } .mc-bubble { max-width: 78%; padding: 0.7rem 0.95rem; border-radius: 14px; font-size: 0.98rem; line-height: 1.5; } .mc-bubble-visitor { background: var(--walnut); color: #fffaf0; border-bottom-right-radius: 4px; } .mc-bubble-margaret { background: #faf4e6; color: var(--ink); border: 1px solid #e8dec6; border-bottom-left-radius: 4px; } .mc-bubble-hello { background: #fffaef; border-color: #e8dec6; } .mc-bubble-refusal { background: #fff4e8; border-color: #f0c895; } .mc-bubble-error { background: #fbe8e2; border-color: #e0a89a; } .mc-answer { margin: 0; } .mc-answer + .mc-cite { margin-top: 0.5rem; } .mc-verdict { display: inline-block; font-family: var(--serif); font-weight: 700; font-size: 0.82rem; padding: 0.15rem 0.55rem; border-radius: 999px; margin-right: 0.5rem; margin-bottom: 0.35rem; letter-spacing: 0.02em; } .mc-verdict-yes { background: #d8ecc8; color: #305020; } .mc-verdict-no { background: #f2d4cc; color: #6a1a10; } .mc-verdict-mixed { background: #f0e2c4; color: #5a4218; } .mc-verdict-unsure { background: #e0dcef; color: #3a2e5a; } .mc-refusal-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--amber); color: #fffaf0; padding: 0.12rem 0.5rem; border-radius: 4px; margin-right: 0.5rem; margin-bottom: 0.35rem; } .mc-cite { font-size: 0.82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.6rem; border-top: 1px dashed #e8dec6; padding-top: 0.45rem; } .mc-cite-curator::before { content: "Curated by "; } .mc-cite-authority::before { content: "Source: "; } .mc-cite-authority { color: var(--walnut); font-weight: 600; } /* Typing indicator dots */ .mc-typing .mc-bubble { display: inline-flex; gap: 4px; align-items: center; } .mc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--walnut); opacity: 0.4; animation: mc-bounce 1.1s infinite ease-in-out; } .mc-dot:nth-child(2) { animation-delay: 0.15s; } .mc-dot:nth-child(3) { animation-delay: 0.3s; } @keyframes mc-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } } /* Input row */ .mc-form { margin-top: 0.4rem; } .mc-input-label { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; } .mc-input-row { display: flex; gap: 0.5rem; } .mc-input { flex: 1; padding: 0.7rem 0.9rem; font-family: var(--sans); font-size: 1rem; border: 1px solid var(--border); border-radius: 10px; background: #fffdf7; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; } .mc-input:focus { outline: none; border-color: var(--walnut); box-shadow: 0 0 0 3px rgba(107, 79, 58, 0.18); } .mc-send { background: var(--walnut); color: #fffaf0; border: none; border-radius: 10px; padding: 0 1.3rem; font-family: var(--sans); font-weight: 600; font-size: 1rem; cursor: pointer; transition: background 0.15s, transform 0.05s; min-width: 72px; } .mc-send:hover:not(:disabled) { background: #553e2a; } .mc-send:active:not(:disabled) { transform: translateY(1px); } .mc-send:disabled { opacity: 0.6; cursor: wait; } /* Starter chips */ .mc-starters-wrap { margin-top: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .mc-starters-label { font-size: 0.82rem; color: var(--muted); font-style: italic; } .mc-starters { display: flex; flex-wrap: wrap; gap: 0.4rem; } .mc-starter { background: #f5ecdc; color: var(--walnut); border: 1px solid #e0d2b5; border-radius: 999px; padding: 0.35rem 0.8rem; font-family: var(--sans); font-size: 0.85rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .mc-starter:hover { background: #ede0c5; border-color: var(--walnut); } .mc-disclaimer { margin: 0.9rem 0 0; font-size: 0.78rem; color: var(--muted); font-style: italic; text-align: center; border-top: 1px solid var(--border); padding-top: 0.7rem; } .mc-fullcall-cta { margin: 1rem 0 0; font-size: 0.95rem; text-align: center; color: var(--ink); background: linear-gradient(180deg, #f5ecdc 0%, #ede0c5 100%); border: 1px solid #e0d2b5; border-radius: 10px; padding: 0.7rem 1rem; } .mc-fullcall-cta a { color: var(--walnut); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--walnut); } .mc-fullcall-cta a:hover { background: rgba(107,79,58,0.08); } /* ────────────────────────────────────────────────────────────────────── Henry's pharmacy — modern apothecary treatment for the Ingredient Lookup page. Warm cream background, walnut accents, refined pharmacy blue, glass-display-case cards. All scoped under .page-ingredient-lookup so other pages stay untouched. ────────────────────────────────────────────────────────────────────── */ .page-ingredient-lookup { --apoth-cream: #f6efe1; --apoth-cream-deep: #ede4d2; --apoth-walnut: #6b4f3a; --apoth-blue: #4a7faa; --apoth-sage: #7a9a6a; background: var(--apoth-cream); } /* Apothecary sign header: Rx mark + handwritten-feel "Henry's counter" label + a thin rule that extends to the page edge. Sits above the section title like the placard above a pharmacy aisle. */ .page-ingredient-lookup .apoth-sign { display: flex; align-items: center; gap: 0.7rem; margin: 1.6rem 0 0.8rem; color: var(--apoth-blue); } .page-ingredient-lookup .apoth-rx { width: 34px; height: 34px; flex: 0 0 34px; } .page-ingredient-lookup .apoth-sign-label { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 0.92rem; letter-spacing: 0.04em; color: var(--apoth-walnut); } .page-ingredient-lookup .apoth-sign-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--apoth-walnut) 0%, transparent 90%); opacity: 0.35; } /* Section title gets serif weight + a subtle walnut underline to feel like a hand-painted sign over a pharmacy display. */ .page-ingredient-lookup .section-title { font-family: "Lora", Georgia, serif; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; position: relative; padding-bottom: 0.4rem; } .page-ingredient-lookup .section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; background: var(--apoth-walnut); border-radius: 2px; } /* Search field styled like a prescription pad: lined paper background, serif Rx prefix, walnut border, the input itself in a clean modern font. Different enough from the page to feel like a counter slip. */ .page-ingredient-lookup .apoth-search { margin-top: 1.4rem; background: repeating-linear-gradient(180deg, transparent 0, transparent 27px, rgba(107,79,58,0.08) 27px, rgba(107,79,58,0.08) 28px), var(--white); border: 1px solid rgba(107,79,58,0.25); border-radius: 10px; padding: 0.9rem 1rem 0.9rem 1.2rem; box-shadow: 0 2px 6px rgba(60,40,20,0.05), 0 0 0 1px rgba(255,255,255,0.5) inset; display: flex; align-items: center; gap: 0.6rem; } .page-ingredient-lookup .apoth-search-label { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--serif); font-weight: 600; font-size: 0.95rem; color: var(--apoth-walnut); letter-spacing: 0.02em; } .page-ingredient-lookup .apoth-rx-mini { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 1.4rem; color: var(--apoth-blue); line-height: 1; } .page-ingredient-lookup .apoth-search .sl-input { flex: 1; border: none; background: transparent; font-family: var(--sans); font-size: 1rem; color: var(--ink); padding: 0; } .page-ingredient-lookup .apoth-search .sl-input:focus { outline: none; } .page-ingredient-lookup .apoth-search .sl-input::placeholder { color: rgba(107,79,58,0.5); font-style: italic; } /* Count line: small, walnut, italic, like a chalkboard scribble */ .page-ingredient-lookup .folk-count-line { color: var(--apoth-walnut); font-style: italic; font-size: 0.88rem; margin: 0.9rem 0 1.2rem; } /* ── Pharmacy stage — two-column layout ───────────────────────────────── Left column: header + tabs + search + shelves Right column: Henry standing full-height beside the shelves The whole thing reads as walking into Henry's pharmacy — counter on the left, pharmacist on the right by the display wall. */ .page-ingredient-lookup .pharmacy-stage { padding: 0; } .page-ingredient-lookup .pharmacy-stage-inner { display: grid; /* Equal columns — Henry gets the same horizontal real estate as the shelves so he reads at full standing scale, not as a sidebar accessory. The 3-bottle-per-row shelf layout still fits cleanly in 50% of the page. */ grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; padding-top: 1.5rem; } @media (max-width: 760px) { .page-ingredient-lookup .pharmacy-stage-inner { grid-template-columns: 1fr; gap: 0; } } /* Left column header — Henry's name + intro + Hear his story */ .page-ingredient-lookup .pharmacy-header { margin-bottom: 1rem; } .page-ingredient-lookup .pharmacy-name { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--apoth-blue); margin: 0; letter-spacing: -0.01em; } .page-ingredient-lookup .pharmacy-intro { font-family: var(--sans); font-style: italic; color: var(--ink); margin: 0.3rem 0 0.6rem; font-size: 0.98rem; max-width: 36rem; } .page-ingredient-lookup .pharmacy-listen { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--apoth-blue); color: #fffaf0; border: none; border-radius: 999px; padding: 0.4rem 0.95rem; font-family: var(--sans); font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: filter 0.15s, transform 0.05s; } .page-ingredient-lookup .pharmacy-listen:hover { filter: brightness(0.92); } .page-ingredient-lookup .pharmacy-listen:active { transform: translateY(1px); } .page-ingredient-lookup .pharmacy-listen[data-state="loading"] { opacity: 0.7; cursor: wait; } .page-ingredient-lookup .pharmacy-listen-icon { font-size: 0.95rem; line-height: 1; } .page-ingredient-lookup .pharmacy-listen-label { font-size: 0.82rem; } /* Three wooden plaque tabs sit between the search and the shelf wall. Full width matching the search and shelves so the three elements line up cleanly on the left column. */ .page-ingredient-lookup .pharmacy-tabs { display: flex; gap: 0.8rem; margin: 1rem 0 0; padding: 0 0.8rem; width: 100%; box-sizing: border-box; } .page-ingredient-lookup .pharmacy-tab { flex: 1; font-family: var(--sans); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fffaf0; background: linear-gradient(180deg, rgba(255,240,210,0.20) 0%, rgba(0,0,0,0) 40%), linear-gradient(180deg, #a47c52 0%, #8b6740 50%, #6e4f2e 100%); border: none; border-radius: 4px 4px 0 0; padding: 0.55rem 0.6rem; cursor: pointer; box-shadow: 0 -2px 0 rgba(255,240,210,0.18) inset, 0 2px 4px rgba(60,40,20,0.18); transition: transform 0.12s ease, filter 0.12s ease; } .page-ingredient-lookup .pharmacy-tab:hover { filter: brightness(1.1); } .page-ingredient-lookup .pharmacy-tab.is-active { transform: translateY(-2px); box-shadow: 0 -2px 0 rgba(255,240,210,0.30) inset, 0 4px 8px rgba(60,40,20,0.25); filter: brightness(1.15); } /* Search row sits above the tabs. Full width of the left column so it spans the same width as the shelves below. */ .page-ingredient-lookup .ing-search-row, .page-ingredient-lookup .apoth-search { max-width: none; width: 100%; box-sizing: border-box; margin: 1rem 0 0; } /* Shelf wall: warm tan vertical-wood-grain back wall with continuous horizontal shelf bars. Three bottles per row on desktop — denser shelves balance better against Henry standing beside them. Drops to two on narrow tablets and one on phones. */ .page-ingredient-lookup .pharmacy-shelves { position: relative; padding: 0.6rem 0.8rem 0; border-radius: 6px; background: repeating-linear-gradient( 90deg, rgba(0,0,0,0.025) 0, rgba(0,0,0,0.025) 1px, transparent 1px, transparent 60px), linear-gradient(180deg, rgba(180, 140, 90, 0.10) 0%, rgba(180, 140, 90, 0.20) 100%), #e6d4ad; box-shadow: inset 0 6px 12px rgba(60, 35, 15, 0.20), inset 0 -2px 6px rgba(60, 35, 15, 0.14); grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: 220px; row-gap: 0; column-gap: 0.4rem; } @media (max-width: 960px) { .page-ingredient-lookup .pharmacy-shelves { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 520px) { .page-ingredient-lookup .pharmacy-shelves { grid-template-columns: 1fr !important; } } /* Slightly smaller bottle inside the 3-column shelf for cleaner spacing */ .page-ingredient-lookup .ing-bottle { width: 88px; } @media (min-width: 1100px) { .page-ingredient-lookup .ing-bottle { width: 96px; } } /* Suggest-an-ingredient panel beneath the shelves. Warm cream card, walnut border, single CTA opens an email pre-filled with the suggestion prompt. Easy to upgrade to a backed form later. */ .page-ingredient-lookup .pharmacy-suggest { margin: 1.6rem 0 0; padding: 1.1rem 1.2rem; background: var(--apoth-cream-deep); border: 1px solid rgba(107,79,58,0.25); border-radius: 10px; } .page-ingredient-lookup .pharmacy-suggest-title { font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--apoth-walnut); margin: 0 0 0.3rem; } .page-ingredient-lookup .pharmacy-suggest-line { font-size: 0.95rem; color: var(--ink); margin: 0 0 0.7rem; } .page-ingredient-lookup .pharmacy-suggest-btn { display: inline-block; background: var(--apoth-blue); color: #fffaf0; text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: 0.92rem; padding: 0.6rem 1.2rem; border: none; border-radius: 999px; cursor: pointer; transition: filter 0.15s; } .page-ingredient-lookup .pharmacy-suggest-btn:hover:not(:disabled) { filter: brightness(0.92); } .page-ingredient-lookup .pharmacy-suggest-btn:disabled { opacity: 0.6; cursor: wait; } /* Form layout: stacked fields, walnut hairlines, cream inputs */ .page-ingredient-lookup .pharmacy-suggest-form { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.8rem; } .page-ingredient-lookup .pharmacy-suggest-field { display: flex; flex-direction: column; gap: 0.3rem; } .page-ingredient-lookup .pharmacy-suggest-label { font-family: var(--sans); font-size: 0.85rem; font-weight: 600; color: var(--apoth-walnut); } .page-ingredient-lookup .pharmacy-suggest-hint { font-weight: 400; color: var(--muted); font-style: italic; } .page-ingredient-lookup .pharmacy-suggest-form input[type="text"], .page-ingredient-lookup .pharmacy-suggest-form input[type="email"], .page-ingredient-lookup .pharmacy-suggest-form textarea { font-family: var(--sans); font-size: 0.95rem; padding: 0.55rem 0.7rem; border: 1px solid rgba(107,79,58,0.3); border-radius: 8px; background: var(--white); color: var(--ink); width: 100%; box-sizing: border-box; } .page-ingredient-lookup .pharmacy-suggest-form input:focus, .page-ingredient-lookup .pharmacy-suggest-form textarea:focus { outline: none; border-color: var(--apoth-blue); box-shadow: 0 0 0 3px rgba(74, 127, 170, 0.18); } .page-ingredient-lookup .pharmacy-suggest-form textarea { resize: vertical; min-height: 64px; } /* Bot-field honeypot — hide visually but available to crawlers */ .page-ingredient-lookup .hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; } /* Thanks state shown after a successful submit */ .page-ingredient-lookup .pharmacy-suggest-thanks { background: rgba(122, 168, 96, 0.12); border: 1px solid rgba(122, 168, 96, 0.45); border-radius: 8px; padding: 0.9rem 1rem; color: var(--ink); font-size: 0.95rem; line-height: 1.5; } .page-ingredient-lookup .pharmacy-suggest-thanks strong { color: var(--apoth-blue); } /* Right column: Henry stands full-height beside the shelves. Using absolute positioning so the image fills its grid cell reliably — percentage height inside flex containers was not resolving against the stretched grid row. */ .page-ingredient-lookup .pharmacy-host { position: relative; align-self: stretch; pointer-events: none; min-height: 1000px; } .page-ingredient-lookup .pharmacy-host-portrait { position: absolute; inset: 0; filter: drop-shadow(0 12px 18px rgba(60,40,20,0.28)); } .page-ingredient-lookup .pharmacy-host-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; } .page-ingredient-lookup .pharmacy-host-closed { opacity: 0; animation: charBlink 9s linear infinite; } @media (max-width: 760px) { .page-ingredient-lookup .pharmacy-host { order: -1; height: 280px; margin-bottom: 0.8rem; } .page-ingredient-lookup .pharmacy-host-portrait { max-width: 160px; } } /* Old back-wall + per-card shelves block — replaced by .pharmacy-shelves above */ .page-ingredient-lookup .folk-grid:not(.pharmacy-shelves) { position: relative; padding: 1.5rem 1rem 0.5rem; border-radius: 8px; /* Layered background: - vertical wood-panel grain (subtle warm tan stripes) - soft warm overlay - base wall color */ background: repeating-linear-gradient( 90deg, rgba(0,0,0,0.025) 0, rgba(0,0,0,0.025) 1px, transparent 1px, transparent 60px), linear-gradient(180deg, rgba(180, 140, 90, 0.10) 0%, rgba(180, 140, 90, 0.20) 100%), #e6d4ad; box-shadow: inset 0 6px 12px rgba(60, 35, 15, 0.18), inset 0 -2px 6px rgba(60, 35, 15, 0.12); /* CSS Grid auto-rows at fixed height so the shelf bars align */ grid-auto-rows: 230px; row-gap: 0; column-gap: 0.6rem; } /* Each card is a slot on the shelf, no card frame */ .page-ingredient-lookup .folk-card { background: transparent; border: none; border-radius: 0; box-shadow: none; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; transition: transform 0.18s ease; } .page-ingredient-lookup .folk-card:hover { transform: translateY(-3px); } /* The shelf bar — a continuous wooden plank that runs the full width of the grid, at the BOTTOM of every row. Highlighted edge on top so it reads as a real shelf, with a soft shadow underneath. */ .page-ingredient-lookup .folk-card::after { content: ""; position: absolute; left: -50%; right: -50%; bottom: 0; height: 12px; background: linear-gradient(180deg, rgba(255, 240, 210, 0.55) 0%, rgba(255, 240, 210, 0) 25%), linear-gradient(180deg, #b08653 0%, #8b6740 50%, #6e4f2e 100%); box-shadow: 0 4px 8px rgba(60,40,20,0.32), 0 1px 0 rgba(255,255,255,0.20) inset; z-index: 0; } /* Bottles sit on the shelf, slightly above the wood */ .page-ingredient-lookup .ing-bottle { position: relative; z-index: 1; margin-bottom: 4px; } /* Shelf-only display: hide everything inside the card EXCEPT the bottle. The bottle's own label carries the ingredient name. Clicking the bottle opens the Pharmacist popup with the full information. No inline expansion, no name underneath, no system badges, no "Tap for details" hint — just bottles on a shelf. */ .page-ingredient-lookup .ing-thumb, .page-ingredient-lookup .ing-tile-name, .page-ingredient-lookup .ing-tile-aka, .page-ingredient-lookup .ing-tile-hint, .page-ingredient-lookup .ing-systems, .page-ingredient-lookup .ing-details { display: none !important; } .page-ingredient-lookup .ing-bottle { z-index: 1; } .page-ingredient-lookup .ing-tile { background: transparent; border: none; padding: 0.4rem 0.2rem 0.4rem; position: relative; z-index: 1; cursor: pointer; } /* ────────────────────────────────────────────────────────────────────── Character Host banner — appears at the top of each module page that belongs to one of the eight specialists. Slim greeting strip: their blinking portrait, name, role, and intro line, all in the character's brand color. Auto-injected by js/modules/character-host.js based on the current URL. Reuses the .char-avatar-img-wrap markup so the blink animation comes for free. ────────────────────────────────────────────────────────────────────── */ .character-host { background: var(--ch-bg); border-bottom: 3px solid var(--ch-color); padding: 1.1rem 0; } .character-host-inner { display: flex; align-items: center; gap: 1.2rem; } .character-host-portrait { flex: 0 0 90px; width: 90px; } .character-host-portrait .char-avatar-img-wrap { width: 90px; aspect-ratio: 1 / 1; border-radius: 50%; border: 3px solid var(--ch-color); box-shadow: 0 4px 12px rgba(60,40,20,0.18); max-width: none; } .character-host-portrait .char-avatar-img { object-position: center top; } .character-host-copy { flex: 1; min-width: 0; } .character-host-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; color: var(--ch-color); letter-spacing: -0.005em; } .character-host-intro { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--ink); font-style: italic; } .character-host-listen { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; background: var(--ch-color); color: #fffaf0; border: none; border-radius: 999px; padding: 0.4rem 0.95rem; font-family: var(--sans); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: filter 0.15s, transform 0.05s; } .character-host-listen:hover { filter: brightness(0.92); } .character-host-listen:active { transform: translateY(1px); } .character-host-listen[data-state="loading"] { opacity: 0.7; cursor: wait; } .character-host-listen-icon { font-size: 0.95rem; line-height: 1; } .character-host-listen-label { font-size: 0.82rem; } /* Standing-portrait host banner — used when a character has a standingPortrait (currently Henry only). Tall full-body figure on the left, text + listen button on the right. Reads as "you walked up to Henry at his counter," not "small avatar in a circle." */ .character-host-standing { padding: 1.5rem 0 0; border-bottom: none; background: linear-gradient(180deg, var(--ch-bg) 0%, transparent 90%); } .character-host-standing .character-host-inner { align-items: flex-end; gap: 2rem; min-height: 380px; } .character-host-standing .character-host-portrait { flex: 0 0 220px; width: 220px; align-self: flex-end; } .character-host-standing .char-standing-portrait { width: 220px; aspect-ratio: 3 / 8; border-radius: 0; border: none; box-shadow: none; max-width: none; overflow: visible; background: transparent; position: relative; } .character-host-standing .char-standing-portrait .char-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 12px 18px rgba(60,40,20,0.30)); } .character-host-standing .character-host-copy { padding-bottom: 2rem; } .character-host-standing .character-host-name { font-size: 1.5rem; } .character-host-standing .character-host-intro { font-size: 1.05rem; max-width: 36rem; } @media (max-width: 640px) { .character-host-standing .character-host-inner { gap: 1rem; min-height: 260px; } .character-host-standing .character-host-portrait { flex: 0 0 130px; width: 130px; } .character-host-standing .char-standing-portrait { width: 130px; } .character-host-standing .character-host-name { font-size: 1.15rem; } .character-host-standing .character-host-intro { font-size: 0.95rem; } } @media (max-width: 600px) { .character-host-portrait { flex: 0 0 64px; width: 64px; } .character-host-portrait .char-avatar-img-wrap { width: 64px; } .character-host-name { font-size: 1rem; } .character-host-intro { font-size: 0.92rem; } } /* Character Credit — smaller cousin of the host banner. Used when a specialist gets a personal attribution on a page that isn't their main home (Henry's puzzle book → Word Search & Crossword). Slim portrait + one warm credit line in italic. */ .character-credit { background: var(--ch-bg); border-bottom: 1px solid color-mix(in srgb, var(--ch-color) 25%, transparent); padding: 0.7rem 0; } .character-credit-inner { display: flex; align-items: center; gap: 0.9rem; } .character-credit-portrait { flex: 0 0 52px; width: 52px; } .character-credit-portrait .char-avatar-img-wrap { width: 52px; aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid var(--ch-color); box-shadow: 0 2px 6px rgba(60,40,20,0.15); max-width: none; } .character-credit-portrait .char-avatar-img { object-position: center top; } .character-credit-line { margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink); font-style: italic; } .character-credit-line strong { font-style: normal; color: var(--ch-color); font-family: var(--serif); font-weight: 600; } @media (max-width: 600px) { .character-credit-portrait { flex: 0 0 42px; width: 42px; } .character-credit-portrait .char-avatar-img-wrap { width: 42px; } .character-credit-line { font-size: 0.88rem; } } /* Chat header: title + mute toggle */ .mc-chat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--border); } .mc-chat-title { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.005em; } .mc-mute-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: #f5ecdc; color: var(--walnut); border: 1px solid #e0d2b5; border-radius: 999px; padding: 0.3rem 0.7rem; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .mc-mute-btn:hover { background: #ede0c5; border-color: var(--walnut); } .mc-mute-btn[aria-pressed="true"] { background: #ede4d2; color: var(--muted); border-color: #c8bea0; } .mc-mute-label { font-size: 0.78rem; } /* Bubble layout with header + foot rows */ .mc-bubble-head:empty { display: none; } .mc-bubble-foot { margin-top: 0.55rem; display: flex; justify-content: flex-end; } .mc-bubble-foot:empty { display: none; } /* Per-bubble play button */ .mc-play-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--walnut); color: #fffaf0; border: none; cursor: pointer; font-size: 0.75rem; padding: 0; transition: background 0.15s, transform 0.05s; } .mc-play-btn:hover { background: #553e2a; } .mc-play-btn:active { transform: scale(0.95); } .mc-play-icon { line-height: 1; } .mc-play-playing .mc-play-icon { display: none; } .mc-play-playing::before { content: "❚❚"; font-size: 0.65rem; letter-spacing: -1px; color: #fffaf0; } .mc-play-loading { background: #c8bea0; cursor: wait; } .mc-play-loading .mc-play-icon { display: none; } .mc-play-loading::after { content: ""; width: 12px; height: 12px; border: 2px solid #fffaf0; border-top-color: transparent; border-radius: 50%; animation: mc-spin 0.7s linear infinite; } @keyframes mc-spin { to { transform: rotate(360deg); } } .mc-play-error { background: var(--red); cursor: help; } /* ────────────────────────────────────────────────────────────────────── Margaret Call Page — full-bleed Zoom-style call experience. Dark walnut backdrop, painting centered as her "video tile," status pill above, live caption below, transcript sidebar on the right, control bar at the bottom. Mouth puppeting via image toggle while audio plays. ────────────────────────────────────────────────────────────────────── */ body.page-margaret-call { background: #1a120a; color: #f5ecdc; min-height: 100vh; display: flex; flex-direction: column; } body.page-margaret-call .portal-bar-slim { background: #0e0805; border-bottom: 1px solid #2a1e10; font-size: 0.78rem; } body.page-margaret-call .portal-bar-slim .portal-pill { background: transparent; color: #c8bea0; } .mcall { flex: 1; display: flex; flex-direction: column; padding: 1.2rem 1.5rem 1rem; max-width: 100rem; width: 100%; margin: 0 auto; box-sizing: border-box; } /* Top bar: leave-call link, title, fake "connected" signal */ .mcall-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 1rem; border-bottom: 1px solid #2a1e10; gap: 1rem; } .mcall-back { justify-self: start; color: #c8bea0; text-decoration: none; font-size: 0.92rem; padding: 0.4rem 0.8rem; border-radius: 8px; border: 1px solid #2a1e10; background: rgba(255,255,255,0.02); transition: background 0.15s, border-color 0.15s; } .mcall-back:hover { background: rgba(255,255,255,0.06); border-color: #4a3a20; } .mcall-title { text-align: center; font-family: var(--serif); } .mcall-title strong { display: block; font-size: 1.15rem; color: #f5ecdc; letter-spacing: -0.005em; } .mcall-title span { display: block; font-family: var(--sans); font-size: 0.82rem; color: #a89e80; font-style: italic; margin-top: 0.1rem; } .mcall-signal { justify-self: end; display: flex; align-items: flex-end; gap: 3px; color: #c8bea0; font-size: 0.78rem; } .mcall-signal-bar { width: 3px; background: #4a8a3a; border-radius: 1px; animation: mcall-pulse-bar 1.4s infinite ease-in-out; } .mcall-signal-bar:nth-child(1) { height: 6px; animation-delay: 0s; } .mcall-signal-bar:nth-child(2) { height: 9px; animation-delay: 0.15s; } .mcall-signal-bar:nth-child(3) { height: 12px; animation-delay: 0.3s; } .mcall-signal-bar:nth-child(4) { height: 15px; animation-delay: 0.45s; } .mcall-signal-label { margin-left: 0.4rem; line-height: 1.4; } @keyframes mcall-pulse-bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Stage: portrait tile on the left, transcript sidebar on the right */ .mcall-stage { flex: 1; display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; padding: 1.5rem 0; min-height: 0; } @media (max-width: 900px) { .mcall-stage { grid-template-columns: 1fr; } } /* Margaret's "video tile" */ .mcall-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; } .mcall-status { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.05); border: 1px solid #3a2a18; border-radius: 999px; padding: 0.4rem 1rem; font-size: 0.88rem; color: #f5ecdc; } .mcall-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #6b8b5a; } .mcall-status[data-kind="listening"] .mcall-status-dot { background: #d8a83a; animation: mcall-blink 1s infinite; } .mcall-status[data-kind="thinking"] .mcall-status-dot { background: #c87a2c; animation: mcall-blink 0.7s infinite; } .mcall-status[data-kind="speaking"] .mcall-status-dot { background: #6b8b5a; animation: mcall-blink 0.4s infinite; } .mcall-status[data-kind="error"] .mcall-status-dot { background: #b54a2c; } @keyframes mcall-blink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } } /* The portrait holder: four paintings stacked, only one visible at a time based on state classes on this container. Listening is the default; speaking swaps in on tick frames during audio playback; blink flashes briefly during idle; thinking holds while Margaret is reading the binder. Portrait aspect ratio for the Zoom-tile vibe. */ .mcall-portrait { position: relative; width: min(720px, 100%); aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px #3a2a18; /* Warm walnut background so any brief gap between image swaps reads as painting tone, not a dark flash. Aspect now matches the landscape "the-dose-*.png" zoom-style call images (roughly 3:2). */ background: #3a2a18; } .mcall-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } /* Architecture: LISTENING is the always-on base layer at full opacity. It NEVER fades out, no matter what state we're in. The other three states (blink, speaking, thinking) are overlays stacked on top of listening in the DOM. When at full opacity, each overlay completely covers listening because all four paintings share frame, lighting, and composition. Result: every state transition is a smooth fade-in or fade-out of the relevant overlay, never a flash, never a snap, never a flicker between two visible faces. */ .mcall-img-listening { opacity: 1; } /* BLINK: 180ms ease-in-out fade on each end. The eye spends most of the blink in motion (closing or opening), with only a brief moment fully closed. That mimics real blink physics more closely than a fast snap-and-hold. */ .mcall-img-blink { transition: opacity 180ms ease-in-out; } .mcall-portrait.mcall-blinking .mcall-img-blink { opacity: 1; } /* THINKING: 600ms ease-in-out fade in and out over listening. Slower curve makes the gaze shift feel like a deliberate, soft glance away rather than an abrupt cut. The painted compositions share frame and lighting, so during the fade you see her gaze drift smoothly — not a face flip. */ .mcall-img-thinking { transition: opacity 600ms ease-in-out; } .mcall-portrait.mcall-state-thinking .mcall-img-thinking { opacity: 1; } /* Steam wisps above the mug. Each wisp is a soft blurred radial dot that rises, drifts slightly sideways, and fades out. Three wisps with staggered delays so they never sync. Positioned over the approximate mug location in the painting (centered horizontally, upper-middle of the lower half). Pointer-events off so they never intercept clicks. */ .mcall-steam { /* Positioned over the mug on the LEFT side of the landscape "the-dose-*" image. Was tuned for the old 4:5 portrait crop; the new 3:2 landscape frame puts the mug at the lower-left. */ position: absolute; left: 8%; top: 50%; width: 18%; height: 30%; pointer-events: none; z-index: 5; } .mcall-steam-wisp { position: absolute; bottom: 0; width: 22px; height: 22px; background: radial-gradient(circle, rgba(255,250,240,0.55) 0%, rgba(255,250,240,0) 70%); border-radius: 50%; filter: blur(6px); opacity: 0; animation: mcall-steam-rise 5.2s ease-out infinite; } .mcall-steam-wisp:nth-child(1) { left: 22%; animation-delay: 0s; animation-duration: 5.2s; } .mcall-steam-wisp:nth-child(2) { left: 48%; animation-delay: 1.8s; animation-duration: 6.1s; } .mcall-steam-wisp:nth-child(3) { left: 70%; animation-delay: 3.5s; animation-duration: 5.8s; } @keyframes mcall-steam-rise { 0% { transform: translate(0, 0) scale(0.5); opacity: 0; } 15% { opacity: 0.65; } 50% { transform: translate(-6px, -50px) scale(1.0); opacity: 0.45; } 100% { transform: translate(8px, -130px) scale(1.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mcall-steam-wisp { animation: none; opacity: 0; } } /* Candle glow flicker. Sits over the candle location in the painting (upper-right of the portrait, behind her shoulder). Warm radial blend uses screen blend mode so it adds brightness to the already- warm flame in the painting rather than overlaying a colored dot. The 12s cycle has two flicker bursts at non-uniform timestamps so the eye never catches the loop. */ .mcall-candle-glow { /* Positioned over the candle on the RIGHT side of the landscape "the-dose-*" image — behind/past her right shoulder. Was at left:70% top:18% for the old portrait crop; the new landscape frame puts the candle further right and lower. */ position: absolute; left: 76%; top: 32%; width: 16%; height: 22%; pointer-events: none; z-index: 4; background: radial-gradient(ellipse at center, rgba(255, 190, 110, 0.55) 0%, rgba(255, 170, 90, 0.25) 35%, rgba(255, 170, 90, 0) 70%); mix-blend-mode: screen; opacity: 0.7; animation: mcall-candle-flicker 12s ease-in-out infinite; } @keyframes mcall-candle-flicker { /* Long steady-burn stretches with two quick flicker bursts at irregular times. Mimics real candle behavior. */ 0%, 18% { opacity: 0.7; transform: scale(1.0); } 19% { opacity: 1.0; transform: scale(1.15); } 20% { opacity: 0.45; transform: scale(0.9); } 21% { opacity: 0.95; transform: scale(1.1); } 22% { opacity: 0.7; transform: scale(1.0); } 23%, 57% { opacity: 0.7; transform: scale(1.0); } 58% { opacity: 1.0; transform: scale(1.15); } 59% { opacity: 0.4; transform: scale(0.85); } 60% { opacity: 0.9; transform: scale(1.08); } 61% { opacity: 0.55; transform: scale(0.95); } 62% { opacity: 0.85; transform: scale(1.05); } 63%, 100% { opacity: 0.7; transform: scale(1.0); } } @media (prefers-reduced-motion: reduce) { .mcall-candle-glow { animation: none; opacity: 0.7; } } /* Pulse ring around the portrait while she speaks */ .mcall-pulse { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; box-shadow: 0 0 0 0 rgba(245, 236, 220, 0); } .mcall-portrait.mcall-speaking .mcall-pulse { animation: mcall-glow 1.6s ease-in-out infinite; } @keyframes mcall-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 236, 220, 0.05), 0 0 30px rgba(245, 236, 220, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(245, 236, 220, 0.12), 0 0 60px rgba(245, 236, 220, 0.4); } } /* Transcript sidebar */ .mcall-transcript { background: rgba(255,255,255,0.025); border: 1px solid #2a1e10; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; max-height: 100%; } .mcall-transcript-head { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1rem; border-bottom: 1px solid #2a1e10; font-family: var(--sans); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #a89e80; } .mcall-transcript-toggle { background: transparent; border: 1px solid #3a2a18; color: #c8bea0; width: 26px; height: 26px; border-radius: 6px; font-size: 1rem; cursor: pointer; line-height: 1; } .mcall-transcript-toggle:hover { background: rgba(255,255,255,0.06); } .mcall-transcript-thread { flex: 1; overflow-y: auto; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; } .mcall-transcript-thread::-webkit-scrollbar { width: 6px; } .mcall-transcript-thread::-webkit-scrollbar-thumb { background: #3a2a18; border-radius: 3px; } .mcall-transcript-hidden .mcall-transcript-thread { display: none; } .mcall-bubble { font-size: 0.88rem; line-height: 1.45; padding: 0.55rem 0.75rem; border-radius: 10px; max-width: 100%; } .mcall-bubble-visitor { background: #4a3a20; color: #fffaf0; align-self: flex-end; border-bottom-right-radius: 3px; } .mcall-bubble-margaret { background: rgba(245, 236, 220, 0.08); color: #f5ecdc; align-self: flex-start; border-bottom-left-radius: 3px; border: 1px solid #3a2a18; } .mcall-bubble-refusal { background: rgba(240, 200, 149, 0.12); border-color: #6a4a20; } .mcall-bubble-error { background: rgba(181, 74, 44, 0.12); border-color: #6a2a18; } .mcall-bubble-no_match { background: rgba(245, 236, 220, 0.06); border-color: #3a2a18; } /* Control bar at the bottom */ .mcall-controls { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 0 0; border-top: 1px solid #2a1e10; } .mcall-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.04); color: #f5ecdc; border: 1px solid #3a2a18; border-radius: 999px; padding: 0.65rem 1rem; font-family: var(--sans); font-size: 0.92rem; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .mcall-btn:hover { background: rgba(255,255,255,0.08); border-color: #6b4f3a; } .mcall-btn:disabled { opacity: 0.5; cursor: wait; } .mcall-btn-label { font-size: 0.86rem; } .mcall-mic { background: #4a8a3a; border-color: #3a6a2a; color: #fffaf0; } .mcall-mic:hover { background: #5a9e4a; border-color: #4a8a3a; } .mcall-mic-active { background: #b54a2c !important; border-color: #8a2a18 !important; animation: mcall-mic-pulse 1s infinite; } .mcall-mic-blocked { background: rgba(255,255,255,0.03) !important; border-color: #4a3a20 !important; color: #a89e80 !important; cursor: not-allowed !important; opacity: 0.6; } .mcall-mic-note { background: rgba(245, 220, 130, 0.10); border: 1px solid rgba(245, 220, 130, 0.35); border-radius: 10px; padding: 0.8rem 1rem; margin-bottom: 0.7rem; color: #f5ecdc; font-size: 0.92rem; line-height: 1.45; } .mcall-mic-note strong { color: #f0d68a; } .mcall-mic-note .mcall-mic-help { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: #c8bea0; } @keyframes mcall-mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(181, 74, 44, 0.6); } 50% { box-shadow: 0 0 0 8px rgba(181, 74, 44, 0); } } .mcall-input-form { flex: 1; display: flex; gap: 0.5rem; } .mcall-input { flex: 1; padding: 0.7rem 1rem; background: rgba(255,255,255,0.04); color: #f5ecdc; border: 1px solid #3a2a18; border-radius: 999px; font-family: var(--sans); font-size: 1rem; } .mcall-input::placeholder { color: #8a8068; } .mcall-input:focus { outline: none; border-color: #c8bea0; background: rgba(255,255,255,0.08); } .mcall-send { background: #c8bea0; color: #1a120a; border-color: #c8bea0; font-weight: 600; } .mcall-send:hover { background: #d8cfb0; border-color: #d8cfb0; } .mcall-mute[aria-pressed="true"] { background: rgba(255,255,255,0.02); color: #8a8068; } @media (max-width: 600px) { .mcall-controls { flex-wrap: wrap; } .mcall-input-form { width: 100%; order: -1; } .mcall-top { grid-template-columns: auto 1fr; } .mcall-signal { display: none; } .mcall-title { text-align: left; } } /* ── Product evaluation agent — Henry + Arun ──────────────────────────── Two-track verdict cards rendered by js/modules/product-agent.js. Consumer take is muted with a small italic label so the unsupported line never gets mistaken for the cited line. Scientific position carries inline numbered citation markers and / or absence-tag badges, styled so a reviewing physician can scan the whole card and see which assertions are evidence-backed in two seconds. ──────────────────────────────────────────────────────────────────── */ .pa-verdict { padding: 1.2rem 1.4rem; border-left: 4px solid #6a7a8a; border-radius: 8px; margin-bottom: 1.2rem; } .pa-verdict-wronglane { background: #eef4f7; border-left-color: #3a7a78; color: #1f4a48; } .pa-verdict-color { font-family: 'Inter', sans-serif; font-weight: 700; letter-spacing: 0.08em; font-size: 0.85rem; } .pa-verdict-label { font-family: 'Fraunces', serif; font-size: 1.3rem; margin: 0.3rem 0 0.6rem; } .pa-verdict-explanation, .pa-verdict p { margin: 0; } .pa-bottomline { font-family: 'Lora', serif; font-size: 1.05rem; color: #2a3540; border-top: 1px solid #e6dfce; border-bottom: 1px solid #e6dfce; padding: 0.9rem 0; margin: 1rem 0; } .pa-section-h { font-family: 'Fraunces', serif; font-size: 1.2rem; margin: 1.4rem 0 0.4rem; color: #2a3540; } .pa-list { list-style: none; padding: 0; margin: 0; } .pa-ing-item { display: grid; grid-template-columns: 110px 1fr; gap: 0.7rem; padding: 0.7rem 0; border-bottom: 1px solid #e6dfce; font-family: 'Inter', sans-serif; } .pa-ing-color { display: block; font-size: 0.78rem; letter-spacing: 0.06em; } .pa-ing-role { font-size: 0.78rem; color: #6a7a8a; } .pa-ing-name { display: block; margin-bottom: 0.3rem; color: #2a3540; } .pa-claim-item { padding: 0.8rem 1rem; margin: 0.6rem 0; border-radius: 4px; border-left: 3px solid #6a7a8a; font-family: 'Inter', sans-serif; } .pa-claim-color { font-size: 0.78rem; letter-spacing: 0.06em; } .pa-claim-text { font-family: 'Lora', serif; font-style: italic; color: #2a3540; margin: 0.25rem 0; } /* Two-track paragraphs. Consumer take is muted gray italic with a tag label; scientific track is normal body with cited [n] markers. */ .pa-track-consumer, .pa-track-science { margin: 0.3rem 0 0; line-height: 1.45; } .pa-track-consumer { color: #6a7a8a; font-style: italic; font-size: 0.94rem; } .pa-track-science { color: #2a3540; font-style: normal; font-size: 0.96rem; } .pa-track-label { display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #3a7a78; margin-right: 0.3rem; font-style: normal; } .pa-track-consumer .pa-track-label { color: #8a98a4; } /* Inline numbered citation: superscript link into the references list. */ .pa-ref-marker { font-size: 0.72em; vertical-align: super; line-height: 0; margin: 0 0.06em; } .pa-ref-marker a { color: #3a7a78; text-decoration: none; font-weight: 600; } .pa-ref-marker a:hover { text-decoration: underline; } .pa-ref-marker-broken { color: #c63224; } /* Absence tag: small gray italic badge so unsourced statements are visible at a glance. Hover shows the precise meaning of the tag. */ .pa-absence-tag { display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.78em; font-style: italic; color: #6a7a8a; background: #eef0f2; padding: 0.05em 0.4em; border-radius: 3px; margin: 0 0.15em; cursor: help; white-space: nowrap; } .pa-aside { background: #f4f1ea; border-radius: 6px; padding: 0.8rem 1rem; margin-top: 1rem; font-family: 'Inter', sans-serif; } .pa-aside strong { color: #3a7a78; } /* References list. Numbered like a paper, each entry a clickable link to the source (usually PubMed). Anchor target so inline [n] markers scroll the visitor to the right entry. */ .pa-refs { list-style: none; padding: 0; margin: 0; font-family: 'Inter', sans-serif; font-size: 0.92rem; } .pa-ref-item { display: grid; grid-template-columns: 2rem 1fr; gap: 0.4rem; padding: 0.4rem 0; border-bottom: 1px dashed #e6dfce; } .pa-ref-item:target { background: #fff8e1; } .pa-ref-num { font-weight: 700; color: #3a7a78; } .pa-ref-body a { color: #2a3540; text-decoration: underline; } .pa-ref-body a:hover { color: #3a7a78; } .pa-ref-meta { display: block; font-size: 0.85rem; color: #6a7a8a; margin-top: 0.15rem; } /* Disclaimer block. Always rendered at the bottom of every verdict. Names Dr. Oroszi and Dr. Ellis explicitly as NOT individually reviewing the output. Reads as a posture, not a footer. */ .pa-disclaimer { margin-top: 1.6rem; padding: 0.9rem 1.1rem; background: #fefaf2; border: 1px solid #e6dfce; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 0.88rem; color: #5a6a7a; line-height: 1.55; } .pa-disclaimer p { margin: 0; } .pa-disclaimer strong { color: #2a3540; } /* Spinner reused across both pages. */ .pa-spinner { display: inline-block; width: 0.9em; height: 0.9em; border: 2px solid #d4dde2; border-top-color: #3a7a78; border-radius: 50%; animation: pa-spin 0.9s linear infinite; vertical-align: middle; } @keyframes pa-spin { to { transform: rotate(360deg); } } /* ── Save-this-verdict CTA ────────────────────────────────────────────── Sits in every Henry / Arun verdict card. Always saves locally; prompts sign-in for cross-device sync. */ .pa-save-row { margin-top: 1rem; padding: 0.9rem 1rem; background: #fefaf2; border: 1px solid #e6dfce; border-radius: 6px; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .pa-save-btn { background: #3a7a78; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 4px; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600; cursor: pointer; } .pa-save-btn:hover:not(:disabled) { background: #2e6361; } .pa-save-btn:disabled { background: #9aaeae; cursor: default; } .pa-save-msg { font-family: 'Inter', sans-serif; font-size: 0.88rem; color: #5a6a7a; flex: 1; min-width: 200px; } .pa-save-msg a { color: #3a7a78; text-decoration: underline; } /* ── Auth header widget ───────────────────────────────────────────────── Sign-in / Sign-out + My Verdicts link in the site-header nav. */ .auth-wrap { font-family: 'Inter', sans-serif; } .nav-signin, .nav-signout { background: none; border: 1px solid #d4dde2; color: #2a3540; padding: 0.3rem 0.7rem; border-radius: 4px; font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; } .nav-signin:hover, .nav-signout:hover { background: #f4f7f9; border-color: #3a7a78; color: #3a7a78; } .nav-saved { color: #3a7a78; font-weight: 600; text-decoration: none; font-size: 0.9rem; } .nav-saved:hover { text-decoration: underline; } .auth-sep { color: #b8c4cf; font-size: 0.9rem; } /* ── Transcript toggle for "Hear their story" surfaces ────────────────── Hearing-impaired visitors and anyone who prefers reading get the same content the audio button would speak. Same bioLong text; visible inline; state persists in localStorage. ─────────────────────────────────────────────────────────────────── */ .character-host-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.4rem; } .character-host-transcript-toggle, .pharmacy-transcript-toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.85); color: var(--ch-color, #2a3540); padding: 0.45rem 0.85rem; border-radius: 999px; font-family: 'Inter', sans-serif; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background 0.15s; } .character-host-transcript-toggle:hover, .pharmacy-transcript-toggle:hover { background: rgba(255,255,255,0.9); } .character-host-transcript-toggle[aria-expanded="true"], .pharmacy-transcript-toggle[aria-expanded="true"] { background: rgba(255,255,255,1); } .character-host-transcript, .pharmacy-transcript { margin-top: 0.9rem; background: rgba(255,255,255,0.85); border-radius: 8px; padding: 1rem 1.2rem; font-family: 'Lora', serif; font-size: 1rem; line-height: 1.6; color: #2a3540; max-width: 64ch; } .character-host-transcript p, .pharmacy-transcript p { margin: 0 0 0.6rem; } .character-host-transcript p:last-child, .pharmacy-transcript p:last-child { margin-bottom: 0; } .character-host-transcript-label-row, .pharmacy-transcript-heading { font-family: 'Inter', sans-serif; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7a8a9a; font-weight: 600; margin: 0 0 0.6rem !important; } .pharmacy-transcript { background: #fefaf2; border: 1px solid #e6dfce; margin: 1rem 0 0; } /* ── Site-wide font-size control (A / A+ / A++) ───────────────────────── Applied via a data-attribute on : data-font-scale="m|l|xl". The CSS scales root font-size which cascades to all text-using ems and rems. Persistence is in localStorage so the visitor's choice follows them across pages. */ html[data-font-scale="l"] { font-size: 18px; } html[data-font-scale="xl"] { font-size: 21px; } .font-scale-toggle { display: inline-flex; gap: 0.2rem; align-items: center; margin-left: 0.5rem; font-family: 'Inter', sans-serif; } .font-scale-toggle button { background: none; border: 1px solid #d4dde2; color: #2a3540; padding: 0.2rem 0.5rem; border-radius: 3px; font-family: inherit; font-weight: 600; cursor: pointer; line-height: 1; } .font-scale-toggle button:hover { border-color: #3a7a78; color: #3a7a78; } .font-scale-toggle button[aria-pressed="true"] { background: #2a3540; color: #fff; border-color: #2a3540; } .font-scale-toggle .font-scale-a { font-size: 0.82rem; } .font-scale-toggle .font-scale-a-plus { font-size: 0.95rem; } .font-scale-toggle .font-scale-a-pp { font-size: 1.1rem; }