/* ============================================================================ Start — family hub. Warm "digital paper archive" design system. Themes via [data-theme] on : cream (default), sepia, dark. ========================================================================== */ :root { --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --space: 16px; --maxw: 1280px; --font-head: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 6px 20px rgba(60, 40, 20, .07); --shadow-lg: 0 8px 40px rgba(60, 40, 20, .14); --tap: 48px; /* minimum touch target */ } /* ── Theme: Cream (default, light) ─────────────────────────────────────────── */ :root, [data-theme="cream"] { --bg: #f6efe4; --surface: #fffdf8; --surface-2: #f1e8d9; --ink: #2e2a24; --ink-soft: #6f665a; --line: #e6dccb; --accent: #c0703f; /* warm terracotta */ --accent-soft: #f2dccb; --accent-ink: #fff; --danger: #b4452f; --shadow-tone: rgba(80, 55, 30, .10); } /* ── Theme: Sepia (warm paper) ─────────────────────────────────────────────── */ [data-theme="sepia"] { --bg: #ece0cb; --surface: #f7eedd; --surface-2: #e3d4ba; --ink: #3a2f22; --ink-soft: #7a6a52; --line: #d8c6a6; --accent: #a9602f; --accent-soft: #e7cfae; --accent-ink: #fff; --danger: #9e3d27; } /* ── Theme: Dark ───────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #1c1916; --surface: #2a2521; --surface-2: #332d27; --ink: #f2e9da; --ink-soft: #b0a392; --line: #3d362e; --accent: #e09154; --accent-soft: #4a3526; --accent-ink: #1c1916; --danger: #e07a5f; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 22px rgba(0,0,0,.35); --shadow-lg: 0 10px 44px rgba(0,0,0,.5); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; } a { color: inherit; text-decoration: none; } .muted { color: var(--ink-soft); } img { max-width: 100%; display: block; } /* ── App shell ─────────────────────────────────────────────────────────────── */ .app { min-height: 100dvh; } .main { min-height: 100dvh; } /* Topbar */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); } .brand { font-family: var(--font-head); font-weight: 600; font-size: 22px; color: var(--accent); } .brand--mobile { display: inline-flex; } .topbar__add span { display: none; } /* Search */ .search { position: relative; flex: 1; } .search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .6; } .search input { width: 100%; height: var(--tap); padding: 0 16px 0 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 16px; } .search input:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); } .search--big { margin: 18px 0; } .search--big input { height: 60px; font-size: 18px; border-radius: var(--radius-lg); box-shadow: var(--shadow); } .search--big .search__icon { left: 20px; font-size: 20px; } .search--big input { padding-left: 52px; } /* Content */ .content { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px 120px; } /* ── Sidebar (desktop) ─────────────────────────────────────────────────────── */ .sidebar { display: none; } .bottomnav { display: flex; } /* ── Buttons ───────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 20px; border-radius: 999px; border: 1px solid transparent; background: var(--surface-2); color: var(--ink); font-family: var(--font-body); font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .06s ease, filter .15s ease, background .15s ease; } .btn:hover { filter: brightness(.97); } .btn:active { transform: scale(.98); } .btn--accent { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); } .btn--ghost { background: transparent; border-color: var(--line); } .btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); } .btn--block { width: 100%; } .btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; } .topbar__add { flex: 0 0 auto; } /* Chips & tags */ .chip { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; font-size: 22px; background: var(--surface-2); } .chip--accent { background: var(--accent-soft); } .tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink-soft); font-size: 13px; } /* ── Hero / home ───────────────────────────────────────────────────────────── */ .hero { padding: 8px 0 8px; } .hero__title { font-size: clamp(28px, 6vw, 40px); margin: 8px 0 4px; } .hero__sub { color: var(--ink-soft); margin: 0 0 8px; font-size: 17px; } .quickadd { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .quickadd__chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 500; } .quickadd__chip .chip { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; } .quickadd__chip:hover { border-color: var(--accent); } /* ── Blocks & grids ────────────────────────────────────────────────────────── */ .block { margin: 28px 0; } .block--narrow { max-width: 760px; } .block__title { font-size: 22px; margin: 0 0 14px; } .block__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .page-title { font-size: clamp(24px, 5vw, 32px); margin: 6px 0 6px; } .grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); } /* ── Cards ─────────────────────────────────────────────────────────────────── */ .card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .1s ease, box-shadow .15s ease; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .card__thumb { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .card__thumb img { width: 100%; height: 100%; object-fit: cover; } .card__icon { width: 56px; height: 56px; font-size: 28px; } .card__play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 36px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); } .card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; } .card__kind { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; } .card__title { font-size: 17px; margin: 0; } .card__meta { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-soft); } .card__tags { display: flex; flex-wrap: wrap; gap: 6px; } .card--collection { padding: 18px; gap: 10px; } .grid--collections { grid-template-columns: repeat(2, 1fr); } /* ── Chooser (add screen) ──────────────────────────────────────────────────── */ .chooser { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px; } .chooser__card { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .1s, border-color .15s; } .chooser__card:hover { transform: translateY(-2px); border-color: var(--accent); } .chooser__card--hero { grid-column: 1 / -1; background: var(--accent-soft); border-color: transparent; } .chooser__ic { font-size: 34px; } .chooser__label { font-family: var(--font-head); font-size: 19px; font-weight: 600; } .chooser__hint { font-size: 14px; color: var(--ink-soft); } /* ── Forms ─────────────────────────────────────────────────────────────────── */ .form { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; } .field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; } .field__label { font-weight: 600; font-size: 15px; } .field__hint { font-size: 13px; color: var(--ink-soft); } .field input, .field textarea, .field select { width: 100%; padding: 13px 14px; font-size: 16px; font-family: var(--font-body); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); } .field input:focus, .field textarea:focus, .field select:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form__actions { margin-top: 8px; } .inline-form { display: flex; gap: 10px; margin: 16px 0; } .inline-form input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); } /* Repeatable rows (ingredients, steps) */ .repeat { display: flex; flex-direction: column; gap: 8px; } .repeat__row { display: grid; grid-template-columns: 1fr 110px auto; gap: 8px; align-items: center; } .repeat__row--step { grid-template-columns: 1fr auto; } .repeat__row input, .repeat__row textarea { padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 16px; font-family: var(--font-body); } .repeat__del { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; color: var(--ink-soft); font-size: 16px; } /* Camera capture */ .capture { display: none; flex-direction: column; gap: 12px; } .capture.is-open { display: flex; } .capture__stage { background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; max-height: 60vh; } .capture__stage video { width: 100%; height: 100%; object-fit: cover; } .capture__controls { display: flex; gap: 10px; } .thumbs { display: flex; flex-wrap: wrap; gap: 10px; } .thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); } /* ── Detail ────────────────────────────────────────────────────────────────── */ .back { display: inline-block; color: var(--ink-soft); margin-bottom: 8px; } .detail__title { font-size: clamp(26px, 6vw, 36px); margin: 6px 0; } .detail__meta { font-size: 14px; } .detail__h2 { font-size: 20px; margin: 24px 0 10px; } .detail__body { font-size: 17px; line-height: 1.6; margin-top: 16px; } .detail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); } .detail__actions form { margin: 0; } .linkbox { display: inline-flex; gap: 8px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 12px; word-break: break-all; } .videobox { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .videobox img { border-radius: var(--radius); max-height: 50vh; } .recipe-meta { display: flex; gap: 10px; margin-top: 12px; } .recipe-meta .chip { width: auto; padding: 0 14px; height: 38px; border-radius: 999px; font-size: 15px; gap: 6px; } .ingredients { list-style: none; padding: 0; margin: 0; } .ingredients li { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line); } .steps { padding-left: 22px; } .steps li { margin: 10px 0; line-height: 1.5; } .attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .attachment { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; } .attachment img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; } .attachment__icon { font-size: 40px; text-align: center; padding: 14px 0; } .attachment__name { word-break: break-word; } /* ── Filters / search ──────────────────────────────────────────────────────── */ .filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; } .filter { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; } .filter.is-active { background: var(--accent); color: var(--accent-ink); border-color: transparent; } /* ── Empty / alerts ────────────────────────────────────────────────────────── */ .empty { text-align: center; padding: 48px 20px; color: var(--ink-soft); } .empty--page { padding-top: 80px; } .empty__emoji { font-size: 48px; margin-bottom: 10px; } .empty .btn { margin-top: 14px; } .alert { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); margin: 12px 0; } /* ── Settings / admin ──────────────────────────────────────────────────────── */ .setting { margin: 24px 0; padding-bottom: 20px; border-bottom: 1px solid var(--line); } .themes { display: flex; gap: 12px; flex-wrap: wrap; } .theme-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; min-width: 96px; font-family: var(--font-body); color: var(--ink); } .theme-opt.is-active { border-color: var(--accent); } .theme-opt__swatch { width: 56px; height: 40px; border-radius: 8px; border: 1px solid rgba(0,0,0,.1); } .theme-opt__swatch--cream { background: linear-gradient(135deg, #f6efe4 60%, #c0703f 60%); } .theme-opt__swatch--sepia { background: linear-gradient(135deg, #ece0cb 60%, #a9602f 60%); } .theme-opt__swatch--dark { background: linear-gradient(135deg, #2a2521 60%, #e09154 60%); } .status-list { list-style: none; padding: 0; } .status-list li { padding: 8px 0; border-bottom: 1px dashed var(--line); } .table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; } .table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); } .form--compact { gap: 12px; } /* ── Auth ──────────────────────────────────────────────────────────────────── */ .auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 24px; } .auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-lg); } .auth-card--center { text-align: center; } .auth-card__brand { font-family: var(--font-head); color: var(--accent); font-size: 26px; margin-bottom: 8px; } .auth-card h1 { font-size: 26px; margin: 4px 0 8px; } .auth-card__hint { margin-top: 14px; font-size: 13px; } .auth-card__emoji { font-size: 52px; } /* ── Bottom nav (mobile) ───────────────────────────────────────────────────── */ .bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; align-items: center; justify-content: space-around; padding: 6px 6px max(6px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line); } .bottomnav__item { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--ink-soft); padding: 6px 10px; min-width: 56px; } .bottomnav__item span { font-size: 20px; } .bottomnav__item.is-active { color: var(--accent); } .bottomnav__item--add { color: var(--accent-ink); } .bottomnav__item--add span { background: var(--accent); color: var(--accent-ink); width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; box-shadow: var(--shadow); margin-top: -18px; } /* FAB hidden by default (bottom nav has its own add); shown if no bottom nav */ .fab { display: none; } /* ============================================================================ Responsive: tablet (≥640) and desktop (≥1024) ========================================================================== */ @media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); } .chooser { grid-template-columns: repeat(3, 1fr); } .grid--collections { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .app { display: grid; grid-template-columns: 264px 1fr; } .sidebar { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 22px 16px; background: var(--surface); border-right: 1px solid var(--line); } .sidebar .brand { font-size: 26px; padding: 6px 10px 16px; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav__item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--ink); font-weight: 500; width: 100%; background: none; border: 0; font-family: var(--font-body); font-size: 16px; text-align: left; cursor: pointer; } .nav__item:hover { background: var(--surface-2); } .nav__item.is-active { background: var(--accent-soft); color: var(--ink); font-weight: 600; } .nav__ic { font-size: 19px; width: 22px; text-align: center; } .nav__sep { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); padding: 16px 14px 6px; } .sidebar__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; } .sidebar__foot form { margin: 0; } .brand--mobile { display: none; } .topbar { padding: 14px 28px; } .topbar__add span { display: inline; } .content { padding: 24px 28px 48px; } .grid { grid-template-columns: repeat(4, 1fr); } .grid--collections { grid-template-columns: repeat(4, 1fr); } .chooser { grid-template-columns: repeat(4, 1fr); } .chooser__card--hero { grid-column: span 2; flex-direction: row; align-items: center; gap: 16px; } .bottomnav { display: none; } } @media (hover: none) { .card:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }