:root { /* * Brand palette — sourced from Figma "Color" page (node 155:11292) * "Mettevo Design System / Color". Primary is the 10-step purple scale, * gray is the 10-step neutral scale. Keep names in sync with Figma * variable names so the figma-tokens-audit skill stays useful. */ --ds-color-primary-50: #F0EEFC; --ds-color-primary-100: #DCD7F8; --ds-color-primary-200: #B8AEF1; --ds-color-primary-300: #8E80E9; --ds-color-primary-400: #5046E0; --ds-color-primary-500: #3C35CB; --ds-color-primary-600: #1700B8; --ds-color-primary-700: #1300A0; --ds-color-primary-800: #0F007F; --ds-color-primary-900: #0A0058; --ds-color-gray-0: #FFFFFF; --ds-color-gray-100: #F3F4F6; --ds-color-gray-200: #E5E7EB; --ds-color-gray-400: #D1D5DB; --ds-color-gray-500: #9CA3AF; --ds-color-gray-600: #6B7280; --ds-color-gray-700: #4B5563; --ds-color-gray-800: #1F2937; --ds-color-gray-900: #111827; --ds-color-gray-1000: #000000; --ds-color-accent-yellow: #F1B100; /* Semantic aliases */ --ds-color-bg: var(--ds-color-gray-0); --ds-color-bg-muted: var(--ds-color-primary-50); --ds-color-surface: var(--ds-color-gray-0); --ds-color-border: var(--ds-color-gray-200); --ds-color-border-soft: var(--ds-color-gray-100); --ds-color-text: var(--ds-color-gray-1000); --ds-color-text-muted: #5c5c57; /* Figma source uses a warm muted gray, not the cool gray-600 (#6B7280). Closes the M4 "subtitle color drift" finding flagged across /categories/, /listings/, /contact/, /404/ audits. */ --ds-color-text-soft: var(--ds-color-gray-500); --ds-color-link: var(--ds-color-primary-600); --ds-color-rating: var(--ds-color-accent-yellow); /* Interactive state tokens — Figma "Buttons" page (164:13016). * Primary hover lands on primary-800 (#0F007F); disabled lands on gray-500. */ --ds-color-primary-hover: var(--ds-color-primary-800); --ds-color-disabled-bg: var(--ds-color-gray-500); --ds-color-disabled-border: var(--ds-color-gray-400); --ds-color-disabled-text: var(--ds-color-gray-600); /* Typography — Figma "Typography" page (155:8188). Display = Instrument * Serif at 1.3 line-height; body = Poppins at 1.4 line-height. */ --ds-font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ds-font-display: "Instrument Serif", "Times New Roman", Georgia, serif; --ds-fs-caption: 0.625rem; /* 10px — Desktop/Label */ --ds-fs-body-s: 0.75rem; /* 12px — Desktop/Body S */ --ds-fs-body: 0.875rem; /* 14px — Desktop/Body Default */ --ds-fs-body-m: 1rem; /* 16px — Desktop/Body M */ --ds-fs-body-l: 1.125rem; /* 18px — Desktop/Body L */ --ds-fs-h5: 1.5rem; /* 24px — Desktop/H5 */ --ds-fs-h4: 2rem; /* 32px — Desktop/H4 */ --ds-fs-h3: 2.5rem; /* 40px — Desktop/H3 */ --ds-fs-h2: 3rem; /* 48px — Desktop/H2 */ --ds-fs-h1: 4rem; /* 64px — Desktop/H1 */ --ds-lh-tight: 1.3; /* Figma headings = 130% */ --ds-lh-body: 1.4; /* Figma body = 140% */ --ds-lh-prose: 1.6; /* Spacing scale (4px base) */ --ds-sp-1: 0.25rem; --ds-sp-2: 0.5rem; --ds-sp-3: 0.75rem; --ds-sp-4: 1rem; --ds-sp-5: 1.25rem; --ds-sp-6: 1.5rem; --ds-sp-8: 2rem; --ds-sp-10: 2.5rem; --ds-sp-12: 3rem; --ds-sp-15: 3.75rem; --ds-sp-20: 5rem; --ds-sp-25: 6.25rem; /* Radius */ --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 16px; --ds-radius-xl: 24px; --ds-radius-pill: 999px; /* Layout */ --ds-container-max: 1280px; --ds-gutter: 16px; /* ADR-0019: single mobile gutter floor */ --ds-container-pad: clamp(1rem, 4vw, 5rem); /* legacy: only non-container bands (search panel, 404 hero) */ /* Shadow */ --ds-shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 16px rgb(0 0 0 / 0.06); --ds-shadow-lift: 0 4px 8px rgb(0 0 0 / 0.06), 0 12px 32px rgb(0 0 0 / 0.10); } /* * Bridge — map Directorist's own CSS variables to our design tokens. * This is the file's highest-leverage block: every Directorist page (archive, * single, dashboard) inherits the brand without us overriding a single template. * If the plugin renames a variable upstream, add the new name here next to the * existing one — never remove the old name until you've confirmed no template * still references it. */ :root { --directorist-primary: var(--ds-color-primary-600); --directorist-primary-light: var(--ds-color-primary-200); --directorist-primary-lighter: var(--ds-color-primary-50); --directorist-primary-hover: color-mix(in oklab, var(--ds-color-primary-600) 90%, black); --directorist-text-color: var(--ds-color-text); --directorist-text-muted: var(--ds-color-text-muted); --directorist-text-soft: var(--ds-color-text-soft); --directorist-bg-color: var(--ds-color-bg); --directorist-border-color: var(--ds-color-border); --directorist-border-soft: var(--ds-color-border-soft); --directorist-rating-color: var(--ds-color-rating); --directorist-radius: var(--ds-radius-md); --directorist-radius-pill: var(--ds-radius-pill); --directorist-font-family: var(--ds-font-body); --directorist-heading-font: var(--ds-font-display); } /* * Parent-theme bridge — `dclassified` parent ships with its own `--color-*` * scale anchored to the Directorist green default (#17B978). Anywhere the * parent's CSS still reads those vars (header chrome, breadcrumbs, social * link hovers, etc.) it would render in green even though our `--ds-*` tokens * are purple. Remap parent vars to our tokens so legacy parent styles inherit * the Bromley brand without overriding individual selectors. */ :root { --color-primary: var(--ds-color-primary-600); --color-primary-rgb: 23, 0, 184; --color-primary-rgba: 23, 0, 184; --color-menu-hover: var(--ds-color-primary-600); --color-menu-active: var(--ds-color-primary-600); --color-submenu-hover: var(--ds-color-primary-600); --color-add-listing-button-text: var(--ds-color-gray-0); --color-add-listing-button-text-hover: var(--ds-color-gray-0); --bgcolor-add-listing-button: var(--ds-color-primary-600); --bgcolor-add-listing-button-hover: var(--ds-color-primary-800); --color-breadcrumb-link-hover: var(--ds-color-primary-600); --color-footer-link-hover: var(--ds-color-primary-600); --color-body: var(--ds-color-text); --color-border: var(--ds-color-border); --color-border-light: var(--ds-color-border-soft); } /* * Global typography reset — applies site-wide via this child theme. * * The reset runs in three steps so parent theme + Directorist plugin * inherit the Bromley fonts without us hand-overriding every selector: * 1. `html` sets the rem anchor. * 2. `body` enforces Poppins + body line-height; the `:not()` chain on * descendants reroutes any element whose stylesheet didn't set a * font-family to inherit from body, while leaving icon-font glyphs * (dashicons, Font Awesome, Directorist icons) alone. * 3. Headings + `.ds-display` get Instrument Serif at 130% line-height. */ html { font-size: 16px; } body { font-family: var(--ds-font-body); font-size: var(--ds-fs-body-m); line-height: var(--ds-lh-body); color: var(--ds-color-text); background: var(--ds-color-bg); } body :where(:not(.dashicons, [class*="fa-"], [class*="atbd-icon"], [class*="la-"], [class*="directorist-icon"], [class*="bdt-icon"], code, pre, kbd, samp)) { font-family: inherit; } h1, h2, h3, h4, h5, h6, .ds-display { font-family: var(--ds-font-display); font-weight: 400; line-height: var(--ds-lh-tight); margin: 0; } a { color: var(--ds-color-link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; } button, input, select, textarea { font-family: inherit; }