html, body { margin: 0; padding: 0; } /* |-------------------------------------------------------------------------- | Crunsh theme — self-contained compiled stylesheet |-------------------------------------------------------------------------- | Dark, high-tech look for digital-product stores. Tailwind v4 (CSS-first) | compiles this through Vite, so the theme ships no CDN and no inline styles. | The semantic tokens map to the per-store `--sf-*` variables injected at | runtime from , so one compiled bundle themes every | crunsh store while the var() fallbacks keep an un-customised store intact. */ @import "tailwindcss"; @import "../../../resources/css/storefront/pagination.css"; @source "../views"; @source "../../../resources/views/storefront/auth"; @source "../../../resources/views/storefront/checkout"; @source "../../../resources/views/storefront/partials"; @theme { --color-primary: var(--sf-primary, #fa9429); --color-primary-hover: var(--sf-primary-hover, #d46e03); --color-accent: var(--sf-accent, #22d3ee); --color-accent-hover: var(--sf-accent-hover, #0891b2); --color-secondary: var(--sf-secondary, #7c3cff); --color-muted: var(--sf-text-muted, #b9bbbf); --color-charcoal: var(--sf-text, #ffffff); --color-line: var(--sf-border, #1f293d); --color-soft: var(--sf-bg, #050914); --color-surface: var(--sf-surface, #101827); } :root { --sf-font: 'Cairo', system-ui, sans-serif; --sf-font-heading: 'Cairo', system-ui, sans-serif; --sf-font-scale: 1; } /* Scaling the root size scales every rem-based size at once. */ html { font-size: calc(100% * var(--sf-font-scale, 1)); } body { font-family: var(--sf-font); background-color: var(--sf-bg, #050914); color: var(--sf-text, #ffffff); scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6, .cr-font-heading { font-family: var(--sf-font-heading, var(--sf-font)); } [x-cloak] { display: none !important; } [data-wishlist-count], [data-compare-count] { display: flex !important; } /* Dynamic cover backgrounds (set from data-attributes by the shared runtime). */ .sf-bg-cover { background-size: cover; background-position: center; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--sf-bg, #050914); } ::-webkit-scrollbar-thumb { background: var(--sf-border, #1f293d); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--sf-primary, #fa9429); } .cr-fade-in { animation: crunshFadeIn .5s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes crunshFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* |-------------------------------------------------------------------------- | Theme identity |-------------------------------------------------------------------------- */ .cr-body { background-color: var(--sf-bg, #050914); } /* Announcement ticker: a solid orange strip whose copy scrolls continuously. The track is duplicated in the markup so the -50% loop is seamless. */ .cr-ticker { overflow: hidden; white-space: nowrap; padding: 11px 0; background: var(--sf-primary, #ff6a00); color: #ffffff; font-size: 14px; font-weight: 800; } .cr-ticker__track { display: inline-flex; align-items: center; gap: 46px; animation: crunshTicker 34s linear infinite; } .cr-ticker__item { display: inline-flex; align-items: center; gap: 10px; } .cr-ticker__item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } @keyframes crunshTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } } html[dir="rtl"] .cr-ticker__track { animation-direction: reverse; } @media (prefers-reduced-motion: reduce) { .cr-ticker__track { animation: none; } } /* | Storefront toast | The toast is driven by the shared Alpine store, but crunsh owns the visual | layer so the notification stays visible on the dark theme and above mobile UI. */ .cr-toast-wrap { position: fixed; inset-inline-end: 1.25rem; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 80; display: flex; flex-direction: column; gap: .75rem; max-width: min(24rem, calc(100vw - 2rem)); pointer-events: none; } .cr-toast { display: flex; align-items: center; gap: .75rem; min-width: min(20rem, calc(100vw - 2rem)); border: 1px solid color-mix(in srgb, var(--sf-primary, #fa9429) 45%, var(--sf-border, #1f293d)); border-radius: 1rem; background: linear-gradient(135deg, color-mix(in srgb, var(--sf-primary, #fa9429) 16%, transparent), transparent 46%), color-mix(in srgb, var(--sf-surface, #101827) 94%, #000000); box-shadow: 0 20px 55px rgba(0, 0, 0, .42), 0 0 28px color-mix(in srgb, var(--sf-primary, #fa9429) 16%, transparent); color: var(--sf-text, #ffffff); padding: .9rem 1rem; font-size: .82rem; font-weight: 900; line-height: 1.5; pointer-events: auto; } .cr-toast__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--sf-primary, #fa9429); color: #ffffff; box-shadow: 0 0 18px color-mix(in srgb, var(--sf-primary, #fa9429) 34%, transparent); } .cr-toast__icon i { font-size: .72rem; } .cr-toast__message { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 767px) { .cr-toast-wrap { inset-inline: 1rem; bottom: max(5.25rem, env(safe-area-inset-bottom)); align-items: stretch; max-width: none; } .cr-toast { min-width: 0; width: 100%; } } /* | Main bar: menu + search at the start, logo centred, language / currency / | account / cart at the end. Everything uses logical properties so the whole | bar mirrors itself between RTL and LTR stores. */ .cr-header { position: sticky; top: 0; z-index: 40; background: linear-gradient(90deg, var(--sf-bg, #050914) 0%, color-mix(in srgb, var(--sf-surface, #101827) 92%, var(--sf-secondary, #7c3cff)) 50%, var(--sf-bg, #050914) 100%); border-bottom: 1px solid color-mix(in srgb, var(--sf-border, #1f293d) 70%, transparent); } .cr-header__bar { max-width: 1280px; margin: 0 auto; min-height: 74px; padding: 10px 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .cr-header__side { display: flex; align-items: center; gap: 14px; min-width: 0; } .cr-header__side--end { justify-content: flex-end; } .cr-header__menu, .cr-header__icon, .cr-header__avatar, .cr-header__cart { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; color: var(--sf-text, #ffffff); font-family: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: color .2s, opacity .2s; } .cr-header__menu:hover, .cr-header__icon:hover, .cr-header__avatar:hover, .cr-header__cart:hover { color: var(--sf-primary, #ff6a00); } .cr-header__menu svg, .cr-header__icon svg, .cr-header__avatar svg, .cr-header__cart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .cr-header__icon { padding: 4px; } .cr-header__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; justify-self: center; } .cr-header__logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(135deg, var(--sf-primary, #ff6a00), var(--sf-primary-hover, #ffb000)); box-shadow: 0 0 26px color-mix(in srgb, var(--sf-primary, #ff6a00) 34%, transparent); flex: 0 0 auto; } .cr-header__logo-diamond { width: 20px; height: 15px; background: #ffffff; clip-path: polygon(14% 0, 86% 0, 100% 32%, 50% 100%, 0 32%); } .cr-header__logo-text { font-size: 22px; font-weight: 900; letter-spacing: -.4px; color: var(--sf-text, #ffffff); white-space: nowrap; } .cr-header__currency { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--sf-text, #ffffff) 72%, transparent); white-space: nowrap; } .cr-header__avatar { width: 36px; height: 36px; justify-content: center; border-radius: 999px; background: color-mix(in srgb, var(--sf-text, #ffffff) 10%, transparent); } .cr-header__icon--badged, .cr-header__cart-icon { position: relative; } .cr-header__badge { position: absolute; top: -6px; inset-inline-end: -8px; min-width: 18px; height: 18px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 10px; font-weight: 900; line-height: 1; color: #ffffff; } .cr-header__badge--primary { background: var(--sf-primary, #ff6a00); } .cr-header__badge--accent { background: var(--sf-accent, #22d3ee); color: #050914; } .cr-header__badge--rose { background: #f43f5e; } .cr-header__cart-icon { display: inline-flex; } .cr-header__cart-total { font-size: 15px; font-weight: 800; white-space: nowrap; } /* Round icon button used on product cards */ /* Inline search revealed by the search icon */ .cr-header__search { max-width: 1280px; margin: 0 auto; padding: 0 22px 14px; display: flex; gap: 10px; } .cr-header__search input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 16px; border: 1px solid var(--sf-border, #1f293d); border-radius: 12px; background: var(--sf-bg, #050914); color: var(--sf-text, #fff); font-family: inherit; font-size: 14px; outline: none; } .cr-header__search input:focus { border-color: var(--sf-primary, #ff6a00); } .cr-header__search button { height: 46px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--sf-primary, #ff6a00); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; } @media (max-width: 820px) { .cr-header__bar { padding: 10px 14px; gap: 10px; } .cr-header__menu span { display: none; } .cr-header__currency { display: none; } .cr-header__logo-text { font-size: 18px; } .cr-header__cart-total { display: none; } } /* |-------------------------------------------------------------------------- | Footer |-------------------------------------------------------------------------- | Reference layout: back-to-top strip, newsletter + social row, four-column | middle band, payment chips, then the copyright line. */ .cr-footer { margin-top: 48px; background: linear-gradient(180deg, var(--sf-bg, #050914) 0%, color-mix(in srgb, var(--sf-surface, #101827) 60%, var(--sf-bg, #050914)) 100%); border-top: 1px solid var(--sf-border, #1f293d); color: var(--sf-text-muted, #c8cbd1); font-size: 13px; } .cr-footer__inner { max-width: 1180px; margin: 0 auto; padding: 0 20px 26px; } .cr-footer__to-top { display: flex; justify-content: center; border-bottom: 1px solid var(--sf-border, #1f293d); } .cr-footer__to-top a { display: inline-flex; align-items: center; gap: 8px; padding: 16px 0 12px; color: var(--sf-text-muted, #c8cbd1); font-weight: 800; text-decoration: none; transition: color .18s; } .cr-footer__to-top a:hover { color: var(--sf-primary, #ff6a00); } .cr-footer__to-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cr-footer__social { display: flex; flex-wrap: wrap; gap: 10px; } .cr-footer__social a { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sf-border, #1f293d); border-radius: 999px; background: var(--sf-bg, #050914); color: var(--sf-text-muted, #c8cbd1); font-size: 15px; transition: color .18s, border-color .18s; } .cr-footer__social a:hover { color: var(--sf-primary, #ff6a00); border-color: var(--sf-primary, #ff6a00); } .cr-footer__middle { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 30px; padding: 32px 0; border-bottom: 1px solid var(--sf-border, #1f293d); text-align: start; } .cr-footer__middle--cols-1 { grid-template-columns: 1fr; } .cr-footer__middle--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cr-footer__middle--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cr-footer__middle--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cr-footer__logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; text-decoration: none; } .cr-footer__description { margin: 0; line-height: 1.9; } .cr-footer__title { margin: 0 0 16px; color: var(--sf-text, #fff); font-size: 14px; font-weight: 900; } .cr-footer__list { display: flex; flex-direction: column; gap: 12px; } .cr-footer__list a { color: var(--sf-text-muted, #c8cbd1); line-height: 1.3; text-decoration: none; transition: color .18s; } .cr-footer__list a:hover { color: var(--sf-primary, #ff6a00); } .cr-footer__contacts { display: flex; flex-direction: column; gap: 12px; } .cr-footer__contact { display: flex; align-items: flex-start; gap: 9px; color: var(--sf-text-muted, #c8cbd1); line-height: 1.6; text-decoration: none; transition: color .18s; } .cr-footer__contact i { flex: 0 0 auto; margin-top: 3px; color: var(--sf-primary, #ff6a00); } a.cr-footer__contact:hover { color: var(--sf-primary, #ff6a00); } /* Social icons at one edge, payment cards at the other. */ .cr-footer__strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 0; } .cr-footer__payments { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-inline-start: auto; } .cr-footer__pay { width: 48px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #ffffff; color: #0f172a; font-size: 18px; } .cr-footer__bottom { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid var(--sf-border, #1f293d); font-size: 12.5px; } .cr-footer__powered a { color: var(--sf-text-muted, #c8cbd1); text-decoration: none; } .cr-footer__powered a:hover { color: var(--sf-primary, #ff6a00); } @media (min-width: 768px) { .cr-footer__bottom { flex-direction: row; } } @media (max-width: 900px) { .cr-footer__middle { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } @media (max-width: 560px) { .cr-footer__inner { padding: 0 14px 22px; } .cr-footer__middle { grid-template-columns: 1fr; } .cr-footer__strip { justify-content: center; } .cr-footer__social, .cr-footer__payments { justify-content: center; margin-inline-start: 0; width: 100%; } } /* Mobile footer */ .cr-footer__mobile { padding: 24px 16px 8px; text-align: center; } .cr-footer__mobile-brand { margin-bottom: 16px; } .cr-footer__mobile-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--sf-text, #f3f4f6); } .cr-footer__mobile-name { font-size: 1.2rem; font-weight: 900; color: var(--sf-text, #f3f4f6); } .cr-footer__mobile-about { max-width: 32rem; margin: 0 auto 24px; padding: 0 8px; } .cr-footer__mobile-about p { font-size: 12px; line-height: 1.7; font-weight: 500; color: var(--sf-text-muted, #9ca3af); margin: 0; } .cr-footer__mobile-heading { color: var(--sf-primary, #ff6a00); font-weight: 800; font-size: 13px; margin: 0 0 14px; letter-spacing: 0.04em; } .cr-footer__mobile-links { margin-bottom: 24px; } .cr-footer__mobile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; max-width: 28rem; margin: 0 auto; padding: 0 8px; } .cr-footer__mobile-grid a { font-size: 12px; color: var(--sf-text-muted, #9ca3af); text-decoration: none; transition: color .2s; } .cr-footer__mobile-grid a:hover { color: var(--sf-primary, #ff6a00); } .cr-footer__mobile-contact { margin-bottom: 24px; } .cr-footer__mobile-icons, .cr-footer__mobile-social { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .cr-footer__mobile-social { margin-bottom: 20px; } .cr-footer__mobile-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--sf-surface, #101827); border: 1px solid var(--sf-border, #1e293b); display: inline-flex; align-items: center; justify-content: center; color: var(--sf-text, #f3f4f6); font-size: 1.1rem; text-decoration: none; transition: border-color .2s, color .2s; } .cr-footer__mobile-icon:hover { border-color: var(--sf-primary, #ff6a00); color: var(--sf-primary, #ff6a00); } .cr-footer__mobile-payments { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .cr-footer__mobile-pay { padding: 6px 12px; border-radius: 8px; background: var(--sf-surface, #101827); border: 1px solid var(--sf-border, #1e293b); color: var(--sf-text-muted, #9ca3af); font-size: 1.1rem; display: inline-flex; align-items: center; } /* Side drawer */ .cr-drawer-overlay { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-start; background: rgba(2, 6, 16, .72); backdrop-filter: blur(4px); } .cr-drawer-overlay.hidden { display: none; } .cr-drawer { width: 82%; max-width: 360px; height: 100%; padding: 22px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; background: var(--sf-surface, #101827); border-inline-end: 1px solid var(--sf-border, #1f293d); } .cr-drawer__head { display: flex; align-items: center; justify-content: space-between; } .cr-drawer__title { font-size: 18px; font-weight: 900; color: var(--sf-text, #fff); } .cr-drawer__nav { display: flex; flex-direction: column; } .cr-drawer__link { padding: 13px 0; border-bottom: 1px solid var(--sf-border, #1f293d); color: var(--sf-text-muted, #c8cbd1); font-size: 14px; font-weight: 700; text-decoration: none; transition: color .18s; } .cr-drawer__link:hover { color: var(--sf-primary, #ff6a00); } .cr-drawer__langs { display: flex; flex-direction: column; gap: 10px; } .cr-drawer__langs-label { font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-muted, #c8cbd1); } .cr-drawer__langs-list { display: flex; flex-wrap: wrap; gap: 8px; } .cr-drawer__lang { padding: 8px 16px; border: 1px solid var(--sf-border, #1f293d); border-radius: 999px; color: var(--sf-text-muted, #c8cbd1); font-size: 13px; font-weight: 700; text-decoration: none; } .cr-drawer__lang.is-active { background: var(--sf-primary, #ff6a00); border-color: var(--sf-primary, #ff6a00); color: #fff; } /* Buttons */ .cr-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.25rem; border: 1px solid transparent; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s; } .cr-btn:hover { transform: translateY(-1px); } .cr-btn--lg { padding: .95rem 1.6rem; font-size: .78rem; } .cr-btn--primary { background: var(--sf-primary, #fa9429); color: #ffffff; box-shadow: 0 14px 30px color-mix(in srgb, var(--sf-primary, #fa9429) 22%, transparent); } .cr-btn--primary:hover { background: var(--sf-primary-hover, #d46e03); } .cr-btn--ghost { border-color: var(--sf-border, #1f293d); background: var(--sf-surface, #101827); color: var(--sf-text-muted, #b9bbbf); } .cr-btn--ghost:hover { border-color: var(--sf-primary, #fa9429); color: var(--sf-primary, #fa9429); } .cr-btn--disabled { background: var(--sf-border, #1f293d); color: var(--sf-text-muted, #b9bbbf); cursor: not-allowed; } .cr-btn--disabled:hover { transform: none; } /* Filter tabs */ .cr-tab { padding: .5rem 1.25rem; border: 1px solid var(--sf-border, #1f293d); border-radius: 999px; background: var(--sf-surface, #101827); color: var(--sf-text-muted, #b9bbbf); font-size: .625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .18s, color .18s, border-color .18s; } .cr-tab:hover { border-color: var(--sf-primary, #fa9429); } .cr-tab--active { background: var(--sf-primary, #fa9429); border-color: var(--sf-primary, #fa9429); color: #ffffff; } /* |-------------------------------------------------------------------------- | Product card |-------------------------------------------------------------------------- | Reference layout: square contained image with an overlaid rating badge, then | centred title / subtitle / price, and a wide outline action pinned to the | bottom so every card in a row ends at the same line. */ .cr-pc { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--sf-border, #1f293d); border-radius: 18px; background: var(--sf-surface, #101827); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .cr-pc:hover { border-color: color-mix(in srgb, var(--sf-primary, #ff6a00) 55%, transparent); transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, .34); } .cr-pc__image { position: relative; flex-grow: 0; background: var(--sf-bg, #050914); overflow: hidden; } .cr-pc__image::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient( 105deg, transparent 40%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .12) 55%, transparent 60% ); transform: translateX(-150%); pointer-events: none; transition: none; } .cr-pc:hover .cr-pc__image::after { transform: translateX(150%); transition: transform .65s ease; } .cr-pc__image-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .cr-pc__img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; padding: 0; transition: transform .3s ease; } .cr-pc:hover .cr-pc__img { transform: scale(1.04); } .cr-pc__rating { position: absolute; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(2, 6, 16, .72); border: 1px solid rgba(255, 255, 255, .10); color: var(--sf-primary-hover, #ffb000); font-size: 11px; font-weight: 900; } .cr-pc__rating svg { width: 12px; height: 12px; fill: currentColor; stroke: none; } .cr-pc__promotion { position: absolute; top: 10px; inset-inline-end: 10px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--sf-error, #ef4444) 22%, transparent); border: 1px solid color-mix(in srgb, var(--sf-error, #ef4444) 45%, transparent); color: color-mix(in srgb, var(--sf-error, #ef4444) 60%, #ffffff); font-size: 10px; font-weight: 900; } .cr-pc__actions { position: absolute; bottom: 10px; inset-inline-end: 10px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transition: opacity .25s ease; } .cr-pc:hover .cr-pc__actions { opacity: 1; } .cr-pc__action { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sf-border, #1f293d); border-radius: 999px; background: rgba(2, 6, 16, .8); color: var(--sf-text-muted, #c8cbd1); cursor: pointer; transition: color .18s, border-color .18s; } .cr-pc__action:hover { color: var(--sf-primary, #ff6a00); border-color: var(--sf-primary, #ff6a00); } .cr-pc__action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cr-pc__content { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px; text-align: center; } .cr-pc__main { flex: 1; } .cr-pc__title { margin: 0 0 6px; font-size: 14px; line-height: 1.5; font-weight: 800; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cr-pc__title a { color: var(--sf-text, #fff); text-decoration: none; transition: color .18s; } .cr-pc__title a:hover { color: var(--sf-primary, #ff6a00); } .cr-pc__subtitle { margin: 0; min-height: 2.6em; color: color-mix(in srgb, var(--sf-text, #fff) 66%, transparent); font-size: 11.5px; line-height: 1.65; font-weight: 600; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .cr-pc__sub { display: flex; justify-content: center; } .cr-pc__price-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; } .cr-pc__price { margin: 0; color: var(--sf-primary, #ff6a00); font-size: 16px; font-weight: 900; } .cr-pc__price-before { color: color-mix(in srgb, var(--sf-text, #fff) 45%, transparent); font-size: 12px; font-weight: 700; text-decoration: line-through; } .cr-pc__footer { margin-top: auto; } .cr-pc__btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 14px; border: 1.5px solid var(--sf-primary, #ff6a00); border-radius: 12px; background: transparent; color: var(--sf-primary, #ff6a00); font-family: inherit; font-size: 12px; font-weight: 900; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; } .cr-pc__btn:hover { background: var(--sf-primary, #ff6a00); color: #ffffff; } .cr-pc__btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 560px) { .cr-pc__content { padding: 11px; gap: 8px; } .cr-pc__title { font-size: 12.5px; } .cr-pc__subtitle { font-size: 10.5px; } .cr-pc__price { font-size: 14px; } .cr-pc__btn { padding: 9px 10px; font-size: 11px; } } /* |-------------------------------------------------------------------------- | Product detail page |-------------------------------------------------------------------------- | Reference structure: breadcrumbs, a half/half gallery + detail split, and in | the detail column: sub-title, title, short description with a jump to the | tabs, price with a savings badge, availability dot, options, a purchase bar | (thumb + qty + action), a three-up trust row and the payment strip. Tabs and | related products sit underneath. */ .cr-pdp { padding-bottom: 40px; } .cr-pdp__container { width: min(1180px, 100%); margin: 0 auto; padding: 0 20px; } .cr-pdp__breadcrumbs { padding: 14px 0; margin-bottom: 8px; border-bottom: 1px solid var(--sf-border, #1f293d); color: color-mix(in srgb, var(--sf-text, #fff) 55%, transparent); font-size: 12px; font-weight: 700; } .cr-pdp__breadcrumbs .cr-pdp__container { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .cr-pdp__breadcrumbs a { color: inherit; text-decoration: none; transition: color .18s; } .cr-pdp__breadcrumbs a:hover { color: var(--sf-primary, #ff6a00); } .cr-pdp__crumb-sep { opacity: .5; } .cr-pdp__crumb-current { color: var(--sf-text, #fff); } .cr-pdp__split { display: flex; flex-direction: column; gap: 26px; padding: 22px 0 8px; } .cr-pdp__gallery { display: flex; flex-direction: column; gap: 14px; } .cr-pdp__stage { display: flex; align-items: center; justify-content: center; min-height: 340px; padding: 26px; border: 1px solid var(--sf-border, #1f293d); border-radius: 22px; background: var(--sf-surface, #101827); } .cr-pdp__stage img { max-height: 420px; max-width: 100%; object-fit: contain; } .cr-pdp__thumbs { display: flex; justify-content: center; gap: 10px; overflow-x: auto; padding-bottom: 4px; } .cr-pdp__thumb { width: 66px; height: 66px; flex: 0 0 auto; overflow: hidden; border: 2px solid var(--sf-border, #1f293d); border-radius: 14px; background: var(--sf-bg, #050914); cursor: pointer; transition: border-color .18s; } .cr-pdp__thumb:hover { border-color: var(--sf-primary, #ff6a00); } .cr-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; } .cr-pdp__main { display: flex; flex-direction: column; gap: 14px; text-align: start; } .cr-pdp__subtitle { margin: 0 0 4px; color: color-mix(in srgb, var(--sf-text, #fff) 52%, transparent); font-size: 13px; font-weight: 700; } .cr-pdp__title { margin: 0; color: var(--sf-text, #fff); font-size: clamp(20px, 2.6vw, 26px); line-height: 1.6; font-weight: 800; } .cr-pdp__short p { margin: 0; color: color-mix(in srgb, var(--sf-text, #fff) 68%, transparent); font-size: 13.5px; line-height: 1.9; } .cr-pdp__more { display: inline-block; margin-inline-start: 6px; color: var(--sf-primary, #ff6a00); font-weight: 800; text-decoration: none; } .cr-pdp__more:hover { text-decoration: underline; } .cr-pdp__price-row { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; } .cr-pdp__price-now { color: var(--sf-primary, #ff6a00); font-size: 24px; font-weight: 900; white-space: nowrap; } .cr-pdp__price-before { color: color-mix(in srgb, var(--sf-text, #fff) 45%, transparent); font-size: 15px; text-decoration: line-through; white-space: nowrap; } /* Savings badge: notched icon block plus the amount, like the reference. */ .cr-pdp__save { display: inline-flex; align-items: stretch; height: 26px; border-radius: 6px; overflow: hidden; background: var(--sf-error, #ef4444); color: #fff; font-size: 13px; } .cr-pdp__save-icon { display: inline-flex; align-items: center; padding: 0 6px; border-inline-end: 2px dotted rgba(255, 255, 255, .85); } .cr-pdp__save-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cr-pdp__save-text { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; } .cr-pdp__avail { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; } .cr-pdp__avail--in strong { color: #22c55e; } .cr-pdp__avail--out strong { color: var(--sf-error, #ef4444); } .cr-pdp__dot { width: 9px; height: 9px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); } .cr-pdp__avail--in .cr-pdp__dot { color: #22c55e; } .cr-pdp__avail--out .cr-pdp__dot { color: var(--sf-error, #ef4444); } .cr-pdp__panel { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--sf-primary, #ff6a00) 34%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--sf-primary, #ff6a00) 8%, transparent); } .cr-pdp__panel--stack { flex-direction: column; align-items: stretch; gap: 10px; } .cr-pdp__panel-title { display: flex; align-items: center; gap: 9px; color: var(--sf-text, #fff); font-size: 13px; font-weight: 900; } .cr-pdp__panel-title i { color: var(--sf-primary, #ff6a00); } .cr-pdp__panel-label { color: color-mix(in srgb, var(--sf-text, #fff) 60%, transparent); font-size: 11px; font-weight: 800; } .cr-pdp__countdown { color: var(--sf-primary, #ff6a00); font-family: ui-monospace, monospace; font-size: 13px; font-weight: 900; } .cr-pdp__bar { width: 100%; height: 8px; overflow: hidden; border-radius: 999px; background: var(--sf-border, #1f293d); } .cr-pdp__bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--sf-primary, #ff6a00); transition: width .5s ease; } .cr-pdp__bar-fill--amber { background: #f59e0b; } .cr-pdp__options { display: flex; flex-direction: column; gap: 14px; } .cr-pdp__option-label { display: block; margin-bottom: 8px; color: var(--sf-text, #fff); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .cr-pdp__option-values { display: flex; flex-wrap: wrap; gap: 8px; } .cr-pdp__option-value { padding: 9px 16px; border: 1px solid var(--sf-border, #1f293d); border-radius: 999px; background: var(--sf-bg, #050914); color: var(--sf-text, #fff); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .18s, background .18s, color .18s; } .cr-pdp__option-value:hover { border-color: var(--sf-primary, #ff6a00); } .cr-pdp__option-value.is-selected { background: var(--sf-primary, #ff6a00); border-color: var(--sf-primary, #ff6a00); color: #fff; } .cr-pdp__option-value.is-disabled { color: color-mix(in srgb, var(--sf-text, #fff) 35%, transparent); text-decoration: line-through; cursor: not-allowed; } /* Purchase bar: product summary, quantity and the action cluster. */ .cr-pdp__purchase { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; border: 1px solid var(--sf-border, #1f293d); border-radius: 16px; background: var(--sf-surface, #101827); } .cr-pdp__bar-product { display: flex; gap: 12px; min-width: 0; } .cr-pdp__bar-thumb { width: 62px; height: 62px; flex: 0 0 auto; border: 1px solid var(--sf-border, #1f293d); border-radius: 10px; object-fit: cover; background: var(--sf-bg, #050914); } .cr-pdp__bar-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .cr-pdp__bar-sub { margin: 0; color: color-mix(in srgb, var(--sf-text, #fff) 50%, transparent); font-size: 11.5px; } .cr-pdp__bar-name { color: var(--sf-text, #fff); font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cr-pdp__bar-price { color: var(--sf-primary, #ff6a00); font-size: 15px; font-weight: 900; } .cr-pdp__bar-qty { display: flex; align-items: center; } .cr-pdp__bar-action { display: flex; align-items: center; gap: 10px; width: 100%; } .cr-pdp__buy { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 22px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--sf-primary, #ff6a00), var(--sf-primary-hover, #ffb000)); color: #fff; font-family: inherit; font-size: 14px; font-weight: 900; cursor: pointer; transition: filter .18s, transform .18s; } .cr-pdp__buy:hover { transform: translateY(-2px); } .cr-pdp__buy.is-disabled { background: var(--sf-border, #1f293d); color: color-mix(in srgb, var(--sf-text, #fff) 55%, transparent); cursor: not-allowed; transform: none; } .cr-pdp__icon-btn { width: 50px; height: 50px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sf-border, #1f293d); border-radius: 12px; background: var(--sf-bg, #050914); color: var(--sf-text-muted, #c8cbd1); cursor: pointer; transition: color .18s, border-color .18s; } .cr-pdp__icon-btn:hover { color: var(--sf-primary, #ff6a00); border-color: var(--sf-primary, #ff6a00); } .cr-pdp__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cr-pdp__feature { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; border: 1px solid var(--sf-border, #1f293d); border-radius: 10px; background: var(--sf-surface, #101827); text-align: center; } .cr-pdp__feature-icon { color: var(--sf-primary, #ff6a00); font-size: 17px; } .cr-pdp__feature p { margin: 0; color: var(--sf-text, #fff); font-size: 12px; font-weight: 700; } .cr-pdp__payments { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding-top: 4px; } /* Tabs */ .cr-pdp__tabs { margin-top: 30px; border: 1px solid var(--sf-border, #1f293d); border-radius: 20px; background: var(--sf-surface, #101827); overflow: hidden; } .cr-pdp__tablist { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--sf-border, #1f293d); } .cr-pdp__tab { padding: 16px 22px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: color-mix(in srgb, var(--sf-text, #fff) 62%, transparent); font-family: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; transition: color .18s, border-color .18s; } .cr-pdp__tab:hover { color: var(--sf-text, #fff); } .cr-pdp__tab.is-active { color: var(--sf-primary, #ff6a00); border-bottom-color: var(--sf-primary, #ff6a00); } .cr-pdp__tabpanel { padding: 24px; } .cr-pdp__prose { color: color-mix(in srgb, var(--sf-text, #fff) 70%, transparent); font-size: 13.5px; line-height: 2; } .cr-pdp__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; } .cr-pdp__spec { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border: 1px solid var(--sf-border, #1f293d); border-radius: 12px; background: var(--sf-bg, #050914); font-size: 12.5px; } .cr-pdp__spec span { color: color-mix(in srgb, var(--sf-text, #fff) 58%, transparent); font-weight: 700; } .cr-pdp__spec strong { color: var(--sf-text, #fff); font-weight: 900; text-align: end; } .cr-pdp__rating-summary { display: flex; flex-direction: column; gap: 20px; padding: 20px; margin-bottom: 22px; border: 1px solid var(--sf-border, #1f293d); border-radius: 16px; background: var(--sf-bg, #050914); } .cr-pdp__rating-score { text-align: center; } .cr-pdp__rating-avg { display: block; color: var(--sf-text, #fff); font-size: 34px; font-weight: 900; } .cr-pdp__rating-out { display: block; margin-top: 2px; color: color-mix(in srgb, var(--sf-text, #fff) 58%, transparent); font-size: 12px; } .cr-pdp__stars { display: inline-flex; gap: 3px; color: #f59e0b; font-size: 12px; } .cr-pdp__rating-bars { flex: 1; display: flex; flex-direction: column; gap: 9px; } .cr-pdp__rating-bar { display: flex; align-items: center; gap: 12px; color: var(--sf-text, #fff); font-size: 12px; font-weight: 700; } .cr-pdp__rating-bar > span:first-child { width: 62px; flex: 0 0 auto; } .cr-pdp__rating-bar > span:last-child { width: 42px; flex: 0 0 auto; text-align: start; } .cr-pdp__reviews { display: flex; flex-direction: column; gap: 18px; margin-bottom: 26px; } .cr-pdp__review { padding-bottom: 16px; border-bottom: 1px solid var(--sf-border, #1f293d); } .cr-pdp__review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .cr-pdp__review-head h4 { margin: 0; color: var(--sf-text, #fff); font-size: 13px; font-weight: 800; } .cr-pdp__verified { margin-inline-start: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(34, 197, 94, .12); color: #22c55e; font-size: 10px; } .cr-pdp__review h5 { margin: 0 0 4px; color: var(--sf-text, #fff); font-size: 12px; font-weight: 800; } .cr-pdp__review p { margin: 0; color: color-mix(in srgb, var(--sf-text, #fff) 68%, transparent); font-size: 12.5px; line-height: 1.9; } .cr-pdp__empty { padding: 24px 0; color: color-mix(in srgb, var(--sf-text, #fff) 62%, transparent); font-size: 13px; text-align: center; } .cr-pdp__form-title { margin: 0 0 14px; color: var(--sf-text, #fff); font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; } .cr-pdp__alert { margin-bottom: 16px; padding: 12px 16px; border-radius: 12px; font-size: 12.5px; font-weight: 800; } .cr-pdp__alert--ok { border: 1px solid rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .1); color: #22c55e; } .cr-pdp__alert--err { border: 1px solid color-mix(in srgb, var(--sf-error, #ef4444) 40%, transparent); background: color-mix(in srgb, var(--sf-error, #ef4444) 10%, transparent); color: var(--sf-error, #ef4444); } .cr-pdp__gate { padding: 24px; border: 1px solid var(--sf-border, #1f293d); border-radius: 16px; background: var(--sf-bg, #050914); text-align: center; } .cr-pdp__gate p { margin: 0 0 14px; color: color-mix(in srgb, var(--sf-text, #fff) 66%, transparent); font-size: 12.5px; } .cr-pdp__gate p:only-child { margin-bottom: 0; } .cr-pdp__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cr-pdp__field { display: flex; flex-direction: column; gap: 7px; } .cr-pdp__field--wide { grid-column: 1 / -1; } .cr-pdp__field label { color: color-mix(in srgb, var(--sf-text, #fff) 60%, transparent); font-size: 12px; font-weight: 700; } .cr-pdp__field input, .cr-pdp__field select, .cr-pdp__field textarea { padding: 12px 14px; border: 1px solid var(--sf-border, #1f293d); border-radius: 12px; background: var(--sf-bg, #050914); color: var(--sf-text, #fff); font-family: inherit; font-size: 12.5px; outline: none; } .cr-pdp__field input:focus, .cr-pdp__field select:focus, .cr-pdp__field textarea:focus { border-color: var(--sf-primary, #ff6a00); } .cr-pdp__submit { grid-column: 1 / -1; padding: 13px; border: 0; border-radius: 999px; background: var(--sf-primary, #ff6a00); color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; transition: background .18s; } .cr-pdp__submit:hover { background: var(--sf-primary-hover, #ffb000); } .cr-pdp__related { margin-top: 30px; } .cr-pdp__related h3 { margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--sf-border, #1f293d); color: var(--sf-text, #fff); font-size: 18px; font-weight: 900; } .cr-pdp__related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } @media (min-width: 768px) { .cr-pdp__split { flex-direction: row; align-items: flex-start; gap: 34px; } .cr-pdp__gallery { width: 50%; } .cr-pdp__main { width: 50%; } .cr-pdp__rating-summary { flex-direction: row; align-items: center; } .cr-pdp__rating-score { flex: 0 0 auto; padding-inline-end: 26px; border-inline-end: 1px solid var(--sf-border, #1f293d); } .cr-pdp__related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .cr-pdp__purchase { flex-direction: row; align-items: center; justify-content: space-between; } .cr-pdp__bar-product { width: 45%; } .cr-pdp__bar-action { width: auto; } } @media (max-width: 560px) { .cr-pdp__container { padding: 0 14px; } .cr-pdp__stage { min-height: 260px; padding: 16px; } .cr-pdp__tabpanel { padding: 16px; } .cr-pdp__tab { padding: 13px 14px; font-size: 12px; } .cr-pdp__specs, .cr-pdp__form { grid-template-columns: 1fr; } .cr-pdp__related-grid { gap: 10px; } } /* Surfaces */ .cr-card { border: 1px solid var(--sf-border, #1f293d); border-radius: 1.5rem; background: var(--sf-surface, #101827); padding: 1.25rem; transition: border-color .2s, transform .2s; } .cr-card:hover { border-color: color-mix(in srgb, var(--sf-primary, #fa9429) 45%, transparent); } /* |-------------------------------------------------------------------------- | Hero |-------------------------------------------------------------------------- | Ported 1:1 from the approved crunsh hero design (layout, sizing, timing and | easing untouched). The literal colours were swapped for the theme's --sf-* | tokens with the original hex as the fallback, so an un-customised store is | pixel-identical while a merchant can still recolour it. */ .cr-hero-section { width: 100%; padding: 32px 16px 0; background: radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 26%, transparent), transparent 31%), radial-gradient(circle at 18% 28%, color-mix(in srgb, var(--sf-primary, #ff6a00) 12%, transparent), transparent 25%), radial-gradient(circle at 72% 32%, color-mix(in srgb, var(--sf-accent, #22d3ee) 6%, transparent), transparent 25%), linear-gradient(180deg, var(--sf-bg, #050914) 0%, color-mix(in srgb, var(--sf-bg, #050914) 82%, var(--sf-surface, #101827)) 100%); } .cr-wrap { width: 100%; max-width: 1040px; margin: 0 auto; } .cr-hero { width: 100%; min-height: 520px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; direction: ltr; position: relative; background: radial-gradient(circle at 22% 36%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 18%, transparent), transparent 34%), radial-gradient(circle at 36% 48%, color-mix(in srgb, var(--sf-primary, #ff6a00) 10%, transparent), transparent 30%); } .cr-visual { display: flex; align-items: center; justify-content: center; min-height: 360px; } .cr-floating-card { width: 275px; height: 275px; border-radius: 42px; background: var(--sf-surface, #101827); display: flex; align-items: center; justify-content: center; transform: rotate(12deg); box-shadow: 0 34px 80px rgba(0, 0, 0, .48), 0 0 130px color-mix(in srgb, var(--sf-secondary, #7c3cff) 24%, transparent); position: relative; overflow: hidden; } .cr-floating-card__img { width: 100%; height: 100%; object-fit: cover; } /* Faceted diamond: the ::before layers cut the facet lines using the card's own background colour, so it follows the surface token. */ .cr-diamond { width: 68px; height: 50px; position: relative; background: linear-gradient(135deg, #ffcf4a, #f5a400); clip-path: polygon(14% 0, 86% 0, 100% 32%, 50% 100%, 0 32%); z-index: 1; } .cr-diamond::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, var(--sf-surface, #101827) 30%, var(--sf-surface, #101827) 36%, transparent 36%), linear-gradient(90deg, transparent 62%, var(--sf-surface, #101827) 62%, var(--sf-surface, #101827) 68%, transparent 68%), linear-gradient(145deg, transparent 46%, var(--sf-surface, #101827) 46%, var(--sf-surface, #101827) 52%, transparent 52%), linear-gradient(35deg, transparent 46%, var(--sf-surface, #101827) 46%, var(--sf-surface, #101827) 52%, transparent 52%); } .cr-content { direction: ltr; text-align: start; max-width: 470px; justify-self: end; padding-top: 34px; } html[dir="rtl"] .cr-content { direction: rtl; } .cr-trust-badge { width: fit-content; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 14px; margin-bottom: 18px; border-radius: 11px; color: var(--sf-success, #31e981); background: color-mix(in srgb, var(--sf-success, #31e981) 10%, transparent); border: 1px solid color-mix(in srgb, var(--sf-success, #31e981) 32%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--sf-success, #31e981) 8%, transparent); font-size: 13px; font-weight: 900; line-height: 1; white-space: nowrap; } .cr-trust-badge svg { width: 16px; height: 16px; fill: none; stroke: var(--sf-success, #31e981); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .cr-title { font-size: clamp(36px, 4.4vw, 54px); line-height: 1.08; font-weight: 900; letter-spacing: -1.2px; margin-bottom: 24px; } .cr-title .year-gradient { display: inline-block; background: linear-gradient(90deg, var(--sf-primary, #ff6a00) 0%, var(--sf-primary-hover, #ffb000) 32%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 55%, #ffffff) 60%, var(--sf-secondary, #7c3cff) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: crGradientSlide 4.2s ease-in-out infinite alternate; } .cr-desc { color: color-mix(in srgb, var(--sf-text, #ffffff) 78%, transparent); font-size: 15px; line-height: 1.95; margin-bottom: 24px; } .cr-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px; margin-bottom: 46px; } .cr-tag { height: 40px; padding: 0 17px; border-radius: 999px; display: inline-flex; align-items: center; gap: 9px; background: color-mix(in srgb, var(--sf-surface, #101827) 76%, transparent); border: 1px solid color-mix(in srgb, var(--sf-accent, #22d3ee) 42%, transparent); color: var(--sf-text, #ffffff); font-size: 13px; white-space: nowrap; will-change: transform; } .cr-tag:nth-child(1) { animation: crTagFloatA 4.4s ease-in-out infinite; } .cr-tag:nth-child(2) { animation: crTagFloatB 5s ease-in-out infinite; animation-delay: .35s; } .cr-tag:nth-child(3) { animation: crTagFloatC 4.7s ease-in-out infinite; animation-delay: .7s; } .cr-tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--sf-accent, #22d3ee); } .cr-tag.orange { border-color: color-mix(in srgb, var(--sf-primary-hover, #ffb000) 42%, transparent); } .cr-tag.orange::before { border-color: var(--sf-primary-hover, #ffb000); } .cr-tag.purple { border-color: color-mix(in srgb, var(--sf-secondary, #7c3cff) 65%, transparent); } .cr-tag.purple::before { border-color: var(--sf-secondary, #7c3cff); } .cr-actions { display: flex; align-items: center; gap: 16px; margin-top: 8px; } .cr-hero-btn { height: 66px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-size: 17px; font-weight: 900; line-height: 1; white-space: nowrap; transition: .25s ease; } .cr-hero-btn--main { width: 245px; color: var(--cr-btn-custom-color, #fff); background: var(--cr-btn-custom-bg, linear-gradient(135deg, var(--sf-primary, #ff6a00), var(--sf-primary-hover, #ffb000))); box-shadow: 0 0 38px color-mix(in srgb, var(--sf-primary, #ff6a00) 26%, transparent); animation: crFloatButton 2.8s ease-in-out infinite; } .cr-hero-btn--second { width: 175px; color: var(--sf-accent, #22d3ee); background: transparent; border: 1px solid var(--sf-accent-hover, #00c8ff); } .cr-floating-card.cr-shape--straight_card { transform: none; border-radius: 24px; } .cr-floating-card.cr-shape--circle { transform: none; border-radius: 50%; } .cr-floating-card.cr-shape--clean { transform: none; background: transparent; box-shadow: none; border-radius: 0; width: auto; height: auto; max-width: 320px; max-height: 320px; } .cr-floating-card.cr-shape--clean .cr-floating-card__img { border-radius: 18px; max-height: 320px; } /* Button Shapes */ .cr-btn-shape--pill .cr-hero-btn { border-radius: 999px; } .cr-btn-shape--sharp .cr-hero-btn { border-radius: 4px; } .cr-btn-shape--rounded .cr-hero-btn { border-radius: 12px; } /* Button Sizes */ .cr-btn-size--sm .cr-hero-btn { height: 48px; font-size: 14px; padding: 0 20px; width: auto; min-width: 140px; } .cr-btn-size--md .cr-hero-btn { height: 66px; font-size: 17px; } .cr-btn-size--lg .cr-hero-btn { height: 76px; font-size: 19px; padding: 0 32px; width: auto; min-width: 260px; } /* Typography sizes */ .cr-title--size-32 { font-size: 32px !important; } .cr-title--size-36 { font-size: 36px !important; } .cr-title--size-40 { font-size: 40px !important; } .cr-title--size-48 { font-size: 48px !important; } .cr-title--size-56 { font-size: 56px !important; } .cr-title--size-64 { font-size: 64px !important; } .cr-desc--size-14 { font-size: 14px !important; } .cr-desc--size-16 { font-size: 16px !important; } .cr-desc--size-18 { font-size: 18px !important; } .cr-desc--size-20 { font-size: 20px !important; } /* Image fit & position */ .cr-fit--cover { object-fit: cover !important; } .cr-fit--contain { object-fit: contain !important; } .cr-fit--fill { object-fit: fill !important; } .cr-pos--center { object-position: center !important; } .cr-pos--top { object-position: top !important; } .cr-pos--bottom { object-position: bottom !important; } /* Animation controls */ .cr-hero-section.no-animation .cr-hero-btn--main, .cr-hero-section.no-animation .cr-tag, .cr-hero-section.no-animation .cr-floating-card { animation: none !important; } .cr-hero-btn:hover { transform: translateY(-3px); } @keyframes crFloatButton { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes crGradientSlide { 0% { background-position: 0% center; } 100% { background-position: 100% center; } } @keyframes crTagFloatA { 0%, 100% { transform: translate(0, 0); } 35% { transform: translate(-4px, -8px); } 70% { transform: translate(3px, 4px); } } @keyframes crTagFloatB { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(5px, 6px); } 75% { transform: translate(-3px, -7px); } } @keyframes crTagFloatC { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(4px, -6px); } 68% { transform: translate(-5px, 5px); } } @media (max-width: 768px) { .cr-hero-section { padding: 20px 12px 0; } .cr-wrap { max-width: 100%; } .cr-hero { min-height: auto; grid-template-columns: 1fr; gap: 0; padding-top: 12px; } .cr-content { width: 100%; max-width: 100%; text-align: center; justify-self: center; order: 1; padding-top: 22px; } .cr-trust-badge { margin-inline: auto; margin-bottom: 16px; min-height: 32px; padding: 0 12px; font-size: 12px; border-radius: 10px; } .cr-trust-badge svg { width: 15px; height: 15px; } .cr-visual { display: none; } .cr-title { font-size: 34px; line-height: 1.1; margin-bottom: 18px; } .cr-desc { max-width: 92%; margin: 0 auto 20px; font-size: 14px; line-height: 1.85; } .cr-tags { justify-content: center; gap: 12px 14px; margin-bottom: 34px; } .cr-tag { height: 38px; padding: 0 14px; font-size: 12px; } .cr-actions { justify-content: center; gap: 10px; margin-top: 10px; } .cr-hero-btn { height: 58px; font-size: 14px; border-radius: 12px; } .cr-hero-btn--main { width: 205px; } .cr-hero-btn--second { width: 150px; } } @media (max-width: 390px) { .cr-hero-section { padding-left: 8px; padding-right: 8px; } .cr-title { font-size: 30px; } .cr-desc { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .cr-tag, .cr-hero-btn--main, .cr-title .year-gradient { animation: none; } } /* |-------------------------------------------------------------------------- | Plus-concept flow |-------------------------------------------------------------------------- | Also ported 1:1. The track is a flex row (instead of a fixed 5-column grid) | so the layout still holds when a merchant empties one of the three cards. */ .cp-plus-concept { width: 100%; padding: 72px 10px 84px; overflow: hidden; color: var(--sf-text, #fff); background: linear-gradient(180deg, var(--sf-bg, #070e1a) 0%, transparent 18%, transparent 78%, var(--sf-bg, #070e1a) 100%), radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 15%, transparent) 0%, transparent 28%), radial-gradient(circle at 18% 62%, color-mix(in srgb, var(--sf-accent, #22d3ee) 6%, transparent) 0%, transparent 24%), radial-gradient(circle at 82% 62%, color-mix(in srgb, var(--sf-primary, #ff6a00) 7%, transparent) 0%, transparent 22%), linear-gradient(180deg, var(--sf-bg, #070e1a) 0%, color-mix(in srgb, var(--sf-bg, #070e1a) 82%, var(--sf-surface, #101827)) 42%, var(--sf-bg, #070e1a) 76%, var(--sf-bg, #070e1a) 100%); } .cp-plus-concept-wrap { max-width: 1080px; margin: 0 auto; } .cp-plus-concept-head { text-align: center; max-width: 760px; margin: 0 auto 42px; } .cp-plus-concept-head h2 { margin: 0 0 12px; font-size: 42px; line-height: 1.15; font-weight: 900; color: var(--sf-text, #ffffff); letter-spacing: -.5px; } .cp-plus-concept-head p { margin: 0; font-size: 17px; line-height: 1.9; font-weight: 500; color: color-mix(in srgb, var(--sf-text, #ffffff) 72%, transparent); } .cp-plus-orange-text { color: var(--sf-primary, #ff8a00); font-weight: 800; } .cp-plus-track { width: 100%; display: flex; align-items: center; gap: 10px; } .cp-plus-card { flex: 1 1 95px; min-width: 0; min-height: 210px; border-radius: 28px; padding: 24px 12px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cp-plus-card.right { background: linear-gradient(180deg, color-mix(in srgb, var(--sf-surface, #111827) 96%, transparent) 0%, color-mix(in srgb, var(--sf-bg, #0c121f) 92%, transparent) 100%); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02); animation: cpFloatRight 4.8s ease-in-out infinite; } .cp-plus-card.center { background: linear-gradient(180deg, color-mix(in srgb, var(--sf-secondary, #7c3cff) 26%, var(--sf-surface, #111827)) 0%, color-mix(in srgb, var(--sf-surface, #111827) 94%, transparent) 100%); border: 1px solid color-mix(in srgb, var(--sf-secondary, #7c3cff) 45%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--sf-secondary, #7c3cff) 10%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--sf-secondary, #7c3cff) 6%, transparent); animation: cpFloatCenter 4.8s ease-in-out infinite; animation-delay: .35s; } .cp-plus-card.left { background: linear-gradient(180deg, color-mix(in srgb, var(--sf-accent, #22d3ee) 18%, var(--sf-surface, #111827)) 0%, color-mix(in srgb, var(--sf-surface, #111827) 94%, transparent) 100%); border: 1px solid color-mix(in srgb, var(--sf-accent, #22d3ee) 34%, transparent); box-shadow: 0 0 34px color-mix(in srgb, var(--sf-accent, #22d3ee) 8%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--sf-accent, #22d3ee) 5%, transparent); animation: cpFloatLeft 4.8s ease-in-out infinite; animation-delay: .7s; } .cp-plus-icon { width: 62px; height: 62px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; flex: 0 0 auto; } .cp-plus-card.right .cp-plus-icon { background: rgba(255, 255, 255, .06); } .cp-plus-card.center .cp-plus-icon { background: color-mix(in srgb, var(--sf-secondary, #7c3cff) 22%, transparent); } .cp-plus-card.left .cp-plus-icon { background: color-mix(in srgb, var(--sf-accent, #22d3ee) 14%, transparent); } .cp-plus-icon svg { width: 28px; height: 28px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cp-plus-card.right .cp-plus-icon svg { stroke: rgba(255, 255, 255, .66); fill: rgba(255, 255, 255, .66); } .cp-plus-card.center .cp-plus-icon svg { stroke: var(--sf-secondary, #7c3cff); } .cp-plus-card.left .cp-plus-icon svg { stroke: var(--sf-accent, #22d3ee); } .cp-plus-card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; font-weight: 800; } .cp-plus-card p { margin: 0; font-size: 14px; line-height: 1.55; font-weight: 500; } .cp-plus-card.right h3, .cp-plus-card.right p { color: var(--sf-text, #ffffff); } .cp-plus-card.center h3, .cp-plus-card.center p { color: color-mix(in srgb, var(--sf-secondary, #7c3cff) 55%, #ffffff); } .cp-plus-card.left h3, .cp-plus-card.left p { color: var(--sf-accent, #22d3ee); } .cp-plus-path { flex: 0 0 68px; width: 68px; height: 34px; position: relative; overflow: hidden; } .cp-plus-path::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); border-radius: 20px; } .cp-plus-path::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 10px; transform: translateY(-50%); background: radial-gradient(circle, rgba(255, 255, 255, .14) 1.2px, transparent 1.6px) center / 18px 10px repeat-x; opacity: .55; pointer-events: none; } .cp-plus-path.purple::before { background: linear-gradient(90deg, color-mix(in srgb, var(--sf-accent, #22d3ee) 8%, transparent) 0%, var(--sf-secondary, #7c3cff) 48%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 10%, transparent) 100%); box-shadow: 0 0 16px color-mix(in srgb, var(--sf-secondary, #7c3cff) 22%, transparent); } .cp-plus-path.orange::before { background: linear-gradient(90deg, color-mix(in srgb, var(--sf-primary-hover, #ffb000) 6%, transparent) 0%, var(--sf-primary, #ff6a00) 48%, color-mix(in srgb, var(--sf-primary-hover, #ffb000) 10%, transparent) 100%); box-shadow: 0 0 16px color-mix(in srgb, var(--sf-primary, #ff6a00) 22%, transparent); } .cp-plus-path .cp-marker { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); opacity: .8; } .cp-plus-path .cp-marker.m1 { inset-inline-end: 14%; } .cp-plus-path .cp-marker.m2 { inset-inline-end: 48%; } .cp-plus-path .cp-marker.m3 { inset-inline-end: 82%; } .cp-plus-path.purple .cp-marker { background: var(--sf-secondary, #7c3cff); box-shadow: 0 0 10px color-mix(in srgb, var(--sf-secondary, #7c3cff) 45%, transparent); } .cp-plus-path.orange .cp-marker { background: var(--sf-primary, #ff6a00); box-shadow: 0 0 10px color-mix(in srgb, var(--sf-primary, #ff6a00) 42%, transparent); } /* Travelling dot: right-to-left for RTL stores (the original), mirrored for LTR stores so it always follows the reading direction. */ .cp-plus-dot { position: absolute; top: 50%; right: -10px; width: 10px; height: 10px; border-radius: 50%; transform: translateY(-50%); z-index: 3; animation: cpJourney 2.9s linear infinite; } html[dir="ltr"] .cp-plus-dot { right: auto; left: -10px; animation-name: cpJourneyLtr; } .cp-plus-path.purple .cp-plus-dot { background: var(--sf-secondary, #7c3cff); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sf-secondary, #7c3cff) 10%, transparent), 0 0 14px color-mix(in srgb, var(--sf-secondary, #7c3cff) 85%, transparent); } .cp-plus-path.orange .cp-plus-dot { background: var(--sf-primary, #ff6a00); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sf-primary, #ff6a00) 10%, transparent), 0 0 14px color-mix(in srgb, var(--sf-primary, #ff6a00) 85%, transparent); animation-delay: .55s; } @keyframes cpFloatRight { 0% { transform: translateY(0); } 25% { transform: translateY(-8px); } 50% { transform: translateY(-14px); } 75% { transform: translateY(-6px); } 100% { transform: translateY(0); } } @keyframes cpFloatCenter { 0% { transform: translateY(-8px); } 25% { transform: translateY(-14px); } 50% { transform: translateY(-2px); } 75% { transform: translateY(-12px); } 100% { transform: translateY(-8px); } } @keyframes cpFloatLeft { 0% { transform: translateY(-2px); } 25% { transform: translateY(-6px); } 50% { transform: translateY(-14px); } 75% { transform: translateY(-8px); } 100% { transform: translateY(-2px); } } @keyframes cpJourney { 0% { right: -10px; opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { right: calc(100% + 10px); opacity: 0; } } @keyframes cpJourneyLtr { 0% { left: -10px; opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { left: calc(100% + 10px); opacity: 0; } } @media (max-width: 900px) { .cp-plus-concept-head h2 { font-size: 33px; } .cp-plus-concept-head p { font-size: 15px; } .cp-plus-track { gap: 8px; } .cp-plus-card { flex-basis: 86px; min-height: 180px; padding: 18px 8px 14px; border-radius: 24px; } .cp-plus-path { flex-basis: 44px; width: 44px; height: 30px; } .cp-plus-path .cp-marker { width: 7px; height: 7px; } .cp-plus-icon { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 14px; } .cp-plus-icon svg { width: 24px; height: 24px; } .cp-plus-card h3 { font-size: 15px; margin-bottom: 8px; } .cp-plus-card p { font-size: 11.8px; line-height: 1.5; } } @media (max-width: 600px) { .cp-plus-concept { padding: 44px 8px 56px; } .cp-plus-concept-head { margin-bottom: 28px; } .cp-plus-concept-head h2 { font-size: 27px; margin-bottom: 10px; } .cp-plus-concept-head p { font-size: 13px; line-height: 1.8; } .cp-plus-track { gap: 6px; } .cp-plus-card { flex-basis: 82px; min-height: 160px; padding: 14px 6px 12px; border-radius: 20px; } .cp-plus-path { flex-basis: 28px; width: 28px; height: 24px; } .cp-plus-path .cp-marker { width: 6px; height: 6px; } .cp-plus-dot { width: 8px; height: 8px; } .cp-plus-icon { width: 46px; height: 46px; border-radius: 14px; margin-bottom: 12px; } .cp-plus-icon svg { width: 21px; height: 21px; } .cp-plus-card h3 { font-size: 13px; margin-bottom: 6px; } .cp-plus-card p { font-size: 10.3px; line-height: 1.45; } } @media (prefers-reduced-motion: reduce) { .cp-plus-card, .cp-plus-dot { animation: none; } } /* |-------------------------------------------------------------------------- | Categories mosaic |-------------------------------------------------------------------------- | Ported 1:1 from the approved categories block: two columns whose row splits | deliberately do not align, gradient-border cards with a sweeping highlight, | a pulsing corner glow and an oversized watermark glyph. */ .crunch-categories-section { width: 100%; position: relative; overflow: hidden; padding: 58px 20px 76px; color: var(--sf-text, #fff); background: linear-gradient(180deg, var(--sf-bg, #070e1a) 0%, transparent 14%, transparent 82%, var(--sf-bg, #070e1a) 100%), radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 12%, transparent), transparent 31%), radial-gradient(circle at 78% 34%, color-mix(in srgb, var(--sf-primary, #ff6a00) 10%, transparent), transparent 28%), radial-gradient(circle at 20% 72%, color-mix(in srgb, var(--sf-accent, #22d3ee) 8%, transparent), transparent 30%), linear-gradient(180deg, var(--sf-bg, #070a12) 0%, color-mix(in srgb, var(--sf-bg, #070a12) 78%, var(--sf-surface, #101827)) 50%, var(--sf-bg, #070a12) 100%); } .crunch-categories-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .018) 45%, transparent 70%); } .crunch-v2-wrap { width: min(1180px, 100%); margin: 0 auto; position: relative; z-index: 2; } .crunch-v2-head { max-width: 760px; margin: 0 auto 34px; text-align: center; } .crunch-v2-title { margin: 0; color: var(--sf-text, #fff); font-size: clamp(30px, 4vw, 48px); line-height: 1.15; font-weight: 900; letter-spacing: -1px; } .crunch-v2-title span { background: linear-gradient(90deg, var(--sf-primary, #ff8a00) 0%, var(--sf-primary-hover, #ffb000) 28%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 62%, #ffffff) 58%, var(--sf-secondary, #7c3cff) 78%, var(--sf-primary, #ff8a00) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: crunchTitleGradientMove 6.5s ease-in-out infinite; } .crunch-v2-subtitle { margin: 12px 0 0; color: color-mix(in srgb, var(--sf-text, #fff) 68%, transparent); font-size: 16px; line-height: 1.8; font-weight: 700; } .crunch-v2-layout { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(270px, .88fr); gap: 20px; align-items: stretch; } .crunch-v2-right { display: grid; grid-template-rows: 1.38fr .78fr; gap: 20px; min-height: 660px; } .crunch-v2-left { display: grid; grid-template-rows: .82fr 1.18fr; gap: 20px; min-height: 625px; padding-top: 30px; padding-bottom: 4px; } /* A column holding a single tile must not stretch it to the full two-row height, so a store with fewer than four categories still looks composed. */ .crunch-v2-right:has(> :only-child), .crunch-v2-left:has(> :only-child) { grid-template-rows: auto; min-height: 0; } .crunch-v2-card { --c1: color-mix(in srgb, var(--sf-primary, #ff8a00) 72%, transparent); --c2: color-mix(in srgb, var(--sf-secondary, #7c3cff) 52%, transparent); --c3: color-mix(in srgb, var(--sf-accent, #22d3ee) 56%, transparent); --glow: color-mix(in srgb, var(--sf-primary, #ff6a00) 8%, transparent); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; border-radius: 28px; padding: 24px; text-decoration: none; border: 1.5px solid transparent; background: linear-gradient(145deg, color-mix(in srgb, var(--sf-surface, #111827) 90%, transparent), color-mix(in srgb, var(--sf-bg, #0b1020) 86%, transparent)) padding-box, linear-gradient(135deg, var(--c1), var(--c2), var(--c3)) border-box; box-shadow: 0 18px 46px rgba(0, 0, 0, .28), 0 0 20px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .05); transition: transform .28s ease, box-shadow .28s ease; } .crunch-v2-card::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%; inset-inline-start: -90px; top: -105px; z-index: -1; filter: blur(8px); background: radial-gradient(circle, var(--glow), transparent 68%); animation: crunchGlowPulse 5.6s ease-in-out infinite; pointer-events: none; } .crunch-v2-card::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .04) 48%, transparent 62%); transform: translateX(135%); animation: crunchCardSweep 7.6s ease-in-out infinite; } .crunch-v2-card:hover { transform: translateY(-5px); box-shadow: 0 23px 60px rgba(0, 0, 0, .35), 0 0 28px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .06); } .crunch-v2-app { --c1: color-mix(in srgb, var(--sf-primary, #ff6a00) 95%, transparent); --c2: color-mix(in srgb, var(--sf-secondary, #7c3cff) 78%, transparent); --c3: color-mix(in srgb, var(--sf-accent, #22d3ee) 58%, transparent); --glow: color-mix(in srgb, var(--sf-primary, #ff6a00) 11%, transparent); } .crunch-v2-bundle { --c1: color-mix(in srgb, var(--sf-warning, #f6c453) 92%, transparent); --c2: color-mix(in srgb, var(--sf-primary, #ff8a00) 70%, transparent); --c3: color-mix(in srgb, var(--sf-secondary, #7c3cff) 48%, transparent); --glow: color-mix(in srgb, var(--sf-warning, #f6c453) 10%, transparent); } .crunch-v2-snap { --c1: color-mix(in srgb, var(--sf-primary, #ff8a00) 92%, transparent); --c2: color-mix(in srgb, var(--sf-warning, #f6c453) 54%, transparent); --c3: color-mix(in srgb, var(--sf-secondary, #7c3cff) 45%, transparent); --glow: color-mix(in srgb, var(--sf-primary, #ff8a00) 9%, transparent); } .crunch-v2-games { --c1: color-mix(in srgb, var(--sf-accent, #22d3ee) 86%, transparent); --c2: color-mix(in srgb, var(--sf-secondary, #7c3cff) 55%, transparent); --c3: color-mix(in srgb, var(--sf-primary, #ff8a00) 42%, transparent); --glow: color-mix(in srgb, var(--sf-accent, #22d3ee) 8%, transparent); } .crunch-v2-layout .crunch-v2-app { padding: 40px; border-width: 2px; } .crunch-v2-layout .crunch-v2-bundle { margin-inline-start: 44px; min-height: 265px; padding-bottom: 48px; } .crunch-v2-layout .crunch-v2-snap { margin-inline-end: 22px; min-height: 225px; } .crunch-v2-layout .crunch-v2-games { margin-inline-start: 18px; min-height: 290px; } .crunch-v2-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; z-index: 2; } .crunch-v2-icon { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; position: relative; background: linear-gradient(135deg, color-mix(in srgb, var(--sf-primary, #ff6a00) 26%, transparent), color-mix(in srgb, var(--sf-secondary, #7c3cff) 17%, transparent)); border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 0 18px color-mix(in srgb, var(--sf-primary, #ff6a00) 6%, transparent); } .crunch-v2-icon svg { width: 25px; height: 25px; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .crunch-v2-icon-img { width: 100%; height: 100%; object-fit: cover; } .crunch-v2-app .crunch-v2-icon svg, .crunch-v2-snap .crunch-v2-icon svg { stroke: var(--sf-primary, #ff8a00); } .crunch-v2-bundle .crunch-v2-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--sf-warning, #f6c453) 20%, transparent), color-mix(in srgb, var(--sf-primary, #ff8a00) 12%, transparent)); } .crunch-v2-bundle .crunch-v2-icon svg { stroke: var(--sf-warning, #f6c453); } .crunch-v2-games .crunch-v2-icon { background: linear-gradient(135deg, color-mix(in srgb, var(--sf-accent, #22d3ee) 22%, transparent), color-mix(in srgb, var(--sf-secondary, #7c3cff) 12%, transparent)); } .crunch-v2-games .crunch-v2-icon svg { stroke: var(--sf-accent, #22d3ee); } .crunch-v2-index { min-width: 42px; min-height: 28px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: color-mix(in srgb, var(--sf-text, #fff) 48%, transparent); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); font-size: 10px; font-weight: 900; } .crunch-v2-content { position: relative; z-index: 2; margin-top: auto; padding-top: 28px; } .crunch-v2-card-title { margin: 0; color: var(--sf-text, #fff); font-size: 23px; line-height: 1.25; font-weight: 900; letter-spacing: -.35px; } .crunch-v2-app .crunch-v2-card-title { font-size: clamp(30px, 3vw, 39px); } .crunch-v2-text { margin: 10px 0 0; color: color-mix(in srgb, var(--sf-text, #fff) 68%, transparent); font-size: 13.5px; line-height: 1.8; font-weight: 650; max-width: 560px; } .crunch-v2-app .crunch-v2-text { font-size: 15.5px; } .crunch-v2-footer { display: flex; align-items: center; gap: 9px; margin-top: 20px; color: var(--sf-primary, #ff8a00); font-size: 12px; font-weight: 900; } .crunch-v2-bundle .crunch-v2-footer { color: var(--sf-warning, #f6c453); } .crunch-v2-games .crunch-v2-footer { color: var(--sf-accent, #22d3ee); } .crunch-v2-arrow { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; color: var(--sf-text, #fff); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); } .crunch-v2-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } html[dir="ltr"] .crunch-v2-arrow svg { transform: rotate(180deg); } .crunch-v2-watermark { position: absolute; z-index: 1; pointer-events: none; inset-inline-start: 22px; top: 22px; width: 108px; height: 108px; opacity: .065; } .crunch-v2-app .crunch-v2-watermark { width: 190px; height: 190px; inset-inline-start: 28px; top: 24px; opacity: .075; } .crunch-v2-watermark svg { width: 100%; height: 100%; fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; } .crunch-v2-app .crunch-v2-watermark svg, .crunch-v2-snap .crunch-v2-watermark svg { stroke: var(--sf-primary, #ff8a00); } .crunch-v2-bundle .crunch-v2-watermark svg { stroke: var(--sf-warning, #f6c453); } .crunch-v2-games .crunch-v2-watermark svg { stroke: var(--sf-accent, #22d3ee); } .crunch-v2-more { margin-top: 30px; text-align: center; } .crunch-v2-more a { display: inline-flex; align-items: center; gap: 10px; color: var(--sf-primary, #ff8a00); font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; } .crunch-v2-more a:hover { color: var(--sf-primary-hover, #ffb000); } @keyframes crunchTitleGradientMove { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes crunchCardSweep { 0%, 62% { transform: translateX(135%); opacity: 0; } 72% { opacity: .75; } 100% { transform: translateX(-135%); opacity: 0; } } @keyframes crunchGlowPulse { 0%, 100% { opacity: .34; transform: scale(.94); } 50% { opacity: .68; transform: scale(1.08); } } @media (max-width: 900px) { .crunch-categories-section { padding: 42px 12px 56px; } .crunch-v2-head { margin-bottom: 26px; } .crunch-v2-title { font-size: 31px; } .crunch-v2-subtitle { font-size: 13px; } .crunch-v2-layout { grid-template-columns: minmax(0, 1.22fr) minmax(210px, .78fr); gap: 13px; } .crunch-v2-right, .crunch-v2-left { min-height: 555px; gap: 13px; } .crunch-v2-left { padding-top: 22px; } .crunch-v2-app { padding: 28px 22px; } .crunch-v2-card { padding: 20px 16px; border-radius: 23px; } .crunch-v2-bundle { margin-inline-start: 30px; } .crunch-v2-snap { margin-inline-end: 14px; } .crunch-v2-games { margin-inline-start: 10px; } .crunch-v2-icon { width: 47px; height: 47px; flex-basis: 47px; border-radius: 14px; } .crunch-v2-icon svg { width: 21px; height: 21px; } .crunch-v2-card-title { font-size: 18px; } .crunch-v2-app .crunch-v2-card-title { font-size: 27px; } .crunch-v2-text { font-size: 11.5px; } .crunch-v2-app .crunch-v2-text { font-size: 13px; } } /* Mobile keeps the two columns — the tiles never stack into single rows. */ @media (max-width: 560px) { .crunch-categories-section { padding: 34px 8px 44px; } .crunch-v2-head { margin-bottom: 21px; } .crunch-v2-title { font-size: 27px; } .crunch-v2-subtitle { font-size: 11px; line-height: 1.65; } .crunch-v2-layout { grid-template-columns: minmax(0, 1.18fr) minmax(105px, .82fr); gap: 8px; } .crunch-v2-right { min-height: 390px; gap: 8px; grid-template-rows: 1.40fr .82fr; } .crunch-v2-left { min-height: 355px; gap: 8px; padding-top: 17px; padding-bottom: 2px; grid-template-rows: .78fr 1.22fr; } .crunch-v2-card, .crunch-v2-app { padding: 13px 10px; border-radius: 17px; } .crunch-v2-bundle { margin-inline-start: 15px; min-height: 150px; padding-bottom: 26px; } .crunch-v2-snap { margin-inline-end: 7px; min-height: 125px; } .crunch-v2-games { margin-inline-start: 5px; min-height: 195px; } .crunch-v2-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; } .crunch-v2-icon svg { width: 18px; height: 18px; } .crunch-v2-index { min-width: 29px; min-height: 21px; padding: 0 5px; font-size: 7px; } .crunch-v2-content { padding-top: 14px; } .crunch-v2-card-title { font-size: 12px; } .crunch-v2-app .crunch-v2-card-title { font-size: 19px; } .crunch-v2-text { margin-top: 6px; font-size: 8.2px; line-height: 1.5; } .crunch-v2-app .crunch-v2-text { font-size: 9.5px; } .crunch-v2-footer { gap: 5px; margin-top: 10px; font-size: 7.8px; } .crunch-v2-arrow { width: 21px; height: 21px; border-radius: 7px; } .crunch-v2-arrow svg { width: 11px; height: 11px; } .crunch-v2-watermark { width: 65px; height: 65px; inset-inline-start: 8px; top: 8px; } .crunch-v2-app .crunch-v2-watermark { width: 110px; height: 110px; inset-inline-start: 10px; top: 10px; } } @media (hover: none) { .crunch-v2-card:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { .crunch-v2-title span, .crunch-v2-card::before, .crunch-v2-card::after { animation: none; } } /* |-------------------------------------------------------------------------- | Social proof / steps / story |-------------------------------------------------------------------------- | Ported 1:1 from the approved blocks. Shared gradient-text helper first. */ .crunch-gradient-text { background: linear-gradient(90deg, var(--sf-primary, #ff8a00) 0%, var(--sf-primary-hover, #ffb000) 28%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 62%, #ffffff) 58%, var(--sf-secondary, #7c3cff) 78%, var(--sf-primary, #ff8a00) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: crunchTitleGradientMove 6s ease-in-out infinite; } .crunch-proof-section, .crunch-steps-section, .crunch-story-section { width: 100%; overflow: hidden; position: relative; color: var(--sf-text, #ffffff); } .crunch-proof-section::before, .crunch-steps-section::before, .crunch-story-section::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--sf-bg, #070e1a) 0%, transparent 15%, transparent 85%, var(--sf-bg, #070e1a) 100%), linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .012) 48%, transparent 72%); } /* ── Proof ───────────────────────────────────────────── */ .crunch-proof-section { padding: 54px 16px 48px; background: linear-gradient(180deg, var(--sf-bg, #070e1a) 0%, var(--sf-bg, #070e1a) 9%, color-mix(in srgb, var(--sf-bg, #070e1a) 96%, transparent) 18%, color-mix(in srgb, var(--sf-surface, #080f20) 60%, var(--sf-bg, #070e1a)) 42%, color-mix(in srgb, var(--sf-surface, #080f20) 60%, var(--sf-bg, #070e1a)) 68%, color-mix(in srgb, var(--sf-bg, #070e1a) 96%, transparent) 86%, var(--sf-bg, #070e1a) 100%), radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--sf-primary-hover, #ffb000) 6%, transparent), transparent 27%), radial-gradient(circle at 20% 76%, color-mix(in srgb, var(--sf-accent, #22d3ee) 3%, transparent), transparent 22%), radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 5%, transparent), transparent 24%); } .crunch-proof-wrap { width: min(1080px, 100%); margin: 0 auto; position: relative; z-index: 2; text-align: center; } .crunch-proof-kicker { margin: 0 0 16px; color: color-mix(in srgb, var(--sf-text, #fff) 74%, transparent); font-size: clamp(14px, 2vw, 18px); line-height: 1.7; font-weight: 700; } .crunch-proof-number { margin: 0; font-size: clamp(58px, 10vw, 104px); line-height: .95; font-weight: 950; letter-spacing: -2px; color: var(--sf-primary-hover, #ffb000); text-shadow: 0 0 12px color-mix(in srgb, var(--sf-primary, #ff6a00) 12%, transparent), 0 0 22px color-mix(in srgb, var(--sf-primary-hover, #ffb000) 8%, transparent); } .crunch-proof-title { margin: 18px 0 28px; color: color-mix(in srgb, var(--sf-text, #fff) 88%, transparent); font-size: clamp(17px, 2.4vw, 22px); line-height: 1.7; font-weight: 900; } .crunch-proof-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: min(860px, 100%); margin: 0 auto; } .crunch-proof-card { min-height: 58px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .03)), color-mix(in srgb, var(--sf-surface, #111827) 72%, transparent); border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 10px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .05); display: flex; align-items: center; justify-content: center; gap: 9px; color: var(--sf-text, #ffffff); font-size: 13px; font-weight: 900; line-height: 1.35; text-align: center; } .crunch-proof-icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-flex; align-items: center; justify-content: center; } .crunch-proof-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--sf-accent, #22d3ee); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .crunch-proof-icon.gold svg { stroke: var(--sf-primary-hover, #ffb000); } /* ── Steps ───────────────────────────────────────────── */ .crunch-steps-section { padding: 50px 18px 54px; background: linear-gradient(180deg, var(--sf-bg, #070e1a) 0%, var(--sf-bg, #070e1a) 8%, color-mix(in srgb, var(--sf-bg, #070e1a) 96%, transparent) 17%, color-mix(in srgb, var(--sf-surface, #080f20) 60%, var(--sf-bg, #070e1a)) 40%, color-mix(in srgb, var(--sf-surface, #080f20) 60%, var(--sf-bg, #070e1a)) 68%, color-mix(in srgb, var(--sf-bg, #070e1a) 96%, transparent) 88%, var(--sf-bg, #070e1a) 100%), radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 5%, transparent), transparent 24%), radial-gradient(circle at 78% 70%, color-mix(in srgb, var(--sf-accent, #22d3ee) 3%, transparent), transparent 22%), radial-gradient(circle at 50% 84%, color-mix(in srgb, var(--sf-primary, #ff6a00) 4%, transparent), transparent 25%); } .crunch-steps-wrap { max-width: 1120px; margin: 0 auto; position: relative; z-index: 2; } .crunch-steps-head { text-align: center; margin-bottom: 42px; } .crunch-steps-title { margin: 0 0 12px; color: var(--sf-text, #ffffff); font-size: clamp(28px, 4vw, 44px); font-weight: 950; line-height: 1.25; letter-spacing: -1px; } .crunch-steps-subtitle { margin: 0 auto; max-width: 620px; color: color-mix(in srgb, var(--sf-text, #fff) 68%, transparent); font-size: clamp(13px, 1.7vw, 16px); line-height: 1.9; font-weight: 700; } .crunch-steps-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; } .crunch-journey-line { position: absolute; top: 36px; inset-inline-end: 13%; width: 74%; height: 72px; z-index: 1; pointer-events: none; } /* The path is authored right-to-left; LTR stores mirror the whole drawing. */ html[dir="ltr"] .crunch-journey-line { transform: scaleX(-1); } .crunch-journey-line svg { width: 100%; height: 100%; overflow: visible; } .crunch-journey-path-bg { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 4; stroke-linecap: round; } .crunch-journey-path { fill: none; stroke: url(#crunchGradient); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 950; stroke-dashoffset: 950; animation: crunchPathMove 5.2s linear infinite; } .crunch-moving-dot { animation: crunchDotFade 5.2s linear infinite; } .crunch-step-card { position: relative; z-index: 3; min-height: 186px; padding: 0 12px 12px; text-align: center; } .crunch-step-icon { width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 23px; font-weight: 950; position: relative; box-shadow: 0 14px 34px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .18); animation: crunchStepFloat 4s ease-in-out infinite; } .crunch-step-icon::before { content: ""; position: absolute; inset: -8px; border-radius: inherit; background: inherit; filter: blur(12px); opacity: .24; z-index: -1; } /* The journey line is the track's first child, so the cards start at :nth-child(2). */ .crunch-step-card:nth-child(2) .crunch-step-icon { background: linear-gradient(135deg, var(--sf-primary, #ff6a00), var(--sf-primary-hover, #ff8a00)); animation-delay: 0s; } .crunch-step-card:nth-child(3) .crunch-step-icon { background: linear-gradient(135deg, var(--sf-secondary, #7c3cff), color-mix(in srgb, var(--sf-secondary, #7c3cff) 80%, #ffffff)); animation-delay: .25s; } .crunch-step-card:nth-child(4) .crunch-step-icon { background: linear-gradient(135deg, var(--sf-accent, #22d3ee), var(--sf-accent-hover, #19b7d4)); animation-delay: .5s; } .crunch-step-title { margin: 0 0 9px; color: var(--sf-text, #ffffff); font-size: 20px; font-weight: 950; line-height: 1.4; } .crunch-step-text { margin: 0 auto; max-width: 290px; color: color-mix(in srgb, var(--sf-text, #fff) 70%, transparent); font-size: 14px; line-height: 1.85; font-weight: 700; } .crunch-steps-note { width: fit-content; max-width: 100%; margin: 20px auto 0; padding: 12px 18px; border-radius: 999px; color: color-mix(in srgb, var(--sf-primary-hover, #ffb000) 70%, #ffffff); background: color-mix(in srgb, var(--sf-primary-hover, #ffb000) 8%, transparent); border: 1px solid color-mix(in srgb, var(--sf-primary-hover, #ffb000) 18%, transparent); font-size: 13px; line-height: 1.7; font-weight: 900; text-align: center; } @keyframes crunchPathMove { 0% { stroke-dashoffset: 950; } 100% { stroke-dashoffset: 0; } } @keyframes crunchDotFade { 0%, 7% { opacity: 0; } 15%, 88% { opacity: 1; } 100% { opacity: 0; } } @keyframes crunchStepFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ── FAQ ─────────────────────────────────────────────── */ .cr-faq-section { width: 100%; position: relative; overflow: hidden; padding: 54px 16px 60px; color: var(--sf-text, #fff); background: linear-gradient(180deg, var(--sf-bg, #070e1a) 0%, color-mix(in srgb, var(--sf-surface, #080f20) 55%, var(--sf-bg, #070e1a)) 42%, var(--sf-bg, #070e1a) 100%), radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 9%, transparent), transparent 30%); } .cr-faq-wrap { width: min(860px, 100%); margin: 0 auto; position: relative; z-index: 2; } .cr-faq-head { text-align: center; margin-bottom: 32px; } .cr-faq-head h2 { margin: 0 0 12px; color: var(--sf-text, #fff); font-size: clamp(26px, 4vw, 40px); line-height: 1.25; font-weight: 950; letter-spacing: -.6px; } .cr-faq-head p { margin: 0 auto; max-width: 620px; color: color-mix(in srgb, var(--sf-text, #fff) 68%, transparent); font-size: clamp(13px, 1.7vw, 16px); line-height: 1.9; font-weight: 700; } .cr-faq-list { display: flex; flex-direction: column; gap: 12px; } .cr-faq-item { overflow: hidden; border: 1px solid var(--sf-border, #1f293d); border-radius: 18px; background: color-mix(in srgb, var(--sf-surface, #111827) 82%, transparent); transition: border-color .22s ease, background .22s ease; } .cr-faq-item.is-open { border-color: color-mix(in srgb, var(--sf-primary, #ff6a00) 45%, transparent); background: color-mix(in srgb, var(--sf-surface, #111827) 94%, transparent); } .cr-faq-head-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border: 0; background: transparent; color: var(--sf-text, #fff); font-family: inherit; font-size: 15px; font-weight: 800; line-height: 1.6; text-align: start; cursor: pointer; transition: color .18s; } .cr-faq-head-btn:hover { color: var(--sf-primary, #ff6a00); } .cr-faq-chevron { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sf-border, #1f293d); border-radius: 10px; color: var(--sf-primary, #ff6a00); transition: transform .25s ease, border-color .22s ease; } .cr-faq-chevron.is-open { transform: rotate(180deg); border-color: var(--sf-primary, #ff6a00); } .cr-faq-chevron svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .cr-faq-body { border-top: 1px solid var(--sf-border, #1f293d); } .cr-faq-body p { margin: 0; padding: 16px 22px 20px; color: color-mix(in srgb, var(--sf-text, #fff) 70%, transparent); font-size: 13.5px; line-height: 1.95; font-weight: 650; } @media (max-width: 560px) { .cr-faq-section { padding: 40px 10px 46px; } .cr-faq-head { margin-bottom: 24px; } .cr-faq-head h2 { font-size: 24px; } .cr-faq-head p { font-size: 12.5px; } .cr-faq-head-btn { padding: 15px 16px; font-size: 13px; gap: 12px; } .cr-faq-chevron { width: 26px; height: 26px; border-radius: 8px; } .cr-faq-body p { padding: 13px 16px 16px; font-size: 12px; } } /* ── Story ───────────────────────────────────────────── */ .crunch-story-section { padding: 54px 14px 64px; background: linear-gradient(180deg, var(--sf-bg, #070e1a) 0%, var(--sf-bg, #070e1a) 10%, color-mix(in srgb, var(--sf-bg, #070e1a) 96%, transparent) 18%, color-mix(in srgb, var(--sf-surface, #091022) 62%, var(--sf-bg, #070e1a)) 42%, color-mix(in srgb, var(--sf-surface, #080f20) 60%, var(--sf-bg, #070e1a)) 68%, color-mix(in srgb, var(--sf-bg, #070e1a) 96%, transparent) 86%, var(--sf-bg, #070e1a) 100%), radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 10%, transparent), transparent 32%), radial-gradient(circle at 18% 38%, color-mix(in srgb, var(--sf-accent, #22d3ee) 5%, transparent), transparent 26%), radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--sf-primary, #ff6a00) 5%, transparent), transparent 26%); } .crunch-story-wrap { width: min(1040px, 100%); margin: 0 auto; position: relative; z-index: 2; } .crunch-story-head { text-align: center; margin-bottom: 30px; } .crunch-story-head h2 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 38px); line-height: 1.35; font-weight: 950; color: var(--sf-text, #ffffff); letter-spacing: -.5px; } .crunch-story-head p { margin: 0 auto; max-width: 720px; font-size: clamp(13px, 1.7vw, 16px); line-height: 1.9; color: color-mix(in srgb, var(--sf-text, #fff) 70%, transparent); font-weight: 700; } .crunch-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .crunch-story-card { min-height: 176px; padding: 24px 22px; border-radius: 22px; background: radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 10%, transparent), transparent 38%), radial-gradient(circle at 84% 78%, color-mix(in srgb, var(--sf-accent, #22d3ee) 5%, transparent), transparent 34%), linear-gradient(180deg, color-mix(in srgb, var(--sf-surface, #111827) 82%, transparent) 0%, color-mix(in srgb, var(--sf-bg, #0b1020) 78%, transparent) 100%); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 14px 30px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .05); position: relative; overflow: hidden; } .crunch-story-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 999px; background: linear-gradient(180deg, var(--sf-primary, #ff8a00), var(--sf-secondary, #7c3cff), var(--sf-accent, #22d3ee)); opacity: .9; } .crunch-story-year { margin: 0 0 10px; color: color-mix(in srgb, var(--sf-text, #fff) 78%, transparent); font-size: 13px; line-height: 1.4; font-weight: 900; } .crunch-story-card h3 { margin: 0 0 12px; color: var(--sf-text, #ffffff); font-size: 18px; line-height: 1.45; font-weight: 950; } .crunch-story-card p { margin: 0; color: color-mix(in srgb, var(--sf-text, #fff) 67%, transparent); font-size: 13px; line-height: 1.85; font-weight: 650; } @media (max-width: 900px) { .crunch-proof-section { padding: 46px 12px 42px; } .crunch-proof-cards { gap: 8px; } .crunch-proof-card { min-height: 50px; padding: 10px 8px; font-size: 11px; border-radius: 13px; gap: 6px; } .crunch-proof-icon, .crunch-proof-icon svg { width: 15px; height: 15px; flex-basis: 15px; } .crunch-steps-section { padding: 46px 10px 46px; } .crunch-steps-head { margin-bottom: 34px; } .crunch-steps-track { gap: 12px; } .crunch-journey-line { top: 30px; inset-inline-end: 14%; width: 72%; height: 58px; } .crunch-step-card { min-height: 165px; padding: 0 4px 8px; } .crunch-step-icon { width: 62px; height: 62px; font-size: 19px; margin-bottom: 15px; } .crunch-step-title { font-size: 16px; } .crunch-step-text { max-width: 150px; font-size: 11.5px; line-height: 1.65; } .crunch-story-section { padding: 44px 10px 54px; } .crunch-story-grid { grid-template-columns: 1fr; gap: 12px; } .crunch-story-card { min-height: auto; padding: 20px 18px; border-radius: 18px; } .crunch-story-card h3 { font-size: 16px; } .crunch-story-card p { font-size: 12.5px; } } @media (max-width: 560px) { .crunch-proof-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crunch-proof-title { margin-bottom: 22px; } .crunch-steps-title { font-size: 27px; } .crunch-steps-subtitle { font-size: 12.5px; } .crunch-steps-track { grid-template-columns: repeat(3, 1fr); gap: 6px; } .crunch-journey-line { top: 25px; inset-inline-end: 13%; width: 74%; height: 44px; } .crunch-journey-path-bg, .crunch-journey-path { stroke-width: 3; } .crunch-step-icon { width: 54px; height: 54px; font-size: 16px; margin-bottom: 12px; } .crunch-step-icon::before { opacity: .18; filter: blur(9px); } .crunch-step-title { font-size: 13.5px; margin-bottom: 6px; } .crunch-step-text { max-width: 108px; font-size: 10.2px; line-height: 1.6; } .crunch-steps-note { margin-top: 16px; padding: 10px 12px; border-radius: 15px; font-size: 11.5px; line-height: 1.6; } .crunch-story-head h2 { font-size: 25px; } .crunch-story-head p { font-size: 12.5px; } } @media (max-width: 390px) { .crunch-proof-number { letter-spacing: -1px; } .crunch-proof-card { font-size: 10.2px; } .crunch-step-title { font-size: 12.5px; } .crunch-step-text { font-size: 9.6px; } } @media (prefers-reduced-motion: reduce) { .crunch-gradient-text, .crunch-journey-path, .crunch-moving-dot, .crunch-step-icon { animation: none; } } .cr-flash { background: linear-gradient(135deg, color-mix(in srgb, var(--sf-primary, #fa9429) 12%, transparent), color-mix(in srgb, var(--sf-secondary, #7c3cff) 12%, transparent)); } .cr-cta { background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sf-secondary, #7c3cff) 22%, transparent), transparent 65%), var(--sf-surface, #101827); } .cr-splash { background: var(--sf-bg, #050914); } /* :target based routing for the wishlist / compare panes. */ .cr-page { display: none; } body:has(#page-wishlist:target) #main-content, body:has(#page-compare:target) #main-content { display: none; } #page-wishlist:target, #page-compare:target { display: block; } /* |-------------------------------------------------------------------------- | Shared storefront components in the Crunsh skin |-------------------------------------------------------------------------- | Crunsh renders the unified cart drawer and checkout partials, so it ships | its own dark copy of the .sf-* classes those partials expect. */ .sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1.25rem; border: 1px solid var(--sf-border, #1f293d); border-radius: 999px; background: var(--sf-surface, #101827); color: var(--sf-text, #ffffff); font-size: .88rem; font-weight: 800; text-decoration: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s, transform .18s; } .sf-btn:hover { transform: translateY(-1px); } .sf-btn--primary { border-color: transparent; background: var(--sf-primary, #fa9429); color: #ffffff; box-shadow: 0 14px 30px color-mix(in srgb, var(--sf-primary, #fa9429) 22%, transparent); } .sf-btn--primary:hover { background: var(--sf-primary-hover, #d46e03); } .sf-btn--block { width: 100%; } .sf-btn--lg { padding: .95rem 1.45rem; font-size: .95rem; } .sf-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border: 1px solid var(--sf-border, #1f293d); border-radius: 999px; background: var(--sf-bg, #050914); color: var(--sf-text-muted, #b9bbbf); cursor: pointer; } .sf-icon-btn:hover { border-color: var(--sf-primary, #fa9429); color: var(--sf-primary, #fa9429); } .sf-empty { padding: 3rem 1rem; color: var(--sf-text-muted, #b9bbbf); text-align: center; } .sf-cart-drawer { position: fixed; inset: 0; z-index: 70; } .sf-cart-drawer__overlay { position: absolute; inset: 0; background: rgba(2, 6, 16, .68); backdrop-filter: blur(4px); } .sf-cart-drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(24rem, 100%); display: flex; flex-direction: column; background: var(--sf-surface, #101827); border-inline-start: 1px solid var(--sf-border, #1f293d); box-shadow: -18px 0 55px rgba(0, 0, 0, .55); transition: transform .25s ease; } .sf-cart-drawer__panel--hidden { transform: translateX(100%); } html[dir="rtl"] .sf-cart-drawer__panel--hidden { transform: translateX(-100%); } .sf-cart-drawer__head, .sf-cart-drawer__total { display: flex; align-items: center; justify-content: space-between; } .sf-cart-drawer__head { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--sf-border, #1f293d); } .sf-cart-drawer__head h3 { margin: 0; font-size: 1.1rem; font-weight: 900; } .sf-cart-drawer__body { flex: 1; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; padding: 1rem 1.25rem; } .sf-cart-drawer__foot { display: flex; flex-direction: column; gap: 1rem; padding: 1.25rem; border-top: 1px solid var(--sf-border, #1f293d); } .sf-cart-drawer__total { font-size: 1.05rem; font-weight: 900; } .sf-cart-line { display: flex; align-items: center; gap: .75rem; } .sf-cart-line__img { width: 3.5rem; height: 3.5rem; border: 1px solid var(--sf-border, #1f293d); border-radius: .9rem; object-fit: cover; background: var(--sf-bg, #050914); } .sf-cart-line__info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .35rem; } .sf-cart-line__name { font-size: .88rem; font-weight: 800; } .sf-cart-line__variant { font-size: .72rem; color: var(--sf-text-muted, #b9bbbf); } .sf-cart-line__details, .sf-summary__details { display: flex; flex-direction: column; gap: .25rem; } .sf-cart-detail { display: flex; align-items: flex-start; gap: .35rem; min-width: 0; font-size: .7rem; line-height: 1.35; color: var(--sf-text-muted, #b9bbbf); } .sf-cart-detail i { flex: 0 0 auto; margin-top: .1rem; color: var(--sf-primary, #fa9429); font-size: .68rem; } .sf-cart-detail__label { flex: 0 0 auto; color: var(--sf-text, #ffffff); font-weight: 900; } .sf-cart-detail__label::after { content: ':'; } .sf-cart-detail__value { min-width: 0; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sf-cart-line__price { color: var(--sf-primary, #fa9429); font-size: .82rem; font-weight: 900; } .sf-cart-line__qty { display: flex; align-items: center; gap: .6rem; font-weight: 800; } .sf-qty-btn { width: 1.9rem; height: 1.9rem; border: 1px solid var(--sf-border, #1f293d); border-radius: 999px; background: var(--sf-bg, #050914); color: var(--sf-text, #ffffff); cursor: pointer; } .sf-qty-btn:hover { border-color: var(--sf-primary, #fa9429); color: var(--sf-primary, #fa9429); } .sf-cart-line__remove { border: none; background: none; color: var(--sf-text-muted, #b9bbbf); cursor: pointer; } .sf-cart-line__remove:hover { color: var(--sf-primary, #fa9429); } .sf-checkout { color: var(--sf-text, #ffffff); } .sf-checkout__summary { align-self: start; } .sf-checkout__card { border: 1px solid var(--sf-border, #1f293d); border-radius: 1.5rem; background: var(--sf-surface, #101827); padding: 1.35rem; box-shadow: 0 18px 45px rgba(0, 0, 0, .35); } .sf-checkout__card-title { margin: 0 0 1rem; color: var(--sf-text, #ffffff); font-size: 1rem; font-weight: 900; } .sf-summary__items { display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1.25rem; } .sf-summary__line { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; } .sf-summary__img { width: 4rem; height: 4rem; border: 1px solid var(--sf-border, #1f293d); border-radius: 1rem; background: var(--sf-bg, #050914); object-fit: cover; } .sf-summary__info { min-width: 0; display: flex; flex-direction: column; gap: .28rem; } .sf-summary__name { color: var(--sf-text, #ffffff); font-size: .84rem; font-weight: 900; line-height: 1.4; } .sf-summary__variant, .sf-summary__qty { color: var(--sf-text-muted, #b9bbbf); font-size: .72rem; font-weight: 700; } .sf-summary__price { color: var(--sf-primary, #fa9429); font-size: .86rem; font-weight: 900; white-space: nowrap; } .sf-summary__totals { display: flex; flex-direction: column; gap: .75rem; margin: 0; padding-top: 1rem; border-top: 1px solid var(--sf-border, #1f293d); } .sf-summary__totals > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--sf-text-muted, #b9bbbf); font-size: .84rem; } .sf-summary__totals dt, .sf-summary__totals dd { margin: 0; } .sf-summary__grand { margin-top: .25rem; padding-top: .85rem; border-top: 1px solid var(--sf-border, #1f293d); color: var(--sf-text, #ffffff) !important; font-size: 1rem !important; font-weight: 900; } .sf-summary__grand dd { color: var(--sf-primary, #fa9429); font-size: 1.15rem; } @media (min-width: 1024px) { .sf-checkout__summary { position: sticky; top: 6rem; } } .sf-container { max-width: 80rem; margin-inline: auto; padding: 2.5rem 1rem; } .sf-static__title { margin-bottom: 1.5rem; font-size: 1.75rem; font-weight: 900; color: var(--sf-text, #ffffff); } .sf-static__body { color: var(--sf-text-muted, #b9bbbf); font-size: .9rem; line-height: 1.9; } /* |-------------------------------------------------------------------------- | Product Single Detail Layout (docs/2.html matching styles) |-------------------------------------------------------------------------- */ .is-sold.details { background: var(--sf-surface, #101827); border: 1px solid var(--sf-border, #1f293d); } .angel-discountcoupon.details { background: var(--sf-surface, #101827); border: 1px solid var(--sf-border, #1f293d); } .p-block--features .p--features__item { background: var(--sf-surface, #101827); border: 1px solid var(--sf-border, #1f293d); transition: all 0.2s ease-in-out; } .p-block--features .p--features__item:hover { border-color: var(--sf-primary, #fa9429); transform: translateY(-1px); } .sticky-product-bar { background: var(--sf-surface, #101827); border: 1px solid var(--sf-border, #1f293d); } .s-product-tabs { background: var(--sf-surface, #101827); border: 1px solid var(--sf-border, #1f293d); } .s-product-tabs .tab-trigger { cursor: pointer; font-weight: 700; } .s-gifting-widget { background: var(--sf-surface, #101827); border: 1px solid var(--sf-border, #1f293d); } /* |-------------------------------------------------------------------------- | Section Customizer Modifiers (Typography, Shapes, Animations, Backgrounds) |-------------------------------------------------------------------------- */ .cr-title--size-32 { font-size: 32px !important; } .cr-title--size-36 { font-size: 36px !important; } .cr-title--size-40 { font-size: 40px !important; } .cr-title--size-48 { font-size: 48px !important; } .cr-title--size-56 { font-size: 56px !important; } .cr-title--size-64 { font-size: 64px !important; } .cr-title--size-72 { font-size: 72px !important; } .cr-desc--size-14 { font-size: 14px !important; } .cr-desc--size-16 { font-size: 16px !important; } .cr-desc--size-18 { font-size: 18px !important; } .cr-desc--size-20 { font-size: 20px !important; } .cr-btn-shape--rounded { border-radius: 12px !important; } .cr-btn-shape--pill { border-radius: 9999px !important; } .cr-btn-shape--sharp { border-radius: 4px !important; } .cr-btn-size--sm { padding: 6px 14px !important; font-size: 12px !important; } .cr-btn-size--md { padding: 10px 22px !important; font-size: 14px !important; } .cr-btn-size--lg { padding: 14px 30px !important; font-size: 16px !important; } .cr-btn, .cr-flash-btn { background-color: var(--cr-btn-custom-bg, var(--sf-primary, #ff6a00)); color: var(--cr-btn-custom-color, #ffffff); } .cr-card-shape--rounded, .cr-card-shape--rounded.crunch-v2-card, .cr-card-shape--rounded[data-category-card], .cr-card-shape--rounded[data-product-card], .cr-card-shape--rounded .cr-card, .cr-card-shape--rounded .crunch-step-card, .cr-card-shape--rounded .crunch-story-card, .cr-card-shape--rounded .cr-feature-card, .cr-card-shape--rounded .cp-plus-card, .cr-card-shape--rounded .crunch-proof-card, .cr-card-shape--rounded .cr-faq-item { border-radius: 1.5rem !important; } .cr-card-shape--glowing, .cr-card-shape--glowing.crunch-v2-card, .cr-card-shape--glowing[data-category-card], .cr-card-shape--glowing[data-product-card], .cr-card-shape--glowing .cr-card, .cr-card-shape--glowing .crunch-step-card, .cr-card-shape--glowing .crunch-story-card, .cr-card-shape--glowing .cr-feature-card, .cr-card-shape--glowing .cp-plus-card, .cr-card-shape--glowing .crunch-proof-card, .cr-card-shape--glowing .cr-faq-item { border-radius: 1.5rem !important; box-shadow: 0 0 30px -4px rgba(255, 106, 0, 0.45) !important; border-color: rgba(255, 106, 0, 0.75) !important; } .cr-card-shape--sharp, .cr-card-shape--sharp.crunch-v2-card, .cr-card-shape--sharp[data-category-card], .cr-card-shape--sharp[data-product-card], .cr-card-shape--sharp .cr-card, .cr-card-shape--sharp .crunch-step-card, .cr-card-shape--sharp .crunch-story-card, .cr-card-shape--sharp .cr-feature-card, .cr-card-shape--sharp .cp-plus-card, .cr-card-shape--sharp .crunch-proof-card, .cr-card-shape--sharp .cr-faq-item { border-radius: 0.125rem !important; } .cr-card-shape--clean, .cr-card-shape--clean.crunch-v2-card, .cr-card-shape--clean[data-category-card], .cr-card-shape--clean[data-product-card], .cr-card-shape--clean .cr-card, .cr-card-shape--clean .crunch-step-card, .cr-card-shape--clean .crunch-story-card, .cr-card-shape--clean .cr-feature-card, .cr-card-shape--clean .cp-plus-card, .cr-card-shape--clean .crunch-proof-card, .cr-card-shape--clean .cr-faq-item { border-color: transparent !important; box-shadow: none !important; } .has-bg-image { background: none; } .no-animation, .no-animation *, .no-animation *:before, .no-animation *:after { animation: none !important; transition: none !important; } /* ===================== Unified Announcement Bar ===================== */ .sf-announcement-bar { margin: 0 !important; display: block !important; width: 100% !important; overflow: hidden !important; white-space: nowrap !important; padding: 9px 0 !important; background: var(--sf-primary, var(--color-primary, #ff6a00)); color: #ffffff; font-size: 13px !important; font-weight: 700 !important; text-align: center !important; position: relative !important; z-index: 50 !important; line-height: 1.4 !important; } .sf-ann__marquee-track { display: block !important; width: 100% !important; overflow: hidden !important; white-space: nowrap !important; } .sf-ann__marquee-inner { display: inline-flex !important; align-items: center !important; gap: 3rem !important; animation: sfAnnMarquee 35s linear infinite !important; will-change: transform !important; } html[dir="rtl"] .sf-ann__marquee-inner { animation-direction: reverse !important; } @keyframes sfAnnMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .sf-ann__item { display: inline-flex !important; align-items: center !important; gap: 0.6rem !important; padding: 0 1.2rem !important; flex-shrink: 0 !important; } .sf-ann__item::before { content: '•'; margin-inline-end: 0.6rem; opacity: 0.6; } .sf-ann__marquee-inner .sf-ann__item:first-child::before { display: none !important; } .sf-ann__flash { display: flex !important; justify-content: center !important; align-items: center !important; min-height: 1.4em !important; padding: 0 1rem !important; } .sf-ann__typewriter { display: flex !important; justify-content: center !important; align-items: center !important; min-height: 1.4em !important; padding: 0 1rem !important; } .sf-ann__cursor { display: inline-block !important; margin-inline-start: 3px !important; animation: sfAnnBlink 0.7s step-end infinite !important; font-weight: 900 !important; } @keyframes sfAnnBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .sf-ann__static { display: flex !important; justify-content: center !important; align-items: center !important; padding: 0 1rem !important; } @media (prefers-reduced-motion: reduce) { .sf-ann__marquee-inner { animation: none !important; } .sf-ann__cursor { animation: none !important; } }