/* ============================================================================= Equine Edu — core.css Design tokens, base reset, typography, atmosphere, site chrome, motion. Loaded on EVERY page. Keep this file lean. ---------------------------------------------------------------------------- This is the single source of truth for the design system: color, type scale, spacing scale, radius, elevation, motion, room accents. Pages and components consume these tokens — never redefine them. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. Reset ----------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ----------------------------------------------------------------------------- 2. Design tokens ----------------------------------------------------------------------------- */ :root { /* ---- Brand palette (creams / dusty blue / leather) ---- */ --cream-bg: #F1E9DC; /* primary background — deep enough that white surfaces pop */ --cream-secondary: #E7DCCB; --soft-white: #FCFAF7; --blue-primary: #7F98B2; /* dusty blue */ --blue-secondary: #A9BACB; --blue-light: #D9E3EC; --tan: #C8A27A; /* warm tan — primary actions */ --leather: #A9825A; /* leather brown — hover */ --leather-dark: #7A5D45; /* dark leather — accents */ --heading: #24364A; --body-text: #4F5B66; --muted-text: #7D858D; --white: #FFFFFF; /* Soft feedback colors (quiz/lesson) — calm, no bright green/red */ --success: #5C8A6E; --success-bg: rgba(92, 138, 110, 0.10); --success-bd: rgba(92, 138, 110, 0.28); --error: #B5705A; --error-bg: rgba(181, 112, 90, 0.10); --error-bd: rgba(181, 112, 90, 0.28); /* Illustration constants (tack/equipment diagrams) — documented, not stray */ --ill-leather: #8B4513; --ill-leather-mid: #A9825A; --ill-saddle: #D2691E; --ill-metal: #A8A8A8; --ill-rawhide: #B5936A; /* Borders / surfaces */ --border: rgba(36, 54, 74, 0.10); --border-mid: rgba(36, 54, 74, 0.16); /* ---- Room accents (the rooms of the barn — one system, four tints) ---- Set automatically on by layout.js from the URL. Components reference --room-accent / --room-wash; they never hardcode. */ --room-accent: var(--tan); --room-wash: rgba(200, 162, 122, 0.10); /* ---- Typography ---- */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif; --text-xs: 0.78rem; --text-sm: 0.9rem; --text-base: 1rem; --text-md: 1.0625rem; /* lesson reading size */ --text-lg: 1.2rem; --text-xl: 1.45rem; --text-2xl: clamp(1.6rem, 2.5vw, 2rem); --text-3xl: clamp(2rem, 4vw, 3rem); --text-display: clamp(2.5rem, 5.5vw, 4.1rem); /* ---- Spacing scale (4px base) ---- */ --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; /* ---- Elevation (exactly three; warm leather-brown so white surfaces lift clearly off the cream atmosphere) ---- */ --shadow-rest: 0 1px 3px rgba(94, 71, 52, 0.10), 0 6px 20px rgba(94, 71, 52, 0.13); --shadow-raised: 0 3px 8px rgba(94, 71, 52, 0.12), 0 12px 32px rgba(94, 71, 52, 0.17); --shadow-float: 0 6px 16px rgba(94, 71, 52, 0.14), 0 22px 52px rgba(94, 71, 52, 0.22); /* Nested halo — the ONE shadow for white cards/buttons sitting INSIDE a white panel. Ambient all-around glow (not just a drop below) so the surface reads as its own layer instead of blending into the parent. Every nested white-on-white surface uses this token — never hardcode. */ --shadow-nested: 0 0 16px rgba(94, 71, 52, 0.16), 0 4px 14px rgba(94, 71, 52, 0.12); /* ---- Motion ---- */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --motion-quick: 160ms; --motion-soft: 420ms; /* ---- Layout ---- */ --nav-height: 68px; --page-pad: 5%; --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --measure: 68ch; /* editorial reading measure */ --content-w: 1100px; /* editorial content width */ --shell-w: 1400px; /* app-shell width (lesson 2-col) */ } /* Room tints — applied via body[data-room], derived from URL in layout.js */ body[data-room="round-pen"] { --room-accent: var(--tan); --room-wash: rgba(200, 162, 122, 0.10); } body[data-room="schooling-ring"] { --room-accent: var(--blue-primary); --room-wash: rgba(127, 152, 178, 0.12); } body[data-room="quiz-corral"] { --room-accent: var(--success); --room-wash: rgba(92, 138, 110, 0.09); } body[data-room="lesson-board"] { --room-accent: var(--leather); --room-wash: rgba(169, 130, 90, 0.10); } /* ----------------------------------------------------------------------------- 3. Base typography & atmosphere ----------------------------------------------------------------------------- */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--cream-bg); color: var(--heading); overflow-x: hidden; line-height: 1.5; } /* Atmosphere — fixed layered terrain canvas behind every page. Soft dusty-blue hills at the horizon, warm sand toward the foreground. Low contrast by design: it must never compete with reading content. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 85% 55% at 108% -12%, rgba(127, 152, 178, 0.14), transparent 62%), radial-gradient(ellipse 65% 45% at -12% 2%, rgba(169, 186, 203, 0.16), transparent 58%), radial-gradient(ellipse 95% 50% at 50% 116%, rgba(200, 162, 122, 0.10), transparent 62%), radial-gradient(ellipse 55% 40% at 88% 78%, rgba(231, 220, 203, 0.9), transparent 65%), var(--room-wash); background-color: transparent; } /* Corner horse accents — fixed decorative art behind every page. One in the top-right, one in the lower-left; both stay put on scroll. Sits above the atmosphere (::before) but behind all content. */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url('../images/bg-horse-top-right.png') right 0 top 110px no-repeat, url('../images/bg-horse-bottom-left.png') bottom left no-repeat; background-size: clamp(160px, 24vw, 340px), clamp(160px, 24vw, 340px); mix-blend-mode: multiply; } a { color: inherit; } img { max-width: 100%; height: auto; display: block; } /* ----------------------------------------------------------------------------- 4. Editorial primitives Shared typographic voice — use these instead of inventing per-page styles. ----------------------------------------------------------------------------- */ .eyebrow { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--room-accent); margin-bottom: var(--space-3); } .standfirst { font-size: var(--text-lg); line-height: 1.65; color: var(--body-text); max-width: var(--measure); } .prose { max-width: var(--measure); font-size: var(--text-md); line-height: 1.75; color: var(--body-text); } .prose h2, .prose h3 { font-family: var(--font-display); color: var(--heading); margin: var(--space-6) 0 var(--space-4); } .prose p { margin-bottom: var(--space-4); } .prose strong { color: var(--heading); } .pull-quote { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.45; color: var(--heading); border-left: 3px solid var(--room-accent); padding: var(--space-2) 0 var(--space-2) var(--space-5); margin: var(--space-6) 0; max-width: 36ch; } .chapter-numeral { font-family: var(--font-display); font-weight: 900; font-size: clamp(4rem, 10vw, 7rem); line-height: 1; color: var(--room-accent); opacity: 0.16; user-select: none; pointer-events: none; } /* Flow divider — a soft cream swell between content areas. Pure gradient: no edges anywhere. Place as

. */ .flow-divider { height: 72px; background: linear-gradient(180deg, transparent 0%, rgba(231, 220, 203, 0.55) 50%, transparent 100%); } /* ----------------------------------------------------------------------------- 5. Accessibility — focus styles ----------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--blue-primary); outline-offset: 2px; border-radius: 2px; } /* ----------------------------------------------------------------------------- 5b. Form controls — global baseline All select, input, and textarea elements get a consistent warm-cream surface with a visible border so they always lift off white/soft-white card backgrounds. Game and quiz pages must NOT re-define background/border on these natively — use this baseline and override only what is truly unique. ----------------------------------------------------------------------------- */ select, input[type="text"], input[type="number"], input[type="search"], input[type="email"], textarea { font-family: var(--font-body); font-size: 0.92rem; color: var(--heading); background: var(--soft-white); border: 1.5px solid var(--border-mid); border-radius: var(--radius); padding: 0.65rem 0.9rem; box-shadow: 0 1px 4px rgba(94, 71, 52, 0.08); transition: border-color var(--motion-quick) var(--ease), box-shadow var(--motion-quick) var(--ease); appearance: auto; } select:focus, input[type="text"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="email"]:focus, textarea:focus { border-color: var(--tan); box-shadow: 0 0 0 3px rgba(200, 162, 122, 0.18); outline: none; } select { /* Extra right padding for the native arrow */ padding-right: 2rem; cursor: pointer; } /* ----------------------------------------------------------------------------- 6. Top navigation — soft-glass rail ----------------------------------------------------------------------------- */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(252, 250, 247, 0.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--page-pad); height: var(--nav-height); border-bottom: 1px solid var(--border); } .nav-logo { font-family: var(--font-display); font-size: 1.5rem; color: var(--heading); letter-spacing: -0.5px; text-decoration: none; } .nav-logo span { color: var(--blue-primary); } /* Room indicator — small serif label beside the logo when inside a course area */ .nav-room { font-size: var(--text-xs); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--room-accent); margin-left: var(--space-4); padding-left: var(--space-4); border-left: 1px solid var(--border-mid); white-space: nowrap; } .nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; } .nav-links a { color: var(--body-text); text-decoration: none; font-size: var(--text-sm); font-weight: 500; transition: color var(--motion-quick) var(--ease); } .nav-links a:hover { color: var(--blue-primary); } .nav-cta { background: var(--tan) !important; color: var(--white) !important; padding: 8px 20px; border-radius: 999px; font-weight: 700 !important; transition: background var(--motion-quick) var(--ease); } .nav-cta:hover { background: var(--leather) !important; } .nav-auth-btn { border: 1.5px solid var(--blue-primary) !important; color: var(--blue-primary) !important; padding: 7px 18px; border-radius: 999px; font-weight: 600 !important; transition: background var(--motion-quick) var(--ease), border-color var(--motion-quick) var(--ease), color var(--motion-quick) var(--ease); } .nav-auth-btn:hover { background: var(--blue-light) !important; border-color: var(--blue-primary) !important; color: var(--heading) !important; } /* ── Hamburger button ─────────────────────────────────────── */ .nav-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: transparent; border: none; cursor: pointer; padding: 4px; flex-shrink: 0; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--heading); border-radius: 2px; transition: transform 0.22s var(--ease), opacity 0.22s var(--ease); } nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } nav.open .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); } nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile drawer ────────────────────────────────────────── */ .nav-drawer { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; background: rgba(252, 250, 247, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); z-index: 99; padding: 0.5rem var(--page-pad) 1.5rem; box-shadow: var(--shadow-raised); } @keyframes drawerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } nav.open .nav-drawer { animation: drawerIn 0.2s ease forwards; } .nav-drawer-links { list-style: none; display: flex; flex-direction: column; } .nav-drawer-links li { border-bottom: 1px solid var(--border); } .nav-drawer-links li:last-child { border-bottom: none; } .nav-drawer-links a { display: block; color: var(--body-text); text-decoration: none; font-size: 1rem; font-weight: 500; padding: 0.9rem 0; transition: color var(--motion-quick) var(--ease); } .nav-drawer-links a:hover { color: var(--blue-primary); } .nav-drawer-cta { display: block !important; margin-top: 0.75rem; background: var(--tan) !important; color: var(--white) !important; text-align: center; padding: 12px 24px !important; border-radius: 999px; font-weight: 700 !important; border-bottom: none !important; } /* ----------------------------------------------------------------------------- 7. Breadcrumb — editorial wayfinding line (no band) ----------------------------------------------------------------------------- */ .breadcrumb { margin-top: var(--nav-height); background: transparent; padding: 14px var(--page-pad) 2px; font-size: var(--text-xs); letter-spacing: 0.4px; color: var(--muted-text); display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; } .breadcrumb a { color: var(--muted-text); text-decoration: none; transition: color var(--motion-quick) var(--ease); } .breadcrumb a:hover { color: var(--blue-primary); } .breadcrumb span { color: var(--room-accent); margin: 0 4px; } .breadcrumb-current { color: var(--heading); font-weight: 600; } /* ----------------------------------------------------------------------------- 8. Footer — quiet editorial close ----------------------------------------------------------------------------- */ footer { background: linear-gradient(180deg, transparent, rgba(231, 220, 203, 0.45)); border-top: none; padding: var(--space-7) var(--page-pad) var(--space-6); margin-top: var(--space-8); position: relative; } .footer-inner { max-width: var(--content-w); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer-logo { font-family: var(--font-display); font-size: 1.25rem; color: var(--heading); } .footer-logo span { color: var(--blue-primary); } .footer-copy { font-size: var(--text-xs); color: var(--muted-text); } .footer-links { display: flex; gap: 1.5rem; list-style: none; } .footer-links a { font-size: 0.82rem; color: var(--body-text); text-decoration: none; transition: color var(--motion-quick) var(--ease); } .footer-links a:hover { color: var(--blue-primary); } /* ----------------------------------------------------------------------------- 9. Motion — the single site-wide reveal system .motion-reveal: fade-and-rise on scroll (observed by layout.js) ----------------------------------------------------------------------------- */ .motion-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--motion-soft) var(--ease), transform var(--motion-soft) var(--ease); transition-delay: var(--motion-delay, 0ms); } .motion-reveal.is-visible { opacity: 1; transform: translateY(0); } /* ----------------------------------------------------------------------------- 10. Reduced motion preference ----------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .motion-reveal { opacity: 1; transform: none; } } /* ----------------------------------------------------------------------------- 11. Responsive — site chrome Component/layout breakpoints live in their own partials. ----------------------------------------------------------------------------- */ @media (max-width: 760px) { .nav-links { display: none; } .nav-room { display: none; } .nav-burger { display: flex; } nav.open .nav-drawer { display: block; } .footer-inner { flex-direction: column; text-align: center; } .footer-links { justify-content: center; flex-wrap: wrap; } /* Simplified atmosphere on small screens (paint cost) */ body::before { background: radial-gradient(ellipse 120% 45% at 50% -8%, rgba(127, 152, 178, 0.12), transparent 60%), radial-gradient(ellipse 120% 45% at 50% 112%, rgba(200, 162, 122, 0.08), transparent 60%), var(--room-wash); } }