.elementor-kit-6803{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-kadence1:#f3880b;--e-global-color-kadence2:#fbbf24;--e-global-color-kadence3:#1c1917;--e-global-color-kadence4:#463f39;--e-global-color-kadence5:#70645c;--e-global-color-kadence6:#978a81;--e-global-color-kadence7:#fef3e7;--e-global-color-kadence8:#f3f2f1;--e-global-color-kadence9:#ffffff;--e-global-color-4298fc1:#FF9214;--e-global-typography-primary-font-family:"Baskerville PT";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-7cb8bdb-font-family:"Poppins";--e-global-typography-7cb8bdb-font-size:25px;--e-global-typography-7cb8bdb-font-weight:bold;}.elementor-kit-6803 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================
TYMBA — MICPA Masterclass Landing Page
Extracted stylesheet (from inline styles)
Design System: TYMBA — "Redefining Professional Accountancy"
============================================================ */
/* ---------- Fonts ----------
Add this to your :
*/
/* ---------- Design Tokens ---------- */
:root {
/* Brand colors */
--tymba-orange: #FA5E11;
--tymba-orange-hover: #E14F00;
--tymba-orange-tint: #FFF1EA;
--cadmium-orange: #FF8826;
--tymba-violet: #7118DF;
--meteorite: #391665;
--tymba-black: #1E1E1E;
--off-white: #F4F3F2;
--white: #FFFFFF;
/* Text */
--text-primary: #1E1E1E;
--text-muted: #4A4A49;
--text-subtle: #7F8087;
/* Lines */
--border-subtle: #E5E4E3;
/* Typography */
--font-display: 'Libre Baskerville', Georgia, serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-accent: 'Barlow Condensed', sans-serif;
/* Shadows */
--shadow-sm: 0 2px 8px rgba(30,30,30,0.05);
--shadow-md: 0 2px 8px rgba(30,30,30,0.08);
--shadow-lg: 0 10px 30px rgba(30,30,30,0.12);
--shadow-orange: 0 8px 24px rgba(250,94,17,0.25);
/* Radii */
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
/* Layout */
--max-width: 1280px;
}
/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--off-white);
color: var(--text-primary);
font-family: var(--font-body);
overflow-x: hidden;
}
.tymba-page {
font-family: var(--font-body);
background: var(--off-white);
color: var(--text-primary);
overflow-x: hidden;
}
.tymba-container {
max-width: var(--max-width);
margin: 0 auto;
padding-left: 32px;
padding-right: 32px;
}
/* ---------- Shared typography ---------- */
.eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tymba-orange);
margin-bottom: 16px;
}
.heading-serif {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.025em;
margin: 0;
color: var(--text-primary);
}
.heading-serif--xl {
font-size: clamp(40px, 5vw, 64px);
line-height: 1.05;
}
.heading-serif--lg {
font-size: clamp(28px, 4vw, 44px);
}
.heading-accent {
font-family: var(--font-accent);
font-weight: 600;
text-transform: uppercase;
font-size: clamp(32px, 4.5vw, 52px);
line-height: 1.05;
letter-spacing: 0;
margin: 0;
color: var(--text-primary);
}
.section-intro {
text-align: center;
max-width: 720px;
margin: 0 auto 56px;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--radius-md);
transition: background 160ms cubic-bezier(0.22,1,0.36,1),
color 160ms cubic-bezier(0.22,1,0.36,1),
transform 120ms cubic-bezier(0.22,1,0.36,1);
}
.btn:active { transform: scale(0.98); }
.btn-primary {
background: var(--tymba-orange);
color: #fff;
padding: 17px 36px;
box-shadow: var(--shadow-orange);
}
.btn-primary:hover { background: var(--tymba-orange-hover); }
.btn-primary--sm { padding: 13px 26px; font-size: 13px; }
.btn-primary--lg { padding: 18px 44px; font-size: 15px; }
.btn-light {
background: #fff;
color: var(--tymba-black);
padding: 18px 44px;
font-size: 15px;
box-shadow: 0 10px 30px rgba(30,30,30,0.2);
}
.btn-light:hover { background: var(--tymba-black); color: #fff; }
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--tymba-black);
color: var(--tymba-black);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 13px 20px;
border-radius: var(--radius-md);
text-decoration: none;
transition: background 160ms ease, color 160ms ease;
}
.btn-outline:hover { background: var(--tymba-black); color: #fff; }
.btn-text {
display: inline-flex;
align-items: center;
color: var(--tymba-black);
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 4px;
}
/* ---------- Top navigation ---------- */
.site-nav {
max-width: var(--max-width);
margin: 0 auto;
padding: 20px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.site-nav__logo { height: 34px; width: auto; display: block; }
.site-nav__links {
display: flex;
align-items: center;
gap: 36px;
}
.site-nav__link {
font-size: 14px;
font-weight: 500;
color: var(--tymba-black);
text-decoration: none;
}
.site-nav__link:hover { text-decoration: underline; }
/* ---------- Hero ---------- */
.hero { border-bottom: 1px solid var(--border-subtle); }
.hero--light { background: var(--off-white); }
.hero--dark {
background: linear-gradient(135deg, rgba(250,94,17,0.16) 0%, rgba(57,22,101,0.5) 100%), var(--tymba-black);
border-bottom: none;
}
.hero__inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 88px 32px 100px;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 64px;
align-items: center;
}
.hero__eyebrow {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tymba-orange);
margin-bottom: 22px;
}
.hero--dark .hero__eyebrow { color: var(--cadmium-orange); }
.hero__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(40px, 5vw, 64px);
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0 0 24px;
color: var(--text-primary);
text-wrap: balance;
}
.hero--dark .hero__title { color: #fff; font-size: clamp(42px, 5.2vw, 68px); line-height: 1.04; }
.hero__subtitle {
font-size: 18px;
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 36px;
max-width: 520px;
}
.hero--dark .hero__subtitle { color: rgba(244,243,242,0.78); }
.hero__actions {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.hero__trust { margin-top: 32px; font-size: 14px; color: var(--text-subtle); }
.hero--dark .hero__trust { color: rgba(244,243,242,0.6); }
.hero--dark .btn-text { color: #fff; }
/* Hero media / video frame */
.hero__media {
position: relative;
aspect-ratio: 16/9;
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero--light .hero__media {
background: linear-gradient(135deg, var(--meteorite) 0%, var(--tymba-black) 100%);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-lg);
}
.hero--dark .hero__media {
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.14);
}
.play-button {
width: 76px;
height: 76px;
border-radius: 999px;
background: var(--tymba-orange);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(250,94,17,0.4);
}
.play-button svg { margin-left: 4px; }
.media-note {
position: absolute;
left: 16px;
bottom: 14px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.85);
background: rgba(0,0,0,0.35);
padding: 6px 10px;
border-radius: var(--radius-sm);
}
/* ---------- Stats band ---------- */
.stats {
background: var(--tymba-black);
padding: 72px 32px;
}
.stats__grid {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}
.stat { text-align: center; padding: 0 12px; }
.stat--divided {
border-left: 1px solid rgba(255,255,255,0.12);
border-right: 1px solid rgba(255,255,255,0.12);
}
.stat__number {
font-family: var(--font-display);
font-size: 56px;
line-height: 1;
color: var(--tymba-orange);
margin-bottom: 14px;
}
.stat__label {
font-size: 15px;
line-height: 1.5;
color: rgba(244,243,242,0.7);
margin: 0;
}
/* ---------- Sections ---------- */
.section { padding: 96px 32px; }
.section--white { background: var(--white); }
.section--offwhite { background: var(--off-white); }
/* ---------- Problem / reason cards ---------- */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.problem-card {
background: var(--off-white);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 32px;
}
.reason-card {
background: #fff;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 36px 32px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
.icon-tile {
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background: var(--tymba-orange-tint);
color: var(--tymba-orange);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.icon-tile--lg { width: 52px; height: 52px; margin-bottom: 22px; }
.problem-card__title {
font-size: 18px;
font-weight: 600;
line-height: 1.35;
margin: 0;
color: var(--text-primary);
}
.reason-card__title {
font-size: 20px;
font-weight: 600;
margin: 0 0 10px;
color: var(--text-primary);
}
.reason-card__text {
font-size: 15px;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
}
/* ---------- Programme impact ---------- */
.split {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
gap: 72px;
align-items: start;
}
.split--impact { grid-template-columns: 0.85fr 1.15fr; }
.split--about { grid-template-columns: 1fr 1.1fr; align-items: center; }
.split__lead-text {
font-size: 17px;
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 32px;
}
/* ---------- Check lists ---------- */
.check-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.check-list--two-col {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px 48px;
margin: 0 0 40px;
}
.check-item {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 18px 0;
border-bottom: 1px solid var(--border-subtle);
}
.check-list--two-col .check-item { padding: 16px 0; }
.check-bullet {
flex: none;
width: 24px;
height: 24px;
border-radius: 999px;
background: var(--tymba-orange-tint);
color: var(--tymba-orange);
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.check-item__text {
font-size: 16px;
line-height: 1.55;
color: var(--text-primary);
}
.fine-print { font-size: 13px; color: var(--text-subtle); margin: 0; }
/* ---------- Testimonials ---------- */
.testimonial {
background: #fff;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 32px;
margin: 0;
display: flex;
flex-direction: column;
}
.testimonial__mark {
font-family: var(--font-display);
font-size: 44px;
line-height: 1;
color: var(--tymba-orange);
height: 28px;
}
.testimonial__quote {
margin: 0 0 24px;
font-size: 15px;
line-height: 1.65;
color: var(--text-primary);
}
.testimonial__cite {
margin-top: auto;
border-top: 1px solid var(--border-subtle);
padding-top: 18px;
}
.testimonial__name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.testimonial__course { font-size: 13px; color: var(--text-subtle); margin-top: 2px; }
/* ---------- Modules / levels ---------- */
.level-card {
background: #fff;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: 36px 32px;
display: flex;
flex-direction: column;
}
.level-card__tag {
font-family: var(--font-accent);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 15px;
color: var(--tymba-orange);
margin-bottom: 6px;
}
.level-card__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 24px;
letter-spacing: -0.02em;
margin: 0 0 24px;
color: var(--text-primary);
}
.level-card__topics {
list-style: none;
margin: 0 0 28px;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.level-topic {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 15px;
line-height: 1.45;
color: var(--text-primary);
}
.level-topic__icon {
flex: none;
width: 18px;
height: 18px;
color: var(--tymba-orange);
margin-top: 2px;
}
.section__cta-row { text-align: center; margin-top: 48px; }
/* ---------- About media ---------- */
.about-media {
position: relative;
aspect-ratio: 4/5;
background: linear-gradient(135deg, var(--tymba-orange) 0%, var(--meteorite) 100%);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
align-items: flex-end;
border: 1px solid var(--border-subtle);
}
.about-media .media-note { position: static; margin: 16px; }
.about__text {
font-size: 17px;
line-height: 1.7;
color: var(--text-muted);
margin: 0 0 20px;
}
.about__text:last-child { margin-bottom: 0; }
/* ---------- CTA band ---------- */
.cta-band {
background: linear-gradient(135deg, var(--tymba-orange) 0%, var(--meteorite) 100%);
padding: 104px 32px;
}
.cta-band__inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.cta-band__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(32px, 4.5vw, 52px);
line-height: 1.08;
letter-spacing: -0.025em;
margin: 0 0 20px;
color: #fff;
}
.cta-band__text {
font-size: 18px;
line-height: 1.6;
color: rgba(255,255,255,0.85);
margin: 0 0 40px;
}
/* ---------- Footer ---------- */
.site-footer {
background: var(--tymba-black);
padding: 56px 32px 40px;
}
.site-footer__inner { max-width: var(--max-width); margin: 0 auto; }
.site-footer__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-footer__logo { height: 32px; width: auto; display: block; }
.site-footer__links { display: flex; gap: 32px; flex-wrap: wrap; }
.site-footer__link {
font-size: 14px;
color: rgba(244,243,242,0.7);
text-decoration: none;
}
.site-footer__link:hover { color: #fff; }
.site-footer__copy {
font-size: 13px;
color: rgba(244,243,242,0.5);
margin: 28px 0 0;
}
/* ---------- Responsive ---------- */
@media (max-width: 960px) {
.hero__inner,
.split--impact,
.split--about { grid-template-columns: 1fr; gap: 40px; }
.stats__grid,
.card-grid,
.check-list--two-col { grid-template-columns: 1fr; }
.stat--divided { border: none; padding: 24px 12px; }
.section { padding: 64px 24px; }
.hero__inner { padding: 56px 24px 64px; }
}/* End custom CSS */