/* ========================================================= Love2Feed MASTER styles.css (merged) - Dark theme default (from recipe-test.css) - Includes full homepage/search UI (from original styles.css) - Includes recipe page components (hero, blocks, toc, ads) - Includes header-search.js dropdown styling ========================================================= */ /* ========================================================= THEME TOKENS - Default: dark (matches recipe-test.css) - Optional light: set ========================================================= */ :root{ /* Layout */ --container: 1120px; --gutter: 18px; --radius: 18px; /* Dark theme (DEFAULT) */ --bg: #0f1115; --panel: #151a22; /* cards / panels */ --panel2: #10141b; /* deeper surfaces */ --text: #e9eef6; --muted: #a8b3c7; --border: rgba(255,255,255,.10); --blue: #4da3ff; --blue2: #67e8f9; --shadow: 0 10px 30px rgba(0,0,0,.35); /* Common “surface” backgrounds */ --surface: rgba(255,255,255,.03); --surface2: rgba(255,255,255,.02); --surface3: rgba(255,255,255,.04); } html[data-theme="light"]{ --bg:#f5f7fb; --panel:#ffffff; --panel2:#ffffff; --text:#0f172a; --muted:#667085; --border:#e6e9f2; --blue:#3b82f6; --blue2:#2563eb; --shadow: 0 10px 26px rgba(15,23,42,0.06); --surface: #ffffff; --surface2: #ffffff; --surface3: #ffffff; } /* If you want “auto light/dark” later, uncomment: @media (prefers-color-scheme: light){ :root{ } } */ *{ box-sizing:border-box; } html, body{ height:100%; } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color: var(--text); overflow-x:hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Dark background styling (kept subtle on light) */ background: radial-gradient(1000px 800px at 10% -10%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 60%), radial-gradient(900px 700px at 90% 0%, color-mix(in srgb, var(--blue2) 10%, transparent), transparent 55%), var(--bg); } a{ color: inherit; text-decoration: none; } a:hover{ color: var(--blue2); } /* ========================================================= Utilities ========================================================= */ .container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); width: 100%; } .sr-only{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ========================================================= Header ========================================================= */ .top{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--border); } .top-inner{ max-width: var(--container); margin: 0 auto; padding: 22px var(--gutter) 18px; } .top-row{ display: flex; align-items: center; gap: 24px; } .brand{ display:flex; align-items:center; gap:10px; margin:0; } .site-logo{ height: 60px; width:auto; display:block; } .header-auth-nav{ margin-left: auto; display:flex; align-items:center; gap:10px; flex: 0 0 auto; } #active-filters{ display:none !important; } /* ========================================================= Homepage Search (InstantSearch) ========================================================= */ #searchbox{ flex: 1 1 auto; min-width: 520px; max-width: none; } .ais-SearchBox{ width:100%; } .ais-SearchBox-form, .ais-SearchBox form{ position:relative; width:100%; } .ais-SearchBox-input{ width:100%; padding: 16px 18px; border: 1px solid var(--border); border-radius: 999px; outline:none; font-size: 16px; color: var(--text); background: color-mix(in srgb, var(--panel) 70%, transparent); } .ais-SearchBox-input:focus{ border-color: color-mix(in srgb, var(--blue) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); } .ais-SearchBox-reset{ position:absolute; right: 12px; top: 50%; transform: translateY(-50%); border: none; background: transparent; cursor:pointer; padding: 8px; opacity: .75; } /* ========================================================= Header Search (recipe pages) - header-search.js uses #header-search and #header-suggestions ========================================================= */ .header-search-wrapper{ flex: 1 1 auto; min-width: 520px; max-width: none; position: relative; } #header-search{ width: 100%; padding: 16px 18px; border: 1px solid var(--border); border-radius: 999px; outline: none; font-size: 16px; color: var(--text); background: color-mix(in srgb, var(--panel) 70%, transparent); } #header-search::placeholder{ color: color-mix(in srgb, var(--muted) 70%, transparent); } #header-search:focus{ border-color: color-mix(in srgb, var(--blue) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent); } #header-suggestions{ position: absolute; left: 0; right: 0; top: calc(54px + 10px); border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); box-shadow: var(--shadow); overflow: hidden; z-index: 80; } #header-suggestions a, #header-suggestions button, #header-suggestions .suggestion-item{ display: block; width: 100%; padding: 12px 14px; text-align: left; background: transparent; border: 0; color: var(--text); cursor: pointer; } #header-suggestions a:hover, #header-suggestions button:hover, #header-suggestions .suggestion-item:hover{ background: color-mix(in srgb, #ffffff 6%, transparent); } /* ========================================================= Main layout (homepage/search) ========================================================= */ .wrap{ max-width: var(--container); margin: 0 auto; padding: 18px var(--gutter) 30px; } .grid{ display:grid; grid-template-columns: 320px 1fr; gap: 18px; } /* Panels */ .filters, .results{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; } .filters{ padding: 14px; } .results{ padding: 14px; min-height: 520px; display:flex; flex-direction:column; } /* Facet titles / spacing */ .filter-title{ font-weight: 800; font-size: 15px; letter-spacing: .2px; margin: 14px 0 10px; } .facet-title{ font-weight: 800; font-size: 12px; margin: 12px 0 8px; color: var(--text); } .facet-empty{ font-size: 12px; color: var(--muted); padding: 2px 0 6px; } .filter-block{ margin-bottom: 16px; } .filters .chip-row{ margin-top: 6px; } .chip-row{ display:flex; flex-wrap:wrap; gap: 8px; } .card-filter{ display:inline-flex; align-items:center; gap: 7px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--panel) 70%, transparent); cursor:pointer; user-select:none; font-size: 12px; line-height: 1; color: var(--text); max-width: 100%; } .card-filter:hover{ border-color: color-mix(in srgb, var(--blue) 35%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent); } .card-filter.active{ background: color-mix(in srgb, var(--blue) 10%, transparent); border-color: color-mix(in srgb, var(--blue) 55%, transparent); color: var(--text); } .chip-emoji, .flag, .emoji{ width: 16px; height: 16px; display:inline-flex; justify-content:center; align-items:center; transform: translateY(-0.5px); } .chip-emoji{ font-size: 15px; line-height: 1; } .flag{ display:inline-block; } .emoji{ font-size: 15px; line-height: 1; } .chip-label{ white-space: nowrap; } .chip-count{ font-size: 11px; color: var(--muted); margin-left: 4px; } .tip{ margin: 10px 0 6px; color: var(--muted); font-size: 12px; } #stats{ color: var(--muted); font-size: 12px; margin-bottom: 10px; } .empty-state{ border: 1px dashed var(--border); background: color-mix(in srgb, var(--panel) 85%, transparent); border-radius: 14px; padding: 18px; color: var(--muted); } .empty-title{ font-weight: 800; color: var(--text); margin-bottom: 6px; } .empty-sub{ font-size: 13px; } #hits{ flex:1; } /* ========================================================= HIT CARDS (homepage) ========================================================= */ .hit{ position: relative; display:grid; grid-template-columns: 96px 1fr; grid-template-areas: "thumb body" "thumb meta" "thumb desc"; gap: 12px; border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: color-mix(in srgb, var(--panel) 85%, transparent); margin-bottom: 12px; } .thumb{ grid-area: thumb; } .hit-body{ grid-area: body; min-width: 0; } .hit-meta{ grid-area: meta; } .hit-desc{ grid-area: desc; } .thumb{ width: 96px; height: 96px; border-radius: 14px; overflow:hidden; background: color-mix(in srgb, var(--panel2) 75%, transparent); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } .thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .thumb-empty{ background: linear-gradient(135deg, color-mix(in srgb, var(--panel2) 80%, transparent), color-mix(in srgb, var(--panel) 80%, transparent) ); } .hit-title{ display:inline-block; font-weight: 850; font-size: 15px; color: var(--text); text-decoration: none; } .hit-title:hover{ text-decoration: underline; } .hit-meta{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 8px; } .meta-pill{ display:inline-flex; align-items:center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--panel) 70%, transparent); } .meta-pill .k{ font-size: 13px; display:inline-flex; align-items:center; } .hit-desc{ margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hit-desc .k{ color: var(--text); font-weight: 600; } .hit-tags{ display:flex; flex-wrap:wrap; gap: 6px; margin-top: 10px; } .tag{ display:inline-flex; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 10%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent); color: var(--text); font-size: 12px; } /* Pagination */ #pagination{ margin-top: auto; padding-top: 12px; } .pagination-dots{ padding: 0 6px; opacity: .6; font-weight: 600; } .ais-Pagination{ display:flex; justify-content:center; } .ais-Pagination--noRefinement{ display:none; } .ais-Pagination-link{ border: 1px solid var(--border); padding: 8px 10px; color: var(--text); text-decoration:none; font-size: 13px; border-radius: 10px; background: color-mix(in srgb, var(--panel) 70%, transparent); } .ais-Pagination-item--selected .ais-Pagination-link{ background: var(--blue); border-color: var(--blue); color:#0b1020; } /* ========================================================= Hero empty state (homepage) ========================================================= */ .hero-empty{ padding: 10px; } .hero-card{ position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 90%, transparent) 0%, color-mix(in srgb, var(--panel2) 90%, transparent) 100% ); padding: 18px 18px 16px; max-width: 760px; margin: 6px auto 0; box-shadow: var(--shadow); } .hero-card::before{ content:""; position:absolute; top:-140px; right:-140px; width: 320px; height: 320px; background: radial-gradient(circle, color-mix(in srgb, var(--blue) 18%, transparent), transparent 60%); pointer-events:none; } .hero-kicker{ display:inline-flex; align-items:center; gap: 8px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .hero-kicker::before{ content:"🍴"; font-size: 14px; opacity: .9; transform: translateY(-0.5px); } .hero-title{ font-size: 20px; font-weight: 900; letter-spacing: -0.2px; margin: 0 0 6px; color: var(--text); } .hero-sub{ font-size: 14px; line-height: 1.45; color: var(--muted); margin: 0 0 14px; max-width: 62ch; } .hero-label{ font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--text); margin: 0 0 8px; } .hero-actions{ display:flex; flex-wrap:wrap; gap: 10px; } .hero-btn{ display:inline-flex; align-items:center; gap: 8px; border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent); background: color-mix(in srgb, var(--panel) 70%, transparent); border-radius: 999px; padding: 10px 12px; font-size: 13px; color: var(--text); cursor: pointer; user-select: none; transition: transform .06s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .hero-btn:hover{ border-color: color-mix(in srgb, var(--blue) 40%, transparent); box-shadow: var(--shadow); background: color-mix(in srgb, var(--panel) 85%, transparent); } .hero-btn:active{ transform: translateY(1px); } .hero-btn:focus{ outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent), var(--shadow); } .hero-foot{ margin-top: 14px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); font-size: 13px; color: var(--muted); } /* Quick Filters header alignment */ .quick-header{ display:flex; justify-content: space-between; align-items: center; } /* Section title row */ .filter-title-row{ display:flex; justify-content: space-between; align-items: center; gap: 10px; } /* Force text-only link styling */ .clear-link, #clear-all, #clear-cuisine, #clear-ingredients{ appearance:none; background: none !important; border: none !important; padding: 0 !important; margin: 0; cursor: pointer; font-weight: 600; color: var(--blue); font-size: 13px; line-height: 1; } .clear-link:hover, #clear-all:hover, #clear-cuisine:hover, #clear-ingredients:hover{ text-decoration: underline; } .clear-link.small{ font-size: 12px !important; font-weight: 600; color: var(--muted) !important; } #clear-all .ais-ClearRefinements-button{ background:none !important; border:none !important; padding:0 !important; border-radius:0 !important; color: inherit !important; font: inherit !important; } #clear-all .ais-ClearRefinements-button:hover{ text-decoration: underline; } /* ========================================================= SEO shell (homepage / cuisine pages) ========================================================= */ .seo-shell{ margin: 0 0 10px; } .seo-intro{ margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.45; } .seo-links{ display:flex; flex-wrap:wrap; gap: 8px; margin: 0 0 16px; } .seo-links--center{ justify-content: center; } .seo-links a{ display:inline-flex; align-items:center; gap: 8px; padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 70%, transparent); color: var(--text); text-decoration:none; font-size: 12px; font-weight: 650; } .seo-links a:hover{ border-color: color-mix(in srgb, var(--blue) 35%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent); } /* ========================================================= Footer (site-wide) ========================================================= */ .site-footer{ margin-top: 18px; padding: 18px 0 22px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 70%, transparent); } .footer-inner{ display:flex; gap: 14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; } .footer-copy{ color: var(--muted); font-size: 12px; line-height: 1.5; max-width: 70ch; } .footer-links{ display:flex; flex-wrap:wrap; gap: 10px; } .footer-links a{ font-size: 12px; color: var(--blue); text-decoration:none; font-weight: 650; } .footer-links a:hover{ text-decoration: underline; } /* ========================================================= Cuisine / category pages ========================================================= */ .cuisine-grid{ background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; } .ais-Hits-list{ list-style: none; padding: 0; margin: 0; } .ais-Hits-item{ padding: 0; margin: 0 0 12px 0; } a.hit{ display: grid; grid-template-columns: 96px 1fr; gap: 12px; border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: color-mix(in srgb, var(--panel) 85%, transparent); text-decoration: none; color: inherit; transition: transform .06s ease, box-shadow .18s ease, border-color .18s ease; } a.hit:hover{ border-color: color-mix(in srgb, var(--blue) 35%, transparent); box-shadow: var(--shadow); transform: translateY(-1px); } a.hit:active{ transform: translateY(0); } a.hit:focus{ outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent), var(--shadow); } a.hit .title{ font-weight: 850; font-size: 15px; color: var(--text); line-height: 1.25; margin: 0; } a.hit .source-line{ margin-top: 6px; font-size: 12px; color: var(--muted); } a.hit .meta-row{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; } a.hit .meta-pill{ padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 70%, transparent); color: var(--muted); font-size: 12px; } a.hit .thumb{ width: 96px; height: 96px; border-radius: 14px; overflow:hidden; background: color-mix(in srgb, var(--panel2) 75%, transparent); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); } a.hit .thumb img{ width:100%; height:100%; object-fit: cover; display:block; } a.hit .thumb:empty{ background: linear-gradient(135deg, color-mix(in srgb, var(--panel2) 80%, transparent), color-mix(in srgb, var(--panel) 80%, transparent) ); } a.hit .hit-body{ min-width: 0; } a.hit .title{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .breadcrumb{ font-size: 13px; color: var(--muted); margin-bottom: 18px; } .breadcrumb a{ color: var(--muted); text-decoration: none; } .breadcrumb a:hover{ text-decoration: underline; } /* ========================================================= RECIPE PAGES (dark “recipe-test” components, now production-safe) ========================================================= */ .recipe-container{ max-width: var(--container); margin: 0 auto; padding: 18px var(--gutter) 34px; } .recipe-page img{ max-width: 100%; height: auto; } .recipe-title{ margin: 0 0 10px; font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.3px; } .recipe-source{ font-size: 13px; color: var(--muted); margin: 0 0 14px; } .recipe-hero-wrap{ display: flex; justify-content: flex-start; } .recipe-hero{ display:block; width: 100%; max-width: 440px; height:auto; border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--panel2) 65%, transparent); margin: 12px 0 14px; object-fit: cover; } /* Optional “recipe-test” style container/cards if your HTML uses them */ .shell{ width: min(var(--container), calc(100% - (var(--gutter) * 2))); margin: 0 auto; } .recipe-card{ background: linear-gradient(180deg, color-mix(in srgb, #ffffff 4%, transparent), transparent 30%), var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } /* Hero area (if used) */ .recipe-hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 18px; padding: 18px; border-bottom: 1px solid var(--border); } .hero-text{ padding: 8px 6px; } .meta-row{ display:flex; flex-direction: column; gap: 10px; margin-bottom: 10px; } .rating{ display:flex; align-items:center; gap: 10px; color: var(--muted); } .stars{ letter-spacing: 2px; color: #ffd166; } .rating-value{ color: var(--text); font-weight: 700; } .rating-count{ color: var(--muted); } .facts{ display:flex; flex-wrap:wrap; gap: 8px; } .pill{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; } .recipe-desc{ margin: 10px 0 12px; color: var(--text); opacity: .95; max-width: 62ch; } .jump-links{ display:flex; flex-wrap:wrap; gap: 10px; margin: 8px 0 10px; } .jump-links a{ padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 13px; } .jump-links a:hover{ color: var(--text); border-color: color-mix(in srgb, var(--blue) 35%, transparent); } .share-row{ display:flex; align-items:center; gap: 10px; margin-top: 10px; } .share-status{ color: var(--muted); font-size: 13px; min-height: 18px; } /* Body grid (toc + content) */ .recipe-grid{ display:grid; grid-template-columns: 280px 1fr; gap: 16px; padding: 16px 18px 18px; } .toc{ position: relative; } .toc-box{ position: sticky; top: 88px; display:flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); } .toc-title{ font-weight: 750; letter-spacing: .2px; margin-bottom: 2px; } .toc-box a{ color: var(--muted); padding: 8px 10px; border-radius: 12px; } .toc-box a:hover{ background: color-mix(in srgb, #ffffff 4%, transparent); color: var(--text); } .content{ min-width: 0; } .block{ padding: 14px 14px 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface2); margin-bottom: 14px; } .block-head{ display:flex; align-items:flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .block h2{ margin: 0; font-size: 20px; letter-spacing: -0.2px; } .block-sub{ color: var(--muted); font-size: 13px; margin-top: 4px; } .block-actions{ display:flex; gap: 8px; } .ingredients{ margin: 0; padding-left: 18px; color: color-mix(in srgb, var(--text) 96%, transparent); } .ingredients li{ margin: 8px 0; } .steps{ margin: 0; padding-left: 20px; } .steps li{ margin: 10px 0 12px; padding: 10px 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); background: var(--surface2); } .nutrition{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } .nutri-row{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); background: var(--surface2); color: var(--muted); } .nutri-row strong{ color: var(--text); } .bullets{ margin: 0; padding-left: 18px; color: color-mix(in srgb, var(--text) 96%, transparent); } .bullets li{ margin: 8px 0; } /* Related */ .related-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .related-card{ display:flex; gap: 10px; padding: 10px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface2); } .related-card:hover{ border-color: color-mix(in srgb, var(--blue) 35%, transparent); } .related-thumb{ width: 58px; height: 58px; border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 20%, transparent), color-mix(in srgb, var(--blue2) 10%, transparent)); flex: 0 0 auto; } .related-meta{ min-width: 0; } .related-title{ font-weight: 750; margin-bottom: 2px; } .related-sub{ color: var(--muted); font-size: 13px; } /* Ads (real slots) */ .ad-slot{ border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); background: var(--surface); border-radius: 14px; padding: 10px; overflow: hidden; } .ad-slot--sidebar{ max-width: 336px; margin-top: 14px; } .ad-slot--inarticle, .ad-slot--native{ margin: 18px 0; } /* Test placeholders (safe if still present) */ .ad-placeholder{ display: block !important; margin: 14px 0; border-radius: 16px; border: 1px dashed color-mix(in srgb, var(--border) 90%, transparent); background: var(--surface2); overflow: hidden; } .ad-placeholder .ad-label{ font-size: 12px; letter-spacing: .3px; color: var(--muted); padding: 10px 12px; border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent); } .ad-placeholder .ad-box{ display: grid; place-items: center; color: color-mix(in srgb, var(--muted) 70%, transparent); padding: 16px; text-align: center; line-height: 1.25; min-height: 120px; } .ad-300x600 .ad-box{ height: 600px; } .ad-in-article .ad-box{ height: 250px; } .ad-multiplex .ad-box{ height: 280px; } /* Recipe details rows (SQL-only) */ .details{ display: grid; gap: 10px; } .detail-row{ display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--border) 80%, transparent); background: var(--surface); border-radius: 14px; } .detail-row span{ color: var(--muted); font-size: 14px; } .detail-row strong{ color: var(--text); font-weight: 650; } /* Minor recipe-only helpers */ .recipe-container .recipe-h2{ margin-top: 18px; margin-bottom: 10px; } .recipe-container .recipe-links{ display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; } .recipe-container .recipe-links a.meta-pill{ text-decoration: none; } .recipe-container .recipe-links a.meta-pill:hover{ text-decoration: underline; } .recipe-container .recipe-links a.meta-pill:last-child{ font-weight: 600; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 820px){ .grid{ grid-template-columns: 1fr; } #searchbox{ max-width: 100%; min-width: 0; } .top-row{ gap:16px; } } @media (max-width: 980px){ .recipe-hero-grid{ grid-template-columns: 1fr; } .recipe-grid{ grid-template-columns: 1fr; } .toc-box{ position: relative; top: 0; } .related-grid{ grid-template-columns: 1fr; } .nutrition{ grid-template-columns: 1fr; } .header-search-wrapper{ width: 100%; min-width: 0; } } /* Mobile hit card polish */ @media (max-width: 520px){ .hit{ grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "thumb body" "meta meta" "desc desc"; gap: 10px 12px; align-items: start; } .thumb{ grid-area: thumb; width: 84px; height: 84px; } .hit-body{ grid-area: body; min-width: 0; padding-right: 44px; } .hit-title{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2; margin-bottom: 6px; } .hit-rating{ margin-top: 2px; } .hit-meta{ grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .hit-desc{ grid-area: desc; margin-top: 0; } .meta-pill{ font-size: 11px; padding: 5px 8px; gap: 5px; } .meta-pill .k{ font-size: 12px; } .save-recipe-btn{ top: 8px; right: 8px; width: 34px; height: 34px; font-size: 18px; } /* Header layout on mobile */ /* Header layout on mobile */ .top-inner{ padding: 18px var(--gutter) 14px; } .top-row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo logo" "search auth"; align-items: center; column-gap: 12px; row-gap: 12px; } .brand{ grid-area: logo; width: 100%; justify-content: center; } .site-logo{ height: 42px; margin: 0 auto; } #searchbox, body.has-header-search .header-search-wrapper{ grid-area: search; width: 100%; min-width: 0; max-width: none; } .header-auth-nav{ grid-area: auth; margin-left: 0; justify-self: end; align-self: center; gap: 8px; } body.has-header-search .header-auth-nav{ display: flex; align-items: center; } .recipe-page .recipe-hero img, .recipe-page .hero img, .recipe-page .recipe-image img{ width: 100%; height: 220px; object-fit: cover; border-radius: 16px; display: block; } } /* Mobile: reduce tall sidebar ad */ @media (max-width: 980px){ .ad-300x600 .ad-box{ height: 250px; } .ad-slot--sidebar{ max-width: 100%; } } /* Optional: hide TOC on smaller screens (your test css did this) */ @media (max-width: 980px){ .toc{ display:none; } } /* ========================================================= Mobile filters drawer (homepage) ========================================================= */ .filters-toggle{ display:none; } @media (max-width: 820px){ .filters-overlay{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 999; } .filters{ position: fixed; top: 0; left: 0; height: 100vh; width: 86vw; max-width: 360px; transform: translateX(-105%); transition: transform 220ms ease; z-index: 1000; overflow-y: auto; border-radius: 0 16px 16px 0; margin: 0; } body.filters-open{ overflow: hidden; } body.filters-open .filters{ transform: translateX(0); } body.filters-open .filters-overlay{ display: block; } .filters-toggle{ display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 70%, transparent); border-radius: 999px; cursor: pointer; user-select: none; white-space: nowrap; } .filters-toggle:active{ transform: translateY(1px); } .filters-toggle .icon{ font-size: 16px; line-height: 1; } .search-wrapper.has-filters-toggle{ position: relative; } .search-wrapper.has-filters-toggle .filters-toggle{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; } .search-wrapper.has-filters-toggle .ais-SearchBox-input{ padding-right: 54px !important; } } /* ========================================================= Homepage sort + rating UI ========================================================= */ .seo-links{ margin: 0 0 16px; } .seo-links-row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; } .seo-links-chips{ display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .sort-by-wrap{ display: flex; align-items: center; justify-content: flex-end; white-space: nowrap; } .sort-inline{ display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 13px; line-height: 1.2; white-space: nowrap; } .sort-inline-label{ color: #8fa1bd; font-weight: 600; } .sort-inline-sep{ color: rgba(255,255,255,.28); } .sort-inline-link{ appearance: none; background: none; border: none; padding: 0; margin: 0; font: inherit; color: #8fb8ff; cursor: pointer; text-decoration: none; } .sort-inline-link:hover{ color: #c7dcff; text-decoration: underline; } .sort-inline-link.is-active{ color: #ffffff; font-weight: 700; cursor: default; text-decoration: none; } /* Rating row on result cards */ .hit-rating{ display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; line-height: 1; flex-wrap: wrap; } .rating-stars{ position: relative; display: inline-block; font-size: 16px; line-height: 1; letter-spacing: 1px; vertical-align: middle; } .rating-stars-base{ color: #d5d5d5; } .rating-stars-fill{ position: absolute; left: 0; top: 0; white-space: nowrap; overflow: hidden; color: #f59e0b; } .hit-rating-value{ font-weight: 700; color: var(--text); } .hit-rating-count{ color: #6b7280; } /* Tablet/mobile */ @media (max-width: 900px){ .seo-links-row{ grid-template-columns: 1fr; gap: 8px; } .sort-by-wrap{ justify-content: flex-end; } } @media (max-width: 640px){ .sort-inline{ font-size: 12px; gap: 6px; flex-wrap: wrap; } .hit-rating{ gap: 6px; font-size: 13px; } .rating-stars{ font-size: 15px; } } /* ========================================================= Account page ========================================================= */ .account-grid{ display:grid; grid-template-columns: 320px 1fr; gap:16px; } .account-sidebar{ position: relative; } .account-sidebar .toc-box{ position: sticky; top: 88px; } .account-summary-card{ padding:20px; margin-bottom:18px; } .account-empty{ border: 1px dashed var(--border); background: color-mix(in srgb, var(--panel) 85%, transparent); border-radius: 14px; padding: 18px; color: var(--muted); } .account-empty-title{ font-weight: 800; color: var(--text); margin-bottom: 6px; } .account-empty-sub{ font-size: 13px; } .account-sidebar #accountLogoutBtn{ width: 100%; justify-content: flex-start; } @media (max-width: 980px){ .account-grid{ grid-template-columns: 1fr; } .account-sidebar{ order: 2; } .account-sidebar .toc-box{ position: static; top: auto; } } @media (max-width: 640px){ .account-summary-card{ padding:16px; margin-bottom:14px; } .account-grid{ gap:14px; } .block{ padding: 12px 12px 10px; } .detail-row{ flex-direction: column; align-items: flex-start; gap: 6px; } .detail-row strong{ word-break: break-word; } .toc-box{ gap: 8px; padding: 12px; } .toc-box a, .toc-box button{ width: 100%; text-align: left; } } .save-recipe-btn{ position:absolute; top:10px; right:10px; z-index:3; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--muted); border: 1px solid var(--border); border-radius:999px; font-size:16px; line-height:1; padding:0; cursor:pointer; box-shadow: var(--shadow); } .save-recipe-btn:hover{ transform:scale(1.05); border-color: color-mix(in srgb, var(--blue) 35%, transparent); } .save-recipe-btn.saved{ color:#f5c542; } /* ========================================= Save Recipe Toast Notification ========================================= */ .save-toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(12px); background:#111827; color:#fff; border-radius:999px; padding:12px 18px; font-size:14px; font-weight:500; box-shadow:0 12px 30px rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; z-index:9999; } .save-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); } @media (max-width:640px){ .save-toast{ bottom:18px; font-size:13px; } } .account-logout-btn { width: 100%; margin-top: 12px; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: #fff; font-size: 0.9rem; cursor: pointer; transition: all .15s ease; } .account-logout-btn:hover { background: rgba(255,80,80,0.18); border-color: rgba(255,80,80,0.35); }