/* * Listo stylesheet — warm "liquid glass". * Finch-inspired cozy pastels (peach / lavender / mint), frosted translucent * panels over a soft gradient canvas, floaty rounded cards. Hand-rolled design * system with @layer ordering and OKLCH tokens — no Tailwind. * * Light/dark: every color is a light-dark() pair. Which side renders is driven * by `color-scheme` on :root — `light dark` follows the OS, and the theme * toggle pins it to `light` or `dark` (persisted in localStorage; applied * pre-paint by an inline script). */ @layer reset, base, components, utilities; :root { color-scheme: light dark; /* Warm pastel palette */ --canvas: light-dark(oklch(97% 0.02 70), oklch(23% 0.02 40)); --ink: light-dark(oklch(32% 0.03 40), oklch(94% 0.02 70)); --ink-soft: light-dark(oklch(53% 0.03 45), oklch(78% 0.02 70)); --line: light-dark(oklch(89% 0.02 60), oklch(42% 0.02 40)); --accent: light-dark(oklch(70% 0.14 32), oklch(76% 0.13 32)); /* peach/coral — primary */ --accent-strong: light-dark(oklch(62% 0.17 32), oklch(72% 0.15 32)); --accent-2: light-dark(oklch(72% 0.11 300), oklch(74% 0.12 300)); /* lavender */ --accent-3: light-dark(oklch(80% 0.11 165), oklch(74% 0.12 165)); /* mint */ --accent-ink: light-dark(oklch(99% 0.01 70), oklch(20% 0.02 40)); /* text on accent fill */ --danger: light-dark(oklch(60% 0.18 25), oklch(68% 0.17 25)); /* Liquid glass */ --glass-bg: light-dark(oklch(100% 0 0 / 0.55), oklch(32% 0.02 40 / 0.42)); --glass-strong: light-dark(oklch(100% 0 0 / 0.72), oklch(36% 0.02 40 / 0.6)); --glass-border: light-dark(oklch(100% 0 0 / 0.75), oklch(100% 0 0 / 0.12)); --glass-blur: blur(16px) saturate(1.5); --glass-hi: inset 0 1px 0 light-dark(oklch(100% 0 0 / 0.65), oklch(100% 0 0 / 0.08)); --shadow-card: 0 1px 2px light-dark(oklch(40% 0.04 40 / 0.06), oklch(0% 0 0 / 0.4)), 0 10px 28px light-dark(oklch(45% 0.08 40 / 0.10), oklch(0% 0 0 / 0.32)); --shadow-pop: 0 8px 22px light-dark(color-mix(in oklch, var(--accent) 34%, transparent), oklch(0% 0 0 / 0.5)); /* Space & radius — cozy, rounded */ --space: 1rem; --radius: 0.9rem; --radius-lg: 1.4rem; /* Type — fluid, mobile-first */ --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: "Fredoka", var(--font); --text: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); --text-lg: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem); /* Motion */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur: 200ms; } @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } /* Kill the blue/grey tap-flash browsers show when touching an element. */ html { -webkit-tap-highlight-color: transparent; } button, input, select, textarea { font: inherit; color: inherit; } } @layer base { body { font-family: var(--font); font-size: var(--text); line-height: 1.5; color: var(--ink); background-color: var(--canvas); min-height: 100dvh; overflow-x: hidden; padding: max(var(--space), env(safe-area-inset-top)) var(--space) calc(var(--space) * 2); } /* Soft pastel mesh — the colorful backdrop the frosted panels blur. Painted on its own fixed compositor layer instead of `background-attachment: fixed`, which (with the panels' backdrop-filter) repaints on every Turbo view swap and flickers, especially on mobile. A fixed layer stays put and doesn't. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(42rem 42rem at 12% -8%, color-mix(in oklch, var(--accent) 40%, transparent), transparent 60%), radial-gradient(40rem 40rem at 105% 8%, color-mix(in oklch, var(--accent-2) 42%, transparent), transparent 60%), radial-gradient(46rem 46rem at 50% 118%, color-mix(in oklch, var(--accent-3) 40%, transparent), transparent 62%); } h1, h2 { font-family: var(--font-display); font-weight: 700; } h1 { font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; } p { color: var(--ink-soft); } a { color: var(--accent-strong); } } /* ---- Shared glass surface ---------------------------------------------- */ @layer components { .list-row, .entry, .cat-row, .suggestion, .brand-row, .flash, .history-card, .history-row, .field input, .field textarea, .qty__input, input[type="text"], input[type="number"], input[type="search"], textarea, select { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--shadow-card), var(--glass-hi); border-radius: var(--radius-lg); } /* Page containers */ .lists, .list-show, .list-form, .settings, .product-merge, .shopping, .extras, .categories, .category-form, .product-edit, .history { display: grid; gap: var(--space); max-width: 40rem; margin-inline: auto; } /* Play the entrance animation on the first (full) page load only. `html` is added `.visited` after the first Turbo render, so subsequent view swaps don't re-animate the whole page — which read as a flicker. */ html:not(.visited) :is(.lists, .list-show, .list-form, .settings, .product-merge, .shopping, .extras, .categories, .category-form, .product-edit, .history) { animation: fade-slide-in var(--dur) var(--ease); } /* Let single-column grid children shrink to the track instead of overflowing (default grid/flex min-width is `auto`), so inner flex-wrap can do its job. */ .lists > *, .list-show > *, .list-form > *, .settings > *, .product-merge > *, .shopping > *, .extras > *, .categories > *, .category-form > *, .product-edit > * { min-width: 0; } /* Settings hub rows (override .list-row's block display) */ .settings .list-row { display: grid; gap: 0.15em; } .settings__label { font-weight: 700; color: var(--ink); } /* Lists index: name + "Ir às compras" cart pill */ .list-item { display: flex; align-items: stretch; gap: 0.5em; } .list-item__name { flex: 1; min-width: 0; text-align: center; } .shop-pill { display: inline-flex; align-items: center; gap: 0.4em; padding: 0 1em; border-radius: var(--radius-lg); background: var(--accent-strong); color: var(--accent-ink); text-decoration: none; font-weight: 700; font-size: 0.85em; white-space: nowrap; box-shadow: var(--shadow-pop); transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); } @media (hover: hover) { .shop-pill:hover { transform: translateY(-2px); filter: brightness(1.03); } } /* Management row: tapping the name (a
summary) reveals the note editor */ .note-toggle { flex: 1 1 auto; min-width: 0; } .note-toggle > summary { list-style: none; cursor: pointer; } .note-toggle > summary::-webkit-details-marker { display: none; } .entry__link { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1em; min-width: 0; color: var(--ink); font-weight: 700; text-decoration: none; } .entry__note-preview { font-weight: 400; font-size: 0.8em; color: var(--ink-soft); line-height: 1.3; overflow-wrap: anywhere; } .entry__body > .entry__note-preview { padding-left: 1.95rem; } /* align under the name in shopping */ .entry__note-editor { display: none; flex-basis: 100%; margin-top: 0.5em; } .entry:has(.note-toggle[open]) .entry__note-editor { display: block; } .entry:has(.note-toggle[open]) { box-shadow: var(--shadow-card), var(--glass-hi), inset 0 0 0 1.5px color-mix(in oklch, var(--accent) 40%, transparent); } /* "novo" tag on on-the-go items in the shopping view */ .tag--new { margin-left: 0.5em; padding: 0.05em 0.5em; border-radius: 999px; background: color-mix(in oklch, var(--accent-3) 55%, transparent); color: var(--ink); font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; } /* Extras prompt actions */ .extras__actions { display: flex; flex-wrap: wrap; gap: 0.6em; } .button.button--ghost { background: var(--glass-bg); color: var(--ink); box-shadow: var(--glass-hi); border: 1px solid var(--glass-border); } /* ---- Nav: floating glass bar ---------------------------------------- */ .nav { position: sticky; top: max(0.5rem, env(safe-area-inset-top)); z-index: 10; display: flex; align-items: center; gap: var(--space); padding: 0.55rem 0.9rem; margin-bottom: calc(var(--space) * 1.5); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 999px; box-shadow: var(--shadow-card), var(--glass-hi); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); will-change: transform; } /* Toggled by the nav-hide controller: slide up + fade out when scrolling down. */ .nav--hidden { transform: translateY(-130%); opacity: 0; pointer-events: none; } .nav__brand { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--accent-strong); text-decoration: none; } .nav__logo { height: 1.7em; width: auto; display: block; } .nav__actions { display: flex; gap: 0.6rem; margin-left: auto; align-items: center; } .nav a { text-decoration: none; color: var(--ink-soft); font-weight: 600; } /* ---- Buttons -------------------------------------------------------- */ .button, input[type="submit"] { display: inline-block; padding: 0.6em 1.2em; border: 0; border-radius: 999px; background: var(--accent-strong); color: var(--accent-ink); text-align: center; text-decoration: none; font-family: var(--font); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-pop); transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease); } .button--danger { background: var(--danger); } /* Compact "add" affordance: same accent pill, shrunk to a round + icon. */ .button--add { justify-self: center; align-self: center; display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; flex: 0 0 auto; padding: 0; } .button--add svg { width: 1.35rem; height: 1.35rem; display: block; } @media (hover: hover) { .button:hover, input[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.03); } .button:active, input[type="submit"]:active { transform: translateY(0); } .list-row:hover, .cat-row:hover, .suggestion:hover { transform: translateY(-2px); } .icon-btn:hover { transform: scale(1.08); color: var(--accent-strong); } .entry__toggle:hover .entry__check { border-color: var(--accent-strong); } } /* ---- Lists ---------------------------------------------------------- */ .list-row { display: block; padding: 1em 1.15em; color: var(--ink); text-decoration: none; font-weight: 700; transition: transform var(--dur) var(--ease); } .empty { color: var(--ink-soft); } /* ---- Purchase history --------------------------------------------- */ /* Main-page teaser card: a few most-recently-bought items + a link to all. */ .history-card { display: grid; gap: 0.5em; margin-top: var(--space); padding: 0.9em 1.1em; color: var(--ink); text-decoration: none; transition: transform var(--dur) var(--ease); } @media (hover: hover) { .history-card:hover { transform: translateY(-2px); } } .history-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space); } .history-card__head h2 { font-size: 0.95rem; color: var(--accent-strong); } .history-card__more { font-size: 0.8em; font-weight: 700; color: var(--accent-strong); white-space: nowrap; } .history-card__items { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3em; } .history-card__items li { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75em; } .history-card__name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .history-card__ago { flex: 0 0 auto; font-size: 0.8em; color: var(--ink-soft); } /* Dedicated history page: category groups reuse .category / .cat-list. */ .history-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space); padding: 0.7em 1.1em; } .history-row__name { font-weight: 700; min-width: 0; } .history-row__ago { flex: 0 0 auto; font-size: 0.85em; color: var(--ink-soft); } /* ---- Forms ---------------------------------------------------------- */ .field { display: grid; gap: 0.35em; } .field label { font-weight: 700; color: var(--ink-soft); font-size: 0.9em; } /* Space the submit button off the field it follows (new/edit forms, note form). */ .field + input[type="submit"], .field + .button { margin-top: var(--space); } input[type="text"], input[type="number"], input[type="search"], textarea, select { padding: 0.65em 0.9em; max-width: 100%; border-radius: var(--radius); } /* Stacked form contexts (.field / .add-item are grids) stretch their field to full width automatically; inline controls inside entries keep their natural width so rows don't overflow. */ .duplicate input[type="text"] { flex: 1; min-width: 0; } .add-brand input[type="text"] { flex: 1; min-width: 8rem; } .trip-brand select { max-width: 9rem; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .errors { color: var(--danger); list-style-position: inside; } /* ---- Entries -------------------------------------------------------- */ .entries { list-style: none; padding: 0; display: grid; gap: 0.6em; } .entry { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5em 0.75em; padding: 0.7em 0.9em; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } /* Name and quantity share one row; the brand picker (when crossed off) wraps below. */ .entry__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.1em; } /* The name is the check toggle — tap it to mark bought / unbought. */ .entry__toggle-form { margin: 0; } .entry__toggle { display: flex; align-items: center; gap: 0.6em; width: 100%; padding: 0; text-align: left; background: none; border: 0; cursor: pointer; box-shadow: none; color: var(--ink); font-weight: 700; font-size: 1em; } .entry__check { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 2px solid var(--line); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .entry__name { min-width: 0; } .entry__meta { color: var(--ink-soft); font-size: 0.85em; padding-left: 1.95rem; animation: fade-slide-in var(--dur) var(--ease); } .entry--checked { opacity: 0.7; } .entry--checked .entry__name { text-decoration: line-through; color: var(--ink-soft); } .entry--checked .entry__check { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: inset 0 0 0 3px var(--glass-bg); } .entry__controls { display: flex; align-items: center; gap: 0.4em; flex-shrink: 0; } /* Compact category chip-select (auto-saves on change). */ .cat-pick { margin: 0; } .cat-pick__select { padding: 0.3em 0.6em; font-size: 0.8em; font-weight: 600; border-radius: 999px; border: 1px solid var(--glass-border); color: var(--accent-strong); max-width: 8rem; box-shadow: var(--glass-hi); } /* Small round icon buttons (⋯ details, × remove). */ .icon-btn { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--glass-border); border-radius: 50%; background: var(--glass-bg); color: var(--ink-soft); font-size: 1.1rem; line-height: 1; text-decoration: none; cursor: pointer; box-shadow: var(--glass-hi); } .icon-btn--danger { color: var(--danger); } .icon-btn form, form.button_to { margin: 0; } /* Compact management row: name + inline actions on one line. */ .entry--compact { align-items: center; gap: 0.5em; } .entry--compact .entry__name { flex: 1 1 auto; } .entry__actions { display: flex; align-items: center; gap: 0.35em; flex-shrink: 0; } /* Category as an icon; tap to reveal a dropdown that re-files the item. */ .cat-menu { position: relative; margin: 0; } .cat-menu > summary { list-style: none; cursor: pointer; } .cat-menu > summary::-webkit-details-marker { display: none; } .cat-menu__icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--glass-bg); box-shadow: var(--glass-hi); font-size: 1.05rem; line-height: 1; } .cat-menu__panel { position: absolute; right: 0; top: calc(100% + 0.35em); z-index: 20; padding: 0.5em; min-width: 11rem; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), var(--glass-hi); animation: fade-slide-in var(--dur) var(--ease); } .cat-menu__panel select { width: 100%; } /* Each .entry has backdrop-filter (its own stacking context), which would trap the popover behind later entries. Lift the entry whose menu is open. */ .entry:has(.cat-menu[open]) { position: relative; z-index: 40; } /* ---- Categories ----------------------------------------------------- */ .category { display: grid; gap: 0.6em; } .category__name { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-size: 0.8em; color: var(--accent-strong); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } /* Drag affordance on draggable category headers. */ .drag-handle { color: var(--ink-soft); cursor: grab; flex: 0 0 auto; opacity: 0.7; } .dragging .drag-handle { cursor: grabbing; } .cat-list { list-style: none; padding: 0; display: grid; gap: 0.6em; } .cat-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space); padding: 0.75em 1.1em; transition: transform var(--dur) var(--ease); } .cat-row__name { font-weight: 700; } .cat-actions { display: flex; gap: 0.6em; align-items: center; } .cat-actions a { color: var(--ink-soft); text-decoration: none; font-weight: 600; } /* ---- Add item + suggestions ---------------------------------------- */ /* field + submit rows use grid `1fr auto` — grid's 1fr is minmax(0,1fr), so the field shrinks to fit and the button is never pushed off-screen. */ .add-item { display: grid; gap: 0.4em; } .add-item form, .merge { display: grid; grid-template-columns: 1fr auto; gap: 0.4em; align-items: center; } .add-item form label { grid-column: 1 / -1; } .suggestions { list-style: none; padding: 0; margin: 0.35em 0 0; display: grid; gap: 0.4em; animation: fade-slide-in var(--dur) var(--ease); } .suggestion { width: 100%; text-align: left; padding: 0.65em 1em; color: var(--ink); font-weight: 600; cursor: pointer; transition: transform var(--dur) var(--ease); } .suggestion--seed { color: var(--ink-soft); font-weight: 400; } .categories-sortable { display: grid; gap: calc(var(--space) * 1.25); } [data-sortable-target="item"] { cursor: grab; } .dragging { opacity: 0.5; } /* ---- Product edit --------------------------------------------------- */ .brand-list { list-style: none; padding: 0; display: grid; gap: 0.6em; } .brand-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space); padding: 0.7em 1em; } .trip-brand { flex-basis: 100%; margin-top: 0.3em; display: flex; gap: 0.4em; align-items: center; flex-wrap: wrap; } .add-brand { display: grid; grid-template-columns: 1fr auto; gap: 0.4em; align-items: center; } .add-brand label { grid-column: 1 / -1; } .duplicate { display: grid; grid-template-columns: 1fr auto; gap: 0.4em; align-items: center; } .qty { display: flex; gap: 0.4em; align-items: center; margin: 0; } /* Touch-friendly quantity picker: tap − / + or swipe the number. */ .stepper { display: inline-flex; align-items: center; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--glass-bg); box-shadow: var(--glass-hi); } .stepper__btn { width: 2rem; height: 2rem; padding: 0; border: 0; background: none; color: var(--accent-strong); font-size: 1.15rem; font-weight: 700; line-height: 1; cursor: pointer; border-radius: 50%; } .stepper__value { min-width: 1.6rem; padding: 0.3em 0.1em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .stepper--dragging { box-shadow: var(--glass-hi), 0 0 0 2px var(--accent); } .stepper--dragging .stepper__value { color: var(--accent-strong); } /* ---- List header + actions menu ------------------------------------ */ .list-show__head { display: grid; gap: 0.25em; } .list-show__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space); } /* Editable list name: the field reads as the heading until it's focused. */ .list-name { flex: 1 1 auto; display: grid; gap: 0.5em; margin: 0; min-width: 0; } .list-name__input { width: 100%; padding: 0.1em 0.15em; margin: 0; background: none; border: 0; border-radius: var(--radius); box-shadow: none; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--ink); line-height: 1.1; } .list-name__input:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); } .list-name__input:focus { outline: 0; background: var(--glass-bg); box-shadow: 0 0 0 2px var(--accent); } .list-name__confirm { justify-self: start; } .list-name__confirm[hidden] { display: none; } /* Always-visible list actions (duplicate / delete) replacing the old menu. */ .list-actions { display: flex; align-items: center; gap: 0.6em; flex-shrink: 0; } .list-actions__form { margin: 0; } .button--confirm { width: 100%; text-align: center; padding-block: 0.8em; font-size: 1.05em; } /* ---- Flash ---------------------------------------------------------- */ .flash { padding: 0.8em 1.1em; background: color-mix(in oklch, var(--accent-3) 60%, var(--glass-strong)); color: var(--ink); font-weight: 700; animation: fade-slide-in var(--dur) var(--ease); } /* ---- Theme toggle (ported from Gustia) ------------------------------ */ .theme-switch { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.15rem; background: none; border: 0; cursor: pointer; line-height: 0; } .theme-switch__icon { width: 1.15rem; height: 1.15rem; color: var(--ink-soft); transition: color 0.2s; } .theme-switch[aria-checked="false"] .theme-switch__icon--sun, .theme-switch[aria-checked="true"] .theme-switch__icon--moon { color: var(--accent-strong); } .theme-switch__track { position: relative; width: 3rem; height: 1.65rem; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 3px color-mix(in oklch, var(--ink) 18%, transparent); transition: background 0.2s; } .theme-switch__knob { position: absolute; top: 50%; left: 0.16rem; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; border-radius: 50%; background: light-dark(oklch(99% 0 0), oklch(82% 0.02 70)); box-shadow: 0 1px 3px color-mix(in oklch, var(--ink) 35%, transparent); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .theme-switch[aria-checked="true"] .theme-switch__knob { transform: translate(1.35rem, -50%); } } /* Motion: subtle, presentational, transform/opacity only. */ @keyframes fade-slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Respect the user's motion preference — disable motion, keep functionality. */ @media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }