/* * Hofman panel styling. * * Aligns the Filament panel with the AI cockpit design. Every value below was * measured off the design in both themes rather than eyeballed. * * Loaded through the STYLES_AFTER render hook, not ->assets(): registered assets * render *before* Filament's own stylesheet, which would overwrite every custom * property set here. * * Light Dark * primary #96150e primary #c33a2a * bg oklch(1 0 0) bg oklch(0.145 0 0) * surface oklch(1 0 0) surface oklch(0.205 0 0) * border oklch(0.922 0 0) border oklch(1 0 0 / 0.1) * nav fg oklch(0.37 0 0) nav fg oklch(0.985 0 0) * nav on oklch(0.97 0 0) nav on oklch(0.269 0 0) * muted oklch(0.556 0 0) muted oklch(0.708 0 0) */ :root { /* The design uses the plain system stack, no web font. Filament's ->font() is deliberately not used: it quotes the family and fetches it remotely. */ --font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* Buttons and tabs sit at 8px, cards and panels at 10px. */ --radius-md: 0.5rem; --radius-lg: 0.625rem; --radius-xl: 0.75rem; --hofman-border: oklch(0.922 0 0); --hofman-surface: oklch(1 0 0); --hofman-nav-fg: oklch(0.37 0 0); --hofman-nav-fg-active: oklch(0.205 0 0); --hofman-nav-bg-active: oklch(0.97 0 0); --hofman-muted-fg: oklch(0.556 0 0); /* Color::hex() derives a ramp by hue with its own lightness curve, so the brand colour itself lands on no shade at all — #96150e sits at L 0.40 while the generated 600 is L 0.60. Buttons use 500/600, so those are pinned to the exact colour from the design. */ --primary-500: #96150e; --primary-600: #96150e; } /* Filament toggles dark mode with a class on , so the theme switch has to drive this too — a prefers-color-scheme query would ignore the toggle. */ .dark { --hofman-border: oklch(1 0 0 / 0.1); --hofman-surface: oklch(0.205 0 0); --hofman-nav-fg: oklch(0.985 0 0); --hofman-nav-fg-active: oklch(0.985 0 0); --hofman-nav-bg-active: oklch(0.269 0 0); --hofman-muted-fg: oklch(0.708 0 0); /* The design lightens the brand red for dark mode so it stays legible on a near-black background. */ --primary-500: #c33a2a; --primary-600: #c33a2a; } /* The design puts buttons at 8px and cards at 10px; Filament uses one token. */ .fi-btn { border-radius: var(--radius-md); } /* --------------------------------------------------------------------------- * Sidebar: header, frame and border * * The design gives the sidebar a hairline on the right and a matching one under * the logo block; the topbar carries the same line along its bottom. Without * them the sidebar, its header and the topbar all float apart. * ------------------------------------------------------------------------- */ .fi-sidebar { width: 255px; border-right: 1px solid var(--hofman-border); background-color: var(--hofman-surface); } .fi-sidebar-header { min-height: 97px; padding: 16px; border-bottom: 1px solid var(--hofman-border); background-color: var(--hofman-surface); box-shadow: none; } .fi-logo { height: 4rem; } .fi-topbar { min-height: 69px; border-bottom: 1px solid var(--hofman-border); background-color: var(--hofman-surface); box-shadow: none; } /* --------------------------------------------------------------------------- * Navigation items * * Filament renders the active item in the primary colour, icon included. The * design highlights it in neutral grey and keeps the brand red for actions, so * the icon colour follows the label colour here. * ------------------------------------------------------------------------- */ .fi-sidebar-nav { gap: 4px; } .fi-sidebar-item-btn { gap: 8px; border-radius: var(--radius-md); color: var(--hofman-nav-fg); font-size: 14px; font-weight: 400; line-height: 20px; } .fi-sidebar-item-label { font-size: 14px; font-weight: 400; } .fi-sidebar-item-icon { width: 16px; height: 16px; color: var(--hofman-nav-fg); } .fi-sidebar-item.fi-active .fi-sidebar-item-btn { background-color: var(--hofman-nav-bg-active); color: var(--hofman-nav-fg-active); } .fi-sidebar-item.fi-active .fi-sidebar-item-label, .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--hofman-nav-fg-active); } .fi-sidebar-item.fi-active .fi-sidebar-item-label { font-weight: 500; } /* Sentence case, not Filament's uppercase treatment. */ .fi-sidebar-group-label { color: var(--hofman-nav-fg); font-size: 12px; font-weight: 500; letter-spacing: normal; text-transform: none; opacity: 0.7; } /* --------------------------------------------------------------------------- * Cluster tabs (top of the page, left aligned) * * A pill group as in the design: a grey track with a white, shadowed pill on the * active tab. Filament stretches its tabs across the page, so the group is * shrunk to its content and pushed to the left. * ------------------------------------------------------------------------- */ .fi-page-sub-navigation-tabs { /* A block-level box sized to its content with the free space pushed to the right: left aligned whether the parent centres with text-align, auto margins, flex or grid. */ display: flex; width: fit-content; max-width: 100%; margin-inline: 0 auto; align-self: flex-start; justify-self: start; gap: 0; padding: 3px; border: 0; border-radius: var(--radius-lg); background-color: var(--hofman-nav-bg-active); } .fi-page-sub-navigation-tabs .fi-tabs-item { border: 0; border-radius: var(--radius-md); color: var(--hofman-nav-fg); font-size: 14px; font-weight: 500; } .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active { background-color: var(--hofman-surface); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); } /* Filament colours the active tab's label and icon with --primary-700; the design keeps them near-black and saves the brand red for actions. Filament's selector carries two classes, so this one needs three to win. */ .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active .fi-tabs-item-label, .fi-page-sub-navigation-tabs .fi-tabs-item.fi-active > .fi-icon { color: var(--hofman-nav-fg-active); } .fi-page-sub-navigation-tabs .fi-tabs-item-icon { width: 16px; height: 16px; } /* --------------------------------------------------------------------------- * Theme control in the topbar * ------------------------------------------------------------------------- */ .hofman-theme-switcher-trigger { color: var(--hofman-nav-fg); } .hofman-theme-switcher .fi-dropdown-panel { min-width: 0; width: max-content; } .fi-theme-switcher { display: flex; flex-direction: column; gap: 2px; padding: 4px; min-width: 8rem; } .fi-theme-switcher-btn { display: flex; align-items: center; /* Filament centres the icon in this button; the options read as a menu, so icon and label start at the left edge. */ justify-content: flex-start; gap: 8px; width: 100%; padding: 6px 8px; border-radius: var(--radius-md); color: var(--hofman-nav-fg); font-size: 14px; font-weight: 400; text-align: start; } .fi-theme-switcher-btn .fi-icon { width: 16px; height: 16px; flex-shrink: 0; } .fi-theme-switcher-btn:hover { background-color: var(--hofman-nav-bg-active); } .fi-theme-switcher-btn.fi-active { background-color: var(--hofman-nav-bg-active); color: var(--hofman-nav-fg-active); font-weight: 500; } /* --------------------------------------------------------------------------- * Standard prices — cockpit-style product table * ------------------------------------------------------------------------- */ .hofman-standard-prices { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--hofman-border); border-radius: var(--radius-xl); background-color: var(--hofman-surface); } .hofman-standard-prices-heading { margin: 0; color: var(--hofman-nav-fg-active); font-size: 18px; font-weight: 600; line-height: 28px; } .hofman-standard-prices-description, .hofman-standard-prices-stats { margin: 4px 0 0; color: var(--hofman-muted-fg); font-size: 14px; line-height: 20px; } .hofman-standard-prices-search { max-width: 100%; } .hofman-standard-prices-table-wrap { overflow-x: auto; border: 1px solid var(--hofman-border); border-radius: var(--radius-lg); } .hofman-product-table { width: 100%; border-collapse: collapse; font-size: 14px; } .hofman-product-table th, .hofman-product-table td { padding: 12px 16px; border-bottom: 1px solid var(--hofman-border); text-align: start; vertical-align: middle; } .hofman-product-table th { color: var(--hofman-muted-fg); font-size: 12px; font-weight: 500; background-color: transparent; } .hofman-product-table-chevron { width: 2.5rem; padding-right: 0 !important; } .hofman-product-table-number { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } .hofman-product-row { cursor: pointer; } .hofman-product-row:hover, .hofman-product-row.is-expanded { background-color: var(--hofman-nav-bg-active); } .hofman-product-chevron { display: inline-flex; color: var(--hofman-muted-fg); } .hofman-product-name { display: block; color: var(--hofman-nav-fg-active); font-weight: 600; } .hofman-product-sku { display: block; margin-top: 2px; color: var(--hofman-muted-fg); font-size: 12px; } .hofman-product-from-price { font-weight: 600; } .hofman-product-variants-row > td { padding: 0; background-color: color-mix(in oklab, var(--hofman-nav-bg-active) 50%, transparent); } .hofman-product-table-empty { padding: 24px 16px !important; color: var(--hofman-muted-fg); text-align: center !important; } /* Filament's paginator lays itself out in a three-column grid (overview, page * size, pages), so it only needs the full width of the card. */ .hofman-standard-prices-pagination { display: block; } .hofman-variant-table { width: 100%; border-collapse: collapse; font-size: 14px; } .hofman-variant-table th, .hofman-variant-table td { padding: 10px 16px; border-bottom: 1px solid var(--hofman-border); text-align: start; vertical-align: top; } .hofman-variant-table th { color: var(--hofman-muted-fg); font-size: 12px; font-weight: 500; } .hofman-variant-table tbody tr { cursor: pointer; } .hofman-variant-table tbody tr:hover { background-color: var(--hofman-surface); } .hofman-variant-table tbody tr:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; } .hofman-variant-table-number { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; } .hofman-variant-table-price { font-weight: 600; } .hofman-variant-table-primary, .hofman-variant-table-note { display: block; } .hofman-variant-table-note { margin-top: 2px; color: var(--hofman-muted-fg); font-size: 12px; font-weight: 400; } .hofman-variant-table-tiers { margin: 0; padding: 0; list-style: none; color: var(--hofman-muted-fg); font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.4; } /* --------------------------------------------------------------------------- * Tables * ------------------------------------------------------------------------- */ /* Numeric columns line up on the decimal, as in the design's price columns. */ .fi-ta-text-item-label { font-variant-numeric: tabular-nums; } /* Struck-through standard price under a dealer price. */ .fi-ta-text .line-through { text-decoration-line: line-through; opacity: 0.6; } /* Dealer discount on a product row: a quiet button until one is set. */ .hofman-product-discount { padding: 2px 8px; border: 1px solid var(--hofman-border); border-radius: 999px; background-color: transparent; color: var(--hofman-muted-fg); font-size: 12px; line-height: 18px; cursor: pointer; } .hofman-product-discount:hover { color: var(--hofman-nav-fg-active); } .hofman-product-discount.is-set { border-color: transparent; background-color: var(--hofman-nav-bg-active); color: var(--hofman-nav-fg-active); font-weight: 500; } /* --------------------------------------------------------------------------- * Buttons in the brand red * ------------------------------------------------------------------------- * Filament paints a solid primary button with `--bg`/`--text`, which it derives * from the generated ramp — and that lands a few shades lighter than the design. * The brand colour and white text are set here for both themes, so a button is * the same red everywhere it appears. */ .fi-btn:not(.fi-outlined).fi-color-primary:not(label), .fi-btn:not(.fi-outlined).fi-color-primary:not(label):where(.dark, .dark *) { background-color: #96150e; color: #fff; } .fi-btn:not(.fi-outlined).fi-color-primary:not(label) > .fi-icon, .fi-btn:not(.fi-outlined).fi-color-primary:not(label):where(.dark, .dark *) > .fi-icon { color: #fff; } :is( .fi-btn:not(.fi-outlined).fi-color-primary:not(label).fi-force-enabled, .fi-btn:not(.fi-outlined).fi-color-primary:not(label):not(.fi-disabled):not([disabled]) ):hover, :is( .fi-btn:not(.fi-outlined).fi-color-primary:not(label).fi-force-enabled, .fi-btn:not(.fi-outlined).fi-color-primary:not(label):not(.fi-disabled):not([disabled]) ):where(.dark, .dark *):hover { background-color: #7a110b; color: #fff; }