/* ===================================================================== CONFINEA — SHARED SITE HEADER ("GLOBE OF CAPITAL" STYLE) Extracted from the new front page so every page shares one nav. The nav is FIXED: it descends with the user as they scroll. - On the home page (transparent over the globe hero) use: .gx-nav - On interior/light pages use: .gx-nav.gx-solid (always keeps the deep-navy plate so it reads over light content) Pages using the fixed nav should add class "gx-pad" to so the content is not hidden underneath (the home hero is 100svh, so the home page does NOT need it). ===================================================================== */ :root { --gx-night: #050d1b; --gx-hair: rgba(201, 160, 82, 0.16); --gx-gold: #c9a052; --gx-gold-pale: #f1e4bf; --gx-paper: #e9e4d6; --gx-serif: "Playfair Display", Georgia, serif; --gx-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ---------- nav plate ---------- */ .gx-nav { position: fixed; inset: 0 0 auto 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 3.4vw, 60px); transition: background .4s ease, box-shadow .4s ease, padding .35s ease; } .gx-nav.is-scrolled { background: rgba(5, 13, 27, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--gx-hair); padding-block: 13px; } /* solid variant for interior pages with light backgrounds: the plate is always navy, and only condenses on scroll */ .gx-nav.gx-solid { background: var(--gx-night); box-shadow: 0 1px 0 var(--gx-hair); } .gx-nav.gx-solid.is-scrolled { background: rgba(5, 13, 27, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* offset so fixed nav doesn't cover page content on interior pages */ body.gx-pad { padding-top: 79px; } /* ---------- brand ---------- */ .gx-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; } .gx-brand img { width: 34px; height: 34px; object-fit: contain; border-radius: 50%; border: 0; } .gx-brand strong { font-family: var(--gx-serif); font-size: 21px; font-weight: 700; letter-spacing: .02em; color: var(--gx-paper); } .gx-brand small { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--gx-gold); margin-top: 2px; font-family: var(--gx-sans); } /* ---------- links ---------- */ .gx-links { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px); } .gx-links a, .gx-links button { appearance: none; background: none; border: 0; cursor: pointer; padding: 0; font: 600 11px/1 var(--gx-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gx-paper); text-decoration: none; position: relative; } .gx-links a::after, .gx-links button::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 1px; background: var(--gx-gold); transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.19,1,.22,1); } .gx-links a:hover::after, .gx-links button:hover::after { transform: scaleX(1); transform-origin: left center; } /* current page indicator */ .gx-links a.active { color: var(--gx-gold); } .gx-links a.active::after { transform: scaleX(1); } /* contact CTA */ .gx-links .gx-cta-mini { border: 1px solid var(--gx-hair); padding: 10px 16px; color: var(--gx-gold-pale); transition: border-color .3s ease, color .3s ease; } .gx-links .gx-cta-mini::after { display: none; } .gx-links .gx-cta-mini:hover { border-color: var(--gx-gold); color: var(--gx-gold); } .gx-links .gx-cta-mini.active { border-color: var(--gx-gold); color: var(--gx-gold); } /* ---------- responsive ---------- */ @media (max-width: 760px) { .gx-links a:not(.gx-keep) { display: none; } body.gx-pad { padding-top: 71px; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .gx-nav, .gx-links a::after, .gx-links button::after { transition: none; } } /* ===================================================================== SHARED SITE FOOTER — one consistent footer on every interior page, matched to the front-page .gx-footer. Overrides styles.css so the footer looks and fits the same everywhere (no rosette, no full-bleed). ===================================================================== */ .site-footer { position: relative; overflow: hidden; background: var(--gx-night) !important; background-image: none !important; border-top: 1px solid var(--gx-hair) !important; color: var(--gx-paper); padding: clamp(56px, 8vh, 100px) clamp(20px, 6vw, 120px) 38px !important; } /* drop the decorative sweep + guilloché rosette so it matches index */ .site-footer::before, .site-footer::after { content: none !important; display: none !important; } .footer-grid { max-width: 1560px; margin-inline: auto; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 70px) !important; border-bottom: 0 !important; padding-bottom: 0 !important; font-size: 14px; } .footer-col-title { font-family: var(--gx-sans); font-weight: 600; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gx-paper-dim); margin-bottom: 16px; } .footer-col-body { color: var(--gx-paper); line-height: 2.1; } a.footer-link, .footer-link { color: var(--gx-paper); line-height: 2.1; } .footer-link:hover { color: var(--gx-gold); } .footer-bottom { max-width: 1560px; margin: 56px auto 0; padding-top: 26px; border-top: 1px solid var(--gx-hair-soft); color: var(--gx-paper-dim); font-size: 12px; } .footer-icons { gap: 18px; } .footer-icons i { color: var(--gx-paper-dim); font-size: 18px; } .footer-icons a:hover i, .footer-icons i:hover { color: var(--gx-gold); opacity: 1; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; } }