Foundations
Defined in _colors.scss as Sass variables, exposed as utility classes (.text-{name} / .bg-{name}).
Foundations
Type scale
Text H1
Text H2
Text H5
Text H4
Text H3
Text H7
Text H6
Text P1 — body copy at the larger size, used for intros and lead paragraphs.
Text P2 — standard body copy, used throughout content blocks.
Text P3 — small print, used in the footer.
Components
Defined in _buttons.scss on the base .Button class, with modifier classes for each variant.
Default (on dark surface)
Outline
With icon modifier
Clear (no background/border)
Button classes: .Button + optional modifier: .Button--purple-1 / .Button--purple-2 / .Button--outline / .Button--clear / .Button--icon / .Button--scale-text
Components
The job-search form (.Form, in components/shared/form/) is tightly coupled to the appcast search filters and job feed — the markup below approximates its layout and input styling rather than reproducing the live search widget.
Components
.Navbar
Black background, logo left, nav links center, hamburger + .Button.Button--purple-1 CTA on the right.
.Hero
Full-width, black background. Two-column layout: copy + inline search left, image slider right (stacked on mobile). Heading uses .text-h1.
.Content
Simple content band. Dark background, centered or left-aligned copy block.
.Content component, using its real title and copy classes..Quotes
Slick carousel of testimonial quotes on a dark background.
"This is a sample quote pulled through the real .Quotes markup."
- Team Member
Job Search Result Cards
No dedicated PHP partial exists for job cards — appcast's search JS renders results at runtime. Mock below approximates the dark surface + purple hover pattern used elsewhere in the theme.
Irvine, CA · Posted 3 days ago
View JobPlano, TX · Posted 1 week ago
View JobRemote · Posted today
View Job.Footer
Dark background, centered social links, legal link list, and copyright.
Layout
Bootstrap-compatible grid breakpoints used throughout the SCSS partials. Root font-size: 10px (1rem = 10px).
| Label | Max-width |
|---|---|
| Mobile | max-width: 575px |
| Tablet | max-width: 767px |
| Small desktop | max-width: 991px |
| Desktop | max-width: 1199px |
| Large desktop | max-width: 1299px |
Reference
assets/build/css/page-life.min.css) directly..text-*, .bg-*, .Button*) and render exactly as they do on the live site..ds-) since those components pull in ACF field data, slick/AOS JS, or appcast search markup that isn't available outside a live page.assets/uncompiled/scss/.