/* ══════════════════════════════════════════════════════════════════════════ RASA — My Kitchen (the signed-in home) Replaces the old member band. Tokens only — the band it replaces hardcoded every hex value, which is why it drifted from the rest of the site. Three-state contract on , set by js/member-shell.js: .rasa-maybe-member stage 0, synchronous — hide the hero, show a skeleton .rasa-member settled: signed in .rasa-guest settled: signed out (marketing renders untouched) ══════════════════════════════════════════════════════════════════════════ */ /* ── The swap ────────────────────────────────────────────────────────────── Hidden for guests by default; revealed the moment stage 0 suspects a member, so a signed-in visitor never sees a frame of the marketing hero. */ #myKitchen { display: none; } .rasa-maybe-member #myKitchen, .rasa-member #myKitchen { display: block; } /* The marketing funnel, suppressed for members only. `.rasa-guest` never matches these, so a logged-out visitor's page is byte-for-byte unchanged. */ .rasa-maybe-member .hero, .rasa-member .hero, .rasa-maybe-member .why-section, .rasa-member .why-section, .rasa-maybe-member .spice-cabinet, .rasa-member .spice-cabinet, .rasa-maybe-member .rasa-universe, .rasa-member .rasa-universe, .rasa-maybe-member .recipe-bridge, .rasa-member .recipe-bridge { display: none; } /* The [hidden] trap: a class that sets `display` silently overrides the HTML `hidden` attribute, so a "hidden" element renders anyway. Guard every element that JS can toggle — today #myKitchen and .mk-streak, plus the containers phase 2's rows will toggle. Cheap insurance; the failure mode (an invisible element still occupying/intercepting layout) is expensive. */ #myKitchen[hidden], .mk-header[hidden], .mk-streak[hidden], .mk-primary[hidden], .mk-primary__media[hidden], .mk-primary__meta[hidden], .mk-primary__actions[hidden], .mk-skeleton[hidden], .mk-row[hidden], .mk-btn[hidden] { display: none !important; } /* ── Shell ─────────────────────────────────────────────────────────────── */ .mk { max-width: 1180px; margin: 0 auto; /* Bottom padding stays tight — the catalog's member-state spacing below (see the .menu-section override at the end of this file) owns the seam. The two used to stack to ~256px of empty navy before the first card. */ padding: clamp(96px, 12vh, 148px) clamp(20px, 5vw, 48px) clamp(24px, 3vh, 40px); } .mk-header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 18px; margin-bottom: clamp(20px, 3vh, 32px); } .mk-greeting { /* The page's h1 — it must OWN the top of the page. At 1.15rem it rendered smaller than the card's h2 below it and read as a caption, which is why the whole header felt unresolved. */ font-family: var(--font-serif); font-size: clamp(2rem, 4.2vw, 2.9rem); font-weight: 400; line-height: 1.1; letter-spacing: 0.005em; color: var(--color-blush); margin: 0; } /* Weekly rhythm — chrome, not a module. Rendered ONLY when the streak is > 0 (a broken streak reads worse than none), so there is no zero state here. */ .mk-streak { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--color-science-rgb), 0.85); border: 1px solid rgba(var(--color-science-rgb), 0.25); border-radius: 999px; padding: 5px 12px; white-space: nowrap; } .mk-streak__icon { width: 15px; height: 15px; flex: 0 0 auto; } /* ── The one dominant card ─────────────────────────────────────────────── */ .mk-primary-slot { /* Authored height so the skeleton→card swap cannot shift the page. Matches the card's real resting height at each breakpoint. */ min-height: 320px; } .mk-primary { display: grid; /* The photo is the payload on a "cook this" card — near-equal partner, not a 38% minority. */ grid-template-columns: minmax(260px, 46%) 1fr; min-height: 320px; gap: clamp(20px, 3vw, 38px); /* `center` left 90px of dead space under the actions while the photo ran the full height — measured, not guessed. `stretch` lets the media fill its cell edge-to-edge and the body centre itself within its own padding. */ align-items: stretch; background: linear-gradient( to bottom, rgba(20, 16, 12, 0.9), rgba(10, 8, 6, 0.95) ); border: 1px solid rgba(212, 168, 154, 0.15); border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); overflow: hidden; /* 0.3s — the house interaction standard; 0.5s read as lag, not luxury. */ transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } .mk-primary:hover { transform: translateY(-4px); border-color: rgba(var(--color-science-rgb), 0.3); box-shadow: 0 20px 60px rgba(var(--color-science-rgb), 0.08); } .mk-primary--plain { grid-template-columns: 1fr; min-height: 260px; } .mk-primary__media { position: relative; display: block; align-self: stretch; min-height: 240px; overflow: hidden; } .mk-primary__media img { width: 100%; height: 100%; object-fit: cover; display: block; /* Let the food look like food — the photo is the one appetite cue on the page. (The old sepia+dim rest state muted it into stock photography.) */ filter: brightness(0.95); transition: filter 0.3s ease-out, transform 0.3s ease-out; } .mk-primary:hover .mk-primary__media img { filter: brightness(1.03); transform: scale(1.02); } .mk-primary__body { padding: clamp(26px, 3.4vw, 42px) clamp(22px, 3vw, 40px); min-width: 0; /* Centre the text block against the photo beside it rather than letting the grid centre the whole column — keeps the copy optically level with the image at every card height. */ display: flex; flex-direction: column; justify-content: center; } .mk-primary__eyebrow { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; /* 0.65 alpha ≈ 5.4:1 on this surface — 0.5 fell under AA at this size. */ color: rgba(var(--color-science-rgb), 0.8); margin-bottom: 0.7rem; } .mk-primary__title { /* An h2 — sized under the greeting so the page has one voice, and the card is a card rather than a competing hero. */ font-family: var(--font-serif); font-size: clamp(1.55rem, 2.9vw, 2.1rem); font-weight: 400; line-height: 1.12; letter-spacing: 0.01em; margin: 0 0 0.45rem; color: rgba(242, 221, 208, 0.85); } .mk-primary__title a { color: inherit; text-decoration: none; } .mk-primary__titlearrow { display: inline-block; margin-left: 10px; color: rgba(var(--color-science-rgb), 0.55); transition: transform 0.3s ease, color 0.3s ease; } .mk-primary__titlearrow svg { width: 0.55em; height: 0.5em; } .mk-primary:hover .mk-primary__titlearrow { transform: translateX(4px); color: rgba(var(--color-science-rgb), 0.9); } .mk-primary__title a::after { /* Whole-card click target without nesting interactive elements. */ content: ""; position: absolute; inset: 0; } .mk-primary { position: relative; } .mk-primary__tagline { font-family: var(--font-serif); font-size: 1.05rem; font-style: italic; color: rgba(255, 255, 255, 0.45); margin: 0 0 0.9rem; } .mk-primary__blurb { font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 1rem; max-width: 46ch; } .mk-primary__blurb em { font-style: italic; color: rgba(var(--color-science-rgb), 0.9); } /* A number needs a comparison or it's decoration (NN/g). Steps-done reads against the recipe's own length on the page it links to. */ .mk-primary__progress { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--color-science-rgb), 0.75); margin: 0 0 0.9rem; } .mk-primary__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 1.35rem; } .mk-primary__metaitem { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); } .mk-primary__metaitem svg { width: 15px; height: 15px; flex: 0 0 auto; } .mk-primary__actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; } .mk-primary__firstrun { display: inline-block; margin-top: 1rem; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 2px; transition: color 0.3s ease; } .mk-primary__firstrun:hover { color: rgba(var(--color-science-rgb), 0.9); } /* ── Buttons ───────────────────────────────────────────────────────────── */ .mk-btn { position: relative; z-index: 1; /* above the title's whole-card overlay */ display: inline-flex; align-items: center; gap: 9px; min-height: 44px; /* WCAG touch target */ padding: 11px 22px; /* Base = the QUIET sibling. Only --primary wears the accent border, so the card always has exactly one obvious action. */ border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: transparent; font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-blush); text-decoration: none; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .mk-btn:hover { border-color: rgba(255, 255, 255, 0.35); color: #ffffff; } .mk-btn--primary { background: rgba(var(--color-science-rgb), 0.12); border-color: rgba(var(--color-science-rgb), 0.45); color: var(--color-accent); } .mk-btn--primary:hover { background: rgba(var(--color-science-rgb), 0.2); } .mk-btn--quiet { border-color: rgba(255, 255, 255, 0.14); color: var(--color-text-secondary); } .mk-btn[disabled] { opacity: 0.55; cursor: progress; } .mk-btn svg { width: 14px; height: 12px; flex: 0 0 auto; transition: transform 0.3s ease; } .mk-btn:hover svg { transform: translateX(3px); } .mk-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(var(--color-science-rgb), 0.6); } .mk-primary__title a:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(var(--color-science-rgb), 0.6); border-radius: 4px; } /* ── Skeleton (stage 0 → stage 2) ────────────────────────────────────────── Shapes only. Never copy like "No plan yet" before the data lands — a premature empty message erodes trust (NN/g). */ .mk-skeleton { display: grid; /* Mirrors .mk-primary exactly so the swap cannot shift anything. */ grid-template-columns: minmax(260px, 46%) 1fr; gap: clamp(20px, 3vw, 38px); border: 1px solid rgba(212, 168, 154, 0.1); border-radius: 14px; overflow: hidden; min-height: 320px; } .mk-skeleton__media, .mk-skeleton__line { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.06) 37%, rgba(255, 255, 255, 0.03) 63% ); background-size: 400% 100%; animation: mk-shimmer 1.6s ease-in-out infinite; } .mk-skeleton__body { padding: clamp(22px, 3vw, 38px) clamp(22px, 3vw, 40px); align-self: center; width: 100%; } .mk-skeleton__line { height: 14px; border-radius: 4px; margin-bottom: 14px; } .mk-skeleton__line--eyebrow { width: 22%; height: 9px; } .mk-skeleton__line--title { width: 68%; height: 30px; } .mk-skeleton__line--sub { width: 45%; } .mk-skeleton__line--meta { width: 34%; height: 10px; } @keyframes mk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .mk-primary-slot[data-state="ready"] .mk-skeleton { display: none; } /* ── Member-toned catalog heading ────────────────────────────────────────── Same section, same cards — wording that treats a member as an owner rather than a prospect. Guests keep the original copy verbatim. */ .mk-member-copy { display: none; } .rasa-maybe-member .mk-member-copy, .rasa-member .mk-member-copy { display: block; } .rasa-maybe-member .mk-guest-copy, .rasa-member .mk-guest-copy { display: none; } /* Both variants set `display`, so both need the counter-rule or a `hidden` heading would render anyway. */ .mk-member-copy[hidden], .mk-guest-copy[hidden] { display: none !important; } /* ── Phase-2 rows: This Week + Cook It Again ───────────────────────────── Two quiet horizontal shelves under the dominant card. Same data the page already loaded; a row with nothing to show renders nothing. */ .mk-rows { display: grid; gap: clamp(30px, 4.5vh, 46px); margin-top: clamp(30px, 4.5vh, 46px); } .mk-rows[hidden] { display: none !important; } .mk-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; } .mk-row__label { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(var(--color-science-rgb), 0.8); margin: 0; } .mk-row__more { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); text-decoration: none; transition: color 0.3s ease; white-space: nowrap; } .mk-row__more svg { width: 12px; height: 10px; transition: transform 0.3s ease; } .mk-row__more:hover { color: var(--color-blush); } .mk-row__more:hover svg { transform: translateX(3px); } .mk-row__more:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(var(--color-science-rgb), 0.6); border-radius: 4px; } .mk-row__scroll { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 17vw, 196px); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 8px; /* Quiet scrollbar — present (discoverability) but not chrome. */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.12) transparent; } .mk-tile { scroll-snap-align: start; display: flex; flex-direction: column; gap: 7px; text-decoration: none; min-width: 0; } .mk-tile__media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid rgba(212, 168, 154, 0.12); background: rgba(255, 255, 255, 0.03); } .mk-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.92); transition: filter 0.3s ease-out, transform 0.3s ease-out; } .mk-tile:hover .mk-tile__media img { filter: brightness(1.02); transform: scale(1.03); } .mk-tile__media-blank { display: block; width: 100%; height: 100%; background: linear-gradient( to bottom right, rgba(var(--color-science-rgb), 0.08), rgba(255, 255, 255, 0.02) ); } .mk-tile__check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; } .mk-tile--done .mk-tile__media img { filter: brightness(0.7) saturate(0.8); } .mk-tile__top { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(var(--color-science-rgb), 0.75); } .mk-tile__title { font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.25; color: rgba(242, 221, 208, 0.85); transition: color 0.3s ease; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mk-tile:hover .mk-tile__title { color: var(--color-blush); } .mk-tile__sub { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); } .mk-tile:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px rgba(var(--color-science-rgb), 0.6); border-radius: 10px; } /* ── Member-state catalog seam ────────────────────────────────────────────── For guests the catalog is a landing-page section and its generous air is correct. For a member it is the next shelf of an app — the old stack (.mk 80px + .menu-section 96px + .menu-header 80px) put ~256px of empty navy between the hero card and the first recipe. */ .rasa-maybe-member .menu-section, .rasa-member .menu-section { padding-top: 3rem; } .rasa-maybe-member .menu-header, .rasa-member .menu-header { margin-bottom: 2.5rem; } /* ── Responsive ────────────────────────────────────────────────────────── */ @media (max-width: 820px) { .mk-primary, .mk-skeleton { grid-template-columns: 1fr; } .mk-primary__media, .mk-skeleton__media { min-height: 200px; max-height: 240px; } .mk-primary-slot, .mk-skeleton { min-height: 460px; } } @media (max-width: 520px) { .mk-primary__actions { flex-direction: column; align-items: stretch; } .mk-btn { justify-content: center; } } /* ── Reduced motion ──────────────────────────────────────────────────────── Static equivalent, not "slightly faster". The shimmer in particular is exactly the kind of looping animation this setting exists to stop. */ @media (prefers-reduced-motion: reduce) { .mk-primary, .mk-primary__media img, .mk-btn, .mk-btn svg, .mk-primary__firstrun, .mk-tile__media img, .mk-tile__title, .mk-row__more, .mk-row__more svg { transition-duration: 0.001ms; } .mk-primary:hover { transform: none; } .mk-primary:hover .mk-primary__media img { transform: none; } .mk-tile:hover .mk-tile__media img { transform: none; } .mk-row__more:hover svg { transform: none; } .mk-primary__titlearrow { transition-duration: 0.001ms; } .mk-primary:hover .mk-primary__titlearrow { transform: none; } .mk-skeleton__media, .mk-skeleton__line { animation: none; } } /* ── Gift welcome — one-time ribbon-on-the-door moment (js/home/gift-welcome.js) ── */ .gift-scrim { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5, 8, 13, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity 0.35s ease; } .gift-scrim.open { opacity: 1; } .gift-dialog { width: 100%; max-width: 432px; background: linear-gradient(180deg, #131720, #0d1017); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; padding: 44px 40px 32px; text-align: center; box-shadow: 0 32px 80px rgba(0, 0, 0, 0.55); transform: translateY(14px) scale(0.97); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .gift-scrim.open .gift-dialog { transform: none; } .gift-dialog__icon { width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(245, 166, 35, 0.1); border: 1px solid rgba(245, 166, 35, 0.25); } .gift-dialog__eyebrow { font-family: var(--font-mono); font-size: 0.58rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; } .gift-dialog__title { font-family: var(--font-serif); font-size: 1.9rem; font-weight: 500; line-height: 1.15; color: rgba(242, 221, 208, 0.95); margin-bottom: 12px; } .gift-dialog__body { font-size: 0.92rem; line-height: 1.65; color: var(--color-text-secondary); margin-bottom: 28px; } .gift-dialog__primary { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; border-radius: 100px; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; background: rgba(245, 166, 35, 0.1); color: var(--color-accent); border: 1px solid rgba(245, 166, 35, 0.35); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .gift-dialog__primary:hover { background: rgba(245, 166, 35, 0.16); border-color: rgba(245, 166, 35, 0.5); transform: translateY(-2px); } .gift-dialog__primary:focus-visible { outline: 2px solid rgba(245, 166, 35, 0.55); outline-offset: 3px; } .gift-dialog__primary:focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { .gift-scrim, .gift-dialog, .gift-dialog__primary { transition: none; } }