/* ===================================================================== darrenargyle.com SITE NAVIGATION v2 (2026-08-02) SINGLE SOURCE OF TRUTH. Linked last in on every page so it always wins the cascade. Do not duplicate nav CSS inside pages. Nav is position:fixed, height locked to 68px on EVERY page. Pages clear it with their own hero padding-top. ===================================================================== */ nav{ position:fixed!important; top:0; left:0; right:0; z-index:1000; padding:0!important; height:68px; display:flex; align-items:center; background:rgba(245,240,232,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid #ebe4d6; } .nav-inner{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px!important; display:flex; align-items:center; justify-content:space-between; gap:24px; } .nav-name{ font-family:'Playfair Display',Georgia,serif!important; font-size:19px!important; font-weight:700!important; letter-spacing:0!important; text-transform:none!important; color:#2c2924!important; text-decoration:none!important; white-space:nowrap; flex:0 0 auto; line-height:1.2; } .nav-links{ list-style:none; display:flex; align-items:center; gap:22px!important; flex-wrap:nowrap; margin:0; padding:0; } .nav-links li{white-space:nowrap;margin:0} .nav-links a{ font-size:14px!important; font-weight:500!important; letter-spacing:0!important; color:#555; white-space:nowrap; text-decoration:none; transition:color .2s; } .nav-links a:hover{color:#2c2924} .nav-cta{ background:#2c2924!important; color:#fff!important; padding:9px 17px!important; border-radius:6px!important; font-weight:600!important; white-space:nowrap; } .nav-cta:hover{background:#3b3733!important;color:#fff!important} .hamburger{ display:none; background:none; border:none; cursor:pointer; padding:4px; z-index:1001; } .hamburger span{ display:block; width:24px; height:2px; background:#2c2924; margin:5px 0; } /* Nine items need ~1030px. Collapse to the hamburger before they can wrap. */ @media(max-width:1140px){ .nav-links{display:none!important} .hamburger{display:block!important} .nav-inner{padding:0 20px!important} } @media(max-width:520px){ .nav-name{font-size:17px!important} .nav-inner{padding:0 16px!important} } /* --------------------------------------------------------------------- MOBILE MENU OVERLAY. Canonical, shared by all 9 pages. Full screen, centred. Do not restyle this inside a page. Hex values are literal on purpose so this file does not depend on any page defining CSS custom properties. --------------------------------------------------------------------- */ .mobile-menu{ display:none; position:fixed; inset:0; z-index:200; background:rgba(245,240,232,.98); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); flex-direction:column; align-items:center; justify-content:center; gap:0; } .mobile-menu.open{display:flex} .mobile-menu a{ font-family:'Playfair Display',Georgia,serif; font-size:28px; font-weight:700; color:#2c2924; text-decoration:none; padding:16px 0; transition:color .2s; } .mobile-menu a:hover{color:#8b6f47} .mobile-menu .mobile-cta{ margin-top:24px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600; background:#8b6f47; color:#fff; padding:14px 32px; border-radius:6px; }