/* ===== THEME (easily tweak these to match Wix) ===== */ :root{ --bg:#FFFFFF; --panel:#FFFFFF; --card:#FFFFFF; --border:#EDEAF6; --text:#1B1333; --brand:#5300BC; --brand-2:#8B5DFF; --accent:#2FD7C9; } /* Optional alternate theme — set to use */ .theme-wix{ --bg:#0c0b12; --panel:#131226; --text:#f6f6ff; --muted:#b7bbca; --brand:#5300BC; --brand-2:#8B5DFF; --accent:#2FD7C9; --card:#181a2f; --border:#2b2f47; } /* ===== NEW HOMEPAGE LAYOUT ENHANCEMENTS ===== */ .hero{ position:relative; overflow:hidden; } .hero .art{ position:absolute; inset: -60px -60px auto auto; width:520px; height:520px; opacity:.55; pointer-events:none; background: radial-gradient(350px 190px at 60% 30%, rgba(122,107,255,.35), transparent 60%), radial-gradient(420px 220px at 70% 70%, rgba(0,212,180,.28), transparent 60%); filter: blur(24px); } .kicker{color:var(--muted);font-weight:600;font-size:14px;margin-bottom:8px} .hero .points{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:12px;margin-top:18px} .point{display:flex;gap:10px;align-items:flex-start;background:#101225;border:1px solid var(--border); border-radius:14px;padding:10px 12px} .point .icon{width:22px;height:22px;display:inline-block;border-radius:6px; background: linear-gradient(135deg,var(--brand),var(--brand-2));} .point strong{display:block;font-size:13px} .point span{color:var(--muted);font-size:12px} .role-cards{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:12px;margin-top:12px} .role-card{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--card);padding:14px;text-decoration:none;color:var(--text);overflow:hidden} .role-card h3{margin:8px 0 4px;font-size:16px} .role-card p{margin:0;color:var(--muted);font-size:12px} .role-card .blob{position:absolute;inset:auto -40px -40px auto;width:180px;height:180px;filter:blur(24px);opacity:.35; background: radial-gradient(120px 80px at 40% 40%, var(--brand), transparent 60%), radial-gradient(100px 70px at 70% 60%, var(--accent), transparent 60%);} .features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .feature{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:16px} .feature h3{margin:0 0 6px} .feature .intro{color:var(--muted);font-size:14px;margin:0 0 6px} .feature ul{margin:0;padding-left:18px;font-size:14px;color:var(--text)} .feature .tag{display:inline-block;margin-top:8px;padding:4px 10px;border-radius:999px;background:#1a1c2a;border:1px solid var(--border);font-size:12px} /* stacked on mobile */ @media (max-width: 920px){ .role-cards{grid-template-columns:repeat(2,1fr)} .hero .points{grid-template-columns:1fr} .features{grid-template-columns:1fr} } *{box-sizing:border-box} html,body{ background:#FFFFFF; color:var(--text); font-family: ui-sans-serif,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; } body{ background: radial-gradient(700px 300px at 10% -10%, rgba(154,140,255,.18), transparent), radial-gradient(900px 400px at 100% 0%, rgba(56,225,174,.10), transparent), linear-gradient(180deg,#0b0b10 0%, #0f1122 100%); color:var(--text); font-family: ui-sans-serif,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; } .site-wrap{max-width:1120px;margin:0 auto;padding:24px} .nav{ display:flex;align-items:center;justify-content:space-between;padding:14px 18px; border:1px solid var(--border);border-radius:16px; background:linear-gradient(180deg,#14162a 0%, #12131a 100%); box-shadow:0 10px 30px rgba(0,0,0,.15); } .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)} .brand .logo{width:30px;height:30px}.brand span{font-weight:800;letter-spacing:.2px} .menu{display:flex;gap:14px;flex-wrap:wrap} .menu a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;border:1px solid transparent} .menu a:hover{color:#fff;border-color:var(--border)} .menu a.active{color:#0b0b10;background:var(--accent);border-color:transparent} .hero{ margin-top:28px;padding:34px; border:1px solid var(--border); border-radius:22px; background: radial-gradient(1200px 600px at 15% -10%, rgba(106,92,255,.25), transparent), radial-gradient(900px 500px at 95% -5%, rgba(56,225,174,.20), transparent), var(--panel); } .hero h1{margin:0 0 12px;font-size:40px;letter-spacing:.2px} .hero p{margin:0;color:var(--muted);font-size:18px} .hero .cta-row{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap} .btn{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;color:#0b0b10; border:1px solid transparent;background:var(--accent);font-weight:700} .btn.secondary{background:transparent;color:#fff;border-color:var(--border)} .badge{font-size:12px;padding:3px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:#101225} .panel{margin-top:22px;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:16px;} .panel h2{margin:0 0 6px;font-size:22px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .quote{background:#101225;border:1px solid var(--border);border-radius:16px;padding:16px} .quote .who{color:var(--muted);font-size:14px;margin-top:6px} .footer{margin:40px 0 0;padding:18px;color:var(--muted);font-size:13px;text-align:center}.footer a{color:var(--muted)} .kicker{color:var(--muted);font-weight:600;font-size:14px;margin-bottom:8px} .subtle{color:var(--muted);font-size:14px} .em{color:#fff} .pill{padding:4px 10px;border-radius:999px;background:#1a1c2a;border:1px solid var(--border);font-size:12px} .faces{display:flex;gap:12px;align-items:center;margin:8px 0 4px}.faceBox{display:flex;align-items:center;gap:8px} .face{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--border);background:#1b1d2b} .tagline{font-size:12px;color:var(--muted)} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px} .vs-block{text-align:center;font-weight:700;color:#aaa;margin:8px 0;font-size:16px} .sections{display:grid;grid-template-columns:repeat(2,minmax(300px,1fr));gap:16px} .muted{color:var(--muted)} .price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .tier{background:#101225;border:1px solid var(--border);border-radius:14px;padding:16px} .tier h3{margin:0 0 6px} .price{font-size:28px;font-weight:800;margin:6px 0} /* v8 palette alignment */ .btn{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:0} .btn.secondary{background:#1b1e31;border:1px solid var(--border)} a{color:var(--brand)} .badge{background:rgba(83,0,188,.15);color:#cdb9ff;border:1px solid rgba(83,0,188,.35)} .nav .brand span{color:var(--text)} .logo{filter: drop-shadow(0 2px 6px rgba(83,0,188,.35));} .role-card .blob{background: radial-gradient(120px 80px at 40% 40%, var(--brand), transparent 60%), radial-gradient(100px 70px at 70% 60%, var(--accent), transparent 60%);} .point .icon{background:linear-gradient(135deg,var(--brand),var(--brand-2));} /* --- Light theme refinements (v9) --- */ .nav{ background:#fff; border-color: var(--border); box-shadow:0 8px 24px rgba(83,0,188,.05); } .panel{ background:var(--panel); border-color:var(--border); box-shadow:0 6px 18px rgba(27,19,51,.06); } .hero{ background:linear-gradient(180deg,#ffffff 0%, #f6f2ff 100%); border-color:var(--border); } .hero .art{ opacity:.45; background: radial-gradient(360px 200px at 60% 30%, rgba(139,93,255,.25), transparent 60%), radial-gradient(420px 260px at 70% 70%, rgba(47,215,201,.18), transparent 60%); } .btn{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border:0} .btn.secondary{background:#ffffff;color:var(--text);border:1px solid var(--border)} .badge{background:rgba(83,0,188,.08); color:#3b246b; border:1px solid rgba(83,0,188,.25)} .role-card{background:#fff;border-color:var(--border);} .role-card .blob{opacity:.28} .point{background:#fff;border-color:var(--border)} .quote{background:#fff;border-color:var(--border)} .footer{color:var(--muted)} a{color:var(--brand)} /* --- v10: Pure white background variant --- */ .nav{ background:#fff; border-bottom:1px solid var(--border); box-shadow:0 4px 14px rgba(83,0,188,.04); } .panel{ background:#fff; border:1px solid var(--border); box-shadow:0 6px 18px rgba(27,19,51,.05); } .hero{ background:#fff; border:1px solid var(--border); } .hero .art{ display:none; } .btn{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border:0} .btn.secondary{background:#ffffff;color:var(--text);border:1px solid var(--border)} .badge{background:rgba(83,0,188,.08); color:#3b246b; border:1px solid rgba(83,0,188,.25)} .role-card{background:#fff;border-color:var(--border);} .point{background:#fff;border-color:var(--border)} .quote{background:#fff;border-color:var(--border)} .footer{color:var(--muted)} a{color:var(--brand)} /* ---- Hard override: pure white theme ---- */ body{ background:#FFFFFF !important; color:var(--text); font-family: ui-sans-serif,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; } .nav, .hero, .panel, .panel.features, .role-card, .point, .quote, .features, .menu, .card, .two-col, .sections, .site-wrap { background:#FFFFFF !important; border-color:var(--border) !important; } .hero .art { display:none !important; } /* ===== v13: Layout polish + animations ===== */ /* Two-column hero layout on wide screens */ @media (min-width: 980px){ .hero{ display:grid; grid-template-columns: 1.2fr 1fr; align-items:center; gap:24px; } .hero .hero-copy{ padding-right: 12px; } .hero .hero-visual{ min-height: 260px; } } /* Simple SVG hero illustration container */ .hero-visual{ border:1px solid var(--border); border-radius: 16px; background:#fff; box-shadow: 0 10px 24px rgba(83,0,188,0.08); overflow:hidden; } /* Card hover + focus */ .role-card, .feature{ transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; } .role-card:hover, .role-card:focus, .feature:hover, .feature:focus{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(83,0,188,0.10); border-color: #D8CEF4; } /* Button lift */ .btn{ transition: transform .18s ease, box-shadow .18s ease; } .btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(83,0,188,.18); } .btn.secondary:hover{ box-shadow: 0 8px 18px rgba(0,0,0,.05); } /* Divider wave (light) */ .wave{ height: 54px; background: url('data:image/svg+xml;utf8,') center/cover no-repeat; margin: 20px 0 0; } /* Reveal-on-scroll base */ .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .reveal.in{ opacity: 1; transform: translateY(0); } /* Stagger helpers */ .stagger-1{ transition-delay: .05s; } .stagger-2{ transition-delay: .12s; } .stagger-3{ transition-delay: .18s; } .stagger-4{ transition-delay: .24s; } .stagger-5{ transition-delay: .30s; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce){ .reveal{ transition: none; opacity: 1; transform:none; } .btn, .role-card, .feature{ transition: none; } } /* Testimonials layout polish */ .testimonials{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .quote{ border:1px solid var(--border); border-radius:14px; padding:14px; background:#fff; } .quote .who{ color:var(--muted); margin-top:6px; font-size:12px; } @media (max-width: 900px){ .testimonials{ grid-template-columns: 1fr; } } /* Footer spacing */ .footer{ margin-top: 18px; } /* v13 fix: force 'plans' to black + bold in hero */ .highlight-word{ color:#000000; font-weight:700; } /* ==== v14: Navigation tuned for white/purple theme ==== */ .nav{ position: sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 14px; background:#fff; border-bottom:1px solid var(--border); box-shadow:0 6px 18px rgba(83,0,188,.05); border-radius:12px; } .nav .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; } .nav .brand span{ color:var(--text); font-weight:700; letter-spacing:.2px; } .nav .brand .logo{ width:28px; height:28px; display:block; } .menu{ display:flex; align-items:center; gap:8px; overflow:auto; scrollbar-width:none; } .menu::-webkit-scrollbar{ display:none; } .menu a{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--text); border:1px solid transparent; white-space:nowrap; font-weight:600; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease; } .menu a:hover{ background:#F7F3FF; border-color:#EADFFE; color:var(--brand); transform: translateY(-1px); } .menu a.active{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-color:transparent; box-shadow:0 8px 22px rgba(83,0,188,.22); } @media (max-width: 760px){ .nav{ border-radius:0; padding:10px 10px; } .menu{ gap:6px; } .menu a{ padding:7px 10px; font-weight:600; } } /* v15: Mobile polish + shared primary button */ .btn-primary{ background: linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border:0; padding:14px 28px; border-radius:12px; font-weight:700; font-size:17px; box-shadow:0 6px 18px rgba(83,0,188,.18); transition: transform .18s ease, box-shadow .18s ease; } .btn-primary:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(83,0,188,.24); } #go-container{ display:flex; justify-content:center; margin-top:18px; } #go.btn-primary{ min-width: 240px; } /* Responsive layout polish */ @media (max-width: 900px){ .hero{ display:block; } .cta-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .role-cards{ grid-template-columns:1fr 1fr; } .features{ grid-template-columns:1fr; } } @media (max-width: 600px){ .role-cards{ grid-template-columns:1fr; } .panel{ padding:14px; } .nav{ padding:10px; border-radius:10px; } .menu a{ padding:7px 10px; } } /* v17: Light mode pills + portraits (Option A) */ .pill, .tag { background:#FFFFFF; color:#5300BC; border:1px solid #E1D6FF; border-radius:999px; display:inline-block; padding:6px 12px; font-weight:600; line-height:1; } .pill + .pill, .tag + .tag { margin-left:6px; } .pill .icon { display:none; } .face, .face img, img.face { filter:none !important; background:#FFFFFF; border:1px solid #EDEAF6; border-radius:50%; box-shadow:none; } .badge { background:#F7F3FF; color:#5300BC; border:1px solid #E1D6FF; } @media (max-width: 600px){ .pill, .tag { padding:6px 10px; margin:3px 2px; } } /* v17 global: centered tool helpers */ .tool-container { max-width: 540px; margin: 0 auto; text-align: center; } .tool-container h3 { text-align: center; margin-top: 20px; } .two-col { display:grid; grid-template-columns:1fr 1fr; gap:14px; justify-content:center; align-items:center; } #go { margin: 20px auto 10px auto; display:block; width:80%; max-width:260px; } /* v18: Unified portraits + pills layout */ .faces{ display:flex; gap:12px; align-items:center; justify-content:center; margin:8px 0 6px; } .pill-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .vs-divider{ font-weight:800; color:#888; text-align:center; margin:12px 0; letter-spacing:.06em; } @media (max-width: 640px){ .faces{ gap:10px; } .pill-row{ gap:6px; } } /* Keep pills readable on white (Option A already present; ensure class exists globally) */ .pill, .tag { background:#FFFFFF; color:#5300BC; border:1px solid #E1D6FF; border-radius:999px; display:inline-block; padding:6px 12px; font-weight:600; line-height:1; } /* v19 spacing: two stacked pill rows */ .pill-row + .pill-row { margin-top:6px; } .badge { font-size: 15px; padding: 8px 18px; font-weight: 700; border-radius: 999px; } .form-card { max-width: 520px; margin: 40px auto; padding: 32px; background: #ffffff; border: 1px solid #ececec; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.05); } .form-card h1 { margin-bottom: 8px; } .form-card .muted { margin-bottom: 24px; } .form-card label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 14px; color: #222; } .form-card input, .form-card select, .form-card textarea { width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 10px; border: 1px solid #ddd; font-size: 14px; font-family: inherit; } .form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: #6b35ff; box-shadow: 0 0 0 3px rgba(107,53,255,0.15); } .btn-primary { margin-top: 16px; width: 100%; padding: 14px; font-weight: 700; border-radius: 14px; border: none; cursor: pointer; background: #6b35ff; color: #fff; font-size: 15px; box-shadow: 0 10px 24px rgba(107,53,255,0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(107,53,255,0.45); } /* v20 ensure layout helpers are present */ .faces{ display:flex; gap:12px; align-items:center; justify-content:center; margin:8px 0 6px; } .pill-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .vs-divider{ font-weight:800; color:#888; text-align:center; margin:12px 0; letter-spacing:.06em; } @media (max-width: 640px){ .faces{ gap:10px; } .pill-row{ gap:6px; } }