/* * Tripspotter web — design tokens and components. * * Dark-first but fully theme-aware, mirroring the iOS `Theme` enum: every * colour is defined once as a light/dark pair. The light palette is a warm * off-white canvas with white cards and a slightly deeper green so the accent * keeps its contrast; the dark palette is the original near-black canvas with a * navy/charcoal cast. `data-theme` on forces one of the two, and without * it the visitor's system preference decides. */ :root { /* Colour — light palette (same hex values as Theme.Color's light side). */ --bg: #eceae4; --bg-elevated: #f4f2ec; --bg-translucent: rgba(236, 234, 228, 0.96); --surface: #ffffff; --surface-translucent: rgba(255, 255, 255, 0.94); --surface-muted: #e7e4dc; --accent: #4e9e63; --accent-deep: #3e8a54; --on-accent: #f5fbf6; --text-primary: #1a1e22; --text-secondary: #5a636d; --text-tertiary: #8a929b; --separator: rgba(0, 0, 0, 0.1); --danger: #c0453a; --scrim: rgba(20, 22, 20, 0.55); --track: rgba(0, 0, 0, 0.12); --map-canvas: #dcd9d2; --tile-filter: saturate(0.9) contrast(1.02); --cover-gradient: linear-gradient(150deg, #dedbd3, #efece5 70%); --shadow-card: 0 10px 18px rgba(0, 0, 0, 0.12); --shadow-floating: 0 14px 24px rgba(0, 0, 0, 0.16); /* Radius */ --r-chip: 12px; --r-card: 18px; --r-sheet: 24px; --r-pill: 999px; /* Spacing */ --s-xs: 4px; --s-s: 8px; --s-m: 12px; --s-l: 16px; --s-xl: 24px; --s-xxl: 32px; --nav-height: 64px; --content-max: 1180px; color-scheme: light; } /* Dark palette: the system preference unless the visitor forced light. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0e1216; --bg-elevated: #12161b; --bg-translucent: rgba(14, 18, 22, 0.96); --surface: #1b1f24; --surface-translucent: rgba(27, 31, 36, 0.94); --surface-muted: #242a31; --accent: #7fc98d; --accent-deep: #6fb77e; --on-accent: #0c130e; --text-primary: #ffffff; --text-secondary: #9aa3ad; --text-tertiary: #66707a; --separator: rgba(255, 255, 255, 0.08); --danger: #e5786f; --scrim: rgba(6, 9, 12, 0.72); --track: rgba(255, 255, 255, 0.12); --map-canvas: #0b0f13; --tile-filter: saturate(0.72) brightness(0.78) contrast(1.06); --cover-gradient: linear-gradient(150deg, #1f2933, #12161b 70%); --shadow-card: 0 10px 18px rgba(0, 0, 0, 0.45); --shadow-floating: 0 14px 24px rgba(0, 0, 0, 0.5); color-scheme: dark; } } /* …and the same palette when dark is forced, whatever the system says. */ :root[data-theme='dark'] { --bg: #0e1216; --bg-elevated: #12161b; --bg-translucent: rgba(14, 18, 22, 0.96); --surface: #1b1f24; --surface-translucent: rgba(27, 31, 36, 0.94); --surface-muted: #242a31; --accent: #7fc98d; --accent-deep: #6fb77e; --on-accent: #0c130e; --text-primary: #ffffff; --text-secondary: #9aa3ad; --text-tertiary: #66707a; --separator: rgba(255, 255, 255, 0.08); --danger: #e5786f; --scrim: rgba(6, 9, 12, 0.72); --track: rgba(255, 255, 255, 0.12); --map-canvas: #0b0f13; --tile-filter: saturate(0.72) brightness(0.78) contrast(1.06); --cover-gradient: linear-gradient(150deg, #1f2933, #12161b 70%); --shadow-card: 0 10px 18px rgba(0, 0, 0, 0.45); --shadow-floating: 0 14px 24px rgba(0, 0, 0, 0.5); color-scheme: dark; } * { box-sizing: border-box; } /* * Base size for every inline icon. More specific rules (.btn svg, .chip svg, …) * override it; without it an icon in a flex row has no intrinsic width and * collapses the text next to it. */ .icon { width: 20px; height: 20px; flex: none; } html, body { margin: 0; padding: 0; min-height: 100%; } body { background: var(--bg); color: var(--text-primary); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; } h1 { font-size: 1.75rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.0625rem; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Boot / noscript ------------------------------------------------------ */ .boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: var(--s-l); color: var(--text-secondary); } .boot__mark { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--separator); border-top-color: var(--accent); animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .boot__mark { animation-duration: 3s; } .live-badge__dot { animation: none !important; } * { scroll-behavior: auto !important; } } .noscript { padding: var(--s-xl); text-align: center; color: var(--text-secondary); } /* --- App shell ------------------------------------------------------------ */ .app-root { min-height: 100vh; } .shell { min-height: 100vh; display: flex; flex-direction: column; } .shell__main { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--s-l) var(--s-l) calc(var(--nav-height) + var(--s-xxl) + env(safe-area-inset-bottom)); } /* * Top bar. On narrow screens it only carries the wordmark and the nav pill * floats at the bottom; from 900px up the pill moves into this bar. * Deliberately no backdrop-filter: a filtered ancestor would become the * containing block for the fixed tab bar and pin it to the header. */ .topbar { position: sticky; top: 0; z-index: 500; background: var(--bg-translucent); border-bottom: 1px solid var(--separator); } .topbar__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--s-m) var(--s-l); display: flex; align-items: center; gap: var(--s-l); } .brand { display: flex; align-items: center; gap: var(--s-s); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); } .brand:hover { text-decoration: none; } .brand__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); } /* --- Floating pill tab bar (iPhone-style), moves into the top bar on desktop */ .tabbar { position: fixed; left: 50%; bottom: calc(var(--s-l) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 600; display: flex; align-items: center; gap: var(--s-s); } .tabbar__pill { display: flex; align-items: center; gap: var(--s-xs); padding: 6px; background: var(--surface-translucent); backdrop-filter: blur(18px); border: 1px solid var(--separator); border-radius: var(--r-pill); box-shadow: var(--shadow-floating); } .tabbar__item { display: flex; align-items: center; gap: var(--s-s); padding: 10px 14px; border-radius: var(--r-pill); color: var(--text-secondary); font-size: 0.875rem; font-weight: 600; border: none; background: transparent; cursor: pointer; white-space: nowrap; } .tabbar__item:hover { color: var(--text-primary); text-decoration: none; } .tabbar__item[aria-current="page"] { background: var(--accent); color: var(--on-accent); } .tabbar__item svg { width: 20px; height: 20px; flex: none; } .tabbar__label { display: none; } .tabbar__item[aria-current="page"] .tabbar__label { display: inline; } /* The separate search button, detached from the pill — like the iOS tab bar. */ .tabbar__search { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-translucent); backdrop-filter: blur(18px); border: 1px solid var(--separator); box-shadow: var(--shadow-floating); color: var(--text-secondary); cursor: pointer; } .tabbar__search:hover { color: var(--text-primary); } .tabbar__search[aria-current="page"] { background: var(--accent); color: var(--on-accent); } .tabbar__search svg { width: 20px; height: 20px; } @media (min-width: 900px) { .tabbar { position: static; transform: none; margin-left: auto; } .tabbar__pill { box-shadow: none; background: var(--surface); } .tabbar__search { width: 40px; height: 40px; box-shadow: none; background: var(--surface); } .tabbar__label { display: inline; } .shell__main { padding-bottom: var(--s-xxl); } :root { --nav-height: 0px; } } /* --- Page header ---------------------------------------------------------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-l); flex-wrap: wrap; margin-bottom: var(--s-l); } .page-head__title { display: flex; flex-direction: column; gap: 2px; } .page-head__sub { color: var(--text-secondary); font-size: 0.9375rem; } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-s); padding: 11px 18px; border-radius: var(--r-pill); border: 1px solid transparent; font: inherit; font-size: 0.9375rem; font-weight: 650; cursor: pointer; background: var(--surface-muted); color: var(--text-primary); white-space: nowrap; } .btn:hover { text-decoration: none; filter: brightness(1.08); } .btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; } .btn svg { width: 18px; height: 18px; flex: none; } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-deep); filter: none; } .btn--ghost { background: transparent; border-color: var(--separator); color: var(--text-primary); } .btn--ghost:hover { background: var(--surface-muted); filter: none; } .btn--danger { background: transparent; border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); } .btn--danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); filter: none; } .btn--small { padding: 7px 13px; font-size: 0.8125rem; } .btn--icon { padding: 9px; border-radius: 50%; } .btn--icon svg { width: 20px; height: 20px; } .btn--block { width: 100%; } /* --- Cards, chips, badges ------------------------------------------------- */ .card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); border: 1px solid var(--separator); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-chip); background: var(--surface-muted); color: var(--text-secondary); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; border: none; } .chip svg { width: 15px; height: 15px; flex: none; } .chip--accent { color: var(--accent); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; background: var(--surface-muted); color: var(--text-secondary); } .badge svg { width: 13px; height: 13px; } .badge--planned { background: color-mix(in srgb, var(--text-secondary) 16%, transparent); color: var(--text-secondary); } .badge--active { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); } .badge--completed { background: color-mix(in srgb, var(--text-primary) 10%, transparent); color: var(--text-primary); } .badge--role, .badge--visibility { background: color-mix(in srgb, var(--text-primary) 7%, transparent); color: var(--text-secondary); } .badge--public { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } /* "Live" pill shown while a realtime stream is connected. */ .live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 700; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .live-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .stats-bar { display: flex; gap: var(--s-s); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } .stats-bar::-webkit-scrollbar { display: none; } /* --- Trip list ------------------------------------------------------------ */ .trip-grid { display: grid; gap: var(--s-l); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .trip-card { display: flex; flex-direction: column; overflow: hidden; color: inherit; background: var(--surface); border-radius: var(--r-card); border: 1px solid var(--separator); box-shadow: var(--shadow-card); transition: transform 0.15s ease, border-color 0.15s ease; } .trip-card:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .trip-card__cover { position: relative; aspect-ratio: 16 / 10; background: var(--cover-gradient); overflow: hidden; } .trip-card__cover img { width: 100%; height: 100%; object-fit: cover; } .trip-card__cover-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-tertiary); } .trip-card__cover-empty svg { width: 34px; height: 34px; } .trip-card__status { position: absolute; top: var(--s-m); left: var(--s-m); } .trip-card__role { position: absolute; top: var(--s-m); right: var(--s-m); display: flex; gap: 6px; } .trip-card__body { padding: var(--s-l); display: flex; flex-direction: column; gap: var(--s-s); } .trip-card__title { font-size: 1.0625rem; font-weight: 650; } .trip-card__dates { color: var(--text-secondary); font-size: 0.875rem; } .trip-card__stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .trip-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--s-s); padding: 0 var(--s-l) var(--s-l); } /* --- Trip detail ---------------------------------------------------------- */ .trip-detail { display: flex; flex-direction: column; gap: var(--s-l); } .trip-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-m); flex-wrap: wrap; } .trip-detail__layout { display: grid; gap: var(--s-l); grid-template-columns: 1fr; align-items: start; } @media (min-width: 1000px) { /* iPad-style split: map beside the timeline. */ .trip-detail__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .trip-detail__map-col { position: sticky; top: 84px; } } .map-frame { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--separator); box-shadow: var(--shadow-card); background: var(--bg-elevated); } .map-frame__canvas { height: 320px; width: 100%; } .map-frame--page .map-frame__canvas { height: calc(100vh - var(--nav-height) - 150px); min-height: 360px; } @media (min-width: 1000px) { .map-frame__canvas { height: min(68vh, 640px); } } .map-empty svg { width: 32px; height: 32px; color: var(--text-tertiary); } .map-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-s); text-align: center; color: var(--text-secondary); background: var(--bg-elevated); padding: var(--s-l); z-index: 500; } /* Leaflet overrides — keep the map in the app's palette. */ .leaflet-container { background: var(--map-canvas); font: inherit; } .leaflet-tile-pane { filter: var(--tile-filter); } .leaflet-control-zoom a { background: var(--surface); color: var(--text-primary); border-color: var(--separator); } .leaflet-control-zoom a:hover { background: var(--surface-muted); color: var(--text-primary); } .leaflet-control-attribution { background: var(--bg-translucent) !important; color: var(--text-tertiary) !important; font-size: 10px; } .leaflet-control-attribution a { color: var(--text-secondary) !important; } .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-card); } .leaflet-popup-content { margin: 12px 14px; font-size: 0.875rem; } .leaflet-popup-content b { display: block; margin-bottom: 2px; } .leaflet-popup-close-button { color: var(--text-secondary) !important; } /* Custom markers: visited = white circle with a green number, planned = open ring. */ .step-marker { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 0.75rem; font-weight: 800; background: #ffffff; color: var(--accent-deep); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); border: 2px solid rgba(255, 255, 255, 0.9); } .step-marker--todo { background: transparent; color: var(--text-secondary); border: 2px solid var(--text-secondary); box-shadow: none; } /* --- Timeline ------------------------------------------------------------- */ .timeline { display: flex; flex-direction: column; gap: 0; } .timeline__item { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s-m); padding-bottom: var(--s-l); } .timeline__rail { position: relative; display: flex; justify-content: center; } .timeline__rail::before { content: ""; position: absolute; top: 30px; bottom: -8px; width: 2px; background: var(--separator); } .timeline__item:last-child .timeline__rail::before { display: none; } .timeline__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-muted); color: var(--text-primary); font-size: 0.75rem; font-weight: 800; border: 2px solid var(--bg); cursor: pointer; } .timeline__item--active .timeline__dot { background: var(--accent); color: var(--on-accent); } .stop-card { background: var(--surface); border: 1px solid var(--separator); border-radius: var(--r-card); padding: var(--s-l); display: flex; flex-direction: column; gap: var(--s-s); cursor: pointer; } .timeline__item--active .stop-card { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .stop-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-s); } .stop-card__place { font-weight: 650; } .stop-card__date { color: var(--text-tertiary); font-size: 0.8125rem; white-space: nowrap; } .stop-card__note { color: var(--text-secondary); font-size: 0.9375rem; white-space: pre-wrap; } .stop-card__coords { color: var(--text-tertiary); font-size: 0.75rem; font-variant-numeric: tabular-nums; } .photo-strip { display: flex; gap: var(--s-s); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .photo-strip__item { position: relative; flex: none; width: 108px; height: 108px; border-radius: var(--r-chip); overflow: hidden; background: var(--surface-muted); border: none; padding: 0; cursor: zoom-in; } .photo-strip__item img { width: 100%; height: 100%; object-fit: cover; } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-s); } .photo-grid__cell { position: relative; aspect-ratio: 1; border-radius: var(--r-chip); overflow: hidden; background: var(--surface-muted); } .photo-grid__cell img { width: 100%; height: 100%; object-fit: cover; } .photo-grid__remove { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; border: none; display: grid; place-items: center; background: rgba(14, 18, 22, 0.82); color: #fff; cursor: pointer; } .photo-grid__remove svg { width: 14px; height: 14px; } .photo-grid__cover { position: absolute; left: 4px; bottom: 4px; padding: 3px 8px; border-radius: var(--r-pill); border: none; font-size: 0.6875rem; font-weight: 700; background: rgba(14, 18, 22, 0.82); color: #e8eaec; cursor: pointer; } .photo-grid__cover--on { background: var(--accent); color: var(--on-accent); } /* --- Feed ----------------------------------------------------------------- */ .feed { display: grid; gap: var(--s-l); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .feed-card__author { display: flex; align-items: center; gap: var(--s-s); color: var(--text-secondary); font-size: 0.8125rem; } .feed-card__avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); font-size: 0.6875rem; font-weight: 800; } .like-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--separator); background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.8125rem; font-weight: 650; cursor: pointer; } .like-button svg { width: 16px; height: 16px; } .like-button:hover { background: var(--surface-muted); } .like-button[aria-pressed="true"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); } .like-button[aria-pressed="true"] svg { fill: currentColor; } /* --- Forms ---------------------------------------------------------------- */ .form { display: flex; flex-direction: column; gap: var(--s-l); } .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: 0.8125rem; font-weight: 650; color: var(--text-secondary); } .field__hint { font-size: 0.75rem; color: var(--text-tertiary); } .input, .textarea, .select { width: 100%; padding: 11px 14px; border-radius: var(--r-chip); border: 1px solid var(--separator); background: var(--surface-muted); color: var(--text-primary); font: inherit; font-size: 0.9375rem; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--accent); } .textarea { min-height: 96px; resize: vertical; } .select { cursor: pointer; } .field-row { display: grid; gap: var(--s-m); grid-template-columns: 1fr 1fr; } .segmented { display: flex; gap: 4px; padding: 4px; background: var(--surface-muted); border-radius: var(--r-pill); } .segmented__option { flex: 1; padding: 8px 12px; border: none; border-radius: var(--r-pill); background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.875rem; font-weight: 650; cursor: pointer; } .segmented__option[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); } /* --- Modal / sheet -------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; z-index: 900; background: var(--scrim); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; padding: 0; } @media (min-width: 700px) { .modal-backdrop { align-items: center; padding: var(--s-xl); } } .modal { width: 100%; max-width: 620px; max-height: min(90vh, 900px); overflow-y: auto; background: var(--bg-elevated); border: 1px solid var(--separator); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-floating); padding: var(--s-l) var(--s-l) calc(var(--s-xl) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s-l); } @media (min-width: 700px) { .modal { border-radius: var(--r-sheet); padding-bottom: var(--s-xl); } } .modal__grabber { width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--surface-muted); margin: 0 auto; } @media (min-width: 700px) { .modal__grabber { display: none; } } .modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-m); } .modal__actions { display: flex; gap: var(--s-s); justify-content: flex-end; flex-wrap: wrap; } .modal__actions--split { justify-content: space-between; } /* --- Lightbox ------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 950; background: rgba(4, 6, 8, 0.94); display: grid; place-items: center; padding: var(--s-l); color: #f2f4f6; } .lightbox img { max-width: 100%; max-height: 84vh; border-radius: var(--r-chip); object-fit: contain; } .lightbox__caption { margin-top: var(--s-m); color: #b7bec6; text-align: center; font-size: 0.875rem; } .lightbox__close { position: absolute; top: var(--s-l); right: var(--s-l); color: #f2f4f6; } /* --- Auth ----------------------------------------------------------------- */ .auth { min-height: 100vh; display: grid; place-items: center; padding: var(--s-l); background: radial-gradient(1100px 520px at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%), var(--bg); } .auth__card { width: 100%; max-width: 420px; padding: var(--s-xl); display: flex; flex-direction: column; gap: var(--s-l); } .auth__brand { display: flex; align-items: center; gap: var(--s-s); font-size: 1.375rem; font-weight: 700; } .auth__intro { color: var(--text-secondary); font-size: 0.9375rem; } .auth__switch { text-align: center; color: var(--text-secondary); font-size: 0.875rem; } .auth__switch button { border: none; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 650; cursor: pointer; } /* --- Misc ----------------------------------------------------------------- */ .alert { padding: var(--s-m) var(--s-l); border-radius: var(--r-chip); font-size: 0.875rem; background: color-mix(in srgb, var(--danger) 14%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 38%, transparent); color: var(--danger); } .alert--info { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: color-mix(in srgb, var(--accent) 32%, transparent); color: var(--accent); } .empty { display: grid; place-items: center; justify-items: center; gap: var(--s-m); text-align: center; padding: var(--s-xxl) var(--s-l); color: var(--text-secondary); } .empty svg { width: 40px; height: 40px; color: var(--text-tertiary); } .empty h2 { color: var(--text-primary); } .skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-muted) 37%, var(--surface) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: var(--r-card); } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .skeleton--card { height: 240px; } .section { display: flex; flex-direction: column; gap: var(--s-m); } .section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-m); } .muted { color: var(--text-secondary); } .tiny { font-size: 0.8125rem; } .row { display: flex; align-items: center; gap: var(--s-s); flex-wrap: wrap; } .row--between { justify-content: space-between; } .list { display: flex; flex-direction: column; gap: var(--s-s); } .list__row { display: flex; align-items: center; gap: var(--s-m); padding: var(--s-m) var(--s-l); border-radius: var(--r-chip); background: var(--surface); border: 1px solid var(--separator); color: inherit; } .list__row:hover { text-decoration: none; } .list__row > .icon { color: var(--text-secondary); } .list__row-main { min-width: 0; flex: 1; } .list__row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .toast-host { position: fixed; left: 50%; bottom: calc(var(--nav-height) + var(--s-xxl) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: var(--s-s); align-items: center; pointer-events: none; width: min(92vw, 420px); } .toast { width: 100%; padding: var(--s-m) var(--s-l); border-radius: var(--r-chip); background: var(--surface); border: 1px solid var(--separator); box-shadow: var(--shadow-floating); font-size: 0.875rem; } .toast--error { border-color: color-mix(in srgb, var(--danger) 50%, transparent); color: var(--danger); } .toast--success { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); } @media (min-width: 900px) { .toast-host { bottom: var(--s-xl); } } .progress-pill { display: inline-flex; align-items: center; gap: var(--s-s); padding: 6px 12px 6px 8px; border-radius: var(--r-pill); background: var(--surface-muted); font-size: 0.8125rem; font-weight: 650; color: var(--text-secondary); } .progress-pill__track { width: 64px; height: 5px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; } .progress-pill__fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); }