/* ========================= 1) DESIGN TOKENS (GLOBAL) ========================= */ :root{ /* Signature colors */ --brand-navy:#0f172a; --brand-teal:#00a676; /* primary action */ --brand-blue:#1a4f9c; /* interactive/system */ /* Neutrals */ --text-main:#1e293b; --text-body:#475569; --text-muted:#64748b; --bg-off-white:#f8fafc; --surface:#ffffff; /* Borders */ --border-subtle:#e2e8f0; --border-strong:#cbd5e1; /* Shadows */ --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.05); --shadow-card: 0 10px 22px rgba(15,23,42,.08); --shadow-float: 0 22px 48px rgba(15,23,42,.12); /* Radius */ --radius-lg:16px; --radius-xl:20px; --radius-pill:9999px; /* Motion */ --ease:cubic-bezier(0.4,0,0.2,1); --t-fast:150ms; --t:200ms; --t-slow:250ms; /* Background motion speed (1 = original; 3 = 3× faster) */ --bg-motion-speed:3; /* Layout */ --max:1200px; --pad:24px; --pad-sm:18px; /* Focus */ --focus-outline: 3px solid rgba(26,79,156,.35); --focus-offset: 4px; } /* ========================= 2) BASE / TYPOGRAPHY ========================= */ *{box-sizing:border-box} /* Prevent accidental horizontal document scrolling (iOS/Chrome can scroll the element). */ html{scroll-behavior:smooth; overflow-x:hidden} /* Let the document define height to avoid nested scrolling containers */ html,body{height:auto} body{ margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--text-body); background:var(--bg-off-white); line-height:1.7; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; min-height:100%; overflow-x:hidden; } /* WordPress admin bar: keep sticky header from sitting underneath it */ .admin-bar .header{ top:32px; } @media (max-width:782px){ .admin-bar .header{ top:46px; } } /* If an LMS (e.g., LearnDash focus mode) creates an inner scrolling panel, force the main wrapper back to normal document scrolling */ body.learndash-focus-mode{ overflow:auto !important; } body.learndash-focus-mode .ld-focus, body.learndash-focus-mode .ld-focus-main, body.learndash-focus-mode .ld-focus-content{ height:auto !important; max-height:none !important; overflow:visible !important; } a{color:inherit; text-decoration:none} a:hover{opacity:.96} img{max-width:100%; display:block} h1,h2,h3{ color:var(--text-main); margin:0; letter-spacing:-0.025em; line-height:1.12; } h1{font-weight:750; font-size:clamp(2.5rem, 4vw, 3.75rem)} h2{font-weight:750; font-size:clamp(2.1rem, 3vw, 2.75rem)} h3{font-weight:650; font-size:clamp(1.2rem, 1.6vw, 1.45rem)} p{margin:0} .lead{font-size:clamp(1.02rem, 1.45vw, 1.14rem); color:var(--text-body); margin-top:14px; font-weight:500} .sr-only{ position:absolute !important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0); white-space:nowrap;border:0; } .medexp-container{ width:min(var(--max), calc(100% - (var(--pad) * 2))); margin-inline:auto; } .section-spacing{padding:96px 0} @media (max-width: 720px){ .medexp-container{width:min(var(--max), calc(100% - (var(--pad-sm) * 2)))} .section-spacing{padding:76px 0} html{scroll-behavior:auto} } .bg-white{background:var(--surface)} .bg-light{background:var(--bg-off-white)} .section-sep{border-top:1px solid var(--border-subtle)} /* Section background accents (hero-style) */ .section--accent{ position:relative; isolation:isolate; /* Decorative pseudo-elements use negative offsets; clip them to avoid page-wide horizontal overflow. */ overflow:hidden; /* keep base bg color from .bg-white / .bg-light */ background-repeat:no-repeat; background-size:cover; } .section--accent > .medexp-container{position:relative; z-index:2} .section--accent::before, .section--accent::after{ content:""; position:absolute; pointer-events:none; z-index:1; opacity:1; transform:translateZ(0); will-change: transform, border-radius, opacity, background-position; } /* RGB helpers for gradients */ :root{ --blue-rgb: 26, 79, 156; --teal-rgb: 0, 166, 118; --navy-rgb: 15, 23, 42; } @keyframes medexpRotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes medexpFloat{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-14px,0)} } @keyframes medexpDrift{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(18px,8px,0)} } /* Morphing + motion (used across all section accents + hero) */ @keyframes medexpBlobA{ 0%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 38% 62% 64% 36% / 42% 45% 55% 58%; } 50%{ transform:translate3d(18px,-14px,0) rotate(10deg) scale(1.04); border-radius: 58% 42% 48% 52% / 52% 62% 38% 48%; } 100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 38% 62% 64% 36% / 42% 45% 55% 58%; } } @keyframes medexpBlobB{ 0%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 38% 62% 44% 56% / 54% 40% 60% 46%; } 50%{ transform:translate3d(-14px,12px,0) rotate(-12deg) scale(1.05); border-radius: 48% 52% 58% 42% / 40% 58% 42% 60%; } 100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 38% 62% 44% 56% / 54% 40% 60% 46%; } } @keyframes medexpBlobD{ 0%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 54% 46% 56% 44% / 48% 56% 44% 52%; } 50%{ transform:translate3d(16px,-10px,0) rotate(8deg) scale(1.03); border-radius: 42% 58% 44% 56% / 58% 44% 56% 42%; } 100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 54% 46% 56% 44% / 48% 56% 44% 52%; } } @keyframes medexpRingA{ 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} 50%{transform:translate3d(-10px,10px,0) rotate(180deg) scale(1.02)} 100%{transform:translate3d(0,0,0) rotate(360deg) scale(1)} } @keyframes medexpRingC{ 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} 50%{transform:translate3d(12px,-8px,0) rotate(180deg) scale(1.03)} 100%{transform:translate3d(0,0,0) rotate(360deg) scale(1)} } @keyframes medexpDotsB{ 0%{transform:translate3d(0,0,0); background-position:0 0; opacity:.20} 50%{transform:translate3d(-14px,10px,0); background-position:26px 12px; opacity:.26} 100%{transform:translate3d(0,0,0); background-position:0 0; opacity:.20} } @keyframes medexpDotsD{ 0%{transform:translate3d(0,0,0) rotate(0deg); background-position:0 0; opacity:.12} 50%{transform:translate3d(10px,-12px,0) rotate(180deg); background-position:22px 16px; opacity:.18} 100%{transform:translate3d(0,0,0) rotate(360deg); background-position:0 0; opacity:.12} } @keyframes medexpSheenC{ 0%{ transform:translate3d(0,0,0); background-position:0 0; opacity:.18; border-radius: 46% 54% 64% 36% / 52% 40% 60% 48%; } 50%{ transform:translate3d(14px,8px,0); background-position:160px 90px; opacity:.26; border-radius: 58% 42% 44% 56% / 44% 58% 42% 56%; } 100%{ transform:translate3d(0,0,0); background-position:0 0; opacity:.18; border-radius: 46% 54% 64% 36% / 52% 40% 60% 48%; } } /* Hero blobs */ @keyframes medexpHeroBlob1{ 0%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 56% 44% 60% 40% / 44% 58% 42% 56%; } 50%{ transform:translate3d(18px,-16px,0) rotate(10deg) scale(1.05); border-radius: 42% 58% 44% 56% / 60% 40% 60% 40%; } 100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 56% 44% 60% 40% / 44% 58% 42% 56%; } } @keyframes medexpHeroBlob2{ 0%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 44% 56% 52% 48% / 56% 44% 56% 44%; } 50%{ transform:translate3d(-16px,14px,0) rotate(-10deg) scale(1.04); border-radius: 58% 42% 46% 54% / 44% 58% 42% 56%; } 100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); border-radius: 44% 56% 52% 48% / 56% 44% 56% 44%; } } /* Variant A: ring + soft gradients */ .section--accent.accent-a{ background-image: radial-gradient(900px 540px at 92% 18%, rgba(var(--blue-rgb), .14), transparent 62%), radial-gradient(680px 420px at 8% 92%, rgba(var(--teal-rgb), .12), transparent 64%); } .section--accent.accent-a::before{ width:560px; height:560px; top:-260px; right:-230px; border-radius: 46% 54% 64% 36% / 52% 40% 60% 48%; background: conic-gradient(from 180deg, rgba(var(--teal-rgb), .22), rgba(var(--blue-rgb), .18), rgba(var(--teal-rgb), .22)); -webkit-mask: radial-gradient(circle, transparent 58%, #000 59%, #000 66%, transparent 67%); mask: radial-gradient(circle, transparent 58%, #000 59%, #000 66%, transparent 67%); filter: blur(.2px); animation: medexpRingA calc(34s / var(--bg-motion-speed)) linear infinite; } .section--accent.accent-a::after{ width:280px; height:280px; bottom:-120px; left:-120px; border-radius: 38% 62% 64% 36% / 42% 45% 55% 58%; background: radial-gradient(circle at 30% 30%, rgba(var(--teal-rgb), .22), rgba(var(--teal-rgb), 0) 65%); filter: blur(2px); animation: medexpBlobA calc(20s / var(--bg-motion-speed)) ease-in-out infinite; } /* Variant B: blob + dot grid */ .section--accent.accent-b{ background-image: radial-gradient(860px 520px at 12% 18%, rgba(var(--blue-rgb), .12), transparent 60%), radial-gradient(760px 460px at 88% 88%, rgba(var(--navy-rgb), .07), transparent 64%); } .section--accent.accent-b::before{ width:560px; height:520px; top:-240px; left:-220px; border-radius: 38% 62% 44% 56% / 54% 40% 60% 46%; background: linear-gradient(135deg, rgba(var(--blue-rgb), .18), rgba(var(--teal-rgb), .12)); filter: blur(.6px); animation: medexpBlobB calc(28s / var(--bg-motion-speed)) ease-in-out infinite; transform-origin: 65% 55%; } .section--accent.accent-b::after{ width:520px; height:260px; top:32px; right:-210px; background-image: radial-gradient(rgba(var(--blue-rgb), .34) 1px, transparent 1px); background-size: 14px 14px; background-position: 0 0; opacity:.22; -webkit-mask: radial-gradient(circle at 35% 45%, #000 46%, transparent 72%); mask: radial-gradient(circle at 35% 45%, #000 46%, transparent 72%); animation: medexpDotsB calc(24s / var(--bg-motion-speed)) ease-in-out infinite; } /* Variant C: diagonal sheen + ring */ .section--accent.accent-c{ background-image: radial-gradient(760px 440px at 88% 16%, rgba(var(--teal-rgb), .11), transparent 65%), radial-gradient(820px 520px at 10% 90%, rgba(var(--blue-rgb), .10), transparent 66%), linear-gradient(135deg, rgba(var(--navy-rgb), .03), transparent 55%); } .section--accent.accent-c::before{ width:680px; height:340px; bottom:-170px; right:-240px; border-radius: 46% 54% 64% 36% / 52% 40% 60% 48%; background: repeating-linear-gradient( 45deg, rgba(var(--blue-rgb), .10) 0px, rgba(var(--blue-rgb), .10) 10px, rgba(255,255,255, 0) 10px, rgba(255,255,255, 0) 22px ); opacity:.22; filter: blur(.2px); animation: medexpSheenC calc(30s / var(--bg-motion-speed)) ease-in-out infinite; } .section--accent.accent-c::after{ width:420px; height:420px; top:-190px; right:14%; border-radius:999px; background: conic-gradient(from 40deg, rgba(var(--blue-rgb), .16), rgba(var(--teal-rgb), .14), rgba(var(--blue-rgb), .16)); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 66%, transparent 67%); animation: medexpRingC calc(42s / var(--bg-motion-speed)) linear infinite; opacity:.9; } /* Variant D: big arc + subtle dots */ .section--accent.accent-d{ background-image: radial-gradient(920px 560px at 92% 78%, rgba(var(--teal-rgb), .12), transparent 66%), radial-gradient(720px 420px at 12% 22%, rgba(var(--navy-rgb), .06), transparent 62%); } .section--accent.accent-d::before{ width:760px; height:760px; bottom:-420px; right:-380px; border-radius:999px; background: radial-gradient(circle at 30% 30%, rgba(var(--blue-rgb), .16), rgba(var(--blue-rgb), 0) 62%); filter: blur(1px); animation: medexpBlobD calc(24s / var(--bg-motion-speed)) ease-in-out infinite; } .section--accent.accent-d::after{ width:320px; height:320px; top:72px; left:10%; border-radius:999px; background-image: radial-gradient(rgba(var(--teal-rgb), .36) 1px, transparent 1px); background-size: 16px 16px; background-position: 0 0; opacity:.14; -webkit-mask: radial-gradient(circle at 45% 45%, #000 40%, transparent 72%); mask: radial-gradient(circle at 45% 45%, #000 40%, transparent 72%); animation: medexpDotsD calc(62s / var(--bg-motion-speed)) linear infinite; } @media (prefers-reduced-motion: reduce){ .section--accent::before, .section--accent::after, .hero::before, .hero::after{animation:none !important} } .eyebrow{ /* Easy tuning knobs */ --eyebrow-ico-h: 1.35em; /* can be overridden per-section */ --eyebrow-ico-ar: 1.295; /* 272 / 210 (tight viewBox) */ --eyebrow-ico-nudge: 0em; /* keep bottoms aligned by default */ /* Typography */ margin:0 0 8px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.86rem; line-height:1; color:rgba(15,23,42,.62); /* Layout */ display:inline-flex; align-items:flex-end; /* aligns label to bottom of mark */ gap:.28em; /* keeps label close to mark */ } .eyebrow::before{ content:""; height:var(--eyebrow-ico-h); width:calc(var(--eyebrow-ico-h) * var(--eyebrow-ico-ar)); flex:0 0 auto; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2271%2065%20272%20210%22%20version%3D%221.0%22%3E%3Cpath%20fill%3D%22teal%22%20fill-opacity%3D%22.9%22%20stroke%3D%22teal%22%20stroke-opacity%3D%22.9%22%20stroke-width%3D%222.5%22%20d%3D%22M252.5%20141.2C156.7%20221.1%20149%20227.6%20149%20229.1c0%202%209.4%2013.3%209.9%2011.8.6-2%204.2-4.4%206.6-4.4%201.5%200%201.9-.6%201.7-2.3-.2-1.3.2-2.9.8-3.7.9-1.1.8-1.9-.4-3.7-1.8-2.6-2-3.8-.6-3.8%201%200%204.4%205.7%204.5%207.5%200%20.5.4%201.6.9%202.3.5.8-.1%201.9-1.6%203.2-1.9%201.5-2.1%202.1-1%203.2s1.6%201%202.6-.5c.7-.9%201.5-1.7%201.7-1.7.9%200-.3%208-1.3%208.6-1.7%201.1%202.1%204.2%204.4%203.6%201.2-.3%201.9-.1%201.5.5-.4.5.6.8%202.4.5%203.4-.5%203.6.1.9%203.5-1.4%201.8-2%202.1-2%201%200-1-.6-1.3-2-1-1.1.3-2%201.4-2%202.4%200%201.1-.4%201.9-1%201.9h-1.7c-.5%200-.8-.4-.8-.9s-1.4-2.3-3.2-3.9c-1.7-1.7-2.9-3.3-2.6-3.5.2-.3-.2-2.6-1-5.3l-1.4-4.7-2.2%202.2c-2.1%202.1-2%204.8.1%203.5.7-.4.8-.2.4.4-.9%201.4%209%2014.3%2014.5%2019.1l4%203.3%202.2-2.8c1.2-1.6%205.4-6.7%209.2-11.4%203.9-4.7%2010-12.3%2013.5-16.9%203.6-4.6%207.9-10%209.6-12s18.8-23.4%2037.9-47.6c19.2-24.2%2046.1-58.1%2059.8-75.3C327%2084.9%20338%2070.7%20337.8%2070.5c-.2-.1-38.5%2031.7-85.3%2070.7z%22%20%2F%3E%3Cpath%20fill%3D%22teal%22%20stroke%3D%22teal%22%20stroke-width%3D%222.5%22%20d%3D%22M166%20223.8c0%20.4.7%201.8%201.6%203%201.2%201.8%201.3%202.6.4%203.7-.6.8-1%202.4-.8%203.7.2%201.7-.2%202.3-1.7%202.3-3.1%200-6.5%202.7-6.5%205.2%200%202.8.4%202.9%203.2.1l2.1-2.1%201.4%204.7c.8%202.7%201.2%205%201%205.3-.3.2.9%201.8%202.6%203.5%201.8%201.6%203.2%203.4%203.2%203.9s.3.9.8.9h1.7c.6%200%201-.8%201-1.9%200-1%20.9-2.1%202-2.4%201.4-.3%202%200%202%201%200%201.1.6.8%202-1%202.7-3.4%202.5-4-.9-3.5-1.8.3-2.8%200-2.4-.5.4-.6-.3-.8-1.5-.5-2.3.6-6.1-2.5-4.4-3.6%201-.6%202.2-8.6%201.3-8.6-.2%200-1%20.8-1.7%201.7-1%201.5-1.5%201.6-2.6.5s-.9-1.7%201-3.2c1.5-1.3%202.1-2.4%201.6-3.2-.5-.7-.9-1.8-.9-2.3-.1-3.2-5.5-9.7-5.5-6.7z%22%20%2F%3E%3Cpath%20fill%3D%22%23000040%22%20stroke%3D%22%23000040%22%20stroke-width%3D%222.5%22%20d%3D%22M76%20190.4c0%20.3.6%201.1%201.3%201.8s14.2%2018.5%2030%2039.5L136%20270l20.3-.1c11.1%200%2019.6-.3%2019-.6-.7-.2-1.3-1.2-1.3-2%200-1.7-6.4-11-18.5-26.9-13.6-17.8-14.3-18.8-17.7-24.7-1.8-3.1-6.1-10.2-9.6-15.7l-6.3-10h-23c-12.6%200-22.9.2-22.9.4z%22%20%2F%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-size:contain; background-position:left center; transform:translateY(var(--eyebrow-ico-nudge)); } .text-muted{color:var(--text-muted)} .text-body{color:var(--text-body)} /* ========================= 3) UTILITIES / COMPONENTS ========================= */ :where(a, button, input, select, textarea, summary):focus-visible{ outline:var(--focus-outline); outline-offset:var(--focus-offset); border-radius:12px; } .pill{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--radius-pill); border:1px solid rgba(26,79,156,.22); background:rgba(26,79,156,.06); color:var(--brand-blue); font-weight:650; font-size:.9rem; } .pill__ico{ width:16px;height:16px; color:currentColor; opacity:.95; flex:0 0 auto; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 16px; border-radius:var(--radius-pill); border:1px solid var(--border-subtle); background:var(--surface); color:var(--text-main); font-weight:600; font-size:1rem; cursor:pointer; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), filter var(--t) var(--ease); box-shadow:var(--shadow-sm); user-select:none; white-space:nowrap; } .btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-card)} .btn:active{transform:translateY(0)} .btn-primary{ background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)) , var(--brand-teal); color:#fff; border-color:transparent; text-shadow:0 1px 1px rgba(0,0,0,.12); box-shadow: 0 12px 26px rgba(0,166,118,.22); } .btn-primary:hover{filter:brightness(.98); box-shadow:0 18px 40px rgba(0,166,118,.26); transform:translateY(-3px)} .btn-outline{ background:rgba(255,255,255,.95); color:var(--brand-blue); border:1px solid rgba(26,79,156,.38) !important; box-shadow: 0 8px 18px rgba(15,23,42,.06); } .btn-outline:hover{ background:rgba(26,79,156,.05); border-color:rgba(26,79,156,.55); transform:translateY(-2px); box-shadow: 0 14px 28px rgba(15,23,42,.10); } .btn-sm{padding:10px 14px; font-size:.95rem} .link{ font-weight:650; color:var(--brand-blue); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; transition:opacity var(--t-fast) var(--ease); } .link:hover{opacity:.92} .card{ background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease); } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-float); border-color:rgba(26,79,156,.35); } .iconWrap{ width:44px; height:44px; border-radius:14px; background:rgba(26,79,156,.08); display:grid; place-items:center; border:1px solid rgba(26,79,156,.14); flex:0 0 auto; } .icon{ width:22px; height:22px; stroke:var(--brand-blue); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; } /* ========================= 4) HEADER / TOPBAR ========================= */ .skip{ position:absolute; left:16px; top:12px; padding:10px 12px; border-radius:12px; background:var(--surface); border:1px solid var(--border-subtle); box-shadow:var(--shadow-card); transform:translateY(-200%); z-index:999; font-weight:750; color:var(--brand-blue); } .skip:focus{transform:translateY(0)} .topbar{ background:var(--surface); border-bottom:1px solid var(--border-subtle); } .topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; } .topbar__msg{ margin:0; display:flex; gap:12px; flex-wrap:wrap; align-items:center; color:var(--text-body); font-weight:600; } .topbar__actions{display:flex; gap:10px; flex-wrap:wrap} .topbar__chip{ padding:8px 12px; border-radius:var(--radius-pill); background:rgba(15,23,42,.04); border:1px solid var(--border-subtle); font-weight:750; color:rgba(15,23,42,.72); } .topbar__chip:hover{border-color:rgba(26,79,156,.35); color:var(--brand-blue)} .header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--border-subtle); } .header__inner{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; } .brand{ display:flex; align-items:center; gap:12px; font-weight:750; color:var(--text-main); min-width: 200px; } .brand__logo{ height:34px; width:auto; display:block; } .brand__name{ font-weight:750; letter-spacing:-.02em; color:var(--text-main); line-height:1; white-space:nowrap; } .nav{display:flex; align-items:center; gap:12px} .nav__toggle{ display:none; width:44px; height:44px; border-radius:14px; border:1px solid var(--border-subtle); background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer; transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease); } .nav__toggle:hover{transform:translateY(-1px); box-shadow:var(--shadow-card)} .hamburger{ width:18px; height:2px; background:var(--text-main); display:block; position:relative; margin:0 auto; } .hamburger:before,.hamburger:after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text-main); } .hamburger:before{top:-6px} .hamburger:after{top:6px} .nav__menu{ display:flex; list-style:none; gap:18px; margin:0; padding:0; align-items:center; } .nav__menu a{ font-weight:550; color:rgba(15,23,42,.75); padding:10px 10px; border-radius:12px; transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .nav__menu a:hover{ background:rgba(26,79,156,.06); color:var(--brand-blue); } .nav__mobileCta{display:none} /* Mobile nav backdrop (used on iPhone/iPad when the hamburger menu opens) */ .nav__backdrop{display:none;} .header__right{display:flex; gap:10px; align-items:center} .header__cta{display:flex; gap:10px; align-items:center} /* Header action buttons (cart + login/CTA) Keep sizing/shape consistent across icon + text buttons. */ .header__cta .btn:not(.btn-sm){ height:44px; padding:0 18px; } /* Header primary button: keep hover/elevation consistent with other header actions */ .header__cta .btn-primary{ box-shadow: 0 8px 18px rgba(0,166,118,.18); } .header__cta .btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 14px 28px rgba(0,166,118,.22); } /* ========================= HEADER CART (WooCommerce) ========================= */ /* ========================= HEADER CART (WooCommerce) ========================= */ .medexp-cart{position:relative; display:flex; align-items:center} .medexp-cart--empty{display:none !important} .medexp-cart__link{ position:relative; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); background:rgba(255,255,255,.95); color:var(--brand-blue); border:1px solid rgba(26,79,156,.38) !important; box-shadow: 0 8px 18px rgba(15,23,42,.06); cursor:pointer; -webkit-tap-highlight-color:transparent; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), filter var(--t) var(--ease); } .medexp-cart__link:hover{ background:rgba(26,79,156,.05); border-color:rgba(26,79,156,.55); transform:translateY(-2px); box-shadow: 0 14px 28px rgba(15,23,42,.10); } .medexp-cart__link:focus-visible{ background:rgba(26,79,156,.05); border-color:rgba(26,79,156,.55); transform:translateY(-2px); box-shadow: 0 14px 28px rgba(15,23,42,.10); outline:var(--focus-outline); outline-offset:var(--focus-offset); } .medexp-cart__icon{width:22px; height:22px; display:block} .medexp-cart__count{ position:absolute; top:-6px; right:-6px; height:18px; min-width:18px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; background:var(--brand-teal); color:#fff; font-size:12px; line-height:1; font-weight:850; border:2px solid var(--surface); box-shadow:0 10px 20px rgba(15,23,42,.14); } .medexp-cart__count.is-single{ width:18px; min-width:18px; padding:0; } .medexp-cart__dropdown{ position:absolute; right:0; top:calc(100% + 8px); width:360px; max-width:92vw; border-radius:18px; border:1px solid rgba(226,232,240,.95); background:var(--surface); box-shadow:var(--shadow-float); padding:0; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); z-index:120; } /* Hover-bridge: prevents the dropdown from collapsing when moving the mouse from the icon to the panel */ .medexp-cart__dropdown::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; } /* Small caret */ .medexp-cart__dropdown::after{ content:""; position:absolute; top:-6px; right:16px; width:12px; height:12px; background:var(--surface); border-left:1px solid rgba(226,232,240,.95); border-top:1px solid rgba(226,232,240,.95); transform:rotate(45deg); } .medexp-cart:hover .medexp-cart__dropdown, .medexp-cart:focus-within .medexp-cart__dropdown, .medexp-cart.open .medexp-cart__dropdown{ opacity:1; transform:translateY(0); pointer-events:auto; } .medexp-cart__title{ margin:0; padding:14px 16px; font-weight:900; font-size:16px; color:var(--text-main); border-bottom:1px solid rgba(226,232,240,.8); background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,1)); } .medexp-cart__empty{ margin:0; padding:14px 16px 16px; color:rgba(15,23,42,.72); font-weight:650 } /* Shimmer skeleton (shown while AJAX updates the cart) */ @keyframes medexpShimmer{ 0%{background-position: 200% 0} 100%{background-position: -200% 0} } .medexp-cart__skeleton{display:none; padding:12px 12px 8px} .medexp-cart.is-loading .medexp-cart__skeleton{display:grid; gap:10px} .medexp-cart.is-loading .medexp-cart__items, .medexp-cart.is-loading .medexp-cart__totals, .medexp-cart.is-loading .medexp-cart__actions{display:none} .medexp-skel{width:100%} .medexp-skel--row{display:grid; gap:8px} .medexp-skel--totals{display:flex; justify-content:space-between; align-items:center; margin-top:2px} .medexp-skel--actions{display:flex; gap:10px; justify-content:flex-end; margin-top:2px} .medexp-skel__line, .medexp-skel__btn{ display:block; border-radius:9999px; background:linear-gradient(90deg, rgba(226,232,240,.55), rgba(226,232,240,.95), rgba(226,232,240,.55)); background-size: 200% 100%; animation: medexpShimmer 1.1s ease-in-out infinite; } .medexp-skel__line{height:12px} .medexp-skel__line--lg{width:86%} .medexp-skel__line--md{width:62%} .medexp-skel__line--sm{width:42%} .medexp-skel__line--xs{width:24%} .medexp-skel__btn{height:36px; width:108px; border-radius:9999px} .medexp-cart__items{ list-style:none; margin:0; padding:10px 12px 4px; display:grid; gap:8px; } .medexp-cart__item{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:10px 10px; border:1px solid rgba(226,232,240,.75); border-radius:14px; background:rgba(248,250,252,.72); } .medexp-cart__item-name{ display:block; font-weight:800; color:var(--text-main); line-height:1.25; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; max-width:230px; } .medexp-cart__item-meta{ text-align:right; color:rgba(15,23,42,.76); font-weight:750; white-space:nowrap; padding-top:1px; } /* Mini-cart remove button (AJAX) */ .medexp-cart__item{justify-content:flex-start} .medexp-cart__item-name{flex:1 1 auto; min-width:0} .medexp-cart__item-meta{flex:0 0 auto} .medexp-cart__remove{ flex:0 0 auto; margin-left:2px; width:28px; height:28px; border-radius:9999px; border:1px solid rgba(226,232,240,.92); background:rgba(255,255,255,.92); color:rgba(15,23,42,.62); display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(15,23,42,.06); transition:transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease; cursor:pointer; } .medexp-cart__remove:hover{ background:rgba(248,250,252,1); border-color:rgba(203,213,225,1); color:rgba(15,23,42,.86); transform:translateY(-1px); box-shadow:0 6px 14px rgba(15,23,42,.10); } .medexp-cart__remove:active{transform:translateY(0)} .medexp-cart__remove:focus-visible{ outline:2px solid rgba(56,189,248,.55); outline-offset:2px; } .medexp-cart__remove-icon{width:14px; height:14px; display:block} .medexp-cart__remove.is-loading{opacity:.55; pointer-events:none} @media (hover:none){ .medexp-cart__remove{width:32px; height:32px} .medexp-cart__remove-icon{width:16px; height:16px} } .medexp-cart__totals{ margin:8px 12px 0; padding:12px 12px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(226,232,240,.85); } .medexp-cart__subtotal-label{font-weight:800; color:rgba(15,23,42,.72)} .medexp-cart__subtotal-amount{font-weight:950; color:var(--text-main)} .medexp-cart__actions{ display:flex; gap:10px; padding:12px 12px 14px; justify-content:flex-end; flex-wrap:wrap; } .medexp-cart__actions .btn{ padding:10px 14px; border-radius:var(--radius-pill); } @media (max-width: 520px){ .medexp-cart__dropdown{right:-6px; width:min(92vw, 420px)} .medexp-cart__dropdown::after{right:22px} } /* ========================= HEADER USER MENU ========================= */ .medexp-user{position:relative; display:flex; align-items:center} .medexp-user__btn{ position:relative; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); background:rgba(255,255,255,.95); color:var(--brand-blue); border:1px solid rgba(26,79,156,.38) !important; box-shadow: 0 8px 18px rgba(15,23,42,.06); cursor:pointer; -webkit-tap-highlight-color:transparent; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), filter var(--t) var(--ease); } .medexp-user__btn:hover{ background:rgba(26,79,156,.05); border-color:rgba(26,79,156,.55); transform:translateY(-2px); box-shadow: 0 14px 28px rgba(15,23,42,.10); } .medexp-user__btn:focus-visible{ background:rgba(26,79,156,.05); border-color:rgba(26,79,156,.55); transform:translateY(-2px); box-shadow: 0 14px 28px rgba(15,23,42,.10); outline:var(--focus-outline); outline-offset:var(--focus-offset); } .medexp-user__avatar{width:28px; height:28px; border-radius:9999px; display:block} .medexp-user__icon{width:22px; height:22px; display:block} .medexp-user__dropdown{ position:absolute; right:0; top:calc(100% + 8px); width:260px; max-width:92vw; border-radius:18px; border:1px solid rgba(226,232,240,.95); background:var(--surface); box-shadow:var(--shadow-float); padding:0; display:none; opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); z-index:120; } @keyframes medexpDropIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} } .medexp-user__dropdown::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px; } .medexp-user__dropdown::after{ content:""; position:absolute; top:-6px; right:16px; width:12px; height:12px; background:var(--surface); border-left:1px solid rgba(226,232,240,.95); border-top:1px solid rgba(226,232,240,.95); transform:rotate(45deg); } .medexp-user:hover .medexp-user__dropdown, .medexp-user:focus-within .medexp-user__dropdown, .medexp-user.open .medexp-user__dropdown{ display:block; opacity:1; animation: medexpDropIn var(--t-fast) var(--ease) both; transform:translateY(0); pointer-events:auto; } .medexp-user__header{ padding:14px 16px 12px; border-bottom:1px solid rgba(226,232,240,.8); background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,1)); } .medexp-user__name{ font-weight:950; font-size:14px; color:var(--text-main); line-height:1.15; } .medexp-user__meta{ margin-top:3px; font-size:12px; color:rgba(15,23,42,.68); font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .medexp-user__item{ display:flex; align-items:center; padding:10px 16px; color:var(--text-main); font-weight:800; text-decoration:none; border-radius:12px; margin:6px 8px; transition: background var(--t-fast) var(--ease); } .medexp-user__item:hover{ background:rgba(26,79,156,.06); } .medexp-user__item:focus-visible{ outline:var(--focus-outline); outline-offset:var(--focus-offset); background:rgba(26,79,156,.06); } .medexp-user__divider{ height:1px; background:rgba(226,232,240,.85); margin:6px 8px; border-radius:9999px; } .medexp-user__item--danger{ color:rgba(180,35,24,1); } .medexp-user__item--danger:hover{ background:rgba(180,35,24,.08); } @media (max-width: 520px){ .medexp-user__dropdown{right:-6px; width:min(92vw, 320px)} .medexp-user__dropdown::after{right:22px} } /* ========================= 5) HERO (LIGHT, SIMPLE-NURSING-INSPIRED) ========================= */ .hero{ position:relative; overflow:hidden; isolation:isolate; background: radial-gradient(900px 520px at 20% 10%, rgba(26,79,156,.14), transparent 62%), radial-gradient(760px 520px at 85% 15%, rgba(0,166,118,.10), transparent 58%), linear-gradient(180deg, rgba(248,250,252,.86) 0%, rgba(248,250,252,.92) 55%, rgba(248,250,252,1) 100%), url("https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=2400&q=80") center/cover no-repeat; } .hero::before{ content:""; position:absolute; left:-160px; top:120px; width:420px; height:420px; border-radius: 56% 44% 60% 40% / 44% 58% 42% 56%; background:radial-gradient(circle at 35% 35%, rgba(0,166,118,.18), rgba(0,166,118,0) 68%); filter:blur(1px); z-index:1; will-change: transform, border-radius; animation: medexpHeroBlob1 calc(26s / var(--bg-motion-speed)) ease-in-out infinite; pointer-events:none; } .hero::after{ content:""; position:absolute; right:-180px; top:40px; width:520px; height:520px; border-radius: 44% 56% 52% 48% / 56% 44% 56% 44%; background:radial-gradient(circle at 35% 35%, rgba(26,79,156,.18), rgba(26,79,156,0) 68%); z-index:1; will-change: transform, border-radius; animation: medexpHeroBlob2 calc(30s / var(--bg-motion-speed)) ease-in-out infinite; pointer-events:none; } .hero__content{ position:relative; z-index:3; padding:76px 0 18px; color:var(--text-main); } .snHero__grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:38px; align-items:center; } .snHero__copy .eyebrow{color:rgba(15,23,42,.72); margin-left: -50px;} .snHero__copy .lead{max-width:62ch} /* Mobile: avoid negative offsets that can introduce horizontal page overflow */ @media (max-width: 640px){ .snHero__copy .eyebrow, .sectionHead .eyebrow{ margin-left: 0; } } .snHero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; align-items:center; } .snHero__micro{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; color:rgba(15,23,42,.66); font-weight:600; font-size:.95rem; } .microItem{ display:flex; align-items:center; gap:8px; } .microItem svg{width:18px;height:18px; color:var(--brand-teal); flex:0 0 auto} .snHero__art{ justify-self:end; width:100%; max-width:440px; } .artCard{ position:relative; border-radius:22px; background:rgba(255,255,255,.86); border:1px solid rgba(226,232,240,.92); box-shadow:var(--shadow-float); padding:22px 22px 18px; overflow:hidden; } .artCard::before{ content:""; position:absolute; right:-70px; top:-70px; width:260px; height:260px; border-radius:999px; background:radial-gradient(circle at 35% 35%, rgba(0,166,118,.22), rgba(0,166,118,0) 68%); } /* ===== QBank close-up backdrop (Hero Art) ===== */ :root{ /* Optional: set to url("...") to use a real screenshot behind the mock */ --hero-qbank-img: none; } .artCard{ position:relative; } .artQbank{ position:absolute; left:18px; right:18px; top:18px; height:190px; border-radius:18px; background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,250,252,.78)), radial-gradient(520px 220px at 15% 0%, rgba(26,79,156,.08), transparent 62%), radial-gradient(520px 220px at 100% 0%, rgba(0,166,118,.06), transparent 62%), var(--hero-qbank-img); background-size:auto, auto, auto, cover; background-position:0 0, 0 0, 0 0, center; background-repeat:no-repeat; border:1px solid rgba(148,163,184,.38); box-shadow: 0 20px 60px rgba(15,23,42,.10); overflow:hidden; z-index:0; transform: rotate(1.1deg) scale(1.06); opacity:.84; filter:saturate(.98); pointer-events:none; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.70) 56%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.70) 56%, rgba(0,0,0,0) 100%); } .qbTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid rgba(148,163,184,.28); background:rgba(255,255,255,.86); } .qbBrand{ display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.2px; color:rgba(15,23,42,.82); font-size:.86rem; } .qbDot{ width:10px; height:10px; border-radius:999px; background:linear-gradient(180deg, rgba(26,79,156,.70), rgba(0,166,118,.60)); box-shadow:0 0 0 2px rgba(255,255,255,.90); } .qbMeta{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .qbTag{ font-size:.72rem; padding:4px 8px; border-radius:999px; background:rgba(226,232,240,.70); border:1px solid rgba(148,163,184,.24); color:rgba(30,41,59,.76); font-weight:700; } .qbTag--time{ background:rgba(26,79,156,.10); border-color:rgba(26,79,156,.22); color:rgba(26,79,156,.86); } .qbBody{ display:grid; grid-template-columns: 1fr 140px; gap:12px; padding:12px; } .qbStem{ display:grid; gap:8px; padding-right:8px; } .qbLine{ height:10px; border-radius:999px; background:linear-gradient(90deg, rgba(148,163,184,.55), rgba(226,232,240,.72)); } .qbLine.w92{ width:92%; } .qbLine.w88{ width:88%; } .qbLine.w86{ width:86%; } .qbLine.w78{ width:78%; } .qbLine.w70{ width:70%; } .qbLine.w66{ width:66%; } .qbLine.w64{ width:64%; } .qbLine.w58{ width:58%; } .qbChoices{ display:grid; gap:8px; margin-top:6px; } .qbChoice{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; border:1px solid rgba(148,163,184,.26); background:rgba(255,255,255,.62); } .qbChoice--active{ border-color:rgba(0,166,118,.28); background:linear-gradient(180deg, rgba(0,166,118,.08), rgba(255,255,255,.62)); } .qbChoice{ justify-content:flex-start; } .qbChoice .qbLine{ flex:1 1 auto; } .qbCheck{ width:18px; height:18px; border-radius:6px; margin-left:0; border:1px solid rgba(148,163,184,.35); background:rgba(226,232,240,.68); position:relative; flex:0 0 auto; } .qbChoice--checked .qbCheck{ border-color:rgba(0,166,118,.35); background:rgba(0,166,118,.12); } .qbChoice--checked .qbCheck::after{ content:""; position:absolute; left:5px; top:2px; width:6px; height:10px; border-right:2px solid rgba(0,166,118,.78); border-bottom:2px solid rgba(0,166,118,.78); transform:rotate(38deg); } .qbBody{ /* motion handled by inner scroller for natural continuous scroll */ } .qbMain{ position:relative; overflow:hidden; height:126px; border-radius:14px; } .qbMainScroll{ position:absolute; left:0; right:0; top:0; will-change: transform; animation: qbMainScroll 6.8s linear infinite; } @keyframes qbMainScroll{ 0%{ transform: translateY(0px); } 78%{ transform: translateY(-92px); } 100%{ transform: translateY(-92px); } } .qbBlock{ padding-right:0; } .qbFiller{ margin-top:10px; display:grid; gap:6px; } @keyframes qbJump{ 0%{ transform:translateY(0px); opacity:1; } 40%{ transform:translateY(-34px); opacity:.82; } 100%{ transform:translateY(0px); opacity:1; } } .qbBody.qbJump{ animation: qbJump 780ms ease-in-out; } /* Animate the small vertical bars like a market sparkline */ @keyframes qbSpark{ 0%{ transform:translateY(0); height:10px; opacity:.82; } 30%{ transform:translateY(-2px); height:22px; opacity:1; } 55%{ transform:translateY(0); height:14px; opacity:.92; } 80%{ transform:translateY(-1px); height:20px; opacity:1; } 100%{ transform:translateY(0); height:12px; opacity:.86; } } .qbMiniBars span{ animation: qbSpark 1.8s ease-in-out infinite; } .qbMiniBars span:nth-child(1){ animation-duration:1.65s; animation-delay:-.2s; } .qbMiniBars span:nth-child(2){ animation-duration:1.9s; animation-delay:-.6s; } .qbMiniBars span:nth-child(3){ animation-duration:1.75s; animation-delay:-.9s; } .qbMiniBars span:nth-child(4){ animation-duration:2.05s; animation-delay:-.4s; } .qbLetter{ width:22px; height:22px; border-radius:9px; display:grid; place-items:center; font-weight:900; font-size:.78rem; color:rgba(30,41,59,.78); background:rgba(226,232,240,.72); border:1px solid rgba(148,163,184,.22); } .qbSide{ display:grid; gap:10px; align-content:start; } .qbMini{ padding:10px; border-radius:14px; border:1px solid rgba(148,163,184,.24); background:rgba(255,255,255,.58); } .qbMiniLabel{ font-size:.72rem; color:rgba(71,85,105,.76); font-weight:800; margin-bottom:4px; } .qbMiniValue{ font-size:1.05rem; font-weight:900; color:rgba(15,23,42,.82); margin-bottom:8px; } .qbMiniBar{ height:8px; border-radius:999px; background:rgba(226,232,240,.72); overflow:hidden; } .qbMiniBar span{ display:block; height:100%; width:60%; border-radius:999px; background:linear-gradient(90deg, rgba(26,79,156,.72), rgba(0,166,118,.70)); } .qbMiniBars{ display:flex; align-items:flex-end; gap:6px; height:26px; } .qbMiniBars span{ width:10px; border-radius:999px; background:rgba(148,163,184,.58); } .qbMiniBars span:nth-child(1){ height:10px; } .qbMiniBars span:nth-child(2){ height:18px; } .qbMiniBars span:nth-child(3){ height:14px; } .qbMiniBars span:nth-child(4){ height:22px; } /* Soften the old corner glow so the QBank close-up reads cleaner */ .artCard::before{ opacity:.18; filter: blur(.2px); } /* Ensure foreground art sits above the QBank backdrop */ .artStack{ z-index:2; } .artCaption{ position:relative; z-index:2; } /* Remove leftover halo circles behind stack (now that we use the QBank backdrop) */ .artStack::before, .artStack::after{ content:none !important; display:none !important; } .artStack{ width:280px; height:250px; margin:4px auto 0; position:relative; display:grid; place-items:center; isolation:isolate; } .artStack::before{ content:""; position:absolute; inset:-18px -26px auto auto; width:220px; height:220px; border-radius:999px; background:radial-gradient(circle at 35% 35%, rgba(26,79,156,.16), rgba(26,79,156,0) 68%); opacity:.85; z-index:0; } .artStack::after{ content:""; position:absolute; left:-22px; bottom:-18px; width:220px; height:160px; border-radius:28px; background:radial-gradient(180px 140px at 25% 25%, rgba(0,166,118,.14), rgba(0,166,118,0) 72%); opacity:.80; z-index:0; } .artPreview{ width:184px; height:214px; border-radius:18px; background: radial-gradient(520px 240px at 0% 0%, rgba(26,79,156,.12), transparent 58%), radial-gradient(420px 240px at 100% 0%, rgba(0,166,118,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96)); border:1px solid rgba(26,79,156,.22); box-shadow: 0 18px 44px rgba(15,23,42,.16); overflow:hidden; transform:none; } .artPreview--fg{ position:relative; z-index:2; transform: translateY(4px) rotate(-6deg); } /* ===== Hero cards motion (subtle float + zoom; constrained by .artCard overflow) ===== */ @keyframes medexpHeroCardFloatFg{ 0%,100%{ transform: translate(0px, 4px) rotate(-6deg) scale(1); } 50%{ transform: translate(2px, -7px) rotate(-5.2deg) scale(1.035); } } @keyframes medexpHeroCardFloatBg{ 0%,100%{ transform: translate(-62%,-70%) rotate(10deg) scale(1); } 50%{ transform: translate(calc(-62% - 3px), calc(-70% - 6px)) rotate(10.8deg) scale(1.02); } } .artPreview--fg, .artPreview--bg{ transform-origin:center; will-change:transform; } .artPreview--fg{ animation: medexpHeroCardFloatFg 6.2s ease-in-out infinite; } .artPreview--bg{ animation: medexpHeroCardFloatBg 7.8s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ .artPreview--fg, .artPreview--bg{ animation:none !important; } } .artPreview--bg{ position:absolute; left:50%; top:50%; z-index:1; width:236px; height:178px; border-radius:20px; transform: translate(-62%,-70%) rotate(10deg); opacity:.58; filter:saturate(.96) blur(.2px); background: radial-gradient(520px 240px at 0% 0%, rgba(15,23,42,.06), transparent 58%), radial-gradient(420px 240px at 100% 0%, rgba(26,79,156,.08), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,250,252,.88)); border:1px solid rgba(15,23,42,.10); box-shadow: 0 14px 36px rgba(15,23,42,.10); overflow:hidden; } .artPreview--bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(220px 160px at 80% 20%, rgba(0,166,118,.10), rgba(0,166,118,0) 70%); pointer-events:none; } .artPreview--bg .apTop{ padding:10px 12px 8px; } .artPreview--bg .apTitle{ font-size:.78rem; } .artPreview--bg .apLogoDot{ opacity:.55; } .artPreview--bg .apPill{ background:rgba(15,23,42,.08); border-color:rgba(15,23,42,.12); color:rgba(15,23,42,.55); } .apBgGrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 12px 10px; } .apBgCard{ border-radius:12px; background:rgba(255,255,255,.62); border:1px solid rgba(15,23,42,.10); padding:8px 10px; } .apBgLabel{ font-weight:750; font-size:.62rem; color:rgba(15,23,42,.50); } .apBgValue{ margin-top:2px; font-weight:900; font-size:.92rem; color:rgba(15,23,42,.82); } .apBgLines{ padding:0 12px 12px; display:flex; flex-direction:column; gap:6px; } .apBgLines span{ height:8px; border-radius:999px; background:rgba(15,23,42,.10); } .apBgLines span:nth-child(2){ width:78%; } .apBgLines span:nth-child(3){ width:62%; } .apTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 12px 10px; background:rgba(255,255,255,.78); border-bottom:1px solid rgba(226,232,240,.9); } .apBrand{display:flex; align-items:center; gap:8px} .apLogoDot{ width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg, rgba(26,79,156,.85), rgba(0,166,118,.70)); box-shadow: 0 6px 14px rgba(15,23,42,.12); } .apTitle{ font-weight:850; font-size:.82rem; letter-spacing:-.01em; color:rgba(15,23,42,.86); } .apPill{ font-weight:850; font-size:.70rem; color:rgba(26,79,156,.88); background:rgba(26,79,156,.10); border:1px solid rgba(26,79,156,.22); padding:6px 9px; border-radius:999px; white-space:nowrap; } .apRow{ display:flex; align-items:flex-end; justify-content:space-between; padding:10px 12px 8px; } .apKpiLabel{ font-weight:750; font-size:.70rem; color:rgba(15,23,42,.54); } .apKpiValue{ margin-top:2px; font-weight:900; font-size:1.18rem; letter-spacing:-.02em; color:rgba(15,23,42,.88); } .apSpark{ display:flex; align-items:flex-end; gap:4px; height:22px; opacity:.95; } .apSpark span{ width:4px; border-radius:999px; background:rgba(26,79,156,.28); } .apSpark span:nth-child(1){height:8px} .apSpark span:nth-child(2){height:14px} .apSpark span:nth-child(3){height:11px} .apSpark span:nth-child(4){height:18px; background:rgba(0,166,118,.30)} .apSpark span:nth-child(5){height:12px} /* Mini “market” bars: subtle continuous motion */ @keyframes apSparkMove{ 0% { transform: translateZ(0) scaleY(.65); opacity:.78; } 40% { transform: translateZ(0) scaleY(1.18); opacity:1; } 70% { transform: translateZ(0) scaleY(.86); opacity:.92; } 100% { transform: translateZ(0) scaleY(.65); opacity:.78; } } .apSpark span{ transform-origin: bottom; animation: apSparkMove 1200ms var(--ease) infinite; will-change: transform, opacity; } .apSpark span:nth-child(1){ animation-duration: 1100ms; animation-delay: -120ms; } .apSpark span:nth-child(2){ animation-duration: 1350ms; animation-delay: -420ms; } .apSpark span:nth-child(3){ animation-duration: 1250ms; animation-delay: -260ms; } .apSpark span:nth-child(4){ animation-duration: 1450ms; animation-delay: -540ms; } .apSpark span:nth-child(5){ animation-duration: 1180ms; animation-delay: -320ms; } @media (prefers-reduced-motion: reduce){ .apSpark span{ animation:none !important; } } .apBar{ height:8px; margin:0 12px 10px; border-radius:999px; background:rgba(226,232,240,.92); overflow:hidden; } .apBar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, rgba(26,79,156,.85), rgba(0,166,118,.82)); box-shadow: 0 10px 24px rgba(26,79,156,.18); } .apList{ padding:0 12px; display:flex; flex-direction:column; gap:7px; } .apItem{ display:flex; align-items:center; gap:8px; font-weight:760; font-size:.74rem; color:rgba(15,23,42,.72); } .apDot{ width:7px; height:7px; border-radius:999px; background:rgba(100,116,139,.55); flex:0 0 auto; } .apCheck{ width:12px; height:12px; border-radius:4px; border:2px solid rgba(0,166,118,.65); background:rgba(0,166,118,.10); position:relative; flex:0 0 auto; } .apCheck::after{ content:""; position:absolute; left:3px; top:0px; width:4px; height:7px; border:2px solid rgba(0,166,118,.90); border-top:0; border-left:0; transform:rotate(45deg); } .apItem.done{color:rgba(15,23,42,.80)} .apChips{ padding:10px 12px 12px; display:flex; flex-wrap:wrap; gap:6px; } .apChips span{ font-weight:850; font-size:.66rem; color:rgba(26,79,156,.84); background:rgba(26,79,156,.08); border:1px solid rgba(26,79,156,.16); padding:4px 7px; border-radius:999px; } .artCaption{ margin-top:14px; text-align:center; font-weight:650; color:rgba(15,23,42,.70); } .artCaption small{ display:block; margin-top:6px; font-weight:600; color:rgba(15,23,42,.55); } .heroCard{ margin-top:26px; } .heroCard__inner{ position:relative; border-radius:22px; background: radial-gradient(860px 260px at 12% 0%, rgba(26,79,156,.12), transparent 62%), radial-gradient(760px 280px at 92% 12%, rgba(0,166,118,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96)); border:1px solid rgba(26,79,156,.22); box-shadow: 0 32px 92px rgba(15,23,42,.18), 0 0 0 1px rgba(255,255,255,.70) inset; padding:18px; overflow:hidden; } .heroCard__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; } .heroCard__top .pill{ background:rgba(26,79,156,.10); border-color:rgba(26,79,156,.30); color:var(--brand-blue); font-weight:700; } .heroCard__title{ font-weight:780; font-size:1.25rem; color:var(--text-main); letter-spacing:-.02em; } .heroCard__bullets{ margin-top:12px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px 18px; } .heroBullet{ display:flex; gap:10px; align-items:flex-start; font-weight:650; color:var(--text-body); font-size:.98rem; line-height:1.5; } .heroBullet svg{ width:18px;height:18px; color:var(--brand-teal); flex:0 0 auto; margin-top:2px; } .heroCard__buttons{ margin-top:14px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; } .heroCard__buttons .btn{ width:100%; justify-content:center; white-space:nowrap; } .heroCard__buttons .btn-outline{ background:rgba(255,255,255,.92); border-color:rgba(26,79,156,.44); box-shadow: 0 10px 22px rgba(15,23,42,.08); } .heroCard__buttons .btn-outline:hover{ background:rgba(26,79,156,.06); border-color:rgba(26,79,156,.60); box-shadow: 0 16px 34px rgba(15,23,42,.12); } @media (max-width: 960px){ .snHero__grid{grid-template-columns:1fr; gap:18px} .snHero__art{justify-self:start; max-width:520px} .hero__content{padding:64px 0 16px} .heroCard__bullets{grid-template-columns:1fr} .heroCard__buttons{grid-template-columns:1fr} } /* ========================= 6) CONTENT SECTIONS ========================= */ .sectionHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:28px; } .sectionHead p{margin-top:12px; max-width:70ch} .sectionHead__right{display:flex; gap:10px; align-items:center; flex-wrap:wrap} /* Section headings: tighten default heading spacing (browser h2 margins are large) */ .sectionHead h2{ margin:0; line-height:1.06; } .sectionHead .eyebrow{ margin:0 0 6px; margin-left: -50px;} /* override .sectionHead p{margin-top:12px} */ .sectionHead .text-muted{ margin-top:10px; } .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start} .grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px} .grid-4{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px} .featureRow{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:center} .mediaCard{ border-radius:var(--radius-xl); background:var(--surface); border:1px solid var(--border-subtle); box-shadow:var(--shadow-float); position:relative; } .mediaCard__img{ height:360px; background: radial-gradient(900px 420px at 30% 40%, rgba(26,79,156,.18), transparent 60%), radial-gradient(700px 380px at 70% 35%, rgba(0,166,118,.14), transparent 60%), linear-gradient(135deg, rgba(15,23,42,.06), rgba(15,23,42,.02)); } .mediaCard__tag{ position:absolute; left:16px; bottom:16px; padding:10px 12px; border-radius:var(--radius-lg); background:rgba(255,255,255,.92); border:1px solid var(--border-subtle); box-shadow:var(--shadow-card); font-weight:750; color:rgba(15,23,42,.80); max-width:84%; } /* ========================= EXPERIENCE VISUALS — Platform screenshots (CSS-only) ========================= */ .mediaCard__img.expShots{ position:relative; height:360px; background: radial-gradient(980px 420px at 18% 12%, rgba(26,79,156,.14), transparent 62%), radial-gradient(860px 420px at 92% 18%, rgba(0,166,118,.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98)); overflow:hidden; isolation:isolate; } .expShot{ position:absolute; inset:0; padding:14px; opacity:0; transform: translateY(10px) scale(.992); transition: opacity .22s ease, transform .22s ease; pointer-events:none; } .expShot.is-active{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; } .uiFrame{ height:100%; border-radius:22px; border:1px solid rgba(148,163,184,.24); background:rgba(255,255,255,.78); box-shadow: 0 34px 76px rgba(15,23,42,.14), 0 14px 28px rgba(15,23,42,.10); overflow:hidden; display:flex; flex-direction:column; position:relative; } .uiFrame::before{ content:""; position:absolute; inset:-20% -30% auto -30%; height:60%; background: radial-gradient(closest-side, rgba(255,255,255,.72), rgba(255,255,255,0)); transform: rotate(-10deg); pointer-events:none; opacity:.9; } .uiFrame > *{position:relative; z-index:1} .uiFrame--diag{ background: radial-gradient(720px 260px at 20% 0%, rgba(0,166,118,.16), transparent 62%), radial-gradient(760px 260px at 92% 0%, rgba(26,79,156,.16), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.98)); } .uiFrame--live{ background: radial-gradient(720px 260px at 25% 0%, rgba(26,79,156,.18), transparent 62%), radial-gradient(760px 260px at 88% 0%, rgba(0,166,118,.12), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.98)); } .uiFrame--drills{ background: radial-gradient(720px 260px at 20% 0%, rgba(26,79,156,.14), transparent 62%), radial-gradient(760px 260px at 92% 0%, rgba(15,23,42,.10), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.98)); } .uiFrame--mile{ background: radial-gradient(720px 260px at 22% 0%, rgba(0,166,118,.14), transparent 62%), radial-gradient(760px 260px at 92% 0%, rgba(26,79,156,.16), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.98)); } .uiTop{ height:46px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(255,255,255,.86); border-bottom:1px solid rgba(148,163,184,.22); backdrop-filter: blur(10px); } .uiTop__left{display:flex; align-items:center; gap:10px; min-width:0} .uiTop__right{display:flex; align-items:center; gap:8px; flex:0 0 auto} .uiChrome{ display:inline-flex; gap:5px; padding:4px 6px; border-radius:999px; background:rgba(15,23,42,.06); border:1px solid rgba(148,163,184,.20); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); flex:0 0 auto; } .uiChrome i{ width:7px; height:7px; border-radius:999px; background:rgba(148,163,184,.65); } .uiChrome i:nth-child(1){background:rgba(26,79,156,.55)} .uiChrome i:nth-child(2){background:rgba(0,166,118,.55)} .uiChrome i:nth-child(3){background:rgba(148,163,184,.62)} .uiBrand{ display:inline-flex; align-items:center; gap:7px; font-weight:900; letter-spacing:-.01em; color:rgba(15,23,42,.86); white-space:nowrap; font-size:.88rem; flex:0 0 auto; } .uiBrand__dot{ width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg, rgba(26,79,156,.90), rgba(0,166,118,.80)); box-shadow:0 0 0 2px rgba(255,255,255,.92); } .uiCrumb{ font-weight:850; color:rgba(15,23,42,.58); font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; } .uiPill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:900; font-size:.74rem; letter-spacing:.02em; color:rgba(26,79,156,.92); background:rgba(26,79,156,.08); border:1px solid rgba(26,79,156,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.70); white-space:nowrap; } .uiPill--teal{ color:rgba(0,166,118,.98); background:rgba(0,166,118,.10); border-color:rgba(0,166,118,.22); } .uiPill--blue{ color:rgba(26,79,156,.96); background:rgba(26,79,156,.10); border-color:rgba(26,79,156,.22); } .uiPill--soft{ color:rgba(15,23,42,.76); background:rgba(15,23,42,.05); border-color:rgba(148,163,184,.22); } .uiBody{ flex:1; display:grid; grid-template-columns: 150px 1fr; min-height:0; } .uiNav{ padding:12px 10px; border-right:1px solid rgba(148,163,184,.20); background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(248,250,252,.90)); display:flex; flex-direction:column; gap:8px; } .uiNav__item{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:14px; font-weight:850; color:rgba(15,23,42,.62); font-size:.84rem; border:1px solid transparent; background:transparent; } .uiNav__item span{ width:10px; height:10px; border-radius:999px; background:rgba(148,163,184,.65); flex:0 0 auto; } .uiNav__item.is-active{ color:rgba(15,23,42,.82); background:rgba(255,255,255,.84); border-color:rgba(148,163,184,.22); box-shadow: 0 12px 22px rgba(15,23,42,.08); } .uiNav__item.is-active span{ background:linear-gradient(135deg, rgba(26,79,156,.92), rgba(0,166,118,.82)); } .uiMain{ padding:12px; min-height:0; overflow:hidden; } /* Infinite loop scroll for Experience (4 screenshots) */ .uiMain.uiLoop{position:relative; overflow:hidden;} .uiMain.uiLoop .uiLoopTrack{ will-change:transform; animation: uiLoopScroll var(--uiLoopDur, 20s) linear infinite; } .uiMain.uiLoop .uiLoopStack{padding-bottom:14px;} @keyframes uiLoopScroll{ from{transform:translateY(0)} to{transform:translateY(-50%)} } .uiGrid{ display:grid; gap:10px; align-items:stretch; min-height:0; } .uiGrid--2{ grid-template-columns: 1fr 1fr; } .uiGrid--drill{ grid-template-columns: 1.2fr .8fr; } .uiCard{ border-radius:18px; background:rgba(255,255,255,.78); border:1px solid rgba(148,163,184,.22); box-shadow: 0 14px 28px rgba(15,23,42,.08); padding:10px 10px 10px; min-height:0; overflow:hidden; } .uiCard--wide{ padding:10px 12px; } .uiCard__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; } .uiCard__title{ font-weight:950; letter-spacing:-.01em; color:rgba(15,23,42,.82); font-size:.90rem; line-height:1.1; } .uiChip{ font-weight:900; font-size:.70rem; color:rgba(0,166,118,.98); background:rgba(0,166,118,.10); border:1px solid rgba(0,166,118,.22); padding:5px 8px; border-radius:999px; white-space:nowrap; flex:0 0 auto; } .uiChip--blue{ color:rgba(26,79,156,.94); background:rgba(26,79,156,.10); border-color:rgba(26,79,156,.22); } .uiChip--teal{ color:rgba(0,166,118,.98); background:rgba(0,166,118,.10); border-color:rgba(0,166,118,.22); } .uiBars{display:flex; flex-direction:column; gap:8px; margin-top:4px} .uiBar{ display:grid; grid-template-columns: 64px 1fr 42px; align-items:center; gap:10px; font-size:.78rem; color:rgba(15,23,42,.72); font-weight:800; } .uiBar b{ position:relative; height:8px; border-radius:999px; background:rgba(148,163,184,.22); overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); } .uiBar b i{ position:absolute; inset:0; width:var(--w,50%); background: linear-gradient(90deg, rgba(26,79,156,.82), rgba(0,166,118,.78)); border-radius:999px; } .uiBar em{font-style:normal; font-weight:950; color:rgba(15,23,42,.74); text-align:right} .uiNote{ margin-top:10px; padding:10px 10px; border-radius:16px; background:rgba(15,23,42,.04); border:1px solid rgba(148,163,184,.22); color:rgba(15,23,42,.74); font-weight:750; font-size:.80rem; line-height:1.25; display:flex; align-items:flex-start; gap:9px; } .uiNote--blue{ background:rgba(26,79,156,.06); border-color:rgba(26,79,156,.18) } .uiNote--teal{ background:rgba(0,166,118,.07); border-color:rgba(0,166,118,.18) } .uiDot{ width:10px; height:10px; border-radius:999px; background:rgba(148,163,184,.70); box-shadow: 0 0 0 2px rgba(255,255,255,.86); flex:0 0 auto; margin-top:3px; } .uiDot--teal{background:rgba(0,166,118,.92)} .uiDot--blue{background:rgba(26,79,156,.84)} .uiKpiRow{display:flex; align-items:center; gap:10px; margin-top:4px} .uiRing{ width:54px; height:54px; border-radius:999px; background: conic-gradient(rgba(0,166,118,.92) 0 78%, rgba(148,163,184,.22) 78% 100%); display:grid; place-items:center; box-shadow: 0 12px 24px rgba(15,23,42,.12); border:1px solid rgba(0,166,118,.22); flex:0 0 auto; } .uiRing span{ padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.90); border:1px solid rgba(148,163,184,.22); font-weight:950; font-size:.74rem; color:rgba(15,23,42,.72); } .uiKpiText__label{font-weight:850; font-size:.72rem; color:rgba(15,23,42,.58)} .uiKpiText__num{font-weight:950; font-size:.92rem; color:rgba(15,23,42,.82); margin-top:2px} .uiKpiText__sub{font-weight:800; font-size:.74rem; color:rgba(15,23,42,.60); margin-top:2px} .uiList{display:flex; flex-direction:column; gap:8px; margin-top:8px} .uiList__row{ display:flex; align-items:flex-start; gap:8px; padding:8px 9px; border-radius:14px; background:rgba(255,255,255,.78); border:1px solid rgba(148,163,184,.18); color:rgba(15,23,42,.74); font-weight:850; font-size:.78rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.70); } .uiList__row > span:nth-child(2){flex:1; min-width:0} .uiMiniPill{ padding:4px 8px; border-radius:999px; border:1px solid rgba(148,163,184,.22); background:rgba(15,23,42,.04); color:rgba(15,23,42,.66); font-weight:950; font-size:.70rem; white-space:nowrap; flex:0 0 auto; } .uiMiniPill--soft{ background:rgba(15,23,42,.03) } .uiMiniPill--blue{ background:rgba(26,79,156,.08); border-color:rgba(26,79,156,.16); color:rgba(26,79,156,.92) } .uiMiniPill--teal{ background:rgba(0,166,118,.08); border-color:rgba(0,166,118,.16); color:rgba(0,166,118,.96) } .uiCheck{ width:16px; height:16px; border-radius:999px; background: linear-gradient(135deg, rgba(0,166,118,.95), rgba(0,120,90,.92)); box-shadow: 0 10px 18px rgba(0,166,118,.18); border:1px solid rgba(0,166,118,.28); position:relative; flex:0 0 auto; margin-top:1px; } .uiCheck::after{ content:""; position:absolute; left:4px; top:5px; width:7px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(-45deg); } .uiObjGrid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; margin-top:2px; } .uiObj{ display:flex; align-items:flex-start; gap:8px; padding:8px 9px; border-radius:14px; background:rgba(255,255,255,.74); border:1px solid rgba(148,163,184,.18); color:rgba(15,23,42,.72); font-weight:850; font-size:.78rem; line-height:1.25; } .uiObj__icon{ width:14px; height:14px; border-radius:6px; background: linear-gradient(135deg, rgba(26,79,156,.70), rgba(0,166,118,.62)); box-shadow: 0 0 0 2px rgba(255,255,255,.86); flex:0 0 auto; margin-top:2px; } .uiVideo{ height:120px; border-radius:16px; border:1px solid rgba(148,163,184,.22); background: radial-gradient(220px 140px at 30% 30%, rgba(26,79,156,.22), transparent 70%), radial-gradient(220px 140px at 70% 30%, rgba(0,166,118,.18), transparent 70%), linear-gradient(135deg, rgba(15,23,42,.10), rgba(15,23,42,.04)); position:relative; overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } .uiPlay{ position:absolute; left:16px; top:14px; width:34px; height:34px; border-radius:999px; background:rgba(255,255,255,.86); border:1px solid rgba(148,163,184,.22); box-shadow: 0 12px 22px rgba(15,23,42,.16); } .uiPlay::after{ content:""; position:absolute; left:13px; top:10px; width:0; height:0; border-left:11px solid rgba(26,79,156,.86); border-top:7px solid transparent; border-bottom:7px solid transparent; } .uiVideo__bar{ position:absolute; left:14px; right:14px; bottom:12px; height:6px; border-radius:999px; background:rgba(255,255,255,.30); border:1px solid rgba(255,255,255,.24); overflow:hidden; } .uiVideo__bar i{ display:block; height:100%; width:var(--p,40%); background: linear-gradient(90deg, rgba(0,166,118,.92), rgba(26,79,156,.84)); border-radius:999px; } .uiMetaRow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px} .uiPrompt__q{ font-weight:900; color:rgba(15,23,42,.78); font-size:.82rem; line-height:1.25; margin-top:2px; } .uiOptions{display:flex; flex-direction:column; gap:8px; margin-top:10px} .uiOpt{ display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:14px; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.78); font-weight:850; color:rgba(15,23,42,.72); font-size:.78rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.70); } .uiOpt span{ width:22px; height:22px; border-radius:8px; background:rgba(26,79,156,.08); border:1px solid rgba(26,79,156,.16); color:rgba(26,79,156,.92); display:grid; place-items:center; font-weight:950; flex:0 0 auto; margin-top:-1px; } .uiOpt.is-correct{ border-color:rgba(0,166,118,.22); background:rgba(0,166,118,.06); } .uiOpt.is-correct span{ background:rgba(0,166,118,.10); border-color:rgba(0,166,118,.22); color:rgba(0,166,118,.96); } .uiStem{ font-weight:850; color:rgba(15,23,42,.72); font-size:.80rem; line-height:1.28; background:rgba(15,23,42,.03); border:1px solid rgba(148,163,184,.18); border-radius:14px; padding:10px 10px; } .uiOptions--q{ margin-top:10px } .uiFooterRow{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px} .uiMiniGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; } .uiMiniStat{ border-radius:16px; padding:9px 9px; border:1px solid rgba(148,163,184,.18); background:rgba(255,255,255,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.70); } .uiMiniStat div{font-weight:900; font-size:.70rem; color:rgba(15,23,42,.56)} .uiMiniStat b{display:block; margin-top:2px; font-weight:950; font-size:.88rem; color:rgba(15,23,42,.80)} .uiMiniStat span{display:block; margin-top:1px; font-weight:850; font-size:.72rem; color:rgba(15,23,42,.58)} .uiChart{ height:120px; border-radius:16px; border:1px solid rgba(148,163,184,.22); background:rgba(255,255,255,.74); overflow:hidden; position:relative; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); } .uiChart svg{width:100%; height:100%} .uiChart__grid{ position:absolute; inset:0; background: linear-gradient(to right, rgba(148,163,184,.20) 1px, transparent 1px) 0 0 / 48px 100%, linear-gradient(to bottom, rgba(148,163,184,.16) 1px, transparent 1px) 0 0 / 100% 30px; opacity:.55; pointer-events:none; } .uiChat{display:flex; flex-direction:column; gap:8px} .uiMsg{ padding:9px 10px; border-radius:16px; background:rgba(255,255,255,.78); border:1px solid rgba(148,163,184,.18); font-weight:850; color:rgba(15,23,42,.72); font-size:.78rem; line-height:1.25; } .uiMsg--me{ background:rgba(26,79,156,.06); border-color:rgba(26,79,156,.18); } @media (max-width: 960px){ .mediaCard__img.expShots{height:300px} .uiBody{grid-template-columns: 120px 1fr} .uiObjGrid{grid-template-columns:1fr} .uiGrid--2{grid-template-columns:1fr} .uiGrid--drill{grid-template-columns:1fr} .uiVideo{height:110px} .uiChart{height:110px} } /* ========================= ABOUT VISUAL — Concept-first, exam-aligned (mock UI) ========================= */ .mediaCard__img.conceptMock{ position:relative; height:360px; padding:14px; border-radius:20px; background: radial-gradient(980px 380px at 12% 0%, rgba(26,79,156,.18), transparent 62%), radial-gradient(820px 360px at 92% 0%, rgba(0,166,118,.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.98)); display:flex; flex-direction:column; gap:10px; isolation:isolate; } .mediaCard__img.conceptMock::before{ content:""; position:absolute; inset:10px; border-radius:18px; background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,0)); border:1px solid rgba(148,163,184,.26); box-shadow: inset 0 1px 0 rgba(255,255,255,.80); pointer-events:none; z-index:1; } .mediaCard__img.conceptMock > *{position:relative; z-index:2} .cmTop{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:16px; background:rgba(255,255,255,.82); border:1px solid rgba(148,163,184,.26); box-shadow: 0 12px 26px rgba(15,23,42,.08); } .cmBrand{ display:flex; align-items:center; gap:9px; font-weight:850; letter-spacing:-.01em; color:rgba(15,23,42,.86); font-size:.96rem; white-space:nowrap; } .cmDot{ width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg, rgba(26,79,156,.85), rgba(0,166,118,.75)); box-shadow:0 0 0 2px rgba(255,255,255,.90); flex:0 0 auto; } .cmPills{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end} .cmPill{ font-weight:850; font-size:.72rem; color:rgba(26,79,156,.88); background:rgba(26,79,156,.08); border:1px solid rgba(26,79,156,.18); padding:6px 10px; border-radius:999px; white-space:nowrap; } .cmPill--teal{ color:rgba(0,166,118,.98); background:rgba(0,166,118,.10); border-color:rgba(0,166,118,.22); } .cmGrid{ display:grid; grid-template-columns: 1.05fr .95fr; gap:10px; align-items:stretch; flex:1; min-height:0; } /* continuous looping scroll inside dashboard */ .cmScroll{position:relative; flex:1; min-height:0; overflow:hidden;} .cmScrollTrack{will-change:transform; animation: cmDashScroll 20s linear infinite;} .cmStack{padding-bottom:14px;} .cmDivider{ height:10px; margin:8px 0 10px; border-radius:999px; background:linear-gradient(90deg, rgba(148,163,184,.0), rgba(148,163,184,.28), rgba(148,163,184,.0)); } @keyframes cmDashScroll{ from{transform:translateY(0)} to{transform:translateY(-50%)} } .cmCol{ border-radius:18px; border:1px solid rgba(148,163,184,.24); background:rgba(255,255,255,.70); box-shadow: 0 14px 32px rgba(15,23,42,.08); padding:12px 12px 12px; min-height:0; display:flex; flex-direction:column; gap:10px; } .cmSectionTitle{ font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:rgba(15,23,42,.58); } .cmObjList{display:grid; gap:8px} .cmObj{ display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:14px; border:1px solid rgba(148,163,184,.22); background:rgba(255,255,255,.70); font-weight:720; color:rgba(15,23,42,.78); letter-spacing:-.01em; font-size:.9rem; line-height:1.2; } .cmObj span:last-child{ text-overflow:ellipsis; white-space:nowrap; min-width:0; } .cmBox{ width:18px; height:18px; border-radius:6px; border:2px solid rgba(100,116,139,.55); background:rgba(255,255,255,.75); flex:0 0 auto; } .cmCheck{ width:18px; height:18px; border-radius:6px; border:2px solid rgba(0,166,118,.65); background:rgba(0,166,118,.10); position:relative; flex:0 0 auto; } .cmCheck::after{ content:""; position:absolute; left:5px; top:1px; width:4px; height:9px; border:2px solid rgba(0,166,118,.90); border-top:0; border-left:0; transform:rotate(45deg); } .cmTarget{ width:18px; height:18px; border-radius:999px; border:2px solid rgba(26,79,156,.65); background:rgba(26,79,156,.08); position:relative; flex:0 0 auto; } .cmTarget::after{ content:""; position:absolute; inset:-6px; border-radius:999px; border:2px solid rgba(0,166,118,.26); opacity:.85; animation: cmPulse 1.8s var(--ease) infinite; } .cmObj--done{color:rgba(15,23,42,.78)} .cmObj--focus{ border-color:rgba(0,166,118,.30); background:linear-gradient(180deg, rgba(0,166,118,.08), rgba(255,255,255,.70)); color:rgba(15,23,42,.84); } .cmNote{ margin-top:auto; border-radius:16px; border:1px solid rgba(26,79,156,.18); background: radial-gradient(520px 180px at 0% 0%, rgba(26,79,156,.12), transparent 62%), radial-gradient(520px 180px at 100% 0%, rgba(0,166,118,.10), transparent 62%), rgba(255,255,255,.72); padding:10px 10px; box-shadow: 0 10px 22px rgba(15,23,42,.06); } .cmNoteLabel{ font-weight:900; font-size:.78rem; color:rgba(15,23,42,.78); letter-spacing:-.01em; } .cmNoteBody{ margin-top:4px; color:rgba(71,85,105,.86); font-weight:650; font-size:.84rem; line-height:1.35; } .cmTags{display:flex; flex-wrap:wrap; gap:8px} .cmTag{ font-weight:850; font-size:.72rem; color:rgba(15,23,42,.74); background:rgba(226,232,240,.70); border:1px solid rgba(148,163,184,.22); padding:6px 9px; border-radius:999px; white-space:nowrap; } .cmBlueprint{display:grid; gap:8px} .cmBpRow{ display:grid; grid-template-columns: 120px 1fr 44px; gap:10px; align-items:center; } .cmBpLabel{ font-weight:800; font-size:.82rem; color:rgba(15,23,42,.74); letter-spacing:-.01em; } .cmBpBar{ height:10px; border-radius:999px; background:rgba(226,232,240,.92); border:1px solid rgba(148,163,184,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.90); } .cmBpBar span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, rgba(26,79,156,.85), rgba(0,166,118,.80)); box-shadow: 0 12px 26px rgba(26,79,156,.12); } .cmBpPct{ font-weight:900; font-size:.82rem; color:rgba(15,23,42,.70); text-align:right; } .cmQ{ margin-top:auto; border-radius:18px; border:1px solid rgba(148,163,184,.26); background: radial-gradient(520px 180px at 15% 0%, rgba(26,79,156,.10), transparent 64%), radial-gradient(520px 180px at 100% 0%, rgba(0,166,118,.08), transparent 64%), rgba(255,255,255,.72); box-shadow: 0 18px 40px rgba(15,23,42,.10); } .cmQHead{ display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid rgba(148,163,184,.22); background:rgba(255,255,255,.76); align-items:center; } .cmQTitle{ font-weight:900; font-size:.82rem; color:rgba(15,23,42,.84); letter-spacing:-.01em; white-space:nowrap; } .cmQMeta{ font-weight:850; font-size:.74rem; color:rgba(26,79,156,.86); background:rgba(26,79,156,.08); border:1px solid rgba(26,79,156,.18); padding:5px 8px; border-radius:999px; white-space:nowrap; } .cmQLines{display:grid; gap:7px; padding:10px 12px 0} .cmQLines span{ height:9px; border-radius:999px; background:linear-gradient(90deg, rgba(148,163,184,.60), rgba(226,232,240,.78)); } .cmQLines .w92{width:92%} .cmQLines .w88{width:88%} .cmQLines .w86{width:86%} .cmQLines .w78{width:78%} .cmQChoices{display:grid; gap:8px; padding:10px 12px 10px} .cmChoice{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:14px; border:1px solid rgba(148,163,184,.22); background:rgba(255,255,255,.66); } .cmChoice span{ width:22px; height:22px; border-radius:9px; display:grid; place-items:center; font-weight:950; font-size:.78rem; color:rgba(30,41,59,.78); background:rgba(226,232,240,.72); border:1px solid rgba(148,163,184,.22); flex:0 0 auto; } .cmChoice i{ display:block; height:9px; border-radius:999px; background:linear-gradient(90deg, rgba(148,163,184,.55), rgba(226,232,240,.72)); flex:1; } .cmChoice i.w70{max-width:70%} .cmChoice i.w66{max-width:66%} .cmChoice i.w64{max-width:64%} .cmChoice i.w58{max-width:58%} .cmChoice--active{ border-color:rgba(0,166,118,.28); background:linear-gradient(180deg, rgba(0,166,118,.08), rgba(255,255,255,.66)); } .cmChoice--active span{ background:rgba(0,166,118,.14); border-color:rgba(0,166,118,.30); color:rgba(0,166,118,.98); } .cmQFooter{ display:flex; gap:8px; padding:0 12px 12px; flex-wrap:wrap; } .cmQChip{ font-weight:850; font-size:.72rem; color:rgba(15,23,42,.72); background:rgba(226,232,240,.68); border:1px solid rgba(148,163,184,.22); padding:6px 9px; border-radius:999px; white-space:nowrap; } .cmQChip--teal{ color:rgba(0,166,118,.98); background:rgba(0,166,118,.10); border-color:rgba(0,166,118,.22); } .cmWatermark{ position:absolute; right:14px; bottom:12px; font-weight:900; letter-spacing:-.02em; color:rgba(15,23,42,.30); font-size:.86rem; pointer-events:none; z-index:2; text-shadow: 0 1px 0 rgba(255,255,255,.70); } @keyframes cmPulse{ 0%{transform:scale(.92); opacity:.62} 55%{transform:scale(1.10); opacity:.22} 100%{transform:scale(1.24); opacity:0} } @media (prefers-reduced-motion: reduce){ .cmTarget::after{animation:none !important} } @media (max-width: 720px){ .mediaCard__img.conceptMock{height:300px} .cmGrid{grid-template-columns:1fr} .cmBpRow{grid-template-columns: 110px 1fr 44px} } .featureList{display:grid; gap:12px; margin-top:18px} .featureItem{ display:flex; gap:12px; padding:14px; border-radius:var(--radius-lg); border:1px solid var(--border-subtle); background:var(--surface); box-shadow:var(--shadow-sm); transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease); } .featureItem:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:rgba(26,79,156,.35); } .featureItem strong{ display:block; font-weight:750; color:var(--text-main); letter-spacing:-.01em; margin-bottom:4px; } .featureItem span{color:var(--text-body); font-weight:600} .card__pad{padding:18px} .cardTitle{margin-top:10px} .metaList{ margin:14px 0 16px; padding:0; list-style:none; display:grid; gap:8px; color:var(--text-body); font-weight:600; } .metaList strong{color:rgba(15,23,42,.78); font-weight:750} .thumb{ height: clamp(250px, 23vw, 330px); background: radial-gradient(620px 320px at 30% 40%, rgba(26,79,156,.18), transparent 60%), radial-gradient(520px 280px at 70% 35%, rgba(0,166,118,.14), transparent 60%), linear-gradient(135deg, rgba(15,23,42,.06), rgba(15,23,42,.02)); } /* ============================ Program cover (GMAT-style) ============================ */ /* Pill sizing: match “Paths for every exam stage” */ #programs .card__pad .pill, #courses .pill, #events .pill, #experience .pill{ padding:5px 10px; gap:6px; font-size:.78rem; font-weight:700; border-color: rgba(26,79,156,.18); background: rgba(26,79,156,.045); } #programs .card__pad .pill__ico, #courses .pill__ico, #events .pill__ico, #experience .pill__ico{ width:14px; height:14px; } #programs .thumb{ height:300px; display:block; padding:0; position:relative; background:transparent; } @media (max-width: 860px){ #programs .thumb{height:270px; padding:0} } @media (max-width: 520px){ #programs .thumb{height:240px; padding:0} } .courseCover{ --cc-radius: var(--radius-lg); --cc-navy1: #2b3e6b; --cc-navy2: #172a4e; --cc-navy3: #0f1f3e; /* tuned to match reference cover spine */ --cc-teal:#2dd4bf; --cc-mint:#34d399; --cc-green:#22c55e; --cc-deep:#15803d; position:relative; width:100%; height:100%; max-height:none; border-radius:var(--cc-radius) var(--cc-radius) 0 0; container-type:inline-size; background: radial-gradient(120% 110% at 60% 10%, rgba(255,255,255,.92), rgba(246,249,255,.92) 40%, rgba(243,247,255,.92) 65%, rgba(238,244,255,.90) 100%); border:0; box-shadow:none; } .courseCover::before{ content:""; position:absolute; inset:0; background: radial-gradient(900px 420px at 40% 0%, rgba(255,255,255,.55), transparent 55%), radial-gradient(700px 360px at 70% 90%, rgba(26,79,156,.10), transparent 60%); pointer-events:none; mix-blend-mode: soft-light; opacity:.9; } /* subtle grain */ .courseCover::after{ content:""; position:absolute; inset:-30px; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(15,23,42,.022) 0 1px, transparent 1px 4px); opacity:.55; pointer-events:none; mix-blend-mode: overlay; } .courseCover__stripe{ position:absolute; left:0; top:0; bottom:0; width:24px; border-top-left-radius:var(--cc-radius); border-bottom-left-radius:0; background: linear-gradient(180deg, var(--cc-teal) 0%, var(--cc-mint) 28%, var(--cc-green) 62%, var(--cc-deep) 100%); box-shadow: inset -1px 0 0 rgba(255,255,255,.35), inset -10px 0 18px rgba(0,0,0,.12), 0 0 0 1px rgba(15,23,42,.10); z-index:3; } .courseCover__stripe::before{ content:""; position:absolute; inset:0; background: radial-gradient(22px 280px at 10% 18%, rgba(255,255,255,.48), transparent 62%), radial-gradient(30px 340px at 0% 60%, rgba(255,255,255,.22), transparent 70%); opacity:.95; mix-blend-mode:soft-light; } .courseCover__frame{ position:absolute; inset:0; border-radius:var(--cc-radius) var(--cc-radius) 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(15,23,42,.10); pointer-events:none; z-index:4; } .courseCover__top{ position:relative; z-index:2; height:78px; display:flex; align-items:center; justify-content:center; padding:14px 16px 14px 34px; background: radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.18), transparent 55%), linear-gradient(180deg, var(--cc-navy1), var(--cc-navy2) 55%, var(--cc-navy3)); border-bottom:1px solid rgba(255,255,255,.22); box-shadow: inset 0 -14px 28px rgba(0,0,0,.18); } .courseCover__top::before{ content:""; position:absolute; inset:0; background: radial-gradient(780px 210px at 55% 10%, rgba(0,0,0,.22), transparent 55%), radial-gradient(460px 160px at 20% 65%, rgba(45,212,191,.18), transparent 60%); opacity:.65; pointer-events:none; } .courseCover__top::after{ content:""; position:absolute; left:20px; right:0; bottom:-1px; height:4px; background: linear-gradient(90deg, rgba(45,212,191,.96), rgba(16,185,129,.96)); box-shadow: 0 10px 24px rgba(16,185,129,.24); pointer-events:none; } .courseCover__logo{ height:36px; width:auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.28)); opacity:.98; } .courseCover__body{ position:relative; z-index:2; padding:18px 18px 30px 40px; display:flex; flex-direction:column; height:calc(100% - 78px); } @media (max-width: 520px){ .courseCover__body{padding:16px 16px 16px 38px} } .courseCover__pill{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:6px 12px; border-radius:999px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color: rgba(15,23,42,.76); background: radial-gradient(80px 30px at 25% 35%, rgba(255,255,255,.9), rgba(255,255,255,.70) 55%, rgba(255,255,255,.55)), linear-gradient(180deg, rgba(31,93,255,.10), rgba(0,0,0,0)); border:1px solid rgba(15,23,42,.12); box-shadow: 0 10px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.65); } .courseCover__title{ margin-top:14px; font-size: clamp(34px, 12cqw, 60px); line-height: .94; font-weight:900; letter-spacing:-.03em; color: rgba(15,23,42,.92); text-shadow: 0 1px 0 rgba(255,255,255,.6); max-width: 92%; overflow-wrap:anywhere; text-wrap:balance; } .courseCover__subtitle{ margin-top:6px; font-size: clamp(24px, 9cqw, 44px); line-height: .98; font-weight:900; letter-spacing:-.03em; color: rgba(15,23,42,.86); max-width: 92%; overflow-wrap:anywhere; text-wrap:balance; } .courseCover__divider{ margin-top:auto; height:1px; width:100%; background: linear-gradient(90deg, rgba(15,23,42,.14), rgba(15,23,42,.06), transparent); } .courseCover__bullets{ margin:12px 0 26px; padding:0; list-style:none; display:grid; gap:12px; color: rgba(15,23,42,.78); font-weight:750; font-size:16px; } .courseCover__bullets li{ display:flex; gap:12px; align-items:center; white-space:nowrap; } .ccCheck{ width:22px; height:22px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto; background: linear-gradient(180deg, rgba(45,212,191,.92), rgba(16,185,129,.96)); box-shadow: 0 10px 22px rgba(16,185,129,.22), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.16); border:1px solid rgba(0,0,0,.08); } .ccCheck svg{width:14px; height:14px; color:#fff} .ccNum{ font-weight:900; color: rgba(15,23,42,.92); margin-right:2px; } /* size tuning for smaller screens */ @media (max-width: 520px){ .courseCover{max-height:210px; --cc-radius: 18px} .courseCover__top{height:64px} .courseCover__logo{height:28px} .courseCover__body{padding:12px 14px 14px 28px} .courseCover__title{font-size:34px} .courseCover__subtitle{font-size:28px} .courseCover__bullets{font-size:14px; gap:10px} .courseCover__bullets li{white-space:normal} } .steps{ display:grid; gap:12px; margin-top:18px; } .step{ border-radius:var(--radius-lg); border:1px solid var(--border-subtle); background:var(--surface); padding:16px; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease); text-align:left; } .step:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:rgba(26,79,156,.35); } .step[aria-selected="true"]{ background:rgba(26,79,156,.06); border-color:rgba(26,79,156,.45); box-shadow:var(--shadow-card); } .step__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .step__label{ display:flex; align-items:center; gap:12px; font-weight:650; color:var(--text-main); letter-spacing:-.01em; } .step__badge{ width:30px; height:30px; border-radius:999px; display:grid; place-items:center; flex:0 0 auto; font-weight:700; font-size:.95rem; color:rgba(15,23,42,.78); background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,1)); border:1px solid rgba(26,79,156,.20); box-shadow: 0 1px 0 rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.9); } .step__title{ font-size:1.08rem; line-height:1.25; font-weight:650; color:var(--text-main); } .step[aria-selected="true"] .step__badge{ color:#fff; background:#1a4f9c; border-color:transparent; box-shadow: 0 10px 22px rgba(26,79,156,.22); } .step__sub{ font-size:1rem; line-height:1.45; margin-top:8px; color:var(--text-body); font-weight:500; padding-left:42px; } /* ========================= EXPERIENCE — Responsive layout polish (iPhone/iPad) ========================= */ .experienceGrid{ display:grid; grid-template-columns: 1fr 1.35fr; gap:22px; align-items:start; grid-template-areas: "steps visual"; } .experienceGrid .expSteps{grid-area:steps; margin-top:0} .experienceGrid .expMediaCard{grid-area:visual; align-self:start} /* Prevent tall step list from stretching the visual on desktop */ .experienceGrid .expMediaCard{justify-self:stretch} /* Tablet: stack visual above steps; make steps a 2-column grid */ @media (max-width: 960px){ .experienceGrid{ grid-template-columns: 1fr; grid-template-areas: "visual" "steps"; gap:16px; } .mediaCard__img.expShots{height: clamp(320px, 55vw, 380px)} .experienceGrid .expSteps{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; } /* Put caption below the screenshot (no overlay) to avoid covering content */ .expMediaCard .mediaCard__tag{ position:static; margin:12px; max-width:none; } .expMediaCard .mediaCard__img{ border-bottom:1px solid rgba(226,232,240,.8); } } /* Phone: single-column steps, tighter sizing, better fit */ @media (max-width: 720px){ .sectionHead .eyebrow{margin-left:0} .experienceGrid .expSteps{grid-template-columns: 1fr} .step{padding:14px} .step__badge{width:28px; height:28px; font-size:.9rem} .step__sub{font-size:1rem; padding-left:40px} .mediaCard__img.expShots{height: clamp(300px, 82vw, 360px)} .expShot{padding:12px} } /* Small phones: simplify top bar to prevent crowding */ @media (max-width: 520px){ .uiCrumb{display:none} .uiBody{grid-template-columns: 108px 1fr} .uiNav{padding:10px 8px} .uiNav__item{padding:8px 9px; font-size:.80rem} .uiMain{padding:10px} .uiTop{height:44px; padding:9px 10px} .uiPill{padding:5px 8px} } .statsStrip{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:18px; } .stat{ --stat-rgb: 26 79 156; /* default: brand blue */ position:relative; border-radius:var(--radius-lg); border:1px solid rgb(var(--stat-rgb) / .16); background: radial-gradient(560px 240px at 0% 0%, rgb(var(--stat-rgb) / .07), transparent 58%), linear-gradient(180deg, rgb(var(--stat-rgb) / .05), rgba(255,255,255,1) 62%); box-shadow:var(--shadow-sm); padding:14px 14px 13px 14px; transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } .stat::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, rgb(var(--stat-rgb) / .60), rgb(var(--stat-rgb) / .22)); opacity:.65; } .stat:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:rgb(var(--stat-rgb) / .30); } .stat__top{display:flex; align-items:center; gap:12px} .stat__icon{ width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(180deg, rgb(var(--stat-rgb) / .10), rgb(var(--stat-rgb) / .03)); border:1px solid rgb(var(--stat-rgb) / .14); color:rgb(var(--stat-rgb) / 1); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); flex:0 0 auto; margin-left:4px; /* keep clear of the accent stripe */ } .stat__icon svg{width:20px; height:20px; stroke-width:2} .stat__stack{display:flex; flex-direction:column; gap:2px} .stat__num{ font-weight:800; font-size:1.7rem; letter-spacing:-.02em; color:var(--text-main); line-height:1.05; } .stat__label{ font-weight:650; color:rgba(15,23,42,.68); font-size:.92rem; letter-spacing:-.01em; } .stat--blue{--stat-rgb: 26 79 156} .stat--teal{--stat-rgb: 0 166 118} .stat--navy{--stat-rgb: 15 23 42} .stat--mix{--stat-rgb: 26 79 156; --stat-rgb2: 0 166 118} .stat--mix::after{background:linear-gradient(180deg, rgb(var(--stat-rgb) / .60), rgb(var(--stat-rgb2) / .22))} .select{ padding:12px 14px; border-radius:var(--radius-lg); border:1px solid var(--border-subtle); background:var(--surface); font-weight:750; color:var(--text-main); box-shadow:var(--shadow-sm); cursor:pointer; transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .select:hover{border-color:rgba(26,79,156,.35); box-shadow:var(--shadow-card)} .faqGrid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px} details.faq{ border-radius:var(--radius-lg); border:1px solid var(--border-subtle); background:var(--surface); box-shadow:var(--shadow-sm); transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease); } details.faq[open]{ border-color:rgba(26,79,156,.40); box-shadow:var(--shadow-card); } summary.faq__q{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px 14px 14px; cursor:pointer; font-weight:750; color:var(--text-main); position:relative; } summary.faq__q::-webkit-details-marker{display:none} summary.faq__q:before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:transparent; transition:background var(--t) var(--ease); } details.faq[open] summary.faq__q{ background:rgba(26,79,156,.06); } details.faq[open] summary.faq__q:before{ background:linear-gradient(180deg, var(--brand-blue), var(--brand-teal)); } .faq__toggle{ width:34px; height:34px; border-radius:999px; border:1px solid rgba(26,79,156,.25); background:rgba(26,79,156,.06); display:grid; place-items:center; flex:0 0 auto; position:relative; } .faq__toggle:before, .faq__toggle:after{ content:""; position:absolute; width:14px; height:2px; background:var(--brand-blue); border-radius:999px; transition:transform var(--t) var(--ease), opacity var(--t) var(--ease); } .faq__toggle:after{transform:rotate(90deg)} details.faq[open] .faq__toggle:after{opacity:0} .faq__a{ padding:12px 14px 16px; color:var(--text-body); font-weight:600; line-height:1.7; } /* Footer */ .footer{ background:var(--brand-navy); color:rgba(255,255,255,.90); } .footer__inner{padding:72px 0 32px} .footerCard{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-xl); padding:20px; box-shadow:var(--shadow-float); } .footerCard h2{color:#fff} .footerLogo{ height:34px; width:auto; display:block; } .footerTopRow{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; } .footerGrid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap:18px; margin-top:24px; } .footer h3{color:#fff; margin-bottom:10px} .footer a{color:rgba(255,255,255,.88)} .footer a:hover{color:#fff} .footerLinks{list-style:none; padding:0; margin:0; display:grid; gap:10px; font-weight:700} .footerBottom{ margin-top:28px; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; color:rgba(255,255,255,.75); font-weight:600; } .toTop{ position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:14px; border:1px solid var(--border-subtle); background:var(--surface); box-shadow:var(--shadow-card); display:grid; place-items:center; cursor:pointer; opacity:0; transform: translateY(10px); pointer-events:none; transition:opacity var(--t) var(--ease), transform var(--t) var(--ease); z-index:60; color:var(--brand-blue); font-weight:750; } .toTop.show{opacity:1; transform:translateY(0); pointer-events:auto} /* ========================= 7) RESPONSIVE ========================= */ @media (max-width: 960px){ .hero__grid{grid-template-columns:1fr; gap:18px} .sectionHead{flex-direction:column; align-items:flex-start} .grid-4{grid-template-columns:repeat(2, 1fr)} .grid-3{grid-template-columns:repeat(2, 1fr)} .featureRow{grid-template-columns:1fr} .statsStrip{grid-template-columns:repeat(2, 1fr)} .faqGrid{grid-template-columns:1fr} .footerGrid{grid-template-columns:1fr 1fr} } @media (max-width: 720px){ /* Mobile header layout: keep burger + cart grouped on the right (prevents the toggle from looking "floated" on iOS). */ .header__inner{ display:grid; grid-template-columns: auto 1fr auto auto; align-items:center; column-gap:10px; } .brand{grid-column:1} .nav{grid-column:3; justify-self:end} .header__right{grid-column:4; justify-self:end} .nav__toggle{display:inline-flex; align-items:center; justify-content:center} .nav__menu{ position:fixed; inset:78px 16px auto 16px; border:1px solid var(--border-subtle); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-float); padding:12px; display:none; flex-direction:column; align-items:stretch; gap:10px; } .nav__menu.open{display:flex} /* Ensure menu sits above the dimmed backdrop */ .nav__menu{z-index:60} .nav__backdrop{ display:block; position:fixed; top:var(--header-h, 76px); left:0; right:0; bottom:0; background: rgba(15,23,42,.55); /* dim page content */ backdrop-filter: blur(2px); opacity:0; pointer-events:none; transition: opacity var(--t) var(--ease); z-index:40; } .nav__backdrop.open{opacity:1; pointer-events:auto} body.nav-open{overflow:hidden} .header__cta{display:none} .header__right{gap:8px; grid-column:4; justify-self:end} .nav__mobileCta{display:block; margin-top:4px} .nav{grid-column:3; justify-self:end} .grid-4,.grid-3{grid-template-columns:1fr} .footerGrid{grid-template-columns:1fr} .mediaCard__img{height:300px} .brand{min-width:0; grid-column:1} .brand__name{display:none} .brand__logo{height:32px} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .btn, .card, .featureItem, .step, .stat, .toTop{transition:none} } /* ========================= MEGA MENU (HealthStream-style) ========================= */ .mega{position:relative} .mega__btn{ border:0; background:transparent; cursor:pointer; display:flex; align-items:center; gap:8px; padding:10px 10px; border-radius:12px; font-weight:700; color:rgba(15,23,42,.78); transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); position:relative; } .mega__btn:hover{ background:rgba(26,79,156,.06); color:var(--brand-blue); } .mega__chev{width:18px;height:18px; color:currentColor; opacity:.9; transform:translateY(1px)} .mega.open .mega__btn{color:var(--brand-blue)} .mega.open .mega__btn::after{ content:""; position:absolute; left:10px; right:10px; bottom:-14px; height:3px; border-radius:999px; background:var(--brand-blue); } .mega__panel{ /* Full-bleed panel (left-to-right), with inner content aligned to the body container */ position:fixed; left:0; right:0; top:var(--header-h, 76px); /* Avoid the classic 100vw overflow issue (100vw can include scrollbar width). */ width:100%; transform:none; background:var(--surface); border-top:1px solid rgba(226,232,240,.0); border-bottom:1px solid rgba(226,232,240,.9); border-left:0; border-right:0; border-radius:0 0 16px 16px; box-shadow:var(--shadow-float); display:none; z-index:80; /* Prevent oversized menus from overflowing the viewport */ max-height:calc(100vh - var(--header-h, 76px)); } .mega__inner{ /* Matches .medexp-container width; included for clarity and future-proofing */ width:min(var(--max), calc(100% - (var(--pad) * 2))); margin-inline:auto; } .mega__panel::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } .mega.open .mega__panel{display:block} .mega__layout{ display:grid; grid-template-columns: 320px 1fr 420px; gap:0; align-items:stretch; } .megaLeft{ padding:22px 18px; border-right:1px solid rgba(226,232,240,.85); background:linear-gradient(180deg, rgba(248,250,252,.9), rgba(255,255,255,.98)); } .megaLeft__list{display:grid; gap:10px} .megaLeft__btn{ width:100%; border:1px solid transparent; background:transparent; cursor:pointer; text-align:left; display:flex; align-items:center; gap:14px; padding:14px 14px; border-radius:14px; font-weight:750; color:rgba(15,23,42,.88); transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .megaLeft__btn:hover{transform:translateY(-1px)} .megaLeft__btn[aria-selected="true"]{ background:rgba(26,79,156,.07); border-color:rgba(26,79,156,.18); } .megaLeft__ico{ width:26px;height:26px; color:var(--brand-blue); flex:0 0 auto; } .megaMid{padding:22px 22px} .megaMid__grid{display:grid; gap:18px} .megaMid__item{ display:block; padding:10px 10px; border-radius:12px; transition:background var(--t-fast) var(--ease); } .megaMid__item:hover{background:rgba(15,23,42,.03)} .megaMid__title{ font-weight:750; color:var(--text-main); letter-spacing:-.01em; } .megaMid__desc{ margin-top:6px; color:rgba(71,85,105,.9); font-weight:600; line-height:1.55; max-width:70ch; } .megaCta{ padding:22px 22px; background:linear-gradient(180deg, rgba(15,23,42,.02), rgba(15,23,42,.0)); } .megaCta__card{ border-radius:14px; background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.96)); box-shadow:0 18px 50px rgba(15,23,42,.22); border:1px solid rgba(15,23,42,.20); } .megaCta__img{ height:210px; background-size:cover; background-position:center; } .megaCta__body{padding:18px 18px 20px; color:#fff} .megaCta__kicker{ display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:.22em; text-transform:uppercase; font-size:.78rem; opacity:.92; } .megaCta__kicker svg{width:18px;height:18px} .megaCta__title{ margin-top:14px; font-weight:750; font-size:1.35rem; letter-spacing:-.02em; line-height:1.25; } .megaCta__link{ display:inline-flex; margin-top:14px; font-weight:750; color:#fff; text-decoration:none; border-bottom:2px solid rgba(255,255,255,.55); padding-bottom:3px; } .megaCta__link:hover{border-color:#fff} @media (max-width: 960px){ .mega__panel{left:16px; right:16px; transform:none; width:auto} .mega__layout{grid-template-columns: 280px 1fr;} .megaCta{grid-column:1 / -1; padding-top:0} } @media (max-width: 720px){ .mega__btn{width:100%; justify-content:space-between} .mega.open .mega__btn::after{display:none} .mega__panel{ position:static; left:auto; right:auto; top:auto; transform:none; width:100%; max-height:none; box-shadow:none; border-radius:16px; margin-top:8px; } .mega__panel::before{display:none} .mega__layout{grid-template-columns:1fr} .megaLeft{border-right:0; border-bottom:1px solid rgba(226,232,240,.85)} .megaLeft__list{grid-template-columns:1fr 1fr; gap:10px} .megaCta__img{height:170px} } /* ========================= PRICING RIBBON (modules) ========================= */ .card--priced{position:relative} .priceRibbon{ position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; background:rgba(15,23,42,.04); border:1px solid rgba(226,232,240,.95); color:rgba(15,23,42,.78); font-weight:750; font-size:.82rem; box-shadow:var(--shadow-sm); pointer-events:none; } .priceRibbon svg{width:16px;height:16px; color:rgba(26,79,156,.95)} /* ========================= LIGHTWEIGHT MODAL ========================= */ .modal{ position:fixed; inset:0; display:none; z-index:120; } .modal.show{display:block} .modal__backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter: blur(6px); } .modal__dialog{ position:relative; width:min(620px, calc(100% - 32px)); margin:8vh auto 0; background:var(--surface); border:1px solid rgba(226,232,240,.9); border-radius:18px; box-shadow:var(--shadow-float); } .modal__head{ padding:18px 18px 14px; border-bottom:1px solid rgba(226,232,240,.85); background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,1)); display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .modal__title{ margin:0; font-weight:750; color:var(--text-main); letter-spacing:-.02em; } .modal__sub{ margin-top:6px; color:var(--text-body); font-weight:600; } .modal__close{ width:40px;height:40px; border-radius:12px; border:1px solid rgba(226,232,240,.9); background:var(--surface); box-shadow:var(--shadow-sm); cursor:pointer; display:grid; place-items:center; } .modal__close svg{width:18px;height:18px; color:rgba(15,23,42,.78)} .modal__body{padding:18px} .formGrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width: 720px){ .formGrid{grid-template-columns:1fr} } .field label{ display:block; font-weight:750; color:rgba(15,23,42,.78); margin-bottom:6px; } .field input, .field select, .field textarea{ width:100%; padding:12px 14px; border-radius:14px; border:1px solid rgba(226,232,240,.95); background:var(--surface); font-weight:600; color:var(--text-main); box-shadow:var(--shadow-sm); transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:rgba(26,79,156,.45); box-shadow:var(--shadow-card); } .modal__actions{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:14px; } /* ========================== Testimonials (Swipe + video center) ========================== */ /* Testimonials heading layout polish */ #testimonials .eyebrow{ --eyebrow-ico-h: clamp(38px, 3.2em, 56px); font-size:.92rem; font-weight:750; letter-spacing:.16em; color:rgba(15,23,42,.56); gap:.18em; /* even closer */ margin:0 0 6px; } #testimonials .eyebrow::before{ /* nudge is now unnecessary with flex-end; keep at 0 for crisp alignment */ transform:none; } #testimonials .sectionHead h2{ margin:0; line-height:1.05; } .testimonialsHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:22px; } .testimonialsHead h2{ margin:0; font-size: clamp(1.35rem, 2.1vw, 1.9rem); letter-spacing:-.02em; font-weight:750; color:var(--text-main); } .testimonialsHead p{ margin:8px 0 0; color:var(--text-body); font-weight:520; max-width:60ch; } .testimonialsHead .reviewsLink{ white-space:nowrap; font-weight:650; color:var(--brand-blue); text-decoration:none; border-bottom:1px solid rgba(26,79,156,.25); padding-bottom:2px; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); } .testimonialsHead .reviewsLink:hover{ color:var(--brand-navy); border-color: rgba(15,23,42,.35); } .tSlider{ position:relative; } .tViewport{ border-radius: var(--radius-xl); background: var(--bg-off-white); border:1px solid rgba(226,232,240,.9); box-shadow: 0 18px 40px rgba(15,23,42,.08); } .tTrack{ display:flex; will-change: transform; transition: transform 520ms var(--ease); touch-action: pan-y; } .tTrack.no-anim{ transition:none !important; } .tFrame{ flex: 0 0 100%; padding: 26px; box-sizing: border-box; } .tGrid{ display:grid; grid-template-columns: 1fr minmax(260px, 340px) 1fr; gap: 18px; align-items: center; } .tNav{ position:absolute; top:50%; transform: translateY(-50%); width:42px; height:42px; border-radius:999px; border:1px solid rgba(203,213,225,.95); background:rgba(255,255,255,.92); box-shadow: 0 12px 22px rgba(15,23,42,.10); display:grid; place-items:center; cursor:pointer; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease); z-index:3; } .tNav:hover{ transform: translateY(-50%) scale(1.03); background:#fff; box-shadow: 0 16px 28px rgba(15,23,42,.14); } .tNav:active{ transform: translateY(-50%) scale(.98); } .tNav--prev{ left:-16px; } .tNav--next{ right:-16px; } .tCard{ background: var(--surface); border:1px solid rgba(226,232,240,.95); border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 10px 22px rgba(15,23,42,.06); min-height: 240px; display:flex; flex-direction:column; gap: 12px; } .tCardTop{ display:flex; align-items:center; justify-content:space-between; gap: 12px; } .tPerson{ display:flex; align-items:center; gap: 12px; min-width: 0; } .tAvatar{ width:44px; height:44px; border-radius:999px; border:1px solid rgba(203,213,225,.85); background: linear-gradient(180deg, rgba(26,79,156,.16), rgba(0,166,118,.10)); display:grid; place-items:center; color: rgba(15,23,42,.72); font-weight:750; flex:0 0 auto; } .tName{ font-weight:720; color: var(--text-main); text-overflow: ellipsis; white-space: nowrap; letter-spacing:-.01em; } .tHandle{ font-weight:600; color: var(--text-muted); font-size: .92rem; margin-top:2px; text-overflow: ellipsis; white-space: nowrap; } .tPlatform{ width:28px; height:28px; border-radius: 10px; border:1px solid rgba(226,232,240,.95); background: var(--bg-off-white); display:grid; place-items:center; flex:0 0 auto; } .tStars{ display:flex; gap:4px; align-items:center; } .tQuote{ color: var(--brand-blue) !important; font-weight:560; line-height: 1.55; font-size: 1.02rem; letter-spacing:-.01em; margin: 0; display:-webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; } .tMetaRow{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap: 12px; color: var(--text-muted); font-weight:600; font-size:.92rem; } .tVideoCard{ border-radius: 22px; border:1px solid rgba(15,23,42,.10); box-shadow: 0 18px 34px rgba(15,23,42,.18); background: #0b1220; position:relative; isolation:isolate; } .tVideoWrap{ position:relative; width:100%; aspect-ratio: 9 / 16; background: radial-gradient(1200px 600px at 30% 10%, rgba(26,79,156,.35), transparent 55%), radial-gradient(900px 500px at 80% 90%, rgba(0,166,118,.25), transparent 60%), linear-gradient(180deg, rgba(15,23,42,1), rgba(15,23,42,.75)); } .tVideoWrap video{ width:100%; height:100%; object-fit: cover; display:block; background:#0b1220; } .tPlay{ position:absolute; inset:0; display:grid; place-items:center; border:0; background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.22)); cursor:pointer; transition: background var(--t) var(--ease), opacity var(--t) var(--ease); } .tPlayIcon{ width:62px; height:62px; border-radius:999px; background: rgba(255,255,255,.92); box-shadow: 0 16px 30px rgba(0,0,0,.25); display:grid; place-items:center; } .tVideoCard.is-playing .tPlay{ opacity:0; pointer-events:none; } .tVideoOverlay{ position:absolute; left:0; right:0; bottom:0; padding: 14px 16px 16px; /* Stronger legibility layer for dark footage */ background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,.55) 35%, rgba(11,18,32,.94) 70%, rgba(11,18,32,.985) 100%); backdrop-filter: blur(2px); color: #fff; z-index:2; } .tTag{ display:inline-flex; align-items:center; gap:8px; font-weight:750; letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; opacity:.92; margin-bottom:8px; } .tVideoTitle{ margin:0; font-size: 1.15rem; letter-spacing:-.02em; font-weight:780; line-height:1.25; } .tVideoFooter{ margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap: 10px; opacity:.96; font-weight:650; } /* Improve readability when the media is dark */ .tVideoOverlay .tTag, .tVideoOverlay .tVideoTitle, .tVideoOverlay .tVideoFooter{ text-shadow: 0 2px 14px rgba(0,0,0,.70); } .tVideoOverlay .tVideoTitle{ color:#fff; } .tVideoOverlay .tVideoFooter{ color:#fff; } .tWatchLink{ color:#fff; text-decoration:none; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom:2px; font-weight:750; } .tWatchLink:hover{ border-bottom-color: rgba(255,255,255,.65); } .tBottomRow{ display:flex; justify-content:flex-end; margin-top: 14px; } /* Responsive: keep swipe, stack content */ @media (max-width: 980px){ .tFrame{ padding:18px; } .tGrid{ grid-template-columns: 1fr; } .tNav--prev{ left:10px; } .tNav--next{ right:10px; } .tCard{ min-height:auto; } .tVideoWrap{ max-height: 520px; } } @media (max-width: 560px){ .testimonialsHead{ align-items:flex-start; flex-direction:column; } .tNav{ display:none; } /* swipe-only on small screens */ .tViewport{ border-radius: 18px; } .tQuote{ font-size:1rem; } } /* ─────────────────────────────────────────────────────────────────────────── NAV + MEGA MENU POLISH (typography, spacing, hover states, and link treatment) Scoped to header + mega menu so it won’t ripple across the rest of the page. ─────────────────────────────────────────────────────────────────────────── */ /* Header bar: slightly cleaner spacing + crisper glass edge */ .header{ background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(226,232,240,.92); backdrop-filter: blur(12px) saturate(1.06); } .header__inner{ padding: 16px 0; gap: 18px; } /* Primary nav items: unify weights between and mega