/* Ателье Винтаж — витрина */ @font-face { font-family: "Koli"; src: url("/fonts/koli.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } :root { --ink: #1c1712; --ink-soft: #4a4036; --paper: #efe8dc; --paper-deep: #e2d6c4; --wood: #2a1f16; --wood-mid: #4a3424; --brass: #b08d57; --moss: #6b7f5e; --moss-dark: #4f5f45; --danger: #8b3a2f; --slogan: #42240f; --text-bg: #f7f1e6; --surface: var(--text-bg); --surface-top: #faf6ef; --line: rgba(28, 23, 18, 0.12); --shadow: 0 24px 60px rgba(42, 31, 22, 0.18); --ink-overlay: rgba(28, 23, 18, 0.45); --ink-overlay-strong: rgba(28, 23, 18, 0.5); --accent-soft: rgba(107, 127, 94, 0.14); --accent-glow: rgba(107, 127, 94, 0.35); --accent-dark: #4f5f45; --brass-soft: rgba(176, 141, 87, 0.12); --brass-dark: #9a7848; --moss-soft: rgba(107, 127, 94, 0.12); --paper-soft: rgba(247, 241, 230, 0.92); --paper-veil: rgba(247, 241, 230, 0.55); --on-accent: #f7f3ea; --grad-brass: rgba(176, 141, 87, 0.12); --grad-moss: rgba(107, 127, 94, 0.1); --hero-falloff: #e6d8c2; --hero-scrim: linear-gradient( 90deg, rgba(247, 241, 230, 0.97) 0%, rgba(247, 241, 230, 0.92) 28%, rgba(247, 241, 230, 0.72) 48%, rgba(247, 241, 230, 0.35) 68%, rgba(247, 241, 230, 0.12) 100% ); --page-bg: radial-gradient(ellipse at 20% 0%, var(--grad-brass), transparent 50%), radial-gradient(ellipse at 90% 10%, var(--grad-moss), transparent 45%), linear-gradient(180deg, var(--text-bg) 0%, var(--paper) 40%, var(--paper-deep) 100%); --hero-fallback: radial-gradient(ellipse at 78% 42%, var(--moss-soft), transparent 48%), linear-gradient(165deg, var(--text-bg) 0%, var(--paper) 55%, var(--paper-deep) 100%); --font-display: "Cormorant Garamond", "Times New Roman", serif; --font-body: "Literata", "Georgia", serif; --font-ui: "Syne", "Trebuchet MS", sans-serif; --font-hand: "Koli", "Segoe Script", cursive; --font-slavic: "Ruslan Display", "Times New Roman", serif; --font-display-color: var(--ink); --font-body-color: var(--ink); --font-ui-color: var(--ink); --font-hand-color: var(--slogan); --font-brand-color: var(--ink); --max: 1120px; --accent: var(--moss); --site-header-h: 5.5rem; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Hide default HTML until theme/content bootstrap is ready */ html.theme-pending body { visibility: hidden; } html.theme-ready body { visibility: visible; } body { margin: 0; color: var(--font-body-color, var(--ink)); background: var(--page-bg); font-family: var(--font-body); font-size: 1.05rem; line-height: 1.65; min-height: 100vh; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } a:hover { color: var(--moss-dark); } .container { width: min(100% - 2.5rem, var(--max)); margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Header */ .site-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); background-color: var(--paper); background-image: linear-gradient(180deg, var(--paper-veil), var(--paper-soft)), url("/images/ui/header-wood.png"); background-size: 100% 100%; background-position: center center; background-repeat: repeat-x; box-shadow: 0 1px 0 color-mix(in srgb, var(--text-bg) 70%, transparent) inset, 0 6px 18px color-mix(in srgb, var(--wood) 10%, transparent), 0 2px 6px color-mix(in srgb, var(--wood) 6%, transparent); } .site-header.has-custom-header-bg { background-repeat: no-repeat; background-size: cover; } .site-header.has-solid-header-bg { background-image: none; } /* Menu style variants (data-menu-style on ) */ html[data-menu-style='glass'] .site-header { background-color: color-mix(in srgb, var(--text-bg) 55%, transparent); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); box-shadow: 0 8px 28px color-mix(in srgb, var(--wood) 8%, transparent); } html[data-menu-style='glass'] .nav { background: color-mix(in srgb, var(--text-bg) 42%, transparent); border-radius: 999px; border-color: color-mix(in srgb, var(--brass) 28%, var(--line)); box-shadow: 0 8px 24px color-mix(in srgb, var(--wood) 10%, transparent); } html[data-menu-style='glass'] .nav__lamp { border-radius: 999px; } html[data-menu-style='minimal'] .site-header { background-image: none; background-color: var(--text-bg); border-bottom: 1px solid var(--line); box-shadow: none; } html[data-menu-style='minimal'] .nav { background: transparent; border: none; border-radius: 0; box-shadow: none; height: auto; gap: 0.15rem; } html[data-menu-style='minimal'] .nav a { padding: 0.55rem 0.75rem; letter-spacing: 0.1em; } html[data-menu-style='minimal'] .nav a::after { display: block; content: ''; position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.2rem; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; } html[data-menu-style='minimal'] .nav a:hover::after, html[data-menu-style='minimal'] .nav a.is-active::after, html[data-menu-style='minimal'] .nav a.is-lit::after { transform: scaleX(1); } html[data-menu-style='minimal'] .nav__lamp { display: none; } html[data-menu-style='soft'] .site-header { border-bottom: none; box-shadow: 0 12px 36px color-mix(in srgb, var(--wood) 8%, transparent); } html[data-menu-style='soft'] .nav { border-radius: 18px; background: color-mix(in srgb, var(--paper) 70%, white); border-color: color-mix(in srgb, var(--brass) 18%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55); } html[data-menu-style='soft'] .nav__lamp { border-radius: 14px; } html[data-menu-style='ink'] .site-header { background-image: none; background-color: var(--wood); border-bottom-color: color-mix(in srgb, var(--brass) 35%, transparent); box-shadow: 0 10px 30px color-mix(in srgb, var(--wood) 35%, transparent); } html[data-menu-style='ink'] .brand, html[data-menu-style='ink'] .brand__tag, html[data-menu-style='ink'] .nav a, html[data-menu-style='ink'] .cart-icon, html[data-menu-style='ink'] .nav-toggle, html[data-menu-style='ink'] .site-search__input { color: var(--on-accent); } html[data-menu-style='ink'] .brand__tag { opacity: 0.78; } html[data-menu-style='ink'] .nav { background: color-mix(in srgb, #000 28%, transparent); border-color: color-mix(in srgb, var(--brass) 40%, transparent); } html[data-menu-style='ink'] .nav a.is-lit { color: var(--wood); } html[data-menu-style='ink'] .site-search__input { background: color-mix(in srgb, #000 22%, transparent); border-color: color-mix(in srgb, var(--brass) 35%, transparent); } html[data-menu-style='ink'] .site-search__input::placeholder { color: color-mix(in srgb, var(--on-accent) 65%, transparent); } html[data-menu-style='brass'] .site-header { border-bottom: 2px solid color-mix(in srgb, var(--brass) 70%, var(--line)); box-shadow: 0 1px 0 color-mix(in srgb, var(--brass) 35%, transparent) inset, 0 8px 22px color-mix(in srgb, var(--wood) 10%, transparent); } html[data-menu-style='brass'] .nav { border-radius: 6px; border: 1px solid color-mix(in srgb, var(--brass) 55%, var(--line)); background: color-mix(in srgb, var(--brass) 10%, var(--text-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass) 18%, transparent); } html[data-menu-style='brass'] .nav__lamp { background: linear-gradient( 180deg, var(--lamp-color, var(--brass)), color-mix(in srgb, var(--lamp-color, var(--brass)) 70%, #000) ); border-radius: 4px; } html[data-menu-style='floating'] .site-header { background: transparent; background-image: none; border-bottom: none; box-shadow: none; } html[data-menu-style='floating'] .site-header__inner { margin: 0.65rem 0; padding: 0.55rem 0.85rem; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--text-bg) 92%, transparent); box-shadow: 0 14px 36px color-mix(in srgb, var(--wood) 12%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } html[data-menu-style='floating'] .nav { border-radius: 999px; background: color-mix(in srgb, var(--ink-soft) 12%, transparent); } html[data-menu-style='floating'] .nav__lamp { border-radius: 999px; } html[data-menu-style='compact'] .site-header__inner { padding: 0.45rem 0; gap: 0.85rem; } html[data-menu-style='compact'] .nav { height: 2.55rem; border-radius: 6px; font-size: 0; } html[data-menu-style='compact'] .nav a { padding: 0 0.75rem; font-size: 0.7rem; letter-spacing: 0.08em; } html[data-menu-style='compact'] .site-search__input { height: 2.55rem; font-size: 0.7rem; } html[data-menu-style='compact'] .brand__logo { width: 2.4rem; height: 2.4rem; } /* «Орбита» — CSS Anchor Positioning (hover + active индикаторы) */ html[data-menu-style='anchor'] { --nav-indicator-hover: color-mix(in srgb, var(--accent) 72%, var(--brass)); --nav-indicator-active: var(--accent); --nav-bg: color-mix(in srgb, var(--wood) 92%, #000); --nav-link-color: var(--on-accent); --nav-link-color-active: var(--on-accent); --nav-padding: 5px; --nav-border-radius: 999vw; --nav-trans-duration: 700ms; --nav-trans-easing: linear( 0, 1 44.7%, 0.898 51.8%, 0.874 55.1%, 0.866 58.4%, 0.888 64.3%, 1 77.4%, 0.98 84.5%, 1 ); } html[data-menu-style='anchor'] .site-header { border-bottom-color: color-mix(in srgb, var(--wood) 40%, var(--line)); } html[data-menu-style='anchor'] .nav { position: relative; isolation: isolate; width: fit-content; height: auto; min-height: 3.125rem; padding: var(--nav-padding); overflow: visible; background: var(--nav-bg); border: 1px solid color-mix(in srgb, var(--brass) 28%, transparent); border-radius: var(--nav-border-radius); box-shadow: 0 12px 32px color-mix(in srgb, var(--wood) 22%, transparent); font-size: 0; } html[data-menu-style='anchor'] .nav > a { color: var(--nav-link-color); padding: 0.55rem 1.05rem; border-radius: inherit; transition: color 150ms ease-in-out; } html[data-menu-style='anchor'] .nav > a.is-active, html[data-menu-style='anchor'] .nav > a.is-lit { color: var(--nav-link-color-active); } /* Fallback без Anchor Positioning — обычная лампа */ html[data-menu-style='anchor'] .nav__lamp { border-radius: 999px; background: var(--lamp-color, var(--nav-indicator-active)); } @supports (anchor-name: --x) { html[data-menu-style='anchor'] .nav::before, html[data-menu-style='anchor'] .nav::after { content: ''; position: absolute; top: anchor(top); left: anchor(left); right: anchor(right); bottom: anchor(bottom); z-index: -1; pointer-events: none; border-radius: inherit; transition: var(--nav-trans-duration) var(--nav-trans-easing); transition-property: top, left, right, bottom, background-color, opacity; } html[data-menu-style='anchor'] .nav::before { position-anchor: --hovered-option; background: var(--nav-indicator-hover); opacity: 0; } html[data-menu-style='anchor'] .nav:has(> a:hover)::before, html[data-menu-style='anchor'] .nav:has(> a:focus-visible)::before { opacity: 0.95; } html[data-menu-style='anchor'] .nav::after { position-anchor: --active-option; background: var(--nav-indicator-active); opacity: 1; } html[data-menu-style='anchor'] .nav > a:hover, html[data-menu-style='anchor'] .nav > a:focus-visible { anchor-name: --hovered-option; } html[data-menu-style='anchor'] .nav > a.is-active { anchor-name: --active-option; } /* Активный пункт при hover остаётся active-якорем */ html[data-menu-style='anchor'] .nav > a.is-active:hover, html[data-menu-style='anchor'] .nav > a.is-active:focus-visible { anchor-name: --active-option; } html[data-menu-style='anchor'] .nav__lamp { display: none; } } @media (max-width: 680px) { html[data-menu-style='anchor'] .nav { width: 100%; max-width: none; border-radius: 16px; } html[data-menu-style='anchor'] .nav > a { justify-content: flex-start; } } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.7rem 0; } .site-header__inner.container { width: min(100% - 1.5rem, 1420px); } @media (min-width: 681px) { .site-header__inner { display: grid; grid-template-columns: minmax(15rem, 18rem) auto minmax(15rem, 18rem); grid-template-areas: "brand nav search"; align-items: center; gap: 1.25rem; } .brand { grid-area: brand; justify-self: start; min-width: 0; width: 100%; } .nav { grid-area: nav; position: relative; left: auto; transform: none; justify-self: center; margin: 0; max-width: 100%; } .site-search, .header-actions { grid-area: search; justify-self: end; margin-left: 0; width: min(16rem, 100%); } } .header-actions { display: none; align-items: center; gap: 0.55rem; margin-left: auto; flex-shrink: 0; } .cart-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.55rem; height: 2.55rem; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; } .cart-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .cart-icon .cart-badge { position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.15rem; height: 1.15rem; font-size: 0.62rem; } /* Mobile cart drawer */ .cart-drawer { position: fixed; inset: 0; z-index: 80; pointer-events: none; visibility: hidden; } .cart-drawer.is-open { pointer-events: auto; visibility: visible; } .cart-drawer__backdrop { position: absolute; inset: 0; background: var(--ink-overlay); opacity: 0; transition: opacity 0.3s ease; } .cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; } .cart-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(100vw - 2.5rem, 22rem); background: var(--text-bg); box-shadow: 12px 0 40px color-mix(in srgb, var(--ink) 18%, transparent); display: flex; flex-direction: column; transform: translateX(-105%); transition: transform 0.32s ease; } .cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); } .cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); flex-shrink: 0; } .cart-drawer__head h2 { font-family: var(--font-display); font-size: 1.6rem; margin: 0; font-weight: 600; } .cart-drawer__close { width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); } .cart-drawer__body { overflow: auto; padding: 0.85rem 1rem 1.5rem; flex: 1; } .cart-row--drawer { grid-template-columns: 4.2rem 1fr; grid-template-areas: "media info" "media qty" "sum remove"; gap: 0.65rem 0.75rem; padding: 0.85rem 0; } .cart-row--drawer .cart-row__media { grid-area: media; } .cart-row--drawer .cart-row__info { grid-area: info; } .cart-row--drawer .cart-row__qty { grid-area: qty; justify-self: start; } .cart-row--drawer .cart-row__sum { grid-area: sum; text-align: left; min-width: 0; } .cart-row--drawer .cart-row__remove { grid-area: remove; justify-self: end; padding: 0.45rem 0.6rem; } .cart-row--drawer h3 { font-size: 1.1rem; } .cart-footer--drawer { flex-direction: column; align-items: stretch; gap: 1rem; padding-top: 1.25rem; } .cart-footer--drawer .cart-footer__actions { width: 100%; } .cart-footer--drawer .cart-footer__actions .btn { flex: 1; } body.cart-drawer-open { overflow: hidden; } @media (min-width: 681px) { .cart-drawer__panel { width: min(100vw - 3rem, 26rem); } } .brand { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--font-slavic); font-size: clamp(1.55rem, 2.9vw, 2.05rem); font-weight: 400; letter-spacing: 0.04em; text-decoration: none; line-height: 1; color: var(--font-brand-color, inherit); flex-shrink: 0; } .brand__logo { display: none; width: 3.1rem; height: 3.1rem; object-fit: cover; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(28, 23, 18, 0.12); } .brand__text { display: grid; gap: 0.18rem; min-width: 0; } .brand__tag { display: none; font-family: var(--font-ui); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } @keyframes brandReveal { from { opacity: 0; transform: translateX(-1.4rem); } to { opacity: 1; transform: translateX(0); } } @keyframes brandCaret { 50% { opacity: 0; } } @media (min-width: 681px) { .brand { animation: brandReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; } } @media (prefers-reduced-motion: reduce) { .brand { animation: none; } .brand [data-bind="brandName"].is-typing::after { animation: none; display: none; } } .nav { position: relative; display: inline-flex; align-items: stretch; flex-wrap: nowrap; justify-content: center; width: max-content; max-width: 100%; height: 3.125rem; margin: 0; padding: 0; overflow: hidden; background: color-mix(in srgb, var(--ink-soft) 18%, transparent); border: 1px solid var(--line); border-radius: 8px; font-family: var(--font-ui); font-size: 0; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 10px 28px color-mix(in srgb, var(--wood) 8%, transparent); white-space: nowrap; } .site-search { position: relative; flex: 0 1 15rem; width: min(16rem, 100%); margin-left: auto; z-index: 45; } .site-search__input { width: 100%; height: 3.125rem; margin: 0; padding: 0 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-soft); box-shadow: 0 10px 28px color-mix(in srgb, var(--wood) 8%, transparent); font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink); outline: none; } .site-search__input::placeholder { color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; } .site-search__input:focus { border-color: var(--brass); } .site-search__results { position: absolute; top: calc(100% + 0.4rem); left: auto; right: 0; width: max(100%, 18rem); max-width: min(24rem, calc(100vw - 1.5rem)); max-height: min(22rem, 70vh); overflow: auto; padding: 0.35rem; border: 1px solid var(--line); border-radius: 8px; background: var(--text-bg); box-shadow: 0 16px 40px color-mix(in srgb, var(--wood) 16%, transparent); } .site-search__results[hidden] { display: none !important; } .site-search__group { padding: 0.45rem 0.65rem 0.2rem; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .site-search__item { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.55rem 0.65rem; border: 0; border-radius: 6px; background: transparent; color: var(--ink); text-decoration: none; text-align: left; cursor: pointer; font: inherit; } .site-search__item:hover, .site-search__item.is-active { background: var(--accent-soft); } .site-search__item img { width: 2.4rem; height: 2.4rem; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--paper-deep); } .site-search__item-text { display: grid; gap: 0.1rem; min-width: 0; } .site-search__item-title { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-search__item-meta { font-family: var(--font-ui); font-size: 0.65rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } .site-search__empty { padding: 0.85rem 0.65rem; color: var(--ink-soft); font-size: 0.92rem; } .nav a { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 100%; padding: 0 1.05rem; font-size: 0.78rem; line-height: 1; text-decoration: none; text-align: center; color: var(--ink); white-space: nowrap; cursor: pointer; transition: color 0.25s ease; } .nav a.is-lit { color: var(--on-accent); } .nav a::after { display: none; } .nav__lamp { --lamp-color: var(--accent); position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 100%; border-radius: 8px; background: var(--lamp-color); pointer-events: none; transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.55s ease; overflow: hidden; } .nav__lamp::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 0%, color-mix(in srgb, #fff 28%, transparent) 42%, transparent 72% ); transform: translateX(-120%); opacity: 0; pointer-events: none; } .nav__lamp.is-shimmering::after { opacity: 1; animation: navLampShimmer 0.7s ease-out; } @keyframes navLampShimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } } @media (prefers-reduced-motion: reduce) { .nav__lamp { transition: left 0.2s ease, width 0.2s ease, background-color 0.2s ease; } .nav__lamp.is-shimmering::after { animation: none; opacity: 0; } } .nav-cart { display: inline-flex; align-items: center; gap: 0.4rem; } .nav-cart .cart-badge { background: var(--accent); color: var(--on-accent); } .cart-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.35rem; font-size: 0.68rem; letter-spacing: 0; background: var(--accent); color: var(--on-accent); } .cart-badge[hidden] { display: none !important; } .nav-toggle { display: none; border: 1px solid var(--line); border-radius: 8px; background: transparent; padding: 0.55rem 0.75rem; font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } .nav-drawer { display: none; } /* Hero — fills the first screen under the sticky header, no leftover paper band */ .hero { position: relative; min-height: calc(100vh - var(--site-header-h)); min-height: calc(100dvh - var(--site-header-h)); display: grid; align-items: center; justify-items: start; color: var(--ink); overflow: hidden; background: var(--hero-fallback); } .hero__media { position: absolute; inset: 0; background-image: url("/images/brand/tanir-logo.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 0.9; animation: heroDrift 18s ease-in-out infinite alternate; pointer-events: none; overflow: hidden; } .hero__media--video { background-image: none !important; animation: none; opacity: 1; } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .hero__media::after { content: ""; position: absolute; inset: 0; background: var(--hero-scrim); } .hero__content { position: relative; z-index: 1; width: min(100% - 2.5rem, var(--max)); margin-inline: auto; padding: clamp(4rem, 10vw, 7rem) 0 clamp(3rem, 8vw, 5rem); max-width: none; text-align: left; justify-self: stretch; } .hero__content > * { max-width: 34rem; } .hero__brand { display: none; font-family: var(--font-slavic); } .hero__logo { display: block; width: clamp(10rem, 14vw, 13rem); height: auto; margin: 0 0 1.25rem; object-fit: contain; animation: riseIn 1s ease both; } .hero h1 { font-family: var(--font-hand); font-weight: 400; font-size: clamp(1.85rem, 4vw, 2.85rem); line-height: 0.95; margin: 0 0 1.15rem; max-width: min(40rem, 100%); color: var(--font-hand-color, var(--slogan)); letter-spacing: 0.01em; text-align: left; animation: riseIn 1s ease 0.12s both; } .hero__line { display: block; width: max-content; max-width: 100%; margin-left: 0; padding-left: 0; white-space: nowrap; } .hero p { margin: 0 0 1.75rem; color: var(--ink-soft); font-size: 1.05rem; max-width: 34ch; animation: riseIn 1s ease 0.24s both; } .hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.85rem; position: relative; z-index: 2; animation: riseIn 1s ease 0.36s both; } @keyframes heroDrift { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.04) translate3d(-1%, -0.8%, 0); } } @keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.35rem; border: 1px solid transparent; border-radius: 8px; font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .btn:hover { transform: translateY(-1px); } .btn--primary { background: var(--accent); color: var(--on-accent); } .btn--primary:hover { background: var(--accent-dark); color: #fff; } .btn--ghost { background: transparent; border-color: color-mix(in srgb, var(--text-bg) 45%, transparent); color: var(--text-bg); } .btn--ghost:hover { border-color: var(--text-bg); color: #fff; } .btn--ink { background: var(--wood); color: var(--on-accent); } .btn--ink:hover { background: var(--wood-mid); color: #fff; } /* «В корзину» — фирменный hover по акценту */ .btn--cart:hover, .product-item__cart:hover, #addToCart:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 8px 22px var(--accent-glow); } .btn--cart:active, .product-item__cart:active, #addToCart:active { background: var(--accent-dark); border-color: var(--accent-dark); } .btn--line { background: transparent; border-color: var(--ink); color: var(--ink); } .btn--line:hover { background: var(--ink); color: var(--paper); } .btn--brass { background: var(--brass); border-color: var(--brass); color: var(--on-accent); } .btn--brass:hover { background: var(--brass-dark); border-color: var(--brass-dark); color: #fff; } .btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); } /* Sections */ .section { padding: clamp(3.5rem, 8vw, 6rem) 0; } .section__head { display: grid; gap: 0.75rem; margin-bottom: 2.5rem; max-width: 38rem; } .eyebrow { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--moss-dark); margin: 0; } .section h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.1; margin: 0; } .section__head p { margin: 0; color: var(--ink-soft); } /* Product grid */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem); } .product-item { display: grid; gap: 0.85rem; color: inherit; padding: 0.65rem; border-radius: 18px; border: 1px solid transparent; background: transparent; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.4s ease, background 0.35s ease; } .product-item:hover { transform: scale(1.035); border-color: color-mix(in srgb, var(--ink) 16%, transparent); background: color-mix(in srgb, var(--text-bg) 72%, transparent); box-shadow: 0 14px 36px color-mix(in srgb, var(--wood) 12%, transparent); } .product-item__link { display: grid; gap: 0.9rem; text-decoration: none; color: inherit; } .product-item__link:hover { color: inherit; } .product-item__cart { flex-shrink: 0; padding: 0.55rem 1rem; font-size: 0.72rem; } .product-item__buy { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .product-item__media { aspect-ratio: 4 / 5; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--wood) 8%, transparent), transparent 40%), var(--paper-deep); overflow: hidden; position: relative; } .product-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .product-item:hover .product-item__media img { transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .product-item, .product-item__media img { transition: none; } .product-item:hover { transform: none; } .product-item:hover .product-item__media img { transform: none; } } .product-item__meta { display: grid; gap: 0.35rem; } .product-item__meta h3 { font-family: var(--font-display); font-size: 1.45rem; font-weight: 600; margin: 0; line-height: 1.2; } .product-item__meta p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; } .price { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.45rem); font-weight: 600; letter-spacing: 0.02em; color: var(--wood-mid); line-height: 1.2; } /* About strip */ .about-strip { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .about-strip__visual { min-height: 420px; background: linear-gradient(135deg, rgba(42, 31, 22, 0.18), transparent 50%), url("/images/gallery/leaf-box.png") center / cover no-repeat; background-color: var(--wood); } /* Страница «О нас»: круг слева, текст справа */ .about-strip--portrait { grid-template-columns: minmax(14rem, 20rem) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); justify-content: start; } .about-strip--portrait .about-strip__visual { width: min(20rem, 100%); max-width: 20rem; aspect-ratio: 1; min-height: 0; margin: 0 auto; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(28, 23, 18, 0.08), 0 18px 40px rgba(42, 31, 22, 0.16); background-size: cover; background-position: center; } .about-strip--portrait .about-strip__copy { align-content: center; padding-block: 0.25rem; } .about-strip--portrait .about-strip__copy p { max-width: 48ch; } .mood-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; margin-top: 0.5rem; } .mood-strip a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper-deep); text-decoration: none; } .mood-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .mood-strip a:hover img { transform: scale(1.05); } .site-footer__brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.75rem; } .site-footer__brand img { width: 3.4rem; height: 3.4rem; border-radius: 50%; object-fit: cover; } @media (max-width: 800px) { .mood-strip { grid-template-columns: repeat(2, 1fr); } } .about-strip__copy { display: grid; gap: 1rem; padding-block: 1rem; } .about-strip__copy p { margin: 0; color: var(--ink-soft); max-width: 36ch; } .facts { display: grid; gap: 0.85rem; margin-top: 0.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } /* Catalog controls */ .toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2rem; align-items: flex-start; } .filter-stack { display: grid; gap: 0.65rem; flex: 1 1 auto; min-width: min(100%, 18rem); } .filter-row { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; } .filter-row--sub { padding: 0.55rem 0.15rem 0.1rem; border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent); } .filter-row--sub[hidden] { display: none !important; } .chip, .select, .input, .textarea { font: inherit; color: var(--ink); background: color-mix(in srgb, var(--text-bg) 55%, transparent); border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.9rem; } .chip { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; background: transparent; } .chip.is-active, .chip:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .chip--sub { margin-left: 0; padding-inline: 0.8rem; font-size: 0.68rem; opacity: 0.95; } .select, .input { min-width: 12rem; } .textarea { min-height: 8rem; resize: vertical; width: 100%; } /* Product page */ .product-page { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; padding: clamp(2.5rem, 6vw, 4rem) 0; } .product-page__media { background: transparent; aspect-ratio: auto; position: sticky; top: 5.5rem; overflow: visible; display: grid; gap: 0.75rem; } .product-page__media img { width: 100%; height: 100%; object-fit: cover; } .product-carousel { position: relative; width: 100%; display: grid; gap: 0.75rem; touch-action: pan-y pinch-zoom; } .product-carousel__stage { position: relative; aspect-ratio: 4 / 5; background: var(--paper-deep); overflow: hidden; } .product-carousel__viewport { width: 100%; height: 100%; overflow: hidden; } .product-carousel__track { display: flex; height: 100%; transition: transform 0.35s ease; will-change: transform; } .product-carousel__slide { flex: 0 0 100%; width: 100%; height: 100%; } .product-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; } .product-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 2.5rem; height: 2.5rem; border: none; border-radius: 50%; background: rgba(28, 23, 18, 0.55); color: #f7f1e6; cursor: pointer; display: grid; place-items: center; font-size: 1.35rem; line-height: 1; transition: background 0.2s ease, opacity 0.2s ease; } .product-carousel__btn:hover { background: rgba(28, 23, 18, 0.78); } .product-carousel__btn:disabled { opacity: 0.35; cursor: default; } .product-carousel__btn--prev { left: 0.75rem; } .product-carousel__btn--next { right: 0.75rem; } .product-carousel__thumbs { display: flex; gap: 0.55rem; overflow-x: auto; padding: 0.1rem 0.1rem 0.25rem; scrollbar-width: thin; } .product-carousel__thumb { flex: 0 0 4.4rem; width: 4.4rem; height: 4.4rem; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper-deep); cursor: pointer; opacity: 0.72; transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .product-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-carousel__thumb:hover { opacity: 1; } .product-carousel__thumb.is-active { opacity: 1; border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); } .product-carousel--single .product-carousel__btn, .product-carousel--single .product-carousel__thumbs { display: none; } .product-page__info h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.05; margin: 0 0 1rem; } .product-page__info .price { font-size: clamp(1.55rem, 3vw, 1.9rem); margin-bottom: 1.25rem; display: block; } .spec-list { list-style: none; margin: 1.5rem 0; padding: 1.25rem 0; border-block: 1px solid var(--line); display: grid; gap: 0.65rem; } .spec-list li { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; font-size: 0.98rem; } .spec-list strong { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--ink-soft); padding-top: 0.2rem; } /* Forms */ .form-panel { max-width: 40rem; display: grid; gap: 1rem; } .form-row { display: grid; gap: 0.4rem; } .form-row label { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } .form-row--2 { grid-template-columns: 1fr 1fr; gap: 1rem; } .checkbox { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.95rem; color: var(--ink-soft); } .checkbox input { margin-top: 0.3rem; } .form-note, .alert { padding: 0.9rem 1rem; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.4); font-size: 0.95rem; } /* Order page — compact request layout */ .order-page { padding-block: clamp(1.75rem, 4vw, 3rem); } .order-page__grid { display: grid; grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .order-aside__logo { display: block; width: clamp(8.5rem, 18vw, 11.5rem); height: auto; margin: 0 0 1.45rem; object-fit: contain; border-radius: 0; } .order-aside .eyebrow { margin-top: 0.35rem; } .order-aside h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.85rem); font-weight: 600; line-height: 1.05; margin: 0.45rem 0 1rem; color: var(--ink); } .order-aside__lead { margin: 0 0 1.25rem; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.5; max-width: 32ch; } .order-aside__points { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.55rem; } .order-aside__points li { position: relative; padding-left: 1.15rem; font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.35; } .order-aside__points li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); } .order-aside__contacts { display: grid; gap: 0.35rem; padding-top: 1rem; border-top: 1px solid var(--line); } .order-aside__contacts a { color: var(--ink); text-decoration: none; font-size: 0.98rem; } .order-aside__contacts a:hover { color: var(--moss-dark); } .order-form { max-width: none; gap: 0.85rem; padding: clamp(1.15rem, 2.5vw, 1.65rem); background: linear-gradient(165deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px rgba(42, 31, 22, 0.08); } .order-form .form-row { gap: 0.3rem; } .order-form .form-row label { font-size: 0.68rem; } .order-form .label-opt { margin-left: 0.35rem; letter-spacing: 0.04em; text-transform: none; color: var(--ink-soft); font-size: 0.72rem; opacity: 0.85; } .order-form .input, .order-form .textarea { padding: 0.7rem 0.85rem; font-size: 0.95rem; } .order-form .textarea { min-height: 6.5rem; resize: vertical; } .order-form .form-row--2 { gap: 0.75rem; } .order-form__consent { gap: 0.55rem; font-size: 0.86rem; line-height: 1.4; } .order-form__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; margin-top: 0.15rem; } .order-form__actions .btn { min-height: 2.7rem; padding-inline: 1.15rem; } .order-form__note { margin: 0; padding: 0.65rem 0.8rem; font-size: 0.8rem; line-height: 1.4; color: var(--ink-soft); background: rgba(255, 255, 255, 0.28); } .order-form .alert { margin: 0; padding: 0.7rem 0.85rem; font-size: 0.9rem; } @media (max-width: 860px) { .order-page__grid { grid-template-columns: 1fr; gap: 1.25rem; } .order-aside__lead { max-width: none; } .order-aside__points { margin-bottom: 1rem; } } @media (max-width: 560px) { .order-form .form-row--2 { grid-template-columns: 1fr; } .order-form__actions { flex-direction: column; align-items: stretch; } .order-form__actions .btn { width: 100%; justify-content: center; } } .alert--ok { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); } .alert--err { border-color: rgba(139, 58, 47, 0.45); background: rgba(139, 58, 47, 0.1); } /* Reviews */ .reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1.1rem; } .review-card { display: grid; gap: 0.85rem; padding: 1.15rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2)), var(--paper); box-shadow: 0 10px 28px rgba(42, 31, 22, 0.06); } .review-card__head { display: flex; justify-content: space-between; gap: 0.85rem; align-items: flex-start; } .review-card__author { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; } .review-card__product { margin-top: 0.2rem; font-size: 0.88rem; color: var(--ink-soft); } .review-card__meta { display: grid; justify-items: end; gap: 0.25rem; text-align: right; } .review-card__stars { color: var(--brass); letter-spacing: 0.08em; font-size: 0.95rem; } .review-card__date { font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } .review-card__text { margin: 0; line-height: 1.55; color: var(--ink); white-space: pre-wrap; } .reviews-cta { margin-top: 1.35rem; text-align: center; } .reviews-cta a { color: var(--moss-dark); } .order-review { align-self: start; } .order-review__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.35rem); margin: 0.25rem 0 0.5rem; } .order-review__lead { margin: 0 0 1.25rem; color: var(--ink-soft); max-width: 38ch; } .star-rating { display: inline-flex; gap: 0.2rem; } .star-rating__btn { border: 0; background: transparent; padding: 0.15rem; font-size: 1.65rem; line-height: 1; cursor: pointer; color: color-mix(in srgb, var(--ink-soft) 35%, transparent); transition: color 0.15s ease, transform 0.15s ease; } .star-rating__btn.is-active, .star-rating__btn:hover { color: var(--brass); } .star-rating__btn:hover { transform: scale(1.08); } .privacy-box { display: grid; gap: 0.85rem; max-width: 46rem; } .privacy-box li { margin-bottom: 0.5rem; } /* Events page */ .events-page { overflow: clip; } .events-hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.25rem); background: radial-gradient(ellipse 70% 80% at 12% 20%, var(--moss-soft), transparent 55%), radial-gradient(ellipse 55% 70% at 88% 10%, var(--brass-soft), transparent 50%); } .events-hero__inner { max-width: 40rem; } .events-hero h1 { font-family: var(--font-display); font-size: clamp(2.35rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.05; margin: 0.4rem 0 0.9rem; color: var(--ink); } .events-hero__lead { margin: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.55; max-width: 36ch; } .events-section { padding-top: clamp(1.25rem, 3vw, 2rem); } .events-list { display: grid; gap: clamp(2rem, 5vw, 3.5rem); max-width: min(68rem, 100%); width: 100%; margin: 0 auto; } .event-item { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.25rem, 3.5vw, 2.75rem); align-items: center; min-width: 0; max-width: 100%; padding: clamp(1rem, 2.5vw, 1.35rem); border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18)); box-shadow: 0 16px 40px rgba(42, 31, 22, 0.07); animation: eventRise 0.7s ease both; animation-delay: calc(var(--i, 0) * 0.08s); } .event-item--reverse { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } .event-item--reverse .event-item__media { order: 2; } .event-item--reverse .event-item__body { order: 1; } @keyframes eventRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .event-item { animation: none; } } .event-item__media { position: relative; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-deep); border-radius: 14px; border: 1px solid var(--line); } .event-item__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.7s ease; } .event-item:hover .event-item__media img { transform: scale(1.04); } .event-item__media--empty { display: grid; place-items: center; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--wood) 22%, transparent)), var(--wood); } .event-item__media--empty span { font-family: var(--font-hand); font-size: clamp(1.4rem, 3vw, 2rem); color: rgba(247, 243, 234, 0.88); } .event-item__body { display: grid; gap: 0.7rem; align-content: center; padding-block: 0.25rem; } .event-item__badge { display: inline-grid; justify-items: center; gap: 0.05rem; width: fit-content; min-width: 3.6rem; padding: 0.55rem 0.65rem 0.5rem; border-radius: 12px; background: var(--wood); color: #f7f3ea; line-height: 1.05; box-shadow: 0 8px 18px rgba(42, 31, 22, 0.18); } .event-item__badge-day { font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; } .event-item__badge-month, .event-item__badge-year { font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; } .event-item__body h2 { font-family: var(--font-display); font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 600; margin: 0; line-height: 1.15; color: var(--ink); } .event-item__body p { margin: 0; color: var(--ink-soft); } .event-item__date { font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--moss-dark) !important; } .event-item__place { display: grid; gap: 0.15rem; font-size: 0.95rem; color: var(--ink) !important; } .event-item__place span { font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--moss-dark); } .event-item__lead { font-size: 1.02rem; line-height: 1.5; max-width: 38ch; } .event-item__desc { font-size: 0.95rem; line-height: 1.55; white-space: pre-wrap; max-width: 42ch; opacity: 0.92; } .event-item__actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.35rem; } .event-item__actions .btn { min-height: 2.55rem; padding: 0.65rem 1.05rem; } .events-empty { display: grid; gap: 0.75rem; justify-items: start; max-width: 28rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem); border: 1px dashed var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.28); text-align: left; } .events-empty h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0; } .events-empty p { margin: 0; color: var(--ink-soft); } .events-empty .btn { margin-top: 0.5rem; } @media (max-width: 860px) { .event-item, .event-item--reverse { grid-template-columns: 1fr; } .event-item--reverse .event-item__media, .event-item--reverse .event-item__body { order: initial; } .event-item__media { aspect-ratio: 16 / 10; } .events-hero__lead { max-width: none; } } .gallery-page__head p { max-width: 42ch; } .gallery-root { margin-top: 1.25rem; } .gallery-showcase { position: relative; } .gallery-masonry { column-count: 3; column-gap: 1rem; } .gallery-card { break-inside: avoid; margin: 0 0 1rem; position: relative; overflow: hidden; background: var(--wood); border-radius: 2px; opacity: 0; transform: translateY(18px); animation: galleryCascadeIn 0.7s ease forwards; animation-delay: var(--gallery-delay, 0ms); } .gallery-card--tone-2 .gallery-card__img, .gallery-card--tone-4 .gallery-card__img { filter: saturate(0.92) contrast(1.03); } .gallery-card__frame { margin: 0; position: relative; cursor: zoom-in; overflow: hidden; } .gallery-card__img { width: 100%; height: auto; display: block; object-fit: cover; transform: scale(1.01); transition: transform 0.85s ease, filter 0.55s ease; } .gallery-card__meta { position: absolute; inset: auto 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.85rem; padding: 3.5rem 1rem 1rem; background: linear-gradient( 180deg, transparent 0%, color-mix(in srgb, var(--wood) 55%, transparent) 42%, color-mix(in srgb, var(--wood) 88%, #000) 100% ); color: var(--on-accent, #f7f3ea); opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; } .gallery-card__copy { display: grid; gap: 0.28rem; min-width: 0; } .gallery-card__title { margin: 0; font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.15; color: inherit; } .gallery-card__category { margin: 0; font-family: var(--font-ui); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in srgb, var(--brass) 70%, #fff); } .gallery-card__link, .gallery-card__hint { flex: 0 0 auto; font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--brass) 55%, transparent); padding-bottom: 0.15rem; pointer-events: auto; white-space: nowrap; } .gallery-card__link:hover { color: #fff; border-bottom-color: #fff; } .gallery-card__hint { opacity: 0.72; border-bottom-color: transparent; } .gallery-card:hover .gallery-card__img, .gallery-card:focus-within .gallery-card__img { transform: scale(1.05); } .gallery-card:hover .gallery-card__meta, .gallery-card:focus-within .gallery-card__meta { opacity: 1; transform: translateY(0); } @keyframes galleryCascadeIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .gallery-card { opacity: 1; transform: none; animation: none; } .gallery-card__img, .gallery-card__meta { transition: none; } } .gallery-lightbox[hidden] { display: none !important; } .gallery-lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1.2rem; } .gallery-lightbox__backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.82); backdrop-filter: blur(6px); } .gallery-lightbox__dialog { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; width: min(96vw, 1420px); } .gallery-lightbox__figure { margin: 0; display: grid; gap: 0.9rem; } .gallery-lightbox__media { position: relative; width: 100%; height: min(82vh, 78vw); min-height: 280px; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); } .gallery-lightbox__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: blur(28px) brightness(0.52) saturate(1.08); transform: scale(1.12); pointer-events: none; user-select: none; } .gallery-lightbox__img { position: relative; z-index: 1; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; display: block; } .gallery-lightbox__thumbs { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.15rem 0.1rem; scrollbar-width: thin; } .gallery-lightbox__thumbs[hidden] { display: none !important; } .gallery-lightbox__thumb { flex: 0 0 4.2rem; width: 4.2rem; height: 4.2rem; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.08); cursor: pointer; opacity: 0.65; transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .gallery-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-lightbox__thumb:hover { opacity: 1; } .gallery-lightbox__thumb.is-active { opacity: 1; border-color: rgba(247, 243, 234, 0.9); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(247, 243, 234, 0.35); } .gallery-lightbox__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1rem; color: #f7f3ea; } .gallery-lightbox__title { font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.5rem); } .gallery-lightbox__link { color: #f7f3ea; text-decoration: none; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid rgba(247, 243, 234, 0.5); } .gallery-lightbox__link:hover { border-bottom-color: #fff; } .gallery-lightbox__close, .gallery-lightbox__nav { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: #fff; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); } .gallery-lightbox__close { position: absolute; top: -0.35rem; right: 0; z-index: 2; width: 2.8rem; height: 2.8rem; font-size: 1.6rem; } .gallery-lightbox__nav { width: 3rem; height: 3rem; font-size: 1.7rem; } .gallery-lightbox__close:hover, .gallery-lightbox__nav:hover { background: rgba(255, 255, 255, 0.16); } body.lightbox-open { overflow: hidden; } @media (max-width: 800px) { .gallery-masonry { column-count: 2; column-gap: 0.75rem; } .gallery-card { margin-bottom: 0.75rem; } .gallery-card__meta { opacity: 1; transform: none; padding: 2.6rem 0.8rem 0.8rem; } .gallery-lightbox__dialog { grid-template-columns: 1fr; gap: 0.75rem; } .gallery-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .gallery-lightbox__nav--prev { left: 0.35rem; } .gallery-lightbox__nav--next { right: 0.35rem; } } @media (max-width: 560px) { .gallery-masonry { column-count: 1; } } /* Cart */ .cart-empty { display: grid; gap: 1.25rem; justify-items: start; } .cart-list { display: grid; gap: 0; border-top: 1px solid var(--line); } .cart-row { display: grid; grid-template-columns: 6.5rem 1.4fr auto auto auto; gap: 1rem; align-items: center; padding: 1.15rem 0; border-bottom: 1px solid var(--line); } .cart-row__media { aspect-ratio: 1; background: var(--paper-deep); overflow: hidden; } .cart-row__media img { width: 100%; height: 100%; object-fit: cover; } .cart-row__info h3 { font-family: var(--font-display); font-size: 1.35rem; margin: 0 0 0.35rem; font-weight: 600; line-height: 1.2; } .cart-row__info a { text-decoration: none; } .cart-row__info a:hover { color: var(--moss-dark); } .cart-row__qty { display: inline-flex; align-items: center; border: 1px solid var(--line); } .qty-btn { width: 2.2rem; height: 2.2rem; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--ink); } .cart-row__qty input { width: 2.6rem; height: 2.2rem; border: 0; border-inline: 1px solid var(--line); text-align: center; background: transparent; font: inherit; color: var(--ink); } .cart-row__sum { min-width: 6.5rem; text-align: right; } .cart-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: end; padding-top: 2rem; } .cart-total { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0.2rem 0; line-height: 1; } .muted-note { margin: 0; color: var(--ink-soft); font-size: 0.9rem; } .cart-footer__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .product-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .toast { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; padding: 0.85rem 1.1rem; background: var(--wood); color: var(--on-accent); font-family: var(--font-ui); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; transform: translateY(120%); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; } .toast.is-visible { transform: translateY(0); opacity: 1; } .site-confirm[hidden] { display: none !important; } .site-confirm { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 1rem; } .site-confirm__backdrop { position: absolute; inset: 0; background: rgba(20, 16, 12, 0.58); backdrop-filter: blur(8px); } .site-confirm__card { position: relative; z-index: 1; width: min(92vw, 32rem); display: grid; gap: 0.95rem; padding: 1.35rem; border: 1px solid color-mix(in srgb, var(--brass) 28%, var(--line)); border-radius: 22px; background: radial-gradient(circle at top right, color-mix(in srgb, var(--brass) 12%, transparent), transparent 42%), linear-gradient(180deg, color-mix(in srgb, var(--surface-top) 86%, transparent), var(--surface)), var(--paper); box-shadow: 0 26px 70px color-mix(in srgb, var(--wood) 18%, transparent); text-align: center; } .site-confirm__eyebrow { margin: 0; font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .site-confirm__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.1; color: var(--ink); } .site-confirm__text { margin: 0; color: var(--ink-soft); } .site-confirm__actions { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.35rem; } body.confirm-open { overflow: hidden; } @media (max-width: 800px) { .cart-row { grid-template-columns: 5rem 1fr; grid-template-areas: "media info" "media qty" "sum remove"; } .cart-row__media { grid-area: media; } .cart-row__info { grid-area: info; } .cart-row__qty { grid-area: qty; justify-self: start; } .cart-row__sum { grid-area: sum; text-align: left; } .cart-row__remove { grid-area: remove; justify-self: end; } } /* Footer */ .site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; margin-top: 2rem; background: rgba(42, 31, 22, 0.04); } .site-footer__inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; } .site-footer h3 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 0.75rem; } .site-footer p, .site-footer a { color: var(--ink-soft); margin: 0 0 0.4rem; text-decoration: none; display: block; } .site-footer a:hover { color: var(--ink); } .site-footer__copy { font-family: var(--font-ui); margin: 1.5rem 0 0; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); } margin: 1.75rem 0 0 !important; padding-top: 1.15rem; border-top: 1px solid var(--line); font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); text-align: center; } /* Empty / loading */ .state-msg { color: var(--ink-soft); font-style: italic; padding: 2rem 0; } /* Responsive */ @media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } .about-strip, .product-page, .site-footer__inner, .form-row--2 { grid-template-columns: 1fr; } .about-strip--portrait { grid-template-columns: 1fr; justify-items: center; text-align: left; } .about-strip--portrait .about-strip__visual { width: min(16rem, 72vw); max-width: 16rem; } .about-strip--portrait .about-strip__copy { width: 100%; } .product-page__media { position: static; } .product-carousel__stage { aspect-ratio: 1; } } @media (max-width: 680px) { .site-header__inner { justify-content: space-between; flex-wrap: wrap; } .site-search { order: 3; flex: 1 1 100%; width: 100%; max-width: none; margin: 0.15rem 0 0; } .site-search__results { min-width: 0; left: 0; right: 0; } .brand { animation: none; } .header-actions { display: inline-flex; } .nav-cart--menu { display: none; } .brand__logo { display: none; } .brand__text { display: grid; min-width: 0; } .brand__tag { display: none; } .brand [data-bind="brandName"] { display: inline-block; min-height: 1.1em; font-family: var(--font-slavic); font-size: 1.4rem; font-weight: 400; letter-spacing: 0.04em; white-space: nowrap; } .brand [data-bind="brandName"].is-typing::after { content: ""; display: inline-block; width: 0.08em; height: 0.9em; margin-left: 0.12em; vertical-align: -0.05em; background: var(--wood-mid, #6b5344); animation: brandCaret 0.7s step-end infinite; } .nav-toggle { display: inline-flex; } .nav-drawer { display: block; position: fixed; inset: 0; z-index: 120; pointer-events: none; visibility: hidden; } .nav-drawer.is-open { pointer-events: auto; visibility: visible; } .nav-drawer__backdrop { position: absolute; inset: 0; background: var(--ink-overlay-strong); opacity: 0; transition: opacity 0.3s ease; } .nav-drawer.is-open .nav-drawer__backdrop { opacity: 1; } .nav-drawer__panel { position: absolute; top: 0; right: 0; left: auto; bottom: 0; width: min(17.5rem, 82vw); max-width: 100%; background: var(--text-bg); box-shadow: -12px 0 40px color-mix(in srgb, var(--ink) 22%, transparent); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s ease; overflow: hidden; } .nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); } .nav-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); flex-shrink: 0; } .nav-drawer__head h2 { font-family: var(--font-display); font-size: 1.55rem; margin: 0; font-weight: 600; line-height: 1; } .nav-drawer__close { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border: 1px solid var(--line); background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; } .nav-drawer__body { overflow: auto; -webkit-overflow-scrolling: touch; padding: 0.35rem 0 1.75rem; flex: 1; min-height: 0; } .nav-drawer .nav { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; width: 100%; height: auto; margin: 0; padding: 0 1.25rem; overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: inherit; } .nav-drawer .nav a { display: block; width: 100%; height: auto; margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--line); line-height: 1.3; white-space: nowrap; color: var(--ink); justify-content: flex-start; } .nav-drawer .nav a.is-lit, .nav-drawer .nav a:hover { color: var(--accent-dark); } .nav-drawer .nav a:last-child { border-bottom: 0; } .nav-drawer .nav__lamp { display: none; } .nav-drawer .nav-cart, .nav-drawer .nav-cart--menu { display: none !important; } body.nav-open { overflow: hidden; } body.nav-open .site-header { z-index: 1; } .product-grid { grid-template-columns: 1fr; } .hero { align-items: end; } .hero__logo { width: min(14rem, 58vw); margin: 0 auto 1.15rem; } .hero h1 { font-size: clamp(1.55rem, 6.2vw, 2.1rem); line-height: 0.95; } .hero__media { background-position: center center !important; background-size: cover !important; opacity: 0.8; } .hero__media::after { background: linear-gradient( 180deg, rgba(247, 241, 230, 0.55) 0%, rgba(247, 241, 230, 0.82) 42%, rgba(247, 241, 230, 0.96) 100% ); } } /* Optional admin-controlled font role colors */ h2, h3, .section-title, .product-card__title, .page-title, .catalog-intro__title { color: var(--font-display-color, var(--ink)); } .footer a, .chip, .site-search__input, .btn--ghost { color: var(--font-ui-color, inherit); }