style-guide | EPIC4 Specialty Partners

Colors

Brand color system — base, flex, and on-context shades.

CSS Style Guide

EPIC4 — living reference for typographic and UI styles on this site.

1 — Brand Fonts

Font (primary) - ... ...

The quick brown fox jumps over the lazy dog. 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ

--fontPrimary — Body / Paragraph

Font (secondary) - ... ...

The quick brown fox jumps over the lazy dog. 0123456789 ABCDEFGHIJKLMNOPQRSTUVWXYZ

--fontSecondary — Secondary / Accent

Font1 - ... ...

Regular weight: The quick brown fox jumps over the lazy dog.

--font1 / .fontRegular

Font2 - ... ...

Thin weight: The quick brown fox jumps over the lazy dog.

--font2 / .fontThin

Font3 - ... ...

Bold weight: The quick brown fox jumps over the lazy dog.

--font3 / .fontBold

Font4 - ... ...

Italic: The quick brown fox jumps over the lazy dog.

--font4 / .fontItalic

Font5 - ... ...

Extra Bold: The quick brown fox jumps over the lazy dog.

--font5 / .fontXBold

Font6 - ... ...

Styled font: The quick brown fox jumps over the lazy dog.

--font6 / .fontStyled
2 — Headings (H1–H6)
H1

Heading Level One

...
H2

Heading Level Two

...
H3

Heading Level Three

...
H4

Heading Level Four

...
H5
Heading Level Five
...
H6
Heading Level Six
...
BODY

The quick brown fox jumps over the lazy dog.

…
SMALLThe quick brown fox jumps over the lazy dog.…
LABEL…
3 — Paragraph & Body Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Default Paragraph

This paragraph has the .lead class applied.

Lead (.lead)

Bootstrap utility for emphasized lead-paragraph copy.

4 — Inline Text Styles

Bold (strong)

Italic (em)

Underlined

Strikethrough

Highlighted

Inline code

Keyboard

Hyperlink

5 — Lists
Unordered
  • First item
  • Second
    • Nested one
    • Nested two
  • Third item
Ordered
  1. First item
  2. Second
    1. Nested one
    2. Nested two
  3. Third item
6 — Blockquote & Code
Blockquote

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs
Code Block 
function greet(name) { return `Hello, ${name}!`; }
7 — Buttons Team Colors
Standard
Utility Colors
Outline
Black / White
Specialty
btn-header-minor
btn-header-minor dark
Sizes
8 — Inputs (canonical EPIC4 patterns)
Floating-label text / email / tel / textarea

Every EPIC4 form uses Bootstrap 5 .form-floating wrappers. Add .form-control on the input. Add .phone on tel inputs to auto-format as (000) 000-0000.

Phone formatter lives in Content/Snippets/All-FooterScripts.html

Loading form style data…

Select / Dropdown

Use .form-floating + .form-select for any single-line dropdown with a floating label.

Compact-column pattern — City uses default .form-control, State uses .form-select.xs with min-width30 flex-shrink-1.

Size modifiers .xs / .sm / .md / .lg / .xl only nudge chevron padding — height/font/width don't change.

Datepicker — date + datetime-local

Canonical EPIC4 pattern — .datepicker-input wrapper + .btn-clear in label row + FA calendar icon panel.

Use type="date" for date-only, type="datetime-local" for date + time.

Reference template: Content/Pages/form/userform-info-profile.html

Standard
Inline
Checkboxes

Standard .form-check + .form-check-input. Inline variant uses .form-check-inline.

Standard
Inline
Radio Buttons

Same .form-check wrapper as checkboxes; uses type="radio" with a shared name attribute.

Toggle Switch (Bootstrap)

Add .form-switch + role="switch" on a checkbox .form-check.

Big Toggle Switch (EPIC4 Contest)

120×67px green-on-checked toggle with FA check-circle icon revealed when on.

Used for opt-in confirmations.

Toggle Buttons (.btn-check + .btn)

