/* ================================================================ MOBEEN DESIGN SYSTEM v1.0 Restaurant & Takeaway — est. 1981, Green Street → Goodmayes ---------------------------------------------------------------- Art direction: Dishoom's premium-warm heritage discipline × GDK's bold food-first confidence. Editorial cream/ink base, Anton display type at big confident sizes, red heat + gold-foil accents, one recurring "heritage stamp" signature motif that threads the 1981 story through every page (header badge, dish placeholder tiles, heritage timeline, quote marks). USAGE - Link this file after Google Fonts on every page: (portal pages: href="../design-system.css") - All component classes are prefixed `.m-` (Mobeen). Utilities and section rhythm classes are also `.m-`. - Full class index, canonical header/footer HTML, and voice notes live in gauntlet/DESIGN-SYSTEM.md — read that first if you are consuming this file, not this comment block. - Do not add colours outside the palette below anywhere on the site (this is gauntlet-graded). No green "veg" dot, no blue info states — "success" is a gold seal, not a green tick. BREAKPOINT SCALE (documented — custom properties can't live inside @media conditions, so these are fixed numbers, used consistently across every component below): ≤480px small phone — tightest single-column tweaks ≤768px header nav collapse / stacked two-col layouts ≤980px tablet — 4-col grids fold to 2-col ≥1200px desktop max — container caps out ================================================================ */ /* ============ RESET ============ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{min-height:100%} img,picture,svg,video{max-width:100%;display:block} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:none;cursor:pointer;text-align:inherit} a{color:inherit;text-decoration:none} ul,ol{list-style:none} table{border-collapse:collapse;width:100%} input[type="checkbox"],input[type="radio"]{accent-color:var(--m-red-500)} /* ================================================================ TOKENS ================================================================ */ :root{ /* ---- Raw palette — reds ---- 900 deep (dark grounds/gradients) · 700 dark (safe small text/hover) · 500 primary (large headings, solid fills w/ white text, icons) · 300 tint (decorative washes only) · 100 faint wash (kicker bg) */ --m-red-900:#6e0d10; --m-red-700:#a4161a; --m-red-500:#d92121; --m-red-300:#e8595a; --m-red-100:#fbe2e0; /* ---- Raw palette — golds ---- 500 primary (fills w/ ink text, icons, borders) · 300 light (on-ink text/accents) · 700 deep (decorative border/icon use only — see contrast note below) · 100 faint wash */ --m-gold-700:#b3810a; --m-gold-500:#f6b40a; --m-gold-300:#ffd24c; --m-gold-100:#fff3d6; /* ---- Raw palette — creams ---- */ --m-cream-000:#fff7ec; /* page base */ --m-cream-050:#fbf6ee; /* softer-than-white text-on-ink */ --m-cream-100:#fdeed8; /* section wells / alt backgrounds */ --m-cream-200:#f6e2c2; /* hairline borders on cream */ /* ---- Raw palette — inks ---- */ --m-ink-900:#1c140d; /* headings, primary text, dark grounds */ --m-ink-700:#3a2e22; /* body text on cream */ --m-ink-500:#7a6c5d; /* muted / meta text — verified 4.78:1 on cream-000 */ --m-white:#ffffff; /* card "paper" surface AND text-on-saturated-fill */ /* ---- Semantic aliases — reach for these first ---- */ --m-surface-page:var(--m-cream-000); --m-surface-well:var(--m-cream-100); --m-surface-card:var(--m-white); --m-surface-ink:var(--m-ink-900); --m-border-hairline:var(--m-cream-200); --m-text-heading:var(--m-ink-900); --m-text-body-color:var(--m-ink-700); --m-text-muted:var(--m-ink-500); --m-text-on-ink:var(--m-cream-050); --m-on-red:var(--m-white); /* text placed on a red-500 fill */ --m-on-gold:var(--m-ink-900); /* text placed on a gold-500 fill */ --m-link:var(--m-red-700); --m-link-hover:var(--m-red-900); /* ---- Contrast constraints (baked in — verified, not eyeballed) ---- ink-900 / ink-700 on any cream → 8–17:1, always safe. ink-500 (muted) on cream-000 → 4.78:1 — AA for normal text. red-700 on cream-000 → 7.30:1 — safe for text at any size. red-500 on cream-000 → 4.30:1 — FAILS normal-text AA. Use red-500 only ≥28px display headings/highlights, or as a solid fill (see below) — never as small/body text on cream. white on red-500 fill → 4.57:1 — AA pass, but ONLY with --m-white. cream-000 on red-500 measures 4.30:1 and FAILS — never put --m-cream-000 text on a red-500 fill, always --m-white. ink-900 on gold-500 fill → 9.92:1 — safe any size. gold-500 on cream-000 → 1.73:1 — FAILS. Gold is NEVER used for text on cream, at any size, anywhere on this site — not even the deepest gold-700 clears it (3.26:1, still fails the 4.5:1 body-text bar). Gold text/labels live on ink or red-900 grounds only. gold-300 on ink-900 → ~11:1 — safe, use for on-ink highlights/kickers/links. cream-000 on ink-900 → 17.11:1 — safe, default on-ink body copy. */ /* ---- Type ---- */ --m-font-display:'Anton',Impact,sans-serif; --m-font-body:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; /* Fluid scale — clamp(min, viewport, max), tuned for 390→1440px. Anton is a tall condensed face: keep tracking neutral-to-tight, never loose, at display sizes. */ --m-text-display:clamp(2.75rem,6.5vw,6rem); /* 44 → 96px — hero H1 only */ --m-text-h1:clamp(2.25rem,5vw,4.25rem); /* 36 → 68px */ --m-text-h2:clamp(1.875rem,3.6vw,3.25rem); /* 30 → 52px */ --m-text-h3:clamp(1.375rem,2.2vw,1.875rem); /* 22 → 30px */ --m-text-h4:clamp(1.125rem,1.4vw,1.375rem); /* 18 → 22px */ --m-text-lede:clamp(1.05rem,1.3vw,1.25rem); /* 16.8 → 20px */ --m-text-body:1rem; --m-text-sm:.875rem; --m-text-xs:.75rem; --m-text-2xs:.6875rem; --m-lh-display:.98; --m-lh-heading:1.06; --m-lh-body:1.65; --m-lh-tight:1.25; --m-tracking-display:-.01em; --m-tracking-heading:0em; --m-tracking-kicker:.18em; --m-tracking-btn:.04em; /* ---- Spacing (fluid section rhythm + fixed scale) ---- */ --m-space-3xs:.25rem; --m-space-2xs:.5rem; --m-space-xs:.75rem; --m-space-sm:1rem; --m-space-md:1.5rem; --m-space-lg:2.5rem; --m-space-xl:4rem; --m-space-2xl:6rem; --m-space-section:clamp(4rem,3rem + 5vw,8rem); /* ---- Radii — buttons/inputs get a confident rounded-rect, not a pill (see DESIGN-SYSTEM.md "deviations" for why). Pills are kept for small tag-like elements (chips, badges) only. ---- */ --m-radius-sm:8px; --m-radius-md:12px; --m-radius-lg:20px; --m-radius-xl:28px; --m-radius-pill:999px; /* ---- Shadows — warm, tinted red-900, never neutral grey ---- */ --m-shadow-sm:0 4px 14px rgba(110,13,16,.10); --m-shadow-md:0 14px 36px rgba(110,13,16,.16); --m-shadow-lg:0 28px 68px rgba(110,13,16,.24); --m-shadow-inset:inset 0 2px 6px rgba(28,20,13,.12); /* ---- Motion ---- */ --m-ease:cubic-bezier(.22,.61,.36,1); --m-dur-fast:150ms; --m-dur-base:240ms; --m-dur-slow:700ms; /* ---- Layout ---- */ --m-container:1200px; --m-container-narrow:760px; --m-container-wide:1360px; /* ---- Z-index scale ---- */ --m-z-header:60; --m-z-dropdown:55; --m-z-stickybar:50; --m-z-modal:200; --m-z-toast:220; } /* ============ BASE ELEMENTS ============ */ body{ font-family:var(--m-font-body); font-size:var(--m-text-body); line-height:var(--m-lh-body); color:var(--m-text-body-color); background:var(--m-surface-page); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--m-font-display); text-transform:uppercase; color:var(--m-text-heading); line-height:var(--m-lh-heading); letter-spacing:var(--m-tracking-heading); } h1{font-size:var(--m-text-h1)} h2{font-size:var(--m-text-h2)} h3{font-size:var(--m-text-h3)} h4{font-size:var(--m-text-h4)} p{max-width:65ch} a{transition:color var(--m-dur-base) var(--m-ease)} a.m-link,.m-prose a{color:var(--m-link);font-weight:600} a.m-link:hover,.m-prose a:hover{color:var(--m-link-hover)} strong,b{font-weight:700} hr{border:none;border-top:1px solid var(--m-border-hairline);margin:var(--m-space-md) 0} ::selection{background:var(--m-gold-300);color:var(--m-ink-900)} /* Two-tone focus ring: reads on cream AND ink backgrounds without a context class — the cream ring shows against dark grounds, the ink ring shows against light ones. */ :focus{outline:none} :focus-visible{ outline:none; box-shadow:0 0 0 2px var(--m-cream-000),0 0 0 5px var(--m-ink-900); border-radius:var(--m-radius-sm); } /* ============ LAYOUT ============ */ .m-container{width:100%;max-width:var(--m-container);margin:0 auto;padding:0 22px} .m-container--narrow{max-width:var(--m-container-narrow)} .m-container--wide{max-width:var(--m-container-wide)} .m-visually-hidden{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* Drop this class on any section with a dark (ink/red-900) background to flip body copy, ledes and kickers to their on-ink colours. */ .m-on-ink{color:var(--m-text-on-ink)} .m-on-ink h1,.m-on-ink h2,.m-on-ink h3,.m-on-ink h4{color:var(--m-white)} .m-on-ink .m-section__lede{color:rgba(251,246,238,.82)} .m-on-ink .m-kicker{background:rgba(255,255,255,.12);color:var(--m-gold-300)} .m-on-ink .m-kicker::before{background:var(--m-gold-500)} /* ============ TEXTURE UTILITIES ============ CSS-only pattern fills — no image assets. Used behind the hero, inside placeholder tiles and on the heritage strip so the same "engraved" texture recurs site-wide as one system. */ .m-texture-dot{ background-image:radial-gradient(rgba(255,247,236,.16) 1.1px,transparent 1.1px); background-size:26px 26px; } .m-texture-lattice{ background-image: repeating-linear-gradient(45deg,rgba(255,210,76,.14) 0 1px,transparent 1px 24px), repeating-linear-gradient(-45deg,rgba(255,210,76,.14) 0 1px,transparent 1px 24px); } /* ============ TYPOGRAPHY ============ */ .m-kicker{ display:inline-flex;align-items:center;gap:8px; font-family:var(--m-font-body);font-weight:700;font-size:var(--m-text-2xs); letter-spacing:var(--m-tracking-kicker);text-transform:uppercase; color:var(--m-red-700);background:var(--m-red-100); padding:7px 14px;border-radius:var(--m-radius-pill); } .m-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--m-gold-500);flex-shrink:0} .m-display{font-family:var(--m-font-display);text-transform:uppercase;letter-spacing:var(--m-tracking-display);line-height:var(--m-lh-display)} .m-hl{color:var(--m-red-500)} /* inline emphasis inside a heading on cream — headings are always large text, so red-500 is safe here (4.30:1 large-text exemption) */ .m-hl--gold{color:var(--m-gold-300)} /* use inside .m-on-ink headings only */ .m-lede{font-size:var(--m-text-lede);color:var(--m-text-body-color);max-width:60ch} .m-prose p+p{margin-top:var(--m-space-sm)} /* ============ SECTION RHYTHM ============ */ .m-section{padding:var(--m-space-section) 0} .m-section__head{max-width:44rem;margin-bottom:var(--m-space-xl)} .m-section__head--center{margin-left:auto;margin-right:auto;text-align:center} .m-section__title{ font-family:var(--m-font-display);text-transform:uppercase; font-size:var(--m-text-h2);line-height:var(--m-lh-heading); letter-spacing:var(--m-tracking-heading);color:var(--m-text-heading); margin-top:var(--m-space-xs); } .m-section__lede{font-size:var(--m-text-lede);color:var(--m-text-body-color);max-width:60ch;margin-top:var(--m-space-sm)} .m-section__head--center .m-section__lede{margin-left:auto;margin-right:auto} /* ============ BUTTONS ============ Deliberately NOT full pills — a confident 12px rounded-rect reads closer to Dishoom's restrained ticket-stub buttons than the bubbly SaaS-pill look. Pills are reserved for chips/badges (see below). */ .m-btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--m-font-body);font-weight:700;font-size:var(--m-text-body); letter-spacing:var(--m-tracking-btn);text-transform:uppercase; line-height:1;white-space:nowrap;cursor:pointer;border:2px solid transparent; border-radius:var(--m-radius-md);padding:15px 26px; transition:transform var(--m-dur-base) var(--m-ease),box-shadow var(--m-dur-base) var(--m-ease),background var(--m-dur-base) var(--m-ease),color var(--m-dur-base) var(--m-ease),border-color var(--m-dur-base) var(--m-ease); } .m-btn svg{width:19px;height:19px;flex-shrink:0} .m-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important} .m-btn--primary{background:var(--m-red-500);color:var(--m-on-red);box-shadow:var(--m-shadow-sm)} .m-btn--primary:not(:disabled):hover{background:var(--m-red-700);transform:translateY(-3px);box-shadow:var(--m-shadow-md)} .m-btn--primary:not(:disabled):active{background:var(--m-red-900);transform:translateY(-1px)} .m-btn--gold{background:var(--m-gold-500);color:var(--m-on-gold);box-shadow:var(--m-shadow-sm)} .m-btn--gold:not(:disabled):hover{background:var(--m-gold-300);transform:translateY(-3px);box-shadow:var(--m-shadow-md)} .m-btn--gold:not(:disabled):active{background:var(--m-gold-700);color:var(--m-white);transform:translateY(-1px)} .m-btn--ghost{background:var(--m-surface-card);color:var(--m-text-heading);border-color:var(--m-border-hairline);box-shadow:var(--m-shadow-sm)} .m-btn--ghost:not(:disabled):hover{border-color:var(--m-gold-500);transform:translateY(-3px)} .m-btn--outline{background:transparent;color:var(--m-white);border-color:rgba(255,255,255,.55)} .m-btn--outline:not(:disabled):hover{background:var(--m-white);color:var(--m-ink-900);border-color:var(--m-white);transform:translateY(-3px)} .m-btn--sm{padding:11px 18px;font-size:var(--m-text-sm)} .m-btn--block{width:100%} /* Header/hero Order CTA — guarantees the ≥44px tap target regardless of font metrics; pair with a colour modifier, e.g. class="m-btn m-btn--primary m-btn--order" */ .m-btn--order{min-height:44px} /* ============ STAMP ============ The signature device: a heritage seal used for the "Est. 1981" badge, dish placeholder-tile monogram and heritage-timeline stops. Outline (transparent) by default — reads as an ink stamp; add --filled for a solid badge legible over photography. */ .m-stamp{ --size:84px; width:var(--size);height:var(--size);flex-shrink:0; border-radius:50%;border:2px solid currentColor; display:inline-flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;position:relative; } .m-stamp::before{content:"";position:absolute;inset:5px;border:1px solid currentColor;border-radius:50%;opacity:.5} .m-stamp__mark{font-family:var(--m-font-display);font-size:calc(var(--size) * .26);line-height:1;letter-spacing:-.01em} .m-stamp__label{font-family:var(--m-font-body);font-size:calc(var(--size) * .09);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:3px} .m-stamp--sm{--size:56px} .m-stamp--lg{--size:128px} .m-stamp--ink{color:var(--m-ink-900)} .m-stamp--gold{color:var(--m-gold-300)} .m-stamp--tilt{transform:rotate(-8deg)} .m-stamp--filled.m-stamp--gold{background:var(--m-gold-500);color:var(--m-ink-900);border-color:var(--m-gold-500);box-shadow:var(--m-shadow-md)} .m-stamp--filled.m-stamp--ink{background:var(--m-ink-900);color:var(--m-cream-050);border-color:var(--m-ink-900);box-shadow:var(--m-shadow-md)} /* ============ HEADER ============ */ .m-header{position:sticky;top:0;z-index:var(--m-z-header);background:rgba(255,247,236,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--m-cream-200)} .m-header__bar{max-width:var(--m-container);margin:0 auto;padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px} .m-header__brand{display:flex;align-items:center;gap:12px} .m-header__logo{height:48px;width:auto} .m-header__word{line-height:1.05} .m-header__name{display:block;font-family:var(--m-font-display);font-size:1.28rem;text-transform:uppercase;letter-spacing:.01em;color:var(--m-ink-900)} .m-header__name em{font-style:normal;color:var(--m-red-500)} .m-header__est{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--m-text-muted);font-weight:600;margin-top:2px} .m-header__nav{display:flex;align-items:center;gap:28px} .m-header__link{font-weight:600;font-size:.95rem;color:var(--m-ink-700);position:relative;padding:6px 0} .m-header__link::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--m-red-500);border-radius:2px;transition:width var(--m-dur-base) var(--m-ease)} .m-header__link:hover{color:var(--m-red-700)} .m-header__link:hover::after{width:100%} .m-header__link[aria-current="page"]{color:var(--m-red-700)} .m-header__link[aria-current="page"]::after{width:100%} .m-header__actions{display:flex;align-items:center;gap:12px} .m-header__phone{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.92rem;color:var(--m-ink-900)} .m-header__phone svg{width:17px;height:17px;color:var(--m-red-500)} .m-header__order-short{display:none} .m-header__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;padding:8px} .m-header__burger span{width:100%;height:2.5px;background:var(--m-ink-900);border-radius:2px;transition:transform var(--m-dur-base) var(--m-ease),opacity var(--m-dur-base) var(--m-ease)} .m-header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .m-header__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .m-header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} @media(max-width:768px){ .m-header__nav{ display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0; background:var(--m-surface-page);padding:6px 22px 18px;box-shadow:var(--m-shadow-md);border-top:1px solid var(--m-border-hairline); } .m-header__nav.is-open{display:flex} .m-header__link{width:100%;padding:14px 0;border-bottom:1px solid var(--m-cream-200)} .m-header__phone-num{display:none} /* mobile: phone icon only, keeps header balanced */ .m-header__burger{display:inline-flex} .m-header__order-full{display:none} .m-header__order-short{display:inline} } @media(max-width:480px){.m-header__est{display:none}} /* ============ FOOTER ============ */ .m-footer{background:var(--m-ink-900);color:rgba(251,246,238,.72)} .m-footer__top{padding-top:var(--m-space-2xl);padding-bottom:var(--m-space-xl)} .m-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--m-space-xl)} .m-footer__brand img{height:60px;margin-bottom:var(--m-space-sm)} .m-footer__brand p{font-size:.94rem;max-width:36ch;margin-bottom:var(--m-space-md);color:rgba(251,246,238,.72)} .m-footer__socials{display:flex;gap:10px} .m-footer__socials a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background var(--m-dur-base) var(--m-ease),transform var(--m-dur-base) var(--m-ease)} .m-footer__socials a:hover{background:var(--m-red-500);transform:translateY(-3px)} .m-footer__socials svg{width:18px;height:18px;color:var(--m-white)} /* A

, not a heading: the last content heading before the footer is h2 on some pages and h3 on others, so no single hN here avoids skipping a level on at least one page (tried h5, then h4 — both failed Lighthouse's heading-order audit somewhere). The footer is its own contentinfo landmark; "Explore"/"Visit" are visual group labels, not document headings, so a class-based selector sidesteps the mismatch entirely. */ .m-footer__col-title{color:var(--m-white);font-family:var(--m-font-body);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--m-space-sm);font-weight:700} .m-footer__col a{display:block;padding:6px 0;font-size:.94rem;transition:color var(--m-dur-base) var(--m-ease),padding-left var(--m-dur-base) var(--m-ease)} .m-footer__col a:hover{color:var(--m-gold-300);padding-left:4px} .m-footer__hours{font-size:.88rem;margin-top:4px} .m-footer__hours-flag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--m-gold-300);margin-bottom:6px} .m-footer__hours-row{display:flex;justify-content:space-between;gap:12px;max-width:260px;padding:2px 0;color:rgba(251,246,238,.72)} .m-footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;font-size:.8rem;color:rgba(251,246,238,.5)} .m-footer__bottom a{color:rgba(251,246,238,.6);text-decoration:underline;text-underline-offset:2px} .m-footer__bottom a:hover{color:var(--m-gold-300)} .m-footer__legend{color:var(--m-gold-300);font-family:var(--m-font-display);text-transform:uppercase;letter-spacing:.01em;font-size:.95rem} @media(max-width:860px){.m-footer__grid{grid-template-columns:1fr 1fr}.m-footer__brand{grid-column:1/-1}} @media(max-width:520px){.m-footer__grid{grid-template-columns:1fr}} /* ============ CARD (menu item) ============ */ .m-card{ display:flex;flex-direction:column;background:var(--m-surface-card); border-radius:var(--m-radius-lg);overflow:hidden;box-shadow:var(--m-shadow-sm); border:1px solid var(--m-cream-200); transition:transform var(--m-dur-base) var(--m-ease),box-shadow var(--m-dur-base) var(--m-ease); } .m-card:hover{transform:translateY(-6px);box-shadow:var(--m-shadow-md)} .m-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--m-cream-100)} .m-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--m-dur-slow) var(--m-ease)} .m-card:hover .m-card__media img{transform:scale(1.06)} .m-card__media .m-tile-placeholder{position:absolute;inset:0} .m-card__body{padding:var(--m-space-sm) var(--m-space-sm) var(--m-space-md);display:flex;flex-direction:column;gap:5px;flex:1} .m-card__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--m-space-xs)} .m-card__name{font-weight:700;font-size:1.05rem;line-height:1.3;color:var(--m-text-heading)} .m-card__price{font-family:var(--m-font-display);color:var(--m-red-700);font-size:1.3rem;letter-spacing:.02em;white-space:nowrap;flex-shrink:0} .m-card__price-unit{font-family:var(--m-font-body);font-size:.62rem;font-weight:700;color:var(--m-text-muted);letter-spacing:0;text-transform:uppercase;margin-left:2px} .m-card__note{font-size:.82rem;font-weight:600;color:var(--m-ink-700);font-style:italic;line-height:1.4} .m-card__desc{font-size:.88rem;color:var(--m-text-muted);line-height:1.5} /* Corner badge slot — veg flag or a "featured" tag on the media */ .m-badge--corner{position:absolute;top:10px;right:10px;z-index:2} .m-badge--corner.m-badge--left{right:auto;left:10px} /* ============ BADGES ============ */ .m-badge{ display:inline-flex;align-items:center;gap:5px; font-family:var(--m-font-body);font-weight:700;font-size:.68rem; letter-spacing:.08em;text-transform:uppercase;line-height:1; padding:6px 10px;border-radius:var(--m-radius-pill);white-space:nowrap; } .m-badge--gold{background:var(--m-gold-500);color:var(--m-on-gold)} .m-badge--ink{background:var(--m-ink-900);color:var(--m-cream-050)} .m-badge--outline{background:var(--m-surface-card);color:var(--m-ink-900);border:1.5px solid var(--m-ink-900)} /* Veg flag — text label + brand-red leaf glyph, NEVER a green dot: green is off-palette (see gauntlet Category 2 checklist #6). */ .m-badge--veg{background:var(--m-surface-card);color:var(--m-ink-900);border:1.5px solid var(--m-ink-900)} .m-badge--veg .m-badge__icon{width:9px;height:9px;background:var(--m-red-700);border-radius:0 60% 0 60%;transform:rotate(45deg);display:inline-block;flex-shrink:0} /* ============ TILE PLACEHOLDER (photo-less dishes) ============ One identical design for all 10 photo-less dishes — deep red-to-ink ground, gold lattice texture, the gold "M" stamp, dish name. Sits inside .m-card__media in place of an . Mark it up as: