/* =================================================================== MOBILE.CSS - Bake App - Contains all responsive overrides for smaller screens (tablets and phones). - This file should be loaded last in your HTML to ensure its rules have the highest priority on mobile devices. =================================================================== */ /* =================================== 1. GENERAL MOBILE & TABLET STYLES (Up to 991px) =================================== */ @media (max-width: 991px) { /* --- General Layout & Spacing --- */ .recipe-container { margin: 1rem 0.5rem; padding: 1.5rem 1rem; } .recipe-title { font-size: 2rem; } /* --- Visual Recipe Chooser --- */ .visual-recipe-card { flex-basis: 90%; /* Makes cards a bit larger on tablets */ } /* --- Ingredient Manager Layout --- */ /* Stacks the two-column layout into a single column */ .ingredient-item .row { flex-direction: column; gap: 0.5rem; } .ingredient-item .col-7, .ingredient-item .col-5 { width: 100%; max-width: 100%; flex: 0 0 100%; } } /* =================================== 2. PHONE-SPECIFIC STYLES (Up to 767px) =================================== */ @media (max-width: 767px) { .recipe-title { font-size: 1.8rem; } .visual-recipe-card { flex-basis: 95%; /* Cards take up almost the full screen width */ } } /* =================================== 3. RESPONSIVE TABLE LAYOUTS =================================== */ /* Portrait Mobile Table Layout (Phones) */ @media (max-width: 767px) and (orientation: portrait) { /* Hide less critical nutritional columns to save space */ .table th:nth-child(4), .table td:nth-child(4), /* Fat */ .table th:nth-child(5), .table td:nth-child(5), /* Carbohydrates */ .table th:nth-child(6), .table td:nth-child(6), /* Fibers */ .table th:nth-child(7), .table td:nth-child(7), /* Protein */ .table th:nth-child(8), .table td:nth-child(8) { /* Water */ display: none !important; } /* Adjust the width of the remaining visible columns */ .table th:nth-child(1), .table td:nth-child(1) { width: 45%; } /* Ingredients */ .table th:nth-child(2), .table td:nth-child(2) { width: 30%; } /* Weight */ .table th:nth-child(3), .table td:nth-child(3) { width: 25%; } /* Calories */ } /* Landscape Mobile Table Layout (Phones & Small Tablets) */ @media (max-width: 991px) and (orientation: landscape) { .table th, .table td { padding: 0.4rem 0.2rem; font-size: 0.75rem; word-break: break-word; /* Allow long words to break */ } .table th { font-size: 0.65rem; line-height: 1.2; } /* Remove icons on small landscape screens to save precious space */ .table th .bi { display: none; } } /* =================================== 4. VERY SMALL SCREENS (Up to 576px) =================================== */ @media (max-width: 576px) { .recipe-title { font-size: 1.6rem; text-align: center; } .preparation-content { padding: 1rem; font-size: 0.9rem; max-height: 300px; } .offcanvas-body p { font-size: 0.9rem; } .table th, .table td { font-size: 0.8rem; } .form-control-weight { font-size: 1rem; min-height: 32px; } } /* Styles for the mobile ingredient card list */ .ingredient-card-mobile { background-color: #fdf6e3; /* Light background from your theme */ border: 1px solid #eee8d5; border-left-width: 5px; /* Emphasized left border for status */ border-radius: 8px; padding: 0.15rem; margin-bottom: 0.5rem; transition: background-color 0.3s ease; } /* Use existing availability classes to color the card's left border */ .ingredient-card-mobile.ingredient-available { border-left-color: #2aa198; /* --bs-success */ } .ingredient-card-mobile.ingredient-insufficient { border-left-color: #cb4b16; /* --bs-warning */ } .ingredient-card-mobile.ingredient-unavailable { border-left-color: #d33682; /* --bs-danger */ background-color: rgba(211, 54, 130, 0.05); /* Subtle danger tint */ } .ingredient-card-mobile .ingredient-name { font-weight: 600; display: block; margin-bottom: 0.25rem; } .ingredient-card-mobile .ingredient-status-mobile .bi { vertical-align: middle; } .ingredient-card-mobile .badge { padding: 0.2em 0.4em; font-size: 0.75rem; } .ingredient-separator-row-mobile { background-color: rgba(7, 54, 66, 0.05); /* Subtle background from your theme */ border-radius: 6px; color: #073642; /* Dark text from your theme */ } /* --- FINAL MOBILE LAYOUT & PREPARATION BOX FIX --- */ /* This media query targets tablets and phones (screens <= 991px) */ @media (max-width: 991px) { /* * 1. Override desktop transparency for a solid, readable mobile background. */ .recipe-container { background-color: #fdf6e3; /* Solid light background from your theme */ backdrop-filter: none; /* IMPORTANT: Disable the blur effect */ color: #586e75; /* Dark, readable text for the light background */ padding: 1.5rem 1rem; /* Restore reasonable padding for mobile */ box-shadow: none; /* Remove the heavy desktop shadow */ } /* * 2. Make the preparation instructions box larger and more readable. */ .prep-container { border-color: #93a1a1; background-color: rgba(0, 43, 54, 0.05); } /* * 3. Target the INNER content box to fix its size and text color. */ .prep-container .preparation-content { color: #586e75; max-height: none; /* Allow the box to grow to fit all text */ height: auto; font-size: 1rem; line-height: 1.6; padding: 0; border: none; background-color: transparent; } } /* Mobile-specific preparation instructions styling */ @media (max-width: 767px) { .prep-instructions-container { padding: 0.5rem; margin: 0.75rem 0; } .prep-instructions-header { font-size: 0.85rem; margin-bottom: 0.25rem; } .prep-instructions-container .preparation-content { font-size: 0.9rem; padding: 0.15rem 0; } } /* Enhanced mobile touch targets */ @media (max-width: 767px) { /* Larger touch targets for dropdown items */ .navbar-nav .dropdown-item { min-height: 48px !important; display: flex !important; align-items: center !important; padding: 0.875rem 1rem !important; } /* Enhanced close button touch target */ .offcanvas .btn-close { min-width: 48px !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; } } /* Landscape-specific offcanvas sizing */ @media screen and (max-width: 991px) and (orientation: landscape) { #recipeInfoOffcanvas { --bs-offcanvas-width: 70vw !important; max-width: 600px !important; } #recipeInfoOffcanvas .offcanvas-header { min-height: 180px !important; padding: 1rem !important; } #recipeInfoOffcanvas .recipe-info-image { width: 120px !important; height: 120px !important; } #recipeInfoOffcanvas .offcanvas-body { max-height: calc(100vh - 180px) !important; padding: 1rem !important; } } /* Portrait-specific offcanvas sizing */ @media screen and (max-width: 767px) and (orientation: portrait) { #recipeInfoOffcanvas { --bs-offcanvas-width: 100vw !important; } #recipeInfoOffcanvas .offcanvas-header { min-height: 220px !important; } #recipeInfoOffcanvas .recipe-info-image { width: 140px !important; height: 140px !important; } } .row.text-center strong { color: #1f2937 !important; /* Dark gray, high contrast */ }