@font-face { font-family: "Instrument Sans Variable"; src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Instrument Sans Variable"; src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { font-family: "Instrument Sans Variable", system-ui, Helvetica, Arial, sans-serif; color: #0d1c64; background: #fff; -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* data-view on , set by index.html and app.js, decides between the landing and the workspace. */ :root:not([data-view="workspace"]) #workspace, :root[data-view="workspace"] #auth-section { display: none; } body { margin: 0; } button, input, select, textarea { font: inherit; } #auth-section { position: relative; isolation: isolate; display: grid; min-height: 100vh; min-height: 100svh; place-items: center; padding: 3rem 1.5rem; background: #fff url("/assets/landing-illustration-2.png") center / cover no-repeat; } .hero-content { width: min(100%, 36rem); padding: 1.5rem 0; text-align: center; } #hero-title { margin: 0; font-size: clamp(4.25rem, 6vw, 5.75rem); font-weight: 500; letter-spacing: -0.06em; line-height: 0.95; } .hero-body { width: max-content; max-width: 100%; margin-inline: auto; } .hero-description { margin: 1.25rem 0 1.4rem; font-size: clamp(1rem, 1.4vw, 1.16rem); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; text-wrap: balance; } #login-button { display: block; width: min(100%, 11.5rem); margin-inline: auto; min-height: 2.75rem; padding: 0.6rem 1.25rem; border: 0; border-radius: 1rem; background: #3450d1; color: #fff; cursor: pointer; font-size: 0.94rem; font-weight: 500; letter-spacing: -0.01em; transition: background 180ms ease; } #login-button:hover:not(:disabled) { background: #263da8; } #login-button:focus-visible { outline: 2px solid #0d1c64; outline-offset: 4px; } #login-button:disabled { cursor: not-allowed; opacity: 0.6; } #auth-help { max-width: 26rem; margin: 1.3rem auto 0; line-height: 1.4; } #auth-help:empty { display: none; } /* Workspace tokens follow exmagno: monochrome text, glass panels, white active pills. */ #workspace { --color-text-primary: #000; --color-text-muted: #a9a9a9; --color-card-bg: #f7f7f7; --radius-card: 22px; --radius-pill: 100px; --glass-bg: rgba(242, 242, 242, 0.75); --glass-border: 0.5px solid rgba(255, 255, 255, 0.65); --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), inset 0 0.5px 0 rgba(255, 255, 255, 0.95); --pill-bg: rgba(255, 255, 255, 0.88); --pill-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 0.5px 0 rgb(255, 255, 255); --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --workspace-gap: 20px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--workspace-gap); min-height: 100vh; min-height: 100svh; padding: var(--workspace-gap); background: #fff; color: var(--color-text-primary); font-size: 15px; font-weight: 500; line-height: 22px; } #workspace :focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 2px; } .sidebar { position: sticky; top: var(--workspace-gap); display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 2 * var(--workspace-gap)); height: calc(100svh - 2 * var(--workspace-gap)); padding: 4px; overflow-y: auto; border: var(--glass-border); border-radius: 24px; background: var(--glass-bg); box-shadow: var(--glass-shadow); scrollbar-width: none; -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } .sidebar-top { display: flex; gap: 4px; } .sidebar-tabs { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .sidebar-tabs [role="tab"], .sidebar-nav button, #logout-button { border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); cursor: pointer; } .sidebar-tabs [role="tab"] { position: relative; height: 50px; padding: 0 16px; overflow: hidden; transition: color 400ms var(--ease), background-color 400ms var(--ease), box-shadow 400ms var(--ease); } .upload-open { position: relative; display: grid; flex: 0 0 50px; height: 50px; padding: 0; overflow: hidden; place-items: center; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-primary); cursor: pointer; transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease); } .upload-open:hover { background: var(--pill-bg); box-shadow: var(--pill-shadow); } .upload-open svg, .upload-close svg, .gallery-info svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; } .pill-glow { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255, 255, 255, 0.48) 0%, transparent 65% ); opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease); } .has-glow.is-hovering .pill-glow { opacity: 1; } .sidebar-tabs [role="tab"][aria-selected="true"], .sidebar-nav button:hover, .sidebar-nav button[aria-pressed="true"], #logout-button:hover { background: var(--pill-bg); box-shadow: var(--pill-shadow); color: var(--color-text-primary); } .sidebar-nav { flex: 1; } .sidebar-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .sidebar-nav button, #logout-button { padding: 11px 15px; font-size: 13px; line-height: 18px; transition: color 300ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease); } .sidebar-nav button { display: block; width: 100%; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .sidebar-account { display: flex; align-items: center; gap: 8px; padding-left: 15px; color: var(--color-text-muted); font-size: 13px; line-height: 18px; } #current-user { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-content: start; gap: 12px; } .gallery-tile { display: grid; aspect-ratio: 4 / 5; overflow: hidden; place-items: center; border-radius: var(--radius-card); background: var(--color-card-bg); isolation: isolate; } .gallery-tile img { width: 100%; height: 100%; object-fit: contain; /* Product shots on white blend into the tile colour. */ mix-blend-mode: multiply; opacity: 0; transition: opacity 300ms var(--ease); } .gallery-tile img.is-loaded { opacity: 1; } .gallery-tile-name { padding: 16px; color: var(--color-text-muted); font-size: 13px; line-height: 18px; overflow-wrap: anywhere; text-align: center; } .gallery-empty { grid-column: 1 / -1; margin: 80px 0 0; color: var(--color-text-muted); text-align: center; } .gallery-card { position: relative; transition: transform 400ms var(--ease), opacity 300ms var(--ease); } button.gallery-tile { width: 100%; padding: 0; border: 0; color: inherit; cursor: pointer; transition: background-color 240ms var(--ease), box-shadow 400ms var(--ease), opacity 300ms var(--ease); } @media (hover: hover) { button.gallery-tile:hover { background: #efefef; } } /* Only the tile fades: opacity on the card would also fade the panel and stop its backdrop blur. */ .gallery-card.is-missing .gallery-tile { opacity: 0.4; } .gallery-card.is-selected { z-index: 2; transform: translateY(-6px); } .gallery-card.is-selected .gallery-tile { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.09); } .gallery:has(> .gallery-card.is-selected) > .gallery-card:not(.is-selected) { opacity: 0.45; } .gallery-panel { position: absolute; top: calc(100% + 8px); right: 0; left: 0; display: flex; flex-direction: column; gap: 4px; padding: 4px; border: var(--glass-border); border-radius: 24px; background: var(--glass-bg); box-shadow: var(--glass-shadow); scroll-margin-bottom: var(--workspace-gap); animation: panel-enter 300ms var(--ease); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } /* Under the last row the panel sticks out of the page; this keeps a gap below it when scrolled into view. */ .gallery-panel::after { content: ""; position: absolute; top: 100%; width: 1px; height: var(--workspace-gap); } @keyframes panel-enter { from { opacity: 0; transform: translateY(-4px); } } .gallery-panel-head { display: flex; align-items: flex-start; gap: 8px; padding: 8px 4px 4px 12px; } .gallery-panel-text { flex: 1; min-width: 0; } .gallery-panel-name, .gallery-panel-state, .gallery-panel-error { margin: 0; overflow-wrap: anywhere; } .gallery-panel-state { color: var(--color-text-muted); font-size: 13px; line-height: 18px; } .gallery-info { display: grid; flex: 0 0 32px; height: 32px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.48); color: var(--color-text-muted); cursor: pointer; transition: color 240ms var(--ease), background-color 240ms var(--ease), box-shadow 240ms var(--ease); } .gallery-info:hover, .gallery-info[aria-expanded="true"] { background: var(--pill-bg); box-shadow: var(--pill-shadow); color: var(--color-text-primary); } .gallery-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } .gallery-action { height: 42px; padding: 0 8px; overflow: hidden; border: 0.5px solid rgba(255, 255, 255, 0.68); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.48); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.9); color: var(--color-text-primary); cursor: pointer; font-size: 13px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 140ms ease, opacity 180ms ease; } .gallery-action:hover:not(:disabled) { background: var(--pill-bg); box-shadow: var(--pill-shadow); } .gallery-action:active:not(:disabled) { transform: scale(0.96); } .gallery-action:disabled { cursor: default; opacity: 0.32; } .gallery-panel[aria-busy="true"] .gallery-action { cursor: progress; } .gallery-stats { margin: 0; padding: 0 15px; border-radius: 20px; background: var(--pill-bg); box-shadow: var(--pill-shadow); font-size: 13px; line-height: 18px; animation: panel-enter 300ms var(--ease); } .gallery-stats div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; } .gallery-stats div + div { border-top: 1px solid rgb(239, 239, 239); } .gallery-stats dt { color: var(--color-text-muted); } .gallery-stats dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; } .upload-dialog { width: min(411px, calc(100% - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: visible; border: 0; background: transparent; color: inherit; } .upload-dialog[open] { display: flex; flex-direction: column; align-items: center; gap: 12px; animation: upload-enter 300ms var(--ease); } .upload-dialog::backdrop { background: rgba(225, 225, 225, 0.15); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); } @keyframes upload-enter { from { opacity: 0; transform: translateY(10px) scale(0.985); } } .upload-card { display: flex; flex-direction: column; gap: 20px; width: 100%; height: min(580px, calc(100vh - 110px)); height: min(580px, calc(100svh - 110px)); padding: 28px; border-radius: 30px; background: #fff; box-shadow: 0 20px 70px rgba(0, 0, 0, 0.09); } .upload-progress, .upload-label, .upload-error, .gallery-panel-error { margin: 0; font-size: 13px; line-height: 18px; } .upload-progress, .upload-label { color: var(--color-text-muted); } #upload-heading { margin: 0; font-size: 15px; font-weight: 500; line-height: 22px; } #upload-heading:focus { outline: none; } .upload-drop { position: relative; display: grid; flex: 1; min-height: 120px; overflow: hidden; place-items: center; border-radius: var(--radius-card); background: var(--color-card-bg); color: var(--color-text-muted); cursor: pointer; font-size: 13px; line-height: 18px; text-align: center; transition: background-color 240ms var(--ease); } .upload-drop:hover, .upload-drop.is-dragging { background: #efefef; } .upload-drop:has(input:focus-visible) { outline: 2px solid var(--color-text-primary); outline-offset: 2px; } /* Children ignore the pointer so dragging over them does not fire dragleave on the zone. */ .upload-drop > * { pointer-events: none; } .upload-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; } .upload-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } #upload-drop-label { padding: 0 24px; overflow-wrap: anywhere; } .upload-error, .gallery-panel-error { color: #b42318; } .upload-error:empty, .gallery-panel-error:empty { display: none; } .upload-step, .upload-field { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; } .upload-step { gap: 16px; } .upload-field { gap: 6px; } .upload-field legend { margin-bottom: 6px; padding: 0; } .upload-field input { height: 50px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: var(--glass-bg); color: var(--color-text-primary); font-size: 15px; transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease); } #workspace .upload-field input:focus-visible { outline: none; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 3px rgba(0, 0, 0, 0.1); } .upload-choices { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 24px; background: var(--glass-bg); } .upload-choice { position: relative; flex: 1 1 auto; cursor: pointer; } .upload-choice input { position: absolute; opacity: 0; pointer-events: none; } .upload-choice span { display: block; padding: 11px 15px; border-radius: var(--radius-pill); color: var(--color-text-muted); font-size: 13px; line-height: 18px; text-align: center; white-space: nowrap; transition: color 300ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease); } .upload-choices.is-large .upload-choice span { padding: 14px 16px; font-size: 15px; line-height: 22px; } .upload-choice:hover span, .upload-choice input:checked + span { background: var(--pill-bg); box-shadow: var(--pill-shadow); color: var(--color-text-primary); } .upload-choice input:focus-visible + span { outline: 2px solid var(--color-text-primary); outline-offset: 2px; } .upload-actions { display: flex; gap: 8px; } .upload-primary, .upload-secondary { height: 50px; padding: 0 24px; border: 0; border-radius: var(--radius-pill); cursor: pointer; transition: color 240ms var(--ease), background-color 240ms var(--ease), opacity 180ms ease; } .upload-primary { flex: 1; background: var(--color-text-primary); color: #fff; } .upload-primary:hover:not(:disabled) { background: #262626; } .upload-primary:disabled, .upload-secondary:disabled { cursor: default; opacity: 0.32; } .upload-secondary { background: transparent; color: var(--color-text-muted); } .upload-secondary:hover:not(:disabled) { background: var(--glass-bg); color: var(--color-text-primary); } .upload-close { display: grid; width: 58px; height: 50px; padding: 0; place-items: center; border: var(--glass-border); border-radius: var(--radius-pill); background: var(--glass-bg); box-shadow: var(--glass-shadow); color: var(--color-text-muted); cursor: pointer; transition: color 240ms var(--ease); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); } .upload-close:hover { color: var(--color-text-primary); } .upload-close svg { transform: rotate(45deg); } @media (max-width: 767px) { #workspace { --workspace-gap: 16px; grid-template-columns: minmax(0, 1fr); } .sidebar { position: static; height: auto; } .sidebar-nav ul { display: flex; overflow-x: auto; scrollbar-width: none; } .sidebar-nav li { flex: 0 0 auto; } .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Two gallery columns are too narrow here for the actions side by side. */ @media (max-width: 383px) { .gallery-actions { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { #auth-section { padding: 2rem 1.3rem; } .hero-description { max-width: 20rem; } } @media (prefers-reduced-motion: reduce) { #login-button, .sidebar-tabs [role="tab"], .pill-glow, .upload-open, .upload-drop, .upload-field input, .upload-choice span, .gallery-tile img, .gallery-card, button.gallery-tile, .gallery-info, .gallery-action, .upload-primary, .upload-secondary, .upload-close, .sidebar-nav button, #logout-button { transition: none; } .upload-dialog[open], .gallery-panel, .gallery-stats { animation: none; } }