/* ═══════════════════════════════════════════════════════════════════ DASHMIER — Dark premium system (Quantum Lab + Courses catalog) Loaded on pages with ═══════════════════════════════════════════════════════════════════ */ .ql-page{background:#06070D;color:#AEB6C6;} .ql-page ::selection{background:rgba(124,58,237,.35);color:#fff;} .ql-page main{position:relative;overflow:hidden;} .ql-page a{color:inherit;} /* colour helpers */ .ql-page .txt-grad{background:linear-gradient(100deg,#8B5CF6 0%,#22D3EE 55%,#60A5FA 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} /* particle / starfield canvas */ .ql-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9;} /* ── Hero ──────────────────────────────────────────────────────────── */ .ql-hero{position:relative;padding:calc(var(--nav-h) + 74px) 0 88px;overflow:hidden; background:radial-gradient(120% 90% at 78% -10%, #171033 0%, #0A0B16 46%, #06070D 100%);} .ql-hero__orb{position:absolute;border-radius:50%;filter:blur(10px);pointer-events:none;z-index:0;opacity:.5;} .ql-hero__inner{position:relative;z-index:2;} .ql-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#C4B5FD;margin-bottom:22px;} .ql-eyebrow::before{content:'';width:26px;height:1px;background:linear-gradient(90deg,transparent,#8B5CF6);} .ql-kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#C4B5FD;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.32);border-radius:var(--r-full);padding:7px 15px;margin-bottom:24px;} .ql-kick i{color:#22D3EE;} .ql-h1{font-family:var(--font-head);font-weight:800;font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.04;letter-spacing:-.03em;color:#F8FAFC;margin-bottom:22px;} .ql-lead{font-size:clamp(1rem,1.4vw,1.16rem);line-height:1.75;color:#9AA3B7;max-width:38em;} .ql-hero--center{text-align:center;} .ql-hero--center .ql-lead{margin-left:auto;margin-right:auto;} /* breadcrumb (dark) */ .ql-bc{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#6B7280;margin-bottom:22px;} .ql-bc a{color:#8B94A8;}.ql-bc a:hover{color:#C4B5FD;} .ql-hero--center .ql-bc{justify-content:center;} /* ── Buttons (dark) ────────────────────────────────────────────────── */ .ql-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:600;font-size:.95rem;padding:13px 24px;border-radius:var(--r-full);border:1px solid transparent;cursor:pointer;transition:transform var(--t-fast),box-shadow var(--t-base),background var(--t-base);text-decoration:none;} .ql-btn i{transition:transform var(--t-fast);} .ql-btn:hover i.arrow,.ql-btn:hover .arrow{transform:translateX(3px);} .ql-btn--primary{color:#fff;background:linear-gradient(100deg,#7C3AED,#4F46E5);box-shadow:0 10px 30px rgba(124,58,237,.4);} .ql-btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(124,58,237,.5);} .ql-btn--ghost{color:#E7E9F0;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16);} .ql-btn--ghost:hover{background:rgba(255,255,255,.09);border-color:rgba(139,92,246,.5);transform:translateY(-2px);} .ql-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;} .ql-hero--center .ql-cta-row{justify-content:center;} /* ── Sections ──────────────────────────────────────────────────────── */ .ql-sec{position:relative;z-index:1;padding:84px 0;} .ql-sec--tight{padding:56px 0;} .ql-sechead{max-width:640px;margin:0 auto 52px;text-align:center;} .ql-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8B5CF6;margin-bottom:16px;} .ql-label i{color:#22D3EE;} .ql-h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12;letter-spacing:-.03em;color:#F1F5F9;} .ql-sub{font-size:1.02rem;line-height:1.72;color:#8B94A8;margin-top:14px;} .ql-sechead .ql-label{justify-content:center;} /* divider glow line */ .ql-hr{height:1px;border:0;background:linear-gradient(90deg,transparent,rgba(139,92,246,.4),transparent);margin:0;} /* ── Grids & cards ─────────────────────────────────────────────────── */ .ql-grid{display:grid;gap:20px;} .ql-grid--2{grid-template-columns:repeat(2,1fr);} .ql-grid--3{grid-template-columns:repeat(3,1fr);} .ql-grid--4{grid-template-columns:repeat(4,1fr);} .ql-card{position:relative;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);padding:30px 28px;overflow:hidden;transition:transform var(--t-base),border-color var(--t-base),background var(--t-base);} .ql-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(139,92,246,.5),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--t-base);pointer-events:none;} .ql-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.045);border-color:rgba(139,92,246,.35);} .ql-card:hover::before{opacity:1;} .ql-card__ic{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;margin-bottom:18px;background:linear-gradient(135deg,#7C3AED,#4F46E5);box-shadow:0 8px 22px rgba(124,58,237,.34);} .ql-card__t{font-family:var(--font-head);font-size:1.16rem;font-weight:700;color:#F1F5F9;letter-spacing:-.02em;margin-bottom:10px;} .ql-card__d{font-size:.92rem;line-height:1.68;color:#8B94A8;} .ql-card__lnk{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:.86rem;font-weight:600;color:#A78BFA;} .ql-card__lnk:hover{color:#C4B5FD;} /* accent colour utility (set --ac inline) */ .ql-ac .ql-card__ic{background:linear-gradient(135deg,var(--ac,#7C3AED),color-mix(in srgb,var(--ac,#7C3AED) 55%,#000));box-shadow:0 8px 22px color-mix(in srgb,var(--ac,#7C3AED) 40%,transparent);} /* ── Stats band ────────────────────────────────────────────────────── */ .ql-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);overflow:hidden;} .ql-stat{background:#0A0B14;padding:30px 22px;text-align:center;} .ql-stat b{display:block;font-family:var(--font-head);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;background:linear-gradient(120deg,#A78BFA,#22D3EE);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .ql-stat span{display:block;font-size:.82rem;color:#7C8598;margin-top:6px;} /* ── Feature list ──────────────────────────────────────────────────── */ .ql-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;} .ql-list li{display:flex;gap:13px;align-items:flex-start;font-size:.95rem;color:#B7BFCF;line-height:1.6;} .ql-list li i{color:#22D3EE;margin-top:3px;flex-shrink:0;} /* ── Chips / tags ──────────────────────────────────────────────────── */ .ql-tags{display:flex;flex-wrap:wrap;gap:9px;} .ql-chip{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:#C7CEDC;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-full);padding:8px 14px;transition:all var(--t-fast);} .ql-chip i{color:#A78BFA;} .ql-chip:hover{border-color:rgba(139,92,246,.5);color:#fff;} /* ── Big CTA band ──────────────────────────────────────────────────── */ .ql-cta{position:relative;border-radius:var(--r-2xl);padding:60px 40px;text-align:center;overflow:hidden;background:radial-gradient(120% 140% at 50% 0%,#20164a 0%,#0c0d1c 60%);border:1px solid rgba(139,92,246,.28);} .ql-cta h2{font-family:var(--font-head);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);color:#fff;letter-spacing:-.03em;margin-bottom:14px;} .ql-cta p{color:#9AA3B7;max-width:34em;margin:0 auto 26px;line-height:1.7;} /* ── Reveal on scroll ──────────────────────────────────────────────── */ .ql-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);} .ql-reveal.is-in{opacity:1;transform:none;} /* ── Signature visuals ─────────────────────────────────────────────── */ .ql-spin{animation:qlspin 26s linear infinite;transform-origin:center;} .ql-spin--rev{animation:qlspin 34s linear infinite reverse;transform-origin:center;} @keyframes qlspin{to{transform:rotate(360deg);}} .ql-float{animation:qlfloat 6s ease-in-out infinite;} @keyframes qlfloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}} .ql-pulse{animation:qlpulse 3s ease-in-out infinite;} @keyframes qlpulse{0%,100%{opacity:.35;}50%{opacity:1;}} .ql-dash{stroke-dasharray:4 6;animation:qldash 3s linear infinite;} @keyframes qldash{to{stroke-dashoffset:-40;}} /* ── Course catalog cards ──────────────────────────────────────────── */ .qc-toolbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px;} .qc-tab{font-size:.86rem;font-weight:600;color:#9AA3B7;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-full);padding:9px 18px;cursor:pointer;transition:all var(--t-fast);} .qc-tab:hover{color:#fff;border-color:rgba(139,92,246,.45);} .qc-tab.is-active{color:#fff;background:linear-gradient(100deg,#7C3AED,#4F46E5);border-color:transparent;box-shadow:0 8px 22px rgba(124,58,237,.35);} .qc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .qc-card{position:relative;display:flex;flex-direction:column;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);overflow:hidden;transition:transform var(--t-base),border-color var(--t-base);} .qc-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--ac,#7C3AED) 55%,transparent);} .qc-card__media{position:relative;height:150px;overflow:hidden;background:radial-gradient(120% 120% at 20% 10%,color-mix(in srgb,var(--ac,#7C3AED) 45%,#0b0d18),#0b0d18);display:flex;align-items:center;justify-content:center;} .qc-card__media svg{width:100%;height:100%;display:block;} .qc-badge{position:absolute;top:12px;left:12px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#fff;background:color-mix(in srgb,var(--ac,#7C3AED) 65%,transparent);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-full);padding:5px 11px;backdrop-filter:blur(4px);} .qc-card__body{padding:22px 22px 0;flex:1;display:flex;flex-direction:column;} .qc-card__t{font-family:var(--font-head);font-size:1.14rem;font-weight:700;color:#F1F5F9;letter-spacing:-.02em;margin-bottom:9px;} .qc-card__d{font-size:.9rem;line-height:1.62;color:#8B94A8;flex:1;} .qc-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:.76rem;color:#7C8598;} .qc-meta span{display:inline-flex;align-items:center;gap:5px;} .qc-meta i{color:var(--ac,#A78BFA);} .qc-card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;margin-top:18px;border-top:1px solid rgba(255,255,255,.07);} .qc-price{font-family:var(--font-head);font-weight:700;color:#fff;font-size:1.02rem;} .qc-price small{display:block;font-family:var(--font-body);font-weight:500;font-size:.68rem;color:#7C8598;} .qc-go{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:#fff;background:color-mix(in srgb,var(--ac,#7C3AED) 30%,transparent);border:1px solid color-mix(in srgb,var(--ac,#7C3AED) 55%,transparent);border-radius:var(--r-md);padding:9px 15px;transition:all var(--t-fast);} .qc-go:hover{background:var(--ac,#7C3AED);} .qc-card.is-hidden{display:none;} /* ── Blog / post cards ─────────────────────────────────────────────── */ .ql-post{display:flex;flex-direction:column;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-xl);overflow:hidden;transition:transform var(--t-base),border-color var(--t-base);} .ql-post:hover{transform:translateY(-5px);border-color:rgba(139,92,246,.4);} .ql-post__media{height:158px;background:radial-gradient(120% 120% at 30% 10%,#241a55,#0b0d18);position:relative;overflow:hidden;} .ql-post__cat{position:absolute;top:12px;left:12px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:#C4B5FD;background:rgba(10,10,20,.6);border:1px solid rgba(139,92,246,.4);border-radius:var(--r-full);padding:5px 11px;} .ql-post__body{padding:22px;} .ql-post__t{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:#F1F5F9;line-height:1.35;letter-spacing:-.02em;margin-bottom:9px;} .ql-post__x{font-size:.88rem;color:#8B94A8;line-height:1.6;} .ql-post__meta{display:flex;gap:12px;margin-top:16px;font-size:.76rem;color:#6B7280;} /* ── Responsive ────────────────────────────────────────────────────── */ @media (max-width:1024px){ .ql-grid--4{grid-template-columns:repeat(2,1fr);} .ql-grid--3{grid-template-columns:repeat(2,1fr);} .qc-grid{grid-template-columns:repeat(2,1fr);} .ql-stats{grid-template-columns:repeat(2,1fr);} } @media (max-width:680px){ .ql-hero{padding:calc(var(--nav-h) + 48px) 0 64px;} .ql-sec{padding:60px 0;} .ql-grid--2,.ql-grid--3,.ql-grid--4{grid-template-columns:1fr;} .qc-grid{grid-template-columns:1fr;} .ql-cta{padding:44px 22px;} } /* ── Overview hero split: responsive ───────────────────────────────── */ .ql-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;} .ql-hero-grid svg{max-width:320px;} @media (max-width:860px){ .ql-hero-grid{grid-template-columns:1fr;gap:26px;} .ql-hero-grid > div:last-child{order:-1;} .ql-hero-grid svg{max-width:220px;} } @media (max-width:680px){ .ql-hero-grid svg{max-width:190px;} .ql-h1{font-size:clamp(2rem,8vw,2.6rem);} .ql-lead{font-size:.98rem;} .ql-cta-row .ql-btn{flex:1;justify-content:center;} } /* ── Course delivery-mode chips ────────────────────────────────────── */ .qc-modes{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;} .qc-mode{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;color:#C7CEDC;background:color-mix(in srgb,var(--ac,#7C3AED) 14%,transparent);border:1px solid color-mix(in srgb,var(--ac,#7C3AED) 40%,transparent);border-radius:var(--r-full);padding:5px 11px;} .qc-mode i{color:var(--ac,#A78BFA);font-size:.78rem;} /* ── Ways to learn (mode cards) ────────────────────────────────────── */ .ql-modecard{text-align:center;} .ql-modecard .ql-card__ic{margin:0 auto 16px;}