/* ===================================================================== lolakelly.co.uk — "Keepsake" theme Warm oatmeal paper, mulberry accent, serif type. Light + dark. --------------------------------------------------------------------- Colours live as CSS variables (tokens). Components ONLY read the tokens, so switching light/dark just swaps the token block. The theme is chosen by data-theme on (set by theme.js), which overrides the OS preference in both directions. ===================================================================== */ /* ---- Design tokens: light (default) -------------------------------- */ :root { --ground: #f3eee5; /* page background — warm oatmeal paper */ --panel: #fbf8f2; /* cards / raised surfaces */ --panel-2: #efe7d9; /* subtle inset / hover */ --ink: #3a2e2a; /* main text — warm near-black */ --muted: #8a7a70; /* secondary text */ --accent: #8a3b5e; /* mulberry — links, primary actions */ --accent-ink:#ffffff; /* text on the accent */ --accent-2: #6f7d5e; /* sage — secondary tags */ --line: #e2d8c9; /* hairline borders */ --shadow: 0 1px 2px rgba(58,46,42,.05), 0 10px 30px rgba(58,46,42,.08); --good: #3f7a52; --warn: #9a5a1e; --danger: #a23a3a; --radius: 10px; --radius-lg:16px; --maxw: 1080px; --font-display: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; --font-body: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; --font-ui: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* ---- Dark, via OS preference (unless user forced light) ------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #241c1c; --panel: #2e2523; --panel-2: #372c29; --ink: #f1e8df; --muted: #b8a99e; --accent: #d47b9c; --accent-ink:#241c1c; --accent-2:#a3b487; --line: #3b2f2c; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.5); --good: #7bb98f; --warn: #d69a5a; --danger: #e08a8a; } } /* ---- Dark, when explicitly toggled -------------------------------- */ :root[data-theme="dark"] { --ground: #241c1c; --panel: #2e2523; --panel-2: #372c29; --ink: #f1e8df; --muted: #b8a99e; --accent: #d47b9c; --accent-ink:#241c1c; --accent-2:#a3b487; --line: #3b2f2c; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.5); --good: #7bb98f; --warn: #d69a5a; --danger: #e08a8a; } /* ---- Reset-ish ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100; } .skip:focus { left: 0; } .muted { color: var(--muted); } .tabnums { font-variant-numeric: tabular-nums; } /* ---- Header / nav -------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--ground) 90%, transparent); backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--line); } .bar { max-width: var(--maxw); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-size: 19px; font-weight: 600; box-shadow: var(--shadow); } .brand-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; } .brand--stack { flex-direction: column; gap: 0; justify-content: center; margin-bottom: 6px; } .mainnav { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: var(--font-ui); } .mainnav > a { color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 550; padding: 8px 12px; border-radius: 999px; } .mainnav > a:hover { color: var(--ink); background: var(--panel-2); } .mainnav > a[aria-current="page"] { color: var(--accent); } .whoami { font-family: var(--font-ui); font-size: 13.5px; color: var(--muted); padding-left: 6px; } .signout { font-family: var(--font-ui); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); border: 1px solid var(--line); padding: 7px 13px; border-radius: 999px; } .signout:hover { border-color: var(--muted); } .theme-btn { font-family: var(--font-ui); font-size: 14px; font-weight: 550; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--muted); border: 1px solid var(--line); padding: 7px 12px; border-radius: 999px; } .theme-btn:hover { color: var(--ink); border-color: var(--muted); } .theme-ico { width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 32% 32%, var(--accent-2) 0 42%, transparent 44%), var(--accent); box-shadow: inset 0 0 0 1.5px var(--panel); } .nav-toggle { display: none; } /* ---- Layout -------------------------------------------------------- */ .main { max-width: var(--maxw); margin: 0 auto; padding: 30px 20px 60px; } .page-head { margin: 8px 0 26px; } .page-head h1 { font-size: clamp(28px, 4.4vw, 40px); margin: 0 0 .25em; } .lede { color: var(--muted); font-size: 18px; max-width: 62ch; margin: 0; } .section { margin: 40px 0; } .section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; } .section-head h2 { font-size: 24px; margin: 0; } .section-head .more { margin-left: auto; font-family: var(--font-ui); font-size: 14px; } /* ---- Buttons ------------------------------------------------------- */ .btn { font-family: var(--font-ui); font-size: 15px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; transition: transform .05s ease, border-color .2s ease, background .2s ease; } .btn:hover { border-color: var(--muted); } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .btn--primary:hover { filter: brightness(1.05); } .btn--ghost { background: transparent; } .btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); background: transparent; } .btn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } .btn--sm { padding: 7px 13px; font-size: 13.5px; } .btn--block { width: 100%; } /* ---- Forms --------------------------------------------------------- */ .form { display: grid; gap: 16px; max-width: 460px; } .form--wide { max-width: none; } label { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink); display: grid; gap: 6px; } label .muted { font-weight: 400; } input[type=text], input[type=email], input[type=password], input[type=date], input[type=search], select, textarea { font-family: var(--font-ui); font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 13px; width: 100%; } textarea { font-family: var(--font-body); font-size: 17px; line-height: 1.6; min-height: 260px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } /* ---- Alerts -------------------------------------------------------- */ .alert { border-radius: var(--radius); padding: 12px 16px; font-family: var(--font-ui); font-size: 14.5px; border: 1px solid var(--line); background: var(--panel); } .alert ul { margin: 0; padding-left: 18px; } .alert--error { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); color: var(--ink); } .alert--ok { border-color: color-mix(in srgb, var(--good) 45%, var(--line)); background: color-mix(in srgb, var(--good) 12%, var(--panel)); } /* ---- Auth pages ---------------------------------------------------- */ .auth-body { min-height: 100dvh; display: grid; place-items: center; padding: 24px; } .auth-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 34px 30px; width: 100%; max-width: 420px; } .auth-card h1 { font-size: 26px; margin: 6px 0 8px; text-align: center; } .auth-card .lede { text-align: center; margin: 0 auto 22px; font-size: 15.5px; } .auth-card .form { max-width: none; } .auth-card .hint { font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin-top: 16px; } /* Error pages (error.php) reuse the auth-card shell. */ .error-card { text-align: center; } .error-code { font-family: var(--font-display); font-size: 68px; line-height: 1; color: var(--accent); margin: 4px 0 2px; letter-spacing: .01em; } .error-card .lede { margin-bottom: 24px; } .error-actions { margin: 0; } code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; font-size: .9em; } /* ---- Category / memory tiles -------------------------------------- */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } .tile { display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); box-shadow: var(--shadow); transition: transform .12s ease, border-color .2s ease; } .tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .tile-thumb { aspect-ratio: 4 / 3; background: var(--panel-2); position: relative; overflow: hidden; } .tile-thumb img { width: 100%; height: 100%; object-fit: cover; } .tile-thumb--empty { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--panel)), color-mix(in srgb, var(--accent-2) 30%, var(--panel))); } .tile-body { padding: 12px 14px 14px; } .tile-body b { font-family: var(--font-display); font-size: 17px; font-weight: 600; display: block; } .tile-body span { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); } /* ---- Media grid (Apple-Photos-style dense thumbnails) ------------- */ .media-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 3), 1fr); gap: 3px; } @media (min-width: 700px) { .media-grid { --grid-cols: 5; } } .tile-photo { position: relative; display: block; width: 100%; margin: 0; padding: 0; border: 0; aspect-ratio: 1 / 1; background: var(--panel-2); overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; } .tile-photo img, .tile-photo video { width: 100%; height: 100%; object-fit: cover; display: block; } .tile-photo:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .tile-photo .play-badge { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 14px; pointer-events: none; } .tile-photo .doc { display: grid; place-items: center; height: 100%; color: var(--muted); font-family: var(--font-ui); font-size: 18px; } /* Favourite star + selection overlays on tiles */ .tile-photo .fav-star { position: absolute; top: 5px; right: 6px; color: #ffd15a; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.6); display: none; pointer-events: none; } .tile-photo[data-favorite="1"] .fav-star { display: block; } .tile-photo .tile-check { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); box-shadow: 0 1px 3px rgba(0,0,0,.5); display: none; } body.select-mode .tile-photo .tile-check { display: block; } body.select-mode .tile-photo { cursor: pointer; } .tile-photo.is-selected { outline: 3px solid var(--accent); outline-offset: -3px; } .tile-photo.is-selected img, .tile-photo.is-selected video { filter: brightness(.8); } .tile-photo.is-selected .tile-check { background: var(--accent); border-color: #fff; } .tile-photo.is-selected .tile-check::after { content: "\2713"; color: #fff; font-size: 14px; display: grid; place-items: center; height: 100%; } /* Bulk-select toolbar */ .gallery-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .select-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .select-bar .select-count { font-family: var(--font-ui); font-size: 14px; color: var(--muted); } .select-move { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 13px; } /* Grid zoom control (desktop) */ .grid-zoom-ctl { display: flex; width: fit-content; margin: 0 0 12px auto; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); } .grid-zoom-ctl button { border: 0; background: transparent; color: var(--ink); font-size: 18px; width: 38px; height: 34px; cursor: pointer; line-height: 1; } .grid-zoom-ctl button:hover { background: var(--panel-2); } .grid-zoom-ctl button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Video-size note in the uploader */ .q-note { flex: 1 0 100%; font-family: var(--font-ui); font-size: 12.5px; color: var(--warn); margin-top: 4px; } /* Lightbox favourite button active */ .lb-fav.is-on { color: #ffd15a; border-color: #ffd15a; } /* Letters: search box, list thumbnail, cover image */ .letter-search { display: inline-flex; gap: 8px; align-items: center; } .letter-search input { font-family: var(--font-ui); } .letter-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; } .letter-cover { width: 100%; max-height: 340px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 20px; } /* Filter bar: search + favourites */ .filter-search { flex: 1 1 200px; } .filter-check { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 13px; align-self: center; } /* Pagination */ .pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 26px 0 8px; } .pagination .pg { font-family: var(--font-ui); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--ink); border: 1px solid var(--line); background: var(--panel); padding: 8px 13px; border-radius: 999px; min-width: 40px; text-align: center; } .pagination a.pg:hover { border-color: var(--muted); } .pagination .pg-current { background: var(--accent); color: var(--accent-ink); border-color: transparent; } .pagination .pg-gap { color: var(--muted); padding: 0 4px; font-family: var(--font-ui); } /* Edit form — used inside the lightbox for admins */ .edit-form { display: grid; gap: 8px; } .edit-form label { font-size: 12.5px; gap: 4px; } .edit-form input, .edit-form textarea { font-size: 14px; padding: 8px 10px; } .edit-form textarea { min-height: 0; } .field-hint { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin: 2px 0 0; line-height: 1.4; } .edit-actions { display: flex; gap: 8px; } /* ---- Lightbox ------------------------------------------------------ */ .lightbox { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3vmin; padding-bottom: calc(3vmin + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, #1a1310 88%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .lightbox[hidden] { display: none; } .lb-media { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #000; } img.lb-media { object-fit: contain; } iframe.lb-media { width: 100%; height: 100%; border: none; background: #fff; } a.lb-download { background: var(--panel); color: var(--ink); padding: 16px 22px; border-radius: 999px; font-family: var(--font-ui); font-weight: 600; text-decoration: none; box-shadow: var(--shadow); } .lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; } /* Keep the caption/details + admin buttons bounded so a tall portrait photo can't push them off the bottom of the screen (they only ever hold a few short lines now, so the scrollbar stays hidden in normal use). */ .lb-info { color: #f4ece4; text-align: center; max-width: 70ch; width: 100%; margin-top: 12px; font-family: var(--font-ui); max-height: 40vh; overflow-y: auto; } .lb-admin { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; } /* The admin buttons sit on the dark lightbox, so the normal dark-ink button styling is unreadable — give them light text and a light translucent chip. */ .lb-admin .btn { color: #f4ece4; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.10); } .lb-admin .btn:hover { border-color: rgba(255,255,255,.75); background: rgba(255,255,255,.18); } .lb-admin .btn--danger { color: #ffb0a3; border-color: rgba(255,120,100,.55); background: rgba(255,70,50,.14); } .lb-admin .btn--danger:hover { background: rgba(255,70,50,.26); } .lb-admin .lb-fav.is-on { color: #ffd15a; border-color: #ffd15a; background: rgba(255,209,90,.16); } /* Edit drawer — its own top-level overlay (sibling of #lightbox), fixed to the real viewport so it stays put on iOS Safari. Full-screen editor on phones, centered card on wider screens. Actions sit in the header so the keyboard can't hide them. */ .lb-drawer { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 200; display: flex; align-items: stretch; justify-content: center; } .lb-drawer[hidden] { display: none; } .lb-drawer-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); } .lb-drawer-panel { position: relative; width: 100%; height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--panel); color: var(--ink); animation: lb-drawer-in .18s ease-out; } @keyframes lb-drawer-in { from { transform: translateY(18px); opacity: .5; } to { transform: none; opacity: 1; } } .lb-drawer-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); background: var(--panel); } .lb-drawer-head h4 { margin: 0; text-align: center; font-family: var(--font-display); font-size: 18px; } .lb-drawer-body { flex: 1; min-height: 0; display: grid; align-content: start; gap: 13px; padding: 16px 18px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .lb-drawer-body label { gap: 5px; font-size: 13px; } /* 16px keeps iOS Safari from auto-zooming (and side-scrolling) on focus; border-box + max-width keep the fields from overflowing the panel. */ .lb-drawer-body input, .lb-drawer-body textarea { box-sizing: border-box; width: 100%; max-width: 100%; font-size: 16px; padding: 10px 12px; } .lb-drawer-body textarea { min-height: 64px; } @media (min-width: 600px) { .lb-drawer { align-items: center; padding: 3vmin; } .lb-drawer-panel { width: min(480px, 100%); height: auto; max-height: 85dvh; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.45); } } .lb-info .lb-title { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; color: #fff; } .lb-info .lb-cap { margin: 2px 0; font-size: 16px; color: #fbf5ef; } .lb-info .lb-date { margin: 2px 0; font-size: 12.5px; color: #c9bcb2; letter-spacing: .04em; text-transform: uppercase; } .lb-btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: none; cursor: pointer; width: 48px; height: 48px; border-radius: 50%; font-size: 26px; line-height: 1; display: grid; place-items: center; } .lb-btn:hover { background: rgba(255,255,255,.24); } .lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .lb-close { top: 3vmin; right: 3vmin; font-size: 30px; } .lb-prev { left: 3vmin; top: 50%; transform: translateY(-50%); } .lb-next { right: 3vmin; top: 50%; transform: translateY(-50%); } .lb-info .lb-place { margin: 2px 0; font-size: 13.5px; color: #e2cfc4; } @media (max-width: 560px) { .lb-prev { left: 2vmin; } .lb-next { right: 2vmin; } .lb-btn { width: 42px; height: 42px; } } /* ---- Filter bar (browse page) ------------------------------------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow); margin-bottom: 26px; } .filter-bar label { font-size: 12.5px; gap: 5px; } .filter-bar select { min-width: 150px; } .filter-actions { display: flex; gap: 8px; margin-left: auto; align-self: end; } /* ---- Photo map ----------------------------------------------------- */ .photo-map { height: 70vh; min-height: 380px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--panel-2); } .leaflet-container { font-family: var(--font-ui); background: var(--panel-2); } .photo-pin { background: none; border: 0; } .photo-pin-inner { display: block; width: 48px; height: 48px; } .photo-pin-inner img { width: 48px; height: 48px; object-fit: cover; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); background: var(--panel-2); cursor: pointer; } .leaflet-control-attribution { font-family: var(--font-ui); font-size: 10px; } .leaflet-control-attribution a { color: var(--accent); } /* Pins / Heatmap toggle */ .map-toggle { display: inline-flex; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); } .map-mode { font-family: var(--font-ui); font-size: 14px; font-weight: 600; padding: 8px 18px; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; } .map-mode.is-on { background: var(--accent); color: var(--accent-ink); } .map-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Cluster bubbles in the Keepsake accent */ .photo-map .marker-cluster-small, .photo-map .marker-cluster-medium, .photo-map .marker-cluster-large { background-color: color-mix(in srgb, var(--accent) 22%, transparent); } .photo-map .marker-cluster-small div, .photo-map .marker-cluster-medium div, .photo-map .marker-cluster-large div { background-color: var(--accent); color: var(--accent-ink); } .photo-map .marker-cluster div { font-family: var(--font-ui); font-weight: 700; } @media (max-width: 620px) { .filter-bar { gap: 12px; } .filter-bar label { flex: 1 1 45%; } .filter-bar select { min-width: 0; width: 100%; } .filter-actions { margin-left: 0; flex: 1 1 100%; } } /* ---- Letters ------------------------------------------------------- */ .letter-list { display: grid; gap: 14px; max-width: 760px; } .letter-row { display: flex; align-items: baseline; gap: 16px; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 16px 18px; box-shadow: var(--shadow); transition: border-color .2s ease, transform .12s ease; } .letter-row:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .letter-row .date { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); white-space: nowrap; min-width: 96px; } .letter-row h3 { margin: 0; font-size: 19px; } .letter-row .by { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); } .letter { max-width: 62ch; margin: 0 auto; } .letter .letter-date { font-family: var(--font-ui); font-size: 13px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; } .letter h1 { font-size: clamp(30px, 5vw, 44px); margin: .2em 0 .5em; } .letter-prose { font-size: 19px; line-height: 1.75; } .letter-prose p { margin: 0 0 1.1em; } .letter-prose blockquote { border-left: 3px solid var(--accent); margin: 1.2em 0; padding: .2em 0 .2em 18px; color: var(--muted); font-style: italic; } .letter-prose h2 { font-size: 24px; margin: 1.4em 0 .4em; } .letter-prose hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; } .letter-sign { margin-top: 40px; font-family: var(--font-ui); font-size: 14px; color: var(--muted); } /* ---- Cards / panels ------------------------------------------------ */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px; } .panel + .panel { margin-top: 20px; } .grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; } @media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } } /* ---- Tables (people) ---------------------------------------------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow); } table.people { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: 14.5px; min-width: 520px; } table.people th, table.people td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); } table.people th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } table.people tr:last-child td { border-bottom: none; } .pill { display: inline-block; font-family: var(--font-ui); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); } .pill--admin { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .pill--member { color: var(--muted); } /* User-group pills */ .pill--lola { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .pill--family { color: #2f7d55; border-color: color-mix(in srgb, #2f7d55 45%, var(--line)); } .pill--friend { color: var(--muted); } /* ---- Uploader ------------------------------------------------------ */ .dropzone { border: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); border-radius: var(--radius-lg); background: var(--panel); padding: 44px 24px; text-align: center; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .dropzone:hover { background: var(--panel-2); } .dropzone.is-drag { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); border-color: var(--accent); } .dropzone .dz-title { font-family: var(--font-display); font-size: 21px; margin: 6px 0 4px; } .dropzone .dz-sub { font-family: var(--font-ui); font-size: 14px; color: var(--muted); } .dropzone .dz-ico { width: 46px; height: 46px; margin: 0 auto 6px; color: var(--accent); } .dropzone input[type=file] { display: none; } .queue { display: grid; gap: 10px; margin-top: 18px; } .q-item { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 10px 14px; } .q-caption { flex: 1 0 100%; font-family: var(--font-ui); font-size: 14px; color: var(--ink); background: var(--ground); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; } .q-caption:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } .q-item .q-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: var(--panel-2); flex: none; } .q-item .q-name { font-family: var(--font-ui); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .q-item .q-size { font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); flex: none; } .q-item .q-state { font-family: var(--font-ui); font-size: 12.5px; flex: none; } .q-item .q-state.ok { color: var(--good); } .q-item .q-state.err { color: var(--danger); } .q-item .q-state.dupe { color: var(--warn); } .q-item.is-dupe { opacity: .72; } .q-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px; } .q-remove:hover { color: var(--danger); } .progress { height: 6px; background: var(--panel-2); border-radius: 999px; overflow: hidden; flex: none; width: 90px; } .progress > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s ease; } /* ---- Empty states -------------------------------------------------- */ .empty { text-align: center; color: var(--muted); font-family: var(--font-ui); padding: 44px 20px; border: 1px dashed var(--line); border-radius: var(--radius-lg); } /* ---- Footer -------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); margin-top: 40px; } .site-footer p { max-width: var(--maxw); margin: 0 auto; padding: 22px 20px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); text-align: center; } /* ---- Responsive nav ------------------------------------------------ */ @media (max-width: 720px) { .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; width: 42px; height: 38px; padding: 0 9px; background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; } .nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mainnav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 4px; background: var(--ground); border-bottom: 1px solid var(--line); padding: 12px 16px 18px; box-shadow: var(--shadow); display: none; } .mainnav.open { display: flex; } .mainnav > a, .theme-btn, .signout { width: 100%; text-align: left; } .whoami { padding: 6px 12px 0; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }