/* * ============================================================ * NORTH 40 LAND GROUP — BRAND DESIGN TOKENS * ============================================================ * Brokered by Compass | North Texas Land Brokerage * Collin, Denton, Grayson, Hunt, Fannin, Wise, Parker Counties * * USE: Drop this file into any Claude Code project and reference * these variables. Maintains brand consistency across: * - northfortyland.com * - north40insider (team intranet) * - BuyDirtTX.com * - Agent subdomains (jason., heather.) * - GHL funnels and landing pages * * COMPASS POLICY NOTE: Compass requires white/black/gray as the * primary palette on agent/team sites. Burnt orange (#C17B3A) is * approved as a single warm accent only — not for large backgrounds * or decorative fills. The hero section is exempt. * ============================================================ */ :root { /* ────────────────────────────────────────── CORE PALETTE ────────────────────────────────────────── */ /* Primary — Near Black */ --n40-black: #1A1A1A; --n40-black-deep: #0F0F0F; --n40-black-soft: #222222; /* Accent — Burnt Orange / Copper */ --n40-orange: #C17B3A; --n40-orange-dark: #A3642E; /* hover / pressed state */ --n40-orange-light: #D4935A; /* subtle tint, use sparingly */ /* Grayscale */ --n40-gray-900: #1A1A1A; /* alias for --n40-black */ --n40-gray-700: #444444; --n40-gray-500: #6B6B6B; /* secondary text */ --n40-gray-300: #B0B0B0; /* borders, dividers */ --n40-gray-100: #E0E0E0; /* card borders, input borders */ --n40-gray-50: #F5F5F5; /* section backgrounds */ /* White */ --n40-white: #FFFFFF; --n40-white-warm: #F9F7F4; /* off-white, slight warmth */ /* ────────────────────────────────────────── SEMANTIC COLOR ROLES ────────────────────────────────────────── */ --color-background: var(--n40-white); --color-background-alt: var(--n40-gray-50); --color-background-dark: var(--n40-black); --color-background-card: var(--n40-white); --color-text-primary: var(--n40-black); --color-text-secondary: var(--n40-gray-500); --color-text-muted: var(--n40-gray-300); --color-text-inverse: var(--n40-white); --color-text-on-dark: var(--n40-white); --color-accent: var(--n40-orange); --color-accent-hover: var(--n40-orange-dark); --color-border: var(--n40-gray-100); --color-border-strong: var(--n40-gray-300); --color-link: var(--n40-orange); --color-link-hover: var(--n40-orange-dark); /* ────────────────────────────────────────── TYPOGRAPHY ────────────────────────────────────────── */ /* * FONT LOADING (add to your or CSS @import): * * Adobe Fonts (Typekit) — Bodoni URW body font: * * * Google Fonts — Cormorant Garamond display font: * https://fonts.googleapis.com/css2? * family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600& * display=swap * * GHL fallback single-font: bodoni-urw */ --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'bodoni-urw', Georgia, 'Times New Roman', serif; --font-mono: 'Geist Mono', 'Courier New', monospace; --font-size-xs: 0.75rem; /* 12px — labels, badges */ --font-size-sm: 0.875rem; /* 14px — captions, metadata */ --font-size-base: 1rem; /* 16px — body copy */ --font-size-lg: 1.125rem; /* 18px — large body */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px — hero subhead */ --font-size-6xl: 3.75rem; /* 60px — hero display */ --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.2; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --letter-spacing-tight: -0.025em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.05em; --letter-spacing-wider: 0.1em; /* uppercase labels */ --letter-spacing-widest: 0.15em; /* badges, tags */ /* ────────────────────────────────────────── SPACING ────────────────────────────────────────── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ────────────────────────────────────────── BORDERS & RADIUS ────────────────────────────────────────── */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-full: 9999px; /* pill / badge */ --border-width: 1px; --border-width-thick: 2px; /* ────────────────────────────────────────── SHADOWS ────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 8px 10px rgba(0, 0, 0, 0.06); /* Orange glow — use on primary CTA hover */ --shadow-accent: 0 4px 14px rgba(193, 123, 58, 0.35); /* ────────────────────────────────────────── TRANSITIONS ────────────────────────────────────────── */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ────────────────────────────────────────── LAYOUT ────────────────────────────────────────── */ --container-max: 1280px; --container-content: 900px; /* blog / text-heavy pages */ --container-narrow: 640px; /* forms, modals */ --header-height: 72px; --header-height-mobile: 60px; /* ────────────────────────────────────────── Z-INDEX SCALE ────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ============================================================ UTILITY CLASSES Ready-to-use classes for rapid prototyping or direct use. Remove this block if you prefer a utility-free approach. ============================================================ */ /* Backgrounds */ .bg-n40-dark { background-color: var(--n40-black); } .bg-n40-alt { background-color: var(--n40-gray-50); } .bg-n40-white { background-color: var(--n40-white); } .bg-n40-accent { background-color: var(--n40-orange); } /* Text */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-inverse { color: var(--color-text-inverse); } .text-accent { color: var(--n40-orange); } /* Typography helpers */ .font-display { font-family: var(--font-display); } .font-body { font-family: var(--font-body); } .font-mono { font-family: var(--font-mono); } .label-caps { font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; } /* ────────────────────────────────────────── BUTTON PATTERNS ────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); font-family: var(--font-body); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); line-height: 1; border-radius: var(--radius-md); border: var(--border-width) solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base); } /* Primary CTA — burnt orange */ .btn-primary { background-color: var(--n40-orange); color: var(--n40-white); border-color: var(--n40-orange); } .btn-primary:hover { background-color: var(--n40-orange-dark); border-color: var(--n40-orange-dark); box-shadow: var(--shadow-accent); } /* Secondary — black */ .btn-secondary { background-color: var(--n40-black); color: var(--n40-white); border-color: var(--n40-black); } .btn-secondary:hover { background-color: var(--n40-black-soft); box-shadow: var(--shadow-md); } /* Outline — used for non-primary actions */ .btn-outline { background-color: transparent; color: var(--n40-black); border-color: var(--n40-black); } .btn-outline:hover { background-color: var(--n40-black); color: var(--n40-white); } /* Ghost — light backgrounds only */ .btn-ghost { background-color: transparent; color: var(--n40-orange); border-color: var(--n40-orange); } .btn-ghost:hover { background-color: var(--n40-orange); color: var(--n40-white); } /* ────────────────────────────────────────── CARD PATTERN ────────────────────────────────────────── */ .card-n40 { background-color: var(--color-background-card); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base); } .card-n40:hover { box-shadow: var(--shadow-md); } /* Dark card — used in hero sections or dark-bg panels */ .card-n40-dark { background-color: var(--n40-black-soft); border: var(--border-width) solid #333333; border-radius: var(--radius-lg); color: var(--n40-white); } /* ────────────────────────────────────────── BADGE / LABEL PATTERN ────────────────────────────────────────── */ .badge-n40 { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-widest); text-transform: uppercase; border-radius: var(--radius-full); background-color: var(--n40-orange); color: var(--n40-white); } .badge-n40-outline { background-color: transparent; color: var(--n40-orange); border: var(--border-width) solid var(--n40-orange); } /* ────────────────────────────────────────── FORM INPUTS ────────────────────────────────────────── */ .input-n40 { width: 100%; padding: var(--space-3) var(--space-4); font-family: var(--font-body); font-size: var(--font-size-base); color: var(--color-text-primary); background-color: var(--n40-white); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; } .input-n40:focus { border-color: var(--n40-orange); box-shadow: 0 0 0 3px rgba(193, 123, 58, 0.15); } .input-n40::placeholder { color: var(--color-text-muted); } /* ────────────────────────────────────────── DIVIDER / RULE ────────────────────────────────────────── */ .divider-n40 { border: none; border-top: var(--border-width) solid var(--color-border); margin: var(--space-8) 0; } .divider-accent { border-top-color: var(--n40-orange); width: 48px; margin: var(--space-6) 0; } /* ============================================================ COMPASS COMPLIANCE REMINDER ============================================================ Burnt orange (#C17B3A) is approved as a SINGLE warm accent. Do not use it for large section backgrounds or decorative fills in Compass-hosted or Compass-affiliated pages. Hero sections are exempt from this restriction. ============================================================ */