/* * THEME: DAYBREAK (COZY LIGHT MODE) - FINAL LAYOUT v4 * Generated for the Rum Review Log * - Corrected layout rule to target #site-header-container. * * NOTE: Ensure the viewport meta tag is in your HTML for mobile to work. * */ /* --- FONT IMPORT --- */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Inter:wght@400;700&display=swap'); /* --- ROOT VARIABLES & GLOBAL STYLES --- */ :root { --bg-color: #FAF8F5; /* Warm Off-White */ --card-bg-color: #FFFFFF; --text-color: #3D3A3E; /* Soft Charcoal Text */ --heading-color: #1E1E1E; --border-color: #EAEAEA; /* "Syntax Highlighting" Accent Colors for Light Mode */ --accent-pink: #D6336C; --accent-orange: #E8590C; --accent-cyan: #1098AD; --border-radius: 8px; --main-font: 'Inter', sans-serif; --mono-font: 'IBM Plex Mono', monospace; } *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--main-font); line-height: 1.6; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } /* --- TYPOGRAPHY & LINKS --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--main-font); font-weight: 700; color: var(--heading-color); margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.2; } a { color: var(--accent-pink); text-decoration: none; transition: color 0.2s ease-out; } a:hover { text-decoration: underline; } /* --- LAYOUT & MAIN CONTAINERS --- */ /* FINAL FIX: Applying layout rules to the new container */ #site-header-container, main, footer { max-width: 960px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } #site-header { margin-top: 1rem; margin-bottom: 1rem; padding: 1rem; background-color: var(--card-bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); } #site-header nav { padding: 0; gap: 1.5rem; } #site-header nav .site-logo { margin-left: 0; } #site-header h1 { margin: 0; margin-left: 0; margin-right: 0; font-size: 1.6rem; } #site-header h1 a:hover { text-decoration: none; color: var(--accent-cyan); } #site-header nav a { color: var(--text-color); margin-left: 1rem; } #site-header h1 a { color: var(--heading-color); margin-left: 0; } footer { text-align: center; margin-top: 4rem; padding-top: 2rem; padding-bottom: 2rem; border-top: 1px solid var(--border-color); font-family: var(--mono-font); font-size: 0.9rem; color: #aaa; } /* --- POSTS LIST PAGE --- */ .posts-list { display: flex; flex-direction: column; gap: 1.5rem; padding: 0; margin: 0; } article.post-preview { background-color: var(--card-bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; display: grid; grid-template-columns: 2fr 3fr; gap: 1.5rem; transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out; padding-bottom: 0; } article.post-preview:hover { border-color: var(--accent-cyan); box-shadow: 0 4px 12px rgba(0,0,0,0.05); } .post-preview .featured-image-preview { width: 100%; height: 100%; object-fit: cover; display: block; } .post-preview .post-content { padding: 1.5rem; padding-left: 0; flex-grow: 1; } .post-preview h3 a { color: var(--heading-color); } .post-preview .meta { font-family: var(--mono-font); font-size: 0.85rem; color: var(--accent-orange); margin-bottom: 1rem; } /* --- SINGLE POST PAGE --- */ article > header { margin-bottom: 2rem; text-align: left; } article > header .meta { font-family: var(--mono-font); color: var(--accent-orange); } article > header .featured-image { display: block; margin-top: 2rem; max-width: 100%; height: auto; width: auto; border-radius: var(--border-radius); } .rating-badge { border: 1px solid var(--border-color) !important; background: var(--card-bg-color) !important; color: var(--text-color) !important; box-shadow: none !important; padding: 0.6rem 1rem !important; border-radius: var(--border-radius) !important; } .rating-badge .rb-score { color: var(--accent-cyan); } .review-layout.card { padding: 0; } table.specs, table.ratings { width: 100%; border-collapse: collapse; margin-bottom: 2rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); } table.specs th, table.specs td, table.ratings th, table.ratings td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } table tr:last-child th, table tr:last-child td { border-bottom: none; } /* ============================================= */ /* --- RESPONSIVE ADJUSTMENTS --- */ /* ============================================= */ @media (max-width: 768px) { article.post-preview { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; } .post-preview .featured-image-preview { height: 300px; } .post-preview .post-content { padding: 1.5rem; } } @media (max-width: 600px) { main { margin-top: 1rem; } }