/** Shopify CDN: Minification failed Line 44:0 All "@import" rules must come first **/ /* DISTRICT BOARDS — NUCLEAR OVERRIDE v3.0 Maximum specificity. Replaces all previous versions. DELETE everything in custom.css and paste this instead. */ /* ── STEP 1: Kill Redefine's CSS variable system at the root ── */ html { background-color: #080808 !important; } html body, html body.template-index, html body.template-product, html body.template-collection, html body.template-page, html body.template-cart, html body.template-customers-login { background-color: #080808 !important; color: #FAF9F6 !important; font-family: 'Jost', sans-serif !important; font-weight: 300 !important; } /* Override Redefine's CSS variable injection */ html body, html body * { --color-background: 8, 8, 8; --color-foreground: 250, 249, 246; --color-base-background-1: 8, 8, 8; --color-base-background-2: 13, 12, 10; --color-base-accent-1: 196, 163, 90; --color-base-accent-2: 196, 163, 90; --color-base-text: 250, 249, 246; --color-base-solid-button-labels: 8, 8, 8; --color-base-outline-button-labels: 250, 249, 246; --color-foreground-rgb: 250, 249, 246; } /* ── GOOGLE FONTS (also add this to theme.liquid ) ── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500;600&display=swap'); /* ── BRAND TOKENS ── */ :root { --db-black: #080808; --db-warm-dark: #0D0C0A; --db-card: #1C1A16; --db-white: #FAF9F6; --db-off-white: #F3F0E8; --db-gold: #C4A35A; --db-gold-l: #E8D5A3; --db-gold-d: #9A7A38; --db-gray: #A8A49C; --db-footer: #030303; --db-serif: 'Cormorant Garamond', Georgia, serif; --db-sans: 'Jost', sans-serif; } /* ══════════════════════════════════════ ANNOUNCEMENT BAR ══════════════════════════════════════ */ html body .shopify-section--announcement-bar, html body .announcement-bar, html body x-announcement-bar, html body [class*="announcement-bar"] { background-color: #C4A35A !important; color: #080808 !important; } html body .announcement-bar *, html body .announcement-bar a, html body .announcement-bar p, html body .announcement-bar span, html body x-announcement-bar * { background-color: transparent !important; color: #080808 !important; font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; } /* ══════════════════════════════════════ HEADER ══════════════════════════════════════ */ html body .header, html body header[role="banner"], html body .site-header, html body .header__wrapper, html body x-header { background-color: rgba(8, 8, 8, 0.97) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; backdrop-filter: blur(8px) !important; } html body .header__menu-item span, html body .header__menu-item a, html body .site-nav a, html body header a:not([href="/cart"]) { color: #A8A49C !important; font-family: 'Jost', sans-serif !important; font-size: 11px !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; font-weight: 400 !important; } html body .header__menu-item:hover span, html body header a:not([href="/cart"]):hover { color: #FAF9F6 !important; } /* Cart button */ html body .header__icon--cart, html body a[href="/cart"], html body .cart-link, html body [data-cart-link] { background-color: #C4A35A !important; color: #080808 !important; font-family: 'Jost', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 9px 18px !important; border-radius: 0 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } html body .header__icon--cart:hover, html body a[href="/cart"]:hover { background-color: #E8D5A3 !important; } html body .header__icon--cart svg, html body a[href="/cart"] svg { display: none !important; } html body .cart-count-bubble { background: #080808 !important; color: #C4A35A !important; border-radius: 0 !important; font-size: 9px !important; font-weight: 700 !important; } /* ══════════════════════════════════════ HERO / BANNER ══════════════════════════════════════ */ html body .banner, html body [data-section-type="image-banner"], html body .shopify-section .banner { background-color: #0D0B09 !important; } html body .banner__heading, html body .banner h1, html body .banner h2, html body .banner .banner__heading { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(46px, 5.5vw, 82px) !important; font-weight: 300 !important; color: #FAF9F6 !important; line-height: 1.05 !important; letter-spacing: -0.01em !important; } html body .banner__text, html body .banner p, html body .banner .banner__text { color: #C4B89A !important; font-family: 'Jost', sans-serif !important; font-size: 15px !important; line-height: 1.85 !important; font-weight: 300 !important; } html body .banner .button, html body .banner a.button { font-family: 'Jost', sans-serif !important; font-size: 11px !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; font-weight: 700 !important; border-radius: 0 !important; padding: 16px 36px !important; text-decoration: none !important; } html body .banner .button--primary, html body .banner .button:first-of-type { background-color: #C4A35A !important; color: #080808 !important; border: none !important; } html body .banner .button--primary:hover, html body .banner .button:first-of-type:hover { background-color: #E8D5A3 !important; } html body .banner .button--secondary, html body .banner .button:last-of-type { background-color: transparent !important; color: #FAF9F6 !important; border: 1px solid rgba(255,255,255,0.25) !important; } html body .banner .button--secondary:hover { border-color: #FAF9F6 !important; } /* ══════════════════════════════════════ MARQUEE / TICKER STRIP (the $0.63 row) ══════════════════════════════════════ */ html body .announcement-bar--scrolling, html body [class*="announcement-bar--scrolling"], html body .marquee-list, html body [class*="marquee"], html body [class*="scrolling-text"] { background-color: #FAF9F6 !important; padding: 13px 0 !important; } html body .announcement-bar--scrolling *, html body [class*="marquee"] *, html body [class*="scrolling-text"] * { color: #080808 !important; font-family: 'Jost', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; background-color: transparent !important; } /* ══════════════════════════════════════ ALL SHOPIFY SECTIONS — BASE DARK ══════════════════════════════════════ */ html body .shopify-section { background-color: #080808 !important; } html body main, html body #MainContent, html body .main-content { background-color: #080808 !important; } /* Section border separators */ html body .shopify-section + .shopify-section { border-top: 1px solid rgba(196, 163, 90, 0.12) !important; } /* ══════════════════════════════════════ FEATURED COLLECTION / PRODUCT GRID SECTIONS ══════════════════════════════════════ */ html body .shopify-section [data-section-type="featured-collection"], html body .shopify-section .featured-collection, html body [data-section-type="featured-collection"], html body [data-section-type="collection-list"] { background-color: #0D0C0A !important; padding-top: 80px !important; padding-bottom: 80px !important; } html body .featured-collection .title, html body .featured-collection .section-header__title, html body [data-section-type="featured-collection"] h2, html body [data-section-type="featured-collection"] .title { font-family: 'Cormorant Garamond', serif !important; font-weight: 300 !important; font-size: clamp(34px, 3.5vw, 54px) !important; color: #FAF9F6 !important; letter-spacing: 0 !important; line-height: 1.1 !important; } html body [data-section-type="featured-collection"] .section-header__description { color: #A8A49C !important; font-size: 14px !important; font-weight: 300 !important; } /* ══════════════════════════════════════ PRODUCT CARDS ══════════════════════════════════════ */ html body .card-wrapper, html body .card, html body .card--product { background-color: #1C1A16 !important; border: 1px solid rgba(196, 163, 90, 0.08) !important; border-radius: 0 !important; transition: border-color 0.3s !important; } html body .card-wrapper:hover, html body .card:hover { border-color: rgba(196, 163, 90, 0.3) !important; } html body .card__information, html body .card-information, html body [class*="card__information"] { background-color: #1C1A16 !important; padding: 18px 8px 14px !important; } html body .card__heading, html body .card__heading a, html body .card__heading h3, html body .card h3 { font-family: 'Cormorant Garamond', serif !important; font-size: 19px !important; font-weight: 400 !important; color: #FAF9F6 !important; line-height: 1.25 !important; letter-spacing: 0 !important; } html body .card__heading a:hover { color: #C4A35A !important; text-decoration: none !important; } html body .price .price-item, html body .price .price-item--regular, html body .price .price-item--sale, html body [class*="price-item"] { color: #C4A35A !important; font-size: 14px !important; font-weight: 500 !important; font-family: 'Jost', sans-serif !important; } html body .price__from, html body .price s { color: #A8A49C !important; font-size: 10px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; } html body .badge, html body .card__badge, html body .badge--bottom-left { background-color: #C4A35A !important; color: #080808 !important; border-radius: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 8px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; padding: 4px 9px !important; } html body .card__media img, html body .card .media img { filter: grayscale(10%); transition: transform 0.65s ease, filter 0.4s !important; } html body .card-wrapper:hover .card__media img { transform: scale(1.05) !important; filter: grayscale(0%) !important; } /* Quick add button */ html body .quick-add__submit, html body [class*="quick-add"] .button, html body .quickview-button { background-color: #FAF9F6 !important; color: #080808 !important; border-radius: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } html body .quick-add__submit:hover { background-color: #C4A35A !important; } /* ══════════════════════════════════════ MULTICOLUMN SECTIONS (Trust bar uses this section type) ══════════════════════════════════════ */ html body [data-section-type="multicolumn"], html body .multicolumn, html body .shopify-section .multicolumn { background-color: #F3F0E8 !important; border-top: 2px solid #C4A35A !important; border-bottom: 2px solid #C4A35A !important; padding: 40px 0 !important; } html body [data-section-type="multicolumn"] .multicolumn-card__title, html body .multicolumn .multicolumn-card__title { color: #080808 !important; font-family: 'Jost', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } html body [data-section-type="multicolumn"] .multicolumn-card__description, html body .multicolumn .multicolumn-card__description { color: #5A5854 !important; font-size: 12px !important; } html body [data-section-type="multicolumn"] .icon-with-text__icon svg, html body .multicolumn svg { fill: #080808 !important; color: #080808 !important; } html body [data-section-type="multicolumn"] .title, html body [data-section-type="multicolumn"] h2 { color: #080808 !important; font-family: 'Cormorant Garamond', serif !important; font-weight: 300 !important; } /* ══════════════════════════════════════ IMAGE WITH TEXT / RICH TEXT SECTIONS (Brand story, about sections) ══════════════════════════════════════ */ html body [data-section-type="image-with-text"], html body .image-with-text, html body [data-section-type="rich-text"], html body .rich-text { background-color: #F3F0E8 !important; border-top: 2px solid #C4A35A !important; border-bottom: 2px solid #C4A35A !important; } html body [data-section-type="image-with-text"] .image-with-text__heading, html body [data-section-type="image-with-text"] h2, html body [data-section-type="image-with-text"] h3, html body [data-section-type="rich-text"] h2, html body .rich-text__heading { font-family: 'Cormorant Garamond', serif !important; font-weight: 300 !important; color: #080808 !important; font-size: clamp(30px, 3vw, 48px) !important; line-height: 1.1 !important; } html body [data-section-type="image-with-text"] p, html body [data-section-type="image-with-text"] .image-with-text__text, html body [data-section-type="rich-text"] p, html body .rich-text__text { color: #5A5854 !important; font-size: 14px !important; line-height: 1.9 !important; font-weight: 300 !important; font-family: 'Jost', sans-serif !important; } html body [data-section-type="image-with-text"] .button--primary, html body [data-section-type="rich-text"] .button--primary { background-color: #080808 !important; color: #FAF9F6 !important; border: none !important; border-radius: 0 !important; font-family: 'Jost', sans-serif !important; font-size: 10px !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; font-weight: 700 !important; padding: 15px 32px !important; } html body [data-section-type="image-with-text"] .button--primary:hover { background-color: #2E2E2C !important; } html body [data-section-type="image-with-text"] .button--secondary { border-color: rgba(0,0,0,0.2) !important; color: #080808 !important; background: transparent !important; } /* ══════════════════════════════════════ RICH TEXT — "WHAT MAKES US PREMIUM" ══════════════════════════════════════ */ html body .rich-text .rich-text__text strong, html body [data-section-type="rich-text"] p strong, html body [data-section-type="rich-text"] strong { display: block !important; color: #C4A35A !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; margin-top: 20px !important; margin-bottom: 4px !important; font-family: 'Jost', sans-serif !important; } html body [data-section-type="rich-text"] p { color: #A8A49C !important; } /* ══════════════════════════════════════ GLOBAL BUTTONS ══════════════════════════════════════ */ html body .button, html body .btn, html body button[type="submit"] { font-family: 'Jost', sans-serif !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; font-weight: 700 !important; border-radius: 0 !important; font-size: 10px !important; transition: background-color 0.2s, color 0.2s !important; } html body .button--primary, html body [class*="button-primary"], html body .product-form__submit { background-color: #C4A35A !important; color: #080808 !important; border: none !important; border-radius: 0 !important; padding: 16px 32px !important; font-weight: 700 !important; font-size: 11px !important; } html body .button--primary:hover, html body .product-form__submit:hover { background-color: #E8D5A3 !important; } html body .button--secondary { background: transparent !important; color: #FAF9F6 !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 0 !important; } html body .button--secondary:hover { border-color: #FAF9F6 !important; } /* ══════════════════════════════════════ PRODUCT PAGE ══════════════════════════════════════ */ html body .product, html body .product__info-wrapper, html body .product-form, html body [data-section-type="product"] { background-color: #080808 !important; } html body .product__title { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(32px, 3vw, 52px) !important; font-weight: 300 !important; color: #FAF9F6 !important; line-height: 1.06 !important; } html body .product__vendor { color: #C4A35A !important; font-size: 10px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; font-weight: 600 !important; } html body .product__description, html body .product__description p { color: #A8A49C !important; font-size: 14px !important; line-height: 1.9 !important; font-weight: 300 !important; } html body .product__price, html body .price-item--regular, html body .price-item--sale { font-family: 'Cormorant Garamond', serif !important; font-size: 34px !important; font-weight: 300 !important; color: #C4A35A !important; } html body .variant-picker__option-values .button { background: transparent !important; border: 1px solid rgba(255,255,255,0.15) !important; color: #A8A49C !important; border-radius: 0 !important; padding: 10px 16px !important; font-size: 12px !important; transition: all 0.2s !important; } html body .variant-picker__option-values .button:hover { border-color: #C4A35A !important; color: #FAF9F6 !important; } html body .variant-picker__option-values .button[aria-pressed="true"] { background: #C4A35A !important; color: #080808 !important; border-color: #C4A35A !important; font-weight: 700 !important; } /* ══════════════════════════════════════ COLLECTION PAGE ══════════════════════════════════════ */ html body .collection, html body [data-section-type="collection-banner"], html body .shopify-section .collection-hero { background-color: #080808 !important; } html body .collection .title, html body .collection-hero__title, html body [data-section-type="collection-banner"] h1 { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(36px, 4vw, 60px) !important; font-weight: 300 !important; color: #FAF9F6 !important; } html body .breadcrumbs a, html body [class*="breadcrumb"] a { color: #A8A49C !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; text-decoration: none !important; } /* ══════════════════════════════════════ CART DRAWER ══════════════════════════════════════ */ html body .cart-drawer, html body .drawer { background-color: #0E0E0C !important; border-left: 1px solid rgba(255,255,255,0.07) !important; border-radius: 0 !important; } html body .cart-drawer__title, html body .cart-drawer h2 { font-family: 'Cormorant Garamond', serif !important; font-size: 24px !important; font-weight: 300 !important; color: #FAF9F6 !important; } html body .cart-item__name, html body .cart-item__title { font-family: 'Cormorant Garamond', serif !important; font-size: 17px !important; color: #FAF9F6 !important; } html body .cart-item__price, html body .totals__subtotal-value { font-family: 'Cormorant Garamond', serif !important; color: #C4A35A !important; font-weight: 300 !important; } html body .cart__checkout-button { background-color: #C4A35A !important; color: #080808 !important; border: none !important; border-radius: 0 !important; font-weight: 700 !important; letter-spacing: 0.18em !important; font-size: 11px !important; width: 100% !important; padding: 18px !important; } html body .cart__checkout-button:hover { background-color: #E8D5A3 !important; } /* ══════════════════════════════════════ NAVIGATION DROPDOWN / MEGA MENU ══════════════════════════════════════ */ html body .header__submenu, html body .mega-menu, html body [class*="mega-menu"], html body [class*="header__submenu"] { background-color: #0E0E0C !important; border-top: 2px solid #C4A35A !important; border: 1px solid rgba(255,255,255,0.07) !important; } html body .header__submenu a, html body .mega-menu a { color: #A8A49C !important; font-size: 12px !important; letter-spacing: 0.08em !important; } html body .header__submenu a:hover, html body .mega-menu a:hover { color: #FAF9F6 !important; } /* ══════════════════════════════════════ MOBILE MENU DRAWER ══════════════════════════════════════ */ html body .menu-drawer, html body [class*="menu-drawer"], html body details-modal [id*="menu"] { background-color: #0E0E0C !important; border-right: 1px solid rgba(255,255,255,0.07) !important; } html body .menu-drawer a, html body [class*="menu-drawer"] a, html body .menu-drawer li { color: #A8A49C !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; font-size: 14px !important; letter-spacing: 0.08em !important; background-color: transparent !important; } html body .menu-drawer a:hover { color: #FAF9F6 !important; } /* ══════════════════════════════════════ SEARCH MODAL ══════════════════════════════════════ */ html body .search-modal, html body .search-modal__content, html body [class*="search-modal"] { background-color: #0E0E0C !important; color: #FAF9F6 !important; } html body .search-modal input, html body [class*="search-modal"] input[type="search"] { background: transparent !important; border-bottom: 1px solid rgba(255,255,255,0.15) !important; color: #FAF9F6 !important; font-size: 18px !important; font-family: 'Jost', sans-serif !important; } html body .predictive-search, html body [class*="predictive-search"] { background-color: #0E0E0C !important; border: 1px solid rgba(255,255,255,0.07) !important; } html body [class*="predictive-search"] * { color: #A8A49C !important; } html body [class*="predictive-search"] .card__heading, html body [class*="predictive-search"] h3 { color: #FAF9F6 !important; } html body [class*="predictive-search"] .price { color: #C4A35A !important; } /* ══════════════════════════════════════ FOOTER ══════════════════════════════════════ */ html body .footer, html body footer, html body [class*="footer"], html body .shopify-section--footer { background-color: #030303 !important; border-top: 1px solid rgba(255,255,255,0.05) !important; color: #A8A49C !important; } html body .footer__heading, html body [class*="footer__heading"] { color: #FAF9F6 !important; font-family: 'Jost', sans-serif !important; font-size: 10px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; font-weight: 600 !important; } html body .footer a, html body .site-footer a, html body [class*="footer-block"] a, html body .footer li a { color: #555555 !important; font-size: 13px !important; font-weight: 300 !important; text-decoration: none !important; transition: color 0.2s !important; } html body .footer a:hover { color: #FAF9F6 !important; } html body .footer__copyright, html body [class*="footer__copyright"] { color: #3A3A38 !important; font-size: 11px !important; border-top: 1px solid rgba(255,255,255,0.04) !important; padding-top: 20px !important; } html body .payment-icons img, html body [class*="payment-icon"] { filter: invert(1) brightness(0.3) !important; opacity: 0.5 !important; } /* ══════════════════════════════════════ SECTION HEADINGS GLOBAL ══════════════════════════════════════ */ html body h1, html body h2, html body h3, html body h4, html body .h1, html body .h2, html body .h3, html body [class*="__title"], html body [class*="__heading"], html body .title { font-family: 'Cormorant Garamond', serif !important; font-weight: 300 !important; letter-spacing: 0 !important; } /* Section "view all" links */ html body .section-header__link, html body [class*="section-header__link"], html body .link-with-icon { color: #A8A49C !important; font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,0.15) !important; padding-bottom: 2px !important; transition: color 0.2s, border-color 0.2s !important; } html body .section-header__link:hover { color: #FAF9F6 !important; border-bottom-color: #FAF9F6 !important; } /* Global text selection */ html body ::selection { background: #C4A35A !important; color: #080808 !important; } html body :focus-visible { outline: 2px solid #C4A35A !important; outline-offset: 3px !important; } /* ══════════════════════════════════════ MOBILE ══════════════════════════════════════ */ @media screen and (max-width: 768px) { html body .banner__heading, html body .banner h1 { font-size: 38px !important; line-height: 1.1 !important; } html body .banner .button { width: 100% !important; padding: 15px 20px !important; text-align: center !important; display: block !important; margin-bottom: 10px !important; } html body [data-section-type="multicolumn"], html body [data-section-type="image-with-text"] { padding: 48px 24px !important; } html body .card__heading { font-size: 16px !important; } html body .announcement-bar { font-size: 9px !important; padding: 8px 12px !important; letter-spacing: 0.1em !important; } html body .cart-drawer, html body .drawer { width: 100% !important; max-width: 100% !important; } html body .menu-drawer { max-width: 85vw !important; } }