/* * Board layouts (HANDOVER.md §4z6, 25 Sep 2026): Codex's six approved presets * (codex/layout-presets 85ea580) on the live board, chosen per shop in the operator console. * * The server writes `data-layout` on for a shop with a layout; a shop without one keeps the * standard board, untouched, because the four blocks below are `display: contents` until a layout * arranges them. Every colour is the shop's own ten (--client-*); light only. The wall display * never takes a layout ("No TV layout is changed"), hence :not([data-wall='true']) throughout. */ .board-block { display: contents; } /* ---- Selected = a solid fill in the shop's primary colour, on every board -------------------- Harshal's standing rule: a selected option is filled, never an underline or coloured text. */ @media (min-width: 1101px), (min-width: 901px) and (orientation: landscape) { .client-board:not([data-wall='true']) .client-header .dashboard-nav { gap: 6px; } .client-board:not([data-wall='true']) .client-header .dashboard-nav a { align-self: center; min-height: 40px; padding: 0 14px; border-bottom: 0; border-radius: 8px; } .client-board:not([data-wall='true']) .client-header .dashboard-nav a[aria-current='page'] { background: var(--client-primary); color: var(--client-on-primary); border-bottom: 0; } } @media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) { .client-board:not([data-wall='true']) .client-header .dashboard-nav a[aria-current='page'] { background: var(--client-primary); color: var(--client-on-primary); border-radius: 10px; } } /* ---- What every layout shares --------------------------------------------------------------- */ /* The shop's colour as the header band; on a wide screen the menu sits on its own white bar below. */ .client-board[data-layout]:not([data-wall='true']) .client-header { background: var(--client-primary); color: var(--client-on-primary); border-bottom: 0; } .client-board[data-layout]:not([data-wall='true']) .client-brand, .client-board[data-layout]:not([data-wall='true']) .client-brand__name, .client-board[data-layout]:not([data-wall='true']) .client-header .tab-menu-btn, .client-board[data-layout]:not([data-wall='true']) .client-header .share-btn { color: var(--client-on-primary); } .client-board[data-layout]:not([data-wall='true']) .client-header :is(.tab-menu-btn, .share-btn):hover { background: color-mix(in srgb, var(--client-on-primary) 16%, transparent); color: var(--client-on-primary); } .client-board[data-layout]:not([data-wall='true']) .client-brand__mark { background: var(--client-on-primary); color: var(--client-primary); } @media (min-width: 1101px), (min-width: 901px) and (orientation: landscape) { .client-board[data-layout]:not([data-wall='true']) .client-header { flex-wrap: wrap; height: auto; min-height: 0; padding-top: 18px; row-gap: 18px; } /* The menu on its own white bar under the band, edge to edge (the shadow fills to both edges without widening the page). */ .client-board[data-layout]:not([data-wall='true']) .client-header .dashboard-nav { order: 3; flex: 0 0 100%; height: auto; padding: 8px 0; justify-content: center; background: var(--client-surface); box-shadow: 0 0 0 100vmax var(--client-surface), 0 1px 0 100vmax var(--client-line); clip-path: inset(0 -100vmax -1px); } .client-board[data-layout]:not([data-wall='true']) .client-header .share-btn { margin-left: auto; } .client-board[data-layout]:not([data-wall='true']) .client-header .dashboard-nav a:not([aria-current='page']) { color: var(--client-ink); } } /* The live tab's blocks become one grid; the section heading spans it. */ .client-board[data-layout]:not([data-wall='true'])[data-active-tab='live'] #overview { display: contents; } .client-board[data-layout]:not([data-wall='true'])[data-active-tab='live'] .board-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--layout-gap, 24px); align-items: start; } .client-board[data-layout]:not([data-wall='true'])[data-active-tab='live'] .board-main > *, .client-board[data-layout]:not([data-wall='true'])[data-active-tab='live'] #overview > * { grid-column: 1 / -1; min-width: 0; } .client-board[data-layout]:not([data-wall='true']) [data-block='cards'] { display: block; } .client-board[data-layout]:not([data-wall='true']) #overview .client-rate-panels--retail, .client-board[data-layout]:not([data-wall='true']) #overview .spot-grid, .client-board[data-layout]:not([data-wall='true']) #overview .client-unit-cards { margin-top: 0; } .client-board[data-layout]:not([data-wall='true'])[data-active-tab='live'] #products { display: contents; } .client-board[data-layout]:not([data-wall='true'])[data-active-tab='live'] #products > * { grid-column: 1 / -1; min-width: 0; } /* Retail and RTGS name themselves in their panel heads, so the RTGS book's section heading goes (hidden by attribute, so client-board.js still finds and toggles it). */ .client-board[data-layout]:not([data-wall='true']) #products > .section-heading { display: none; } /* The app banner runs the full width, last. */ .client-board[data-layout]:not([data-wall='true']) #app-banner { order: 10; margin: 0; } /* Corners and spacing per layout, from the presets. */ .client-board[data-layout]:not([data-wall='true']) { --layout-radius: 6px; } .client-board[data-layout='ledger']:not([data-wall='true']), .client-board[data-layout='minimal']:not([data-wall='true']) { --layout-radius: 0px; --layout-gap: 30px; } .client-board[data-layout='compact']:not([data-wall='true']) { --layout-radius: 3px; --layout-gap: 16px; } .client-board[data-layout]:not([data-wall='true']) :is(.client-unit-card, .client-rate-panel, .spot-card, .app-banner) { border-radius: var(--layout-radius); border: 1px solid var(--client-line); box-shadow: 0 2px 6px color-mix(in srgb, var(--client-ink) 10%, transparent); } /* ---- The six arrangements, on a wide screen --------------------------------------------------- The order the presets read in, top to bottom; two columns where the preset pairs sections. */ @media (min-width: 1024px) { .client-board[data-layout]:not([data-wall='true'])[data-active-tab='live'] .board-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Classic: cards on the left beside Retail and spot; RTGS below. */ .client-board[data-layout='classic'][data-active-tab='live'] .board-main { grid-template-columns: 1.15fr 1fr; } .client-board[data-layout='classic'] [data-block='cards'] { grid-column: 1 / 2 !important; grid-row: span 2; } .client-board[data-layout='classic'] [data-block='retail'], .client-board[data-layout='classic'] [data-block='spot'] { grid-column: 2 / 3 !important; } /* Ledger: Retail beside the cards, then RTGS beside spot. */ .client-board[data-layout='ledger'][data-active-tab='live'] .board-main { grid-template-columns: 1.2fr 1fr; } .client-board[data-layout='ledger'] [data-block='retail'] { grid-column: 1 / 2 !important; order: 1; } .client-board[data-layout='ledger'] [data-block='cards'] { grid-column: 2 / 3 !important; order: 2; } .client-board[data-layout='ledger'] [data-block='rtgs'] { grid-column: 1 / 2 !important; order: 3; } .client-board[data-layout='ledger'] [data-block='spot'] { grid-column: 2 / 3 !important; order: 4; } /* Market: spot across the top, Retail beside RTGS, the cards below. */ .client-board[data-layout='market'] [data-block='spot'] { order: 1; } .client-board[data-layout='market'] [data-block='retail'] { grid-column: 1 / 2 !important; order: 2; } .client-board[data-layout='market'] [data-block='rtgs'] { grid-column: 2 / 3 !important; order: 3; } .client-board[data-layout='market'] [data-block='cards'] { order: 4; } /* Showroom: the cards large across the top, Retail beside RTGS, spot below. */ .client-board[data-layout='showroom'] [data-block='cards'] { order: 1; } .client-board[data-layout='showroom'] [data-block='retail'] { grid-column: 1 / 2 !important; order: 2; } .client-board[data-layout='showroom'] [data-block='rtgs'] { grid-column: 2 / 3 !important; order: 3; } .client-board[data-layout='showroom'] [data-block='spot'] { order: 4; } /* Minimal: one column, narrower, with room around every figure. */ .client-board[data-layout='minimal'][data-active-tab='live'] .board-main { grid-template-columns: minmax(0, 1fr); max-width: 980px; margin: 0 auto; width: 100%; } /* Compact: RTGS beside Retail first, then the cards and spot. */ .client-board[data-layout='compact'] [data-block='rtgs'] { grid-column: 1 / 2 !important; order: 1; } .client-board[data-layout='compact'] [data-block='retail'] { grid-column: 2 / 3 !important; order: 2; } .client-board[data-layout='compact'] [data-block='cards'] { order: 3; } .client-board[data-layout='compact'] [data-block='spot'] { order: 4; } /* In a half-width column the cards go two to a line, 24kt and Silver first. */ .client-board:is([data-layout='classic'], [data-layout='ledger']) .client-unit-cards > li { grid-column: span 3; } } /* ---- One column (phones and portrait tablets): each layout's reading order ------------------- */ @media (max-width: 1023px) { .client-board[data-layout='ledger'] [data-block='retail'] { order: 1; } .client-board[data-layout='ledger'] [data-block='cards'] { order: 2; } .client-board[data-layout='ledger'] [data-block='rtgs'] { order: 3; } .client-board[data-layout='ledger'] [data-block='spot'] { order: 4; } .client-board[data-layout='market'] [data-block='spot'] { order: 1; } .client-board[data-layout='market'] [data-block='retail'] { order: 2; } .client-board[data-layout='market'] [data-block='rtgs'] { order: 3; } .client-board[data-layout='market'] [data-block='cards'] { order: 4; } .client-board[data-layout='showroom'] [data-block='cards'] { order: 1; } .client-board[data-layout='showroom'] [data-block='retail'] { order: 2; } .client-board[data-layout='showroom'] [data-block='rtgs'] { order: 3; } .client-board[data-layout='showroom'] [data-block='spot'] { order: 4; } .client-board[data-layout='compact'] [data-block='rtgs'] { order: 1; } .client-board[data-layout='compact'] [data-block='retail'] { order: 2; } .client-board[data-layout='compact'] [data-block='cards'] { order: 3; } .client-board[data-layout='compact'] [data-block='spot'] { order: 4; } } /* The section heading and anything that is not a block stay first and last. */ .client-board[data-layout]:not([data-wall='true']) #overview > .section-heading { order: 0; } .client-board[data-layout]:not([data-wall='true']) :is(.board-unavailable, .tab-empty) { order: -1; } /* ---- Each layout's own character ------------------------------------------------------------- */ /* Ledger: a rate book: serif headings, ruled rows, flat cards. */ .client-board[data-layout='ledger']:not([data-wall='true']) :is(h2, h3, .client-brand__name) { font-family: Georgia, 'Times New Roman', serif; } .client-board[data-layout='ledger']:not([data-wall='true']) .client-rate-panel h3 { font-family: inherit; background: var(--client-surface); color: var(--client-ink); border-top: 1px solid var(--client-primary); border-bottom: 1px solid var(--client-primary); } .client-board[data-layout='ledger']:not([data-wall='true']) .client-unit-card { box-shadow: none; } /* Market: spot figures lead, with the shop's colour on their edge. */ .client-board[data-layout='market']:not([data-wall='true']) .spot-card { border-left: 3px solid var(--client-accent); } @media (min-width: 1024px) { .client-board[data-layout='market']:not([data-wall='true']) .spot-card strong { font-size: 32px; } } /* Showroom: large karat figures. */ .client-board[data-layout='showroom']:not([data-wall='true']) .client-unit-card { padding: 26px 24px; } @media (min-width: 1024px) { .client-board[data-layout='showroom']:not([data-wall='true']) .client-unit-card strong { font-size: 40px; } } /* Minimal: no boxes around the cards, a rule under each instead. */ .client-board[data-layout='minimal']:not([data-wall='true']) .client-unit-card { border: 0; border-bottom: 1px solid var(--client-line); box-shadow: none; background: transparent; } @media (min-width: 1024px) { .client-board[data-layout='minimal']:not([data-wall='true']) .client-unit-card strong { font-size: 38px; font-weight: 500; } } /* Compact: more rates in the first view: tighter cards, smaller figures, striped rows. */ .client-board[data-layout='compact']:not([data-wall='true']) .client-unit-cards { gap: 10px; } .client-board[data-layout='compact']:not([data-wall='true']) .client-unit-card { padding: 12px 14px; } .client-board[data-layout='compact']:not([data-wall='true']) .client-unit-card strong { font-size: 26px; } .client-board[data-layout='compact']:not([data-wall='true']) .rate-table tbody tr:nth-child(even) { background: var(--client-surface-alt); } /* Spot figures in a half-width column (Classic) or as rows (Ledger), and Compact's smaller figures only where three tiles have the room. */ @media (min-width: 1024px) { .client-board[data-layout='compact']:not([data-wall='true']) .spot-card strong { font-size: 24px; } .client-board[data-layout='classic']:not([data-wall='true']) .spot-card { padding: 16px 12px; } .client-board[data-layout='classic']:not([data-wall='true']) .spot-card strong { font-size: clamp(18px, 1.65vw, 24px); } .client-board[data-layout='ledger']:not([data-wall='true']) .spot-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .client-board[data-layout='ledger']:not([data-wall='true']) .spot-card { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; text-align: left; border-radius: 0; box-shadow: none; border-width: 0 0 1px; } .client-board[data-layout='ledger']:not([data-wall='true']) .spot-card h2 { grid-column: 1; margin: 0; } .client-board[data-layout='ledger']:not([data-wall='true']) .spot-card strong { grid-column: 2; grid-row: 1 / span 2; margin: 0; } .client-board[data-layout='ledger']:not([data-wall='true']) .spot-card .spot-range { grid-column: 1; margin: 0; } }