/* ==========================================================================
Yakima Valley Soccer League — stylesheet
Red / white color scheme. One shared stylesheet for all pages.
These pages are content only: the hosting platform supplies the site
header, navigation and footer, so this file styles nothing outside
<main>. There is no JavaScript.
To retune the red across the whole site, change --red-600 (and its
darker/lighter siblings) in the :root block below. Nothing else needs
to be touched.
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens
-------------------------------------------------------------------------- */
#mainContainer.minMainContent:has(.yvsl) { margin-left: 0; margin-right: 0; padding-left: 12px; padding-right: 12px; }
.yvsl {
/* Brand red */
--red-950: #4a0510;
--red-900: #650a18;
--red-800: #86101f;
--red-700: #a5122a;
--red-600: #c8102e;   /* primary */
--red-500: #e01d3c;
--red-100: #fbdbe1;
--red-050: #fdeef1;
/* Neutrals */
--ink:      #1b1418;
--body:     #4b4247;
--muted:    #7c7176;
--line:     #e9e2e4;
--surface:  #ffffff;
--surface-2:#faf6f7;
--surface-3:#f2eaec;
/* Functional */
--ok:       #1a7a45;
--ok-bg:    #e2f4e9;
--warn:     #8a6100;
--warn-bg:  #fdf0cf;
/* Type */
--font-display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Layout */
--wrap: 100%;        /* content fills its container; set e.g. 1180px to cap it */
--radius: 14px;
--radius-sm: 8px;
--shadow-sm: 0 1px 2px rgba(74, 5, 16, .06), 0 2px 6px rgba(74, 5, 16, .05);
--shadow-md: 0 4px 12px rgba(74, 5, 16, .09), 0 12px 28px rgba(74, 5, 16, .08);
}
/* --------------------------------------------------------------------------
2. Reset &amp; base
-------------------------------------------------------------------------- */
.yvsl,
.yvsl *,
.yvsl *::before,
.yvsl *::after { box-sizing: border-box; }
.yvsl {
margin: 0;
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
color: var(--body);
background: var(--surface);
-webkit-font-smoothing: antialiased;
}
.yvsl img { max-width: 100%; display: block; }
/* Icons. The sprite is a <symbol> library at the top of each page; it never
renders itself. Stroke styling lives here instead of being repeated as
presentation attributes on every icon, and is inherited by <use> content.
Container rules (.yvsl-tile-icon svg, .yvsl-notice svg, ...) override the size. */
.yvsl .yvsl-sprite { display: none; }
.yvsl .yvsl-icon {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.yvsl a { color: var(--red-700); text-decoration: none; }
.yvsl a:hover { color: var(--red-500); }
.yvsl h1,
.yvsl h2,
.yvsl h3,
.yvsl h4 {
font-family: var(--font-display);
color: var(--ink);
line-height: 1.08;
margin: 0 0 .5em;
letter-spacing: .01em;
text-transform: uppercase;
font-weight: 700;
}
.yvsl h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
.yvsl h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.yvsl h3 { font-size: 1.3rem; }
.yvsl h4 { font-size: 1.05rem; }
.yvsl p { margin: 0 0 1.1em; }
.yvsl p:last-child { margin-bottom: 0; }
.yvsl :focus-visible {
outline: 3px solid var(--red-600);
outline-offset: 2px;
border-radius: 4px;
}
.yvsl .yvsl-hero :focus-visible,
.yvsl .yvsl-section-dark :focus-visible { outline-color: #fff; }
/* --------------------------------------------------------------------------
3. Layout helpers
-------------------------------------------------------------------------- */
.yvsl .yvsl-wrap {
width: 100%;
max-width: var(--wrap);
margin-inline: auto;
padding-inline: 12px;
}
.yvsl .yvsl-section { padding: 40px 0; }
.yvsl .yvsl-section-tight { padding: 28px 0; }
.yvsl .yvsl-section-alt { background: var(--surface-2); }
.yvsl .yvsl-section-dark {
background:
radial-gradient(1200px 400px at 80% -10%, rgba(224, 29, 60, .45), transparent 60%),
var(--red-900);
color: #f2d5da;
}
.yvsl .yvsl-section-dark h2,
.yvsl .yvsl-section-dark h3 { color: #fff; }
.yvsl .yvsl-section-head { max-width: 720px; margin-bottom: 24px; }
.yvsl .yvsl-section-head.yvsl-center { margin-inline: auto; text-align: center; }
.yvsl .yvsl-section-head p { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }
.yvsl .yvsl-section-dark .yvsl-section-head p { color: #ecc4cc; }
.yvsl .yvsl-eyebrow {
display: inline-block;
font-family: var(--font-display);
font-size: .9rem;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 700;
color: var(--red-600);
margin-bottom: .6rem;
}
.yvsl .yvsl-section-dark .yvsl-eyebrow,
.yvsl .yvsl-hero .yvsl-eyebrow { color: #ffc9d2; }
.yvsl .yvsl-grid { display: grid; gap: 24px; }
.yvsl .yvsl-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.yvsl .yvsl-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Grid children align to the top instead of stretching to equal height. */
.yvsl .yvsl-grid-top { align-items: start; }
/* A trailing action (usually a button) after a grid or a card body. */
.yvsl .yvsl-section-actions { margin-top: 24px; }
.yvsl .yvsl-card-actions { margin-top: 16px; }
/* Text helpers */
.yvsl .yvsl-text-muted { color: var(--muted); }
/* Bulleted list inside a card &mdash; the browser default indent is too deep. */
.yvsl .yvsl-list { padding-left: 1.15rem; color: var(--body); }
/* Small uppercase job title under a name. */
.yvsl .yvsl-role {
color: var(--muted);
font-size: .8rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 700;
}
/* --------------------------------------------------------------------------
4. Buttons &amp; badges
-------------------------------------------------------------------------- */
.yvsl .yvsl-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
font-family: var(--font-display);
font-size: 1.05rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: .8rem 1.6rem;
border-radius: 999px;
border: 2px solid transparent;
cursor: pointer;
transition: transform .12s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
white-space: nowrap;
}
.yvsl .yvsl-btn:hover { transform: translateY(-1px); }
.yvsl .yvsl-btn:active { transform: translateY(0); }
/* Solid red &mdash; for use on white/light backgrounds */
.yvsl .yvsl-btn-primary { background: var(--red-600); color: #fff; }
.yvsl .yvsl-btn-primary:hover { background: var(--red-700); color: #fff; }
/* Solid white &mdash; for use on red backgrounds */
.yvsl .yvsl-btn-light { background: #fff; color: var(--red-700); }
.yvsl .yvsl-btn-light:hover { background: var(--red-050); color: var(--red-800); }
.yvsl .yvsl-btn-ghost { border-color: currentColor; color: var(--red-700); background: transparent; }
.yvsl .yvsl-btn-ghost:hover { background: var(--red-700); color: #fff; border-color: var(--red-700); }
.yvsl .yvsl-section-dark .yvsl-btn-ghost,
.yvsl .yvsl-hero .yvsl-btn-ghost { color: #fff; }
.yvsl .yvsl-section-dark .yvsl-btn-ghost:hover,
.yvsl .yvsl-hero .yvsl-btn-ghost:hover { background: #fff; color: var(--red-800); border-color: #fff; }
.yvsl .yvsl-btn-sm { font-size: .92rem; padding: .55rem 1.15rem; }
.yvsl .yvsl-btn-block { width: 100%; }
.yvsl .yvsl-badge {
display: inline-block;
font-family: var(--font-display);
font-size: .8rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: .28rem .7rem;
border-radius: 999px;
line-height: 1.4;
}
.yvsl .yvsl-badge-open   { background: var(--ok-bg); color: var(--ok); }
.yvsl .yvsl-badge-closed { background: var(--surface-3); color: var(--muted); }
.yvsl .yvsl-badge-soon   { background: var(--warn-bg); color: var(--warn); }
/* --------------------------------------------------------------------------
5. Hero
-------------------------------------------------------------------------- */
.yvsl .yvsl-hero {
position: relative;
background:
radial-gradient(950px 520px at 12% -5%, rgba(240, 60, 90, .55), transparent 62%),
radial-gradient(800px 600px at 95% 110%, rgba(74, 5, 16, .85), transparent 62%),
linear-gradient(155deg, var(--red-600) 0%, var(--red-800) 55%, var(--red-900) 100%);
color: #f7e2e6;
overflow: hidden;
}
.yvsl .yvsl-hero::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
background-size: 56px 56px;
pointer-events: none;
}
.yvsl .yvsl-hero .yvsl-wrap { position: relative; z-index: 1; padding-block: 56px; }
.yvsl .yvsl-hero-page .yvsl-wrap { padding-block: 36px; }
.yvsl .yvsl-hero h1 { color: #fff; margin-bottom: .35em; }
.yvsl .yvsl-hero h1 .yvsl-hero-title-line {
color: #ffd9df;
display: block;
}
.yvsl .yvsl-hero-lead {
font-size: 1.18rem;
max-width: 60ch;
color: #fadfe4;
}
.yvsl .yvsl-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.yvsl .yvsl-hero-stats {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-top: 32px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,.2);
}
.yvsl .yvsl-hero-stat-num {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 700;
color: #fff;
line-height: 1;
}
.yvsl .yvsl-hero-stat-label {
font-size: .82rem;
letter-spacing: .1em;
text-transform: uppercase;
color: #f0bcc4;
margin-top: .35rem;
}
/* Breadcrumb */
.yvsl .yvsl-crumbs { font-size: .85rem; color: #f0bcc4; margin-bottom: 1rem; letter-spacing: .04em; }
.yvsl .yvsl-crumbs a { color: #fbe0e4; }
.yvsl .yvsl-crumbs a:hover { color: #fff; }
/* --------------------------------------------------------------------------
6. Cards
-------------------------------------------------------------------------- */
.yvsl .yvsl-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
padding: 22px;
transition: transform .15s ease, box-shadow .15s ease;
}
.yvsl .yvsl-card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* An </use></symbol></main>
<h2> used as a card heading, smaller than a section heading. */
.yvsl .yvsl-card-title { font-size: 1.9rem; }
/* Program card */
.yvsl .yvsl-program-card {
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}
.yvsl .yvsl-program-card-top {
padding: 20px 24px;
background: linear-gradient(135deg, var(--red-600), var(--red-800));
color: #fff;
}
.yvsl .yvsl-program-card-alt .yvsl-program-card-top { background: linear-gradient(135deg, var(--red-800), var(--red-950)); }
.yvsl .yvsl-program-card-youth .yvsl-program-card-top { background: linear-gradient(135deg, #3a3034, #1b1418); }
.yvsl .yvsl-program-card-kicker {
font-size: .76rem;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.8);
font-weight: 600;
}
.yvsl .yvsl-program-card-top h3 { color: #fff; margin: .25rem 0 0; font-size: 1.5rem; min-height: 3.3rem; }
.yvsl .yvsl-program-card-body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.yvsl .yvsl-dl { margin: 0 0 20px; }
.yvsl .yvsl-dl div {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 9px 0;
border-bottom: 1px dashed var(--line);
}
.yvsl .yvsl-dl div:last-child { border-bottom: 0; }
.yvsl .yvsl-dl dt {
font-size: .74rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
font-weight: 700;
flex: none;
padding-top: .15rem;
}
.yvsl .yvsl-dl dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); font-size: .95rem; }
.yvsl .yvsl-dl .yvsl-price { font-family: var(--font-display); font-size: 1.5rem; color: var(--red-600); }
.yvsl .yvsl-program-card-foot { margin-top: auto; }
/* Quick link tiles */
.yvsl .yvsl-tile {
display: flex;
flex-direction: column;
gap: 6px;
padding: 20px;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
color: var(--body);
}
.yvsl .yvsl-tile:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--red-600);
color: var(--body);
}
.yvsl .yvsl-tile-icon {
width: 42px; height: 42px;
display: grid; place-items: center;
border-radius: 12px;
background: var(--red-050);
color: var(--red-600);
margin-bottom: 6px;
}
.yvsl .yvsl-tile-icon svg { width: 22px; height: 22px; }
.yvsl .yvsl-tile h3 { margin: 0; font-size: 1.15rem; }
.yvsl .yvsl-tile p { font-size: .93rem; color: var(--muted); margin: 0; }
/* Champions */
.yvsl .yvsl-champ-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.yvsl .yvsl-champ {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: var(--radius-sm);
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
}
.yvsl .yvsl-champ-trophy { color: #ffd9df; flex: none; }
.yvsl .yvsl-champ-trophy svg { width: 22px; height: 22px; }
.yvsl .yvsl-champ-div {
font-size: .74rem;
letter-spacing: .1em;
text-transform: uppercase;
color: #e4b0b9;
}
.yvsl .yvsl-champ-team { font-family: var(--font-display); font-size: 1.15rem; color: #fff; line-height: 1.2; }
/* Sponsors */
.yvsl .yvsl-sponsor-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.yvsl .yvsl-sponsor {
flex: 1 1 240px;
max-width: 320px;
text-align: center;
padding: 28px 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
}
.yvsl .yvsl-sponsor-name { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); }
.yvsl .yvsl-sponsor-role { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* --------------------------------------------------------------------------
7. Tables
-------------------------------------------------------------------------- */
.yvsl .yvsl-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.yvsl table.yvsl-data {
width: 100%;
min-width: 560px;
border-collapse: collapse;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
font-size: .95rem;
}
.yvsl table.yvsl-data th {
background: var(--red-800);
color: #fff;
font-family: var(--font-display);
font-size: .88rem;
letter-spacing: .1em;
text-transform: uppercase;
text-align: left;
padding: 12px 16px;
font-weight: 700;
}
.yvsl table.yvsl-data td { padding: 13px 16px; border-top: 1px solid var(--line); vertical-align: top; }
.yvsl table.yvsl-data tbody tr:nth-child(even) { background: var(--surface-2); }
/* --------------------------------------------------------------------------
8. Misc components
-------------------------------------------------------------------------- */
.yvsl .yvsl-notice {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 18px 20px;
border-radius: var(--radius);
background: var(--red-050);
border: 1px solid var(--red-100);
border-left: 5px solid var(--red-600);
color: #7a2231;
}
.yvsl .yvsl-notice svg {
width: 24px;
height: 24px;
flex: none;
margin-top: 3px;
stroke: currentColor;
color: var(--red-600);
}
.yvsl .yvsl-notice strong { color: var(--red-800); }
.yvsl .yvsl-notice p { margin: 0; font-size: .96rem; }
.yvsl .yvsl-notice-standalone { margin-top: 28px; }
.yvsl .yvsl-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.yvsl .yvsl-steps li {
counter-increment: step;
display: flex;
gap: 18px;
align-items: flex-start;
}
.yvsl .yvsl-steps li::before {
content: counter(step);
flex: none;
width: 40px; height: 40px;
display: grid; place-items: center;
border-radius: 50%;
background: var(--red-600);
color: #fff;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
}
.yvsl .yvsl-steps h3 { margin-bottom: .15rem; font-size: 1.1rem; }
.yvsl .yvsl-steps p { font-size: .95rem; margin: 0; color: var(--muted); }
.yvsl .yvsl-faq { border-top: 1px solid var(--line); }
.yvsl .yvsl-faq details {
border-bottom: 1px solid var(--line);
padding: 4px 0;
}
.yvsl .yvsl-faq summary {
cursor: pointer;
list-style: none;
padding: 18px 40px 18px 0;
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--ink);
text-transform: uppercase;
position: relative;
}
.yvsl .yvsl-faq summary::-webkit-details-marker { display: none; }
.yvsl .yvsl-faq summary::after {
content: "+";
position: absolute;
right: 8px; top: 50%;
transform: translateY(-50%);
font-size: 1.6rem;
color: var(--red-600);
line-height: 1;
}
.yvsl .yvsl-faq details[open] summary::after { content: "\2013"; }
.yvsl .yvsl-faq details p { padding: 0 0 18px; font-size: .97rem; color: var(--body); }
.yvsl .yvsl-venue-map {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
min-height: 240px;
background: repeating-linear-gradient(90deg, #2e8f57 0 42px, #34a061 42px 84px);
position: relative;
}
.yvsl .yvsl-venue-map .yvsl-pitch {
position: absolute;
inset: 18px;
border: 3px solid rgba(255,255,255,.85);
border-radius: 4px;
}
.yvsl .yvsl-venue-map .yvsl-pitch::before {
content: "";
position: absolute;
left: 50%; top: 0; bottom: 0;
width: 3px;
background: rgba(255,255,255,.85);
transform: translateX(-50%);
}
.yvsl .yvsl-venue-map .yvsl-pitch::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 74px; height: 74px;
border: 3px solid rgba(255,255,255,.85);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.yvsl .yvsl-contact-form { display: grid; gap: 16px; }
.yvsl .yvsl-field { display: grid; gap: 6px; }
.yvsl .yvsl-field label {
font-family: var(--font-display);
font-size: .92rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink);
font-weight: 700;
}
.yvsl .yvsl-field input,
.yvsl .yvsl-field select,
.yvsl .yvsl-field textarea {
font-family: inherit;
font-size: 1rem;
color: var(--ink);
padding: .7rem .85rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
width: 100%;
}
.yvsl .yvsl-field input:focus,
.yvsl .yvsl-field select:focus,
.yvsl .yvsl-field textarea:focus {
border-color: var(--red-600);
outline: none;
box-shadow: 0 0 0 3px rgba(200, 16, 46, .18);
}
.yvsl .yvsl-field textarea { min-height: 150px; resize: vertical; }
.yvsl .yvsl-field-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.yvsl .yvsl-contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.yvsl .yvsl-contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.yvsl .yvsl-contact-list svg { width: 22px; height: 22px; flex: none; color: var(--red-600); margin-top: 3px; }
.yvsl .yvsl-contact-list .yvsl-label {
font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--muted); font-weight: 700;
}
.yvsl .yvsl-contact-list .yvsl-value { font-weight: 600; color: var(--ink); }
.yvsl .yvsl-value-sub { font-weight: 400; color: var(--muted); }
.yvsl .yvsl-cta-band {
background: var(--red-050);
border-top: 1px solid var(--red-100);
border-bottom: 1px solid var(--red-100);
text-align: center;
}
.yvsl .yvsl-cta-band h2 { color: var(--red-800); }
.yvsl .yvsl-cta-band p { color: #7a5058; max-width: 56ch; margin-inline: auto; }
.yvsl .yvsl-cta-band .yvsl-btn { margin-top: 20px; }
/* --------------------------------------------------------------------------
9. Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1080px) {
.yvsl .yvsl-hero .yvsl-wrap { padding-block: 40px; }
.yvsl .yvsl-hero-stats { gap: 28px; }
.yvsl .yvsl-field-row { grid-template-columns: 1fr; }
.yvsl .yvsl-section { padding: 32px 0; }
}
@media (max-width: 560px) {
.yvsl { font-size: 16px; }
.yvsl .yvsl-hero-actions .yvsl-btn { width: 100%; }
}
@media print {
.yvsl .yvsl-cta-band { display: none; }
.yvsl { color: #000; }
}
@media (prefers-reduced-motion: reduce) {
.yvsl,
.yvsl * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
</h2>