/* ===================================================================== Sayed Muhammad Abubakr — 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:180; transition:.3s ease; } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:10px; max-width:var(--maxw); margin:0 auto; padding:12px 18px 12px 14px; } .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:46px; 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:2px; list-style:none; } .nav-links > li > a{ display:inline-flex; align-items:center; gap:5px; padding:7px 11px; border-radius:30px; font-size:13.5px; font-weight:600; white-space:nowrap; 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 13px!important; border-radius:30px!important; border:1.3px solid var(--mustard)!important; font-weight:700!important; white-space:nowrap!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; width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22); border-radius:14px; cursor:pointer; padding:0; box-shadow:0 8px 22px rgba(0,0,0,.12); touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; } .hamburger span{ width:23px; height:2.5px; background:#fff; border-radius:999px; transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .18s ease, width .2s ease; transform-origin:center; } .hamburger:active{ transform:scale(.96); } .hamburger.open{ background:linear-gradient(135deg,rgba(249,162,11,.95),rgba(255,209,102,.95)); box-shadow:0 10px 24px rgba(249,162,11,.28); } .hamburger.open span{ background:var(--royal); } .hamburger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); } .hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(.2); } .hamburger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); } /* ---- Hero ---- */ .hero{ padding:152px 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; align-items: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 wrapper ---- */ .hero-frame-wrap{ position:relative; width:100%; max-width:410px; aspect-ratio:1/1; align-self:center; } /* ---- 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; } /* ---- 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); } .price-card.unavailable{ opacity:.72; filter:saturate(.78); } .price-card.unavailable::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:rgba(255,255,255,.38); pointer-events:none; } .price-card.unavailable .book-btn, .price-card.unavailable button[disabled]{ cursor:not-allowed; opacity:.86; background:#d9e1ee!important; color:#62708a!important; box-shadow:none!important; border-color:#d9e1ee!important; } .unavailable-ribbon{ position:absolute; z-index:3; top:13px; right:13px; max-width:70%; background:linear-gradient(135deg,#334155,#64748b); color:#fff; font-size:11px; font-weight:900; letter-spacing:.4px; padding:7px 12px; border-radius:999px; box-shadow:0 6px 16px rgba(15,23,42,.18); text-align:center; } .master-card .master-unavailable{ position:static; display:inline-block; max-width:100%; margin:0 0 12px; background:linear-gradient(135deg,#f59e0b,#facc15); color:#09214a; } .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; } .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); border-radius:0 3px 3px 0; box-shadow:0 0 8px rgba(249,162,11,.45); 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%); z-index:260; } .hamburger:active{ transform:translateY(-50%) scale(.96); } .nav-links{ position:fixed; top:var(--sab-menu-top, calc(var(--sab-top-offset, 0px) + var(--sab-nav-height, 68px) + 10px)); left:50%; right:auto; width:min(360px,calc(100vw - 34px)); max-height:calc(100vh - var(--sab-menu-top, calc(var(--sab-top-offset, 0px) + var(--sab-nav-height, 68px) + 10px)) - 18px); flex-direction:column; align-items:stretch; gap:8px; background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(247,250,254,.97)); padding:15px; border-radius:24px; border:1px solid rgba(223,231,243,.96); box-shadow:0 26px 66px rgba(8,37,82,.30), inset 0 1px 0 rgba(255,255,255,.9); transform-origin:top center; transform:translate3d(-50%,-12px,0) scale(.96); opacity:0; visibility:hidden; pointer-events:none; overflow-y:auto; overscroll-behavior:contain; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:transform .34s cubic-bezier(.16,1,.3,1), opacity .22s ease, visibility .34s; z-index:240; } .nav.menu-open::after{ content:''; position:fixed; inset:var(--sab-menu-backdrop-top, calc(var(--sab-top-offset, 0px) + var(--sab-nav-height, 68px))) 0 0; background:rgba(8,37,82,.26); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); z-index:220; } .nav-links.open{ transform:translate3d(-50%,0,0) scale(1); opacity:1; visibility:visible; pointer-events:auto; } .nav-links > li > a{ color:var(--heading); border:1px solid transparent; background:rgba(255,255,255,.68); box-shadow:0 3px 10px rgba(15,59,122,.04); } .nav-links > li > a:hover,.nav-links > li > a:focus,.nav-links > li > a.active,.nav-links > li > a[aria-current="page"],.nav-links > li > a[aria-current="true"]{ color:var(--royal); border-color:rgba(20,77,158,.18); background:#eef5ff; box-shadow:inset 0 0 0 1px rgba(20,77,158,.06),0 7px 16px rgba(20,77,158,.09); } .nav-links > li > a.active::before,.nav-links > li > a[aria-current="page"]::before,.nav-links > li > a[aria-current="true"]::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--mustard); box-shadow:0 0 0 4px rgba(249,162,11,.16); } .nav-cta{ background:linear-gradient(135deg,var(--mustard),#ffd166)!important; color:var(--royal)!important; border-color:transparent!important; box-shadow:0 8px 20px rgba(249,162,11,.22)!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:11px 13px; border-radius:14px; font-weight:750; } .dropdown-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 6px; text-align:center; max-height:0; overflow:hidden; transition:max-height .3s ease; background:transparent; } .dropdown.open .dropdown-menu{ max-height:320px; margin-top:5px; } .dropdown-menu li a{ background:rgba(20,77,158,.06); margin:5px 0; border-radius:12px; color:#26344f; } .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:190; 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; } /* ---- Text-only sale countdown (above the nav) ---- */ .flip-clock{ display:inline-flex; gap:5px; align-items:center; font-variant-numeric:tabular-nums; } .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; } .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 removed (v45): currency is auto-detected by location ---- */ /* ---- 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); } #pricing-top .container{ position:relative; } /* 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); } /* ===== 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-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}} /* ===== Pricing: Open-to-everyone access card (v17) ===== */ .class-access-card{ position:relative; overflow:hidden; max-width:720px; margin:0 auto 34px; padding:26px 28px; border-radius:20px; background:linear-gradient(135deg,rgba(20,77,158,.07),rgba(249,162,11,.07)); border:1px solid rgba(20,77,158,.18); box-shadow:0 16px 40px rgba(20,77,158,.10); } .cac-glow{ position:absolute; top:-60px; right:-60px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(249,162,11,.22),transparent 70%); pointer-events:none; } .cac-head{ display:flex; flex-direction:column; gap:9px; margin-bottom:10px; } .cac-badge{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--royal); background:rgba(20,77,158,.12); border:1px solid rgba(20,77,158,.22); padding:6px 13px; border-radius:999px; } .cac-badge svg{ width:15px; height:15px; } .cac-title{ font-size:24px; line-height:1.25; margin:0; color:var(--heading); font-weight:800; } .cac-title b{ color:var(--royal); } .cac-text{ position:relative; font-size:15px; line-height:1.7; color:var(--body); margin:0 0 18px; max-width:620px; } .cac-text b{ color:var(--royal); } .cac-chips{ display:flex; flex-wrap:wrap; gap:12px; } .cac-chip{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:700; color:var(--heading); background:var(--card); border:1px solid var(--border-strong); border-radius:13px; padding:10px 16px; box-shadow:0 4px 12px rgba(20,77,158,.06); } .cac-ico{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px; } .cac-ico svg{ width:18px; height:18px; } .cac-chip.female .cac-ico{ background:rgba(216,27,96,.12); color:#c2185b; } .cac-chip.male .cac-ico{ background:rgba(20,77,158,.12); color:var(--royal); } @media(max-width:560px){ .class-access-card{ padding:22px 20px; } .cac-title{ font-size:21px; } .cac-chip{ flex:1 1 auto; justify-content:center; } } /* ===== Home: Services section (v17) ===== */ .svc-home-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } .svc-home-card{ position:relative; padding:30px 28px; border-radius:20px; background:var(--card); border:1px solid var(--border); box-shadow:0 16px 40px rgba(20,77,158,.08); display:flex; flex-direction:column; } .svc-home-card.quran{ background:linear-gradient(160deg,rgba(20,77,158,.06),rgba(249,162,11,.05)); border-color:rgba(20,77,158,.18); } .svc-home-ic{ width:54px; height:54px; display:grid; place-items:center; border-radius:15px; background:rgba(20,77,158,.10); color:var(--royal); margin-bottom:16px; } .svc-home-ic svg{ width:28px; height:28px; } .svc-home-tag{ font-size:12px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--royal); margin-bottom:6px; } .svc-home-card h3{ font-size:21px; line-height:1.25; margin:0 0 10px; color:var(--heading); } .svc-home-card p{ font-size:14.5px; line-height:1.7; color:var(--body); margin:0 0 20px; flex:1 1 auto; } .svc-home-card p b{ color:var(--royal); } .svc-home-actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .svc-trial-pill{ display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:14px; color:#7a4f02; background:linear-gradient(135deg,#fbc34a,#f9a20b); border:none; padding:11px 18px; border-radius:999px; box-shadow:0 6px 16px rgba(249,162,11,.32); } .svc-trial-pill svg{ width:16px; height:16px; } .svc-trial-pill:hover{ filter:brightness(1.04); } @media(max-width:760px){ .svc-home-grid{ grid-template-columns:1fr; } } /* ===== FAQ inline link (v17) ===== */ .faq-link{ color:var(--royal); font-weight:700; text-decoration:underline; text-underline-offset:2px; } /* ================= v18 additions ================= */ /* Robust no-horizontal-scroll / no side-pan (zoom stays enabled for accessibility) */ html{ overflow-x:hidden; max-width:100%; } body{ overflow-x:hidden; max-width:100%; position:relative; } img,svg,video,table,iframe{ max-width:100%; } *{ overflow-wrap:break-word; } .container{ overflow-x:clip; } /* Booking modal: email-preference tip */ .book-tip{ display:flex; gap:10px; align-items:flex-start; background:rgba(20,77,158,.07); border:1px solid rgba(20,77,158,.18); border-radius:12px; padding:11px 13px; margin:-4px 0 15px; } .book-tip svg{ width:20px; height:20px; flex-shrink:0; color:var(--royal); margin-top:1px; } .book-tip span{ font-size:12.7px; line-height:1.5; color:var(--body); } .book-tip b{ color:var(--heading); font-weight:700; } /* Pricing -> Receipt Generator call-to-action */ .gen-link{ display:flex; align-items:center; gap:16px; text-decoration:none; background:var(--card,#fff); border:1.5px solid var(--border); border-left:5px solid var(--mustard,#F9A20B); border-radius:16px; padding:18px 20px; box-shadow:0 8px 26px rgba(20,77,158,.08); transition:transform .18s ease, box-shadow .18s ease; } .gen-link:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(20,77,158,.14); } .gen-link-ic{ flex-shrink:0; width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:rgba(20,77,158,.1); color:var(--royal); } .gen-link-ic svg{ width:24px; height:24px; } .gen-link-tx{ display:flex; flex-direction:column; gap:3px; } .gen-link-tx b{ font-size:15.5px; color:var(--heading); font-weight:700; } .gen-link-tx small{ font-size:12.8px; color:var(--muted); line-height:1.45; } .gen-link-arrow{ flex-shrink:0; margin-left:auto; color:var(--royal); } .gen-link-arrow svg{ width:22px; height:22px; } /* Receipt Generator page */ .gen-tool{ max-width:560px; margin:8px auto 0; background:var(--card,#fff); border:1.5px solid var(--border); border-radius:20px; padding:26px; box-shadow:0 14px 40px rgba(20,77,158,.1); } /* gt-cur currency radios removed (v45): currency auto-detected by location */ .gt-hint{ display:block; font-size:11.7px; color:var(--muted); margin-top:5px; } .gt-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; background:rgba(249,162,11,.1); border:1px solid rgba(249,162,11,.32); border-radius:13px; padding:14px 16px; margin:6px 0 14px; } .gt-price-lbl{ font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; } .gt-price-val{ font-size:24px; font-weight:800; color:var(--olive,#0F3B7A); line-height:1; } .gt-price-sub{ font-size:12.5px; color:var(--muted); margin-left:auto; } .gt-price-empty{ font-size:13.5px; color:var(--muted); } .gt-err{ color:#A8392E; font-size:13px; font-weight:600; min-height:0; margin:0 0 10px; } .gt-err:empty{ display:none; } .gt-preview{ margin-top:24px; } .gt-receipt{ border:1.5px solid var(--border); border-radius:16px; padding:20px; background:var(--oat-lighter,#fbf8f2); } .gt-rhead{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border-bottom:1.5px solid var(--border); padding-bottom:12px; margin-bottom:12px; } .gt-rtitle{ font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; } .gt-rno{ font-size:20px; font-weight:800; color:var(--olive,#0F3B7A); } .gt-feat{ margin:10px 0 0; padding-left:18px; } .gt-feat li{ font-size:13px; color:var(--body); margin-bottom:3px; } .gt-rdate{ font-size:11.7px; color:var(--muted); text-align:right; margin-top:12px; } .gt-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; } .gt-actions .btn{ flex:1; min-width:150px; justify-content:center; } @media(max-width:560px){ .gen-tool{ padding:18px; } .gt-actions .btn{ min-width:100%; } .gen-link{ flex-wrap:wrap; } .gen-link-arrow{ display:none; } } /* ===== v19: Customer Portal + back buttons + perf ===== */ .btn-back{display:inline-flex;align-items:center;gap:.45rem;background:transparent;border:1.5px solid rgba(20,77,158,.35);color:var(--royal,#144D9E);font-weight:600;font-size:.92rem;padding:.5rem .9rem;border-radius:999px;cursor:pointer;margin-bottom:1rem;transition:background .15s,border-color .15s,transform .1s;font-family:inherit;text-decoration:none} .btn-back svg{width:18px;height:18px} .btn-back:hover{background:rgba(20,77,158,.08);border-color:rgba(20,77,158,.6)} .btn-back:active{transform:translateY(1px)} .btn-back.wide{width:100%;justify-content:center;margin-bottom:0} .portal-nav{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.4rem} .portal-chip{display:inline-flex;align-items:center;padding:.55rem 1.1rem;border-radius:999px;background:rgba(20,77,158,.07);border:1.5px solid rgba(20,77,158,.22);color:var(--royal,#144D9E);font-weight:600;font-size:.92rem;text-decoration:none;transition:background .15s,transform .1s} .portal-chip:hover{background:rgba(20,77,158,.14);transform:translateY(-1px)} /* v21: removed .bg-blobs will-change (it was making some cards vanish on scroll on mobiles) */ /* ===== Announcements / slim breaking-news ticker (fixed above navbar, no overlap) ===== */ .news-ticker{ position:fixed; top:0; left:0; right:0; z-index:195; background:linear-gradient(90deg,#0C2F63,#144D9E 50%,#0C2F63); color:#fff; box-shadow:0 2px 10px rgba(12,47,99,.28); border-bottom:1px solid rgba(249,162,11,.38); } .news-ticker::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,transparent,rgba(249,162,11,.55),transparent); pointer-events:none; } .news-ticker-inner{ display:flex; align-items:stretch; max-width:100%; min-height:22px; } .news-ticker.nt-label-right .nt-label{ order:2; box-shadow:inset 1px 0 0 rgba(255,255,255,.13); } .news-ticker.nt-label-right .nt-viewport{ order:1; } .news-ticker.nt-label-hidden .nt-label{ display:none!important; } .nt-label{ display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:0 0 auto; background:linear-gradient(135deg,#F9A20B,#e08f00); color:#12305e; font-weight:800; font-size:10px; line-height:1; letter-spacing:.4px; text-transform:uppercase; padding:0 11px; white-space:nowrap; box-shadow:inset -1px 0 0 rgba(255,255,255,.25); } .nt-viewport{ position:relative; flex:1 1 auto; overflow:hidden; padding:2px 0; min-width:0; display:flex; align-items:center; } .nt-track{ display:flex; align-items:center; width:max-content; white-space:nowrap; will-change:transform; animation-duration:30s; animation-timing-function:linear; animation-iteration-count:infinite; } .nt-segment{ display:inline-flex; align-items:center; flex:0 0 auto; min-width:max-content; } .news-ticker.nt-move-rtl .nt-track{ animation-name:ntScrollRTL; } .news-ticker.nt-move-ltr .nt-track{ animation-name:ntScrollLTR; } .nt-item{ display:inline-flex; align-items:center; gap:6px; padding:0 7px; font-size:11.5px; line-height:1.18; color:#fff; font-weight:600; text-shadow:none; } .nt-ico{ font-size:12px; line-height:1; } .nt-title{ font-weight:600; color:#fff; } .nt-sep{ opacity:.65; margin:0 1px; color:rgba(255,255,255,.76); } .nt-msg{ font-weight:600; opacity:.96; } .nt-gap{ opacity:.42; padding:0 20px; color:rgba(255,255,255,.75); } .nt-link{ color:#fff; text-decoration:none; } .nt-link:hover .nt-msg, .nt-link:hover .nt-title{ text-decoration:underline; } .nt-item[dir="rtl"]{ font-family:'Sakkal Majalla','Traditional Arabic','Amiri','Noto Naskh Arabic','Geeza Pro','Times New Roman',serif; font-size:13px; line-height:1.1; font-weight:600; letter-spacing:0; } .nt-date{ display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; margin-left:2px; padding:1px 6px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:10px; line-height:1.15; font-weight:600; white-space:nowrap; unicode-bidi:isolate; } .nt-date svg{ width:9px; height:9px; opacity:.95; } .nt-item[dir="rtl"] .nt-date{ font-family:Poppins,Arial,sans-serif; font-size:9.5px; font-weight:600; } @keyframes ntScrollRTL{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @keyframes ntScrollLTR{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } } @media (max-width:600px){ .news-ticker-inner{ min-height:19px; } .nt-viewport{ padding:1px 0; } .nt-item{ font-size:10.5px; gap:5px; padding:0 6px; line-height:1.12; font-weight:600; } .nt-item[dir="rtl"]{ font-family:'Sakkal Majalla','Traditional Arabic','Amiri','Noto Naskh Arabic','Geeza Pro','Times New Roman',serif; font-size:12.2px; line-height:1.05; font-weight:600; letter-spacing:0; } .nt-label{ padding:0 8px; font-size:9px; letter-spacing:.25px; font-weight:600; } .nt-ico{ font-size:11px; } .nt-gap{ padding:0 14px; } .nt-date{ font-size:9px; padding:1px 5px; } .nt-date svg{ width:8px; height:8px; } } /* ===== Mobile performance pass ===== */ @media (max-width:760px){ /* Heavy fixed blurred blobs are attractive on desktop but expensive on mobile GPUs. */ .bg-blobs{ display:none!important; } .section{ content-visibility:auto; contain-intrinsic-size:720px; } .hero,.nav,.sale-bar,.news-ticker{ transform:translateZ(0); } .price-card,.soft-card,.voice-card,.review-card,.faq-item,.contact-info,.form{ box-shadow:0 6px 16px rgba(20,77,158,.10); } .flip-clock.simple-cd{ display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.16); font-weight:900; font-size:12px; letter-spacing:.3px; color:#fff; } .nt-track{ will-change:auto; } } /* v89: Mobile contact rows — no clipping, no boxed-card look */ @media (max-width:760px){ #contact .container{ overflow:visible; } .contact-info{ width:100%; overflow:visible; padding-inline:2px; } .contact-info .row{ align-items:center; gap:14px; padding:16px 4px; margin:0; background:transparent!important; box-shadow:none!important; border-radius:0!important; overflow:visible; } .contact-info .ic{ width:42px; height:42px; min-width:42px; flex:0 0 42px; margin-left:0; border-radius:13px; background:rgba(20,77,158,.07); overflow:visible; box-shadow:none; } .contact-info .ic svg{ width:19px; height:19px; display:block; } .contact-info .row > div:last-child{ min-width:0; } .contact-info .row span{ display:block; overflow-wrap:anywhere; word-break:normal; } } /* ===== Legal / policy pages + footer compliance links ===== */ .legal-page{ padding-top:0; } .legal-hero{ padding-top:124px; } .legal-hero .section-head h1{ font-size:clamp(30px,4vw,46px); } .legal-card{ max-width:920px; margin:0 auto; background:rgba(255,255,255,.92); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:34px; } .legal-card h2{ font-size:20px; margin:24px 0 10px; } .legal-card h2:first-child{ margin-top:0; } .legal-card p,.legal-card li{ color:var(--body); font-size:15px; line-height:1.8; } .legal-card ul{ margin:8px 0 0 22px; } .legal-card a{ color:var(--royal); font-weight:700; text-decoration:underline; text-underline-offset:2px; } @media(max-width:640px){ .legal-card{ padding:24px 20px; } } /* ===== v24 Professional multi-column footer ===== */ .site-footer{ background:linear-gradient(180deg,#0f3b7a 0%,#0a2c5c 100%); color:#eef5ff; padding:38px 0 18px; text-align:left; margin-top:28px; border-top:1px solid rgba(249,162,11,.34); } .footer-wrap{ max-width:var(--maxw); } .footer-grid{ display:grid; grid-template-columns:1.45fr .85fr 1.05fr 1.05fr 1.25fr; gap:18px 30px; align-items:start; } .footer-col h3{ color:#fff; font-size:12.5px; text-transform:uppercase; letter-spacing:1.4px; margin:0 0 8px; position:relative; } .footer-col h3::after{ content:""; display:block; width:34px; height:2px; margin-top:8px; background:var(--mustard); border-radius:999px; } .footer-col a{ display:block; color:rgba(247,250,255,.82); font-size:13px; line-height:1.5; margin:4px 0; transition:.18s ease; } .footer-col a:hover{ color:#FFD166; transform:translateX(2px); } .footer-brand{ justify-content:flex-start!important; margin:0 0 8px!important; } .footer-title{ color:#fff!important; font-weight:800; font-size:16px!important; margin:8px 0 4px!important; } .footer-tagline{ color:rgba(238,245,255,.76)!important; font-size:13.5px!important; line-height:1.6; max-width:280px; } .site-footer .footer-socials{ display:flex; justify-content:flex-start; gap:9px; margin:12px 0 0; } .site-footer .footer-socials a{ width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.25); color:#fff; margin:0; } .site-footer .footer-socials a:hover{ background:#fff; color:var(--royal); transform:translateY(-2px); } .site-footer .footer-socials a svg{ width:18px; height:18px; } .footer-contactcol p{ margin:0 0 8px!important; color:rgba(247,250,255,.82)!important; font-size:13px!important; line-height:1.55; } .footer-contactcol b{ display:block; color:#FFD166; font-size:12px; text-transform:uppercase; letter-spacing:.8px; margin-bottom:2px; } .footer-contactcol span{ display:block; } .footer-contactcol a{ display:inline; color:rgba(247,250,255,.88); font-weight:600; } .footer-bottom{ display:flex; justify-content:space-between; gap:16px; margin-top:22px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); color:rgba(238,245,255,.70); font-size:12.5px; } @media(max-width:980px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; } .footer-contactcol{ grid-column:1 / -1; } } @media(max-width:640px){ .site-footer{ text-align:left; padding:42px 0 24px; } .footer-grid{ grid-template-columns:1fr 1fr; gap:24px 18px; } .footer-brandcol,.footer-contactcol{ grid-column:1 / -1; } .footer-bottom{ flex-direction:column; } .footer-col a{ font-size:13px; } } /* v25 smooth mode: when sale/announcement is on, avoid expensive paint work. */ .sale-bar,.news-ticker{ backface-visibility:hidden; -webkit-backface-visibility:hidden; contain:layout paint; } .nav{ backface-visibility:hidden; -webkit-backface-visibility:hidden; } .sale-bar *,.news-ticker *{ text-rendering:optimizeSpeed; } @media (prefers-reduced-motion:reduce){ .nt-track{ animation:none!important; } } @media (max-width:760px){ .sale-bar{ box-shadow:0 1px 6px rgba(0,0,0,.14); } .sale-bar-inner{ gap:7px; padding:5px 10px; } .sale-text{ letter-spacing:.15px; } .price-card:hover{ transform:none; } .price-card,.soft-card,.tl-card,.ach-card{ transition:border-color .18s ease, box-shadow .18s ease; } } /* v25 receipt polish */ .receipt{ background:linear-gradient(180deg,#ffffff,#fbf8f2); border:1px solid #dfe7f3; border-radius:18px; padding:24px; box-shadow:0 16px 34px rgba(20,77,158,.10); position:relative; overflow:hidden; } .receipt::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,#0f4fb3,#f9a20b); } .rcpt-head{ background:linear-gradient(135deg,#f8fbff,#fff8e8); border:1px solid #e5edf8; border-radius:16px; padding:14px 16px; } .rcpt-head.confirmed{ background:linear-gradient(135deg,#f0f8ff,#eefbf3); } .rcpt-head.reserved{ background:linear-gradient(135deg,#fff8e8,#fffdf6); } .rcpt-flag{ margin-left:auto; background:#0f4fb3; color:#fff; font-weight:900; font-size:11px; letter-spacing:.8px; padding:7px 12px; border-radius:999px; } .rcpt-flag.warn{ background:#f59e0b; color:#09214a; } .rrow{ border-bottom:1px dashed rgba(160,174,199,.38); padding:8px 0; } .rrow:last-child{ border-bottom:0; } .rtotal{ background:#f3f7fd; border:0; border-left:4px solid #f9a20b; border-radius:12px; padding:13px 16px; margin-top:16px; } /* v28: locked auto-currency + language/payment receipt additions */ .lang-opts .gopt span:not(.gopt-ico){ display:flex; align-items:center; justify-content:center; min-height:28px; } .gt-price-sub s{ color:#9aa6bd; } /* v30: clean hero frame + modal overflow + professional availability UI */ .hero-frame{ border:1.5px solid rgba(20,77,158,.55) !important; box-shadow:0 18px 42px rgba(20,77,158,.16) !important; background:var(--card) !important; } .hero-frame::after{ content:""; position:absolute; inset:7px; border:1px solid rgba(20,77,158,.18); border-radius:calc(var(--radius-lg) - 7px); pointer-events:none; z-index:2; } .modal{ overflow:hidden; overscroll-behavior:contain; padding:16px; } .modal-card{ box-sizing:border-box; max-width:min(480px, calc(100vw - 32px)); width:100%; overflow-x:hidden !important; margin:0 auto; overscroll-behavior:contain; } .modal-card *, .modal-card *::before, .modal-card *::after{ box-sizing:border-box; } #bookForm, #step1, #step2, .sel-service{ max-width:100%; overflow-wrap:anywhere; } .field input,.field select,.field textarea{ max-width:100%; } .gender-opts{ max-width:100%; min-width:0; } .gopt{ min-width:0; } .avail-note{ display:block; margin-top:10px; width:100%; } .availability-panel{ width:100%; border:1px solid rgba(20,77,158,.14); background:linear-gradient(180deg, rgba(20,77,158,.045), rgba(255,255,255,.9)); border-radius:14px; padding:10px; } .availability-head{ font-size:12px; font-weight:800; color:var(--heading); margin:0 0 8px; display:flex; align-items:center; justify-content:space-between; gap:8px; } .availability-head small{ font-size:11px; color:var(--muted); font-weight:700; } .availability-row{ display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; padding:9px 10px; border-radius:11px; background:#fff; border:1px solid rgba(205,214,230,.72); margin-top:7px; } .availability-role{ font-size:13px; font-weight:800; color:var(--heading); } .availability-lang{ grid-column:1 / -1; font-size:11.5px; color:var(--muted); line-height:1.35; } .availability-status{ font-size:11px; font-weight:900; border-radius:999px; padding:4px 8px; white-space:nowrap; } .availability-row.available .availability-status{ background:rgba(47,158,95,.13); color:#167346; } .availability-row.unavailable .availability-status{ background:rgba(196,61,107,.12); color:#a73562; } .availability-row.unavailable{ background:rgba(196,61,107,.035); } .av-chip{ display:inline-flex; align-items:center; max-width:100%; white-space:normal; line-height:1.35; } @media (max-width:560px){ .modal{ padding:10px; align-items:flex-start; } .modal-card{ max-width:calc(100vw - 20px); padding:24px 18px; max-height:92vh; } .gender-opts{ gap:8px; } .gopt{ padding:11px 8px; font-size:13px; } .availability-row{ grid-template-columns:1fr; } .availability-status{ justify-self:start; } } /* v32: private availability wording, footer credit, desktop hero lift, sale separators */ .availability-head{ justify-content:flex-start !important; } .availability-head small:empty{ display:none !important; } .footer-made{ justify-content:center !important; text-align:center !important; font-size:11.5px !important; letter-spacing:.9px; text-transform:uppercase; } .footer-made .made-with-heart{ color:rgba(238,245,255,.72); } .footer-made .heart{ color:#ff4d6d; font-size:13px; display:inline-block; vertical-align:-1px; margin:0 3px; } .footer-made a{ color:#FFD166; font-weight:800; text-decoration:none; border-bottom:1px solid rgba(255,209,102,.45); padding-bottom:1px; } .footer-made a:hover{ color:#ffffff; border-bottom-color:#ffffff; } .simple-cd{ letter-spacing:.45px; word-spacing:2px; } @media (min-width:981px){ .hero-media{ transform:translateY(-18px); } } /* v34: force footer credit lowercase/small */ .footer-made, .footer-made .made-with-heart, .footer-made a{ text-transform:none !important; font-size:11px !important; letter-spacing:.25px !important; } .footer-made a{ font-weight:700 !important; } /* v35: restore copyright line + square footer heart */ .footer-made{ justify-content:space-between !important; align-items:center !important; gap:16px !important; } .footer-made .heart{ width:14px !important; height:14px !important; min-width:14px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:14px !important; font-size:12px !important; aspect-ratio:1/1 !important; vertical-align:-2px !important; } @media(max-width:640px){ .footer-made{ justify-content:center !important; align-items:center !important; text-align:center !important; } } /* v37: consolidated policies page */ .legal-intro{ font-size:16px!important; color:var(--heading)!important; background:rgba(20,77,158,.06); border:1px solid rgba(20,77,158,.14); border-radius:14px; padding:14px 16px; } .policy-toc{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 8px; padding:12px; border-radius:14px; background:rgba(15,79,179,.045); border:1px solid rgba(15,79,179,.12); } .policy-toc a{ text-decoration:none!important; font-size:12.5px; font-weight:800; padding:7px 10px; border-radius:999px; background:#fff; border:1px solid rgba(205,214,230,.8); color:var(--royal)!important; } .policy-toc a:hover{ background:var(--royal); color:#fff!important; } .legal-note{ background:#fff7df; border-left:4px solid var(--mustard); border-radius:12px; padding:13px 15px; } /* === v40 Professional polish: portal dashboard, receipt steps === */ .next-steps{margin-top:14px;padding:14px 16px;border:1px solid rgba(20,77,158,.16);border-left:4px solid var(--mustard);border-radius:14px;background:#fffaf0;font-size:12.5px;color:var(--body)}.next-steps b{color:var(--heading)}.next-steps ol{margin:8px 0 0 18px;padding:0}.next-steps li{margin:4px 0}.verify-link{display:inline-flex;margin-top:12px;color:var(--royal);font-weight:800;text-decoration:underline;text-underline-offset:3px} .student-dashboard{margin-top:18px}.dash-card{background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow);padding:22px}.dash-card.loading{color:var(--muted);font-weight:700}.eyebrow.mini{font-size:10px}.sid-value.small{font-size:18px;letter-spacing:2px;margin:4px 0 0}.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.dash-grid div{background:#f3f7fd;border:1px solid rgba(20,77,158,.1);border-radius:14px;padding:12px}.dash-grid b{display:block;color:var(--heading);font-size:12px;margin-bottom:4px}.dash-grid span{font-size:13px;color:var(--body);overflow-wrap:anywhere} .btn,.price-card,.soft-card,.review-card,.faq-item,.modal-card,.gen-tool,.sid-box,.verify-box{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}.btn:hover{transform:translateY(-1px)}.price-card:hover,.soft-card:hover,.review-card:hover,.faq-item:hover{box-shadow:0 18px 42px rgba(20,77,158,.16);border-color:rgba(20,77,158,.24)} @media (max-width:760px){.dash-grid{grid-template-columns:1fr}.modal-card{border-radius:20px}.section{padding-top:62px;padding-bottom:62px}} /* v41 safety: abuse-protection honeypot must never be visible or focusable */ .sab-hp,[name="website_url"]{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;display:none!important;visibility:hidden!important;} /* ===== v47 referral code box ===== */ .refer-codebox{margin-top:14px;padding:16px;border:1px dashed #144D9E;border-radius:14px;background:#F7F9FF} .refer-code-label{font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#144D9E;margin-bottom:6px} .refer-code-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .refer-code-row code{font-size:1.2rem;font-weight:800;letter-spacing:.08em;color:#0F3F8F;background:#fff;border:1px solid #cdd9f0;border-radius:10px;padding:8px 14px} .refer-code-hint{margin-top:10px;font-size:.9rem;line-height:1.5;opacity:.9} .refer-count{margin-top:8px;font-size:.92rem} .refer-reward{margin-top:12px;padding:12px 14px;border-radius:12px;background:#FFF6E5;border:1px solid #F9A20B;display:flex;flex-direction:column;gap:4px} .refer-reward.muted{background:#f4f5f7;border-color:#d9dde4} .refer-reward b{color:#7a4b00} .refer-reward.muted b{color:#444} .refer-reward span{font-size:.88rem;line-height:1.45;opacity:.9} .refer-status.ok{color:#1c7a3e} .refer-status.bad{color:#c43d6b} .refer-status.warn{color:#9a6b00} /* ===== v47 referral OTP gate ===== */ .refer-otp{margin-top:14px;padding:14px 16px;border:1px solid #cdd9f0;border-radius:14px;background:#F7F9FF} .refer-otp>label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px} .refer-resend{margin-top:10px;background:none;border:none;color:#144D9E;font-weight:600;cursor:pointer;text-decoration:underline;font-size:.88rem;padding:0} /* v48 referral clarity: helper hint + two-party reward cards */ .field-hint{margin:2px 0 9px;font-size:13px;line-height:1.55;color:#5b6b82} .refer-rewards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px} .refer-reward-card{border:1px solid #e3ecfb;border-radius:14px;padding:16px;background:#fff;display:flex;flex-direction:column;gap:7px} .refer-reward-card.friend{background:linear-gradient(180deg,#ffffff,#fff7ec);border-color:#f3d9a4} .refer-reward-card.you{background:linear-gradient(180deg,#ffffff,#eef4ff);border-color:#cfe0fb} .refer-reward-card .rr-tag{font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#0f4fb3} .refer-reward-card.friend .rr-tag{color:#b9760a} .refer-reward-card .rr-big{font-family:Georgia,'Times New Roman',serif;font-size:30px;line-height:1.1;color:#144D9E} .refer-reward-card.friend .rr-big{color:#b9760a} .refer-reward-card .rr-sub{font-size:13.5px;line-height:1.65;color:#3a4862} @media(max-width:640px){.refer-rewards{grid-template-columns:1fr}} .coupon-note.warn{ color:#9a6a00; font-weight:600; } .field.discount-locked{ position:relative; opacity:.78; } .field.discount-locked .coupon-row input, .field.discount-locked .coupon-row .coupon-btn{ cursor:not-allowed; background:#eef3fb; color:#7a8799; border-color:#d8e2f0; } .field.discount-locked label:after{ content:' Locked'; display:inline-block; margin-left:6px; padding:2px 7px; border-radius:999px; background:#eef3fb; color:#5b6b82; font-size:10px; letter-spacing:.4px; text-transform:uppercase; } /* ===== v84 accessibility + hero typography/layout hardening ===== - Keep the hero name in Anton only (Google Fonts uses display=block in HTML, so no fallback flash). - Lift desktop hero portrait so it aligns with the name/text block. - Make reveal elements visible by default to prevent scroll/slow-device blank glitches. - Disable section content-visibility because it can create temporary empty gaps on some Chrome/device combinations. */ .hero-title, .journey-name{ font-family:'Anton', Impact, sans-serif !important; font-weight:400 !important; letter-spacing:1px; text-transform:uppercase; } @media (min-width:981px){ .hero-grid{ align-items:start; } .hero-media{ align-self:start; transform:translateY(-54px) !important; padding-top:0; } .hero-frame-wrap{ max-width:430px; } } /* v104: the old blanket kill-switch is now gated. Animations run ONLY when enhance.js confirms IntersectionObserver support + no reduced-motion by adding html.sab-anim. In every other case (no JS, old browser, reduced motion, script failure) content stays fully visible — same safety as v84. */ html:not(.sab-anim) .reveal, html:not(.sab-anim) .reveal.sab-up, html:not(.sab-anim) .reveal.sab-left, html:not(.sab-anim) .reveal.sab-right, html:not(.sab-anim) .reveal.sab-zoom, html:not(.sab-anim) .reveal.in{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; } .section{ content-visibility:visible !important; contain-intrinsic-size:auto !important; } @media (max-width:760px){ .section{ content-visibility:visible !important; contain-intrinsic-size:auto !important; } } /* Blog rich content + meta (v90) */ .blog-article-body .blog-h{font-weight:800;color:var(--heading,#0F3B7A);margin:1.4em 0 .5em;line-height:1.3} .blog-article-body h2.blog-h{font-size:1.4rem} .blog-article-body h3.blog-h{font-size:1.15rem} .blog-article-body .blog-ul{margin:.6em 0 1em;padding-left:1.3em;display:flex;flex-direction:column;gap:.4em} .blog-article-body .blog-ul li{line-height:1.7} .blog-article-body strong{font-weight:800;color:var(--heading,#0F3B7A)} .blog-author,.blog-readtime{color:var(--muted,#6B7793);font-size:.82rem;font-weight:600} .blog-faq{margin:34px 0 8px;display:flex;flex-direction:column;gap:12px} .blog-faq .blog-h{margin:0 0 6px;font-size:1.4rem} .blog-faq-item{border:1px solid var(--border,rgba(20,77,158,.14));border-radius:14px;background:var(--card,#fff)} .blog-faq-item summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:700;color:var(--heading,#0F3B7A)} .blog-faq-item summary::-webkit-details-marker{display:none} .blog-faq-item[open] summary{color:var(--royal,#144D9E)} .blog-faq-a{padding:0 18px 16px;color:var(--body,#46506A);line-height:1.7} .blog-article[dir="rtl"] .blog-ul{padding-left:0;padding-right:1.3em} /* ===== v104 — motion, polish & micro-interactions ===== Everything here is gated behind html.sab-anim (added by enhance.js only when IntersectionObserver works and the user does NOT prefer reduced motion), so the page can never go blank or janky on old devices. */ /* ---- Hero entrance (plays once on load; hero is excluded from scroll-reveal so children animate immediately with a smooth stagger) ---- */ html.sab-anim.js .hero .reveal{ opacity:1; transform:none; transition:none; } @keyframes sabRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } } @keyframes sabZoomIn{ from{ opacity:0; transform:scale(.94) translateY(14px); } to{ opacity:1; transform:none; } } html.sab-anim .hero-title{ animation:sabRise .85s cubic-bezier(.22,.61,.36,1) both; } html.sab-anim .role-chips .chip{ animation:sabRise .55s cubic-bezier(.22,.61,.36,1) both; } html.sab-anim .role-chips .chip:nth-child(1){ animation-delay:.18s; } html.sab-anim .role-chips .chip:nth-child(2){ animation-delay:.24s; } html.sab-anim .role-chips .chip:nth-child(3){ animation-delay:.30s; } html.sab-anim .role-chips .chip:nth-child(4){ animation-delay:.36s; } html.sab-anim .role-chips .chip:nth-child(5){ animation-delay:.42s; } html.sab-anim .role-chips .chip:nth-child(6){ animation-delay:.48s; } html.sab-anim .role-chips .chip:nth-child(7){ animation-delay:.54s; } html.sab-anim .hero-sub{ animation:sabRise .7s cubic-bezier(.22,.61,.36,1) .38s both; } html.sab-anim .hero .cta-row{ animation:sabRise .7s cubic-bezier(.22,.61,.36,1) .5s both; } html.sab-anim .hero .socials{ animation:sabRise .7s cubic-bezier(.22,.61,.36,1) .62s both; } html.sab-anim .hero-frame-wrap{ animation:sabZoomIn .9s cubic-bezier(.22,.61,.36,1) .2s both; } html.sab-anim .float-chip{ animation:sabRise .6s cubic-bezier(.22,.61,.36,1) .85s both; } html.sab-anim .float-chip.br{ animation-delay:1s; } /* ---- Softer scroll-reveal on small screens (short vertical fade only) ---- */ @media (max-width:760px){ html.sab-anim.js .reveal, html.sab-anim.js .reveal.sab-up, html.sab-anim.js .reveal.sab-left, html.sab-anim.js .reveal.sab-right, html.sab-anim.js .reveal.sab-zoom{ transform:translateY(18px); transition-duration:.55s; } html.sab-anim.js .reveal.in{ transform:none; } } /* ---- FAQ: smooth open/close (progressive enhancement; unsupported browsers keep the instant toggle) + answer fade ---- */ :root{ interpolate-size: allow-keywords; } html.sab-anim .faq-item::details-content{ height:0; overflow:clip; opacity:0; transition:height .38s cubic-bezier(.22,.61,.36,1), opacity .3s ease, content-visibility .38s allow-discrete; } html.sab-anim .faq-item[open]::details-content{ height:auto; opacity:1; } @keyframes sabFadeIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } } html.sab-anim .faq-item[open] .faq-a{ animation:sabFadeIn .4s ease both; } .faq-item summary{ transition:color .2s ease, background .2s ease; } .faq-item summary:hover{ color:var(--royal); background:rgba(20,77,158,.035); } .faq-item{ transition:border-color .25s ease, box-shadow .25s ease; } .faq-item[open]{ border-color:rgba(20,77,158,.28); box-shadow:0 8px 22px rgba(20,77,158,.10); } /* ---- Nav dropdown caret ---- */ .drop-toggle{ display:inline-flex; align-items:center; gap:4px; } .drop-caret{ width:14px; height:14px; flex:0 0 auto; transition:transform .28s cubic-bezier(.22,.61,.36,1); } .dropdown.open .drop-caret{ transform:rotate(180deg); } @media (hover:hover){ .dropdown:hover .drop-caret{ transform:rotate(180deg); } } /* ---- Button sheen sweep (subtle, on filled buttons) ---- */ .btn{ position:relative; overflow:hidden; } html.sab-anim .btn.fill-royal::after, html.sab-anim .btn.solid::after{ content:""; position:absolute; top:0; bottom:0; left:-75%; width:50%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent); transform:skewX(-18deg); pointer-events:none; transition:left .55s ease; } html.sab-anim .btn.fill-royal:hover::after, html.sab-anim .btn.solid:hover::after{ left:125%; } .btn .btn-ico{ transition:transform .25s ease; } .btn:hover .btn-ico{ transform:translateX(3px); } /* ---- Card & chip micro-interactions ---- */ .chip{ cursor:default; } .chip:hover{ transform:translateY(-2px); background:rgba(249,162,11,.14); color:var(--royal); box-shadow:0 4px 12px rgba(20,77,158,.10); } .soft-card .ic{ transition:transform .35s cubic-bezier(.22,.61,.36,1), background .3s ease, color .3s ease; } .soft-card:hover .ic{ transform:scale(1.08) rotate(-4deg); background:var(--royal); color:#fff; } .stat:hover .stat-num{ color:var(--royal); } .stat-num{ transition:color .3s ease; } html.sab-anim .float-chip .dot{ animation:sabRise .6s both, sabPulse 2.4s ease-in-out 1.6s infinite; } @keyframes sabPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(107,114,44,.35); } 50%{ box-shadow:0 0 0 5px rgba(107,114,44,0); } } .social-icon{ transition:transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; } .social-icon:hover{ transform:translateY(-3px) scale(1.06); box-shadow:0 6px 16px rgba(20,77,158,.18); } .footer-socials a{ transition:transform .25s ease, color .25s ease; } .footer-socials a:hover{ transform:translateY(-3px); } /* ---- Ticker text niceties ---- */ .nt-date{ background:rgba(255,255,255,.12); border-radius:999px; } .news-ticker .nt-viewport{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); } /* ===================================================================== v106 — Liquid-glass capsule nav (DESKTOP ONLY, slightly smaller) + refined Why-Us bento. Mobile keeps ORIGINAL blue nav + white logo. ===================================================================== */ .brand .logo-light{ display:none; } .brand .brand-logo{ margin:0; } .nav-cta-mobile{ display:none; } /* ---------------- DESKTOP CAPSULE NAV (>=961px) ---------------- */ @media (min-width:961px){ .brand .logo-dark{ display:block; } .brand .logo-light{ display:none; } .nav{ background:transparent !important; border-bottom:0 !important; box-shadow:none !important; padding-top:13px; } .nav.scrolled{ background:transparent !important; border-bottom:0 !important; box-shadow:none !important; } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 30px !important; } .nav.scrolled .nav-inner{ padding:0 30px !important; } /* Dark logo — slightly smaller, kept crisp */ .nav .brand-logo{ height:44px; filter:drop-shadow(0 3px 10px rgba(15,59,122,.20)); transition:height .3s ease; } .nav.scrolled .brand-logo{ height:40px; } /* Scroll-blur veil — follows sale/announcement offset */ .nav-blur{ display:block; position:fixed; left:0; right:0; z-index:170; pointer-events:none; top:var(--sab-top-offset, 0px); height:104px; -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); background:linear-gradient(to bottom, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 44%, rgba(255,255,255,.28) 76%, rgba(255,255,255,0) 100%); -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 56%, rgba(0,0,0,.42) 84%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0%, #000 56%, rgba(0,0,0,.42) 84%, transparent 100%); } /* Center capsule — LIQUID GLASS pill */ .nav-inner > nav{ flex:1 1 auto; display:flex; justify-content:center; } .nav-links{ position:relative; display:inline-flex; align-items:center; gap:2px; list-style:none; margin:0; padding:5px 7px; border-radius:999px; isolation:isolate; background:linear-gradient(180deg, rgba(255,255,255,.68) 0%, rgba(233,242,255,.42) 100%); -webkit-backdrop-filter:blur(26px) saturate(1.9); backdrop-filter:blur(26px) saturate(1.9); border:1px solid rgba(255,255,255,.7); box-shadow:0 12px 36px rgba(15,59,122,.18), 0 2px 6px rgba(15,59,122,.08), inset 0 1px 0 rgba(255,255,255,.9), inset 0 -8px 18px rgba(15,59,122,.05), inset 0 0 0 1px rgba(255,255,255,.25); } /* liquid-glass sheen highlights */ .nav-links::before{ content:''; position:absolute; inset:1px 1px auto 1px; height:52%; border-radius:999px; background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); pointer-events:none; z-index:-1; } .nav-links::after{ content:''; position:absolute; left:12%; right:12%; bottom:2px; height:34%; border-radius:999px; background:radial-gradient(60% 100% at 50% 100%, rgba(120,170,240,.18), transparent 70%); pointer-events:none; z-index:-1; } .nav-links > li{ position:relative; } .nav-links > li > a{ display:inline-flex; align-items:center; gap:5px; color:#0F3B7A; background:transparent; border:0 !important; padding:7px 13px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; transition:background .2s ease, color .2s ease, box-shadow .2s ease; } .nav-links > li > a:hover{ background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(224,236,255,.6)); color:var(--royal); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 3px 10px rgba(20,77,158,.14); } .nav-links .drop-caret{ color:inherit; } .nav.scrolled .nav-links{ background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(233,242,255,.55)); } .dropdown-menu{ background:rgba(255,255,255,.99); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); box-shadow:0 20px 46px rgba(15,59,122,.20); border:1px solid rgba(255,255,255,.9); } /* Action button — slightly smaller, glassy edge */ .nav-action{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; padding:5px 5px 5px 16px; border-radius:999px; background:linear-gradient(135deg,#0F3B7A 0%, #144D9E 46%, #3E6FBE 100%); color:#fff; font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.2px; white-space:nowrap; border:1px solid rgba(255,255,255,.38); box-shadow:0 10px 26px rgba(15,59,122,.32), inset 0 1px 0 rgba(255,255,255,.32); transition:transform .25s ease, box-shadow .25s ease; } .nav-action:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(15,59,122,.42), inset 0 1px 0 rgba(255,255,255,.36); } .nav-action .na-ico{ width:30px; height:30px; border-radius:50%; background:#fff; color:var(--royal); display:grid; place-items:center; flex:0 0 auto; transition:transform .3s cubic-bezier(.22,.61,.36,1), background .25s ease, color .25s ease; box-shadow:0 3px 8px rgba(15,59,122,.18); } .nav-action .na-ico svg{ width:15px; height:15px; } .nav-action:hover .na-ico{ transform:rotate(-45deg); background:var(--mustard); color:#0F3B7A; } } /* ---------------- MOBILE/TABLET (<=960px): ORIGINAL nav ---------------- */ @media (max-width:960px){ .nav-blur{ display:none !important; } .nav-action{ display:none !important; } .brand .logo-dark{ display:none; } .brand .logo-light{ display:block; } .nav-cta-mobile{ display:block; } } /* ===================================================================== Why-Us bento + trust strip (refined, no icon/text overlap) ===================================================================== */ .wu-sec{ padding:74px 0; } .wu-bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(182px,auto); gap:20px; } .wu-card{ position:relative; overflow:hidden; border-radius:24px; padding:26px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(180deg,#ffffff,#f6faff); border:1px solid rgba(20,77,158,.12); box-shadow:0 10px 26px rgba(15,59,122,.08); transition:transform .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease, border-color .32s ease; } .wu-card:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(15,59,122,.18); border-color:rgba(20,77,158,.22); } .wu-ic{ width:48px; height:48px; border-radius:15px; display:grid; place-items:center; margin-bottom:16px; flex:0 0 auto; background:linear-gradient(135deg,#EAF1FB,#dbe7fb); color:var(--royal); box-shadow:inset 0 1px 0 rgba(255,255,255,.85); } .wu-ic svg{ width:24px; height:24px; } .wu-eyebrow{ font-size:11px; font-weight:800; letter-spacing:2.2px; text-transform:uppercase; color:var(--royal); margin-bottom:9px; } .wu-card h3{ font-size:19px; margin-bottom:7px; color:var(--heading); line-height:1.25; } .wu-card p{ font-size:13.5px; color:var(--body); line-height:1.62; } .wu-card .wu-ic + h3{ margin-top:2px; } .wu-num{ font-family:'Anton',sans-serif; font-weight:400; font-size:46px; line-height:1; letter-spacing:.5px; color:var(--royal); margin-bottom:7px; } /* Gradient (royal-blue) variants */ .wu-card.grad, .wu-card.grad-alt, .wu-card.grad-deep{ color:#fff; border:0; } .wu-card.grad{ background:linear-gradient(145deg,#0A2C5C 0%, #144D9E 52%, #3E6FBE 100%); box-shadow:0 18px 44px rgba(15,59,122,.34); } .wu-card.grad-alt{ background:linear-gradient(145deg,#123f86 0%, #2f68bd 55%, #5E86D0 100%); box-shadow:0 18px 44px rgba(15,59,122,.30); } .wu-card.grad-deep{ background:linear-gradient(155deg,#061a3b 0%, #0F3B7A 52%, #1E5AA8 100%); box-shadow:0 20px 50px rgba(8,30,66,.42); } .wu-card.grad h3, .wu-card.grad p, .wu-card.grad-alt h3, .wu-card.grad-alt p, .wu-card.grad-deep h3, .wu-card.grad-deep p{ color:#fff; } .wu-card.grad .wu-eyebrow, .wu-card.grad-alt .wu-eyebrow, .wu-card.grad-deep .wu-eyebrow{ color:rgba(255,255,255,.9); } .wu-card.grad .wu-num, .wu-card.grad-alt .wu-num, .wu-card.grad-deep .wu-num{ color:#fff; } .wu-card.grad .wu-ic, .wu-card.grad-alt .wu-ic, .wu-card.grad-deep .wu-ic{ background:rgba(255,255,255,.18); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.30); } .wu-card.grad::after, .wu-card.grad-deep::after{ content:''; position:absolute; width:260px; height:260px; right:-80px; top:-90px; border-radius:50%; background:radial-gradient(circle, rgba(249,162,11,.34), transparent 68%); pointer-events:none; } .wu-card.grad-alt::after{ content:''; position:absolute; width:240px; height:240px; left:-80px; bottom:-90px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.26), transparent 70%); pointer-events:none; } .wu-card.grad::before, .wu-card.grad-alt::before, .wu-card.grad-deep::before{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.06); pointer-events:none; } /* Spans */ .wu-card.big{ grid-column:span 2; grid-row:span 2; } .wu-card.wide{ grid-column:span 2; } .wu-card.tall{ grid-row:span 2; } /* Center hero card */ .wu-card.hero{ align-items:center; text-align:center; justify-content:center; padding:32px; } .wu-card.hero .wu-mark{ font-family:'Aref Ruqaa',serif; font-size:clamp(26px,3vw,34px); margin-bottom:14px; color:#fff; opacity:.95; direction:rtl; line-height:1.7; text-shadow:0 2px 10px rgba(0,0,0,.18); } .wu-card.hero h3{ font-size:clamp(24px,3vw,32px); margin-bottom:10px; } .wu-card.hero p{ font-size:15px; max-width:38ch; color:rgba(255,255,255,.94); margin-top:0; } .wu-card.hero .btn{ margin-top:18px; } .wu-card.hero .btn.on-blue{ background:#fff; color:var(--royal); border-color:#fff; font-weight:700; } .wu-card.hero .btn.on-blue:hover{ background:var(--mustard); color:#0F3B7A; border-color:var(--mustard); } /* Trust strip */ .wu-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .wu-strip .wu-card{ min-height:160px; justify-content:center; } .wu-strip .wu-card p{ margin-top:0; } @media (max-width:900px){ .wu-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:minmax(176px,auto); } .wu-card.big{ grid-column:span 2; grid-row:span 1; min-height:230px; } .wu-card.tall{ grid-row:span 1; } .wu-strip{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .wu-bento{ grid-template-columns:1fr; grid-auto-rows:auto; } .wu-strip{ grid-template-columns:1fr 1fr; gap:14px; } .wu-card{ min-height:auto; padding:22px; } .wu-card.big,.wu-card.wide,.wu-card.tall{ grid-column:auto; grid-row:auto; } } /* ===== Motion effects: OTP boxes + animated success/fail feedback (added) ===== */ .otp-boxes{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0} .otp-box{width:46px;height:54px;text-align:center;font-size:1.35rem;font-weight:800;border:2px solid var(--border,rgba(20,77,158,.22));border-radius:12px;background:var(--card,#fff);color:var(--heading,#0F3B7A);outline:none;transition:border-color .18s,box-shadow .18s,background .25s,color .25s,transform .2s;-webkit-appearance:none} .otp-box:focus{border-color:var(--royal,#144D9E);box-shadow:0 0 0 4px rgba(20,77,158,.14)} .otp-box.filled{transform:scale(1.05)} .otp-box.otp-ok{border-color:#2f9e5f;background:#2f9e5f;color:#fff;animation:otpPop .32s ease} .otp-box.otp-bad{border-color:#c43d6b;background:#c43d6b;color:#fff;animation:otpShake .42s ease} @keyframes otpPop{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}} @keyframes otpShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}} .motion-status{display:inline-flex;align-items:center;gap:10px;margin-top:6px;min-height:34px} .motion-inline-success{width:100%;margin:0 0 14px;padding:10px 12px;border-radius:10px;background:rgba(47,158,95,.08)} .motion-inline-text{font-weight:700;color:#2f9e5f} .motion-circle{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;transform:scale(0);opacity:0} .motion-circle svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round} .motion-circle.show{animation:motionCircleIn .38s cubic-bezier(.34,1.56,.64,1) forwards} .motion-circle.ok{background:#2f9e5f} .motion-circle.bad{background:#c43d6b} .motion-circle path{stroke-dasharray:26;stroke-dashoffset:26;animation:motionDraw .3s .16s ease forwards} @keyframes motionCircleIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:1}} @keyframes motionDraw{to{stroke-dashoffset:0}} .form-success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:clamp(30px,6vw,52px) 14px;animation:formSuccessIn .4s ease} @keyframes formSuccessIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .form-success .motion-circle{width:66px;height:66px;position:static} .form-success .motion-circle svg{width:34px;height:34px;stroke-width:3} .form-success h3{margin:0;color:var(--heading,#0F3B7A);font-size:1.3rem} .form-success p{margin:0;color:var(--muted,#6B7793);max-width:420px} .form-fade-out{animation:formFadeOut .26s ease forwards} @keyframes formFadeOut{to{opacity:0;transform:scale(.98)}} /* ===== Confirm-your-details -> Yes, Continue -> animated tick (stays inside the same box) ===== */ .form-confirm{display:block;opacity:0;animation:formSuccessIn .34s ease forwards} .form-confirm.form-confirm-in{opacity:1} .form-confirm h3{margin:0 0 14px;color:var(--heading,#0F3B7A);font-size:1.15rem} .form-confirm-summary{display:flex;flex-direction:column;gap:2px;margin-bottom:18px;padding:6px 14px;background:var(--card-soft,rgba(20,77,158,.05));border-radius:12px} .form-confirm-summary .rrow{font-size:14px} .form-confirm-actions{display:flex;gap:12px;flex-wrap:wrap} .form-confirm-actions .btn{flex:1;min-width:140px;text-align:center} .form-confirm-actions .form-confirm-yes{background:var(--royal,#144D9E);color:#fff} .form-confirm-actions .form-confirm-yes:hover{background:#0F3B7A} .form-confirm-actions button:disabled{opacity:.6;cursor:default;transform:none} /* ===================================================================== v113 base — SynthAI-style responsive navbar states Home hero top: floating right capsule. Scrolled/inner pages: clean full bar. ===================================================================== */ @media (min-width:961px){ :root{ --sab-nav-offset: 14px; } .nav{ background:transparent !important; border:0 !important; box-shadow:none !important; padding-top:var(--sab-nav-offset) !important; transition:padding .28s ease, background .28s ease, box-shadow .28s ease, border-color .28s ease; } .nav-blur{ display:none !important; } .nav-inner{ max-width:min(1720px, calc(100vw - 96px)); min-height:66px; padding:0 !important; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; } .nav .brand{ flex:0 0 auto; min-width:220px; color:#111; } .brand .logo-dark{ display:block !important; } .brand .logo-light{ display:none !important; } .nav .brand-logo, .nav.scrolled .brand-logo{ height:46px !important; width:auto; filter:none !important; transition:height .28s ease, transform .28s ease; } .nav-inner > nav{ flex:1 1 auto; display:flex; justify-content:flex-end; min-width:0; } .nav-links{ position:relative; display:inline-flex; align-items:center; justify-content:flex-end; gap:7px; margin:0; padding:10px 14px; border-radius:6px; list-style:none; background:rgba(255,255,255,.86) !important; border:1px solid rgba(255,255,255,.72) !important; -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); box-shadow:0 18px 44px rgba(20,31,55,.08), inset 0 1px 0 rgba(255,255,255,.72) !important; } .nav-links::before, .nav-links::after{ display:none !important; } .nav-links > li > a{ display:inline-flex; align-items:center; gap:5px; padding:11px 13px !important; border:0 !important; border-radius:4px !important; background:transparent !important; box-shadow:none !important; color:#171717 !important; font-family:'Poppins',sans-serif; font-size:13px !important; font-weight:500 !important; line-height:1; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; transition:background .18s ease, color .18s ease; } .nav-links > li > a:hover, .nav-links > li > a:focus, .nav-links > li > a.active, .nav-links > li > a[aria-current="page"], .nav-links > li > a[aria-current="true"]{ background:rgba(0,0,0,.045) !important; color:#000 !important; } .nav-links .drop-caret{ width:13px; height:13px; color:currentColor; } .dropdown-menu{ top:calc(100% + 11px); border-radius:8px !important; background:rgba(255,255,255,.98) !important; border:1px solid rgba(0,0,0,.06) !important; box-shadow:0 22px 54px rgba(0,0,0,.14) !important; } .dropdown-menu li a{ color:#171717 !important; border-radius:5px !important; text-transform:none; letter-spacing:0; } .dropdown-menu li a:hover{ background:rgba(0,0,0,.055) !important; color:#000 !important; } .nav-action{ display:inline-flex !important; align-items:center; justify-content:center; flex:0 0 auto; min-height:42px; padding:0 21px !important; border-radius:7px !important; background:#050505 !important; color:#fff !important; border:1px solid #050505 !important; box-shadow:none !important; font-family:'Poppins',sans-serif; font-size:13px !important; font-weight:600 !important; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; transition:transform .18s ease, background .18s ease, box-shadow .18s ease; } .nav-action:hover{ transform:translateY(-1px) !important; background:#151515 !important; box-shadow:0 10px 24px rgba(0,0,0,.16) !important; } .nav-action .na-ico{ display:none !important; } .nav-action .na-label{ display:inline-block; } /* Scrolled home state + all inner pages */ .nav.scrolled, .nav.force-scrolled{ padding-top:0 !important; background:rgba(255,255,255,.94) !important; border-bottom:1px solid rgba(0,0,0,.055) !important; box-shadow:0 1px 18px rgba(0,0,0,.035) !important; -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35); } .nav.scrolled .nav-inner, .nav.force-scrolled .nav-inner{ max-width:min(1720px, calc(100vw - 96px)); min-height:76px; padding:0 !important; } .nav.scrolled .nav-links, .nav.force-scrolled .nav-links{ padding:0; gap:12px; background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none; backdrop-filter:none; } .nav.scrolled .nav-links > li > a, .nav.force-scrolled .nav-links > li > a{ padding:14px 12px !important; } .nav.scrolled .nav-action, .nav.force-scrolled .nav-action{ min-height:44px; padding:0 22px !important; } .nav.scrolled .brand-logo, .nav.force-scrolled .brand-logo{ height:44px !important; } } @media (min-width:961px) and (max-width:1180px){ .nav-inner{ max-width:calc(100vw - 44px); gap:16px; } .nav .brand{ min-width:170px; } .nav .brand-logo, .nav.scrolled .brand-logo, .nav.force-scrolled .brand-logo{ height:40px !important; } .nav-links{ gap:3px; padding:8px 10px; } .nav-links > li > a{ font-size:11.5px !important; padding:10px 8px !important; letter-spacing:.03em; } .nav-action{ min-height:39px; padding:0 15px !important; font-size:11.5px !important; } } /* ===================================================================== v113 — Royal-blue CTA + liquid glass navbar refinements - Get My Services uses the footer royal-blue gradient. - Inner pages start transparent/full layout, then glass bar on scroll. - Home top keeps the floating liquid-glass capsule. ===================================================================== */ @media (min-width:961px){ .nav{ position:fixed; isolation:isolate; } /* Royal-blue footer gradient for the CTA instead of black */ .nav-action, .nav.scrolled .nav-action, .nav.inner-page .nav-action, .nav.force-scrolled .nav-action{ background:linear-gradient(180deg,#0f3b7a 0%,#0a2c5c 100%) !important; border:1px solid rgba(249,162,11,.34) !important; color:#fff !important; box-shadow:0 12px 30px rgba(10,44,92,.28), inset 0 1px 0 rgba(255,255,255,.22) !important; } .nav-action:hover, .nav.scrolled .nav-action:hover, .nav.inner-page .nav-action:hover, .nav.force-scrolled .nav-action:hover{ background:linear-gradient(180deg,#144D9E 0%,#0f3b7a 100%) !important; box-shadow:0 15px 34px rgba(10,44,92,.34), inset 0 1px 0 rgba(255,255,255,.28) !important; } /* Home hero state: more liquid/glass like the screenshot */ body:not(.mobile-menu-open) .nav:not(.inner-page):not(.scrolled) .nav-links{ border-radius:6px; background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.54)) !important; border:1px solid rgba(255,255,255,.88) !important; -webkit-backdrop-filter:blur(24px) saturate(1.75); backdrop-filter:blur(24px) saturate(1.75); box-shadow:0 18px 46px rgba(15,59,122,.10), 0 2px 8px rgba(255,255,255,.34), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -12px 24px rgba(20,77,158,.045) !important; overflow:hidden; } .nav:not(.inner-page):not(.scrolled) .nav-links::before{ display:block !important; content:''; position:absolute; inset:1px 1px auto 1px; height:52%; border-radius:5px 5px 12px 12px; background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,0)); pointer-events:none; z-index:-1; } .nav:not(.inner-page):not(.scrolled) .nav-links::after{ display:block !important; content:''; position:absolute; left:10%; right:10%; bottom:0; height:40%; border-radius:999px; background:radial-gradient(65% 100% at 50% 100%,rgba(20,77,158,.11),transparent 72%); pointer-events:none; z-index:-1; } /* Inner pages: full navbar layout at top, but NO white/capsule background. */ .nav.inner-page:not(.scrolled){ padding-top:14px !important; background:transparent !important; border-bottom:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } .nav.inner-page:not(.scrolled) .nav-inner{ min-height:66px; max-width:min(1720px, calc(100vw - 96px)); padding:0 !important; } .nav.inner-page:not(.scrolled) .nav-links{ padding:0 !important; gap:12px; background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; overflow:visible; } .nav.inner-page:not(.scrolled) .nav-links::before, .nav.inner-page:not(.scrolled) .nav-links::after{ display:none !important; } .nav.inner-page:not(.scrolled) .nav-links > li > a{ padding:14px 12px !important; background:transparent !important; color:#111 !important; text-shadow:0 1px 10px rgba(255,255,255,.38); } .nav.inner-page:not(.scrolled) .nav-links > li > a:hover, .nav.inner-page:not(.scrolled) .nav-links > li > a:focus, .nav.inner-page:not(.scrolled) .nav-links > li > a.active, .nav.inner-page:not(.scrolled) .nav-links > li > a[aria-current="page"], .nav.inner-page:not(.scrolled) .nav-links > li > a[aria-current="true"]{ background:rgba(255,255,255,.38) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.55) !important; } /* Scrolled state: full liquid glass bar for home and inner pages */ .nav.scrolled, .nav.inner-page.scrolled, .nav.force-scrolled{ padding-top:0 !important; background:linear-gradient(180deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.66) 100%) !important; border-bottom:1px solid rgba(255,255,255,.58) !important; box-shadow:0 1px 0 rgba(255,255,255,.72) inset, 0 14px 38px rgba(15,59,122,.08) !important; -webkit-backdrop-filter:blur(26px) saturate(1.85) !important; backdrop-filter:blur(26px) saturate(1.85) !important; } .nav.scrolled::before, .nav.inner-page.scrolled::before, .nav.force-scrolled::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:-1; background: linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,0) 58%), radial-gradient(70% 130% at 50% 0%,rgba(20,77,158,.08),transparent 70%); } .nav.scrolled .nav-links, .nav.inner-page.scrolled .nav-links, .nav.force-scrolled .nav-links{ padding:0 !important; gap:12px; background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } }