/* DirectoryEngine base stylesheet — the "Deep Premium" (T2) design system * (design-system/prototypes/round2-t2.html + t2-pages.html + t2-palettes.html are the * authoritative spec; this file is their production implementation). * * DEEP PREMIUM: a marketplace-first look — rich DARK CHROME bands (header, hero, trust * strip, footer) over a light, airy CONTENT GROUND, with paid inventory that literally * glows in a metallic PREMIUM accent. Three commercial tiers, visually ranked: * • premium — dark, photo-rich, glowing metal (the one top slot) * • featured — warm, tinted, elevated cards (clearly paid) * • organic — cool, quiet surface rows (sorted by rating) * Bricolage Grotesque headlines, Hanken Grotesk body. Every listing carries an honest * paid-status disclosure. Real data only — no fabricated trust signals. * * ── THEMING MODEL: palette SCHEMES ──────────────────────────────────────────── * One directory renders ONE palette scheme. A scheme is a self-contained token bundle * on the SAME value structure; components read tokens and nothing else, so the whole * site re-skins by swapping the scheme with NO markup change. The shell stamps * `data-scheme=""` on (Layout.kt, from Directory.effectivePaletteScheme()); * :root carries the STEEL_GOLD defaults, and each `[data-scheme="…"]` block below * overrides ONLY custom properties. Eight schemes ship (see the [data-scheme] blocks). * * The per-directory `--de-color-brand` seed (ThemeStyle.kt) is INDEPENDENT of the scheme: * it tints the merchant WebAwesome accent and the embeddable listing badge only — NOT the * public premium metal, which must stay a coherent multi-value metallic set the scheme * owns. See ThemeStyle.themeStyle() for the rationale. * * ── OLD → NEW class map (for the page-markup rewrite; page files still on old names) ── * Shell chrome (emitted by Layout.kt, kept): .site-header .site-nav .site-brand * .trust-bar/.trust-bar-inner/.trust-stat .site-main .site-footer/.footer-* .skip-link * Hero / masthead (NEW, built in
): .hero .hero__body .kicker .crumbs .hero__meta * .trustbar (in-hero variant) .finder (home city search) * Listing tiers: old .listing-card → .row (inside .rows); old .featured-card → .fcard * (inside .featured); NEW .premium (top slot). old .listings-header → .section__head * + .tier-head + .disclosure. old .sort-control kept for the organic sort segment. * Buttons: old .button/.button-primary/.button-dark/.button-ghost KEPT for merchant; * public uses .btn + .btn--gold / .btn--solid / .btn--ghost / .btn--line / * .btn--chrome-ghost / .btn--block. * Home: .city-grid/.city-card/.city-more (finder grid); .post-grid/.post-card (blog cards). * Blog: old .blog-filter/.blog-chip → .chips/.chip; old .blog-feed* → .post-grid/.post-card. * Article: old .article-body → .prose; .article-hero (new figure hero); .byline; * .embed-listing (in-body listing); .funnel (city-links band). * Listing detail: old .listing-detail-row/.contact-block/.hours/.listing-map → .detail * + .aside + .contact-card + .contact-row + .map/.map-block + .serve-panel/.serve-block * + .claim-card + .featured-in + .ribbon + .detail__badges/.badge. * FAQ: old .city-faq → .faq (details/summary). Guides: old .related-* → .guides/.guide. * Hubs (NEW): .hub-grid/.hub-card. 404 (NEW): .error/.error__code/.error__actions. * Rating atoms: .stars (svg row, --de-star) + .score. Kicker: .kicker (old .de-kicker kept). * * Mobile-first; the desktop compaction block sits at the file bottom. Self-hosted fonts are * declared first — never any third-party origin. Licensing: static/fonts/OFL.md. */ /* ── Self-hosted web fonts ──────────────────────────────────────────────────── * Two grotesques, both the Google-Fonts Latin subset, served first-party from * /static/fonts — ZERO third-party font requests at runtime: * • Bricolage Grotesque — display/headings, the "Deep Premium" voice. * • Hanken Grotesk — body/UI, a highly legible humanist sans. * Each bundled woff2 is a VARIABLE face covering its weight axis, so ONE @font-face per * family exposes the whole range (both 400–800) via font-weight ranges. Relative url() * resolves against this file's served path (/static/css/app.css) -> /static/fonts/*, * inheriting the same immutable, fingerprint-cached /static route. font-display:swap * paints immediately in the metric-matched fallback (below), then swaps. */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/bricolage-grotesque-latin.woff2) format("woff2"); } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/hanken-grotesk-latin.woff2) format("woff2"); } /* Metric-matched fallback faces (CLS control): local() "Fallback" faces re-map Arial onto * roughly the same box as each web font via size-adjust + ascent/descent overrides, so the * swap is far less jarring. Overrides computed from the shipped woff2 (x-height matched to * Arial's 0.519em, typo asc/desc against the adjusted em): Bricolage x-height 52.8% → * size-adjust 98%; Hanken x-height 49.3% → size-adjust 105%. */ @font-face { font-family: "Bricolage Grotesque Fallback"; src: local("Arial"); ascent-override: 95%; descent-override: 27%; line-gap-override: 0%; size-adjust: 98%; } @font-face { font-family: "Hanken Grotesk Fallback"; src: local("Arial"); ascent-override: 95%; descent-override: 29%; line-gap-override: 0%; size-adjust: 105%; } /* ══════════════════════════════════════════════════════════════════════════════ * TOKENS — :root carries the SHARED foundation (type, spacing, radius, shadows, * semantics) plus the STEEL_GOLD scheme as the default palette. Each [data-scheme] * block further down overrides ONLY the palette custom properties. * ════════════════════════════════════════════════════════════════════════════ */ :root { /* ── Type ───────────────────────────────────────────────────────────────── */ --de-font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --de-font-body: "Hanken Grotesk", "Hanken Grotesk Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --de-font-sans: var(--de-font-body); /* legacy alias */ --de-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --de-font-size-base: 1rem; /* 16px body — base of the modular type scale */ --de-line-height: 1.55; /* ── Modular type scale (matches t2-pages.html) ─────────────────────────── * ONE ramp from 16px body; every heading maps to a fixed step (fluid clamp for the * three display steps). Consistent mapping — h1/h2/h3/body/small never drift per page: * xs 11.5px kicker / eyebrow / meta labels * sm 13px secondary meta, counts, disclosures * md 16px BODY (= --de-font-size-base), buttons * lg ~17.6px H3, card/provider names, lead-ins * xl 22–30px H2 (section heads) * 2xl 29–42px H1 (page / article / listing-detail) * 3xl 34–56px hero H1 (the one oversized display step) */ --de-text-xs: 0.72rem; --de-text-sm: 0.82rem; --de-text-md: 1rem; --de-text-lg: 1.1rem; --de-text-xl: clamp(1.4rem, 2.6vw, 1.85rem); /* H2 — section heads */ --de-text-2xl: clamp(1.8rem, 4vw, 2.6rem); /* H1 — page / article / detail */ --de-text-3xl: clamp(2.1rem, 5.4vw, 3.5rem); /* hero H1 */ --de-tracking-display: -0.02em; --de-tracking-kicker: 0.14em; --de-tracking-label: 0.1em; /* ── Spacing — T2 4pt scale (used by the redesign's public components) ────── * NOTE: the legacy merchant rhythm below keeps its own --de-space-* scale so the * merchant/claim/portal surfaces are untouched by the redesign. New public * components use --de-s-*. */ --de-s-1: 0.25rem; --de-s-2: 0.5rem; --de-s-3: 0.75rem; --de-s-4: 1rem; --de-s-5: 1.5rem; --de-s-6: 2rem; --de-s-7: 3rem; --de-s-8: 4rem; --de-s-9: 6rem; /* Legacy merchant spacing rhythm (claim form, portal, WA surfaces) — DO NOT retune; * merchant rules depend on these exact values. */ --de-space-1: 0.25rem; --de-space-2: 0.5rem; --de-space-3: 1rem; --de-space-4: 1.5rem; --de-space-5: 2.5rem; --de-space-6: 4rem; --de-space-7: 6rem; /* ── Radius ─────────────────────────────────────────────────────────────── */ --de-radius-sm: 10px; --de-radius: 14px; --de-radius-lg: 18px; --de-radius-xl: 24px; --de-radius-pill: 999px; /* legacy alias used by a couple merchant rules */ --de-image-radius: var(--de-radius-lg); /* ── Layout ─────────────────────────────────────────────────────────────── */ --de-content-max-width: 70rem; /* 1120px, matches the prototype */ /* ONE inline page gutter shared by EVERY container that sits on the content column — * .site-nav, .trust-bar-inner, .site-main, .hero__body, footer — so every left text edge * lines up exactly. No block gets its own ad-hoc inline inset. */ --de-gutter: var(--de-s-5); /* 24px inline page padding */ --de-tap-size: 2.75rem; /* 44px touch floor */ /* ── Vertical rhythm (flow scale) — COMPACT (utilitarian-premium, not airy) ── * ONE scale governs every page seam so spacing reads intentional and consistent: * the page top pad, section↔section gaps, hero→content, prose→section, tier heads, * heading→content, and last-content→footer all resolve to these. Scaled DOWN at the * mobile breakpoint (bottom of file) by redefining just these four — every consumer * follows automatically, so no seam is retuned by hand per width. */ --de-flow-section: var(--de-s-7); /* 48px — major section gap, hero→content, page top */ --de-flow-subsection: var(--de-s-6); /* 32px — tier heads, prose H2, mid-flow breaks */ --de-flow-heading: var(--de-s-5); /* 24px — a section heading → its content */ --de-flow-page-bottom: var(--de-s-8); /* 64px — last content → footer (never cramped) */ /* ══ PALETTE — STEEL_GOLD defaults (the [data-scheme] blocks override these) ══ */ /* Dark chrome — header / hero / trust strip / footer bands */ --de-chrome: #141c28; --de-chrome-2: #0c121c; --de-on-chrome: #eaf1fa; --de-on-chrome-muted: #9db1cc; /* Metallic PREMIUM accent — the "glow" on paid inventory */ --de-gold: #f2b33d; --de-gold-2: #ffd074; --de-gold-ink: #2a2205; --de-gold-soft: #fbeecb; --de-gold-border: #f0b74d; --de-gold-glow: rgba(242, 179, 61, 0.42); /* Featured tier — warm/tinted elevated cards */ --de-featured-tint: #fdf7ea; --de-featured-tint-2: #fefbf3; --de-featured-border: #efe0bd; --de-featured-accent: #e8b23c; --de-featured-label-bg: #f6eccf; --de-featured-label-ink: #785717; /* Light content ground + surfaces + ink ramp */ --de-ground: #f3f6fa; --de-surface: #ffffff; --de-surface-2: #f6f9fc; --de-line: #e2e8f1; --de-line-strong: #cfd8e6; --de-ink: #131e2b; --de-ink-muted: #55606f; --de-ink-faint: #8a95a4; /* Shared semantics (deliberately constant across schemes) */ --de-star: #ef9f0a; --de-color-danger: #b42318; --de-color-danger-bg: #fdece9; --de-color-danger-tint: var(--de-color-danger-bg); --de-color-success: #166c3e; --de-color-success-bg: #e7f4ec; --de-color-warning: #8a5a00; --de-color-warning-bg: #fdf3e2; /* ── Shadows ────────────────────────────────────────────────────────────── */ --de-shadow-1: 0 1px 2px rgb(15 20 35 / 0.04), 0 2px 8px rgb(15 20 35 / 0.05); --de-shadow-2: 0 2px 6px rgb(15 20 35 / 0.06), 0 14px 30px rgb(15 20 35 / 0.10); --de-shadow-warm: 0 2px 6px rgb(120 84 20 / 0.06), 0 16px 34px rgb(120 84 20 / 0.12); --de-shadow-chrome: 0 18px 44px rgb(8 12 22 / 0.24); --de-premium-glow: 0 0 0 1.5px var(--de-gold-border), 0 26px 60px -20px var(--de-gold-glow), 0 12px 34px rgb(8 12 22 / 0.30); /* legacy shadow aliases (merchant cards) */ --de-shadow-sm: var(--de-shadow-1); --de-shadow-md: var(--de-shadow-2); --de-shadow-lg: var(--de-shadow-chrome); /* ── Focus ring (a11y — visible on every interactive control) ────────────── */ --de-focus-ring: 0 0 0 3px color-mix(in srgb, var(--de-chrome) 40%, transparent); /* ══ LEGACY ALIASES — keep the merchant/claim/portal/WebAwesome + badge layer * working. These map the old --de-color-*/--de-accent* names onto the new T2 * tokens so those (untouched) surfaces re-skin coherently with the scheme. * The merchant primary action is CHROME (dark) — always high-contrast against * --de-on-chrome — so a scheme's metallic accent never lands white text on gold. ══ */ --de-accent: var(--de-chrome); --de-accent-strong: color-mix(in oklab, var(--de-chrome), #000 22%); --de-accent-ink: var(--de-chrome); --de-accent-tint: color-mix(in oklab, var(--de-chrome) 8%, var(--de-surface)); --de-accent-tint-2: color-mix(in oklab, var(--de-chrome) 4%, var(--de-surface)); --de-accent-wash: var(--de-accent-tint-2); --de-accent-border: color-mix(in oklab, var(--de-chrome) 20%, var(--de-line)); /* The per-directory BRAND SEED — badge SVG + merchant brand touches only (see the * header note). Defaults to the STEEL_GOLD premium gold; ThemeStyle overrides it * when a directory carries a valid brandColor. Kept in sync with * ThemeStyle.STYLESHEET_DEFAULT_ACCENT. */ --de-color-brand: #f2b33d; --de-color-brand-contrast: var(--de-on-chrome); --de-color-brand-ink: var(--de-accent-strong); --de-color-brand-tint: var(--de-gold-soft); --de-color-brand-tint-2: var(--de-accent-tint-2); --de-color-brand-strong: var(--de-accent-strong); --de-color-brand-wash: var(--de-accent-wash); --de-color-brand-border: var(--de-accent-border); --de-color-ink: var(--de-chrome); /* structural dark (buttons, skip, error h1) */ --de-color-body: var(--de-ink); --de-color-text: var(--de-ink); --de-color-text-muted: var(--de-ink-muted); --de-color-text-subtle: var(--de-ink-faint); --de-color-on-navy: var(--de-on-chrome-muted); --de-color-on-navy-strong: var(--de-on-chrome); --de-color-paper: var(--de-surface); --de-color-surface: var(--de-surface); --de-color-surface-alt: var(--de-surface-2); --de-color-surface-sunk: color-mix(in oklab, var(--de-chrome) 6%, var(--de-surface)); --de-color-border: var(--de-line); --de-color-hairline: var(--de-line); --de-color-border-strong: var(--de-line-strong); --de-color-star: var(--de-star); --de-color-star-empty: var(--de-line-strong); --de-hairline: 1px solid var(--de-line); } /* ══════════════════════════════════════════════════════════════════════════════ * PALETTE SCHEMES — one directory = one scheme. Each block overrides ONLY custom * properties; hex values copied verbatim from design-system/prototypes/t2-palettes.html. * Slugs match PaletteScheme.slug (ThemeStyle.kt). * ════════════════════════════════════════════════════════════════════════════ */ /* 1 · steel-gold — home trades (gutters / roofing / plumbing) */ [data-scheme="steel-gold"] { --de-chrome: #141c28; --de-chrome-2: #0c121c; --de-on-chrome: #eaf1fa; --de-on-chrome-muted: #9db1cc; --de-gold: #f2b33d; --de-gold-2: #ffd074; --de-gold-ink: #2a2205; --de-gold-soft: #fbeecb; --de-gold-border: #f0b74d; --de-gold-glow: rgba(242, 179, 61, 0.42); --de-featured-tint: #fdf7ea; --de-featured-tint-2: #fefbf3; --de-featured-border: #efe0bd; --de-featured-accent: #e8b23c; --de-featured-label-bg: #f6eccf; --de-featured-label-ink: #785717; --de-ground: #f3f6fa; --de-surface: #ffffff; --de-surface-2: #f6f9fc; --de-line: #e2e8f1; --de-line-strong: #cfd8e6; --de-ink: #131e2b; --de-ink-muted: #55606f; --de-ink-faint: #8a95a4; --de-star: #ef9f0a; } /* 2 · plum-rosegold — beauty / medspa / botox / laser */ [data-scheme="plum-rosegold"] { --de-chrome: #1d1320; --de-chrome-2: #130b16; --de-on-chrome: #f6eaf1; --de-on-chrome-muted: #c7a6bd; --de-gold: #e2ac8b; --de-gold-2: #f2c8a9; --de-gold-ink: #3a1c1a; --de-gold-soft: #f8e6db; --de-gold-border: #e6b499; --de-gold-glow: rgba(227, 172, 139, 0.42); --de-featured-tint: #fdf3f0; --de-featured-tint-2: #fef8f5; --de-featured-border: #f1ddd4; --de-featured-accent: #dca787; --de-featured-label-bg: #f7e6de; --de-featured-label-ink: #8a4a37; --de-ground: #faf6f8; --de-surface: #ffffff; --de-surface-2: #fdf9fb; --de-line: #efe4ea; --de-line-strong: #e1cfd9; --de-ink: #221019; --de-ink-muted: #695560; --de-ink-faint: #9a8791; --de-star: #d98a3a; } /* 3 · forest-brass — outdoor / landscaping / tree care */ [data-scheme="forest-brass"] { --de-chrome: #16241b; --de-chrome-2: #0c1610; --de-on-chrome: #e9f2ea; --de-on-chrome-muted: #9db8a7; --de-gold: #c39a45; --de-gold-2: #e5c877; --de-gold-ink: #2a2308; --de-gold-soft: #f2ecd5; --de-gold-border: #caa353; --de-gold-glow: rgba(195, 154, 69, 0.40); --de-featured-tint: #f8f5e9; --de-featured-tint-2: #fcfbf1; --de-featured-border: #e6ddc0; --de-featured-accent: #bf9c4c; --de-featured-label-bg: #ece3ca; --de-featured-label-ink: #675621; --de-ground: #f1f6f2; --de-surface: #ffffff; --de-surface-2: #f5f9f5; --de-line: #e0e9e2; --de-line-strong: #cad9cf; --de-ink: #142019; --de-ink-muted: #55635b; --de-ink-faint: #869489; --de-star: #d5a63a; } /* 4 · ocean-silver — pools / marine / cleaning */ [data-scheme="ocean-silver"] { --de-chrome: #10202b; --de-chrome-2: #08151f; --de-on-chrome: #e6f1f6; --de-on-chrome-muted: #97b4c2; --de-gold: #a9bac6; --de-gold-2: #d8e4ec; --de-gold-ink: #182833; --de-gold-soft: #eef3f6; --de-gold-border: #bccbd6; --de-gold-glow: rgba(169, 186, 198, 0.45); --de-featured-tint: #eef5f8; --de-featured-tint-2: #f6fafc; --de-featured-border: #d5e2ea; --de-featured-accent: #8fa7b6; --de-featured-label-bg: #e1ecf2; --de-featured-label-ink: #3c586a; --de-ground: #eff5f8; --de-surface: #ffffff; --de-surface-2: #f4f9fb; --de-line: #dde8ee; --de-line-strong: #c6d6df; --de-ink: #101c26; --de-ink-muted: #506069; --de-ink-faint: #86969f; --de-star: #e0932e; } /* 5 · clay-copper — masonry / renovation / southwest trades */ [data-scheme="clay-copper"] { --de-chrome: #241811; --de-chrome-2: #17100a; --de-on-chrome: #f4e9e0; --de-on-chrome-muted: #c2a695; --de-gold: #c47a4a; --de-gold-2: #e2a274; --de-gold-ink: #2e1608; --de-gold-soft: #f4e2d4; --de-gold-border: #c9814f; --de-gold-glow: rgba(196, 122, 74, 0.42); --de-featured-tint: #fbf1e9; --de-featured-tint-2: #fdf8f3; --de-featured-border: #ecdccc; --de-featured-accent: #c47c4d; --de-featured-label-bg: #f2e0d1; --de-featured-label-ink: #7c4a26; --de-ground: #f7f1ec; --de-surface: #ffffff; --de-surface-2: #faf5f1; --de-line: #ebe0d8; --de-line-strong: #dbccc0; --de-ink: #241610; --de-ink-muted: #665649; --de-ink-faint: #988576; --de-star: #d5822f; } /* 6 · sage-gold — yoga / wellness / holistic */ [data-scheme="sage-gold"] { --de-chrome: #232b26; --de-chrome-2: #161c18; --de-on-chrome: #ecf1ec; --de-on-chrome-muted: #adc0b3; --de-gold: #c2a768; --de-gold-2: #e5d09a; --de-gold-ink: #2c2410; --de-gold-soft: #f3edd9; --de-gold-border: #c9b06f; --de-gold-glow: rgba(194, 167, 104, 0.38); --de-featured-tint: #f6f4ea; --de-featured-tint-2: #fbfaf2; --de-featured-border: #e5dfc8; --de-featured-accent: #bfa565; --de-featured-label-bg: #ebe4ce; --de-featured-label-ink: #695a2b; --de-ground: #f2f4ef; --de-surface: #ffffff; --de-surface-2: #f6f9f3; --de-line: #e3e8e0; --de-line-strong: #cdd6cb; --de-ink: #1a211b; --de-ink-muted: #58635b; --de-ink-faint: #889089; --de-star: #d3a83f; } /* 7 · navy-platinum — legal / financial / professional */ [data-scheme="navy-platinum"] { --de-chrome: #141d2e; --de-chrome-2: #0a1120; --de-on-chrome: #e9eef6; --de-on-chrome-muted: #9fb0c8; --de-gold: #a7b3c6; --de-gold-2: #d8e1ee; --de-gold-ink: #172136; --de-gold-soft: #eceff5; --de-gold-border: #bac6d8; --de-gold-glow: rgba(167, 179, 198, 0.45); --de-featured-tint: #eef1f6; --de-featured-tint-2: #f6f8fb; --de-featured-border: #d8dfea; --de-featured-accent: #93a2ba; --de-featured-label-bg: #e3e8f1; --de-featured-label-ink: #3e4c65; --de-ground: #eff2f7; --de-surface: #ffffff; --de-surface-2: #f5f7fb; --de-line: #dfe4ee; --de-line-strong: #c9d1e0; --de-ink: #101828; --de-ink-muted: #4f5a6d; --de-ink-faint: #8590a2; --de-star: #d99a2c; } /* 8 · teal-pearl — dental / medical / clinics */ [data-scheme="teal-pearl"] { --de-chrome: #0e2830; --de-chrome-2: #071a20; --de-on-chrome: #e6f2f2; --de-on-chrome-muted: #98bcbc; --de-gold: #c3bcab; --de-gold-2: #e9e3d4; --de-gold-ink: #23281f; --de-gold-soft: #f3f0e8; --de-gold-border: #cbc4b4; --de-gold-glow: rgba(195, 188, 171, 0.42); --de-featured-tint: #eef5f4; --de-featured-tint-2: #f6faf9; --de-featured-border: #d7e6e3; --de-featured-accent: #9ec1bd; --de-featured-label-bg: #e2efec; --de-featured-label-ink: #356059; --de-ground: #eef5f4; --de-surface: #ffffff; --de-surface-2: #f4faf9; --de-line: #dcebe8; --de-line-strong: #c6dcd8; --de-ink: #0f2226; --de-ink-muted: #4e6163; --de-ink-faint: #849898; --de-star: #e0a234; } /* ══════════════════════════════════════════════════════════════════════════════ * BASE * ════════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--de-font-body); font-size: var(--de-font-size-base); line-height: var(--de-line-height); color: var(--de-ink); background: var(--de-ground); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern" 1, "liga" 1; } /* Headings own the space BELOW them (margin-top 0 by default). */ h1, h2, h3, h4, h5, h6, p { margin: 0 0 var(--de-s-4); } h1, h2, h3, h4 { color: var(--de-ink); font-family: var(--de-font-display); font-weight: 700; line-height: 1.1; letter-spacing: var(--de-tracking-display); text-wrap: balance; } h1 { font-size: var(--de-text-2xl); font-weight: 800; line-height: 1.08; } h2 { font-size: var(--de-text-xl); font-weight: 700; } h3 { font-size: var(--de-text-lg); font-weight: 700; letter-spacing: -0.01em; } h4 { font-family: var(--de-font-body); font-size: var(--de-text-md); font-weight: 600; letter-spacing: 0; } h5, h6 { font-family: var(--de-font-body); font-size: var(--de-text-sm); font-weight: 600; } h6 { color: var(--de-ink-muted); } a { color: var(--de-accent-strong); text-underline-offset: 0.2em; text-decoration-thickness: from-font; text-decoration-color: color-mix(in oklab, currentColor 30%, transparent); } a:hover { text-decoration-color: currentColor; } img { max-width: 100%; } /* Tabular figures for counts / ratings / prices. */ .city-row-count, .listing-rating, .sponsor-price, .trust-stat, .score { font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--de-chrome); outline-offset: 2px; border-radius: var(--de-radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Skip link — visually hidden until focused. */ .skip-link { position: absolute; left: var(--de-s-2); top: var(--de-s-2); display: inline-flex; align-items: center; min-height: var(--de-tap-size); padding: var(--de-s-2) var(--de-s-4); background: var(--de-chrome); color: var(--de-on-chrome); border-radius: var(--de-radius); transform: translateY(-200%); transition: transform 0.15s ease-in-out; z-index: 100; } .skip-link:focus { transform: translateY(0); } /* ══════════════════════════════════════════════════════════════════════════════ * SHARED ATOMS — kicker, stars/score, buttons (public .btn), badges * ════════════════════════════════════════════════════════════════════════════ */ /* Kicker — the small letter-spaced uppercase label over a headline. In the T2 system the * kicker only ever sits on a DARK band (home/city/blog/sponsor hero, article hero), so it is * GOLD by default (AA on --de-chrome) with a gold leading rule — matching the prototype. For a * label on the LIGHT ground use `.eyebrow` (dark ink) instead; the legacy `.de-kicker` keeps the * old light-ground ink for pages not yet migrated. */ .kicker, .de-kicker { display: inline-flex; align-items: center; gap: var(--de-s-2); font-family: var(--de-font-display); font-weight: 700; font-size: var(--de-text-xs); line-height: 1; letter-spacing: var(--de-tracking-kicker); text-transform: uppercase; margin: 0 0 var(--de-s-3); } .kicker { color: var(--de-gold-2); } .kicker--gold { color: var(--de-gold-2); } /* explicit alias; same as the default */ .de-kicker { color: color-mix(in srgb, var(--de-chrome) 62%, var(--de-ink)); } /* legacy light-ground */ .kicker::before { content: ""; width: 26px; height: 2px; flex: none; background: var(--de-gold); border-radius: 2px; } .de-kicker::before { display: none; } /* legacy kicker: no leading rule */ /* Section eyebrow used above section heads (no leading rule). */ .eyebrow { display: block; font-family: var(--de-font-display); font-weight: 700; font-size: var(--de-text-xs); letter-spacing: 0.13em; text-transform: uppercase; color: color-mix(in srgb, var(--de-chrome) 62%, var(--de-ink)); margin-bottom: var(--de-s-2); } /* Rating atoms (SVG star row + numeric score). */ .stars { display: inline-flex; gap: 1px; color: var(--de-star); line-height: 0; } .stars svg { width: 14px; height: 14px; display: block; fill: currentColor; } .score { font-family: var(--de-font-display); font-weight: 700; } .score .star { color: var(--de-star); } /* ── Public buttons (.btn) — the T2 action set ─────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-family: var(--de-font-display); font-weight: 600; font-size: 0.88rem; padding: 0.62rem 1.1rem; border-radius: var(--de-radius-pill); border: 1px solid transparent; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; } .btn svg { width: 15px; height: 15px; flex: none; } .btn:active { transform: translateY(1px); } .btn--block { width: 100%; } /* GOLD — the highest-intent CTA, reserved for the premium slot / hero search. */ .btn--gold { background: linear-gradient(150deg, var(--de-gold-2), var(--de-gold)); color: var(--de-gold-ink); box-shadow: 0 6px 18px var(--de-gold-glow); } .btn--gold:hover { box-shadow: 0 8px 24px var(--de-gold-glow); transform: translateY(-1px); } /* SOLID — strong dark chrome CTA (featured cards, secondary conversions). */ .btn--solid { background: var(--de-chrome); color: var(--de-on-chrome); } .btn--solid:hover { background: var(--de-chrome-2); color: var(--de-on-chrome); } /* CHROME-GHOST — secondary action inside the dark premium card. */ .btn--chrome-ghost { background: rgb(255 255 255 / 0.06); color: var(--de-on-chrome); border-color: rgb(255 255 255 / 0.18); } .btn--chrome-ghost:hover { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.3); } /* GHOST / LINE — quiet outline on the light ground. */ .btn--ghost, .btn--line { background: transparent; color: var(--de-ink); border-color: var(--de-line-strong); } .btn--ghost:hover, .btn--line:hover { border-color: var(--de-chrome); color: var(--de-chrome); } /* ══════════════════════════════════════════════════════════════════════════════ * SHELL CHROME — header / nav / trust strip / footer (emitted by Layout.kt) * ════════════════════════════════════════════════════════════════════════════ */ .site-header { background: var(--de-chrome); color: var(--de-on-chrome); position: relative; z-index: 20; } .site-nav { max-width: var(--de-content-max-width); margin: 0 auto; padding: var(--de-s-4) var(--de-gutter); display: flex; align-items: center; gap: var(--de-s-4); flex-wrap: wrap; } .site-brand { display: inline-flex; align-items: center; gap: var(--de-s-3); font-family: var(--de-font-display); font-weight: 800; font-size: 1.16rem; letter-spacing: -0.02em; color: var(--de-on-chrome); text-decoration: none; white-space: nowrap; margin-right: auto; } /* Brand mark: the Phosphor glyph in a rounded metallic tile (gold gradient, dark ink). */ .site-brand .ph-fill { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; flex: none; border-radius: 11px; background: linear-gradient(150deg, var(--de-gold-2), var(--de-gold)); color: var(--de-gold-ink); font-size: 1.35rem; line-height: 1; box-shadow: 0 4px 14px var(--de-gold-glow); } .site-brand:hover { color: #fff; text-decoration: none; } /* Header layout: brand + nav + CTA share one row while it fits. Below 44rem the brand takes its * own row and the WHOLE nav group (Cities dropdown + links + CTA) drops to a second row together, * so the gold CTA never dangles alone on a wrapped line. row-gap keeps the two rows breathing. */ .site-nav { row-gap: var(--de-s-3); } @media (max-width: 44rem) { .site-brand { flex: 1 1 100%; margin-right: 0; } } /* Nav items + the Cities disclosure share one treatment on the dark band. */ .site-nav > a:not(.site-brand), .nav-dropdown > summary { font-family: var(--de-font-display); font-weight: 600; font-size: 0.9rem; color: var(--de-on-chrome); opacity: 0.85; text-decoration: none; padding: 0.5rem 0.9rem; border-radius: var(--de-radius-pill); transition: opacity 0.15s, background 0.15s; } .site-nav > a:not(.site-brand):hover, .nav-dropdown > summary:hover { opacity: 1; background: rgb(255 255 255 / 0.09); } /* A "Feature your business" style CTA link in the nav (gold). */ .site-nav > a.nav-cta { background: linear-gradient(150deg, var(--de-gold-2), var(--de-gold)); color: var(--de-gold-ink); opacity: 1; } /* ── Nav dropdown (Cities) — JS-free details; opens a light popover ──────────── */ .nav-dropdown { position: relative; } .nav-dropdown > summary { cursor: pointer; list-style: none; user-select: none; display: inline-flex; align-items: center; gap: var(--de-s-1); } .nav-dropdown > summary::-webkit-details-marker { display: none; } .nav-dropdown > summary::after { content: "\25BE"; font-size: 0.72em; opacity: 0.7; } .nav-dropdown-panel { z-index: 50; margin: var(--de-s-2) 0 0; padding: var(--de-s-2); list-style: none; max-height: 60vh; overflow-y: auto; background: var(--de-surface); border: 1px solid var(--de-line); border-radius: var(--de-radius); box-shadow: var(--de-shadow-2); } .nav-dropdown[open] { flex: 1 1 100%; } @media (min-width: 48rem) { .nav-dropdown[open] { flex: none; } .nav-dropdown-panel { position: absolute; right: 0; min-width: 16rem; } } .nav-dropdown-panel a { display: flex; align-items: center; min-height: var(--de-tap-size); padding: var(--de-s-1) var(--de-s-3); color: var(--de-ink); text-decoration: none; border-radius: var(--de-radius-sm); } .nav-dropdown-panel a:hover { background: var(--de-surface-2); } /* ── Trust strip — a thin dark band continuing the header chrome, one honest stat ── */ .trust-bar { background: var(--de-chrome); color: var(--de-on-chrome-muted); border-top: 1px solid rgb(255 255 255 / 0.09); box-shadow: var(--de-shadow-chrome); } .trust-bar-inner { max-width: var(--de-content-max-width); margin: 0 auto; padding: var(--de-s-3) var(--de-gutter); display: flex; flex-wrap: wrap; gap: var(--de-s-2) var(--de-s-3); align-items: center; font-size: 0.86rem; } .trust-stat { display: inline-flex; align-items: center; gap: var(--de-s-2); font-weight: 500; } .trust-stat strong, .trust-stat b { color: var(--de-on-chrome); font-weight: 700; } /* Leading metallic check chip: a gold gradient disc with a dark check drawn on top. The check * stroke is a hardcoded near-black (data-uri can't read a token); it reads AA on every scheme's * metallic fill (all --de-gold-ink values are very dark). */ .trust-stat::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23241a08' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"), linear-gradient(150deg, var(--de-gold-2), var(--de-gold)); background-repeat: no-repeat; background-position: center; background-size: 62%, cover; } .site-main { max-width: var(--de-content-max-width); margin: 0 auto; padding: var(--de-flow-section) var(--de-gutter) var(--de-flow-page-bottom); min-height: 60vh; } .site-footer { background: var(--de-chrome-2); color: var(--de-on-chrome); padding: var(--de-s-7) var(--de-gutter) var(--de-s-6); font-size: 0.88rem; } .site-footer > * { max-width: var(--de-content-max-width); margin-left: auto; margin-right: auto; } .footer-top { display: grid; grid-template-columns: 1fr; gap: var(--de-s-5); padding-bottom: var(--de-s-6); border-bottom: 1px solid rgb(255 255 255 / 0.12); } @media (min-width: 40rem) { .footer-top { grid-template-columns: 1.4fr 1fr; align-items: start; } } .footer-brand { display: flex; flex-direction: column; gap: var(--de-s-3); } .footer-brand .site-brand { color: var(--de-on-chrome); } .footer-brandname { font-family: var(--de-font-display); font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--de-on-chrome); } .footer-tagline { color: var(--de-on-chrome-muted); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--de-s-2) var(--de-s-5); align-content: start; } .footer-links a { color: var(--de-on-chrome-muted); text-decoration: none; font-weight: 500; } .footer-links a:hover { color: var(--de-on-chrome); text-decoration: underline; text-underline-offset: 0.2em; } .footer-links a.accent { color: var(--de-gold-2); font-weight: 700; } .site-footer > span { display: block; margin-top: var(--de-s-5); padding-top: var(--de-s-4); border-top: 1px solid rgb(255 255 255 / 0.12); color: var(--de-on-chrome-muted); font-size: 0.8rem; } /* ══════════════════════════════════════════════════════════════════════════════ * HERO BAND (built in
by the page) — chrome + photo under a scrim * ════════════════════════════════════════════════════════════════════════════ */ /* FULL-BLEED chrome BAND (not an inset card): rendered by the shell as a sibling between the * trust bar and
, so it spans the full viewport width with no breakout math. NO * border-radius / NO card shadow — it's a band that continues the header/trust-bar chrome. The * hero→content gap is .site-main's own top padding (--de-flow-section), so no margin here. */ .hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--de-chrome), var(--de-chrome-2)); color: var(--de-on-chrome); /* --de-hero-image is set inline per page (url(...)); defaults to none. */ } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 150% at 90% -20%, color-mix(in srgb, var(--de-gold) 24%, transparent), transparent 52%), linear-gradient(100deg, color-mix(in srgb, var(--de-chrome) 94%, transparent) 0%, color-mix(in srgb, var(--de-chrome) 84%, transparent) 44%, color-mix(in srgb, var(--de-chrome-2) 55%, transparent) 100%), var(--de-hero-image, none) center 30% / cover no-repeat, var(--de-chrome); } /* Directory hero photo credit (V36) — same treatment as .premium__credit / .article-hero .credit, * pinned bottom-right so it clears the left-aligned hero content. Only rendered when the directory * has a hero photo with a resolved credit. */ .hero .credit { position: absolute; right: var(--de-s-4); bottom: var(--de-s-3); font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: rgb(255 255 255 / 0.62); } /* The hero's inner content sits on the SHARED content column (same max-width + gutter as * .site-main), so the H1/kicker/finder left edges line up exactly with the intro + sections * below the band. Compact vertical padding (utilitarian-premium). */ .hero__body { max-width: var(--de-content-max-width); margin-inline: auto; padding: var(--de-s-7) var(--de-gutter); } .hero h1 { font-size: var(--de-text-3xl); font-weight: 800; color: #fff; } .hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem var(--de-s-3); margin-top: var(--de-s-5); color: var(--de-on-chrome-muted); font-size: 0.84rem; font-weight: 500; } .hero__meta .sep, .crumbs .sep { opacity: 0.5; } .hero__credit { position: absolute; right: var(--de-s-4); bottom: var(--de-s-3); z-index: 1; font-size: 0.64rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: color-mix(in srgb, var(--de-on-chrome) 60%, transparent); } /* Breadcrumbs — on chrome (in hero / dark sub-band) or on ground (.crumbs--ink). */ .crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.82rem; color: var(--de-on-chrome-muted); font-weight: 500; } .crumbs a { color: var(--de-on-chrome-muted); text-decoration: none; transition: color 0.15s; } .crumbs a:hover { color: var(--de-on-chrome); } .crumbs [aria-current] { color: var(--de-on-chrome); } /* In-hero trust strip variant (a thin ruled line inside the hero band). */ .trustbar { border-top: 1px solid rgb(255 255 255 / 0.09); border-bottom: 1px solid rgb(255 255 255 / 0.09); } .trustbar__inner { max-width: var(--de-content-max-width); margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--de-s-2) var(--de-s-3); padding: var(--de-s-3) var(--de-gutter); font-size: 0.86rem; color: var(--de-on-chrome-muted); } .trustbar__inner strong { color: var(--de-on-chrome); font-weight: 700; } /* Home city finder (search on the dark band). */ .finder { display: flex; gap: var(--de-s-2); background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.16); padding: var(--de-s-2); border-radius: var(--de-radius-pill); max-width: 560px; margin-top: var(--de-s-5); } .finder svg.search { width: 20px; height: 20px; color: var(--de-on-chrome-muted); align-self: center; margin-left: var(--de-s-3); flex: none; } .finder input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--de-on-chrome); font-family: var(--de-font-body); font-size: 0.98rem; padding: 0.6rem 0.4rem; } .finder input::placeholder { color: var(--de-on-chrome-muted); } .finder input:focus { outline: none; box-shadow: none; } /* ══════════════════════════════════════════════════════════════════════════════ * SECTIONS + TIER HEADS * ════════════════════════════════════════════════════════════════════════════ */ /* Section↔section gap, and the same gap for the first section after a non-section lead block * (the hero already carries its own margin-bottom; .prose→section closes the article body seam). */ .section + .section, .prose + .section { margin-top: var(--de-flow-section); } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--de-s-4); margin-bottom: var(--de-flow-heading); flex-wrap: wrap; } .section__head h2 { font-size: var(--de-text-xl); font-weight: 700; } .section__head .sub { color: var(--de-ink-muted); font-size: 0.9rem; } .section__head a.more { font-family: var(--de-font-display); font-weight: 600; font-size: 0.88rem; color: var(--de-chrome); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; } .section__head a.more svg { width: 15px; height: 15px; } /* Tier head: eyebrow + paid disclosure + rule (Featured / All providers). */ .tier-head { display: flex; align-items: center; gap: var(--de-s-3); margin: var(--de-flow-subsection) 0 var(--de-s-4); } .tier-head .eyebrow { margin: 0; } .tier-head .disclosure { font-size: 0.76rem; color: var(--de-ink-faint); font-weight: 500; } .tier-head .rule { flex: 1; height: 1px; background: var(--de-line); } /* Intro prose (city / section lead-in). */ .intro { color: var(--de-ink); } .intro p { font-size: 1.06rem; color: color-mix(in srgb, var(--de-ink) 86%, var(--de-ink-muted)); } .intro p + p { margin-top: var(--de-s-4); } /* ══════════════════════════════════════════════════════════════════════════════ * PREMIUM SLOT — dark, photo-rich, glowing gold. The single highest tier. * ════════════════════════════════════════════════════════════════════════════ */ .premium { display: grid; grid-template-columns: 1.02fr 1.3fr; background: var(--de-chrome-2); color: var(--de-on-chrome); border-radius: var(--de-radius-xl); box-shadow: var(--de-premium-glow); overflow: hidden; position: relative; } .premium__media { position: relative; min-height: 300px; background: radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--de-gold) 26%, transparent), transparent 55%), linear-gradient(90deg, transparent 55%, color-mix(in srgb, var(--de-chrome-2) 92%, transparent) 100%), var(--de-premium-image, none) center / cover no-repeat, var(--de-chrome); } .premium__credit, .detail__credit { position: absolute; left: var(--de-s-4); bottom: var(--de-s-3); font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: rgb(255 255 255 / 0.62); } .premium__body { padding: var(--de-s-6); display: flex; flex-direction: column; gap: var(--de-s-4); } .premium__flag, .ribbon, .contact-card__flag { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; background: linear-gradient(150deg, var(--de-gold-2), var(--de-gold)); color: var(--de-gold-ink); font-family: var(--de-font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.11em; text-transform: uppercase; padding: 0.4rem 0.8rem; border-radius: var(--de-radius-pill); box-shadow: 0 5px 16px var(--de-gold-glow); } .premium__flag svg, .ribbon svg, .contact-card__flag svg { width: 14px; height: 14px; } .premium__name { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; color: #fff; letter-spacing: -0.025em; } .premium__rating { display: flex; align-items: center; gap: var(--de-s-3); flex-wrap: wrap; } .premium__rating .score { font-size: 1.05rem; color: var(--de-gold-2); } .premium__rating .stars { color: var(--de-gold); } .premium__rating .count { font-size: 0.9rem; color: var(--de-on-chrome-muted); font-weight: 600; } .premium__desc { font-size: 1.02rem; line-height: 1.55; color: color-mix(in srgb, var(--de-on-chrome) 88%, var(--de-on-chrome-muted)); } .premium__loc { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--de-on-chrome-muted); font-weight: 500; } .premium__loc svg { width: 16px; height: 16px; color: var(--de-gold-2); flex: none; } .premium__actions { display: flex; gap: var(--de-s-2); margin-top: var(--de-s-2); flex-wrap: wrap; } .premium__actions .btn--gold { flex: 1; } /* ══════════════════════════════════════════════════════════════════════════════ * FEATURED TIER — warm-tinted, elevated, clearly paid * ════════════════════════════════════════════════════════════════════════════ */ .featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--de-s-5); } .fcard { background: linear-gradient(180deg, var(--de-featured-tint), var(--de-featured-tint-2)); border: 1px solid var(--de-featured-border); border-top: 3px solid var(--de-featured-accent); border-radius: var(--de-radius-lg); box-shadow: var(--de-shadow-warm); padding: var(--de-s-5); display: flex; flex-direction: column; gap: var(--de-s-3); color: var(--de-ink); transition: transform 0.18s ease, box-shadow 0.18s ease; } .fcard:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgb(120 84 20 / 0.16); } .fcard__top { display: flex; align-items: center; justify-content: space-between; gap: var(--de-s-2); } .fcard__label, .contact-card__flag--featured { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--de-featured-label-bg); color: var(--de-featured-label-ink); font-family: var(--de-font-display); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.6rem; border-radius: var(--de-radius-pill); } .fcard__label svg { width: 12px; height: 12px; } .fcard__verified { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--de-surface); color: var(--de-featured-accent); box-shadow: var(--de-shadow-1); } .fcard__verified svg { width: 14px; height: 14px; } .fcard__name { font-size: 1.14rem; font-weight: 700; letter-spacing: -0.01em; } .fcard__rating { display: flex; align-items: center; gap: var(--de-s-2); } .fcard__rating .score { font-size: 0.95rem; } .fcard__rating .count { font-size: 0.84rem; color: var(--de-ink); font-weight: 700; } .fcard__rating .count span { color: var(--de-ink-muted); font-weight: 500; } .fcard__desc { font-size: 0.9rem; color: var(--de-ink-muted); line-height: 1.5; flex: 1; } .fcard__loc { display: flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; color: var(--de-ink-muted); font-weight: 500; } .fcard__loc svg { width: 15px; height: 15px; color: var(--de-featured-accent); flex: none; } .fcard__actions { display: flex; gap: var(--de-s-2); margin-top: auto; padding-top: var(--de-s-2); } .fcard__actions .btn { flex: 1; } /* Kind-driven location icon swap (identical markup; toggled by inline --de-ic-* vars * the page sets per directory kind: serve-area vs street address). */ .ic-serve { display: var(--de-ic-serve, inline-flex); } .ic-addr { display: var(--de-ic-addr, none); } /* ══════════════════════════════════════════════════════════════════════════════ * ORGANIC LIST — cool, quiet surface rows * ════════════════════════════════════════════════════════════════════════════ */ .rows { background: var(--de-surface); border: 1px solid var(--de-line); border-radius: var(--de-radius-lg); box-shadow: var(--de-shadow-1); overflow: hidden; margin-top: var(--de-s-5); } .row { display: flex; align-items: center; gap: var(--de-s-4); padding: var(--de-s-4) var(--de-s-5); border-bottom: 1px solid var(--de-line); transition: background 0.15s; } .row:last-child { border-bottom: none; } .row:hover { background: var(--de-surface-2); } .row__mono { font-family: var(--de-font-display); font-weight: 700; font-size: 0.95rem; color: var(--de-ink-muted); background: var(--de-surface-2); border: 1px solid var(--de-line); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; flex: none; } .row__main { flex: 1; min-width: 0; } .row__name { font-weight: 700; font-size: 0.98rem; letter-spacing: -0.005em; } .row__name a { color: var(--de-ink); text-decoration: none; } .row__name a:hover { color: var(--de-chrome); } .row__sub { font-size: 0.83rem; color: var(--de-ink-muted); margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row__rating { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; flex: none; } .row__rating .score { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.95rem; } .row__rating .count { font-size: 0.77rem; color: var(--de-ink-muted); font-weight: 600; } .row__cta { flex: none; font-family: var(--de-font-display); font-weight: 600; font-size: 0.85rem; color: var(--de-chrome); text-decoration: none; padding: 0.5rem 0.9rem; border-radius: var(--de-radius-pill); border: 1px solid var(--de-line-strong); transition: border-color 0.15s, background 0.15s; white-space: nowrap; } .row__cta:hover { border-color: var(--de-chrome); background: var(--de-surface-2); } .row--more { justify-content: center; color: var(--de-ink-muted); font-weight: 600; font-size: 0.9rem; background: var(--de-surface-2); } .row--more a { color: var(--de-chrome); font-weight: 700; } /* The organic sort segment (kept from the old .sort-control, restyled). */ .sort-control { display: inline-flex; align-items: center; gap: var(--de-s-1); font-size: var(--de-text-sm); padding: 0.2rem; background: var(--de-surface-2); border: 1px solid var(--de-line); border-radius: var(--de-radius-pill); } .sort-label { color: var(--de-ink-muted); padding-left: var(--de-s-2); } .sort-option { display: inline-flex; align-items: center; min-height: var(--de-tap-size); font-weight: 500; color: var(--de-ink-muted); text-decoration: none; padding: var(--de-s-1) var(--de-s-3); border-radius: var(--de-radius-pill); } .sort-option:hover { color: var(--de-chrome); } .sort-option[aria-current="true"] { background: var(--de-surface); color: var(--de-ink); box-shadow: var(--de-shadow-1); } /* Self-serve "feature your business" slot (organic-only state). */ .promo { display: flex; align-items: center; gap: var(--de-s-4); margin-top: var(--de-s-4); padding: var(--de-s-5); background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--de-gold) 12%, transparent), transparent 60%), var(--de-surface); border: 1px dashed color-mix(in srgb, var(--de-gold-border) 62%, var(--de-line-strong)); border-radius: var(--de-radius-lg); } .promo__mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--de-gold-soft); color: var(--de-gold-ink); flex: none; } .promo__mark svg { width: 22px; height: 22px; } .promo__text { flex: 1; min-width: 0; } .promo__title { font-family: var(--de-font-display); font-weight: 700; font-size: 1rem; } .promo__sub { font-size: 0.86rem; color: var(--de-ink-muted); margin-top: 0.1rem; } /* ══════════════════════════════════════════════════════════════════════════════ * HOME — city finder grid + article/post grids * ════════════════════════════════════════════════════════════════════════════ */ /* Compact link-card grids (city, hub, guides) share ONE 16px gutter; media/paid grids * (post, featured) use 24px. Two deliberate tiers, consistent within each. */ .city-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--de-s-4); list-style: none; margin: 0; padding: 0; } .city-card { display: flex; align-items: center; justify-content: space-between; gap: var(--de-s-3); background: var(--de-surface); border: 1px solid var(--de-line); border-radius: var(--de-radius); box-shadow: var(--de-shadow-1); padding: var(--de-s-4) var(--de-s-5); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .city-card:hover { transform: translateY(-3px); box-shadow: var(--de-shadow-2); border-color: var(--de-line-strong); } /* display:block so name + count stack inside the card's inline text wrapper (else they run * together as "Austin, TX4 listed"); the count's margin-top only takes effect once both are blocks. */ .city-card__name { display: block; font-family: var(--de-font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--de-ink); } .city-card__count { display: block; font-size: 0.8rem; color: var(--de-ink-muted); margin-top: 0.1rem; } .city-card__count b { color: var(--de-chrome); font-weight: 700; } .city-card svg { width: 16px; height: 16px; color: var(--de-ink-faint); flex: none; transition: transform 0.15s, color 0.15s; } .city-card:hover svg { transform: translateX(3px); color: var(--de-chrome); } .city-more { display: flex; flex-wrap: wrap; gap: var(--de-s-2); margin-top: var(--de-s-4); } .city-more a { font-size: 0.86rem; font-weight: 600; color: var(--de-ink-muted); background: var(--de-surface); border: 1px solid var(--de-line); padding: 0.4rem 0.85rem; border-radius: var(--de-radius-pill); text-decoration: none; transition: border-color 0.15s, color 0.15s; } .city-more a:hover { border-color: var(--de-chrome); color: var(--de-chrome); } /* Post/article cards. */ .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--de-s-5); list-style: none; margin: 0; padding: 0; } .post-card { display: flex; flex-direction: column; background: var(--de-surface); border: 1px solid var(--de-line); border-radius: var(--de-radius-lg); box-shadow: var(--de-shadow-1); overflow: hidden; text-decoration: none; transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s; } .post-card:hover { transform: translateY(-4px); box-shadow: var(--de-shadow-2); border-color: var(--de-line-strong); } .post-card__media { height: 168px; position: relative; overflow: hidden; background: radial-gradient(130% 120% at 15% 10%, color-mix(in srgb, var(--de-chrome) 22%, var(--de-surface)), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--de-chrome) 14%, var(--de-surface-2)), var(--de-surface-2)); } .post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .post-card__media .credit { position: absolute; right: var(--de-s-3); bottom: var(--de-s-2); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: rgb(255 255 255 / 0.82); text-shadow: 0 1px 3px rgb(0 0 0 / 0.5); } .post-card__media .glyph { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--de-chrome) 40%, transparent); } .post-card__media .glyph svg { width: 46px; height: 46px; } /* Photo-less post thumb (spec §7.15): a scheme-tinted branded metallic gradient with a gold glyph, * never a flat grey box. Base `.post-card__media` stays the neutral frame for real photos. Applied * by the page only when a post has no hero image. */ .post-card__media--glyph { background: radial-gradient(120% 120% at 18% 12%, color-mix(in srgb, var(--de-gold) 26%, transparent), transparent 55%), linear-gradient(150deg, var(--de-chrome), var(--de-chrome-2)); } .post-card__media--glyph .glyph { color: color-mix(in srgb, var(--de-gold-2) 72%, transparent); } .post-card__body { padding: var(--de-s-5); display: flex; flex-direction: column; gap: var(--de-s-2); flex: 1; } .post-card__kicker { font-family: var(--de-font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--de-chrome) 62%, var(--de-ink)); } .post-card__title { font-family: var(--de-font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--de-ink); } .post-card__meta { margin-top: auto; padding-top: var(--de-s-2); font-size: 0.8rem; color: var(--de-ink-muted); display: flex; align-items: center; gap: 0.5rem; } .post-card__meta .sep { opacity: 0.5; } /* Category chips (blog filter). */ .chips { display: flex; flex-wrap: wrap; gap: var(--de-s-2); } .chip { font-family: var(--de-font-display); font-weight: 600; font-size: 0.82rem; padding: 0.45rem 0.9rem; border-radius: var(--de-radius-pill); background: var(--de-surface); border: 1px solid var(--de-line-strong); color: var(--de-ink-muted); text-decoration: none; cursor: pointer; transition: all 0.15s; } .chip:hover { border-color: var(--de-chrome); color: var(--de-ink); } .chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--de-chrome); border-color: var(--de-chrome); color: var(--de-on-chrome); } /* Guides (2-up related list). */ .guides { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--de-s-4); } .guide { display: flex; flex-direction: column; gap: var(--de-s-2); background: var(--de-surface); border: 1px solid var(--de-line); border-radius: var(--de-radius); box-shadow: var(--de-shadow-1); padding: var(--de-s-5); text-decoration: none; transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s; } .guide:hover { transform: translateY(-3px); box-shadow: var(--de-shadow-2); border-color: var(--de-line-strong); } .guide__kicker { font-family: var(--de-font-display); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--de-chrome) 60%, var(--de-ink)); } .guide__title { font-family: var(--de-font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--de-ink); } .guide__more { margin-top: var(--de-s-2); font-size: 0.85rem; font-weight: 600; color: var(--de-chrome); display: inline-flex; align-items: center; gap: 0.35rem; } .guide__more svg { width: 14px; height: 14px; transition: transform 0.15s; } .guide:hover .guide__more svg { transform: translateX(3px); } /* ══════════════════════════════════════════════════════════════════════════════ * LISTING DETAIL * ════════════════════════════════════════════════════════════════════════════ */ .detail { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--de-s-6); align-items: start; } .detail__media { position: relative; border-radius: var(--de-radius-xl); overflow: hidden; box-shadow: var(--de-shadow-2); min-height: 300px; background: radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--de-gold) 22%, transparent), transparent 55%), var(--de-premium-image, none) center / cover no-repeat, var(--de-chrome); } .ribbon { position: absolute; top: var(--de-s-4); left: var(--de-s-4); } /* Listing-detail no-photo media (spec §7.10/§8): the branded-gradient monogram fallback — a large * business-initial glyph centered in the scheme-tinted media panel (which already carries the gold * radial + chrome gradient). The page adds only when the listing has no image. */ .detail__mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--de-font-display); font-weight: 800; font-size: clamp(3rem, 12vw, 6rem); letter-spacing: -0.02em; color: color-mix(in srgb, var(--de-on-chrome) 22%, transparent); } .detail__title { margin-top: var(--de-s-6); } .detail__title h1 { font-size: var(--de-text-2xl); font-weight: 800; letter-spacing: -0.025em; } .detail__ratingrow { display: flex; align-items: center; gap: var(--de-s-3); flex-wrap: wrap; margin-top: var(--de-s-3); } .detail__ratingrow .score { font-size: 1.05rem; } .detail__ratingrow .count { font-size: 0.9rem; color: var(--de-ink-muted); font-weight: 600; } .detail__badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: var(--de-s-4); } .badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; padding: 0.34rem 0.7rem; border-radius: var(--de-radius-pill); background: color-mix(in srgb, var(--de-chrome) 7%, var(--de-surface)); color: color-mix(in srgb, var(--de-chrome) 80%, var(--de-ink)); border: 1px solid color-mix(in srgb, var(--de-chrome) 14%, transparent); } .badge svg { width: 13px; height: 13px; } .detail__section { margin-top: var(--de-s-7); } .detail__section h2 { font-size: 1.3rem; margin-bottom: var(--de-s-3); } .detail__desc { color: color-mix(in srgb, var(--de-ink) 88%, var(--de-ink-muted)); font-size: 1.02rem; } /* Kind-driven blocks (map for destination, serve-area for trades) — toggled inline. */ .map-block { display: var(--de-kind-map, none); } .serve-block { display: var(--de-kind-serve, block); } /* Live Leaflet canvas frame (MapComponent.kt renders div.map[data-map]; map.js inits it). A * token-driven frame — hairline, radius, soft shadow — over the surface tint that shows while * tiles load. `isolation`+`z-index:0` keep Leaflet's own stacking contained. */ .map { position: relative; border-radius: var(--de-radius-lg); overflow: hidden; border: 1px solid var(--de-line-strong); box-shadow: var(--de-shadow-1); min-height: 340px; background: var(--de-surface-2); isolation: isolate; z-index: 0; } /* Scheme-metallic map pin — a Leaflet L.divIcon (className "de-pin", map.js). Neutralize * Leaflet's default white div-icon chrome, then paint the inline SVG from tokens: a dark chrome * teardrop (AA on any tile set) with a metallic --de-gold centre dot + ring, so the pin reads as * the scheme's premium metal on every palette. */ .leaflet-div-icon.de-pin { background: transparent; border: 0; } .de-pin svg { width: 30px; height: 40px; display: block; filter: drop-shadow(0 4px 6px rgb(8 12 22 / 0.4)); } .de-pin .pin-body { fill: var(--de-chrome); stroke: var(--de-gold); stroke-width: 1.4; } .de-pin .pin-dot { fill: var(--de-gold); } /* The card a pin points at, highlighted on pin click/hover (map.js .map-highlight). */ .map-highlight { outline: 2px solid var(--de-gold); outline-offset: 2px; border-radius: var(--de-radius-lg); } /* Optional overlay chrome the page can drop inside .map: an address pill (bottom-left) and an * "Open in Maps" link (top-right, clear of the OSM attribution). Above the tile/marker panes; the pill ignores pointer * events, the link keeps them. */ .map__label { position: absolute; left: var(--de-s-3); bottom: var(--de-s-3); z-index: 700; pointer-events: none; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; color: var(--de-ink-muted); background: color-mix(in srgb, var(--de-surface) 92%, transparent); padding: 0.3rem 0.6rem; border-radius: var(--de-radius-pill); border: 1px solid var(--de-line); } .map__open { /* Top-right: Leaflet's OSM attribution control owns the bottom-right corner, so the link sits * top-right (zoom TL, address pill BL, attribution BR) — no overlap on any corner. */ position: absolute; right: var(--de-s-3); top: var(--de-s-3); z-index: 700; pointer-events: auto; font-family: var(--de-font-display); font-weight: 600; font-size: 0.8rem; color: var(--de-chrome); background: var(--de-surface); padding: 0.45rem 0.85rem; border-radius: var(--de-radius-pill); border: 1px solid var(--de-line-strong); box-shadow: var(--de-shadow-1); display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none; } .map__open svg { width: 14px; height: 14px; } .serve-panel { border: 1px dashed var(--de-line-strong); border-radius: var(--de-radius-lg); padding: var(--de-s-6); background: var(--de-surface); display: flex; align-items: center; gap: var(--de-s-4); } .serve-panel__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--de-chrome) 8%, var(--de-surface)); color: var(--de-chrome); flex: none; } .serve-panel__ic svg { width: 24px; height: 24px; } .serve-panel b { font-family: var(--de-font-display); } .serve-panel p { font-size: 0.9rem; color: var(--de-ink-muted); margin: 0.15rem 0 0; } /* Sidebar. */ .aside { display: flex; flex-direction: column; gap: var(--de-s-4); position: sticky; top: var(--de-s-5); } .contact-card { background: var(--de-surface); border: 1px solid var(--de-line); border-radius: var(--de-radius-lg); box-shadow: var(--de-shadow-2); padding: var(--de-s-5); display: flex; flex-direction: column; gap: var(--de-s-4); } .contact-card__flag { align-self: flex-start; padding: 0.32rem 0.65rem; font-size: 0.64rem; letter-spacing: 0.1em; box-shadow: none; } .contact-row { display: flex; align-items: flex-start; gap: var(--de-s-3); font-size: 0.92rem; } .contact-row svg { width: 18px; height: 18px; color: var(--de-chrome); flex: none; margin-top: 1px; } .contact-row .lbl { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--de-ink-faint); font-weight: 700; margin-bottom: 0.1rem; } .contact-row a { color: var(--de-chrome); font-weight: 600; } .contact-row .muted { color: var(--de-ink-muted); } .hours-empty { color: var(--de-ink-muted); font-style: italic; } .contact-card__actions { display: flex; flex-direction: column; gap: var(--de-s-2); margin-top: var(--de-s-1); } .claim-card { background: var(--de-surface-2); border: 1px solid var(--de-line); border-radius: var(--de-radius); padding: var(--de-s-4) var(--de-s-5); display: flex; align-items: center; gap: var(--de-s-3); } .claim-card__ic { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--de-chrome) 8%, var(--de-surface)); color: var(--de-chrome); display: grid; place-items: center; flex: none; } .claim-card__ic svg { width: 18px; height: 18px; } .claim-card__text { flex: 1; min-width: 0; } .claim-card__title { font-family: var(--de-font-display); font-weight: 700; font-size: 0.9rem; } .claim-card__sub { font-size: 0.8rem; color: var(--de-ink-muted); } .claim-card a.link { font-family: var(--de-font-display); font-weight: 700; font-size: 0.82rem; color: var(--de-chrome); white-space: nowrap; text-decoration: none; } .featured-in { background: var(--de-surface); border: 1px solid var(--de-line); border-radius: var(--de-radius); padding: var(--de-s-5); } .featured-in .eyebrow { margin-bottom: var(--de-s-3); } .featured-in a { display: flex; align-items: center; gap: var(--de-s-2); padding: var(--de-s-2) 0; font-size: 0.9rem; font-weight: 600; color: var(--de-ink); border-bottom: 1px solid var(--de-line); text-decoration: none; } .featured-in a:last-child { border-bottom: none; } .featured-in a svg { width: 15px; height: 15px; color: var(--de-chrome); flex: none; } .featured-in a:hover { color: var(--de-chrome); } /* ══════════════════════════════════════════════════════════════════════════════ * ARTICLE PROSE * ════════════════════════════════════════════════════════════════════════════ */ .article-hero { position: relative; /*
— reset the UA's 1em/40px margin; the breadcrumb above and byline below own the gaps. */ margin: 0; border-radius: var(--de-radius-xl); overflow: hidden; min-height: 340px; box-shadow: var(--de-shadow-2); background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.55)), var(--de-premium-image, none) center / cover no-repeat, var(--de-chrome); display: flex; align-items: flex-end; } .article-hero__inner { padding: var(--de-s-7); color: #fff; } .article-hero__inner .kicker { color: var(--de-gold-2); } .article-hero__inner h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; color: #fff; } .article-hero .credit { position: absolute; right: var(--de-s-4); top: var(--de-s-3); font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; font-weight: 600; color: rgb(255 255 255 / 0.7); } .byline { display: flex; align-items: center; gap: var(--de-s-3); flex-wrap: wrap; margin-top: var(--de-s-5); font-size: 0.88rem; color: var(--de-ink-muted); } .byline__av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(150deg, var(--de-chrome), var(--de-chrome-2)); color: var(--de-on-chrome); display: grid; place-items: center; font-family: var(--de-font-display); font-weight: 700; font-size: 0.82rem; flex: none; } .byline b { color: var(--de-ink); font-weight: 700; } .byline .sep { opacity: 0.5; } .byline .updated { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--de-chrome); font-weight: 600; } .byline .updated svg { width: 14px; height: 14px; } .prose { margin-top: var(--de-s-6); } .prose > * + * { margin-top: var(--de-s-4); } .prose p { font-size: 1.08rem; color: color-mix(in srgb, var(--de-ink) 88%, var(--de-ink-muted)); } .prose h2 { font-size: var(--de-text-xl); margin-top: var(--de-flow-subsection); } .prose h3 { font-size: 1.2rem; margin-top: var(--de-s-6); } .prose ul, .prose ol { padding-left: 1.3em; } .prose li { font-size: 1.06rem; color: color-mix(in srgb, var(--de-ink) 88%, var(--de-ink-muted)); } .prose li + li { margin-top: var(--de-s-2); } .prose li::marker { color: var(--de-chrome); font-weight: 700; } .prose blockquote { margin: 0; border-left: 3px solid var(--de-gold); background: var(--de-gold-soft); border-radius: 0 var(--de-radius) var(--de-radius) 0; padding: var(--de-s-4) var(--de-s-5); font-size: 1.1rem; font-style: italic; color: color-mix(in srgb, var(--de-gold-ink) 78%, var(--de-ink)); } .prose a.inline, .prose a { color: var(--de-chrome); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--de-chrome) 40%, transparent); } .prose a:hover { text-decoration-color: var(--de-chrome); } .prose code { font-family: var(--de-font-mono); font-size: 0.9em; background: var(--de-surface-2); padding: 0.1em 0.35em; border-radius: var(--de-radius-sm); } .prose pre { background: var(--de-surface-2); padding: var(--de-s-4); border-radius: var(--de-radius); overflow-x: auto; } .prose pre code { background: none; padding: 0; } .prose img { border-radius: var(--de-radius-lg); } /* In-article listing embed. */ .embed-listing { display: flex; align-items: center; gap: var(--de-s-4); background: linear-gradient(180deg, var(--de-featured-tint), var(--de-featured-tint-2)); border: 1px solid var(--de-featured-border); border-left: 3px solid var(--de-featured-accent); border-radius: var(--de-radius); padding: var(--de-s-4) var(--de-s-5); margin-block: var(--de-s-5); text-decoration: none; } .embed-listing__mono { font-family: var(--de-font-display); font-weight: 800; font-size: 1rem; color: var(--de-featured-label-ink); background: var(--de-surface); border: 1px solid var(--de-featured-border); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; flex: none; } .embed-listing__main { flex: 1; min-width: 0; } .embed-listing__eyebrow { font-family: var(--de-font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--de-featured-label-ink); } .embed-listing__name { font-family: var(--de-font-display); font-weight: 700; font-size: 1.02rem; margin-top: 0.05rem; color: var(--de-ink); } .embed-listing__sub { font-size: 0.82rem; color: var(--de-ink-muted); margin-top: 0.05rem; } .embed-listing .score { font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.3rem; } /* City-links funnel band. */ .funnel { background: var(--de-chrome); color: var(--de-on-chrome); border-radius: var(--de-radius-xl); padding: var(--de-s-7); position: relative; overflow: hidden; } .funnel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--de-gold) 20%, transparent), transparent 55%); } .funnel > * { position: relative; } .funnel h2 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); } .funnel p { color: var(--de-on-chrome-muted); margin-top: var(--de-s-2); } .funnel__links { display: flex; flex-wrap: wrap; gap: var(--de-s-2); margin-top: var(--de-s-5); } .funnel__links a { font-family: var(--de-font-display); font-weight: 600; font-size: 0.88rem; color: var(--de-on-chrome); background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.16); padding: 0.5rem 1rem; border-radius: var(--de-radius-pill); text-decoration: none; transition: background 0.15s, border-color 0.15s; } .funnel__links a:hover { background: rgb(255 255 255 / 0.16); border-color: rgb(255 255 255 / 0.3); } /* ══════════════════════════════════════════════════════════════════════════════ * FAQ (details/summary) * ════════════════════════════════════════════════════════════════════════════ */ .faq { display: flex; flex-direction: column; gap: var(--de-s-3); } .faq details { background: var(--de-surface); border: 1px solid var(--de-line); border-radius: var(--de-radius); box-shadow: var(--de-shadow-1); overflow: hidden; } .faq details[open] { border-color: var(--de-line-strong); } .faq summary { list-style: none; cursor: pointer; padding: var(--de-s-5); font-family: var(--de-font-display); font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: var(--de-s-4); } .faq summary::-webkit-details-marker { display: none; } .faq summary .ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--de-chrome) 9%, var(--de-surface)); color: var(--de-chrome); transition: transform 0.2s, background 0.2s, color 0.2s; } .faq summary .ic svg { width: 15px; height: 15px; } .faq details[open] summary .ic { transform: rotate(45deg); background: var(--de-chrome); color: var(--de-on-chrome); } .faq__a { padding: 0 var(--de-s-5) var(--de-s-5); color: var(--de-ink-muted); font-size: 0.95rem; line-height: 1.6; } /* ══════════════════════════════════════════════════════════════════════════════ * HUBS + 404 * ════════════════════════════════════════════════════════════════════════════ */ .hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--de-s-4); } .hub-card { display: flex; align-items: center; justify-content: space-between; gap: var(--de-s-3); background: var(--de-surface); border: 1px solid var(--de-line); border-radius: var(--de-radius); box-shadow: var(--de-shadow-1); padding: var(--de-s-4) var(--de-s-5); text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; } .hub-card:hover { transform: translateY(-3px); box-shadow: var(--de-shadow-2); border-color: var(--de-line-strong); } /* display:block so name + sub stack inside the card's inline text wrapper (see .city-card__name). */ .hub-card__name { display: block; font-family: var(--de-font-display); font-weight: 700; font-size: 1rem; color: var(--de-ink); } .hub-card__sub { display: block; font-size: 0.8rem; color: var(--de-ink-muted); margin-top: 0.1rem; } .hub-card svg { width: 16px; height: 16px; color: var(--de-ink-faint); flex: none; transition: transform 0.15s, color 0.15s; } .hub-card:hover svg { transform: translateX(3px); color: var(--de-chrome); } .error { text-align: center; padding-block: var(--de-s-9); } .error__code { font-family: var(--de-font-display); font-weight: 800; font-size: clamp(4rem, 16vw, 8rem); line-height: 1; letter-spacing: -0.04em; background: linear-gradient(160deg, var(--de-gold-2), var(--de-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .error h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: var(--de-s-4); } .error p { color: var(--de-ink-muted); margin: var(--de-s-3) auto 0; } .error__actions { display: flex; gap: var(--de-s-2); justify-content: center; flex-wrap: wrap; margin-top: var(--de-s-6); } /* Legacy error-page shell (still used by some error routes until page rewrite). */ .error-page { text-align: center; padding: var(--de-s-8) var(--de-s-5); } .error-page h1 { color: var(--de-ink); } .error-page code { background: var(--de-surface-2); padding: var(--de-s-1) var(--de-s-2); border-radius: var(--de-radius-sm); } /* ══════════════════════════════════════════════════════════════════════════════ * GENERIC IMAGE FRAME (kept primitive for any fixed-ratio media) * ════════════════════════════════════════════════════════════════════════════ */ .de-media { display: block; position: relative; overflow: hidden; border-radius: var(--de-radius-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--de-chrome) 10%, var(--de-surface)), var(--de-surface-2)); aspect-ratio: 4 / 3; } .de-media-hero { aspect-ratio: 2 / 1; } .de-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .de-icon { width: 1.1em; height: 1.1em; flex: none; fill: currentColor; vertical-align: -0.16em; } .de-badge { display: inline-flex; align-items: center; gap: var(--de-s-1); font-size: var(--de-text-xs); font-weight: 600; line-height: 1; letter-spacing: var(--de-tracking-label); text-transform: uppercase; padding: 0.4em 0.7em; border-radius: var(--de-radius-pill); } /* ══════════════════════════════════════════════════════════════════════════════ * MERCHANT / CLAIM / PORTAL — kept intact from the prior system (token-driven, so * they re-skin with the scheme through the legacy aliases). These surfaces render * through the shell with useWebAwesome=true; admin has its own admin.css. * ════════════════════════════════════════════════════════════════════════════ */ /* Buttons (merchant surfaces — the WA-adjacent action set). */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--de-space-2); min-height: var(--de-tap-size); padding: 0.625rem var(--de-space-4); border: 1px solid var(--de-color-border); border-radius: var(--de-radius); color: var(--de-color-ink); font: inherit; font-weight: 700; font-size: var(--de-text-sm); text-decoration: none; white-space: nowrap; background: var(--de-color-surface); cursor: pointer; transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease; } .button:hover { border-color: var(--de-color-border-strong); color: var(--de-color-ink); text-decoration: none; } .button:active { transform: translateY(0.5px); } .button-primary { background: var(--de-accent); border-color: var(--de-accent); color: var(--de-color-brand-contrast); } .button-primary:hover { background: var(--de-accent-strong); border-color: var(--de-accent-strong); color: var(--de-color-brand-contrast); } .button-dark { background: var(--de-color-ink); border-color: var(--de-color-ink); color: var(--de-color-on-navy-strong); } .button-dark:hover { background: color-mix(in oklab, var(--de-color-ink) 92%, #fff); border-color: color-mix(in oklab, var(--de-color-ink) 92%, #fff); color: var(--de-color-on-navy-strong); } .button-ghost { border-color: transparent; background: transparent; color: var(--de-accent-strong); padding-inline: var(--de-space-2); } .button-ghost:hover { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 0.2em; } /* Native form controls. */ .de-field { display: block; margin-bottom: var(--de-space-3); } .de-field > label, .de-label { display: block; font-size: var(--de-text-sm); font-weight: 600; color: var(--de-color-ink); margin-bottom: var(--de-space-1); } .de-field input, .de-field select, .de-field textarea { width: 100%; min-height: var(--de-tap-size); padding: var(--de-space-2) var(--de-space-3); font: inherit; font-size: 1rem; color: var(--de-color-ink); background: var(--de-color-paper); border: 1px solid var(--de-color-border-strong); border-radius: var(--de-radius-sm); } .de-field textarea { min-height: 6rem; resize: vertical; } .de-field input:hover, .de-field select:hover, .de-field textarea:hover { border-color: var(--de-color-ink); } /* WebAwesome merchant controls inherit the accent through CSS variables. */ :root { --wa-color-brand-fill-loud: var(--de-accent); --wa-color-brand-fill-loud-active: var(--de-accent-strong); --wa-color-brand-border-loud: var(--de-accent); --wa-border-radius-m: var(--de-radius); --wa-color-success-fill-quiet: var(--de-accent-wash); } /* Claim form. */ .claim-form { max-width: 34rem; } .claim-back { margin: 0 0 var(--de-space-3); font-size: var(--de-text-sm); } .claim-back a { color: var(--de-color-text-muted); text-decoration: none; font-weight: 500; } .claim-back a:hover { color: var(--de-accent-ink); } .claim-form > h1 { margin-bottom: var(--de-space-2); } .claim-form > p { color: var(--de-color-text-muted); margin: 0 0 var(--de-space-3); } #claim-box { margin-top: var(--de-space-4); } #claim-box form { display: grid; gap: var(--de-space-1); padding: var(--de-space-5); background: var(--de-color-paper); border: 1px solid var(--de-color-hairline); border-radius: var(--de-radius-lg); box-shadow: var(--de-shadow-sm); } #claim-box wa-input, #claim-box wa-select, #claim-box wa-textarea { margin-bottom: var(--de-space-3); --wa-form-control-label-font-weight: 600; } #claim-box wa-button[type="submit"] { margin-top: var(--de-space-2); } .field-error { display: flex; align-items: flex-start; gap: var(--de-space-2); margin: calc(-1 * var(--de-space-2)) 0 var(--de-space-3); padding: var(--de-space-2) var(--de-space-3); font-size: var(--de-text-sm); font-weight: 500; color: var(--de-color-danger); background: var(--de-color-danger-tint); border: 1px solid color-mix(in oklab, var(--de-color-danger) 26%, var(--de-color-hairline)); border-radius: var(--de-radius-sm); } .field-error::before { content: ""; width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.05rem; background: var(--de-color-danger); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm-8 56a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm8 104a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24Zm-8 56a8 8 0 0 1 16 0v56a8 8 0 0 1-16 0Zm8 104a12 12 0 1 1 12-12 12 12 0 0 1-12 12Z'/%3E%3C/svg%3E") center / contain no-repeat; } .form-hint { margin: var(--de-space-3) 0 0; font-size: var(--de-text-sm); color: var(--de-color-text-muted); } wa-callout { --wa-color-brand-fill-quiet: var(--de-accent-wash); border-radius: var(--de-radius); } /* Badge embed (claim page). */ .badge-embed { margin-top: var(--de-space-7); } .badge-embed-lead { color: var(--de-color-text-muted); margin: 0 0 var(--de-space-4); } .badge-embed-row { display: flex; flex-wrap: wrap; gap: var(--de-space-5); align-items: flex-start; } .badge-embed-preview { flex-shrink: 0; } .badge-embed-code { flex: 1; min-width: min(100%, 20rem); } .badge-embed-code label { display: block; font-family: var(--de-font-body); font-size: var(--de-text-xs); font-weight: 500; letter-spacing: var(--de-tracking-label); text-transform: uppercase; color: var(--de-color-text-muted); margin-bottom: var(--de-space-2); } .badge-embed-code textarea { width: 100%; font-family: var(--de-font-mono); font-size: var(--de-text-sm); line-height: 1.5; color: var(--de-color-text); background: var(--de-color-surface-alt); border: 1px solid var(--de-color-border-strong); border-radius: var(--de-radius-sm); padding: var(--de-space-3); resize: vertical; } .badge-embed-actions { display: flex; align-items: center; gap: var(--de-space-3); margin-top: var(--de-space-2); } .badge-copy-status { font-size: var(--de-text-sm); color: var(--de-color-text-muted); } .badge-embed-instruction { margin-top: var(--de-space-3); font-size: var(--de-text-sm); color: var(--de-color-text-muted); } /* Portal chrome. */ .portal-picker { list-style: none; padding: 0; } .portal-picker a { display: flex; align-items: center; min-height: var(--de-tap-size); } .portal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--de-space-2); } /* Legal / about long-form. */ .legal-page > p { color: var(--de-color-text); } .legal-operator { color: var(--de-color-text-subtle); font-size: var(--de-text-sm); } .legal-page > section { margin-top: var(--de-space-6); } .legal-page > section > h2 { font-size: var(--de-text-lg); margin-bottom: var(--de-space-2); padding-bottom: var(--de-space-2); border-bottom: var(--de-hairline); } .legal-page > section > p { color: var(--de-color-text); } /* Breadcrumb (generic, on the light ground — distinct from the on-chrome .crumbs). */ .breadcrumb { font-size: var(--de-text-sm); color: var(--de-color-text-muted); margin-bottom: var(--de-space-3); } .breadcrumb a { color: var(--de-color-text-muted); text-decoration-color: transparent; } .breadcrumb a:hover { color: var(--de-accent-ink); text-decoration-color: currentColor; } .breadcrumb-sep { margin: 0 var(--de-space-2); color: var(--de-color-text-subtle); } /* ══════════════════════════════════════════════════════════════════════════════ * RESPONSIVE * ════════════════════════════════════════════════════════════════════════════ */ /* Scale the vertical rhythm down on small screens by redefining the flow tokens — every seam that * reads them (page pad, section gaps, hero→content, prose→section, tier heads) tightens together, * so nothing has to be retuned per selector and no seam collapses to 0. */ @media (max-width: 48rem) { :root { --de-flow-section: var(--de-s-6); /* 48 → 32 */ --de-flow-subsection: var(--de-s-5); /* 32 → 24 */ --de-flow-page-bottom: var(--de-s-7); /* 64 → 48 */ } } @media (max-width: 61rem) { .detail { grid-template-columns: 1fr; } .aside { position: static; } .city-grid { grid-template-columns: repeat(2, 1fr); } .post-grid { grid-template-columns: 1fr 1fr; } .hub-grid { grid-template-columns: repeat(2, 1fr); } .guides { grid-template-columns: 1fr; } } @media (max-width: 55rem) { .featured { grid-template-columns: 1fr; } .premium { grid-template-columns: 1fr; } .premium__media { min-height: 200px; } } @media (max-width: 39rem) { .city-grid, .post-grid, .hub-grid { grid-template-columns: 1fr; } .fcard__actions { flex-direction: column; } .row__cta { display: none; } .promo { flex-direction: column; align-items: flex-start; } .hero__body { padding: var(--de-s-6) var(--de-s-5) var(--de-s-7); } .premium__body { padding: var(--de-s-5); } .site-nav > a:not(.site-brand):not(.nav-cta) { display: none; } /* Uniform heavier hero overlay so no word lands on the photo-forward edge. */ .hero::before { background: linear-gradient(180deg, color-mix(in srgb, var(--de-chrome) 88%, transparent), color-mix(in srgb, var(--de-chrome-2) 90%, transparent)), var(--de-hero-image, none) center 30% / cover no-repeat, var(--de-chrome); } } /* Touch floor (Mobile NFR) on shared interactive controls. */ .footer-links a, .city-faq summary { min-height: var(--de-tap-size); } .footer-links a { display: inline-flex; align-items: center; } /* Merchant tap floors + reflow guards (public prose + merchant/portal surfaces). */ .article-body, .intro, .detail__desc, .contact-card, .prose, .portal-pending { overflow-wrap: break-word; } .site-main pre { overflow-x: auto; max-width: 100%; } wa-button::part(base) { min-height: var(--de-tap-size); } /* Inline merchant action links grow to the touch floor via block padding; the matching negative * margin cancels the layout shift so the page renders identically. */ .claim-form a, .portal-status a { display: inline-block; padding-block: calc((var(--de-tap-size) - 1lh) / 2); margin-block: calc((1lh - var(--de-tap-size)) / 2); } @media (max-width: 48rem) { #edit-form-box wa-button[type="submit"] { position: sticky; bottom: var(--de-space-2); z-index: 5; } } /* Desktop compaction — relax the touch floor on mouse-driven layouts. */ @media (min-width: 64rem) { .footer-links a { display: inline; min-height: 0; } .sort-option { min-height: 0; } .button { min-height: 0; } .claim-form a, .portal-status a { display: inline; padding-block: 0; margin-block: 0; } wa-button[size="small"]::part(base) { min-height: 0; } } /* ── V34 sponsor page — two-tier sales surface (SponsorPage.kt) ───────────────── * NEW component set (no prior /sponsor equivalent in T2): the shared full-bleed .hero band * (via the shell slot) + two ranked tier cards (premium glows gold, featured is warm) + * honest terms + the two CTA paths. Reads scheme tokens only, like every other T2 component. */ .sponsor { display: flex; flex-direction: column; gap: var(--de-s-6); } /* The pitch line sits in the shared .hero__body band (on chrome) — muted on-chrome copy. */ .sponsor__pitch { color: var(--de-on-chrome-muted); font-size: 1.05rem; } .sponsor__tiers-heading { margin: 0; } .sponsor__tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--de-s-5); align-items: start; } .sponsor-tier { display: flex; flex-direction: column; gap: var(--de-s-3); padding: var(--de-s-6); border-radius: var(--de-radius-lg); } /* Premium — the exclusive hero tier: dark card, gold flag, metallic glow ring. */ .sponsor-tier--premium { background: var(--de-chrome-2); color: var(--de-on-chrome); box-shadow: var(--de-premium-glow); } .sponsor-tier--premium .sponsor-tier__price { color: #fff; } .sponsor-tier--premium .sponsor-tier__tagline, .sponsor-tier--premium .sponsor-tier__availability { color: var(--de-on-chrome-muted); } .sponsor-tier--premium .sponsor-tier__benefits li { color: var(--de-on-chrome); } .sponsor-tier--premium .sponsor-tier__flag { background: linear-gradient(180deg, var(--de-gold-2), var(--de-gold)); color: var(--de-gold-ink); } /* Featured — warm tinted card, one rung below premium. */ .sponsor-tier--featured { background: linear-gradient(180deg, var(--de-featured-tint), var(--de-featured-tint-2)); border: 1px solid var(--de-featured-border); box-shadow: var(--de-shadow-warm); color: var(--de-ink); } .sponsor-tier--featured .sponsor-tier__flag { background: var(--de-featured-label-bg); color: var(--de-featured-label-ink); } .sponsor-tier__flag { align-self: flex-start; padding: 3px 12px; border-radius: var(--de-radius-pill); font-family: var(--de-font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .sponsor-tier__price { font-family: var(--de-font-display); font-size: 1.9rem; font-weight: 800; } .sponsor-tier__availability { font-size: 0.86rem; font-weight: 600; } .sponsor-tier__tagline { font-size: 0.98rem; } .sponsor-tier__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--de-s-2); } .sponsor-tier__benefits li { position: relative; padding-left: 1.5rem; font-size: 0.92rem; } .sponsor-tier__benefits li::before { content: "\2713"; /* check mark, CSS-drawn — no emoji */ position: absolute; left: 0; top: 0; color: var(--de-gold); font-weight: 700; } .sponsor__terms { font-size: 0.86rem; color: var(--de-ink-muted); } .sponsor__cta { display: flex; gap: var(--de-s-5); flex-wrap: wrap; } .sponsor__cta-path { flex: 1 1 240px; background: var(--de-surface); border: 1px solid var(--de-line); border-radius: var(--de-radius-lg); padding: var(--de-s-5); } .sponsor__cta-path h3 { margin: 0 0 var(--de-s-3); } .sponsor__cta-path .btn { width: 100%; } /* ── V34 merchant portal — two-tier stand-out offer (MerchantPortalPages.kt) ───── * Merchant (WebAwesome) surface: two side-by-side tier options with price/pitch/slots. */ .portal-tiers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 0.5rem; } .portal-tier { border: 1px solid var(--de-color-border); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.4rem; } .portal-tier h2 { margin: 0; font-size: 1.05rem; } .portal-tier-price { font-weight: 700; font-size: 1.3rem; margin: 0; } .portal-tier-pitch { color: var(--de-color-text-muted); font-size: 0.9rem; margin: 0; } .portal-tier-slots { font-size: 0.82rem; font-weight: 600; margin: 0.2rem 0; } @media (max-width: 48rem) { .sponsor__tiers { grid-template-columns: 1fr; } .portal-tiers { grid-template-columns: 1fr; } }