/* Atlanta Best Realty — shared header/nav/footer styles Link this in the of every page: */ :root{ --navy:#141e33; --gold:#c9973a; --terracotta:#d97a4d; --cream:#f6f2e9; --ink:#17181c; --line: rgba(255,255,255,0.12); --line-dark: rgba(0,0,0,0.08); } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ -webkit-overflow-scrolling:touch; overscroll-behavior-y:none; } /* ===================== HEADER ===================== */ header.site-header{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--line-dark); } .header-inner{ max-width:1200px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .brand{ display:flex; align-items:center; gap:12px; min-width:0; } .brand-mark{ width:42px; height:42px; border-radius:50%; background:var(--terracotta); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0; position:relative; z-index:2; /* keeps the logo drawn above the tag text if space ever gets tight */ } .brand-text{ line-height:1.15; min-width:0; display:flex; flex-direction:column; } .brand-text .brand-tag{ order:1; font-size:9px; letter-spacing:.04em; color:var(--navy); font-weight:700; white-space:nowrap; margin-bottom:2px; /* guarantees a gap so it never visually touches the name below */ } .brand-text .name{ order:2; font-family:Georgia, 'Times New Roman', serif; font-weight:700; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:480px){ .brand{ gap:16px; } /* a bit more breathing room between logo and text on phones */ .brand-text .tag{ font-size:10px; } } nav.desktop-nav{ display:flex; align-items:center; gap:28px; margin-left:auto; } nav.desktop-nav a{ display:flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--ink); padding:8px 2px; } nav.desktop-nav a.active{ color:var(--gold); } .nav-icon{ width:18px; height:18px; flex-shrink:0; } .cta-desktop{ background:var(--gold); color:#1c1300; font-weight:700; font-size:14px; padding:10px 18px; border-radius:8px; white-space:nowrap; border:none; cursor:pointer; } .menu-btn{ display:none; background:none; border:none; width:44px; height:44px; padding:0; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .menu-btn span, .menu-btn span::before, .menu-btn span::after{ content:""; display:block; width:22px; height:2px; background:var(--ink); position:relative; transition:transform .2s ease, opacity .2s ease; } .menu-btn span::before{ position:absolute; top:-7px; } .menu-btn span::after{ position:absolute; top:7px; } .menu-btn.open span{ background:transparent; } .menu-btn.open span::before{ top:0; transform:rotate(45deg); } .menu-btn.open span::after{ top:0; transform:rotate(-45deg); } /* Mobile dropdown — animates grid-template-rows instead of max-height, which is what was causing the laggy open/close. */ .mobile-nav{ background:#fff; border-top:1px solid var(--line-dark); display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1); } .mobile-nav.open{ grid-template-rows:1fr; } .mobile-nav-inner{ overflow:hidden; min-height:0; } .mobile-nav a, .mobile-nav button.cta-mobile{ display:flex; align-items:center; gap:12px; width:100%; padding:16px 20px; font-size:16px; font-weight:600; border-bottom:1px solid var(--line-dark); touch-action:manipulation; background:none; border-left:none; border-right:none; border-top:none; color:var(--ink); } .cta-mobile{ text-align:left; background:var(--gold) !important; color:#1c1300 !important; border:none !important; margin:14px 20px; width:calc(100% - 40px); border-radius:8px; font-weight:700; } @media (max-width: 760px){ nav.desktop-nav, .cta-desktop{ display:none; } .menu-btn{ display:flex; } } /* ===================== FOOTER ===================== */ footer.site-footer{ background:var(--navy); color:var(--cream); padding:56px 20px 28px; } .footer-inner{ max-width:1200px; margin:0 auto; } .footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap:32px; } @media (max-width:900px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap:32px; } } @media (max-width:560px){ .footer-grid{ grid-template-columns: 1fr; gap:36px; } } .f-brand{ display:flex; gap:12px; align-items:flex-start; } .f-brand .brand-mark{ width:44px; height:44px; } .f-brand-name{ font-family:Georgia,serif; font-weight:700; font-size:18px; } .f-blurb{ margin-top:14px; font-size:14.5px; line-height:1.6; color:#cfd3dd; max-width:340px; } .f-col h4{ color:var(--gold); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 14px; } .f-col a{ display:block; font-size:14.5px; color:#e7e9ef; margin-bottom:10px; line-height:1.5; } .f-line{ display:flex; align-items:flex-start; gap:10px; } .f-line .nav-icon{ margin-top:2px; color:var(--gold); } .socials{ display:flex; gap:18px; margin-top:18px; } .socials a{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; } .social-icon{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; } .socials svg{ width:18px; height:18px; fill:#fff; } .social-label{ font-size:11.5px; color:#cfd3dd; } .footer-bottom{ margin-top:40px; padding-top:20px; border-top:1px solid var(--line); font-size:12.5px; color:#9aa0b3; text-align:center; } /* --- Added: use the real logo image inside the brand mark circle --- */ .brand-mark{ overflow:hidden; padding:0; } .brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; } /* --- Added: highlight the active link in the mobile menu too --- */ .mobile-nav a.active{ color:var(--gold); }