carries .reveal-titles, which the header button toggles — a lander that never calls phfxRevealTitles() is unaffected. The dimming inverts with it. Note this card darkens via filter:brightness on a duplicated background layer rather than an opacity scrim like the motion and panorama cards — so the inversion is a brightness swap, not an opacity swap. */ .reveal-titles .tool-card.has-image .tool-name, .reveal-titles .tool-card.has-image .tool-desc, .reveal-titles .tool-card.has-image .still-card-supra, .reveal-titles .tool-card.has-image .still-card-infra { opacity: 1; } .reveal-titles .tool-card.has-image:hover .tool-name, .reveal-titles .tool-card.has-image:hover .tool-desc, .reveal-titles .tool-card.has-image:hover .still-card-supra, .reveal-titles .tool-card.has-image:hover .still-card-infra { opacity: 0; } .reveal-titles .tool-card.has-image::before { filter: brightness(0.35); } .reveal-titles .tool-card.has-image:hover::before { filter: brightness(1); } @media (max-width: 760px) and (min-width: 761px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } .still-page .tool-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 440px) and (min-width: 761px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } .still-page .tool-grid { grid-template-columns: 1fr; } } /* ===== still-lander admin gallery management ===== */ .gallery-admin-line { font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-muted); text-decoration: none; cursor: pointer; transition: color 0.18s ease; } .gallery-admin-line:hover { color: var(--danger); } .intro-admin-controls { width: 100%; max-width: 960px; margin: -0.75rem auto 0; display: flex; gap: 0.5rem; } .intro-admin-controls[hidden] { display: none; } .intro-admin-controls .tool-card-admin-btn { flex: 0 0 auto; padding: 0 0.85rem; height: 1.9rem; } .tool-private-badge { position: absolute; top: 0.5rem; left: 0.5rem; z-index: 2; font-family: 'Roboto', sans-serif; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger); background: rgba(0, 0, 0, 0.65); border: 1px solid var(--danger); padding: 0.15rem 0.4rem; } .tool-card { position: relative; } .tool-card.is-draggable { cursor: grab; } .tool-card.is-dragging { opacity: 0.4; } .tool-card.drag-over { border-color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); } /* Panorama grid reorder. Matches the gallery and tools conventions above: the tile being dragged fades, the drop target takes a 2px gold inset. Styled on .gallery-admin-item rather than .panorama-card because the draggable element is the wrap - the card carries a navigate-on-click that would fight a drag started on it. */ .gallery-admin-item.is-dragging { opacity: 0.4; } .gallery-admin-item.drag-over .panorama-card { box-shadow: inset 0 0 0 2px var(--gold); } /* grab cursor only in edit mode, where the wrap exists at all. */ .gallery-admin-item[draggable="true"] { cursor: grab; } .gallery-admin-item[draggable="true"].is-dragging { cursor: grabbing; } /* Admin controls overlay the bottom of the card rather than sitting below it. A flex column here made every card taller the moment edit mode was entered, which reflowed the whole grid — cards shifted under the cursor just as you went to click one. Absolutely positioned, edit mode costs no layout at all and the grid stays exactly where it was. Scoped to .gallery-admin-item so the tools page keeps the stacked arrangement its own cards were built around. */ .gallery-admin-item { position: relative; display: block; } .gallery-admin-item .tool-card-admin-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; gap: 0.35rem; padding: 0.45rem; /* Scrim so the buttons stay legible over a bright picture without hiding the card's own title and description entirely. */ background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.62) 60%, rgba(0, 0, 0, 0) 100%); } .gallery-admin-item .tool-card-admin-btn { height: 1.6rem; background: rgba(0, 0, 0, 0.55); font-size: 0.72rem; } .tool-card-admin-controls { display: flex; gap: 0.5rem; } .tool-card-admin-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; height: 1.7rem; background: var(--btn-admin-bg, transparent); border: 1px solid var(--btn-admin-border, var(--danger)); color: var(--btn-admin-fg, var(--danger)); font-family: 'Roboto', sans-serif; font-size: var(--btn-admin-size, 0.85rem); border-radius: var(--btn-admin-radius, 0); line-height: 1; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .tool-card-admin-btn:hover { background: var(--btn-admin-hover-bg, var(--danger)); color: var(--btn-admin-hover-fg, var(--bg)); } .tool-card-admin-btn.move-btn { flex: 0 0 2.2rem; } .tool-card-admin-btn:disabled { opacity: 0.3; cursor: not-allowed; background: none; color: var(--danger); } .gallery-add-card { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.9 / 1; min-height: 0; background: none; border: 1px dashed var(--border); color: var(--text-muted); cursor: pointer; font-family: 'Roboto', sans-serif; font-size: 2rem; font-weight: 300; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease; } .gallery-add-card:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); } /* Reuse dof-modal styling pattern for the add/edit gallery dialog */ .gm-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .gm-modal[hidden] { display: none; } .gm-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); } .gm-modal-box { position: relative; max-width: 420px; width: 100%; max-height: 90vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--gold); padding: 1.5rem 1.75rem; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; gap: 0.9rem; } .gm-modal-close { position: absolute; top: 0.5rem; right: 0.7rem; background: none; border: 0; color: var(--text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.2rem; transition: color 0.18s ease; } .gm-modal-close:hover { color: var(--gold); } .gm-modal-title { font-family: 'Roboto', sans-serif; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--gold); margin: 0 1.5rem 0 0; } .gm-field { display: flex; flex-direction: column; gap: 0.3rem; } .gm-field label { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .gm-field .text-input { width: 100%; max-width: none; } .gm-field .text-input:disabled { opacity: 0.5; cursor: not-allowed; } .gm-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.3rem; } .gm-error { font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--danger); min-height: 1em; } /* ===== cinematography (motion) lander ===== */ .motion-page { justify-content: flex-start; gap: 1.25rem; } .motion-categories { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; font-family: 'Roboto', sans-serif; font-size: 0.78rem; flex: 1 1 auto; min-width: 0; } .motion-categories-row { width: 100%; max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .motion-add-new-btn { flex: 0 0 auto; } .motion-add-new-btn[hidden] { display: none; } /* Filter bar states, three genuinely distinct steps: rest muted — unselected filters recede hover gold — the site-wide "interactive" cue, same as buttons and nav active cyan — the site-wide "you are here" cue, same as .subtitle .current and .shop-status.is-available The original had rest cyan with BOTH hover and active gold, so pointing at an unselected filter made it identical to the selected one — the "where am I" signal was erased by the "what am I pointing at" signal. Gold and cyan also share s73/l71, so a cyan-rest row had every item at equal weight and no visible hierarchy. Shared with .shop-cat-link, which uses the same three steps. */ .motion-cat-link { color: var(--text-muted); text-decoration: none; cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; background: none; border: none; padding: 0; font: inherit; transition: color 0.15s ease; } .motion-cat-link:hover { color: var(--gold); } /* Active outranks hover: pointing at the selected filter must not change what it is telling you. */ .motion-cat-link.active, .motion-cat-link.active:hover { color: var(--current); } .motion-cat-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; } .motion-grid { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } /* Mirrors .tool-card on the still lander: --surface with a border by default, and the title always readable. A poster adds .has-image, which drops the border and hides the title until hover so the picture carries the card. Without that split, a film with no title image rendered as a blank box with nothing on it. */ .motion-card { position: relative; aspect-ratio: 2 / 1; overflow: hidden; cursor: pointer; background: var(--surface); border: 1px solid var(--border); background-size: cover; background-position: center; background-repeat: no-repeat; transition: border-color 0.18s ease, background 0.18s ease; } .motion-card.has-image { border: 0; } /* Hover scrim only where there's a picture to darken. On a plain surface card it would just muddy the panel, so those get the still lander's gold-border treatment instead. */ .motion-card.has-image::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.3s ease; } .motion-card.has-image:hover::before { background: rgba(0, 0, 0, 0.55); } .motion-card:not(.has-image):hover { border-color: var(--gold); background: var(--surface-hover); } .motion-card-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-family: 'Roboto', sans-serif; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--gold); opacity: 1; transition: opacity 0.3s ease; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); pointer-events: none; } /* Only a card carrying a picture hides its title until hover. */ .motion-card.has-image .motion-card-title { opacity: 0; } .motion-card.has-image:hover .motion-card-title { opacity: 1; } /* Optional lines above and below the title. Anchored to the card's mid-line rather than stacked with the title: bottom:50% pins the top line's baseline edge to the centre and grows it upward, top:50% does the mirror. The title itself is a full-card flex box centring its text on that same mid-line, so it stays put whether either of these exists, one exists, or both do — which is the whole point. The margins clear half a line of the title (0.85rem text) plus a gap. A title long enough to wrap to two lines will start to crowd them; that's the trade for never moving the title. */ .motion-card-supra, .motion-card-infra { position: absolute; left: 0; right: 0; padding: 0 1rem; text-align: center; font-family: 'Roboto Mono', monospace; letter-spacing: 0.12em; color: var(--gold); opacity: 1; transition: opacity 0.3s ease; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); pointer-events: none; } .motion-card-supra { bottom: 50%; margin-bottom: 0.95rem; font-size: 0.62rem; text-transform: uppercase; } .motion-card-infra { top: 50%; margin-top: 0.95rem; font-size: 0.66rem; } /* They follow the title: hidden until hover on a picture tile, always on for a bordered surface card. */ .motion-card.has-image .motion-card-supra, .motion-card.has-image .motion-card-infra { opacity: 0; } .motion-card.has-image:hover .motion-card-supra, .motion-card.has-image:hover .motion-card-infra { opacity: 1; } /* ===== Reveal Titles ===== Inverts the hover behaviour on picture tiles: every title is shown, and pointing at a card hides its own so the photograph underneath is unobstructed. Scoped to .reveal-titles on

, toggled by the header button, so nothing changes for a visitor who never presses it. The scrim follows the same inversion — with the titles already legible there is nothing for it to improve, and it would only be darkening the picture the visitor is trying to look at. Bordered cards without a picture are deliberately untouched: their titles are always on regardless, so there is nothing to invert. */ .reveal-titles .motion-card.has-image .motion-card-title, .reveal-titles .motion-card.has-image .motion-card-supra, .reveal-titles .motion-card.has-image .motion-card-infra { opacity: 1; } .reveal-titles .motion-card.has-image:hover .motion-card-title, .reveal-titles .motion-card.has-image:hover .motion-card-supra, .reveal-titles .motion-card.has-image:hover .motion-card-infra { opacity: 0; } .reveal-titles .motion-card.has-image::before { background: rgba(0, 0, 0, 0.55); } .reveal-titles .motion-card.has-image:hover::before { background: rgba(0, 0, 0, 0); } .motion-add-card { aspect-ratio: 2 / 1; } /* Video lightbox */ .motion-lb { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; padding: 2.5rem 1.5rem 1.5rem; } .motion-lb.active { display: flex; } .motion-lb-inner { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; background: #000; } .motion-lb-inner iframe { width: 100%; height: 100%; border: 0; display: block; } .motion-lb-close { position: absolute; top: -2.2rem; right: 0; background: none; border: none; color: var(--text); font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 0.2rem; transition: color 0.15s ease; } .motion-lb-close:hover { color: var(--gold); } @media (max-width: 760px) and (min-width: 761px) { .motion-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) and (min-width: 761px) { .motion-grid { grid-template-columns: 1fr; } } /* ===== panorama lander ===== */ .panorama-page { justify-content: flex-start; gap: 1.25rem; } /* The add-new button lives in its own row so it can right-align above the grid. That row is empty for non-admins and outside edit mode, and an empty flex child still consumes one of .panorama-page's 1.25rem gaps - which is why the space under the category bar was double the motion page's. :has() removes the row from layout when its only button is hidden; :empty covers the same case if the button is ever removed rather than hidden. */ .panorama-add-row { width: 100%; max-width: 960px; margin: 0 auto; display: flex; justify-content: flex-end; } .panorama-add-row:empty, .panorama-add-row:has(> button[hidden]:only-child) { display: none; } .panorama-add-new-btn[hidden] { display: none; } .panorama-grid { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .panorama-card { position: relative; aspect-ratio: 2 / 1; overflow: hidden; cursor: pointer; background: var(--frame-bg); background-size: cover; background-position: center; background-repeat: no-repeat; } .panorama-card::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.3s ease; } .panorama-card:hover::before { background: rgba(0, 0, 0, 0.55); } .panorama-card-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-family: 'Roboto', sans-serif; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--gold); opacity: 0; transition: opacity 0.3s ease; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); pointer-events: none; } .panorama-card:hover .panorama-card-title { opacity: 1; } /* Reveal Titles — panorama. Every title on, and the card under the pointer hides its own so the picture is unobstructed. The scrim inverts with it: it exists to make a title legible over a photograph, so with the titles already showing it belongs at rest and lifts on hover. */ .reveal-titles .panorama-card-title { opacity: 1; } .reveal-titles .panorama-card:hover .panorama-card-title { opacity: 0; } .reveal-titles .panorama-card::before { background: rgba(0, 0, 0, 0.55); } .reveal-titles .panorama-card:hover::before { background: rgba(0, 0, 0, 0); } @media (max-width: 760px) and (min-width: 761px) { .panorama-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) and (min-width: 761px) { .panorama-grid { grid-template-columns: 1fr; } } /* ===== panorama viewer ===== */ /* A panorama with no thumbnail. The card used to fall back to the full equirect, which cost megabytes and stalled scrolling; it now renders empty. Marked with a dashed border so it reads as "nothing here yet" rather than as a broken image or a failed load. */ .panorama-card.is-missing-thumb { background: var(--surface); border: 1px dashed var(--border); } .panorama-card.is-missing-thumb::after { content: 'no thumbnail'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Roboto Mono', monospace; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); pointer-events: none; } .panorama-view-page { justify-content: flex-start; gap: 1.5rem; } .pano-viewer-frame { position: relative; width: 100%; max-width: 960px; aspect-ratio: 3 / 2; margin: 0 auto; background: #000; overflow: hidden; cursor: grab; touch-action: none; } .pano-viewer-frame:active { cursor: grabbing; } .pano-viewer-frame canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.0s ease; } .pano-viewer-frame.is-ready canvas { opacity: 1; } .pano-loading { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem; background: var(--frame-bg); pointer-events: none; } .pano-loading[hidden] { display: none; } .pano-spinner { width: 2.6rem; height: 2.6rem; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: pano-spin 0.9s linear infinite; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .pano-spinner.is-done { border-color: var(--gold); animation: none; box-shadow: 0 0 12px var(--gold-dim), 0 0 4px var(--gold); } @keyframes pano-spin { to { transform: rotate(360deg); } } .pano-loading-label { font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); } @media (prefers-reduced-motion: reduce) { .pano-spinner { animation-duration: 2.4s; } .pano-viewer-frame canvas { transition: none; } } .pano-viewer-frame .frame-logo { width: var(--symbol-watermark-panoviewer-pct, 12%); max-width: var(--symbol-watermark-panoviewer-max, 640px); z-index: 5; } .pano-fs-btn { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; } .pano-fs-btn:hover { color: var(--gold); border-color: var(--gold); } .pano-fs-btn svg { display: block; fill: currentColor; } .pano-info-btn { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(0, 0, 0, 0.45); border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .pano-info-btn:hover { color: var(--gold); border-color: var(--gold); } .pano-info-btn.active { color: var(--gold); border-color: var(--gold); background: var(--gold-dim); } .pano-info-btn svg { display: block; } .pano-hint { position: absolute; bottom: 0.6rem; left: 0.75rem; z-index: 6; font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); opacity: 0.85; transition: opacity 0.6s ease; pointer-events: none; } .pano-focal-readout { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--gold); background: rgba(0, 0, 0, 0.45); border: 1px solid var(--border); padding: 0.3rem 0.55rem; } .pano-focal-readout[hidden] { display: none; } .pano-format-name-readout { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--gold); background: rgba(0, 0, 0, 0.45); border: 1px solid var(--border); padding: 0.3rem 0.55rem; } .pano-format-name-readout[hidden] { display: none; } .pano-hud-topleft { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 6; display: flex; flex-direction: column; gap: 0.35rem; pointer-events: none; } .pano-orient-readout { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--gold); background: rgba(0, 0, 0, 0.45); border: 1px solid var(--border); padding: 0.3rem 0.55rem; } .pano-orient-readout[hidden] { display: none; } .pano-ref-format-btn, .pano-hide-info-btn { font-family: 'Roboto', sans-serif; font-size: var(--btn-overlay-size, 0.72rem); letter-spacing: var(--btn-overlay-tracking, 0.04em); color: var(--btn-overlay-fg, var(--text)); background: var(--btn-overlay-bg, rgba(0, 0, 0, 0.45)); border: 1px solid var(--btn-overlay-border, var(--border)); padding: var(--btn-overlay-pad-y, 0.3rem) var(--btn-overlay-pad-x, 0.55rem); border-radius: var(--btn-overlay-radius, 0); cursor: pointer; pointer-events: auto; text-align: left; transition: color 0.18s ease, border-color 0.18s ease; } .pano-ref-format-btn:hover, .pano-hide-info-btn:hover { color: var(--gold); border-color: var(--gold); } .pano-ref-format-btn[hidden], .pano-hide-info-btn[hidden] { display: none; } .pano-context-menu { position: absolute; z-index: 7; min-width: 180px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); } .pano-context-menu[hidden] { display: none; } .pano-context-item { display: block; width: 100%; text-align: left; padding: 0.55rem 1rem; font-family: 'Roboto', sans-serif; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--text); background: none; border: 0; border-top: 1px solid var(--border); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .pano-context-item:first-child { border-top: 0; } .pano-context-item:hover { background: var(--gold-dim); color: var(--gold); } .pano-context-item.active { color: var(--gold); } .pano-context-divider { border-top: 1px solid var(--border); margin: 0.25rem 0; } .panorama-view-meta { width: 100%; max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.5rem; } .panorama-draft-banner { width: 100%; font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger); border: 1px solid var(--danger); background: var(--danger-dim); padding: 0.5rem 0.85rem; } .panorama-masthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; } .panorama-masthead-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; text-align: left; } .panorama-masthead-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; text-align: right; } .panorama-view-title { font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 400; color: var(--current); letter-spacing: 0.05em; text-align: left; } .panorama-subtitle { font-family: 'Roboto', sans-serif; font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.02em; } .panorama-acq-date, .panorama-acq-height { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.04em; white-space: nowrap; } .panorama-admin-controls { display: flex; justify-content: flex-start; gap: 0.5rem; } .panorama-admin-controls[hidden] { display: none; } .panorama-description { font-family: 'Roboto', sans-serif; font-size: 0.92rem; line-height: 1.7; color: var(--text); text-align: left; white-space: pre-line; } /* ===== insights ===== */ .insights-page { justify-content: flex-start; gap: 1.25rem; } .insights-categories-row { width: 100%; max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .insights-categories { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; font-family: 'Roboto', sans-serif; font-size: 0.78rem; flex: 1 1 auto; min-width: 0; } /* Three distinct steps, matching .motion-cat-link and .shop-cat-link: unselected filters recede at --text-muted, gold marks the one under the pointer as it does on every other control, and --current marks the one in force — which is what that token is named for. This previously ran cyan at rest with BOTH hover and active gold, so pointing at an unselected filter made it identical to the selected one. */ .insights-cat-link { color: var(--text-muted); text-decoration: none; cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; background: none; border: none; padding: 0; font: inherit; transition: color 0.15s ease; } .insights-cat-link:hover { color: var(--gold); } /* Active outranks hover: pointing at the selected filter must not change what it is telling you. */ .insights-cat-link.active, .insights-cat-link.active:hover { color: var(--current); } .insights-cat-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; } .insights-add-new-btn { flex: 0 0 auto; } .insights-add-new-btn[hidden] { display: none; } .insights-grid { width: 100%; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 760px) and (min-width: 761px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) and (min-width: 761px) { .insights-grid { grid-template-columns: 1fr; } } .insights-entry-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); overflow: hidden; text-decoration: none; color: var(--text); cursor: pointer; transition: border-color 0.18s ease, transform 0.18s ease; } .insights-entry-card:hover { border-color: var(--gold); transform: translateY(-2px); } .insights-entry-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--frame-bg); background-size: cover; background-position: center; background-repeat: no-repeat; } .insights-entry-body { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; } .insights-entry-cat { font-family: 'Roboto', sans-serif; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--current); } .insights-entry-title { font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: var(--gold); letter-spacing: 0.02em; line-height: 1.35; } .insights-entry-date { font-family: 'Roboto', sans-serif; font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.06em; } .insights-entry-subtitle { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; } .insights-entry-admin-controls { margin-top: 0.3rem; } /* Individual article page */ .article-page { justify-content: flex-start; gap: 0; padding: 0; align-items: stretch; } .article-hero { width: 100%; max-height: 46vh; overflow: hidden; background: var(--frame-bg); } .article-hero img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 46vh; } .article-body-wrap { width: 100%; max-width: 960px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; display: flex; flex-direction: column; gap: 1.5rem; } .article-draft-banner { width: 100%; font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger); border: 1px solid var(--danger); background: var(--danger-dim); padding: 0.5rem 0.85rem; } .article-masthead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; } .article-masthead-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; } .article-masthead-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; } .article-masthead-rule { width: 100%; border: 0; border-top: 1px solid var(--border); margin: 0; } .article-title { font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 400; /* h1 defaults to bold; the header's title span never was */ color: var(--current); letter-spacing: 0.05em; /* matches .subtitle's letter-spacing, which the header's title span inherits since it doesn't set its own */ } .article-title-date { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.04em; white-space: nowrap; } .article-meta { font-family: 'Roboto', sans-serif; font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.04em; } .article-meta-row { display: flex; align-items: baseline; justify-content: flex-start; flex-wrap: wrap; gap: 0.5rem; } .article-meta .article-subtitle { color: var(--current); } .article-meta .article-date { color: var(--text-muted); } .article-meta .article-meta-dot { color: var(--text-muted); } .article-admin-controls { display: flex; justify-content: flex-start; gap: 0.5rem; } .article-admin-controls[hidden] { display: none; } .article-content { font-family: 'Roboto', sans-serif; font-size: 0.8rem; line-height: 1.75; color: var(--text); } /* Pasted content arrives carrying inline style attributes from wherever it came from - a computed font-size in px, a font-family, a weight. Inline styles beat any stylesheet rule, so those fragments render at their original size while text typed directly follows .article-content, and an entry ends up with two or three sizes in it. This forces typography back to the article's own. !important is needed because nothing else outranks an inline style. Scoped to descendants of .article-content, so the editor chrome and the figure/caption components that set their own sizes are untouched. Colour is deliberately NOT included: link colour and the chapter-link styling are legitimate inline cases, and text colour rarely arrives wrong. If pasted colour becomes a problem, add `color: inherit` here. Figures, captions, compare labels and chapter headings are styled by class rather than inline, so they never match these selectors and keep their own typography untouched. */ .article-content [style*="font-size"], .article-content [style*="font-family"], .article-content [style*="font-weight"] { font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; } .article-content p { margin: 0 0 1rem; } .article-content h2, .article-content h3 { color: var(--gold); font-family: 'Roboto', sans-serif; font-size: inherit; font-weight: 700; letter-spacing: 0.02em; margin: 1.5rem 0 0.75rem; } .article-content img { max-width: 100%; height: auto; display: block; margin: 0.5rem auto; } .article-content .article-chapter-link { color: inherit; text-decoration: none; } .article-content .article-chapter-link:hover { text-decoration: underline; } .article-chapter-top { display: inline-flex; align-items: center; justify-content: center; margin-left: 0.6rem; background: none; border: 0; padding: 0; color: var(--text-muted); cursor: pointer; vertical-align: middle; transition: color 0.18s ease; } .article-chapter-top:hover { color: var(--gold); } .article-chapter-top svg { width: 0.85em; height: 0.85em; display: block; } .article-content .article-img-frame { display: block; margin: 1rem auto; max-width: 100%; } .article-content .article-img-frame img { max-width: 100%; height: auto; display: block; margin: 0; } .article-content .article-img-frame .img-protect { cursor: pointer; } .article-content a { color: var(--current); } /* Figure-wrapped images (Insert/Edit Image in the article editor): image = full content width; thumb = fixed small size matching the still-gallery lightbox thumb convention, click to embiggen. */ .article-figure { margin: 1.5rem 0; } .article-figure--image { display: block; } .article-figure--image .article-figure-media { display: block; text-align: center; } .article-figure--image .article-figure-media img, .article-figure--image .article-figure-media .article-img-frame { max-width: 100%; height: auto; } .article-figure--thumb { display: block; width: 220px; margin: 1.5rem auto; } .article-figure--thumb .article-figure-media, .article-figure--thumb .article-figure-media .article-img-frame { width: 220px; height: 220px; } .article-figure--thumb .article-figure-media img { width: 220px; height: 220px; object-fit: cover; display: block; margin: 0; } .article-figure--video { display: block; margin: 1.5rem 0; } .article-figure--video .article-figure-media { display: block; } .article-figure--video .article-embed { margin: 0; } /* Image compare (before/after slider) */ .article-figure--compare { display: block; margin: 1.5rem 0; } .article-figure--compare .article-figure-media { display: block; } /* Gallery-style thumbnails (Insert Thumb): simple inline-block elements, no wrapping container needed — each is sized to exactly 1/8 of its containing line, so the browser's own text flow wraps to a new row after 8 automatically, matching the still-gallery's 8-per-row sizing without any JS-managed grid bookkeeping. */ .article-thumb-item { display: inline-block; vertical-align: top; width: 12.5%; aspect-ratio: 1 / 1; position: relative; overflow: hidden; cursor: pointer; background: var(--frame-bg); font-size: 1rem; } .article-thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; } .article-thumb-item::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.3s ease; pointer-events: none; } .article-thumb-item:hover::before { background: rgba(0, 0, 0, 0.45); } /* Caption shown only in the embiggened lightbox for a Thumb item — never on the thumbnail itself. Reuses the shared #articleLbOverlay. */ .lb-thumb-caption { position: absolute; bottom: 0; left: 0; width: 100%; transform: translateY(100%); padding-top: 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: var(--gold); } .lb-thumb-caption[hidden] { display: none; } .lb-thumb-caption--left { align-items: flex-start; text-align: left; } .lb-thumb-caption--center { align-items: center; text-align: center; } .lb-thumb-caption--right { align-items: flex-end; text-align: right; } .article-compare { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--frame-bg); cursor: ew-resize; touch-action: none; -webkit-user-select: none; user-select: none; /* prevent accidental text-selection highlighting on the labels (or anything else) while dragging the handle across them */ } .article-compare .article-compare-img { position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); /* explicit size is required here — is a replaced element, and under position:absolute an unset width/height falls back to the image's intrinsic (full-resolution) size rather than solving to fit the inset edges */ margin: 0; /* must override .article-content img's margin:0.5rem auto — that's the actual source of the top/bottom gap: it wins on specificity against a plain .article-compare-img selector, and margin on an absolutely-positioned element shows up as a visible gap around it */ max-width: none; object-fit: cover; display: block; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; } .article-compare-layer-2 { position: absolute; inset: 0; /* No z-index here — it must stay in normal DOM/paint order (after image 1 + label 1) so that wherever this layer's clip-path reveals it, it naturally paints OVER image 1 and label 1 beneath it, and wherever the clip hides it, image 1 and label 1 show through untouched. */ } .article-compare-label { position: absolute; top: 8px; color: var(--text); font-family: 'Roboto', sans-serif; font-size: 0.90rem; letter-spacing: 0.04em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); pointer-events: none; white-space: pre-line; /* respects literal newlines typed into the label textarea, without needing to convert them to
tags when building the HTML */ /* No z-index — see .article-compare-layer-2 note above: labels must stay in plain paint order so the slider correctly swipes over them. */ } .article-compare-label-1 { left: 8px; text-align: left; } .article-compare-label-2 { right: 8px; text-align: right; } .article-compare-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--gold); transform: translateX(-50%); pointer-events: none; z-index: 4; } .article-compare-handle-grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--gold); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); } .article-compare .frame-logo { width: var(--symbol-watermark-gallery-pct, 12%); max-width: var(--symbol-watermark-gallery-max, 640px); z-index: 5; } .article-figure-media { position: relative; display: block; } .article-figure-media::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.3s ease; pointer-events: none; z-index: 2; } .article-figure-media[data-desc1]:hover::before { background: rgba(0, 0, 0, 0.45); } .article-figure-media[data-desc1]::after { content: attr(data-desc1); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--gold); font-family: 'Roboto', sans-serif; font-size: 0.82rem; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 3; } .article-figure-media[data-desc1]:hover::after { opacity: 1; } .article-figcaption { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 0.15rem; margin-top: 0.5rem; font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: var(--gold); letter-spacing: 0.02em; } .article-figcaption--left { align-items: flex-start; text-align: left; } .article-figcaption--center { align-items: center; text-align: center; } .article-figcaption--right { align-items: flex-end; text-align: right; } .figcap-line { line-height: 1.4; } .article-content ul, .article-content ol { padding-left: 1.4rem; margin: 0 0 1rem; } .article-content hr { border: 0; border-top: 1px solid var(--border); margin: -0.5rem 0 0.5rem; } .article-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; margin: 1rem 0; } .article-embed iframe, .article-embed video { width: 100%; height: 100%; border: 0; display: block; } .article-message { width: 100%; text-align: center; padding: 3rem 1rem; font-family: 'Roboto', sans-serif; font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.06em; } /* Chapters dropdown: sits inline after Subtitle • Date. */ .article-chapters-dropdown { position: relative; } .article-chapters-toggle { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 1px solid var(--border); color: var(--text-muted); font-family: 'Roboto', sans-serif; font-size: 0.8rem; padding: 0.4rem 0.75rem; cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; } .article-chapters-toggle:hover, .article-chapters-toggle.active { color: var(--gold); border-color: var(--gold); } .article-chapters-chevron { transition: transform 0.2s ease; } .article-chapters-toggle.active .article-chapters-chevron { transform: rotate(180deg); } .article-chapters-list { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 240px; max-width: calc(100vw - 2.5rem); max-height: 60vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); } .article-chapters-list[hidden] { display: none; } .article-chapters-link { display: block; padding: 0.6rem 1rem; font-family: 'Roboto', sans-serif; font-size: 0.85rem; color: var(--text); text-decoration: none; border-top: 1px solid var(--border); transition: background 0.15s ease, color 0.15s ease; } .article-chapters-link:first-child { border-top: 0; } .article-chapters-link:hover { background: var(--gold-dim); color: var(--gold); } /* WYSIWYG editor */ .wysiwyg-page { justify-content: flex-start; gap: 1.25rem; max-width: 860px; margin: 0 auto; width: 100%; } .wysiwyg-fields { width: 100%; display: flex; flex-direction: column; gap: 0.9rem; } /* Collapsible "Article Details" block (Title through Share Image) so the admin can minimize it and focus on the body while writing. */ .wysiwyg-meta { width: 100%; border: 1px solid var(--border); background: var(--surface); } .wysiwyg-meta > summary { list-style: none; cursor: pointer; } .wysiwyg-meta > summary::-webkit-details-marker { display: none; } .wysiwyg-meta-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.1rem; } .wysiwyg-meta-label { font-family: 'Roboto', sans-serif; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .wysiwyg-meta-toggle { color: var(--gold); font-size: 0.85rem; font-family: 'Roboto', sans-serif; } .wysiwyg-meta-summary:hover .wysiwyg-meta-toggle { color: var(--text); } .wysiwyg-meta-toggle::after { content: 'Expand'; } .wysiwyg-meta[open] .wysiwyg-meta-toggle::after { content: 'Minimize'; } .wysiwyg-meta-body { padding: 0 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.9rem; } .wysiwyg-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } .wysiwyg-row .gm-field { flex: 1 1 200px; min-width: 0; } /* Toolbar + error + Delete/Cancel/Save stay pinned to the top of the scroll area while the article body scrolls underneath them. */ .wysiwyg-sticky-bar { position: sticky; top: 0; z-index: 15; width: 100%; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35); } .wysiwyg-sticky-bar .wysiwyg-toolbar { border: 0; } .wysiwyg-sticky-bar .gm-error { padding: 0 1.1rem; } .wysiwyg-sticky-bar .wysiwyg-actions { padding: 0.75rem 1.1rem; margin: 0; border-top: 1px solid var(--border); } .wysiwyg-sticky-bar + .wysiwyg-editor { border-top: 0; } .wysiwyg-toolbar { width: 100%; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.6rem; border: 1px solid var(--border); border-bottom: 0; background: var(--surface); } .wysiwyg-btn { background: var(--btn-wysiwyg-bg, var(--bg)); border: 1px solid var(--btn-wysiwyg-border, var(--border)); color: var(--btn-wysiwyg-fg, var(--text)); font-family: 'Roboto', sans-serif; font-size: var(--btn-wysiwyg-size, 0.78rem); letter-spacing: var(--btn-wysiwyg-tracking, 0.03em); padding: var(--btn-wysiwyg-pad-y, 0.45rem) var(--btn-wysiwyg-pad-x, 0.7rem); border-radius: var(--btn-wysiwyg-radius, 0); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .wysiwyg-btn:hover { border-color: var(--gold); color: var(--gold); } .wysiwyg-btn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); } .wysiwyg-btn svg { display: block; } .wysiwyg-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 0.15rem; } .wysiwyg-editor { width: 100%; min-height: 420px; border: 1px solid var(--border); background: var(--bg); color: var(--text); padding: 1.25rem; font-family: 'Roboto', sans-serif; font-size: 0.95rem; line-height: 1.7; outline: none; } .wysiwyg-editor:focus { border-color: var(--gold); } .wysiwyg-editor p { margin: 0 0 1rem; } .wysiwyg-editor h2, .wysiwyg-editor h3 { color: var(--gold); font-family: 'Roboto', sans-serif; font-size: inherit; font-weight: 700; margin: 1rem 0 0.6rem; } .wysiwyg-editor hr { border: 0; border-top: 1px solid var(--border); margin: -0.5rem 0 0.5rem; } .wysiwyg-editor img { max-width: 100%; height: auto; cursor: pointer; } .wysiwyg-editor ul, .wysiwyg-editor ol { padding-left: 1.4rem; margin: 0 0 1rem; } .wysiwyg-editor .article-embed { border: 1px dashed var(--border); cursor: pointer; } .wysiwyg-actions { width: 100%; display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .wysiwyg-actions-left, .wysiwyg-actions-right { display: flex; gap: 0.5rem; flex-wrap: wrap; } .wysiwyg-denied { font-family: 'Roboto', sans-serif; font-size: 0.82rem; color: var(--text-muted); padding: 2rem 0; text-align: center; } /* ===== catalog ===== */ .catalog-page { justify-content: flex-start; gap: 1.25rem; } .catalog-draft-banner { width: 100%; max-width: 960px; margin: 0 auto; font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger); border: 1px solid var(--danger); background: var(--danger-dim); padding: 0.5rem 0.85rem; } /* Rental date bar */ .catalog-datebar { width: 100%; max-width: 960px; margin: 0 auto; display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; border: 1px solid var(--border); background: var(--surface); padding: 1rem 1.25rem; } .catalog-date-field { display: flex; flex-direction: column; gap: 0.3rem; } .catalog-date-field label { font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .catalog-date-field input[type="date"] { background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: 'Roboto', sans-serif; font-size: 0.8rem; padding: 0.5rem 0.6rem; } .catalog-days-readout { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.04em; white-space: nowrap; } .catalog-search { flex: 1 1 200px; min-width: 160px; } .catalog-search input { width: 100%; max-width: none; } /* Layout: sidebar + grid */ .catalog-layout { width: 100%; max-width: 960px; margin: 0 auto; display: flex; align-items: flex-start; gap: 1.5rem; } .catalog-sidebar { flex: 0 0 190px; display: flex; flex-direction: column; gap: 0.15rem; position: sticky; top: 0; } .catalog-cat-link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.6rem; font-family: 'Roboto', sans-serif; font-size: 0.76rem; letter-spacing: 0.03em; color: var(--text-muted); text-decoration: none; cursor: pointer; background: none; border: 0; text-align: left; width: 100%; transition: background 0.15s ease, color 0.15s ease; } .catalog-cat-link:hover { color: var(--text); background: var(--gold-dim); } .catalog-cat-link.active { color: var(--gold); background: var(--gold-dim); } .catalog-cat-count { color: var(--text-muted); font-size: 0.7rem; } .catalog-cat-link.active .catalog-cat-count { color: var(--gold); } .catalog-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.75rem; } .catalog-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: 'Roboto', sans-serif; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .catalog-section-count { color: var(--text-muted); text-transform: none; letter-spacing: 0.02em; font-size: 0.75rem; } .catalog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 900px) { .catalog-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) and (min-width: 761px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 440px) and (min-width: 761px) { .catalog-grid { grid-template-columns: 1fr; } } .catalog-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color 0.18s ease; } .catalog-card:hover { border-color: var(--gold); } .catalog-card-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--frame-bg); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; } .catalog-card-thumb-placeholder { font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .catalog-card-unavail { position: absolute; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--danger-soft); } .catalog-card-body { padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; flex: 1 1 auto; } .catalog-card-name { font-family: 'Roboto', sans-serif; font-size: 0.88rem; color: var(--text); line-height: 1.3; } .catalog-card-sub { font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; } .catalog-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.2rem; } .catalog-card-rate { font-family: 'Roboto', sans-serif; font-size: 0.82rem; color: var(--gold); } .catalog-card-qty { font-family: 'Roboto', sans-serif; font-size: 0.68rem; color: var(--text-muted); } .catalog-card-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; } .catalog-add-btn { flex: 1 1 auto; background: var(--btn-affirm-bg, transparent); border: 1px solid var(--btn-affirm-border, var(--gold)); color: var(--btn-affirm-fg, var(--gold)); font-family: 'Roboto', sans-serif; font-size: var(--btn-affirm-size, 0.75rem); letter-spacing: var(--btn-affirm-tracking, 0.05em); padding: var(--btn-affirm-pad-y, 0.45rem) var(--btn-affirm-pad-x, 0.6rem); border-radius: var(--btn-affirm-radius, 0); cursor: pointer; transition: all 0.18s ease; } .catalog-add-btn:hover { background: var(--btn-affirm-hover-bg, var(--gold-dim)); } .catalog-add-btn:disabled { opacity: 0.35; cursor: not-allowed; } .catalog-qty-stepper { display: flex; align-items: center; gap: 0.3rem; flex: 1 1 auto; } .catalog-qty-stepper button { background: var(--bg); border: 1px solid var(--border); color: var(--text); width: 1.7rem; height: 1.7rem; cursor: pointer; font-family: 'Roboto', sans-serif; } .catalog-qty-stepper button:hover { border-color: var(--gold); color: var(--gold); } .catalog-qty-stepper span { font-family: 'Roboto', sans-serif; font-size: 0.8rem; min-width: 1.4rem; text-align: center; } .catalog-card-admin-controls { padding: 0 0.9rem 0.75rem; display: flex; gap: 0.5rem; } .catalog-add-new-btn { flex: 0 0 auto; } .catalog-empty { font-family: 'Roboto', sans-serif; font-size: 0.82rem; color: var(--text-muted); text-align: center; padding: 2.5rem 1rem; } @media (max-width: 760px) and (min-width: 761px) { .catalog-layout { flex-direction: column; } .catalog-sidebar { flex: none; width: 100%; position: static; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; } .catalog-cat-link { width: auto; } } /* Quote panel (sticky bottom drawer) */ .catalog-quote-panel { position: sticky; bottom: 0; z-index: 10; width: 100%; background: var(--surface); border: 1px solid var(--gold); box-shadow: 0 -8px 24px rgba(0,0,0,0.4); margin-top: 1rem; } .catalog-quote-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.1rem; cursor: pointer; background: none; border: 0; width: 100%; text-align: left; } .catalog-quote-toggle-left { display: flex; align-items: center; gap: 0.75rem; } .catalog-quote-label { font-family: 'Roboto', sans-serif; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); } .catalog-quote-count { font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--text-muted); } .catalog-quote-total-preview { font-family: 'Roboto', sans-serif; font-size: 0.9rem; color: var(--gold); font-weight: 700; } .catalog-quote-chevron { color: var(--text-muted); transition: transform 0.2s ease; } .catalog-quote-panel.open .catalog-quote-chevron { transform: rotate(180deg); } .catalog-quote-body { border-top: 1px solid var(--border); padding: 1.1rem; display: flex; flex-direction: column; gap: 1rem; max-height: 55vh; overflow-y: auto; } .catalog-quote-body[hidden] { display: none; } .catalog-quote-fields { display: flex; gap: 0.75rem; flex-wrap: wrap; } .catalog-quote-fields .gm-field { flex: 1 1 200px; min-width: 0; } .catalog-quote-lines { display: flex; flex-direction: column; gap: 0.5rem; } .catalog-quote-line { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); } .catalog-quote-line:last-child { border-bottom: 0; } .catalog-quote-line-name { font-family: 'Roboto', sans-serif; font-size: 0.82rem; color: var(--text); display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .catalog-quote-line-type { font-family: 'Roboto', sans-serif; font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } .catalog-quote-line-qty input { width: 3.4rem; max-width: none; text-align: center; } .catalog-quote-line-rate { font-family: 'Roboto', sans-serif; font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; } .catalog-quote-line-discount { display: flex; align-items: center; gap: 0.3rem; } .catalog-quote-line-discount input { width: 3.6rem; max-width: none; text-align: center; } .catalog-quote-line-discount select { padding: 0.4rem; } .catalog-quote-line-total { font-family: 'Roboto', sans-serif; font-size: 0.85rem; color: var(--gold); white-space: nowrap; text-align: right; min-width: 4.5rem; } .catalog-quote-line-remove { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.3rem; } .catalog-quote-line-remove:hover { opacity: 0.7; } .catalog-quote-summary { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 0.75rem; border-top: 1px solid var(--border); align-items: flex-end; } .catalog-quote-summary-row { display: flex; gap: 1rem; font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text-muted); } .catalog-quote-summary-row.total { font-size: 1.05rem; color: var(--gold); font-weight: 700; } .catalog-quote-summary-row > span:last-child { min-width: 5rem; text-align: right; } .catalog-quote-actions { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; } .catalog-quote-status { font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--current); text-align: right; } .catalog-quote-empty { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text-muted); text-align: center; padding: 1rem 0; } /* Admin: saved quotes browser modal */ .catalog-saved-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 50vh; overflow-y: auto; } .catalog-saved-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border); background: var(--bg); } .catalog-saved-row-main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .catalog-saved-row-label { font-family: 'Roboto', sans-serif; font-size: 0.82rem; color: var(--text); } .catalog-saved-row-meta { font-family: 'Roboto', sans-serif; font-size: 0.7rem; color: var(--text-muted); } .catalog-saved-row-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; } /* Printable quote (catalog/quote.html) */ .catalog-quote-doc { width: 100%; max-width: 780px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); padding: 2rem 2.25rem; display: flex; flex-direction: column; gap: 1.5rem; } .catalog-quote-doc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 1rem; } .catalog-quote-doc-brand { font-family: 'Roboto', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; color: var(--gold); text-transform: uppercase; } .catalog-quote-doc-meta { font-family: 'Roboto', sans-serif; font-size: 0.78rem; color: var(--text-muted); text-align: right; display: flex; flex-direction: column; gap: 0.2rem; } .catalog-quote-doc-client { font-family: 'Roboto', sans-serif; font-size: 0.95rem; color: var(--text); } .catalog-quote-doc-dates { font-family: 'Roboto', sans-serif; font-size: 0.82rem; color: var(--text-muted); } .catalog-quote-doc-table { width: 100%; border-collapse: collapse; font-family: 'Roboto', sans-serif; font-size: 0.8rem; } .catalog-quote-doc-table th { text-align: left; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); } .catalog-quote-doc-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); color: var(--text); } .catalog-quote-doc-table th:last-child, .catalog-quote-doc-table td:last-child { text-align: right; } .catalog-quote-doc-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; } .catalog-quote-doc-totals-row { display: flex; gap: 1.5rem; font-family: 'Roboto', sans-serif; font-size: 0.85rem; color: var(--text-muted); } .catalog-quote-doc-totals-row.grand { font-size: 1.15rem; color: var(--gold); font-weight: 700; } .catalog-quote-doc-totals-row > span:last-child { min-width: 6rem; text-align: right; } .catalog-quote-doc-actions { display: flex; justify-content: flex-end; gap: 0.5rem; } .catalog-quote-doc-notfound { font-family: 'Roboto', sans-serif; font-size: 0.85rem; color: var(--text-muted); text-align: center; padding: 3rem 1rem; } @media print { header, footer, .catalog-quote-doc-actions, .phfx-scrollbar-track { display: none !important; } body, main { height: auto !important; overflow: visible !important; } .catalog-quote-doc { border: 0; padding: 0; max-width: 100%; } } /* ===== Share Preview modal (footer admin feature) ===== */ .spv-card { border: 1px solid var(--border); background: var(--bg); max-width: 420px; overflow: hidden; } .spv-card img { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; background: var(--frame-bg); } .spv-card-body { padding: 0.85rem 1rem; } /* Domain line of the preview card, with the favicon beside it the way a real link preview and a browser tab both present it. */ .spv-domain-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; } .spv-domain { font-family: 'Roboto', sans-serif; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } /* Real colours, not a themed mask: this is a QA view of the actual icon. Selector carries .spv-card so it outranks `.spv-card img` above, which would otherwise stretch the favicon to the card's full width at 1.91:1. */ .spv-card img.spv-favicon { display: block; width: 16px; height: 16px; aspect-ratio: auto; flex: 0 0 auto; object-fit: contain; background: none; } .spv-card img.spv-favicon[hidden] { display: none; } .spv-noicon { font-family: 'Roboto Mono', monospace; font-size: 0.6rem; color: var(--danger, #eb1313); flex: 0 0 auto; } .spv-noicon[hidden] { display: none; } .spv-title { font-family: 'Roboto', sans-serif; font-size: 0.92rem; font-weight: 600; color: var(--text); line-height: 1.35; margin-bottom: 0.3rem; } .spv-desc { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; } .spv-noimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 1.91 / 1; background: var(--frame-bg); color: var(--text-muted); font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; } .spv-heading { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 1.1rem 0 0.6rem; } .spv-heading:first-child { margin-top: 0; } .spv-table-wrap { border: 1px solid var(--border); } .spv-table { width: 100%; border-collapse: collapse; font-family: 'Roboto', sans-serif; font-size: 0.72rem; } .spv-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; } .spv-table tr:last-child td { border-bottom: none; } .spv-k { color: var(--text-muted); white-space: nowrap; width: 1%; } .spv-v { color: var(--text); word-break: break-all; } .spv-missing { color: var(--danger); font-style: italic; } /* ===== about ===== */ .ab-page { justify-content: flex-start; gap: 1rem; } .ab-section { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .ab-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .ab-prose { font-family: 'Roboto', sans-serif; font-size: 0.8rem; line-height: 1.7; color: var(--text); } .ab-prose p { margin: 0 0 1rem; } .ab-prose p:last-child { margin-bottom: 0; } /* Bullet blocks in admin-entered prose (see renderProse in about.js). Tight leading between items so a long list of credits stays scannable, and a gold marker to tie it to the rest of the palette. */ .ab-prose-list { margin: 0 0 1rem; padding-left: 1.1rem; list-style: disc; } .ab-prose-list:last-child { margin-bottom: 0; } .ab-prose-list li { margin: 0 0 0.4rem; padding-left: 0.15rem; } .ab-prose-list li:last-child { margin-bottom: 0; } .ab-prose-list li::marker { color: var(--gold); } /* Tabs inside the About Phil Holland deck. Same interaction and aria-current hook as .eqm-tab on the equipment page, but set in Roboto at mixed case rather than uppercase mono: four labels as long as "Notable Accomplishments" in uppercase mono would overrun the 60% column on their own. flex-wrap is the backstop — at the 761 lock they do fall to a second row, and wrapping reads better than clipping or a scrollbar. */ .ab-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--border); } .ab-tab { background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-muted); padding: 0.5rem 0.75rem; transition: color 0.18s ease, border-color 0.18s ease; } .ab-tab:first-child { padding-left: 0; } .ab-tab:hover { color: var(--gold); } .ab-tab[aria-current="true"] { color: var(--gold); border-bottom-color: var(--gold); } .ab-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; } /* A tab switched off, shown only to an admin in edit mode so it can be selected and switched back on. Dimmed and tagged so it is never mistaken for something a visitor can see. */ .ab-tab.is-tab-hidden { opacity: 0.55; } /* Tab editor, admin edit mode only. Sits under the tab bar rather than inline with it, so the tabs stay a clean row and the controls read as acting on whichever tab is currently selected. */ .ab-tab-admin { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.5rem 0 0.25rem; } .ab-tab-admin[hidden] { display: none; } /* A section switched off, shown only to an admin in edit mode so it can be switched back on. Same treatment as a hidden tab: dimmed and tagged, never mistakable for something a visitor can see. */ .ab-section.is-section-hidden { opacity: 0.55; } .ab-section.is-section-hidden .res-label::after { content: 'hidden'; margin-left: 0.5rem; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: #eb1313; vertical-align: middle; } /* The head becomes a row so the visibility button can sit beside its label rather than pushing the section's content down. */ .ab-section-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .ab-sec-vis-btn { margin-left: auto; } /* An external link with no logo renders as a button rather than a bare text badge, matching the Client List link - .export-btn is an inline-flex, so an anchor wearing it needs its centring and text-decoration back. */ .ab-link-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; } /* No URL yet: still visible to an admin, but never looks pressable. */ .ab-link-btn.is-inert, .ab-link-badge.is-inert { opacity: 0.5; pointer-events: none; } /* Logo slot in the External Links editor. */ .ab-ext-logo-cell { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; } /* Preview drawn as a mask like the badge itself, so a file that would render blank on the page renders blank here too - the preview cannot flatter a logo the page will not show. */ .ab-ext-logo-preview { display: inline-block; width: 2.2rem; height: 1.1rem; background: var(--text); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; flex: 0 0 auto; } .ab-ext-logo-status { font-family: 'Roboto Mono', monospace; font-size: 0.62rem; color: var(--text-muted); white-space: nowrap; } .ab-tab.is-tab-hidden::after { content: 'hidden'; margin-left: 0.4rem; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); padding: 0 0.25rem; } /* Checkbox row in the tab edit modal. */ .ab-tab-vis { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-family: 'Roboto', sans-serif; font-size: 0.85rem; color: var(--text); } .ab-tab-vis input { cursor: pointer; } /* Three 4:3 photos stacked vertically in their own deck, beside the About Phil Holland tabs (see .ab-split-bio). --ab-bio-h is a ceiling on each frame's height, not a target: a frame is width:100% of its slot and 4/3, so it only reaches the cap once the column's inner width passes 320px. Below that the column is what limits it. At 22.5% the inner width is ~174px, giving ~130px-tall frames. The cap sits on .ab-bio-slot rather than the frame so the photo and its admin button share one width and stay aligned. */ .ab-bio-photo-wrap { --ab-bio-h: 240px; width: 100%; display: flex; flex-direction: column; gap: 1rem; align-items: center; } .ab-bio-slot { width: 100%; max-width: calc(var(--ab-bio-h) * 4 / 3); display: flex; flex-direction: column; gap: 0.6rem; } .ab-bio-slot[hidden] { display: none; } .ab-bio-photo-frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--border); background: var(--bg); overflow: hidden; } .ab-bio-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; } .ab-bio-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); } /* When the photo column stands down entirely — no photos and not editing — the row becomes one column rather than a half-width deck beside a gap. */ .ab-split-bio:has(> .ab-section[hidden]) { grid-template-columns: minmax(0, 1fr); } /* Admin controls for one photo: Change, up, down, Remove. They wrap, because the column can be as narrow as ~174px at small viewports where four buttons on one line would run past the frame. Change takes the leftover width; the arrows and Remove stay at their content size. */ .ab-bio-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; } .ab-bio-change-btn { flex: 1 1 auto; width: auto; } .ab-bio-remove-btn, .ab-bio-move-btn { flex: 0 0 auto; } /* Sits under the last photo, matched to the frame width above it. */ .ab-bio-add-btn { width: 100%; max-width: calc(var(--ab-bio-h) * 4 / 3); } /* Links and Organizations sit side by side, each taking half the measure. max-width here, not on the halves: .control-deck already carries max-width:960px, so without a cap on the wrapper each half could take the full 960 and the pair would run to 1920 - twice the page measure. The 960 belongs to the ROW; the columns then split it. A grid of two equal columns rather than flex, so both halves are the same width regardless of how much each contains - one link against a dozen org badges would otherwise size the columns to their content. minmax(0,1fr) lets a column shrink below its content width; plain 1fr has an auto minimum and a long org name would push the split off balance. align-items:stretch keeps the two decks the same height even when one has fewer rows, so they read as a matched pair. */ .ab-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; width: 100%; max-width: 960px; } /* The halves must not re-apply the deck's own 960 cap. */ .ab-split > .ab-section { min-width: 0; max-width: none; } /* Three-up variant. Organizations keeps half the row - it holds three logos that total ~319px and would wrap to two lines in an even third. The other two boxes hold a couple of buttons each and split the remaining half. */ .ab-split-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); } /* Four-up variant. Organizations still takes half the row — 3fr against three 1fr columns is 3/6 — so the logo strip keeps the width it needs. The three button boxes now split the other half three ways instead of two, landing at ~152px each inside the 960 cap, or ~112px at the 761 lock. That is enough for one short button but not for a two-word one on a single line, which is why .ab-btn-tight exists below. */ .ab-split-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 3fr); } /* Prose against bio photos. The photo column is given a straight percentage rather than an fr share, because fr divides what's left AFTER the 1rem gap is taken out — so 2fr of 10 landed at 19.7% of the measure, not 20%. A percentage resolves against the grid container itself, making this exactly 22.5% of the 960 cap (216px), with the prose column taking the remainder. */ .ab-split-bio { grid-template-columns: minmax(0, 1fr) 22.5%; } /* In a narrow column an .export-btn's default padding forces its label to wrap mid-phrase or overflow. Shrinking the horizontal padding and allowing a centred two-line label keeps the button inside its box without needing a shorter caption. Scoped to .ab-split-4 so the roomier layouts are untouched. */ .ab-split-4 .ab-links-row a.export-btn.ab-btn-tight { padding-left: 0.6rem; padding-right: 0.6rem; text-align: center; line-height: 1.25; white-space: normal; } .ab-links-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; } .ab-links-row a.export-btn { text-decoration: none; } /* Brand mark for a link that has a logo, used as the inside .ab-link-badge. The mask image is set inline per record from the uploaded file, so no default is declared here — a stylesheet default pointing at a fixed path is exactly what left an invisible-but- space-occupying badge behind when that file went missing. [hidden] needs restating: the element is display:block here, which would otherwise beat the attribute. */ .ab-link-logo { flex: 0 0 auto; display: block; height: 2rem; width: calc(2rem * var(--ar, 1.98)); background-color: var(--text-muted); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background-color 0.18s ease; } .ab-link-logo:hover { background-color: var(--gold); } .ab-link-logo[hidden] { display: none; } .ab-orgs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } /* Organization logo. Height is fixed so a row of them shares one baseline; width comes from the per-logo aspect ratio set inline, which means the row is laid out correctly before any image decodes and never reflows. --scale is an optional per-logo multiplier for marks that read small at the shared height - a near-square badge against a wide wordmark. Masked onto a colour rather than shown as an : the source art is a mix of black and grey on transparency, and a mask discards colour so they all come out matching each other and the theme. */ .ab-org-logo { flex: 0 0 auto; height: calc(2rem * var(--scale, 1)); width: calc(2rem * var(--scale, 1) * var(--ar, 3)); background-color: var(--text-muted); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: background-color 0.18s ease; } .ab-org-logo:hover { background-color: var(--gold); } /* An organization with a link renders as an with these same classes, so the anchor defaults have to be neutralised — otherwise a linked badge picks up an underline the unlinked ones don't have. */ a.ab-org-logo, a.ab-org-tag { text-decoration: none; } a.ab-org-tag:hover { border-color: var(--gold); color: var(--gold); } .ab-org-tag { font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--text); border: 1px solid var(--border); background: var(--bg); padding: 0.35rem 0.7rem; } /* Organization rows in the Links & Organizations modal. Name and link share the row and wrap to their own lines when it gets tight, with the reorder and remove controls held together at the end. Scoped by id because .sc-item-row carries no styling of its own. */ #abOrgsList .ab-org-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--border); } #abOrgsList .ab-org-row:first-child { border-top: 0; padding-top: 0; } #abOrgsList .ab-org-name { flex: 1 1 40%; min-width: 0; max-width: none; } #abOrgsList .ab-org-url { flex: 1 1 40%; min-width: 0; max-width: none; } #abOrgsList .ab-org-row-actions { display: flex; gap: 0.35rem; flex: 0 0 auto; } /* ===================== lutBuilder tool ===================== */ .lutb-page { justify-content: flex-start; gap: 1.5rem; } .lutb-page input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .lutb-page input[type="number"]::-webkit-inner-spin-button, .lutb-page input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .lutb-page .export-btn:disabled { opacity: 0.4; cursor: not-allowed; } .lutb-page .export-btn:disabled:hover { border-color: var(--border); color: var(--text-muted); } .lutb-col-chain { flex: 1.4 1 340px; min-width: 300px; } .lutb-col-export { flex: 1 1 220px; min-width: 200px; } .lutb-chain { display: flex; flex-direction: column; gap: 0.8rem; } .lutb-stage { display: flex; flex-direction: column; gap: 0.45rem; } .lutb-stage + .lutb-stage { padding-top: 0.8rem; border-top: 1px dashed var(--border); } .lutb-mix { display: flex; align-items: center; gap: 0.6rem; } .lutb-mix .fc-field-label { flex: 0 0 auto; } .lutb-mix .extraction-range { flex: 1 1 auto; width: auto; min-width: 0; } .lutb-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; } .lutb-toggle input[type="checkbox"] { accent-color: var(--gold); cursor: pointer; margin: 0; width: 14px; height: 14px; flex: 0 0 auto; } .lutb-toggle .fc-field-label { cursor: pointer; } .lutb-stage.is-off .export-select, .lutb-stage.is-off .lutb-mix { opacity: 0.4; } .lutb-stage.is-off .lutb-toggle .fc-field-label { opacity: 0.55; } .lutb-title { width: 100%; max-width: none; } .lutb-size-row { display: flex; align-items: center; gap: 0.5rem; } .lutb-size-row .export-select { flex: 1 1 auto; width: auto; } .lutb-size-custom { width: 4.2rem; max-width: none; text-align: center; } .lutb-preview-field { min-width: 220px; } .lutb-preview-section { max-width: 960px; width: 100%; margin: 0 auto; } .lutb-preview-head { display: flex; align-items: center; gap: 0.9rem; width: 100%; } .lutb-preview-head .res-label { flex: 1 1 auto; } .lutb-compare-toggle { flex: 0 0 auto; } .lutb-preview-wrap { position: relative; width: 100%; background: var(--frame-bg); border: 1px solid var(--border); overflow: hidden; cursor: col-resize; touch-action: none; user-select: none; -webkit-user-select: none; } .lutb-preview-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .lutb-preview-wrap.is-solo { cursor: default; } .lutb-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--gold); pointer-events: none; } .lutb-divider::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: rgba(10, 10, 10, 0.75); border: 1px solid var(--gold); } .lutb-pv-tag { position: absolute; top: 0.5rem; font-family: 'Roboto', sans-serif; font-size: 0.62rem; letter-spacing: 0.12em; color: #ebebeb; background: rgba(0, 0, 0, 0.55); padding: 0.15rem 0.45rem; pointer-events: none; } .lutb-pv-in { left: 0.5rem; } .lutb-pv-out { right: 0.5rem; } .lutb-summary { grid-template-columns: repeat(4, 1fr); max-width: 960px; } @media (max-width: 600px) and (min-width: 761px) { .lutb-summary { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) and (min-width: 761px) { .lutb-setup { grid-template-columns: 1fr; } .lutb-preview-field { min-width: 0; width: 100%; } } /* ===== lensData ===== */ .ld-page .deck-col { flex: 1 1 220px; } .ld-setup { align-items: stretch; } .ld-col-select { flex: 3 1 420px; } .ld-col-select .fc-fields { width: 100%; } /* Status / error line under the deck. Hidden entirely when empty so it doesn't leave a gap in the normal case. */ .ld-hint { width: 100%; max-width: 960px; margin: -0.75rem auto 0; text-align: center; } .ld-hint:empty { display: none; } .ld-page .dr-controls .export-select { width: 100%; } /* Lander: series overview beside the coverage diagram */ .ld-lander-row { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.5rem; align-items: start; } .ld-lander-row > .res-section { min-width: 0; } .ld-series-head { display: flex; flex-direction: column; gap: 0.2rem; width: 100%; } .ld-series-title { font-family: 'Roboto', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.03em; color: var(--gold); line-height: 1.3; } .ld-series-sub { font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .ld-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; } .ld-badge { font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--current); border: 1px solid var(--border); background: var(--bg); padding: 0.15rem 0.5rem; line-height: 1.5; } .ld-specs { width: 100%; } .ld-specs .dof-spec { grid-template-columns: minmax(120px, 42%) 1fr; } .ld-notes { font-family: 'Roboto', sans-serif; font-size: 0.8rem; line-height: 1.55; color: var(--text); width: 100%; } .ld-notes:empty { display: none; } .ld-sources { font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.03em; line-height: 1.5; color: var(--text-muted); width: 100%; } .ld-sources:empty { display: none; } .ld-sources a { color: var(--gold); text-decoration: none; } .ld-sources a:hover { text-decoration: underline; } /* Coverage diagram — image circle against reference format rectangles */ .ld-cov-stage { width: 100%; display: flex; align-items: center; justify-content: center; background: var(--frame-bg); border: 1px solid var(--border); padding: 0.5rem; } .ld-cov-svg { width: 100%; max-width: 340px; height: auto; display: block; } .ld-cov-circle { fill: rgba(235, 208, 129, 0.07); stroke: var(--gold); stroke-width: 1.25; } .ld-cov-illum { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0.55; } .ld-cov-rect { fill: none; stroke-width: 1.1; } .ld-cov-rect.is-covered { stroke: #81ebeb; } .ld-cov-rect.is-short { stroke: #eb6d6d; stroke-dasharray: 4 3; } .ld-cov-centre { fill: var(--gold); } .ld-cov-legend { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; } .ld-leg-item { display: grid; grid-template-columns: 0.9rem 1fr auto auto; align-items: center; gap: 0.5rem; font-family: 'Roboto', sans-serif; font-size: 0.72rem; color: var(--text-muted); } .ld-leg-swatch { width: 0.7rem; height: 0.7rem; border: 1px solid var(--border); display: inline-block; } .ld-leg-swatch.is-covered { border-color: #81ebeb; background: rgba(129, 235, 235, 0.18); } .ld-leg-swatch.is-short { border-color: #eb6d6d; background: rgba(235, 109, 109, 0.15); } .ld-leg-swatch.is-tight { border-style: dashed; } .ld-leg-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ld-leg-diag { color: var(--text-muted); font-variant-numeric: tabular-nums; } .ld-leg-flag { letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; } .ld-leg-flag.is-covered { color: var(--current); } .ld-leg-flag.is-short { color: var(--danger-soft); } .ld-cov-note { font-family: 'Roboto', sans-serif; font-size: 0.7rem; line-height: 1.5; color: var(--text-muted); width: 100%; } /* Spec table */ .ld-page .res-table-wrap { overflow-x: auto; } .ld-table { width: 100%; } .ld-table td { font-variant-numeric: tabular-nums; } /* Iris glyphs in the Max / Min aperture headers. Stroke inherits the header colour so they follow the light/dark theme without a second rule. */ .ld-ap-icon { width: 0.72rem; height: 0.72rem; vertical-align: -0.11em; margin-left: 0.3rem; fill: none; stroke: currentColor; stroke-width: 1.2; overflow: visible; } .ld-ap-icon .ld-ap-dot { fill: currentColor; stroke: none; } .ld-row-announced td { color: var(--text-muted); } .ld-row-announced .tier { color: var(--text-muted); } .ld-tag { margin-left: 0.45rem; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); padding: 0.05rem 0.35rem; font-weight: 400; } @media (max-width: 860px) { .ld-lander-row { grid-template-columns: 1fr; } } @media (max-width: 480px) and (min-width: 761px) { .ld-leg-item { grid-template-columns: 0.9rem 1fr auto; } .ld-leg-diag { display: none; } } /* ----- lensData admin editing ----- */ .ld-admin-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; width: 100%; } .ld-admin-row[hidden] { display: none; } .ld-admin-series { max-width: 960px; margin: -0.5rem auto 0; } .ld-danger-btn { color: var(--danger-soft); border-color: var(--danger-dim); } .ld-danger-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-dim); } .ld-admin-status { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--success); margin-left: 0.25rem; } .ld-admin-status.is-error { color: var(--danger); } .res-table th.ld-admin-col, .res-table td.ld-admin-col { text-align: right; width: 1%; white-space: nowrap; } .ld-row-btn { background: var(--btn-ldrow-bg, transparent); border: 1px solid var(--btn-ldrow-border, var(--border)); color: var(--btn-ldrow-fg, var(--text-muted)); font-family: 'Roboto', sans-serif; font-size: var(--btn-ldrow-size, 0.68rem); letter-spacing: var(--btn-ldrow-tracking, 0.06em); padding: var(--btn-ldrow-pad-y, 0.15rem) var(--btn-ldrow-pad-x, 0.55rem); border-radius: var(--btn-ldrow-radius, 0); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .ld-row-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); } .ld-cov-empty { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); padding: 2rem 1rem; text-align: center; } /* Wider dialog for the spec-heavy series and lens editors */ .gm-modal-box.gm-wide { max-width: 640px; } .ld-gm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; } .ld-gm-sub { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--current); margin-top: -0.5rem; } .ld-gm-grid .export-select { width: 100%; } .ld-gm-grid .custom-dd { width: 100%; } .ld-ta { min-height: 8rem; } .gm-field code { font-family: 'Roboto Mono', monospace; font-size: 0.9em; color: var(--gold); text-transform: none; letter-spacing: 0; } .ld-permount-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .ld-permount-toggle { text-transform: none; letter-spacing: 0.04em; font-size: 0.7rem; } .ld-mount-rows { display: flex; flex-direction: column; gap: 0.4rem; } .ld-mount-rows[hidden] { display: none; } .ld-mount-row { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: 0.6rem; } .ld-mount-label { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--gold); } .ld-mount-row .text-input { width: 100%; max-width: none; } .ld-announce-toggle { text-transform: none; letter-spacing: 0.03em; font-size: 0.72rem; } .gm-modal-actions .ld-danger-btn { margin-right: auto; } @media (max-width: 560px) and (min-width: 761px) { .ld-gm-grid { grid-template-columns: 1fr; } } /* ========================================================================= SHOP (/shop/index.html, /shop/product.html, /shop/edit.html) Ported from the Alan Holland "work" section and rebuilt on PHFX tokens. Nothing here introduces a colour or a radius of its own: gold for the call to action, --current for available, --text-muted for sold out, square corners throughout, so a theme switch reaches all of it. The 900px breakpoint is the mobile-facing one. The shell locks mobile at 761px (see the viewport meta), which is below 900, so a phone always evaluates these rules while a full desktop window does not. That is why the two-column product layout collapses at 900 and not at some smaller number that would never fire. ========================================================================= */ /* ---- shared bits ---- */ .shop-mark { width: 2.5rem; height: 2.5rem; color: var(--border); flex: 0 0 auto; } .shop-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 3rem 1rem; text-align: center; color: var(--text-muted); font-family: 'Roboto', sans-serif; font-size: 0.85rem; } .shop-state.is-loading .shop-mark { animation: shopPulse 1.6s ease-in-out infinite; } @keyframes shopPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } } .shop-state-action { text-align: center; margin-top: 0.5rem; } .shop-count { font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--text-muted); } .shop-no-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--frame-bg); } .shop-status { display: inline-block; font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15rem 0.5rem; border: 1px solid var(--border); border-radius: 0; line-height: 1.4; } .shop-status.is-available { color: var(--current); border-color: var(--current); } .shop-status.is-sold { color: var(--text-muted); } /* A draft is admin-only by construction — shopItems.cgi never sends one to the public — so this is loud on purpose. It exists to stop an unlisted item being mistaken for a live one while it is being worked on. */ .shop-draft-pill { display: inline-block; font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.15rem 0.5rem; border: 1px dashed var(--warning); color: var(--warning); line-height: 1.4; } .shop-admin-line { color: var(--text-muted); text-decoration: none; transition: color 0.18s ease; } .shop-admin-line:hover { color: var(--gold); } /* ---- toast ---- */ .shop-toast { position: fixed; left: 50%; bottom: 3.5rem; transform: translateX(-50%); z-index: 120; background: var(--surface); border: 1px solid var(--gold); color: var(--text); font-family: 'Roboto', sans-serif; font-size: 0.78rem; letter-spacing: 0.03em; padding: 0.6rem 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); animation: shopToastIn 0.18s ease; max-width: min(30rem, 90vw); text-align: center; } .shop-toast.is-err { border-color: var(--danger); color: var(--danger-soft); } @keyframes shopToastIn { from { opacity: 0; transform: translate(-50%, 0.4rem); } to { opacity: 1; transform: translate(-50%, 0); } } /* ---- lander: filter bar ---- */ .shop-page { justify-content: flex-start; gap: 1rem; } .shop-bar { width: 100%; max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* Category links, not bordered pills — this mirrors .motion-cat-link, which is already the site's filter-bar convention. Kept as its own selector rather than reusing the motion class, so the two can diverge without one lander silently restyling the other. */ .shop-categories { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; font-family: 'Roboto', sans-serif; font-size: 0.78rem; flex: 1 1 auto; min-width: 0; } .shop-cat-link { color: var(--text-muted); text-decoration: none; cursor: pointer; letter-spacing: 0.06em; text-transform: uppercase; background: none; border: none; padding: 0; font: inherit; transition: color 0.15s ease; } /* Three distinct steps, matching .motion-cat-link: unselected filters recede at --text-muted, gold marks the one under the pointer as it does on every other control, and --current marks the one in force — which is what that token is named for. This previously ran gold-at-rest with an underline on hover. That worked, but it spent the site's loudest colour on every filter at once, leaving the selected item distinguished by hue alone and the row with no hierarchy. The underline is dropped because hue now carries all three states on its own. */ .shop-cat-link:hover { color: var(--gold); } /* Active outranks hover: pointing at the selected filter must not change what it is telling you. */ .shop-cat-link.active, .shop-cat-link.active:hover { color: var(--current); } .shop-cat-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; } /* ---- lander: cards ---- */ /* .shop-grid rides on .tool-grid for its column counts, so the shop tracks the rest of the site's landers automatically. Only the card differs. */ .shop-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 0; text-decoration: none; color: var(--text); overflow: hidden; transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .shop-card:hover { border-color: var(--gold); background: var(--surface-hover); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); } .shop-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .shop-card-frame { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--frame-bg); overflow: hidden; } .shop-card-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .shop-card:hover .shop-card-frame img { transform: scale(1.03); } /* Sold-out items stay in the grid rather than disappearing — the back catalogue is worth showing — but they read as past tense. */ .shop-card.is-sold .shop-card-frame img { opacity: 0.55; } .shop-card.is-draft { border-style: dashed; } .shop-card-tag { position: absolute; top: 0.5rem; left: 0.5rem; font-family: 'Roboto', sans-serif; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12rem 0.45rem; background: rgba(10, 10, 10, 0.78); border: 1px solid var(--border); line-height: 1.4; } .shop-card-tag.is-available { color: var(--current); border-color: var(--current); } .shop-card-tag.is-sold { color: var(--text-muted); } .shop-card-draft { position: absolute; top: 0.5rem; right: 0.5rem; font-family: 'Roboto', sans-serif; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12rem 0.45rem; background: rgba(10, 10, 10, 0.78); border: 1px dashed var(--warning); color: var(--warning); line-height: 1.4; } .shop-card-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.85rem 1rem 1rem; } .shop-card-title { font-family: 'Roboto', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold); } .shop-card-meta { font-family: 'Roboto', sans-serif; font-size: 0.75rem; color: var(--text-muted); } /* ---- product page ---- */ .shop-product-page { justify-content: flex-start; gap: 1.5rem; max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem; width: 100%; min-width: 0; } .shop-product { width: 100%; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.75rem; align-items: start; } /* --shop-aspect is set per item by shopProduct.js from the product's own ratio field, and inherited by both the stage and the thumbnails so the strip always echoes the frame above it. The fallback matters only if the column is ever rendered without the variable. */ .shop-product-media { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; } /* Images are click-through so the surrounding element is the right-click target — the browser then offers no "Save image as". Paired with the contextmenu and dragstart handlers in shopCommon.js's protectFrame(). Mirrors the .lb-img-frame img treatment used by the still gallery. */ .shop-protected img { pointer-events: none; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; } .shop-stage { width: 100%; aspect-ratio: var(--shop-aspect, 4 / 3); background: var(--frame-bg); border: 1px solid var(--border); overflow: hidden; cursor: zoom-in; display: flex; align-items: center; justify-content: center; } .shop-stage img { width: 100%; height: 100%; object-fit: contain; display: block; } .shop-stage:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* The strip spans the stage exactly. It used to be a wrapping flex row of fixed 3.6rem squares, which meant the row almost never ended flush with the stage above it — four thumbnails left 479px of dead space on the right at the 761 lock. Equal 1fr columns, counted to match the number of images, make every full row total the stage width whatever that width happens to be. shopProduct.js sets --shop-thumb-cols from the image count. The fallback of 4 only matters if the strip is ever rendered without it. */ .shop-thumbs { display: grid; grid-template-columns: repeat(var(--shop-thumb-cols, 4), 1fr); gap: 0.4rem; } /* Echoes the stage's ratio rather than hardcoding one, but capped in height: at the lock two images would otherwise give a pair of 361x271 thumbnails, taller than they are useful. Past the cap the box simply grows wider than its ratio and object-fit crops it, which keeps the row flush either way. */ .shop-thumb { width: 100%; min-width: 0; aspect-ratio: var(--shop-aspect, 4 / 3); max-height: 6rem; padding: 0; background: var(--frame-bg); border: 1px solid var(--border); border-radius: 0; cursor: pointer; overflow: hidden; transition: border-color 0.18s ease, opacity 0.18s ease; opacity: 0.6; } .shop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .shop-thumb:hover { opacity: 1; border-color: var(--gold); } .shop-thumb[aria-current="true"] { opacity: 1; border-color: var(--gold); } .shop-product-info { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; } .shop-product-info h1 { font-family: 'Roboto', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.03em; color: var(--gold); } .shop-product-sub { font-family: 'Roboto', sans-serif; font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.04em; margin-top: -0.5rem; } .shop-product-status { display: flex; gap: 0.4rem; flex-wrap: wrap; } .shop-prose { font-family: 'Roboto', sans-serif; font-size: 0.85rem; line-height: 1.65; color: var(--text); } .shop-prose p + p { margin-top: 0.7rem; } .shop-prose a { color: var(--gold); } .shop-spec-list { border-top: 1px solid var(--border); font-family: 'Roboto', sans-serif; font-size: 0.8rem; } .shop-spec-row { display: grid; grid-template-columns: 8rem 1fr; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); } .shop-spec-row dt { color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.7rem; padding-top: 0.1rem; } .shop-spec-row dd { color: var(--text); overflow-wrap: break-word; } /* ---- buy box ---- */ .shop-buy-box { border: 1px solid var(--border); background: var(--surface); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; } /* External references. Same structure as the buy box but no background fill and no border, so it reads as a footnote to the item rather than a second purchase panel. The distinction matters: nothing in here should look like a place to spend money. */ .shop-ref-box { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; } .shop-ref-links { display: flex; flex-direction: column; gap: 0.35rem; } .shop-ref-link { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0; color: var(--text-muted); font-family: 'Roboto', sans-serif; font-size: 0.78rem; letter-spacing: 0.03em; text-decoration: none; transition: color 0.18s ease; } .shop-ref-link:hover { color: var(--gold); } /* Outbound arrow, distinct from the buy links' forward arrow. */ .shop-ref-link .arr { flex: 0 0 auto; opacity: 0.6; } .shop-ref-link:hover .arr { opacity: 1; } .shop-buy-box.is-sold { opacity: 0.85; } .shop-buy-label { font-family: 'Roboto', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .shop-buy-price { font-family: 'Roboto', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.03em; color: var(--current); } .shop-buy-note { font-family: 'Roboto', sans-serif; font-size: 0.8rem; line-height: 1.55; color: var(--text-muted); } .shop-buy-note a { color: var(--gold); } .shop-buy-note-tail { margin-top: 0.2rem; } .shop-buy-links { display: flex; flex-direction: column; gap: 0.4rem; } /* The first link is the primary call to action and is the only gold-filled control on the page, so there is never a question about where to click. Any others are alternative places the same item is listed. */ .shop-buy-link { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.85rem; border: 1px solid var(--border); color: var(--text-muted); font-family: 'Roboto', sans-serif; font-size: 0.8rem; letter-spacing: 0.05em; text-decoration: none; transition: all 0.18s ease; } .shop-buy-link:hover { border-color: var(--gold); color: var(--gold); } .shop-buy-link .arr { transition: transform 0.18s ease; } .shop-buy-link:hover .arr { transform: translateX(3px); } .shop-buy-link.is-primary { border-color: var(--gold); background: var(--gold-dim); color: var(--gold); font-weight: 700; padding: 0.7rem 0.9rem; } .shop-buy-link.is-primary:hover { background: var(--gold); color: var(--bg); } .shop-back-link { font-family: 'Roboto', sans-serif; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--text-muted); text-decoration: none; align-self: flex-start; transition: color 0.18s ease; } .shop-back-link:hover { color: var(--gold); } /* ---- lightbox ---- */ .shop-lightbox { position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; padding: 2.5rem; cursor: zoom-out; } .shop-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .shop-lightbox button { position: absolute; background: none; border: 0; color: var(--text-muted); cursor: pointer; line-height: 1; padding: 0.4rem 0.7rem; transition: color 0.18s ease; } .shop-lightbox button:hover { color: var(--gold); } .shop-lightbox-close { top: 0.6rem; right: 0.9rem; font-size: 2rem; } .shop-lightbox-prev { left: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 3rem; } .shop-lightbox-next { right: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 3rem; } .shop-lightbox-caption { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); font-family: 'Roboto', sans-serif; font-size: 0.75rem; letter-spacing: 0.1em; color: var(--text-muted); } /* ---- manager ---- */ .shop-manage-page { justify-content: flex-start; gap: 1.25rem; max-width: 960px; margin: 0 auto; padding: 1.5rem 1rem; width: 100%; min-width: 0; } .shop-manage-page > div { width: 100%; min-width: 0; } .shop-admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; } .shop-admin-title { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; } .shop-admin-heading { font-family: 'Roboto', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; color: var(--gold); } .shop-admin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } .shop-admin-actions .export-btn { text-decoration: none; } /* List left, editor right — the source site's arrangement. `align-items: start` keeps the list from stretching to the editor's height, which is what makes the sticky rule below have somewhere to travel. */ .shop-admin-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.75rem; align-items: start; padding-bottom: 2rem; } .shop-admin-layout > div { min-width: 0; } /*

is the scroll container in the PHFX shell, not the window, so a long editor would scroll the list clean off the top. Sticking the column to the top of the scrollport keeps the catalogue reachable while working far down an item. The list caps its own height and scrolls internally so a large catalogue can't outgrow the viewport and defeat the point. */ .shop-list-col { position: sticky; top: 0; } .shop-admin-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 24rem; overflow-y: auto; border: 1px solid var(--border); background: var(--surface); padding: 0.4rem; } .shop-admin-list.is-dragging { cursor: grabbing; } .shop-admin-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border: 1px solid transparent; cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease; } .shop-admin-row:hover { background: var(--surface-hover); } .shop-admin-row[aria-current="true"] { border-color: var(--gold); background: var(--gold-dim); } .shop-admin-row.dragging { opacity: 0.5; } .shop-admin-row.is-draft { opacity: 0.72; } .shop-admin-row .grip { color: var(--text-muted); font-size: 0.75rem; letter-spacing: -0.2em; cursor: grab; flex: 0 0 auto; /* Without this a drag starting on the grip selects the list text instead. */ user-select: none; -webkit-user-select: none; touch-action: none; } .shop-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: 0 0 auto; } .shop-dot.is-available { background: var(--current); } .shop-dot.is-sold { background: var(--text-muted); } /* Hollow, because N/A is the absence of a claim rather than a third claim. */ .shop-dot.is-na { background: transparent; box-shadow: inset 0 0 0 1px var(--border); } .shop-admin-pick { flex: 1 1 auto; min-width: 0; background: none; border: 0; padding: 0; text-align: left; color: var(--text); font-family: 'Roboto', sans-serif; font-size: 0.82rem; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shop-admin-flag { flex: 0 0 auto; font-family: 'Roboto', sans-serif; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warning); } .shop-list-hint { font-family: 'Roboto', sans-serif; font-size: 0.72rem; line-height: 1.5; color: var(--text-muted); margin: 0.5rem 0 0; } .shop-editor { border: 1px solid var(--border); background: var(--surface); padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; } .shop-editor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; } .shop-editor-head h2 { font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gold); } .shop-editor-head-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; } .shop-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; } .shop-editor-grid .span-2 { grid-column: 1 / -1; } .shop-editor-grid .text-input, .shop-editor-grid .export-select { width: 100%; max-width: none; } .shop-editor-section { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; padding-top: 1rem; border-top: 1px solid var(--border); } .shop-section-label { font-family: 'Roboto', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .shop-editor-section > div, .shop-editor-section > p { width: 100%; } .shop-editor-footer { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } .shop-editor-footer .export-btn { text-decoration: none; } .shop-check { display: flex; align-items: center; gap: 0.45rem; font-family: 'Roboto', sans-serif; font-size: 0.78rem; color: var(--text); cursor: pointer; } .shop-check input { accent-color: var(--gold); cursor: pointer; } /* Label / value / up / delete. The two text columns share the space so a long value doesn't squeeze its own label out of readability. */ .shop-pair-row { display: grid; grid-template-columns: 1fr 1.4fr auto auto; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; } .shop-pair-row .text-input { width: 100%; max-width: none; } .shop-img-row { display: grid; grid-template-columns: 3rem 1fr auto auto; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; } .shop-img-row .text-input { width: 100%; max-width: none; } .shop-img-thumb { width: 3rem; height: 3rem; object-fit: cover; background: var(--frame-bg); border: 1px solid var(--border); display: block; } .shop-danger-btn { color: var(--danger-soft); border-color: var(--border); } .shop-danger-btn:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-dim); } .shop-drop-zone { width: 100%; border: 1px dashed var(--border); background: var(--frame-bg); color: var(--text-muted); font-family: 'Roboto', sans-serif; font-size: 0.78rem; text-align: center; padding: 1.4rem 1rem; cursor: pointer; transition: all 0.18s ease; } .shop-drop-zone:hover, .shop-drop-zone.over { border-color: var(--gold); color: var(--gold); } .shop-slug-note { display: flex; flex-wrap: wrap; gap: 0.35rem; font-family: 'Roboto', sans-serif; font-size: 0.68rem; line-height: 1.5; color: var(--text-muted); } .shop-slug-addr { color: var(--text-muted); word-break: break-all; } .shop-slug-addr strong { color: var(--gold); font-weight: 400; } .shop-linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--gold); text-decoration: underline; cursor: pointer; } /* ---- narrow (this is the phone case: the shell locks mobile at 761) ---- */ @media (max-width: 900px) { .shop-product { grid-template-columns: 1fr; gap: 1.25rem; } .shop-spec-row { grid-template-columns: 7rem 1fr; } .shop-editor-grid { grid-template-columns: 1fr; } .shop-pair-row { grid-template-columns: 1fr 1.2fr auto auto; } .shop-lightbox { padding: 1.25rem; } /* Still two columns — just a narrower one. At the 761 lock the content box is 729px, so 260 + a 2rem gap would leave the editor at 437px and its label/value pairs around 141px, too tight to read an address in. 200 + 1rem gives the editor 513px and those fields 180 / 215. */ .shop-admin-layout { grid-template-columns: 200px 1fr; gap: 1rem; } .shop-admin-list { max-height: 20rem; } .shop-editor { padding: 1rem; } .shop-editor-head-actions .export-btn { padding: 0.5rem 0.6rem; } }