/* * Cards and the price bar for the client order forms. * * Plain CSS on purpose. This project has no Vite build for the panels — they * serve Filament's pre-compiled app.css, which contains Filament's own * `fi-*` semantics and none of Tailwind's utility classes. A `class="flex * gap-4"` written in a Blade view here renders as unstyled markup, so anything * bespoke has to bring its own rules. * * Registered on the client panel only, in ClientPanelProvider: * * ->assets([Css::make('order-cards', resource_path('css/order-cards.css'))]) * * which `php artisan filament:assets` copies to public/css/app/order-cards.css. * Editing this file therefore needs that command re-run — composer's * post-autoload-dump does it too, by way of `filament:upgrade`. * * Colours come from the variables FilamentColor writes into :root at runtime * (--gray-*, --primary-*, --success-*) and the sizes from the Tailwind theme * block in app.css (--radius-xl, --text-sm), so the cards track the panel's * palette and dark mode instead of hard-coding a second one. Dark mode is the * `.dark` class on , which is how the compiled stylesheet does it. */ /* ------------------------------------------------------------------ * * Choice cards — a radio group that reads as a row of boxes * ------------------------------------------------------------------ */ .oc-cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } /* Logo-led tiles are wider: a distribution name and its architecture have to sit beside the mark without wrapping. */ .oc-cards--os { grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); } /* An amount tile holds one figure and nothing else, so it is as narrow as a five-digit rupee sum will go and a row of them reads as a keypad. */ .oc-cards--amounts { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); } /* Symmetric side padding rather than centred text alone: the tick is absolutely placed 0.5rem from the right edge, and the gutter is what keeps a wide figure from sliding underneath it. */ .oc-cards--amounts .oc-card-frame { align-items: center; padding: 0.8125rem 1.5rem; text-align: center; } /* The figure is the card, so it is bigger than a card title anywhere else, and tabular so a row of amounts lines up down its digits. */ .oc-cards--amounts .oc-card-title { font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; } .oc-card { position: relative; display: block; cursor: pointer; } /* The real radio is kept in the accessibility tree — reachable by keyboard and by wire:model — and taken out of sight, so the label can be the whole box. `display: none` would drop it from tab order and from the form. */ .oc-card-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .oc-card-frame { position: relative; display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 0.875rem 1rem; 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%); transition: box-shadow 0.15s ease, background-color 0.15s ease; } .dark .oc-card-frame { background-color: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-700); } .oc-card:hover .oc-card-frame { box-shadow: 0 0 0 1px var(--gray-300), 0 2px 6px -1px rgb(0 0 0 / 8%); } .dark .oc-card:hover .oc-card-frame { box-shadow: 0 0 0 1px var(--gray-600); } /* Selected. Driven from the input's own :checked state rather than a class rendered by the server, so the box lights up on the click instead of after the Livewire round trip that live() sends. */ .oc-card:has(.oc-card-input:checked) .oc-card-frame { background-color: color-mix(in oklab, var(--primary-500) 6%, transparent); box-shadow: 0 0 0 2px var(--primary-600), 0 2px 8px -2px color-mix(in oklab, var(--primary-600) 25%, transparent); } .dark .oc-card:has(.oc-card-input:checked) .oc-card-frame { background-color: color-mix(in oklab, var(--primary-400) 12%, var(--gray-900)); box-shadow: 0 0 0 2px var(--primary-500); } /* The hidden input keeps the focus, so its ring has to be drawn out here. */ .oc-card:has(.oc-card-input:focus-visible) .oc-card-frame { outline: 2px solid var(--primary-600); outline-offset: 2px; } .oc-card:has(.oc-card-input:disabled) { cursor: not-allowed; opacity: 0.55; } /* ------------------------------------------------------------------ * * Card contents * ------------------------------------------------------------------ */ .oc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .oc-card-title { font-size: var(--text-sm, 0.875rem); font-weight: 600; line-height: 1.3; color: var(--gray-950); } .dark .oc-card-title { color: var(--color-white, #fff); } .oc-card-desc { font-size: var(--text-xs, 0.75rem); line-height: 1.45; color: var(--gray-500); } .dark .oc-card-desc { color: var(--gray-400); } .oc-badge { flex: none; padding: 0.0625rem 0.375rem; border-radius: 0.375rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; color: var(--primary-700); background-color: color-mix(in oklab, var(--primary-500) 12%, transparent); } .dark .oc-badge { color: var(--primary-300); background-color: color-mix(in oklab, var(--primary-400) 18%, transparent); } .oc-specs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.375rem; } .oc-spec { padding: 0.125rem 0.375rem; border-radius: 0.375rem; font-size: var(--text-xs, 0.75rem); font-weight: 500; white-space: nowrap; color: var(--gray-700); background-color: var(--gray-100); } .dark .oc-spec { color: var(--gray-300); background-color: var(--gray-800); } /* Pushed to the bottom edge so a row of cards of differing heights still lines its prices up. */ .oc-card-foot { display: flex; align-items: baseline; gap: 0.25rem; margin-top: auto; padding-top: 0.125rem; } .oc-price { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; color: var(--gray-950); } .dark .oc-price { color: var(--color-white, #fff); } .oc-price-unit { font-size: var(--text-xs, 0.75rem); color: var(--gray-500); } .dark .oc-price-unit { color: var(--gray-400); } /* The tick only exists to confirm the choice at a glance; the ring and the tint already carry it, so it costs no layout space. */ .oc-tick { position: absolute; top: 0.5rem; right: 0.5rem; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 9999px; color: var(--color-white, #fff); background-color: var(--primary-600); opacity: 0; transform: scale(0.6); transition: opacity 0.15s ease, transform 0.15s ease; } .oc-card:has(.oc-card-input:checked) .oc-tick { opacity: 1; transform: scale(1); } .oc-tick svg { width: 0.75rem; height: 0.75rem; } /* ------------------------------------------------------------------ * * The logo-led variant, for operating systems * ------------------------------------------------------------------ */ .oc-card--os .oc-card-frame { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.75rem 1.75rem 0.75rem 0.875rem; } /* Everything that is not the logo or the tick, so the one frame serves both a column of specs and a mark with two lines beside it. */ .oc-card-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.5rem; min-width: 0; } .oc-card--os .oc-card-body { gap: 0.1875rem; } .oc-logo { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.625rem; background-color: var(--gray-50); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-500) 12%, transparent); } .dark .oc-logo { background-color: color-mix(in oklab, var(--color-white, #fff) 8%, transparent); } /* contain, not cover: the set runs from a 172x191 mascot to a square icon, and every one of them has to sit in the same box without being cropped. */ .oc-logo img { width: 1.875rem; height: 1.875rem; object-fit: contain; } /* ------------------------------------------------------------------ * * The price bar * * A card that floats at the foot of the viewport on the review step, carrying * the total, the breakdown behind it, what the wallet has to say and the button * that spends it. One card, one place: the total and the control that acts on it * belong within a thumb's reach of each other, not a screen apart. * * `position: fixed`, not `sticky`. Sticky cannot work inside a schema: Filament * wraps each component in `.fi-grid-col > .fi-sc-component`, which is a box * exactly the bar's own height — nothing to stick within — and every `.fi-grid` * above it sets `overflow-x: hidden`, which makes it a scroll container. * * Fixed loses the content column's left edge and width, and there is no CSS * expression for either: the sidebar is a sticky flex sibling whose width * changes when it collapses. So the outer `.oc-pricebar` stays in the flow as a * measuring stick and the Blade's Alpine copies its geometry onto the card. The * `oc-is-pinned` class is added by that same `x-init`, which is what makes the * no-JavaScript case a plain panel at the foot of the step rather than a card * stranded at the top of one. * * The card grows upward when opened, because it is positioned by its bottom * edge — so the figure stays where the thumb left it and the breakdown unfolds * above it. * ------------------------------------------------------------------ */ .oc-pricebar { margin-top: 1.5rem; } /* Pinned: the wrapper keeps its width and gives up its height, so the step's flow does not carry a gap where the card used to be. */ .oc-pricebar.oc-is-pinned { height: 0; margin-top: 0; } .oc-pricebar-inner { overflow: hidden; border-radius: var(--radius-xl, 0.75rem); background-color: var(--color-white, #fff); box-shadow: 0 0 0 1px var(--gray-200), 0 -6px 20px -6px rgb(0 0 0 / 14%); } /* `left` and `width` arrive inline, from the measurement. */ .oc-is-pinned .oc-pricebar-inner { position: fixed; bottom: 0.75rem; z-index: 20; } /* A long breakdown scrolls inside the card rather than growing past the top of the window. */ .oc-is-pinned .oc-lines { max-height: min(50vh, 22rem); overflow-y: auto; } /* Room under the wizard's own Back/Next row, so the card rests over nothing when the page is scrolled to its end. Keyed on the active step, so the gap exists only on the step that pins a bar. Deeper below 48rem, where the pay group wraps onto a second line and the card is taller. */ .fi-sc-wizard:has(.fi-sc-wizard-step.fi-active .oc-pricebar.oc-is-pinned) .fi-sc-wizard-footer { padding-bottom: 6rem; } @media (max-width: 48rem) { .fi-sc-wizard:has(.fi-sc-wizard-step.fi-active .oc-pricebar.oc-is-pinned) .fi-sc-wizard-footer { padding-bottom: 9rem; } } .dark .oc-pricebar-inner { background-color: var(--gray-900); box-shadow: 0 0 0 1px var(--gray-700), 0 -6px 20px -6px rgb(0 0 0 / 40%); } /* The header row: the expand control on the left, the wallet and the button on the right. They are siblings rather than nested because `.oc-pricebar-bar` is itself a