/* Theming. * * The theme is chosen by `data-theme` on , set from localStorage before * first paint. Both the attribute and the storage key are exactly what * Django's admin uses, so the site toggle and the admin's own toggle are one * setting -- flip it in either place and the other follows. * * Three states: light, dark, and auto (no attribute, or "auto"), which follows * the operating system. The palettes are spelled out twice rather than once * because a media query cannot share a selector list with a plain rule, and * `light-dark()` would have taken the whole page down on any browser that does * not know it. * * --on-accent is the text colour that sits *on* the accent, and stays dark in * both themes because the accent itself does. */ :root, :root[data-theme="light"] { --bg: #f4f5f8; --panel: #ffffff; --panel-2: #eceef3; --ink: #15171f; --muted: #5a6072; --accent: #c25a10; --on-accent: #ffffff; --info: #0067c7; --line: #d7dae2; --ok: #1a8f52; --bad: #c33; --overlay-bg: rgba(20, 22, 30, .82); --overlay-fg: #ffffff; --radius: 10px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #12131a; --panel: #1b1d27; --panel-2: #232634; --ink: #e9eaf0; --muted: #a1a6b8; --accent: #ff8a3d; --on-accent: #191919; --info: #008cff; --line: #2e3140; --ok: #37c978; --bad: #ff5a5a; --overlay-bg: rgba(255, 255, 255, .9); --overlay-fg: #111111; } } :root[data-theme="dark"] { --bg: #12131a; --panel: #1b1d27; --panel-2: #232634; --ink: #e9eaf0; --muted: #a1a6b8; --accent: #ff8a3d; --on-accent: #191919; --info: #008cff; --line: #2e3140; --ok: #37c978; --bad: #ff5a5a; --overlay-bg: rgba(255, 255, 255, .9); --overlay-fg: #111111; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.5rem; background: var(--panel); border-bottom: 1px solid var(--line); } /* The logo stands in for the site title. line-height: 0 removes the descender gap an inline leaves beneath it, which would otherwise show as a strip of cyan below the artwork. The cyan field is kept rather than keyed to transparency: the snow caps are white and the G is black, so no single background suits both. Rounding the corners turns that field into a deliberate badge against the dark header. */ .brand { display: inline-flex; align-items: center; line-height: 0; } .brand:hover { text-decoration: none; } .brand img { height: clamp(48px, 9vw, 76px); width: auto; display: block; border-radius: 8px; } .site-header nav { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; } .site-header nav a { color: var(--muted); } .site-header nav a:hover { color: var(--ink); } /* There is deliberately no admin link or button styled here. The site never advertises that /admin/ exists; the photographer types the URL. Adding a button back would also mean the nav differs between visitors and staff, which is exactly what was removed. */ /* Day/night toggle. Sized in em so the glyph and the circle scale together. */ .theme-button { background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; width: 2.1em; height: 2.1em; font-size: .95rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .theme-button:hover { color: var(--ink); border-color: var(--accent); } .inline { display: inline; } .linklike { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; } .linklike:hover { color: var(--ink); } .badge { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 0 .5rem; font-size: .8rem; font-weight: 700; } .site-header nav a.cart-link { white-space: nowrap; } main { max-width: 1200px; margin: 0 auto; padding: 1.75rem 1.5rem 4rem; } h1 { font-size: 1.8rem; margin: 0 0 .35rem; } h2 { font-size: 1.25rem; margin: 2rem 0 .75rem; } .lede { color: var(--muted); margin: 0 0 1.75rem; max-width: 62ch; } .messages { list-style: none; margin: 0; padding: .75rem 1.5rem; } .msg { padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: .5rem; background: var(--panel-2); } .msg.success { border-left: 3px solid var(--ok); } .msg.error { border-left: 3px solid var(--bad); } .msg.info { border-left: 3px solid var(--info); } /* --- cards / lists --- */ .card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .card { display: block; padding: 1.1rem 1.2rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); } .card:hover { border-color: var(--accent); text-decoration: none; } .card .date { font-size: 1.15rem; font-weight: 650; } .card .meta { color: var(--muted); font-size: .9rem; } .hour-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .hour-cell { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); } .hour-cell:hover { border-color: var(--accent); text-decoration: none; } .hour-cell .count { color: var(--muted); font-size: .85rem; } /* --- photo grid --- */ .photo-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .photo-tile { position: relative; background: var(--panel); border-radius: 8px; overflow: hidden; } .photo-tile img { width: 100%; height: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; } .photo-tile .tile-actions { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: .4rem .5rem; background: linear-gradient(transparent, rgba(0,0,0,.75)); } /* Capture time, over the bottom of the thumbnail. Always light regardless of theme: it sits on the dark gradient above, not on the page background. */ .tile-actions .tile-time { font-size: .8rem; color: #fff; } .tile-actions button { font-size: .8rem; border-radius: 6px; border: 0; padding: .25rem .55rem; cursor: pointer; background: var(--overlay-bg); color: var(--overlay-fg); } .tile-actions .in-cart { background: var(--accent); color: var(--on-accent); } .tile-actions .tile-remove { background: var(--bad); color: #fff; } .detail { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); } @media (max-width: 780px) { .detail { grid-template-columns: 1fr; } } .detail img { width: 100%; border-radius: var(--radius); } .sidebar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; } /* --- forms / buttons --- */ .btn { display: inline-block; padding: .65rem 1.15rem; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 650; border: 0; cursor: pointer; } .btn:hover { text-decoration: none; filter: brightness(1.08); } .btn.secondary { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); } .btn.big { font-size: 1.05rem; padding: .85rem 1.5rem; } form.stacked label { display: block; margin-top: .9rem; color: var(--muted); font-size: .9rem; } form.stacked input, form.stacked select, form.stacked textarea { width: 100%; padding: .55rem .7rem; margin-top: .25rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; color: var(--ink); font: inherit; } form.stacked .helptext { color: var(--muted); font-size: .8rem; } form.stacked ul.errorlist { color: var(--bad); font-size: .85rem; padding-left: 1rem; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; } .panel + .panel { margin-top: 1rem; } table.simple { width: 100%; border-collapse: collapse; } table.simple td, table.simple th { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid var(--line); } .pagination { margin-top: 1.5rem; display: flex; gap: .75rem; align-items: center; color: var(--muted); } .muted { color: var(--muted); } .empty { padding: 3rem 1rem; text-align: center; color: var(--muted); } /* --- footer --- */ .site-footer { border-top: 1px solid var(--line); padding: 1.5rem; text-align: center; color: var(--muted); font-size: .9rem; } .site-footer p { margin: .25rem 0; } /* The request reference on the confirmation page. Monospace so a code read back over the phone is unambiguous, and large because it is the one thing on the page worth writing down. */ .request-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .06em; color: var(--accent); margin: .25rem 0 .75rem; }