/** * Twatter Stylesheet * ================== * * This file contains all the styles for the Twatter application. * It uses CSS custom properties (variables) for consistent theming * and is organized into logical sections. * * CSS Custom Properties (Variables): * Defined at the :root level, these let us reuse values throughout * the stylesheet. If we want to change the primary color, we only * need to change it in one place. * * Sections: * 1. Variables & Reset * 2. Typography * 3. Layout * 4. Components (buttons, forms, cards, etc.) * 5. Page-specific styles */ /* ============================================= 1. VARIABLES & RESET ============================================= */ /** * CSS Custom Properties (Variables) * * :root targets the root element (html), making these * variables available throughout the document. * * Naming convention: --category-property-variant */ :root { /* Colors - A modern, clean palette */ --color-primary: #1d9bf0; /* Twitter-like blue */ --color-primary-hover: #1a8cd8; /* Darker blue for hover states */ --color-secondary: #536471; /* Muted gray for secondary text */ /* Background colors */ --color-bg: #ffffff; /* Main background */ --color-bg-secondary: #f7f9fa; /* Secondary/alternate background */ --color-bg-tertiary: #eff3f4; /* Tertiary background (cards, etc.) */ /* Text colors */ --color-text: #0f1419; /* Primary text (almost black) */ --color-text-secondary: #536471; /* Secondary/muted text */ --color-text-light: #ffffff; /* Light text (on dark backgrounds) */ /* Border colors */ --color-border: #eff3f4; /* Light border */ --color-border-dark: #cfd9de; /* Darker border */ /* Status colors */ --color-success: #00ba7c; /* Success/positive */ --color-error: #f4212e; /* Error/negative */ --color-warning: #ffad1f; /* Warning */ /* Spacing scale (using rem for accessibility) */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-size-sm: 0.875rem; /* 14px */ --font-size-md: 1rem; /* 16px */ --font-size-lg: 1.25rem; /* 20px */ --font-size-xl: 1.5rem; /* 24px */ --font-size-2xl: 2rem; /* 32px */ /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full: 9999px; /* Fully rounded (circles, pills) */ /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; } /** * Dark Mode Theme System * ====================== * * PURPOSE: * Provides a complete dark mode implementation with three modes: * 1. System (default) - Automatically follows the user's OS preference * 2. Dark (manual) - User explicitly chose dark mode * 3. Light (manual) - User explicitly chose light mode (overrides dark OS) * * KEY CONCEPTS FOR BEGINNERS: * * CSS Custom Properties (Variables): * Variables that start with -- can be reused throughout CSS. * We define colors once, then reference them everywhere. * Changing the variable value updates ALL places that use it. * * @media (prefers-color-scheme: dark): * A media query that detects the user's OS dark mode setting. * macOS: System Preferences → Appearance → Dark * Windows: Settings → Personalization → Colors → Dark * iOS/Android: Settings → Display → Dark Mode * * data-theme attribute: * A custom HTML attribute we set on to override OS preference. * JavaScript sets this when user clicks the theme toggle button. * CSS selectors like [data-theme="dark"] target this attribute. * * :root selector: * Targets the root element of the document (). * Variables defined here are available throughout the stylesheet. * * :not() pseudo-class: * Negation selector - matches elements that DON'T match the inner selector. * :root:not([data-theme="light"]) = WITHOUT data-theme="light" * * HOW THE THREE MODES WORK: * * Mode 1: System (default - no data-theme attribute) * - If OS is light: Uses default :root variables (light colors) * - If OS is dark: @media query applies dark colors automatically * * Mode 2: Dark (data-theme="dark" on ) * - :root[data-theme="dark"] selector applies dark colors * - Overrides everything, ignores OS preference * * Mode 3: Light (data-theme="light" on ) * - :root[data-theme="light"] selector applies light colors * - Overrides OS dark preference for users who want light on dark OS * * COLOR PALETTE: * Dark colors are inspired by Twitter's "Dim" theme for consistency. * Uses dark blue-gray tones that are easier on the eyes than pure black. */ /** * System Dark Mode * * @media (prefers-color-scheme: dark) - activates when OS is in dark mode * :root:not([data-theme="light"]) - but NOT if user manually chose light * * This CSS only applies when: * 1. User's OS is set to dark mode, AND * 2. User has NOT clicked the theme toggle to select "light" mode */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /** * Background Colors * Use dark blue-gray tones, not pure black (#000) * Dark gray is easier on the eyes and looks more premium */ --color-bg: #15202b; /* Main page background - dark navy blue */ --color-bg-secondary: #192734; /* Cards, inputs - slightly lighter */ --color-bg-tertiary: #22303c; /* Hover states, nested elements */ /** * Text Colors * White text on dark backgrounds for readability * Secondary text is muted gray, not bright white */ --color-text: #e7e9ea; /* Primary text - soft off-white, easier on eyes */ --color-text-secondary: #8b98a5; /* Muted text - gray for less emphasis */ --color-text-light: #ffffff; /* Text on dark buttons stays white */ /** * Border Colors * Subtle borders that are visible but not harsh on dark backgrounds */ --color-border: #38444d; /* Standard borders - visible on dark */ --color-border-dark: #5c6e7e; /* Emphasized borders - slightly lighter */ /** * Shadow Colors * Darker/more opaque shadows for visibility on dark backgrounds * rgba(0,0,0,0.3) = black at 30% opacity */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow */ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); /* Medium shadow */ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); /* Large shadow */ } } /** * Manual Dark Mode Override * * :root[data-theme="dark"] - activates when * * This CSS applies when user clicks the theme toggle to select "dark". * It overrides the OS preference, so user can use dark mode even on * a system set to light mode. * * Note: Colors are identical to system dark mode above. We repeat them * because this selector has no @media query - it always applies when * the data-theme attribute is set. */ :root[data-theme="dark"] { /* Background colors - same dark navy tones */ --color-bg: #15202b; /* Main background */ --color-bg-secondary: #192734; /* Secondary surfaces */ --color-bg-tertiary: #22303c; /* Tertiary surfaces */ /* Text colors - white and gray for dark backgrounds */ --color-text: #e7e9ea; /* Primary text - soft off-white */ --color-text-secondary: #8b98a5; /* Secondary text */ --color-text-light: #ffffff; /* Light text on buttons */ /* Border colors - visible on dark backgrounds */ --color-border: #38444d; /* Standard borders */ --color-border-dark: #5c6e7e; /* Emphasized borders */ /* Shadows - more opaque for dark backgrounds */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); } /** * Manual Light Mode Override * * :root[data-theme="light"] - activates when * * This CSS applies when user clicks the theme toggle to select "light" * while their OS is in dark mode. Without this, users on dark OS systems * couldn't use light mode on our site. * * Colors are identical to the default :root variables above. We repeat * them here to ensure they override the @media dark mode colors. */ :root[data-theme="light"] { /* Background colors - clean whites and light grays */ --color-bg: #ffffff; /* Main background - pure white */ --color-bg-secondary: #f7f9fa; /* Secondary surfaces - off-white */ --color-bg-tertiary: #eff3f4; /* Tertiary surfaces - light gray */ /* Text colors - dark for light backgrounds */ --color-text: #0f1419; /* Primary text - near-black */ --color-text-secondary: #536471; /* Secondary text - gray */ --color-text-light: #ffffff; /* Light text on dark buttons */ /* Border colors - subtle on light backgrounds */ --color-border: #eff3f4; /* Standard borders - barely visible */ --color-border-dark: #cfd9de; /* Emphasized borders - visible */ /* Shadows - subtle for light mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* Very subtle */ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); /* Medium */ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Large */ } /** * CSS Reset * * Normalizes default browser styles so everything looks * consistent across different browsers. */ /* Box-sizing: Makes width/height include padding and border */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margins and padding */ * { margin: 0; padding: 0; } /* Smooth scrolling for the whole page */ html { scroll-behavior: smooth; /* Prevent horizontal scrolling on mobile devices */ /* Content that overflows horizontally (like long URLs or wide images) */ /* can cause unwanted side-to-side scrolling; this clips it instead */ overflow-x: hidden; } /* Base body styles */ body { font-family: var(--font-family); font-size: var(--font-size-md); line-height: 1.5; color: var(--color-text); background-color: var(--color-bg); min-height: 100vh; /* Flexbox to push footer to bottom */ display: flex; flex-direction: column; } /* ============================================= 2. TYPOGRAPHY ============================================= */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--color-text); } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } p { margin-bottom: var(--space-md); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-hover); text-decoration: underline; } code { font-family: "SF Mono", Monaco, "Courier New", monospace; font-size: var(--font-size-sm); background-color: var(--color-bg-tertiary); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); word-break: break-all; } /* ============================================= 3. LAYOUT ============================================= */ /* Main container - constrains content width */ .container { width: 100%; max-width: 600px; margin: 0 auto; padding: var(--space-md); flex: 1; /* Takes up available space (pushes footer down) */ } /* ============================================= 4. COMPONENTS ============================================= */ /* --- Header --- */ .site-header { background-color: var(--color-bg); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; } .header-container { max-width: 600px; margin: 0 auto; padding: var(--space-md); display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--color-text); } .logo-icon { /* Use flexbox to center the SVG vertically within the icon container */ display: flex; align-items: center; /* Ensure the SVG doesn't get squeezed or stretched */ flex-shrink: 0; } .logo-text { font-size: var(--font-size-lg); font-weight: 700; } .nav-link { color: var(--color-text-secondary); font-size: var(--font-size-sm); } /** * Theme Toggle Button * * A button that cycles through theme modes: System → Dark → Light → System * Shows different icons for each state: * - Monitor icon: System preference (follows OS setting) * - Moon icon: Dark mode (manually selected) * - Sun icon: Light mode (manually selected) * * Positioned in the header next to the logo. */ .theme-toggle { /* Remove default button styles */ background: none; border: none; cursor: pointer; /* Size and spacing */ padding: var(--space-sm); border-radius: var(--radius-full); /* Make icons visible */ color: var(--color-text-secondary); /* Smooth hover transition */ transition: background-color var(--transition-fast), color var(--transition-fast); /* Center the icon */ display: flex; align-items: center; justify-content: center; } .theme-toggle:hover { /* Subtle background on hover */ background-color: var(--color-bg-tertiary); color: var(--color-text); } .theme-toggle:focus { /* Visible focus ring for accessibility */ outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Theme icons - only show the active one */ .theme-toggle .theme-icon { /* All icons hidden by default */ display: none; /* Icon size */ width: 20px; height: 20px; } /* Show system icon by default (no data-theme attribute) */ .theme-toggle .icon-system { display: block; } /* Show dark icon when dark mode is active */ :root[data-theme="dark"] .theme-toggle .icon-system, :root[data-theme="light"] .theme-toggle .icon-system { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: block; } /* Show light icon when light mode is active */ :root[data-theme="light"] .theme-toggle .icon-light { display: block; } /* --- Footer --- */ .site-footer { background-color: var(--color-bg-secondary); border-top: 1px solid var(--color-border); padding: var(--space-lg) var(--space-md); text-align: center; } /** * Footer Container * * Uses flexbox column layout so popups can use order: -1 * to appear above the info links when opened. */ .footer-container { /* Flexbox column layout allows reordering with CSS order property */ display: flex; flex-direction: column; align-items: center; } .footer-text { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-xs); } .footer-hint { font-size: var(--font-size-sm); color: var(--color-text-secondary); opacity: 0.7; } /** * Footer Info Links Container * =========================== * * Purpose: * Holds the "Why?" and "Fair warning" links in the footer. * These links trigger popup dialogs with more information. * * Layout: * Uses CSS Flexbox to arrange links horizontally in a centered row. * Flexbox is a CSS layout system for aligning items in rows/columns. * * The links reuse the .info-link class from the home page, * so they inherit the same subtle, underlined styling. */ .footer-info-links { /* Use Flexbox for horizontal layout */ /* display: flex creates a flex container - children become flex items */ display: flex; /* Center items horizontally within the container */ /* justify-content controls alignment along the main axis (horizontal) */ justify-content: center; /* Vertically center items if they have different heights */ /* align-items controls alignment along the cross axis (vertical) */ align-items: center; /* Add consistent spacing between each link */ /* gap adds space between flex items without needing margins */ /* var(--space-sm) references a CSS custom property (variable) */ gap: var(--space-sm); /* Add vertical separation from the tagline above */ margin-top: var(--space-md); } /** * Footer Popup * ============ * * Purpose: * A floating overlay that appears when "Why?" or "Fair warning" is clicked. * Contains detailed information about benefits or platform limitations. * * Behavior: * - Hidden by default (display: none set in HTML) * - Becomes visible when JavaScript sets display: block * - Floats at the bottom of the screen as a fixed overlay * - Doesn't push other content around or change scroll position * - Only one popup can be open at a time * * Design choices: * - Fixed positioning keeps it visible and accessible * - Appears above all other content with high z-index * - Subtle shadow adds depth and separates from page content * - Rounded top corners only (bottom is flush with screen edge) */ .footer-popup { /* Fixed positioning anchors the popup to the viewport (screen) */ /* It stays in place even when the user scrolls */ position: fixed; /* Position at the bottom of the screen */ bottom: 0; /* Center horizontally: left 50% + transform moves it to true center */ left: 50%; transform: translateX(-50%); /* Limit width for readability, but allow it to shrink on mobile */ /* calc() ensures padding on small screens */ width: calc(100% - var(--space-lg) * 2); max-width: 600px; /* High z-index ensures popup appears above all other content */ /* z-index controls stacking order - higher values are on top */ z-index: 1000; /* Solid opaque background - matches footer for consistency */ /* Using the same gray as the footer ensures visual cohesion */ background-color: var(--color-bg-secondary); /* Internal spacing around the content */ padding: var(--space-lg); /* Extra padding at top for the close button in the corner */ padding-top: var(--space-xl); /* Round only top corners - bottom is flush with screen edge */ border-radius: var(--radius-md) var(--radius-md) 0 0; /* Subtle shadow adds depth and separates popup from page content */ /* Box-shadow: x-offset y-offset blur spread color */ box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); /* Border on top and sides for definition */ border: 1px solid var(--color-border); border-bottom: none; /* Left-aligned text is easier to read for longer paragraphs */ text-align: left; /* Smooth slide-up animation when popup appears */ /* popup-slide-up animates from below the screen to final position */ /* 0.25s = 250 milliseconds duration */ /* ease-out = starts fast, slows at end (feels natural) */ animation: popup-slide-up 0.25s ease-out; } /** * Slide Up Animation for Footer Popups * * Animates the popup from below the screen (translateY(100%)) * to its final position (translateY(0) centered with translateX(-50%)). * Combined with opacity for a smooth appearance effect. */ @keyframes popup-slide-up { from { /* Start below the screen and invisible */ /* translateX(-50%) keeps horizontal centering during animation */ transform: translateX(-50%) translateY(100%); opacity: 0; } to { /* End at final position, fully visible */ transform: translateX(-50%) translateY(0); opacity: 1; } } /** * Footer Warning Popup Variant * ============================ * * Purpose: * Visual variant for warnings about platform limitations. * Uses warm amber/orange colors to indicate caution without alarming. * * Color psychology: * - Amber/orange suggests caution (like a yellow traffic light) * - Less aggressive than red (which indicates errors/danger) * - Warm colors draw attention without causing anxiety * * CSS specificity note: * Using two classes (.footer-popup.footer-warning-popup) makes this rule * more specific than .footer-popup alone, ensuring these styles override * the base styles when both classes are present on an element. */ .footer-popup.footer-warning-popup { /* Warm amber background color */ /* #fff7ed is a very light orange (similar to Tailwind's orange-50) */ background-color: #fff7ed; /* Subtle orange border reinforces the warning theme */ /* Only on top and sides - bottom is flush with screen edge */ border-color: #fed7aa; } /** * Warning Popup Text Styling * * Makes text inside warning popups use amber colors * to match the container's warning theme. */ .footer-popup.footer-warning-popup p { /* Dark amber/brown text color for readability */ /* #9a3412 is a dark orange (similar to Tailwind's orange-800) */ /* Dark text on light background provides good contrast */ color: #9a3412; /* Slightly smaller text for the warning message */ font-size: var(--font-size-sm); /* Remove default paragraph margins for tighter layout */ margin: 0; } /* --- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-md); font-weight: 600; border-radius: var(--radius-full); border: none; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; } .btn:hover { text-decoration: none; } .btn-primary { background-color: var(--color-primary); color: var(--color-text-light); } .btn-primary:hover { background-color: var(--color-primary-hover); color: var(--color-text-light); } .btn-secondary { background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .btn-secondary:hover { background-color: rgba(29, 155, 240, 0.1); } .btn-block { width: 100%; } .btn-large { padding: var(--space-md) var(--space-xl); font-size: var(--font-size-lg); } /* --- Forms --- */ .form-group { margin-bottom: var(--space-lg); } .form-label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-sm); } .form-input { width: 100%; padding: var(--space-md); font-size: var(--font-size-md); border: 1px solid var(--color-border-dark); border-radius: var(--radius-md); background-color: var(--color-bg); color: var(--color-text); transition: border-color var(--transition-fast); } .form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.2); } .form-input::placeholder { color: var(--color-text-secondary); } .form-input-large { font-size: var(--font-size-lg); padding: var(--space-lg); } .form-hint { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-sm); } /* Radio buttons */ .radio-group { display: flex; gap: var(--space-lg); } .radio-label { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; } .radio-label input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-primary); } .radio-text { font-size: var(--font-size-md); } /* --- Alerts --- */ .alert { padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-lg); font-size: var(--font-size-sm); } .alert-error { background-color: #fef2f2; color: var(--color-error); border: 1px solid #fecaca; } .alert-success { background-color: #f0fdf4; color: var(--color-success); border: 1px solid #bbf7d0; } /* --- Tweet Card --- */ .tweet-card { background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-lg); transition: background-color var(--transition-fast); } .tweet-card:hover { background-color: var(--color-bg-secondary); } .tweet-highlight { border-color: var(--color-primary); border-width: 2px; box-shadow: 0 0 0 4px rgba(29, 155, 240, 0.1); } /* Tweet header (avatar + author) */ .tweet-header { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); } .tweet-avatar { flex-shrink: 0; } .avatar-img { width: 48px; height: 48px; border-radius: var(--radius-full); object-fit: cover; } .avatar-placeholder { width: 48px; height: 48px; border-radius: var(--radius-full); background-color: var(--color-primary); color: var(--color-text-light); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-lg); font-weight: 600; } .tweet-author { min-width: 0; /* Allows text truncation */ } .author-name { font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: var(--space-xs); } .author-username { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .verified-badge { color: var(--color-primary); font-weight: 700; } /* Reply indicator */ .tweet-reply-indicator { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: var(--space-sm); } /* Tweet text */ .tweet-text { font-size: var(--font-size-lg); line-height: 1.4; margin-bottom: var(--space-md); word-wrap: break-word; } .tweet-link { color: var(--color-primary); } .tweet-mention { color: var(--color-primary); } .tweet-hashtag { color: var(--color-primary); } /* Tweet media */ .tweet-media { margin-bottom: var(--space-md); border-radius: var(--radius-lg); overflow: hidden; } /* Grid layout for multiple images */ .tweet-media.media-count-2, .tweet-media.media-count-3, .tweet-media.media-count-4 { display: grid; gap: 2px; } .tweet-media.media-count-2 { grid-template-columns: 1fr 1fr; } .tweet-media.media-count-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .tweet-media.media-count-3 .media-item:first-child { grid-row: span 2; } .tweet-media.media-count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .media-item { background-color: var(--color-bg-tertiary); } .media-img { width: 100%; height: auto; display: block; object-fit: cover; } .media-video { width: 100%; max-height: 500px; display: block; } /* Quoted tweet */ .quoted-tweet { border: 1px solid var(--color-border-dark); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-md); background-color: var(--color-bg-secondary); } .quoted-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-sm); } .quoted-name { font-weight: 600; font-size: var(--font-size-sm); } .quoted-username { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .quoted-text { font-size: var(--font-size-sm); color: var(--color-text); } /* Tweet footer */ .tweet-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); border-top: 1px solid var(--color-border); padding-top: var(--space-md); } .tweet-time { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .tweet-metrics { display: flex; gap: var(--space-lg); } .metric { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .metric-icon { font-size: var(--font-size-sm); } .metric-value { font-weight: 500; } /* ============================================= 5. PAGE-SPECIFIC STYLES ============================================= */ /* --- Login Page --- */ .login-page { background-color: var(--color-bg-secondary); display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-container { width: 100%; max-width: 400px; padding: var(--space-md); } .login-card { background-color: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-lg); } .login-header { text-align: center; margin-bottom: var(--space-xl); } .login-logo { font-size: 3rem; display: block; margin-bottom: var(--space-md); } .login-title { margin-bottom: var(--space-sm); } .login-subtitle { color: var(--color-text-secondary); font-size: var(--font-size-sm); } /* --- Home Page --- */ .hero { text-align: center; padding: var(--space-2xl) 0; } .hero-title { margin-bottom: var(--space-md); } .hero-subtitle { /* Use --color-text-secondary which updates in dark mode */ /* --color-secondary doesn't change in dark mode, so text would be too dark */ color: var(--color-text-secondary); font-size: var(--font-size-lg); max-width: 500px; margin: 0 auto; } .fetch-section { background-color: var(--color-bg-secondary); border-radius: var(--radius-lg); padding: var(--space-xl); margin-bottom: var(--space-xl); } .instructions { padding: var(--space-lg); } .instructions-title { font-size: var(--font-size-lg); margin-bottom: var(--space-md); } .instructions-list { padding-left: var(--space-xl); margin-bottom: var(--space-md); color: var(--color-text-secondary); } .instructions-list li { margin-bottom: var(--space-sm); } .instructions-note { font-size: var(--font-size-sm); color: var(--color-text-secondary); background-color: var(--color-bg-tertiary); padding: var(--space-md); border-radius: var(--radius-md); } /* Benefits Block: Groups all three benefits under one shared background */ /* This creates visual cohesion and makes it clear these items are related */ .benefits-block { background-color: var(--color-bg-tertiary); padding: var(--space-md); border-radius: var(--radius-md); margin-bottom: var(--space-md); } /* Individual benefit items within the block */ /* No background since the parent provides it - just spacing between items */ .benefit-item { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; padding: 0; } /* Add vertical spacing between benefit items, but not after the last one */ .benefit-item + .benefit-item { margin-top: var(--space-md); } /* --- Info Links and Popups (Home Page) --- * * Gentle trigger links that reveal additional information on click. * Used to hide verbose content (benefits, warnings) behind subtle links * to keep the home page clean and scannable. */ /** * Info Links Container * * Horizontally centered row of subtle text links. * Contains "Why?" and "Fair warning..." triggers. */ .info-links { /* Center the links horizontally */ display: flex; justify-content: center; align-items: center; gap: var(--space-sm); /* Add some vertical spacing */ margin-top: var(--space-md); margin-bottom: var(--space-md); } /** * Info Link Button * * Styled as a subtle, underlined text link. * Uses