diff --git a/assets/custom.css b/assets/custom.css new file mode 100644 index 00000000000..b92e1e1640c --- /dev/null +++ b/assets/custom.css @@ -0,0 +1,621 @@ +/* ============================================================ + CloudVaultUS — Premium Light Theme + Palette: warm off-white base · vibrant red accent · charcoal text + Fonts: Bebas Neue (display) · DM Sans (body, weight 300/400/500) + ============================================================ */ + +/* ── 1. GOOGLE FONTS ─────────────────────────────────────── */ +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap'); + +/* ── 2. DESIGN TOKENS ────────────────────────────────────── */ +:root { + /* ── Red accent ── */ + --cvus-red: #E63946; + --cvus-red-hover: #C1121F; + --cvus-red-glow: rgba(230, 57, 70, 0.18); + --cvus-red-subtle: rgba(230, 57, 70, 0.07); + --cvus-red-tint: #FFF4F4; /* section background accent */ + + /* ── Backgrounds: warm, not clinical white ── */ + --cvus-bg: #F8F7F4; /* warm cloud white — base */ + --cvus-surface: #FFFFFF; /* cards, panels */ + --cvus-surface-warm: #FFFCFB; /* hero right-panel tint */ + --cvus-elevated: #F0EFE9; /* subtle fills, alt rows */ + --cvus-section-alt: #F3F2EF; /* alternating section bg */ + + /* ── Text ── */ + --cvus-text: #1A1A1E; /* warm charcoal */ + --cvus-text-sub: #6B6B7A; /* medium warm gray */ + --cvus-text-muted: #AEADB8; /* light gray */ + --cvus-text-dim: #D1D0D9; /* very muted */ + + /* ── Borders: barely-there on light ── */ + --cvus-border: rgba(0, 0, 0, 0.07); + --cvus-border-strong: rgba(0, 0, 0, 0.12); + + /* ── Header: dark for premium contrast ── */ + --cvus-header-bg: #111111; + --cvus-header-text: #FFFFFF; + --cvus-header-sub: rgba(255, 255, 255, 0.55); + --cvus-header-border: rgba(255, 255, 255, 0.08); + + /* ── Footer ── */ + --cvus-footer-bg: #111111; + --cvus-footer-text: rgba(255, 255, 255, 0.45); + + /* ── Typography ── */ + --cvus-font-display: 'Bebas Neue', sans-serif; + --cvus-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; + + /* ── Dawn RGB overrides — light theme ── */ + --color-background: 248, 247, 244; + --color-foreground: 26, 26, 30; + --color-background-contrast: 240, 239, 233; + --color-shadow: 26, 26, 30; + --color-button: 230, 57, 70; + --color-button-text: 255, 255, 255; + --color-secondary-button: 255, 255, 255; + --color-secondary-button-text: 26, 26, 30; + --color-link: 230, 57, 70; + --color-badge-foreground: 255, 255, 255; + --color-badge-background: 230, 57, 70; + --color-badge-border: 230, 57, 70; + + /* ── Shadows: subtle & warm ── */ + --cvus-shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.05); + --cvus-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.06); + --cvus-shadow-md: 0 6px 24px rgba(0, 0, 0, 0.08); + --cvus-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.10); + --cvus-shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.12); + --cvus-shadow-red: 0 8px 32px rgba(230, 57, 70, 0.22); + + /* ── Shape ── */ + --cvus-radius-sm: 6px; + --cvus-radius-md: 10px; + --cvus-radius-lg: 16px; + --cvus-radius-xl: 24px; + --cvus-radius-pill: 999px; +} + +/* ── 3. GLOBAL RESET ─────────────────────────────────────── */ +*, *::before, *::after { box-sizing: border-box; } + +html { + scroll-behavior: smooth; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + background-color: var(--cvus-bg) !important; + color: var(--cvus-text) !important; + font-family: var(--cvus-font-body) !important; + font-weight: 400 !important; +} + +/* ── 4. SCROLLBAR ─────────────────────────────────────────── */ +::-webkit-scrollbar { width: 5px; } +::-webkit-scrollbar-track { background: #F0EFE9; } +::-webkit-scrollbar-thumb { background: #D1D0D9; border-radius: 3px; } +::-webkit-scrollbar-thumb:hover { background: var(--cvus-red); } + +/* ── 5. TYPOGRAPHY ───────────────────────────────────────── */ +h1, h2, h3, h4, h5, h6, +.h0, .h1, .h2, .h3 { + font-family: var(--cvus-font-display) !important; + font-weight: 400 !important; + letter-spacing: 0.04em !important; + text-transform: uppercase !important; + color: var(--cvus-text) !important; + line-height: 0.95 !important; +} + +h1 { font-size: clamp(2.8rem, 7vw, 6rem); } +h2 { font-size: clamp(2rem, 4vw, 3.6rem); } +h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); } + +p { color: var(--cvus-text-sub); font-weight: 400; line-height: 1.68; } +a { color: var(--cvus-text); text-decoration: none; transition: color 0.2s; } +a:hover { color: var(--cvus-red); } +strong { font-weight: 600; color: var(--cvus-text); } + +/* ── 6. ANNOUNCEMENT BAR ─────────────────────────────────── */ +.announcement-bar { + background-color: var(--cvus-red) !important; +} +.announcement-bar__message, +.announcement-bar__message p, +.announcement-bar__message a { + font-family: var(--cvus-font-body) !important; + font-size: 11px !important; + font-weight: 500 !important; + letter-spacing: 0.16em !important; + text-transform: uppercase !important; + color: #fff !important; +} + +/* ── 7. HEADER — dark, glass ─────────────────────────────── */ +.header, +.shopify-section-group-header-group .header { + background-color: var(--cvus-header-bg) !important; + border-bottom: 1px solid var(--cvus-header-border) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; + position: sticky !important; + top: 0 !important; + z-index: 100 !important; +} + +.header__heading, +.header__heading-link { + font-family: var(--cvus-font-display) !important; + font-size: 1.35rem !important; + font-weight: 400 !important; + letter-spacing: 0.14em !important; + text-transform: uppercase !important; + color: var(--cvus-header-text) !important; +} + +.header__menu-item, +.header__menu-item span, +.header__menu-item .link { + font-family: var(--cvus-font-body) !important; + font-size: 11px !important; + font-weight: 500 !important; + letter-spacing: 0.14em !important; + text-transform: uppercase !important; + color: var(--cvus-header-sub) !important; + transition: color 0.2s !important; +} +.header__menu-item:hover span, +.header__menu-item:hover .link { color: #fff !important; } + +.header__icon svg, .header__icon path { + fill: var(--cvus-header-sub) !important; + stroke: var(--cvus-header-sub) !important; + transition: fill 0.2s, stroke 0.2s !important; +} +.header__icon:hover svg, .header__icon:hover path { + fill: #fff !important; + stroke: #fff !important; +} + +.cart-count-bubble { + background-color: var(--cvus-red) !important; + color: #fff !important; +} + +/* Mobile menu */ +.menu-drawer, .menu-drawer__navigation, .menu-drawer__container { + background-color: #111 !important; + border-right: 1px solid rgba(255,255,255,0.08) !important; +} +.menu-drawer__menu-item, .menu-drawer__menu-item span { + color: #fff !important; + font-family: var(--cvus-font-body) !important; +} + +/* ── 8. BUTTONS ──────────────────────────────────────────── */ +.button, +.button--primary, +button[type="submit"]:not(.shopify-challenge__button), +.shopify-payment-button__button--unbranded { + background-color: var(--cvus-red) !important; + color: #fff !important; + border: none !important; + border-radius: var(--cvus-radius-md) !important; + font-family: var(--cvus-font-body) !important; + font-weight: 500 !important; + font-size: 11px !important; + letter-spacing: 0.16em !important; + text-transform: uppercase !important; + padding: 14px 32px !important; + cursor: pointer !important; + transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s !important; + box-shadow: 0 4px 16px var(--cvus-red-glow) !important; +} +.button:hover, .button--primary:hover { + background-color: var(--cvus-red-hover) !important; + transform: translateY(-2px) !important; + box-shadow: var(--cvus-shadow-red) !important; +} +.button:active { transform: translateY(0) !important; } + +.button--secondary { + background-color: var(--cvus-surface) !important; + border: 1.5px solid var(--cvus-border-strong) !important; + color: var(--cvus-text) !important; + box-shadow: var(--cvus-shadow-xs) !important; +} +.button--secondary:hover { + border-color: var(--cvus-red) !important; + color: var(--cvus-red) !important; + background-color: var(--cvus-red-subtle) !important; + transform: translateY(-1px) !important; + box-shadow: none !important; +} + +/* ── 9. PRODUCT CARDS — white + shadow ───────────────────── */ +.card-wrapper, .card, .product-card-wrapper { + background-color: var(--cvus-surface) !important; + border: 1px solid var(--cvus-border) !important; + border-radius: var(--cvus-radius-lg) !important; + box-shadow: var(--cvus-shadow-sm) !important; + overflow: hidden; + transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), + border-color 0.25s !important; +} +.card-wrapper:hover, .card:hover { + box-shadow: var(--cvus-shadow-lg) !important; + transform: translateY(-5px) !important; + border-color: rgba(230, 57, 70, 0.18) !important; +} + +.card__content, .card__inner, +.card-information, .card-information__wrapper { + background: transparent !important; +} + +.card__heading, .card__heading a, +.card-information .card__heading { + font-family: var(--cvus-font-display) !important; + font-size: 1rem !important; + font-weight: 400 !important; + letter-spacing: 0.05em !important; + text-transform: uppercase !important; + color: var(--cvus-text) !important; + line-height: 1.1 !important; +} + +.price, .price__regular, .price-item, +.price-item--regular, .price .money { + color: var(--cvus-red) !important; + font-weight: 600 !important; +} +.price--on-sale .price-item--regular { + color: var(--cvus-text-muted) !important; + text-decoration: line-through; + font-weight: 400 !important; +} + +.card__information .caption, +.card-information .caption { + color: var(--cvus-text-muted) !important; + font-size: 10px !important; + letter-spacing: 0.12em !important; + text-transform: uppercase !important; +} + +/* ── 10. PRODUCT IMAGES ──────────────────────────────────── */ +.media, .card__media, .product__media-item { + background-color: #F8F7F4 !important; + overflow: hidden; +} +.card__media img, .product-card-wrapper .media img { + transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; +} +.card-wrapper:hover .card__media img { + transform: scale(1.06) !important; +} + +/* ── 11. SECTION BACKGROUNDS ─────────────────────────────── */ +.color-background-1, .color-base-background-1, +[class*="color-scheme-"] { + background-color: var(--cvus-bg) !important; + color: var(--cvus-text) !important; +} +.color-background-2, .color-base-background-2 { + background-color: var(--cvus-surface) !important; + color: var(--cvus-text) !important; +} + +.title, .collection__title, .section-header .title { + font-family: var(--cvus-font-display) !important; + color: var(--cvus-text) !important; + text-transform: uppercase !important; + letter-spacing: 0.04em !important; + font-size: clamp(1.8rem, 4vw, 3.4rem) !important; +} + +/* ── 12. FORM INPUTS ─────────────────────────────────────── */ +.field__input, .select__select, +input[type="text"], input[type="email"], +input[type="tel"], input[type="password"], +input[type="search"], textarea, select { + background-color: var(--cvus-surface) !important; + border: 1.5px solid var(--cvus-border-strong) !important; + border-radius: var(--cvus-radius-md) !important; + color: var(--cvus-text) !important; + font-family: var(--cvus-font-body) !important; + font-weight: 400 !important; + box-shadow: var(--cvus-shadow-xs) !important; + transition: border-color 0.2s, box-shadow 0.2s !important; +} +.field__input:focus, input:focus, textarea:focus, select:focus { + border-color: var(--cvus-red) !important; + outline: none !important; + box-shadow: 0 0 0 3px var(--cvus-red-subtle) !important; +} +.field__label, label { + color: var(--cvus-text-sub) !important; + font-family: var(--cvus-font-body) !important; + font-size: 11px !important; + font-weight: 500 !important; + letter-spacing: 0.1em !important; + text-transform: uppercase !important; +} +input::placeholder, textarea::placeholder { color: var(--cvus-text-muted) !important; } + +/* ── 13. CART DRAWER ─────────────────────────────────────── */ +cart-drawer, .cart-drawer, .cart-drawer__form { + background-color: var(--cvus-surface) !important; + border-left: 1px solid var(--cvus-border) !important; + box-shadow: -8px 0 48px rgba(0, 0, 0, 0.12) !important; +} +.cart-drawer__header { + background: var(--cvus-bg) !important; + border-bottom: 1px solid var(--cvus-border) !important; +} +.cart-drawer__footer { + background-color: var(--cvus-bg) !important; + border-top: 1px solid var(--cvus-border) !important; +} +.cart-item__name, .cart-item__name a { + color: var(--cvus-text) !important; + font-family: var(--cvus-font-display) !important; + text-transform: uppercase !important; + letter-spacing: 0.04em !important; +} +.cart-item__price { color: var(--cvus-red) !important; font-weight: 600 !important; } +.totals__total-value { color: var(--cvus-text) !important; font-weight: 600 !important; } + +/* ── 14. FOOTER ──────────────────────────────────────────── */ +.footer, .footer-section { + background-color: var(--cvus-footer-bg) !important; + border-top: none !important; +} +.footer-block__heading { + font-family: var(--cvus-font-body) !important; + font-size: 10px !important; + font-weight: 600 !important; + letter-spacing: 0.2em !important; + text-transform: uppercase !important; + color: #fff !important; + margin-bottom: 16px !important; +} +.footer__column, .footer__content-top, .footer__content-bottom, +.footer p, .footer li, .footer span { color: var(--cvus-footer-text) !important; } +.footer a { + color: var(--cvus-footer-text) !important; + font-size: 12px; + font-weight: 400; + transition: color 0.2s !important; +} +.footer a:hover { color: #fff !important; } +.footer__content-bottom { + border-top: 1px solid rgba(255, 255, 255, 0.07) !important; +} + +/* ── 15. BADGE ───────────────────────────────────────────── */ +.badge { + background-color: var(--cvus-red) !important; + color: #fff !important; + border: none !important; + border-radius: var(--cvus-radius-sm) !important; + font-family: var(--cvus-font-body) !important; + font-size: 9px !important; + font-weight: 600 !important; + letter-spacing: 0.12em !important; + text-transform: uppercase !important; + padding: 3px 8px !important; +} + +/* ── 16. PRODUCT PAGE ────────────────────────────────────── */ +.product__title { + font-family: var(--cvus-font-display) !important; + font-size: clamp(2rem, 4.5vw, 3.6rem) !important; + font-weight: 400 !important; + text-transform: uppercase !important; + letter-spacing: 0.04em !important; + color: var(--cvus-text) !important; + line-height: 0.95 !important; +} +.product__description, .product-description { + color: var(--cvus-text-sub) !important; + line-height: 1.7 !important; + font-weight: 400 !important; +} +.variant-pills .swatch-input__item, .variant-pills__item { + background-color: var(--cvus-surface) !important; + border: 1.5px solid var(--cvus-border-strong) !important; + color: var(--cvus-text) !important; + border-radius: var(--cvus-radius-sm) !important; + transition: border-color 0.2s, box-shadow 0.2s !important; + font-family: var(--cvus-font-body) !important; +} +.variant-pills .swatch-input__item:hover { + border-color: var(--cvus-red) !important; + box-shadow: 0 0 0 3px var(--cvus-red-subtle) !important; +} +.variant-pills input:checked + .swatch-input__item, +.variant-pills .swatch-input__item--active { + background-color: var(--cvus-red) !important; + border-color: var(--cvus-red) !important; + color: #fff !important; + box-shadow: var(--cvus-shadow-red) !important; +} +.quantity__input, .quantity { + background-color: var(--cvus-surface) !important; + border: 1.5px solid var(--cvus-border-strong) !important; + border-radius: var(--cvus-radius-md) !important; + color: var(--cvus-text) !important; +} + +/* ── 17. DIVIDERS ────────────────────────────────────────── */ +hr, .section-header__line { border-color: var(--cvus-border) !important; } + +/* ── 18. UTILITY CLASSES ─────────────────────────────────── */ + +/* Eyebrow label */ +.cvus-eyebrow { + display: inline-flex; + align-items: center; + gap: 10px; + font-family: var(--cvus-font-body); + font-size: 10px; + font-weight: 600; + letter-spacing: 0.26em; + text-transform: uppercase; + color: var(--cvus-red); +} +.cvus-eyebrow::before, .cvus-eyebrow::after { + content: ''; + display: block; + width: 20px; + height: 1px; + background: var(--cvus-red); + opacity: 0.5; +} + +/* Section header pattern */ +.cvus-section-head { + display: flex; + justify-content: space-between; + align-items: flex-end; + padding-bottom: 20px; + border-bottom: 1px solid var(--cvus-border); +} +.cvus-section-title { + font-family: var(--cvus-font-display) !important; + font-size: clamp(1.8rem, 4vw, 3.2rem) !important; + font-weight: 400 !important; + letter-spacing: 0.05em !important; + text-transform: uppercase !important; + color: var(--cvus-text) !important; + line-height: 1 !important; +} +.cvus-see-all { + font-family: var(--cvus-font-body); + font-size: 11px; + font-weight: 500; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--cvus-text-sub); + border-bottom: 1px solid var(--cvus-border-strong); + padding-bottom: 2px; + transition: color 0.2s, border-color 0.2s; +} +.cvus-see-all:hover { color: var(--cvus-red); border-color: var(--cvus-red); } + +/* Dark surface box */ +.cvus-box { + background: var(--cvus-surface); + border: 1px solid var(--cvus-border); + border-radius: var(--cvus-radius-lg); + box-shadow: var(--cvus-shadow-sm); + padding: 2rem; +} + +/* ── 19. SPEC / PRODUCT DESCRIPTION STYLES ───────────────── */ +.cvus-spec-list { + list-style: none; + margin: 0 0 1.2rem; + padding: 0; + background: var(--cvus-surface); + border: 1px solid var(--cvus-border); + border-radius: var(--cvus-radius-md); + overflow: hidden; + box-shadow: var(--cvus-shadow-xs); +} +.cvus-spec-list li { + padding: 10px 16px; + border-bottom: 1px solid var(--cvus-border); + font-size: 13px; + font-weight: 400; + color: var(--cvus-text-sub); + display: flex; + gap: 8px; + background: var(--cvus-surface); +} +.cvus-spec-list li:nth-child(even) { background: var(--cvus-bg); } +.cvus-spec-list li:last-child { border-bottom: none; } +.cvus-spec-list li strong { + color: var(--cvus-text); + font-weight: 600; + min-width: 160px; + flex-shrink: 0; + font-size: 11px; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.cvus-warning { + background: rgba(230, 57, 70, 0.05); + border: 1px solid rgba(230, 57, 70, 0.18); + border-radius: var(--cvus-radius-md); + padding: 12px 16px; + font-size: 12px !important; + font-weight: 400 !important; + color: #C1121F !important; + line-height: 1.6; + margin-top: 1rem; +} + +/* ── 20. ANIMATIONS ──────────────────────────────────────── */ +@keyframes cvus-fade-up { + from { opacity: 0; transform: translateY(22px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes cvus-fade-in { + from { opacity: 0; } + to { opacity: 1; } +} + +/* ── 21. FOCUS ───────────────────────────────────────────── */ +:focus-visible { + outline: 2px solid var(--cvus-red) !important; + outline-offset: 3px !important; +} + +/* ── 22. MOBILE ──────────────────────────────────────────── */ +@media (max-width: 749px) { + .button, .button--primary { + padding: 13px 24px !important; + font-size: 11px !important; + } +} + +/* ── 23. COLLECTION / SEARCH PAGES ──────────────────────── */ +.collection-hero, .collection__hero { + background: var(--cvus-surface) !important; + border-bottom: 1px solid var(--cvus-border) !important; +} +.collection__title { color: var(--cvus-text) !important; } + +/* ── 24. PREDICTIVE SEARCH ───────────────────────────────── */ +.predictive-search, predictive-search { + background: var(--cvus-surface) !important; + border: 1px solid var(--cvus-border-strong) !important; + box-shadow: var(--cvus-shadow-xl) !important; + border-radius: var(--cvus-radius-md) !important; +} +.predictive-search__item-heading { color: var(--cvus-text) !important; } +.predictive-search__item:hover { background: var(--cvus-bg) !important; } + +/* ── 25. PAGINATION ──────────────────────────────────────── */ +.pagination__item { + background: var(--cvus-surface) !important; + border: 1px solid var(--cvus-border) !important; + border-radius: var(--cvus-radius-sm) !important; + color: var(--cvus-text) !important; + box-shadow: var(--cvus-shadow-xs) !important; +} +.pagination__item--current { + background: var(--cvus-red) !important; + border-color: var(--cvus-red) !important; + color: #fff !important; +} + +/* ── 26. RICH TEXT SECTIONS ──────────────────────────────── */ +.rte h1, .rte h2, .rte h3 { color: var(--cvus-text) !important; } +.rte p { color: var(--cvus-text-sub) !important; } diff --git a/assets/cvus-age-gate.css b/assets/cvus-age-gate.css new file mode 100644 index 00000000000..0d75d71efd8 --- /dev/null +++ b/assets/cvus-age-gate.css @@ -0,0 +1,268 @@ +/* ============================================================ + CloudVaultUS — Age Gate Styles + File: assets/cvus-age-gate.css + ============================================================ */ + +/* Gate hidden by default — JS shows it */ +.cvus-ag { + position: fixed; + inset: 0; + z-index: 99999; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + opacity: 0; + visibility: hidden; + transition: opacity 0.35s ease, visibility 0.35s ease; +} + +.cvus-ag.is-visible { + opacity: 1; + visibility: visible; +} + +/* Backdrop */ +.cvus-ag__backdrop { + position: absolute; + inset: 0; + background: rgba(17, 17, 22, 0.88); + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); +} + +/* Modal card */ +.cvus-ag__modal { + position: relative; + z-index: 1; + background: #111116; + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 20px; + padding: 3rem 2.5rem; + max-width: 460px; + width: 100%; + text-align: center; + box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), + 0 0 0 1px rgba(230, 57, 70, 0.1); + animation: cvus-ag-slide-up 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; +} + +@keyframes cvus-ag-slide-up { + from { opacity: 0; transform: translateY(32px) scale(0.96); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +/* Brand */ +.cvus-ag__brand { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + margin-bottom: 1.8rem; +} + +.cvus-ag__logo { + font-family: 'Barlow Condensed', sans-serif; + font-size: 1.6rem; + font-weight: 800; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #f4f4f5; +} + +.cvus-ag__tagline { + font-family: 'Inter', sans-serif; + font-size: 0.68rem; + font-weight: 500; + letter-spacing: 0.18em; + text-transform: uppercase; + color: #e63946; +} + +/* Icon */ +.cvus-ag__icon { + width: 64px; + height: 64px; + background: rgba(230, 57, 70, 0.08); + border: 1px solid rgba(230, 57, 70, 0.2); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1.5rem; + color: #e63946; +} + +/* Heading */ +.cvus-ag__heading { + font-family: 'Barlow Condensed', sans-serif !important; + font-size: 1.8rem !important; + font-weight: 700 !important; + letter-spacing: 0.04em !important; + text-transform: uppercase !important; + color: #f4f4f5 !important; + margin: 0 0 0.8rem !important; +} + +/* Description */ +.cvus-ag__description { + font-family: 'Inter', sans-serif; + font-size: 0.88rem; + line-height: 1.65; + color: #a1a1aa; + margin: 0 0 2rem; +} + +.cvus-ag__description strong { color: #f4f4f5; font-weight: 600; } + +/* Form */ +.cvus-ag__form { display: flex; flex-direction: column; gap: 1rem; } + +.cvus-ag__dob-row { + display: grid; + grid-template-columns: 1fr 1fr 1.4fr; + gap: 0.75rem; +} + +.cvus-ag__field { + display: flex; + flex-direction: column; + gap: 6px; + text-align: left; +} + +.cvus-ag__field label { + font-family: 'Inter', sans-serif !important; + font-size: 0.68rem !important; + font-weight: 600 !important; + letter-spacing: 0.1em !important; + text-transform: uppercase !important; + color: #a1a1aa !important; +} + +.cvus-ag__field select, +.cvus-ag__field input { + background: #18181f !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + border-radius: 8px !important; + color: #f4f4f5 !important; + font-family: 'Inter', sans-serif !important; + font-size: 0.95rem !important; + padding: 11px 12px !important; + width: 100%; + transition: border-color 0.2s, box-shadow 0.2s !important; + -webkit-appearance: none; + appearance: none; +} + +.cvus-ag__field select { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a1aa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: right 12px center !important; + padding-right: 32px !important; +} + +.cvus-ag__field select:focus, +.cvus-ag__field input:focus { + border-color: #e63946 !important; + outline: none !important; + box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12) !important; +} + +/* Error */ +.cvus-ag__error { + background: rgba(230, 57, 70, 0.1); + border: 1px solid rgba(230, 57, 70, 0.3); + border-radius: 8px; + color: #fca5a5; + font-family: 'Inter', sans-serif; + font-size: 0.82rem; + padding: 10px 14px; + text-align: left; + margin: 0; +} + +/* Remember checkbox */ +.cvus-ag__remember { + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + text-align: left; +} + +.cvus-ag__remember input[type="checkbox"] { + width: 16px !important; + height: 16px !important; + min-width: 16px; + padding: 0 !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + border-radius: 4px !important; + background: #18181f !important; + accent-color: #e63946; + cursor: pointer; +} + +.cvus-ag__remember span { + font-family: 'Inter', sans-serif; + font-size: 0.8rem; + color: #a1a1aa; +} + +/* Submit button */ +.cvus-ag__submit { + width: 100% !important; + padding: 15px !important; + font-size: 0.85rem !important; + letter-spacing: 0.12em !important; + margin-top: 0.5rem; +} + +/* Decline link */ +.cvus-ag__decline { + display: block; + font-family: 'Inter', sans-serif; + font-size: 0.78rem; + color: #52525b !important; + text-decoration: underline; + text-underline-offset: 3px; + transition: color 0.2s; + padding: 4px 0; +} + +.cvus-ag__decline:hover { color: #a1a1aa !important; } + +/* Legal */ +.cvus-ag__legal { + font-family: 'Inter', sans-serif; + font-size: 0.72rem; + color: #3f3f46; + line-height: 1.6; + margin: 1.2rem 0 0; + border-top: 1px solid rgba(255, 255, 255, 0.05); + padding-top: 1.2rem; +} + +.cvus-ag__legal a { + color: #52525b !important; + text-decoration: underline; + text-underline-offset: 2px; +} + +.cvus-ag__legal a:hover { color: #e63946 !important; } + +/* Mobile */ +@media (max-width: 480px) { + .cvus-ag__modal { + padding: 2.2rem 1.5rem; + border-radius: 16px; + } + + .cvus-ag__dob-row { + grid-template-columns: 1fr 1fr; + } + + .cvus-ag__field:last-child { + grid-column: 1 / -1; + } +} diff --git a/assets/cvus-age-gate.js b/assets/cvus-age-gate.js new file mode 100644 index 00000000000..30a59a297e2 --- /dev/null +++ b/assets/cvus-age-gate.js @@ -0,0 +1,188 @@ +/** + * CloudVaultUS — Age Gate Controller + * File: assets/cvus-age-gate.js + * + * Logic: + * - Shows a 21+ DOB modal on first visit + * - Validates month/day/year → calculates exact age + * - Stores verification in localStorage (30 days default, or session-only) + * - Locks body scroll while gate is open + * - Traps keyboard focus inside modal (accessibility) + */ + +(function () { + 'use strict'; + + /* ── CONFIG ─────────────────────────────────────────────── */ + const STORAGE_KEY = 'cvus_age_verified'; + const DEFAULT_DAYS = 30; // How long to remember verification + const MIN_AGE = 21; // Minimum age in years + + /* ── ELEMENTS ────────────────────────────────────────────── */ + const gate = document.getElementById('cvus-age-gate'); + const form = document.getElementById('cvus-ag-form'); + const errorEl = document.getElementById('cvus-ag-error'); + const monthEl = document.getElementById('cvus-ag-month'); + const dayEl = document.getElementById('cvus-ag-day'); + const yearEl = document.getElementById('cvus-ag-year'); + const remEl = document.getElementById('cvus-ag-remember'); + + if (!gate || !form) return; // Guard: elements must exist + + /* ── HELPERS ─────────────────────────────────────────────── */ + function isVerified() { + try { + const raw = localStorage.getItem(STORAGE_KEY); + if (!raw) return false; + const { expires } = JSON.parse(raw); + return Date.now() < expires; + } catch { + return false; + } + } + + function storeVerification(remember) { + const days = remember ? DEFAULT_DAYS : 0; + const expires = days > 0 + ? Date.now() + days * 24 * 60 * 60 * 1000 + : Date.now() + 30 * 60 * 1000; // session: 30 min + try { + localStorage.setItem(STORAGE_KEY, JSON.stringify({ verified: true, expires })); + } catch { + // localStorage blocked (private mode) — allow anyway + } + } + + function calculateAge(month, day, year) { + const today = new Date(); + const birth = new Date(year, month - 1, day); + if (isNaN(birth.getTime())) return -1; + + let age = today.getFullYear() - birth.getFullYear(); + const monthDiff = today.getMonth() - birth.getMonth(); + if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) { + age--; + } + return age; + } + + function showError(msg) { + errorEl.textContent = msg; + errorEl.hidden = false; + errorEl.setAttribute('role', 'alert'); + } + + function clearError() { + errorEl.hidden = true; + errorEl.removeAttribute('role'); + } + + /* ── GATE OPEN / CLOSE ───────────────────────────────────── */ + function openGate() { + gate.setAttribute('aria-hidden', 'false'); + gate.classList.add('is-visible'); + document.body.style.overflow = 'hidden'; + // Focus first interactive element + setTimeout(() => monthEl && monthEl.focus(), 100); + trapFocus(gate); + } + + function closeGate() { + gate.classList.remove('is-visible'); + gate.setAttribute('aria-hidden', 'true'); + document.body.style.overflow = ''; + removeFocusTrap(); + } + + /* ── FOCUS TRAP (accessibility) ──────────────────────────── */ + let _focusHandler = null; + + function trapFocus(container) { + const focusable = container.querySelectorAll( + 'a[href], button:not([disabled]), input, select, textarea, [tabindex]:not([tabindex="-1"])' + ); + const first = focusable[0]; + const last = focusable[focusable.length - 1]; + + _focusHandler = function (e) { + if (e.key !== 'Tab') return; + if (e.shiftKey) { + if (document.activeElement === first) { e.preventDefault(); last.focus(); } + } else { + if (document.activeElement === last) { e.preventDefault(); first.focus(); } + } + }; + + document.addEventListener('keydown', _focusHandler); + } + + function removeFocusTrap() { + if (_focusHandler) { + document.removeEventListener('keydown', _focusHandler); + _focusHandler = null; + } + } + + /* ── FORM SUBMIT ─────────────────────────────────────────── */ + form.addEventListener('submit', function (e) { + e.preventDefault(); + clearError(); + + const month = parseInt(monthEl.value, 10); + const day = parseInt(dayEl.value, 10); + const year = parseInt(yearEl.value, 10); + + // Basic completeness check + if (!month || !day || !year || year < 1900 || year > new Date().getFullYear()) { + showError('Please enter a valid date of birth.'); + return; + } + + if (day < 1 || day > 31) { + showError('Please enter a valid day (1–31).'); + return; + } + + const age = calculateAge(month, day, year); + + if (age < 0) { + showError('The date you entered is not valid. Please check and try again.'); + return; + } + + if (age < MIN_AGE) { + // Redirect to a neutral page — do not allow access + window.location.href = 'https://www.google.com'; + return; + } + + // ✅ Age verified + storeVerification(remEl && remEl.checked); + closeGate(); + }); + + /* ── KEYBOARD ESCAPE ─────────────────────────────────────── */ + document.addEventListener('keydown', function (e) { + // Pressing Escape does NOT close the gate — intentional for compliance + // Users must verify or click "Exit" + }); + + /* ── INIT ────────────────────────────────────────────────── */ + function init() { + if (isVerified()) { + // Already verified — keep gate hidden + gate.remove(); // Remove from DOM entirely for clean page + return; + } + // Not verified — show gate after tiny delay for page paint + requestAnimationFrame(() => setTimeout(openGate, 150)); + } + + // Run on DOM ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', init); + } else { + init(); + } + +})(); diff --git a/assets/cvus-banner.png b/assets/cvus-banner.png new file mode 100644 index 00000000000..848987d786c Binary files /dev/null and b/assets/cvus-banner.png differ diff --git a/assets/cvus-hero-pulse.png b/assets/cvus-hero-pulse.png new file mode 100644 index 00000000000..92e261e27c1 Binary files /dev/null and b/assets/cvus-hero-pulse.png differ diff --git a/assets/cvus-order-notification-email.html b/assets/cvus-order-notification-email.html new file mode 100644 index 00000000000..bb8ec1ff643 --- /dev/null +++ b/assets/cvus-order-notification-email.html @@ -0,0 +1,281 @@ + + + + + + + New Order — CloudVaultUS + + + +
+ + +
+
CloudVaultUS
+
🔔 New Order Received
+
Order {{ order.name }}
+
+ + +
+ + +
+
+
Customer
+
{{ order.shipping_address.name }}
+
+
+
Order Total
+
{{ order.total_price | money }}
+
+
+
Email
+
{{ order.email }}
+
+
+
Phone
+
{{ order.shipping_address.phone | default: 'Not provided' }}
+
+
+
Ship To
+
+ {{ order.shipping_address.address1 }}{% if order.shipping_address.address2 != blank %}, {{ order.shipping_address.address2 }}{% endif %}
+ {{ order.shipping_address.city }}, {{ order.shipping_address.province_code }} {{ order.shipping_address.zip }}
+ {{ order.shipping_address.country }} +
+
+
+
Payment
+
{{ order.payment_gateway | replace: '_', ' ' | capitalize }}
+
+
+
Placed At
+
{{ order.created_at | date: "%b %d, %Y %I:%M %p" }}
+
+
+ + +
+
Items Ordered ({{ order.line_items | size }})
+ {% for line_item in order.line_items %} +
+
+
{{ line_item.title }}
+ {% if line_item.variant_title and line_item.variant_title != 'Default Title' %} +
{{ line_item.variant_title }}
+ {% endif %} + {% if line_item.sku != blank %} +
SKU: {{ line_item.sku }}
+ {% endif %} +
+
+
Qty: {{ line_item.quantity }}
+
{{ line_item.final_line_price | money }}
+
+
+ {% endfor %} +
+ + +
+
+ Subtotal + {{ order.subtotal_price | money }} +
+ {% if order.shipping_price > 0 %} +
+ Shipping + {{ order.shipping_price | money }} +
+ {% endif %} + {% if order.total_tax > 0 %} +
+ Tax + {{ order.total_tax | money }} +
+ {% endif %} + {% if order.total_discounts > 0 %} +
+ Discount + -{{ order.total_discounts | money }} +
+ {% endif %} +
+ Total Charged + {{ order.total_price | money }} +
+
+ + +
+ + View & Fulfill Order → + +
+ +
+ + +
+

