/* ========================================================================== Totality Estates — Design Tokens Single source of truth. Translated directly from the design system spec. Do not scatter hex literals elsewhere; reference these variables. ========================================================================== */ :root { /* ---- Color: accent ramp ---- */ --te-accent: #0B74F0; /* primary buttons, links, kickers, active states */ --te-accent-hover: #0959bd; /* button & link hover */ --te-accent-tint: #EAF3FE; /* selected filter chip fill (Off-Plan) */ --te-accent-tint-border:#9DC9FA; /* selected filter chip border */ --te-accent-light: #5AA3F5; /* kicker on dark backgrounds */ --te-accent-pale: #BFD9FB; /* nav hover over hero photography */ --te-accent-dot: #7EB8FF; /* floating pill indicator */ /* ---- Color: ink / greys ---- */ --te-ink: #17181A; /* body text, headings */ --te-ink-strong: #101114; /* dark sections, dark-fill chips, badge fills */ --te-ink-deepest: #0B0C0E; /* footer */ --te-body: #4C5054; /* secondary paragraphs */ --te-muted: #6B7076; /* supporting copy */ --te-muted-light: #8B8F96; /* testimonial roles, alert dismiss */ --te-label: #9CA0A6; /* uppercase labels, pagination inactive */ --te-chevron: #B7BBC0; /* row chevrons */ --te-border-hover: #C9CDD2; /* card border on hover */ --te-numeral: #E4E6E9; /* large decorative numerals, quote glyph */ --te-border: #E7E9EC; /* inputs, chips, hairline grids */ --te-divider: #ECEEF0; /* card & section borders */ --te-divider-light: #F1F2F4; /* inner dividers */ --te-fill: #F3F4F6; /* search fields, chips, hover rows */ --te-surface: #F7F8F9; /* alternating section background */ --te-surface-hover: #FAFBFB; /* table row hover */ --te-white: #FFFFFF; --te-photo-base: #1B2430; /* behind image placeholders */ /* ---- Color: signal ---- */ --te-warning: #F5B301; /* alert glyph, star ratings */ --te-error: #E5484D; /* required-field asterisk */ /* ---- On-dark alphas (white) ---- */ --te-on-dark-92: rgba(255,255,255,0.92); --te-on-dark-88: rgba(255,255,255,0.88); --te-on-dark-78: rgba(255,255,255,0.78); --te-on-dark-72: rgba(255,255,255,0.72); --te-on-dark-62: rgba(255,255,255,0.62); --te-on-dark-45: rgba(255,255,255,0.45); --te-on-dark-42: rgba(255,255,255,0.42); --te-on-dark-border-28: rgba(255,255,255,0.28); --te-on-dark-border-24: rgba(255,255,255,0.24); --te-on-dark-border-12: rgba(255,255,255,0.12); --te-on-dark-fill-08: rgba(255,255,255,0.08); --te-on-dark-fill-14: rgba(255,255,255,0.14); /* ---- Overlays / scrims ---- */ --te-scrim-hero: linear-gradient(180deg, rgba(12,18,28,0.62) 0%, rgba(12,18,28,0.30) 42%, rgba(12,18,28,0.55) 100%); --te-scrim-property: linear-gradient(180deg, rgba(10,14,20,0.34) 0%, rgba(10,14,20,0) 34%, rgba(10,14,20,0.86) 100%); --te-scrim-area: linear-gradient(180deg, rgba(10,14,20,0.10) 0%, rgba(10,14,20,0.62) 62%, rgba(10,14,20,0.88) 100%); --te-badge-fill: rgba(16,17,20,0.72); /* ---- Typography: families ---- */ --te-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --te-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---- Typography: display scale (clamped) ---- */ --te-fs-d1: clamp(34px, 6vw, 68px); /* hero H1 */ --te-fs-d2: clamp(32px, 5vw, 52px); /* page titles */ --te-fs-d3: clamp(29px, 4.4vw, 46px); --te-fs-d4: clamp(28px, 4.2vw, 44px); --te-fs-d5: clamp(27px, 4vw, 42px); --te-fs-d6: clamp(26px, 3.6vw, 38px); --te-fs-d7: clamp(25px, 3.4vw, 36px); --te-fs-d8: clamp(24px, 3.2vw, 34px); /* ---- Typography: fixed sizes (body copy is NOT clamped) ---- */ --te-fs-29: 29px; --te-fs-28: 28px; --te-fs-26: 26px; --te-fs-24: 24px; --te-fs-23: 23px; --te-fs-22: 22px; --te-fs-21: 21px; --te-fs-20: 20px; --te-fs-19: 19px; --te-fs-18: 18px; --te-fs-175: 17.5px; --te-fs-17: 17px; --te-fs-165: 16.5px; --te-fs-16: 16px; --te-fs-155: 15.5px; --te-fs-15: 15px; --te-fs-145: 14.5px; --te-fs-14: 14px; --te-fs-135: 13.5px; --te-fs-13: 13px; --te-fs-125: 12.5px; --te-fs-11: 11px; /* ---- Typography: letter-spacing (Archivo negative tracking) ---- */ --te-track-hero: -0.028em; --te-track-tight: -0.025em; --te-track-22: -0.022em; --te-track-20: -0.02em; --te-track-15: -0.015em; --te-track-label: 0.12em; /* uppercase label baseline (ranges 0.12–0.24em) */ /* ---- Line heights ---- */ --te-lh-hero: 1.06; --te-lh-display: 1.1; --te-lh-card-title: 1.35; --te-lh-body: 1.6; --te-lh-address: 1.75; /* ---- Radius ---- */ --te-r-6: 6px; /* small badges */ --te-r-7: 7px; /* badges */ --te-r-8: 8px; /* menu rows, thumbnails */ --te-r-9: 9px; /* inputs, small buttons */ --te-r-10: 10px; /* drawer buttons, mobile CTAs */ --te-r-11: 11px; /* dark contact rows, primary buttons */ --te-r-12: 12px; /* dropdown panels, blog thumbnails */ --te-r-14: 14px; /* hero search, accordion cards, tool cards */ --te-r-16: 16px; /* standard cards */ --te-r-18: 18px; /* feature cards & panels */ --te-r-pill: 999px; --te-r-round: 50%; /* ---- Shadow ---- */ --te-shadow-hero-search: 0 18px 44px rgba(8,14,24,0.28); --te-shadow-hero-cta: 0 14px 34px rgba(8,14,24,0.22); --te-shadow-dropdown: 0 18px 44px rgba(16,17,20,0.14); --te-shadow-dropdown-hero: 0 22px 50px rgba(8,14,24,0.28); --te-shadow-drawer: 0 18px 40px rgba(16,17,20,0.10); --te-shadow-drawer-hero: 0 22px 50px rgba(8,14,24,0.32); --te-shadow-segmented: 0 2px 10px rgba(16,17,20,0.04); --te-shadow-area-pill: 0 2px 12px rgba(16,17,20,0.05); --te-shadow-float-pill: 0 12px 30px rgba(11,116,240,0.35); /* ---- Fluid spacing ---- */ --te-gutter: clamp(16px, 4vw, 56px); /* section side padding */ --te-gutter-alert:clamp(38px, 6vw, 56px); /* alert bar side padding */ --te-gap-96: clamp(40px, 6vw, 96px); --te-gap-80: clamp(36px, 5vw, 80px); --te-gap-76: clamp(36px, 5vw, 76px); --te-gap-64: clamp(32px, 4.5vw, 64px); --te-gap-52: clamp(28px, 4vw, 52px); --te-nav-gap: clamp(14px, 2vw, 26px); --te-nav-gap-sm: clamp(14px, 1.6vw, 22px); --te-float-offset:clamp(12px, 3vw, 28px); /* ---- Layout ---- */ --te-content-max: 1440px; /* ---- Z-index ---- */ --te-z-float: 40; --te-z-drawer: 65; --te-z-header: 70; --te-z-dropdown: 80; --te-z-hero-drawer: 90; /* ---- Motion ---- */ --te-hover-transition: 150ms ease; }