/* ============================================================ ONE COMMUNITY CHURCH — Sports & Events Center Core foundations: color + type ------------------------------------------------------------ Brand colors sampled directly from the OCC logo: OCC Red #C12735 OCC Charcoal #35363A Fonts are Google Fonts approximations of the brand wordmark (geometric uppercase sans). No brand font files were supplied — see README "Fonts" caveat. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500;1,700&family=Roboto+Mono:wght@400;500;700&display=swap'); :root { /* ---------- BRAND ---------- */ --occ-red: #C12735; /* primary — energy, action, faith */ --occ-red-600: #A81F2C; /* hover */ --occ-red-700: #8C1A24; /* active / pressed */ --occ-red-300: #E4868E; /* light accents */ --occ-red-100: #F9E7E9; /* tint surfaces */ --occ-red-50: #FDF4F5; /* faint wash */ --occ-charcoal: #35363A; /* brand ink / dark surfaces */ /* ---------- NEUTRAL INK SCALE (cool charcoal family) ---------- */ --ink-950: #1B1C1F; --ink-900: #222329; --ink-800: #2A2B30; --ink-700: #35363A; /* = brand charcoal */ --ink-600: #4A4B51; --ink-500: #6B6C73; --ink-400: #93949B; --ink-300: #C2C3C9; --ink-200: #E2E3E7; --ink-150: #ECEDF0; --ink-100: #F2F3F5; --ink-50: #F8F9FA; --white: #FFFFFF; /* ---------- SEMANTIC SURFACES ---------- */ --bg-page: var(--ink-50); /* app/page background */ --bg-surface: var(--white); /* cards, sheets */ --bg-sunken: var(--ink-100); /* wells, inputs at rest */ --bg-inverse: var(--ink-900); /* dark sections */ /* ---------- SEMANTIC TEXT ---------- */ --fg-1: var(--ink-900); /* primary text / headings */ --fg-2: var(--ink-600); /* secondary / body */ --fg-3: var(--ink-500); /* muted / captions */ --fg-4: var(--ink-400); /* placeholder / disabled */ --fg-on-red: var(--white); --fg-on-dark: var(--white); --fg-on-dark-2: rgba(255,255,255,.68); /* ---------- BORDERS / LINES ---------- */ --line-1: var(--ink-200); /* hairline dividers */ --line-2: var(--ink-300); /* stronger borders, inputs */ --line-strong: var(--ink-700); /* ---------- ACTION (maps to brand red) ---------- */ --action: var(--occ-red); --action-hover: var(--occ-red-600); --action-active: var(--occ-red-700); --focus-ring: rgba(193,39,53,.38); /* ---------- STATUS ---------- */ --success: #1F8A4C; --success-bg: #E7F4ED; --warning: #E08A1E; --warning-bg: #FCF1DE; --danger: var(--occ-red); --danger-bg: var(--occ-red-100); --info: #2C6FB0; --info-bg: #E6F0F8; /* ============================================================ TYPE ============================================================ */ --font-display: 'Anton', 'Arial Narrow', sans-serif; /* athletic impact */ --font-sans: 'Montserrat', system-ui, sans-serif; /* brand workhorse */ --font-mono: 'Roboto Mono', ui-monospace, monospace; /* codes, times, scores */ /* weights */ --w-regular: 400; --w-medium: 500; --w-semibold:600; --w-bold: 700; --w-extrabold:800; --w-black: 900; /* fluid type scale (1.25 major-third-ish, tightened) */ --fs-display: clamp(3.5rem, 7vw, 6.5rem); /* Anton hero */ --fs-h1: clamp(2.25rem, 4vw, 3.25rem); --fs-h2: clamp(1.75rem, 3vw, 2.5rem); --fs-h3: clamp(1.375rem, 2.2vw, 1.875rem); --fs-h4: 1.25rem; --fs-h5: 1.0625rem; --fs-body-lg: 1.125rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --fs-eyebrow: 0.8125rem; /* line heights */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.55; /* letter spacing */ --ls-display: 0.01em; --ls-eyebrow: 0.16em; /* wide tracking like the wordmark */ --ls-caps: 0.06em; /* ============================================================ RADIUS / SHADOW / SPACING ============================================================ */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(27,28,31,.06), 0 1px 3px rgba(27,28,31,.08); --shadow-md: 0 4px 12px rgba(27,28,31,.08), 0 2px 4px rgba(27,28,31,.06); --shadow-lg: 0 12px 32px rgba(27,28,31,.12), 0 4px 8px rgba(27,28,31,.06); --shadow-red: 0 8px 22px rgba(193,39,53,.30); /* 4px base spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; } /* ============================================================ ELEMENT DEFAULTS / SEMANTIC CLASSES ============================================================ */ .occ-type, body.occ { font-family: var(--font-sans); color: var(--fg-1); font-weight: var(--w-regular); -webkit-font-smoothing: antialiased; } .display { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); text-transform: uppercase; } h1, .h1 { font-family: var(--font-sans); font-weight: var(--w-extrabold); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; } h2, .h2 { font-family: var(--font-sans); font-weight: var(--w-extrabold); font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.01em; } h3, .h3 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-h3); line-height: var(--lh-snug); } h4, .h4 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-h4); line-height: var(--lh-snug); } h5, .h5 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--fs-h5); line-height: var(--lh-snug); } .eyebrow, .overline { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--occ-red); } p, .body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-2); } .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-normal); color: var(--fg-2); } .small { font-size: var(--fs-sm); line-height: 1.5; } .caption { font-size: var(--fs-xs); line-height: 1.45; color: var(--fg-3); } .mono, code, .code { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0.01em; }