/* * Contact us: the operator's own details, then the people they publish. * * Plain CSS for the same reason as wallet.css and order-cards.css: the panels * have no Vite build and serve Filament's pre-compiled app.css, so * `class="flex gap-4"` written in a Blade view here is inert markup. Anything * bespoke brings its own rules. * * Registered on the client panel only, in ClientPanelProvider: * * Css::make('contact', resource_path('css/contact.css')) * * which `php artisan filament:assets` copies to public/css/app/contact.css. * Editing this file therefore needs that command re-run — composer's * post-autoload-dump does it too, by way of `filament:upgrade`. * * Every colour is a variable FilamentColor writes into :root at runtime * (--gray-*, --primary-*) and every size comes from the theme block in app.css * (--radius-xl, --text-sm), so the page tracks the panel's palette and its dark * mode instead of defining a second one. Dark mode is the `.dark` class on * . * * Two pages share every rule below — the panel page and the guest route — so * nothing here assumes a sidebar or a page width. The card grid is auto-fit, * which is what lets the same markup be three columns on the wide page and one * inside the centred card a signed-out visitor sees. * * The namespace is `ct-`, kept apart from `wl-`, `oc-` and `sv-` because all * four files load on every client page and a shared prefix would let a rule * written for the directory silently restyle a server. */ .ct-directory { display: grid; gap: 1.25rem; } /* ------------------------------------------------------------------ * * The operator's own details — the block that is never empty * ------------------------------------------------------------------ */ .ct-house { display: grid; gap: 0.625rem; padding: 1.125rem 1.25rem 1.25rem; border-radius: var(--radius-xl, 0.75rem); background-color: var(--color-white, #fff); box-shadow: 0 0 0 1px var(--gray-200), 0 1px 2px 0 rgb(0 0 0 / 4%); } .dark .ct-house { background-color: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-700); } .ct-house-title { font-size: var(--text-lg, 1.125rem); font-weight: 600; letter-spacing: -0.01em; color: var(--gray-950); } .dark .ct-house-title { color: var(--gray-50); } .ct-house-lines { display: grid; gap: 0.375rem; } /* Label and value on one row where there is room, stacked where there is not — the guest card is narrow enough that a postal address would otherwise be one word per line beside its label. */ .ct-house-line { display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem; font-size: var(--text-sm, 0.875rem); line-height: 1.35rem; text-decoration: none; } .ct-house-label { flex: 0 0 4.5rem; font-size: var(--text-xs, 0.75rem); font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-500); } .dark .ct-house-label { color: var(--gray-400); } .ct-house-value { flex: 1 1 10rem; min-width: 0; color: var(--gray-700); /* An address with newlines in it was typed with newlines in it. */ white-space: pre-line; } .dark .ct-house-value { color: var(--gray-300); } /* Only the two rows that go somewhere react to a pointer. The address is not a link and must not pretend to be one. */ a.ct-house-line:hover .ct-house-value, a.ct-house-line:focus-visible .ct-house-value { color: var(--primary-600); text-decoration: underline; } .dark a.ct-house-line:hover .ct-house-value, .dark a.ct-house-line:focus-visible .ct-house-value { color: var(--primary-400); } /* ------------------------------------------------------------------ * * The published contacts — one card each * ------------------------------------------------------------------ */ /* auto-fit rather than a fixed count: this partial renders inside a full-width panel page and inside a centred guest card, and the number of columns is a property of the space it was given rather than of the directory. */ .ct-cards { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .ct-card { display: flex; flex-direction: column; gap: 0.125rem; padding: 1rem 1.125rem 1.125rem; border-radius: var(--radius-xl, 0.75rem); background-color: var(--color-white, #fff); box-shadow: 0 0 0 1px var(--gray-200), 0 1px 2px 0 rgb(0 0 0 / 4%); } .dark .ct-card { background-color: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-700); } .ct-card-name { font-size: var(--text-base, 1rem); font-weight: 600; color: var(--gray-950); } .dark .ct-card-name { color: var(--gray-50); } .ct-card-subtitle { font-size: var(--text-xs, 0.75rem); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--gray-500); } .dark .ct-card-subtitle { color: var(--gray-400); } .ct-card-reach { display: grid; gap: 0.125rem; margin-top: 0.625rem; } .ct-reach { font-size: var(--text-sm, 0.875rem); line-height: 1.4rem; color: var(--primary-600); text-decoration: none; overflow-wrap: anywhere; } .ct-reach:hover, .ct-reach:focus-visible { text-decoration: underline; } .dark .ct-reach { color: var(--primary-400); } /* The number is the thing somebody came here for. tabular-nums so a column of them lines up, and a size up from the address beside it. */ .ct-reach--phone { font-size: var(--text-base, 1rem); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .ct-card-hours { margin-top: 0.5rem; font-size: var(--text-xs, 0.75rem); color: var(--gray-500); } .dark .ct-card-hours { color: var(--gray-400); } .ct-card-note { margin-top: 0.375rem; font-size: var(--text-sm, 0.875rem); line-height: 1.3rem; color: var(--gray-600); } .dark .ct-card-note { color: var(--gray-400); } /* ------------------------------------------------------------------ * * The empty state, and the way into a ticket * ------------------------------------------------------------------ */ .ct-empty { padding: 0.875rem 1rem; border-radius: var(--radius-xl, 0.75rem); font-size: var(--text-sm, 0.875rem); line-height: 1.35rem; color: var(--gray-600); background-color: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-200); } .dark .ct-empty { color: var(--gray-400); background-color: color-mix(in oklab, var(--gray-800) 55%, transparent); box-shadow: inset 0 0 0 1px var(--gray-800); } .ct-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; } /* Filament's own button classes are in the compiled stylesheet, but they carry its Livewire loading and disabled behaviour with them; this is a link that navigates, so it borrows the look and none of the machinery. */ .ct-ticket { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: var(--radius-lg, 0.5rem); font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--color-white, #fff); text-decoration: none; background-color: var(--primary-600); box-shadow: 0 1px 2px 0 rgb(0 0 0 / 8%); } .ct-ticket:hover, .ct-ticket:focus-visible { background-color: var(--primary-500); } /* The guest version offers a sign-in, which is a step towards the thing rather than the thing — so it reads as secondary. */ .ct-ticket--quiet { color: var(--gray-700); background-color: var(--gray-50); box-shadow: inset 0 0 0 1px var(--gray-300); } .ct-ticket--quiet:hover, .ct-ticket--quiet:focus-visible { background-color: var(--gray-100); } .dark .ct-ticket--quiet { color: var(--gray-200); background-color: color-mix(in oklab, var(--gray-800) 60%, transparent); box-shadow: inset 0 0 0 1px var(--gray-700); } .dark .ct-ticket--quiet:hover, .dark .ct-ticket--quiet:focus-visible { background-color: var(--gray-800); } .ct-footer-note { flex: 1 1 16rem; font-size: var(--text-sm, 0.875rem); line-height: 1.3rem; color: var(--gray-500); } .dark .ct-footer-note { color: var(--gray-400); }