+ This is an automated notification from your CloudVaultUS store.
+ Action required: Ship via FedEx/UPS with Adult Signature Required.
+ View all orders +

+
+ +
+ + diff --git a/assets/cvus-product-pulse-x.png b/assets/cvus-product-pulse-x.png new file mode 100644 index 00000000000..397d8c6dc3d Binary files /dev/null and b/assets/cvus-product-pulse-x.png differ diff --git a/assets/cvus-product-pulse.png b/assets/cvus-product-pulse.png new file mode 100644 index 00000000000..6984e51166e Binary files /dev/null and b/assets/cvus-product-pulse.png differ diff --git a/assets/generate_csv.py b/assets/generate_csv.py new file mode 100644 index 00000000000..4e94c8ddb62 --- /dev/null +++ b/assets/generate_csv.py @@ -0,0 +1,225 @@ +""" +CloudVaultUS — Shopify Product CSV Generator +Run: python3 assets/generate_csv.py +Output: assets/products-import.csv +""" + +import csv + +# ── SHOPIFY REQUIRED COLUMNS (exact order) ───────────────── +HEADERS = [ + "Handle", "Title", "Body (HTML)", "Vendor", "Product Category", + "Type", "Tags", "Published", + "Option1 Name", "Option1 Value", + "Option2 Name", "Option2 Value", + "Option3 Name", "Option3 Value", + "Variant SKU", "Variant Grams", "Variant Inventory Tracker", + "Variant Inventory Qty", "Variant Inventory Policy", + "Variant Fulfillment Service", "Variant Price", + "Variant Compare At Price", "Variant Requires Shipping", + "Variant Taxable", "Variant Barcode", + "Image Src", "Image Position", "Image Alt Text", + "Gift Card", "SEO Title", "SEO Description", + "Google Shopping / Google Product Category", + "Google Shopping / Gender", "Google Shopping / Age Group", + "Google Shopping / MPN", "Google Shopping / AdWords Grouping", + "Google Shopping / AdWords Labels", "Google Shopping / Condition", + "Google Shopping / Custom Product", + "Variant Image", "Variant Weight Unit", "Variant Tax Code", + "Cost per item", "Status" +] + +def body(title, tagline, specs, warning=True): + """Build a clean, Shopify-safe HTML product description.""" + spec_items = "".join(f"
  • {k}: {v}
    • " for k, v in specs) + warn = ( + '

    ' + 'WARNING: This product contains nicotine, which is an ' + 'addictive chemical. Not for sale to persons under 21.

    ' + ) if warning else "" + return ( + f'

    {tagline}

    ' + f'' + f'{warn}' + ) + + +# ── PRODUCT DATA ──────────────────────────────────────────── + +GEEK_BAR_PULSE_BODY = body( + "Geek Bar Pulse 15000", + "World's First Full Screen Disposable Vape", + [ + ("Puff Count", "Up to 15,000 puffs"), + ("Nicotine Strength", "5% (50mg)"), + ("Coil", "Dual Mesh Coil - Dual Core"), + ("Output Power", "20W"), + ("Display", "Full screen - battery and e-juice indicator"), + ("Charging", "USB-C rechargeable"), + ("Mouthpiece", "Transparent ergonomic shell"), + ] +) + +GEEK_BAR_PULSE_X_BODY = body( + "Geek Bar Pulse X 25000", + "World's First 3D Curved Screen with AI Power Adjustment", + [ + ("Puff Count", "25,000 (Regular Mode) / 15,000 (Pulse Mode)"), + ("Nicotine Strength", "5% (50mg)"), + ("E-liquid Capacity", "18ml"), + ("Coil", "Dual Mesh Coil - Dual Core"), + ("Display", "3D Curved Screen - Star UI with lighting controls"), + ("AI Feature", "AI Power Adjustment - one-button control"), + ("Charging", "Quick Charge USB-C (80% in approx. 20 min)"), + ] +) + +LOST_MARY_BODY = body( + "Lost Mary MT35000 Turbo", + "Next-Level Disposable with Dual-Mode Technology", + [ + ("Puff Count", "35,000 (Smooth Mode) / 20,000 (Turbo Mode)"), + ("Nicotine Strength", "5% (50mg)"), + ("E-liquid Capacity", "18ml"), + ("Battery", "1000mAh rechargeable"), + ("Coil", "Dual Mesh Coil"), + ("Display", "Integrated screen - battery, e-juice and mode indicator"), + ("Charging", "USB-C (approx. 10 min for a full day)"), + ] +) + +# ── PRODUCT DEFINITIONS ───────────────────────────────────── +# Each product: (handle, title, body, vendor, tags, price, flavors_with_images) + +PRODUCTS = [ + { + "handle": "geek-bar-pulse", + "title": "Geek Bar Pulse 15000 Puffs", + "body": GEEK_BAR_PULSE_BODY, + "vendor": "Geek Bar", + "type": "Disposable Vape", + "tags": "geek-bar,pulse,disposable,15000-puffs,dual-mesh,nicotine", + "price": "19.99", + "seo_title": "Geek Bar Pulse 15000 Puffs | CloudVaultUS", + "seo_desc": "Shop Geek Bar Pulse 15000 disposable vape. Full screen display, dual mesh coil, 5% nicotine. Multiple flavors available.", + "flavors": [ + ("Strawberry Kiwi", "GBP-SK", "https://oss.geekbar.com/products/pulse/20251105/2.png"), + ("Raspberry Watermelon","GBP-RW", "https://oss.geekbar.com/products/pulse/20251105/3.png"), + ("Watermelon Ice", "GBP-WI", "https://oss.geekbar.com/products/pulse/20251105/4.png"), + ("Banana Ice", "GBP-BI", "https://oss.geekbar.com/products/pulse/20251105/5.png"), + ("Peach Lemonade", "GBP-PL", "https://oss.geekbar.com/products/pulse/20251105/6.png"), + ("Punch", "GBP-PU", "https://oss.geekbar.com/products/pulse/20251105/1.png"), + ("Blue Razz Ice", "GBP-BRI", "https://oss.geekbar.com/uploads/image/editor/202407291905459806_650X650.png"), + ("Miami Mint", "GBP-MM", "https://oss.geekbar.com/products/meloso-ultra/3/Miami%20Mint.png"), + ], + }, + { + "handle": "geek-bar-pulse-x", + "title": "Geek Bar Pulse X 25000 Puffs", + "body": GEEK_BAR_PULSE_X_BODY, + "vendor": "Geek Bar", + "type": "Disposable Vape", + "tags": "geek-bar,pulse-x,disposable,25000-puffs,dual-mesh,ai-power,quick-charge,nicotine", + "price": "24.99", + "seo_title": "Geek Bar Pulse X 25000 Puffs | CloudVaultUS", + "seo_desc": "Shop Geek Bar Pulse X 25000 disposable vape. 3D curved screen, AI power adjustment, quick charge. 5% nicotine.", + "flavors": [ + ("Watermelon Ice", "GBPX-WI", "https://oss.geekbar.com/products/pulsex/20251105/1.png"), + ("Blue Razz Ice", "GBPX-BRI", "https://oss.geekbar.com/products/pulsex/20251105/2.png"), + ("Miami Mint", "GBPX-MM", "https://oss.geekbar.com/products/pulsex/20251105/3.png"), + ("Strawberry B-Pop", "GBPX-SBP", "https://oss.geekbar.com/products/pulsex/20251105/4.png"), + ("Sour Apple Ice", "GBPX-SAI", "https://oss.geekbar.com/products/pulsex/20251105/5.png"), + ("Blackberry Blueberry", "GBPX-BB", "https://oss.geekbar.com/products/pulsex/20251105/6.png"), + ("Blue Rancher", "GBPX-BR", "https://oss.geekbar.com/product/BlueRancher.png"), + ("Raspberry Peach Lime", "GBPX-RPL", "https://oss.geekbar.com/product/RaspberryPeachLime.png"), + ], + }, + { + "handle": "lost-mary-mt35000-turbo", + "title": "Lost Mary MT35000 Turbo 35000 Puffs", + "body": LOST_MARY_BODY, + "vendor": "Lost Mary", + "type": "Disposable Vape", + "tags": "lost-mary,mt35000,turbo,disposable,35000-puffs,dual-mesh,dual-mode,nicotine", + "price": "24.99", + "seo_title": "Lost Mary MT35000 Turbo 35000 Puffs | CloudVaultUS", + "seo_desc": "Shop Lost Mary MT35000 Turbo. 35000 puffs in smooth mode, 18ml e-liquid, 1000mAh battery, USB-C charging. 5% nicotine.", + "flavors": [ + ("Watermelon", "LM-WP", ""), + ("Strawberry Kiwi", "LM-SKP", ""), + ("Blue Razz Ice", "LM-BRI", ""), + ("Tigers Blood", "LM-TB", ""), + ("Pink Lemonade", "LM-PLP", ""), + ("Miami Mint", "LM-MM", ""), + ("Black Mint", "LM-BMP", ""), + ("Strawberry", "LM-SP", ""), + ], + }, +] + + +# ── CSV BUILDER ───────────────────────────────────────────── + +def empty_row(handle): + """Return a dict with all headers empty except handle.""" + return {h: "" for h in HEADERS} | {"Handle": handle} + + +rows = [] + +for p in PRODUCTS: + for i, (flavor, sku, img_src) in enumerate(p["flavors"]): + row = empty_row(p["handle"]) + + if i == 0: + # First row carries all product-level data + row.update({ + "Title": p["title"], + "Body (HTML)": p["body"], + "Vendor": p["vendor"], + "Product Category": "Health & Beauty > Health Care > Medical Supplies & Equipment", + "Type": p["type"], + "Tags": p["tags"], + "Published": "TRUE", + "Gift Card": "FALSE", + "SEO Title": p["seo_title"], + "SEO Description": p["seo_desc"], + "Status": "active", + }) + + row.update({ + "Option1 Name": "Flavor", + "Option1 Value": flavor, + "Variant SKU": sku, + "Variant Grams": "0", + "Variant Inventory Tracker": "shopify", + "Variant Inventory Qty": "50", + "Variant Inventory Policy": "deny", + "Variant Fulfillment Service": "manual", + "Variant Price": p["price"], + "Variant Compare At Price": "", + "Variant Requires Shipping": "TRUE", + "Variant Taxable": "TRUE", + "Variant Barcode": "", + "Variant Weight Unit": "lb", + "Image Src": img_src, + "Image Position": str(i + 1), + "Image Alt Text": f"{p['title']} - {flavor}" if img_src else "", + }) + + rows.append(row) + + +# ── WRITE FILE ────────────────────────────────────────────── +output_path = "assets/products-import.csv" + +with open(output_path, "w", newline="", encoding="utf-8") as f: + writer = csv.DictWriter(f, fieldnames=HEADERS, quoting=csv.QUOTE_ALL) + writer.writeheader() + writer.writerows(rows) + +print(f"CSV written to {output_path}") +print(f"Total rows (variants): {len(rows)}") diff --git a/assets/products-import.csv b/assets/products-import.csv new file mode 100644 index 00000000000..751e1e6d58b --- /dev/null +++ b/assets/products-import.csv @@ -0,0 +1,25 @@ +"Handle","Title","Body (HTML)","Vendor","Product Category","Type","Tags","Published","Option1 Name","Option1 Value","Option2 Name","Option2 Value","Option3 Name","Option3 Value","Variant SKU","Variant Grams","Variant Inventory Tracker","Variant Inventory Qty","Variant Inventory Policy","Variant Fulfillment Service","Variant Price","Variant Compare At Price","Variant Requires Shipping","Variant Taxable","Variant Barcode","Image Src","Image Position","Image Alt Text","Gift Card","SEO Title","SEO Description","Google Shopping / Google Product Category","Google Shopping / Gender","Google Shopping / Age Group","Google Shopping / MPN","Google Shopping / AdWords Grouping","Google Shopping / AdWords Labels","Google Shopping / Condition","Google Shopping / Custom Product","Variant Image","Variant Weight Unit","Variant Tax Code","Cost per item","Status" +"geek-bar-pulse","Geek Bar Pulse 15000 Puffs","

    World's First Full Screen Disposable Vape

    WARNING: This product contains nicotine, which is an addictive chemical. Not for sale to persons under 21.

    ","Geek Bar","Health & Beauty > Health Care > Medical Supplies & Equipment","Disposable Vape","geek-bar,pulse,disposable,15000-puffs,dual-mesh,nicotine","TRUE","Flavor","Strawberry Kiwi","","","","","GBP-SK","0","shopify","50","deny","manual","19.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulse/20251105/2.png","1","Geek Bar Pulse 15000 Puffs - Strawberry Kiwi","FALSE","Geek Bar Pulse 15000 Puffs | CloudVaultUS","Shop Geek Bar Pulse 15000 disposable vape. Full screen display, dual mesh coil, 5% nicotine. Multiple flavors available.","","","","","","","","","","lb","","","active" +"geek-bar-pulse","","","","","","","","Flavor","Raspberry Watermelon","","","","","GBP-RW","0","shopify","50","deny","manual","19.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulse/20251105/3.png","2","Geek Bar Pulse 15000 Puffs - Raspberry Watermelon","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse","","","","","","","","Flavor","Watermelon Ice","","","","","GBP-WI","0","shopify","50","deny","manual","19.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulse/20251105/4.png","3","Geek Bar Pulse 15000 Puffs - Watermelon Ice","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse","","","","","","","","Flavor","Banana Ice","","","","","GBP-BI","0","shopify","50","deny","manual","19.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulse/20251105/5.png","4","Geek Bar Pulse 15000 Puffs - Banana Ice","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse","","","","","","","","Flavor","Peach Lemonade","","","","","GBP-PL","0","shopify","50","deny","manual","19.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulse/20251105/6.png","5","Geek Bar Pulse 15000 Puffs - Peach Lemonade","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse","","","","","","","","Flavor","Punch","","","","","GBP-PU","0","shopify","50","deny","manual","19.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulse/20251105/1.png","6","Geek Bar Pulse 15000 Puffs - Punch","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse","","","","","","","","Flavor","Blue Razz Ice","","","","","GBP-BRI","0","shopify","50","deny","manual","19.99","","TRUE","TRUE","","https://oss.geekbar.com/uploads/image/editor/202407291905459806_650X650.png","7","Geek Bar Pulse 15000 Puffs - Blue Razz Ice","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse","","","","","","","","Flavor","Miami Mint","","","","","GBP-MM","0","shopify","50","deny","manual","19.99","","TRUE","TRUE","","https://oss.geekbar.com/products/meloso-ultra/3/Miami%20Mint.png","8","Geek Bar Pulse 15000 Puffs - Miami Mint","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse-x","Geek Bar Pulse X 25000 Puffs","

    World's First 3D Curved Screen with AI Power Adjustment

    WARNING: This product contains nicotine, which is an addictive chemical. Not for sale to persons under 21.

    ","Geek Bar","Health & Beauty > Health Care > Medical Supplies & Equipment","Disposable Vape","geek-bar,pulse-x,disposable,25000-puffs,dual-mesh,ai-power,quick-charge,nicotine","TRUE","Flavor","Watermelon Ice","","","","","GBPX-WI","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulsex/20251105/1.png","1","Geek Bar Pulse X 25000 Puffs - Watermelon Ice","FALSE","Geek Bar Pulse X 25000 Puffs | CloudVaultUS","Shop Geek Bar Pulse X 25000 disposable vape. 3D curved screen, AI power adjustment, quick charge. 5% nicotine.","","","","","","","","","","lb","","","active" +"geek-bar-pulse-x","","","","","","","","Flavor","Blue Razz Ice","","","","","GBPX-BRI","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulsex/20251105/2.png","2","Geek Bar Pulse X 25000 Puffs - Blue Razz Ice","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse-x","","","","","","","","Flavor","Miami Mint","","","","","GBPX-MM","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulsex/20251105/3.png","3","Geek Bar Pulse X 25000 Puffs - Miami Mint","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse-x","","","","","","","","Flavor","Strawberry B-Pop","","","","","GBPX-SBP","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulsex/20251105/4.png","4","Geek Bar Pulse X 25000 Puffs - Strawberry B-Pop","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse-x","","","","","","","","Flavor","Sour Apple Ice","","","","","GBPX-SAI","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulsex/20251105/5.png","5","Geek Bar Pulse X 25000 Puffs - Sour Apple Ice","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse-x","","","","","","","","Flavor","Blackberry Blueberry","","","","","GBPX-BB","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","https://oss.geekbar.com/products/pulsex/20251105/6.png","6","Geek Bar Pulse X 25000 Puffs - Blackberry Blueberry","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse-x","","","","","","","","Flavor","Blue Rancher","","","","","GBPX-BR","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","https://oss.geekbar.com/product/BlueRancher.png","7","Geek Bar Pulse X 25000 Puffs - Blue Rancher","","","","","","","","","","","","","lb","","","" +"geek-bar-pulse-x","","","","","","","","Flavor","Raspberry Peach Lime","","","","","GBPX-RPL","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","https://oss.geekbar.com/product/RaspberryPeachLime.png","8","Geek Bar Pulse X 25000 Puffs - Raspberry Peach Lime","","","","","","","","","","","","","lb","","","" +"lost-mary-mt35000-turbo","Lost Mary MT35000 Turbo 35000 Puffs","

    Next-Level Disposable with Dual-Mode Technology

    WARNING: This product contains nicotine, which is an addictive chemical. Not for sale to persons under 21.

    ","Lost Mary","Health & Beauty > Health Care > Medical Supplies & Equipment","Disposable Vape","lost-mary,mt35000,turbo,disposable,35000-puffs,dual-mesh,dual-mode,nicotine","TRUE","Flavor","Watermelon","","","","","LM-WP","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","","1","","FALSE","Lost Mary MT35000 Turbo 35000 Puffs | CloudVaultUS","Shop Lost Mary MT35000 Turbo. 35000 puffs in smooth mode, 18ml e-liquid, 1000mAh battery, USB-C charging. 5% nicotine.","","","","","","","","","","lb","","","active" +"lost-mary-mt35000-turbo","","","","","","","","Flavor","Strawberry Kiwi","","","","","LM-SKP","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","","2","","","","","","","","","","","","","","lb","","","" +"lost-mary-mt35000-turbo","","","","","","","","Flavor","Blue Razz Ice","","","","","LM-BRI","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","","3","","","","","","","","","","","","","","lb","","","" +"lost-mary-mt35000-turbo","","","","","","","","Flavor","Tigers Blood","","","","","LM-TB","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","","4","","","","","","","","","","","","","","lb","","","" +"lost-mary-mt35000-turbo","","","","","","","","Flavor","Pink Lemonade","","","","","LM-PLP","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","","5","","","","","","","","","","","","","","lb","","","" +"lost-mary-mt35000-turbo","","","","","","","","Flavor","Miami Mint","","","","","LM-MM","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","","6","","","","","","","","","","","","","","lb","","","" +"lost-mary-mt35000-turbo","","","","","","","","Flavor","Black Mint","","","","","LM-BMP","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","","7","","","","","","","","","","","","","","lb","","","" +"lost-mary-mt35000-turbo","","","","","","","","Flavor","Strawberry","","","","","LM-SP","0","shopify","50","deny","manual","24.99","","TRUE","TRUE","","","8","","","","","","","","","","","","","","lb","","","" diff --git a/config/settings_data.json b/config/settings_data.json index 0f7a06db992..229b52604c6 100644 --- a/config/settings_data.json +++ b/config/settings_data.json @@ -8,73 +8,73 @@ "settings": { "background": "#FFFFFF", "background_gradient": "", - "text": "#121212", - "button": "#121212", + "text": "#111116", + "button": "#e63946", "button_label": "#FFFFFF", - "secondary_button_label": "#121212", - "shadow": "#121212" + "secondary_button_label": "#111116", + "shadow": "#111116" } }, "scheme-2": { "settings": { - "background": "#F3F3F3", + "background": "#f5f5f7", "background_gradient": "", - "text": "#121212", - "button": "#121212", - "button_label": "#F3F3F3", - "secondary_button_label": "#121212", - "shadow": "#121212" + "text": "#111116", + "button": "#e63946", + "button_label": "#FFFFFF", + "secondary_button_label": "#111116", + "shadow": "#111116" } }, "scheme-3": { "settings": { - "background": "#242833", + "background": "#0e0e12", "background_gradient": "", - "text": "#FFFFFF", - "button": "#FFFFFF", - "button_label": "#000000", - "secondary_button_label": "#FFFFFF", - "shadow": "#121212" + "text": "#f4f4f5", + "button": "#e63946", + "button_label": "#FFFFFF", + "secondary_button_label": "#f4f4f5", + "shadow": "#000000" } }, "scheme-4": { "settings": { - "background": "#121212", + "background": "#e63946", "background_gradient": "", "text": "#FFFFFF", "button": "#FFFFFF", - "button_label": "#121212", + "button_label": "#e63946", "secondary_button_label": "#FFFFFF", - "shadow": "#121212" + "shadow": "#c1121f" } }, "scheme-5": { "settings": { - "background": "#334FB4", + "background": "#18181f", "background_gradient": "", - "text": "#FFFFFF", - "button": "#FFFFFF", - "button_label": "#334FB4", - "secondary_button_label": "#FFFFFF", - "shadow": "#121212" + "text": "#f4f4f5", + "button": "#e63946", + "button_label": "#FFFFFF", + "secondary_button_label": "#f4f4f5", + "shadow": "#000000" } } }, "type_header_font": "assistant_n4", - "heading_scale": 100, + "heading_scale": 120, "type_body_font": "assistant_n4", "body_scale": 100, "page_width": 1200, - "spacing_sections": 0, - "spacing_grid_horizontal": 8, - "spacing_grid_vertical": 8, - "buttons_border_thickness": 1, - "buttons_border_opacity": 100, - "buttons_radius": 0, - "buttons_shadow_opacity": 0, + "spacing_sections": 36, + "spacing_grid_horizontal": 20, + "spacing_grid_vertical": 20, + "buttons_border_thickness": 0, + "buttons_border_opacity": 0, + "buttons_radius": 8, + "buttons_shadow_opacity": 10, "buttons_shadow_horizontal_offset": 0, "buttons_shadow_vertical_offset": 4, - "buttons_shadow_blur": 5, + "buttons_shadow_blur": 15, "variant_pills_border_thickness": 1, "variant_pills_border_opacity": 55, "variant_pills_radius": 40, @@ -83,8 +83,8 @@ "variant_pills_shadow_vertical_offset": 4, "variant_pills_shadow_blur": 5, "inputs_border_thickness": 1, - "inputs_border_opacity": 55, - "inputs_radius": 0, + "inputs_border_opacity": 20, + "inputs_radius": 8, "inputs_shadow_opacity": 0, "inputs_shadow_horizontal_offset": 0, "inputs_shadow_vertical_offset": 4, @@ -92,25 +92,25 @@ "card_style": "standard", "card_image_padding": 0, "card_text_alignment": "left", - "card_color_scheme": "scheme-2", - "card_border_thickness": 0, + "card_color_scheme": "scheme-1", + "card_border_thickness": 1, "card_border_opacity": 10, - "card_corner_radius": 0, - "card_shadow_opacity": 0, + "card_corner_radius": 14, + "card_shadow_opacity": 10, "card_shadow_horizontal_offset": 0, - "card_shadow_vertical_offset": 4, - "card_shadow_blur": 5, + "card_shadow_vertical_offset": 8, + "card_shadow_blur": 20, "collection_card_style": "standard", "collection_card_image_padding": 0, "collection_card_text_alignment": "left", - "collection_card_color_scheme": "scheme-2", - "collection_card_border_thickness": 0, + "collection_card_color_scheme": "scheme-1", + "collection_card_border_thickness": 1, "collection_card_border_opacity": 10, - "collection_card_corner_radius": 0, - "collection_card_shadow_opacity": 0, + "collection_card_corner_radius": 14, + "collection_card_shadow_opacity": 10, "collection_card_shadow_horizontal_offset": 0, - "collection_card_shadow_vertical_offset": 4, - "collection_card_shadow_blur": 5, + "collection_card_shadow_vertical_offset": 8, + "collection_card_shadow_blur": 20, "blog_card_style": "standard", "blog_card_image_padding": 0, "blog_card_text_alignment": "left", @@ -129,13 +129,13 @@ "text_boxes_shadow_horizontal_offset": 0, "text_boxes_shadow_vertical_offset": 4, "text_boxes_shadow_blur": 5, - "media_border_thickness": 1, - "media_border_opacity": 5, - "media_radius": 0, - "media_shadow_opacity": 0, + "media_border_thickness": 0, + "media_border_opacity": 0, + "media_radius": 12, + "media_shadow_opacity": 5, "media_shadow_horizontal_offset": 0, "media_shadow_vertical_offset": 4, - "media_shadow_blur": 5, + "media_shadow_blur": 10, "popup_border_thickness": 1, "popup_border_opacity": 10, "popup_corner_radius": 0, @@ -150,8 +150,8 @@ "drawer_shadow_vertical_offset": 4, "drawer_shadow_blur": 5, "badge_position": "bottom left", - "badge_corner_radius": 40, - "sale_badge_color_scheme": "scheme-5", + "badge_corner_radius": 6, + "sale_badge_color_scheme": "scheme-4", "sold_out_badge_color_scheme": "scheme-3", "social_twitter_link": "", "social_facebook_link": "", @@ -166,7 +166,7 @@ "predictive_search_show_vendor": false, "predictive_search_show_price": false, "currency_code_enabled": true, - "cart_type": "notification", + "cart_type": "drawer", "show_vendor": false, "show_cart_note": false, "cart_drawer_collection": "", @@ -186,4 +186,4 @@ } } } -} +} \ No newline at end of file diff --git a/layout/theme.liquid b/layout/theme.liquid index 70db635823b..d1713eaf3d8 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -15,6 +15,11 @@ {%- endunless -%} + {{- '' }} + + + + {{ page_title }} {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%} @@ -256,6 +261,7 @@ {% endstyle %} {{ 'base.css' | asset_url | stylesheet_tag }} + {{ 'custom.css' | asset_url | stylesheet_tag }} <link rel="stylesheet" href="{{ 'component-cart-items.css' | asset_url }}" media="print" onload="this.media='all'"> {%- if settings.cart_type == 'drawer' -%} @@ -303,6 +309,113 @@ {{ 'accessibility.skip_to_text' | t }} </a> + {%- comment %} ── CloudVaultUS FDA / Nicotine Warning Bar ── {% endcomment %} + <div class="cvus-warning-bar" role="banner" aria-label="Nicotine warning"> + <div class="cvus-warning-bar__inner page-width"> + <p class="cvus-warning-bar__msg"> + <strong>WARNING:</strong> This product contains nicotine. Nicotine is an addictive chemical. + </p> + <div class="cvus-warning-bar__badge" aria-label="21 plus — Youth Prevention"> + <span class="cvus-warning-bar__age">21+</span> + <div class="cvus-warning-bar__badge-text"> + <span class="cvus-warning-bar__badge-title">YOUTH PREVENTION</span> + <span class="cvus-warning-bar__badge-sub">For existing adult smokers and vapers only.</span> + </div> + </div> + </div> + </div> + <style> + .cvus-warning-bar { + background: #111116; + border-bottom: 1px solid rgba(255,255,255,0.07); + width: 100%; + position: relative; + z-index: 101; + } + .cvus-warning-bar__inner { + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + padding-top: 10px; + padding-bottom: 10px; + } + .cvus-warning-bar__msg { + font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 12px; + font-weight: 400; + color: rgba(255,255,255,0.85); + margin: 0; + line-height: 1.5; + letter-spacing: 0.01em; + } + .cvus-warning-bar__msg strong { + font-weight: 700; + color: #ffffff; + } + .cvus-warning-bar__badge { + display: flex; + align-items: center; + gap: 12px; + flex-shrink: 0; + border-left: 1px solid rgba(255,255,255,0.12); + padding-left: 20px; + } + .cvus-warning-bar__age { + display: inline-flex; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + border: 2px solid rgba(255,255,255,0.7); + border-radius: 50%; + font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 11px; + font-weight: 700; + color: #ffffff; + flex-shrink: 0; + letter-spacing: 0.02em; + } + .cvus-warning-bar__badge-text { + display: flex; + flex-direction: column; + gap: 1px; + } + .cvus-warning-bar__badge-title { + font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.18em; + text-transform: uppercase; + color: #ffffff; + line-height: 1.2; + } + .cvus-warning-bar__badge-sub { + font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; + font-size: 10px; + font-weight: 400; + color: rgba(255,255,255,0.5); + letter-spacing: 0.02em; + } + @media (max-width: 749px) { + .cvus-warning-bar__inner { + flex-direction: column; + align-items: flex-start; + gap: 10px; + padding-top: 10px; + padding-bottom: 10px; + } + .cvus-warning-bar__badge { + border-left: none; + padding-left: 0; + border-top: 1px solid rgba(255,255,255,0.1); + padding-top: 10px; + width: 100%; + } + .cvus-warning-bar__msg { font-size: 11px; } + } + </style> + {%- if settings.cart_type == 'drawer' -%} {%- render 'cart-drawer' -%} {%- endif -%} @@ -372,5 +485,10 @@ {%- if settings.cart_type == 'drawer' -%} <script src="{{ 'cart-drawer.js' | asset_url }}" defer="defer"></script> {%- endif -%} + + {{- '<!-- CloudVaultUS: Age Gate -->' }} + {{ 'cvus-age-gate.css' | asset_url | stylesheet_tag }} + {% render 'cvus-age-gate' %} + <script src="{{ 'cvus-age-gate.js' | asset_url }}" defer="defer"></script> </body> </html> diff --git a/sections/cvus-brand-showcase.liquid b/sections/cvus-brand-showcase.liquid new file mode 100644 index 00000000000..cf8634e5b56 --- /dev/null +++ b/sections/cvus-brand-showcase.liquid @@ -0,0 +1,198 @@ +{% comment %} + CloudVaultUS — Brand Showcase Strip + File: sections/cvus-brand-showcase.liquid + Design: rose-tinted band with text-based brand cards (Bebas Neue logos) +{% endcomment %} + +<section class="cvus-brands" id="cvus-brands-{{ section.id }}"> + <div class="page-width"> + <div class="cvus-brands__head"> + {%- if section.settings.eyebrow != blank -%} + <span class="cvus-eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + {%- if section.settings.title != blank -%} + <h2 class="cvus-brands__title">{{ section.settings.title }}</h2> + {%- endif -%} + {%- if section.settings.subtitle != blank -%} + <p class="cvus-brands__sub">{{ section.settings.subtitle }}</p> + {%- endif -%} + </div> + + <div class="cvus-brands__row"> + {%- for block in section.blocks -%} + {%- if block.type == 'brand' -%} + {%- assign url = block.settings.url -%} + {%- if url != blank -%}<a href="{{ url }}" class="cvus-brand-card" {{ block.shopify_attributes }}>{%- else -%}<div class="cvus-brand-card" {{ block.shopify_attributes }}>{%- endif -%} + <span class="cvus-brand-card__name">{{ block.settings.name }}</span> + {%- if block.settings.tagline != blank -%} + <span class="cvus-brand-card__tag">{{ block.settings.tagline }}</span> + {%- endif -%} + {%- if url != blank -%}</a>{%- else -%}</div>{%- endif -%} + {%- endif -%} + {%- endfor -%} + {%- if section.blocks.size == 0 -%} + <div class="cvus-brand-card"> + <span class="cvus-brand-card__name">Geek Bar</span> + <span class="cvus-brand-card__tag">Premium Disposables</span> + </div> + <div class="cvus-brand-card"> + <span class="cvus-brand-card__name">Lost Mary</span> + <span class="cvus-brand-card__tag">Turbo Series</span> + </div> + <div class="cvus-brand-card"> + <span class="cvus-brand-card__name">Elf Bar</span> + <span class="cvus-brand-card__tag">Best Sellers</span> + </div> + <div class="cvus-brand-card"> + <span class="cvus-brand-card__name">Hyde</span> + <span class="cvus-brand-card__tag">High Capacity</span> + </div> + <div class="cvus-brand-card"> + <span class="cvus-brand-card__name">Funky Republic</span> + <span class="cvus-brand-card__tag">Bold Flavors</span> + </div> + {%- endif -%} + </div> + </div> +</section> + +{% stylesheet %} +.cvus-brands { + background: linear-gradient(180deg, #FFF8F8 0%, #FFF3F0 100%); + padding: 64px 0 56px; + border-top: 1px solid rgba(0,0,0,0.04); + border-bottom: 1px solid rgba(0,0,0,0.04); +} +.cvus-brands__head { + text-align: center; + margin-bottom: 36px; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} +.cvus-brands__title { + font-family: 'Bebas Neue', sans-serif !important; + font-size: clamp(1.8rem, 3.6vw, 2.8rem) !important; + font-weight: 400 !important; + letter-spacing: 0.05em !important; + text-transform: uppercase !important; + color: #1A1A1E !important; + line-height: 1 !important; + margin: 0 !important; +} +.cvus-brands__sub { + font-family: 'DM Sans', sans-serif !important; + font-size: 14px !important; + color: #6B6B7A !important; + max-width: 52ch; + margin: 0 !important; + line-height: 1.6 !important; +} + +.cvus-brands__row { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 14px; +} + +.cvus-brand-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + padding: 28px 18px; + background: #FFFFFF; + border: 1px solid rgba(0,0,0,0.06); + border-radius: 14px; + text-decoration: none; + text-align: center; + transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s; + box-shadow: 0 2px 10px rgba(0,0,0,0.04); + min-height: 110px; +} +.cvus-brand-card:hover { + transform: translateY(-4px); + box-shadow: 0 12px 32px rgba(0,0,0,0.10); + border-color: rgba(230, 57, 70, 0.18); +} +.cvus-brand-card__name { + font-family: 'Bebas Neue', sans-serif; + font-size: 22px; + letter-spacing: 0.06em; + color: #1A1A1E; + line-height: 1; +} +.cvus-brand-card__tag { + font-family: 'DM Sans', sans-serif; + font-size: 10px; + font-weight: 500; + letter-spacing: 0.16em; + text-transform: uppercase; + color: #AEADB8; + line-height: 1.4; +} + +@media (max-width: 989px) { + .cvus-brands__row { grid-template-columns: repeat(3, 1fr); } +} +@media (max-width: 480px) { + .cvus-brands { padding: 48px 0 40px; } + .cvus-brands__row { grid-template-columns: repeat(2, 1fr); gap: 10px; } + .cvus-brand-card { padding: 22px 12px; min-height: 90px; } + .cvus-brand-card__name { font-size: 18px; } +} +{% endstylesheet %} + +{% schema %} +{ + "name": "Brand Showcase", + "tag": "section", + "class": "section", + "max_blocks": 8, + "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "Carried Brands" + }, + { + "type": "text", + "id": "title", + "label": "Title", + "default": "Authentic. Verified. Premium." + }, + { + "type": "textarea", + "id": "subtitle", + "label": "Subtitle", + "default": "We partner only with the most trusted manufacturers in the industry — every product authenticated." + } + ], + "blocks": [ + { + "type": "brand", + "name": "Brand", + "settings": [ + { "type": "text", "id": "name", "label": "Brand name", "default": "Geek Bar" }, + { "type": "text", "id": "tagline", "label": "Tagline", "default": "Premium Disposables" }, + { "type": "url", "id": "url", "label": "Link URL (optional)" } + ] + } + ], + "presets": [ + { + "name": "Brand Showcase", + "blocks": [ + { "type": "brand", "settings": { "name": "Geek Bar", "tagline": "Premium Disposables" } }, + { "type": "brand", "settings": { "name": "Lost Mary", "tagline": "Turbo Series" } }, + { "type": "brand", "settings": { "name": "Elf Bar", "tagline": "Best Sellers" } }, + { "type": "brand", "settings": { "name": "Hyde", "tagline": "High Capacity" } }, + { "type": "brand", "settings": { "name": "Funky Republic", "tagline": "Bold Flavors" } } + ] + } + ] +} +{% endschema %} diff --git a/sections/cvus-category-cards.liquid b/sections/cvus-category-cards.liquid new file mode 100644 index 00000000000..e23b2c68651 --- /dev/null +++ b/sections/cvus-category-cards.liquid @@ -0,0 +1,246 @@ +{% comment %} + CloudVaultUS — Shop By Category + File: sections/cvus-category-cards.liquid + Design: 4 cards, each with its own warm flavor-tinted backdrop +{% endcomment %} + +<section class="cvus-cats" id="cvus-cats-{{ section.id }}"> + <div class="page-width"> + + <div class="cvus-section-head cvus-cats__head"> + <h2 class="cvus-section-title">{{ section.settings.title | default: 'Shop By Category' }}</h2> + {%- if section.settings.see_all_label != blank -%} + <a href="{{ section.settings.see_all_url | default: '/collections' }}" class="cvus-see-all"> + {{ section.settings.see_all_label }} → + </a> + {%- endif -%} + </div> + + <div class="cvus-cats__grid"> + {%- for block in section.blocks -%} + {%- if block.type == 'category' -%} + <a + href="{{ block.settings.url | default: '/collections' }}" + class="cvus-cat-card cvus-cat-card--{{ block.settings.tint }}" + {{ block.shopify_attributes }} + > + <div class="cvus-cat-card__inner"> + <span class="cvus-cat-card__count">{{ block.settings.count }}</span> + <h3 class="cvus-cat-card__title">{{ block.settings.title }}</h3> + <p class="cvus-cat-card__desc">{{ block.settings.subtitle }}</p> + <span class="cvus-cat-card__cta"> + Shop Now + <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"> + <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> + </svg> + </span> + </div> + </a> + {%- endif -%} + {%- endfor -%} + {%- if section.blocks.size == 0 -%} + <div class="cvus-cat-card cvus-cat-card--rose"> + <div class="cvus-cat-card__inner"> + <span class="cvus-cat-card__count">12 Products</span> + <h3 class="cvus-cat-card__title">Disposables</h3> + <p class="cvus-cat-card__desc">High-puff devices ready out of the box.</p> + <span class="cvus-cat-card__cta">Shop Now →</span> + </div> + </div> + <div class="cvus-cat-card cvus-cat-card--mint"> + <div class="cvus-cat-card__inner"> + <span class="cvus-cat-card__count">8 Products</span> + <h3 class="cvus-cat-card__title">Pod Systems</h3> + <p class="cvus-cat-card__desc">Refillable, rechargeable, premium build.</p> + <span class="cvus-cat-card__cta">Shop Now →</span> + </div> + </div> + <div class="cvus-cat-card cvus-cat-card--peach"> + <div class="cvus-cat-card__inner"> + <span class="cvus-cat-card__count">14 Products</span> + <h3 class="cvus-cat-card__title">Salt Nic</h3> + <p class="cvus-cat-card__desc">Smooth, high-strength e-liquids.</p> + <span class="cvus-cat-card__cta">Shop Now →</span> + </div> + </div> + <div class="cvus-cat-card cvus-cat-card--lavender"> + <div class="cvus-cat-card__inner"> + <span class="cvus-cat-card__count">6 Products</span> + <h3 class="cvus-cat-card__title">Accessories</h3> + <p class="cvus-cat-card__desc">Coils, batteries, chargers, cases.</p> + <span class="cvus-cat-card__cta">Shop Now →</span> + </div> + </div> + {%- endif -%} + </div> + </div> +</section> + +{% stylesheet %} +.cvus-cats { padding: 80px 0; background: #F8F7F4; } +.cvus-cats__head { margin-bottom: 28px; } + +.cvus-cats__grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 18px; +} + +.cvus-cat-card { + position: relative; + display: block; + border-radius: 18px; + padding: 32px 28px 28px; + text-decoration: none; + overflow: hidden; + min-height: 240px; + transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), + box-shadow 0.3s ease; + border: 1px solid rgba(0,0,0,0.05); + box-shadow: 0 2px 12px rgba(0,0,0,0.04); +} +.cvus-cat-card:hover { + transform: translateY(-6px); + box-shadow: 0 18px 48px rgba(0,0,0,0.12); +} + +/* Tints: each category gets its own flavor-coded backdrop */ +.cvus-cat-card--rose { background: linear-gradient(155deg, #FFF0EE 0%, #FFE1DD 100%); } +.cvus-cat-card--mint { background: linear-gradient(155deg, #EAF5EF 0%, #D5E9DD 100%); } +.cvus-cat-card--peach { background: linear-gradient(155deg, #FFF1E5 0%, #FFE0CC 100%); } +.cvus-cat-card--lavender { background: linear-gradient(155deg, #F1EEFA 0%, #DDD6F0 100%); } + +.cvus-cat-card__inner { + display: flex; + flex-direction: column; + height: 100%; + position: relative; + z-index: 2; +} + +.cvus-cat-card__count { + font-family: 'DM Sans', sans-serif; + font-size: 10px; + font-weight: 600; + letter-spacing: 0.18em; + text-transform: uppercase; + color: rgba(26, 26, 30, 0.55); + margin-bottom: 12px; +} + +.cvus-cat-card__title { + font-family: 'Bebas Neue', sans-serif !important; + font-size: 2.4rem !important; + font-weight: 400 !important; + letter-spacing: 0.04em !important; + text-transform: uppercase !important; + color: #1A1A1E !important; + line-height: 1 !important; + margin: 0 0 10px !important; +} + +.cvus-cat-card__desc { + font-family: 'DM Sans', sans-serif !important; + font-size: 13px !important; + font-weight: 400 !important; + color: #4B4B57 !important; + line-height: 1.55 !important; + margin: 0 0 auto !important; + max-width: 28ch; +} + +.cvus-cat-card__cta { + display: inline-flex; + align-items: center; + gap: 6px; + font-family: 'DM Sans', sans-serif; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.16em; + text-transform: uppercase; + color: #1A1A1E; + margin-top: 16px; + padding-top: 14px; + border-top: 1px solid rgba(26, 26, 30, 0.18); + transition: gap 0.2s, color 0.2s; +} +.cvus-cat-card:hover .cvus-cat-card__cta { + gap: 10px; + color: #E63946; +} + +@media (max-width: 989px) { + .cvus-cats__grid { grid-template-columns: repeat(2, 1fr); } + .cvus-cats { padding: 56px 0; } + .cvus-cat-card__title { font-size: 2rem !important; } + .cvus-cat-card { min-height: 200px; } +} +@media (max-width: 480px) { + .cvus-cats__grid { grid-template-columns: 1fr; gap: 12px; } + .cvus-cat-card { padding: 28px 24px 24px; min-height: 180px; } +} +{% endstylesheet %} + +{% schema %} +{ + "name": "Category Cards", + "tag": "section", + "class": "section", + "max_blocks": 4, + "settings": [ + { + "type": "text", + "id": "title", + "label": "Section title", + "default": "Shop By Category" + }, + { + "type": "text", + "id": "see_all_label", + "label": "View all label", + "default": "View All" + }, + { + "type": "url", + "id": "see_all_url", + "label": "View all URL", + "default": "/collections" + } + ], + "blocks": [ + { + "type": "category", + "name": "Category", + "settings": [ + { "type": "text", "id": "title", "label": "Title", "default": "Disposables" }, + { "type": "text", "id": "count", "label": "Count label", "default": "12 Products" }, + { "type": "text", "id": "subtitle", "label": "Description", "default": "High-puff devices ready out of the box." }, + { "type": "url", "id": "url", "label": "Link URL", "default": "/collections/all" }, + { + "type": "select", + "id": "tint", + "label": "Backdrop tint", + "default": "rose", + "options": [ + { "value": "rose", "label": "Rose" }, + { "value": "mint", "label": "Mint" }, + { "value": "peach", "label": "Peach" }, + { "value": "lavender", "label": "Lavender" } + ] + } + ] + } + ], + "presets": [ + { + "name": "Category Cards", + "blocks": [ + { "type": "category", "settings": { "title": "Disposables", "count": "12 Products", "subtitle": "High-puff devices ready out of the box.", "tint": "rose" } }, + { "type": "category", "settings": { "title": "Pod Systems", "count": "8 Products", "subtitle": "Refillable, rechargeable, premium build.", "tint": "mint" } }, + { "type": "category", "settings": { "title": "Salt Nic", "count": "14 Products", "subtitle": "Smooth, high-strength e-liquids.", "tint": "peach" } }, + { "type": "category", "settings": { "title": "Accessories", "count": "6 Products", "subtitle": "Coils, batteries, chargers, cases.", "tint": "lavender" } } + ] + } + ] +} +{% endschema %} diff --git a/sections/cvus-editorial.liquid b/sections/cvus-editorial.liquid new file mode 100644 index 00000000000..291f786e53d --- /dev/null +++ b/sections/cvus-editorial.liquid @@ -0,0 +1,295 @@ +{% comment %} + CloudVaultUS — Editorial / Why Us + File: sections/cvus-editorial.liquid + Design: large product image left + 3 brand promises right +{% endcomment %} + +<section class="cvus-edit" id="cvus-edit-{{ section.id }}"> + <div class="page-width"> + <div class="cvus-edit__grid"> + + {%- comment %} LEFT — Image {% endcomment %} + <div class="cvus-edit__media"> + {%- if section.settings.image != blank -%} + {{ + section.settings.image + | image_url: width: 1000 + | image_tag: + loading: 'lazy', + alt: section.settings.heading, + class: 'cvus-edit__img' + }} + {%- else -%} + <img + src="{{ 'cvus-product-pulse-x.png' | asset_url }}" + alt="{{ section.settings.heading }}" + class="cvus-edit__img" + loading="lazy" + > + {%- endif -%} + <div class="cvus-edit__media-glow" aria-hidden="true"></div> + </div> + + {%- comment %} RIGHT — Content {% endcomment %} + <div class="cvus-edit__content"> + {%- if section.settings.eyebrow != blank -%} + <span class="cvus-eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + {%- if section.settings.heading != blank -%} + <h2 class="cvus-edit__heading">{{ section.settings.heading }}</h2> + {%- endif -%} + {%- if section.settings.body != blank -%} + <p class="cvus-edit__body">{{ section.settings.body }}</p> + {%- endif -%} + + <div class="cvus-edit__points"> + {%- for block in section.blocks -%} + {%- if block.type == 'point' -%} + <div class="cvus-edit__point" {{ block.shopify_attributes }}> + <div class="cvus-edit__point-icon" aria-hidden="true">{{ block.settings.icon }}</div> + <div class="cvus-edit__point-text"> + <p class="cvus-edit__point-title">{{ block.settings.title }}</p> + <p class="cvus-edit__point-desc">{{ block.settings.description }}</p> + </div> + </div> + {%- endif -%} + {%- endfor -%} + {%- if section.blocks.size == 0 -%} + <div class="cvus-edit__point"> + <div class="cvus-edit__point-icon">✓</div> + <div class="cvus-edit__point-text"> + <p class="cvus-edit__point-title">100% Authentic Products</p> + <p class="cvus-edit__point-desc">Sourced directly from manufacturers — every device verified.</p> + </div> + </div> + <div class="cvus-edit__point"> + <div class="cvus-edit__point-icon">⚡</div> + <div class="cvus-edit__point-text"> + <p class="cvus-edit__point-title">Ships in 24 Hours</p> + <p class="cvus-edit__point-desc">Fast, signature-required delivery via FedEx & UPS.</p> + </div> + </div> + <div class="cvus-edit__point"> + <div class="cvus-edit__point-icon">21+</div> + <div class="cvus-edit__point-text"> + <p class="cvus-edit__point-title">Age-Verified Checkout</p> + <p class="cvus-edit__point-desc">Real ID verification on every order. Always 21+ only.</p> + </div> + </div> + {%- endif -%} + </div> + + {%- if section.settings.cta_label != blank -%} + <a href="{{ section.settings.cta_url | default: '/collections/all' }}" class="button cvus-edit__cta"> + {{ section.settings.cta_label }} + </a> + {%- endif -%} + </div> + + </div> + </div> +</section> + +{% stylesheet %} +.cvus-edit { + background: #FFFFFF; + padding: 80px 0; +} + +.cvus-edit__grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: center; +} + +/* ── Left: Image ── */ +.cvus-edit__media { + position: relative; + background: linear-gradient(155deg, #FFF8F8 0%, #FEF0EE 100%); + border-radius: 24px; + padding: 60px 40px; + display: flex; + align-items: center; + justify-content: center; + min-height: 480px; + overflow: hidden; + box-shadow: 0 16px 48px rgba(0,0,0,0.06); +} +.cvus-edit__img { + width: 70%; + max-width: 380px; + height: auto; + object-fit: contain; + filter: drop-shadow(0 24px 48px rgba(0,0,0,0.16)); + position: relative; + z-index: 2; +} +.cvus-edit__media-glow { + position: absolute; + bottom: -10%; + left: 50%; + transform: translateX(-50%); + width: 70%; + height: 40%; + background: radial-gradient(ellipse, rgba(230,57,70,0.18) 0%, transparent 70%); + filter: blur(40px); + z-index: 1; +} + +/* ── Right: Content ── */ +.cvus-edit__content { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} +.cvus-edit__heading { + font-family: 'Bebas Neue', sans-serif !important; + font-size: clamp(2.4rem, 4.5vw, 3.6rem) !important; + font-weight: 400 !important; + letter-spacing: 0.04em !important; + line-height: 0.95 !important; + text-transform: uppercase !important; + color: #1A1A1E !important; + margin: 0 !important; +} +.cvus-edit__body { + font-family: 'DM Sans', sans-serif !important; + font-size: 15px !important; + font-weight: 400 !important; + line-height: 1.7 !important; + color: #6B6B7A !important; + max-width: 44ch; + margin: 0 !important; +} + +.cvus-edit__points { + display: flex; + flex-direction: column; + gap: 18px; + margin: 14px 0 8px; + width: 100%; +} +.cvus-edit__point { + display: flex; + gap: 14px; + align-items: flex-start; + padding: 14px 0; + border-bottom: 1px solid rgba(0,0,0,0.06); +} +.cvus-edit__point:last-child { border-bottom: none; } + +.cvus-edit__point-icon { + display: flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + background: #FFF3F0; + border: 1px solid rgba(230, 57, 70, 0.25); + border-radius: 50%; + color: #E63946; + font-family: 'DM Sans', sans-serif; + font-size: 13px; + font-weight: 700; + flex-shrink: 0; +} + +.cvus-edit__point-title { + font-family: 'DM Sans', sans-serif !important; + font-size: 14px !important; + font-weight: 600 !important; + color: #1A1A1E !important; + margin: 0 0 2px !important; + letter-spacing: 0 !important; + text-transform: none !important; +} +.cvus-edit__point-desc { + font-family: 'DM Sans', sans-serif !important; + font-size: 13px !important; + font-weight: 400 !important; + color: #6B6B7A !important; + margin: 0 !important; + line-height: 1.55 !important; +} + +.cvus-edit__cta { + margin-top: 8px; +} + +@media (max-width: 989px) { + .cvus-edit { padding: 56px 0; } + .cvus-edit__grid { grid-template-columns: 1fr; gap: 36px; } + .cvus-edit__media { min-height: 380px; padding: 40px 28px; } + .cvus-edit__img { width: 60%; max-width: 320px; } +} +{% endstylesheet %} + +{% schema %} +{ + "name": "Editorial Section", + "tag": "section", + "class": "section", + "max_blocks": 4, + "settings": [ + { + "type": "image_picker", + "id": "image", + "label": "Image", + "info": "Leave blank to use bundled Pulse X image." + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "Why CloudVaultUS" + }, + { + "type": "text", + "id": "heading", + "label": "Heading", + "default": "Premium Vapes,\nAuthenticated." + }, + { + "type": "textarea", + "id": "body", + "label": "Body", + "default": "We go beyond dropshipping. Every product in our catalog is sourced directly from authorized manufacturers, age-gated at checkout, and ships with adult-signature delivery." + }, + { + "type": "text", + "id": "cta_label", + "label": "CTA label", + "default": "Shop the Collection" + }, + { + "type": "url", + "id": "cta_url", + "label": "CTA URL", + "default": "/collections/all" + } + ], + "blocks": [ + { + "type": "point", + "name": "Promise", + "settings": [ + { "type": "text", "id": "icon", "label": "Icon (text/emoji)", "default": "✓" }, + { "type": "text", "id": "title", "label": "Title", "default": "100% Authentic" }, + { "type": "textarea", "id": "description", "label": "Description", "default": "Sourced directly from manufacturers — every device verified." } + ] + } + ], + "presets": [ + { + "name": "Editorial — Why Us", + "blocks": [ + { "type": "point", "settings": { "icon": "✓", "title": "100% Authentic Products", "description": "Sourced directly from manufacturers — every device verified." } }, + { "type": "point", "settings": { "icon": "⚡", "title": "Ships in 24 Hours", "description": "Fast, signature-required delivery via FedEx & UPS." } }, + { "type": "point", "settings": { "icon": "21+", "title": "Age-Verified Checkout", "description": "Real ID verification on every order. Always 21+ only." } } + ] + } + ] +} +{% endschema %} diff --git a/sections/cvus-features-strip.liquid b/sections/cvus-features-strip.liquid new file mode 100644 index 00000000000..aeb4256a63a --- /dev/null +++ b/sections/cvus-features-strip.liquid @@ -0,0 +1,143 @@ +{% comment %} + CloudVaultUS — Features Strip (Light) + File: sections/cvus-features-strip.liquid +{% endcomment %} + +<div class="cvus-strip"> + {%- for block in section.blocks -%} + {%- if block.type == 'feature' -%} + <div class="cvus-strip__item" {{ block.shopify_attributes }}> + <div class="cvus-strip__icon-wrap" aria-hidden="true">{{ block.settings.icon }}</div> + <div class="cvus-strip__text"> + <p class="cvus-strip__title">{{ block.settings.title }}</p> + <p class="cvus-strip__sub">{{ block.settings.subtitle }}</p> + </div> + </div> + {%- endif -%} + {%- endfor -%} + {%- if section.blocks.size == 0 -%} + <div class="cvus-strip__item"> + <div class="cvus-strip__icon-wrap">🚚</div> + <div class="cvus-strip__text"> + <p class="cvus-strip__title">Free Shipping</p> + <p class="cvus-strip__sub">Orders over $35</p> + </div> + </div> + <div class="cvus-strip__item"> + <div class="cvus-strip__icon-wrap">🔒</div> + <div class="cvus-strip__text"> + <p class="cvus-strip__title">Secure Payment</p> + <p class="cvus-strip__sub">256-bit SSL</p> + </div> + </div> + <div class="cvus-strip__item"> + <div class="cvus-strip__icon-wrap">✅</div> + <div class="cvus-strip__text"> + <p class="cvus-strip__title">Authentic Products</p> + <p class="cvus-strip__sub">Verified brands only</p> + </div> + </div> + <div class="cvus-strip__item"> + <div class="cvus-strip__icon-wrap">🎧</div> + <div class="cvus-strip__text"> + <p class="cvus-strip__title">24/7 Support</p> + <p class="cvus-strip__sub">Always available</p> + </div> + </div> + {%- endif -%} +</div> + +{% stylesheet %} +.cvus-strip { + display: grid; + grid-template-columns: repeat(4, 1fr); + background: #FFFFFF; + border-top: 1px solid rgba(0, 0, 0, 0.07); + border-bottom: 1px solid rgba(0, 0, 0, 0.07); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); +} + +.cvus-strip__item { + display: flex; + align-items: center; + gap: 14px; + padding: 22px 24px; + border-right: 1px solid rgba(0, 0, 0, 0.07); + transition: background 0.2s; +} +.cvus-strip__item:last-child { border-right: none; } +.cvus-strip__item:hover { background: #FAFAF8; } + +.cvus-strip__icon-wrap { + font-size: 22px; + line-height: 1; + flex-shrink: 0; +} + +.cvus-strip__text { display: flex; flex-direction: column; gap: 2px; } + +.cvus-strip__title { + font-family: 'DM Sans', sans-serif !important; + font-size: 13px !important; + font-weight: 600 !important; + color: #1A1A1E !important; + margin: 0 !important; + letter-spacing: 0 !important; + text-transform: none !important; +} + +.cvus-strip__sub { + font-family: 'DM Sans', sans-serif !important; + font-size: 11px !important; + font-weight: 400 !important; + color: #AEADB8 !important; + margin: 0 !important; + letter-spacing: 0.06em !important; + text-transform: none !important; +} + +@media (max-width: 749px) { + .cvus-strip { grid-template-columns: repeat(2, 1fr); } + .cvus-strip__item:nth-child(2) { border-right: none; } + .cvus-strip__item:nth-child(3), + .cvus-strip__item:nth-child(4) { border-top: 1px solid rgba(0,0,0,0.07); } + .cvus-strip__item { padding: 18px 20px; } +} +@media (max-width: 480px) { + .cvus-strip { grid-template-columns: 1fr; } + .cvus-strip__item { border-right: none !important; } + .cvus-strip__item + .cvus-strip__item { border-top: 1px solid rgba(0,0,0,0.07); } +} +{% endstylesheet %} + +{% schema %} +{ + "name": "Features Strip", + "tag": "div", + "class": "section", + "max_blocks": 4, + "settings": [], + "blocks": [ + { + "type": "feature", + "name": "Feature", + "settings": [ + { "type": "text", "id": "icon", "label": "Icon (emoji)", "default": "🚚" }, + { "type": "text", "id": "title", "label": "Title", "default": "Free Shipping" }, + { "type": "text", "id": "subtitle", "label": "Subtitle", "default": "Orders over $35" } + ] + } + ], + "presets": [ + { + "name": "Features Strip", + "blocks": [ + { "type": "feature", "settings": { "icon": "🚚", "title": "Free Shipping", "subtitle": "Orders over $35" } }, + { "type": "feature", "settings": { "icon": "🔒", "title": "Secure Payment", "subtitle": "256-bit SSL encrypted" } }, + { "type": "feature", "settings": { "icon": "✅", "title": "Authentic Products", "subtitle": "Verified brands only" } }, + { "type": "feature", "settings": { "icon": "🎧", "title": "24/7 Support", "subtitle": "Always available" } } + ] + } + ] +} +{% endschema %} diff --git a/sections/cvus-hero.liquid b/sections/cvus-hero.liquid new file mode 100644 index 00000000000..496e8b7003a --- /dev/null +++ b/sections/cvus-hero.liquid @@ -0,0 +1,395 @@ +{% comment %} + CloudVaultUS — Premium Light Hero + File: sections/cvus-hero.liquid + Design: warm off-white left · soft-tinted product panel right · dark type +{% endcomment %} + +<section class="cvus-hero" id="cvus-hero-{{ section.id }}"> + + {%- comment %} Right product-image panel {% endcomment %} + <div class="cvus-hero__panel" aria-hidden="true"> + {%- if section.settings.product_image != blank -%} + {{ + section.settings.product_image + | image_url: width: 1000 + | image_tag: + loading: 'eager', + fetchpriority: 'high', + class: 'cvus-hero__product-img', + alt: '' + }} + {%- else -%} + <img + class="cvus-hero__product-img" + src="{{ 'cvus-hero-pulse.png' | asset_url }}" + alt="Geek Bar Pulse — CloudVaultUS" + loading="eager" + fetchpriority="high" + > + {%- endif -%} + <div class="cvus-hero__panel-glow" aria-hidden="true"></div> + </div> + + {%- comment %} Left→right blend: warm white fades into the panel {% endcomment %} + <div class="cvus-hero__blend" aria-hidden="true"></div> + + {%- comment %} Left content {% endcomment %} + <div class="page-width cvus-hero__inner"> + <div class="cvus-hero__content"> + + {%- if section.settings.eyebrow != blank -%} + <span class="cvus-eyebrow cvus-hero__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + + {%- if section.settings.heading != blank -%} + <h1 class="cvus-hero__heading">{{ section.settings.heading }}</h1> + {%- endif -%} + + {%- if section.settings.subheading != blank -%} + <p class="cvus-hero__sub">{{ section.settings.subheading }}</p> + {%- endif -%} + + <div class="cvus-hero__btns"> + {%- if section.settings.cta_label != blank -%} + <a href="{{ section.settings.cta_url | default: '/collections/all' }}" + class="button cvus-hero__cta-primary"> + {{ section.settings.cta_label }} + </a> + {%- endif -%} + {%- if section.settings.cta2_label != blank -%} + <a href="{{ section.settings.cta2_url | default: '/collections' }}" + class="button button--secondary cvus-hero__cta-secondary"> + {{ section.settings.cta2_label }} + </a> + {%- endif -%} + </div> + + {%- comment %} Stats row {% endcomment %} + <div class="cvus-hero__stats"> + {%- for block in section.blocks -%} + {%- if block.type == 'stat' -%} + {%- unless forloop.first -%} + <div class="cvus-hero__stat-sep" aria-hidden="true"></div> + {%- endunless -%} + <div class="cvus-hero__stat" {{ block.shopify_attributes }}> + <span class="cvus-hero__stat-val">{{ block.settings.value }}</span> + <span class="cvus-hero__stat-label">{{ block.settings.label }}</span> + </div> + {%- endif -%} + {%- endfor -%} + {%- if section.blocks.size == 0 -%} + <div class="cvus-hero__stat"> + <span class="cvus-hero__stat-val">35K+</span> + <span class="cvus-hero__stat-label">Max Puffs</span> + </div> + <div class="cvus-hero__stat-sep" aria-hidden="true"></div> + <div class="cvus-hero__stat"> + <span class="cvus-hero__stat-val">5%</span> + <span class="cvus-hero__stat-label">Nicotine</span> + </div> + <div class="cvus-hero__stat-sep" aria-hidden="true"></div> + <div class="cvus-hero__stat"> + <span class="cvus-hero__stat-val">4.9★</span> + <span class="cvus-hero__stat-label">Rating</span> + </div> + {%- endif -%} + </div> + + </div> + </div> + +</section> + +{% stylesheet %} +/* ── LIGHT HERO ──────────────────────────────────────────── */ +.cvus-hero { + position: relative; + background: #F8F7F4; + min-height: 88vh; + display: flex; + align-items: center; + overflow: hidden; + border-bottom: 1px solid rgba(0, 0, 0, 0.07); +} + +/* ── Right image panel ──────────────────────────────────── */ +.cvus-hero__panel { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 54%; + /* Softly warm-tinted — not white, not colored. Premium. */ + background: linear-gradient(145deg, #FFF8F8 0%, #FFF3F0 40%, #FEF0EE 100%); + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + border-left: 1px solid rgba(0, 0, 0, 0.04); +} + +.cvus-hero__product-img { + width: 78%; + height: 90%; + object-fit: contain; + object-position: center bottom; + filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.14)); + transition: transform 7s ease; +} +.cvus-hero:hover .cvus-hero__product-img { + transform: scale(1.03) translateY(-6px); +} + +/* Subtle ambient glow at the product base */ +.cvus-hero__panel-glow { + position: absolute; + bottom: -10%; + left: 50%; + transform: translateX(-50%); + width: 65%; + height: 40%; + background: radial-gradient(ellipse, rgba(230, 57, 70, 0.14) 0%, transparent 70%); + filter: blur(32px); + pointer-events: none; +} + +/* ── Blend: warm white → transparent → panel ───────────── */ +.cvus-hero__blend { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 54%; + background: linear-gradient(to right, #F8F7F4 0%, rgba(248, 247, 244, 0) 38%); + pointer-events: none; + z-index: 1; +} + +/* ── Left content ───────────────────────────────────────── */ +.cvus-hero__inner { + position: relative; + z-index: 2; + width: 100%; + padding-top: 5rem; + padding-bottom: 5rem; +} + +.cvus-hero__content { + max-width: 50%; + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.cvus-hero__eyebrow { + margin-bottom: 16px; + animation: cvus-fade-up 0.5s 0.08s ease both; +} + +.cvus-hero__heading { + font-family: 'Bebas Neue', sans-serif !important; + font-size: clamp(3.8rem, 7.5vw, 7rem) !important; + font-weight: 400 !important; + letter-spacing: 0.03em !important; + line-height: 0.92 !important; + text-transform: uppercase !important; + color: #1A1A1E !important; + margin: 0 0 20px !important; + animation: cvus-fade-up 0.55s 0.16s ease both; +} + +.cvus-hero__sub { + font-family: 'DM Sans', sans-serif !important; + font-size: 15px !important; + font-weight: 400 !important; + line-height: 1.7 !important; + color: #6B6B7A !important; + max-width: 38ch !important; + margin: 0 0 28px !important; + animation: cvus-fade-up 0.55s 0.24s ease both; +} + +/* Buttons */ +.cvus-hero__btns { + display: flex; + gap: 12px; + flex-wrap: wrap; + margin-bottom: 36px; + animation: cvus-fade-up 0.55s 0.32s ease both; +} + +/* Stats */ +.cvus-hero__stats { + display: flex; + align-items: center; + gap: 0; + animation: cvus-fade-up 0.55s 0.40s ease both; +} + +.cvus-hero__stat { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 2px; + padding-right: 20px; + margin-right: 20px; +} + +.cvus-hero__stat-sep { + width: 1px; + height: 36px; + background: rgba(0, 0, 0, 0.12); + flex-shrink: 0; + margin-right: 20px; +} + +.cvus-hero__stat-val { + font-family: 'Bebas Neue', sans-serif; + font-size: 2rem; + letter-spacing: 0.04em; + line-height: 1; + color: #1A1A1E; +} + +.cvus-hero__stat-label { + font-family: 'DM Sans', sans-serif; + font-size: 10px; + font-weight: 500; + letter-spacing: 0.16em; + text-transform: uppercase; + color: #AEADB8; +} + +/* ── Animations ─────────────────────────────────────────── */ +@keyframes cvus-fade-up { + from { opacity: 0; transform: translateY(22px); } + to { opacity: 1; transform: translateY(0); } +} + +/* ── Mobile ─────────────────────────────────────────────── */ +@media (max-width: 989px) { + .cvus-hero { + flex-direction: column; + min-height: auto; + } + .cvus-hero__panel { + position: relative; + width: 100%; + height: 56vw; + border-left: none; + border-top: 1px solid rgba(0, 0, 0, 0.06); + order: 2; + } + .cvus-hero__product-img { width: 65%; height: 90%; } + .cvus-hero__blend { display: none; } + .cvus-hero__inner { order: 1; padding: 3.5rem 0 2.5rem; } + .cvus-hero__content { max-width: 100%; align-items: center; text-align: center; } + .cvus-hero__sub { margin-left: auto !important; margin-right: auto !important; } + .cvus-hero__btns { justify-content: center; } + .cvus-hero__stats { justify-content: center; } + .cvus-hero__stat { align-items: center; } + .cvus-hero__heading { font-size: clamp(3rem, 11vw, 5rem) !important; } +} + +@media (max-width: 480px) { + .cvus-hero__panel { height: 70vw; } + .cvus-hero__stats { flex-wrap: wrap; gap: 12px 0; } + .cvus-hero__stat-sep { display: none; } + .cvus-hero__stat { padding-right: 0; margin-right: 0; } +} +{% endstylesheet %} + +{% schema %} +{ + "name": "CloudVaultUS Hero", + "tag": "section", + "class": "section", + "max_blocks": 4, + "settings": [ + { + "type": "header", + "content": "Product Image" + }, + { + "type": "image_picker", + "id": "product_image", + "label": "Product image (right panel)", + "info": "Leave blank to use default Geek Bar Pulse X. Tall portrait images work best." + }, + { + "type": "header", + "content": "Content" + }, + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "New Arrival" + }, + { + "type": "textarea", + "id": "heading", + "label": "Heading", + "default": "Next-Level\nVaping" + }, + { + "type": "textarea", + "id": "subheading", + "label": "Subheading", + "default": "Premium disposable vapes with industry-leading puff counts. Sourced from top brands — shipped to your door." + }, + { + "type": "header", + "content": "Primary Button" + }, + { + "type": "text", + "id": "cta_label", + "label": "Label", + "default": "Shop Now" + }, + { + "type": "url", + "id": "cta_url", + "label": "URL", + "default": "/collections/all" + }, + { + "type": "header", + "content": "Secondary Button" + }, + { + "type": "text", + "id": "cta2_label", + "label": "Label", + "default": "View All" + }, + { + "type": "url", + "id": "cta2_url", + "label": "URL", + "default": "/collections" + } + ], + "blocks": [ + { + "type": "stat", + "name": "Stat", + "settings": [ + { "type": "text", "id": "value", "label": "Value", "default": "35K+" }, + { "type": "text", "id": "label", "label": "Label", "default": "Max Puffs" } + ] + } + ], + "presets": [ + { + "name": "CloudVaultUS Hero", + "blocks": [ + { "type": "stat", "settings": { "value": "35K+", "label": "Max Puffs" } }, + { "type": "stat", "settings": { "value": "5%", "label": "Nicotine" } }, + { "type": "stat", "settings": { "value": "4.9★", "label": "Rating" } } + ] + } + ] +} +{% endschema %} diff --git a/sections/cvus-newsletter.liquid b/sections/cvus-newsletter.liquid new file mode 100644 index 00000000000..c2506ccfbda --- /dev/null +++ b/sections/cvus-newsletter.liquid @@ -0,0 +1,270 @@ +{% comment %} + CloudVaultUS — Newsletter Capture + File: sections/cvus-newsletter.liquid + Design: full-width rose-tinted section with email signup +{% endcomment %} + +<section class="cvus-news" id="cvus-news-{{ section.id }}"> + <div class="cvus-news__bg" aria-hidden="true"></div> + <div class="page-width"> + <div class="cvus-news__inner"> + + <div class="cvus-news__copy"> + {%- if section.settings.eyebrow != blank -%} + <span class="cvus-eyebrow cvus-news__eyebrow">{{ section.settings.eyebrow }}</span> + {%- endif -%} + {%- if section.settings.heading != blank -%} + <h2 class="cvus-news__heading">{{ section.settings.heading }}</h2> + {%- endif -%} + {%- if section.settings.body != blank -%} + <p class="cvus-news__body">{{ section.settings.body }}</p> + {%- endif -%} + </div> + + <div class="cvus-news__form-wrap"> + {%- form 'customer', class: 'cvus-news__form' -%} + <input type="hidden" name="contact[tags]" value="newsletter, cloudvaultus-homepage"> + <div class="cvus-news__field"> + <input + type="email" + name="contact[email]" + id="CvusNewsEmail-{{ section.id }}" + autocomplete="email" + required + placeholder="{{ section.settings.placeholder | default: 'Enter your email' }}" + class="cvus-news__input" + > + <button type="submit" class="cvus-news__submit" aria-label="Subscribe"> + {{ section.settings.button_label | default: 'Get 10% Off' }} + <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true"> + <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/> + </svg> + </button> + </div> + + {%- if form.posted_successfully? -%} + <p class="cvus-news__success">✓ {{ section.settings.success_message | default: 'Thanks! Check your inbox for your discount code.' }}</p> + {%- endif -%} + {%- if form.errors -%} + <p class="cvus-news__error">{{ form.errors | default_errors }}</p> + {%- endif -%} + + <p class="cvus-news__legal"> + By subscribing, you confirm you are 21 or older and consent to receive marketing emails. Unsubscribe anytime. + </p> + {%- endform -%} + </div> + + </div> + </div> +</section> + +{% stylesheet %} +.cvus-news { + position: relative; + background: linear-gradient(135deg, #FFF8F8 0%, #FFE9E5 50%, #FFF3F0 100%); + padding: 88px 0; + border-top: 1px solid rgba(0,0,0,0.04); + overflow: hidden; +} + +/* Decorative ambient blob */ +.cvus-news__bg { + position: absolute; + top: -20%; + right: -10%; + width: 50%; + height: 140%; + background: radial-gradient(ellipse, rgba(230, 57, 70, 0.10) 0%, transparent 65%); + filter: blur(40px); + pointer-events: none; +} + +.cvus-news__inner { + position: relative; + z-index: 2; + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + gap: 56px; +} + +.cvus-news__copy { + display: flex; + flex-direction: column; + gap: 12px; +} +.cvus-news__heading { + font-family: 'Bebas Neue', sans-serif !important; + font-size: clamp(2.4rem, 4.6vw, 3.6rem) !important; + font-weight: 400 !important; + letter-spacing: 0.04em !important; + line-height: 0.95 !important; + text-transform: uppercase !important; + color: #1A1A1E !important; + margin: 0 !important; +} +.cvus-news__body { + font-family: 'DM Sans', sans-serif !important; + font-size: 15px !important; + font-weight: 400 !important; + line-height: 1.7 !important; + color: #4B4B57 !important; + max-width: 38ch; + margin: 0 !important; +} + +/* ── Form ── */ +.cvus-news__form-wrap { width: 100%; } +.cvus-news__form { display: flex; flex-direction: column; gap: 12px; } + +.cvus-news__field { + display: flex; + background: #FFFFFF; + border: 1px solid rgba(0,0,0,0.10); + border-radius: 14px; + padding: 6px; + box-shadow: 0 8px 24px rgba(0,0,0,0.06); + overflow: hidden; + transition: border-color 0.2s, box-shadow 0.2s; +} +.cvus-news__field:focus-within { + border-color: #E63946; + box-shadow: 0 8px 28px rgba(230, 57, 70, 0.18); +} + +.cvus-news__input { + flex: 1; + background: transparent !important; + border: none !important; + box-shadow: none !important; + font-family: 'DM Sans', sans-serif !important; + font-size: 15px !important; + font-weight: 400 !important; + color: #1A1A1E !important; + padding: 14px 18px !important; + border-radius: 0 !important; +} +.cvus-news__input:focus { + outline: none !important; + box-shadow: none !important; + border: none !important; +} +.cvus-news__input::placeholder { color: #AEADB8 !important; } + +.cvus-news__submit { + display: inline-flex !important; + align-items: center !important; + gap: 8px !important; + background: #1A1A1E !important; + color: #FFFFFF !important; + border: none !important; + border-radius: 10px !important; + padding: 12px 22px !important; + font-family: 'DM Sans', sans-serif !important; + font-weight: 600 !important; + font-size: 12px !important; + letter-spacing: 0.14em !important; + text-transform: uppercase !important; + cursor: pointer; + transition: background-color 0.2s, transform 0.15s; + flex-shrink: 0; + box-shadow: none !important; +} +.cvus-news__submit:hover { + background: #E63946 !important; + transform: translateY(-1px) !important; +} + +.cvus-news__legal { + font-family: 'DM Sans', sans-serif !important; + font-size: 11px !important; + font-weight: 400 !important; + color: #6B6B7A !important; + line-height: 1.55 !important; + margin: 4px 0 0 !important; +} + +.cvus-news__success { + font-family: 'DM Sans', sans-serif; + font-size: 13px; + font-weight: 600; + color: #166534; + background: #DCFCE7; + border: 1px solid #86EFAC; + border-radius: 10px; + padding: 10px 14px; + margin: 0; +} +.cvus-news__error { + font-family: 'DM Sans', sans-serif; + font-size: 13px; + color: #B91C1C; + background: rgba(230,57,70,0.08); + border: 1px solid rgba(230,57,70,0.25); + border-radius: 10px; + padding: 10px 14px; + margin: 0; +} + +@media (max-width: 989px) { + .cvus-news { padding: 64px 0; } + .cvus-news__inner { grid-template-columns: 1fr; gap: 28px; } +} +@media (max-width: 480px) { + .cvus-news { padding: 48px 0; } + .cvus-news__field { flex-direction: column; padding: 10px; gap: 8px; } + .cvus-news__submit { width: 100%; justify-content: center; } +} +{% endstylesheet %} + +{% schema %} +{ + "name": "Newsletter Capture", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "text", + "id": "eyebrow", + "label": "Eyebrow", + "default": "Join the Vault" + }, + { + "type": "textarea", + "id": "heading", + "label": "Heading", + "default": "Get 10% Off Your\nFirst Order." + }, + { + "type": "textarea", + "id": "body", + "label": "Body", + "default": "Subscribe for early access to new flavors, restock alerts, and members-only deals." + }, + { + "type": "text", + "id": "placeholder", + "label": "Email placeholder", + "default": "Enter your email" + }, + { + "type": "text", + "id": "button_label", + "label": "Button label", + "default": "Get 10% Off" + }, + { + "type": "text", + "id": "success_message", + "label": "Success message", + "default": "Thanks! Check your inbox for your discount code." + } + ], + "presets": [ + { + "name": "Newsletter Capture" + } + ] +} +{% endschema %} diff --git a/sections/cvus-product-grid.liquid b/sections/cvus-product-grid.liquid new file mode 100644 index 00000000000..2ef40b15269 --- /dev/null +++ b/sections/cvus-product-grid.liquid @@ -0,0 +1,397 @@ +{% comment %} + CloudVaultUS — Featured Products Grid (Light) + File: sections/cvus-product-grid.liquid + Design: warm section bg · white elevated cards · red accent price +{% endcomment %} + +{%- assign grid_collection = section.settings.collection -%} + +<section class="cvus-pg" id="cvus-pg-{{ section.id }}"> + + <div class="page-width"> + {%- comment %} Section header {% endcomment %} + <div class="cvus-section-head cvus-pg__head"> + <h2 class="cvus-section-title">{{ section.settings.title | default: 'Featured Products' }}</h2> + {%- if section.settings.view_all_label != blank -%} + <a href="{{ section.settings.view_all_url | default: '/collections/all' }}" class="cvus-see-all"> + {{ section.settings.view_all_label }} → + </a> + {%- endif -%} + </div> + + {%- comment %} Products grid {% endcomment %} + <div class="cvus-pg__grid"> + + {%- if grid_collection != blank and grid_collection.products_count > 0 -%} + {%- for product in grid_collection.products limit: section.settings.products_to_show -%} + {%- liquid + assign is_sale = false + if product.compare_at_price > product.price + assign is_sale = true + endif + -%} + <article class="cvus-pg__card"> + <a href="{{ product.url }}" class="cvus-pg__card-media-link" tabindex="-1" aria-hidden="true"> + <div class="cvus-pg__media"> + {%- if is_sale -%} + <span class="cvus-pg__badge cvus-pg__badge--sale">Sale</span> + {%- else -%} + <span class="cvus-pg__badge">New</span> + {%- endif -%} + {%- if product.featured_image != blank -%} + {{ + product.featured_image + | image_url: width: 600 + | image_tag: + loading: 'lazy', + alt: product.title, + class: 'cvus-pg__img' + }} + {%- if product.images.size > 1 -%} + {{ + product.images[1] + | image_url: width: 600 + | image_tag: + loading: 'lazy', + alt: product.title, + class: 'cvus-pg__img cvus-pg__img--hover' + }} + {%- endif -%} + {%- else -%} + <div class="cvus-pg__img-placeholder"> + {{ product.title | slice: 0, 1 | upcase }} + </div> + {%- endif -%} + </div> + </a> + + <div class="cvus-pg__info"> + {%- if product.vendor != blank -%} + <p class="cvus-pg__vendor">{{ product.vendor }}</p> + {%- endif -%} + <h3 class="cvus-pg__name"> + <a href="{{ product.url }}">{{ product.title }}</a> + </h3> + <p class="cvus-pg__type">{{ product.type | default: 'Disposable Vape' }}</p> + <div class="cvus-pg__bottom"> + <div class="cvus-pg__price-row"> + <span class="cvus-pg__price">{{ product.price | money }}</span> + {%- if is_sale -%} + <span class="cvus-pg__compare">{{ product.compare_at_price | money }}</span> + {%- endif -%} + </div> + <button + class="cvus-pg__add" + data-variant-id="{{ product.selected_or_first_available_variant.id }}" + aria-label="Add {{ product.title }} to cart" + >Add</button> + </div> + </div> + </article> + {%- endfor -%} + + {%- else -%} + {%- comment %} Placeholder cards — shown until collection is assigned {% endcomment %} + {%- for i in (1..3) -%} + <article class="cvus-pg__card cvus-pg__card--empty"> + <div class="cvus-pg__media"> + <span class="cvus-pg__badge">New</span> + <div class="cvus-pg__img-placeholder">?</div> + </div> + <div class="cvus-pg__info"> + <p class="cvus-pg__vendor">CloudVaultUS</p> + <h3 class="cvus-pg__name">Product Name</h3> + <p class="cvus-pg__type">Disposable Vape</p> + <div class="cvus-pg__bottom"> + <span class="cvus-pg__price">$19.99</span> + </div> + </div> + </article> + {%- endfor -%} + {%- endif -%} + + </div> + </div> + +</section> + +<script> + (function () { + document.querySelectorAll('[data-variant-id]').forEach(function (btn) { + btn.addEventListener('click', async function () { + const id = btn.dataset.variantId; + if (!id) return; + const orig = btn.textContent; + btn.textContent = '…'; + btn.disabled = true; + try { + await fetch('/cart/add.js', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ id: id, quantity: 1 }) + }); + btn.textContent = '✓ Added'; + window.dispatchEvent(new CustomEvent('cart:refresh')); + setTimeout(function () { + btn.textContent = orig; + btn.disabled = false; + }, 1800); + } catch (e) { + btn.textContent = orig; + btn.disabled = false; + } + }); + }); + })(); +</script> + +{% stylesheet %} +/* ── PRODUCT GRID — LIGHT ────────────────────────────────── */ +.cvus-pg { + background: #F3F2EF; /* slightly warmer than page bg = section depth */ + padding: 48px 0 60px; +} + +.cvus-pg__head { + margin-bottom: 28px; +} + +/* Card grid — real gaps, white cards on warm gray */ +.cvus-pg__grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} + +/* ── Card ───────────────────────────────────────────────── */ +.cvus-pg__card { + background: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.07); + border-radius: 16px; + overflow: hidden; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); + transition: box-shadow 0.3s ease, + transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), + border-color 0.25s; + display: flex; + flex-direction: column; +} +.cvus-pg__card:hover { + box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10); + transform: translateY(-5px); + border-color: rgba(230, 57, 70, 0.15); +} + +/* Media — warm tinted bg so product images float cleanly */ +.cvus-pg__card-media-link { display: block; text-decoration: none; } +.cvus-pg__media { + position: relative; + height: 230px; + background: #FAF9F6; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.cvus-pg__img { + width: 100%; + height: 100%; + object-fit: contain; + transition: transform 0.45s ease, opacity 0.3s ease; + padding: 12px; +} +.cvus-pg__img--hover { + position: absolute; + inset: 0; + opacity: 0; + padding: 12px; +} +.cvus-pg__card:hover .cvus-pg__img:not(.cvus-pg__img--hover) { + transform: scale(1.05); + opacity: 0; +} +.cvus-pg__card:hover .cvus-pg__img--hover { opacity: 1; } + +.cvus-pg__img-placeholder { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + font-family: 'Bebas Neue', sans-serif; + font-size: 4rem; + color: #D1D0D9; + background: #F3F2EF; +} + +/* Badge */ +.cvus-pg__badge { + position: absolute; + top: 12px; + left: 12px; + background: #E63946; + color: #fff; + font-family: 'DM Sans', sans-serif; + font-size: 9px; + font-weight: 600; + letter-spacing: 0.12em; + text-transform: uppercase; + padding: 4px 9px; + border-radius: 4px; + z-index: 2; +} +.cvus-pg__badge--sale { background: #E63946; } + +/* Info block */ +.cvus-pg__info { + padding: 16px 18px 18px; + display: flex; + flex-direction: column; + gap: 4px; + flex: 1; +} + +.cvus-pg__vendor { + font-family: 'DM Sans', sans-serif !important; + font-size: 10px !important; + font-weight: 500 !important; + letter-spacing: 0.18em !important; + text-transform: uppercase !important; + color: #AEADB8 !important; + margin: 0 !important; +} + +.cvus-pg__name { + font-family: 'Bebas Neue', sans-serif !important; + font-size: 18px !important; + font-weight: 400 !important; + letter-spacing: 0.05em !important; + text-transform: uppercase !important; + color: #1A1A1E !important; + line-height: 1.1 !important; + margin: 2px 0 0 !important; +} +.cvus-pg__name a { color: inherit !important; text-decoration: none; } +.cvus-pg__name a:hover { color: #E63946 !important; } + +.cvus-pg__type { + font-family: 'DM Sans', sans-serif !important; + font-size: 11px !important; + font-weight: 400 !important; + color: #AEADB8 !important; + margin: 0 0 10px !important; + text-transform: none !important; + letter-spacing: 0 !important; +} + +/* Bottom row: price + add button */ +.cvus-pg__bottom { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: auto; + padding-top: 10px; + border-top: 1px solid rgba(0, 0, 0, 0.06); +} + +.cvus-pg__price-row { + display: flex; + align-items: baseline; + gap: 7px; +} + +.cvus-pg__price { + font-family: 'DM Sans', sans-serif; + font-size: 17px; + font-weight: 600; + color: #E63946; +} +.cvus-pg__compare { + font-size: 12px; + font-weight: 400; + color: #AEADB8; + text-decoration: line-through; +} + +/* Add button */ +.cvus-pg__add { + background: #1A1A1E; + border: none; + border-radius: 8px; + color: #fff; + font-family: 'DM Sans', sans-serif; + font-size: 10px; + font-weight: 500; + letter-spacing: 0.12em; + text-transform: uppercase; + padding: 8px 16px; + cursor: pointer; + transition: background 0.2s, transform 0.15s; +} +.cvus-pg__add:hover:not(:disabled) { + background: #E63946; + transform: translateY(-1px); +} +.cvus-pg__add:disabled { opacity: 0.5; cursor: default; } + +/* ── Mobile ─────────────────────────────────────────────── */ +@media (max-width: 749px) { + .cvus-pg { padding: 36px 0 48px; } + .cvus-pg__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } + .cvus-pg__media { height: 170px; } + .cvus-pg__name { font-size: 15px !important; } +} +@media (max-width: 480px) { + .cvus-pg__grid { gap: 10px; } + .cvus-pg__media { height: 140px; } + .cvus-pg__info { padding: 12px 14px 14px; } +} +{% endstylesheet %} + +{% schema %} +{ + "name": "CloudVaultUS Product Grid", + "tag": "section", + "class": "section", + "settings": [ + { + "type": "text", + "id": "title", + "label": "Section title", + "default": "Featured Products" + }, + { + "type": "collection", + "id": "collection", + "label": "Collection" + }, + { + "type": "range", + "id": "products_to_show", + "label": "Products to show", + "min": 3, + "max": 12, + "step": 3, + "default": 6 + }, + { + "type": "text", + "id": "view_all_label", + "label": "View all label", + "default": "View All" + }, + { + "type": "url", + "id": "view_all_url", + "label": "View all URL", + "default": "/collections/all" + } + ], + "presets": [ + { + "name": "CloudVaultUS Product Grid" + } + ] +} +{% endschema %} diff --git a/sections/cvus-product-main.liquid b/sections/cvus-product-main.liquid new file mode 100644 index 00000000000..ca4c831d4f0 --- /dev/null +++ b/sections/cvus-product-main.liquid @@ -0,0 +1,618 @@ +{% comment %} + CloudVaultUS — Premium Product Page + File: sections/cvus-product-main.liquid + Template: templates/product.cvus.json + Assign this template to products in Shopify Admin → Products → [product] → Theme template +{% endcomment %} + +{%- assign product = product -%} +{%- assign current_variant = product.selected_or_first_available_variant -%} + +<div class="cvus-pdp" data-product-id="{{ product.id }}"> + <div class="page-width"> + <div class="cvus-pdp__layout"> + + <!-- ── LEFT: MEDIA GALLERY ───────────────────────────── --> + <div class="cvus-pdp__gallery"> + <!-- Main image --> + <div class="cvus-pdp__main-image" id="cvus-main-img"> + {%- if product.featured_image != blank -%} + <img + id="cvus-pdp-main-img" + src="{{ product.featured_image | image_url: width: 800 }}" + alt="{{ product.featured_image.alt | default: product.title }}" + width="800" + loading="eager" + fetchpriority="high" + class="cvus-pdp__img" + > + {%- else -%} + <div class="cvus-pdp__img-placeholder"> + {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }} + </div> + {%- endif -%} + + <!-- Badges --> + <div class="cvus-pdp__badges"> + {%- if product.compare_at_price > product.price -%} + {%- assign discount = product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price -%} + <span class="cvus-badge">Sale -{{ discount }}%</span> + {%- endif -%} + {%- if product.tags contains 'new' or product.tags contains 'New' -%} + <span class="cvus-badge cvus-badge--blue">New Arrival</span> + {%- endif -%} + </div> + </div> + + <!-- Thumbnail strip --> + {%- if product.images.size > 1 -%} + <div class="cvus-pdp__thumbs" role="list"> + {%- for image in product.images limit: 8 -%} + <button + class="cvus-pdp__thumb {% if forloop.first %}is-active{% endif %}" + data-img-src="{{ image | image_url: width: 800 }}" + data-img-alt="{{ image.alt | default: product.title }}" + aria-label="View image {{ forloop.index }}" + type="button" + > + <img + src="{{ image | image_url: width: 120 }}" + alt="{{ image.alt | default: product.title }}" + loading="lazy" + width="120" + > + </button> + {%- endfor -%} + </div> + {%- endif -%} + </div> + + <!-- ── RIGHT: PRODUCT INFO ───────────────────────────── --> + <div class="cvus-pdp__info"> + + <!-- Vendor + breadcrumb --> + <div class="cvus-pdp__meta"> + <span class="cvus-pdp__vendor">{{ product.vendor }}</span> + <span class="cvus-pdp__separator">·</span> + <a href="/collections/all" class="cvus-pdp__back">All Products</a> + </div> + + <!-- Title --> + <h1 class="cvus-pdp__title">{{ product.title }}</h1> + + <!-- Rating (static display) --> + <div class="cvus-pdp__rating" aria-label="5 out of 5 stars"> + <div class="cvus-pdp__stars"> + {% for i in (1..5) %} + <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true"> + <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/> + </svg> + {% endfor %} + </div> + <span class="cvus-pdp__review-count">Authorized Retailer</span> + </div> + + <!-- Price --> + <div class="cvus-pdp__price-block"> + {%- if product.compare_at_price > product.price -%} + <span class="cvus-pdp__price cvus-pdp__price--sale">{{ current_variant.price | money }}</span> + <span class="cvus-pdp__price cvus-pdp__price--compare">{{ current_variant.compare_at_price | money }}</span> + {%- else -%} + <span class="cvus-pdp__price">{{ current_variant.price | money }}</span> + {%- endif -%} + <span class="cvus-pdp__tax-note">+ shipping at checkout</span> + </div> + + <!-- Divider --> + <hr class="cvus-pdp__divider"> + + <!-- Variant / Flavor Picker --> + {%- unless product.has_only_default_variant -%} + {%- for option in product.options_with_values -%} + <div class="cvus-pdp__option-group"> + <p class="cvus-pdp__option-label"> + {{ option.name }}: + <span class="cvus-pdp__option-selected" id="cvus-selected-{{ option.position }}"> + {{ current_variant.options[forloop.index0] }} + </span> + </p> + <div class="cvus-pdp__flavor-grid" role="group" aria-label="{{ option.name }}"> + {%- for value in option.values -%} + <button + type="button" + class="cvus-pdp__flavor-btn {% if current_variant.options[forloop.index0] == value %}is-selected{% endif %}" + data-option-position="{{ option.position }}" + data-option-value="{{ value | escape }}" + aria-pressed="{% if current_variant.options[forloop.index0] == value %}true{% else %}false{% endif %}" + > + {{ value }} + </button> + {%- endfor -%} + </div> + </div> + {%- endfor -%} + {%- endunless -%} + + <!-- Quantity --> + <div class="cvus-pdp__qty-row"> + <label class="cvus-pdp__qty-label" for="cvus-qty">Quantity</label> + <div class="cvus-pdp__qty-wrap"> + <button class="cvus-pdp__qty-btn" type="button" data-action="decrease" aria-label="Decrease quantity">−</button> + <input + type="number" + id="cvus-qty" + class="cvus-pdp__qty-input" + name="quantity" + value="1" + min="1" + max="99" + aria-label="Quantity" + > + <button class="cvus-pdp__qty-btn" type="button" data-action="increase" aria-label="Increase quantity">+</button> + </div> + </div> + + <!-- Add to Cart --> + <form action="/cart/add" method="post" class="cvus-pdp__form" id="cvus-atc-form"> + <input type="hidden" name="id" id="cvus-variant-id" value="{{ current_variant.id }}"> + <input type="hidden" name="quantity" id="cvus-qty-hidden" value="1"> + + {%- if current_variant.available -%} + <button type="submit" class="button cvus-pdp__atc-btn" id="cvus-atc-btn"> + <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> + <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/> + <line x1="3" y1="6" x2="21" y2="6"/> + <path d="M16 10a4 4 0 0 1-8 0"/> + </svg> + Add to Cart + </button> + {%- else -%} + <button type="button" class="button cvus-pdp__atc-btn cvus-pdp__atc-btn--unavailable" disabled> + Out of Stock + </button> + {%- endif -%} + </form> + + <!-- Trust badges --> + <div class="cvus-pdp__trust"> + <div class="cvus-pdp__trust-item"> + <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg> + <span>Authorized Retailer</span> + </div> + <div class="cvus-pdp__trust-item"> + <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg> + <span>Adult Signature Required</span> + </div> + <div class="cvus-pdp__trust-item"> + <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> + <span>21+ Age Verified</span> + </div> + </div> + + <!-- Product description / specs --> + <div class="cvus-pdp__description"> + {{ product.description }} + </div> + + </div> + </div> + </div> +</div> + +<!-- ── PRODUCT PAGE STYLES ───────────────────────────────── --> +{% stylesheet %} +.cvus-pdp { + padding: 4rem 0 6rem; + background: var(--cvus-bg); +} + +/* Layout */ +.cvus-pdp__layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: start; +} + +@media (max-width: 899px) { + .cvus-pdp__layout { grid-template-columns: 1fr; gap: 2rem; } +} + +/* Gallery */ +.cvus-pdp__main-image { + position: relative; + background: var(--cvus-surface); + border: 1px solid var(--cvus-border); + border-radius: var(--cvus-radius-lg); + box-shadow: var(--cvus-shadow-md); + overflow: hidden; + aspect-ratio: 1 / 1; +} + +.cvus-pdp__img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform 0.4s ease; +} + +.cvus-pdp__main-image:hover .cvus-pdp__img { transform: scale(1.04); } + +.cvus-pdp__img-placeholder { + width: 100%; height: 100%; + display: flex; align-items: center; justify-content: center; + background: var(--cvus-elevated); +} +.cvus-pdp__img-placeholder svg { opacity: 0.15; width: 50%; height: 50%; } + +/* Badges */ +.cvus-pdp__badges { + position: absolute; top: 14px; left: 14px; z-index: 2; + display: flex; flex-direction: column; gap: 6px; +} + +/* Thumbnails */ +.cvus-pdp__thumbs { + display: flex; gap: 10px; margin-top: 1rem; flex-wrap: wrap; +} + +.cvus-pdp__thumb { + width: 72px; height: 72px; + border: 2px solid var(--cvus-border); + border-radius: 8px; overflow: hidden; + background: var(--cvus-elevated); + cursor: pointer; padding: 0; + transition: border-color 0.2s; +} + +.cvus-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } +.cvus-pdp__thumb:hover, +.cvus-pdp__thumb.is-active { border-color: var(--cvus-red); } + +/* Info panel */ +.cvus-pdp__meta { + display: flex; align-items: center; gap: 8px; margin-bottom: 0.75rem; +} + +.cvus-pdp__vendor { + font-family: var(--cvus-font-body); + font-size: 0.72rem; font-weight: 700; + letter-spacing: 0.12em; text-transform: uppercase; + color: var(--cvus-red); +} + +.cvus-pdp__separator { color: var(--cvus-text-muted); } + +.cvus-pdp__back { + font-family: var(--cvus-font-body); + font-size: 0.72rem; color: var(--cvus-text-muted) !important; + letter-spacing: 0.08em; text-transform: uppercase; +} +.cvus-pdp__back:hover { color: var(--cvus-text) !important; } + +/* Title */ +.cvus-pdp__title { + font-size: clamp(1.6rem, 3.5vw, 2.6rem) !important; + margin: 0 0 0.75rem !important; +} + +/* Rating */ +.cvus-pdp__rating { display: flex; align-items: center; gap: 10px; margin-bottom: 1.2rem; } +.cvus-pdp__stars { display: flex; gap: 3px; color: #f59e0b; } +.cvus-pdp__review-count { + font-size: 0.78rem; color: var(--cvus-text-muted); + font-family: var(--cvus-font-body); letter-spacing: 0.04em; +} + +/* Price */ +.cvus-pdp__price-block { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 0.75rem; } +.cvus-pdp__price { font-size: 1.8rem; font-weight: 800; color: var(--cvus-red); font-family: var(--cvus-font-body); } +.cvus-pdp__price--sale { color: var(--cvus-red); } +.cvus-pdp__price--compare { font-size: 1rem; font-weight: 400; color: var(--cvus-text-muted); text-decoration: line-through; } +.cvus-pdp__tax-note { font-size: 0.75rem; color: var(--cvus-text-muted); width: 100%; } + +/* Divider */ +.cvus-pdp__divider { border-color: var(--cvus-border); margin: 1.5rem 0; } + +/* Option group */ +.cvus-pdp__option-group { margin-bottom: 1.5rem; } + +.cvus-pdp__option-label { + font-family: var(--cvus-font-body) !important; + font-size: 0.8rem !important; font-weight: 600 !important; + letter-spacing: 0.08em !important; text-transform: uppercase !important; + color: var(--cvus-text-sub) !important; margin-bottom: 0.75rem !important; +} + +.cvus-pdp__option-selected { + color: var(--cvus-text) !important; font-weight: 700 !important; +} + +/* Flavor buttons */ +.cvus-pdp__flavor-grid { display: flex; flex-wrap: wrap; gap: 8px; } + +.cvus-pdp__flavor-btn { + background: var(--cvus-surface); + border: 1px solid var(--cvus-border-strong); + border-radius: var(--cvus-radius-md); + color: var(--cvus-text-sub); + font-family: var(--cvus-font-body); + font-size: 0.78rem; font-weight: 500; + padding: 7px 14px; cursor: pointer; + transition: border-color 0.2s, background-color 0.2s, color 0.2s; +} + +.cvus-pdp__flavor-btn:hover { + border-color: var(--cvus-red); color: var(--cvus-text); +} + +.cvus-pdp__flavor-btn.is-selected { + background: var(--cvus-red); border-color: var(--cvus-red); + color: #fff; font-weight: 600; +} + +/* Qty */ +.cvus-pdp__qty-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; } +.cvus-pdp__qty-label { + font-family: var(--cvus-font-body) !important; font-size: 0.8rem !important; + font-weight: 600 !important; letter-spacing: 0.08em !important; + text-transform: uppercase !important; color: var(--cvus-text-sub) !important; + min-width: 70px; +} + +.cvus-pdp__qty-wrap { display: flex; align-items: center; gap: 0; } +.cvus-pdp__qty-btn { + width: 40px; height: 40px; + background: var(--cvus-surface); border: 1px solid var(--cvus-border-strong); + color: var(--cvus-text); font-size: 1.2rem; cursor: pointer; + transition: background 0.2s, color 0.2s; + display: flex; align-items: center; justify-content: center; +} +.cvus-pdp__qty-btn:first-child { border-radius: 8px 0 0 8px; } +.cvus-pdp__qty-btn:last-child { border-radius: 0 8px 8px 0; } +.cvus-pdp__qty-btn:hover { background: var(--cvus-red); color: #fff; border-color: var(--cvus-red); } + +.cvus-pdp__qty-input { + width: 56px; height: 40px; + background: var(--cvus-surface) !important; + border: 1px solid var(--cvus-border-strong) !important; + border-left: none !important; border-right: none !important; + border-radius: 0 !important; + color: var(--cvus-text) !important; + font-family: var(--cvus-font-body) !important; + font-size: 0.95rem !important; font-weight: 600 !important; + text-align: center; padding: 0 !important; +} +.cvus-pdp__qty-input::-webkit-inner-spin-button, +.cvus-pdp__qty-input::-webkit-outer-spin-button { -webkit-appearance: none; } + +/* ATC button */ +.cvus-pdp__atc-btn { + width: 100% !important; padding: 17px !important; + font-size: 0.9rem !important; letter-spacing: 0.12em !important; + display: flex !important; align-items: center !important; + justify-content: center !important; gap: 10px !important; + margin-bottom: 1.2rem; +} + +.cvus-pdp__atc-btn--unavailable { + background: var(--cvus-surface) !important; + color: var(--cvus-text-muted) !important; + cursor: not-allowed !important; + transform: none !important; box-shadow: none !important; +} + +/* Trust badges */ +.cvus-pdp__trust { + display: flex; flex-wrap: wrap; gap: 1rem; + padding: 1rem 0; border-top: 1px solid var(--cvus-border); + border-bottom: 1px solid var(--cvus-border); margin-bottom: 1.5rem; +} + +.cvus-pdp__trust-item { + display: flex; align-items: center; gap: 7px; + font-family: var(--cvus-font-body); font-size: 0.75rem; + font-weight: 500; color: var(--cvus-text-sub); + letter-spacing: 0.03em; +} +.cvus-pdp__trust-item svg { color: var(--cvus-red); flex-shrink: 0; } + +/* Description / specs */ +.cvus-pdp__description { color: var(--cvus-text-sub); line-height: 1.7; } + +/* Spec styles injected from product body */ +.cvus-product-spec h3 { + font-family: var(--cvus-font-display) !important; + font-size: 1.2rem !important; font-weight: 700 !important; + text-transform: uppercase !important; letter-spacing: 0.04em !important; + color: var(--cvus-text) !important; margin: 0 0 0.75rem !important; +} + +.cvus-product-spec p { + font-size: 0.9rem; line-height: 1.7; + color: var(--cvus-text-sub); margin-bottom: 1.2rem; +} + +.cvus-spec-list { + list-style: none; margin: 0 0 1.2rem; padding: 0; + background: var(--cvus-elevated); + border: 1px solid var(--cvus-border); + border-radius: var(--cvus-radius-md); + overflow: hidden; +} + +.cvus-spec-list li { + padding: 10px 16px; + border-bottom: 1px solid var(--cvus-border); + font-size: 0.85rem; color: var(--cvus-text-sub); + display: flex; gap: 8px; +} +.cvus-spec-list li:last-child { border-bottom: none; } +.cvus-spec-list li strong { color: var(--cvus-text); min-width: 160px; flex-shrink: 0; } + +.cvus-warning { + background: rgba(230, 57, 70, 0.06); + border: 1px solid rgba(230, 57, 70, 0.2); + border-radius: var(--cvus-radius-md); + padding: 12px 16px; + font-size: 0.78rem !important; color: #fca5a5 !important; + line-height: 1.5; margin-top: 1rem; +} +{% endstylesheet %} + +<!-- ── PRODUCT PAGE JAVASCRIPT ───────────────────────────── --> +<script> +(function () { + const form = document.getElementById('cvus-atc-form'); + const variantId = document.getElementById('cvus-variant-id'); + const qtyInput = document.getElementById('cvus-qty'); + const qtyHidden = document.getElementById('cvus-qty-hidden'); + const mainImg = document.getElementById('cvus-pdp-main-img'); + const thumbs = document.querySelectorAll('.cvus-pdp__thumb'); + const flavorBtns = document.querySelectorAll('.cvus-pdp__flavor-btn'); + const atcBtn = document.getElementById('cvus-atc-btn'); + + // Product variants data + const variants = {{ product.variants | json }}; + + /* ── Quantity control ─────────────────────────────────── */ + document.querySelectorAll('.cvus-pdp__qty-btn').forEach(btn => { + btn.addEventListener('click', () => { + let val = parseInt(qtyInput.value, 10) || 1; + if (btn.dataset.action === 'increase') val = Math.min(val + 1, 99); + if (btn.dataset.action === 'decrease') val = Math.max(val - 1, 1); + qtyInput.value = val; + qtyHidden.value = val; + }); + }); + + qtyInput.addEventListener('input', () => { + qtyHidden.value = qtyInput.value; + }); + + /* ── Thumbnail switcher ───────────────────────────────── */ + thumbs.forEach(thumb => { + thumb.addEventListener('click', () => { + if (mainImg) { + mainImg.src = thumb.dataset.imgSrc; + mainImg.alt = thumb.dataset.imgAlt; + } + thumbs.forEach(t => t.classList.remove('is-active')); + thumb.classList.add('is-active'); + }); + }); + + /* ── Flavor / variant picker ──────────────────────────── */ + const selectedOptions = {}; + + // Init from current variant + {{ product.selected_or_first_available_variant.options | json }}.forEach((val, i) => { + selectedOptions[i + 1] = val; + }); + + flavorBtns.forEach(btn => { + btn.addEventListener('click', () => { + const pos = btn.dataset.optionPosition; + const val = btn.dataset.optionValue; + + // Update selected display + const display = document.getElementById('cvus-selected-' + pos); + if (display) display.textContent = val; + + // Update button states + document.querySelectorAll(`.cvus-pdp__flavor-btn[data-option-position="${pos}"]`).forEach(b => { + b.classList.remove('is-selected'); + b.setAttribute('aria-pressed', 'false'); + }); + btn.classList.add('is-selected'); + btn.setAttribute('aria-pressed', 'true'); + + // Update selected options map + selectedOptions[pos] = val; + + // Find matching variant + const match = variants.find(v => { + return v.options.every((opt, idx) => { + const key = String(idx + 1); + return selectedOptions[key] ? selectedOptions[key] === opt : true; + }); + }); + + if (match) { + variantId.value = match.id; + // Update URL without reload + const url = new URL(window.location.href); + url.searchParams.set('variant', match.id); + window.history.replaceState({}, '', url); + // Update image if variant has one + if (match.featured_image && mainImg) { + mainImg.src = match.featured_image.src; + } + // Update availability + if (atcBtn) { + if (match.available) { + atcBtn.disabled = false; + atcBtn.textContent = ''; + atcBtn.innerHTML = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>Add to Cart'; + atcBtn.classList.remove('cvus-pdp__atc-btn--unavailable'); + } else { + atcBtn.disabled = true; + atcBtn.textContent = 'Out of Stock'; + atcBtn.classList.add('cvus-pdp__atc-btn--unavailable'); + } + } + } + }); + }); + + /* ── Add to cart with feedback ────────────────────────── */ + if (form && atcBtn) { + form.addEventListener('submit', async (e) => { + e.preventDefault(); + const originalHTML = atcBtn.innerHTML; + atcBtn.innerHTML = 'Adding…'; + atcBtn.disabled = true; + + try { + const res = await fetch('/cart/add.js', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + id: parseInt(variantId.value, 10), + quantity: parseInt(qtyInput.value, 10) || 1 + }) + }); + + if (res.ok) { + atcBtn.innerHTML = '✓ Added to Cart'; + atcBtn.style.background = '#16a34a'; + setTimeout(() => { + atcBtn.innerHTML = originalHTML; + atcBtn.style.background = ''; + atcBtn.disabled = false; + }, 2000); + } else { + throw new Error(); + } + } catch { + atcBtn.innerHTML = 'Error — Try Again'; + atcBtn.style.background = '#dc2626'; + setTimeout(() => { + atcBtn.innerHTML = originalHTML; + atcBtn.style.background = ''; + atcBtn.disabled = false; + }, 2000); + } + }); + } +})(); +</script> + +{% schema %} +{ + "name": "CloudVaultUS Product Page", + "tag": "div", + "settings": [] +} +{% endschema %} diff --git a/snippets/cvus-age-gate.liquid b/snippets/cvus-age-gate.liquid new file mode 100644 index 00000000000..1278d1a7538 --- /dev/null +++ b/snippets/cvus-age-gate.liquid @@ -0,0 +1,113 @@ +{% comment %} + CloudVaultUS — Custom 21+ Age Gate + File: snippets/cvus-age-gate.liquid + Include in: layout/theme.liquid just before </body> + Usage: {% render 'cvus-age-gate' %} +{% endcomment %} + +<div id="cvus-age-gate" class="cvus-ag" role="dialog" aria-modal="true" aria-labelledby="cvus-ag-title" aria-hidden="true"> + <div class="cvus-ag__backdrop"></div> + + <div class="cvus-ag__modal"> + <!-- Logo / Brand --> + <div class="cvus-ag__brand"> + <span class="cvus-ag__logo">CloudVaultUS</span> + <span class="cvus-ag__tagline">Premium Vape Products</span> + </div> + + <!-- Icon --> + <div class="cvus-ag__icon" aria-hidden="true"> + <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> + <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 5v5l3 3"/> + <circle cx="12" cy="12" r="10"/> + <path d="M12 8v4l2.5 2.5"/> + </svg> + </div> + + <!-- Heading --> + <h2 id="cvus-ag-title" class="cvus-ag__heading">Age Verification Required</h2> + <p class="cvus-ag__description"> + This website contains products intended for adults aged <strong>21 and older</strong>. + Please confirm your date of birth to continue. + </p> + + <!-- DOB Form --> + <form id="cvus-ag-form" class="cvus-ag__form" novalidate> + <div class="cvus-ag__dob-row"> + <div class="cvus-ag__field"> + <label for="cvus-ag-month">Month</label> + <select id="cvus-ag-month" name="month" required autocomplete="bday-month"> + <option value="">MM</option> + <option value="1">01 — Jan</option> + <option value="2">02 — Feb</option> + <option value="3">03 — Mar</option> + <option value="4">04 — Apr</option> + <option value="5">05 — May</option> + <option value="6">06 — Jun</option> + <option value="7">07 — Jul</option> + <option value="8">08 — Aug</option> + <option value="9">09 — Sep</option> + <option value="10">10 — Oct</option> + <option value="11">11 — Nov</option> + <option value="12">12 — Dec</option> + </select> + </div> + + <div class="cvus-ag__field"> + <label for="cvus-ag-day">Day</label> + <input + type="number" + id="cvus-ag-day" + name="day" + min="1" + max="31" + placeholder="DD" + required + autocomplete="bday-day" + > + </div> + + <div class="cvus-ag__field"> + <label for="cvus-ag-year">Year</label> + <input + type="number" + id="cvus-ag-year" + name="year" + min="1900" + max="2099" + placeholder="YYYY" + required + autocomplete="bday-year" + > + </div> + </div> + + <!-- Error message --> + <p id="cvus-ag-error" class="cvus-ag__error" aria-live="polite" hidden></p> + + <!-- Remember checkbox --> + <label class="cvus-ag__remember"> + <input type="checkbox" id="cvus-ag-remember" checked> + <span>Remember me on this device for 30 days</span> + </label> + + <!-- Submit --> + <button type="submit" class="button cvus-ag__submit"> + Confirm Age & Enter + </button> + + <!-- Decline --> + <a href="https://www.google.com" class="cvus-ag__decline"> + I am under 21 — Exit + </a> + </form> + + <!-- Legal notice --> + <p class="cvus-ag__legal"> + By entering this site you agree to our + <a href="/policies/terms-of-service">Terms of Service</a> + and confirm that nicotine products are legal in your area. + This site uses cookies to remember your verification. + </p> + </div> +</div> diff --git a/snippets/cvus-order-notification.liquid b/snippets/cvus-order-notification.liquid new file mode 100644 index 00000000000..b5f802bf92e --- /dev/null +++ b/snippets/cvus-order-notification.liquid @@ -0,0 +1,19 @@ +{% comment %} + CloudVaultUS — Admin Order Notification Template + File: snippets/cvus-order-notification.liquid + + HOW TO USE: + This is NOT rendered on the storefront. It is a reference template + for the email body you paste into: + Shopify Admin → Settings → Notifications → New order + + To set up: + 1. Go to Shopify Admin → Settings → Notifications + 2. Click "New order" + 3. Replace the email body with the HTML below + 4. Set recipient to your admin email address + 5. Save + + The variables ({{ order.* }}) are Shopify Liquid — they render + live data in every notification email Shopify sends you. +{% endcomment %} diff --git a/templates/index.json b/templates/index.json index 92d10b71ece..79cf27288b1 100644 --- a/templates/index.json +++ b/templates/index.json @@ -1,210 +1,203 @@ { "sections": { - "image_banner": { - "type": "image-banner", + "cvus_hero": { + "type": "cvus-hero", "blocks": { - "heading": { - "type": "heading", - "settings": { - "heading": "Image banner", - "heading_size": "h0" - } + "stat-1": { + "type": "stat", + "settings": { "value": "35K+", "label": "Max Puffs" } }, - "text": { - "type": "text", - "settings": { - "text": "Give customers details about the banner image(s) or content on the template.", - "text_style": "body" - } + "stat-2": { + "type": "stat", + "settings": { "value": "5%", "label": "Nicotine" } }, - "button": { - "type": "buttons", - "settings": { - "button_label_1": "Shop all", - "button_link_1": "shopify://collections/all", - "button_style_secondary_1": true, - "button_label_2": "", - "button_link_2": "", - "button_style_secondary_2": false - } + "stat-3": { + "type": "stat", + "settings": { "value": "4.9★", "label": "Rating" } } }, - "block_order": [ - "heading", - "text", - "button" - ], + "block_order": ["stat-1", "stat-2", "stat-3"], "settings": { - "image_overlay_opacity": 40, - "image_height": "large", - "desktop_content_position": "bottom-center", - "show_text_box": false, - "desktop_content_alignment": "center", - "color_scheme": "scheme-3", - "mobile_content_alignment": "center", - "stack_images_on_mobile": false, - "show_text_below": false + "eyebrow": "New Arrival", + "heading": "Next-Level\nVaping", + "subheading": "Premium disposable vapes with industry-leading puff counts. Sourced from top brands — shipped to your door.", + "cta_label": "Shop Now", + "cta_url": "/collections/all", + "cta2_label": "View All", + "cta2_url": "/collections" } }, - "rich_text": { - "type": "rich-text", + "cvus_features": { + "type": "cvus-features-strip", "blocks": { - "heading": { - "type": "heading", - "settings": { - "heading": "Talk about your brand", - "heading_size": "h1" - } + "feat-1": { + "type": "feature", + "settings": { "icon": "🚚", "title": "Free Shipping", "subtitle": "Orders over $35" } }, - "text": { - "type": "text", - "settings": { - "text": "<p>Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.<\/p>" - } + "feat-2": { + "type": "feature", + "settings": { "icon": "🔒", "title": "Secure Payment", "subtitle": "256-bit SSL" } + }, + "feat-3": { + "type": "feature", + "settings": { "icon": "✅", "title": "Authentic Products", "subtitle": "Verified brands only" } + }, + "feat-4": { + "type": "feature", + "settings": { "icon": "🎧", "title": "24/7 Support", "subtitle": "Always available" } } }, - "block_order": [ - "heading", - "text" - ], + "block_order": ["feat-1", "feat-2", "feat-3", "feat-4"], + "settings": {} + }, + "cvus_brands": { + "type": "cvus-brand-showcase", + "blocks": { + "brand-1": { + "type": "brand", + "settings": { "name": "Geek Bar", "tagline": "Premium Disposables" } + }, + "brand-2": { + "type": "brand", + "settings": { "name": "Lost Mary", "tagline": "Turbo Series" } + }, + "brand-3": { + "type": "brand", + "settings": { "name": "Elf Bar", "tagline": "Best Sellers" } + }, + "brand-4": { + "type": "brand", + "settings": { "name": "Hyde", "tagline": "High Capacity" } + }, + "brand-5": { + "type": "brand", + "settings": { "name": "Funky Republic", "tagline": "Bold Flavors" } + } + }, + "block_order": ["brand-1", "brand-2", "brand-3", "brand-4", "brand-5"], "settings": { - "color_scheme": "scheme-1", - "full_width": true, - "padding_top": 40, - "padding_bottom": 0 + "eyebrow": "Carried Brands", + "title": "Authentic. Verified. Premium.", + "subtitle": "We partner only with the most trusted manufacturers in the industry — every product authenticated." } }, - "featured_collection": { - "type": "featured-collection", + "cvus_products": { + "type": "cvus-product-grid", "settings": { - "title": "Featured products", - "heading_size": "h2", + "title": "Featured Products", "collection": "all", - "products_to_show": 8, - "columns_desktop": 4, - "color_scheme": "scheme-1", - "show_view_all": false, - "swipe_on_mobile": false, - "image_ratio": "adapt", - "show_secondary_image": true, - "show_vendor": false, - "show_rating": false, - "columns_mobile": "2", - "padding_top": 28, - "padding_bottom": 36 + "products_to_show": 6, + "view_all_label": "View All", + "view_all_url": "/collections/all" } }, - "collage": { - "type": "collage", + "cvus_categories": { + "type": "cvus-category-cards", "blocks": { - "collection-0": { - "type": "collection", + "cat-1": { + "type": "category", + "settings": { + "title": "Disposables", + "count": "12 Products", + "subtitle": "High-puff devices ready out of the box.", + "url": "/collections/all", + "tint": "rose" + } + }, + "cat-2": { + "type": "category", "settings": { - "collection": "" + "title": "Pod Systems", + "count": "8 Products", + "subtitle": "Refillable, rechargeable, premium build.", + "url": "/collections/all", + "tint": "mint" } }, - "product": { - "type": "product", + "cat-3": { + "type": "category", "settings": { - "product": "", - "second_image": false + "title": "Salt Nic", + "count": "14 Products", + "subtitle": "Smooth, high-strength e-liquids.", + "url": "/collections/all", + "tint": "peach" } }, - "collection-1": { - "type": "collection", + "cat-4": { + "type": "category", "settings": { - "collection": "" + "title": "Accessories", + "count": "6 Products", + "subtitle": "Coils, batteries, chargers, cases.", + "url": "/collections/all", + "tint": "lavender" } } }, - "block_order": [ - "collection-0", - "product", - "collection-1" - ], - "settings": { - "heading": "Multimedia collage", - "heading_size": "h2", - "desktop_layout": "left", - "mobile_layout": "collage", - "color_scheme": "scheme-1", - "padding_top": 36, - "padding_bottom": 36 - } - }, - "video": { - "type": "video", + "block_order": ["cat-1", "cat-2", "cat-3", "cat-4"], "settings": { - "heading": "", - "video_url": "https://www.youtube.com/watch?v=_9VUPq3SxOc", - "heading_size": "h1", - "description": "", - "full_width": false, - "color_scheme": "scheme-1", - "padding_top": 36, - "padding_bottom": 36 + "title": "Shop By Category", + "see_all_label": "View All", + "see_all_url": "/collections" } }, - "multicolumn": { - "type": "multicolumn", + "cvus_editorial": { + "type": "cvus-editorial", "blocks": { - "column1": { - "type": "column", + "point-1": { + "type": "point", "settings": { - "title": "Column", - "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", - "link_label": "", - "link": "" + "icon": "✓", + "title": "100% Authentic Products", + "description": "Sourced directly from manufacturers — every device verified." } }, - "column2": { - "type": "column", + "point-2": { + "type": "point", "settings": { - "title": "Column", - "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", - "link_label": "", - "link": "" + "icon": "⚡", + "title": "Ships in 24 Hours", + "description": "Fast, signature-required delivery via FedEx & UPS." } }, - "column3": { - "type": "column", + "point-3": { + "type": "point", "settings": { - "title": "Column", - "text": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.<\/p>", - "link_label": "", - "link": "" + "icon": "21+", + "title": "Age-Verified Checkout", + "description": "Real ID verification on every order. Always 21+ only." } } }, - "block_order": [ - "column1", - "column2", - "column3" - ], + "block_order": ["point-1", "point-2", "point-3"], + "settings": { + "eyebrow": "Why CloudVaultUS", + "heading": "Premium Vapes,\nAuthenticated.", + "body": "We go beyond dropshipping. Every product in our catalog is sourced directly from authorized manufacturers, age-gated at checkout, and ships with adult-signature delivery.", + "cta_label": "Shop the Collection", + "cta_url": "/collections/all" + } + }, + "cvus_newsletter": { + "type": "cvus-newsletter", "settings": { - "title": "", - "heading_size": "h1", - "image_width": "third", - "image_ratio": "adapt", - "columns_desktop": 3, - "column_alignment": "center", - "background_style": "none", - "button_label": "", - "button_link": "", - "swipe_on_mobile": false, - "color_scheme": "scheme-1", - "columns_mobile": "1", - "padding_top": 36, - "padding_bottom": 36 + "eyebrow": "Join the Vault", + "heading": "Get 10% Off Your\nFirst Order.", + "body": "Subscribe for early access to new flavors, restock alerts, and members-only deals.", + "placeholder": "Enter your email", + "button_label": "Get 10% Off", + "success_message": "Thanks! Check your inbox for your discount code." } } }, "order": [ - "image_banner", - "rich_text", - "featured_collection", - "collage", - "video", - "multicolumn" + "cvus_hero", + "cvus_features", + "cvus_brands", + "cvus_products", + "cvus_categories", + "cvus_editorial", + "cvus_newsletter" ] } diff --git a/templates/product.cvus.json b/templates/product.cvus.json new file mode 100644 index 00000000000..2149996cf35 --- /dev/null +++ b/templates/product.cvus.json @@ -0,0 +1,9 @@ +{ + "sections": { + "main": { + "type": "cvus-product-main", + "settings": {} + } + }, + "order": ["main"] +}