/* ============================================================ COBRAND BOOK STORE — shared header One header for the whole Book Store. The markup is rendered by js/book-header.js so there is a single implementation rather than a hand-maintained copy in every page. Brand tokens come from the page (--navy-deep #011246, --accent, --display, --body). Nothing new is introduced here: no gradients, no extra fonts, no second palette. Layout budget < 768px logo mark + three actions + menu, 56px tall >= 768px full lockup + inline search, 72px tall Every control is at least 44x44 to stay tappable, using padding rather than size so the icons keep their drawn dimensions. ============================================================ */ /* The placeholder must generate no box of its own. A sticky element only sticks while its containing block is in view, and #cbHeader is exactly as tall as the header, so without this the bar would scroll away immediately instead of staying put. display:contents makes the header, scrim and drawer behave as direct children of . Where it is unsupported the header simply scrolls normally. */ #cbHeader{ display:contents; } .bh{ position:sticky; top:0; z-index:100; /* White bar. The content on it is COBRAND navy, and the only white left is inside the amber pip and the avatar disc, where it sits on a dark fill. */ background:#FFFFFF; color:var(--navy-deep,#011246); border-bottom:1px solid var(--line,#DDE4EE); } .bh-in{ display:flex; align-items:center; gap:10px; height:56px; padding:0 14px; max-width:1280px; margin:0 auto; /* anchors the account dropdown to the row rather than to the viewport edge, so it stays under the avatar above 1280px */ position:relative; } /* ---------- logo ---------- */ .bh-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex:none; min-width:0; } .bh-mark{ width:32px; height:32px; object-fit:contain; flex:none; display:block; } /* The identity shows from 390px up. It used to appear only from 768px, so every phone got a bare mark and nothing said which part of COBRAND this was. Below 390px the mark still stands alone — there is genuinely no room beside four controls at that width. */ .bh-lockup{ display:block; line-height:1.15; min-width:0; } .bh-word{ display:block; font:800 .92rem/1 var(--display,sans-serif); letter-spacing:.02em; color:var(--navy-deep,#011246); } .bh-sub{ display:block; font:600 .54rem/1.25 var(--body,sans-serif); letter-spacing:.07em; text-transform:uppercase; /* Amber on white is 2.1:1, so the descriptor takes the same navy as the wordmark at a lighter weight. Amber stays on the cart pip and the focus ring, where it sits on a dark fill. */ color:var(--cobalt,#0B2C96); white-space:nowrap; } /* ---------- search ---------- */ .bh-search{ display:none; position:relative; flex:1 1 auto; min-width:0; } .bh-search > svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted,#5B6B85); pointer-events:none; } .bh-search input{ width:100%; height:40px; padding:0 64px 0 38px; background:var(--soft-white,#F5F7FA); border:1px solid var(--line,#DDE4EE); border-radius:99px; color:var(--charcoal,#1F2937); font:400 .9rem var(--body,sans-serif); } .bh-search input::placeholder{ color:var(--muted,#5B6B85); } .bh-search input:focus{ outline:none; border-color:var(--royal,#1D4EBD); background:#fff; box-shadow:0 0 0 3px var(--royal-soft,#E8EEFB); } .bh-esc{ position:absolute; right:8px; top:50%; transform:translateY(-50%); background:var(--line,#DDE4EE); border:0; border-radius:7px; color:var(--cobalt,#0B2C96); font:600 .7rem var(--body,sans-serif); padding:4px 8px; cursor:pointer; } .bh-esc:hover{ background:#C9D4E6; color:var(--navy-deep,#011246); } /* results panel: shared by desktop and the mobile search row */ .bh-results{ display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; color:var(--cobalt,#0B2C96); border-radius:14px; box-shadow:0 20px 44px rgba(1,18,70,.28); max-height:min(60vh,420px); overflow:auto; padding:6px; z-index:120; } .bh-search.is-open .bh-results{ display:block; } .bh-grp{ margin:8px 10px 4px; font:600 .62rem var(--body,sans-serif); letter-spacing:.18em; text-transform:uppercase; color:var(--muted,#5B6B85); } .bh-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; text-decoration:none; color:inherit; } .bh-item:hover, .bh-item:focus-visible{ background:var(--soft-white,#F5F7FA); outline:none; } .bh-ico{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--soft-white,#F5F7FA); font-size:1rem; } .bh-item b{ display:block; font:600 .9rem var(--body,sans-serif); line-height:1.3; } .bh-item small{ display:block; font-size:.76rem; color:var(--muted,#5B6B85); line-height:1.4; } .bh-none{ padding:24px 16px; text-align:center; color:var(--muted,#5B6B85); font-size:.9rem; } /* ---------- actions ---------- */ .bh-actions{ display:flex; align-items:center; gap:2px; margin-left:auto; flex:none; } .bh-btn{ display:grid; place-items:center; min-width:44px; min-height:44px; /* tap target, icon stays 21px */ background:none; border:0; padding:0; cursor:pointer; color:var(--cobalt,#0B2C96); position:relative; border-radius:10px; } .bh-btn:hover{ background:var(--royal-soft,#E8EEFB); } .bh-btn:focus-visible{ outline:2px solid var(--accent,#F4A000); outline-offset:2px; } .bh-pip{ position:absolute; top:5px; right:5px; min-width:17px; height:17px; padding:0 4px; border-radius:99px; background:var(--accent,#F4A000); color:#04122e; font:700 .66rem/17px var(--body,sans-serif); text-align:center; } /* ---------- one auth control ---------- */ /* The hidden attribute must win. .bh-login and .bh-acct are display:grid, and an author rule outranks the user agent's [hidden]{display:none} — so setting .hidden in JS did nothing and a signed-out visitor saw "Log in" AND the avatar side by side (a signed-in one would have seen both too). Same fix, and same reason, as .site-header [data-role][hidden] in cobrand-responsive.css. */ .bh [hidden]{ display:none !important; } /* Hidden until js/auth-state.js has resolved the session, so the row never flickers between "Log in" and the avatar. visibility keeps the space reserved, so nothing shifts when the answer lands. */ html:not([data-auth-ready]) .bh-auth{ visibility:hidden; } .bh-auth{ display:flex; align-items:center; flex:none; } .bh-login{ display:grid; place-items:center; min-height:44px; padding:0 12px; color:var(--cobalt,#0B2C96); text-decoration:none; white-space:nowrap; font:600 .88rem var(--body,sans-serif); border-radius:10px; } .bh-login:hover{ background:var(--royal-soft,#E8EEFB); } .bh-acct{ display:grid; place-items:center; min-width:44px; min-height:44px; background:none; border:0; padding:0; cursor:pointer; border-radius:99px; } .bh-acct:focus-visible{ outline:2px solid var(--accent,#F4A000); outline-offset:2px; } .bh-av{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; overflow:hidden; flex:none; background:var(--navy-deep,#011246); color:#fff; font:700 .8rem/1 var(--body,sans-serif); letter-spacing:.01em; border:2px solid var(--line,#DDE4EE); } .bh-av img{ width:100%; height:100%; object-fit:cover; display:block; } /* ---------- account dropdown: identity, not navigation ---------- */ .bh-pop{ position:absolute; top:calc(100% - 4px); right:12px; width:min(268px,calc(100vw - 24px)); background:#fff; color:var(--cobalt,#0B2C96); border-radius:14px; box-shadow:0 20px 44px rgba(1,18,70,.28); padding:6px; z-index:130; } .bh-pop[hidden]{ display:none; } .bh-pop-id{ display:flex; align-items:center; gap:11px; padding:12px 12px 13px; border-bottom:1px solid var(--line,#DDE4EE); margin-bottom:6px; } .bh-pop-id .bh-av{ width:40px; height:40px; font-size:.92rem; /* Stays navy-on-white like the bar version. It used to be given a soft-white fill, which paired with the white initials the bar avatar now uses and produced white on near-white. */ background:var(--navy-deep,#011246); color:#fff; border-color:var(--line,#DDE4EE); } .bh-pop-id span{ min-width:0; } .bh-pop-id b{ display:block; font:600 .9rem var(--body,sans-serif); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bh-pop-id small{ display:block; font-size:.76rem; color:var(--muted,#5B6B85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bh-pop a, .bh-pop button{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 12px; border:0; background:none; font:500 .9rem var(--body,sans-serif); color:inherit; text-decoration:none; border-radius:10px; cursor:pointer; text-align:left; } .bh-pop a:hover, .bh-pop button:hover{ background:var(--soft-white,#F5F7FA); } .bh-pop .bh-out{ color:#B91C1C; } /* ---------- menu drawer: navigation, not identity ---------- */ .bh-scrim{ position:fixed; inset:0; background:rgba(1,18,70,.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:110; } .bh-scrim.on{ opacity:1; pointer-events:auto; } .bh-drawer{ position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw); background:#fff; color:var(--cobalt,#0B2C96); z-index:115; transform:translateX(100%); transition:transform .24s ease; display:flex; flex-direction:column; padding:10px; box-shadow:-18px 0 44px rgba(1,18,70,.22); } .bh-drawer.on{ transform:translateX(0); } .bh-drawer-top{ display:flex; align-items:center; justify-content:space-between; padding:6px 6px 12px; border-bottom:1px solid var(--line,#DDE4EE); margin-bottom:8px; } .bh-drawer-top b{ font:700 .72rem var(--body,sans-serif); letter-spacing:.16em; text-transform:uppercase; color:var(--muted,#5B6B85); } .bh-drawer-top button{ min-width:44px; min-height:44px; display:grid; place-items:center; background:none; border:0; cursor:pointer; color:inherit; border-radius:10px; } .bh-drawer nav{ display:flex; flex-direction:column; overflow:auto; } .bh-drawer nav a, .bh-drawer nav button{ display:flex; align-items:center; gap:11px; min-height:48px; padding:0 12px; border:0; background:none; text-align:left; cursor:pointer; font:500 .96rem var(--body,sans-serif); color:inherit; text-decoration:none; border-radius:10px; } .bh-drawer nav a:hover, .bh-drawer nav button:hover{ background:var(--soft-white,#F5F7FA); } .bh-drawer nav a.is-current{ color:var(--navy-deep,#011246); font-weight:700; } @media (prefers-reduced-motion:reduce){ .bh-drawer, .bh-scrim{ transition:none; } } /* ---------- mobile search row ---------- */ /* Opens under the bar instead of squeezing the field into it, so the logo and the auth control can never be pushed off-screen. */ .bh-mobile-search{ display:none; padding:0 14px 12px; background:#FFFFFF; border-bottom:1px solid var(--line,#DDE4EE); } .bh-mobile-search.on{ display:block; } .bh-mobile-search .bh-search{ display:block; } /* ============================================================ >= 768px: the full lockup and the inline search appear ============================================================ */ @media (min-width:768px){ .bh-in{ height:72px; padding:0 20px; gap:18px; } .bh-mark{ width:40px; height:40px; } .bh-word{ font-size:1.02rem; } .bh-sub{ font-size:.62rem; letter-spacing:.11em; } .bh-search{ display:block; max-width:520px; margin-inline:auto; } .bh-actions{ gap:4px; } .bh-av{ width:36px; height:36px; font-size:.86rem; } .bh-only-mobile{ display:none; } .bh-mobile-search{ display:none !important; } } /* Phones: trim the gaps rather than the controls, so nothing overflows and nothing drops below its 44px tap target. The identity is what makes this tight. At 390px the row has to carry the mark, COBRAND, "Book Store & Publishing", and four controls. Measured at 390 with the desktop spacing it overflowed, so the gaps, the padding and the two type sizes all come down a step here. It fits from 390px up. */ @media (max-width:767px){ .bh-in{ padding:0 10px; gap:7px; } .bh-btn{ min-width:42px; } .bh-login{ padding:0 8px; font-size:.84rem; } .bh-word{ font-size:.86rem; } .bh-sub{ font-size:.5rem; letter-spacing:.04em; } } /* Below 390px the mark stands alone. Four controls plus the identity genuinely do not fit at 360px, and the alternative is truncating the descriptor or shrinking it past readable. */ @media (max-width:389px){ .bh-in{ gap:6px; } .bh-lockup{ display:none; } } /* The header carries its own visually-hidden helper rather than relying on a .skip rule, which only nine of the seventeen pages define in their inline styles. */ .bh-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* ============================================================ DARK MODE The site has a real dark theme — cobrand-ui.js puts data-theme="dark" on , and cobrand-responsive.css flips the shared tokens for it: --cobalt becomes #A9C4FF, --muted becomes #A9B8D6, --white becomes #0F1524. This header was written after that theme and never taught about it. Four of its surfaces are hardcoded `background:#fff` while their text colour comes from a token. In dark mode the surface therefore stayed white and the text turned pale, which measured: drawer link #A9C4FF on #FFFFFF = 1.75:1 (needs 4.5) drawer label #A9B8D6 on #FFFFFF = 2.00:1 (needs 4.5) Pale blue on white. Unreadable, and only in dark mode, which is why it survived review on a light screen. The fix pairs each of those surfaces with a dark one and light text, using the same values the rest of the dark theme already uses, so the header matches the pages around it instead of being a white rectangle in a dark UI. ============================================================ */ /* The bar itself. In light mode it is white, as designed. In dark mode a white bar would be the only bright rectangle on the page and would undo the contrast work, so it takes the same dark surface as the panels below it. */ :root[data-theme="dark"] .bh{ background:#111827; color:#EAF0FF; border-bottom-color:#2C3752; } :root[data-theme="dark"] .bh-word, :root[data-theme="dark"] .bh-sub{ color:#EAF0FF; } :root[data-theme="dark"] .bh-sub{ color:#A9C4FF; } :root[data-theme="dark"] .bh-btn, :root[data-theme="dark"] .bh-login{ color:#EAF0FF; } :root[data-theme="dark"] .bh-btn:hover, :root[data-theme="dark"] .bh-login:hover{ background:#1E2B4C; } :root[data-theme="dark"] .bh-search input{ background:#1B2236; border-color:#2C3752; color:#EEF2FA; } :root[data-theme="dark"] .bh-search input::placeholder{ color:#8494B4; } :root[data-theme="dark"] .bh-search > svg{ color:#8494B4; } :root[data-theme="dark"] .bh-esc{ background:#2C3752; color:#EAF0FF; } :root[data-theme="dark"] .bh-mobile-search{ background:#111827; border-bottom-color:#2C3752; } :root[data-theme="dark"] .bh-av{ border-color:#2C3752; } :root[data-theme="dark"] .bh-results, :root[data-theme="dark"] .bh-pop, :root[data-theme="dark"] .bh-drawer{ background:#151B2B; color:#EAF0FF; border:1px solid #2C3752; } /* Search results: headings, rows and the empty state. */ :root[data-theme="dark"] .bh-group{ color:#A9B8D6; } :root[data-theme="dark"] .bh-item{ color:#EAF0FF; } :root[data-theme="dark"] .bh-item small{ color:#B6C5E2; } :root[data-theme="dark"] .bh-item:hover, :root[data-theme="dark"] .bh-item:focus-visible{ background:#1E2B4C; } :root[data-theme="dark"] .bh-none{ color:#B6C5E2; } /* Account dropdown. */ :root[data-theme="dark"] .bh-pop-id b{ color:#F3F7FF; } :root[data-theme="dark"] .bh-pop-id small{ color:#B6C5E2; } :root[data-theme="dark"] .bh-pop a, :root[data-theme="dark"] .bh-pop button{ color:#EAF0FF; } :root[data-theme="dark"] .bh-pop a:hover, :root[data-theme="dark"] .bh-pop button:hover{ background:#1E2B4C; } /* Sign out stays red, but the light-mode red is too dark on #151B2B. */ :root[data-theme="dark"] .bh-pop .bh-out{ color:#FF9A9A; } /* Menu drawer. */ :root[data-theme="dark"] .bh-drawer-top{ border-bottom-color:#2C3752; } :root[data-theme="dark"] .bh-drawer-top b{ color:#B6C5E2; } :root[data-theme="dark"] .bh-drawer nav a, :root[data-theme="dark"] .bh-drawer nav button{ color:#EAF0FF; } :root[data-theme="dark"] .bh-drawer nav a:hover, :root[data-theme="dark"] .bh-drawer nav button:hover{ background:#1E2B4C; } :root[data-theme="dark"] .bh-drawer nav a.is-current{ color:#FFFFFF; } /* The avatar circle is a white disc with navy initials. That pairing is correct on the navy bar in both themes, so it is left alone — it is listed here only so the next person does not "fix" it. */