/* * base.css — QuadroPlace component base * All colour, font and spacing values MUST come from CSS custom properties. * No hardcoded hex, rgb, named colour, px font-size or spacing literal allowed. * * Load order in : * 1. skins/skin-default.css (token definitions) * 2. base.css (component rules) * 3. page-specific sheets (index-modern.css, marketing-pages.css, …) * * Table of contents: * 1. Reset & box model * 2. Base typography * 3. Page layout * 4. Header & navigation * 5. Cards & panels * 6. Progress bar * 7. Buttons * 8. Forms * 9. Auth overlay & card * 10. Modals * 11. Toast notification * 12. User panel widgets * 13. Account deletion modal * 14. Animations * 15. Utility classes * 16. Responsive overrides */ /* ─── 1. RESET & BOX MODEL ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ─── 2. BASE TYPOGRAPHY ────────────────────────────────────────────────── */ body { font-family: var(--font-body); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background: var(--color-bg); min-height: 100vh; } h1 { font-size: var(--font-size-h1); margin-bottom: var(--spacing-xs); } a { color: var(--color-text-link); } a:hover, a:focus { color: var(--color-text-link-hover); } textarea { resize: vertical; } /* ─── 3. PAGE LAYOUT ────────────────────────────────────────────────────── */ main { max-width: 1200px; margin: 0 auto; padding: var(--spacing-md); } .main-layout { display: flex; flex-direction: column; gap: var(--spacing-section); } .main-content { flex: 1 1 auto; max-width: 820px; background: var(--color-surface-inset); } .page { display: none; background: var(--color-surface-alt); border-radius: var(--radius-section); padding: var(--spacing-section) 1.75rem; box-shadow: var(--shadow-page); opacity: 0; } .page.active { display: block; animation: fadeIn 0.35s ease forwards; } .navigation-panel { margin-top: var(--spacing-section); display: flex; justify-content: flex-start; } /* ─── 4. HEADER & NAVIGATION ────────────────────────────────────────────── */ header { background: var(--color-header-bg); color: var(--color-header-text); text-align: center; padding: var(--spacing-md); box-shadow: var(--shadow-header); } .app-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); padding: var(--spacing-lg); background: var(--color-header-bg); color: var(--color-header-text); box-shadow: var(--shadow-header); } .app-header .tagline { font-size: 0.95rem; opacity: 0.85; } /* App menu */ .app-menu { position: relative; display: flex; align-items: center; } .app-menu__toggle { display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 0.6rem 1.2rem; border-radius: var(--radius-btn-pill); border: 1px solid var(--color-topbar-border); background: var(--color-btn-overlay); color: inherit; font-weight: 600; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); } .app-menu__toggle:hover, .app-menu__toggle:focus { background: var(--color-btn-overlay-hover); transform: translateY(-1px); } .app-menu__list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-card-lg); box-shadow: var(--shadow-menu); padding: 0.6rem 0; list-style: none; display: none; z-index: 1500; } .app-menu__list.is-open { display: block; } .app-menu__link { display: block; padding: 0.6rem 1.1rem; text-decoration: none; color: inherit; font-weight: 600; transition: background var(--transition-fast), color var(--transition-fast); } .app-menu__link:hover, .app-menu__link:focus { background: var(--color-primary-tint); color: var(--color-info-dark); } /* Landing header variant */ .landing-header { background: var(--color-landing-header-bg); color: var(--color-header-text); padding: var(--spacing-section) var(--spacing-lg); display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-lg); flex-wrap: wrap; box-shadow: var(--shadow-header); position: relative; z-index: 2; } .landing-auth-link { color: var(--color-success-text-dark); font-weight: 700; font-family: var(--font-ui); font-size: var(--font-size-xs); text-decoration: none; background: var(--color-surface); padding: 0.25rem 0.65rem; border-radius: var(--radius-input); box-shadow: var(--shadow-card-md); transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .landing-auth-link:hover, .landing-auth-link:focus { transform: translateY(-2px); box-shadow: var(--shadow-auth); } /* ─── 5. CARDS & PANELS ─────────────────────────────────────────────────── */ .topic-card { background: var(--color-surface); border-radius: var(--radius-card); padding: 1.2rem; box-shadow: var(--shadow-card); transition: transform var(--transition-base), box-shadow var(--transition-base); cursor: pointer; } .topic-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); } .topic-card--completed { background: var(--color-success-tint); border: 2px solid var(--color-success-border); box-shadow: var(--shadow-card-success); } .topic-card--completed:hover { box-shadow: var(--shadow-card-success-hover); } .topic-card--completed .topic-name { color: var(--color-success-text-dark); } .topic-card--completed .progress-info, .topic-card--completed .progress-stats span { color: var(--color-success-text-dark); } .topic-name { font-weight: bold; font-size: var(--font-size-lg); margin-bottom: var(--spacing-xs); color: var(--color-text); } .topic-title { font-size: var(--font-size-xl); color: var(--color-text); } .topic-completed-note { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; font-size: var(--font-size-sm); color: var(--color-success-text-dark); font-weight: 600; } /* Program cards */ .program-card { background: var(--color-surface); padding: 1.8rem; border-radius: var(--radius-card-lg); box-shadow: var(--shadow-card-lg); display: flex; flex-direction: column; gap: var(--spacing-md); } .program-card h3 { font-size: 1.4rem; color: var(--color-text); } /* Intro / info panels */ .intro, .faq-item { background: var(--color-surface-glass); padding: var(--spacing-lg); border-radius: var(--radius-card-md); box-shadow: var(--shadow-card-md); } .faq-item { border: 1px solid var(--color-border-light); padding: 0.85rem var(--spacing-md); box-shadow: var(--shadow-card-sm); } .faq-item strong { color: var(--color-text); } .info-footer { background: var(--color-surface-glass); border-radius: var(--radius-card-md); box-shadow: var(--shadow-card-lg); display: flex; justify-content: space-between; gap: var(--spacing-lg); flex-wrap: wrap; padding: var(--spacing-lg); } /* Card face (flashcard) */ .card-face { background: var(--color-surface); border-radius: 15px; padding: var(--spacing-lg); display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: var(--shadow-card); transition: background-color var(--transition-base); color: var(--color-text); } .card-face.learned { background: var(--color-success-tint); border: 2px solid var(--color-success-border); } /* ─── 6. PROGRESS BAR ──────────────────────────────────────────────────── */ .progress-bar { height: 10px; background-color: var(--color-progress-track); border-radius: var(--radius-sm); overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-danger-light), var(--color-success-light)); border-radius: var(--radius-sm); transition: width 0.5s ease; } .topic-card--completed .progress-fill { background: linear-gradient(90deg, var(--color-success), var(--color-success-border)); } .progress-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; font-size: var(--font-size-sm); color: var(--color-text-muted); } .progress-stats { display: flex; align-items: center; gap: 0.8rem; font-size: 0.8rem; font-weight: 500; } .stat-total { color: var(--color-text); } .stat-learned { color: var(--color-success); } .stat-remaining { color: var(--color-primary); } /* ─── 7. BUTTONS ────────────────────────────────────────────────────────── */ .control-button { padding: 0.8rem 1.2rem; border: none; border-radius: var(--radius-btn); cursor: pointer; font-weight: bold; transition: all var(--transition-base); display: inline-flex; align-items: center; gap: var(--spacing-xs); text-decoration: none; box-shadow: var(--shadow-btn); } .play-button { background: var(--color-primary); color: var(--color-text-on-primary); } .play-button:hover { background: var(--color-primary-dark); } .slow-button { background: var(--color-slow); color: var(--color-text-on-primary); } .slow-button:hover { background: var(--color-slow-dark); } .learned-button { background: var(--color-success-light); color: var(--color-text-on-primary); } .learned-button:hover { background: var(--color-success); } .next-button { background: var(--color-warning); color: var(--color-text-on-primary); } .next-button:hover { background: var(--color-warning-dark); } .previous-button { background: var(--color-text-muted); color: var(--color-text-on-primary); } .previous-button:hover { background: var(--color-text-muted-2); } .back-button { background: var(--color-text-muted); color: var(--color-text-on-primary); border: none; padding: 0.6rem 1.2rem; border-radius: var(--radius-btn); cursor: pointer; margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-xs); transition: background var(--transition-base); } .back-button:hover { background: var(--color-text-muted-2); } .edit-button { background: var(--color-edit); color: var(--color-text-on-primary); } .edit-button:hover { background: var(--color-warning-dark); } .delete-button { background: var(--color-danger-light); color: var(--color-text-on-primary); } .delete-button:hover { background: var(--color-danger); } .add-card-button { background: var(--color-success-light); color: var(--color-text-on-primary); border: none; padding: 0.8rem var(--spacing-lg); border-radius: var(--radius-btn); cursor: pointer; font-weight: bold; transition: background var(--transition-base); } .add-card-button:hover { background: var(--color-success); } .program-link { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--spacing-xs); padding: 0.6rem 1.1rem; border-radius: var(--radius-input); background: var(--color-success-light); color: var(--color-text-on-primary); text-decoration: none; font-weight: 600; transition: background var(--transition-base); } .program-link:hover { background: var(--color-success); } .logout-button { background: var(--color-danger-light); color: var(--color-text-on-primary); } .logout-button:hover { background: var(--color-danger); } .adfree-button { background: var(--color-adfree); color: var(--color-text-on-primary); } .adfree-button:hover { background: var(--color-adfree-dark); } .link-button { background: none; border: none; color: var(--color-primary); text-decoration: none; text-align: left; cursor: pointer; padding: 0; font-size: 0.9rem; } .link-button:hover { text-decoration: underline; } /* ─── 8. FORMS ───────────────────────────────────────────────────────────── */ .form-group { margin-bottom: var(--spacing-md); } .form-group label { display: block; margin-bottom: var(--spacing-xs); font-weight: bold; } .form-group input, .form-group textarea { width: 100%; padding: 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-btn); font-family: inherit; } .form-note { font-size: var(--font-size-sm); color: var(--color-text-muted); } .form-message { font-size: 0.9rem; min-height: 1.2rem; } .form-message.success { color: var(--color-success); } .form-message.error { color: var(--color-danger); } .consent-field { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--font-size-sm); color: var(--color-text); } .consent-field input[type="checkbox"] { margin-top: 0.25rem; } .consent-field label a { color: var(--color-info); text-decoration: underline; } .consent-field label a:hover, .consent-field label a:focus { color: var(--color-info-dark); } .analytics-error { color: var(--color-danger-light); font-weight: 500; } /* ─── 9. AUTH OVERLAY & CARD ────────────────────────────────────────────── */ .auth-panels { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--spacing-section); background: var(--color-overlay-light); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity var(--transition-fast); z-index: 1000; } .auth-panels.is-active { opacity: 1; pointer-events: auto; visibility: visible; } .auth-panel { display: none; justify-content: center; width: 100%; } .auth-panel.is-active { display: flex; } .auth-card { background: var(--color-surface); border-radius: var(--radius-card-xl); padding: 2.4rem var(--spacing-section) 2.9rem; box-shadow: var(--shadow-auth); display: flex; flex-direction: column; gap: var(--spacing-md); position: relative; width: min(520px, 100%); max-height: min(680px, calc(100vh - 120px)); overflow-y: auto; } .auth-card form { display: flex; flex-direction: column; gap: 0.8rem; } .auth-card input, .auth-card textarea { border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: 0.7rem; } .auth-panel__close { position: absolute; top: 0.8rem; right: 0.95rem; background: transparent; border: none; color: var(--color-text-muted); font-size: 2rem; line-height: 1; cursor: pointer; padding: 0.1rem; } .auth-panel__close:hover, .auth-panel__close:focus { color: var(--color-danger); } /* ─── 10. MODALS ────────────────────────────────────────────────────────── */ .modal { display: none; position: fixed; inset: 0; background-color: var(--color-overlay); z-index: 1000; justify-content: center; align-items: center; padding: clamp(24px, 6vh, 72px) 20px clamp(40px, 12vh, 112px); overflow-y: auto; } .modal.show { display: flex; } .modal-content { background: var(--color-surface); padding: var(--spacing-section); border-radius: var(--radius-card); width: 90%; max-width: 500px; max-height: 90vh; box-shadow: var(--shadow-modal); display: flex; flex-direction: column; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg); flex: 0 0 auto; } .close-modal { background: none; border: none; font-size: var(--font-size-xl); cursor: pointer; color: var(--color-text-muted); } .close-modal:hover { color: var(--color-text-subtle); } .modal-body { display: flex; flex-direction: column; gap: var(--spacing-md); font-size: 0.95rem; color: var(--color-text); line-height: var(--line-height-base); flex: 1 1 auto; min-height: 0; overflow-y: auto; } .modal-body a { color: var(--color-accent); } /* ─── 11. TOAST NOTIFICATION ────────────────────────────────────────────── */ .toast { position: fixed; bottom: 20px; right: 20px; background: var(--color-toast-bg); color: var(--color-text-on-primary); padding: 0.9rem 1.2rem; border-radius: var(--radius-btn); opacity: 0; transform: translateY(20px); transition: opacity var(--transition-base), transform var(--transition-base); z-index: 9999; pointer-events: none; } .toast.visible { opacity: 1; transform: translateY(0); } .toast[data-type="success"] { background: var(--color-success-bg); } .toast[data-type="error"] { background: var(--color-danger-toast); } /* ─── 12. USER PANEL WIDGETS ────────────────────────────────────────────── */ .user-panel { display: flex; align-items: center; gap: var(--spacing-sm); background: var(--color-user-panel-bg); padding: 0.6rem var(--spacing-md); border-radius: var(--radius-btn-pill); flex-wrap: wrap; } .user-email { font-size: 0.95rem; } .user-stats { background: var(--color-user-stats-bg); padding: 0.4rem var(--spacing-sm); border-radius: var(--radius-input); font-family: var(--font-ui); align-items: flex-start; display: flex; flex-direction: column; gap: 0.15rem; } .user-stat { color: var(--color-user-stats-text); font-size: var(--font-size-xs); line-height: 1.2; white-space: nowrap; } .user-metrics { background: var(--color-user-metrics-bg); padding: 0.4rem var(--spacing-sm); border-radius: var(--radius-input); font-size: var(--font-size-xs); line-height: 1.2; color: var(--color-user-metrics-text); min-width: 160px; box-shadow: inset 0 0 0 1px var(--color-user-metrics-border); display: flex; flex-direction: column; gap: 0.15rem; } .user-metric { display: flex; justify-content: space-between; gap: var(--spacing-xs); white-space: nowrap; } .user-metric__value.metric-tier-red { color: var(--color-tier-red); } .user-metric__value.metric-tier-blue { color: var(--color-tier-blue); } .user-metric__value.metric-tier-brown { color: var(--color-tier-brown); } .user-metric__value.metric-tier-green { color: var(--color-tier-green); } .user-metric__value.metric-tier-gold { color: var(--color-tier-gold); } /* ─── 13. ACCOUNT DELETION MODAL ────────────────────────────────────────── */ .account-delete-modal { position: fixed; inset: 0; background: var(--color-overlay-dark); display: flex; align-items: center; justify-content: center; z-index: 2000; } .account-delete-modal__content { background: var(--color-surface-danger); border-radius: var(--radius-card-md); padding: 2.2rem; max-width: 520px; width: 90%; box-shadow: 0 14px 36px var(--color-danger-shadow); text-align: center; border: 2px solid var(--color-danger); } .account-delete-modal__content h2, .account-delete-modal__content p { color: var(--color-danger); font-family: var(--font-ui); font-size: var(--font-size-xs); font-weight: 700; } .account-delete-modal__content h2 { margin-bottom: var(--spacing-md); } .account-delete-modal__content p { margin-bottom: var(--spacing-lg); line-height: var(--line-height-base); } .account-delete-modal__actions { display: flex; flex-direction: column; gap: var(--spacing-sm); } .account-delete-modal__confirm { display: inline-block; padding: 0.85rem 1.2rem; border-radius: var(--radius-input); background: var(--color-danger-bg); color: var(--color-info); font-weight: 700; font-family: var(--font-ui); font-size: var(--font-size-xs); text-decoration: none; transition: background var(--transition-fast); } .account-delete-modal__confirm:hover, .account-delete-modal__confirm:focus { background: var(--color-danger-confirm-hover); .account-delete-modal__cancel { background: transparent; border: 1px solid var(--color-border-muted); border-radius: var(--radius-input); padding: 0.6rem var(--spacing-md); cursor: pointer; font-size: var(--font-size-sm); transition: background var(--transition-fast); } .account-delete-modal__cancel:hover, .account-delete-modal__cancel:focus { background: var(--color-cancel-hover); .account-delete-link { color: var(--color-danger); font-size: var(--font-size-xs); font-family: var(--font-ui); text-decoration: none; } .account-delete-link:hover, .account-delete-link:focus { text-decoration: underline; } /* ─── 14. ANIMATIONS ────────────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ─── 15. UTILITY CLASSES ───────────────────────────────────────────────── */ .app-version { margin-top: 0.35rem; font-size: 0.8rem; color: var(--color-text-muted); } .developer-info { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.95rem; color: var(--color-accent); } .developer-email { color: var(--color-accent); text-decoration: none; } .info-link { padding: 0.4rem 0.9rem; border-radius: var(--radius-btn-pill); } /* ─── 16. RESPONSIVE OVERRIDES ──────────────────────────────────────────── */ @media (min-width: 992px) { .main-layout { flex-direction: row; align-items: flex-start; gap: 2.5rem; } .main-content { flex: 1 1 0; max-width: 820px; } .ad-container { flex: 0 0 320px; max-width: 320px; } } @media (max-width: 640px) { .landing-header { justify-content: center; text-align: center; } .landing-header .brand { align-items: center; } .landing-auth-links { justify-content: center; margin-left: 0; } } @media (max-width: 600px) { .page { padding: var(--spacing-lg) 1.25rem; } .controls { flex-direction: column; align-items: stretch; } .control-button { width: 100%; justify-content: center; } .toast { left: 50%; right: auto; bottom: 16px; width: calc(100% - 32px); max-width: 360px; transform: translate(-50%, 20px); } .toast.visible { transform: translate(-50%, 0); } }