/* ============================================================================ SABINE COUNTY YOUTH FOUNDATION — Design Foundation Tokens: color, type, spacing, radii, shadows, motion. Prefix: --scyf- on raw values. Unprefixed = semantic aliases (what components actually reference — never point a component at a raw --scyf- value). Built cold, from the official SCYF Brand Guide (Nov 2025), the logo vector file, and the Foundation's own 2026 show photography. Not built by looking at any existing SCYF web build. See README.md for the reasoning. ============================================================================ */ /* --------------------------------------------------------------------------- WEBFONTS Marble — self-hosted, local (assets/fonts/marble/WOFF/). Only the weights this system actually uses as distinct ROLES get declared — not all nine. Lato — not present in assets/fonts/ yet. Self-host it the same way Marble is self-hosted (source Google Fonts OFL files); Google Fonts CDN link below is a PREVIEW-ONLY convenience so these pages render on open. Swap before production build. --------------------------------------------------------------------------- */ @font-face { font-family: "Marble"; src: url("../assets/fonts/marble/WOFF/Marble ExtraBold.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Marble"; src: url("../assets/fonts/marble/WOFF/Marble Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Marble"; src: url("../assets/fonts/marble/WOFF/Marble SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Marble"; src: url("../assets/fonts/marble/WOFF/Marble Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Marble"; src: url("../assets/fonts/marble/WOFF/Marble Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; } /* Lato — Google Fonts CDN for preview only. See note above. */ @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap"); :root { /* ========================================================================== COLOR — five official brand roles, each expanded into a real tint/shade ladder. Two hexes are load-bearing anchors lifted VERBATIM from the client's own official art (not invented, not approximated): - pine-900 #082F0C = the shield fill in the Brand Guide + logo file - pine-700 #115e18 = the thin rule lines under "ESTD"/"1982" and under the wordmark in the logo SVG itself. The brand's own logo already contains a second, brighter green — this system just gives that relationship a name and fills in the steps around it. ========================================================================== */ /* ---------- PINE (primary hue — shield, dominant brand green) ---------- */ --scyf-pine-950: #061e08; /* near-black green — deep shadow, hero overlay floor */ --scyf-pine-900: #082f0c; /* OFFICIAL anchor — Brand Guide primary */ --scyf-pine-800: #103c13; --scyf-pine-700: #115e18; /* LOGO anchor — the rule-line green, verbatim */ --scyf-pine-600: #2b692f; --scyf-pine-500: #448347; /* true pine-tree sage — matches the piney-woods photography */ --scyf-pine-400: #65a467; --scyf-pine-300: #9dbe9e; --scyf-pine-200: #cbdccc; --scyf-pine-100: #e9f1e9; /* palest wash — badges, hover fills on light */ /* ---------- GOLD (accent hue — heritage/ag trim, used SPARINGLY per guide) --- */ --scyf-gold-900: #523d14; /* deep bronze — AA text on white: 10.3:1 */ --scyf-gold-800: #6d521d; /* AA text on white: 7.3:1 */ --scyf-gold-700: #866727; /* AA-large text on white: ~5.4:1 */ --scyf-gold-600: #ca9a38; /* OFFICIAL anchor — decorative/large only, 2.6:1 on white, NOT body text */ --scyf-gold-500: #d0b071; --scyf-gold-400: #dcc9a3; --scyf-gold-300: #ebe1cb; --scyf-gold-200: #f6f0e5; /* palest gold wash */ /* ---------- IRON (structural neutral — the horseshoe/gear metal) ---------- */ --scyf-iron-900: #242424; --scyf-iron-700: #3d3d3d; --scyf-iron-500: #4d4d4d; /* OFFICIAL anchor — Brand Guide secondary */ --scyf-iron-400: #737373; --scyf-iron-300: #9e9e9e; --scyf-iron-200: #c7c7c7; --scyf-iron-100: #e6e6e6; /* ---------- INK (wordmark / heading black — a DIFFERENT neutral than iron) - */ --scyf-ink-900: #1a1a1a; /* OFFICIAL anchor — Brand Guide near-black */ --scyf-ink-700: #3a3530; /* softer charcoal, warmed slightly toward paper family */ /* ---------- PAPER (warm neutral family — dirt, wood, hand-me-down paper) --- Deliberately NOT the same axis as iron. Iron is cool/true-neutral because it comes from painted steel. Paper is warm because it comes from the arena's khaki dirt and the weathered wood in the show barns (see the staff.webp and fb-2026 photo set). This is why "paper" and "white" can actually be told apart — they're not two points on one grey ramp, they're a warm hue at very high lightness versus true zero-saturation white. Measured in CIE L* (perceptual lightness, not raw % which flatters small gaps): white→paper-100 ΔL* = 4.75. The official #F5F5F5 next to pure white is only ΔL* 3.46 — a gap "on paper" that reads as sameness on screen. That's the exact defect this system corrects. */ --scyf-white: #ffffff; /* cards, elevated surfaces — L*100 */ --scyf-paper-100: #f4f1ec; /* page background — L*95.25 (ΔL* 4.75 from white) */ --scyf-paper-200: #eae5dc; /* sunken wells, input backgrounds — L*91.10 */ --scyf-paper-300: #dbcfbd; /* sand accent band — echoes arena dirt, used sparingly as a full-bleed section tone (e.g. behind the numbered show-day steps) — L*83.63 */ /* ========================================================================== SEMANTIC ALIASES — components reference these, never raw --scyf- values ========================================================================== */ --bg: var(--scyf-paper-100); --bg-card: var(--scyf-white); --bg-sunken: var(--scyf-paper-200); --bg-sand: var(--scyf-paper-300); --surface-pine: var(--scyf-pine-900); /* dark sections */ --surface-pine-deep: var(--scyf-pine-950); /* hero scrim floor */ --fg: var(--scyf-ink-900); /* primary text on light */ --fg-muted: var(--scyf-iron-500); /* captions, meta, secondary body */ --fg-ondark: var(--scyf-paper-100); /* body text on pine */ --fg-ondark-muted: var(--scyf-pine-200); /* muted text on pine */ --accent: var(--scyf-gold-900); /* AA-safe gold for TEXT/links (10.3:1) */ --accent-deco: var(--scyf-gold-600); /* OFFICIAL gold — large/decorative/icons only */ --accent-ondark: var(--scyf-gold-500); /* gold text on pine, 7.1:1 */ --border: var(--scyf-iron-200); --border-strong: var(--scyf-iron-300); --border-ondark: rgba(244, 241, 236, 0.18); --rule: var(--scyf-pine-700); /* the signature hairline-rule color, lifted from the logo itself */ /* ========================================================================== TYPE — Marble (display/heading) + Lato (body/label). Two families, per the Brand Guide — NOT three, and NOT one face wearing three name tags. Roles are told apart by WEIGHT, CASE, SIZE, and STYLE, which is what the guide actually gives us to work with. ========================================================================== */ --font-display: "Marble", "Arial Black", "Helvetica Neue", sans-serif; /* ExtraBold 800 — hero, stat numerals */ --font-heading: "Marble", "Arial Black", "Helvetica Neue", sans-serif; /* Bold 700 — H1–H3 */ --font-subhead: "Marble", "Arial Black", "Helvetica Neue", sans-serif; /* SemiBold 600 — H4, card titles: a real lighter STEP of the same face, not a duplicate role */ --font-accent: "Marble", "Helvetica Neue", sans-serif; /* Regular Italic 400 — the ONE reserved italic accent role: taglines, the Fence Line aside */ --font-body: "Lato", "Helvetica Neue", Arial, sans-serif; /* Regular/Light 400/300 — paragraphs */ --font-label: "Lato", "Helvetica Neue", Arial, sans-serif; /* Bold 700, uppercase, tracked — eyebrows, nav, buttons, form labels */ --fw-display: 800; --fw-heading: 700; --fw-subhead: 600; --fw-body: 400; --fw-body-light: 300; --fw-label: 700; --fw-black: 900; /* Lato Black — stat-band support numerals only */ /* ---------- Type scale — named steps, nobody invents a bespoke clamp ---- */ --text--2: 0.75rem; /* micro / fine print */ --text--1: 0.875rem; /* caption */ --text-0: 1.0625rem; /* body — generous base; this audience reads outdoors, on phones, often over 40 */ --text-1: 1.25rem; /* body-lead */ --text-2: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem); /* H4 / card title */ --text-3: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem); /* H3 */ --text-4: clamp(2.1rem, 1.7rem + 1.8vw, 2.75rem); /* H2 */ --text-5: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem); /* H1 */ --text-6: clamp(2.75rem, 1.9rem + 3.6vw, 4.25rem); /* Display / hero headline */ --text-7: clamp(3.25rem, 2rem + 5.5vw, 5.75rem); /* Stat numerals only */ --leading-tight: 1.05; /* display, stat numerals */ --leading-snug: 1.2; /* headings */ --leading-normal: 1.5; /* labels, short lines */ --leading-relaxed:1.65; /* body paragraphs */ --tracking-tight: -0.01em; /* display at large sizes */ --tracking-normal: 0; --tracking-label: 0.08em; /* Lato Bold caps — eyebrows, buttons, nav */ --maxw-prose: 62ch; --maxw-content: 1280px; /* ========================================================================== SPACING — 10-step ladder on an 8px base for component rhythm (card gaps, icon spacing, stacked text), PLUS two fluid tokens for section-outer padding so the macro rhythm scales smoothly instead of forcing a one-off clamp() every time someone builds a new section. This site has 9 homepage sections plus 11 interior pages across 3 nav branches — a fixed-only ladder starves the big moves, a fluid-only system loses precision on small ones. Use both, for their own jobs. ========================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-section: clamp(4rem, 3rem + 5vw, 7rem); /* outer vertical section padding */ --space-section-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem); /* tighter sections: steps, stat band */ /* ========================================================================== RADII — modest, hard-working, never soft-blob. The brand's own emblem is a horseshoe and a gear: mechanical, hand-tooled forms, not rounded pills. Reserve the pill for actual pills (badges, tags). ========================================================================== */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* ========================================================================== SHADOWS — soft, warm-tinted (ink, not blue-black), modest depth. This is a steadfast community foundation, not a SaaS product; nothing should float like glass. ========================================================================== */ --shadow-sm: 0 1px 2px rgba(26,26,26,0.06), 0 1px 3px rgba(26,26,26,0.05); --shadow-md: 0 4px 12px rgba(26,26,26,0.09), 0 2px 4px rgba(26,26,26,0.06); --shadow-lg: 0 16px 32px rgba(8,47,12,0.14), 0 4px 10px rgba(8,47,12,0.08); --shadow-focus: 0 0 0 3px rgba(202,154,56,0.45); /* gold focus ring, official gold-600 at 45% */ /* ========================================================================== MOTION — settle, don't bounce ========================================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; } /* ============================================================================ SEMANTIC ELEMENT DEFAULTS — reference styles, mirrored by the preview pages ============================================================================ */ .scyf-eyebrow { font-family: var(--font-label); font-weight: var(--fw-label); font-size: var(--text--1); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent); } .scyf-display { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--text-6); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg); text-transform: uppercase; } .scyf-h1 { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--text-5); line-height: var(--leading-snug); color: var(--fg); text-transform: uppercase; } .scyf-h2 { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--text-4); line-height: var(--leading-snug); color: var(--fg); text-transform: uppercase; } .scyf-h3 { font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--text-3); line-height: var(--leading-snug); color: var(--fg); text-transform: uppercase; } .scyf-h4 { font-family: var(--font-subhead); font-weight: var(--fw-subhead); font-size: var(--text-2); line-height: var(--leading-snug); color: var(--fg); } .scyf-body { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--text-0); line-height: var(--leading-relaxed); color: var(--fg); } .scyf-lead { font-family: var(--font-body); font-weight: var(--fw-body-light); font-size: var(--text-1); line-height: var(--leading-relaxed); color: var(--fg); } .scyf-accent { font-family: var(--font-accent); font-style: italic; font-weight: var(--fw-body); font-size: var(--text-2); line-height: var(--leading-normal); color: var(--accent); } .scyf-stat { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--text-7); line-height: var(--leading-tight); color: var(--accent-ondark); } .scyf-caption { font-family: var(--font-label); font-weight: var(--fw-label); font-size: var(--text--2); letter-spacing: var(--tracking-normal); text-transform: none; color: var(--fg-muted); } /* Hairline rule — the signature device, lifted directly from the logo file (the thin green rules that flank ESTD/1982 and underline the wordmark). */ .scyf-rule { border: none; border-top: 1px solid var(--rule); margin: 0; } .scyf-rule--double { height: 4px; border: none; background: linear-gradient(var(--rule), var(--rule)) top / 100% 1px no-repeat, linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat; } /* Fence Line — the ONE bridge/connective pattern. Always nested INSIDE a parent section as a bounded element. Never its own standalone section. */ .scyf-fence-line { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: var(--space-6); margin-block: var(--space-8); }