/* * Findar — site header * --------------------------------------------------------------------------- * The single stylesheet for the header. It consumes design tokens and declares * no colour, size, radius or shadow of its own. * * There is no `!important` in this file, and there must never be one. If a rule * here loses to another stylesheet, the other stylesheet is the bug. * * DESKTOP IS THE AUTHORITY, NOT AN ENLARGED PHONE. * The desktop bar is a four-column grid with inline navigation and a search * field that lives in the bar, following the established desktop header layout. * The mobile bar is a different composition — menu, brand, search — with * navigation in a drawer. * * The mobile presentation below is deliberately minimal and PROVISIONAL: it is * correct and compact, but it is a placeholder pending the mobile mockups. Do * not treat it as the finished mobile design. */ /* --------------------------------------------------------------------------- * Mount * * The mount carries the legacy id so existing scripts can still measure the * header, and so page-scoped legacy rules keep controlling where the header is * hidden. It owns positioning only; it paints nothing. * ------------------------------------------------------------------------ */ .findar-header-mount { position: fixed; inset: 0 0 auto 0; z-index: var(--findar-z-header); } /* A fixed element ignores the margin WordPress puts on for the * admin bar, so it would sit underneath it. */ body.admin-bar .findar-header-mount { top: 32px; } @media (max-width: 782px) { body.admin-bar .findar-header-mount { top: 46px; } } /* The component sizes itself. It does not assume the surrounding theme applies * a global border-box reset, because relying on that would make the header's * geometry depend on a stylesheet it does not own. */ .findar-header-mount, .findar-header-mount *, .findar-header-mount *::before, .findar-header-mount *::after, .findar-header__drawer, .findar-header__drawer *, .findar-header__drawer *::before, .findar-header__drawer *::after { box-sizing: border-box; } /* --------------------------------------------------------------------------- * Bar * ------------------------------------------------------------------------ */ .findar-header { /* Wins over the inherited font-family the legacy sheet forces on the mount. * A declaration on the element always beats an inherited value, whatever the * parent's specificity. */ font-family: var(--findar-font); background: var(--findar-surface); border-bottom: 1px solid var(--findar-border); } .findar-header__inner { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--findar-space-3); height: var(--findar-header-height-mobile); max-width: var(--findar-container-wide); margin-inline: auto; padding-inline: var(--findar-space-4); } /* Without the search there is no third column to fill, so the brand takes the * remaining room instead of leaving a gap. Desktop overrides this below. */ .findar-header--no-search .findar-header__inner { grid-template-columns: auto 1fr; } /* --------------------------------------------------------------------------- * Brand * ------------------------------------------------------------------------ */ .findar-header__brand { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--findar-blue); text-decoration: none; } .findar-header__logo { display: block; width: 34px; height: 34px; max-width: none; object-fit: contain; flex: 0 0 auto; } .findar-header__brand-text { display: block; color: #1239b8; font-family: var(--findar-font); font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -0.025em; white-space: nowrap; } /* --------------------------------------------------------------------------- * Menu button — mobile only * ------------------------------------------------------------------------ */ .findar-header__menu { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: var(--findar-radius-sm); background: transparent; color: var(--findar-ink); cursor: pointer; } .findar-header__menu:hover { background: var(--findar-surface-hover); } .findar-header__menu-bar { display: block; height: 2px; border-radius: var(--findar-radius-pill); background: currentColor; } /* --------------------------------------------------------------------------- * Primary navigation — inline on desktop, hidden on mobile where the drawer * carries it instead. * ------------------------------------------------------------------------ */ .findar-header__nav { display: none; align-items: center; gap: var(--findar-space-1); } .findar-header__nav-link { position: relative; padding: var(--findar-space-2) var(--findar-space-3); border-radius: var(--findar-radius-sm); color: var(--findar-ink-secondary); font-size: var(--findar-text-base); font-weight: var(--findar-weight-medium); line-height: var(--findar-leading-snug); text-decoration: none; white-space: nowrap; transition: color var(--findar-duration-fast) var(--findar-ease), background-color var(--findar-duration-fast) var(--findar-ease); } .findar-header__nav-link:hover { background: var(--findar-surface-hover); color: var(--findar-ink); } .findar-header__nav-link[aria-current="page"] { color: var(--findar-ink); font-weight: var(--findar-weight-semibold); } /* --------------------------------------------------------------------------- * Search * ------------------------------------------------------------------------ */ .findar-header__search { position: relative; display: flex; align-items: center; min-width: 0; } .findar-header__search-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .findar-header__search-icon { position: absolute; left: var(--findar-space-3); display: flex; color: var(--findar-ink-muted); pointer-events: none; } .findar-header__search-icon svg { width: 18px; height: 18px; } .findar-header__search-input { width: 100%; height: 40px; padding: 0 var(--findar-space-3) 0 var(--findar-space-10); border: 1px solid var(--findar-border); border-radius: var(--findar-radius-pill); background: var(--findar-surface-sunken); color: var(--findar-ink); font-family: inherit; font-size: var(--findar-text-sm); transition: border-color var(--findar-duration-fast) var(--findar-ease), background-color var(--findar-duration-fast) var(--findar-ease), box-shadow var(--findar-duration-fast) var(--findar-ease); } .findar-header__search-input::placeholder { color: var(--findar-ink-muted); } .findar-header__search-input:hover { border-color: var(--findar-border-strong); } .findar-header__search-input:focus { outline: none; border-color: var(--findar-blue); background: var(--findar-surface); box-shadow: var(--findar-focus-ring); } /* Remove the browser's own clear affordance so the field keeps one language. */ .findar-header__search-input::-webkit-search-cancel-button { appearance: none; } /* --------------------------------------------------------------------------- * Actions — desktop only. On mobile these live in the drawer. * ------------------------------------------------------------------------ */ .findar-header__actions { display: none; align-items: center; gap: var(--findar-space-2); } .findar-header__account, .findar-header__publish { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding-inline: var(--findar-space-5); border-radius: var(--findar-radius-md); font-size: var(--findar-text-sm); font-weight: var(--findar-weight-semibold); line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color var(--findar-duration-fast) var(--findar-ease), border-color var(--findar-duration-fast) var(--findar-ease), color var(--findar-duration-fast) var(--findar-ease); } .findar-header__account { border: 1px solid var(--findar-border-strong); background: var(--findar-surface); color: var(--findar-ink); } .findar-header__account:hover { border-color: var(--findar-ink-muted); background: var(--findar-surface-hover); } .findar-header__publish { border: 1px solid var(--findar-blue); background: var(--findar-blue); color: var(--findar-ink-inverse); } .findar-header__publish:hover { border-color: var(--findar-blue-hover); background: var(--findar-blue-hover); } .findar-header__publish:active { border-color: var(--findar-blue-active); background: var(--findar-blue-active); } /* --------------------------------------------------------------------------- * Drawer — mobile navigation * ------------------------------------------------------------------------ */ .findar-header__backdrop { position: fixed; inset: 0; z-index: var(--findar-z-drawer); background: rgba(7, 18, 38, 0.45); } .findar-header__backdrop[hidden] { display: none; } .findar-header__drawer { position: fixed; inset: 0 auto 0 0; z-index: var(--findar-z-drawer); display: flex; flex-direction: column; width: min(320px, 86vw); padding: var(--findar-space-4); background: var(--findar-surface); box-shadow: var(--findar-shadow-lg); overflow-y: auto; overscroll-behavior: contain; } .findar-header__drawer[hidden] { display: none; } .findar-header__drawer-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--findar-space-4); border-bottom: 1px solid var(--findar-border-subtle); } .findar-header__drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--findar-radius-sm); background: transparent; color: var(--findar-ink); cursor: pointer; } .findar-header__drawer-close:hover { background: var(--findar-surface-hover); } .findar-header__drawer-close svg { width: 20px; height: 20px; } .findar-header__drawer-nav { display: flex; flex-direction: column; padding-block: var(--findar-space-2); } .findar-header__drawer-link { padding: var(--findar-space-3) var(--findar-space-2); border-radius: var(--findar-radius-sm); color: var(--findar-ink); font-size: var(--findar-text-md); font-weight: var(--findar-weight-medium); text-decoration: none; } .findar-header__drawer-link:hover { background: var(--findar-surface-hover); } .findar-header__drawer-link[aria-current="page"] { color: var(--findar-blue); font-weight: var(--findar-weight-semibold); } .findar-header__drawer-foot { display: flex; flex-direction: column; gap: var(--findar-space-2); margin-top: auto; padding-top: var(--findar-space-4); border-top: 1px solid var(--findar-border-subtle); } .findar-header__publish--block { width: 100%; height: 44px; } .findar-header__drawer-account { display: inline-flex; align-items: center; justify-content: center; height: 44px; border: 1px solid var(--findar-border-strong); border-radius: var(--findar-radius-pill); color: var(--findar-ink); font-size: var(--findar-text-sm); font-weight: var(--findar-weight-semibold); text-decoration: none; } .findar-header__drawer-account:hover { background: var(--findar-surface-hover); } /* Prevent the page behind the drawer from scrolling. */ body.findar-drawer-open { overflow: hidden; } /* --------------------------------------------------------------------------- * Focus — one visible treatment for every interactive element in the header. * ------------------------------------------------------------------------ */ .findar-header a:focus-visible, .findar-header button:focus-visible, .findar-header__drawer a:focus-visible, .findar-header__drawer button:focus-visible { outline: 2px solid var(--findar-blue); outline-offset: var(--findar-focus-offset); } .findar-header__search-input:focus-visible { outline: none; } /* --------------------------------------------------------------------------- * DESKTOP * * A different composition, not a wider phone: the navigation comes inline, the * search field takes the centre, and the account and publish actions sit on * the right. The menu button disappears entirely. * ------------------------------------------------------------------------ */ @media (min-width: 1024px) { .findar-header__inner { grid-template-columns: auto auto minmax(0, 1fr) auto; gap: var(--findar-space-5); height: var(--findar-header-height); padding-inline: var(--findar-space-6); } .findar-header__menu { display: none; } .findar-header__logo { width: 36px; height: 36px; } .findar-header__brand-text { font-size: 24px; } .findar-header__nav, .findar-header__actions { display: flex; } /* The search field is generous but never sprawls across a wide screen. */ .findar-header__search { max-width: 520px; justify-self: center; width: 100%; } /* * Home page: the hero owns the search, so the bar has three parts instead * of four. Equal outer columns put the navigation on the true centre line * of the viewport rather than merely between its neighbours, which is what * makes the row read as balanced against the logo and the actions. */ .findar-header--no-search .findar-header__inner { grid-template-columns: 1fr auto 1fr; } .findar-header--no-search .findar-header__nav { justify-self: center; gap: var(--findar-space-2); } .findar-header--no-search .findar-header__actions { justify-self: end; } .findar-header__search-input { height: 42px; font-size: var(--findar-text-base); } /* The drawer is a mobile affordance. It has no business on desktop. */ .findar-header__drawer, .findar-header__backdrop { display: none; } } /* --------------------------------------------------------------------------- * Reduced motion * ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .findar-header__nav-link, .findar-header__search-input, .findar-header__account, .findar-header__publish { transition: none; } } /* ========================================================================== * V46216 — Mobile header identity authority.\n * One visual language on every standard mobile page:\n * hamburger left · Findar mark only · search when the page owns one.\n * The wordmark text remains available on desktop, but is never duplicated on mobile. * ========================================================================== */ @media (max-width: 767px) { .findar-header__inner { grid-template-columns: 42px var(--findar-mobile-logo-bubble, 46px) minmax(0, 1fr); gap: 8px; min-height: 56px; height: 56px; padding-inline: 10px; } .findar-header--no-search .findar-header__inner { grid-template-columns: 42px var(--findar-mobile-logo-bubble, 46px) minmax(0, 1fr); } .findar-header__menu { grid-column: 1; width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--findar-border); border-radius: 10px; background: var(--findar-surface); } .findar-header__brand { grid-column: 2; width: var(--findar-mobile-logo-bubble, 46px); height: var(--findar-mobile-logo-bubble, 46px); min-width: var(--findar-mobile-logo-bubble, 46px); justify-content: center; justify-self: start; gap: 0; border-radius: 12px; background: var(--findar-surface); text-decoration: none; } .findar-header__logo { width: var(--findar-mobile-logo-width, 44px); height: var(--findar-mobile-logo-height, 33px); max-width: var(--findar-mobile-logo-width, 44px); max-height: var(--findar-mobile-logo-height, 33px); object-fit: contain; } .findar-header__brand-text { display: none; } .findar-header__search { grid-column: 3; min-width: 0; } .findar-header__actions { grid-column: 3; justify-self: end; min-width: 0; } .findar-header__drawer .findar-header__brand { display: inline-flex; grid-column: auto; } .findar-header__drawer .findar-header__brand-text { display: none; } } /* ====================================================================== * V46217 — Mobile no-search header. * Homepage-style pages keep: menu left · Findar mark centre-left · Publier right. * ==================================================================== */ @media (max-width: 767px) { .findar-header--no-search .findar-header__inner { grid-template-columns: 42px var(--findar-mobile-logo-bubble, 46px) minmax(0, 1fr) auto; gap: 8px; } .findar-header--no-search .findar-header__brand { grid-column: 2; } .findar-header--no-search .findar-header__actions { display: flex; grid-column: 4; justify-self: end; min-width: 0; } .findar-header--no-search .findar-header__account { display: none; } .findar-header--no-search .findar-header__publish { display: inline-flex; min-width: 0; height: 40px; padding-inline: 12px; border-radius: 10px; font-size: 13px; font-weight: 800; } }