/* ═══════════════════════════════════════════════════════════ AUREVIA — INTERNATIONAL LUXURY DESIGN LAYER Loaded last: refines typography, colour and UI to a global premium-brand standard. Override-only file. ═══════════════════════════════════════════════════════════ */ /* Google Fonts are linked directly in each page's (not @import here) — see css/style.css for why: @import here delayed this file's --primary override from applying, causing the cart icon (and other --primary-based elements) to flash the old style.css color for ~1s on every page load. */ /* ── RICH PALETTE ─────────────────────────────────────────── */ :root { --primary: #14301f; /* deep emerald */ --primary-2: #1e4530; /* emerald mid */ --secondary: #c9a84c; /* estate gold */ --gold-light: #e9d189; /* champagne */ --gold-deep: #a8873a; /* antique gold */ --accent: #e8d5a3; --ivory: #fffdf8; /* warm ivory surface */ --light: #f7f2e7; /* parchment */ --dark: #0a1b11; /* midnight forest */ --border: rgba(20,48,31,0.10); --hairline: rgba(201,168,76,0.28); --shadow: 0 6px 28px rgba(10,27,17,0.08); --shadow-lg: 0 22px 64px rgba(10,27,17,0.14); --font-heading: 'Cormorant Garamond', 'Playfair Display', Georgia, serif; --font-body: 'Jost', 'Inter', system-ui, sans-serif; --grad-gold: linear-gradient(135deg, #a8873a 0%, #c9a84c 38%, #e9d189 62%, #c9a84c 100%); --grad-emerald: linear-gradient(160deg, #1e4530 0%, #14301f 55%, #0a1b11 100%); } body { font-family: var(--font-body); font-weight: 400; letter-spacing: 0.01em; color: #24352b; } /* ── SELECTION + SCROLLBAR ────────────────────────────────── */ ::selection { background: rgba(201,168,76,0.85); color: #14301f; } ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: #f1ead9; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c9a84c, #a8873a); border-radius: 8px; border: 2px solid #f1ead9; } ::-webkit-scrollbar-thumb:hover { background: #a8873a; } /* ── EDITORIAL TYPOGRAPHY ─────────────────────────────────── */ h1, h2, h3, .section-title { font-family: var(--font-heading); font-weight: 600; } .hero h1 { font-size: clamp(2.7rem, 5vw, 4.3rem); line-height: 1.08; letter-spacing: -0.01em; font-weight: 600; } .hero h1 span { font-style: italic; font-weight: 500; } .section-title { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.12; letter-spacing: -0.005em; margin-bottom: 18px; font-weight: 600; } .section-subtitle { font-size: 1.02rem; line-height: 1.75; font-weight: 300; letter-spacing: 0.015em; } /* Eyebrow label — couture style with rule lines */ .section-tag { font-size: 0.68rem !important; font-weight: 500 !important; letter-spacing: 0.32em !important; color: var(--gold-deep) !important; display: inline-flex !important; align-items: center; gap: 14px; padding-left: 0 !important; } .section-tag::before { position: static !important; transform: none !important; animation: none !important; box-shadow: none !important; } .section-tag::before, .section-tag::after { content: ''; display: inline-block; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, var(--secondary)); border-radius: 0; } .section-tag::after { background: linear-gradient(90deg, var(--secondary), transparent); } .divider { background: var(--grad-gold) !important; height: 2px !important; } /* ── COUTURE BUTTONS ──────────────────────────────────────── */ .btn, .btn-primary, .nav-cta { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem !important; font-weight: 600 !important; } .btn { padding: 16px 36px; border-radius: 3px; } .nav-cta { padding: 12px 26px !important; border-radius: 3px !important; } .btn-primary, .nav-cta { background: var(--grad-gold) !important; background-size: 200% auto !important; color: #14301f !important; border: none; transition: background-position 0.6s ease, transform 0.3s ease, box-shadow 0.3s ease !important; } .btn-primary:hover, .nav-cta:hover { background-position: right center !important; box-shadow: 0 10px 32px rgba(201,168,76,0.45) !important; transform: translateY(-2px); } .btn-outline, .btn-outline-white { border-width: 1px !important; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.76rem !important; } .btn-outline-white:hover { border-color: var(--secondary) !important; color: var(--gold-light) !important; } /* ── TOPBAR — MAISON HEADER ───────────────────────────────── */ .topbar { background: var(--grad-emerald) !important; border-bottom: 1px solid var(--hairline); font-size: 0.74rem !important; letter-spacing: 0.06em; color: rgba(233,209,137,0.9) !important; } .topbar a { color: var(--gold-light) !important; font-weight: 500; } /* ── NAVBAR REFINEMENT ────────────────────────────────────── */ .navbar { border-bottom: 1px solid var(--hairline) !important; } .nav-links a { text-transform: uppercase; font-size: 0.74rem !important; letter-spacing: 0.14em; font-weight: 500 !important; } /* ── GALLERY CARDS — INTERNATIONAL STANDARD ───────────────── */ .product-card, .cat-showcase-card, .service-card, .value-card, .why-card, .market-card, .team-card, .testimonial-card, .feature-card, .step-card, .review-card, .cert-card { position: relative; background: rgba(255,253,248,0.7); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); border: 1px solid var(--hairline) !important; border-radius: 12px !important; box-shadow: 0 2px 16px rgba(10,27,17,0.05); transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.45s cubic-bezier(0.16,1,0.3,1), border-color 0.45s ease; } .product-card:hover, .service-card:hover, .value-card:hover, .market-card:hover, .team-card:hover, .testimonial-card:hover, .feature-card:hover, .step-card:hover, .why-card:hover { border-color: rgba(201,168,76,0.55) !important; box-shadow: 0 24px 56px rgba(10,27,17,0.14), 0 4px 16px rgba(201,168,76,0.12) !important; } /* Gold hairline crest on card hover */ .product-card::after, .service-card::after, .value-card::after, .market-card::after, .feature-card::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: var(--grad-gold); transform: scaleX(0); transform-origin: center; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); z-index: 2; } .product-card:hover::after, .service-card:hover::after, .value-card:hover::after, .market-card:hover::after, .feature-card:hover::after { transform: scaleX(1); } /* Product imagery — quiet luxury */ .product-img { background: linear-gradient(150deg, #f7f2e7 0%, #eee3c8 100%) !important; } .product-img img { transition: transform 0.8s cubic-bezier(0.16,1,0.3,1); } .product-card:hover .product-img img { transform: scale(1.06); } .product-badge { background: var(--grad-emerald) !important; color: var(--gold-light) !important; border: 1px solid var(--hairline); border-radius: 2px !important; font-size: 0.6rem !important; letter-spacing: 0.18em !important; font-weight: 600 !important; } /* Price — serif elegance */ .product-price, .price { font-family: var(--font-heading) !important; font-size: 1.35rem !important; font-weight: 700 !important; color: var(--gold-deep) !important; letter-spacing: 0 !important; } /* Category showcase overlays */ .cat-showcase-card { overflow: hidden; } .cat-sc-overlay h3 { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.01em; } .cat-sc-tag { text-transform: uppercase; letter-spacing: 0.22em !important; font-size: 0.6rem !important; font-weight: 600 !important; color: var(--gold-light) !important; } .cat-sc-link { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem !important; color: var(--gold-light) !important; } /* Trust strip — hairline columns */ .trust-strip { background: var(--ivory); border-block: 1px solid var(--hairline); } .trust-item strong { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; } .trust-item span { font-weight: 300; letter-spacing: 0.02em; } /* ── FORMS — REFINED INPUTS ───────────────────────────────── */ input, select, textarea { border-radius: 3px !important; border-color: rgba(20,48,31,0.16) !important; font-family: var(--font-body) !important; transition: border-color 0.3s ease, box-shadow 0.3s ease !important; } input:focus, select:focus, textarea:focus { border-color: var(--secondary) !important; box-shadow: 0 0 0 3px rgba(201,168,76,0.16) !important; outline: none !important; } label { letter-spacing: 0.04em; } /* ── HERO ATMOSPHERE ──────────────────────────────────────── */ .hero { background: var(--grad-emerald) !important; position: relative; } .hero::after { content: ''; position: absolute; pointer-events: none; top: -20%; right: -10%; width: 55%; height: 120%; background: radial-gradient(ellipse at center, rgba(201,168,76,0.13) 0%, transparent 62%); } .hero-badge { background: rgba(201,168,76,0.1) !important; border: 1px solid var(--hairline) !important; color: var(--gold-light) !important; border-radius: 2px !important; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.64rem !important; font-weight: 500 !important; } .hero-desc { font-weight: 300; line-height: 1.85; letter-spacing: 0.015em; } .stat-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.62rem !important; font-weight: 500; } .stat-num { font-family: var(--font-heading) !important; } /* ── FOOTER — MAISON CLOSE ────────────────────────────────── */ .footer { background: var(--grad-emerald) !important; border-top: 1px solid var(--hairline); } .footer-col h5 { font-size: 0.68rem !important; letter-spacing: 0.26em !important; color: var(--gold-deep) !important; font-weight: 600 !important; } .footer-col ul a { font-weight: 300; letter-spacing: 0.02em; } .footer-col ul a:hover { color: var(--gold-light) !important; } .social-link { border-radius: 2px !important; border-color: var(--hairline) !important; color: rgba(233,209,137,0.75); } .social-link svg { width: 15px; height: 15px; fill: currentColor; display: block; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); } .social-link:hover { background: var(--grad-gold) !important; color: #14301f !important; border-color: transparent !important; } .social-link:hover svg { transform: scale(1.15); } .footer-newsletter input { border-radius: 3px 0 0 3px !important; } .footer-newsletter button { background: var(--grad-gold) !important; color: #14301f !important; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; font-weight: 700; border-radius: 0 3px 3px 0 !important; } .footer-bottom { border-top: 1px solid rgba(201,168,76,0.14); font-weight: 300; letter-spacing: 0.03em; } /* ── AUTH CARDS ───────────────────────────────────────────── */ .auth-card, .auth-box { border-radius: 6px !important; border: 1px solid var(--hairline); } .auth-title { font-family: var(--font-heading); font-weight: 600; } /* ── WHATSAPP WIDGET POLISH ───────────────────────────────── */ .wa-popup { border-radius: 8px !important; border: 1px solid var(--hairline); } .wa-popup-head { background: var(--grad-emerald) !important; } /* ── SECTION RHYTHM ───────────────────────────────────────── */ section { scroll-margin-top: 90px; }