/** Shopify CDN: Minification failed Line 30:0 All "@import" rules must come first Line 76:18 Expected identifier but found whitespace Line 76:19 Unexpected "blur(" **/ /* ============================================ ORVELLI · CUSTOM STYLES Upload to: Assets/custom-orvelli.css Then add to theme.liquid : {{ 'custom-orvelli.css' | asset_url | stylesheet_tag }} ============================================ */ :root { --ov-black: #0A0A0A; --ov-white: #FFFFFF; --ov-ivory: #F7F3EE; --ov-cream: #EDE8E0; --ov-gold: #C9A96E; --ov-gold-lt: #DFC99A; --ov-stone: #6B6055; --ov-linen: #D4C9BC; --ov-warm: #E8DDD0; --ov-serif: 'Cormorant Garamond', Georgia, serif; --ov-sans: 'Montserrat', sans-serif; } /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Montserrat:wght@300;400;500&display=swap'); /* ── GLOBAL OVERRIDES ── */ body { background-color: var(--ov-ivory) !important; font-family: var(--ov-sans) !important; color: var(--ov-black) !important; } /* ── ANNOUNCEMENT BAR ── */ .announcement-bar, .shopify-section-announcement-bar { background: var(--ov-black) !important; color: var(--ov-gold) !important; height: 36px !important; overflow: hidden; } .announcement-bar__message, .announcement-bar p, .announcement-bar span { font-family: var(--ov-sans) !important; font-size: 10px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--ov-gold) !important; } /* Scrolling animation for announcement */ .announcement-bar__message-inner { display: inline-flex; animation: ov-ticker 30s linear infinite; white-space: nowrap; } @keyframes ov-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── HEADER / NAV ── */ .header, .site-header, header.header, .header--top-line, .shopify-section-group-header-group .header { background: #0A0A0A !important; backdrop-filter: none !important; } backdrop-filter: blur(12px) !important; border-bottom: 0.5px solid var(--ov-linen) !important; box-shadow: none !important; } /* Logo */ .header__heading-link, .site-header__logo a, .header__logo { font-family: var(--ov-serif) !important; font-size: 26px !important; font-weight: 400 !important; letter-spacing: 6px !important; color: var(--ov-black) !important; text-transform: uppercase !important; text-decoration: none !important; } .header__heading-link:hover { color: var(--ov-black) !important; } /* Nav links */ .header__menu-item, .header__menu-item a, .header__active-menu-item, .site-nav__link { font-family: var(--ov-sans) !important; font-size: 10px !important; letter-spacing: 2.5px !important; text-transform: uppercase !important; color: var(--ov-black) !important; text-decoration: none !important; transition: color 0.2s !important; } .header__menu-item a:hover, .site-nav__link:hover { color: var(--ov-gold) !important; } .header__heading-link, .header__menu-item a, .header__icon svg, .header__icon { color: #FFFFFF !important; } /* Dropdown */ .header__submenu, .site-nav__dropdown { background: var(--ov-ivory) !important; border: 0.5px solid var(--ov-linen) !important; box-shadow: 0 8px 40px rgba(0,0,0,0.08) !important; border-radius: 0 !important; } .header__submenu a, .site-nav__dropdown a { font-family: var(--ov-sans) !important; font-size: 10px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--ov-black) !important; padding: 10px 24px !important; } .header__submenu a:hover, .site-nav__dropdown a:hover { background: var(--ov-warm) !important; color: var(--ov-gold) !important; } /* Header icons (search, account, cart) */ .header__icon, .header__icons .header__icon, .site-header__icons a { color: var(--ov-black) !important; transition: color 0.2s !important; } .header__icon:hover, .site-header__icons a:hover { color: var(--ov-gold) !important; } /* Cart count bubble */ .cart-count-bubble { background: var(--ov-gold) !important; color: var(--ov-black) !important; } /* ── HERO / SLIDESHOW ── */ .banner, .slideshow, .hero-section { background: var(--ov-black) !important; } .banner__heading, .slideshow__heading, .hero-section__heading { font-family: var(--ov-serif) !important; font-weight: 300 !important; color: var(--ov-white) !important; letter-spacing: 1px !important; line-height: 1.1 !important; } .banner__text, .slideshow__text, .hero-section__text { font-family: var(--ov-serif) !important; color: rgba(255,255,255,0.6) !important; font-size: 16px !important; line-height: 1.8 !important; } /* ── BUTTONS ── */ .button, .btn, button[type="submit"], .shopify-payment-button__button, input[type="submit"] { font-family: var(--ov-sans) !important; font-size: 10px !important; letter-spacing: 3px !important; text-transform: uppercase !important; border-radius: 0 !important; } /* Primary button */ .button--primary, .btn--primary, a.button, button.button--full-width, .product-form__submit, .add-to-cart-button:not(.button-unstyled):not(.quick-add__button--choose) { background: var(--ov-gold) !important; color: var(--ov-black) !important; border: none !important; transition: background 0.25s !important; } .button--primary:hover, .btn--primary:hover { background: var(--ov-gold-lt) !important; color: var(--ov-black) !important; } /* Secondary / outline button */ .button--secondary, .btn--secondary { background: transparent !important; color: var(--ov-black) !important; border: 0.5px solid var(--ov-black) !important; transition: background 0.2s, color 0.2s !important; } .button--secondary:hover { background: var(--ov-black) !important; color: var(--ov-white) !important; } /* ── COLLECTION / PRODUCT CARDS ── */ .card-wrapper, .product-card-wrapper { background: var(--ov-warm) !important; } .card, .product-card { border-radius: 0 !important; box-shadow: none !important; border: none !important; } .card__heading, .product-card__title, .card-information__heading { font-family: var(--ov-serif) !important; font-size: 17px !important; font-weight: 400 !important; color: var(--ov-black) !important; letter-spacing: 0.3px !important; } .price, .product-price, .price__regular { font-family: var(--ov-sans) !important; font-size: 13px !important; font-weight: 500 !important; color: var(--ov-black) !important; } .price--on-sale .price__regular { color: var(--ov-stone) !important; } .price--on-sale .price__sale { color: var(--ov-black) !important; } /* Badge / label */ .badge, .product-badge, .card__badge { background: var(--ov-gold) !important; color: var(--ov-black) !important; font-family: var(--ov-sans) !important; font-size: 8px !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 0 !important; padding: 4px 10px !important; } /* Quick add */ .quick-add__submit, .card__quick-add button { background: var(--ov-black) !important; color: var(--ov-white) !important; font-family: var(--ov-sans) !important; font-size: 9px !important; letter-spacing: 2px !important; text-transform: uppercase !important; border-radius: 0 !important; border: none !important; } /* ── SECTION HEADINGS ── */ .section-header__title, .collection-hero__title, .featured-collection__title, h1.title, h2.title, h3.title, .featured-row__heading { font-family: var(--ov-serif) !important; font-weight: 400 !important; color: var(--ov-black) !important; letter-spacing: 0.5px !important; } /* Section subheading / label */ .section-header__description, .featured-collection__description { font-family: var(--ov-serif) !important; font-style: italic !important; color: var(--ov-stone) !important; } /* ── MARQUEE / TICKER STRIP ── */ .ov-marquee { background: var(--ov-gold); height: 44px; overflow: hidden; display: flex; align-items: center; } .ov-marquee__track { display: flex; white-space: nowrap; animation: ov-ticker 20s linear infinite; } .ov-marquee__track span { font-family: var(--ov-serif); font-size: 15px; font-style: italic; padding: 0 36px; color: var(--ov-black); } /* ── RICH TEXT / ABOUT / STORY SECTIONS ── */ .rich-text__heading { font-family: var(--ov-serif) !important; font-weight: 400 !important; color: var(--ov-black) !important; } .rich-text__text, .rich-text p { font-family: var(--ov-serif) !important; font-size: 16px !important; line-height: 1.9 !important; color: var(--ov-stone) !important; } /* ── FOOTER ── */ .footer, footer.footer { background: var(--ov-black) !important; border-top: 0.5px solid #1a1a1a !important; } .footer__heading, .footer-block__heading { font-family: var(--ov-sans) !important; font-size: 9px !important; letter-spacing: 3px !important; text-transform: uppercase !important; color: var(--ov-white) !important; margin-bottom: 20px !important; } .footer a, .footer__list a, .footer-block__list a { font-family: var(--ov-sans) !important; font-size: 11px !important; color: var(--ov-stone) !important; text-decoration: none !important; letter-spacing: 0.5px !important; transition: color 0.2s !important; display: block; margin-bottom: 12px; } .footer a:hover, .footer__list a:hover, .footer-block__list a:hover { color: var(--ov-gold) !important; } .footer__copyright, .footer__copyright p { font-family: var(--ov-sans) !important; font-size: 10px !important; color: #333 !important; letter-spacing: 1px !important; } /* ── INPUT / FORM ── */ .field__input, .customer input, input[type="text"], input[type="email"], input[type="password"], textarea { font-family: var(--ov-sans) !important; font-size: 12px !important; border-radius: 0 !important; border: 0.5px solid var(--ov-linen) !important; background: var(--ov-white) !important; color: var(--ov-black) !important; transition: border-color 0.2s !important; } .field__input:focus, input:focus { border-color: var(--ov-gold) !important; outline: none !important; box-shadow: none !important; } /* ── CART DRAWER ── */ .cart-drawer, .drawer { background: var(--ov-ivory) !important; } .cart-drawer__header, .drawer__header { border-bottom: 0.5px solid var(--ov-linen) !important; } .cart-drawer__heading, .drawer__heading { font-family: var(--ov-serif) !important; font-size: 22px !important; font-weight: 400 !important; color: var(--ov-black) !important; } .cart-item__name, .cart-drawer__item-title { font-family: var(--ov-serif) !important; font-size: 15px !important; color: var(--ov-black) !important; } .cart-item__price, .cart-drawer__price { font-family: var(--ov-sans) !important; font-size: 13px !important; color: var(--ov-black) !important; } .totals__total-value { font-family: var(--ov-sans) !important; color: var(--ov-black) !important; } /* ── PAGINATION ── */ .pagination { font-family: var(--ov-sans) !important; } .pagination__item--current { background: var(--ov-black) !important; color: var(--ov-white) !important; } .pagination__item:hover { color: var(--ov-gold) !important; } /* ── PRODUCT PAGE ── */ .product__title { font-family: var(--ov-serif) !important; font-size: clamp(28px, 4vw, 42px) !important; font-weight: 400 !important; color: var(--ov-black) !important; } .product__description, .product-single__description { font-family: var(--ov-serif) !important; font-size: 16px !important; line-height: 1.9 !important; color: var(--ov-stone) !important; } .variant-picker__label, .product-form__label { font-family: var(--ov-sans) !important; font-size: 9px !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--ov-stone) !important; } .swatch__input:checked + .swatch__label, .color-swatch.active { border-color: var(--ov-gold) !important; } /* ── BREADCRUMBS ── */ .breadcrumb, nav.breadcrumbs { font-family: var(--ov-sans) !important; font-size: 10px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--ov-stone) !important; } .breadcrumb a { color: var(--ov-stone) !important; } .breadcrumb a:hover { color: var(--ov-gold) !important; } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: var(--ov-ivory); } ::-webkit-scrollbar-thumb { background: var(--ov-linen); } ::-webkit-scrollbar-thumb:hover { background: var(--ov-gold); } /* ── SELECTION ── */ ::selection { background: var(--ov-gold); color: var(--ov-black); } /* 隐藏主题原有header，使用ORVELLI自定义header */ .shopify-section-group-header-group { display: none !important; } /* 修复导航间距 */ .ov-nav { gap: 20px !important; } .ov-nav a { font-size: 9px !important; letter-spacing: 1.5px !important; white-space: nowrap !important; } .ov-header-inner { padding: 0 24px !important; } .ov-cat-card { min-height: 280px !important; } .ov-cat-card.wide { min-height: 320px !important; } .ov-cat-card[style*="aspect-ratio"] { aspect-ratio: unset !important; min-height: 280px !important; } /* 修复产品页图片区域 */ .product__media-wrapper, .product__media, .product-media-container, .media-wrapper, [class*="product__media"] { background: #FFFFFF !important; } /* 修复变体选择器色块 */ .variant-picker, .product-form__input, .swatch, [class*="variant"] { background: transparent !important; } /* 修复sold out按钮颜色 */ .shopify-payment-button__button--unaccelerated[disabled], .btn[disabled], .button[disabled] { background: #E8DDD0 !important; color: #6B6055 !important; } .product-media-container, .product-media-container--image, .product-media-container--zoomable, .media-fit-contain { background: #FFFFFF !important; } /* 修复按钮覆盖问题 — 只让特定按钮用金色，其余恢复透明 */ .button-unstyled, .button-unstyled--transparent, .close-button, .quantity-minus, .quantity-plus, .product-media-container__zoom-button, .dialog-zoomed-gallery__close-button, .menu-drawer__close-button, .cart-drawer__close-button, .slideshow-control, .predictive-search__close-modal-button, .predictive-search__search-button, .predictive-search-results__clear, .quick-add__button--choose { background: transparent !important; background-color: transparent !important; } /* 购物车空状态按钮 */ .cart-items__empty-button { background: var(--ov-gold) !important; } /* 数量加减按钮单独处理 */ .quantity-minus, .quantity-plus { color: var(--ov-black) !important; } .quantity-minus:disabled, .quantity-plus:disabled, button[disabled].button-unstyled, .quantity button:disabled { background: transparent !important; background-color: transparent !important; opacity: 0.3 !important; } .ov-prod-img { position: relative; } .ov-prod-img a { position: absolute; inset: 0; z-index: 1; } .ov-quick { z-index: 2; position: relative; } /* 修复SKU变体选择器文字颜色 */ .variant-picker .button, .variant-picker label, [name="Color"] + label, .product-form__input label, fieldset.product-form__input label { color: var(--ov-black) !important; } /* 选中状态 */ .variant-picker .button--active, .variant-picker input:checked + label { background: var(--ov-black) !important; color: var(--ov-white) !important; }