/* ========================================================================== Saeed's Kitchen — cookingbysaeed.io ========================================================================== */ /* ---- tokens -------------------------------------------------------------- */ :root { color-scheme: light; --paper: #fdf8f1; --surface: #ffffff; --surface-2: #f6efe4; --surface-3: #efe5d6; --line: #e3d6c3; --line-strong: #d2c0a6; --ink: #23180f; --ink-2: #5c4a38; --ink-3: #8a7660; --saffron: #e8862a; --saffron-ink: #b8620f; --paprika: #c8402f; --pistachio: #5c8a3c; --cardamom: #2f6f5e; --plum: #7a3b6b; --accent: var(--saffron); --accent-ink: var(--saffron-ink); --on-accent: #fffaf3; --shadow-1: 0 1px 2px rgba(60,40,20,.06), 0 2px 8px rgba(60,40,20,.05); --shadow-2: 0 4px 12px rgba(60,40,20,.09), 0 12px 32px rgba(60,40,20,.08); --shadow-3: 0 12px 28px rgba(60,40,20,.14), 0 32px 64px rgba(60,40,20,.12); --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --bar-h: 60px; --ease: cubic-bezier(.22,.61,.36,1); --ease-out-back: cubic-bezier(.34,1.4,.64,1); --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #16110c; --surface: #1e1811; --surface-2: #262017; --surface-3: #2f2820; --line: #383026; --line-strong: #4b4132; --ink: #f6ece0; --ink-2: #c4b3a0; --ink-3: #93826f; --saffron: #f5a44e; --saffron-ink: #ffc17d; --paprika: #e86a56; --pistachio: #8bbd63; --cardamom: #56a591; --plum: #bb84ac; --accent: var(--saffron); --accent-ink: var(--saffron-ink); --on-accent: #201404; --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3); --shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4); --shadow-3: 0 12px 28px rgba(0,0,0,.55), 0 32px 64px rgba(0,0,0,.45); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #16110c; --surface: #1e1811; --surface-2: #262017; --surface-3: #2f2820; --line: #383026; --line-strong: #4b4132; --ink: #f6ece0; --ink-2: #c4b3a0; --ink-3: #93826f; --saffron: #f5a44e; --saffron-ink: #ffc17d; --paprika: #e86a56; --pistachio: #8bbd63; --cardamom: #56a591; --plum: #bb84ac; --accent: var(--saffron); --accent-ink: var(--saffron-ink); --on-accent: #201404; --shadow-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3); --shadow-2: 0 4px 12px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4); --shadow-3: 0 12px 28px rgba(0,0,0,.55), 0 32px 64px rgba(0,0,0,.45); } /* ---- base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* `clip` rather than `hidden`: it stops the fixed background glows from widening the page without turning into a scroll container, which would break the sticky top bar. */ html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--paper); overflow-x: hidden; min-height: 100dvh; padding-left: var(--safe-l); padding-right: var(--safe-r); -webkit-tap-highlight-color: transparent; transition: background-color .45s var(--ease), color .45s var(--ease); } h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -.01em; } p { margin: 0 0 .8em; } a { color: var(--accent-ink); text-decoration: none; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: 0; background: none; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .wrap { width: min(1180px, 100% - 32px); margin-inline: auto; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- animated background ------------------------------------------------- */ #bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .85; } .bg-glow { position: fixed; z-index: 0; pointer-events: none; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .3; will-change: transform; } .bg-glow.a { background: radial-gradient(circle, var(--saffron), transparent 66%); top: -22vmax; left: -14vmax; animation: drift-a 34s var(--ease) infinite alternate; } .bg-glow.b { background: radial-gradient(circle, var(--pistachio), transparent 66%); bottom: -26vmax; right: -16vmax; animation: drift-b 41s var(--ease) infinite alternate; } .bg-glow.c { background: radial-gradient(circle, var(--paprika), transparent 68%); top: 40%; right: -20vmax; opacity: .16; animation: drift-c 47s var(--ease) infinite alternate; } @keyframes drift-a { to { transform: translate3d(18vw, 12vh, 0) scale(1.18); } } @keyframes drift-b { to { transform: translate3d(-16vw, -10vh, 0) scale(1.12); } } @keyframes drift-c { to { transform: translate3d(-12vw, 14vh, 0) scale(.88); } } #app, .topbar { position: relative; z-index: 1; } /* ---- top bar ------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 40; padding-top: var(--safe-t); background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; } .topbar.scrolled { border-bottom-color: var(--line); } .topbar-in { display: flex; align-items: center; gap: 12px; height: var(--bar-h); min-width: 0; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; margin-right: auto; min-width: 0; white-space: nowrap; } .brand .mark { width: 32px; height: 32px; flex: none; border-radius: 10px; background: linear-gradient(140deg, var(--saffron), var(--paprika)); display: grid; place-items: center; color: #fff; font-size: 17px; box-shadow: var(--shadow-1); transition: transform .5s var(--ease-out-back); } .brand:hover .mark { transform: rotate(-8deg) scale(1.08); } .brand .dot { color: var(--accent); } .icon-btn { width: 40px; height: 40px; flex: none; border-radius: var(--r-full); display: grid; place-items: center; color: var(--ink-2); border: 1px solid transparent; transition: background-color .2s, color .2s, transform .2s var(--ease-out-back), border-color .2s; } .icon-btn:hover { background: var(--surface-2); color: var(--ink); transform: translateY(-1px); } .icon-btn:active { transform: scale(.94); } .icon-btn svg { width: 20px; height: 20px; } .icon-btn.badged { position: relative; } .icon-btn .badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-full); background: var(--saffron); color: #241503; font-size: 10px; font-weight: 750; font-style: normal; display: grid; place-items: center; line-height: 1; border: 2px solid var(--paper); font-variant-numeric: tabular-nums; } .searchbox { position: relative; flex: 1 1 120px; min-width: 0; max-width: 340px; } .searchbox input { width: 100%; min-width: 0; height: 40px; padding: 0 14px 0 38px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s, background-color .2s; } .searchbox input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 20%, transparent); } .searchbox svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--ink-3); pointer-events: none; } .avatar-btn { height: 36px; padding: 0 6px 0 6px; border-radius: var(--r-full); display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: box-shadow .2s, transform .2s, border-color .2s; } .avatar-btn:hover { box-shadow: var(--shadow-1); transform: translateY(-1px); } .avatar-btn .ini { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(140deg, var(--cardamom), var(--pistachio)); color: #fff; font-size: 11.5px; font-weight: 700; } .avatar-btn .lbl { font-size: 13px; font-weight: 500; padding-right: 6px; } @media (max-width: 640px) { .avatar-btn .lbl { display: none; } .avatar-btn { padding: 0 5px; } } /* Phones: keep the mark, drop the wordmark, and give the width to search. */ @media (max-width: 560px) { .brand .word { display: none; } .brand { margin-right: 2px; } .topbar-in { gap: 8px; } .searchbox { flex: 1 1 auto; } } /* ---- hero ---------------------------------------------------------------- */ .hero { padding: 36px 0 12px; } .hero h1 { font-size: clamp(30px, 6.5vw, 50px); letter-spacing: -.03em; } .hero h1 em { font-style: normal; color: var(--accent-ink); } .hero .sub { color: var(--ink-2); font-size: 16px; max-width: 56ch; margin-top: 10px; } .stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .stat { display: flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); box-shadow: var(--shadow-1); } .stat b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 650; } .stat .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .stat .pip.green { background: var(--pistachio); } .stat .pip.blue { background: var(--cardamom); } .stat .pip.amber { background: var(--saffron); } a.stat { text-decoration: none; transition: transform .2s var(--ease-out-back), box-shadow .2s, border-color .2s; } a.stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); border-color: var(--line-strong); } /* ---- section headers ----------------------------------------------------- */ .section { margin-top: 34px; } .section-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; } .section-head h2 { font-size: 21px; } .section-head .count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .section-head .spacer { flex: 1; } .link-btn { font-size: 13.5px; color: var(--accent-ink); font-weight: 550; padding: 4px 2px; border-radius: 6px; } .link-btn:hover { text-decoration: underline; } /* ---- cuisine rail -------------------------------------------------------- */ .rail { display: flex; gap: 11px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x proximity; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .kitchen-card { position: relative; flex: none; width: 168px; height: 112px; border-radius: var(--r-lg); overflow: hidden; scroll-snap-align: start; border: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; justify-content: flex-end; padding: 13px; text-align: left; color: #fff; box-shadow: var(--shadow-1); transition: transform .3s var(--ease-out-back), box-shadow .3s; } .kitchen-card::before { content: ""; position: absolute; inset: 0; background: var(--kc, linear-gradient(140deg, var(--saffron), var(--paprika))); transition: transform .5s var(--ease); } .kitchen-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%); } .kitchen-card > * { position: relative; z-index: 2; } .kitchen-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .kitchen-card:hover::before { transform: scale(1.08) rotate(2deg); } .kitchen-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); } .kitchen-card .kc-emoji { font-size: 24px; position: absolute; top: 11px; left: 12px; z-index: 2; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); } .kitchen-card .kc-name { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.4); } .kitchen-card .kc-n { font-size: 11.5px; opacity: .92; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.45); } /* ---- chips --------------------------------------------------------------- */ .chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; padding: 7px 14px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: all .2s var(--ease); } .chip:hover { border-color: var(--line-strong); color: var(--ink); transform: translateY(-1px); } .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ---- recipe grid --------------------------------------------------------- */ .grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } @media (max-width: 520px) { .grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 12px; } } .card { position: relative; text-align: left; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); display: flex; flex-direction: column; transition: transform .32s var(--ease-out-back), box-shadow .32s, border-color .32s; animation: card-in .5s var(--ease) both; } @keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.98); } } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-2); border-color: var(--line-strong); } .card:active { transform: translateY(-1px) scale(.995); } .card .thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-3); } .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .card:hover .thumb img { transform: scale(1.07); } .card .thumb .fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; } .card .body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; } .card h3 { font-size: 15.5px; line-height: 1.28; font-family: var(--font); font-weight: 620; letter-spacing: -.005em; } .card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); margin-top: auto; } .card .meta .sep { opacity: .5; } .pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; letter-spacing: .01em; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); } .pill.accent { background: color-mix(in srgb, var(--saffron) 16%, transparent); color: var(--saffron-ink); border-color: color-mix(in srgb, var(--saffron) 30%, transparent); } .pill.green { background: color-mix(in srgb, var(--pistachio) 16%, transparent); color: var(--pistachio); border-color: color-mix(in srgb, var(--pistachio) 30%, transparent); } .pill.teal { background: color-mix(in srgb, var(--cardamom) 16%, transparent); color: var(--cardamom); border-color: color-mix(in srgb, var(--cardamom) 30%, transparent); } .pill.red { background: color-mix(in srgb, var(--paprika) 15%, transparent); color: var(--paprika); border-color: color-mix(in srgb, var(--paprika) 30%, transparent); } .cooked-badge { position: absolute; top: 9px; right: 9px; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: var(--r-full); background: color-mix(in srgb, var(--pistachio) 92%, black); color: #fff; font-size: 11px; font-weight: 650; box-shadow: 0 2px 8px rgba(0,0,0,.28); animation: pop-in .4s var(--ease-out-back) both; } @keyframes pop-in { from { opacity: 0; transform: scale(.6); } } .cooked-badge svg { width: 12px; height: 12px; } .cooked-badge.todo { background: color-mix(in srgb, var(--saffron) 94%, black); color: #241503; } .heat { display: inline-flex; gap: 1.5px; } .heat i { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); display: block; } .heat i.on { background: var(--paprika); } /* ---- skeletons ----------------------------------------------------------- */ .skel { border-radius: var(--r-lg); background: var(--surface-2); position: relative; overflow: hidden; } .skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); animation: shimmer 1.5s infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .skel-card { height: 250px; } /* ---- recipe detail ------------------------------------------------------- */ .detail { padding-bottom: 60px; animation: fade-up .45s var(--ease) both; } @keyframes fade-up { from { opacity: 0; transform: translateY(12px); } } .detail-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; /* Explicit height rather than aspect-ratio + max-height: that combination shrinks the width too, leaving the hero floating short of the column. */ width: 100%; height: clamp(230px, 30vw, 400px); background: var(--surface-3); box-shadow: var(--shadow-2); margin-top: 12px; } @media (max-width: 700px) { .detail-hero { height: clamp(200px, 56vw, 320px); border-radius: var(--r-lg); } } .detail-hero img { width: 100%; height: 100%; object-fit: cover; } .detail-hero .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.15) 55%, transparent); } .detail-hero .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 22px; color: #fff; } .detail-hero h1 { font-size: clamp(23px, 4.6vw, 39px); text-shadow: 0 2px 14px rgba(0,0,0,.5); } .detail-hero .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; } .detail-hero .pill { background: rgba(255,255,255,.19); color: #fff; border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px); } .meta-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; } .meta-box { flex: 1 1 110px; padding: 11px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); } .meta-box .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); font-weight: 650; } .meta-box .v { font-size: 16px; font-weight: 620; margin-top: 2px; font-variant-numeric: tabular-nums; } .action-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 6px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 19px; border-radius: var(--r-full); font-size: 14.5px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: transform .2s var(--ease-out-back), box-shadow .2s, background-color .2s, border-color .2s; } .btn svg { width: 17px; height: 17px; } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: var(--line-strong); } .btn:active { transform: translateY(0) scale(.97); } .btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); } .btn.primary:hover { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 48%, transparent); } .btn.done { background: var(--pistachio); color: #fff; border-color: transparent; } .btn.saved { background: color-mix(in srgb, var(--saffron) 18%, var(--surface)); color: var(--saffron-ink); border-color: color-mix(in srgb, var(--saffron) 45%, transparent); } .btn.saved svg { fill: currentColor; } .btn.small { padding: 7px 13px; font-size: 13px; } .btn.ghost { background: transparent; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } @media (max-width: 560px) { .action-row .btn { flex: 1 1 46%; padding-inline: 12px; } .action-row { gap: 8px; } } /* tabs */ .tabs { display: flex; gap: 4px; margin: 26px 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { position: relative; padding: 11px 15px; font-size: 14.5px; font-weight: 560; color: var(--ink-3); white-space: nowrap; transition: color .2s; } .tab:hover { color: var(--ink-2); } .tab[aria-selected="true"] { color: var(--ink); } .tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px; background: var(--accent); border-radius: 3px 3px 0 0; animation: tab-slide .3s var(--ease-out-back) both; } @keyframes tab-slide { from { transform: scaleX(.3); opacity: 0; } } .tabpanel { animation: fade-up .35s var(--ease) both; } /* mise en place */ .prep-group { margin-bottom: 22px; } .prep-group h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-family: var(--font); font-weight: 700; margin-bottom: 9px; } .prep-list { display: grid; gap: 8px; } .prep-item { display: grid; grid-template-columns: 30px 1fr; gap: 11px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, background-color .25s, transform .2s, opacity .25s; } .prep-item:hover { border-color: var(--line-strong); } .prep-item.checked { opacity: .52; background: var(--surface-2); } .prep-item.checked .p-name { text-decoration: line-through; text-decoration-color: var(--ink-3); } .prep-item { cursor: pointer; } .tick { width: 26px; height: 26px; margin-top: 0; border-radius: 8px; flex: none; border: 2px solid var(--line-strong); background: transparent; display: grid; place-items: center; color: transparent; transition: all .25s var(--ease-out-back); } .tick svg { width: 13px; height: 13px; } .prep-item.checked .tick { background: var(--pistachio); border-color: var(--pistachio); color: #fff; transform: scale(1.06); } .p-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; } .p-name { font-weight: 620; font-size: 14.5px; } .p-measure { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .p-cut { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12.5px; } .p-cut .badge { padding: 2px 8px; border-radius: var(--r-full); font-weight: 650; font-size: 11px; background: color-mix(in srgb, var(--cardamom) 15%, transparent); color: var(--cardamom); border: 1px solid color-mix(in srgb, var(--cardamom) 28%, transparent); } .p-cut .size { color: var(--ink-3); font-variant-numeric: tabular-nums; } .p-how { font-size: 13px; color: var(--ink-2); margin-top: 5px; } .p-note { font-size: 12.5px; color: var(--ink-2); margin-top: 6px; padding-left: 10px; border-left: 2.5px solid var(--saffron); } .prep-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 13px 15px; border-radius: var(--r-md); margin-bottom: 18px; background: color-mix(in srgb, var(--cardamom) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cardamom) 22%, transparent); font-size: 13.5px; color: var(--ink-2); } .prep-summary b { color: var(--ink); } /* an SVG with no intrinsic size will happily fill the whole box */ .prep-summary > svg { width: 18px; height: 18px; flex: none; color: var(--cardamom); } .prep-summary > span { flex: 1 1 220px; min-width: 0; } /* steps */ .steps { display: grid; gap: 12px; counter-reset: s; } .step { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 15px 16px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: border-color .2s, transform .2s, opacity .25s; } .step:hover { border-color: var(--line-strong); } .step.checked { opacity: .5; } .step .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; transition: all .25s var(--ease-out-back); } .step.checked .n { background: var(--pistachio); color: #fff; border-color: var(--pistachio); } .step .txt { font-size: 14.8px; line-height: 1.6; } .step .txt .time-hint { display: inline-block; padding: 1px 7px; margin: 0 1px; border-radius: var(--r-full); background: color-mix(in srgb, var(--saffron) 17%, transparent); color: var(--saffron-ink); font-weight: 620; font-size: 13px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--saffron) 30%, transparent); transition: transform .2s var(--ease-out-back); } .step .txt .time-hint:hover { transform: scale(1.06); } .tip-box { padding: 13px 16px; border-radius: var(--r-md); margin-top: 8px; background: color-mix(in srgb, var(--saffron) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--saffron) 22%, transparent); font-size: 13.5px; color: var(--ink-2); } .tip-box b { color: var(--ink); } .tech-strip { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; } /* ---- cook mode ----------------------------------------------------------- */ .cookmode { position: fixed; inset: 0; z-index: 90; background: var(--paper); display: flex; flex-direction: column; padding: calc(var(--safe-t) + 12px) 0 calc(var(--safe-b) + 12px); animation: cm-in .35s var(--ease) both; } @keyframes cm-in { from { opacity: 0; transform: scale(1.02); } } .cm-top { display: flex; align-items: center; gap: 12px; padding: 0 16px 12px; } .cm-progress { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; } .cm-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--saffron), var(--paprika)); border-radius: 3px; transition: width .4s var(--ease); } .cm-body { flex: 1; display: grid; place-items: center; padding: 16px; overflow-y: auto; } .cm-inner { max-width: 640px; width: 100%; text-align: center; } .cm-step-n { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; } .cm-text { font-family: var(--font-display); font-size: clamp(21px, 4.4vw, 33px); line-height: 1.35; margin-top: 14px; } .cm-timer { margin-top: 26px; font-size: 44px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-ink); letter-spacing: -.02em; } .cm-timer.ring { animation: ring .7s ease-in-out infinite; } @keyframes ring { 50% { transform: scale(1.06); color: var(--paprika); } } .cm-nav { display: flex; gap: 10px; justify-content: center; padding: 0 16px; } .cm-nav .btn { flex: 1; max-width: 200px; } /* ---- history ------------------------------------------------------------- */ .hist-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: transform .25s var(--ease-out-back), box-shadow .25s, border-color .25s; animation: card-in .45s var(--ease) both; } .hist-row:hover { transform: translateX(3px); box-shadow: var(--shadow-1); border-color: var(--line-strong); } .hist-row .th { width: 62px; height: 62px; border-radius: var(--r-sm); object-fit: cover; background: var(--surface-3); } .hist-row h3 { font-family: var(--font); font-size: 15px; font-weight: 620; } .hist-row .sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; } .hist-row .right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } /* To-cook rows have two actions rather than a rating strip, so they sit inline. */ .hist-row.todo .right { flex-direction: row; align-items: center; gap: 12px; } @media (max-width: 560px) { .hist-row { grid-template-columns: 52px 1fr; } .hist-row .th { width: 52px; height: 52px; } .hist-row .right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; } } .stars { display: inline-flex; gap: 2px; } .stars button { color: var(--line-strong); transition: transform .2s var(--ease-out-back), color .2s; padding: 1px; } .stars button svg { width: 15px; height: 15px; } .stars button.on { color: var(--saffron); } .stars button:hover { transform: scale(1.25); } .empty { text-align: center; padding: 60px 20px; color: var(--ink-2); } .empty .big { font-size: 46px; margin-bottom: 12px; animation: float 3.5s var(--ease) infinite alternate; } @keyframes float { to { transform: translateY(-9px); } } .empty h3 { font-size: 19px; margin-bottom: 7px; color: var(--ink); } /* ---- modal / sheet ------------------------------------------------------- */ .backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(20,12,4,.5); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: fade .25s var(--ease) both; } @keyframes fade { from { opacity: 0; } } .modal { width: min(440px, 100%); max-height: 86dvh; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-3); animation: modal-in .38s var(--ease-out-back) both; } @keyframes modal-in { from { opacity: 0; transform: translateY(22px) scale(.96); } } .modal h2 { font-size: 22px; margin-bottom: 6px; } .modal .lead { color: var(--ink-2); font-size: 14px; margin-bottom: 18px; } .field { margin-bottom: 13px; } .field label { display: block; font-size: 12.5px; font-weight: 620; color: var(--ink-2); margin-bottom: 5px; } .field input, .field textarea { width: 100%; padding: 11px 13px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper); color: var(--ink); transition: border-color .2s, box-shadow .2s; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--accent) 20%, transparent); } .field textarea { resize: vertical; min-height: 84px; } /* Google's brand guidance: white button, grey border, dark text, both themes. */ .btn.google { width: 100%; justify-content: center; gap: 11px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 550; padding: 12px 18px; } .btn.google:hover { background: #f7f8f8; border-color: #cdd1d5; box-shadow: var(--shadow-1); } .btn.google:disabled { opacity: .7; } :root[data-theme="dark"] .btn.google, :root:not([data-theme="light"]) .btn.google { background: #fff; color: #1f1f1f; } .or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); } .avatar-photo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; } .acct-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .acct-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .acct-head .who { min-width: 0; } .acct-head .who b { display: block; font-size: 15px; } .acct-head .who span { font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; } .msg { font-size: 13px; padding: 10px 12px; border-radius: var(--r-sm); margin-bottom: 12px; } .msg.err { background: color-mix(in srgb, var(--paprika) 13%, transparent); color: var(--paprika); } .msg.ok { background: color-mix(in srgb, var(--pistachio) 13%, transparent); color: var(--pistachio); } .msg.info{ background: var(--surface-2); color: var(--ink-2); } /* ---- toast --------------------------------------------------------------- */ #toasts { position: fixed; z-index: 200; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 18px); display: flex; flex-direction: column; gap: 8px; width: min(400px, calc(100% - 32px)); pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-full); background: var(--ink); color: var(--paper); font-size: 13.5px; font-weight: 550; box-shadow: var(--shadow-3); animation: toast-in .4s var(--ease-out-back) both; } @keyframes toast-in { from { opacity: 0; transform: translateY(18px) scale(.94); } } .toast.out { animation: toast-out .3s var(--ease) forwards; } @keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.96); } } .toast svg { width: 17px; height: 17px; flex: none; color: var(--saffron); } /* ---- footer -------------------------------------------------------------- */ .foot { margin-top: 60px; padding: 24px 0 calc(var(--safe-b) + 30px); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px; } .foot a { color: var(--ink-2); } .foot .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* ---- install prompt ------------------------------------------------------ */ .install-bar { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(var(--safe-b) + 16px); width: min(430px, calc(100% - 28px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-3); animation: toast-in .5s var(--ease-out-back) both; } .install-bar .ib-txt { flex: 1; font-size: 13px; line-height: 1.4; } .install-bar .ib-txt b { display: block; font-size: 14px; } /* ---- motion preferences -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } #bg-canvas { display: none; } } /* ---- standalone (installed) tweaks --------------------------------------- */ @media (display-mode: standalone) { .install-bar { display: none; } .topbar { background: var(--paper); } }