/* ============================================================================= addy real estate — design tokens v1.1 · August 2026 ----------------------------------------------------------------------------- Drop-in CSS custom properties for the whole brand system. Light theme is the default (:root). Dark theme is opt-in via or class="dark" — use it for hero / marketing surfaces. Load Outfit (see the snippet at the bottom of this file or in BRAND.md) before using --font-sans. ============================================================================= */ :root { /* ---------------------------------------------------------------- brand raw */ --addy-black: #000000; /* base — pure black canvas */ --addy-ink: #0B0B0B; /* near-black — dark surfaces & text */ --addy-violet: #7D39EB; /* PRIMARY */ --addy-violet-hover: #6A2FD0; /* primary pressed / hover */ --addy-violet-300: #A578F0; /* lightened violet — links on dark */ --addy-lime: #C6FF33; /* ACCENT — the pop */ --addy-lime-pressed: #B2ED1F; /* lime pressed */ --addy-white: #FFFFFF; /* surface */ --addy-slate: #858EA3; /* SUPPORTIVE blue-grey */ /* --------------------------------------------------------- neutral ramp (cool) */ --n-0: #FFFFFF; --n-50: #F4F5F7; --n-100: #E9EAED; --n-200: #D9DBE1; --n-300: #B8BCC6; --n-400: #858EA3; /* = slate */ --n-500: #5C5C64; --n-700: #3C3C44; --n-900: #16161A; --n-950: #0B0B0B; /* = ink */ /* ---------------------------------------------------- semantic · LIGHT theme */ --bg: var(--addy-white); /* page background */ --bg-subtle: #F4F5F7; /* alt section background */ --surface: var(--addy-white); /* card background */ --surface-2: #F4F5F7; /* inset / muted surface */ --text: #16161A; /* headings & primary text */ --text-muted: #5C5C64; /* body / secondary */ --text-faint: #8A8A90; /* captions / placeholder */ --border: #E4E6EB; /* hairline dividers */ --border-strong: #D9DBE1; /* input borders */ --primary: var(--addy-violet); --primary-hover: var(--addy-violet-hover); --on-primary: #FFFFFF; --accent: var(--addy-lime); --on-accent: var(--addy-ink); --link: var(--addy-violet); --link-hover: var(--addy-violet-hover); --focus: var(--addy-violet); --ring: 0 0 0 3px rgba(125, 57, 235, 0.20); /* status (semantic use of the palette) */ --status-sale: var(--addy-violet); --on-status-sale: #FFFFFF; /* live / for sale */ --status-sold: var(--addy-lime); --on-status-sold: #0B0B0B; /* celebrate / sold */ --status-lease: var(--addy-slate); --on-status-lease: #0B0B0B; /* tenancy / for lease */ --status-danger: #D6265F; --on-status-danger:#FFFFFF; /* errors */ --status-success: #1E9E5A; --on-status-success:#FFFFFF; /* confirmations */ /* --------------------------------------------------------------- typography */ --font-sans: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; --text-display: 4.5rem; /* 72px */ --text-h1: 3.5rem; /* 56px */ --text-h2: 2.5rem; /* 40px */ --text-h3: 1.875rem; /* 30px */ --text-h4: 1.5rem; /* 24px */ --text-h5: 1.25rem; /* 20px */ --text-body-lg: 1.125rem; /* 18px */ --text-body: 1rem; /* 16px */ --text-sm: 0.875rem; /* 14px */ --text-caption: 0.8125rem; /* 13px */ --text-eyebrow: 0.75rem; /* 12px */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --leading-tight: 0.98; --leading-snug: 1.1; --leading-normal: 1.6; --tracking-display: -0.02em; --tracking-heading: -0.012em; --tracking-eyebrow: 0.22em; /* ------------------------------------------------------------------ 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 */ --space-32: 8rem; /* 128px */ /* ------------------------------------------------------------------- radius */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---------------------------------------------------------------- elevation */ --shadow-sm: 0 1px 3px rgba(16, 16, 26, 0.08); --shadow-md: 0 4px 16px rgba(16, 16, 26, 0.10); --shadow-lg: 0 12px 32px rgba(16, 16, 26, 0.14); /* ------------------------------------------------------------------- motion */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; --dur-flip: 7.8s; /* signature logo loop */ --ease-brand: cubic-bezier(0.65, 0, 0.35, 1); /* the flip / collapse */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* enters, lifts */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* general UI */ /* ------------------------------------------------------------------- layout */ --container-max: 1240px; --container-pad: 56px; /* desktop page margin; use 20px on mobile */ --grid-columns: 12; --grid-gutter: 24px; /* breakpoints (for reference in @media): sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536 */ } /* ============================================================ DARK THEME ===== Apply to a hero/marketing section or the whole page: … OR
…
============================================================================= */ [data-theme="dark"], .dark { --bg: var(--addy-black); --bg-subtle: var(--addy-ink); --surface: var(--addy-ink); --surface-2: #141414; --text: #FFFFFF; --text-muted: var(--addy-slate); --text-faint: #6B6B6B; --border: #242424; --border-strong: #2E2E2E; --primary: var(--addy-lime); /* on black, lime is the loudest action */ --primary-hover: var(--addy-lime-pressed); --on-primary: #0B0B0B; --accent: var(--addy-violet); --on-accent: #FFFFFF; --link: var(--addy-violet-300); --link-hover: #C0A0F5; --focus: var(--addy-lime); --ring: 0 0 0 3px rgba(198, 255, 51, 0.28); --status-lease: var(--addy-slate); --on-status-lease: #0B0B0B; /* shadows read poorly on black — prefer a 1px --border instead */ --shadow-sm: none; --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } } /* ============================================================================= OPTIONAL STARTER PRIMITIVES A small, unopinionated base so tokens produce on-brand output immediately. Delete or replace with your framework's equivalents (Tailwind, etc.). ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5 { color: var(--text); font-weight: var(--weight-extrabold); letter-spacing: var(--tracking-heading); line-height: var(--leading-snug); margin: 0 0 var(--space-4); } h1 { font-size: var(--text-h1); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); } h4 { font-size: var(--text-h4); font-weight: var(--weight-bold); } h5 { font-size: var(--text-h5); font-weight: var(--weight-semibold); } .eyebrow { font-size: var(--text-eyebrow); font-weight: var(--weight-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-faint); } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* focus — always visible, brand-coloured */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); } /* buttons */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--weight-bold); font-size: var(--text-body); padding: 13px 22px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out); } .btn:disabled { opacity: 0.38; pointer-events: none; } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-hover); } .btn-accent { background: var(--accent); color: var(--on-accent); } .btn-accent:hover { transform: translateY(-2px); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover { background: var(--surface-2); } .btn-ghost { background: transparent; color: var(--primary); } .btn-sm { padding: 8px 14px; font-size: var(--text-sm); border-radius: var(--radius-sm); } .btn-lg { padding: 16px 28px; font-size: var(--text-body-lg); } /* card */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } /* input */ .input { width: 100%; font-family: var(--font-sans); font-size: var(--text-body); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 13px 14px; } .input::placeholder { color: var(--text-faint); } .input:focus { outline: none; border-color: var(--focus); box-shadow: var(--ring); } .input[aria-invalid="true"] { border-color: var(--status-danger); } /* status pill */ .tag { display: inline-flex; align-items: center; font-size: var(--text-eyebrow); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 13px; border-radius: var(--radius-pill); } .tag--sale { background: var(--status-sale); color: var(--on-status-sale); } .tag--sold { background: var(--status-sold); color: var(--on-status-sold); } .tag--lease { background: var(--status-lease); color: var(--on-status-lease); }