/* ============================================================ WHICHRANKS — Global Header & Footer Styles Upload this file to your root via File Manager Then link it in every page's : ============================================================ */ /* ===== FONT IMPORT ===== */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600&display=swap'); /* ===== CSS VARIABLES ===== */ :root { --ink: #0a0a0f; --paper: #fafaf7; --gold: #c9a84c; --gold-light: #f0d080; --ember: #e84c30; --mist: #e8e8e2; --mid: #6b6b72; --accent-blue: #1a3cff; } /* ===== BASE ===== */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; } /* ===== HEADER ===== */ #wr-header header { position: sticky; top: 0; left: 0; right: 0; z-index: 9999; padding: 0 56px; height: 72px; display: flex; align-items: center; justify-content: space-between; background: rgba(250, 250, 247, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0, 0, 0, 0.07); } .wr-logo { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 900; letter-spacing: -0.5px; color: var(--ink); text-decoration: none; transition: opacity 0.2s; } .wr-logo:hover { opacity: 0.8; } .wr-logo span { color: var(--gold); } .wr-nav { display: flex; gap: 36px; align-items: center; list-style: none; margin: 0; padding: 0; } .wr-nav a { font-size: 14px; font-weight: 500; color: var(--mid); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; position: relative; font-family: 'DM Sans', sans-serif; } .wr-nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform 0.25s; } .wr-nav a:hover { color: var(--ink); } .wr-nav a:hover::after { transform: scaleX(1); } .wr-btn-primary { background: var(--ink); color: var(--paper) !important; padding: 10px 22px; border-radius: 2px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important; border: 1.5px solid var(--ink); transition: all 0.2s; font-family: 'DM Sans', sans-serif; white-space: nowrap; } .wr-btn-primary:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--ink) !important; transform: translateY(-1px); } /* ===== FOOTER ===== */ #wr-footer footer { background: var(--ink); color: var(--paper); padding: 72px 64px 40px; margin-top: 100px; } .wr-footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; padding-bottom: 56px; border-bottom: 1px solid #1e1e2a; } .wr-footer-logo { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 900; letter-spacing: -0.5px; color: var(--paper); text-decoration: none; display: inline-block; margin-bottom: 0; } .wr-footer-logo span { color: var(--gold); } .wr-footer-brand p { color: #6b6b72; font-size: 14px; line-height: 1.7; margin-top: 16px; max-width: 280px; font-family: 'DM Sans', sans-serif; } .wr-footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; margin-top: 0; font-family: 'DM Sans', sans-serif; } .wr-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } .wr-footer-col ul li a { font-size: 14px; color: #6b6b72; text-decoration: none; transition: color 0.2s; font-family: 'DM Sans', sans-serif; } .wr-footer-col ul li a:hover { color: var(--paper); } .wr-footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .wr-footer-copy { font-size: 13px; color: #6b6b72; font-family: 'DM Sans', sans-serif; } /* ===== MOBILE RESPONSIVE ===== */ @media (max-width: 1024px) { #wr-header header { padding: 0 24px; } .wr-nav { display: none; } } @media (max-width: 768px) { #wr-footer footer { padding: 48px 24px 32px; } .wr-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } .wr-footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .wr-footer-top { grid-template-columns: 1fr; } }