/* ============================================================ Bosket's Alimentos — CMS-controlled site theming Loaded on the public site AFTER style.css. Dark mode + font pairings are driven by data-theme / data-font on , set from the CMS "Appearance" settings. ============================================================ */ /* ---------- Font pairings (override the two type variables) ---------- */ html[data-font="playfair_inter"] { --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; } html[data-font="marcellus_manrope"]{ --font-display: 'Marcellus', Georgia, serif; --font-body: 'Manrope', system-ui, sans-serif; } html[data-font="cormorant_jost"] { --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', system-ui, sans-serif; } html[data-font="fraunces_worksans"]{ --font-display: 'Fraunces', Georgia, serif; --font-body: 'Work Sans', system-ui, sans-serif; } html[data-font="system"] { --font-display: Georgia, 'Times New Roman', serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ---------- Dark theme ---------- */ html[data-theme="dark"] { --cream: #0f1714; /* page background */ --white: #16211d; /* cards / surfaces */ --ink: #e7efec; /* body text */ --ink-soft: #9fb3ad; --line: #28382f; --green-50: #16211d; --green-100: #1d2f2a; --orange-100:#3a241d; --shadow: 0 2px 12px rgba(0,0,0,.45); --shadow-lg: 0 12px 34px rgba(0,0,0,.55); } html[data-theme="dark"] body { background: var(--cream); color: var(--ink); } /* headings & brand wordmark need to be light on dark */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] .brand-text strong, html[data-theme="dark"] .brand-text strong em, html[data-theme="dark"] .card-title a, html[data-theme="dark"] .recipe-title { color: #eaf3f0; } /* links a touch brighter for contrast */ html[data-theme="dark"] a { color: #6fcbbb; } html[data-theme="dark"] a:hover { color: #8fd6c8; } /* surfaces that hard-code white in style.css */ html[data-theme="dark"] .site-header { background: var(--white); } html[data-theme="dark"] .nav-search-results, html[data-theme="dark"] .modal, html[data-theme="dark"] .nav-dropdown, html[data-theme="dark"] .mega { background: #1b2925; } html[data-theme="dark"] .nav-search-results a { color: #eaf3f0; } html[data-theme="dark"] .nav-search-results a:hover { background: #223530; color: #fff; } html[data-theme="dark"] .header-search-bar { background: var(--white); } /* form controls (style.css forces background:#fff) */ html[data-theme="dark"] input[type=text], html[data-theme="dark"] input[type=email], html[data-theme="dark"] input[type=password], html[data-theme="dark"] input[type=search], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #101b17; color: var(--ink); } html[data-theme="dark"] .nav-search input[type=search] { background: #101b17; } /* ghost / tag text that used dark-green ink */ html[data-theme="dark"] .btn-ghost { color: #e7efec; } html[data-theme="dark"] .tag { color: #cfeee6; } html[data-theme="dark"] .tag-orange { background: #3a241d; color: #f2bca8; } html[data-theme="dark"] .flash-success { color: #bfe9df; } html[data-theme="dark"] .pill-green { color: #cfeee6; } html[data-theme="dark"] .card-meta, html[data-theme="dark"] .muted { color: var(--ink-soft); } html[data-theme="dark"] table.data tr:hover td { background: #1c2a25; } /* ---------- Visitor light/dark toggle ---------- */ .cms-theme-toggle { background: none; border: 0; cursor: pointer; font-size: 17px; line-height: 1; padding: 6px; border-radius: 50%; display: inline-flex; align-items: center; } .cms-theme-toggle:hover { background: var(--green-50); } .cms-toggle-sun { display: none; } .cms-toggle-moon { display: inline; } html[data-theme="dark"] .cms-toggle-sun { display: inline; } html[data-theme="dark"] .cms-toggle-moon { display: none; } /* ---------- CMS-managed nav items: submenu dropdown ---------- */ .cms-mega { min-width: 220px; grid-template-columns: 1fr; left: 0; transform: none; } /* widen the footer grid only when the CMS footer column is present */ .footer-inner:has(.cms-footer-links) { grid-template-columns: 2fr 1fr 1fr 1fr; } @media (max-width: 880px) { .footer-inner:has(.cms-footer-links) { grid-template-columns: 1fr; } } /* ---------- CMS page body (page.php) ---------- */ .cms-page h1 { margin-bottom: 18px; } .cms-page-body { font-size: 16.5px; line-height: 1.8; } .cms-page-body h2 { margin: 26px 0 10px; } .cms-page-body h3 { margin: 20px 0 8px; } .cms-page-body p { margin: 0 0 14px; } .cms-page-body img { border-radius: 12px; margin: 10px 0; box-shadow: var(--shadow); } .cms-page-body ul, .cms-page-body ol { padding-left: 22px; margin: 0 0 14px; } .cms-page-body li { margin: 4px 0; } .cms-page-body blockquote { border-left: 4px solid var(--green-600); margin: 16px 0; padding: 6px 18px; color: var(--ink-soft); font-family: var(--font-display); font-style: italic; } .cms-page-body a { text-decoration: underline; } .cms-page-body table { width: 100%; border-collapse: collapse; margin: 14px 0; } .cms-page-body th, .cms-page-body td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }