/* ============================================================ JACKGRIFFIN.NET — dashboard.css Shared design system + holiday/seasonal themes Themes are applied via JavaScript in dashboard.js ============================================================ */ /* ------------------------------------------------------------ Google Fonts ------------------------------------------------------------ */ @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap'); /* ------------------------------------------------------------ CSS Variables — Default Theme (Light Blue / Steel Blue) ------------------------------------------------------------ */ :root { --bg-body: #d6e8f5; --bg-section: #4682b4; --bg-card: #ffffff; --bg-card-alt: #f0f7fd; --bg-nav: #2e6096; --text-primary: #1a2e3d; --text-secondary: #4a6578; --text-muted: #7a96a8; --text-on-dark: #ffffff; --text-on-section: #ffffff; --accent-primary: #2e6096; --accent-hover: #1e4a73; --accent-light: #b8d4ea; --border-color: #c2d8ea; --border-radius: 10px; --border-radius-sm: 6px; --border-radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.10); --up-color: #2d7a3a; --up-bg: #e6f4e8; --down-color: #b02020; --down-bg: #fdeaea; --font-heading: 'Lora', Georgia, serif; --font-body: 'DM Sans', sans-serif; --nav-height: 56px; --card-padding: 1.25rem 1.5rem; --section-gap: 1.5rem; } /* ------------------------------------------------------------ Holiday / Seasonal Themes Applied by adding a class to via dashboard.js ------------------------------------------------------------ */ /* New Year's Eve / Day */ html.theme-newyear { --bg-body: #0a0a0a; --bg-section: #1a1400; --bg-card: #1f1c00; --bg-card-alt: #2a2600; --bg-nav: #332d00; --text-primary: #ffd700; --text-secondary: #c9a800; --text-muted: #8a7200; --text-on-section: #ffd700; --accent-primary: #ffcc00; --accent-hover: #e6b800; --accent-light: #4a3d00; --border-color: #3d3500; } /* Valentine's Day */ html.theme-valentine { --bg-body: #ffe0ec; --bg-section: #cc0033; --bg-card: #fff5f8; --bg-card-alt: #ffe8f0; --bg-nav: #aa0028; --text-primary: #4a0015; --text-secondary: #880025; --text-muted: #cc6680; --text-on-section: #ffffff; --accent-primary: #cc0033; --accent-hover: #aa0028; --accent-light: #ffb3c6; --border-color: #f0a0b8; } /* St. Patrick's Day */ html.theme-stpatricks { --bg-body: #c8f5d8; --bg-section: #006b3c; --bg-card: #f0fff5; --bg-card-alt: #d8f5e5; --bg-nav: #005530; --text-primary: #002a15; --text-secondary: #005530; --text-muted: #4a9966; --text-on-section: #ffffff; --accent-primary: #006b3c; --accent-hover: #005530; --accent-light: #a0e8c0; --border-color: #90d8a8; } /* Easter */ html.theme-easter { --bg-body: #f5f0ff; --bg-section: #c89be0; --bg-card: #fffef0; --bg-card-alt: #f0f8ff; --bg-nav: #a87cc8; --text-primary: #2a1a40; --text-secondary: #6a4a8a; --text-muted: #a080c0; --text-on-section: #ffffff; --accent-primary: #a87cc8; --accent-hover: #8a60aa; --accent-light: #e8d8f8; --border-color: #d8c0f0; } /* Memorial Day */ html.theme-memorialday { --bg-body: #3a5a8c; --bg-section: #8c2030; --bg-card: #f0f4ff; --bg-card-alt: #e8eeff; --bg-nav: #2a4a7c; --text-primary: #0a1a30; --text-secondary: #2a4a7c; --text-muted: #6a80a0; --text-on-section: #ffffff; --accent-primary: #8c2030; --accent-hover: #6c1020; --accent-light: #c8d8f0; --border-color: #a0b8d8; } /* Independence Day */ html.theme-july4 { --bg-body: #b22234; --bg-section: #3c3b6e; --bg-card: #ffffff; --bg-card-alt: #f5f5ff; --bg-nav: #2c2b5e; --text-primary: #0a0a2a; --text-secondary: #3c3b6e; --text-muted: #7070a0; --text-on-section: #ffffff; --accent-primary: #b22234; --accent-hover: #8c1a28; --accent-light: #e8e8ff; --border-color: #c0c0e0; } /* Labor Day */ html.theme-laborday { --bg-body: #3c3b6e; --bg-section: #b22234; --bg-card: #f5f5ff; --bg-card-alt: #eeeeff; --bg-nav: #2c2b5e; --text-primary: #0a0a2a; --text-secondary: #3c3b6e; --text-muted: #7070a0; --text-on-section: #ffffff; --accent-primary: #3c3b6e; --accent-hover: #2c2b5e; --accent-light: #d0d0f0; --border-color: #b0b0d8; } /* Halloween */ html.theme-halloween { --bg-body: #1a0a00; --bg-section: #cc5500; --bg-card: #1f1000; --bg-card-alt: #2a1800; --bg-nav: #0d0500; --text-primary: #ff8c00; --text-secondary: #cc6600; --text-muted: #885500; --text-on-section: #ffffff; --accent-primary: #ff6600; --accent-hover: #cc5500; --accent-light: #3a2000; --border-color: #4a2800; } /* Thanksgiving */ html.theme-thanksgiving { --bg-body: #f5e6c8; --bg-section: #8b4513; --bg-card: #fffaf0; --bg-card-alt: #fdf5e0; --bg-nav: #6b3510; --text-primary: #2a1000; --text-secondary: #7a3a10; --text-muted: #b07040; --text-on-section: #fff8e8; --accent-primary: #cc6600; --accent-hover: #aa5500; --accent-light: #f0d8a0; --border-color: #dfc090; } /* Christmas (Dec 1–26) */ html.theme-christmas { --bg-body: #d4edda; --bg-section: #8b0000; --bg-card: #ffffff; --bg-card-alt: #f0fff4; --bg-nav: #6b0000; --text-primary: #1a0000; --text-secondary: #5a0000; --text-muted: #8a4040; --text-on-section: #ffffff; --accent-primary: #8b0000; --accent-hover: #6b0000; --accent-light: #a8d8b0; --border-color: #90c898; } /* Seasonal themes commented out — default theme used instead Uncomment any block below to re-enable that season. html.theme-spring { --bg-body: #f0fce8; --bg-section: #5a9e30; --bg-card: #ffffff; --bg-card-alt: #f5fff0; --bg-nav: #487e25; --text-primary: #1a2e10; --text-secondary: #3a6020; --text-muted: #70a050; --text-on-section: #ffffff; --accent-primary: #5a9e30; --accent-hover: #487e25; --accent-light: #c8f0a8; --border-color: #b0e090; } html.theme-summer { --bg-body: #e8f4fd; --bg-section: #0077cc; --bg-card: #ffffff; --bg-card-alt: #f0f8ff; --bg-nav: #005fa8; --text-primary: #001a30; --text-secondary: #005fa8; --text-muted: #5090c0; --text-on-section: #ffffff; --accent-primary: #0077cc; --accent-hover: #005fa8; --accent-light: #b8dff8; --border-color: #a0ccee; } html.theme-fall { --bg-body: #fdf0e0; --bg-section: #cc6600; --bg-card: #fffaf5; --bg-card-alt: #fff5e8; --bg-nav: #aa5500; --text-primary: #2a1000; --text-secondary: #884400; --text-muted: #c08040; --text-on-section: #ffffff; --accent-primary: #cc6600; --accent-hover: #aa5500; --accent-light: #f8d8a0; --border-color: #e8c080; } html.theme-winter { --bg-body: #eaf2f8; --bg-section: #5585a2; --bg-card: #ffffff; --bg-card-alt: #f0f6fa; --bg-nav: #3d6b85; --text-primary: #0d1f2a; --text-secondary: #3d6b85; --text-muted: #7aa0b8; --text-on-section: #ffffff; --accent-primary: #5585a2; --accent-hover: #3d6b85; --accent-light: #c8dfe8; --border-color: #b0d0e0; } */ /* ------------------------------------------------------------ Reset & Base ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); background-color: var(--bg-body); color: var(--text-primary); min-height: 100vh; transition: background-color 0.4s ease, color 0.4s ease; } a { color: var(--accent-primary); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } /* ------------------------------------------------------------ Typography ------------------------------------------------------------ */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; color: var(--text-primary); line-height: 1.3; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; } h4 { font-size: 1rem; font-weight: 500; } p { line-height: 1.7; color: var(--text-secondary); } .label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } /* ------------------------------------------------------------ Layout ------------------------------------------------------------ */ .page-wrapper { max-width: 1100px; margin: 0 auto; padding: 0 1rem 3rem; } .section-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 400; color: var(--text-on-section); margin-bottom: 1rem; display: flex; align-items: center; gap: 8px; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; } .grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1rem; } @media (max-width: 800px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-6 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 500px) { .grid-2 { grid-template-columns: 1fr; } .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-6 { grid-template-columns: repeat(2, 1fr); } } /* ------------------------------------------------------------ Navigation ------------------------------------------------------------ */ .dash-nav { background-color: var(--bg-nav); height: var(--nav-height); display: flex; align-items: center; padding: 0 1.5rem; gap: 1.5rem; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); transition: background-color 0.4s ease; } .dash-nav .site-title { font-family: var(--font-heading); font-size: 1.1rem; color: var(--text-on-dark); font-weight: 500; white-space: nowrap; margin-right: auto; } .dash-nav a { color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 400; white-space: nowrap; transition: color 0.2s; } .dash-nav a:hover { color: #ffffff; text-decoration: none; } .dash-nav a.active { color: #ffffff; font-weight: 500; } .nav-settings { margin-left: auto; color: rgba(255,255,255,0.7) !important; font-size: 18px !important; } /* ------------------------------------------------------------ Page Header ------------------------------------------------------------ */ .page-header { background-color: var(--bg-section); padding: 2rem 1.5rem 1.5rem; margin-bottom: var(--section-gap); transition: background-color 0.4s ease; } .page-header h1 { font-family: var(--font-heading); color: var(--text-on-section); font-size: 1.8rem; font-weight: 400; } .page-header .greeting { font-family: var(--font-heading); font-size: 1.6rem; color: var(--text-on-section); font-weight: 400; } .page-header .subline { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 4px; } /* ------------------------------------------------------------ Cards ------------------------------------------------------------ */ .card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: var(--card-padding); transition: background-color 0.4s ease, border-color 0.4s ease; } .card-alt { background-color: var(--bg-card-alt); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .card-title { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .card-value { font-family: var(--font-heading); font-size: 2rem; font-weight: 400; color: var(--text-primary); line-height: 1.1; } .card-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .card-link { font-size: 12px; color: var(--accent-primary); display: flex; align-items: center; gap: 4px; } /* ------------------------------------------------------------ Section Dividers ------------------------------------------------------------ */ .dash-section { background-color: var(--bg-section); border-radius: var(--border-radius); padding: 1.25rem 1.5rem; margin-bottom: var(--section-gap); transition: background-color 0.4s ease; } /* ------------------------------------------------------------ Badges ------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; } .badge-up { background: var(--up-bg); color: var(--up-color); } .badge-down { background: var(--down-bg); color: var(--down-color); } .badge-info { background: #e6f0fb; color: #1a5fa8; } .badge-alert { background: #fff3cd; color: #856404; } /* ------------------------------------------------------------ Alert Banner ------------------------------------------------------------ */ .alert-banner { background: #fff3cd; border: 1px solid #ffc107; border-radius: var(--border-radius-sm); padding: 0.75rem 1rem; font-size: 13px; color: #664d03; display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; } .alert-banner.danger { background: #fdeaea; border-color: #e74c3c; color: #7a1515; } /* ------------------------------------------------------------ Rows (scores, stocks, etc.) ------------------------------------------------------------ */ .data-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; } .data-row:last-child { border-bottom: none; padding-bottom: 0; } .data-row:first-child { padding-top: 0; } .data-row-label { color: var(--text-primary); font-weight: 500; } .data-row-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; } .data-row-value { font-weight: 500; color: var(--text-primary); text-align: right; } /* ------------------------------------------------------------ Countdown / Highlight Card ------------------------------------------------------------ */ .countdown-card { background: var(--accent-light); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; } .countdown-number { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 400; color: var(--accent-primary); line-height: 1; } .countdown-label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; } /* ------------------------------------------------------------ Time Zone Clocks ------------------------------------------------------------ */ .tz-clock { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 0.85rem 1rem; text-align: center; } .tz-time { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 400; color: var(--text-primary); line-height: 1.2; } .tz-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 3px; } .tz-date { font-size: 11px; color: var(--text-muted); margin-top: 1px; } /* ------------------------------------------------------------ Bookmarks ------------------------------------------------------------ */ .bookmarks-row { display: flex; flex-wrap: wrap; gap: 8px; } .bookmark-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; font-size: 13px; color: var(--text-primary); cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s; font-family: var(--font-body); } .bookmark-btn:hover { background: var(--accent-light); border-color: var(--accent-primary); text-decoration: none; color: var(--accent-primary); } /* ------------------------------------------------------------ Settings Page ------------------------------------------------------------ */ .settings-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; } .settings-section h3 { font-size: 1rem; font-weight: 500; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-color); color: var(--text-primary); display: flex; align-items: center; gap: 8px; } .settings-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; } .settings-row:last-child { border-bottom: none; } .settings-label { flex: 1; color: var(--text-primary); } .settings-sub { font-size: 11px; color: var(--text-muted); } /* ------------------------------------------------------------ Form Elements ------------------------------------------------------------ */ input[type="text"], input[type="url"], input[type="date"], input[type="number"], select { width: 100%; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--bg-card); color: var(--text-primary); font-family: var(--font-body); font-size: 13px; outline: none; transition: border-color 0.2s; } input:focus, select:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(46,96,150,0.12); } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--border-radius-sm); font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--font-body); border: none; transition: background 0.15s, transform 0.1s; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent-primary); color: #ffffff; } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-card-alt); } .btn-danger { background: var(--down-bg); color: var(--down-color); border: 1px solid #f5c0c0; } .btn-danger:hover { background: #fbd5d5; } /* ------------------------------------------------------------ Loading / Empty States ------------------------------------------------------------ */ .loading-state { font-size: 13px; color: var(--text-muted); font-style: italic; padding: 0.5rem 0; } .empty-state { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 13px; } /* ------------------------------------------------------------ Refresh Button ------------------------------------------------------------ */ .refresh-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; padding: 4px; line-height: 1; transition: color 0.2s, transform 0.3s; } .refresh-btn:hover { color: var(--accent-primary); } .refresh-btn.spinning { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------ Utilities ------------------------------------------------------------ */ .text-up { color: var(--up-color); } .text-down { color: var(--down-color); } .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .text-right { text-align: right; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .flex { display: flex; } .flex-center { display: flex; align-items: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-1 { gap: 6px; } .gap-2 { gap: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------ Last updated footer ------------------------------------------------------------ */ .last-updated { font-size: 11px; color: var(--text-muted); text-align: center; padding: 1.5rem 0 0.5rem; }