/* ===================================================================== * AM Legal APC — Header, Footer, Mobile chrome, and section patterns. * (Homepage section patterns are appended in the homepage stage.) * Units: rem/em throughout; breakpoints in em; 1px hairlines in px. * ===================================================================== */ /* The header is sticky (in flow), so no body padding-top offset is needed. */ /* ===================================================================== * HEADER * ===================================================================== */ /* `body` prefix raises specificity above GeneratePress's `.site-header{background-color:var(--base-3)}` rule. We also force the wrapper to a plain block so our own `.am-header__inner` flex row controls layout (GP's header structure otherwise interferes at narrow widths). */ body .site-header { display: block; position: sticky; top: 0; z-index: 1000; background: var(--color-bg-dark); border-top: var(--gold-bar-height) solid var(--color-gold); border-bottom: 1px solid var(--color-border-dark); /* hairline */ padding: 0; transition: background 0.3s ease, box-shadow 0.3s ease; } /* ===================================================================== * WP ADMIN BAR COMPENSATION * WP adds .admin-bar to when logged in. The bar behaves differently * across viewports: * ≥783px — position:fixed, 32px tall → offset sticky header below it. * ≤782px — position:absolute (scrolls with page) → reset top to 0. * ≤600px — bar hidden entirely → top:0 (covered by the rule above). * ===================================================================== */ /* WP adds .admin-bar to (not ), so the selector is body.admin-bar. */ body.admin-bar .site-header { top: 32px; } /* ≤782px: admin bar switches to position:absolute — reset. */ @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 0; } } /* Transparent-over-hero state (homepage only; enabled in the homepage stage). */ body.am-home-hero .site-header:not(.am-scrolled) { background: transparent; border-bottom-color: transparent; } body .site-header.am-scrolled { background: var(--color-bg-dark); box-shadow: 0 1px 0 var(--color-border-dark); } .am-header__inner { display: flex; flex-wrap: nowrap; align-items: center; min-height: var(--header-height); max-width: var(--container); margin: 0 auto; padding: 0 2em; gap: 1.5em; } .am-header__logo { display: inline-flex; align-items: center; margin-right: auto; flex: 1; } .am-header__logo img { max-height: 3.5em; width: auto; display: block; } /* ---- Primary nav ----------------------------------------------------- */ .am-primary-nav .am-menu { display: flex; align-items: center; gap: 1.5em; list-style: none; margin: 0; padding: 0; } .am-primary-nav .am-menu a { font-family: var(--font-body); font-size: 0.8em; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); white-space: nowrap; } .am-primary-nav .am-menu a:hover, .am-primary-nav .am-menu .current-menu-item > a { color: #fff; } /* Dropdown caret on parent items */ .am-primary-nav .menu-item-has-children > a::after { content: "\25BE"; font-size: 0.6em; margin-left: 0.4em; color: var(--color-gold); vertical-align: middle; } /* Dropdowns */ .am-primary-nav .menu-item-has-children { position: relative; } .am-primary-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 15em; /* 240px */ background: #111; border: 1px solid var(--color-border-dark); /* hairline */ list-style: none; margin: 0; padding: 0.5em 0; opacity: 0; visibility: hidden; transform: translateY(0.5em); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 1002; } .am-primary-nav .menu-item-has-children:hover > .sub-menu, .am-primary-nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .am-primary-nav .sub-menu li { margin: 0; } .am-primary-nav .sub-menu a { display: block; padding: 0.6em 1.25em; font-size: 0.72em; color: rgba(255, 255, 255, 0.7); } .am-primary-nav .sub-menu a:hover { color: var(--color-gold); background: rgba(255, 255, 255, 0.03); } /* ---- Header actions -------------------------------------------------- */ .am-header__actions { display: flex; align-items: center; gap: 1.5em; } .am-header__cta { padding: 0.7em 1.5em; font-size: 0.62em; } .am-header__phone { color: #fff; font-size: 0.85em; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; } .am-header__phone:hover { color: var(--color-gold); } .am-header__phone .am-icon-phone { color: var(--color-gold); margin-right: 0.4em; vertical-align: -0.125em; } .am-header__lang-toggle { display: inline-flex; align-items: center; padding: 0.35em 0.8em; font-size: 0.68em; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); border: 1px solid var(--color-border-dark); border-radius: 999px; white-space: nowrap; } .am-header__lang-toggle:hover { color: var(--color-gold); border-color: var(--color-gold); } .am-mobile-nav__lang-toggle { display: inline-flex; align-items: center; justify-content: center; margin-top: 1.2em; padding: 0.5em 1.2em; font-size: 0.75em; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); border: 1px solid var(--color-border-dark); border-radius: 999px; } .am-mobile-nav__lang-toggle:hover { color: var(--color-gold); } /* ---- Hamburger (hidden on desktop) ----------------------------------- */ .am-burger { display: none; flex-direction: column; justify-content: center; gap: 0.3125em; /* 5px */ width: 2.5em; /* 40px */ height: 2.5em; background: none; border: 0; cursor: pointer; padding: 0; margin-left: auto; flex-shrink: 0; } .am-burger span { display: block; width: 1.625em; /* 26px */ height: 0.125em; /* 2px */ background: #fff; transition: all 0.25s ease; } /* ===================================================================== * MOBILE NAV OVERLAY * ===================================================================== */ .am-mobile-nav { position: fixed; inset: 0; z-index: 1100; background: var(--color-bg-dark); overflow-y: auto; padding: 5em 2em 3em; } .am-mobile-nav.is-open { display: block; } .am-mobile-nav__close { position: absolute; top: 1.25em; right: 1.5em; background: none; border: 0; color: #fff; font-size: 2.5em; line-height: 1; cursor: pointer; } .am-mobile-nav__inner { max-width: 30em; margin: 0 auto; } .am-mobile-menu, .am-mobile-menu .sub-menu { list-style: none; margin: 0; padding: 0; } .am-mobile-menu > li { border-bottom: 1px solid var(--color-border-dark); } /* hairline */ .am-mobile-menu a { display: block; padding: 1em 0; color: #fff; font-family: var(--font-display); font-size: 1.6em; font-weight: 300; } .am-mobile-menu .sub-menu a { font-family: var(--font-body); font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.6); padding: 0.5em 0 0.5em 1em; } .am-mobile-nav__cta { display: block; text-align: center; margin: 2em 0 1em; } .am-mobile-nav__phone { display: block; text-align: center; color: #fff; font-size: 1.1em; letter-spacing: 0.05em; } /* ===================================================================== * MOBILE STICKY CALL BAR * ===================================================================== */ .am-call-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; background: var(--color-gold); color: var(--color-bg-dark); text-align: center; padding: 0.85em 1em; font-family: var(--font-body); font-weight: 600; font-size: 0.85em; letter-spacing: 0.05em; text-transform: uppercase; } .am-call-bar:hover { color: var(--color-bg-dark); background: var(--color-gold-hover); } .am-call-bar .am-icon-phone { margin-right: 0.45em; vertical-align: -0.125em; } /* ===================================================================== * FOOTER * ===================================================================== */ .site-footer, .am-footer__main { background: var(--color-bg-dark); color: rgba(255, 255, 255, 0.6); } .am-footer__main { padding: var(--space-section) 2em 3em; } .am-footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5em; max-width: var(--container); margin: 0 auto; } .am-footer__heading { font-family: var(--font-body); font-size: 0.65em; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-gold); margin: 0 0 1.25em; } .am-footer__links { list-style: none; margin: 0; padding: 0; } .am-footer__links li { margin-bottom: 0.65em; } .am-footer__links a { color: rgba(255, 255, 255, 0.6); font-size: 0.82em; } .am-footer__links a:hover { color: var(--color-gold); } .am-footer__logo img { height: 2.625em; width: auto; margin-bottom: 1.25em; } /* 42px */ .am-footer__address { font-style: normal; font-size: 0.82em; line-height: 2; color: rgba(255, 255, 255, 0.6); } .am-footer__address a { color: rgba(255, 255, 255, 0.6); } .am-footer__address a:hover { color: var(--color-gold); } .am-footer__social { margin: 1em 0 0.75em; display: flex; gap: 1.25em; } .am-footer__social a { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.7); } .am-footer__social a:hover { color: var(--color-gold); } .am-footer__lang { font-style: italic; font-family: var(--font-display); font-size: 1em; color: var(--color-gold); margin: 0.5em 0 0; } /* Bottom disclaimer bar */ .am-footer__bottom { background: #080808; border-top: 1px solid var(--color-border-dark); /* hairline */ padding: 1.5em 2em; } .am-footer__bottom-inner { max-width: var(--container); margin: 0 auto; display: flex; flex-direction: column; gap: 0.4em; } .am-footer__copy { margin: 0; font-size: 0.72em; color: var(--color-text-faint); } .am-footer__legal-links { margin-left: 0.5em; } .am-footer__legal-links a { color: var(--color-text-faint); margin: 0 0.4em; font-size: 0.72em; } .am-footer__legal-links a:hover { color: var(--color-gold); } .am-footer__disclaimer { margin: 0; font-size: 0.68em; font-style: italic; color: var(--color-text-faint); } /* ===================================================================== * RESPONSIVE (em breakpoints: 64em = 1024px, 48em = 768px) * ===================================================================== */ @media (max-width: 64em) { .am-primary-nav, .am-header__actions { display: none; } .am-burger { display: flex; } .am-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2em; } } @media (max-width: 48em) { .am-call-bar { display: block; } /* Keep content clear of the sticky call bar. */ body { padding-bottom: 3.25em; } .am-footer__grid { grid-template-columns: 1fr; } .am-header__inner { padding: 0 1.25em; } } /* ===================================================================== * FULL-BLEED PAGE SCAFFOLDING (homepage + interior pages) * `.am-fullbleed` body class is added on the front page and all WP pages. * Lets `alignfull` section blocks span the viewport (GeneratePress otherwise * contains content), and provides shared section spacing. * ===================================================================== */ .am-fullbleed #page.grid-container { max-width: 100%; padding-left: 0; padding-right: 0; } .am-fullbleed .site-content, .am-fullbleed #content, .am-fullbleed .content-area { padding: 0; margin: 0; max-width: 100%; } /* flex eliminates the anonymous inline box (whitespace text node) between the hidden entry-header and entry-content, which otherwise creates a visible gap. */ .am-fullbleed .inside-article { padding: 0; margin: 0; max-width: 100%; display: flex; flex-direction: column; } .am-fullbleed .entry-content { padding: 0; margin: 0; max-width: 100%; } .am-fullbleed .entry-header, .am-fullbleed .entry-footer { display: none; } /* hide WP page title/meta */ .am-fullbleed .entry-content > .alignfull { margin-left: 0; margin-right: 0; width: 100%; max-width: 100%; } /* Shared section scaffolding (do NOT blanket-constrain `.am-section > *` — it would cap Cover overlays/images; each section caps its own content grid). */ .am-section { padding: 7em 2em; } .am-h2 { margin: 0 0 1.25em; } .am-section .am-label { margin-bottom: 0.75em; } .am-section .am-label + .am-h2 { margin-top: 0.5em; }