/* Hand-rolled, no framework/build step. Mobile-first, single 1200px-max column container. Light theme is the default; [data-theme="dark"] on overrides the same variables. Palette/type/shadow tokens below come from the "Artwork conservation studio app" design (claude.ai/design project 368de177-0eb9-4485-a454-8d0c6967d9d7, Studio.dc.html). */ @font-face { font-family: 'Raleway'; src: url('/static/fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Raleway'; src: url('/static/fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations'); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('/static/fonts/Roboto-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('/static/fonts/Roboto-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Roboto'; src: url('/static/fonts/Roboto-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* Material Symbols (Outlined), loaded via Google Fonts CDN (internal/web/layout.templ's/ui.templ's ) - replaces the old one-off hand-drawn static/icons/*.svg set app-wide (logo.svg stays, it's the brand mark, not a UI icon) so every icon comes from one consistent, actively-maintained glyph set instead of a growing pile of bespoke SVGs. Rendered as inline glyphs (see web.Icon) sized via font-size and colored via currentColor - a button's own text color already themes its icon correctly in both light and dark, on any background, with no separate "inverted" variant or dark-mode filter hack needed. */ .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } :root { --font-body: 'Roboto', system-ui, -apple-system, "Segoe UI", sans-serif; --font-heading: 'Raleway', 'Roboto', system-ui, sans-serif; --gray-50: #F0F3F6; --gray-100: #E8EBF0; --gray-200: #D3D8DF; --gray-300: #979FAB; --gray-400: #798492; --gray-700: #4E5863; --gray-800: #3E4651; --gray-900: #242A30; --green-500: #3FA864; --green-50: #E9F7EE; --yellow-100: #FCEDD5; --yellow-900: #302109; --blue-100: #CCE3F7; --blue-900: #00172B; --bg: var(--gray-50); --surface: #ffffff; --text: var(--gray-900); --text-muted: var(--gray-400); --text-faint: var(--gray-300); --border: var(--gray-200); --border-light: var(--gray-100); --accent: var(--green-500); --accent-text: #ffffff; --green-bg: #E9F7EE; --green-text: #205D36; --amber-bg: #FDF6EA; --amber-text: #8F621C; --red-bg: #FEECEB; --red-text: #922820; --blue-bg: #E6F1FB; --blue-text: #014682; --neutral-bg: var(--gray-100); --neutral-text: var(--text); --stripe-even: #E8F0F9; --header-bg: linear-gradient(96.04deg, var(--yellow-100) -17.14%, var(--blue-100) 94.45%); --shadow-sm: 0px 10px 80px rgba(0,0,0,0.02275), 0px 5.0625px 34.875px rgba(0,0,0,0.035), 0px 2px 13px rgba(0,0,0,0.04725), 0px 0.4375px 4.625px rgba(0,0,0,0.07); --shadow: 0px 43px 80px rgba(0,0,0,0.02275), 0px 21.7687px 34.875px rgba(0,0,0,0.035), 0px 8.6px 13px rgba(0,0,0,0.04725), 0px 1.88125px 4.625px rgba(0,0,0,0.07); --shadow-lg: 0px 65px 80px rgba(0,0,0,0.02275), 0px 32.9062px 34.875px rgba(0,0,0,0.035), 0px 13px 13px rgba(0,0,0,0.04725), 0px 2.84375px 4.625px rgba(0,0,0,0.07); } html[data-theme="dark"] { --bg: var(--gray-900); --surface: var(--gray-800); --text: #F5F6F7; --text-muted: var(--gray-300); --text-faint: var(--gray-400); --border: var(--gray-700); --border-light: var(--gray-700); --accent: var(--green-500); --accent-text: #ffffff; --neutral-bg: var(--gray-700); --stripe-even: #313B46; --header-bg: linear-gradient(96.04deg, var(--yellow-900) -17.14%, var(--blue-900) 94.45%); --shadow: none; --shadow-sm: none; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; line-height: 1.5; } .container { max-width: 1200px; margin-inline: auto; padding: 1rem; } @media (min-width: 640px) { .container { padding: 1.5rem 2rem; } } a { color: inherit; } h1, h2, h3 { margin: 0 0 0.25rem; font-family: var(--font-heading); font-weight: 600; } /* Mobile-first: smaller page title on a narrow screen (real estate is scarce, and it needs to share its row with the primary action - see .page-header/.btn-label below), back up to the original size from the sm breakpoint up. */ h1 { font-size: 1.375rem; font-weight: 500; } @media (min-width: 640px) { h1 { font-size: 1.75rem; } } /* flex-wrap: nowrap (not the app's usual mobile-first wrap) is deliberate here - the title and its primary action (New client/asset/... - see web.NewActionLink) always stay on one row, at every breakpoint, down to the smaller h1 above and .btn-label collapsing to icon-only below. */ .page-header { margin-bottom: 1.5rem; } /* Title + actions is its own row, kept separate from .page-subtitle below - a two-line title block would otherwise get compared for vertical centering against the actions row as one combined height, throwing the buttons off-center from the title text they actually sit next to. */ /* Mobile-first: wraps (actions drop to their own row under the title) below sm - .btn-label's icon-only collapse keeps most action rows short enough to fit, but a detail page with several always-visible-text buttons (e.g. Asset's Edit/Start/HTML/PDF) can still be too wide for a long title to share a strict single row with on a narrow phone; wrapping is a safe fallback rather than squeezing the title down to a sliver. nowrap (title/actions pinned to one row, vertically centered) from sm up, where there's room for both. */ .page-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; } @media (min-width: 640px) { .page-header-row { flex-wrap: nowrap; } } .page-header-row h1 { min-width: 0; } .page-header .actions { flex-shrink: 0; } .page-subtitle { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--text-muted); } /* A small breadcrumb-like chip for "this record's real-world context" lines directly under a PageHeader - Asset's owner, Project's asset/owner, an annotated Media version's source - a plain text line the same weight as .page-subtitle read as part of the header itself; a bordered pill reads as its own distinct, secondary piece of info instead. */ .subtitle-card { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.375rem; margin: 0 0 1rem; padding: 0.375rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 0.8125rem; color: var(--text-muted); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .card { background: var(--surface); border-radius: 4px; padding: 1.25rem; box-shadow: var(--shadow); } html[data-theme="dark"] .card { border: 1px solid var(--border); } .card + .card { margin-top: 1rem; } /* A bare header-row + content block sitting directly on the page background between two .card elements (e.g. Asset detail's "Projects" section, a list of its own per-project cards rather than one enclosing card) - .card + .card's margin-top can't reach across it, so it carries its own top margin, and hands the same margin on to whatever .card follows it. */ .detail-section { margin-top: 1rem; } .detail-section + .card { margin-top: 1rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.75rem; border-radius: 4px; padding: 0 1.125rem; font-size: 0.875rem; font-weight: 500; border: 1px solid var(--border); cursor: pointer; text-decoration: none; font-family: var(--font-body); transition: background-color 0.15s, border-color 0.15s; } .btn-primary { background: var(--accent); border-color: transparent; color: var(--accent-text); } .btn-primary:hover { box-shadow: var(--shadow-sm); } .btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text); } .btn-ghost { background: transparent; color: var(--text-muted); } /* A smaller .btn for a card header's single "+ Add" action (web.ModalTriggerSmall) - sits next to a .dashboard-heading, so the full 44px touch-target height (right for a page's own primary actions) reads as oversized there. Still a real tap target, just not the standard button size. */ .btn-sm { height: 2rem; padding: 0 0.75rem; font-size: 0.8125rem; gap: 0.375rem; } .btn:hover { filter: brightness(0.96); } .btn-secondary:hover { background: var(--bg); border-color: var(--text-muted); } .btn-ghost:hover { background: var(--neutral-bg); color: var(--text); } .btn:active { filter: brightness(0.9); } .btn:focus-visible { outline: 2px solid var(--text-muted); outline-offset: 1px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* web.NewActionLink's label: icon-only below sm (a round/square icon button - simpler and never competes with the page title for room on a narrow .page-header row), icon + text from sm up. */ @media (max-width: 639px) { .btn-label { display: none; } .btn:has(.btn-label) { width: 2.75rem; padding: 0; } } .badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 500; white-space: nowrap; background: var(--neutral-bg); color: var(--neutral-text); border: 1px solid var(--text-muted); } /* Every tone's border is that same tone's own (already darker/more-saturated) *-text color - one consistent rule ("this chip's border is a darker shade of its own color") instead of a flat gray outline that would clash with each background. */ .badge-green { background: var(--green-bg); color: var(--green-text); border-color: var(--green-text); } .badge-amber { background: var(--amber-bg); color: var(--amber-text); border-color: var(--amber-text); } .badge-blue { background: var(--blue-bg); color: var(--blue-text); border-color: var(--blue-text); } .badge-red { background: var(--red-bg); color: var(--red-text); border-color: var(--red-text); } /* .field is shared by web.Field's