:root { /* ---------- Design tokens (phase 8.1, mockup «Новый интерфейс Lyuba») ---------- Colours: 11 base + 4 status. Every colour below has a dark value (see the dark theme blocks); components use only these variables. */ color-scheme: light; --bg: #FAF8F9; --surface: #FFFFFF; --surface-2: #F3F0F2; --ink: #1C1F24; --muted: #5B616B; --line: #E6E1E4; --field: #868B94; --accent: #D62839; --accent-deep: #A81E2D; --accent-ink: #FFFFFF; --accent-soft: #FCE9EB; /* Brand wordmark «Lyuba» (header): the accent red, lighter in the dark theme. */ --wordmark-accent: var(--accent); --ok: #1E7A45; --ok-soft: #E3F3EA; --wait: #8A5A00; --wait-soft: #FBF0D9; /* Shadow tint (a colour channel triple, used as rgb(var(--shadow-rgb) / alpha)). */ --shadow-rgb: 28 20 24; --shadow-sm: 0 1px 3px rgb(var(--shadow-rgb) / 0.08); --shadow-md: 0 8px 24px rgb(var(--shadow-rgb) / 0.08); --shadow-lg: 0 16px 36px rgb(var(--shadow-rgb) / 0.1); /* Photo overlays (lightbox, video label, share toast on media) stay dark in both themes. */ --scrim: rgb(20 16 18 / 0.82); --on-scrim: #FFFFFF; /* Type: 7 sizes (12/14/16/18/22/28/36 px), 3 weights. */ --font-ui: "Inter", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; /* Spacing (4 px grid) and radii. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Touch targets: 48 px, never under 44 px. Focus ring. */ --target: 48px; --target-min: 44px; --focus-ring: 3px solid var(--accent); /* Layout offsets shared by sticky/fixed elements. */ --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --topbar-top: 10px; --topbar-h: 70px; --sticky-top: calc(var(--topbar-top) + var(--topbar-h) + 6px); /* Fixed bars that sit above the mobile dock (share bar, cookie banner, toasts). */ --dock-gap: 8px; --dock-h: 0px; --above-dock: calc(var(--dock-gap) + var(--dock-h) + var(--dock-gap) + var(--safe-bottom)); /* Height of the open cookie banner / notice (static/js/cookie_consent.js), for scroll-padding. */ --cookie-ui-h: 0px; } /* Dark theme: follows the phone setting unless the visitor chose "light" (data-theme on , from the lyuba_theme cookie); data-theme="dark" forces it. Keep the two blocks identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #151315; --surface: #1F1C1F; --surface-2: #2A262A; --ink: #F3EFF1; --muted: #B3ABB0; --line: #383338; --field: #8E878C; --accent: #F3707B; --accent-deep: #F79AA2; --accent-ink: #260A0E; --accent-soft: #3A1F23; --ok: #7FD3A2; --ok-soft: #1C3326; --wait: #F0C16A; --wait-soft: #3A2F17; --shadow-rgb: 0 0 0; --shadow-sm: 0 1px 3px rgb(var(--shadow-rgb) / 0.4); --shadow-md: 0 8px 24px rgb(var(--shadow-rgb) / 0.35); --shadow-lg: 0 16px 36px rgb(var(--shadow-rgb) / 0.45); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #151315; --surface: #1F1C1F; --surface-2: #2A262A; --ink: #F3EFF1; --muted: #B3ABB0; --line: #383338; --field: #8E878C; --accent: #F3707B; --accent-deep: #F79AA2; --accent-ink: #260A0E; --accent-soft: #3A1F23; --ok: #7FD3A2; --ok-soft: #1C3326; --wait: #F0C16A; --wait-soft: #3A2F17; --shadow-rgb: 0 0 0; --shadow-sm: 0 1px 3px rgb(var(--shadow-rgb) / 0.4); --shadow-md: 0 8px 24px rgb(var(--shadow-rgb) / 0.35); --shadow-lg: 0 16px 36px rgb(var(--shadow-rgb) / 0.45); } /* Black line-art logo images read as light lines on the dark theme (photos are never filtered). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo { filter: invert(1) hue-rotate(180deg); } } :root[data-theme="dark"] .brand-logo { filter: invert(1) hue-rotate(180deg); } * { box-sizing: border-box; } html, body { height: 100%; } /* Keyboard focus and in-page jumps never end up under the sticky topbar, the mobile dock or the cookie banner. */ html { scroll-padding-top: calc(var(--sticky-top) + var(--space-2)); scroll-padding-bottom: calc(var(--above-dock) + var(--cookie-ui-h) + var(--space-2)); } body { margin: 0; color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-md); background: var(--bg); line-height: 1.5; } /* Visible focus everywhere (WCAG 2.4.7). Components may move the ring (outline-offset) but never remove it. */ :focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* "Skip to content": the first stop for keyboard users, visible only when focused. */ .skip-link { position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: 200; display: inline-flex; align-items: center; min-height: var(--target); padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--ink); color: var(--bg); font-weight: var(--fw-bold); text-decoration: none; transform: translateY(-200%); } .skip-link:focus, .skip-link:focus-visible { transform: none; } .geo-preview-bar { position: sticky; top: 0; z-index: 80; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; background: var(--ink); color: var(--bg); font-size: var(--fs-xs); font-weight: var(--fw-bold); } .geo-preview-label { opacity: 0.9; } .geo-preview-link { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target-min); min-height: var(--target-min); padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--field); color: var(--bg); background: transparent; text-decoration: none; } .geo-preview-link.is-active { background: var(--bg); color: var(--ink); } /* Text links in content: coloured and underlined (WCAG 1.4.1). Links that are components (buttons, cards, menu items — anything with a class) are reset below and style themselves. */ a { color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } @media (hover: hover) { a:hover { text-decoration-thickness: 2px; } } a:where([class]), .site-footer__links a, .recipe-jump-nav a { color: inherit; text-decoration: none; } .container { width: min(1080px, 100% - 28px); margin: 0 auto; padding: 16px 0 28px; } .topbar { position: sticky; top: var(--topbar-top); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-md); backdrop-filter: blur(10px); } .brand { font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl)); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: 1; } .brand span { color: var(--accent); } /* Computers: the five sections as links in the top bar (phones: .mobile-dock). */ .topbar-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); flex-wrap: nowrap; } .topbar-center { flex: 1; min-width: 0; max-width: 400px; margin: 0 12px; display: flex; justify-content: center; } .site-messages { display: grid; gap: 10px; margin: 16px 0 4px; } .site-message { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; } .site-message--success { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); color: var(--ok); } .site-message--warning { border-color: color-mix(in srgb, var(--wait) 35%, transparent); background: var(--wait-soft); color: var(--wait); } .site-message--error { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); color: var(--accent-deep); } .site-message--info { border-color: var(--line); background: var(--surface-2); color: var(--muted); } .lang-switch { margin: 0; } .lang-switch select { min-height: var(--target); border-radius: var(--radius-md); border: 1.5px solid var(--field); background: var(--surface); color: var(--ink); padding: 0 10px; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; } .topbar-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.15; white-space: nowrap; } .topbar-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-deep); font-weight: var(--fw-bold); } @media (hover: hover) { .topbar-link:hover { background: var(--surface-2); color: var(--accent-deep); } .topbar-link[aria-current="page"]:hover { background: var(--accent-soft); } } /* Phones: tab bar at the bottom (mockup .tabbar), shown from 860 px down. */ .mobile-dock { display: none; } /* Equal tabs, except that a longer label (ru «Избранное» at 320 px) takes a little from its neighbours. */ .tab-link { flex: 1 1 0; min-width: max-content; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 4px 0; border-radius: var(--radius-md); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.2; text-align: center; } .tab-link__icon { display: grid; place-items: center; width: 52px; max-width: 100%; height: 28px; border-radius: var(--radius-md); } /* Whole words on one line: a label that does not fit is shortened in that language instead. */ .tab-link__label { max-width: 100%; white-space: nowrap; } .tab-link[aria-current="page"] { color: var(--accent-deep); } .tab-link[aria-current="page"] .tab-link__icon { background: var(--accent-soft); } .tab-link:focus-visible { outline-offset: -3px; } /* Line icons from templates/partials/_icons.html. */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } [dir="rtl"] .icon--flip, [dir="rtl"] .back-link__icon { transform: scaleX(-1); } /* «← Recipes» on nested pages ({% back_link %}): a plain link to the parent page. */ .back-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--target); margin-block-start: var(--space-2); padding-inline: var(--space-1) var(--space-3); border-radius: var(--radius-md); color: var(--accent-deep); font-weight: var(--fw-semibold); } @media (hover: hover) { .back-link:hover { background: var(--surface-2); } } .page-shell { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); padding: 20px; } .page-hero { background: linear-gradient(180deg, var(--accent-soft), var(--surface)); } .page-kicker { display: inline-block; justify-self: start; width: fit-content; padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--accent-soft); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--accent-deep); margin-bottom: 10px; } .page-shell h1 { margin: 0 0 10px; font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); line-height: 1.06; letter-spacing: -0.03em; } .page-shell h2 { margin: 0 0 10px; font-size: clamp(var(--fs-xl), 2vw, var(--fs-2xl)); line-height: 1.15; letter-spacing: -0.02em; } .page-shell p { margin: 0; color: var(--muted); line-height: 1.55; } .page-shell p + p { margin-top: 10px; } .lead { font-size: var(--fs-lg); max-width: 42rem; } .muted { color: var(--muted) !important; } .page-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; } .section-head { margin-bottom: 8px; } .catalog-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } .catalog-card { border: 1px solid var(--line); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); display: grid; gap: 10px; min-width: 0; transition: border-color 180ms ease, transform 180ms ease; } @media (hover: hover) { a.catalog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } } .catalog-card h2, .catalog-card h3 { margin: 0; font-size: var(--fs-xl); line-height: 1.15; letter-spacing: -0.02em; } .catalog-card p { margin: 0; } .company-details-list { margin: 0; display: grid; gap: 8px; } .company-details-row { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-2); } .company-details-row dt { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); } .company-details-row dd { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink); } .company-details-list--compact { gap: 6px; } .company-details-list--compact .company-details-row { gap: 2px; padding: 8px 10px; border-radius: var(--radius-md); } .company-details-list--compact .company-details-row dt { font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .company-details-list--compact .company-details-row dd { font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.35; } .legal-operator-meta h2 { margin: 0 0 4px; font-size: var(--fs-lg); line-height: 1.2; letter-spacing: -0.01em; } .legal-operator-meta .section-head { margin: 0 0 4px; font-size: var(--fs-sm); line-height: 1.35; color: var(--muted); } .legal-operator-meta .muted { margin: 0 0 8px; font-size: var(--fs-xs); line-height: 1.42; } .about-hero { overflow: hidden; } .about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr); gap: 24px; align-items: center; } .about-copy { display: grid; gap: 12px; } .about-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; } .about-badge { display: inline-flex; align-items: center; min-height: 34px; padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent-deep); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.2; } .about-photo-frame { justify-self: end; width: min(100%, 430px); border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-lg); } .about-photo { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 34%; } .about-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .about-feature-card { min-height: 100%; } .about-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .about-link-card { display: grid; gap: 12px; min-height: 100%; } .about-link { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--accent-deep); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: break-word; word-break: normal; hyphens: auto; } .my-way-hero { overflow: hidden; } .my-way-copy { display: grid; gap: 12px; } .my-way-years { display: grid; gap: 14px; margin-top: 14px; } .my-way-year { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-md); padding: 18px; display: grid; gap: 14px; } .my-way-year__head { display: grid; gap: 8px; } .my-way-year__label { display: inline-flex; align-items: center; width: fit-content; min-height: 32px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-deep); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1; } .my-way-year h3 { margin: 0; font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -0.02em; } .my-way-year__body { display: grid; gap: 10px; } .my-way-year__body p { margin: 0; color: var(--ink); line-height: 1.62; } .shop-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); overflow: hidden; align-content: start; } .shop-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--surface); z-index: 0; } .shop-card > * { position: relative; z-index: 1; } @media (hover: hover) { .shop-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } } .shop-card--collection { max-width: 430px; } .gift-card-description { margin: 0; font-size: var(--fs-md); line-height: 1.48; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; } .shop-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 30px; } /* Labels (mockup .label): small bold text on a soft tint, 6 px corners. */ .shop-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); padding: 2px 8px; font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap; } .shop-badge-new { background: var(--ok-soft); color: var(--ok); } .shop-badge-hit { background: var(--wait-soft); color: var(--wait); } .shop-price-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); padding: 2px 8px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--accent-deep); background: var(--accent-soft); } .shop-media { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 10; display: block; } .shop-media--collection { aspect-ratio: 4 / 5; padding: 10px; display: grid; place-items: center; background: var(--surface-2); } .shop-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .shop-media--collection img { border-radius: var(--radius-md); object-fit: contain; background: var(--surface); box-shadow: var(--shadow-md); } .shop-card-description { margin: 0; color: var(--ink); font-size: var(--fs-md); line-height: 1.48; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .shop-card--collection .shop-card-description { -webkit-line-clamp: 3; line-clamp: 3; } .shop-card-meta { margin-top: -2px !important; font-size: var(--fs-sm); font-weight: var(--fw-bold); } .shop-tags { display: flex; flex-wrap: wrap; gap: 7px; } .shop-tag { border-radius: var(--radius-xs); background: var(--surface-2); color: var(--muted); padding: 2px 8px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); } .shop-filters { display: grid; gap: 10px; } .shop-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .shop-filter-grid label { display: grid; gap: 6px; font-weight: var(--fw-semibold); color: var(--ink); } .shop-detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: -8px; } .shop-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; } .shop-detail-media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); min-height: 260px; } .shop-detail-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .shop-gift-media-stack { display: grid; gap: 12px; align-content: start; } .shop-detail-media-secondary { min-height: 200px; } .shop-detail-content { display: grid; gap: 12px; align-content: start; } .shop-join-card { display: grid; gap: 16px; max-width: 760px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); } .shop-join-copy { display: grid; gap: 10px; color: var(--muted); font-size: var(--fs-md); line-height: 1.6; } .shop-join-copy p { margin: 0; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .form-grid label { display: grid; gap: 6px; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-semibold); } /* Text fields (mockup .field): 48 px tall, 1.5 px border in --field (3:1 against the surface), 12 px corners. */ .form-grid input:not([type="checkbox"]):not([type="radio"]), .form-grid textarea, .form-grid select, .checkout-grid input, .shop-filter-grid input, .shop-filter-grid select, .submit-form input[type="text"], .submit-form textarea, .submit-form select, .submit-ai__textarea { width: 100%; min-height: var(--target); border: 1.5px solid var(--field); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; padding: 10px 12px; } .form-grid input::placeholder, .form-grid textarea::placeholder, .checkout-grid input::placeholder, .submit-form input[type="text"]::placeholder, .submit-form textarea::placeholder, .submit-ai__textarea::placeholder { color: var(--muted); opacity: 1; } .form-grid textarea { resize: vertical; } .form-success { margin-bottom: 10px; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); border-radius: var(--radius-md); background: var(--ok-soft); color: var(--ok); padding: 10px 12px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .form-alert { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); padding: 10px 12px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .form-alert-error { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); color: var(--accent-deep); } .form-alert-success { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: var(--ok-soft); color: var(--ok); } .checkout-form { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 12px; } .checkout-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .checkout-grid label { display: grid; gap: 6px; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-semibold); } /* Checkbox rows: the whole label is the target (at least 48 px tall), the box itself is 24 px. */ .checkbox-line { display: inline-flex; align-items: flex-start; gap: var(--space-3); min-height: var(--target); padding-block: 12px; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); cursor: pointer; } .checkbox-line input[type="checkbox"] { width: 24px; height: 24px; margin: -2px 0 0; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; } .payment-method-hint, .shop-shipping-note { margin: 0; font-size: var(--fs-sm); } .contact-consent { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); padding: 10px 12px; } .contact-consent .checkbox-line { display: flex; align-items: flex-start; margin: 0; } .contact-consent .checkbox-line span { color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; font-weight: var(--fw-semibold); } .form-errors { margin-bottom: 10px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-deep); padding: 10px 12px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .field-error { color: var(--accent-deep); font-size: var(--fs-xs); font-weight: var(--fw-semibold); } .full-row { grid-column: 1 / -1; } .submit-hero { margin-bottom: 0; } .submit-layout-shell { margin-top: 12px; display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); gap: 14px; align-items: start; padding: 18px; } .submit-guide { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); padding: 14px; display: grid; gap: 10px; position: sticky; top: 86px; } .submit-guide h2 { margin: 0; font-size: clamp(var(--fs-xl), 2vw, var(--fs-2xl)); line-height: 1.14; } .submit-guide-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .submit-guide-list li { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 10px 12px; display: grid; gap: 4px; } .submit-guide-list strong { font-size: var(--fs-sm); line-height: 1.3; } .submit-guide-list span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; } .submit-guide-note { font-size: var(--fs-xs); color: var(--muted); } .submit-form-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 14px; display: grid; gap: 10px; min-width: 0; } .submit-errors { margin-bottom: 0; } .submit-errors strong { display: block; margin-bottom: 6px; } .submit-error-list { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; } .submit-form { display: grid; gap: 12px; } .submit-section { margin: 0; min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); padding: 14px; display: grid; gap: 10px; } .submit-section-head { margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 8px; } .submit-section-index { width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-deep); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); } .submit-section-title { font-size: var(--fs-lg); line-height: 1.2; font-weight: var(--fw-bold); } .submit-section-note { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; } .submit-fields { display: grid; gap: 10px; } .submit-fields--two { grid-template-columns: minmax(0, 1fr); } @media (min-width: 1400px) { .submit-fields--two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } .submit-field { display: grid; gap: 8px; } .submit-field--country { max-width: 440px; } .submit-field--description textarea { min-height: 168px; } .submit-label { color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.25; } .submit-required { color: var(--accent-deep); font-weight: var(--fw-bold); } .submit-help { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 7px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; } .submit-help::before { content: "i"; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; } .submit-title-counter { display: block; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-2); } .submit-title-counter.is-soft { color: var(--wait); border-color: color-mix(in srgb, var(--wait) 35%, transparent); background: var(--wait-soft); } .submit-title-counter.is-max { color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); } .submit-form textarea { resize: vertical; min-height: 120px; } .submit-form select { appearance: none; padding-inline-end: 46px; font-weight: var(--fw-semibold); background-color: var(--surface); background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% - 3px), calc(100% - 14px) calc(50% - 3px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } @media (hover: hover) { .submit-form select:hover { border-color: var(--accent-deep); background-image: linear-gradient(45deg, transparent 50%, var(--accent-deep) 50%), linear-gradient(135deg, var(--accent-deep) 50%, transparent 50%); } } .submit-form select option { color: var(--ink); background: var(--surface); } .submit-form input[type="file"] { display: block; width: 100%; border: 1.5px dashed var(--field); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); padding: 10px; } .submit-form input[type="file"][hidden] { display: none !important; } .submit-form input[type="file"]::file-selector-button { margin-inline-end: 10px; min-height: var(--target-min); border: 1.5px solid var(--field); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); padding: 6px 12px; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; } .submit-form input[type="file"]::-webkit-file-upload-button { margin-inline-end: 10px; min-height: var(--target-min); border: 1.5px solid var(--field); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); padding: 6px 12px; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; } .submit-upload { border: 1.5px dashed var(--field); border-radius: var(--radius-md); background: var(--surface); padding: 12px; } .submit-upload--primary { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); } .submit-mobile-photo { display: none; gap: 10px; margin-bottom: 10px; } .submit-mobile-photo input[type="file"] { display: none !important; } .submit-mobile-photo__actions { display: flex; flex-wrap: wrap; gap: 8px; } .submit-mobile-photo__btn { padding-inline: 14px; } .submit-mobile-photo__btn--secondary { background: var(--surface); } .submit-mobile-photo__status { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; } .submit-mobile-photo__clear { appearance: none; justify-self: start; display: inline-flex; align-items: center; min-height: var(--target-min); border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.3; padding: 0 4px; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; } @media (hover: hover) { .submit-mobile-photo__clear:hover { color: var(--accent-deep); } } .submit-mobile-photo__clear[hidden] { display: none !important; } .recipe-rows-editor { display: grid; gap: 18px; } .recipe-rows-editor__draft-banner { display: grid; gap: 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); } .recipe-rows-editor__draft-banner[hidden] { display: none !important; } .recipe-rows-editor__draft-copy { display: grid; gap: 4px; } .recipe-rows-editor__draft-copy strong { font-size: var(--fs-md); color: var(--ink); } .recipe-rows-editor__draft-copy p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; } .recipe-rows-editor__draft-actions { display: flex; flex-wrap: wrap; gap: 8px; } .recipe-rows-editor__draft-btn { padding: 0 14px; font-size: var(--fs-sm); } .recipe-rows-editor__draft-btn--ghost { background: var(--surface); } .recipe-rows-editor__draft-status { margin: -4px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; } .recipe-rows-editor__undo-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--wait) 35%, transparent); border-radius: var(--radius-lg); background: var(--wait-soft); } .recipe-rows-editor__undo-banner[hidden] { display: none !important; } .recipe-rows-editor__undo-message { color: var(--wait); font-size: var(--fs-sm); line-height: 1.45; } .recipe-rows-editor__undo-btn { appearance: none; flex: 0 0 auto; min-height: var(--target); padding: 0 14px; border: 1.5px solid var(--wait); border-radius: var(--radius-md); background: var(--surface); color: var(--wait); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; } @media (hover: hover) { .recipe-rows-editor__undo-btn:hover { background: var(--wait-soft); } } .recipe-rows-editor__ingredients-input { min-height: 220px; } .recipe-rows-editor__steps { display: grid; gap: 12px; } .recipe-rows-editor__head { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } .recipe-rows-editor__copy { display: grid; gap: 6px; } .recipe-rows-editor__copy strong { font-size: var(--fs-md); color: var(--ink); } .recipe-rows-editor__copy p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; } .recipe-rows-editor__rows { display: grid; gap: 12px; } .recipe-rows-editor__add-row { justify-self: start; min-height: var(--target); padding: 10px 16px; border: 1.5px dashed var(--field); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.2; text-align: center; white-space: normal; } @media (hover: hover) { .recipe-rows-editor__add-row:hover { border-color: var(--accent-deep); color: var(--accent-deep); background: var(--accent-soft); } } .recipe-row-editor { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .recipe-row-editor.is-empty { box-shadow: none; } .recipe-row-editor.is-heading { background: var(--surface-2); } .recipe-row-editor.is-drop-target { border-color: var(--wait); background: var(--wait-soft); box-shadow: var(--shadow-md); } .recipe-row-editor__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .recipe-row-editor__label { font-size: var(--fs-md); line-height: 1.2; color: var(--ink); } .recipe-row-editor__menu { position: relative; flex: 0 0 auto; } .recipe-row-editor__menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); padding: 0 10px; border: 1.5px solid var(--field); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: var(--fs-lg); line-height: 1; user-select: none; } .recipe-row-editor__menu > summary::-webkit-details-marker { display: none; } .recipe-row-editor__menu[open] > summary { border-color: var(--accent-deep); color: var(--accent-deep); } @media (hover: hover) { .recipe-row-editor__menu > summary:hover { border-color: var(--accent-deep); color: var(--accent-deep); } } .recipe-row-editor__menu-sheet { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 3; min-width: 180px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); display: grid; gap: 4px; } .recipe-row-editor__menu-action { appearance: none; min-height: var(--target); border: 0; background: transparent; border-radius: var(--radius-md); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.35; text-align: start; padding: 6px 12px; cursor: pointer; } @media (hover: hover) { .recipe-row-editor__menu-action:hover { background: var(--accent-soft); color: var(--accent-deep); } } .recipe-row-editor__menu-action:disabled { opacity: 0.42; cursor: default; } @media (hover: hover) { .recipe-row-editor__menu-action:disabled:hover { background: transparent; color: var(--ink); } } .recipe-row-editor__textarea { min-height: 116px; } .recipe-row-editor.is-heading .recipe-row-editor__textarea { min-height: 84px; font-size: clamp(var(--fs-xl), 2.6vw, var(--fs-2xl)); font-weight: var(--fw-bold); line-height: 1.14; letter-spacing: -0.02em; } .recipe-row-editor__suggestion { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--wait) 35%, transparent); background: var(--wait-soft); } .recipe-row-editor__suggestion[hidden] { display: none !important; } .recipe-row-editor__suggestion-text { color: var(--wait); font-size: var(--fs-sm); line-height: 1.35; } .recipe-row-editor__suggestion-btn { appearance: none; min-height: var(--target-min); border: 1.5px solid var(--wait); border-radius: var(--radius-md); background: var(--surface); color: var(--wait); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.2; padding: 6px 12px; cursor: pointer; } @media (hover: hover) { .recipe-row-editor__suggestion-btn:hover { background: var(--wait-soft); } } .recipe-row-editor__photos { display: grid; gap: 10px; } .recipe-row-editor__photos[hidden] { display: none !important; } .recipe-row-editor__photos-list { display: grid; gap: 10px; } .recipe-row-editor__photo-actions { display: flex; flex-wrap: wrap; gap: 8px; } .recipe-row-editor__add-photo { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: var(--target); padding: 0 16px; border: 1.5px dashed var(--field); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); cursor: pointer; } .recipe-row-editor__add-photo[hidden] { display: none !important; } .recipe-row-editor__add-photo::before { content: "📷"; font-size: var(--fs-md); line-height: 1; } @media (hover: hover) { .recipe-row-editor__add-photo:hover { border-color: var(--accent-deep); color: var(--accent-deep); background: var(--accent-soft); } } .recipe-row-editor__add-photo--library { display: none; } .recipe-row-editor__clear-photos { justify-self: start; appearance: none; display: inline-flex; align-items: center; min-height: var(--target-min); border: 0; background: transparent; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.3; padding: 0 4px; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; } @media (hover: hover) { .recipe-row-editor__clear-photos:hover { color: var(--accent-deep); } } .recipe-row-editor__clear-photos[hidden] { display: none !important; } .recipe-row-editor.is-drop-target .recipe-row-editor__add-photo { border-color: var(--wait); color: var(--wait); background: var(--wait-soft); } .recipe-row-image-field { display: grid; gap: 8px; padding: 12px; border: 1.5px dashed var(--field); border-radius: var(--radius-lg); background: var(--surface); } .recipe-row-image-field__meta { display: grid; gap: 6px; } .recipe-row-image-field__meta input[type="file"] { display: none !important; } .recipe-row-image-field__name { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; } .recipe-row-image-field__remove { appearance: none; justify-self: start; display: inline-flex; align-items: center; min-height: var(--target-min); border: 0; background: transparent; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-bold); padding: 0 4px; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; } @media (hover: hover) { .recipe-row-image-field__remove:hover { color: var(--accent-deep); } } .submit-compression-note { display: block; margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; } .submit-compression-note[data-tone="success"] { color: var(--ok); } .submit-compression-note[data-tone="warning"] { color: var(--wait); } .recipe-editor { display: grid; gap: 16px; } .submit-actions { margin-top: 2px; border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 10px; } .submit-consent { max-width: 60ch; } .submit-submit-btn { width: 100%; max-width: 320px; } .contact-layout-shell { padding: 18px; } .contact-layout { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 14px; align-items: start; } .contact-services { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); padding: 14px; display: grid; gap: 10px; } .contact-services h2 { margin: 0; font-size: clamp(var(--fs-xl), 2.2vw, var(--fs-2xl)); line-height: 1.12; } .contact-services-intro { margin: 0; color: var(--muted); line-height: 1.55; } .contact-direct-email { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; color: var(--muted); line-height: 1.45; } .contact-direct-email span { font-size: var(--fs-sm); } .contact-direct-email a { display: inline-flex; align-items: center; min-height: var(--target-min); font-weight: var(--fw-bold); } .contact-service-list { display: grid; gap: 10px; } .contact-service-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); padding: 12px; display: grid; gap: 6px; } .contact-service-card h3 { margin: 0; font-size: var(--fs-lg); line-height: 1.2; } .contact-service-card p { margin: 0; color: var(--muted); line-height: 1.5; font-size: var(--fs-sm); } .contact-form-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 12px; display: grid; gap: 10px; } .legal-page h1 { margin-bottom: 6px; } .legal-block + .legal-block { margin-top: 12px; } .legal-block h2 { margin-bottom: 6px; } /* Cookie policy: cookies listed under their category. */ .legal-block[id] { scroll-margin-top: var(--sticky-top); } .legal-cookie-list { margin: 8px 0 0; padding-inline-start: 18px; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.45; } .legal-cookie-list code { font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow-wrap: anywhere; } .legal-cookie-list__lifetime { display: block; color: var(--muted); font-size: var(--fs-sm); } .desktop-feed { margin-top: 16px; } .desktop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; } .desktop-tile { border: 1px solid var(--line); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; display: block; transition: border-color 180ms ease, transform 180ms ease; } .desktop-tile-link { display: block; color: inherit; text-decoration: none; } @media (hover: hover) { .desktop-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } } .desktop-tile:focus-within { transform: translateY(-1px); box-shadow: var(--shadow-md); } .desktop-tile-media { position: relative; background: var(--surface-2); overflow: hidden; } .desktop-tile-media--recipe { aspect-ratio: 4 / 5; } .desktop-tile-media picture, .mobile-post-media picture, .recipe-hero-media picture, .recipe-gallery picture, .promo-media picture { display: block; width: 100%; height: 100%; } .desktop-tile-media > picture { display: block; width: 100%; height: 100%; } .desktop-tile-media > picture img, .desktop-tile-media > img { width: 100%; height: 100%; object-fit: cover; display: block; } .desktop-tile-placeholder { width: 100%; height: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: var(--fw-bold); background: var(--surface-2); } .recipe-country-badge { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 28px; padding: 5px 7px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); pointer-events: none; } .recipe-country-badge img { display: block; width: 20px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); } .recipe-country-badge--detail { top: 14px; inset-inline-end: 14px; min-width: 34px; min-height: 26px; padding: 4px 6px; border-radius: var(--radius-md); } .recipe-country-badge--detail img { width: 18px; height: auto; object-fit: contain; } .desktop-tile-body { padding: 14px; display: grid; gap: 8px; } .desktop-tile-body--recipe { gap: 10px; } .desktop-tile-body h3 { margin: 0; font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -0.02em; } .desktop-tile-body p { margin: 0; color: var(--muted); line-height: 1.48; font-size: var(--fs-sm); } .desktop-tile-title-link { color: inherit; text-decoration: none; } .desktop-tile--recipe .desktop-tile-title-link { /* Fallback for browsers without line-clamp: two-line max-height + overflow hidden. Always two lines tall: equal cards and a tap target of at least 44 px. */ font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -0.02em; min-height: calc(2 * 1.12em); max-height: calc(2 * 1.12em); overflow: hidden; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .desktop-tile--promo .desktop-tile-title-link { /* Keep promo title visually consistent with recipe cards: compact two-line title */ font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -0.02em; min-height: calc(2 * 1.12em); max-height: calc(2 * 1.12em); overflow: hidden; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } @media (hover: hover) { .desktop-tile-title-link:hover { color: var(--accent); } } .desktop-tile-link:focus-visible, .desktop-tile-title-link:focus-visible, .mobile-post-media:focus-visible, .mobile-post-title-link:focus-visible, .feed-like-btn:focus-visible { outline-offset: 3px; } .desktop-tile-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--fs-xs); color: var(--muted); } .desktop-tile-meta span { display: inline-flex; align-items: center; font-weight: var(--fw-semibold); } .desktop-tile-meta--recipe { align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; } .desktop-tile-meta-text--recipe { display: inline-flex; align-items: center; gap: 7px; min-width: 0; flex: 1 1 auto; overflow: hidden; } .desktop-tile-author, .desktop-tile-date { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.2; white-space: nowrap; } .desktop-tile-author { overflow: hidden; text-overflow: ellipsis; } .desktop-tile-dot { color: var(--muted); flex: 0 0 auto; } .desktop-tile-meta-like { display: flex; align-items: center; flex: 0 0 auto; } .desktop-tile--promo { border: 1px solid var(--line); } .desktop-tile-media--promo { aspect-ratio: 4 / 5; } .desktop-tile-body--promo { display: grid; gap: 10px; } .desktop-tile-meta--promo { align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 8px; } .desktop-tile-meta-text--promo { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; overflow: hidden; } .promo-badge { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; border-radius: var(--radius-xs); padding: 2px 8px; font-size: var(--fs-xs); line-height: 1.2; font-weight: var(--fw-bold); letter-spacing: 0.01em; color: var(--accent-deep); background: var(--accent-soft); } .promo-badge--house { color: var(--muted); background: var(--surface-2); } .promo-badge--paid { color: var(--wait); background: var(--wait-soft); } .promo-badge--legal { color: var(--accent-deep); background: var(--accent-soft); } .promo-badge--mobile { font-size: var(--fs-xs); line-height: 1.2; } .promo-legal-line { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; } .promo-legal-line--commercial { font-size: var(--fs-xs); line-height: 1.3; } .promo-legal-line--mobile { display: block; margin-top: 4px; } .promo-media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; } .promo-media--loading { background: var(--surface-2); } .promo-media--loading::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, transparent 15%, var(--surface) 35%, transparent 55% ); transform: translateX(-100%); animation: promoShimmer 1.2s infinite; z-index: 1; } .promo-media--loading .js-promo-image { opacity: 0; } .promo-media--ready::before { display: none; } .promo-media--ready .js-promo-image { opacity: 1; transition: opacity 220ms ease; } .promo-cta-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .promo-cta-row--double { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promo-cta-row--desktop.promo-cta-row--single { display: flex; align-items: center; } .promo-cta-row--desktop.promo-cta-row--single .promo-cta { width: auto; min-width: 132px; max-width: 100%; } /* Promo buttons: full labels (they wrap instead of being cut), 48 px targets. */ .promo-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: var(--target); padding: 6px 12px; border-radius: var(--radius-md); border: 1.5px solid var(--accent-deep); color: var(--accent-deep); background: var(--accent-soft); text-decoration: none; font-size: var(--fs-sm); line-height: 1.2; font-weight: var(--fw-bold); text-align: center; white-space: normal; overflow-wrap: anywhere; transition: transform 180ms ease, box-shadow 180ms ease; } @media (hover: hover) { .promo-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); } } .promo-cta--secondary { border-style: dashed; color: var(--accent-deep); background: var(--surface); } .promo-post { background: var(--surface); } .promo-cta--mobile { justify-content: center; } .mobile-post-body--promo { display: grid; gap: 10px; } .mobile-post-meta-row--promo { display: flex; align-items: center; justify-content: flex-start; gap: 8px; } .mobile-post-meta-text--promo { display: inline-flex; align-items: center; } .mobile-post-title-link--promo { max-height: calc(2 * 1.12em); overflow: hidden; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -0.02em; font-weight: var(--fw-bold); } .promo-cta-row--mobile { grid-template-columns: minmax(0, 1fr); } .promo-cta-row--mobile.promo-cta-row--stacked, .promo-cta-row--mobile.promo-cta-row--single { grid-template-columns: minmax(0, 1fr); } .promo-skeleton { position: relative; overflow: hidden; background: var(--surface-2); color: var(--muted); } .promo-skeleton::after { display: none; } @keyframes promoShimmer { to { transform: translateX(100%); } } .mobile-feed { display: none; margin-top: 12px; } .mobile-scroll { display: grid; gap: 0; scroll-snap-type: y proximity; padding-bottom: 10px; } .mobile-post-media > picture { display: block; width: 100%; height: 100%; } .mobile-post-media > picture img, .mobile-post-media > img { width: 100%; height: 100%; object-fit: cover; display: block; } .mobile-post-placeholder { width: 100%; height: 100%; min-height: 320px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: var(--fw-bold); background: var(--surface-2); } .mobile-post h2 { margin: 0; font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -0.02em; } .mobile-post p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.5; } .pager { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 8px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; } .pager-status { text-align: center; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); padding: 0 4px; } .feed-sentinel { margin-top: 10px; min-height: 34px; display: flex; align-items: center; justify-content: center; } .feed-loader { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); } .empty-state { border: 1.5px dashed var(--field); border-radius: var(--radius-lg); padding: 22px; background: var(--surface-2); } .empty-state h2 { margin: 0 0 8px; } .empty-state p { margin: 0; color: var(--muted); } /* The element is also .recipe-detail-hero, which makes it a grid (display, gap). */ .recipe-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); border-bottom: none; } .recipe-hero-media { position: relative; width: 100%; min-height: 320px; aspect-ratio: 4 / 5; background: var(--surface-2); } .recipe-hero-placeholder { height: 100%; min-height: 320px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: var(--fw-bold); background: var(--surface-2); } .avatar { width: 42px; height: 42px; border-radius: var(--radius-pill); object-fit: cover; border: 1px solid var(--line); } .like-toggle-form { margin: 0; } .recipe-description { margin: 12px 0 0; color: var(--muted); } .recipe-like-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; } /* Inline text button inside a sentence: vertical padding widens the tap area without moving the text. */ .feed-like-note { margin: 12px 0 0; } .recipe-like-note__settings { appearance: none; display: inline; padding: 13px 2px; border: 0; background: none; color: var(--accent-deep); font: inherit; font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; } @media (hover: hover) { .recipe-jump-nav a:hover { border-color: transparent; background: var(--accent-soft); color: var(--accent-deep); } } .action-btn-disabled { opacity: 0.72; } .recipe-gallery { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 8px; } .recipe-gallery a { display: block; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); } .recipe-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 1 / 1; } .recipe-gallery--process a { position: relative; background: var(--surface-2); } .recipe-gallery--process img { object-fit: contain; padding: 6px; aspect-ratio: 4 / 5; } /* Buttons (mockup .btn): 48 px, 12 px corners. Default = secondary (1.5 px --field outline, 3:1), .btn-primary = filled accent. Labels wrap instead of being cut. */ .btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--target); padding: 8px 16px; border-radius: var(--radius-md); border: 1.5px solid var(--field); background: var(--surface); color: var(--ink); cursor: pointer; font-family: inherit; font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.2; text-align: center; text-decoration: none; white-space: normal; overflow-wrap: anywhere; transition: border-color 180ms ease, background 180ms ease, color 180ms ease; } @media (hover: hover) { .btn:hover { border-color: var(--ink); background: var(--surface-2); } } .btn-primary { color: var(--accent-ink); border-color: var(--accent); background: var(--accent); } @media (hover: hover) { .btn-primary:hover { border-color: var(--accent-deep); background: var(--accent-deep); } } .btn-disabled { pointer-events: none; opacity: 0.5; } @media (max-width: 980px) { .desktop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .desktop-tile-body h3 { font-size: var(--fs-xl); } .submit-layout-shell { grid-template-columns: 1fr; } .submit-guide { position: static; order: 2; } .submit-form-panel { order: 1; } .submit-fields--two { grid-template-columns: 1fr; } .submit-field--country { max-width: none; } .recipe-rows-editor__head, .recipe-row-editor__head { gap: 10px; } } @media (max-width: 860px) { :root { /* tab bar: 1px border + 4px padding + 52px tabs + 4px padding (the safe area comes on top) */ --dock-h: 61px; } .container { padding-bottom: calc(98px + var(--safe-bottom)); } .submit-form input[type="text"], .submit-form textarea, .submit-form select { font-size: var(--fs-md); line-height: 1.4; } .submit-form.recipe-submit-enhanced.is-touch-upload-ui .submit-upload[data-mobile-photo-field] input[type="file"][name] { display: none; } .recipe-row-editor__add-photo--library { display: inline-flex; } .topbar-nav { display: none; } .topbar-center { max-width: none; margin: 0; } /* Full width like an app's tab bar; the home-indicator area stays under it. Above the cookie banner (90). */ .mobile-dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 92; display: flex; padding: 4px calc(2px + max(var(--safe-left), var(--safe-right))) calc(4px + var(--safe-bottom)); border-block-start: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); } body.is-mobile-form-editing .geo-preview-bar, body.is-mobile-form-editing .topbar, body.is-mobile-form-editing .mobile-dock { display: none; } body.is-mobile-form-editing .container { padding-top: 6px; padding-bottom: 16px; } .desktop-feed { display: none; } .mobile-feed { display: block; } .form-grid { grid-template-columns: 1fr; } .contact-layout { grid-template-columns: 1fr; } .checkout-grid { grid-template-columns: 1fr; } } .submit-form.recipe-submit-enhanced.is-touch-upload-ui .submit-upload[data-mobile-photo-field] input[type="file"][name] { display: none !important; } .submit-form.recipe-submit-enhanced.is-touch-upload-ui .submit-mobile-photo { display: grid; } @media (max-width: 860px) { .recipe-hero { grid-template-columns: 1fr; } .recipe-hero-media, .recipe-hero-placeholder { min-height: 240px; } .shop-detail-grid { grid-template-columns: 1fr; } .shop-join-card { padding: 20px; border-radius: var(--radius-xl); } } @media (max-width: 680px) { :root { --topbar-top: 6px; } .container { width: min(1100px, 100% - 14px); padding-top: 8px; padding-bottom: calc(98px + var(--safe-bottom)); } .topbar { top: var(--topbar-top); padding: 10px 12px; border-radius: var(--radius-md); } .brand { font-size: var(--fs-2xl); } .topbar-center { margin: 0 8px; } .page-shell { border-radius: var(--radius-lg); padding: 12px; } .submit-layout-shell { padding: 12px; } .submit-guide, .submit-form-panel { border-radius: var(--radius-md); padding: 12px; } .submit-section { border-radius: var(--radius-md); padding: 12px; } .submit-section-title { font-size: var(--fs-md); } .submit-help, .submit-title-counter { padding: 7px 9px; font-size: var(--fs-xs); } .submit-help { gap: 6px; } .submit-help::before { width: 15px; height: 15px; font-size: var(--fs-xs); } .submit-form select { padding-inline-end: 42px; } .submit-field--description textarea { min-height: 150px; } .recipe-rows-editor__draft-banner { padding: 12px; border-radius: var(--radius-lg); } .recipe-rows-editor__undo-banner { padding: 12px; border-radius: var(--radius-lg); align-items: stretch; flex-direction: column; } .recipe-rows-editor__undo-btn { width: 100%; } .recipe-rows-editor__ingredients-input { min-height: 180px; } .recipe-row-editor { padding: 12px; border-radius: var(--radius-lg); } .recipe-row-editor__menu-sheet { min-width: 160px; } .recipe-row-editor__photo-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .recipe-row-editor__add-photo { width: 100%; justify-content: center; } .submit-submit-btn { max-width: none; } .lead { font-size: var(--fs-md); } .catalog-card h3 { font-size: var(--fs-lg); } .catalog-grid { gap: 12px; grid-template-columns: 1fr; } .shop-card { max-width: none; padding: 14px; border-radius: var(--radius-lg); } .shop-card-head { min-height: 0; } .shop-media { border-radius: var(--radius-lg); } .shop-media--collection { aspect-ratio: 5 / 6; padding: 8px; } .shop-card-description { font-size: var(--fs-sm); line-height: 1.42; -webkit-line-clamp: 3; line-clamp: 3; } .gift-card-description { font-size: var(--fs-sm); line-height: 1.42; -webkit-line-clamp: 3; line-clamp: 3; } .about-hero-grid { grid-template-columns: 1fr; gap: 16px; } .about-copy { gap: 10px; } .about-hero h1 { font-size: var(--fs-2xl); } .about-hero .lead { font-size: var(--fs-md); line-height: 1.5; } .about-copy p { font-size: var(--fs-md); line-height: 1.58; } .about-meta { gap: 6px; } .about-badge { min-height: 32px; font-size: var(--fs-xs); padding: 6px 10px; } .about-photo-frame { width: 100%; justify-self: stretch; border-radius: var(--radius-lg); } .about-feature-grid { grid-template-columns: 1fr; } .about-links-grid { grid-template-columns: 1fr; } .my-way-hero h1 { font-size: var(--fs-2xl); } .my-way-copy .lead { font-size: var(--fs-md); line-height: 1.5; } .my-way-copy p { font-size: var(--fs-md); } .my-way-year { border-radius: var(--radius-lg); padding: 14px; } .mobile-post-placeholder { min-height: 260px; } .pager { position: sticky; bottom: 8px; z-index: 18; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); } } h1, h2, h3, .desktop-tile-body h3, .mobile-post-title-link { font-family: var(--font-ui); } .brand { display: flex; align-items: center; } .brand-logo { height: 44px; width: auto; object-fit: contain; margin-top: 4px; } /* Instagram-like feed */ .mobile-post { scroll-snap-align: start; background: var(--surface); border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 0; border-radius: 0; } .mobile-post:last-child { border-bottom: none; } .mobile-post-author-name { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--ink); } .mobile-post-date { font-size: var(--fs-xs); color: var(--muted); } .mobile-post-media { position: relative; display: block; width: 100%; background: var(--surface-2); overflow: hidden; border-radius: 0; } .mobile-post-media--recipe { aspect-ratio: 4 / 5; } .mobile-post-media--promo { aspect-ratio: 4 / 5; } .promo-post .mobile-post-media { aspect-ratio: 4 / 5; } .mobile-post-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mobile-post-body { padding: 12px 16px; } .mobile-post-body--recipe { display: grid; gap: 10px; } .mobile-post-meta-row--recipe { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; } .mobile-post-meta-text--recipe { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; } .mobile-post-meta-text--recipe .mobile-post-author-name, .mobile-post-meta-text--recipe .mobile-post-date { font-size: var(--fs-xs); line-height: 1.2; color: var(--muted); font-weight: var(--fw-semibold); white-space: nowrap; } .mobile-post-meta-text--recipe .mobile-post-author-name { overflow: hidden; text-overflow: ellipsis; } .mobile-post-dot { color: var(--muted); flex: 0 0 auto; } .mobile-post-meta-like { display: flex; align-items: center; flex: 0 0 auto; } .feed-author-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); overflow: hidden; background: var(--surface-2); flex: 0 0 auto; } .feed-author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .feed-author-avatar picture { display: block; width: 100%; height: 100%; } .feed-author-avatar--desktop { width: 28px; height: 28px; } .feed-author-avatar--mobile { width: 24px; height: 24px; } .feed-like-form--meta { margin: 0; display: flex; align-items: center; } .feed-like-btn { -webkit-appearance: none; appearance: none; border: none; background: transparent; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: inherit; font-size: 0; line-height: 0; text-decoration: none; box-shadow: none; border-radius: 0; -webkit-tap-highlight-color: transparent; color: var(--accent); transition: transform 180ms ease, opacity 180ms ease; } @media (hover: hover) { .feed-like-btn:hover { transform: translateY(-1px); } } .feed-like-btn:disabled { cursor: wait; } .feed-like-btn.is-disabled { opacity: 0.6; } .feed-like-btn svg { width: 26px; height: 26px; flex-shrink: 0; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .feed-like-btn.is-active svg { fill: currentColor; stroke: currentColor; } /* Like buttons on feed cards: at least 44 px on desktop, 48 px on touch screens. */ .feed-like-btn--desktop { min-width: var(--target-min); min-height: var(--target-min); padding: 5px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); } .feed-like-btn--desktop.is-active { background: var(--accent-soft); color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .feed-like-btn--mobile { width: auto; height: auto; min-width: var(--target); min-height: var(--target); padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: var(--fs-xs); line-height: 1; font-weight: var(--fw-bold); } .feed-like-btn--mobile svg { width: 18px; height: 18px; } .feed-like-btn--mobile.is-active { color: var(--accent-deep); border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); } .feed-like-btn--meta { gap: 5px; } .feed-like-btn--meta [data-feed-like-count] { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; } .mobile-post-caption { font-size: var(--fs-sm); line-height: 1.4; } .mobile-post-title-link { color: var(--ink); text-decoration: none; } .mobile-post--recipe .mobile-post-title-link { /* Fallback for browsers without line-clamp: two-line max-height + overflow hidden */ min-height: var(--target-min); max-height: calc(2 * 1.12em); overflow: hidden; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; font-size: var(--fs-xl); line-height: 1.12; letter-spacing: -0.02em; font-weight: var(--fw-bold); } .mobile-post-title-link strong { font: inherit; } @media (hover: hover) { .mobile-post-title-link:hover, .mobile-post-title-link:hover strong { color: var(--accent); } } .mobile-post--recipe:focus-within { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent); } /* RTL Support */ html[dir="rtl"] { direction: rtl; } /* Recipe Detail Modernization */ .recipe-page { margin-top: 0; border: none; border-radius: 0; box-shadow: none; background: transparent; /* clip (not hidden): keeps the rounded corners without making a scroll container. */ overflow: clip; } @media (min-width: 861px) { .recipe-page { margin-top: 20px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); } } @media (min-width: 861px) { .recipe-hero-media { aspect-ratio: 16 / 9; max-height: 60vh; } } .recipe-hero-media > picture { display: block; width: 100%; height: 100%; } .recipe-hero-media > picture img, .recipe-hero-media > img { width: 100%; height: 100%; display: block; object-fit: cover; } @media (max-width: 860px) { .recipe-country-badge { top: 10px; inset-inline-end: 10px; min-width: 34px; min-height: 26px; padding: 4px 6px; } .recipe-country-badge img { width: 18px; } .recipe-country-badge--detail { top: 12px; inset-inline-end: 12px; min-width: 36px; min-height: 28px; } .recipe-country-badge--detail img { width: 20px; } } .recipe-hero-body { padding: 24px 16px; background: var(--surface); } .recipe-hero-body h1 { margin: 0 0 16px; font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl)); line-height: 1.1; letter-spacing: -0.02em; } .recipe-text { border: none; border-radius: var(--radius-lg); background: transparent; padding: 0; font-size: var(--fs-md); line-height: 1.7; color: var(--ink); } /* Ingredients styling */ .ingredient-list { list-style: none; padding: 0; margin: 0; } .ingredient-list li { position: relative; display: block; padding-block: 15px; padding-inline: 22px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: clamp(var(--fs-md), 1.45vw, var(--fs-lg)); line-height: 1.62; } .ingredient-list li::before { content: ""; position: absolute; top: 1.1em; inset-inline-start: 0; width: 8px; height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--accent) 45%, var(--surface)); } .ingredient-list li:last-child { border-bottom: none; } /* US equivalents on English recipe pages: «Flour — 200 g (1⅔ cups)» */ .ingredient-us { color: var(--muted); white-space: nowrap; unicode-bidi: isolate; } .ingredient-us-note { margin: 12px 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); } /* Steps styling */ .step-list { counter-reset: step-counter; list-style: none; padding: 0; margin: 0; } .step-list li { position: relative; padding-inline-start: 48px; margin-bottom: 24px; } .step-list li::before { counter-increment: step-counter; content: counter(step-counter); position: absolute; inset-inline-start: 0; top: -2px; width: 32px; height: 32px; background: var(--accent-soft); color: var(--accent-deep); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-bold); font-family: var(--font-ui); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; } /* Centred with logical insets (no left/right), inverted colours in both themes. */ .recipe-share-toast { position: fixed; inset-inline: 14px; bottom: var(--above-dock); width: fit-content; max-width: calc(100% - 28px); margin-inline: auto; transform: translateY(12px); opacity: 0; pointer-events: none; z-index: 95; padding: 9px 14px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: var(--fw-bold); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-md); transition: opacity 180ms ease, transform 180ms ease; } .recipe-share-toast.is-visible { opacity: 1; transform: none; } .recipe-share-toast.is-error { background: var(--accent-deep); } @media (min-width: 861px) { .recipe-share-toast { bottom: 24px; } } /* Static pages translation readiness: avoid layout breaks on long localized strings. */ .about-hero, .my-way-hero, .legal-page, .page-shell { overflow-wrap: break-word; word-break: normal; hyphens: auto; } .legal-block h2, .legal-block p, .catalog-card h2, .catalog-card h3, .catalog-card p { overflow-wrap: break-word; word-break: normal; hyphens: auto; } /* Phase 2+3: recipe detail process gallery */ .recipe-jump-nav a.is-active { background: var(--accent-soft); border-color: transparent; color: var(--accent-deep); } .process-gallery-counter { display: none; } .process-gallery-controls { display: none; } @media (min-width: 861px) { .recipe-gallery--process { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .recipe-gallery--process a { border-radius: var(--radius-lg); } .recipe-gallery--process img { padding: 10px; } } @media (min-width: 1200px) { .recipe-gallery--process { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .process-gallery-controls { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; } .process-gallery-counter { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1; white-space: nowrap; } .recipe-gallery--process { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 4px; padding-inline-end: 6px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .recipe-gallery--process::-webkit-scrollbar { height: 4px; } .recipe-gallery--process::-webkit-scrollbar-thumb { background: var(--field); border-radius: var(--radius-pill); } .recipe-gallery--process a { flex: 0 0 min(86vw, 360px); scroll-snap-align: start; border-radius: var(--radius-lg); } .recipe-gallery--process img { padding: 10px; } .process-gallery-scroll-btn { width: var(--target); height: var(--target); border: 1.5px solid var(--field); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: transform 160ms ease, background-color 160ms ease, color 160ms ease; } .process-gallery-scroll-btn:active { transform: scale(0.96); } .process-gallery-scroll-btn:disabled { opacity: 0.35; cursor: default; transform: none; } } /* Phase 4: in-page process photo viewer (lightbox) */ body.recipe-lightbox-open { overflow: hidden; position: fixed; inset-inline: 0; width: 100%; } .recipe-lightbox[hidden] { display: none !important; } .recipe-lightbox { position: fixed; inset: 0; z-index: 96; padding: 18px; display: none; align-items: center; justify-content: center; } .recipe-lightbox.is-open { display: flex; } .recipe-lightbox-backdrop { position: absolute; inset: 0; border: 0; background: var(--scrim); cursor: pointer; } .recipe-lightbox-dialog { position: relative; z-index: 1; width: min(100%, 1040px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; } .recipe-lightbox-close { position: absolute; top: -12px; inset-inline-end: -10px; width: var(--target); height: var(--target); border: 1px solid color-mix(in srgb, var(--on-scrim) 36%, transparent); border-radius: var(--radius-pill); background: var(--scrim); color: var(--on-scrim); font-size: var(--fs-2xl); line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .recipe-lightbox-nav { width: var(--target); height: var(--target); border: 1px solid color-mix(in srgb, var(--on-scrim) 36%, transparent); border-radius: var(--radius-pill); background: var(--scrim); color: var(--on-scrim); font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .recipe-lightbox-nav:disabled { opacity: 0.45; cursor: default; } .recipe-lightbox-figure { margin: 0; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--on-scrim) 22%, transparent); background: var(--surface-2); overflow: hidden; } .recipe-lightbox-figure img { display: block; width: 100%; max-height: min(82vh, 900px); max-height: min(82dvh, 900px); object-fit: contain; } .recipe-lightbox-caption { display: flex; justify-content: center; align-items: center; padding: 10px 12px; background: var(--scrim); color: var(--on-scrim); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.02em; } @media (max-width: 860px) { .recipe-lightbox { padding: 10px; } .recipe-lightbox-dialog { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 8px; } .recipe-lightbox-close { top: 8px; inset-inline-end: 8px; } .recipe-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .recipe-lightbox-nav--prev { inset-inline-start: 8px; } .recipe-lightbox-nav--next { inset-inline-end: 8px; } .recipe-lightbox-figure { border-radius: var(--radius-lg); } .recipe-lightbox-figure img { max-height: 72vh; max-height: 72dvh; } } .recipe-lightbox-close:focus-visible, .recipe-lightbox-nav:focus-visible { outline: 3px solid var(--on-scrim); outline-offset: 2px; } /* Phase 4: structured recipe detail redesign */ .recipe-detail-hero { display: grid; gap: 0; padding-top: 18px; padding-bottom: 10px; } .recipe-detail-hero__media { position: relative; overflow: hidden; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--surface-2); aspect-ratio: 4 / 5; } .recipe-detail-hero__media > picture { display: block; width: 100%; height: 100%; } .recipe-detail-hero__media > picture img, .recipe-detail-hero__media > img { width: 100%; height: 100%; display: block; object-fit: cover; } .recipe-detail-hero__body { display: grid; gap: 18px; padding: clamp(20px, 4vw, 34px); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); } .recipe-detail-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 14px; } .recipe-detail-author { display: flex; align-items: center; gap: 12px; min-width: 0; } .recipe-detail-avatar { width: 52px; height: 52px; flex: 0 0 52px; border-radius: var(--radius-pill); object-fit: cover; border: 1px solid var(--line); background: var(--surface); } .recipe-detail-avatar--fallback { display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--accent-deep); background: var(--accent-soft); } .recipe-detail-author-copy { min-width: 0; display: grid; gap: 2px; overflow: hidden; } .recipe-detail-author-name { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; } .recipe-detail-author-meta { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; } .recipe-detail-description { margin: 0; max-width: 68ch; color: var(--ink); font-size: var(--fs-md); line-height: 1.72; } .recipe-detail-stack { display: grid; gap: 28px; padding-top: 26px; padding-bottom: 28px; } /* Links to the recipe's sections (not sticky: the thin bar of recipe.css follows the reader). */ .recipe-jump-nav { width: min(1040px, calc(100vw - 28px)); margin: 10px auto 0; display: flex; gap: 10px; overflow-x: auto; align-items: center; justify-content: flex-start; padding: 14px 12px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); } .recipe-jump-nav::-webkit-scrollbar { display: none; } .recipe-jump-nav a { flex: 0 0 auto; min-height: var(--target); padding: 10px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; } .recipe-preparation-flow { display: grid; gap: 18px; } /* Steps of one part of the recipe: an ordered list (the step number stays visible inside the card). */ .recipe-step-list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; } .recipe-preparation-heading { margin-top: 4px; padding-block: 20px 2px; padding-inline: 18px 0; border-inline-start: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); } .recipe-preparation-heading h3 { margin: 0; font-size: clamp(var(--fs-xl), 2.35vw, var(--fs-2xl)); line-height: 1.16; letter-spacing: -0.02em; font-weight: var(--fw-bold); color: var(--ink); } .recipe-step-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); } .recipe-step-card__number { width: 44px; height: 44px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-deep); font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1; } .recipe-step-card__body { display: grid; gap: 14px; align-items: start; } .recipe-step-card__text p { margin: 0; color: var(--ink); font-size: clamp(var(--fs-md), 1.35vw, var(--fs-lg)); line-height: 1.74; } .recipe-step-card__media { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(124px, 13vw, 156px); gap: 10px; overflow-x: auto; padding-top: 2px; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .recipe-step-card__media--single { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding-bottom: 0; } .recipe-step-card__media--single .recipe-step-card__photo-link { width: min(188px, 100%); } .recipe-step-card__photo-link { display: block; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface-2); scroll-snap-align: start; box-shadow: var(--shadow-sm); } .recipe-step-card__photo-link picture { display: block; width: 100%; aspect-ratio: 4 / 5; } .recipe-step-card__photo-link img { display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; background: transparent; padding: 0; } .recipe-section { padding: 22px; margin-bottom: 0; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-sm); } .recipe-section h2 { margin: 0 0 22px; font-size: var(--fs-3xl); line-height: 1.04; letter-spacing: -0.03em; } .recipe-section h2::after { content: ""; display: block; width: 58px; height: 4px; margin-top: 14px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent) 0%, var(--accent-soft) 100%); } .recipe-text--flat { border-radius: var(--radius-xl); background: var(--bg); border: 1px solid var(--line); } .recipe-section--ingredients .recipe-text { max-width: 760px; padding: 10px 18px 8px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--bg); } .recipe-text--flat .ingredient-list li { padding-block: 15px; padding-inline: 22px 0; line-height: 1.62; } .recipe-text--flat .step-list li { margin-bottom: 20px; } .recipe-section--links { display: grid; gap: 18px; } .recipe-links-head { display: grid; gap: 8px; max-width: 58ch; } .recipe-links-kicker { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .recipe-links-head h2 { margin: 0; font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl)); line-height: 1.08; letter-spacing: -0.02em; } .recipe-links-head p { margin: 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.65; } .recipe-links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; align-items: stretch; } .recipe-link-card { display: grid; gap: 10px; align-content: start; min-height: 152px; height: 100%; padding: 16px; border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } @media (hover: hover) { .recipe-link-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, transparent); box-shadow: var(--shadow-md); } } .recipe-link-card--primary { background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); } .recipe-link-card__eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .recipe-link-card__title { font-size: clamp(var(--fs-md), 1.7vw, var(--fs-xl)); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); } .recipe-link-card__meta { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.45; word-break: break-word; } .process-gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .process-gallery-head h2 { margin: 0; } .recipe-gallery--process { margin-top: 16px; } @media (min-width: 861px) { .recipe-detail-hero { grid-template-columns: minmax(0, 1fr); align-items: start; } .recipe-detail-hero__media { border-radius: var(--radius-xl) var(--radius-xl) 0 0; aspect-ratio: 16 / 9; min-height: 0; max-height: 62vh; } .recipe-detail-hero__body { border-top: 0; border-inline-start: 1px solid var(--line); border-radius: 0 0 var(--radius-xl) var(--radius-xl); align-content: start; } .recipe-detail-meta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } } @media (max-width: 860px) { .recipe-detail-hero__media { border-radius: var(--radius-xl) var(--radius-xl) 0 0; } .recipe-detail-hero__body { border-radius: 0 0 var(--radius-xl) var(--radius-xl); } } @media (max-width: 860px) { .recipe-jump-nav { width: calc(100vw - 20px); margin-top: 6px; padding: 10px; } .recipe-detail-meta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; } .recipe-detail-author { gap: 10px; } .recipe-detail-avatar { width: 46px; height: 46px; flex-basis: 46px; } .recipe-step-card { grid-template-columns: minmax(0, 1fr); } .recipe-step-card__number { width: 40px; height: 40px; } .recipe-step-card__media { grid-auto-columns: 42vw; } .recipe-links-grid { grid-template-columns: 1fr; } .recipe-link-card { min-height: 0; padding: 16px; } .recipe-section h2 { font-size: clamp(var(--fs-2xl), 8vw, var(--fs-3xl)); margin-bottom: 18px; } .recipe-preparation-heading { padding-block: 14px 0; padding-inline: 14px 0; } .recipe-preparation-heading h3 { font-size: clamp(var(--fs-lg), 6vw, var(--fs-2xl)); } .process-gallery-head { align-items: stretch; } .recipe-detail-hero__media { aspect-ratio: 4 / 5; } } /* ── Size selector (merch) ─────────────────────────────────────────────── */ .size-selector { display: grid; gap: 8px; } .size-selector-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); } .size-options { display: flex; flex-wrap: wrap; gap: 8px; } .size-options input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .size-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); padding: 0 14px; border: 1.5px solid var(--field); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; transition: border-color 140ms, background 140ms, color 140ms; user-select: none; } @media (hover: hover) { .size-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); } } .size-options input[type="radio"]:checked + .size-btn { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); } .size-options input[type="radio"]:focus-visible + .size-btn { outline: var(--focus-ring); outline-offset: 2px; } .size-error { color: var(--accent-deep); font-size: var(--fs-xs); font-weight: var(--fw-semibold); } /* ── Phase 1: mobile layout, RTL, image pipeline ───────────────────────── */ /* iOS Safari zooms into any focused field whose text is smaller than 16px. */ @media (max-width: 860px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea { font-size: var(--fs-md) !important; } } /* Feed search in the topbar (mockup .search): 48 px, 1.5 px --field outline. */ .feed-search { display: flex; align-items: center; gap: 2px; width: 100%; max-width: 100%; min-height: var(--target); padding-inline: 14px 2px; background: var(--surface); border: 1.5px solid var(--field); border-radius: var(--radius-md); } /* The focus ring is drawn around the whole search box (the field inside has no border of its own). */ .feed-search:has(.feed-search__input:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; } .feed-search__input { flex: 1; min-width: 0; min-height: var(--target-min); appearance: none; border: 0; background: transparent; /* replaced by the ring around .feed-search (see :has() above) */ outline: none; font: inherit; font-size: var(--fs-md); padding: 6px 0; color: var(--ink); } .feed-search__input::placeholder { color: var(--muted); opacity: 1; } .feed-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } .feed-search__actions { display: flex; align-items: center; flex-shrink: 0; } .feed-search__btn { display: inline-flex; align-items: center; justify-content: center; width: var(--target-min); height: var(--target-min); padding: 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--accent-deep); cursor: pointer; } .feed-search__btn--clear { color: var(--muted); } .feed-search__btn:focus-visible { outline-offset: -3px; } .desktop-feed { padding-top: 16px; } /* Site footer */ .site-footer { margin-top: 28px; padding: 14px 4px 4px; border-top: 1px solid var(--line); display: grid; gap: 2px; color: var(--muted); font-size: var(--fs-sm); } .site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); } .site-footer__links a, .site-footer__cookie-btn { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); } @media (hover: hover) { .site-footer__links a:hover { color: var(--accent-deep); text-decoration: underline; } } .site-footer__cookie-btn { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; } /* Language in the footer: a compact select with the globe icon (the Profile has the full list). */ .site-footer__lang { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; } .site-footer__lang-label { display: inline-flex; color: var(--muted); } .site-footer__lang select { min-width: 0; max-width: 100%; } /* Segmented control (mockup .seg): 48 px segments, the chosen one is marked with aria-pressed. Used by the Profile (language, theme). */ .seg { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); max-width: 100%; padding: 4px; border-radius: var(--radius-md); background: var(--surface-2); } .seg button { flex: 1 1 auto; appearance: none; min-width: var(--target); min-height: var(--target); padding: 4px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.2; text-align: center; cursor: pointer; } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--accent); } @media (hover: hover) { .seg button:hover { color: var(--accent-deep); } } .site-footer__copy { margin: 0; } /* Cookie banner by category: sits above the mobile tab bar. */ .cookie-banner { position: fixed; inset-inline: calc(12px + var(--safe-left)) calc(12px + var(--safe-right)); bottom: var(--above-dock); z-index: 90; max-width: 520px; /* Never taller than the space above the dock: the category list scrolls instead. */ max-height: calc(100dvh - var(--above-dock) - 16px); overflow-y: auto; overscroll-behavior: contain; margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); padding: 14px; } .cookie-banner[hidden], .cookie-notice[hidden] { display: none; } .cookie-banner__content { display: grid; gap: 10px; } .cookie-banner__title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: 1.3; } .cookie-banner__text { margin: 0; color: var(--ink); font-size: var(--fs-sm); line-height: 1.45; } .cookie-categories { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } .cookie-category { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 8px 10px; background: var(--surface-2); } .cookie-category__row { display: flex; align-items: center; gap: 8px; min-height: var(--target); cursor: pointer; } .cookie-category__name { flex: 1 1 auto; min-width: 0; font-size: var(--fs-sm); font-weight: var(--fw-bold); } .cookie-category__state { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold); } .cookie-category__desc { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; } /* Switch: the real checkbox stays focusable for keyboards and screen readers. */ .cookie-switch__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; } /* Switch (mockup .switch): 44x26, off = --field, on = --ok, white knob in both themes. */ .cookie-switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--field); transition: background 160ms ease; } .cookie-switch::before { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--on-scrim); box-shadow: var(--shadow-sm); transition: inset-inline-start 160ms ease; } .cookie-switch__input:checked + .cookie-switch { background: var(--ok); } .cookie-switch__input:checked + .cookie-switch::before { inset-inline-start: 21px; } .cookie-switch__input:disabled + .cookie-switch { opacity: 0.55; } .cookie-category__row:has(.cookie-switch__input:disabled) { cursor: default; } .cookie-switch__input:focus-visible + .cookie-switch { outline: var(--focus-ring); outline-offset: 2px; } .cookie-banner__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cookie-banner .btn, .cookie-notice .btn { padding-inline: 10px; font-size: var(--fs-sm); } /* "Принять все" spans the full width under the other buttons. */ .cookie-banner__actions #cookie-accept-btn { grid-column: 1 / -1; } .cookie-banner__actions .btn[hidden] { display: none; } @media (max-width: 560px) { .cookie-banner { padding: 12px; } } @media (min-width: 561px) { .cookie-banner__actions { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; } .cookie-banner__actions #cookie-accept-btn { grid-column: auto; } } @media (min-width: 861px) { .cookie-banner { inset-inline: 24px auto; bottom: 24px; max-height: calc(100dvh - 48px); margin: 0; } } /* Short notice (e.g. a guest like without functional cookies) with a button to the settings. */ .cookie-notice { position: fixed; inset-inline: calc(12px + var(--safe-left)) calc(12px + var(--safe-right)); bottom: var(--above-dock); z-index: 90; max-width: 460px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); padding: 10px 12px; } .cookie-notice__text { flex: 1 1 200px; margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.4; } .cookie-notice__actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; } .cookie-notice__close { appearance: none; width: var(--target); height: var(--target); border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: var(--fs-xl); line-height: 1; cursor: pointer; } @media (min-width: 861px) { .cookie-notice { inset-inline: 24px auto; bottom: 24px; margin: 0; } } /* Yandex Metrika