/** * Design tokens — Deluxe Properties * * Values are transcribed from the Figma variable collection * (file RHHqrxqyV6BJW5X4hGKi8Z). Figma names are kept in comments so a * designer can trace any value back to its source variable. */ :root { /* --------------------------------------------------------------- * Brand — greens * --------------------------------------------------------------- */ --dp-green-900: #00412a; /* color/spring green/13 · Kaitoke Green */ --dp-green-700: #005c3b; /* color/spring green/18 · Fun Green — primary */ --dp-green-500: #01784b; /* color/spring green/24 */ --dp-green-whatsapp: #25d366; /* color/spring green/49 */ --dp-green-700-a12: rgba(0, 92, 59, 0.12); --dp-green-700-a20: rgba(0, 92, 59, 0.2); --dp-green-700-a35: rgba(0, 92, 59, 0.35); --dp-green-900-a82: rgba(0, 65, 42, 0.82); /* --------------------------------------------------------------- * Brand — golds * --------------------------------------------------------------- */ --dp-gold: #d9b529; /* color/yellow/51 · Golden Grass */ --dp-gold-soft: #ebd98a; /* color/yellow/73 · Wild Rice */ --dp-gold-a45: rgba(217, 181, 41, 0.45); /* color/yellow/51 45% */ --dp-gold-a20: rgba(217, 181, 41, 0.2); /* --------------------------------------------------------------- * Neutrals * --------------------------------------------------------------- */ --dp-white: #ffffff; /* color/white/solid */ --dp-pampas: #fbfbf9; /* color/grey/98 · Pampas */ --dp-off-white: #f7f7f5; /* color/grey/96 · Desert Storm */ --dp-cream: #f5f1e8; /* color/grey/94 · Ecru White */ --dp-concrete: #f2f2f2; /* color/grey/95 · Concrete */ --dp-line: #e5e5e5; /* color/grey/90 · Mercury */ --dp-line-warm: #e4e4e0; /* color/grey/89 */ --dp-line-deep: #d8d8d4; /* color/grey/84 · Quill Gray */ --dp-grey-400: #9a9a9a; /* color/grey/60 · Dusty Gray */ --dp-grey-450: #8c8c88; /* color/grey/54 · Natural Gray */ --dp-grey-500: #6e6e6e; /* color/grey/43 · Dove Gray */ --dp-grey-700: #4a4a4a; /* color/grey/29 · Tundora */ --dp-ink-600: #4a554f; /* color/grey/31 · Nandor */ --dp-sage: #6e7a73; /* color/grey/45 · Xanadu — body copy on light */ --dp-ink-300: #2b2b2b; /* color/grey/17 · Mine Shaft */ --dp-ink-200: #221e1f; /* color/grey/13 · Thunder — dark sections */ --dp-ink-100: #111111; /* color/grey/7 */ --dp-header-slate: #5b5f58; /* Siam — legacy solid header ground */ /* The header sits over the hero as a translucent veil, not a solid bar. */ --dp-header-veil: rgba(34, 30, 31, 0.34); /* Thunder 34% */ --dp-danger: #c0392b; /* color/red/46 · Tall Poppy */ /* --------------------------------------------------------------- * Typography * --------------------------------------------------------------- */ /* * One family across the whole site. The Figma file mixes Playfair Display, * Jost and Inter, which left the same heading role set in different faces * from page to page; everything now resolves to Jost. * * The three token names are kept so the roles stay legible in the rules that * use them (and so a serif display face can be reintroduced by editing one * line here rather than hunting through the stylesheets). */ --dp-font-stack: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif; --dp-font-display: var(--dp-font-stack); --dp-font-sans: var(--dp-font-stack); --dp-font-body: var(--dp-font-stack); --dp-text-11: 0.6875rem; /* 11 */ --dp-text-11-5: 0.71875rem; /* 11.5 */ --dp-text-12: 0.75rem; /* 12 */ --dp-text-12-5: 0.78125rem; /* 12.5 */ --dp-text-13: 0.8125rem; /* 13 */ --dp-text-13-5: 0.84375rem; /* 13.5 */ --dp-text-14: 0.875rem; /* 14 */ --dp-text-14-5: 0.90625rem; /* 14.5 */ --dp-text-15: 0.9375rem; /* 15 */ --dp-text-16: 1rem; /* 16 */ --dp-text-17: 1.0625rem; /* 17 */ --dp-text-19-5: 1.21875rem; /* 19.5 */ --dp-text-22: 1.375rem; /* 22 */ --dp-text-26: 1.625rem; /* 26 */ --dp-text-32: 2rem; /* 32 */ --dp-text-38: 2.375rem; /* 38 */ --dp-text-40: 2.5rem; /* 40 */ --dp-text-44: 2.75rem; /* 44 */ --dp-text-46: 2.875rem; /* 46 */ --dp-text-64: 4rem; --dp-track-tight: -0.029em; /* letter spacing/-0_46 on display */ --dp-track-wide: 0.096em; /* letter spacing/1_38 at 11.5px */ --dp-track-wider: 0.22em; /* letter spacing/2_53 at 11.5px */ --dp-track-nav: 0.16em; /* letter spacing/2_08 at 13px */ /* --------------------------------------------------------------- * Spacing / radii / shape * --------------------------------------------------------------- */ --dp-space-xxs: 4px; --dp-space-xs: 8px; --dp-space-sm: 12px; --dp-space-md: 18px; --dp-space-lg: 24px; --dp-space-xl: 36px; --dp-space-2xl: 48px; --dp-space-3xl: 72px; --dp-radius-xs: 2px; --dp-radius-sm: 6px; --dp-radius-md: 14px; --dp-radius-lg: 16px; --dp-radius-pill: 999px; --dp-border: 1px; --dp-border-thick: 1.5px; /* --------------------------------------------------------------- * Elevation * --------------------------------------------------------------- */ --dp-shadow-card: 0 12px 30px -16px rgba(0, 92, 59, 0.35); --dp-shadow-feature: 0 18px 40px -18px rgba(0, 92, 59, 0.35); --dp-shadow-panel: 0 24px 60px -30px rgba(0, 65, 42, 0.45); /* --------------------------------------------------------------- * Layout * --------------------------------------------------------------- */ --dp-container: 1354px; /* 1450 design frame − 2 × 48 gutter */ --dp-container-narrow: 940px; /* width/940 */ --dp-gutter: 48px; --dp-header-h: 96px; /* --------------------------------------------------------------- * Motion * --------------------------------------------------------------- */ --dp-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dp-speed: 0.28s; /* Decelerating curve for entrances — fast out of the gate, long settle. */ --dp-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Slight overshoot, used sparingly (counters, back-to-top). */ --dp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dp-reveal-dur: 0.75s; --dp-reveal-shift: 28px; --dp-stagger-step: 90ms; } @media (max-width: 1024px) { :root { --dp-gutter: 32px; --dp-header-h: 80px; } } @media (max-width: 640px) { :root { --dp-gutter: 16px; --dp-header-h: 60px; } }