/* * THEME: PARCHMENT (LITERARY MINIMALISM) v4 * Generated for the Rum Review Log * - Redesigned rating badge to be a modern, abstract "flat design" wax seal. * * NOTE: Ensure the viewport meta tag is in your HTML for mobile to work. * */ /* --- FONT IMPORT --- */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Lora:wght@400;700&display=swap'); /* --- ROOT VARIABLES & GLOBAL STYLES --- */ :root { --bg-color: #FDFBF7; --text-color: #333333; --heading-color: #1a1a1a; --accent-color: #800000; /* Deep Maroon */ --meta-text-color: #777; --border-color: #e0e0e0; --body-font: 'Lora', serif; --ui-font: 'Lato', sans-serif; } *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg-color); color: var(--text-color); font-family: var(--body-font); line-height: 1.7; font-size: 18px; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } /* --- TYPOGRAPHY & LINKS --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--ui-font); font-weight: 700; color: var(--heading-color); margin-top: 2em; margin-bottom: 0.8em; line-height: 1.3; } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } 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: 720px; /* Narrower content width for readability */ 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 { padding: 0; gap: 1.5rem; font-family: var(--ui-font); } #site-header nav .site-logo { margin-left: 0; } #site-header h1 { margin: 0; margin-right: 0; font-size: 1.6rem; } #site-header h1 a { text-decoration: none; color: var(--heading-color); } #site-header h1 a:hover { text-decoration: none; } #site-header nav a { color: var(--text-color); } footer { text-align: center; margin-top: 4rem; padding: 2rem 0; 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; /* Overrides grid for single column layout */ 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; } article.post-preview:last-of-type { border-bottom: none; } .post-preview .featured-image-container { display: block; margin-bottom: 1.5rem; } .post-preview .featured-image-preview { width: 100%; height: auto; } .post-preview .post-content { padding: 0; } .post-preview h3 { margin: 0 0 0.5rem 0; } .post-preview h3 a { color: var(--heading-color); text-decoration: none; } .post-preview .meta { font-family: var(--ui-font); font-size: 0.9rem; color: var(--meta-text-color); margin-bottom: 1rem; } .post-preview .summary { font-size: 1.1rem; } /* --- SINGLE POST PAGE --- */ article > header { margin-bottom: 2rem; text-align: left; border-bottom: 1px solid var(--border-color); } article > header h1 { margin-bottom: 0.5rem; } article > header .meta { font-family: var(--ui-font); font-size: 0.9rem; color: var(--meta-text-color); padding-bottom: 1.5rem; } article > header .featured-image { display: block; margin: 2rem auto; max-width: 100%; height: auto; } /* v4 UPDATE: Abstract "Flat" Wax Seal Styling */ .rating-badge { background: var(--accent-color) !important; color: var(--bg-color) !important; border-radius: 50% !important; /* Perfect circle */ width: 90px !important; height: 90px !important; min-width: 90px !important; padding: 0 !important; border: none !important; /* A single, modern drop shadow to make it pop */ box-shadow: 0 4px 15px rgba(0,0,0,0.25) !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; font-family: var(--ui-font); /* Using clean sans-serif for numbers */ } .rating-badge .rb-score { color: var(--bg-color) !important; font-size: 2rem !important; font-weight: 900 !important; /* Bolder font for impact */ text-shadow: none !important; /* Flat text */ line-height: 1; } .rating-badge .rb-outof { color: var(--bg-color) !important; opacity: 0.8; font-size: 0.8em; font-weight: 400; text-shadow: none !important; /* Flat text */ } .review-layout.card { padding: 0; } table.specs, table.ratings { width: 100%; border-collapse: collapse; margin: 2rem 0; font-family: var(--ui-font); } 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) { body { font-size: 16px; } #site-header, main { padding-left: 1rem; padding-right: 1rem; } }