/* ========================================================================== Shop theme — the whole look in one file (WooCommerce's own CSS is off). Brand = the tokens in :root. A second shop changes tokens, not rules. Mobile first. Display: Unbounded; text: Onest. Motion respects the reduced-motion setting; reveal animations only run when JS is on. ========================================================================== */ @font-face { font-family: "Unbounded"; font-weight: 400 900; font-display: swap; src: url(../fonts/unbounded-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Unbounded"; font-weight: 400 900; font-display: swap; src: url(../fonts/unbounded-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Unbounded"; font-weight: 400 900; font-display: swap; src: url(../fonts/unbounded-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Onest"; font-weight: 400 800; font-display: swap; src: url(../fonts/onest-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Onest"; font-weight: 400 800; font-display: swap; src: url(../fonts/onest-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Onest"; font-weight: 400 800; font-display: swap; src: url(../fonts/onest-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Fallbacks sized like the brand fonts (measured: Unbounded is 128.8 % of Arial's width, Onest 102 %), so the swap to the web font no longer re-wraps headings and shifts the page (CLS on product pages). */ @font-face { font-family: "Unbounded fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); size-adjust: 128.8%; } @font-face { font-family: "Onest fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 102%; } :root { --paper: #f3efe8; --paper-2: #e9e3d8; --white: #fffdf9; --ink: #141210; --ink-2: #2d2925; --muted: #67605a; /* 5.4:1 on paper */ --line: rgb(20 18 16 / 0.12); --coral: #ff5b3a; /* fills only: ink text on it 6.9:1, on ink 6.1:1; on cream just 2.7:1 */ --coral-deep: #c33b20; /* text & graphics on cream: 4.6:1 (AA), on white 5.1:1 */ --coral-soft: #ffd9cf; --lilac: #c9b6ff; /* fills only: on cream just 1.7:1 */ --lilac-deep: #6d4fd8; /* graphics on cream: 4.8:1 */ --mint: #bde5d2; --butter: #ffe38a; --danger: #c0271c; --ok: #1f7a4d; --focus: #2f5bff; --display: "Unbounded", "Unbounded fallback", "Onest", system-ui, sans-serif; --text: "Onest", "Onest fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem); --fs-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); --fs-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem); --fs-2: clamp(1.45rem, 1.25rem + 0.9vw, 2rem); --fs-3: clamp(1.9rem, 1.5rem + 1.9vw, 3.1rem); --fs-4: clamp(2.5rem, 1.6rem + 4.4vw, 5.6rem); --s-1: 0.5rem; --s-2: 1rem; --s-3: clamp(1.25rem, 1rem + 1vw, 1.9rem); --s-4: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); --s-5: clamp(3.5rem, 2.2rem + 5vw, 7rem); --r-sm: 12px; --r: 22px; --r-lg: clamp(24px, 3vw, 36px); --shadow: 0 1px 1px rgb(20 18 16 / 0.04), 0 12px 32px -14px rgb(20 18 16 / 0.28); --shadow-lg: 0 2px 4px rgb(20 18 16 / 0.05), 0 32px 60px -24px rgb(20 18 16 / 0.42); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --container: 1320px; --header-h: 4.25rem; } /* --- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-0)/1.6 var(--text); -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } h1, h2, h3, h4 { margin: 0 0 0.5em; font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; } h1 { font-size: var(--fs-3); } h2 { font-size: var(--fs-2); } h3 { font-size: var(--fs-1); } p { margin: 0 0 1em; text-wrap: pretty; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--coral); color: var(--ink); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; } .icon { width: 1.35em; height: 1.35em; flex: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 200; padding: 0.8rem 1.1rem; border-radius: var(--r-sm); background: var(--ink); color: var(--paper); } .skip-link:focus { top: 1rem; } .site-main:focus { outline: none; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 16px; } @media (min-width: 768px) { .container { padding-inline: 32px; } } /* --- Buttons, badges, chips -------------------------------------------- */ .button, .wp-element-button, .wc-block-components-button:not(.is-link) { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 50px; padding: 0.75em 1.45em; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 var(--fs-0)/1.15 var(--text); text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .2s, color .2s, box-shadow .25s; } .button:hover, .wp-element-button:hover, .wc-block-components-button:not(.is-link):hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--paper); background: var(--ink-2); } .button:active { transform: translateY(0); } .button .icon { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); } .button:hover .icon--arrow { transform: translateX(3px); } .button--coral { background: var(--coral); border-color: var(--coral); color: var(--ink); } .button--coral:hover { background: #ff7255; color: var(--ink); } .button--ghost { background: transparent; color: var(--ink); } .button--ghost:hover { background: var(--ink); color: var(--paper); } .button--large { min-height: 58px; padding-inline: 1.8em; font-size: var(--fs-1); } .button.disabled, .button:disabled { opacity: 0.5; } /* truly inactive controls are exempt from contrast (WCAG 1.4.3) */ /* «В кошик» before a size is chosen still works — it asks for the size — so it keeps full colour. */ .button.wc-variation-selection-needed { opacity: 1; } .badge { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.4em 0.95em; border-radius: 999px; background: var(--white); border: 1px solid var(--line); font-weight: 600; font-size: var(--fs--1); } .badge__dot { width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgb(255 91 58 / 0.6); animation: pulse 2.2s infinite; } .badge--light { background: rgb(255 253 249 / 0.9); border: 0; } .count-dot { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.35rem; border-radius: 999px; background: var(--coral); color: var(--ink); font-size: 0.78rem; font-weight: 700; } .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; } .link-arrow .icon { width: 1em; height: 1em; transition: transform .25s var(--ease); } .link-arrow:hover .icon { transform: translateX(4px); } .icon-btn { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background-color .2s; } .icon-btn:hover { background: var(--paper-2); } /* --- Ticker ------------------------------------------------------------- */ .ticker { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); font-size: var(--fs--1); font-weight: 500; } .ticker__track { display: flex; width: max-content; animation: ticker 90s linear infinite; } .ticker:hover .ticker__track, .ticker:focus-within .ticker__track, .ticker.is-paused .ticker__track { animation-play-state: paused; } .ticker__pause { display: none; } .js .ticker__pause { position: absolute; right: 6px; top: 50%; translate: 0 -50%; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); box-shadow: -16px 0 14px var(--ink); cursor: pointer; } .ticker__pause .icon { width: 16px; height: 16px; } .ticker__pause .icon--play, .ticker__pause[aria-pressed="true"] .icon--pause { display: none; } .ticker__pause[aria-pressed="true"] .icon--play { display: block; fill: currentColor; } .ticker__list { display: flex; margin: 0; padding: 0.55rem 0; list-style: none; } .ticker__list li { display: flex; align-items: center; gap: 2.2rem; padding-right: 2.2rem; white-space: nowrap; } .ticker__list li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); } @keyframes ticker { to { transform: translateX(-50%); } } /* --- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 60; background: rgb(243 239 232 / 0.82); backdrop-filter: saturate(1.5) blur(14px); transition: box-shadow .3s; } .site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgb(20 18 16 / 0.35); } .site-header__bar { display: flex; align-items: center; gap: 0.5rem; min-height: var(--header-h); } .site-header__logo { flex-shrink: 0; } .site-header__toggle { margin-left: -10px; } .burger { position: relative; display: grid; gap: 6px; width: 22px; } .burger span { height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease); } .nav-open .burger span:first-child { transform: translateY(4px) rotate(45deg); } .nav-open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); } .site-header__logo { display: block; color: var(--ink); text-decoration: none; } .logo { display: block; width: auto; height: 2.85rem; color: var(--ink); transition: transform .4s var(--ease); } .site-header__logo:hover .logo { transform: translateY(-2px) rotate(-2deg); } .site-header__tools { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; } .site-cart { position: relative; } .site-cart__count { position: absolute; top: 3px; right: 1px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--coral); color: var(--ink); font-size: 0.72rem; font-weight: 800; line-height: 20px; text-align: center; } .site-cart__count[data-count="0"] { display: none; } .site-cart__count.bump { animation: bump .5s var(--ease); } .site-nav { position: fixed; inset: var(--nav-top, var(--header-h)) 0 0; z-index: 55; padding: var(--s-3) 16px var(--s-5); background: var(--paper); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-10px); transition: opacity .25s, transform .25s var(--ease), visibility 0s .25s; } .nav-open { overflow: hidden; } .nav-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s var(--ease); } .site-nav__list { margin: 0; padding: 0; list-style: none; } .site-nav__link { display: block; padding: 0.9rem 0 0.6rem; font: 600 var(--fs-2)/1.1 var(--display); letter-spacing: -0.03em; text-decoration: none; } .site-nav__sub { margin: 0 0 0.75rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .site-nav__sub a { display: inline-flex; gap: 0.4em; padding: 0.45rem 0.85rem; border-radius: 999px; background: var(--white); text-decoration: none; font-size: var(--fs--1); } .site-nav__sub a span { color: var(--muted); } .site-nav__all a { background: none; font-weight: 600; } .site-nav__more { display: none; } @media (min-width: 1280px) { .site-header__toggle { display: none; } .site-nav { position: static; inset: auto; visibility: visible; opacity: 1; transform: none; padding: 0; background: none; overflow: visible; margin-left: 1rem; } .site-nav__list { display: flex; gap: 0.15rem; } .site-nav__item { position: relative; display: flex; align-items: center; } .site-nav__item.has-sub > .site-nav__link { padding-right: 0.3rem; } .site-nav__more { display: grid; place-items: center; width: 28px; height: 28px; margin-right: 0.35rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; } .site-nav__more:hover { background: var(--paper-2); } .site-nav__more .icon { width: 16px; height: 16px; transition: rotate .25s var(--ease); } .site-nav__more[aria-expanded="true"] .icon { rotate: 180deg; } .site-nav__link { padding: 0.6rem 0.8rem; border-radius: 999px; font: 500 var(--fs-0)/1.2 var(--text); letter-spacing: 0; transition: background-color .2s; } .site-nav__item:hover > .site-nav__link, .site-nav__item:focus-within > .site-nav__link { background: var(--white); } .site-nav__sub { position: absolute; top: calc(100% + 10px); left: 0; display: grid; gap: 2px; min-width: 17rem; margin: 0; padding: 0.6rem; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top left; transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; } .site-nav__sub::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; } .site-nav__item:hover > .site-nav__sub, .site-nav__item.is-open > .site-nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .25s var(--ease); } .site-nav__item.is-dismissed:not(.is-open) > .site-nav__sub { opacity: 0; visibility: hidden; } .site-nav__sub a { display: flex; justify-content: space-between; padding: 0.6rem 0.8rem; border-radius: var(--r-sm); background: none; font-size: var(--fs-0); } .site-nav__sub a:hover { background: var(--paper); } .site-nav__all { margin-top: 0.25rem; border-top: 1px solid var(--line); padding-top: 0.25rem; } /* Labels never break: a two-line «Жіноче / взуття» doubles the bar. Where it would not fit, the bar falls back to the menu button (see the breakpoint above). */ .site-nav__link, .my-size-btn { white-space: nowrap; } .site-nav__item, .site-header__tools > * { flex-shrink: 0; } } /* Where the menu slides out, the header has no blur: backdrop-filter makes the header the containing block of its fixed children, and the menu panel was clipped to the header's height. */ @media (max-width: 1279px) { .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); } } /* --- Hero ---------------------------------------------------------------- */ .hero { position: relative; padding-block: var(--s-4) var(--s-5); overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; z-index: -1; width: 60vmax; height: 60vmax; right: -18vmax; top: -22vmax; border-radius: 50%; background: radial-gradient(closest-side, rgb(201 182 255 / 0.55), transparent); filter: blur(10px); animation: drift 18s ease-in-out infinite alternate; } .hero::after { content: ""; position: absolute; z-index: -1; width: 46vmax; height: 46vmax; left: -20vmax; bottom: -26vmax; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 91 58 / 0.22), transparent); animation: drift 22s ease-in-out infinite alternate-reverse; } .hero__inner { display: grid; gap: var(--s-4); align-items: center; } .hero__title { margin: 1.1rem 0 1.25rem; font-size: var(--fs-4); font-weight: 600; line-height: 0.98; letter-spacing: -0.055em; } .hero__title em { position: relative; font-style: normal; color: var(--coral-deep); white-space: nowrap; } .hero__title em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 0.18em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c18-6 34-6 52 0s36 6 64-2' fill='none' stroke='%23141210' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } .hero__pill { display: inline-block; width: 1.9em; height: 0.82em; margin-inline: 0.05em; vertical-align: 0.02em; overflow: hidden; border-radius: 999px; transform: rotate(-4deg); box-shadow: var(--shadow); } .hero__pill img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; } .hero__lead { max-width: 34rem; color: var(--muted); font-size: var(--fs-1); } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--s-3); } .hero__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.5rem clamp(1.25rem, 3vw, 2.5rem); margin: var(--s-4) 0 0; } .hero__facts dt { font: 600 var(--fs-2)/1 var(--display); letter-spacing: -0.04em; } .hero__facts dd { margin: 0.35rem 0 0; color: var(--muted); font-size: var(--fs--1); } .hero__scene { perspective: 1400px; } .hero__stage { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); } .layer { transform: translateZ(var(--z, 0)); } .hero__photo { overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } .hero__photo img { width: 100%; height: 100%; object-fit: cover; animation: zoom-in 1.6s var(--ease) both; } .float-card { position: absolute; display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; width: min(16rem, 62%); padding: 0.6rem 0.9rem 0.6rem 0.6rem; border-radius: 20px; background: rgb(255 253 249 / 0.92); backdrop-filter: blur(10px); box-shadow: var(--shadow-lg); text-decoration: none; color: var(--ink); animation: float 6s ease-in-out infinite; } .float-card img { grid-row: 1 / 3; width: 64px; height: 64px; object-fit: cover; border-radius: 14px; } .float-card__name { font-weight: 600; font-size: var(--fs--1); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .float-card__price { font: 600 var(--fs-0)/1.2 var(--display); } .float-card--1 { left: -6%; bottom: 12%; } .float-card--2 { right: -5%; top: 8%; animation-delay: -3s; } .sticker { position: absolute; right: 6%; bottom: -5%; width: clamp(96px, 11vw, 132px); filter: drop-shadow(0 18px 24px rgb(20 18 16 / 0.25)); } .sticker text { font: 700 11.5px var(--text); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--ink); } .sticker > text { transform-origin: 60px 60px; animation: spin 16s linear infinite; } .sticker .sticker__sign { font: 800 27px var(--text); letter-spacing: 0; text-transform: none; fill: var(--ink); } .sticker__coin { transform-origin: 60px 60px; animation: coin-flip 4s var(--ease) infinite; } @keyframes coin-flip { 0%, 76% { transform: scaleX(1); } 82% { transform: scaleX(0.05); } 88%, 100% { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .sticker__coin { animation: none; } } @media (min-width: 960px) { .hero__inner { grid-template-columns: 1.05fr 0.95fr; } .hero__scene { padding: 2rem 2.5rem 2rem 1rem; } } @media (max-width: 959px) { .float-card--1 { left: 3%; bottom: 6%; } .float-card--2 { right: 3%; top: 4%; } } /* --- Sections ----------------------------------------------------------- */ .section { margin-block: var(--s-5); } .section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: var(--s-3); } .section__title { margin: 0; font-size: var(--fs-3); } .cat-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; } .cat-cards > li { scroll-snap-align: start; } @media (min-width: 720px) { .cat-cards { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; overflow: visible; } } .cat-card { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--paper-2); color: var(--white); text-decoration: none; isolation: isolate; transform-style: preserve-3d; } .cat-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .cat-card::after { content: ""; position: absolute; inset: 30% 0 0; z-index: -1; background: linear-gradient(rgb(20 18 16 / 0), rgb(20 18 16 / 0.35) 35%, rgb(20 18 16 / 0.88)); } .cat-card:hover img { transform: scale(1.07); } .cat-card__body { position: absolute; inset: auto 0 0; display: grid; gap: 0.2rem; text-shadow: 0 1px 12px rgb(20 18 16 / 0.5); padding: clamp(1.1rem, 2.5vw, 1.75rem); padding-right: calc(52px + clamp(1.6rem, 3.5vw, 2.5rem)); } .cat-card__count { order: -1; font-size: var(--fs--1); font-weight: 500; } .cat-card__name { font: 600 var(--fs-2)/1.05 var(--display); letter-spacing: -0.04em; } .cat-card__go { position: absolute; right: clamp(1.1rem, 2.5vw, 1.75rem); bottom: clamp(1.1rem, 2.5vw, 1.75rem); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--white); color: var(--ink); transition: transform .4s var(--ease), background-color .2s; } .cat-card:hover .cat-card__go { transform: rotate(-45deg); background: var(--coral); } .promo { position: relative; display: grid; min-height: clamp(20rem, 38vw, 30rem); overflow: hidden; border-radius: var(--r-lg); text-decoration: none; color: var(--ink); isolation: isolate; } .promo__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .promo:hover .promo__bg { transform: scale(1.04); } .promo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(243 239 232 / 0.94) 0%, rgb(243 239 232 / 0.75) 38%, transparent 70%); } .promo__body { display: grid; align-content: center; justify-items: start; gap: 1rem; padding: clamp(1.5rem, 5vw, 4rem); max-width: 40rem; } .promo__title { font: 600 var(--fs-3)/1 var(--display); letter-spacing: -0.045em; } .type-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .type-cloud a { display: inline-flex; align-items: flex-start; gap: 0.3em; padding: 0.65em 1.2em; border: 1.5px solid var(--ink); border-radius: 999px; font: 500 var(--fs-1)/1.1 var(--display); letter-spacing: -0.03em; text-decoration: none; transition: background-color .2s, color .2s, transform .25s var(--ease); } .type-cloud a:hover { background: var(--coral); border-color: var(--coral); transform: translateY(-3px) rotate(-1.5deg); } .type-cloud sup { font: 600 0.62em var(--text); color: var(--muted); } .promises { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } @media (min-width: 768px) { .promises { grid-template-columns: repeat(3, 1fr); } } .promises__item { display: grid; gap: 1rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--r-lg); background: var(--lilac); } .promises__item:nth-child(2) { background: var(--mint); } .promises__item:nth-child(3) { background: var(--butter); } .promises__item .icon { width: 2.6rem; height: 2.6rem; padding: 0.55rem; border-radius: 50%; background: var(--ink); color: var(--paper); } .promises__item strong { display: block; margin-bottom: 0.35rem; font: 600 var(--fs-1)/1.15 var(--display); letter-spacing: -0.03em; } .promises__text { color: var(--ink-2); } .promises--compact { grid-template-columns: 1fr; gap: 0; margin: var(--s-3) 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); } .promises--compact .promises__item { grid-template-columns: auto 1fr; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: 0; background: none; } .promises--compact .promises__item + .promises__item { border-top: 1px solid var(--line); } .promises--compact .icon { width: 2.2rem; height: 2.2rem; padding: 0.45rem; background: var(--paper); color: var(--ink); } .promises--compact strong { margin: 0; font: 600 var(--fs-0)/1.3 var(--text); letter-spacing: 0; } .size-help { display: grid; gap: var(--s-3); padding: clamp(1.75rem, 5vw, 4rem); border-radius: var(--r-lg); background: var(--ink); color: var(--paper); } .size-help .section__title { margin-bottom: 1rem; color: var(--paper); } .size-help__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--coral); color: var(--ink); } .size-help__icon .icon { width: 2rem; height: 2rem; } .steps { display: grid; gap: 0.6rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: s; } .steps li { position: relative; padding-left: 2.6rem; counter-increment: s; color: #ddd6cd; } .steps li::before { content: counter(s); position: absolute; left: 0; top: -0.1em; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; border: 1.5px solid currentColor; font: 600 0.85rem var(--display); color: var(--paper); } @media (min-width: 768px) { .size-help { grid-template-columns: auto 1fr; } } /* --- Product cards ------------------------------------------------------ */ ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(10px, 1.5vw, 20px); margin: 0; padding: 0; list-style: none; } @media (min-width: 900px) { ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } ul.products::before, ul.products::after { display: none; } li.product { position: relative; min-width: 0; } li.product .woocommerce-LoopProduct-link { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; } .card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 1; margin-bottom: 0.85rem; border-radius: var(--r); background: var(--white); transform: translateZ(0); } .card__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .45s var(--ease), transform .8s var(--ease); } .card__img--alt { position: absolute; inset: 0; opacity: 0; } li.product:hover .card__img { transform: scale(1.05); } li.product:hover .card__img--alt { opacity: 1; } .card__tag { position: absolute; left: 10px; top: 10px; padding: 0.3em 0.7em; border-radius: 999px; background: rgb(255 253 249 / 0.9); backdrop-filter: blur(6px); font-size: 0.75rem; font-weight: 600; } li.product .woocommerce-loop-product__title { margin: 0 0 0.3rem; font: 500 var(--fs-0)/1.35 var(--text); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .card__sizes { order: 3; margin: 0.2rem 0 0; color: var(--muted); font-size: var(--fs--1); } li.product .price { order: 2; font: 600 var(--fs-1)/1.2 var(--display); letter-spacing: -0.03em; } .price del { color: var(--muted); font-weight: 400; margin-right: 0.35em; } .price ins { text-decoration: none; color: var(--coral-deep); } li.product .button, li.product .added_to_cart { display: none; } /* --- Catalog ----------------------------------------------------------- */ .shop-page { padding-block: var(--s-3) var(--s-5); } .crumbs { margin-bottom: var(--s-2); color: var(--muted); font-size: var(--fs--1); } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); text-decoration: underline; } .crumbs__sep { margin-inline: 0.5em; opacity: 0.5; } .catalog-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-bottom: var(--s-3); } .catalog-head__title { margin: 0; font-size: var(--fs-4); letter-spacing: -0.055em; } .catalog-head__count { margin: 0; color: var(--muted); } .catalog-head__desc { flex-basis: 100%; max-width: 65ch; color: var(--muted); } .subcats ul { display: flex; gap: 8px; margin: 0 0 var(--s-3); padding: 0 0 4px; list-style: none; overflow-x: auto; scrollbar-width: none; } .chip-link { display: inline-flex; gap: 0.45em; padding: 0.6em 1.05em; border-radius: 999px; background: var(--white); text-decoration: none; white-space: nowrap; font-weight: 500; transition: background-color .2s, color .2s; } .chip-link span { color: var(--muted); } .chip-link:hover { background: var(--ink); color: var(--paper); } .chip-link:hover span { color: #bdb4aa; } .catalog { display: grid; gap: var(--s-3); } .catalog__main { min-width: 0; } .catalog__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.75rem; margin-bottom: var(--s-2); } .catalog__filter-btn { min-height: 46px; } .woocommerce-ordering { margin: 0; } .woocommerce-ordering select { min-height: 46px; padding: 0.4rem 2.5rem 0.4rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141210' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 1rem; appearance: none; cursor: pointer; } .active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--s-3); padding: 0; list-style: none; } .active-filters a { display: inline-flex; align-items: center; gap: 0.5em; min-height: 40px; padding: 0.45em 0.95em; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: var(--fs--1); font-weight: 500; } .active-filters a:hover { background: var(--coral); color: var(--ink); } .active-filters .active-filters__reset { background: none; color: var(--ink); text-decoration: underline; } .empty-state { padding: var(--s-4); border-radius: var(--r-lg); background: var(--white); text-align: center; } .empty-state__title { font: 600 var(--fs-2)/1.1 var(--display); } /* Filter panel: a bottom sheet on phones, a sticky column on desktop. */ .catalog__filters { position: fixed; inset: auto 0 0; z-index: 90; display: flex; flex-direction: column; max-height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--paper); box-shadow: 0 -20px 60px -20px rgb(20 18 16 / 0.5); transform: translateY(105%); visibility: hidden; transition: transform .4s var(--ease), visibility 0s .4s; } .filters-open .catalog__filters { transform: none; visibility: visible; transition: transform .4s var(--ease); } .filters-open { overflow: hidden; } .filters-open::after { content: ""; position: fixed; inset: 0; z-index: 80; background: rgb(20 18 16 / 0.4); animation: fade .3s; } .filters__head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0.75rem 0.5rem 1.25rem; } .filters__title { margin: 0; font: 600 var(--fs-1) var(--display); letter-spacing: -0.03em; } .filters { display: grid; overflow-y: auto; padding: 0 1.25rem; } .filters__group { border-bottom: 1px solid var(--line); } .filters__group summary { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 0; font-weight: 700; cursor: pointer; list-style: none; } .filters__group summary::-webkit-details-marker { display: none; } .filters__group summary::after { content: ""; width: 0.55em; height: 0.55em; margin-left: auto; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -25%; transition: rotate .25s var(--ease); } .filters__group[open] summary::after { rotate: 225deg; translate: 0 25%; } .filters__group fieldset { margin: 0; padding: 0 0 1.1rem; border: 0; min-width: 0; } .filters__options { display: grid; gap: 2px; } .filters__options--rozmir { grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: 6px; } .opt { position: relative; display: block; cursor: pointer; } .opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .opt__box { display: flex; align-items: center; gap: 0.65rem; min-height: 40px; padding: 0.35rem 0.6rem; border-radius: 10px; transition: background-color .15s; } .opt__box::before { content: ""; flex: none; width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--white) no-repeat center / 0.8rem; transition: background-color .15s; } .opt--swatch .opt__box::before { display: none; } .opt:hover .opt__box { background: var(--white); } .opt input:checked + .opt__box::before { background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3efe8' stroke-width='3.5'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); } .opt input:focus-visible + .opt__box { outline: 3px solid var(--focus); outline-offset: 1px; } .opt__count { margin-left: auto; color: var(--muted); font-size: var(--fs--1); } .swatch { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(20 18 16 / 0.18); } .opt--swatch input:checked + .opt__box .swatch { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); } .opt--swatch input:checked + .opt__box { font-weight: 700; } .filters__options--rozmir .opt__box { justify-content: center; min-height: 44px; padding: 0.3rem; border: 1.5px solid var(--line); background: var(--white); font-weight: 600; } .filters__options--rozmir .opt__box::before { display: none; } .filters__options--rozmir input:checked + .opt__box { background: var(--ink); border-color: var(--ink); color: var(--paper); } .price-range { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 8px; margin-bottom: 0.75rem; } .price-range label { display: grid; gap: 0.25rem; font-size: var(--fs--1); color: var(--muted); } .price-range input { width: 100%; min-height: 44px; padding: 0.4rem 0.7rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white); font-size: var(--fs-0); color: var(--ink); -moz-appearance: textfield; } .price-range input::-webkit-outer-spin-button, .price-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .price-range input:focus { outline: none; border-color: var(--ink); } .price-range__cur { padding-bottom: 0.7rem; font-weight: 600; } /* Two range inputs on one track; only the thumbs take the pointer, the track is painted between them. */ .price-slider { position: relative; height: 44px; margin: 0.25rem 0.5rem 0; --a: 0%; --b: 100%; } .price-slider__track { position: absolute; left: 0; right: 0; top: 50%; height: 4px; translate: 0 -50%; border-radius: 4px; background: var(--line); } .price-slider__fill { position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); border-radius: 4px; background: var(--ink); } .price-slider input[type="range"] { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; background: none; pointer-events: none; appearance: none; -webkit-appearance: none; } .price-slider input[type="range"]::-webkit-slider-runnable-track { background: none; } .price-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border: 3px solid var(--paper); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); cursor: grab; pointer-events: auto; } .price-slider input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--paper); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); cursor: grab; pointer-events: auto; } .price-slider input[type="range"]:focus-visible { outline: none; } .price-slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 5px var(--focus); } .price-slider input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 5px var(--focus); } .price-preset { min-height: 40px; padding: 0.35rem 0.85rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); font-size: var(--fs--1); font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; } .price-preset:hover { border-color: var(--ink); } .price-preset[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } .filters__foot { position: sticky; bottom: 0; padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--paper) 30%); } .filters__foot .button { width: 100%; } @media (min-width: 1024px) { .catalog { grid-template-columns: 272px minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; } .catalog__filters { position: sticky; top: calc(var(--header-h) + 1rem); inset: auto; z-index: 1; max-height: calc(100dvh - var(--header-h) - 2rem); border-radius: 0; background: none; box-shadow: none; transform: none; visibility: visible; transition: none; } .filters__head { display: none; } .filters { padding: 0 0.5rem 0 0; scrollbar-width: thin; } .filters__group:first-child summary { padding-top: 0; } .catalog__filter-btn { display: none; } .js .filters__foot { display: none; } } .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: var(--s-4) 0 0; padding: 0; list-style: none; } .woocommerce-pagination li > .page-numbers { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 0.7rem; border-radius: 999px; background: var(--white); text-decoration: none; font-weight: 600; transition: background-color .2s, color .2s; } .woocommerce-pagination li > a.page-numbers:hover { background: var(--coral); } .woocommerce-pagination li > .page-numbers.current { background: var(--ink); color: var(--paper); } .woocommerce-info, .woocommerce-message, .woocommerce-error, .woocommerce-noreviews { margin: 0 0 var(--s-3); padding: 1rem 1.25rem; border-radius: var(--r); background: var(--mint); list-style: none; } .woocommerce-error { background: var(--coral-soft); } .woocommerce-message .button, .woocommerce-info .button { float: right; min-height: 40px; padding: 0.35em 1em; margin-left: 1rem; } /* Phones: the button goes under the text instead of floating over it. */ @media (max-width: 719px) { .woocommerce-message, .woocommerce-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; } .woocommerce-message .button, .woocommerce-info .button { float: none; order: 2; margin: 0; } } /* --- Single product ------------------------------------------------------ */ /* Layout lives under «Product page» below (.pdp); these style WooCommerce's parts. */ .woocommerce-product-gallery { position: relative; min-width: 0; } .woocommerce-product-gallery__wrapper { margin: 0; } .woocommerce-product-gallery__image img { width: 100%; border-radius: var(--r-lg); background: var(--white); } .woocommerce-product-gallery .flex-viewport { border-radius: var(--r-lg); } .woocommerce-product-gallery .flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; } .woocommerce-product-gallery .flex-control-thumbs img { aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); opacity: 0.55; cursor: pointer; transition: opacity .2s, transform .25s var(--ease); } .woocommerce-product-gallery .flex-control-thumbs img.flex-active, .woocommerce-product-gallery .flex-control-thumbs img:hover { opacity: 1; transform: translateY(-2px); } .woocommerce-product-gallery__trigger { position: absolute; top: 1rem; right: 1rem; z-index: 5; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow); font-size: 0; text-decoration: none; } .woocommerce-product-gallery__trigger::before { content: ""; width: 15px; height: 15px; border: 2px solid var(--ink); border-radius: 50%; } .woocommerce-product-gallery__trigger::after { content: ""; position: absolute; width: 7px; height: 2px; background: var(--ink); transform: translate(8px, 8px) rotate(45deg); } .summary .product_title { margin-bottom: 0.4em; font-size: var(--fs-3); letter-spacing: -0.045em; } .summary > .price { margin-bottom: 0.9rem; font: 600 var(--fs-3)/1 var(--display); letter-spacing: -0.04em; } .woocommerce-product-details__short-description { color: var(--muted); } .variations { width: 100%; margin-bottom: 0.25rem; border-collapse: collapse; } .variations th, .variations td { display: block; padding: 0; text-align: left; } .variations th label { display: block; margin: 0.75rem 0 0.6rem; font-weight: 700; } .reset_variations { display: none !important; } .sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; } .sizes__item { position: relative; } .sizes__item input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .sizes__item span { display: grid; place-items: center; min-width: 4.4rem; min-height: 52px; padding: 0.4rem 1rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--white); font-weight: 600; transition: border-color .15s, background-color .15s, transform .2s var(--ease); } .sizes__item:hover span { border-color: var(--ink); transform: translateY(-2px); } .sizes__item input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); } .sizes__item input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; } .sizes__item input:disabled + span { color: var(--muted); background: repeating-linear-gradient(-45deg, transparent 0 6px, var(--line) 6px 7px); text-decoration: line-through; cursor: not-allowed; transform: none; } .sizes--needed { animation: shake .4s; } .sizes--needed .sizes__item span { border-color: var(--danger); } .sizes__hint { min-height: 1.5em; margin: 0.45rem 0 0; color: var(--danger); font-weight: 700; font-size: var(--fs--1); } .single_variation_wrap .woocommerce-variation-price .price { font: 600 var(--fs-2)/1 var(--display); } .woocommerce-variation-availability .stock, .summary .stock { margin: 0.35rem 0 0.75rem; font-weight: 600; color: var(--ok); } .stock.out-of-stock { color: var(--danger); } form.cart { display: grid; gap: 0.75rem; margin: 0; } .woocommerce-variation-add-to-cart { display: flex; gap: 0.75rem; } .quantity .qty { width: 5.25rem; min-height: 58px; padding: 0 0.5rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); text-align: center; font-weight: 700; } .single_add_to_cart_button { flex: 1; min-height: 58px; font-size: var(--fs-1); background: var(--coral); border-color: var(--coral); color: var(--ink); } .single_add_to_cart_button:hover { background: #ff7255; color: var(--ink); } .product_meta { display: grid; gap: 0.2rem; margin-top: var(--s-2); color: var(--muted); font-size: var(--fs--1); } .product_meta a { color: var(--ink); } .woocommerce-tabs { margin-top: var(--s-3); } .woocommerce-tabs ul.tabs { display: flex; gap: 6px; margin: 0 0 var(--s-3); padding: 0; list-style: none; overflow-x: auto; } .woocommerce-tabs ul.tabs li a { display: block; padding: 0.7rem 1.2rem; border-radius: 999px; background: var(--white); text-decoration: none; font-weight: 600; white-space: nowrap; } .woocommerce-tabs ul.tabs li.active a { background: var(--ink); color: var(--paper); } .woocommerce-Tabs-panel { max-width: 78ch; } .woocommerce-Tabs-panel > h2:first-child { display: none; } .shop-note { padding: 0.9rem 1.15rem; border-radius: var(--r-sm); background: var(--butter); font-weight: 600; } .shop-sizes, .woocommerce-product-attributes, .shop_table { width: 100%; border-collapse: collapse; } .shop-sizes caption { margin-bottom: 0.5rem; text-align: left; font-weight: 700; } .shop-sizes th, .shop-sizes td, .woocommerce-product-attributes th, .woocommerce-product-attributes td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .woocommerce-product-attributes th { width: 38%; color: var(--muted); font-weight: 500; } .woocommerce-product-attributes td p { margin: 0; } .shop-sizes__note { color: var(--muted); font-size: var(--fs--1); } .related, .up-sells { margin-top: var(--s-4); } .related > h2, .up-sells > h2 { font-size: var(--fs-3); } /* --- Cart / checkout / account ----------------------------------------- */ .woocommerce-cart .entry__title, .woocommerce-checkout .entry__title { font-size: var(--fs-4); letter-spacing: -0.055em; } /* Form fields (checkout, coupon). Labels above, 52px tall, the shared focus ring. */ .form-row { display: grid; gap: 0.35rem; margin: 0; } .form-row label { font-weight: 600; font-size: var(--fs--1); } .form-row .required { color: var(--coral-deep); text-decoration: none; border: 0; } .form-row .optional { color: var(--muted); font-weight: 400; } .input-text, .form-row select, .form-row textarea { width: 100%; min-height: 52px; padding: 0.7rem 1rem; border: 1.5px solid rgb(20 18 16 / 0.22); border-radius: var(--r-sm); background: var(--white); } .form-row textarea { min-height: 6.5rem; resize: vertical; } .input-text:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--ink); } .form-row .description { display: block !important; color: var(--muted); font-size: var(--fs--1); } .form-row.woocommerce-invalid .input-text, .form-row.woocommerce-invalid select { border-color: var(--danger); } .form-row .checkout-inline-error-message, .woocommerce-error li { color: var(--danger); font-size: var(--fs--1); font-weight: 600; } .fields-grid { display: grid; gap: 1rem; } @media (min-width: 640px) { .fields-grid { grid-template-columns: 1fr 1fr; } .fields-grid > .form-row-wide, .fields-grid > .form-row:not(.form-row-first):not(.form-row-last) { grid-column: 1 / -1; } } .woocommerce-input-wrapper { display: block; } #billing_country_field { display: none; } /* Shared summary card and totals table. */ .summary-card { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--r-lg); background: var(--white); } .summary-card__title { margin: 0 0 1rem; font-size: var(--fs-1); } .totals { width: 100%; border-collapse: collapse; } .totals th, .totals td { padding: 0.6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; } .totals th { font-weight: 500; text-align: left; } .totals td { text-align: right; white-space: nowrap; } .totals .order-total th, .totals .order-total td { white-space: nowrap; padding-top: 1rem; border-bottom: 0; font: 600 var(--fs-1)/1.2 var(--display); letter-spacing: -0.02em; } .summary-note { display: block; color: var(--muted); font-size: var(--fs--1); font-weight: 400; } /* Cart */ .cart-layout { display: grid; gap: var(--s-3); align-items: start; } @media (min-width: 960px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-4); } .cart-side { position: sticky; top: calc(var(--header-h) + 1.25rem); } } .cart-lines__count { margin: 0 0 0.5rem; color: var(--muted); font-weight: 600; } .cart-lines__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .cart-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "media info total" "media qty remove"; gap: 0.6rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); } @media (min-width: 640px) { .cart-line { grid-template-columns: 112px minmax(0, 1fr) auto 8.5rem; grid-template-areas: "media info qty total" "media info remove remove"; align-items: start; } } .cart-line__media { grid-area: media; } .cart-line__media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--white); } .cart-line__info { grid-area: info; min-width: 0; } .cart-line__name { margin: 0 0 0.3rem; font: 600 var(--fs-0)/1.35 var(--text); letter-spacing: 0; } .cart-line__name a { text-decoration: none; } .cart-line__name a:hover { text-decoration: underline; } .cart-line__meta { margin: 0; color: var(--muted); font-size: var(--fs--1); } .cart-line__meta strong { color: var(--ink); } .cart-line__unit { margin: 0.3rem 0 0; color: var(--muted); font-size: var(--fs--1); } .cart-line__qty { grid-area: qty; } .cart-line__total { grid-area: total; margin: 0; font: 600 var(--fs-1)/1.2 var(--display); text-align: right; white-space: nowrap; } .cart-line__remove { grid-area: remove; justify-self: end; align-self: end; } .cart-line__remove .link-btn { min-height: 44px; color: var(--muted); font-weight: 500; text-decoration: none; } .cart-line__remove .link-btn:hover { color: var(--danger); text-decoration: underline; } .cart-line.is-busy { opacity: 0.55; } .stepper { display: inline-flex; align-items: center; border: 1.5px solid rgb(20 18 16 / 0.22); border-radius: 999px; background: var(--white); } .stepper__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; } .stepper__btn:hover:not(:disabled) { background: var(--paper-2); } .stepper__btn:disabled { color: rgb(20 18 16 / 0.3); cursor: not-allowed; } .stepper__btn .icon { width: 18px; height: 18px; } .stepper__input { width: 2.6rem; min-height: 44px; padding: 0; border: 0; background: none; text-align: center; font-weight: 700; -moz-appearance: textfield; } .stepper__input::-webkit-inner-spin-button, .stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .cart-lines__actions { display: flex; flex-wrap: wrap; align-items: start; gap: 1rem; margin-top: 1rem; } .js .cart-lines__update { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .coupon-box summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; } .coupon { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; max-width: 26rem; } .coupon label { grid-column: 1 / -1; font-weight: 600; font-size: var(--fs--1); } .cart_totals .wc-proceed-to-checkout { margin: 1.25rem 0 1rem; } .checkout-button { width: 100%; white-space: nowrap; font-size: var(--fs-0); } .cart_totals .promises--compact { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; border: 0; border-radius: 0; background: none; } .cart_totals .promises--compact .promises__item { display: flex; align-items: center; gap: 0.6rem; padding: 0; border: 0; background: none; } .cart_totals .promises--compact strong { font: 500 var(--fs--1)/1.3 var(--text); } .cart_totals .promises--compact .icon { width: 1.3rem; height: 1.3rem; padding: 0; background: none; color: var(--coral-deep); } .cart-empty { display: grid; justify-items: center; gap: 0.75rem; } .cart-empty__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0.25rem 0 0.75rem; padding: 0; list-style: none; } /* Checkout */ .checkout-layout { display: grid; gap: var(--s-3); align-items: start; } .checkout-layout__lead { margin: 0; color: var(--muted); } @media (min-width: 1000px) { .checkout-layout { grid-template-columns: minmax(0, 1fr) 400px; column-gap: var(--s-4); } .checkout-layout > :not(.checkout-summary) { grid-column: 1; } .checkout-summary { grid-column: 2; grid-row: 1 / span 5; position: sticky; top: calc(var(--header-h) + 1.25rem); } } .checkout-step { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--white); } .checkout-step__title { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.25rem; font-size: var(--fs-2); } .checkout-step__no { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 var(--fs-0)/1 var(--display); } .woocommerce-additional-fields { margin-top: 1.25rem; } /* morkva prints many hidden helper rows; only rows with a label get spacing. */ .checkout-step--delivery .form-row:has(> label) { margin-top: 1rem; } .checkout-step--delivery .ship-methods + * .form-row:has(> label):first-child { margin-top: 1.25rem; } /* Text pages give h2 a top margin; cart and checkout cards have their own spacing. */ .entry__content .woocommerce h2 { margin-top: 0; } .ship-methods__set, .pay-methods { margin: 0; padding: 0; border: 0; min-width: 0; } .ship-methods__list, .pay-methods__list { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; } .ship-method, .pay-method { position: relative; } .ship-method > input, .pay-method > input { position: absolute; top: 1.15rem; left: 1rem; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--ink); } .ship-method > label, .pay-method > label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem; min-height: 56px; padding: 0.9rem 1rem 0.9rem 3rem; border: 1.5px solid rgb(20 18 16 / 0.18); border-radius: var(--r); cursor: pointer; transition: border-color .15s, background-color .15s; } .ship-method > label:hover, .pay-method > label:hover { border-color: var(--ink); } .ship-method > input:checked + label, .pay-method > input:checked + label { border-color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); } .ship-method > input:focus-visible + label, .pay-method > input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; } .ship-method__name, .pay-method__name { font-weight: 600; } .ship-method__cost { color: var(--muted); font-size: var(--fs--1); } .pay-method__icon img { max-height: 24px; width: auto; } .pay-method__box { display: block !important; margin: 0.4rem 0 0; padding: 0 1rem 0 3rem; color: var(--muted); font-size: var(--fs--1); } .pay-method__box p { margin: 0; } .ship-methods + .woocommerce-shipping-fields, .ship-methods ~ .woocommerce-additional-fields { margin-top: 1.25rem; } .checkout-summary { padding: clamp(1.25rem, 3vw, 1.75rem); border-radius: var(--r-lg); background: var(--white); } .checkout-summary__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin: 0 0 1rem; font-size: var(--fs-1); } .checkout-summary__count { color: var(--muted); font: 500 var(--fs--1) var(--text); letter-spacing: 0; } .checkout-summary__edit { margin-top: 1rem; min-height: 44px; } .summary-lines { display: grid; gap: 0.85rem; margin: 0 0 1rem; padding: 0; list-style: none; } .summary-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; } .summary-line__media { position: relative; } .summary-line__media img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; background: var(--paper); } .summary-line__qty { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.75rem; font-weight: 700; line-height: 22px; text-align: center; } .summary-line__info { display: grid; min-width: 0; } .summary-line__name { font-weight: 600; font-size: var(--fs--1); line-height: 1.35; } .summary-line__meta { color: var(--muted); font-size: var(--fs--1); } .summary-line__price { font-weight: 700; white-space: nowrap; } .place-order { display: grid; gap: 0.85rem; margin-top: 1.5rem; } .place-order__total { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-weight: 600; } .place-order__total strong { font: 600 var(--fs-2)/1 var(--display); letter-spacing: -0.03em; } .place-order__button { width: 100%; } .place-order__fine { margin: 0; color: var(--muted); font-size: var(--fs--1); } .woocommerce-checkout .blockUI.blockOverlay { background: rgb(255 253 249 / 0.6) !important; } /* morkva UA Shipping: its select2 boxes in the theme's field style. */ .woocommerce-checkout .select2-container { width: 100% !important; } .woocommerce-checkout .select2-container .select2-selection--single { height: 52px; border: 1.5px solid rgb(20 18 16 / 0.22); border-radius: var(--r-sm); background: var(--white); } .woocommerce-checkout .select2-container .select2-selection__rendered { padding: 0 2.5rem 0 1rem; line-height: 49px !important; color: var(--ink); } .woocommerce-checkout .select2-container .select2-selection__arrow { height: 50px !important; right: 0.6rem !important; } .woocommerce-checkout .select2-container--focus .select2-selection--single, .woocommerce-checkout .select2-container--open .select2-selection--single { border-color: var(--ink); outline: 3px solid var(--focus); outline-offset: 3px; } .select2-dropdown { border: 1.5px solid var(--ink) !important; border-radius: var(--r-sm) !important; overflow: hidden; } .select2-search__field { min-height: 44px; padding: 0.5rem 0.75rem !important; border: 1.5px solid rgb(20 18 16 / 0.22) !important; border-radius: 8px; } .select2-results__option { padding: 0.65rem 1rem !important; } .select2-results__option--highlighted, .select2-results__option[aria-selected="true"]:hover { background: var(--ink) !important; color: var(--paper) !important; } /* Thank you */ .thanks__head { max-width: 46rem; margin-bottom: var(--s-4); } .thanks__kicker { margin: 0 0 0.5rem; color: var(--coral-deep); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .thanks__title { margin: 0 0 1.25rem; font-size: var(--fs-3); } .thanks__title:focus { outline: none; } .thanks__next { display: grid; gap: 0.75rem; margin: 0; padding-left: 1.4rem; } .thanks__grid { display: grid; gap: var(--s-3); align-items: start; } @media (min-width: 900px) { .thanks__grid { grid-template-columns: 1.3fr 1fr; } } .thanks address { margin-bottom: 1.25rem; font-style: normal; } .thanks__head--failed .thanks__title { color: var(--danger); } .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; } .woocommerce-MyAccount-navigation a { display: block; padding: 0.55rem 1.1rem; border-radius: 999px; background: var(--white); text-decoration: none; } .woocommerce-MyAccount-navigation .is-active a { background: var(--ink); color: var(--paper); } /* --- Text pages --------------------------------------------------------- */ .prose-page { max-width: 780px; padding-block: var(--s-4) var(--s-5); } .entry__title { font-size: var(--fs-4); letter-spacing: -0.055em; } .entry__content > * + * { margin-top: 1em; } .entry__content h2 { margin-top: 1.7em; } .entry__content a:not(.button):not(.chip-link):not(.wp-element-button) { color: var(--ink); text-decoration-color: var(--coral); text-decoration-thickness: 2px; } /* buttons keep their own colours */ /* --- Footer ------------------------------------------------------------- */ .site-footer { position: relative; margin-top: var(--s-5); overflow: hidden; background: var(--ink); color: #d9d1c7; } .ornament--footer { height: 18px; background-color: var(--paper); } .ornament--footer + .container { padding-top: var(--s-5); } .site-footer a { color: var(--paper); text-decoration: none; } .site-footer a:hover { color: var(--coral); } .site-footer ul { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; } .site-footer__grid { display: grid; gap: var(--s-4); } .site-footer__lead { max-width: 22ch; margin-bottom: 1.5rem; font: 500 var(--fs-2)/1.15 var(--display); letter-spacing: -0.035em; color: var(--paper); } .site-footer__title { margin-bottom: 1rem; font: 600 var(--fs--1) var(--text); letter-spacing: 0.12em; text-transform: uppercase; color: #9b9188; } .site-footer .button--coral, .site-footer .button--coral:hover { color: var(--ink); } .site-footer__promises { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin-top: 1.5rem !important; } .site-footer__promises li { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45em 0.9em; border: 1px solid rgb(243 239 232 / 0.18); border-radius: 999px; font-size: var(--fs--1); } .site-footer__promises .icon { width: 1.1em; height: 1.1em; color: var(--coral); } .site-footer__size p { margin-bottom: 1rem; } .site-footer__size .link-arrow { color: var(--coral); } .site-footer__size .link-arrow .icon { width: 1.1em; height: 1.1em; } /* The name, solid and huge, with the mark — slides up into view. */ .site-footer__brand { display: flex; justify-content: center; margin-top: var(--s-4); padding: 0 16px var(--s-3); color: var(--paper); --logo-accent: var(--coral); --logo-dot: var(--lilac); user-select: none; } .site-footer__brand .logo { width: min(100%, 1100px); height: auto; color: var(--paper); } /* The footer logo puts itself together once it scrolls into view (main.js adds .is-armed, then .is-playing): the slipper with «апці» flies in, the «к» runs up step by step, the dot hops in twice and lands over «і». With reduced motion nothing moves and the logo is simply there. */ .site-footer__brand { overflow-x: clip; } .site-footer__brand .logo { overflow: visible; } @media (prefers-reduced-motion: no-preference) { .site-footer__brand.is-armed path, .site-footer__brand.is-armed .logo__k { transform-box: fill-box; transform-origin: 50% 100%; } /* The legs swing from the hip, one forward while the other goes back, for as long as the «к» runs. */ .site-footer__brand.is-armed .logo__leg--back { transform-origin: 36.6% 45.3%; } .site-footer__brand.is-armed .logo__leg--front { transform-origin: 50% 40.6%; } .site-footer__brand.is-playing .logo__leg--back { animation: leg-swing-back .35s .6s ease-in-out 4; } .site-footer__brand.is-playing .logo__leg--front { animation: leg-swing .35s .6s ease-in-out 4; } /* In the header a pointer over the logo makes the «к» take two steps. */ .site-header__logo .logo__leg { transform-box: fill-box; } .site-header__logo .logo__leg--back { transform-origin: 36.6% 45.3%; } .site-header__logo .logo__leg--front { transform-origin: 50% 40.6%; } .site-header__logo:hover .logo__leg--back { animation: leg-swing-back .4s ease-in-out 2; } .site-header__logo:hover .logo__leg--front { animation: leg-swing .4s ease-in-out 2; } .site-footer__brand.is-armed:not(.is-playing) path { opacity: 0; } .site-footer__brand.is-playing .logo__body { animation: logo-fly .9s cubic-bezier(.2, .9, .3, 1.15) both; } .site-footer__brand.is-playing .logo__k { animation: logo-run 1.4s .6s linear both; } .site-footer__brand.is-playing .logo__dot { animation: logo-hop 1.2s 1.85s ease-out both; } } @keyframes logo-fly { 0% { opacity: 0; transform: translate(35%, -90%) rotate(14deg) scale(.75); } 55% { opacity: 1; transform: translate(-1.5%, 3%) rotate(-2.5deg) scale(1.02); } 78% { transform: translate(.5%, -1.5%) rotate(.8deg); } 100% { opacity: 1; transform: none; } } @keyframes logo-run { 0% { opacity: 0; transform: translateX(-260%) rotate(-3deg); } 6% { opacity: 1; } 14% { transform: translateX(-222%) translateY(-14%) rotate(3deg); } 28% { transform: translateX(-180%) rotate(-3deg); } 42% { transform: translateX(-138%) translateY(-14%) rotate(3deg); } 56% { transform: translateX(-96%) rotate(-3deg); } 70% { transform: translateX(-54%) translateY(-14%) rotate(3deg); } 84% { transform: translateX(4%) rotate(-3deg) scale(1.04, .9); } 92% { transform: translateX(-1%) rotate(1deg); } 100% { opacity: 1; transform: none; } } /* A real stride: while the front leg (the boot) swings back, the back leg comes forward under the body, and the other way round, so the two pass each other on every step. Positive angles turn clockwise: for the back leg that lifts the foot behind, for the front leg that pulls the boot back. */ @keyframes leg-swing-back { 0%, 100% { transform: none; } 25% { transform: rotate(-24deg); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(9deg); } } @keyframes leg-swing { 0%, 100% { transform: none; } 25% { transform: rotate(13deg); } 50% { transform: rotate(2deg); } 75% { transform: rotate(-11deg); } } @keyframes logo-hop { 0% { opacity: 0; transform: translate(260%, -260%) scale(.8); } 12% { opacity: 1; } 34% { transform: translate(170%, 0) scale(1.25, .75); } 52% { transform: translate(85%, -150%) scale(.92, 1.08); } 70% { transform: translate(0, 0) scale(1.25, .75); } 82% { transform: translate(0, -45%) scale(.96, 1.04); } 92% { transform: translate(0, 0) scale(1.08, .92); } 100% { opacity: 1; transform: none; } } .site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid rgb(243 239 232 / 0.14); font-size: var(--fs--1); color: #a59b91; } .site-footer__legal p { margin: 0; } .to-top { position: fixed; right: 16px; bottom: 84px; z-index: 69; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: var(--shadow-lg); text-decoration: none; animation: fade .25s; } .to-top[hidden] { display: none; } .to-top .icon { width: 1.3rem; height: 1.3rem; transition: transform .3s var(--ease); } .to-top:hover { color: var(--ink); } .to-top:hover .icon { transform: translateY(-3px); } body:not(:has(.contact-fab)) .to-top { bottom: 16px; } .site-footer__credit a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 0.2em; } @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } } .size-help__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.5rem; } .size-help__meta { color: #bdb4aa; font-size: var(--fs--1); } .size-help .button--coral .icon { width: 1.1em; height: 1.1em; } /* --- Motion -------------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--delay, 0ms); } .js .reveal.is-in { opacity: 1; transform: none; } .tilt { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .5s var(--ease); will-change: transform; } .tilt.is-tilting { transition-duration: .12s; } @keyframes float { 50% { translate: 0 -10px; } } @keyframes spin { to { rotate: 360deg; } } @keyframes drift { to { transform: translate(-6vmax, 4vmax) scale(1.1); } } @keyframes zoom-in { from { transform: scale(1.12); } } @keyframes pulse { 70% { box-shadow: 0 0 0 10px rgb(255 91 58 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 91 58 / 0); } } @keyframes bump { 40% { transform: scale(1.4); } } @keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } @keyframes fade { from { opacity: 0; } } /* ========================================================================== Podillia-modern: the embroidery band, size picker, typographic index, story ========================================================================== */ /* Cross-stitch band in the spirit of Podillia embroidery: rhombus, centre stitch, dots. */ .ornament { height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 22'%3E%3Cg fill='%23ff5b3a'%3E%3Crect x='30' y='1' width='6' height='4'/%3E%3Crect x='24' y='5' width='6' height='4'/%3E%3Crect x='36' y='5' width='6' height='4'/%3E%3Crect x='18' y='9' width='6' height='4'/%3E%3Crect x='42' y='9' width='6' height='4'/%3E%3Crect x='24' y='13' width='6' height='4'/%3E%3Crect x='36' y='13' width='6' height='4'/%3E%3Crect x='30' y='17' width='6' height='4'/%3E%3C/g%3E%3Cg fill='%23141210'%3E%3Crect x='30' y='9' width='6' height='4'/%3E%3Crect x='3' y='9' width='6' height='4'/%3E%3Crect x='57' y='9' width='6' height='4'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / auto 100%; } .ornament--thin { height: 14px; opacity: 0.85; } .size-pick { padding-block: var(--s-4); background: var(--coral); } .size-pick__inner { display: grid; gap: var(--s-3); align-items: center; } .size-pick .section__title { margin-bottom: 0.5rem; } .size-pick__text p { margin: 0; font-size: var(--fs-1); } .size-pick__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .size-pick__list a { display: grid; place-content: center; justify-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--paper); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), background-color .2s, color .2s; } .size-pick__list a:hover, .size-pick__list a:focus-visible { background: var(--ink); color: var(--paper); transform: translateY(-6px) rotate(-6deg); } .size-pick__num { font: 600 var(--fs-2)/1 var(--display); letter-spacing: -0.04em; } .size-pick__count { margin-top: 0.15rem; font-size: 0.72rem; opacity: 0.75; } @media (min-width: 960px) { .size-pick__inner { grid-template-columns: 0.8fr 1.2fr; } } .cat-index { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); } .cat-index a { position: relative; display: grid; grid-template-columns: 2.5rem 1fr auto auto; align-items: center; gap: 1rem; padding: clamp(0.9rem, 1.6vw, 1.4rem) 0.75rem; border-bottom: 1.5px solid var(--ink); text-decoration: none; overflow: hidden; isolation: isolate; } .cat-index a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .45s var(--ease); } .cat-index a:hover, .cat-index a:focus-visible { color: var(--paper); } .cat-index a:hover::before, .cat-index a:focus-visible::before { transform: scaleY(1); } .cat-index__no { font: 500 var(--fs--1) var(--text); color: var(--muted); transition: color .2s; } .cat-index a:hover .cat-index__no { color: var(--coral); } .cat-index__name { font: 600 clamp(1.35rem, 0.9rem + 2.4vw, 3.2rem)/1.05 var(--display); letter-spacing: -0.05em; transition: transform .45s var(--ease); } .cat-index a:hover .cat-index__name { transform: translateX(0.6rem); } .cat-index__count { color: var(--muted); } .cat-index a:hover .cat-index__count { color: #bdb4aa; } .cat-index__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--coral); color: var(--ink); transform: scale(0) rotate(-45deg); transition: transform .4s var(--ease); } .cat-index a:hover .cat-index__go, .cat-index a:focus-visible .cat-index__go { transform: scale(1) rotate(-45deg); } .cat-index__float { position: fixed; left: 0; top: 0; z-index: 70; width: 230px; height: 230px; object-fit: cover; border-radius: var(--r); box-shadow: var(--shadow-lg); pointer-events: none; opacity: 0; scale: 0.6; transition: opacity .25s, scale .35s var(--ease); } .cat-index__float.is-on { opacity: 1; scale: 1; } .cat-index__float:not([src]) { display: none; } @media (max-width: 700px) { .cat-index__count { display: none; } .cat-index a { grid-template-columns: 2rem 1fr auto; padding-inline: 0.25rem; } .cat-index__go { transform: scale(0.8) rotate(-45deg); } } .story { margin-block: var(--s-5); } .story__inner { padding-block: var(--s-4); text-align: center; } .story__kicker { margin-bottom: 1rem; font-weight: 700; font-size: var(--fs--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .story__text { max-width: 24ch; margin: 0 auto; font-size: var(--fs-3); line-height: 1.12; } .story__text em { font-style: normal; color: var(--coral-deep); } /* ========================================================================== Product page: gallery + sticky summary in their own row, accordions ========================================================================== */ .pdp .crumbs { margin-bottom: var(--s-3); } .pdp__top { display: grid; gap: var(--s-3); align-items: start; } .pdp__summary { min-width: 0; } @media (min-width: 1000px) { .pdp__top { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); } .pdp__summary { position: sticky; top: calc(var(--header-h) + 1.25rem); } } .pdp__summary .product_title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1.08; } .pdp__summary > .price { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem); } .pdp__sku { margin-top: 1rem; color: var(--muted); font-size: var(--fs--1); } .gallery { position: relative; } .gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--r-lg); } .gallery__track::-webkit-scrollbar { display: none; } .gallery__item { scroll-snap-align: start; } .gallery__open { display: block; width: 100%; padding: 0; border: 0; background: var(--white); cursor: zoom-in; overflow: hidden; border-radius: var(--r-lg); } .gallery__open img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .8s var(--ease); } .gallery__open:hover img { transform: scale(1.04); } .gallery__count { position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 0.3em 0.8em; border-radius: 999px; background: rgb(20 18 16 / 0.75); color: var(--paper); font-size: var(--fs--1); font-weight: 600; } @media (min-width: 1000px) { .gallery__track { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; overflow: visible; border-radius: 0; } .gallery__item:first-child { grid-column: 1 / -1; } .gallery__count { display: none; } } .viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); } .viewer::backdrop { background: rgb(20 18 16 / 0.6); } .viewer[open] { animation: fade .25s; } .viewer__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; height: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; } .viewer__track li { display: grid; place-items: center; padding: 4rem 1rem 3.5rem; scroll-snap-align: start; } .viewer__track img { max-height: calc(100dvh - 7.5rem); width: auto; object-fit: contain; border-radius: var(--r); } .viewer__close { position: fixed; top: 12px; right: 12px; z-index: 2; background: var(--white); box-shadow: var(--shadow); } .viewer__step { position: fixed; top: 50%; translate: 0 -50%; z-index: 2; width: 52px; height: 52px; background: var(--white); box-shadow: var(--shadow); } .viewer__step:hover { background: var(--paper-2); } .viewer__step--prev { left: 12px; } .viewer__step--next { right: 12px; } .viewer__count { position: fixed; left: 50%; bottom: 12px; translate: -50% 0; z-index: 2; margin: 0; padding: 0.3em 0.9em; border-radius: 999px; background: rgb(20 18 16 / 0.8); color: var(--paper); font-size: var(--fs--1); font-weight: 600; } .accordion { margin-top: var(--s-3); border-top: 1px solid var(--line); } .accordion__item { border-bottom: 1px solid var(--line); } .accordion__item summary { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 0; font-weight: 700; cursor: pointer; list-style: none; } .accordion__item summary::-webkit-details-marker { display: none; } .accordion__item summary::after { content: "+"; font: 400 1.6rem/1 var(--text); transition: rotate .3s var(--ease); } .accordion__item[open] summary::after { rotate: 45deg; } .accordion__body { padding-bottom: 1.2rem; color: var(--ink-2); } .accordion__body .woocommerce-product-attributes th { width: 45%; } /* ========================================================================== Buyer conveniences: my size, fit note, quick order, stock alerts ========================================================================== */ .my-size-btn { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 42px; padding: 0.3rem 0.5rem 0.3rem 0.9rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); font-weight: 600; font-size: var(--fs--1); cursor: pointer; transition: border-color .2s; } .my-size-btn:hover { border-color: var(--ink); } .my-size-btn__value { display: none; min-width: 1.9rem; height: 1.9rem; padding: 0 0.4rem; place-items: center; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 0.8rem var(--display); } .my-size-btn.is-set .my-size-btn__value { display: inline-grid; } @media (max-width: 520px) { .my-size-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .my-size-btn { min-width: 44px; min-height: 44px; justify-content: center; } .my-size-btn { padding: 0.3rem; border: 0; background: none; } .my-size-btn:not(.is-set)::before { content: "📏"; font-size: 1.2rem; } } .sheet { width: min(100% - 24px, 520px); max-height: min(92dvh, 760px); margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg); } .sheet::backdrop { background: rgb(20 18 16 / 0.5); backdrop-filter: blur(3px); } .sheet[open] { animation: sheet-in .35s var(--ease); } @keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(.98); } } @media (max-width: 600px) { .sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; } } .sheet__inner { display: grid; gap: 1rem; padding: clamp(1.1rem, 4vw, 1.75rem); } .sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .sheet__title { margin: 0; font: 600 var(--fs-2)/1.1 var(--display); letter-spacing: -0.04em; } .sheet__lead { margin: 0; color: var(--muted); } .sheet__foot { display: flex; justify-content: flex-end; gap: 0.6rem; } .sheet__foot .button { flex: 1; } .sheet__error { margin: 0; min-height: 1.2em; color: var(--danger); font-weight: 600; } .sheet__error:empty { display: none; } .sheet__fine { margin: 0; color: var(--muted); font-size: var(--fs--1); } .sheet__product { display: flex; gap: 0.9rem; align-items: center; padding: 0.6rem; border-radius: var(--r); background: var(--white); } .sheet__product img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; } .sheet__product p { margin: 0; } .sheet__name { font-weight: 600; line-height: 1.3; } .sheet__done { text-align: center; justify-items: center; } .field { display: grid; gap: 0.35rem; font-weight: 600; font-size: var(--fs--1); } .field input, .field select { min-height: 52px; padding: 0.6rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white); font-size: var(--fs-0); font-weight: 400; } .field input:focus, .field select:focus { border-color: var(--ink); } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .my-size__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; } .my-size__opt { position: relative; } .my-size__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .my-size__opt span { display: grid; place-items: center; height: 46px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); font: 600 var(--fs-0) var(--display); transition: background-color .15s, color .15s; } .my-size__opt input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); } .my-size__opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; } .my-size__calc { display: grid; gap: 0.5rem; padding: 1rem; border-radius: var(--r); background: var(--butter); } .my-size__calc label { font-size: var(--fs--1); } .my-size__calc-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .my-size__calc input { width: 8rem; min-height: 46px; padding: 0.4rem 0.8rem; border: 1.5px solid var(--ink); border-radius: var(--r-sm); background: var(--white); font-size: var(--fs-1); } .my-size__result { margin: 0; font: 600 var(--fs-1) var(--display); } .my-size-bar { margin: 0 0 0 auto; } /* in the toolbar, on the right of the sorting */ .my-size-bar__link { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.55em 1.1em; border-radius: 999px; background: var(--coral); color: var(--ink); font-weight: 700; text-decoration: none; transition: transform .25s var(--ease); } .my-size-bar__link::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--ink); } .my-size-bar__link:hover { transform: translateY(-2px); } .card__mine { position: absolute; right: 10px; bottom: 10px; padding: 0.3em 0.7em; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.75rem; font-weight: 700; } .card__sizes.no-my { opacity: 0.6; } .fit-note { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.25rem; padding: 0.7rem 0.9rem; border-radius: var(--r-sm); background: var(--butter); font-weight: 600; } .fit-note .icon { flex: none; width: 1.3rem; height: 1.3rem; } .quick-btn { flex: 1 1 calc(100% - 64px); width: auto; min-height: 52px; } .woocommerce-variation-add-to-cart { flex-wrap: wrap; } .link-btn { display: inline-flex; align-items: center; gap: 0.45em; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--coral-deep); text-decoration-thickness: 2px; text-underline-offset: 0.25em; cursor: pointer; } .link-btn .icon { width: 1.1em; height: 1.1em; } .sizes__alert { margin: 0.4rem 0 0; } /* --- Contacts ------------------------------------------------------------ */ .contacts { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .contacts__link { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; text-decoration: none; } .contacts__link .icon { flex: none; width: 2.1rem; height: 2.1rem; padding: 0.45rem; border-radius: 50%; background: var(--paper-2); color: var(--ink); } .contacts__label { display: block; font-size: var(--fs--1); color: var(--muted); } .contacts__hours { margin: 0.75rem 0 0; color: var(--muted); font-size: var(--fs--1); } .site-footer .contacts__link .icon { background: rgb(243 239 232 / 0.1); color: var(--coral); } .site-footer .contacts__label { color: #a59b91; } .site-footer__title--gap { margin-top: 1.75rem; } .contacts--page .contacts__link { padding: 0.9rem 1.1rem; border-radius: var(--r); background: var(--white); font-size: var(--fs-1); } .contact-fab { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: grid; justify-items: end; gap: 10px; } .contact-fab__btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 52px; padding: 0.6rem 1.2rem 0.6rem 0.9rem; border: 0; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 700; box-shadow: var(--shadow-lg); cursor: pointer; transition: transform .25s var(--ease); } .contact-fab__btn:hover { transform: translateY(-2px); } .contact-fab__btn[aria-expanded="true"] { background: var(--coral-deep); } .contact-fab__panel { width: min(20rem, calc(100vw - 32px)); padding: 1rem; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow-lg); animation: sheet-in .25s var(--ease); } .contact-fab__title { margin: 0 0 0.75rem; font-weight: 700; } @media (max-width: 600px) { .contact-fab__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .contact-fab__btn { width: 56px; padding: 0; justify-content: center; } } .single-product .contact-fab { bottom: 88px; } /* --- Saved (♡) --------------------------------------------------------------- */ .wish { display: inline-grid; place-items: center; gap: 0.4rem; border: 0; cursor: pointer; color: var(--ink); } .wish .icon { width: 1.4rem; height: 1.4rem; transition: fill .15s, color .15s; } .wish[aria-pressed="true"] .icon { fill: var(--coral-deep); color: var(--coral-deep); } .wish.pop .icon { animation: bump .45s var(--ease); } .wish--card { position: absolute; top: 8px; right: 8px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 253 249 / 0.92); box-shadow: var(--shadow); } .wish--card:hover { background: var(--white); } .wish--pdp { width: 52px; min-width: 52px; height: 52px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; } .wish--pdp:hover { background: var(--white); } .site-wish { position: relative; } .site-wish__count { position: absolute; top: 3px; right: 1px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.72rem; font-weight: 800; line-height: 20px; text-align: center; } .wishlist__empty { padding: 1.5rem; border-radius: var(--r); background: var(--white); } /* --- Search suggestions ---------------------------------------------------- */ .site-search { position: relative; } .suggest { position: absolute; top: calc(100% + 8px); right: 0; z-index: 80; width: min(26rem, calc(100vw - 32px)); max-height: 70vh; margin: 0; padding: 6px; overflow-y: auto; list-style: none; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow-lg); } .suggest [role="option"] { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 0.75rem; padding: 0.4rem 0.5rem; border-radius: 10px; cursor: pointer; } .suggest img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; } .suggest__name { font-size: var(--fs--1); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .suggest__price { font: 600 var(--fs--1) var(--display); white-space: nowrap; } .suggest [role="option"]:hover, .suggest [aria-selected="true"] { background: var(--paper); } .suggest [aria-selected="true"] { outline: 2px solid var(--focus); outline-offset: -2px; } .suggest .suggest__all { display: block; padding: 0.7rem 0.6rem; font-weight: 700; color: var(--coral-deep); } /* --- Collections (home) -------------------------------------------------- */ .collections { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } @media (min-width: 720px) { .collections { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 720px) and (max-width: 1099px) { .collections > li:last-child:nth-child(odd) { grid-column: span 2; } } @media (min-width: 1100px) { .collections { grid-template-columns: 1.3fr 1fr 1fr; } .collections > li:first-child { grid-row: span 2; } .collections > li:last-child:nth-child(even) { grid-column: span 2; } } .collection { position: relative; display: block; height: 100%; min-height: 15rem; overflow: hidden; border-radius: var(--r-lg); color: var(--white); text-decoration: none; isolation: isolate; } .collection img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } /* Dark enough under the text at its lightest point (the snow photo): white text stays above 4.5:1. */ .collection::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(20 18 16 / 0.05) 25%, rgb(20 18 16 / 0.8) 100%); } .collection:hover img { transform: scale(1.06); } .collection__body { position: absolute; inset: auto 0 0; display: grid; gap: 0.2rem; padding: clamp(1.1rem, 2.5vw, 1.6rem); padding-right: calc(52px + 2.5rem); } .collection__title { font: 600 var(--fs-2)/1.05 var(--display); letter-spacing: -0.04em; } .collection__sub { font-size: var(--fs--1); } .collection__go { position: absolute; right: clamp(1.1rem, 2.5vw, 1.6rem); bottom: clamp(1.1rem, 2.5vw, 1.6rem); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--white); color: var(--ink); transition: transform .4s var(--ease), background-color .2s; } .collection:hover .collection__go { transform: rotate(-45deg); background: var(--coral); } /* --- Other colours ------------------------------------------------------- */ .colours { margin: 0 0 0.5rem; } .colours__title { margin: 0 0 0.6rem; font-weight: 700; } .colours__title strong { font-weight: 500; } .colours__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .colours__item { display: grid; justify-items: center; gap: 0.25rem; min-width: 76px; max-width: 104px; padding: 4px 4px 6px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); text-decoration: none; font-size: 0.75rem; line-height: 1.2; text-align: center; transition: border-color .15s, transform .2s var(--ease); } .colours__item img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; } a.colours__item:hover { border-color: var(--ink); transform: translateY(-2px); } .colours__item.is-current { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .colours__name { padding-inline: 2px; hyphens: auto; } /* --- Reviews ------------------------------------------------------------- */ .stars { position: relative; display: inline-block; width: 5.4em; height: 1em; vertical-align: -0.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z' fill='none' stroke='%2367605a' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center / 1.08em 1em; } .stars__fill { position: absolute; inset: 0 auto 0 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.5 2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z' fill='%23c33b20'/%3E%3C/svg%3E") repeat-x left center / 1.08em 1em; } .pdp__rating { display: inline-flex; align-items: center; gap: 0.5rem; margin: -0.25rem 0 0.75rem; color: var(--ink); text-decoration: none; font-weight: 600; } .pdp__rating:hover span { text-decoration: underline; } .star-rating { font-size: var(--fs--1); color: var(--muted); } .reviews { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1.5px solid var(--ink); } .reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; margin-bottom: var(--s-3); } .reviews__title { margin: 0; font-size: var(--fs-3); } .reviews__avg { margin: 0; display: flex; align-items: center; gap: 0.5rem; } .reviews__grid { display: grid; gap: var(--s-4); } @media (min-width: 1000px) { .reviews__grid { grid-template-columns: 1.3fr 1fr; align-items: start; } } .reviews__list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; } .reviews__list .comment_container { padding: 1.1rem 1.25rem; border-radius: var(--r); background: var(--white); } .reviews__list .avatar { display: none; } .reviews__list .meta { margin: 0.4rem 0 0.5rem; color: var(--muted); font-size: var(--fs--1); } .reviews__list .woocommerce-review__author { color: var(--ink); font-weight: 700; } .reviews__list .woocommerce-review__verified { color: var(--ok); font-style: normal; font-weight: 600; } .reviews__list .description p { margin: 0; } .reviews__empty { padding: 1.25rem; border-radius: var(--r); background: var(--white); color: var(--ink-2); } .reviews__form { padding: clamp(1.1rem, 3vw, 1.75rem); border-radius: var(--r-lg); background: var(--white); } .reviews__form-title { margin: 0 0 0.5rem; font-size: var(--fs-2); } .reviews__note { color: var(--muted); font-size: var(--fs--1); } .reviews__form .comment-form { display: grid; gap: 1rem; } .reviews__form .field textarea { min-height: 8rem; padding: 0.7rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-size: var(--fs-0); } .reviews__form .field input { background: var(--paper); } .reviews__form .field textarea:focus { outline: none; border-color: var(--ink); } .reviews__form .form-submit { margin: 0; } .rating-input { margin: 0; padding: 0; border: 0; } .rating-input legend { margin-bottom: 0.35rem; font-weight: 600; font-size: var(--fs--1); } /* Stars 1→5 in reading order (arrow keys go the way they point); every star up to the chosen or hovered one lights up. */ .rating-input__stars { display: inline-flex; gap: 4px; } .rating-input__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; } .rating-input__stars label { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; font-size: 1.9rem; line-height: 1; color: #8f867e; cursor: pointer; transition: color .15s, transform .15s; } .rating-input__stars input:checked + label, .rating-input__stars label:has(~ input:checked) { color: var(--coral-deep); } .rating-input__stars:hover label { color: var(--coral-deep); } .rating-input__stars label:hover ~ label { color: #8f867e; } .rating-input__stars label:hover { transform: scale(1.12); } .rating-input__stars input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } .tilt, .hero__stage { transform: none !important; } .js .ticker__pause { display: none; } /* the line does not move, nothing to stop */ } /* --- Category guide under the grid (SEO text people can actually use) ---- */ .seo-text { max-width: 78ch; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--ink-2); } .seo-text__title { font-size: var(--fs-2); } .seo-text h3 { margin-top: 1.5em; font-size: var(--fs-1); } .seo-text a { color: var(--ink); text-decoration-color: var(--coral-deep); text-decoration-thickness: 2px; } /* --- Category tabs (home) ------------------------------------------------ */ /* Tabs only with JS (the «js» class is set in , before paint), and the first tab's look from the first frame — so nothing jumps when the script takes over. Without JS: three plain lists. */ .cat-tabs { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-2); } .js .cat-tabs { display: flex; } .js .cat-index-wrap:not([data-ready]) .cat-panel + .cat-panel { display: none; } .js .cat-panel__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cat-tabs__tab { min-height: 48px; padding: 0.55rem 1.3rem; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 600 var(--fs-1)/1 var(--display); letter-spacing: -0.03em; cursor: pointer; transition: background-color .2s, color .2s; } .cat-tabs__tab:hover { background: var(--white); } .cat-tabs__tab[aria-selected="true"] { background: var(--ink); color: var(--paper); } .cat-panel__title { margin: var(--s-3) 0 0.75rem; font-size: var(--fs-2); } .cat-panel[hidden] { display: none; } /* First screen: a CSS-only entrance that never hides the text (opacity starts at 0.01, so the browser paints it at once and the largest paint is not held back until the scripts run). */ .hero-in { animation: hero-in .7s var(--ease) both; } .hero__text > .hero-in:nth-child(2) { animation-delay: .06s; } .hero__text > .hero-in:nth-child(3) { animation-delay: .12s; } .hero__text > .hero-in:nth-child(4) { animation-delay: .18s; } .hero__text > .hero-in:nth-child(5) { animation-delay: .24s; } @keyframes hero-in { from { opacity: 0.01; transform: translateY(16px); } } @media (prefers-reduced-motion: reduce) { .hero-in { animation: none; } } /* --- About page ------------------------------------------------------------ */ .about-hero { padding-block: var(--s-4) var(--s-3); } .about-hero__inner { max-width: 900px; } .about-hero__title { margin: 1rem 0; font-size: var(--fs-4); line-height: 1; letter-spacing: -0.05em; } .about-hero__title em { font-style: normal; color: var(--coral-deep); } .about-hero__lead { max-width: 40ch; font-size: var(--fs-1); color: var(--muted); } .about-hero__photo { margin: var(--s-3) 0 0; overflow: hidden; border-radius: var(--r-lg); } .about-hero__photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; } .about-body { display: grid; gap: var(--s-5); padding-bottom: var(--s-5); } .about-text { max-width: 72ch; font-size: var(--fs-1); } .about-text h2 { margin-top: 1.4em; font-size: var(--fs-2); } .about-text li { margin-bottom: 0.5rem; } .about-word { display: grid; gap: var(--s-3); align-items: center; padding: clamp(1rem, 3vw, 2rem); border-radius: var(--r-lg); background: var(--white); } @media (min-width: 900px) { .about-word { grid-template-columns: 0.9fr 1.1fr; } } .about-word__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); } .about-word h2 { font-size: var(--fs-3); } .about-source { margin-top: 0.75rem; font-size: var(--fs--1); color: var(--muted); } .about-source a { color: var(--ink); } .about-facts__list { display: grid; gap: 14px; margin: var(--s-3) 0 0; padding: 0; list-style: none; } @media (min-width: 720px) { .about-facts__list { grid-template-columns: repeat(2, 1fr); } } .fact { overflow: hidden; border-radius: var(--r-lg); background: var(--white); } .fact img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .fact__body { padding: 1.1rem 1.25rem 1.25rem; } .fact__title { font-size: var(--fs-1); } .fact p { margin-bottom: 0.25rem; } .about-cta { text-align: center; } .about-sources { max-width: 72ch; color: var(--muted); font-size: var(--fs--1); } .about-sources summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; font-weight: 600; } .about-sources ul { margin: 0.25rem 0 0; padding-left: 1.2rem; } .about-sources a { color: var(--ink); } /* --- Blog -------------------------------------------------------------- */ .blog-index { padding-block: var(--s-4) var(--s-5); } .blog-index__head { max-width: 900px; margin-bottom: var(--s-4); } .blog-index__title { margin: 1rem 0; font-size: var(--fs-4); line-height: 1; letter-spacing: -0.05em; } .blog-index__lead { max-width: 46ch; color: var(--muted); font-size: var(--fs-1); } .post-grid { display: grid; gap: 14px; } @media (min-width: 720px) { .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .post-grid:not(.post-grid--two) { grid-template-columns: repeat(3, 1fr); } } .post-card__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--r-lg); background: var(--white); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .post-card__link:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .post-card__photo { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-2); } .post-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); } .post-card__link:hover .post-card__photo img { transform: scale(1.05); } .post-card__body { display: grid; gap: 0.5rem; padding: 1.1rem 1.25rem 1.4rem; } .post-card__meta { color: var(--muted); font-size: var(--fs--1); } .post-card__title { margin: 0; font-size: var(--fs-1); line-height: 1.15; } .post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; } .post-card__excerpt { color: var(--muted); } .article__head { padding-top: var(--s-3); } .article__crumbs { color: var(--muted); font-size: var(--fs--1); } .article__crumbs a { color: var(--ink); } .article__title { max-width: 22ch; margin: 1rem 0 0.75rem; font-size: var(--fs-4); line-height: 1; letter-spacing: -0.05em; } .article__meta { color: var(--muted); } .article__photo { margin: var(--s-3) 0 0; overflow: hidden; border-radius: var(--r-lg); background: var(--paper-2); } .article__photo img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; } .article__content { max-width: 68ch; margin: var(--s-4) auto 0; font-size: var(--fs-1); line-height: 1.65; } .article__content .lead { font-size: var(--fs-2); line-height: 1.35; font-family: var(--display); letter-spacing: -0.03em; } .article__content li + li { margin-top: 0.4rem; } .article__sources { max-width: 68ch; margin: var(--s-3) auto 0; font-size: var(--fs-1); color: var(--muted); } /* same ch as the text, so the edges line up */ .article__sources summary { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs--1); font-weight: 600; cursor: pointer; } .article__sources ul { margin: 0.25rem 0 0; padding-left: 1.2rem; font-size: var(--fs--1); } .article__sources li + li { margin-top: 0.35rem; } .article__sources a { color: var(--ink); } .article__cta { text-align: center; } /* --- About: numbers, quiz, stories -------------------------------------- */ .about-numbers__list { display: grid; gap: 14px; margin: var(--s-3) 0 0; } @media (min-width: 720px) { .about-numbers__list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .about-numbers__list { grid-template-columns: repeat(4, 1fr); } } .about-numbers__item { padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: var(--r-lg); background: var(--white); } .about-numbers__item:nth-child(1) { background: var(--coral); } .about-numbers__item:nth-child(2) { background: var(--lilac); } .about-numbers__item:nth-child(3) { background: var(--mint); } .about-numbers__item:nth-child(4) { background: var(--butter); } .about-numbers__item dt { font: 600 var(--fs-3)/1 var(--display); letter-spacing: -0.05em; } .about-numbers__item dd { margin: 0.6rem 0 0; } .quiz { padding: clamp(1.2rem, 4vw, 2.5rem); border-radius: var(--r-lg); background: var(--ink); color: var(--paper); } .quiz .section__title { color: var(--paper); } .quiz__list { display: grid; gap: var(--s-3); margin: var(--s-3) 0 0; padding: 0; list-style: none; counter-reset: q; } @media (min-width: 1100px) { .quiz__list { grid-template-columns: repeat(3, 1fr); } } .quiz__item { counter-increment: q; } .quiz fieldset { height: 100%; margin: 0; padding: 0; border: 0; } .quiz__q { padding: 0; font-weight: 600; font-size: var(--fs-1); line-height: 1.3; } .quiz__q::before { content: counter(q) ". "; color: var(--coral); } .quiz__options { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .quiz__option { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.2rem; border: 1.5px solid rgb(243 239 232 / 0.5); border-radius: 999px; font: 500 var(--fs-1)/1 var(--display); letter-spacing: -0.02em; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; } .quiz__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .quiz__option:hover { border-color: var(--paper); } .quiz__option:has(input:focus-visible) { outline: 3px solid var(--coral); outline-offset: 3px; } .quiz__option.is-right { border-color: var(--mint); background: var(--mint); color: var(--ink); } .quiz__option.is-wrong { border-color: var(--coral); background: var(--coral); color: var(--ink); } .quiz__answer { min-height: 1.6em; margin: 0.9rem 0 0; } .about-blog .section__head { flex-wrap: wrap; } .about-blog__note { margin: 0; color: var(--muted); } /* --- Buyer's pages (page.php, page-rozmiry.php) ------------------------- */ .info-hero { padding-top: var(--s-3); } .info-hero__card { position: relative; overflow: hidden; padding: clamp(1.5rem, 5vw, 3.5rem); padding-right: clamp(6rem, 22vw, 16rem); border-radius: var(--r-lg); background: var(--tone, var(--lilac)); isolation: isolate; } .info-hero__title { margin: 1rem 0 0; font-size: var(--fs-4); line-height: 1; letter-spacing: -0.055em; } .info-hero__lead { max-width: 36ch; margin: 1rem 0 0; font-size: var(--fs-1); } .info-hero__icon { position: absolute; z-index: -1; right: clamp(-1rem, 2vw, 3rem); bottom: clamp(-2rem, -1vw, 0rem); width: clamp(8rem, 24vw, 15rem); height: clamp(8rem, 24vw, 15rem); color: var(--ink); opacity: 0.9; transform: rotate(-12deg); } .info-hero__icon svg { width: 100%; height: 100%; stroke-width: 1.1; } .info-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4) var(--s-3); } @media (min-width: 1000px) { .info-body { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; } .info-aside { position: sticky; top: 6.5rem; } } .info-text { max-width: 68ch; font-size: var(--fs-1); line-height: 1.65; } .info-text > p:first-child { font: 500 var(--fs-2)/1.35 var(--display); letter-spacing: -0.03em; } .info-text h2 { position: relative; margin-top: 1.8em; padding-top: 1rem; font-size: var(--fs-2); } .info-text h2::before { content: ""; position: absolute; top: 0; left: 0; width: 2.5rem; height: 4px; border-radius: 4px; background: var(--coral); } .info-text ul, .info-text ol:not(.size-steps) { padding-left: 1.3rem; } .info-text li::marker { color: var(--coral-deep); font-weight: 700; } .info-text li + li { margin-top: 0.4rem; } .info-text table { width: 100%; border-collapse: collapse; font-size: var(--fs-0); } .info-text th, .info-text td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .info-text thead th { background: var(--white); } .info-text .wp-block-table { overflow-x: auto; } .info-nav { padding: 1rem; border-radius: var(--r); background: var(--white); } .info-nav__title { margin: 0.25rem 0.5rem 0.5rem; color: var(--muted); font-size: var(--fs--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .info-nav ul { margin: 0; padding: 0; list-style: none; } .info-nav a { display: flex; align-items: center; gap: 0.75rem; min-height: 48px; padding: 0.4rem 0.6rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-weight: 500; transition: background-color .2s; } .info-nav a:hover { background: var(--paper); } .info-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); } .info-nav svg { flex: none; width: 22px; height: 22px; } /* Size page */ .size-page .info-text > section + section { margin-top: var(--s-4); } .size-page .info-text h2 { margin-top: 0; } .size-calc { padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: var(--r-lg); background: var(--ink); color: var(--paper); } .size-calc h2 { padding-top: 0; color: var(--paper); } .size-calc h2::before, .size-ruler h2::before { display: none; } .size-calc label { display: block; margin-bottom: 0.5rem; font-weight: 600; } .size-calc__row { display: flex; flex-wrap: wrap; gap: 0.6rem; } .size-calc input { flex: 1 1 12rem; min-width: 0; min-height: 54px; padding: 0 1.1rem; border: 2px solid transparent; border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 var(--fs-1)/1 var(--text); } .size-calc input:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; } .size-calc input[aria-invalid="true"] { border-color: var(--coral); } .size-calc__row .button { min-height: 54px; background: var(--coral); color: var(--ink); } .size-calc__row .button:hover { background: var(--paper); color: var(--ink); } .size-calc__hint { margin: 0.6rem 0 0; color: rgb(243 239 232 / 0.8); font-size: var(--fs--1); } .size-calc__result:not(:empty) { display: grid; gap: 1rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgb(243 239 232 / 0.2); } .size-calc__result p { margin: 0; } .size-calc__big { font: 600 var(--fs-2)/1.1 var(--display); letter-spacing: -0.03em; } .size-calc__big b { display: inline-grid; place-items: center; min-width: 2.2em; height: 2.2em; margin-left: 0.3em; border-radius: 50%; background: var(--lilac); color: var(--ink); font-size: 1.4em; vertical-align: middle; animation: size-pop .5s var(--ease); } @keyframes size-pop { from { transform: scale(.4) rotate(-20deg); } } @media (prefers-reduced-motion: reduce) { .size-calc__big b { animation: none; } } .size-calc__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .size-calc__actions .button { background: var(--paper); color: var(--ink); } .size-calc__actions .button--line { border: 1.5px solid rgb(243 239 232 / 0.6); background: transparent; color: var(--paper); } .size-calc__actions .button--line:disabled { opacity: 1; cursor: default; transform: none; } .size-steps { display: grid; gap: 12px; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: s; } @media (min-width: 720px) { .size-steps { grid-template-columns: repeat(2, 1fr); } } .info-text .size-steps li { counter-increment: s; margin: 0; padding: 1.2rem 1.3rem; border-radius: var(--r); background: var(--white); font-size: var(--fs-0); } .size-steps li::before { content: counter(s); display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-bottom: 0.7rem; border-radius: 50%; background: var(--butter); font: 600 var(--fs-0)/1 var(--display); } .size-steps strong { display: block; } .size-ruler { display: grid; gap: 1rem; align-items: center; padding: clamp(1.25rem, 4vw, 2rem); border-radius: var(--r-lg); background: var(--mint); } @media (min-width: 720px) { .size-ruler { grid-template-columns: 1fr auto; } } .size-ruler h2 { padding-top: 0; } .size-ruler p { margin: 0; font-size: var(--fs-0); } .size-tables { display: grid; gap: 14px; margin-top: 1rem; } @media (min-width: 720px) { .size-tables { grid-template-columns: 1.2fr 1fr; align-items: start; } } .info-text .size-table { overflow: hidden; border-radius: var(--r); background: var(--white); } .info-text .size-table caption { padding: 0.9rem 1rem 0.3rem; background: var(--white); font: 600 var(--fs-1)/1.2 var(--display); text-align: left; } .info-text .size-table thead th { color: var(--muted); font-size: var(--fs--1); font-weight: 600; } .info-text .size-table tbody th { width: 40%; font: 600 var(--fs-0)/1 var(--display); } .info-text .size-table tbody tr:last-child > * { border-bottom: 0; } .info-text .size-table tr.is-mine > * { background: var(--lilac); } .size-note { margin-top: 1rem; color: var(--muted); font-size: var(--fs-0); } .size-facts { display: grid; gap: 12px; margin: 1rem 0; } @media (min-width: 720px) { .size-facts { grid-template-columns: repeat(3, 1fr); } } .size-facts > div { padding: 1.1rem 1.2rem; border-radius: var(--r); background: var(--white); } .size-facts dt { font-weight: 700; } .size-facts dd { margin: 0.4rem 0 0; font-size: var(--fs-0); } .info-text .link-arrow { white-space: normal; } @media (max-width: 719px) { .info-hero__card { padding-right: clamp(1.5rem, 5vw, 3.5rem); } .info-hero__icon { top: 1.1rem; right: 1.1rem; bottom: auto; width: 4.5rem; height: 4.5rem; transform: rotate(-8deg); } .info-hero__icon svg { stroke-width: 1.5; } } .info-text .wp-block-table { border-radius: var(--r); background: var(--white); } .info-text .wp-block-table table { border: 0; } .info-text .wp-block-table th, .info-text .wp-block-table td { border: 0; border-bottom: 1px solid var(--line); } .info-text .wp-block-table thead { border: 0; } .info-text .wp-block-table thead th { color: var(--muted); font-size: var(--fs--1); } .info-text .wp-block-table tr:last-child td { border-bottom: 0; } @media (max-width: 719px) { .info-text .wp-block-table table { table-layout: fixed; font-size: var(--fs--1); line-height: 1.45; } .info-text .wp-block-table th, .info-text .wp-block-table td { padding: 0.6rem 0.5rem; overflow-wrap: anywhere; hyphens: auto; } } /* --- «Напишіть нам» (Contacts page) -------------------------------------- */ .contact-form { margin-top: var(--s-3); padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: var(--r-lg); background: var(--white); font-size: var(--fs-0); line-height: 1.55; } .info-text .contact-form h2 { margin-top: 0; padding-top: 0; } .info-text .contact-form h2::before { display: none; } .contact-form__intro { color: var(--muted); } .contact-form form { display: grid; gap: 1rem; margin-top: 1.25rem; } .contact-form form > p { margin: 0; } .contact-form__grid { display: grid; gap: 1rem; } @media (min-width: 720px) { .contact-form__grid { grid-template-columns: 1fr 1fr; } } .contact-form__grid .field { margin: 0; } .contact-form .field input, .contact-form .field textarea { width: 100%; background: var(--paper); } .contact-form .field textarea { min-height: 9rem; padding: 0.7rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r-sm); font: 400 var(--fs-0)/1.5 var(--text); resize: vertical; } .contact-form .field textarea:focus { border-color: var(--ink); } .contact-form [aria-invalid="true"] { border-color: var(--coral-deep); box-shadow: 0 0 0 1px var(--coral-deep); } .field__opt { color: var(--muted); font-weight: 400; } .contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-form__note { color: var(--muted); font-size: var(--fs--1); } .contact-form__error { padding: 0.8rem 1rem; border-radius: var(--r-sm); background: #fde4dc; color: #7a2412; font-weight: 600; } .contact-form__done { padding: 1.2rem 1.3rem; border-radius: var(--r); background: var(--mint); } .contact-form__done p { margin: 0; } .contact-form__done p + p { margin-top: 0.35rem; } .article__content table { width: 100%; margin-block: 1.5rem; border-collapse: collapse; overflow: hidden; border-radius: var(--r); background: var(--white); font-size: var(--fs-0); line-height: 1.45; } .article__content th, .article__content td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .article__content thead th { color: var(--muted); font-size: var(--fs--1); font-weight: 600; } .article__content tbody td:first-child { font-weight: 600; } .article__content tbody tr:last-child td { border-bottom: 0; } @media (max-width: 719px) { .article__content table { table-layout: fixed; font-size: var(--fs--1); } .article__content th, .article__content td { padding: 0.6rem 0.5rem; overflow-wrap: anywhere; hyphens: auto; } } .info-text td small { display: block; margin-top: 0.25rem; color: var(--muted); font-size: var(--fs--1); overflow-wrap: anywhere; } /* --- Search: a button in the bar, the field in a panel under it ---------- */ .search-toggle[aria-expanded="true"] { background: var(--ink); color: var(--paper); } .search-panel { border-top: 1px solid var(--line); padding-block: 12px; animation: search-in .25s var(--ease); } @keyframes search-in { from { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .search-panel { animation: none; } } .site-search--panel { display: flex; align-items: center; gap: 8px; max-width: 760px; margin-inline: auto; } .site-search--panel input { flex: 1; min-width: 0; min-height: 52px; padding: 0.5rem 1.2rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--white); font-size: var(--fs-1); } .site-search--panel input::-webkit-search-cancel-button { display: none; } .site-search__go { min-height: 52px; } @media (max-width: 559px) { .site-search__go { display: none; } } .site-search--panel .suggest { left: 0; right: auto; width: 100%; } /* A display:flex summary loses the browser's triangle: draw one, turned when open. */ .article__sources summary::before, .about-sources summary::before { content: ""; width: 0; height: 0; margin-right: 0.5em; border-block: 0.32em solid transparent; border-left: 0.5em solid currentColor; transition: transform .2s; } .article__sources[open] summary::before, .about-sources[open] summary::before { transform: rotate(90deg); } .article__sources summary::-webkit-details-marker, .about-sources summary::-webkit-details-marker { display: none; } /* Phones: «Фільтри» and the sorting share one row in two equal halves, «Показати лише ваш розмір» takes the row under them — before, the long sorting label pushed the select past the screen edge. */ @media (max-width: 719px) { .catalog__toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .catalog__toolbar > * { min-width: 0; } .catalog__filter-btn { justify-content: center; width: 100%; min-height: 46px; padding-inline: 0.8rem; } .catalog__toolbar .woocommerce-ordering select { width: 100%; padding-left: 0.9rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .my-size-bar { grid-column: 1 / -1; margin: 0; } .my-size-bar__link { justify-content: center; width: 100%; min-height: 46px; } } /* Phones: the filter sheet takes the whole screen, over the header and the ticker, and «Показати» sits on its own solid strip at the bottom instead of floating over the last options. */ @media (max-width: 1023px) { .catalog__filters { inset: 0; z-index: 200; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; } .filters__head { border-bottom: 1px solid var(--line); padding-block: 0.6rem; } .filters__foot { margin-inline: -1.25rem; padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -12px 24px -16px rgb(20 18 16 / 0.35); border-top: 1px solid var(--line); } } /* The narrowest phones (320 px): the header icons were 28 px wider than the screen. */ @media (max-width: 359px) { .site-header__bar { gap: 0.2rem; } .site-header__tools .icon-btn, .site-header__toggle { width: 40px; height: 40px; } .site-header__logo .logo { height: 2.4rem; } } @media (max-width: 719px) { .woocommerce-pagination ul.page-numbers { gap: 4px; } .woocommerce-pagination li > .page-numbers { min-width: 40px; height: 44px; padding: 0 0.5rem; } } /* Phones in the middle of the list: drop the neighbours that stand next to «…» — «← 1 … 50 … 104 →». */ @media (max-width: 479px) { .woocommerce-pagination li:has(> .dots) + li:has(+ li > .current), .woocommerce-pagination li:has(> .current) + li:has(+ li > .dots) { display: none; } } @media (max-width: 359px) { .woocommerce-pagination ul.page-numbers { gap: 3px; } .woocommerce-pagination li > .page-numbers { min-width: 34px; height: 42px; padding: 0 0.35rem; font-size: var(--fs--1); } } /* --- Home: about the shop + questions ----------------------------------- */ .home-about { display: grid; gap: var(--s-4); } @media (min-width: 1000px) { .home-about { grid-template-columns: 1.1fr 1fr; align-items: start; } } .home-about__text { max-width: 62ch; color: var(--ink-2); } .home-about__text p { margin: 0 0 1em; } .home-about__text a { color: var(--ink); text-decoration-color: var(--coral-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; } .home-about__faq { padding: clamp(1rem, 3vw, 1.75rem); border-radius: var(--r-lg); background: var(--white); } .home-about__faq-title { margin: 0 0 0.5rem; font-size: var(--fs-2); } .faq, .home-about__faq .wp-block-details { border-bottom: 1px solid var(--line); } .faq:last-child, .home-about__faq .wp-block-details:last-child { border-bottom: 0; } .faq summary, .home-about__faq .wp-block-details summary { display: flex; align-items: center; gap: 1rem; min-height: 56px; padding: 0.6rem 0; font-weight: 600; cursor: pointer; list-style: none; } .faq summary::-webkit-details-marker, .home-about__faq summary::-webkit-details-marker { display: none; } .faq summary::after, .home-about__faq .wp-block-details summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: var(--paper); font: 500 1.2rem/1 var(--text); transition: transform .25s var(--ease), background-color .2s; } .faq[open] summary::after, .home-about__faq .wp-block-details[open] summary::after { transform: rotate(45deg); background: var(--coral); } .faq p, .home-about__faq .wp-block-details p { margin: 0 0 1rem; color: var(--ink-2); } .faq a, .home-about__faq .wp-block-details a { color: var(--ink); text-decoration-color: var(--coral-deep); text-decoration-thickness: 2px; } .home-about__title { margin: 0 0 1rem; font-size: var(--fs-2); } /* --- Sorting menu (main.js replaces WooCommerce's select) ---------------- */ .sort { position: relative; } .sort__btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; min-height: 46px; padding: 0.4rem 1rem 0.4rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: 500 var(--fs-0)/1.2 var(--text); cursor: pointer; white-space: nowrap; } .sort__btn::after { content: ""; flex: none; width: 0.5em; height: 0.5em; border: solid currentColor; border-width: 0 2px 2px 0; rotate: 45deg; translate: 0 -25%; transition: rotate .2s, translate .2s; } .sort__btn[aria-expanded="true"] { border-color: var(--ink); } .sort__btn[aria-expanded="true"]::after { rotate: 225deg; translate: 0 25%; } .sort__label { overflow: hidden; text-overflow: ellipsis; } .sort__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 70; min-width: 100%; width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 6px; list-style: none; border-radius: var(--r); background: var(--white); box-shadow: var(--shadow-lg); } .sort__menu a { display: flex; align-items: center; min-height: 44px; padding: 0 0.9rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; } .sort__menu a:hover, .sort__menu a:focus-visible { background: var(--paper); } .sort__menu a[aria-current] { font-weight: 700; } .sort__menu a[aria-current]::after { content: "✓"; margin-left: auto; padding-left: 1rem; color: var(--coral-deep); } @media (max-width: 719px) { .sort__btn { gap: 0.4rem; padding-inline: 0.85rem 0.75rem; font-size: 0.94rem; } .catalog__filter-btn { font-size: 0.94rem; } } /* Bigger touch areas for small text links, without changing how they look (WCAG 2.5.8, thumbs on phones). */ .link-arrow { position: relative; } .link-arrow::before { content: ""; position: absolute; inset: -8px -4px; } .crumbs a, .article__crumbs a { position: relative; display: inline-block; padding-block: 0.5rem; } .crumbs { margin-top: -0.5rem; line-height: 1.3; } /* the taller links keep the old spacing */ /* Phones: the product's own name is the h1 right below — the trail stops at its category. */ @media (max-width: 719px) { .pdp .crumbs__item:last-child, .pdp .crumbs__sep:has(+ .crumbs__item:last-child) { display: none; } } .active-filters__reset { min-height: 44px; } /* Phones have no hover: the second card photo would download for nothing. */ @media (hover: none) { .card__img--alt { display: none; } } .size-pick__count { font-size: max(12px, 0.78rem); } /* Nova Poshta fields (select2): the placeholder was too pale. */ .select2-selection__placeholder { color: var(--muted) !important; } /* --- Product: a buy bar on phones once «Додати в кошик» has scrolled away (main.js) ---- */ .buy-bar { display: none; } @media (max-width: 899px) { .buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 16px calc(0.6rem + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 -10px 30px -18px rgb(20 18 16 / 0.45); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .3s var(--ease); } .buy-bar.is-shown { transform: none; } .buy-bar[hidden] { display: none; } .buy-bar__price { flex: none; font: 600 var(--fs-1)/1.1 var(--display); letter-spacing: -0.03em; } .buy-bar__price del { display: none; } .buy-bar__price ins { text-decoration: none; } .buy-bar .button { flex: 1; min-height: 50px; } body.has-buy-bar .to-top { bottom: 150px; } body.has-buy-bar .site-footer { padding-bottom: 80px; } } @media (max-width: 899px) and (prefers-reduced-motion: reduce) { .buy-bar { transition: none; } } /* --- Home on phones: shorter scroll ------------------------------------- */ @media (max-width: 719px) { /* sizes: five small circles a row, the counts only for screen readers */ .size-pick__list { grid-template-columns: repeat(5, 1fr); gap: 8px; } .size-pick__num { font-size: 1.2rem; } .size-pick__count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* articles: a row to swipe, like the audience cards */ .post-grid--rail { grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; } .post-grid--rail > * { scroll-snap-align: start; } .post-grid--rail .post-card__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* promises: three slim rows instead of three tall cards */ .promises:not(.promises--compact) { gap: 8px; } .promises:not(.promises--compact) .promises__item { grid-template-columns: auto 1fr; align-items: center; gap: 0.9rem; padding: 1rem 1.1rem; border-radius: var(--r); } .promises:not(.promises--compact) .promises__item strong { font-size: var(--fs-0); } .promises:not(.promises--compact) .promises__text { font-size: var(--fs--1); } } @media (max-width: 719px) { .cat-index a { gap: 0.75rem; padding-block: 0.75rem; } .cat-index__name { font-size: 1.3rem; } } /* Nova Poshta city / branch (select2): a long branch name — «№5500: Немирівське шосе, 84а (БРСМ)» — stretched the box past the screen and the page scrolled sideways. The box keeps the field's width and the name ends with «…»; the full name is in the title on hover and read out by screen readers. */ .woocommerce-checkout .form-row { min-width: 0; } .woocommerce-checkout .select2-container { width: 100% !important; max-width: 100%; min-width: 0; } .woocommerce-checkout .select2-selection--single { display: flex; align-items: center; min-width: 0; } .woocommerce-checkout .select2-selection__rendered { display: block; min-width: 0; flex: 1; overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap !important; padding-right: 2rem !important; } .select2-dropdown { max-width: calc(100vw - 32px); } .select2-results__option { overflow-wrap: anywhere; } /* Checkout steps are grid items: without min-width 0 a long branch name widened «Доставка» to 640 px on a phone. */ form.woocommerce-checkout > * { min-width: 0; } .woocommerce-checkout .form-row { grid-template-columns: minmax(0, 1fr); } .woocommerce-checkout .woocommerce-input-wrapper { min-width: 0; } /* «Про нас» is a row of blocks now: the same rhythm the old fixed layout had. */ .about-block { margin-top: var(--s-5); } .about-hero + .about-block { margin-top: var(--s-3); } .about > :last-child { margin-bottom: var(--s-5); } /* --- Mini cart: a side drawer on desktop, the usual bottom sheet on phones --- */ .minicart__inner { grid-template-rows: auto auto 1fr auto auto; min-height: 100%; } @media (min-width: 601px) { .minicart { width: min(440px, 100vw); height: 100dvh; max-height: none; margin: 0 0 0 auto; border-radius: var(--r-lg) 0 0 var(--r-lg); } .minicart[open] { animation: minicart-in .35s var(--ease); } .minicart__inner { height: 100%; overflow-y: auto; } } @keyframes minicart-in { from { transform: translateX(40px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .minicart[open] { animation: none; } } .minicart__added { margin: 0; padding: 0.7rem 0.9rem; border-radius: var(--r-sm); background: var(--mint); font-size: var(--fs--1); } .minicart__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .minicart__item { display: grid; grid-template-columns: 72px 1fr; gap: 0.85rem; padding: 0.7rem; border-radius: var(--r); background: var(--white); transition: opacity .2s; } .minicart__item.is-busy { opacity: 0.5; } .minicart__item img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; } .minicart__info { display: grid; gap: 0.2rem; min-width: 0; } .minicart__name { color: var(--ink); font-weight: 600; line-height: 1.3; text-decoration: none; } .minicart__name:hover { text-decoration: underline; } .minicart__size { color: var(--muted); font-size: var(--fs--1); } .minicart__price { font: 600 var(--fs-0)/1.2 var(--display); } .minicart__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.3rem; } .minicart__qty { min-width: 2ch; text-align: center; font-weight: 600; } .minicart__remove { min-height: 44px; padding: 0 0.4rem; border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; } .minicart__remove:hover { color: var(--ink); } .minicart__empty { display: grid; justify-items: start; gap: 1rem; padding: 1rem 0; } .minicart__empty p { margin: 0; color: var(--muted); } .minicart__loading { color: var(--muted); } .minicart__foot { display: grid; gap: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--line); } .minicart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: var(--fs-1); } .minicart__total strong { font: 600 var(--fs-2)/1 var(--display); letter-spacing: -0.03em; } .minicart__note { margin: 0; color: var(--muted); font-size: var(--fs--1); } .minicart__checkout { justify-content: center; } .minicart__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; } .minicart__continue { padding: 0; border: 0; border-bottom: 1.5px solid currentColor; background: none; font: inherit; font-weight: 600; cursor: pointer; } .single_add_to_cart_button.loading { opacity: 0.7; pointer-events: none; } /* Phones: the trail is one line that ends in «…» — two lines in the fallback font and one in the web font (or the other way round) moved the whole product below it (CLS). */ @media (max-width: 719px) { .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }