HTBA
Style Guide
Font: Outfit (variable, 100–900).
Breakpoints
- base 0px
- xs 370px (23.125rem)
- sm 640px (40rem)
- md 768px (48rem)
- lg 1024px (64rem)
- menu 1180px (73.75rem)
- xl 1280px (80rem)
- 2xl 1536px (96rem)
- 3xl 1800px (112.5rem)
Values shown as size/line-height in px. The highlighted value is the one currently in view.
Styles on dark
text-display-1
Display 1
SemiBold · tracking 0.05em
base 40/46 · md 56/62 · lg 64/69 · 3xl 75/81
The Hunter Valley
text-display-2
Display 2
SemiBold · tracking 0.05em
base 38/44 · md 44/50 · lg 52/57 · 3xl 70/77
Backing our industry
text-display-3
Display 3
SemiBold · tracking 0.05em
base 34/39 · md 46/51 · 3xl 60/60
Dedicated to the Hunter Valley
text-stat
Stat
SemiBold
base 40/38 · md 54/51 · 3xl 70/63
SEPT 2026
text-stat-sm
Stat small
SemiBold
base 24/23 · md 32/30 · 3xl 40/36
SEPT
text-h1
H1
Medium
base 26/32 · md 32/40 · 3xl 40/50
Learn more
text-h2
H2
SemiBold · tracking 0.05em
base 24/29 · md 30/36 · 3xl 35/42
Who we are
text-card-title
Card title
SemiBold · tracking 0.05em
base 30/36 · md 40/46 · 3xl 50/56
Event Name
text-h3
H3
Medium
base 20/24 · md 25/28 · 3xl 30/33
Our Partners
text-lead
Lead
Regular
base 20/28 · md 25/33 · 3xl 30/40
Fostering, protecting, promoting and preserving thoroughbred breeding.
text-body
Body
Regular
base 17/23 · md 21/27 · 3xl 25/30
Read now
text-body-sm
Body small
Regular
base 15/20 · md 18/23 · 3xl 20/25
Your email
text-nav
Nav
SemiBold
base 17/22 · md 20/25
Membership
text-button-lg
Button large
Medium
base 26/32 · md 34/42 · 3xl 40/50
text-button
Button
Medium
base 17/22 · md 20/25 · 3xl 22/28
text-button-sm
Button small
Bold
base 15/19 · md 17/22
text-eyebrow
Eyebrow
Black
base 15/22 · md 18/27 · 3xl 20/30
EXPLORE
text-newsletter
Newsletter
Bold · tracking 0.05em
base 26/32 · md 32/38 · 3xl 40/46
Styles on light
text-h1
H1
Medium
base 26/32 · md 32/40 · 3xl 40/50
Learn more
text-h2
H2
SemiBold · tracking 0.05em
base 24/29 · md 30/36 · 3xl 35/42
Training Courses
text-h3
H3
Medium
base 20/24 · md 25/28 · 3xl 30/33
About HTBA
text-lead
Lead
Regular
base 20/28 · md 25/33 · 3xl 30/40
Explore the many career pathways available and discover where you fit.
text-card-body
Card body
Regular
base 20/28 · md 17/23 · lg 18/24 · xl 20/27 · 3xl 30/40
Find your perfect pathway to a rewarding career in the thoroughbred industry.
text-body-sm
Body small
Regular
base 15/20 · md 18/23 · 3xl 20/25
Find out more
text-button
Button
Medium
base 17/22 · md 20/25 · 3xl 22/28
Text wrapping
Headings (h1–h6) use
text-wrap: balance and body copy
(p) uses text-wrap: pretty,
set globally in css/tailwind.css. Both can be overridden
per element with the text-nowrap or
text-wrap utilities.
Heading — balance
Dedicated to the Hunter Valley thoroughbred breeding industry
Body — pretty
Fostering, protecting, promoting and preserving thoroughbred breeding in the Hunter Valley.
Weights
Aa
Regular · 400
Aa
Medium · 500
Aa
SemiBold · 600
Aa
Bold · 700
Aa
ExtraBold · 800
Aa
Black · 900
Colours
#13294B
Headings & buttons on light
#333F48
Section headings & body on light
#707070
Muted text
#000000
Body copy on light
#FFFFFF
Text on dark
Alpha tints
Opacity variants already used in the theme. Surfaces, dividers and borders only — no new colours or steps.
On dark
white/10
Panel tint
white/15
Divider
white/95
Mobile menu surface
black/10
Hero image scrim
On light
slate/10
Chip / panel
slate/15
Divider
slate/20
Border
slate/70
Section surface (membership); event card
slate/80
Event card hover
Text opacities in use:
slate/60, slate/80,
paper/80 (muted labels and text).
Shapes
Corner radius tokens, defined in css/tailwind.css
(@theme). Only the values already used by the theme.
4px · 0.25rem
Surfaces, chips, controls
6px · 0.375rem
Event-card inner image base/md (floored: outer < p-6)
10px · 0.625rem
Small buttons (.btn--sm)
12px · 0.75rem
Date pill (News card)
19px · 1.1875rem
Buttons; mobile card / panel base
30px · 1.875rem
Cards at md+; big panels at md; event-card inner image at xl
54px · 3.375rem
Big panels at xl (outer = inner 30 + 24 padding)
Spacing
The default Tailwind 0.25rem scale, limited to the
steps in use (every value is step × 4px).
Sections use py-20; the page gutter and margins are
covered in Grid.
gap-y-1, mt-1
px-2, py-2
gap-3, py-3
Grid gutter, gap-4, p-4
px-5, pt-5
gap-6, p-6, px-6
Mobile page margin (px-7)
gap-8, p-8, px-8; split / stack gap on mobile
gap-10, mb-10; split / stack gap at md
p-12, md page margin (px-12)
Stacked card gap (xl+, gap-stack)
Two-column split gap (xl+, gap-split)
Section padding base (py-16), mb-16
Section padding md (py-20), xl margin (px-20); Careers card gap (3xl, gap-20)
Wide two-column split gap (xl+, gap-split-wide)
Section padding xl (py-28)
Section padding 3xl (py-35), 3xl page margin (px-35)
Tall hero only (pb-40)
Animations
Motion used across the site. Hover the elements below to preview, or use the
replay buttons. Every effect is disabled when the visitor requests reduced
motion (prefers-reduced-motion: reduce).
For scroll reveals, keep --reveal-delay to a
0.4s cap. Scrolling already staggers elements as
they cross the viewport, so a long delay on a trailing element reads as a
stalled load rather than a stagger.
| Effect | Selector | Trigger | Timing |
|---|---|---|---|
| Menu link hover | .main-menu > li > a |
hover — opacity 100 → 70% | 300ms (transition-opacity) |
| Sub-menu reveal | .sub-menu |
li:hover / :focus-within | Instant (no transition) |
| Sub-menu item hover | .sub-menu > li > a |
hover — opacity 100 → 70% | 300ms (transition-opacity) |
| Mobile sub-menu accordion | .mobile-menu .submenu-panel |
toggle click — grid-template-rows 0fr → 1fr, chevron rotates 180° | 300ms (transition-[grid-template-rows]) |
| Button hover | .btn |
hover — background / border / text | 200ms (transition-colors) |
| Text link hover | .transition-opacity |
hover — opacity 100 → 70% | 300ms |
| Image card hover reveal | .group (image card) |
hover / :focus-within — overlay cross-fade, label lift, description slide-in | 500ms height / 700ms transform, ease-out |
| Hero image fade-in | .hero img / .fadein |
JS on load (starts opacity-0) | 1s, forwards |
| Hero content fade-up | .hero-anim / .fadeinup1-3 |
JS on image load — 750ms base, 0.2s stagger | 0.8s cubic-bezier(0.22,1,0.36,1), forwards |
| Section text fade-up | [data-reveal="up"] |
scrolls into view (once) — opacity 0 → 1, translateY 75px → 0 | 0.8s cubic-bezier(0.22,1,0.36,1), 0.2s stagger (cap 0.4s — scroll already staggers) |
| Section cards fade-in | [data-reveal="fade"] |
scrolls into view (once) — opacity only | 0.8s cubic-bezier(0.44,0,0.56,1), forwards |
| Mobile menu modal | #menu-modal .modal-overlay |
open / close (MicroModal) | 300ms cubic-bezier(0,0,0.2,1) |
| Smooth scroll | html |
anchor navigation | Browser default |
Hover preview
Hero image fade-in
Hero content fade-up
Mobile menu modal
Section text fade-up (scroll)
Section cards fade-in (scroll)
Grid
Columns
base 2 · md 12
Gutter
16px
Margin
base 28 · md 48 · xl 80 · 3xl 140
md breakpoint. The highlighted value is the one currently in view.
Components
Documented here as they are built. Currently: the
Buttons
(via htba_button()),
the section eyebrow, the image card, the resource card and
the arrow icons (all via helpers in
inc/components.php),
plus the header / main menu, the hero and the media band.
Section eyebrow
htba_section_eyebrow( $label, $args )
· a 3px rule (62 / 92 / 123px at base / md / xl) followed by a text-h3 label. Used on light (slate) and dark (paper).
On light
About HTBA
On dark
Membership
Arrows
htba_arrow( $size )
· decorative (aria-hidden), inherits currentColor.
md 53×41 (image cards), sm 39×30 (text links).
md
sm
md
sm
Image card
htba_image_card( $image, $label, $link, $args )
· linked image (rounded-lg base, rounded-xl at md+) with a text-h2 label bottom-left
and arrow bottom-right. The visible label is the link's accessible name. A subtle bottom scrim is drawn by default; on hover or keyboard focus the resting scrim cross-fades to a darker full-card overlay, the label and arrow lift, and the optional description slides in.
A short sentence revealed on hover.
Large card · aspect-[812/733] at md+
A short sentence revealed on hover.
Stacked card · aspect-[768/332] at md+
Resource card
htba_resource_card( $resource, $args )
· linked image (aspect-[3/2], rounded-lg base, rounded-xl at md, rounded-2xl at xl+) with a text-h2 title over a "Read now" text-body line and sm arrow, bottom-left. A static scrim keeps the copy legible; on hover or keyboard focus the scrim darkens and the arrow nudges right. Used by the Resource hub section.
News card
htba_news_card( $post, $args )
· linked featured image (aspect-[469/453], rounded-lg base, rounded-xl at md+) with a rounded-chip slate date pill top-left and, bottom-left, a text-h2 title over a right-aligned "Read now" text-body line and sm arrow. A full-card scrim (70% black at the base through 40% to 30% at the top) keeps the copy legible; on hover or keyboard focus the card darkens further and the arrow nudges right. Used by the News section. The demo uses a gradient placeholder in place of the image.
Date pill (used top-left on the card):
Media band
.media-band
· full-bleed image band at least the viewport tall
(min-height: 100svh, so it grows rather than clips the copy on short screens).
The image and the content share one grid cell; the content, aligned to
.grid-main, is bottom-anchored and sits at z-10.
Used by the Breeding section. The demo below overrides the min-height so it fits the page.
A breeding ground for brilliance
The Hunter Valley is one of only three International Centres of Thoroughbred Breeding Excellence in the world.
Split / stack
Two-column layouts inside .grid-main use
.split (60px column gap at xl+) or
.split-wide (100px, used by the Membership section);
both become rows at md. Stacked children use
.stack-split. .split-event
pairs a fixed-width date column with a fluid event card (Events section).
Gap 32 / 40 / 100px
Equal halves (flex-1)
Date
Event card — fixed date column + fluid card. Date badge is hidden below lg.