/* ========================================================================== AGILE VISA - SHARED COMPONENT SYSTEM ("go bolder" blue) Loaded in on global + SG + course pages so components render with no FOUC and work whether or not style.css is present. Anchor = brand blue #2168A0. All classes are namespaced .av-* and add NEW components; they do not override existing site styles. ========================================================================== */ :root { --av-blue: #2168A0; /* anchor */ --av-blue-bright: #2f8fd8; /* brighter highlight */ --av-blue-deep: #163a5c; /* navy */ --av-violet: #5b4bd6; /* bold accent for gradients only */ --av-ink: #163a5c; --av-slate: #42566b; --av-muted: #64748b; --av-green: #2f7d33; /* funding / free / success */ --av-gold: #c2790a; /* ratings */ --av-coral: #ca4e59; --av-soft: #eef4fb; --av-soft2: #f5f8fc; --av-line: rgba(15, 30, 61, 0.10); --av-grad-brand: linear-gradient(135deg, #163a5c 0%, #2168A0 55%, #2f8fd8 100%); --av-grad-violet: linear-gradient(135deg, #2168A0 0%, #3457b6 55%, #5b4bd6 100%); --av-grad-dark: linear-gradient(165deg, #0b1f30 0%, #122d44 50%, #163a5c 100%); --av-shadow-sm: 0 4px 14px rgba(15, 30, 61, 0.06); --av-shadow-md: 0 14px 34px rgba(15, 30, 61, 0.12); --av-inner: 1320px; } /* ---- Full-bleed bands + inner content width ---------------------------- */ .av-band { width: 100%; padding: 72px 0; position: relative; } .av-band--tight { padding: 48px 0; } .av-band--white { background: #ffffff; } .av-band--soft { background: var(--av-soft); } .av-band--soft2 { background: var(--av-soft2); } .av-band--brand { background: var(--av-grad-brand); color: #fff; } .av-band--violet { background: var(--av-grad-violet); color: #fff; } .av-band--dark { background: var(--av-grad-dark); color: #fff; } .av-band--brand .av-eyebrow, .av-band--violet .av-eyebrow, .av-band--dark .av-eyebrow { color: #9fd0f5; } .av-inner { max-width: var(--av-inner); margin: 0 auto; padding: 0 24px; } .av-inner--narrow { max-width: 920px; } /* ---- Eyebrow + section headings --------------------------------------- */ .av-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--av-blue); margin-bottom: 12px; } .av-h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.12; color: inherit; margin: 0 0 14px; letter-spacing: -0.5px; } .av-band--white .av-h2, .av-band--soft .av-h2, .av-band--soft2 .av-h2 { color: var(--av-ink); } .av-lead { font-size: 1.08rem; line-height: 1.6; color: var(--av-slate); max-width: 760px; } .av-band--brand .av-lead, .av-band--violet .av-lead, .av-band--dark .av-lead { color: rgba(255,255,255,0.92); } /* ---- Stat strip -------------------------------------------------------- */ .av-statstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; background: #fff; border: 1px solid var(--av-line); border-radius: 16px; box-shadow: var(--av-shadow-sm); overflow: hidden; } .av-stat { padding: 22px 20px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--av-line); } .av-stat:last-child { border-right: none; } .av-stat__n { font-size: 1.5rem; font-weight: 900; color: var(--av-blue); line-height: 1.1; letter-spacing: -0.5px; } .av-stat__l { font-size: 0.82rem; color: var(--av-slate); font-weight: 600; } .av-stat__s { font-size: 0.72rem; color: var(--av-muted); } @media (max-width: 640px) { .av-stat { border-right: none; border-bottom: 1px solid var(--av-line); } .av-stat:last-child { border-bottom: none; } } /* ---- Badges (credential / merch / new / agentic / level) -------------- */ .av-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 30px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.4px; line-height: 1; white-space: nowrap; } .av-badge--cred { background: var(--av-soft); color: var(--av-blue); border: 1px solid rgba(33,104,160,0.25); } .av-badge--merch { background: #fff5e6; color: var(--av-gold); border: 1px solid rgba(194,121,10,0.25); } .av-badge--new { background: #fdecee; color: var(--av-coral); border: 1px solid rgba(202,78,89,0.25); } .av-badge--green { background: #e8f5e9; color: var(--av-green); border: 1px solid rgba(47,125,51,0.25); } .av-badge--agentic { background: var(--av-grad-violet); color: #fff; box-shadow: 0 4px 12px rgba(91,75,214,0.3); } .av-badge--level { background: #eef2f7; color: var(--av-slate); border: 1px solid var(--av-line); } .av-badge-row { display: flex; flex-wrap: wrap; gap: 8px; } /* ---- Cards ------------------------------------------------------------- */ .av-card { background: #fff; border: 1px solid var(--av-line); border-radius: 16px; padding: 28px; box-shadow: var(--av-shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .av-card:hover, .av-hover-lift:hover { transform: translateY(-4px); border-color: var(--av-blue); box-shadow: var(--av-shadow-md); } .av-card--grad { background: var(--av-grad-violet); color: #fff; border: none; } .av-card--grad .av-card__meta { color: rgba(255,255,255,0.85); } .av-card__icon { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--av-soft); color: var(--av-blue); margin-bottom: 14px; } .av-card h3 { font-size: 1.12rem; font-weight: 800; color: var(--av-ink); margin: 0 0 8px; } .av-card p { font-size: 0.95rem; line-height: 1.55; color: var(--av-slate); margin: 0; } /* ---- Price ladder (before/after) -------------------------------------- */ .av-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; } .av-price__full { font-size: 1.05rem; color: #94a3b8; text-decoration: line-through; } .av-price__now { font-size: 2.1rem; font-weight: 900; color: var(--av-ink); letter-spacing: -1px; } .av-price__save { background: #e8f5e9; color: var(--av-green); font-weight: 800; font-size: 0.82rem; padding: 5px 12px; border-radius: 30px; } .av-price__note { font-size: 0.8rem; color: var(--av-muted); margin-top: 6px; } /* ---- Arrow links + buttons -------------------------------------------- */ .av-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--av-blue); font-weight: 700; text-decoration: none; transition: gap 0.2s ease, color 0.2s ease; } .av-arrow:hover { gap: 11px; color: var(--av-blue-bright); } .av-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 10px; font-weight: 800; font-size: 0.98rem; text-decoration: none; cursor: pointer; border: none; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .av-btn--primary { background: var(--av-blue); color: #fff; box-shadow: 0 8px 20px rgba(33,104,160,0.28); } .av-btn--primary:hover { transform: translateY(-2px); background: #1d5b8e; box-shadow: 0 12px 26px rgba(33,104,160,0.38); } .av-btn--ghost { background: transparent; color: var(--av-blue); border: 1.5px solid var(--av-blue); } .av-btn--ghost:hover { background: var(--av-soft); } .av-btn--white { background: #fff; color: var(--av-blue); } .av-btn--sub { display: block; font-size: 0.72rem; font-weight: 600; opacity: 0.85; margin-top: 2px; } /* ---- Sticky in-page scrollspy tabs ------------------------------------ */ .av-tabs { position: sticky; top: 126px; z-index: 50; background: rgba(255,255,255,0.97); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--av-line); box-shadow: 0 4px 14px rgba(15,30,61,0.05); } .av-tabs-inner { max-width: var(--av-inner); margin: 0 auto; padding: 0 24px; display: flex; gap: 6px; overflow-x: auto; } .av-tabs a { padding: 15px 16px; font-size: 0.86rem; font-weight: 700; color: var(--av-slate); text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; transition: 0.2s; } .av-tabs a:hover, .av-tabs a.active { color: var(--av-blue); border-bottom-color: var(--av-blue); } /* ---- Scarcity chip ----------------------------------------------------- */ .av-scarcity { display: inline-flex; align-items: center; gap: 5px; font-size: 0.76rem; font-weight: 800; color: var(--av-coral); } .av-scarcity::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--av-coral); box-shadow: 0 0 0 0 rgba(202,78,89,0.6); animation: avBlink 1.8s infinite; } @keyframes avBlink { 0% { box-shadow: 0 0 0 0 rgba(202,78,89,0.6); } 70% { box-shadow: 0 0 0 7px rgba(202,78,89,0); } 100% { box-shadow: 0 0 0 0 rgba(202,78,89,0); } } /* ---- Logo wall --------------------------------------------------------- */ .av-logowall { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px; align-items: center; } .av-logowall span { text-align: center; font-weight: 800; color: var(--av-muted); font-size: 0.95rem; opacity: 0.8; } /* ---- Funding coins row (subsidy visual) ------------------------------- */ .av-coins { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .av-coin { width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(33,104,160,0.25); background: radial-gradient(circle at 50% 35%, #fff, var(--av-soft)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; } .av-coin b { font-size: 1.2rem; color: var(--av-blue); line-height: 1; } .av-coin span { font-size: 0.6rem; color: var(--av-slate); font-weight: 700; margin-top: 3px; } .av-coin-plus { color: var(--av-muted); font-weight: 900; font-size: 1.2rem; } /* ---- Section divider spacing helpers ---------------------------------- */ .av-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; } .av-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; } .av-mt-s { margin-top: 18px; } .av-mt-m { margin-top: 30px; } .av-center { text-align: center; } /* ---- Learner Stories video testimonials band ------------------------- */ .lstory { --ls-blue:#2168A0; --ls-navy:#163a5c; --ls-slate:#42566b; --ls-soft:#eef4fb; --ls-softer:#f5f8fc; --ls-radius:16px; --ls-shadow:0 6px 18px rgba(22,58,92,.08); --ls-lift:0 16px 38px rgba(22,58,92,.16); width:100%; background:linear-gradient(180deg,var(--ls-softer),var(--ls-soft)); padding:clamp(48px,7vw,82px) 20px; box-sizing:border-box; color:var(--ls-slate); } .lstory *, .lstory *::before, .lstory *::after { box-sizing:border-box; } .lstory-inner { max-width:1200px; margin:0 auto; } .lstory-head { text-align:center; max-width:720px; margin:0 auto clamp(30px,4vw,48px); } .lstory-eyebrow { margin:0 0 10px; font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ls-blue); } .lstory-title { margin:0 0 12px; font-family:'Playfair Display',serif; font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.12; font-weight:800; color:var(--ls-navy); } .lstory-sub { margin:0; font-size:clamp(1rem,1.6vw,1.1rem); line-height:1.6; color:var(--ls-slate); } .lstory-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(20px,3vw,30px); align-items:start; } .lstory-thumb { position:relative; display:block; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:var(--ls-radius) var(--ls-radius) 0 0; background:var(--ls-navy); } .lstory-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; } .lstory-thumb::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,58,92,0) 55%,rgba(22,58,92,.42) 100%); pointer-events:none; } .lstory-play { position:absolute; inset:0; margin:auto; width:72px; height:50px; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:2; } .lstory-play svg { width:100%; height:100%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); } .lstory-play-bg { fill:#1f1f1f; opacity:.82; transition:fill .25s ease,opacity .25s ease; } .lstory-play--sm { width:52px; height:36px; } .lstory-feature { display:block; text-decoration:none; color:inherit; background:#fff; border-radius:var(--ls-radius); box-shadow:var(--ls-shadow); overflow:hidden; transition:transform .3s ease,box-shadow .3s ease; } .lstory-feature-cap { display:block; padding:18px 20px 20px; } .lstory-feature-name { display:block; font-size:.76rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ls-blue); margin-bottom:6px; } .lstory-feature-line { display:block; font-size:1.08rem; font-weight:700; color:var(--ls-navy); line-height:1.4; } .lstory-feature:hover, .lstory-feature:focus-visible { transform:translateY(-4px); box-shadow:var(--ls-lift); } .lstory-feature:hover .lstory-img { transform:scale(1.04); } .lstory-feature:hover .lstory-play-bg { fill:var(--ls-blue); opacity:1; } .lstory-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(13px,2vw,18px); } .lstory-card { display:block; text-decoration:none; color:inherit; background:#fff; border-radius:var(--ls-radius); box-shadow:var(--ls-shadow); overflow:hidden; transition:transform .3s ease,box-shadow .3s ease; height:100%; } .lstory-card-body { display:block; padding:12px 14px 15px; } .lstory-card-title { display:block; font-size:.92rem; font-weight:800; color:var(--ls-navy); line-height:1.3; margin-bottom:3px; } .lstory-card-meta { display:block; font-size:.8rem; color:var(--ls-slate); } .lstory-card:hover, .lstory-card:focus-visible { transform:translateY(-4px); box-shadow:var(--ls-lift); } .lstory-card:hover .lstory-img { transform:scale(1.05); } .lstory-card:hover .lstory-play-bg { fill:var(--ls-blue); opacity:1; } .lstory-cta { text-align:center; margin-top:clamp(32px,4.5vw,48px); } .lstory-btn { display:inline-flex; align-items:center; gap:10px; background:var(--ls-blue); color:#fff; text-decoration:none; font-size:1rem; font-weight:800; padding:14px 26px; border-radius:999px; box-shadow:0 8px 20px rgba(33,104,160,.28); transition:background .25s ease,transform .25s ease,box-shadow .25s ease; } .lstory-btn svg { width:18px; height:18px; transition:transform .25s ease; } .lstory-btn:hover { background:var(--ls-navy); transform:translateY(-2px); } .lstory-btn:hover svg { transform:translateX(4px); } .lstory-feature:focus-visible, .lstory-card:focus-visible, .lstory-btn:focus-visible { outline:3px solid var(--ls-blue); outline-offset:3px; } @media (max-width:860px){ .lstory-layout { grid-template-columns:1fr; } } @media (max-width:560px){ .lstory-grid { grid-template-columns:1fr; } } @media (prefers-reduced-motion: reduce){ .lstory-feature,.lstory-card,.lstory-img,.lstory-btn,.lstory-play-bg{transition:none;} .lstory-feature:hover .lstory-img,.lstory-card:hover .lstory-img{transform:none;} } /* A11y (WCAG 2.3.3): honour reduced-motion. Stills the infinite decorative animations site-wide (trust marquee, WhatsApp pulse + bob, gatekeeper live dot, topbar sheen) without removing final visual states. Standard safe reset. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* In-page video lightbox (keeps the visitor on site) */ .lstory-modal { position:fixed; inset:0; z-index:10050; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(11,31,48,.9); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .lstory-modal.open { display:flex; } .lstory-modal-box { width:100%; max-width:980px; aspect-ratio:16/9; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.55); background:#000; } .lstory-modal-frame, .lstory-modal-frame iframe { width:100%; height:100%; border:0; display:block; } .lstory-modal-close { position:absolute; top:18px; right:24px; width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,.16); color:#fff; font-size:1.9rem; line-height:1; cursor:pointer; transition:background .2s ease; } .lstory-modal-close:hover { background:rgba(255,255,255,.3); }