/* ============================================================================ Skateboarding Lessons - Design System (skateboarding-design-system.css) Single source of truth for the redesign. Prefix: sk- | Scope: body.sk-scope Theme: light-primary with deliberate ink (near-black) feature sections. Applies identically to BOTH installs (popularfx main + hello-elementor /go/). Content is never touched by this file - it only styles existing markup. Version 1.0 | 2026-07-13 ============================================================================ */ /* ---------------------------------------------------------------------------- 1. TOKENS Assumes html { font-size: 16px } (verified on both installs). rem is safe. ---------------------------------------------------------------------------- */ :root { /* -- Brand -- single locked accent = Flame. Volt is a rationed highlight. */ --sk-flame: #FF5C1A; /* primary accent (fills, on-dark text/marks) */ --sk-flame-ink: #C8410A; /* accent text/links on LIGHT bg (AA on white) */ --sk-flame-deep: #A6350A; /* accent hover on light */ --sk-volt: #FFD400; /* highlight, rationed: stripes/marks only, ink text */ /* -- Neutrals: "griptape -> concrete -> paper" (cool) -- */ --sk-ink: #16181D; /* griptape near-black: text on light, dark sections */ --sk-asphalt: #23262E; /* elevated dark surface */ --sk-slate: #3B404B; /* body/secondary text on light */ --sk-steel: #5B6270; /* muted text (>=16px only) */ --sk-concrete: #8A909C; /* decorative / large-text only, NOT body */ --sk-fog: #C4C9D2; /* hairlines on dark, disabled */ --sk-haze: #E4E7EC; /* borders/dividers on light */ --sk-paper: #F4F5F7; /* page background (light) */ --sk-white: #FFFFFF; /* card surface (light) */ /* -- Semantic -- */ --sk-success: #1F9D57; --sk-warning: #E8A400; --sk-error: #D33A2C; /* -- Surfaces / text roles (light theme) -- */ --sk-bg: var(--sk-paper); --sk-surface: var(--sk-white); --sk-text: var(--sk-ink); --sk-text-muted: var(--sk-slate); --sk-border: var(--sk-haze); --sk-link: var(--sk-flame-ink); --sk-link-hover: var(--sk-flame-deep); /* -- Type -- Archivo (single family: body 400/500/600, display 700/800/900) -- */ --sk-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sk-font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* stats only */ /* Fluid type scale (~1.2-1.25). clamp(min, vw, max) in rem. */ --sk-fs-xs: 0.8125rem; /* 13px micro-labels */ --sk-fs-sm: 0.875rem; /* 14px small */ --sk-fs-base: 1rem; /* 16px body */ --sk-fs-md: 1.125rem; /* 18px lead body */ --sk-fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20-24 h4 */ --sk-fs-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); /* 24-32 h3 */ --sk-fs-2xl: clamp(2rem, 1.5rem + 2vw, 2.75rem); /* 32-44 h2 */ --sk-fs-3xl: clamp(2.5rem, 1.8rem + 3vw, 3.75rem); /* 40-60 h1 */ --sk-fs-hero: clamp(2.75rem, 1.6rem + 5.2vw, 5rem); /* 44-80 hero poster */ --sk-lh-tight: 1.05; /* display */ --sk-lh-snug: 1.2; /* headings */ --sk-lh-body: 1.6; /* body */ --sk-tracking-tight: -0.02em; /* display */ --sk-tracking-label: 0.14em; /* uppercase labels */ /* -- Spacing (4px base) -- */ --sk-space-1: 0.25rem; --sk-space-2: 0.5rem; --sk-space-3: 0.75rem; --sk-space-4: 1rem; --sk-space-5: 1.25rem; --sk-space-6: 1.5rem; --sk-space-8: 2rem; --sk-space-10: 2.5rem; --sk-space-12: 3rem; --sk-space-16: 4rem; --sk-space-20: 5rem; --sk-space-24: 6rem; --sk-section-y: clamp(3rem, 2rem + 4vw, 6rem); /* section vertical padding */ /* -- Layout -- */ --sk-container: 1200px; /* default max width */ --sk-container-wide: 1360px; --sk-container-prose: 44rem; /* ~68ch readable measure */ --sk-gutter: clamp(1rem, 0.5rem + 2vw, 2rem); /* -- Radius (shape lock rule): buttons 10px, cards 14px, inputs 10px, pills/badges full. -- */ --sk-radius-btn: 10px; --sk-radius-card: 14px; --sk-radius-input: 10px; --sk-radius-pill: 999px; /* -- Shadows: tinted soft + signature hard "sticker" offset -- */ --sk-shadow-sm: 0 1px 2px rgba(22,24,29,.06), 0 1px 3px rgba(22,24,29,.10); --sk-shadow-md: 0 4px 12px rgba(22,24,29,.10), 0 2px 4px rgba(22,24,29,.06); --sk-shadow-lg: 0 18px 40px rgba(22,24,29,.16), 0 6px 12px rgba(22,24,29,.08); --sk-shadow-hard: 4px 4px 0 var(--sk-ink); /* sticker motif */ --sk-shadow-hard-flame: 4px 4px 0 var(--sk-flame); /* -- Motion (MOTION_INTENSITY 3): CSS transitions only -- */ --sk-ease: cubic-bezier(0.16, 1, 0.3, 1); --sk-dur: 180ms; --sk-dur-slow: 240ms; --sk-focus-ring: 0 0 0 3px rgba(255,92,26,.45); } /* ---------------------------------------------------------------------------- 2. BASE (scoped to .sk-scope so it never fights builder CSS globally) ---------------------------------------------------------------------------- */ body.sk-scope { margin: 0; background: var(--sk-bg); color: var(--sk-text); font-family: var(--sk-font); font-size: var(--sk-fs-base); line-height: var(--sk-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .sk-scope *, .sk-scope *::before, .sk-scope *::after { box-sizing: border-box; } .sk-scope h1, .sk-scope h2, .sk-scope h3, .sk-scope h4 { font-family: var(--sk-font); color: var(--sk-text); line-height: var(--sk-lh-snug); letter-spacing: var(--sk-tracking-tight); margin: 0 0 var(--sk-space-4); text-wrap: balance; } .sk-scope h1 { font-size: var(--sk-fs-3xl); font-weight: 800; line-height: var(--sk-lh-tight); } .sk-scope h2 { font-size: var(--sk-fs-2xl); font-weight: 800; } .sk-scope h3 { font-size: var(--sk-fs-xl); font-weight: 700; } .sk-scope h4 { font-size: var(--sk-fs-lg); font-weight: 700; letter-spacing: 0; } .sk-scope p { margin: 0 0 var(--sk-space-4); max-width: var(--sk-container-prose); } .sk-scope p, .sk-scope li { color: var(--sk-text-muted); } .sk-scope strong { color: var(--sk-text); font-weight: 700; } .sk-scope a { color: var(--sk-link); text-decoration: none; transition: color var(--sk-dur) var(--sk-ease); } .sk-scope a:hover { color: var(--sk-link-hover); text-decoration: underline; text-underline-offset: 3px; } .sk-scope ::selection { background: var(--sk-flame); color: var(--sk-ink); } .sk-scope img { max-width: 100%; height: auto; } /* Global visible focus (a11y, mandatory) */ .sk-scope :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--sk-flame); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------------------- 3. LAYOUT: container, section, grid ---------------------------------------------------------------------------- */ .sk-container { width: 100%; max-width: var(--sk-container); margin-inline: auto; padding-inline: var(--sk-gutter); } .sk-container--wide { max-width: var(--sk-container-wide); } .sk-container--prose { max-width: var(--sk-container-prose); } .sk-section { padding-block: var(--sk-section-y); } .sk-section--tight { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); } /* Section themes (deliberate, consistent - used for hero / CTA / footer, not random) */ .sk-section--ink { background: var(--sk-ink); color: var(--sk-white); } .sk-section--paper { background: var(--sk-paper); } .sk-section--white { background: var(--sk-white); } .sk-section--ink h1, .sk-section--ink h2, .sk-section--ink h3, .sk-section--ink h4 { color: var(--sk-white); } .sk-section--ink p, .sk-section--ink li { color: var(--sk-fog); } .sk-section--ink a { color: var(--sk-flame); } .sk-section--ink a:hover { color: #ff7a45; } .sk-grid { display: grid; gap: var(--sk-space-6); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .sk-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .sk-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .sk-grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* ---------------------------------------------------------------------------- 4. TYPOGRAPHY HELPERS ---------------------------------------------------------------------------- */ .sk-hero-title { font-size: var(--sk-fs-hero); font-weight: 900; line-height: var(--sk-lh-tight); letter-spacing: var(--sk-tracking-tight); text-transform: none; } .sk-lead { font-size: var(--sk-fs-md); color: var(--sk-text-muted); max-width: 40ch; } /* Eyebrow label - RATIONED: max 1 per 3 sections. */ .sk-eyebrow { display: inline-block; font-size: var(--sk-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--sk-tracking-label); color: var(--sk-flame-ink); margin-bottom: var(--sk-space-3); } .sk-section--ink .sk-eyebrow { color: var(--sk-flame); } /* Griptape stripe: the one place Volt is allowed, as a short underline mark. */ .sk-mark { position: relative; } .sk-mark::after { content: ""; display: block; width: 2.5rem; height: 4px; margin-top: var(--sk-space-3); background: var(--sk-flame); border-radius: 2px; } .sk-mark--volt::after { background: var(--sk-volt); } .sk-stat { font-family: var(--sk-font-mono); font-weight: 700; font-size: var(--sk-fs-2xl); color: var(--sk-flame-ink); } .sk-section--ink .sk-stat { color: var(--sk-flame); } /* ---------------------------------------------------------------------------- 5. BUTTONS Sizes md/lg are >=44px tall (tap targets). Labels: <=3 words, one line. ---------------------------------------------------------------------------- */ .sk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sk-space-2); font-family: var(--sk-font); font-weight: 700; font-size: var(--sk-fs-base); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; padding: 0.875rem 1.5rem; min-height: 48px; border: 2px solid transparent; border-radius: var(--sk-radius-btn); transition: transform var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease), background-color var(--sk-dur) var(--sk-ease), color var(--sk-dur) var(--sk-ease); } .sk-btn:hover { text-decoration: none; } .sk-btn:active { transform: translateY(0); box-shadow: none; } /* tactile push */ /* Primary: flame fill + INK text (AA 6.5:1) + sticker shadow on hover */ .sk-btn--primary { background: var(--sk-flame); color: var(--sk-ink); border-color: var(--sk-ink); } .sk-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--sk-shadow-hard); color: var(--sk-ink); } /* Secondary: ink fill + white text */ .sk-btn--secondary { background: var(--sk-ink); color: var(--sk-white); border-color: var(--sk-ink); } .sk-btn--secondary:hover { transform: translateY(-2px); box-shadow: var(--sk-shadow-hard-flame); color: var(--sk-white); } /* Outline: 2px ink, transparent (on light) */ .sk-btn--outline { background: transparent; color: var(--sk-ink); border-color: var(--sk-ink); } .sk-btn--outline:hover { background: var(--sk-ink); color: var(--sk-white); } .sk-section--ink .sk-btn--outline { color: var(--sk-white); border-color: var(--sk-white); } .sk-section--ink .sk-btn--outline:hover { background: var(--sk-white); color: var(--sk-ink); } /* Ghost */ .sk-btn--ghost { background: transparent; color: var(--sk-flame-ink); border-color: transparent; padding-inline: var(--sk-space-3); } .sk-btn--ghost:hover { color: var(--sk-flame-deep); text-decoration: underline; } /* Sizes */ .sk-btn--sm { min-height: 40px; padding: 0.625rem 1rem; font-size: var(--sk-fs-sm); } .sk-btn--lg { min-height: 56px; padding: 1.05rem 2rem; font-size: var(--sk-fs-md); } .sk-btn--block { display: flex; width: 100%; } .sk-btn:disabled, .sk-btn[aria-disabled="true"] { background: var(--sk-haze); color: var(--sk-concrete); border-color: var(--sk-haze); cursor: not-allowed; transform: none; box-shadow: none; } /* ---------------------------------------------------------------------------- 6. CARDS ---------------------------------------------------------------------------- */ .sk-card { background: var(--sk-surface); color: var(--sk-text); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-card); padding: var(--sk-space-6); box-shadow: var(--sk-shadow-sm); transition: transform var(--sk-dur-slow) var(--sk-ease), box-shadow var(--sk-dur-slow) var(--sk-ease), border-color var(--sk-dur-slow) var(--sk-ease); } .sk-card :where(h3,h4) { margin-top: 0; } .sk-card--hover:hover { transform: translateY(-4px); box-shadow: var(--sk-shadow-lg); } /* Feature card: flame top accent bar */ .sk-card--feature { border-top: 4px solid var(--sk-flame); } /* Outline/sticker card (griptape look) */ .sk-card--sticker { border: 2px solid var(--sk-ink); box-shadow: var(--sk-shadow-hard); } .sk-card--sticker.sk-card--hover:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sk-ink); } /* Dark card (inside ink sections) */ .sk-card--dark { background: var(--sk-asphalt); border-color: #333844; color: var(--sk-white); box-shadow: none; } .sk-card--dark :where(p,li) { color: var(--sk-fog); } /* City / location / state card -> replaces the raw blue link lists */ .sk-city-card { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-3); background: var(--sk-surface); border: 1px solid var(--sk-border); border-radius: var(--sk-radius-card); padding: var(--sk-space-4) var(--sk-space-5); font-weight: 600; color: var(--sk-text); text-decoration: none; transition: transform var(--sk-dur) var(--sk-ease), border-color var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease); } .sk-city-card:hover { transform: translateY(-2px); border-color: var(--sk-flame); box-shadow: var(--sk-shadow-md); color: var(--sk-text); text-decoration: none; } .sk-city-card::after { content: "\2192"; color: var(--sk-flame-ink); font-weight: 800; transition: transform var(--sk-dur) var(--sk-ease); } .sk-city-card:hover::after { transform: translateX(3px); } /* ---------------------------------------------------------------------------- 7. BADGES / PILLS ---------------------------------------------------------------------------- */ .sk-badge { display: inline-flex; align-items: center; gap: var(--sk-space-2); font-size: var(--sk-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 0.35rem 0.7rem; border-radius: var(--sk-radius-pill); background: var(--sk-haze); color: var(--sk-ink); } .sk-badge--flame { background: var(--sk-flame); color: var(--sk-ink); } .sk-badge--volt { background: var(--sk-volt); color: var(--sk-ink); } .sk-badge--ink { background: var(--sk-ink); color: var(--sk-white); } /* ---------------------------------------------------------------------------- 8. FORMS (styles existing markup by class/attribute; never renames fields) Wrap the AWeber form in .sk-form. 16px inputs prevent iOS zoom. ---------------------------------------------------------------------------- */ .sk-form { max-width: 34rem; } .sk-form label { display: block; font-weight: 600; font-size: var(--sk-fs-sm); color: var(--sk-text); margin-bottom: var(--sk-space-2); } .sk-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) { width: 100%; font-family: var(--sk-font); font-size: 16px; color: var(--sk-text); background: var(--sk-white); border: 1px solid var(--sk-steel); border-radius: var(--sk-radius-input); padding: 0.75rem 0.9rem; min-height: 48px; margin-bottom: var(--sk-space-4); transition: border-color var(--sk-dur) var(--sk-ease), box-shadow var(--sk-dur) var(--sk-ease); } .sk-form :where(input, select, textarea)::placeholder { color: var(--sk-steel); } /* AA on white */ .sk-form :where(input, select, textarea):focus { outline: none; border-color: var(--sk-flame); box-shadow: var(--sk-focus-ring); } .sk-form .sk-help { font-size: var(--sk-fs-sm); color: var(--sk-steel); margin-top: -0.5rem; margin-bottom: var(--sk-space-4); } .sk-form .sk-error { font-size: var(--sk-fs-sm); color: var(--sk-error); margin-top: -0.5rem; margin-bottom: var(--sk-space-4); } .sk-form :where(input, select, textarea)[aria-invalid="true"] { border-color: var(--sk-error); } /* Form on ink sections */ .sk-section--ink .sk-form label { color: var(--sk-white); } .sk-section--ink .sk-form :where(input, select, textarea) { background: var(--sk-white); border-color: transparent; } /* ---------------------------------------------------------------------------- 9. HEADER / NAV (one unified header for both installs) ---------------------------------------------------------------------------- */ .sk-header { position: sticky; top: 0; z-index: 100; background: var(--sk-white); border-bottom: 1px solid var(--sk-border); } .sk-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-space-6); height: 72px; } /* nav height cap */ .sk-header__logo img { display: block; height: 36px; width: auto; } .sk-nav { display: flex; align-items: center; gap: var(--sk-space-6); } .sk-nav a { color: var(--sk-ink); font-weight: 600; font-size: var(--sk-fs-sm); text-decoration: none; } .sk-nav a:hover, .sk-nav a[aria-current="page"] { color: var(--sk-flame-ink); text-decoration: none; } .sk-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sk-flame); } .sk-nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 2px solid var(--sk-ink); border-radius: var(--sk-radius-btn); cursor: pointer; } @media (max-width: 860px) { .sk-nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--sk-white); border-bottom: 1px solid var(--sk-border); padding: var(--sk-space-2) var(--sk-gutter) var(--sk-space-6); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--sk-dur) var(--sk-ease), transform var(--sk-dur) var(--sk-ease), visibility var(--sk-dur); } .sk-nav[data-open="true"] { transform: translateY(0); opacity: 1; visibility: visible; } .sk-nav a { padding: var(--sk-space-4) 0; min-height: 44px; border-bottom: 1px solid var(--sk-border); font-size: var(--sk-fs-md); } .sk-nav-toggle { display: inline-flex; } } /* ---------------------------------------------------------------------------- 10. FOOTER (replaces "Powered by WordPress" and the /go/ CSS-leak footer) ---------------------------------------------------------------------------- */ .sk-footer { background: var(--sk-ink); color: var(--sk-fog); padding-block: var(--sk-space-16) var(--sk-space-8); } .sk-footer a { color: var(--sk-fog); text-decoration: none; } .sk-footer a:hover { color: var(--sk-flame); } .sk-footer__grid { display: grid; gap: var(--sk-space-8); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .sk-footer__title { color: var(--sk-white); font-size: var(--sk-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: var(--sk-tracking-label); margin-bottom: var(--sk-space-4); } .sk-footer__bottom { margin-top: var(--sk-space-12); padding-top: var(--sk-space-6); border-top: 1px solid #2b2f38; font-size: var(--sk-fs-sm); color: var(--sk-concrete); } /* ---------------------------------------------------------------------------- 11. UTILITIES ---------------------------------------------------------------------------- */ .sk-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .sk-stack > * + * { margin-top: var(--sk-space-4); } .sk-cluster { display: flex; flex-wrap: wrap; gap: var(--sk-space-3); align-items: center; } .sk-center { text-align: center; } .sk-center p, .sk-center .sk-lead { margin-inline: auto; } .sk-mt-0 { margin-top: 0; } .sk-mb-0 { margin-bottom: 0; } /* ---------------------------------------------------------------------------- 12. MOTION / A11Y GUARDS ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .sk-scope *, .sk-scope *::before, .sk-scope *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .sk-btn:hover, .sk-card--hover:hover, .sk-city-card:hover { transform: none; } } /* ---------------------------------------------------------------------------- 13. GLOBAL SHELL DETAIL (nav menus render as