/* ========================================================= INES PRESTIGE - ADMIN PANEL THEME Palette : noir profond / or / violet / bleu nuit ========================================================= */ :root { /* --- Surfaces --- */ --bg: #0A0A12; --bg-elevated: #101018; --surface: #15151F; --surface-2: #1A1A28; --border: rgba(201, 162, 90, 0.14); --border-strong: rgba(201, 162, 90, 0.28); /* --- Accents --- */ --gold: #C9A25A; --gold-bright: #E8C77E; --gold-dim: rgba(201, 162, 90, 0.12); --violet: #8B6CF0; --violet-bright: #A78BFA; --violet-dim: rgba(139, 108, 240, 0.14); --navy: #1E2246; --navy-bright: #2A2F5C; /* --- Texte --- */ --text: #FAF8F3; --text-muted: #ACA8BE; --text-faint: #7A768C; /* --- Etats --- */ --success: #3FC98A; --success-dim: rgba(63, 201, 138, 0.14); --danger: #E5637A; --danger-dim: rgba(229, 99, 122, 0.14); --warning: #E8B24D; --warning-dim: rgba(232, 178, 77, 0.14); /* --- Couleurs graphiques (dashboard) --- */ --chart-blue: #4C8DFF; --chart-blue-dim: rgba(76, 141, 255, 0.14); --chart-pink: #EC4899; --chart-pink-dim: rgba(236, 72, 153, 0.14); /* --- Typo --- */ --font-display: 'Cormorant Garamond', serif; --font-body: 'Inter', -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', monospace; /* --- Layout --- */ --sidebar-width: 252px; --radius: 12px; --radius-sm: 8px; --shadow: 0 8px 30px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } /* ========================================================= LUEURS DE FOND PREMIUM (violet / or) ========================================================= */ .bg-glow { position: fixed; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; opacity: 0.55; } .bg-glow-violet { top: -180px; left: -120px; width: 560px; height: 560px; background: radial-gradient(circle, rgba(139, 108, 240, 0.55), transparent 70%); } .bg-glow-gold { top: -140px; right: -160px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(201, 162, 90, 0.45), transparent 70%); } .bg-glow-gold-2 { bottom: -220px; right: -100px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(201, 162, 90, 0.30), transparent 70%); } html[data-theme="light"] .bg-glow { opacity: 0.35; } .sidebar, .main { position: relative; z-index: 1; } /* ========================================================= THEME CLAIR (active via data-theme="light" sur ) ========================================================= */ html[data-theme="light"] { --bg: #F7F5F0; --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface-2: #F0EDE5; --border: rgba(120, 90, 30, 0.14); --border-strong: rgba(120, 90, 30, 0.28); --text: #1C1A16; --text-muted: #5C584E; --text-faint: #8A8578; --gold-dim: rgba(201, 162, 90, 0.14); --violet-dim: rgba(139, 108, 240, 0.10); --success-dim: rgba(63, 201, 138, 0.12); --danger-dim: rgba(229, 99, 122, 0.12); --warning-dim: rgba(232, 178, 77, 0.12); --chart-blue-dim: rgba(76, 141, 255, 0.12); --chart-pink-dim: rgba(236, 72, 153, 0.12); } html[data-theme="light"] body { background-image: radial-gradient(ellipse 800px 500px at 15% -10%, rgba(139, 108, 240, 0.05), transparent), radial-gradient(ellipse 600px 400px at 100% 0%, rgba(201, 162, 90, 0.06), transparent); } html[data-theme="light"] .sidebar { background: linear-gradient(180deg, #FFFFFF 0%, #F5F2EA 100%); } html[data-theme="light"] .login-page { background: var(--bg); } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.5; } body { display: flex; min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } ::selection { background: var(--violet-dim); color: var(--gold-bright); } /* Focus visible - accessibilite clavier */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ========================================================= SIDEBAR ========================================================= */ .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: linear-gradient(180deg, var(--bg-elevated) 0%, #0C0C14 100%); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 28px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .logo { display: flex; align-items: center; gap: 12px; padding: 0 24px 28px 24px; margin-bottom: 12px; border-bottom: 1px solid var(--border); } .logo-mark { width: 36px; height: 36px; flex-shrink: 0; position: relative; } .logo-mark svg { width: 100%; height: 100%; display: block; } .logo-text { font-family: var(--font-display); font-size: 21px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.1; color: var(--text); } .logo-text span { display: block; font-family: var(--font-body); font-size: 9px; font-weight: 600; letter-spacing: 0.28em; color: var(--gold); margin-top: 3px; } .sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; flex: 1; } .nav-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); padding: 16px 12px 6px 12px; } .sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 14px; font-weight: 500; position: relative; transition: background 0.15s ease, color 0.15s ease; } .sidebar nav a .icon { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.95; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; } .sidebar nav a:hover { background: var(--surface-2); color: var(--text); } .sidebar nav a.active { background: linear-gradient(90deg, var(--gold-dim), var(--violet-dim) 120%); color: var(--gold-bright); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(201, 162, 90, 0.18); } .sidebar nav a.active::before { content: ""; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--gold-bright), var(--violet-bright)); box-shadow: 0 0 8px var(--gold); } .sidebar nav a.logout { margin-top: auto; color: var(--danger); } .sidebar nav a.logout:hover { background: var(--danger-dim); } .nav-divider { height: 1px; background: var(--border); margin: 12px 14px; } /* ========================================================= TOPBAR + MAIN ========================================================= */ .main { flex: 1; min-width: 0; padding: 32px 40px 48px 40px; } .topbar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; gap: 24px; } .topbar h1 { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin: 0 0 4px 0; color: var(--text); } .topbar p { margin: 0; color: var(--text-muted); font-size: 13.5px; } .admin-pill { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px 7px 7px; flex-shrink: 0; } .avatar { border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--violet)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: #0A0A12; flex-shrink: 0; } .admin-pill .avatar { width: 26px; height: 26px; font-size: 13px; } .admin-pill span { font-size: 12.5px; font-weight: 500; color: var(--text-muted); } /* --- Actions du topbar (recherche, theme, cloche) --- */ .topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .search-box { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; min-width: 200px; } .search-box input { background: transparent; border: none; color: var(--text); font-size: 12.5px; flex: 1; padding: 0; min-width: 0; } .search-box input:focus { border: none; outline: none; } .search-icon { font-size: 12px; opacity: 0.6; } .search-kbd { font-size: 10px; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-family: var(--font-mono); } .icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; color: var(--text); } .icon-btn:hover { background: var(--surface-2); } .notif-badge { position: absolute; top: -4px; right: -4px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px; } /* --- Statut des services (sidebar) --- */ .services-status-box { margin: 14px 14px 4px 14px; padding: 14px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border); } .services-status-title { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .service-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; } .service-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .service-dot.online { background: var(--success); box-shadow: 0 0 6px var(--success); } .service-dot.offline { background: var(--danger); box-shadow: 0 0 6px var(--danger); } .service-dot.unknown { background: var(--text-faint); } .service-label { color: var(--text-muted); flex: 1; } .service-state { color: var(--text-faint); font-size: 10.5px; } /* ========================================================= CARTES (avec coin "facette" signature) ========================================================= */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; position: relative; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); display: flex; flex-direction: column; height: 100%; } .card::after { content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px; background: linear-gradient(135deg, var(--gold-dim), transparent 70%); clip-path: polygon(100% 0, 0 0, 100% 100%); } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; align-items: stretch; } .stat-card .stat-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .stat-card .stat-value { font-family: var(--font-display); font-size: 36px; font-weight: 600; color: var(--text); line-height: 1; } .stat-card .stat-value.gold { color: var(--gold-bright); } .stat-card .stat-value.violet { color: var(--violet-bright); } .stat-card .stat-sub { margin-top: 8px; font-size: 12px; color: var(--text-muted); } .sparkline-wrap { position: relative; height: 40px; margin-top: 10px; } .section-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0 0 16px 0; color: var(--text); } /* --- Icones colorees des cartes stats (dashboard) --- */ .stat-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 14px; } .stat-icon.icon-violet { background: var(--violet-dim); } .stat-icon.icon-gold { background: var(--gold-dim); } .stat-icon.icon-pink { background: var(--chart-pink-dim); } .stat-icon.icon-blue { background: var(--chart-blue-dim); } /* --- Activite recente --- */ .activity-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .activity-row:last-child { border-bottom: none; } .activity-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .activity-content { flex: 1; min-width: 0; } .activity-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .activity-meta { font-size: 11.5px; color: var(--text-faint); } /* --- Alertes dashboard --- */ .alert-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .alert-row:last-child { border-bottom: none; } .alert-icon-sec { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .alert-icon-sec.security { background: var(--danger-dim); } .alert-icon-sec.vip { background: var(--gold-dim); } .alert-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; } .alert-detail { font-size: 11.5px; color: var(--text-muted); } /* ========================================================= BOUTONS ========================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 9px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: transform 0.1s ease, filter 0.15s ease, background 0.15s ease; } .btn:active { transform: translateY(1px); } .btn-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #14100A; } .btn-gold:hover { filter: brightness(1.08); } .btn-violet { background: var(--violet); color: #fff; } .btn-violet:hover { filter: brightness(1.1); } .btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); } .btn-ghost:hover { background: var(--surface-2); } .btn-danger { background: transparent; border-color: rgba(229, 99, 122, 0.4); color: var(--danger); } .btn-danger:hover { background: var(--danger-dim); } .btn-sm { padding: 6px 12px; font-size: 12px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ========================================================= FORMULAIRES ========================================================= */ label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; } input[type="text"], input[type="password"], input[type="number"], input[type="search"], select, textarea { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px 13px; color: var(--text); font-family: var(--font-body); font-size: 13.5px; transition: border-color 0.15s ease; } input:focus, select:focus, textarea:focus { border-color: var(--gold); } textarea { resize: vertical; min-height: 90px; } .form-row { margin-bottom: 16px; } .form-actions { display: flex; gap: 10px; margin-top: 18px; } /* ========================================================= TABLEAUX ========================================================= */ .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } table { width: 100%; border-collapse: collapse; background: var(--surface); } thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); padding: 13px 16px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); white-space: nowrap; } tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text); white-space: nowrap; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--surface-2); } .mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); } .table-empty { text-align: center; padding: 40px 20px; color: var(--text-faint); font-size: 13px; } tbody tr.row-selected { background: var(--gold-dim); box-shadow: inset 3px 0 0 var(--gold); } .detail-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 10px; } .mini-stat { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; } .mini-stat-label { font-size: 10.5px; color: var(--text-faint); margin-bottom: 6px; } .mini-stat-value { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--text); } /* --- Autocompletion (page Points) --- */ .autocomplete-list { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); margin-top: 4px; max-height: 220px; overflow-y: auto; box-shadow: var(--shadow); } .autocomplete-item { padding: 9px 13px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--border); } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover { background: var(--surface-2); color: var(--gold-bright); } /* --- Choix type d'operation (radio stylises) --- */ .op-type-choice { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 12px; color: var(--text-muted); cursor: pointer; } .op-type-choice input { accent-color: var(--gold); } .op-type-choice:has(input:checked) { background: var(--gold-dim); color: var(--gold-bright); border-color: rgba(201, 162, 90, 0.4); } /* --- Bannière statut VIP (panneau detail) --- */ .vip-banner { background: linear-gradient(135deg, var(--gold-dim), var(--violet-dim)); border: 1px solid rgba(201, 162, 90, 0.3); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--gold-bright); } /* --- Cartes plans VIP --- */ .plan-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; text-align: center; } .plan-card.plan-gold { border-color: rgba(201, 162, 90, 0.4); background: linear-gradient(180deg, var(--gold-dim), var(--bg-elevated)); } .plan-icon { font-size: 24px; margin-bottom: 8px; } .plan-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; margin-bottom: 4px; } .plan-sub { font-size: 11px; color: var(--text-faint); margin-bottom: 12px; } .plan-price { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--gold-bright); margin-bottom: 4px; } .plan-note { font-size: 10.5px; color: var(--text-faint); } .plan-card.plan-inactive { opacity: 0.5; } /* --- Densite de l'interface (Parametres > Apparence) --- */ html[data-density="compact"] .main { padding: 20px 24px 32px 24px; } html[data-density="compact"] .card { padding: 16px; } html[data-density="compact"] .card-grid { gap: 12px; } html[data-density="spacieux"] .main { padding: 44px 56px 64px 56px; } html[data-density="spacieux"] .card { padding: 30px; } html[data-density="spacieux"] .card-grid { gap: 22px; } .item-thumb { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--text); } /* --- Broadcast : choix de segment --- */ .segment-choice { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); cursor: pointer; } .segment-choice input { accent-color: var(--gold); } .segment-choice:has(input:checked) { background: var(--gold-dim); border-color: rgba(201, 162, 90, 0.4); } /* --- Broadcast : bulle d'apercu --- */ .preview-bubble-wrap { background: #0E1621; border-radius: var(--radius); padding: 20px 14px; min-height: 160px; display: flex; align-items: flex-start; } .preview-bubble { background: #202B36; color: #E9EDF0; border-radius: 10px; padding: 10px 12px; font-size: 13px; max-width: 90%; line-height: 1.5; } .preview-bubble b { color: var(--gold-bright); } .preview-time { text-align: right; font-size: 10px; color: #8B98A5; margin-top: 6px; } /* --- Broadcast : carte modele --- */ .template-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } /* ========================================================= BADGES ========================================================= */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; } .badge-active { background: var(--success-dim); color: var(--success); } .badge-active .badge-dot { background: var(--success); } .badge-banned { background: var(--danger-dim); color: var(--danger); } .badge-banned .badge-dot { background: var(--danger); } .badge-vip { background: linear-gradient(135deg, rgba(232, 199, 126, 0.18), rgba(201, 162, 90, 0.08)); color: var(--gold-bright); border: 1px solid rgba(201, 162, 90, 0.3); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .badge-lifetime { background: linear-gradient(135deg, var(--violet-dim), var(--gold-dim)); color: var(--violet-bright); border: 1px solid rgba(139, 108, 240, 0.35); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); } .badge-neutral { background: var(--surface-2); color: var(--text-muted); } /* ========================================================= ALERTES / MESSAGES ========================================================= */ .alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 20px; border: 1px solid transparent; } .alert-error { background: var(--danger-dim); border-color: rgba(229, 99, 122, 0.3); color: var(--danger); } .alert-success { background: var(--success-dim); border-color: rgba(63, 201, 138, 0.3); color: var(--success); } /* ========================================================= LOGIN PAGE ========================================================= */ .login-page { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px 36px; text-align: center; } .login-card .logo-mark { width: 48px; height: 48px; margin: 0 auto 18px auto; } .login-card h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 0 0 4px 0; } .login-card p.subtitle { color: var(--text-muted); font-size: 12.5px; margin: 0 0 28px 0; letter-spacing: 0.08em; text-transform: uppercase; } .login-card form { text-align: left; } /* ========================================================= PLACEHOLDER ========================================================= */ .placeholder { text-align: center; padding: 80px 20px; color: var(--text-faint); } .placeholder .icon-lg { font-size: 42px; margin-bottom: 14px; } .placeholder h3 { font-family: var(--font-display); font-size: 22px; color: var(--text); margin: 0 0 8px 0; } /* ========================================================= RESPONSIVE ========================================================= */ .mobile-topbar { display: none; } @media (max-width: 900px) { body { flex-direction: column; } .sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.2s ease; z-index: 100; box-shadow: var(--shadow); } .sidebar.open { transform: translateX(0); } .mobile-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); position: sticky; top: 0; z-index: 50; } .mobile-topbar .logo-text { font-size: 17px; } .burger { background: none; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); padding: 8px 10px; cursor: pointer; } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 90; } .sidebar-overlay.open { display: block; } .main { padding: 20px 16px 40px 16px; } .topbar { flex-direction: column; align-items: flex-start; } .topbar h1 { font-size: 24px; } .card-grid { grid-template-columns: 1fr; } }