/* =================================================================== TopFit Adventure — dealer ordering system. Tokens, type and furniture taken from topfitadventure.com so this sits inside the parent brand rather than beside it. Sampled from the live site, not approximated: red #ec0201 · red-dim #c00201 · bg #0e0e10 · surface #161616 surface-2 #1e1e1e · line #2b2b2b · text #f2f2f2 · muted #9b9b9b radius 3px · IBM Plex Sans / Sans Condensed / Mono Dark only, like the parent site. Flat graphite with a fine engineering grid — a drawing sheet, never a gradient. =================================================================== */ /* Webfonts are linked from each page's , the same families the parent site uses. If they cannot load the stack falls back to system-ui and the layout is unchanged. */ :root { --red: #ec0201; --red-dim: #c00201; --black: #111111; --white: #ffffff; --bg: #0e0e10; --surface: #161616; --surface-2: #1e1e1e; --line: #2b2b2b; --line-soft: #4d4d4d; --text: #f2f2f2; --muted: #9b9b9b; /* House-brand accents. Per the parent brand's own rule these appear only where that brand is the subject, never as general UI colour. */ --loboo: #ec6800; /* Status tones. Deliberately not the brand red except for a genuine negative, so a chip can never be mistaken for a call to action. */ --ok: #4ade80; --ok-bg: rgba(74, 222, 128, .12); --warn: #f0b429; --warn-bg: rgba(240, 180, 41, .12); --live: #6ea8e0; --live-bg: rgba(110, 168, 224, .12); --no: #ff6b60; --no-bg: rgba(255, 107, 96, .12); --done: #9b9b9b; --done-bg: rgba(155, 155, 155, .12); --r: 3px; --maxw: 1180px; --display: "IBM Plex Sans Condensed", system-ui, sans-serif; --body: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; } * { box-sizing: border-box; } /* Several things here are display:flex or display:grid, which beats the `hidden` attribute's own display:none. Without this the cart bar sits on screen showing "0 items". */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--body); color: var(--text); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; background-color: var(--bg); background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 38px 38px, 38px 38px, 190px 190px, 190px 190px; background-position: center top; background-attachment: fixed; } a { color: var(--red); } img { max-width: 100%; } h1, h2, h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.015em; line-height: 1.03; color: var(--white); margin: 0 0 .5em; } h1 { font-size: 2rem; } h2 { font-size: 1.25rem; margin-top: 1.6rem; } h3 { font-size: .98rem; letter-spacing: 0; text-transform: none; } p.sub { color: var(--muted); margin: 0 0 18px; } /* The mono, wide-tracked red label the parent site uses above a heading. */ .eyebrow { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin: 0 0 .7rem; } /* ---------- shell ---------- */ header.top { position: sticky; top: 0; z-index: 60; background: rgba(14, 14, 16, .94); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); display: flex; align-items: center; gap: 18px; padding: 12px 24px; } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .brand .wordmark { height: 30px; width: auto; display: block; } /* Typographic stand-in, shown until the real wordmark PNG is dropped into web/assets/. Same typeface and reds as the parent brand. */ .brand .lockup { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.02em; font-size: 1.32rem; line-height: 1; color: var(--white); white-space: nowrap; } .brand .lockup em { display: block; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: .01em; font-size: .62rem; color: var(--red); margin-top: 2px; } .brand .divider { width: 1px; height: 26px; background: var(--line); flex: 0 0 auto; } .brand .context { font-family: var(--mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } /* Two labels in a row (the page, then who is signed in) get a separator so they do not read as one run-on string. */ .brand .context + .context::before { content: "·"; margin-right: 9px; color: var(--line-soft); } .brand .context:empty { display: none; } .brand .context:empty + .context::before { content: none; } header.top .spacer { flex: 1; } main { max-width: var(--maxw); margin: 0 auto; padding: 22px 24px 40px; } @media (max-width: 719px) { header.top { padding: 10px 16px; gap: 12px; } .brand .context { display: none; } .brand .divider { display: none; } main { padding: 16px 16px 96px; } h1 { font-size: 1.6rem; } } /* ---------- tabs ---------- */ nav.tabs { display: flex; gap: 3px; overflow-x: auto; margin: 0 0 18px; scrollbar-width: none; } nav.tabs::-webkit-scrollbar { display: none; } nav.tabs button { flex: 0 0 auto; border: 1px solid transparent; background: none; color: #b4b4b4; font: inherit; font-size: .83rem; font-weight: 500; cursor: pointer; padding: 9px 14px; border-radius: var(--r); white-space: nowrap; } nav.tabs button:hover { color: #fff; background: var(--surface-2); } nav.tabs button[aria-selected="true"] { color: #fff; background: var(--surface-2); border-color: var(--red); } /* ---------- surfaces ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 15px; margin-bottom: 12px; } .card h3 { margin: 0 0 4px; } .rowline { display: flex; align-items: flex-start; gap: 14px; } .rowline .grow { flex: 1; min-width: 0; } .meta { color: var(--muted); font-size: .82rem; } .mono, .price, td.num, th.num { font-variant-numeric: tabular-nums; } .right { text-align: right; } .price { font-family: var(--mono); font-weight: 500; white-space: nowrap; color: var(--white); } .pill { display: inline-block; padding: 3px 9px; border-radius: var(--r); font-family: var(--mono); font-size: .67rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .pill.good { background: var(--ok-bg); color: var(--ok); } .pill.bad { background: var(--no-bg); color: var(--no); } .pill.wait { background: var(--warn-bg); color: var(--warn); } .pill.open { background: var(--live-bg); color: var(--live); } .pill.done { background: var(--done-bg); color: var(--done); } .pill.warn { background: var(--warn-bg); color: var(--warn); } .pill.muted { background: var(--surface-2); color: var(--muted); } /* ---------- forms ---------- */ label.field { display: block; margin: 0 0 12px; } label.field span { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } input, select, textarea { width: 100%; font: inherit; font-size: .92rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 12px; min-height: 46px; } input::placeholder, textarea::placeholder { color: #6d6d6d; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 1px var(--red); } input[type=checkbox] { width: auto; min-height: 0; accent-color: var(--red); } input[type=file] { padding: 10px; background: var(--surface-2); } textarea { min-height: 78px; resize: vertical; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } } button.btn { font-family: var(--body); font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; padding: 13px 22px; min-height: 46px; border: 1px solid var(--line-soft); background: transparent; color: var(--white); border-radius: var(--r); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } button.btn:hover { background: var(--white); color: var(--black); border-color: var(--white); } button.btn.primary { background: var(--red); border-color: var(--red); color: #fff; } button.btn.primary:hover { background: var(--red-dim); border-color: var(--red-dim); color: #fff; } button.btn.ghost { border-color: transparent; color: var(--muted); } button.btn.ghost:hover { background: var(--surface-2); color: #fff; border-color: transparent; } button.btn.danger { color: var(--no); border-color: var(--line-soft); } button.btn.danger:hover { background: var(--no); color: var(--black); border-color: var(--no); } button.btn:disabled { opacity: .4; cursor: not-allowed; } button.btn:disabled:hover { background: transparent; color: var(--white); border-color: var(--line-soft); } .btnrow { display: flex; flex-wrap: wrap; gap: 8px; } .qty { display: inline-flex; align-items: center; gap: 6px; } .qty input { width: 62px; text-align: center; padding: 8px; min-height: 38px; } .qty button.btn { padding: 8px 12px; min-height: 38px; } /* ---------- banners ---------- */ .banner { border-radius: var(--r); padding: 11px 14px; margin-bottom: 14px; font-size: .88rem; border: 1px solid; } .banner.info { background: var(--surface-2); color: var(--text); border-color: var(--line-soft); } .banner.bad { background: var(--no-bg); color: var(--no); border-color: rgba(255,107,96,.35); } .banner.good { background: var(--ok-bg); color: var(--ok); border-color: rgba(74,222,128,.35); } .banner.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(250,204,21,.35); } .empty { text-align: center; color: var(--muted); padding: 44px 16px; font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; } /* ---------- tables ---------- */ table.data { width: 100%; border-collapse: collapse; font-size: .88rem; } table.data th, table.data td { text-align: left; padding: 10px 11px; border-bottom: 1px solid var(--line); vertical-align: top; } table.data th { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; border-bottom-color: var(--line-soft); } table.data td.num, table.data th.num { text-align: right; } table.data th.num { white-space: nowrap; } table.data tbody tr:hover { background: var(--surface-2); } @media (max-width: 719px) { table.data thead { display: none; } table.data tr { display: block; border: 1px solid var(--line); border-radius: var(--r); padding: 9px; margin-bottom: 9px; background: var(--surface); } table.data tr:hover { background: var(--surface); } table.data td { display: flex; justify-content: space-between; gap: 14px; border: none; padding: 4px 2px; } table.data td::before { content: attr(data-label); font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); flex: 0 0 auto; } table.data td.num { text-align: right; } } /* ---------- cart bar ---------- */ .cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(14, 14, 16, .96); border-top: 1px solid var(--line); backdrop-filter: blur(8px); padding: 11px 24px; display: flex; align-items: center; gap: 14px; } .cartbar .grow { flex: 1; min-width: 0; } .cartbar strong { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; } @media (max-width: 719px) { .cartbar { padding: 10px 16px; gap: 10px; } } /* ---------- dialog ---------- */ dialog { border: 1px solid var(--line); border-radius: var(--r); padding: 0; background: var(--surface); color: var(--text); width: min(580px, calc(100vw - 28px)); box-shadow: 0 24px 70px rgba(0, 0, 0, .6); } dialog::backdrop { background: rgba(0, 0, 0, .68); } dialog .head { padding: 15px 18px; border-bottom: 1px solid var(--line); font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; font-size: 1.05rem; color: var(--white); } dialog .body { padding: 18px; max-height: min(70vh, 580px); overflow: auto; } dialog .body h2 { font-size: 1rem; margin-top: 1.3rem; } dialog .foot { padding: 13px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } /* ---------- history ---------- */ ol.history { list-style: none; margin: 0; padding: 0; } ol.history li { position: relative; padding: 0 0 16px 22px; border-left: 1px solid var(--line); } ol.history li:last-child { border-left-color: transparent; padding-bottom: 0; } ol.history li::before { content: ""; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px; background: var(--red); } ol.history .what { font-weight: 600; color: var(--white); } ol.history .who { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--muted); } /* =================================================================== THE SHOP Laid out like lobooph.com/#shop — filter rail, category pills, search and sort bar, a grid of listings on white image plates, and a wider window when one is opened. Same structure and measurements, with the parent brand's red where Loboo uses its orange. =================================================================== */ .shopwrap { display: grid; grid-template-columns: 236px 1fr; gap: 40px; margin-top: 26px; align-items: start; } @media (max-width: 899px) { .shopwrap { grid-template-columns: 1fr; gap: 20px; } } /* ---------- category pills ---------- */ .pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; } .pills button { font-family: var(--body); font-weight: 600; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; padding: 9px 16px; border: 1px solid var(--line); background: transparent; color: #b4b4b4; border-radius: 100px; cursor: pointer; min-height: 0; transition: color .15s, border-color .15s, background .15s; } .pills button:hover { color: #fff; border-color: var(--line-soft); background: transparent; } .pills button.on { background: var(--red); border-color: var(--red); color: #fff; } .pills button .n { opacity: .65; margin-left: 6px; font-family: var(--mono); font-size: .9em; } /* ---------- filter rail ---------- */ .rail { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); position: sticky; top: 88px; } @media (max-width: 899px) { .rail { position: static; } } .rail-head { display: flex; align-items: center; padding: 15px 16px; border-bottom: 1px solid var(--line); } .rail-head h4 { margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text); font-weight: 500; } .rail-head .clear { margin-left: auto; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); background: none; border: 0; cursor: pointer; padding: 0; min-height: 0; } .rail-head .clear:hover { background: none; color: var(--red-dim); } .rail-sect { padding: 14px 16px; border-bottom: 1px solid var(--line); } .rail-sect:last-child { border-bottom: 0; } .rail-sect > h5 { margin: 0 0 10px; font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; } .rail-list { max-height: 360px; overflow: auto; margin: 0 -4px; padding: 0 4px; } .rail-list::-webkit-scrollbar { width: 8px; } .rail-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 100px; } .catrow { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; } .catrow input { flex: 0 0 auto; margin: 0; } .catrow span.nm { flex: 1; font-size: .82rem; color: #cfcfcf; overflow-wrap: anywhere; } .catrow:hover span.nm { color: #fff; } .catrow span.n { font-family: var(--mono); font-size: .68rem; color: var(--muted); flex: 0 0 auto; } .rail-filter input { padding: 8px 10px; min-height: 0; font-size: .8rem; } /* ---------- search / count / sort ---------- */ .shoptop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); } .shopsearch { position: relative; flex: 1 1 260px; min-width: 200px; order: -1; } .shopsearch input { width: 100%; padding: 11px 14px 11px 36px; font-size: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); } .shopsearch input:focus { border-color: var(--red); outline: none; box-shadow: none; } .shopsearch input::-webkit-search-cancel-button { display: none; } .shopsearch::before { content: ""; position: absolute; left: 13px; top: 50%; width: 11px; height: 11px; margin-top: -7px; border: 1.6px solid var(--muted); border-radius: 50%; pointer-events: none; } .shopsearch::after { content: ""; position: absolute; left: 22px; top: 50%; width: 6px; height: 1.6px; margin-top: 3px; background: var(--muted); transform: rotate(45deg); pointer-events: none; } .shoptop .count { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-width: 90px; } .shoptop .sorter { margin-left: auto; display: flex; align-items: center; gap: 9px; } .shoptop .sorter label { margin: 0; } .shoptop select { width: auto; font-size: .82rem; padding: 9px 11px; min-height: 0; background: var(--surface); } /* ---------- the grid of listings ---------- */ .shopgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); margin-top: 24px; } .listing { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; cursor: pointer; } .listing:hover { border-color: var(--red); transform: translateY(-3px); } .listing .art { aspect-ratio: 1/1; background: #ffffff; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; } .listing .art img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px; } /* The plate shown until a photo exists. Hatched so it reads as deliberately empty rather than as a failed image. */ .noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, #f4f4f4 0 11px, #ececec 11px 22px); color: #8a8a8a; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 10px; line-height: 1.5; } .modalart .noimg { font-size: .66rem; letter-spacing: .16em; } .listing .meta { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; } .listing .lcat { display: block; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--red); overflow-wrap: anywhere; } .listing h4 { margin: 0; font-family: var(--body); font-weight: 600; font-size: .85rem; line-height: 1.45; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-transform: none; letter-spacing: 0; } .listing .lsku { font-family: var(--mono); font-size: .62rem; color: var(--muted); overflow-wrap: anywhere; } .listing .lfoot { margin-top: auto; display: flex; align-items: flex-end; gap: 8px; padding-top: 4px; } .listing .lfoot .price { font-size: .92rem; } .listing .lfoot .act { margin-left: auto; } .listing .lfoot .act button.btn { padding: 7px 12px; min-height: 34px; font-size: .68rem; } @media (max-width: 719px) { .shopgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .listing h4 { font-size: .78rem; } .listing .lcat { font-size: .55rem; } .listing .meta { padding: 11px 12px 13px; } } /* ---------- the wider window ---------- */ dialog.wide { width: min(720px, calc(100vw - 28px)); border-radius: 6px; } .modaltop { display: grid; grid-template-columns: 190px 1fr; gap: 22px; padding: 26px; border-bottom: 1px solid var(--line); align-items: center; } .modalart { aspect-ratio: 1/1; background: #fff; border-radius: var(--r); overflow: hidden; position: relative; } .modalart img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 8px; } .modaltop h3 { margin: 0 0 6px; font-size: 1.22rem; line-height: 1.35; overflow-wrap: anywhere; text-transform: none; letter-spacing: -.01em; } .modalbody { padding: 22px 26px 26px; } .modalbody h4 { margin: 0 0 12px; font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 500; } @media (max-width: 719px) { .modaltop { grid-template-columns: 1fr; gap: 14px; padding: 20px 18px; } .modalart { max-width: 220px; margin: 0 auto; width: 100%; } .modalbody { padding: 18px 20px 22px; } } /* ---------- the rail as a disclosure ---------- On a wide screen the script forces it open and the summary is just the heading. On a phone it is a real toggle, so the grid starts within a thumb's reach of the top rather than below seventy categories. */ details.rail > summary { list-style: none; cursor: default; } details.rail > summary::-webkit-details-marker { display: none; } details.rail > summary .on { margin-left: 9px; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red); } @media (max-width: 899px) { details.rail > summary { cursor: pointer; } details.rail > summary::after { content: ""; margin-left: 12px; width: 7px; height: 7px; flex: 0 0 auto; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); margin-top: -4px; transition: transform .15s; } details.rail[open] > summary::after { transform: rotate(-135deg); margin-top: 2px; } details.rail > summary:hover h4 { color: var(--red); } details.rail:not([open]) > summary { border-bottom: 0; } /* Eight categories wrap to four rows on a phone and push the products off the screen, so they become one row you swipe instead. */ .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px 2px; } .pills::-webkit-scrollbar { display: none; } .pills button { flex: 0 0 auto; } .rail-list { max-height: 260px; } } /* ---------- headline figures ---------- */ .statrow { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .stat { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 13px 15px; display: flex; flex-direction: column; gap: 3px; } .stat .lbl { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .stat strong { font-family: var(--head); font-size: 1.32rem; letter-spacing: .01em; color: var(--text); font-weight: 700; } .stat .note { font-size: .74rem; color: var(--muted); } /* ---------- the count sheet ---------- A wide box with big figures: this gets typed into a hundred times in a row, often on a tablet held in one hand. */ input.countbox { width: 92px; text-align: right; padding: 8px 10px; min-height: 0; font-size: 1rem; background: var(--surface-2); border: 1px solid var(--line-soft); } input.countbox:focus { border-color: var(--red); outline: none; } input.countbox::-webkit-outer-spin-button, input.countbox::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input.countbox { -moz-appearance: textfield; } @media (max-width: 720px) { input.countbox { width: 76px; } }