/* styles.css - Main stylesheet for Phone Store This file contains all the styles for the Phone Store web app. Each class, ID, and selector is commented with its purpose and where it is used in index.html and script.js. */ /* CSS Variables for theming (used throughout the file for easy color changes) */ :root { --bg-primary: #f5f5dc; /* Main background color (used for body, cards, etc.) */ --bg-secondary: #ffffff; /* Secondary background (used for hover, cards, etc.) */ --bg-card: #ffffff; /* Card background */ --text-primary: #333333; /* Main text color */ --text-secondary: #666666; /* Secondary text color */ --text-muted: #888888; /* Muted text (less important info) */ --border-color: #e0e0e0; /* Border color for cards, inputs, etc. */ --shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Default card shadow */ --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15); /* Card shadow on hover */ --accent-color: #007bff; /* Accent color for buttons, highlights */ --price-color: #2e7d32; /* Price text color */ --rating-color: #e6b800; /* Star rating color */ --header-bg: #333333; /* Header background */ --header-text: #ffffff; /* Header text color */ --footer-bg: #333333; /* Footer background */ --footer-text: #ffffff; /* Footer text color */ --modal-bg: rgba(0, 0, 0, 0.5); /* Modal overlay background */ --modal-content-bg: #ffffff; /* Modal content background */ --error-bg: #fff3cd; /* Error message background */ --error-text: #856404; /* Error message text */ --error-border: #ffeaa7; /* Error message border */ --review-bg: #f8f9fa; /* (Not used in current HTML, for future reviews) */ --review-border: #dee2e6; /* (Not used in current HTML) */ --review-success: #d4edda; /* (Not used in current HTML) */ --review-success-text: #155724; /* (Not used in current HTML) */ } /* Dark mode variables (applied when [data-theme="dark"] is set on by script.js) */ [data-theme="dark"] { --bg-primary: #1a1a1a; --bg-secondary: #2d2d2d; --bg-card: #333333; --text-primary: #ffffff; --text-secondary: #cccccc; --text-muted: #999999; --border-color: #444444; --shadow: 0 0 10px rgba(0, 0, 0, 0.3); --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4); --accent-color: #4dabf7; --price-color: #66bb6a; --rating-color: #ffd54f; --header-bg: #1a1a1a; --header-text: #ffffff; --footer-bg: #1a1a1a; --footer-text: #ffffff; --modal-bg: rgba(0, 0, 0, 0.8); --modal-content-bg: #2d2d2d; --error-bg: #3d2c1a; --error-text: #ffd54f; --error-border: #665c3a; --review-bg: #2a2a2a; --review-border: #444444; --review-success: #1e4d2b; --review-success-text: #66bb6a; } /* Body styles (applies to in index.html) */ body { font-family: Arial, Helvetica, sans-serif; /* Sets the font for the whole page */ background: var(--bg-primary); /* Uses the main background color */ margin: auto; /* Centers the body horizontally */ padding: 0%; /* Removes default padding */ text-align: center; /* Centers text by default */ color: var(--text-primary); /* Sets main text color */ transition: background-color 0.3s ease, color 0.3s ease; /* Smooth color transitions for dark mode */ } /* Header styles (applies to

in index.html) */ header { background: var(--header-bg); /* Uses header background color */ color: var(--header-text); /* Header text color */ padding: 1em; /* Adds space inside header */ transition: background-color 0.3s ease; } /* Header content container (class="header-content" in index.html) */ .header-content { display: flex; /* Uses flexbox for layout */ justify-content: space-between; /* Space between title and controls */ align-items: center; /* Vertically center items */ max-width: 1200px; /* Maximum width for large screens */ margin: 0 auto; /* Center horizontally */ } /* Header controls (class="header-controls" in index.html) */ .header-controls { display: flex; /* Flexbox for layout */ align-items: center; /* Vertically center controls */ gap: 1rem; /* Space between controls */ } /* Dark mode toggle button (id="darkModeToggle", class="dark-mode-btn" in index.html) */ .dark-mode-btn { background: var(--bg-card); /* Button background */ border: 2px solid var(--border-color); /* Button border */ border-radius: 50px; /* Rounded button */ padding: 0.5rem 1rem; /* Button padding */ cursor: pointer; /* Pointer cursor on hover */ transition: all 0.3s ease; /* Smooth transitions */ display: flex; /* Flexbox for icon layout */ align-items: center; /* Center icons vertically */ gap: 0.5rem; /* Space between icons */ color: var(--text-primary); /* Button text/icon color */ } .dark-mode-btn:hover { background: var(--accent-color); /* Highlight on hover */ color: white; /* White text on hover */ transform: scale(1.05); /* Slightly enlarge on hover */ } /* Sun and moon icons (inside dark mode button) */ .dark-mode-btn .sun { display: none; /* Hide sun icon by default (shown in dark mode) */ } [data-theme="dark"] .dark-mode-btn .moon { display: none; /* Hide moon icon in dark mode */ } [data-theme="dark"] .dark-mode-btn .sun { display: inline; /* Show sun icon in dark mode */ } /* Input and button styles (applies to search bar and buttons in header) */ input, button { padding: 0.5em; /* Padding inside inputs/buttons */ margin: 0.5em; /* Margin around inputs/buttons */ border-radius: 5px; /* Rounded corners */ border: 1px solid var(--border-color); /* Border color */ background: var(--bg-secondary); /* Background color */ color: var(--text-primary); /* Text color */ transition: all 0.3s ease; /* Smooth transitions */ } input:focus { outline: none; /* Remove default outline */ border-color: var(--accent-color); /* Highlight border on focus */ box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.2); /* Subtle glow on focus */ } /* Main results area (id="results" in index.html, filled by script.js) */ #results { display: flex; /* Flexbox for card layout */ flex-wrap: wrap; /* Allow cards to wrap to next line */ justify-content: center; /* Center cards horizontally */ padding: 1em; /* Padding around cards */ background: var(--bg-primary); /* Background color */ transition: background-color 0.3s ease; } /* Phone card styles (class="phone-card" in script.js, rendered inside #results) */ .phone-card { background: var(--bg-card); /* Card background */ margin: 1em; /* Space around each card */ padding: 1em; /* Space inside each card */ border-radius: 50px; /* Rounded card corners */ box-shadow: var(--shadow); /* Card shadow */ width: 300px; /* Card width */ text-align: left; /* Left-align text inside card */ display: flex; /* Flexbox for card content */ flex-direction: column; /* Stack content vertically */ align-items: center; /* Center content horizontally */ transition: all 0.3s ease; /* Smooth transitions */ min-height: 480px; /* Minimum card height */ cursor: pointer; /* Pointer cursor on hover */ border: 1px solid var(--border-color); /* Card border */ } .phone-card:hover { box-shadow: var(--shadow-hover); /* Stronger shadow on hover */ transform: translateY(-5px); /* Move card up on hover */ background: var(--bg-secondary); /* Change background on hover */ border-color: var(--accent-color); /* Highlight border on hover */ } /* Phone image container (class="phone-image" in script.js, inside .phone-card) */ .phone-image { width: 100%; /* Full width of card */ height: 220px; /* Fixed height for images */ display: flex; /* Center image */ align-items: center; justify-content: center; margin-bottom: 1em; /* Space below image */ overflow: hidden; /* Hide overflow */ border-radius: 50px; /* Rounded corners */ background: var(--bg-primary); /* Background color */ transition: background-color 0.3s ease; } .phone-image img { max-width: 100%; /* Image fits container */ max-height: 100%; object-fit: contain; /* Keep aspect ratio */ display: block; } /* Phone info section (class="phone-info" in script.js, inside .phone-card) */ .phone-info { width: 100%; display: flex; flex-direction: column; align-items: flex-start; } .phone-name { font-size: 1.2em; font-weight: bold; margin-bottom: 0.2em; color: var(--text-primary); } .phone-brand { font-size: 1em; color: var(--text-muted); margin-bottom: 0.5em; } .phone-rating { font-size: 1em; color: var(--rating-color); margin-bottom: 0.5em; } .phone-price { font-size: 1.1em; font-weight: bold; color: var(--price-color); margin-bottom: 0.5em; } .phone-specs { font-size: 0.95em; margin-bottom: 0.5em; display: flex; flex-wrap: wrap; gap: 0.5em; color: var(--text-secondary); } /* Details Modal Styles (id="details" in index.html, filled by script.js) */ #details { display: none; /* Hidden by default, shown by script.js */ position: fixed; /* Overlay on top of page */ top: 0; left: 0; width: 100%; height: 100%; background: var(--modal-bg); /* Semi-transparent background */ z-index: 1000; /* On top of other elements */ backdrop-filter: blur(5px); /* Blur background */ } .details-modal { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .details-content { background: var(--modal-content-bg); border-radius: 20px; max-width: 800px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-hover); border: 1px solid var(--border-color); transition: all 0.3s ease; } .close-btn { position: absolute; top: 15px; right: 20px; background: var(--accent-color); color: white; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 20px; cursor: pointer; z-index: 1001; transition: all 0.3s ease; } .close-btn:hover { background: var(--text-primary); transform: scale(1.1); } .details-header { display: flex; padding: 30px; border-bottom: 1px solid var(--border-color); gap: 30px; align-items: center; } .details-header img { width: 200px; height: 250px; object-fit: contain; border-radius: 15px; background: var(--bg-primary); } .details-title h2 { color: var(--text-primary); margin-bottom: 10px; font-size: 2em; } .brand-year { color: var(--text-muted); margin-bottom: 10px; font-size: 1.1em; } .rating { color: var(--rating-color); font-size: 1.2em; font-weight: bold; } .details-body { padding: 30px; } .price-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 20px; background: var(--bg-primary); border-radius: 15px; } .price { font-size: 2em; font-weight: bold; color: var(--price-color); } .specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .spec-item { display: flex; justify-content: space-between; padding: 15px; background: var(--bg-primary); border-radius: 10px; border: 1px solid var(--border-color); } .spec-label { color: var(--text-secondary); font-weight: bold; } .spec-value { color: var(--text-primary); } .description h3 { color: var(--text-primary); margin-bottom: 15px; font-size: 1.3em; } .description p { color: var(--text-secondary); line-height: 1.6; font-size: 1.1em; } /* Error and No Results Messages (used in script.js for error handling and empty search) */ .error-message, .no-results { background: var(--error-bg); color: var(--error-text); border: 1px solid var(--error-border); border-radius: 10px; padding: 30px; margin: 20px; text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; } .error-message h3, .no-results { margin-bottom: 15px; font-size: 1.5em; } .error-message code { background: var(--bg-card); padding: 5px 10px; border-radius: 5px; font-family: monospace; color: var(--text-primary); } /* Footer styles (applies to