/* The Collection — restores theme utilities missing from the compiled bundle. * * The shadcn/Radix components reference bg-popover, text-popover-foreground, * bg-card, bg-accent, border-border and friends, but none of those classes were * emitted into _next/static/css/index.C7VMvC_O.css. The result is that every * Radix popover (most visibly the PROPERTY TYPE dropdown) renders with no * background at all, so it reads as see-through and the text is illegible on * both desktop and mobile. * * The design tokens themselves are present on :root and [data-theme=dark], so * this only re-declares the utilities that consume them. Loaded as a separate * file because the bundle path is served immutable. */ .bg-background { background-color: var(--background); } .bg-card { background-color: var(--card); } .bg-popover { background-color: var(--popover); } .bg-primary { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .bg-muted { background-color: var(--muted); } .bg-accent { background-color: var(--accent); } .bg-destructive { background-color: var(--destructive); } .bg-input { background-color: var(--input); } .text-foreground { color: var(--foreground); } .text-card-foreground { color: var(--card-foreground); } .text-popover-foreground { color: var(--popover-foreground); } .text-primary-foreground { color: var(--primary-foreground); } .text-secondary-foreground { color: var(--secondary-foreground); } .text-muted-foreground { color: var(--muted-foreground); } .text-accent-foreground { color: var(--accent-foreground); } .border-border { border-color: var(--border); } .border-input { border-color: var(--input); } .ring-ring { --tw-ring-color: var(--ring); } /* Hover / keyboard / pointer states inside menus and selects. */ .focus\:bg-accent:focus, .hover\:bg-accent:hover, [data-slot="select-item"][data-highlighted], [data-slot="select-item"]:hover, [role="option"][data-highlighted] { background-color: var(--accent); color: var(--accent-foreground); } /* Belt and braces: any floating menu surface must be opaque, whatever classes * the component happens to ship with. */ [data-slot="select-content"], [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [role="listbox"] { background-color: var(--popover); color: var(--popover-foreground); border-color: var(--border); box-shadow: 0 12px 32px rgb(0 0 0 / 0.14); } /* Native selects inherit a transparent background from the preflight, which * makes the OS popup unreadable on Windows. Declaring color-scheme lets the * browser paint its own controls correctly in both themes. */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } select option, select optgroup { background-color: var(--popover); color: var(--popover-foreground); } /* The top navigation stays put. * * Sticky rather than fixed, because the header is a direct child of * with no scrolling ancestor and it keeps its place in the flow: the page * below it does not jump up by 98px, and nothing needs a compensating top * margin. It already carries a solid background and a bottom border in both * themes, so it stays readable over whatever scrolls under it. * * The header's own z-index of 20 is left alone. The Ask dot launcher sits at * 35 and belongs above it. */ .header { position: sticky; top: 0; } /* An in-page anchor would otherwise land underneath the header. These are the * two heights the bundle actually sets, at the same 850px breakpoint. */ html { scroll-padding-top: 98px; } @media (max-width: 850px) { html { scroll-padding-top: 80px; } } /* A listing card in Ask dot shows the home, not only its name. * * No new data was needed: the panel already receives up to two image URLs with * every listing and simply never drew one. So this is layout alone, and it * turns that card from a block into a row. * * Scoped to the modifier rather than to .dot-result, because the contact card * shares that class and has no picture. Widening the flex to .dot-result would * have laid a person's name and their two lines out side by side. */ .dot-result-thumb { display: flex; align-items: center; gap: 12px; } .dot-result-thumb .dot-thumb { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; /* Something to look at while the photo loads, and what is left behind if it * never arrives: these come from a third-party media host, not from us. */ background: var(--secondary); } .dot-result-thumb .dot-result-text { flex: 1; min-width: 0; } /* The arrow was nudged down to clear the second line while the card was a * block. Centred in a row it belongs on the middle. */ .dot-result-thumb svg { flex: none; margin-top: 0; }