/* ================================================================== CodeByze — Frontend styles (complements Tailwind CDN utilities) ================================================================== */ /* overflow-x must be clamped on too — on mobile the document (not body) is the scrolling element, so `body { overflow-x:hidden }` alone still let off-canvas decorations (AOS transforms, blurred orbs) create a sideways scroll. */ html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { overflow-x: hidden; transition:background-color .35s ease, color .35s ease; } ::selection { background: var(--primary); color: #fff; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: var(--brand-gradient); border-radius: 999px; border: 2px solid #f1f5f9; } /* ---- Brand helpers ------------------------------------------------ */ .grad-text{ background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-gradient{ background: var(--brand-gradient); } .section{ padding-top: 4.5rem; padding-bottom: 4.5rem; } @media (min-width:768px){ .section{ padding-top: 6rem; padding-bottom: 6rem; } } /* Premium interaction primitives ---------------------------------- */ .script-heading{ font-family:'Great Vibes', cursive; font-size:clamp(2.3rem, 5vw, 4.6rem); font-weight:400; letter-spacing:.01em; line-height:.82; } .glass-panel{ border:1px solid rgba(255,255,255,.58); background:rgba(255,255,255,.62); box-shadow:0 22px 55px -36px rgba(15,23,42,.38); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } .premium-card{ position:relative; overflow:hidden; border:1px solid rgba(226,232,240,.88); background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(248,250,252,.77)); box-shadow:0 24px 48px -36px rgba(15,23,42,.42); transition:transform .3s cubic-bezier(.2,.75,.25,1), box-shadow .3s ease, border-color .3s ease; will-change:transform; } .premium-card::before{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(125deg, rgba(255,255,255,.55), transparent 42%); } .premium-card:hover{ border-color:color-mix(in srgb, var(--primary) 26%, white); box-shadow:0 30px 58px -34px rgba(15,118,110,.3); } .btn-brand, .btn-vibrant{ isolation:isolate; overflow:hidden; } .btn-brand::after, .btn-vibrant::after{ content:""; position:absolute; z-index:0; width:0; height:0; border-radius:999px; background:rgba(255,255,255,.28); transform:translate(-50%,-50%); transition:width .55s ease, height .55s ease; pointer-events:none; } .btn-brand:hover::after, .btn-vibrant:hover::after{ width:18rem; height:18rem; } .btn-brand > *, .btn-vibrant > *{ position:relative; z-index:1; } .ripple{ position:absolute; z-index:3; border-radius:999px; background:rgba(255,255,255,.38); transform:scale(0); pointer-events:none; animation:ripple .65s linear; } @keyframes ripple{ to{ transform:scale(2.7); opacity:0; } } .theme-icon-moon{ display:none; } /* ============================================================ Header action buttons One geometry for every control in the navbar — the square icon buttons and the text CTAs are the same height, radius and hover, so the row reads as a single set rather than four unrelated bits. ============================================================ */ .hbtn{ position:relative; display:inline-grid; place-items:center; flex:none; width:2.6rem; height:2.6rem; border-radius:.8rem; border:1.6px solid #dbe5ef; background:#fff; color:#475569; cursor:pointer; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } .hbtn svg{ width:1.12rem; height:1.12rem; } .hbtn:hover{ transform:translateY(-2px); } .hbtn:active{ transform:translateY(0); } .hbtn:focus-visible{ outline:2px solid var(--secondary); outline-offset:2px; } .hbtn-plain:hover{ color:var(--primary); border-color:color-mix(in srgb, var(--primary) 35%, white); box-shadow:0 12px 20px -14px rgba(15,118,110,.55); } .hbtn-green{ color:var(--primary); border-color:color-mix(in srgb, var(--primary) 40%, white); } .hbtn-green:hover{ background:color-mix(in srgb, var(--primary) 8%, white); border-color:var(--primary); box-shadow:0 12px 22px -14px var(--primary); } .hbtn-blue{ color:var(--secondary); border-color:color-mix(in srgb, var(--secondary) 40%, white); } .hbtn-blue:hover{ background:color-mix(in srgb, var(--secondary) 8%, white); border-color:var(--secondary); box-shadow:0 12px 22px -14px var(--secondary); } /* Text CTAs in the navbar snap to the same height as the icon buttons. */ .navbar .btn-line, .navbar .btn-vibrant{ height:2.6rem; padding-top:0; padding-bottom:0; } /* ---- Tooltip (icon-only buttons need to say what they do) -------- */ .hbtn[data-tip]::after{ content:attr(data-tip); position:absolute; top:calc(100% + .5rem); left:50%; transform:translate(-50%,-4px); z-index:60; white-space:nowrap; padding:.35rem .6rem; border-radius:.5rem; background:#0f172a; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.01em; box-shadow:0 10px 24px -12px rgba(2,6,23,.8); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .hbtn[data-tip]::before{ content:""; position:absolute; top:calc(100% + .1rem); left:50%; z-index:60; transform:translate(-50%,-4px); border:5px solid transparent; border-bottom-color:#0f172a; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; } .hbtn[data-tip]:hover::after, .hbtn[data-tip]:focus-visible::after, .hbtn[data-tip]:hover::before, .hbtn[data-tip]:focus-visible::before{ opacity:1; transform:translate(-50%,0); } /* ---- Ripple ------------------------------------------------------ Lives in its own overflow-hidden host so a button can clip the ripple without also clipping its tooltip. */ .rip-host{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; z-index:1; } .rip{ position:absolute; border-radius:999px; transform:translate(-50%,-50%) scale(0); background:currentColor; opacity:.22; animation:rip .6s ease-out forwards; } .btn-vibrant .rip, .btn-brand .rip{ background:#fff; opacity:.4; } /* .btn-vibrant > * is lifted to z-index 2 for the shine sweep — keep the ripple underneath the label rather than washing over it. */ .btn-vibrant > .rip-host{ z-index:1; } @keyframes rip{ to{ transform:translate(-50%,-50%) scale(2.6); opacity:0; } } /* The install button must stay hidden until the browser reports the app is installable — a responsive display class would otherwise beat the UA rule for [hidden] and show it always. */ [data-pwa-install][hidden]{ display:none !important; } html[data-theme="dark"] .hbtn{ border-color:rgba(148,163,184,.2); background:#102437; color:#cbd5e1; } html[data-theme="dark"] .hbtn[data-tip]::after{ background:#e2e8f0; color:#0f172a; } html[data-theme="dark"] .hbtn[data-tip]::before{ border-bottom-color:#e2e8f0; } html[data-theme="dark"] body{ background:#071523 !important; color:#e2e8f0; } html[data-theme="dark"] .navbar{ background:rgba(7,21,35,.92); border-color:rgba(148,163,184,.16); } html[data-theme="dark"] .nav-link{ color:#cbd5e1; } html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .nav-link.active{ color:#5eead4; background:rgba(94,234,212,.1); } html[data-theme="dark"] .theme-toggle{ border-color:rgba(148,163,184,.2); background:#102437; color:#fbbf24; } html[data-theme="dark"] .theme-icon-sun{ display:none; } html[data-theme="dark"] .theme-icon-moon{ display:block; } html[data-theme="dark"] .card, html[data-theme="dark"] .premium-card{ border-color:rgba(148,163,184,.16); background:#102437; color:#e2e8f0; } html[data-theme="dark"] .glass-card, html[data-theme="dark"] .glass-panel{ border-color:rgba(148,163,184,.16); background:rgba(16,36,55,.75); } html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .text-slate-500, html[data-theme="dark"] .text-slate-400{ color:#a8bbce !important; } html[data-theme="dark"] .text-ink, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4{ color:#f8fafc; } html[data-theme="dark"] .bg-slate-50{ background:#0b1d2e !important; } html[data-theme="dark"] .form-input{ border-color:rgba(148,163,184,.24); background:#0b1d2e; color:#f8fafc; } /* ---- Glass navigation -------------------------------------------- */ .glass-nav{ background: rgba(255,255,255,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 8px 30px -12px rgba(2,6,23,.12); } #siteHeader.scrolled .glass-nav{ background: rgba(255,255,255,.92); box-shadow: 0 10px 34px -14px rgba(2,6,23,.22); } /* ---- Glass card --------------------------------------------------- */ .glass-card{ background: rgba(255,255,255,.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.65); } /* ---- Buttons ------------------------------------------------------ */ .btn-brand{ display:inline-flex; align-items:center; gap:.5rem; justify-content:center; padding:.6rem 1.25rem; border-radius:.85rem; font-weight:700; color:#fff; background: var(--brand-gradient); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--primary) 70%, transparent); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; cursor:pointer; } .btn-brand:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--secondary) 65%, transparent); } .btn-brand:active{ transform: translateY(0); } .btn-ghost{ display:inline-flex; align-items:center; gap:.5rem; justify-content:center; padding:.6rem 1.1rem; border-radius:.85rem; font-weight:700; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, white); transition: background .2s ease, transform .2s ease; cursor:pointer; } .btn-ghost:hover{ background: color-mix(in srgb, var(--primary) 16%, white); transform: translateY(-2px); } .btn-outline{ display:inline-flex; align-items:center; gap:.5rem; justify-content:center; padding:.6rem 1.25rem; border-radius:.85rem; font-weight:700; color: var(--ink,#0f172a); border:1.5px solid #e2e8f0; background:#fff; transition:.2s; cursor:pointer; } .btn-outline:hover{ border-color: var(--primary); color: var(--primary); } .btn-white{ display:inline-flex; align-items:center; gap:.5rem; justify-content:center; padding:.6rem 1.25rem; border-radius:.85rem; font-weight:700; color: var(--primary); background:#fff; transition: transform .2s ease, box-shadow .2s ease; cursor:pointer; box-shadow:0 8px 20px -8px rgba(2,6,23,.25); } .btn-white:hover{ transform: translateY(-2px); } /* ---- Forms -------------------------------------------------------- */ .form-label{ display:block; font-size:.8rem; font-weight:600; color:#334155; margin-bottom:.35rem; } .form-input{ width:100%; padding:.7rem .9rem; border:1.5px solid #e2e8f0; border-radius:.75rem; font-size:.9rem; color:#0f172a; background:#fff; transition: border-color .15s, box-shadow .15s; } .form-input:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); } .form-input::placeholder{ color:#94a3b8; } /* ---- Chips / badges ---------------------------------------------- */ .chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.02em; background: color-mix(in srgb, var(--primary) 12%, white); color: var(--primary); } .chip-white{ background: rgba(255,255,255,.15); color:#fff; } /* ---- Hero mesh background ----------------------------------------- */ .hero-mesh{ position:relative; isolation:isolate; } .hero-mesh::before{ content:""; position:absolute; inset:-20% -10% auto -10%; height:520px; z-index:-1; background: radial-gradient(50% 60% at 15% 20%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 60%), radial-gradient(45% 55% at 85% 15%, color-mix(in srgb, var(--secondary) 26%, transparent), transparent 60%), radial-gradient(40% 50% at 60% 70%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); filter: blur(20px); /* Decorative only — it overflows below the hero, so it must never intercept clicks on the content underneath (e.g. the verify form). */ pointer-events:none; } /* Decorative blobs elsewhere must not swallow clicks either. */ .faq-orb, .blog-hero-orb, .grid-bg{ pointer-events:none; } .grid-bg{ background-image: linear-gradient(to right, rgba(15,23,42,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(15,23,42,.04) 1px, transparent 1px); background-size: 42px 42px; } /* ---- Feature/hover cards ----------------------------------------- */ .lift{ transition: transform .28s ease, box-shadow .28s ease; } .lift:hover{ transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(2,6,23,.28); } .card{ background:#fff; border:1px solid #eef2f7; border-radius:1.25rem; } /* Icon tile */ .icon-tile{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:.9rem; color:#fff; background: var(--brand-gradient); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--primary) 60%, transparent); } .icon-tile-soft{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:.9rem; background: color-mix(in srgb, var(--primary) 12%, white); color: var(--primary); } /* ---- Logo marquee ------------------------------------------------- */ .marquee{ display:flex; gap:3rem; width:max-content; animation: marquee 28s linear infinite; } .marquee:hover{ animation-play-state: paused; } @keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } /* ---- Accordion ---------------------------------------------------- */ .accordion-item{ border:1px solid #eef2f7; border-radius:1rem; overflow:hidden; background:#fff; } .accordion-item + .accordion-item{ margin-top:.75rem; } .accordion-body{ max-height:0; overflow:hidden; transition: max-height .35s ease; } .accordion-item.open .accordion-body{ max-height:420px; } .accordion-item.open .accordion-icon{ transform: rotate(45deg); } .accordion-icon{ transition: transform .3s ease; } /* ---- Counter ------------------------------------------------------ */ .counter{ font-variant-numeric: tabular-nums; } /* ---- Timeline ----------------------------------------------------- */ .timeline{ position:relative; } .timeline::before{ content:""; position:absolute; left:1rem; top:0; bottom:0; width:2px; background: linear-gradient(var(--primary), var(--secondary)); } @media(min-width:768px){ .timeline::before{ left:50%; transform:translateX(-50%);} } /* ---- Prose (blog / policy pages) --------------------------------- */ .prose-cb{ color:#334155; line-height:1.75; } .prose-cb h2{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.6rem; color:#0f172a; margin:1.75rem 0 .75rem; } .prose-cb h3{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.25rem; color:#0f172a; margin:1.4rem 0 .6rem; } .prose-cb p{ margin:.75rem 0; } .prose-cb ul{ list-style:disc; padding-left:1.4rem; margin:.75rem 0; } .prose-cb ol{ list-style:decimal; padding-left:1.4rem; margin:.75rem 0; } .prose-cb li{ margin:.35rem 0; } .prose-cb a{ color: var(--secondary); text-decoration:underline; } .prose-cb img{ border-radius:1rem; margin:1rem 0; max-width:100%; } .prose-cb blockquote{ border-left:4px solid var(--primary); padding-left:1rem; color:#475569; font-style:italic; margin:1rem 0; } /* ---- Reveal (fallback if AOS off) -------------------------------- */ [data-aos]{ pointer-events:auto; } /* ---- Utilities ---------------------------------------------------- */ .no-scroll{ overflow:hidden; } .line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* ================================================================== Header — green→blue utility bar + vibrant animated nav ================================================================== */ /* ---- Top utility bar (collapses on scroll) ----------------------- */ .topbar-wrap{ max-height:60px; overflow:hidden; opacity:1; transition:max-height .4s ease, opacity .3s ease; } #siteHeader.scrolled .topbar-wrap{ max-height:0; opacity:0; } .topbar{ background:linear-gradient(90deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 45%, var(--secondary)) 50%, var(--secondary) 100%); color:#fff; } .topbar a{ color:#fff; text-decoration:none; } .tb-item{ display:inline-flex; align-items:center; gap:.45rem; color:rgba(255,255,255,.92); font-weight:500; white-space:nowrap; } .tb-item svg{ width:1rem; height:1rem; flex:none; opacity:.9; } a.tb-item:hover{ color:#fff; } .tb-sep{ width:1px; height:1rem; background:rgba(255,255,255,.28); } .tb-soc{ display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:.5rem; background:rgba(255,255,255,.16); color:#fff; transition:transform .2s ease, background .2s ease; } .tb-soc svg{ width:.95rem; height:.95rem; } .tb-soc:hover{ background:rgba(255,255,255,.32); transform:translateY(-2px); } /* ---- Main nav bar ------------------------------------------------- */ .navbar{ background:#fff; border-bottom:1px solid rgba(2,6,23,.06); transition:box-shadow .3s ease; } #siteHeader.scrolled .navbar{ box-shadow:0 12px 30px -16px rgba(2,6,23,.28); } /* Header logo from the bundled brand asset. */ .site-logo-link{ display:block; line-height:0; } .site-logo{ display:block; width:10.5rem; height:auto; max-width:100%; } /* Courses mega-menu ------------------------------------------------ */ .has-mega{ position:relative; } .mega{ position:absolute; z-index:60; top:calc(100% + .5rem); left:0; width:29rem; padding:.65rem; border:1px solid #e2e8f0; border-radius:1rem; background:#fff; box-shadow:0 24px 48px -18px rgba(15,23,42,.28); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-.5rem); transition:opacity .2s ease, visibility .2s ease, transform .2s ease; } .has-mega:hover .mega, .has-mega:focus-within .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); } .mega-item{ display:flex; align-items:flex-start; gap:.75rem; padding:.7rem; border-radius:.75rem; color:#334155; text-decoration:none; } .mega-item:hover{ color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, white); } .mega-ic{ display:grid; place-items:center; flex:none; width:2.5rem; height:2.5rem; border-radius:.75rem; color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, white); } .mega-ic svg{ display:block; width:1.25rem; height:1.25rem; } .mega-title{ display:block; font-size:.875rem; font-weight:700; line-height:1.3; } .mega-desc{ display:block; margin-top:.15rem; font-size:.75rem; line-height:1.35; color:#64748b; } .mega-foot{ margin-top:.35rem; padding:.75rem .7rem .15rem; border-top:1px solid #e2e8f0; } #mobileMenu .site-logo{ width:9.5rem; } #mobileMenu .mega-ic{ width:2rem; height:2rem; border-radius:.6rem; } #mobileMenu .mega-ic svg{ width:1rem; height:1rem; } /* Nav links with animated gradient underline */ .nav-link{ position:relative; display:inline-flex; align-items:center; gap:.25rem; white-space:nowrap; padding:.45rem .55rem; border-radius:.6rem; font-weight:600; font-size:.875rem; color:#334155; transition:color .2s ease, background .2s ease; } .nav-link::after{ content:""; position:absolute; left:.55rem; right:.55rem; bottom:.2rem; height:2.5px; border-radius:999px; background:var(--brand-gradient); transform:scaleX(0); transform-origin:center; transition:transform .28s ease; } .nav-link:hover{ color:var(--primary); } .nav-link:hover::after{ transform:scaleX(1); } .nav-link.active{ color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, white); } .nav-link.active::after{ transform:scaleX(1); } /* ---- Vibrant primary button (animated green→blue + shine) -------- */ .btn-vibrant{ position:relative; overflow:hidden; isolation:isolate; display:inline-flex; align-items:center; gap:.5rem; justify-content:center; padding:.6rem 1.15rem; border-radius:.8rem; font-weight:700; font-size:.9rem; color:#fff; cursor:pointer; background:linear-gradient(120deg, var(--primary), var(--secondary), var(--accent), var(--primary)); background-size:280% 280%; animation:btnGrad 7s ease infinite; box-shadow:0 12px 26px -12px color-mix(in srgb, var(--secondary) 75%, transparent); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; } .btn-vibrant svg{ width:1.1rem; height:1.1rem; } .btn-vibrant > *{ position:relative; z-index:2; } .btn-vibrant::before{ content:""; position:absolute; top:0; bottom:0; left:-140%; width:55%; z-index:1; background:linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent); transform:skewX(-20deg); } .btn-vibrant:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 18px 34px -14px color-mix(in srgb, var(--secondary) 80%, transparent); } .btn-vibrant:hover::before{ animation:btnShine .9s ease; } .btn-vibrant:active{ transform:translateY(0); } @keyframes btnGrad{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes btnShine{ from{ left:-140%; } to{ left:140%; } } /* ---- Outline vibrant buttons ------------------------------------- */ .btn-line{ position:relative; /* anchors the ripple host */ display:inline-flex; align-items:center; gap:.45rem; justify-content:center; padding:.55rem 1rem; border-radius:.8rem; font-weight:700; font-size:.9rem; background:#fff; border:1.6px solid transparent; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease; } .btn-line svg{ width:1.05rem; height:1.05rem; } .btn-line-blue{ color:var(--secondary); border-color:color-mix(in srgb, var(--secondary) 40%, white); } .btn-line-blue:hover{ background:color-mix(in srgb, var(--secondary) 8%, white); border-color:var(--secondary); transform:translateY(-2px); box-shadow:0 12px 22px -14px var(--secondary); } .btn-line-green{ color:var(--primary); border-color:color-mix(in srgb, var(--primary) 40%, white); } .btn-line-green:hover{ background:color-mix(in srgb, var(--primary) 8%, white); border-color:var(--primary); transform:translateY(-2px); box-shadow:0 12px 22px -14px var(--primary); } /* ---- Footer ------------------------------------------------------ */ .site-footer{ isolation:isolate; overflow:visible; background:linear-gradient(140deg, #071a28 0%, #0c2036 48%, #0c1730 100%); } .site-footer::before{ content:""; position:absolute; z-index:-1; inset:0; opacity:.26; background-image:linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom, #000, transparent 76%); } .footer-accent{ height:4px; background:linear-gradient(90deg, var(--primary), var(--accent), var(--secondary), var(--primary)); background-size:220% 100%; animation:footerGradient 7s linear infinite; } .footer-orb{ position:absolute; z-index:-1; width:28rem; height:28rem; border-radius:999px; filter:blur(85px); pointer-events:none; animation:footerFloat 12s ease-in-out infinite alternate; } .footer-orb-left{ top:4rem; left:-14rem; background:color-mix(in srgb, var(--primary) 60%, transparent); } .footer-orb-right{ right:-12rem; bottom:0; background:color-mix(in srgb, var(--secondary) 54%, transparent); animation-delay:-5s; } .footer-newsletter{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.28); border-radius:1.5rem; background:linear-gradient(120deg, var(--primary), var(--secondary)); box-shadow:0 24px 48px -24px rgba(2,6,23,.72); } .footer-newsletter::after{ content:""; position:absolute; width:18rem; height:18rem; right:-5rem; top:-9rem; border-radius:999px; background:rgba(255,255,255,.12); filter:blur(2px); pointer-events:none; } .footer-newsletter > *{ position:relative; z-index:1; } .footer-kicker{ display:inline-flex; padding:.3rem .65rem; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(255,255,255,.13); font-size:.69rem; font-weight:800; letter-spacing:.09em; line-height:1; text-transform:uppercase; } .footer-subscribe{ display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.75rem 1.1rem; border-radius:.75rem; background:#071a28; color:#fff; font-size:.875rem; font-weight:800; transition:transform .2s ease, background .2s ease, box-shadow .2s ease; } .footer-subscribe:hover{ transform:translateY(-2px); background:#020b14; box-shadow:0 12px 22px -13px #020b14; } .footer-logo-card{ display:inline-flex; width:11.5rem; padding:.45rem .65rem; border-radius:.9rem; background:#fff; box-shadow:0 12px 26px -14px rgba(0,0,0,.75); transition:transform .25s ease, box-shadow .25s ease; } .footer-logo-card:hover{ transform:translateY(-3px); box-shadow:0 18px 30px -16px rgba(0,0,0,.9); } .footer-logo-card img{ width:100%; height:auto; } .footer-cert{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .7rem; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.07); color:#e2e8f0; font-size:.69rem; font-weight:700; } .footer-cert svg{ color:#5eead4; } .footer-heading{ position:relative; margin-bottom:1rem; color:#f8fafc; font-size:.875rem; font-weight:800; letter-spacing:.015em; } .footer-heading::after{ content:""; display:block; width:1.65rem; height:2px; margin-top:.55rem; border-radius:99px; background:var(--brand-gradient); } .footer-link{ display:inline-flex; align-items:center; gap:.45rem; color:#a3b1c6; font-weight:500; font-size:.9rem; text-decoration:none; transition:color .22s ease, transform .22s ease; } .footer-link:hover{ color:#5eead4; transform:translateX(.28rem); } .footer-link-arrow{ display:grid; place-items:center; font-size:.7rem; color:#2dd4bf; opacity:.7; transition:transform .22s ease, opacity .22s ease; } .footer-link:hover .footer-link-arrow{ transform:translateX(.2rem); opacity:1; } .footer-contact{ display:flex; align-items:flex-start; gap:.65rem; } .footer-contact-icon{ display:grid; place-items:center; flex:none; width:1.6rem; height:1.6rem; margin-top:-.15rem; border-radius:.5rem; background:rgba(45,212,191,.12); color:#5eead4; } .footer-contact-icon svg{ width:.82rem; height:.82rem; } .footer-contact a{ color:#94a3b8; text-decoration:none; transition:color .2s ease; } .footer-contact a:hover{ color:#fff; } .ft-soc{ display:grid; place-items:center; width:2.25rem; height:2.25rem; border:1px solid rgba(255,255,255,.12); border-radius:.7rem; background:rgba(255,255,255,.07); color:#e2e8f0; transition:transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease; } .ft-soc svg{ width:1rem; height:1rem; } .ft-soc:hover{ transform:translateY(-3px) rotate(-3deg); border-color:transparent; background:var(--brand-gradient); color:#fff; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.1); background:rgba(2,10,22,.32); } .footer-payment-label{ margin-right:.2rem; color:#94a3b8; font-size:.69rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .payment-chip{ padding:.32rem .55rem; border:1px solid rgba(255,255,255,.12); border-radius:.4rem; background:rgba(255,255,255,.07); color:#cbd5e1; font-size:.65rem; font-weight:800; letter-spacing:.025em; } .footer-copyright{ color:#94a3b8; font-size:.72rem; line-height:1.35; } .footer-copyright p + p{ color:#64748b; } .footer-copyright span{ color:#5eead4; } @keyframes footerGradient{ from{ background-position:0% 50%; } to{ background-position:220% 50%; } } @keyframes footerFloat{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(3rem,-2rem,0) scale(1.1); } } /* ---- Gallery ----------------------------------------------------- */ .gallery-page{ overflow:hidden; background:linear-gradient(180deg, #f8fbff 0%, #fff 52%, #f7fbff 100%); } .gallery-hero{ position:relative; isolation:isolate; overflow:hidden; min-height:25rem; padding:5.75rem 0 7.5rem; background:linear-gradient(122deg, #effcfb 0%, #fff 48%, #e7f0ff 100%); } .gallery-hero-grid{ position:absolute; z-index:-1; inset:0; opacity:.35; background-image:linear-gradient(rgba(15,118,110,.13) 1px, transparent 1px),linear-gradient(90deg, rgba(37,99,235,.1) 1px, transparent 1px); background-size:46px 46px; mask-image:linear-gradient(115deg, #000, transparent 76%); } .gallery-hero-glow{ position:absolute; z-index:-1; border-radius:999px; filter:blur(10px); opacity:.72; } .gallery-hero-glow-one{ width:31rem; height:31rem; top:-19rem; left:-8rem; background:radial-gradient(circle, color-mix(in srgb, var(--primary) 30%, transparent) 0%, transparent 70%); } .gallery-hero-glow-two{ width:35rem; height:35rem; right:-8rem; bottom:-21rem; background:radial-gradient(circle, color-mix(in srgb, var(--secondary) 27%, transparent) 0%, transparent 69%); } .gallery-orbit{ position:absolute; z-index:-1; width:12rem; height:12rem; border:1px solid color-mix(in srgb, var(--secondary) 26%, transparent); border-radius:999px; animation:galleryOrbit 16s ease-in-out infinite alternate; } .gallery-orbit::after{ content:""; position:absolute; width:.55rem; height:.55rem; border-radius:999px; background:var(--secondary); box-shadow:0 0 0 .35rem color-mix(in srgb, var(--secondary) 13%, transparent); } .gallery-orbit-one{ right:10%; top:20%; } .gallery-orbit-one::after{ top:1.25rem; right:1.35rem; } .gallery-orbit-two{ width:7rem; height:7rem; left:12%; bottom:7%; border-color:color-mix(in srgb, var(--primary) 28%, transparent); animation-delay:-7s; } .gallery-orbit-two::after{ bottom:1rem; left:.8rem; background:var(--primary); box-shadow:0 0 0 .35rem color-mix(in srgb, var(--primary) 13%, transparent); } .gallery-hero-content{ position:relative; max-width:56rem; text-align:center; } .gallery-eyebrow{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .8rem; border:1px solid color-mix(in srgb, var(--primary) 16%, white); border-radius:999px; background:rgba(255,255,255,.7); color:var(--primary); box-shadow:0 8px 25px -18px rgba(15,118,110,.5); font-size:.74rem; font-weight:800; letter-spacing:.035em; } .gallery-eyebrow svg{ width:1rem; height:1rem; } .gallery-title{ max-width:50rem; margin:1.2rem auto 0; color:#0f172a; font-family:'Poppins',sans-serif; font-size:clamp(2.55rem, 6vw, 4.6rem); font-weight:900; letter-spacing:-.055em; line-height:1.04; } .gallery-title span{ display:inline-block; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; } .gallery-intro{ max-width:43rem; margin:1.25rem auto 0; color:#475569; font-size:clamp(1rem, 2vw, 1.18rem); line-height:1.75; } .gallery-hero-meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.75rem 1rem; margin-top:1.85rem; color:#64748b; font-size:.78rem; } .gallery-hero-meta strong{ color:#0f172a; } .gallery-hero-meta i{ width:.25rem; height:.25rem; border-radius:999px; background:var(--accent); } .gallery-content{ position:relative; z-index:1; margin-top:-2.75rem; padding-bottom:6.5rem; } .gallery-toolbar{ display:flex; align-items:end; justify-content:space-between; gap:1.25rem; margin-bottom:1.5rem; } .gallery-section-kicker{ display:inline-block; color:var(--primary); font-size:.7rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .gallery-section-title{ margin-top:.3rem; color:#0f172a; font-family:'Poppins',sans-serif; font-size:1.8rem; font-weight:900; letter-spacing:-.04em; } .gallery-filters{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem; } .gf-chip{ padding:.52rem .8rem; border:1px solid #dbe5ef; border-radius:999px; background:#fff; color:#475569; font-size:.75rem; font-weight:700; transition:transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease; } .gf-chip:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--primary) 36%, white); color:var(--primary); } .gf-chip.is-active{ border-color:transparent; background:var(--brand-gradient); color:#fff; box-shadow:0 10px 18px -12px color-mix(in srgb, var(--secondary) 82%, transparent); } .gallery-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; } .gallery-item{ position:relative; isolation:isolate; aspect-ratio:4 / 4.5; overflow:hidden; border:1px solid rgba(226,232,240,.9); border-radius:1.25rem; background:#e2e8f0; box-shadow:0 16px 28px -23px rgba(15,23,42,.6); } .gallery-item:nth-child(5n + 1){ aspect-ratio:4 / 5.25; } .gallery-item img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; } .gallery-item::after{ content:""; position:absolute; z-index:1; inset:35% 0 0; background:linear-gradient(to top, rgba(2,10,22,.8), transparent); opacity:.88; pointer-events:none; } .gallery-item:hover img{ transform:scale(1.08); filter:saturate(1.12); } .gallery-item-shine{ position:absolute; z-index:2; top:-45%; left:-80%; width:45%; height:190%; background:linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent); transform:rotate(14deg); transition:left .65s ease; pointer-events:none; } .gallery-item:hover .gallery-item-shine{ left:140%; } .g-cap{ position:absolute; z-index:3; right:0; bottom:0; left:0; padding:1.25rem; color:#fff; transform:translateY(.15rem); transition:transform .25s ease; } .gallery-item:hover .g-cap{ transform:translateY(-.15rem); } .g-cap-tag{ display:table; margin-bottom:.35rem; padding:.24rem .5rem; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); font-size:.65rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .g-cap-title{ display:block; font-size:.98rem; font-weight:800; line-height:1.3; } .gallery-empty{ position:relative; isolation:isolate; max-width:51rem; min-height:28rem; margin:0 auto; padding:4.5rem 2rem; overflow:hidden; border:1px solid rgba(219,234,254,.95); border-radius:1.8rem; background:radial-gradient(circle at 50% 0%, rgba(207,250,254,.68), transparent 35%), linear-gradient(135deg, rgba(255,255,255,.95), rgba(239,248,255,.86)); box-shadow:0 30px 60px -38px rgba(15,118,110,.4); text-align:center; } .gallery-empty::before{ content:""; position:absolute; z-index:-1; inset:0; opacity:.32; background-image:radial-gradient(circle, rgba(37,99,235,.25) 1px, transparent 1.2px); background-size:18px 18px; mask-image:linear-gradient(135deg, transparent 10%, #000, transparent 88%); } .gallery-empty-ring{ position:absolute; z-index:-1; border:1px solid color-mix(in srgb, var(--secondary) 18%, transparent); border-radius:999px; } .gallery-empty-ring-one{ width:20rem; height:20rem; top:-9rem; left:-9rem; } .gallery-empty-ring-two{ width:15rem; height:15rem; right:-6rem; bottom:-7rem; border-color:color-mix(in srgb, var(--primary) 23%, transparent); } .gallery-empty-icon{ display:grid; place-items:center; width:4.35rem; height:4.35rem; margin:0 auto 1.4rem; border-radius:1.25rem; background:var(--brand-gradient); color:#fff; box-shadow:0 18px 28px -15px color-mix(in srgb, var(--secondary) 70%, transparent); animation:galleryIconFloat 4s ease-in-out infinite; } .gallery-empty-icon svg{ width:2rem; height:2rem; } .gallery-empty-title{ margin-top:.55rem; color:#0f172a; font-family:'Poppins',sans-serif; font-size:clamp(1.7rem, 4vw, 2.35rem); font-weight:900; letter-spacing:-.045em; } .gallery-empty > p{ max-width:38rem; margin:1rem auto 0; color:#64748b; font-size:1rem; line-height:1.7; } .gallery-empty-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; margin-top:1.6rem; } .gallery-empty-tags span{ padding:.42rem .7rem; border:1px solid rgba(15,118,110,.13); border-radius:999px; background:rgba(255,255,255,.72); color:#0f766e; font-size:.72rem; font-weight:700; } .gallery-empty-cta{ display:inline-flex; align-items:center; gap:.55rem; margin-top:1.9rem; padding:.74rem 1.12rem; border-radius:.8rem; background:var(--brand-gradient); color:#fff; font-size:.86rem; font-weight:800; box-shadow:0 14px 24px -15px color-mix(in srgb, var(--secondary) 80%, transparent); transition:transform .2s ease, box-shadow .2s ease; } .gallery-empty-cta svg{ width:1rem; height:1rem; } .gallery-empty-cta:hover{ transform:translateY(-3px); box-shadow:0 20px 30px -16px color-mix(in srgb, var(--secondary) 82%, transparent); } @keyframes galleryOrbit{ from{ transform:rotate(-8deg) translateY(0); } to{ transform:rotate(18deg) translateY(-1.2rem); } } @keyframes galleryIconFloat{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-.45rem); } } @media (min-width:768px){ .gallery-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; } .gallery-item:nth-child(5n + 1){ grid-row:span 2; } } @media (min-width:1024px){ .gallery-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); } } @media (max-width:640px){ .gallery-hero{ min-height:0; padding:4.25rem 0 5.5rem; } .gallery-hero-meta i{ display:none; } .gallery-hero-meta{ flex-direction:column; gap:.25rem; } .gallery-toolbar{ align-items:flex-start; flex-direction:column; } .gallery-filters{ justify-content:flex-start; } .gallery-content{ margin-top:-1.75rem; padding-bottom:4.5rem; } .gallery-empty{ min-height:0; padding:3.25rem 1.3rem; } .gallery-empty-tags span:last-child{ display:none; } } /* ---- Testimonials ------------------------------------------------ */ .testimonial-hero{ position:relative; isolation:isolate; overflow:hidden; padding:5.8rem 0 10rem; background:linear-gradient(135deg, #ecfdfb 0%, #f8fbff 51%, #e6f0ff 100%); text-align:center; } .testimonial-hero::after{ content:""; position:absolute; z-index:-1; right:0; bottom:0; left:0; height:8rem; background:linear-gradient(to bottom, transparent, rgba(255,255,255,.94)); } .testimonial-shape{ position:absolute; z-index:-1; border-radius:999px; filter:blur(3px); opacity:.7; animation:testimonialFloat 11s ease-in-out infinite alternate; } .testimonial-shape-one{ width:18rem; height:18rem; top:-8rem; left:3%; background:color-mix(in srgb, var(--primary) 16%, transparent); } .testimonial-shape-two{ width:22rem; height:22rem; top:5rem; right:-10rem; background:color-mix(in srgb, var(--secondary) 18%, transparent); animation-delay:-4s; } .testimonial-shape-three{ width:9rem; height:9rem; right:24%; bottom:2rem; border:1px solid color-mix(in srgb, var(--primary) 25%, transparent); background:transparent; animation-delay:-7s; } .testimonial-hero-inner{ max-width:51rem; } .testimonial-kicker{ display:inline-flex; align-items:center; gap:.45rem; color:var(--primary); font-size:.7rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; } .testimonial-kicker > span{ width:.45rem; height:.45rem; border-radius:999px; background:var(--accent); box-shadow:0 0 0 .3rem color-mix(in srgb, var(--accent) 14%, transparent); } .testimonial-title{ max-width:48rem; margin:1rem auto 0; color:#0f172a; font-family:'Poppins',sans-serif; font-size:clamp(2.35rem, 5vw, 4.15rem); font-weight:900; letter-spacing:-.06em; line-height:1.07; } .testimonial-title span{ background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; } .testimonial-intro{ max-width:40rem; margin:1.15rem auto 0; color:#64748b; font-size:1.05rem; line-height:1.75; } .testimonial-score{ display:inline-flex; align-items:center; gap:.85rem; margin-top:1.6rem; padding:.7rem .9rem; border:1px solid rgba(255,255,255,.8); border-radius:1rem; background:rgba(255,255,255,.66); box-shadow:0 14px 30px -22px rgba(15,23,42,.35); backdrop-filter:blur(12px); text-align:left; } .testimonial-score-stars{ display:flex; gap:.12rem; } .testimonial-score-stars svg{ width:1rem; height:1rem; } .testimonial-score strong{ display:block; color:#0f172a; font-size:.86rem; } .testimonial-score span{ display:block; margin-top:.08rem; color:#64748b; font-size:.68rem; } .testimonial-stage{ position:relative; z-index:1; margin-top:-5rem; padding-bottom:4.5rem; } .testimonial-carousel-wrap{ padding:1.1rem .3rem .25rem; } .testimonial-swiper{ overflow:visible; } .testimonial-card{ height:100%; min-height:21rem; padding:1.55rem; border-radius:1.45rem; } .testimonial-quote{ position:absolute; top:1.2rem; right:1.2rem; width:2.8rem; height:2.8rem; color:color-mix(in srgb, var(--secondary) 14%, white); transition:transform .3s ease, color .3s ease; } .testimonial-card:hover .testimonial-quote{ transform:translateY(-.2rem) rotate(-7deg) scale(1.06); color:color-mix(in srgb, var(--secondary) 24%, white); } .testimonial-card-top{ position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; } .testimonial-person{ display:flex; align-items:center; gap:.75rem; min-width:0; } .testimonial-person img, .testimonial-avatar-fallback{ display:grid; place-items:center; flex:none; width:3rem; height:3rem; border:2px solid #fff; border-radius:1rem; background:var(--brand-gradient); box-shadow:0 8px 16px -10px rgba(15,23,42,.6); color:#fff; font-size:.85rem; font-weight:800; object-fit:cover; } .testimonial-person figcaption{ color:#0f172a; font-size:.9rem; font-weight:800; line-height:1.25; } .testimonial-person p{ margin-top:.15rem; overflow:hidden; color:#64748b; font-size:.7rem; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .testimonial-stars{ display:flex; flex:none; gap:.06rem; } .testimonial-stars svg{ width:.78rem; height:.78rem; } .testimonial-card blockquote{ position:relative; z-index:1; margin-top:1.45rem; color:#334155; font-size:.94rem; font-weight:500; line-height:1.78; } .testimonial-video{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:.28rem; margin-top:1.15rem; color:var(--primary); font-size:.72rem; font-weight:800; text-decoration:none; } .testimonial-video svg{ width:.9rem; height:.9rem; transition:transform .2s ease; } .testimonial-video:hover svg{ transform:translateX(.2rem); } .testimonial-card-foot{ position:absolute; right:1.55rem; bottom:1.35rem; left:1.55rem; display:flex; align-items:center; gap:.45rem; color:#94a3b8; font-size:.64rem; font-weight:700; letter-spacing:.025em; text-transform:uppercase; } .testimonial-card-foot i{ width:.22rem; height:.22rem; border-radius:999px; background:#2dd4bf; } .testimonial-controls{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:2.1rem; } .testimonial-prev, .testimonial-next{ display:grid; place-items:center; width:2.45rem; height:2.45rem; border:1px solid #dce6f0; border-radius:.75rem; background:#fff; color:#334155; transition:transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } .testimonial-prev:hover, .testimonial-next:hover{ transform:translateY(-2px); border-color:transparent; background:var(--brand-gradient); color:#fff; box-shadow:0 12px 22px -14px color-mix(in srgb, var(--secondary) 75%, transparent); } .testimonial-prev svg, .testimonial-next svg{ width:1rem; height:1rem; } .testimonial-pagination{ display:flex; width:auto !important; align-items:center; gap:.35rem; } .testimonial-pagination .swiper-pagination-bullet{ width:.42rem; height:.42rem; margin:0 !important; background:#94a3b8; opacity:.5; transition:width .25s ease, background .25s ease, opacity .25s ease; } .testimonial-pagination .swiper-pagination-bullet-active{ width:1.4rem; border-radius:999px; background:var(--primary); opacity:1; } .testimonial-trust{ display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr); align-items:center; gap:2rem; margin-bottom:5rem; padding:2rem; border:1px solid #e4edf5; border-radius:1.5rem; background:rgba(255,255,255,.72); box-shadow:0 20px 42px -34px rgba(15,23,42,.38); backdrop-filter:blur(12px); } .testimonial-trust h2{ max-width:25rem; margin-top:.55rem; color:#0f172a; font-family:'Poppins',sans-serif; font-size:1.25rem; font-weight:800; line-height:1.38; } .testimonial-logos{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.65rem; } .testimonial-logo{ display:grid; place-items:center; min-height:3.4rem; padding:.5rem; border:1px solid #e6eef5; border-radius:.8rem; background:#fff; filter:grayscale(1); opacity:.72; transition:filter .25s ease, opacity .25s ease, transform .25s ease; } .testimonial-logo:hover{ filter:none; opacity:1; transform:translateY(-2px); } .testimonial-logo img{ max-width:100%; max-height:2rem; object-fit:contain; } .testimonial-logo span{ color:#475569; font-size:.7rem; font-weight:800; text-align:center; } .testimonial-empty{ margin-top:-5rem; } @keyframes testimonialFloat{ from{ transform:translate3d(0,0,0) rotate(0); } to{ transform:translate3d(1.4rem,-1.2rem,0) rotate(12deg); } } @media (max-width:767px){ .testimonial-hero{ padding:4.5rem 0 8.5rem; } .testimonial-stage{ margin-top:-4.2rem; } .testimonial-card{ min-height:20rem; } .testimonial-trust{ grid-template-columns:1fr; padding:1.35rem; } .testimonial-logos{ grid-template-columns:repeat(2, minmax(0, 1fr)); } } /* ---- Blog -------------------------------------------------------- */ .blog-hero-premium{ position:relative; isolation:isolate; overflow:hidden; padding:5.7rem 0 9rem; background:linear-gradient(135deg, #f0fdfa 0%, #f8fbff 50%, #edf3ff 100%); text-align:center; } .blog-hero-premium::after{ content:""; position:absolute; z-index:-1; right:0; bottom:0; left:0; height:9rem; background:linear-gradient(to bottom, transparent, #fff); } .blog-hero-orb{ position:absolute; z-index:-1; border-radius:999px; filter:blur(3px); opacity:.65; animation:blogOrb 12s ease-in-out infinite alternate; } .blog-hero-orb-one{ width:21rem; height:21rem; top:-11rem; left:5%; background:color-mix(in srgb, var(--primary) 16%, transparent); } .blog-hero-orb-two{ width:26rem; height:26rem; right:-11rem; bottom:0; background:color-mix(in srgb, var(--secondary) 16%, transparent); animation-delay:-6s; } .blog-hero-content{ max-width:57rem; } .blog-kicker{ display:inline-flex; align-items:center; gap:.45rem; padding:.44rem .74rem; border:1px solid rgba(15,118,110,.14); border-radius:999px; background:rgba(255,255,255,.68); color:var(--primary); font-size:.7rem; font-weight:800; letter-spacing:.075em; text-transform:uppercase; } .blog-kicker svg{ width:.95rem; height:.95rem; } .blog-hero-content h1{ max-width:53rem; margin:1rem auto 0; color:#0f172a; font-family:'Poppins',sans-serif; font-size:clamp(2.4rem, 5vw, 4.3rem); font-weight:900; letter-spacing:-.06em; line-height:1.08; } .blog-hero-content > p:last-child{ max-width:43rem; margin:1.25rem auto 0; color:#64748b; font-size:1.05rem; line-height:1.75; } .blog-index{ position:relative; z-index:1; margin-top:-4.35rem; padding-bottom:6.5rem; } .blog-category-nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem; max-width:61rem; margin:0 auto 2.5rem; padding:.7rem; border:1px solid rgba(226,232,240,.85); border-radius:1.1rem; background:rgba(255,255,255,.78); box-shadow:0 16px 35px -28px rgba(15,23,42,.38); backdrop-filter:blur(14px); } .blog-category{ display:inline-flex; align-items:center; gap:.35rem; padding:.48rem .72rem; border-radius:.7rem; color:#64748b; font-size:.74rem; font-weight:750; text-decoration:none; transition:background .2s ease, color .2s ease, transform .2s ease; } .blog-category span{ display:grid; place-items:center; min-width:1.15rem; height:1.15rem; border-radius:99px; background:rgba(148,163,184,.12); font-size:.6rem; } .blog-category:hover{ transform:translateY(-1px); color:var(--primary); } .blog-category.is-active{ background:var(--brand-gradient); color:#fff; box-shadow:0 10px 18px -14px color-mix(in srgb, var(--secondary) 90%, transparent); } .blog-category.is-active span{ background:rgba(255,255,255,.2); } .blog-featured{ display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); min-height:23rem; margin-bottom:4.8rem; border-radius:1.6rem; } .blog-featured-media, .blog-card-media{ position:relative; display:grid; place-items:center; overflow:hidden; background:var(--brand-gradient); color:#fff; } .blog-featured-media{ min-height:21rem; } .blog-featured-media img, .blog-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .65s cubic-bezier(.2,.7,.2,1), filter .35s ease; } .blog-featured:hover img, .blog-card-premium:hover img{ transform:scale(1.08); filter:saturate(1.14); } .blog-featured-media span, .blog-card-media > span:first-child{ font-size:3rem; } .blog-featured-copy{ position:relative; padding:2.35rem; } .blog-featured-label{ display:inline-flex; margin-bottom:1rem; color:var(--secondary); font-size:.65rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; } .blog-category-label{ display:inline-flex; color:var(--primary); font-size:.68rem; font-weight:850; letter-spacing:.07em; text-decoration:none; text-transform:uppercase; } .blog-featured-copy h2{ margin:.6rem 0 0; color:#0f172a; font-family:'Poppins',sans-serif; font-size:clamp(1.6rem, 3vw, 2.35rem); font-weight:900; letter-spacing:-.045em; line-height:1.2; } .blog-featured-copy h2 a, .blog-card-copy h2 a{ color:inherit; text-decoration:none; } .blog-featured-copy > p{ margin-top:1rem; color:#64748b; font-size:.92rem; line-height:1.7; } .blog-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-top:1.25rem; color:#94a3b8; font-size:.68rem; font-weight:650; } .blog-meta i{ width:.22rem; height:.22rem; border-radius:99px; background:#2dd4bf; } .blog-read-more{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1.65rem; color:#0f172a; font-size:.78rem; font-weight:850; text-decoration:none; } .blog-read-more svg{ width:1rem; height:1rem; color:var(--primary); transition:transform .2s ease; } .blog-read-more:hover svg{ transform:translateX(.25rem); } .blog-list-heading{ display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.65rem; } .blog-section-kicker{ color:var(--primary); font-size:.67rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase; } .blog-list-heading h2, .article-related-heading h2{ margin-top:.35rem; color:#0f172a; font-family:'Poppins',sans-serif; font-size:1.9rem; font-weight:900; letter-spacing:-.045em; } .blog-list-heading > p{ color:#64748b; font-size:.82rem; } .blog-grid-premium{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.35rem; } .blog-card-premium{ border-radius:1.2rem; } .blog-card-media{ aspect-ratio:16 / 10; } .blog-media-overlay{ position:absolute; inset:0; background:linear-gradient(135deg, transparent 50%, rgba(15,118,110,.33)); opacity:0; transition:opacity .3s ease; } .blog-card-premium:hover .blog-media-overlay{ opacity:1; } .blog-media-arrow{ position:absolute; right:1rem; bottom:1rem; display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:.7rem; background:rgba(255,255,255,.92); color:var(--primary); opacity:0; transform:translateY(.45rem); transition:opacity .3s ease, transform .3s ease; } .blog-media-arrow svg{ width:1rem; height:1rem; } .blog-card-premium:hover .blog-media-arrow{ opacity:1; transform:translateY(0); } .blog-card-copy{ position:relative; padding:1.3rem; } .blog-card-topline{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; } .blog-card-topline > span{ color:#94a3b8; font-size:.67rem; font-weight:750; } .blog-card-copy h2{ margin-top:.65rem; color:#0f172a; font-family:'Poppins',sans-serif; font-size:1.05rem; font-weight:850; letter-spacing:-.025em; line-height:1.4; } .blog-card-copy > p{ display:-webkit-box; margin-top:.6rem; overflow:hidden; color:#64748b; font-size:.78rem; line-height:1.62; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .blog-pagination{ display:flex; align-items:center; justify-content:center; gap:.45rem; margin-top:3rem; } .blog-pagination a{ display:grid; place-items:center; width:2.35rem; height:2.35rem; border:1px solid #e2e8f0; border-radius:.7rem; background:#fff; color:#64748b; font-size:.78rem; font-weight:800; text-decoration:none; transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .blog-pagination a:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--primary) 26%, white); color:var(--primary); } .blog-pagination a.is-active{ border-color:transparent; background:var(--brand-gradient); color:#fff; } .blog-empty{ max-width:38rem; margin:1rem auto; padding:3.5rem 2rem; border-radius:1.5rem; text-align:center; } .blog-empty h2{ margin-top:1rem; color:#0f172a; font-family:'Poppins',sans-serif; font-size:1.4rem; font-weight:900; } .blog-empty p{ margin-top:.5rem; color:#64748b; } /* Article detail */ .reading-progress{ position:fixed; z-index:100; top:0; right:0; left:0; height:3px; background:rgba(15,118,110,.1); } .reading-progress span{ display:block; width:100%; height:100%; background:var(--brand-gradient); transform:scaleX(0); transform-origin:left; } .article-hero{ position:relative; isolation:isolate; overflow:hidden; padding:4.8rem 0 7rem; background:linear-gradient(135deg, #effcfb, #f9fbff 55%, #e9f1ff); } .article-hero-glow{ position:absolute; z-index:-1; right:-8rem; bottom:-15rem; width:30rem; height:30rem; border-radius:999px; background:color-mix(in srgb, var(--secondary) 16%, transparent); filter:blur(22px); } .article-hero-inner{ max-width:57rem; } .article-breadcrumb{ display:flex; flex-wrap:wrap; gap:.45rem; color:#94a3b8; font-size:.75rem; font-weight:700; } .article-breadcrumb a{ color:inherit; text-decoration:none; } .article-breadcrumb a:hover{ color:var(--primary); } .article-category{ margin-top:1.5rem; } .article-hero h1{ max-width:56rem; margin-top:.7rem; color:#0f172a; font-family:'Poppins',sans-serif; font-size:clamp(2.35rem, 5vw, 4.4rem); font-weight:900; letter-spacing:-.065em; line-height:1.07; } .article-hero > .article-hero-inner > p{ max-width:44rem; margin-top:1.15rem; color:#64748b; font-size:1.05rem; line-height:1.75; } .article-author-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; margin-top:1.65rem; color:#64748b; font-size:.76rem; } .article-author-row > span:nth-child(2){ display:flex; flex-direction:column; } .article-author-row strong{ color:#0f172a; font-size:.78rem; } .article-author-row small{ color:#94a3b8; font-size:.64rem; } .article-author-row i{ width:.24rem; height:.24rem; border-radius:999px; background:#2dd4bf; } .article-author-avatar{ display:grid; place-items:center; flex:none; width:2.6rem; height:2.6rem; border:2px solid #fff; border-radius:.85rem; background:var(--brand-gradient); box-shadow:0 8px 18px -12px rgba(15,23,42,.6); color:#fff; font-size:.75rem; font-weight:900; } .article-featured-wrap{ position:relative; z-index:1; max-width:71rem; margin-top:-4rem; } .article-featured-image{ display:block; width:100%; max-height:36rem; border:1px solid rgba(255,255,255,.8); border-radius:1.6rem; box-shadow:0 30px 58px -36px rgba(15,23,42,.5); object-fit:cover; } .article-layout{ display:grid; grid-template-columns:4rem minmax(0, 46rem) minmax(12rem, 15rem); align-items:start; justify-content:center; gap:2rem; padding-top:4.5rem; padding-bottom:3.8rem; } .article-content{ min-width:0; } .article-share-side{ position:sticky; top:8rem; display:flex; flex-direction:column; align-items:center; gap:.55rem; } .article-share-side > span{ margin-bottom:.3rem; color:#94a3b8; font-size:.6rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; writing-mode:vertical-rl; } .article-share-side a, .article-mobile-share a{ display:grid; place-items:center; width:2.1rem; height:2.1rem; border:1px solid #e2e8f0; border-radius:.65rem; background:#fff; color:#475569; font-size:.69rem; font-weight:900; text-decoration:none; transition:transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease; } .article-share-side a:hover, .article-mobile-share a:hover{ transform:translateY(-2px); border-color:transparent; background:var(--brand-gradient); color:#fff; } .article-prose{ color:#334155; font-size:1.02rem; line-height:1.9; } .article-prose h2{ scroll-margin-top:7.5rem; margin:2.6rem 0 .8rem; color:#0f172a; font-family:'Poppins',sans-serif; font-size:1.7rem; font-weight:900; letter-spacing:-.035em; } .article-prose h3{ scroll-margin-top:7.5rem; font-family:'Poppins',sans-serif; font-weight:850; } .article-prose pre{ margin:1.4rem 0; overflow:auto; border:1px solid rgba(148,163,184,.16); border-radius:1rem; background:#071523; box-shadow:0 18px 36px -27px rgba(2,6,23,.7); } .article-prose code{ color:#b9f6eb; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85em; } .article-prose pre code{ display:block; padding:1.15rem 1.25rem; color:#dbeafe; font-size:.82rem; line-height:1.7; } .article-prose img{ width:100%; border-radius:1rem; box-shadow:0 16px 30px -24px rgba(15,23,42,.45); } .article-toc{ position:sticky; top:8rem; padding:1.1rem; border-radius:1rem; } .article-toc > span{ display:block; margin-bottom:.7rem; color:#0f172a; font-size:.74rem; font-weight:850; } .article-toc ol{ display:flex; flex-direction:column; gap:.45rem; } .article-toc li{ list-style:none; } .article-toc li.h3{ padding-left:.6rem; } .article-toc a{ color:#64748b; font-size:.69rem; font-weight:650; line-height:1.4; text-decoration:none; transition:color .2s ease; } .article-toc a:hover{ color:var(--primary); } .article-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid #e5edf4; } .article-tags > span{ margin-right:.2rem; color:#64748b; font-size:.72rem; font-weight:800; } .article-tags a{ padding:.35rem .55rem; border-radius:999px; background:rgba(15,118,110,.08); color:var(--primary); font-size:.68rem; font-weight:750; text-decoration:none; } .article-author-box{ display:flex; align-items:flex-start; gap:1rem; margin-top:2.8rem; padding:1.45rem; border-radius:1.25rem; } .article-author-avatar.large{ width:3.4rem; height:3.4rem; border-radius:1rem; font-size:.9rem; } .article-author-box h2{ margin-top:.25rem; color:#0f172a; font-family:'Poppins',sans-serif; font-size:1.2rem; font-weight:900; } .article-author-box p{ margin-top:.45rem; color:#64748b; font-size:.8rem; line-height:1.6; } .article-discussion{ display:grid; grid-template-columns:.9fr 1.1fr; gap:1.5rem; margin-top:1.3rem; padding:1.5rem; border-radius:1.25rem; } .article-discussion h2{ margin-top:.35rem; color:#0f172a; font-family:'Poppins',sans-serif; font-size:1.35rem; font-weight:900; line-height:1.25; } .article-discussion p{ margin-top:.55rem; color:#64748b; font-size:.78rem; line-height:1.6; } .article-comment-form{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; } .article-comment-form textarea, .article-comment-form button{ grid-column:1 / -1; } .article-comment-form button{ justify-self:start; } .article-adjacent{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:5rem; } .article-adjacent > a{ display:flex; flex-direction:column; max-width:45%; color:#0f172a; text-decoration:none; } .article-adjacent a.next{ align-items:flex-end; text-align:right; } .article-adjacent span{ color:var(--primary); font-size:.67rem; font-weight:850; letter-spacing:.07em; text-transform:uppercase; } .article-adjacent strong{ margin-top:.35rem; font-family:'Poppins',sans-serif; font-size:.9rem; line-height:1.45; } .article-related{ padding:5rem 0 6rem; background:#f7fbff; } .article-related-heading{ margin-bottom:1.6rem; } .article-mobile-share{ display:none; } @keyframes blogOrb{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(1.3rem,-1.5rem,0) scale(1.08); } } @media (max-width:1023px){ .blog-grid-premium{ grid-template-columns:repeat(2, minmax(0, 1fr)); } .article-layout{ grid-template-columns:3rem minmax(0, 46rem); } .article-toc{ display:none; } } @media (max-width:767px){ .blog-hero-premium{ padding:4.4rem 0 7.5rem; } .blog-index{ margin-top:-3.1rem; } .blog-featured{ grid-template-columns:1fr; } .blog-featured-media{ min-height:14rem; } .blog-featured-copy{ padding:1.45rem; } .blog-list-heading{ align-items:flex-start; flex-direction:column; } .blog-grid-premium{ grid-template-columns:1fr; } .article-hero{ padding:4rem 0 5rem; } .article-featured-wrap{ margin-top:-2.25rem; } .article-featured-image{ border-radius:1.1rem; } .article-layout{ display:block; padding-top:2.5rem; } .article-share-side{ display:none; } .article-mobile-share{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; padding:.75rem .85rem; border:1px solid #e5edf4; border-radius:.9rem; background:#fff; color:#64748b; font-size:.72rem; font-weight:750; } .article-mobile-share div{ display:flex; gap:.35rem; } .article-mobile-share a{ width:1.8rem; height:1.8rem; } .article-discussion{ grid-template-columns:1fr; } .article-adjacent{ flex-direction:column; } .article-adjacent > a{ max-width:100%; } .article-adjacent a.next{ align-items:flex-start; text-align:left; } } @media (prefers-reduced-motion: reduce){ .btn-vibrant{ animation:none; } .btn-vibrant:hover::before{ animation:none; } .footer-accent, .footer-orb{ animation:none; } } /* ---- International phone input (contact form) -------------------- */ .iti{ width:100%; display:block; } .iti__selected-flag, .iti__selected-dial-code{ border-radius:.75rem 0 0 .75rem; } .iti--separate-dial-code .iti__selected-flag{ background:rgba(15,118,110,.06); } .iti__country-list{ border-radius:.75rem; box-shadow:0 20px 40px -18px rgba(2,6,23,.35); font-family:inherit; } html[data-theme="dark"] .iti__selected-flag{ background:#0b1d2e; } html[data-theme="dark"] .iti__country-list{ background:#102437; color:#e2e8f0; border-color:rgba(148,163,184,.2); } html[data-theme="dark"] .iti__country.iti__highlight{ background:#0b2a3f; } html[data-theme="dark"] .iti__dial-code{ color:#94a3b8; } /* ---- Global search overlay -------------------------------------- */ .search-modal{ position:fixed; inset:0; z-index:70; display:flex; justify-content:center; align-items:flex-start; padding:12vh 1rem 1rem; } .search-modal[hidden]{ display:none; } .search-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.55); backdrop-filter:blur(4px); opacity:0; transition:opacity .2s ease; } .search-modal.open .search-backdrop{ opacity:1; } .search-panel{ position:relative; width:100%; max-width:620px; background:#fff; border-radius:18px; box-shadow:0 40px 80px -30px rgba(2,6,23,.5); overflow:hidden; transform:translateY(-14px) scale(.98); opacity:0; transition:transform .22s ease, opacity .22s ease; } .search-modal.open .search-panel{ transform:none; opacity:1; } .search-inputwrap{ display:flex; align-items:center; gap:.75rem; padding:1rem 1.15rem; border-bottom:1px solid #eef2f7; } .search-lead{ width:1.25rem; height:1.25rem; color:var(--primary); flex:none; } #searchInput{ flex:1; border:0; outline:none; font-size:1.05rem; color:#0f172a; background:transparent; min-width:0; } .search-close{ display:grid; place-items:center; width:2rem; height:2rem; border:0; border-radius:8px; background:#f1f5f9; color:#64748b; cursor:pointer; flex:none; } .search-close svg{ width:1rem; height:1rem; } .search-close:hover{ background:#e2e8f0; color:#0f172a; } .search-results{ max-height:60vh; overflow-y:auto; padding:.5rem; } .search-hint, .search-empty, .search-loading{ padding:1.5rem 1rem; text-align:center; color:#94a3b8; font-size:.9rem; } .search-item{ display:flex; gap:.85rem; align-items:flex-start; padding:.75rem .85rem; border-radius:12px; text-decoration:none; transition:background .15s; } .search-item:hover{ background:color-mix(in srgb, var(--primary) 7%, white); } .search-type{ flex:none; margin-top:.1rem; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.22rem .5rem; border-radius:999px; color:#fff; background:var(--primary); } .search-type-blog{ background:var(--secondary); } .search-type-faq{ background:#8b5cf6; } .search-item-main{ display:flex; flex-direction:column; min-width:0; } .search-item-title{ font-weight:700; color:#0f172a; font-size:.92rem; } .search-item-ex{ color:#64748b; font-size:.8rem; margin-top:.1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html[data-theme="dark"] .search-panel{ background:#102437; } html[data-theme="dark"] .search-inputwrap{ border-color:rgba(148,163,184,.16); } html[data-theme="dark"] #searchInput{ color:#f8fafc; } html[data-theme="dark"] .search-item-title{ color:#f8fafc; } html[data-theme="dark"] .search-item:hover{ background:rgba(94,234,212,.08); } html[data-theme="dark"] .search-close{ background:#0b1d2e; color:#94a3b8; } @media (max-width:640px){ .search-modal{ padding:6vh .75rem 1rem; } } /* ---- Announcement bar -------------------------------------------- */ .ann-bar{ position:fixed; top:0; left:0; right:0; z-index:60; color:#fff; } .ann-bar a{ color:#fff; } .ann-bar button{ background:none; border:0; color:#fff; cursor:pointer; font-size:.95rem; line-height:1; } /* ---- Promotional popup ------------------------------------------- */ .promo-pop{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:1rem; } .promo-pop[hidden]{ display:none; } .promo-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.6); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s ease; } .promo-pop.open .promo-backdrop{ opacity:1; } .promo-card{ position:relative; width:100%; max-width:380px; background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 40px 80px -30px rgba(2,6,23,.55); transform:translateY(14px) scale(.96); opacity:0; transition:transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease; } .promo-pop.open .promo-card{ transform:none; opacity:1; } .promo-x{ position:absolute; top:.6rem; right:.6rem; z-index:2; display:grid; place-items:center; width:2rem; height:2rem; border:0; border-radius:999px; background:rgba(255,255,255,.92); color:#334155; cursor:pointer; box-shadow:0 4px 12px rgba(2,6,23,.15); } .promo-x svg{ width:1rem; height:1rem; } .promo-x:hover{ background:#fff; color:#0f172a; } .promo-img{ width:100%; height:9.5rem; object-fit:cover; display:block; } .promo-body{ padding:1.5rem; text-align:center; } .promo-title{ font-size:1.25rem; font-weight:800; color:#0f172a; } .promo-text{ margin-top:.5rem; font-size:.9rem; color:#64748b; line-height:1.6; } .promo-btn{ display:inline-block; margin-top:1.1rem; padding:.75rem 1.6rem; border-radius:.85rem; font-weight:700; color:#fff; text-decoration:none; background:var(--brand-gradient); box-shadow:0 12px 24px -10px color-mix(in srgb, var(--secondary) 70%, transparent); transition:transform .2s ease; } .promo-btn:hover{ transform:translateY(-2px); } html[data-theme="dark"] .promo-card{ background:#102437; } html[data-theme="dark"] .promo-title{ color:#f8fafc; } /* ---- Hero slider (CMS Hero Slides) ------------------------------- */ .hero-slider{ position:relative; min-height:min(78vh,620px); display:grid; overflow:hidden; background:#0f172a; } .hero-slide{ grid-area:1/1; display:grid; align-items:center; background-size:cover; background-position:center; opacity:0; visibility:hidden; transform:scale(1.04); transition:opacity .8s ease, transform 6s ease, visibility .8s; } .hero-slide.is-active{ opacity:1; visibility:visible; transform:scale(1); } .hero-slide-inner{ max-width:44rem; color:#fff; padding-block:4rem; } .hero-slide-title{ font-size:clamp(2rem,4.5vw,3.4rem); font-weight:800; line-height:1.12; letter-spacing:-.01em; } .hero-slide-sub{ margin-top:1rem; font-size:1.05rem; color:rgba(255,255,255,.86); max-width:36rem; line-height:1.7; } .hero-slide-btn{ margin-top:1.75rem; width:max-content; } .hero-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:grid; place-items:center; width:2.75rem; height:2.75rem; border:0; border-radius:999px; background:rgba(255,255,255,.18); color:#fff; cursor:pointer; backdrop-filter:blur(6px); transition:background .2s; } .hero-nav:hover{ background:rgba(255,255,255,.34); } .hero-nav svg{ width:1.25rem; height:1.25rem; } .hero-prev{ left:1rem; } .hero-next{ right:1rem; } .hero-dots{ position:absolute; bottom:1.25rem; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:.5rem; } .hero-dot{ width:.55rem; height:.55rem; border:0; border-radius:999px; background:rgba(255,255,255,.45); cursor:pointer; transition:width .25s ease, background .25s ease; } .hero-dot.is-active{ width:1.6rem; background:#fff; } /* ---- Blog: "Listen to article" (text-to-speech) ------------------ */ .article-listen{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.5rem; padding:.6rem .8rem; border-radius:999px; width:max-content; max-width:100%; background:color-mix(in srgb, var(--primary) 8%, white); border:1px solid color-mix(in srgb, var(--primary) 20%, white); } .al-play{ display:inline-flex; align-items:center; gap:.6rem; border:0; cursor:pointer; background:none; font-weight:700; font-size:.9rem; color:var(--primary); } .al-play i{ display:grid; place-items:center; width:2rem; height:2rem; border-radius:999px; color:#fff; font-size:.8rem; background:var(--brand-gradient); box-shadow:0 8px 18px -8px color-mix(in srgb, var(--secondary) 70%, transparent); transition:transform .2s; } .al-play:hover i{ transform:scale(1.08); } .al-stop{ display:grid; place-items:center; width:1.9rem; height:1.9rem; border:0; border-radius:999px; cursor:pointer; background:#fee2e2; color:#dc2626; font-size:.72rem; } .al-stop:hover{ background:#fecaca; } .al-wave{ display:none; align-items:flex-end; gap:2px; height:1.1rem; } .al-wave.on{ display:inline-flex; } .al-wave i{ width:3px; border-radius:2px; background:var(--primary); animation:alWave .9s ease-in-out infinite; } .al-wave i:nth-child(1){ height:40%; animation-delay:0s } .al-wave i:nth-child(2){ height:80%; animation-delay:.15s } .al-wave i:nth-child(3){ height:55%; animation-delay:.3s } .al-wave i:nth-child(4){ height:95%; animation-delay:.45s } .al-wave i:nth-child(5){ height:50%; animation-delay:.6s } @keyframes alWave{ 0%,100%{ transform:scaleY(.5) } 50%{ transform:scaleY(1) } } @media (prefers-reduced-motion: reduce){ .al-wave i{ animation:none } } /* ---- Contact page premium cards ---------------------------------- */ .contact-card{ position:relative; display:block; padding:1.5rem; border-radius:1.15rem; text-decoration:none; background:rgba(255,255,255,.72); backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(255,255,255,.7); box-shadow:0 12px 30px -18px rgba(2,6,23,.28); transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; overflow:hidden; isolation:isolate; } /* gradient border on hover */ .contact-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:-1; background:linear-gradient(135deg, var(--c1), var(--c2)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .28s ease; } .contact-card:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -22px rgba(2,6,23,.4); } .contact-card:hover::before{ opacity:1; } .contact-ic{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:.9rem; margin-bottom:1rem; color:#fff; font-size:1.15rem; background:linear-gradient(135deg, var(--c1), var(--c2)); box-shadow:0 10px 22px -10px var(--c2); transition:transform .28s ease; } .contact-card:hover .contact-ic{ transform:scale(1.1) rotate(-6deg); } .contact-label{ font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8; } .contact-val{ font-weight:700; color:#0f172a; margin-top:.15rem; word-break:break-word; } .contact-cta{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.75rem; font-size:.8rem; font-weight:700; color:var(--c2); } .contact-cta i{ transition:transform .2s; } .contact-card:hover .contact-cta i{ transform:translateX(3px); } html[data-theme="dark"] .contact-card{ background:rgba(15,23,42,.6); border-color:rgba(148,163,184,.15); } html[data-theme="dark"] .contact-val{ color:#f1f5f9; } /* ---- Footer v2: premium contact rows, FA socials, Appsgain bar --- */ .ft-soc-fa{ display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.75rem; color:#cbd5e1; font-size:1rem; text-decoration:none; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, box-shadow .25s; } .ft-soc-fa:hover{ transform:translateY(-4px) rotate(-6deg); color:#fff; background:var(--brand-gradient); box-shadow:0 12px 26px -10px color-mix(in srgb, var(--secondary) 70%, transparent); } /* Professional per-network brand colours on hover */ .ft-soc-fa:has(.fa-facebook-f):hover{ background:#1877f2; box-shadow:0 12px 26px -10px rgba(24,119,242,.75); } .ft-soc-fa:has(.fa-instagram):hover{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); box-shadow:0 12px 26px -10px rgba(220,39,67,.75); } .ft-soc-fa:has(.fa-linkedin-in):hover{ background:#0a66c2; box-shadow:0 12px 26px -10px rgba(10,102,194,.75); } .ft-soc-fa:has(.fa-youtube):hover{ background:#ff0000; box-shadow:0 12px 26px -10px rgba(255,0,0,.7); } .ft-soc-fa:has(.fa-x-twitter):hover{ background:#0b0b0b; border-color:rgba(255,255,255,.35); box-shadow:0 12px 26px -10px rgba(0,0,0,.8); } .footer-contact2{ display:flex; align-items:flex-start; gap:.85rem; } .fc2-icon{ display:grid; place-items:center; width:2.5rem; height:2.5rem; flex:none; border-radius:.8rem; font-size:1rem; color:#fff; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, black), color-mix(in srgb, var(--secondary) 85%, black)); box-shadow:inset 0 1px 0 rgba(255,255,255,.15), 0 8px 18px -12px rgba(0,0,0,.7); transition:transform .25s ease; } .footer-contact2:hover .fc2-icon{ transform:translateY(-2px) scale(1.06); } .fc2-label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#64748b; } .fc2-value{ display:block; font-size:.88rem; color:#cbd5e1; margin-top:.12rem; line-height:1.4; overflow-wrap:anywhere; } a.fc2-link{ position:relative; transition:color .2s; } a.fc2-link:hover{ color:#fff; } a.fc2-link::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; border-radius:2px; background:var(--brand-gradient); transition:width .28s ease; } a.fc2-link:hover::after{ width:100%; } /* Appsgain credit line — gradient text, animated underline, hover glow */ .appsgain-line{ font-size:.8rem; color:#64748b; } .appsgain-link{ position:relative; font-weight:800; text-decoration:none; background:linear-gradient(90deg, var(--primary), var(--secondary), var(--accent, #06b6d4), var(--primary)); background-size:250% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:appsgainShift 5s linear infinite; transition:filter .25s; } .appsgain-link::after{ content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px; border-radius:2px; background:linear-gradient(90deg, var(--primary), var(--secondary)); transition:width .3s ease; } .appsgain-link:hover{ filter:drop-shadow(0 0 10px color-mix(in srgb, var(--secondary) 60%, transparent)); } .appsgain-link:hover::after{ width:100%; } @keyframes appsgainShift{ to{ background-position:250% center; } } .appsgain-dot{ width:4px; height:4px; border-radius:999px; background:rgba(148,163,184,.5); } /* Hidden admin login — tiny, professional, unobtrusive */ .admin-dot{ display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:.5rem; margin-left:.4rem; color:rgba(148,163,184,.35); font-size:.6rem; text-decoration:none; border:1px solid rgba(148,163,184,.12); transition:color .25s, background .25s, border-color .25s, transform .25s; } .admin-dot:hover{ color:#e2e8f0; background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); transform:translateY(-1px); } /* ---- Multi-step admission form ----------------------------------- */ .adm-steps{ display:flex; gap:.25rem; list-style:none; padding:0; margin:0; overflow-x:auto; } .adm-step-dot{ flex:1; min-width:5.5rem; display:flex; flex-direction:column; align-items:center; gap:.35rem; text-align:center; } .adm-num{ display:grid; place-items:center; width:2.1rem; height:2.1rem; border-radius:999px; font-weight:800; font-size:.85rem; color:#94a3b8; background:#e2e8f0; transition:.3s ease; } .adm-lbl{ font-size:.72rem; font-weight:700; color:#94a3b8; transition:color .3s; white-space:nowrap; } .adm-step-dot.is-active .adm-num{ color:#fff; background:var(--brand-gradient); box-shadow:0 8px 18px -8px color-mix(in srgb, var(--primary) 70%, transparent); } .adm-step-dot.is-active .adm-lbl{ color:var(--primary); } .adm-bar{ position:relative; height:4px; border-radius:999px; background:#e2e8f0; margin-top:.85rem; overflow:hidden; } .adm-bar span{ position:absolute; inset:0 auto 0 0; width:0; border-radius:999px; background:var(--brand-gradient); transition:width .4s cubic-bezier(.2,.8,.2,1); } .adm-pane{ display:none; border:0; padding:0; animation:admIn .35s ease both; } .adm-pane.is-active{ display:block; } @keyframes admIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .adm-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; padding:1.1rem; border:1.5px dashed #cbd5e1; border-radius:.9rem; background:#f8fafc; cursor:pointer; transition:border-color .2s, background .2s; text-align:center; } .adm-drop:hover, .adm-drop.is-over{ border-color:var(--primary); background:color-mix(in srgb, var(--primary) 6%, white); } .adm-drop-ic{ font-size:1.1rem; } .adm-drop-txt{ font-size:.78rem; color:#94a3b8; } .adm-drop-name{ font-size:.75rem; font-weight:700; color:var(--primary); word-break:break-all; } .adm-drop.has-file{ border-style:solid; border-color:var(--primary); background:color-mix(in srgb, var(--primary) 8%, white); } .adm-drop.has-file .adm-drop-txt{ display:none; } .adm-check{ display:flex; align-items:flex-start; gap:.7rem; padding:.85rem 1rem; border-radius:.9rem; border:1px solid #eef2f7; background:#fff; cursor:pointer; font-size:.9rem; color:#475569; line-height:1.5; } .adm-check:hover{ border-color:color-mix(in srgb, var(--primary) 35%, white); } .adm-check input{ margin-top:.15rem; width:1.1rem; height:1.1rem; accent-color:var(--primary); flex:none; } /* ---- Banner slots (CMS Banner Manager) --------------------------- */ .banner-slot{ display:grid; gap:1rem; margin:2.5rem auto; } .banner-img{ width:100%; height:auto; border-radius:1rem; display:block; } .banner-link{ display:block; transition:transform .25s ease; } .banner-link:hover{ transform:translateY(-3px); } /* ============================================================ Course catalog — premium cards, filters, pagination ============================================================ */ .crs-card{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid #e9edf3; border-radius:.85rem; overflow:hidden; box-shadow:0 3px 14px -9px rgba(15,23,42,.18); transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s, border-color .28s; } .crs-card:hover{ transform:translateY(-4px); box-shadow:0 22px 38px -22px rgba(15,23,42,.34); border-color:#d5dde8; } /* top accent bar (per-course gradient) */ .crs-accent{ position:absolute; inset:0 0 auto 0; height:3px; z-index:3; background:linear-gradient(90deg,var(--a1,#4f46e5),var(--a2,#7c3aed)); } .crs-thumb{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#f1f5f9; } .crs-thumb-ph{ width:100%; height:100%; display:grid; place-items:center; font-size:2.2rem; color:#fff; background:linear-gradient(135deg,var(--a1,#4f46e5),var(--a2,#7c3aed)); } /* duration pill (top-right) */ .crs-dur{ position:absolute; top:.55rem; right:.55rem; z-index:2; display:inline-flex; align-items:center; gap:.28rem; padding:.24rem .55rem; border-radius:999px; font-size:.7rem; font-weight:700; color:#fff; background:rgba(15,23,42,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .crs-badges{ position:absolute; top:.55rem; left:.55rem; z-index:2; display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; } .crs-badge{ display:inline-flex; align-items:center; gap:.28rem; font-size:.64rem; font-weight:800; letter-spacing:.01em; padding:.2rem .5rem; border-radius:999px; box-shadow:0 4px 10px -4px rgba(0,0,0,.3); } .crs-off{ position:absolute; left:.55rem; bottom:.55rem; z-index:2; padding:.22rem .55rem; border-radius:.45rem; font-size:.68rem; font-weight:800; color:#fff; background:#e11d48; box-shadow:0 6px 14px -6px rgba(225,29,72,.7); } .crs-quick{ position:absolute; right:.55rem; bottom:.55rem; z-index:2; display:flex; gap:.35rem; opacity:0; transform:translateY(6px); transition:.25s; } .crs-card:hover .crs-quick{ opacity:1; transform:none; } .crs-qbtn{ width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.95); color:#334155; display:grid; place-items:center; font-size:.78rem; box-shadow:0 6px 14px -6px rgba(0,0,0,.35); transition:.2s; } .crs-qbtn:hover{ background:var(--a1,#4f46e5); color:#fff; transform:scale(1.12); } @media (hover:none){ .crs-quick{ opacity:1; transform:none; } } .crs-body{ padding:.7rem .8rem .8rem; display:flex; flex-direction:column; flex:1; gap:.4rem; } /* meta strip: rating (left) + lessons/modules (right) */ .crs-meta{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.76rem; } .crs-rate{ display:inline-flex; align-items:center; gap:.28rem; color:#6b7280; } .crs-stars{ color:#f59e0b; letter-spacing:.03em; font-size:.76rem; } .crs-rate b{ color:#334155; font-weight:800; } .crs-rate small{ color:#9ca3af; font-weight:600; } .crs-rate--new{ color:#059669; font-weight:700; } .crs-units{ display:inline-flex; align-items:center; gap:.3rem; color:#64748b; font-weight:600; white-space:nowrap; } .crs-units i{ font-size:.72rem; color:#94a3b8; } .crs-title{ font-weight:800; font-size:1.02rem; line-height:1.28; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .crs-title a{ color:#111827; transition:color .2s; } .crs-title a:hover{ color:var(--a1,#4f46e5); } .crs-desc{ color:#6b7280; font-size:.82rem; line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* feature pills */ .crs-feats{ display:flex; flex-wrap:wrap; gap:.35rem; } .crs-feat{ display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:650; padding:.24rem .5rem; border-radius:.45rem; line-height:1; } .crs-feat i{ font-size:.68rem; } .crs-feat--ok{ background:#ecfdf5; color:#059669; } .crs-feat--blue{ background:#eff6ff; color:#2563eb; } .crs-feat--violet{ background:#f5f3ff; color:#7c3aed; } /* price row */ .crs-priceRow{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-top:auto; padding-top:.6rem; } .crs-price{ display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; } .crs-now{ font-weight:850; font-size:1.28rem; color:#0f172a; letter-spacing:-.02em; } .crs-mrp{ text-decoration:line-through; color:#9ca3af; font-size:.82rem; } .crs-free{ font-weight:850; font-size:1.2rem; color:#059669; } .crs-save{ font-size:.72rem; font-weight:800; color:#059669; background:#ecfdf5; padding:.15rem .45rem; border-radius:.4rem; white-space:nowrap; } /* actions */ .crs-actions{ display:flex; gap:.45rem; margin-top:.65rem; padding-top:.65rem; border-top:1px solid #eef1f5; } .crs-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-size:.83rem; font-weight:700; padding:.55rem .7rem; border-radius:.55rem; transition:transform .18s, box-shadow .18s, background .2s, filter .2s; white-space:nowrap; } .crs-btn:active{ transform:scale(.97); } .crs-btn-outline{ flex:1; background:#fff; color:#374151; border:1px solid #dfe4ea; } .crs-btn-outline:hover{ border-color:var(--a1,#4f46e5); color:var(--a1,#4f46e5); transform:translateY(-1px); } .crs-btn-accent{ flex:1.4; color:#fff; border:0; background:linear-gradient(135deg,var(--a1,#4f46e5),var(--a2,#7c3aed)); box-shadow:0 7px 16px -9px color-mix(in srgb, var(--a1,#4f46e5) 75%, transparent); } .crs-btn-accent:hover{ transform:translateY(-2px); filter:brightness(1.06); } .crs-btn-wa{ flex:none; width:38px; padding:.55rem 0; background:#25d366; color:#fff; border:0; font-size:1rem; box-shadow:0 7px 16px -9px rgba(37,211,102,.8); } .crs-btn-wa:hover{ transform:translateY(-2px); filter:brightness(1.05); } /* kept for the detail page / FAQ CTAs */ .crs-btn-primary{ background:var(--brand-gradient); color:#fff; flex:1; box-shadow:0 8px 18px -10px color-mix(in srgb,var(--primary) 70%,transparent); } .crs-btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.05); } .crs-btn-ghost{ background:color-mix(in srgb,var(--primary) 9%,white); color:var(--primary); } .crs-btn-ghost:hover{ background:color-mix(in srgb,var(--primary) 16%,white); transform:translateY(-2px); } /* List layout */ .crs-card--list{ flex-direction:row; } .crs-card--list .crs-thumb{ width:32%; aspect-ratio:auto; min-height:200px; flex:none; } .crs-card--list .crs-body{ padding:.9rem 1.1rem 1rem; } @media (max-width:640px){ .crs-card--list{ flex-direction:column; } .crs-card--list .crs-thumb{ width:100%; aspect-ratio:16/10; min-height:0; } } .dark .crs-title a{ color:#f1f5f9; } .dark .crs-now{ color:#f8fafc; } .dark .crs-rate b{ color:#e2e8f0; } .dark .crs-btn-outline{ background:transparent; border-color:#334155; color:#cbd5e1; } .dark .crs-actions{ border-color:#1e293b; } .dark .crs-save{ background:color-mix(in srgb,#059669 22%,transparent); } /* Filters */ .crs-filters{ background:#fff; border:1px solid #eef1f5; border-radius:1.1rem; padding:1.25rem; box-shadow:0 6px 22px -18px rgba(15,23,42,.3); } .crs-fgroup{ margin-bottom:1rem; } .crs-fgroup label{ display:block; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:#64748b; margin-bottom:.35rem; } .crs-input{ width:100%; border:1px solid #e2e8f0; border-radius:.7rem; padding:.55rem .8rem; font-size:.85rem; background:#fff; transition:.2s; } .crs-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent); } /* View toggle */ .crs-toggle{ display:inline-flex; border:1px solid #e2e8f0; border-radius:.7rem; overflow:hidden; } .crs-toggle a{ width:38px; height:38px; display:grid; place-items:center; color:#94a3b8; transition:.2s; } .crs-toggle a.active{ background:var(--brand-gradient); color:#fff; } /* Pagination */ .crs-pager{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-top:2.5rem; } .crs-pager a{ min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 .8rem; border-radius:999px; border:1px solid #e8edf3; background:#fff; font-weight:700; font-size:.85rem; color:#475569; box-shadow:0 1px 2px rgba(15,23,42,.05); transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, color .2s; } .crs-pager a:hover:not(.disabled):not(.current){ transform:translateY(-2px); color:var(--primary); border-color:var(--primary); box-shadow:0 10px 18px -10px color-mix(in srgb,var(--primary) 55%,transparent); } .crs-pager a.current{ background:var(--brand-gradient); color:#fff; border-color:transparent; transform:scale(1.08); box-shadow:0 10px 20px -8px color-mix(in srgb,var(--primary) 65%,transparent); } .crs-pager a.disabled{ opacity:.4; pointer-events:none; } /* Dark mode */ .dark .crs-card, .dark .crs-filters{ background:#0f172a; border-color:#1e293b; } .dark .crs-title a{ color:#e2e8f0; } .dark .crs-now{ color:#e2e8f0; } .dark .crs-input{ background:#0f172a; border-color:#1e293b; color:#e2e8f0; } .dark .crs-pager a{ background:#0f172a; border-color:#1e293b; color:#cbd5e1; } .dark .crs-price{ border-color:#1e293b; } /* ---- Course detail page ---- */ .det-h{ font-family:var(--font-display,inherit); font-weight:800; font-size:1.6rem; margin-bottom:1rem; position:relative; padding-left:.9rem; } .det-h::before{ content:''; position:absolute; left:0; top:.15em; bottom:.15em; width:5px; border-radius:999px; background:var(--brand-gradient); } .det-box{ background:#f8fafc; border:1px solid #eef1f5; border-radius:1.1rem; padding:1.5rem; } .dark .det-box{ background:#0f172a; border-color:#1e293b; } .det-acc{ border:1px solid #eef1f5; border-radius:1rem; overflow:hidden; background:#fff; transition:box-shadow .2s; } .det-acc[open]{ box-shadow:0 10px 26px -18px rgba(15,23,42,.35); } .dark .det-acc{ background:#0f172a; border-color:#1e293b; } .det-acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; } .det-acc summary::-webkit-details-marker{ display:none; } .det-acc-n{ width:28px; height:28px; border-radius:.6rem; background:color-mix(in srgb,var(--primary) 12%,white); color:var(--primary); font-weight:800; font-size:.8rem; display:grid; place-items:center; } .dark .det-acc-n{ background:color-mix(in srgb,var(--primary) 25%,#0f172a); } .det-chev{ transition:transform .25s; color:#94a3b8; } .det-acc[open] .det-chev{ transform:rotate(180deg); } .det-acc[open] .fa-plus.det-chev{ transform:rotate(45deg); } .det-acc-body{ padding:0 1.2rem 1.2rem 3.5rem; color:#64748b; font-size:.9rem; line-height:1.7; } .dark .det-acc-body{ color:#94a3b8; } /* ===================================================================== Premium Course Details page (cd-*) ===================================================================== */ :root{ --cd-grad:linear-gradient(135deg,#6366f1 0%,#0ea5e9 55%,#10b981 100%); } /* ---- Hero ---- */ .cd-hero{ position:relative; overflow:hidden; color:#fff; padding:2.75rem 0 6.5rem; background:linear-gradient(120deg,#0b1220 0%,#111a2e 45%,#0e2438 100%); } .cd-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; } .cd-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,14,25,.35),rgba(9,14,25,.85)); } .cd-hero .container{ position:relative; z-index:2; } .cd-hero-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:1; pointer-events:none; } .cd-hero-glow-1{ width:420px; height:420px; background:radial-gradient(circle,#6366f1,transparent 70%); top:-120px; left:-80px; } .cd-hero-glow-2{ width:460px; height:460px; background:radial-gradient(circle,#10b981,transparent 70%); bottom:-160px; right:-60px; } .cd-crumb{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:rgba(255,255,255,.65); margin-bottom:1.4rem; flex-wrap:wrap; } .cd-crumb a{ color:rgba(255,255,255,.7); transition:.2s; } .cd-crumb a:hover{ color:#fff; } .cd-crumb i{ font-size:.6rem; opacity:.5; } .cd-hero-grid{ max-width:56rem; } .cd-hero-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; } .cd-chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; padding:.32rem .7rem; border-radius:999px; letter-spacing:.01em; } .cd-chip-glass{ background:rgba(255,255,255,.12); color:#fff; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); } .cd-chip-amber{ background:#fbbf24; color:#422006; } .cd-title{ font-family:var(--font-display,inherit); font-weight:800; font-size:clamp(1.9rem,4vw,3rem); line-height:1.1; letter-spacing:-.02em; text-wrap:balance; } .cd-subtitle{ margin-top:1rem; font-size:1.06rem; line-height:1.6; color:rgba(255,255,255,.82); max-width:44rem; } .cd-hero-stats{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.5rem; margin-top:1.3rem; } .cd-stat{ display:inline-flex; align-items:center; gap:.45rem; font-size:.92rem; color:rgba(255,255,255,.85); } .cd-stat b{ font-weight:800; color:#fff; } .cd-stat small{ color:rgba(255,255,255,.6); font-size:.82rem; } .cd-stat-stars{ color:#fbbf24; letter-spacing:.05em; } .cd-hero-meta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; } .cd-meta-pill{ display:inline-flex; align-items:center; gap:.5rem; font-size:.83rem; font-weight:600; padding:.5rem .9rem; border-radius:.7rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.9); } .cd-meta-pill i{ color:#5eead4; } .cd-meta-cert{ background:linear-gradient(135deg,rgba(16,185,129,.25),rgba(14,165,233,.2)); border-color:rgba(94,234,212,.35); } .cd-meta-cert i{ color:#fcd34d; } .cd-hero-author{ display:flex; align-items:center; gap:.75rem; margin-top:1.5rem; font-size:.88rem; color:rgba(255,255,255,.8); } .cd-author-avatars{ display:flex; } .cd-author-avatars img, .cd-author-ph{ width:38px; height:38px; border-radius:50%; border:2px solid #0f1a2e; object-fit:cover; margin-left:-10px; } .cd-author-avatars :first-child{ margin-left:0; } .cd-author-ph{ display:grid; place-items:center; background:linear-gradient(135deg,#6366f1,#0ea5e9); color:#fff; font-weight:800; font-size:.85rem; } .cd-hero-author b{ color:#fff; font-weight:700; } /* ---- Body layout ---- */ .cd-body{ padding-top:0; } .cd-layout{ display:grid; grid-template-columns:1fr 370px; gap:2rem; align-items:start; margin-top:-4.5rem; position:relative; z-index:3; } .cd-main{ display:flex; flex-direction:column; } /* ---- Sticky tab bar ---- */ .cd-tabs{ position:sticky; top:64px; z-index:20; display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none; padding:.4rem; margin-bottom:1.5rem; border-radius:1rem; background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid #e9edf3; box-shadow:0 8px 30px -18px rgba(15,23,42,.35); } .cd-tabs::-webkit-scrollbar{ display:none; } .cd-tab{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; flex-shrink:0; cursor:pointer; padding:.62rem 1rem; border-radius:.7rem; font-size:.86rem; font-weight:650; color:#64748b; border:0; background:transparent; transition:.2s; } .cd-tab i{ font-size:.85rem; opacity:.8; } .cd-tab:hover{ color:#0f172a; background:#f1f5f9; } .cd-tab.is-active{ color:#fff; background:var(--cd-grad); box-shadow:0 8px 18px -8px rgba(14,165,233,.6); } .cd-tab.is-active i{ opacity:1; } .cd-tab:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; } /* ---- Panels + cards ---- */ .cd-panel{ display:none; flex-direction:column; gap:1.25rem; } .cd-panel.is-active{ display:flex; animation:cdFade .4s ease; } @keyframes cdFade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } } .cd-card{ background:#fff; border:1px solid #eef1f5; border-radius:1.25rem; padding:1.6rem 1.7rem; box-shadow:0 4px 22px -16px rgba(15,23,42,.25); } .cd-card-accent{ background:linear-gradient(180deg,#f0fdfa,#fff); border-color:#cffafe; } .cd-h{ display:flex; align-items:center; gap:.65rem; font-family:var(--font-display,inherit); font-weight:800; font-size:1.3rem; letter-spacing:-.01em; color:#0f172a; } .cd-h i{ font-size:1.05rem; color:var(--primary); } .cd-h-plain i{ color:#f59e0b; } .cd-h-row{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem; margin-bottom:.2rem; } .cd-h-meta{ font-size:.85rem; color:#94a3b8; font-weight:600; } .cd-h-sub{ font-size:.9rem; color:#64748b; margin:.35rem 0 1rem; } .cd-card .prose-cb{ margin-top:.9rem; } .cd-grid-2{ display:grid; grid-template-columns:1fr; gap:.75rem; margin-top:1.1rem; } @media (min-width:640px){ .cd-grid-2{ grid-template-columns:1fr 1fr; gap:.75rem 1.5rem; } } .cd-h4{ font-weight:700; color:#0f172a; margin-bottom:.4rem; } /* highlights / who-should-enroll rows */ .cd-hl{ display:flex; align-items:flex-start; gap:.7rem; font-size:.92rem; color:#334155; line-height:1.5; } .cd-hl-ic{ flex-shrink:0; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; margin-top:1px; background:color-mix(in srgb,var(--primary) 13%,white); color:var(--primary); font-size:.66rem; } .cd-learn{ display:flex; gap:.65rem; align-items:flex-start; font-size:.92rem; color:#334155; line-height:1.5; } .cd-learn i{ color:#10b981; margin-top:3px; flex-shrink:0; } /* skills */ .cd-skills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; } .cd-skill{ padding:.4rem .85rem; border-radius:.6rem; font-size:.82rem; font-weight:650; color:#0369a1; background:#e0f2fe; border:1px solid #bae6fd; } /* accordion */ .cd-acc-list{ display:flex; flex-direction:column; gap:.7rem; margin-top:1.1rem; } .cd-acc{ border:1px solid #eef1f5; border-radius:.9rem; overflow:hidden; background:#fff; transition:box-shadow .2s, border-color .2s; } .cd-acc[open]{ box-shadow:0 8px 24px -16px rgba(15,23,42,.3); border-color:#e2e8f0; } .cd-acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; } .cd-acc summary::-webkit-details-marker{ display:none; } .cd-acc-left{ display:flex; align-items:center; gap:.8rem; min-width:0; } .cd-acc-n{ width:28px; height:28px; flex-shrink:0; border-radius:.55rem; display:grid; place-items:center; font-weight:800; font-size:.8rem; background:color-mix(in srgb,var(--primary) 12%,white); color:var(--primary); } .cd-acc-title{ font-weight:700; color:#0f172a; } .cd-acc-right{ display:flex; align-items:center; gap:.9rem; flex-shrink:0; font-size:.78rem; color:#94a3b8; } .cd-acc-chev{ transition:transform .25s; } .cd-acc[open] .cd-acc-chev{ transform:rotate(180deg); } .cd-acc[open] .fa-plus.cd-acc-chev{ transform:rotate(45deg); } .cd-acc-body{ padding:0 1.1rem 1.1rem; } .cd-acc-desc{ color:#64748b; font-size:.88rem; line-height:1.65; margin-bottom:.7rem; } .cd-lessons{ display:flex; flex-direction:column; } .cd-lessons li{ display:flex; align-items:center; gap:.7rem; padding:.6rem .2rem; font-size:.9rem; color:#475569; border-top:1px solid #f1f5f9; } .cd-lessons li:first-child{ border-top:0; } .cd-lesson-ic{ width:26px; height:26px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; font-size:.66rem; background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary); } .cd-lesson-t{ flex:1; min-width:0; } .cd-lesson-free{ font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#0369a1; background:#e0f2fe; padding:.14rem .5rem; border-radius:.35rem; } .cd-lesson-d{ font-size:.78rem; color:#94a3b8; font-variant-numeric:tabular-nums; flex-shrink:0; } /* instructor */ .cd-instructor{ display:flex; gap:1rem; padding:1rem; border:1px solid #eef1f5; border-radius:1rem; transition:.2s; } .cd-instructor:hover{ border-color:#dbe2ec; box-shadow:0 10px 26px -20px rgba(15,23,42,.4); } .cd-instructor-img, .cd-instructor-ph{ width:64px; height:64px; border-radius:1rem; object-fit:cover; flex-shrink:0; } .cd-instructor-ph{ display:grid; place-items:center; background:linear-gradient(135deg,#6366f1,#0ea5e9); color:#fff; font-size:1.3rem; } .cd-instructor-name{ font-weight:800; color:#0f172a; } .cd-instructor-role{ font-size:.82rem; font-weight:600; color:var(--primary); } .cd-instructor-bio{ font-size:.82rem; color:#64748b; margin-top:.3rem; line-height:1.55; } /* feature cards */ .cd-features{ display:grid; grid-template-columns:1fr; gap:.9rem; margin-top:1.1rem; } @media (min-width:560px){ .cd-features{ grid-template-columns:1fr 1fr; } } .cd-feature{ display:flex; gap:.9rem; padding:1rem; border-radius:1rem; background:#f8fafc; border:1px solid #eef1f5; } .cd-feature-ic{ width:42px; height:42px; flex-shrink:0; border-radius:.8rem; display:grid; place-items:center; color:#fff; font-size:1rem; background:var(--cd-grad); } .cd-feature-t{ font-weight:750; color:#0f172a; font-size:.94rem; } .cd-feature-d{ font-size:.82rem; color:#64748b; line-height:1.5; margin-top:.2rem; } /* eligibility */ .cd-elig p{ font-size:.9rem; color:#475569; margin-bottom:.35rem; line-height:1.6; } .cd-ul{ display:flex; flex-direction:column; gap:.35rem; } .cd-ul li{ display:flex; gap:.55rem; align-items:flex-start; font-size:.9rem; color:#475569; } .cd-ul li i{ color:#10b981; margin-top:3px; font-size:.75rem; } /* certification */ .cd-cert{ display:flex; gap:1.4rem; align-items:flex-start; background:linear-gradient(135deg,#fffbeb,#fff); border-color:#fde68a; } .cd-cert-badge{ width:74px; height:74px; flex-shrink:0; border-radius:1.1rem; display:grid; place-items:center; font-size:2rem; color:#fff; background:linear-gradient(135deg,#f59e0b,#f97316); box-shadow:0 12px 26px -12px rgba(245,158,11,.7); } .cd-cert-text{ margin-top:.6rem; color:#475569; font-size:.94rem; line-height:1.65; } .cd-cert-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.9rem; } .cd-cert-tags span{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:#92400e; background:#fef3c7; padding:.32rem .7rem; border-radius:999px; } /* career */ .cd-careers{ display:flex; flex-wrap:wrap; gap:.6rem; } .cd-career{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1rem; border-radius:999px; font-size:.85rem; font-weight:650; color:#0f172a; background:#fff; border:1px solid #e2e8f0; transition:.2s; } .cd-career i{ color:var(--primary); font-size:.78rem; } .cd-career:hover{ border-color:var(--primary); transform:translateY(-2px); box-shadow:0 10px 20px -14px rgba(14,165,233,.6); } /* reviews */ .cd-rating-summary{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem; margin-top:1.1rem; padding:1.2rem 1.4rem; border-radius:1rem; background:linear-gradient(135deg,#fffbeb,#f0fdfa); border:1px solid #fde68a; } .cd-rating-big{ display:flex; flex-direction:column; align-items:center; gap:.2rem; } .cd-rating-num{ font-size:2.6rem; font-weight:850; line-height:1; color:#0f172a; letter-spacing:-.02em; } .cd-rating-stars{ color:#f59e0b; font-size:.95rem; letter-spacing:.05em; } .cd-rating-count{ font-size:.78rem; color:#94a3b8; font-weight:600; } .cd-rating-side{ font-size:.92rem; color:#475569; } .cd-rating-side b{ color:#0f172a; } .cd-reviews{ margin-top:1.2rem; } .cd-review{ padding:1.2rem; border-radius:1rem; border:1px solid #eef1f5; background:#fff; } .cd-review-stars{ color:#f59e0b; font-size:.78rem; margin-bottom:.6rem; } .cd-review-txt{ font-size:.9rem; color:#475569; line-height:1.6; margin-bottom:.9rem; } .cd-review-by{ display:flex; align-items:center; gap:.7rem; } .cd-review-by img, .cd-review-ph{ width:40px; height:40px; border-radius:50%; object-fit:cover; } .cd-review-ph{ display:grid; place-items:center; background:color-mix(in srgb,var(--primary) 14%,white); color:var(--primary); font-weight:800; } .cd-review-name{ font-weight:700; font-size:.88rem; color:#0f172a; } .cd-review-role{ font-size:.78rem; color:#94a3b8; } /* ---- Sticky enrollment card ---- */ .cd-aside{ position:sticky; top:80px; } .cd-enroll{ border-radius:1.4rem; overflow:hidden; background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(226,232,240,.9); box-shadow:0 24px 60px -30px rgba(15,23,42,.5); } .cd-enroll-img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; } .cd-enroll-ph{ display:grid; place-items:center; color:#fff; font-size:2.6rem; background:var(--cd-grad); } .cd-enroll-body{ padding:1.4rem; display:flex; flex-direction:column; gap:.85rem; } .cd-price-row{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.55rem; } .cd-price{ font-size:2rem; font-weight:850; color:#0f172a; letter-spacing:-.02em; } .cd-price-free{ color:#059669; } .cd-mrp{ text-decoration:line-through; color:#94a3b8; font-size:1rem; } .cd-discount{ margin-left:auto; font-size:.78rem; font-weight:800; color:#fff; background:linear-gradient(135deg,#f43f5e,#e11d48); padding:.3rem .6rem; border-radius:.5rem; box-shadow:0 6px 14px -6px rgba(225,29,72,.7); } .cd-offer-row{ display:flex; flex-wrap:wrap; gap:.5rem; } .cd-offer{ font-size:.74rem; font-weight:700; color:#e11d48; background:#fff1f2; padding:.25rem .6rem; border-radius:.45rem; } .cd-seats{ font-size:.74rem; font-weight:700; color:#ea580c; background:#fff7ed; padding:.25rem .6rem; border-radius:.45rem; } .cd-emi{ font-size:.8rem; color:#64748b; } /* premium CTA buttons */ .cd-btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-size:.95rem; font-weight:750; padding:.85rem 1.1rem; border-radius:.85rem; border:0; cursor:pointer; width:100%; transition:transform .18s, box-shadow .25s, filter .2s; -webkit-tap-highlight-color:transparent; } .cd-btn:active{ transform:scale(.98); } .cd-btn-primary{ color:#fff; background:var(--cd-grad); background-size:180% 180%; box-shadow:0 12px 26px -12px rgba(14,165,233,.75); } .cd-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(14,165,233,.85); filter:brightness(1.05); animation:cdShift 3s ease infinite; } @keyframes cdShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } } .cd-btn-outline{ color:#0f172a; background:#fff; border:1.5px solid #e2e8f0; } .cd-btn-outline:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-2px); } .cd-btn-ghost{ color:#475569; background:#f1f5f9; } .cd-btn-ghost:hover{ background:#e2e8f0; transform:translateY(-2px); } .cd-ripple{ position:absolute; border-radius:50%; transform:scale(0); background:rgba(255,255,255,.5); animation:cdRipple .6s ease-out; pointer-events:none; } @keyframes cdRipple{ to{ transform:scale(2.4); opacity:0; } } .cd-quick-actions{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; } .cd-mini{ display:inline-flex; flex-direction:column; align-items:center; gap:.2rem; padding:.55rem .3rem; border-radius:.7rem; font-size:.72rem; font-weight:650; color:#475569; background:#f8fafc; border:1px solid #eef1f5; transition:.2s; } .cd-mini i{ font-size:.95rem; } .cd-mini:hover{ color:var(--primary); border-color:var(--primary); transform:translateY(-1px); } .cd-mini-wa:hover{ color:#25d366; border-color:#25d366; } .cd-facts{ display:flex; flex-direction:column; gap:.1rem; padding-top:.85rem; margin-top:.2rem; border-top:1px solid #eef1f5; } .cd-facts li{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem 0; font-size:.86rem; border-bottom:1px dashed #f1f5f9; } .cd-facts li:last-child{ border-bottom:0; } .cd-facts li span{ color:#64748b; display:inline-flex; align-items:center; gap:.5rem; } .cd-facts li span i{ color:#94a3b8; width:16px; text-align:center; } .cd-facts li b{ color:#0f172a; text-align:right; } .cd-fact-alert{ color:#e11d48 !important; } .cd-guarantee{ text-align:center; font-size:.78rem; color:#64748b; padding-top:.4rem; } .cd-guarantee i{ color:#10b981; } /* ---- Dark mode ---- */ .dark .cd-tabs{ background:rgba(15,23,42,.8); border-color:#1e293b; } .dark .cd-tab{ color:#94a3b8; } .dark .cd-tab:hover{ color:#e2e8f0; background:#1e293b; } .dark .cd-card{ background:#0f172a; border-color:#1e293b; } .dark .cd-card-accent{ background:linear-gradient(180deg,#0b2b28,#0f172a); border-color:#134e4a; } .dark .cd-h, .dark .cd-h4, .dark .cd-acc-title, .dark .cd-instructor-name, .dark .cd-feature-t, .dark .cd-review-name, .dark .cd-price, .dark .cd-facts li b, .dark .cd-rating-num{ color:#f1f5f9; } .dark .cd-hl, .dark .cd-learn, .dark .cd-elig p, .dark .cd-ul li, .dark .cd-feature-d, .dark .cd-review-txt, .dark .cd-cert-text, .dark .cd-instructor-bio{ color:#cbd5e1; } .dark .cd-acc, .dark .cd-instructor, .dark .cd-feature, .dark .cd-review, .dark .cd-career, .dark .cd-btn-outline{ background:#0f172a; border-color:#1e293b; } .dark .cd-feature{ background:#0b1424; } .dark .cd-btn-ghost, .dark .cd-mini{ background:#1e293b; border-color:#334155; color:#cbd5e1; } .dark .cd-enroll{ background:rgba(15,23,42,.9); border-color:#1e293b; } .dark .cd-lessons li, .dark .cd-facts li{ border-color:#1e293b; } .dark .cd-skill{ background:color-mix(in srgb,#0ea5e9 18%,#0f172a); border-color:#164e63; color:#7dd3fc; } .dark .cd-career:hover{ color:#7dd3fc; } /* ---- Responsive ---- */ @media (max-width:1023px){ .cd-layout{ grid-template-columns:1fr; margin-top:-3rem; } .cd-aside{ position:static; order:-1; margin-bottom:.5rem; } .cd-enroll{ max-width:440px; } .cd-tabs{ top:0; } } @media (max-width:520px){ .cd-hero{ padding:2rem 0 5rem; } .cd-card{ padding:1.25rem 1.15rem; border-radius:1rem; } .cd-cert{ flex-direction:column; gap:1rem; } .cd-quick-actions{ grid-template-columns:1fr 1fr 1fr; } } @media (prefers-reduced-motion:reduce){ .cd-panel.is-active{ animation:none; } .cd-btn-primary:hover{ animation:none; } .cd-ripple{ display:none; } } /* ---- Advanced search: chips, icons, thumbnails, voice ---- */ .search-mic{ display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.7rem; border:0; background:transparent; color:#94a3b8; cursor:pointer; transition:.2s; } .search-mic:hover{ color:var(--primary); background:color-mix(in srgb,var(--primary) 10%,transparent); } .search-mic.listening{ color:#fff; background:#ef4444; animation:micpulse 1s ease-in-out infinite; } @keyframes micpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.5);} 50%{ box-shadow:0 0 0 8px rgba(239,68,68,0);} } .search-sec{ padding:.4rem .25rem 1rem; } .search-sec-h{ display:flex; align-items:center; gap:.45rem; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; margin-bottom:.7rem; } .search-sec-h i{ color:var(--primary); } .search-clear{ margin-left:auto; border:0; background:none; color:#94a3b8; font-size:.7rem; font-weight:700; cursor:pointer; text-transform:none; letter-spacing:0; } .search-clear:hover{ color:#ef4444; } .search-chips{ display:flex; flex-wrap:wrap; gap:.5rem; } .search-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .8rem; border-radius:999px; font-size:.82rem; font-weight:600; background:color-mix(in srgb,var(--primary) 8%,white); color:#334155; border:1px solid transparent; transition:.2s; } .search-chip::before{ content:"\f002"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.7rem; color:#94a3b8; } .search-chip:hover{ background:var(--brand-gradient); color:#fff; transform:translateY(-1px); box-shadow:0 8px 16px -8px color-mix(in srgb,var(--primary) 60%,transparent); } .search-chip:hover::before{ color:#fff; } .dark .search-chip{ background:rgba(148,163,184,.12); color:#cbd5e1; } .search-ic{ display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:.7rem; flex:none; background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary); font-size:.95rem; } .dark .search-ic{ background:rgba(15,118,110,.2); } .search-thumb{ width:3.4rem; height:2.6rem; object-fit:cover; border-radius:.6rem; flex:none; } .search-item{ align-items:center; } .search-item .search-type{ margin-left:auto; } /* ---- Blog index: toolbar, tags, meta ---- */ .blog-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin:1.5rem 0 2.5rem; } .blog-search{ position:relative; flex:1 1 320px; max-width:460px; } .blog-search i.fa-magnifying-glass{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:.85rem; } .blog-search input{ width:100%; border:1px solid #e2e8f0; border-radius:999px; padding:.75rem 2.6rem .75rem 2.6rem; font-size:.9rem; background:#fff; transition:.25s; } .blog-search input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent); } .blog-search-clear{ position:absolute; right:.9rem; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:.85rem; } .blog-search-clear:hover{ color:#ef4444; } .dark .blog-search input{ background:#0f172a; border-color:#1e293b; color:#e2e8f0; } .blog-toolbar-right{ display:flex; align-items:center; gap:1rem; } .blog-count{ font-size:.85rem; color:#64748b; } .blog-count b{ color:var(--primary); } .blog-sort{ border:1px solid #e2e8f0; border-radius:999px; padding:.6rem 1rem; font-size:.85rem; font-weight:600; background:#fff; cursor:pointer; transition:.2s; } .blog-sort:hover{ border-color:var(--primary); color:var(--primary); } .dark .blog-sort{ background:#0f172a; border-color:#1e293b; color:#e2e8f0; } .blog-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.75rem 0 .25rem; } .blog-tag{ font-size:.72rem; font-weight:700; color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,white); padding:.22rem .55rem; border-radius:.45rem; transition:.2s; } .blog-tag:hover{ background:var(--brand-gradient); color:#fff; } .dark .blog-tag{ background:rgba(15,118,110,.2); } .blog-avatar{ display:grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:999px; flex:none; background:var(--brand-gradient); color:#fff; font-size:.65rem; font-weight:800; margin-right:.15rem; } .blog-pageinfo{ text-align:center; font-size:.85rem; color:#94a3b8; margin-top:.9rem; } @media (max-width:640px){ .blog-toolbar{ flex-direction:column; align-items:stretch; } .blog-toolbar-right{ justify-content:space-between; } } /* ============================================================ FAQ / Help Centre ============================================================ */ .faq-hero{ position:relative; overflow:hidden; padding:4rem 0 3.5rem; text-align:center; background:linear-gradient(135deg,#0f766e 0%,#0891b2 45%,#2563eb 100%); color:#fff; } .faq-orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.45; animation:faqfloat 14s ease-in-out infinite; } .faq-orb-1{ width:22rem; height:22rem; background:#22d3ee; top:-8rem; left:-6rem; } .faq-orb-2{ width:26rem; height:26rem; background:#a78bfa; bottom:-12rem; right:-8rem; animation-delay:-7s; } @keyframes faqfloat{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(20px,-24px) scale(1.08);} } .faq-hero-inner{ position:relative; z-index:1; max-width:52rem; } .faq-crumb{ font-size:.85rem; color:rgba(255,255,255,.7); margin-bottom:1rem; } .faq-crumb a:hover{ color:#fff; } .faq-crumb span{ margin:0 .35rem; } .faq-kicker{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .85rem; border-radius:999px; background:rgba(255,255,255,.15); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:.75rem; font-weight:700; letter-spacing:.03em; } .faq-hero h1{ font-family:var(--font-display,inherit); font-weight:800; font-size:clamp(2rem,5vw,3rem); margin:1rem 0 .6rem; } .faq-hero p{ color:rgba(255,255,255,.85); } .faq-searchbar{ position:relative; max-width:34rem; margin:1.75rem auto 0; } .faq-searchbar input{ width:100%; border:0; border-radius:999px; padding:1rem 6rem 1rem 3rem; font-size:1rem; background:rgba(255,255,255,.97); color:#0f172a; box-shadow:0 20px 40px -18px rgba(2,6,23,.55); } .faq-searchbar input:focus{ outline:none; box-shadow:0 0 0 4px rgba(255,255,255,.35), 0 20px 40px -18px rgba(2,6,23,.55); } .faq-search-ic{ position:absolute; left:1.15rem; top:50%; transform:translateY(-50%); color:#94a3b8; } .faq-mic,.faq-clear{ position:absolute; top:50%; transform:translateY(-50%); width:2.2rem; height:2.2rem; border:0; border-radius:50%; display:grid; place-items:center; background:transparent; color:#64748b; cursor:pointer; transition:.2s; } .faq-mic{ right:2.9rem; } .faq-clear{ right:.6rem; } .faq-mic:hover,.faq-clear:hover{ background:#f1f5f9; color:#0f766e; } .faq-mic.listening{ background:#ef4444; color:#fff; animation:faqpulse 1s infinite; } @keyframes faqpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(239,68,68,.55);} 50%{ box-shadow:0 0 0 9px rgba(239,68,68,0);} } .faq-hits{ margin-top:.9rem; font-size:.88rem; color:rgba(255,255,255,.9); } .faq-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; } .faq-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.55rem .95rem; border-radius:999px; border:1px solid #e5e9f0; background:#fff; color:#475569; font-size:.85rem; font-weight:600; cursor:pointer; transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .25s, color .25s, border-color .25s; } .faq-chip i{ color:#94a3b8; transition:color .25s; } .faq-chip span{ font-size:.7rem; font-weight:800; padding:.1rem .4rem; border-radius:999px; background:#f1f5f9; color:#64748b; } .faq-chip:hover{ transform:translateY(-2px); border-color:var(--primary); color:var(--primary); } .faq-chip:hover i{ color:var(--primary); } .faq-chip.is-active{ background:var(--brand-gradient); color:#fff; border-color:transparent; box-shadow:0 10px 22px -12px color-mix(in srgb,var(--primary) 75%,transparent); } .faq-chip.is-active i{ color:#fff; } .faq-chip.is-active span{ background:rgba(255,255,255,.25); color:#fff; } .dark .faq-chip{ background:#0f172a; border-color:#1e293b; color:#cbd5e1; } .faq-tools{ display:flex; gap:1rem; margin-bottom:1rem; } .faq-tool{ border:0; background:none; color:#64748b; font-size:.8rem; font-weight:700; cursor:pointer; transition:.2s; } .faq-tool:hover{ color:var(--primary); } .faq-list{ display:flex; flex-direction:column; gap:.75rem; } .faq-item{ border:1px solid #e9edf3; border-radius:1rem; background:rgba(255,255,255,.75); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); overflow:hidden; transition:box-shadow .25s, border-color .25s; } .faq-item:hover{ border-color:color-mix(in srgb,var(--primary) 35%,white); box-shadow:0 12px 28px -20px rgba(15,23,42,.4); } .faq-item.is-open{ box-shadow:0 18px 38px -24px rgba(15,23,42,.45); border-color:color-mix(in srgb,var(--primary) 45%,white); } .dark .faq-item{ background:rgba(15,23,42,.7); border-color:#1e293b; } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left; padding:1.15rem 1.3rem; border:0; background:none; cursor:pointer; font-weight:700; font-size:1rem; color:#111827; } .dark .faq-q{ color:#e2e8f0; } .faq-plus{ display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:.6rem; flex:none; background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary); font-size:.75rem; transition:transform .3s, background .3s, color .3s; } .faq-item.is-open .faq-plus{ transform:rotate(45deg); background:var(--brand-gradient); color:#fff; } .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s ease; } .faq-item.is-open .faq-a{ grid-template-rows:1fr; } .faq-a-inner{ overflow:hidden; } .faq-a-body{ padding:0 1.3rem .3rem; color:#64748b; font-size:.94rem; line-height:1.75; } .faq-a-body mark, .faq-q-text mark{ background:#fef08a; color:#713f12; border-radius:.2rem; padding:0 .1rem; } .faq-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; padding:.85rem 1.3rem 1.2rem; } .faq-catbadge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700; color:var(--primary); background:color-mix(in srgb,var(--primary) 9%,white); padding:.25rem .6rem; border-radius:.5rem; } .faq-vote{ display:flex; align-items:center; gap:.5rem; margin-left:auto; font-size:.78rem; color:#94a3b8; } .faq-vbtn{ display:inline-flex; align-items:center; gap:.3rem; border:1px solid #e5e9f0; background:#fff; color:#64748b; padding:.28rem .6rem; border-radius:.5rem; font-size:.75rem; font-weight:700; cursor:pointer; transition:.2s; } .faq-vbtn:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-1px); } .faq-vote.voted .faq-vbtn{ pointer-events:none; opacity:.6; } .faq-vote.voted .faq-vbtn.picked{ opacity:1; border-color:var(--primary); color:var(--primary); background:color-mix(in srgb,var(--primary) 8%,white); } .faq-thanks{ color:#059669; font-style:normal; font-weight:700; font-size:.75rem; } .dark .faq-vbtn{ background:#0f172a; border-color:#1e293b; color:#94a3b8; } .faq-none{ text-align:center; padding:3rem 1.5rem; border:1px dashed #cbd5e1; border-radius:1.25rem; margin-top:1rem; } .faq-none-ic{ width:4rem; height:4rem; margin:0 auto 1rem; border-radius:1rem; display:grid; place-items:center; font-size:1.5rem; color:#fff; background:var(--brand-gradient); } .faq-none h3{ font-weight:800; font-size:1.25rem; } .faq-none p{ color:#64748b; margin:.4rem 0 1.4rem; } .faq-none-btns{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; } .faq-side{ border:1px solid #e9edf3; border-radius:1.15rem; padding:1.25rem; background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 8px 26px -20px rgba(15,23,42,.35); } .dark .faq-side{ background:rgba(15,23,42,.7); border-color:#1e293b; } .faq-side h3{ display:flex; align-items:center; gap:.45rem; font-weight:800; font-size:.95rem; margin-bottom:.9rem; } .faq-side h3 i{ color:var(--primary); } .faq-side ul{ display:flex; flex-direction:column; gap:.5rem; } .faq-jump{ text-align:left; border:0; background:none; color:#64748b; font-size:.86rem; line-height:1.45; cursor:pointer; padding-left:.9rem; position:relative; transition:color .2s, transform .2s; } .faq-jump::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--primary); opacity:.5; } .faq-jump:hover{ color:var(--primary); transform:translateX(2px); } .faq-help{ text-align:center; } .faq-help-ic{ width:3rem; height:3rem; margin:0 auto .75rem; border-radius:.9rem; display:grid; place-items:center; color:#fff; background:var(--brand-gradient); } .faq-help p{ color:#64748b; font-size:.86rem; margin-bottom:1rem; } /* ============================================================ Coupons — student cards + admin target picker ============================================================ */ .cp-card{ position:relative; display:flex; overflow:hidden; border-radius:1rem; background:#fff; border:1px solid #e9edf3; box-shadow:0 6px 20px -14px rgba(15,23,42,.3); transition:transform .25s, box-shadow .25s; } .cp-card:hover{ transform:translateY(-3px); box-shadow:0 20px 36px -22px rgba(15,23,42,.4); } .cp-dim{ opacity:.62; filter:saturate(.5); } .cp-left{ position:relative; flex:none; width:6.5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; padding:1rem .5rem; } .cp-card--emerald .cp-left{ background:linear-gradient(150deg,#059669,#10b981); } .cp-card--rose .cp-left{ background:linear-gradient(150deg,#be123c,#f43f5e); } .cp-card--blue .cp-left{ background:linear-gradient(150deg,#1d4ed8,#3b82f6); } .cp-card--amber .cp-left{ background:linear-gradient(150deg,#b45309,#f59e0b); } .cp-card--slate .cp-left{ background:linear-gradient(150deg,#475569,#94a3b8); } /* perforated edge */ .cp-left::after{ content:""; position:absolute; right:-6px; top:0; bottom:0; width:12px; background:radial-gradient(circle at 6px 6px, transparent 5px, #fff 5px) 0 0/12px 12px repeat-y; } .cp-val{ font-size:1.5rem; font-weight:900; line-height:1; letter-spacing:-.02em; } .cp-off{ font-size:.65rem; font-weight:800; letter-spacing:.14em; opacity:.9; margin-top:.15rem; } .cp-body{ flex:1; min-width:0; padding:1rem 1.1rem; } .cp-title{ font-weight:800; font-size:1rem; color:#0f172a; } .cp-min{ font-size:.75rem; color:#94a3b8; margin-top:.1rem; } .cp-state{ flex:none; font-size:.65rem; font-weight:800; padding:.2rem .5rem; border-radius:999px; white-space:nowrap; } .cp-state--emerald{ background:#ecfdf5; color:#059669; } .cp-state--rose{ background:#fef2f2; color:#dc2626; } .cp-state--blue{ background:#eff6ff; color:#2563eb; } .cp-state--amber{ background:#fffbeb; color:#b45309; } .cp-state--slate{ background:#f1f5f9; color:#64748b; } .cp-code{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:.7rem 0; padding:.5rem .75rem; border:1px dashed #cbd5e1; border-radius:.6rem; background:#f8fafc; font-family:ui-monospace,monospace; font-weight:800; letter-spacing:.06em; color:#0f172a; } .cp-copy{ border:0; background:none; color:#64748b; cursor:pointer; padding:.15rem .3rem; border-radius:.35rem; transition:.2s; } .cp-copy:hover{ color:var(--primary); background:rgba(15,118,110,.08); } .cp-copy.copied{ color:#059669; } .cp-meta{ font-size:.75rem; color:#64748b; margin-top:.3rem; } .cp-meta i{ color:var(--primary); margin-right:.2rem; } .cp-urgent{ color:#e11d48; font-weight:700; } .cp-terms{ margin-top:.6rem; } .cp-terms summary{ font-size:.72rem; font-weight:700; color:#94a3b8; cursor:pointer; list-style:none; } .cp-terms summary::-webkit-details-marker{ display:none; } .cp-terms summary::before{ content:"\f05a"; font-family:"Font Awesome 6 Free"; font-weight:900; margin-right:.3rem; } .cp-terms summary:hover{ color:var(--primary); } .cp-terms p{ font-size:.75rem; color:#64748b; margin-top:.35rem; line-height:1.6; } .cp-apply{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.8rem; padding:.45rem .85rem; border-radius:.6rem; font-size:.78rem; font-weight:800; color:#fff; background:var(--brand-gradient); box-shadow:0 8px 16px -9px rgba(15,118,110,.7); transition:.2s; } .cp-apply:hover{ transform:translateY(-2px); filter:brightness(1.06); } /* Admin target picker */ .cp-target{ display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:.9rem .5rem; border:1px solid #e2e8f0; border-radius:.85rem; cursor:pointer; text-align:center; font-size:.78rem; font-weight:700; color:#64748b; transition:.2s; } .cp-target i{ font-size:1.1rem; color:#94a3b8; transition:.2s; } .cp-target:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-2px); } .cp-target:hover i{ color:var(--primary); } .cp-target.is-active{ border-color:transparent; color:#fff; background:var(--brand-gradient); box-shadow:0 10px 22px -12px rgba(15,118,110,.75); } .cp-target.is-active i{ color:#fff; } .dark .cp-target{ background:#0f172a; border-color:#1e293b; } .dark .cp-card{ background:#0f172a; border-color:#1e293b; } .dark .cp-title{ color:#e2e8f0; } .dark .cp-code{ background:#0b1220; border-color:#334155; color:#e2e8f0; } /* ---- Cookie consent banner ---- */ .cb-consent{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:70; opacity:0; transform:translateY(14px); transition:opacity .3s ease, transform .3s ease; } .cb-consent.show{ opacity:1; transform:none; } .cb-consent-in{ max-width:60rem; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem 1.25rem; border-radius:1rem; background:rgba(15,23,42,.94); color:#e2e8f0; border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 50px -22px rgba(0,0,0,.8); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); } .cb-consent-ic{ display:grid; place-items:center; width:2.5rem; height:2.5rem; flex:none; border-radius:.75rem; color:#fff; background:var(--brand-gradient); } .cb-consent-txt{ flex:1; min-width:14rem; font-size:.85rem; line-height:1.55; color:#cbd5e1; } .cb-consent-txt a{ color:#5eead4; font-weight:700; text-decoration:underline; } .cb-consent-btns{ display:flex; gap:.5rem; flex:none; } .cb-consent-no,.cb-consent-yes{ padding:.55rem 1.1rem; border-radius:.7rem; font-size:.82rem; font-weight:800; cursor:pointer; border:0; transition:.2s; } .cb-consent-no{ background:rgba(255,255,255,.1); color:#cbd5e1; } .cb-consent-no:hover{ background:rgba(255,255,255,.18); } .cb-consent-yes{ background:var(--brand-gradient); color:#fff; box-shadow:0 8px 18px -9px rgba(15,118,110,.8); } .cb-consent-yes:hover{ transform:translateY(-2px); } /* ============================================================ PWA — install button, modal, iOS steps, success toast ============================================================ */ .pwa-fab{ position:fixed; left:1.25rem; bottom:1.25rem; z-index:60; display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.15rem; border:0; border-radius:999px; cursor:pointer; color:#fff; font-weight:800; font-size:.85rem; background:var(--brand-gradient); box-shadow:0 14px 30px -12px rgba(15,118,110,.85); animation:pwaIn .45s cubic-bezier(.34,1.56,.64,1); transition:transform .2s, box-shadow .2s; } .pwa-fab:hover{ transform:translateY(-3px); box-shadow:0 20px 38px -14px rgba(15,118,110,.95); } .pwa-fab:active{ transform:scale(.95); } @keyframes pwaIn{ from{ opacity:0; transform:translateY(18px) scale(.9);} to{ opacity:1; transform:none;} } @media (max-width:640px){ .pwa-fab span{ display:none; } .pwa-fab{ padding:.9rem; left:1rem; bottom:5.5rem; } } .pwa-modal{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:1rem; opacity:0; transition:opacity .25s ease; } .pwa-modal.show{ opacity:1; } .pwa-backdrop{ position:absolute; inset:0; background:rgba(2,6,23,.65); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .pwa-panel{ position:relative; width:100%; max-width:26rem; padding:1.75rem; border-radius:1.4rem; background:#fff; box-shadow:0 40px 80px -30px rgba(2,6,23,.7); transform:translateY(18px) scale(.96); transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .pwa-modal.show .pwa-panel{ transform:none; } .dark .pwa-panel{ background:#0f172a; color:#e2e8f0; } .pwa-x{ position:absolute; top:.9rem; right:.9rem; width:2rem; height:2rem; border:0; border-radius:.6rem; background:#f1f5f9; color:#64748b; cursor:pointer; transition:.2s; } .pwa-x:hover{ background:#e2e8f0; color:#0f172a; } .dark .pwa-x{ background:#1e293b; color:#94a3b8; } .pwa-head{ display:flex; align-items:center; gap:.9rem; margin-bottom:1rem; } .pwa-logo{ width:4rem; height:4rem; border-radius:1rem; object-fit:cover; flex:none; box-shadow:0 10px 24px -12px rgba(2,6,23,.5); } .pwa-name{ font-weight:900; font-size:1.15rem; line-height:1.2; } .pwa-url{ font-size:.78rem; color:#94a3b8; } .pwa-desc{ font-size:.88rem; color:#64748b; line-height:1.6; } .dark .pwa-desc{ color:#94a3b8; } .pwa-benefits{ margin:1.1rem 0; display:flex; flex-direction:column; gap:.55rem; } .pwa-benefits li{ display:flex; align-items:center; gap:.55rem; font-size:.85rem; font-weight:600; color:#334155; } .dark .pwa-benefits li{ color:#cbd5e1; } .pwa-benefits i{ color:#10b981; } .pwa-ios{ margin-bottom:1rem; padding:.9rem 1rem; border-radius:.9rem; background:#f8fafc; border:1px solid #e2e8f0; } .dark .pwa-ios{ background:#0b1220; border-color:#1e293b; } .pwa-ios-t{ font-weight:800; font-size:.82rem; margin-bottom:.45rem; } .pwa-ios ol{ list-style:decimal; padding-left:1.1rem; display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; color:#64748b; } .pwa-actions{ display:flex; gap:.6rem; } .pwa-cancel{ flex:1; padding:.75rem 1rem; border-radius:.8rem; border:1px solid #e2e8f0; background:#fff; color:#475569; font-weight:700; font-size:.85rem; cursor:pointer; transition:.2s; } .pwa-cancel:hover{ background:#f8fafc; } .dark .pwa-cancel{ background:transparent; border-color:#334155; color:#cbd5e1; } .pwa-go{ flex:1.4; position:relative; overflow:hidden; padding:.75rem 1rem; border:0; border-radius:.8rem; color:#fff; font-weight:800; font-size:.85rem; cursor:pointer; background:var(--brand-gradient); box-shadow:0 12px 24px -12px rgba(15,118,110,.9); transition:transform .2s, filter .2s; } .pwa-go:hover{ transform:translateY(-2px); filter:brightness(1.06); } .pwa-go:active{ transform:scale(.97); } .pwa-go:disabled{ opacity:.75; cursor:wait; } /* ripple */ .pwa-go::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle, rgba(255,255,255,.5) 10%, transparent 10.01%); background-repeat:no-repeat; background-position:50%; transform:scale(10); opacity:0; transition:transform .5s, opacity .8s; } .pwa-go:active::after{ transform:scale(0); opacity:.35; transition:0s; } .pwa-done{ position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%) translateY(16px); z-index:95; display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.3rem; border-radius:999px; background:#059669; color:#fff; font-weight:800; font-size:.85rem; box-shadow:0 18px 36px -14px rgba(5,150,105,.9); opacity:0; transition:opacity .3s, transform .3s; } .pwa-done.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* ============================================================ CAPTCHA widget ============================================================ */ .cap{ background:#fffbeb; border:1px solid #fde68a; border-radius:1rem; padding:1.1rem 1.25rem; } html[data-theme="dark"] .cap{ background:rgba(245,158,11,.06); border-color:rgba(245,158,11,.25); } .cap-row{ display:flex; align-items:center; gap:.75rem; margin:.4rem 0 .75rem; flex-wrap:wrap; } .cap-img{ display:inline-flex; padding:.35rem .5rem; background:#fff; border:1px solid #e5e7eb; border-radius:.6rem; box-shadow:inset 0 1px 3px rgba(0,0,0,.05); } .cap-img img{ display:block; height:52px; width:auto; user-select:none; } html[data-theme="dark"] .cap-img{ background:#0b1727; border-color:rgba(148,163,184,.2); } .cap-refresh{ display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .9rem; border-radius:.6rem; border:1.5px solid #e2e8f0; background:#fff; color:#475569; font-weight:700; font-size:.85rem; cursor:pointer; transition:.15s; } .cap-refresh:hover{ border-color:var(--primary); color:var(--primary); transform:translateY(-1px); } html[data-theme="dark"] .cap-refresh{ background:#0b1727; border-color:rgba(148,163,184,.2); color:#cbd5e1; } /* NB: no text-transform here — the captcha is case-sensitive, so what the user types must be shown back to them exactly as typed. */ .cap-input{ letter-spacing:.3em; font-weight:700; max-width:22rem; font-family:ui-monospace,Menlo,Consolas,monospace; } .cap-input::placeholder{ letter-spacing:.08em; font-weight:500; font-family:inherit; text-transform:none; } .cap-hint{ font-size:.78rem; color:#94a3b8; margin-top:.5rem; } .cap-warn{ color:#b45309; font-weight:800; } /* Deter casual copying / dragging of the challenge image. */ .cap-img img{ -webkit-user-select:none; user-select:none; -webkit-user-drag:none; pointer-events:none; } .cap-cant{ background:none; border:0; padding:0; color:#4f46e5; font-weight:700; text-decoration:underline; cursor:pointer; font-size:.78rem; } .cap.is-error{ border-color:#fca5a5; background:#fef2f2; } /* ============================================================ Admission — single-page card sections ============================================================ */ .adm-sec-head{ display:flex; align-items:center; gap:.75rem; } .adm-sec-n{ display:grid; place-items:center; width:1.9rem; height:1.9rem; flex:none; border-radius:99px; background:var(--brand-gradient); color:#fff; font-weight:800; font-size:.85rem; } .adm-sec-ic{ display:grid; place-items:center; width:2.4rem; height:2.4rem; flex:none; border-radius:.7rem; background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary); font-size:1rem; } html[data-theme="dark"] .adm-sec-ic{ background:rgba(94,234,212,.1); } .adm-sec{ scroll-margin-top:90px; } .adm-nav{ position:sticky; top:90px; display:flex; flex-direction:column; gap:.25rem; } .adm-nav-item{ display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:.6rem; color:#64748b; font-weight:600; font-size:.85rem; transition:.15s; } .adm-nav-item:hover{ background:#f1f5f9; color:var(--primary); } .adm-nav-item.is-active{ background:color-mix(in srgb,var(--primary) 9%,white); color:var(--primary); } html[data-theme="dark"] .adm-nav-item:hover,html[data-theme="dark"] .adm-nav-item.is-active{ background:rgba(94,234,212,.1); } .adm-nav-n{ display:grid; place-items:center; width:1.5rem; height:1.5rem; flex:none; border-radius:99px; background:#e2e8f0; color:#475569; font-size:.72rem; font-weight:800; } .adm-nav-item.is-active .adm-nav-n{ background:var(--brand-gradient); color:#fff; } /* Admission — phone prefix, helper text, photo preview */ .phone-wrap{ display:flex; align-items:stretch; border:1.5px solid #e2e8f0; border-radius:.7rem; overflow:hidden; background:#fff; } .phone-wrap:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent); } .phone-wrap.ring-2{ border-color:#f87171; } .phone-cc{ display:flex; align-items:center; gap:.25rem; padding:0 .7rem; background:#f8fafc; border-right:1.5px solid #e2e8f0; font-weight:700; font-size:.85rem; color:#475569; white-space:nowrap; } .phone-input{ flex:1; min-width:0; border:0; outline:0; padding:.65rem .85rem; font-size:.9rem; background:transparent; } html[data-theme="dark"] .phone-wrap{ background:#0b1727; border-color:rgba(148,163,184,.2); } html[data-theme="dark"] .phone-cc{ background:#0f2033; border-color:rgba(148,163,184,.2); color:#cbd5e1; } .cap-sub{ font-size:.72rem; color:#94a3b8; margin-top:.3rem; } .adm-photo-preview{ width:72px; height:72px; object-fit:cover; border-radius:.6rem; margin:0 auto .25rem; border:2px solid #fff; box-shadow:0 4px 12px -6px rgba(0,0,0,.3); } /* ============================================================ Floating contact rail (call · email · whatsapp) Icon-only; the label slides out on hover. ============================================================ */ .cfab{ position:fixed; right:1.25rem; bottom:1.5rem; z-index:45; display:flex; flex-direction:column; gap:.7rem; } .cfab-btn{ position:relative; display:flex; align-items:center; height:3.25rem; width:3.25rem; border-radius:999px; overflow:hidden; color:#fff; white-space:nowrap; box-shadow:0 10px 26px -8px rgba(15,23,42,.45); transition:width .32s cubic-bezier(.34,1.3,.5,1), transform .2s, box-shadow .2s; } .cfab-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -10px rgba(15,23,42,.55); } .cfab-ic{ display:grid; place-items:center; width:3.25rem; height:3.25rem; flex:none; } .cfab-ic svg{ width:1.5rem; height:1.5rem; } .cfab-text{ font-weight:700; font-size:.9rem; letter-spacing:.01em; padding-right:1.15rem; opacity:0; transform:translateX(-6px); transition:opacity .2s .05s, transform .25s .05s; } /* Expand on hover / keyboard focus to reveal the label — desktop only. */ @media (hover:hover) and (min-width:768px){ .cfab-btn:hover, .cfab-btn:focus-visible{ width:11.5rem; } .cfab-btn:hover .cfab-text, .cfab-btn:focus-visible .cfab-text{ opacity:1; transform:none; } } .cfab-call{ background:linear-gradient(135deg,#0ea5e9,#2563eb); } .cfab-mail{ background:linear-gradient(135deg,#f59e0b,#ea580c); } .cfab-wa{ background:linear-gradient(135deg,#25D366,#128C7E); } .cfab-ping{ position:absolute; inset:0; width:3.25rem; height:3.25rem; border-radius:999px; background:#25D366; opacity:.45; animation:cfabPing 2s cubic-bezier(0,0,.2,1) infinite; z-index:-1; } @keyframes cfabPing{ 75%,100%{ transform:scale(1.7); opacity:0; } } @media (max-width:767px){ .cfab{ right:1rem; bottom:1rem; gap:.6rem; } .cfab-btn,.cfab-ic,.cfab-ping{ width:3rem; height:3rem; } } @media print{ .cfab, #backTop{ display:none; } } /* ============================================================ Admission — premium floating-label redesign ============================================================ */ .adm2-wrap{ display:grid; grid-template-columns:1fr; gap:1.25rem; } @media(min-width:1024px){ .adm2-wrap{ grid-template-columns:64px 1fr; gap:1.75rem; align-items:start; } } .adm2-form{ display:flex; flex-direction:column; gap:1.25rem; position:relative; } /* Icon-only progress rail (no text labels) */ .adm-rail{ position:sticky; top:100px; flex-direction:column; align-items:center; gap:0; } .adm-rail-item{ position:relative; padding:.55rem 0; } .adm-rail-item::before{ content:""; position:absolute; left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); background:#e2e8f0; z-index:0; } .adm-rail-item:first-child::before{ top:50%; } .adm-rail-item:last-child::before{ height:50%; } .adm-rail-dot{ position:relative; z-index:1; display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:999px; background:#fff; border:2px solid #e2e8f0; color:#94a3b8; font-size:.95rem; transition:.2s; } .adm-rail-item:hover .adm-rail-dot{ border-color:var(--primary); color:var(--primary); transform:scale(1.06); } .adm-rail-item.is-active .adm-rail-dot{ background:var(--brand-gradient); border-color:transparent; color:#fff; box-shadow:0 8px 18px -8px color-mix(in srgb,var(--primary) 70%,transparent); } .adm-rail-item[data-tip]:hover::after{ content:attr(data-tip); position:absolute; left:calc(100% + .5rem); top:50%; transform:translateY(-50%); background:#0f172a; color:#fff; font-size:.7rem; font-weight:700; padding:.25rem .55rem; border-radius:.4rem; white-space:nowrap; z-index:5; } /* Cards */ .adm2-card{ background:#fff; border:1px solid #eef1f5; border-radius:1.25rem; padding:1.5rem; scroll-margin-top:100px; box-shadow:0 6px 24px -16px rgba(15,23,42,.35); animation:admIn .5s ease both; } @keyframes admIn{ from{ opacity:0; transform:translateY(12px); } } .adm2-card + .adm2-card{ animation-delay:.05s; } html[data-theme="dark"] .adm2-card{ background:#0f172a; border-color:#1e293b; } .adm2-head{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.35rem; } .adm2-n{ display:grid; place-items:center; width:2.4rem; height:2.4rem; flex:none; border-radius:.85rem; background:var(--brand-gradient); color:#fff; font-weight:800; box-shadow:0 8px 16px -8px color-mix(in srgb,var(--primary) 70%,transparent); } .adm2-head h2{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.15rem; line-height:1.2; } .adm2-head p{ font-size:.8rem; color:#94a3b8; } .ff-grid{ display:grid; grid-template-columns:1fr; gap:1.1rem; } @media(min-width:640px){ .ff-grid{ grid-template-columns:1fr 1fr; } } /* Floating-label field */ .ff{ position:relative; } .ff-ic{ position:absolute; left:0; top:0; height:3.5rem; width:2.9rem; display:grid; place-items:center; color:#94a3b8; z-index:2; pointer-events:none; transition:color .18s; font-size:.95rem; } .ff.is-focus .ff-ic{ color:var(--primary); } .ff-input{ width:100%; height:3.5rem; padding:1.3rem .9rem .35rem 2.9rem; border:1.5px solid #e2e8f0; border-radius:.85rem; background:#fff; font-size:.95rem; color:#0f172a; transition:border-color .18s, box-shadow .18s; -webkit-appearance:none; appearance:none; } .ff-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent); } textarea.ff-input{ height:auto; min-height:5.5rem; padding-top:1.55rem; resize:vertical; } .ff-label{ position:absolute; left:2.9rem; top:1.1rem; color:#94a3b8; font-size:.95rem; pointer-events:none; transition:top .16s,font-size .16s,color .16s; } .ff.is-focus .ff-label, .ff.is-filled .ff-label, .ff-top .ff-label{ top:.45rem; font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--primary); } .ff-label b{ color:#ef4444; font-weight:700; } .ff-has-select::after{ content:""; position:absolute; right:1.05rem; top:1.35rem; width:.5rem; height:.5rem; border-right:2px solid #94a3b8; border-bottom:2px solid #94a3b8; transform:rotate(45deg); pointer-events:none; } .ff-hint{ font-size:.7rem; color:#94a3b8; margin:.3rem 0 0 .3rem; } .ff-hint.inline{ display:inline; margin:0; } .ff-err{ display:flex; align-items:center; gap:.3rem; font-size:.72rem; color:#dc2626; margin:.3rem 0 0 .3rem; font-weight:600; } .ff-toplabel{ display:block; font-size:.8rem; font-weight:700; color:#475569; margin-bottom:.5rem; } .ff-toplabel b{ color:#ef4444; } .ff-tick{ position:absolute; right:1rem; top:1.1rem; opacity:0; transition:opacity .18s; } .ff.is-valid .ff-input{ border-color:#34d399; } .ff.is-valid .ff-tick{ opacity:1; } .ff.is-valid .ff-tick::before{ content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; color:#10b981; font-size:.85rem; } .ff.is-invalid .ff-input{ border-color:#f87171; } html[data-theme="dark"] .ff-input{ background:#0b1727; border-color:#1e293b; color:#e2e8f0; } html[data-theme="dark"] .ff-label{ color:#64748b; } /* Draft indicator */ .adm-draft{ position:sticky; top:100px; align-self:flex-end; z-index:5; display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem; border-radius:999px; background:#ecfdf5; color:#059669; font-size:.72rem; font-weight:800; margin-bottom:-1.75rem; margin-right:.25rem; animation:draftPop .3s ease; } @keyframes draftPop{ from{ opacity:0; transform:translateY(-6px); } } /* Photo drop */ .adm2-drop{ display:block; border:2px dashed #cbd5e1; border-radius:1rem; padding:1.4rem; text-align:center; cursor:pointer; transition:.2s; } .adm2-drop:hover,.adm2-drop.is-over{ border-color:var(--primary); background:color-mix(in srgb,var(--primary) 5%,white); } .adm2-drop.is-invalid{ border-color:#f87171; } .adm2-drop.has-file{ border-style:solid; border-color:#34d399; } .adm2-drop-ic{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:999px; margin:0 auto .5rem; background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary); font-size:1.1rem; } .adm2-drop-txt{ display:block; font-size:.85rem; color:#64748b; } .adm2-drop-txt b{ color:var(--primary); } .adm2-drop-name{ display:block; font-size:.75rem; color:#059669; font-weight:700; margin-top:.35rem; } .adm2-preview{ width:84px; height:84px; object-fit:cover; border-radius:.7rem; margin:0 auto .6rem; border:3px solid #fff; box-shadow:0 8px 20px -8px rgba(0,0,0,.35); } /* Checkboxes */ .adm2-check{ display:flex; align-items:flex-start; gap:.7rem; font-size:.85rem; color:#475569; cursor:pointer; } .adm2-check input{ margin-top:.15rem; width:1.15rem; height:1.15rem; accent-color:var(--primary); flex:none; } .adm2-check a{ color:var(--primary); font-weight:700; text-decoration:underline; } /* Contact strip */ .cstrip{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; } .cstrip a{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .55rem .4rem .4rem; border-radius:999px; font-weight:700; font-size:.82rem; background:#fff; border:1px solid #e5e7eb; color:#334155; transition:transform .18s, box-shadow .18s; } .cstrip a:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(15,23,42,.35); } .cstrip .ic{ display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:999px; color:#fff; } .cstrip .bg-sky{ background:linear-gradient(135deg,#0ea5e9,#2563eb); } .cstrip .bg-wa{ background:linear-gradient(135deg,#25D366,#128C7E); } .cstrip .bg-amber{ background:linear-gradient(135deg,#f59e0b,#ea580c); } .cstrip .bg-rose{ background:linear-gradient(135deg,#f43f5e,#e11d48); } html[data-theme="dark"] .cstrip a{ background:#0f172a; border-color:#1e293b; color:#e2e8f0; } /* ============================================================ About page — premium redesign ============================================================ */ .ab-hero{ padding-top:1rem; } .ab-orb{ position:absolute; border-radius:999px; filter:blur(60px); opacity:.5; pointer-events:none; z-index:0; } .ab-orb-1{ width:22rem; height:22rem; left:-6rem; top:-4rem; background:radial-gradient(circle,#34d39955,transparent 70%); } .ab-orb-2{ width:26rem; height:26rem; right:-8rem; bottom:-8rem; background:radial-gradient(circle,#2563eb44,transparent 70%); animation:abFloat 9s ease-in-out infinite; } .ab-orb-3{ width:16rem; height:16rem; right:-4rem; top:-4rem; background:radial-gradient(circle,#ffffff33,transparent 70%); } @keyframes abFloat{ 50%{ transform:translateY(-24px); } } .ab-stats{ display:grid; grid-template-columns:repeat(2,1fr); border-radius:1.5rem; overflow:hidden; box-shadow:0 30px 60px -30px rgba(15,23,42,.4); } @media(min-width:768px){ .ab-stats{ grid-template-columns:repeat(4,1fr); } } .ab-stat{ padding:1.6rem 1rem; text-align:center; border-right:1px solid rgba(148,163,184,.15); border-bottom:1px solid rgba(148,163,184,.15); } @media(min-width:768px){ .ab-stat{ border-bottom:0; } } .ab-mv{ position:relative; background:#fff; border:1px solid #eef1f5; border-radius:1.5rem; padding:2rem; box-shadow:0 10px 30px -20px rgba(15,23,42,.3); transition:transform .25s, box-shadow .25s; overflow:hidden; } .ab-mv:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -24px rgba(15,23,42,.4); } html[data-theme="dark"] .ab-mv{ background:#0f172a; border-color:#1e293b; } .ab-mv-ic{ display:grid; place-items:center; width:3.5rem; height:3.5rem; border-radius:1rem; color:#fff; font-size:1.35rem; margin-bottom:1.1rem; box-shadow:0 12px 24px -12px rgba(2,6,23,.5); } .ab-mv-mission{ background:linear-gradient(135deg,#f43f5e,#e11d48); } .ab-mv-vision{ background:linear-gradient(135deg,#0ea5e9,#2563eb); } .ab-point{ display:flex; align-items:flex-start; gap:.75rem; color:#334155; } html[data-theme="dark"] .ab-point{ color:#cbd5e1; } .ab-point-ic{ display:grid; place-items:center; width:1.6rem; height:1.6rem; flex:none; margin-top:.1rem; border-radius:999px; background:color-mix(in srgb,var(--primary) 12%,white); color:var(--primary); font-size:.72rem; } .ab-est{ position:relative; overflow:hidden; border-radius:1.75rem; padding:3rem 2rem; min-height:22rem; display:grid; place-items:center; background:var(--brand-gradient); box-shadow:0 30px 60px -28px color-mix(in srgb,var(--primary) 70%,transparent); } .ab-est-badge{ display:grid; place-items:center; width:4.5rem; height:4.5rem; margin:0 auto; border-radius:1.25rem; background:rgba(255,255,255,.15); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:1.8rem; border:1px solid rgba(255,255,255,.25); } .ab-feature{ background:#fff; border:1px solid #eef1f5; border-radius:1.25rem; padding:1.75rem; box-shadow:0 8px 26px -18px rgba(15,23,42,.3); transition:transform .25s, box-shadow .25s; } html[data-theme="dark"] .ab-feature{ background:#0f172a; border-color:#1e293b; } .ab-feature-ic{ display:grid; place-items:center; width:3rem; height:3rem; border-radius:.9rem; margin-bottom:1rem; background:color-mix(in srgb,var(--primary) 10%,white); color:var(--primary); } .ab-feature-ic svg{ width:1.4rem; height:1.4rem; } html[data-theme="dark"] .ab-feature-ic{ background:rgba(94,234,212,.12); } .ab-recog{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:999px; font-weight:700; font-size:.85rem; background:#fff; border:1px solid #e5e7eb; color:#334155; box-shadow:0 6px 18px -12px rgba(15,23,42,.3); } html[data-theme="dark"] .ab-recog{ background:#0f172a; border-color:#1e293b; color:#e2e8f0; } .ab-mentor{ background:#fff; border:1px solid #eef1f5; border-radius:1.5rem; padding:1.75rem; text-align:center; box-shadow:0 10px 30px -20px rgba(15,23,42,.3); transition:transform .25s, box-shadow .25s; } html[data-theme="dark"] .ab-mentor{ background:#0f172a; border-color:#1e293b; } .ab-mentor-img{ width:6rem; height:6rem; border-radius:999px; object-fit:cover; margin:0 auto; border:4px solid #fff; box-shadow:0 12px 28px -14px rgba(15,23,42,.5); } html[data-theme="dark"] .ab-mentor-img{ border-color:#0f172a; } /* ============================================================ Premium Hero Slider ============================================================ */ /* The slides are stacked in ONE grid cell rather than absolutely positioned, so the section's height is driven by the tallest slide. Content can never be clipped or spill out underneath the counters card on a short viewport. */ .hs{ position:relative; overflow:hidden; background:#050b16; } .hs-track{ display:grid; } .hs-slide{ grid-area:1/1; min-height:clamp(34rem, 78vh, 46rem); display:flex; align-items:center; opacity:0; visibility:hidden; transform:scale(1.04); transition:opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1), visibility 0s .9s; } .hs-slide.is-active{ opacity:1; visibility:visible; transform:scale(1); transition:opacity .9s ease, transform 6.8s ease; z-index:2; } .hs-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1); } .hs-slide.is-active .hs-bg{ animation:hsKen 8s ease forwards; } /* Ken Burns */ @keyframes hsKen{ from{ transform:scale(1); } to{ transform:scale(1.12) translateX(-1.5%); } } .hs-bg-gradient{ background-size:220% 220%; animation:hsShift 12s ease infinite; } @keyframes hsShift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } } /* theme gradients (used for image tint + no-image backgrounds) */ .hs-t0 .hs-bg-gradient{ background-image:linear-gradient(135deg,#0f766e,#0891b2,#2563eb); } .hs-t1 .hs-bg-gradient{ background-image:linear-gradient(135deg,#4f46e5,#7c3aed,#c026d3); } .hs-t2 .hs-bg-gradient{ background-image:linear-gradient(135deg,#e11d48,#ea580c,#f59e0b); } .hs-t3 .hs-bg-gradient{ background-image:linear-gradient(135deg,#059669,#0d9488,#0ea5e9); } .hs-overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(3,7,18,.85), rgba(3,7,18,.5) 55%, rgba(3,7,18,.15)); } .hs-t0 .hs-overlay{ box-shadow:inset -30rem 0 30rem -20rem rgba(37,99,235,.5); } .hs-t1 .hs-overlay{ box-shadow:inset -30rem 0 30rem -20rem rgba(124,58,237,.5); } .hs-t2 .hs-overlay{ box-shadow:inset -30rem 0 30rem -20rem rgba(234,88,12,.5); } .hs-t3 .hs-overlay{ box-shadow:inset -30rem 0 30rem -20rem rgba(14,165,233,.5); } .hs-orb{ position:absolute; border-radius:999px; filter:blur(70px); opacity:.4; pointer-events:none; } .hs-orb-a{ width:24rem; height:24rem; right:-6rem; top:-6rem; background:radial-gradient(circle,#fff6,transparent 70%); } .hs-orb-b{ width:20rem; height:20rem; left:-6rem; bottom:-6rem; background:radial-gradient(circle,var(--accent),transparent 70%); } .hs-content{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; max-width:44rem; color:#fff; } .hs-badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.45rem .9rem; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; } .hs-badge-dot{ width:.5rem; height:.5rem; border-radius:999px; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:hsPulse 1.8s infinite; } @keyframes hsPulse{ 70%{ box-shadow:0 0 0 .5rem transparent; } } .hs-title{ margin-top:1.1rem; font-weight:800; font-size:clamp(1.9rem,3.6vw,3.15rem); line-height:1.12; letter-spacing:-.015em; text-shadow:0 4px 30px rgba(0,0,0,.35); text-wrap:balance; } .hs-grad{ background:linear-gradient(120deg,#fbbf24,#f472b6,#38bdf8); -webkit-background-clip:text; background-clip:text; color:transparent; } .hs-sub{ margin-top:1.1rem; font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.6; color:rgba(255,255,255,.9); max-width:34rem; } .hs-actions{ margin-top:1.9rem; display:flex; flex-wrap:wrap; gap:.8rem; } .hs-btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.6rem; border-radius:.9rem; font-weight:800; font-size:.95rem; cursor:pointer; transition:transform .2s, box-shadow .2s, background .2s; } .hs-btn svg{ width:1.15rem; height:1.15rem; } .hs-btn-primary{ color:#fff; background:linear-gradient(120deg,var(--primary),var(--secondary),var(--accent)); background-size:200% 200%; animation:hsShift 6s ease infinite; box-shadow:0 16px 34px -14px rgba(0,0,0,.6); } .hs-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 22px 42px -16px rgba(0,0,0,.7); } .hs-btn-ghost{ color:#fff; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .hs-btn-ghost:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); } /* staggered content entrance */ .hs-anim{ opacity:0; transform:translateY(24px); } .hs-slide.is-active .hs-anim{ animation:hsUp .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:var(--d,0s); } @keyframes hsUp{ to{ opacity:1; transform:none; } } /* Controls live in one bottom-LEFT cluster: [<] [>] • • • (the bottom-right is occupied by the floating call/WhatsApp rail). */ /* Controls sit ABOVE the overlapping counters card (which covers the bottom ~2rem). */ .hs-nav{ position:absolute; bottom:4.25rem; z-index:6; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff; cursor:pointer; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .2s, transform .2s; } .hs-nav svg{ width:1.15rem; height:1.15rem; } .hs-nav:hover{ background:rgba(255,255,255,.3); transform:translateY(-2px); } .hs-prev{ left:1.5rem; } .hs-next{ left:4.5rem; } /* dots with autoplay progress — sit to the right of the arrows */ .hs-dots{ position:absolute; z-index:6; left:8rem; bottom:4.9rem; display:flex; gap:.6rem; } .hs-dot{ position:relative; width:.7rem; height:.7rem; border-radius:999px; background:rgba(255,255,255,.4); border:0; cursor:pointer; overflow:hidden; transition:width .35s, background .35s; } .hs-dot.is-active{ width:3rem; background:rgba(255,255,255,.35); } .hs-dot-fill{ position:absolute; inset:0; width:0; background:#fff; border-radius:999px; } .hs-dot.is-active .hs-dot-fill{ animation:hsProg var(--hs-dur,6500ms) linear forwards; } @keyframes hsProg{ from{ width:0; } to{ width:100%; } } /* Hero slider — split layout (content left, portrait right) */ .hs-grid-tex{ position:absolute; inset:0; z-index:1; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:38px 38px; } /* padding-bottom reserves space for the slider controls AND the counters card that overlaps the hero, so neither ever covers the CTAs or trust signals. */ .hs-split{ position:relative; z-index:3; width:100%; display:grid; grid-template-columns:1fr; align-items:center; gap:2rem; padding-top:3rem; padding-bottom:7.5rem; } @media(min-width:1024px){ .hs-split{ grid-template-columns:1.12fr .88fr; gap:3rem; } } .hs-left{ color:#fff; max-width:42rem; } .text-accent{ background:linear-gradient(120deg,#fbbf24,#f472b6,#38bdf8); -webkit-background-clip:text; background-clip:text; color:transparent; } .hs-typing{ background:linear-gradient(120deg,#fbbf24,#f472b6,#38bdf8); -webkit-background-clip:text; background-clip:text; color:transparent; border-right:3px solid rgba(255,255,255,.7); padding-right:.12em; animation:hsCaret 1s step-end infinite; } @keyframes hsCaret{ 50%{ border-color:transparent; } } .hs-sub{ color:rgba(255,255,255,.9); } .hs-sub .text-white{ color:#fff; } .hs-trust{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:.55rem 1.35rem; } .hs-trust-item{ display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; color:rgba(255,255,255,.85); } .hs-trust-item svg{ width:.95rem; height:.95rem; color:#34d399; flex:none; } .hs-right{ display:block; } .hs-photo{ position:relative; } .hs-photo img{ width:100%; max-width:27rem; margin-left:auto; display:block; border-radius:1.6rem; aspect-ratio:3/4; object-fit:cover; box-shadow:0 44px 90px -34px rgba(0,0,0,.75); border:1px solid rgba(255,255,255,.16); } .hs-photo-fallback{ display:grid; place-items:center; width:100%; max-width:24rem; margin-left:auto; aspect-ratio:3/4; border-radius:1.6rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.45); font-size:5rem; } .hs-photo-glow{ position:absolute; right:-1.5rem; bottom:-1.5rem; width:11rem; height:11rem; border-radius:999px; background:radial-gradient(circle,var(--accent),transparent 70%); filter:blur(55px); opacity:.6; z-index:-1; } /* ---- Mobile / tablet: stack, centre, and show EVERY detail ---- These MUST stay below the desktop rules above: the overrides below share the same specificity, so they only win by coming later in the cascade. */ @media(max-width:1023px){ .hs-slide{ min-height:0; } /* height follows the content */ .hs-split{ padding-top:2.5rem; padding-bottom:6.5rem; gap:1.75rem; } .hs-left{ max-width:100%; text-align:center; margin-inline:auto; order:1; } .hs-sub{ margin-inline:auto; } .hs-actions{ justify-content:center; } .hs-trust{ justify-content:center; gap:.5rem 1rem; } .hs-nav{ display:none; } /* swipe instead */ .hs-dots{ left:0; right:0; bottom:3.6rem; justify-content:center; } /* The photo stacks under the copy, centred and scaled down. Slides with no photo hide the placeholder rather than waste half the screen. */ .hs-right{ order:2; } .hs-right.no-img{ display:none; } .hs-photo{ display:flex; justify-content:center; } .hs-photo img{ width:auto; max-width:min(16rem, 70vw); margin-inline:auto; } .hs-photo-fallback{ margin-inline:auto; } .hs-photo-glow{ width:8rem; height:8rem; right:1rem; bottom:.5rem; } } @media(max-width:640px){ .hs-badge{ font-size:.68rem; padding:.4rem .75rem; } .hs-title{ font-size:clamp(1.75rem,7.2vw,2.4rem); line-height:1.18; } .hs-sub{ font-size:.95rem; line-height:1.55; } /* Stack the CTAs full-width so they're equal and thumb-friendly. */ .hs-actions{ flex-direction:column; align-items:stretch; gap:.6rem; width:100%; } .hs-btn{ width:100%; justify-content:center; padding:.85rem 1.25rem; font-size:.9rem; } .hs-trust-item{ font-size:.75rem; } .hs-split{ padding-bottom:6rem; } .hs-dots{ bottom:3.2rem; } .hs-photo img{ max-width:min(13.5rem, 62vw); border-radius:1.25rem; } }