/* =========================================================================
Stringer Performance — Homepage stylesheet
Mobile-first. No frameworks, no build step.
Brand tokens all live in :root below. Change them there and the whole
site updates. These match apply/css/style.css so both pages look
like one site.
========================================================================= */
/* -------------------------------------------------------------------------
1. Design tokens
------------------------------------------------------------------------- */
:root {
/* Brand */
--accent: #22ee09; /* Stringer green (matches the logo mark) */
--accent-hover: #1cc908;
--accent-ink: #06140a; /* text sitting ON the green — near-black */
--accent-on-light: #0f7a04; /* darker green for green TEXT on white.
The bright green only hits 1.6:1 on white,
which fails WCAG AA. This hits 5.5:1. */
/* Dark sections */
--dark-bg: #0b0b0b;
--dark-bg-2: #131313; /* cards on dark */
--dark-border: #2a2a2a;
--dark-text: #ffffff;
--dark-muted: #b0b0ab; /* passes AA on --dark-bg */
/* Light sections */
--light-bg: #ffffff;
--muted-bg: #f5f5f4; /* off-white alternate light section */
--surface: #ffffff;
--text: #1c1c1c;
--muted: #5f5f5f; /* passes AA on white */
--border: #d9d9d6;
--focus: #4a90d9;
/* Layout */
--max-width: 1120px;
--narrow-width: 760px;
--radius: 12px;
--radius-lg: 18px;
--header-h: 68px;
/* Type — system stack, same as the application page. No downloads, and it
renders instantly on every device. To use a custom font later, load it
in and change this one line. */
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif;
}
/* -------------------------------------------------------------------------
2. Base / reset
------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth; /* smooth-scroll for the nav + hero links */
scroll-padding-top: calc(var(--header-h) + 12px); /* clears sticky header */
-webkit-text-size-adjust: 100%;
}
/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
body {
margin: 0;
font-family: var(--font);
font-size: 1rem;
line-height: 1.6;
color: var(--text);
background-color: var(--light-bg);
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a { color: inherit; }
h1, h2, h3 {
line-height: 1.12;
margin: 0;
letter-spacing: -0.02em;
}
/* Visible focus everywhere — accessibility */
a:focus-visible,
button:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
border-radius: 4px;
}
/* Skip link: hidden until focused */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--accent);
color: var(--accent-ink);
padding: 0.75rem 1.25rem;
font-weight: 700;
text-decoration: none;
}
.skip-link:focus {
left: 0;
}
/* -------------------------------------------------------------------------
3. Layout helpers
------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
padding: 0 1.25rem;
}
.container-narrow {
max-width: var(--narrow-width);
}
.section {
padding: 4rem 0;
}
.section-dark {
background-color: var(--dark-bg);
color: var(--dark-text);
}
.section-light {
background-color: var(--light-bg);
color: var(--text);
}
.section-muted {
background-color: var(--muted-bg);
color: var(--text);
}
/* Small uppercase letter-spaced label above each heading */
.eyebrow {
margin: 0 0 0.9rem;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--accent);
}
/* On light backgrounds the bright green is unreadable — use the dark green */
.section-light .eyebrow,
.section-muted .eyebrow {
color: var(--accent-on-light);
}
.section-title {
font-size: clamp(1.7rem, 6vw, 2.6rem);
font-weight: 800;
max-width: 20ch;
}
.section-lede {
margin: 1rem 0 0;
font-size: 1.05rem;
max-width: 56ch;
color: var(--muted);
}
.section-dark .section-lede {
color: var(--dark-muted);
}
.section-cta {
margin-top: 2.5rem;
}
/* -------------------------------------------------------------------------
4. Buttons
------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: inherit;
font-size: 0.95rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
padding: 0.85rem 1.4rem;
border: 2px solid transparent;
border-radius: var(--radius);
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease,
color 0.15s ease;
}
.btn-accent {
background-color: var(--accent);
color: var(--accent-ink);
}
.btn-accent:hover {
background-color: var(--accent-hover);
}
/* Secondary button — outlined. Used on dark backgrounds. */
.btn-ghost {
background-color: transparent;
color: var(--dark-text);
border-color: #666666; /* 3.4:1 against the dark bg — visible border */
}
.btn-ghost:hover {
border-color: var(--accent);
color: var(--accent);
}
.btn-sm {
padding: 0.6rem 1.1rem;
font-size: 0.85rem;
}
.btn-lg {
padding: 1rem 1.75rem;
font-size: 1rem;
}
/* -------------------------------------------------------------------------
5. Sticky header
------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background-color: rgba(11, 11, 11, 0.94);
backdrop-filter: blur(8px);
border-bottom: 1px solid var(--dark-border);
color: var(--dark-text);
}
.header-inner {
min-height: var(--header-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
text-decoration: none;
color: var(--dark-text);
}
.brand-mark {
height: 34px;
width: auto;
}
.brand-name {
font-weight: 800;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* --- Mobile hamburger button --- */
.nav-toggle {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 0 10px;
background: transparent;
border: 1px solid var(--dark-border);
border-radius: 10px;
cursor: pointer;
}
.nav-toggle-bar {
display: block;
height: 2px;
width: 100%;
background-color: var(--dark-text);
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Hamburger morphs into an X when the menu is open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* --- Nav: collapsed drawer on mobile --- */
.primary-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--dark-bg);
border-bottom: 1px solid var(--dark-border);
}
.primary-nav.is-open {
display: block;
}
.primary-nav ul {
list-style: none;
margin: 0;
padding: 0.5rem 1.25rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.primary-nav a:not(.btn) {
display: block;
padding: 0.85rem 0;
font-weight: 600;
text-decoration: none;
color: var(--dark-text);
border-bottom: 1px solid var(--dark-border);
}
.primary-nav a:not(.btn):hover {
color: var(--accent);
}
.primary-nav .btn {
margin-top: 0.75rem;
width: 100%;
}
/* -------------------------------------------------------------------------
6. Hero
------------------------------------------------------------------------- */
.hero {
padding: 3.25rem 0 3.5rem;
}
.hero-inner {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
.hero-title {
font-size: clamp(2.1rem, 10vw, 4rem);
font-weight: 800;
letter-spacing: -0.03em;
max-width: 14ch;
}
/* The one accent-colored word in the headline */
.hero-title .accent {
color: var(--accent);
}
.hero-sub {
margin: 1.25rem 0 0;
font-size: 1.1rem;
color: var(--dark-muted);
max-width: 46ch;
}
.hero-actions {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.hero-note {
margin: 1.75rem 0 0;
font-size: 0.85rem;
color: #8a8a86;
}
/* Photo panel */
.hero-media {
position: relative;
}
.hero-photo {
width: 100%;
border-radius: var(--radius-lg);
border: 1px solid var(--dark-border);
}
/* -------------------------------------------------------------------------
7. Made For — the two lanes (football players / adult athletes)
Same card, same type scale, same weight for both. Neither lane is the
secondary one, so there is deliberately no "primary"/"muted" variant here.
Light-section sibling of .card, built from the same tokens.
------------------------------------------------------------------------- */
.lane-grid {
margin-top: 2.5rem;
display: grid;
gap: 1.25rem;
}
.lane {
background-color: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.75rem 1.5rem;
}
.lane-title {
font-size: 1.2rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 0.4rem;
}
.lane-sub {
margin: 0 0 1.25rem;
font-size: 0.95rem;
color: var(--muted);
}
/* -------------------------------------------------------------------------
8. Cards + checklists
------------------------------------------------------------------------- */
.card-grid {
margin-top: 2.5rem;
display: grid;
gap: 1.25rem;
}
.card {
background-color: var(--dark-bg-2);
border: 1px solid var(--dark-border);
border-radius: var(--radius-lg);
padding: 1.75rem 1.5rem;
}
.card-title {
font-size: 1.2rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 1.25rem;
}
/* -------------------------------------------------------------------------
8a. The Offer — core block + lane add-ons
Deliberate hierarchy instead of three equal boxes: the core is one bordered
card (everyone gets it), and the two lane add-ons are lighter, boxless
blocks under an accent rule — so a reader sees "this is mine" without
comparing three lookalike panels.
------------------------------------------------------------------------- */
.offer-core {
margin-top: 2.5rem;
background-color: var(--dark-bg-2);
border: 1px solid var(--dark-border);
border-radius: var(--radius-lg);
padding: 1.75rem 1.5rem;
}
.offer-core-title {
font-size: 1.2rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 0 0 1.25rem;
}
/* Two-up checklist so the six core items cost three rows, not six */
.checklist-2col {
gap: 0.9rem 2rem;
}
.offer-add-grid {
margin-top: 2rem;
display: grid;
gap: 1.75rem;
}
/* No box — an accent rule on top is enough to group them and keeps these
visually subordinate to the core card above. */
.offer-add {
border-top: 2px solid var(--accent);
padding-top: 1.1rem;
}
.offer-add-title {
font-size: 0.95rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 1rem;
color: var(--accent);
}
@media (min-width: 720px) {
.offer-core {
padding: 2rem 1.85rem;
}
.checklist-2col {
grid-template-columns: 1fr 1fr;
}
.offer-add-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}
/* -------------------------------------------------------------------------
8b. Data numbers
------------------------------------------------------------------------- */
/* Numbers — lifts, the forty time. Mono so data reads as data. */
.data {
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
Consolas, monospace;
font-weight: 700;
color: var(--accent);
}
/* On a light section the bright green fails contrast — use the dark green. */
.section-light .data,
.section-muted .data {
color: var(--accent-on-light);
}
/* Checkmark list — the ✓ is drawn in CSS, so no icon files needed */
.checklist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.9rem;
}
.checklist li {
position: relative;
padding-left: 2rem;
font-size: 0.98rem;
color: var(--dark-muted);
}
.checklist li::before {
content: "";
position: absolute;
left: 0;
top: 0.28rem;
width: 1.15rem;
height: 1.15rem;
border-radius: 50%;
background-color: rgba(34, 238, 9, 0.15);
border: 1px solid rgba(34, 238, 9, 0.45);
}
.checklist li::after {
content: "";
position: absolute;
left: 0.4rem;
top: 0.5rem;
width: 0.3rem;
height: 0.58rem;
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(45deg);
}
/* Checklist sitting on a light section */
.section-light .checklist li,
.section-muted .checklist li {
color: var(--text);
}
.checklist-compact li {
font-size: 0.92rem;
}
/* -------------------------------------------------------------------------
9. About / Your Coach
------------------------------------------------------------------------- */
.about-inner {
margin-top: 2.25rem;
display: grid;
gap: 2rem;
}
.about-photo {
width: 100%;
max-width: 320px;
border-radius: var(--radius-lg);
border: 1px solid var(--border);
}
.about-copy p {
margin: 0 0 1rem;
color: var(--muted);
max-width: 60ch;
}
/* About on a dark section: the body copy and photo border are authored for
white, so both are re-pointed at the dark tokens here. Without this the
bio renders near-black on black. */
.section-dark .about-copy p {
color: var(--dark-muted);
}
.section-dark .about-photo {
border-color: var(--dark-border);
}
/* #about is a dark section — flip the bio paragraphs to a light colour so they
stay readable on black. (The checklist already uses the light --dark-muted on
dark backgrounds, and the eyebrow/heading inherit the correct colours.) */
#about .about-copy p {
color: var(--dark-muted);
}
.about-copy .checklist {
margin-top: 1.5rem;
}
/* -------------------------------------------------------------------------
10. Athletic Assessment — Kit (ConvertKit) embed slot
The Kit form brings its own card styling (white background, border,
max-width 700px), so this wrapper stays chrome-free — otherwise you get
a box inside a box.
------------------------------------------------------------------------- */
.embed-slot {
margin-top: 2.25rem;
}
#assessment-embed {
width: 100%;
}
/* Center the Kit form and round its corners to match the rest of the site.
#assessment is now white too, so keep this white card visually distinct with
a firm border + soft shadow (matches the Apply form card). */
#assessment-embed .formkit-form {
margin: 0 auto !important;
border-radius: var(--radius-lg) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04),
0 20px 44px -22px rgba(17, 17, 17, 0.2) !important;
}
/* --- Kit embed: hide the form's built-in headline + subheadline ---
The section above already carries that copy as a proper , and two
stacked headlines saying the same thing reads badly. Delete these three
lines to let Kit control the headline instead (and remove the and
from the assessment section in index.html). */
#assessment-embed .formkit-header,
#assessment-embed .formkit-subheader {
display: none !important;
}
/* Match the Kit input + button to the site's type and touch targets */
#assessment-embed .formkit-input {
font-family: var(--font) !important;
border-radius: var(--radius) !important;
padding: 0.85rem 0.9rem !important;
}
#assessment-embed .formkit-submit {
font-family: var(--font) !important;
border-radius: var(--radius) !important;
}
#assessment-embed .formkit-submit > span {
font-weight: 700;
font-size: 1rem;
padding: 14px 24px; /* keeps the button a 44px+ touch target */
}
/* Keeps any pasted iframe embed responsive instead of overflowing on phones */
#assessment-embed iframe {
display: block;
width: 100% !important;
max-width: 100%;
border: 0;
}
/* -------------------------------------------------------------------------
10b. Assessment — compact section overrides (scoped to #assessment ONLY)
The headline was rendering hero-sized with lots of empty space. Every rule
here is scoped to #assessment so the shared .section-title / .eyebrow /
.section-lede classes stay untouched on every other section.
------------------------------------------------------------------------- */
/* Shorter section — a normal block, not a full-screen one */
#assessment {
padding-top: 3rem;
padding-bottom: 3rem;
}
/* Normal section heading (not a hero title); sits on ~2 lines */
#assessment .section-title {
font-size: clamp(1.5rem, 3.2vw, 1.9rem);
line-height: 1.15;
max-width: 28ch;
}
/* Group eyebrow → headline → lede → form closer together */
#assessment .eyebrow {
margin-bottom: 0.5rem;
}
#assessment .section-lede {
margin-top: 0.5rem;
}
#assessment .embed-slot {
margin-top: 1.25rem;
}
/* --- Trim dead space inside the Kit form card ---------------------------
Kit hard-codes 40px of card padding at >=600px and a 25px gap above the
field row (it used to sit under the now-hidden header). Pulled in here.
Scoped + !important so these beat Kit's own inline