/* ============================================================ Loving Schools — Color & Type Tokens Single source of truth. Imported by every component. Brand voice: ayuda · escuela · iglesia · comunidad · amor Language: en-US ============================================================ */ /* ---------- Font note ---------- Visby CF is the official brand face (paid — not yet licensed). Manrope (Google Fonts, free) is the nearest match. Loaded via in head.php. Swap to @font-face when Visby CF is licensed and files are placed in /fonts/. -------------------------------- */ :root { /* ---------- BRAND COLORS ---------- */ --color-primary: #29c4cf; /* turquoise — graduation cap, decorative only on white */ --color-primary-deep: #1ba3ad; /* darker turquoise for text on white when needed */ --color-accent: #e71720; /* love red — heart, CTAs, alerts */ --color-accent-deep: #c00d15; /* darker red — hover state for CTAs */ /* Supporting palette — only for fills / highlights, never combine all at once */ --color-yellow: #e8e317; /* highlight / divider only */ --color-sage: #e5ead0; /* soft sage — bg blocks, cards */ --color-sage-deep: #c9d1a4; /* sage hover / border */ /* ---------- NEUTRALS ---------- */ --color-text: #4d4d4d; /* primary text — wordmark gray */ --color-text-muted: #808080; /* secondary text & social icons */ --color-text-faint: #b3b3b3; /* placeholders, captions */ --color-bg: #ffffff; --color-bg-subtle: #f2f2f2; /* section alternation */ --color-bg-sage: #e5ead0; /* tinted section bg */ --color-border: #e5e5e5; /* subtle dividers */ --color-border-strong: #cccccc; /* ---------- SEMANTIC ALIASES ---------- */ --fg-1: var(--color-text); --fg-2: var(--color-text-muted); --fg-3: var(--color-text-faint); --fg-on-primary: #ffffff; --fg-on-accent: #ffffff; --bg-1: var(--color-bg); --bg-2: var(--color-bg-subtle); --bg-3: var(--color-bg-sage); --brand: var(--color-primary); --love: var(--color-accent); /* ---------- TYPE ---------- */ --font-body: 'Manrope', 'Visby CF', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: var(--font-body); /* Weights — Visby CF ships 500/600/700; mirror in Manrope */ --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; /* Scale (rem at 16px base) */ --text-xs: 0.8125rem; /* 13 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.5rem; /* 24 — body large */ --text-h3: 1.25rem; /* 20 → 27.5 at max root */ --text-h2: 1.875rem; /* 30 → 41.25 at max root */ --text-h1: 2.25rem; /* 36 → 49.5 at max root */ --text-display: 3rem; /* 48 → 66 at max root */ --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.45; --leading-relaxed: 1.6; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ---------- SPACING ---------- */ --space-2xs: 0.25rem; /* 4 */ --space-xs: 0.5rem; /* 8 */ --space-sm: 1rem; /* 16 */ --space-md: 1.5rem; /* 24 */ --space-lg: 2rem; /* 32 */ --space-xl: 3rem; /* 48 */ --space-2xl: 5rem; /* 80 */ --space-3xl: 7.5rem; /* 120 */ --space-gutter: 13.75rem; /* 220 — desktop .container side padding */ /* ---------- RADII ---------- */ --radius-sm: 0.5rem; /* 8 — buttons, inputs */ --radius-md: 1rem; /* 16 — cards */ --radius-lg: 2rem; /* 32 — feature blocks */ --radius-full: 999px; /* pills, avatars, FAB */ /* ---------- ELEVATION ---------- System is intentionally flat. Shadows reserved for overlays only (modals, dropdowns). No shadow on cards. */ --shadow-none: none; --shadow-overlay: 0 12px 40px -8px rgba(77, 77, 77, 0.18); --shadow-focus: 0 0 0 3px rgba(41, 196, 207, 0.35); /* ---------- BORDERS ---------- */ --border-hairline: 1px solid var(--color-border); --border-strong: 2px solid var(--color-text); --border-brand: 2px solid var(--color-primary); --border-love: 2px solid var(--color-accent); /* ---------- MOTION ---------- */ --transition: 200ms ease; --transition-slow: 320ms cubic-bezier(.2,.7,.2,1); --transition-snappy: 140ms cubic-bezier(.4,0,.2,1); /* ---------- LAYERS ---------- */ --z-nav: 100; --z-popover: 150; --z-modal: 200; --z-toast: 300; /* ---------- LAYOUT ---------- */ --content-max: 1490px; --content-pad-mobile: var(--space-sm); --content-pad-desktop: var(--space-gutter); } /* ============================================================ Base ============================================================ */ html { color-scheme: light; font-size: clamp(0.875rem, 0.35rem + 1.15vw, 1.375rem); } body { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-1); background: var(--bg-1); -webkit-font-smoothing: antialiased; } /* Form elements don't inherit font by default in all browsers */ button, input, select, textarea { font: inherit; } h1, .h1 { font-size: var(--text-h1); font-weight: var(--fw-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-primary); margin: 0 0 var(--space-md); } h2, .h2 { font-size: var(--text-h2); font-weight: var(--fw-bold); line-height: var(--leading-snug); color: var(--color-primary); margin: 0 0 var(--space-md); } h2.on-light, .h2.on-light { color: var(--fg-1); } h3, .h3 { font-size: var(--text-h3); font-weight: var(--fw-semibold); line-height: var(--leading-snug); color: var(--fg-1); margin: 0 0 var(--space-sm); } p, .body { font-size: var(--text-base); font-weight: var(--fw-medium); line-height: var(--leading-normal); color: var(--fg-1); text-wrap: pretty; } small, .small, .caption { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--fg-2); } .eyebrow { font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent); } /* ---------- Focus ---------- */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } /* ---------- Reduce motion ---------- */ /* !important required — must override all durations universally */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } }