/* ===================================================================== Sayed Muhammad Abu Bakr — Portfolio Theme: OAT (#F0E6DA) + ROYAL BLUE (#144D9E) + MUSTARD (#F9A20B) Arabic font: Aref Ruqaa · Latin font: Poppins ===================================================================== */ /* Fonts load via the tag in each page's (no render-blocking @import). */ :root{ --oat:#DCE6F5; --oat-light:#F7F0E7; --oat-lighter:#F6F9FE; --oat-dark:#E4D6C4; --olive:#144D9E; --olive-dark:#0F3B7A; --olive-deep:#0A2C5C; --olive-soft:#3E6FBE; --heading:#0F3B7A; --body:#46506A; --muted:#6B7793; --logo:#144D9E; --mustard:#F9A20B; --royal:#144D9E; --card:#FFFFFF; --card-soft:#EAF1FB; --border:rgba(20,77,158,.14); --border-strong:rgba(20,77,158,.28); --shadow:0 14px 34px rgba(20,77,158,.14); --shadow-sm:0 6px 16px rgba(20,77,158,.10); --grad:linear-gradient(135deg,#F0E6DA 0%,#F7F0E7 55%,#ECE2D2 100%); --radius:18px; --radius-lg:24px; --maxw:1180px; } * { margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; scroll-padding-top:84px; background:#ffffff; } body{ font-family:'Poppins',sans-serif; background:transparent; background-attachment:fixed; color:var(--body); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Poppins',sans-serif; color:var(--heading); font-weight:700; line-height:1.2; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } .ar,.basmala,.tl-arabic,.mark,.ded-ar{ font-family:'Aref Ruqaa',serif; } /* ---- Background blobs (subtle olive/oat) ---- */ .bg-blobs{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; } .bg-blobs span{ position:absolute; filter:blur(54px); opacity:.32; animation:blobFloat 26s ease-in-out infinite; } .bg-blobs span:nth-child(1){ width:500px;height:500px; background:radial-gradient(circle at 32% 30%,#5E86D0,#144D9E); border-radius:42% 58% 63% 37%/45% 42% 58% 55%; top:-150px; left:-130px; } .bg-blobs span:nth-child(2){ width:430px;height:430px; background:radial-gradient(circle at 60% 40%,#F9A20B,rgba(249,162,11,0)); border-radius:60% 40% 47% 53%/55% 58% 42% 45%; bottom:-130px; right:-110px; opacity:.35; animation-delay:-7s; } .bg-blobs span:nth-child(3){ width:380px;height:380px; background:radial-gradient(circle at 50% 50%,#3E6FBE,rgba(62,111,190,0)); border-radius:50% 50% 55% 45%/52% 48% 52% 48%; top:42%; right:26%; opacity:.30; animation-delay:-13s; } @keyframes blobFloat{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(22px,-26px) scale(1.06); } 66%{ transform:translate(-18px,18px) scale(.95); } } /* ---- Background ink-splash vectors (mustard + royal) ---- */ .bg-blobs .ink-wrap{ position:absolute; will-change:transform; pointer-events:none; } .bg-blobs .ink{ display:block; width:100%; height:auto; animation:inkFloat 26s ease-in-out infinite; } .bg-blobs .ink-a{ width:230px; color:var(--mustard); opacity:.24; top:9%; left:-46px; } .bg-blobs .ink-b{ width:320px; color:#3E6FBE; opacity:.22; bottom:-70px; right:-56px; } .bg-blobs .ink-b .ink{ animation-delay:-9s; } .bg-blobs .ink-c{ width:150px; color:var(--mustard); opacity:.20; top:44%; right:13%; } .bg-blobs .ink-c .ink{ animation-delay:-15s; } @keyframes inkFloat{ 0%,100%{ transform:translate(0,0) rotate(0deg); } 50%{ transform:translate(16px,-22px) rotate(9deg); } } /* Mobile: pause heavy background motion + lighten blur for smooth scrolling */ @media (max-width:760px){ .bg-blobs span{ filter:blur(38px); animation:none; } .bg-blobs .ink{ animation:none; } } /* ---- Layout ---- */ .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; } .section{ padding:84px 0; position:relative; } .section-head{ max-width:720px; margin:0 auto 52px; text-align:center; } .eyebrow{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--olive); background:var(--card-soft); padding:7px 16px; border-radius:30px; margin-bottom:16px; } .section-head h2{ font-size:clamp(28px,4vw,40px); margin-bottom:14px; } .section-head p{ color:var(--muted); font-size:16px; } .basmala{ font-size:24px; color:var(--olive); margin:10px 0; direction:rtl; } /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Poppins',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.2px; padding:10px 32px; border-radius:30px; border:0; cursor:pointer; transition:.28s ease; text-align:center; line-height:1.4; } /* Unified simple outlined buttons (permanent border, site-wide) */ .btn.solid,.btn.primary,.btn.light,.btn.secondary{ background:transparent; color:var(--royal); border:1.4px solid var(--royal); box-shadow:none; } .btn.solid:hover,.btn.primary:hover,.btn.light:hover,.btn.secondary:hover{ background:var(--royal); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm); } .btn.fill-royal{ background:var(--royal); color:#fff; border:1.4px solid var(--royal); box-shadow:0 4px 14px rgba(20,77,158,.25); } .btn.fill-royal:hover{ background:#0F3B7A; border-color:#0F3B7A; color:#fff; transform:translateY(-2px); box-shadow:0 6px 18px rgba(15,59,122,.32); } .btn.block{ width:100%; } .btn.on-blue{ background:transparent; color:#fff; border-color:#fff; } .btn.on-blue:hover{ background:#fff; color:var(--royal); } /* ---- Navbar (slim) ---- */ .nav{ position:fixed; top:0; left:0; right:0; z-index:100; transition:.3s ease; } .nav-inner{ display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:12px 30px 12px 18px; } .nav.scrolled .nav-inner{ padding:8px 30px 8px 18px; } .nav{ background:var(--royal); border-bottom:1px solid transparent; } .nav.scrolled{ background:var(--royal); border-bottom:1px solid rgba(255,255,255,.16); box-shadow:0 4px 20px rgba(10,44,92,.28); } .brand{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:18px; color:#fff; } .brand-logo{ height:46px; width:auto; display:block; transition:.3s ease; } .nav.scrolled .brand-logo{ height:40px; } .footer .brand-logo{ height:60px; margin:0 auto; } .brand .mark{ width:32px; height:32px; display:grid; place-items:center; background:var(--royal); color:#fff; border-radius:9px; font-size:20px; line-height:1; padding-bottom:2px; } .nav-links{ display:flex; align-items:center; gap:6px; list-style:none; } .nav-links > li > a{ display:inline-flex; align-items:center; gap:5px; padding:7px 18px; border-radius:30px; font-size:14.5px; font-weight:600; color:#fff; border:1.3px solid transparent; background:transparent; transition:.2s ease; } .nav-links > li > a:hover{ color:#fff; background:transparent; border-color:rgba(255,255,255,.9); } .nav-cta{ background:var(--mustard)!important; color:var(--royal)!important; padding:7px 20px!important; border-radius:30px!important; border:1.3px solid var(--mustard)!important; font-weight:700!important; box-shadow:none!important; } .nav-cta:hover{ background:#ffb22e!important; border-color:#ffb22e!important; box-shadow:none!important; } /* dropdown */ .dropdown{ position:relative; } .dropdown-menu{ position:absolute; top:calc(100% + 8px); left:0; min-width:190px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); list-style:none; padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s ease; } .dropdown.open .dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); } .dropdown-menu li a{ display:block; padding:9px 13px; border-radius:9px; font-size:14px; font-weight:600; color:var(--body); } .dropdown-menu li a:hover{ background:var(--card-soft); color:var(--olive); } .hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; } .hamburger span{ width:24px; height:2.4px; background:#fff; border-radius:2px; transition:.3s; } /* ---- Hero ---- */ .hero{ padding:130px 0 80px; position:relative; } .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center; } .hero-title{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(48px,7.2vw,90px); line-height:.95; letter-spacing:1px; text-transform:uppercase; margin-bottom:18px; color:var(--heading); } .role-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px; } .chip{ font-size:13px; font-weight:600; color:var(--olive); background:var(--card-soft); padding:7px 14px; border-radius:30px; transition:.3s ease; } .hero-sub{ font-size:16.5px; color:var(--body); max-width:540px; margin-bottom:26px; } .cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px; } .socials{ display:flex; gap:12px; } .social-icon{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--card); border:1.5px solid var(--border); color:var(--olive); transition:.25s ease; } .social-icon svg{ width:20px; height:20px; } .social-icon:hover{ background:var(--olive); color:var(--oat-lighter); transform:translateY(-3px); box-shadow:var(--shadow-sm); } /* hero media */ .hero-media{ display:flex; justify-content:center; } .hero-frame{ position:relative; width:100%; max-width:410px; aspect-ratio:1/1; border-radius:var(--radius-lg); overflow:hidden; border:6px solid var(--card); box-shadow:var(--shadow); background:var(--card-soft); } .hero-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; } .hero-frame img.active{ opacity:1; } .float-chip{ position:absolute; z-index:3; display:flex; align-items:center; gap:7px; background:rgba(252,248,242,.92); backdrop-filter:blur(6px); padding:9px 14px; border-radius:30px; font-size:13px; font-weight:700; color:var(--olive); box-shadow:var(--shadow-sm); border:1px solid var(--border); } .float-chip .dot{ width:9px; height:9px; border-radius:50%; background:var(--olive); display:inline-block; } .float-chip.tl{ top:16px; left:16px; } .float-chip.br{ bottom:16px; right:16px; } /* ---- Hero image hand-drawn thick-marker frame (mustard, 4 random strokes) ---- */ .hero-frame-wrap{ position:relative; width:100%; max-width:410px; } .frame-marker{ position:absolute; inset:-15px; width:calc(100% + 30px); height:calc(100% + 30px); pointer-events:none; z-index:2; overflow:visible; } .frame-marker path{ fill:none; stroke:var(--mustard); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; } .frame-marker path:nth-child(2){ stroke-width:5.4; opacity:.92; } .frame-marker path:nth-child(3){ stroke-width:6.4; } .frame-marker path:nth-child(4){ stroke-width:5.2; opacity:.9; } /* ---- Inline SVG icon utilities (premium, no emojis) ---- */ .btn-ico{ width:18px; height:18px; vertical-align:-4px; flex:0 0 auto; } .tag-ico{ width:13px; height:13px; vertical-align:-2px; margin-right:3px; } .footer .heart{ color:#E5484D; display:inline-flex; align-items:center; } .footer .heart svg{ width:15px; height:15px; vertical-align:middle; } /* ---- Stats ---- */ .stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .stat{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:30px 22px; text-align:center; box-shadow:var(--shadow-sm); transition:.25s ease; } .stat:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .stat-num{ font-size:clamp(28px,3.4vw,40px); font-weight:700; color:var(--olive); line-height:1; margin-bottom:8px; } .stat-label{ font-size:14px; color:var(--muted); font-weight:600; } /* ---- About ---- */ .about-wrap{ max-width:880px; margin:0 auto; text-align:center; } .about-quote{ font-size:18px; color:var(--body); background:var(--card); border:1px solid var(--border); border-left:5px solid var(--olive); border-radius:var(--radius); padding:30px 34px; box-shadow:var(--shadow-sm); text-align:left; } /* ---- Cards grid (skills, achievements) ---- */ .card-grid{ display:grid; gap:22px; } .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } .card-grid.cols-2{ grid-template-columns:repeat(2,1fr); } .soft-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow-sm); transition:.25s ease; } .soft-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); } .soft-card .ic{ width:60px; height:60px; display:grid; place-items:center; background:var(--card-soft); color:var(--olive); border-radius:16px; margin-bottom:16px; } .soft-card .ic svg{ width:30px; height:30px; } .soft-card h3{ font-size:18px; margin-bottom:8px; } .soft-card p{ font-size:14.5px; color:var(--body); } /* ---- Achievement cards ---- */ .ach-card{ position:relative; } .ach-year{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:1px; color:var(--olive); background:var(--card-soft); padding:5px 12px; border-radius:20px; margin-bottom:12px; } .ach-medal{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--olive); margin-top:14px; background:var(--card-soft); padding:8px 15px; border-radius:24px; } .ach-medal svg{ width:22px; height:22px; flex-shrink:0; color:var(--olive); } .about-cta{ text-align:center; margin-top:30px; } /* ---- Voice ---- */ .voice-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .voice-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); transition:.25s ease; } .voice-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); } .vname{ display:flex; align-items:center; gap:9px; font-weight:700; color:var(--heading); margin-bottom:12px; font-size:16px; } .vname .dot{ width:10px; height:10px; border-radius:50%; background:var(--olive); } .voice-card audio{ width:100%; height:38px; } .maqam-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:30px; } .maqam-list span{ font-size:13px; font-weight:600; color:var(--olive); background:var(--card-soft); padding:7px 15px; border-radius:30px; } /* ---- Education timeline ---- */ .edu-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px; } .edu-item{ display:flex; gap:18px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; box-shadow:var(--shadow-sm); transition:.25s ease; } .edu-item:hover{ transform:translateX(4px); box-shadow:var(--shadow); } .edu-year{ flex-shrink:0; font-weight:700; color:var(--olive); font-size:16px; min-width:60px; } .edu-item p{ font-size:15px; color:var(--body); } /* ---- Contact ---- */ .contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:start; } .contact-info .row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); } .contact-info .row:last-child{ border-bottom:0; } .contact-info .ic{ width:44px; height:44px; flex-shrink:0; display:grid; place-items:center; background:var(--card-soft); color:var(--olive); border-radius:12px; } .contact-info .ic svg{ width:20px; height:20px; } .contact-info .row b{ color:var(--heading); display:block; font-size:14px; } .contact-info .row span{ font-size:14px; color:var(--muted); word-break:break-word; } .form{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow-sm); } .field{ margin-bottom:15px; } .field label{ display:block; font-size:13px; font-weight:700; color:var(--heading); margin-bottom:6px; } .field input,.field select,.field textarea{ width:100%; font-family:'Poppins',sans-serif; font-size:15px; padding:12px 14px; border:1.5px solid var(--border); border-radius:12px; background:var(--oat-lighter); color:var(--body); transition:.2s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(20,77,158,.12); } .field textarea{ min-height:100px; resize:vertical; } .form-note{ font-size:14px; margin-top:10px; font-weight:600; } /* ---- Footer ---- */ .footer{ background:var(--olive); color:var(--oat); padding:54px 0 34px; text-align:center; margin-top:40px; } .footer .brand{ color:var(--oat-lighter); justify-content:center; margin-bottom:14px; font-size:20px; } .footer .brand .mark{ background:var(--oat-lighter); color:var(--olive); } .footer p{ font-size:14px; color:rgba(240,230,218,.82); margin:4px 0; } .footer .footer-socials{ display:flex; justify-content:center; gap:12px; margin:18px 0; } .footer .footer-socials a{ width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1.5px solid rgba(240,230,218,.4); color:var(--oat); transition:.25s; } .footer .footer-socials a svg{ width:19px; height:19px; } .footer .footer-socials a:hover{ background:var(--oat-lighter); color:var(--olive); transform:translateY(-3px); } .footer .heart{ color:#E5484D; font-weight:900; font-size:1.14em; line-height:1; display:inline-block; vertical-align:-1px; } .footer-name{ color:var(--mustard); font-weight:700; text-decoration:none; transition:color .25s ease; } .footer-name:hover{ color:#ffb22e; } /* ---- Journey timeline ---- */ .timeline{ position:relative; max-width:820px; margin:0 auto; padding-left:8px; } .timeline::before{ content:''; position:absolute; left:22px; top:6px; bottom:6px; width:2.5px; background:linear-gradient(var(--olive),rgba(20,77,158,.15)); } .tl-item{ position:relative; padding-left:64px; margin-bottom:34px; } .tl-marker{ position:absolute; left:0; top:0; width:46px; height:46px; display:grid; place-items:center; background:var(--olive); color:var(--oat-lighter); border-radius:50%; font-weight:700; font-size:15px; box-shadow:0 0 0 5px var(--oat); } .tl-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow-sm); transition:.25s ease; } .tl-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } .tl-arabic{ font-size:26px; color:var(--olive); direction:rtl; margin-bottom:4px; } .tl-era{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--olive-soft); margin-bottom:8px; } .tl-card h3{ font-size:19px; margin-bottom:10px; } .tl-card p{ font-size:15px; color:var(--body); margin-bottom:8px; } .tl-sub{ font-size:14.5px; color:var(--body); margin:4px 0; } .tl-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .tl-chips span{ font-size:12px; font-weight:600; color:var(--olive); background:var(--card-soft); padding:5px 12px; border-radius:20px; } .tl-photo{ display:block; width:auto; height:auto; max-width:220px; max-height:220px; border-radius:14px; margin-top:14px; border:1px solid var(--border); } .dedication{ max-width:720px; margin:64px auto 0; text-align:center; background:linear-gradient(135deg,var(--olive),var(--olive-deep)); border:0; border-radius:var(--radius-lg); padding:50px 40px; box-shadow:0 22px 48px rgba(20,77,158,.32); position:relative; overflow:hidden; } .dedication::before{ content:'❝'; position:absolute; top:8px; left:26px; font-size:96px; color:rgba(252,248,242,.13); line-height:1; } .dedication .ded-ar{ font-size:34px; color:var(--oat-lighter); direction:rtl; margin-bottom:14px; position:relative; } .dedication h3{ color:var(--oat-lighter); position:relative; } .dedication p{ color:rgba(247,240,231,.92); font-size:16px; position:relative; } .journey-name{ font-family:'Anton',sans-serif; font-size:clamp(38px,6vw,68px); font-weight:400; line-height:.98; text-transform:uppercase; color:var(--olive); margin:4px 0 6px; letter-spacing:1px; text-shadow:0 2px 0 rgba(20,77,158,.06); } .journey-name::after{ content:''; display:block; width:84px; height:4px; background:linear-gradient(90deg,var(--olive),var(--olive-soft)); border-radius:4px; margin:16px auto 4px; } /* ---- Pricing ---- */ .price-group{ margin-bottom:50px; } .price-group h3{ font-size:22px; text-align:center; margin-bottom:26px; color:var(--heading); } /* ---- Premium polish ---- */ .btn:active{ transform:translateY(0)!important; } a,button{ -webkit-tap-highlight-color:transparent; } .price-card,.soft-card,.tl-card,.ach-card{ transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease; } .nav-links > li > a{ letter-spacing:.2px; } .price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .price-card{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px 26px; box-shadow:var(--shadow-sm); transition:.25s ease; display:flex; flex-direction:column; } .price-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); } .price-card.popular{ border:2px solid var(--olive); } .pop-tag{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--olive); color:var(--oat-lighter); font-size:11px; font-weight:700; letter-spacing:1px; padding:5px 14px; border-radius:20px; white-space:nowrap; } .pname{ font-size:20px; font-weight:700; color:var(--heading); margin-bottom:6px; } .psub{ font-size:14px; color:var(--muted); margin-bottom:16px; min-height:40px; } .price{ font-weight:700; color:var(--olive); margin-bottom:18px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; line-height:1.08; } .price .price-main{ display:flex; align-items:baseline; flex-wrap:wrap; gap:7px; } .price .price-cur{ font-size:32px; font-weight:700; color:var(--olive); } .feature-list{ list-style:none; margin-bottom:22px; flex-grow:1; } .feature-list li{ position:relative; padding-left:26px; margin-bottom:10px; font-size:14.5px; color:var(--body); } .feature-list li::before{ content:'✓'; position:absolute; left:0; top:0; width:18px; height:18px; font-size:11px; display:grid; place-items:center; background:var(--olive); color:var(--oat-lighter); border-radius:50%; } /* ===== Pricing tracks, tier icons & master program ===== */ .master-wrap{ margin:6px 0 50px; } .master-card{ position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:40px 38px; color:#fff; background:linear-gradient(135deg,#0d3470 0%,#144d9e 55%,#1f63c6 100%); box-shadow:var(--shadow); display:grid; grid-template-columns:1.35fr .85fr; gap:34px; align-items:center; } .master-card::before{ content:''; position:absolute; right:-70px; top:-70px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(249,162,11,.32),transparent 70%); pointer-events:none; } .master-glow{ position:absolute; left:-50px; bottom:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%); pointer-events:none; } .master-info{ position:relative; z-index:1; } .master-badge{ display:inline-flex; align-items:center; gap:7px; background:linear-gradient(90deg,#f6c14b,#f9a20b); color:#0d3470; font-size:11px; font-weight:800; letter-spacing:1px; padding:6px 14px; border-radius:30px; margin-bottom:16px; } .master-badge svg{ width:15px; height:15px; } .master-card h3{ font-size:27px; color:#fff; margin:0 0 9px; text-align:left; } .master-card .m-sub{ font-size:14.5px; color:#cddcf3; margin-bottom:20px; line-height:1.65; max-width:560px; } .master-feats{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:11px 20px; margin:0; padding:0; } .master-feats li{ position:relative; padding-left:28px; font-size:14px; color:#eaf1fb; line-height:1.45; } .master-feats li svg{ position:absolute; left:0; top:0; width:18px; height:18px; } .master-right{ position:relative; z-index:1; text-align:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:28px 22px; } .master-right .mp-num{ font-size:44px; font-weight:800; line-height:1.04; background:linear-gradient(90deg,#f9d77e,#f9a20b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:flex; flex-direction:column; align-items:center; gap:3px; } .master-right .mp-per{ font-size:14px; color:#cddcf3; margin:8px 0 2px; } .master-right .mp-meta{ font-size:13px; color:#aebfdc; margin-bottom:20px; } @media (max-width:760px){ .master-card{ grid-template-columns:1fr; gap:24px; padding:32px 22px; } .master-card h3{ text-align:center; font-size:23px; } .master-card .m-sub{ text-align:center; margin-left:auto; margin-right:auto; } .master-info{ text-align:center; } .master-feats{ grid-template-columns:1fr; text-align:left; max-width:330px; margin:0 auto; } } /* ---- Modal ---- */ .modal{ position:fixed; inset:0; z-index:200; background:rgba(10,44,92,.55); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; } .modal.open{ display:flex; } .modal-card{ background:var(--card); border-radius:var(--radius-lg); padding:32px; max-width:480px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow); position:relative; } .modal-card h3{ font-size:22px; margin-bottom:16px; } .modal-close{ position:absolute; top:16px; right:18px; background:var(--card-soft); border:0; width:34px; height:34px; border-radius:50%; font-size:20px; color:var(--heading); cursor:pointer; transition:.2s; } .modal-close:hover{ background:var(--olive); color:var(--oat-lighter); } .sel-service{ background:var(--card-soft); border-radius:12px; padding:14px 16px; margin-bottom:18px; } .sel-service .sp{ font-size:20px; font-weight:700; color:var(--olive); margin-top:4px; } /* receipt */ .receipt{ background:var(--oat-lighter); border:1px dashed var(--border-strong); border-radius:14px; padding:22px; } .rhead{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .rno{ font-weight:700; color:var(--olive); letter-spacing:.5px; } .rrow{ display:flex; justify-content:space-between; gap:14px; font-size:14px; padding:5px 0; color:var(--body); } .rrow span:first-child{ color:var(--muted); } .rtotal{ display:flex; justify-content:space-between; font-size:18px; font-weight:700; color:var(--olive); border-top:1.5px solid var(--border); margin-top:12px; padding-top:12px; } .status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:6px 14px; border-radius:20px; } .status-pill.unpaid{ background:rgba(176,58,46,.12); color:#A8392E; } .status-pill.paid{ background:rgba(22,125,60,.14); color:#15803D; } .status-pill.free{ background:rgba(245,158,11,.16); color:#B45309; } .receipt-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; } .receipt-actions .btn{ flex:1; min-width:130px; font-size:14px; padding:11px 14px; } /* ---- Verify ---- */ .verify-box{ max-width:560px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px; box-shadow:var(--shadow-sm); } .verify-row{ display:flex; gap:10px; } .verify-row input{ flex:1; } .verify-result{ margin-top:20px; padding:20px; border-radius:14px; background:var(--oat-lighter); border:1px solid var(--border); display:none; } .verify-result.show{ display:block; } .verify-result .big{ font-size:18px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; } /* ---- Coming soon ---- */ .coming-soon{ max-width:620px; margin:120px auto; text-align:center; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:60px 40px; box-shadow:var(--shadow); } .coming-soon .emoji{ margin-bottom:20px; color:var(--olive); display:flex; justify-content:center; } .coming-soon .emoji svg{ width:96px; height:96px; } .coming-soon h1{ font-size:clamp(32px,5vw,46px); margin-bottom:14px; } .coming-soon p{ color:var(--muted); font-size:16px; margin-bottom:26px; } /* ---- Scroll progress ---- */ .scroll-progress{ position:fixed; top:0; left:0; height:3.5px; width:0; background:var(--mustard); z-index:300; transition:width .1s linear; } /* ---- Loader ---- */ /* ---- Reveal ---- */ body{ overflow-x:hidden; } /* ---- Smooth scroll reveal (light & fast, no lag) ---- */ /* Reveal hides ONLY when JS is active (html.js). No-JS users always see content. enhance.js adds .in when an element scrolls into view. There is no blanket timer, so nothing below the fold pre-reveals before you scroll to it. */ html.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } html.js .reveal.sab-up{ transform:translateY(36px); } html.js .reveal.sab-left{ transform:translateX(-44px); } html.js .reveal.sab-right{ transform:translateX(44px); } html.js .reveal.sab-zoom{ transform:scale(.92); } html.js .reveal.in{ opacity:1; transform:none; } /* ---- Responsive ---- */ @media (max-width:960px){ .nav-inner{ justify-content:flex-start; position:relative; } .hamburger{ display:flex; position:absolute; right:18px; top:50%; transform:translateY(-50%); } .nav-links{ position:absolute; top:calc(100% + 12px); right:14px; width:min(258px,74vw); max-height:80vh; flex-direction:column; align-items:stretch; gap:3px; background:var(--card); padding:12px; border-radius:16px; border:1px solid var(--border); box-shadow:0 18px 50px rgba(20,77,158,.22); transform-origin:top right; transform:scale(.9) translateY(-6px); opacity:0; visibility:hidden; overflow-y:auto; transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease, visibility .28s; } .nav-links.open{ transform:scale(1) translateY(0); opacity:1; visibility:visible; } .nav-links > li > a{ color:var(--heading); border:1.5px solid transparent; } .nav-links > li > a:hover{ color:var(--royal); border-color:transparent; background:var(--card-soft); } .nav-cta{ background:var(--mustard)!important; color:var(--royal)!important; border-color:var(--mustard)!important; } .brand-logo{ height:36px; } .nav-links > li{ width:100%; text-align:center; } .nav-links > li > a{ width:100%; justify-content:center; text-align:center; padding:9px 12px; border-radius:10px; } .dropdown-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0; text-align:center; max-height:0; overflow:hidden; transition:max-height .3s ease; } .dropdown.open .dropdown-menu{ max-height:300px; } .hero-grid{ grid-template-columns:1fr; gap:40px; text-align:center; } .role-chips,.cta-row,.socials{ justify-content:center; } .hero-sub{ margin-left:auto; margin-right:auto; } .hero-media{ order:-1; } .stat-grid{ grid-template-columns:repeat(2,1fr); } .card-grid.cols-3,.card-grid.cols-2,.price-grid{ grid-template-columns:1fr 1fr; } .voice-grid{ grid-template-columns:repeat(2,1fr); } .contact-grid{ grid-template-columns:1fr; } } @media (max-width:560px){ .section{ padding:60px 0; } .container{ padding:0 20px; } .stat-grid,.card-grid.cols-3,.card-grid.cols-2,.price-grid,.voice-grid{ grid-template-columns:1fr; } .hero{ padding:110px 0 60px; } .float-chip.tl{ top:12px; left:12px; } .float-chip.br{ bottom:12px; right:12px; } .edu-item{ flex-direction:column; gap:6px; } .receipt-actions .btn{ min-width:100%; } } @media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; } .reveal{ opacity:1!important; transform:none!important; filter:none!important; } } /* Master ($120) card button — visible on blue bg: white outline + white text by default, fills royal-blue on tap/hover */ .master-card .master-btn{ background:transparent; border:2px solid #ffffff; color:#ffffff; font-weight:800; box-shadow:none; transition:background .2s ease,color .2s ease,border-color .2s ease; } .master-card .master-btn:hover,.master-card .master-btn:focus,.master-card .master-btn:active{ background:#0d3470; border-color:#ffffff; color:#ffffff; box-shadow:none; } /* ============ SALE ANNOUNCEMENT BAR ============ */ .sale-bar{ position:fixed; top:0; left:0; right:0; z-index:160; display:none; background:linear-gradient(90deg,#7a1020,#b3122b 45%,#e0123c); color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.18); } body.has-sale .sale-bar{ display:block; } .sale-bar-inner{ max-width:var(--maxw); margin:0 auto; padding:5px 16px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; text-align:center; } .sale-text{ font-weight:800; letter-spacing:.3px; font-size:12.5px; text-transform:uppercase; } @keyframes saleblink{ 50%{ opacity:.25; } } /* ---- Mechanical split-flap countdown clock (above the nav) ---- */ .flip-clock{ display:inline-flex; gap:5px; align-items:flex-start; } .flip-unit{ display:flex; flex-direction:column; align-items:center; gap:2px; } .flip-card{ position:relative; width:25px; height:30px; perspective:160px; font-weight:800; font-size:17px; line-height:30px; text-align:center; color:#fff; font-variant-numeric:tabular-nums; filter:drop-shadow(0 3px 6px rgba(0,0,0,.32)); } /* the two static halves + the two folding leaves all share this base */ .fc-top,.fc-bot,.fc-fold{ position:absolute; left:0; right:0; height:50%; overflow:hidden; background:#1a0307; backface-visibility:hidden; -webkit-backface-visibility:hidden; } .fc-top{ top:0; border-radius:6px 6px 0 0; border-bottom:1px solid rgba(0,0,0,.5); } .fc-bot{ bottom:0; border-radius:0 0 6px 6px; box-shadow:inset 0 -1px 0 rgba(255,255,255,.07); } .fc-top b,.fc-bot b,.fc-fold b{ position:absolute; left:0; right:0; height:30px; display:block; } .fc-top b,.fc-fold-top b{ top:0; } .fc-bot b,.fc-fold-bot b{ bottom:0; } .fc-fold{ opacity:0; z-index:2; } .fc-fold-top{ top:0; border-radius:6px 6px 0 0; border-bottom:1px solid rgba(0,0,0,.5); transform-origin:50% 100%; } .fc-fold-bot{ bottom:0; border-radius:0 0 6px 6px; transform-origin:50% 0; transform:rotateX(90deg); } .flip-card.go .fc-fold-top{ opacity:1; animation:fcFoldDown .28s cubic-bezier(.36,0,.66,1) forwards; } .flip-card.go .fc-fold-bot{ opacity:1; animation:fcFoldUp .28s cubic-bezier(.34,0,.2,1) .28s forwards; } @keyframes fcFoldDown{ from{ transform:rotateX(0);} to{ transform:rotateX(-90deg);} } @keyframes fcFoldUp{ from{ transform:rotateX(90deg);} to{ transform:rotateX(0);} } .flip-lab{ font-size:7px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.82); font-style:normal; } .cd-ended{ font-weight:800; font-size:12.5px; } .sale-cta{ background:#fff; color:#b3122b; font-weight:800; font-size:12px; padding:4px 13px; border-radius:20px; text-decoration:none; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.18); transition:transform .15s ease; } .sale-cta:hover{ transform:translateY(-1px); } @media(max-width:600px){ .sale-text{ font-size:12px; } .sale-bar-inner{ gap:8px; padding:5px 12px; } .sale-badge{ font-size:11.5px; } .flip-card{ width:22px; height:27px; font-size:15px; line-height:27px; } .fc-top b,.fc-bot b,.fc-fold b{ height:27px; } .flip-lab{ font-size:7.5px; } .sale-cta{ font-size:11.5px; padding:5px 12px; } } /* ============ ON-SALE PRICE CARDS ============ */ .price-card.on-sale{ position:relative; } .price-card.on-sale .sale-ribbon{ position:absolute; top:12px; right:-2px; background:#e0123c; color:#fff; font-weight:800; font-size:14.5px; padding:6px 17px 6px 19px; border-radius:8px 0 0 8px; box-shadow:0 4px 11px rgba(224,18,60,.42); letter-spacing:.5px; } .price .price-old{ text-decoration:line-through; color:#9aa6bd; font-size:17px; font-weight:600; } .price .price-new{ color:#e0123c; font-size:32px; font-weight:800; } .master-card .mp-num .mp-old{ text-decoration:line-through; opacity:.85; font-size:19px; font-weight:600; -webkit-text-fill-color:#cdd8ee; color:#cdd8ee; } .master-card .mp-num .mp-new{ -webkit-text-fill-color:#ffd77e; color:#ffd77e; font-size:44px; white-space:nowrap; } /* ===== BILLING PERIOD TOGGLE ===== */ .bill-wrap{ text-align:center; margin:6px auto 26px; } .bill-head{ font-family:var(--display,inherit); font-size:clamp(18px,2.4vw,23px); font-weight:800; color:var(--heading,#0b2447); margin:0 0 4px; letter-spacing:.2px; } .bill-head .bh-accent{ color:var(--royal,#0b3d8f); } .bill-toggle{ display:inline-flex; width:max-content; max-width:100%; margin:14px auto 10px; gap:5px; padding:6px; background:linear-gradient(180deg,#f4f7fc,#e9eff8); border:1px solid #dde6f3; border-radius:16px; flex-wrap:wrap; justify-content:center; box-shadow:inset 0 1px 2px rgba(15,59,122,.06), 0 6px 18px rgba(15,59,122,.07); } .bt-opt{ position:relative; border:0; background:transparent; cursor:pointer; font:inherit; font-weight:700; font-size:14.5px; color:#46546e; padding:9px 20px; min-height:50px; border-radius:12px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; line-height:1.15; transition:background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } .bt-opt .bt-main{ font-weight:800; } .bt-opt .bt-save{ font-style:normal; font-size:10.5px; font-weight:800; color:#0f7a37; background:#dcf3e3; padding:2px 8px; border-radius:999px; letter-spacing:.2px; } .bt-opt .bt-save-sale{ color:#fff; background:#e0123c; } .bt-opt:hover{ color:#0b3d8f; transform:translateY(-1px); } .bt-opt.active{ background:#fff; color:#0b3d8f; box-shadow:0 4px 14px rgba(15,59,122,.18); } .bt-opt.active .bt-save{ background:#0f7a37; color:#fff; } .bt-opt.active .bt-save-sale{ background:#e0123c; color:#fff; } .bill-note-line{ font-size:13px; color:#6b7891; margin:4px auto 0; max-width:520px; } .price .price-per{ color:#9aa6bd; font-size:14px; font-weight:600; white-space:nowrap; } .bill-save{ display:inline-block; font-size:13.5px; font-weight:800; color:#0f7a37; letter-spacing:.3px; margin-top:2px; background:rgba(21,128,61,.10); padding:3px 10px; border-radius:8px; } .master-card .mp-per .mp-save{ color:#f9c04b; font-weight:800; margin-left:4px; } .master-right .mp-savenote{ display:inline-block; margin-top:9px; font-size:13.5px; font-weight:800; color:#7cf0a8; letter-spacing:.3px; background:rgba(124,240,168,.15); padding:4px 11px; border-radius:8px; } @media(max-width:600px){ .bt-opt{ padding:8px 13px; font-size:13px; } .bt-opt i{ font-size:10px; } } /* ============ SALE BAR: % OFF BADGE + COUNTDOWN ============ */ .sale-badge{ background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.5); color:#fff; font-weight:900; font-size:13px; letter-spacing:.4px; padding:3px 11px; border-radius:999px; white-space:nowrap; text-transform:none; } .cd-ended{ font-weight:800; font-size:12.5px; text-transform:none; } @media(max-width:600px){ .sale-bar-inner{ gap:8px; padding:7px 12px; } .sale-text{ font-size:11px; } .sale-badge{ font-size:12px; padding:2px 9px; } } /* ============ MODAL SALE PRICE + COUPON ============ */ .sel-service .sp .sp-old{ text-decoration:line-through; color:#9aa6bd; font-size:.7em; font-weight:600; margin-right:6px; } .sel-service .sp .sp-new{ color:#e0123c; font-size:1em; font-weight:800; } .coupon-row{ display:flex; gap:8px; margin:4px 0 2px; } .coupon-row input{ flex:1; text-transform:uppercase; } .coupon-row .coupon-btn{ white-space:nowrap; padding:0 16px; border-radius:12px; border:2px solid var(--royal); background:#fff; color:var(--royal); font-weight:700; cursor:pointer; } .coupon-row .coupon-btn:hover{ background:var(--royal); color:#fff; } .coupon-note{ font-size:12.5px; margin:2px 0 6px; min-height:16px; } .coupon-note.ok{ color:#15803D; font-weight:600; } .coupon-note.bad{ color:#A8392E; font-weight:600; } /* ===================================================================== v4 UPGRADE — currency, trial, gender, months, referral, reviews, FAQ ===================================================================== */ /* ---- Currency selector (above pricing) ---- */ .cur-toggle{ display:inline-flex; gap:4px; background:var(--card); border:1px solid var(--border-strong); padding:5px; border-radius:999px; box-shadow:var(--shadow-sm); } .cur-opt{ border:none; background:transparent; cursor:pointer; font-family:inherit; font-weight:600; font-size:13.5px; color:var(--muted); padding:8px 20px; border-radius:999px; display:flex; align-items:center; gap:7px; transition:all .2s ease; } .cur-opt.active{ background:linear-gradient(135deg,var(--royal),var(--olive-dark)); color:#fff; box-shadow:0 6px 14px rgba(20,77,158,.28); } /* ---- Classes-per-month feature ---- */ .feat-permonth b{ color:var(--royal); } .price-card .feat-permonth{ font-weight:600; } /* ---- FREE 3-day trial card (top, highlighted) ---- */ .trial-wrap{ max-width:760px; margin:0 auto 40px; } .trial-card{ position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:30px 30px 28px; color:#fff; background:linear-gradient(135deg,#0F3B7A 0%,#144D9E 48%,#3E6FBE 100%); box-shadow:0 22px 50px rgba(20,77,158,.34); border:1.5px solid rgba(255,255,255,.18); } .trial-card::after{ content:""; position:absolute; top:-60px; right:-50px; width:230px; height:230px; background:radial-gradient(circle,rgba(249,162,11,.55),rgba(249,162,11,0) 70%); pointer-events:none; } .trial-card h3{ color:#fff; font-size:26px; margin:14px 0 6px; } .trial-price{ display:flex; align-items:baseline; gap:10px; margin:6px 0 12px; } .trial-card .trial-feats{ list-style:none; padding:0; margin:14px 0 22px; display:grid; gap:9px; } .trial-card .trial-feats li{ position:relative; padding-left:28px; font-size:14.5px; color:rgba(255,255,255,.95); } .trial-card .trial-feats li::before{ content:"\2713"; position:absolute; left:0; top:0; width:19px; height:19px; border-radius:50%; background:var(--mustard); color:#3a2600; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; } .trial-card .book-btn.trial-btn{ background:#fff; color:var(--olive-dark); font-weight:800; font-size:16px; width:100%; padding:15px; border-radius:14px; border:none; cursor:pointer; box-shadow:0 12px 26px rgba(0,0,0,.18); transition:transform .15s ease, box-shadow .2s ease; } .trial-card .book-btn.trial-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.24); } /* ---- Referral discount card ---- */ /* ---- Gender / availability picker (in modal) ---- */ .gender-opts{ display:flex; gap:10px; } .gopt{ flex:1; position:relative; border:1.5px solid var(--border-strong); border-radius:12px; padding:12px; text-align:center; cursor:pointer; font-weight:600; font-size:14px; color:var(--body); background:var(--card); transition:all .18s ease; user-select:none; } .gopt input{ position:absolute; opacity:0; pointer-events:none; } .gopt:has(input:checked){ border-color:var(--royal); background:var(--card-soft); color:var(--heading); box-shadow:0 6px 14px rgba(20,77,158,.16); } .gopt.disabled{ opacity:.45; cursor:not-allowed; } .avail-note{ margin-top:9px; display:flex; gap:8px; flex-wrap:wrap; } .av-chip{ font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; } .av-chip.on{ background:rgba(47,158,95,.14); color:#2f9e5f; } .av-chip.off{ background:rgba(196,61,107,.12); color:#c43d6b; } /* ---- Months quantity stepper ---- */ .month-step{ display:flex; align-items:center; gap:14px; } .month-step button{ width:40px; height:40px; border-radius:11px; border:1.5px solid var(--border-strong); background:var(--card); font-size:22px; font-weight:700; color:var(--royal); cursor:pointer; line-height:1; transition:all .15s ease; } .month-step button:hover{ background:var(--card-soft); } .month-step .ms-val{ font-size:20px; font-weight:800; color:var(--heading); min-width:104px; text-align:center; } .ms-hint{ font-size:12px; color:var(--muted); margin-top:7px; } /* ---- WhatsApp-required note + phone error + optional tag ---- */ .wa-note{ font-size:12.5px; font-weight:600; color:var(--royal); margin-bottom:5px; } .wa-note .req{ color:#c43d6b; } .opt-tag{ font-weight:500; font-size:11.5px; color:var(--muted); } .phone-err{ color:#c43d6b; font-size:12.5px; font-weight:600; margin-top:6px; min-height:1px; } /* ---- Free / status pill ---- */ .status-pill.free{ background:rgba(47,158,95,.14); color:#2f9e5f; } .sp-free{ font-size:13px; font-weight:600; color:var(--mustard); } /* ---- Reviews section ---- */ .reviews-section{ margin-top:18px; } .reviews-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; margin-bottom:30px; } .review-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow-sm); } .rv-top{ display:flex; align-items:center; gap:12px; margin-bottom:10px; } .rv-ava{ width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--royal),var(--olive-dark)); font-size:18px; } .rv-name{ font-weight:700; color:var(--heading); font-size:14.5px; } .rv-loc{ font-size:12px; color:var(--muted); } .rv-stars{ color:#d9d6e3; font-size:16px; letter-spacing:2px; } .rv-stars .on{ color:var(--mustard); } .rv-topic{ font-size:12.5px; font-weight:600; color:var(--royal); margin:8px 0 4px; } .rv-text{ font-size:13.5px; color:var(--body); line-height:1.6; } .reviews-empty{ text-align:center; color:var(--muted); font-size:13.5px; padding:10px 0 26px; } .review-form{ max-width:620px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); } .review-form h4{ font-size:18px; margin-bottom:4px; text-align:center; } .review-form input, .review-form select, .review-form textarea{ width:100%; font-family:inherit; font-size:14px; padding:11px 13px; border:1px solid var(--border-strong); border-radius:11px; background:var(--oat-lighter); color:var(--body); } .review-form textarea{ min-height:96px; resize:vertical; } .star-input{ display:flex; gap:5px; margin:4px 0 2px; } .star-input button{ background:none; border:none; cursor:pointer; font-size:30px; line-height:1; color:#d9d6e3; transition:color .12s ease; padding:0; } .star-input button.on{ color:var(--mustard); } .review-note{ text-align:center; font-size:13px; margin-top:12px; min-height:1px; } /* ---- Review: reviewer-type segmented + gender icons (v14) ---- */ .rv-kind{ display:flex; gap:8px; flex-wrap:wrap; } .kopt{ flex:1; min-width:92px; position:relative; border:1.5px solid var(--border-strong); border-radius:12px; padding:11px 10px; text-align:center; cursor:pointer; font-weight:600; font-size:13.5px; color:var(--body); background:var(--card); transition:all .18s ease; user-select:none; } .kopt input{ position:absolute; opacity:0; pointer-events:none; } .kopt:has(input:checked){ border-color:var(--royal); background:var(--card-soft); color:var(--heading); box-shadow:0 6px 14px rgba(20,77,158,.16); } .rv-cond{ animation:rvFade .2s ease; } @keyframes rvFade{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} } .gopt{ display:flex; align-items:center; justify-content:center; gap:7px; } .gopt-ico{ display:inline-flex; align-items:center; justify-content:center; color:var(--muted); transition:color .18s ease; } .gopt-ico svg{ width:19px; height:19px; display:block; } .gopt:has(input[value="Female"]:checked) .gopt-ico{ color:#c2477e; } .gopt:has(input[value="Male"]:checked) .gopt-ico{ color:var(--royal); } .rv-ava svg{ width:24px; height:24px; display:block; } .rv-ava.female{ background:linear-gradient(135deg,#e06aa0,#b83d77); } .rv-ava.male{ background:linear-gradient(135deg,var(--royal),var(--olive-dark)); } /* ---- FAQ section ---- */ .faq-section{ max-width:820px; margin:0 auto; } .faq-item{ background:var(--card); border:1px solid var(--border); border-radius:14px; margin-bottom:12px; box-shadow:var(--shadow-sm); overflow:hidden; } .faq-item summary{ cursor:pointer; list-style:none; padding:17px 20px; font-weight:600; font-size:15px; color:var(--heading); display:flex; justify-content:space-between; align-items:center; gap:12px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"\002B"; font-size:22px; color:var(--royal); font-weight:400; flex:none; transition:transform .2s ease; } .faq-item[open] summary::after{ transform:rotate(45deg); } .faq-item .faq-a{ padding:0 20px 18px; font-size:14px; color:var(--body); line-height:1.65; } /* ===================================================================== v5 UPGRADE — trial redesign, currency centering, refer & save, nav sale ===================================================================== */ /* ---- Free Trial card: master-style, lightly highlighted ---- */ .trial-wrap{ max-width:980px; margin:6px auto 40px; } .trial-card{ display:grid; grid-template-columns:1.35fr .85fr; gap:34px; align-items:center; position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:38px 36px; color:#fff; background:linear-gradient(135deg,#0d3470 0%,#144d9e 52%,#2f6fcf 100%); box-shadow:0 26px 60px rgba(20,77,158,.40); border:1.6px solid rgba(249,162,11,.55); } .trial-card::after{ content:""; position:absolute; top:-70px; right:-60px; width:250px; height:250px; background:radial-gradient(circle,rgba(249,162,11,.40),rgba(249,162,11,0) 70%); pointer-events:none; } .trial-info{ position:relative; z-index:1; } .trial-right{ position:relative; z-index:1; text-align:center; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); border-radius:18px; padding:26px 22px; } .trial-tag{ display:inline-flex; align-items:center; gap:7px; background:linear-gradient(90deg,#f6c14b,#f9a20b); color:#0d3470; font-size:11.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; padding:6px 14px; border-radius:30px; margin-bottom:14px; } .trial-card h3{ color:#fff; font-size:26px; margin:0 0 9px; text-align:left; } .trial-card .trial-sub{ font-size:14.5px; color:#cddcf3; margin:0 0 16px; line-height:1.6; max-width:540px; } .trial-subjects{ margin:0 0 16px; } .trial-slabel{ display:block; font-size:12px; font-weight:700; letter-spacing:.5px; color:#aebfdc; text-transform:uppercase; margin-bottom:8px; } .trial-chips{ display:flex; flex-wrap:wrap; gap:8px; } .trial-chip{ font-size:13px; font-weight:600; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); padding:6px 13px; border-radius:999px; } .trial-card .trial-feats{ list-style:none; padding:0; margin:0; display:grid; gap:10px; } .trial-card .trial-feats li{ position:relative; padding-left:28px; font-size:14px; color:#eaf1fb; line-height:1.45; } .trial-card .trial-feats li::before{ content:none; } .trial-card .trial-feats li svg{ position:absolute; left:0; top:1px; width:18px; height:18px; background:#eafaf0; border-radius:50%; padding:2px; box-sizing:border-box; } .trial-right .trial-price{ display:block; font-size:46px; font-weight:800; line-height:1; margin:0; background:linear-gradient(90deg,#f9d77e,#f9a20b); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .trial-right .trial-per{ font-size:14px; color:#cddcf3; margin:8px 0 18px; } .trial-card .book-btn.trial-btn{ display:block; width:100%; margin:0; padding:16px 18px; background:#fff; color:var(--royal,#144d9e); font-weight:800; font-size:16px; line-height:1.2; border:none; border-radius:14px; cursor:pointer; box-shadow:0 12px 26px rgba(0,0,0,.20); transition:transform .15s ease, box-shadow .2s ease; } .trial-card .book-btn.trial-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.26); } .trial-right .trial-note{ font-size:12px; color:#aebfdc; margin:14px 0 0; line-height:1.5; } @media (max-width:760px){ .trial-card{ grid-template-columns:1fr; gap:24px; padding:30px 22px; } .trial-card h3{ text-align:center; font-size:23px; } .trial-card .trial-sub{ text-align:center; margin-left:auto; margin-right:auto; } .trial-info{ text-align:center; } .trial-chips{ justify-content:center; } .trial-card .trial-feats{ text-align:left; max-width:340px; margin:0 auto; } } /* ---- Refer & Save section ---- */ .refer-section .section-head{ margin-bottom:8px; } .refer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:980px; margin:24px auto 0; align-items:start; } .refer-how{ background:var(--card-soft); border:1px solid var(--border); border-radius:var(--radius); padding:26px; } .refer-steps{ list-style:none; margin:0; padding:0; display:grid; gap:20px; } .refer-steps li{ display:flex; gap:14px; align-items:flex-start; } .refer-steps .refn{ flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--royal),var(--olive-dark)); font-size:15px; } .refer-steps li > div{ display:flex; flex-direction:column; gap:3px; } .refer-steps li b{ color:var(--heading); font-size:15px; } .refer-steps li span{ color:var(--body); font-size:13.5px; line-height:1.55; } .refer-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-sm); } .refer-card .field{ margin-bottom:14px; } .refer-card .field > label{ display:block; font-weight:600; font-size:13.5px; color:var(--heading); margin-bottom:7px; } .refer-card .field .req{ color:#c43d6b; } .refer-card .field input{ width:100%; font-family:inherit; font-size:14px; padding:11px 13px; border:1px solid var(--border-strong); border-radius:11px; background:var(--oat-lighter); color:var(--body); } .refer-row{ display:flex; gap:8px; } .refer-row input{ flex:1; text-transform:uppercase; } .refer-row .btn{ white-space:nowrap; } .refer-status{ font-size:13px; margin-top:10px; min-height:1px; line-height:1.5; } .refer-status.ok{ color:#15803D; font-weight:600; } .refer-status.warn{ color:#b06a00; font-weight:600; } .refer-status.bad{ color:#A8392E; font-weight:600; } .refer-form{ margin-top:6px; display:grid; gap:12px; } .refer-note{ text-align:center; font-size:13px; min-height:1px; } .refer-fine{ font-size:12px; color:var(--muted); margin-top:14px; line-height:1.55; } @media (max-width:760px){ .refer-grid{ grid-template-columns:1fr; } } /* ---- Subtle sale effect on the Pricing nav link ---- */ .nav-sale-dot{ display:inline-block; margin-left:6px; font-size:9.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#fff; background:linear-gradient(90deg,#e0123c,#f9a20b); padding:2px 7px; border-radius:999px; vertical-align:middle; animation:navSalePulse 1.9s ease-in-out infinite; } @keyframes navSalePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(249,162,11,.45); } 50%{ box-shadow:0 0 0 5px rgba(249,162,11,0); } } a.nav-sale-on{ color:var(--royal); font-weight:700; } /* ============================================================ v7 additions: centered review heading + Special Offer section ============================================================ */ /* "Share your experience" heading centered nicely above the form */ .reviews-section .review-form-wrap{ text-align:center; } .reviews-section .review-form-wrap h3{ text-align:center; } .reviews-section .review-form-wrap .review-form{ text-align:left; } /* ---- SPECIAL OFFER (shown on Home + Pricing when enabled) ---- */ .so-section{ padding-top:10px; } .so-pricing{ margin:4px 0 30px; } .so-card{ position:relative; display:grid; grid-template-columns:1.55fr .95fr; gap:30px; align-items:center; background:linear-gradient(135deg,#FFFFFF 0%,var(--card-soft) 100%); border:1.5px solid var(--mustard); border-radius:var(--radius-lg); padding:30px 32px; box-shadow:0 20px 50px -24px rgba(20,77,158,.5); overflow:hidden; } .so-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:linear-gradient(135deg,var(--mustard),rgba(20,77,158,.35)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .so-main{ position:relative; z-index:1; } .so-badge{ display:inline-block; background:var(--mustard); color:#3A2A00; font-weight:800; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:50px; margin-bottom:12px; } .so-title{ color:var(--heading); margin:0 0 8px; font-size:1.7rem; line-height:1.2; } .so-desc{ color:var(--body); margin:0 0 16px; max-width:52ch; } .so-feats{ list-style:none; margin:0; padding:0; display:grid; gap:9px; } .so-feats li{ display:flex; align-items:flex-start; gap:10px; color:var(--body); font-weight:500; } .so-feats li svg{ width:20px; height:20px; flex:0 0 20px; color:var(--royal); margin-top:2px; } .so-side{ position:relative; z-index:1; text-align:center; background:rgba(255,255,255,.72); border:1px solid var(--border); border-radius:var(--radius); padding:24px 20px; } .so-price{ color:var(--royal); font-weight:800; font-size:2.3rem; line-height:1; } .so-dur{ color:var(--muted); font-weight:600; margin-top:8px; } .so-btn{ margin-top:18px; } @media (max-width:760px){ .so-card{ grid-template-columns:1fr; gap:20px; padding:24px 20px; } .so-title{ font-size:1.4rem; } .so-side{ padding:20px 16px; } } /* ---- v8: owner-editable plans host + offer slot counter + review spacing ---- */ .plans-root{ display:block; } .plans-loading{ text-align:center; color:var(--muted); font-weight:600; padding:46px 0; } .so-slots{ margin-top:10px; font-weight:700; color:var(--royal); font-size:.95rem; } .so-slots.sold-out{ color:#c43d6b; } .so-btn[disabled]{ opacity:.55; cursor:not-allowed; filter:grayscale(.35); } .reviews-section .review-form-wrap h3{ margin-bottom:22px; } /* =================================================================== v9 - Special Offer gender badge + compact top-right currency switcher =================================================================== */ /* Gender availability badge on the Special Offer (abstract outline icon + label) */ .so-gender{ display:inline-flex; align-items:center; gap:7px; margin:0 0 12px; padding:5px 13px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.02em; color:var(--royal); background:rgba(20,77,158,.08); border:1px solid rgba(20,77,158,.22); } .so-gender svg{ width:16px; height:16px; flex:0 0 16px; } .so-gender-females{ color:#b03a76; background:rgba(196,61,107,.09); border-color:rgba(196,61,107,.25); } .so-gender-males{ color:var(--royal); background:rgba(20,77,158,.08); border-color:rgba(20,77,158,.22); } /* Compact currency switcher pinned to the pricing top-right corner */ #pricing-top .container{ position:relative; } .cur-corner{ position:absolute; top:4px; right:8px; z-index:5; display:flex; align-items:center; gap:9px; } .cur-corner-label{ font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; } .cur-toggle.compact{ padding:3px; gap:3px; box-shadow:var(--shadow-sm); } .cur-toggle.compact .cur-opt{ padding:6px 14px; font-size:12.5px; } @media (max-width:760px){ .cur-corner{ position:static; justify-content:center; margin:0 auto 22px; } } /* Master program keeps its unique blue design even when rendered as a .price-card */ .price-card.master-card{ border:none; display:grid; text-align:left; } /* v9.1 - Special Offer badge + gender chip aligned on ONE row with a small gap */ .so-badges{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:12px; } .so-badges .so-badge{ margin-bottom:0; } .so-badges .so-gender{ margin:0; } /* v9.1 - Referral "keep same Student ID" note */ .refer-note-id{ font-size:13px; line-height:1.6; color:var(--body); background:rgba(20,77,158,.06); border:1px solid rgba(20,77,158,.16); border-radius:12px; padding:11px 14px; margin:14px 0 8px; } .refer-note-id b{ color:var(--royal); } /* v11 - Quran classes open to both male & female students (live availability) */ .class-access-note{ display:flex; align-items:flex-start; gap:11px; max-width:760px; margin:0 auto 30px; font-size:14px; line-height:1.6; color:var(--body); background:rgba(20,77,158,.06); border:1px solid rgba(20,77,158,.16); border-radius:14px; padding:14px 18px; } .class-access-note svg{ flex:0 0 auto; width:22px; height:22px; color:var(--royal); margin-top:1px; } .class-access-note b{ color:var(--royal); } /* ===== Redesigned receipt header / footer (v12) ===== */ .rcpt-head{ display:flex; align-items:center; gap:13px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--border); } .rcpt-ico{ flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; border-radius:13px; background:var(--card-soft); color:var(--royal); } .rcpt-ico svg{ width:25px; height:25px; } .rcpt-ico.sm{ display:inline-grid; width:30px; height:30px; border-radius:9px; vertical-align:middle; } .rcpt-ico.sm svg{ width:18px; height:18px; } .rcpt-head.confirmed .rcpt-ico, .rcpt-ico.sm.confirmed{ background:rgba(20,77,158,.12); color:var(--royal); } .rcpt-head.reserved .rcpt-ico, .rcpt-ico.sm.reserved{ background:rgba(249,162,11,.16); color:#B45309; } .rcpt-htext{ flex:1 1 auto; min-width:0; } .rcpt-title{ font-size:18px; font-weight:800; color:var(--heading); line-height:1.2; } .rcpt-sub{ font-size:12.5px; color:var(--muted); margin-top:3px; } .rcpt-flag{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:800; letter-spacing:.3px; color:var(--royal); background:rgba(20,77,158,.10); border:1px solid rgba(20,77,158,.22); padding:5px 11px; border-radius:999px; } .rcpt-flag svg{ width:14px; height:14px; } .rcpt-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:18px; padding-top:14px; border-top:1px solid var(--border); font-size:11.5px; color:var(--muted); } .rcpt-foot b{ color:var(--royal); font-weight:700; } @media(max-width:560px){ .rcpt-head{ flex-wrap:wrap; } .rcpt-flag{ order:3; } } /* ===== Find Your Student ID (OTP lookup) ===== */ .sid-box{max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;box-shadow:0 18px 44px rgba(20,77,158,.08)} .sid-row{display:flex;gap:10px} .sid-row input{flex:1;min-width:0} .sid-otp{margin-top:16px} .sid-otp #sidOtp{letter-spacing:8px;font-family:'Poppins',monospace;font-weight:600;text-align:center} .sid-resend{background:none;border:none;color:var(--royal);font-size:13px;font-weight:600;cursor:pointer;margin-top:10px;padding:4px 2px;text-decoration:underline} .sid-msg{margin-top:14px;font-size:14px;line-height:1.6} .sid-msg.ok{color:#15803d} .sid-msg.bad{color:#c43d6b} .sid-result{margin-top:6px} .sid-card{margin-top:18px;text-align:center;border:2px dashed var(--mustard);border-radius:18px;padding:26px 20px;background:var(--card-soft)} .sid-ico{width:46px;height:46px;border-radius:50%;background:#15803d;color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 12px} .sid-ico svg{width:24px;height:24px} .sid-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--royal);font-weight:700} .sid-value{font-family:'Poppins',monospace;font-size:32px;font-weight:800;letter-spacing:4px;color:var(--heading);margin-top:6px} .sid-name{font-size:14px;color:var(--body);margin-top:4px} .sid-emailed{font-size:13px;color:#15803d;margin-top:10px;font-weight:600} .sid-fine{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.6;text-align:center} .rcpt-sidnote{font-size:12px;margin-top:10px;padding:10px 12px;border-radius:10px;background:#eaf6ee;color:#15803d;line-height:1.6} @media(max-width:560px){.sid-row{flex-direction:column}.sid-value{font-size:26px;letter-spacing:3px}}