/* ========================================================================= 96Astro marketing funnel — standalone stylesheet. Deliberately build-free: the hub's Tailwind output is compiled and committed, so the funnel ships its own plain CSS instead of adding utilities that would need `npm run build:css`. Everything is driven by the custom properties below. ========================================================================= */ .fn { --void: #05041a; --void-2: #0b0925; --panel: #0d0a2b; --panel-2: #12103a; --line: #241b57; --line-2: #332a6e; --ink: #e8e6f5; --ink-2: #cfc9ec; --ink-3: #9a90c8; --ink-4: #7d73ad; --brand: #e8163b; --brand-2: #6d5cf0; --gold: #f5c542; --violet: #8b7bff; --grad: linear-gradient(90deg, #e8163b, #6d5cf0, #f5c542); --grad-word: linear-gradient(100deg, #7c5cf0, #e0459b); --grad-cta: linear-gradient(90deg, #e8163b, #4b3bc7); --radius: 18px; --maxw: 1180px; /* Devanagari faces sit after the Latin ones in each stack, so Hindi taglines get real glyphs instead of tofu without needing their own class. */ --font-sans: 'Manrope', 'Mukta', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; --font-display: 'Fraunces', 'Rozha One', Georgia, 'Times New Roman', serif; background: var(--void); color: var(--ink); font-family: var(--font-sans); line-height: 1.6; overflow-x: hidden; } /* Display face for every headline. */ .fn .fn-h2, .fn .fn-hero__title, .fn .fn-card__title, .fn .fn-mod__title, .fn .fn-count__n, .fn .fn-timerbar__cell b { font-family: var(--font-display); letter-spacing: -.005em; } .fn *, .fn *::before, .fn *::after { box-sizing: border-box; } .fn img { max-width: 100%; display: block; } .fn a { color: inherit; text-decoration: none; } /* Starfield backdrop — one fixed layer behind everything. */ .fn-stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.8), transparent), radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.6), transparent), radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.5), transparent), radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 12% 80%, rgba(255,255,255,.5), transparent), radial-gradient(2px 2px at 55% 45%, rgba(139,123,255,.5), transparent), radial-gradient(1px 1px at 95% 88%, rgba(255,255,255,.6), transparent); background-repeat: repeat; background-size: 800px 800px; opacity: .55; animation: fn-drift 240s linear infinite; } @keyframes fn-drift { to { background-position: 800px 800px; } } .fn-wrap { position: relative; z-index: 1; } .fn-container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ── Smooth scrolling ──────────────────────────────────────────────────── */ /* On , the scrolling element — so it covers hash links the browser handles itself, the JS anchor handler, and back/forward restoration alike. */ .fn-html { scroll-behavior: smooth; } /* The navbar is sticky and 92px tall (74px below 860px), so an anchor landing flush at the top would sit underneath it. */ /* .fn-formcard carries id="register": the anchor sits on the form, not on its section, so it needs the same offset or it lands under the navbar. */ .fn-html :target, .fn-html section[id], .fn-html .fn-formcard[id], .fn-html [id^="fn-"] { scroll-margin-top: 108px; } @media (max-width: 860px) { .fn-html section[id], .fn-html .fn-formcard[id], .fn-html :target { scroll-margin-top: 90px; } } @media (prefers-reduced-motion: reduce) { .fn-html { scroll-behavior: auto; } } /* ── Sections ──────────────────────────────────────────────────────────── */ .fn-section { padding: 72px 0; position: relative; } .fn-section--tight { padding: 44px 0; } .fn-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--violet); margin-bottom: 12px; } .fn-h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.2; margin: 0 0 14px; color: #fff; } .fn-lead { font-size: 1.02rem; color: var(--ink-2); max-width: 62ch; margin: 0 0 8px; } .fn-center { text-align: center; } .fn-center .fn-lead { margin-left: auto; margin-right: auto; } /* Accent word in a heading — violet into pink, per the design. (The three-stop --grad stays for borders and rules, where the gold stop reads.) */ .fn-grad-text { background: var(--grad-word); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Italic display words. The slant overhangs the inline box, which background-clip:text would shear off, so reserve a sliver on the right. */ .fn-ital { font-style: italic; padding-right: .08em; } /* Outlined status pill above a section heading. */ .fn-pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 20px; margin-bottom: 16px; border-radius: 999px; border: 1px solid rgba(232, 22, 59, .45); background: rgba(232, 22, 59, .07); font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #ff6b81; } .fn-pill__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--brand); box-shadow: 0 0 0 0 rgba(232, 22, 59, .7); animation: fn-ping 1.8s ease-out infinite; } /* Row of format facts under a heading. */ .fn-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; } .fn-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); font-size: .92rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; } /* ── Buttons ───────────────────────────────────────────────────────────── */ .fn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 26px; border-radius: 999px; border: 0; font-size: 1rem; font-weight: 700; cursor: pointer; background: var(--grad-cta); color: #fff; box-shadow: 0 12px 30px -14px rgba(232, 22, 59, .8); transition: transform .18s ease, filter .18s ease; } .fn-btn:hover { transform: translateY(-2px); filter: brightness(1.08); } .fn-btn--ghost { background: transparent; border: 1px solid var(--line-2); color: var(--ink); box-shadow: none; } .fn-btn--ghost:hover { background: rgba(255,255,255,.05); } .fn-btn--block { width: 100%; } /* ── Top marquee ───────────────────────────────────────────────────────── */ .fn-marq { position: relative; z-index: 41; background: linear-gradient(90deg, rgba(232,22,59,.22), rgba(109,92,240,.22), rgba(245,197,66,.18)); border-bottom: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .fn-marq__track { display: flex; width: max-content; animation: fn-scroll 55s linear infinite; } .fn-marq:hover .fn-marq__track { animation-play-state: paused; } .fn-marq__item { display: flex; align-items: center; gap: 10px; padding: 7px 28px; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255, 255, 255, .9); white-space: nowrap; } .fn-marq__item:hover { color: #fff; } .fn-marq__star { color: var(--gold); font-size: .85rem; } .fn-marq .hl { color: var(--gold); } /* ── Navbar ────────────────────────────────────────────────────────────── */ .fn-nav { position: sticky; top: 0; z-index: 40; background: rgba(5, 4, 26, .82); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } /* Three tracks so the links sit dead-centre regardless of how wide the brand or the CTA happen to be. */ .fn-nav__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; min-height: 92px; } .fn-nav__brand { justify-self: start; display: inline-flex; } .fn-nav__logo { display: grid; place-items: center; width: 74px; height: 74px; padding: 8px; background: #fff; border-radius: 16px; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6); } .fn-nav__logo img { width: 100%; height: 100%; object-fit: contain; } .fn-nav__links { display: flex; gap: 30px; justify-self: center; } .fn-nav__links a { color: var(--ink-2); font-size: .97rem; font-weight: 600; } .fn-nav__links a:hover { color: #fff; } .fn-nav__cta { justify-self: end; padding: 13px 26px; font-size: .97rem; } .fn-nav__gst { font-size: .68em; font-weight: 700; opacity: .8; margin-left: -.3em; white-space: nowrap; } /* Hamburger + drawer — desktop-only by default. */ .fn-nav__burger { display: none; margin-left: 10px; padding: 8px 6px; background: none; border: 0; cursor: pointer; } .fn-nav__burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); margin: 4px 0; transition: transform .2s ease, opacity .2s ease; } .fn-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .fn-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .fn-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .fn-nav__drawer { display: none; flex-direction: column; gap: 4px; padding: 14px 20px 18px; background: rgba(5, 4, 26, .98); border-top: 1px solid var(--line); } .fn-nav__drawer[hidden] { display: none; } .fn-nav__drawer a { padding: 11px 2px; color: var(--ink-2); font-weight: 600; } .fn-nav__drawer a.fn-btn { color: #fff; margin-top: 8px; } @media (max-width: 860px) { /* Brand left, burger right — the centre track collapses away. */ .fn-nav__in { grid-template-columns: 1fr auto; min-height: 74px; } .fn-nav__links { display: none; } .fn-nav__cta { display: none; } .fn-nav__logo { width: 58px; height: 58px; border-radius: 13px; padding: 6px; } .fn-nav__burger { display: block; justify-self: end; } .fn-nav__drawer:not([hidden]) { display: flex; } } /* ── Hero ──────────────────────────────────────────────────────────────── */ .fn-hero { position: relative; padding: 70px 0 60px; overflow: hidden; } .fn-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; } .fn-hero__badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(109, 92, 240, .12); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } /* Pulsing live dot — drawn, so the CMS badge text stays plain text. */ .fn-hero__badge::before { content: ''; width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; background: var(--brand); box-shadow: 0 0 0 0 rgba(232, 22, 59, .7); animation: fn-ping 1.8s ease-out infinite; } .fn-hero__title { font-size: clamp(2rem, 5.4vw, 3.6rem); font-weight: 800; line-height: 1.08; margin: 0 0 16px; color: #fff; letter-spacing: -.01em; } .fn-hero__title span { display: block; } /* Mukta carries the Devanagari; Fraunces has no glyphs for it. */ .fn .fn-hero__title { font-family: 'Fraunces', 'Mukta', Georgia, serif; line-height: 1.14; } .fn-hero__desc { font-size: 1.05rem; color: var(--ink-2); margin: 0 0 12px; max-width: 56ch; } .fn-hero__tagline { margin: 0 0 26px; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; font-weight: 700; color: var(--gold); } .fn-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .fn-hero__media { position: relative; } .fn-hero__media img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 30px 80px -40px rgba(109, 92, 240, .8); } /* Slides cross-fade; only the active one is in flow. */ .fn-slide { display: none; } /* No `both` fill: the slide's resting state must be visible, so a throttled or interrupted animation can never leave the hero stuck half-faded. */ .fn-slide.is-active { display: block; animation: fn-fade .5s ease; } @keyframes fn-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .fn-hero__dots { display: flex; gap: 8px; margin-top: 26px; } .fn-hero__dots button { width: 26px; height: 4px; border-radius: 999px; border: 0; cursor: pointer; background: var(--line-2); padding: 0; } .fn-hero__dots button[aria-current="true"] { background: var(--grad); } @media (max-width: 900px) { /* The two-column layout needed breathing room above it; stacked under a sticky navbar it just pushes the headline off the first screen. */ .fn-hero { padding: 26px 0 44px; } /* Headline and CTA first, poster after: the pitch should land before the image on a phone, not below a screenful of it. */ .fn-hero__grid { grid-template-columns: 1fr; gap: 28px; text-align: center; } /* The lead has a max-width, so centring the text is not enough on its own. */ .fn-hero__desc { margin-left: auto; margin-right: auto; } .fn-hero__actions { justify-content: center; } } /* ── Countdown ─────────────────────────────────────────────────────────── */ .fn-count { display: flex; gap: 10px; margin: 22px 0 0; } .fn-count__cell { min-width: 62px; padding: 10px 8px; text-align: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; } .fn-count__n { font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1; } .fn-count__l { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-top: 5px; } /* ── Trust strip ───────────────────────────────────────────────────────── */ .fn-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--void-2); } .fn-trust__in { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; padding: 18px 0; } .fn-trust__item { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--ink-2); font-weight: 600; } /* ── Cards ─────────────────────────────────────────────────────────────── */ .fn-grid { display: grid; gap: 18px; } .fn-grid--2 { grid-template-columns: repeat(2, 1fr); } .fn-grid--3 { grid-template-columns: repeat(3, 1fr); } .fn-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .fn-grid--3, .fn-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .fn-grid--2, .fn-grid--3, .fn-grid--4 { grid-template-columns: 1fr; } } .fn-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: transform .2s ease, border-color .2s ease; } .fn-card:hover { transform: translateY(-3px); border-color: var(--line-2); } /* Icon tile — a tinted rounded square behind the glyph, as in the design. Each card in a grid gets a different tint so a row reads as a set. */ .fn-card__glyph { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 1.35rem; line-height: 1; margin-bottom: 14px; background: rgba(139, 123, 255, .14); border: 1px solid rgba(139, 123, 255, .22); } .fn-grid > *:nth-child(4n+1) .fn-card__glyph { background: rgba(232, 22, 59, .14); border-color: rgba(232, 22, 59, .26); } .fn-grid > *:nth-child(4n+2) .fn-card__glyph { background: rgba(77, 124, 255, .14); border-color: rgba(77, 124, 255, .26); } .fn-grid > *:nth-child(4n+3) .fn-card__glyph { background: rgba(245, 197, 66, .14); border-color: rgba(245, 197, 66, .28); } .fn-grid > *:nth-child(4n+4) .fn-card__glyph { background: rgba(53, 208, 127, .14); border-color: rgba(53, 208, 127, .26); } .fn-card__title { font-size: 1.06rem; font-weight: 700; color: #fff; margin: 0 0 7px; } .fn-card__text { font-size: .93rem; color: var(--ink-3); margin: 0; } /* ── Modules (10-day curriculum) ───────────────────────────────────────── */ .fn-mod { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); } .fn-mod:last-child { border-bottom: 0; } .fn-mod__day { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-cta); } .fn-mod__title { font-weight: 700; color: #fff; margin: 0 0 3px; } .fn-mod__detail { font-size: .9rem; color: var(--ink-3); margin: 0; } /* ── Checklists ────────────────────────────────────────────────────────── */ .fn-list { list-style: none; margin: 0; padding: 0; } .fn-list li { position: relative; padding: 9px 0 9px 30px; font-size: .96rem; color: var(--ink-2); border-bottom: 1px solid rgba(36, 27, 87, .55); } .fn-list li:last-child { border-bottom: 0; } .fn-list li::before { content: '✓'; position: absolute; left: 0; top: 9px; color: #35d07f; font-weight: 800; } /* ── Mentor ────────────────────────────────────────────────────────────── */ /* No padding: the portrait runs to the card edge, so the card clips instead of framing. A gradient hairline across the top, as in the design. */ .fn-mentorcard { position: relative; overflow: hidden; margin-top: 34px; border-radius: 22px; box-shadow: 0 40px 110px -50px rgba(109, 92, 240, .9); background: linear-gradient(135deg, rgba(109, 92, 240, .10), rgba(232, 22, 59, .07)), var(--panel); border: 1px solid var(--line-2); } .fn-mentorcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 2; background: linear-gradient(90deg, #f5c542, #f0a63c 25%, #e8163b 55%, #c13fe0 80%, #6d5cf0); } .fn-mentor { display: grid; grid-template-columns: 380px 1fr; gap: 0; align-items: stretch; } /* The portrait bleeds to the card edge rather than floating inside padding. */ .fn-mentor__photo { position: relative; overflow: hidden; } .fn-mentor__photo img { display: block; width: 100%; height: 132%; object-fit: cover; object-position: top center; } .fn-mentor__badges { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; } .fn-mentor__badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: .82rem; font-weight: 600; color: #fff; background: rgba(5, 4, 26, .72); border: 1px solid var(--line-2); backdrop-filter: blur(6px); } .fn-mentor__body { padding: 34px 38px; min-width: 0; } .fn-mentor__name { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; color: #fff; } .fn-mentor__role { margin: 6px 0 0; font-size: .97rem; font-weight: 600; color: var(--gold); } .fn-mentor__rule { width: 72px; height: 0; margin: 18px 0 20px; border: 0; border-top: 2px solid rgba(245, 197, 66, .5); } .fn-mentor__bio { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--ink-2); } .fn-mentor__bio strong { color: #fff; } /* Pulled quote, opened with a display-face quote mark. */ .fn-mentor__quote { position: relative; margin: 24px 0 0; padding-left: 30px; font-family: var(--font-display); font-style: italic; font-size: 1.08rem; line-height: 1.6; color: #fff; } .fn-mentor__quote::before { content: "\201C"; position: absolute; left: 0; top: -6px; font-size: 2.4rem; line-height: 1; color: var(--violet); opacity: .7; } /* Boxed consultation offer, edged in gold so it reads as the one action here. */ .fn-consult { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; padding: 22px 24px; border-radius: 16px; background: rgba(245, 197, 66, .05); border: 1px solid rgba(245, 197, 66, .38); } .fn-consult > div { flex: 1; min-width: 240px; } .fn-consult__title { margin: 0 0 5px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--gold); } .fn-consult__text { margin: 0; font-size: .94rem; line-height: 1.55; color: var(--ink-2); } .fn-consult__cta { flex: 0 0 auto; } @media (max-width: 860px) { .fn-mentor { grid-template-columns: 1fr; } .fn-mentor__photo { max-height: 420px; } .fn-mentor__body { padding: 26px 22px; } .fn-mentorcard { padding: 0; } } /* Credential chips under the biography. */ .fn-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .fn-stat { padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); } .fn-stat b { display: block; font-size: 1.15rem; color: var(--gold); line-height: 1.1; } .fn-stat span { font-size: .68rem; color: var(--ink-4); } /* ── Certificate ───────────────────────────────────────────────────────── */ /* ── Testimonials (marquee) ────────────────────────────────────────────── */ .fn-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .fn-marquee__track { display: flex; gap: 26px; width: max-content; animation: fn-scroll 62s linear infinite; } .fn-marquee:hover .fn-marquee__track { animation-play-state: paused; } @keyframes fn-scroll { to { transform: translateX(-50%); } } /* .fn-person is defined with the rated-card styles above. */ /* ── FAQ ───────────────────────────────────────────────────────────────── */ /* Separated cards, not one bordered stack. */ .fn-faq { max-width: 880px; margin: 34px auto 0; display: grid; gap: 14px; } .fn-faq__item { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .2s ease; } .fn-faq__item.is-open { border-color: var(--line-2); background: var(--panel-2); } .fn-faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 18px 22px; font-size: 1rem; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: inherit; } /* One "+" glyph rotated 45° when open, so it becomes an "×" and the change animates without swapping elements. */ .fn-faq__sign { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px; background: rgba(109, 92, 240, .18); color: var(--violet); transition: transform .25s ease, background .2s ease; } .fn-faq__sign svg { width: 16px; height: 16px; } .fn-faq__q[aria-expanded="true"] .fn-faq__sign { transform: rotate(45deg); background: rgba(109, 92, 240, .3); } .fn-faq__a { padding: 0 24px 20px; color: var(--ink-2); font-size: .96rem; line-height: 1.65; display: none; } .fn-faq__item.is-open .fn-faq__a { display: block; } /* ── Register form ─────────────────────────────────────────────────────── */ /* No band of its own: the register section sits on the same ground as every other section, so the page reads as one surface. */ .fn-register { background: transparent; } .fn-form-card { max-width: 620px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; } .fn-field { margin-bottom: 15px; } .fn-field label { display: block; font-size: .8rem; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; } .fn-input { width: 100%; padding: 13px 15px; font-size: .97rem; font-family: inherit; color: var(--ink); background: rgba(255,255,255,.04); border: 1px solid var(--line-2); border-radius: 12px; } .fn-input:focus { outline: 2px solid var(--violet); outline-offset: -1px; } .fn-input::placeholder { color: var(--ink-4); } select.fn-input option { background: var(--void); color: #fff; } .fn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 560px) { .fn-row { grid-template-columns: 1fr; } } .fn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .fn-note { font-size: .78rem; color: var(--ink-4); margin-top: 12px; text-align: center; } /* Exact amount under the CTA, since the button itself only says "+ GST". */ .fn-payline { margin: 10px 0 0; font-size: .82rem; color: var(--ink-3); text-align: center; } .fn-payline b { color: #fff; } .fn-alert { padding: 13px 16px; border-radius: 12px; font-size: .92rem; margin-bottom: 16px; display: none; } .fn-alert.is-on { display: block; } .fn-alert--ok { background: rgba(53, 208, 127, .12); border: 1px solid rgba(53, 208, 127, .4); color: #7ee2ab; } .fn-alert--bad { background: rgba(255, 107, 129, .12); border: 1px solid rgba(255, 107, 129, .4); color: #ff9aab; } /* ── Reserve Your Seat: steps beside the form ──────────────────────────── */ .fn-reg { display: grid; grid-template-columns: 1fr 1.05fr; gap: 22px; margin-top: 28px; } @media (max-width: 900px) { .fn-reg { grid-template-columns: 1fr; } } /* Light card — deliberately inverted against the dark page, per the design. */ .fn-how { background: #ffffff; color: #16123a; border-radius: 24px; padding: 30px; } .fn-how__title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: #16123a; margin: 0 0 20px; } .fn-how__step { display: flex; gap: 13px; align-items: center; padding: 11px 13px; margin-bottom: 9px; border-radius: 14px; background: #f5f4fe; border: 1px solid #ebe9fb; } .fn-how__step--bonus { background: #fffbeb; border-color: #fce6a8; } .fn-how__icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 0; } .fn-how__icon svg { width: 20px; height: 20px; } .fn-how__t { font-size: 1rem; font-weight: 700; color: #16123a; } .fn-how__t--bonus { color: #b3790a; } .fn-how__n { color: var(--brand-2); } .fn-how__s { margin: 1px 0 0; font-size: .88rem; line-height: 1.42; color: #66647e; } .fn-how__rule { border: 0; border-top: 1px solid #e9e8f4; margin: 16px 0 12px; } .fn-how__contact { display: flex; align-items: center; gap: 13px; padding: 12px 14px; margin-bottom: 10px; border-radius: 14px; background: #f5f4fe; border: 1px solid #ebe9fb; color: #16123a; } .fn-how__contact--wa { background: #f0fdf4; border-color: #c5f0d5; } .fn-how__cicon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; } .fn-how__cicon svg { width: 20px; height: 20px; } .fn-how__cicon--mail { background: #e7e5fb; color: #5b48d8; } .fn-how__cicon--wa { background: #d6f5e2; color: #12a05f; } .fn-how__clabel { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a889e; } .fn-how__cvalue { display: block; font-size: .97rem; font-weight: 600; color: #16123a; } /* Form panel — gradient hairline across the top edge. */ .fn-formcard { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 30px; } .fn-formcard form { display: flex; flex-direction: column; flex: 1; } .fn-formcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-cta); } .fn-label { display: block; margin-bottom: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #e8e6f5; } .fn-req { color: #ff6b81; } .fn-help { margin: 7px 0 0; font-size: .82rem; color: var(--ink-4); } .fn-submit { margin-top: auto; padding: 13px 28px; font-size: 1.02rem; } /* Country picker (intl-tel-input) dressed to match the dark form panel. The library ships a light theme, so every surface here is restated. */ .iti { width: 100%; display: block; } .iti--separate-dial-code .iti__selected-flag { background: transparent; border-radius: 12px 0 0 12px; border-right: 1px solid var(--line-2); } .iti--separate-dial-code .iti__selected-dial-code { color: var(--ink); font-weight: 600; } .iti__arrow { border-top-color: var(--ink-3); } .iti__arrow--up { border-bottom-color: var(--ink-3); } .iti__country-list { z-index: 60; max-height: 240px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9); } .iti__country { padding: 8px 12px; } .iti__country.iti__highlight { background: rgba(109, 92, 240, .28); } .iti__dial-code { color: var(--ink-3); } .iti__divider { border-bottom-color: var(--line); } /* ── Solid icon tiles ──────────────────────────────────────────────────── */ .fn-tile { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; color: #fff; margin-bottom: 14px; } .fn-tile svg { width: 26px; height: 26px; } .fn-tile--red { background: #e8163b; box-shadow: 0 10px 22px -12px rgba(232, 22, 59, .9); } .fn-tile--violet { background: #6d5cf0; box-shadow: 0 10px 22px -12px rgba(109, 92, 240, .9); } .fn-tile--gold { background: #e0a81c; box-shadow: 0 10px 22px -12px rgba(224, 168, 28, .9); } .fn-tile--green { background: #17b978; box-shadow: 0 10px 22px -12px rgba(23, 185, 120, .9); } .fn-tile--blue { background: #2f6fed; box-shadow: 0 10px 22px -12px rgba(47, 111, 237, .9); } .fn-tile--magenta { background: #c13fe0; box-shadow: 0 10px 22px -12px rgba(193, 63, 224, .9); } .fn-card--center .fn-tile { margin-inline: auto; } /* Gold eyebrow variant. */ .fn-eyebrow--gold { color: var(--gold); } /* ── Four-fact panel ───────────────────────────────────────────────────── */ .fn-facts { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 30px 10px; } .fn-fact { text-align: center; padding: 0 18px; } .fn-fact + .fn-fact { border-left: 1px solid var(--line); } .fn-fact .fn-tile { margin-inline: auto; } .fn-fact__title { font-size: 1.02rem; font-weight: 700; color: #fff; } .fn-fact__sub { font-size: .86rem; color: var(--ink-3); margin-top: 3px; } @media (max-width: 900px) { .fn-facts { grid-template-columns: repeat(2, 1fr); gap: 26px 0; } .fn-fact:nth-child(odd) { border-left: 0; } } @media (max-width: 560px) { .fn-facts { grid-template-columns: 1fr; } .fn-fact + .fn-fact { border-left: 0; border-top: 1px solid var(--line); padding-top: 24px; } } /* ── Mini fact cards ───────────────────────────────────────────────────── */ .fn-mini { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); } .fn-mini__glyph { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; font-size: 1.15rem; line-height: 1; background: rgba(139, 123, 255, .14); border: 1px solid rgba(139, 123, 255, .22); } .fn-mini__text { font-size: .88rem; font-weight: 600; color: var(--ink-2); } .fn-card--center { text-align: center; } .fn-card--center .fn-card__glyph { margin-inline: auto; } /* ── Curriculum cards ──────────────────────────────────────────────────── */ .fn-modcard { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s ease, transform .2s ease; } .fn-modcard:hover { border-color: var(--line-2); transform: translateY(-2px); } .fn-modcard__n { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--grad-cta); font-size: .92rem; } .fn-modcard__body { min-width: 0; padding-right: 54px; } .fn-modcard__title { margin: 0 0 3px; font-size: 1rem; font-weight: 700; color: #fff; } .fn-modcard__detail { margin: 0; font-size: .87rem; color: var(--ink-3); } .fn-modcard__tag { position: absolute; top: 16px; right: 16px; font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); background: rgba(245, 197, 66, .12); border: 1px solid rgba(245, 197, 66, .3); border-radius: 999px; padding: 3px 9px; } /* ── Full-width banner, with a light sweeping across it ────────────────── */ .fn-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; padding: 22px 26px; border-radius: 22px; background: linear-gradient(135deg, rgba(232, 22, 59, .12), rgba(109, 92, 240, .12)); border: 1px solid var(--line-2); } /* The shine itself: a soft diagonal highlight that crosses on a loop. The card clips it, so it reads as light travelling over the surface. */ .fn-banner__shine { position: absolute; top: -60%; bottom: -60%; left: -60%; width: 45%; pointer-events: none; transform: rotate(18deg) translateX(-120%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13) 45%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .13) 55%, transparent); animation: fn-shine 4.6s ease-in-out infinite; } @keyframes fn-shine { /* Held off-screen for most of the cycle so the sweep is an occasional glint rather than a strobe. */ 0%, 55% { transform: rotate(18deg) translateX(-120%); } 100% { transform: rotate(18deg) translateX(420%); } } .fn-banner__icon { display: grid; place-items: center; flex: 0 0 auto; width: 62px; height: 62px; border-radius: 17px; font-size: 1.75rem; background: linear-gradient(160deg, #f7d774, #eeb02a); box-shadow: 0 0 26px -2px rgba(240, 180, 41, .55); } .fn-banner__body { flex: 1; min-width: 240px; } .fn-banner__title { margin: 0 0 4px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--gold); } .fn-banner p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-2); } .fn-banner__cta { position: relative; z-index: 1; flex: 0 0 auto; } .fn-banner__note { margin: 16px 0 0; text-align: center; font-size: .92rem; color: var(--ink-3); } /* ── Inclusion rows ────────────────────────────────────────────────────── */ .fn-incls { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; margin-top: 34px; } @media (max-width: 860px) { .fn-incls { grid-template-columns: 1fr; } } .fn-incl { position: relative; overflow: hidden; display: flex; gap: 16px; align-items: center; padding: 18px 20px 18px 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); font-size: .97rem; line-height: 1.55; color: var(--ink); } /* Coloured edge down the left of each row, matching its tile. */ .fn-incl::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--incl, var(--violet)); } .fn-incl__tick { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--incl, var(--violet)); box-shadow: 0 10px 24px -12px var(--incl, var(--violet)); } .fn-incl__tick svg { width: 21px; height: 21px; } .fn-incl--violet { --incl: #6d5cf0; } .fn-incl--red { --incl: #e8163b; } .fn-incl--blue { --incl: #2f7ff0; } .fn-incl--gold { --incl: #eeb02a; } .fn-incl--magenta { --incl: #c13fe0; } .fn-incl--green { --incl: #13b86a; } /* ── Rated person cards ────────────────────────────────────────────────── */ .fn-person { position: relative; overflow: hidden; width: 320px; flex: 0 0 auto; margin: 0; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 38px 26px 34px; } /* Faint dome of light behind the portrait, as in the design. */ .fn-person::before { content: ''; position: absolute; inset: -40% 0 auto 0; height: 260px; background: radial-gradient(60% 60% at 50% 60%, rgba(139, 123, 255, .18), transparent 70%); pointer-events: none; } /* Portrait in a gold ring. The ring is the wrapper's background, showing through the 3px inset the image leaves around itself. */ /* Plain block, not a centred grid: with place-items:center the image height has no definite parent to resolve 100% against and falls back to its own aspect ratio, turning the circle into an egg. */ .fn-person__ring { position: relative; display: block; width: 152px; height: 152px; margin: 0 auto; padding: 3px; border-radius: 999px; background: linear-gradient(160deg, #f5c542, #b98a1e 55%, #f5c542); box-shadow: 0 14px 34px -14px rgba(245, 197, 66, .55); } .fn-person img { width: 100%; height: 100%; border-radius: 999px; object-fit: cover; object-position: top center; background: #f4f2ff; } .fn-person__stars { margin-top: 24px; color: var(--gold); font-size: 1.05rem; letter-spacing: .22em; } .fn-person__name { margin-top: 12px; font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; color: #fff; } .fn-person__role { display: block; margin-top: 6px; font-size: .9rem; color: var(--gold); opacity: .85; } @media (max-width: 560px) { .fn-person { width: 270px; padding: 30px 20px 28px; } .fn-person__ring { width: 130px; height: 130px; } } /* ── Instagram ─────────────────────────────────────────────────────────── */ /* Profile card. The gradient edge is a 1px padded wrapper rather than a border-image, which Safari still renders inconsistently on rounded corners. */ .fn-igcard { /* Narrower than the container: a full-width profile card leaves the stats marooned at either end of a very long row. */ max-width: 940px; margin: 34px auto 0; padding: 1px; border-radius: 24px; background: linear-gradient(120deg, #f5c542, #e8163b 35%, #c13fe0 70%, #6d5cf0); } .fn-igcard__in { border-radius: 23px; background: var(--panel); padding: 30px 34px; } .fn-ig__head { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } /* Avatar in Instagram's own story ring. */ .fn-ig__ring { flex: 0 0 auto; display: grid; place-items: center; width: 126px; height: 126px; border-radius: 999px; padding: 4px; background: linear-gradient(45deg, #f5c542, #e8163b 45%, #c13fe0 75%, #6d5cf0); } /* contain, not cover: the profile picture is usually a logo, and cover would crop the wordmark off it. */ .fn-ig__avatar { width: 100%; height: 100%; border-radius: 999px; object-fit: contain; padding: 6%; background: #fff; border: 3px solid var(--panel); } .fn-ig__id { flex: 1 1 320px; min-width: 0; } .fn-ig__handlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fn-ig__handle { font-size: 1.5rem; font-weight: 700; color: #fff; text-decoration: none; } .fn-ig__handle:hover { text-decoration: underline; } .fn-ig__check { width: 20px; height: 20px; flex: 0 0 auto; } .fn-ig__follow { display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; padding: 9px 26px; border-radius: 10px; font-size: .95rem; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(90deg, #f0a63c, #e0459b 55%, #a24bd8); transition: filter .18s ease; } .fn-ig__follow:hover { filter: brightness(1.08); } .fn-ig__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; } .fn-ig__stat { text-align: center; padding: 14px 10px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line); } .fn-ig__stat b { display: block; color: #fff; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; } .fn-ig__stat span { font-size: .84rem; color: var(--ink-3); } .fn-ig__rule { border: 0; border-top: 1px solid var(--line); margin: 24px 0 16px; } .fn-ig__name { font-size: 1.08rem; font-weight: 700; color: #fff; } .fn-ig__bio { margin: 6px 0 0; font-size: .97rem; line-height: 1.6; color: var(--ink-2); } /* Warm gradient for the Instagram heading word. */ .fn-grad-ig { background: linear-gradient(100deg, #f5c542, #f06a4a 30%, #e0459b 62%, #8b6cf0); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Reels stage ───────────────────────────────────────────────────────── */ .fn-reels { position: relative; margin-top: 46px; padding-bottom: 40px; display: flex; align-items: center; justify-content: center; gap: 0; perspective: 1400px; } .fn-reel { flex: 0 0 auto; width: 270px; border-radius: 30px; overflow: hidden; background: #05041a; border: 1px solid var(--line-2); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95); } .fn-reel iframe { display: block; width: 100%; aspect-ratio: 9 / 16; border: 0; } /* The outer two turn away from the middle and sit slightly behind it. */ .fn-reel--left { transform: rotate(-7deg) translateX(34px) scale(.94); z-index: 1; } .fn-reel--mid { position: relative; z-index: 3; } .fn-reel--right { transform: rotate(7deg) translateX(-34px) scale(.94); z-index: 1; } /* Floating action bar across the foot of the stage. */ .fn-reelbar { position: absolute; z-index: 4; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; padding: 10px 14px 10px 22px; border-radius: 999px; background: rgba(13, 10, 43, .92); border: 1px solid var(--line-2); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .9); backdrop-filter: blur(8px); } .fn-reelbar__item { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 600; color: var(--ink); } .fn-reelbar__item svg { width: 19px; height: 19px; } .fn-reelbar__heart { color: #ff3b5c; font-size: 1.15rem; line-height: 1; } .fn-reelbar .fn-ig__follow { margin-left: 0; padding: 8px 22px; border-radius: 999px; } @media (max-width: 900px) { .fn-igcard__in { padding: 24px 20px; } .fn-ig__head { justify-content: center; text-align: center; } .fn-ig__handlerow { justify-content: center; } /* Stacked reels would be three storeys tall — show the middle one only. */ .fn-reels { padding-bottom: 34px; } .fn-reel { width: min(270px, 76vw); } .fn-reel--left, .fn-reel--right { display: none; } } /* ── CTA band ──────────────────────────────────────────────────────────── */ /* The .fn-ctapanel inside carries the emphasis, so the section sits on the same ground as every other one. */ .fn-cta { background: transparent; } /* ── Footer ────────────────────────────────────────────────────────────── */ .fn-footer { background: var(--void-2); border-top: 1px solid var(--line); padding: 46px 0 40px; } /* The countdown bar is fixed over the foot of the page, so the footer has to end above it — otherwise it sits across the copyright line. Only when the bar is actually rendered; without :has() the page just keeps the overlap it has today. */ @media (min-width: 901px) { body:has(.fn-timerbar) .fn-footer { padding-bottom: 132px; } } .fn-footer__grid { display: grid; grid-template-columns: 1.9fr 1fr 1fr 1.2fr; gap: 30px; } @media (max-width: 1040px) { .fn-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 780px) { .fn-footer__grid { grid-template-columns: 1fr; } } .fn-footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .fn-footer__logo { display: grid; place-items: center; flex: 0 0 auto; width: 62px; height: 62px; padding: 7px; background: #fff; border-radius: 14px; } .fn-footer__logo img { width: 100%; height: 100%; object-fit: contain; } .fn-footer__name { font-size: 1.12rem; font-weight: 700; color: #fff; } .fn-footer__blurb { color: var(--ink-3); font-size: .92rem; line-height: 1.6; max-width: 44ch; margin: 0; } .fn-footer h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 12px; } .fn-footer a { color: var(--ink-3); font-size: .92rem; display: block; padding: 4px 0; } .fn-footer a:hover { color: #fff; } .fn-footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--ink-4); } /* ── Mobile bottom navigation ──────────────────────────────────────────── */ .fn-mnav { display: none; position: fixed; z-index: 46; inset-inline: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); align-items: stretch; gap: 2px; padding: 6px; border-radius: 20px; background: rgba(9, 7, 32, .94); backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .95); } .fn-mnav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 2px; border-radius: 14px; color: var(--ink-3); font-size: .62rem; font-weight: 600; letter-spacing: .01em; min-width: 0; transition: color .18s ease, background .18s ease; } .fn-mnav__item svg { width: 21px; height: 21px; } .fn-mnav__item:hover, .fn-mnav__item:focus-visible { color: #fff; background: rgba(255, 255, 255, .05); } /* The Reserve tile: filled, and the light crosses it on a loop. */ .fn-mnav__item.is-cta { position: relative; overflow: hidden; color: #fff; background: var(--grad-cta); box-shadow: 0 10px 24px -10px rgba(232, 22, 59, .9); } .fn-mnav__item.is-cta:hover, .fn-mnav__item.is-cta:focus-visible { color: #fff; background: var(--grad-cta); } .fn-mnav__item.is-cta > * { position: relative; z-index: 1; } .fn-mnav__item.is-cta::after { content: ''; position: absolute; top: -60%; bottom: -60%; left: -60%; width: 55%; pointer-events: none; transform: rotate(18deg) translateX(-140%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .28) 55%, transparent); animation: fn-shine 3.4s ease-in-out infinite; } @media (max-width: 860px) { .fn-mnav { display: flex; } /* Keep the page's last section clear of the floating bar. */ .fn-footer { padding-bottom: 104px; } } /* ── Floating WhatsApp ─────────────────────────────────────────────────── */ .fn-wa { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(160deg, #38e07b, #14b95a); color: #fff; transition: transform .18s ease, box-shadow .18s ease; /* Two shadows: a tight halo for the glow, a soft drop for the lift. */ box-shadow: 0 0 22px 2px rgba(37, 211, 102, .55), 0 14px 34px -12px rgba(0, 0, 0, .8); } .fn-wa:hover { transform: scale(1.07); box-shadow: 0 0 34px 5px rgba(37, 211, 102, .8), 0 18px 40px -12px rgba(0, 0, 0, .85); } .fn-wa__icon { width: 32px; height: 32px; position: relative; z-index: 1; } /* The glow ring expands behind the disc, so the button never moves under the cursor while it pulses. */ .fn-wa__pulse { position: absolute; inset: 0; border-radius: 999px; background: rgba(37, 211, 102, .55); animation: fn-wa-pulse 2.2s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes fn-wa-pulse { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } } /* ── Sticky countdown bar (desktop only) ───────────────────────────────── */ .fn-timerbar { position: fixed; inset-inline: 0; bottom: 20px; z-index: 45; /* 92px gutters, not 36: the bar stays centred but can never run under the floating WhatsApp button on mid-width desktops. */ padding: 0 92px; pointer-events: none; } .fn-timerbar[hidden] { display: none; } /* The frame IS the gradient; the inner panel covers all but 1px of it. */ .fn-timerbar__frame { pointer-events: auto; max-width: 980px; margin: 0 auto; padding: 1px; border-radius: 20px; background: var(--grad); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8); } .fn-timerbar__in { display: flex; align-items: center; gap: 22px; padding: 11px 12px 11px 22px; border-radius: 19px; background: rgba(11, 9, 37, .97); backdrop-filter: blur(14px); } .fn-timerbar__label { min-width: 0; flex: 1; } .fn-timerbar__eyebrow { display: flex; align-items: center; gap: 9px; font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .68); white-space: nowrap; } .fn-timerbar__when { margin-top: 3px; font-size: .95rem; font-weight: 600; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fn-timerbar__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(232, 22, 59, .7); animation: fn-ping 1.8s ease-out infinite; } @keyframes fn-ping { 70%, 100% { box-shadow: 0 0 0 9px rgba(232, 22, 59, 0); } } .fn-timerbar__clock { display: flex; align-items: center; gap: 6px; } .fn-timerbar__cell { position: relative; /* anchors the ':' separator below */ text-align: center; min-width: 52px; padding: 7px 6px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .03); } .fn-timerbar__cell b { display: block; font-size: 1.3rem; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; } .fn-timerbar__cell span { display: block; margin-top: 4px; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); } /* Colon between cells, drawn rather than marked up. */ .fn-timerbar__clock { gap: 18px; } .fn-timerbar__cell + .fn-timerbar__cell::before { content: ':'; position: absolute; left: -12px; top: 50%; transform: translateY(-58%); color: var(--violet); opacity: .55; font-size: 1.15rem; line-height: 1; } .fn-timerbar__cta { padding: 10px 22px; font-size: .95rem; white-space: nowrap; gap: 6px; } @media (max-width: 900px) { .fn-timerbar { display: none; } } /* ── Floating promo video ──────────────────────────────────────────────── */ /* Minimised: a portrait card the visitor can drag anywhere. Positioned with left/top once dragged, so the corner rules below are only the start. */ .fn-vid__mini { position: fixed; z-index: 48; width: 128px; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line-2); box-shadow: 0 20px 46px -16px rgba(0, 0, 0, .95); cursor: grab; touch-action: none; user-select: none; } .fn-vid__mini--left { left: 18px; bottom: 18px; } .fn-vid__mini--right { right: 18px; bottom: 18px; } .fn-vid__mini[hidden] { display: none; } /* No transition while dragging: the card must track the pointer exactly. */ .fn-vid__mini.is-dragging { cursor: grabbing; box-shadow: 0 26px 60px -18px rgba(0, 0, 0, 1); } /* 9:14 rather than the source 9:16 — a full-height portrait card is a lot of screen for a corner player. object-fit crops rather than squashes. */ .fn-vid__miniv { display: block; width: 100%; aspect-ratio: 9 / 14; object-fit: cover; pointer-events: none; } /* Round chips over the card. */ .fn-vid__chip { position: absolute; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; cursor: pointer; padding: 0; background: rgba(5, 4, 26, .82); color: #fff; border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 3px 10px rgba(0, 0, 0, .6); backdrop-filter: blur(4px); transition: background .18s ease, transform .18s ease; } .fn-vid__chip:hover { background: #e8163b; border-color: #e8163b; transform: scale(1.08); } .fn-vid__chip svg { width: 15px; height: 15px; } .fn-vid__chip--close { top: 8px; right: 8px; } .fn-vid__chip--mute { bottom: 8px; left: 8px; } /* Expanded: a lightbox with a title bar, as in the design. */ .fn-vid__modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(0, 0, 0, .88); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s ease; } .fn-vid__modal[hidden] { display: none; } .fn-vid__modal.is-open { opacity: 1; } /* Shrink-to-fit around the video. A fixed width letterboxed a portrait clip and left a dead panel beside it, because the video keeps its own aspect while the frame did not. The modal centres this, so auto width collapses to the video's scaled size. */ .fn-vid__stage { position: relative; width: auto; max-width: min(560px, 100%); min-width: 240px; border-radius: 20px; overflow: hidden; background: #05041a; border: 1px solid var(--line-2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 1); transform: translateY(10px) scale(.985); transition: transform .22s ease; } .fn-vid__modal.is-open .fn-vid__stage { transform: none; } .fn-vid__bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border-bottom: 1px solid var(--line); } .fn-vid__avatar { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; overflow: hidden; background: #fff; } .fn-vid__avatar img { width: 100%; height: 100%; object-fit: contain; padding: 5px; } .fn-vid__title { flex: 1; min-width: 0; font-size: 1rem; font-weight: 700; color: #fff; } .fn-vid__x { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer; padding: 0; background: var(--panel-2); color: var(--ink); transition: background .18s ease, color .18s ease; } .fn-vid__x:hover { background: var(--line-2); color: #fff; } .fn-vid__x svg { width: 17px; height: 17px; } /* No forced width: the intrinsic aspect decides it, capped by the height so a tall clip still fits on screen with its title bar. */ .fn-vid__full { display: block; width: auto; height: auto; max-width: min(560px, 100%); max-height: min(72vh, 700px); background: #000; } @media (max-width: 640px) { .fn-vid__mini { width: 104px; border-radius: 12px; } .fn-vid__chip { width: 25px; height: 25px; } .fn-vid__chip svg { width: 13px; height: 13px; } .fn-vid__modal { padding: 10px; } .fn-vid__stage { max-width: 100%; min-width: 0; border-radius: 16px; } .fn-vid__full { max-height: 72vh; } } /* ── Mobile bottom navigation ──────────────────────────────────────────── */ .fn-mnav { display: none; position: fixed; z-index: 46; inset-inline: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); align-items: stretch; gap: 2px; padding: 6px; border-radius: 20px; background: rgba(9, 7, 32, .94); backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .95); } .fn-mnav__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 2px; border-radius: 14px; color: var(--ink-3); font-size: .62rem; font-weight: 600; letter-spacing: .01em; min-width: 0; transition: color .18s ease, background .18s ease; } .fn-mnav__item svg { width: 21px; height: 21px; } .fn-mnav__item:hover, .fn-mnav__item:focus-visible { color: #fff; background: rgba(255, 255, 255, .05); } /* The Reserve tile: filled, and the light crosses it on a loop. */ .fn-mnav__item.is-cta { position: relative; overflow: hidden; color: #fff; background: var(--grad-cta); box-shadow: 0 10px 24px -10px rgba(232, 22, 59, .9); } .fn-mnav__item.is-cta:hover, .fn-mnav__item.is-cta:focus-visible { color: #fff; background: var(--grad-cta); } .fn-mnav__item.is-cta > * { position: relative; z-index: 1; } .fn-mnav__item.is-cta::after { content: ''; position: absolute; top: -60%; bottom: -60%; left: -60%; width: 55%; pointer-events: none; transform: rotate(18deg) translateX(-140%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28) 45%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .28) 55%, transparent); animation: fn-shine 3.4s ease-in-out infinite; } @media (max-width: 860px) { .fn-mnav { display: flex; } /* Keep the page's last section clear of the floating bar. */ .fn-footer { padding-bottom: 104px; } } /* ── Floating WhatsApp ─────────────────────────────────────────────────── */ .fn-wa { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 58px; height: 58px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(160deg, #38e07b, #14b95a); color: #fff; transition: transform .18s ease, box-shadow .18s ease; /* Two shadows: a tight halo for the glow, a soft drop for the lift. */ box-shadow: 0 0 22px 2px rgba(37, 211, 102, .55), 0 14px 34px -12px rgba(0, 0, 0, .8); } .fn-wa:hover { transform: scale(1.07); box-shadow: 0 0 34px 5px rgba(37, 211, 102, .8), 0 18px 40px -12px rgba(0, 0, 0, .85); } .fn-wa__icon { width: 32px; height: 32px; position: relative; z-index: 1; } /* The glow ring expands behind the disc, so the button never moves under the cursor while it pulses. */ .fn-wa__pulse { position: absolute; inset: 0; border-radius: 999px; background: rgba(37, 211, 102, .55); animation: fn-wa-pulse 2.2s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes fn-wa-pulse { 0% { transform: scale(1); opacity: .6; } 70% { transform: scale(1.75); opacity: 0; } 100% { transform: scale(1.75); opacity: 0; } } /* ── Sticky countdown bar (desktop only) ───────────────────────────────── */ .fn-timerbar { position: fixed; inset-inline: 0; bottom: 20px; z-index: 45; /* 92px gutters, not 36: the bar stays centred but can never run under the floating WhatsApp button on mid-width desktops. */ padding: 0 92px; pointer-events: none; } .fn-timerbar[hidden] { display: none; } /* The frame IS the gradient; the inner panel covers all but 1px of it. */ .fn-timerbar__frame { pointer-events: auto; max-width: 980px; margin: 0 auto; padding: 1px; border-radius: 20px; background: var(--grad); box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8); } .fn-timerbar__in { display: flex; align-items: center; gap: 22px; padding: 11px 12px 11px 22px; border-radius: 19px; background: rgba(11, 9, 37, .97); backdrop-filter: blur(14px); } .fn-timerbar__label { min-width: 0; flex: 1; } .fn-timerbar__eyebrow { display: flex; align-items: center; gap: 9px; font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .68); white-space: nowrap; } .fn-timerbar__when { margin-top: 3px; font-size: .95rem; font-weight: 600; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fn-timerbar__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand); flex: 0 0 auto; box-shadow: 0 0 0 0 rgba(232, 22, 59, .7); animation: fn-ping 1.8s ease-out infinite; } @keyframes fn-ping { 70%, 100% { box-shadow: 0 0 0 9px rgba(232, 22, 59, 0); } } .fn-timerbar__clock { display: flex; align-items: center; gap: 6px; } .fn-timerbar__cell { position: relative; /* anchors the ':' separator below */ text-align: center; min-width: 52px; padding: 7px 6px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255, 255, 255, .03); } .fn-timerbar__cell b { display: block; font-size: 1.3rem; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; } .fn-timerbar__cell span { display: block; margin-top: 4px; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); } /* Colon between cells, drawn rather than marked up. */ .fn-timerbar__clock { gap: 18px; } .fn-timerbar__cell + .fn-timerbar__cell::before { content: ':'; position: absolute; left: -12px; top: 50%; transform: translateY(-58%); color: var(--violet); opacity: .55; font-size: 1.15rem; line-height: 1; } .fn-timerbar__cta { padding: 10px 22px; font-size: .95rem; white-space: nowrap; gap: 6px; } @media (max-width: 900px) { .fn-timerbar { display: none; } } /* Below 860px the fixed bottom nav owns the base of the screen, so the floating controls stack above it instead of sitting under it. */ @media (max-width: 860px) { .fn-wa { bottom: 104px; } /* No floating video on phones: between the nav bar, the WhatsApp button and the card itself, the bottom of a small screen is already spoken for. Hiding the whole widget also takes the lightbox with it. */ .fn-vid { display: none; } } /* ── Reveal on scroll ──────────────────────────────────────────────────── */ .fn-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .fn-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fn-stars, .fn-marquee__track, .fn-wa__pulse, .fn-banner__shine, .fn-ctapanel__shine, .fn-mnav__item.is-cta::after, .fn-hero__badge::before { animation: none; } .fn-reveal { opacity: 1; transform: none; transition: none; } .fn-btn:hover, .fn-card:hover { transform: none; } } /* ── "What you'll discover" cards ──────────────────────────────────────── */ .fn-dcard { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform .2s ease, border-color .2s ease; } .fn-dcard:hover { transform: translateY(-3px); border-color: var(--line-2); } /* Oversized index, ghosted into the top-right corner. */ .fn-dcard__num { position: absolute; top: 8px; right: 18px; font-family: var(--font-display); font-size: 3.6rem; font-weight: 800; line-height: 1; color: #fff; opacity: .05; pointer-events: none; } .fn-dcard .fn-tile { margin-bottom: 26px; } .fn-dcard__title { font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; color: #fff; margin: 0 0 8px; } .fn-dcard__text { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink-2); } /* ── Location: map beside the argument ─────────────────────────────────── */ .fn-loc { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; } .fn-loc__img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 30px 80px -40px rgba(109, 92, 240, .8); } .fn-loc__h { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.14; margin-bottom: 18px; } .fn-loc .fn-lead { margin-bottom: 26px; } @media (max-width: 900px) { .fn-loc { grid-template-columns: 1fr; gap: 32px; } } /* Ticked checklist — a gradient disc per line. */ .fn-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .fn-ticks li { display: flex; align-items: center; gap: 14px; font-size: 1.02rem; color: var(--ink); } .fn-tick { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; background: var(--grad-cta); color: #fff; } .fn-tick svg { width: 14px; height: 14px; } /* Roomier buttons for the hero and location CTAs. Horizontal padding is kept tight enough that the pair still shares one row inside the 1180px grid. */ .fn-btn--lg { padding: 13px 24px; font-size: 1.05rem; } /* ── Earn Your Certificate ─────────────────────────────────────────────── */ /* Gold heading word — the certificate section is gold throughout, so it uses this rather than the page's violet-to-pink accent. */ .fn-grad-gold { background: linear-gradient(100deg, #f7d774, #f0b429 55%, #e6a417); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Titled checklist: a gold tile per row, title above supporting line. */ .fn-checks { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 22px; } .fn-checks li { display: flex; align-items: flex-start; gap: 18px; } .fn-check { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(160deg, #f7d774, #eeb02a); color: #3a2a05; /* dark ink on gold — the tick has to read at 42px */ box-shadow: 0 12px 26px -12px rgba(240, 180, 41, .8); } .fn-check svg { width: 20px; height: 20px; } .fn-checks__t { display: block; font-size: 1.05rem; font-weight: 700; color: #fff; } .fn-checks__s { display: block; margin-top: 4px; font-size: .95rem; line-height: 1.55; color: var(--ink-2); } .fn-smallprint { margin: 30px 0 0; max-width: 52ch; font-size: .86rem; font-style: italic; line-height: 1.7; color: var(--ink-4); } /* The certificate in a light device bezel, with a badge clipped to its corner. */ .fn-certframe { position: relative; padding: 14px; border-radius: 22px; background: linear-gradient(150deg, #2a2456, #14113b); border: 1px solid var(--line-2); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .95); } .fn-certframe img { display: block; width: 100%; border-radius: 12px; } .fn-certframe__badge { position: absolute; right: -14px; bottom: -18px; display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px; border-radius: 14px; font-size: .97rem; font-weight: 700; color: #fff; background: #14113b; border: 1px solid var(--line-2); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .95); } @media (max-width: 900px) { .fn-certframe__badge { right: 10px; bottom: -16px; } } /* ── Small-screen corrections ──────────────────────────────────────────── */ @media (max-width: 560px) { /* Three stat boxes still fit at 360px, but only with the padding and type scaled down — otherwise "followers" wraps mid-word. */ .fn-ig__stats { gap: 8px; } .fn-ig__stat { padding: 11px 4px; border-radius: 11px; } .fn-ig__stat b { font-size: 1.05rem; } .fn-ig__stat span { font-size: .72rem; } .fn-ig__handle { font-size: 1.25rem; } /* The reel bar's four items overflow a 360px screen at full spacing. */ .fn-reelbar { gap: 12px; padding: 8px 10px 8px 16px; } .fn-reelbar__item { font-size: .88rem; gap: 6px; } .fn-reelbar .fn-ig__follow { padding: 7px 16px; font-size: .88rem; } /* Certificate checklist: smaller tiles so the titles keep one line. */ .fn-check { width: 36px; height: 36px; border-radius: 11px; } .fn-check svg { width: 17px; height: 17px; } .fn-checks { gap: 18px; } .fn-checks li { gap: 14px; } .fn-checks__t { font-size: 1rem; } /* Full-width CTAs read better than two half-width pills on a phone. */ .fn-hero__actions { gap: 10px; } .fn-hero__actions .fn-btn--lg { flex: 1 1 100%; padding: 13px 20px; } } /* Long addresses and handles must wrap rather than widen the page. */ .fn-footer a, .fn-ig__bio, .fn-how__cvalue { overflow-wrap: anywhere; } /* ── Benefit cards ─────────────────────────────────────────────────────── */ .fn-bcard { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 30px; } /* Gradient rule across the top edge, tinted per card. */ .fn-bcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--bcard, var(--grad-cta)); } .fn-bcard--gold { --bcard: linear-gradient(90deg, #f5c542, #f0a63c); --btick: #eeb02a; } .fn-bcard--magenta { --bcard: linear-gradient(90deg, #6d5cf0, #c13fe0 55%, #e8163b); --btick: #c13fe0; } .fn-bcard--violet { --bcard: linear-gradient(90deg, #6d5cf0, #8b7bff); --btick: #6d5cf0; } .fn-bcard__head { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; } .fn-bcard__title { margin: 0; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: #fff; } .fn-bticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .fn-bticks li { display: flex; align-items: flex-start; gap: 14px; font-size: .97rem; line-height: 1.55; color: var(--ink-2); } .fn-btick { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; border-radius: 999px; background: var(--btick, var(--violet)); color: #fff; } .fn-btick svg { width: 12px; height: 12px; } /* ── "Who should attend" cards ─────────────────────────────────────────── */ .fn-who { text-align: center; padding: 30px 24px 28px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease; } .fn-who:hover { transform: translateY(-3px); border-color: var(--line-2); } .fn-who .fn-tile { margin: 0 auto 22px; } .fn-who__title { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.14rem; font-weight: 700; color: #fff; } .fn-who__text { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink-2); } /* ── Footer: brand · explore · legal · contact ─────────────────────────── */ .fn-footer__credit { margin: 16px 0 0; font-size: .93rem; font-weight: 700; color: var(--gold); } .fn-footer__socials { display: flex; gap: 12px; margin-top: 22px; } .fn-footer__socials a { display: grid; place-items: center; padding: 0; width: 44px; height: 44px; border-radius: 13px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-2); transition: color .18s ease, border-color .18s ease; } .fn-footer__socials a:hover { color: #fff; border-color: var(--line-2); } .fn-footer__socials svg { width: 20px; height: 20px; } /* The one coloured link in the footer — it is the conversion point. */ .fn-footer .fn-footer__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; color: var(--brand); } .fn-footer__cta:hover { color: #ff5573; } .fn-footer .fn-fcontact { display: flex; align-items: center; gap: 12px; padding: 7px 0; } .fn-fcontact__icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; } .fn-fcontact__icon svg { width: 18px; height: 18px; } .fn-fcontact__icon--mail { background: rgba(109, 92, 240, .16); color: #8b7bff; } .fn-fcontact__icon--wa { background: rgba(37, 211, 102, .14); color: #35d07f; } .fn-fcontact__icon--web { background: rgba(245, 197, 66, .14); color: var(--gold); } /* ── Closing CTA panel ─────────────────────────────────────────────────── */ .fn-ctapanel { position: relative; overflow: hidden; padding: 54px 40px; border-radius: 26px; background: linear-gradient(160deg, rgba(109, 92, 240, .1), rgba(5, 4, 26, 0) 60%), var(--panel); border: 1px solid var(--line-2); } /* Same glint as the workshop banner, slower and wider for the bigger surface. */ .fn-ctapanel__shine { position: absolute; top: -60%; bottom: -60%; left: -60%; width: 38%; pointer-events: none; transform: rotate(18deg) translateX(-140%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1) 45%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, .1) 55%, transparent); animation: fn-shine 6.5s ease-in-out infinite; } .fn-ctapanel > .fn-center { position: relative; z-index: 1; } .fn-ctapanel__h { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.18; margin-bottom: 16px; } .fn-ctapanel__actions { justify-content: center; margin-top: 26px; } .fn-ctapanel__tag { margin: 24px 0 0; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; font-weight: 700; color: var(--gold); } @media (max-width: 640px) { .fn-ctapanel { padding: 38px 22px; } .fn-ctapanel__actions .fn-btn { flex: 1 1 100%; } } /* ── Phone gutters ─────────────────────────────────────────────────────── */ /* Container padding and card padding stack, so 20 + 30 left only 290px of a 390px screen for the fields. Both come down together on small screens. */ @media (max-width: 560px) { .fn-container { padding: 0 14px; } .fn-formcard { padding: 20px 16px; border-radius: 18px; } .fn-how { padding: 22px 16px; border-radius: 18px; } .fn-bcard { padding: 22px 18px; } .fn-dcard { padding: 22px 18px; } .fn-who { padding: 24px 16px 22px; } .fn-incl { padding: 15px 15px 15px 18px; gap: 13px; } .fn-igcard__in { padding: 20px 15px; } .fn-facts { padding: 24px 6px; } .fn-fact { padding: 0 10px; } .fn-banner { padding: 18px 16px; gap: 16px; } .fn-consult { padding: 18px 16px; } .fn-mentor__body { padding: 24px 16px; } .fn-faq__q { padding: 16px 16px; gap: 12px; } .fn-faq__a { padding: 0 16px 16px; } /* The label is a flex row of text + "+ GST" + arrow; without room it wraps mid-phrase. Trim the padding and type instead of letting it break. */ .fn-btn--block { padding-left: 14px; padding-right: 14px; gap: 6px; } .fn-submit { padding: 14px 14px; font-size: .95rem; } } /* Below ~360px even that is tight, so the arrow goes rather than the price. */ @media (max-width: 380px) { .fn-submit { font-size: .9rem; letter-spacing: -.01em; } } /* ── Thank-you page ────────────────────────────────────────────────────── */ /* One panel, centred, with a single filled button. Everything else on the page is deliberately quieter than the WhatsApp CTA. */ .fn-ty { padding-top: 56px; } .fn-typanel { position: relative; overflow: hidden; max-width: 720px; margin: 0 auto; padding: 48px 40px 40px; border-radius: 26px; text-align: center; background: linear-gradient(160deg, rgba(109, 92, 240, .12), rgba(5, 4, 26, 0) 62%), var(--panel); border: 1px solid var(--line-2); } /* Everything sits above the shine sweep. */ .fn-typanel > *:not(.fn-ctapanel__shine) { position: relative; z-index: 1; } .fn-ty__tick { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 999px; color: #0b3d21; background: linear-gradient(150deg, #4ade80, #16a34a); box-shadow: 0 14px 34px -14px rgba(22, 163, 74, .9); } .fn-ty__tick svg { width: 30px; height: 30px; } .fn-ty__h { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.18; margin: 14px 0 12px; } .fn-ty__lead { margin: 0 auto; max-width: 46ch; } .fn-ty__lead strong { color: var(--ink); font-weight: 700; } /* ── The one action ─────────────────────────────────────────────────────── */ .fn-ty__cta { margin-top: 30px; } /* WhatsApp green rather than the brand gradient: this button is the page's whole purpose and should read instantly as WhatsApp. */ .fn-ty__wa { gap: 10px; background: linear-gradient(135deg, #25d366, #128c7e); box-shadow: 0 16px 38px -16px rgba(37, 211, 102, .95); } .fn-ty__wa-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; } .fn-ty__wa-ico svg { width: 22px; height: 22px; } .fn-ty__note { margin: 14px auto 0; max-width: 44ch; font-size: .92rem; line-height: 1.6; color: var(--ink-3); } /* ── Facts ──────────────────────────────────────────────────────────────── */ .fn-ty__facts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .fn-ty__facts li { display: grid; justify-items: center; gap: 5px; padding: 16px 10px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); } .fn-ty__fico { display: grid; place-items: center; width: 22px; height: 22px; color: var(--violet); } .fn-ty__fico svg { width: 20px; height: 20px; } .fn-ty__flabel { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); } .fn-ty__fvalue { font-size: .92rem; font-weight: 700; color: var(--ink); line-height: 1.35; } .fn-ty__zoom { margin-top: 22px; } .fn-ty__receipt { margin: 22px 0 0; font-size: .85rem; color: var(--ink-4); } .fn-ty__ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-3); } .fn-ty__back { display: inline-block; margin-top: 26px; font-size: .9rem; font-weight: 700; color: var(--ink-3); text-decoration: none; } .fn-ty__back:hover { color: var(--ink); } @media (max-width: 700px) { .fn-ty__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .fn-ty { padding-top: 34px; } .fn-typanel { padding: 34px 20px 30px; border-radius: 20px; } .fn-ty__wa { width: 100%; } } /* ── Hero globe (course page only) ─────────────────────────────────────── */ /* Sits in the slot the poster image used to fill, and keeps that slot's proportions so swapping one for the other moves nothing else. */ .fn-globe { position: relative; aspect-ratio: 1 / 1; max-height: 520px; margin-inline: auto; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, rgba(109, 92, 240, .22), transparent 62%), var(--void-2); box-shadow: 0 30px 80px -40px rgba(109, 92, 240, .8); } /* Scoped through .fn-globe to outrank `.maplibregl-map`, which MapLibre adds to this very element and which sets position: relative. Its stylesheet is injected at runtime, so it lands after this file and wins any tie — the container then lost inset:0, collapsed to zero height with no in-flow content, and the map sized its canvas to a 300px fallback. */ .fn-globe .fn-globe__canvas { position: absolute; inset: 0; } /* Fade in with the first painted frame, so the reader never sees a half-drawn basemap assembling itself. */ .fn-globe .fn-globe__canvas { opacity: 0; transition: opacity .8s ease; } .fn-globe.is-live .fn-globe__canvas { opacity: 1; } /* A slowly breathing glow stands in while MapLibre loads — quieter than a spinner and it leaves nothing to clear up. */ .fn-globe::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(139, 123, 255, .28), transparent 58%); animation: fn-globe-wait 2.6s ease-in-out infinite; } .fn-globe.is-live::after, .fn-globe.is-failed::after { display: none; } @keyframes fn-globe-wait { 0%, 100% { opacity: .45; } 50% { opacity: .9; } } /* The poster is the fallback, not a placeholder: it appears only if the globe cannot run at all, so nobody watches a photo cross-fade into a map. */ /* Scoped through .fn-globe so it outweighs `.fn img { display: block }`, which at (0,1,1) beats a lone class and left the poster showing over the globe. */ .fn-globe .fn-globe__fallback { display: none; } .fn-globe.is-failed .fn-globe__fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The OpenStreetMap credit stays — the basemap is licensed on the condition that it does — but it must not sit across the hero as a white bar. At rest it is the small info disc; hover, tap or keyboard focus opens the full credit. !important rather than a more specific selector: MapLibre's stylesheet is injected at runtime and therefore lands after this file, so it wins every specificity tie. Keying off its own maplibregl-compact-show class does not work either — MapLibre sets that class itself, and we would be fighting it. */ .fn-globe .maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner { display: none !important; } .fn-globe .maplibregl-ctrl-attrib:hover .maplibregl-ctrl-attrib-inner, .fn-globe .maplibregl-ctrl-attrib:focus-within .maplibregl-ctrl-attrib-inner { display: block !important; } .fn-globe .maplibregl-ctrl-attrib { min-height: 0; padding: 0; margin: 8px; border-radius: 999px; background: rgba(5, 4, 26, .45); opacity: .38; transition: opacity .2s ease; } .fn-globe .maplibregl-ctrl-attrib:hover, .fn-globe .maplibregl-ctrl-attrib:focus-within { padding: 2px 26px 2px 9px; background: rgba(5, 4, 26, .85); font-size: 10px; opacity: 1; } .fn-globe .maplibregl-ctrl-attrib, .fn-globe .maplibregl-ctrl-attrib a { color: var(--ink-2); } .fn-globe .maplibregl-ctrl-logo { opacity: .45; } @media (max-width: 900px) { /* Centred under the headline, and smaller: this is decoration on a phone, and a full-width WebGL canvas is a lot to ask of one. */ .fn-globe { max-height: 360px; max-width: 360px; } }