/* ============================================================================ Storefront ---------------------------------------------------------------------------- Deliberately not the admin theme. AdminLTE and its Bootstrap 3 are built for a dense back office behind a login; a shop is read by a customer on a phone, often on a slow connection, and every kilobyte of a stylesheet written for somebody else's problem is paid for by that customer. This file is the whole front end -- no framework, no CDN. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; } ul, ol { list-style: none; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } :root { --ink: #101828; --ink-soft: #475467; --ink-faint: #98a2b3; --line: #e4e7ec; --line-soft: #f2f4f7; --bg: #ffffff; --bg-tint: #f9fafb; /* Trustworthy blue, not the storefront's old green: a deliberate, single-hue "marketplace" palette (see database/seeders/data/README.md's sibling design canvas -- direction B). Stock-positive and alert colors are their own tokens rather than shades of the brand hue, since "in stock" and "primary action" are different facts and shouldn't share a color by coincidence of both once being brand-green. */ --brand: #2952cc; --brand-dark: #1c3a99; --brand-light: #5b7fe0; --brand-tint: #eaf0fd; --stock-in: #087443; --stock-in-tint: #ecfdf3; --amber: #b54708; --amber-tint: #fffaeb; --red: #d92d20; --red-tint: #fef3f2; --grad-brand: linear-gradient(135deg, var(--brand-light), var(--brand)); --grad-accent: linear-gradient(135deg, #b9c5f5, #7d93e0); --shadow-glow: 0 10px 24px -8px rgba(41,82,204,.45); --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px; --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04); --shadow-md: 0 2px 6px -2px rgba(16,24,40,.08), 0 8px 20px -6px rgba(16,24,40,.10); --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } body { font-family: var(--sans); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } .wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; } /* ------------------------------------------------------------------- header */ .hdr { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .hdr__in { display: flex; align-items: center; gap: 18px; height: 64px; } .hdr__brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .hdr__mark { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; background: var(--grad-brand); } .hdr__name { font-weight: 650; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdr__right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .hdr__search { flex: 1; min-width: 0; max-width: 480px; display: none; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-tint); transition: border-color .14s ease, box-shadow .14s ease, background .14s ease; } @media (min-width: 640px) { .hdr__search { display: flex; } } .hdr__search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(41,82,204,.14); background: #fff; } .hdr__search svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--ink-faint); } .hdr__search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 14px; } .hdr__catnav { background: #101a3d; } .hdr__catnav-in { display: flex; gap: 20px; padding: 9px 20px; overflow-x: auto; } .hdr__catnav-in a { color: #b7c2e0; font-size: 13px; font-weight: 500; white-space: nowrap; transition: color .14s ease; } .hdr__catnav-in a:hover, .hdr__catnav-in a.is-active { color: #fff; font-weight: 600; } .cart-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-full); background: var(--grad-brand); color: #fff; font-weight: 550; font-size: 14px; box-shadow: 0 2px 8px -2px rgba(41,82,204,.4); transition: transform .14s ease, box-shadow .14s ease; } .cart-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); } .cart-btn__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--red); display: grid; place-items: center; font-size: 12px; font-weight: 700; animation: pop .3s ease; } @keyframes pop { from { transform: scale(.5); } to { transform: scale(1); } } /* --------------------------------------------------------------------- hero */ .hero { position: relative; overflow: hidden; padding: 56px 0 48px; background: radial-gradient(120% 100% at 10% 0%, var(--brand-tint), transparent 60%), var(--bg-tint); border-bottom: 1px solid var(--line); } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; z-index: 0; pointer-events: none; } .hero::before { width: 260px; height: 260px; top: -90px; right: -50px; background: var(--grad-brand); animation: floaty 9s ease-in-out infinite; } .hero::after { width: 200px; height: 200px; bottom: -100px; left: 12%; background: var(--grad-accent); animation: floaty 11s ease-in-out infinite reverse; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } .hero > .wrap { position: relative; z-index: 1; } .hero__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.15; letter-spacing: -.03em; font-weight: 700; margin-top: 10px; max-width: 18ch; } .hero p { color: var(--ink-soft); margin-top: 14px; max-width: 52ch; font-size: 16px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease; } .btn--primary { background: var(--grad-brand); color: #fff; box-shadow: 0 2px 8px -2px rgba(41,82,204,.4); } .btn--primary:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); } .btn--outline { background: #fff; border-color: var(--line); color: var(--ink); } .btn--outline:hover { border-color: var(--brand); color: var(--brand-dark); } .btn--ghost { background: transparent; color: var(--ink-soft); } .btn--ghost:hover { color: var(--ink); background: var(--line-soft); } .btn--danger { background: transparent; color: var(--red); border-color: #f0c9c5; } .btn--danger:hover { background: var(--red-tint); } .btn--block { width: 100%; } .btn--sm { height: 34px; padding: 0 12px; font-size: 13.5px; } .btn--lg { height: 48px; padding: 0 26px; font-size: 15.5px; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* -------------------------------------------------------------------- cards */ .section { padding: 44px 0; } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .section__head h2 { font-size: 21px; letter-spacing: -.02em; font-weight: 650; } .section__head p { color: var(--ink-faint); font-size: 14px; margin-top: 2px; } .grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } } .card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; animation: cardIn .4s ease both; } .card:hover { box-shadow: var(--shadow-md); border-color: #d8dde4; transform: translateY(-4px); } @keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .grid > .card:nth-child(2n) { animation-delay: .04s; } .grid > .card:nth-child(3n) { animation-delay: .08s; } .grid > .card:nth-child(4n) { animation-delay: .12s; } .card__media { aspect-ratio: 1 / 1; background: var(--bg-tint); display: grid; place-items: center; overflow: hidden; } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .card:hover .card__media img { transform: scale(1.06); } .card__media--empty { color: var(--ink-faint); } .card__body { padding: 13px 14px 15px; display: flex; flex-direction: column; flex: 1; } .card__cat { font-size: 11.5px; color: var(--brand-dark); text-transform: uppercase; letter-spacing: .06em; font-weight: 650; } .card__name { font-weight: 550; margin-top: 3px; line-height: 1.35; } .card__var { font-size: 13px; color: var(--ink-faint); } .card__brand { font-size: 12px; color: var(--ink-faint); margin-top: 1px; } .card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .card__price { font-weight: 700; letter-spacing: -.01em; color: var(--ink); } /* -------------------------------------------------------------------- badge */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; white-space: nowrap; } .badge--in { background: var(--stock-in-tint); color: var(--stock-in); } .badge--low { background: var(--amber-tint); color: var(--amber); } .badge--out { background: var(--line-soft); color: var(--ink-faint); } .badge--paid { background: var(--stock-in-tint); color: var(--stock-in); } .badge--due { background: var(--amber-tint); color: var(--amber); } /* --------------------------------------------------------------- catalogue */ /* One column on a phone (the sidebar stacks above the results, since there is no script here to hide it behind a toggle); a 240px sidebar beside the results from 900px up. */ .catalogue { display: grid; gap: 24px; align-items: start; grid-template-columns: 1fr; } @media (min-width: 900px) { .catalogue { grid-template-columns: 240px 1fr; } } .filters-panel { display: flex; flex-direction: column; gap: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; padding: 18px; } .filter-group { display: flex; flex-direction: column; gap: 9px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); } .filter-group:last-of-type { border-bottom: 0; padding-bottom: 0; } .filter-group__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); } .filter-option { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-soft); cursor: pointer; } .filter-option input[type="checkbox"], .filter-option input[type="radio"] { accent-color: var(--brand); width: 15px; height: 15px; flex-shrink: 0; } .filter-range { display: flex; align-items: center; gap: 8px; } .filter-range span { color: var(--ink-faint); } .catalogue__results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .catalogue__results-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; } .catalogue__results-head p { color: var(--ink-faint); font-size: 13.5px; margin-top: 2px; } .catalogue__sort { display: flex; align-items: center; gap: 8px; } .grid--dense { gap: 14px; } .grid--dense .card__media { aspect-ratio: 4 / 3; } /* ------------------------------------------------------------------ filters */ .field { display: block; } .field__label { display: block; font-size: 13px; font-weight: 550; color: var(--ink-soft); margin-bottom: 6px; } .field__hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; } .input, .select, .textarea { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; transition: border-color .14s ease, box-shadow .14s ease; } .textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 1.5; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(41,82,204,.14); } .select { appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379828f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 16px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 6px 13px; border-radius: var(--r-full); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-soft); background: #fff; } .chip { transition: border-color .14s ease, background .14s ease, color .14s ease; } .chip:hover { border-color: var(--brand); color: var(--brand-dark); } .chip--on { background: var(--grad-brand); border-color: transparent; color: #fff; font-weight: 550; box-shadow: 0 2px 8px -3px rgba(41,82,204,.5); } .chip--on:hover { color: #fff; } /* ---------------------------------------------------------------- two-column */ .split { display: grid; gap: 28px; align-items: start; } @media (min-width: 900px) { .split { grid-template-columns: 1.6fr 1fr; } } @media (min-width: 900px) { .split--wide { grid-template-columns: 1fr 1fr; } } .panel { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; } .panel__head { padding: 15px 18px; border-bottom: 1px solid var(--line); } .panel__head h3 { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; } .panel__head p { font-size: 13px; color: var(--ink-faint); margin-top: 2px; } .panel__body { padding: 18px; } .panel__foot { padding: 15px 18px; border-top: 1px solid var(--line); background: var(--bg-tint); border-radius: 0 0 var(--r-md) var(--r-md); } .panel--sticky { position: sticky; top: 84px; } /* --------------------------------------------------------------------- cart */ .line { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-soft); } .line:last-child { border-bottom: 0; } .line__media { width: 74px; height: 74px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--bg-tint); overflow: hidden; display: grid; place-items: center; } .line__media img { width: 100%; height: 100%; object-fit: cover; } .line__main { flex: 1; min-width: 0; } .line__name { font-weight: 550; } .line__meta { font-size: 13px; color: var(--ink-faint); } .line__right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .qty { width: 74px; height: 36px; text-align: center; } .totals { display: flex; flex-direction: column; gap: 10px; } .totals__row { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--ink-soft); } .totals__row--big { font-size: 18px; font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); padding-top: 12px; letter-spacing: -.01em; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------- misc */ .notice { display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid; font-size: 14px; margin-bottom: 20px; } .notice--ok { background: var(--brand-tint); border-color: #bfe0d3; color: var(--brand-dark); } .notice--warn { background: var(--amber-tint); border-color: #f0dcbb; color: var(--amber); } .notice--error { background: var(--red-tint); border-color: #f2cac6; color: var(--red); } .empty { padding: 60px 20px; text-align: center; } .empty h3 { font-size: 17px; font-weight: 620; } .empty p { color: var(--ink-faint); margin-top: 6px; } /* $paginator->links() renders whichever pagination view this app's own resources/views/vendor/pagination/ override supplies for the name AppServiceProvider selects -- and it calls Paginator::useBootstrap() right after useBootstrapThree(), so the second call wins: bootstrap-4.blade.php,