Career Category
Career Category
This is a title
Type your paragraph here
Build Rules
Start Here
Start Here
Eyebrow
Heading element
Paragraph text inside
Suggested Structure
[section-base]
[section-page-hero]
└── [container-base]
└── [stack-lg]
├── eyebrow-line-left
├── H1 / text-h1
└── optional intro
[content-readable]
Add Div block (most outer container)
[section-base]
→ major page section
[container-base]
→ apply to inner container (inside main page section)
[stack] / [stack-sm] / [stack-lg] / [cluster] [cluster-xs]
→ organization inside the container
Basic section Structure
Add section "Outer Container" —> apply [section-base]
———— Add inner container inside — apply [container-base] + [stack-lg]
———————————Add another container (section Intro) with eyebrow, Header, paragraph then apply class [content-sm] + [content-readable]
Tokens
Foundations
Core color and spacing variables used throughout the JAT site.
Color Variables
Text Inverse
Current
--color-text-inverse
Description:
Primary text color on dark surfaces.
Use:
Headings and text on dark backgrounds.
Elementor Variables
Elementor Variables
Text Inverse Muted
Current
--color-text-inverse-muted
Description:
Muted text on dark surfaces.
Use:
Supporting text on dark backgrounds.
Elementor Variables
Elementor Variables
Divider
Current
--color-divider
Description:
Standard light-surface divider.
Use:
Borders, separators, subtle outlines.
Elementor Variables
Elementor Variables
Divider Inverse
Current
--color-divider-inverse
Description:
Subtle divider for dark surfaces.
Use:
Borders and separators on dark backgrounds.
Elementor Variables
Elementor Variables
Transparent
Current
--color-transparent
Description:
Fully transparent utility color.
Use:
Gradients, overlays, transparent states.
Elementor Variables
Elementor Variables
Brand Accent
Current
--color-brand-accent
Description:
Primary JAT brand red used for accents, active states, and key emphasis.
Use:
CTAs, accents, active states, emphasis.
Elementor Variables
Elementor Variables
Text Primary
Current
--color-text-primary
Description:
Primary dark text used on light surfaces.
Use:
Headings and body text.
Elementor Variables
Elementor Variables
Brand Accent Dark
Current
--color-brand-accent-dark
Description:
Darker JAT brand accent.
Use:
Hover states, dark red details, deeper emphasis.
Elementor Variables
Elementor Variables
Background Primary
Current
--color-background-primary
Description:
Main light page background.
Use:
Primary light surfaces and sections.
Elementor Variables
Elementor Variables
Background Secondary
Current
--color-background-secondary
Description:
Muted secondary background.
Use:
Inset sections, subtle contrast, grouped content.
Elementor Variables
Elementor Variables
Background Elevated
Current
--color-background-elevated
Description:
Slightly elevated light surface.
Use:
Cards and elevated UI surfaces.
Elementor Variables
Elementor Variables
Background Dark
Current
--color-background-dark
Description:
Primary dark surface color.
Use:
Dark sections, cards, footer areas.
Elementor Variables
Elementor Variables
Fluid Spacing
Space Fluid XS
Current
--space-fluid-xs
Description:
Extra-small responsive spacing token.
Use:
Small responsive gaps and padding.
Elementor Variables
Elementor Variables
Space Fluid XXS
Current
--space-fluid-xxs
Description:
extra Extra-small responsive spacing token.
Use:
Small responsive gaps and padding.
Elementor Variables
Elementor Variables
Space Fluid SM
Current
--space-fluid-sm
Description:
Small responsive spacing token.
Use:
Compact stacks, clusters, responsive gaps.
Elementor Variables
Elementor Variables
Space Fluid MD
Current
--space-fluid-md
Description:
Standard responsive spacing token.
Use:
Default stacks and grid gaps.
Elementor Variables
Elementor Variables
Space Fluid LG
Current
--space-fluid-lg
Description:
Large responsive spacing token.
Use:
Spacious layouts and major component gaps. Section spacing
Elementor Variables
Elementor Variables
Space Fluid XL
Current
--space-fluid-xl
Description:
Extra-large responsive spacing token.
Use:
Large section/component separation.
Elementor Variables
Elementor Variables
Space Fluid 2XL
Current
--space-fluid-2xl
Description:
Major responsive section spacing token.
Use:
Standard page-section vertical padding.
Elementor Variables
Elementor Variables
Space Fluid 3XL
Current
--space-fluid-3xl
Description:
Largest responsive spacing token.
Use:
Large/hero section spacing.
Elementor Variables
Elementor Variables
Space Fluid 4xl
Current
--space-fluid-4xl
Description:
Largest responsive spacing token. for heros
Use:
xxl hero section spacing.
Elementor Variables
Elementor Variables
Fluid Spacing Variables
space-fluid-xs
clamp(0.5rem, 0.35rem + 0.5vw, 1rem)
≈ 8px → 16px
Use: Tight relationships
space-fluid-sm
clamp(1rem, 0.75rem + 0.75vw, 1.5rem)
≈ 16px → 24px
Use: Compact content gaps
space-fluid-md
clamp(1.5rem, 1rem + 1.25vw, 2rem)
≈ 24px → 32px
Use: Default content and grid gap
space-fluid-lg
clamp(2rem, 1.25rem + 2vw, 3rem)
≈ 32px → 48px
Use: Large content and grid gaps
space-fluid-xl
clamp(3rem, 2rem + 2.5vw, 4rem)
≈ 48px → 64px
Use: Major content blocks
space-fluid-2xl
clamp(4rem, 2.5rem + 4vw, 6rem)
≈ 64px → 96px
Use: Standard section spacing
space-fluid-3xl
clamp(5rem, 3rem + 5vw, 8rem)
≈ 80px → 128px
Use: Large section spacing
Fixed Spacing
Space 1
Current
--space-1
Description:
Smallest fixed spacing token.
Use:
Micro gaps, icons, tight controls.
Elementor Variables
Elementor Variables
Space 2
Current
--space-2
Description:
Small fixed spacing token.
Use:
Small internal gaps and padding.
Elementor Variables
Elementor Variables
Space 3
Current
--space-3
Description:
Medium-small fixed spacing token.
Use:
Component padding and grouped content.
Elementor Variables
Elementor Variables
Space 4
Current
--space-4
Description:
Standard fixed spacing token.
Use:
General component padding and spacing.
Elementor Variables
Elementor Variables
Space 5
Current
--space-5
Description:
Medium-large fixed spacing token.
Use:
Larger component interiors.
Elementor Variables
Elementor Variables
Space 6
Current
--space-6
Description:
Large fixed spacing token.
Use:
Large component gaps and padding.
Elementor Variables
Elementor Variables
Space 7
Current
--space-7
Description:
Extra-large fixed spacing token.
Use:
Major internal spacing.
Elementor Variables
Elementor Variables
Space 8
Current
--space-8
Description:
Large layout spacing token.
Use:
Large fixed vertical or horizontal gaps.
Elementor Variables
Elementor Variables
Space 9
Current
--space-9
Description:
Extra-large layout spacing token.
Use:
Major fixed layout separation.
Elementor Variables
Elementor Variables
Space 10
Current
--space-10
Description:
Largest fixed spacing token.
Use:
Exceptional large fixed spacing.
Elementor Variables
Elementor Variables
Fixed Spacing Variables — 8PX SYSTEM
space-1 0.5rem ≈ 8px space-2 1rem ≈ 16px space-3 1.5rem ≈ 24px space-4 2rem ≈ 32px space-5 2.5rem ≈ 40px space-6 3rem ≈ 48px space-7 4rem ≈ 64px space-8 5rem ≈ 80px space-9 6rem ≈ 96px space-10 8rem ≈ 128px
Structure
Layout
The page shell uses section-owned gutters, centered containers, reusable stack/grid classes, and fluid vertical spacing.
Content Width Full
Current
--content-width-full
Description:
Full available content width token.
Use:
Grids, tables, component showcases.
Uses:
Dependencies
Code:
Grid 2
Current
grid-2
Description:
Two-column structural grid.
Use:
Two-up layouts and comparisons.
Uses:
grid-base
Code:
Content XS
Current
content-xs
Description:
Extra-small content-width utility that constrains an element while allowing it to remain responsive.
Use:
Narrow copy, compact forms.
Uses:
content-width-xs
Code:
Grid 3
Current
grid-3
Description:
Three-column structural grid.
Use:
Cards, services, feature layouts.
Uses:
grid-base
Code:
Content SM
Current
content-sm
Description:
Small responsive content-width utility.
Use:
Forms, intro copy, compact content blocks.
Uses:
content-width-sm
Code:
Grid 4
Current
grid-4
Description:
Four-column structural grid.
Use:
Compact card or item collections.
Uses:
grid-base
Code:
Content MD
Current
content-md
Description:
Medium responsive content-width utility.
Use:
Standard content areas, larger forms.
Uses:
content-width-md
Code:
Content LG
Current
content-lg
Description:
Large responsive content-width utility.
Use:
Wide content blocks and feature sections.
Uses:
content-width-lg
Code:
Content Readable
Current
content-readable
Description:
Constrains text to a comfortable reading width.
Use:
Long-form copy, articles, documentation.
Uses:
content-width-readable
Code:
Container Max
Current
--container-max
Description:
Maximum width of the primary inner page container.
Use:
Main site content max width; Main centered site content.
Uses:
Dependencies
Code:
Content Full
Current
content-full
Description:
Allows content to use the full available parent width.
Use:
Grids, tables, component showcases.
Uses:
content-width-full
max-width: var(–content-width-full);
Page Gutter
Current
--page-gutter
Description:
Fluid horizontal page gutter.
Use:
Responsive left/right page padding; Left/right spacing between viewport and content.
Uses:
Dependencies
Code:
Layout Variables
container-max 80rem ≈ 1280px Use: Maximum site content width page-gutter-fluid clamp(1rem, 0.5rem + 3vw, 4rem) ≈ 16px → 64px Use: Responsive left/right page padding header-height 88px = 88px Use: Desktop site header minimum height
Content Width Classes
content-full
Max Width: 100%
Fluid to parent width
content-readable
Max Width: 65ch
Pixel value varies by font
Use: Long-form paragraphs and articles
content-lg
Max Width: 60rem ≈ 960px
content-md
Max Width: 48rem ≈ 768px
content-sm
Max Width: 40rem ≈ 640px
content-xs
Max Width: 30rem ≈ 480px
Type System
Typography
Typography
Typography
Typography
Typography
Typography
Roboto Flex drives the main type hierarchy. Heading classes use fluid sizes plus deliberate variable-font axis settings.
Type scale
Real typography examples
Display
Current
text-display
Description:
Largest JAT display typography style.
Use:
Hero statements and major display text.
Uses:
Roboto Flex
Code:
Heading 1
Current
text-h1
Description:
Primary page-heading style.
Use:
Main page H1.
Uses:
Roboto Flex
Code:
Heading 2
Current
text-h2
Description:
Major section-heading style.
Use:
Main section titles.
Uses:
Roboto Flex
Code:
Heading 3
Current
text-h3
Description:
Secondary section-heading style.
Use:
Subsections and major card groups.
Uses:
Roboto Flex
Code:
Heading 4
Current
text-h4
Description:
Medium heading style.
Use:
Component and card headings.
Uses:
Roboto Flex
Code:
Heading 5
Current
text-h5
Description:
Small heading style.
Use:
Compact component headings.
Uses:
Roboto Flex
Code:
Heading 6
Current
text-h6
Description:
Smallest heading style.
Use:
Labels and low-level headings.
Uses:
Roboto Flex
Code:
Reusable UI
Utilities
Small classes that solve recurring presentation needs without creating one-off component code.
eyebrow-line-left
Eyebrow
Components
Core color and spacing variables used throughout the JAT site.
Career Category
Career Category
This is a title
Type your paragraph here
Career Category
Career Category
This is a title
Type your paragraph here
Eyebrow
Dynamic Content
Core color and spacing variables used throughout the JAT site.
Eyebrow
Page Templates
Core color and spacing variables used throughout the JAT site.
Eyebrow
Plugins + System
Core color and spacing variables used throughout the JAT site.
Eyebrow
Elementor Settings
Core color and spacing variables used throughout the JAT site.
Eyebrow
CSS + Snippets
description
Eyebrow
Build Status
Core color and spacing variables used throughout the JAT site.
Tokens
Everything else
Core color and spacing variables used throughout the JAT site.
System Key
Description
Description
Location
status
System Key
Description
Description
Location
status
System Key
Description
Description
Location
status
Overall
Variables & Classes
h1 — heading 1
H2 — Heading 2
H3 — Heading 3
H4 — Heading 4
H5 — This is H5
H5 for card titles/sub-section headers,
H6 — This is H6
H6 for small eyebrows-as-headers or table headers — not page-level hierarchy.
Eyebrow test
body-lg —lorem ipsum dolor sit amet consectetur adipiscing elit est ullamco aut incididunt omnis quod sint dolorem fugiat commodo qui rerum omnis praesentium fuga id deserunt aut facere repellendus praesentium ducimus laboris dolor accusamus est dolor et mollitia voluptas et omnis sunt quibusdam possimus officia ut exercitation est corrupti ut placeat
Type your paragraph here
body — lorem ipsum dolor sit amet consectetur adipiscing elit est ullamco aut incididunt omnis quod sint dolorem fugiat commodo qui rerum omnis praesentium fuga id deserunt aut facere repellendus praesentium ducimus laboris dolor accusamus est dolor et mollitia voluptas et omnis sunt quibusdam possimus officia ut exercitation est corrupti ut placeat
label — lorem ipsum dolor sit amet consectetur adipiscing elit est ullamco aut incididunt omnis quod sint dolorem fugiat commodo qui rerum omnis praesentium fuga id deserunt aut facere repellendus praesentium ducimus laboris dolor accusamus est dolor et mollitia voluptas et omnis sunt quibusdam possimus officia ut exercitation est corrupti ut placeat
label — lorem ipsum dolor sit amet consectetur adipiscing elit est ullamco aut incididunt omnis quod sint dolorem fugiat commodo qui rerum omnis praesentium fuga id deserunt aut facere repellendus praesentium ducimus laboris dolor accusamus est dolor et mollitia voluptas et omnis sunt quibusdam possimus officia ut exercitation est corrupti ut placeat
Hand — lorem ipsum dolor sit amet consectetur adipiscing elit est ullamco aut incididunt omnis quod sint dolorem fugiat commodo qui rerum omnis praesentium fuga id deserunt aut facere repellendus praesentium ducimus laboris dolor accusamus est dolor et mollitia voluptas et omnis sunt quibusdam possimus officia ut exercitation est corrupti ut placeat
Fluid Typography Variables
display
clamp(3.25rem, 1.75rem + 5.5vw, 6.5rem)
≈ 52 → 104px
Use: Hero / display headings
heading-1
clamp(2.75rem, 1.9rem + 3.6vw, 5.5rem)
≈ 44 → 88px
Use: H1
heading-2
clamp(2.25rem, 1.65rem + 2.6vw, 4rem)
≈ 36 → 64px
Use: H2
heading-3
clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem)
≈ 28px → 40px
Use: H3
heading-4
clamp(1.5rem, 1.3rem + 0.8vw, 2rem)
≈ 24px → 32px
Use: H4
heading-5
clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem)
≈ 20px → 24px
Use: H5
heading-6
clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem)
≈ 18px → 20px
Use: H6
text-lg
clamp(1.125rem, 1rem + 0.35vw, 1.25rem)
≈ 18px → 20px
Use: Lead text / large body copy
text-base
clamp(1rem, 0.95rem + 0.2vw, 1.0625rem)
≈ 16px → 17px
Use: Standard body text
text-sm
clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem)
≈ 14px → 15px
Use: Captions, metadata, small text
Header Classes
site-header
Width: 100%
Display: Flex
Align Items: Center
Desktop Min Height
88px
Tablet Min Height
80px
Mobile Min Height
72px
site-header-inner
Width: 100%
Max Width: container-max
80rem ≈ 1280px
Padding Left / Right
page-gutter
clamp(1rem, 0.5rem + 3vw, 4rem)
≈ 16px → 64px
Gap
space-fluid-md
clamp(1.5rem, 1rem + 1.25vw, 2rem)
≈ 24px → 32px
Display
Flex
Direction
Row
Align Items
Center
Justify Content
Space Between
Layout Classes
section-base
Display: Flex
Direction: Column
Width: 100%
Padding Top / Bottom: space-fluid-2xl
clamp(4rem, 2.5rem + 4vw, 6rem)
≈ 64px → 96px
Padding Left / Right: page-gutter-fluid
clamp(1rem, 0.5rem + 3vw, 4rem)
≈ 16px → 64px
section-lg
Padding Top / Bottom: space-fluid-3xl
clamp(5rem, 3rem + 5vw, 8rem)
≈ 80px → 128px
Apply with: section
container-base
Width: 100%
Max Width: container-max-width
80rem ≈ 1280px
Margin Left / Right: Auto
stack-sm
Display: Flex
Direction: Column
Gap: space-fluid-sm
≈ 16px → 24px
stack-base
Display: Flex
Direction: Column
Gap: space-fluid-md
≈ 24px → 32px
stack-lg
Display: Flex
Direction: Column
Gap: space-fluid-lg
≈ 32px → 48px
cluster
Display: Flex
Direction: Row
Wrap: Wrap
Align Items: Center
Gap
space-fluid-sm
≈ 16px → 24px
cluster-xs
grid-base
Display: Grid
Gap
space-fluid-md
≈ 24px → 32px
grid-spacious
Gap
space-fluid-lg
≈ 32px → 48px
Apply with:
grid
grid-standard (not using)
Rules
VARIABLE / PROPERTY Actual Elementor value ≈ Pixel equivalent or range Use: Purpose
Organization
/* ========================================================= JAT — HEADER — ... ========================================================= */ /* ========================================================= JAT — BUTTONS — ... ========================================================= */ /* ========================================================= JAT — CARDS — ... ========================================================= */ /* ========================================================= JAT — FORMS — ... ========================================================= */ /* ========================================================= JAT — RESPONSIVE — ... ========================================================= */
Layout Variables
Type your paragraph here
Type your paragraph here
Type your paragraph here
This is a title
TextBadge
Badge
Badge
This is a title
TextBadge
Badge
Badge
This is a title
TextBadge
Badge
Badge
Believe in Yourself
Be the Best
You Can Be
Initial one-to-one consultation, Health & Fitness Assasments Bespoke training program planing
This is a title
Type your paragraph here
This is a title
This is a title
Gaps
Links to chats
https://chatgpt.com/share/6aa4528e-767c-83ea-b2c4-d646e8ae9faa
https://chatgpt.com/g/g-p-6a3ee827da948191a3110c7330800ba7/c/6a9bcae3-cd70-83ea-8aeb-3ba7c50a2c06?src=history_search&messageId=4e3d3be9-7f55-4112-81fe-ae67c28fd75c&historySearchQuery=clamp
https://claude.ai/chat/a9d1ede5-8381-44a9-9191-8741bef8d0b1
Type your paragraph here
Type your paragraph here
Misc Elements
Career Category
Career Category
This is a title
Type your paragraph here
Hero Cinematic
<strong>Outer Div Block</strong>
| Classes: [section-base] [section-page-hero] [hero-cinematic-outer]
├── Featured Image
│ Dynamic → Featured Image Classes: [section-image-fill] [cinematic-filter]
│
├── Gradient Layer
Classes: [cinematic-hero-gradient]
│
└── Inner Content
Classes: [container-base] [stack-lg]
├── Meta Row
│ Class: [cluster]
│
│ ├── Career Category
│ │ Classes: [badge-base] [badge-inverse]
│ │
│ └── Route Type
│ Classes: [badge-base] [badge-inverse]
│
├── Job Title
│ [text-h1]
│ Dynamic → Post Title
│
├── Short Description
│ [content-lg]
│ Dynamic → Pods → short_description
│
└── CTA Row
[cluster]
├── Apply Now
└── View All Jobs