Hidden radio/checkbox paired with a .btn label. Single-select (radio) or multi-select (checkbox).

Top row = radio (single), bottom row = checkbox (multi).

Range / File / Color

Native HTML5 inputs with .form-range, .form-control, and .form-control-color classes.

File input gets a Clear button since browsers don't expose a native unset.

Looks good!
Please enter a valid email.
Form States

Bootstrap state classes: .is-valid, .is-invalid, plus native disabled and readonly attributes.

Pair with .valid-feedback / .invalid-feedback blocks for inline messages.

9 — Reference Only — DO NOT USE

⚠ Reference only. Bare-input pattern (no .form-floating, no .form-control).

Always use the canonical patterns in Section 8 for production forms.

Click to expand bare-input reference

⚠ Reference only — do not use this pattern. Use Section 9 floating-label inputs instead.

10 — Tables
NameSportLevelStatus
Alice JohnsonSoftballCollegeActive
Bob MartinezBaseballHigh SchoolCompleted
Carol WilliamsBasketballProfessionalActive
.table-striped
ItemValue
Row 1Data A
Row 2Data B
Row 3Data C
11 — Bootstrap 5 Utilities
Alerts
.alert-primary
.alert-secondary
.alert-success
.alert-danger
.alert-warning
Badges
PrimarySecondary SuccessDanger WarningInfo
12 — EPIC4 Font Classes
Loading font class data…
13 — Canonical Breakpoints

Match Bootstrap 5. The active band lights up as you resize the window.

Do not add new breakpoints without updating this reference.

xs · <576px sm · 576–767.98 md · 768–991.98 lg · 992–1199.98 xl · 1200–1399.98 xxl · ≥1400

Fine-tune bands used inside components: 339.98, 499.98, 699.98. Plus the portrait/touch override: @media (orientation:portrait) and (hover:none) and (pointer:coarse) — forces the xs stacked layout on tablets held vertically.

14 — DataTable (Canonical EPIC4 Pattern)

Mandatory per datatable-responsive skill.

Wrap in .partner-table-wrapper; table is table table-sm dataTable.

Headers use sticky-top font70 caps for tiny uppercase labels; first column gets sticky-col-left.

DataTables auto-init from All-FooterScripts.html wires sort + search.

Resize narrow to verify horizontal scroll + sticky Name column.

Name Sport Level Location Coach Start Date Sessions Status
Alice JohnsonSoftballCollegeDenverM. Wright2026-03-128Active
Bob MartinezBaseballHigh SchoolBoulderJ. Reed2026-02-0112Completed
Carol WilliamsBasketballProfessionalAuroraS. Lang2026-01-0820Active
Diego RamirezSoccerCollegeFort CollinsM. Wright2026-04-024Active
Emma PatelVolleyballHigh SchoolLovelandK. Yost2026-04-152Active
15 — Modal Pattern

Header / body / footer / backdrop.

Shown inline here (not as an overlay) so the structure is visible.

Color uses --color1 for the header band.

Confirm Action

Are you sure you want to proceed? This will update the record and notify the assigned coach. You can undo this from the audit log within 24 hours.

16 — CSS Custom Properties
Loading…
17 — Loaded Stylesheets
Loading…

Cards

Reusable card patterns — list, stat, promo, image-top, header+footer.

1 — Bootstrap base card
Card Title

Generic Bootstrap card with .card + .card-body.

Action
.card

Bootstrap baseline. Add .card-header / .card-footer for sectioned cards.

2 — Card with header + footer
Featured
Special Title Treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago
.card-header / .card-footer

Full Bootstrap card with header eyebrow and footer meta. Useful for blog posts, news items, dated content.

3 — Stat block (KPI card)
1,247
Active Members
$42,850
YTD Revenue
96%
Retention
Stat block / KPI

Big number + small label. Typically rendered in a flex row of 3-4 cards. Use .text-center for centered alignment, color:var(--color1) on the number for brand emphasis.

