/* ========================================================================== PPP - Global Styles Mobile-first, responsive layout with CSS custom properties. No CSS framework — plain CSS. Theming: dark mode is the DEFAULT. Light mode is applied by setting data-theme="light" on . See js/theme.js. ========================================================================== */ /* --- CSS Custom Properties (Design Tokens) --- Strategy: keep structural tokens (spacing, typography, radii) shared, and define color tokens per-theme. Dark is the root default. */ :root { /* Brand colors — shared across themes (used on header, buttons) */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-light: rgba(59, 130, 246, 0.25); /* focus ring */ --color-success: #22c55e; --color-danger: #ef4444; --color-danger-hover: #dc2626; --color-warning: #f59e0b; /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; --font-size-base: 16px; --font-size-sm: 0.875rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; /* Borders */ --border-radius: 0.5rem; --border-radius-sm: 0.25rem; --border-width: 1px; /* Layout */ --header-height: 56px; --max-content-width: 1024px; /* Transitions */ --transition: 150ms ease; /* Theme color tokens — DARK (default) */ color-scheme: dark; --color-bg: #0f172a; /* slate-900 */ --color-surface: #1e293b; /* slate-800 */ --color-surface-hover: #334155; /* slate-700 */ --color-border: #334155; /* slate-700 */ --color-text: #f1f5f9; /* slate-100 */ --color-text-muted: #94a3b8; /* slate-400 */ --color-text-light: #64748b; /* slate-500 */ --color-on-primary: #ffffff; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5); --header-bg: var(--color-primary); } /* --- LIGHT THEME --- */ [data-theme="light"] { color-scheme: light; --color-bg: #f8fafc; /* slate-50 */ --color-surface: #ffffff; --color-surface-hover: #f1f5f9; /* slate-100 */ --color-border: #e2e8f0; /* slate-200 */ --color-text: #0f172a; /* slate-900 */ --color-text-muted: #64748b; /* slate-500 */ --color-text-light: #94a3b8; /* slate-400 */ --color-on-primary: #ffffff; --color-primary-light: #dbeafe; /* blue-100 focus ring */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --header-bg: var(--color-primary); } /* --- Reset / Base --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: var(--font-size-base); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-family); background-color: var(--color-bg); color: var(--color-text); line-height: 1.5; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* --- Header / Navigation --- */ .app-header { display: flex; align-items: center; gap: var(--space-md); height: var(--header-height); padding: 0 var(--space-md); background-color: var(--header-bg); color: var(--color-on-primary); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; } .app-header__brand { display: flex; align-items: baseline; gap: var(--space-sm); flex-shrink: 0; } .app-header__title { font-size: var(--font-size-lg); font-weight: 700; letter-spacing: -0.025em; } .app-header__subtitle { font-size: var(--font-size-sm); opacity: 0.8; display: none; /* hidden on mobile, shown on larger screens */ } .app-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); } /* --- Sync Status Button (click to force sync) --- */ .app-header__status { font-size: var(--font-size-sm); display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); /* Minimum 44px touch target for mobile accessibility (Apple/Material guidelines) */ min-height: 44px; border-radius: var(--border-radius-sm); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); white-space: nowrap; cursor: pointer; font-family: inherit; transition: color var(--transition), border-color var(--transition), background var(--transition); } .app-header__status:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); } .app-header__status:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* While syncing: disable interaction and keep the pulse animation */ .app-header__status:disabled { cursor: default; opacity: 0.85; } .app-header__status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-text-light); flex-shrink: 0; transition: background var(--transition); } /* State: syncing (blue, with pulse) */ .app-header__status--syncing { color: var(--color-primary); border-color: var(--color-primary); } .app-header__status--syncing .app-header__status__dot { background: var(--color-primary); animation: sync-pulse 1s ease-in-out infinite; } /* State: synced / idle (green) */ .app-header__status--idle .app-header__status__dot { background: var(--color-success); } /* State: offline (gray) */ .app-header__status--offline { color: var(--color-text-light); } .app-header__status--offline .app-header__status__dot { background: var(--color-text-light); } /* State: error (red) */ .app-header__status--error { color: var(--color-danger); border-color: var(--color-danger); } .app-header__status--error .app-header__status__dot { background: var(--color-danger); } @keyframes sync-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* --- Theme Toggle Button --- */ .theme-toggle { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--border-radius-sm); color: var(--color-on-primary); cursor: pointer; transition: var(--transition); } .theme-toggle:hover { background-color: rgba(255, 255, 255, 0.15); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle__icon { width: 20px; height: 20px; fill: currentColor; } /* Show the relevant icon based on the active theme */ .theme-toggle__icon--sun { display: none; /* hidden in dark mode; shown in light mode */ } [data-theme="light"] .theme-toggle__icon--moon { display: none; } [data-theme="light"] .theme-toggle__icon--sun { display: block; } /* Desktop tab navigation — hidden on mobile */ .app-nav--tabs { display: none; } .app-nav--tabs .app-nav__tab { background: transparent; border: none; color: var(--color-on-primary); opacity: 0.7; font-size: var(--font-size-base); font-family: inherit; padding: var(--space-sm) var(--space-md); border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition); } .app-nav--tabs .app-nav__tab:hover:not(:disabled) { opacity: 1; background-color: rgba(255, 255, 255, 0.1); } .app-nav--tabs .app-nav__tab--active { opacity: 1; background-color: rgba(255, 255, 255, 0.15); font-weight: 600; } .app-nav--tabs .app-nav__tab:disabled { opacity: 0.4; cursor: not-allowed; } /* Mobile dropdown navigation — shown on mobile */ .app-nav--dropdown { margin-left: auto; display: flex; align-items: center; gap: var(--space-sm); } .app-nav--dropdown .app-nav__label { font-size: var(--font-size-sm); opacity: 0.8; } .app-nav--dropdown .app-nav__select { background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: var(--color-on-primary); font-size: var(--font-size-sm); font-family: inherit; padding: var(--space-xs) var(--space-sm); border-radius: var(--border-radius-sm); cursor: pointer; } .app-nav--dropdown .app-nav__select option { color: var(--color-text); background-color: var(--color-surface); } /* --- Main Content --- */ .app-main { flex: 1; width: 100%; max-width: var(--max-content-width); margin: 0 auto; padding: var(--space-md); } /* --- Module Views --- */ .module-view { display: none; animation: fadeIn var(--transition); } .module-view--active { display: block; } .module-placeholder { text-align: center; padding: var(--space-xl) var(--space-md); color: var(--color-text-muted); } .module-placeholder h2 { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); color: var(--color-text); } /* --- Login View (Phase 2) --- */ .login-view { display: flex; justify-content: center; align-items: center; min-height: 60vh; padding: var(--space-xl) var(--space-md); } .login-card { background-color: var(--color-surface); border-radius: var(--border-radius); box-shadow: var(--shadow-md); padding: var(--space-xl); max-width: 400px; width: 100%; text-align: center; } .login-card__logo { margin-bottom: var(--space-md); } .login-card__logo img { border-radius: var(--border-radius); } .login-card__title { font-size: var(--font-size-xl); margin-bottom: var(--space-sm); } .login-card__text { color: var(--color-text-muted); margin-bottom: var(--space-lg); font-size: var(--font-size-sm); } .login-card__buttons { display: flex; flex-direction: column; gap: var(--space-sm); } /* OAuth provider buttons */ .auth-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-base); font-family: inherit; font-weight: 500; border: var(--border-width) solid var(--color-border); border-radius: var(--border-radius-sm); background-color: var(--color-surface); color: var(--color-text); cursor: pointer; transition: var(--transition); } .auth-btn:hover:not(:disabled) { background-color: var(--color-surface-hover); border-color: var(--color-text-muted); } .auth-btn:active:not(:disabled) { transform: scale(0.98); } .auth-btn:disabled { opacity: 0.5; cursor: not-allowed; } .auth-btn__icon { width: 18px; height: 18px; flex-shrink: 0; } /* GitHub button — dark icon container in both themes for brand consistency */ .auth-btn--github { background-color: #24292e; color: #ffffff; border-color: #24292e; } .auth-btn--github:hover:not(:disabled) { background-color: #2f363d; border-color: #2f363d; } /* --- Auth Form (email/password) --- */ .auth-form { display: flex; flex-direction: column; gap: var(--space-md); text-align: left; } .auth-form__field { display: flex; flex-direction: column; gap: var(--space-xs); } .auth-form__label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); } .auth-form__input { width: 100%; padding: var(--space-sm) var(--space-md); font-size: var(--font-size-base); font-family: inherit; color: var(--color-text); background-color: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--border-radius-sm); transition: var(--transition); } .auth-form__input::placeholder { color: var(--color-text-light); } .auth-form__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .auth-form__submit { width: 100%; padding: var(--space-sm) var(--space-md); margin-top: var(--space-sm); font-size: var(--font-size-base); font-family: inherit; font-weight: 600; color: var(--color-on-primary); background-color: var(--color-primary); border: none; border-radius: var(--border-radius-sm); cursor: pointer; transition: var(--transition); } .auth-form__submit:hover:not(:disabled) { background-color: var(--color-primary-hover); } .auth-form__submit:active:not(:disabled) { transform: scale(0.98); } .auth-form__submit:disabled { opacity: 0.6; cursor: not-allowed; } /* --- Sign in / Sign up toggle --- */ .login-card__toggle { margin-top: var(--space-md); font-size: var(--font-size-sm); color: var(--color-text-muted); } .login-card__toggle-btn { background: none; border: none; padding: 0; margin-left: var(--space-xs); font-family: inherit; font-size: inherit; font-weight: 600; color: var(--color-primary); cursor: pointer; text-decoration: underline; } .login-card__toggle-btn:hover:not(:disabled) { color: var(--color-primary-hover); } .login-card__toggle-btn:disabled { opacity: 0.5; cursor: not-allowed; } .login-card__error { color: var(--color-danger); font-size: var(--font-size-sm); margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); background-color: rgba(239, 68, 68, 0.1); border-radius: var(--border-radius-sm); } .login-card__loading { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-top: var(--space-md); } .login-card__hint { color: var(--color-text-light); font-size: var(--font-size-sm); margin-top: var(--space-lg); } /* --- User Menu (header) --- */ .user-menu { display: flex; align-items: center; gap: var(--space-xs); } .user-menu__email { font-size: var(--font-size-sm); opacity: 0.9; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu__signout { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--border-radius-sm); color: var(--color-on-primary); cursor: pointer; transition: var(--transition); } .user-menu__signout:hover { background-color: rgba(255, 255, 255, 0.15); } .user-menu__signout:active { transform: scale(0.95); } /* --- No-JS Fallback --- */ .noscript-message { text-align: center; padding: var(--space-xl); margin: var(--space-xl); background-color: var(--color-surface); border-radius: var(--border-radius); box-shadow: var(--shadow-md); } .noscript-message h2 { color: var(--color-danger); margin-bottom: var(--space-sm); } /* --- Utility --- */ [hidden] { display: none !important; } /* --- Animations --- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ========================================================================== Responsive Breakpoints Mobile-first: base styles above are for mobile. Enhancements for larger screens below. ========================================================================== */ /* Tablet and up (768px+) */ @media (min-width: 768px) { .app-header__subtitle { display: inline; } /* Switch from dropdown to tab navigation */ .app-nav--dropdown { display: none; } .app-nav--tabs { display: flex; gap: var(--space-xs); } .app-main { padding: var(--space-lg); } } /* Desktop and up (1024px+) */ @media (min-width: 1024px) { :root { --header-height: 64px; } .app-main { padding: var(--space-xl); } } /* --- Reduced Motion --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }