/* ========================= Base theme variables Fixes: CSS previously started mid-rule + muted text used accent yellow. ========================= */ :root{ --bg:#ffffff; --fg:#111827; --muted:#6b7280; /* neutral muted text */ --accent:#f5c400; /* accent/highlight */ --gold:#d4af37; --gold2:#b88a12; --card:#f9fafb; --border:#e5e7eb; } /* ---- Themes (set on ) ---- */ html[data-theme="white-gold"]{ --bg:#ffffff; --fg:#111827; --muted:#6b7280; --accent:#f5c400; --card:#ffffff; --border:#e5e7eb; --brand:#c7a500; --brand-2:#111827; --pill-bg:#f3f4f6; --pill-fg:#111827; } html[data-theme="dark"],html[data-theme="Dark"]{ --bg:#0b0c0f; --fg:#f4f6fb; --muted:#a3aab8; --accent:#ffd400; --card:#13151a; --border:#232633; --brand:#ffd400; --brand-2:#0b0c0f; --pill-bg:#1b1d25; --pill-fg:#f4f6fb; } html[data-theme="ocean"]{ --bg:#f8fafc; --fg:#0f172a; --muted:#475569; --accent:#0ea5e9; --card:#ffffff; --border:#e2e8f0; --brand:#0ea5e9; --brand-2:#0f172a; --pill-bg:#e0f2fe; --pill-fg:#0f172a; } html[data-theme="forest"]{ --bg:#fbfdfb; --fg:#0f172a; --muted:#475569; --accent:#16a34a; --card:#ffffff; --border:#e2e8f0; --brand:#16a34a; --brand-2:#0f172a; --pill-bg:#dcfce7; --pill-fg:#0f172a; } *{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} a{color:inherit;text-decoration:none} .container{max-width:1100px;margin:0 auto;padding:20px} /* Header / Nav */ .nav{ border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:10; } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 20px; flex-wrap:wrap; /* lets the collapsed links sit below on mobile */ } .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; } /* Fallback logo (no uploaded image) */ .logo{ width:34px; height:34px; border-radius:10px; /* Match the active theme accent when available */ background:linear-gradient(135deg,var(--brand, var(--gold)),#fff); border:1px solid var(--border); } /* Uploaded logo (responsive, borderless) */ .brand-logo{ height:52px; width:auto; max-width:200px; object-fit:contain; border:none; background:transparent; border-radius:0; display:block; flex:0 0 auto; } .nav-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .pill{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--pill-bg);color:var(--pill-fg)} .pill:hover{border-color:var(--brand, var(--gold))} .btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--brand, var(--gold));background:var(--brand, var(--gold));color:var(--brand-2, #111);font-weight:700} .btn:hover{background:var(--gold2);border-color:var(--gold2)} /* Locked / Pro-only buttons */ .btn-locked{background:var(--pill-bg);border-color:var(--border);color:var(--muted);} .btn-locked:hover{background:var(--pill-bg);border-color:var(--border);} .lock-icon{margin-right:8px;} .btn.locked{opacity:.55;cursor:not-allowed;pointer-events:none;filter:grayscale(1);} .btn.secondary.locked{opacity:.55;cursor:not-allowed;pointer-events:none;filter:grayscale(1);} /* Use the active theme accent for hover where supported */ @supports (color: color-mix(in srgb, #000 50%, #fff)){ .btn:hover{ background:color-mix(in srgb, var(--brand, var(--gold)) 86%, #000); border-color:color-mix(in srgb, var(--brand, var(--gold)) 86%, #000); } } .btn-ghost{background:var(--pill-bg);border-color:var(--border);color:var(--pill-fg)} .btn-ghost:hover{border-color:var(--brand, var(--gold))} .card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px} .grid{display:grid;gap:14px} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} /* Keep header in one row (logo left, hamburger right) */ .nav-inner{align-items:center;flex-direction:row} } h1{font-size:30px;margin:0 0 12px} h2{font-size:20px;margin:0 0 8px} small, .muted{color:var(--muted)} input,textarea,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--fg);} label{font-weight:600;display:block;margin:10px 0 6px} hr{border:none;border-top:1px solid var(--border);margin:16px 0} .banner{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;border-radius:14px;padding:12px} .badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#fff} .badge.gold{border-color:var(--gold);background:rgba(212,175,55,.12)} /* --- Certificates print styles --- */ .certificate-print h2{margin-top:18px} .certificate-print .kv{display:grid;grid-template-columns:160px 1fr;gap:8px 14px} .certificate-print .kv div{padding:2px 0} .certificate-print table{width:100%;border-collapse:collapse} .certificate-print th,.certificate-print td{border:1px solid rgba(0,0,0,.12);padding:6px;vertical-align:top} @media print{ .nav,.footer,.hero,.btn,.pill,form{display:none!important} body{background:#fff} .container{max-width:none;padding:0} .card{box-shadow:none;border:0} } .table{width:100%;border-collapse:collapse} .table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top} .kpi{font-size:32px;font-weight:900} .footer{padding:30px 0;color:var(--muted)} .hero{margin:8px 0 14px} .row{display:flex;align-items:center} .row.head{font-weight:800;color:var(--muted)} .row > div{flex:1} .grid.two{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:900px){.grid.two{grid-template-columns:1fr 1fr}} .alert{border:1px solid rgba(184,138,18,0.35);background:rgba(212,175,55,0.12);padding:12px;border-radius:12px} .pre{white-space:pre-wrap;background:rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.06);padding:12px;border-radius:12px} .list{margin:0;padding-left:18px} .list li{margin:10px 0} .timer{margin-top:10px;padding:14px;border-radius:14px;border:1px solid var(--border);background:#fff} .timerValue{font-size:44px;font-weight:900;letter-spacing:1px} .note{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff} .label{font-weight:600;display:block;margin:10px 0 6px} .stepBox{margin-top:12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:#fff} /* Business tools helpers */ .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; } .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; } .row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .table{ width:100%; border-collapse: collapse; } .table th, .table td{ border-bottom:1px solid rgba(0,0,0,.08); padding:10px 8px; vertical-align:top; } .table input, .table select{ width:100%; } .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; } .form-grid .span-2{ grid-column: span 2; } .totals{ text-align:right; } .print .noprint{ display:inline-block; } @media print{ header, nav, .noprint, .btn, .footer { display:none !important; } .container{ max-width: none; } .card{ box-shadow:none !important; border:1px solid #ddd; } } /* Mobile navigation */ .nav-toggle{display:none;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--pill-bg);color:var(--pill-fg);border-radius:12px;padding:10px 12px;font-weight:700} .nav-toggle:active{transform:scale(.98)} .nav-toggle .bars{display:inline-block;width:18px;height:12px;position:relative} .nav-toggle .bars:before,.nav-toggle .bars:after,.nav-toggle .bars span{content:"";position:absolute;left:0;right:0;height:2px;background:var(--fg);border-radius:2px} .nav-toggle .bars span{top:5px} .nav-toggle .bars:before{top:0} .nav-toggle .bars:after{bottom:0} /* Better touch targets */ .pill{padding:10px 14px} .btn{padding:12px 16px} /* Admin */ .admin-toolbar{display:flex;flex-wrap:wrap;gap:8px} /* Responsive helpers */ .desktop-only{display:block} .mobile-only{display:none} @media(max-width:700px){ .desktop-only{display:none} .mobile-only{display:block} } /* Quiz answer choices */ .choice{ display:flex; gap:10px; align-items:center; margin:10px 0; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg); font-weight:600; } .choice input{width:auto} .choice:hover{border-color:var(--brand, var(--gold))} /* Mobile improvements */ @media (max-width: 820px){ .nav-inner{align-items:center} .brand{order:1} .nav-toggle{display:inline-flex;order:2;margin-left:auto} .nav-links{order:3;display:none;flex-direction:column;gap:8px;align-items:flex-start;width:100%;padding-top:10px} body.nav-open .nav-links{display:flex} .nav-links .pill{width:100%;justify-content:flex-start} .brand{gap:10px} .brand-logo{height:38px;max-width:160px} } /* Horizontal scrolling chips (fallback) */ @media (max-width: 820px){ .nav-links.is-scroll{display:flex;flex-direction:row;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} .nav-links.is-scroll .pill{width:auto} } /* Tables: make scrollable on small screens (opt-in via wrapper) */ @media (max-width: 700px){ .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px} .table-responsive table{min-width:640px} .table-responsive th,.table-responsive td{white-space:nowrap} } /* Admin tables: convert to stacked cards on mobile */ @media (max-width: 700px){ table.admin-table{min-width:unset!important;width:100%} table.admin-table thead{display:none} table.admin-table tbody,table.admin-table tr,table.admin-table td{display:block;width:100%} table.admin-table tr{background:var(--card);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:12px;margin:0 0 12px 0} table.admin-table td{padding:8px 0;border:none} table.admin-table td[data-label]{display:flex;gap:12px;align-items:flex-start;justify-content:space-between} table.admin-table td[data-label]:before{content:attr(data-label);font-weight:700;color:rgba(0,0,0,.65);flex:0 0 44%} table.admin-table td[data-label] > *{flex:1} table.admin-table input,table.admin-table select,table.admin-table textarea{width:100%} table.admin-table .btn{width:100%} } /* Admin toolbar: horizontal scroll on mobile */ @media (max-width: 820px){ .admin-toolbar{display:flex;gap:10px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:6px} .admin-toolbar .btn,.admin-toolbar .pill{white-space:nowrap} } /* Forms: stack nicely */ @media (max-width: 700px){ .row,.grid-2,.grid-3{grid-template-columns:1fr!important} label{font-size:14px} input,select,textarea{font-size:16px} /* avoid iOS zoom */ } /* Small phones */ @media (max-width: 600px){ .container{padding:14px} h1{font-size:24px} h2{font-size:18px} .card{padding:14px} } /* Flashcards */ .progress{ background:#eee; border-radius:999px; overflow:hidden; height:12px; } .progress-bar{ height:12px; background:linear-gradient(90deg,#caa64b,#f3d27a); width:0; } .flashcard{ perspective:1200px; cursor:pointer; user-select:none; } .flashcard-inner{ position:relative; width:100%; min-height:220px; transform-style:preserve-3d; transition:transform .35s ease; } .flashcard.flipped .flashcard-inner{ transform:rotateY(180deg); } .flashcard-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; padding:18px; border:1px solid #eee; background:#fff; display:flex; flex-direction:column; justify-content:center; } .flashcard-back{ transform:rotateY(180deg); } @media (max-width: 600px){ .flashcard-inner{ min-height:260px; } } /* Accordions (collapsible sections) */ details.accordion{ margin:14px 0; } details.accordion > summary{ list-style:none; cursor:pointer; user-select:none; padding:14px 16px; border:1px solid #eee; background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06); } details.accordion > summary::-webkit-details-marker{ display:none; } details.accordion > summary::after{ content:'▸'; float:right; font-size:18px; line-height:1; margin-left:12px; opacity:.7; transform:translateY(1px); } details.accordion[open] > summary::after{ content:'▾'; } .accordion-summary{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .accordion-title{ font-size:18px; font-weight:800; } .accordion-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .accordion-body{ padding:12px 2px 0; } .accordion-body .card{ box-shadow:0 10px 30px rgba(0,0,0,.06); } /* Small-screen spacing & typography */ @media (max-width: 600px){ .container{padding:14px} h1{font-size:24px} h2{font-size:18px} .card{padding:14px} .nav-inner{padding:12px 14px} .btn{width:100%;text-align:center} } /* --- Fix low-contrast "table rows" on dark theme --- */ html[data-theme="dark"] .table, html[data-theme="dark"] .table-row, html[data-theme="dark"] .list-row, html[data-theme="dark"] .row, html[data-theme="dark"] .item, html[data-theme="dark"] .quiz-row, html[data-theme="dark"] .mock-row { background: var(--surface) !important; color: var(--fg) !important; border: 1px solid var(--border) !important; } /* Any text inside those rows should NOT be muted by default */ html[data-theme="dark"] .table *, html[data-theme="dark"] .table-row *, html[data-theme="dark"] .list-row *, html[data-theme="dark"] .row *, html[data-theme="dark"] .item *, html[data-theme="dark"] .quiz-row *, html[data-theme="dark"] .mock-row * { color: inherit; opacity: 1; } /* If you have a muted helper text line, keep it muted intentionally */ html[data-theme="dark"] .muted, html[data-theme="dark"] .subtext, html[data-theme="dark"] .helptext { color: var(--muted) !important; } /* Row hover for clarity (sleek + helps scanning) */ html[data-theme="dark"] .table-row:hover, html[data-theme="dark"] .list-row:hover, html[data-theme="dark"] .row:hover, html[data-theme="dark"] .item:hover, html[data-theme="dark"] .quiz-row:hover, html[data-theme="dark"] .mock-row:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.35); } html[data-theme="dark"] table { width: 100%; border-collapse: separate; border-spacing: 0 10px; } html[data-theme="dark"] table tr { background: var(--surface); } html[data-theme="dark"] table td, html[data-theme="dark"] table th { color: var(--fg); padding: 14px 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } html[data-theme="dark"] table tr td:first-child, html[data-theme="dark"] table tr th:first-child { border-left: 1px solid var(--border); border-top-left-radius: 12px; border-bottom-left-radius: 12px; } html[data-theme="dark"] table tr td:last-child, html[data-theme="dark"] table tr th:last-child { border-right: 1px solid var(--border); border-top-right-radius: 12px; border-bottom-right-radius: 12px; } input::placeholder,textarea::placeholder{color:var(--muted)} .card.hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.35)} :focus-visible{outline:2px solid var(--brand);outline-offset:2px} give me the overwrite zip it has damaged my zite can you help me edit the tabel that Welcome Offer: User Code MOB30 to get lifetime membership for £30. Limited spaces available* message sits in so it fits in with my theme better? :root{ --bg:#ffffff; --fg:#111827; --muted:#6b7280; --gold:#d4af37; --gold2:#b88a12; --card:#f9fafb; --border:#e5e7eb; } /* ---- Themes (set on ) ---- */ html[data-theme="white-gold"]{ --bg:#ffffff; --fg:#111827; --muted:#6b7280; --card:#ffffff; --border:#e5e7eb; --brand:#c7a500; --brand-2:#111827; --pill-bg:#f3f4f6; --pill-fg:#111827; } html[data-theme="dark"],html[data-theme="Dark"]{ --bg:#0b0c0f; --fg:#f4f6fb; --muted:#a1a6b3; --card:#13151a; --border:#232633; --brand:#ffd400; /* iZapp yellow */ --brand-2:#0b0c0f; /* text on yellow */ --pill-bg:#2a250e; --pill-fg:#ffe58a; } html[data-theme="ocean"]{ --bg:#f8fafc; --fg:#0f172a; --muted:#475569; --card:#ffffff; --border:#e2e8f0; --brand:#0ea5e9; --brand-2:#0f172a; --pill-bg:#e0f2fe; --pill-fg:#0f172a; } html[data-theme="forest"]{ --bg:#fbfdfb; --fg:#0f172a; --muted:#475569; --card:#ffffff; --border:#e2e8f0; --brand:#16a34a; --brand-2:#0f172a; --pill-bg:#dcfce7; --pill-fg:#0f172a; } *{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--fg);overflow-x:hidden} a{color:inherit;text-decoration:none} .container{max-width:1100px;margin:0 auto;padding:20px} /* Header / Nav */ .nav{ border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:10; } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 20px; flex-wrap:wrap; /* lets the collapsed links sit below on mobile */ } .brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; } /* Fallback logo (no uploaded image) */ .logo{ width:34px; height:34px; border-radius:10px; /* Match the active theme accent when available */ background:linear-gradient(135deg,var(--brand, var(--gold)),#fff); border:1px solid var(--border); } /* Uploaded logo (responsive, borderless) */ .brand-logo{ height:52px; width:auto; max-width:200px; object-fit:contain; border:none; background:transparent; border-radius:0; display:block; flex:0 0 auto; } .nav-links{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .pill{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:var(--pill-bg);color:var(--pill-fg)} .pill:hover{border-color:var(--brand, var(--gold))} .btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--brand, var(--gold));background:var(--brand, var(--gold));color:var(--brand-2, #111);font-weight:700} .btn:hover{background:var(--gold2);border-color:var(--gold2)} /* Use the active theme accent for hover where supported */ @supports (color: color-mix(in srgb, #000 50%, #fff)){ .btn:hover{ background:color-mix(in srgb, var(--brand, var(--gold)) 86%, #000); border-color:color-mix(in srgb, var(--brand, var(--gold)) 86%, #000); } } .btn-ghost{background:var(--pill-bg);border-color:var(--border);color:var(--pill-fg)} .btn-ghost:hover{border-color:var(--brand, var(--gold))} .card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px} .grid{display:grid;gap:14px} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:900px){ .grid-2,.grid-3{grid-template-columns:1fr} /* Keep header in one row (logo left, hamburger right) */ .nav-inner{align-items:center;flex-direction:row} } h1{font-size:30px;margin:0 0 12px} h2{font-size:20px;margin:0 0 8px} small, .muted{color:var(--muted)} input,textarea,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--fg);} label{font-weight:600;display:block;margin:10px 0 6px} hr{border:none;border-top:1px solid var(--border);margin:16px 0} .banner{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;border-radius:14px;padding:12px} .badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid var(--border);background:#fff} .badge.gold{border-color:var(--gold);background:rgba(212,175,55,.12)} /* --- Certificates print styles --- */ .certificate-print h2{margin-top:18px} .certificate-print .kv{display:grid;grid-template-columns:160px 1fr;gap:8px 14px} .certificate-print .kv div{padding:2px 0} .certificate-print table{width:100%;border-collapse:collapse} .certificate-print th,.certificate-print td{border:1px solid rgba(0,0,0,.12);padding:6px;vertical-align:top} @media print{ .nav,.footer,.hero,.btn,.pill,form{display:none!important} body{background:#fff} .container{max-width:none;padding:0} .card{box-shadow:none;border:0} } .table{width:100%;border-collapse:collapse} .table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top} .kpi{font-size:32px;font-weight:900} .footer{padding:30px 0;color:var(--muted)} .hero{margin:8px 0 14px} .row{display:flex;align-items:center} .row.head{font-weight:800;color:var(--muted)} .row > div{flex:1} .grid.two{display:grid;grid-template-columns:1fr;gap:16px} @media(min-width:900px){.grid.two{grid-template-columns:1fr 1fr}} .alert{border:1px solid rgba(184,138,18,0.35);background:rgba(212,175,55,0.12);padding:12px;border-radius:12px} .pre{white-space:pre-wrap;background:rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.06);padding:12px;border-radius:12px} .list{margin:0;padding-left:18px} .list li{margin:10px 0} .timer{margin-top:10px;padding:14px;border-radius:14px;border:1px solid var(--border);background:#fff} .timerValue{font-size:44px;font-weight:900;letter-spacing:1px} .note{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:14px;background:#fff} .label{font-weight:600;display:block;margin:10px 0 6px} .stepBox{margin-top:12px;padding:14px;border:1px solid var(--border);border-radius:14px;background:#fff} /* Business tools helpers */ .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:16px; } .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; } .row-between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .table{ width:100%; border-collapse: collapse; } .table th, .table td{ border-bottom:1px solid rgba(0,0,0,.08); padding:10px 8px; vertical-align:top; } .table input, .table select{ width:100%; } .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; } .form-grid .span-2{ grid-column: span 2; } .totals{ text-align:right; } .print .noprint{ display:inline-block; } @media print{ header, nav, .noprint, .btn, .footer { display:none !important; } .container{ max-width: none; } .card{ box-shadow:none !important; border:1px solid #ddd; } } /* Mobile navigation */ .nav-toggle{display:none;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--pill-bg);color:var(--pill-fg);border-radius:12px;padding:10px 12px;font-weight:700} .nav-toggle:active{transform:scale(.98)} .nav-toggle .bars{display:inline-block;width:18px;height:12px;position:relative} .nav-toggle .bars:before,.nav-toggle .bars:after,.nav-toggle .bars span{content:"";position:absolute;left:0;right:0;height:2px;background:var(--fg);border-radius:2px} .nav-toggle .bars span{top:5px} .nav-toggle .bars:before{top:0} .nav-toggle .bars:after{bottom:0} /* Better touch targets */ .pill{padding:10px 14px} .btn{padding:12px 16px} /* Admin */ .admin-toolbar{display:flex;flex-wrap:wrap;gap:8px} /* Responsive helpers */ .desktop-only{display:block} .mobile-only{display:none} @media(max-width:700px){ .desktop-only{display:none} .mobile-only{display:block} } /* Quiz answer choices */ .choice{ display:flex; gap:10px; align-items:center; margin:10px 0; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg); font-weight:600; } .choice input{width:auto} .choice:hover{border-color:var(--brand, var(--gold))} /* Mobile improvements */ @media (max-width: 820px){ .nav-inner{align-items:center} .brand{order:1} .nav-toggle{display:inline-flex;order:2;margin-left:auto} .nav-links{order:3;display:none;flex-direction:column;gap:8px;align-items:flex-start;width:100%;padding-top:10px} body.nav-open .nav-links{display:flex} .nav-links .pill{width:100%;justify-content:flex-start} .brand{gap:10px} .brand-logo{height:38px;max-width:160px} } /* Horizontal scrolling chips (fallback) */ @media (max-width: 820px){ .nav-links.is-scroll{display:flex;flex-direction:row;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch} .nav-links.is-scroll .pill{width:auto} } /* Tables: make scrollable on small screens (opt-in via wrapper) */ @media (max-width: 700px){ .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px} .table-responsive table{min-width:640px} .table-responsive th,.table-responsive td{white-space:nowrap} } /* Admin tables: convert to stacked cards on mobile */ @media (max-width: 700px){ table.admin-table{min-width:unset!important;width:100%} table.admin-table thead{display:none} table.admin-table tbody,table.admin-table tr,table.admin-table td{display:block;width:100%} table.admin-table tr{background:var(--card);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:12px;margin:0 0 12px 0} table.admin-table td{padding:8px 0;border:none} table.admin-table td[data-label]{display:flex;gap:12px;align-items:flex-start;justify-content:space-between} table.admin-table td[data-label]:before{content:attr(data-label);font-weight:700;color:rgba(0,0,0,.65);flex:0 0 44%} table.admin-table td[data-label] > *{flex:1} table.admin-table input,table.admin-table select,table.admin-table textarea{width:100%} table.admin-table .btn{width:100%} } /* Admin toolbar: horizontal scroll on mobile */ @media (max-width: 820px){ .admin-toolbar{display:flex;gap:10px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:6px} .admin-toolbar .btn,.admin-toolbar .pill{white-space:nowrap} } /* Forms: stack nicely */ @media (max-width: 700px){ .row,.grid-2,.grid-3{grid-template-columns:1fr!important} label{font-size:14px} input,select,textarea{font-size:16px} /* avoid iOS zoom */ } /* Small phones */ @media (max-width: 600px){ .container{padding:14px} h1{font-size:24px} h2{font-size:18px} .card{padding:14px} } /* Flashcards */ .progress{ background:#eee; border-radius:999px; overflow:hidden; height:12px; } .progress-bar{ height:12px; background:linear-gradient(90deg,#caa64b,#f3d27a); width:0; } .flashcard{ perspective:1200px; cursor:pointer; user-select:none; } .flashcard-inner{ position:relative; width:100%; min-height:220px; transform-style:preserve-3d; transition:transform .35s ease; } .flashcard.flipped .flashcard-inner{ transform:rotateY(180deg); } .flashcard-face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; padding:18px; border:1px solid #eee; background:#fff; display:flex; flex-direction:column; justify-content:center; } .flashcard-back{ transform:rotateY(180deg); } @media (max-width: 600px){ .flashcard-inner{ min-height:260px; } } /* Accordions (collapsible sections) */ details.accordion{ margin:14px 0; } details.accordion > summary{ list-style:none; cursor:pointer; user-select:none; padding:14px 16px; border:1px solid #eee; background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.06); } details.accordion > summary::-webkit-details-marker{ display:none; } details.accordion > summary::after{ content:'▸'; float:right; font-size:18px; line-height:1; margin-left:12px; opacity:.7; transform:translateY(1px); } details.accordion[open] > summary::after{ content:'▾'; } .accordion-summary{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .accordion-title{ font-size:18px; font-weight:800; } .accordion-meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .accordion-body{ padding:12px 2px 0; } .accordion-body .card{ box-shadow:0 10px 30px rgba(0,0,0,.06); } /* Small-screen spacing & typography */ @media (max-width: 600px){ .container{padding:14px} h1{font-size:24px} h2{font-size:18px} .card{padding:14px} .nav-inner{padding:12px 14px} .btn{width:100%;text-align:center} } input::placeholder,textarea::placeholder{color:var(--muted)} .card.hover:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.35)} :focus-visible{outline:2px solid var(--brand);outline-offset:2px} /* ========================= Dark mode readability fixes (keeps your existing layout intact) ========================= */ /* Stop dark mode pages from showing white slabs */ html[data-theme="dark"] .badge, html[data-theme="dark"] .timer, html[data-theme="dark"] .note, html[data-theme="dark"] .stepBox, html[data-theme="dark"] .flashcard-face, html[data-theme="dark"] details.accordion > summary, html[data-theme="dark"] table.admin-table tr{ background: var(--card) !important; color: var(--fg) !important; border-color: var(--border) !important; } /* Dark-mode accordion / flashcard borders should not be light grey */ html[data-theme="dark"] .flashcard-face, html[data-theme="dark"] details.accordion > summary{ border: 1px solid var(--border) !important; box-shadow: 0 12px 34px rgba(0,0,0,.35) !important; } /* Fix tables using rgba(0,0,0,.08) borders (invisible on dark) */ html[data-theme="dark"] .table th, html[data-theme="dark"] .table td{ border-bottom: 1px solid var(--border) !important; color: var(--fg) !important; } /* If any text is unintentionally washed out inside white/old components */ html[data-theme="dark"] .card, html[data-theme="dark"] .table, html[data-theme="dark"] .timer, html[data-theme="dark"] .note, html[data-theme="dark"] .stepBox{ color: var(--fg) !important; } /* Links: keep readable but on-brand */ html[data-theme="dark"] a:hover{ opacity:.85; } /* --- Pricing page improvements --- */ .pricing-table{border:1px solid var(--border);border-radius:14px;overflow:hidden} .pricing-table thead th{position:sticky;top:0;background:var(--card);z-index:2} .pricing-table td,.pricing-table th{padding:12px 10px} .pricing-table td:nth-child(n+2),.pricing-table th:nth-child(n+2){text-align:center} .pricing-table tbody tr:nth-child(odd){background:rgba(0,0,0,.02)} html[data-theme="dark"] .pricing-table tbody tr:nth-child(odd){background:rgba(255,255,255,.03)} .pricing-table tbody tr:hover{background:rgba(0,0,0,.04)} html[data-theme="dark"] .pricing-table tbody tr:hover{background:rgba(255,255,255,.06)} /* --- Mobile-friendly collapsible sections (certificate editor) --- */ details.section{ border:1px solid var(--border); border-radius:16px; padding:10px 12px; margin:12px 0; background:var(--card); } details.section > summary.section-summary{ list-style:none; cursor:pointer; font-weight:700; display:flex; align-items:center; justify-content:space-between; padding:6px 2px; } details.section > summary.section-summary::-webkit-details-marker{display:none;} details.section > summary.section-summary::after{ content:"▾"; opacity:.7; margin-left:10px; } details.section[open] > summary.section-summary::after{content:"▴";} @media (max-width: 900px){ #obsLibrary{position:static !important; max-width:none !important; min-width:0 !important; width:100% !important} /* In the editor, allow side-by-side panels to stack */ .row{flex-wrap:wrap} } /* --- Mobile stepper (certificate editor) --- */ .mstep-nav{display:none} .mstep-bar{display:none} @media (max-width: 720px){ /* Hide the hero action row when stepper is active */ .hide-on-mobile{display:none !important;} /* Step containers */ section.mstep.step{display:none} section.mstep.step.active{display:block} /* Hide dense PRO action bars inside sections on mobile; use the Tools button in the stepper header instead. */ .pro-fastbar{display:none !important;} /* Top stepper header */ .mstep-nav{display:block; position:sticky; top:0; z-index:50; background:var(--bg); padding:6px 0 6px; margin:0 0 10px; border-bottom:1px solid var(--border);} .mstep-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px 4px;} .mstep-title{font-weight:800; font-size:14px;} .mstep-meta{font-size:12px; font-weight:700; opacity:.7;} /* Tools button is toggled via JS (PRO + relevant steps). Keep it styled and visible when enabled. */ .mstep-tools-btn{display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--card); border-radius:999px; padding:8px 10px; font-weight:800;} /* Dropdown-based section selector (cleaner than many pills on small screens) */ .mstep-scroll.mstep-select-wrap{display:block; padding:0 2px 8px;} .mstep-select{width:100%; border:1px solid var(--border); background:var(--card); border-radius:12px; padding:10px 12px; font-weight:800;} /* Bottom sticky bar (simplified: Back / Next only) */ .mstep-bar{display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; bottom:0; z-index:60; background:var(--bg); padding:10px 0 calc(10px + env(safe-area-inset-bottom)); margin-top:12px; border-top:1px solid var(--border);} .mstep-bar .btn{flex:1; min-width:0} /* Reduce density slightly */ .card{padding:14px} .card h3{margin-top:10px} .grid{gap:10px} /* Mobile: turn wide data tables into stacked field cards */ table.mstack{width:100%; border:0; background:transparent;} table.mstack thead{display:none;} table.mstack tbody{display:block;} table.mstack tbody tr{display:block; background:var(--card); border:1px solid var(--border); border-radius:14px; padding:10px; margin:10px 0;} table.mstack tbody td{display:flex; align-items:center; gap:10px; padding:8px 0; border:0;} table.mstack tbody td::before{content:attr(data-label); flex:0 0 40%; font-size:12px; font-weight:800; opacity:.65;} /* Actions cell: stack buttons (e.g., Show/Hide test fields + Remove) */ table.mstack tbody td:last-child{justify-content:flex-start; align-items:stretch; flex-direction:column; gap:8px; padding-top:12px;} table.mstack tbody td:last-child::before{content:""; flex:0 0 40%;} table.mstack input, table.mstack select, table.mstack textarea{width:100%;} table.mstack .btn{width:100%;} /* Hide "advanced" fields by default (test values) to reduce visual noise */ table.mstack tbody td.mstack-adv{display:none;} table.mstack tbody tr.show-adv td.mstack-adv{display:flex;} /* Toggle row */ table.mstack .mstack-toggle{white-space:nowrap;} } /* ---------------------------------------- Utility + Sheets (scan/tools panels) ---------------------------------------- */ /* Some views rely on .hidden but the base stylesheet didn't include it */ .hidden{display:none !important;} /* Simple list cards (used by lecturer marking + student progress) */ .list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px} .list-item{display:block;border:1px solid var(--border);background:var(--card);border-radius:14px;padding:12px} .list-item:hover{border-color:var(--brand, var(--gold))} /* Bottom-sheet modal pattern used for Scan review + CU labels + Mobile Tools */ .sheet{position:fixed; inset:0; z-index:1000; display:flex; align-items:flex-end; justify-content:center;} .sheet-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45);} .sheet-panel{position:relative; width:min(720px, 100%); max-height:85vh; background:var(--card); border:1px solid var(--border); border-radius:18px 18px 0 0; overflow:hidden; box-shadow:0 -10px 30px rgba(0,0,0,.25); } .sheet-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 14px; border-bottom:1px solid var(--border); background:var(--card); position:sticky; top:0; z-index:2; } .sheet-title{font-weight:900;} .sheet-sub{font-size:12px; font-weight:700; opacity:.7; margin-top:2px;} .sheet-body{padding:12px 14px; overflow:auto; max-height:calc(85vh - 64px);} /* Scan review items */ .scan-item{display:grid; grid-template-columns: 22px 1fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border); } .scan-item:last-child{border-bottom:0;} .scan-pill{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:12px; font-weight:900; white-space:nowrap; } /* CU labels detected circuit list */ .detected-pill{display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:var(--bg); font-size:12px; font-weight:900;} /* CU label row cards inside the review sheet */ .cu-card{border:1px solid var(--border); border-radius:14px; padding:10px; background:var(--bg);} .cu-card label{margin:0 0 4px;} @media (max-width: 720px){ .sheet-panel{max-height:88vh; border-radius:18px 18px 0 0;} .sheet-head{padding:12px 12px;} .sheet-body{padding:10px 12px; max-height:calc(88vh - 60px);} } /* ========================= NVQ: Sign-off checkbox layout ========================= */ .check-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .check{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);font-weight:800;line-height:1.2} .check input{width:18px;height:18px;flex:0 0 auto} .check span{display:block} @media(max-width:520px){.check-row{grid-template-columns:1fr}} /* ========================= Message Board: ZAPs + user classes ========================= */ .user-name{font-weight:900} .user-admin{color:#ff5aa8} /* pink */ .user-apprentice{color:#ffffff} /* white */ .user-electrician{color:#ffd54a}/* yellow */ .user-lecturer{color:#7ec8ff} /* baby blue */ .pro-badge{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.06); font-size:12px; font-weight:900; } .legacy-badge{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.06); font-size:12px; font-weight:900; } .verified-badge{ display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--border); background:rgba(0,200,140,.12); font-size:12px; font-weight:900; } .zap-btn{ border:1px solid var(--border); background:#000; color:#fff; border-radius:999px; padding:8px 12px; font-weight:900; cursor:pointer; } .zap-btn:hover{border-color:var(--brand, var(--gold))} .zap-count{color:#ffd54a;font-weight:900} .zap-btn.zap-on{ border-color:var(--brand, var(--gold)); background:#000; } /* --- Footer link colour fix (Terms / Privacy) --- */ .footer a, .footer small a{ color: var(--brand, var(--gold)); text-decoration: none; font-weight: 700; } .footer a:hover, .footer small a:hover{ text-decoration: underline; opacity: .9; } /* ------------------------------------------------------------ Circuit Builder (interactive learning tool) ------------------------------------------------------------ */ .cb-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:8px 0 16px} .cb-actions{display:flex;gap:8px;flex-wrap:wrap} .cb-grid{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start} @media (max-width: 980px){ .cb-grid{grid-template-columns:1fr} } .cb-panel h2{margin-top:0} .cb-toolbox{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px} .cb-tool{display:flex;align-items:center;gap:10px;padding:10px 12px} .cb-tool-icon{width:34px;height:34px;border-radius:12px;background-color:rgba(15,26,51,.06);background-repeat:no-repeat;background-position:center;background-size:contain;flex:0 0 auto} .cb-tool-label{line-height:1.1} /* Toolbox icons (inline SVG data URIs to avoid extra files) */ .cb-tool[data-add="supply"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,DB")} .cb-tool[data-add="supply3"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,DB 3ϕ")} .cb-tool[data-add="switch1"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,")} .cb-tool[data-add="switch2"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,")} .cb-tool[data-add="switchInt"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,")} .cb-tool[data-add="lamp"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,")} .cb-tool[data-add="junction"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,")} .cb-tool[data-add="socket"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,")} .cb-tool[data-add="fcu"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,FCU")} .cb-tool[data-add="contactor"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,")} .cb-tool[data-add="dol"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,DOL")} .cb-tool[data-add="motor"] .cb-tool-icon{background-image:url("data:image/svg+xml;utf8,")} /* Circuit Builder toolbox icons */ .cb-tool{display:flex;align-items:center;gap:10px;padding:8px 12px}... .cb-board{padding:14px} .cb-board-top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap} .cb-board-actions{display:flex;gap:8px;align-items:center} .cb-status{min-height:24px;font-size:14px;line-height:1.3} .cb-status.good{color:#0b6b2a} .cb-status.warn{color:#7a4c00} .cb-status.bad{color:#8b1e1e} .cb-warn-list{margin:8px 0 0 18px} .cb-canvas{position:relative;height:560px;min-height:420px;border:1px solid rgba(0,0,0,.12);border-radius:14px; /* subtle grid so students can visually align accessories */ background: radial-gradient(circle at 1px 1px, rgba(0,0,0,.10) 1px, rgba(255,255,255,.65) 0) 0 0/18px 18px, rgba(255,255,255,.72); overflow:hidden} /* Mobile Safari can collapse flex/% heights; use viewport units for a reliable workspace height. */ @media (max-width: 600px){ .cb-canvas{ /* clamp(min, preferred, max) */ height: clamp(420px, 60svh, 620px); height: clamp(420px, 60dvh, 620px); } } .cb-wires{position:absolute;inset:0;width:100%;height:100%;z-index:50;pointer-events:none} .cb-wire{pointer-events:stroke;cursor:pointer;opacity:.95} .wire-l{stroke:rgba(178,0,0,.85)} .wire-n{stroke:rgba(0,45,170,.85)} .wire-e{stroke:rgba(0,125,0,.75)} .cb-comp{position:absolute;z-index:10;min-width:190px;max-width:260px;background:#ffffff;border:1px solid rgba(0,0,0,.18);border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.10);user-select:none} /* Dark title bar = high contrast on the site’s dark UI */ .cb-comp-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg, #0b1220, #0f1a33); color:#f8fafc; border-radius:16px 16px 0 0; cursor:grab;font-weight:800;letter-spacing:.2px} .cb-comp-name{color:#f8fafc} .cb-comp-title:active{cursor:grabbing} .cb-comp-x{border:none;background:transparent;color:#f8fafc;font-size:18px;line-height:1;cursor:pointer;opacity:.75} .cb-comp-x:hover{opacity:1} /* A “face” area that visually resembles the accessory */ .cb-face{height:78px;margin:10px 12px 0;border-radius:12px;border:1px solid rgba(0,0,0,.12); background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,255,.98)); display:flex;align-items:center;justify-content:center; background-repeat:no-repeat;background-position:center;background-size:74px 74px} /* Icons (inline SVG data URIs) */ .cb-comp.type-lamp .cb-face{background-image:url("data:image/svg+xml;utf8,");} .cb-comp.type-switch1 .cb-face{background-image:url("data:image/svg+xml;utf8,1-WAY");} .cb-comp.type-supply .cb-face{background-image:url("data:image/svg+xml;utf8,DB");} .cb-comp.type-junction .cb-face{background-image:url("data:image/svg+xml;utf8,JB");} .cb-ports{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px 12px} .cb-port{width:44px;height:36px;border-radius:11px;border:1px solid rgba(0,0,0,.18);background:#f7f7f7;color:#0b1220;font-weight:900;cursor:pointer} .cb-port:hover{filter:brightness(.98)} .cb-port.is-selected{outline:3px solid rgba(0,0,0,.18);transform:translateY(-1px)} .port-L{background:rgba(178,0,0,.08)} .port-N{background:rgba(0,45,170,.08)} .port-E{background:rgba(0,125,0,.08)} .port-ANY{background:rgba(0,0,0,.04)} .cb-legend{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:13px;opacity:.9;flex-wrap:wrap} .cb-legend .dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin:0 6px 0 12px} .cb-legend .dot-l{background:rgba(178,0,0,.85)} .cb-legend .dot-n{background:rgba(0,45,170,.85)} .cb-legend .dot-e{background:rgba(0,125,0,.75)} /* Additional Circuit Builder component face icons (for placed accessories) */ .cb-comp.type-switch2 .cb-face{background-image:url("data:image/svg+xml;utf8,2-WAY");} .cb-comp.type-switchInt .cb-face{background-image:url("data:image/svg+xml;utf8,INTER");} .cb-comp.type-socket .cb-face{background-image:url("data:image/svg+xml;utf8,");} .cb-comp.type-fcu .cb-face{background-image:url("data:image/svg+xml;utf8,FCU");} .cb-comp.type-supply3 .cb-face{background-image:url("data:image/svg+xml;utf8,DB3ϕ 400V");} .cb-comp.type-contactor .cb-face{background-image:url("data:image/svg+xml;utf8,KM");} .cb-comp.type-dol .cb-face{background-image:url("data:image/svg+xml;utf8,DOL");} .cb-comp.type-motor .cb-face{background-image:url("data:image/svg+xml;utf8,MTR");} /* --- Business Workspace (mobile-first) --- */ .biz-tabs{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 0} .biz-tab{flex:0 0 auto;border:1px solid var(--border);background:var(--card);color:var(--fg);border-radius:999px;padding:10px 14px;font-weight:900;display:inline-flex;align-items:center;gap:8px} .biz-tab.is-active{border-color:var(--brand, var(--gold));box-shadow:0 10px 26px rgba(0,0,0,.08)} .biz-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;border:1px solid var(--border);background:var(--bg);font-size:12px;font-weight:900} .biz-search input{border-radius:14px} .biz-panel{display:none} .biz-panel.is-active{display:block} .biz-collapse{display:none} .biz-collapse.is-open{display:block} .biz-list{display:grid;gap:10px} .biz-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--bg)} .biz-item:hover{border-color:var(--brand, var(--gold))} .biz-item.is-hidden{display:none} .biz-title{font-weight:900} .biz-sub{font-size:13px;opacity:.85} .biz-item-cta{font-weight:900;opacity:.75} .biz-item-main{min-width:0} .biz-line{border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--bg);margin:10px 0} .biz-line-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap} .biz-line-row > div{flex:1;min-width:140px} @media (max-width:600px){ .biz-line-row > div{min-width:0} .biz-item{padding:12px} .biz-item-cta{display:none} } /* --- Business Workspace (split-view, Option A) --- */ .ws-top{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap} .ws-search{flex:1;min-width:220px} .ws-search input{border-radius:14px} .ws-actions{flex:0 0 auto} .ws-shell{display:grid;gap:12px;margin-top:12px} /* Mobile-first: single column; detail is opened as an overlay "page" */ .ws-sidebar{border:1px solid var(--border);border-radius:16px;background:var(--card);padding:10px} .ws-nav{display:flex;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px} .ws-navbtn{flex:0 0 auto;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:999px;padding:10px 12px;font-weight:900;display:inline-flex;align-items:center;gap:10px} .ws-navbtn.is-active{border-color:var(--brand, var(--gold));box-shadow:0 10px 26px rgba(0,0,0,.08)} .ws-navcount{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:900} .ws-hint{font-size:12px;opacity:.8;margin:10px 6px 2px} .ws-list{border:1px solid var(--border);border-radius:16px;background:var(--card);padding:12px} .ws-listpanel{display:none} .ws-listpanel.is-active{display:block} .ws-listhead{display:flex;align-items:center;justify-content:space-between;gap:10px} .ws-collapse{display:none;margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--bg)} .ws-collapse.is-open{display:block} .ws-cards{display:grid;gap:10px;margin-top:12px} .ws-card{display:block;border:1px solid var(--border);border-radius:14px;background:var(--bg);padding:12px;color:inherit;text-decoration:none} .ws-card:hover{border-color:var(--brand, var(--gold))} .ws-card.is-active{border-color:var(--brand, var(--gold));box-shadow:0 10px 26px rgba(0,0,0,.08)} .ws-card.is-hidden{display:none} .ws-card-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .ws-card-title{font-weight:900;min-width:0} .ws-card-sub{font-size:13px;opacity:.85;margin-top:4px} .ws-chip{flex:0 0 auto;border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:900;background:var(--card)} .ws-empty{border:1px dashed var(--border);border-radius:14px;padding:14px;background:var(--bg)} .ws-empty-title{font-weight:900;margin-bottom:4px} /* Detail: desktop column, mobile overlay */ .ws-detail{border:1px solid var(--border);border-radius:16px;background:var(--card);padding:12px;position:relative} .ws-detailhead{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;background:var(--card);padding-bottom:10px;border-bottom:1px solid var(--border);z-index:2} .ws-detailtitle{font-weight:900} .ws-back{display:inline-flex} .ws-detailbody{padding-top:12px} .ws-lines{display:grid;gap:10px} .ws-line{border:1px solid var(--border);border-radius:14px;background:var(--bg);padding:12px} .ws-line-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .ws-savebar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)} .ws-noteform textarea{width:100%;min-height:68px} .ws-notes{display:grid;gap:10px;margin-top:12px} .ws-note{border:1px solid var(--border);border-radius:14px;background:var(--bg);padding:12px} .ws-note-meta{font-size:12px;margin-bottom:6px} /* Create modal */ .ws-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50} .ws-modal.is-open{display:flex} .ws-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)} .ws-modal-card{position:relative;max-width:420px;width:calc(100% - 28px);border:1px solid var(--border);border-radius:18px;background:var(--card);padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.25)} .ws-modal-grid{display:grid;grid-template-columns:1fr;gap:10px} .ws-modal-btn{border:1px solid var(--border);background:var(--bg);border-radius:14px;padding:12px;font-weight:900;text-align:left} .ws-modal-btn:hover{border-color:var(--brand, var(--gold))} @media (min-width:980px){ .ws-shell{grid-template-columns:260px 1.2fr 1fr;align-items:start} .ws-nav{flex-direction:column;overflow:visible} .ws-navbtn{justify-content:space-between} .ws-back{display:none} .ws-detail{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto} } @media (max-width:979px){ .ws-shell{grid-template-columns:1fr} /* When detail is active, treat it as a mobile page */ .ws-detail{position:fixed;inset:0;border-radius:0;z-index:40;display:none;overflow:auto} .ws-detail.is-open{display:block} .ws-shell.is-detail .ws-sidebar{display:none} .ws-shell.is-detail .ws-list{display:none} } /* --- Workspace extras: filters + payments --- */ .ws-filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px} .ws-filters .pill.is-active{background:var(--fg);color:var(--bg);border-color:var(--fg)} .ws-payments{border:1px solid var(--border);border-radius:14px;background:var(--bg);padding:12px} .ws-payment-summary{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px} .ws-payment-form{border-top:1px dashed var(--border);padding-top:12px;margin-top:10px} .ws-payment-list{display:grid;gap:10px;margin-top:12px} .ws-payment-item{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border:1px solid var(--border);border-radius:14px;background:var(--card);padding:12px} .ws-payment-main{min-width:0} /* Workspace notices */ .ws-ok{padding:10px 12px;border-radius:12px;background:#f0fff4;border:1px solid rgba(0,0,0,.08)} .ws-err{padding:10px 12px;border-radius:12px;background:#fff1f2;border:1px solid rgba(0,0,0,.08)} /* --- Notifications (mobile-first) --- */ .notif-list{display:grid;gap:10px} .notif-item{display:block;text-decoration:none;color:inherit;border:1px solid var(--border);border-radius:16px;background:var(--card);padding:12px} .notif-item.unread{border-color:var(--brand);box-shadow:0 1px 0 rgba(0,0,0,.04)} .notif-title{font-weight:800;line-height:1.2} .notif-body{margin-top:6px;color:var(--muted);white-space:pre-wrap} .notif-meta{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:10px;color:var(--muted);font-size:13px} .notif-bell{position:relative;display:inline-flex;align-items:center;gap:8px} .notif-bell svg{width:18px;height:18px} .notif-bell .notif-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:var(--brand-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;border:2px solid var(--bg)} /* Dashboard: inline notification chip next to username */ .notif-inline{position:relative;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--pill-bg);color:var(--pill-fg)} .notif-inline:hover{border-color:var(--brand, var(--gold))} .notif-inline svg{width:18px;height:18px} .notif-inline .notif-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--brand);color:var(--brand-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;border:2px solid var(--bg)} /* Registration account type cards */ .radio-grid{display:grid;grid-template-columns:1fr;gap:10px} @media(min-width:720px){.radio-grid{grid-template-columns:repeat(3,1fr)}} .radio-card{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:12px;cursor:pointer} .radio-card input{margin-top:3px} .radio-card:hover{border-color:rgba(0,0,0,.25)} .radio-card input:checked + div{font-weight:600} .radio-card input:checked{accent-color:var(--brand, #f6b73c)} .radio-card input:checked + div .muted{color:var(--text)} .radio-card input:checked + div{ } .radio-card input:checked + div{ } /* --- RAG badges --- */ .rag-dot{ width:10px; height:10px; border-radius:999px; display:inline-block; flex:0 0 10px; border:1px solid rgba(0,0,0,.25); } .rag-red{ background:#e11d48; } .rag-amber{ background:#f59e0b; } .rag-green{ background:#22c55e; } .rag-unknown{ background:#9ca3af; } .rag-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:700; margin-right:6px; border:1px solid rgba(0,0,0,.15); } .badge.green{background:#0a7;color:#fff;border-color:transparent;} .badge.red{background:#b00020;color:#fff;border-color:transparent;} /* ---------------------------------------- Visual Learning Simulators ---------------------------------------- */ .sim-wrap{width:100%;overflow:hidden;border-radius:16px;border:1px solid var(--border);background:var(--bg)} .sim-svg{width:100%;height:auto;display:block} .sim-canvas{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--border);background:var(--bg)} .sim-box{fill:var(--card);stroke:var(--border);stroke-width:2} .sim-chip{fill:var(--pill-bg);stroke:var(--border);stroke-width:2} .sim-label{font:800 18px system-ui,-apple-system,Segoe UI,Roboto,Arial;fill:var(--fg)} .sim-chip-label{font:800 14px system-ui,-apple-system,Segoe UI,Roboto,Arial;fill:var(--fg)} .sim-small{font:700 13px system-ui,-apple-system,Segoe UI,Roboto,Arial;fill:rgba(0,0,0,.6)} html[data-theme="dark"] .sim-small{fill:rgba(255,255,255,.65)} .sim-node{fill:var(--bg);stroke:var(--brand, var(--gold));stroke-width:3;cursor:pointer} .sim-node:hover{opacity:.9} .sim-node.red{stroke:rgba(220,38,38,.95)} .sim-node.black{stroke:rgba(17,24,39,.95)} html[data-theme="dark"] .sim-node.black{stroke:rgba(226,232,240,.95)} .sim-node.both{stroke:rgba(37,99,235,.95)} .sim-path{fill:none;stroke:rgba(17,24,39,.35);stroke-width:8;stroke-linecap:round;stroke-linejoin:round} html[data-theme="dark"] .sim-path{stroke:rgba(226,232,240,.35)} .sim-path.active{stroke:rgba(184,138,18,.65)} .sim-path.pulse{stroke-dasharray:26 12;animation:simdash 1.2s linear 1} @keyframes simdash{from{stroke-dashoffset:0}to{stroke-dashoffset:-120}} .sim-hit{fill:rgba(212,175,55,.08);stroke:rgba(212,175,55,.22);stroke-width:2;cursor:pointer} .sim-hit:hover{fill:rgba(212,175,55,.14)} .sim-svg.tt-mode .sim-hit{fill:rgba(14,165,233,.08);stroke:rgba(14,165,233,.22)} /* Testing simulator */ .ts-board{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px} .ts-cu,.ts-load{border:1px solid var(--border);border-radius:16px;padding:14px;background:var(--card)} .ts-title{font-weight:900;margin-bottom:10px} .ts-terminal{display:inline-flex;align-items:center;justify-content:center;margin:8px 10px 0 0;width:64px;height:48px;border-radius:14px;border:1px solid var(--border);background:var(--bg);font-weight:900;cursor:pointer} .ts-terminal.red{border-color:rgba(220,38,38,.75)} .ts-terminal.black{border-color:rgba(17,24,39,.75)} html[data-theme="dark"] .ts-terminal.black{border-color:rgba(226,232,240,.75)} .ts-terminal.both{border-color:rgba(37,99,235,.85)} .ts-leads{grid-column:span 2;border:1px solid var(--border);border-radius:16px;padding:14px;background:var(--card)} .ts-lead{border-radius:999px;border:1px solid var(--border);background:var(--pill-bg);padding:10px 12px;font-weight:900;cursor:pointer;margin-right:10px} .ts-lead.active{border-color:var(--brand, var(--gold))} .ts-lead-status{margin-top:10px;color:var(--muted);font-weight:800} .sim-instrument{border:1px solid var(--border);border-radius:16px;padding:14px;background:var(--card)} .sim-instrument-top{display:flex;gap:14px;align-items:center} .sim-dial{width:88px;height:88px;border-radius:999px;border:1px solid var(--border);background:var(--bg);position:relative;flex:0 0 auto} .sim-dial-pointer{position:absolute;left:50%;top:50%;width:38px;height:3px;background:var(--brand, var(--gold));transform-origin:0 50%;transform:rotate(-25deg);border-radius:3px} /* AM2 */ .am2-track{display:grid;gap:10px} .am2-item{border:1px solid var(--border);border-radius:16px;padding:12px;background:var(--card)} .am2-item.done{opacity:.75} .am2-item.next{border-color:var(--brand, var(--gold))} .am2-item-title{font-weight:900;margin-bottom:4px} .am2-choice{text-align:left} /* Fault finding visual */ .sim-lead{fill:var(--bg);stroke:var(--border);stroke-width:2;cursor:pointer} .sim-lead.red{stroke:rgba(220,38,38,.85)} .sim-lead.black{stroke:rgba(17,24,39,.85)} html[data-theme="dark"] .sim-lead.black{stroke:rgba(226,232,240,.85)} .sim-lead.active{stroke-width:4} /* ========================= Visual Learning: mobile clarity tweaks ========================= */ @media (max-width: 900px){ .container{padding:14px} .card{padding:14px} .ts-board{grid-template-columns:1fr;padding:10px} .ts-leads{grid-column:span 1} .ts-terminal{width:76px;height:56px;border-radius:16px} .ts-lead{display:block;width:100%;margin:0 0 10px 0;padding:12px 14px} .sim-instrument-top{flex-direction:row} .note{background:var(--card)} .banner{font-size:14px} }