/* * Theme options — switch variants by editing attributes in index.html * * data-header="default" | "alt" Header / nav style * * See THEME-SWITCH.md for full instructions. */ /* —— Header style A (default): teal bar, white logo & links —— */ body[data-header="default"] .nav__logo-img--alt, body:not([data-header]) .nav__logo-img--alt { display: none; } body[data-header="default"] .nav__logo-img--default, body:not([data-header]) .nav__logo-img--default { display: block; } /* —— Header style B (alt): cream bar, teal logo & links —— */ body[data-header="alt"] .header { background: var(--color-cream); border-bottom: 1px solid var(--color-teal); } body[data-header="alt"] .nav__link { color: var(--color-teal); } body[data-header="alt"] .nav__link.is-active::after { background: var(--color-teal); } body[data-header="alt"] .nav__hamburger span { background: var(--color-teal); } body[data-header="alt"] .nav__logo-img--default { display: none; } body[data-header="alt"] .nav__logo-img--alt { display: block; } body[data-header="alt"] .mobile-menu { background: var(--color-cream); } body[data-header="alt"] .mobile-menu__link { color: var(--color-teal); } body[data-header="alt"] .mobile-menu__divider { background: var(--color-teal); } .nav__logo-img { height: 54px; width: auto; } @media (max-width: 767px) { .nav__logo-img { height: 44px; } }