/* ===== Prince Galant — header & footer (ratiowatches.com structure) ===== */ :root { --pg-ink: #121215; --pg-ink-soft: #1a1a1f; --pg-cream: #f2f2f3; --pg-cream-soft: #1a1a1f; --pg-gold: #9aa3b0; --pg-gold-light: #cfd4da; --pg-line: rgba(242, 242, 243, 0.12); --pg-ease: cubic-bezier(.22, 1, .36, 1); --pg-serif: "Instrument Serif", "Times New Roman", serif; --pg-tex: url('/wp-content/uploads/2026/07/pg-texture-guilloche.jpg'); --pg-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, Arial, sans-serif; } /* Reset the theme's default (unstyled) header/footer output, if any leaks through */ .site-header, .site-footer { display: none !important; } /* The dark ground belongs on , not only on the hand-coded .pg-page templates: WooCommerce renders single products, cart, checkout and account with its own markup, and those pages were left on the theme's white. */ body { margin: 0; background-image: linear-gradient(rgba(18,18,21,.93), rgba(18,18,21,.93)), var(--pg-tex); background-repeat: no-repeat, repeat; background-size: cover, 560px; background-attachment: fixed, fixed; color: var(--pg-cream); } /* ---------- Promo bar (scrolling ticker) ---------- */ .pg-promo-bar { background: var(--pg-ink); color: var(--pg-cream); overflow: hidden; padding: 10px 0; } .pg-promo-track { display: flex; width: max-content; gap: 48px; animation: pg-marquee 34s linear infinite; } .pg-promo-track span { display: flex; align-items: center; gap: 48px; font: 500 11px/1.5 var(--pg-sans); text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; } .pg-promo-track span em { font-style: normal; opacity: 0.4; } /* ---------- Header ---------- */ #pg-header { position: sticky; top: 0; z-index: 400; background-image: linear-gradient(rgba(18,18,21,.86), rgba(18,18,21,.86)), var(--pg-tex); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--pg-line); } .pg-header-inner { max-width: 1280px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .pg-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pg-cream); } .pg-logo img { display: block; height: 34px; width: auto; object-fit: contain; } .pg-logo-text { font: 500 15px/1 var(--pg-sans); text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap; } .pg-nav { flex: 1; display: flex; justify-content: center; } .pg-nav-list { list-style: none; display: flex; align-items: center; gap: 40px; margin: 0; padding: 0; } .pg-nav-list li a { position: relative; display: inline-block; color: rgba(242, 242, 243, 0.66); text-decoration: none; font: 500 11.5px/1 var(--pg-sans); text-transform: uppercase; letter-spacing: 0.12em; padding-bottom: 4px; transition: color 0.25s var(--pg-ease); } .pg-nav-list li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--pg-cream); transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--pg-ease); } .pg-nav-list li a:hover { color: var(--pg-cream); } .pg-nav-list li a:hover::after { transform: scaleX(1); transform-origin: left; } .pg-header-actions { display: flex; align-items: center; gap: 18px; } .pg-cart-link { position: relative; display: flex; align-items: center; justify-content: center; color: var(--pg-cream); width: 32px; height: 32px; } .pg-cart-count { position: absolute; top: -4px; right: -6px; background: var(--pg-cream); color: var(--pg-ink); font: 500 10px/1 var(--pg-sans); min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } /* Burger (mobile only) */ .pg-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; background: none; border: 0; cursor: pointer; padding: 0; } .pg-burger span { display: block; height: 2px; width: 24px; background: var(--pg-cream); transition: transform 0.25s ease, opacity 0.2s ease; } .pg-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .pg-burger.is-open span:nth-child(2) { opacity: 0; } .pg-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Trust bar ---------- */ .pg-trust-bar { background-image: linear-gradient(rgba(26,26,31,.93), rgba(26,26,31,.93)), var(--pg-tex); border-bottom: 1px solid var(--pg-line); overflow: hidden; padding: 10px 0; } .pg-trust-track { display: flex; width: max-content; gap: 40px; animation: pg-marquee 30s linear infinite; } .pg-trust-track span { display: flex; align-items: center; gap: 40px; color: rgba(242, 242, 243, 0.5); font: 500 10.5px/1.5 var(--pg-sans); text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; } .pg-trust-track span em { color: rgba(242, 242, 243, 0.25); font-style: normal; } /* ---------- Mobile nav drawer ---------- */ .pg-mobile-nav { position: fixed; inset: 0; top: 0; background-image: linear-gradient(rgba(18,18,21,.96), rgba(18,18,21,.96)), var(--pg-tex); z-index: 500; transform: translateX(-100%); transition: transform 0.35s var(--pg-ease); overflow-y: auto; padding: 90px 32px 40px; } .pg-mobile-nav.is-open { transform: translateX(0); } .pg-mobile-nav-list { list-style: none; margin: 0; padding: 0; } .pg-mobile-nav-list li a { display: block; padding: 20px 0; border-bottom: 1px solid var(--pg-line); color: var(--pg-cream); text-decoration: none; font: 400 26px/1 var(--pg-serif); letter-spacing: -0.01em; } @media (max-width: 880px) { .pg-nav { display: none; } .pg-burger { display: flex; } .pg-logo-text { font-size: 15px; } } /* ===================== Footer ===================== */ .pg-footer { background-image: linear-gradient(rgba(13,13,15,.94), rgba(13,13,15,.94)), var(--pg-tex); color: rgba(250, 250, 250, 0.55); border-top: 0; margin-top: 0; } .pg-footer-main { max-width: 1280px; margin: 0 auto; padding: 80px 24px 56px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } .pg-footer-brand img { height: 44px; width: auto; object-fit: contain; margin-bottom: 18px; } .pg-footer-title { font: 500 15px/1 var(--pg-sans); text-transform: uppercase; letter-spacing: 0.16em; color: var(--pg-cream); margin: 0 0 14px; } .pg-footer-tagline { font: 400 14px/1.6 var(--pg-sans); max-width: 260px; margin: 0 0 18px; } .pg-footer-social { display: flex; gap: 18px; } .pg-footer-social a { color: rgba(250, 250, 250, 0.55); text-decoration: none; font: 500 11px/1 var(--pg-sans); text-transform: uppercase; letter-spacing: 0.12em; transition: color 0.25s var(--pg-ease); } .pg-footer-social a:hover { color: var(--pg-cream); } .pg-footer-social-soon { color: rgba(250, 250, 250, 0.28); font: 500 11px/1 var(--pg-sans); text-transform: uppercase; letter-spacing: 0.12em; cursor: default; } .pg-footer-heading { font: 500 10.5px/1 var(--pg-sans); text-transform: uppercase; letter-spacing: 0.16em; color: rgba(250, 250, 250, 0.35); margin: 0 0 18px; } .pg-footer-col ul { list-style: none; margin: 0; padding: 0; } .pg-footer-col ul li { margin-bottom: 11px; font: 400 14px/1.5 var(--pg-sans); } .pg-footer-col ul li a { color: inherit; text-decoration: none; transition: color 0.25s var(--pg-ease); } .pg-footer-col ul li a:hover { color: var(--pg-cream); } .pg-footer-text { font: 400 14px/1.6 var(--pg-sans); margin: 0 0 16px; max-width: 260px; } .pg-footer-download { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border: 1px solid rgba(250, 250, 250, 0.22); color: rgba(250, 250, 250, 0.75); text-decoration: none; font: 500 11.5px/1 var(--pg-sans); letter-spacing: 0.04em; transition: background 0.25s var(--pg-ease), color 0.25s var(--pg-ease), border-color 0.25s var(--pg-ease); } .pg-footer-download:hover { background: var(--pg-cream); color: var(--pg-ink); border-color: var(--pg-cream); } .pg-newsletter-form { display: flex; border: 1px solid rgba(250,250,250,0.2); border-radius: 0; overflow: hidden; max-width: 280px; } .pg-newsletter-form input { flex: 1; min-width: 0; background: transparent; border: 0; padding: 12px 14px; color: var(--pg-cream); font: 400 14px/1 var(--pg-sans); } .pg-newsletter-form input::placeholder { color: rgba(250, 250, 250, 0.35); } .pg-newsletter-form button { border: 0; background: var(--pg-cream); color: var(--pg-ink); font: 500 12px/1 var(--pg-sans); text-transform: uppercase; letter-spacing: 0.05em; padding: 0 18px; cursor: pointer; } .pg-footer-bottom { border-top: 1px solid rgba(250, 250, 250, 0.12); max-width: 1280px; margin: 0 auto; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 400 12px/1.5 var(--pg-sans); color: rgba(250, 250, 250, 0.35); } .pg-footer-signature { font: 400 italic 14px/1.5 var(--pg-serif); color: rgba(250, 250, 250, 0.5); margin: 0; } .pg-footer-bottom p { margin: 0; } @media (max-width: 900px) { .pg-footer-main { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .pg-footer-main { grid-template-columns: 1fr; padding: 48px 20px 32px; } .pg-footer-bottom { flex-direction: column; align-items: flex-start; padding: 20px; } } /* ===================== Floating WhatsApp button ===================== */ .pg-whatsapp-float { position: fixed; right: 22px; bottom: 22px; z-index: 600; width: 56px; height: 56px; border-radius: 999px; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -6px rgba(37,211,102,0.55), 0 2px 8px rgba(11,11,13,0.25); transition: transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s ease; } .pg-whatsapp-float::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: #25d366; animation: pg-whatsapp-pulse 2.4s ease-out infinite; z-index: -1; } .pg-whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 14px 32px -6px rgba(37,211,102,0.65), 0 2px 8px rgba(11,11,13,0.3); } @keyframes pg-whatsapp-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1.9); opacity: 0; } } @media (max-width: 640px) { .pg-whatsapp-float { right: 16px; bottom: 16px; width: 50px; height: 50px; } } @media (prefers-reduced-motion: reduce) { .pg-whatsapp-float::before { animation: none; display: none; } }