/* ============================================================ CGSigns Design System — Colors & Type Custom Graphics & Sign Designs · North Florida ============================================================ */ /* ---------- Fonts ---------- */ /* Brand spec: Proxima Nova (licensed, not open-source). Substitute used here: Montserrat — loaded via a non-blocking in each page's with display=swap. We deliberately do NOT @import it here, so the CSS doesn't introduce a serial fetch chain. */ /* Metric-matched Arial fallback — eliminates layout shift when Montserrat finishes loading. The override values were calibrated so Arial at this size renders to the same line height and width as Montserrat, so the swap is visually invisible. Refs: web.dev/articles/css-size-adjust */ @font-face { font-family: "Montserrat-fallback"; src: local("Arial"); size-adjust: 105%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } :root { /* ============================================================ COLOR TOKENS — raw brand palette ============================================================ */ /* Primary brand */ --cg-blue: #042A4D; /* PMS 540c — primary navy */ --cg-yellow: #FED915; /* PMS 115c / 1235c — accent yellow */ --cg-grey-dark: #3C3C3C; /* PMS 446c — body text / dark neutral */ --cg-grey-bg: #FAFAFA; /* light neutral background */ /* Extended navy ramp (derived for hover/press/depth) */ --cg-blue-950: #02192E; --cg-blue-900: #042A4D; /* base */ --cg-blue-800: #0A3A66; --cg-blue-700: #0F4B82; --cg-blue-600: #1A5E9C; --cg-blue-100: #D6E2EE; --cg-blue-50: #EEF3F8; /* Extended yellow ramp */ --cg-yellow-600: #E5C100; --cg-yellow-500: #FED915; /* base */ --cg-yellow-400: #FFE352; --cg-yellow-100: #FFF6C2; /* Neutral / greyscale ramp */ --cg-black: #111111; --cg-grey-900: #1F1F1F; --cg-grey-800: #2A2A2A; --cg-grey-700: #3C3C3C; /* base body grey */ --cg-grey-500: #6B6B6B; --cg-grey-400: #9A9A9A; --cg-grey-300: #C9C9C9; --cg-grey-200: #E4E4E4; --cg-grey-100: #F1F1F1; --cg-grey-50: #FAFAFA; --cg-white: #FFFFFF; /* ============================================================ SEMANTIC COLOR TOKENS ============================================================ */ --color-bg: var(--cg-white); --color-bg-subtle: var(--cg-grey-50); --color-bg-inverse: var(--cg-blue-900); --color-bg-accent: var(--cg-yellow-500); --color-fg: var(--cg-grey-700); /* default body */ --color-fg-strong: var(--cg-blue-900); /* headings */ --color-fg-muted: var(--cg-grey-500); --color-fg-inverse: var(--cg-white); --color-fg-on-yellow: var(--cg-blue-900); --color-border: var(--cg-grey-200); --color-border-strong:var(--cg-grey-300); --color-border-accent:var(--cg-yellow-500); --color-link: var(--cg-blue-700); --color-link-hover: var(--cg-blue-900); --color-accent: var(--cg-yellow-500); --color-accent-hover: var(--cg-yellow-600); /* Status (kept neutral, brand-aligned) */ --color-success: #1F7A4D; --color-warning: #C98A00; --color-danger: #B23A2A; /* ============================================================ TYPE TOKENS ============================================================ */ --font-sans: "Montserrat", "Montserrat-fallback", "Proxima Nova", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-display: var(--font-sans); --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Weights — Montserrat / Proxima Nova mapping */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Type scale — 1.25 (major third), display tier kicks larger */ --fs-12: 0.75rem; /* eyebrow / micro */ --fs-14: 0.875rem; /* small */ --fs-16: 1rem; /* body */ --fs-18: 1.125rem; /* lead body */ --fs-20: 1.25rem; /* h5 */ --fs-24: 1.5rem; /* h4 */ --fs-30: 1.875rem; /* h3 */ --fs-36: 2.25rem; /* h2 */ --fs-48: 3rem; /* h1 */ --fs-64: 4rem; /* display */ --fs-80: 5rem; /* hero */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.5; --lh-loose: 1.7; --tracking-tightest: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* eyebrow / button caps */ --tracking-widest: 0.16em; /* ============================================================ SPACING / RADII / SHADOW ============================================================ */ --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; --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(4, 42, 77, 0.06); --shadow-md: 0 4px 14px rgba(4, 42, 77, 0.08); --shadow-lg: 0 18px 44px rgba(4, 42, 77, 0.12); --shadow-inset: inset 0 -2px 0 rgba(4, 42, 77, 0.06); /* Layout */ --container-max: 1200px; --container-pad: clamp(20px, 4vw, 40px); } /* ============================================================ BASE / SEMANTIC TYPOGRAPHY ============================================================ */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-base); color: var(--color-fg); background: var(--color-bg); font-weight: var(--fw-regular); } h1, .h1 { font-family: var(--font-display); font-size: clamp(var(--fs-36), 5.5vw, var(--fs-64)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); color: var(--color-fg-strong); text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-size: clamp(var(--fs-30), 3.6vw, var(--fs-48)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); color: var(--color-fg-strong); text-wrap: balance; } h3, .h3 { font-size: var(--fs-30); line-height: var(--lh-snug); font-weight: var(--fw-semibold); color: var(--color-fg-strong); letter-spacing: var(--tracking-tight); } h4, .h4 { font-size: var(--fs-24); line-height: var(--lh-snug); font-weight: var(--fw-semibold); color: var(--color-fg-strong); } h5, .h5 { font-size: var(--fs-20); line-height: var(--lh-snug); font-weight: var(--fw-semibold); color: var(--color-fg-strong); } h6, .h6 { font-size: var(--fs-16); line-height: var(--lh-snug); font-weight: var(--fw-semibold); color: var(--color-fg-strong); text-transform: uppercase; letter-spacing: var(--tracking-wider); } p { margin: 0 0 1em; line-height: var(--lh-base); text-wrap: pretty; } .lead { font-size: var(--fs-18); line-height: var(--lh-base); color: var(--color-fg); } /* Eyebrow — uppercase yellow-or-blue label above headings */ .eyebrow { display: inline-block; font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-fg-strong); } .eyebrow--accent { color: var(--cg-blue-700); } .eyebrow--rule::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--cg-yellow-500); vertical-align: middle; margin-right: 10px; transform: translateY(-2px); } a { color: var(--color-link); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: 3px; } small, .text-sm { font-size: var(--fs-14); } .text-xs { font-size: var(--fs-12); } .text-muted { color: var(--color-fg-muted); } code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }