/* ============================================================================== GUA LIVING — THEMES Design 1: "Classic" (Default) — warm, modern luxury Design 2: "Daphne" — editorial sophistication, olive–sage–linen palette Colors extracted directly from softlysimplestudio.wixstudio.com/daphne: #F5F2EE — warm linen (backgrounds, text on dark) #292818 — dark olive-almost-black (hero/dark section bg) #514316 — warm dark olive-brown (primary text on light) #40381E — deeper warm brown (body text, titles) #364022 — deep olive-green (small uppercase labels, 0.2em tracking) #ACA885 — muted olive-taupe (accent, button hover bg) #E0E7D8 — soft sage-green (button borders, subtitle text on dark) Fonts: Display / H1-H3 : Cormorant Garamond (300, 400, 500, 600, italic) Body / UI : Fira Sans (300 "Light", 400) ============================================================================== */ /* ══════════════════════════════════════════════════════════════════════════════ DESIGN 2: DAPHNE Activated via: ══════════════════════════════════════════════════════════════════════════════ */ [data-theme="daphne"] { /* ─ Core Palette (Optimized for High Legibility & Contrast) ─ */ --color-primary: #1C1C12; /* Deep rich dark olive-black */ --color-secondary: #7C7856; /* Defined olive-taupe accent */ --color-accent: #C0C9B8; /* Clear sage-green */ --color-bg-cream: #F5F2EE; /* Warm linen — main background */ --color-bg-white: #FFFFFF; --color-bg-dark: #181810; /* Rich dark background */ --color-header-bg: #F5F2EE; /* Solid linen header */ --color-footer-bg: #181810; /* Dark footer */ --color-text-dark: #1C1C12; /* High-contrast dark charcoal-olive for headings & UI */ --color-text-body: #2E2C22; /* Dark, crisp readable body text */ --color-text-label: #252F17; /* Deep rich olive for uppercase labels */ --color-text-muted: #504D40; /* Crisp, legible muted text */ --color-text-on-dark: #FFFFFF; /* Crisp white text on dark backgrounds */ --color-border: #C2BEA8; /* Defined border color */ --color-border-light: rgba(194, 190, 168, 0.45); --color-success: #5E825E; --color-warning: #B57D50; --color-danger: #B85252; /* ─ Typography ─ */ --font-luxury: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Fira Sans', 'Helvetica Neue', sans-serif; /* ─ Geometry — no rounded corners in Daphne ─ */ --border-radius: 0px; /* ─ Transitions — 0.2s ease ─ */ --transition-smooth: all 0.2s ease, visibility 0s; /* ─ Shadows ─ */ --shadow-premium: 0 1px 4px rgba(28, 28, 18, 0.09); --shadow-dropdown: 0 4px 16px -4px rgba(28, 28, 18, 0.15); } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: BODY & BASE ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] body { background-color: var(--color-bg-cream); color: var(--color-text-body); font-family: 'Fira Sans', 'Helvetica Neue', sans-serif; font-weight: 400; line-height: 1.6; letter-spacing: 0.01em; } [data-theme="daphne"] h1, [data-theme="daphne"] h2, [data-theme="daphne"] h3, [data-theme="daphne"] h4, [data-theme="daphne"] .section-title, [data-theme="daphne"] .section-title-main, [data-theme="daphne"] .hero-headline, [data-theme="daphne"] .modal-title, [data-theme="daphne"] .sidebar-title, [data-theme="daphne"] .product-card-title { font-family: 'Cormorant Garamond', 'Georgia', serif; font-weight: 500; letter-spacing: 0.01em; color: var(--color-text-dark); } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: HEADER / NAVIGATION ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .site-header { background: var(--color-bg-cream); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--color-border); box-shadow: none; } [data-theme="daphne"] .site-header.scrolled { background: var(--color-bg-cream); border-bottom-color: var(--color-border); box-shadow: var(--shadow-premium); } [data-theme="daphne"] .brand-logo { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-dark); } [data-theme="daphne"] .nav-link { font-family: 'Fira Sans', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #1C1C12; opacity: 1; transition: color 0.2s ease; } [data-theme="daphne"] .nav-link:hover { color: #7C7856; } [data-theme="daphne"] .nav-icon, [data-theme="daphne"] .cart-icon, [data-theme="daphne"] .search-icon { color: #1C1C12; } [data-theme="daphne"] .cart-badge { background: #7C7856; border-radius: 0; } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: HERO SECTION (High Contrast & Maximum Legibility) ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .hero-section { background: #181810; min-height: 85vh; position: relative; } [data-theme="daphne"] .hero-tagline, [data-theme="daphne"] .hero-eyebrow { font-family: 'Fira Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: #EFECE6 !important; line-height: 1.2; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } [data-theme="daphne"] .hero-title, [data-theme="daphne"] .hero-headline, [data-theme="daphne"] .hero-section h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.8rem, 6.6vw, 5.5rem); font-weight: 500; line-height: 1.08; letter-spacing: 0.01em; color: #FFFFFF !important; text-shadow: 0 3px 16px rgba(0, 0, 0, 0.9); } [data-theme="daphne"] .hero-description, [data-theme="daphne"] .hero-subtext { font-family: 'Fira Sans', sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 0.02em; color: #F5F2EE !important; opacity: 0.95; line-height: 1.7; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } /* Overlay on hero: dark vignette for high text readability */ [data-theme="daphne"] .hero-overlay { background: rgba(15, 15, 10, 0.65) !important; } [data-theme="daphne"] .hero-gradient-overlay { background: linear-gradient( to bottom, rgba(15, 15, 10, 0.4) 0%, rgba(15, 15, 10, 0.75) 100% ) !important; } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: BUTTONS (High Contrast & Clear Typography) ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .btn-primary, [data-theme="daphne"] button.btn-primary, [data-theme="daphne"] .cta-button, [data-theme="daphne"] .hero-cta { background: rgba(0, 0, 0, 0.3); color: #FFFFFF; border: 1px solid #FFFFFF; font-family: 'Fira Sans', sans-serif; font-weight: 500; letter-spacing: 0.08em; font-size: 12px; text-transform: uppercase; padding: 14px 32px; border-radius: 0; transition: all 0.2s ease; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } [data-theme="daphne"] .btn-primary:hover, [data-theme="daphne"] button.btn-primary:hover, [data-theme="daphne"] .cta-button:hover, [data-theme="daphne"] .hero-cta:hover { background: #FFFFFF; border-color: #FFFFFF; color: #1C1C12; text-shadow: none; } [data-theme="daphne"] .btn-secondary, [data-theme="daphne"] button.btn-secondary, [data-theme="daphne"] .btn-load-more, [data-theme="daphne"] #btn-load-more { background: #FFFFFF; color: #1C1C12; border: 1px solid #1C1C12; font-family: 'Fira Sans', sans-serif; font-weight: 500; letter-spacing: 0.08em; font-size: 12px; text-transform: uppercase; padding: 12px 28px; border-radius: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: all 0.2s ease; } [data-theme="daphne"] .btn-secondary:hover, [data-theme="daphne"] button.btn-secondary:hover, [data-theme="daphne"] .btn-load-more:hover, [data-theme="daphne"] #btn-load-more:hover { background: #1C1C12; border-color: #1C1C12; color: #FFFFFF; } /* Add to cart button — use dark olive */ [data-theme="daphne"] .add-to-cart-btn, [data-theme="daphne"] [class*="add-to-cart"] { background: var(--color-text-dark) !important; color: var(--color-bg-cream) !important; border: 1px solid var(--color-text-dark) !important; border-radius: 0 !important; letter-spacing: 0.05em; font-size: 11px; text-transform: uppercase; font-family: 'Fira Sans', sans-serif !important; font-weight: 300 !important; transition: background 0.2s ease, color 0.2s ease !important; } [data-theme="daphne"] .add-to-cart-btn:hover { background: var(--color-secondary) !important; border-color: var(--color-secondary) !important; color: var(--color-primary) !important; } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: PRODUCTS SECTION & FULL-WIDTH ROW STACKING OVERLAP EFFECT ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .shop-section { padding: 60px 0 140px; background-color: var(--color-bg-cream); overflow: visible !important; } [data-theme="daphne"] .shop-section .container { max-width: 100% !important; width: 100% !important; padding: 0 40px !important; margin: 0 !important; box-sizing: border-box; overflow: visible !important; } [data-theme="daphne"] .products-grid { display: flex; flex-direction: column; width: 100%; overflow: visible !important; position: relative; gap: 0; } /* Dedicated Shop Section Grid — 4 Columns in Daphne Theme */ [data-theme="daphne"] #dedicated-products-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 35px 25px !important; width: 100% !important; } @media (max-width: 1200px) { [data-theme="daphne"] #dedicated-products-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 850px) { [data-theme="daphne"] #dedicated-products-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 550px) { [data-theme="daphne"] #dedicated-products-grid { grid-template-columns: 1fr !important; } } /* Row stack container (3 cards per row) */ /* Product Row Stacking Container (Daphne theme) */ [data-theme="daphne"] .product-row-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; width: 100%; background-color: var(--color-bg-cream); padding: 30px 0; margin-bottom: 60px; box-sizing: border-box; /* position: sticky is set dynamically by JS with exact row height */ } [data-theme="daphne"] .product-row-stack.row-1 { z-index: 1; } [data-theme="daphne"] .product-row-stack.row-2 { z-index: 2; box-shadow: 0 -30px 60px rgba(24, 24, 16, 0.28), 0 -8px 25px rgba(0, 0, 0, 0.12); } [data-theme="daphne"] .product-row-stack.row-3 { z-index: 3; box-shadow: 0 -35px 70px rgba(24, 24, 16, 0.32), 0 -10px 30px rgba(0, 0, 0, 0.15); } [data-theme="daphne"] .product-row-stack.row-4 { z-index: 4; box-shadow: 0 -40px 80px rgba(24, 24, 16, 0.36), 0 -12px 35px rgba(0, 0, 0, 0.18); } /* Base Product Card inside stacked row */ [data-theme="daphne"] .product-card { background: var(--color-bg-white); border-radius: 0; border: 1px solid var(--color-border); transition: box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; display: flex; flex-direction: column; } [data-theme="daphne"] .product-card:hover { border-color: var(--color-secondary); box-shadow: 0 10px 30px rgba(41, 40, 24, 0.12); } /* Large portrait product image filling full card width */ [data-theme="daphne"] .product-image-wrapper { aspect-ratio: 3 / 4; width: 100%; position: relative; overflow: hidden; background-color: #EFECE6; } [data-theme="daphne"] .product-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } [data-theme="daphne"] .product-card:hover .product-image { transform: scale(1.04); } [data-theme="daphne"] .product-info { padding: 24px 22px; display: flex; flex-direction: column; flex-grow: 1; } [data-theme="daphne"] .product-title, [data-theme="daphne"] .product-card-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; letter-spacing: 0.01em; color: #1C1C12; margin-bottom: 8px; line-height: 1.25; } [data-theme="daphne"] .product-category { font-family: 'Fira Sans', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #252F17; margin-bottom: 10px; } [data-theme="daphne"] .product-desc { font-family: 'Fira Sans', sans-serif; font-size: 13px; font-weight: 400; color: #38352A; line-height: 1.65; margin-bottom: 16px; } [data-theme="daphne"] .product-price-row { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-border-light); display: flex; align-items: center; justify-content: space-between; } [data-theme="daphne"] .product-price, [data-theme="daphne"] .product-card-price { font-family: 'Fira Sans', sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.03em; color: #1C1C12; } [data-theme="daphne"] .product-badge, [data-theme="daphne"] [class*="badge"] { border-radius: 0; font-family: 'Fira Sans', sans-serif; font-weight: 500; letter-spacing: 0.12em; font-size: 10px; text-transform: uppercase; background: #252F17; color: var(--color-bg-cream); } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: SECTION LAYOUT ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .section-title, [data-theme="daphne"] .section-title-main { font-family: 'Cormorant Garamond', serif; font-weight: 400; letter-spacing: 0.01em; font-size: clamp(1.9rem, 4vw, 3.2rem); color: var(--color-text-dark); } [data-theme="daphne"] .section-subtitle, [data-theme="daphne"] .section-description { font-family: 'Fira Sans', sans-serif; font-weight: 300; font-size: 13px; letter-spacing: 0.02em; color: var(--color-text-body); line-height: 1.85; } /* Section label / eyebrow: small uppercase with wide tracking */ [data-theme="daphne"] .section-label, [data-theme="daphne"] .eyebrow-label { font-family: 'Fira Sans', sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: var(--color-text-label); } /* Decorative dividers — very subtle sage tint */ [data-theme="daphne"] .section-divider, [data-theme="daphne"] hr { border-color: var(--color-border); border-width: 1px 0 0; } /* Accent line below headings — minimal single rule */ [data-theme="daphne"] .section-title::after, [data-theme="daphne"] .section-title-main::after { content: ''; display: block; width: 30px; height: 1px; background: var(--color-secondary); margin: 16px 0 0; opacity: 0.5; } /* Background sections — dark olive variant */ [data-theme="daphne"] .section-dark, [data-theme="daphne"] .bg-dark-section { background: var(--color-bg-dark); color: var(--color-text-on-dark); } [data-theme="daphne"] .section-dark .section-title, [data-theme="daphne"] .section-dark h1, [data-theme="daphne"] .section-dark h2, [data-theme="daphne"] .section-dark h3 { color: var(--color-text-on-dark); } /* Light linen background variant (blog, about) */ [data-theme="daphne"] .section-light, [data-theme="daphne"] .bg-light-section { background: var(--color-bg-cream); } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: FORMS & INPUTS ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] input, [data-theme="daphne"] textarea, [data-theme="daphne"] select, [data-theme="daphne"] .checkout-input { background: var(--color-bg-white); border-radius: 0; border: 1px solid var(--color-border); font-family: 'Fira Sans', sans-serif; font-weight: 300; font-size: 13px; letter-spacing: 0.02em; color: var(--color-text-body); transition: border-color 0.2s ease; } [data-theme="daphne"] input:focus, [data-theme="daphne"] textarea:focus, [data-theme="daphne"] select:focus, [data-theme="daphne"] .checkout-input:focus { outline: none; border-color: var(--color-secondary); box-shadow: none; } [data-theme="daphne"] label { font-family: 'Fira Sans', sans-serif; font-weight: 300; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-label); } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: FOOTER ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .site-footer { background: var(--color-bg-dark); border-top: 1px solid var(--color-border-light); color: var(--color-text-on-dark); } [data-theme="daphne"] .site-footer h4, [data-theme="daphne"] .footer-heading { font-family: 'Fira Sans', sans-serif; font-weight: 300; letter-spacing: 0.25em; font-size: 11px; text-transform: uppercase; color: var(--color-accent); /* sage-green headings in footer */ } [data-theme="daphne"] .site-footer p, [data-theme="daphne"] .footer-text { font-family: 'Fira Sans', sans-serif; font-weight: 300; font-size: 12px; color: var(--color-text-on-dark); opacity: 0.7; } [data-theme="daphne"] .site-footer a, [data-theme="daphne"] .footer-link { font-family: 'Fira Sans', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: 0.03em; color: var(--color-text-on-dark); opacity: 0.65; transition: opacity 0.2s ease, color 0.2s ease; text-decoration: none; } [data-theme="daphne"] .site-footer a:hover { opacity: 1; color: var(--color-accent); } [data-theme="daphne"] .footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-text-on-dark); } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: MODALS & OVERLAYS ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .modal-container, [data-theme="daphne"] .modal-card, [data-theme="daphne"] .cart-sidebar, [data-theme="daphne"] .checkout-panel, [data-theme="daphne"] .dropdown-menu { border-radius: 0; border: 1px solid var(--color-border); } [data-theme="daphne"] .modal-title, [data-theme="daphne"] .sidebar-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; letter-spacing: 0.05em; color: var(--color-text-dark); } [data-theme="daphne"] .modal-overlay { background: rgba(41, 40, 24, 0.6); /* dark olive overlay */ } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: ABOUT / EDITORIAL SECTION ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .about-section { background: var(--color-bg-cream); } [data-theme="daphne"] .about-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 400; line-height: 1.15; color: var(--color-text-dark); letter-spacing: 0.01em; } [data-theme="daphne"] .about-text { font-family: 'Fira Sans', sans-serif; font-weight: 300; font-size: 14px; line-height: 1.85; letter-spacing: 0.02em; color: var(--color-text-body); } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: NOTIFICATION TOAST ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .toast-notification, [data-theme="daphne"] #toast-container { background: var(--color-primary); color: var(--color-text-on-dark); font-family: 'Fira Sans', sans-serif; font-weight: 300; letter-spacing: 0.03em; border-radius: 0; border-left: 2px solid var(--color-secondary); } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: ANIMATIONS — gentle 0.2s ease (matching Daphne source) ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] * { transition-timing-function: ease; } @keyframes daphne-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } [data-theme="daphne"] .product-card, [data-theme="daphne"] .animate-in { animation-duration: 0.4s; animation-timing-function: ease; } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: INSTAGRAM & BRAND SECTION ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .instagram-section, [data-theme="daphne"] .brands-section { background: var(--color-bg-cream); } [data-theme="daphne"] .instagram-title, [data-theme="daphne"] .brands-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3.5vw, 2.8rem); font-weight: 400; color: var(--color-text-dark); } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: CONTACT PAGE ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .contact-hero, [data-theme="daphne"] .contact-section { background: var(--color-bg-cream); } [data-theme="daphne"] .contact-title, [data-theme="daphne"] .contact-heading { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(2.2rem, 5vw, 4rem); color: var(--color-text-dark); letter-spacing: 0.01em; } [data-theme="daphne"] .contact-info-label { font-family: 'Fira Sans', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 0.25em; text-transform: uppercase; color: var(--color-text-label); } [data-theme="daphne"] .gua-email-reveal-btn { background: transparent; color: var(--color-text-dark); border: 1px solid var(--color-border); font-family: 'Fira Sans', sans-serif; font-weight: 300; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; padding: 11px 24px; border-radius: 0; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } [data-theme="daphne"] .gua-email-reveal-btn:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-primary); } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: CHECKOUT / CART ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .cart-item-name { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 400; } [data-theme="daphne"] .cart-total, [data-theme="daphne"] .order-total { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--color-text-dark); } [data-theme="daphne"] .checkout-step-label { font-family: 'Fira Sans', sans-serif; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-label); font-weight: 300; } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: BLOG / EDITORIAL CARDS (post list style) ───────────────────────────────────────────────────────────────────────────── */ [data-theme="daphne"] .blog-post-title, [data-theme="daphne"] .post-card-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 400; color: var(--color-text-dark); /* #514316 like Daphne */ letter-spacing: 0.01em; line-height: 1.3; } [data-theme="daphne"] .blog-post-desc, [data-theme="daphne"] .post-card-desc { font-family: 'Fira Sans', sans-serif; font-size: 13px; font-weight: 300; color: var(--color-text-body); /* #40381E like Daphne */ line-height: 1.7; } [data-theme="daphne"] .blog-category-label, [data-theme="daphne"] .post-category { font-family: 'Fira Sans', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-secondary); /* #ACA885 like Daphne */ } /* ───────────────────────────────────────────────────────────────────────────── DAPHNE: FONTS NOTE Loaded dynamically by app.js / index.php / contact.php when theme = daphne: Cormorant Garamond (300, 400, 500, 600, italic variants) Fira Sans (300, 400) ───────────────────────────────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════════════════════ DAPHNE: LARGE CATEGORY TILES SECTION Three full-width portrait tiles side by side, image + label overlay. Hidden in Classic theme, shown only when data-theme="daphne". ══════════════════════════════════════════════════════════════════════════════ */ /* Hidden by default & disabled */ .daphne-tiles-section, [data-theme="daphne"] .daphne-tiles-section { display: none !important; } [data-theme="daphne"] .daphne-tiles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1400px; margin: 0 auto; } /* Each tile: a clickable image card */ [data-theme="daphne"] .daphne-tile { position: relative; display: block; overflow: hidden; text-decoration: none; cursor: pointer; /* Portrait format — 3:4 ratio like the reference */ aspect-ratio: 3 / 4; } /* Image wrapper */ [data-theme="daphne"] .daphne-tile-img-wrap { position: absolute; inset: 0; overflow: hidden; } /* Image fills tile fully */ [data-theme="daphne"] .daphne-tile-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); transition: transform 0.6s ease; line-height: 0; } /* Hover: subtle zoom like the reference */ [data-theme="daphne"] .daphne-tile:hover .daphne-tile-img { transform: scale(1.04); } /* Dark gradient overlay at bottom — creates readable text area */ [data-theme="daphne"] .daphne-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(41, 40, 24, 0.72) 0%, rgba(41, 40, 24, 0.18) 40%, rgba(41, 40, 24, 0) 70% ); transition: background 0.3s ease; pointer-events: none; } [data-theme="daphne"] .daphne-tile:hover::after { background: linear-gradient( to top, rgba(41, 40, 24, 0.82) 0%, rgba(41, 40, 24, 0.25) 45%, rgba(41, 40, 24, 0.05) 75% ); } /* Text label — bottom-left, over image */ [data-theme="daphne"] .daphne-tile-label { position: absolute; bottom: 0; left: 0; z-index: 2; padding: 0 22px 22px; font-family: 'Fira Sans', 'Helvetica Neue', sans-serif; font-weight: 300; font-size: 13px; letter-spacing: 0.04em; color: #F5F2EE; line-height: 1.4; transition: padding-bottom 0.3s ease; } [data-theme="daphne"] .daphne-tile:hover .daphne-tile-label { padding-bottom: 26px; } /* ─── Responsive: stack vertically on mobile ─── */ @media (max-width: 768px) { [data-theme="daphne"] .daphne-tiles-grid { grid-template-columns: 1fr; } [data-theme="daphne"] .daphne-tile { aspect-ratio: 4 / 3; } [data-theme="daphne"] .daphne-tile + .daphne-tile { border-left: none; border-top: 1px solid rgba(41, 40, 24, 0.5); } }