/* ===================================================================== * AM Legal APC — Design System * Tokens, typography, buttons, and shared helpers. * Source: docs/01_design-system/DESIGN-SYSTEM.md * * Units: a master root font-size is set on ; everything sizes in * `rem` (scales off the root) or `em` (scales off local font-size), so the * whole UI scales by changing the root. Media-query breakpoints use `em` * (respond to zoom). Only 1px hairline borders stay in px. * ===================================================================== */ :root { --color-bg-dark: #0D0D0D; --color-bg-mid: #1C1C1C; --color-bg-light: #F8F7F4; --color-bg-white: #FFFFFF; --color-gold: #C9A84C; /* brand gold — decorative / large text / dark backgrounds only (fails AA on light) */ --color-gold-hover: #E8C96A; --color-gold-ada: #966f00; /* ADA-compliant gold (AA) for gold TEXT on light backgrounds */ --color-text-white: #FFFFFF; --color-text-dark: #1C1C1C; --color-text-muted: #777777; --color-text-faint: rgba(255, 255, 255, 0.4); --color-border-dark: rgba(255, 255, 255, 0.06); --color-border-light:#E8E8E8; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Root tokens stay in rem. With html at 62.5% (1rem = 10px) these read as px/10 — scale the whole site by changing the html font-size. */ --header-height: 8rem; /* 80px */ --gold-bar-height: 0.3rem; /* 3px */ --space-section: clamp(6.4rem, 8vw, 11.2rem); /* 64–112px */ --container: 120rem; /* 1200px */ --container-pad: clamp(1.5rem, 4vw, 3.2rem); /* 15–32px; 15px@375px, 32px@800px */ } /* 62.5% = 10px at the browser's default (still respects user zoom / a11y), so 1rem = 10px. Component sizing is in em off the body below. */ html { font-size: 62.5%; } /* ---- Base ------------------------------------------------------------ */ body { font-family: var(--font-body); font-size: 1.6em; /* 16px (1.6 × 10px root); em anchor for the whole site */ line-height: 1.85; color: var(--color-text-dark); background-color: var(--color-bg-white); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .entry-title, .am-display { font-family: var(--font-display); font-weight: 300; line-height: 1.1; letter-spacing: 0.005em; } h1 { font-size: clamp(3em, 6vw, 5.5em); line-height: 0.98; } h2 { font-size: clamp(2em, 4vw, 3.25em); } h3 { font-size: clamp(1.25em, 2.5vw, 1.75em); font-weight: 400; } em, .am-em { font-style: italic; color: var(--color-gold); } a { color: var(--color-gold); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--color-gold-hover); } /* ---- Helpers --------------------------------------------------------- */ .am-label { font-family: var(--font-body); font-weight: 600; font-size: 0.65em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); display: block; } .gold-rule { width: 2.5em; height: 1px; /* hairline */ background: var(--color-gold); margin: 0.75em 0 1.5em; border: 0; } .gold-rule--center { margin-left: auto; margin-right: auto; } /* ---- Utilities -------------------------------------------------------- * Bootstrap 5's spacing utility scale — same class names, same values, * no am- prefix (deliberately, so there's no second naming scheme to * learn: mt-3 means the same thing here as it does in Bootstrap). Uses * Bootstrap's default $spacer scale (1rem base: 0, .25rem, .5rem, 1rem, * 1.5rem, 3rem). l/r (not logical s/e) to match the sides most devs * still reach for. Add directly via a block's "Additional CSS Class(es)" * field to override component/section CSS (e.g. .am-section's default 7em * vertical padding) on any block, without needing a new BEM/section- * specific selector. Deliberately !important — that's the whole point of * a utility class: it always wins regardless of what else is targeting * the element. Checked for collisions against GeneratePress, plugin, and * theme CSS before adding — none found. ---------------------------------- */ .m-auto { margin: auto !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; } /* Margin - All sides */ .m-0 { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; } .m-1 { margin-top: .25rem !important; margin-right: .25rem !important; margin-bottom: .25rem !important; margin-left: .25rem !important; } .m-2 { margin-top: .5rem !important; margin-right: .5rem !important; margin-bottom: .5rem !important; margin-left: .5rem !important; } .m-3 { margin-top: 1rem !important; margin-right: 1rem !important; margin-bottom: 1rem !important; margin-left: 1rem !important; } .m-4 { margin-top: 1.5rem !important; margin-right: 1.5rem !important; margin-bottom: 1.5rem !important; margin-left: 1.5rem !important; } .m-5 { margin-top: 3rem !important; margin-right: 3rem !important; margin-bottom: 3rem !important; margin-left: 3rem !important; } /* Margin - Top */ .mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .25rem !important; } .mt-2 { margin-top: .5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; } /* Margin - Bottom */ .mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; } .mb-2 { margin-bottom: .5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; } /* Margin - Left */ .ml-0 { margin-left: 0 !important; } .ml-1 { margin-left: .25rem !important; } .ml-2 { margin-left: .5rem !important; } .ml-3 { margin-left: 1rem !important; } .ml-4 { margin-left: 1.5rem !important; } .ml-5 { margin-left: 3rem !important; } /* Margin - Right */ .mr-0 { margin-right: 0 !important; } .mr-1 { margin-right: .25rem !important; } .mr-2 { margin-right: .5rem !important; } .mr-3 { margin-right: 1rem !important; } .mr-4 { margin-right: 1.5rem !important; } .mr-5 { margin-right: 3rem !important; } /* Margin - Left + right */ .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .mx-1 { margin-left: .25rem !important; margin-right: .25rem !important; } .mx-2 { margin-left: .5rem !important; margin-right: .5rem !important; } .mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; } .mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; } .mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; } /* Margin - Top + bottom */ .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; } .my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; } .my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; } .my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } .my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; } /* Padding - All sides */ .p-0 { padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; } .p-1 { padding-top: .25rem !important; padding-right: .25rem !important; padding-bottom: .25rem !important; padding-left: .25rem !important; } .p-2 { padding-top: .5rem !important; padding-right: .5rem !important; padding-bottom: .5rem !important; padding-left: .5rem !important; } .p-3 { padding-top: 1rem !important; padding-right: 1rem !important; padding-bottom: 1rem !important; padding-left: 1rem !important; } .p-4 { padding-top: 1.5rem !important; padding-right: 1.5rem !important; padding-bottom: 1.5rem !important; padding-left: 1.5rem !important; } .p-5 { padding-top: 3rem !important; padding-right: 3rem !important; padding-bottom: 3rem !important; padding-left: 3rem !important; } /* Padding - Top */ .pt-0 { padding-top: 0 !important; } .pt-1 { padding-top: .25rem !important; } .pt-2 { padding-top: .5rem !important; } .pt-3 { padding-top: 1rem !important; } .pt-4 { padding-top: 1.5rem !important; } .pt-5 { padding-top: 3rem !important; } /* Padding - Bottom */ .pb-0 { padding-bottom: 0 !important; } .pb-1 { padding-bottom: .25rem !important; } .pb-2 { padding-bottom: .5rem !important; } .pb-3 { padding-bottom: 1rem !important; } .pb-4 { padding-bottom: 1.5rem !important; } .pb-5 { padding-bottom: 3rem !important; } /* Padding - Left */ .pl-0 { padding-left: 0 !important; } .pl-1 { padding-left: .25rem !important; } .pl-2 { padding-left: .5rem !important; } .pl-3 { padding-left: 1rem !important; } .pl-4 { padding-left: 1.5rem !important; } .pl-5 { padding-left: 3rem !important; } /* Padding - Right */ .pr-0 { padding-right: 0 !important; } .pr-1 { padding-right: .25rem !important; } .pr-2 { padding-right: .5rem !important; } .pr-3 { padding-right: 1rem !important; } .pr-4 { padding-right: 1.5rem !important; } .pr-5 { padding-right: 3rem !important; } /* Padding - Left + right */ .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .px-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .px-5 { padding-left: 3rem !important; padding-right: 3rem !important; } /* Padding - Top + bottom */ .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; } .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; } /* ---- Buttons --------------------------------------------------------- */ .btn-gold, .btn-ghost, .btn-ghost-white { display: inline-block; padding: 1em 2em; font-family: var(--font-body); font-size: 0.7em; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; /* hairline */ cursor: pointer; transition: all 0.2s ease; line-height: 1.2; } .btn-gold { background: var(--color-gold); color: var(--color-bg-dark); } .btn-gold:hover { background: var(--color-gold-hover); color: var(--color-bg-dark); } .btn-ghost-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); } .btn-ghost-white:hover { border-color: var(--color-gold); color: var(--color-gold); } .btn-ghost { background: transparent; color: var(--color-text-dark); border-color: var(--color-text-dark); } .btn-ghost:hover { border-color: var(--color-gold); color: var(--color-gold); } /* Core button blocks: the .btn-* class sits on the .wp-block-button wrapper (styled above), so reset the inner link to inherit and let the wrapper be the button. Override core's `.wp-block-buttons .wp-block-button__link{width:100%}`. */ .wp-block-button.btn-gold > .wp-block-button__link, .wp-block-button.btn-ghost > .wp-block-button__link, .wp-block-button.btn-ghost-white > .wp-block-button__link { display: inline-block; width: auto; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; } /* Button groups: side-by-side, content-width. */ .wp-block-buttons { display: flex; flex-flow: row wrap; gap: 0.75em; } .wp-block-buttons > .wp-block-button { width: auto; margin: 0; } /* ---- Scroll-reveal base (JS adds .am-revealed) ----------------------- */ .am-reveal { opacity: 0; transform: translateY(1.875em); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .am-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .am-reveal { opacity: 1; transform: none; transition: none; } } /* Generatepress Overrides */ .separate-containers .site-main { margin-top: 0; margin-bottom: 0; } /* /Generatepress Overrides */