/* ===== Ashury — editorial luxury layer ===== Additive; enqueued last so it wins by load order. Rollback = dequeue in enqueue.php. Pairs a Playfair Display didone (echoing the 24K GOLD / Black Pearl packaging) with the existing DM Sans body: serif display, refined gold + spacing, elevated cards, and a safe scroll-reveal micro-animation. */ :root { --font-display: "Playfair Display", Georgia, "Times New Roman", serif; --shadow-lift: 0 2px 6px rgba(23, 20, 15, 0.05), 0 20px 46px rgba(23, 20, 15, 0.11); --pad-section: clamp(3.5rem, 2.4rem + 4.5vw, 7rem); } /* ---- Serif display headings (curated — label/nav headings stay DM Sans) ---- */ .hero-copy h1, .section-head h2, .page-title, .single-post .post-title, .post-item .post-title, .single-product .product_title, .collection-tile .label, .journal-title, .story-band h2, .cart-drawer__head h2, .woocommerce-cart .cart_totals h2, .prose h2, .prose h3, .prog-feed-title, .prog-related h2, .prog-related-products h2, .archive-mesh .mesh-block h2, .faq h2, .woocommerce-tabs .woocommerce-Tabs-panel > h2, #reviews .woocommerce-Reviews-title, .single-product .related.products > h2, .single-product .up-sells.products > h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } /* Hero headline — the marquee moment */ .hero-copy h1 { line-height: 1.04; } .collection-tile .label { font-weight: 600; } /* ---- Product titles (cards) — serif, legible medium weight ---- */ .product-card .title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); line-height: 1.22; letter-spacing: 0; min-height: 2.44em; } /* ---- Eyebrows: refined gold, a little more tracking + air ---- */ .eyebrow { letter-spacing: 0.26em; } .section-head { margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem); } /* ---- Buttons: subtle luxury tracking ---- */ .btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .single-product form.cart .single_add_to_cart_button { letter-spacing: 0.03em; } /* ---- Cards: deeper, softer elevation + smoother motion ---- */ .product-card, .journal-card, .collection-tile, .hub-card { transition: box-shadow 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.28s ease; } .product-card:hover, .journal-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 40%, var(--line)); } .collection-tile:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); } .hub-card:hover { box-shadow: var(--shadow-lift); } .product-card .media img { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); } .product-card:hover .media img { transform: scale(1.055); } /* ---- Scroll reveal (JS-gated via .ash-reveal on ; safe without JS) ---- */ .ash-reveal .section-head, .ash-reveal .collection-grid, .ash-reveal .product-grid, .ash-reveal ul.products, .ash-reveal .pill-cloud, .ash-reveal .hub-grid, .ash-reveal .journal-grid, .ash-reveal .story-band .container { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: opacity, transform; } .ash-reveal .ash-in { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .product-card, .journal-card, .collection-tile, .hub-card, .product-card .media img { transition: none; } } /* a11y-contrast-fixes */ .collection-tile .label { background: linear-gradient(to top, rgba(20,17,12,0.80) 0%, rgba(20,17,12,0.45) 55%, rgba(20,17,12,0) 100%); } .story-band .eyebrow, .section.story-band .eyebrow { color: var(--gold-light); }