. */ main:not(.main-tab-content) { padding-top: 180px; } @media (max-width: 768px) { main:not(.main-tab-content) { padding-top: 130px; } } .mp-cell-remove { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: white; cursor: pointer; font-size: 11px; line-height: 1; padding: 0; display: none; } .mp-cell:hover .mp-cell-remove { display: block; } /* ---- Weekly Menu tile grid (profile.html → Recipe Collections tab) ---- Matches the "Saved Recipes" sidebar style from mockup/meal_planner_design.png: small square thumbnail on top, recipe name below, soft hover lift, X to remove. */ .wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 10px; } .wm-tile { background: var(--white); border: 1px solid rgba(31, 72, 54, 0.08); border-radius: 10px; overflow: hidden; cursor: pointer; transition: box-shadow 0.18s, transform 0.05s; display: flex; flex-direction: column; position: relative; } .wm-tile:hover { box-shadow: var(--card-shadow); transform: translateY(-2px); } .wm-tile img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--cream-bg); } .wm-tile .wm-name { padding: 0.5rem 0.6rem 0.2rem; font-family: var(--body-font); font-size: 0.85rem; line-height: 1.25; color: var(--text-color); font-weight: 500; /* clamp to 2 lines so layout stays uniform */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wm-tile .wm-meta { padding: 0 0.6rem 0.55rem; font-size: 0.72rem; color: var(--muted-text); display: flex; align-items: center; gap: 4px; } .wm-tile .wm-meta .fa-clock { font-size: 0.7rem; } .wm-tile .wm-remove { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; opacity: 0; transition: opacity 0.15s; z-index: 2; } .wm-tile:hover .wm-remove { opacity: 1; } /* --------------------------------------------------------------------- */ /* Recipe card polish: touch targets + responsive image ratios */ /* --------------------------------------------------------------------- */ /* Touch targets — 44×44 minimum per iOS HIG / Material tap-target guidance. Applies to the primary icon toggles on recipe cards and to the small text-action buttons (Share, Edit, Delete, Feature). */ .favorite-toggle, .weekly-menu-toggle { width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; } .favorite-toggle i, .weekly-menu-toggle i { font-size: 1.15rem; } .action-text-btn { min-height: 44px; padding: 10px 14px; } /* Small remove X buttons: keep the compact circle visually but expand the hit-area on touch viewports so a finger can actually land on them. */ @media (max-width: 768px) { .remove-recipe-btn, .wm-tile .wm-remove, .mp-cell-remove { min-width: 44px; min-height: 44px; /* Center the small visual icon inside the enlarged tap area */ display: flex; align-items: center; justify-content: center; } /* Reveal the wm-remove overlay by default on touch — hover isn't reliable, and the enlarged target is now easy to hit. */ .wm-tile .wm-remove { opacity: 1; } } /* Consistent aspect-ratio + object-fit: cover on card images so layouts don't shift with each photo's native ratio. Detail-page hero image and the recipe-detail carousel keep their existing `contain` behavior because users need to see the whole photo there. */ .recipe-card .recipe-image { aspect-ratio: 16 / 9; width: 100% !important; height: auto !important; max-height: none !important; overflow: hidden; background: #f8f9fa; display: block; padding: 0; } .recipe-card .recipe-image img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center; display: block; margin: 0; } .recipe-card-mini img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #f8f9fa; } /* Only style the inside .wide-image — the container's width is set by the .recipe-card-wide flex layout (30% desktop, 100% mobile). Setting width on the container itself would break that layout and push the info / details columns off-screen. */ .wide-image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; background: #f8f9fa; } /* On mobile the wide card stacks vertically; give the image a stable 16:9 frame instead of a fixed 250px height that squishes tall photos. */ @media (max-width: 768px) { .wide-image { height: auto !important; aspect-ratio: 16 / 9; } } .compact-thumb { object-fit: cover !important; object-position: center center; } /* Prevent compact-card content from pushing the card wider than its container. Without min-width:0 the flex child sizes to its content's min-content width, which for long titles / metadata causes the trailing text to be clipped off the right edge of the card. */ .recipe-card-compact .compact-content { min-width: 0; flex: 1 1 auto; } .recipe-card-compact .compact-content h4, .recipe-card-compact .compact-meta { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } /* Featured Recipes section — full-viewport-width safety net on mobile. Without this, one of the conflicting `.recipes-container` / `.recipe-showcase` width rules can leave a strip on the right where the body's cream background shows through the section's white. */ @media (max-width: 900px) { html, body { max-width: 100vw; overflow-x: hidden; } .featured-recipes { padding-left: 1rem !important; padding-right: 1rem !important; width: 100%; max-width: 100vw; box-sizing: border-box; } #recipes-container, .recipe-showcase, .recipes-container { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; } .recipe-card-wrapper { width: 100%; max-width: 100%; box-sizing: border-box; } .recipe-card-wide { width: 100% !important; max-width: 100% !important; box-sizing: border-box; margin-left: 0; margin-right: 0; } } /* Header login/user button on narrow viewports: cap width, truncate the username, and let the primary-links row shrink so the whole header fits inside the viewport. */ @media (max-width: 768px) { .primary-nav { gap: 0.5rem; flex-wrap: wrap; } .nav-links.primary-links { flex-shrink: 1; min-width: 0; } .user-menu-container { max-width: 100%; } #login-btn { max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 0.35rem; } /* Small phones: hide the username text, leaving just the avatar + chevron. Dropdown still contains My Account / Edit Profile / Logout. */ @media (max-width: 480px) { #login-btn span, #login-btn { max-width: 44px; } } } /* --------------------------------------------------------------------- */ /* Mobile touch fallbacks */ /* --------------------------------------------------------------------- */ /* Meal-planner: tap-to-assign bottom sheet (replaces drag-drop on ≤768px). Hidden by default; JS toggles `.open` when a sidebar recipe is tapped. */ .mp-assign-modal { position: fixed; inset: 0; z-index: 2000; display: none; justify-content: center; align-items: flex-end; } .mp-assign-modal.open { display: flex; } .mp-assign-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .mp-assign-sheet { position: relative; background: var(--white, #fff); width: 100%; max-width: 520px; border-radius: 20px 20px 0 0; max-height: 85vh; overflow-y: auto; animation: mp-slide-up 0.22s ease-out; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15); } @keyframes mp-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .mp-assign-header { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; position: sticky; top: 0; background: var(--white, #fff); z-index: 1; } .mp-assign-header h3 { margin: 0; font-size: 1.05rem; font-family: var(--body-font); color: var(--header-text-color, #1f4836); } .mp-assign-recipe-name { margin: 0.25rem 0 0; color: var(--muted-text, #6b7280); font-size: 0.85rem; } .mp-assign-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--muted-text, #6b7280); cursor: pointer; padding: 0 0.25rem; } .mp-assign-body { padding: 0.75rem 1.25rem 1.25rem; } .mp-assign-day-block { margin-top: 0.9rem; } .mp-assign-day-block:first-child { margin-top: 0; } .mp-assign-day-name { font-weight: 600; color: var(--header-text-color, #1f4836); margin-bottom: 0.4rem; font-size: 0.9rem; } .mp-assign-meals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .mp-assign-slot-btn { padding: 0.65rem 0.4rem; border: 1px solid rgba(31, 72, 54, 0.2); border-radius: 10px; background: var(--white, #fff); cursor: pointer; font-size: 0.9rem; font-family: var(--body-font); color: var(--text-color); transition: background 0.15s, border-color 0.15s; min-height: 44px; /* iOS tap target */ } .mp-assign-slot-btn:active, .mp-assign-slot-btn:hover { background: rgba(31, 72, 54, 0.08); border-color: var(--primary-color); } .mp-assign-slot-btn.occupied { background: rgba(156, 175, 136, 0.22); border-color: var(--primary-color); font-weight: 600; } .mp-assign-slot-btn.occupied::after { content: ' • filled'; color: var(--muted-text, #6b7280); font-weight: 400; font-size: 0.75em; } /* Belt-and-braces: never show the sheet on desktop even if `.open` sticks. */ @media (min-width: 769px) { .mp-assign-modal.open { display: none; } } /* Map: segmented view toggle + mobile-friendly country list. */ .map-view-toggle { display: flex; justify-content: center; gap: 0; margin: 0 auto 1.5rem; background: rgba(31, 72, 54, 0.08); padding: 4px; border-radius: 12px; max-width: 320px; } .map-view-btn { flex: 1; padding: 0.55rem 1rem; border: none; background: transparent; color: var(--text-color); font-weight: 600; font-size: 0.9rem; border-radius: 8px; cursor: pointer; transition: background 0.15s, color 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 40px; } .map-view-btn.active { background: var(--white, #fff); color: var(--primary-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .map-view-btn i { font-size: 0.85em; } .map-view-list { max-width: 600px; margin: 0 auto 1.5rem; padding: 0 1rem; box-sizing: border-box; } .map-list-search { position: relative; margin-bottom: 0.9rem; } .map-list-search i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 0.9rem; pointer-events: none; } .map-list-search input { width: 100%; box-sizing: border-box; padding: 0.65rem 0.75rem 0.65rem 2.4rem; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 10px; font-size: 1rem; font-family: var(--body-font); background: var(--white, #fff); } .map-country-list { list-style: none; padding: 0; margin: 0; max-height: 65vh; overflow-y: auto; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 10px; background: var(--white, #fff); } .map-country-list li { padding: 0.8rem 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; transition: background 0.15s; min-height: 48px; box-sizing: border-box; } .map-country-list li:last-child { border-bottom: none; } .map-country-list li:active, .map-country-list li:hover { background: rgba(31, 72, 54, 0.06); } .map-country-list .country-name { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text-color); font-weight: 500; } .map-country-list .country-name img { width: 24px; height: 18px; border-radius: 2px; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } .map-country-list .country-count { color: var(--muted-text, #6b7280); font-size: 0.8rem; font-weight: 600; background: rgba(31, 72, 54, 0.08); padding: 3px 10px; border-radius: 999px; flex-shrink: 0; } .map-country-list-empty { padding: 1.25rem 1rem; text-align: center; color: var(--muted-text, #6b7280); cursor: default !important; } /* Inline username links (recipe author bylines, "Shared by", etc.). Match the app's primary color and stay clickable but understated. */ .author-link-inline { color: var(--primary-color); font-weight: 600; text-decoration: none; } .author-link-inline:hover { text-decoration: underline; color: var(--secondary-color); } /* CTA at the bottom of each contributor card — takes the visitor straight to that user's profile page. */ .view-profile-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.55rem 1rem; border-radius: 8px; background: var(--primary-color); color: #fff; font-weight: 600; font-size: 0.85rem; text-decoration: none; transition: background 0.15s, transform 0.05s; } .view-profile-btn:hover { background: var(--header-text-color); color: #fff; } .view-profile-btn:active { transform: translateY(1px); } .view-profile-btn i { font-size: 0.8em; } /* Desktop user dropdown — shown from the primary-nav login button once the user is logged in. My Account + Logout live here (previously "My Account" was a top-level nav item). Toggled by `toggleUserDropdown` in script.js. */ .user-menu-container { position: relative; } .user-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--white); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 0.4rem; display: none; z-index: 1000; } .user-dropdown.show { display: block; } .user-dropdown a { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; color: var(--text-color); text-decoration: none; border-radius: 6px; font-size: 0.95rem; font-weight: 500; transition: background 0.15s; } .user-dropdown a:hover { background: rgba(31, 72, 54, 0.08); color: var(--primary-color); } .user-dropdown a i { width: 16px; color: var(--primary-color); } /* Shopping-list explanatory note (top of #shopping-list section) */ .shopping-note { background: rgba(156, 175, 136, 0.18); border-left: 4px solid var(--primary-color); color: var(--text-color); padding: 0.85rem 1.1rem; border-radius: 8px; margin: 0.5rem 0 1.25rem; font-size: 0.95rem; line-height: 1.55; } .shopping-note i.fa-info-circle { color: var(--primary-color); margin-right: 0.45rem; } .shopping-note a { color: var(--primary-color); font-weight: 600; text-decoration: underline; } .shopping-note a:hover { color: var(--secondary-color); } .shopping-note strong { color: var(--primary-color); } /* ---- Map: country recipes grid (below the world map) ---- Cards include a thumbnail, title, author, country, time, difficulty, date. Replaces the earlier flat blue text list. */ .map-country-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; padding: 0 !important; } .map-country-card { display: flex; background: var(--white); border-radius: 14px; overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid rgba(31, 72, 54, 0.06); text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; } .map-country-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); border-color: rgba(31, 72, 54, 0.18); } .map-country-card .mcc-image { flex: 0 0 110px; background: var(--cream-bg); position: relative; overflow: hidden; } .map-country-card .mcc-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .map-country-card:hover .mcc-image img { transform: scale(1.04); } .map-country-card .mcc-body { flex: 1; padding: 0.85rem 1rem 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .map-country-card .mcc-title { font-family: var(--heading-font); font-size: 1.2rem; color: var(--header-text-color); font-weight: 600; margin: 0; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .map-country-card .mcc-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.78rem; color: var(--muted-text); align-items: center; } .map-country-card .mcc-meta span { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; } .map-country-card .mcc-meta i { color: var(--primary-color); font-size: 0.78rem; } .map-country-card .mcc-country { color: var(--accent-color); font-weight: 600; } .map-country-card .mcc-country i { color: var(--accent-color); } @media (max-width: 600px) { .map-country-card .mcc-image { flex: 0 0 92px; } .map-country-card .mcc-title { font-size: 1.05rem; } } /* ---- "What Can I Cook?" tab ------------------------------------------ */ .cook-with { background: var(--white); padding: 4rem 1rem; } .cw-panel { max-width: 700px; margin: 0 auto 2rem; background: var(--cream-bg); border: 1px solid rgba(31, 72, 54, 0.12); border-radius: 16px; padding: 1.5rem; box-sizing: border-box; } .cw-label { display: block; font-weight: 600; color: var(--header-text-color); margin-bottom: 0.5rem; } .cw-entry { display: flex; gap: 0.5rem; } .cw-entry input { flex: 1; min-width: 0; padding: 0.7rem 1rem; border: 1px solid rgba(31, 72, 54, 0.2); border-radius: 999px; font-family: var(--body-font); font-size: 1rem; background: var(--white); } .cw-entry input:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(31, 72, 54, 0.12); } .cw-add-btn { flex-shrink: 0; padding: 0.7rem 1.4rem; min-height: 44px; border: none; border-radius: 999px; background: var(--primary-color); color: #fff; font-weight: 600; font-family: var(--body-font); cursor: pointer; transition: background 0.15s; } .cw-add-btn:hover { background: var(--secondary-color); } .cw-hint { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted-text); } .cw-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; min-height: 2rem; } .cw-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.5rem 0.35rem 0.9rem; background: var(--white); border: 1px solid rgba(31, 72, 54, 0.18); border-radius: 999px; font-size: 0.9rem; color: var(--text-color); } .cw-chip-x { border: none; background: none; color: var(--muted-text); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; min-width: 28px; min-height: 28px; } .cw-chip-x:hover { color: #e74c3c; } .cw-controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(31, 72, 54, 0.1); } .cw-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-color); cursor: pointer; } .cw-check input { accent-color: var(--primary-color); } .cw-clear-btn { border: 1px solid rgba(31, 72, 54, 0.2); background: var(--white); color: var(--text-color); border-radius: 999px; padding: 0.45rem 1rem; min-height: 36px; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .cw-clear-btn:hover { border-color: #e74c3c; color: #e74c3c; } .cw-results { max-width: 820px; margin: 0 auto; } .cw-count { color: var(--muted-text); font-size: 0.9rem; margin: 0 0 1rem; } .cw-empty { color: var(--muted-text); font-style: italic; } .cw-card { display: flex; gap: 1rem; align-items: flex-start; background: var(--white); border: 1px solid rgba(31, 72, 54, 0.1); border-radius: 14px; padding: 0.9rem; margin-bottom: 0.9rem; text-decoration: none; color: inherit; box-shadow: var(--card-shadow); transition: transform 0.18s, box-shadow 0.18s; } .cw-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); } .cw-thumb { width: 110px; height: 82px; flex-shrink: 0; object-fit: cover; border-radius: 10px; background: #f8f9fa; } .cw-body { min-width: 0; flex: 1; } .cw-title { margin: 0 0 0.4rem; font-family: var(--heading-font); font-size: 1.15rem; color: var(--header-text-color); overflow-wrap: anywhere; } .cw-score { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .cw-badge { background: rgba(156, 175, 136, 0.28); color: var(--primary-color); font-weight: 600; font-size: 0.8rem; padding: 3px 10px; border-radius: 999px; } .cw-sub { font-size: 0.8rem; color: var(--muted-text); } .cw-missing { font-size: 0.85rem; color: var(--muted-text); line-height: 1.5; overflow-wrap: anywhere; } .cw-missing strong { color: var(--text-color); } .cw-have-all { font-size: 0.85rem; font-weight: 600; color: var(--primary-color); } @media (max-width: 640px) { .cook-with { padding: 3rem 0.75rem; } .cw-panel { padding: 1rem; } .cw-entry { flex-wrap: wrap; } .cw-entry input { width: 100%; } .cw-add-btn { width: 100%; } .cw-card { flex-direction: column; } .cw-thumb { width: 100%; height: 150px; } } /* Logged-out prompt in the main-page hero. Hidden by updateLoginButton() once the visitor signs in. Uses the site's primary pill button so it reads as part of the same design language as the rest of the CTAs. */ .hero-signup-note { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin: 0 auto 2rem; } .hero-signup-text { color: var(--muted-text); font-size: 1.05rem; } .hero-signup-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--primary-color); color: var(--white); border: 1px solid var(--primary-color); border-radius: 999px; padding: 0.65rem 1.5rem; font-family: var(--body-font); font-weight: 600; font-size: 1rem; min-height: 44px; cursor: pointer; transition: background 0.2s, transform 0.05s; } .hero-signup-btn:hover { background: var(--secondary-color); } .hero-signup-btn:active { transform: translateY(1px); } /* ===================================================================== SITE-WIDE REDESIGN — modelled on the supplied mobile mockup. Appended last so it wins on equal specificity. Everything here is presentational; no layout mechanism the JS depends on is changed. ===================================================================== */ /* ---- 1. Section rhythm ------------------------------------------------ */ .main-tab-content > h2, section > h2 { font-family: var(--heading-font); letter-spacing: -0.01em; } /* ---- 2. Cards: one radius, one shadow, one hover ---------------------- */ .recipe-card, .recipe-card-wide, .recipe-card-compact, .recipe-card-mini, .contributor-card, .map-country-card, .cw-card, .wm-tile, .mp-recipe { border-radius: 16px !important; border: 1px solid rgba(31, 72, 54, 0.08); box-shadow: 0 1px 3px rgba(31, 72, 54, 0.06), 0 8px 24px -12px rgba(31, 72, 54, 0.12); transition: transform 0.2s ease, box-shadow 0.2s ease; } .recipe-card:hover, .recipe-card-wide:hover, .recipe-card-compact:hover, .contributor-card:hover, .map-country-card:hover, .cw-card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(31, 72, 54, 0.08), 0 16px 32px -14px rgba(31, 72, 54, 0.22); } /* Card imagery: soft rounding, never stretched. */ .recipe-card-compact img, .cw-thumb, .recipe-card-mini img, .wm-tile img, .mp-recipe img { border-radius: 12px; object-fit: cover; } /* ---- 3. Inputs and selects ------------------------------------------- */ input[type="text"], input[type="search"], input[type="url"], input[type="email"], input[type="password"], textarea, select { font-family: var(--body-font); } input[type="text"]:focus, input[type="search"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(31, 72, 54, 0.12); } /* ---- 4. Mobile ------------------------------------------------------- */ @media (max-width: 768px) { /* 4a. Section navigation as a scrollable pill row. Previously every nav link lived behind the hamburger, so moving between sections took two taps and gave no sense of place. The mockup puts the sections on screen as pills; this does the same. The primary nav (logo / account) stays in the hamburger. */ .nav-links.secondary-links { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; width: 100%; gap: 0.45rem; margin: 0; padding: 0.6rem 1rem; background: transparent; border: none; box-shadow: none; border-radius: 0; } .nav-links.secondary-links::-webkit-scrollbar { display: none; } .nav-links.secondary-links li { width: auto; flex: 0 0 auto; border-bottom: none; text-align: left; } .nav-links.secondary-links li a { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; padding: 0.5rem 0.95rem !important; border-radius: 999px; background: #f4f6f3; border: 1px solid rgba(31, 72, 54, 0.12); font-size: 0.85rem; font-weight: 600; min-height: 40px; box-sizing: border-box; } .nav-links.secondary-links li a.active { background: var(--primary-color); border-color: var(--primary-color); color: var(--white) !important; } .nav-links.secondary-links li a.active i { color: var(--white) !important; } .secondary-nav { flex-direction: row; align-items: center; padding: 0; width: 100%; } .secondary-header { padding: 0; } /* 4b. Tighter section padding — the old 4rem/6rem wasted most of a phone screen before any content appeared. */ section, .main-tab-content { padding-left: 1rem !important; padding-right: 1rem !important; } .featured-recipes, .shopping-list, .cook-with, .map-section, .profile { padding-top: 1.5rem; padding-bottom: 2.5rem; } .main-tab-content > h2, section > h2 { font-size: 1.5rem !important; margin-bottom: 1rem !important; } /* 4c. One card per row; stop the 400px minimum forcing overflow. */ .recipe-grid, .recipes-container, .recipe-showcase, .contributors-grid, .author-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } /* 4d. Hero */ .hero-merged h1, .hero h1, .hero-content h1 { font-size: 2rem !important; } .hero-merged, .hero { padding: 2.5rem 1rem 2rem !important; } /* 4e. Filter controls as a scrollable row rather than a stacked block. */ .filter-tabs { gap: 0.5rem !important; } .filter-select { font-size: 0.85rem !important; padding: 0.45rem 0.9rem !important; } } /* ===================================================================== Hamburger fix: keep the section pills out of the slide-in drawer. At <=768px `.nav-links` becomes a fixed full-screen drawer, and the hamburger toggles `.active` on *every* .nav-links list. Since the section nav is now permanently visible as pills, it was also being turned into a second full-screen overlay on top of the first. ===================================================================== */ @media (max-width: 768px) { .nav-links.secondary-links, .nav-links.secondary-links.active { position: static !important; left: auto !important; top: auto !important; height: auto !important; max-height: none !important; width: 100% !important; z-index: auto !important; background: transparent !important; box-shadow: none !important; overflow-y: visible !important; transition: none !important; padding: 0.55rem 1rem !important; align-items: center !important; justify-content: center !important; } /* The drawer itself only ever holds the account menu. */ .nav-links.primary-links { z-index: 1200; } /* Keep the hamburger and the account button above the drawer. */ .hamburger, .mobile-auth-actions { z-index: 1300 !important; } /* The user dropdown belongs to the account button, not the drawer. */ .user-dropdown { z-index: 1400 !important; } } @media (max-width: 768px) { /* The drawer only ever contained the account button, which the person icon in .mobile-auth-actions already provides, and the section links are now permanently visible as pills. So the hamburger opened a full-screen overlay duplicating what was already on screen. Remove both; delete this rule to bring the drawer back. */ .hamburger { display: none !important; } .nav-links.primary-links, .nav-links.primary-links.active { display: none !important; } } /* ===================================================================== Header clearance driven by the measured header height (--header-h, set in script.js). Falls back to a sane value before JS runs. ===================================================================== */ :root { --header-h: 132px; } .main-tab-content, .hero, .profile-container, main:not(.main-tab-content) { padding-top: calc(var(--header-h) + 1rem) !important; } .recipe-header { padding-top: calc(var(--header-h) + 1rem) !important; } @media (max-width: 768px) { /* Smaller pills so the header stays short and the row is less likely to wrap onto a second line. */ .nav-links.secondary-links { padding: 0.4rem 0.75rem !important; gap: 0.35rem !important; row-gap: 0.35rem !important; } .nav-links.secondary-links li a { padding: 0.32rem 0.7rem !important; font-size: 0.78rem !important; min-height: 32px !important; gap: 0.3rem; } .nav-links.secondary-links li a i { font-size: 0.75em; } .primary-header { padding: 0.5rem 0 !important; } .logo a, .logo { font-size: 1.25rem !important; } .main-tab-content, .hero, .profile-container, main:not(.main-tab-content) { padding-top: calc(var(--header-h) + 0.75rem) !important; } } /* ===================================================================== Meal planner, phone layout: a card per day with three meal pills. Supersedes the rotated grid — same cells, different presentation. ===================================================================== */ @media (max-width: 768px) { /* The original grid scaffolding is replaced by the day cards. */ .mp-hidden-on-cards { display: none !important; } .mp-grid[data-day-cards="1"] { display: flex !important; flex-direction: column; gap: 0.6rem; background: transparent; padding: 0; min-width: 0; } .mp-day-card { background: var(--white); border: 1px solid rgba(31, 72, 54, 0.14); border-radius: 14px; padding: 0.6rem 0.7rem 0.7rem; box-shadow: 0 1px 2px rgba(31, 72, 54, 0.05); } .mp-day-name { font-family: var(--body-font); font-weight: 700; font-size: 0.95rem; color: var(--header-text-color); margin-bottom: 0.45rem; } .mp-day-meals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; align-items: start; } .mp-slot { min-width: 0; } .mp-slot-label { font-size: 0.62rem; font-weight: 600; color: var(--muted-text); text-align: center; margin-bottom: 0.25rem; } /* Each meal slot renders as a pill rather than a grid cell. */ .mp-day-card .mp-cell { min-height: 34px !important; height: auto; padding: 0 !important; border-radius: 999px !important; border: 1px dashed rgba(31, 72, 54, 0.28) !important; background: var(--white) !important; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* Empty slot: outlined "+ Meal" pill. */ .mp-day-card .mp-cell.empty::before { content: "+" !important; position: static !important; font-size: 0.85rem !important; color: var(--muted-text) !important; font-weight: 600; } /* Filled slot: solid green pill with thumbnail and title. */ .mp-day-card .mp-cell:not(.empty) { border-style: solid !important; border-color: var(--primary-color) !important; background: var(--primary-color) !important; } .mp-day-card .mp-cell-recipe { flex-direction: row !important; align-items: center; gap: 5px; height: auto !important; width: 100%; background: transparent !important; box-shadow: none !important; padding: 3px 7px 3px 3px; border-radius: 999px; overflow: hidden; } .mp-day-card .mp-cell-recipe img { width: 22px !important; height: 22px !important; min-width: 22px; border-radius: 50% !important; object-fit: cover; flex-shrink: 0; } .mp-day-card .mp-cell-recipe .lbl { padding: 0 !important; font-size: 0.62rem !important; line-height: 1.15; color: #fff !important; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; } .mp-day-card .mp-cell-recipe .time, .mp-day-card .mp-cell-recipe .mp-servings { display: none !important; } .mp-day-card .mp-cell-remove { top: 2px; right: 2px; width: 15px; height: 15px; font-size: 9px; } /* ---- Saved Recipes strip: 3 across, much smaller ---- */ .mp-saved-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.5rem !important; margin-top: 0.4rem !important; } .mp-saved-list .mp-empty { grid-column: 1 / -1; } .mp-recipe img { height: 52px !important; } .mp-recipe .mp-recipe-title { font-size: 0.62rem !important; padding: 0.25rem 0.3rem 0.3rem !important; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Cook time is noise at this size. */ .mp-recipe .mp-recipe-meta { display: none !important; } .mp-sidebar { max-height: none !important; padding-bottom: 0.75rem !important; } } /* ===================================================================== Meal slots: photo-only tiles matching the Saved Recipes thumbnails. The name is hidden until the slot is tapped, so a full week stays readable at a glance. Overrides the earlier pill treatment. ===================================================================== */ @media (max-width: 768px) { .mp-day-card .mp-cell { min-height: 56px !important; border-radius: 10px !important; border: 1px dashed rgba(31, 72, 54, 0.28) !important; background: var(--white) !important; position: relative; overflow: hidden; display: block; } .mp-day-card .mp-cell.empty { min-height: 44px !important; display: flex; align-items: center; justify-content: center; } .mp-day-card .mp-cell:not(.empty) { border-style: solid !important; border-color: rgba(31, 72, 54, 0.14) !important; background: var(--white) !important; padding: 0 !important; } .mp-day-card .mp-cell-recipe { flex-direction: column !important; gap: 0; height: auto !important; width: 100%; padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 10px; overflow: hidden; } /* Same proportions as .mp-recipe img in the Saved Recipes strip. */ .mp-day-card .mp-cell-recipe img { width: 100% !important; height: 56px !important; min-width: 0; border-radius: 0 !important; object-fit: cover !important; display: block; flex-shrink: 0; } /* Name hidden by default; slides over the photo when tapped. */ .mp-day-card .mp-cell-recipe .lbl { display: none !important; position: absolute; inset: 0; margin: 0; padding: 4px 5px !important; background: rgba(31, 72, 54, 0.92); color: #fff !important; font-size: 0.58rem !important; font-weight: 600; line-height: 1.2; align-items: center; justify-content: center; text-align: center; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .mp-day-card .mp-cell.show-name .mp-cell-recipe .lbl { display: flex !important; } .mp-day-card .mp-cell-recipe .time, .mp-day-card .mp-cell-recipe .mp-servings { display: none !important; } .mp-day-card .mp-cell-remove { display: block; top: 3px; right: 3px; width: 17px; height: 17px; font-size: 10px; z-index: 3; } /* ---- Shopping list, now embedded under the weekly menu ---- */ .mp-shopping-embedded { padding: 1.25rem 0 0 !important; margin-top: 1.5rem; border-top: 1px solid rgba(31, 72, 54, 0.12); background: transparent !important; } } /* Embedded shopping list: no longer a standalone tab, so it should not carry the full-page section padding or its own top offset. */ .mp-shopping-embedded { padding: 1.5rem 0 0 !important; margin-top: 2rem; border-top: 1px solid rgba(31, 72, 54, 0.12); background: transparent !important; min-height: 0 !important; } .mp-shopping-embedded > h2 { text-align: left; } /* ===================================================================== Servings stepper fixes. Desktop: the cell was min-height 110px with overflow:hidden, but the photo (55%) + title + time + stepper needed ~121px, so the stepper was clipped off the bottom. Give the row real height and pin the photo to a fixed size so the text and stepper always fit. ===================================================================== */ .mp-grid { grid-auto-rows: minmax(158px, auto); } .mp-cell { min-height: 158px; } .mp-cell-recipe { justify-content: flex-start; } .mp-cell-recipe img { height: 66px !important; flex-shrink: 0; } .mp-cell-recipe .mp-servings { margin-top: auto; flex-shrink: 0; padding-bottom: 2px; } @media (max-width: 768px) { /* Phone: the stepper joins the tap-to-reveal overlay, so a meal's servings can be changed without leaving the week view. */ .mp-day-card .mp-cell.show-name .mp-cell-recipe .lbl { inset: 0 0 24px 0; -webkit-line-clamp: 2; } .mp-day-card .mp-cell.show-name .mp-cell-recipe .mp-servings { display: flex !important; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0; padding: 2px 4px; gap: 6px; background: rgba(20, 48, 36, 0.96); justify-content: center; align-items: center; } .mp-day-card .mp-cell.show-name .mp-servings .serv-btn { width: 18px; height: 18px; min-width: 18px; font-size: 0.75rem; background: rgba(255, 255, 255, 0.9); border-color: transparent; color: var(--primary-color); } .mp-day-card .mp-cell.show-name .mp-servings .servings-display { color: #fff; font-size: 0.56rem; } /* Hint that tapping does something, since the photo alone gives no cue. */ .mp-day-card .mp-cell:not(.empty)::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 0 1px rgba(31, 72, 54, 0.35); pointer-events: none; } .mp-day-card .mp-cell.show-name::after { display: none; } } /* ===================================================================== Mobile bottom navigation + the meal-planner tap hint. ===================================================================== */ .bottom-nav { display: none; } .mp-tap-hint { display: none; } @media (max-width: 768px) { .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--primary-color); border-top: 1px solid rgba(255, 255, 255, 0.12); /* Clear the iOS home indicator. */ padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 10px rgba(31, 72, 54, 0.18); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 6px 2px; text-decoration: none; color: rgba(255, 255, 255, 0.72); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.01em; transition: color 0.15s; -webkit-tap-highlight-color: transparent; } .bottom-nav-item i { font-size: 1.05rem; } .bottom-nav-item.active, .bottom-nav-item:active { color: #fff; } /* Sections are reachable from the bar, so the header strip is redundant and its height is better spent on content. */ .secondary-header { display: none !important; } /* Nothing should end up trapped under the fixed bar. */ body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } .mp-tap-hint { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.75rem; padding: 0.5rem 0.65rem; background: rgba(31, 72, 54, 0.06); border-left: 3px solid var(--primary-color); border-radius: 0 6px 6px 0; font-size: 0.72rem; line-height: 1.3; color: var(--text-color); } .mp-tap-hint i { color: var(--primary-color); } } /* ===================================================================== Blank-space cleanup + slimmer mobile header. ===================================================================== */ /* The fixed-header clearance is applied to .main-tab-content, .hero and .profile-container alike, but #recipes wraps a .hero and #profile wraps a .profile-container -- so those two tabs reserved the header's height twice and opened a gap. The outer section already clears the header; the inner element only needs its own breathing room. */ .main-tab-content .hero { padding-top: 1.5rem !important; } .main-tab-content .profile-container { padding-top: 0 !important; } @media (max-width: 768px) { .main-tab-content .hero { padding-top: 1rem !important; } /* Only one tab is on screen at a time, so the global 6rem section padding left ~96px of dead space under every tab and squeezed the sides. */ section { padding-left: 1rem; padding-right: 1rem; padding-bottom: 2rem; } /* Header trimmed to the wordmark and the account button: the section links now live in the bottom bar, so this only has to identify the site. Less chrome, more content. */ .primary-header { padding: 0.3rem 0 !important; } .primary-nav { padding-top: 0.15rem !important; padding-bottom: 0.15rem !important; align-items: center; flex-wrap: nowrap; } .logo a, .logo { font-size: 1.05rem !important; line-height: 1.2 !important; } .mobile-auth-actions button, #mobile-user-menu-btn, #mobile-login-btn { font-size: 1.15rem !important; padding: 0.25rem 0.35rem !important; line-height: 1 !important; } } /* ===================================================================== Mobile header height. Trimming the padding was not enough: .primary-nav carries `min-height: 60px`, set back when the nav stacked its links vertically and needed room for them. The links now live in the bottom bar and the only in-flow child is the wordmark, so that floor is just empty space. Header goes from roughly 70px to roughly 48px. ===================================================================== */ @media (max-width: 768px) { .primary-nav { min-height: 42px !important; padding: 0.1rem 0.9rem !important; } .primary-header { padding: 0.15rem 0 !important; } /* The account button is absolutely positioned and was pinned 0.8rem from a much taller header's top edge. Centre it instead so it stays put at whatever height the header settles on. Absolute elements do not add to the parent's height, so a 40px target costs nothing. */ .mobile-auth-actions { top: 50% !important; transform: translateY(-50%) !important; right: 0.75rem !important; } /* No `display` here on purpose: updateLoginButton() toggles these two via inline style, and an !important display would outrank it and leave the Login button showing next to the account button. */ .mobile-auth-actions button, #mobile-user-menu-btn, #mobile-login-btn { width: 40px !important; height: 40px !important; padding: 0 !important; align-items: center; justify-content: center; } } /* Mobile header "add a recipe" button: same footprint as the account button beside it, filled so it reads as the primary action. */ @media (max-width: 768px) { #mobile-add-recipe-btn { width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: var(--primary-color); color: #fff; text-decoration: none; font-size: 1rem; line-height: 1; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } #mobile-add-recipe-btn:active { opacity: 0.85; } /* Two 40px buttons need less air between them than the old single one. */ .mobile-auth-actions { gap: 8px !important; } } /* ===================================================================== Header: wordmark hard left, the two round buttons matched in size. ===================================================================== */ @media (max-width: 768px) { /* .primary-nav is a *column* flex on mobile, so the align-items:center added with the height trim was centring the wordmark horizontally. Lay it out as a row and start it at the left edge. */ .primary-nav { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; padding-left: 0.5rem !important; } /* .logo is itself a flex row with `width: 100%; justify-content: center` (set back when the wordmark was meant to be centred), so text-align could never move it — the is a flex item, not text flow. Shrink the box to its contents and start it at the left. */ .logo { width: auto !important; justify-content: flex-start !important; margin-left: 0 !important; padding-left: 0 !important; text-align: left !important; } /* The account control is a glyph (fa-user-circle draws its own ring) while the upload control is a plus on a filled background. Matching the boxes alone would still leave two different-looking circles, so size the glyph up until its ring matches the filled circle: both now read as the same 34px button. */ /* fa-user-circle renders at 1em wide, so the glyph's ring diameter is its font-size. Setting it to exactly the upload button's 34px makes the two circles identical; px not rem, so a changed root size cannot drift them apart again. */ .mobile-auth-actions #mobile-user-menu-btn { width: 34px !important; height: 34px !important; padding: 0 !important; font-size: 34px !important; line-height: 1 !important; overflow: visible !important; } .mobile-auth-actions #mobile-user-menu-btn i { font-size: inherit !important; line-height: 1 !important; } #mobile-add-recipe-btn { width: 34px !important; height: 34px !important; font-size: 0.95rem !important; } } /* Desktop "Add Recipe" pill in the primary nav. Matches .hero-signup-btn, the site's existing call-to-action treatment, at a size that sits comfortably in a header row rather than a hero. */ .add-recipe-btn { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--primary-color); color: var(--white) !important; border: 1px solid var(--primary-color); border-radius: 999px; padding: 0.45rem 1.1rem; font-family: var(--body-font); font-weight: 600; font-size: 0.9rem; line-height: 1; min-height: 38px; text-decoration: none; white-space: nowrap; transition: background 0.2s, transform 0.05s; } .add-recipe-btn:hover { background: #16352a; color: var(--white) !important; } .add-recipe-btn:active { transform: scale(0.98); } /* .nav-links a is coloured by a site-wide !important rule; the pill needs its own contrast against the filled background. */ .nav-links .add-recipe-btn, .nav-links li a.add-recipe-btn { color: var(--white) !important; } #desktop-add-recipe-item { display: flex; align-items: center; margin-right: 0.75rem; } /* Phones use the round + beside the account icon instead; the whole primary-links list is hidden there anyway, but be explicit. */ @media (max-width: 768px) { #desktop-add-recipe-item { display: none !important; } } /* ===================================================================== Recipe detail, styled to the mockup: photo up top, title, a row of icon actions, a servings stepper, then tabbed content. ===================================================================== */ /* ---- Action toolbar ------------------------------------------------- The five buttons already exist with the right icons, but their labels are sentences ("Add to Favorites") and recipe-detail.js rewrites that text when state changes. So the short label comes from CSS instead of markup: zero the button's font-size to drop the text node, restore it on the icon, and supply the caption with ::after. Survives every innerHTML rewrite. */ .recipe-actions-section { gap: 0 !important; border-bottom: 1px solid rgba(31, 72, 54, 0.12); padding-bottom: 0.85rem; flex-wrap: nowrap; } .recipe-actions-section .action-btn { background: none !important; border: none !important; box-shadow: none !important; color: var(--primary-color) !important; flex: 1 1 0; min-width: 0; padding: 0.35rem 0.15rem !important; border-radius: 10px !important; font-size: 0 !important; flex-direction: column; gap: 0.3rem !important; line-height: 1.1; } .recipe-actions-section .action-btn i { font-size: 1.25rem; line-height: 1; } .recipe-actions-section .action-btn::after { font-family: var(--body-font); font-size: 0.66rem; font-weight: 600; white-space: nowrap; } #favorite-btn::after { content: "Favorite"; } #weekly-menu-btn::after { content: "Menu"; } #attempted-btn::after { content: "Log Attempt"; } #share-btn::after { content: "Share"; } #fork-recipe-btn::after { content: "Remix"; } /* The weekly-menu button was the one filled control in the row; flatten it so the five read as one toolbar. */ #weekly-menu-btn { background: none !important; color: var(--primary-color) !important; } .recipe-actions-section .action-btn:active { background: rgba(31, 72, 54, 0.07) !important; } /* ---- Servings stepper ----------------------------------------------- */ .rd-servings { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; background: var(--cream-bg, #f6f3e9); border: 1px solid rgba(31, 72, 54, 0.14); border-radius: 12px; padding: 0.5rem 0.65rem; margin-bottom: 0.85rem; } .rd-serv-btn { background: var(--white); border: 1px solid rgba(31, 72, 54, 0.22); color: var(--primary-color); border-radius: 9px; min-width: 44px; min-height: 38px; font-family: var(--body-font); font-weight: 700; font-size: 0.95rem; cursor: pointer; } .rd-serv-btn:active { transform: scale(0.97); } .rd-serv-count { flex: 1 1 auto; text-align: center; font-family: var(--body-font); font-weight: 600; font-size: 1rem; color: var(--primary-color); } /* ---- Tabs ------------------------------------------------------------ */ .rd-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid rgba(31, 72, 54, 0.14); margin-bottom: 1rem; } .rd-tab { flex: 1 1 0; background: none; border: none; border-bottom: 2px solid transparent; padding: 0.6rem 0.35rem; font-family: var(--body-font); font-size: 0.88rem; font-weight: 600; color: var(--muted-text); cursor: pointer; margin-bottom: -1px; } .rd-tab.active { color: var(--primary-color); border-bottom-color: var(--primary-color); } .rd-panel { display: none; } .rd-panel.active { display: block; } /* ---- Tick-off ingredients -------------------------------------------- */ #ingredients-list li { display: flex !important; align-items: flex-start; gap: 0.6rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* The stock bullet is a check-circle glyph; the mockup wants a checkbox. */ #ingredients-list li > i { display: none !important; } #ingredients-list li::before { content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid rgba(31, 72, 54, 0.35); border-radius: 4px; background: var(--white); transition: background 0.12s, border-color 0.12s; } #ingredients-list li.rd-checked::before { background: var(--primary-color); border-color: var(--primary-color); /* Font Awesome check, drawn inside the filled box. */ content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; color: #fff; display: flex; align-items: center; justify-content: center; } #ingredients-list li.rd-checked { color: var(--muted-text); text-decoration: line-through; text-decoration-color: rgba(31, 72, 54, 0.45); } /* ===================================================================== Wide screens: same components, but all three panels at once — a recipe is easier to cook from with ingredients and steps both visible. ===================================================================== */ @media (min-width: 769px) { .rd-tabs { display: none; } .rd-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem; align-items: start; } .rd-panel { display: block !important; } /* Description reads across the full width above the two columns. */ #rd-panel-desc { grid-column: 1 / -1; } .recipe-actions-section { max-width: 640px; margin-left: auto !important; margin-right: auto !important; } .recipe-actions-section .action-btn i { font-size: 1.4rem; } .recipe-actions-section .action-btn::after { font-size: 0.75rem; } .rd-servings { max-width: 420px; margin-left: auto; margin-right: auto; } } /* ===================================================================== Phone layout: full-bleed photo, tighter type. ===================================================================== */ @media (max-width: 768px) { /* The photo is the page's opening image in the mockup: edge to edge, cropped, no card chrome. Inline styles on the element force these. */ #recipe-image { max-height: 240px !important; object-fit: cover !important; border-radius: 0 !important; box-shadow: none !important; } .recipe-visuals { margin-left: -1rem !important; margin-right: -1rem !important; max-width: calc(100% + 2rem) !important; margin-top: 0 !important; } #recipe-title { font-size: 1.75rem !important; line-height: 1.15 !important; margin-bottom: 0.5rem !important; text-align: left; } .recipe-header { padding-bottom: 0 !important; } .recipe-detail-section { padding-left: 1rem; padding-right: 1rem; } /* Original-servings note and the metric toggle are secondary; keep them available but out of the stepper's way. */ .servings-control > label { display: none !important; } .servings-control > div { flex-wrap: wrap; gap: 0.5rem !important; font-size: 0.8rem; } #servings-input, #scale-servings-btn { display: none !important; } #recipe-description { text-align: left !important; font-size: 0.95rem !important; margin-top: 0 !important; } } /* The page's own