/* * THEME: CHRONICLE (MODERN EDITORIAL) * Generated for the Rum Review Log * * NOTE: Ensure the viewport meta tag is in your HTML for mobile to work. * */ /* --- FONT IMPORT --- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Newsreader:opsz,wght@6..72,400;700&display=swap'); /* --- ROOT VARIABLES & GLOBAL STYLES --- */ :root { --bg-color: #FFFFFF; --text-color: #222222; --meta-text-color: #666666; --border-color: #EAEAEA; --accent-color: #4A698A; /* Muted Slate Blue */ --body-font: 'Newsreader', serif; --ui-font: 'Inter', sans-serif; } *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--body-font); font-size: 18px; line-height: 1.7; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } /* --- TYPOGRAPHY & LINKS --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--ui-font); font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.2; } a { color: var(--accent-color); text-decoration: none; transition: color 0.2s ease-out; } a:hover { text-decoration: underline; } /* --- LAYOUT & MAIN CONTAINERS --- */ #site-header, main, footer { max-width: 800px; /* A comfortable width for reading */ margin-left: auto; margin-right: auto; } #site-header { margin-top: 2rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); } #site-header nav { font-family: var(--ui-font); padding: 0; gap: 1.5rem; } #site-header nav .site-logo { margin-left: 0; } #site-header h1 { margin: 0; margin-right: 0; font-size: 1.6rem; } #site-header h1 a { color: var(--text-color); text-decoration: none; } #site-header nav a { color: var(--text-color); } footer { text-align: center; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--border-color); font-family: var(--ui-font); font-size: 0.9rem; color: var(--meta-text-color); } /* --- POSTS LIST PAGE --- */ .posts-list { display: block; /* Single column for an editorial feel */ padding: 0; margin: 0; } article.post-preview { padding: 2.5rem 0; border-bottom: 1px solid var(--border-color); } article.post-preview:first-of-type { padding-top: 1rem; } .post-preview .featured-image-container { margin-bottom: 1.5rem; } .post-preview .featured-image-preview { width: 100%; height: auto; border-radius: 4px; } .post-preview .post-content { padding: 0; } .post-preview h3 { margin: 0 0 0.5rem 0; } .post-preview h3 a { color: var(--text-color); text-decoration: none; } .post-preview .meta { font-family: var(--ui-font); font-size: 0.85rem; color: var(--meta-text-color); margin-bottom: 1rem; } /* --- SINGLE POST PAGE --- */ article > header { margin-bottom: 2rem; text-align: left; } article > header .featured-image { display: block; margin: 2rem 0; max-width: 100%; height: auto; width: auto; border-radius: 4px; } .rating-badge { border: 3px solid var(--border-color) !important; background: var(--bg-color) !important; color: var(--text-color) !important; box-shadow: none !important; padding: 0.6rem 1rem !important; border-radius: 4px !important; font-family: var(--title-font); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; } .rating-badge .rb-score { font-family: var(--ui-font) !important; font-size: 1.5rem !important; font-weight: 800 !important; letter-spacing: 0.02em !important; color: var(--text-color) !important; } .rating-badge .rb-outof { font-size: 1rem; font-weight: 600; margin-left: 0.2rem; opacity: 0.8; } .title-with-badge { display: flex; align-items: flex-start; gap: 1.1rem; margin-bottom: 1rem; } .title-with-badge h1 { margin: 0; flex: 1; } @media (max-width: 640px) { .title-with-badge { flex-direction: row; align-items: center; gap: 0.8rem; } .rating-badge { min-width: 88px; padding: 0.5rem 0.7rem; } .rating-badge .rb-score { font-size: 1.3rem !important; } } .review-layout.card { padding: 0; } table.specs, table.ratings { width: 100%; border-collapse: collapse; margin: 2rem 0; font-family: var(--ui-font); } /* Overall rating styling for review layouts */ table.ratings tr.overall-rating { font-weight: bold; border-top: 2px solid var(--border-color); } .ratings ul li.overall-rating { font-weight: bold; border-top: 1px solid var(--border-color); padding-top: 0.5rem; margin-top: 0.5rem; } table.specs th, table.specs td, table.ratings th, table.ratings td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border-color); } /* ============================================= */ /* --- RESPONSIVE ADJUSTMENTS --- */ /* ============================================= */ @media (max-width: 600px) { #site-header, main { padding-left: 1rem; padding-right: 1rem; } }