/* Theme Name: CasriHubTheme Theme URI: https://casrihub.com/ Author: CasriHub Description: A premium, modern, plugin-free WordPress theme with advanced dark/light mode support. Version: 1.4.1 Text Domain: casrihubtheme Tags: dark-mode, modern, premium, tailwind */ /* ================================================= DESIGN TOKENS — CSS Custom Properties Real premium dark/light mode via :root and [data-theme] ================================================= */ :root { /* Brand */ --ch-brand: #4f6ef7; --ch-brand-hover: #3b56e0; --ch-brand-glow: rgba(79, 110, 247, 0.25); --ch-accent: #818cf8; /* Surfaces */ --ch-bg: #ffffff; --ch-bg-2: #f8fafc; --ch-bg-3: #f1f5f9; --ch-surface: #ffffff; --ch-surface-2: #f8fafc; --ch-surface-3: #f1f5f9; /* Borders */ --ch-border: #e2e8f0; --ch-border-2: #cbd5e1; /* Text */ --ch-text-primary: #0f172a; --ch-text-secondary: #475569; --ch-text-muted: #94a3b8; --ch-text-invert: #ffffff; /* Header */ --ch-header-bg: rgba(255, 255, 255, 0.85); --ch-header-border: rgba(0, 0, 0, 0.07); /* Cards */ --ch-card-bg: #ffffff; --ch-card-border: #e2e8f0; --ch-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 8px 24px rgba(0, 0, 0, 0.04); --ch-card-hover-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); /* Inputs */ --ch-input-bg: #f8fafc; --ch-input-border: #e2e8f0; --ch-input-text: #0f172a; --ch-input-placeholder: #94a3b8; --ch-input-focus: #4f6ef7; /* Footer */ --ch-footer-bg: #0f172a; --ch-footer-text: #94a3b8; --ch-footer-border: #1e293b; /* Status Colors */ --ch-success: #22c55e; --ch-warning: #f59e0b; --ch-danger: #ef4444; --ch-info: #3b82f6; /* Radius */ --ch-radius-sm: 0.5rem; --ch-radius: 0.75rem; --ch-radius-lg: 1rem; --ch-radius-xl: 1.5rem; /* Transitions */ --ch-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1); --ch-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Typography */ --ch-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ch-font-mono: 'JetBrains Mono', 'Fira Code', monospace; } /* ── DARK MODE ── applied when */ [data-theme="dark"] { --ch-brand: #6479f8; --ch-brand-hover: #7b8ef9; --ch-brand-glow: rgba(100, 121, 248, 0.3); --ch-accent: #a5b4fc; --ch-bg: #05080f; --ch-bg-2: #0a0f1a; --ch-bg-3: #0d1220; --ch-surface: #111827; --ch-surface-2: #1a2336; --ch-surface-3: #1e273d; --ch-border: rgba(255, 255, 255, 0.07); --ch-border-2: rgba(255, 255, 255, 0.12); --ch-text-primary: #f1f5f9; --ch-text-secondary: #94a3b8; --ch-text-muted: #4b5563; --ch-text-invert: #0f172a; --ch-header-bg: rgba(5, 8, 15, 0.85); --ch-header-border: rgba(255, 255, 255, 0.05); --ch-card-bg: #111827; --ch-card-border: rgba(255, 255, 255, 0.06); --ch-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3); --ch-card-hover-shadow: 0 8px 40px rgba(0, 0, 0, 0.5); --ch-input-bg: rgba(255, 255, 255, 0.04); --ch-input-border: rgba(255, 255, 255, 0.1); --ch-input-text: #f1f5f9; --ch-input-placeholder: rgba(255, 255, 255, 0.3); --ch-input-focus: #6479f8; --ch-footer-bg: #05080f; --ch-footer-text: #64748b; --ch-footer-border: rgba(255, 255, 255, 0.05); } /* ================================================= BASE ================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--ch-font); font-size: 0.9375rem; line-height: 1.6; background-color: var(--ch-bg); color: var(--ch-text-primary); display: flex; flex-direction: column; min-height: 100vh; transition: background-color var(--ch-transition-slow), color var(--ch-transition-slow); -webkit-font-smoothing: antialiased; } main { flex: 1 0 auto; } a { color: var(--ch-brand); text-decoration: none; } a:hover { color: var(--ch-brand-hover); } img { display: block; max-width: 100%; } /* ================================================= HEADER ================================================= */ #ch-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: var(--ch-header-bg); border-bottom: 1px solid var(--ch-header-border); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); transition: background var(--ch-transition-slow), border-color var(--ch-transition-slow), box-shadow var(--ch-transition-slow); } #ch-header.scrolled { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); } .ch-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; height: 64px; gap: 1rem; } /* Logo */ .ch-logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex-shrink: 0; } .ch-logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--ch-brand), #7c3aed); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; box-shadow: 0 4px 12px var(--ch-brand-glow); transition: transform var(--ch-transition); } .ch-logo:hover .ch-logo-icon { transform: rotate(-6deg) scale(1.08); } .ch-logo-name { font-size: 1.05rem; font-weight: 700; color: var(--ch-text-primary); letter-spacing: -0.02em; transition: color var(--ch-transition); } .ch-logo:hover .ch-logo-name { color: var(--ch-brand); } /* Main Nav */ .ch-nav { flex: 1; display: none; } @media (min-width: 1024px) { .ch-nav { display: flex; align-items: center; gap: 0.25rem; } } /* Nav item */ .ch-nav-item { position: relative; } .ch-nav-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500; color: var(--ch-text-secondary); transition: background var(--ch-transition), color var(--ch-transition); white-space: nowrap; cursor: pointer; } .ch-nav-link:hover { background: var(--ch-surface-3); color: var(--ch-text-primary); text-decoration: none; } .ch-nav-link .ch-nav-arrow { font-size: 0.65rem; transition: transform var(--ch-transition); opacity: 0.6; } .ch-nav-item:hover .ch-nav-arrow { transform: rotate(180deg); } /* ── Mega Menu ── */ .ch-mega-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 580px; background: var(--ch-surface); border: 1px solid var(--ch-border); border-radius: var(--ch-radius-xl); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08); padding: 1.25rem; opacity: 0; visibility: hidden; transition: opacity var(--ch-transition), transform var(--ch-transition), visibility var(--ch-transition); pointer-events: none; z-index: 200; margin-top: 5px; /* Added small margin for breathing room */ } /* Transparent bridge to prevent menu from closing when moving mouse */ .ch-mega-menu::after { content: ''; position: absolute; top: -20px; left: 0; right: 0; height: 25px; background: transparent; } [data-theme="dark"] .ch-mega-menu { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4); } .ch-nav-item:hover .ch-mega-menu, .ch-nav-item:focus-within .ch-mega-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* Arrow */ .ch-mega-menu::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: var(--ch-surface); border-left: 1px solid var(--ch-border); border-top: 1px solid var(--ch-border); transform: translateX(-50%) rotate(45deg); } .ch-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } .ch-mega-grid-2 { grid-template-columns: repeat(2, 1fr); } .ch-mega-item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.85rem; border-radius: 10px; text-decoration: none; color: inherit; transition: background var(--ch-transition); } .ch-mega-item:hover { background: var(--ch-surface-3); text-decoration: none; } .ch-mega-icon { width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .ch-mega-text { min-width: 0; } .ch-mega-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ch-text-primary); margin-bottom: 0.2rem; } .ch-mega-desc { display: block; font-size: 0.775rem; color: var(--ch-text-muted); line-height: 1.4; } .ch-mega-divider { height: 1px; background: var(--ch-border); margin: 0.75rem 0; } .ch-mega-footer { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.85rem 0; } .ch-mega-badge { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.05em; } /* Header right actions */ .ch-header-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } /* Theme toggle */ .ch-theme-toggle { display: flex; align-items: center; background: var(--ch-surface-3); border: 1px solid var(--ch-border); border-radius: 10px; padding: 3px; gap: 2px; } .ch-theme-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: none; background: none; cursor: pointer; color: var(--ch-text-muted); font-size: 0.85rem; transition: all var(--ch-transition); } .ch-theme-btn:hover { color: var(--ch-text-primary); background: var(--ch-surface-2); } .ch-theme-btn.active { background: var(--ch-surface); color: var(--ch-brand); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .ch-theme-btn.active { background: var(--ch-surface-2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } /* Language Toggle — reuses .ch-theme-toggle container */ .ch-lang-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: none; background: none; cursor: pointer; color: var(--ch-text-muted); transition: all var(--ch-transition); } .ch-lang-btn:hover { color: var(--ch-text-primary); background: var(--ch-surface-2); } .ch-lang-btn.active { background: var(--ch-surface); color: var(--ch-brand); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } [data-theme="dark"] .ch-lang-btn.active { background: var(--ch-surface-2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } /* ===== RTL (Arabic) Layout Fixes ===== */ [dir="rtl"] body { font-family: var(--ch-font-body, 'Cairo', 'Inter', sans-serif); text-align: right; } [dir="rtl"] .ch-mega-footer { flex-direction: row-reverse; } [dir="rtl"] .ch-mega-footer .ch-btn-primary { margin-left: 0; margin-right: auto; } [dir="rtl"] .ch-footer-bottom { flex-direction: row-reverse; } [dir="rtl"] .ch-home-hero-copy { text-align: right; } [dir="rtl"] .ch-home-hero-actions, [dir="rtl"] .ch-home-trust-row, [dir="rtl"] .ch-home-proof-actions, [dir="rtl"] .ch-home-cta-grid { justify-content: flex-end; } [dir="rtl"] .ch-home-shot-head, [dir="rtl"] .ch-proof-card-row, [dir="rtl"] .ch-license-point { flex-direction: row-reverse; } [dir="rtl"] .ch-home-shot-meta { text-align: left; } /* CTA Button */ .ch-btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem; border-radius: var(--ch-radius); background: var(--ch-brand); color: #fff; font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer; transition: background var(--ch-transition), transform var(--ch-transition), box-shadow var(--ch-transition); box-shadow: 0 4px 14px var(--ch-brand-glow); text-decoration: none; white-space: nowrap; } .ch-btn-primary:hover { background: var(--ch-brand-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px var(--ch-brand-glow); text-decoration: none; } /* Mobile toggle button */ .ch-mobile-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--ch-border); background: var(--ch-surface-3); border-radius: 9px; cursor: pointer; color: var(--ch-text-secondary); font-size: 1rem; transition: all var(--ch-transition); } .ch-mobile-btn:hover { color: var(--ch-text-primary); background: var(--ch-surface-2); } @media (min-width: 1024px) { .ch-mobile-btn { display: none; } } /* Mobile drawer */ .ch-mobile-menu { display: none; background: var(--ch-surface); border-top: 1px solid var(--ch-border); padding: 1rem 1.5rem 1.5rem; } .ch-mobile-menu.open { display: block; } .ch-mobile-nav-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.85rem; border-radius: var(--ch-radius); color: var(--ch-text-secondary); font-size: 0.9rem; font-weight: 500; transition: background var(--ch-transition), color var(--ch-transition); text-decoration: none; } .ch-mobile-nav-link:hover { background: var(--ch-surface-3); color: var(--ch-text-primary); } .ch-mobile-nav-link i { width: 20px; text-align: center; color: var(--ch-brand); } /* Header spacer */ .ch-header-spacer { height: 64px; } /* ================================================= FOOTER ================================================= */ .ch-footer { background: var(--ch-footer-bg); border-top: 1px solid var(--ch-footer-border); padding: 3.5rem 0 2rem; position: relative; overflow: hidden; } .ch-footer-accent { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6); } .ch-footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } .ch-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--ch-footer-border); } @media (min-width: 1024px) { .ch-footer-grid { grid-template-columns: 5fr 7fr; } } .ch-footer-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .ch-footer-col-title { font-size: 0.7rem; font-weight: 700; color: #e2e8f0; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; padding-left: 0.6rem; border-left: 2px solid var(--ch-brand); } .ch-footer-link { display: block; font-size: 0.85rem; color: var(--ch-footer-text); margin-bottom: 0.6rem; transition: color var(--ch-transition), transform var(--ch-transition); } .ch-footer-link:hover { color: #e2e8f0; transform: translateX(2px); text-decoration: none; } .ch-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding-top: 1.5rem; font-size: 0.8rem; color: var(--ch-footer-text); } .ch-footer-bottom-links { display: flex; gap: 1.25rem; } .ch-footer-bottom-links a { color: var(--ch-footer-text); transition: color var(--ch-transition); } .ch-footer-bottom-links a:hover { color: var(--ch-brand); text-decoration: none; } /* Social buttons */ .ch-social-links { display: flex; gap: 0.5rem; margin-top: 1rem; } .ch-social-btn { width: 36px; height: 36px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: center; color: var(--ch-footer-text); font-size: 0.9rem; transition: all var(--ch-transition); text-decoration: none; } .ch-social-btn:hover { background: var(--ch-brand); border-color: var(--ch-brand); color: #fff; transform: translateY(-2px); text-decoration: none; } /* ================================================= BUTTONS (Global) ================================================= */ .ch-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 1.4rem; border-radius: var(--ch-radius); font-size: 0.9rem; font-weight: 600; border: none; cursor: pointer; text-decoration: none; transition: all var(--ch-transition); white-space: nowrap; } .ch-btn-primary { background: var(--ch-brand); color: #fff; box-shadow: 0 4px 14px var(--ch-brand-glow); } .ch-btn-primary:hover { background: var(--ch-brand-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px var(--ch-brand-glow); text-decoration: none; } .ch-btn-ghost { background: var(--ch-surface-3); color: var(--ch-text-primary); border: 1px solid var(--ch-border); } .ch-btn-ghost:hover { background: var(--ch-surface-2); color: var(--ch-text-primary); text-decoration: none; } .ch-btn-outline { background: transparent; color: var(--ch-brand); border: 1px solid var(--ch-brand); } .ch-btn-outline:hover { background: var(--ch-brand); color: #fff; text-decoration: none; } .ch-btn-lg { padding: 0.85rem 2rem; font-size: 1rem; border-radius: var(--ch-radius-lg); } .ch-btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; } /* ================================================= CARDS ================================================= */ .ch-card { background: var(--ch-card-bg); border: 1px solid var(--ch-card-border); border-radius: var(--ch-radius-xl); box-shadow: var(--ch-card-shadow); transition: box-shadow var(--ch-transition-slow), transform var(--ch-transition-slow), border-color var(--ch-transition-slow); } .ch-card:hover { box-shadow: var(--ch-card-hover-shadow); transform: translateY(-2px); border-color: var(--ch-border-2); } /* ================================================= FORMS (Global) ================================================= */ .ch-input, .ch-select, .ch-textarea { width: 100%; padding: 0.75rem 1rem; background: var(--ch-input-bg); border: 1px solid var(--ch-input-border); border-radius: var(--ch-radius); color: var(--ch-input-text); font-family: var(--ch-font); font-size: 0.9rem; transition: border-color var(--ch-transition), box-shadow var(--ch-transition); outline: none; appearance: none; } .ch-input::placeholder, .ch-textarea::placeholder { color: var(--ch-input-placeholder); } .ch-input:focus, .ch-select:focus, .ch-textarea:focus { border-color: var(--ch-input-focus); box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.12); } .ch-form-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ch-text-secondary); margin-bottom: 0.5rem; } .ch-form-help { display: block; font-size: 0.78rem; color: var(--ch-text-muted); margin-top: 0.35rem; } .ch-select option { background: var(--ch-surface); color: var(--ch-input-text); } /* ================================================= ALERTS ================================================= */ .ch-alert { padding: 1rem 1.25rem; border-radius: var(--ch-radius); font-size: 0.9rem; display: flex; gap: 0.75rem; align-items: flex-start; } .ch-alert-success { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #16a34a; } [data-theme="dark"] .ch-alert-success { color: #4ade80; } .ch-alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #dc2626; } [data-theme="dark"] .ch-alert-error { color: #f87171; } .ch-alert-info { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); color: #2563eb; } [data-theme="dark"] .ch-alert-info { color: #60a5fa; } /* ================================================= BADGES & CHIPS ================================================= */ .ch-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.75rem; border-radius: 100px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } .ch-badge-brand { background: rgba(79, 110, 247, 0.12); color: var(--ch-brand); border: 1px solid rgba(79, 110, 247, 0.2); } .ch-badge-success { background: rgba(34, 197, 94, 0.12); color: var(--ch-success); border: 1px solid rgba(34, 197, 94, 0.2); } .ch-badge-warning { background: rgba(245, 158, 11, 0.12); color: var(--ch-warning); border: 1px solid rgba(245, 158, 11, 0.2); } .ch-badge-danger { background: rgba(239, 68, 68, 0.12); color: var(--ch-danger); border: 1px solid rgba(239, 68, 68, 0.2); } /* ================================================= UTILITY ================================================= */ .ch-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } .ch-section { padding: 5rem 0; } .ch-section-sm { padding: 3rem 0; } .ch-text-gradient { background: linear-gradient(135deg, var(--ch-brand), var(--ch-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ch-divider { height: 1px; background: var(--ch-border); margin: 0; } .ch-surface-glow { background: radial-gradient(ellipse at top, rgba(79, 110, 247, 0.08) 0%, transparent 70%); } /* ================================================= SECTION LABELS ================================================= */ .ch-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ch-brand); margin-bottom: 0.85rem; } /* ================================================= HOMEPAGE PRODUCT LAYOUT ================================================= */ .ch-home-hero-grid, .ch-product-proof-grid, .ch-license-grid { display: grid; gap: 2rem; } .ch-home-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; } .ch-home-hero-copy { text-align: left; } .ch-home-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: radial-gradient(circle at top, rgba(79, 110, 247, 0.09), transparent 32%), linear-gradient(180deg, var(--ch-bg-2), var(--ch-bg)); padding: clamp(5rem, 8vw, 7rem) 0 clamp(4rem, 7vw, 6rem); } .ch-home-hero-gridlines, .ch-home-hero-glow, .ch-home-hero-fade { position: absolute; pointer-events: none; } .ch-home-hero-gridlines { inset: 0; background-image: linear-gradient(var(--ch-border) 1px, transparent 1px), linear-gradient(90deg, var(--ch-border) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.28; } .ch-home-hero-glow { border-radius: 999px; filter: blur(150px); animation: ch-blob 8s ease-in-out infinite; } .ch-home-hero-glow-primary { top: 12%; left: 16%; width: min(520px, 42vw); height: min(520px, 42vw); background: var(--ch-brand); opacity: 0.08; } .ch-home-hero-glow-secondary { right: 14%; bottom: 10%; width: min(420px, 34vw); height: min(420px, 34vw); background: #7c3aed; opacity: 0.06; animation-direction: reverse; animation-duration: 10s; } .ch-home-hero-layout { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr); gap: clamp(2rem, 4vw, 4rem); } .ch-home-hero-copy { max-width: 760px; } .ch-home-hero-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 1rem; border-radius: 999px; background: rgba(79, 110, 247, 0.1); border: 1px solid rgba(79, 110, 247, 0.24); color: var(--ch-brand); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.5rem; box-shadow: 0 12px 30px rgba(79, 110, 247, 0.08); } .ch-home-hero-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ch-brand); animation: pulse 2s ease-in-out infinite; } .ch-home-hero-title { margin: 0 0 1.35rem; max-width: 760px; font-size: clamp(2.95rem, 7vw, 5.9rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.98; text-wrap: balance; } .ch-home-hero-title-gradient { display: inline-block; background: linear-gradient(135deg, #1d4ed8 0%, #4f6ef7 32%, #6d5cf7 64%, #8b5cf6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: 0 18px 38px rgba(79, 110, 247, 0.16); } [data-theme="dark"] .ch-home-hero-title-gradient { background: linear-gradient(135deg, #dbe7ff 0%, #8fb0ff 28%, #7c8dff 58%, #c4b5fd 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .ch-home-hero-lead { max-width: 640px; margin: 0 0 1.1rem; color: var(--ch-text-secondary); font-size: 1.12rem; line-height: 1.78; } .ch-home-hero-lead-secondary { margin-bottom: 2.2rem; font-size: 1rem; color: color-mix(in srgb, var(--ch-text-secondary) 90%, var(--ch-text-primary) 10%); } .ch-home-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.45rem; } .ch-home-hero-actions .ch-btn { min-width: 190px; box-shadow: 0 18px 40px rgba(79, 110, 247, 0.14); } .ch-home-hero-actions .ch-btn-ghost { background: color-mix(in srgb, var(--ch-surface-3) 90%, transparent); box-shadow: none; } .ch-home-trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; max-width: 660px; } .ch-home-trust-chip { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.95rem; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--ch-card-border) 82%, transparent); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 90%), color-mix(in srgb, var(--ch-card-bg) 92%, transparent); box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08); color: var(--ch-text-secondary); font-size: 0.93rem; line-height: 1.5; transition: transform var(--ch-transition-slow), box-shadow var(--ch-transition-slow), border-color var(--ch-transition-slow); } .ch-home-trust-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ch-brand) 30%, var(--ch-card-border)); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .ch-home-trust-icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: color-mix(in srgb, var(--ch-chip-hue, var(--ch-brand)) 12%, transparent); color: var(--ch-chip-hue, var(--ch-brand)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ch-chip-hue, var(--ch-brand)) 16%, transparent); } .ch-home-trust-icon .ch-trust-badge-icon { color: inherit; font-size: 0.92rem; } .ch-home-hero-visual { align-self: stretch; } .ch-home-hero-visual .ch-home-shot-card { background: linear-gradient(180deg, rgba(79, 110, 247, 0.08), transparent 35%), var(--ch-card-bg); } .ch-home-hero-visual .ch-home-shot-card-main { min-height: clamp(320px, 40vw, 420px); } .ch-home-hero-visual .ch-home-shot-frame { background: radial-gradient(circle at top, rgba(79, 110, 247, 0.1), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 90%), linear-gradient(135deg, var(--ch-surface-2), var(--ch-surface-3)); } .ch-home-hero-fade { left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--ch-bg)); } .ch-home-shot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .ch-home-shot-card { background: var(--ch-card-bg); border: 1px solid var(--ch-card-border); border-radius: var(--ch-radius-xl); box-shadow: var(--ch-card-shadow); padding: 1rem; min-height: 200px; display: flex; flex-direction: column; gap: 0.9rem; transition: transform var(--ch-transition-slow), box-shadow var(--ch-transition-slow), border-color var(--ch-transition-slow); } .ch-home-shot-card-main { grid-column: 1 / -1; min-height: 340px; } .ch-home-shot-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .ch-home-shot-meta { font-size: 0.78rem; color: var(--ch-text-muted); } .ch-home-shot-frame { flex: 1; min-height: 180px; border-radius: calc(var(--ch-radius-lg) + 2px); border: 1px solid var(--ch-card-border); background: linear-gradient(180deg, rgba(79, 110, 247, 0.07), transparent 42%), linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), linear-gradient(135deg, var(--ch-surface-2), var(--ch-surface-3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 28px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.08); display: flex; align-items: center; justify-content: center; padding: 1.1rem; overflow: hidden; } .ch-home-shot-frame-compact { min-height: 180px; } .ch-home-shot-inner { text-align: left; max-width: 320px; } .ch-home-shot-label { display: block; font-size: 0.95rem; font-weight: 700; color: var(--ch-text-primary); margin-bottom: 0.45rem; } .ch-home-shot-caption { display: block; font-size: 0.85rem; line-height: 1.7; color: var(--ch-text-secondary); } .ch-home-shot-image { width: 100%; height: auto; max-width: 100%; display: block; border-radius: 16px; object-fit: contain; object-position: center; background: rgba(2, 6, 23, 0.28); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16), 0 6px 16px rgba(15, 23, 42, 0.1); transform: scale(1); transition: transform var(--ch-transition-slow), box-shadow var(--ch-transition-slow); cursor: zoom-in; outline: none; } .ch-home-shot-card:hover, .ch-proof-media:hover, .ch-license-shot-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(15, 23, 42, 0.16); border-color: var(--ch-border-2); } .ch-home-shot-frame:hover .ch-home-shot-image, .ch-home-shot-card:hover .ch-home-shot-image, .ch-license-shot-card:hover .ch-home-shot-image { transform: scale(1.02); box-shadow: 0 24px 52px rgba(15, 23, 42, 0.2), 0 8px 20px rgba(15, 23, 42, 0.12); } .ch-home-shot-image-main { max-height: 620px; } .ch-product-proof-grid, .ch-license-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .ch-proof-points { display: grid; gap: 1rem; } .ch-proof-media { padding: 1.6rem; } .ch-proof-media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } .ch-home-cta-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .ch-license-shot-card { background: linear-gradient(180deg, rgba(79, 110, 247, 0.04), transparent 35%), var(--ch-card-bg); } .ch-license-shot-frame { min-height: 260px; padding: 1rem; } .ch-trust-badge, .ch-proof-card-row, .ch-license-point { width: 100%; } .ch-trust-badge-text, .ch-proof-card-copy, .ch-license-point-text { flex: 1 1 auto; min-width: 0; } .ch-license-points { direction: inherit; } [data-theme="dark"] .ch-home-shot-card, [data-theme="dark"] .ch-proof-media, [data-theme="dark"] .ch-license-shot-card { background: radial-gradient(circle at top, rgba(79, 110, 247, 0.08), transparent 34%), var(--ch-card-bg); } [data-theme="dark"] .ch-home-shot-image { background: rgba(2, 6, 23, 0.55); } .ch-home-shot-image:focus-visible { box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.28), 0 24px 52px rgba(15, 23, 42, 0.2), 0 8px 20px rgba(15, 23, 42, 0.12); } .ch-nav-link, .ch-theme-btn, .ch-lang-btn { transition: transform var(--ch-transition), background var(--ch-transition), color var(--ch-transition), box-shadow var(--ch-transition); } .ch-nav-link:hover, .ch-theme-btn:hover, .ch-lang-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08); } .ch-btn { position: relative; overflow: hidden; transition: transform var(--ch-transition), box-shadow var(--ch-transition), background var(--ch-transition), border-color var(--ch-transition), color var(--ch-transition); } .ch-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 60%); opacity: 0; transition: opacity var(--ch-transition); pointer-events: none; } .ch-btn:hover::after { opacity: 1; } .ch-btn:active { transform: translateY(1px) scale(0.99); } .ch-btn > * { position: relative; z-index: 1; } .ch-home-shot-frame { transition: transform var(--ch-transition-slow), box-shadow var(--ch-transition-slow), border-color var(--ch-transition-slow); } .ch-home-shot-card:hover .ch-home-shot-frame, .ch-proof-media:hover .ch-home-shot-frame, .ch-license-shot-card:hover .ch-home-shot-frame { border-color: var(--ch-border-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 20px 46px rgba(15, 23, 42, 0.16), 0 6px 14px rgba(15, 23, 42, 0.12); } .ch-home-lightbox-open { overflow: hidden; } .ch-home-lightbox[hidden] { display: none; } .ch-home-lightbox { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 2vw, 1.8rem); } .ch-home-lightbox-backdrop { position: absolute; inset: 0; background: rgba(3, 7, 18, 0.76); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transition: opacity var(--ch-transition-slow); } .ch-home-lightbox-dialog { position: relative; width: min(1320px, 100%); max-height: calc(100vh - 2rem); background: linear-gradient(180deg, rgba(79, 110, 247, 0.08), transparent 38%), var(--ch-card-bg); border: 1px solid var(--ch-card-border); border-radius: 28px; box-shadow: 0 40px 120px rgba(2, 6, 23, 0.45); overflow: hidden; opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity var(--ch-transition-slow), transform var(--ch-transition-slow); } .ch-home-lightbox.is-open .ch-home-lightbox-backdrop { opacity: 1; } .ch-home-lightbox.is-open .ch-home-lightbox-dialog { opacity: 1; transform: translateY(0) scale(1); } .ch-home-lightbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ch-card-border); } .ch-home-lightbox-kicker { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ch-brand); } .ch-home-lightbox-title { margin: 0; font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 800; color: var(--ch-text-primary); } .ch-home-lightbox-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; border: 1px solid var(--ch-card-border); background: var(--ch-surface-3); color: var(--ch-text-primary); cursor: pointer; transition: transform var(--ch-transition), background var(--ch-transition), box-shadow var(--ch-transition); } .ch-home-lightbox-close:hover { transform: translateY(-1px); background: var(--ch-surface-2); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14); } .ch-home-lightbox-stage { padding: clamp(1rem, 2vw, 1.6rem); display: flex; align-items: center; justify-content: center; min-height: 52vh; background: radial-gradient(circle at top, rgba(79, 110, 247, 0.1), transparent 44%), linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 28%); } .ch-home-lightbox-image { width: auto; max-width: 100%; max-height: calc(100vh - 11rem); height: auto; border-radius: 20px; box-shadow: 0 28px 72px rgba(2, 6, 23, 0.28); background: rgba(2, 6, 23, 0.22); } html[dir="rtl"] #main-content { direction: rtl; } html[dir="rtl"] #main-content .ch-home-hero-grid, html[dir="rtl"] #main-content .ch-product-proof-grid, html[dir="rtl"] #main-content .ch-license-grid { direction: rtl; } html[dir="rtl"] #main-content .ch-home-hero-copy, html[dir="rtl"] #main-content .ch-home-shot-inner, html[dir="rtl"] #main-content #features .ch-card, html[dir="rtl"] #main-content .ch-proof-points .ch-card, html[dir="rtl"] #main-content .ch-proof-media, html[dir="rtl"] #main-content #pricing .ch-card, html[dir="rtl"] #main-content .ch-home-lightbox-toolbar, html[dir="rtl"] #main-content .ch-home-lightbox-copy { text-align: right; } html[dir="rtl"] #main-content .ch-home-hero-actions, html[dir="rtl"] #main-content .ch-home-trust-row, html[dir="rtl"] #main-content .ch-home-proof-actions, html[dir="rtl"] #main-content .ch-home-cta-grid { direction: rtl; justify-content: flex-start; } html[dir="rtl"] #main-content .ch-home-pill, html[dir="rtl"] #main-content .ch-btn, html[dir="rtl"] #main-content .ch-home-shot-head, html[dir="rtl"] #main-content .ch-trust-badge, html[dir="rtl"] #main-content .ch-proof-card-row, html[dir="rtl"] #main-content .ch-license-point, html[dir="rtl"] #main-content .ch-home-lightbox-toolbar { direction: rtl; } html[dir="rtl"] #main-content .ch-license-point { text-align: right; } html[dir="rtl"] #main-content .ch-trust-badge-text, html[dir="rtl"] #main-content .ch-proof-card-copy, html[dir="rtl"] #main-content .ch-license-point-text { text-align: right; } html[dir="rtl"] #main-content .ch-license-point-icon, html[dir="rtl"] #main-content .ch-proof-card-icon, html[dir="rtl"] #main-content .ch-trust-badge-icon { order: 2; flex-shrink: 0; } html[dir="rtl"] #main-content .ch-license-point-text, html[dir="rtl"] #main-content .ch-proof-card-copy, html[dir="rtl"] #main-content .ch-trust-badge-text { order: 1; } html:not([dir="rtl"]) #main-content .ch-license-point-icon, html:not([dir="rtl"]) #main-content .ch-proof-card-icon, html:not([dir="rtl"]) #main-content .ch-trust-badge-icon, html[dir="ltr"] #main-content .ch-license-point-icon, html[dir="ltr"] #main-content .ch-proof-card-icon, html[dir="ltr"] #main-content .ch-trust-badge-icon { order: 1; } html:not([dir="rtl"]) #main-content .ch-license-point-text, html:not([dir="rtl"]) #main-content .ch-proof-card-copy, html:not([dir="rtl"]) #main-content .ch-trust-badge-text, html[dir="ltr"] #main-content .ch-license-point-text, html[dir="ltr"] #main-content .ch-proof-card-copy, html[dir="ltr"] #main-content .ch-trust-badge-text { order: 2; } html[dir="rtl"] #main-content .ch-home-shot-head { align-items: flex-start; } html[dir="rtl"] #main-content .ch-home-shot-meta { text-align: left; } html[dir="rtl"] #main-content .ch-home-lightbox-close { margin-inline-start: auto; margin-inline-end: 0; } @media (max-width: 768px) { .ch-home-lightbox { padding: 0.85rem; } .ch-home-lightbox-dialog { border-radius: 22px; } .ch-home-lightbox-toolbar { padding: 0.9rem 1rem; } .ch-home-lightbox-stage { min-height: 40vh; padding: 0.9rem; } } @media (prefers-reduced-motion: reduce) { .ch-card, .ch-home-shot-card, .ch-home-shot-frame, .ch-home-shot-image, .ch-btn, .ch-nav-link, .ch-theme-btn, .ch-lang-btn, .ch-home-lightbox-backdrop, .ch-home-lightbox-dialog, .ch-home-lightbox-close, .ch-trust-badge { transition: none !important; animation: none !important; } } @media (max-width: 1080px) { .ch-home-hero-grid, .ch-product-proof-grid, .ch-license-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .ch-home-hero-copy { text-align: center; } .ch-home-shot-grid, .ch-proof-media-grid { grid-template-columns: 1fr; } .ch-home-shot-card-main { min-height: 280px; } .ch-home-shot-image-main { max-height: none; } .ch-home-cta-grid > a { width: 100%; justify-content: center; } html[dir="rtl"] #main-content .ch-home-hero-copy { text-align: right; } html[dir="rtl"] #main-content .ch-home-cta-grid > a { justify-content: center; } } /* ================================================= CONTACT SUPPORT HUB ================================================= */ .ch-support-hub { position: relative; } .ch-support-hub .ch-container { display: grid; gap: 2rem; } .ch-support-hero, .ch-support-trust, .ch-support-final { position: relative; overflow: hidden; padding: clamp(1.6rem, 2vw, 2.2rem); background: radial-gradient(circle at top, rgba(79, 110, 247, 0.09), transparent 36%), var(--ch-card-bg); } .ch-support-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr); gap: 1.8rem; align-items: stretch; } .ch-support-section { display: grid; gap: 1.4rem; } .ch-support-section-head { max-width: 760px; } .ch-support-section-head h2, .ch-support-trust h2, .ch-support-final h2 { margin: 0 0 0.75rem; font-size: clamp(1.8rem, 3vw, 2.45rem); line-height: 1.12; letter-spacing: -0.03em; color: var(--ch-text-primary); } .ch-support-section-head p, .ch-support-hero-body, .ch-support-trust p, .ch-support-final p { margin: 0; max-width: 720px; font-size: 1rem; line-height: 1.8; color: var(--ch-text-secondary); } .ch-support-hero-title { margin: 0 0 1rem; max-width: 720px; font-size: clamp(2.4rem, 5vw, 4.35rem); line-height: 1.02; letter-spacing: -0.05em; color: var(--ch-text-primary); } .ch-support-eyebrow { margin-bottom: 1rem; } .ch-support-hero-actions, .ch-support-final-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; } .ch-support-hero-actions .ch-btn, .ch-support-final-actions .ch-btn { min-width: 190px; } .ch-support-hero-points, .ch-support-trust-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1.6rem; } .ch-support-point { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-radius: 18px; border: 1px solid var(--ch-card-border); background: color-mix(in srgb, var(--ch-surface-2) 92%, transparent); box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06); } .ch-support-point-icon { width: 34px; height: 34px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(34, 197, 94, 0.12); color: var(--ch-success); } .ch-support-point-text { font-size: 0.94rem; line-height: 1.55; color: var(--ch-text-secondary); } .ch-support-point-icon, .ch-support-panel-dot, .ch-support-hub .ch-btn i, .ch-support-faq-item summary i { order: 1; } .ch-support-point-text, .ch-support-panel-item > span:not(.ch-support-panel-dot), .ch-support-hub .ch-btn span, .ch-support-faq-item summary > span { order: 2; } .ch-support-hero-panel { display: flex; align-items: stretch; } .ch-support-panel-card { width: 100%; padding: 1.5rem; border-radius: 24px; border: 1px solid var(--ch-card-border); background: linear-gradient(180deg, rgba(79, 110, 247, 0.1), transparent 42%), color-mix(in srgb, var(--ch-surface-2) 90%, transparent); box-shadow: 0 24px 52px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .ch-support-panel-title { margin: 1rem 0 0.65rem; font-size: 1.5rem; color: var(--ch-text-primary); } .ch-support-panel-text { margin: 0; color: var(--ch-text-secondary); line-height: 1.75; } .ch-support-panel-list { display: grid; gap: 0.85rem; margin-top: 1.3rem; } .ch-support-panel-item { display: flex; align-items: center; gap: 0.75rem; color: var(--ch-text-secondary); font-weight: 500; } .ch-support-panel-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: linear-gradient(135deg, var(--ch-brand), #8b5cf6); box-shadow: 0 0 0 6px rgba(79, 110, 247, 0.08); } .ch-support-action-grid, .ch-support-channel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } .ch-support-channel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ch-support-action-card, .ch-support-channel-card, .ch-support-faq-item { padding: 1.5rem; background: var(--ch-card-bg); } .ch-support-action-card { text-decoration: none; color: inherit; transition: transform var(--ch-transition-slow), box-shadow var(--ch-transition-slow), border-color var(--ch-transition-slow); } .ch-support-action-card:hover, .ch-support-channel-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--ch-brand) 34%, var(--ch-card-border)); box-shadow: 0 24px 54px rgba(15, 23, 42, 0.12); } .ch-support-action-icon, .ch-support-channel-icon { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; margin-bottom: 1rem; background: rgba(79, 110, 247, 0.12); color: var(--ch-brand); font-size: 1.15rem; } .ch-support-action-card h3, .ch-support-channel-card h3 { margin: 0 0 0.55rem; font-size: 1.15rem; color: var(--ch-text-primary); } .ch-support-action-card p, .ch-support-channel-card p { margin: 0; color: var(--ch-text-secondary); line-height: 1.72; } .ch-support-channel-card { display: grid; gap: 0.95rem; } .ch-support-channel-meta { display: inline-flex; align-items: center; width: fit-content; padding: 0.35rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--ch-surface-3) 92%, transparent); color: var(--ch-text-muted); font-size: 0.8rem; font-weight: 700; } .ch-support-intake-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr); gap: 1.25rem; } .ch-support-intake-copy, .ch-support-intake-form-card { padding: 1.6rem; background: var(--ch-card-bg); } .ch-support-intake-methods { display: flex; flex-wrap: wrap; gap: 0.85rem; } .ch-support-method-chip { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 48px; padding: 0.75rem 1rem; border-radius: 999px; border: 1px solid var(--ch-card-border); background: color-mix(in srgb, var(--ch-surface-2) 92%, transparent); color: var(--ch-text-secondary); text-decoration: none; transition: transform var(--ch-transition), box-shadow var(--ch-transition), border-color var(--ch-transition); } .ch-support-method-chip.is-active, .ch-support-method-chip:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ch-brand) 38%, var(--ch-card-border)); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08); } .ch-support-method-chip.is-active { color: var(--ch-text-primary); background: linear-gradient(135deg, rgba(79, 110, 247, 0.14), rgba(99, 102, 241, 0.08)); } .ch-support-intake-note { margin: 1rem 0 0; color: var(--ch-text-secondary); line-height: 1.75; } .ch-support-intake-list { margin-top: 1.2rem; } .ch-support-form { display: grid; gap: 1.25rem; } .ch-support-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .ch-support-form-field { display: grid; gap: 0.55rem; } .ch-support-form-field-full { grid-column: 1 / -1; } .ch-support-form-field span { font-size: 0.92rem; font-weight: 700; color: var(--ch-text-primary); } .ch-support-form-field input, .ch-support-form-field textarea { width: 100%; padding: 0.95rem 1rem; border-radius: 16px; border: 1px solid var(--ch-card-border); background: color-mix(in srgb, var(--ch-surface-2) 94%, transparent); color: var(--ch-text-primary); transition: border-color var(--ch-transition), box-shadow var(--ch-transition), background var(--ch-transition); } .ch-support-form-field textarea { resize: vertical; min-height: 150px; } .ch-support-form-field input:focus, .ch-support-form-field textarea:focus { outline: none; border-color: color-mix(in srgb, var(--ch-brand) 48%, var(--ch-card-border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ch-brand) 14%, transparent); background: color-mix(in srgb, var(--ch-surface-1) 92%, transparent); } .ch-support-verify-box { padding: 1.2rem; border-radius: 22px; border: 1px solid var(--ch-card-border); background: linear-gradient(180deg, rgba(79, 110, 247, 0.08), transparent 44%), color-mix(in srgb, var(--ch-surface-2) 90%, transparent); } .ch-support-verify-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .ch-support-verify-head h3 { margin: 0 0 0.45rem; color: var(--ch-text-primary); } .ch-support-verify-head p { margin: 0; color: var(--ch-text-secondary); line-height: 1.7; } .ch-support-otp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; margin-top: 1rem; align-items: end; } .ch-support-form-status { padding: 0.95rem 1rem; border-radius: 16px; border: 1px solid transparent; font-weight: 600; } .ch-support-form-status.is-success { color: #166534; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.26); } .ch-support-form-status.is-error { color: #b42318; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.22); } .ch-support-form-actions { display: flex; flex-wrap: wrap; gap: 1rem; } .ch-support-form-actions .ch-btn { min-width: 220px; } /* Verified Support Gateway */ .ch-support-intake-grid { align-items: start; } .ch-support-intake-copy, .ch-support-intake-form-card { padding: 1.5rem; } .ch-support-intake-copy .ch-support-method-chip { border-radius: 8px; } .ch-support-gateway { position: relative; display: grid; gap: 1.25rem; } .ch-support-gateway [hidden], .ch-support-busy-modal[hidden] { display: none !important; } .ch-support-gateway .ch-btn { border-radius: 8px; } .ch-support-gateway-topbar { display: grid; gap: 1rem; } .ch-support-gateway-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .ch-support-step { display: flex; align-items: center; gap: 0.75rem; min-height: 76px; padding: 0.85rem 0.9rem; border: 1px solid var(--ch-card-border); border-radius: 8px; background: color-mix(in srgb, var(--ch-surface-2) 92%, transparent); color: var(--ch-text-secondary); } .ch-support-step.is-active, .ch-support-step.is-complete { border-color: color-mix(in srgb, var(--ch-brand) 36%, var(--ch-card-border)); background: color-mix(in srgb, var(--ch-surface-1) 94%, rgba(79, 110, 247, 0.12)); color: var(--ch-text-primary); } .ch-support-step-index { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 999px; background: color-mix(in srgb, var(--ch-text-primary) 8%, transparent); font-size: 0.9rem; font-weight: 700; } .ch-support-step.is-active .ch-support-step-index, .ch-support-step.is-complete .ch-support-step-index { background: var(--ch-brand); color: #fff; } .ch-support-step-copy { display: grid; gap: 0.15rem; } .ch-support-step-copy strong { font-size: 0.96rem; color: inherit; } .ch-support-step-copy small { font-size: 0.8rem; color: inherit; } .ch-support-verified-pill { display: inline-flex; align-items: center; width: fit-content; min-height: 36px; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(34, 197, 94, 0.14); color: #166534; font-size: 0.82rem; font-weight: 700; } .ch-support-gateway-stage { display: grid; gap: 1rem; } .ch-support-stage-head { display: grid; gap: 0.35rem; } .ch-support-stage-head h3 { margin: 0; } .ch-support-stage-head p { margin: 0; color: var(--ch-text-secondary); line-height: 1.7; } .ch-support-stage-label { display: inline-flex; width: fit-content; min-height: 28px; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--ch-surface-2) 92%, transparent); color: var(--ch-text-muted); font-size: 0.74rem; font-weight: 700; } .ch-support-method-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .ch-support-method-option { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; min-height: 136px; padding: 1rem; border: 1px solid var(--ch-card-border); border-radius: 8px; background: color-mix(in srgb, var(--ch-surface-2) 94%, transparent); color: var(--ch-text-primary); text-align: left; cursor: pointer; font: inherit; transition: transform var(--ch-transition), border-color var(--ch-transition), box-shadow var(--ch-transition); } .ch-support-method-option:hover, .ch-support-method-option.is-active { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ch-brand) 36%, var(--ch-card-border)); box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08); } .ch-support-method-option-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 8px; background: color-mix(in srgb, var(--ch-brand) 14%, transparent); color: var(--ch-brand); } .ch-support-method-option-copy { display: grid; gap: 0.35rem; } .ch-support-method-option-copy strong { font-size: 1rem; color: var(--ch-text-primary); } .ch-support-method-option-copy small { color: var(--ch-text-secondary); line-height: 1.6; } .ch-support-verification-panel { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--ch-card-border); border-radius: 8px; background: color-mix(in srgb, var(--ch-surface-2) 92%, transparent); } .ch-support-inline-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .ch-support-inline-actions .ch-btn { min-width: 220px; border-radius: 8px; } .ch-support-form-field input, .ch-support-form-field select, .ch-support-form-field textarea { border-radius: 8px; } .ch-support-form-field select { width: 100%; min-height: 52px; padding: 0.95rem 1rem; border: 1px solid var(--ch-card-border); background: color-mix(in srgb, var(--ch-surface-2) 94%, transparent); color: var(--ch-text-primary); transition: border-color var(--ch-transition), box-shadow var(--ch-transition), background var(--ch-transition); } .ch-support-form-field select:focus { outline: none; border-color: color-mix(in srgb, var(--ch-brand) 48%, var(--ch-card-border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ch-brand) 14%, transparent); background: color-mix(in srgb, var(--ch-surface-1) 92%, transparent); } .ch-support-stage-note { margin: 0; color: var(--ch-text-secondary); font-size: 0.9rem; line-height: 1.7; } .ch-support-telegram-flow { display: grid; gap: 0.7rem; } .ch-support-telegram-step { display: grid; grid-template-columns: 28px 1fr; gap: 0.75rem; align-items: start; } .ch-support-telegram-step span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--ch-brand) 16%, transparent); color: var(--ch-brand); font-size: 0.82rem; font-weight: 700; } .ch-support-telegram-step p { margin: 0; color: var(--ch-text-secondary); line-height: 1.65; } .ch-support-telegram-pending, .ch-support-verified-summary, .ch-support-form-lock { display: grid; gap: 0.75rem; padding: 1rem; border: 1px solid var(--ch-card-border); border-radius: 8px; background: color-mix(in srgb, var(--ch-surface-2) 94%, transparent); } .ch-support-verified-summary p, .ch-support-telegram-pending p, .ch-support-form-lock p { margin: 0; color: var(--ch-text-secondary); line-height: 1.7; } .ch-support-form-lock { grid-template-columns: auto 1fr; align-items: start; } .ch-support-form-lock h3 { margin: 0 0 0.25rem; } .ch-support-form-lock-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; background: rgba(239, 68, 68, 0.12); color: #b42318; } .ch-support-tag { display: inline-flex; width: fit-content; min-height: 28px; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; background: color-mix(in srgb, var(--ch-brand) 12%, transparent); color: var(--ch-brand); font-size: 0.74rem; font-weight: 700; } .ch-support-busy-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(15, 23, 42, 0.52); z-index: 9999; } .ch-support-busy-dialog { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; width: min(100%, 420px); padding: 1.1rem 1.15rem; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; background: color-mix(in srgb, var(--ch-surface-1) 94%, rgba(15, 23, 42, 0.95)); box-shadow: 0 28px 64px rgba(15, 23, 42, 0.24); } .ch-support-busy-dialog strong, .ch-support-busy-dialog p { margin: 0; } .ch-support-busy-dialog p { color: var(--ch-text-secondary); line-height: 1.65; } .ch-support-busy-spinner { width: 24px; height: 24px; border: 3px solid rgba(79, 110, 247, 0.2); border-top-color: var(--ch-brand); border-radius: 999px; animation: ch-support-spin 0.8s linear infinite; } @keyframes ch-support-spin { to { transform: rotate(360deg); } } html[dir="rtl"] .ch-support-gateway, html[dir="rtl"] .ch-support-stage-head, html[dir="rtl"] .ch-support-verification-panel, html[dir="rtl"] .ch-support-form-lock, html[dir="rtl"] .ch-support-telegram-pending, html[dir="rtl"] .ch-support-verified-summary, html[dir="rtl"] .ch-support-method-option, html[dir="rtl"] .ch-support-step { text-align: right; } html[dir="rtl"] .ch-support-gateway-steps, html[dir="rtl"] .ch-support-method-selector, html[dir="rtl"] .ch-support-telegram-flow, html[dir="rtl"] .ch-support-form-grid, html[dir="rtl"] .ch-support-inline-actions, html[dir="rtl"] .ch-support-otp-row { direction: rtl; } html[dir="rtl"] .ch-support-step, html[dir="rtl"] .ch-support-method-option, html[dir="rtl"] .ch-support-form-lock, html[dir="rtl"] .ch-support-busy-dialog { direction: rtl; } html[dir="rtl"] .ch-support-method-option { text-align: right; } .ch-support-faq-list { display: grid; gap: 1rem; } .ch-support-faq-item { transition: box-shadow var(--ch-transition-slow), border-color var(--ch-transition-slow); } .ch-support-faq-item[open] { border-color: color-mix(in srgb, var(--ch-brand) 30%, var(--ch-card-border)); box-shadow: 0 22px 48px rgba(15, 23, 42, 0.1); } .ch-support-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-size: 1rem; font-weight: 700; color: var(--ch-text-primary); } .ch-support-faq-item summary::-webkit-details-marker { display: none; } .ch-support-faq-item summary i { transition: transform var(--ch-transition); color: var(--ch-brand); } .ch-support-faq-item summary > span { flex: 1 1 auto; } .ch-support-faq-item[open] summary i { transform: rotate(45deg); } .ch-support-faq-answer { padding-top: 1rem; } .ch-support-faq-answer p { margin: 0; color: var(--ch-text-secondary); line-height: 1.78; } .ch-support-final { text-align: center; } .ch-support-final p { margin-inline: auto; } .ch-support-final-actions { justify-content: center; } html[dir="rtl"] .ch-support-hub, html[dir="rtl"] .ch-support-section-head, html[dir="rtl"] .ch-support-hero-copy, html[dir="rtl"] .ch-support-trust, html[dir="rtl"] .ch-support-final, html[dir="rtl"] .ch-support-action-card, html[dir="rtl"] .ch-support-channel-card, html[dir="rtl"] .ch-support-faq-item, html[dir="rtl"] .ch-support-intake-copy, html[dir="rtl"] .ch-support-intake-form-card, html[dir="rtl"] .ch-support-panel-card, html[dir="rtl"] .ch-support-faq-answer { text-align: right; } html[dir="rtl"] .ch-support-hero, html[dir="rtl"] .ch-support-action-grid, html[dir="rtl"] .ch-support-channel-grid, html[dir="rtl"] .ch-support-intake-grid, html[dir="rtl"] .ch-support-form-grid, html[dir="rtl"] .ch-support-intake-methods, html[dir="rtl"] .ch-support-otp-row { direction: rtl; } html[dir="rtl"] .ch-support-hero-actions, html[dir="rtl"] .ch-support-final-actions { justify-content: flex-start; } html[dir="rtl"] .ch-support-point, html[dir="rtl"] .ch-support-panel-item { direction: rtl; } html[dir="rtl"] .ch-support-intake-methods, html[dir="rtl"] .ch-support-verify-head > div, html[dir="rtl"] .ch-support-faq-answer p { text-align: right; } html[dir="rtl"] .ch-support-point-icon, html[dir="rtl"] .ch-support-panel-dot, html[dir="rtl"] .ch-support-hub .ch-btn i, html[dir="rtl"] .ch-support-faq-item summary i { order: 1; } html[dir="rtl"] .ch-support-point-text, html[dir="rtl"] .ch-support-panel-item > span:not(.ch-support-panel-dot), html[dir="rtl"] .ch-support-hub .ch-btn span, html[dir="rtl"] .ch-support-faq-item summary > span { order: 2; } html[dir="rtl"] .ch-support-faq-item summary { direction: rtl; justify-content: space-between; } html[dir="rtl"] .ch-support-point, html[dir="rtl"] .ch-support-panel-item, html[dir="rtl"] .ch-support-hub .ch-btn, html[dir="rtl"] .ch-support-faq-item summary, html[dir="rtl"] .ch-support-method-chip { flex-direction: row-reverse; } html[dir="rtl"] .ch-support-verify-head, html[dir="rtl"] .ch-support-form-actions { flex-direction: row-reverse; } html[dir="rtl"] .ch-support-intake-methods { justify-content: flex-start; } html[dir="rtl"] .ch-support-method-chip, html[dir="rtl"] .ch-support-form, html[dir="rtl"] .ch-support-form-field, html[dir="rtl"] .ch-support-form-field select, html[dir="rtl"] .ch-support-form-field input, html[dir="rtl"] .ch-support-form-field textarea, html[dir="rtl"] .ch-support-form-status { text-align: right; } @media (max-width: 1180px) { .ch-support-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ch-support-intake-grid, .ch-support-form-grid, .ch-support-channel-grid, .ch-support-hero-points, .ch-support-trust-points { grid-template-columns: 1fr; } .ch-support-gateway-steps, .ch-support-method-selector { grid-template-columns: 1fr; } } @media (max-width: 960px) { .ch-support-hero { grid-template-columns: 1fr; } .ch-support-channel-grid, .ch-support-action-grid { grid-template-columns: 1fr; } .ch-support-verify-head, .ch-support-otp-row, .ch-support-form-actions { grid-template-columns: 1fr; flex-direction: column; } .ch-support-inline-actions { flex-direction: column; } .ch-support-inline-actions .ch-btn { width: 100%; min-width: 0; } .ch-support-form-lock, .ch-support-busy-dialog { grid-template-columns: 1fr; } html[dir="rtl"] .ch-support-verify-head, html[dir="rtl"] .ch-support-form-actions { flex-direction: column; } } @media (max-width: 768px) { .ch-support-hero-title { font-size: clamp(2rem, 10vw, 3rem); } .ch-support-hero-actions .ch-btn, .ch-support-final-actions .ch-btn { width: 100%; min-width: 0; } .ch-support-final { text-align: left; } html[dir="rtl"] .ch-support-final { text-align: right; } } /* ================================================= PLUGIN FORM OVERRIDE (dark/light aware) ================================================= */ .chto-order-form-wrap .chto-form-group label { color: var(--ch-text-secondary) !important; font-family: var(--ch-font); } .chto-order-form-wrap input, .chto-order-form-wrap select, .chto-order-form-wrap textarea { background: var(--ch-input-bg) !important; border-color: var(--ch-input-border) !important; color: var(--ch-input-text) !important; border-radius: var(--ch-radius) !important; font-family: var(--ch-font) !important; } .chto-order-form-wrap input:focus, .chto-order-form-wrap select:focus, .chto-order-form-wrap textarea:focus { border-color: var(--ch-input-focus) !important; box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.12) !important; outline: none !important; } .chto-btn-primary { background: var(--ch-brand) !important; box-shadow: 0 4px 14px var(--ch-brand-glow) !important; border-radius: var(--ch-radius) !important; } .chto-btn-primary:hover { background: var(--ch-brand-hover) !important; } .chto-alert-success { background: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.3) !important; color: var(--ch-success) !important; border-radius: var(--ch-radius) !important; } .chto-alert-error { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: var(--ch-danger) !important; border-radius: var(--ch-radius) !important; } /* ================================================= WORDPRESS CORE OVERRIDES ================================================= */ .wp-block-image img { border-radius: var(--ch-radius); } .wp-caption-text { font-size: 0.85rem; color: var(--ch-text-muted); }