/* ========================================================================== NNWA Nutrition & Wellness Academy — Design System (style.css) One file: tokens + components + responsive. Poppins throughout. High-contrast teal/ink + cream. Glowing buttons. Motion-rich, GPU-friendly. ========================================================================== */ :root{ --ink: #06201A; --teal-900: #0A3D33; --teal-800: #0C4B3E; --teal-700: #0F6E56; --teal-600: #12886B; --teal-500: #15A37C; --mint: #2FE3A6; --mint-2: #5BF0C0; --gold: #F6B73C; --gold-2: #FFD27A; --cream: #FBF7EF; --sand: #F3E9D6; --paper: #FFFFFF; --line: #E7DCC7; --ink-text: #0A2A22; --body: #36433E; --muted: #5C665F; --on-dark: #EAFBF4; --on-dark-mut:#9FC7BA; --shadow-sm: 0 2px 8px rgba(8,40,32,.08); --shadow-md: 0 10px 30px rgba(8,40,32,.12); --shadow-lg: 0 26px 60px rgba(8,40,32,.20); --glow-mint: 0 0 0 1px rgba(47,227,166,.35), 0 12px 30px rgba(47,227,166,.35); --glow-gold: 0 0 0 1px rgba(246,183,60,.40), 0 12px 30px rgba(246,183,60,.40); --radius-sm: 10px; --radius: 16px; --radius-lg: 24px; --radius-xl: 32px; --pill: 999px; --maxw: 1180px; --gap: clamp(16px, 3vw, 28px); --sec-y: clamp(56px, 8vw, 110px); --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; font-family:var(--font); color:var(--body); background:var(--cream); line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{ max-width:100%; height:auto; display:block; } a{ color:var(--teal-700); text-decoration:none; } button{ font-family:inherit; } h1,h2,h3,h4{ font-family:var(--font); color:var(--ink-text); line-height:1.12; font-weight:800; letter-spacing:-.02em; margin:0 0 .5em; } h1{ font-size:clamp(2.1rem, 5.2vw, 3.7rem); } h2{ font-size:clamp(1.7rem, 3.6vw, 2.7rem); } h3{ font-size:clamp(1.18rem, 2.1vw, 1.5rem); font-weight:700; } p{ margin:0 0 1rem; } strong{ font-weight:700; color:var(--ink-text); } ::selection{ background:var(--mint); color:var(--ink); } .container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(18px,5vw,32px); } .container.narrow{ max-width:840px; } .section{ padding-block:var(--sec-y); position:relative; } .text-center{ text-align:center; } .sec-cream{ background:var(--cream); } .sec-sand{ background:var(--sand); } .sec-paper{ background:var(--paper); } .sec-ink{ background:var(--ink); color:var(--on-dark); } .sec-ink h1,.sec-ink h2,.sec-ink h3{ color:#fff; } .sec-grad{ background: radial-gradient(1100px 520px at 12% -10%, rgba(47,227,166,.16), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(246,183,60,.12), transparent 55%), linear-gradient(160deg, var(--teal-900), var(--ink) 70%); color:var(--on-dark); } .sec-grad h1,.sec-grad h2,.sec-grad h3{ color:#fff; } .sec-grad p, .sec-ink p{ color:var(--on-dark); } .edge-top{ height:4px; background:linear-gradient(90deg,var(--mint),var(--teal-500),var(--gold)); } .kicker{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-700); } .kicker::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; } .sec-grad .kicker, .sec-ink .kicker{ color:var(--mint); } .lead{ font-size:clamp(1.04rem,1.5vw,1.22rem); color:var(--body); } .sec-grad .lead, .sec-ink .lead{ color:var(--on-dark); } .grad-text{ background:linear-gradient(100deg,var(--mint),var(--mint-2) 60%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; } .gold-text{ background:linear-gradient(100deg,var(--gold),var(--gold-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .section-head{ max-width:760px; margin-inline:auto; margin-bottom:clamp(28px,4vw,52px); } .section-head .kicker{ margin-bottom:14px; } .section-head p{ margin-top:10px; } .muted{ color:var(--muted); } .eyebrow{ display:inline-block; font-weight:700; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-700); } .sec-grad .eyebrow,.sec-ink .eyebrow{ color:var(--mint); } /* buttons */ .btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 28px; border-radius:var(--pill); font-weight:700; font-size:.98rem; border:0; cursor:pointer; line-height:1; text-align:center; position:relative; transition:transform .18s ease, box-shadow .25s ease, filter .2s ease; will-change:transform; } .btn:active{ transform:translateY(1px) scale(.99); } .btn .arr{ transition:transform .2s ease; } .btn:hover .arr{ transform:translateX(4px); } .btn-glow{ color:#04231B; background:linear-gradient(100deg,var(--mint),var(--teal-500)); box-shadow:var(--glow-mint); } .btn-glow:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(47,227,166,.5), 0 18px 44px rgba(47,227,166,.5); filter:brightness(1.04); } .btn-gold{ color:#3a2700; background:linear-gradient(100deg,var(--gold),var(--gold-2)); box-shadow:var(--glow-gold); } .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(246,183,60,.55), 0 18px 44px rgba(246,183,60,.55); filter:brightness(1.03); } .btn-primary{ color:#fff; background:var(--teal-700); box-shadow:var(--shadow-sm); } .btn-primary:hover{ background:var(--teal-600); transform:translateY(-2px); box-shadow:var(--shadow-md); } .btn-ghost{ color:#fff; background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.45); } .btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; transform:translateY(-2px); } .btn-outline{ color:var(--teal-700); background:transparent; border:1.5px solid var(--teal-700); } .btn-outline:hover{ background:var(--teal-700); color:#fff; transform:translateY(-2px); } .btn-light{ color:var(--teal-800); background:#fff; box-shadow:var(--shadow-sm); } .btn-light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); } .btn-sm{ padding:11px 20px; font-size:.86rem; } .btn-lg{ padding:18px 36px; font-size:1.05rem; } .btn-block{ width:100%; } .btn-glow.pulse::after, .btn-gold.pulse::after{ content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-1; background:inherit; opacity:.55; animation:pulseGlow 2.2s ease-out infinite; } /* chips */ .chips{ display:flex; flex-wrap:wrap; gap:10px; } .chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--pill); font-weight:600; font-size:.85rem; background:rgba(15,110,86,.08); color:var(--teal-800); border:1px solid rgba(15,110,86,.16); } .sec-grad .chip, .sec-ink .chip{ background:rgba(255,255,255,.08); color:#eafff8; border-color:rgba(255,255,255,.18); } .chip.gold{ background:rgba(246,183,60,.16); color:#7a5410; border-color:rgba(246,183,60,.4); } .sec-grad .chip.gold,.sec-ink .chip.gold{ color:var(--gold-2); } .chip .dot{ width:8px;height:8px;border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); } .tag{ display:inline-flex; align-items:center; padding:5px 12px; border-radius:var(--pill); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:linear-gradient(100deg,var(--mint),var(--teal-500)); color:#04231b; } .tag.gold{ background:linear-gradient(100deg,var(--gold),var(--gold-2)); color:#3a2700; } .tag.soft{ background:rgba(15,110,86,.1); color:var(--teal-800); } /* marquee */ .marquee{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee-track{ display:flex; gap:38px; width:max-content; animation:marquee 26s linear infinite; } .marquee:hover .marquee-track{ animation-play-state:paused; } .marquee .m-item{ display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--on-dark); white-space:nowrap; opacity:.9; font-size:.96rem; } .marquee .m-item b{ color:var(--mint); } /* navbar */ header.nav{ position:sticky; top:0; z-index:90; background:rgba(6,32,26,.82); backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid rgba(255,255,255,.08); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; height:72px; } .nav-logo{ display:flex; align-items:center; gap:10px; font-weight:800; color:#fff; font-size:1.06rem; letter-spacing:-.01em; } .nav-logo .mk{ width:34px; height:34px; } .nav-logo small{ display:block; font-size:.62rem; font-weight:500; color:var(--on-dark-mut); letter-spacing:.04em; } .nav-menu{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; } .nav-item{ position:relative; } .nav-item > a, .nav-item > button{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; color:#dff5ee; font-weight:600; font-size:.92rem; padding:10px 14px; border-radius:10px; transition:color .2s, background .2s; } .nav-item > a:hover, .nav-item > button:hover{ color:#fff; background:rgba(255,255,255,.07); } .nav-item .caret{ font-size:.66rem; opacity:.8; transition:transform .2s; } .nav-item:hover .caret, .nav-item.open .caret{ transform:rotate(180deg); } .nav-mega{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px); background:#0a2a22; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:14px; min-width:560px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transition:opacity .2s, transform .2s; z-index:95; display:grid; grid-template-columns:1fr 1fr; gap:6px; } .nav-item:hover .nav-mega, .nav-item.open .nav-mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .nav-mega.single{ grid-template-columns:1fr; min-width:240px; } .mega-link{ display:flex; flex-direction:column; padding:11px 14px; border-radius:12px; color:#eafff8; transition:background .18s; } .mega-link:hover{ background:rgba(47,227,166,.12); } .mega-link b{ font-size:.92rem; font-weight:600; color:#fff; } .mega-link span{ font-size:.78rem; color:var(--on-dark-mut); } .nav-cta{ display:flex; align-items:center; gap:10px; } .nav-toggle{ display:none; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; width:44px; height:44px; border-radius:12px; cursor:pointer; font-size:1.3rem; } .drawer{ position:fixed; inset:0; z-index:120; background:rgba(6,32,26,.6); backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .25s; } .drawer.open{ opacity:1; visibility:visible; } .drawer-panel{ position:absolute; top:0; right:0; height:100%; width:min(86%,360px); background:#08251e; border-left:1px solid rgba(255,255,255,.1); padding:22px; transform:translateX(100%); transition:transform .3s ease; overflow-y:auto; } .drawer.open .drawer-panel{ transform:translateX(0); } .drawer-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; } .drawer-close{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff; width:42px;height:42px;border-radius:10px; font-size:1.2rem; cursor:pointer; } .drawer a{ color:#eafff8; } .drawer .d-group{ border-top:1px solid rgba(255,255,255,.08); padding:6px 0; } .drawer .d-group > b{ display:block; color:var(--mint); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; padding:12px 4px 6px; } .drawer .d-link{ display:block; padding:11px 6px; font-weight:500; } /* hero */ .hero{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(56px,9vw,120px); } .hero .mesh{ position:absolute; inset:0; z-index:-2; background: radial-gradient(60% 60% at 15% 10%, rgba(47,227,166,.20), transparent 60%), radial-gradient(50% 50% at 90% 0%, rgba(246,183,60,.16), transparent 55%), radial-gradient(60% 70% at 80% 100%, rgba(21,163,124,.28), transparent 60%), linear-gradient(155deg, var(--teal-900), var(--ink) 75%); } .hero .orb{ position:absolute; border-radius:50%; filter:blur(46px); z-index:-1; opacity:.5; animation:float 12s ease-in-out infinite; } .hero .orb.a{ width:340px;height:340px; background:rgba(47,227,166,.4); top:-60px; right:8%; } .hero .orb.b{ width:280px;height:280px; background:rgba(246,183,60,.3); bottom:-60px; left:4%; animation-delay:-4s; } .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,5vw,60px); align-items:center; } .hero h1{ color:#fff; } .hero .lead{ color:var(--on-dark); max-width:54ch; } .hero-bullets{ list-style:none; margin:18px 0 26px; padding:0; display:grid; gap:11px; } .hero-bullets li{ display:flex; gap:11px; color:#eafff8; font-weight:500; align-items:flex-start; } .hero-bullets .tick{ flex:none; width:24px;height:24px;border-radius:7px; display:grid; place-items:center; background:linear-gradient(120deg,var(--mint),var(--teal-500)); color:#04231b; font-weight:800; font-size:.8rem; box-shadow:0 6px 16px rgba(47,227,166,.35); margin-top:1px; } .hero-micro{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:18px; color:var(--on-dark-mut); font-size:.85rem; font-weight:500; } .hero-micro b{ color:var(--mint-2); } .hero-stats{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; } .hstat{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:20px; backdrop-filter:blur(4px); position:relative; overflow:hidden; } .hstat::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(47,227,166,.08)); } .hstat .n{ font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; color:#fff; line-height:1; letter-spacing:-.02em; } .hstat .n .grad-text{ display:inline; } .hstat .l{ margin-top:8px; font-size:.82rem; color:var(--on-dark-mut); font-weight:500; } .hstat.tall{ grid-column:span 2; display:flex; align-items:center; gap:16px; } .hstat.tall .badge-emoji{ font-size:1.8rem; } .hstat.feature{ background:linear-gradient(135deg, rgba(47,227,166,.18), rgba(15,110,86,.25)); border-color:rgba(47,227,166,.35); } .cred-cluster{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; } /* stat band */ .stat-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); } .stat{ text-align:center; } .stat .num{ font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.02em; color:var(--teal-700); line-height:1; } .sec-grad .stat .num,.sec-ink .stat .num{ color:#fff; } .stat .num .u{ color:var(--mint); } .stat .label{ margin-top:8px; font-size:.86rem; color:var(--muted); font-weight:500; } .sec-grad .stat .label,.sec-ink .stat .label{ color:var(--on-dark-mut); } /* cards */ .grid{ display:grid; gap:var(--gap); } .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } .card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm); transition:transform .22s ease, box-shadow .25s ease, border-color .25s; } .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(47,227,166,.5); } .sec-grad .card,.sec-ink .card{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.12); } .sec-grad .card p,.sec-ink .card p{ color:var(--on-dark); } .usp-card{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px; box-shadow:var(--shadow-sm); transition:transform .22s, box-shadow .25s, border-color .25s; overflow:hidden; } .usp-card::before{ content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg,var(--mint),var(--teal-500)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .usp-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(47,227,166,.5); } .usp-card:hover::before{ transform:scaleX(1); } .usp-ico{ width:52px;height:52px;border-radius:14px; display:grid; place-items:center; font-size:1.5rem; background:linear-gradient(135deg, rgba(47,227,166,.18), rgba(15,110,86,.16)); border:1px solid rgba(15,110,86,.18); margin-bottom:14px; } .usp-card h3{ margin-bottom:8px; } .usp-card p{ margin:0; color:var(--body); font-size:.95rem; } .usp-num{ position:absolute; right:18px; top:14px; font-size:2.4rem; font-weight:800; color:rgba(15,110,86,.08); line-height:1; } .split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; } .split.reverse > .split-media{ order:2; } .check{ list-style:none; margin:0; padding:0; display:grid; gap:12px; } .check li{ display:flex; gap:12px; align-items:flex-start; } .check .ck{ flex:none; width:26px;height:26px;border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg,var(--mint),var(--teal-500)); color:#04231b; font-weight:800; font-size:.82rem; box-shadow:0 6px 16px rgba(47,227,166,.3); } .check.gold .ck{ background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#3a2700; box-shadow:0 6px 16px rgba(246,183,60,.3); } .sec-grad .check li,.sec-ink .check li{ color:var(--on-dark); } /* course card */ .course-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(3,1fr); } .course-card{ position:relative; display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .22s, box-shadow .25s, border-color .25s; } .course-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(47,227,166,.55); } .cc-top{ padding:22px 22px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .cc-ico{ width:48px;height:48px;border-radius:13px; display:grid; place-items:center; font-size:1.5rem; background:linear-gradient(135deg, rgba(47,227,166,.18), rgba(15,110,86,.14)); border:1px solid rgba(15,110,86,.16); } .cc-body{ padding:14px 22px 0; flex:1; } .cc-body h3{ font-size:1.16rem; margin-bottom:8px; } .cc-body p{ font-size:.9rem; color:var(--muted); margin:0; } .cc-meta{ display:flex; flex-wrap:wrap; gap:8px; padding:14px 22px 0; } .cc-meta .mini{ font-size:.74rem; font-weight:600; color:var(--teal-800); background:rgba(15,110,86,.08); border-radius:var(--pill); padding:5px 11px; } .cc-foot{ margin-top:16px; padding:16px 22px; border-top:1px dashed var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; } .cc-price{ display:flex; flex-direction:column; line-height:1.1; } .cc-price .now{ font-size:1.25rem; font-weight:800; color:var(--ink-text); } .cc-price .was{ font-size:.78rem; color:var(--muted); text-decoration:line-through; } .cc-price .emi{ font-size:.72rem; color:var(--teal-600); font-weight:600; } .course-card.flag{ border:1.5px solid rgba(246,183,60,.5); } .course-card.flag .cc-ribbon{ position:absolute; top:14px; right:-34px; transform:rotate(45deg); background:linear-gradient(100deg,var(--gold),var(--gold-2)); color:#3a2700; font-weight:800; font-size:.68rem; letter-spacing:.06em; padding:6px 40px; box-shadow:var(--shadow-sm); } /* pricing card */ .price-wrap{ display:grid; grid-template-columns:1fr; max-width:560px; margin-inline:auto; } .price-card{ position:relative; background:linear-gradient(160deg,#0c4b3e,#06201a); border:1px solid rgba(47,227,166,.3); border-radius:var(--radius-xl); padding:34px; color:var(--on-dark); box-shadow:var(--shadow-lg); overflow:hidden; } .price-card::before{ content:""; position:absolute; inset:-2px; z-index:0; border-radius:inherit; background:radial-gradient(400px 200px at 80% -10%, rgba(246,183,60,.22), transparent 60%); } .price-card > *{ position:relative; z-index:1; } .price-card h3{ color:#fff; } .price-card .save{ display:inline-block; background:linear-gradient(100deg,var(--gold),var(--gold-2)); color:#3a2700; font-weight:800; font-size:.78rem; padding:6px 14px; border-radius:var(--pill); margin-bottom:14px; } .price-now{ display:flex; align-items:baseline; gap:12px; margin:8px 0; } .price-now .amt{ font-size:clamp(2.4rem,6vw,3.4rem); font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1; } .price-now .was{ font-size:1.1rem; color:var(--on-dark-mut); text-decoration:line-through; } .price-emi{ color:var(--mint-2); font-weight:600; margin-bottom:18px; } .price-feat{ list-style:none; margin:18px 0; padding:18px 0; border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); display:grid; gap:11px; } .price-feat li{ display:flex; gap:10px; align-items:flex-start; color:var(--on-dark); font-size:.94rem; } .price-feat .ck{ color:var(--mint); font-weight:800; flex:none; } .price-note{ font-size:.8rem; color:var(--on-dark-mut); margin-top:14px; text-align:center; } /* calculator */ .calc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-md); overflow:hidden; max-width:760px; margin-inline:auto; } .calc-tabs{ display:flex; background:var(--sand); border-bottom:1px solid var(--line); } .calc-tab{ flex:1; background:none; border:0; cursor:pointer; padding:16px 12px; font-weight:700; color:var(--body); font-size:.92rem; transition:color .2s, background .2s; position:relative; } .calc-tab.active{ color:var(--teal-800); background:var(--paper); } .calc-tab.active::after{ content:""; position:absolute; left:0; bottom:-1px; width:100%; height:3px; background:linear-gradient(90deg,var(--mint),var(--teal-500)); } .calc-body{ padding:clamp(20px,4vw,34px); } .calc-pane{ display:none; } .calc-pane.active{ display:block; animation:fadeUp .4s ease; } .calc-fields{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; } .field{ display:flex; flex-direction:column; gap:7px; } .field label{ font-size:.82rem; font-weight:600; color:var(--ink-text); } .field input, .field select{ padding:13px 14px; border:1.5px solid var(--line); border-radius:12px; font-family:inherit; font-size:.96rem; color:var(--ink-text); background:#fff; transition:border-color .2s, box-shadow .2s; } .field input:focus, .field select:focus{ outline:0; border-color:var(--teal-500); box-shadow:0 0 0 4px rgba(47,227,166,.18); } .calc-result{ margin-top:22px; background:linear-gradient(135deg, rgba(47,227,166,.12), rgba(15,110,86,.08)); border:1px solid rgba(15,110,86,.18); border-radius:var(--radius); padding:22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; } .calc-result .big{ font-size:clamp(2rem,5vw,2.8rem); font-weight:800; color:var(--teal-800); line-height:1; } .calc-result .cat{ font-weight:700; } .calc-result small{ color:var(--muted); display:block; } .calc-locked{ margin-top:18px; background:var(--ink); color:var(--on-dark); border-radius:var(--radius); padding:20px 22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; position:relative; overflow:hidden; } .calc-locked::before{ content:"🔒"; position:absolute; right:-6px; top:-10px; font-size:5rem; opacity:.06; } .calc-locked .lk-txt b{ color:#fff; } .calc-locked .lk-txt span{ font-size:.86rem; color:var(--on-dark-mut); display:block; } .calc-note{ font-size:.78rem; color:var(--body); text-align:center; margin-top:14px; } /* bonuses */ .bonus-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .bonus-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .25s; } .bonus-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); } .bonus-ico{ font-size:1.8rem; margin-bottom:8px; } .bonus-card h4{ font-size:.96rem; margin:0 0 4px; color:var(--ink-text); font-weight:700; } .bonus-card p{ font-size:.8rem; color:var(--muted); margin:0; } /* certificates */ .cert-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .cert-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .22s, box-shadow .25s; cursor:pointer; } .cert-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); } .cert-shot{ aspect-ratio:1.414/1; background:repeating-linear-gradient(135deg, rgba(15,110,86,.05) 0 12px, rgba(15,110,86,.09) 12px 24px); display:grid; place-items:center; text-align:center; color:var(--teal-700); position:relative; border-bottom:1px solid var(--line); } .cert-shot .seal{ width:60px;height:60px;border-radius:50%; background:radial-gradient(circle at 50% 40%, var(--gold-2), var(--gold)); display:grid; place-items:center; color:#3a2700; font-weight:800; box-shadow:0 8px 22px rgba(246,183,60,.4); font-size:1.4rem; } .cert-shot .ph{ position:absolute; bottom:10px; font-size:.72rem; color:var(--muted); font-weight:600; } .cert-info{ padding:16px 18px; } .cert-info b{ display:block; color:var(--ink-text); font-size:.95rem; } .cert-info span{ font-size:.8rem; color:var(--muted); } .lightbox{ position:fixed; inset:0; z-index:200; background:rgba(6,32,26,.9); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .25s; } .lightbox.open{ opacity:1; visibility:visible; } .lightbox img{ max-width:92vw; max-height:88vh; border-radius:14px; box-shadow:var(--shadow-lg); } .lightbox .lb-close{ position:absolute; top:18px; right:22px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; width:46px;height:46px;border-radius:12px; font-size:1.4rem; cursor:pointer; } /* tabs */ .tab-btns{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:24px; } .tab-btn{ background:rgba(15,110,86,.07); border:1px solid rgba(15,110,86,.14); cursor:pointer; padding:11px 20px; border-radius:var(--pill); font-weight:600; color:var(--teal-800); font-size:.9rem; transition:all .2s; } .tab-btn.active{ background:linear-gradient(100deg,var(--mint),var(--teal-500)); color:#04231b; border-color:transparent; box-shadow:0 8px 20px rgba(47,227,166,.3); } .tab-pane{ display:none; } .tab-pane.active{ display:block; animation:fadeUp .4s ease; } /* accordion */ .acc{ display:grid; gap:12px; } .acc-item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .2s, border-color .2s; } .acc-item.open{ box-shadow:var(--shadow-md); border-color:rgba(47,227,166,.4); } .acc-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:18px 22px; font-weight:600; font-size:1rem; color:var(--ink-text); display:flex; align-items:center; justify-content:space-between; gap:14px; } .acc-q .ic{ flex:none; width:28px;height:28px;border-radius:8px; display:grid; place-items:center; background:rgba(15,110,86,.1); color:var(--teal-700); font-weight:800; transition:transform .25s, background .25s, color .25s; } .acc-item.open .acc-q .ic{ transform:rotate(45deg); background:var(--teal-700); color:#fff; } .acc-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; } .acc-a .inner{ padding:0 22px 20px; color:var(--body); } .acc-q .mod{ font-size:.7rem; font-weight:800; color:var(--teal-600); background:rgba(15,110,86,.08); padding:3px 9px; border-radius:var(--pill); margin-right:10px; } /* curriculum */ .cur-block{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; margin-bottom:16px; box-shadow:var(--shadow-sm); } .cur-block .cb-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; } .cur-block .cb-letter{ width:34px;height:34px;border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--mint),var(--teal-500)); color:#04231b; font-weight:800; flex:none; } .cur-block h4{ margin:0; font-size:1.05rem; } .cur-block .cb-sub{ color:var(--muted); font-size:.88rem; font-style:italic; margin:0 0 14px 46px; } .mod-list{ display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; margin-left:46px; } .mod-list .m{ display:flex; gap:9px; align-items:flex-start; font-size:.9rem; color:var(--body); } .mod-list .m b{ color:var(--teal-600); font-weight:700; font-size:.78rem; background:rgba(15,110,86,.08); padding:2px 7px; border-radius:6px; flex:none; } /* compare */ .table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); } table.cmp{ width:100%; border-collapse:collapse; min-width:560px; background:var(--paper); } table.cmp th, table.cmp td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:.92rem; } table.cmp thead th{ background:var(--ink); color:#fff; font-weight:700; } table.cmp thead th.us{ background:linear-gradient(135deg,var(--teal-700),var(--teal-500)); } table.cmp td.us{ background:rgba(47,227,166,.06); font-weight:600; color:var(--ink-text); } table.cmp .yes{ color:var(--teal-700); font-weight:700; } table.cmp .no{ color:#b5482b; } table.cmp tbody tr:last-child td{ border-bottom:0; } /* steps */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .step{ position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 22px 22px; box-shadow:var(--shadow-sm); } .step .sn{ width:42px;height:42px;border-radius:12px; display:grid; place-items:center; font-weight:800; color:#04231b; background:linear-gradient(135deg,var(--mint),var(--teal-500)); box-shadow:0 8px 20px rgba(47,227,166,.3); margin-bottom:14px; } .step h3{ margin:0 0 6px; font-size:1.02rem; } .step p{ margin:0; font-size:.88rem; color:var(--muted); } /* testimonials */ .testi-rail{ display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; -ms-overflow-style:none; scrollbar-width:none; } .testi-rail::-webkit-scrollbar{ display:none; } .testi-card{ scroll-snap-align:start; flex:0 0 clamp(280px,80%,380px); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-sm); } .testi-card .stars{ color:var(--gold); letter-spacing:2px; margin-bottom:10px; } .testi-card .q{ font-style:italic; color:var(--body); margin:0 0 16px; } .testi-who{ display:flex; align-items:center; gap:12px; } .testi-av{ width:46px;height:46px;border-radius:50%; display:grid; place-items:center; font-weight:800; color:#04231b; background:linear-gradient(135deg,var(--mint),var(--teal-500)); flex:none; } .testi-who b{ display:block; color:var(--ink-text); font-size:.95rem; } .testi-who span{ font-size:.8rem; color:var(--muted); } .rail-nav{ display:flex; justify-content:center; gap:10px; margin-top:18px; } .rail-nav button{ width:46px;height:46px;border-radius:50%; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:1.1rem; color:var(--teal-700); transition:all .2s; } .rail-nav button:hover{ background:var(--teal-700); color:#fff; transform:translateY(-2px); } /* cta band */ .cta-band{ position:relative; overflow:hidden; border-radius:var(--radius-xl); padding:clamp(32px,5vw,56px); background: radial-gradient(500px 240px at 10% 0%, rgba(47,227,166,.22), transparent 60%), radial-gradient(500px 240px at 100% 100%, rgba(246,183,60,.18), transparent 60%), linear-gradient(150deg,var(--teal-900),var(--ink)); color:var(--on-dark); text-align:center; } .cta-band h2{ color:#fff; } .cta-band .btn-row{ justify-content:center; margin-top:22px; } /* fomo */ .fomo{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 22px; background:rgba(246,183,60,.12); border:1px solid rgba(246,183,60,.4); border-radius:var(--radius); padding:14px 22px; } .fomo .fi{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:#7a5410; font-size:.9rem; } .sec-grad .fomo, .sec-ink .fomo{ background:rgba(246,183,60,.14); } .sec-grad .fomo .fi,.sec-ink .fomo .fi{ color:var(--gold-2); } .fomo .fi .pip{ width:9px;height:9px;border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); animation:blink 1.4s ease-in-out infinite; } /* sticky bar */ .sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:80; transform:translateY(120%); transition:transform .3s ease; } .sticky-cta.show{ transform:translateY(0); } .sticky-inner{ max-width:var(--maxw); margin:10px auto; padding:12px 18px; background:rgba(6,32,26,.94); backdrop-filter:blur(10px); border:1px solid rgba(47,227,166,.3); border-radius:var(--radius); box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:space-between; gap:14px; } .sticky-inner .si-txt b{ color:#fff; display:block; font-size:.96rem; } .sticky-inner .si-txt span{ color:var(--mint-2); font-size:.82rem; font-weight:600; } .sticky-inner .si-act{ display:flex; gap:10px; } .exit{ position:fixed; inset:0; z-index:210; background:rgba(6,32,26,.7); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .25s; } .exit.open{ opacity:1; visibility:visible; } .exit-card{ background:var(--paper); border-radius:var(--radius-xl); max-width:460px; width:100%; padding:34px; text-align:center; box-shadow:var(--shadow-lg); position:relative; } .exit-card .ec-close{ position:absolute; top:14px; right:16px; background:none; border:0; font-size:1.5rem; cursor:pointer; color:var(--muted); } .exit-card .em{ font-size:2.6rem; } /* breadcrumb */ .crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:.82rem; margin-bottom:16px; color:var(--on-dark-mut); } .crumbs a{ color:var(--mint-2); } .crumbs .sep{ opacity:.5; } .sec-cream .crumbs, .sec-sand .crumbs, .sec-paper .crumbs{ color:var(--muted); } .sec-cream .crumbs a,.sec-sand .crumbs a,.sec-paper .crumbs a{ color:var(--teal-700); } /* page hero */ .page-hero{ position:relative; overflow:hidden; padding-block:clamp(48px,7vw,90px); } .page-hero .mesh{ position:absolute; inset:0; z-index:-1; background:radial-gradient(60% 80% at 20% 0%, rgba(47,227,166,.16), transparent 60%), linear-gradient(155deg,var(--teal-900),var(--ink)); } .page-hero h1{ color:#fff; max-width:18ch; } .page-hero p{ color:var(--on-dark); max-width:60ch; } /* prose */ .prose{ max-width:760px; margin-inline:auto; } .prose h2{ margin-top:1.8em; } .prose h3{ margin-top:1.4em; } .prose p, .prose li{ color:var(--body); font-size:1.03rem; } .prose ul{ padding-left:1.2em; } .prose a{ color:var(--teal-700); font-weight:600; text-decoration:underline; text-decoration-color:rgba(15,110,86,.3); } .prose .meta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--muted); font-size:.85rem; margin-bottom:18px; } .blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); } .blog-card{ display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .25s; } .blog-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); } .blog-shot{ aspect-ratio:16/9; background:linear-gradient(135deg, rgba(15,110,86,.12), rgba(47,227,166,.1)); display:grid; place-items:center; font-size:2rem; } .blog-b{ padding:20px; flex:1; display:flex; flex-direction:column; } .blog-b h3{ font-size:1.08rem; margin:10px 0 8px; } .blog-b p{ font-size:.9rem; color:var(--muted); flex:1; } .blog-b .rd{ font-weight:700; color:var(--teal-700); font-size:.9rem; margin-top:10px; display:inline-flex; gap:6px; } /* contact */ .contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); } .contact-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; text-align:center; box-shadow:var(--shadow-sm); } .contact-card .ci{ width:54px;height:54px;border-radius:14px; display:grid; place-items:center; font-size:1.5rem; margin:0 auto 12px; background:linear-gradient(135deg, rgba(47,227,166,.18), rgba(15,110,86,.14)); } .contact-card a{ font-weight:600; } /* notice */ .notice{ background:rgba(15,110,86,.06); border:1px solid rgba(15,110,86,.18); border-left:4px solid var(--teal-600); border-radius:var(--radius); padding:18px 22px; } .notice.gold{ background:rgba(246,183,60,.1); border-color:rgba(246,183,60,.4); border-left-color:var(--gold); } .notice h3{ font-size:1rem; margin:0 0 6px; } .notice p{ margin:0; font-size:.92rem; } /* fee table */ .fee-table{ width:100%; border-collapse:collapse; background:var(--paper); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); } .fee-table th, .fee-table td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:.94rem; } .fee-table thead th{ background:var(--ink); color:#fff; } .fee-table tbody tr:hover{ background:rgba(47,227,166,.05); } .fee-table .amt{ font-weight:800; color:var(--teal-700); } /* footer */ footer.ft{ background:var(--ink); color:var(--on-dark); padding-block:clamp(44px,6vw,72px) 28px; } .ft-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; } .ft-brand .mk{ width:40px;height:40px; margin-bottom:12px; } .ft-brand p{ color:var(--on-dark-mut); font-size:.9rem; max-width:32ch; } .ft-soc{ display:flex; gap:10px; margin-top:14px; } .ft-soc a{ width:40px;height:40px;border-radius:11px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#eafff8; transition:all .2s; } .ft-soc a:hover{ background:var(--teal-600); transform:translateY(-2px); border-color:transparent; } .ft-col h3{ color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; } .ft-col a{ display:block; color:var(--on-dark-mut); padding:6px 0; font-size:.9rem; transition:color .2s; } .ft-col a:hover{ color:var(--mint-2); } .ft-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; } .ft-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding-top:20px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; color:var(--on-dark-mut); font-size:.82rem; } .ft-bottom a{ color:var(--on-dark-mut); } .ft-bottom a:hover{ color:var(--mint-2); } .wa-fab{ position:fixed; right:18px; bottom:18px; z-index:70; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 12px 30px rgba(37,211,102,.45); transition:transform .2s; } .wa-fab:hover{ transform:scale(1.08); } .wa-fab svg{ width:30px; height:30px; } .sticky-cta.show ~ .wa-fab{ bottom:84px; } /* animations */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; } .reveal.in{ opacity:1; transform:none; } .stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; } .stagger.in > *{ opacity:1; transform:none; } .stagger.in > *:nth-child(2){ transition-delay:.07s; } .stagger.in > *:nth-child(3){ transition-delay:.14s; } .stagger.in > *:nth-child(4){ transition-delay:.21s; } .stagger.in > *:nth-child(5){ transition-delay:.28s; } .stagger.in > *:nth-child(6){ transition-delay:.35s; } .stagger.in > *:nth-child(7){ transition-delay:.42s; } .stagger.in > *:nth-child(8){ transition-delay:.49s; } @keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} } @keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-22px);} } @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } @keyframes pulseGlow{ 0%{ transform:scale(1); opacity:.5;} 70%{ transform:scale(1.18); opacity:0;} 100%{ opacity:0;} } @keyframes blink{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } .reveal,.stagger > *{ opacity:1; transform:none; } } @media (max-width: 980px){ .hero-grid{ grid-template-columns:1fr; } .hero-stats{ max-width:520px; } .split, .grid-2{ grid-template-columns:1fr; } .split.reverse > .split-media{ order:0; } .grid-3, .grid-4, .course-grid, .blog-grid, .bonus-grid, .cert-gallery, .contact-grid{ grid-template-columns:repeat(2,1fr); } .stat-band{ grid-template-columns:repeat(2,1fr); } .steps{ grid-template-columns:repeat(2,1fr); } .ft-grid{ grid-template-columns:1fr 1fr; } .nav-menu{ display:none; } .nav-toggle{ display:grid; place-items:center; } .mod-list{ grid-template-columns:1fr; } } @media (max-width: 600px){ .grid-3,.grid-4,.course-grid,.blog-grid,.bonus-grid,.cert-gallery,.contact-grid,.stat-band,.steps,.hero-stats{ grid-template-columns:1fr; } .hstat.tall{ grid-column:span 1; } .calc-fields{ grid-template-columns:1fr; } .ft-grid{ grid-template-columns:1fr; } .btn{ width:100%; } .btn-row{ flex-direction:column; align-items:stretch; } .nav-cta .btn{ width:auto; } .sticky-inner{ flex-direction:column; align-items:stretch; text-align:center; } .sticky-inner .si-act{ flex-direction:column; } .price-now .amt{ font-size:2.4rem; } } /* blog shot overlays (emoji + category badge) */ .blog-shot{ position:relative; } .blog-shot .be{ font-size:2.6rem; line-height:1; filter:drop-shadow(0 6px 14px rgba(6,32,26,.18)); } .blog-shot .bc{ position:absolute; top:12px; left:12px; background:rgba(6,32,26,.78); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; } /* ========================================================================= v2 — CONTRAST, GLOWING BUTTONS & MOBILE OPTIMISATION (appended last so it overrides earlier rules; desktop layout preserved) ========================================================================= */ /* ---- 1. HIGH-CONTRAST EYEBROWS on dark backgrounds ---------------------- */ .hero .kicker{ color:#8DF7D2; } /* bright mint on deep green */ .cta-band .kicker{ color:var(--gold-2); } /* bright gold on dark CTA */ .price-card .kicker, .sec-grad .section-head .kicker{ color:#8DF7D2; } .hero .kicker::before, .cta-band .kicker::before{ opacity:.95; } /* ---- 2. BRIGHTER, READABLE GRADIENT HEADLINE --------------------------- */ .grad-text{ background:linear-gradient(100deg, var(--mint-2), #C8FFEE 46%, var(--gold-2)); -webkit-background-clip:text; background-clip:text; color:transparent; } .hero h1{ text-shadow:0 2px 26px rgba(2,18,14,.35); } .hero .lead{ text-shadow:0 1px 14px rgba(2,18,14,.25); } /* ---- 3. STRONGER, GLOWING, ANIMATED BUTTONS ---------------------------- */ .btn-glow, .btn-gold{ overflow:hidden; } .btn-glow{ background:linear-gradient(100deg, var(--mint-2), var(--mint) 48%, var(--teal-500)); color:#04231B; box-shadow:0 0 0 1px rgba(47,227,166,.5), 0 12px 34px rgba(47,227,166,.5); } .btn-gold{ background:linear-gradient(100deg, var(--gold-2), var(--gold)); color:#3a2700; box-shadow:0 0 0 1px rgba(246,183,60,.55), 0 12px 34px rgba(246,183,60,.5); } .btn-glow:hover, .btn-gold:hover{ transform:translateY(-2px); filter:brightness(1.06); } /* shimmer sweep on hover */ .btn-glow::before, .btn-gold::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; background:linear-gradient(110deg, transparent 28%, rgba(255,255,255,.55) 50%, transparent 72%); transform:translateX(-130%); transition:transform .6s ease; pointer-events:none; } .btn-glow:hover::before, .btn-gold:hover::before{ transform:translateX(130%); } .btn-glow > *, .btn-gold > *{ position:relative; z-index:2; } /* continuous "breathing" glow replaces the old ping ring */ .btn-glow.pulse::after, .btn-gold.pulse::after{ display:none; } @keyframes glowBreath{ 0%,100%{ box-shadow:0 0 0 1px rgba(47,227,166,.5), 0 8px 24px rgba(47,227,166,.45);} 50%{ box-shadow:0 0 0 1px rgba(47,227,166,.85), 0 16px 46px rgba(47,227,166,.8);} } @keyframes glowBreathGold{ 0%,100%{ box-shadow:0 0 0 1px rgba(246,183,60,.55), 0 8px 24px rgba(246,183,60,.5);} 50%{ box-shadow:0 0 0 1px rgba(246,183,60,.9), 0 16px 46px rgba(246,183,60,.82);} } .btn-glow.pulse{ animation:glowBreath 2.6s ease-in-out infinite; } .btn-gold.pulse{ animation:glowBreathGold 2.6s ease-in-out infinite; } /* ---- 4. PROFESSIONAL HEADER CTA (no text wrap) ------------------------- */ .nav-cta .btn{ white-space:nowrap; padding:12px 22px; font-size:.92rem; letter-spacing:.005em; min-height:44px; } .nav-cta .btn .arr{ margin-left:-2px; } /* ---- 5. ROBUST COURSE-CARD HEADER + CLEAN FLAGSHIP TAB (all sizes) ----- */ .cc-top{ flex-direction:column; align-items:flex-start; gap:12px; padding-top:24px; } .cc-top .tag{ max-width:100%; white-space:normal; line-height:1.34; text-align:left; } .course-card.flag .cc-ribbon{ top:0; right:0; left:auto; transform:none; border-radius:0 var(--radius-lg) 0 16px; padding:8px 16px 9px; font-size:.66rem; letter-spacing:.09em; } .course-card.flag .cc-top{ padding-right:104px; } /* clear the corner tab */ .cc-foot.no-price{ justify-content:center; } /* ---- 6. MOBILE COMPARISON: table -> clean stacked cards ---------------- */ @media (max-width:640px){ .table-wrap{ overflow:visible; border:0; box-shadow:none; background:transparent; } table.cmp{ min-width:0; width:100%; background:transparent; } table.cmp thead{ display:none; } table.cmp tbody, table.cmp tr, table.cmp td{ display:block; width:100%; } table.cmp tr{ border:1px solid var(--line); border-radius:16px; margin-bottom:14px; overflow:hidden; background:var(--paper); box-shadow:var(--shadow-sm); } table.cmp td{ border-bottom:1px solid var(--line); padding:13px 16px; font-size:.92rem; } table.cmp td:first-child{ background:var(--ink); color:#fff; font-weight:700; font-size:.96rem; } table.cmp td:not(:first-child){ display:flex; align-items:center; justify-content:space-between; gap:14px; } table.cmp td:not(:first-child)::before{ font-weight:600; color:var(--muted); font-size:.82rem; flex:1; } table.cmp td:nth-child(2){ background:rgba(47,227,166,.07); } table.cmp td:nth-child(2)::before{ content:"NNWA"; color:var(--teal-700); font-weight:700; } table.cmp td:nth-child(3)::before{ content:"Typical online course"; } table.cmp td:nth-child(4)::before{ content:"Generic university add-on"; } table.cmp td:last-child{ border-bottom:0; } table.cmp .yes, table.cmp .no{ white-space:nowrap; } } /* ---- 7. CALCULATOR — stack the gate so the text always shows ----------- */ @media (max-width:600px){ .calc-locked{ flex-direction:column; align-items:stretch; text-align:left; gap:14px; } .calc-locked .lk-txt{ min-width:0; } .calc-locked .btn{ width:100%; } .calc-result{ flex-direction:column; align-items:flex-start; gap:8px; text-align:left; } .calc-result > div[style*="right"]{ text-align:left !important; } } /* ---- 8. HERO + GENERAL MOBILE POLISH ---------------------------------- */ .hstat{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); } @media (max-width:760px){ /* force every course grid to a single, comfortable column on phones */ .course-grid{ grid-template-columns:1fr !important; } } @media (max-width:600px){ .hero{ padding-block:38px 44px; } .hero h1{ font-size:clamp(2.05rem,8.4vw,2.8rem); line-height:1.1; letter-spacing:-.02em; } .hero .lead{ font-size:1.02rem; } .hero-bullets li{ font-size:.97rem; } .hero-bullets{ gap:13px; } .section{ padding-block:48px; } .section-head{ margin-bottom:26px; } .nav-logo small{ display:none; } .nav-inner{ height:62px; gap:10px; } .nav-logo .mk{ width:32px; height:32px; } .cc-body h3{ font-size:1.14rem; } .cta-band{ padding:32px 20px; } .price-card{ padding:28px 20px; } } @media (max-width:380px){ .nav-cta .btn{ padding:11px 16px; font-size:.86rem; } } /* ---- 9. SMOOTHER TAB SLIDE ANIMATION --------------------------------- */ .tab-pane.active{ animation:tabSlide .5s cubic-bezier(.22,.61,.36,1); } @keyframes tabSlide{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } } /* ========================================================================= v3 — DESKTOP MEGA-MENU FIX + MOBILE HERO ORDER ========================================================================= */ /* ---- 1. MEGA MENU: kill the hover-gap so it never vanishes ------------- */ .nav-mega{ top:calc(100% + 6px); min-width:460px; max-width:min(560px, calc(100vw - 28px)); transition:opacity .18s ease, transform .18s ease, visibility .18s; } /* invisible bridge across the gap keeps :hover continuous button -> panel */ .nav-mega::before{ content:""; position:absolute; left:-12px; right:-12px; top:-16px; height:18px; background:transparent; } /* keep the panel open while the cursor is anywhere on it */ .nav-item:hover > .nav-mega, .nav-item.open > .nav-mega, .nav-mega:hover{ opacity:1 !important; visibility:visible !important; transform:translateX(-50%) translateY(0) !important; } .nav-item > a, .nav-item > button{ position:relative; } /* a little breathing room + nicer hover targets inside the panel */ .nav-mega{ padding:14px; row-gap:4px; } .mega-link{ padding:12px 14px; } .mega-link:hover{ background:rgba(47,227,166,.14); } /* widen the top-level hover target a touch so the pointer doesn't slip out */ .nav-item > a, .nav-item > button{ padding-block:10px; } /* ---- 2. MOBILE: bring the primary CTA into the first screen ------------ */ @media (max-width:600px){ .hero-copy{ display:flex; flex-direction:column; } .hero-copy .crumbs{ order:0; } .hero-copy .kicker{ order:1; margin-bottom:6px; } .hero-copy h1{ order:2; } .hero-copy .lead{ order:3; margin-bottom:4px; } .hero-copy .btn-row{ order:4; margin:18px 0 4px; } .hero-copy .hero-bullets{ order:5; margin-top:14px; } .hero-copy .hero-micro{ order:6; } /* tighten so the CTA clears the fold on common phones */ .hero{ padding-block:30px 40px; } .hero h1{ font-size:clamp(1.95rem,8vw,2.6rem); line-height:1.1; } .hero .lead{ font-size:1rem; } } /* ========================================================================= v3 — LEGAL PAGES (privacy / terms) — clean, readable long-form ========================================================================= */ .legal{ max-width:860px; margin:0 auto; } .legal .upd{ color:var(--muted); font-size:.85rem; margin:0 0 14px; font-weight:600; letter-spacing:.02em; } .legal .lead-note{ background:rgba(15,110,86,.06); border:1px solid rgba(15,110,86,.18); border-left:4px solid var(--teal-600); border-radius:14px; padding:16px 20px; margin-bottom:26px; } .legal .lead-note p{ margin:0; } .legal h3{ font-size:1.2rem; margin:30px 0 10px; line-height:1.3; } .legal h3:first-of-type{ margin-top:4px; } .legal h4{ font-size:1rem; font-weight:700; margin:18px 0 6px; color:var(--ink-text); } .legal p{ margin:0 0 13px; color:var(--body); line-height:1.75; } .legal ul{ margin:0 0 15px; padding-left:22px; } .legal li{ margin:7px 0; color:var(--body); line-height:1.7; } .legal a{ color:var(--teal-700); font-weight:600; } .legal a:hover{ text-decoration:underline; } /* ===================== Zoho form popup (lightbox) ===================== */ .zf-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(6,32,26,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .25s ease} .zf-modal.open{display:flex;opacity:1} .zf-dialog{position:relative;width:min(560px,96vw);height:min(760px,90vh);background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(6,32,26,.45);overflow:hidden;transform:translateY(14px) scale(.98);transition:transform .25s ease} .zf-modal.open .zf-dialog{transform:none} .zf-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#06201A;color:#fff} .zf-head b{font-size:.98rem;font-weight:700;line-height:1.2} .zf-head span{font-size:.74rem;color:#bfe0d6} .zf-close{-webkit-appearance:none;appearance:none;border:none;background:rgba(255,255,255,.14);color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.05rem;line-height:1;cursor:pointer;flex:none;transition:background .2s} .zf-close:hover{background:rgba(255,255,255,.28)} .zf-body{position:relative;width:100%;height:calc(100% - 58px);background:#fff} .zf-body iframe{display:block;width:100%;height:100%;border:none} .zf-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#5b6b66;font-size:.9rem} body.zf-lock{overflow:hidden} @media(max-width:520px){.zf-dialog{width:100vw;height:94vh;border-radius:14px}} /* ---- Courses mega: four flagships + 'Other courses' hover submenu ---- */ .nav-mega.mega-courses{ grid-template-columns:1fr; min-width:340px; } .mega-link.has-sub{ position:relative; cursor:default; } .mega-link.has-sub > b{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .mega-link .sub-caret{ opacity:.7; font-size:1.05rem; line-height:1; } .nav-submega{ position:absolute; top:-14px; left:calc(100% + 8px); background:#0a2a22; border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:12px; min-width:460px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateX(6px); transition:opacity .18s, transform .18s; z-index:96; display:grid; grid-template-columns:1fr 1fr; gap:4px; } .mega-link.has-sub:hover .nav-submega, .mega-link.has-sub:focus-within .nav-submega{ opacity:1; visibility:visible; transform:translateX(0); } @media (max-width:1100px){ .nav-submega{ position:static; opacity:1; visibility:visible; transform:none; min-width:0; box-shadow:none; border:0; border-top:1px solid rgba(255,255,255,.08); border-radius:0; padding:6px 0 0; margin-top:6px; grid-template-columns:1fr; } } /* screen-reader-only (accessible table captions etc.) */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ===== Homepage premium hero (centered, form removed) ===== */ .hero-home{ padding-block:clamp(66px,11vw,150px); text-align:center; } .hero-home .container{ display:block; } .hero-center{ max-width:940px; margin:0 auto; } .hero-home .kicker{ justify-content:center; margin:0 auto 4px; } .hero-home h1{ font-size:clamp(2.1rem,5.2vw,4rem); line-height:1.08; letter-spacing:-.02em; margin:6px auto 0; max-width:20ch; } .hero-home .lead{ margin:18px auto 0; max-width:62ch; } .hero-cta{ justify-content:center; margin-top:30px; flex-wrap:wrap; } .hero-link{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; color:var(--on-dark); font-weight:600; font-size:.92rem; text-decoration:underline; text-underline-offset:4px; opacity:.92; } .hero-link:hover{ color:#fff; } .hero-link .arr{ transition:transform .2s; } .hero-link:hover .arr{ transform:translateX(3px); } .hero-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:36px; } .hero-trust span{ display:inline-flex; align-items:center; gap:8px; color:var(--on-dark-mut); font-weight:600; font-size:.82rem; } .hero-trust .ht-dot{ width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); flex:none; } @media(max-width:640px){ .hero-cta{ flex-direction:column; align-items:stretch; } .hero-cta .btn{ width:100%; } .hero-trust{ gap:8px 14px; } } /* ===== Courses mega-menu: single wide horizontal panel (no off-frame flyout) ===== */ .nav-mega.mega-courses{ left:0; right:auto; transform:translateY(8px) !important; width:min(720px, calc(100vw - 32px)); min-width:0; max-width:none; grid-template-columns:1fr; gap:0; padding:18px 18px 14px; } .nav-item:hover > .nav-mega.mega-courses, .nav-item.open > .nav-mega.mega-courses, .nav-mega.mega-courses:hover{ transform:translateY(0) !important; left:0 !important; } .mega-courses .mega-head{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mint); font-weight:700; margin:2px 8px 8px; } .mega-courses .mega-flags{ display:grid; grid-template-columns:1fr 1fr; gap:4px; } .mega-courses .mega-specs{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px 6px; } .mega-courses .mega-sep{ height:1px; background:rgba(255,255,255,.12); margin:14px 6px; } .mega-courses .mega-all{ margin-top:8px; border-top:1px dashed rgba(255,255,255,.16); border-radius:0; padding:11px 10px 4px; } .mega-courses .mega-flags .mega-link b{ font-size:.88rem; } .mega-courses .mega-specs .mega-link{ padding:7px 10px; } .mega-courses .mega-specs .mega-link b{ font-size:.82rem; font-weight:500; } @media(max-width:820px){ .mega-courses .mega-specs{ grid-template-columns:1fr 1fr; } } /* ===== Dark CTA band: keep all text clearly visible ===== */ .cta-band .lead, .cta-band p{ color:rgba(255,255,255,.88) !important; text-shadow:0 1px 12px rgba(2,18,14,.25); } /* ===== Diploma curriculum: stacked stages with emphasis divider ===== */ .stage-head{ display:flex; align-items:center; gap:12px; margin:4px 0 18px; flex-wrap:wrap; } .stage-divider{ display:flex; align-items:center; gap:18px; margin:38px 0; } .stage-divider .sd-line{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); } .stage-divider .sd-note{ flex:0 1 600px; text-align:center; background:linear-gradient(180deg,#FFF9EC,#FFF2D8); border:1px solid #F2DCA6; border-radius:16px; padding:14px 20px; box-shadow:var(--shadow-sm); } .sd-note b{ display:block; color:#9A6B12; font-size:1rem; margin-bottom:3px; } .sd-note span{ font-size:.86rem; color:var(--muted); line-height:1.55; } @media(max-width:760px){ .stage-divider{ flex-direction:column; gap:12px; } .stage-divider .sd-line{ width:100%; } } /* ===== Floating action stack (Call + WhatsApp) ===== */ .fab-stack{ position:fixed; right:18px; bottom:18px; z-index:80; display:flex; flex-direction:column; gap:12px; } .fab{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 10px 26px rgba(6,32,26,.28); transition:transform .15s ease; position:relative; } .fab:hover{ transform:scale(1.08); } .fab svg{ width:28px; height:28px; } .fab-call{ background:var(--teal-700,#0F6E56); } .fab-wa{ background:#25D366; } .fab-tip{ position:absolute; right:68px; top:50%; transform:translateY(-50%); background:var(--ink,#06201A); color:#fff; font-size:.74rem; font-weight:600; padding:6px 10px; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease; } .fab:hover .fab-tip{ opacity:.96; } .sticky-cta.show ~ .fab-stack{ bottom:92px; } @media (max-width:640px){ .fab-stack{ right:14px; bottom:14px; gap:10px; } .fab{ width:52px; height:52px; } .fab-tip{ display:none; } } /* ===== Calculators ===== */ .calc-card{ background:var(--paper,#fff); border:1px solid var(--line,#E7DCC7); border-radius:var(--radius,16px); padding:24px; max-width:560px; margin:0 auto; box-shadow:0 12px 30px rgba(6,32,26,.06); } .calc-card label{ display:block; font-weight:600; color:var(--ink-text,#0A2A22); margin:12px 0 6px; font-size:.92rem; } .calc-card input, .calc-card select{ width:100%; padding:12px 14px; border:1px solid var(--line,#E7DCC7); border-radius:12px; font:inherit; background:#fff; color:var(--ink-text,#0A2A22); } .calc-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .calc-btn{ width:100%; margin-top:18px; } .calc-out{ margin-top:18px; padding:18px; border-radius:12px; background:var(--cream,#FBF7EF); border:1px solid var(--line,#E7DCC7); display:none; } .calc-out.show{ display:block; } .calc-out .big{ font-size:1.6rem; font-weight:800; color:var(--teal-800,#0C4B3E); } .calc-gate{ margin-top:16px; padding:16px; border-radius:12px; background:linear-gradient(135deg,var(--teal-800,#0C4B3E),var(--teal-600,#12886B)); color:#fff; } .calc-gate p{ color:rgba(255,255,255,.92); margin:0 0 4px; } .calc-disc{ font-size:.76rem; color:var(--body,#36433E); margin-top:12px; } @media (max-width:560px){ .calc-row{ grid-template-columns:1fr; } } /* ===== Compare programmes table ===== */ .cmp-wrap{ overflow-x:auto; } table.cmp-prog{ width:100%; border-collapse:collapse; min-width:680px; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 12px 30px rgba(6,32,26,.06); } table.cmp-prog th, table.cmp-prog td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line,#E7DCC7); font-size:.92rem; vertical-align:top; } table.cmp-prog thead th{ background:var(--teal-800,#0C4B3E); color:#fff; font-weight:700; } table.cmp-prog tbody th{ background:var(--cream,#FBF7EF); font-weight:700; color:var(--ink-text,#0A2A22); } /* ===== Generic page hero / prose / coming-soon ===== */ .page-hero{ background:linear-gradient(140deg,var(--teal-900,#0A3D33),var(--teal-700,#0F6E56)); color:var(--on-dark,#EAFBF4); padding:72px 0 56px; } .page-hero .kicker{ color:var(--gold-2,#FFD27A); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; } .page-hero h1{ color:#fff; margin:.3em 0; font-size:clamp(1.7rem,4vw,2.6rem); } .page-hero p{ color:rgba(255,255,255,.9); max-width:62ch; } .soon-chip{ display:inline-block; background:var(--gold,#F6B73C); color:var(--ink,#06201A); font-weight:700; font-size:.74rem; padding:5px 12px; border-radius:999px; margin-bottom:12px; } .prose-wrap{ max-width:820px; margin:0 auto; } .prose-wrap h2{ color:var(--teal-800,#0C4B3E); margin-top:1.6em; } .prose-wrap p, .prose-wrap li{ color:var(--body,#36433E); line-height:1.75; } .feat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:22px 0; } .feat-card{ background:#fff; border:1px solid var(--line,#E7DCC7); border-radius:14px; padding:20px; } .feat-card h3{ color:var(--teal-800,#0C4B3E); font-size:1.05rem; margin:0 0 6px; } .feat-card p{ font-size:.92rem; color:var(--body,#36433E); margin:0; } .faq-d{ background:#fff;border:1px solid var(--line,#E7DCC7);border-radius:12px;padding:14px 16px;margin:10px 0; } .faq-d summary{ font-weight:600;color:var(--ink-text,#0A2A22);cursor:pointer;list-style:none; } .faq-d summary::-webkit-details-marker{ display:none; } .faq-d[open] summary{ color:var(--teal-700,#0F6E56); } .faq-d p{ margin:.6em 0 0;color:var(--body,#36433E); } .compliance{ background:#FFF8E8;border:1px solid var(--gold-2,#FFD27A);border-radius:12px;padding:14px 16px;margin:18px 0;font-size:.9rem;color:var(--ink-text,#0A2A22); } a.feat-card{ text-decoration:none;color:inherit;display:block;transition:transform .15s ease, box-shadow .15s ease; } a.feat-card:hover{ transform:translateY(-3px);box-shadow:0 16px 34px rgba(6,32,26,.10); } /* ========================================================================= PART 1 OVERHAUL — glassmorphism, nav fit, mega overflow fix, footer, image slots, big certificate section ========================================================================= */ /* soft page backdrop so glass surfaces read */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(42vw 42vw at 10% 6%, rgba(47,227,166,.10), transparent 60%), radial-gradient(40vw 40vw at 90% 18%, rgba(246,183,60,.08), transparent 62%), radial-gradient(48vw 48vw at 72% 98%, rgba(15,110,86,.09), transparent 60%); } /* --- NAV: keep one line, tighten so all items fit --- */ .nav-menu{ gap:2px; } .nav-item > a, .nav-item > button{ white-space:nowrap; padding:10px 11px; font-size:.9rem; } header.nav{ background:rgba(8,34,28,.62); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid rgba(255,255,255,.12); } /* --- MEGA: frosted glass + never overshoot the screen --- */ .nav-mega{ background:rgba(10,42,34,.66); -webkit-backdrop-filter:blur(24px) saturate(150%); backdrop-filter:blur(24px) saturate(150%); border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 80px rgba(4,20,16,.5); max-width:min(620px,94vw); max-height:calc(100vh - 96px); overflow-y:auto; overscroll-behavior:contain; } /* courses mega: anchor to header, center in viewport, compact multi-column */ .nav-item.nav-courses{ position:static; } .nav-mega.mega-courses{ left:50%; right:auto; transform:translateX(-50%) translateY(8px); width:min(980px,94vw); max-width:min(980px,94vw); grid-template-columns:1fr; padding:18px 20px; } .nav-item.nav-courses:hover .mega-courses, .nav-item.nav-courses.open .mega-courses{ transform:translateX(-50%) translateY(0); } .mega-courses .mega-flags{ display:grid; grid-template-columns:1fr 1fr; gap:6px; } .mega-courses .mega-specs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; } .mega-head{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mint,#2FE3A6); font-weight:700; padding:12px 12px 4px; } .mega-sep{ height:1px; background:rgba(255,255,255,.10); margin:8px 6px; grid-column:1/-1; } .mega-all{ margin-top:8px; display:inline-block; } /* scrollbar polish inside mega */ .nav-mega::-webkit-scrollbar{ width:8px; } .nav-mega::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; } /* --- GLASS cards (unify the look across the site) --- */ .card,.usp-card,.course-card,.cert-card,.contact-card,.blog-card,.step,.bonus-card,.cur-block,.feat-card,.calc-card,.notice,.acc-item{ background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border:1px solid rgba(255,255,255,.7); box-shadow:0 10px 34px rgba(6,32,26,.08), inset 0 1px 0 rgba(255,255,255,.7); } a.feat-card:hover{ background:rgba(255,255,255,.74); } .calc-card{ background:rgba(255,255,255,.66); } /* --- FOOTER: proper 6-track grid, consistent + responsive --- */ .ft-grid{ grid-template-columns:1.7fr repeat(5,minmax(0,1fr)); gap:26px; } .ft-col a{ font-size:.88rem; } @media (max-width:1080px){ .ft-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } .ft-brand{ grid-column:1 / -1; } } @media (max-width:600px){ .ft-grid{ grid-template-columns:1fr 1fr; } .ft-brand{ grid-column:1 / -1; } } /* --- IMAGE PLACEHOLDERS (ample space; visuals added later) --- */ .img-slot{ position:relative; border:1.5px dashed rgba(12,75,62,.3); border-radius:18px; background:linear-gradient(135deg,rgba(47,227,166,.07),rgba(246,183,60,.06)); min-height:240px; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; color:var(--muted,#5C665F); overflow:hidden; } .img-slot::before{ content:"⊹"; font-size:1.5rem; opacity:.55; } .img-slot .lbl{ font-size:.82rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; } .img-slot.wide{ min-height:300px; } .img-slot.hero-slot{ min-height:320px; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); } .img-band{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:24px 0; } @media(max-width:760px){ .img-band{ grid-template-columns:1fr; } } /* --- BIG CERTIFICATE SECTION (two certificates per course) --- */ .cert-section{ background:linear-gradient(140deg,var(--teal-900,#0A3D33),var(--teal-700,#0F6E56)); color:var(--on-dark,#EAFBF4); border-radius:var(--radius-xl,32px); padding:clamp(28px,4vw,48px); margin:34px 0; box-shadow:0 24px 60px rgba(6,32,26,.18); } .cert-section h2{ color:#fff; margin-top:0; } .cert-section .cs-intro{ color:rgba(255,255,255,.9); max-width:60ch; } .cert-layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:stretch; margin-top:22px; } .cert-visual{ border:2px dashed rgba(255,255,255,.4); border-radius:18px; background:rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; gap:10px; min-height:340px; color:rgba(255,255,255,.8); } .cert-visual::before{ content:"❖"; font-size:1.6rem; opacity:.7; } .cert-visual .lbl{ font-size:.84rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .cert-cards{ display:grid; gap:14px; align-content:center; } .cert-c{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:16px; padding:18px 20px; } .cert-c .tag{ display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-2,#FFD27A); margin-bottom:6px; } .cert-c h3{ color:#fff; font-size:1.06rem; margin:0 0 6px; } .cert-c p{ color:rgba(255,255,255,.86); font-size:.9rem; margin:0; } @media(max-width:760px){ .cert-layout{ grid-template-columns:1fr; } .cert-visual{ min-height:240px; } } /* --- E-E-A-T trust strip --- */ .eeat{ display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; background:rgba(255,255,255,.6); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.7); border-radius:14px; padding:14px 18px; margin:18px 0; font-size:.86rem; color:var(--body,#36433E); } .eeat b{ color:var(--teal-800,#0C4B3E); } .author-note{ font-size:.86rem; color:var(--muted,#5C665F); border-left:3px solid var(--teal-600,#12886B); padding:4px 0 4px 14px; margin:16px 0; } /* CIDX-CARDS — courses index grid */ .cidx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:14px 0 26px} .cidx-card{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease} .cidx-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,61,51,.14)} .cidx-badge{display:inline-block;align-self:flex-start;font-size:11.5px;font-weight:600;color:var(--teal-800);background:rgba(47,227,166,.16);border:1px solid rgba(15,110,86,.18);padding:4px 10px;border-radius:999px} .cidx-card h3{margin:2px 0 0;font-size:17px;line-height:1.3;color:var(--teal-900)} .cidx-card p{margin:0;color:var(--body);font-size:13.5px;line-height:1.5} .cidx-meta{font-size:12px;color:var(--muted);margin-top:2px} .cidx-price{font-size:14px;color:var(--ink);margin-top:auto;padding-top:6px} .cidx-price s{color:var(--muted);font-weight:400;margin-left:4px} .cidx-price span{color:var(--muted)} .cidx-go{font-weight:600;color:var(--teal-700);font-size:13.5px;margin-top:2px} /* FEATURES-2026 — verify + course finder */ .verify-card{background:rgba(255,255,255,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:20px;padding:26px;max-width:560px} .verify-card label{display:block;font-weight:600;color:var(--teal-900);margin-bottom:6px} .verify-card input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;font-size:16px;letter-spacing:.5px;margin-bottom:12px;background:#fff} .verify-card input:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 3px rgba(47,227,166,.18)} .verify-out{margin-top:16px;padding:18px;border-radius:14px;border:1px solid var(--line);background:#fff} .verify-out.ok{border-color:rgba(15,110,86,.4);background:rgba(47,227,166,.08)} .verify-out.no{border-color:rgba(181,72,43,.35);background:rgba(181,72,43,.06)} .v-badge{display:inline-block;font-weight:700;color:#0F6E56;background:rgba(47,227,166,.18);border-radius:999px;padding:5px 14px;margin-bottom:12px} .v-badge.bad{color:#b5482b;background:rgba(181,72,43,.12)} .v-rows{display:grid;gap:8px}.v-rows>div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--line);padding-bottom:7px} .v-rows span{color:var(--muted);font-size:13.5px}.v-rows b{color:var(--ink);text-align:right} .v-note{margin-top:12px;color:var(--muted);font-size:13px} .quiz-card{background:rgba(255,255,255,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:20px;padding:24px;max-width:640px} .q-progress{height:7px;background:var(--line);border-radius:999px;overflow:hidden;margin-bottom:18px} .q-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal-600),var(--mint));transition:width .3s ease} .q-count{color:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px} .q-title{margin:6px 0 16px;color:var(--teal-900);font-size:20px} .q-opts{display:grid;gap:10px} .q-opt{text-align:left;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;transition:all .15s ease} .q-opt:hover{border-color:var(--teal-500);background:rgba(47,227,166,.06)} .q-opt.sel{border-color:var(--teal-600);background:rgba(47,227,166,.14);box-shadow:0 0 0 3px rgba(47,227,166,.14);font-weight:600} .q-nav{display:flex;justify-content:space-between;margin-top:20px} .quiz-result{max-width:760px} .rec-head{font-size:15px;color:var(--muted);margin:4px 0 12px}.rec-head b{color:var(--teal-700)} .rec-sub{margin:22px 0 12px;color:var(--teal-900)} .rec-alts{display:grid;grid-template-columns:1fr 1fr;gap:14px} .rec-card{display:block;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.7);text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s} .rec-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(10,61,51,.13)} .rec-card.rc-big{border:2px solid var(--teal-500);background:rgba(47,227,166,.06)} .rc-badge{display:inline-block;font-size:11.5px;font-weight:600;color:var(--teal-800);background:rgba(47,227,166,.16);border-radius:999px;padding:4px 10px;margin-bottom:8px} .rec-card h3{margin:2px 0 6px;color:var(--teal-900);font-size:18px}.rec-card p{margin:0 0 8px;color:var(--body);font-size:14px;line-height:1.5} .rc-meta{color:var(--muted);font-size:13px}.rc-price{margin-top:6px;font-weight:600;color:var(--ink)}.rc-price s{color:var(--muted);font-weight:400;margin-left:4px} .rc-go{display:inline-block;margin-top:8px;color:var(--teal-700);font-weight:600;font-size:14px} .syl-cta{margin-top:10px} @media(max-width:560px){.rec-alts{grid-template-columns:1fr}} /* ========================================================================= CONSISTENCY FIX (overrides PART 1 glassmorphism) - removes glass/translucency from nav, mega, cards, footer, eeat - styles BOTH
/