4 — List card
Recent Activity
  • Alice signed up 2m ago
  • New invoice from EPIC4 14m ago
  • Carol completed onboarding 1h ago
List card

Card with .list-group .list-group-flush inside. Each row uses d-flex justify-content-between to push primary text left and meta right.

5 — Promo block

Get Started Today

Join hundreds of athletes leveling up their mental game.

Schedule a call →
Promo / CTA card

Brand-colored full-bleed promo card. Bg uses var(--color1), white text, single CTA button.

6 — Image-top card
Card with image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

Image-top card

Image (or gradient placeholder) caps the top of the card. Use aspect-ratio:16/9 on the image wrapper for consistent ratios across cards.

Icons

Font Awesome 6 — common icons used across this site.

Icon set
fa-calendar
fa-clock-o
fa-check
fa-times
fa-search
fa-edit
fa-trash
fa-plus
fa-minus
fa-chevron-up
fa-chevron-down
fa-chevron-left
fa-chevron-right
fa-arrow-up
fa-arrow-down
fa-bars
fa-user
fa-users
fa-cog
fa-envelope
fa-phone
fa-home
fa-info-circle
fa-exclamation-triangle
fa-check-circle
fa-question-circle
fa-download
fa-upload
fa-print
fa-share
fa-link
fa-external-link
Font Awesome 6

Use <i class="fa fa-NAME"></i>. Inside buttons or labels, an icon usually pairs with text — keep text descriptive (the icon enhances, doesn't replace).

Full reference: fontawesome.com/icons

Layouts

Architectural patterns — billboards, two-column content, member bars.

1 — Billboard hero

Billboard Headline

Sub-copy describing what this section is about and why the reader should care.

Primary CTA
Billboard / hero

Full-bleed brand-color section, large headline + sub-copy + single CTA. Used at the top of landing pages, marketing pages, partner overview screens.

2 — Two-column content + image

Section heading

Narrative body copy that supports the heading. Two-column with image on the right, text on the left is the most common Treepl content section across this site.

Learn more
Two-column content

CSS Grid 1fr 1fr at md+, stacks at sm. Either column can be image or content. Reverse the order for visual variety as you scroll.

3 — Content + sidebar

Main content area

Primary content occupies the wider column. Body copy, articles, blog posts, dashboards live here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Content + sidebar

2:1 grid for blog post + related links, dashboard + filters, etc. Sidebar uses --flexwhite03 tint for subtle separation from main content.

4 — Member bar (header + member detail)
CW
Craig Whitlock
info@goepic4.com · Member since 2019
View profile
Member bar

Avatar + name + meta + action button in one horizontal row. Pattern from EPIC4 portal — see Content/Snippets/Control-Tracker-Member-Bar.html.

Combo Box

Tracker scoreboard combo blocks and the Mudcup responsive card pattern. Resize the window to watch breakpoints reflow.

Tracker Scoreboard — Contact Form (3 groups)
New
7
Recent
14
All
42
Review
5
Contacted Contact
9
Incomplete
2
Scheduled
3
Follow-Up
4
Future
1
Closed
6
7 — Responsive Card Pattern (Mudcup leaderboard)
.rc-card — full card
1
Participant One
42
—
ENT1
8
ENT2
7
ENT3
7
ENT4
6
ENT5
8
ENT6
6
2
Participant Two
39
−3
ENT1
7
ENT2
6
ENT3
7
ENT4
6
ENT5
7
ENT6
6
Standings-only compact mode — add .standings-only to an ancestor
1
Participant One
42
—
2
Participant Two
39
−3
3
Participant Three
36
−6
.rc-card

Distilled from Mudcup leaderboards.

At xs it stacks; at md it becomes a 2-col grid (name+pills | score+indicator); at lg it flows inline as a flex row.

Uses display:contents on wrapper rows so children reflow into whichever layout the breakpoint calls for without re-nesting markup.

Source: /C3-Personal/Fantasy/Mudcup/