/* ============================================================ NAVBAR STYLES — selected in Admin, Appearance (theme.navbar). Applied via . Desktop (>=920px) restyles the bar; the mobile slide-down menu is shared by every style. Default = 1 (pill). ============================================================ */ /* Neutralise the default sliding underline so each style controls its own look. */ @media (min-width: 920px) { body[data-nav] .main-nav a:not(.btn)::after { display: none; } } /* White chip behind the logo on the dark bars, so a coloured logo stays visible. */ body[data-nav="2"] .brand, body[data-nav="8"] .brand, body[data-nav="9"] .brand { background: #fff; border-radius: 8px; padding: 4px 10px; } /* Light burger on dark bars (mobile). */ body[data-nav="2"] .nav-burger, body[data-nav="8"] .nav-burger, body[data-nav="9"] .nav-burger { color: #fff; } /* ---------- 1 · Floating pill (default / current) ---------- */ body[data-nav="1"] .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0 !important; box-shadow: none !important; padding-top: 12px; } body[data-nav="1"] .header-in { background: rgba(255,255,255,.80); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(232,224,212,.9); border-radius: 999px; box-shadow: 0 6px 26px rgba(28,25,23,.10); padding: 7px 8px 7px 22px !important; transition: box-shadow .25s ease, background .25s ease; } body[data-nav="1"] .site-header.scrolled { padding-top: 8px; } body[data-nav="1"] .site-header.scrolled .header-in { background: rgba(255,255,255,.93); box-shadow: 0 10px 32px rgba(28,25,23,.16); } @media (min-width: 920px) { body[data-nav="1"] .main-nav ul { background: rgba(28,25,23,.045); border-radius: 999px; padding: 4px; gap: 2px; } body[data-nav="1"] .main-nav a:not(.btn) { border-radius: 999px; padding: 9px 16px; } body[data-nav="1"] .main-nav li:hover > a:not(.btn), body[data-nav="1"] .main-nav a:not(.btn):focus-visible { background: #fff; color: var(--brand-deep); box-shadow: 0 1px 5px rgba(28,25,23,.10); } body[data-nav="1"] .main-nav a[aria-current="page"] { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(234,88,12,.35); } body[data-nav="1"] .main-nav a[aria-current="page"]:hover { background: var(--brand-deep); color: #fff; } } /* ---------- 2 · Classic solid bar (dark) ---------- */ body[data-nav="2"] .site-header { background: #211D1A; border-bottom: 0; } body[data-nav="2"] .site-header.scrolled { background: #1b1815; box-shadow: 0 6px 22px rgba(0,0,0,.28); } @media (min-width: 920px) { body[data-nav="2"] .main-nav a:not(.btn) { color: #EDE7DF; } body[data-nav="2"] .main-nav a:not(.btn):hover { color: #fff; } body[data-nav="2"] .main-nav a[aria-current="page"] { color: #fff; } body[data-nav="2"] .main-nav a:not(.btn)::after { display: block; } } /* ---------- 3 · Boxed highlight (paper) ---------- */ @media (min-width: 920px) { body[data-nav="3"] .main-nav a:not(.btn) { border-radius: 8px; padding: 8px 14px; } body[data-nav="3"] .main-nav a:not(.btn):hover { background: #EFE7DB; color: #211D1A; } body[data-nav="3"] .main-nav a[aria-current="page"] { background: rgba(234,88,12,.14); color: var(--brand-deep); } } /* ---------- 4 · Bold underline tabs (paper) ---------- */ @media (min-width: 920px) { body[data-nav="4"] .main-nav a:not(.btn) { font-weight: 600; padding: 10px 6px; margin: 0 8px; color: var(--ink); } body[data-nav="4"] .main-nav a:not(.btn)::after { display: block; height: 3px; left: 0; right: 0; bottom: -1px; } body[data-nav="4"] .main-nav li:hover > a:not(.btn)::after, body[data-nav="4"] .main-nav a[aria-current="page"]::after { transform: scaleX(1); } } /* ---------- 5 · Minimal uppercase (paper + hairline) ---------- */ body[data-nav="5"] .site-header { border-bottom: 1px solid var(--line); } @media (min-width: 920px) { body[data-nav="5"] .main-nav a:not(.btn) { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 600; color: #57514B; padding: 8px 12px; } body[data-nav="5"] .main-nav a:not(.btn):hover, body[data-nav="5"] .main-nav a[aria-current="page"] { color: var(--brand); } body[data-nav="5"] .nav-cta { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; } } /* ---------- 6 · Centred logo (paper) ---------- */ @media (min-width: 920px) { body[data-nav="6"] .header-in { position: relative; } body[data-nav="6"] .brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } body[data-nav="6"] .main-nav { margin-left: 0; margin-right: auto; } body[data-nav="6"] .main-nav a:not(.btn):hover, body[data-nav="6"] .main-nav a[aria-current="page"] { color: var(--brand-deep); } } /* ---------- 7 · Orange accent line (paper) ---------- */ body[data-nav="7"] .site-header { border-top: 3px solid var(--brand); } @media (min-width: 920px) { body[data-nav="7"] .main-nav a:not(.btn) { position: relative; } body[data-nav="7"] .main-nav a:not(.btn)::after { display: block; left: 50%; right: auto; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); transform: translateX(-50%) scale(0); } body[data-nav="7"] .main-nav li:hover > a:not(.btn)::after, body[data-nav="7"] .main-nav a[aria-current="page"]::after { transform: translateX(-50%) scale(1); } body[data-nav="7"] .main-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; } } /* ---------- 8 · Dark glass (floating) ---------- */ body[data-nav="8"] .site-header { background: transparent; border-bottom: 0 !important; box-shadow: none !important; padding-top: 12px; } body[data-nav="8"] .header-in { background: rgba(33,29,26,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 8px 8px 8px 16px !important; } body[data-nav="8"] .site-header.scrolled .header-in { background: rgba(28,25,23,.82); } @media (min-width: 920px) { body[data-nav="8"] .main-nav a:not(.btn) { color: #C9C2BA; border-radius: 9px; padding: 8px 14px; } body[data-nav="8"] .main-nav a:not(.btn):hover { color: #fff; background: rgba(255,255,255,.07); } body[data-nav="8"] .main-nav a[aria-current="page"] { color: #fff; background: rgba(234,88,12,.18); box-shadow: inset 0 0 0 1px rgba(234,88,12,.6); } body[data-nav="8"] .nav-cta { background: transparent; border: 1px solid rgba(234,88,12,.85); color: #FDBA8C; } body[data-nav="8"] .nav-cta:hover { background: var(--brand); color: #fff; } } /* ---------- 9 · Tech brackets (dark) ---------- */ body[data-nav="9"] .site-header { background: #211D1A; border-bottom: 0; } body[data-nav="9"] .site-header.scrolled { background: #1b1815; box-shadow: 0 6px 22px rgba(0,0,0,.28); } @media (min-width: 920px) { body[data-nav="9"] .main-nav a:not(.btn) { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; color: #CDBFAE; padding: 8px 12px; } body[data-nav="9"] .main-nav a:not(.btn)::before { content: "[ "; opacity: 0; transition: opacity .15s ease; } body[data-nav="9"] .main-nav a:not(.btn)::after { content: " ]"; display: inline; position: static; opacity: 0; background: none; height: auto; width: auto; transform: none; transition: opacity .15s ease; } body[data-nav="9"] .main-nav a:not(.btn):hover, body[data-nav="9"] .main-nav a[aria-current="page"] { color: var(--brand); } body[data-nav="9"] .main-nav a:not(.btn):hover::before, body[data-nav="9"] .main-nav a:not(.btn):hover::after, body[data-nav="9"] .main-nav a[aria-current="page"]::before, body[data-nav="9"] .main-nav a[aria-current="page"]::after { opacity: 1; } body[data-nav="9"] .nav-cta { border-radius: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; } } /* ---------- 10 · Two tier with info strip ---------- */ .nav-topbar { display: none; } body[data-nav="10"] .nav-topbar { display: block; background: #211D1A; color: #C9C2BA; font-size: 13px; position: relative; z-index: 101; } .nav-topbar-in { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding: 8px 0; } .nav-topbar a { color: #C9C2BA; text-decoration: none; } .nav-topbar a:hover { color: var(--brand); } .nav-topbar .nav-topbar-r { margin-left: auto; display: flex; gap: 8px 18px; flex-wrap: wrap; } .nav-topbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: inline-block; margin-right: 6px; } @media (min-width: 920px) { body[data-nav="10"] .main-nav a:not(.btn):hover, body[data-nav="10"] .main-nav a[aria-current="page"] { color: var(--brand-deep); font-weight: 600; } } @media (max-width: 640px) { .nav-topbar { font-size: 12px; } .nav-topbar-in { justify-content: center; } .nav-topbar .nav-topbar-r { margin-left: 0; } }