/* ========================================================================= * MCQ Pro — Test Series Frontend (v4.10.33) * * Modern SaaS course-landing page. Fully responsive: * Desktop (≥1024): 2-col with sticky right-side CTA card * Tablet (768-1023): single column, inline CTA row after stats * Mobile (<768): single column, fixed bottom-bar CTA * * All styles scoped under .cbq-ts-* to avoid theme conflicts. * =========================================================================*/ /* v4.10.27 — Shell layout fixes. The default mcqp-fe shell is a 3-column grid (sidebar / main / ad-rail). Our series page doesn't emit an ad rail, so the reserved 280px was stealing width from main. Collapse to 2-col when the body is on a test-series page. */ body.cbq-ts-page .mcqp-fe .mcqp-shell, .mcqp-fe .mcqp-shell.cbq-ts-shell { grid-template-columns: 240px minmax(0, 1fr) !important; } .mcqp-fe .mcqp-main { min-width: 0; overflow-wrap: break-word; } /* ========================================================================= * DESIGN TOKENS * =========================================================================*/ .cbq-series-frontend-wrap{ --ts-primary:#4f46e5; --ts-primary-dark:#4338ca; --ts-primary-soft:#eef2ff; --ts-primary-softer:#f5f3ff; --ts-accent:#8b5cf6; --ts-success:#10b981; --ts-success-soft:#d1fae5; --ts-warning:#f59e0b; --ts-danger:#ef4444; --ts-text:#0f172a; --ts-text-muted:#64748b; --ts-text-soft:#94a3b8; --ts-border:#e2e8f0; --ts-border-soft:#f1f5f9; --ts-bg:#ffffff; --ts-bg-soft:#f8fafc; --ts-radius-sm:8px; --ts-radius:14px; --ts-radius-lg:20px; --ts-shadow-xs:0 1px 2px rgba(15,23,42,.04); --ts-shadow-sm:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06); --ts-shadow-md:0 4px 12px rgba(15,23,42,.06),0 2px 4px rgba(15,23,42,.04); --ts-shadow-lg:0 12px 32px rgba(79,70,229,.12),0 4px 12px rgba(15,23,42,.04); --ts-shadow-xl:0 20px 40px -12px rgba(15,23,42,.12),0 8px 16px -6px rgba(15,23,42,.04); /* v4.10.34 — Lead with Baloo Tamma 2 so Kannada script renders consistently with the surrounding English text. The isolated shell already loads this family from Google Fonts (advanced-cbt.php ), so no extra network request. Inter stays as the first fallback for any glyphs Baloo doesn't cover; system fonts round out the stack. */ font-family:'Baloo Tamma 2','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--ts-text); max-width:1280px;margin:0 auto;padding:0 20px 80px; min-width:0; } /* Inside the shell, .mcqp-main already has padding — don't double it */ .mcqp-fe .mcqp-main .cbq-series-frontend-wrap{max-width:none;margin:0;padding:0} .cbq-series-frontend-wrap *, .cbq-series-frontend-wrap *::before, .cbq-series-frontend-wrap *::after{box-sizing:border-box} /* Archive-hero white-text overrides (kept — archive hero is still gradient) */ .cbq-series-frontend-wrap .cbq-ts-hero, .cbq-series-frontend-wrap .cbq-ts-hero h1, .cbq-series-frontend-wrap .cbq-ts-hero p, .cbq-series-frontend-wrap .cbq-ts-hero-eyebrow { color: #ffffff !important; } .cbq-series-frontend-wrap .cbq-ts-hero p { color: rgba(255,255,255,.92) !important; } /* ========================================================================= * ARCHIVE — hero, toolbar, card grid (unchanged aside from CSS var names) * =========================================================================*/ .cbq-ts-hero{ position:relative;overflow:hidden; margin:24px 0 32px;padding:56px 40px; background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#ec4899 100%); border-radius:var(--ts-radius);color:#fff; } .cbq-ts-hero::before,.cbq-ts-hero::after{ content:'';position:absolute;border-radius:50%;filter:blur(60px);opacity:.4;pointer-events:none; } .cbq-ts-hero::before{width:320px;height:320px;background:#f472b6;top:-100px;right:-80px} .cbq-ts-hero::after{width:240px;height:240px;background:#60a5fa;bottom:-80px;left:10%} .cbq-ts-hero-inner{position:relative;z-index:1;max-width:720px} .cbq-ts-hero-eyebrow{ display:inline-flex;align-items:center;gap:6px; padding:6px 14px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; background:rgba(255,255,255,.15);backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.25);border-radius:99px;color:#fff; } .cbq-ts-hero h1{margin:16px 0 12px;font-size:44px;line-height:1.15;font-weight:800;letter-spacing:0} .cbq-ts-hero p{margin:0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.9);max-width:560px} /* ========================================================================= * TOOLBAR & FILTER CHIPS (v4.10.38) * * The chips row was 3 stacked lines of identical flat-white pills — dull, * vertically wasteful, and with no visual hierarchy between "All" (active) * and the 27 categories. Redesigned as: * * Toolbar row 1: search + sort (unchanged) * Toolbar row 2: horizontally-scrolling chip bar with: * - inline category icon per chip (matches the card icon system) * - count badge per chip (Banking · 4) * - gradient fade at the left/right edges indicating more content * - the active chip stays in view via smooth scroll-into-view (JS) * - "All" chip is primary-filled and locked at the start * =========================================================================*/ .cbq-ts-toolbar{ display:flex;flex-wrap:wrap;gap:12px;align-items:center; margin-bottom:16px; } .cbq-ts-search{position:relative;flex:1;min-width:260px;max-width:480px} .cbq-ts-search input{ width:100%;height:44px;padding:0 14px 0 42px; border:1px solid var(--ts-border);border-radius:12px; background:var(--ts-bg);font-size:14px;color:var(--ts-text); transition:border-color .15s, box-shadow .15s; font-family:inherit; } .cbq-ts-search input:focus{outline:none;border-color:var(--ts-primary);box-shadow:0 0 0 4px rgba(79,70,229,.1)} .cbq-ts-search::before{ content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat; } .cbq-ts-sort{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ts-text-muted);margin-left:auto} .cbq-ts-sort select{ height:40px;padding:0 32px 0 14px;font-size:13px; border:1px solid var(--ts-border);border-radius:10px;background:var(--ts-bg);color:var(--ts-text);cursor:pointer; -webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-weight:500; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:14px; transition:border-color .15s; } .cbq-ts-sort select:focus{outline:none;border-color:var(--ts-primary);box-shadow:0 0 0 4px rgba(79,70,229,.1)} /* --- Chip bar --- */ .cbq-ts-chips-wrap{ position:relative; margin:0 0 28px; /* Left/right fade gradients hinting there's more content when scrolled. `mask-image` applies to the whole wrap so its descendants get clipped cleanly; the chip themselves still render at full opacity within view. */ -webkit-mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); } .cbq-ts-chips{ display:flex;align-items:center;gap:8px; overflow-x:auto;overflow-y:hidden; padding:4px 18px; /* horizontal padding so first/last chips get clear of the mask edges */ scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth; scroll-padding-inline:32px; } .cbq-ts-chips::-webkit-scrollbar{display:none} .cbq-ts-chip{ display:inline-flex;align-items:center;gap:7px; padding:9px 14px;height:40px; font-size:13px;font-weight:600;letter-spacing:0; background:var(--ts-bg); border:1px solid var(--ts-border); border-radius:99px; color:var(--ts-text-muted); cursor:pointer;transition:all .18s ease;user-select:none; flex-shrink:0; /* never squash — overflow horizontally instead */ font-family:inherit; box-shadow:var(--ts-shadow-xs); white-space:nowrap; } .cbq-ts-chip svg{color:var(--ts-text-soft);flex-shrink:0;transition:color .18s ease} .cbq-ts-chip:hover{ border-color:#cbd5e1; color:var(--ts-text); transform:translateY(-1px); box-shadow:var(--ts-shadow-sm); } .cbq-ts-chip:hover svg{color:var(--ts-primary)} .cbq-ts-chip:focus-visible{outline:2px solid var(--ts-primary);outline-offset:2px} .cbq-ts-chip.is-active{ background:linear-gradient(135deg,var(--ts-primary) 0%,var(--ts-accent) 100%); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(79,70,229,.28); } .cbq-ts-chip.is-active svg{color:#fff} .cbq-ts-chip.is-active .cbq-ts-chip-count{background:rgba(255,255,255,.22);color:#fff} /* "All" gets a marginally different treatment — always primary-filled even when not active, so the user can spot it as the reset option. But only subtly — if All is not active we keep it neutral to match the others. */ .cbq-ts-chip.is-all{font-weight:700} .cbq-ts-chip-label{line-height:1} .cbq-ts-chip-count{ display:inline-flex;align-items:center;justify-content:center; min-width:20px;height:18px;padding:0 6px; font-size:11px;font-weight:700;line-height:1; background:var(--ts-border);color:var(--ts-text-muted); border-radius:6px; font-variant-numeric:tabular-nums; transition:background .18s ease, color .18s ease; } .cbq-ts-chip:hover .cbq-ts-chip-count{background:var(--ts-primary-soft);color:var(--ts-primary)} /* ========================================================================= * ARCHIVE CARDS (v4.10.37 — redesigned) * * Goals for the rewrite: * - 3 cards per row on desktop (≥1024), 2 on tablet, 1 on phone * - Shorter cover band (100px vs 160px) — less visual weight per card * - Real outline SVG icons in a white tile in the top-left of the cover * (replaces the ghostly fading emoji) * - Category moves onto the cover as a white chip, freeing the body * - Body has just three things: title, description, [tests · price] footer * - Removed the "View Details" button — the whole card is a link anyway * =========================================================================*/ .cbq-ts-grid{ display:grid; /* 3-up on most desktops, 2-up on narrow desktop/tablet, 1-up on phone. 260px min + 20px gap = 260*3 + 20*2 = 820px — fits inside the ~1060px main column with room for padding. */ grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; } .cbq-ts-card{ background:var(--ts-bg); border:1px solid var(--ts-border); border-radius:var(--ts-radius-lg); overflow:hidden;position:relative; text-decoration:none;color:inherit; display:flex;flex-direction:column; transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease; box-shadow:var(--ts-shadow-xs); } .cbq-ts-card:hover{ transform:translateY(-4px); box-shadow:var(--ts-shadow-lg); border-color:transparent; } .cbq-ts-card:focus-visible{outline:2px solid var(--ts-primary);outline-offset:3px} /* Cover band — the colored rectangle at the top of the card */ .cbq-ts-card-cover{ position:relative;height:100px;overflow:hidden; background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%); display:flex;align-items:flex-end;padding:12px 14px; } .cbq-ts-card-cover.variant-2{background:linear-gradient(135deg,#10b981 0%,#059669 100%)} .cbq-ts-card-cover.variant-3{background:linear-gradient(135deg,#f59e0b 0%,#f97316 100%)} .cbq-ts-card-cover.variant-4{background:linear-gradient(135deg,#ec4899 0%,#db2777 100%)} .cbq-ts-card-cover.variant-5{background:linear-gradient(135deg,#06b6d4 0%,#0891b2 100%)} .cbq-ts-card-cover::after{ content:'';position:absolute;inset:0;pointer-events:none; background: radial-gradient(circle at 100% 0%,rgba(255,255,255,.18),transparent 55%), radial-gradient(circle at 10% 110%,rgba(0,0,0,.12),transparent 50%); } /* Icon tile — sits in the top-left of the cover. White translucent background with the SVG rendered in white stroke. */ .cbq-ts-card-cover-icon{ position:absolute;top:14px;left:14px;z-index:2; width:40px;height:40px;border-radius:10px; background:rgba(255,255,255,.18); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.28); display:flex;align-items:center;justify-content:center; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); } .cbq-ts-card-cover-icon svg{width:22px;height:22px} /* Category chip — white pill in the bottom-left of the cover */ .cbq-ts-card-cover-cat{ position:relative;z-index:2; display:inline-flex;align-items:center; padding:4px 10px;border-radius:99px; font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; /* v4.12.103 — text color was var(--ts-text) which remaps to a light color in dark mode → light text on white pill = invisible. v4.12.104 — added !important because somewhere a higher-specificity global dark-mode rule (.mcqp-fe[data-theme="dark"] div, etc.) was pushing a light color onto this span through inheritance. */ background:rgba(255,255,255,.95)!important;color:#0f172a!important; max-width:calc(100% - 16px); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* Status badges — stack in the top-right corner of the cover */ .cbq-ts-card-badges{ position:absolute;top:12px;right:12px;z-index:2; display:flex;gap:5px;flex-direction:row-reverse; /* "New" first, "Premium/Free" beside it */ } .cbq-ts-badge{ display:inline-flex;align-items:center;gap:4px; padding:3px 9px;font-size:10px;font-weight:700;letter-spacing:.02em; border-radius:99px; /* v4.12.103 — same token-bug fix as category pill above v4.12.104 — !important for same defensive reason. */ background:rgba(255,255,255,.95)!important;color:#0f172a!important; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); } .cbq-ts-badge.is-premium{ background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;color:#78350f!important; } .cbq-ts-badge.is-free{background:#d1fae5!important;color:#065f46!important} .cbq-ts-badge.is-new{background:#fce7f3!important;color:#9d174d!important} /* Body — title, description, tests+price footer */ .cbq-ts-card-body{ padding:18px 18px 16px; flex:1;display:flex;flex-direction:column;gap:8px; } .cbq-ts-card-title{ font-size:16px;font-weight:700;line-height:1.3;letter-spacing:0; color:var(--ts-text);margin:0; /* Allow 2 lines before truncating */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; min-height:2.6em; /* reserve 2 lines so cards align across the row */ } .cbq-ts-card-desc{ font-size:13px;line-height:1.55;color:var(--ts-text-muted); margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; flex:1; } .cbq-ts-card-foot{ display:flex;align-items:center;justify-content:space-between; gap:12px;padding-top:14px;margin-top:auto; border-top:1px solid var(--ts-border-soft); } .cbq-ts-card-tests{ display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:600;color:var(--ts-text-muted); font-variant-numeric:tabular-nums; } .cbq-ts-card-tests svg{color:var(--ts-text-soft);flex-shrink:0} .cbq-ts-card-price{ font-size:16px;font-weight:800;color:var(--ts-text); letter-spacing:0;font-variant-numeric:tabular-nums; } .cbq-ts-card-price .strike{font-size:12px;font-weight:500;color:var(--ts-text-muted);text-decoration:line-through;margin-right:6px} .cbq-ts-card-price.is-free{color:var(--ts-success)} /* ========================================================================= * SINGLE-SERIES PAGE (v4.10.33 rewrite) * =========================================================================*/ .cbq-ts-single{margin-top:12px} /* Per-series color token — the colored band and accents pick from this. 5 variants match the archive cards so the single page visually links back to whichever card the user clicked. */ .cbq-ts-single[data-cover="v1"]{--ts-cover-from:#6366f1;--ts-cover-to:#8b5cf6} .cbq-ts-single[data-cover="v2"]{--ts-cover-from:#10b981;--ts-cover-to:#059669} .cbq-ts-single[data-cover="v3"]{--ts-cover-from:#f59e0b;--ts-cover-to:#f97316} .cbq-ts-single[data-cover="v4"]{--ts-cover-from:#ec4899;--ts-cover-to:#db2777} .cbq-ts-single[data-cover="v5"]{--ts-cover-from:#06b6d4;--ts-cover-to:#0891b2} .cbq-ts-single:not([data-cover]){--ts-cover-from:#6366f1;--ts-cover-to:#8b5cf6} /* Admin-only draft preview banner */ .cbq-ts-draft-banner{ display:flex;align-items:flex-start;gap:12px;padding:14px 18px;margin-bottom:16px; background:linear-gradient(180deg,#fef3c7,#fde68a); border:1px solid #f59e0b;border-left-width:4px;border-radius:10px; color:#78350f;font-size:13px;line-height:1.5; } .cbq-ts-draft-banner svg{color:#b45309;flex-shrink:0;margin-top:1px} .cbq-ts-draft-banner strong{font-weight:700} .cbq-ts-draft-banner em{font-weight:600;font-style:normal;padding:1px 6px;background:rgba(245,158,11,.2);border-radius:4px;margin:0 2px} .cbq-ts-draft-banner a{color:#92400e;font-weight:600;text-decoration:none;margin-left:4px} .cbq-ts-draft-banner a:hover{text-decoration:underline} /* Breadcrumb */ .cbq-ts-breadcrumb{ display:flex;align-items:center;gap:8px;font-size:12.5px; color:var(--ts-text-muted);margin:0 0 20px;flex-wrap:wrap; } .cbq-ts-breadcrumb a{color:var(--ts-text-muted);text-decoration:none;transition:color .15s ease} .cbq-ts-breadcrumb a:hover{color:var(--ts-primary)} .cbq-ts-breadcrumb span:last-child{color:var(--ts-text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px} .cbq-ts-breadcrumb svg{color:#cbd5e1;flex-shrink:0} /* v4.10.36 — Single-column layout, full width of main content column. Earlier v4.10.34 capped this at 860px with auto margins, which left large empty rails on either side versus the Mock Tests / Dashboard / Current Affairs pages that use the full column width. Cap removed — the series page now matches the surrounding pages' width. */ .cbq-ts-layout{ display:flex;flex-direction:column;gap:24px; } .cbq-ts-main{min-width:0;display:flex;flex-direction:column;gap:24px} /* ========================================================================= * HERO CARD — colored top band + white body * =========================================================================*/ .cbq-ts-hero-card{ background:var(--ts-bg);border:1px solid var(--ts-border); border-radius:var(--ts-radius-lg);overflow:hidden; box-shadow:var(--ts-shadow-sm); } .cbq-ts-hero-band{ position:relative;height:140px; background:linear-gradient(135deg,var(--ts-cover-from) 0%,var(--ts-cover-to) 100%); display:flex;align-items:flex-end;justify-content:space-between; padding:18px 28px;gap:12px; } .cbq-ts-hero-band::after{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.22),transparent 55%); } .cbq-ts-hero-band-pattern{ position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0; } .cbq-ts-hero-category, .cbq-ts-hero-badge{ position:relative;z-index:1; display:inline-flex;align-items:center;gap:5px; padding:6px 12px;font-size:11.5px;font-weight:700;letter-spacing:.03em; border-radius:99px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .cbq-ts-hero-category{ background:rgba(255,255,255,.2);color:#fff; border:1px solid rgba(255,255,255,.28); text-transform:uppercase;font-size:10.5px;letter-spacing:.08em; } .cbq-ts-hero-badge.is-premium{ background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#78350f;border:1px solid rgba(120,53,15,.15); box-shadow:0 4px 10px rgba(120,53,15,.18); } .cbq-ts-hero-badge.is-free{ background:rgba(255,255,255,.95);color:#065f46; border:1px solid rgba(6,95,70,.1); } .cbq-ts-hero-body{padding:26px 32px 30px} .cbq-ts-hero-title{ /* v4.10.34 — Baloo Tamma 2 sits with taller ascenders than Inter; line-height bumped 1.15 → 1.2, letter-spacing relaxed from -.025em to -.01em. Keeps the display feel without crowding the glyphs. */ margin:0 0 10px;font-size:30px;font-weight:800;line-height:1.2; color:var(--ts-text);letter-spacing:-.01em; } .cbq-ts-hero-tagline{ margin:0;font-size:15px;line-height:1.65; color:var(--ts-text-muted);max-width:640px; } /* ========================================================================= * STATS STRIP — horizontal row of pill-cards * =========================================================================*/ .cbq-ts-stats-strip{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; } .cbq-ts-stat-card{ display:flex;align-items:center;gap:12px; background:var(--ts-bg);border:1px solid var(--ts-border); border-radius:var(--ts-radius);padding:14px 16px; transition:border-color .15s ease, transform .15s ease; } .cbq-ts-stat-card:hover{border-color:#cbd5e1;transform:translateY(-1px)} .cbq-ts-stat-icon{ width:38px;height:38px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:var(--ts-primary-soft);color:var(--ts-primary); border-radius:10px; } .cbq-ts-stat-body{min-width:0} .cbq-ts-stat-value{ font-size:18px;font-weight:800;color:var(--ts-text); line-height:1.15;letter-spacing:0; font-variant-numeric:tabular-nums; } .cbq-ts-stat-label{ font-size:11.5px;color:var(--ts-text-muted); margin-top:2px;font-weight:500; } /* ========================================================================= * TABS * =========================================================================*/ .cbq-ts-tabs{ display:flex;gap:4px; background:var(--ts-bg-soft); border:1px solid var(--ts-border); border-radius:12px;padding:4px; margin:0;overflow-x:auto; scrollbar-width:none; } .cbq-ts-tabs::-webkit-scrollbar{display:none} .cbq-ts-tab{ display:inline-flex;align-items:center;gap:6px; padding:10px 16px;font-size:13.5px;font-weight:600; color:var(--ts-text-muted);background:transparent; border:none;border-radius:8px;cursor:pointer; transition:all .15s ease;white-space:nowrap; font-family:inherit; } .cbq-ts-tab:hover{color:var(--ts-text);background:var(--ts-bg-soft)} .cbq-ts-tab.is-active{ background:var(--ts-bg);color:var(--ts-primary); box-shadow:0 1px 2px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.08); } .cbq-ts-tab:focus-visible{outline:2px solid var(--ts-primary);outline-offset:2px} .cbq-ts-tab-count{ display:inline-flex;align-items:center;justify-content:center; min-width:22px;height:20px;padding:0 7px; font-size:11px;font-weight:700;line-height:1; background:var(--ts-border);color:var(--ts-text-muted); border-radius:6px;font-variant-numeric:tabular-nums; } .cbq-ts-tab.is-active .cbq-ts-tab-count{background:var(--ts-primary-soft);color:var(--ts-primary)} .cbq-ts-tab-panel{display:none} .cbq-ts-tab-panel.is-active{display:block;animation:cbq-fade-in .22s ease} @keyframes cbq-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* Panel container (shared by overview/tests/faq) */ .cbq-ts-panel{ background:var(--ts-bg);border:1px solid var(--ts-border); border-radius:var(--ts-radius);padding:28px 32px; } .cbq-ts-panel h2{ font-size:19px;font-weight:700;margin:0 0 14px; color:var(--ts-text);letter-spacing:0; } .cbq-ts-panel-head{ display:flex;align-items:center;justify-content:space-between; gap:12px;flex-wrap:wrap;margin-bottom:16px; } .cbq-ts-panel-head h2{margin:0} .cbq-ts-panel-note{ display:inline-flex;align-items:center;gap:6px; padding:6px 12px;font-size:12px;font-weight:600; background:var(--ts-primary-soft);color:var(--ts-primary); border-radius:8px; } .cbq-ts-prose{font-size:14.5px;line-height:1.7;color:#334155} .cbq-ts-prose p{margin:0 0 14px} .cbq-ts-prose p:last-child{margin-bottom:0} .cbq-ts-section-h{ font-size:13px;font-weight:700;text-transform:uppercase; letter-spacing:.08em;color:var(--ts-text-muted); margin:28px 0 14px;padding-top:20px; border-top:1px solid var(--ts-border-soft); } /* Feature grid */ .cbq-ts-feature-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; } .cbq-ts-feature{ display:flex;gap:14px;padding:18px; background:var(--ts-bg-soft);border:1px solid transparent; border-radius:12px;transition:background .15s ease, border-color .15s ease, transform .15s ease; } .cbq-ts-feature:hover{ background:var(--ts-bg);border-color:var(--ts-border); transform:translateY(-2px);box-shadow:var(--ts-shadow-sm); } .cbq-ts-feature-icon{ width:40px;height:40px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:#fff;color:var(--ts-primary);border-radius:10px; box-shadow:inset 0 0 0 1px var(--ts-border); } .cbq-ts-feature:hover .cbq-ts-feature-icon{ background:var(--ts-primary-soft);box-shadow:inset 0 0 0 1px transparent; } .cbq-ts-feature-body{flex:1;min-width:0} .cbq-ts-feature-title{font-size:14px;font-weight:700;margin:0 0 4px;color:var(--ts-text);letter-spacing:-.005em} .cbq-ts-feature-desc{font-size:12.5px;color:var(--ts-text-muted);margin:0;line-height:1.5} /* ========================================================================= * TESTS LIST * =========================================================================*/ .cbq-ts-tests-list{ list-style:none;padding:0;margin:0; display:flex;flex-direction:column;gap:8px; } .cbq-ts-test-row{ display:flex;align-items:center;gap:16px;padding:14px 18px; background:var(--ts-bg);border:1px solid var(--ts-border);border-radius:12px; transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease; } .cbq-ts-test-row:hover{border-color:var(--ts-primary);box-shadow:var(--ts-shadow-md);transform:translateY(-1px)} .cbq-ts-test-row.is-locked{opacity:.65} .cbq-ts-test-row.is-locked:hover{border-color:var(--ts-border);box-shadow:none;transform:none} .cbq-ts-test-num{ width:36px;height:36px;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;letter-spacing:-.01em; color:var(--ts-primary);background:var(--ts-primary-soft); border-radius:10px;font-variant-numeric:tabular-nums; } .cbq-ts-test-info{flex:1;min-width:0} .cbq-ts-test-title{ font-size:14.5px;font-weight:600;color:var(--ts-text); margin:0 0 5px;letter-spacing:-.005em; /* Truncate extremely long titles on mobile without breaking the row */ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .cbq-ts-test-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ts-text-muted)} .cbq-ts-test-meta-item{display:inline-flex;align-items:center;gap:4px;white-space:nowrap} .cbq-ts-test-meta-item svg{opacity:.7;flex-shrink:0} .cbq-ts-test-meta-item.is-free-peek{color:var(--ts-success);font-weight:600} .cbq-ts-test-meta-item.is-free-peek svg{opacity:1;color:var(--ts-success)} .cbq-ts-test-action{ display:inline-flex;align-items:center;gap:5px;padding:9px 14px; font-size:12.5px;font-weight:600;border-radius:8px;text-decoration:none; white-space:nowrap;min-height:36px;box-sizing:border-box; background:var(--ts-primary-soft);color:var(--ts-primary); transition:all .15s ease;font-family:inherit; } .cbq-ts-test-action:hover{background:var(--ts-primary);color:#fff;transform:translateX(2px)} .cbq-ts-test-action.is-locked{background:var(--ts-border-soft);color:var(--ts-text-soft);pointer-events:none} .cbq-ts-test-action.is-locked:hover{transform:none} .cbq-ts-test-action-label{} /* placeholder — hide on narrow viewports */ /* Empty state (no tests yet) */ .cbq-ts-empty{ text-align:center;padding:56px 20px; background:var(--ts-bg-soft);border-radius:var(--ts-radius); } .cbq-ts-empty-icon{ width:64px;height:64px;margin:0 auto 14px; display:flex;align-items:center;justify-content:center; background:var(--ts-bg);color:var(--ts-text-muted); border-radius:16px;box-shadow:inset 0 0 0 1px var(--ts-border); } .cbq-ts-empty h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--ts-text)} .cbq-ts-empty p{margin:0;font-size:13.5px;color:var(--ts-text-muted)} /* ========================================================================= * FAQ * =========================================================================*/ .cbq-ts-faq-list{display:flex;flex-direction:column} .cbq-ts-faq{ padding:16px 0;border-bottom:1px solid var(--ts-border); } .cbq-ts-faq:first-child{padding-top:4px} .cbq-ts-faq:last-child{border-bottom:none;padding-bottom:4px} .cbq-ts-faq summary{ cursor:pointer;list-style:none; display:flex;justify-content:space-between;align-items:center;gap:14px; padding:4px 0; } .cbq-ts-faq summary::-webkit-details-marker{display:none} .cbq-ts-faq summary:focus-visible{outline:2px solid var(--ts-primary);outline-offset:4px;border-radius:4px} .cbq-ts-faq-q{font-weight:600;font-size:14.5px;color:var(--ts-text);letter-spacing:-.005em} .cbq-ts-faq-chevron{color:var(--ts-text-muted);flex-shrink:0;transition:transform .2s ease} .cbq-ts-faq[open] .cbq-ts-faq-chevron{transform:rotate(180deg);color:var(--ts-primary)} .cbq-ts-faq-a{ padding:12px 0 4px;font-size:13.5px;line-height:1.65; color:var(--ts-text-muted);max-width:680px; } /* ========================================================================= * CTA CARD (v4.10.36 — 3-column grid filling the full card width) * * Earlier attempts kept leaving dead space — v4.10.34's equal-height grid * left tall blanks when columns didn't balance; v4.10.35's flex row left a * blank when the actions column shoved itself to the right. * * New layout: a 3-column grid with each column sized to its content: * price auto | includes list (flex-grow 1, fills the gap) | actions auto * This means the includes list EXPANDS to absorb whatever extra width the * card has, instead of white space doing it. Row is middle-aligned. * Trust line sits on a second row beneath everything. * =========================================================================*/ .cbq-ts-cta-card{ background:var(--ts-bg);border:1px solid var(--ts-border); border-radius:var(--ts-radius-lg);padding:20px 24px; box-shadow:var(--ts-shadow-sm); display:flex;flex-direction:column;gap:14px; } .cbq-ts-cta-main{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center;gap:28px; } .cbq-ts-cta-price-block{min-width:0} .cbq-ts-cta-price{ font-size:30px;font-weight:800;color:var(--ts-text);line-height:1.05; letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap; } .cbq-ts-cta-price.is-free{ color:var(--ts-success); background:linear-gradient(135deg,var(--ts-success),#059669); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .cbq-ts-cta-price-note{font-size:12.5px;color:var(--ts-text-muted);margin-top:6px;white-space:nowrap} /* Middle column — includes list. This is the flex-grow column that absorbs extra card width, so the card never has an empty rectangle in the middle. */ .cbq-ts-cta-details{ min-width:0;padding:0 4px; border-left:1px solid var(--ts-border-soft); border-right:1px solid var(--ts-border-soft); padding-left:24px;padding-right:24px; } .cbq-ts-cta-includes-title{ /* Visually hidden for compact layout; kept for screen readers */ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .cbq-ts-cta-includes{ list-style:none;padding:0;margin:0; display:grid;grid-template-columns:1fr 1fr;gap:6px 20px; } .cbq-ts-cta-includes li{ font-size:12.5px;color:var(--ts-text-muted);line-height:1.4; display:inline-flex;align-items:center;gap:7px; } .cbq-ts-cta-includes li::before{ content:'';flex-shrink:0;width:13px;height:13px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3E%3Cpath d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'/%3E%3C/svg%3E") center/contain no-repeat; } /* Right column — enroll button stacked with the optional sample link */ .cbq-ts-cta-actions{ display:flex;flex-direction:column;align-items:stretch;gap:8px; min-width:220px; } /* Primary enroll button — used in both the card and the mobile bottom bar */ .cbq-ts-enroll-btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:13px 24px; font-size:14.5px;font-weight:600;letter-spacing:0; border:none;cursor:pointer; background:linear-gradient(135deg,var(--ts-primary) 0%,var(--ts-accent) 100%); color:#fff;border-radius:12px; font-family:inherit;min-height:46px;width:100%; transition:transform .1s ease, box-shadow .15s ease; box-shadow:0 4px 14px rgba(79,70,229,.28); white-space:nowrap; } .cbq-ts-enroll-btn--mobile{flex:1;min-height:44px;padding:12px 16px;font-size:14px;width:100%} .cbq-ts-enroll-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(79,70,229,.38)} .cbq-ts-enroll-btn:active{transform:translateY(0)} .cbq-ts-enroll-btn:disabled{opacity:.75;cursor:not-allowed;transform:none;box-shadow:none} .cbq-ts-enroll-btn:focus-visible{outline:2px solid var(--ts-primary);outline-offset:3px} .cbq-ts-enroll-btn.is-enrolled{ background:linear-gradient(135deg,var(--ts-success) 0%,#059669 100%); box-shadow:0 4px 14px rgba(16,185,129,.3); } .cbq-ts-cta-secondary{ display:inline-flex;align-items:center;justify-content:center;gap:6px; padding:10px 16px;font-size:12.5px;font-weight:600; color:var(--ts-primary);background:transparent; border:1px solid var(--ts-border);border-radius:10px; text-decoration:none;transition:all .15s ease;white-space:nowrap; } .cbq-ts-cta-secondary:hover{background:var(--ts-primary-soft);border-color:var(--ts-primary)} /* Trust line — second row of the card, full width */ .cbq-ts-cta-trust{ display:flex;align-items:center;gap:8px; padding-top:12px;border-top:1px solid var(--ts-border-soft); font-size:11.5px;color:var(--ts-text-soft);line-height:1.4; } .cbq-ts-cta-trust svg{color:var(--ts-success);flex-shrink:0} /* Spinner (replaces inline-style version) */ .cbq-ts-spinner{ display:inline-block;width:14px;height:14px; border:2px solid rgba(255,255,255,.35);border-top-color:#fff; border-radius:50%;animation:cbq-ts-spin .7s linear infinite; vertical-align:-2px; } @keyframes cbq-ts-spin{to{transform:rotate(360deg)}} /* ========================================================================= * MOBILE STICKY BOTTOM BAR * =========================================================================*/ .cbq-ts-mobile-bar{ display:none; /* hidden on everything except mobile */ position:fixed;left:0;right:0;bottom:0;z-index:40; background:var(--ts-bg); border-top:1px solid var(--ts-border); box-shadow:0 -6px 20px rgba(15,23,42,.08); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); } .cbq-ts-mobile-bar-inner{ display:flex;align-items:center;gap:12px; max-width:640px;margin:0 auto; } .cbq-ts-mobile-bar-price{flex:0 0 auto;min-width:0} .cbq-ts-mobile-bar-price-value{ font-size:19px;font-weight:800;color:var(--ts-text);line-height:1.1;letter-spacing:0; font-variant-numeric:tabular-nums; } .cbq-ts-mobile-bar-price-value.is-free{color:var(--ts-success)} .cbq-ts-mobile-bar-price-note{font-size:11px;color:var(--ts-text-muted);margin-top:3px} .cbq-ts-enroll-btn--mobile{flex:1;min-height:44px;padding:12px 16px;font-size:14px} /* ========================================================================= * TOAST * =========================================================================*/ .cbq-ts-toast{ position:fixed;bottom:24px;left:50%;transform:translateX(-50%); padding:12px 20px;background:var(--ts-text);color:#fff; font-size:13px;font-weight:500;border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.25);z-index:9999; opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease; max-width:calc(100vw - 32px);text-align:center; } .cbq-ts-toast.is-show{opacity:1;transform:translateX(-50%) translateY(-4px);pointer-events:auto} .cbq-ts-toast.is-success{background:var(--ts-success)} .cbq-ts-toast.is-error{background:var(--ts-danger)} /* ========================================================================= * RESPONSIVE * =========================================================================*/ /* Narrow desktop / wide tablet — tighten layout gaps */ @media (max-width: 1180px) { .cbq-ts-layout{gap:20px} .cbq-ts-stats-strip{gap:10px} } /* Tablet — drop CTA to 2-col (price+details on one row, actions below) */ @media (max-width: 1023px) { .cbq-ts-hero-title{font-size:26px} .cbq-ts-panel{padding:24px 24px} .cbq-ts-cta-card{padding:18px 22px} .cbq-ts-cta-main{ grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto;gap:18px 22px; } .cbq-ts-cta-actions{grid-column:1 / -1;min-width:0;flex-direction:row;gap:10px} .cbq-ts-cta-actions .cbq-ts-enroll-btn{flex:1 1 auto} .cbq-ts-cta-actions .cbq-ts-cta-secondary{flex:0 0 auto} } /* Small tablet / large phone — stats go 2x2, CTA card stacks fully vertical */ @media (max-width: 760px) { .cbq-series-frontend-wrap{padding:0 14px 120px} /* 120px bottom = space for mobile bar */ .mcqp-fe .mcqp-main .cbq-series-frontend-wrap{padding-bottom:120px} .cbq-ts-hero-card{border-radius:var(--ts-radius)} .cbq-ts-hero-band{height:110px;padding:14px 20px} .cbq-ts-hero-body{padding:22px 22px 24px} .cbq-ts-hero-title{font-size:22px;line-height:1.25} .cbq-ts-hero-tagline{font-size:14px} .cbq-ts-stats-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .cbq-ts-stat-card{padding:12px 14px;gap:10px} .cbq-ts-stat-icon{width:34px;height:34px} .cbq-ts-stat-value{font-size:16px} /* Archive cards — 1-up on phone, tighter cover */ .cbq-ts-grid{grid-template-columns:1fr;gap:14px} .cbq-ts-card-cover{height:88px;padding:10px 12px} .cbq-ts-card-cover-icon{width:36px;height:36px;top:12px;left:12px} .cbq-ts-card-cover-icon svg{width:20px;height:20px} .cbq-ts-card-body{padding:16px 16px 14px;gap:6px} .cbq-ts-card-title{font-size:15px;min-height:0} /* Toolbar + chips on mobile */ .cbq-ts-toolbar{gap:10px;margin-bottom:12px} .cbq-ts-search{min-width:0;max-width:none;flex:1 1 100%} .cbq-ts-sort{margin-left:0;flex:0 1 auto} .cbq-ts-sort select{height:38px;font-size:12.5px} .cbq-ts-chips-wrap{margin:0 0 18px} .cbq-ts-chips{padding:4px 14px;gap:7px} .cbq-ts-chip{height:36px;padding:7px 12px;font-size:12.5px;gap:6px} .cbq-ts-chip svg{width:13px;height:13px} .cbq-ts-chip-count{min-width:18px;height:16px;font-size:10.5px;padding:0 5px} /* CTA card: stack price / details / actions fully vertically */ .cbq-ts-cta-card{padding:18px 18px;gap:14px} .cbq-ts-cta-main{grid-template-columns:1fr;gap:14px} .cbq-ts-cta-details{ padding:12px 0;margin:0; border-left:none;border-right:none; border-top:1px solid var(--ts-border-soft); border-bottom:1px solid var(--ts-border-soft); } .cbq-ts-cta-includes{grid-template-columns:1fr 1fr;gap:8px 18px} .cbq-ts-cta-actions{flex-direction:column;gap:8px} .cbq-ts-cta-price{font-size:26px} .cbq-ts-tabs{padding:3px} .cbq-ts-tab{padding:9px 14px;font-size:13px} .cbq-ts-panel{padding:20px 18px;border-radius:var(--ts-radius)} .cbq-ts-panel h2{font-size:17px} .cbq-ts-feature-grid{grid-template-columns:1fr;gap:10px} .cbq-ts-feature{padding:14px} .cbq-ts-test-row{padding:12px 14px;gap:12px} .cbq-ts-test-num{width:30px;height:30px;border-radius:8px;font-size:12px} .cbq-ts-test-title{font-size:13.5px;margin-bottom:4px} .cbq-ts-test-meta{gap:10px;font-size:11.5px} .cbq-ts-test-action{padding:7px 10px;font-size:12px;min-height:32px} .cbq-ts-test-action-label{display:none} .cbq-ts-test-action.is-locked .cbq-ts-test-action-label{display:inline} .cbq-ts-mobile-bar{display:block} } /* Ultra-small phones */ @media (max-width: 400px) { .cbq-ts-breadcrumb{font-size:11.5px;gap:6px} .cbq-ts-breadcrumb span:last-child{max-width:160px} .cbq-ts-hero-title{font-size:20px} .cbq-ts-hero-band{padding:12px 16px} .cbq-ts-hero-body{padding:20px 18px 22px} .cbq-ts-panel{padding:18px 14px} .cbq-ts-mobile-bar-inner{gap:10px} .cbq-ts-mobile-bar-price-value{font-size:17px} .cbq-ts-enroll-btn--mobile{font-size:13.5px;padding:11px 14px} } /* ========================================================================= * NOT FOUND / dark theme * =========================================================================*/ .cbq-ts-notfound{text-align:center;padding:80px 20px} .cbq-ts-notfound h2{font-size:28px;margin:0 0 10px;color:var(--ts-text)} .cbq-ts-notfound p{color:var(--ts-text-muted)} .cbq-ts-notfound a{color:var(--ts-primary);text-decoration:none;font-weight:600} [data-theme="dark"] .cbq-series-frontend-wrap{ --ts-text:#f1f5f9; --ts-text-muted:#94a3b8; --ts-text-soft:#64748b; --ts-border:#334155; --ts-border-soft:#1e293b; --ts-bg:#1e293b; --ts-bg-soft:#0f172a; --ts-primary-soft:rgba(99,102,241,.15); --ts-primary-softer:rgba(99,102,241,.08); }