/* ============================================= SPARKZ COUNSELLING — MAIN STYLESHEET Fonts: Montserrat · Open Sans · Cormorant Garamond · Poppins (All fonts loaded in index.html — no @import here) ============================================= */ /* ============================================= PAGE TRANSITION — fade in on load Add class="page-transition" to every Add this script before on every page: ============================================= */ body.page-transition { opacity: 0; transition: opacity 0.35s ease; } body.page-transition.loaded { opacity: 1; } /* ============================================= CSS RESET ============================================= */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; line-height: 1.5; font-family: 'Open Sans', sans-serif; color: var(--charcoal); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } a { text-decoration: none; color: inherit; } ul, ol { list-style: none; } button { cursor: pointer; background: none; border: none; } table { border-collapse: collapse; border-spacing: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================= CSS VARIABLES (THEME TOKENS) ============================================= */ :root { --plum: #5A2473; --berry: #B81A6B; --charcoal: #2C272E; --white: #FFFFFF; --surface: #F9F9FA; --surface-2: #F0EFF4; --green-cta: #B81A6B; --green-hover: #5A2473; --star-gold: #F5A623; --nav-hover: #B81A6B; --shadow: 0 2px 20px rgba(90, 36, 115, 0.08); --shadow-sm: 0 2px 12px rgba(90, 36, 115, 0.08); --shadow-md: 0 8px 32px rgba(90, 36, 115, 0.12); --shadow-lg: 0 20px 60px rgba(90, 36, 115, 0.15); --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --transition: 0.25s ease; --transition-md: 0.28s ease; } /* ============================================= SHARED LAYOUT HELPERS ============================================= */ .section-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } .reveal.visible { opacity: 1; transform: none; } .reveal-delay-1 { transition-delay: 0.10s; } .reveal-delay-2 { transition-delay: 0.20s; } .reveal-delay-3 { transition-delay: 0.30s; } .reveal-delay-4 { transition-delay: 0.40s; } .reveal-delay-5 { transition-delay: 0.50s; } .reveal-delay-6 { transition-delay: 0.60s; } /* ============================================= SITE HEADER ============================================= */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--white); box-shadow: var(--shadow); border-bottom: 1px solid rgba(90, 36, 115, 0.06); opacity: 0; transform: translateY(-8px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .site-header.header-ready { opacity: 1; transform: translateY(0); } .header-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .logo-icon { width: auto; height: 210px; flex-shrink: 0; } .logo-text { display: none; } .main-nav { display: flex; align-items: center; gap: 4px; } .main-nav a { font-family: 'Open Sans', sans-serif; font-size: 14.5px; font-weight: 500; color: var(--charcoal); text-decoration: none; padding: 6px 14px; border-radius: 6px; position: relative; transition: color var(--transition); } .main-nav a::after { content: ''; position: absolute; bottom: 0; left: 14px; right: 14px; height: 2px; background: var(--berry); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .main-nav a:hover { color: var(--berry); } .main-nav a:hover::after { transform: scaleX(1); } .main-nav a.active { color: var(--berry); font-weight: 600; } .main-nav a.active::after { transform: scaleX(1); } .header-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; } .header-divider { width: 1px; height: 28px; background: rgba(90, 36, 115, 0.15); } .btn-book { font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--white); background: var(--berry); border: none; padding: 12px 22px; border-radius: 50px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; letter-spacing: 0.2px; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); box-shadow: 0 4px 14px rgba(184, 26, 107, 0.30); white-space: nowrap; } .btn-book:hover { background: #4B1F7A; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(90, 36, 115, 0.35); } .btn-book:active { transform: translateY(0); } .btn-book svg { width: 15px; height: 15px; fill: currentColor; } /* ============================================= HAMBURGER & MOBILE NAV ============================================= */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; transition: background var(--transition); z-index: 10; } .hamburger:hover { background: var(--surface); } .hamburger span { display: block; width: 24px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { display: flex; flex-direction: column; background: var(--white); border-top: 1px solid rgba(90, 36, 115, 0.08); padding: 0 20px; gap: 6px; overflow: hidden; max-height: 0; opacity: 0; pointer-events: none; transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .mobile-nav.is-open { max-height: 600px; opacity: 1; pointer-events: all; padding: 16px 20px 24px; } .mobile-nav a { font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 500; color: var(--charcoal); text-decoration: none; padding: 14px 16px; border-radius: 10px; transition: background var(--transition), color var(--transition); } .mobile-nav a:hover { background: rgba(219, 27, 96, 0.07); color:#DB1B60;; } .mobile-nav a.active { background: rgba(219, 27, 96, 0.10); color: var(--berry); font-weight: 600; } .mobile-nav .btn-book { margin-top: 12px; color: var(--white); justify-content: center; width: 100%; font-size: 15px; } /* ============================================= HEADER RESPONSIVE ============================================= */ @media (max-width: 820px) { .main-nav, .header-divider, .social-links, .header-right .btn-book { display: none; } .hamburger { display: flex; } .header-inner { height: 80px; padding: 0 20px; } .logo-icon { height: 110px; } } @media (max-width: 480px) { .header-inner { height: 70px; padding: 0 16px; } .logo-icon { height: 80px; } } @media (max-width: 380px) { .header-inner { height: 65px; padding: 0 12px; } .logo-icon { height: 65px; } .hamburger span { width: 22px; } } /* ============================================= REDUCED MOTION ============================================= */ @media (prefers-reduced-motion: reduce) { .site-header { opacity: 1 !important; transform: none !important; transition: none !important; } .mobile-nav { transition: none !important; } } /* ============================================= SCROLL REVEAL — shared across all pages ============================================= */ .faq-reveal { opacity: 0; transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .faq-reveal-up { transform: translateY(40px); } .faq-reveal-left { transform: translateX(-40px); } .faq-reveal-right { transform: translateX(40px); } .faq-reveal-zoom { transform: scale(0.95); } .faq-reveal.faq-reveal-active { opacity: 1; transform: translate(0, 0) scale(1); } /* ============================================= SHOP MODAL FIX ============================================= */ body.modal-open .site-header { z-index: 1080; } /* ============================================= HOME HERO SECTION ============================================= */ .hero { --sp-purple-deep: #481D6D; --sp-purple: #6E2CA1; --sp-pink: #DB1B60; --sp-pink-soft: #F472A8; --sp-lavender: #EBD0F3; --sp-lavender-soft: #F5E5F9; --sp-cream: #FFF5F8; --sp-white: #FFFFFF; --sp-text: #2A1A3A; --sp-text-muted: #6B5B7A; --sp-border: #EFE3F4; --sp-hero-bg: #FBF0F5; --sp-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --sp-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --sp-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); position: relative; background: var(--sp-hero-bg); padding: 40px 0 50px; overflow: hidden; font-family: var(--sp-font-body); color: var(--sp-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hero *, .hero *::before, .hero *::after { box-sizing: border-box; } .hero__container { max-width: 1320px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; position: relative; z-index: 2; } .hero__content { padding-left: 8px; } .hero__eyebrow { display: inline-block; padding: 7px 18px; background: var(--sp-lavender); color: var(--sp-purple-deep); font-family: var(--sp-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin: 0 0 22px; } .hero__title { font-family: var(--sp-font-heading); font-size: clamp(38px, 4.2vw, 70px); line-height: 1.05; font-weight: 700; color: var(--sp-purple-deep); margin: 0 0 22px; letter-spacing: -0.02em; } .hero__title-accent { background: linear-gradient(135deg, var(--sp-pink) 0%, var(--sp-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; display: inline-block; font-weight: 700; } .hero__title-accent::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 100%; height: 10px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12'%3E%3Cpath d='M2 8 Q50 1 100 6 T198 4' stroke='%23DB1B60' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; } .hero__subtitle { font-family: var(--sp-font-body); font-size: 17px; line-height: 1.65; color: var(--sp-text-muted); margin: 0 0 32px; font-weight: 400; max-width: 480px; } .hero__cta-group { display: flex; gap: 14px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-family: var(--sp-font-body); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: all var(--sp-transition); cursor: pointer; border: 2px solid transparent; white-space: nowrap; } .btn--primary { background: linear-gradient(135deg, var(--sp-pink) 0%, var(--sp-purple) 100%); color: var(--sp-white); box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .btn--primary .btn__arrow { transition: transform var(--sp-transition); } .btn--primary:hover .btn__arrow { transform: translateX(3px); } .btn--outline { background: var(--sp-purple-deep); color: var(--sp-white); border-color: transparent; } .btn--outline:hover { background: var(--sp-pink); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(219, 27, 96, 0.30); } .btn__arrow { width: 18px; height: 18px; } .hero__visual { position: relative; width: 100%; } .hero__image-wrap { position: relative; width: 100%; border-radius: 26px; overflow: hidden; box-shadow: 0 25px 60px rgba(75, 29, 109, 0.15); background: linear-gradient(135deg, #E8DDF3, #FCE7F1); aspect-ratio: 5 / 4.2; z-index: 2; } .hero__image { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 26px; } .hero__quote-bubble { position: absolute; top: 30px; left: -20px; background: var(--sp-white); padding: 16px 20px; border-radius: 16px; box-shadow: 0 12px 28px rgba(72, 29, 109, 0.18); border: 1px solid var(--sp-border); display: flex; gap: 12px; align-items: flex-start; max-width: 230px; animation: float-bubble 4s ease-in-out infinite; z-index: 4; } .hero__quote-bubble p { margin: 0; font-family: var(--sp-font-body); font-size: 14px; line-height: 1.5; color: var(--sp-purple-deep); font-weight: 500; } .hero__quote-heart { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--sp-lavender-soft); color: var(--sp-pink); display: grid; place-items: center; } .hero__quote-heart svg { width: 16px; height: 16px; } @keyframes float-bubble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero__services { position: relative; max-width: 1400px; margin: 60px auto 40px; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; gap: 8px; z-index: 2; } .hero__wave { position: absolute; top: 50%; left: 0; width: 100%; height: 120px; transform: translateY(-50%); z-index: -1; pointer-events: none; } .service-pill { background: var(--sp-white); border: 1px solid var(--sp-border); border-radius: 50%; width: 130px; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px; text-align: center; box-shadow: 0 4px 14px rgba(72, 29, 109, 0.08); color: var(--sp-purple-deep); font-family: var(--sp-font-heading); font-size: 12px; font-weight: 600; line-height: 1.25; cursor: pointer; transition: box-shadow var(--sp-transition), border-color var(--sp-transition); animation: float-bubble-up 5s ease-in-out infinite; } .service-pill:nth-child(2) { animation-delay: 0.3s; } .service-pill:nth-child(3) { animation-delay: 0.6s; } .service-pill:nth-child(4) { animation-delay: 0.9s; } .service-pill:nth-child(5) { animation-delay: 1.2s; } .service-pill:nth-child(6) { animation-delay: 1.5s; } .service-pill:nth-child(7) { animation-delay: 1.8s; } .service-pill:nth-child(8) { animation-delay: 2.1s; } .service-pill:nth-child(9) { animation-delay: 2.4s; } .service-pill:hover { box-shadow: 0 12px 32px rgba(219, 27, 96, 0.18); border-color: var(--sp-lavender); } .service-pill__icon { width: 38px; height: 38px; margin-bottom: 8px; color: var(--sp-purple-deep); } @keyframes float-bubble-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .hero__trust { max-width: 1100px; margin: 30px auto 0; padding: 18px 40px; background: var(--sp-white); border: 1px solid var(--sp-border); border-radius: 999px; box-shadow: 0 8px 24px rgba(72, 29, 109, 0.08); display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 16px; position: relative; z-index: 2; } .trust-item { display: flex; align-items: center; gap: 10px; color: var(--sp-purple-deep); font-family: var(--sp-font-body); font-size: 14px; font-weight: 600; } .trust-item svg { width: 20px; height: 20px; color: var(--sp-pink); } .hero__sparks { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .spark { position: absolute; width: 12px; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14 10 L24 12 L14 14 L12 24 L10 14 L0 12 L10 10 Z' fill='%23DB1B60'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; opacity: 0; animation: twinkle 3.5s ease-in-out infinite; } .spark--1 { top: 8%; left: 38%; width: 10px; height: 10px; animation-delay: 0s; } .spark--2 { top: 15%; left: 55%; width: 14px; height: 14px; animation-delay: 0.6s; } .spark--3 { top: 22%; left: 12%; width: 8px; height: 8px; animation-delay: 1.2s; } .spark--4 { top: 30%; left: 48%; width: 12px; height: 12px; animation-delay: 1.8s; } .spark--5 { top: 40%; left: 90%; width: 16px; height: 16px; animation-delay: 0.3s; } .spark--6 { top: 52%; left: 35%; width: 10px; height: 10px; animation-delay: 2.4s; } .spark--7 { top: 60%; left: 8%; width: 14px; height: 14px; animation-delay: 0.9s; } .spark--8 { top: 68%; left: 62%; width: 8px; height: 8px; animation-delay: 1.5s; } .spark--9 { top: 75%; left: 25%; width: 12px; height: 12px; animation-delay: 2.1s; } .spark--10 { top: 82%; left: 78%; width: 10px; height: 10px; animation-delay: 0.5s; } .spark--11 { top: 12%; left: 75%; width: 14px; height: 14px; animation-delay: 2.7s; } .spark--12 { top: 45%; left: 20%; width: 8px; height: 8px; animation-delay: 1.1s; } @keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 50% { opacity: 0.7; transform: scale(1) rotate(180deg); } } .hero__dot-cluster { position: absolute; bottom: 20px; left: -40px; width: 200px; height: 200px; background-image: radial-gradient(circle, var(--sp-pink) 1.5px, transparent 2px); background-size: 14px 14px; opacity: 0.20; border-radius: 50%; mask-image: radial-gradient(circle at 30% 70%, black 30%, transparent 70%); -webkit-mask-image: radial-gradient(circle at 30% 70%, black 30%, transparent 70%); z-index: 1; pointer-events: none; } /* Hero — Tablet */ @media (max-width: 1024px) { .hero { padding: 30px 0 40px; } .hero__container { grid-template-columns: 1fr; text-align: center; gap: 40px; } .hero__content { padding-left: 0; } .hero__subtitle { margin-left: auto; margin-right: auto; } .hero__cta-group { justify-content: center; } .hero__visual { max-width: 560px; margin: 0 auto; } .hero__quote-bubble { top: 20px; left: 10px; } .hero__services { flex-wrap: wrap; justify-content: center; gap: 16px; margin: 50px auto 30px; } .hero__wave { display: none; } .service-pill { width: 115px; height: 115px; } .faq-reveal-right { transform: translateY(40px); } } /* Hero — Mobile */ @media (max-width: 640px) { .hero { padding: 24px 0 30px; } .hero__container { padding: 0 20px; gap: 30px; } .hero__title { font-size: 38px; } .hero__subtitle { font-size: 15.5px; } .hero__cta-group { flex-direction: column; align-items: stretch; } .btn { justify-content: center; width: 100%; } .hero__visual { max-width: 380px; } .hero__quote-bubble { top: 14px; left: 8px; padding: 12px 14px; max-width: 200px; } .hero__quote-bubble p { font-size: 12.5px; } .service-pill { width: 100px; height: 100px; font-size: 10.5px; } .service-pill__icon { width: 30px; height: 30px; } .hero__trust { border-radius: 20px; padding: 16px 20px; gap: 12px; } .trust-item { font-size: 12px; } } /* Hero — Small mobile */ @media (max-width: 380px) { .hero__title { font-size: 32px; } .service-pill { width: 90px; height: 90px; font-size: 10px; } .hero__quote-bubble { max-width: 180px; padding: 10px 12px; } .hero__quote-bubble p { font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { .service-pill, .hero__quote-bubble, .spark { animation: none; } .faq-reveal, .faq-reveal-up, .faq-reveal-left, .faq-reveal-right, .faq-reveal-zoom { opacity: 1 !important; transform: none !important; } } /* ============================================= HOLISTIC WELLNESS SECTION ============================================= */ .holistic { background: var(--surface); padding: 80px 0; } .holistic-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } .smb-figure { position: relative; z-index: 1; display: flex; justify-content: center; } .smb-figure img { width: 500px; height: 500px; max-width: 100%; object-fit: contain; } .holistic-content h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(26px, 3.5vw, 38px); font-weight: 700; line-height: 1.2; color: #4B1F7A; letter-spacing: -0.5px; margin-bottom: 24px; } .holistic-content p { font-size: 15.5px; line-height: 1.8; color: #555; } /* ============================================= OUR PROFESSIONAL SERVICES SECTION ============================================= */ .services { background: var(--white); padding: 60px 0 90px; } .section-heading { font-family: 'Montserrat', sans-serif; font-size: clamp(38px, 4.2vw, 70px); font-weight: 600; color: #4B1F7A; text-align: center; margin-bottom: 40px; letter-spacing: -1px; line-height: 1.1; } .section-subtext { text-align: center; font-size: clamp(14px, 1.6vw, 17px); color: #888; margin-bottom: 60px; line-height: 1.6; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .service-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(90, 36, 115, 0.07); text-align: center; padding-bottom: 28px; transition: transform var(--transition-md), box-shadow var(--transition-md); } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .service-card-img { position: relative; height: 190px; overflow: visible; } .service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; border-radius: 0; clip-path: inset(0); } .service-card:hover .service-card-img img { transform: scale(1.05); } .service-icon { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); width: 58px; height: 58px; background: var(--plum); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 3px solid var(--white); box-shadow: 0 4px 12px rgba(90, 36, 115, 0.3); z-index: 2; } .service-icon svg { width: 26px; height: 26px; fill: var(--white); } .service-card-body { padding: 44px 20px 0; } .service-card-body h3 { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 800; color: var(--plum); margin-bottom: 10px; letter-spacing: 0.3px; } .service-card-body p { font-size: 14.5px; color: #000000; line-height: 1.7; } /* ============================================= TESTIMONIALS SECTION ============================================= */ .testimonials { background: var(--surface); padding: 60px 0 90px; } .testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 16px; } .review-card { background: var(--white); border-radius: var(--radius-sm); padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid rgba(90, 36, 115, 0.06); margin-bottom: 20px; transition: box-shadow var(--transition-md); } .review-card:hover { box-shadow: var(--shadow-md); } .review-card:last-child { margin-bottom: 0; } .review-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 12px; } .reviewer-info { display: flex; align-items: center; gap: 10px; min-width: 0; } .reviewer-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 15px; color: var(--white); flex-shrink: 0; } .avatar-r { background: #4AADE8; } .avatar-j { background: #34A853; } .reviewer-name { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: var(--charcoal); } .stars { color: var(--star-gold); font-size: 13px; letter-spacing: 1px; } .google-icon { width: 20px; height: 20px; flex-shrink: 0; } .review-text { font-size: 13.5px; line-height: 1.7; color: #555; } .review-plain { border-bottom: 1px solid rgba(90, 36, 115, 0.08); padding-bottom: 24px; margin-bottom: 24px; } .review-plain:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .review-plain-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .reviewer-plain-name { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: var(--plum); } .review-plain-text { font-size: 13.5px; line-height: 1.75; color: #555; } /* ============================================= OUR COUNSELLORS SECTION ============================================= */ .counsellors { background: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 60%, #E8E4F0 100%); padding: 90px 0 60px; } .counsellors-layout { display: grid; grid-template-columns: 420px 1fr; gap: 60px; align-items: start; } .founder-block { display: flex; flex-direction: column; align-items: center; } .founder-label { font-size: 12px; color: #888; letter-spacing: 0.3px; margin-bottom: 12px; align-self: flex-start; font-style: italic; } .founder-link { display: block; width: 100%; text-decoration: none; color: inherit; } .founder-photo-wrap { position: relative; width: 100%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); background: #E0D8EC; aspect-ratio: 3/4; max-height: 480px; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; } .founder-link:hover .founder-photo-wrap, .founder-link:focus-visible .founder-photo-wrap { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 48px rgba(90, 36, 115, 0.28); } .founder-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } .founder-link:hover .founder-photo-wrap img, .founder-link:focus-visible .founder-photo-wrap img { transform: scale(1.06); } .founder-photo-wrap::after { content: 'View Profile →'; position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 22px; background: linear-gradient(to top, rgba(90, 36, 115, 0.72) 0%, transparent 55%); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0; transition: opacity 0.35s ease; border-radius: var(--radius-md); pointer-events: none; } .founder-link:hover .founder-photo-wrap::after, .founder-link:focus-visible .founder-photo-wrap::after { opacity: 1; } .founder-name { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: 2px; color: var(--charcoal); text-align: center; margin-top: 20px; transition: color 0.3s ease; } .founder-link:hover .founder-name, .founder-link:focus-visible .founder-name { color: var(--berry); } .counsellors-right h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(28px, 4vw, 52px); font-weight: 600; color: #4B1F7A; margin-bottom: 36px; } .counsellors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .counsellor-card { text-align: center; } .counsellor-link { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-sm); outline: none; } .counsellor-photo { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; background: #D8CEE9; margin-bottom: 10px; box-shadow: var(--shadow-sm); transition: transform 0.38s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.38s cubic-bezier(0.25, 0.8, 0.25, 1); will-change: transform; } .counsellor-link:hover .counsellor-photo, .counsellor-link:focus-visible .counsellor-photo { transform: translateY(-6px) scale(1.03); box-shadow: 0 14px 32px rgba(90, 36, 115, 0.22); } .counsellor-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1); } .counsellor-link:hover .counsellor-photo img, .counsellor-link:focus-visible .counsellor-photo img { transform: scale(1.08); } .counsellor-photo::after { content: 'View Profile'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(90, 36, 115, 0.55); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .counsellor-link:hover .counsellor-photo::after, .counsellor-link:focus-visible .counsellor-photo::after { opacity: 1; } .counsellor-name { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--charcoal); transition: color 0.3s ease; } .counsellor-link:hover .counsellor-name, .counsellor-link:focus-visible .counsellor-name { color: var(--berry); } .language-banner { text-align: center; margin-top: 60px; padding: 36px 40px; background: rgba(255, 255, 255, 0.65); border-radius: var(--radius-md); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(90, 36, 115, 0.1); } .language-banner p { font-size: 20px; line-height: 2; color: var(--charcoal); } .language-banner p:first-child { color: var(--berry); font-weight: 700; text-transform: uppercase; } .language-banner p:nth-child(2) { color: var(--plum); font-weight: 700; text-transform: uppercase; } .language-banner p:last-child { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 30px; color: var(--charcoal); margin-top: 4px; } /* ============================================= FOOTER ============================================= */ .sparkz-footer { background: linear-gradient(135deg, #B81A6B 0%, #5A2473 55%, #2C272E 100%); color: #FFFFFF; font-family: 'Open Sans', sans-serif; overflow: hidden; } .footer-container { max-width: 1400px; margin: 0 auto; padding: 60px 40px 0; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr 0.8fr; gap: 30px; align-items: start; } .footer-box { position: relative; } .footer-logo { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .footer-logo img { width: 160px; margin-bottom: 16px; display: block; } .footer-logo p { color: rgba(255, 255, 255, 0.85); line-height: 1.8; font-size: 14px; font-weight: 400; margin: 0; padding: 0; white-space: nowrap; } .footer-box h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; margin-bottom: 22px; color: #FFFFFF; text-transform: uppercase; } .footer-box ul { list-style: none; padding: 0; margin: 0; } .footer-box ul li { margin-bottom: 10px; font-size: 15px; color: rgba(255, 255, 255, 0.92); font-weight: 400; } .footer-links li a { text-decoration: none; color: rgba(255, 255, 255, 0.92); transition: color 0.3s ease, padding 0.3s ease; font-size: 15px; } .footer-links li a::before { content: "›"; margin-right: 8px; color: #FFFFFF; font-size: 16px; } .footer-links li a:hover { color: #FFFFFF; padding-left: 4px; } .resource-links { display: flex; gap: 40px; flex-wrap: wrap; } .social-icons { display: flex; gap: 10px; margin-top: 10px; flex-wrap: nowrap; flex-direction: row; } .social-icons a { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; text-decoration: none; font-size: 14px; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; background: rgba(255, 255, 255, 0.08); flex-shrink: 0; } .social-icons a:hover { transform: translateY(-4px); background: #B81A6B; border-color: #FFFFFF; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 20px 40px; margin-top: 0; background: rgba(0, 0, 0, 0.12); } .footer-bottom p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.85); font-weight: 400; } /* ============================================= GLOBAL RESPONSIVE BREAKPOINTS ============================================= */ /* Large desktop → small desktop */ @media (max-width: 1200px) { .footer-container { grid-template-columns: 1fr 1fr; gap: 45px; padding: 55px 40px 0; } .footer-logo p { white-space: normal; } } /* Tablet landscape */ @media (max-width: 1024px) { .header-inner { padding: 0 24px; } .main-nav a { padding: 6px 10px; font-size: 13.5px; } .logo-icon { height: 150px; } .hero-inner { padding: 0 32px; } .holistic-inner { padding: 0 32px; } .section-inner { padding: 0 32px; } .smb-figure img { width: 100%; max-width: 420px; height: auto; } } /* Tablet */ @media (max-width: 960px) { .hero { padding: 60px 0 0; } .hero-inner { grid-template-columns: 1fr; min-height: auto; } .hero-visual { display: none; } .hero-content { padding-bottom: 60px; text-align: center; } .hero-content p { margin-left: auto; margin-right: auto; } .holistic { padding: 60px 0; } .holistic-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; } .smb-figure img { max-width: 360px; } .services-grid { grid-template-columns: repeat(2, 1fr); } .testimonials-grid { grid-template-columns: 1fr; } .counsellors { padding: 70px 0 50px; } .counsellors-layout { grid-template-columns: 1fr; gap: 40px; } .founder-block { max-width: 380px; margin: 0 auto; align-items: center; } .founder-label { align-self: center; text-align: center; } .founder-photo-wrap { max-height: 460px; } .counsellors-right h2 { text-align: center; } } /* Tablet portrait / large phone */ @media (max-width: 820px) { .main-nav, .header-divider, .social-links, .header-right .btn-book { display: none; } .hamburger { display: flex; } .mobile-nav.is-open { display: flex; } .header-inner { height: 80px; padding: 0 20px; } .logo-icon { height: 110px; } } /* Phone */ @media (max-width: 640px) { .section-inner, .hero-inner, .holistic-inner { padding: 0 20px; } .hero-content h1 { font-size: clamp(28px, 7vw, 40px); letter-spacing: -0.5px; } .hero-content p { font-size: 14.5px; } .services { padding: 50px 0 70px; } .services-grid { grid-template-columns: 1fr; gap: 24px; } .service-card-img { height: 200px; } .testimonials { padding: 50px 0 70px; } .review-card { padding: 20px; } .counsellors-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .counsellor-name { font-size: 10px; } .founder-photo-wrap { max-height: 380px; } .founder-name { font-size: 18px; margin-top: 14px; } .language-banner { padding: 24px 20px; margin-top: 40px; } .language-banner p { font-size: 15px; line-height: 1.7; } .language-banner p:last-child { font-size: 13px; } .footer-container { grid-template-columns: 1fr; padding: 50px 25px 0; gap: 35px; } .footer-logo img { width: 140px; } .footer-logo p { white-space: normal; font-size: 13px; } .resource-links { flex-direction: column; gap: 0; } .social-icons { flex-wrap: wrap; gap: 12px; } .footer-bottom { padding: 18px 25px; margin-top: 16px; } .footer-box h3 { margin-bottom: 16px; } } /* Small phone */ @media (max-width: 480px) { .header-inner { padding: 0 16px; } .logo-icon { height: 80px; } .hero { padding: 40px 0 0; } .hero-content { padding-bottom: 40px; } .hero-content h1 { font-size: clamp(26px, 8vw, 34px); } .holistic { padding: 50px 0; } .smb-figure img { max-width: 280px; } .holistic-content h2 { font-size: clamp(22px, 6vw, 28px); } .holistic-content br { display: none; } .section-heading { font-size: clamp(34px, 9vw, 48px); margin-bottom: 30px; } .service-card-img { height: 170px; } .service-icon { width: 50px; height: 50px; bottom: -25px; } .service-icon svg { width: 22px; height: 22px; } .service-card-body { padding: 38px 16px 0; } .review-card { padding: 18px; } .review-text, .review-plain-text { font-size: 13px; } .counsellors { padding: 60px 0 40px; } .counsellors-grid { gap: 12px; } } /* Very small phone */ @media (max-width: 380px) { .header-inner { padding: 0 12px; height: 70px; } .logo-icon { height: 60px; } .hamburger span { width: 22px; } .section-inner, .hero-inner, .holistic-inner { padding: 0 16px; } .counsellors-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .counsellor-name { font-size: 9.5px; letter-spacing: 0.5px; } .language-banner p { font-size: 13px; } .footer-container { padding: 40px 20px 0; } } /* ============================================= ABOUT US PAGE ============================================= */ /* About page — root variables */ :root { --abt-deep-purple: #4B1D6D; --abt-violet: #6E2CA1; --abt-magenta: #D81B60; --abt-magenta-deep: #A8154B; --abt-lavender: #E8DDF3; --abt-neutral: #F7F5F8; --abt-bg: #FFFFFF; --abt-surface: #FBFAFC; --abt-soft: #F7F0FA; --abt-charcoal: #1F1626; --abt-text: #4A3D55; --abt-text-mute: #786A82; --abt-text-soft: #9C92A4; --abt-line: rgba(75, 29, 109, 0.10); --abt-line-strong: rgba(75, 29, 109, 0.18); --abt-shadow-sm: 0 2px 10px rgba(75, 29, 109, 0.06); --abt-shadow-md: 0 12px 35px rgba(75, 29, 109, 0.10); --abt-shadow-lg: 0 25px 60px rgba(75, 29, 109, 0.15); --abt-shadow-glow: 0 20px 50px rgba(216, 27, 96, 0.20); --abt-r-sm: 12px; --abt-r: 18px; --abt-r-lg: 26px; --abt-r-xl: 32px; --abt-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --abt-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --strip-deep-purple: var(--abt-deep-purple); --strip-violet: var(--abt-violet); --strip-magenta: var(--abt-magenta); --strip-lavender: var(--abt-lavender); --strip-text-mute: var(--abt-text-mute); } /* ============================================= PAGE BASE ============================================= */ .abt-page { font-family: 'Poppins', 'Open Sans', system-ui, -apple-system, sans-serif; color: var(--abt-text); background: var(--abt-bg); overflow-x: hidden; line-height: 1.65; font-size: 16px; animation: abtPageIn 0.7s var(--abt-ease) both; } @keyframes abtPageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .abt-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; } .abt-services, .abt-intro, .vm-section, .strip-section, .abt-cta { content-visibility: auto; contain-intrinsic-size: 1px 600px; } /* ============================================= TYPOGRAPHY ============================================= */ .abt-eyebrow { display: inline-block; padding: 7px 18px; background: #EBD0F3; color: #481D6D; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin-bottom: 22px; } .abt-h1 { font-family: 'Montserrat', sans-serif; font-size: clamp(36px, 5.2vw, 56px); font-weight: 700; color: #481D6D; line-height: 1.1; margin: 0 0 20px; letter-spacing: -0.02em; } .abt-h1-accent { background: linear-gradient(135deg, #DB1B60 0%, #6E2CA1 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; position: relative; display: inline-block; } .abt-h1-accent::after { display: none; } .abt-h2 { font-family: 'Montserrat', sans-serif; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; color: var(--abt-charcoal); line-height: 1.2; margin: 0 0 18px; letter-spacing: -0.5px; } .abt-h2-center { text-align: center; } .abt-text-purple { color: var(--abt-deep-purple); } .abt-text-magenta { color: var(--abt-magenta); } .abt-body { font-size: 16px; color: var(--abt-text); line-height: 1.75; margin: 0 0 16px; } /* ============================================= ANIMATIONS ============================================= */ .abt-fade-in { opacity: 0; transform: translateY(16px); animation: abtFadeUp 0.8s var(--abt-ease) both; animation-delay: var(--abt-d, 0s); } @keyframes abtFadeUp { to { opacity: 1; transform: translateY(0); } } .abt-reveal, .strip-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.85s var(--abt-ease), transform 0.85s var(--abt-ease); transition-delay: var(--abt-d, 0s); } .abt-reveal.abt-in, .strip-reveal.strip-in, .abt-reveal.strip-in, .strip-reveal.abt-in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .abt-fade-in, .abt-reveal, .strip-reveal, .abt-page { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============================================= BUTTONS ============================================= */ .abt-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px; font-family: 'Montserrat', sans-serif; font-size: 15px; font-weight: 600; text-decoration: none; transition: transform 0.3s var(--abt-ease), box-shadow 0.3s var(--abt-ease), background 0.3s var(--abt-ease), color 0.3s var(--abt-ease), border-color 0.3s var(--abt-ease); cursor: pointer; border: none; white-space: nowrap; line-height: 1; } .abt-btn-primary { background: linear-gradient(135deg, var(--abt-magenta) 0%, var(--abt-magenta-deep) 100%); color: #fff; box-shadow: 0 8px 22px rgba(216, 27, 96, 0.30); } .abt-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(216, 27, 96, 0.40); } .abt-btn-ghost { background: transparent; color: var(--abt-deep-purple); border: 1.5px solid var(--abt-line-strong); } .abt-btn-ghost:hover { background: var(--abt-lavender); border-color: var(--abt-deep-purple); transform: translateY(-2px); } /* ============================================= ABOUT HERO ============================================= */ .abt-hero { position: relative; padding: 90px 0 100px; background: radial-gradient(ellipse at top right, rgba(216, 27, 96, 0.10), transparent 60%), radial-gradient(ellipse at bottom left, rgba(110, 44, 161, 0.10), transparent 60%), linear-gradient(165deg, #FAF5FC 0%, var(--abt-lavender) 100%); overflow: hidden; isolation: isolate; } .abt-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .abt-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.45; } .abt-blob-1 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(216, 27, 96, 0.4), transparent); top: -120px; right: -100px; animation: abtFloat 14s ease-in-out infinite; } .abt-blob-2 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(75, 29, 109, 0.35), transparent); bottom: -120px; left: -80px; animation: abtFloat 18s ease-in-out infinite reverse; } @keyframes abtFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, -30px); } } .abt-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; } .abt-hero-text { position: relative; } .abt-hero-lede { font-size: 17px; color: var(--abt-text); line-height: 1.75; margin: 0 0 32px; max-width: 540px; } .abt-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; } /* Hero Stats */ .abt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 28px; border-top: 1px solid var(--abt-line-strong); } .abt-stat { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--abt-r); padding: 14px; box-shadow: 0 6px 18px rgba(75, 29, 109, 0.06); transition: transform 0.35s var(--abt-ease), box-shadow 0.35s var(--abt-ease), background 0.35s var(--abt-ease); } @supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) { .abt-stat { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } .abt-stat:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(75, 29, 109, 0.12); background: rgba(255, 255, 255, 0.95); } .abt-stat-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--abt-deep-purple), var(--abt-violet)); color: #fff; box-shadow: 0 6px 14px rgba(75, 29, 109, 0.25); } .abt-stat:nth-child(2) .abt-stat-icon { background: linear-gradient(135deg, var(--abt-magenta), var(--abt-magenta-deep)); box-shadow: 0 6px 14px rgba(216, 27, 96, 0.30); } .abt-stat:nth-child(3) .abt-stat-icon { background: linear-gradient(135deg, var(--abt-violet), var(--abt-deep-purple)); box-shadow: 0 6px 14px rgba(110, 44, 161, 0.25); } .abt-stat-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .abt-stat-num { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 800; color: var(--abt-deep-purple); line-height: 1; } .abt-stat-label { font-size: 11.5px; color: var(--abt-text-mute); font-weight: 600; letter-spacing: 0.2px; line-height: 1.35; } /* Hero Visual */ .abt-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; } .abt-hero-illus { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1 / 1; } .abt-hero-illus-svg { width: 100%; height: 100%; filter: drop-shadow(0 25px 50px rgba(75, 29, 109, 0.18)); animation: abtIllusFloat 6s ease-in-out infinite; } @keyframes abtIllusFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .abt-spark-dot { transform-origin: center; animation: abtSparkPulse 2.4s ease-in-out infinite; } .abt-spark-dot:nth-child(odd) { animation-delay: 0s; } .abt-spark-dot:nth-child(even) { animation-delay: 0.6s; } .abt-spark-dot:nth-child(3n) { animation-delay: 1.2s; } @keyframes abtSparkPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } } .abt-orb-tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; background: #fff; padding: 10px 16px; border-radius: 999px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; color: var(--abt-charcoal); box-shadow: var(--abt-shadow-md); animation: abtTagFloat 5s ease-in-out infinite; } .abt-orb-tag-1 { top: 8%; left: -2%; animation-delay: 0.3s; } .abt-orb-tag-2 { bottom: 12%; right: -4%; animation-delay: 1.2s; } @keyframes abtTagFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .abt-orb-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: #2EBE7F; box-shadow: 0 0 0 3px rgba(46, 190, 127, 0.20); } .abt-orb-tag-dot-magenta { background: var(--abt-magenta); box-shadow: 0 0 0 3px rgba(216, 27, 96, 0.20); } /* ============================================= ABOUT SERVICES SECTION ============================================= */ .abt-services { padding: 100px 0; background: #FFFFFF; position: relative; } .abt-section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; } .abt-section-head .abt-eyebrow { text-align: center; } .abt-section-sub { font-size: 16px; color: var(--abt-text-mute); margin: 0; line-height: 1.7; } .abt-srv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .abt-srv-card { position: relative; background: #fff; border: 1px solid var(--abt-line); border-radius: var(--abt-r-lg); padding: 40px 32px 36px; box-shadow: var(--abt-shadow-sm); transition: transform 0.45s var(--abt-ease), box-shadow 0.45s var(--abt-ease), border-color 0.45s var(--abt-ease); display: flex; flex-direction: column; } .abt-srv-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--abt-deep-purple), var(--abt-magenta)); border-radius: var(--abt-r-lg) var(--abt-r-lg) 0 0; opacity: 0; transition: opacity 0.4s var(--abt-ease); } .abt-srv-card:hover { transform: translateY(-8px); box-shadow: var(--abt-shadow-lg); border-color: transparent; } .abt-srv-card:hover::before { opacity: 1; } .abt-srv-card-feature { background: linear-gradient(180deg, #fff, #FCF5FA); border-color: rgba(216, 27, 96, 0.20); } .abt-srv-card-feature::before { opacity: 1; } .abt-srv-badge { position: absolute; top: -12px; right: 24px; background: linear-gradient(135deg, var(--abt-magenta), var(--abt-magenta-deep)); color: #fff; padding: 6px 14px; border-radius: 999px; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; box-shadow: 0 6px 16px rgba(216, 27, 96, 0.30); } .abt-srv-icon { width: 68px; height: 68px; margin-bottom: 22px; border-radius: 18px; background: linear-gradient(135deg, var(--abt-deep-purple), var(--abt-violet)); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(75, 29, 109, 0.25); transition: transform 0.4s var(--abt-ease-bounce); } .abt-srv-card-feature .abt-srv-icon { background: linear-gradient(135deg, var(--abt-magenta), var(--abt-magenta-deep)); box-shadow: 0 12px 28px rgba(216, 27, 96, 0.30); } .abt-srv-card:hover .abt-srv-icon { transform: scale(1.08) rotate(-6deg); } .abt-srv-title { font-family: 'Montserrat', sans-serif; font-size: 21px; font-weight: 700; color: var(--abt-charcoal); margin: 0 0 12px; } .abt-srv-desc { font-size: 15px; color: var(--abt-text-mute); line-height: 1.7; margin: 0 0 22px; } .abt-srv-line { height: 1px; background: var(--abt-line); margin-bottom: 22px; } .abt-srv-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .abt-srv-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; color: var(--abt-charcoal); font-weight: 500; line-height: 1.55; } .abt-tick { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(216, 27, 96, 0.12); display: grid; place-items: center; margin-top: 2px; position: relative; } .abt-tick::after { content: ""; width: 6px; height: 9px; border: solid var(--abt-magenta); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); } /* ============================================= WHO WE ARE — INTRO SECTION ============================================= */ .abt-intro { padding: 100px 0; background: #F5EDFA; } .abt-intro * { box-sizing: border-box; } .abt-intro-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; } .abt-intro-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 70px; align-items: center; } .abt-intro-img-wrap { position: relative; width: 100%; } .abt-intro-img { position: relative; z-index: 2; border-radius: 26px; overflow: hidden; box-shadow: 0 25px 60px rgba(75, 29, 109, 0.15); background: linear-gradient(135deg, #E8DDF3, #FCE7F1); aspect-ratio: 5 / 4.2; } .abt-intro-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 26px; } .abt-intro-img-frame { position: absolute; inset: 0; border: 2px solid #D81B60; border-radius: 26px; transform: translate(20px, 20px); z-index: 1; opacity: 0.55; pointer-events: none; } .abt-intro-text { padding-left: 8px; } .abt-intro-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; color: var(--abt-magenta); letter-spacing: 3px; margin: 0 0 18px; text-transform: uppercase; } .abt-intro-heading { font-family: 'Montserrat', sans-serif; font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; color: var(--abt-charcoal); line-height: 1.2; margin: 0 0 18px; letter-spacing: -0.5px; } .abt-intro-body { font-size: 16px; color: var(--abt-text); line-height: 1.75; margin: 0 0 16px; } .abt-feature-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; } .abt-feature-list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 500; color: var(--abt-charcoal); } .abt-feature-tick { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--abt-magenta), var(--abt-magenta-deep)); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(216, 27, 96, 0.25); } /* ============================================= VISION & MISSION SECTION ============================================= */ .vm-section { background: #ffffff; padding: 90px 24px; font-family: 'Poppins', sans-serif; position: relative; overflow: hidden; } .vm-section::before, .vm-section::after { content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; z-index: 0; pointer-events: none; } .vm-section::before { width: 380px; height: 380px; background: var(--abt-lavender); top: -120px; left: -120px; } .vm-section::after { width: 420px; height: 420px; background: #fce4ec; bottom: -150px; right: -150px; } .vm-container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } .vm-heading { text-align: center; margin-bottom: 60px; } .vm-eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 3px; color: var(--abt-magenta); margin: 0 0 14px; text-transform: uppercase; } .vm-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: clamp(28px, 4.5vw, 46px); color: #2A1A3A; margin: 0; line-height: 1.15; } .vm-title-accent { color: var(--abt-magenta); } .vm-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; align-items: stretch; } .vm-card { background: #ffffff; border-radius: 24px; overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; display: flex; height: 100%; } .vm-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px -20px rgba(75, 29, 109, 0.25); } .vm-card img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; } /* ============================================= FEATURE STRIP ============================================= */ .strip-section { padding: 20px 0; background: #FFFFFF; font-family: 'Poppins', system-ui, -apple-system, sans-serif; } .strip-section *, .strip-section *::before, .strip-section *::after { box-sizing: border-box; } .strip-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; } .strip-card { background: linear-gradient(135deg, #F7EEFA 0%, var(--abt-lavender) 100%); border-radius: 32px; padding: 48px 56px; display: grid; grid-template-columns: 1.1fr 2.6fr; gap: 48px; align-items: center; box-shadow: 0 18px 50px rgba(75, 29, 109, 0.08); border: 1px solid rgba(75, 29, 109, 0.06); position: relative; overflow: hidden; } .strip-card::before, .strip-card::after { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); pointer-events: none; z-index: 0; } .strip-card::before { width: 200px; height: 200px; background: rgba(216, 27, 96, 0.08); top: -80px; right: 20%; } .strip-card::after { width: 160px; height: 160px; background: rgba(110, 44, 161, 0.10); bottom: -60px; left: 10%; } .strip-tagline { position: relative; z-index: 1; font-family: 'Montserrat', sans-serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; color: var(--abt-deep-purple); line-height: 1.25; letter-spacing: -0.5px; margin: 0; } .strip-features { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .strip-feature { position: relative; text-align: center; padding: 0 18px; transition: transform 0.4s var(--abt-ease); } .strip-feature:hover { transform: translateY(-4px); } .strip-feature + .strip-feature::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: rgba(75, 29, 109, 0.18); } .strip-icon { width: 56px; height: 56px; margin: 0 auto 14px; display: grid; place-items: center; color: var(--abt-deep-purple); transition: transform 0.4s var(--abt-ease-bounce), color 0.3s ease; } .strip-feature:hover .strip-icon { transform: scale(1.1) rotate(-5deg); color: var(--abt-magenta); } .strip-icon svg { width: 100%; height: 100%; } .strip-title { font-family: 'Montserrat', sans-serif; font-size: 15.5px; font-weight: 700; color: var(--abt-deep-purple); margin: 0 0 6px; letter-spacing: -0.2px; } .strip-desc { font-size: 13.5px; font-weight: 500; color: var(--abt-text-mute); line-height: 1.55; margin: 0; } /* ============================================= CTA STRIP ============================================= */ .abt-cta { padding: 20px 0 60px; background: var(--abt-bg); } .abt-cta-strip { background: #FFFFFF; border: 1px solid var(--abt-line); border-radius: var(--abt-r-lg); padding: 22px 32px; display: flex; align-items: center; gap: 24px; box-shadow: var(--abt-shadow-md); position: relative; overflow: hidden; } .abt-cta-strip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--abt-deep-purple), var(--abt-magenta)); } .abt-cta-icon { flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center; color: var(--abt-deep-purple); } .abt-cta-text { flex: 1; min-width: 0; } .abt-cta-line-1 { font-family: 'Poppins', sans-serif; font-size: 15px; color: var(--abt-text-mute); font-weight: 500; margin: 0 0 4px; line-height: 1.4; } .abt-cta-line-2 { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; color: var(--abt-magenta); margin: 0; line-height: 1.3; } .abt-cta-strip .abt-btn { flex-shrink: 0; } /* ============================================= ABOUT RESPONSIVE ============================================= */ /* ≤ 1100px */ @media (max-width: 1100px) { .strip-card { padding: 40px; gap: 36px; grid-template-columns: 1fr 2.4fr; } .strip-feature { padding: 0 12px; } } /* ≤ 1024px */ @media (max-width: 1024px) { .abt-hero { padding: 70px 0 80px; } .abt-hero-grid { gap: 40px; } .abt-hero-illus { max-width: 420px; } .abt-intro { padding: 80px 0; } .abt-intro-grid { gap: 50px; } .abt-services { padding: 80px 0; } .vm-section { padding: 70px 24px; } } /* ≤ 880px — stack everything */ @media (max-width: 880px) { .abt-hero { padding: 60px 0 70px; } .abt-hero-grid { grid-template-columns: 1fr; gap: 50px; } .abt-hero-text { text-align: center; } .abt-hero-lede { margin-left: auto; margin-right: auto; } .abt-hero-ctas { justify-content: center; } .abt-stats { max-width: 560px; margin: 0 auto; } .abt-hero-illus { max-width: 380px; margin: 0 auto; } .abt-intro-grid { grid-template-columns: 1fr; gap: 40px; } .abt-intro-text { padding-left: 0; text-align: center; } .abt-intro-img-wrap { max-width: 540px; margin: 0 auto; } .abt-intro-img-frame { transform: translate(14px, 14px); } .abt-feature-list { text-align: left; max-width: 460px; margin: 28px auto 0; } .abt-srv-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } .abt-srv-grid .abt-srv-card:last-child { grid-column: 1 / -1; max-width: 480px; margin: 0 auto; width: 100%; } .vm-section { padding: 70px 20px; } .vm-grid { grid-template-columns: 1fr; gap: 24px; } .vm-heading { margin-bottom: 44px; } .strip-card { grid-template-columns: 1fr; gap: 36px; padding: 44px 36px; } .strip-tagline { text-align: center; } .strip-features { grid-template-columns: repeat(2, 1fr); gap: 32px 0; } .strip-feature + .strip-feature::before { display: none; } .strip-feature:nth-child(2)::before, .strip-feature:nth-child(4)::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: rgba(75, 29, 109, 0.18); display: block; } .abt-cta-strip { flex-direction: column; text-align: center; padding: 28px 24px; gap: 18px; } .abt-cta-strip::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 5px; background: linear-gradient(90deg, var(--abt-deep-purple), var(--abt-magenta)); } } /* ≤ 600px */ @media (max-width: 600px) { .abt-wrap { padding: 0 18px; } .abt-hero { padding: 48px 0 60px; } .abt-intro, .abt-services { padding: 60px 0; } .vm-section { padding: 56px 16px; } .strip-section { padding: 20px 0; } .abt-cta { padding: 20px 0 60px; } .abt-hero-ctas { gap: 10px; } .abt-btn { padding: 13px 22px; font-size: 14px; } .abt-stats { grid-template-columns: 1fr; gap: 10px; max-width: 360px; } .abt-stat { padding: 12px 14px; } .abt-stat-num { font-size: 20px; } .abt-srv-grid { grid-template-columns: 1fr; gap: 20px; } .abt-srv-grid .abt-srv-card:last-child { max-width: 100%; } .abt-srv-card { padding: 32px 24px 28px; } .abt-feature-list { grid-template-columns: 1fr; gap: 12px; } .abt-intro-img, .abt-intro-img img, .abt-intro-img-frame { border-radius: 20px; } .abt-intro-img-frame { transform: translate(10px, 10px); } .vm-eyebrow { font-size: 11px; letter-spacing: 2px; } .vm-card { border-radius: 20px; } .strip-wrap { padding: 0 20px; } .strip-card { padding: 36px 24px; border-radius: 22px; gap: 28px; } .strip-tagline { font-size: 22px; } .strip-features { grid-template-columns: 1fr; gap: 26px; } .strip-feature + .strip-feature::before, .strip-feature:nth-child(2)::before, .strip-feature:nth-child(4)::before { display: none; } .strip-feature + .strip-feature { padding-top: 26px; border-top: 1px solid rgba(75, 29, 109, 0.15); } .strip-feature { padding-left: 0; padding-right: 0; } .strip-icon { width: 48px; height: 48px; } .abt-cta-strip { padding: 24px 20px; } .abt-cta-line-2 { font-size: 18px; } .abt-h1 { font-size: 30px; } .abt-h2 { font-size: 24px; } .abt-orb-tag { font-size: 11px; padding: 8px 12px; } } /* ≤ 380px */ @media (max-width: 380px) { .abt-wrap { padding: 0 14px; } .abt-intro-wrap { padding: 0 16px; } .strip-wrap { padding: 0 16px; } .abt-h1 { font-size: 26px; } .abt-hero-ctas { flex-direction: column; align-items: stretch; } .abt-btn { width: 100%; justify-content: center; } .abt-stat-num { font-size: 19px; } .abt-stat-icon { width: 38px; height: 38px; } .strip-card { padding: 32px 20px; } .strip-tagline { font-size: 20px; } } @media (prefers-reduced-motion: reduce) { .abt-blob-1, .abt-blob-2, .abt-hero-illus-svg, .abt-spark-dot, .abt-orb-tag { animation: none !important; } } /* ============================================= SERVICES PAGE All classes prefixed .spkz- ============================================= */ .spkz-services { --spkz-purple-deep: #481D6D; --spkz-purple: #6E2CA1; --spkz-pink: #DB1B60; --spkz-pink-soft: #F472A8; --spkz-lavender: #EBD0F3; --spkz-lavender-soft: #F5E5F9; --spkz-cream: #FFF5F8; --spkz-white: #FFFFFF; --spkz-text: #2A1A3A; --spkz-text-muted: #6B5B7A; --spkz-border: #EFE3F4; --spkz-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --spkz-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --spkz-radius-lg: 24px; --spkz-radius-md: 16px; --spkz-radius-sm: 10px; --spkz-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --spkz-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --spkz-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --spkz-shadow-modal: 0 30px 90px rgba(72, 29, 109, 0.35); --spkz-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); position: relative; padding: 96px 24px 120px; background: linear-gradient(180deg, var(--spkz-cream) 0%, #FFFFFF 60%, var(--spkz-cream) 100%); font-family: var(--spkz-font-body); color: var(--spkz-text); overflow: hidden; } .spkz-services *, .spkz-services *::before, .spkz-services *::after { box-sizing: border-box; } /* Background dot pattern */ .spkz-bg-pattern { position: absolute; width: 380px; height: 380px; border-radius: 50%; background-image: radial-gradient(circle, rgba(110, 44, 161, 0.18) 1.5px, transparent 2px), radial-gradient(circle, rgba(219, 27, 96, 0.14) 1.5px, transparent 2px); background-size: 28px 28px, 40px 40px; background-position: 0 0, 14px 14px; opacity: 0.55; pointer-events: none; z-index: 0; filter: blur(0.3px); } .spkz-bg-pattern--left { top: 60px; left: -160px; } .spkz-bg-pattern--right { bottom: 80px; right: -180px; transform: scale(1.2); } /* Intro */ .spkz-services__intro { position: relative; z-index: 2; max-width: 760px; margin: 0 auto 56px; text-align: center; opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; will-change: opacity, transform; } .spkz-services__intro.spkz-in { opacity: 1; transform: translateY(0); } .spkz-services__eyebrow { display: inline-block; padding: 7px 18px; background: var(--spkz-lavender); color: var(--spkz-purple-deep); font-family: var(--spkz-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin-bottom: 20px; } .spkz-services__title { font-family: var(--spkz-font-heading); font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.15; color: var(--spkz-purple-deep); margin: 0 0 20px; letter-spacing: -0.02em; } .spkz-accent { background: linear-gradient(135deg, var(--spkz-pink) 0%, var(--spkz-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; } .spkz-services__lead { font-size: 17px; line-height: 1.65; color: var(--spkz-text-muted); margin: 0; } /* Category Tabs */ .spkz-tabs { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1200px; margin: 0 auto 48px; opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; } .spkz-tabs.spkz-in { opacity: 1; transform: translateY(0); } .spkz-tab { font-family: var(--spkz-font-body); font-size: 14px; font-weight: 500; padding: 11px 22px; background: var(--spkz-white); color: var(--spkz-text-muted); border: 1.5px solid var(--spkz-border); border-radius: 999px; cursor: pointer; transition: all var(--spkz-transition); white-space: nowrap; } .spkz-tab:hover { color: var(--spkz-purple-deep); border-color: var(--spkz-purple); transform: translateY(-2px); } .spkz-tab--active { background: linear-gradient(135deg, var(--spkz-purple-deep), var(--spkz-purple)); color: var(--spkz-white); border-color: transparent; box-shadow: 0 8px 20px rgba(110, 44, 161, 0.30); } .spkz-tab--active:hover { color: var(--spkz-white); } /* Cards Grid */ .spkz-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 28px; max-width: 1240px; margin: 0 auto; } /* Service Card */ .spkz-card { position: relative; background: var(--spkz-white); border: 1px solid var(--spkz-border); border-radius: var(--spkz-radius-lg); padding: 32px 28px 24px; display: flex; flex-direction: column; box-shadow: var(--spkz-shadow-sm); transition: opacity 0.6s ease, transform 0.6s ease, box-shadow var(--spkz-transition), border-color var(--spkz-transition); opacity: 0; transform: translateY(30px); overflow: hidden; will-change: opacity, transform; content-visibility: auto; contain-intrinsic-size: 380px; } .spkz-card.spkz-in { opacity: 1; transform: translateY(0); } .spkz-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--spkz-purple-deep), var(--spkz-pink)); transform: scaleX(0); transform-origin: left; transition: transform var(--spkz-transition); } .spkz-card:hover { transform: translateY(-8px); box-shadow: var(--spkz-shadow-lg); border-color: var(--spkz-lavender); } .spkz-card:hover::before { transform: scaleX(1); } .spkz-card--hidden { display: none; } /* Failsafe: show cards if JS/IntersectionObserver fails */ @media (prefers-reduced-motion: no-preference) { .spkz-card { animation: spkz-failsafe-show 0.01s 2s forwards; } .spkz-card.spkz-in { animation: none; } } @keyframes spkz-failsafe-show { to { opacity: 1; transform: translateY(0); } } /* Card Header */ .spkz-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; } .spkz-card__icon { width: 56px; height: 56px; border-radius: var(--spkz-radius-md); background: linear-gradient(135deg, var(--spkz-lavender) 0%, var(--spkz-lavender-soft) 100%); display: flex; align-items: center; justify-content: center; color: var(--spkz-purple-deep); transition: all var(--spkz-transition); } .spkz-card__icon svg { width: 28px; height: 28px; } .spkz-card:hover .spkz-card__icon { background: linear-gradient(135deg, var(--spkz-purple-deep), var(--spkz-purple)); color: var(--spkz-white); transform: rotate(-6deg) scale(1.05); } .spkz-card__tag { font-family: var(--spkz-font-heading); font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--spkz-pink), var(--spkz-purple)); color: var(--spkz-white); } .spkz-card__tag--alt { background: var(--spkz-lavender); color: var(--spkz-purple-deep); } .spkz-card__tag--corp { background: var(--spkz-purple-deep); color: var(--spkz-white); } /* Card Content */ .spkz-card__title { font-family: var(--spkz-font-heading); font-size: 22px; font-weight: 700; color: var(--spkz-purple-deep); margin: 0 0 12px; letter-spacing: -0.01em; } .spkz-card__desc { font-size: 15px; line-height: 1.65; color: var(--spkz-text-muted); margin: 0 0 24px; } /* Card Toggle Button */ .spkz-card__toggle { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; background: transparent; border: 1.5px solid var(--spkz-lavender); color: var(--spkz-purple-deep); font-family: var(--spkz-font-body); font-size: 14px; font-weight: 500; border-radius: 999px; cursor: pointer; transition: all var(--spkz-transition); align-self: flex-start; } .spkz-card__toggle:hover { background: var(--spkz-purple-deep); border-color: var(--spkz-purple-deep); color: var(--spkz-white); transform: translateX(4px); } .spkz-toggle-icon { width: 16px; height: 16px; transition: transform var(--spkz-transition); } .spkz-card__toggle:hover .spkz-toggle-icon { transform: translateX(2px); } /* Modal Overlay */ .spkz-modal-overlay { position: fixed; inset: 0; background: rgba(42, 26, 58, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .spkz-modal-overlay.spkz-modal-open { opacity: 1; visibility: visible; } html.spkz-modal-active, body.spkz-modal-active { overflow: hidden; } /* Modal Container */ .spkz-modal { position: relative; width: 100%; max-width: 720px; max-height: 90vh; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--spkz-radius-lg); box-shadow: var(--spkz-shadow-modal); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.92) translateY(20px); opacity: 0; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; } .spkz-modal-overlay.spkz-modal-open .spkz-modal { transform: scale(1) translateY(0); opacity: 1; } .spkz-modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--spkz-purple-deep), var(--spkz-pink), var(--spkz-purple)); z-index: 2; } /* Modal Header */ .spkz-modal__header { position: relative; padding: 22px 64px 20px 24px; background: linear-gradient(135deg, var(--spkz-lavender-soft) 0%, var(--spkz-cream) 100%); border-bottom: 1px solid var(--spkz-border); flex-shrink: 0; display: flex; align-items: center; gap: 16px; } .spkz-modal__icon { width: 48px; height: 48px; border-radius: var(--spkz-radius-sm); background: linear-gradient(135deg, var(--spkz-purple-deep), var(--spkz-purple)); display: flex; align-items: center; justify-content: center; color: var(--spkz-white); flex-shrink: 0; box-shadow: 0 6px 16px rgba(110, 44, 161, 0.22); } .spkz-modal__icon svg { width: 24px; height: 24px; } .spkz-modal__title { font-family: var(--spkz-font-heading); font-size: clamp(18px, 2.4vw, 22px); font-weight: 700; color: var(--spkz-purple-deep); margin: 0; letter-spacing: -0.01em; line-height: 1.25; } /* Modal Body */ .spkz-modal__body { padding: 32px 36px; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--spkz-purple) transparent; -webkit-overflow-scrolling: touch; } .spkz-modal__body::-webkit-scrollbar { width: 6px; } .spkz-modal__body::-webkit-scrollbar-track { background: var(--spkz-lavender-soft); border-radius: 999px; } .spkz-modal__body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--spkz-purple), var(--spkz-pink)); border-radius: 999px; } /* Modal Detail Blocks */ .spkz-detail-block { padding: 20px 0; border-top: 1px dashed var(--spkz-border); } .spkz-detail-block:first-child { border-top: none; padding-top: 0; } .spkz-detail-block:last-child { padding-bottom: 0; } .spkz-detail-title { font-family: var(--spkz-font-heading); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--spkz-pink); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; } .spkz-detail-title::before { content: ""; width: 24px; height: 2px; background: linear-gradient(90deg, var(--spkz-pink), var(--spkz-purple)); border-radius: 999px; } .spkz-detail-text { font-size: 15px; line-height: 1.7; color: var(--spkz-text-muted); margin: 0; } .spkz-list { list-style: none; padding: 0; margin: 0; } .spkz-list li { position: relative; padding: 8px 0 8px 24px; font-size: 15px; line-height: 1.6; color: var(--spkz-text); } .spkz-list li::before { content: ""; position: absolute; top: 16px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--spkz-pink), var(--spkz-purple)); } .spkz-list--rich li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0 12px 24px; } .spkz-list--rich li::before { top: 20px; } .spkz-list--rich strong { font-family: var(--spkz-font-heading); font-weight: 600; font-size: 15px; color: var(--spkz-purple-deep); } .spkz-list--rich span { font-size: 14px; line-height: 1.6; color: var(--spkz-text-muted); } /* Modal Footer */ .spkz-modal__footer { padding: 20px 36px 28px; border-top: 1px solid var(--spkz-border); background: var(--spkz-cream); display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; align-items: center; flex-shrink: 0; } .spkz-modal__footer-text { font-size: 13px; color: var(--spkz-text-muted); margin: 0; margin-right: auto; } .spkz-modal__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; font-family: var(--spkz-font-body); font-size: 14px; font-weight: 500; border-radius: 999px; cursor: pointer; border: 2px solid transparent; text-decoration: none; transition: all var(--spkz-transition); } .spkz-modal__btn--primary { background: linear-gradient(135deg, var(--spkz-purple-deep), var(--spkz-purple)); color: var(--spkz-white); box-shadow: 0 8px 20px rgba(110, 44, 161, 0.30); } .spkz-modal__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(110, 44, 161, 0.40); } .spkz-modal__btn--ghost { background: transparent; color: var(--spkz-purple-deep); border-color: var(--spkz-lavender); } .spkz-modal__btn--ghost:hover { background: var(--spkz-lavender-soft); border-color: var(--spkz-purple); } /* Modal Close Button */ .spkz-modal__close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: 1px solid var(--spkz-border); color: var(--spkz-purple-deep); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; transition: all var(--spkz-transition); } .spkz-modal__close svg { width: 18px; height: 18px; } .spkz-modal__close:hover { background: var(--spkz-pink); color: var(--spkz-white); border-color: var(--spkz-pink); transform: rotate(90deg) scale(1.05); } /* Notes Banner */ .spkz-notes { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 18px; max-width: 1240px; margin: 64px auto 0; padding: 24px 28px; background: #F3EDF8; border: 1px solid #E7DDF2; border-radius: var(--spkz-radius-md); box-shadow: 0 10px 30px rgba(75, 29, 109, 0.06); overflow: hidden; opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .spkz-notes::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #4B1F7A, #E3327A); } .spkz-notes.spkz-in { opacity: 1; transform: translateY(0); } .spkz-notes__icon { position: relative; z-index: 1; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #E3327A; color: #FFFFFF; display: flex; align-items: center; justify-content: center; } .spkz-notes__icon svg { width: 22px; height: 22px; } .spkz-notes__title { font-family: var(--spkz-font-heading); font-size: 15px; font-weight: 600; color: #4B1F7A; margin: 0 0 6px; } .spkz-notes__text { font-size: 16px; line-height: 1.65; color: #000; margin: 0; } /* CTA Strip */ .spkz-cta { position: relative; z-index: 2; max-width: 1240px; margin: 44px auto 0; padding: 40px; background: #FFFFFF; border: 1px solid #E7DDF2; border-radius: var(--spkz-radius-lg); box-shadow: 0 10px 30px rgba(75, 29, 109, 0.06); display: flex; align-items: center; gap: 24px; overflow: hidden; opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; } .spkz-cta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #4B1F7A, #E3327A); } .spkz-cta.spkz-in { opacity: 1; transform: translateY(0); } .spkz-cta__icon { flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center; color: #4B1F7A; } .spkz-cta__icon svg { width: 100%; height: 100%; } .spkz-cta__text { flex: 1; min-width: 0; } .spkz-cta__title { font-family: var(--spkz-font-heading); font-size: 20px; font-weight: 700; color: #4B1F7A; margin: 0 0 4px; line-height: 1.3; letter-spacing: -0.2px; } .spkz-cta__accent { background: linear-gradient(90deg, #4B1F7A 0%, #E3327A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .spkz-cta__subtitle { font-family: var(--spkz-font-body); font-size: 14px; color: #6E5F85; font-weight: 500; margin: 0; line-height: 1.45; } .spkz-cta__actions { flex-shrink: 0; display: flex; gap: 12px; align-items: center; } /* Buttons */ .spkz-btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--spkz-font-body); font-size: 14px; font-weight: 600; padding: 12px 26px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: all var(--spkz-transition); cursor: pointer; border: 2px solid transparent; } /* BUG FIX: removed stray "#E91E7A" text that was concatenated into box-shadow */ .spkz-btn--primary { background: linear-gradient(135deg, #D91B72 0%, #A10D59 100%); color: #FFFFFF; box-shadow: 0 10px 25px rgba(217, 27, 114, 0.25); } .spkz-btn--primary:hover { background: linear-gradient(135deg, #E91E7A 0%, #8A0B4C 100%); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(217, 27, 114, 0.35); } .spkz-btn--ghost { background: transparent; color: #E3327A; border-color: #E3327A; } .spkz-btn--ghost:hover { background: #E3327A; color: #FFFFFF; border-color: #E91E7A; transform: translateY(-2px); } /* Services Responsive */ @media (max-width: 768px) { .spkz-services { padding: 64px 18px 80px; } .spkz-services__intro { margin-bottom: 40px; } .spkz-tabs { margin-bottom: 32px; gap: 8px; } .spkz-tab { padding: 9px 16px; font-size: 13px; } .spkz-grid { grid-template-columns: 1fr; gap: 20px; } .spkz-card { padding: 26px 22px 22px; } .spkz-card__title { font-size: 20px; } .spkz-notes { padding: 20px 22px; flex-direction: column; gap: 12px; } .spkz-bg-pattern { width: 220px; height: 220px; } .spkz-bg-pattern--left { left: -100px; } .spkz-bg-pattern--right { right: -120px; } .spkz-cta { flex-direction: column; align-items: flex-start; text-align: left; padding: 24px 24px 24px 32px; gap: 18px; margin-top: 56px; } .spkz-cta__icon { width: 48px; height: 48px; } .spkz-cta__title { font-size: 18px; } .spkz-cta__title br { display: none; } .spkz-cta__actions { width: 100%; flex-direction: column; align-items: stretch; } .spkz-cta__actions .spkz-btn, .spkz-btn { width: 100%; justify-content: center; } .spkz-modal-overlay { padding: 12px; align-items: flex-end; } .spkz-modal { max-height: 92vh; border-radius: 20px 20px 0 0; transform: translateY(40px); } .spkz-modal-overlay.spkz-modal-open .spkz-modal { transform: translateY(0); } .spkz-modal__header { padding: 16px 52px 16px 18px; gap: 12px; } .spkz-modal__icon { width: 42px; height: 42px; } .spkz-modal__icon svg { width: 22px; height: 22px; } .spkz-modal__title { font-size: 17px; } .spkz-modal__body { padding: 22px; } .spkz-modal__footer { padding: 16px 22px 22px; flex-direction: column; align-items: stretch; } .spkz-modal__footer-text { margin-right: 0; text-align: center; margin-bottom: 4px; } .spkz-modal__btn { justify-content: center; width: 100%; } .spkz-modal__close { top: 12px; right: 12px; width: 36px; height: 36px; } } @media (max-width: 420px) { .spkz-card__header { flex-wrap: wrap; gap: 10px; } .spkz-services { padding: 56px 14px 70px; } } @media (prefers-reduced-motion: reduce) { .spkz-services *, .spkz-services *::before, .spkz-services *::after, .spkz-modal-overlay, .spkz-modal { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .spkz-services__intro, .spkz-tabs, .spkz-card, .spkz-notes, .spkz-cta { opacity: 1 !important; transform: none !important; } } /* ============================================= FEES PAGE All classes prefixed .fees- ============================================= */ .fees-hero, .fees-trust-strip, .fees-pricing { --fees-purple-deep: #481D6D; --fees-purple: #6E2CA1; --fees-pink: #DB1B60; --fees-pink-soft: #F472A8; --fees-lavender: #EBD0F3; --fees-lavender-soft: #F5E5F9; --fees-cream: #FFF5F8; --fees-white: #FFFFFF; --fees-text: #2A1A3A; --fees-text-muted: #6B5B7A; --fees-border: #EFE3F4; --fees-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --fees-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --fees-radius-lg: 24px; --fees-radius-md: 16px; --fees-radius-sm: 10px; --fees-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --fees-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --fees-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --fees-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--fees-font-body); color: var(--fees-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fees-hero *, .fees-trust-strip *, .fees-pricing *, .fees-hero *::before, .fees-trust-strip *::before, .fees-pricing *::before { box-sizing: border-box; } /* ============================================= FEES HERO ============================================= */ .fees-hero { position: relative; padding: 96px 24px 100px; background: linear-gradient(180deg, var(--fees-cream) 0%, #FFFFFF 60%, var(--fees-cream) 100%); overflow: hidden; } .fees-hero-container { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; } .fees-hero-content { position: relative; z-index: 2; } .fees-hero-tag { display: inline-block; padding: 7px 18px; background: var(--fees-lavender); color: var(--fees-purple-deep); font-family: var(--fees-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin-bottom: 22px; } .fees-hero-title { font-family: var(--fees-font-heading); font-size: clamp(36px, 5.2vw, 56px); font-weight: 700; line-height: 1.1; color: var(--fees-purple-deep); margin: 0 0 20px; letter-spacing: -0.02em; } .fees-hero-accent { background: linear-gradient(135deg, var(--fees-pink) 0%, var(--fees-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .fees-hero-subtitle { font-size: 17px; line-height: 1.65; color: var(--fees-text-muted); margin: 0 0 36px; } /* Free 20-min session card */ .fees-free-card { background: var(--fees-white); border: 1px solid var(--fees-border); border-radius: var(--fees-radius-lg); padding: 28px 30px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; box-shadow: var(--fees-shadow-md); max-width: 600px; position: relative; overflow: hidden; transition: transform var(--fees-transition), box-shadow var(--fees-transition); } .fees-free-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--fees-purple-deep), var(--fees-pink)); } .fees-free-card:hover { transform: translateY(-4px); box-shadow: var(--fees-shadow-lg); } .fees-free-icon { width: 56px; height: 56px; border-radius: var(--fees-radius-md); background: linear-gradient(135deg, var(--fees-lavender) 0%, var(--fees-lavender-soft) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--fees-purple-deep); } .fees-free-icon svg { stroke: var(--fees-purple-deep); } .fees-free-info { min-width: 0; } .fees-free-label { display: inline-block; font-family: var(--fees-font-heading); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; background: var(--fees-lavender); color: var(--fees-purple-deep); margin-bottom: 10px; } .fees-free-title { font-family: var(--fees-font-heading); font-size: 18px; font-weight: 600; color: var(--fees-purple-deep); margin: 0; line-height: 1.2; } .fees-free-price { font-family: var(--fees-font-heading); font-size: 34px; font-weight: 800; margin: 4px 0 8px; letter-spacing: 0.5px; background: linear-gradient(135deg, var(--fees-pink) 0%, var(--fees-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .fees-free-desc { font-size: 13px; color: var(--fees-text-muted); margin: 0; line-height: 1.55; } .fees-free-meta { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; } .fees-free-meta-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fees-purple-deep); font-weight: 500; } .fees-free-meta-item svg { stroke: var(--fees-purple-deep); } .fees-hero-image { position: relative; border-radius: var(--fees-radius-lg); overflow: hidden; aspect-ratio: 5 / 4; background: var(--fees-lavender-soft); box-shadow: var(--fees-shadow-lg); } .fees-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================= FEES TRUST STRIP ============================================= */ .fees-trust-strip { padding: 28px 24px; background: linear-gradient(135deg, var(--fees-lavender) 0%, var(--fees-lavender-soft) 100%); border-top: 1px solid var(--fees-border); border-bottom: 1px solid var(--fees-border); } .fees-trust-container { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 60px; } .fees-trust-item { display: flex; align-items: center; gap: 16px; } .fees-trust-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--fees-purple-deep), var(--fees-purple)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 16px rgba(110, 44, 161, 0.22); } .fees-trust-text h4 { font-family: var(--fees-font-heading); font-size: 15px; font-weight: 600; color: var(--fees-purple-deep); margin: 0 0 4px; } .fees-trust-text p { font-size: 13px; color: var(--fees-text-muted); margin: 0; } .fees-trust-divider { width: 1px; height: 50px; background: rgba(72, 29, 109, 0.2); } /* ============================================= FEES PRICING SECTION ============================================= */ .fees-pricing { position: relative; padding: 96px 24px 120px; background: linear-gradient(180deg, var(--fees-cream) 0%, #FFFFFF 60%, var(--fees-cream) 100%); overflow: hidden; } .fees-pricing-container { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; } .fees-pricing-header { text-align: center; margin-bottom: 56px; max-width: 760px; margin-left: auto; margin-right: auto; } .fees-pricing-tag { display: inline-block; padding: 7px 18px; background: var(--fees-lavender); color: var(--fees-purple-deep); font-family: var(--fees-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin-bottom: 20px; } .fees-pricing-title { font-family: var(--fees-font-heading); font-size: clamp(28px, 4.2vw, 46px); font-weight: 700; line-height: 1.15; color: var(--fees-purple-deep); margin: 0 0 14px; letter-spacing: -0.02em; } .fees-pricing-underline { width: 70px; height: 3px; background: linear-gradient(90deg, var(--fees-pink), var(--fees-purple)); margin: 8px auto 16px; border-radius: 999px; } .fees-pricing-subtitle { font-size: 17px; line-height: 1.65; color: var(--fees-text-muted); margin: 0; } .fees-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 28px; margin-bottom: 40px; } .fees-pricing-card { position: relative; background: var(--fees-white); border: 1px solid var(--fees-border); border-radius: var(--fees-radius-lg); padding: 32px 28px 28px; box-shadow: var(--fees-shadow-sm); overflow: hidden; transition: transform var(--fees-transition), box-shadow var(--fees-transition), border-color var(--fees-transition); } .fees-pricing-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--fees-purple-deep), var(--fees-pink)); transform: scaleX(0); transform-origin: left; transition: transform var(--fees-transition); } .fees-pricing-card:hover { transform: translateY(-8px); box-shadow: var(--fees-shadow-lg); border-color: var(--fees-lavender); } .fees-pricing-card:hover::before { transform: scaleX(1); } .fees-pricing-card-header { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding-bottom: 22px; border-bottom: 1px dashed var(--fees-border); margin-bottom: 8px; } .fees-pricing-card-icon { width: 56px; height: 56px; border-radius: var(--fees-radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--fees-transition); } .fees-pricing-card-icon--purple { background: linear-gradient(135deg, var(--fees-lavender) 0%, var(--fees-lavender-soft) 100%); color: var(--fees-purple-deep); } .fees-pricing-card-icon--pink { background: linear-gradient(135deg, #FDE0EC 0%, #FFF0F6 100%); color: var(--fees-pink); } .fees-pricing-card:hover .fees-pricing-card-icon--purple { background: linear-gradient(135deg, var(--fees-purple-deep), var(--fees-purple)); color: var(--fees-white); transform: rotate(-6deg) scale(1.05); } .fees-pricing-card:hover .fees-pricing-card-icon--purple svg { stroke: var(--fees-white); } .fees-pricing-card:hover .fees-pricing-card-icon--pink { background: linear-gradient(135deg, var(--fees-pink), var(--fees-purple)); color: var(--fees-white); transform: rotate(-6deg) scale(1.05); } .fees-pricing-card:hover .fees-pricing-card-icon--pink svg { stroke: var(--fees-white); } .fees-pricing-card-title h3 { font-family: var(--fees-font-heading); font-size: 20px; font-weight: 700; color: var(--fees-purple-deep); margin: 0 0 4px; letter-spacing: -0.01em; } .fees-pricing-card-title h3.fees-pricing-card-title--pink { color: var(--fees-pink); } .fees-pricing-card-title p { font-size: 13px; color: var(--fees-text-muted); margin: 0; line-height: 1.5; } .fees-pricing-card-addon { text-align: center; font-family: var(--fees-font-heading); } .fees-pricing-card-addon span { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--fees-pink); } .fees-pricing-card-addon small { font-size: 11px; color: var(--fees-text-muted); } .fees-pricing-card-rows { display: flex; flex-direction: column; } .fees-pricing-row { display: grid; grid-template-columns: 1.5fr 1fr 0.7fr 0.7fr; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px dashed var(--fees-border); } .fees-pricing-row:last-child { border-bottom: none; } .fees-pricing-row-name { font-size: 14px; font-weight: 500; color: var(--fees-text); } .fees-pricing-row-time { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fees-text-muted); } .fees-pricing-row-time svg { stroke: var(--fees-purple); } .fees-pricing-row-price { font-family: var(--fees-font-heading); font-size: 17px; font-weight: 700; color: var(--fees-purple-deep); text-align: right; } .fees-pricing-row-addon { font-family: var(--fees-font-heading); font-size: 14px; font-weight: 600; color: var(--fees-pink); text-align: right; } .fees-pricing-card-note { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--fees-radius-sm); margin-top: 22px; } .fees-pricing-card-note--purple { background: var(--fees-lavender-soft); } .fees-pricing-card-note--pink { background: #FFF0F6; } .fees-pricing-card-note p { font-size: 13px; color: var(--fees-purple-deep); margin: 0; line-height: 1.5; } .fees-pricing-card-note--pink p { color: var(--fees-pink); } /* ============================================= FEES SUBSIDY CALLOUT ============================================= */ .fees-subsidy { position: relative; background: linear-gradient(135deg, var(--fees-lavender-soft) 0%, var(--fees-cream) 100%); border: 1px solid var(--fees-border); border-radius: var(--fees-radius-lg); padding: 30px 36px; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: center; margin-bottom: 72px; overflow: hidden; box-shadow: var(--fees-shadow-sm); } .fees-subsidy::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--fees-purple-deep), var(--fees-pink)); } .fees-subsidy-left { display: flex; align-items: center; gap: 18px; } .fees-subsidy-icon { width: 60px; height: 60px; border-radius: var(--fees-radius-md); background: var(--fees-white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--fees-shadow-sm); color: var(--fees-purple-deep); } .fees-subsidy-icon svg { stroke: var(--fees-purple-deep); } .fees-subsidy-info h3 { font-family: var(--fees-font-heading); font-size: 19px; font-weight: 700; color: var(--fees-purple-deep); margin: 0 0 4px; letter-spacing: -0.01em; } .fees-subsidy-info p { font-size: 13px; color: var(--fees-text-muted); margin: 0; } .fees-subsidy-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; } .fees-subsidy-list li { font-size: 13px; color: var(--fees-text); display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; } .fees-subsidy-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: linear-gradient(135deg, var(--fees-pink), var(--fees-purple)); color: var(--fees-white); border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .fees-subsidy-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; background: var(--fees-pink); color: var(--fees-white); border-radius: 999px; font-family: var(--fees-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--fees-transition); white-space: nowrap; } .fees-subsidy-btn:hover { background: var(--fees-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } /* ============================================= FEES NOTES CARDS ============================================= */ .fees-notes-header { text-align: center; margin-bottom: 32px; } .fees-notes-header h2 { font-family: var(--fees-font-heading); font-size: clamp(24px, 3.2vw, 34px); font-weight: 700; color: var(--fees-purple-deep); margin: 0; letter-spacing: -0.01em; } .fees-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 64px; } .fees-notes-card { position: relative; background: var(--fees-white); border: 1px solid var(--fees-border); border-radius: var(--fees-radius-lg); padding: 30px 28px; box-shadow: var(--fees-shadow-sm); transition: transform var(--fees-transition), box-shadow var(--fees-transition), border-color var(--fees-transition); overflow: hidden; } .fees-notes-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--fees-purple-deep), var(--fees-pink)); transform: scaleX(0); transform-origin: left; transition: transform var(--fees-transition); } .fees-notes-card:hover { transform: translateY(-6px); box-shadow: var(--fees-shadow-lg); border-color: var(--fees-lavender); } .fees-notes-card:hover::before { transform: scaleX(1); } .fees-notes-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed var(--fees-border); } .fees-notes-card-icon { width: 48px; height: 48px; border-radius: var(--fees-radius-md); background: linear-gradient(135deg, var(--fees-lavender) 0%, var(--fees-lavender-soft) 100%); display: flex; align-items: center; justify-content: center; color: var(--fees-purple-deep); transition: all var(--fees-transition); } .fees-notes-card-icon svg { stroke: var(--fees-purple-deep); } .fees-notes-card:hover .fees-notes-card-icon { background: linear-gradient(135deg, var(--fees-purple-deep), var(--fees-purple)); color: var(--fees-white); } .fees-notes-card:hover .fees-notes-card-icon svg { stroke: var(--fees-white); } .fees-notes-card-head h3 { font-family: var(--fees-font-heading); font-size: 19px; font-weight: 700; color: var(--fees-purple-deep); margin: 0; letter-spacing: -0.01em; } .fees-notes-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; } .fees-notes-list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: flex-start; } .fees-notes-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--fees-pink), var(--fees-purple)); color: var(--fees-white); font-family: var(--fees-font-heading); font-size: 13px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 10px rgba(110, 44, 161, 0.22); } .fees-notes-list li p { font-size: 14px; color: var(--fees-text-muted); line-height: 1.6; margin: 0; } /* ============================================= FEES CTA BANNER BUG FIX: .fees-cta-banner-text p had broken color value "#E3327A(255, 255, 255, 0.85)" — fixed to plain color. BUG FIX: .fees-cta-btn-primary:hover had stray "#E91E7A" text concatenated into box-shadow — fixed. ============================================= */ .fees-cta-banner { position: relative; background: #fff; border-radius: var(--fees-radius-lg); padding: 32px 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; overflow: hidden; box-shadow: 0 18px 50px rgba(72, 29, 109, 0.30); } .fees-cta-banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--fees-pink), var(--fees-pink-soft), var(--fees-pink)); } .fees-cta-banner-left { display: flex; align-items: center; gap: 18px; } .fees-cta-banner-icon { width: 52px; height: 52px; border-radius: var(--fees-radius-md); background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.2); } .fees-cta-banner-text h3 { font-family: var(--fees-font-heading); font-size: 20px; font-weight: 700; color: #4B1F7A; margin: 0 0 4px; letter-spacing: -0.01em; } /* BUG FIX: was color: #E3327A(255, 255, 255, 0.85) — invalid */ .fees-cta-banner-text p { font-size: 14px; color: #6B5B7A; margin: 0; } .fees-cta-banner-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .fees-cta-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--fees-pink); color: var(--fees-white); border-radius: 999px; font-family: var(--fees-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.35); transition: all var(--fees-transition); } /* BUG FIX: was box-shadow: 0 12px 28px#E91E7A rgba(0,0,0,0.20) — invalid */ .fees-cta-btn-primary:hover { background: var(--fees-purple-deep); color: #ffffff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .fees-cta-btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; background: #ffffff; color: #E3327A; border-radius: 999px; font-family: var(--fees-font-body); font-size: 14px; font-weight: 500; text-decoration: none; border: 2px solid #E3327A; transition: all var(--fees-transition); } .fees-cta-btn-secondary:hover { background: #E3327A; color: #ffffff; border-color: #E91E7A; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(219, 27, 96, 0.30); } /* ============================================= FEES SCROLL REVEAL ============================================= */ .fees-reveal { opacity: 0; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .fees-reveal-up { transform: translateY(40px); } .fees-reveal-left { transform: translateX(-40px); } .fees-reveal-right { transform: translateX(40px); } .fees-reveal-active { opacity: 1; transform: translate(0, 0); } /* ============================================= FEES PAYMENT SECTION ============================================= */ .fees-payment { margin-bottom: 64px; } .fees-payment-section-label { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; } .fees-payment-section-label::before, .fees-payment-section-label::after { content: ""; flex: 1; height: 1px; background: var(--fees-border); } .fees-payment-section-label span { font-family: var(--fees-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--fees-text-muted); white-space: nowrap; } .fees-payment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .fees-payment-card { background: linear-gradient(135deg, var(--fees-lavender-soft) 0%, var(--fees-cream) 100%); border: 1px solid var(--fees-border); border-radius: var(--fees-radius-lg); overflow: hidden; transition: box-shadow var(--fees-transition), transform var(--fees-transition); } .fees-payment-card:hover { transform: translateY(-3px); box-shadow: var(--fees-shadow-md); } .fees-payment-card-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--fees-border); background: var(--fees-lavender); } .fees-payment-card-top svg { stroke: var(--fees-purple-deep); flex-shrink: 0; } .fees-payment-card-title { font-family: var(--fees-font-heading); font-size: 14px; font-weight: 600; color: var(--fees-purple-deep); flex: 1; } .fees-payment-badge { font-family: var(--fees-font-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .fees-payment-badge--purple { background: var(--fees-lavender); color: var(--fees-purple-deep); } .fees-payment-badge--pink { background: #FDE0EC; color: var(--fees-pink); } .fees-payment-card-body { padding: 20px 18px; } .fees-payment-qr-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; } .fees-payment-qr-frame { width: 150px; height: 150px; border: 1px solid var(--fees-border); border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 5px; } .fees-payment-qr-frame img { width: 140px; height: 140px; object-fit: contain; display: block; } .fees-payment-chip-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .fees-payment-chip-row span { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--fees-border); color: var(--fees-text-muted); background: var(--fees-lavender-soft); font-family: var(--fees-font-heading); font-weight: 500; } .fees-payment-qr-hint { font-size: 13px; color: var(--fees-text-muted); text-align: center; line-height: 1.6; margin: 0; } .fees-payment-qr-hint strong { color: var(--fees-purple-deep); font-weight: 600; } .fees-payment-bank-rows { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; } .fees-payment-bank-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--fees-border); } .fees-payment-bank-row:last-child { border-bottom: none; } .fees-payment-bank-key { font-size: 12px; color: var(--fees-text-muted); flex-shrink: 0; font-family: var(--fees-font-heading); font-weight: 500; } .fees-payment-bank-val { font-size: 13px; color: var(--fees-purple-deep); font-weight: 600; text-align: right; } .fees-payment-bank-mono { font-family: 'Courier New', Courier, monospace; font-size: 18px; background: #fff; padding: 2px 8px; border-radius: 5px; letter-spacing: 0.05em; font-weight: 700; color: var(--fees-purple-deep); } .fees-payment-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; background: var(--fees-lavender-soft); border-radius: var(--fees-radius-sm); border: 1px solid var(--fees-border); } .fees-payment-note svg { stroke: var(--fees-purple-deep); flex-shrink: 0; margin-top: 1px; } .fees-payment-note p { font-size: 12px; color: var(--fees-text-muted); margin: 0; line-height: 1.55; } /* ============================================= FEES RESPONSIVE ============================================= */ @media (max-width: 1024px) { .fees-hero { padding: 72px 24px 80px; } .fees-hero-container { grid-template-columns: 1fr; gap: 50px; } .fees-hero-image { max-width: 560px; margin: 0 auto; } .fees-free-card { max-width: 100%; } .fees-trust-container { gap: 40px; } .fees-pricing { padding: 72px 24px 96px; } .fees-pricing-grid { grid-template-columns: 1fr; gap: 24px; } .fees-notes-grid { grid-template-columns: 1fr; gap: 22px; } .fees-subsidy { grid-template-columns: 1fr; text-align: left; gap: 22px; justify-items: start; padding: 28px 30px; } .fees-subsidy-list { grid-template-columns: 1fr; } } @media (max-width: 640px) { .fees-hero { padding: 60px 18px 70px; } .fees-hero-title { font-size: 36px; } .fees-hero-subtitle br { display: none; } .fees-free-card { grid-template-columns: 1fr; gap: 18px; padding: 24px; text-align: left; } .fees-free-icon { width: 52px; height: 52px; } .fees-free-price { font-size: 28px; } .fees-free-meta { flex-direction: row; gap: 22px; } .fees-trust-strip { padding: 24px 18px; } .fees-trust-container { flex-direction: column; gap: 22px; } .fees-trust-divider { width: 70%; height: 1px; } .fees-pricing { padding: 64px 18px 80px; } .fees-pricing-card { padding: 26px 22px 22px; } .fees-pricing-card-header { grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 14px; } .fees-pricing-card-addon { grid-column: 1 / -1; text-align: left; padding-top: 4px; } .fees-pricing-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 6px 12px; padding: 14px 0; } .fees-pricing-row-name { grid-column: 1 / -1; font-size: 14px; font-weight: 600; color: var(--fees-purple-deep); margin-bottom: 2px; } .fees-pricing-row-time { font-size: 12px; } .fees-pricing-row-price { text-align: right; font-size: 16px; } .fees-pricing-row-addon { grid-column: 1 / -1; text-align: left; font-size: 12px; } .fees-pricing-row-addon::before { content: "Add-on (30 mins) "; color: var(--fees-text-muted); font-weight: 500; } .fees-subsidy { padding: 24px 22px; } .fees-subsidy-btn { width: 100%; justify-content: center; } .fees-notes-card { padding: 24px 22px; } .fees-cta-banner { padding: 26px 24px; flex-direction: column; align-items: flex-start; text-align: left; } .fees-cta-banner-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; } .fees-cta-btn-primary, .fees-cta-btn-secondary { justify-content: center; width: 100%; } .fees-payment-row { grid-template-columns: 1fr; } .fees-payment-qr-frame { width: 160px; height: 160px; } } @media (max-width: 380px) { .fees-hero-title { font-size: 30px; } .fees-free-meta { flex-direction: column; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .fees-hero *, .fees-trust-strip *, .fees-pricing *, .fees-hero *::before, .fees-trust-strip *::before, .fees-pricing *::before { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .fees-reveal, .fees-reveal-up, .fees-reveal-left, .fees-reveal-right { opacity: 1 !important; transform: none !important; } } /* ============================================= FAQ PAGE All classes prefixed .faq- ============================================= */ body.nav-locked { overflow: hidden; } .faq-hero, .faq-main { --faq-purple-deep: #481D6D; --faq-purple: #6E2CA1; --faq-pink: #DB1B60; --faq-pink-soft: #F472A8; --faq-lavender: #EBD0F3; --faq-lavender-soft: #F5E5F9; --faq-cream: #FFF5F8; --faq-white: #FFFFFF; --faq-text: #2A1A3A; --faq-text-muted: #6B5B7A; --faq-border: #EFE3F4; --faq-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --faq-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --faq-radius-lg: 24px; --faq-radius-md: 16px; --faq-radius-sm: 10px; --faq-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --faq-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --faq-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --faq-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--faq-font-body); color: var(--faq-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .faq-hero *, .faq-main *, .faq-hero *::before, .faq-main *::before { box-sizing: border-box; } /* FAQ Hero */ .faq-hero { position: relative; padding: 96px 24px 40px; background: linear-gradient(180deg, var(--faq-cream) 0%, #FFFFFF 100%); text-align: center; overflow: hidden; } .faq-hero-container { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; } .faq-hero-tag { display: inline-block; padding: 7px 18px; background: var(--faq-lavender); color: var(--faq-purple-deep); font-family: var(--faq-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin-bottom: 22px; } .faq-hero-title { font-family: var(--faq-font-heading); font-size: clamp(32px, 4.8vw, 52px); font-weight: 700; line-height: 1.1; color: var(--faq-purple-deep); margin: 0 0 18px; letter-spacing: -0.02em; } .faq-hero-accent { background: linear-gradient(135deg, var(--faq-pink) 0%, var(--faq-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .faq-hero-subtitle { font-size: 17px; line-height: 1.65; color: var(--faq-text-muted); margin: 0; } /* FAQ Main */ .faq-main { position: relative; padding: 10px 24px 120px; background: linear-gradient(180deg, #FFFFFF 0%, var(--faq-cream) 100%); overflow: hidden; } .faq-main-container { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } /* FAQ Tabs */ .faq-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; } .faq-tab { background: var(--faq-white); color: var(--faq-purple-deep); border: 1px solid var(--faq-border); font-family: var(--faq-font-body); font-size: 14px; font-weight: 500; padding: 11px 26px; border-radius: 999px; cursor: pointer; transition: all var(--faq-transition); box-shadow: var(--faq-shadow-sm); } .faq-tab:hover { background: var(--faq-lavender-soft); border-color: var(--faq-lavender); transform: translateY(-2px); } .faq-tab.active { background: linear-gradient(135deg, var(--faq-pink) 0%, var(--faq-purple) 100%); color: var(--faq-white); border-color: transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); } /* FAQ Group */ .faq-group { display: none; animation: faqFade 0.4s ease; } .faq-group.active { display: block; } @keyframes faqFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* FAQ Card */ .faq-card { position: relative; background: var(--faq-white); border: 1px solid var(--faq-border); border-radius: var(--faq-radius-lg); box-shadow: var(--faq-shadow-sm); margin-bottom: 18px; overflow: hidden; transition: transform var(--faq-transition), box-shadow var(--faq-transition), border-color var(--faq-transition); } .faq-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--faq-purple-deep), var(--faq-pink)); transform: scaleX(0); transform-origin: left; transition: transform var(--faq-transition); } .faq-card:hover { transform: translateY(-4px); box-shadow: var(--faq-shadow-md); border-color: var(--faq-lavender); } .faq-card.open::before { transform: scaleX(1); } .faq-card-question { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px 26px; cursor: pointer; transition: background var(--faq-transition); user-select: none; -webkit-tap-highlight-color: transparent; } .faq-card-question:hover { background: rgba(245, 229, 249, 0.3); } .faq-card-question:focus-visible { outline: 2px solid var(--faq-purple); outline-offset: -2px; } .faq-card-icon { width: 44px; height: 44px; border-radius: var(--faq-radius-md); background: linear-gradient(135deg, var(--faq-lavender) 0%, var(--faq-lavender-soft) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--faq-purple-deep); transition: all var(--faq-transition); } .faq-card-icon svg { stroke: var(--faq-purple-deep); transition: stroke var(--faq-transition); } .faq-card:hover .faq-card-icon, .faq-card.open .faq-card-icon { background: linear-gradient(135deg, var(--faq-purple-deep), var(--faq-purple)); transform: rotate(-6deg) scale(1.05); } .faq-card:hover .faq-card-icon svg, .faq-card.open .faq-card-icon svg { stroke: var(--faq-white); } .faq-card-question h3 { font-family: var(--faq-font-heading); font-size: clamp(15px, 1.8vw, 17px); font-weight: 600; color: var(--faq-purple-deep); margin: 0; letter-spacing: -0.01em; line-height: 1.4; } .faq-card-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--faq-lavender-soft); color: var(--faq-purple-deep); font-family: var(--faq-font-heading); font-size: 22px; font-weight: 400; flex-shrink: 0; transition: all var(--faq-transition); line-height: 1; } .faq-card.open .faq-card-toggle { background: linear-gradient(135deg, var(--faq-pink), var(--faq-purple)); color: var(--faq-white); transform: rotate(45deg); box-shadow: 0 4px 12px rgba(219, 27, 96, 0.30); } /* FAQ Answer — smooth open/close using grid-template-rows */ .faq-card-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .faq-card.open .faq-card-answer { grid-template-rows: 1fr; } .faq-card-answer-inner { overflow: hidden; min-height: 0; opacity: 0; visibility: hidden; transition: opacity 0s linear 0s, visibility 0s linear 0s; } .faq-card.open .faq-card-answer-inner { opacity: 1; visibility: visible; transition: opacity 0.3s ease 0.15s, visibility 0s linear 0s; padding: 4px 0 26px; border-top: 1px dashed var(--faq-border); margin: 0 26px; } .faq-card-answer-inner p { font-size: 14.5px; color: var(--faq-text-muted); line-height: 1.7; margin: 12px 0; } .faq-card-answer-inner > strong { display: block; font-family: var(--faq-font-heading); font-size: 14.5px; font-weight: 600; color: var(--faq-purple-deep); margin: 16px 0 6px; letter-spacing: 0.2px; } .faq-card-answer-inner p strong, .faq-card-answer-inner li strong { color: var(--faq-purple-deep); font-weight: 600; font-family: var(--faq-font-body); } .faq-card-answer-inner ul { list-style: none; padding: 0; margin: 10px 0 16px; display: flex; flex-direction: column; gap: 10px; } .faq-card-answer-inner ul li { position: relative; padding-left: 24px; font-size: 14px; color: var(--faq-text-muted); line-height: 1.65; display: list-item; } .faq-card-answer-inner ul li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--faq-pink), var(--faq-purple)); box-shadow: 0 2px 4px rgba(219, 27, 96, 0.20); } /* FAQ CTA Banner BUG FIX: .faq-cta-btn-primary:hover had two box-shadow values concatenated: "rgba(219,27,96,0.35)rgba(252,75,169,0.975)" — fixed. */ .faq-cta-banner { position: relative; background: var(--faq-white); border-radius: var(--faq-radius-lg); padding: 32px 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: nowrap; overflow: hidden; box-shadow: 0 18px 50px rgba(72, 29, 109, 0.18); margin-top: 48px; border: 1px solid var(--faq-border); } .faq-cta-banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--faq-pink), var(--faq-pink-soft), var(--faq-pink)); } .faq-cta-banner-left { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; } .faq-cta-banner-icon { width: 52px; height: 52px; border-radius: var(--faq-radius-md); background: linear-gradient(135deg, var(--faq-lavender) 0%, var(--faq-lavender-soft) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--faq-purple-deep); } .faq-cta-banner-icon svg { stroke: var(--faq-purple-deep); } .faq-cta-banner-text { min-width: 0; } .faq-cta-banner-text h3 { font-family: var(--faq-font-heading); font-size: 20px; font-weight: 700; color: var(--faq-purple-deep); margin: 0 0 4px; letter-spacing: -0.01em; } .faq-cta-banner-text p { font-size: 14px; color: var(--faq-text-muted); margin: 0; } .faq-cta-banner-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .faq-cta-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--faq-pink); color: var(--faq-white); border-radius: 999px; font-family: var(--faq-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.35); transition: all var(--faq-transition); white-space: nowrap; } /* BUG FIX: removed merged double rgba value from box-shadow */ .faq-cta-btn-primary:hover { background: var(--faq-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .faq-cta-btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: transparent; color: #E91E7A; border-radius: 999px; font-family: var(--faq-font-body); font-size: 14px; font-weight: 500; text-decoration: none; border: 2px solid #E91E7A; transition: all var(--faq-transition); white-space: nowrap; } .faq-cta-btn-secondary:hover { background: #E91E7A; color: #ffffff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(219, 27, 96, 0.30); border-color: #E91E7A; } /* FAQ Scroll Reveal */ .faq-reveal { opacity: 0; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .faq-reveal-up { transform: translateY(40px); } .faq-reveal-left { transform: translateX(-40px); } .faq-reveal-right { transform: translateX(40px); } .faq-reveal-zoom { transform: scale(0.95); } .faq-reveal.faq-reveal-active { opacity: 1; transform: translate(0, 0) scale(1); } /* FAQ Responsive */ @media (max-width: 1024px) { .faq-hero { padding: 72px 24px 32px; } .faq-main { padding: 8px 24px 96px; } } @media (max-width: 820px) { .faq-cta-banner { flex-wrap: wrap; padding: 28px; } .faq-cta-banner-left { flex: 1 1 100%; } .faq-cta-banner-actions { width: 100%; justify-content: flex-start; } } @media (max-width: 640px) { .faq-hero { padding: 60px 18px 28px; } .faq-hero-title { font-size: 32px; } .faq-main { padding: 8px 18px 80px; } .faq-tabs { gap: 8px; margin-bottom: 24px; } .faq-tab { font-size: 13px; padding: 10px 20px; } .faq-card-question { padding: 18px 20px; gap: 14px; } .faq-card-icon { width: 40px; height: 40px; } .faq-card-question h3 { font-size: 15px; } .faq-card-toggle { width: 28px; height: 28px; font-size: 20px; } .faq-card.open .faq-card-answer-inner { margin: 0 20px; padding: 4px 0 22px; } .faq-card-answer-inner p, .faq-card-answer-inner ul li { font-size: 13.5px; } .faq-cta-banner { padding: 26px 24px; text-align: left; } .faq-cta-banner-actions { flex-direction: column; align-items: stretch; gap: 12px; } .faq-cta-btn-primary, .faq-cta-btn-secondary { justify-content: center; width: 100%; } } @media (max-width: 380px) { .faq-hero-title { font-size: 28px; } .faq-card-question { grid-template-columns: 1fr auto; gap: 12px; } .faq-card-icon { display: none; } } @media (prefers-reduced-motion: reduce) { .faq-hero *, .faq-main *, .faq-hero *::before, .faq-main *::before { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .faq-reveal, .faq-reveal-up, .faq-reveal-left, .faq-reveal-right, .faq-reveal-zoom { opacity: 1 !important; transform: none !important; } } /* ============================================= CONTACT PAGE All classes prefixed .contact- Note: .faq-reveal classes are reused here — already declared above, no need to repeat. ============================================= */ .contact-hero, .contact-main { --contact-purple-deep: #481D6D; --contact-purple: #6E2CA1; --contact-pink: #DB1B60; --contact-pink-soft: #F472A8; --contact-lavender: #EBD0F3; --contact-lavender-soft: #F5E5F9; --contact-cream: #FFF5F8; --contact-white: #FFFFFF; --contact-text: #2A1A3A; --contact-text-muted: #6B5B7A; --contact-border: #EFE3F4; --contact-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --contact-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --contact-radius-lg: 24px; --contact-radius-md: 16px; --contact-radius-sm: 10px; --contact-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --contact-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --contact-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --contact-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--contact-font-body); color: var(--contact-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .contact-hero *, .contact-main *, .contact-hero *::before, .contact-main *::before { box-sizing: border-box; } /* Contact Hero */ .contact-hero { position: relative; padding: 96px 24px 40px; background: linear-gradient(180deg, var(--contact-cream) 0%, #FFFFFF 100%); text-align: center; overflow: hidden; } .contact-hero-container { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; } .contact-hero-tag { display: inline-block; padding: 7px 18px; background: var(--contact-lavender); color: var(--contact-purple-deep); font-family: var(--contact-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin-bottom: 22px; } .contact-hero-title { font-family: var(--contact-font-heading); font-size: clamp(32px, 4.8vw, 52px); font-weight: 700; line-height: 1.1; color: var(--contact-purple-deep); margin: 0 0 18px; letter-spacing: -0.02em; } .contact-hero-accent { background: linear-gradient(135deg, var(--contact-pink) 0%, var(--contact-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .contact-hero-subtitle { font-size: 17px; line-height: 1.65; color: var(--contact-text-muted); margin: 0; } /* Contact Main */ .contact-main { position: relative; padding: 10px 24px 120px; background: linear-gradient(180deg, #FFFFFF 0%, var(--contact-cream) 100%); overflow: hidden; } .contact-main-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: block; width: 100%; } /* Contact Grid */ .contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 32px; align-items: start; margin-bottom: 48px; width: 100%; } .contact-section-title { font-family: var(--contact-font-heading); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--contact-purple-deep); margin: 0 0 8px; letter-spacing: -0.01em; } .contact-section-subtitle { font-size: 14.5px; color: var(--contact-text-muted); line-height: 1.6; margin: 0 0 24px; } /* Contact Link Cards */ .contact-links-grid { display: flex; flex-direction: column; gap: 14px; } .contact-link-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 22px; background: var(--contact-white); border: 1px solid var(--contact-border); border-radius: var(--contact-radius-md); box-shadow: var(--contact-shadow-sm); text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--contact-transition), box-shadow var(--contact-transition), border-color var(--contact-transition); will-change: transform; } .contact-link-card::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--contact-purple-deep), var(--contact-pink)); transform: scaleY(0); transform-origin: top; transition: transform var(--contact-transition); } .contact-link-card:hover { transform: translateY(-3px); box-shadow: var(--contact-shadow-md); border-color: var(--contact-lavender); } .contact-link-card:hover::before { transform: scaleY(1); } .contact-link-icon { width: 44px; height: 44px; border-radius: var(--contact-radius-md); background: linear-gradient(135deg, var(--contact-lavender) 0%, var(--contact-lavender-soft) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--contact-purple-deep); transition: all var(--contact-transition); } .contact-link-card:hover .contact-link-icon { background: linear-gradient(135deg, var(--contact-purple-deep), var(--contact-purple)); color: var(--contact-white); transform: rotate(-6deg) scale(1.05); } .contact-link-text { min-width: 0; } .contact-link-text h3 { font-family: var(--contact-font-heading); font-size: 15px; font-weight: 600; color: var(--contact-purple-deep); margin: 0 0 3px; letter-spacing: -0.01em; } .contact-link-text p { font-size: 13px; color: var(--contact-text-muted); margin: 0; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .contact-link-arrow { font-size: 18px; color: var(--contact-purple); flex-shrink: 0; transition: transform var(--contact-transition); } .contact-link-card:hover .contact-link-arrow { transform: translateX(4px); color: var(--contact-pink); } /* Contact Form */ .contact-form-wrap { width: 100%; min-width: 0; } .contact-form-card { position: relative; background: var(--contact-white); border: 1px solid var(--contact-border); border-radius: var(--contact-radius-lg); padding: 36px 34px; box-shadow: var(--contact-shadow-md); overflow: hidden; } .contact-form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--contact-purple-deep), var(--contact-pink)); } .contact-form-title { font-family: var(--contact-font-heading); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--contact-purple-deep); margin: 0 0 8px; letter-spacing: -0.01em; } .contact-form-subtitle { font-size: 14.5px; color: var(--contact-text-muted); line-height: 1.6; margin: 0 0 26px; } .contact-form { display: flex; flex-direction: column; gap: 16px; } .contact-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .contact-form-group { display: flex; flex-direction: column; gap: 6px; } .contact-form-group label { font-family: var(--contact-font-body); font-size: 13px; font-weight: 500; color: var(--contact-purple-deep); letter-spacing: 0.2px; } .contact-form-group input, .contact-form-group select, .contact-form-group textarea { font-family: var(--contact-font-body); font-size: 14px; color: var(--contact-text); background: var(--contact-cream); border: 1.5px solid var(--contact-border); border-radius: var(--contact-radius-sm); padding: 12px 14px; outline: none; transition: all var(--contact-transition); width: 100%; } .contact-form-group textarea { resize: vertical; min-height: 110px; font-family: var(--contact-font-body); } .contact-form-group input::placeholder, .contact-form-group textarea::placeholder { color: #B8A8C5; } .contact-form-group input:focus, .contact-form-group select:focus, .contact-form-group textarea:focus { border-color: var(--contact-purple); background: var(--contact-white); box-shadow: 0 0 0 3px rgba(110, 44, 161, 0.10); } .contact-form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236E2CA1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1 6 6 11 1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; } .contact-form-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; margin-top: 6px; background: linear-gradient(135deg, var(--contact-pink) 0%, var(--contact-purple) 100%); color: var(--contact-white); font-family: var(--contact-font-body); font-size: 14.5px; font-weight: 600; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--contact-transition); align-self: flex-start; } .contact-form-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .contact-form-btn svg { transition: transform var(--contact-transition); } .contact-form-btn:hover svg { transform: translateX(3px); } .contact-form-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .contact-form-btn:disabled:hover { transform: none; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); } /* Form status */ .form-status { font-family: var(--contact-font-body); font-size: 14px; padding: 0; margin: 0; border-radius: var(--contact-radius-sm); transition: all var(--contact-transition); opacity: 0; max-height: 0; overflow: hidden; } .form-status:not(:empty) { padding: 12px 14px; opacity: 1; max-height: 100px; margin-top: 4px; } .form-status-success { background: #E8F5E9; color: #1B5E20; border: 1px solid #81C784; } .form-status-error { background: #FFEBEE; color: #B71C1C; border: 1px solid #E57373; } /* Contact Map */ .contact-map-section { display: block; width: 100%; margin-bottom: 48px; clear: both; } .contact-map-card { display: grid; grid-template-columns: 1fr 1.4fr; background: var(--contact-white); border: 1px solid var(--contact-border); border-radius: var(--contact-radius-lg); box-shadow: var(--contact-shadow-md); overflow: hidden; min-height: 380px; width: 100%; } .contact-map-info { padding: 38px 36px; display: flex; flex-direction: column; justify-content: center; position: relative; background: linear-gradient(135deg, var(--contact-cream) 0%, var(--contact-white) 100%); } .contact-map-info::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--contact-purple-deep), var(--contact-pink)); } .contact-map-tag { display: inline-block; padding: 6px 14px; background: var(--contact-lavender); color: var(--contact-purple-deep); font-family: var(--contact-font-heading); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin-bottom: 16px; align-self: flex-start; } .contact-map-info h3 { font-family: var(--contact-font-heading); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--contact-purple-deep); margin: 0 0 14px; letter-spacing: -0.01em; } .contact-map-address { font-size: 15px; color: var(--contact-text); line-height: 1.6; margin: 0 0 22px; } .contact-map-meta { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; padding-top: 18px; border-top: 1px dashed var(--contact-border); } .contact-map-meta-item { display: flex; flex-direction: column; gap: 2px; } .contact-map-meta-item strong { font-family: var(--contact-font-heading); font-size: 12px; font-weight: 600; color: var(--contact-purple-deep); letter-spacing: 1px; text-transform: uppercase; } .contact-map-meta-item span { font-size: 13.5px; color: var(--contact-text-muted); } .contact-map-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--contact-pink); color: var(--contact-white); border-radius: 999px; font-family: var(--contact-font-body); font-size: 13.5px; font-weight: 600; text-decoration: none; box-shadow: 0 8px 20px rgba(219, 27, 96, 0.30); transition: all var(--contact-transition); align-self: flex-start; } .contact-map-btn:hover { background: var(--contact-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(72, 29, 109, 0.30); } .contact-map-btn svg { transition: transform var(--contact-transition); } .contact-map-btn:hover svg { transform: translateX(3px); } .contact-map-embed { position: relative; min-height: 380px; background: var(--contact-lavender-soft); } .contact-map-embed iframe { display: block; width: 100%; height: 100%; border: 0; } /* Contact Review */ .contact-review-section { display: block; width: 100%; margin-bottom: 48px; clear: both; } .contact-review-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; position: relative; background: linear-gradient(135deg, var(--contact-lavender-soft) 0%, var(--contact-cream) 100%); border: 1px solid var(--contact-border); border-radius: var(--contact-radius-lg); padding: 48px 52px; box-shadow: var(--contact-shadow-md); overflow: hidden; } .contact-review-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--contact-purple-deep), var(--contact-pink)); } .contact-review-card::after { content: ""; position: absolute; bottom: -60px; right: 280px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, var(--contact-lavender) 0%, transparent 70%); pointer-events: none; opacity: 0.55; } .contact-review-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; z-index: 1; } .contact-review-tag { display: inline-block; padding: 6px 14px; background: var(--contact-lavender); color: var(--contact-purple-deep); font-family: var(--contact-font-heading); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; align-self: flex-start; } .contact-review-title { font-family: var(--contact-font-heading); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; color: var(--contact-purple-deep); margin: 0; line-height: 1.2; letter-spacing: -0.02em; } .contact-review-desc { font-size: 14.5px; color: var(--contact-text-muted); line-height: 1.65; margin: 0; max-width: 480px; } .contact-review-stars { display: flex; align-items: center; gap: 3px; } .contact-review-rating-text { font-family: var(--contact-font-heading); font-size: 13px; font-weight: 600; color: var(--contact-purple-deep); margin-left: 8px; } .contact-review-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: #ffffff; color: #3c4043; border-radius: 999px; font-family: var(--contact-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 1.5px solid #dadce0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); transition: all var(--contact-transition); align-self: flex-start; } .contact-review-btn:hover { background: #f8f9fa; border-color: #bdc1c6; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); transform: translateY(-2px); } .contact-review-right { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; position: relative; z-index: 1; } .contact-review-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; } .contact-review-qr-frame { width: 200px; height: 200px; background: var(--contact-white); border: 1.5px solid var(--contact-border); border-radius: 18px; display: flex; align-items: center; justify-content: center; padding: 10px; box-shadow: var(--contact-shadow-sm); transition: box-shadow var(--contact-transition), transform var(--contact-transition); } .contact-review-qr-frame:hover { transform: translateY(-3px); box-shadow: var(--contact-shadow-md); } .contact-review-qr-img { width: 180px; height: 180px; object-fit: contain; display: block; border-radius: 8px; } .contact-review-qr-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--contact-text-muted); font-family: var(--contact-font-heading); font-weight: 500; margin: 0; letter-spacing: 0.2px; } .contact-review-qr-label svg { stroke: var(--contact-purple-deep); flex-shrink: 0; } /* Contact CTA Banner */ .contact-cta-banner { position: relative; display: flex; width: 100%; background: var(--contact-white); border-radius: var(--contact-radius-lg); padding: 32px 40px; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: nowrap; overflow: hidden; box-shadow: 0 18px 50px rgba(72, 29, 109, 0.18); border: 1px solid var(--contact-border); clear: both; } .contact-cta-banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--contact-pink), var(--contact-pink-soft), var(--contact-pink)); } .contact-cta-banner-left { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; } .contact-cta-banner-icon { width: 52px; height: 52px; border-radius: var(--contact-radius-md); background: linear-gradient(135deg, var(--contact-lavender) 0%, var(--contact-lavender-soft) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--contact-purple-deep); } .contact-cta-banner-text { min-width: 0; } .contact-cta-banner-text h3 { font-family: var(--contact-font-heading); font-size: 20px; font-weight: 700; color: var(--contact-purple-deep); margin: 0 0 4px; letter-spacing: -0.01em; } .contact-cta-banner-text p { font-size: 14px; color: var(--contact-text-muted); margin: 0; } .contact-cta-banner-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .contact-cta-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--contact-pink); color: var(--contact-white); border-radius: 999px; font-family: var(--contact-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.35); transition: all var(--contact-transition); white-space: nowrap; } .contact-cta-btn-primary:hover { background: var(--contact-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .contact-cta-btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; background: #fff; color: #D91B72; border-radius: 999px; font-family: var(--contact-font-body); font-size: 14px; font-weight: 500; text-decoration: none; border: 2px solid #D91B72; transition: all var(--contact-transition); white-space: nowrap; } .contact-cta-btn-secondary:hover { background: var(--contact-pink); color: var(--contact-white); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(219, 27, 96, 0.30); } /* Contact Responsive */ @media (max-width: 1024px) { .contact-hero { padding: 72px 24px 32px; } .contact-main { padding: 8px 24px 96px; } .contact-grid { grid-template-columns: 1fr; gap: 28px; } .contact-map-card { grid-template-columns: 1fr; } .contact-map-embed { min-height: 320px; order: 2; } .contact-review-card { grid-template-columns: 1fr; gap: 32px; padding: 36px 32px; text-align: center; } .contact-review-tag, .contact-review-btn { align-self: center; } .contact-review-stars { justify-content: center; } .contact-review-desc { max-width: 100%; } } @media (max-width: 820px) { .contact-cta-banner { flex-wrap: wrap; padding: 28px; } .contact-cta-banner-left { flex: 1 1 100%; } .contact-cta-banner-actions { width: 100%; justify-content: flex-start; } } @media (max-width: 640px) { .contact-hero { padding: 60px 18px 28px; } .contact-hero-title { font-size: 32px; } .contact-main { padding: 8px 18px 80px; } .contact-form-card { padding: 28px 22px; } .contact-form-row { grid-template-columns: 1fr; gap: 14px; } .contact-link-card { padding: 16px 18px; gap: 14px; } .contact-link-icon { width: 40px; height: 40px; } .contact-map-info { padding: 30px 24px; } .contact-map-embed { min-height: 280px; } .contact-cta-banner { padding: 26px 24px; } .contact-cta-banner-actions { flex-direction: column; align-items: stretch; gap: 12px; } .contact-cta-btn-primary, .contact-cta-btn-secondary { justify-content: center; width: 100%; } .contact-form-btn { width: 100%; align-self: stretch; } .contact-review-card { padding: 28px 22px; gap: 26px; } .contact-review-qr-frame { width: 170px; height: 170px; } .contact-review-qr-img { width: 150px; height: 150px; } .contact-review-btn { width: 100%; justify-content: center; align-self: stretch; } } @media (max-width: 380px) { .contact-hero-title { font-size: 28px; } .contact-link-card { grid-template-columns: auto 1fr; } .contact-link-arrow { display: none; } .contact-review-qr-frame { width: 150px; height: 150px; } .contact-review-qr-img { width: 130px; height: 130px; } } @media (prefers-reduced-motion: reduce) { .contact-hero *, .contact-main *, .contact-hero *::before, .contact-main *::before { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .faq-reveal, .faq-reveal-up, .faq-reveal-left, .faq-reveal-right, .faq-reveal-zoom { opacity: 1 !important; transform: none !important; } } /* ============================================= BOOK AN APPOINTMENT PAGE All classes prefixed .book- ============================================= */ .book-hero, .book-main { --book-purple-deep: #481D6D; --book-purple: #6E2CA1; --book-pink: #DB1B60; --book-pink-soft: #F472A8; --book-lavender: #EBD0F3; --book-lavender-soft: #F5E5F9; --book-cream: #FFF5F8; --book-white: #FFFFFF; --book-text: #2A1A3A; --book-text-muted: #6B5B7A; --book-border: #EFE3F4; --book-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --book-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --book-radius-lg: 24px; --book-radius-md: 16px; --book-radius-sm: 10px; --book-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --book-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --book-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --book-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--book-font-body); color: var(--book-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .book-hero *, .book-main *, .book-hero *::before, .book-main *::before { box-sizing: border-box; } /* Book Hero */ .book-hero { position: relative; padding: 96px 24px 40px; background: linear-gradient(180deg, var(--book-cream) 0%, #FFFFFF 100%); text-align: center; overflow: hidden; } .book-hero-container { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; } .book-hero-tag { display: inline-block; padding: 7px 18px; background: var(--book-lavender); color: var(--book-purple-deep); font-family: var(--book-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin-bottom: 22px; } .book-hero-title { font-family: var(--book-font-heading); font-size: clamp(32px, 4.8vw, 52px); font-weight: 700; line-height: 1.1; color: var(--book-purple-deep); margin: 0 0 18px; letter-spacing: -0.02em; } .book-hero-accent { background: linear-gradient(135deg, var(--book-pink) 0%, var(--book-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .book-hero-subtitle { font-size: 17px; line-height: 1.65; color: var(--book-text-muted); margin: 0; } /* Book Main */ .book-main { position: relative; padding: 10px 24px 120px; background: linear-gradient(180deg, #FFFFFF 0%, var(--book-cream) 100%); overflow: hidden; } .book-main-container { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } /* Form Card */ .book-form-wrap { width: 100%; } .book-form-card { position: relative; background: var(--book-white); border: 1px solid var(--book-border); border-radius: var(--book-radius-lg); padding: 44px 42px; box-shadow: var(--book-shadow-md); overflow: hidden; } .book-form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--book-purple-deep), var(--book-pink)); } /* Form Titles */ .book-form-title { font-family: var(--book-font-heading); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; color: var(--book-purple-deep); margin: 0 0 8px; letter-spacing: -0.01em; } .book-form-subtitle { font-size: 14.5px; color: var(--book-text-muted); line-height: 1.6; margin: 0 0 32px; } /* Form Layout */ .book-form { display: flex; flex-direction: column; gap: 20px; } .book-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .book-form-group { display: flex; flex-direction: column; gap: 8px; } .book-form-full { grid-column: 1 / -1; width: 100%; } /* Labels */ .book-form-group label, .book-group-label { font-family: var(--book-font-body); font-size: 13.5px; font-weight: 500; color: var(--book-purple-deep); letter-spacing: 0.2px; } .book-required { color: var(--book-pink); margin-left: 2px; } .book-optional { font-weight: 400; font-size: 12px; color: var(--book-text-muted); margin-left: 4px; } /* Inputs */ .book-form-group input[type="text"], .book-form-group input[type="email"], .book-form-group input[type="tel"], .book-form-group input[type="date"], .book-form-group textarea { font-family: var(--book-font-body); font-size: 14px; color: var(--book-text); background: var(--book-cream); border: 1.5px solid var(--book-border); border-radius: var(--book-radius-sm); padding: 13px 16px; outline: none; transition: all var(--book-transition); width: 100%; } .book-form-group textarea { resize: vertical; min-height: 120px; font-family: var(--book-font-body); line-height: 1.55; } .book-form-group input::placeholder, .book-form-group textarea::placeholder { color: #B8A8C5; } .book-form-group input:focus, .book-form-group textarea:focus { border-color: var(--book-purple); background: var(--book-white); box-shadow: 0 0 0 3px rgba(110, 44, 161, 0.10); } .book-form-group input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(20%) sepia(60%) saturate(2000%) hue-rotate(265deg) brightness(50%); cursor: pointer; opacity: 0.75; transition: opacity var(--book-transition); } .book-form-group input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; } /* Custom Checkboxes */ .book-checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 4px; } .book-checkbox-grid-3 { grid-template-columns: repeat(3, 1fr); } .book-checkbox { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 10px 14px; border-radius: var(--book-radius-sm); border: 1.5px solid var(--book-border); background: var(--book-cream); transition: all var(--book-transition); user-select: none; } .book-checkbox:hover { border-color: var(--book-lavender); background: var(--book-lavender-soft); } .book-checkbox input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .book-checkbox-box { position: relative; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--book-border); background: var(--book-white); flex-shrink: 0; transition: all var(--book-transition); } .book-checkbox-box::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 11px; border: solid var(--book-white); border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg) scale(0); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); } .book-checkbox input[type="checkbox"]:checked ~ .book-checkbox-box { background: linear-gradient(135deg, var(--book-pink) 0%, var(--book-purple) 100%); border-color: transparent; box-shadow: 0 4px 10px rgba(219, 27, 96, 0.25); } .book-checkbox input[type="checkbox"]:checked ~ .book-checkbox-box::after { transform: translate(-50%, -60%) rotate(45deg) scale(1); } .book-checkbox input[type="checkbox"]:checked ~ .book-checkbox-text { color: var(--book-purple-deep); font-weight: 500; } .book-checkbox:has(input[type="checkbox"]:checked) { border-color: var(--book-purple); background: var(--book-lavender-soft); } .book-checkbox input[type="checkbox"]:focus-visible ~ .book-checkbox-box { box-shadow: 0 0 0 3px rgba(110, 44, 161, 0.20); } .book-checkbox-text { font-family: var(--book-font-body); font-size: 13.5px; color: var(--book-text); line-height: 1.4; transition: all var(--book-transition); } /* Submit Button */ .book-form-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 32px; margin-top: 10px; background: linear-gradient(135deg, var(--book-pink) 0%, var(--book-purple) 100%); color: var(--book-white); font-family: var(--book-font-body); font-size: 15px; font-weight: 600; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--book-transition); align-self: flex-start; } .book-form-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .book-form-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .book-form-btn svg { transition: transform var(--book-transition); } .book-form-btn:hover svg { transform: translateX(3px); } /* Form Status */ .book-form-status { margin-top: 4px; font-size: 14px; font-weight: 500; line-height: 1.5; border-radius: var(--book-radius-sm); opacity: 0; max-height: 0; overflow: hidden; transition: all var(--book-transition); } .book-form-status.success { background: rgba(110, 44, 161, 0.08); color: var(--book-purple-deep); border: 1px solid var(--book-lavender); padding: 12px 16px; opacity: 1; max-height: 200px; } .book-form-status.error { background: rgba(219, 27, 96, 0.08); color: var(--book-pink); border: 1px solid rgba(219, 27, 96, 0.20); padding: 12px 16px; opacity: 1; max-height: 200px; } /* Book Responsive */ @media (max-width: 1024px) { .book-hero { padding: 72px 24px 32px; } .book-main { padding: 8px 24px 96px; } .book-form-card { padding: 38px 32px; } .book-checkbox-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .book-hero { padding: 60px 18px 28px; } .book-hero-title { font-size: 32px; } .book-main { padding: 8px 18px 80px; } .book-form-card { padding: 28px 22px; } .book-form-row { grid-template-columns: 1fr; gap: 16px; } .book-checkbox-grid, .book-checkbox-grid-3 { grid-template-columns: 1fr; gap: 10px; } .book-form-btn { width: 100%; align-self: stretch; } } @media (max-width: 380px) { .book-hero-title { font-size: 28px; } .book-form-card { padding: 24px 18px; } } @media (prefers-reduced-motion: reduce) { .book-hero *, .book-main *, .book-hero *::before, .book-main *::before { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================= MARRIAGE GUIDANCE COURSE FORM All classes prefixed .mgc- ============================================= */ .mgc-section { --mgc-purple-deep: #481D6D; --mgc-purple: #6E2CA1; --mgc-pink: #DB1B60; --mgc-pink-soft: #F472A8; --mgc-lavender: #EBD0F3; --mgc-lavender-soft: #F5E5F9; --mgc-cream: #FFF5F8; --mgc-white: #FFFFFF; --mgc-text: #2A1A3A; --mgc-text-muted: #6B5B7A; --mgc-border: #EFE3F4; --mgc-placeholder: #B8A8C5; --mgc-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --mgc-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --mgc-radius-lg: 24px; --mgc-radius-md: 16px; --mgc-radius-sm: 10px; --mgc-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --mgc-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --mgc-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --mgc-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--mgc-font-body); color: var(--mgc-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: linear-gradient(180deg, var(--mgc-lavender-soft) 0%, var(--mgc-cream) 60%, var(--mgc-white) 100%); padding: 60px 20px 80px; min-height: 100vh; } .mgc-section *, .mgc-section *::before, .mgc-section *::after { box-sizing: border-box; } .mgc-container { max-width: 880px; margin: 0 auto; } /* Header Banner */ .mgc-banner { text-align: center; margin-bottom: 40px; padding: 20px; } .mgc-title { font-family: var(--mgc-font-heading); font-size: clamp(28px, 5vw, 44px); font-weight: 800; font-style: italic; color: var(--mgc-purple-deep); margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.1; } .mgc-subtitle { font-size: clamp(14px, 1.6vw, 16px); color: var(--mgc-text-muted); line-height: 1.6; margin: 0 auto; max-width: 560px; } /* Form Card */ .mgc-form-card { position: relative; background: var(--mgc-white); border: 1px solid var(--mgc-border); border-radius: var(--mgc-radius-lg); padding: 48px 44px; box-shadow: var(--mgc-shadow-md); overflow: hidden; } .mgc-form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--mgc-purple-deep), var(--mgc-pink)); } .mgc-form { display: flex; flex-direction: column; gap: 36px; } /* Fieldset */ .mgc-fieldset { display: flex; flex-direction: column; gap: 20px; padding-bottom: 28px; border-bottom: 1px solid var(--mgc-border); } .mgc-fieldset:last-of-type { border-bottom: none; padding-bottom: 0; } .mgc-fieldset-title { font-family: var(--mgc-font-heading); font-size: 17px; font-weight: 700; color: var(--mgc-purple-deep); margin: 0 0 4px; letter-spacing: 0.3px; text-transform: uppercase; position: relative; padding-left: 14px; } .mgc-fieldset-title::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 18px; background: linear-gradient(180deg, var(--mgc-purple), var(--mgc-pink)); border-radius: 2px; } /* Form Groups */ .mgc-group { display: flex; flex-direction: column; gap: 8px; } .mgc-group label { font-family: var(--mgc-font-body); font-size: 14px; font-weight: 500; color: var(--mgc-purple); letter-spacing: 0.2px; } .mgc-req { color: var(--mgc-pink); font-weight: 600; } /* Inputs */ .mgc-group input[type="text"], .mgc-group input[type="email"], .mgc-group input[type="tel"], .mgc-group input[type="date"], .mgc-group input[type="number"], .mgc-group textarea { font-family: var(--mgc-font-body); font-size: 14.5px; color: var(--mgc-text); background: var(--mgc-cream); border: 1.5px solid var(--mgc-border); border-radius: 999px; padding: 14px 20px; outline: none; transition: all var(--mgc-transition); width: 100%; } .mgc-group textarea { border-radius: var(--mgc-radius-md); resize: vertical; min-height: 110px; font-family: var(--mgc-font-body); } .mgc-group input::placeholder, .mgc-group textarea::placeholder { color: var(--mgc-placeholder); } .mgc-group input:focus, .mgc-group textarea:focus { border-color: var(--mgc-purple); background: var(--mgc-white); box-shadow: 0 0 0 3px rgba(110, 44, 161, 0.10); } .mgc-group input[type="date"] { color: var(--mgc-text); cursor: pointer; } /* Radio + Checkbox */ .mgc-options { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 2px; } .mgc-options-vertical { flex-direction: column; gap: 10px; } .mgc-radio, .mgc-check { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mgc-font-body); font-size: 14.5px; color: var(--mgc-text); cursor: pointer; user-select: none; font-weight: 400; } .mgc-radio input[type="radio"], .mgc-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--mgc-purple); background: var(--mgc-white); cursor: pointer; margin: 0; flex-shrink: 0; transition: all var(--mgc-transition); position: relative; } .mgc-radio input[type="radio"] { border-radius: 50%; } .mgc-check input[type="checkbox"] { border-radius: 4px; } .mgc-radio input[type="radio"]:checked { border-color: var(--mgc-purple); background: var(--mgc-white); } .mgc-radio input[type="radio"]:checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--mgc-purple), var(--mgc-pink)); } .mgc-check input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--mgc-purple), var(--mgc-pink)); border-color: var(--mgc-purple); } .mgc-check input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 9px; border: solid white; border-width: 0 2px 2px 0; transform: translate(-50%, -60%) rotate(45deg); } .mgc-radio:hover input[type="radio"], .mgc-check:hover input[type="checkbox"] { border-color: var(--mgc-pink); box-shadow: 0 0 0 3px rgba(219, 27, 96, 0.08); } /* Declaration */ .mgc-declaration { background: var(--mgc-lavender-soft); border-radius: var(--mgc-radius-md); padding: 24px 26px; border: 1px solid var(--mgc-lavender); } .mgc-declaration .mgc-fieldset-title { margin-bottom: 8px; } .mgc-declaration-check { font-size: 14.5px; color: var(--mgc-text); font-weight: 500; line-height: 1.5; } /* Status Message */ .mgc-form-status { font-family: var(--mgc-font-body); font-size: 14px; padding: 0; margin: 0; border-radius: var(--mgc-radius-sm); transition: all var(--mgc-transition); opacity: 0; max-height: 0; overflow: hidden; } .mgc-form-status:not(:empty) { padding: 14px 18px; opacity: 1; max-height: 120px; } .mgc-form-status-success { background: #E8F5E9; color: #1B5E20; border: 1px solid #81C784; } .mgc-form-status-error { background: #FFEBEE; color: #B71C1C; border: 1px solid #E57373; } /* Submit Button */ .mgc-submit-wrap { display: flex; justify-content: center; margin-top: 12px; } .mgc-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 56px; background: linear-gradient(135deg, var(--mgc-pink) 0%, var(--mgc-purple) 100%); color: var(--mgc-white); font-family: var(--mgc-font-body); font-size: 15px; font-weight: 600; letter-spacing: 1.2px; border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--mgc-transition); } .mgc-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .mgc-submit-btn svg { transition: transform var(--mgc-transition); } .mgc-submit-btn:hover svg { transform: translateX(3px); } .mgc-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .mgc-submit-btn:disabled:hover { transform: none; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); } /* MGC Responsive */ @media (max-width: 768px) { .mgc-section { padding: 40px 16px 60px; } .mgc-banner { margin-bottom: 28px; padding: 12px 0; } .mgc-form-card { padding: 32px 24px; border-radius: var(--mgc-radius-md); } .mgc-form { gap: 28px; } .mgc-fieldset { gap: 18px; padding-bottom: 22px; } .mgc-fieldset-title { font-size: 15px; } .mgc-group input[type="text"], .mgc-group input[type="email"], .mgc-group input[type="tel"], .mgc-group input[type="date"], .mgc-group textarea { padding: 13px 18px; font-size: 14px; } .mgc-submit-btn { padding: 14px 44px; font-size: 14px; } } @media (max-width: 480px) { .mgc-section { padding: 30px 12px 50px; } .mgc-form-card { padding: 24px 18px; } .mgc-options { gap: 8px 16px; } .mgc-radio, .mgc-check { font-size: 14px; } .mgc-declaration { padding: 18px 20px; } .mgc-submit-btn { padding: 14px 36px; width: 100%; } } /* ============================================= COUNSELLOR PAGE (FOUNDER PROFILE) All classes prefixed .counsellor- ============================================= */ .counsellor-hero, .counsellor-stats, .counsellor-about, .counsellor-videos, .counsellor-cta { --counsellor-purple-deep: #481D6D; --counsellor-purple: #6E2CA1; --counsellor-pink: #DB1B60; --counsellor-pink-soft: #F472A8; --counsellor-lavender: #EBD0F3; --counsellor-lavender-soft: #F5E5F9; --counsellor-cream: #FFF5F8; --counsellor-white: #FFFFFF; --counsellor-text: #2A1A3A; --counsellor-text-muted: #6B5B7A; --counsellor-border: #EFE3F4; --counsellor-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --counsellor-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --counsellor-radius-lg: 24px; --counsellor-radius-md: 16px; --counsellor-radius-sm: 10px; --counsellor-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --counsellor-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --counsellor-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --counsellor-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--counsellor-font-body); color: var(--counsellor-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .counsellor-hero *, .counsellor-stats *, .counsellor-about *, .counsellor-videos *, .counsellor-cta *, .counsellor-hero *::before, .counsellor-stats *::before, .counsellor-about *::before, .counsellor-videos *::before, .counsellor-cta *::before { box-sizing: border-box; } .counsellor-hero-accent { background: linear-gradient(135deg, var(--counsellor-pink) 0%, var(--counsellor-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } /* Counsellor Hero */ .counsellor-hero { position: relative; padding: 80px 24px 70px; background: linear-gradient(180deg, var(--counsellor-cream) 0%, #FFFFFF 60%, var(--counsellor-cream) 100%); overflow: hidden; } .counsellor-hero::before { content: ""; position: absolute; top: -100px; right: -100px; width: 360px; height: 360px; background: radial-gradient(circle, var(--counsellor-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .counsellor-hero::after { content: ""; position: absolute; bottom: -120px; left: -120px; width: 320px; height: 320px; background: radial-gradient(circle, var(--counsellor-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .counsellor-hero-container { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; } /* Hero image */ .counsellor-hero-image-wrap { position: relative; padding-bottom: 30px; padding-left: 20px; } .counsellor-hero-image { position: relative; width: 100%; aspect-ratio: 1 / 1.05; overflow: hidden; background: var(--counsellor-lavender-soft); border-radius: 48% 52% 40% 60% / 55% 45% 55% 45%; box-shadow: var(--counsellor-shadow-lg); } .counsellor-hero-image::before { content: ""; position: absolute; inset: -12px; background: linear-gradient(135deg, var(--counsellor-lavender) 0%, var(--counsellor-pink-soft) 100%); border-radius: 48% 52% 40% 60% / 55% 45% 55% 45%; z-index: -1; opacity: 0.25; } .counsellor-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .counsellor-hero-image-wrap::before { content: ""; position: absolute; top: -10px; left: 0; width: 80px; height: 80px; background-image: radial-gradient(var(--counsellor-pink-soft) 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: 0.6; z-index: 1; } /* Experience badge */ .counsellor-exp-badge { position: absolute; bottom: 0; left: 0; background: var(--counsellor-white); border-radius: var(--counsellor-radius-md); padding: 18px 22px; display: flex; align-items: center; gap: 14px; box-shadow: var(--counsellor-shadow-lg); border: 1px solid var(--counsellor-border); z-index: 3; min-width: 200px; transition: transform var(--counsellor-transition), box-shadow var(--counsellor-transition); } .counsellor-exp-badge:hover { transform: translateY(-4px); box-shadow: 0 28px 64px rgba(72, 29, 109, 0.20); } .counsellor-exp-badge-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #FDE0EC 0%, var(--counsellor-lavender-soft) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--counsellor-pink); } .counsellor-exp-badge-text h3 { font-family: var(--counsellor-font-heading); font-size: 26px; font-weight: 700; color: var(--counsellor-purple-deep); margin: 0; line-height: 1; } .counsellor-exp-badge-text h3 span { color: var(--counsellor-pink); } .counsellor-exp-badge-text p { font-family: var(--counsellor-font-heading); font-size: 11px; font-weight: 600; color: var(--counsellor-purple-deep); margin: 4px 0 1px; line-height: 1.2; } .counsellor-exp-badge-text small { font-size: 10px; color: var(--counsellor-text-muted); line-height: 1.3; display: block; } /* Hero content */ .counsellor-hero-content { position: relative; z-index: 2; } .counsellor-hero-tag { display: inline-block; font-family: var(--counsellor-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--counsellor-pink); margin-bottom: 14px; position: relative; padding-bottom: 8px; } .counsellor-hero-tag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--counsellor-pink); border-radius: 999px; } .counsellor-hero-title { font-family: var(--counsellor-font-heading); font-size: clamp(40px, 6vw, 64px); font-weight: 700; line-height: 1.05; color: var(--counsellor-purple-deep); margin: 0 0 18px; letter-spacing: -0.02em; } .counsellor-hero-subtitle { font-family: var(--counsellor-font-heading); font-size: clamp(18px, 2.2vw, 22px); font-weight: 600; line-height: 1.35; color: var(--counsellor-purple-deep); margin: 0 0 18px; } .counsellor-hero-desc { font-size: 15px; line-height: 1.7; color: var(--counsellor-text-muted); margin: 0 0 32px; max-width: 460px; } /* Highlights */ .counsellor-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; } .counsellor-highlight { display: flex; align-items: center; gap: 14px; transition: transform var(--counsellor-transition); } .counsellor-highlight:hover { transform: translateX(4px); } .counsellor-highlight-icon { width: 44px; height: 44px; border-radius: var(--counsellor-radius-sm); background: linear-gradient(135deg, #FDE0EC 0%, var(--counsellor-lavender-soft) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--counsellor-pink); transition: all var(--counsellor-transition); } .counsellor-highlight:hover .counsellor-highlight-icon { background: linear-gradient(135deg, var(--counsellor-pink) 0%, var(--counsellor-purple) 100%); color: var(--counsellor-white); transform: rotate(-6deg) scale(1.05); } .counsellor-highlight:hover .counsellor-highlight-icon svg { stroke: var(--counsellor-white); } .counsellor-highlight-text h4 { font-family: var(--counsellor-font-heading); font-size: 14px; font-weight: 600; color: var(--counsellor-purple-deep); margin: 0 0 2px; line-height: 1.3; } .counsellor-highlight-text p { font-size: 13px; color: var(--counsellor-text-muted); margin: 0; line-height: 1.4; } /* Stats Strip */ .counsellor-stats { padding: 0 24px 30px; background: linear-gradient(180deg, var(--counsellor-cream) 0%, #FFFFFF 100%); } .counsellor-stats-container { max-width: 1240px; margin: 0 auto; background: var(--counsellor-white); border: 1px solid var(--counsellor-border); border-radius: var(--counsellor-radius-lg); padding: 30px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--counsellor-shadow-md); } .counsellor-stat-item { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; } .counsellor-stat-icon { width: 52px; height: 52px; border-radius: var(--counsellor-radius-sm); background: linear-gradient(135deg, #FDE0EC 0%, var(--counsellor-lavender-soft) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--counsellor-pink); transition: all var(--counsellor-transition); } .counsellor-stat-item:hover .counsellor-stat-icon { background: linear-gradient(135deg, var(--counsellor-pink) 0%, var(--counsellor-purple) 100%); color: var(--counsellor-white); transform: rotate(-6deg) scale(1.05); } .counsellor-stat-text h4 { font-family: var(--counsellor-font-heading); font-size: 22px; font-weight: 700; color: var(--counsellor-purple-deep); margin: 0 0 4px; line-height: 1; letter-spacing: -0.01em; } .counsellor-stat-text h4 span { color: var(--counsellor-pink); } .counsellor-stat-text p { font-size: 13px; color: var(--counsellor-text-muted); margin: 0; } .counsellor-stat-divider { width: 1px; height: 50px; background: var(--counsellor-border); flex-shrink: 0; } /* About + Quals Cards */ .counsellor-about { padding: 60px 24px; background: linear-gradient(180deg, #FFFFFF 0%, var(--counsellor-cream) 100%); } .counsellor-about-container { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .counsellor-about-card, .counsellor-quals-card { position: relative; background: var(--counsellor-white); border: 1px solid var(--counsellor-border); border-radius: var(--counsellor-radius-lg); padding: 38px 36px; box-shadow: var(--counsellor-shadow-sm); overflow: hidden; transition: transform var(--counsellor-transition), box-shadow var(--counsellor-transition), border-color var(--counsellor-transition); } .counsellor-about-card::before, .counsellor-quals-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--counsellor-purple-deep), var(--counsellor-pink)); transform: scaleX(0); transform-origin: left; transition: transform var(--counsellor-transition); } .counsellor-about-card:hover, .counsellor-quals-card:hover { transform: translateY(-6px); box-shadow: var(--counsellor-shadow-lg); border-color: var(--counsellor-lavender); } .counsellor-about-card:hover::before, .counsellor-quals-card:hover::before { transform: scaleX(1); } .counsellor-about-tag, .counsellor-quals-tag { display: inline-block; font-family: var(--counsellor-font-heading); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--counsellor-pink); margin-bottom: 18px; } .counsellor-quals-tag { font-weight: 700; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px dashed var(--counsellor-border); width: 100%; } .counsellor-about-title { font-family: var(--counsellor-font-heading); font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; line-height: 1.2; color: var(--counsellor-purple-deep); margin: 0 0 14px; letter-spacing: -0.01em; max-width: 360px; } .counsellor-about-underline { width: 50px; height: 3px; background: linear-gradient(90deg, var(--counsellor-pink), var(--counsellor-purple)); border-radius: 999px; margin: 0 0 20px; } .counsellor-about-desc { font-size: 14px; line-height: 1.7; color: var(--counsellor-text-muted); margin: 0 0 28px; max-width: 380px; } .counsellor-about-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--counsellor-pink); color: var(--counsellor-white); border-radius: 999px; font-family: var(--counsellor-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--counsellor-transition); } .counsellor-about-btn:hover { background: var(--counsellor-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .counsellor-about-btn svg { transition: transform var(--counsellor-transition); } .counsellor-about-btn:hover svg { transform: translateX(4px); } .counsellor-about-illustration { position: absolute; top: 30px; right: 24px; width: 200px; height: 180px; opacity: 0.9; pointer-events: none; z-index: 1; } .counsellor-about-illustration img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Quals list */ .counsellor-quals-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .counsellor-quals-list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px dashed var(--counsellor-border); } .counsellor-quals-list li:last-child { border-bottom: none; padding-bottom: 0; } .counsellor-quals-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: transparent; border: 1.5px solid var(--counsellor-pink); color: var(--counsellor-pink); flex-shrink: 0; transition: all var(--counsellor-transition); } .counsellor-quals-list li:hover .counsellor-quals-check { background: linear-gradient(135deg, var(--counsellor-pink), var(--counsellor-purple)); border-color: transparent; color: var(--counsellor-white); transform: scale(1.08); } .counsellor-quals-list li:hover .counsellor-quals-check svg { stroke: var(--counsellor-white); } .counsellor-quals-list li p { font-size: 14px; color: var(--counsellor-text); margin: 0; line-height: 1.5; } /* Videos Section */ .counsellor-videos { padding: 30px 24px 60px; background: var(--counsellor-cream); } .counsellor-videos-container { max-width: 1240px; margin: 0 auto; } .counsellor-videos-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; } .counsellor-videos-title { font-family: var(--counsellor-font-heading); font-size: clamp(22px, 2.8vw, 28px); font-weight: 700; color: var(--counsellor-purple-deep); margin: 0; letter-spacing: -0.01em; } .counsellor-videos-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--counsellor-font-heading); font-size: 14px; font-weight: 600; color: var(--counsellor-pink); text-decoration: none; transition: all var(--counsellor-transition); white-space: nowrap; } .counsellor-videos-link:hover { color: var(--counsellor-purple-deep); } .counsellor-videos-link svg { transition: transform var(--counsellor-transition); } .counsellor-videos-link:hover svg { transform: translateX(4px); } .counsellor-videos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .counsellor-video-card { display: block; text-decoration: none; border-radius: var(--counsellor-radius-md); overflow: hidden; box-shadow: var(--counsellor-shadow-sm); transition: transform var(--counsellor-transition), box-shadow var(--counsellor-transition); } .counsellor-video-card:hover { transform: translateY(-6px); box-shadow: var(--counsellor-shadow-lg); } .counsellor-video-thumb { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--counsellor-lavender-soft); } .counsellor-video-thumb--dark { background: var(--counsellor-purple-deep); } .counsellor-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .counsellor-video-card:hover .counsellor-video-thumb img { transform: scale(1.06); } .counsellor-video-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(72, 29, 109, 0.05) 0%, rgba(72, 29, 109, 0.55) 100%); transition: opacity var(--counsellor-transition); } .counsellor-video-card:hover .counsellor-video-overlay { background: linear-gradient(180deg, rgba(72, 29, 109, 0.10) 0%, rgba(72, 29, 109, 0.65) 100%); } .counsellor-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: var(--counsellor-white); color: var(--counsellor-pink); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); transition: all var(--counsellor-transition); z-index: 2; } .counsellor-video-play svg { margin-left: 3px; } .counsellor-video-card:hover .counsellor-video-play { background: var(--counsellor-pink); color: var(--counsellor-white); transform: translate(-50%, -50%) scale(1.08); } .counsellor-video-info { position: absolute; top: 18px; left: 18px; right: 18px; z-index: 2; color: var(--counsellor-white); } .counsellor-video-info h3 { font-family: var(--counsellor-font-heading); font-size: 16px; font-weight: 700; margin: 0 0 4px; line-height: 1.3; letter-spacing: -0.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .counsellor-video-info p { font-size: 12px; margin: 0; opacity: 0.9; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } /* CTA Banner */ .counsellor-cta { padding: 30px 24px 80px; background: var(--counsellor-cream); } .counsellor-cta-container { max-width: 1240px; margin: 0 auto; } .counsellor-cta-banner { position: relative; background: linear-gradient(135deg, var(--counsellor-purple-deep) 0%, var(--counsellor-purple) 100%); border-radius: var(--counsellor-radius-lg); padding: 36px 44px; display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap; overflow: hidden; box-shadow: 0 20px 56px rgba(72, 29, 109, 0.35); } .counsellor-cta-pattern { position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width: 180px; height: 180px; opacity: 0.6; pointer-events: none; } .counsellor-cta-pattern svg { width: 100%; height: 100%; } .counsellor-cta-left { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 280px; position: relative; z-index: 2; } .counsellor-cta-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--counsellor-pink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--counsellor-white); box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); } .counsellor-cta-text h3 { font-family: var(--counsellor-font-heading); font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; color: var(--counsellor-white); margin: 0 0 4px; line-height: 1.3; letter-spacing: -0.01em; } .counsellor-cta-text p { font-size: 14px; color: rgba(255, 255, 255, 0.85); margin: 0; line-height: 1.5; } .counsellor-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--counsellor-white); color: var(--counsellor-purple-deep); border-radius: 999px; font-family: var(--counsellor-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); transition: all var(--counsellor-transition); position: relative; z-index: 2; } .counsellor-cta-btn:hover { background: var(--counsellor-pink); color: var(--counsellor-white); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(219, 27, 96, 0.45); } .counsellor-cta-btn svg { transition: transform var(--counsellor-transition); } .counsellor-cta-btn:hover svg { transform: translateX(4px); } /* Counsellor Scroll Reveal */ .counsellor-reveal { opacity: 0; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .counsellor-reveal-up { transform: translateY(40px); } .counsellor-reveal-left { transform: translateX(-40px); } .counsellor-reveal-right { transform: translateX(40px); } .counsellor-reveal-active { opacity: 1; transform: translate(0, 0); } /* Counsellor Responsive */ @media (max-width: 1024px) { .counsellor-hero { padding: 60px 24px; } .counsellor-hero-container { grid-template-columns: 1fr; gap: 50px; } .counsellor-hero-image-wrap { max-width: 480px; margin: 0 auto; padding-left: 0; } .counsellor-hero-desc { max-width: 100%; } .counsellor-stats-container { flex-wrap: wrap; padding: 26px 28px; gap: 18px 24px; } .counsellor-stat-item { flex: 1 1 calc(50% - 12px); min-width: 200px; } .counsellor-stat-divider { display: none; } .counsellor-about-container { grid-template-columns: 1fr; gap: 24px; } .counsellor-about-card, .counsellor-quals-card { padding: 32px 30px; } .counsellor-about-illustration { width: 160px; height: 150px; top: 24px; right: 18px; opacity: 0.5; } .counsellor-videos-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .counsellor-hero { padding: 50px 18px; } .counsellor-hero-container { gap: 40px; } .counsellor-hero-image-wrap { padding-bottom: 50px; } .counsellor-hero-title { font-size: 42px; } .counsellor-hero-subtitle { font-size: 17px; } .counsellor-hero-desc { font-size: 14px; } .counsellor-highlights { grid-template-columns: 1fr; gap: 16px; } .counsellor-exp-badge { padding: 14px 18px; min-width: 180px; } .counsellor-exp-badge-icon { width: 38px; height: 38px; } .counsellor-exp-badge-text h3 { font-size: 22px; } .counsellor-stats { padding: 0 18px 20px; } .counsellor-stats-container { flex-direction: column; align-items: stretch; padding: 22px 24px; gap: 18px; } .counsellor-stat-item { flex: 1 1 100%; min-width: 0; padding-bottom: 18px; border-bottom: 1px dashed var(--counsellor-border); } .counsellor-stat-item:last-child { padding-bottom: 0; border-bottom: none; } .counsellor-about { padding: 40px 18px; } .counsellor-about-card, .counsellor-quals-card { padding: 28px 22px; } .counsellor-about-title { font-size: 26px; } .counsellor-about-illustration { width: 120px; height: 110px; top: 18px; right: 12px; opacity: 0.35; } .counsellor-about-desc, .counsellor-about-title { position: relative; z-index: 2; } .counsellor-quals-list li p { font-size: 13px; } .counsellor-videos { padding: 20px 18px 50px; } .counsellor-videos-header { flex-wrap: wrap; gap: 10px; } .counsellor-videos-grid { grid-template-columns: 1fr; gap: 18px; } .counsellor-video-play { width: 48px; height: 48px; } .counsellor-cta { padding: 20px 18px 60px; } .counsellor-cta-banner { padding: 28px 24px; flex-direction: column; align-items: flex-start; text-align: left; } .counsellor-cta-left { min-width: 0; width: 100%; align-items: flex-start; gap: 16px; } .counsellor-cta-icon { width: 48px; height: 48px; } .counsellor-cta-btn { width: 100%; justify-content: center; } .counsellor-cta-pattern { width: 130px; height: 130px; right: -30px; opacity: 0.35; } } @media (max-width: 380px) { .counsellor-hero-title { font-size: 34px; } .counsellor-about-title { font-size: 22px; } .counsellor-exp-badge { min-width: 0; width: calc(100% - 30px); } } @media (prefers-reduced-motion: reduce) { .counsellor-hero *, .counsellor-stats *, .counsellor-about *, .counsellor-videos *, .counsellor-cta *, .counsellor-hero *::before, .counsellor-stats *::before, .counsellor-about *::before, .counsellor-videos *::before, .counsellor-cta *::before { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .counsellor-reveal, .counsellor-reveal-up, .counsellor-reveal-left, .counsellor-reveal-right { opacity: 1 !important; transform: none !important; } } /* ============================================= SUB-COUNSELLOR PROFILE PAGES All classes prefixed .subc- Used by ALL 6 associate counsellor pages. ============================================= */ .subc-profile { --subc-purple-deep: #481D6D; --subc-purple: #6E2CA1; --subc-pink: #DB1B60; --subc-pink-soft: #F472A8; --subc-lavender: #EBD0F3; --subc-lavender-soft: #F5E5F9; --subc-cream: #FFF5F8; --subc-white: #FFFFFF; --subc-text: #2A1A3A; --subc-text-muted: #6B5B7A; --subc-border: #EFE3F4; --subc-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --subc-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --subc-radius-lg: 24px; --subc-radius-md: 16px; --subc-radius-sm: 10px; --subc-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --subc-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --subc-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --subc-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--subc-font-body); color: var(--subc-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .subc-profile *, .subc-profile *::before, .subc-profile *::after { box-sizing: border-box; } .subc-profile-accent { background: linear-gradient(135deg, var(--subc-pink) 0%, var(--subc-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } /* Profile Layout */ .subc-profile { position: relative; padding: 80px 24px 100px; background: linear-gradient(180deg, #FFFFFF 0%, var(--subc-cream) 100%); overflow: hidden; } .subc-profile::before { content: ""; position: absolute; top: -100px; left: -100px; width: 320px; height: 320px; background: radial-gradient(circle, var(--subc-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .subc-profile::after { content: ""; position: absolute; bottom: -120px; right: -120px; width: 360px; height: 360px; background: radial-gradient(circle, var(--subc-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .subc-profile-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 70px; align-items: flex-start; } /* Image Side */ .subc-profile-image-wrap { position: relative; padding-top: 20px; padding-left: 20px; } .subc-profile-image { position: relative; z-index: 2; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--subc-radius-lg); background: var(--subc-lavender-soft); box-shadow: var(--subc-shadow-lg); transition: transform var(--subc-transition), box-shadow var(--subc-transition); } .subc-profile-image:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(72, 29, 109, 0.22); } .subc-profile-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .subc-profile-dots { position: absolute; top: 0; left: 0; width: 90px; height: 90px; background-image: radial-gradient(var(--subc-pink-soft) 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: 0.7; z-index: 1; } .subc-profile-blob { position: absolute; bottom: -30px; right: -30px; width: 140px; height: 140px; background: linear-gradient(135deg, var(--subc-pink-soft) 0%, var(--subc-lavender) 100%); border-radius: 50%; opacity: 0.4; z-index: 1; } /* Content Side */ .subc-profile-content { position: relative; z-index: 2; padding-top: 10px; } .subc-profile-tag { display: inline-block; font-family: var(--subc-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: lowercase; color: var(--subc-pink); margin-bottom: 14px; position: relative; padding-bottom: 8px; } .subc-profile-tag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--subc-pink); border-radius: 999px; } .subc-profile-name { font-family: var(--subc-font-heading); font-size: clamp(26px, 3.8vw, 38px); font-weight: 700; line-height: 1.15; color: var(--subc-purple-deep); margin: 0 0 16px; letter-spacing: -0.01em; text-transform: uppercase; } .subc-profile-name-suffix { white-space: nowrap; } .subc-profile-meta { margin-bottom: 22px; } .subc-profile-role { font-family: var(--subc-font-heading); font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; color: var(--subc-purple); margin: 0 0 4px; line-height: 1.4; } .subc-profile-langs { font-family: var(--subc-font-heading); font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; color: var(--subc-purple); margin: 0; line-height: 1.4; } .subc-profile-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--subc-pink), var(--subc-purple)); border-radius: 999px; margin-bottom: 26px; } /* Highlights */ .subc-profile-highlights { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; } .subc-profile-highlight-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: flex-start; padding: 4px 0; transition: transform var(--subc-transition); } .subc-profile-highlight-item:hover { transform: translateX(4px); } .subc-profile-bullet { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--subc-lavender) 0%, var(--subc-lavender-soft) 100%); color: var(--subc-purple-deep); flex-shrink: 0; margin-top: 2px; transition: all var(--subc-transition); } .subc-profile-highlight-item:hover .subc-profile-bullet { background: linear-gradient(135deg, var(--subc-pink) 0%, var(--subc-purple) 100%); color: var(--subc-white); transform: scale(1.08); } .subc-profile-highlight-item:hover .subc-profile-bullet svg { stroke: var(--subc-white); } .subc-profile-bullet--award { background: linear-gradient(135deg, var(--subc-pink) 0%, var(--subc-purple) 100%); color: var(--subc-white); box-shadow: 0 4px 12px rgba(219, 27, 96, 0.30); } .subc-profile-highlight-item--award:hover .subc-profile-bullet--award { transform: scale(1.12) rotate(-8deg); } .subc-profile-highlight-item p { font-size: 15px; color: var(--subc-text); margin: 0; line-height: 1.6; } .subc-profile-highlight-item p strong { color: var(--subc-purple-deep); font-weight: 700; } .subc-profile-highlight-item--award { position: relative; margin-top: 6px; padding: 12px 14px; background: linear-gradient(135deg, var(--subc-lavender-soft) 0%, var(--subc-cream) 100%); border-radius: var(--subc-radius-sm); border: 1px dashed var(--subc-lavender); } .subc-profile-highlight-item--award p { font-size: 14px; } /* CTA Button */ .subc-profile-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--subc-pink); color: var(--subc-white); border-radius: 999px; font-family: var(--subc-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--subc-transition); } .subc-profile-btn:hover { background: var(--subc-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .subc-profile-btn svg { transition: transform var(--subc-transition); } .subc-profile-btn:hover svg { transform: translateX(4px); } /* Scroll Reveal */ .subc-reveal { opacity: 0; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .subc-reveal-up { transform: translateY(40px); } .subc-reveal-left { transform: translateX(-40px); } .subc-reveal-right { transform: translateX(40px); } .subc-reveal-active { opacity: 1; transform: translate(0, 0); } /* subc Responsive */ @media (max-width: 1024px) { .subc-profile { padding: 60px 24px 80px; } .subc-profile-container { grid-template-columns: 1fr; gap: 50px; max-width: 720px; } .subc-profile-image-wrap { max-width: 420px; margin: 0 auto; padding-left: 0; } .subc-profile-content { padding-top: 0; } } @media (max-width: 640px) { .subc-profile { padding: 50px 18px 60px; } .subc-profile-container { gap: 40px; } .subc-profile-dots { width: 70px; height: 70px; background-size: 10px 10px; } .subc-profile-blob { width: 100px; height: 100px; bottom: -20px; right: -20px; } .subc-profile-name { font-size: 24px; } .subc-profile-role, .subc-profile-langs { font-size: 16px; } .subc-profile-highlights { gap: 12px; } .subc-profile-highlight-item p { font-size: 14px; line-height: 1.55; } .subc-profile-btn { width: 100%; justify-content: center; padding: 14px 22px; } } @media (max-width: 380px) { .subc-profile-name { font-size: 22px; } .subc-profile-highlight-item p { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .subc-profile *, .subc-profile *::before, .subc-profile *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .subc-reveal, .subc-reveal-up, .subc-reveal-left, .subc-reveal-right { opacity: 1 !important; transform: none !important; } } /* ============================================= INDIVIDUAL COUNSELLOR PROFILE PAGES Prefixes: majeed- | jaya- | edmund- | sasi- | jeanette- All share identical layout — only prefix differs. ============================================= */ /* ============================================= DR. K H MAJEED BIN MAIDEN — majeed- ============================================= */ .majeed-profile { --majeed-purple-deep: #481D6D; --majeed-purple: #6E2CA1; --majeed-pink: #DB1B60; --majeed-pink-soft: #F472A8; --majeed-lavender: #EBD0F3; --majeed-lavender-soft: #F5E5F9; --majeed-cream: #FFF5F8; --majeed-white: #FFFFFF; --majeed-text: #2A1A3A; --majeed-text-muted: #6B5B7A; --majeed-border: #EFE3F4; --majeed-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --majeed-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --majeed-radius-lg: 24px; --majeed-radius-md: 16px; --majeed-radius-sm: 10px; --majeed-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --majeed-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --majeed-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --majeed-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--majeed-font-body); color: var(--majeed-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .majeed-profile *, .majeed-profile *::before, .majeed-profile *::after { box-sizing: border-box; } .majeed-profile-accent { background: linear-gradient(135deg, var(--majeed-pink) 0%, var(--majeed-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .majeed-profile { position: relative; padding: 80px 24px 100px; background: linear-gradient(180deg, #FFFFFF 0%, var(--majeed-cream) 100%); overflow: hidden; } .majeed-profile::before { content: ""; position: absolute; top: -100px; left: -100px; width: 320px; height: 320px; background: radial-gradient(circle, var(--majeed-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .majeed-profile::after { content: ""; position: absolute; bottom: -120px; right: -120px; width: 360px; height: 360px; background: radial-gradient(circle, var(--majeed-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .majeed-profile-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 70px; align-items: flex-start; } .majeed-profile-image-wrap { position: relative; padding-top: 20px; padding-left: 20px; } .majeed-profile-image { position: relative; z-index: 2; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--majeed-radius-lg); background: var(--majeed-lavender-soft); box-shadow: var(--majeed-shadow-lg); transition: transform var(--majeed-transition), box-shadow var(--majeed-transition); } .majeed-profile-image:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(72, 29, 109, 0.22); } .majeed-profile-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .majeed-profile-dots { position: absolute; top: 0; left: 0; width: 90px; height: 90px; background-image: radial-gradient(var(--majeed-pink-soft) 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: 0.7; z-index: 1; } .majeed-profile-blob { position: absolute; bottom: -30px; right: -30px; width: 140px; height: 140px; background: linear-gradient(135deg, var(--majeed-pink-soft) 0%, var(--majeed-lavender) 100%); border-radius: 50%; opacity: 0.4; z-index: 1; } .majeed-profile-content { position: relative; z-index: 2; padding-top: 10px; } .majeed-profile-tag { display: inline-block; font-family: var(--majeed-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: lowercase; color: var(--majeed-pink); margin-bottom: 14px; position: relative; padding-bottom: 8px; } .majeed-profile-tag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--majeed-pink); border-radius: 999px; } .majeed-profile-name { font-family: var(--majeed-font-heading); font-size: clamp(24px, 3.6vw, 36px); font-weight: 700; line-height: 1.15; color: var(--majeed-purple-deep); margin: 0 0 16px; letter-spacing: -0.01em; text-transform: uppercase; } .majeed-profile-meta { margin-bottom: 22px; } .majeed-profile-role { font-family: var(--majeed-font-heading); font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; color: var(--majeed-purple); margin: 0 0 4px; line-height: 1.4; } .majeed-profile-langs { font-family: var(--majeed-font-heading); font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; color: var(--majeed-purple); margin: 0; line-height: 1.4; } .majeed-profile-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--majeed-pink), var(--majeed-purple)); border-radius: 999px; margin-bottom: 26px; } .majeed-profile-highlights { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; } .majeed-profile-highlight-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: flex-start; padding: 4px 0; transition: transform var(--majeed-transition); } .majeed-profile-highlight-item:hover { transform: translateX(4px); } .majeed-profile-bullet { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--majeed-lavender) 0%, var(--majeed-lavender-soft) 100%); color: var(--majeed-purple-deep); flex-shrink: 0; margin-top: 2px; transition: all var(--majeed-transition); } .majeed-profile-highlight-item:hover .majeed-profile-bullet { background: linear-gradient(135deg, var(--majeed-pink) 0%, var(--majeed-purple) 100%); color: var(--majeed-white); transform: scale(1.08); } .majeed-profile-highlight-item:hover .majeed-profile-bullet svg { stroke: var(--majeed-white); } .majeed-profile-bullet--award { background: linear-gradient(135deg, var(--majeed-pink) 0%, var(--majeed-purple) 100%); color: var(--majeed-white); box-shadow: 0 4px 12px rgba(219, 27, 96, 0.30); } .majeed-profile-highlight-item--award:hover .majeed-profile-bullet--award { transform: scale(1.12) rotate(-8deg); } .majeed-profile-highlight-item p { font-size: 15px; color: var(--majeed-text); margin: 0; line-height: 1.6; } .majeed-profile-highlight-item p strong { color: var(--majeed-purple-deep); font-weight: 700; } .majeed-profile-highlight-item--award { position: relative; margin-top: 6px; padding: 12px 14px; background: linear-gradient(135deg, var(--majeed-lavender-soft) 0%, var(--majeed-cream) 100%); border-radius: var(--majeed-radius-sm); border: 1px dashed var(--majeed-lavender); } .majeed-profile-highlight-item--award p { font-size: 14px; } .majeed-profile-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--majeed-pink); color: var(--majeed-white); border-radius: 999px; font-family: var(--majeed-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--majeed-transition); } .majeed-profile-btn:hover { background: var(--majeed-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .majeed-profile-btn svg { transition: transform var(--majeed-transition); } .majeed-profile-btn:hover svg { transform: translateX(4px); } .majeed-reveal { opacity: 0; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .majeed-reveal-up { transform: translateY(40px); } .majeed-reveal-left { transform: translateX(-40px); } .majeed-reveal-right { transform: translateX(40px); } .majeed-reveal-active { opacity: 1; transform: translate(0, 0); } @media (max-width: 1024px) { .majeed-profile { padding: 60px 24px 80px; } .majeed-profile-container { grid-template-columns: 1fr; gap: 50px; max-width: 720px; } .majeed-profile-image-wrap { max-width: 420px; margin: 0 auto; padding-left: 0; } .majeed-profile-content { padding-top: 0; } } @media (max-width: 640px) { .majeed-profile { padding: 50px 18px 60px; } .majeed-profile-container { gap: 40px; } .majeed-profile-dots { width: 70px; height: 70px; background-size: 10px 10px; } .majeed-profile-blob { width: 100px; height: 100px; bottom: -20px; right: -20px; } .majeed-profile-name { font-size: 22px; } .majeed-profile-role, .majeed-profile-langs { font-size: 16px; } .majeed-profile-highlights { gap: 12px; } .majeed-profile-highlight-item p { font-size: 14px; line-height: 1.55; } .majeed-profile-btn { width: 100%; justify-content: center; padding: 14px 22px; } } @media (max-width: 380px) { .majeed-profile-name { font-size: 20px; } .majeed-profile-highlight-item p { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .majeed-profile *, .majeed-profile *::before, .majeed-profile *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .majeed-reveal, .majeed-reveal-up, .majeed-reveal-left, .majeed-reveal-right { opacity: 1 !important; transform: none !important; } } /* ============================================= JAYA NATHAN — jaya- ============================================= */ .jaya-profile { --jaya-purple-deep: #481D6D; --jaya-purple: #6E2CA1; --jaya-pink: #DB1B60; --jaya-pink-soft: #F472A8; --jaya-lavender: #EBD0F3; --jaya-lavender-soft: #F5E5F9; --jaya-cream: #FFF5F8; --jaya-white: #FFFFFF; --jaya-text: #2A1A3A; --jaya-text-muted: #6B5B7A; --jaya-border: #EFE3F4; --jaya-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --jaya-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --jaya-radius-lg: 24px; --jaya-radius-md: 16px; --jaya-radius-sm: 10px; --jaya-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --jaya-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --jaya-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --jaya-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--jaya-font-body); color: var(--jaya-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .jaya-profile *, .jaya-profile *::before, .jaya-profile *::after { box-sizing: border-box; } .jaya-profile-accent { background: linear-gradient(135deg, var(--jaya-pink) 0%, var(--jaya-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .jaya-profile { position: relative; padding: 80px 24px 100px; background: linear-gradient(180deg, #FFFFFF 0%, var(--jaya-cream) 100%); overflow: hidden; } .jaya-profile::before { content: ""; position: absolute; top: -100px; left: -100px; width: 320px; height: 320px; background: radial-gradient(circle, var(--jaya-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .jaya-profile::after { content: ""; position: absolute; bottom: -120px; right: -120px; width: 360px; height: 360px; background: radial-gradient(circle, var(--jaya-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .jaya-profile-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 70px; align-items: flex-start; } .jaya-profile-image-wrap { position: relative; padding-top: 20px; padding-left: 20px; } .jaya-profile-image { position: relative; z-index: 2; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--jaya-radius-lg); background: var(--jaya-lavender-soft); box-shadow: var(--jaya-shadow-lg); transition: transform var(--jaya-transition), box-shadow var(--jaya-transition); } .jaya-profile-image:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(72, 29, 109, 0.22); } .jaya-profile-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .jaya-profile-dots { position: absolute; top: 0; left: 0; width: 90px; height: 90px; background-image: radial-gradient(var(--jaya-pink-soft) 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: 0.7; z-index: 1; } .jaya-profile-blob { position: absolute; bottom: -30px; right: -30px; width: 140px; height: 140px; background: linear-gradient(135deg, var(--jaya-pink-soft) 0%, var(--jaya-lavender) 100%); border-radius: 50%; opacity: 0.4; z-index: 1; } .jaya-profile-content { position: relative; z-index: 2; padding-top: 10px; } .jaya-profile-tag { display: inline-block; font-family: var(--jaya-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: lowercase; color: var(--jaya-pink); margin-bottom: 14px; position: relative; padding-bottom: 8px; } .jaya-profile-tag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--jaya-pink); border-radius: 999px; } .jaya-profile-name { font-family: var(--jaya-font-heading); font-size: clamp(26px, 3.8vw, 38px); font-weight: 700; line-height: 1.15; color: var(--jaya-purple-deep); margin: 0 0 16px; letter-spacing: -0.01em; text-transform: uppercase; } .jaya-profile-meta { margin-bottom: 22px; } .jaya-profile-role { font-family: var(--jaya-font-heading); font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; color: var(--jaya-purple); margin: 0 0 4px; line-height: 1.4; } .jaya-profile-langs { font-family: var(--jaya-font-heading); font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; color: var(--jaya-purple); margin: 0; line-height: 1.4; } .jaya-profile-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--jaya-pink), var(--jaya-purple)); border-radius: 999px; margin-bottom: 26px; } .jaya-profile-highlights { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; } .jaya-profile-highlight-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: flex-start; padding: 4px 0; transition: transform var(--jaya-transition); } .jaya-profile-highlight-item:hover { transform: translateX(4px); } .jaya-profile-bullet { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--jaya-lavender) 0%, var(--jaya-lavender-soft) 100%); color: var(--jaya-purple-deep); flex-shrink: 0; margin-top: 2px; transition: all var(--jaya-transition); } .jaya-profile-highlight-item:hover .jaya-profile-bullet { background: linear-gradient(135deg, var(--jaya-pink) 0%, var(--jaya-purple) 100%); color: var(--jaya-white); transform: scale(1.08); } .jaya-profile-highlight-item:hover .jaya-profile-bullet svg { stroke: var(--jaya-white); } .jaya-profile-bullet--award { background: linear-gradient(135deg, var(--jaya-pink) 0%, var(--jaya-purple) 100%); color: var(--jaya-white); box-shadow: 0 4px 12px rgba(219, 27, 96, 0.30); } .jaya-profile-highlight-item--award:hover .jaya-profile-bullet--award { transform: scale(1.12) rotate(-8deg); } .jaya-profile-highlight-item p { font-size: 15px; color: var(--jaya-text); margin: 0; line-height: 1.6; } .jaya-profile-highlight-item p strong { color: var(--jaya-purple-deep); font-weight: 700; } .jaya-profile-highlight-item--award { position: relative; margin-top: 6px; padding: 12px 14px; background: linear-gradient(135deg, var(--jaya-lavender-soft) 0%, var(--jaya-cream) 100%); border-radius: var(--jaya-radius-sm); border: 1px dashed var(--jaya-lavender); } .jaya-profile-highlight-item--award p { font-size: 14px; } .jaya-profile-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--jaya-pink); color: var(--jaya-white); border-radius: 999px; font-family: var(--jaya-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--jaya-transition); } .jaya-profile-btn:hover { background: var(--jaya-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .jaya-profile-btn svg { transition: transform var(--jaya-transition); } .jaya-profile-btn:hover svg { transform: translateX(4px); } .jaya-reveal { opacity: 0; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .jaya-reveal-up { transform: translateY(40px); } .jaya-reveal-left { transform: translateX(-40px); } .jaya-reveal-right { transform: translateX(40px); } .jaya-reveal-active { opacity: 1; transform: translate(0, 0); } @media (max-width: 1024px) { .jaya-profile { padding: 60px 24px 80px; } .jaya-profile-container { grid-template-columns: 1fr; gap: 50px; max-width: 720px; } .jaya-profile-image-wrap { max-width: 420px; margin: 0 auto; padding-left: 0; } .jaya-profile-content { padding-top: 0; } } @media (max-width: 640px) { .jaya-profile { padding: 50px 18px 60px; } .jaya-profile-container { gap: 40px; } .jaya-profile-dots { width: 70px; height: 70px; background-size: 10px 10px; } .jaya-profile-blob { width: 100px; height: 100px; bottom: -20px; right: -20px; } .jaya-profile-name { font-size: 24px; } .jaya-profile-role, .jaya-profile-langs { font-size: 16px; } .jaya-profile-highlights { gap: 12px; } .jaya-profile-highlight-item p { font-size: 14px; line-height: 1.55; } .jaya-profile-btn { width: 100%; justify-content: center; padding: 14px 22px; } } @media (max-width: 380px) { .jaya-profile-name { font-size: 22px; } .jaya-profile-highlight-item p { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .jaya-profile *, .jaya-profile *::before, .jaya-profile *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .jaya-reveal, .jaya-reveal-up, .jaya-reveal-left, .jaya-reveal-right { opacity: 1 !important; transform: none !important; } } /* ============================================= EDMUND CHONG — edmund- ============================================= */ .edmund-profile { --edmund-purple-deep: #481D6D; --edmund-purple: #6E2CA1; --edmund-pink: #DB1B60; --edmund-pink-soft: #F472A8; --edmund-lavender: #EBD0F3; --edmund-lavender-soft: #F5E5F9; --edmund-cream: #FFF5F8; --edmund-white: #FFFFFF; --edmund-text: #2A1A3A; --edmund-text-muted: #6B5B7A; --edmund-border: #EFE3F4; --edmund-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --edmund-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --edmund-radius-lg: 24px; --edmund-radius-md: 16px; --edmund-radius-sm: 10px; --edmund-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --edmund-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --edmund-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --edmund-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--edmund-font-body); color: var(--edmund-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .edmund-profile *, .edmund-profile *::before, .edmund-profile *::after { box-sizing: border-box; } .edmund-profile-accent { background: linear-gradient(135deg, var(--edmund-pink) 0%, var(--edmund-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .edmund-profile { position: relative; padding: 80px 24px 100px; background: linear-gradient(180deg, #FFFFFF 0%, var(--edmund-cream) 100%); overflow: hidden; } .edmund-profile::before { content: ""; position: absolute; top: -100px; left: -100px; width: 320px; height: 320px; background: radial-gradient(circle, var(--edmund-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .edmund-profile::after { content: ""; position: absolute; bottom: -120px; right: -120px; width: 360px; height: 360px; background: radial-gradient(circle, var(--edmund-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .edmund-profile-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 70px; align-items: flex-start; } .edmund-profile-image-wrap { position: relative; padding-top: 20px; padding-left: 20px; } .edmund-profile-image { position: relative; z-index: 2; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--edmund-radius-lg); background: var(--edmund-lavender-soft); box-shadow: var(--edmund-shadow-lg); transition: transform var(--edmund-transition), box-shadow var(--edmund-transition); } .edmund-profile-image:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(72, 29, 109, 0.22); } .edmund-profile-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .edmund-profile-dots { position: absolute; top: 0; left: 0; width: 90px; height: 90px; background-image: radial-gradient(var(--edmund-pink-soft) 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: 0.7; z-index: 1; } .edmund-profile-blob { position: absolute; bottom: -30px; right: -30px; width: 140px; height: 140px; background: linear-gradient(135deg, var(--edmund-pink-soft) 0%, var(--edmund-lavender) 100%); border-radius: 50%; opacity: 0.4; z-index: 1; } .edmund-profile-content { position: relative; z-index: 2; padding-top: 10px; } .edmund-profile-tag { display: inline-block; font-family: var(--edmund-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: lowercase; color: var(--edmund-pink); margin-bottom: 14px; position: relative; padding-bottom: 8px; } .edmund-profile-tag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--edmund-pink); border-radius: 999px; } .edmund-profile-name { font-family: var(--edmund-font-heading); font-size: clamp(26px, 3.8vw, 38px); font-weight: 700; line-height: 1.15; color: var(--edmund-purple-deep); margin: 0 0 16px; letter-spacing: -0.01em; text-transform: uppercase; } .edmund-profile-meta { margin-bottom: 22px; } .edmund-profile-role { font-family: var(--edmund-font-heading); font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; color: var(--edmund-purple); margin: 0 0 4px; line-height: 1.4; } .edmund-profile-langs { font-family: var(--edmund-font-heading); font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; color: var(--edmund-purple); margin: 0; line-height: 1.4; } .edmund-profile-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--edmund-pink), var(--edmund-purple)); border-radius: 999px; margin-bottom: 26px; } .edmund-profile-highlights { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; } .edmund-profile-highlight-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: flex-start; padding: 4px 0; transition: transform var(--edmund-transition); } .edmund-profile-highlight-item:hover { transform: translateX(4px); } .edmund-profile-bullet { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--edmund-lavender) 0%, var(--edmund-lavender-soft) 100%); color: var(--edmund-purple-deep); flex-shrink: 0; margin-top: 2px; transition: all var(--edmund-transition); } .edmund-profile-highlight-item:hover .edmund-profile-bullet { background: linear-gradient(135deg, var(--edmund-pink) 0%, var(--edmund-purple) 100%); color: var(--edmund-white); transform: scale(1.08); } .edmund-profile-highlight-item:hover .edmund-profile-bullet svg { stroke: var(--edmund-white); } .edmund-profile-bullet--award { background: linear-gradient(135deg, var(--edmund-pink) 0%, var(--edmund-purple) 100%); color: var(--edmund-white); box-shadow: 0 4px 12px rgba(219, 27, 96, 0.30); } .edmund-profile-highlight-item--award:hover .edmund-profile-bullet--award { transform: scale(1.12) rotate(-8deg); } .edmund-profile-highlight-item p { font-size: 15px; color: var(--edmund-text); margin: 0; line-height: 1.6; } .edmund-profile-highlight-item p strong { color: var(--edmund-purple-deep); font-weight: 700; } .edmund-profile-highlight-item--award { position: relative; margin-top: 6px; padding: 12px 14px; background: linear-gradient(135deg, var(--edmund-lavender-soft) 0%, var(--edmund-cream) 100%); border-radius: var(--edmund-radius-sm); border: 1px dashed var(--edmund-lavender); } .edmund-profile-highlight-item--award p { font-size: 14px; } .edmund-profile-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--edmund-pink); color: var(--edmund-white); border-radius: 999px; font-family: var(--edmund-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--edmund-transition); } .edmund-profile-btn:hover { background: var(--edmund-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .edmund-profile-btn svg { transition: transform var(--edmund-transition); } .edmund-profile-btn:hover svg { transform: translateX(4px); } .edmund-reveal { opacity: 0; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .edmund-reveal-up { transform: translateY(40px); } .edmund-reveal-left { transform: translateX(-40px); } .edmund-reveal-right { transform: translateX(40px); } .edmund-reveal-active { opacity: 1; transform: translate(0, 0); } @media (max-width: 1024px) { .edmund-profile { padding: 60px 24px 80px; } .edmund-profile-container { grid-template-columns: 1fr; gap: 50px; max-width: 720px; } .edmund-profile-image-wrap { max-width: 420px; margin: 0 auto; padding-left: 0; } .edmund-profile-content { padding-top: 0; } } @media (max-width: 640px) { .edmund-profile { padding: 50px 18px 60px; } .edmund-profile-container { gap: 40px; } .edmund-profile-dots { width: 70px; height: 70px; background-size: 10px 10px; } .edmund-profile-blob { width: 100px; height: 100px; bottom: -20px; right: -20px; } .edmund-profile-name { font-size: 24px; } .edmund-profile-role, .edmund-profile-langs { font-size: 16px; } .edmund-profile-highlights { gap: 12px; } .edmund-profile-highlight-item p { font-size: 14px; line-height: 1.55; } .edmund-profile-btn { width: 100%; justify-content: center; padding: 14px 22px; } } @media (max-width: 380px) { .edmund-profile-name { font-size: 22px; } .edmund-profile-highlight-item p { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .edmund-profile *, .edmund-profile *::before, .edmund-profile *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .edmund-reveal, .edmund-reveal-up, .edmund-reveal-left, .edmund-reveal-right { opacity: 1 !important; transform: none !important; } } /* ============================================= VENKATARAMAN SASI REKHA — sasi- ============================================= */ .sasi-profile { --sasi-purple-deep: #481D6D; --sasi-purple: #6E2CA1; --sasi-pink: #DB1B60; --sasi-pink-soft: #F472A8; --sasi-lavender: #EBD0F3; --sasi-lavender-soft: #F5E5F9; --sasi-cream: #FFF5F8; --sasi-white: #FFFFFF; --sasi-text: #2A1A3A; --sasi-text-muted: #6B5B7A; --sasi-border: #EFE3F4; --sasi-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --sasi-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --sasi-radius-lg: 24px; --sasi-radius-md: 16px; --sasi-radius-sm: 10px; --sasi-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --sasi-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --sasi-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --sasi-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--sasi-font-body); color: var(--sasi-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .sasi-profile *, .sasi-profile *::before, .sasi-profile *::after { box-sizing: border-box; } .sasi-profile-accent { background: linear-gradient(135deg, var(--sasi-pink) 0%, var(--sasi-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .sasi-profile { position: relative; padding: 80px 24px 100px; background: linear-gradient(180deg, #FFFFFF 0%, var(--sasi-cream) 100%); overflow: hidden; } .sasi-profile::before { content: ""; position: absolute; top: -100px; left: -100px; width: 320px; height: 320px; background: radial-gradient(circle, var(--sasi-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .sasi-profile::after { content: ""; position: absolute; bottom: -120px; right: -120px; width: 360px; height: 360px; background: radial-gradient(circle, var(--sasi-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .sasi-profile-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 70px; align-items: flex-start; } .sasi-profile-image-wrap { position: relative; padding-top: 20px; padding-left: 20px; } .sasi-profile-image { position: relative; z-index: 2; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--sasi-radius-lg); background: var(--sasi-lavender-soft); box-shadow: var(--sasi-shadow-lg); transition: transform var(--sasi-transition), box-shadow var(--sasi-transition); } .sasi-profile-image:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(72, 29, 109, 0.22); } .sasi-profile-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .sasi-profile-dots { position: absolute; top: 0; left: 0; width: 90px; height: 90px; background-image: radial-gradient(var(--sasi-pink-soft) 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: 0.7; z-index: 1; } .sasi-profile-blob { position: absolute; bottom: -30px; right: -30px; width: 140px; height: 140px; background: linear-gradient(135deg, var(--sasi-pink-soft) 0%, var(--sasi-lavender) 100%); border-radius: 50%; opacity: 0.4; z-index: 1; } .sasi-profile-content { position: relative; z-index: 2; padding-top: 10px; } .sasi-profile-tag { display: inline-block; font-family: var(--sasi-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: lowercase; color: var(--sasi-pink); margin-bottom: 14px; position: relative; padding-bottom: 8px; } .sasi-profile-tag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--sasi-pink); border-radius: 999px; } .sasi-profile-name { font-family: var(--sasi-font-heading); font-size: clamp(24px, 3.6vw, 36px); font-weight: 700; line-height: 1.15; color: var(--sasi-purple-deep); margin: 0 0 16px; letter-spacing: -0.01em; text-transform: uppercase; } .sasi-profile-meta { margin-bottom: 22px; } .sasi-profile-role { font-family: var(--sasi-font-heading); font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; color: var(--sasi-purple); margin: 0 0 4px; line-height: 1.4; } .sasi-profile-langs { font-family: var(--sasi-font-heading); font-size: clamp(16px, 1.9vw, 19px); font-weight: 600; color: var(--sasi-purple); margin: 0; line-height: 1.4; } .sasi-profile-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--sasi-pink), var(--sasi-purple)); border-radius: 999px; margin-bottom: 26px; } .sasi-profile-highlights { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; } .sasi-profile-highlight-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: flex-start; padding: 4px 0; transition: transform var(--sasi-transition); } .sasi-profile-highlight-item:hover { transform: translateX(4px); } .sasi-profile-bullet { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--sasi-lavender) 0%, var(--sasi-lavender-soft) 100%); color: var(--sasi-purple-deep); flex-shrink: 0; margin-top: 2px; transition: all var(--sasi-transition); } .sasi-profile-highlight-item:hover .sasi-profile-bullet { background: linear-gradient(135deg, var(--sasi-pink) 0%, var(--sasi-purple) 100%); color: var(--sasi-white); transform: scale(1.08); } .sasi-profile-highlight-item:hover .sasi-profile-bullet svg { stroke: var(--sasi-white); } .sasi-profile-bullet--award { background: linear-gradient(135deg, var(--sasi-pink) 0%, var(--sasi-purple) 100%); color: var(--sasi-white); box-shadow: 0 4px 12px rgba(219, 27, 96, 0.30); } .sasi-profile-highlight-item--award:hover .sasi-profile-bullet--award { transform: scale(1.12) rotate(-8deg); } .sasi-profile-highlight-item p { font-size: 15px; color: var(--sasi-text); margin: 0; line-height: 1.6; } .sasi-profile-highlight-item p strong { color: var(--sasi-purple-deep); font-weight: 700; } .sasi-profile-highlight-item--award { position: relative; margin-top: 6px; padding: 12px 14px; background: linear-gradient(135deg, var(--sasi-lavender-soft) 0%, var(--sasi-cream) 100%); border-radius: var(--sasi-radius-sm); border: 1px dashed var(--sasi-lavender); } .sasi-profile-highlight-item--award p { font-size: 14px; } .sasi-profile-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--sasi-pink); color: var(--sasi-white); border-radius: 999px; font-family: var(--sasi-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--sasi-transition); } .sasi-profile-btn:hover { background: var(--sasi-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .sasi-profile-btn svg { transition: transform var(--sasi-transition); } .sasi-profile-btn:hover svg { transform: translateX(4px); } .sasi-reveal { opacity: 0; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .sasi-reveal-up { transform: translateY(40px); } .sasi-reveal-left { transform: translateX(-40px); } .sasi-reveal-right { transform: translateX(40px); } .sasi-reveal-active { opacity: 1; transform: translate(0, 0); } @media (max-width: 1024px) { .sasi-profile { padding: 60px 24px 80px; } .sasi-profile-container { grid-template-columns: 1fr; gap: 50px; max-width: 720px; } .sasi-profile-image-wrap { max-width: 420px; margin: 0 auto; padding-left: 0; } .sasi-profile-content { padding-top: 0; } } @media (max-width: 640px) { .sasi-profile { padding: 50px 18px 60px; } .sasi-profile-container { gap: 40px; } .sasi-profile-dots { width: 70px; height: 70px; background-size: 10px 10px; } .sasi-profile-blob { width: 100px; height: 100px; bottom: -20px; right: -20px; } .sasi-profile-name { font-size: 22px; } .sasi-profile-role, .sasi-profile-langs { font-size: 16px; } .sasi-profile-highlights { gap: 12px; } .sasi-profile-highlight-item p { font-size: 14px; line-height: 1.55; } .sasi-profile-btn { width: 100%; justify-content: center; padding: 14px 22px; } } @media (max-width: 380px) { .sasi-profile-name { font-size: 20px; } .sasi-profile-highlight-item p { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .sasi-profile *, .sasi-profile *::before, .sasi-profile *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .sasi-reveal, .sasi-reveal-up, .sasi-reveal-left, .sasi-reveal-right { opacity: 1 !important; transform: none !important; } } /* ============================================= JEANETTE HOUMAYUNE — jeanette- ============================================= */ .jeanette-profile { --jeanette-purple-deep: #481D6D; --jeanette-purple: #6E2CA1; --jeanette-pink: #DB1B60; --jeanette-pink-soft: #F472A8; --jeanette-lavender: #EBD0F3; --jeanette-lavender-soft: #F5E5F9; --jeanette-cream: #FFF5F8; --jeanette-white: #FFFFFF; --jeanette-text: #2A1A3A; --jeanette-text-muted: #6B5B7A; --jeanette-border: #EFE3F4; --jeanette-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --jeanette-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --jeanette-radius-lg: 24px; --jeanette-radius-md: 16px; --jeanette-radius-sm: 10px; --jeanette-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --jeanette-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --jeanette-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --jeanette-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--jeanette-font-body); color: var(--jeanette-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .jeanette-profile *, .jeanette-profile *::before, .jeanette-profile *::after { box-sizing: border-box; } .jeanette-profile-accent { background: linear-gradient(135deg, var(--jeanette-pink) 0%, var(--jeanette-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .jeanette-profile { position: relative; padding: 80px 24px 100px; background: linear-gradient(180deg, #FFFFFF 0%, var(--jeanette-cream) 100%); overflow: hidden; } .jeanette-profile::before { content: ""; position: absolute; top: -100px; left: -100px; width: 320px; height: 320px; background: radial-gradient(circle, var(--jeanette-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .jeanette-profile::after { content: ""; position: absolute; bottom: -120px; right: -120px; width: 360px; height: 360px; background: radial-gradient(circle, var(--jeanette-lavender-soft) 0%, transparent 70%); border-radius: 50%; z-index: 1; } .jeanette-profile-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 70px; align-items: flex-start; } .jeanette-profile-image-wrap { position: relative; padding-top: 20px; padding-left: 20px; } .jeanette-profile-image { position: relative; z-index: 2; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--jeanette-radius-lg); background: var(--jeanette-lavender-soft); box-shadow: var(--jeanette-shadow-lg); transition: transform var(--jeanette-transition), box-shadow var(--jeanette-transition); } .jeanette-profile-image:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(72, 29, 109, 0.22); } .jeanette-profile-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .jeanette-profile-dots { position: absolute; top: 0; left: 0; width: 90px; height: 90px; background-image: radial-gradient(var(--jeanette-pink-soft) 1.5px, transparent 1.5px); background-size: 12px 12px; opacity: 0.7; z-index: 1; } .jeanette-profile-blob { position: absolute; bottom: -30px; right: -30px; width: 140px; height: 140px; background: linear-gradient(135deg, var(--jeanette-pink-soft) 0%, var(--jeanette-lavender) 100%); border-radius: 50%; opacity: 0.4; z-index: 1; } .jeanette-profile-content { position: relative; z-index: 2; padding-top: 10px; } .jeanette-profile-tag { display: inline-block; font-family: var(--jeanette-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: lowercase; color: var(--jeanette-pink); margin-bottom: 14px; position: relative; padding-bottom: 8px; } .jeanette-profile-tag::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--jeanette-pink); border-radius: 999px; } .jeanette-profile-name { font-family: var(--jeanette-font-heading); font-size: clamp(26px, 3.8vw, 38px); font-weight: 700; line-height: 1.15; color: var(--jeanette-purple-deep); margin: 0 0 16px; letter-spacing: -0.01em; text-transform: uppercase; } .jeanette-profile-meta { margin-bottom: 22px; } .jeanette-profile-role { font-family: var(--jeanette-font-heading); font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; color: var(--jeanette-purple); margin: 0 0 4px; line-height: 1.4; } .jeanette-profile-langs { font-family: var(--jeanette-font-heading); font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; color: var(--jeanette-purple); margin: 0; line-height: 1.4; } .jeanette-profile-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--jeanette-pink), var(--jeanette-purple)); border-radius: 999px; margin-bottom: 26px; } .jeanette-profile-highlights { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 14px; } .jeanette-profile-highlight-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: flex-start; padding: 4px 0; transition: transform var(--jeanette-transition); } .jeanette-profile-highlight-item:hover { transform: translateX(4px); } .jeanette-profile-bullet { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, var(--jeanette-lavender) 0%, var(--jeanette-lavender-soft) 100%); color: var(--jeanette-purple-deep); flex-shrink: 0; margin-top: 2px; transition: all var(--jeanette-transition); } .jeanette-profile-highlight-item:hover .jeanette-profile-bullet { background: linear-gradient(135deg, var(--jeanette-pink) 0%, var(--jeanette-purple) 100%); color: var(--jeanette-white); transform: scale(1.08); } .jeanette-profile-highlight-item:hover .jeanette-profile-bullet svg { stroke: var(--jeanette-white); } .jeanette-profile-bullet--award { background: linear-gradient(135deg, var(--jeanette-pink) 0%, var(--jeanette-purple) 100%); color: var(--jeanette-white); box-shadow: 0 4px 12px rgba(219, 27, 96, 0.30); } .jeanette-profile-highlight-item--award:hover .jeanette-profile-bullet--award { transform: scale(1.12) rotate(-8deg); } .jeanette-profile-highlight-item p { font-size: 15px; color: var(--jeanette-text); margin: 0; line-height: 1.6; } .jeanette-profile-highlight-item p strong { color: var(--jeanette-purple-deep); font-weight: 700; } .jeanette-profile-highlight-item--award { position: relative; margin-top: 6px; padding: 12px 14px; background: linear-gradient(135deg, var(--jeanette-lavender-soft) 0%, var(--jeanette-cream) 100%); border-radius: var(--jeanette-radius-sm); border: 1px dashed var(--jeanette-lavender); } .jeanette-profile-highlight-item--award p { font-size: 14px; } .jeanette-profile-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--jeanette-pink); color: var(--jeanette-white); border-radius: 999px; font-family: var(--jeanette-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border: 2px solid transparent; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--jeanette-transition); } .jeanette-profile-btn:hover { background: var(--jeanette-purple-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .jeanette-profile-btn svg { transition: transform var(--jeanette-transition); } .jeanette-profile-btn:hover svg { transform: translateX(4px); } .jeanette-reveal { opacity: 0; transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .jeanette-reveal-up { transform: translateY(40px); } .jeanette-reveal-left { transform: translateX(-40px); } .jeanette-reveal-right { transform: translateX(40px); } .jeanette-reveal-active { opacity: 1; transform: translate(0, 0); } @media (max-width: 1024px) { .jeanette-profile { padding: 60px 24px 80px; } .jeanette-profile-container { grid-template-columns: 1fr; gap: 50px; max-width: 720px; } .jeanette-profile-image-wrap { max-width: 420px; margin: 0 auto; padding-left: 0; } .jeanette-profile-content { padding-top: 0; } } @media (max-width: 640px) { .jeanette-profile { padding: 50px 18px 60px; } .jeanette-profile-container { gap: 40px; } .jeanette-profile-dots { width: 70px; height: 70px; background-size: 10px 10px; } .jeanette-profile-blob { width: 100px; height: 100px; bottom: -20px; right: -20px; } .jeanette-profile-name { font-size: 24px; } .jeanette-profile-role, .jeanette-profile-langs { font-size: 15px; } .jeanette-profile-highlights { gap: 12px; } .jeanette-profile-highlight-item p { font-size: 14px; line-height: 1.55; } .jeanette-profile-btn { width: 100%; justify-content: center; padding: 14px 22px; } } @media (max-width: 380px) { .jeanette-profile-name { font-size: 22px; } .jeanette-profile-highlight-item p { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .jeanette-profile *, .jeanette-profile *::before, .jeanette-profile *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .jeanette-reveal, .jeanette-reveal-up, .jeanette-reveal-left, .jeanette-reveal-right { opacity: 1 !important; transform: none !important; } } /* ============================================= WHATSAPP CHAT WIDGET All classes prefixed .spkz-wa- ============================================= */ .spkz-wa { --spkz-wa-green: #25D366; --spkz-wa-green-dark: #1DA851; --spkz-wa-purple-deep: #481D6D; --spkz-wa-purple: #6E2CA1; --spkz-wa-pink: #DB1B60; --spkz-wa-lavender: #EBD0F3; --spkz-wa-lavender-soft: #F5E5F9; --spkz-wa-cream: #FFF5F8; --spkz-wa-text: #2A1A3A; --spkz-wa-text-muted: #6B5B7A; --spkz-wa-border: #EFE3F4; --spkz-wa-font-heading: 'Montserrat', system-ui, sans-serif; --spkz-wa-font-body: 'Poppins', system-ui, sans-serif; --spkz-wa-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: var(--spkz-wa-font-body); } .spkz-wa *, .spkz-wa *::before, .spkz-wa *::after { box-sizing: border-box; } /* Launcher Button */ .spkz-wa-launcher { position: relative; width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, var(--spkz-wa-green) 0%, var(--spkz-wa-green-dark) 100%); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 4px 12px rgba(72, 29, 109, 0.15); transition: all var(--spkz-wa-transition); overflow: visible; } .spkz-wa-launcher:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 12px 28px rgba(37, 211, 102, 0.5), 0 6px 16px rgba(72, 29, 109, 0.2); } .spkz-wa-launcher-icon { position: absolute; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); } .spkz-wa-icon-close { opacity: 0; transform: rotate(-90deg) scale(0.5); } .spkz-wa.is-open .spkz-wa-icon-chat { opacity: 0; transform: rotate(90deg) scale(0.5); } .spkz-wa.is-open .spkz-wa-icon-close { opacity: 1; transform: rotate(0) scale(1); } /* Pulse ring */ .spkz-wa-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--spkz-wa-green); opacity: 0.5; z-index: -1; animation: spkzWaPulse 2s ease-out infinite; } .spkz-wa.is-open .spkz-wa-pulse { display: none; } @keyframes spkzWaPulse { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } } /* Popup Card */ .spkz-wa-popup { position: absolute; bottom: calc(100% + 16px); right: 0; width: 340px; background: #FFFFFF; border-radius: 20px; box-shadow: 0 24px 60px rgba(72, 29, 109, 0.25), 0 8px 20px rgba(72, 29, 109, 0.12); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.96); transform-origin: bottom right; transition: all var(--spkz-wa-transition); border: 1px solid var(--spkz-wa-border); } .spkz-wa.is-open .spkz-wa-popup { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* Header */ .spkz-wa-header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 16px; background: linear-gradient(135deg, var(--spkz-wa-purple-deep) 0%, var(--spkz-wa-purple) 100%); position: relative; } .spkz-wa-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--spkz-wa-green) 0%, var(--spkz-wa-green-dark) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 2px solid rgba(255, 255, 255, 0.2); } .spkz-wa-header-text { flex: 1; min-width: 0; color: #FFFFFF; } .spkz-wa-header-text h4 { font-family: var(--spkz-wa-font-heading); font-size: 15px; font-weight: 600; margin: 0 0 2px; letter-spacing: -0.01em; } .spkz-wa-header-text p { font-size: 12px; margin: 0; opacity: 0.9; display: flex; align-items: center; gap: 6px; } .spkz-wa-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); animation: spkzWaBlink 2s ease-in-out infinite; } @keyframes spkzWaBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .spkz-wa-close { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: none; color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--spkz-wa-transition); flex-shrink: 0; } .spkz-wa-close:hover { background: rgba(255, 255, 255, 0.25); transform: rotate(90deg); } /* Body / Chat Bubble */ .spkz-wa-body { padding: 22px 18px 18px; background: linear-gradient(180deg, var(--spkz-wa-cream) 0%, #FFFFFF 100%), repeating-linear-gradient(45deg, transparent 0 20px, rgba(110, 44, 161, 0.02) 20px 40px); min-height: 130px; } .spkz-wa-bubble { position: relative; background: #FFFFFF; border-radius: 16px; border-top-left-radius: 4px; padding: 14px 16px 10px; box-shadow: 0 2px 8px rgba(72, 29, 109, 0.08); border: 1px solid var(--spkz-wa-border); max-width: 92%; } .spkz-wa-bubble::before { content: ""; position: absolute; top: 0; left: -8px; width: 12px; height: 12px; background: #FFFFFF; border-left: 1px solid var(--spkz-wa-border); border-top: 1px solid var(--spkz-wa-border); clip-path: polygon(0 0, 100% 0, 100% 100%); } .spkz-wa-bubble-name { font-family: var(--spkz-wa-font-heading); font-size: 12px; font-weight: 600; color: var(--spkz-wa-purple); margin: 0 0 4px; letter-spacing: 0.2px; } .spkz-wa-bubble-msg { font-size: 14px; color: var(--spkz-wa-text); line-height: 1.55; margin: 0 0 4px; } .spkz-wa-bubble-time { display: block; font-size: 10.5px; color: var(--spkz-wa-text-muted); text-align: right; margin-top: 4px; } /* Start Conversation Button */ .spkz-wa-start { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 18px 18px; padding: 13px 20px; background: linear-gradient(135deg, var(--spkz-wa-green) 0%, var(--spkz-wa-green-dark) 100%); color: #FFFFFF; font-family: var(--spkz-wa-font-body); font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 999px; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35); transition: all var(--spkz-wa-transition); } .spkz-wa-start:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45); } /* WA Responsive */ @media (max-width: 480px) { .spkz-wa { bottom: 18px; right: 18px; } .spkz-wa-launcher { width: 56px; height: 56px; } .spkz-wa-popup { width: calc(100vw - 36px); max-width: 340px; right: 0; } } @media (prefers-reduced-motion: reduce) { .spkz-wa *, .spkz-wa *::before, .spkz-wa *::after { animation: none !important; transition-duration: 0.01ms !important; } } /* ============================================= SHOP PAGE All classes prefixed .shop- ============================================= */ /* Scroll Reveal */ .shop-reveal { opacity: 0; transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .shop-reveal-up { transform: translateY(40px); } .shop-reveal-left { transform: translateX(-40px); } .shop-reveal.shop-reveal-active { opacity: 1; transform: translate(0, 0); } /* Design Tokens */ .shop-hero, .shop-main, .shop-cart-drawer, .shop-checkout-modal, .shop-cart-fab { --shop-purple-deep: #481D6D; --shop-purple: #6E2CA1; --shop-pink: #DB1B60; --shop-pink-soft: #F472A8; --shop-lavender: #EBD0F3; --shop-lavender-soft: #F5E5F9; --shop-cream: #FFF5F8; --shop-white: #FFFFFF; --shop-text: #2A1A3A; --shop-text-muted: #6B5B7A; --shop-border: #EFE3F4; --shop-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --shop-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --shop-radius-lg: 24px; --shop-radius-md: 16px; --shop-radius-sm: 10px; --shop-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --shop-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --shop-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --shop-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--shop-font-body); color: var(--shop-text); -webkit-font-smoothing: antialiased; } .shop-hero *, .shop-main *, .shop-cart-drawer *, .shop-checkout-modal *, .shop-hero *::before, .shop-main *::before { box-sizing: border-box; } /* ============================================= SHOP HERO ============================================= */ .shop-hero { position: relative; padding: 96px 24px 48px; background: linear-gradient(180deg, var(--shop-cream) 0%, #ffffff 100%); text-align: center; overflow: hidden; } .shop-hero-container { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; } .shop-hero-tag { display: inline-block; padding: 7px 18px; background: var(--shop-lavender); color: var(--shop-purple-deep); font-family: var(--shop-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: 999px; margin-bottom: 22px; } .shop-hero-title { font-family: var(--shop-font-heading); font-size: clamp(32px, 4.8vw, 52px); font-weight: 700; line-height: 1.1; color: var(--shop-purple-deep); margin: 0 0 18px; letter-spacing: -0.02em; } .shop-hero-accent { background: linear-gradient(135deg, var(--shop-pink) 0%, var(--shop-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .shop-hero-subtitle { font-size: 17px; line-height: 1.65; color: var(--shop-text-muted); margin: 0 0 28px; max-width: 100%; padding: 0 8px; } .shop-hero-chips { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; } .shop-hero-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: var(--shop-white); border: 1px solid var(--shop-border); border-radius: 999px; font-family: var(--shop-font-heading); font-size: 12px; font-weight: 600; color: var(--shop-purple-deep); box-shadow: var(--shop-shadow-sm); } .shop-hero-chip svg { stroke: var(--shop-pink); flex-shrink: 0; } /* ============================================= SHOP MAIN ============================================= */ .shop-main { position: relative; padding: 10px 24px 120px; background: linear-gradient(180deg, #ffffff 0%, var(--shop-cream) 100%); } .shop-main-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; } /* Products Header */ .shop-products-header { margin-bottom: 32px; } .shop-section-title { font-family: var(--shop-font-heading); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; color: var(--shop-purple-deep); margin: 0 0 8px; letter-spacing: -0.02em; } .shop-section-subtitle { font-size: 15px; color: var(--shop-text-muted); margin: 0; line-height: 1.6; } /* Product Cards Grid */ .shop-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; } .shop-product-card { background: var(--shop-white); border: 1px solid var(--shop-border); border-radius: var(--shop-radius-lg); overflow: hidden; box-shadow: var(--shop-shadow-sm); display: flex; flex-direction: column; transition: transform var(--shop-transition), box-shadow var(--shop-transition); } .shop-product-card:hover { transform: translateY(-5px); box-shadow: var(--shop-shadow-md); } .shop-product-img-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--shop-lavender-soft); overflow: hidden; } .shop-product-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--shop-transition); } .shop-product-card:hover .shop-product-img { transform: scale(1.04); } .shop-product-img-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(135deg, var(--shop-lavender-soft), var(--shop-cream)); color: var(--shop-text-muted); } .shop-product-img-placeholder span { font-family: var(--shop-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; } .shop-product-img-placeholder svg { stroke: var(--shop-lavender); } .shop-product-badge { position: absolute; top: 14px; left: 14px; font-family: var(--shop-font-heading); font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; z-index: 2; } .shop-product-badge--new { background: var(--shop-purple-deep); color: var(--shop-white); } .shop-product-badge--popular { background: var(--shop-pink); color: var(--shop-white); } .shop-product-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; gap: 8px; } .shop-product-category { font-family: var(--shop-font-heading); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--shop-pink); } .shop-product-name { font-family: var(--shop-font-heading); font-size: 16px; font-weight: 700; color: var(--shop-purple-deep); margin: 0; line-height: 1.3; letter-spacing: -0.01em; } .shop-product-desc { font-size: 13px; color: var(--shop-text-muted); line-height: 1.6; margin: 0; flex: 1; } .shop-product-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px dashed var(--shop-border); } .shop-product-price { font-family: var(--shop-font-heading); font-size: 18px; font-weight: 800; color: var(--shop-purple-deep); letter-spacing: -0.02em; } .shop-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: linear-gradient(135deg, var(--shop-purple-deep), var(--shop-pink)); color: var(--shop-white); border: none; border-radius: 999px; font-family: var(--shop-font-body); font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(72, 29, 109, 0.22); transition: all var(--shop-transition); white-space: nowrap; } .shop-add-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(72, 29, 109, 0.32); } .shop-add-btn--added { background: linear-gradient(135deg, #2e7d32, #388e3c) !important; box-shadow: 0 6px 18px rgba(46, 125, 50, 0.28) !important; } /* ============================================= HOW TO ORDER SECTION ============================================= */ .shop-how-section { margin-bottom: 0; } .shop-how-section-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .shop-how-section-titles { display: flex; flex-direction: column; gap: 5px; } .shop-how-section-tag { font-family: var(--shop-font-heading); font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--shop-pink); } .shop-how-section-heading { font-family: var(--shop-font-heading); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; color: var(--shop-purple-deep); margin: 0; letter-spacing: -0.02em; } .shop-how-section-sub { font-size: 14px; color: var(--shop-text-muted); margin: 0; text-align: right; line-height: 1.55; max-width: 340px; } .shop-how-grid { display: grid; grid-template-columns: repeat(4, 1fr) 1.7fr; gap: 14px; align-items: stretch; } .shop-how-card { background: var(--shop-white); border: 1px solid var(--shop-border); border-radius: var(--shop-radius-md); padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shop-shadow-sm); position: relative; overflow: hidden; transition: transform var(--shop-transition), box-shadow var(--shop-transition); } .shop-how-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--shop-purple-deep), var(--shop-pink)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .shop-how-card:not(.shop-how-qr-card):hover { transform: translateY(-4px); box-shadow: var(--shop-shadow-md); } .shop-how-card:not(.shop-how-qr-card):hover::after { transform: scaleX(1); } .shop-how-card-top { display: flex; align-items: center; justify-content: space-between; } .shop-how-card-num { font-family: var(--shop-font-heading); font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--shop-lavender); } .shop-how-card-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--shop-lavender-soft); border: 1px solid var(--shop-border); display: flex; align-items: center; justify-content: center; transition: background var(--shop-transition); } .shop-how-card-icon svg { stroke: var(--shop-purple-deep); } .shop-how-card:hover .shop-how-card-icon { background: var(--shop-lavender); } .shop-how-card-title { font-family: var(--shop-font-heading); font-size: 13.5px; font-weight: 700; color: var(--shop-purple-deep); margin: 0; line-height: 1.25; letter-spacing: -0.01em; } .shop-how-card-desc { font-size: 11.5px; color: var(--shop-text-muted); margin: 0; line-height: 1.6; flex: 1; } .shop-how-card-bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--shop-border); } .shop-how-big-num { font-family: var(--shop-font-heading); font-size: 52px; font-weight: 900; line-height: 1; letter-spacing: -3px; background: linear-gradient(135deg, var(--shop-lavender) 0%, var(--shop-border) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; user-select: none; } .shop-how-arrow-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--shop-lavender-soft); border: 1px solid var(--shop-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all var(--shop-transition); } .shop-how-arrow-icon svg { stroke: var(--shop-purple-deep); transition: transform var(--shop-transition); } .shop-how-card:hover .shop-how-arrow-icon { background: var(--shop-purple-deep); border-color: var(--shop-purple-deep); } .shop-how-card:hover .shop-how-arrow-icon svg { stroke: #fff; transform: translateX(2px); } .shop-how-check-icon { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--shop-purple-deep), var(--shop-pink)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .shop-how-check-icon svg { stroke: #fff; } /* QR Card */ .shop-how-qr-card { background: linear-gradient(160deg, var(--shop-purple-deep) 0%, #7B35B8 100%); border: none; padding: 20px; gap: 0; } .shop-how-qr-card::after { display: none; } .shop-how-qr-card:hover { transform: none; box-shadow: var(--shop-shadow-sm); } .shop-how-qr-inner { display: flex; flex-direction: column; height: 100%; gap: 14px; } .shop-how-qr-top { display: flex; align-items: flex-start; gap: 14px; } .shop-how-qr-tag { font-family: var(--shop-font-heading); font-size: 9.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 10px; flex: 1; white-space: nowrap; } .shop-how-qr-frame { width: 110px; height: 110px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 5px; box-shadow: 0 4px 16px rgba(0,0,0,0.22); flex-shrink: 0; } .shop-how-qr-img { width: 100px; height: 100px; object-fit: contain; border-radius: 5px; display: block; } .shop-how-qr-placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; color: rgba(255,255,255,0.45); } .shop-how-qr-placeholder svg { stroke: rgba(255,255,255,0.35); } .shop-how-qr-placeholder span { font-size: 9px; font-family: var(--shop-font-heading); } .shop-how-qr-bottom { display: flex; flex-direction: column; gap: 8px; flex: 1; } .shop-how-qr-uen { display: flex; align-items: center; gap: 8px; } .shop-how-qr-uen-label { font-family: var(--shop-font-heading); font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.50); } .shop-how-qr-uen-val { font-family: 'Courier New', Courier, monospace; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.20); padding: 3px 10px; border-radius: 5px; letter-spacing: 0.06em; } .shop-how-qr-apps { display: flex; flex-wrap: wrap; gap: 4px; } .shop-how-qr-apps span { font-size: 9px; padding: 3px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.20); color: rgba(255,255,255,0.72); background: rgba(255,255,255,0.10); font-family: var(--shop-font-heading); font-weight: 500; } .shop-how-qr-note { display: block; padding: 8px 10px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; font-size: 10.5px; line-height: 1.6; color: rgba(255,255,255,0.80); margin: 0; } .shop-how-qr-note svg { display: inline; vertical-align: middle; stroke: rgba(255,255,255,0.80); margin-right: 4px; position: relative; top: -1px; } .shop-how-qr-note strong { color: #fff; font-weight: 600; } /* ============================================= FLOATING CART FAB ============================================= */ .shop-cart-fab { position: fixed; bottom: 100px; right: 28px; width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--shop-purple-deep), var(--shop-pink)); color: var(--shop-white); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 28px rgba(72, 29, 109, 0.36); z-index: 900; transition: transform var(--shop-transition), box-shadow var(--shop-transition); } .shop-cart-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 36px rgba(72, 29, 109, 0.44); } .shop-cart-fab-count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 5px; background: var(--shop-pink); color: var(--shop-white); border-radius: 999px; font-family: var(--shop-font-heading); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--shop-white); box-sizing: border-box; } /* ============================================= CART DRAWER ============================================= */ .shop-cart-overlay { position: fixed; inset: 0; background: rgba(72, 29, 109, 0.28); z-index: 950; opacity: 0; pointer-events: none; transition: opacity var(--shop-transition); backdrop-filter: blur(2px); } .shop-cart-overlay.is-open { opacity: 1; pointer-events: all; } .shop-cart-drawer { position: fixed; top: 0; right: 0; width: 400px; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: var(--shop-white); border-left: 1px solid var(--shop-border); box-shadow: -12px 0 40px rgba(72, 29, 109, 0.14); z-index: 960; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--shop-transition); } .shop-cart-drawer.is-open { transform: translateX(0); } .shop-cart-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--shop-border); background: linear-gradient(135deg, var(--shop-cream), var(--shop-white)); flex-shrink: 0; } .shop-cart-title { display: flex; align-items: center; gap: 10px; font-family: var(--shop-font-heading); font-size: 18px; font-weight: 700; color: var(--shop-purple-deep); margin: 0; } .shop-cart-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--shop-border); background: var(--shop-white); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--shop-text-muted); transition: all var(--shop-transition); } .shop-cart-close:hover { background: var(--shop-lavender-soft); color: var(--shop-purple-deep); } .shop-cart-items { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; padding: 16px 24px; display: flex; flex-direction: column; gap: 4px; } .shop-cart-items::-webkit-scrollbar { width: 4px; } .shop-cart-items::-webkit-scrollbar-thumb { background: var(--shop-lavender); border-radius: 4px; } .shop-cart-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; color: var(--shop-text-muted); text-align: center; padding: 40px 0; } .shop-cart-empty svg { stroke: var(--shop-lavender); } .shop-cart-empty p { font-family: var(--shop-font-heading); font-size: 16px; font-weight: 600; color: var(--shop-purple-deep); margin: 0; } .shop-cart-empty span { font-size: 13px; } .shop-cart-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--shop-border); } .shop-cart-item:last-child { border-bottom: none; } .shop-cart-item-name { font-family: var(--shop-font-heading); font-size: 13px; font-weight: 600; color: var(--shop-purple-deep); margin: 0 0 4px; line-height: 1.3; } .shop-cart-item-price { font-size: 12px; color: var(--shop-text-muted); margin: 0; } .shop-cart-item-qty { display: flex; align-items: center; border: 1px solid var(--shop-border); border-radius: 999px; overflow: hidden; background: var(--shop-lavender-soft); } .shop-cart-item-qty button { width: 30px; height: 30px; border: none; background: transparent; color: var(--shop-purple-deep); font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--shop-transition); flex-shrink: 0; } .shop-cart-item-qty button:hover { background: var(--shop-lavender); } .shop-cart-item-qty span { font-family: var(--shop-font-heading); font-size: 13px; font-weight: 700; color: var(--shop-purple-deep); min-width: 24px; text-align: center; } .shop-cart-item-remove { width: 28px; height: 28px; border: 1px solid var(--shop-border); border-radius: 50%; background: var(--shop-white); color: var(--shop-text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--shop-transition); flex-shrink: 0; } .shop-cart-item-remove:hover { background: #FFEBEE; border-color: #E57373; color: #C62828; } .shop-cart-delivery, .shop-cart-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; font-size: 13.5px; flex-shrink: 0; } .shop-cart-delivery { border-top: 1px dashed var(--shop-border); color: var(--shop-text-muted); } .shop-cart-total { border-top: 1px solid var(--shop-border); font-family: var(--shop-font-heading); font-weight: 700; font-size: 16px; color: var(--shop-purple-deep); background: var(--shop-lavender-soft); } .shop-cart-actions { padding: 16px 24px; padding-bottom: max(80px, calc(env(safe-area-inset-bottom) + 70px)); flex-shrink: 0; } .shop-checkout-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; background: linear-gradient(135deg, var(--shop-purple-deep), var(--shop-pink)); color: var(--shop-white); border: none; border-radius: 999px; font-family: var(--shop-font-body); font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(72, 29, 109, 0.28); transition: all var(--shop-transition); } .shop-checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(72, 29, 109, 0.36); } .shop-checkout-btn svg { transition: transform var(--shop-transition); } .shop-checkout-btn:hover svg { transform: translateX(3px); } .shop-continue-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 28px; margin-top: 10px; background: #DB1B60; color: #FFFFFF; border: 1.5px solid #DB1B60; border-radius: 999px; font-family: var(--shop-font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--shop-transition); text-decoration: none; -webkit-tap-highlight-color: transparent; } @media (hover: hover) and (pointer: fine) { .shop-continue-btn:hover { background: var(--shop-lavender-soft); border-color: var(--shop-purple); color: var(--shop-purple); } } .shop-continue-btn:active { background: #c01555; border-color: #c01555; color: #FFFFFF; transform: scale(0.98); } .shop-continue-btn svg { stroke: currentColor; } /* ══════════════════════════════════════════════════════ CHECKOUT MODAL ══════════════════════════════════════════════════════ */ .shop-modal-overlay { position: fixed; inset: 0; background: rgba(72, 29, 109, 0.45); z-index: 970; opacity: 0; pointer-events: none; transition: opacity var(--shop-transition); backdrop-filter: blur(4px); } .shop-modal-overlay.is-open { opacity: 1; pointer-events: all; } .shop-checkout-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 560px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 64px); background: var(--shop-white); border-radius: var(--shop-radius-lg); box-shadow: var(--shop-shadow-lg); z-index: 980; opacity: 0; pointer-events: none; transition: all var(--shop-transition); display: flex; flex-direction: column; overflow: hidden; } .shop-checkout-modal.is-open { opacity: 1; pointer-events: all; transform: translate(-50%, -50%) scale(1); } .shop-modal-step { display: flex; flex-direction: column; min-height: 0; flex: 1; max-height: calc(100dvh - 64px); } .shop-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--shop-border); background: linear-gradient(135deg, var(--shop-cream), var(--shop-white)); flex-shrink: 0; position: relative; overflow: hidden; min-width: 0; } .shop-modal-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--shop-purple-deep), var(--shop-pink)); } .shop-modal-title-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .shop-modal-step-badge { font-family: var(--shop-font-heading); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--shop-pink); } .shop-modal-title-wrap h3 { font-family: var(--shop-font-heading); font-size: 18px; font-weight: 700; color: var(--shop-purple-deep); margin: 0; overflow-wrap: break-word; word-break: break-word; min-width: 0; } .shop-modal-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--shop-border); background: var(--shop-white); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--shop-text-muted); flex-shrink: 0; transition: all var(--shop-transition); } .shop-modal-close:hover { background: var(--shop-lavender-soft); color: var(--shop-purple-deep); } .shop-modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; padding: 20px 24px; } .shop-modal-body::-webkit-scrollbar { width: 4px; } .shop-modal-body::-webkit-scrollbar-thumb { background: var(--shop-lavender); border-radius: 4px; } /* Modal Step 1 Form */ .shop-modal-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .shop-modal-field { display: flex; flex-direction: column; gap: 6px; } .shop-modal-field--full { grid-column: 1 / -1; } .shop-modal-field label { font-family: var(--shop-font-body); font-size: 12.5px; font-weight: 500; color: var(--shop-purple-deep); } .shop-modal-field input, .shop-modal-field textarea { font-family: var(--shop-font-body); font-size: 13.5px; color: var(--shop-text); background: var(--shop-cream); border: 1.5px solid var(--shop-border); border-radius: var(--shop-radius-sm); padding: 11px 13px; outline: none; width: 100%; transition: all var(--shop-transition); resize: vertical; } .shop-modal-field input::placeholder, .shop-modal-field textarea::placeholder { color: #B8A8C5; } .shop-modal-field input:focus, .shop-modal-field textarea:focus { border-color: var(--shop-purple); background: var(--shop-white); box-shadow: 0 0 0 3px rgba(110, 44, 161, 0.10); } /* Modal Step 2 PayNow */ .shop-paynow-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .shop-paynow-amount-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 36px; background: linear-gradient(135deg, var(--shop-lavender-soft), var(--shop-cream)); border: 1px solid var(--shop-border); border-radius: var(--shop-radius-md); width: 100%; } .shop-paynow-label { font-family: var(--shop-font-heading); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--shop-text-muted); } .shop-paynow-amount { font-family: var(--shop-font-heading); font-size: 32px; font-weight: 800; color: var(--shop-purple-deep); letter-spacing: -0.03em; } .shop-paynow-qr-frame { width: 200px; height: 200px; background: var(--shop-white); border: 2px solid var(--shop-border); border-radius: 18px; display: flex; align-items: center; justify-content: center; padding: 10px; box-shadow: var(--shop-shadow-sm); } .shop-paynow-qr-img { width: 180px; height: 180px; object-fit: contain; border-radius: 8px; display: block; } .shop-paynow-qr-placeholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--shop-text-muted); text-align: center; } .shop-paynow-qr-placeholder svg { stroke: var(--shop-lavender); } .shop-paynow-qr-placeholder span { font-size: 12px; font-weight: 600; font-family: var(--shop-font-heading); } .shop-paynow-qr-placeholder small { font-size: 10px; color: var(--shop-pink); font-family: monospace; } .shop-paynow-hint { font-size: 13.5px; color: var(--shop-text-muted); margin: 0; } .shop-paynow-apps { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .shop-paynow-apps span { font-size: 11px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--shop-border); color: var(--shop-text-muted); background: var(--shop-lavender-soft); font-family: var(--shop-font-heading); font-weight: 500; } .shop-paynow-uen { display: flex; flex-direction: column; align-items: center; gap: 4px; } .shop-paynow-uen-label { font-size: 11px; color: var(--shop-text-muted); font-family: var(--shop-font-heading); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; } .shop-paynow-uen-val { font-family: 'Courier New', Courier, monospace; font-size: 15px; background: var(--shop-lavender); padding: 4px 14px; border-radius: 6px; letter-spacing: 0.05em; font-weight: 700; color: var(--shop-purple-deep); } .shop-paynow-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; background: var(--shop-lavender-soft); border: 1px solid var(--shop-border); border-radius: var(--shop-radius-sm); font-size: 12px; color: var(--shop-text-muted); line-height: 1.5; text-align: left; width: 100%; margin: 0; } .shop-paynow-note svg { stroke: var(--shop-purple-deep); flex-shrink: 0; margin-top: 1px; } /* Modal Step 3 Confirm */ .shop-confirm-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .shop-confirm-icon { width: 60px; height: 60px; border-radius: 50%; background: #E8F5E9; border: 2px solid #81C784; display: flex; align-items: center; justify-content: center; color: #1B5E20; flex-shrink: 0; } .shop-confirm-heading { font-family: var(--shop-font-heading); font-size: 18px; font-weight: 700; color: var(--shop-purple-deep); margin: 0; } .shop-confirm-text { font-size: 13px; color: var(--shop-text-muted); line-height: 1.65; margin: 0; max-width: 420px; } .shop-confirm-summary { display: table; width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; box-sizing: border-box; background: var(--shop-cream); border: 1px solid var(--shop-border); border-radius: var(--shop-radius-md); padding: 14px 16px; overflow: hidden; } .shop-confirm-row { display: table-row; font-size: 12.5px; color: var(--shop-text-muted); } .shop-confirm-row span:first-child, .shop-confirm-row span:last-child { display: table-cell; padding: 4px 0; vertical-align: top; } .shop-confirm-row span:first-child { overflow-wrap: break-word; word-break: break-word; padding-right: 10px; } .shop-confirm-row span:last-child { font-weight: 600; color: var(--shop-text); text-align: right; width: 95px; white-space: nowrap; } .shop-confirm-row--address span:last-child { white-space: normal; overflow-wrap: break-word; word-break: break-word; width: auto; } .shop-confirm-row--email span:last-child { white-space: normal; word-break: break-all; width: auto; } .shop-confirm-row--total { font-family: var(--shop-font-heading); font-weight: 700; font-size: 14px; color: var(--shop-purple-deep); border-top: 1px solid var(--shop-border); } .shop-confirm-row--total span:first-child { padding-top: 10px; } .shop-confirm-row--total span:last-child { color: var(--shop-purple-deep); white-space: nowrap; width: 95px; padding-top: 10px; } .shop-confirm-divider { display: none; } .shop-confirm-row--item { display: block !important; padding: 6px 0; border-bottom: 1px dashed var(--shop-border); } .shop-confirm-row--item:last-of-type { border-bottom: none; } .shop-confirm-row--item span:first-child { display: block; width: 100%; overflow-wrap: break-word; word-break: break-word; font-size: 12px; color: var(--shop-text-muted); padding-right: 0; padding-bottom: 2px; } .shop-confirm-row--item span:last-child { display: block; width: 100%; text-align: right; font-weight: 700; font-size: 13px; color: var(--shop-purple-deep); white-space: nowrap; } .shop-confirm-status-wrap { width: 100%; display: flex; flex-direction: column; gap: 10px; } .shop-confirm-status-row { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--shop-lavender-soft); border: 1px solid var(--shop-border); border-radius: var(--shop-radius-sm); } .shop-confirm-status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: background 0.4s ease; } .shop-confirm-status-dot--pending { background: #FFA726; animation: shop-pulse-dot 1s infinite; } @keyframes shop-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } .shop-confirm-status-dot--done { background: #43A047; animation: none; } .shop-confirm-status-dot--fail { background: #E53935; animation: none; } .shop-confirm-status-label { font-family: var(--shop-font-body); font-size: 13px; color: var(--shop-text-muted); } .shop-confirm-reply { font-size: 12px; color: var(--shop-text-muted); margin: 0; line-height: 1.55; padding: 10px 14px; background: #FFF8E1; border: 1px solid #FFE082; border-radius: var(--shop-radius-sm); width: 100%; text-align: left; } /* Modal Footer */ .shop-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 16px 24px; padding-bottom: max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--shop-border); background: var(--shop-cream); flex-shrink: 0; } .shop-modal-footer--center { justify-content: center; } .shop-modal-btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: linear-gradient(135deg, var(--shop-purple-deep), var(--shop-pink)); color: var(--shop-white); border: none; border-radius: 999px; font-family: var(--shop-font-body); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(72, 29, 109, 0.26); transition: all var(--shop-transition); } .shop-modal-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.34); } .shop-modal-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .shop-modal-btn-secondary { padding: 13px 22px; background: var(--shop-white); color: var(--shop-text-muted); border: 1.5px solid var(--shop-border); border-radius: 999px; font-family: var(--shop-font-body); font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--shop-transition); } .shop-modal-btn-secondary:hover { border-color: var(--shop-purple); color: var(--shop-purple-deep); background: var(--shop-lavender-soft); } .shop-modal-btn-done { padding: 13px 32px; background: var(--shop-lavender); color: var(--shop-purple-deep); border: 1.5px solid var(--shop-border); border-radius: 999px; font-family: var(--shop-font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--shop-transition); } .shop-modal-btn-done:hover { background: var(--shop-purple-deep); color: var(--shop-white); border-color: var(--shop-purple-deep); } /* ============================================= MOBILE NAV — Book button fix only Active link highlight is handled by style.css ============================================= */ .mobile-nav a.btn-book, .mobile-nav a.btn-book.active { background: linear-gradient(135deg, #481D6D, #DB1B60) !important; color: #fff !important; border-radius: 999px !important; } /* Hide WhatsApp when cart OR modal is open */ body.cart-open .spkz-wa, body.modal-open .spkz-wa { display: none !important; } /* ══════════════════════════════════════════════════════ RESPONSIVE — Tablet ══════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .shop-hero { padding: 72px 24px 40px; } .shop-main { padding: 8px 24px 96px; } .shop-products-grid { grid-template-columns: repeat(2, 1fr); } .shop-how-grid { grid-template-columns: repeat(2, 1fr); } .shop-how-qr-card { grid-column: 1 / -1; } .shop-how-qr-inner { flex-direction: row; gap: 20px; } .shop-how-qr-top { flex-direction: row; align-items: flex-start; gap: 16px; flex: 1; } .shop-how-qr-bottom { flex: 1; } .shop-how-section-sub { text-align: left; } } @media (max-width: 768px) { .shop-cart-drawer { width: 100vw; } .shop-modal-form { grid-template-columns: 1fr; } .shop-modal-field--full { grid-column: 1; } .shop-how-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .shop-how-qr-card { grid-column: 1 / -1; } .shop-how-qr-inner { flex-direction: row; gap: 16px; } .shop-how-qr-top { flex-direction: row; align-items: flex-start; gap: 14px; flex: 1; } .shop-how-qr-bottom { flex: 1; } .shop-how-section-header { flex-direction: column; align-items: flex-start; gap: 4px; } .shop-how-section-sub { text-align: left; max-width: 100%; } } /* ══════════════════════════════════════════════════════ MOBILE MODAL — True Bottom Sheet (≤ 640px) ══════════════════════════════════════════════════════ */ @media (max-width: 640px) { .shop-modal-overlay { z-index: 1090; } .shop-checkout-modal { position: fixed; top: var(--shop-header-h, 80px); bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; height: calc(100dvh - var(--shop-header-h, 80px)); max-height: calc(100dvh - var(--shop-header-h, 80px)); transform: translateY(100%) !important; border-radius: 20px 20px 0 0; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); opacity: 1 !important; overflow: hidden; display: flex; flex-direction: column; z-index: 1100; } .shop-checkout-modal.is-open { transform: translateY(0) !important; opacity: 1 !important; pointer-events: all; } .shop-modal-step { display: flex; flex-direction: column; flex: 1; min-height: 0; max-height: 100%; overflow: hidden; } .shop-modal-header { padding: 18px 16px 14px; flex-shrink: 0; } .shop-modal-title-wrap h3 { font-size: 16px; } .shop-modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; padding: 16px; } .shop-modal-footer { flex-shrink: 0; padding: 12px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); flex-direction: column-reverse; gap: 10px; } .shop-modal-btn-primary, .shop-modal-btn-secondary, .shop-modal-btn-done { width: 100%; justify-content: center; } .shop-modal-form { grid-template-columns: 1fr; gap: 14px; } .shop-modal-field--full { grid-column: 1; } .shop-modal-field input, .shop-modal-field textarea { padding: 10px 12px; font-size: 16px; } .shop-confirm-summary { padding: 12px; } .shop-confirm-row { font-size: 11.5px; } .shop-confirm-heading { font-size: 16px; } .shop-confirm-text { font-size: 12px; } .shop-confirm-status-row { padding: 10px 12px; } .shop-confirm-status-label { font-size: 12px; } .shop-paynow-amount { font-size: 26px; } .shop-paynow-qr-frame { width: 160px; height: 160px; } .shop-paynow-qr-img { width: 140px; height: 140px; } .shop-hero { padding: 60px 18px 32px; } .shop-hero-title { font-size: 30px; } .shop-hero-subtitle { font-size: 14px; padding: 0 4px; } .shop-main { padding: 8px 18px 80px; } .shop-products-grid { grid-template-columns: 1fr; gap: 18px; } .shop-how-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .shop-how-qr-card { grid-column: 1 / -1; } .shop-how-qr-inner { flex-direction: column; } .shop-how-qr-top { flex-direction: column; align-items: center; text-align: center; } .shop-how-qr-uen { justify-content: center; } .shop-how-qr-apps { justify-content: center; } .shop-how-big-num { font-size: 40px; } .shop-how-card { padding: 14px 12px; } .shop-cart-fab { bottom: 90px; right: 18px; width: 54px; height: 54px; } } @media (max-width: 380px) { .shop-hero-title { font-size: 26px; } .shop-hero-chips { flex-direction: column; align-items: center; } .shop-product-footer { flex-direction: column; align-items: flex-start; gap: 10px; } .shop-add-btn { width: 100%; justify-content: center; } .shop-how-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .shop-reveal, .shop-reveal-up, .shop-reveal-left { opacity: 1 !important; transform: none !important; } .shop-confirm-status-dot--pending { animation: none !important; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================= COURSE REGISTRATION PAGE Paste this block at the bottom of style.css REPLACE your existing creg- block entirely. KEY FIX: variables are scoped to .creg-hero and .creg-main — NOT on :root — so they cannot conflict with any other page's tokens. All classes prefixed .creg- ============================================= */ .creg-hero, .creg-main { --creg-purple-deep: #481D6D; --creg-purple: #6E2CA1; --creg-pink: #DB1B60; --creg-lavender: #EBD0F3; --creg-lavender-soft: #F5E5F9; --creg-cream: #FFF5F8; --creg-white: #FFFFFF; --creg-text: #2A1A3A; --creg-text-muted: #6B5B7A; --creg-border: #EFE3F4; --creg-error: #DB1B60; --creg-success-bg: rgba(110, 44, 161, 0.08); --creg-success-border:#EBD0F3; --creg-error-bg: rgba(219, 27, 96, 0.08); --creg-error-border: rgba(219, 27, 96, 0.22); --creg-font-heading: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --creg-font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --creg-radius-lg: 24px; --creg-radius-md: 16px; --creg-radius-sm: 10px; --creg-radius-pill: 999px; --creg-shadow-sm: 0 4px 14px rgba(72, 29, 109, 0.06); --creg-shadow-md: 0 12px 32px rgba(72, 29, 109, 0.10); --creg-shadow-lg: 0 24px 60px rgba(72, 29, 109, 0.16); --creg-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); font-family: var(--creg-font-body); color: var(--creg-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .creg-hero *, .creg-main *, .creg-hero *::before, .creg-main *::before, .creg-hero *::after, .creg-main *::after { box-sizing: border-box; } /* ── HERO ── */ .creg-hero { position: relative; padding: 96px 24px 44px; background: linear-gradient(180deg, var(--creg-cream) 0%, #FFFFFF 100%); text-align: center; overflow: hidden; } .creg-hero::before, .creg-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .creg-hero::before { width: 420px; height: 420px; background: radial-gradient(circle, rgba(235, 208, 243, 0.5) 0%, transparent 70%); top: -120px; left: -100px; } .creg-hero::after { width: 340px; height: 340px; background: radial-gradient(circle, rgba(219, 27, 96, 0.07) 0%, transparent 70%); bottom: -80px; right: -60px; } .creg-hero-container { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; } .creg-hero-tag { display: inline-block; padding: 7px 18px; background: var(--creg-lavender); color: var(--creg-purple-deep); font-family: var(--creg-font-heading); font-size: 11.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border-radius: var(--creg-radius-pill); margin-bottom: 22px; } .creg-hero-title { font-family: var(--creg-font-heading); font-size: clamp(32px, 4.8vw, 52px); font-weight: 700; line-height: 1.1; color: var(--creg-purple-deep); margin: 0 0 18px; letter-spacing: -0.02em; } .creg-hero-accent { background: linear-gradient(135deg, var(--creg-pink) 0%, var(--creg-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 700; } .creg-hero-subtitle { font-size: 17px; line-height: 1.65; color: var(--creg-text-muted); margin: 0 auto; max-width: 600px; } /* ── MAIN ── */ .creg-main { position: relative; padding: 10px 24px 120px; background: linear-gradient(180deg, #FFFFFF 0%, var(--creg-cream) 100%); } .creg-main-container { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; } /* ── FORM CARD ── */ .creg-form-card { position: relative; background: var(--creg-white); border: 1px solid var(--creg-border); border-radius: var(--creg-radius-lg); padding: 44px 42px; box-shadow: var(--creg-shadow-md); overflow: hidden; } .creg-form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--creg-purple-deep), var(--creg-pink)); } .creg-form-card-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 32px; } .creg-form-card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--creg-radius-sm); background: var(--creg-lavender-soft); color: var(--creg-purple); border: 1px solid var(--creg-lavender); } .creg-form-title { font-family: var(--creg-font-heading); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; color: var(--creg-purple-deep); margin: 0 0 6px; letter-spacing: -0.01em; } .creg-form-subtitle { font-size: 13.5px; color: var(--creg-text-muted); line-height: 1.5; margin: 0; } .creg-req { color: var(--creg-pink); margin-left: 2px; } .creg-optional { font-weight: 400; font-size: 11.5px; color: var(--creg-text-muted); margin-left: 4px; } /* ── FORM LAYOUT ── */ .creg-form { display: flex; flex-direction: column; gap: 22px; } .creg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .creg-form-row--single { grid-template-columns: 1fr; } .creg-form-group { display: flex; flex-direction: column; gap: 7px; } .creg-form-group label, .creg-group-label { font-family: var(--creg-font-body); font-size: 13.5px; font-weight: 500; color: var(--creg-purple-deep); letter-spacing: 0.2px; display: block; } /* ── INPUTS ── */ .creg-input-wrap { position: relative; display: flex; align-items: center; } .creg-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--creg-text-muted); pointer-events: none; display: flex; align-items: center; transition: color var(--creg-transition); } .creg-input-wrap input[type="text"], .creg-input-wrap input[type="email"], .creg-input-wrap input[type="tel"], .creg-input-wrap input[type="date"], .creg-input-wrap input[type="number"] { font-family: var(--creg-font-body); font-size: 14px; color: var(--creg-text); background: var(--creg-cream); border: 1.5px solid var(--creg-border); border-radius: var(--creg-radius-sm); padding: 13px 16px 13px 42px; outline: none; transition: all var(--creg-transition); width: 100%; appearance: none; -webkit-appearance: none; } .creg-input-wrap input::placeholder { color: #B8A8C5; } .creg-input-wrap input:focus { border-color: var(--creg-purple); background: var(--creg-white); box-shadow: 0 0 0 3px rgba(110, 44, 161, 0.10); } .creg-input-wrap:focus-within .creg-input-icon { color: var(--creg-purple); } .creg-input-wrap input[type="date"] { cursor: pointer; } .creg-input-wrap input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(20%) sepia(60%) saturate(2000%) hue-rotate(265deg) brightness(50%); cursor: pointer; opacity: 0.7; transition: opacity var(--creg-transition); } .creg-input-wrap input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; } .creg-input-wrap input[type="number"]::-webkit-inner-spin-button, .creg-input-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .creg-input-wrap input[type="number"] { -moz-appearance: textfield; } .creg-input-wrap input.creg-input-error { border-color: var(--creg-error); background: rgba(219, 27, 96, 0.03); box-shadow: 0 0 0 3px rgba(219, 27, 96, 0.10); } /* ── FIELD ERRORS ── */ .creg-field-error { display: none; font-size: 12px; color: var(--creg-error); font-weight: 500; margin-top: 2px; } .creg-field-error.visible { display: block; animation: creg-shake 0.35s ease; } @keyframes creg-shake { 0% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { transform: translateX(0); } } /* ── COURSE CARDS ── */ .creg-course-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 6px; } .creg-course-grid.creg-grid-error .creg-course-card-inner { border-color: rgba(219, 27, 96, 0.35); } .creg-course-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .creg-course-card { cursor: pointer; display: block; } .creg-course-card-inner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--creg-border); border-radius: var(--creg-radius-sm); background: var(--creg-cream); transition: all var(--creg-transition); position: relative; user-select: none; min-height: 64px; } .creg-course-card:hover .creg-course-card-inner { border-color: var(--creg-lavender); background: var(--creg-lavender-soft); box-shadow: var(--creg-shadow-sm); } .creg-course-card input[type="radio"]:checked + .creg-course-card-inner { border-color: var(--creg-purple); background: var(--creg-lavender-soft); box-shadow: 0 0 0 3px rgba(110, 44, 161, 0.10); } .creg-course-card input[type="radio"]:focus-visible + .creg-course-card-inner { box-shadow: 0 0 0 3px rgba(110, 44, 161, 0.22); } .creg-course-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--creg-lavender); color: var(--creg-purple); flex-shrink: 0; transition: all var(--creg-transition); } .creg-course-card input[type="radio"]:checked + .creg-course-card-inner .creg-course-icon { background: linear-gradient(135deg, var(--creg-pink) 0%, var(--creg-purple) 100%); color: var(--creg-white); } .creg-course-name { font-family: var(--creg-font-body); font-size: 13.5px; font-weight: 500; color: var(--creg-text); line-height: 1.35; flex: 1; transition: color var(--creg-transition); } .creg-course-card input[type="radio"]:checked + .creg-course-card-inner .creg-course-name { color: var(--creg-purple-deep); font-weight: 600; } .creg-course-check { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--creg-border); color: transparent; flex-shrink: 0; transition: all var(--creg-transition); } .creg-course-card input[type="radio"]:checked + .creg-course-card-inner .creg-course-check { background: linear-gradient(135deg, var(--creg-pink) 0%, var(--creg-purple) 100%); color: var(--creg-white); box-shadow: 0 3px 8px rgba(219, 27, 96, 0.28); } /* ── SUBMIT BUTTON ── */ .creg-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 36px; margin-top: 8px; background: linear-gradient(135deg, var(--creg-pink) 0%, var(--creg-purple) 100%); color: var(--creg-white); font-family: var(--creg-font-body); font-size: 15px; font-weight: 600; border: none; border-radius: var(--creg-radius-pill); cursor: pointer; box-shadow: 0 8px 24px rgba(219, 27, 96, 0.30); transition: all var(--creg-transition); align-self: flex-start; letter-spacing: 0.2px; } .creg-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(72, 29, 109, 0.30); } .creg-submit-btn:active { transform: translateY(0); } .creg-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .creg-submit-btn svg { transition: transform var(--creg-transition); } .creg-submit-btn:hover svg { transform: translateX(3px); } /* ── FORM STATUS ── */ .creg-form-status { font-size: 14px; font-weight: 500; line-height: 1.55; border-radius: var(--creg-radius-sm); opacity: 0; max-height: 0; overflow: hidden; transition: all var(--creg-transition); } .creg-form-status--success { background: var(--creg-success-bg); color: var(--creg-purple-deep); border: 1px solid var(--creg-success-border); padding: 14px 18px; opacity: 1; max-height: 200px; } .creg-form-status--error { background: var(--creg-error-bg); color: var(--creg-error); border: 1px solid var(--creg-error-border); padding: 14px 18px; opacity: 1; max-height: 200px; } /* ── RESPONSIVE ── */ @media (max-width: 1024px) { .creg-hero { padding: 72px 24px 36px; } .creg-main { padding: 8px 24px 96px; } .creg-form-card { padding: 38px 32px; } } @media (max-width: 640px) { .creg-hero { padding: 64px 18px 30px; } .creg-hero-title { font-size: 30px; } .creg-hero-subtitle { font-size: 15px; } .creg-main { padding: 8px 18px 80px; } .creg-form-card { padding: 28px 20px; } .creg-form-card-header { gap: 12px; } .creg-form-card-icon { width: 42px; height: 42px; } .creg-form-row { grid-template-columns: 1fr; gap: 16px; } .creg-course-grid { grid-template-columns: 1fr; gap: 10px; } .creg-course-card-inner { padding: 12px 14px; min-height: 56px; } .creg-course-icon { width: 32px; height: 32px; } .creg-course-name { font-size: 13px; } .creg-submit-btn { width: 100%; align-self: stretch; justify-content: center; padding: 15px 24px; } } @media (max-width: 380px) { .creg-hero-title { font-size: 26px; } .creg-form-card { padding: 24px 16px; } .creg-input-wrap input[type="text"], .creg-input-wrap input[type="email"], .creg-input-wrap input[type="tel"], .creg-input-wrap input[type="date"], .creg-input-wrap input[type="number"] { font-size: 13.5px; } } @media (prefers-reduced-motion: reduce) { .creg-hero *, .creg-main *, .creg-hero *::before, .creg-main *::before, .creg-hero *::after, .creg-main *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } @keyframes creg-shake { 0%, 100% { transform: translateX(0); } } }