/** * File: /public/assets/css/style.css * Purpose: Main stylesheet for the BookLog application. * * This file contains our theme definitions using CSS Variables, * reusable utility classes, and specific component styles adapted from the * Address Review project, all tailored for the Skeleton.css framework. * * Commenting Standard: Version 2.2 */ /* ========================================================================== 1. Theme & Color Definitions (CSS Variables) ========================================================================== */ /* This is the default theme, "Earthy Cream & Sage", as per our plan. */ :root { --bg-color: #FAF9F6; /* Cream / Off-White */ --text-color: #36454F; /* Charcoal Gray */ --primary-color: #8F9779; /* Muted Sage Green */ --accent-color: #D2B48C; /* Warm Tan */ --border-color: #E1E1E1; /* A light grey for borders */ --card-bg-color: #ffffff; /* ADD THIS LINE */ --card-text-color: #333333; /* ADD THIS LINE - a darker grey */ } /* This theme is activated by adding class="theme-goodreads" to the tag. */ body.theme-goodreads { --bg-color: #F4F1EA; /* Goodreads Beige */ --text-color: #333333; /* Dark Text */ --primary-color: #382110; /* Goodreads Brown */ --accent-color: #00635D; /* Goodreads Teal */ --border-color: #DCD9CF; } /* This theme is activated by adding class="theme-dark" to the tag. */ body.theme-dark { --bg-color: #212121; /* Dark Gray */ --text-color: #E0E0E0; /* Light Gray Text */ --primary-color: #8F9779; /* Muted Sage Green */ --accent-color: #D2B48C; /* Warm Tan */ --border-color: #424242; /* Darker Border */ --card-bg-color: #2c2c2c; /* ADD THIS LINE */ --card-text-color: var(--text-color); } /* ========================================================================== 2. Global & Foundational Styles ========================================================================== */ /* --- Sticky Footer Logic --- */ /* This ensures the footer stays at the bottom of the page, even on short pages. */ html, body { height: 100%; } body { display: flex; flex-direction: column; background-color: var(--bg-color); color: var(--text-color); } /* The .container class from Skeleton is told to grow to fill any available space. */ .container { flex-grow: 1; } /* --- General Typography & Links --- */ a { color: var(--primary-color); } a:hover { color: var(--accent-color); } hr { border-top: 1px solid var(--border-color); } /* ========================================================================== 3. Reusable Utility Classes ========================================================================== */ /* A simple utility for spacing out major sections on a page. */ .content-section { margin-top: 4rem; margin-bottom: 4rem; } /* Style for destructive action buttons (e.g., Delete, Suspend). */ .button.button-danger, button.button-danger { color: #D33C3C; background-color: transparent; border-color: #D33C3C; } .button.button-danger:hover, button.button-danger:hover { color: #FFF; background-color: #D33C3C; border-color: #D33C3C; } /* A utility to make a