/* --------------------------------------------------------- * Your App Name — Theme Override Support * Location: /public_html/assets/css/app.css * --------------------------------------------------------- * * Update: * - Adds CSS variable overrides when JS sets: * or * * This preserves: * - system default via prefers-color-scheme * - localStorage override via JS * * NOTE: complete replacement file (includes prior content + additions) */ /* ========================================================= Theme tokens ========================================================= */ :root{ --bg: #f7f8fb; --surface: #ffffff; --surface-2: #f1f4f9; --text: #0b1220; --muted: #516074; --border: rgba(15, 23, 42, 0.12); --shadow: 0 10px 28px rgba(15, 23, 42, 0.08); --link: #1d4ed8; --chip-bg: rgba(29, 78, 216, 0.10); --chip-text: #1d4ed8; --btn: #0b1220; --btn-text: #ffffff; --btn-secondary: #e9edf6; --btn-secondary-text: #0b1220; --danger: #b42318; --ok: #067647; --radius: 16px; --radius-sm: 12px; --container: 980px; --pad: 18px; --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; } /* Default dark scheme when OS prefers dark */ @media (prefers-color-scheme: dark){ :root{ --bg: #0b0f14; --surface: #121a24; --surface-2: #0f1722; --text: #e7eef7; --muted: #b9c7d8; --border: rgba(255,255,255,0.10); --shadow: 0 14px 34px rgba(0,0,0,0.35); --link: #9cc2ff; --chip-bg: rgba(156, 194, 255, 0.12); --chip-text: #9cc2ff; --btn: #e7eef7; --btn-text: #0b0f14; --btn-secondary: rgba(255,255,255,0.10); --btn-secondary-text: #e7eef7; --danger: #ff6b6b; --ok: #4ade80; } } /* --------------------------------------------------------- * JS override layer * If app.js sets or "dark", * we force the variables accordingly (independent of OS). * --------------------------------------------------------- */ /* Force LIGHT */ html[data-theme="light"]{ --bg: #f7f8fb; --surface: #ffffff; --surface-2: #f1f4f9; --text: #0b1220; --muted: #516074; --border: rgba(15, 23, 42, 0.12); --shadow: 0 10px 28px rgba(15, 23, 42, 0.08); --link: #1d4ed8; --chip-bg: rgba(29, 78, 216, 0.10); --chip-text: #1d4ed8; --btn: #0b1220; --btn-text: #ffffff; --btn-secondary: #e9edf6; --btn-secondary-text: #0b1220; --danger: #b42318; --ok: #067647; } /* Force DARK */ html[data-theme="dark"]{ --bg: #0b0f14; --surface: #121a24; --surface-2: #0f1722; --text: #e7eef7; --muted: #b9c7d8; --border: rgba(255,255,255,0.10); --shadow: 0 14px 34px rgba(0,0,0,0.35); --link: #9cc2ff; --chip-bg: rgba(156, 194, 255, 0.12); --chip-text: #9cc2ff; --btn: #e7eef7; --btn-text: #0b0f14; --btn-secondary: rgba(255,255,255,0.10); --btn-secondary-text: #e7eef7; --danger: #ff6b6b; --ok: #4ade80; } /* ========================================================= Base / reset ========================================================= */ *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; } img{ max-width:100%; height:auto; } a{ color: var(--link); text-decoration: none; } a:hover{ text-decoration: underline; } code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.95em; } /* ========================================================= Layout: Header / Nav ========================================================= */ .site-header{ position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .header-inner{ max-width: var(--container); margin: 0 auto; padding: 12px var(--pad); display:flex; align-items:center; justify-content:space-between; gap: 12px; } .brand-link{ font-weight: 650; letter-spacing: -0.01em; color: var(--text); } .brand-link:hover{ text-decoration:none; } /* IMPORTANT FIX: - Previously: .primary-nav { display:none; } (so "menu" / nav disappears on mobile) - Now: nav exists on mobile too, and becomes horizontally scrollable so links are reachable. */ .primary-nav{ display:flex; gap: 12px; align-items:center; flex-wrap: wrap; } /* Desktop styling of nav links */ .primary-nav a{ color: var(--muted); font-weight: 550; padding: 6px 10px; border-radius: 999px; white-space: nowrap; } .primary-nav a:hover{ background: var(--surface-2); text-decoration:none; color: var(--text); } .primary-nav a.active{ background: var(--surface-2); color: var(--text); } .header-actions{ display:flex; align-items:center; gap: 10px; } .quiet-link{ color: var(--muted); } .quiet-link:hover{ color: var(--text); } .theme-toggle{ border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 10px; cursor: pointer; } /* Mobile: keep header usable and ensure ALL nav links are accessible */ @media (max-width: 860px){ .header-inner{ flex-wrap: wrap; align-items: center; } /* Put nav on its own row and allow horizontal swipe */ .primary-nav{ width: 100%; order: 3; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space: nowrap; padding: 6px 2px; gap: 10px; scrollbar-width: none; /* Firefox */ } .primary-nav::-webkit-scrollbar{ display:none; } /* Keep actions aligned to the right on the first row */ .header-actions{ margin-left: auto; order: 2; } } /* ========================================================= Main container ========================================================= */ .site-main{ max-width: var(--container); margin: 0 auto; padding: 18px var(--pad) 40px var(--pad); } /* Page Head */ .page-head{ margin: 10px 0 16px 0; } .page-head h1{ margin: 0; font-size: 20px; letter-spacing: -0.02em; } .subhead{ margin: 6px 0 0 0; color: var(--muted); font-size: 14px; } /* Grid/cards */ .grid{ display:grid; grid-template-columns: 1fr; gap: 14px; } .card{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); } .card h2{ margin: 0 0 10px 0; font-size: 15px; letter-spacing: -0.01em; } .card-title-row{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 8px; } .chip{ display:inline-flex; align-items:center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); border: 1px solid color-mix(in srgb, var(--chip-text) 18%, transparent); } /* Lists (Attention Center rows) */ .list{ display:flex; flex-direction:column; gap: 10px; } .row{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface) 85%, var(--surface-2)); } .row-main{ min-width: 0; } .row-title{ font-weight: 650; letter-spacing: -0.01em; font-size: 14px; margin: 0 0 4px 0; word-wrap: break-word; } .row-sub{ display:flex; flex-wrap: wrap; gap: 6px; align-items:center; color: var(--muted); font-size: 13px; } .dot{ color: color-mix(in srgb, var(--muted) 70%, transparent); } .row-actions{ flex: 0 0 auto; display:flex; gap: 8px; align-items:center; flex-wrap: wrap; justify-content:flex-end; } .row-actions form{ margin:0; } .row-actions .button, .row-actions button{ padding: 8px 12px; font-size: 13px; white-space: nowrap; } /* On very small screens, stack action buttons for clarity */ @media (max-width: 420px){ .row{ flex-direction: column; align-items: stretch; } .row-actions{ justify-content:flex-start; } } /* Empty states */ .empty{ padding: 10px 0 2px 0; } .empty-title{ margin: 0 0 6px 0; font-weight: 650; letter-spacing: -0.01em; } .empty-text{ margin: 0; color: var(--muted); font-size: 14px; } .empty-actions{ display:flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } /* Buttons */ .button, button{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; border-radius: 999px; border: 1px solid transparent; padding: 10px 14px; font-weight: 650; letter-spacing: -0.01em; cursor: pointer; } .button{ background: var(--btn); color: var(--btn-text); } .button:hover{ text-decoration:none; filter: brightness(1.02); } .button.secondary{ background: var(--btn-secondary); color: var(--btn-secondary-text); border-color: var(--border); } /* Auth card */ .auth-card{ max-width: 520px; margin: 30px auto 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .auth-card h1{ margin: 0 0 14px 0; font-size: 18px; letter-spacing: -0.02em; } .auth-note{ margin: 14px 0 0 0; font-size: 13px; color: var(--muted); } /* Forms */ .form-field{ display:flex; flex-direction:column; gap: 6px; margin-bottom: 12px; } label{ font-size: 13px; color: var(--muted); font-weight: 600; } input[type="email"], input[type="password"], input[type="text"], input[type="url"], textarea, select{ width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); outline: none; } input:focus, textarea:focus, select:focus{ border-color: color-mix(in srgb, var(--link) 45%, var(--border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--link) 15%, transparent); } .form-actions{ margin-top: 6px; display:flex; justify-content:flex-start; } .form-errors{ border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0 0 12px 0; } .form-errors p{ margin: 0; font-size: 13px; } /* Callout */ .callout{ margin-top: 16px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 75%, var(--surface-2)); } .callout h3{ margin: 0 0 6px 0; font-size: 14px; } .callout p{ margin: 0 0 8px 0; color: var(--muted); font-size: 14px; } .callout p:last-child{ margin-bottom: 0; } /* Footer */ .site-footer{ border-top: 1px solid var(--border); margin-top: 20px; } .footer-inner{ max-width: var(--container); margin: 0 auto; padding: 14px var(--pad); display:flex; flex-direction:column; gap: 10px; } .footer-nav{ display:flex; gap: 12px; flex-wrap: wrap; } .footer-nav a{ color: var(--muted); font-weight: 600; font-size: 13px; } .footer-nav a:hover{ color: var(--text); text-decoration:none; } .footer-meta{ color: var(--muted); font-size: 12px; } /* Desktop improvements */ @media (min-width: 860px){ .grid{ grid-template-columns: 1fr 1fr; } .page-head h1{ font-size: 22px; } }