/** * Trilliant Simulations — Page Section Styles * --------------------------------------------------------------- * Ported from the five source HTML pages. Original class names and * section IDs are preserved verbatim, so the Elementor containers only * need to carry the matching CSS class / CSS ID for the design to apply. * * This is the "not expressible in the Elementor UI" bucket: pseudo-element * textures and glows, 1px-gap hairline grids, absolute-positioned badges, * hover transforms, marquee keyframes and the filterable course grid. * * NOTE ON HERO TOP PADDING * The source pages had no body offset — each hero padded 120/128px to clear * the 64px fixed header. header-footer.css instead reserves that 64px on * , so the hero rules below are reduced by 64px to keep the same * visual gap. Elementor's own padding controls are left at 0 for heroes. * --------------------------------------------------------------- */ /* ===== HOME ===== */ /* ─── HERO ───────────────────────────────────────────────── */ #hero { padding: 56px 0 80px; /* was 120px; 64px now reserved on */ background: var(--white); border-bottom: 1px solid var(--rule-2); overflow: hidden; position: relative; } /* subtle ruled texture */ #hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 39px, var(--rule-2) 39px, var(--rule-2) 40px ); opacity: 0.45; pointer-events: none; } .hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; position: relative; z-index: 1; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum); border: 1px solid var(--rule); background: var(--plum-lt); padding: 5px 14px; border-radius: 4px; margin-bottom: 24px; } .hero-eyebrow::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--plum); } #hero h1 { margin-bottom: 22px; } .hero-lead { font-size: 17px; line-height: 1.7; color: var(--ink-3); max-width: 500px; margin-bottom: 36px; } .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .hero-rule { margin: 44px 0; border: none; border-top: 1px solid var(--rule); } .hero-metrics { display: flex; gap: 40px; } .metric-n { font-family: 'Rubik', sans-serif; font-size: 28px; font-weight: 600; color: var(--plum); letter-spacing: -0.5px; line-height: 1; } .metric-l { font-size: 13px; color: var(--ink-4); margin-top: 4px; font-weight: 500; } /* Right column: structured card mosaic */ .hero-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; } .m-card { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; background: var(--surface); } .m-card.tall { grid-row: span 2; } .img-ph { width: 100%; height: 100%; min-height: 160px; background: var(--surface); border: 1.5px dashed var(--rule); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-4); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; gap: 8px; } .img-ph svg { opacity: 0.3; } .m-card .img-ph { border-radius: 0; border: none; min-height: 170px; } .m-card.tall .img-ph { min-height: 358px; } .m-card-caption { padding: 14px 16px; border-top: 1px solid var(--rule); background: var(--white); } .m-card-caption strong { font-size: 13px; font-weight: 600; color: var(--ink); display: block; } .m-card-caption span { font-size: 12px; color: var(--ink-4); } /* floating info tag */ .info-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--rule); padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); } .info-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--plum); flex-shrink: 0; } /* ─── SECTION BASE ───────────────────────────────────────── */ section { padding: 96px 0; } .sec-label { font-family: 'Karla', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); margin-bottom: 16px; display: block; } .sec-head { max-width: 640px; margin-bottom: 56px; } .sec-head h2 { margin-bottom: 14px; } .sec-head p { font-size: 16px; color: var(--ink-3); } .sec-head.center { text-align: center; margin-left: auto; margin-right: auto; } /* ─── PROBLEM SECTION ────────────────────────────────────── */ #problem { background: var(--surface); } .problem-layout { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: start; } .problem-img-box { position: relative; border-radius: 12px; overflow: visible; } .problem-img-box .img-ph { min-height: 420px; border-radius: 12px; border-color: var(--rule); } .stat-card { position: absolute; bottom: -20px; right: -24px; background: var(--plum); color: #fff; border-radius: 10px; padding: 18px 22px; text-align: left; box-shadow: 0 12px 40px rgba(128,39,140,0.22); } .stat-card-n { font-family: 'Rubik', sans-serif; font-size: 34px; font-weight: 700; line-height: 1; display: block; } .stat-card-l { font-size: 12px; opacity: 0.8; margin-top: 5px; display: block; max-width: 120px; line-height: 1.4; } .prob-cards { display: flex; flex-direction: column; gap: 0; } .prob-card { display: grid; grid-template-columns: 52px 1fr; gap: 20px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--rule); transition: background 0.15s; } .prob-card:first-child { padding-top: 0; } .prob-card:last-child { border-bottom: none; } .prob-icon { width: 44px; height: 44px; border-radius: 8px; background: var(--plum-lt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .prob-icon svg { width: 20px; height: 20px; stroke: var(--plum); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .prob-card h4 { margin-bottom: 6px; } .prob-card p { font-size: 14px; } /* ─── WHAT IS ─────────────────────────────────────────────── */ #what { background: var(--white); } .what-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .what-img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .what-img-grid .img-ph { min-height: 190px; border-color: var(--rule); } .what-img-grid .wide { grid-column: span 2; } .what-img-grid .wide .img-ph { min-height: 170px; } .check-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 28px; } .check-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); font-weight: 500; } .check-list li::before { content: ''; display: block; width: 18px; height: 18px; flex-shrink: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%2380278c' opacity='.12'/%3E%3Cpath d='M5 9l3 3 5-5' stroke='%2380278c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; } /* ─── MODULES ─────────────────────────────────────────────── */ #modules { background: var(--surface); } .mod-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; } .mod-tile { background: var(--white); padding: 28px 20px; transition: background 0.16s; } .mod-tile:hover { background: var(--plum-lt); } .mod-n { font-family: 'Rubik', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--plum-md); display: block; margin-bottom: 12px; } .mod-icon-wrap { width: 40px; height: 40px; border-radius: 8px; background: var(--surface); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .mod-icon-wrap svg { width: 20px; height: 20px; stroke: var(--plum); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .mod-tile h4 { font-size: 14px; margin-bottom: 8px; line-height: 1.3; } .mod-tile p { font-size: 12px; color: var(--ink-4); line-height: 1.55; } /* ─── CATEGORY TICKER ─────────────────────────────────────── */ #ticker { padding: 40px 0; background: var(--white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; } .ticker-label { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 20px; } .ticker-track-outer { overflow: hidden; position: relative; } .ticker-track-outer::before, .ticker-track-outer::after { content: ''; position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2; } .ticker-track-outer::before { left: 0; background: linear-gradient(to right, white, transparent); } .ticker-track-outer::after { right: 0; background: linear-gradient(to left, white, transparent); } .ticker-track { display: flex; gap: 10px; width: max-content; animation: scroll-left 28s linear infinite; } .ticker-track:hover { animation-play-state: paused; } @keyframes scroll-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } .cat-chip { display: flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--ink-2); flex-shrink: 0; } /* ─── AUDIENCE ────────────────────────────────────────────── */ #audience { background: var(--white); } .aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .aud-card { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--white); display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.2s; } .aud-card:hover { border-color: var(--plum-md); transform: translateY(-4px); } .aud-img { height: 200px; overflow: hidden; } .aud-img .img-ph { height: 100%; border-radius: 0; border: none; background: var(--surface); font-size: 40px; } .aud-body { padding: 22px 24px; flex: 1; } .aud-tag { display: inline-block; padding: 3px 10px; border-radius: 4px; background: var(--plum-lt); color: var(--plum); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; } .aud-body h4 { margin-bottom: 8px; } .aud-body p { font-size: 14px; color: var(--ink-3); } /* last two centred */ .aud-grid .aud-card:nth-child(4) { grid-column: 1 / 2; } .aud-grid .aud-card:nth-child(5) { grid-column: 2 / 3; } /* ─── EXPERT ──────────────────────────────────────────────── */ #expert { background: var(--ink); color: #fff; } #expert h2 { color: #fff; } #expert p { color: rgba(255,255,255,0.6); } #expert .sec-label { color: rgba(255,255,255,0.4); } .expert-layout { display: grid; grid-template-columns: 380px 1fr; gap: 80px; align-items: center; } .expert-photo { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); } .expert-photo .img-ph { min-height: 460px; border-radius: 0; border: none; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.25); font-size: 48px; } .expert-content h2 { margin-bottom: 20px; } .expert-id { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); margin-bottom: 32px; } .expert-av { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); background: rgba(128,39,140,0.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; } .expert-id strong { display: block; font-size: 15px; font-weight: 600; color: #fff; } .expert-id span { font-size: 12px; color: rgba(255,255,255,0.45); } blockquote { font-family: 'Rubik', sans-serif; font-size: 20px; font-weight: 400; line-height: 1.55; color: rgba(255,255,255,0.85); border-left: 3px solid var(--plum); padding-left: 22px; margin: 0 0 28px; font-style: italic; } .brand-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; } .brand-chip { padding: 7px 14px; border-radius: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6); transition: all 0.15s; cursor: default; } .brand-chip:hover { background: rgba(128,39,140,0.3); border-color: var(--plum-md); color: #fff; } /* ─── WHY SECTION ─────────────────────────────────────────── */ #why { background: var(--surface); } .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .why-card { background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 32px 28px; transition: border-color 0.2s, transform 0.2s; } .why-card:hover { border-color: var(--plum-md); transform: translateY(-4px); } .why-card-num { font-family: 'Rubik', sans-serif; font-size: 36px; font-weight: 700; color: var(--rule); line-height: 1; margin-bottom: 20px; display: block; } .why-card h4 { font-size: 16px; margin-bottom: 10px; } .why-card p { font-size: 14px; color: var(--ink-3); } /* ─── IMAGE ROW ───────────────────────────────────────────── */ #imgrow { padding: 0; } .img-row-grid { display: grid; grid-template-columns: repeat(4, 1fr); } .img-row-item { position: relative; overflow: hidden; } .img-row-item .img-ph { min-height: 260px; border-radius: 0; border: none; border-right: 1px solid var(--rule); } .img-row-item:last-child .img-ph { border-right: none; } .img-row-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(15,13,18,0.7); backdrop-filter: blur(4px); padding: 10px 14px; font-size: 12px; font-weight: 600; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; } /* ─── CTA SECTION ─────────────────────────────────────────── */ #cta { background: var(--ink); padding: 96px 0; border-top: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; } #cta::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(128,39,140,0.18) 0%, transparent 60%); pointer-events: none; } .cta-inner { text-align: center; position: relative; z-index: 1; } .cta-inner h2 { color: #fff; font-size: clamp(28px, 3.5vw, 42px); margin-bottom: 18px; } .cta-inner p { color: rgba(255,255,255,0.55); font-size: 17px; max-width: 560px; margin: 0 auto 44px; } .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn-white { background: #fff; color: var(--ink); font-weight: 700; } .btn-white:hover { background: rgba(255,255,255,0.9); } /* ===== ABOUT ===== */ /* ── SECTION BASE ────────────────────────────────────────── */ section { padding: 96px 0; } .sec-label { font-family: 'Karla', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); margin-bottom: 16px; display: block; } .sec-head { max-width: 640px; margin-bottom: 56px; } .sec-head h2 { margin-bottom: 14px; } .sec-head p { font-size: 16px; color: var(--ink-3); } .sec-head.center { text-align: center; margin-left: auto; margin-right: auto; } /* ── IMG PLACEHOLDER ─────────────────────────────────────── */ .img-ph { width: 100%; background: var(--surface); border: 1.5px dashed var(--rule); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-4); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; gap: 8px; } .img-ph svg { opacity: 0.3; } /* ── ABOUT PAGE: HERO ────────────────────────────────────── */ #au-hero { padding: 64px 0 96px; /* was 128px; 64px now reserved on */ background: var(--white); border-bottom: 1px solid var(--rule-2); position: relative; overflow: hidden; } #au-hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 39px, var(--rule-2) 39px, var(--rule-2) 40px ); opacity: 0.45; pointer-events: none; } .au-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .au-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum); border: 1px solid var(--rule); background: var(--plum-lt); padding: 5px 14px; border-radius: 4px; margin-bottom: 24px; } .au-hero-eyebrow::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--plum); } #au-hero h1 { margin-bottom: 22px; } .au-hero-subtitle { font-size: 18px; line-height: 1.65; color: var(--ink-3); max-width: 480px; } /* right side visual stack */ .au-hero-visual { display: flex; flex-direction: column; gap: 14px; } .au-hero-img-main { border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--surface); } .au-hero-img-main .img-ph { min-height: 280px; border-radius: 0; border: none; } .au-hero-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; } .au-stat-tile { background: var(--white); padding: 20px 18px; text-align: center; } .au-stat-n { font-family: 'Rubik', sans-serif; font-size: 26px; font-weight: 600; color: var(--plum); letter-spacing: -0.5px; display: block; line-height: 1; } .au-stat-l { font-size: 12px; color: var(--ink-4); margin-top: 5px; font-weight: 500; line-height: 1.35; } /* breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-4); margin-bottom: 32px; font-weight: 500; } .breadcrumb a { color: var(--ink-4); transition: color 0.15s; } .breadcrumb a:hover { color: var(--plum); } .breadcrumb-sep { display: block; width: 14px; height: 1px; background: var(--ink-4); opacity: 0.4; } .breadcrumb span { color: var(--ink-2); } /* ── ABOUT: MAKING RETAIL LEARNING PRACTICAL ─────────────── */ #au-about { background: var(--surface); } .au-about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .au-about-content h2 { margin-bottom: 24px; } .au-about-content p { margin-bottom: 18px; } .au-about-content p:last-child { margin-bottom: 0; } .au-about-visual { display: flex; flex-direction: column; gap: 16px; } .au-about-img { border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); } .au-about-img .img-ph { min-height: 260px; border-radius: 0; border: none; background: var(--white); } /* pull-quote card */ .pull-quote { border: 1px solid var(--rule); border-radius: 10px; background: var(--white); padding: 24px 26px; border-left: 3px solid var(--plum); } .pull-quote p { font-family: 'Rubik', sans-serif; font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.55; font-style: italic; margin: 0; } .pull-quote cite { display: block; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.06em; text-transform: uppercase; font-style: normal; } /* inline info tile row */ .info-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .info-tile { background: var(--plum-lt); border-radius: 10px; padding: 18px 20px; border: 1px solid rgba(128,39,140,0.12); } .info-tile strong { display: block; font-family: 'Rubik', sans-serif; font-size: 22px; font-weight: 700; color: var(--plum); line-height: 1; } .info-tile span { font-size: 12px; color: var(--ink-3); margin-top: 5px; display: block; } /* ── PURPOSE SECTION ─────────────────────────────────────── */ #au-purpose { background: var(--white); } .au-purpose-layout { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: center; } .au-purpose-copy h2 { margin-bottom: 22px; } .au-purpose-copy p { margin-bottom: 18px; } .au-purpose-copy p:last-of-type { margin-bottom: 0; } /* three-pillar strip */ .pillar-row { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; } .pillar-item { display: flex; align-items: flex-start; gap: 18px; padding: 24px 26px; border-bottom: 1px solid var(--rule); background: var(--white); transition: background 0.15s; } .pillar-item:last-child { border-bottom: none; } .pillar-item:hover { background: var(--surface); } .pillar-num { font-family: 'Rubik', sans-serif; font-size: 13px; font-weight: 700; color: var(--plum-md); min-width: 28px; padding-top: 2px; letter-spacing: 0.05em; } .pillar-item h4 { font-size: 15px; margin-bottom: 5px; } .pillar-item p { font-size: 13px; color: var(--ink-4); margin: 0; line-height: 1.55; } /* ── WHY WE EXIST ────────────────────────────────────────── */ #au-why { background: var(--surface); } .au-why-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .au-why-copy h2 { margin-bottom: 14px; } .au-why-copy > p { margin-bottom: 32px; } .au-why-img { border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); position: sticky; top: 88px; } .au-why-img .img-ph { min-height: 400px; border-radius: 0; border: none; background: var(--white); } /* reason list */ .reason-list { display: flex; flex-direction: column; gap: 0; } .reason-item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--rule); } .reason-item:last-child { border-bottom: none; } .reason-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--plum-lt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .reason-icon svg { width: 18px; height: 18px; stroke: var(--plum); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .reason-item h4 { font-size: 15px; margin-bottom: 5px; line-height: 1.3; } .reason-item p { font-size: 14px; color: var(--ink-4); margin: 0; line-height: 1.55; } /* ── EXPERT INPUT ────────────────────────────────────────── */ #au-expert { background: var(--ink); padding: 96px 0; color: #fff; } #au-expert h2 { color: #fff; } #au-expert p { color: rgba(255,255,255,0.6); } #au-expert .sec-label { color: rgba(255,255,255,0.35); } .au-expert-layout { display: grid; grid-template-columns: 360px 1fr; gap: 80px; align-items: center; } .au-expert-photo { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); } .au-expert-photo .img-ph { min-height: 440px; border-radius: 0; border: none; background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.2); } .au-expert-photo .img-ph svg { opacity: 0.15; } .au-expert-id { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); margin-bottom: 30px; } .au-expert-av { width: 44px; height: 44px; border-radius: 50%; background: rgba(128,39,140,0.4); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .au-expert-av svg { width: 22px; height: 22px; stroke: rgba(255,255,255,0.7); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .au-expert-id strong { display: block; font-size: 15px; font-weight: 600; color: #fff; } .au-expert-id span { font-size: 12px; color: rgba(255,255,255,0.4); } .au-expert-content blockquote { font-family: 'Rubik', sans-serif; font-size: 20px; font-weight: 400; line-height: 1.6; color: rgba(255,255,255,0.82); border-left: 3px solid var(--plum); padding-left: 22px; margin: 0 0 26px; font-style: italic; } .au-expert-content p { margin-bottom: 16px; } .au-expert-content p:last-of-type { margin-bottom: 0; } .brand-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; } .brand-chip { padding: 7px 14px; border-radius: 6px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.55); transition: all 0.15s; cursor: default; } .brand-chip:hover { background: rgba(128,39,140,0.3); border-color: var(--plum-md); color: #fff; } /* experience timeline strip */ .exp-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; overflow: hidden; margin-top: 32px; } .exp-tile { background: rgba(255,255,255,0.03); padding: 20px 18px; text-align: center; } .exp-tile strong { display: block; font-family: 'Rubik', sans-serif; font-size: 26px; font-weight: 700; color: var(--plum-md); line-height: 1; } .exp-tile span { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 5px; display: block; } /* ── CTA ─────────────────────────────────────────────────── */ #au-cta { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .au-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .au-cta-copy h2 { margin-bottom: 16px; } .au-cta-copy p { margin-bottom: 32px; font-size: 16px; } .au-cta-img { border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); } .au-cta-img .img-ph { min-height: 320px; border-radius: 0; border: none; background: var(--white); } /* ===== COURSES ===== */ /* ── SECTION UTILITIES ───────────────────────────────────── */ section { padding: 96px 0; } .sec-label { font-family: 'Karla', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); margin-bottom: 16px; display: block; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-4); margin-bottom: 32px; font-weight: 500; } .breadcrumb a { color: var(--ink-4); transition: color 0.15s; } .breadcrumb a:hover { color: var(--plum); } .breadcrumb-sep { display: block; width: 14px; height: 1px; background: var(--ink-4); opacity: 0.4; } .breadcrumb span { color: var(--ink-2); } /* ── HERO ────────────────────────────────────────────────── */ #cr-hero { padding: 64px 0 88px; /* was 128px; 64px now reserved on */ background: var(--white); border-bottom: 1px solid var(--rule-2); position: relative; overflow: hidden; } #cr-hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 39px, var(--rule-2) 39px, var(--rule-2) 40px ); opacity: 0.45; pointer-events: none; } .cr-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .cr-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum); border: 1px solid var(--rule); background: var(--plum-lt); padding: 5px 14px; border-radius: 4px; margin-bottom: 24px; } .cr-hero-eyebrow::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--plum); } #cr-hero h1 { margin-bottom: 18px; } .cr-hero-sub { font-size: 18px; line-height: 1.65; font-weight: 500; color: var(--ink-2); margin-bottom: 14px; } .cr-hero-para { font-size: 15px; color: var(--ink-3); line-height: 1.75; max-width: 480px; margin-bottom: 36px; } .cr-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* right: stat grid */ .cr-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .cr-stat-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 22px 20px; transition: border-color 0.2s; } .cr-stat-card:hover { border-color: var(--plum-md); } .cr-stat-n { font-family: 'Rubik', sans-serif; font-size: 28px; font-weight: 700; color: var(--plum); letter-spacing: -0.5px; line-height: 1; display: block; margin-bottom: 6px; } .cr-stat-l { font-size: 13px; color: var(--ink-4); font-weight: 500; line-height: 1.4; } /* ── COURSE LISTING ──────────────────────────────────────── */ #cr-list { background: var(--surface); } .cr-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; } .cr-list-head-text h2 { margin-bottom: 8px; } .cr-list-head-text p { font-size: 15px; color: var(--ink-4); max-width: 440px; } /* filter tabs */ .cr-filters { display: flex; gap: 6px; flex-wrap: wrap; } .cr-filter { padding: 7px 16px; border-radius: 6px; font-family: 'Karla', sans-serif; font-size: 13px; font-weight: 600; color: var(--ink-3); background: var(--white); border: 1px solid var(--rule); cursor: pointer; transition: all 0.15s; white-space: nowrap; } .cr-filter:hover { border-color: var(--plum-md); color: var(--plum); } .cr-filter.active { background: var(--plum-lt); border-color: var(--plum); color: var(--plum); } /* course card grid */ .course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* featured card spans full width */ .course-card-featured { grid-column: 1 / -1; } .course-card { background: var(--white); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.22s, box-shadow 0.22s; position: relative; } .course-card:hover { border-color: var(--plum-md); transform: translateY(-5px); box-shadow: 0 16px 48px rgba(128,39,140,0.1); } /* image placeholder area */ .course-img { width: 100%; overflow: hidden; position: relative; background: var(--surface); } .course-img-ph { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-4); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: var(--surface); border-bottom: 1px solid var(--rule); } .course-img-ph svg { opacity: 0.25; } .course-card:not(.course-card-featured) .course-img-ph { min-height: 180px; } .course-card-featured .course-img-ph { min-height: 220px; } /* level badge over image */ .course-level-badge { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: 'Karla', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 4px; } .badge-beginner { background: #e8f9ef; color: #1a7f3e; border: 1px solid #b3e8c8; } .badge-intermediate { background: var(--sky-lt); color: var(--sky-dk); border: 1px solid #b3e8ff; } .badge-advanced { background: var(--plum-lt); color: var(--plum); border: 1px solid rgba(128,39,140,0.2); } .badge-full { background: var(--ink); color: #fff; border: 1px solid transparent; } /* card body */ .course-body { padding: 26px 28px; flex: 1; display: flex; flex-direction: column; } /* featured card uses horizontal layout inside */ .course-card-featured .course-body-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .course-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum); margin-bottom: 10px; } .course-body h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; line-height: 1.25; } .course-desc { font-size: 14px; color: var(--ink-3); line-height: 1.65; margin-bottom: 0; } /* best-for row */ .course-best { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; padding: 12px 14px; background: var(--surface); border-radius: 8px; border: 1px solid var(--rule); } .course-best-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--plum-md); white-space: nowrap; padding-top: 1px; flex-shrink: 0; } .course-best-value { font-size: 13px; color: var(--ink-3); line-height: 1.5; } /* module tags */ .course-modules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .mod-tag { font-size: 12px; font-weight: 500; color: var(--ink-3); background: var(--surface); border: 1px solid var(--rule); padding: 4px 10px; border-radius: 4px; transition: border-color 0.15s, color 0.15s; } .course-card:hover .mod-tag { border-color: rgba(128,39,140,0.2); color: var(--ink-2); } /* card footer */ .course-footer { padding: 18px 28px; border-top: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--white); } .course-footer-meta { font-size: 12px; color: var(--ink-4); font-weight: 500; } .course-footer-meta strong { color: var(--ink-2); font-weight: 600; } /* featured card CTA button — outline plum, wider */ .btn-course { font-family: 'Karla', sans-serif; font-size: 13px; font-weight: 600; padding: 10px 20px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: all 0.18s; border: none; } .btn-course-outline { background: transparent; color: var(--plum); border: 1.5px solid var(--plum-md); } .btn-course-outline:hover { background: var(--plum-lt); border-color: var(--plum); } .btn-course-solid { background: var(--plum); color: #fff; } .btn-course-solid:hover { background: var(--plum-dk); } .btn-course-dark { background: var(--ink); color: #fff; } .btn-course-dark:hover { background: var(--ink-2); } .btn-course svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ── FEATURED CARD specific overrides ───────────────────────── */ .course-card-featured .course-body { padding: 32px 36px; } .course-card-featured .course-body h3 { font-size: 24px; } .course-card-featured .course-desc { font-size: 15px; } /* plum top border accent on featured */ .course-card-featured { border-top: 3px solid var(--plum); } /* "Complete Program" ribbon */ .course-ribbon { position: absolute; top: 14px; right: 14px; z-index: 3; font-family: 'Karla', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: var(--plum); color: #fff; padding: 4px 12px; border-radius: 4px; } /* ── CTA SECTION ─────────────────────────────────────────── */ #cr-cta { background: var(--ink); position: relative; overflow: hidden; } #cr-cta::before { content: ''; position: absolute; top: -180px; right: -180px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(128,39,140,0.2) 0%, transparent 60%); pointer-events: none; } #cr-cta::after { content: ''; position: absolute; bottom: -120px; left: -80px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(0,191,255,0.08) 0%, transparent 60%); pointer-events: none; } .cr-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .cr-cta-copy { } .cr-cta-copy h2 { color: #fff; margin-bottom: 16px; } .cr-cta-copy p { color: rgba(255,255,255,0.6); margin-bottom: 32px; font-size: 16px; } .cr-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; } /* right side: audience grid */ .cr-cta-who { } .cr-cta-who-label { font-family: 'Karla', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 20px; display: block; } .cta-aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .cta-aud-tile { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 16px 18px; transition: background 0.15s, border-color 0.15s; } .cta-aud-tile:hover { background: rgba(128,39,140,0.2); border-color: rgba(128,39,140,0.3); } .cta-aud-tile strong { display: block; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 3px; } .cta-aud-tile span { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.4; } /* ===== CONTACT ===== */ /* ── SECTION BASE ────────────────────────────────────────── */ section { padding: 96px 0; } .sec-label { font-family: 'Karla', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); margin-bottom: 16px; display: block; } /* ── BREADCRUMB ──────────────────────────────────────────── */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-4); margin-bottom: 32px; font-weight: 500; } .breadcrumb a { color: var(--ink-4); transition: color 0.15s; } .breadcrumb a:hover { color: var(--plum); } .breadcrumb-sep { display: block; width: 14px; height: 1px; background: var(--ink-4); opacity: 0.4; } .breadcrumb span { color: var(--ink-2); } /* ── HERO ────────────────────────────────────────────────── */ #ct-hero { padding: 64px 0 80px; /* was 128px; 64px now reserved on */ background: var(--white); border-bottom: 1px solid var(--rule-2); position: relative; overflow: hidden; } #ct-hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 39px, var(--rule-2) 39px, var(--rule-2) 40px ); opacity: 0.45; pointer-events: none; } .ct-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; } .ct-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum); border: 1px solid var(--rule); background: var(--plum-lt); padding: 5px 14px; border-radius: 4px; margin-bottom: 24px; } .ct-hero-eyebrow::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--plum); } #ct-hero h1 { margin-bottom: 20px; } .ct-hero-sub { font-size: 17px; line-height: 1.7; color: var(--ink-3); max-width: 460px; margin-bottom: 36px; } .ct-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* right: reach-out cards */ .ct-hero-reach { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .reach-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 22px 20px; transition: border-color 0.2s, transform 0.18s; } .reach-card:hover { border-color: var(--plum-md); transform: translateY(-3px); } .reach-icon { width: 38px; height: 38px; border-radius: 8px; background: var(--plum-lt); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .reach-icon svg { width: 18px; height: 18px; stroke: var(--plum); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .reach-card h4 { font-size: 14px; margin-bottom: 4px; } .reach-card p { font-size: 13px; color: var(--ink-4); margin: 0; line-height: 1.5; } /* ── INTRO SECTION ───────────────────────────────────────── */ #ct-intro { background: var(--surface); padding: 72px 0; } .ct-intro-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .ct-intro-copy h2 { margin-bottom: 18px; } .ct-intro-copy p { margin-bottom: 0; } /* audience pill row */ .aud-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; } .aud-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; background: var(--white); border: 1px solid var(--rule); border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: border-color 0.15s, color 0.15s; } .aud-pill:hover { border-color: var(--plum-md); color: var(--plum); } .aud-pill::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--plum-md); flex-shrink: 0; } /* right: response-time card */ .ct-intro-aside { display: flex; flex-direction: column; gap: 14px; } .response-card { background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 28px 28px; border-left: 3px solid var(--plum); } .response-card h4 { font-size: 15px; margin-bottom: 10px; } .response-card p { font-size: 14px; color: var(--ink-4); margin: 0; line-height: 1.6; } .hours-card { background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 22px 28px; display: flex; align-items: center; gap: 16px; } .hours-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--plum-lt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hours-icon svg { width: 20px; height: 20px; stroke: var(--plum); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .hours-text strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; } .hours-text span { font-size: 13px; color: var(--ink-4); } /* ── MAIN CONTACT SECTION ────────────────────────────────── */ #ct-main { background: var(--white); } .ct-main-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } /* — Left: contact detail cards — */ .ct-detail-col { display: flex; flex-direction: column; gap: 0; } .ct-detail-head { margin-bottom: 32px; } .ct-detail-head h3 { margin-bottom: 8px; } .ct-detail-head p { font-size: 14px; color: var(--ink-4); } .ct-cards { display: flex; flex-direction: column; gap: 0; } .ct-card { display: flex; align-items: flex-start; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--rule); transition: background 0.15s; } .ct-card:first-child { padding-top: 0; } .ct-card:last-child { border-bottom: none; } .ct-card-icon { width: 42px; height: 42px; border-radius: 9px; background: var(--plum-lt); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; } .ct-card-icon svg { width: 18px; height: 18px; stroke: var(--plum); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .ct-card-body { flex: 1; min-width: 0; } .ct-card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; display: block; } .ct-card-value { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.4; } .ct-card-value a { color: var(--plum); transition: color 0.15s; } .ct-card-value a:hover { color: var(--plum-dk); } .ct-card-sub { font-size: 12px; color: var(--ink-4); margin-top: 3px; display: block; } /* whatsapp badge */ .wa-badge { display: inline-flex; align-items: center; gap: 5px; background: #e8f9ef; color: #1a7f3e; border: 1px solid #b3e8c8; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin-left: 8px; } /* — Right: form — */ .ct-form-col { } .ct-form-head { margin-bottom: 28px; } .ct-form-head h3 { margin-bottom: 6px; } .ct-form-head p { font-size: 14px; color: var(--ink-4); } .ct-form { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 36px 32px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-row.single { grid-template-columns: 1fr; } .form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } .form-group:last-of-type { margin-bottom: 0; } .form-group label { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em; } .form-group label .req { color: var(--plum); margin-left: 2px; } .form-group input, .form-group textarea, .form-group select { font-family: 'Karla', sans-serif; font-size: 14px; color: var(--ink); background: var(--white); border: 1.5px solid var(--rule); border-radius: 8px; padding: 11px 14px; outline: none; transition: border-color 0.18s, box-shadow 0.18s; width: 100%; } .form-group input::placeholder, .form-group textarea::placeholder { color: var(--ink-4); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--plum); box-shadow: 0 0 0 3px rgba(128,39,140,0.1); } .form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; } .form-enquiry-type { margin-bottom: 18px; } .enquiry-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .enquiry-opt { display: none; } .enquiry-opt + label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid var(--rule); border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ink-3); cursor: pointer; transition: all 0.15s; user-select: none; } .enquiry-opt + label::before { content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--rule); transition: background 0.15s; } .enquiry-opt:checked + label { border-color: var(--plum); background: var(--plum-lt); color: var(--plum); } .enquiry-opt:checked + label::before { background: var(--plum); } .form-submit-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); } .form-note { font-size: 13px; color: var(--ink-4); line-height: 1.5; max-width: 280px; } .form-note svg { width: 14px; height: 14px; stroke: var(--ink-4); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -2px; margin-right: 4px; } .btn-submit { background: var(--plum); color: #fff; font-family: 'Karla', sans-serif; font-size: 14px; font-weight: 600; padding: 12px 28px; border-radius: 6px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background 0.18s, transform 0.15s; letter-spacing: 0.01em; white-space: nowrap; } .btn-submit:hover { background: var(--plum-dk); transform: translateY(-1px); } .btn-submit svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* success state (JS toggled) */ .form-success { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 24px; gap: 14px; } .form-success.visible { display: flex; } .ct-form.submitted .form-fields { display: none; } .ct-form.submitted .form-success { display: flex; } .success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--plum-lt); display: flex; align-items: center; justify-content: center; } .success-icon svg { width: 24px; height: 24px; stroke: var(--plum); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .form-success h4 { font-size: 18px; margin-bottom: 4px; } .form-success p { font-size: 14px; color: var(--ink-4); margin: 0; } /* ── MAP SECTION ─────────────────────────────────────────── */ #ct-map { background: var(--surface); padding: 80px 0; } .ct-map-head { max-width: 500px; margin-bottom: 36px; } .ct-map-head h2 { margin-bottom: 10px; } .ct-map-head p { font-size: 15px; color: var(--ink-4); } .map-box { width: 100%; border-radius: 14px; overflow: hidden; border: 1.5px dashed var(--rule); background: var(--white); min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; position: relative; } .map-pin { width: 52px; height: 52px; border-radius: 50%; background: var(--plum-lt); border: 2px solid rgba(128,39,140,0.15); display: flex; align-items: center; justify-content: center; } .map-pin svg { width: 24px; height: 24px; stroke: var(--plum); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .map-label { font-family: 'Rubik', sans-serif; font-size: 15px; font-weight: 500; color: var(--ink-3); } .map-sub { font-size: 13px; color: var(--ink-4); } /* grid lines decoration */ .map-box::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.7; pointer-events: none; } .map-box > * { position: relative; z-index: 1; } /* ===== BLOG ===== */ /* ─── HERO ────────────────────────────────────────────────── */ #blog-hero { padding: 56px 0 80px; /* was 120px; 64px now reserved on */ background: var(--white); border-bottom: 1px solid var(--rule-2); position: relative; overflow: hidden; } #blog-hero::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 39px, var(--rule-2) 39px, var(--rule-2) 40px ); opacity: 0.45; pointer-events: none; } /* decorative blobs */ #blog-hero::after { content: ''; position: absolute; top: -120px; right: -120px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(128,39,140,0.07) 0%, transparent 65%); pointer-events: none; } .blog-hero-inner { position: relative; z-index: 1; text-align: center; max-width: 720px; margin: 0 auto; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum); border: 1px solid var(--rule); background: var(--plum-lt); padding: 5px 14px; border-radius: 4px; margin-bottom: 24px; } .hero-eyebrow::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--plum); } #blog-hero h1 { margin-bottom: 20px; } .blog-hero-lead { font-size: 18px; line-height: 1.7; color: var(--ink-3); max-width: 620px; margin: 0 auto; } /* ─── COMING SOON ─────────────────────────────────────────── */ #coming-soon { padding: 96px 0; background: var(--surface); border-bottom: 1px solid var(--rule); } .coming-soon-inner { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 600px; margin: 0 auto; } .coming-soon-icon { width: 80px; height: 80px; border-radius: 20px; background: var(--plum-lt); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; flex-shrink: 0; } .coming-soon-icon svg { width: 36px; height: 36px; stroke: var(--plum); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .coming-soon-inner h2 { margin-bottom: 16px; } .coming-soon-inner p { font-size: 17px; color: var(--ink-3); line-height: 1.75; } /* pill badges row */ .coming-soon-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 32px; } .cs-badge { padding: 6px 14px; border-radius: 20px; background: var(--white); border: 1px solid var(--rule); font-size: 13px; font-weight: 500; color: var(--ink-3); } /* progress bar decoration */ .cs-progress-wrap { width: 100%; max-width: 320px; margin-top: 36px; } .cs-progress-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ink-4); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; } .cs-progress-bar { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; } .cs-progress-fill { height: 100%; width: 35%; border-radius: 3px; background: linear-gradient(90deg, var(--plum), var(--plum-md)); } /* ─── UPCOMING TOPICS ─────────────────────────────────────── */ #upcoming { padding: 96px 0; background: var(--white); } .sec-label { font-family: 'Karla', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); margin-bottom: 16px; display: block; } .sec-head { max-width: 640px; margin-bottom: 56px; } .sec-head h2 { margin-bottom: 14px; } .sec-head p { font-size: 16px; color: var(--ink-3); } .sec-head.center { text-align: center; margin-left: auto; margin-right: auto; } /* Blog card grid */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .blog-card { background: var(--white); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.2s, transform 0.22s, box-shadow 0.22s; } .blog-card:hover { border-color: var(--plum-md); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(128,39,140,0.09); } /* placeholder thumbnail */ .blog-card-thumb { height: 180px; background: var(--surface); border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: var(--ink-4); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; position: relative; overflow: hidden; } .blog-card-thumb svg { width: 32px; height: 32px; stroke: var(--plum-md); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; } /* topic-coloured top strip */ .blog-card-thumb::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--plum), var(--plum-md)); } /* category tag inside thumb */ .thumb-tag { position: absolute; bottom: 12px; left: 12px; background: var(--white); border: 1px solid var(--rule); padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--plum); letter-spacing: 0.06em; text-transform: uppercase; } .blog-card-body { padding: 24px 24px 20px; flex: 1; display: flex; flex-direction: column; } .blog-card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .blog-card-meta span { font-size: 12px; color: var(--ink-4); font-weight: 500; } .meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rule); flex-shrink: 0; } .blog-card-body h4 { font-size: 16px; line-height: 1.4; margin-bottom: 12px; color: var(--ink); flex: 0; } .blog-card-body p { font-size: 14px; color: var(--ink-3); line-height: 1.65; margin-bottom: 20px; flex: 1; } .blog-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--rule-2); } .read-more-btn { display: inline-flex; align-items: center; gap: 6px; font-family: 'Karla', sans-serif; font-size: 13px; font-weight: 600; color: var(--plum); background: var(--plum-lt); border: 1px solid transparent; border-radius: 6px; padding: 7px 14px; cursor: not-allowed; transition: background 0.18s, border-color 0.18s; position: relative; } .read-more-btn:hover { background: var(--plum-lt); border-color: var(--plum-md); } /* "Coming Soon" ribbon on btn */ .read-more-btn::after { content: 'Coming Soon'; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; letter-spacing: 0.04em; } .read-more-btn::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--ink); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 1; } .read-more-btn:hover::after, .read-more-btn:hover::before { opacity: 1; } .card-read-min { font-size: 12px; color: var(--ink-4); font-weight: 500; display: flex; align-items: center; gap: 4px; } .card-read-min svg { width: 13px; height: 13px; stroke: var(--ink-4); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ─── NEWSLETTER / NOTIFY SECTION ─────────────────────────── */ #notify { padding: 80px 0; background: var(--surface); border-top: 1px solid var(--rule); } .notify-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .notify-copy { max-width: 480px; } .notify-copy h3 { margin-bottom: 10px; } .notify-copy p { font-size: 15px; color: var(--ink-3); } .notify-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .notify-input { font-family: 'Karla', sans-serif; font-size: 14px; font-weight: 500; padding: 11px 18px; border-radius: 6px; border: 1.5px solid var(--rule); background: var(--white); color: var(--ink-2); outline: none; width: 260px; transition: border-color 0.18s; } .notify-input::placeholder { color: var(--ink-4); } .notify-input:focus { border-color: var(--plum-md); } /* ─── CTA SECTION ─────────────────────────────────────────── */ #cta { background: var(--ink); padding: 96px 0; border-top: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; } #cta::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(128,39,140,0.18) 0%, transparent 60%); pointer-events: none; } .cta-inner { text-align: center; position: relative; z-index: 1; } .cta-inner h2 { color: #fff; font-size: clamp(28px, 3.5vw, 42px); margin-bottom: 18px; } .cta-inner p { color: rgba(255,255,255,0.55); font-size: 17px; max-width: 560px; margin: 0 auto 44px; } .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } /* ═══════════════════════════════════════════════════════════ RESPONSIVE — consolidated from all five source pages. Header/footer breakpoints live in header-footer.css. Elementor Site Settings breakpoints must be set to 1024 / 880 / 600 to stay in step with these. ═══════════════════════════════════════════════════════════ */ @media (max-width: 1024px) { /* home */ .mod-grid { grid-template-columns: repeat(4, 1fr); } .expert-layout { grid-template-columns: 300px 1fr; gap: 48px; } /* about */ .au-expert-layout { grid-template-columns: 280px 1fr; gap: 48px; } /* courses */ .course-card-featured .course-body-inner { grid-template-columns: 1fr; gap: 0; } /* contact */ .ct-main-layout { grid-template-columns: 1fr 1fr; gap: 40px; } /* blog */ .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 880px) { /* home */ .hero-inner, .problem-layout, .what-layout { grid-template-columns: 1fr; gap: 40px; } .hero-mosaic .m-card.tall { grid-row: span 1; } .hero-mosaic .m-card.tall .img-ph { min-height: 180px; } .mod-grid { grid-template-columns: repeat(3, 1fr); } .aud-grid { grid-template-columns: 1fr 1fr; } .aud-grid .aud-card:nth-child(4), .aud-grid .aud-card:nth-child(5) { grid-column: auto; } .why-grid { grid-template-columns: 1fr 1fr; } .expert-layout { grid-template-columns: 1fr; } .img-row-grid { grid-template-columns: 1fr 1fr; } /* about */ .au-hero-inner, .au-about-layout, .au-purpose-layout, .au-why-layout, .au-expert-layout, .au-cta-inner { grid-template-columns: 1fr; gap: 40px; } .au-why-img { position: static; } .pillar-row { border-radius: 10px; } /* courses */ .cr-hero-inner, .cr-cta-inner { grid-template-columns: 1fr; gap: 40px; } .course-grid { grid-template-columns: 1fr; } .course-card-featured { grid-column: auto; } .course-card-featured .course-body { padding: 24px 22px; } .cr-list-head { flex-direction: column; align-items: flex-start; } /* contact */ .ct-hero-inner, .ct-intro-inner, .ct-main-layout { grid-template-columns: 1fr; gap: 40px; } .ct-hero-reach { grid-template-columns: 1fr 1fr; } /* blog */ .notify-inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { section { padding: 64px 0; } /* heroes — source values minus the 64px now reserved on */ #hero, #blog-hero { padding: 36px 0 64px; } #au-hero, #cr-hero, #ct-hero { padding: 36px 0 64px; } #ct-intro { padding: 56px 0; } #coming-soon, #upcoming, #notify { padding: 64px 0; } /* home */ .mod-grid { grid-template-columns: 1fr 1fr; } .aud-grid, .why-grid { grid-template-columns: 1fr; } .hero-metrics { gap: 28px; flex-wrap: wrap; } .img-row-grid { grid-template-columns: 1fr 1fr; } .stat-card { position: static; display: inline-block; margin-top: 16px; } .cta-btns { flex-direction: column; align-items: center; } /* about */ .au-hero-stats { grid-template-columns: 1fr; } .info-tiles { grid-template-columns: 1fr; } .exp-strip { grid-template-columns: 1fr; } .au-cta-inner { gap: 32px; } /* courses */ .cta-aud-grid { grid-template-columns: 1fr; } .cr-hero-stats { grid-template-columns: 1fr 1fr; } .course-body { padding: 20px 18px; } .course-footer { padding: 14px 18px; } /* contact — source used 640px for this tier; folded into 600px */ .ct-hero-reach { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .form-submit-row { flex-direction: column; align-items: flex-start; } .ct-form { padding: 24px 20px; } /* blog */ .blog-grid { grid-template-columns: 1fr; } .notify-input { width: 100%; } .notify-form { width: 100%; flex-direction: column; } .notify-form .btn { width: 100%; justify-content: center; } } /* ═══════════════════════════════════════════════════════════ ELEMENTOR BRIDGE Elementor wraps every widget in .elementor-widget-container and applies its own resets. These rules let the ported CSS above win inside Elementor content without needing !important everywhere. ═══════════════════════════════════════════════════════════ */ /* Elementor containers used as source sections keep their own padding. */ .elementor-section.ts-section, .e-con.ts-section { padding: 96px 0; } @media (max-width: 600px) { .elementor-section.ts-section, .e-con.ts-section { padding: 64px 0; } } /* Let a container's ::before/::after decoration paint behind its children. */ .e-con.ts-decorated { position: relative; overflow: hidden; } .e-con.ts-decorated > .e-con-inner, .e-con.ts-decorated > .elementor-element { position: relative; z-index: 1; } /* Elementor resets list styles on some themes; restore the source look. */ .e-con .check-list, .e-con .ft-links, .e-con .nav-list { list-style: none; } /* Text Editor widgets carry

defaults — keep the source rhythm. */ .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* Image widgets standing in for .img-ph placeholders. */ .e-con .img-ph img { width: 100%; height: 100%; object-fit: cover; } /* ═══════════════════════════════════════════════════════════ ELEMENTOR TEMPLATE BRIDGE — home.json The source used ~80 inline SVGs. The templates use Elementor's bundled Font Awesome instead (no SVG-upload permission needed), so the icon wrappers need to size/colour an rather than an