/* ========================================================================== SkyLustr — main stylesheet (RTL). Author: Vahid Eslami Brand colours come from the settings panel as CSS variables. ========================================================================== */ :root { --sky-primary: #2769CD; --sky-accent: #FFD633; --navy: #172036; --page: #ffffff; --p-800: color-mix(in srgb, var(--sky-primary) 60%, #000); --p-700: color-mix(in srgb, var(--sky-primary) 72%, #000); --p-600: color-mix(in srgb, var(--sky-primary) 86%, #000); --p-200: color-mix(in srgb, var(--sky-primary) 24%, #fff); --p-100: color-mix(in srgb, var(--sky-primary) 13%, #fff); --p-50: color-mix(in srgb, var(--sky-primary) 6%, #fff); --a-700: color-mix(in srgb, var(--sky-accent) 70%, #6b4500); --a-600: color-mix(in srgb, var(--sky-accent) 85%, #8a5a00); --a-100: color-mix(in srgb, var(--sky-accent) 22%, #fff); --navy-2: color-mix(in srgb, var(--navy) 86%, #fff); --ink: #18202f; --text: #4a5366; --muted: #8a93a6; --line: #e8ecf3; --bg: #f4f6fa; --card: #fff; --danger: #e5484d; --success: #18a957; --r-xl: 28px; --r-lg: 22px; --r-md: 16px; --shadow-sm: 0 2px 10px rgba(24, 32, 47, .05); --shadow: 0 12px 32px -8px rgba(24, 32, 47, .14); --shadow-lg: 0 28px 64px -16px rgba(24, 32, 47, .28); --container: 1320px; --gutter: 16px; --header-h: 84px; --sticky-top: 0px; --ease: cubic-bezier(.2, .7, .2, 1); --font: 'SkyVazir', Vazirmatn, Tahoma, sans-serif; --x-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M10 10l6 6M16 10l-6 6' stroke='%23fff' stroke-opacity='.12' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); --stripes: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px); } /* ---------- Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 150px; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.8; color: var(--text); background: var(--page); direction: rtl; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color .2s; } a:hover { color: var(--sky-primary); } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { color: var(--ink); line-height: 1.5; margin: 0 0 .6em; font-weight: 800; } p { margin: 0 0 1em; } ul, ol { padding: 0; margin: 0; list-style: none; } :focus-visible { outline: 2px solid var(--sky-primary); outline-offset: 2px; border-radius: 6px; } ::selection { background: var(--sky-accent); color: var(--ink); } [hidden] { display: none !important; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .sky-skip { position: absolute; top: -60px; right: 12px; z-index: 1000; background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 10px; } .sky-skip:focus { top: 12px; color: #fff; } .sky-i { width: 1.25em; height: 1.25em; flex: none; } .sky-muted { color: var(--muted); } .sky-container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .sky-main { min-height: 50vh; } .sky-section { padding-block: 30px; position: relative; } /* ---------- Buttons ---------- */ .sky-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--r-md); font-weight: 800; font-size: 14px; line-height: 1; white-space: nowrap; border: 1px solid transparent; transition: background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s; cursor: pointer; } .sky-btn .sky-i { width: 19px; height: 19px; } .sky-btn:active { transform: translateY(1px); } .sky-btn[disabled] { opacity: .5; pointer-events: none; } .sky-btn--primary { background: var(--sky-primary); color: #fff; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--sky-primary) 70%, transparent); } .sky-btn--primary:hover { background: var(--p-600); color: #fff; } .sky-btn--accent { background: var(--sky-accent); color: var(--ink); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--sky-accent) 80%, transparent); } .sky-btn--accent:hover { background: var(--a-600); color: var(--ink); } .sky-btn--soft { background: var(--p-50); color: var(--sky-primary); } .sky-btn--soft:hover { background: var(--p-100); color: var(--p-700); } .sky-btn--white { background: #fff; color: var(--sky-primary); } .sky-btn--white:hover { background: var(--sky-accent); color: var(--ink); } .sky-btn--sm { height: 40px; padding: 0 16px; font-size: 13px; border-radius: 12px; } .sky-btn--lg { height: 54px; font-size: 15px; } .sky-btn--block { width: 100%; } .sky-linkbtn { display: inline-flex; align-items: center; gap: 4px; color: var(--sky-primary); font-weight: 800; font-size: 13.5px; } .sky-linkbtn .sky-i { width: 16px; height: 16px; transition: transform .2s; } .sky-iconbtn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 13px; color: var(--ink); transition: background .2s, color .2s; flex: none; } .sky-iconbtn:hover { background: var(--p-50); color: var(--sky-primary); } .sky-iconbtn .sky-i { width: 21px; height: 21px; } .sky-loader { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--p-100); border-top-color: var(--sky-primary); animation: sky-spin .7s linear infinite; display: none; } .is-loading > .sky-loader, .sky-loader--center { display: block; margin: 40px auto; } @keyframes sky-spin { to { transform: rotate(360deg); } } /* ---------- Section heading ---------- */ .sky-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; position: relative; } .sky-head__title { position: relative; isolation: isolate; min-width: 0; } .sky-head__title.has-ghost { padding-top: .5em; } .sky-h2 { display: flex; align-items: center; gap: 8px; font-size: clamp(20px, 1.3vw + 12px, 28px); font-weight: 900; color: var(--ink); line-height: 1.4; letter-spacing: -.2px; } .sky-h2 em { font-style: normal; color: var(--sky-primary); } .sky-h2__icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--a-100); color: var(--a-700); flex: none; margin-left: 4px; } .sky-h2__icon .sky-i { width: 22px; height: 22px; } /* Ghost English title: soft, faded fill behind the heading. */ .sky-ghost { position: absolute; z-index: -1; right: -.04em; top: -.06em; direction: ltr; white-space: nowrap; pointer-events: none; user-select: none; font-size: clamp(38px, 3.6vw + 16px, 76px); font-weight: 900; line-height: 1; letter-spacing: -.5px; text-transform: uppercase; color: var(--sky-primary); opacity: .08; -webkit-mask-image: linear-gradient(180deg, #000 15%, rgba(0,0,0,.2) 75%, transparent 100%); mask-image: linear-gradient(180deg, #000 15%, rgba(0,0,0,.2) 75%, transparent 100%); } .sky-head__tools { display: flex; align-items: center; gap: 10px; flex: none; } .sky-head--line .sky-head__title { flex: none; } .sky-head--line::after { content: ""; order: 1; flex: 1; height: 1px; background: linear-gradient(270deg, var(--line), transparent); margin-bottom: 16px; } .sky-head--line .sky-head__tools { order: 2; } .sky-head--center { justify-content: center; text-align: center; } .sky-nav-btns { display: flex; gap: 8px; } .sky-nav-btn { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--p-50); color: var(--sky-primary); transition: background .2s, color .2s, opacity .2s, box-shadow .2s; } .sky-nav-btn:hover { background: var(--sky-primary); color: #fff; } .sky-nav-btn.swiper-button-disabled { opacity: .35; pointer-events: none; } .sky-nav-btn.swiper-button-lock { display: none; } .sky-nav-btn .sky-i { width: 20px; height: 20px; } .sky-nav-btns--float { position: absolute; inset: 50% -14px auto -14px; margin-top: -22px; justify-content: space-between; pointer-events: none; z-index: 5; } .sky-nav-btns--float .sky-nav-btn { pointer-events: auto; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 8px 22px rgba(24,32,47,.16); } .sky-nav-btns--float .sky-nav-btn:hover { background: var(--sky-primary); color: #fff; } /* ---------- Swiper ---------- */ .sky-swiper { overflow: hidden; padding: 16px 6px 22px; margin: -16px -6px -22px; cursor: grab; } .sky-swiper:active { cursor: grabbing; } .sky-swiper .swiper-wrapper { align-items: stretch; } .sky-swiper .swiper-slide { height: auto; display: flex; } .sky-swiper .swiper-slide > * { width: 100%; } /* ---------- Placeholder ---------- */ .sky-ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 80px; background: linear-gradient(135deg, var(--p-50), #fff); } .sky-ph .sky-i { width: 40%; height: 40%; color: var(--p-200); } /* ========================================================================== Header ========================================================================== */ .sky-campaign { --camp: var(--sky-primary); position: relative; background: linear-gradient(90deg, color-mix(in srgb, var(--camp) 70%, #000), var(--camp) 50%, color-mix(in srgb, var(--camp) 70%, #000)); color: #fff; overflow: hidden; } .sky-campaign::before { content: ""; position: absolute; inset: 0; background: var(--stripes); } .sky-campaign__in { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding-block: 6px; } .sky-campaign__msg { display: flex; align-items: center; gap: 12px; color: #fff; } .sky-campaign__msg:hover { color: #fff; } .sky-campaign__hl { font-size: 26px; font-weight: 900; color: var(--sky-accent); line-height: 1; } .sky-campaign__text { font-weight: 800; font-size: 15.5px; } .sky-campaign__btn { background: var(--sky-accent); color: var(--ink); font-weight: 800; font-size: 13px; padding: 7px 18px; border-radius: 999px; } .sky-campaign__btn:hover { background: #fff; color: var(--ink); } .sky-campaign__close { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: rgba(255,255,255,.8); } .sky-campaign__close:hover { background: rgba(255,255,255,.15); } .sky-campaign__close .sky-i { width: 16px; height: 16px; } .sky-campaign--image .sky-campaign__img img { width: 100%; max-height: 90px; object-fit: cover; } .sky-campaign.is-hidden { display: none; } .sky-topbar { background: var(--bg); border-bottom: 1px solid var(--line); font-size: 13px; } .sky-topbar__in { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 16px; } .sky-menu--topbar { display: flex; gap: 4px 22px; flex-wrap: wrap; } .sky-menu--topbar .sky-mi__link { color: var(--text); font-weight: 600; } .sky-menu--topbar .sky-mi__link:hover { color: var(--sky-primary); } .sky-menu--topbar .sky-sub-wrap, .sky-menu--topbar .sky-mi__toggle, .sky-menu--topbar .sky-mi__caret { display: none; } .sky-topbar__contact { display: flex; align-items: center; gap: 14px; color: var(--muted); } .sky-topbar__hours { display: inline-flex; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid var(--line); } .sky-topbar__hours .sky-i { width: 15px; height: 15px; color: var(--sky-primary); } .sky-topbar__phone { direction: ltr; font-weight: 900; font-size: 17px; color: var(--sky-primary); letter-spacing: .5px; } .sky-header { background: #fff; position: relative; z-index: 60; transition: box-shadow .25s; } .sky-sticky-header .sky-header { position: sticky; top: 0; } .admin-bar.sky-sticky-header .sky-header { top: 32px; } .sky-header.is-stuck { box-shadow: 0 10px 30px -12px rgba(24,32,47,.18); } .sky-header__main { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); } .sky-header__burger { display: none; } .sky-logo { flex: none; } .sky-logo img { max-height: var(--logo-h, 52px); width: auto; } .sky-logo__text { display: flex; align-items: center; gap: 10px; } .sky-logo__text b { display: block; font-size: 21px; font-weight: 900; color: var(--sky-primary); line-height: 1.2; } .sky-logo__text small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; } .sky-logo__mark { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--sky-accent); color: var(--ink); box-shadow: inset 0 -4px 0 rgba(0,0,0,.08); flex: none; } .sky-logo__mark .sky-i { width: 28px; height: 28px; } .sky-search { position: relative; flex: 1 1 380px; max-width: 620px; } .sky-search input { width: 100%; height: 52px; border: 1.5px solid transparent; border-radius: 16px; background: var(--bg); padding: 0 18px 0 58px; font-size: 14px; outline: 0; transition: border-color .2s, background .2s, box-shadow .2s; } .sky-search input::placeholder { color: var(--muted); } .sky-search input::-webkit-search-cancel-button { -webkit-appearance: none; } .sky-search input:focus { background: #fff; border-color: var(--p-200); box-shadow: 0 0 0 4px var(--p-50); } .sky-search button[type="submit"] { position: absolute; left: 6px; top: 6px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--sky-primary); color: #fff; } .sky-search button[type="submit"] .sky-i { width: 19px; height: 19px; } .sky-search__results { position: absolute; top: calc(100% + 8px); right: 0; left: 0; min-width: min(560px, 92vw); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 14px; z-index: 80; border: 1px solid var(--line); max-height: min(72vh, 640px); overflow-y: auto; overscroll-behavior: contain; } .sky-search.is-loading button[type="submit"] .sky-i { animation: skySpin .8s linear infinite; } @keyframes skySpin { to { transform: rotate(360deg); } } .sky-search__sec + .sky-search__sec { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); } .sky-search__h { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 900; color: var(--ink); } .sky-search__cats { overflow: hidden; margin: 0 -2px; padding: 2px; } .sky-search__cat { width: 92px !important; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .sky-search__cat-img { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; } .sky-search__cat-img img { width: 100%; height: 100%; object-fit: cover; } .sky-search__cat-img .sky-i { width: 30px; height: 30px; color: var(--sky-primary); } .sky-search__cat:hover .sky-search__cat-img { box-shadow: inset 0 0 0 2px var(--sky-primary); transform: translateY(-2px); } .sky-search__cat b { font-size: 12.5px; font-weight: 800; color: var(--ink); line-height: 1.5; } .sky-search__cat small { font-size: 11px; color: var(--muted); margin-top: -4px; } .sky-search__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .sky-search__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 14px; border: 1px solid transparent; transition: background .2s, border-color .2s; } .sky-search__item:hover { background: var(--bg); border-color: var(--line); } .sky-search__item img, .sky-search__noimg { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; background: var(--bg); display: block; } .sky-search__item b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font-size: 13px; line-height: 1.6; font-weight: 800; } .sky-search__item small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; } .sky-search__item small em { font-style: normal; color: var(--sky-primary); font-weight: 900; font-size: 12.5px; } .sky-search__item small del { color: var(--muted); font-size: 11px; } .sky-search__item small i { font-style: normal; font-size: 10.5px; font-weight: 900; color: #fff; background: var(--danger); border-radius: 6px; padding: 0 5px; } .sky-search__all { display: block; margin-top: 12px; text-align: center; padding: 11px; border-radius: 12px; background: var(--p-50); font-weight: 800; color: var(--sky-primary); } .sky-search__all:hover { background: var(--sky-primary); color: #fff; } .sky-search__empty { padding: 14px; text-align: center; color: var(--muted); } @media (max-width: 600px) { .sky-search__grid { grid-template-columns: minmax(0, 1fr); } .sky-search__results { min-width: 0; } } .sky-header__actions { display: flex; align-items: center; gap: 10px; flex: none; margin-right: auto; } .sky-header__support { display: flex; align-items: center; gap: 10px; padding-left: 14px; margin-left: 4px; border-left: 1px solid var(--line); } .sky-header__support-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--a-100); color: var(--a-700); } .sky-header__support small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; } .sky-header__support b { display: block; font-size: 15px; color: var(--ink); direction: ltr; text-align: right; line-height: 1.3; } .sky-pill { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 16px; font-weight: 800; font-size: 14px; color: var(--ink); background: #fff; transition: border-color .2s, background .2s, color .2s; } .sky-pill:hover { border-color: var(--p-200); color: var(--sky-primary); } .sky-pill .sky-i { width: 21px; height: 21px; } .sky-pill--cart { background: var(--sky-primary); border-color: var(--sky-primary); color: #fff; padding-right: 8px; } .sky-pill--cart:hover { background: var(--p-600); color: #fff; } .sky-pill__icon { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.16); } .sky-cart-count { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 99px; background: var(--sky-accent); color: var(--ink); font-size: 11px; font-weight: 900; display: grid; place-items: center; line-height: 1; border: 2px solid #fff; transition: transform .3s var(--ease); } .sky-cart-count.is-bump { transform: scale(1.35); } .sky-dd { position: relative; } .sky-dd__panel { position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px; z-index: 75; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; } .sky-dd__panel::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 12px; } .sky-dd:hover > .sky-dd__panel, .sky-dd:focus-within > .sky-dd__panel { opacity: 1; visibility: visible; transform: none; } .sky-dd__user { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .sky-dd__user img { border-radius: 12px; } .sky-dd__user b { color: var(--ink); } .sky-dd__list a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px; font-size: 14px; font-weight: 700; } .sky-dd__list a:hover { background: var(--bg); } .sky-dd__list .sky-i { width: 18px; height: 18px; color: var(--muted); } /* Nav row */ .sky-navbar { border-top: 1px solid var(--line); background: #fff; } .sky-navbar__in { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; } .sky-nav { flex: 1 1 auto; min-width: 0; } .sky-menu--primary { display: flex; align-items: center; gap: 2px; } .sky-menu--primary > .sky-mi { position: relative; } .sky-menu--primary > .sky-mi.sky-mega { position: static; } .sky-menu--primary > .sky-mi > .sky-mi__link { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px; border-radius: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; font-size: 14.5px; } .sky-menu--primary > .sky-mi > .sky-mi__link:hover, .sky-menu--primary > .sky-mi:hover > .sky-mi__link, .sky-menu--primary > .current-menu-item > .sky-mi__link { color: var(--sky-primary); background: var(--p-50); } .sky-mi__caret { width: 16px; height: 16px; transition: transform .2s; } .sky-menu--primary > .sky-mi:hover .sky-mi__caret { transform: rotate(180deg); } .sky-menu--primary .sky-mi__toggle { display: none; } .sky-menu--primary .sky-sub-wrap--0 { position: absolute; top: 100%; right: 0; min-width: 240px; z-index: 70; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s var(--ease), visibility .2s; } .sky-menu--primary > .sky-mi:hover > .sky-sub-wrap--0, .sky-menu--primary > .sky-mi:focus-within > .sky-sub-wrap--0 { opacity: 1; visibility: visible; transform: none; } .sky-menu--primary .sky-sub .sky-mi__link { display: block; padding: 8px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); } .sky-menu--primary .sky-sub .sky-mi__link:hover { background: var(--bg); color: var(--sky-primary); } .sky-menu--primary > .sky-mega > .sky-sub-wrap--0 { right: 0; left: 0; padding: 28px 32px; border-top: 3px solid var(--sky-primary); } .sky-mega > .sky-sub-wrap--0 > .sky-sub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 32px; } .sky-mega .sky-mi--d1 > .sky-mi__link { font-size: 15.5px; font-weight: 900; color: var(--sky-primary); padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px dashed var(--line); border-radius: 0; background: none !important; } .sky-mega .sky-mi--d2 > .sky-mi__link { display: flex; align-items: center; gap: 10px; padding: 7px 0; background: none !important; } .sky-mega .sky-mi--d2 > .sky-mi__link::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); flex: none; transition: background .2s; } .sky-mega .sky-mi--d2 > .sky-mi__link:hover::before { background: var(--sky-accent); border-color: var(--sky-accent); } .sky-navbar__extra { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 14px; border-radius: 12px; font-weight: 800; font-size: 14px; color: #d73b3e; background: color-mix(in srgb, #d73b3e 7%, #fff); flex: none; } .sky-navbar__extra-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: #d73b3e; color: #fff; } .sky-navbar__extra-ic .sky-i { width: 16px; height: 16px; stroke-width: 2.4; } .sky-navbar__extra:hover { color: #fff; background: #d73b3e; } /* Category mega menu */ .sky-catmenu { position: static; flex: none; } .sky-catmenu__btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 16px; border-radius: 14px; background: var(--sky-primary); color: #fff; font-weight: 800; font-size: 14.5px; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--sky-primary) 80%, transparent); } .sky-catmenu__btn-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.18); } .sky-catmenu__btn-ic .sky-i { width: 19px; height: 19px; } .sky-catmenu__caret { width: 16px; height: 16px; transition: transform .25s; } .sky-catmenu.is-open .sky-catmenu__caret { transform: rotate(180deg); } .sky-catmenu__panel { position: absolute; top: calc(100% + 1px); right: var(--gutter); left: var(--gutter); z-index: 72; display: grid; grid-template-columns: 250px minmax(0, 1fr) 230px; height: min(470px, 70vh); background: #fff; border-radius: 0 0 var(--r-xl) var(--r-xl); box-shadow: var(--shadow-lg); border: 1px solid var(--line); border-top: 3px solid var(--sky-primary); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s, transform .25s var(--ease), visibility .22s; overflow: hidden; } .sky-catmenu.is-open .sky-catmenu__panel { opacity: 1; visibility: visible; transform: none; } .sky-catmenu__list { background: linear-gradient(180deg, var(--bg), #fff); border-left: 1px solid var(--line); padding: 10px; overflow-y: auto; scrollbar-width: thin; } .sky-catmenu__list a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 14px; font-weight: 700; font-size: 14px; color: var(--ink); transition: background .2s, color .2s; } .sky-catmenu__list li.is-active a { background: #fff; color: var(--sky-primary); box-shadow: var(--shadow-sm); } .sky-catmenu__ic { width: 38px; height: 38px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); flex: none; color: var(--sky-primary); } .sky-catmenu__ic img { width: 100%; height: 100%; object-fit: cover; } .sky-catmenu__ic .sky-i { width: 20px; height: 20px; } .sky-catmenu__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sky-catmenu__arrow { width: 16px; height: 16px; opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; } .sky-catmenu__list li.is-active .sky-catmenu__arrow { opacity: 1; transform: none; } .sky-catmenu__content { position: relative; overflow-y: auto; padding: 22px 26px; scrollbar-width: thin; } .sky-catmenu__pane { display: none; animation: skyFade .25s ease; } .sky-catmenu__pane.is-active { display: block; } @keyframes skyFade { from { opacity: 0; transform: translateY(6px); } } .sky-catmenu__pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px dashed var(--line); } .sky-catmenu__pane-head b { font-size: 17px; font-weight: 900; color: var(--ink); } .sky-catmenu__pane-head a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--sky-primary); } .sky-catmenu__pane-head .sky-i { width: 16px; height: 16px; } .sky-catmenu__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 18px; } .sky-catmenu__child { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 14px; font-weight: 800; font-size: 14px; color: var(--ink); transition: background .2s; } .sky-catmenu__child:hover { background: var(--p-50); color: var(--sky-primary); } .sky-catmenu__thumb { width: 50px; height: 50px; border-radius: 14px; overflow: hidden; background: var(--bg); display: grid; place-items: center; flex: none; color: var(--p-200); } .sky-catmenu__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .sky-catmenu__child:hover .sky-catmenu__thumb img { transform: scale(1.08); } .sky-catmenu__group ul { padding: 4px 66px 0 0; } .sky-catmenu__group ul a { display: block; padding: 3px 0; font-size: 13px; font-weight: 600; color: var(--text); } .sky-catmenu__group ul a:hover { color: var(--sky-primary); } .sky-catmenu__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .sky-catmenu__subtitle { display: flex; align-items: center; gap: 6px; margin: 22px 0 12px; font-size: 13px; font-weight: 800; color: var(--ink); } .sky-catmenu__subtitle .sky-i { width: 18px; height: 18px; color: #f97316; } .sky-catmenu__pane-head + .sky-catmenu__subtitle { margin-top: 4px; } .sky-catmenu__products { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .sky-catmenu__prod { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; } .sky-catmenu__prod b { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.6; } .sky-catmenu__prod small { font-size: 12px; color: var(--sky-primary); font-weight: 700; } .sky-catmenu__prod del { display: none; } .sky-catmenu__promo { position: relative; margin: 14px; border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 18px; color: #fff; background: var(--stripes), radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--sky-primary) 70%, #000), var(--navy)); isolation: isolate; } .sky-catmenu__promo:hover { color: #fff; } .sky-catmenu__promo.has-img { padding: 0; background: var(--bg); } .sky-catmenu__promo.has-img img { width: 100%; height: 100%; object-fit: cover; } .sky-catmenu__promo-art { position: absolute; inset: 6px 10px auto; z-index: -1; display: flex; justify-content: center; } .sky-catmenu__promo-art .sky-art { height: 210px; width: auto; } .sky-catmenu__promo b { font-size: 17px; font-weight: 900; line-height: 1.6; } .sky-catmenu__promo-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: var(--sky-accent); color: var(--ink); padding: 7px 14px; border-radius: 12px; font-weight: 800; font-size: 13px; } .sky-catmenu__promo-btn .sky-i { width: 16px; height: 16px; } /* Drawer */ .sky-drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; overflow: hidden; } .sky-drawer.is-open { visibility: visible; pointer-events: auto; } .sky-drawer__overlay { position: absolute; inset: 0; background: rgba(12, 17, 30, .5); opacity: 0; transition: opacity .3s; backdrop-filter: blur(3px); } .sky-drawer.is-open .sky-drawer__overlay { opacity: 1; } .sky-drawer__panel { position: absolute; top: 0; bottom: 0; right: 0; width: min(88vw, 370px); background: #fff; overflow-y: auto; padding: 16px; transform: translateX(100%); transition: transform .35s var(--ease); display: flex; flex-direction: column; gap: 14px; } .sky-drawer.is-open .sky-drawer__panel { transform: none; } .sky-drawer__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .sky-logo--drawer img { max-height: 40px; } .sky-drawer__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sky-drawer__quick a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 13px; background: var(--bg); font-weight: 800; font-size: 13.5px; color: var(--ink); } .sky-drawer__quick a:first-child { background: var(--sky-primary); color: #fff; } .sky-drawer__quick .sky-i { width: 18px; height: 18px; } .sky-drawer__label { display: block; font-size: 12px; font-weight: 800; color: var(--muted); margin: 4px 0 2px; } .sky-drawer__ic { width: 30px; height: 30px; border-radius: 10px; overflow: hidden; background: var(--bg); display: grid; place-items: center; margin-left: 10px; flex: none; color: var(--sky-primary); } .sky-drawer__ic img { width: 100%; height: 100%; object-fit: cover; } .sky-drawer__ic .sky-i { width: 18px; height: 18px; } .sky-menu--mobile .sky-mi { position: relative; border-bottom: 1px solid var(--line); } .sky-menu--mobile .sky-mi__link { display: flex; align-items: center; padding: 11px 4px; font-weight: 700; color: var(--ink); } .sky-menu--mobile .sky-mi__caret { display: none; } .sky-menu--mobile .sky-mi__toggle { position: absolute; left: 0; top: 6px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--bg); } .sky-menu--mobile .sky-mi__toggle .sky-i { width: 18px; height: 18px; transition: transform .2s; } .sky-menu--mobile .sky-mi.is-open > .sky-mi__toggle .sky-i { transform: rotate(180deg); } .sky-menu--mobile .sky-sub-wrap { display: none; padding: 0 14px 8px 0; } .sky-menu--mobile .sky-mi.is-open > .sky-sub-wrap { display: block; } .sky-menu--mobile .sky-sub .sky-mi { border: 0; } .sky-menu--mobile .sky-sub .sky-mi__link { padding: 7px 4px; font-weight: 600; font-size: 14px; color: var(--text); } .sky-menu--mobile-2 { margin-top: 10px; } .sky-menu--mobile-2 .sky-mi__link { font-weight: 600; color: var(--text); font-size: 14px; } .sky-drawer__call { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--r-lg); background: var(--p-50); color: var(--sky-primary); } .sky-drawer__call .sky-i { width: 28px; height: 28px; } .sky-drawer__call span { display: flex; flex-direction: column; font-size: 12px; color: var(--text); } .sky-drawer__call b { font-size: 18px; color: var(--sky-primary); direction: ltr; text-align: right; } /* ========================================================================== Home sections ========================================================================== */ /* Hero */ .sky-hero-wrap { padding-top: 22px; } .sky-hero { position: relative; --ratio: 3/1; } .sky-hero__slides { position: relative; aspect-ratio: var(--ratio); min-height: 280px; border-radius: var(--r-xl, 28px); overflow: hidden; background: var(--navy); isolation: isolate; box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--navy) 85%, transparent); } .sky-hero::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--r-xl, 28px); pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); } .sky-hero__slide::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(6,10,24,.34), transparent 24%); } .sky-hero__slides .swiper-slide { position: relative; overflow: hidden; } .sky-hero__bg, .sky-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sky-hero__slide--default { background: radial-gradient(120% 140% at 15% 20%, color-mix(in srgb, var(--sky-primary) 65%, #0a1230) 0%, #0b1226 62%); } .sky-hero__glow { position: absolute; left: 6%; top: 10%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sky-accent) 30%, transparent), transparent 65%); filter: blur(10px); } .sky-hero__art { position: absolute; left: 7%; top: 0; bottom: 0; width: 34%; display: flex; align-items: flex-start; justify-content: center; } .sky-hero__art .sky-art { height: 92%; width: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.35)); } .sky-hero__text { position: absolute; inset-block: 0; right: 0; width: min(58%, 640px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 40px clamp(28px, 5vw, 84px); z-index: 2; } .sky-hero__text.has-img { background: linear-gradient(270deg, rgba(8,14,30,.6), transparent); width: 60%; } .sky-hero__title { color: #fff; font-size: clamp(22px, 2.3vw + 6px, 44px); font-weight: 900; line-height: 1.35; } .sky-hero__hl { display: inline; background: var(--sky-accent); color: var(--ink); font-size: clamp(22px, 2.3vw + 6px, 44px); font-weight: 900; line-height: 1.6; padding: 0 .3em; border-radius: 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .sky-hero__sub { color: rgba(255,255,255,.86); font-size: clamp(14px, .5vw + 11px, 17px); font-weight: 600; } .sky-hero__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 13px 24px; border-radius: 15px; background: #fff; color: var(--ink); font-weight: 900; box-shadow: 0 12px 26px rgba(0,0,0,.22); transition: background .2s, transform .2s; } .sky-hero__btn:hover { background: var(--sky-accent); color: var(--ink); transform: translateY(-2px); } .sky-hero__btn .sky-i { width: 18px; height: 18px; } .sky-hero__cover { position: absolute; inset: 0; z-index: 1; } .swiper-slide-active .sky-hero__text > * { animation: skyRise .7s var(--ease) both; } .swiper-slide-active .sky-hero__text > *:nth-child(2) { animation-delay: .08s; } .swiper-slide-active .sky-hero__text > *:nth-child(3) { animation-delay: .16s; } .swiper-slide-active .sky-hero__text > *:nth-child(4) { animation-delay: .24s; } @keyframes skyRise { from { opacity: 0; transform: translateY(18px); } } /* Glass control bar (bottom-left): prev · counter · progress dots · next */ .sky-hero__ctrl { position: absolute; left: 22px; bottom: 22px; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 99px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 12px 30px -12px rgba(0,0,0,.45); direction: rtl; } .sky-hero__arrow { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); transition: background .2s, color .2s, transform .2s; } .sky-hero__arrow .sky-i { width: 18px; height: 18px; } .sky-hero__arrow:hover { background: var(--sky-accent); transform: scale(1.06); } .sky-hero__count { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px; color: #fff; font-size: 13px; line-height: 1; } .sky-hero__count b { font-size: 16px; font-weight: 900; min-width: 20px; text-align: center; } .sky-hero__count i { width: 1px; height: 14px; background: rgba(255,255,255,.4); } .sky-hero__count small { opacity: .7; font-weight: 700; } .sky-hero__dots { position: static !important; transform: none !important; width: auto !important; display: flex; align-items: center; gap: 5px; padding: 0 4px; } .sky-hero__dots .swiper-pagination-bullet { position: relative; width: 8px; height: 8px; margin: 0 !important; border-radius: 99px; background: rgba(255,255,255,.45); opacity: 1; overflow: hidden; transition: width .4s var(--ease), background .3s; } .sky-hero__dots .swiper-pagination-bullet-active { width: 38px; background: rgba(255,255,255,.3); } .sky-hero__dots .swiper-pagination-bullet-active::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--sky-accent); transform-origin: right; animation: skyHeroBar var(--hero-d, 5s) linear forwards; } .sky-hero.is-static .sky-hero__dots .swiper-pagination-bullet-active::after, .sky-hero:hover .sky-hero__dots .swiper-pagination-bullet-active::after { animation-play-state: paused; } .sky-hero.is-static .sky-hero__dots .swiper-pagination-bullet-active::after { animation: none; } @keyframes skyHeroBar { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Category carousel */ .sky-cats { --tile: 118px; padding-block: 22px; } .sky-cats__rail { position: relative; } .sky-cats__slide { width: var(--tile) !important; } .sky-cat { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .sky-cat__img { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--bg); overflow: hidden; display: grid; place-items: center; transition: transform .3s var(--ease), box-shadow .3s; box-shadow: inset 0 0 0 1px var(--line); } .sky-cat__img::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; background: conic-gradient(from 200deg, var(--sky-primary), var(--sky-accent), var(--sky-primary)) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; } .sky-cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); } .sky-cat__icon .sky-i { width: 42px; height: 42px; color: var(--sky-primary); } .sky-cat:hover .sky-cat__img, .sky-cat.is-current .sky-cat__img { transform: translateY(-4px); box-shadow: 0 14px 28px -10px rgba(24,32,47,.3); } .sky-cat:hover .sky-cat__img::after, .sky-cat.is-current .sky-cat__img::after { opacity: 1; } .sky-cat:hover .sky-cat__img img { transform: scale(1.08); } .sky-cat__name { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.5; } .sky-cat:hover .sky-cat__name, .sky-cat.is-current .sky-cat__name { color: var(--sky-primary); } .sky-cats .sky-nav-btns--float { inset: calc(var(--tile) / 2 + 16px) -12px auto -12px; margin-top: -22px; } /* Countdown */ .sky-countdown { display: flex; gap: 6px; direction: rtl; } .sky-countdown__u { min-width: 48px; height: 48px; padding: 4px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; background: var(--bg); } .sky-countdown__u b { font-size: 17px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; } .sky-countdown__u small { font-size: 10px; color: var(--muted); font-weight: 700; } .sky-countdown--glass .sky-countdown__u { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter: blur(4px); } .sky-countdown--glass b { color: #fff; } .sky-countdown--glass small { color: rgba(255,255,255,.72); } .sky-countdown--glass .sky-countdown__u:first-child { background: var(--sky-accent); box-shadow: none; } .sky-countdown--glass .sky-countdown__u:first-child b, .sky-countdown--glass .sky-countdown__u:first-child small { color: var(--ink); } .sky-countdown--mini .sky-countdown__u { min-width: 36px; height: 36px; background: rgba(255,255,255,.14); border-radius: 10px; } .sky-countdown--mini b { color: #fff; font-size: 13px; } .sky-countdown--mini small { color: rgba(255,255,255,.7); font-size: 9px; } .sky-countdown--card { background: #fff; padding: 6px; border-radius: 17px; box-shadow: var(--shadow); } .sky-countdown--card .sky-countdown__u:first-child { background: var(--sky-accent); } .sky-countdown--card .sky-countdown__u:first-child small { color: var(--ink); } /* Weekly specials band */ .sky-ws { --band1: var(--sky-primary); --band2: var(--p-800); --band-r: 32px; } .sky-ws__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .sky-ws__head .sky-head__title { padding-bottom: 16px; } .sky-ws__tab { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px 10px; border-radius: var(--band-r) var(--band-r) 0 0; color: #fff; background: var(--x-pattern), linear-gradient(160deg, color-mix(in srgb, var(--band1) 88%, #fff), var(--band1)); } .sky-ws__tab::after { content: ""; position: absolute; right: -28px; bottom: 0; width: 28px; height: 28px; background: radial-gradient(circle at 100% 0, transparent 27.5px, var(--band1) 28px); } .sky-ws__tab-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: rgba(255,255,255,.88); } .sky-ws__tab-label .sky-i { width: 18px; height: 18px; } .sky-ws__btn { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 18px; border-radius: 14px; background: #fff; color: var(--band1); font-weight: 900; font-size: 13.5px; transition: background .2s, color .2s; } .sky-ws__btn:hover { background: var(--sky-accent); color: var(--ink); } .sky-ws__btn .sky-i { width: 17px; height: 17px; } .sky-ws__band { position: relative; border-radius: 0 var(--band-r) var(--band-r) var(--band-r); padding: 26px 24px; background: var(--x-pattern), radial-gradient(60% 120% at 85% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(160deg, var(--band1), var(--band2)); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--band1) 80%, transparent); } .sky-ws__band .sky-nav-btns--float { inset-inline: -20px; } /* ---------- Product card ---------- */ .sky-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; transition: box-shadow .35s, border-color .35s, transform .35s var(--ease); } .sky-card:hover { box-shadow: 0 22px 44px -18px rgba(24,32,47,.28); border-color: transparent; transform: translateY(-4px); } .sky-card__media { position: relative; border-radius: var(--r-md); overflow: hidden; background: #f2f4f8; aspect-ratio: 1; isolation: isolate; } .sky-card__img { position: absolute; inset: 0; display: block; } .sky-card__img img, .sky-card__img .sky-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s, transform .6s var(--ease); } .sky-card__img-b { opacity: 0; } .sky-card:hover .sky-card__img.has-hover .sky-card__img-a { opacity: 0; } .sky-card:hover .sky-card__img.has-hover .sky-card__img-b { opacity: 1; } .sky-card:hover .sky-card__img img { transform: scale(1.06); } .sky-card__tags { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; } .sky-badges { display: flex; flex-wrap: wrap; gap: 5px; } .sky-badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 8px; font-size: 11px; font-weight: 800; line-height: 1; white-space: nowrap; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 4px 12px rgba(24,32,47,.12); } .sky-badge .sky-i { width: 13px; height: 13px; } .sky-badge--blue { background: var(--sky-primary); color: #fff; } .sky-badge--yellow { background: var(--sky-accent); color: var(--ink); } .sky-badge--dark { background: var(--navy); color: #fff; } .sky-badge--red { background: var(--danger); color: #fff; } .sky-badge--green { background: var(--success); color: #fff; } .sky-card__dots { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; align-items: center; gap: 4px; padding: 5px 7px; background: rgba(255,255,255,.94); border-radius: 99px; box-shadow: 0 4px 12px rgba(24,32,47,.12); } .sky-card__dots li { width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); } .sky-card__dots li.is-more { width: auto; height: auto; background: none; box-shadow: none; font-size: 10.5px; font-weight: 900; color: var(--muted); padding: 0 2px; } .sky-card.is-oos .sky-card__img img { filter: grayscale(.85); opacity: .7; } .sky-card__body { padding: 12px 4px 10px; display: flex; flex-direction: column; gap: 4px; } .sky-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; } .sky-card__cat { font-size: 12px; font-weight: 800; color: var(--sky-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sky-card__title { color: var(--ink); font-weight: 800; font-size: 14px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.5em; } .sky-card__title:hover { color: var(--sky-primary); } .sky-card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 10px 4px 2px; border-top: 1px dashed var(--line); } .sky-cprice { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; } .sky-cprice__old { display: flex; align-items: center; gap: 6px; } .sky-cprice__old del { font-size: 12px; color: var(--muted); font-weight: 600; text-decoration-color: var(--danger); } .sky-off { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 7px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 900; line-height: 1; } .sky-off--lg { height: 28px; padding: 0 10px; border-radius: 9px; font-size: 12.5px; } .sky-cprice__now { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; } .sky-cprice__now b { font-size: 16.5px; font-weight: 900; color: var(--ink); letter-spacing: -.2px; } .sky-cprice__now small { font-size: 11px; color: var(--muted); font-weight: 700; } .sky-cprice__from { font-size: 11px; color: var(--muted); font-weight: 700; } .sky-cprice__call { font-size: 12px; color: var(--muted); font-weight: 700; line-height: 1.6; } .sky-cprice--lg .sky-cprice__now b { font-size: 24px; } .sky-cprice--lg .sky-cprice__old del { font-size: 14px; } .sky-add { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: var(--p-50); color: var(--sky-primary); transition: background .2s, color .2s, transform .2s, box-shadow .2s; } .sky-add .sky-i { width: 22px; height: 22px; } .sky-add:hover { background: var(--sky-primary); color: #fff; box-shadow: 0 10px 20px -8px color-mix(in srgb, var(--sky-primary) 80%, transparent); } .sky-add:active { transform: scale(.94); } .sky-add__ok { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--success); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s var(--ease); } .sky-add.is-added .sky-add__ok { opacity: 1; transform: none; } .sky-add.is-loading { pointer-events: none; color: transparent; } .sky-add.is-loading::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--p-200); border-top-color: var(--sky-primary); animation: sky-spin .7s linear infinite; } .sky-btn.is-loading { pointer-events: none; opacity: .7; } .sky-add--call { background: var(--a-100); color: var(--a-700); } .sky-card__oos { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; font-size: 12px; font-weight: 800; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, #fff); border-radius: 10px; } .sky-card__oos .sky-i { width: 14px; height: 14px; } .sky-rate { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); flex: none; } .sky-rate .sky-i { width: 15px; height: 15px; color: var(--sky-accent); stroke: var(--a-600); stroke-width: 1; } .sky-rate b { color: var(--ink); font-weight: 800; } /* Category banners */ .sky-cbanners { --cb-dark: var(--navy); } .sky-cbanners__grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 22px; padding-top: 48px; } .sky-cbanner { position: relative; display: flex; align-items: center; min-height: 200px; padding: 26px 28px; border-radius: var(--r-xl); color: #fff; isolation: isolate; background: var(--stripes), radial-gradient(90% 120% at 15% 100%, rgba(255,214,51,.14), transparent 55%), linear-gradient(135deg, color-mix(in srgb, var(--cb-dark) 80%, #fff), var(--cb-dark)); transition: transform .35s var(--ease), box-shadow .35s; } .sky-cbanner--primary { background: var(--stripes), radial-gradient(90% 120% at 15% 100%, rgba(255,214,51,.18), transparent 55%), linear-gradient(135deg, var(--sky-primary), var(--p-800)); } .sky-cbanner--accent { color: var(--ink); background: repeating-linear-gradient(135deg, rgba(0,0,0,.04) 0 2px, transparent 2px 16px), linear-gradient(135deg, var(--sky-accent), var(--a-600)); } .sky-cbanner:hover { color: #fff; transform: translateY(-5px); box-shadow: var(--shadow-lg); } .sky-cbanner--accent:hover { color: var(--ink); } .sky-cbanner__text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 56%; position: relative; z-index: 2; } .sky-cbanner__badge { display: inline-flex; align-items: center; gap: 4px; background: var(--sky-accent); color: var(--ink); font-size: 12px; font-weight: 900; padding: 5px 10px 5px 12px; border-radius: 10px; } .sky-cbanner__badge .sky-i { width: 14px; height: 14px; stroke-width: 2.4; } .sky-cbanner--accent .sky-cbanner__badge { background: var(--navy); color: #fff; } .sky-cbanner__title { font-size: clamp(19px, 1vw + 12px, 26px); font-weight: 900; line-height: 1.4; } .sky-cbanner__more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; opacity: .85; } .sky-cbanner__more .sky-i { width: 16px; height: 16px; transition: transform .25s; } .sky-cbanner:hover .sky-cbanner__more .sky-i { transform: translateX(-5px); } .sky-cbanner__img { position: absolute; left: 14px; bottom: 0; top: -48px; width: 44%; display: flex; align-items: flex-end; justify-content: center; z-index: 1; pointer-events: none; } .sky-cbanner__img--chandelier, .sky-cbanner__img--pendant { align-items: flex-start; } .sky-cbanner__img img, .sky-cbanner__img .sky-art { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.35)); transition: transform .5s var(--ease); } .sky-cbanner__img .sky-art { height: 100%; } .sky-cbanner:hover .sky-cbanner__img img, .sky-cbanner:hover .sky-cbanner__img--lamp .sky-art, .sky-cbanner:hover .sky-cbanner__img--wall .sky-art { transform: translateY(-6px) scale(1.04); } .sky-cbanner__img--pendant .sky-art, .sky-cbanner__img--chandelier .sky-art { transform-origin: top center; animation: skySwing 6s ease-in-out infinite; } @keyframes skySwing { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } } /* Amazing offer */ .sky-ao { --ao: var(--sky-primary); } .sky-ao__wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; padding: 16px; border-radius: 34px; background: linear-gradient(135deg, var(--p-50), color-mix(in srgb, var(--sky-accent) 10%, #fff)); } .sky-ao__intro { position: relative; overflow: hidden; border-radius: 26px; padding: 26px 20px 20px; color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; background: var(--x-pattern), linear-gradient(160deg, var(--ao), color-mix(in srgb, var(--ao) 60%, #000)); } .sky-ao__blob { width: 76px; height: 76px; border-radius: 26px; transform: rotate(-12deg); display: grid; place-items: center; background: var(--sky-accent); color: var(--ink); box-shadow: inset -6px -8px 0 rgba(0,0,0,.08), 0 14px 28px rgba(0,0,0,.25); margin-bottom: 12px; animation: skyFloat 4s ease-in-out infinite; } @keyframes skyFloat { 50% { transform: rotate(-4deg) translateY(-6px); } } .sky-ao__blob .sky-i { width: 38px; height: 38px; stroke-width: 2.6; } .sky-ao__title { font-size: 30px; font-weight: 900; line-height: 1.3; } .sky-ao__title em { display: block; font-style: normal; color: var(--sky-accent); } .sky-ao__sub { font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.85); margin-bottom: auto; } .sky-ao__intro .sky-countdown { margin-top: 18px; } .sky-ao__intro .sky-countdown__u { min-width: 44px; height: 46px; } .sky-ao__all { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 13px; font-weight: 800; color: #fff; } .sky-ao__all:hover { color: var(--sky-accent); } .sky-ao__all .sky-i { width: 16px; height: 16px; } .sky-ao__rail { position: relative; min-width: 0; } .sky-ao__rail .sky-nav-btns--float { inset-inline: -10px; } .sky-pcarousel--tint { background: linear-gradient(180deg, var(--p-50), transparent); } .sky-pcarousel--pattern { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M10 10l6 6M16 10l-6 6' stroke='%232769CD' stroke-opacity='.09' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Half banners */ .sky-hbanners__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .sky-hbanner { --bg: var(--navy); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 190px; padding: 26px 32px; border-radius: var(--r-xl); color: #fff; background-color: var(--bg); background-image: var(--x-pattern); transition: transform .35s var(--ease), box-shadow .35s; isolation: isolate; } .sky-hbanner::before { content: ""; position: absolute; left: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 65%); z-index: -1; } .sky-hbanner.is-light { color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M10 10l6 6M16 10l-6 6' stroke='%23000' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .sky-hbanner:hover { color: inherit; transform: translateY(-4px); box-shadow: var(--shadow-lg); } .sky-hbanner__text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; position: relative; z-index: 1; } .sky-hbanner__title { font-size: clamp(18px, .8vw + 12px, 24px); font-weight: 900; } .sky-hbanner__sub { font-size: 13.5px; opacity: .8; font-weight: 700; } .sky-hbanner__btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: #fff; color: var(--ink); padding: 8px 18px; border-radius: 12px; font-size: 13px; font-weight: 900; } .sky-hbanner.is-light .sky-hbanner__btn { background: var(--navy); color: #fff; } .sky-hbanner__btn .sky-i { width: 16px; height: 16px; } .sky-hbanner__img { width: 40%; max-width: 220px; display: flex; justify-content: center; align-self: stretch; align-items: flex-end; margin-block: -26px; } .sky-hbanner__img img { max-height: 210px; width: auto; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0,0,0,.25)); } .sky-hbanner__img .sky-art { height: 210px; width: auto; transition: transform .5s var(--ease); } .sky-hbanner:hover .sky-hbanner__img .sky-art { transform: translateY(-6px); } /* Ranking */ .sky-tw { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M10 10l6 6M16 10l-6 6' stroke='%232769CD' stroke-opacity='.07' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } .sky-tw__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 18px; padding-top: 36px; } .sky-rank { position: relative; --rc: var(--line); --rt: var(--ink); } .sky-rank--r1 { --rc: var(--sky-accent); --rt: var(--ink); } .sky-rank--r2 { --rc: var(--sky-primary); --rt: #fff; } .sky-rank--r3 { --rc: var(--navy); --rt: #fff; } .sky-rank--r4 { --rc: #cfd6e2; --rt: var(--ink); } .sky-rank__tab { position: absolute; bottom: calc(100% - 16px); right: 16px; left: 16px; height: 54px; padding: 7px 16px 0; border-radius: 18px 18px 0 0; background: var(--rc); color: var(--rt); display: flex; justify-content: space-between; align-items: flex-start; font-size: 13px; } .sky-rank__tab b { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; } .sky-rank__tab b .sky-i { width: 16px; height: 16px; } .sky-rank__tab small { opacity: .8; font-weight: 700; } .sky-rank--top::after { content: ""; position: absolute; bottom: -10px; right: 16px; left: 16px; height: 30px; background: var(--rc); border-radius: 0 0 22px 22px; z-index: 0; } .sky-rank__card { position: relative; z-index: 1; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 10px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); height: 100%; transition: box-shadow .3s; } .sky-rank__card:hover { box-shadow: var(--shadow); } .sky-rank__img { position: relative; border-radius: var(--r-md); overflow: hidden; background: #f2f4f8; min-height: 124px; } .sky-rank__img img, .sky-rank__img .sky-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .sky-rank__card:hover .sky-rank__img img { transform: scale(1.07); } .sky-rank__num { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.94); color: var(--ink); font-weight: 900; font-size: 13px; box-shadow: var(--shadow-sm); } .sky-rank__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .sky-rank__meta { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; } .sky-rank__label { color: var(--sky-primary); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sky-rank__title { font-weight: 800; color: var(--ink); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.7; } .sky-rank__sales { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; color: #d9480f; } .sky-rank__sales .sky-i { width: 14px; height: 14px; } .sky-rank__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--line); } .sky-rank .sky-add { width: 40px; height: 40px; border-radius: 13px; } .sky-rank .sky-cprice__now b { font-size: 15px; } /* Showcase */ .sky-scard { position: relative; display: block; aspect-ratio: 1 / .95; border-radius: 30px; overflow: hidden; background: var(--navy); } .sky-scard img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .sky-scard::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(8,12,24,.88)); } .sky-scard__title { position: absolute; z-index: 1; bottom: 18px; right: 18px; left: 18px; display: flex; align-items: center; justify-content: space-between; color: #fff; font-weight: 900; font-size: 18px; } .sky-scard__title .sky-i { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); transition: background .3s; } .sky-scard:hover img { transform: scale(1.07); } .sky-scard:hover .sky-scard__title .sky-i { background: var(--sky-accent); color: var(--ink); } /* Testimonials */ .sky-ts { --band: var(--sky-primary); } .sky-ts .sky-h2__icon { background: var(--p-50); color: var(--sky-primary); } .sky-ts__band { position: relative; padding-bottom: 22px; } .sky-ts__band::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 64%; border-radius: 0 0 48px 48px; background: var(--x-pattern), linear-gradient(135deg, var(--band), color-mix(in srgb, var(--band) 60%, #000)); } .sky-ts__band .sky-swiper { position: relative; } .sky-review { display: flex; flex-direction: column; gap: 12px; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 16px; box-shadow: 0 10px 30px -18px rgba(24,32,47,.25); } .sky-review__head { display: flex; align-items: center; gap: 10px; } .sky-review__avatar { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, var(--sky-accent), var(--a-600)); color: var(--ink); display: grid; place-items: center; flex: none; font-size: 19px; font-weight: 900; } .sky-review__who { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; margin-left: auto; } .sky-review__who b { color: var(--ink); font-size: 14.5px; } .sky-review__who small { display: inline-flex; align-items: center; gap: 3px; color: var(--success); font-size: 11.5px; font-weight: 700; } .sky-review__who small .sky-i { width: 13px; height: 13px; } .sky-review__text { margin: 0; flex: 1; background: var(--bg); border-radius: 18px; padding: 14px 16px; font-size: 14px; line-height: 2; min-height: 108px; position: relative; } .sky-review__product { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; } .sky-review__product > .sky-i { width: 18px; height: 18px; color: var(--muted); margin-right: auto; } .sky-review__pimg { width: 46px; height: 46px; border-radius: 13px; overflow: hidden; background: var(--bg); flex: none; } .sky-review__pimg img { width: 100%; height: 100%; object-fit: cover; } .sky-review__pname { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; } .sky-review__pname b { font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sky-review__pname small { font-size: 11.5px; color: var(--muted); } .sky-stars { position: relative; display: inline-flex; line-height: 0; flex: none; } .sky-stars__bg, .sky-stars__fg { display: inline-flex; gap: 2px; } .sky-stars .sky-i { width: 16px; height: 16px; stroke: none; } .sky-stars__bg { color: #dfe3ea; } .sky-stars__fg { position: absolute; top: 0; right: 0; width: var(--r); overflow: hidden; color: var(--sky-accent); } /* Brands */ .sky-brands__row { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 26px; align-items: center; } .sky-brands__title { display: block; font-size: 18px; font-weight: 900; color: var(--ink); margin-bottom: 8px; } .sky-brands__side p { font-size: 13.5px; line-height: 2.1; margin: 0; } .sky-brand { aspect-ratio: 1; display: grid; place-items: center; padding: 24px; background: #fff; border-radius: 26px; box-shadow: 0 16px 34px -18px rgba(24,32,47,.25); border: 1px solid var(--line); transition: transform .3s var(--ease); } .sky-brand img { max-height: 76px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .3s, opacity .3s; } .sky-brand:hover { transform: translateY(-4px); } .sky-brand:hover img { filter: none; opacity: 1; } .sky-brand__name { font-weight: 900; color: var(--ink); text-align: center; } /* About */ .sky-about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; } .sky-about__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .sky-about__brand .sky-logo__mark { width: 60px; height: 60px; border-radius: 20px; } .sky-about__brand small { display: block; color: var(--muted); font-weight: 700; font-size: 13px; } .sky-about__text p { font-size: 15px; line-height: 2.2; margin-bottom: 24px; text-align: justify; } .sky-video { position: relative; display: block; padding: 10px; border: 1px solid var(--line); border-radius: 32px; background: #fff; box-shadow: var(--shadow); } .sky-video[data-video] { cursor: pointer; } .sky-video img, .sky-video__ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 24px; display: block; } .sky-video__ph { display: grid; place-items: center; background: radial-gradient(80% 100% at 70% 20%, color-mix(in srgb, var(--sky-primary) 60%, #0b1330), #0d1428); } .sky-video__ph .sky-art { height: 80%; width: auto; } .sky-video__play { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; background: var(--sky-primary); color: #fff; box-shadow: 0 0 0 12px rgba(255,255,255,.25); transition: transform .3s var(--ease); } .sky-video:hover .sky-video__play { transform: translate(-50%, -50%) scale(1.08); } .sky-video__play .sky-i { width: 30px; height: 30px; } .sky-video__bar { position: absolute; bottom: 22px; right: 22px; left: 22px; display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: rgba(255,255,255,.95); border-radius: 18px; box-shadow: var(--shadow); } .sky-video__bar b { color: var(--ink); font-size: 14.5px; } .sky-video__bar small { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 800; } .sky-video__bar .sky-i { width: 16px; height: 16px; } /* Catalog */ .sky-catalog__box { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 36px; align-items: center; padding: 30px 40px; border-radius: 34px; background: linear-gradient(135deg, var(--bg), #fff); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .sky-catalog__img img { transform: rotate(6deg); border-radius: 10px; box-shadow: -12px 18px 30px rgba(0,0,0,.18); } .sky-catalog__book { aspect-ratio: 3/4; transform: rotate(6deg); border-radius: 8px 16px 16px 8px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; color: #fff; background: radial-gradient(90% 60% at 70% 20%, color-mix(in srgb, var(--sky-primary) 70%, #fff), var(--navy) 70%); box-shadow: -12px 18px 30px rgba(0,0,0,.2), inset 6px 0 0 rgba(255,255,255,.12); } .sky-catalog__book .sky-i { width: 40px; height: 40px; color: var(--sky-accent); margin-bottom: auto; } .sky-catalog__book b { font-weight: 900; } .sky-catalog__book small { font-size: 10px; letter-spacing: 3px; opacity: .7; direction: ltr; text-align: right; } .sky-catalog__text p { margin: 8px 0 0; line-height: 2; } .sky-catalog__btns { display: flex; flex-direction: column; gap: 10px; min-width: 240px; } .sky-catalog__btns .sky-btn { height: 50px; flex: none; } /* Blog + news */ .sky-blog__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .sky-blog__grid--full { grid-template-columns: minmax(0, 1fr); } .sky-post { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; transition: box-shadow .3s, transform .3s var(--ease); } .sky-post:hover { box-shadow: var(--shadow); transform: translateY(-3px); } .sky-post__img { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--bg); } .sky-post__img img, .sky-post__img .sky-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .sky-post:hover .sky-post__img img { transform: scale(1.06); } .sky-post__cat { position: absolute; bottom: 10px; right: 10px; background: rgba(255,255,255,.94); color: var(--ink); font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 8px; } .sky-post__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink); font-weight: 800; font-size: 15px; line-height: 1.75; margin: 12px 4px 6px; min-height: 3.5em; } .sky-post__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--muted); line-height: 2; margin: 0 4px 12px; text-align: justify; } .sky-post__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sky-post__time { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 12px; background: var(--bg); font-size: 12.5px; font-weight: 700; } .sky-post__time .sky-i { width: 16px; height: 16px; } .sky-news { background: var(--bg); border-radius: var(--r-lg); padding: 20px; margin-top: 4px; } .sky-news__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sky-news__title { font-size: 17px; font-weight: 900; color: var(--ink); background: linear-gradient(transparent 58%, var(--sky-accent) 58%); padding: 0 2px; } .sky-news__date { background: var(--sky-accent); color: var(--ink); font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 7px; } .sky-news__sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 4px; } .sky-news__list { margin: 12px 0 16px; } .sky-news__list li { border-bottom: 1px solid #dfe4ec; } .sky-news__list a { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 13.5px; font-weight: 700; color: var(--ink); } .sky-news__list a::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--sky-accent); flex: none; } .sky-news__list a span { flex: 1; min-width: 0; } .sky-news__list time { font-size: 11px; color: var(--muted); font-weight: 600; flex: none; } .sky-news__list a:hover { color: var(--sky-primary); } /* FAQ */ .sky-faq__in { max-width: 980px; } .sky-faq__list { display: grid; gap: 10px; } .sky-faq__item { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 0 20px; transition: box-shadow .3s, border-color .3s; } .sky-faq__item[open] { box-shadow: var(--shadow); border-color: transparent; } .sky-faq__item summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 16px 0; cursor: pointer; font-weight: 800; color: var(--ink); } .sky-faq__item summary::-webkit-details-marker { display: none; } .sky-faq__num { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--p-50); color: var(--sky-primary); font-weight: 900; flex: none; transition: background .2s, color .2s; } .sky-faq__item[open] .sky-faq__num { background: var(--sky-primary); color: #fff; } .sky-faq__q { flex: 1; } .sky-faq__item summary > .sky-i { width: 20px; height: 20px; color: var(--muted); transition: transform .25s; flex: none; } .sky-faq__item[open] summary > .sky-i { transform: rotate(180deg); color: var(--sky-primary); } .sky-faq__a { padding: 0 48px 18px 0; line-height: 2.1; } /* SEO box + collapsible */ .sky-seo__box { --fade: #fff; position: relative; text-align: center; } .sky-seo__box.is-boxed { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px 30px 22px; } .sky-seo__content { text-align: start; } [data-collapse] [data-collapse-body] { position: relative; overflow: hidden; transition: max-height .45s var(--ease); } [data-collapse].is-collapsible:not(.is-open) [data-collapse-body] { max-height: var(--h, 220px); } [data-collapse].is-collapsible:not(.is-open) [data-collapse-body]::after { content: ""; position: absolute; inset: auto 0 0; height: 100px; background: linear-gradient(transparent, var(--fade, #fff)); pointer-events: none; } [data-collapse]:not(.is-collapsible) [data-collapse-btn] { display: none; } [data-collapse] [data-collapse-btn] { margin-top: 12px; } [data-collapse] [data-collapse-btn] .sky-i { transition: transform .25s; } [data-collapse].is-open [data-collapse-btn] .sky-i { transform: rotate(180deg); } /* Prose */ .sky-prose { line-height: 2.1; color: var(--text); overflow-wrap: anywhere; } .sky-prose > *:last-child { margin-bottom: 0; } .sky-prose h1, .sky-prose h2 { font-size: 22px; margin-top: 1.2em; } .sky-prose h3 { font-size: 19px; margin-top: 1.1em; } .sky-prose h4, .sky-prose h5, .sky-prose h6 { font-size: 16px; margin-top: 1em; } .sky-prose a { color: var(--sky-primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--p-200); } .sky-prose ul { list-style: disc; padding-right: 1.4em; margin-bottom: 1em; } .sky-prose ol { list-style: decimal; padding-right: 1.4em; margin-bottom: 1em; } .sky-prose li::marker { color: var(--sky-primary); } .sky-prose img { border-radius: var(--r-md); height: auto; } .sky-prose blockquote { margin: 1.4em 0; padding: 16px 22px; border-right: 4px solid var(--sky-accent); background: var(--bg); border-radius: 14px; font-weight: 600; color: var(--ink); } .sky-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1em; } .sky-prose th, .sky-prose td { border: 1px solid var(--line); padding: 8px 12px; } .sky-prose strong { color: var(--ink); } /* ========================================================================== Footer ========================================================================== */ .sky-footer { padding-top: 76px; padding-bottom: 20px; } .sky-footer__box { position: relative; background: var(--navy); border-radius: 36px; padding: 0 34px 18px; color: #b9c2d4; isolation: isolate; } .sky-footer__box::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(55% 60% at 100% 0, color-mix(in srgb, var(--sky-primary) 28%, transparent), transparent), radial-gradient(40% 50% at 0 100%, color-mix(in srgb, var(--sky-accent) 10%, transparent), transparent); pointer-events: none; z-index: -1; } .sky-footer__watermark { position: absolute; left: 30px; bottom: 54px; z-index: -1; font-size: clamp(60px, 9vw, 150px); font-weight: 900; line-height: 1; letter-spacing: 4px; color: #fff; opacity: .035; direction: ltr; pointer-events: none; user-select: none; } .sky-footer__top { position: relative; display: flex; align-items: stretch; gap: 22px; transform: translateY(-38px); margin-bottom: -12px; } .sky-footer__brand { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 26px; background: var(--navy-2); box-shadow: 0 16px 34px -16px rgba(0,0,0,.6); color: #fff; font-size: 20px; font-weight: 900; } .sky-footer__brand:hover { color: #fff; } .sky-footer__brand img { max-height: 48px; width: auto; } .sky-footer__callbar { flex: 1; display: flex; align-items: center; gap: 18px; padding: 16px 22px; border-radius: 26px; background: var(--x-pattern), linear-gradient(135deg, var(--sky-primary), var(--p-800)); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--sky-primary) 80%, transparent); color: #fff; } .sky-footer__call-ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(255,255,255,.16); flex: none; } .sky-footer__call-ic .sky-i { width: 24px; height: 24px; } .sky-footer__calltext { font-weight: 900; font-size: 17px; margin-left: auto; } .sky-footer__callnum { direction: ltr; font-size: 25px; font-weight: 900; color: #fff; letter-spacing: 1px; } .sky-footer__callnum:hover { color: var(--sky-accent); } .sky-footer__grid { position: relative; display: grid; grid-template-columns: 1.35fr 1.1fr 1fr; gap: 40px; padding: 14px 0 28px; } .sky-footer__title { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 900; font-size: 16.5px; margin-bottom: 16px; } .sky-footer__title i { width: 16px; height: 5px; border-radius: 4px; background: var(--sky-accent); flex: none; } .sky-footer__title small { font-size: 12.5px; color: #8f9ab0; font-weight: 600; } .sky-footer__about p { font-size: 13.5px; line-height: 2.2; text-align: justify; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.08); } .sky-footer__contact { display: grid; gap: 12px; } .sky-footer__contact li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: #fff; font-weight: 700; } .sky-footer__contact small { display: block; color: #8f9ab0; font-weight: 600; font-size: 12px; } .sky-footer__ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.06); color: var(--sky-accent); } .sky-footer__ic .sky-i { width: 20px; height: 20px; } .sky-footer__links-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sky-menu--footer { display: grid; gap: 2px; } .sky-menu--footer .sky-mi__link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; color: #c9d1e1; font-weight: 600; transition: color .2s, transform .2s; } .sky-menu--footer .sky-mi__link::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: rgba(255,255,255,.2); transition: background .2s; } .sky-menu--footer .sky-mi__link:hover { color: var(--sky-accent); transform: translateX(-4px); } .sky-menu--footer .sky-mi__link:hover::before { background: var(--sky-accent); } .sky-menu--footer .sky-sub-wrap, .sky-menu--footer .sky-mi__toggle, .sky-menu--footer .sky-mi__caret { display: none; } .sky-footer__side { display: flex; flex-direction: column; gap: 14px; } .sky-footer__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sky-footer__stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); border-radius: 18px; padding: 12px 14px; } .sky-footer__stat b { display: flex; align-items: baseline; gap: 4px; color: #fff; font-weight: 800; font-size: 14px; } .sky-footer__stat em { font-style: normal; color: var(--sky-accent); font-size: 24px; font-weight: 900; } .sky-footer__stat small { color: #8f9ab0; font-size: 11.5px; } .sky-footer__trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); } .sky-footer__trust > * { aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: 16px; padding: 8px; overflow: hidden; } .sky-footer__trust img { max-width: 100%; max-height: 100%; object-fit: contain; } .sky-footer__bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #8f9ab0; } .sky-footer__top-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.06); color: #c9d1e1; font-weight: 700; font-size: 13px; } .sky-footer__top-btn:hover { background: var(--sky-accent); color: var(--ink); } .sky-footer__top-btn .sky-i { width: 16px; height: 16px; } .sky-socials { display: flex; gap: 8px; flex-wrap: wrap; } .sky-socials a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.06); color: #c9d1e1; transition: background .2s, color .2s; } .sky-socials a:hover { background: var(--sky-accent); color: var(--ink); } .sky-socials .sky-i { width: 20px; height: 20px; } /* ========================================================================== Modals, drawers, toast, floating contact ========================================================================== */ .sky-modal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; visibility: hidden; pointer-events: none; } .sky-modal.is-open { visibility: visible; pointer-events: auto; } .sky-modal__overlay { position: absolute; inset: 0; background: rgba(10,14,26,.6); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; } .sky-modal.is-open .sky-modal__overlay { opacity: 1; } .sky-modal__box { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(20px) scale(.97); transition: opacity .3s, transform .35s var(--ease); } .sky-modal.is-open .sky-modal__box { opacity: 1; transform: none; } .sky-modal__close { position: absolute; top: 12px; left: 12px; z-index: 3; background: var(--bg); } .sky-modal--video .sky-modal__box { width: min(980px, 100%); background: #000; } .sky-modal--video .sky-modal__content { aspect-ratio: 16 / 9; } .sky-modal--video video, .sky-modal--video iframe { width: 100%; height: 100%; border: 0; display: block; } .sky-modal--video .sky-modal__close { background: rgba(255,255,255,.9); } .sky-modal--qa .sky-modal__box { width: min(860px, 100%); } .sky-modal--qa [data-quick-body]:empty { min-height: 300px; } /* Auth */ .sky-modal--auth .sky-modal__box { width: min(820px, 100%); display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden; } .sky-auth__side { position: relative; padding: 34px 26px; color: #fff; background: var(--x-pattern), radial-gradient(90% 60% at 20% 0%, rgba(255,214,51,.25), transparent 60%), linear-gradient(160deg, var(--sky-primary), var(--p-800)); display: flex; flex-direction: column; gap: 10px; } .sky-auth__mark { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: var(--sky-accent); color: var(--ink); margin-bottom: 8px; } .sky-auth__mark .sky-i { width: 34px; height: 34px; } .sky-auth__side b { font-size: 20px; font-weight: 900; line-height: 1.6; } .sky-auth__side p { font-size: 13.5px; opacity: .88; margin: 0; } .sky-auth__side ul { margin-top: auto; display: grid; gap: 10px; } .sky-auth__side li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; } .sky-auth__side li .sky-i { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: rgba(255,255,255,.16); } .sky-auth__main { padding: 30px 30px 26px; } .sky-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--bg); border-radius: 16px; margin: 6px 0 22px 46px; } .sky-auth__tabs button { height: 42px; border-radius: 12px; font-weight: 800; color: var(--muted); transition: background .2s, color .2s; } .sky-auth__tabs button.is-active { background: #fff; color: var(--sky-primary); box-shadow: var(--shadow-sm); } .sky-auth__form { display: none; flex-direction: column; gap: 14px; } .sky-auth__form.is-active { display: flex; animation: skyFade .25s ease; } .sky-auth__form > label > span:first-child { display: block; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 6px; } .sky-input { position: relative; display: flex; align-items: center; } .sky-input > .sky-i { position: absolute; right: 14px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; } .sky-input input { width: 100%; height: 50px; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 44px; background: #fbfcfe; outline: 0; transition: border-color .2s, box-shadow .2s, background .2s; } .sky-input input:focus { border-color: var(--sky-primary); box-shadow: 0 0 0 4px var(--p-50); background: #fff; } .sky-input__eye { position: absolute; left: 8px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); } .sky-input__eye .sky-i { width: 19px; height: 19px; } .sky-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; } .sky-auth__row a { color: var(--sky-primary); font-weight: 700; } .sky-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; position: relative; } .sky-check input { position: absolute; opacity: 0; pointer-events: none; } .sky-check i { width: 20px; height: 20px; border-radius: 7px; border: 1.5px solid #cdd4df; display: grid; place-items: center; transition: background .2s, border-color .2s; flex: none; } .sky-check i::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; } .sky-check input:checked + i { background: var(--sky-primary); border-color: var(--sky-primary); } .sky-check input:checked + i::after { opacity: 1; } .sky-check input:focus-visible + i { outline: 2px solid var(--sky-primary); outline-offset: 2px; } .sky-auth__msg { margin: 0; min-height: 1.6em; font-size: 13px; font-weight: 700; color: var(--danger); } .sky-auth__msg.is-ok { color: var(--success); } .sky-auth__note, .sky-auth__privacy { font-size: 12.5px; color: var(--muted); margin: 0; } .sky-auth form.is-busy button[type=submit] { opacity: .6; pointer-events: none; } /* Share */ .sky-modal--share .sky-modal__box { width: min(460px, 100%); padding: 26px 24px 22px; } .sky-share__title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 900; color: var(--ink); } .sky-share__title .sky-i { width: 40px; height: 40px; padding: 10px; border-radius: 13px; background: var(--p-50); color: var(--sky-primary); } .sky-share__text { margin: 12px 0 10px; font-size: 13.5px; } .sky-share__copy { display: flex; gap: 8px; padding: 6px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--bg); } .sky-share__copy input { flex: 1; min-width: 0; border: 0; background: none; font-size: 13px; padding: 0 8px; outline: 0; color: var(--text); } .sky-share__copy .sky-btn.is-copied { background: var(--success); } .sky-share__nets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 18px; } .sky-share__net { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--text); } .sky-share__net span { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--c, var(--sky-primary)); transition: transform .2s; } .sky-share__net:hover span { transform: translateY(-3px); } .sky-share__net .sky-i { width: 22px; height: 22px; } .sky-share__net--telegram { --c: #2aa3e0; } .sky-share__net--whatsapp { --c: #25d366; } .sky-share__net--twitter { --c: #111; } .sky-share__net--facebook { --c: #1877f2; } .sky-share__net--linkedin { --c: #0a66c2; } .sky-share__net--email { --c: #7c5cff; } /* Quick add */ .sky-qa { display: grid; grid-template-columns: 1fr 1.1fr; } .sky-qa__img { background: var(--bg); } .sky-qa__img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; } .sky-qa__body { padding: 28px 26px 22px; display: flex; flex-direction: column; gap: 14px; } .sky-qa__cat { font-size: 12.5px; color: var(--sky-primary); font-weight: 800; } .sky-qa__title { font-size: 18px; font-weight: 900; color: var(--ink); line-height: 1.6; margin-top: -8px; } .sky-qa__label { display: block; font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px; } .sky-qa__label b { color: var(--sky-primary); } .sky-qa__actions { display: flex; gap: 10px; } .sky-qa__actions .sky-btn { flex: 1; height: 52px; } .sky-qa__msg { font-size: 12.5px; color: var(--muted); font-weight: 700; } .sky-qa__msg.is-err { color: var(--danger); } /* Swatches (shared) */ .sky-swatches { display: flex; flex-wrap: wrap; gap: 8px; } .sky-sw { min-width: 44px; height: 42px; padding: 0 14px; border-radius: 13px; border: 1.5px solid var(--line); background: #fff; font-weight: 800; font-size: 13.5px; color: var(--ink); transition: border-color .2s, background .2s, color .2s, box-shadow .2s; } .sky-sw:hover { border-color: var(--p-200); } .sky-sw.is-active { border-color: var(--sky-primary); background: var(--p-50); color: var(--sky-primary); box-shadow: 0 0 0 3px var(--p-50); } .sky-sw.is-disabled { opacity: .35; text-decoration: line-through; } .sky-sw--color { width: 42px; min-width: 42px; padding: 0; border-radius: 50%; position: relative; border: 3px solid #fff; box-shadow: 0 0 0 1.5px var(--line); background: var(--c); } .sky-sw--color.is-active { box-shadow: 0 0 0 2.5px var(--sky-primary); background: var(--c); } .sky-sw--color.is-active::after { content: ""; position: absolute; inset: 0; margin: auto; width: 12px; height: 7px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-2px) rotate(-45deg); filter: drop-shadow(0 0 1px rgba(0,0,0,.6)); } .sky-qty { display: inline-flex; align-items: center; gap: 2px; height: 42px; padding: 3px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; } .sky-qty button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--sky-primary); } .sky-qty button:hover { background: var(--p-50); } .sky-qty button[disabled] { opacity: .35; pointer-events: none; } .sky-qty .sky-i { width: 17px; height: 17px; } .sky-qty b { min-width: 26px; text-align: center; font-weight: 900; color: var(--ink); } .sky-qty--lg { height: 52px; } .sky-qty--lg button { height: 44px; width: 40px; } /* Cart drawer */ .sky-cartd { position: fixed; inset: 0; z-index: 260; visibility: hidden; pointer-events: none; overflow: hidden; } .sky-cartd.is-open { visibility: visible; pointer-events: auto; } .sky-cartd__overlay { position: absolute; inset: 0; background: rgba(10,14,26,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; } .sky-cartd.is-open .sky-cartd__overlay { opacity: 1; } .sky-cartd__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(94vw, 430px); background: #fff; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .4s var(--ease); box-shadow: var(--shadow-lg); } .sky-cartd.is-open .sky-cartd__panel { transform: none; } .sky-cartd__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); } .sky-cartd__title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 900; color: var(--ink); } .sky-cartd__title > .sky-i { width: 40px; height: 40px; padding: 9px; border-radius: 13px; background: var(--p-50); color: var(--sky-primary); } .sky-cartd__title small { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 9px; background: var(--sky-accent); color: var(--ink); font-size: 12.5px; display: grid; place-items: center; } .sky-cartd__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; transition: opacity .2s; } .sky-cartd__body.is-busy { opacity: .55; pointer-events: none; } .sky-cartd__inner { display: flex; flex-direction: column; min-height: 100%; } .sky-cartd__inner > .sky-freeship { margin: 14px 18px 0; } .sky-cartd__items { padding: 6px 18px; } .sky-cartd__item { position: relative; display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); } .sky-cartd__img { width: 78px; height: 78px; flex: none; border-radius: 16px; overflow: hidden; background: var(--bg); } .sky-cartd__img img { width: 100%; height: 100%; object-fit: cover; } .sky-cartd__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-left: 26px; } .sky-cartd__name { font-weight: 800; font-size: 13.5px; color: var(--ink); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sky-cartd__meta { font-size: 12px; color: var(--muted); } .sky-cartd__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } .sky-cartd__row .sky-qty { height: 38px; } .sky-cartd__row .sky-qty button { width: 30px; height: 30px; } .sky-cartd__price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.4; } .sky-cartd__price del { font-size: 11.5px; color: var(--muted); } .sky-cartd__price b { font-size: 14.5px; font-weight: 900; color: var(--ink); } .sky-cartd__remove { position: absolute; top: 14px; left: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--muted); } .sky-cartd__remove:hover { background: color-mix(in srgb, var(--danger) 10%, #fff); color: var(--danger); } .sky-cartd__remove .sky-i { width: 16px; height: 16px; } .sky-cartd__foot { position: sticky; bottom: 0; margin-top: auto; padding: 14px 18px 18px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -12px 24px -16px rgba(24,32,47,.18); display: flex; flex-direction: column; gap: 12px; } .sky-cartd__coupon summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--sky-primary); } .sky-cartd__coupon summary::-webkit-details-marker { display: none; } .sky-cartd__coupon summary .sky-i { width: 18px; height: 18px; } .sky-cartd__coupon summary .sky-i:last-child { margin-right: auto; transition: transform .2s; } .sky-cartd__coupon[open] summary .sky-i:last-child { transform: rotate(180deg); } .sky-cartd__coupon-in { display: flex; gap: 8px; margin-top: 10px; } .sky-cartd__coupon-in input { flex: 1; min-width: 0; height: 42px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 12px; outline: 0; } .sky-cartd__coupon-in input:focus { border-color: var(--sky-primary); } .sky-cartd__chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; margin-left: 6px; padding: 4px 6px 4px 10px; border-radius: 10px; background: color-mix(in srgb, var(--success) 10%, #fff); color: var(--success); font-weight: 800; font-size: 12.5px; } .sky-cartd__chip button { width: 20px; height: 20px; display: grid; place-items: center; color: inherit; } .sky-cartd__chip .sky-i { width: 14px; height: 14px; } .sky-cartd__totals { margin: 0; display: grid; gap: 6px; } .sky-cartd__totals > div { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; } .sky-cartd__totals dt { color: var(--muted); font-weight: 700; } .sky-cartd__totals dd { margin: 0; font-weight: 800; color: var(--ink); } .sky-cartd__totals .is-save dd, .sky-cartd__totals .is-save dt { color: var(--success); } .sky-cartd__totals .is-total { padding-top: 8px; border-top: 1px dashed var(--line); font-size: 15px; } .sky-cartd__totals .is-total dd { font-size: 18px; font-weight: 900; } .sky-cartd__btns { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; } .sky-cartd__btns .sky-btn { height: 50px; padding: 0 12px; } .sky-cartd__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 30px; } .sky-cartd__empty-ic { width: 96px; height: 96px; border-radius: 32px; display: grid; place-items: center; background: var(--p-50); color: var(--sky-primary); margin-bottom: 8px; } .sky-cartd__empty-ic .sky-i { width: 46px; height: 46px; } .sky-cartd__empty b { font-size: 17px; color: var(--ink); } .sky-cartd__empty p { font-size: 13px; margin: 0 0 6px; } .sky-cartd__empty .sky-btn { width: 220px; } .sky-freeship { padding: 12px 14px; border-radius: 16px; background: var(--a-100); font-size: 13px; color: var(--ink); } .sky-freeship__text { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; } .sky-freeship__text .sky-i { width: 20px; height: 20px; color: var(--a-700); } .sky-freeship i { display: block; height: 7px; border-radius: 99px; background: rgba(0,0,0,.08); position: relative; overflow: hidden; } .sky-freeship i::after { content: ""; position: absolute; inset: 0 0 0 auto; width: var(--w); background: linear-gradient(90deg, var(--sky-primary), var(--a-600)); border-radius: inherit; transition: width .5s var(--ease); } .sky-freeship.is-done { background: color-mix(in srgb, var(--success) 10%, #fff); } .sky-freeship.is-done i::after { background: var(--success); } /* Toast */ .sky-toast { position: fixed; bottom: 26px; left: 50%; z-index: 400; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 12px 14px 12px 18px; border-radius: 18px; background: var(--navy); color: #fff; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-lg); transform: translate(-50%, 160px); opacity: 0; visibility: hidden; transition: transform .4s var(--ease), opacity .3s, visibility .4s; } .sky-toast:empty { display: none; } .sky-toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; } .sky-toast.is-error { background: var(--danger); } .sky-toast .sky-i { width: 22px; height: 22px; color: var(--sky-accent); } .sky-toast a { color: var(--sky-accent); font-weight: 900; margin-right: 6px; white-space: nowrap; } /* Floating contact */ /* Floating contact. Container never blocks the page: only the real buttons take clicks. */ .sky-float { --fx: 24px; position: fixed; bottom: 24px; right: var(--fx); z-index: 150; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; direction: rtl; pointer-events: none; width: max-content; max-width: calc(100vw - 2 * var(--fx)); } .sky-float--left { right: auto; left: var(--fx); align-items: flex-end; } .sky-float__list { display: flex; flex-direction: column; gap: 10px; align-items: inherit; margin: 0; padding: 0 4px 0 0; list-style: none; } .sky-float--left .sky-float__list { padding: 0 0 0 4px; } .sky-float__list li { opacity: 0; visibility: hidden; transform: translateY(16px) scale(.6); pointer-events: none; transition: opacity .25s, transform .35s var(--ease), visibility .35s; transition-delay: calc(var(--i) * 30ms); } .sky-float:not(.is-open) .sky-float__list { position: absolute; bottom: 100%; height: 0; overflow: visible; } .sky-float.is-open .sky-float__list li { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* RTL flow: right side → icon on the edge (right), label on its left; left side → icon left, label right. */ .sky-float__list a, .sky-float__toggle { display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; pointer-events: auto; } .sky-float--left .sky-float__list a, .sky-float--left .sky-float__toggle { flex-direction: row; } .sky-float__ic { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; box-shadow: 0 10px 22px -6px color-mix(in srgb, var(--c) 80%, transparent); transition: transform .2s; } .sky-float__ic .sky-i { width: 25px; height: 25px; } .sky-float__list a:hover .sky-float__ic { transform: scale(1.08); } .sky-float__label { padding: 6px 12px; border-radius: 12px; background: #fff; color: var(--ink); font-weight: 800; font-size: 13px; box-shadow: var(--shadow); white-space: nowrap; } .sky-float__toggle { padding: 0; border: 0; background: none; cursor: pointer; } .sky-float__main { flex: none; position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sky-primary), var(--p-800)); box-shadow: 0 14px 30px -8px color-mix(in srgb, var(--sky-primary) 85%, transparent); } .sky-float__main::before { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: skyPulse 2.2s infinite; } @keyframes skyPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sky-primary) 45%, transparent); } 70% { box-shadow: 0 0 0 16px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .sky-float__main .sky-i { position: absolute; width: 27px; height: 27px; transition: opacity .25s, transform .3s var(--ease); } .sky-float__close { opacity: 0; transform: rotate(-90deg); } .sky-float.is-open .sky-float__open { opacity: 0; transform: rotate(90deg); } .sky-float.is-open .sky-float__close { opacity: 1; transform: none; } .sky-float__label--main { transition: opacity .2s; } .sky-float.is-open .sky-float__label--main { opacity: 0; pointer-events: none; } .sky-mobilebar, .sky-stickybuy { display: none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1279px) { .sky-header__support, .sky-topbar__hours { display: none; } .sky-catmenu__panel { grid-template-columns: 220px minmax(0, 1fr); } .sky-catmenu__promo { display: none; } } @media (max-width: 1199px) { .sky-tw__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sky-brands__row { grid-template-columns: minmax(0, 1fr); } .sky-footer__grid { grid-template-columns: 1fr 1fr; } .sky-footer__side { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: start; } .sky-blog__grid { grid-template-columns: minmax(0, 1fr); } .sky-cbanners__grid { gap: 16px; } .sky-cbanner__text { max-width: 60%; } } @media (max-width: 991px) { :root { --header-h: 72px; } .sky-navbar, .sky-topbar__nav { display: none; } .sky-header__burger { display: inline-grid; } .sky-topbar__in { justify-content: center; } .sky-pill__label { display: none; } .sky-pill { padding: 0 12px; } .sky-pill--cart { padding: 0 6px; } .sky-cbanners__grid { grid-template-columns: minmax(0, 1fr); gap: 54px; } .sky-hbanners__grid { grid-template-columns: minmax(0, 1fr); } .sky-about__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } .sky-catalog__box { grid-template-columns: 120px 1fr; padding: 22px; gap: 22px; } .sky-catalog__btns { grid-column: 1 / -1; flex-direction: row; min-width: 0; } .sky-catalog__btns .sky-btn { flex: 1 1 0; } .sky-modal--auth .sky-modal__box { grid-template-columns: minmax(0, 1fr); } .sky-auth__side { display: none; } .sky-mobilebar { position: fixed; bottom: 0; right: 0; left: 0; z-index: 90; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(24,32,47,.06); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); } .sky-mobilebar > * { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; font-size: 11px; font-weight: 800; color: var(--text); } .sky-mobilebar > .is-active { color: var(--sky-primary); } .sky-mobilebar .sky-i { width: 23px; height: 23px; } .sky-mobilebar__ic { position: relative; } .sky-mobilebar .sky-cart-count { top: -6px; right: -12px; } body:has(.sky-mobilebar) { padding-bottom: 68px; } .sky-float { --fx: 14px; bottom: 86px; } .sky-float__list, .sky-float--left .sky-float__list { padding: 0; } .sky-float__main { width: 54px; height: 54px; } .sky-float__label--main { display: none; } .sky-qa { grid-template-columns: minmax(0, 1fr); } .sky-qa__img img { aspect-ratio: 16 / 10; } } @media (max-width: 767px) { :root { --gutter: 14px; } body { font-size: 14px; } .sky-section { padding-block: 22px; } .sky-campaign__in { gap: 10px; padding-left: 40px; justify-content: flex-start; } .sky-campaign__hl { font-size: 20px; } .sky-campaign__text { font-size: 13px; } .sky-campaign__btn, .sky-campaign .sky-countdown { display: none; } .sky-topbar { display: none; } .sky-header__main { flex-wrap: wrap; gap: 8px; padding-block: 10px; min-height: 0; } .sky-logo img { max-height: 40px; } .sky-logo__text small { display: none; } .sky-logo__mark { width: 40px; height: 40px; border-radius: 13px; } .sky-search { order: 5; flex: 1 1 100%; } .sky-search input { height: 48px; } .sky-account { display: none; } .sky-header__actions.is-product .sky-account { display: block; } .sky-pill { height: 44px; } .sky-hero__slides { aspect-ratio: 16 / 11; border-radius: 24px; min-height: 0; } .sky-hero::after { border-radius: 24px; } .sky-hero__text, .sky-hero__text.has-img { width: 100%; inset-block: auto 0; padding: 24px 20px 52px; background: linear-gradient(transparent, rgba(8,14,30,.78)); } .sky-hero__slide--default .sky-hero__text { background: none; } .sky-hero__art { left: 50%; transform: translateX(-50%); width: 60%; opacity: .45; } .sky-hero__ctrl { left: 50%; bottom: 12px; transform: translateX(-50%); padding: 4px 8px; gap: 6px; } .sky-hero__arrow, .sky-hero__count { display: none; } .sky-hero__dots .swiper-pagination-bullet-active { width: 28px; } .sky-head { margin-bottom: 16px; } .sky-head .sky-head__more { display: none; } .sky-head--line::after { display: none; } .sky-head__tools .sky-nav-btn { width: 38px; height: 38px; border-radius: 12px; } .sky-ghost { font-size: 36px; } .sky-h2__icon { width: 34px; height: 34px; border-radius: 11px; } .sky-cats { --tile: 86px; } .sky-cat__name { font-size: 12px; } .sky-nav-btns--float { display: none; } .sky-ws__head { flex-direction: column; align-items: stretch; } .sky-ws__tab { justify-content: space-between; border-radius: 24px 24px 0 0; padding: 12px; gap: 10px; } .sky-ws__tab::after, .sky-ws__tab-label { display: none; } .sky-ws__tab .sky-countdown__u { min-width: 40px; height: 42px; } .sky-ws__btn { height: 42px; padding: 0 12px; font-size: 12.5px; } .sky-ws__band { border-radius: 0 0 26px 26px; padding: 16px 12px; } .sky-cbanner { min-height: 160px; padding: 22px; } .sky-ao__wrap { grid-template-columns: minmax(0, 1fr); padding: 10px; border-radius: 26px; } .sky-ao__intro { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 16px; } .sky-ao__blob { width: 52px; height: 52px; border-radius: 18px; margin: 0; } .sky-ao__blob .sky-i { width: 28px; height: 28px; } .sky-ao__title { font-size: 21px; } .sky-ao__title em { display: inline; } .sky-ao__sub { margin: 0; flex-basis: 100%; } .sky-ao__intro .sky-countdown { margin: 0; } .sky-ao__all { margin: 0 auto 0 0; } .sky-hbanner { padding: 22px; min-height: 150px; } .sky-tw__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .sky-catalog__box { grid-template-columns: minmax(0, 1fr); text-align: center; } .sky-catalog__img { max-width: 120px; margin: 0 auto; } .sky-catalog__btns { flex-direction: column; } .sky-catalog__btns .sky-btn { flex: none; width: 100%; } .sky-faq__a { padding-right: 0; } .sky-card { padding: 8px; border-radius: 18px; } .sky-card__body { padding: 10px 2px 8px; } .sky-card__title { font-size: 13px; } .sky-cprice__now b { font-size: 15px; } .sky-add { width: 40px; height: 40px; border-radius: 13px; } .sky-badge { height: 22px; font-size: 10.5px; padding: 0 7px; } .sky-footer { padding-top: 60px; } .sky-footer__box { padding: 0 16px 18px; border-radius: 26px; } .sky-footer__watermark { bottom: 70px; left: 50%; transform: translateX(-50%); } .sky-footer__top { flex-direction: column; gap: 10px; } .sky-footer__brand { align-self: center; order: 2; } .sky-footer__callbar { flex-wrap: wrap; justify-content: center; text-align: center; gap: 10px; padding: 18px; } .sky-footer__call-ic { display: none; } .sky-footer__calltext { margin: 0; flex-basis: 100%; font-size: 15px; } .sky-footer__callnum { font-size: 21px; } .sky-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .sky-footer__side { display: flex; } .sky-footer__links-wrap { grid-template-columns: 1fr 1fr; gap: 12px; } .sky-footer__bottom { flex-direction: column; text-align: center; } .sky-share__nets { grid-template-columns: repeat(3, 1fr); row-gap: 14px; } .sky-auth__main { padding: 22px 18px; } .sky-toast { bottom: 84px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Currency symbol spacing everywhere */ .woocommerce-Price-currencySymbol { margin-inline: 3px; font-size: .78em; font-weight: 600; opacity: .8; } .sky-catmenu__prod small ins { text-decoration: none; } .sky-catmenu__prod small del { display: none; } /* ---------- Speed: no layout shift before carousels start (CLS) ---------- */ .sky-swiper:not(.swiper-initialized):not(.sky-swiper--auto) { --spv: var(--spv-m, 1.7); --g: var(--sg-m, 12px); } .sky-swiper:not(.swiper-initialized):not(.sky-swiper--auto) > .swiper-wrapper { gap: var(--g); } .sky-swiper:not(.swiper-initialized):not(.sky-swiper--auto) > .swiper-wrapper > .swiper-slide { flex: 0 0 auto; width: calc((100% - var(--g) * (var(--spv) - 1)) / var(--spv)); } .sky-swiper--auto:not(.swiper-initialized) > .swiper-wrapper { gap: 12px; } .sky-swiper:not(.swiper-initialized) > .swiper-wrapper { display: flex; } .sky-swiper--auto:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { flex: 0 0 auto; } @media (min-width: 600px) { .sky-swiper:not(.swiper-initialized):not(.sky-swiper--auto) { --spv: var(--spv-s, 2.3); --g: var(--sg, 16px); } } @media (min-width: 768px) { .sky-swiper:not(.swiper-initialized):not(.sky-swiper--auto) { --spv: var(--spv-t, 3); } .sky-swiper--auto:not(.swiper-initialized) > .swiper-wrapper { gap: var(--sg, 16px); } } @media (min-width: 992px) { .sky-swiper:not(.swiper-initialized):not(.sky-swiper--auto) { --spv: var(--spv-l, 4); } } @media (min-width: 1200px) { .sky-swiper:not(.swiper-initialized):not(.sky-swiper--auto) { --spv: var(--spv-d, 5); } } .sky-hero__slides:not(.swiper-initialized) .swiper-slide ~ .swiper-slide { visibility: hidden; } /* Faster rendering of below-the-fold home sections */ .sky-cv .sky-home > .sky-section:nth-child(n+4), .sky-cv .elementor-widget[class*="elementor-widget-sky-"]:nth-child(n+5) .sky-section, .sky-cv .sky-footer { content-visibility: auto; contain-intrinsic-size: auto 640px; } /* ---------- Wishlist heart ---------- */ .sky-wish { display: grid; place-items: center; color: var(--muted); transition: color .2s, background .2s, transform .2s; } .sky-wish .sky-i { width: 20px; height: 20px; transition: fill .2s; } .sky-wish:hover { color: #e5487a; } .sky-wish.is-on { color: #e5487a; } .sky-wish.is-on .sky-i { fill: currentColor; } .sky-wish.is-pop { animation: skyHeartPop .4s var(--ease); } @keyframes skyHeartPop { 40% { transform: scale(1.25); } } .sky-card__wish { position: absolute; top: 10px; left: 10px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(24,32,47,.12); opacity: 0; transform: translateY(-4px); } .sky-card:hover .sky-card__wish, .sky-card__wish.is-on, .sky-card__wish:focus-visible { opacity: 1; transform: none; } .sky-card__wish .sky-i { width: 18px; height: 18px; } @media (hover: none) { .sky-card__wish { opacity: 1; transform: none; } }