/* ============================================================================ Modern Shop — storefront theme stylesheet (hand-written, committed, static). Everything visual reads design tokens injected as --sf-* variables by the theme layout (validated server-side). Presets only change tokens + the data-* attributes on ; the layout is the same Modern Shop. RTL-first (dir="rtl"), logical properties throughout. ========================================================================== */ /* ---------- derived tokens ---------- */ :root { --sf-primary-soft: color-mix(in srgb, var(--sf-primary) 12%, var(--sf-bg)); --sf-primary-hover: color-mix(in srgb, var(--sf-primary) 86%, black); --sf-accent-soft: color-mix(in srgb, var(--sf-accent) 14%, var(--sf-bg)); --sf-accent-hover: color-mix(in srgb, var(--sf-accent) 86%, black); --sf-surface-2: color-mix(in srgb, var(--sf-surface) 94%, var(--sf-ink)); --sf-band: color-mix(in srgb, var(--sf-bg) 92%, var(--sf-ink)); --sf-ink-2: color-mix(in srgb, var(--sf-ink) 72%, var(--sf-bg)); --sf-shadow-sm: 0 1px 2px color-mix(in srgb, var(--sf-ink) 8%, transparent), 0 1px 1px color-mix(in srgb, var(--sf-ink) 4%, transparent); --sf-shadow-md: 0 8px 24px -8px color-mix(in srgb, var(--sf-ink) 22%, transparent), 0 2px 6px color-mix(in srgb, var(--sf-ink) 6%, transparent); --sf-shadow-lg: 0 24px 48px -20px color-mix(in srgb, var(--sf-ink) 32%, transparent); --sf-r: var(--sf-radius, 14px); --sf-r-sm: calc(var(--sf-r) * 0.55); --sf-r-lg: calc(var(--sf-r) * 1.4); --sf-container: 1200px; --sf-gutter: 20px; --sf-space: 80px; --sf-space-sm: 48px; --sf-fs: 16px; --sf-ease: cubic-bezier(.2, .7, .2, 1); --sf-wa: #1fa956; --sf-wa-hover: #188a46; --sf-wa-ink: #ffffff; } html[data-density="compact"] { --sf-space: 56px; --sf-space-sm: 36px; } html[data-density="airy"] { --sf-space: 104px; --sf-space-sm: 64px; } html[data-scale="sm"] { --sf-fs: 15px; } html[data-scale="lg"] { --sf-fs: 17px; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.ms-body { margin: 0; background: var(--sf-bg); color: var(--sf-ink); font-family: var(--sf-font); font-size: var(--sf-fs); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 800; letter-spacing: -0.005em; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; } .ms-container { width: min(100% - 2 * var(--sf-gutter), var(--sf-container)); margin-inline: auto; } .ms-narrow { max-width: 960px; } .ms-main { min-height: 50vh; } .ms-muted { color: var(--sf-muted); } .ms-small { font-size: .85rem; } .ms-center { text-align: center; } .ms-ta-end { text-align: end; } .ms-icon { flex: none; } .ms-icon--up { transform: rotate(90deg); } :focus-visible { outline: 3px solid color-mix(in srgb, var(--sf-accent) 60%, transparent); outline-offset: 2px; border-radius: 6px; } /* ---------- reveal ---------- */ .ms-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--sf-ease), transform .55s var(--sf-ease); } .ms-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ms-reveal { opacity: 1; transform: none; transition: none; } } /* ---------- buttons ---------- */ .ms-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: var(--sf-r-sm); border: 1.5px solid transparent; font-weight: 700; font-size: .96rem; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: transform .15s var(--sf-ease), background-color .15s, color .15s, box-shadow .15s, border-color .15s; } .ms-btn:hover { transform: translateY(-1px); } .ms-btn:active { transform: translateY(0); } .ms-btn--primary { background: var(--sf-primary); color: var(--sf-primary-ink); box-shadow: var(--sf-shadow-sm); } .ms-btn--primary:hover { background: var(--sf-primary-hover); } .ms-btn--accent { background: var(--sf-accent); color: var(--sf-accent-ink); box-shadow: var(--sf-shadow-sm); } .ms-btn--accent:hover { background: var(--sf-accent-hover); } .ms-btn--wa { background: var(--sf-wa); color: var(--sf-wa-ink); box-shadow: var(--sf-shadow-sm); } .ms-btn--wa:hover { background: var(--sf-wa-hover); color: var(--sf-wa-ink); } html[data-button="outline"] .ms-btn--wa { background: transparent; color: var(--sf-wa); border-color: var(--sf-wa); box-shadow: none; } html[data-button="outline"] .ms-btn--wa:hover { background: var(--sf-wa); color: var(--sf-wa-ink); } .ms-btn--ghost { background: transparent; color: var(--sf-ink); border-color: var(--sf-line); } .ms-btn--ghost:hover { border-color: var(--sf-ink-2); background: var(--sf-surface); } .ms-btn--sm { min-height: 38px; padding: 7px 14px; font-size: .88rem; } .ms-btn--lg { min-height: 52px; padding: 12px 26px; font-size: 1.04rem; } .ms-btn--block { width: 100%; } .ms-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none !important; } html[data-button="pill"] .ms-btn { border-radius: 999px; } html[data-button="outline"] .ms-btn--primary { background: transparent; color: var(--sf-primary); border-color: var(--sf-primary); box-shadow: none; } html[data-button="outline"] .ms-btn--primary:hover { background: var(--sf-primary); color: var(--sf-primary-ink); } html[data-button="outline"] .ms-btn--accent { background: transparent; color: var(--sf-accent); border-color: var(--sf-accent); box-shadow: none; } html[data-button="outline"] .ms-btn--accent:hover { background: var(--sf-accent); color: var(--sf-accent-ink); } .ms-icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--sf-r-sm); border: 1.5px solid var(--sf-line); background: var(--sf-surface); cursor: pointer; } /* ---------- chips / badges / states ---------- */ .ms-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--sf-primary-soft); color: var(--sf-primary); } .ms-chip--ghost { background: var(--sf-surface-2); color: var(--sf-ink-2); } .ms-chip--soft { background: var(--sf-accent-soft); color: var(--sf-accent-hover); } .ms-chip--soon { background: color-mix(in srgb, var(--sf-price) 16%, var(--sf-surface)); color: color-mix(in srgb, var(--sf-price) 80%, var(--sf-ink)); } .ms-chip--discount { background: var(--sf-danger); color: #fff; font-size: .72rem; padding: 2px 8px; } .ms-chip--lg { padding: 8px 14px; font-size: .9rem; background: var(--sf-surface); border: 1px solid var(--sf-line); color: var(--sf-ink); } .ms-chip--lg:hover { border-color: var(--sf-primary); color: var(--sf-primary); } .ms-badge { position: absolute; inset-inline-start: 12px; top: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; background: var(--sf-primary); color: var(--sf-primary-ink); font-size: .74rem; font-weight: 800; box-shadow: var(--sf-shadow-sm); } .ms-badge--soft { background: var(--sf-surface); color: var(--sf-primary); } .ms-state { position: absolute; inset-inline-end: 12px; top: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; font-size: .74rem; font-weight: 800; } .ms-state--sold { background: var(--sf-danger); color: #fff; } .ms-state--soon { background: var(--sf-ink); color: var(--sf-bg); } .ms-status { display: inline-flex; padding: 6px 14px; border-radius: 999px; font-weight: 800; font-size: .84rem; } .ms-status--ok { background: color-mix(in srgb, var(--sf-success) 16%, var(--sf-surface)); color: var(--sf-success); } .ms-status--warn { background: color-mix(in srgb, var(--sf-price) 18%, var(--sf-surface)); color: color-mix(in srgb, var(--sf-price) 80%, var(--sf-ink)); } .ms-status--muted { background: var(--sf-surface-2); color: var(--sf-muted); } /* ---------- alerts ---------- */ .ms-alert { margin: 16px 0; padding: 12px 16px; border-radius: var(--sf-r-sm); font-size: .92rem; border: 1px solid; } .ms-alert--ok { background: color-mix(in srgb, var(--sf-success) 12%, var(--sf-surface)); border-color: color-mix(in srgb, var(--sf-success) 40%, transparent); color: var(--sf-success); } .ms-alert--err { background: color-mix(in srgb, var(--sf-danger) 10%, var(--sf-surface)); border-color: color-mix(in srgb, var(--sf-danger) 40%, transparent); color: var(--sf-danger); } .ms-alert--info { background: var(--sf-primary-soft); border-color: color-mix(in srgb, var(--sf-primary) 30%, transparent); color: var(--sf-ink); } /* ---------- preview bar ---------- */ .ms-preview { background: #15171c; color: #f4f5f7; font-size: .84rem; } .ms-preview__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 42px; padding: 6px 0; } .ms-preview__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .ms-preview__presets { display: inline-flex; gap: 6px; flex-wrap: wrap; } .ms-preview__preset { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); } .ms-preview__preset.is-active { background: #ffffff; color: #15171c; } .ms-preview__actions { margin-inline-start: auto; display: inline-flex; gap: 14px; } .ms-preview__link { text-decoration: underline; text-underline-offset: 3px; } .ms-preview__exit { font-weight: 700; } /* ---------- announcement ---------- */ .ms-announce { background: var(--sf-primary); color: var(--sf-primary-ink); text-align: center; font-size: .9rem; font-weight: 700; padding: 8px 0; } .ms-announce__link { text-decoration: underline; text-underline-offset: 3px; } /* ---------- header ---------- */ .ms-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--sf-bg) 84%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; } .ms-header.is-scrolled { border-bottom-color: var(--sf-line); box-shadow: var(--sf-shadow-sm); } .ms-header__inner { display: flex; align-items: center; gap: 22px; min-height: 72px; } .ms-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; } .ms-brand__logo { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; box-shadow: var(--sf-shadow-sm); } .ms-brand__mark { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(145deg, var(--sf-primary), var(--sf-accent)); color: #fff; font-weight: 800; font-size: 1.25rem; box-shadow: var(--sf-shadow-sm); flex: none; } .ms-brand__mark--xl { width: 96px; height: 96px; font-size: 2.6rem; border-radius: 26px; margin-inline: auto; } .ms-brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .ms-brand__name { font-weight: 800; font-size: 1.1rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; max-width: 260px; } .ms-brand__tag { font-size: .78rem; color: var(--sf-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; max-width: 260px; } .ms-nav { display: flex; gap: 4px; margin-inline-start: 12px; } .ms-nav__link { padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--sf-ink-2); } .ms-nav__link:hover, .ms-nav__link.is-active { background: var(--sf-primary-soft); color: var(--sf-primary); } .ms-header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; } .ms-burger { display: none; } .ms-drawer { position: fixed; inset: 0; z-index: 60; } .ms-drawer[hidden] { display: none; } .ms-drawer__backdrop { position: absolute; inset: 0; border: 0; background: color-mix(in srgb, var(--sf-ink) 45%, transparent); cursor: pointer; } .ms-drawer__panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(88vw, 340px); background: var(--sf-surface); box-shadow: var(--sf-shadow-lg); padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; z-index: 1; } .ms-drawer__head { display: flex; align-items: center; justify-content: space-between; } .ms-drawer__nav { display: flex; flex-direction: column; } .ms-drawer__nav a { padding: 12px 6px; border-bottom: 1px solid var(--sf-line); font-weight: 700; } .ms-drawer__label { margin-top: 10px; font-size: .78rem; color: var(--sf-muted); font-weight: 700; } body.ms-drawer-open { overflow: hidden; } /* ---------- sections ---------- */ .ms-section { padding: var(--sf-space) 0; } .ms-section--tight { padding: var(--sf-space-sm) 0; } .ms-section--band { background: var(--sf-band); } .ms-section--offers { background: linear-gradient(180deg, transparent, var(--sf-primary-soft) 60%, transparent); } .ms-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .ms-section__title { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); } .ms-section__sub { margin-top: 6px; color: var(--sf-muted); } .ms-section__link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--sf-primary); white-space: nowrap; } .ms-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 800; letter-spacing: .04em; color: var(--sf-primary); text-transform: uppercase; } /* ---------- hero ---------- */ .ms-hero { position: relative; padding: clamp(40px, 6vw, 84px) 0; overflow: hidden; background: radial-gradient(900px 420px at 88% -10%, var(--sf-primary-soft), transparent 60%), radial-gradient(700px 360px at 0% 100%, var(--sf-accent-soft), transparent 60%); } .ms-hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(28px, 4vw, 64px); } .ms-hero__title { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.18; margin-top: 12px; text-wrap: balance; } .ms-hero__sub { margin-top: 16px; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); color: var(--sf-ink-2); max-width: 56ch; } .ms-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .ms-hero__points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--sf-line); font-size: .9rem; font-weight: 700; color: var(--sf-ink-2); } .ms-hero__points li { display: inline-flex; align-items: center; gap: 6px; } .ms-hero__points .ms-icon { color: var(--sf-primary); } .ms-hero__frame { border-radius: var(--sf-r-lg); overflow: hidden; box-shadow: var(--sf-shadow-lg); background: var(--sf-surface); } .ms-hero__frame img { width: 100%; height: 100%; aspect-ratio: 3/2; object-fit: cover; } .ms-hero--typo .ms-hero__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } .ms-hero--typo .ms-hero__sub { margin-inline: auto; } .ms-hero--typo .ms-hero__actions, .ms-hero--typo .ms-hero__points { justify-content: center; } .ms-hero--typo .ms-hero__title { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.8rem); } .ms-spot { background: var(--sf-surface); border-radius: var(--sf-r-lg); box-shadow: var(--sf-shadow-lg); overflow: hidden; transform: rotate(-1.2deg); transition: transform .3s var(--sf-ease); } .ms-spot:hover { transform: rotate(0) translateY(-2px); } .ms-spot__media { position: relative; display: block; } .ms-spot__body { padding: 18px 20px 20px; } .ms-spot__title { margin-top: 8px; font-size: 1.25rem; } .ms-spot__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; } /* ---------- media ---------- */ .ms-media__img { width: 100%; height: auto; object-fit: cover; background: var(--sf-surface-2); } .ms-media__fallback { display: grid; place-items: center; width: 100%; background: linear-gradient(135deg, var(--sf-primary-soft), var(--sf-accent-soft)); color: color-mix(in srgb, var(--sf-primary) 55%, var(--sf-ink)); } .ms-media__fallback[hidden] { display: none; } .ms-media__initial { font-size: 2.4rem; font-weight: 800; opacity: .85; } .ms-media__fallback--lg .ms-media__initial { font-size: 4rem; } .ms-spot .ms-media__fallback { background: radial-gradient(120% 90% at 85% 15%, color-mix(in srgb, var(--sf-primary) 26%, var(--sf-surface)), transparent 60%), radial-gradient(90% 80% at 15% 90%, color-mix(in srgb, var(--sf-accent) 22%, var(--sf-surface)), transparent 60%), var(--sf-surface-2); } .ms-spot .ms-media__initial { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 36px; background: var(--sf-surface); color: var(--sf-primary); box-shadow: var(--sf-shadow-md); font-size: 3.4rem; } /* ---------- grids ---------- */ .ms-grid { display: grid; gap: 22px; } .ms-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ms-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* ---------- product card ---------- */ .ms-card { position: relative; display: flex; flex-direction: column; background: var(--sf-surface); border-radius: var(--sf-r); overflow: hidden; transition: transform .25s var(--sf-ease), box-shadow .25s var(--sf-ease), border-color .2s; } html[data-card="raised"] .ms-card { box-shadow: var(--sf-shadow-sm); } html[data-card="raised"] .ms-card:hover { box-shadow: var(--sf-shadow-md); transform: translateY(-4px); } html[data-card="bordered"] .ms-card { border: 1px solid var(--sf-line); } html[data-card="bordered"] .ms-card:hover { border-color: var(--sf-primary); transform: translateY(-2px); } html[data-card="flat"] .ms-card { background: var(--sf-surface-2); } html[data-card="flat"] .ms-card:hover { background: var(--sf-surface); transform: translateY(-2px); box-shadow: var(--sf-shadow-md); } .ms-card__media { position: relative; display: block; overflow: hidden; } .ms-card__media .ms-media__img { aspect-ratio: 4/3; transition: transform .5s var(--sf-ease); } .ms-card:hover .ms-card__media .ms-media__img { transform: scale(1.04); } .ms-card.is-sold .ms-card__media, .ms-card.is-soon .ms-card__media { filter: saturate(.55); } .ms-card.is-sold .ms-card__media::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--sf-ink) 22%, transparent); } .ms-card__body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; } .ms-card__meta { display: flex; flex-wrap: wrap; gap: 6px; } .ms-card__title { font-size: 1.06rem; line-height: 1.35; overflow-wrap: anywhere; } .ms-card__desc { color: var(--sf-muted); font-size: .9rem; flex: 1; } .ms-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .ms-card--wide { flex-direction: row; } .ms-card--wide .ms-card__media { width: 44%; flex: none; } .ms-card--wide .ms-card__media .ms-media__img, .ms-card--wide .ms-card__media .ms-media__fallback { height: 100%; aspect-ratio: auto; min-height: 200px; } .ms-card--wide .ms-card__body { padding: 20px 22px; } .ms-card--wide .ms-card__title { font-size: 1.2rem; } /* ---------- price ---------- */ .ms-price { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ms-price__now { font-weight: 800; font-size: 1.12rem; color: var(--sf-price); white-space: nowrap; } .ms-price__old { color: var(--sf-muted); font-size: .86rem; } .ms-price--sm .ms-price__now { font-size: .98rem; } .ms-price--lg .ms-price__now { font-size: 1.35rem; } .ms-price--xl .ms-price__now { font-size: 1.9rem; } .ms-price--xl .ms-price__old { font-size: 1rem; } /* ---------- categories ---------- */ .ms-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 16px; } .ms-cat { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-r); transition: transform .2s var(--sf-ease), box-shadow .2s, border-color .2s; } .ms-cat:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow-md); border-color: transparent; } .ms-cat__visual { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--sf-primary-soft); overflow: hidden; flex: none; } .ms-cat__visual img { width: 100%; height: 100%; object-fit: cover; } .ms-cat__icon { font-size: 1.6rem; line-height: 1; } .ms-cat__initial { font-weight: 800; font-size: 1.3rem; color: var(--sf-primary); } .ms-cat__body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ms-cat__name { font-weight: 800; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .ms-cat__desc { font-size: .82rem; color: var(--sf-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .ms-cat__count { font-size: .78rem; font-weight: 700; color: var(--sf-primary); margin-top: 2px; } .ms-cat__arrow { color: var(--sf-muted); flex: none; } /* ---------- benefits ---------- */ .ms-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ms-benefit { display: flex; gap: 14px; padding: 18px; background: var(--sf-surface); border-radius: var(--sf-r); border: 1px solid var(--sf-line); } .ms-benefit__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--sf-primary-soft); color: var(--sf-primary); flex: none; } .ms-benefit__title { font-size: 1rem; } .ms-benefit__text { margin-top: 4px; font-size: .88rem; color: var(--sf-muted); } /* ---------- coming soon ---------- */ .ms-soon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .ms-soon__item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--sf-surface); border-radius: var(--sf-r); border: 1px dashed var(--sf-line); } .ms-soon__visual { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--sf-surface-2); overflow: hidden; flex: none; font-weight: 800; font-size: 1.2rem; } .ms-soon__visual img { width: 100%; height: 100%; object-fit: cover; } .ms-soon__body { display: flex; flex-direction: column; min-width: 0; flex: 1; } .ms-soon__name { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .ms-soon__desc { font-size: .8rem; color: var(--sf-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* ---------- WhatsApp CTA ---------- */ .ms-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 44px); border-radius: var(--sf-r-lg); background: linear-gradient(135deg, var(--sf-ink), color-mix(in srgb, var(--sf-ink) 80%, var(--sf-primary))); color: var(--sf-bg); } .ms-cta__title { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); } .ms-cta__text { margin-top: 8px; opacity: .85; } .ms-wa-float { position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 50; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--sf-wa); color: var(--sf-wa-ink); box-shadow: var(--sf-shadow-md); transition: transform .2s var(--sf-ease); } .ms-wa-float:hover { transform: translateY(-3px) scale(1.04); } .ms-wa-float .ms-icon { width: 28px; height: 28px; } /* ---------- empty / pager / strip ---------- */ .ms-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: clamp(36px, 6vw, 64px) 20px; background: var(--sf-surface); border: 1px dashed var(--sf-line); border-radius: var(--sf-r-lg); } .ms-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--sf-primary-soft); color: var(--sf-primary); } .ms-empty__title { font-size: 1.2rem; } .ms-empty__text { color: var(--sf-muted); max-width: 40ch; } .ms-empty .ms-btn { margin-top: 6px; } .ms-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; } .ms-pager__info { color: var(--sf-muted); font-size: .9rem; } .ms-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--sf-line); } .ms-strip__label { font-weight: 700; color: var(--sf-muted); font-size: .9rem; } /* ---------- page head (category) ---------- */ .ms-pagehead { padding: clamp(24px, 4vw, 44px) 0 0; background: linear-gradient(180deg, var(--sf-primary-soft), transparent); } .ms-pagehead__row { display: flex; align-items: center; gap: 18px; margin-top: 14px; padding-bottom: clamp(24px, 4vw, 40px); } .ms-pagehead__visual { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; background: var(--sf-surface); box-shadow: var(--sf-shadow-sm); font-size: 2rem; font-weight: 800; color: var(--sf-primary); overflow: hidden; flex: none; } .ms-pagehead__visual img { width: 100%; height: 100%; object-fit: cover; } .ms-pagehead__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); } .ms-pagehead__sub { margin-top: 6px; color: var(--sf-ink-2); max-width: 60ch; } .ms-pagehead__meta { margin-top: 6px; font-size: .86rem; font-weight: 700; color: var(--sf-primary); } .ms-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .84rem; color: var(--sf-muted); margin-bottom: 14px; } .ms-crumbs a:hover { color: var(--sf-primary); } .ms-crumbs [aria-current] { color: var(--sf-ink); font-weight: 700; } /* ---------- product page ---------- */ .ms-product__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .ms-product__cover { position: relative; border-radius: var(--sf-r-lg); overflow: hidden; background: var(--sf-surface); box-shadow: var(--sf-shadow-md); } .ms-product__cover .ms-media__img { aspect-ratio: 4/3; } .ms-product__cover.is-sold .ms-media__img { filter: saturate(.5); } .ms-product__info { position: sticky; top: 92px; } .ms-product__title { margin-top: 10px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); line-height: 1.25; overflow-wrap: anywhere; } .ms-product__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 14px; } .ms-product__hint { color: var(--sf-muted); font-size: .9rem; } .ms-product__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding: 12px 0; border-block: 1px solid var(--sf-line); font-size: .9rem; font-weight: 700; color: var(--sf-ink-2); } .ms-product__facts li { display: inline-flex; align-items: center; gap: 6px; } .ms-product__facts .ms-icon { color: var(--sf-success); } .ms-product__facts li.is-sold .ms-icon { color: var(--sf-danger); } .ms-product__facts li.is-soon .ms-icon { color: var(--sf-price); } .ms-product__desc { margin-top: 16px; color: var(--sf-ink-2); line-height: 1.8; } .ms-product__h { margin-top: 20px; margin-bottom: 8px; font-size: .95rem; color: var(--sf-muted); font-weight: 800; } .ms-variants { display: flex; flex-direction: column; gap: 8px; } .ms-variant { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--sf-line); border-radius: var(--sf-r-sm); background: var(--sf-surface); font-weight: 700; } .ms-needs { display: flex; flex-direction: column; gap: 6px; font-size: .92rem; } .ms-needs li { display: flex; align-items: center; gap: 6px; } .ms-needs .ms-icon { color: var(--sf-primary); transform: rotate(180deg); } .ms-needs__req { font-size: .72rem; color: var(--sf-danger); font-weight: 700; } .ms-product__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; } .ms-product__note { margin-top: 12px; display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--sf-muted); } .ms-related { margin-top: var(--sf-space-sm); padding-top: var(--sf-space-sm); border-top: 1px solid var(--sf-line); } /* ---------- coming-soon page ---------- */ .ms-soonpage { padding: clamp(56px, 10vw, 120px) 0; background: radial-gradient(800px 400px at 50% 0%, var(--sf-primary-soft), transparent 70%); } .ms-soonpage__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; max-width: 640px; } .ms-soonpage__logo { width: 96px; height: 96px; border-radius: 26px; object-fit: cover; box-shadow: var(--sf-shadow-md); } .ms-soonpage__title { font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); text-wrap: balance; } .ms-soonpage__text { color: var(--sf-ink-2); font-size: 1.05rem; max-width: 46ch; } .ms-soonpage__points { justify-content: center; border-top: 0; padding-top: 0; } /* ---------- panels / forms (checkout, order) ---------- */ .ms-panel { background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-r-lg); padding: clamp(18px, 3vw, 28px); } .ms-panel + .ms-panel { margin-top: 16px; } .ms-panel--ok { border-color: color-mix(in srgb, var(--sf-success) 40%, transparent); } .ms-panel--wa { border-color: color-mix(in srgb, var(--sf-wa) 45%, transparent); background: color-mix(in srgb, var(--sf-wa) 6%, var(--sf-surface)); } .ms-panel__title { font-size: 1.35rem; margin-bottom: 14px; } .ms-checkout { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: start; } .ms-checkout__summary { position: sticky; top: 92px; } .ms-checkout__item { display: flex; gap: 12px; align-items: center; } .ms-checkout__thumb { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; flex: none; display: block; } .ms-checkout__thumb .ms-media__img, .ms-checkout__thumb .ms-media__fallback { width: 72px; height: 72px; aspect-ratio: 1/1 !important; } .ms-checkout__thumb .ms-media__initial { font-size: 1.6rem; } .ms-checkout__name { font-size: 1.05rem; margin-bottom: 6px; } .ms-checkout__price { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sf-line); } .ms-checkout__hint { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--sf-muted); } .ms-form { display: flex; flex-direction: column; gap: 14px; } .ms-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ms-form__h { margin-top: 8px; font-size: 1rem; color: var(--sf-ink-2); } .ms-field { display: flex; flex-direction: column; gap: 6px; } .ms-label { font-weight: 700; font-size: .92rem; } .ms-label.is-req::after { content: " *"; color: var(--sf-danger); } .ms-input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--sf-line); border-radius: var(--sf-r-sm); background: var(--sf-bg); color: var(--sf-ink); font: inherit; font-size: 1rem; transition: border-color .15s, box-shadow .15s; } .ms-input:focus { outline: 0; border-color: var(--sf-primary); box-shadow: 0 0 0 4px var(--sf-primary-soft); } .ms-input--short { max-width: 160px; } .ms-field__help { font-size: .8rem; color: var(--sf-muted); } .ms-field__error { font-size: .82rem; color: var(--sf-danger); font-weight: 700; } .ms-order__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .ms-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 20px 0 8px; counter-reset: step; } .ms-steps li { position: relative; padding-top: 18px; font-size: .8rem; font-weight: 700; color: var(--sf-muted); text-align: center; } .ms-steps li::before { content: ""; position: absolute; top: 5px; inset-inline: 0; height: 4px; border-radius: 4px; background: var(--sf-line); } .ms-steps li.is-done::before, .ms-steps li.is-current::before { background: var(--sf-success); } .ms-steps li.is-current::before { background: var(--sf-primary); } .ms-steps li.is-done, .ms-steps li.is-current { color: var(--sf-ink); } .ms-steps__dot { display: none; } .ms-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .ms-table th, .ms-table td { padding: 12px 8px; border-bottom: 1px solid var(--sf-line); text-align: start; font-size: .94rem; vertical-align: top; } .ms-table th { color: var(--sf-muted); font-weight: 700; font-size: .84rem; } .ms-table tfoot th { color: var(--sf-ink); font-size: 1rem; border-bottom: 0; } .ms-methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .ms-method { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 10px 14px; border: 1px solid var(--sf-line); border-radius: var(--sf-r-sm); background: var(--sf-bg); } .ms-method em { grid-column: 1 / -1; font-style: normal; font-size: .82rem; color: var(--sf-muted); } /* ---------- footer ---------- */ .ms-footer { margin-top: var(--sf-space-sm); background: var(--sf-ink); color: color-mix(in srgb, var(--sf-bg) 88%, transparent); } html[data-scheme="dark"] .ms-footer { background: color-mix(in srgb, var(--sf-bg) 55%, black); color: color-mix(in srgb, var(--sf-ink) 82%, transparent); } html[data-scheme="dark"] .ms-cta { background: linear-gradient(135deg, var(--sf-surface), color-mix(in srgb, var(--sf-surface) 72%, var(--sf-primary))); color: var(--sf-ink); border: 1px solid var(--sf-line); } html[data-scheme="dark"] .ms-footer .ms-brand__name, html[data-scheme="dark"] .ms-footer__title { color: var(--sf-ink); } html[data-scheme="dark"] .ms-footer__bottom { border-top-color: color-mix(in srgb, var(--sf-ink) 14%, transparent); } .ms-footer .ms-brand__name { color: var(--sf-bg); } .ms-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding: clamp(36px, 5vw, 56px) 0 28px; } .ms-footer__text { margin-top: 14px; max-width: 42ch; font-size: .92rem; opacity: .8; } .ms-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .ms-footer__social a { padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sf-bg) 25%, transparent); font-size: .82rem; font-weight: 700; } .ms-footer__title { font-size: .92rem; font-weight: 800; color: var(--sf-bg); margin-bottom: 12px; letter-spacing: .02em; } .ms-footer__links { display: flex; flex-direction: column; gap: 8px; font-size: .92rem; } .ms-footer__links a { opacity: .82; display: inline-flex; align-items: center; gap: 6px; } .ms-footer__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; } .ms-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 0 22px; border-top: 1px solid color-mix(in srgb, var(--sf-bg) 16%, transparent); font-size: .82rem; opacity: .75; } .ms-footer__top { display: inline-flex; align-items: center; gap: 4px; } /* ---------- responsive ---------- */ @media (max-width: 1024px) { .ms-cats { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .ms-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ms-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .ms-nav { display: none; } .ms-burger { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--sf-r-sm); border: 1.5px solid var(--sf-line); background: var(--sf-surface); cursor: pointer; } .ms-header__wa span { display: none; } .ms-header__wa { padding-inline: 12px; } .ms-hero__inner { grid-template-columns: 1fr; } .ms-hero__visual { max-width: 560px; } .ms-spot { transform: none; } .ms-grid--3, .ms-grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-card--wide { flex-direction: column; } .ms-card--wide .ms-card__media { width: 100%; } .ms-card--wide .ms-card__media .ms-media__img, .ms-card--wide .ms-card__media .ms-media__fallback { aspect-ratio: 4/3; min-height: 0; } .ms-benefits, .ms-soon { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-product__grid { grid-template-columns: 1fr; } .ms-product__info { position: static; } .ms-checkout { grid-template-columns: 1fr; } .ms-checkout__summary { position: static; } .ms-cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { :root { --sf-gutter: 16px; } .ms-header__inner { min-height: 64px; gap: 12px; } .ms-brand__tag { display: none; } .ms-brand__name { max-width: 46vw; } .ms-hero__actions .ms-btn { flex: 1 1 100%; } .ms-grid--2, .ms-grid--3, .ms-grid--4, .ms-grid--wide { grid-template-columns: 1fr; } .ms-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ms-cat { flex-direction: column; align-items: flex-start; gap: 10px; } .ms-cat__arrow { display: none; } .ms-benefits, .ms-soon { grid-template-columns: 1fr; } .ms-section__head { flex-direction: column; align-items: flex-start; } .ms-form__row { grid-template-columns: 1fr; } .ms-footer__grid { grid-template-columns: 1fr; gap: 24px; } .ms-preview__actions { margin-inline-start: 0; } .ms-wa-float { width: 52px; height: 52px; inset-inline-start: 14px; bottom: 14px; } .ms-steps li { font-size: .72rem; } } @media (max-width: 380px) { .ms-cats { grid-template-columns: 1fr; } .ms-card__foot { flex-direction: column; align-items: stretch; } .ms-card__foot .ms-btn { width: 100%; } } /* ---------- print ---------- */ @media print { .ms-header, .ms-wa-float, .ms-preview, .ms-footer { display: none !important; } }