/** Shopify CDN: Minification failed Line 685:0 Expected "}" to go with "{" **/ /* Michael Godard Gallery premium overrides */ .card__media img, .collection-list__item img, .multicolumn-card__image, .banner__media img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .card:hover .card__media img, .collection-list__item:hover img, .multicolumn-card:hover .multicolumn-card__image { transform: scale(1.06); } .card__media, .collection-list__item .media, .multicolumn-card__image-wrapper .media { overflow: hidden; } .button, a.button, button.button { letter-spacing: 0.04em; text-transform: uppercase; font-size: 1.3rem; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .button:hover, a.button:hover, button.button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22); } /* Round 4/5 (2026-09-12): sitewide rollout of the product-page luxury black+gold-ring button language (buy-buttons.liquid's selected variant pill) to every .button--primary on the site - homepage hero/CTA buttons, Shop by Collection buttons, etc. Uses literal hex values rather than the product page's --luxury-* custom properties, which are scoped only to product-info and do not exist on the homepage or other templates. */ .button--primary { background: #0B0B0B; background-image: linear-gradient(135deg, #1A1A1A 0%, #0B0B0B 70%); border: 1.5px solid #C9A34F; border-color: #C9A34F; color: #F0DFAE; box-shadow: 0 3px 14px rgba(0,0,0,0.30), 0 0 0 3px rgba(201,163,79,0.35); } .button--primary:hover { background: #161616; background-image: linear-gradient(135deg, #222222 0%, #0B0B0B 70%); border-color: #E0BF6B; color: #FBEACB; box-shadow: 0 4px 16px rgba(0,0,0,0.34), 0 0 0 3px rgba(224,191,107,0.45); } header-drawer .header__menu-item, .header__menu-item { letter-spacing: 0.03em; } .header__menu-item { position: relative; } .header__menu-item::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1px; background: #c9a227; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .header__menu-item:hover::after { transform: scaleX(1); } .multicolumn-list__item h3 { font-family: var(--font-heading-family); letter-spacing: 0.02em; } .banner__box { backdrop-filter: blur(2px); } @media screen and (min-width: 990px) { .collection-list-wrapper .collection-list-title, .collection__title .title { letter-spacing: 0.01em; } } .godard-faq-item { border: 1px solid #2a2a2a; } .godard-faq-item:hover { border-color: #c9a227; } .godard-faq-item summary { cursor: pointer; list-style: none; padding: 16px 44px 16px 18px; font-weight: 600; font-size: 1.05em; color: #f2f2f2; position: relative; background: #121212; } .godard-faq-item summary::-webkit-details-marker { display: none; } .godard-faq-item summary::marker { content: ""; } .godard-faq-item summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4em; color: #c9a227; } .godard-faq-item[open] summary { border-bottom: 1px solid #2a2a2a; } .godard-faq-item p { padding: 16px 18px; margin: 0; line-height: 1.6; color: #cfcfcf; } .godard-faq-item[open] summary::after { content: "\2212"; } .product-form__input--pill label, variant-radios .product-form__input--pill label { border-color: rgba(201, 162, 39, 0.55) !important; background-color: rgba(201, 162, 39, 0.06) !important; color: #c9a227 !important; } .product-form__input--pill input:checked + label { background: linear-gradient(135deg, #c9a227 0%, #e6c458 50%, #c9a227 100%) !important; border-color: #c9a227 !important; color: #161616 !important; } .product-form__input--pill label:hover { border-color: #e0bf52 !important; background-color: rgba(201, 162, 39, 0.14) !important; } .product-form__input--pill input:checked + label:hover { background: linear-gradient(135deg, #d8b64c 0%, #f0dca0 50%, #d8b64c 100%) !important; border-color: #d8b64c !important; } .card__content { padding: 0.5rem 0.75rem 0.75rem; } .card-information { padding-top: 0.5rem; } .grid--product-grid, .collection .grid, .product-grid { --grid-desktop-horizontal-spacing: 12px; --grid-desktop-vertical-spacing: 20px; --grid-mobile-horizontal-spacing: 10px; --grid-mobile-vertical-spacing: 16px; } /* REMOVED (Godard fix): sitewide 24px !important padding stack on every section was doubling up with each section's own configurable padding settings, causing excess vertical whitespace throughout the site. section.shopify-section { padding-top: 24px !important; padding-bottom: 24px !important; } */ /* New Arrival badge - top-left, premium accent */ .badge--new-arrival { position: absolute !important; top: 14px; left: 14px; right: auto !important; bottom: auto !important; z-index: 3; display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg, #0f5132 0%, #2fa866 50%, #0f5132 100%); color: #ffffff; border: none; border-radius: 999px; padding: 7px 16px 7px 13px; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; animation: godard-badge-glow 2.4s ease-in-out infinite; } .badge--new-arrival::before { content: "\2726"; font-size: 0.95em; line-height: 1; } @keyframes godard-badge-glow { 0%, 100% { box-shadow: 0 6px 16px rgba(15, 81, 50, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15) inset; } 50% { box-shadow: 0 6px 20px rgba(47, 168, 102, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.25) inset; } } .button--secondary { background: #161616 !important; color: #f5f0e6 !important; border-color: #161616 !important; } .button--secondary:hover { background: #2a2a2a !important; } .godard-trust-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; } .godard-trust-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #0f5132; background: linear-gradient(135deg, rgba(47, 168, 102, 0.12) 0%, rgba(47, 168, 102, 0.04) 100%); border: 1.5px solid rgba(15, 81, 50, 0.45); border-radius: 999px; padding: 11px 22px; box-shadow: 0 4px 14px rgba(15, 81, 50, 0.14); transition: transform 0.25s ease, box-shadow 0.25s ease; } .godard-trust-badge:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(15, 81, 50, 0.2); } .godard-trust-badge__icon { font-size: 1.25em; line-height: 1; } @media screen and (max-width: 749px) { .godard-trust-badge { font-size: 0.92rem; padding: 9px 16px; } } /* Contrast fixes: FAQ answers, product disclosures, unselected variant pills */ .godard-faq-item p { color: #333333 !important; } .disclosures-item__content, .disclosures-item__content p, .disclosures-item__content li { color: #333333 !important; } .product-form__input--pill label, variant-radios .product-form__input--pill label { color: #c9a227 !important; font-weight: 600 !important; } .product-form__input--pill input:checked + label { color: #161616 !important; } .godard-story { padding: 64px 0 72px; } .godard-story__inner { max-width: 1100px; } .godard-story__intro { max-width: 760px; margin: 0 auto 48px; text-align: center; } .godard-story__eyebrow { margin: 0 0 10px; font-size: 1.2rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #c9a227; } .godard-story__heading { margin: 0 0 18px; font-size: 3.4rem; line-height: 1.15; } .godard-story__lede { margin: 0; font-size: 1.6rem; line-height: 1.65; opacity: 0.9; } .godard-story__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 40px; } @media screen and (max-width: 749px) { .godard-story__grid { grid-template-columns: 1fr; } .godard-story__heading { font-size: 2.6rem; } } .godard-story__card { position: relative; padding: 32px 28px 28px; border: 1px solid rgba(201, 162, 39, 0.25); border-radius: 6px; background: rgba(255, 255, 255, 0.03); } .godard-story__card-number { display: block; margin-bottom: 10px; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.08em; color: #c9a227; opacity: 0.85; } .godard-story__card h3 { margin: 0 0 12px; font-size: 2rem; line-height: 1.25; } .godard-story__card p { margin: 0; font-size: 1.5rem; line-height: 1.6; opacity: 0.88; } .godard-story__quote { margin: 18px 0 0; padding: 14px 0 0 18px; border-left: 2px solid #c9a227; font-size: 1.5rem; font-style: italic; line-height: 1.5; } .godard-story__quote cite { display: block; margin-top: 8px; font-size: 1.2rem; font-style: normal; font-weight: 600; letter-spacing: 0.04em; opacity: 0.75; } .godard-story__footer { max-width: 760px; margin: 0 auto; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: center; } .godard-story__footer p { margin: 0; font-size: 1.4rem; line-height: 1.6; letter-spacing: 0.02em; opacity: 0.75; } /* Godard breadcrumb (above product image) */ .godard-breadcrumb { padding: 16px 0 0; } .godard-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 1.3rem; letter-spacing: 0.01em; color: #6b6b6b; } .godard-breadcrumb li { display: flex; align-items: center; } .godard-breadcrumb li:not(:last-child)::after { content: "/"; color: #b8b8b8; margin: 0 8px; } .godard-breadcrumb a { color: #6b6b6b; text-decoration: none; transition: color 0.2s ease; } .godard-breadcrumb a:hover { color: #c9a227; text-decoration: underline; } .godard-breadcrumb li[aria-current="page"] { color: #161616; font-weight: 600; } @media screen and (max-width: 749px) { .godard-breadcrumb ol { font-size: 1.1rem; } } /* Godard fix (corrected): align product image top-edge with product title top-edge on desktop WITHOUT breaking the sticky product image. Do NOT set align-items: flex-start on .product.grid itself. That collapses every column's box down to its own content height, which removes the extra vertical "room" a position:sticky element needs in order to travel as the page scrolls - it silently makes sticky columns non-sticky. Leave .product.grid at its default stretch alignment so the row is as tall as its tallest column, and only align inner content to the top with align-self. */ @media screen and (min-width: 750px) { .product__media-wrapper { margin-top: 0 !important; padding-top: 0 !important; } .product__media-wrapper media-gallery, .product__media-wrapper .product__media-list { align-self: flex-start; } /* Godard fix: restore sticky product image. Stock Dawn only makes the product info column sticky (via enable_sticky_info); the media/image column has no sticky behavior by default. Make the image column sticky too, so the artwork stays in view while the visitor scrolls the description/details column beside it. This only works because .product.grid above keeps its default stretch alignment, which gives this column's box the extra height sticky needs to move within. */ .product__media-wrapper { position: sticky; top: 3rem; } } /* Godard fix: menu-hover double line. Dawn's base .link utility class puts a permanent underline under nav links; the custom animated gold underline bar below (.header__menu-item::after) then draws a second line that appears on hover, producing a double-line effect. Remove the base underline on header menu items since the animated bar already indicates the link. */ .header__menu-item.link, .header__menu-item { text-decoration: none !important; } /* Godard fix: homepage hero text readability. Force full-opacity, high contrast heading/subtext on image banners regardless of the image behind them. */ .banner .banner__heading, .banner .banner__text, .banner__content .banner__heading, .banner__content .banner__text { opacity: 1 !important; color: #ffffff !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.85) !important; } /* Godard fix: footer redesign - premium contact/address block replacing the stock payment-icon list (see sections/footer.liquid). */ .godard-footer-contact { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; text-align: right; color: #f5f0e6; font-size: 1.3rem; line-height: 1.6; } .godard-footer-contact a { color: #e6c458; text-decoration: none; } .godard-footer-contact a:hover { color: #c9a227; text-decoration: underline; } @media screen and (max-width: 749px) { .godard-footer-contact { align-items: flex-start; text-align: left; } } /* Godard fix: quantity stepper (+/-) had no visible hover/focus feedback. */ .quantity__button { transition: background-color 0.2s ease, color 0.2s ease; } .quantity__button:hover { background-color: rgba(201, 162, 39, 0.12); color: #c9a227; } .quantity__button:focus-visible { outline: 2px solid #c9a227; outline-offset: -2px; } /* Godard fix: keyboard-focus ring on unselected variant pills (mouse-hover state already exists above; this adds the missing focus-visible state). */ .product-form__input--pill input:focus-visible + label { outline: 2px solid #c9a227; outline-offset: 2px; } /* Godard fix: swipeable, auto-playing carousel for the "You may also like" recommendations row (sections/related-products.liquid). Desktop keeps the same card sizing/spacing as the old static grid; mobile becomes a touch-swipeable strip instead of a cramped 2-column grid. See assets/godard-carousel.js for the autoplay/swipe/arrow behavior. */ .godard-carousel { position: relative; } .godard-carousel__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .godard-carousel__viewport::-webkit-scrollbar { display: none; } .godard-carousel__track.grid { display: flex; flex-wrap: nowrap; } .godard-carousel__track.grid > .grid__item { scroll-snap-align: start; flex: 0 0 auto; width: calc((100% - (var(--carousel-cols-desktop, 4) - 1) * 12px) / var(--carousel-cols-desktop, 4)); } @media screen and (max-width: 989px) { .godard-carousel__track.grid > .grid__item { width: calc((100% - (var(--carousel-cols-mobile, 2) - 1) * 10px) / var(--carousel-cols-mobile, 2)); } } .godard-carousel__arrow { position: absolute; top: 40%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(11, 11, 11, 0.85); border: 1px solid #c9a227; color: #e6c458; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .godard-carousel__arrow:hover:not([disabled]) { background: #c9a227; color: #161616; transform: translateY(-50%) scale(1.06); } .godard-carousel__arrow:focus-visible { outline: 2px solid #c9a227; outline-offset: 2px; } .godard-carousel__arrow--prev { left: -8px; } .godard-carousel__arrow--next { right: -8px; } .godard-carousel__arrow[disabled] { opacity: 0.3; cursor: default; pointer-events: none; } @media screen and (max-width: 749px) { .godard-carousel__arrow { display: none; } } .godard-carousel__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .godard-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(201, 162, 39, 0.3); border: none; cursor: pointer; padding: 0; transition: background-color 0.2s ease, transform 0.2s ease; } .godard-carousel__dot:hover { background: rgba(201, 162, 39, 0.6); } .godard-carousel__dot.is-active { background: #c9a227; transform: scale(1.25); } /* Round 6 (2026-09-12): extend the luxury black+gold-ring button to the plain CTA buttons (View All, Shop Collection, Meet the Artist) + luxe homepage trust cards */ .button:not(.button--primary):not(.button--secondary):not(.button--tertiary):not(.button--full-width):not(.shopify-payment-button__button):not(.cart__checkout-button):not(.product-form__submit), a.button:not(.button--primary):not(.button--secondary):not(.button--tertiary):not(.button--full-width){ background:#0B0B0B !important; background-image:linear-gradient(135deg,#1A1A1A 0%,#0B0B0B 70%) !important; border:1.5px solid #C9A34F !important; color:#F0DFAE !important; box-shadow:0 3px 14px rgba(0,0,0,.30), 0 0 0 3px rgba(201,163,79,.35) !important; border-radius:41px !important; } .button:not(.button--primary):not(.button--secondary):not(.button--tertiary):not(.button--full-width):not(.shopify-payment-button__button):not(.cart__checkout-button):not(.product-form__submit):hover, a.button:not(.button--primary):not(.button--secondary):not(.button--tertiary):not(.button--full-width):hover{ color:#FFFFFF !important; transform:translateY(-2px) !important; box-shadow:0 6px 20px rgba(0,0,0,.40), 0 0 0 3px rgba(201,163,79,.60), 0 0 24px rgba(201,163,79,.35) !important; } .button:not(.button--primary):not(.button--secondary):not(.button--tertiary):not(.button--full-width)::after{box-shadow:none !important;background:none !important;} /* Luxe homepage trust cards */ [id*="__trust_badges"] .multicolumn-card{background:linear-gradient(160deg,#181818,#0d0d0d) !important;border:1px solid rgba(201,163,79,.30) !important;border-radius:16px !important;padding:34px 24px !important;position:relative;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.35) !important;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease !important;} [id*="__trust_badges"] .multicolumn-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#c9a34f,#f0dfae,#c9a34f,transparent);opacity:.85;} [id*="__trust_badges"] .multicolumn-card:hover{transform:translateY(-7px) !important;border-color:rgba(201,163,79,.65) !important;box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(201,163,79,.4),0 12px 30px rgba(201,163,79,.15) !important;} [id*="__trust_badges"] .multicolumn-card__info h3{color:#e7c877 !important;text-transform:uppercase;letter-spacing:.12em;font-size:1.05rem !important;position:relative;padding-bottom:12px;margin-bottom:10px;} [id*="__trust_badges"] .multicolumn-card__info h3::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:34px;height:2px;background:linear-gradient(90deg,#c9a34f,#f0dfae);} [id*="__trust_badges"] .multicolumn-card__info .rte{color:#c9c9c9 !important;} /* Round 6.1 (2026-09-12): narrow the hero banner CTA buttons (were a fixed 450px, too wide) to a tidy equal width */ .banner__buttons .button{width:320px !important;min-width:0 !important;max-width:90% !important;} .banner__buttons--multiple{flex-direction:column !important;align-items:center !important;} /* Round 6.2 (2026-09-12): larger trust-card titles, remove the small gold underline */ [id*="__trust_badges"] .multicolumn-card__info h3{font-size:1.5rem !important;padding-bottom:4px !important;letter-spacing:.08em !important;} [id*="__trust_badges"] .multicolumn-card__info h3::after{display:none !important;} .button--primary:hover,a.button--primary:hover,button.button--primary:hover{color:#FFFFFF !important;transform:translateY(-2px) !important;box-shadow:0 6px 20px rgba(0,0,0,.40),0 0 0 3px rgba(201,163,79,.60),0 0 24px rgba(201,163,79,.35) !important; .button--primary:hover::after,a.button--primary:hover::after{box-shadow:none !important;background:none !important; /* Round 6.4 (2026-09-12): compact product-page variant pills so Add to Cart stays above the fold */ .product-form__input--pill label{padding:8px 16px !important;font-size:13px !important;line-height:1.2 !important;margin:4px 6px 4px 0 !important;min-height:0 !important;} /* Round 6.5 (2026-09-12): denser, dynamic collection grid so more cards are visible on laptop/desktop */ @media screen and (min-width:990px){#product-grid.product-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) !important;}} @media screen and (min-width:750px) and (max-width:989px){#product-grid.product-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;}}