/* ABR Advocates — self-contained stylesheet for standalone deployment (concatenated from tokens/*.css). */ /* --- fonts.css --- */ /* ABR Advocates — Webfonts Display: Playfair Display (elegant high-contrast serif, echoes the logo wordmark) Body: Inter (clean, legible humanist sans) NOTE: loaded via + preconnect in (see transform.ps1), not via @import, since @import serializes font loading behind this stylesheet. */ /* --- colors.css --- */ /* ABR Advocates & Legal Consultants — Color tokens Brand sampled from the firm mark: forest green, brass gold, warm cream. */ :root { /* ---- Brand: Forest Green (primary) ---- */ --abr-green-950: #042015; --abr-green-900: #06291C; --abr-green-800: #083423; --abr-green-700: #0C4934; /* core brand green */ --abr-green-600: #10583F; --abr-green-500: #166B4D; --abr-green-400: #2E8767; --abr-green-300: #6FAE92; --abr-green-200: #AED0C0; --abr-green-100: #DCEBE3; /* ---- Brand: Brass Gold (accent) ---- */ --abr-gold-800: #7E6427; --abr-gold-700: #98792F; --abr-gold-600: #AC8E40; --abr-gold-500: #BDA05D; /* core brass */ --abr-gold-400: #CDB477; --abr-gold-300: #DECB9B; --abr-gold-200: #EFE2C4; --abr-gold-100: #F8F1E1; /* ---- Cream / Ivory ---- */ --abr-cream-50: #FFFBF4; --abr-cream-100: #FBF6EC; --abr-cream-200: #F4ECDC; /* ---- Warm neutrals (greenish-charcoal) ---- */ --abr-ink-900: #131A16; --abr-ink-800: #1E2823; --abr-ink-700: #2C382F; --abr-ink-600: #44524A; --abr-ink-500: #5E6C63; --abr-ink-400: #82908A; --abr-ink-300: #AAB5AF; --abr-ink-200: #D7DDD8; --abr-ink-100: #EAEEE9; --abr-white: #FFFFFF; /* ---- Semantic ---- */ --color-primary: var(--abr-green-700); --color-primary-hover: var(--abr-green-600); --color-primary-press: var(--abr-green-800); --color-accent: var(--abr-gold-500); --color-accent-hover: var(--abr-gold-600); --color-accent-strong: var(--abr-gold-700); --text-strong: var(--abr-ink-900); --text-body: var(--abr-ink-700); --text-muted: var(--abr-ink-500); --text-on-dark: var(--abr-cream-50); --text-on-dark-muted: #A9C0B4; --text-accent: var(--abr-gold-700); --surface-page: var(--abr-cream-50); --surface-card: var(--abr-white); --surface-sunken: var(--abr-cream-100); --surface-dark: var(--abr-green-900); --surface-darker: var(--abr-green-950); --border-subtle: #E7E1D4; --border-strong: #D6CFBE; --border-dark: rgba(189,160,93,0.22); /* status */ --color-success: #0E9F6E; --color-danger: #C0392B; /* focus ring */ --ring: 0 0 0 3px rgba(189,160,93,0.45); } /* --- typography.css --- */ /* ABR Advocates — Typography tokens */ :root { --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Type scale (rem, 16px base) — fluid display sizes use clamp in components */ --fs-eyebrow: 0.78rem; /* 12.5px — uppercase label */ --fs-caption: 0.82rem; /* 13px */ --fs-small: 0.9rem; /* 14.4px */ --fs-body: 1.0625rem; /* 17px — body default */ --fs-lead: 1.25rem; /* 20px — intros */ --fs-h6: 1.15rem; --fs-h5: 1.4rem; --fs-h4: 1.75rem; --fs-h3: 2.25rem; --fs-h2: 3rem; --fs-h1: clamp(2.75rem, 5vw, 4.25rem); /* @kind font */ --fs-display: clamp(3.25rem, 7vw, 6rem); /* @kind font */ /* Weights */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-display: 700; /* @kind font */ /* Line heights */ --lh-tight: 1.08; /* @kind font */ --lh-snug: 1.22; /* @kind font */ --lh-normal: 1.5; /* @kind font */ --lh-relaxed: 1.7; /* @kind font */ /* Letter spacing */ --ls-eyebrow: 0.18em; /* @kind font */ --ls-tight: -0.02em; /* @kind font */ --ls-normal: 0; /* @kind font */ } /* --- spacing.css --- */ /* ABR Advocates — Spacing & layout tokens (8px base rhythm) */ :root { --space-0: 0; --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; --space-11: 160px; /* Section vertical padding */ --section-y: clamp(64px, 9vw, 128px); /* @kind spacing */ /* Layout */ --container-max: 1240px; /* @kind spacing */ --container-narrow: 820px; /* @kind spacing */ --container-pad: clamp(20px, 5vw, 64px); /* @kind spacing */ } /* --- effects.css --- */ /* ABR Advocates — Radii, shadows, borders, motion */ :root { /* Corner radii — soft, premium (cards ~16px) */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* default card */ --radius-xl: 24px; --radius-pill: 999px; /* Shadows — soft, low-spread, warm-tinted */ --shadow-xs: 0 1px 2px rgba(19,26,22,0.06); --shadow-sm: 0 2px 8px rgba(19,26,22,0.06); --shadow-md: 0 10px 30px -12px rgba(19,26,22,0.16); --shadow-lg: 0 24px 60px -20px rgba(19,26,22,0.22); --shadow-xl: 0 40px 90px -28px rgba(6,41,28,0.34); --shadow-gold: 0 16px 40px -16px rgba(189,160,93,0.45); --shadow-inset-hairline: inset 0 0 0 1px var(--border-subtle); /* Borders */ --border-hairline: 1px solid var(--border-subtle); --border-card: 1px solid var(--border-subtle); /* Motion — calm, confident easing (no bounce) */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 160ms; /* @kind other */ --dur-base: 280ms; /* @kind other */ --dur-slow: 520ms; /* @kind other */ /* Blur / glass */ --glass-bg: rgba(255,251,244,0.72); /* @kind color */ --glass-bg-dark: rgba(6,41,28,0.55); /* @kind color */ --glass-blur: blur(14px) saturate(140%); /* @kind other */ } /* --- base.css --- */ /* ABR Advocates — base element styles & primitives. Kept light: resets + default typography bound to tokens. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-strong); font-weight: var(--fw-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0 0 0.5em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); } h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); } h6 { font-size: var(--fs-h6); line-height: var(--lh-snug); } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--color-primary); text-decoration: none; } /* Eyebrow / kicker label */ .abr-eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); display: inline-flex; align-items: center; gap: 0.6em; } .abr-eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--color-accent); display: inline-block; } /* Layout container */ .abr-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } ::selection { background: var(--abr-gold-300); color: var(--abr-green-900); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }