/* ========================================================================== CoverUp tēma. Dizaina tokeni no Figma (krāsas, fonti, rādiusi). ========================================================================== */ @font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/oswald-latin-wght-normal.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: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/oswald-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../fonts/oswald-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-wght-normal.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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-cyrillic-wght-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* Rezerves fonti ar Oswald un Manrope platumu (size-adjust), lai teksts nelec, kamēr ielādējas īstie fonti. */ @font-face { font-family: "Oswald Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Roboto"); size-adjust: 77%; ascent-override: 155%; descent-override: 37.5%; line-gap-override: 0%; } @font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Roboto"); size-adjust: 105%; ascent-override: 101.5%; descent-override: 28.6%; line-gap-override: 0%; } :root { --cu-ink: #18170e; --cu-ink-2: #22211a; --cu-cream: #fbf7f4; --cu-sand: #f1ebe3; --cu-line: #e3dcd2; --cu-muted: #6e695f; --cu-muted-dark: #a9a498; --cu-line-dark: #3a372c; --cu-yellow: #feb92f; --cu-yellow-soft: #fde7b8; --cu-red: #fc002d; --cu-red-dark: #d90026; --cu-green: #0f5a3a; --cu-green-dark: #0a3d28; --cu-whatsapp: #25d366; --cu-white: #fff; --cu-font-display: "Oswald", "Oswald Fallback", "Arial Narrow", sans-serif; --cu-font-body: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --cu-r-sm: 6px; --cu-r-md: 12px; --cu-r-lg: 20px; --cu-r-xl: 28px; --cu-r-pill: 999px; --cu-gutter: clamp(16px, 4vw, 40px); --cu-wrap: 1440px; --cu-space-section: clamp(56px, 7vw, 112px); --cu-space-tight: clamp(32px, 4vw, 64px); --cu-fs-h1: clamp(48px, 7.5vw, 120px); --cu-fs-h2: clamp(36px, 4.4vw, 64px); --cu-fs-h3: clamp(22px, 2vw, 28px); --cu-fs-body: 16px; --cu-fs-lead: clamp(16px, 1.3vw, 20px); --cu-shadow: 0 1px 2px rgba(24, 23, 14, .06), 0 8px 24px rgba(24, 23, 14, .06); --cu-ease: cubic-bezier(.23, 1, .32, 1); --cu-ease-out: cubic-bezier(.23, 1, .32, 1); --cu-ease-in-out: cubic-bezier(.77, 0, .175, 1); --cu-ease-drawer: cubic-bezier(.32, .72, 0, 1); --cu-header-h: 100px; --cu-sitenote-h: 0px; } /* ---------- Pamati ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; scrollbar-gutter: stable; } /* Gluda ritināšana tikai pēc klikšķa uz enkura saites. Uz visas lapas tā lika pārlādei "aizbraukt" līdz iepriekšējai vietai. */ @media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--cu-cream); color: var(--cu-ink); font-family: var(--cu-font-body); font-size: var(--cu-fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; } body.cu-locked { overflow: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 600; } p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; } ul[role="list"], ol[role="list"] { list-style: none; } :focus-visible { outline: 2px solid var(--cu-red); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--cu-yellow); color: var(--cu-ink); } .screen-reader-text, .cu-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .cu-skip { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--cu-yellow); color: var(--cu-ink); padding: 10px 16px; border-radius: var(--cu-r-md); font-weight: 700; } .cu-skip:focus { top: 16px; } .cu-hp { position: absolute; left: -9999px; } [hidden] { display: none !important; } .cu-wrap { width: min(var(--cu-wrap), 100% - 2 * var(--cu-gutter)); margin-inline: auto; } .cu-wrap--text { max-width: 900px; } .cu-section { padding-block: var(--cu-space-section); } .cu-section--tight { padding-block: var(--cu-space-tight); } .cu-section--white { background: var(--cu-white); } .cu-muted { color: var(--cu-muted); } .cu-small { font-size: 13px; color: var(--cu-muted); } .cu-ph { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--cu-sand); } .cu-h1 { font-family: var(--cu-font-display); font-size: var(--cu-fs-h1); font-weight: 600; line-height: .95; text-transform: uppercase; letter-spacing: -.01em; } /* ---------- Ikonas, birkas, pogas ---------- */ .cu-icon { flex: none; } .cu-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 4px; border-radius: var(--cu-r-sm); font-family: var(--cu-font-display); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; background: var(--cu-yellow); color: var(--cu-ink); } .cu-tag--red { background: var(--cu-red); color: var(--cu-white); } .cu-tag--ink { background: var(--cu-ink); color: var(--cu-white); } .cu-tag--light { background: var(--cu-white); color: var(--cu-ink); } .cu-tag--green { background: var(--cu-green); color: var(--cu-white); } .cu-btn { --h: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 28px; border-radius: var(--cu-r-pill); border: 1.5px solid transparent; font-family: var(--cu-font-body); font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; text-align: center; transition: background-color .2s var(--cu-ease), color .2s var(--cu-ease), border-color .2s var(--cu-ease), transform .15s var(--cu-ease); white-space: nowrap; cursor: pointer; } .cu-btn:active { transform: scale(.97); } .cu-btn .cu-icon { transition: transform .16s var(--cu-ease-out); } @media (hover: hover) and (pointer: fine) { .cu-btn:hover .cu-icon--arrow-right, .cu-readmore:hover .cu-icon--arrow-right { transform: translateX(3px); } .cu-btn:hover .cu-icon--arrow-ur { transform: translate(2px, -2px); } } .cu-btn--m { --h: 44px; padding: 0 20px; font-size: 13px; } .cu-btn--block { display: flex; width: 100%; } .cu-btn--primary { background: var(--cu-red); color: var(--cu-white); } .cu-btn--primary:hover { background: var(--cu-red-dark); color: var(--cu-white); } .cu-btn--dark { background: var(--cu-ink); color: var(--cu-white); } .cu-btn--dark:hover { background: #000; color: var(--cu-white); } .cu-btn--light { background: var(--cu-white); color: var(--cu-ink); } .cu-btn--light:hover { background: var(--cu-yellow); color: var(--cu-ink); } .cu-btn--yellow { background: var(--cu-yellow); color: var(--cu-ink); } .cu-btn--yellow:hover { background: #ffc94f; color: var(--cu-ink); } .cu-btn--outline { border-color: var(--cu-ink); color: var(--cu-ink); background: transparent; } .cu-btn--outline:hover { background: var(--cu-ink); color: var(--cu-white); } .cu-btn--outline-dark { border-color: rgba(255, 255, 255, .85); color: var(--cu-white); background: transparent; } .cu-btn--outline-dark:hover { background: var(--cu-white); color: var(--cu-ink); } .cu-btn--whatsapp, .cu-btn--whatsapp:visited { background: var(--cu-whatsapp); color: var(--cu-ink); } .cu-btn--whatsapp:hover, .cu-btn--whatsapp:focus-visible { background: #4be083; color: var(--cu-ink); } .cu-btn--whatsapp .cu-icon { color: var(--cu-ink); } .cu-btn[disabled], .cu-btn.is-loading { opacity: .6; pointer-events: none; } .cu-iconbtn { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid transparent; transition: background-color .2s, color .2s, border-color .2s, transform .15s; flex: none; } .cu-iconbtn:active { transform: scale(.94); } .cu-iconbtn--outline { border-color: var(--cu-line); background: var(--cu-white); } .cu-iconbtn--outline:hover { border-color: var(--cu-ink); } .cu-iconbtn--outline-dark { border-color: rgba(255, 255, 255, .4); color: var(--cu-white); } .cu-iconbtn--outline-dark:hover { border-color: var(--cu-white); } .cu-iconbtn--dark { background: var(--cu-ink); color: var(--cu-white); } .cu-iconbtn--white { background: var(--cu-white); color: var(--cu-ink); } .cu-iconbtn--red { background: var(--cu-red); color: var(--cu-white); } .cu-iconbtn--yellow { background: var(--cu-yellow); color: var(--cu-ink); } .cu-iconbtn--glass { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: var(--cu-white); backdrop-filter: blur(8px); } .cu-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--cu-r-pill); background: var(--cu-yellow); color: var(--cu-ink); font-size: 12px; font-weight: 800; line-height: 1; } .cu-count--red { background: var(--cu-red); color: var(--cu-white); } .cu-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; } .cu-link:hover { color: var(--cu-red); } .cu-link--red { color: var(--cu-red); } .cu-readmore { display: inline-flex; align-items: center; gap: 6px; color: var(--cu-red); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .cu-readmore .cu-icon { transition: transform .2s var(--cu-ease); } .cu-readmore:hover .cu-icon { transform: translateX(3px); } .cu-chips { display: flex; flex-wrap: wrap; gap: 10px; } .cu-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--cu-r-pill); border: 1.5px solid var(--cu-line); background: var(--cu-white); font-size: 14px; font-weight: 600; line-height: 1.2; transition: border-color .2s, background .2s; } .cu-chip span { color: var(--cu-muted); font-size: 12px; font-weight: 500; } .cu-chip:hover { border-color: var(--cu-ink); } .cu-chip.is-active { background: var(--cu-ink); border-color: var(--cu-ink); color: var(--cu-white); } .cu-chip.is-active span { color: var(--cu-yellow); } .cu-sticker { position: absolute; display: grid; place-items: center; width: 152px; height: 152px; border-radius: 50%; text-align: center; font-family: var(--cu-font-display); text-transform: uppercase; line-height: 1; transform: rotate(-12deg); } .cu-sticker > span { display: grid; gap: 4px; } .cu-sticker__l0 { font-size: 14px; font-weight: 500; letter-spacing: .04em; } .cu-sticker__l1 { font-size: 26px; font-weight: 600; } .cu-sticker__l2 { font-size: 14px; font-weight: 500; } .cu-sticker--yellow { background: var(--cu-yellow); color: var(--cu-ink); } .cu-sticker--red { background: var(--cu-red); color: var(--cu-white); } .cu-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--cu-r-md); font-size: 14px; line-height: 1.45; margin: 0 0 16px; } .cu-notice svg { margin-top: 1px; } .cu-notice--success { background: #e6efe9; color: var(--cu-green); } .cu-notice--error { background: #ffe3e8; color: #a3001d; } .cu-notice--info { background: var(--cu-yellow-soft); color: var(--cu-ink); } /* ---------- Augšējā josla un galvene ---------- */ .cu-topbar { background: var(--cu-ink); color: var(--cu-white); font-size: 13px; position: relative; z-index: 61; } .cu-topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 42px; } .cu-topbar__usp { display: flex; gap: 14px; list-style: none; } .cu-topbar__usp li { display: flex; align-items: center; gap: 14px; } .cu-topbar__usp li + li::before { content: "\2731"; color: var(--cu-yellow); font-size: 12px; } .cu-topbar__meta { display: flex; align-items: center; gap: 22px; } .cu-topbar__phone { display: inline-flex; align-items: center; gap: 6px; } .cu-topbar__phone .cu-icon { color: var(--cu-yellow); } .cu-topbar__hours { color: var(--cu-muted-dark); } /* Valodu izvēle: nolaižamā izvēlne (details/summary, strādā arī bez JS). */ .cu-lang { position: relative; z-index: 5; font-size: 12px; } .cu-lang__btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 9px; border-radius: var(--cu-r-pill); border: 1px solid rgba(255, 255, 255, .2); cursor: pointer; list-style: none; user-select: none; transition: border-color .2s, background-color .2s; } .cu-lang__btn::-webkit-details-marker { display: none; } .cu-lang__btn::marker { content: ""; } .cu-lang__code { font-weight: 700; letter-spacing: .06em; line-height: 1; } .cu-lang__globe { color: var(--cu-yellow); } .cu-lang__chev { opacity: .7; transition: transform .2s var(--cu-ease-out); } .cu-lang[open] .cu-lang__chev { transform: rotate(180deg); } .cu-lang--dark .cu-lang__btn { color: var(--cu-white); } .cu-lang--dark .cu-lang__btn:hover, .cu-lang--dark[open] .cu-lang__btn { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); } .cu-lang--light .cu-lang__btn { height: 44px; padding: 0 10px 0 14px; border-color: var(--cu-line); background: var(--cu-white); color: var(--cu-ink); font-size: 13px; } .cu-lang--light .cu-lang__globe { color: var(--cu-red); } .cu-lang--light .cu-lang__btn:hover, .cu-lang--light[open] .cu-lang__btn { border-color: var(--cu-ink); } .cu-lang__menu { position: absolute; right: 0; min-width: 200px; margin: 0; padding: 6px; list-style: none; border-radius: var(--cu-r-md); background: var(--cu-white); color: var(--cu-ink); box-shadow: 0 18px 40px rgba(24, 23, 14, .22), 0 0 0 1px rgba(24, 23, 14, .06); transform-origin: top right; animation: cu-lang-in .18s var(--cu-ease-out); } .cu-lang--down .cu-lang__menu { top: calc(100% + 8px); } .cu-lang--up .cu-lang__menu { bottom: calc(100% + 8px); transform-origin: bottom right; } @keyframes cu-lang-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } } .cu-lang--up .cu-lang__menu { animation-name: cu-lang-in-up; } @keyframes cu-lang-in-up { from { opacity: 0; transform: translateY(4px) scale(.98); } } .cu-lang__item { display: grid; grid-template-columns: 30px 1fr 16px; align-items: center; gap: 6px; padding: 9px 10px; border-radius: var(--cu-r-sm); font-size: 14px; font-weight: 500; line-height: 1.2; transition: background-color .15s; } .cu-lang__item:hover, .cu-lang__item:focus-visible { background: var(--cu-sand); color: var(--cu-ink); } .cu-lang__item-code { font-family: var(--cu-font-display); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--cu-muted); } .cu-lang__item.is-current { font-weight: 700; } .cu-lang__item.is-current .cu-lang__item-code, .cu-lang__tick { color: var(--cu-red); } .cu-header { position: sticky; top: 0; z-index: 60; background: var(--cu-ink); color: var(--cu-white); transition: background-color .3s var(--cu-ease), box-shadow .3s; } .cu-header__row { display: flex; align-items: center; gap: 24px; min-height: var(--cu-header-h); } .cu-header__left { display: flex; align-items: center; gap: 28px; } .cu-header__burger { display: none; color: var(--cu-white); } .cu-header__burger:hover { background: rgba(255, 255, 255, .1); } .cu-logo { display: inline-flex; color: var(--cu-white); flex: none; } .cu-logo .cu-logo-svg { width: 150px; height: auto; } .cu-logo:hover { color: var(--cu-white); } .cu-logo--dark, .cu-logo--dark:hover { color: var(--cu-ink); } .cu-logo .cu-logo-svg { transition: transform .3s var(--cu-ease-out); } @media (hover: hover) and (pointer: fine) { .cu-logo:hover .cu-logo-svg { transform: scale(1.03); } } .cu-catbtn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 18px; border-radius: var(--cu-r-pill); background: var(--cu-yellow); color: var(--cu-ink); font-size: 15px; font-weight: 600; transition: background-color .2s; } .cu-catbtn:hover { background: #ffc94f; } .cu-catbtn__chev { transition: transform .25s var(--cu-ease); } .cu-catbtn[aria-expanded="true"] .cu-catbtn__chev { transform: rotate(180deg); } .cu-nav { flex: 1; display: flex; justify-content: center; } .cu-nav__list { display: flex; gap: 30px; list-style: none; } .cu-nav__list a { font-size: 15px; font-weight: 600; transition: color .2s; white-space: nowrap; } .cu-nav__list a:hover, .cu-nav__list .current-menu-item > a { color: var(--cu-yellow); } .cu-nav__list li:first-child a { color: var(--cu-yellow); } .cu-nav__list a { position: relative; padding-block: 6px; } .cu-nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--cu-ease-out); } .cu-nav__list a:hover::after, .cu-nav__list .current-menu-item > a::after { transform: scaleX(1); } .cu-header__actions .cu-iconbtn, .cu-cartbtn, .cu-catbtn { transition: background-color .2s, color .2s, border-color .2s, transform .15s var(--cu-ease-out); } .cu-cartbtn:hover { background: var(--cu-yellow); color: var(--cu-ink); } .cu-cartbtn:hover .cu-count--red { background: var(--cu-ink); color: var(--cu-white); } .cu-header__actions { display: flex; align-items: center; gap: 10px; } .cu-searchbtn { display: inline-flex; align-items: center; gap: 10px; width: 210px; height: 46px; padding: 0 18px; border-radius: var(--cu-r-pill); border: 1.5px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); font-size: 14px; transition: border-color .2s; } .cu-searchbtn:hover { border-color: rgba(255, 255, 255, .6); } .cu-wishbtn { position: relative; width: 46px; height: 46px; } .cu-wishbtn .cu-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; font-size: 10px; } .cu-cartbtn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 7px 0 18px; border-radius: var(--cu-r-pill); background: var(--cu-white); color: var(--cu-ink); font-size: 15px; font-weight: 700; } .cu-cartbtn .cu-count { width: 32px; height: 32px; } .cu-cartbtn .cu-count[hidden] { display: none !important; } /* Tukšam grozam skaitļa vieta netiek rezervēta, poga simetriska. */ .cu-cartbtn:has(.cu-count[hidden]) { padding: 0 18px; } /* Sākumlapā galvene caurspīdīga virs hero. */ .cu-has-hero .cu-header { position: fixed; left: 0; right: 0; top: 0; transform: translateY(calc(42px + var(--cu-sitenote-h))); background: transparent; border-bottom: 1px solid rgba(255, 255, 255, .14); transition: background-color .3s var(--cu-ease-out), transform .3s var(--cu-ease-out), border-color .3s; } .cu-has-hero .cu-header.is-scrolled { transform: none; background: rgba(24, 23, 14, .96); border-bottom-color: transparent; } .cu-has-hero .cu-header.is-scrolled .cu-header__row { min-height: 84px; } .cu-header__row { transition: min-height .3s var(--cu-ease-out); } .cu-has-hero.admin-bar .cu-header { top: 32px; transition: background-color .3s var(--cu-ease-out), transform .3s var(--cu-ease-out), border-color .3s, top .3s var(--cu-ease-out); } body.admin-bar:not(.cu-has-hero) .cu-header { top: 32px; } /* Admin josla (tikai ielogotiem): planšetē 46 px un fiksēta, telefonā (līdz 600 px) aizritinās prom, tāpēc galvene pēc ritināšanas pie paša augšas. */ @media (max-width: 782px) { .cu-has-hero.admin-bar .cu-header { top: 46px; } body.admin-bar:not(.cu-has-hero) .cu-header { top: 46px; } } @media (max-width: 600px) { .cu-has-hero.admin-bar .cu-header.is-scrolled { top: 0; } body.admin-bar:not(.cu-has-hero) .cu-header { top: 0; } } .cu-header--checkout .cu-header__row { justify-content: space-between; min-height: 92px; } .cu-secure { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .cu-secure .cu-icon { color: var(--cu-yellow); } .cu-header__help { color: var(--cu-muted-dark); font-size: 14px; } .cu-header__help a { color: var(--cu-white); font-weight: 700; margin-left: 6px; } /* ---------- Mega izvēlne ---------- */ .cu-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 59; padding-top: 0; color: var(--cu-ink); } .cu-mega::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100vh; z-index: -1; cursor: pointer; } .cu-mega__box { display: grid; grid-template-columns: 380px 1fr 360px; gap: 40px; padding: 40px; background: var(--cu-cream); border-radius: 0 0 var(--cu-r-xl) var(--cu-r-xl); box-shadow: 0 30px 60px rgba(0, 0, 0, .25); max-height: calc(100vh - 160px); overflow: auto; animation: cu-drop .28s var(--cu-ease); } @keyframes cu-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } .cu-mega__box { transform-origin: top center; animation-duration: .2s; } .cu-mega__label { margin: 0 0 12px; font-family: var(--cu-font-display); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--cu-muted); } .cu-mega__cats { display: grid; gap: 2px; } .cu-mega__cat { display: grid; grid-template-columns: 40px 1fr auto 18px; align-items: center; gap: 14px; padding: 8px; border-radius: var(--cu-r-md); font-weight: 600; transition: background .15s; } .cu-mega__cat:hover, .cu-mega__cat.is-active { background: var(--cu-white); } .cu-mega__cat .cu-icon { color: var(--cu-muted); } .cu-mega__thumb { width: 40px; height: 40px; border-radius: var(--cu-r-sm); overflow: hidden; background: var(--cu-sand); } .cu-mega__thumb img { width: 100%; height: 100%; object-fit: cover; } .cu-mega__num { color: var(--cu-muted); font-size: 13px; font-weight: 500; } .cu-mega__phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .cu-mega__ptitle { margin: 0; font-family: var(--cu-font-display); font-size: 30px; font-weight: 600; text-transform: uppercase; line-height: 1.1; } .cu-mega__panel .cu-chips { margin-bottom: 26px; } .cu-mega__latest { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cu-mega__latest a { display: grid; gap: 6px; font-size: 14px; } .cu-mega__pimg { aspect-ratio: 1 / 1.1; border-radius: var(--cu-r-md); overflow: hidden; background: var(--cu-white); } .cu-mega__pimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--cu-ease); } .cu-mega__latest a:hover img { transform: scale(1.04); } .cu-mega__pname { font-weight: 600; line-height: 1.3; } .cu-mega__pprice { font-family: var(--cu-font-display); font-weight: 500; } .cu-mega__pprice del { color: var(--cu-muted); font-size: 12px; margin-left: 4px; } .cu-mega__colls { display: grid; margin-bottom: 18px; } .cu-mega__colls a { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--cu-line); font-size: 17px; font-weight: 600; } .cu-mega__colls a:hover { color: var(--cu-red); } .cu-mega__promo { position: relative; overflow: hidden; padding: 22px; border-radius: var(--cu-r-lg); background: var(--cu-red); color: var(--cu-white); min-height: 220px; margin-bottom: 14px; } .cu-mega__promo-text { position: relative; z-index: 1; max-width: 60%; } .cu-mega__promo-title { margin: 10px 0 6px; font-family: var(--cu-font-display); font-size: 26px; line-height: 1.05; text-transform: uppercase; font-weight: 600; } .cu-mega__promo-sub { font-size: 13px; margin-bottom: 16px; } .cu-mega__promo .cu-tag { background: var(--cu-white); color: var(--cu-red); } .cu-mega__promo-img { position: absolute; right: -30px; bottom: -20px; width: 60%; transform: rotate(-8deg); } .cu-mega__custom { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: var(--cu-r-lg); background: var(--cu-white); border: 1px solid var(--cu-line); } .cu-mega__custom strong { display: block; font-size: 14px; } .cu-mega__custom small { color: var(--cu-muted); font-size: 13px; } .cu-mega__custom-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cu-yellow); } .cu-mega-open .cu-main, .cu-mega-open .cu-footer { filter: brightness(.45); transition: filter .25s; } /* ---------- Meklēšana ---------- */ .cu-search { position: fixed; inset: 0; z-index: 90; background: rgba(24, 23, 14, .6); backdrop-filter: blur(4px); overflow: auto; } .cu-search__bar { background: var(--cu-ink); } .cu-search__row { display: flex; align-items: center; gap: 40px; min-height: 100px; } .cu-search__form { flex: 1; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 8px 0 22px; border-radius: var(--cu-r-pill); background: var(--cu-white); color: var(--cu-ink); max-width: 900px; margin-inline: auto; } .cu-search__form input[type="search"] { flex: 1; border: 0; outline: 0; background: transparent; font-size: 20px; min-width: 0; } .cu-search__form input[type="search"]::-webkit-search-cancel-button { display: none; } .cu-search__clear { color: var(--cu-muted); font-size: 14px; font-weight: 600; } .cu-search__close { display: inline-flex; align-items: center; gap: 10px; color: var(--cu-white); font-size: 15px; font-weight: 600; } .cu-search__panel { display: grid; grid-template-columns: 260px 1fr; gap: 48px; max-width: 900px; margin: 14px auto 40px; padding: 36px 40px; background: var(--cu-cream); border-radius: var(--cu-r-xl); } .cu-search__cats, .cu-search__recent { display: grid; gap: 12px; margin-bottom: 26px; } .cu-search__cats a, .cu-search__recent button { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; text-align: left; } .cu-search__cats a span { color: var(--cu-muted); font-size: 13px; font-weight: 500; } .cu-search__recent button { font-weight: 500; font-size: 14px; color: var(--cu-ink); } .cu-search__list { display: grid; gap: 6px; margin-bottom: 18px; } .cu-search__list a { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; padding: 8px; border-radius: var(--cu-r-md); background: var(--cu-white); } .cu-search__list a:hover { box-shadow: var(--cu-shadow); } .cu-search__list img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--cu-r-sm); } .cu-search__list strong { display: block; font-weight: 600; line-height: 1.3; } .cu-search__list .cu-price { font-size: 16px; } /* ---------- Atvilktnes un modāļi ---------- */ .cu-drawer, .cu-modal { position: fixed; inset: 0; z-index: 100; } .cu-drawer__overlay { position: absolute; inset: 0; background: rgba(24, 23, 14, .55); animation: cu-fade .2s; } @keyframes cu-fade { from { opacity: 0; } } .cu-drawer__box { position: absolute; top: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--cu-cream); color: var(--cu-ink); animation: cu-slide-r .28s var(--cu-ease-drawer); } .cu-drawer--right .cu-drawer__box { right: 0; } .cu-drawer--nav .cu-drawer__box { width: min(400px, 88vw); } .cu-drawer--nav .cu-drawer__head { margin-right: -6px; } @keyframes cu-slide-r { from { transform: translateX(100%); } } @keyframes cu-slide-l { from { transform: translateX(-100%); } } .cu-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 14px; } .cu-drawer__body { flex: 1; overflow: auto; padding: 0 24px 24px; } .cu-minicart__title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--cu-font-display); font-size: 38px; font-weight: 600; text-transform: uppercase; line-height: 1; } .cu-minicart__items { display: grid; } .cu-mcitem { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--cu-line); animation: cu-rise .35s var(--cu-ease-out) both; transition: opacity .2s; } @keyframes cu-rise { from { opacity: 0; transform: translateY(14px); } } .cu-mcitem__img { width: 92px; height: 92px; border-radius: var(--cu-r-md); overflow: hidden; background: var(--cu-white); } .cu-mcitem__img img { width: 100%; height: 100%; object-fit: cover; } .cu-mcitem__name { font-weight: 600; line-height: 1.3; } .cu-mcitem__meta { color: var(--cu-muted); font-size: 13px; margin: 6px 0 10px; } .cu-mcitem__price { text-align: right; font-family: var(--cu-font-display); font-size: 20px; font-weight: 500; white-space: nowrap; } .cu-mcitem__price del { display: block; color: var(--cu-muted); font-family: var(--cu-font-body); font-size: 12px; } .cu-mcitem__actions { display: flex; align-items: center; gap: 14px; } .cu-minicart__foot { padding: 20px 24px 24px; border-top: 1px solid var(--cu-line); background: var(--cu-white); display: grid; gap: 10px; } .cu-minicart__sum { display: flex; justify-content: space-between; align-items: baseline; } .cu-minicart__sum span { color: var(--cu-muted); } .cu-minicart__sum strong { font-family: var(--cu-font-display); font-size: 28px; font-weight: 600; } .cu-minicart__note { color: var(--cu-muted); font-size: 13px; margin: 0 0 6px; } .cu-minicart__empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 60px 10px; color: var(--cu-muted); } .cu-minicart__empty-title { margin: 8px 0 0; color: var(--cu-ink); font-family: var(--cu-font-display); font-size: 26px; text-transform: uppercase; } .cu-freeship { padding: 14px 16px; border-radius: var(--cu-r-md); background: var(--cu-yellow-soft); margin-bottom: 14px; font-size: 14px; } .cu-freeship p { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 600; } .cu-freeship__bar { height: 6px; border-radius: 99px; background: var(--cu-white); overflow: hidden; } .cu-freeship__bar i { display: block; height: 100%; background: var(--cu-ink); border-radius: inherit; transition: width .4s var(--cu-ease); } .cu-qty, .quantity { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 4px; border-radius: var(--cu-r-pill); border: 1.5px solid var(--cu-line); background: var(--cu-white); } .quantity .qty, .cu-qty input { width: 38px; border: 0; background: transparent; text-align: center; font-weight: 700; font-size: 16px; -moz-appearance: textfield; } .quantity .qty::-webkit-inner-spin-button, .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .cu-qty__btn { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cu-sand); transition: background .15s; } .cu-qty__btn:hover { background: var(--cu-yellow); } .quantity--sm { height: 38px; } .cu-remove { display: inline-flex; align-items: center; gap: 6px; color: var(--cu-muted); font-size: 13px; font-weight: 600; } .cu-remove:hover { color: var(--cu-red); } .cu-modal { display: grid; place-items: center; padding: 20px; } .cu-modal__box { position: relative; width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 32px; border-radius: var(--cu-r-xl); background: var(--cu-cream); animation: cu-pop .3s var(--cu-ease); } @keyframes cu-pop { from { opacity: 0; transform: scale(.96); } } .cu-modal__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 12px; } .cu-modal__title { font-family: var(--cu-font-display); font-size: 34px; text-transform: uppercase; } .cu-modal__intro { color: var(--cu-muted); } .cu-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--cu-line); border-radius: var(--cu-r-md); overflow: hidden; background: var(--cu-white); font-size: 15px; } .cu-table th { background: var(--cu-ink); color: var(--cu-white); font-family: var(--cu-font-display); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 14px 18px; } .cu-table td { padding: 14px 18px; border-top: 1px solid var(--cu-line); } /* ---------- Izmēru ceļvedis (modālis pēc Figma) ---------- */ .cu-guide .cu-guide__box { width: min(880px, 100%); padding: 40px 44px 44px; display: grid; gap: 28px; box-shadow: 0 30px 40px rgba(0, 0, 0, .4); } .cu-guide__head { display: flex; align-items: center; gap: 14px; } .cu-guide__badge { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--cu-yellow); color: var(--cu-ink); } .cu-guide__titles { display: grid; gap: 2px; min-width: 0; flex: 1; } .cu-guide__title { margin: 0; font-family: var(--cu-font-display); font-size: 34px; font-weight: 600; line-height: 1.08; text-transform: uppercase; } .cu-guide__sub { color: var(--cu-muted); font-size: 14px; font-weight: 500; line-height: 1.5; } .cu-guide__close { margin-left: auto; } .cu-guide__figs { display: flex; align-items: flex-end; justify-content: center; justify-content: safe center; gap: 24px; padding: 28px 20px 20px; border-radius: var(--cu-r-lg); background: var(--cu-white); overflow-x: auto; scrollbar-width: thin; } .cu-guide__fig { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: default; } button.cu-guide__fig { cursor: pointer; } .cu-gfig { display: block; width: calc(var(--fw) * 1px); height: auto; max-width: none; } .cu-gfig .f { fill: var(--cu-sand); transition: fill .25s var(--cu-ease); } .cu-gfig .s { stroke: var(--cu-ink); } .cu-gfig .k { fill: var(--cu-ink); } .cu-gfig .r { stroke: var(--cu-red); } .cu-guide__fig.is-active .f { fill: var(--cu-yellow); } @media (hover: hover) and (pointer: fine) { button.cu-guide__fig:hover:not(.is-active) .f { fill: var(--cu-yellow-soft); } } .cu-guide__pill { padding: 6px 14px; border-radius: var(--cu-r-pill); background: var(--cu-cream); font-family: var(--cu-font-display); font-size: 20px; font-weight: 500; line-height: 1.2; text-transform: uppercase; white-space: nowrap; transition: background-color .25s var(--cu-ease), color .25s var(--cu-ease); } .cu-guide__figs--many .cu-guide__pill { font-size: 15px; padding: 5px 10px; text-transform: none; } .cu-guide__fig.is-active .cu-guide__pill { background: var(--cu-ink); color: var(--cu-yellow); } button.cu-guide__fig:focus-visible { outline: none; } button.cu-guide__fig:focus-visible .cu-guide__pill { outline: 2px solid var(--cu-ink); outline-offset: 2px; } .cu-guide__tablewrap { border: 1px solid var(--cu-line); border-radius: var(--cu-r-lg); overflow-x: auto; background: var(--cu-white); } .cu-guide__table { width: 100%; border-collapse: collapse; } .cu-guide__table thead th { padding: 16px 24px; background: var(--cu-ink); color: var(--cu-white); font-family: var(--cu-font-display); font-size: 13px; font-weight: 500; letter-spacing: .04em; line-height: 1; text-align: left; text-transform: uppercase; white-space: nowrap; } .cu-guide__table tbody th, .cu-guide__table td { padding: 16px 24px; text-align: left; white-space: nowrap; transition: background-color .25s var(--cu-ease); } .cu-guide__table tbody th { font-family: var(--cu-font-display); font-size: 22px; font-weight: 500; line-height: 1.2; text-transform: uppercase; } .cu-guide__table td { font-size: 16px; line-height: 1.6; } .cu-guide__table tbody th.is-dims { text-transform: none; font-size: 19px; } .cu-guide__table tbody tr + tr > * { border-top: 1px solid var(--cu-line); } .cu-guide__table tr[data-cu-guide-pick] { cursor: pointer; } .cu-guide__table tr.is-active > * { background: var(--cu-yellow); } @media (hover: hover) and (pointer: fine) { .cu-guide__table tr[data-cu-guide-pick]:hover:not(.is-active) > * { background: var(--cu-cream); } } .cu-guide__tip { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-radius: 16px; background: rgba(254, 185, 47, .3); } .cu-guide__tip .cu-icon { flex: none; margin-top: 1px; } .cu-guide__tip p { display: grid; gap: 4px; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; } .cu-guide__tip strong { font-size: 16px; font-weight: 600; } .cu-guide__apply { justify-self: start; } .cu-guide__apply:disabled { opacity: .5; cursor: default; } .cu-toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; transform: translateX(-50%); padding: 12px 20px; border-radius: var(--cu-r-pill); background: var(--cu-ink); color: var(--cu-white); font-weight: 600; font-size: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); animation: cu-pop .25s var(--cu-ease); } /* Mobilā navigācija */ .cu-mobnav__search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; margin-bottom: 22px; border-radius: var(--cu-r-pill); border: 1.5px solid var(--cu-line); background: var(--cu-white); } .cu-mobnav__search input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; } .cu-mobnav__cats { display: grid; margin-bottom: 22px; } .cu-mobnav__cats a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--cu-line); font-family: var(--cu-font-display); font-size: 20px; font-weight: 500; text-transform: uppercase; } .cu-mobnav__cats span { color: var(--cu-muted); font-family: var(--cu-font-body); font-size: 13px; } .cu-mobnav__links { list-style: none; display: grid; gap: 12px; margin: 26px 0; font-weight: 700; font-size: 17px; } .cu-mobnav__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ---------- Sadaļas virsraksts ---------- */ .cu-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(28px, 3vw, 48px); } .cu-shead__main { display: grid; gap: 18px; justify-items: start; max-width: 860px; } .cu-shead__title { font-family: var(--cu-font-display); font-size: var(--cu-fs-h2); font-weight: 600; line-height: 1.04; letter-spacing: -.005em; text-transform: uppercase; } .cu-shead__side { display: flex; align-items: center; gap: 16px; max-width: 460px; } .cu-shead__side:has(.cu-tabs) { max-width: none; flex-shrink: 0; } @media (max-width: 1023px) { .cu-shead__side:has(.cu-tabs) { flex-shrink: 1; min-width: 0; max-width: 100%; } } .cu-shead__side .cu-tab { white-space: nowrap; } .cu-shead__text { margin: 0; color: var(--cu-muted); font-size: 15px; } /* ---------- Hero ---------- */ .cu-hero { position: relative; min-height: min(1002px, 100svh); padding-top: calc(42px + var(--cu-sitenote-h) + var(--cu-header-h)); color: var(--cu-white); background: var(--cu-ink); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; } .cu-hero__media { position: absolute; inset: 0; z-index: -1; } .cu-hero__img, .cu-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; } .cu-hero__video { opacity: 0; transition: opacity 1.2s ease; object-position: 0% 40%; } .cu-hero__dim { position: absolute; inset: 0; background: rgba(24, 23, 14, .26); } .cu-hero__video.is-playing { opacity: 1; } /* Ienākšana ar opacity un atsevišķo "translate", lai neaizņem elementu pašu transform (hover). */ @keyframes cu-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } } .cu-hero__eyebrow, .cu-hero__title > span, .cu-hero__text, .cu-hero__buttons, .cu-hero__pause { animation: cu-in .7s var(--cu-ease-out) both; } .cu-hero__title > span:nth-child(1) { animation-delay: .06s; } .cu-hero__title > span:nth-child(2) { animation-delay: .12s; } .cu-hero__title > span:nth-child(3) { animation-delay: .18s; } .cu-hero__text { animation-delay: .26s; } .cu-hero__buttons { animation-delay: .32s; } .cu-hero__pause { animation-delay: .4s; } .cu-hero__card { animation: cu-in .7s var(--cu-ease-out) .45s both; } .cu-hero__sticker { animation: cu-sticker-in .8s var(--cu-ease-out) .5s both; } @keyframes cu-sticker-in { from { opacity: 0; rotate: -12deg; scale: .85; } to { opacity: 1; rotate: none; scale: none; } } .cu-hero__cross { animation: cu-blink 4s ease-in-out infinite; } .cu-hero__cross--2 { animation-delay: 1.3s; } .cu-hero__cross--3 { animation-delay: 2.6s; } @keyframes cu-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } .cu-hero__frame { animation: cu-float 7s ease-in-out infinite; } @keyframes cu-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .cu-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 23, 14, .92) 0%, rgba(24, 23, 14, .7) 32%, rgba(24, 23, 14, .1) 62%, rgba(24, 23, 14, .25) 100%), linear-gradient(0deg, rgba(24, 23, 14, .65), transparent 30%); } .cu-hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 120px 120px; background-position: calc(50% - 60px) 0; mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 80%, transparent); } .cu-hero__cross { position: absolute; width: 17px; height: 17px; } .cu-hero__cross::before, .cu-hero__cross::after { content: ""; position: absolute; background: var(--cu-yellow); } .cu-hero__cross::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; } .cu-hero__cross::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; } .cu-hero__cross--1 { left: 50%; top: 24%; } .cu-hero__cross--2 { left: 69%; top: 62%; } .cu-hero__cross--3 { left: 88%; top: 36%; } .cu-hero__frame { position: absolute; left: 61%; top: 23%; width: 330px; height: 380px; } .cu-hero__frame i { position: absolute; inset: 0; background: linear-gradient(var(--cu-yellow), var(--cu-yellow)) 0 0 / 34px 3px, linear-gradient(var(--cu-yellow), var(--cu-yellow)) 0 0 / 3px 34px, linear-gradient(var(--cu-yellow), var(--cu-yellow)) 100% 0 / 34px 3px, linear-gradient(var(--cu-yellow), var(--cu-yellow)) 100% 0 / 3px 34px, linear-gradient(var(--cu-yellow), var(--cu-yellow)) 0 100% / 34px 3px, linear-gradient(var(--cu-yellow), var(--cu-yellow)) 0 100% / 3px 34px, linear-gradient(var(--cu-yellow), var(--cu-yellow)) 100% 100% / 34px 3px, linear-gradient(var(--cu-yellow), var(--cu-yellow)) 100% 100% / 3px 34px; background-repeat: no-repeat; } .cu-hero__frame b { position: absolute; left: 0; top: calc(100% + 10px); padding: 6px 10px; border-radius: var(--cu-r-sm); background: var(--cu-ink); color: var(--cu-yellow); font-family: var(--cu-font-display); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .cu-hero__frame em { font-variant-numeric: tabular-nums; position: absolute; left: calc(100% + 10px); top: 60%; writing-mode: vertical-rl; font-style: normal; font-family: var(--cu-font-display); font-size: 11px; letter-spacing: .1em; color: var(--cu-yellow); font-variant-numeric: tabular-nums; } /* Drukas rāmis: dizains "uzdrukājas" no augšas uz leju, tad nākamais (JS ik pa 4 s). */ .cu-hero__sheet { position: absolute; inset: 22px; display: grid; place-items: center; border-radius: var(--cu-r-sm); background: var(--cu-white); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); overflow: hidden; } .cu-hero__sheet img { width: 100%; height: 100%; object-fit: contain; } .cu-hero__sheet .cu-hero__ghost { position: absolute; inset: 0; filter: grayscale(1) contrast(.6); opacity: .22; } .cu-hero__sheet .cu-hero__ink { position: absolute; inset: 0; clip-path: inset(0 0 100% 0); } .cu-hero__sheet.is-printing { animation: cu-sheet-in .35s var(--cu-ease-out) both; } .cu-hero__sheet.is-printing .cu-hero__ink { animation: cu-print 1.5s var(--cu-ease-in-out) .3s forwards; } .cu-hero__sheet.is-done .cu-hero__ink { clip-path: none; } .cu-hero__sheet.is-out { animation: cu-sheet-out .4s var(--cu-ease-out) forwards; } .cu-hero__head { position: absolute; left: 10px; right: 10px; top: 22px; height: 3px; border-radius: 3px; background: var(--cu-yellow); box-shadow: 0 0 14px 2px rgba(254, 185, 47, .7); opacity: 0; pointer-events: none; } .cu-hero__frame.is-printing .cu-hero__head { animation: cu-head 1.5s var(--cu-ease-in-out) .3s forwards; } @keyframes cu-print { to { clip-path: inset(0 0 0 0); } } @keyframes cu-head { 0% { opacity: 0; transform: translateY(0); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--cu-print-h, 333px)); } } @keyframes cu-sheet-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } @keyframes cu-sheet-out { to { opacity: 0; transform: translateY(-14px) scale(.98); } } .cu-hero__inner { position: relative; flex: 1; display: grid; align-content: center; padding-block: clamp(32px, 4vw, 60px) clamp(80px, 8vw, 120px); } .cu-hero__content { max-width: 760px; } .cu-hero__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-family: var(--cu-font-display); font-size: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .cu-hero__eyebrow .cu-icon { color: var(--cu-red); } .cu-hero__title { display: grid; font-family: var(--cu-font-display); font-size: clamp(56px, 8.4vw, 142px); font-weight: 600; line-height: 1.03; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 26px; } .cu-hero__title .is-accent { color: var(--cu-yellow); } .cu-hero__text { max-width: 560px; font-size: var(--cu-fs-lead); line-height: 1.5; color: rgba(255, 255, 255, .88); margin-bottom: 30px; } .cu-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; } .cu-hero__pause { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; padding: 6px 16px 6px 8px; border-radius: var(--cu-r-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-size: 14px; } .cu-hero__pause-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cu-white); color: var(--cu-ink); } .cu-hero__sticker { position: absolute; right: 0; top: 55%; transition: transform .3s var(--cu-ease-out); display: grid; place-items: center; align-content: center; width: 152px; height: 152px; border-radius: 50%; background: var(--cu-yellow); color: var(--cu-ink); font-family: var(--cu-font-display); text-transform: uppercase; line-height: 1; transform: rotate(-12deg); text-align: center; } .cu-hero__sticker small { font-size: 18px; font-weight: 500; } .cu-hero__sticker strong { font-size: 40px; font-weight: 600; } .cu-hero__card { position: absolute; right: 0; bottom: clamp(80px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 385px; padding: 11px; border-radius: var(--cu-r-lg); background: rgba(24, 23, 14, .55); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(14px); transition: transform .3s var(--cu-ease); } @media (hover: hover) and (pointer: fine) { .cu-hero__card:hover { transform: translateY(-3px); } .cu-hero__sticker:hover { transform: rotate(-6deg) scale(1.04); } } .cu-hero__card-in { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; transition: opacity .22s ease, transform .22s var(--cu-ease-out); } .cu-hero__card.is-swapping .cu-hero__card-in { opacity: 0; transform: translateY(6px); } .cu-hero__card-img { width: 80px; height: 80px; border-radius: var(--cu-r-md); overflow: hidden; background: var(--cu-white); } .cu-hero__card-img img { width: 100%; height: 100%; object-fit: cover; } .cu-hero__card-text { display: grid; gap: 2px; min-width: 0; } .cu-hero__card-text small { color: rgba(255, 255, 255, .7); font-size: 13px; } .cu-hero__card-text span { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cu-hero__card-text strong { font-family: var(--cu-font-display); font-size: 20px; color: var(--cu-yellow); font-weight: 500; } .cu-hero__card-text strong .woocommerce-Price-amount { color: inherit; } .cu-hero__ruler { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; border-top: 1px solid rgba(255, 255, 255, .16); } .cu-ruler { position: relative; height: 34px; background-image: linear-gradient(90deg, rgba(255, 255, 255, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .3) 1px, transparent 1px); background-size: calc(100% / 12) 14px, calc(100% / 60) 7px; background-repeat: repeat-x; background-position: 0 100%, 0 100%; } .cu-ruler span { position: absolute; top: 4px; left: calc(var(--i) * 100% / 12 + 4px); font-size: 10px; color: rgba(255, 255, 255, .6); line-height: 1; } /* ---------- Kategoriju lente ---------- */ .cu-strip { overflow: hidden; background: var(--cu-yellow); color: var(--cu-ink); border-block: 1px solid rgba(0, 0, 0, .06); } .cu-strip__track { display: flex; width: max-content; animation: cu-marquee 40s linear infinite; } .cu-strip:hover .cu-strip__track { animation-play-state: paused; } @keyframes cu-marquee { to { transform: translateX(-50%); } } .cu-strip__list { display: flex; list-style: none; flex: none; } .cu-strip__list li { display: flex; align-items: center; gap: 30px; padding-right: 30px; min-height: 76px; font-family: var(--cu-font-display); font-size: 28px; font-weight: 600; text-transform: uppercase; white-space: nowrap; } .cu-strip__list a:hover { color: var(--cu-red); } /* ---------- Ieguvumi ---------- */ .cu-benefits { padding-block: 64px; } .cu-benefits__list { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; } .cu-benefit { padding: 0 33px; border-left: 1px solid var(--cu-line); } .cu-benefit:first-child { padding-left: 0; border-left: 0; } .cu-benefit__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--cu-yellow); margin-bottom: 16px; } .cu-benefit__title { font-family: var(--cu-font-display); font-size: 22px; font-weight: 600; line-height: 1.2; text-transform: uppercase; margin-bottom: 14px; } .cu-benefit__text { color: var(--cu-muted); font-size: 15px; line-height: 1.45; margin: 0; } /* ---------- Kategoriju režģis ---------- */ .cu-catgrid { padding-top: 40px; } .cu-catgrid__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 300px; gap: 24px; } .cu-catgrid__grid > :nth-child(n+6) { grid-column: auto; } .cu-catgrid__grid { grid-template-columns: repeat(4, 1fr); } .cu-catcard--big { grid-column: span 2; grid-row: span 2; } .cu-catcard { position: relative; display: block; overflow: hidden; border-radius: var(--cu-r-lg); background: var(--cu-white); color: var(--cu-white); isolation: isolate; } .cu-catcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--cu-ease); z-index: -2; } .cu-catcard::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(24, 23, 14, .75), rgba(24, 23, 14, 0) 55%); } .cu-catcard:hover { color: var(--cu-white); } @media (hover: hover) and (pointer: fine) { .cu-catcard:hover .cu-catcard__img { transform: scale(1.05); } } .cu-catcard > .cu-tag { position: absolute; top: 16px; left: 16px; } .cu-catcard__foot { position: absolute; left: 20px; right: 16px; bottom: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .cu-catcard__name { display: block; font-family: var(--cu-font-display); font-size: 26px; font-weight: 600; line-height: 1.05; text-transform: uppercase; } .cu-catcard--big .cu-catcard__name { font-size: 32px; } .cu-catcard__price { display: block; font-size: 13px; color: rgba(255, 255, 255, .85); margin-top: 4px; } .cu-catcard .cu-iconbtn { transition: background .2s, color .2s; } .cu-catcard:hover .cu-iconbtn { background: var(--cu-yellow); color: var(--cu-ink); border-color: var(--cu-yellow); } .cu-catgrid__more { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; } .cu-catgrid__more-label { color: var(--cu-muted); font-weight: 600; } .cu-catgrid__spacer { flex: 1; } /* ---------- Produkta kartīte un karuselis ---------- */ .cu-pcard { position: relative; display: grid; gap: 4px; } .cu-pcard__media { position: relative; aspect-ratio: 342 / 342; border-radius: var(--cu-r-lg); overflow: hidden; background: var(--cu-white); margin-bottom: 14px; } .cu-pcard__link, .cu-pcard__link img { display: block; width: 100%; height: 100%; } .cu-pcard__link img { object-fit: cover; transition: transform .6s var(--cu-ease); } .cu-pcard:hover .cu-pcard__link img { transform: scale(1.04); } .cu-pcard__tags { position: absolute; top: 14px; left: 14px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; } .cu-pcard__wish { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--cu-white); color: var(--cu-ink); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); transition: transform .15s, color .2s; } .cu-pcard__wish:hover { transform: scale(1.08); } .cu-pcard__wish[aria-pressed="true"] { color: var(--cu-red); } .cu-pcard__add { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cu-ink); color: var(--cu-white); transition: background .2s, transform .15s; } .cu-pcard__add:hover { background: var(--cu-red); color: var(--cu-white); } .cu-pcard__add.is-loading { opacity: .6; } .cu-pcard__add.is-done { background: var(--cu-green); animation: cu-pop-done .4s var(--cu-ease-out); } @keyframes cu-pop-done { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } } .cu-pcard__cat { margin: 0; color: var(--cu-muted); font-size: 13px; } .cu-pcard__name { font-family: var(--cu-font-body); font-size: 15px; font-weight: 600; line-height: 1.35; } .cu-pcard__name a:hover { color: var(--cu-red); } .cu-price { margin: 0; font-family: var(--cu-font-display); font-size: 22px; font-weight: 500; line-height: 1.2; } .cu-price ins { text-decoration: none; } .cu-price del { margin-left: 6px; font-family: var(--cu-font-body); font-size: 12px; color: var(--cu-muted); font-weight: 500; } .cu-price__from { font-family: var(--cu-font-body); font-size: 13px; color: var(--cu-muted); } .cu-price--xl { font-size: clamp(40px, 4vw, 52px); font-weight: 600; } .cu-price--xl del { font-size: 16px; } .cu-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .cu-tab { padding: 12px 18px; border-radius: var(--cu-r-pill); border: 1.5px solid var(--cu-ink); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; background: transparent; transition: background .2s, color .2s; } .cu-tab:hover { background: var(--cu-sand); } .cu-tab.is-active { background: var(--cu-ink); color: var(--cu-white); } .cu-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 4); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; overscroll-behavior-x: contain; } .cu-carousel__track::-webkit-scrollbar { display: none; } .cu-carousel__item { scroll-snap-align: start; min-width: 0; } .cu-pslider .cu-carousel__track { grid-auto-columns: calc((100% - 3 * 24px) / 4.15); } .cu-carousel__nav { display: flex; align-items: center; gap: 16px; margin-top: 40px; } .cu-carousel__progress { flex: 1; height: 2px; background: var(--cu-line); position: relative; } .cu-carousel__progress i { position: absolute; left: 0; top: 0; height: 2px; width: 30%; background: var(--cu-ink); transition: left .2s, width .2s; } .cu-carousel__arrows { display: flex; gap: 12px; } /* ---------- Sezonas baneris ---------- */ .cu-promo { position: relative; overflow: hidden; padding-block: clamp(60px, 7vw, 100px); color: var(--cu-white); isolation: isolate; } .cu-promo--christmas { background: radial-gradient(1200px 600px at 50% 40%, #ff1a43 0%, #e0002a 55%, #c50024 100%); } .cu-promo--valentine { background: #ff8fa8; } .cu-promo--yellow { background: var(--cu-yellow); color: var(--cu-ink); } .cu-promo--ink { background: var(--cu-ink); } /* Gaismiņu virtene: viens SVG posms (vads + 2 spuldzes), atkārtots pa horizontāli. */ .cu-promo__lights { position: absolute; left: 0; right: 0; top: 0; height: 48px; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='48' viewBox='0 0 80 48'%3E%3Cpath d='M0 6c20 16 20 16 40 16s20 0 40-16' fill='none' stroke='rgba(255,255,255,.45)' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='27' r='5' fill='%23ffd84d'/%3E%3Ccircle cx='60' cy='27' r='5' fill='%232fd17e'/%3E%3C/svg%3E") 0 0 / 80px 48px repeat-x; } .cu-promo__lights::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='48' viewBox='0 0 80 48'%3E%3Ccircle cx='20' cy='27' r='9' fill='%23ffd84d' opacity='.35'/%3E%3Ccircle cx='60' cy='27' r='9' fill='%232fd17e' opacity='.35'/%3E%3C/svg%3E") 0 0 / 80px 48px repeat-x; animation: cu-twinkle 2.4s ease-in-out infinite alternate; } @keyframes cu-twinkle { from { opacity: .2; } to { opacity: 1; } } /* Sniegs: 72 atsevišķas pārslas, katrai savs ātrums, sānu šūpošanās un caurspīdīgums. Kustība tikai ar transform (GPU); ārpus ekrāna animācija apstājas (JS). */ .cu-snow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; container-type: size; } .cu-snow i { position: absolute; top: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: var(--o); box-shadow: 0 0 6px rgba(255, 255, 255, .55); will-change: transform; animation: cu-flake var(--d) linear var(--dl) infinite; } .cu-snow.is-paused i { animation-play-state: paused; } @keyframes cu-flake { 0% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(var(--dx), 25cqh, 0); } 50% { transform: translate3d(0, 50cqh, 0); } 75% { transform: translate3d(calc(var(--dx) * -.6), 75cqh, 0); } 100% { transform: translate3d(0, calc(100cqh + 24px), 0); } } @supports not (height: 1cqh) { @keyframes cu-flake { 0% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(var(--dx), 450px, 0); } 100% { transform: translate3d(0, 920px, 0); } } } @media (max-width: 767px) { .cu-snow i:nth-child(n+37) { display: none; } } @media (prefers-reduced-motion: reduce) { .cu-snow i { animation: none; top: var(--y); } .cu-promo__lights::after { animation: none; } } .cu-promo__top { display: flex; justify-content: space-between; align-items: center; gap: 20px; } .cu-promo__note { margin: 0; font-family: var(--cu-font-display); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; } .cu-promo__title { margin: 20px 0 -40px; font-family: var(--cu-font-display); font-size: clamp(46px, 14.5vw, 240px); font-weight: 600; line-height: .92; text-transform: uppercase; text-align: center; letter-spacing: -.01em; text-shadow: 0 10px 0 rgba(0, 0, 0, .12); position: relative; z-index: -1; } .cu-promo__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-inline: 2%; margin-bottom: 44px; } .cu-polaroid { transform: rotate(var(--r)); transition: transform .4s var(--cu-ease); } @media (hover: hover) and (pointer: fine) { .cu-polaroid:hover { transform: rotate(0) translateY(-6px); } } .cu-polaroid a { position: relative; display: block; padding: 12px 12px 16px; border-radius: var(--cu-r-md); background: var(--cu-white); color: var(--cu-ink); box-shadow: 0 20px 40px rgba(0, 0, 0, .25); } .cu-polaroid__tape { position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; background: rgba(47, 209, 126, .8); transform: rotate(-3deg); } .cu-polaroid__img { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--cu-r-sm); background: #f6f6f6; } .cu-polaroid__img img { width: 100%; height: 100%; object-fit: cover; } .cu-polaroid__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; font-family: var(--cu-font-display); text-transform: uppercase; font-size: 15px; font-weight: 500; } .cu-polaroid__foot strong { color: var(--cu-red); font-weight: 500; white-space: nowrap; } .cu-promo__box { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 40px; border-radius: var(--cu-r-lg); background: var(--cu-green-dark); isolation: isolate; } /* Smalks "noise" grauds uz zaļā bloka (SVG troksnis, bez papildu faila). */ .cu-promo__box::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: .14; mix-blend-mode: soft-light; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") repeat; } .cu-promo__box::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(600px 220px at 20% 0%, rgba(255, 255, 255, .08), transparent 70%); } .cu-promo__box-text { position: relative; } .cu-promo__sticker { z-index: 2; } .cu-promo__box-title { font-family: var(--cu-font-display); font-size: 30px; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; } .cu-promo__box p { margin: 0; max-width: 560px; font-size: 14px; color: rgba(255, 255, 255, .85); } .cu-promo__buttons { display: flex; gap: 12px; flex: none; } .cu-promo__sticker { right: -20px; top: -90px; width: 130px; height: 130px; animation: cu-sway 6s ease-in-out infinite; } @keyframes cu-sway { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-6deg); } } .cu-promo__sticker strong { font-size: 26px; } .cu-promo__sticker small { font-size: 14px; } /* ---------- Kolekcijas ---------- */ .cu-collections__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .cu-collcard { display: grid; gap: 18px; padding: 16px 16px 20px; border-radius: var(--cu-r-lg); transition: transform .3s var(--cu-ease); } @media (hover: hover) and (pointer: fine) { .cu-collcard:hover { transform: translateY(-4px); } } .cu-collcard .cu-collcard__img img { transition: transform .6s var(--cu-ease-out); } .cu-collcard:hover .cu-collcard__img img { transform: scale(1.04); } .cu-collcard__img { aspect-ratio: 310 / 250; border-radius: var(--cu-r-md); overflow: hidden; background: var(--cu-white); } .cu-collcard__img img { width: 100%; height: 100%; object-fit: cover; } .cu-collcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 8px; } .cu-collcard__name { display: block; font-family: var(--cu-font-display); font-size: 26px; font-weight: 600; text-transform: uppercase; line-height: 1.1; } .cu-collcard__note { font-size: 13px; opacity: .8; } .cu-collcard .cu-iconbtn { width: 48px; height: 48px; } .cu-collcard--yellow { background: var(--cu-yellow); color: var(--cu-ink); } .cu-collcard--yellow .cu-iconbtn, .cu-collcard--sand .cu-iconbtn { background: var(--cu-ink); color: var(--cu-white); } .cu-collcard--ink { background: var(--cu-ink); color: var(--cu-white); } .cu-collcard--ink .cu-iconbtn, .cu-collcard--red .cu-iconbtn, .cu-collcard--green .cu-iconbtn { background: var(--cu-white); color: var(--cu-ink); } .cu-collcard--sand { background: var(--cu-sand); color: var(--cu-ink); } .cu-collcard--red { background: var(--cu-red); color: var(--cu-white); } .cu-collcard--green { background: var(--cu-green); color: var(--cu-white); } /* ---------- Atlaižu karuselis ---------- */ .cu-sale { background: var(--cu-ink); color: var(--cu-white); } .cu-sale__grid { display: grid; grid-template-columns: 342px 1fr; gap: 24px; } .cu-sale__intro { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; } .cu-sale__title { margin: 20px 0 20px; font-family: var(--cu-font-display); font-size: var(--cu-fs-h2); font-weight: 600; line-height: 1.04; text-transform: uppercase; } .cu-sale__text { color: var(--cu-muted-dark); font-size: 15px; margin-bottom: 20px; } .cu-sale__arrows { display: flex; gap: 12px; } .cu-sale__track { grid-auto-columns: calc((100% - 2 * 24px) / 3); } .cu-sale .cu-pcard__cat { color: var(--cu-muted-dark); } /* ---------- Individuālie pasūtījumi ---------- */ .cu-custom--yellow { background: var(--cu-yellow); } .cu-custom--cream { background: var(--cu-cream); } .cu-custom__grid { display: grid; grid-template-columns: 716px 1fr; gap: 64px; align-items: center; } .cu-custom__title { margin: 28px 0 28px; font-family: var(--cu-font-display); font-size: var(--cu-fs-h2); font-weight: 600; line-height: 1.04; text-transform: uppercase; max-width: 640px; } .cu-custom__lead { font-size: 18px; line-height: 1.55; margin-bottom: 28px; } .cu-steps { display: grid; margin-bottom: 28px; } .cu-step { display: grid; grid-template-columns: 62px 1fr; gap: 0; padding: 21px 0; border-top: 1px solid rgba(24, 23, 14, .3); } .cu-step:last-child { border-bottom: 1px solid rgba(24, 23, 14, .3); } .cu-step__num { font-family: var(--cu-font-display); font-size: 36px; font-weight: 600; line-height: 1.1; } .cu-steps--red .cu-step__num { color: var(--cu-red); font-size: 28px; } .cu-steps--red .cu-step { border-color: var(--cu-line); } .cu-step__title { display: block; font-family: var(--cu-font-display); font-size: 20px; font-weight: 600; text-transform: uppercase; line-height: 1.25; } .cu-step__text { display: block; font-size: 14px; color: rgba(24, 23, 14, .75); margin-top: 4px; } .cu-custom__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .cu-custom__note { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; border-radius: var(--cu-r-md); background: rgba(255, 255, 255, .55); font-size: 14px; line-height: 1.5; margin: 0; } .cu-custom__media img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .2)); } /* ---------- Bilde + teksts ---------- */ .cu-split__grid { display: grid; grid-template-columns: 640px 1fr; gap: 80px; align-items: center; } .cu-split--right .cu-split__media { order: 2; } .cu-split__media { position: relative; } .cu-split__media img { width: 100%; aspect-ratio: 640 / 600; object-fit: cover; border-radius: var(--cu-r-lg); } .cu-split__badge { right: 12px; bottom: 50px; width: 130px; height: 130px; } .cu-split__badge .cu-sticker__l0 { font-size: 13px; } .cu-split__badge .cu-sticker__l1 { font-size: 22px; } .cu-split__title { margin: 24px 0 24px; font-family: var(--cu-font-display); font-size: var(--cu-fs-h2); font-weight: 600; line-height: 1.04; text-transform: uppercase; } .cu-split__body { font-size: 18px; line-height: 1.55; } .cu-split__small { color: var(--cu-muted); font-size: 14px; } .cu-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 24px 0 24px; padding-top: 22px; border-top: 2px solid var(--cu-ink); } .cu-stats dt { font-family: var(--cu-font-display); font-size: 56px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } [data-cu-num] { font-variant-numeric: tabular-nums; } .cu-stats dd { margin: 4px 0 0; font-size: 14px; color: var(--cu-muted); } /* ---------- BUJ ---------- */ .cu-faq__grid { display: grid; grid-template-columns: 460px 1fr; gap: 80px; } .cu-faq__title { margin: 24px 0 24px; font-family: var(--cu-font-display); font-size: var(--cu-fs-h2); font-weight: 600; line-height: 1.04; text-transform: uppercase; } .cu-faq__text { color: var(--cu-muted); font-size: 15px; } .cu-faq__contacts { display: grid; gap: 14px; justify-items: start; margin-top: 24px; } .cu-faq__phone { display: inline-flex; align-items: center; gap: 12px; font-family: var(--cu-font-display); font-size: 30px; font-weight: 600; } .cu-faq__phone .cu-icon { color: var(--cu-red); } .cu-acc { border-top: 1px solid var(--cu-line); } .cu-acc__item { border-bottom: 1px solid var(--cu-line); } .cu-acc__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; cursor: pointer; list-style: none; font-size: 20px; font-weight: 600; line-height: 1.35; } .cu-acc__q::-webkit-details-marker { display: none; } .cu-acc__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--cu-line); transition: background-color .25s var(--cu-ease-out), border-color .25s, color .25s, transform .25s var(--cu-ease-out); } .cu-acc__q:hover .cu-acc__ico { border-color: var(--cu-ink); } .cu-acc__item.is-closing .cu-acc__ico { transform: none; background: transparent; color: inherit; border-color: var(--cu-line); } .cu-acc__item.is-closing .cu-acc__ico .cu-icon--plus { display: block; } .cu-acc__item.is-closing .cu-acc__ico .cu-icon--arrow-ur { display: none; } .cu-acc__a { overflow: hidden; } .cu-acc__a > p { transition: opacity .25s var(--cu-ease-out), transform .3s var(--cu-ease-out); } .cu-acc__ico .cu-icon--arrow-ur { display: none; } .cu-acc__item[open] .cu-acc__ico { background: var(--cu-ink); color: var(--cu-white); border-color: var(--cu-ink); } .cu-acc__item[open] .cu-acc__ico .cu-icon--plus { display: none; } .cu-acc__item[open] .cu-acc__ico .cu-icon--arrow-ur { display: block; } .cu-acc__a { padding: 0 64px 0 0; color: var(--cu-muted); font-size: 15px; line-height: 1.6; box-sizing: border-box; } .cu-acc__a::after { content: ""; display: block; height: 28px; } .cu-acc__a p:last-child { margin: 0; } /* ---------- Blogs ---------- */ .cu-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; } .cu-post { display: grid; align-content: start; gap: 18px; } .cu-post__img { display: block; aspect-ratio: 464 / 290; border-radius: var(--cu-r-lg); overflow: hidden; background: var(--cu-sand); } .cu-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--cu-ease); } .cu-post:hover .cu-post__img img { transform: scale(1.04); } .cu-post__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; color: var(--cu-muted); font-size: 13px; } .cu-post__meta span { display: inline-flex; align-items: center; gap: 6px; } .cu-post__title { font-family: var(--cu-font-display); font-size: 24px; font-weight: 600; line-height: 1.2; text-transform: uppercase; } .cu-post__title a:hover { color: var(--cu-red); } .cu-post--featured { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--cu-r-xl); overflow: hidden; background: var(--cu-ink); color: var(--cu-white); } .cu-post--featured .cu-post__img { aspect-ratio: auto; height: 100%; min-height: 380px; border-radius: 0; } .cu-post--featured .cu-post__body { display: grid; align-content: center; gap: 20px; padding: clamp(28px, 4vw, 56px); } .cu-post--featured .cu-post__title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.05; } .cu-post--featured .cu-post__meta { color: var(--cu-muted-dark); } .cu-post--featured .cu-post__excerpt { color: rgba(255, 255, 255, .8); margin: 0; } .cu-post--featured .cu-btn { justify-self: start; } .cu-pager { display: flex; justify-content: center; margin-top: 56px; } .cu-pager ul { display: flex; gap: 8px; list-style: none; } .cu-pager .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--cu-r-pill); border: 1.5px solid var(--cu-line); background: var(--cu-white); font-weight: 700; } .cu-pager .page-numbers.current { background: var(--cu-ink); color: var(--cu-white); border-color: var(--cu-ink); } .cu-article__head { text-align: center; padding-top: 24px; } .cu-article__head .cu-crumbs ol { justify-content: center; } .cu-article__head .cu-post__meta { justify-content: center; margin: 24px 0 18px; } .cu-article__title { max-width: 1000px; margin: 0 auto 16px; font-family: var(--cu-font-display); font-size: clamp(36px, 4.6vw, 72px); font-weight: 600; line-height: 1.05; text-transform: uppercase; } .cu-article__lead { max-width: 720px; margin: 0 auto 36px; color: var(--cu-muted); font-size: var(--cu-fs-lead); } .cu-article__img { overflow: hidden; border-radius: var(--cu-r-xl); max-width: 1440px; margin-inline: auto; } .cu-article__img img { width: 100%; max-height: 660px; object-fit: cover; } .cu-article__layout { display: grid; grid-template-columns: 220px minmax(0, 900px); justify-content: center; gap: 60px; padding-block: 56px 80px; } .cu-article__aside { position: sticky; top: 120px; align-self: start; display: grid; gap: 20px; } .cu-share { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; } .cu-inline-product { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; margin: 24px 0; border: 1px solid var(--cu-line); border-radius: var(--cu-r-lg); background: var(--cu-white); } .cu-inline-product__img img { width: 70px; height: 70px; object-fit: cover; border-radius: var(--cu-r-md); } .cu-inline-product__info small { display: block; font-family: var(--cu-font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cu-muted); } .cu-inline-product__info strong { display: block; font-size: 15px; } .cu-inline-product .cu-price { font-size: 18px; } .cu-article__tags { margin-top: 32px; } /* Teksts (prose) */ .cu-prose { font-size: 17px; line-height: 1.7; } .cu-prose h2 { font-family: var(--cu-font-display); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.15; text-transform: uppercase; margin: 1.6em 0 .6em; } .cu-prose h3 { font-family: var(--cu-font-display); font-size: 24px; text-transform: uppercase; margin: 1.4em 0 .5em; } .cu-prose > :first-child { margin-top: 0; } .cu-prose a { color: var(--cu-red); text-decoration: underline; text-underline-offset: 3px; } .cu-prose ul, .cu-prose ol { padding-left: 1.3em; margin: 0 0 1em; } .cu-prose li { margin-bottom: .35em; } .cu-prose img { border-radius: var(--cu-r-lg); margin: 1.5em 0; } .cu-prose blockquote { margin: 1.5em 0; padding: 24px 28px; border-radius: var(--cu-r-lg); background: var(--cu-ink); color: var(--cu-white); font-family: var(--cu-font-display); font-size: 22px; text-transform: uppercase; line-height: 1.3; } .cu-prose blockquote p { margin: 0; } .cu-prose table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--cu-line); border-radius: var(--cu-r-md); overflow: hidden; background: var(--cu-white); font-size: 15px; margin: 1em 0 1.5em; } .cu-prose th { background: var(--cu-ink); color: var(--cu-white); font-family: var(--cu-font-display); font-weight: 500; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-align: left; padding: 14px 18px; } .cu-prose td { padding: 14px 18px; border-top: 1px solid var(--cu-line); } /* Lapas galva un TOC */ .cu-crumbs { font-size: 13px; color: var(--cu-muted); } .cu-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; list-style: none; } .cu-crumbs li { display: inline-flex; align-items: center; gap: 6px; } .cu-crumbs li + li::before { content: "\203A"; color: var(--cu-muted); margin-right: 8px; font-size: 16px; line-height: 1; } .cu-crumbs li[aria-current] { color: var(--cu-ink); font-weight: 600; } .cu-crumbs a { display: inline-flex; align-items: center; gap: 6px; } .cu-crumbs a:hover { color: var(--cu-red); } .cu-crumbs-wrap { padding-top: 24px; } .cu-phead { padding: 26px 0 32px; } .cu-phead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin: 28px 0 24px; } .cu-phead__titlewrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .cu-phead__lead { max-width: 520px; min-width: 0; color: var(--cu-muted); font-size: 15px; margin: 0; } .cu-phead__meta { color: var(--cu-muted); font-size: 13px; margin: -12px 0 0; } .cu-textpage { display: grid; grid-template-columns: minmax(0, 900px); justify-content: center; } .cu-textpage.has-toc { grid-template-columns: 240px minmax(0, 900px); justify-content: start; gap: 48px; } /* Satura rādītājs: pielīp pie augšas, aktīvā sadaļa iezīmēta. */ .cu-textpage.has-toc { align-items: start; } .cu-toc { position: sticky; top: calc(var(--cu-header-h) + 24px); align-self: start; max-height: calc(100vh - var(--cu-header-h) - 48px); overflow: auto; overscroll-behavior: contain; padding: 22px 20px; border-radius: var(--cu-r-lg); border: 1px solid var(--cu-line); background: var(--cu-white); scrollbar-width: thin; } .cu-textpage .cu-toc ol { list-style: none; display: grid; gap: 2px; font-size: 14px; counter-reset: cu-toc; } .cu-textpage .cu-toc li { counter-increment: cu-toc; } .cu-textpage .cu-toc a { position: relative; display: grid; grid-template-columns: 26px 1fr; padding: 7px 8px 7px 10px; border-radius: var(--cu-r-sm); color: var(--cu-muted); line-height: 1.35; transition: color .2s, background-color .2s; } .cu-textpage .cu-toc a::before { content: counter(cu-toc, decimal-leading-zero); font-family: var(--cu-font-display); font-size: 12px; letter-spacing: .04em; color: var(--cu-muted-dark); padding-top: 1px; } .cu-textpage .cu-toc a::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--cu-red); transform: scaleY(0); transition: transform .25s var(--cu-ease-out); } .cu-textpage .cu-toc a:hover { color: var(--cu-ink); background: var(--cu-cream); } .cu-textpage .cu-toc a.is-active { color: var(--cu-ink); font-weight: 600; background: var(--cu-cream); } .cu-textpage .cu-toc a.is-active::before { color: var(--cu-red); } .cu-textpage .cu-toc a.is-active::after { transform: scaleY(1); } .cu-prose h2[id] { scroll-margin-top: calc(var(--cu-header-h) + 24px); } .cu-prose .cu-lead { font-size: 19px; color: var(--cu-ink); padding-bottom: 1.2em; border-bottom: 1px solid var(--cu-line); } .cu-prose table td:first-child { font-weight: 600; } .cu-prose td[colspan] { background: var(--cu-sand); font-weight: 400; } .cu-toc--plain { padding: 0; border: 0; background: none; } .cu-toc--plain a { display: block; padding-left: 12px; border-left: 2px solid var(--cu-line); color: var(--cu-muted); } .cu-toc--plain a.is-active { border-color: var(--cu-red); color: var(--cu-ink); font-weight: 600; } /* ---------- Lapas hero (iekšlapas) ---------- */ .cu-phero { padding-block: 24px clamp(48px, 6vw, 100px); } .cu-phero--dark { background: var(--cu-ink); color: var(--cu-white); margin-top: -1px; } .cu-phero__crumbs { margin-bottom: clamp(20px, 3vw, 36px); } .cu-phero--dark .cu-crumbs { color: var(--cu-muted-dark); } .cu-phero--dark .cu-crumbs li + li::before { color: rgba(255, 255, 255, .35); } .cu-phero--dark .cu-crumbs li[aria-current] { color: var(--cu-white); } .cu-phero--dark .cu-crumbs a:hover { color: var(--cu-yellow); } .cu-phero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .cu-phero--light .cu-phero__grid { grid-template-columns: 1fr 460px; align-items: end; } .cu-phero__text { display: grid; justify-items: start; gap: 24px; } .cu-phero__title { display: grid; font-family: var(--cu-font-display); font-size: clamp(52px, 7vw, 120px); font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: -.01em; } .cu-phero--dark .cu-phero__title .is-accent { color: var(--cu-yellow); } .cu-phero--light .cu-phero__title .is-accent { color: var(--cu-red); } .cu-phero__lead { max-width: 560px; margin: 0; font-size: 18px; line-height: 1.55; color: inherit; opacity: .88; } .cu-phero__stats { display: flex; gap: 40px; margin: 8px 0 0; } .cu-phero__stats dt { font-family: var(--cu-font-display); font-size: 40px; font-weight: 600; color: var(--cu-yellow); line-height: 1.1; } .cu-phero__stats dd { margin: 0; font-size: 13px; color: var(--cu-muted-dark); } .cu-phero__collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 250px 120px 240px; gap: 16px; } .cu-phero__tile { position: relative; margin: 0; border-radius: var(--cu-r-lg); overflow: hidden; background: var(--cu-white); } .cu-phero__tile img { width: 100%; height: 100%; object-fit: cover; } .cu-phero__tile--0 { grid-row: 1 / 3; } .cu-phero__tile--1 { grid-row: 1 / 2; } .cu-phero__tile--2 { grid-row: 3 / 4; } .cu-phero__tile--3 { grid-row: 2 / 4; grid-column: 2; } .cu-phero__tile figcaption { position: absolute; left: 14px; bottom: 14px; padding: 5px 8px; border-radius: var(--cu-r-sm); background: var(--cu-white); color: var(--cu-ink); font-family: var(--cu-font-display); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; } .cu-phero__sticker { left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-12deg); width: 140px; height: 140px; } .cu-phero__row { position: relative; display: grid; grid-template-columns: 1.2fr 1fr 1.1fr 1fr .6fr; gap: 14px; margin-top: 30px; padding-inline: 0; } .cu-phero__rimg { margin: 0; border-radius: var(--cu-r-lg); overflow: hidden; height: 255px; } .cu-phero__rimg:nth-child(2), .cu-phero__rimg:nth-child(4) { margin-top: 22px; height: 255px; } .cu-phero__rimg img { width: 100%; height: 100%; object-fit: cover; } .cu-phero__rsticker { left: 43%; top: -30px; width: 128px; height: 128px; } /* ---------- Kartītes ---------- */ .cu-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .cu-cards--3 { grid-template-columns: repeat(3, 1fr); } .cu-cards--2 { grid-template-columns: repeat(2, 1fr); } .cu-ccard { display: grid; align-content: start; gap: 6px; padding: 26px 24px; border-radius: var(--cu-r-lg); border: 1px solid transparent; } .cu-ccard--big { gap: 12px; padding: 28px; min-height: 180px; } .cu-ccard__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 14px; background: var(--cu-ink); color: var(--cu-white); } .cu-ccard__label { font-family: var(--cu-font-display); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; } .cu-ccard__value { font-family: var(--cu-font-display); font-size: 30px; font-weight: 600; text-transform: uppercase; line-height: 1.1; } .cu-ccard__title { font-family: var(--cu-font-display); font-size: 26px; font-weight: 600; text-transform: uppercase; line-height: 1.1; } .cu-ccard__note { font-size: 14px; margin: 0; opacity: .85; } .cu-ccard__price { margin: 8px 0 0; font-family: var(--cu-font-display); font-size: 22px; font-weight: 600; } .cu-ccard--yellow { background: var(--cu-yellow); color: var(--cu-ink); } .cu-ccard--ink { background: var(--cu-ink); color: var(--cu-white); } .cu-ccard--ink .cu-ccard__ico, .cu-ccard--red .cu-ccard__ico { background: var(--cu-white); color: var(--cu-ink); } .cu-ccard--red { background: var(--cu-red); color: var(--cu-white); } .cu-ccard--white { background: var(--cu-white); color: var(--cu-ink); border-color: var(--cu-line); } .cu-ccard--sand { background: var(--cu-cream); border-color: var(--cu-line); } .cu-section--white .cu-ccard--sand { background: var(--cu-cream); } /* Bilžu rinda, stāsts */ .cu-gallery__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .cu-gallery__row li { aspect-ratio: 1 / 1.25; border-radius: var(--cu-r-lg); overflow: hidden; background: var(--cu-white); } .cu-gallery__row img { width: 100%; height: 100%; object-fit: cover; } .cu-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; } .cu-story__title { margin: 22px 0 24px; font-family: var(--cu-font-display); font-size: clamp(32px, 3.6vw, 52px); font-weight: 600; line-height: 1.05; text-transform: uppercase; } .cu-story__stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 22px 0; border-top: 1px solid var(--cu-ink); } .cu-story__stats div:last-child { border-bottom: 1px solid var(--cu-ink); } .cu-story__stats dt { font-family: var(--cu-font-display); font-size: clamp(48px, 5vw, 80px); font-weight: 600; line-height: 1; } .cu-story__stats dd { margin: 0; color: var(--cu-muted); font-size: 15px; text-align: right; } /* ---------- Kontakti ---------- */ .cu-ccards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; } .cu-ccards .cu-ccard { padding: 18px 18px 22px; } .cu-ccards .cu-ccard__ico { margin-bottom: 18px; } .cu-contact__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; } .cu-contact__grid.is-full { grid-template-columns: 1fr; } .cu-map { position: relative; min-height: 440px; border-radius: var(--cu-r-xl); overflow: hidden; background: var(--cu-sand); } .cu-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .cu-map__art { position: absolute; inset: 0; background: repeating-linear-gradient(28deg, transparent 0 46px, #fff 46px 56px), repeating-linear-gradient(-62deg, transparent 0 70px, #fff 70px 80px), #f0e9df; } .cu-map__pin { position: absolute; left: 34%; top: 36%; display: flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: var(--cu-r-md); background: var(--cu-ink); color: var(--cu-white); font-size: 13px; } .cu-map__pin strong { display: block; font-size: 14px; } .cu-map__pin .cu-icon { color: var(--cu-yellow); } .cu-map__btn { position: absolute; left: 16px; bottom: 16px; } .cu-formcard { padding: clamp(24px, 3vw, 32px); border-radius: var(--cu-r-xl); background: var(--cu-cream); border: 1px solid var(--cu-line); } .cu-formcard--white { background: var(--cu-white); } .cu-formcard__title { margin-bottom: 18px; font-family: var(--cu-font-display); font-size: 34px; text-transform: uppercase; } .cu-formsec__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; } .cu-formsec__title { margin: 22px 0 18px; font-family: var(--cu-font-display); font-size: var(--cu-fs-h2); line-height: 1.04; text-transform: uppercase; } .cu-formsec__text { color: var(--cu-muted); font-size: 15px; } /* ---------- Formas ---------- */ .cu-form { display: grid; gap: 16px; } .cu-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; } .form-row { display: grid; gap: 8px; margin: 0; } .form-row-wide, .cu-fields .form-row-wide { grid-column: 1 / -1; } .form-row label, .cu-form label:not(.cu-check):not(.cu-fbtn):not(.cu-switch):not(.cu-radio):not(.cu-drop) { font-size: 14px; font-weight: 600; } .form-row .required, .cu-form .required { color: var(--cu-red); text-decoration: none; border: 0; } .cu-input, .input-text, .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row input[type="number"], .form-row select, .form-row textarea, .cu-form select, .cu-form textarea, .select2-container .select2-selection--single { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--cu-r-md); border: 1.5px solid var(--cu-line); background: var(--cu-white); font-size: 16px; line-height: 1.3; transition: border-color .2s, box-shadow .2s; } .cu-input:focus, .input-text:focus, .form-row select:focus, .form-row textarea:focus, .cu-form textarea:focus, .cu-form select:focus { outline: 0; border-color: var(--cu-ink); box-shadow: 0 0 0 3px rgba(254, 185, 47, .35); } .woocommerce-invalid .input-text, .woocommerce-invalid select { border-color: var(--cu-red); } .woocommerce-validated .input-text { border-color: #b5d3c2; background: var(--cu-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230f5a3a' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; padding-right: 40px; } .form-row select, .cu-form select { appearance: none; background: var(--cu-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; padding-right: 44px; } textarea.input-text, .cu-form textarea { min-height: 110px; resize: vertical; } .cu-check, .cu-radio { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; line-height: 1.45; } .cu-check input, .cu-radio input, .cu-switch input, .cu-fbtn input, .cu-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cu-check__box { flex: none; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--cu-muted); background: var(--cu-white); display: grid; place-items: center; transition: background .15s, border-color .15s; } .cu-check input:checked + .cu-check__box { background: var(--cu-ink); border-color: var(--cu-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); background-size: 15px; background-position: center; background-repeat: no-repeat; } @media (hover: hover) and (pointer: fine) { .cu-check:hover .cu-check__box { border-color: var(--cu-ink); } .cu-radio:hover .cu-radio__dot { border-color: var(--cu-ink); } } .cu-check input:focus-visible + .cu-check__box, .cu-radio input:focus-visible + .cu-radio__dot { outline: 2px solid var(--cu-red); outline-offset: 2px; } .cu-check__label { flex: 1; } .cu-check__num { color: var(--cu-muted); font-size: 12px; } .cu-radio__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--cu-muted); background: var(--cu-white); } .cu-radio input:checked + .cu-radio__dot { border: 6px solid var(--cu-ink); } .cu-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; } .cu-switch__track { position: relative; width: 44px; height: 24px; border-radius: 99px; background: var(--cu-line); transition: background .2s; flex: none; } .cu-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cu-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s var(--cu-ease); } .cu-switch input:checked + .cu-switch__track { background: var(--cu-ink); } .cu-switch input:checked + .cu-switch__track::after { transform: translateX(20px); background: var(--cu-yellow); } .cu-fbtn { position: relative; display: inline-flex; cursor: pointer; } .cu-fbtn span { display: inline-flex; align-items: center; padding: 11px 16px; border-radius: var(--cu-r-md); border: 1.5px solid var(--cu-line); background: var(--cu-white); font-size: 14px; font-weight: 600; transition: border-color .15s, background .15s; } .cu-fbtn input:checked + span { background: var(--cu-ink); color: var(--cu-white); border-color: var(--cu-ink); } .cu-fbtn:hover span { border-color: var(--cu-ink); } .cu-fbtn input:focus-visible + span { outline: 2px solid var(--cu-red); outline-offset: 2px; } .cu-form__chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .cu-form__chips legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; } .cu-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--cu-r-pill); background: var(--cu-white); border: 1px solid var(--cu-line); justify-self: start; } .cu-seg span { display: inline-block; padding: 9px 18px; border-radius: var(--cu-r-pill); font-size: 14px; font-weight: 600; cursor: pointer; } .cu-seg input:checked + span { background: var(--cu-ink); color: var(--cu-white); } .cu-design { display: grid; gap: 12px; } .cu-design__step { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-family: var(--cu-font-display); font-size: 18px; text-transform: uppercase; } .cu-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 28px 20px; border-radius: var(--cu-r-md); border: 2px dashed var(--cu-muted-dark); background: var(--cu-white); text-align: center; cursor: pointer; transition: border-color .2s, background .2s; } .cu-drop.is-over, .cu-drop:hover { border-color: var(--cu-ink); background: var(--cu-cream); } .cu-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .cu-drop__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cu-yellow); margin-bottom: 4px; } .cu-drop__title { font-weight: 600; font-size: 15px; } .cu-drop__hint { color: var(--cu-muted); font-size: 12px; } .cu-filechip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--cu-r-md); background: var(--cu-sand); } .cu-filechip__ico { color: var(--cu-red); } .cu-filechip__text { flex: 1; min-width: 0; } .cu-filechip__text strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cu-filechip__text small { color: var(--cu-muted); font-size: 12px; } .cu-filechip__del { color: var(--cu-muted); } .cu-filechip__del:hover { color: var(--cu-red); } .cu-design__upload { display: grid; gap: 10px; } .cu-design__label { margin: 0; font-size: 14px; font-weight: 600; } .cu-filemsg { margin: 0; padding: 10px 14px; border-radius: var(--cu-r-md); background: #fff1f3; color: var(--cu-red-dark); font-size: 13px; font-weight: 600; } .cu-biglink { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--cu-r-md); background: var(--cu-sand); transition: box-shadow .25s var(--cu-ease-out), background-color .25s; } .cu-biglink.is-hot { background: var(--cu-yellow-soft); box-shadow: 0 0 0 2px var(--cu-yellow); } .cu-biglink__title { margin: 0; font-size: 14px; font-weight: 700; } .cu-biglink__text { margin: 0; color: var(--cu-muted); font-size: 13px; line-height: 1.45; } .cu-check__label a { text-decoration: underline; text-underline-offset: 2px; } .cu-check__label a:hover { color: var(--cu-red); } .cu-biglink__text a { color: var(--cu-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .cu-biglink__text a:hover { color: var(--cu-red); } .cu-biglink .input-text { width: 100%; margin-top: 4px; background: var(--cu-white); } .cu-textarea { position: relative; } .cu-textarea textarea { width: 100%; min-height: 110px; padding: 14px 16px 30px; border-radius: var(--cu-r-md); border: 1.5px solid var(--cu-line); background: var(--cu-white); resize: vertical; } .cu-textarea__count { position: absolute; left: 16px; bottom: 10px; font-size: 11px; color: var(--cu-muted); } /* ---------- Veikals ---------- */ .cu-phead--shop .cu-chips { margin-top: 4px; } .cu-phead--shop .cu-h1 { font-size: clamp(44px, 6.2vw, 104px); } .cu-shop { padding-bottom: var(--cu-space-section); } .cu-shop__grid { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; } .cu-filters__box { position: sticky; top: 120px; display: grid; gap: 0; padding: 20px; border-radius: var(--cu-r-xl); border: 1px solid var(--cu-line); background: var(--cu-white); max-height: calc(100vh - 140px); overflow: auto; } .cu-filters__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--cu-line); } .cu-filters__title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--cu-font-display); font-size: 20px; font-weight: 600; text-transform: uppercase; } .cu-filters__reset { color: var(--cu-red); font-size: 13px; font-weight: 700; } .cu-filters__close { display: none; } .cu-fgroup { border-bottom: 1px solid var(--cu-line); } .cu-fgroup summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 700; font-size: 15px; } .cu-fgroup summary::-webkit-details-marker { display: none; } .cu-fgroup[open] summary .cu-icon { transform: rotate(180deg); } .cu-fgroup summary .cu-icon { transition: transform .2s; } .cu-fgroup__body { display: grid; gap: 12px; padding-bottom: 18px; } .cu-fgroup__body--btns { display: flex; flex-wrap: wrap; gap: 8px; } .cu-fgroup__body .cu-check.is-extra { display: none; } .cu-fgroup__body.is-expanded .cu-check.is-extra { display: flex; } .cu-fgroup__more { justify-self: start; color: var(--cu-red); font-size: 13px; font-weight: 700; } .cu-price-range { grid-template-columns: 1fr 1fr; } .cu-price-range input { width: 100%; height: 42px; padding: 0 12px; border-radius: var(--cu-r-md); border: 1.5px solid var(--cu-line); background: var(--cu-cream); } .cu-filters__apply { margin-top: 18px; } .cu-filters__cta { display: grid; gap: 10px; justify-items: start; margin-top: 18px; padding: 20px; border-radius: var(--cu-r-lg); background: var(--cu-yellow); } .cu-filters__cta p { margin: 0; font-family: var(--cu-font-display); font-size: 20px; font-weight: 600; line-height: 1.15; text-transform: uppercase; } .cu-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 24px; } .cu-toolbar__filters { display: none; } .cu-toolbar__count { margin: 0; font-weight: 600; } .cu-active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cu-afilter { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--cu-r-pill); background: var(--cu-sand); font-size: 13px; font-weight: 600; } .cu-toolbar__clear { color: var(--cu-muted); font-size: 13px; } .cu-toolbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .woocommerce-ordering select { height: 44px; padding: 0 40px 0 18px; border-radius: var(--cu-r-pill); border: 1.5px solid var(--cu-line); background: var(--cu-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") no-repeat right 12px center / 20px; appearance: none; font-weight: 600; font-size: 14px; } .woocommerce-ordering { margin: 0; } .woocommerce-ordering select:hover, .form-row select:hover, .cu-form select:hover, .cu-terminal__select:hover { border-color: var(--cu-ink); } /* ---------- Nolaižamie saraksti (cu-select): vienots izskats visiem select laukiem ---------- */ .cu-select { position: relative; width: 100%; } .cu-select__native { position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; } .cu-select__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 12px 12px 12px 16px; border-radius: var(--cu-r-md); border: 1.5px solid var(--cu-line); background: var(--cu-white); color: var(--cu-ink); font: inherit; font-size: 16px; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; } .cu-select__btn:hover { border-color: var(--cu-ink); } .cu-select.is-open .cu-select__btn, .cu-select__btn:focus-visible { outline: 0; border-color: var(--cu-ink); box-shadow: 0 0 0 3px rgba(254, 185, 47, .35); } .cu-select__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cu-select.is-placeholder .cu-select__val { color: var(--cu-muted); } .cu-select.is-disabled .cu-select__btn { opacity: .55; cursor: default; } .cu-select__chev { flex: none; color: var(--cu-ink); transition: transform .2s var(--cu-ease-out); } .cu-select.is-open .cu-select__chev { transform: rotate(180deg); } .cu-select__menu { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow: auto; overscroll-behavior: contain; border-radius: var(--cu-r-md); background: var(--cu-white); color: var(--cu-ink); box-shadow: 0 18px 40px rgba(24, 23, 14, .18), 0 0 0 1px rgba(24, 23, 14, .06); transform-origin: top; animation: cu-lang-in .18s var(--cu-ease-out); outline: 0; scrollbar-width: thin; } .cu-select--up .cu-select__menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; animation-name: cu-lang-in-up; } .cu-select__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--cu-r-sm); font-size: 15px; font-weight: 500; line-height: 1.3; cursor: pointer; transition: background-color .12s; } .cu-select__opt > span { min-width: 0; overflow-wrap: anywhere; } .cu-select__opt.is-active { background: var(--cu-sand); } .cu-select__opt[aria-selected="true"] { font-weight: 700; } .cu-select__opt[aria-selected="true"] .cu-icon { flex: none; color: var(--cu-red); } .cu-select__opt[aria-disabled="true"] { opacity: .45; cursor: default; } .cu-select__opt--empty { color: var(--cu-muted); font-weight: 500; } .cu-select__group { padding: 10px 12px 4px; font-family: var(--cu-font-display); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cu-muted); } .cu-select__group:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--cu-line); padding-top: 12px; } .cu-select__none { padding: 12px; font-size: 14px; color: var(--cu-muted); } /* Kataloga kārtošana: apaļa poga, saraksts pie labās malas. */ .cu-select--pill { width: auto; } .cu-select--pill .cu-select__btn { min-height: 44px; padding: 0 12px 0 18px; border-radius: var(--cu-r-pill); font-size: 14px; font-weight: 600; white-space: nowrap; } .cu-select--pill .cu-select__menu { left: auto; right: 0; min-width: 200px; transform-origin: top right; } .cu-select--pill .cu-select__opt { font-size: 14px; } /* Pakomāti: mazāks lauks, garš saraksts ar pilsētu grupām. */ .cu-select--sm .cu-select__btn { min-height: 46px; padding: 10px 12px 10px 14px; font-size: 15px; } .cu-select--sm .cu-select__menu { max-height: 300px; } .cu-select--sm .cu-select__opt { padding: 8px 10px; font-size: 14px; } .woocommerce-ordering .cu-select__btn:hover, .form-row .cu-select__btn:hover { border-color: var(--cu-ink); } .woocommerce-invalid .cu-select__btn { border-color: var(--cu-red); } .form-row .cu-select, .cu-terminal .cu-select { margin: 0; } #shipping_method li .cu-select { margin-top: 0; } .cu-viewtoggle { display: flex; gap: 6px; } .cu-viewtoggle .cu-iconbtn { width: 44px; height: 44px; border-color: var(--cu-line); background: var(--cu-white); } .cu-viewtoggle .cu-iconbtn:hover:not(.is-active) { border-color: var(--cu-ink); } .cu-viewtoggle .cu-iconbtn.is-active { background: var(--cu-ink); border-color: var(--cu-ink); color: var(--cu-white); } .cu-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 24px; list-style: none; } .cu-pgrid--4 { grid-template-columns: repeat(4, 1fr); } .cu-pgrid.is-list { grid-template-columns: 1fr; gap: 16px; } .cu-pgrid.is-list .cu-pcard { grid-template-columns: 180px 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 24px; align-items: start; padding: 12px; border-radius: var(--cu-r-lg); background: var(--cu-white); } .cu-pgrid.is-list .cu-pcard__media { grid-row: 1 / 5; margin: 0; } .cu-loadmore { display: grid; justify-items: center; gap: 12px; margin-top: 48px; color: var(--cu-muted); font-size: 13px; } .cu-loadmore p { margin: 0; } .cu-loadmore__bar { width: 206px; height: 3px; background: var(--cu-line); border-radius: 99px; overflow: hidden; } .cu-loadmore__bar i { display: block; height: 100%; background: var(--cu-ink); } .cu-empty { padding: 60px 24px; text-align: center; border-radius: var(--cu-r-xl); background: var(--cu-white); } .cu-empty__title { font-family: var(--cu-font-display); font-size: 30px; text-transform: uppercase; margin-bottom: 8px; } /* ---------- Produkta lapa ---------- */ .cu-product { padding-block: 24px 80px; } .cu-product__grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; } .cu-gallery { display: grid; grid-template-columns: 68px 1fr; gap: 12px; } .cu-gallery__thumbs { display: grid; gap: 10px; align-content: start; } .cu-gallery__thumb { position: relative; display: block; width: 68px; height: 68px; border-radius: var(--cu-r-md); overflow: hidden; border: 2px solid transparent; background: var(--cu-white); } .cu-gallery__thumb { transition: border-color .2s; } .cu-gallery__thumb:hover:not(.is-active) { border-color: var(--cu-line); } .cu-gallery__thumb.is-active { border-color: var(--cu-ink); } .cu-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; } .cu-gallery__more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(24, 23, 14, .55); color: var(--cu-white); font-weight: 800; } .cu-gallery__main { position: relative; border-radius: var(--cu-r-xl); overflow: hidden; background: var(--cu-white); } .cu-gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .cu-gallery__track::-webkit-scrollbar { display: none; } .cu-gallery__track li { scroll-snap-align: start; aspect-ratio: 1; } .cu-gallery__track a, .cu-gallery__track img { display: block; width: 100%; height: 100%; } .cu-gallery__track img { object-fit: contain; } .cu-gallery__main .cu-pcard__tags { top: 20px; left: 20px; } .cu-gallery__zoom { position: absolute; top: 16px; right: 16px; box-shadow: var(--cu-shadow); } .cu-gallery__counter { position: absolute; left: 20px; bottom: 20px; padding: 6px 12px; border-radius: var(--cu-r-pill); background: var(--cu-ink); color: var(--cu-white); font-size: 12px; font-weight: 700; } .cu-gallery__arrows { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 10px; } .cu-gallery__arrows .cu-iconbtn--white { box-shadow: var(--cu-shadow); } .cu-zoomview { position: fixed; inset: 0; z-index: 130; background: rgba(24, 23, 14, .92); display: grid; place-items: center; padding: 30px; } .cu-zoomview img { max-height: calc(100vh - 60px); width: auto; border-radius: var(--cu-r-lg); } .cu-zoomview button { position: absolute; top: 20px; right: 20px; } .cu-summary { display: grid; gap: 20px; } .cu-summary__eyebrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; font-family: var(--cu-font-display); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--cu-muted); } .cu-summary__eyebrow a { color: var(--cu-red); } .cu-summary__eyebrow span::before { content: "·"; margin-right: 10px; } .cu-summary__title { font-family: var(--cu-font-display); font-size: clamp(36px, 3.4vw, 52px); font-weight: 600; line-height: 1.04; text-transform: uppercase; } .cu-summary__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; } .cu-summary__pnote { color: var(--cu-muted); font-size: 13px; } .cu-summary__short { font-size: 15px; line-height: 1.6; } .cu-summary__short p { margin: 0; } .cu-guide-link { display: inline-flex; align-items: center; gap: 8px; justify-self: end; margin-bottom: -14px; color: var(--cu-red); font-size: 14px; font-weight: 700; position: relative; z-index: 1; } .cu-buybox form.cart { display: grid; gap: 16px; margin: 0; } .cu-buybox .variations { width: 100%; border-collapse: collapse; } .cu-buybox .variations tr { display: grid; gap: 10px; margin-bottom: 4px; } .cu-buybox .variations th, .cu-buybox .variations td { padding: 0; text-align: left; } .cu-buybox .variations th label { font-size: 15px; font-weight: 700; } .cu-buybox .variations th label::after { content: ":"; } .cu-swatches-wrap select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .cu-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; } .cu-swatch { display: grid; gap: 2px; align-content: start; min-height: 52px; padding: 12px 14px; border-radius: var(--cu-r-md); border: 1.5px solid var(--cu-line); background: var(--cu-white); text-align: left; } /* Pāreja tikai uz hover: izvēle, ko skripts uzliek ielādē, parādās uzreiz, bez mirgošanas. */ .cu-swatch:hover { border-color: var(--cu-ink); transition: border-color .15s; } .cu-swatch__name { font-family: var(--cu-font-display); font-size: 20px; font-weight: 600; line-height: 1.1; } .cu-swatch--rich .cu-swatch__name { font-size: 26px; } .cu-swatch:not(.cu-swatch--rich) .cu-swatch__name { font-family: var(--cu-font-body); font-size: 14px; font-weight: 700; } .cu-swatch__dims { font-size: 12px; font-weight: 600; } .cu-swatch__note { font-size: 11px; color: var(--cu-muted); } .cu-swatch[aria-checked="true"] { background: var(--cu-ink); border-color: var(--cu-ink); color: var(--cu-white); } .cu-swatch[aria-checked="true"] .cu-swatch__name { color: var(--cu-yellow); } .cu-swatch[aria-checked="true"] .cu-swatch__note { color: var(--cu-muted-dark); } .cu-swatch.is-disabled { opacity: .4; text-decoration: line-through; } .single_variation_wrap { display: grid; gap: 14px; } .woocommerce-variation-price .price { font-family: var(--cu-font-display); font-size: 22px; } .woocommerce-variation-availability p { margin: 0; font-size: 13px; color: var(--cu-green); } .cu-buybox .woocommerce-variation-add-to-cart, .cu-buybox form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .cu-buybox form.cart:not(.variations_form) .cu-design { flex-basis: 100%; } .cu-buybox .quantity { height: 56px; padding: 6px; } .cu-buybox .single_add_to_cart_button { flex: 1; min-height: 56px; padding: 0 24px; border-radius: var(--cu-r-pill); background: var(--cu-red); color: var(--cu-white); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s; } .cu-buybox .single_add_to_cart_button:hover { background: var(--cu-red-dark); } .cu-buybox .single_add_to_cart_button.disabled { opacity: .55; } .cu-buybox .single_add_to_cart_button::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-8 4c0 .55-.45 1-1 1s-1-.45-1-1V8h2v2zm2-6c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm4 6c0 .55-.45 1-1 1s-1-.45-1-1V8h2v2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-8 4c0 .55-.45 1-1 1s-1-.45-1-1V8h2v2zm2-6c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm4 6c0 .55-.45 1-1 1s-1-.45-1-1V8h2v2z'/%3E%3C/svg%3E") center / contain no-repeat; } .cu-buybox__wish { width: 56px; height: 56px; border-color: var(--cu-line); background: var(--cu-white); color: var(--cu-red); } .cu-buybox--custom form.cart { padding: 20px; border-radius: var(--cu-r-xl); border: 2px solid var(--cu-ink); background: var(--cu-white); } .cu-buybox .stock { margin: 0; font-size: 13px; } .cu-infolist { display: grid; border: 1px solid var(--cu-line); border-radius: var(--cu-r-lg); background: var(--cu-white); } .cu-infolist li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; } .cu-infolist li + li { border-top: 1px solid var(--cu-line); } .cu-infolist__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cu-yellow); flex: none; } .cu-infolist strong { display: block; font-size: 15px; font-weight: 600; } .cu-infolist small { color: var(--cu-muted); font-size: 12px; } .cu-summary__pay { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--cu-muted); font-size: 13px; } .cu-customcta { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--cu-r-lg); background: var(--cu-yellow); } .cu-customcta span { flex: 1; } .cu-customcta strong { display: block; font-size: 15px; } .cu-customcta small { font-size: 13px; } .cu-customcta .cu-icon--arrow-right { transition: transform .2s; } .cu-customcta:hover .cu-icon--arrow-right { transform: translateX(4px); } .cu-pdetails__grid { display: grid; grid-template-columns: 1fr 520px; gap: 48px; align-items: start; } .cu-pdetails .cu-tabs { margin-bottom: 26px; } .cu-pdetails__side { display: grid; gap: 18px; } .cu-specs { padding: 24px 20px; border-radius: var(--cu-r-xl); background: var(--cu-cream); } .cu-specs__title { margin-bottom: 12px; font-family: var(--cu-font-display); font-size: 22px; font-weight: 600; text-transform: uppercase; } .cu-specs dl div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--cu-line); font-size: 14px; } .cu-specs dt { color: var(--cu-muted); } .cu-specs dd { margin: 0; text-align: right; font-weight: 600; } .cu-care { padding: 24px 20px; border-radius: var(--cu-r-xl); background: var(--cu-ink); color: var(--cu-white); } .cu-care ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .cu-care li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--cu-r-md); background: rgba(255, 255, 255, .06); font-size: 13px; } .cu-care .cu-icon { color: var(--cu-yellow); } .cu-files { display: grid; gap: 8px; } .cu-files a { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; } .cu-files a:hover { color: var(--cu-red); } .cu-related { padding-block: 80px; } /* ---------- Grozs un kase ---------- */ .cu-woopage { padding-bottom: 0; } .cu-woopage > .woocommerce { width: 100%; } .cu-woopage .woocommerce-notices-wrapper, .woocommerce-NoticeGroup { width: min(var(--cu-wrap), 100% - 2 * var(--cu-gutter)); margin: 16px auto 0; } .woocommerce-message, .woocommerce-error, .woocommerce-info { list-style: none; margin: 0 0 16px; padding: 14px 18px; border-radius: var(--cu-r-md); background: #e6efe9; color: var(--cu-green); font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; } .woocommerce-error { background: #ffe3e8; color: #a3001d; display: block; } .woocommerce-error li { margin: 2px 0; } .woocommerce-info { background: var(--cu-yellow-soft); color: var(--cu-ink); } .woocommerce-message .button, .woocommerce-info .button { font-weight: 700; text-decoration: underline; } .cu-cart, .cu-checkout { width: min(var(--cu-wrap), 100% - 2 * var(--cu-gutter)); margin-inline: auto; padding-block: 32px var(--cu-space-tight); } .cu-csteps { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 28px; list-style: none; font-size: 15px; } .cu-cstep { display: flex; align-items: center; gap: 10px; color: var(--cu-muted); } .cu-cstep + .cu-cstep::before { content: ""; width: 56px; height: 1.5px; background: var(--cu-line); margin-right: 2px; } .cu-cstep.is-done + .cu-cstep::before { background: var(--cu-ink); } .cu-cstep__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--cu-line); font-size: 12px; font-weight: 700; } .cu-cstep.is-current { color: var(--cu-ink); font-weight: 600; } .cu-cstep.is-current .cu-cstep__n { background: var(--cu-ink); border-color: var(--cu-ink); color: var(--cu-white); } .cu-cstep.is-done { color: var(--cu-ink); } .cu-cstep.is-done .cu-cstep__n { background: var(--cu-green); border-color: var(--cu-green); color: var(--cu-white); } .cu-cart .cu-phead__titlewrap { margin-bottom: 26px; } .cu-cart__grid { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; } /* Kopsavilkums pielīp pie augšas, kamēr ritina preces. */ .cu-cart__side { position: sticky; top: calc(var(--cu-header-h) + 20px); align-self: start; } .cu-cartbar { display: none; } .cu-citems { display: grid; padding: 4px 20px; border-radius: var(--cu-r-xl); border: 1px solid var(--cu-line); background: var(--cu-white); } .cu-citem { display: grid; grid-template-columns: 92px 1fr auto; gap: 20px; padding: 18px 0; } .cu-citem + .cu-citem { border-top: 1px solid var(--cu-line); } .cu-citem__img { width: 92px; height: 92px; border-radius: var(--cu-r-md); overflow: hidden; background: var(--cu-cream); } .cu-citem__img img { width: 100%; height: 100%; object-fit: cover; } .cu-citem__name { font-weight: 600; font-size: 16px; } .cu-citem__meta { margin: 6px 0 12px; font-size: 13px; color: var(--cu-muted); } .cu-citem__meta dl, .cu-mcitem__meta dl, .cu-review__name dl { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; } .cu-citem__meta dt, .cu-mcitem__meta dt, .cu-review__name dt { font-weight: 500; } .cu-citem__meta dd, .cu-mcitem__meta dd, .cu-review__name dd { margin: 0 8px 0 0; } .cu-citem__meta dd p, .cu-review__name dd p { margin: 0; } .variation-Izgatavoana, dd.variation-Izgatavošana, dt.variation-Izgatavošana { color: var(--cu-green); } .cu-citem__actions { display: flex; align-items: center; gap: 18px; } .cu-citem__actions .quantity { height: 40px; } .cu-citem__remove { display: inline-flex; align-items: center; gap: 6px; color: var(--cu-muted); font-size: 13px; font-weight: 600; } .cu-citem__remove:hover { color: var(--cu-red); } .cu-citem__price { text-align: right; font-family: var(--cu-font-display); font-size: 22px; font-weight: 500; } .cu-citem__price del { display: block; font-family: var(--cu-font-body); font-size: 12px; color: var(--cu-muted); } .cu-coupon { margin-top: 24px; display: grid; gap: 8px; } .cu-coupon label { font-size: 14px; font-weight: 600; } .cu-coupon__row { display: flex; gap: 10px; } .cu-coupon__row .cu-input { flex: 1; } .cu-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 600; } .cu-summarybox { padding: 26px 22px; border-radius: var(--cu-r-xl); border: 1px solid var(--cu-line); background: var(--cu-white); } .cu-summarybox__title { margin-bottom: 12px; font-family: var(--cu-font-display); font-size: 24px; font-weight: 600; text-transform: uppercase; } .cu-summarybox__headrow { display: flex; justify-content: space-between; align-items: baseline; } .cu-totals { margin: 0 0 14px; font-size: 15px; } .cu-totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; } .cu-totals dt { color: var(--cu-muted); } .cu-totals dd { margin: 0; text-align: right; } .cu-totals__discount dd, .cu-totals__discount dd .amount { color: var(--cu-red); } .cu-totals__discount .woocommerce-remove-coupon { font-size: 12px; margin-left: 6px; color: var(--cu-muted); } .cu-totals__total { margin-top: 8px; padding-top: 16px !important; border-top: 1px solid var(--cu-line); align-items: baseline; } .cu-totals__total dt { color: var(--cu-ink); } .cu-totals__total dd { font-family: var(--cu-font-display); font-size: 32px; font-weight: 600; } .cu-totals__vat { color: var(--cu-muted); font-size: 12px; margin: -8px 0 14px; } .cu-summarybox__secure { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 12px 0 0; color: var(--cu-muted); font-size: 12px; } .cu-trust { display: grid; gap: 12px; margin-top: 16px; padding: 22px; border-radius: var(--cu-r-xl); background: var(--cu-ink); color: var(--cu-white); font-size: 14px; } .cu-trust li { display: flex; gap: 10px; align-items: flex-start; } .cu-trust .cu-icon { color: var(--cu-yellow); margin-top: 2px; } .cu-emptycart { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 40px 0 20px; } .cu-emptycart__ico { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; background: var(--cu-yellow); } .cu-emptycart p { color: var(--cu-muted); max-width: 420px; } .cu-checkout .cu-h1 { margin-bottom: 32px; } .cu-checkout__grid { display: grid; grid-template-columns: 1fr 470px; gap: 40px; align-items: start; } .cu-checkout__main { display: grid; gap: 20px; } /* Kasē kopsavilkums pielīp pie augšas, kamēr aizpilda formu. Pielīp pati kolonna (iekšējais bloks tajā nevar pārvietoties). Garu preču sarakstu ritina bloka iekšā; ja bloks tik un tā neietilpst ekrānā, JS pieliek .is-tall un tas ritinās kopā ar lapu. */ .cu-checkout__side { position: sticky; top: calc(var(--cu-header-h) + 20px); align-self: start; } .cu-checkout__side.is-tall { position: static; } .cu-checkout__side .cu-review__items { max-height: clamp(150px, calc(100vh - var(--cu-header-h) - 620px), 380px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 10px 8px 18px 0; margin-top: -10px; } .cu-paybar { display: none; } .cu-cbox { padding: clamp(20px, 2.4vw, 28px); border-radius: var(--cu-r-xl); border: 1px solid var(--cu-line); background: var(--cu-white); } .cu-cbox__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .cu-cbox__head h2 { font-family: var(--cu-font-display); font-size: 26px; font-weight: 600; text-transform: uppercase; line-height: 1.1; } .cu-cbox__head p { margin: 0; color: var(--cu-muted); font-size: 13px; } .cu-cbox__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cu-yellow); font-family: var(--cu-font-display); font-size: 18px; font-weight: 600; flex: none; } .cu-checkout .form-row-first, .cu-checkout .form-row-last, .cu-form .form-row-first, .cu-form .form-row-last { grid-column: span 1; } .cu-checkout .form-row-wide { grid-column: 1 / -1; } .cu-companytoggle { margin: 18px 0 0; } .cu-companytoggle .form-row { display: flex; } .cu-companytoggle label.checkbox { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; font-weight: 600; } .cu-companytoggle input[type="checkbox"] { appearance: none; position: relative; width: 44px; height: 24px; border-radius: 99px; background: var(--cu-line); transition: background .2s; margin: 0; cursor: pointer; } .cu-companytoggle input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cu-white); transition: transform .2s var(--cu-ease); } .cu-companytoggle input[type="checkbox"]:checked { background: var(--cu-ink); } .cu-companytoggle input[type="checkbox"]:checked::after { transform: translateX(20px); background: var(--cu-yellow); } .cu-companytoggle .optional { display: none; } .cu-companyfields { margin-top: 16px; padding: 18px; border-radius: var(--cu-r-lg); background: var(--cu-cream); } .cu-countryfield { margin-bottom: 14px; } .cu-ship-methods ul, #shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } #shipping_method li { position: relative; padding: 16px 18px; border-radius: var(--cu-r-lg); border: 1.5px solid var(--cu-line); transition: border-color .2s; } #shipping_method li.is-checked { border: 2px solid var(--cu-ink); } #shipping_method li > input { position: absolute; left: 18px; top: 26px; margin: 0; width: 18px; height: 18px; accent-color: var(--cu-ink); } #shipping_method li label { display: block; padding-left: 32px; cursor: pointer; } .cu-shipopt { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 14px; } .cu-shipopt__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--cu-r-md); background: var(--cu-sand); } #shipping_method li.is-checked .cu-shipopt__ico { background: var(--cu-yellow); } .cu-shipopt__text strong { display: block; font-weight: 600; } .cu-shipopt__text small { color: var(--cu-muted); font-size: 13px; } .cu-shipopt__price { font-weight: 600; } .cu-free { color: var(--cu-green); } #shipping_method li select, #shipping_method li .select2 { margin-top: 12px; width: 100% !important; } .cu-terminal { display: none; margin: 14px 0 2px 32px; padding: 14px; border-radius: var(--cu-r-md); background: var(--cu-cream); } #shipping_method li.is-checked .cu-terminal { display: grid; gap: 10px; } .cu-terminal__search, .cu-terminal__select { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: var(--cu-r-md); border: 1.5px solid var(--cu-line); background: var(--cu-white); font-size: 15px; } .cu-terminal__select { appearance: none; padding-right: 44px; background: var(--cu-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E") no-repeat right 14px center / 20px; } .cu-terminal__search:focus, .cu-terminal__select:focus { outline: 0; border-color: var(--cu-ink); box-shadow: 0 0 0 3px rgba(254, 185, 47, .35); } .cu-terminal__picked { display: flex; gap: 8px; align-items: center; margin: 0; padding: 10px 12px; border-radius: var(--cu-r-sm); background: var(--cu-yellow-soft); font-size: 13px; font-weight: 600; } .cu-terminal__picked::before { content: "\2713"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--cu-green); color: var(--cu-white); font-size: 11px; flex: none; } .cu-terminal__empty { margin: 0; font-size: 13px; color: var(--cu-muted); } @media (max-width: 600px) { .cu-terminal { margin-left: 0; } } .cu-addressfields { margin-top: 16px; } .cu-addressfields__label { grid-column: 1 / -1; margin: 0; font-weight: 700; font-size: 14px; } .woocommerce-checkout-payment ul.payment_methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .wc_payment_method { padding: 16px 18px; border-radius: var(--cu-r-lg); border: 1.5px solid var(--cu-line); } .wc_payment_method.is-checked { border: 2px solid var(--cu-ink); background: var(--cu-cream); } .wc_payment_method > label { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; margin-left: 8px; } .wc_payment_method > input { width: 18px; height: 18px; accent-color: var(--cu-ink); vertical-align: middle; } .wc_payment_method label img { max-height: 24px; width: auto; display: inline-block; } .payment_box { margin-top: 12px; color: var(--cu-muted); font-size: 14px; } .payment_box p:last-child { margin: 0; } .cu-ordernotes .form-row { gap: 8px; } .cu-review__items { display: grid; gap: 14px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--cu-line); list-style: none; } .cu-review__item { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 14px; } .cu-review__img { position: relative; width: 64px; height: 64px; border-radius: var(--cu-r-md); background: var(--cu-cream); } .cu-review__img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .cu-review__qty { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cu-ink); color: var(--cu-white); font-size: 11px; font-weight: 800; } .cu-review__name { font-weight: 600; font-size: 14px; line-height: 1.35; } .cu-review__name small { display: block; color: var(--cu-muted); font-weight: 500; font-size: 12px; } .cu-review__price { font-size: 15px; font-weight: 600; white-space: nowrap; } .cu-makenote { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px; border-radius: var(--cu-r-md); background: var(--cu-yellow-soft); font-size: 14px; } .cu-placeorder { display: grid; gap: 12px; } .cu-placeorder .woocommerce-terms-and-conditions-wrapper { font-size: 14px; } .cu-placeorder .woocommerce-form__label-for-checkbox { display: flex; gap: 10px; align-items: flex-start; } .cu-placeorder .woocommerce-form__input-checkbox { width: 18px; height: 18px; accent-color: var(--cu-ink); flex: none; margin-top: 2px; } .cu-placeorder .woocommerce-privacy-policy-text p { font-size: 12px; color: var(--cu-muted); margin: 0; } .cu-placeorder #place_order { min-height: 60px; font-size: 15px; } .cu-placeorder__note { text-align: center; color: var(--cu-muted); font-size: 12px; margin: 0; } .blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; border-radius: var(--cu-r-xl); } /* Paldies */ .cu-thanks__hero { position: relative; overflow: hidden; padding: clamp(60px, 8vw, 110px) 0; text-align: center; background: var(--cu-yellow); } .cu-thanks__hero.is-failed { background: #ffe3e8; } .cu-thanks__hero p { max-width: 560px; margin: 0 auto 20px; font-size: 18px; } .cu-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .cu-thanks__hero .cu-wrap { position: relative; } .cu-thanks__check { position: relative; display: inline-grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--cu-ink); color: var(--cu-yellow); margin-bottom: 20px; } .cu-thanks__title { position: relative; font-family: var(--cu-font-display); font-size: clamp(56px, 8vw, 120px); font-weight: 600; text-transform: uppercase; line-height: 1; margin-bottom: 18px; } .cu-thanks__grid { display: grid; grid-template-columns: 1fr 400px; gap: 24px; align-items: start; } .cu-thanks__h2 { font-family: var(--cu-font-display); font-size: 34px; text-transform: uppercase; margin-bottom: 18px; } .cu-timeline { display: grid; gap: 22px; list-style: none; } .cu-timeline li { display: flex; gap: 14px; align-items: flex-start; } .cu-timeline__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cu-sand); flex: none; } .cu-timeline li.is-done .cu-timeline__ico { background: var(--cu-green); color: var(--cu-white); } .cu-timeline li.is-yellow .cu-timeline__ico { background: var(--cu-yellow); } .cu-timeline strong { display: block; font-size: 17px; font-weight: 600; } .cu-timeline small { color: var(--cu-muted); font-size: 14px; } .cu-thanks__side { display: grid; gap: 14px; } .cu-orderbox { margin: 0; padding: 20px 22px; border-radius: var(--cu-r-xl); background: var(--cu-ink); color: var(--cu-white); } .cu-orderbox div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; } .cu-orderbox dt { color: var(--cu-muted-dark); } .cu-orderbox dd { margin: 0; text-align: right; } .cu-orderbox__total dd { font-family: var(--cu-font-display); font-size: 26px; color: var(--cu-yellow); } .cu-thanks__help p { margin: 0 0 6px; font-size: 14px; } /* 404 */ .cu-404 { position: relative; overflow: hidden; min-height: 70vh; padding: 80px 0; background: var(--cu-red); color: var(--cu-white); display: grid; place-items: center; } .cu-404__bg { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--cu-font-display); font-size: clamp(200px, 36vw, 560px); font-weight: 700; line-height: 1; color: rgba(255, 255, 255, .1); user-select: none; } .cu-404__inner { position: relative; display: grid; justify-items: center; gap: 36px; text-align: center; } .cu-404__paper { position: relative; display: grid; justify-items: center; gap: 12px; width: min(340px, 90vw); padding: 50px 30px 70px; background: #f4f1ec; color: var(--cu-ink); transform: rotate(-3deg); clip-path: polygon(0 4%, 48% 0, 56% 6%, 100% 2%, 98% 100%, 0 96%); box-shadow: 0 30px 60px rgba(0, 0, 0, .3); outline: 2px dashed var(--cu-ink); outline-offset: -18px; } .cu-404__title { font-family: var(--cu-font-display); font-size: 34px; text-transform: uppercase; line-height: 1.05; } .cu-404__paper p { margin: 0; color: var(--cu-muted); font-size: 14px; } .cu-404__scissors { position: absolute; right: -50px; top: -30px; color: var(--cu-yellow); transform: rotate(-20deg); } .cu-404__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .cu-404__search { display: flex; align-items: center; gap: 12px; width: min(380px, 90vw); height: 52px; padding: 0 20px; border-radius: var(--cu-r-pill); background: var(--cu-white); color: var(--cu-ink); } .cu-404__search input { flex: 1; border: 0; outline: 0; background: transparent; min-width: 0; } /* Vēlmju saraksts */ .cu-wishlist { min-height: 200px; } .cu-wishlist__empty { padding: 40px; text-align: center; color: var(--cu-muted); border-radius: var(--cu-r-xl); background: var(--cu-white); } /* ---------- Kājene (gradienti kā Figmā: sarkans augšā pa labi, zaļš apakšā pa labi, dzeltens apakšā pa kreisi) ---------- */ .cu-footer { position: relative; overflow: hidden; padding-top: clamp(64px, 7vw, 120px); color: var(--cu-white); background: radial-gradient(71% 62% at 64% 119%, rgba(15, 89, 59, .35), transparent 100%), radial-gradient(63% 56% at 0% 94%, rgba(254, 185, 47, .2), transparent 100%), radial-gradient(56% 45% at 78% 23%, rgba(252, 0, 45, .42), transparent 100%), var(--cu-ink); } .cu-footer__cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 56px; } .cu-footer__prompt { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--cu-yellow); font-family: var(--cu-font-display); font-size: 16px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .cu-footer__phone { display: block; font-family: var(--cu-font-display); font-size: clamp(46px, 8.2vw, 118px); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--cu-white); transition: color .2s; } .cu-footer__phone:hover { color: var(--cu-yellow); } .cu-footer__cta-side { display: grid; justify-items: end; gap: 16px; } .cu-footer__mail { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--cu-white); } .cu-footer__mail:hover { color: var(--cu-yellow); } .cu-footer__mail .cu-icon { color: var(--cu-yellow); } .cu-footer__grid { display: grid; grid-template-columns: 500fr 209fr 209fr 209fr 250fr; gap: 16px; align-items: stretch; } .cu-fcard { padding: 32px; border-radius: var(--cu-r-xl); } .cu-fcard--yellow { background: var(--cu-yellow); color: var(--cu-ink); } .cu-fcard--glass { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(10px); } .cu-fcard--red { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; background: var(--cu-red); color: var(--cu-white); } .cu-fcard__title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 24px; font-family: var(--cu-font-display); font-size: 34px; font-weight: 600; text-transform: uppercase; line-height: 1.08; } .cu-fcard--red .cu-fcard__title { margin-bottom: 6px; } .cu-fcard__label { margin: 0 0 24px; color: var(--cu-yellow); font-family: var(--cu-font-display); font-size: 15px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .cu-fcard__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; font-size: 16px; font-weight: 600; line-height: 1.5; } .cu-fcard__list { list-style: none; display: grid; gap: 14px; font-size: 16px; line-height: 1.6; color: var(--cu-white); } .cu-fcard a { transition: color .2s; } .cu-fcard--glass a:hover { color: var(--cu-yellow); } .cu-fcard--yellow a:hover { color: var(--cu-red); } .cu-fcard__handle { margin: 0; font-size: 16px; } .cu-social { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; } .cu-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cu-white); color: var(--cu-red); transition: transform .2s var(--cu-ease-out), background-color .2s, color .2s; } .cu-social a:hover { transform: translateY(-3px); background: var(--cu-ink); color: var(--cu-white); } .cu-footer__info { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 56px 0 20px; font-size: 16px; } .cu-footer__info span { display: inline-flex; align-items: center; gap: 10px; } .cu-footer__info .cu-icon { color: var(--cu-yellow); } .cu-footer__brand { position: relative; margin-bottom: 56px; padding-top: 20px; } .cu-footer__logo { display: block; width: 90%; color: var(--cu-white); } .cu-footer__logo .cu-logo-svg { width: 100%; height: auto; } .cu-footer__sticker { right: 2%; top: -60px; width: 170px; height: 170px; transform: rotate(14deg); } .cu-footer__sticker .cu-sticker__l0, .cu-footer__sticker .cu-sticker__l2 { font-size: 15px; letter-spacing: .04em; } .cu-footer__sticker .cu-sticker__l1 { font-size: 26px; font-weight: 500; } .cu-totop { position: absolute; right: 0; bottom: 0; width: 72px; height: 72px; transition: transform .2s var(--cu-ease-out), background-color .2s; } .cu-totop:hover { transform: translateY(-4px); background: var(--cu-yellow); } .cu-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 30px; padding: 24px 0 36px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; font-weight: 500; color: var(--cu-muted-dark); } .cu-footer__bottom p { margin: 0; } .cu-footer__end { display: flex; align-items: center; gap: 14px; } .cu-footer__end .cu-lang { font-size: 13px; } .cu-footer__cookies { color: var(--cu-white); } .cu-footer__cookies:hover { color: var(--cu-yellow); } .cu-footer--mini { padding: 22px 0; background: var(--cu-ink); color: var(--cu-white); font-size: 14px; } .cu-footer--mini .cu-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 26px; } .cu-footer--mini p { margin: 0; } .cu-footer__legal { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; } /* ---------- Piegriežņa dēlis (animēts, individuālo pasūtījumu sadaļa) ---------- */ .cu-board { position: relative; width: min(100%, 560px); margin-inline: auto; aspect-ratio: 560 / 640; } .cu-custom__media { overflow-x: clip; overflow-clip-margin: 40px; } .cu-board__mat { position: absolute; left: 0; top: 0; width: 82%; height: 88%; border-radius: 22px; background: #0f5a3a; background-image: linear-gradient(rgba(255, 255, 255, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .11) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px; background-position: 30px 30px, 30px 30px, 30px 30px, 30px 30px; box-shadow: 0 30px 60px rgba(24, 23, 14, .25), inset 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; } .cu-board__scale { position: absolute; display: flex; justify-content: space-around; color: rgba(255, 255, 255, .8); font-family: var(--cu-font-display); font-size: 10px; letter-spacing: .04em; } .cu-board__scale b { font-weight: 500; } .cu-board__scale--x { left: 30px; right: 0; top: 6px; } .cu-board__scale--y { left: 6px; top: 30px; bottom: 0; flex-direction: column; } .cu-board__diag { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; background: linear-gradient(135deg, transparent 49.6%, rgba(255, 255, 255, .22) 49.6%, rgba(255, 255, 255, .22) 50.4%, transparent 50.4%); background-size: 100% 100%; opacity: .7; } .cu-board__patch { position: absolute; display: block; padding: 6px 6px 22px; background: var(--cu-white); color: var(--cu-ink); box-shadow: 0 14px 30px rgba(0, 0, 0, .3); transform: rotate(var(--r, 0deg)); animation: cu-patch-float var(--d, 7s) ease-in-out var(--dl, 0s) infinite; will-change: transform; } .cu-board__patch--1 { --r: -4deg; --d: 7s; left: 7%; top: 8%; width: 40%; } .cu-board__patch--2 { --r: 3deg; --d: 8.5s; --dl: -2s; left: 55%; top: 12%; width: 36%; } .cu-board__patch--3 { --r: 2deg; --d: 9s; --dl: -4s; left: 54%; top: 48%; width: 36%; padding-bottom: 26px; } .cu-board__patch--4 { --r: -3deg; --d: 7.5s; --dl: -1s; left: 12%; top: 58%; width: 30%; } @keyframes cu-patch-float { 0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); } 50% { transform: rotate(calc(var(--r, 0deg) + 1.2deg)) translateY(-5px); } } .cu-board__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; } .cu-board__cut { position: absolute; inset: -6px; border: 2px dashed var(--cu-white); border-radius: 4px; opacity: .9; pointer-events: none; } .cu-board__pin { position: absolute; right: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff6b85, var(--cu-red) 60%, #a30020); box-shadow: 0 3px 5px rgba(0, 0, 0, .35); } .cu-board__patch--2 .cu-board__pin { right: auto; left: -7px; } .cu-board__patch--4 .cu-board__pin { right: auto; left: -7px; top: -7px; } .cu-board__label { position: absolute; left: 6px; bottom: 5px; padding: 3px 6px; border-radius: 3px; background: var(--cu-ink); color: var(--cu-yellow); font-family: var(--cu-font-display); font-size: 9px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .cu-board__patch--3 .cu-board__label { background: var(--cu-white); color: var(--cu-ink); font-size: 10px; left: 50%; transform: translateX(-50%); } .cu-board__measure { position: absolute; left: 56%; top: 43%; width: 34%; height: 14px; } .cu-board__measure i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--cu-yellow); transform-origin: left; animation: cu-measure 6s var(--cu-ease-in-out) infinite; } .cu-board__measure i::before, .cu-board__measure i::after { content: ""; position: absolute; top: -4px; width: 2px; height: 10px; background: var(--cu-yellow); } .cu-board__measure i::before { left: 0; } .cu-board__measure i::after { right: 0; } .cu-board__measure b { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); padding: 1px 5px; border-radius: 3px; background: var(--cu-yellow); color: var(--cu-ink); font-family: var(--cu-font-display); font-size: 9px; font-weight: 500; letter-spacing: .06em; animation: cu-measure-label 6s var(--cu-ease-in-out) infinite; } @keyframes cu-measure { 0%, 15% { transform: scaleX(0); } 40%, 75% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } } @keyframes cu-measure-label { 0%, 35% { opacity: 0; } 45%, 75% { opacity: 1; } 85%, 100% { opacity: 0; } } .cu-board__scissors { position: absolute; left: 40%; top: 74%; width: 15%; height: auto; transform: rotate(-30deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); } .cu-board__blade { transform-origin: 22px 32px; animation: cu-snip 5s ease-in-out infinite; } .cu-board__blade--b { animation-name: cu-snip-b; } @keyframes cu-snip { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(9deg); } 80% { transform: rotate(0); } 88% { transform: rotate(9deg); } } @keyframes cu-snip-b { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-9deg); } 80% { transform: rotate(0); } 88% { transform: rotate(-9deg); } } .cu-board__ruler { position: absolute; right: -10%; bottom: 21%; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; width: 86%; height: 34px; padding: 0 14px 4px; border-radius: 4px; background: linear-gradient(#fdd365, #f3b82e); color: var(--cu-ink); font-family: var(--cu-font-display); font-size: 10px; font-weight: 500; transform: rotate(-18deg); transform-origin: right bottom; box-shadow: 0 18px 30px rgba(24, 23, 14, .35), 0 2px 0 rgba(0, 0, 0, .12); background-image: repeating-linear-gradient(90deg, rgba(24, 23, 14, .7) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgba(24, 23, 14, .9) 0 1.5px, transparent 1.5px 50px); background-size: 100% 8px, 100% 14px; background-repeat: repeat-x; background-position: 0 0, 0 0; animation: cu-ruler 12s ease-in-out infinite; } .cu-board__ruler b { font-weight: 500; } @keyframes cu-ruler { 0%, 100% { transform: rotate(-18deg) translateX(0); } 50% { transform: rotate(-17deg) translateX(-10px); } } @media (prefers-reduced-motion: reduce) { .cu-board__patch, .cu-board__ruler, .cu-board__blade, .cu-board__measure i, .cu-board__measure b { animation: none; } .cu-board__measure i { transform: none; } } /* ---------- Atklāšanās ritinot (tikai ar JS, bez JS viss redzams uzreiz) ---------- Animācija, nevis transition: neaizņem elementa paša transition un transform (hover, pagriezieni), tāpēc nekas "neraustās" un hover nekavējas. Kustība ar atsevišķo "translate" īpašību. */ @keyframes cu-reveal { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } } .js [data-cu-reveal]:not(.is-visible), .js [data-cu-group] > :not(.is-visible) { opacity: 0; } .js [data-cu-reveal].is-visible:not(.is-revealed), .js [data-cu-group] > .is-visible:not(.is-revealed) { animation: cu-reveal .5s var(--cu-ease-out) var(--cu-delay, 0ms) both; } /* Bildes atklāšanās: pārklājs sekcijas fona krāsā aizslīd uz leju (bilde pa to laiku jau ielādējas). */ .js [data-cu-reveal-clip] { position: relative; } .js [data-cu-reveal-clip]::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--cu-r-lg); background: var(--cu-reveal-bg, var(--cu-cream)); transform-origin: bottom; transition: transform .9s var(--cu-ease-out); pointer-events: none; } .js [data-cu-reveal-clip].is-visible::after { transform: scaleY(0); } .cu-section--white [data-cu-reveal-clip] { --cu-reveal-bg: var(--cu-white); } .cu-post--featured .cu-post__img { --cu-reveal-bg: var(--cu-ink); } @media (prefers-reduced-motion: reduce) { .js [data-cu-reveal], .js [data-cu-group] > * { opacity: 1 !important; animation: none !important; } .js [data-cu-reveal-clip]::after { display: none; } } /* ========================================================================== Responsivitāte (mobilais tiek veidots kodā, bez atsevišķa Figma dizaina) ========================================================================== */ @media (max-width: 1400px) { .cu-nav__list { gap: 20px; } .cu-searchbtn { width: 46px; padding: 0; justify-content: center; } .cu-searchbtn span { display: none; } .cu-custom__grid { grid-template-columns: 1fr 1fr; } .cu-split__grid { grid-template-columns: 1fr 1fr; gap: 56px; } .cu-hero__frame { left: 63%; width: 260px; height: 300px; --cu-print-h: 254px; } .cu-hero__cross--1 { left: 55%; } } @media (max-width: 1200px) { .cu-topbar__usp li:nth-child(n+3), .cu-topbar__hours { display: none; } .cu-nav { display: none; } .cu-header__actions { margin-left: auto; } .cu-mega__box { grid-template-columns: 300px 1fr; } .cu-mega__aside { display: none; } .cu-product__grid { grid-template-columns: 1fr 380px; gap: 32px; } .cu-pdetails__grid { grid-template-columns: 1fr 420px; } .cu-faq__grid { grid-template-columns: 360px 1fr; gap: 48px; } .cu-footer__grid { grid-template-columns: repeat(3, 1fr); } .cu-fcard--yellow { grid-column: span 2; } .cu-fcard { padding: 26px 24px; } .cu-checkout__grid { grid-template-columns: 1fr 400px; } .cu-hero__card, .cu-hero__frame { display: none; } } @media (max-width: 1024px) { :root { --cu-header-h: 72px; } .cu-header__burger { display: inline-grid; margin-right: -6px; } .cu-catbtn { display: none; } .cu-header__left { gap: 12px; } .cu-mega { display: none !important; } .cu-logo .cu-logo-svg { width: 120px; } .cu-cartbtn__label { display: none; } .cu-cartbtn { padding: 0 7px 0 14px; } .cu-cartbtn:has(.cu-count[hidden]) { padding: 0 14px; } .cu-benefits__list { grid-template-columns: 1fr 1fr; gap: 32px 0; } .cu-benefit:nth-child(3) { padding-left: 0; border-left: 0; } .cu-catgrid__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 260px; } .cu-carousel__track, .cu-pslider .cu-carousel__track { grid-auto-columns: calc((100% - 24px) / 2.3); } .cu-promo__cards { grid-template-columns: repeat(2, 1fr); } .cu-promo__title { margin-bottom: 20px; } .cu-promo__box { flex-direction: column; align-items: flex-start; } .cu-promo__sticker { display: none; } .cu-collections__grid { grid-template-columns: repeat(2, 1fr); } .cu-sale__grid { grid-template-columns: 1fr; } .cu-sale__track { grid-auto-columns: calc((100% - 24px) / 2.2); } .cu-custom__grid, .cu-split__grid, .cu-faq__grid, .cu-story__grid, .cu-formsec__grid, .cu-phero__grid, .cu-phero--light .cu-phero__grid, .cu-contact__grid { grid-template-columns: 1fr; gap: 40px; } .cu-split--right .cu-split__media { order: 0; } .cu-posts { grid-template-columns: repeat(2, 1fr); } .cu-post--featured { grid-template-columns: 1fr; } .cu-post--featured .cu-post__img { min-height: 260px; } .cu-shop__grid { grid-template-columns: 1fr; } .cu-filters { position: fixed; inset: 0; z-index: 100; display: none; background: rgba(24, 23, 14, .5); } .cu-filters.is-open { display: block; } .cu-filters__box { position: absolute; left: 0; top: 0; bottom: 0; width: min(380px, 92vw); max-height: none; border-radius: 0 var(--cu-r-xl) var(--cu-r-xl) 0; animation: cu-slide-l .3s var(--cu-ease); } .cu-filters__close { display: inline-grid; width: 40px; height: 40px; } .cu-filters__reset { margin-left: auto; margin-right: 10px; } .cu-toolbar__filters { display: inline-flex; } .cu-pgrid, .cu-pgrid--4 { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } .cu-product__grid, .cu-pdetails__grid, .cu-cart__grid, .cu-checkout__grid, .cu-thanks__grid { grid-template-columns: 1fr; } .cu-cart__side, .cu-checkout__side { position: static; } .cu-checkout__side .cu-review__items { max-height: none; overflow: visible; padding: 0 0 18px; margin-top: 0; } .cu-checkout__side { scroll-margin-top: calc(var(--cu-header-h) + 16px); } #cu-placeorder { scroll-margin-top: calc(var(--cu-header-h) + 16px); scroll-margin-bottom: 24px; } /* Kasē mobilajā: kopsumma un poga "Uz apmaksu" apakšā, kamēr apmaksas poga nav ekrānā; rakstot laukā josla paslēpjas. */ .cu-paybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--cu-gutter) calc(10px + env(safe-area-inset-bottom)); background: var(--cu-white); border-top: 1px solid var(--cu-line); box-shadow: 0 -10px 30px rgba(24, 23, 14, .08); transition: transform .3s var(--cu-ease-out); } .cu-paybar.is-hidden { transform: translateY(110%); } .cu-paybar__sum { display: grid; min-width: 0; line-height: 1.15; color: var(--cu-ink); text-decoration: none; } .cu-paybar__sum small { color: var(--cu-muted); font-size: 12px; white-space: nowrap; } .cu-paybar__sum strong { font-family: var(--cu-font-display); font-size: 22px; font-weight: 600; } .cu-paybar__sum strong small, .cu-paybar__sum .includes_tax { display: none; } .cu-paybar .cu-btn { flex: none; gap: 8px; } .cu-checkout { padding-bottom: 96px; } /* Mobilajā: kopsumma un poga "Uz kasi" vienmēr redzama apakšā, kamēr kopsavilkums nav ekrānā. */ .cu-cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--cu-gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--cu-white); border-top: 1px solid var(--cu-line); box-shadow: 0 -10px 30px rgba(24, 23, 14, .08); transition: transform .3s var(--cu-ease-out); } .cu-cartbar.is-hidden { transform: translateY(110%); } .cu-cartbar__sum { display: grid; margin: 0; line-height: 1.15; } .cu-cartbar__sum small { color: var(--cu-muted); font-size: 12px; } .cu-cartbar__sum strong { font-family: var(--cu-font-display); font-size: 22px; font-weight: 600; } .cu-cart { padding-bottom: 96px; } .cu-cards, .cu-ccards { grid-template-columns: repeat(2, 1fr); } .cu-gallery__row { grid-template-columns: repeat(3, 1fr); } .cu-article__layout { grid-template-columns: 1fr; } .cu-article__aside { position: static; } .cu-textpage.has-toc { grid-template-columns: minmax(0, 1fr); gap: 28px; } .cu-toc { position: static; max-height: none; } .cu-phero__row { grid-template-columns: repeat(3, 1fr); } .cu-phero__rimg:nth-child(n+4) { display: none; } .cu-mega-open .cu-main { filter: none; } .cu-has-hero .cu-header.is-scrolled .cu-header__row { min-height: 64px; } .cu-custom__media { order: -1; } .cu-custom--yellow .cu-custom__media { order: 2; } .cu-board { width: min(100%, 480px); } } @media (max-width: 767px) { .cu-topbar__usp { display: none; } .cu-topbar__row { justify-content: center; } .cu-wishbtn { display: none; } .cu-searchbtn { width: 42px; height: 42px; border-color: rgba(255, 255, 255, .22); } .cu-cartbtn { height: 42px; } .cu-cartbtn .cu-count { width: 28px; height: 28px; } .cu-shead { flex-direction: column; align-items: flex-start; gap: 16px; } .cu-hero { min-height: 720px; } .cu-hero__shade { background: linear-gradient(0deg, rgba(24, 23, 14, .95) 0%, rgba(24, 23, 14, .6) 55%, rgba(24, 23, 14, .3) 100%); } .cu-hero__inner { align-content: end; } .cu-hero__sticker { width: 96px; height: 96px; right: 0; top: -14px; } .cu-hero__eyebrow { padding-right: 104px; font-size: 12px; margin-bottom: 18px; } .cu-hero__cross, .cu-hero__frame { display: none; } .cu-hero__title { font-size: clamp(52px, 15vw, 72px); } .cu-hero__sticker small { font-size: 12px; } .cu-hero__sticker strong { font-size: 24px; } .cu-hero__btn, .cu-hero__buttons .cu-btn { flex: 1 1 100%; } .cu-hero__pause { margin-top: 20px; } .cu-strip__list li { font-size: 20px; min-height: 56px; gap: 20px; padding-right: 20px; } .cu-benefits__list { grid-template-columns: 1fr; gap: 26px; } .cu-benefit { padding: 0; border: 0; display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; } .cu-benefit__ico { width: 48px; height: 48px; grid-row: span 2; margin: 0; } .cu-benefit__title { font-size: 18px; margin-bottom: 4px; } .cu-catgrid__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 12px; } .cu-catcard { aspect-ratio: 4 / 5; } .cu-catcard--big { grid-column: span 2; grid-row: span 1; aspect-ratio: 1 / 1; } .cu-catcard__name, .cu-catcard--big .cu-catcard__name { font-size: 20px; } .cu-catcard .cu-iconbtn { display: none; } .cu-catcard__foot { left: 14px; bottom: 12px; } .cu-carousel__track, .cu-pslider .cu-carousel__track, .cu-sale__track { grid-auto-columns: 72%; gap: 14px; } .cu-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; } .cu-tab { white-space: nowrap; } .cu-promo__cards { grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; } .cu-polaroid__foot { font-size: 12px; flex-direction: column; align-items: flex-start; } .cu-promo__box { padding: 24px 20px; } .cu-promo__buttons { flex-direction: column; width: 100%; } .cu-collections__grid { grid-template-columns: 1fr 1fr; gap: 12px; } .cu-collcard { padding: 10px 10px 14px; gap: 12px; } .cu-collcard__name { font-size: 18px; } .cu-collcard .cu-iconbtn { display: none; } .cu-stats dt { font-size: 40px; } .cu-posts, .cu-posts--3 { grid-template-columns: 1fr; } .cu-acc__q { font-size: 17px; padding: 20px 0; } .cu-acc__a { padding-right: 0; } .cu-pgrid, .cu-pgrid--4 { gap: 26px 12px; } .cu-pcard__name { font-size: 14px; } .cu-price { font-size: 19px; } .cu-pcard__add { width: 36px; height: 36px; right: 8px; bottom: 8px; } .cu-toolbar__right { margin-left: 0; width: 100%; } .cu-viewtoggle { display: none; } .cu-gallery { grid-template-columns: 1fr; } .cu-gallery__thumbs { display: none; } .cu-gallery__main { border-radius: var(--cu-r-lg); } .cu-care ul { grid-template-columns: 1fr; } .cu-fields { grid-template-columns: 1fr; } .cu-checkout .form-row-first, .cu-checkout .form-row-last, .cu-form .form-row-first, .cu-form .form-row-last { grid-column: 1 / -1; } .cu-citem { grid-template-columns: 72px 1fr; } .cu-citem__img { width: 72px; height: 72px; } .cu-citem__price { grid-column: 2; text-align: left; } .cu-csteps { font-size: 13px; } .cu-cstep + .cu-cstep::before { width: 16px; } .cu-cstep span:last-child { display: none; } .cu-cstep.is-current span:last-child { display: inline; } .cu-cards, .cu-ccards, .cu-cards--3 { grid-template-columns: 1fr; } .cu-gallery__row { grid-template-columns: repeat(2, 1fr); } .cu-phero__collage { grid-template-rows: 180px 80px 170px; gap: 10px; } .cu-phero__stats { gap: 22px; } .cu-phero__row { grid-template-columns: 1fr 1fr; } .cu-phero__rimg { height: 200px; } .cu-phero__rimg:nth-child(n+3) { display: none; } .cu-footer__cta { flex-direction: column; align-items: flex-start; } .cu-footer__cta-side { justify-items: start; } .cu-footer__grid { grid-template-columns: 1fr 1fr; } .cu-fcard--yellow, .cu-fcard--red { grid-column: 1 / -1; } .cu-footer__info { margin: 32px 0 10px; font-size: 14px; } .cu-footer__brand { padding-top: 70px; margin-bottom: 24px; } .cu-footer__logo { width: 100%; } .cu-footer__sticker { width: 100px; height: 100px; left: 0; right: auto; top: -30px; } .cu-footer__sticker .cu-sticker__l1 { font-size: 16px; } .cu-footer__sticker .cu-sticker__l0, .cu-footer__sticker .cu-sticker__l2 { font-size: 10px; } .cu-totop { width: 48px; height: 48px; top: -24px; bottom: auto; } .cu-footer__bottom { flex-direction: column; align-items: flex-start; padding-bottom: 28px; } .cu-footer__end .cu-lang__menu { right: auto; left: 0; transform-origin: bottom left; } .cu-footer__cta { margin-bottom: 36px; } .cu-fcard { padding: 22px 20px; } .cu-fcard__title { font-size: 28px; margin-bottom: 16px; } .cu-fcard__cols { font-size: 14px; gap: 10px 16px; } .cu-fcard__list { font-size: 14px; gap: 10px; } .cu-fcard--red { min-height: 0; gap: 18px; } .cu-promo__title { margin-bottom: 10px; } .cu-promo__box-title { font-size: 24px; } .cu-board { width: 100%; aspect-ratio: 1 / 1.14; } .cu-board__label { font-size: 8px; } .cu-board__ruler { height: 28px; font-size: 9px; right: 0; width: 80%; } .cu-custom__media { overflow-clip-margin: 0; } .cu-search__row { gap: 12px; min-height: 76px; } .cu-search__row > .cu-logo { display: none; } .cu-search__close > span:first-child, .cu-search__close { font-size: 0; } .cu-search__close .cu-iconbtn { font-size: initial; } .cu-search__form { height: 50px; padding-left: 16px; } .cu-search__form input[type="search"] { font-size: 16px; } .cu-search__clear { display: none; } .cu-search__panel { grid-template-columns: 1fr; gap: 20px; padding: 22px; margin: 10px var(--cu-gutter); } .cu-404__scissors { display: none; } .cu-thanks__title { font-size: 52px; } .cu-prose { font-size: 16px; } .cu-prose table { font-size: 14px; } .cu-prose th, .cu-prose td { padding: 10px 12px; overflow-wrap: anywhere; hyphens: auto; } .cu-prose table { display: block; overflow-x: auto; } .cu-prose .cu-lead { font-size: 17px; } } @media (hover: none) { .cu-strip__track { animation-duration: 70s; } } @media (max-width: 767px) { .cu-phead__row { flex-direction: column; align-items: flex-start; gap: 14px; } .cu-phead .cu-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--cu-gutter, 16px) * -1); padding-inline: var(--cu-gutter, 16px); scrollbar-width: none; } .cu-phead .cu-chip { white-space: nowrap; } } /* Kase: liekie Woo virsraksti un "(optional)" atzīmes. */ .cu-ship-table, .cu-ship-table > tbody, .cu-ship-table tr, .cu-ship-table td { display: block; width: 100%; padding: 0; border: 0; background: none; } .cu-ship-methods th, .cu-ship-methods .woocommerce-shipping-destination, .cu-ship-methods .woocommerce-shipping-calculator { display: none; } .woocommerce-checkout .optional { display: none; } @media (max-width: 600px) { .cu-mcitem { grid-template-columns: 72px minmax(0, 1fr); } .cu-mcitem__img { width: 72px; height: 72px; } .cu-mcitem__price { grid-column: 2; text-align: left; font-size: 18px; } .cu-shipopt { grid-template-columns: 38px minmax(0, 1fr); gap: 4px 12px; } .cu-shipopt__ico { width: 38px; height: 38px; grid-row: span 2; } .cu-shipopt__price { grid-column: 2; } .cu-header--checkout .cu-header__help { font-size: 0; } .cu-header--checkout .cu-header__help a { font-size: 13px; white-space: nowrap; } .cu-header--checkout .cu-secure { font-size: 13px; white-space: nowrap; } } /* Importētie bloga raksti: vecās lapas galerija kā režģis. */ .cu-prose .wysiwyg-gallery { margin: 28px 0; } .cu-prose .gallery-slider { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .cu-prose .single-gallery-element a { display: block; aspect-ratio: 1; border-radius: var(--cu-r-md); overflow: hidden; } .cu-prose .single-gallery-element img { width: 100%; height: 100%; object-fit: cover; margin: 0; } .cu-prose .gallery-footer { display: none; } /* ===================== 1.4.0: Paraugi iedvesmai (slaideris) ===================== */ .cu-inspo { background: var(--cu-sand); overflow: hidden; } .cu-inspo .cu-carousel__track { grid-auto-columns: calc((100% - 3 * 20px) / 3.4); gap: 20px; overflow-y: hidden; } .cu-inspo__fig { margin: 0; display: grid; gap: 10px; } .cu-inspo__link { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--cu-r-lg); overflow: hidden; background: var(--cu-white); } .cu-inspo__link img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--cu-ease-out); } .cu-inspo__link::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--cu-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2318170e' d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zm.5-7H9v2H7v1h2v2h1v-2h2V9h-2z'/%3E%3C/svg%3E") center / 20px no-repeat; box-shadow: var(--cu-shadow); opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s var(--cu-ease-out); } .cu-inspo__fig figcaption { font-size: 14px; color: var(--cu-muted); } @media (hover: hover) and (pointer: fine) { .cu-inspo__link:hover img { transform: scale(1.04); } .cu-inspo__link:hover::after { opacity: 1; transform: none; } } .cu-inspo__link:focus-visible::after { opacity: 1; transform: none; } @media (max-width: 1024px) { .cu-inspo .cu-carousel__track { grid-auto-columns: calc((100% - 20px) / 2.25); } } @media (max-width: 767px) { .cu-inspo .cu-carousel__track { grid-auto-columns: 78%; gap: 12px; margin-inline: calc(var(--cu-gutter, 16px) * -1); padding-inline: var(--cu-gutter, 16px); scroll-padding-inline: var(--cu-gutter, 16px); } .cu-inspo .cu-carousel__nav { margin-top: 24px; } .cu-inspo__link::after { opacity: 1; transform: none; width: 34px; height: 34px; right: 10px; bottom: 10px; background-size: 18px; } } /* Kategorijas lapas noskaņas bildes (no "CU bildes"). */ .cu-catmood { margin: clamp(24px, 3vw, 36px) 0 0; } .cu-catmood .cu-carousel__track { grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-y: hidden; } .cu-catmood .cu-inspo__link { aspect-ratio: 1; } @media (max-width: 1024px) { .cu-catmood .cu-carousel__track { grid-auto-columns: calc((100% - 16px) / 2.4); } } @media (max-width: 767px) { .cu-catmood .cu-carousel__track { grid-auto-columns: 62%; gap: 10px; margin-inline: calc(var(--cu-gutter, 16px) * -1); padding-inline: var(--cu-gutter, 16px); scroll-padding-inline: var(--cu-gutter, 16px); } .cu-catmood .cu-carousel__nav { display: none; } } /* ===================== 1.4.0: mobilās versijas labojumi ===================== */ /* Variāciju pogas: teksts nekad neiziet ārā no pogas. */ .cu-swatch { min-width: 0; } .cu-swatch__name, .cu-swatch__dims, .cu-swatch__note { overflow-wrap: anywhere; } .cu-swatch--rich .cu-swatch__name { font-size: 22px; } .cu-swatches:has(.cu-swatch--rich) { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* Pirkšanas rinda: poga vienā rindā. */ .cu-buybox .single_add_to_cart_button { flex: 1 1 0; min-width: 0; white-space: nowrap; } @media (max-width: 767px) { /* Produkta lapa */ .cu-swatches { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; } .cu-swatches:has(.cu-swatch--rich) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cu-swatch { padding: 12px; } .cu-swatch--rich .cu-swatch__name { font-size: 20px; } .cu-swatch__dims { font-size: 13px; } .cu-swatch__note { font-size: 12px; line-height: 1.35; } .cu-buybox .woocommerce-variation-add-to-cart, .cu-buybox form.cart:not(.variations_form) { flex-wrap: nowrap; gap: 8px; } .cu-buybox form.cart:not(.variations_form) { flex-wrap: wrap; } .cu-buybox form.cart:not(.variations_form) .cu-design { order: -1; } .cu-buybox .quantity { height: 52px; padding: 4px; gap: 2px; flex: none; } .cu-buybox .quantity .qty { width: 32px; min-width: 32px; padding: 0; } .cu-buybox .cu-qty__btn { width: 30px; height: 30px; } .cu-buybox .single_add_to_cart_button { min-height: 52px; padding: 0 14px; font-size: 13px; letter-spacing: .03em; gap: 8px; } .cu-buybox__wish { width: 52px; height: 52px; flex: none; } /* Sākumlapas hero: uzlīme neuzklājas tekstam */ .cu-hero__sticker { width: 84px; height: 84px; top: -6px; } .cu-hero__sticker small { font-size: 11px; } .cu-hero__sticker strong { font-size: 21px; } .cu-hero__eyebrow { padding-right: 96px; line-height: 1.5; } /* Ziemassvētku baneris: augšējā rinda kolonnā, virsraksts neuzklājas kartītēm */ .cu-promo__top { flex-direction: column; align-items: flex-start; gap: 10px; } .cu-promo__note { font-size: 12px; opacity: .9; } .cu-promo__title { margin: 22px 0 28px; font-size: clamp(44px, 13vw, 64px); } .cu-promo__cards { gap: 22px 14px; margin-bottom: 32px; } /* Piegriežņa dēlis: mazāk uzrakstu, lineāls paliek dēļa robežās */ .cu-board__measure { display: none; } .cu-board__label { font-size: 7.5px; padding: 2px 5px; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; } /* "Par mums" bilžu rinda ar atstarpi no malām */ .cu-phero__row { padding-inline: var(--cu-gutter, 16px); gap: 10px; margin-top: 24px; } .cu-phero__rimg, .cu-phero__rimg:nth-child(2), .cu-phero__rimg:nth-child(4) { height: 210px; margin-top: 0; } .cu-phero__rimg:nth-child(2) { margin-top: 26px; } .cu-phero__rsticker { width: 92px; height: 92px; left: 50%; top: -24px; transform: translateX(-50%) rotate(-10deg); } /* Kājene: uzlīme virs logo, neuzklājas darba laikam */ .cu-footer__grid > .cu-fcard--glass:nth-child(4) { grid-column: 1 / -1; } .cu-footer__grid > .cu-fcard--glass:nth-child(4) .cu-fcard__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } .cu-footer__brand { padding-top: 96px; } .cu-footer__sticker { top: 0; } .cu-footer__info { flex-direction: column; gap: 12px; margin-bottom: 24px; } .cu-totop { top: 20px; } /* Vispārīgi: pogas nesaplīst divās rindās un neiziet ārpus ekrāna */ .cu-btn { max-width: 100%; } .cu-btn > span { overflow-wrap: anywhere; } } @media (max-width: 380px) { .cu-buybox .single_add_to_cart_button::before { display: none; } .cu-buybox .single_add_to_cart_button { padding: 0 10px; font-size: 12.5px; } .cu-hero__title { font-size: 48px; } .cu-swatch--rich .cu-swatch__name { font-size: 18px; } } /* Izmēru ceļvedis mobilajā: mazākas ilustrācijas, tabula ritināma uz sāniem. */ @media (max-width: 767px) { .cu-guide { padding: 10px; align-items: end; } .cu-guide .cu-guide__box { padding: 22px 18px 24px; gap: 18px; max-height: calc(100dvh - 20px); border-radius: 24px; } .cu-guide__badge { width: 42px; height: 42px; } .cu-guide__badge .cu-icon { width: 22px; height: 22px; } .cu-guide__title { font-size: 24px; } .cu-guide__sub { font-size: 13px; } .cu-guide__close { width: 42px; height: 42px; } .cu-guide__figs { gap: 14px; padding: 18px 12px 14px; } .cu-gfig { width: calc(var(--fw) * .62px); } .cu-guide__pill { font-size: 16px; padding: 4px 11px; } .cu-guide__figs--many .cu-guide__pill { font-size: 13px; padding: 4px 8px; } .cu-guide__table thead th { padding: 13px 14px; font-size: 12px; } .cu-guide__table tbody th, .cu-guide__table td { padding: 12px 14px; } .cu-guide__table tbody th { font-size: 18px; } .cu-guide__table tbody th.is-dims { font-size: 16px; } .cu-guide__table td { font-size: 14px; } .cu-guide__tip { padding: 14px 16px; gap: 10px; } .cu-guide__apply { justify-self: stretch; } } /* ---------------- 1.7.0: pieejamība un ātrums ---------------- */ /* Mazās sarkanās zīmes ar baltu tekstu: tonis tumšāks, lai kontrasts ir vismaz 4,5:1. */ .cu-tag--red, .cu-count--red, .cu-sticker--red { background: #e8002a; } /* Pārsvītrotā cena tumšajā izpārdošanas blokā. */ .cu-sale .cu-price del { color: #9a958a; } /* ---------- Juridiskās saites un logi (privātuma politika, pirkšanas noteikumi) ---------- */ .cu-legal-link { color: #e8002a; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease; } .cu-legal-link:hover { color: var(--cu-red-dark); text-decoration-thickness: 2px; } /* Kases piekrišanas: divas rūtiņas vienā kolonnā, zvaigznīte uzreiz aiz teksta. */ .cu-placeorder .woocommerce-terms-and-conditions-wrapper { display: grid; gap: 12px; } .cu-placeorder .woocommerce-terms-and-conditions-wrapper .form-row { margin: 0; padding: 0; } .cu-placeorder .woocommerce-form__label-for-checkbox { display: block; position: relative; padding-left: 30px; line-height: 1.5; cursor: pointer; } .cu-placeorder .woocommerce-form__label-for-checkbox .woocommerce-form__input-checkbox { position: absolute; left: 0; top: 1px; margin: 0; } .cu-placeorder .woocommerce-form__label-for-checkbox .required { margin-left: 2px; } .cu-placeorder .woocommerce-invalid .woocommerce-form__label-for-checkbox { color: #e8002a; } /* Logs */ .cu-legal { z-index: 120; } .cu-legal .cu-legal__box { width: min(820px, 100%); max-height: calc(100dvh - 40px); padding: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 40px rgba(0, 0, 0, .35); } .cu-legal__head { display: flex; align-items: center; gap: 16px; padding: 28px 32px 18px; border-bottom: 1px solid var(--cu-line); } .cu-legal__titles { display: grid; gap: 2px; min-width: 0; flex: 1; } .cu-legal__title { margin: 0; font-family: var(--cu-font-display); font-size: 30px; font-weight: 600; line-height: 1.1; text-transform: uppercase; } .cu-legal__sub { color: var(--cu-muted); font-size: 14px; font-weight: 500; } .cu-legal__close { margin-left: auto; } .cu-legal__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 32px 28px; font-size: 15px; line-height: 1.65; } .cu-legal__body:focus-visible { outline: 2px solid var(--cu-red); outline-offset: -4px; } .cu-legal__body h2 { font-size: 20px; margin: 1.4em 0 .5em; } .cu-legal__body h3 { font-size: 17px; margin: 1.2em 0 .4em; } .cu-legal__body .cu-lead { font-size: 16px; padding-bottom: 1em; } .cu-legal__body table { font-size: 13px; } .cu-legal__body th, .cu-legal__body td { padding: 10px 12px; } .cu-legal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 32px 22px; border-top: 1px solid var(--cu-line); background: var(--cu-white); } .cu-legal__foot .cu-legal__back { border-color: var(--cu-line); } .cu-legal__foot .cu-legal__back:hover { border-color: var(--cu-ink); background: var(--cu-white); } @media (max-width: 767px) { .cu-legal { padding: 10px; align-items: end; } .cu-legal .cu-legal__box { max-height: calc(100dvh - 20px); border-radius: 24px; } .cu-legal__head { padding: 20px 18px 14px; } .cu-legal__title { font-size: 22px; } .cu-legal__close { width: 42px; height: 42px; } .cu-legal__body { padding: 16px 18px 20px; font-size: 14px; } .cu-legal__foot { padding: 12px 18px 16px; } .cu-legal__foot .cu-btn { flex: 1; padding: 0 16px; } } /* ---------- Pārlādes stabilitāte ---------- */ /* Līdz lapa ielādēta, pārejas (transition) nestrādā: elementi uzreiz ir savā stāvoklī, nekas nemirgo. */ html:not(.cu-ready) *, html:not(.cu-ready) *::before, html:not(.cu-ready) *::after { transition: none !important; } /* Pārlādējot lapas vidū: kamēr skripts atjauno ritināšanas vietu, lapa nav redzama (max 2 s rezerve). */ html.cu-restoring { background: var(--cu-cream); } html.cu-restoring body { opacity: 0; animation: cu-restore-guard 0s linear 2s forwards; } @keyframes cu-restore-guard { to { opacity: 1; } } /* ---------- Paziņojuma josla lapas augšā ---------- */ @property --cu-sitenote-h { syntax: ""; inherits: true; initial-value: 0px; } html:not(.cu-sitenote-off) body.cu-has-sitenote { --cu-sitenote-h: 40px; } body.cu-has-sitenote { transition: --cu-sitenote-h .28s var(--cu-ease-out); } .cu-sitenote { position: relative; z-index: 62; height: var(--cu-sitenote-h); overflow: hidden; background: var(--cu-yellow); color: var(--cu-ink); font-size: 13.5px; line-height: 1.35; } .cu-sitenote__row { display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; padding-right: 44px; position: relative; } .cu-sitenote__ico { flex: none; } .cu-sitenote__text { margin: 0; font-weight: 600; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; } .cu-sitenote__more { font-weight: 500; } .cu-sitenote__more a { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; white-space: nowrap; } .cu-sitenote__more a:hover { text-decoration-thickness: 2px; } .cu-sitenote__close { position: absolute; right: max(var(--cu-gutter, 16px) - 10px, 4px); top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--cu-r-pill, 99px); background: transparent; color: var(--cu-ink); cursor: pointer; transition: background-color .15s ease; } .cu-sitenote__close:hover { background: rgba(24, 23, 14, .1); } .cu-sitenote__close:focus-visible { outline: 2px solid var(--cu-ink); outline-offset: -2px; } html.cu-sitenote-off .cu-sitenote { visibility: hidden; transition: visibility 0s .28s; } @media (max-width: 1023px) { .cu-sitenote__more { display: none; } } @media (max-width: 767px) { html:not(.cu-sitenote-off) body.cu-has-sitenote { --cu-sitenote-h: 52px; } .cu-sitenote { font-size: 13px; } .cu-sitenote__row { justify-content: flex-start; padding-right: 40px; } .cu-sitenote__text { -webkit-line-clamp: 2; line-clamp: 2; } .cu-sitenote__close { width: 44px; height: 44px; right: 0; } } @media (max-width: 360px) { .cu-sitenote { font-size: 12.5px; } .cu-sitenote__ico { display: none; } } @media print { .cu-sitenote { display: none; } } /* Telefonā visi ievades lauki vismaz 16 px, citādi iPhone pietuvina ekrānu, kad lauku atver. */ @media (max-width: 767px) { input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], input[type="url"], input[type="password"], input:not([type]), select, textarea { font-size: 16px; } .woocommerce-ordering select { font-size: 16px; } }