/* ═══════════════════════════════════════════════════════════════ SITE THEME SYSTEM — 5 templates via data-theme on Set from Admin → Business Information → Design Template ═══════════════════════════════════════════════════════════════ */ /* ── Template 1: Classic Blue (default) ── */ :root, [data-theme="1"] { --theme-primary: #0056D2; --theme-primary-dark: #004494; --theme-primary-light: #3B82F6; --theme-accent: #2563EB; --theme-accent-light: #60A5FA; --theme-heading: #111827; --theme-bar-from: #1D4ED8; --theme-bar-to: #4338CA; --theme-hero-from: #EFF6FF; --theme-hero-via: #EEF2FF; --theme-hero-to: #F5F3FF; --theme-hero-border: rgba(37, 99, 235, 0.15); --theme-hero-accent: #2563EB; --theme-cta-from: #2563EB; --theme-cta-to: #4F46E5; --theme-cta-text: #FFFFFF; --theme-cta-shadow: rgba(37, 99, 235, 0.35); --theme-card-accent: #0056D2; --theme-badge-bg: #EFF6FF; --theme-badge-text: #1E40AF; --theme-badge-border: rgba(37, 99, 235, 0.25); --theme-popular-from: #2563EB; --theme-popular-to: #4F46E5; --theme-popular-text: #FFFFFF; --theme-shadow: 0 20px 40px -12px rgba(37, 99, 235, 0.12); --theme-shadow-lg: 0 32px 64px -16px rgba(37, 99, 235, 0.16); --theme-display-font: 'Inter', 'Source Sans Pro', system-ui, sans-serif; --theme-action-bg: #2563EB; --theme-action-hover: #1D4ED8; } /* ── Template 2: Charcoal Pro (v-72 courses style) ── */ [data-theme="2"] { --theme-primary: #111827; --theme-primary-dark: #030712; --theme-primary-light: #374151; --theme-accent: #2563EB; --theme-accent-light: #60A5FA; --theme-heading: #111827; --theme-bar-from: #111827; --theme-bar-to: #1F2937; --theme-hero-from: #F9FAFB; --theme-hero-via: #F3F4F6; --theme-hero-to: #FFFFFF; --theme-hero-border: rgba(17, 24, 39, 0.08); --theme-hero-accent: #2563EB; --theme-cta-from: #111827; --theme-cta-to: #1F2937; --theme-cta-text: #FFFFFF; --theme-cta-shadow: rgba(17, 24, 39, 0.25); --theme-card-accent: #2563EB; --theme-badge-bg: #F3F4F6; --theme-badge-text: #111827; --theme-badge-border: rgba(17, 24, 39, 0.12); --theme-popular-from: #2563EB; --theme-popular-to: #1D4ED8; --theme-popular-text: #FFFFFF; --theme-shadow: 0 20px 40px -12px rgba(17, 24, 39, 0.1); --theme-shadow-lg: 0 32px 64px -16px rgba(17, 24, 39, 0.14); --theme-display-font: 'Inter', 'Source Sans Pro', system-ui, sans-serif; --theme-action-bg: #2563EB; --theme-action-hover: #1D4ED8; } /* ── Template 3: Indigo Modern ── */ [data-theme="3"] { --theme-primary: #4F46E5; --theme-primary-dark: #4338CA; --theme-primary-light: #818CF8; --theme-accent: #6366F1; --theme-accent-light: #A5B4FC; --theme-heading: #1E1B4B; --theme-bar-from: #4338CA; --theme-bar-to: #6366F1; --theme-hero-from: #EEF2FF; --theme-hero-via: #E0E7FF; --theme-hero-to: #F5F3FF; --theme-hero-border: rgba(99, 102, 241, 0.2); --theme-hero-accent: #6366F1; --theme-cta-from: #4F46E5; --theme-cta-to: #7C3AED; --theme-cta-text: #FFFFFF; --theme-cta-shadow: rgba(79, 70, 229, 0.35); --theme-card-accent: #6366F1; --theme-badge-bg: #EEF2FF; --theme-badge-text: #4338CA; --theme-badge-border: rgba(99, 102, 241, 0.25); --theme-popular-from: #6366F1; --theme-popular-to: #8B5CF6; --theme-popular-text: #FFFFFF; --theme-shadow: 0 20px 40px -12px rgba(79, 70, 229, 0.12); --theme-shadow-lg: 0 32px 64px -16px rgba(79, 70, 229, 0.16); --theme-display-font: 'Inter', 'Source Sans Pro', system-ui, sans-serif; --theme-action-bg: #2563EB; --theme-action-hover: #1D4ED8; } /* ── Template 4: Corporate Navy ── */ [data-theme="4"] { --theme-primary: #1E3A8A; --theme-primary-dark: #1E3A8A; --theme-primary-light: #3B82F6; --theme-accent: #3B82F6; --theme-accent-light: #93C5FD; --theme-heading: #0F172A; --theme-bar-from: #1E3A8A; --theme-bar-to: #1D4ED8; --theme-hero-from: #EFF6FF; --theme-hero-via: #DBEAFE; --theme-hero-to: #F8FAFC; --theme-hero-border: rgba(30, 58, 138, 0.15); --theme-hero-accent: #1E3A8A; --theme-cta-from: #1E3A8A; --theme-cta-to: #2563EB; --theme-cta-text: #FFFFFF; --theme-cta-shadow: rgba(30, 58, 138, 0.3); --theme-card-accent: #1E3A8A; --theme-badge-bg: #DBEAFE; --theme-badge-text: #1E3A8A; --theme-badge-border: rgba(30, 58, 138, 0.2); --theme-popular-from: #1D4ED8; --theme-popular-to: #2563EB; --theme-popular-text: #FFFFFF; --theme-shadow: 0 20px 40px -12px rgba(30, 58, 138, 0.12); --theme-shadow-lg: 0 32px 64px -16px rgba(30, 58, 138, 0.16); --theme-display-font: 'Inter', 'Source Sans Pro', system-ui, sans-serif; --theme-action-bg: #2563EB; --theme-action-hover: #1D4ED8; } /* ── Template 5: Refined Serif ── */ [data-theme="5"] { --theme-primary: #0056D2; --theme-primary-dark: #004494; --theme-primary-light: #3B82F6; --theme-accent: #2563EB; --theme-accent-light: #60A5FA; --theme-heading: #0F172A; --theme-bar-from: #0F172A; --theme-bar-to: #1E3A8A; --theme-hero-from: #FAFAF8; --theme-hero-via: #F8FAFC; --theme-hero-to: #EFF6FF; --theme-hero-border: rgba(0, 86, 210, 0.12); --theme-hero-accent: #0056D2; --theme-cta-from: #0056D2; --theme-cta-to: #2563EB; --theme-cta-text: #FFFFFF; --theme-cta-shadow: rgba(0, 86, 210, 0.3); --theme-card-accent: #0056D2; --theme-badge-bg: #EFF6FF; --theme-badge-text: #004494; --theme-badge-border: rgba(0, 86, 210, 0.2); --theme-popular-from: #0056D2; --theme-popular-to: #2563EB; --theme-popular-text: #FFFFFF; --theme-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.08); --theme-shadow-lg: 0 32px 64px -16px rgba(15, 23, 42, 0.12); --theme-display-font: 'Playfair Display', Georgia, 'Times New Roman', serif; --theme-action-bg: #0056D2; --theme-action-hover: #004494; } /* ── Typography ── */ .font-display { font-family: var(--theme-display-font); letter-spacing: -0.02em; } body { font-family: 'Inter', 'Source Sans Pro', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Announcement bar ── */ .premium-announcement { background: linear-gradient(90deg, var(--theme-bar-from) 0%, var(--theme-bar-to) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.12); letter-spacing: 0.02em; } .premium-announcement .premium-accent-text { color: var(--theme-accent-light); } .premium-accent-text { color: var(--theme-accent-light); } /* ── Header ── */ .premium-header { position: relative; z-index: 100; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 0 rgba(37, 99, 235, 0.06); } #language-switcher-container { position: relative; z-index: 110; } #language-menu:not(.hidden) { z-index: 120 !important; } /* ── Hero sections ── */ .premium-hero { background: linear-gradient(145deg, var(--theme-hero-from) 0%, var(--theme-hero-via) 45%, var(--theme-hero-to) 100%); border: 1px solid var(--theme-hero-border); box-shadow: var(--theme-shadow); position: relative; overflow: hidden; } .premium-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--theme-accent); opacity: 0.35; } .premium-hero .hero-blob-primary, .premium-hero .hero-blob-secondary { display: none; } /* ── Primary CTA ── */ .premium-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--theme-action-bg); color: #fff !important; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 0.9375rem; line-height: 1.25; border: none; border-radius: 0.5rem; padding: 0.6875rem 1.375rem; min-height: 2.75rem; width: auto; max-width: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; text-decoration: none !important; cursor: pointer; } .premium-cta:hover { background: var(--theme-action-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); color: #fff !important; } .premium-cta svg { width: 1rem; height: 1rem; flex-shrink: 0; } .premium-cta--hero { align-self: flex-start; } .premium-cta--block { display: flex; width: 100%; } /* ── Tier tabs ── */ .premium-tier-tab { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.75rem; transition: all 0.25s ease; } .premium-tier-tab:hover { border-color: color-mix(in srgb, var(--theme-accent) 50%, transparent); box-shadow: var(--theme-shadow); transform: translateY(-1px); } .premium-tier-tab-active { background: var(--theme-primary) !important; color: #fff !important; border: 1px solid var(--theme-primary) !important; box-shadow: 0 2px 8px var(--theme-cta-shadow) !important; } .premium-tier-tab-active span:last-child { color: rgba(255, 255, 255, 0.85) !important; } /* ── Catalog / course cards ── */ .premium-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-top: 3px solid var(--theme-card-accent); border-radius: 0.875rem; box-shadow: var(--theme-shadow); transition: transform 0.25s ease, box-shadow 0.25s ease; overflow: hidden; } .premium-card:hover { transform: translateY(-4px); box-shadow: var(--theme-shadow-lg); border-top-color: var(--theme-accent-light); } .premium-card .premium-price { color: var(--theme-heading); font-weight: 800; font-size: 1.125rem; } .premium-card .font-display:hover, .premium-card h3:hover { color: var(--theme-primary) !important; } /* ── Badges ── */ .premium-badge-accent { background: var(--theme-badge-bg); color: var(--theme-badge-text); border: 1px solid var(--theme-badge-border); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.65rem; border-radius: 0.375rem; } .premium-badge-popular { background: linear-gradient(135deg, var(--theme-popular-from), var(--theme-popular-to)); color: var(--theme-popular-text); font-weight: 800; letter-spacing: 0.05em; } /* ── Trust strip ── */ .premium-trust-strip { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; padding: 0.75rem 1.25rem; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--theme-hero-border); border-radius: 0.75rem; backdrop-filter: blur(8px); } .premium-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--theme-heading); letter-spacing: 0.02em; } .premium-trust-item svg, .premium-stat svg { color: var(--theme-accent); flex-shrink: 0; } /* ── Pricing sidebar ── */ .premium-pricing-wrap { background: linear-gradient(160deg, var(--theme-hero-from) 0%, #fff 50%, var(--theme-hero-to) 100%); border: 1px solid var(--theme-hero-border); border-radius: 1rem; box-shadow: var(--theme-shadow-lg); } .premium-pricing-wrap .premium-pricing-inner { background: #fff; border-radius: 0.875rem; } .premium-pricing-highlight { border: 2px solid var(--theme-accent) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 12%, transparent); } /* ── Section headings ── */ .premium-section-title { font-family: var(--theme-display-font); color: var(--theme-heading); letter-spacing: -0.02em; position: relative; padding-bottom: 0.75rem; } .premium-section-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 3rem; height: 3px; background: linear-gradient(90deg, var(--theme-accent), transparent); border-radius: 2px; } /* ── Stats bar (home) ── */ .premium-stat { padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--theme-hero-border); border-radius: 0.5rem; backdrop-filter: blur(4px); } .premium-stat-value { color: var(--theme-heading); font-weight: 800; } .premium-stat-divider { background: color-mix(in srgb, var(--theme-accent) 25%, transparent); } /* ── Animations ── */ @keyframes premium-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .animate-float { animation: premium-float 6s ease-in-out infinite; } .animate-float-delayed { animation: premium-float 6s ease-in-out 2s infinite; } /* ── Content cards ── */ .premium-content-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 1rem; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); } .premium-content-card h2 { font-family: var(--theme-display-font); color: var(--theme-heading); } /* ── Value callout ── */ .premium-value-callout { background: linear-gradient(90deg, color-mix(in srgb, var(--theme-accent) 12%, transparent), transparent); border-left: 3px solid var(--theme-accent); padding: 0.5rem 1rem; border-radius: 0 0.5rem 0.5rem 0; font-weight: 600; color: var(--theme-primary-dark); font-size: 0.875rem; } /* ── Search ── */ .premium-search-field { position: relative; display: flex; align-items: center; gap: 0.5rem; } .premium-search-field--inline { display: flex; align-items: center; gap: 0.375rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 0.25rem; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .premium-search-field--hero { padding: 0.3rem; border-radius: 0.625rem; } .premium-search-field--hero .premium-search-input { height: 2.75rem; line-height: 2.75rem; font-size: 1rem; } .premium-search-field--hero .premium-search-btn--compact { height: 2.75rem; padding: 0 1.25rem !important; font-size: 0.875rem; } .premium-search-field--inline:focus-within { border-color: var(--theme-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 18%, transparent); } .premium-search-field--inline .premium-search-input { flex: 1; min-width: 0; height: 2.25rem; padding: 0 0.75rem !important; line-height: 2.25rem; border: none !important; border-radius: 0.375rem !important; box-shadow: none !important; background: transparent !important; } .premium-search-field--inline .premium-search-input:focus { box-shadow: none !important; outline: none; border: none !important; } .premium-search-input { border: 1px solid #e5e7eb !important; border-radius: 0.5rem !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important; background: #fff !important; line-height: 1.5; } .premium-search-input:focus { border-color: var(--theme-accent) !important; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-accent) 18%, transparent) !important; } .premium-search-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; background: var(--theme-action-bg) !important; border: none !important; color: #fff !important; font-weight: 600; font-size: 0.875rem; line-height: 1; border-radius: 0.5rem !important; padding: 0.625rem 1.25rem !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); transition: background 0.15s ease, transform 0.15s ease; white-space: nowrap; cursor: pointer; } .premium-search-btn:hover { background: var(--theme-action-hover) !important; transform: translateY(-1px); } .premium-search-btn--compact { position: static; transform: none; flex-shrink: 0; align-self: center; height: 2.25rem; padding: 0 0.85rem !important; font-size: 0.8125rem; line-height: 1; min-height: 0; } .premium-search-btn--compact:hover { transform: translateY(-1px); } /* ── Career path chart ── */ .career-path-chart { width: 100%; height: 260px; min-height: 0; margin-bottom: 0.5rem; overflow: hidden; line-height: 0; } .career-path-description { margin-top: 0; } .career-path-description > p:first-child { margin-top: 0; } @media (max-width: 767px) { .career-path-chart { height: 340px; } } .premium-course-units-wrap { margin-top: 0.25rem; } .premium-course-units { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; } .premium-course-units li { position: relative; margin: 0; padding: 0.875rem 1rem 0.875rem 2.75rem; background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%); border: 1px solid #e2e8f0; border-radius: 0.75rem; color: #1e293b; font-size: 0.98rem; font-weight: 500; line-height: 1.45; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); } .premium-course-units li::before { content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 0.55rem; height: 0.55rem; border-radius: 9999px; background: var(--theme-primary, #2563eb); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); } /* ── Enterprise footer ── */ .premium-footer { background: var(--theme-primary-dark); color: rgba(255, 255, 255, 0.88); position: relative; border-top: 2px solid var(--theme-primary); } .premium-footer-main { position: relative; z-index: 1; padding: 3.5rem 0 2.5rem; } .premium-footer-top { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .premium-footer-top { grid-template-columns: minmax(240px, 320px) 1fr; gap: 4rem; } } .premium-footer-logo-link { display: inline-block; margin-bottom: 1.25rem; } .premium-footer-logo { height: var(--brand-logo-height, 48px); width: auto; max-width: 220px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.95; } .premium-footer-tagline { font-family: 'Playfair Display', Georgia, serif; font-size: 1.0625rem; line-height: 1.65; color: rgba(255, 255, 255, 0.78); margin: 0 0 1.5rem; max-width: 28rem; letter-spacing: 0.01em; } .premium-footer-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .premium-footer-trust li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .premium-footer-trust-icon { color: var(--theme-accent-light); font-size: 0.5rem; line-height: 1; } .premium-footer-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } @media (min-width: 640px) { .premium-footer-columns { grid-template-columns: repeat(4, 1fr); gap: 2rem; } } .premium-footer-heading { font-family: 'Inter', system-ui, sans-serif; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0 0 1.125rem; padding-bottom: 0.625rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .premium-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; } .premium-footer-links a { color: rgba(255, 255, 255, 0.82); font-size: 0.875rem; font-weight: 400; text-decoration: none; transition: color 0.2s ease, transform 0.2s ease; display: inline-block; } .premium-footer-links a:hover { color: #fff; transform: translateX(2px); } .premium-footer-contact { margin: 0 0 0.5rem; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.65); } .premium-footer-contact a { color: rgba(255, 255, 255, 0.82); text-decoration: none; transition: color 0.2s ease; } .premium-footer-contact a:hover { color: #fff; } .premium-footer-location { margin-bottom: 1.25rem; } .premium-footer-social-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin: 0 0 0.75rem; } .premium-footer-social { display: flex; flex-wrap: wrap; gap: 0.5rem; } .premium-footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.375rem; color: rgba(255, 255, 255, 0.75); font-size: 0.875rem; text-decoration: none; background: rgba(255, 255, 255, 0.04); transition: all 0.2s ease; } .premium-footer-social-link:hover { color: #fff; border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 20%, transparent); transform: translateY(-1px); } .premium-footer-bottom { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.1); } .premium-footer-bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.25rem 0; text-align: center; } @media (min-width: 768px) { .premium-footer-bottom-inner { flex-direction: row; justify-content: space-between; text-align: left; } } .premium-footer-copyright { margin: 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.01em; } .premium-footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; } .premium-footer-legal a { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.2s ease; } .premium-footer-legal a:hover { color: rgba(255, 255, 255, 0.9); } .premium-footer-legal-divider { display: none; width: 1px; height: 0.875rem; background: rgba(255, 255, 255, 0.15); } @media (min-width: 768px) { .premium-footer-legal-divider { display: inline-block; } } /* ── Enrollment toast ── */ .premium-enroll-toast { position: fixed; bottom: 0.75rem; left: 0.75rem; z-index: 50; width: min(17rem, calc(100vw - 1.5rem)); background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 0.5rem; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 8px 20px -4px rgba(0, 0, 0, 0.08); cursor: pointer; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, box-shadow 0.2s ease, bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; font-size: 0.6875rem; } .premium-enroll-toast::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent)); } .premium-enroll-toast:not(.opacity-0):not(.translate-y-full):hover { box-shadow: 0 8px 16px -2px rgba(0, 0, 0, 0.08), 0 20px 36px -6px rgba(0, 0, 0, 0.12); transform: translateY(-2px); } .premium-enroll-toast.translate-y-full { transform: translateY(calc(100% + 1.5rem)); } .premium-enroll-toast.opacity-0 { opacity: 0; pointer-events: none; } .premium-enroll-toast:not(.opacity-0) { opacity: 1; } .premium-enroll-toast__inner { padding: 0.4rem 0.5rem 0; } .premium-enroll-toast__row { display: flex; gap: 0.4rem; align-items: flex-start; } .premium-enroll-toast__avatar { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; background: color-mix(in srgb, var(--theme-accent) 8%, #f8fafc); border: 1px solid color-mix(in srgb, var(--theme-accent) 15%, transparent); border-radius: 50%; } .premium-enroll-toast__main { flex: 1; min-width: 0; } .premium-enroll-toast__top { display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.125rem; } .premium-enroll-toast__badge { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--theme-primary); background: color-mix(in srgb, var(--theme-accent) 10%, transparent); padding: 0.1rem 0.3rem; border-radius: 9999px; white-space: nowrap; } .premium-enroll-toast__badge--sm { font-size: 0.5rem; padding: 0.075rem 0.25rem; } .premium-enroll-toast__pulse { width: 4px; height: 4px; border-radius: 50%; background: #10b981; flex-shrink: 0; animation: enroll-pulse 2s ease-in-out infinite; } @keyframes enroll-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } .premium-enroll-toast__meta-inline { display: flex; align-items: center; gap: 0.2rem; margin-left: auto; font-size: 0.5625rem; color: #9ca3af; } .premium-enroll-toast__rating svg { width: 8px; height: 8px; } .premium-enroll-toast__rating { display: inline-flex; align-items: center; gap: 0.15rem; color: #b45309; font-weight: 600; } .premium-enroll-toast__dot { color: #d1d5db; } .premium-enroll-toast__time { color: #9ca3af; white-space: nowrap; } .premium-enroll-toast__mute { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; padding: 0; border: none; background: transparent; color: #9ca3af; border-radius: 0.2rem; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .premium-enroll-toast__mute svg { width: 11px; height: 11px; } .premium-enroll-toast__mute:hover { color: #6b7280; background: #f3f4f6; } .premium-enroll-toast__who { margin: 0 0 0.0625rem; font-size: 0.625rem; line-height: 1.3; color: #6b7280; } .premium-enroll-toast__who strong { color: #111827; font-weight: 600; } .premium-enroll-toast__course { margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.3; color: #111827; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .premium-enroll-toast__footer { display: flex; align-items: center; justify-content: space-between; gap: 0.375rem; padding-bottom: 0.35rem; } .premium-enroll-toast__level { font-size: 0.5rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #6b7280; background: #f3f4f6; padding: 0.0625rem 0.3rem; border-radius: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 6.5rem; } .premium-enroll-toast__link { font-size: 0.5625rem; font-weight: 600; color: var(--theme-primary); text-decoration: none; white-space: nowrap; transition: color 0.15s ease; } .premium-enroll-toast__link:hover { color: var(--theme-primary-dark); } .premium-enroll-toast__progress { height: 2px; background: #f3f4f6; } .premium-enroll-toast__progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent)); border-radius: 0 1px 1px 0; } .premium-enroll-toast.muted { width: min(14rem, calc(100vw - 1.5rem)); } .premium-enroll-toast__muted { display: flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.5rem; } .premium-enroll-toast__muted.hidden { display: none; } .premium-enroll-toast__muted-flag { font-size: 0.75rem; line-height: 1; } .premium-enroll-toast__muted-title { flex: 1; min-width: 0; font-size: 0.5625rem; font-weight: 600; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .premium-enroll-toast__unmute { flex-shrink: 0; font-size: 0.5rem; font-weight: 600; color: var(--theme-primary); background: none; border: none; padding: 0; cursor: pointer; } .premium-enroll-toast__unmute:hover { text-decoration: underline; } /* ── Floating widgets: Tidio chat + back-to-top (right-aligned stack) ── */ :root { --fab-right: 1rem; --fab-chat-size: 56px; --fab-gap: 0.75rem; --fab-bottom: 1rem; } #backToTop { position: fixed !important; right: var(--fab-right) !important; bottom: calc(var(--fab-bottom) + var(--fab-chat-size) + var(--fab-gap)) !important; z-index: 40; transition: opacity 0.3s ease, transform 0.2s ease, bottom 0.32s cubic-bezier(0.16, 1, 0.3, 1); } body.page-home #backToTop { bottom: var(--fab-bottom) !important; } #chatButton, #chatPopup { right: var(--fab-right) !important; bottom: var(--fab-bottom) !important; }