/* ==========================================================================
PTA - main.css (global, loaded on every page)
1. Fonts 2. Design tokens 3. Responsive token overrides
4. Reset 5. Base typography 6. Layout (container / section)
7. Components (buttons, pills, highlight, cards) 8. Utilities
9. Elementor integration 10. Accessibility & motion
Breakpoints (must match Elementor Site Settings):
Desktop ≥ 1367px (Figma 1440 frame - exact design)
Laptop ≤ 1366px (same layout, smaller side padding / type)
Tablet ≤ 1024px (Elementor "tablet")
Mobile ≤ 767px (Elementor "mobile")
========================================================================== */
/* 1. Fonts - self-hosted variable WOFF2 (Latin subset), preloaded in */
@font-face {
font-family: "Plus Jakarta Sans";
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url("../fonts/plus-jakarta-sans-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("../fonts/inter-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat (variable, Latin subset), self-hosted since 4 Nov 2026 (was fonts.googleapis.com). Used by a few display headings. */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/montserrat-var-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* 2. Design tokens (Figma: PTA v2 / Color, Spacing, Text styles) */
:root {
/* Colour - brand */
--pta-green-900: #0b4226;
--pta-green-800: #0f5132;
--pta-green-700: #13663f;
--pta-mint-600: #00b266; /* Figma: primary button hover (globalqa-r2) */
--pta-mint-500: #00c875;
--pta-mint-300: #5fe0a6;
--pta-mint-100: #ddf7eb;
/* Colour - neutrals */
--pta-slate-950: #0b1120;
--pta-slate-900: #0f172a;
--pta-slate-800: #1e293b;
--pta-slate-600: #475569;
--pta-slate-500: #64748b;
--pta-slate-400: #94a3b8;
--pta-slate-200: #e2e8f0;
--pta-slate-100: #f1f5f9;
--pta-offwhite: #f8fafc;
--pta-white: #fff;
/* Colour - roles */
--pta-bg: var(--pta-white);
--pta-bg-subtle: var(--pta-offwhite);
--pta-bg-dark: var(--pta-slate-950);
--pta-bg-feature: var(--pta-green-900);
--pta-text: var(--pta-slate-600);
--pta-text-strong: var(--pta-slate-900); /* Figma: headings slate/900 (globalqa-r2) */
--pta-text-muted: var(--pta-slate-500);
--pta-text-on-dark: var(--pta-white);
--pta-text-on-dark-muted: rgb(255 255 255 / 0.72);
--pta-highlight: var(--pta-green-700); /* green words in headings (light bg) */
--pta-highlight-on-dark: var(--pta-mint-300); /* green words in headings (dark bg) */
--pta-link: var(--pta-green-800);
--pta-focus: var(--pta-mint-500);
/* Borders */
--pta-border-width: 1px;
--pta-border: var(--pta-border-width) solid var(--pta-slate-200);
--pta-border-strong: var(--pta-border-width) solid var(--pta-slate-400);
--pta-border-dark: var(--pta-border-width) solid rgb(255 255 255 / 0.1);
--pta-border-dark-strong: var(--pta-border-width) solid rgb(255 255 255 / 0.6);
/* Radius (Figma: radius/*) */
--pta-radius-xs: 4px;
--pta-radius-sm: 8px;
--pta-radius-md: 12px;
--pta-radius-lg: 16px;
--pta-radius-xl: 24px;
--pta-radius-2xl: 30px;
--pta-radius-full: 9999px;
--pta-radius-card: var(--pta-radius-xl);
--pta-radius-input: var(--pta-radius-md);
/* Spacing scale (Figma: space/*, 4px base) */
--pta-space-1: 4px;
--pta-space-2: 8px;
--pta-space-3: 12px;
--pta-space-4: 16px;
--pta-space-5: 20px;
--pta-space-6: 24px;
--pta-space-8: 32px;
--pta-space-10: 40px;
--pta-space-12: 48px;
--pta-space-16: 64px;
--pta-space-20: 80px;
--pta-space-24: 96px;
--pta-space-30: 120px;
/* Layout */
--pta-frame: 1440px; /* design frame */
--pta-gutter: 80px; /* section side padding inside the frame */
--pta-content: calc(var(--pta-frame) - 2 * 80px); /* 1280px content width */
--pta-section-y: var(--pta-space-24); /* section top/bottom padding (96) */
--pta-section-y-sm: var(--pta-space-16); /* compact sections (64) */
--pta-stack: var(--pta-space-12); /* gap heading block → content (48) */
--pta-grid-gap: var(--pta-space-6); /* card grids (24) */
/* Typography - families */
--pta-font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--pta-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
/* Typography - size / line-height (Figma "Desktop" text styles) */
--pta-fs-display: 72px; --pta-lh-display: 76px;
--pta-fs-h1: 56px; --pta-lh-h1: 64px;
--pta-fs-h2: 40px; --pta-lh-h2: 48px;
--pta-fs-h3: 30px; --pta-lh-h3: 38px;
--pta-fs-h4: 22px; --pta-lh-h4: 30px;
--pta-fs-stat: 48px; --pta-lh-stat: 52px;
--pta-fs-card: 18px; --pta-lh-card: 26px;
--pta-fs-lead: 20px; --pta-lh-lead: 32px;
--pta-fs-body: 16px; --pta-lh-body: 26px;
--pta-fs-small: 14px; --pta-lh-small: 22px;
--pta-fs-overline: 12px; --pta-lh-overline: 16px;
--pta-fs-button: 15px; --pta-lh-button: 20px;
--pta-fs-nav: 14px; --pta-lh-nav: 20px;
--pta-tracking-tight: -0.02em;
--pta-tracking-overline: 0.08em;
/* Controls */
--pta-btn-h: 48px;
--pta-btn-px: 24px;
--pta-input-h: 56px;
--pta-tap: 44px; /* minimum touch target */
/* Elevation & motion */
--pta-shadow-card: 0 1px 2px rgb(15 23 42 / 0.04), 0 8px 24px rgb(15 23 42 / 0.06);
--pta-shadow-pop: 0 12px 40px rgb(15 23 42 / 0.16);
--pta-ease: cubic-bezier(0.22, 1, 0.36, 1);
--pta-dur: 240ms;
--pta-dur-slow: 480ms;
--pta-header-h: 80px;
}
/* 3. Responsive token overrides */
/* Laptop ≤1366: same desktop layout - only side padding and the largest type shrink */
@media (max-width: 1366px) {
:root {
--pta-gutter: 48px;
--pta-section-y: 88px;
--pta-fs-display: 64px; --pta-lh-display: 70px;
--pta-fs-h1: 52px; --pta-lh-h1: 60px;
--pta-fs-h2: 38px; --pta-lh-h2: 46px;
--pta-fs-h3: 28px; --pta-lh-h3: 36px;
--pta-fs-stat: 44px; --pta-lh-stat: 48px;
}
}
/* Tablet ≤1024 */
@media (max-width: 1024px) {
:root {
--pta-gutter: 40px;
--pta-section-y: 72px;
--pta-section-y-sm: 48px;
--pta-stack: 40px;
--pta-grid-gap: 20px;
--pta-radius-card: var(--pta-radius-lg);
--pta-fs-display: 56px; --pta-lh-display: 60px;
--pta-fs-h1: 44px; --pta-lh-h1: 52px;
--pta-fs-h2: 34px; --pta-lh-h2: 42px;
--pta-fs-h3: 26px; --pta-lh-h3: 34px;
--pta-fs-h4: 21px; --pta-lh-h4: 29px;
--pta-fs-stat: 42px; --pta-lh-stat: 46px;
--pta-fs-lead: 19px; --pta-lh-lead: 30px;
--pta-header-h: 72px;
}
}
/* Mobile ≤767 (Figma "Mobile" text styles) */
@media (max-width: 767px) {
:root {
--pta-gutter: 20px;
--pta-section-y: 56px;
--pta-section-y-sm: 40px;
--pta-stack: 32px;
--pta-grid-gap: 16px;
--pta-fs-display: 44px; --pta-lh-display: 48px;
--pta-fs-h1: 36px; --pta-lh-h1: 42px;
--pta-fs-h2: 30px; --pta-lh-h2: 38px;
--pta-fs-h3: 24px; --pta-lh-h3: 32px;
--pta-fs-h4: 20px; --pta-lh-h4: 28px;
--pta-fs-stat: 36px; --pta-lh-stat: 40px;
--pta-fs-lead: 18px; --pta-lh-lead: 28px;
--pta-fs-button: 14px; --pta-lh-button: 16px;
--pta-btn-h: 48px;
--pta-input-h: 52px;
--pta-header-h: 64px;
}
}
/* 4. Reset (replaces Hello Elementor reset.css) */
[hidden] { display: none !important; }
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--pta-header-h) + 16px);
}
body {
margin: 0;
min-height: 100vh;
background: var(--pta-bg);
color: var(--pta-text);
font-family: var(--pta-font-body);
font-size: var(--pta-fs-body);
line-height: var(--pta-lh-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd {
margin: 0;
}
ul[class], ol[class] {
padding: 0;
list-style: none;
}
img, picture, video, svg, canvas {
display: block;
max-width: 100%;
}
img, video {
height: auto;
}
input, button, textarea, select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
}
table {
border-collapse: collapse;
width: 100%;
}
/* 5. Base typography */
h1, h2, h3, h4, h5, h6,
.pta-display, .pta-h1, .pta-h2, .pta-h3, .pta-h4, .pta-stat {
color: var(--pta-text-strong);
font-family: var(--pta-font-heading);
letter-spacing: var(--pta-tracking-tight);
}
.pta-display { font-size: var(--pta-fs-display); line-height: var(--pta-lh-display); font-weight: 400; }
h1, .pta-h1 { font-size: var(--pta-fs-h1); line-height: var(--pta-lh-h1); font-weight: 400; }
h2, .pta-h2 { font-size: var(--pta-fs-h2); line-height: var(--pta-lh-h2); font-weight: 400; }
h3, .pta-h3 { font-size: var(--pta-fs-h3); line-height: var(--pta-lh-h3); font-weight: 600; }
h4, .pta-h4 { font-size: var(--pta-fs-h4); line-height: var(--pta-lh-h4); font-weight: 600; }
h5, h6 { font-size: var(--pta-fs-card); line-height: var(--pta-lh-card); font-weight: 600; letter-spacing: 0; }
.pta-stat { font-size: var(--pta-fs-stat); line-height: var(--pta-lh-stat); font-weight: 700; }
.pta-card-title { font-family: var(--pta-font-heading); font-size: var(--pta-fs-card); line-height: var(--pta-lh-card); font-weight: 600; color: var(--pta-text-strong); }
.pta-lead { font-size: var(--pta-fs-lead); line-height: var(--pta-lh-lead); }
.pta-small { font-size: var(--pta-fs-small); line-height: var(--pta-lh-small); }
.pta-overline {
font-family: var(--pta-font-body);
font-size: var(--pta-fs-overline);
line-height: var(--pta-lh-overline);
font-weight: 600;
letter-spacing: var(--pta-tracking-overline);
text-transform: uppercase;
}
p + p { margin-top: 1em; }
a {
color: var(--pta-link);
text-underline-offset: 0.18em;
transition: color var(--pta-dur) var(--pta-ease);
}
a:hover { color: var(--pta-mint-500); }
/* Highlighted words in headings: Conditions */
.pta-hl { color: var(--pta-highlight); font-weight: 700; }
.pta-dark .pta-hl,
.pta-feature .pta-hl { color: var(--pta-highlight-on-dark); }
/* Hero section heading highlights */
.pta-hero .pta-hl,
.pta-content-hero .pta-hl { color: var(--mint-500, #00C875); }
/* 6. Layout */
/* Full-width section with vertical rhythm. Background goes on the section. */
.pta-section {
position: relative;
padding-block: var(--pta-section-y);
}
.pta-section--sm { padding-block: var(--pta-section-y-sm); }
.pta-section--flush-top { padding-top: 0; }
.pta-section--flush-bottom { padding-bottom: 0; }
/* Content container: 1440 frame with design gutter → 1280 content on desktop */
.pta-container {
width: 100%;
max-width: var(--pta-frame);
margin-inline: auto;
padding-inline: var(--pta-gutter);
}
.pta-container--narrow { max-width: calc(880px + 2 * var(--pta-gutter)); }
.pta-stack > * + * { margin-top: var(--pta-space-4); }
.pta-section-head { margin-bottom: var(--pta-stack); }
.pta-section-head > * + * { margin-top: var(--pta-space-4); }
.pta-grid {
display: grid;
gap: var(--pta-grid-gap);
grid-template-columns: repeat(var(--pta-cols, 3), minmax(0, 1fr));
}
.pta-grid--2 { --pta-cols: 2; }
.pta-grid--4 { --pta-cols: 4; }
@media (max-width: 1024px) {
.pta-grid { --pta-cols: 2; }
}
@media (max-width: 767px) {
.pta-grid { --pta-cols: 1; }
}
/* Colour schemes for sections */
.pta-dark { background: var(--pta-bg-dark); color: var(--pta-text-on-dark-muted); }
.pta-dark :is(h1, h2, h3, h4, h5, h6, .pta-display, .pta-h1, .pta-h2, .pta-h3, .pta-h4, .pta-stat, .pta-card-title) { color: var(--pta-text-on-dark); }
.pta-feature { background: var(--pta-bg-feature); color: var(--pta-text-on-dark-muted); }
.pta-feature :is(h1, h2, h3, h4, h5, h6, .pta-card-title) { color: var(--pta-text-on-dark); }
.pta-subtle { background: var(--pta-bg-subtle); }
/* 7. Components */
/* Buttons */
.pta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--pta-space-2);
min-height: var(--pta-btn-h);
padding: 0 var(--pta-btn-px);
border: 1.5px solid transparent;
border-radius: var(--pta-radius-full);
background: var(--pta-mint-500);
color: var(--pta-slate-950);
font-family: var(--pta-font-body);
font-size: var(--pta-fs-button);
line-height: var(--pta-lh-button);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--pta-dur) var(--pta-ease), color var(--pta-dur) var(--pta-ease), border-color var(--pta-dur) var(--pta-ease), transform var(--pta-dur) var(--pta-ease);
}
.pta-btn:hover { background: var(--pta-mint-600); color: var(--pta-slate-950); transform: translateY(-1px); }
.pta-btn:active { transform: translateY(0); }
.pta-btn--outline { background: transparent; border-color: currentcolor; color: var(--pta-slate-950); }
.pta-btn--outline:hover { background: var(--pta-slate-100); border-color: var(--pta-slate-950); color: var(--pta-slate-950); }
.pta-dark .pta-btn--outline,
.pta-feature .pta-btn--outline { color: var(--pta-white); }
.pta-dark .pta-btn--outline:hover,
.pta-feature .pta-btn--outline:hover { background: rgb(255 255 255 / 0.12); border-color: var(--pta-white); color: var(--pta-white); }
.pta-btn--sm { min-height: 40px; padding-inline: 18px; font-size: 14px; }
.pta-btn__icon { width: 16px; height: 16px; flex: none; transition: transform var(--pta-dur) var(--pta-ease); }
.pta-btn:hover .pta-btn__icon { transform: translateX(3px); }
/* Text link with arrow ("Read More →") */
.pta-link-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--pta-link);
font-size: var(--pta-fs-small);
font-weight: 600;
text-decoration: none;
}
/* Pills / section labels ("● LEGAL & GOVERNANCE") */
.pta-pill {
display: inline-flex;
align-items: center;
gap: var(--pta-space-2);
padding: 6px 12px;
border-radius: var(--pta-radius-full);
background: var(--pta-mint-100);
color: var(--pta-green-800);
font-size: var(--pta-fs-overline);
line-height: var(--pta-lh-overline);
font-weight: 600;
letter-spacing: var(--pta-tracking-overline);
text-transform: uppercase;
}
.pta-pill::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pta-mint-500);
}
.pta-dark .pta-pill { background: rgb(255 255 255 / 0.08); color: var(--pta-white); border: var(--pta-border-dark); }
.pta-pill--plain::before { display: none; }
/* Tag chips on cards */
.pta-tag {
display: inline-flex;
padding: 4px 10px;
border-radius: var(--pta-radius-full);
background: var(--pta-mint-100);
color: var(--pta-green-800);
font-size: 12px;
line-height: 16px;
font-weight: 600;
}
.pta-tag--outline { background: var(--pta-white); border: var(--pta-border); color: var(--pta-slate-950); }
/* Card shell */
.pta-card {
overflow: hidden;
border: var(--pta-border);
border-radius: var(--pta-radius-card);
background: var(--pta-white);
}
.pta-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.pta-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pta-card__body { padding: var(--pta-space-6); }
/* Form fields (base - section forms add layout) */
.pta-input,
.pta-select,
.pta-textarea {
width: 100%;
min-height: var(--pta-input-h);
padding: 16px 20px;
border: var(--pta-border-strong);
border-radius: var(--pta-radius-input);
background: var(--pta-white);
color: var(--pta-slate-950);
font-size: var(--pta-fs-body);
transition: border-color var(--pta-dur) var(--pta-ease), box-shadow var(--pta-dur) var(--pta-ease);
}
.pta-textarea { min-height: 120px; resize: vertical; }
.pta-input:focus,
.pta-select:focus,
.pta-textarea:focus { outline: none; border-color: var(--pta-green-800); box-shadow: 0 0 0 3px rgb(0 200 117 / 0.25); }
.pta-input[aria-invalid="true"],
.pta-select[aria-invalid="true"],
.pta-textarea[aria-invalid="true"] { border-color: #dc2626; }
/* 8. Utilities */
.pta-text-center { text-align: center; }
.pta-mx-auto { margin-inline: auto; }
.pta-maxw-640 { max-width: 640px; }
.pta-maxw-720 { max-width: 720px; }
.pta-hide { display: none !important; }
@media (max-width: 1024px) { .pta-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .pta-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .pta-only-mobile { display: none !important; } }
/* 9. Elementor integration - keep Elementor containers on the same grid */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner {
max-width: var(--pta-content);
}
/* Add class "pta-section" in Elementor → Advanced → CSS Classes on a top-level container
to get the standard section padding + gutter on every breakpoint (incl. 1366). */
.e-con.pta-section {
--padding-top: var(--pta-section-y);
--padding-bottom: var(--pta-section-y);
--padding-left: var(--pta-gutter);
--padding-right: var(--pta-gutter);
}
.e-con.pta-section.e-con-boxed > .e-con-inner { max-width: calc(var(--pta-frame) - 2 * var(--pta-gutter)); }
/* 10. Accessibility & motion */
.screen-reader-text,
.pta-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.pta-skip-link:focus {
position: fixed;
top: 12px;
left: 12px;
z-index: 100000;
width: auto;
height: auto;
clip: auto;
padding: 12px 20px;
border-radius: var(--pta-radius-sm);
background: var(--pta-white);
color: var(--pta-slate-950);
box-shadow: var(--pta-shadow-pop);
}
:focus-visible {
outline: 3px solid var(--pta-focus);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Footer: social icons under the Apply for Membership button (Figma "Follow us group" → "Social links"). */
.pta-footer__cta { display: flex; flex-direction: column; align-items: flex-start; }
/* "ul." beats the reset rule ul[class] { padding: 0 } so the 18px top spacing applies. */
ul.pta-footer__social { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 0; padding: 18px 0 0; list-style: none; }
.pta-footer__social li { margin: 0; }
.pta-footer__social-link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; transition: background-color var(--pta-dur, 0.2s) var(--pta-ease, ease), border-color var(--pta-dur, 0.2s) var(--pta-ease, ease); }
.pta-footer__social-link:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.pta-footer__social-link:focus-visible { outline: 2px solid var(--pta-green-500, #00c875); outline-offset: 2px; }
.pta-footer__social-icon { width: 20px; height: 20px; flex-shrink: 0; }
@media (max-width: 479px) {
.pta-footer__cta { width: 100%; }
.pta-footer__cta .pta-btn-row { width: 100%; }
}
/* Inner-page hero banners (Figma M01 Hero > Hero content): subtitle is 780px wide, 19px / 30px, white at 90%. Applies to every page using .pta-hero--page. */
.pta-hero.pta-hero--page .pta-hero__text { max-width: 780px; }
@media (min-width: 768px) {
.pta-hero.pta-hero--page .pta-hero__text { font-size: 19px; line-height: 30px; color: rgb(255 255 255 / 0.9); }
}
/* Session cards (all pages): title always takes exactly 2 lines, so every card's Format / Focus rows line up. Longer titles end with an ellipsis. */
.pta-sx-card .pta-sx-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2lh; }