/** * Onboarding: header "Get started" CTA, the audience modal, and the Design-3 hero. * Loaded site-wide (header CTA appears on every page). * Uses the design tokens declared in templates.css :root, with hard fallbacks. */ /* ---- Buttons (defined here so they work on the homepage where cpt.css isn't loaded) ---- */ .aisg-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1; padding: 13px 24px; border-radius: 4px; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } .aisg-btn--primary { background: var(--aisg-red, #ae2514); color: #fff; } .aisg-btn--primary:hover { background: #8f1e10; color: #fff; transform: translateY(-1px); } .aisg-btn--outline { background: transparent; border-color: var(--aisg-line, #d7dbe0); color: var(--aisg-ink, #10151c); } .aisg-btn--outline:hover { border-color: var(--aisg-red, #ae2514); color: var(--aisg-red, #ae2514); } .aisg-btn--lg { padding: 16px 30px; font-size: 17px; } /* ---- Header utility links (FAQs / Contact Us) beside the CTA ---- */ .aisg-header-actions { display: inline-flex; align-items: center; gap: 20px; } .aisg-header-util { color: var(--aisg-ink, #1f1f1f) !important; font-family: inherit; font-size: 15px; font-weight: 500; text-decoration: none !important; white-space: nowrap; transition: color .15s ease; } .aisg-header-util:hover, .aisg-header-util:focus { color: var(--aisg-red, #ae2514) !important; } /* FAQs as an icon-only link (question mark in a circle): bigger + red, hover tooltip. */ .aisg-header-util--icon { position: relative; display: inline-flex; align-items: center; padding: 2px; color: var(--aisg-red, #ae2514) !important; } .aisg-header-util--icon::after { content: attr(aria-label); /* reflects the editable Utility-icon label */ position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); background: #1f1f1f; color: #fff; font-size: 12px; font-weight: 500; line-height: 1; padding: 6px 10px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 100; } .aisg-header-util--icon:hover::after, .aisg-header-util--icon:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } .aisg-header-util__icon { display: inline-block; width: 30px; height: 30px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 1024px) { .aisg-header-actions { gap: 10px; } .aisg-header-util { display: none; } /* keep mobile top bar to logo + CTA + hamburger; FAQ/Contact live in the footer */ } /* ---- Header CTA (replaces the social icons, top-right) ---- */ .aisg-header-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--aisg-red, #ae2514); color: #fff !important; font-weight: 700; font-size: 14px; line-height: 1; padding: 11px 20px; border: 1.5px solid transparent; border-radius: 4px; text-decoration: none !important; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; box-shadow: 0 2px 8px rgba(174, 37, 20, .25); } .aisg-header-cta:hover, .aisg-header-cta:focus { background: #8f1e10; color: #fff !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(174, 37, 20, .3); } /* Outline variant ("Upskill With Us"): transparent, RED border + text (matches the "I'm a…" pills), red tint on hover. */ .aisg-header-cta--outline { background: transparent; color: var(--aisg-red, #ae2514) !important; border-color: var(--aisg-red, #ae2514); box-shadow: none; } .aisg-header-cta--outline:hover, .aisg-header-cta--outline:focus { background: rgba(174, 37, 20, .08); color: var(--aisg-red, #ae2514) !important; transform: translateY(-1px); box-shadow: none; } /* Trailing envelope icon (CSS-masked so it survives Kadence's header-HTML kses and inherits the button's white via currentColor). */ .aisg-header-cta__icon { width: 17px; height: 17px; flex: 0 0 auto; display: inline-block; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") center / contain no-repeat; } /* Graduation-cap icon (overrides the envelope mask) for "Upskill With Us". */ .aisg-header-cta__icon--cap { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l10-4 10 4-10 4z'/%3E%3Cpath d='M6 10v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l10-4 10 4-10 4z'/%3E%3Cpath d='M6 10v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3C/svg%3E"); } /* ---- Selectable header icons (Customizer → AI Singapore — Header Buttons) ---- CSS-masked (survive Kadence header kses). The base .aisg-header-cta__icon / .aisg-header-util__icon set size + mask layout (center/contain/no-repeat); these override only the mask IMAGE. Each pairs -webkit + standard for compatibility. */ .aisg-hdr-ico--mail { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); } .aisg-hdr-ico--cap { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l10-4 10 4-10 4z'/%3E%3Cpath d='M6 10v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l10-4 10 4-10 4z'/%3E%3Cpath d='M6 10v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5'/%3E%3C/svg%3E"); } .aisg-hdr-ico--question { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); } .aisg-hdr-ico--arrow { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); } .aisg-hdr-ico--rocket { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l-2 7 7-2M12 2s5 2 5 9c0 3-2 5-2 5H9s-2-2-2-5c0-7 5-9 5-9z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l-2 7 7-2M12 2s5 2 5 9c0 3-2 5-2 5H9s-2-2-2-5c0-7 5-9 5-9z'/%3E%3C/svg%3E"); } .aisg-hdr-ico--user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E"); } .aisg-hdr-ico--search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 21l-4.35-4.35M11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 21l-4.35-4.35M11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14z'/%3E%3C/svg%3E"); } .aisg-hdr-ico--info { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); } .aisg-hdr-ico--calendar { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); } .aisg-hdr-ico--star { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15 9 22 9.5 17 14.5 18.5 22 12 18 5.5 22 7 14.5 2 9.5 9 9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15 9 22 9.5 17 14.5 18.5 22 12 18 5.5 22 7 14.5 2 9.5 9 9'/%3E%3C/svg%3E"); } /* Mobile header (#mobile-header): hide the CTA + utility links so the hamburger menu has room and isn't pushed off-screen. "Find your path" still lives in the hero and the menu drawer; FAQs/Contact are in the footer. DOM-scoped to the mobile header (not a breakpoint) so the desktop header CTA is never affected. */ .site-mobile-header-wrap [data-section="kadence_customizer_header_html"], .site-mobile-header-wrap .header-html { display: none !important; } /* ---- Design 3 hero slider (dark stage, split: text + branded media) ---- */ .aisg-hero3 { position: relative; background: radial-gradient(1100px 480px at 82% -12%, rgba(174, 37, 20, .38), transparent 60%), #14181d; color: #fff; overflow: hidden; } /* Techy particle network canvas sits behind the hero content. */ .aisg-hero3__particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .aisg-hslider__viewport { overflow: hidden; position: relative; z-index: 1; } .aisg-hslider__track { display: flex; transition: transform .5s cubic-bezier(.4, 0, .2, 1); } .aisg-hslide { flex: 0 0 100%; min-width: 0; } .aisg-hslide__inner { display: grid; grid-template-columns: 1fr 1.12fr; gap: 56px; align-items: center; padding: 88px clamp(22px, 5vw, 64px) 96px; min-height: clamp(560px, 72vh, 760px); } .aisg-hslide .aisg-eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-weight: 700; color: #ff8a73; margin: 0 0 12px; } .aisg-hslide__heading { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; margin: 0 0 16px; color: #fff; } .aisg-hslide__subtext { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .82); margin: 0 0 26px; max-width: 540px; } .aisg-hslide__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 10px; } .aisg-btn--ghost-light { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; } .aisg-btn--ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; } /* Hero buttons: lighter weight (not bold) + roomier padding. */ .aisg-hslide__cta .aisg-btn { font-weight: 500; padding: 16px 34px; } /* Secondary hero action ("Explore Programmes") as a plain white text link + arrow. */ .aisg-hslide__textlink { display: inline-flex; align-items: center; align-self: center; gap: 8px; color: #fff; font-size: 16px; font-weight: 500; text-decoration: none; transition: opacity .15s ease; } .aisg-hslide__textlink span { transition: transform .15s ease; } .aisg-hslide__textlink:hover { color: #fff; opacity: .82; } .aisg-hslide__textlink:hover span { transform: translateX(4px); } /* Premium media frame — blends into the dark stage (no chrome); 16:9. */ .aisg-vframe { position: relative; border-radius: 16px; padding: 1px; /* thin gradient ring that catches the light */ background: linear-gradient(155deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .03) 38%, rgba(174, 37, 20, .18)); box-shadow: 0 40px 90px -20px rgba(0, 0, 0, .65); } /* faint outer glow so it sits in the stage rather than on top of it */ .aisg-vframe::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); pointer-events: none; } .aisg-vframe__media { position: relative; display: block; aspect-ratio: 2 / 1; border-radius: 15px; overflow: hidden; background: #0f1318 center center / cover no-repeat; } /* When the video poster is a logo/branded image (not a 16:9 still), show it whole, centred on the dark frame, instead of cover-cropping it. */ .aisg-vframe__media[data-aisg-video-inline] { background-size: contain; background-position: center; } .aisg-vframe__media::after { content: ""; position: absolute; inset: 0; background: rgba(16, 21, 28, .12); transition: background .2s ease; } .aisg-vframe__media:hover::after { background: rgba(16, 21, 28, .22); } .aisg-vframe__media--img::after { display: none; } .aisg-vframe__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .95); color: var(--aisg-red, #ae2514); font-size: 24px; padding-left: 5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: transform .2s ease; } .aisg-vframe__media:hover .aisg-vframe__play { transform: translate(-50%, -50%) scale(1.08); } .aisg-vframe__media.is-playing::after { display: none; } .aisg-vframe__media .aisg-hero2__iframe, .aisg-vframe__media iframe, .aisg-vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Slider controls */ .aisg-hslider__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; /* hard-pin to a perfect circle — overrides Kadence's global button padding / min-height */ width: 44px !important; height: 44px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; box-sizing: border-box !important; flex: 0 0 auto; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease, border-color .15s ease; } .aisg-hslider__arrow:hover { background: rgba(255, 255, 255, .18); border-color: #fff; } .aisg-hslider__arrow--prev { left: 18px; } .aisg-hslider__arrow--next { right: 18px; } .aisg-hslider__dots { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; gap: 9px; justify-content: center; z-index: 5; } .aisg-hslider__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .35); cursor: pointer; transition: background .15s ease, transform .15s ease; } .aisg-hslider__dot.is-active { background: #fff; transform: scale(1.25); } .aisg-hero3:not(.is-multi) .aisg-hslider__arrow, .aisg-hero3:not(.is-multi) .aisg-hslider__dots { display: none; } /* When the floating "Find your path" bar overlaps the hero's lower edge it would hide the slider dots — lift the dots above the bar. Only when that bar is present (`.aisg-fyp-wrap--hero`) and only >600px (≤600px the bar sits below the hero, not over it, so the dots stay put). */ @media ( min-width: 601px ) { body:has( .aisg-fyp-wrap--hero ) .aisg-hslider__dots { bottom: 92px; } } /* Arrows only show on wide screens where the centred container leaves a gutter; below that, the dots + swipe handle navigation (so arrows never overlap text). */ @media (max-width: 1199px) { .aisg-hslider__arrow { display: none; } } @media (max-width: 860px) { .aisg-hslide__inner { grid-template-columns: 1fr; gap: 26px; padding: 48px clamp(20px, 6vw, 32px) 60px; text-align: center; min-height: 0; } .aisg-hslide__subtext { margin-left: auto; margin-right: auto; } .aisg-hslide__cta { justify-content: center; } .aisg-hslide__media { max-width: 560px; margin: 0 auto; width: 100%; } } @media (prefers-reduced-motion: reduce) { .aisg-hslider__track { transition: none; } } /* ===== Design 3 — premium polish for the sections below the hero ===== */ /* Crisp dark→light seam: first section is clean white with a soft depth shadow up top. */ .aisg-home-design-3 .aisg-hero3 + .aisg-section { background: #fff; box-shadow: inset 0 24px 50px -34px rgba(0, 0, 0, .55); } /* Calmer vertical rhythm + a warmer muted tone for alternating sections. */ .aisg-home-design-3 .aisg-section { padding-top: 92px; padding-bottom: 92px; } .aisg-home-design-3 .aisg-section--muted { background: #faf7f6; } /* AI For Everyone gets its own soft warm band (AI4E orange identity) to stand apart. */ .aisg-home-design-3 .aisg-ai4e.aisg-section--muted { background: #fff4ea; } .aisg-home-design-3 .aisg-section__title { letter-spacing: -.01em; } /* Cards: crisp hairline + a whisper of shadow (not puffy); clean lift on hover. */ .aisg-home-design-3 .aisg-pillar-card, .aisg-home-design-3 .aisg-product-card { border: 1px solid #eceae9 !important; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(16, 21, 28, .04) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .aisg-home-design-3 .aisg-pillar-card:hover, .aisg-home-design-3 .aisg-product-card:hover { transform: translateY(-4px); border-color: #e2dcda !important; box-shadow: 0 14px 32px -16px rgba(16, 21, 28, .2) !important; } /* Flat, crisp icon medallion (no puffy drop shadow). */ .aisg-home-design-3 .aisg-pillar-card__icon, .aisg-home-design-3 .aisg-programme-card__icon { box-shadow: none !important; } .aisg-home-design-3 .aisg-pillar-card__title { letter-spacing: -.01em; } /* ===== Restrained palette — kill the multi-colour tones; brand red is the only accent. ===== */ /* Icon medallions: red icon on a quiet neutral (was red/violet/blue/amber/green/pink). */ .aisg-home-design-3 .aisg-pillar-card__icon, .aisg-home-design-3 .aisg-programme-card__icon, .aisg-home-design-3 .aisg-cta-box__icon { background: #f4f1f0 !important; color: var(--aisg-red, #ae2514) !important; } /* Category tags: quiet grey, not coloured. */ .aisg-home-design-3 .aisg-product-card__cat, .aisg-home-design-3 .aisg-latest-card__cat { background: #f1f0ef !important; color: #5a6573 !important; } /* Align the AI-For-Everyone play button to the brand red (was a brighter red). */ .aisg-home-design-3 .aisg-video-card__play { background: rgba(174, 37, 20, .95) !important; } /* ---- Onboarding modal ---- */ .aisg-ob { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s ease; } .aisg-ob.is-open { visibility: visible; opacity: 1; } .aisg-ob__backdrop { position: absolute; inset: 0; background: rgba(16, 21, 28, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .aisg-ob__dialog { position: relative; background: #fff; border-radius: 20px; max-width: 640px; width: 100%; padding: 40px; box-shadow: 0 30px 80px rgba(16, 21, 28, .35); transform: translateY(12px) scale(.97); transition: transform .25s ease; max-height: 90vh; overflow-y: auto; } .aisg-ob.is-open .aisg-ob__dialog { transform: none; } .aisg-ob__close { position: absolute; top: 12px; right: 16px; background: transparent; border: 0; font-size: 30px; line-height: 1; color: #9aa3ad; cursor: pointer; padding: 4px 8px; transition: color .15s ease; } .aisg-ob__close:hover { color: var(--aisg-ink, #10151c); } /* ---- Mailing-list modal (the "Join Mailing List" popup) ---- */ .aisg-mlm { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s ease; } .aisg-mlm.is-open { visibility: visible; opacity: 1; } .aisg-mlm__backdrop { position: absolute; inset: 0; background: rgba(16, 21, 28, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .aisg-mlm__dialog { position: relative; background: #fff; border-radius: 20px; max-width: 560px; width: 100%; padding: 40px; box-shadow: 0 30px 80px rgba(16, 21, 28, .35); transform: translateY(12px) scale(.97); transition: transform .25s ease; max-height: 90vh; overflow-y: auto; } .aisg-mlm.is-open .aisg-mlm__dialog { transform: none; } .aisg-mlm__close { position: absolute; top: 12px; right: 16px; background: transparent; border: 0; font-size: 30px; line-height: 1; color: #9aa3ad; cursor: pointer; padding: 4px 8px; z-index: 1; transition: color .15s ease; } .aisg-mlm__close:hover { color: var(--aisg-ink, #10151c); } .aisg-mlm__content > :first-child { margin-top: 0; } .aisg-mlm__content > :last-child { margin-bottom: 0; } /* The signup-form shortcode sits flush inside the dialog (the dialog is the card). */ .aisg-mlm__content .aisg-ml { max-width: none; margin: 0; padding: 0; background: none; border-radius: 0; } @media (max-width: 600px) { .aisg-mlm__dialog { padding: 28px 20px; border-radius: 16px; } } @media (prefers-reduced-motion: reduce) { .aisg-mlm, .aisg-mlm__dialog { transition: none !important; } } .aisg-ob__step { display: none; } .aisg-ob__step.is-active { display: block; animation: aisgObIn .28s ease; } @keyframes aisgObIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .aisg-ob__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--aisg-red, #ae2514); margin: 0 0 6px; } .aisg-ob__title { font-size: 30px; line-height: 1.15; margin: 0 0 8px; color: var(--aisg-ink, #10151c); } .aisg-ob__sub { color: var(--aisg-muted, #5a6573); margin: 0 0 24px; font-size: 16px; } .aisg-ob__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .aisg-ob__card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: #fff; border: 1.5px solid var(--aisg-line, #e6e8ec); border-radius: 14px; padding: 26px 20px; cursor: pointer; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease; } a.aisg-ob__card:hover { text-decoration: none; } .aisg-ob__card:hover, .aisg-ob__card:focus, .aisg-ob__card:focus-visible { background: #fdf3f1 !important; /* faint brand-red wash, not the old orange */ border-color: var(--aisg-red, #ae2514); transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(174, 37, 20, .28); outline: none; } .aisg-ob__card:hover .aisg-ob__card-icon, .aisg-ob__card:focus .aisg-ob__card-icon { background: var(--aisg-red, #ae2514); color: #fff; } .aisg-ob__card-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(174, 37, 20, .08); color: var(--aisg-red, #ae2514); } .aisg-ob__card-icon svg { width: 22px; height: 22px; } .aisg-ob__card-label { font-weight: 700; font-size: 16px; color: var(--aisg-ink, #10151c); } .aisg-ob__card-desc { font-size: 13px; color: var(--aisg-muted, #5a6573); } .aisg-ob__back { background: transparent; border: 0; color: var(--aisg-red, #ae2514); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0; margin: 0 0 14px; } .aisg-ob__back:hover { text-decoration: underline; } .aisg-ob__links { display: flex; flex-direction: column; gap: 10px; } .aisg-ob__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--aisg-line, #e6e8ec); border-radius: 12px; text-decoration: none; color: var(--aisg-ink, #10151c); font-weight: 600; transition: border-color .15s ease, background .15s ease, transform .15s ease, color .15s ease; } .aisg-ob__link:hover { border-color: var(--aisg-red, #ae2514); background: #fbf4f3; transform: translateX(2px); color: var(--aisg-red, #ae2514); } body.aisg-ob-lock { overflow: hidden; } @media (max-width: 560px) { .aisg-ob__dialog { padding: 28px 20px; border-radius: 16px; } .aisg-ob__cards { grid-template-columns: 1fr; } .aisg-ob__title { font-size: 24px; } .aisg-hslide__heading { font-size: 30px; } } @media (prefers-reduced-motion: reduce) { .aisg-ob, .aisg-ob__dialog, .aisg-ob__step, .aisg-ob__card, .aisg-ob__link, .aisg-header-cta, .aisg-btn { transition: none !important; animation: none !important; } } /* =========================================================================== Floating action buttons — homepage only. A bottom-right stack: "Join mailing list" (white) on top of "Find your path" (red). Each circle expands LEFTWARD into a labelled pill on hover/focus. The stack reveals after the hero scrolls past (.is-visible) and hides while the audience modal is open. ======================================================================== */ .aisg-fab-stack { position: fixed; right: 24px; bottom: 24px; z-index: 999; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; } .aisg-fab-stack.is-visible { opacity: 1; transform: none; pointer-events: auto; } body.aisg-ob-lock .aisg-fab-stack { opacity: 0 !important; pointer-events: none !important; } /* Kadence's "back to top" button shares the bottom-right corner with the FAB stack. When scroll-to-top is enabled, PHP adds .aisg-fab-stack--above-scrollup (aisgwptheme_onboarding_fab) so the FAB stack sits ABOVE the back-to-top — done in PHP rather than :has() so it's reliable. */ .aisg-fab-stack--above-scrollup { bottom: 104px; } .aisg-fab { display: inline-flex; align-items: center; height: 56px; padding: 0; border: 0; cursor: pointer; border-radius: 999px; overflow: hidden; text-decoration: none; transition: box-shadow .2s ease, background-color .2s ease, color .2s ease, transform .15s ease; } .aisg-fab:hover { transform: translateY(-1px); } .aisg-fab:focus-visible { outline: 3px solid var(--aisg-red, #ae2514); outline-offset: 2px; } /* DOM order is [label, icon] → label sits left of the icon (which stays anchored at the stack's right edge); the label expands leftward on hover. */ .aisg-fab__icon { flex: 0 0 56px; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; } .aisg-fab__icon svg { width: 24px; height: 24px; } .aisg-fab__label { max-width: 0; opacity: 0; white-space: nowrap; font-weight: 600; font-size: 15px; overflow: hidden; padding-left: 0; transition: max-width .3s ease, opacity .25s ease, padding .3s ease; } .aisg-fab:hover .aisg-fab__label, .aisg-fab:focus-visible .aisg-fab__label { max-width: 220px; opacity: 1; padding-left: 22px; } /* Primary FAB — Find your path (solid red). */ .aisg-fab--path { background: var(--aisg-red, #ae2514); color: #fff; box-shadow: 0 8px 20px -6px rgba(16, 21, 28, .45), 0 2px 6px rgba(16, 21, 28, .2); } .aisg-fab--path:hover { background: #97200f; box-shadow: 0 12px 28px -8px rgba(16, 21, 28, .5), 0 2px 6px rgba(16, 21, 28, .2); } /* Secondary FAB — Join mailing list (white surface, red icon). */ .aisg-fab--mail { background: #fff; color: var(--aisg-red, #ae2514); box-shadow: 0 8px 20px -6px rgba(16, 21, 28, .35), 0 0 0 1px rgba(16, 21, 28, .07); } .aisg-fab--mail:hover { color: #97200f; box-shadow: 0 12px 28px -8px rgba(16, 21, 28, .42), 0 0 0 1px rgba(16, 21, 28, .1); } @media ( max-width: 600px ) { .aisg-fab-stack { right: 16px; bottom: 16px; } .aisg-fab-stack--above-scrollup { bottom: 88px; } .aisg-fab__label { display: none; } /* icon-only on small screens */ } @media ( prefers-reduced-motion: reduce ) { .aisg-fab-stack { transition: opacity .2s ease; transform: none; } .aisg-fab-stack.is-visible { transform: none; } .aisg-fab:hover { transform: none; } } /* =========================================================================== * "Find your path" router bar ([aisg_find_your_path]) — a floating white card * placed just under the hero: brand mark + two icon dropdowns (persona → goal), * sourced from the "I am a…" menu. Skin-agnostic (brand-red + neutral tokens). * ======================================================================== */ .aisg-fyp-wrap { position: relative; z-index: 5; margin: 28px 0; } .aisg-fyp-wrap--hero { margin-top: -48px; margin-bottom: 8px; } /* float over the hero's lower edge */ .aisg-fyp { display: flex; align-items: center; gap: clamp( 14px, 1.8vw, 26px ); background: #fff; border: 1px solid var( --aisg-line, #e7e7ea ); border-radius: 20px; box-shadow: 0 20px 50px rgba( 16, 21, 28, .14 ), 0 2px 6px rgba( 16, 21, 28, .06 ); padding: 16px clamp( 16px, 2.2vw, 26px ); } /* Brand mark */ .aisg-fyp__brand { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; } .aisg-fyp__brand-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var( --aisg-red, #ae2514 ); box-shadow: inset 0 0 0 2px currentColor; } .aisg-fyp__brand-label { color: var( --aisg-red, #ae2514 ); font-weight: 800; font-size: 15px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; } .aisg-fyp__divider { flex: 0 0 auto; width: 1px; height: 40px; background: var( --aisg-line, #e7e7ea ); } /* "lead text + dropdown" group */ .aisg-fyp__group { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; } .aisg-fyp__lead { flex: 0 0 auto; white-space: nowrap; color: var( --aisg-ink, #1f1f1f ); font-weight: 600; font-size: clamp( 15px, 1.2vw, 17px ); } /* The dropdown field */ .aisg-fyp__field { position: relative; flex: 1 1 auto; min-width: 0; } /* The persona ("I am a…") select is compact (short labels); the goal select ("and I want to explore…") then takes the remaining width of the bar. */ .aisg-fyp__group:not( .aisg-fyp__group--goal ) { flex: 0 1 auto; } .aisg-fyp__group:not( .aisg-fyp__group--goal ) .aisg-fyp__field { flex: 0 0 auto; width: 210px; } .aisg-fyp__chevron { position: absolute; right: 14px; top: 50%; transform: translateY( -50% ); width: 16px; height: 16px; color: #70707a; pointer-events: none; } .aisg-fyp__select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; margin: 0; font-family: inherit; font-size: clamp( 15px, 1.2vw, 17px ); font-weight: 600; line-height: 1.3; color: var( --aisg-ink, #1f1f1f ); background: #fff; border: 1px solid var( --aisg-line, #e7e7ea ); border-radius: 14px; padding: 13px 42px 13px 18px; cursor: pointer; box-shadow: 0 1px 2px rgba( 16, 21, 28, .04 ); transition: border-color .15s ease, box-shadow .15s ease; } .aisg-fyp__select:hover { border-color: #d7d7dd; } .aisg-fyp__select:focus-visible { outline: none; border-color: var( --aisg-red, #ae2514 ); box-shadow: 0 0 0 3px rgba( 174, 37, 20, .18 ); } /* "Go" button — navigates to the currently chosen goal (works even when a persona has a single goal, where the goal