/* /premium/assets/premium.css */ /* Design tokens */ :root { --simpl-blue: #2f7bff; --simpl-blue-dark: #245ddb; --simpl-blue-light: #75b3ff; --simpl-accent: #5cc8ff; --simpl-surface: #f6f9ff; --simpl-red: #e02424; /* still used for some links */ --simpl-dark: #111827; --simpl-grey: #4b5563; --simpl-light: #f9fafb; --simpl-border:#e5e7eb; } * { box-sizing: border-box; } /* Base body */ body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--simpl-light); color: var(--simpl-dark); } /* Premium body (we set class="premium-body" on ) */ .premium-body { color: #0f172a; background: radial-gradient(at 20% 10%, rgba(117,179,255,.35), transparent 55%), radial-gradient(at 80% 30%, rgba(94,234,212,.28), transparent 60%), radial-gradient(at 60% 90%, rgba(147,197,253,.32), transparent 55%), #eef2ff; } /* HEADER / BRANDING -------------------------------------------------- */ /* Always keep the top header above any “glass” or hero backgrounds */ .premium-header{ position: sticky; top: 0; z-index: 9999; } /* If any section creates its own stacking layer, keep it below header */ .premium-main, .page-header, .card, .hero, .glass{ position: relative; z-index: 1; } /* The top "hero" panel that holds the learner name */ .page-header{ position: relative; z-index: 1; } /* If a fog/gradient overlay exists via pseudo-elements, push it behind */ .page-header::before, .page-header::after{ z-index: 0 !important; pointer-events: none !important; } /* Force EVERYTHING inside the header to sit above the overlay */ .page-header > *{ position: relative; z-index: 2; } /* Keep header + buttons always above any page backdrops */ .premium-header{ position: sticky; top: 0; z-index: 1000; } /* If you have any hero/backdrop on the page header, keep it behind */ .page-header{ position: relative; z-index: 1; } .page-header::before, .page-header::after{ z-index: 0 !important; pointer-events: none; } /* Give the content a little breathing room so the backdrop doesn't ride up */ .premium-main{ position: relative; z-index: 1; padding-top: 12px; } .premium-header { background: linear-gradient(135deg, #2f7bff, #5cc8ff); box-shadow: 0 6px 18px rgba(30, 70, 200, .25); } .premium-header-inner { max-width: 1080px; margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; } .premium-logo-block { display: flex; align-items: center; gap: .75rem; } .premium-logo { height: 46px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); } .premium-header-text { display: flex; flex-direction: column; } .premium-header-title { font-weight: 700; font-size: 1rem; color: #fff; } .premium-header-subtitle { font-size: .8rem; color: rgba(255,255,255,.9); } .premium-main { max-width: 980px; margin: 1.5rem auto 2.5rem; padding: 0 1rem; } /* Generic page container (used on login screens etc.) */ .page { max-width: 980px; margin: 1.5rem auto 2.5rem; padding: 0 1rem; } .page--narrow { max-width: 480px; } /* Learner-split: make the action buttons stack full-width on mobile */ @media (max-width: 720px){ /* The container that holds: Back to admin / Training progress / Booked lessons / etc */ .btn-row, .btn-group, .quick-actions, .action-row, .learner-actions{ display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; } /* Make each button fill the row */ .btn-row a, .btn-row button, .btn-group a, .btn-group button, .quick-actions a, .quick-actions button, .action-row a, .action-row button, .learner-actions a, .learner-actions button{ width: 100% !important; justify-content: center !important; } } /* BUTTONS -------------------------------------------------- */ .btn, .btn-primary, .btn-outline { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; border-radius: 999px; font-size: 0.85rem; } /* Neutral button – mostly for forms, internal use */ .btn { padding: 0.35rem 0.9rem; border: 1px solid var(--simpl-border); background: #ffffff; color: var(--simpl-grey); } /* Main CTA (logout, primary actions) */ .btn-primary { padding: .4rem .9rem; background: #ffffff; color: var(--simpl-blue-dark); border: 1px solid #ffffff; font-weight: 600; } /* Outline (Back / Learners list) */ .btn-outline { padding: .35rem .85rem; background: rgba(255,255,255,.18); color: #ffffff; border: 1px solid rgba(255,255,255,.45); font-size: .82rem; } .btn-outline:hover { background: rgba(255,255,255,.35); } /* Small button variant (used for badge share buttons) */ .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.78rem; } /* Full-width primary button (login screens) */ .btn-block { width: 100%; justify-content: center; } /* PAGE HEADER -------------------------------------------------- */ .page-header { margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .page-title { font-size: 1.4rem; font-weight: 600; margin: 0 0 0.25rem; } .page-meta { font-size: 0.9rem; color: var(--simpl-grey); } /* STATUS BADGE -------------------------------------------------- */ .status-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid #dbe4ff; background: #f1f5ff; color: #1e3a8a; } .status-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #93c5fd; /* soft blue default */ } .status-dot.active { background: #2563eb; /* stronger blue when active */ box-shadow: 0 0 0 3px rgba(37,99,235,0.2); } /* CARDS -------------------------------------------------- */ .card { background: #ffffff; border-radius: 0.75rem; border: 1px solid #e3e8ff; overflow: hidden; box-shadow: 0 10px 28px rgba(0,40,160,.08); } .card + .card { margin-top: 1rem; } .card-header { padding: 0.85rem 1rem; border-bottom: 1px solid var(--simpl-border); display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .card-header h2 { margin: 0; font-size: 1rem; font-weight: 600; } .card-header p { margin: 0; font-size: 0.8rem; color: var(--simpl-grey); } .card-body { padding: 1rem; } /* Shimmer for "active" cards */ @keyframes cardShimmer { 0% { transform: translateX(-130%); } 50% { transform: translateX(130%); } 100% { transform: translateX(130%); } } .card--active { position: relative; overflow: hidden; } .card--active::before { content: ""; position: absolute; inset: -40%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,0.4), transparent ); transform: translateX(-130%); animation: cardShimmer 4s ease-in-out infinite; pointer-events: none; opacity: 0.7; } /* DASHBOARD TILES -------------------------------------------------- */ .tiles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .tile { background: #ffffff; border-radius: 0.9rem; border: 1px solid var(--simpl-border); padding: 1rem; text-decoration: none; color: var(--simpl-dark); display: flex; flex-direction: column; justify-content: space-between; min-height: 130px; transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, border-color 0.08s ease-out; } .tile:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08); border-color: #d1d5db; } .tile-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.3rem; } .tile-desc { font-size: 0.86rem; color: var(--simpl-grey); } .tile-meta { font-size: 0.8rem; color: var(--simpl-grey); margin-top: 0.75rem; } .tile-badge { display: inline-flex; align-items: center; justify-content: center; padding: 0.1rem 0.4rem; border-radius: 999px; font-size: 0.7rem; border: 1px solid #e5e7eb; background: #f9fafb; color: var(--simpl-grey); } .tile-disabled { opacity: 0.6; cursor: default; } /* TABLES / SKILLS / PROGRESS -------------------------------------------------- */ .skills-table-wrapper { width: 100%; overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } thead { background: #f9fafb; } th, td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--simpl-border); text-align: left; vertical-align: middle; } th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--simpl-grey); } tbody tr:nth-child(even) { background: #fcfcfd; } .group-row td { background: #e7f0ff; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #1e3a8a; } .topic-label { font-weight: 500; } .stars { font-size: 1rem; letter-spacing: 0.05em; white-space: nowrap; } .notes-snippet { font-size: 0.85rem; color: var(--simpl-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; } tr.skill-row-staff { cursor: pointer; } tr.skill-row-staff:hover { background: #f3f4f6; } .edit-pill { display: inline-block; padding: 0.2rem 0.45rem; font-size: 0.75rem; border-radius: 999px; border: 1px solid var(--simpl-border); text-decoration: none; color: var(--simpl-grey); background: #ffffff; white-space: nowrap; } /* PROGRESS SUMMARY -------------------------------------------------- */ .progress-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: 1.5rem; align-items: flex-start; } .overall-progress-circle { --value: 0; width: 140px; height: 140px; border-radius: 50%; background: conic-gradient( var(--simpl-blue) calc(var(--value) * 1%), #e3e8ff 0 ); display: flex; align-items: center; justify-content: center; position: relative; /* halo anchor */ } /* Halo around progress ring */ .overall-progress-circle::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.9), transparent 60%), radial-gradient(circle at 70% 80%, rgba(117,179,255,0.55), transparent 65%); opacity: 0.9; z-index: -1; } .overall-progress-inner { width: 110px; height: 110px; border-radius: 50%; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; } .overall-progress-number { font-size: 1.4rem; font-weight: 600; } .overall-progress-label { font-size: 0.8rem; color: var(--simpl-grey); } .group-progress-list { display: flex; flex-direction: column; gap: 0.75rem; } .group-progress-item { display: flex; flex-direction: column; gap: 0.2rem; } .group-progress-header { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--simpl-grey); } .group-progress-name { font-weight: 500; } .group-progress-bar { width: 100%; height: 6px; border-radius: 999px; background: #e5e7eb; overflow: hidden; } .group-progress-fill { height: 100%; border-radius: 999px; background: var(--simpl-blue); width: 0%; } /* FOCUS SKILLS -------------------------------------------------- */ .focus-list { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed #e5e7eb; } .focus-title { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; } .focus-item { font-size: 0.85rem; color: var(--simpl-grey); display: flex; justify-content: space-between; gap: 0.5rem; } .focus-item + .focus-item { margin-top: 0.15rem; } .focus-item-label { font-weight: 500; color: var(--simpl-dark); } .focus-item-meta { white-space: nowrap; } /* OVERALL COMMENTS -------------------------------------------------- */ .overall-notes-textarea { width: 100%; min-height: 80px; max-width: 100%; padding: 0.5rem 0.6rem; border-radius: 0.5rem; border: 1px solid var(--simpl-border); font-family: inherit; font-size: 0.9rem; resize: vertical; } .overall-notes-readonly { font-size: 0.9rem; color: var(--simpl-dark); white-space: pre-wrap; } .overall-notes-empty { font-size: 0.85rem; color: var(--simpl-grey); font-style: italic; } /* LESSON LIST (learner-lessons.php) -------------------------------------------------- */ .lesson-list { display: flex; flex-direction: column; gap: 0.5rem; } .lesson-item { border-radius: 0.6rem; border: 1px solid var(--simpl-border); padding: 0.6rem 0.75rem; background: #ffffff; display: flex; flex-direction: column; gap: 0.15rem; } .lesson-top-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .lesson-date { font-weight: 600; font-size: 0.95rem; } .lesson-meta { font-size: 0.78rem; color: var(--simpl-grey); white-space: nowrap; } .lesson-summary { font-size: 0.85rem; color: var(--simpl-grey); } .lesson-actions { margin-top: 0.25rem; display: flex; justify-content: flex-end; } .link-small { font-size: 0.8rem; text-decoration: none; color: var(--simpl-red); } .link-small:hover { text-decoration: underline; } .empty-state { font-size: 0.9rem; color: var(--simpl-grey); font-style: italic; } /* FOOTER -------------------------------------------------- */ .premium-footer { margin-top: 2rem; padding: 1rem 0 1.5rem; border-top: 1px solid #e5e7eb; background: linear-gradient(to bottom, #ffffff00, #eef2ff); } .premium-footer-inner { max-width: 980px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8rem; color: #6b7280; } .premium-footer-links a { color: #2563eb; text-decoration: none; margin-left: 0.75rem; font-size: 0.8rem; } .premium-footer-links a:hover { text-decoration: underline; } /* RESPONSIVE -------------------------------------------------- */ @media (max-width: 1080px) { .premium-header-inner { padding-inline: 1rem; } } @media (max-width: 820px) { .tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .premium-header-inner { flex-direction: column; align-items: flex-start; } .premium-main { padding-inline: 0.85rem; } .page { padding-inline: 0.85rem; } .page-header { flex-direction: column; align-items: flex-start; } .tiles-grid { grid-template-columns: minmax(0, 1fr); } .progress-layout { grid-template-columns: 1fr; } .overall-progress-circle { margin: 0 auto; } .latest-badge-main { flex-direction: column; align-items: flex-start; } } /* LOGIN / GENERIC FORM LAYOUT -------------------------------------------------- */ /* Stack labels and inputs nicely inside cards (login, etc.) */ .card form label { display: block; font-size: 0.85rem; font-weight: 500; margin-top: 0.6rem; color: var(--simpl-dark); } /* Style inputs inside labels or form groups */ .card form label input[type="email"], .card form label input[type="password"], .card form input[type="email"], .card form input[type="password"] { display: block; width: 100%; margin-top: 0.25rem; padding: 0.45rem 0.65rem; border-radius: 0.5rem; border: 1px solid var(--simpl-border); font-size: 0.9rem; font-family: inherit; box-sizing: border-box; } .card form label input[type="email"]:focus, .card form label input[type="password"]:focus, .card form input[type="email"]:focus, .card form input[type="password"]:focus { outline: none; border-color: var(--simpl-blue); box-shadow: 0 0 0 1px rgba(47, 123, 255, 0.35); } /* Make the primary submit button look like a pill, even without classes */ .card form button[type="submit"], .card form input[type="submit"] { margin-top: 0.9rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--simpl-blue-dark); background: var(--simpl-blue-dark); color: #ffffff; font-size: 0.9rem; font-weight: 600; cursor: pointer; } .card form button[type="submit"]:hover, .card form input[type="submit"]:hover { background: #1f4fb8; border-color: #1f4fb8; } /* ADMIN LEARNERS TABLE – MOBILE STACK -------------------------------------------------- */ .btn-small { padding: 0.25rem 0.6rem; font-size: 0.78rem; } /* On small screens, turn the admin learners table into stacked rows */ @media (max-width: 640px) { .table--admin-learners thead { display: none; } .table--admin-learners tbody tr { display: block; padding: 0.55rem 0; border-bottom: 1px solid var(--simpl-border); } .table--admin-learners tbody tr:last-child { border-bottom: none; } .table--admin-learners td { display: block; border: none; padding: 0.15rem 0; } .table--admin-learners td:nth-child(1) { font-weight: 600; margin-bottom: 0.1rem; } .table--admin-learners td:nth-child(2), .table--admin-learners td:nth-child(3) { font-size: 0.8rem; color: var(--simpl-grey); } .table--admin-learners td:last-child { margin-top: 0.4rem; } .table--admin-learners td:last-child .admin-learner-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; } .table--admin-learners td:last-child .admin-learner-actions .btn { flex: 1 1 48%; justify-content: center; } } /* Highway Code sections -------------------------------------------------- */ .hc-sections { display: flex; flex-direction: column; gap: 0.45rem; } .hc-section { border-radius: 0.55rem; border: 1px solid var(--simpl-border); background: #ffffff; padding: 0.15rem 0.65rem; } .hc-section + .hc-section { margin-top: 0.2rem; } .hc-section > summary { list-style: none; cursor: pointer; font-size: 0.9rem; font-weight: 600; padding: 0.45rem 0.1rem; color: var(--simpl-blue-dark); outline: none; display: flex; align-items: center; gap: 0.35rem; } .hc-section > summary:hover { text-decoration: underline; } .hc-section > summary::-webkit-details-marker { display: none; } .hc-section > summary::before { content: "▸"; font-size: 0.75rem; color: var(--simpl-blue); transform: translateY(-1px); } .hc-section[open] > summary::before { content: "▾"; } .hc-section-body { border-top: 1px solid #e5e7eb; padding: 0.45rem 0 0.55rem; font-size: 0.86rem; color: #4b5563; } .hc-section-body ul { margin: 0.25rem 0 0.35rem; padding-left: 1.2rem; } .hc-note { margin: 0.25rem 0 0; font-size: 0.8rem; color: #6b7280; font-style: italic; } /* Generic pill-style buttons used in admin */ .btn-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 500; border: 1px solid transparent; text-decoration: none; cursor: pointer; } .btn-edit { background: #e5e7eb; color: #111827; border-color: #d1d5db; } .btn-edit:hover { background: #d1d5db; } .btn-danger { background: #2563eb; color: #ffffff; } .btn-danger:hover { opacity: .9; } .form-footer { margin-top: 0.75rem; font-size: 0.85rem; text-align: center; } /* Admin learners list – compact inline actions */ .learners-table .learner-row > td { padding-top: 0.9rem; padding-bottom: 0.9rem; vertical-align: top; } .learner-main { display: flex; flex-direction: column; gap: 0.25rem; } .learner-name-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .learner-name { font-weight: 600; font-size: 0.95rem; } .status-badge--small { font-size: 0.7rem; padding: 0.15rem 0.6rem; } .learner-subline { font-size: 0.8rem; color: #6b7280; display: flex; flex-wrap: wrap; gap: 0.35rem; } .learner-actions-inline { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; } .btn-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 0.25rem 0.9rem; font-size: 0.75rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn-soft { background: #f3f4f6; border-color: #e5e7eb; color: #111827; } .btn-soft:hover { background: #e5e7eb; } .btn-edit { background: #e5e7eb; border-color: #d1d5db; color: #111827; } .btn-edit:hover { background: #d1d5db; } .btn-archive { background: #2563eb; border-color: #1d4ed8; color: #ffffff; } .btn-archive:hover { opacity: 0.9; } .inline-form { display: inline; } /* Improve popup action button visibility */ .leaflet-popup-content a.map-link-btn { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #2563eb; color: #ffffff !important; font-size: 0.85rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(0,0,0,0.1); } .leaflet-popup-content a.map-link-btn:hover { background: #1d4ed8; } /* BADGES & MILESTONES -------------------------------------------------- */ /* Latest badge hero card (shareable preview) */ .latest-badge-card { border-radius: 0.9rem; border: 1px solid #dbeafe; background: radial-gradient(circle at 0% 0%, #eff6ff, transparent 55%), radial-gradient(circle at 100% 100%, #e0f2fe, #ffffff 60%); padding: 0.85rem 0.9rem; margin-bottom: 0.75rem; } .latest-badge-main { display: flex; align-items: center; gap: 0.8rem; } .latest-badge-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .latest-badge-label { margin: 0 0 0.2rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #1d4ed8; } .latest-badge-title { margin: 0; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 0.35rem; } .latest-badge-desc { margin: 0.25rem 0 0.3rem; font-size: 0.85rem; color: #1f2937; } .latest-badge-date { margin: 0; font-size: 0.78rem; color: var(--simpl-grey); } /* Generic badge icon */ .badge-icon { font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; } /* Badge grid */ .badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.4rem; } .badge-card { background: #f9fafb; border-radius: 999px; border: 1px solid #e5e7eb; padding: 0.35rem 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; } .badge-card--new { border-color: var(--simpl-blue-light); box-shadow: 0 0 0 1px rgba(59,130,246,0.3); background: radial-gradient(circle at 10% 0%, #eff6ff, transparent 55%), #f9fafb; } .badge-name { font-weight: 500; } /* Small NEW chip */ .badge-chip { display: inline-flex; align-items: center; justify-content: center; padding: 0.12rem 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; background: #f97316; color: #ffffff; } /* Legacy strip badges (unused now but kept for compatibility) */ .badge-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .badge-pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.55rem; border-radius: 999px; font-size: 0.75rem; border: 1px solid #e5e7eb; background: #f9fafb; } .badge-pill .icon { font-size: 0.9rem; } .badge-pill.earned { border-color: #4ade80; background: #ecfdf5; color: #065f46; } .badge-pill.locked { opacity: .45; } /* TEST READINESS -------------------------------------------------- */ .test-readiness-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; font-size: 0.9rem; } .test-readiness-main { flex: 2; } .test-readiness-tip { flex: 2; font-size: 0.86rem; color: var(--simpl-grey); } .test-readiness-status-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; } .test-readiness-status-pill .pill-dot { width: 0.42rem; height: 0.42rem; border-radius: 999px; } /* Early / not ready */ .test-readiness-status-pill--early, .test-readiness-status-pill--building { background: #fef2f2; border-color: #fecaca; color: #b91c1c; } .test-readiness-status-pill--early .pill-dot, .test-readiness-status-pill--building .pill-dot { background: #ef4444; } /* Getting close */ .test-readiness-status-pill--getting_close { background: #fffbeb; border-color: #facc15; color: #92400e; } .test-readiness-status-pill--getting_close .pill-dot { background: #f59e0b; } /* Ready */ .test-readiness-status-pill--ready { background: #ecfdf5; border-color: #6ee7b7; color: #166534; } .test-readiness-status-pill--ready .pill-dot { background: #22c55e; } .test-readiness-desc { margin: 0.45rem 0 0.3rem; } .test-readiness-progress-line { margin: 0; font-size: 0.85rem; color: var(--simpl-grey); } .test-readiness-progress-line strong { color: #111827; } .test-readiness-note { margin: 0.4rem 0 0; font-size: 0.78rem; color: #9ca3af; font-style: italic; } @media (max-width: 640px) { .test-readiness-inner { flex-direction: column; } } /* Mobile tile style tweaks – sharper edges + soft colours per tile */ @media (max-width: 640px) { .tile { border-radius: 0.35rem; /* sharper vs desktop */ } .tile--lessons { background: #fef3c7; /* warm amber */ border-color: #fde68a; } .tile--calendar{ background:#cef2ff; /* sky blue*/ border-color:#c7d2fe; } .tile--progress { background: #e0f2fe; /* light blue */ border-color: #bae6fd; } .tile--map { background: #dcfce7; /* soft green */ border-color: #bbf7d0; } .tile--highway { background: #fce7f3; /* pink */ border-color: #f9a8d4; } .tile--theory { background: #ede9fe; /* lavender */ border-color: #ddd6fe; } .tile--coming { background: #e5e7eb; /* neutral grey */ border-color: #d1d5db; } } /* Premium-style page header band --------------------------------------------- */ .page-header { position: relative; z-index: 0; margin: 0 0 1.75rem; padding: 0.9rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; border-radius: 0.9rem; border: 1px solid #e3e8ff; background: radial-gradient(circle at top left, rgba(47,123,255,0.10), transparent 60%), radial-gradient(circle at bottom right, rgba(92,200,255,0.06), transparent 65%), #ffffff; box-shadow: 0 14px 30px rgba(15,23,42,0.08); } /* Soft glow behind header */ .page-header::before { content: ""; position: absolute; inset: -18%; border-radius: inherit; background: radial-gradient(circle at 20% 0%, rgba(255,255,255,0.8), transparent 60%), radial-gradient(circle at 80% 100%, rgba(37,99,235,0.25), transparent 70%); opacity: 0.7; z-index: -1; } /* Keep title + meta readable on the lighter gradient */ .page-title { margin: 0 0 0.2rem; font-size: 1.5rem; font-weight: 650; color: #0f172a; } .page-meta { font-size: 0.88rem; color: #4b5563; } /* Next-lesson pill styling in the header --------------------------------------------- */ .next-lesson-strip { margin: 0.25rem 0 0.4rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.7rem; border-radius: 999px; background: #eff6ff; border: 1px solid #dbeafe; font-size: 0.85rem; color: #1e3a8a; } .next-lesson-label { text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.72rem; font-weight: 600; opacity: 0.8; } .next-lesson-value { font-weight: 600; } /* On mobile, let the header breathe but still stack nicely */ @media (max-width: 640px) { .page-header { padding: 0.8rem 0.85rem 0.9rem; border-radius: 0.8rem; } .next-lesson-strip { margin-top: 0.35rem; } } /* Dashboard tile icons (premium minimalist style) -------------------------------------------------- */ .tile .tile-title { display: flex; align-items: center; gap: 0.45rem; } /* Base icon style */ .tile-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; opacity: 0.9; } /* Assign icons per feature */ .tile--lessons .tile-title::before { content: "📘"; font-size: 1.05rem; } .tile--progress .tile-title::before { content: "⭐"; font-size: 1.05rem; } .tile--map .tile-title::before { content: "🗺️"; font-size: 1.05rem; } .tile--highway .tile-title::before { content: "📖"; font-size: 1.05rem; } .tile--calendar .tile-title::before{ content: "📅"; font-size: 1.05rem; } .tile--theory .tile-title::before { content: "🎯"; font-size: 1.05rem; } .tile--coming .tile-title::before { content: "🚧"; font-size: 1.05rem; opacity: 0.6; } /* Slightly larger + softer on mobile */ @media (max-width: 640px) { .tile--lessons .tile-title::before, .tile--progress .tile-title::before, .tile--map .tile-title::before, .tile--highway .tile-title::before, .tile--theory .tile-title::before, .tile--coming .tile-title::before { font-size: 1.15rem; opacity: 0.95; } } /* Premium tile motion / tap feedback -------------------------------------------------- */ /* Slightly refine the transitions for smoother motion */ .tile { transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out, background-color 0.12s ease-out; } /* Hover (desktop / pointer devices) – gentle lift */ .tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 23, 42, 0.14); border-color: #d1d5db; } /* Tap / click feedback – small press effect */ .tile:active { transform: translateY(0) scale(0.98); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10); transition-duration: 0.06s; } /* Disabled tiles stay calm */ .tile-disabled, .tile-disabled:hover, .tile-disabled:active { transform: none; box-shadow: none; } /* On small screens, keep motion a bit softer to avoid jank */ @media (max-width: 640px) { .tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12); } .tile:active { transform: scale(0.985); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10); } } .a2hs-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #111827; color: #f9fafb; padding: .7rem 1rem; box-shadow: 0 -6px 20px rgba(0,0,0,.25); z-index: 9999; } .a2hs-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; gap: .75rem; align-items: center; } .a2hs-text { font-size: .9rem; } .a2hs-actions { display: flex; gap: .5rem; } .btn-primary-sm { padding: .35rem .7rem; border-radius: 999px; border: none; background: linear-gradient(135deg,#1d4ed8,#0ea5e9); color: #fff; font-size: .8rem; cursor: pointer; } .btn-muted-sm { padding: .35rem .7rem; border-radius: 999px; border: 1px solid #374151; background: #1f2937; color: #d1d5db; font-size: .8rem; cursor: pointer; } /* ========================================== Admin top bar – unified rectangular buttons ========================================== */ .card-actions .btn { display: inline-flex; align-items: center; justify-content: center; /* size & shape */ padding: 8px 14px; min-height: 40px; /* same height */ min-width: 140px; /* same width */ border-radius: 12px; /* rectangular with soft corners */ /* typography */ font-size: 14px; font-weight: 500; line-height: 1.2; /* base look (neutral buttons) */ background: #ffffff; color: #111827; border: 1px solid #e5e7eb; text-decoration: none; box-sizing: border-box; gap: 6px; /* space between icon and text */ } /* Primary blue (Add learner) */ .card-actions .btn-primary { background: #2563eb; color: #ffffff; border-color: #1d4ed8; } /* Hover states */ .card-actions .btn-primary:hover { background: #1d4ed8; color: #ffffff; text-decoration: none; } .card-actions .btn:not(.btn-primary):hover { background: #f3f4f6; text-decoration: none; } /* Make the icon nicely aligned */ .card-actions .btn .icon { display: inline-flex; align-items: center; justify-content: center; } /* ---- Calendar status badges ---- */ .status-badge--ok{ display:inline-block; padding:3px 8px; border-radius:999px; background:#e7f5e9; color:#066e2c; font-size:12px; border:1px solid #b7e3c2; } .status-badge--warning{ display:inline-block; padding:3px 8px; border-radius:999px; background:#fff3cd; color:#7a5d00; font-size:12px; border:1px solid #ffe49c; } .status-badge--muted{ display:inline-block; padding:3px 8px; border-radius:999px; background:#f3f4f6; color:#4b5563; font-size:12px; border:1px solid #e5e7eb; } .status-badge--neutral{ display:inline-block; padding:3px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; border:1px solid #c7d2fe; } .lesson-calendar-tag{ margin-left:8px; font-size:11px; opacity:.9; } .status-subtext{ margin-left:4px; opacity:.7; } .lesson-item.cancelled{ opacity:.75; } /* ========================================== Compact rectangular buttons – global override ========================================== */ /* Base button styles (header, admin, learner views) */ .btn, .btn-primary, .btn-outline { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; /* compact rectangular shape */ padding: 0.32rem 0.75rem; border-radius: 4px; border: 1px solid transparent; /* typography */ font-size: 0.82rem; font-weight: 500; line-height: 1.2; /* layout */ gap: 0.35rem; white-space: nowrap; box-sizing: border-box; } /* Neutral button – for generic actions */ .btn { background: #ffffff; color: var(--simpl-grey); border-color: var(--simpl-border); } /* Primary action (logout, key CTAs, admin primary) */ .btn-primary { background: var(--simpl-blue-dark); border-color: var(--simpl-blue-dark); color: #ffffff; } /* Outline buttons in header (Back, Learners, etc.) */ .btn-outline { background: transparent; border-color: rgba(255,255,255,0.6); color: #ffffff; } .btn-outline:hover { background: rgba(255,255,255,0.12); } /* Small variants */ .btn-sm, .btn-small { padding: 0.24rem 0.55rem; font-size: 0.76rem; } /* Full-width button (login screens) keeps width */ .btn-block { width: 100%; justify-content: center; } /* ========================================== Admin "pill" action buttons -> rectangular ========================================== */ /* Treat .btn-pill and .edit-pill as compact rectangular variants */ .btn-pill, .edit-pill { display: inline-flex; align-items: center; justify-content: center; padding: 0.24rem 0.6rem; border-radius: 4px; font-size: 0.78rem; font-weight: 500; border: 1px solid var(--simpl-border); text-decoration: none; cursor: pointer; white-space: nowrap; } /* Soft neutral (view / edit / secondary) */ .btn-soft, .edit-pill, .btn-edit { background: #f9fafb; border-color: var(--simpl-border); color: #111827; } .btn-soft:hover, .edit-pill:hover, .btn-edit:hover { background: #e5e7eb; } /* Strong action (archive / danger) */ .btn-archive, .btn-danger { background: var(--simpl-blue-dark); border-color: #1d4ed8; color: #ffffff; } .btn-archive:hover, .btn-danger:hover { opacity: 0.9; } /* Inline admin actions (learners table) stay compact */ .learner-actions-inline .btn, .learner-actions-inline .btn-pill { padding-inline: 0.6rem; } /* ========================================== Login submit buttons – flatten radius ========================================== */ .card form button[type="submit"], .card form input[type="submit"] { border-radius: 4px; /* was 999px */ font-size: 0.9rem; font-weight: 600; background: var(--simpl-blue-dark); border: 1px solid var(--simpl-blue-dark); color: #ffffff; } /* ========================================== Map popup button – rectangular style ========================================== */ .leaflet-popup-content a.map-link-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.32rem 0.75rem; border-radius: 4px; /* was pill */ background: #2563eb; color: #ffffff !important; font-size: 0.82rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(0,0,0,0.1); white-space: nowrap; } .leaflet-popup-content a.map-link-btn:hover { background: #1d4ed8; } /* ========================================== A2HS banner small buttons – rectangular ========================================== */ .btn-primary-sm, .btn-muted-sm { display: inline-flex; align-items: center; justify-content: center; padding: 0.3rem 0.7rem; border-radius: 4px; /* was 999px */ font-size: 0.8rem; font-weight: 500; cursor: pointer; box-sizing: border-box; } /* keep existing colours, just change shape */ .btn-primary-sm { background: linear-gradient(135deg,#1d4ed8,#0ea5e9); border: none; color: #ffffff; } .btn-muted-sm { background: #1f2937; border: 1px solid #374151; color: #d1d5db; } /* ========================================== Card-actions buttons – align with new system ========================================== */ .card-actions .btn { min-height: 0; /* let content define height */ min-width: 0; /* no forced width */ padding: 0.32rem 0.75rem; border-radius: 4px; /* match global buttons */ font-size: 0.82rem; } /* Primary variant in card actions uses global .btn-primary styles */ .card-actions .btn-primary { background: var(--simpl-blue-dark); border-color: var(--simpl-blue-dark); color: #ffffff; } /* Mobile: make "All learners" action buttons equal width */ @media (max-width: 640px) { .card-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.35rem; /* space between buttons */ width: 100%; } .card-actions .btn { width: 100%; /* all same width */ justify-content: flex-start;/* or flex-start if you prefer left-aligned text */ } } /* ========================================== Admin learners – accordion list view ========================================== */ .learner-list { display: flex; flex-direction: column; gap: 0.5rem; } .learner-item { background: #ffffff; border-radius: 0.6rem; border: 1px solid var(--simpl-border); overflow: hidden; transition: box-shadow 0.12s ease-out, border-color 0.12s ease-out; } .learner-item--open { box-shadow: 0 10px 24px rgba(15,23,42,0.10); border-color: #d1d5db; } .learner-header { width: 100%; padding: 0.6rem 0.75rem; background: transparent; border: none; outline: none; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; cursor: pointer; } .learner-header:hover { background: #f9fafb; } .learner-header-main { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; } .learner-header-name { font-weight: 600; font-size: 0.95rem; } .learner-header-icon { font-size: 0.8rem; color: #9ca3af; transition: transform 0.15s ease-out; } .learner-item--open .learner-header-icon { transform: rotate(180deg); } .learner-body { padding: 0.45rem 0.75rem 0.65rem; border-top: 1px solid #e5e7eb; background: #f9fafb; } .learner-body-meta { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.4rem; } .learner-email { word-break: break-all; } /* Reuse your existing inline actions style but keep it compact */ .learner-actions-inline { display: flex; flex-wrap: wrap; gap: 0.35rem; } /* On small screens, stack the buttons neatly */ @media (max-width: 640px) { .learner-actions-inline { flex-direction: column; align-items: stretch; } .learner-actions-inline .btn-pill { width: 100%; justify-content: center; } } .learner-item--open .learner-header { background: #f8fafc; } .learner-item--open .learner-header-icon { transform: rotate(180deg); } .learner-header-icon { transition: transform 0.2s ease; } .meta-chip.green{ border-color:#16a34a; color:#166534; background:#dcfce7; } .meta-chip.amber{ border-color:#f59e0b; color:#92400e; background:#fef3c7; } .meta-chip.red{ border-color:#ef4444; color:#991b1b; background:#fee2e2; } } .credit-badge{ display: inline-block; width: fit-content; margin-top: 6px; padding: 4px 10px; font-size: 0.85rem; font-weight: 700; border-radius: 6px; /* sharp-ish, not pill */ } .credit-green{ background: #ecfdf5; color: #065f46; border: 1px solid #10b981; } .credit-amber{ background: #fffbeb; color: #92400e; border: 1px solid #f59e0b; } .credit-red{ background: #fef2f2; color: #991b1b; border: 1px solid #ef4444; } .credit-grey{ background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; } .credit-badge{ display: inline-block; width: fit-content; margin-top: 6px; padding: 4px 10px; font-size: 0.85rem; font-weight: 700; border-radius: 6px; } .credit-green{ background: #ecfdf5; color: #065f46; border: 1px solid #10b981; } .credit-amber{ background: #fffbeb; color: #92400e; border: 1px solid #f59e0b; } .credit-red{ background: #fef2f2; color: #991b1b; border: 1px solid #ef4444; } .credit-grey{ background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; } .dashboard-card{ display:flex; gap:16px; padding:20px; background:#ffffff; border-radius:16px; text-decoration:none; color:#111827; box-shadow:0 10px 30px rgba(0,0,0,0.05); transition:0.15s ease; } .dashboard-card:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,0.08); } .card-icon{ width:40px; height:40px; border-radius:12px; background:#e0f2fe; display:flex; align-items:center; justify-content:center; font-size:20px; } .card-body h3{ margin:0; font-size:1rem; font-weight:700; } .card-body p{ margin:6px 0 12px; font-size:0.85rem; color:#6b7280; } .card-chip{ font-size:0.7rem; padding:4px 10px; border-radius:999px; background:#e0f2fe; color:#0369a1; font-weight:600; } .card-header-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .card-header-actions{ display:flex; gap:8px; flex-wrap:wrap; } /* Make sure nothing crops the table on mobile */ .card-body{ overflow-x: auto; /* allows safe horizontal scroll if needed */ -webkit-overflow-scrolling: touch; } /* Table sizing */ .admin-table{ width: 100%; max-width: 100%; table-layout: fixed; /* IMPORTANT: stop weird squeezing */ } /* Keep the Credits column a sensible width */ .admin-table th:nth-child(2), .admin-table td:nth-child(2){ width: 120px; /* adjust if you want tighter/wider */ } /* Let learner column use remaining space */ .admin-table th:nth-child(1), .admin-table td:nth-child(1){ width: auto; } /* Chips: slightly tighter so they fit cleanly */ .chip{ padding: 5px 8px; font-size: 0.78rem; } /* Mobile tightening */ @media (max-width: 820px){ .admin-table th, .admin-table td{ padding: 10px 10px; } .chip{ padding: 5px 7px; font-size: 0.74rem; } } .card-body{ overflow-x:auto; -webkit-overflow-scrolling: touch; } .admin-table{ width:100%; max-width:100%; table-layout: fixed; } .admin-table th:nth-child(2), .admin-table td:nth-child(2){ width:120px; } .admin-table td{ position: relative; } .name-link{ position: relative; z-index: 5; display: inline-block; pointer-events: auto; } /* Clickable rows */ .clickable-row{ cursor: pointer; } .clickable-row:hover td{ background: #f8fbff; } /* Mobile: hide “My learners” divider */ @media (max-width: 820px){ .section-divider-my{ display:none; } /* Mobile: show only New lesson summary in the tools card */ .admin-tools .tool-secondary{ display:none !important; } } .next-lesson{ font-size: 0.8rem; font-weight: 600; color: #64748b; margin-left: 6px; white-space: nowrap; } .next-lesson.soon{ color:#16a34a; } .next-lesson.overdue{ color:#dc2626; } /* Make learner cell behave like a layout */ .learner-cell{ display:flex; flex-direction:column; gap:6px; } /* Row 1: name + credits aligned */ .row-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; } /* Row 2: next lesson + test aligned */ .row-bottom{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap; } /* Prevent ugly wraps */ .row-bottom .chip{ max-width: 48%; overflow:hidden; text-overflow:ellipsis; } /* Long names: keep neat */ .name{ font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 70%; } /* ------------------------------------------------------- Tile variant: Show Me, Tell Me Distinct look but still matches SimpL+ style ------------------------------------------------------- */ .tile--showmetellme{ position: relative; border: 1px solid rgba(47,123,255,0.22); background: radial-gradient(1200px 420px at 10% 0%, rgba(47,123,255,0.14), transparent 55%), radial-gradient(900px 380px at 100% 100%, rgba(224,36,36,0.10), transparent 60%), linear-gradient(180deg, #ffffff, #fbfdff); overflow: hidden; } .tile--showmetellme::before{ content:""; position:absolute; left:0; top:0; bottom:0; width: 6px; background: linear-gradient(180deg, var(--simpl-blue), var(--simpl-accent)); opacity: 0.95; } .tile--showmetellme .tile-title{ font-weight: 800; letter-spacing: -0.2px; } .tile--showmetellme .tile-badge{ border: 1px solid rgba(47,123,255,0.30); background: rgba(47,123,255,0.10); color: #1d4ed8; } .tile--showmetellme:hover{ transform: translateY(-2px); border-color: rgba(47,123,255,0.35); box-shadow: 0 10px 24px rgba(17,24,39,0.08); } /* Keyboard focus */ .tile--showmetellme:focus-visible{ outline: 3px solid rgba(47,123,255,0.35); outline-offset: 3px; } /* --- Admin "app row" --- */ .admin-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #ffffff; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06); border: 1px solid rgba(15, 23, 42, 0.06); margin: 10px 0; } .admin-avatar { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; background: linear-gradient(135deg, #2563eb, #22d3ee); flex: 0 0 40px; } .admin-main { min-width: 0; flex: 1 1 auto; } .admin-name { font-size: 16px; font-weight: 700; color: #0f172a; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-sub { margin-top: 3px; font-size: 13px; color: #475569; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .credit-badge { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.08); background: #f8fafc; color: #0f172a; } .credit-good { background: rgba(16, 185, 129, 0.12); color: #065f46; border-color: rgba(16, 185, 129, 0.25); } .credit-warn { background: rgba(245, 158, 11, 0.14); color: #92400e; border-color: rgba(245, 158, 11, 0.25); } .credit-bad { background: rgba(239, 68, 68, 0.12); color: #991b1b; border-color: rgba(239, 68, 68, 0.25); } .sub-good { color: #059669; } .sub-warn { color: #d97706; } .sub-bad { color: #dc2626; } .sub-muted{ color: #64748b; } .fab-plus { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; text-decoration: none; background: #2563eb; color: #fff; font-size: 22px; font-weight: 800; box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25); border: 1px solid rgba(255,255,255,0.25); } .fab-plus:active { transform: scale(0.98); } @media (max-width: 420px) { .credit-badge { padding: 6px 8px; } .admin-row { padding: 12px 12px; } } .dashboard-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; } @media (min-width: 900px){ .dashboard-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tile{ aspect-ratio: 1 / 1; /* keeps it square-ish */ border-radius: 18px; background: #fff; border: 1px solid rgba(15,23,42,.06); box-shadow: 0 6px 18px rgba(15,23,42,.06); padding: 14px; display:flex; flex-direction:column; justify-content:space-between; text-decoration:none !important; color:#0f172a !important; transition: transform 180ms ease, box-shadow 180ms ease; } @media (hover:hover) and (pointer:fine){ .tile:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15,23,42,.10); } } .tile:active{ transform: scale(0.99); } .tile-icon{ width: 46px; height: 46px; border-radius: 16px; display:grid; place-items:center; background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(34,211,238,.14)); border: 1px solid rgba(37,99,235,.15); } .tile-icon svg{ width: 26px; height: 26px; display:block; } .tile-title{ margin-top: 10px; font-weight: 900; font-size: 1.0rem; line-height: 1.1; } .tile-sub{ margin-top: 4px; color:#64748b; font-size: 0.82rem; font-weight: 700; } @media (prefers-reduced-motion: reduce){ .tile{ transition:none !important; } }