/**
* Header and footer chrome.
*
* The only global stylesheet in the theme; everything else is per-block CSS
* loaded on demand.
*
* Every measurement here was read off the live Shopify site so the two match:
* a 130x40 logo, a 600x44 search pill with a 2px green border and a 65px
* radius holding a 60x34 round submit, and a 60px nav row ruled underneath.
*/
/* The checkmark every custom checkbox on the shop draws once checked — the
price filter, the account pages. Global because this sheet is the one
loaded on every page, and a checkbox can turn up on more than one of the
sheets that load conditionally. */
:root {
--gp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
}
/* ---------- page ---------- */
/*
* Keep the scrollbar's column reserved whether or not the page is scrollable.
*
* Every panel on the site that covers the page — the filter drawer, the cart
* drawer, WooCommerce's gallery modal — locks the page behind it with
* overflow: hidden on the body. That takes the scrollbar away for as long as
* the panel is open and gives it back on close, and the 15px it occupies is
* 15px the content did not have a moment earlier: at 991 the grid's cards go
* 305 wide, then 310, then 305 again. Every card is laid out and repainted
* twice, which is the flash as a drawer closes.
*
* Reserving the column permanently means locking the page changes nothing
* about its width. Where scrollbar-gutter is not supported — Safari before
* 18.2 — the behaviour is what it was.
*/
html { scrollbar-gutter: stable; }
/* ---------- header ---------- */
/* The header is a top-level group, so it picks up the root padding. That does
not belong here: the bar and the nav row set their own. The block gap
between the two rows is zeroed on the block itself — a rule here ties with
core's on specificity and loses on source order.
The shadow is what lifts the whole header off the page on the live site —
the nav row itself carries only a hairline along its top edge, nothing
underneath. */
.gp-header {
/* Core gives any group with a background 1.25em 2.375em of padding. The
block half was already dropped here; the inline half was insetting the
whole header by 38px, which took the nav row's hairline with it — live
runs that line the full width of the window. The rows inside are a
centred 1280, and removing symmetric padding does not move a centred
fixed width, so only the line changes. */
padding: 0;
box-shadow: 0 1px 5px rgba(4, 4, 4, 0.1);
}
.gp-header__row {
gap: var(--wp--preset--spacing--50);
}
.gp-header__logo { flex: none; margin: 0; }
.gp-header__logo img {
display: block;
inline-size: 130px;
block-size: auto;
}
/* ---------- header search ---------- */
.gp-header__search {
flex: 1 1 400px;
max-inline-size: 600px;
margin: 0;
}
.gp-header__search .wp-block-search__inside-wrapper {
position: relative;
padding: 0;
border: 2px solid var(--wp--preset--color--brand-green);
border-radius: 65px;
background: var(--wp--preset--color--surface-alt);
}
.gp-header__search .wp-block-search__input {
block-size: 40px;
padding-inline: 20px 80px;
border: 0;
border-radius: 65px;
background: transparent;
font-size: var(--wp--preset--font-size--sm);
}
.gp-header__search .wp-block-search__input:focus { outline: none; }
/* Live's search pill does not mark focus: measured with the caret in the
field, the border stays where it was and nothing is drawn around it. The
ring we had was ours alone. */
.gp-header__search .wp-block-search__inside-wrapper:focus-within {
outline: none;
}
.gp-header__search .wp-block-search__button {
position: absolute;
inset-block-start: 50%;
inset-inline-end: 6px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 60px;
block-size: 34px;
margin: 0;
padding: 0;
border: 0;
border-radius: 9999px;
background: var(--wp--preset--color--brand-green);
color: #fff;
cursor: pointer;
}
/* The live search button holds its fill under the pointer. */
/* Core draws a filled magnifier; the live site uses a stroked one, so core's
is hidden and the button paints the stroked glyph as a mask instead. */
.gp-header__search .wp-block-search__button svg { display: none; }
.gp-header__search .wp-block-search__button::after {
content: "";
inline-size: 18px;
block-size: 18px;
background: currentColor;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* ---------- navigation ---------- */
.gp-header__navbar {
--gp-nav-height: 60px;
border-block-start: 1px solid rgba(4, 4, 4, 0.08);
}
.gp-header__navrow {
gap: var(--wp--preset--spacing--40);
min-block-size: var(--gp-nav-height);
}
.gp-header__nav { flex: 1 1 auto; }
/* Column and row apart: 16px reads well between items on one line, but once
the menu runs to two the same figure leaves a gap wider than the rows it
separates. */
.gp-header__nav .wp-block-navigation__container {
column-gap: var(--wp--preset--spacing--40);
row-gap: var(--wp--preset--spacing--20);
}
.gp-header__nav .wp-block-navigation-item__content {
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--nav);
font-size: 14px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
/* Live dims the menu word to three-quarter ink under the pointer — it does
not turn green, and it does not underline. */
.gp-header__nav .wp-block-navigation-item__content:hover {
color: rgba(4, 4, 4, 0.75);
text-decoration: none;
}
.gp-header__nav .current-menu-item > .wp-block-navigation-item__content {
color: var(--wp--preset--color--brand-green);
}
/* The bundles item is the one coloured entry on the live site, with a tag
glyph ahead of the label. */
.gp-header__nav .gp-nav__bundle > .wp-block-navigation-item__content {
color: var(--wp--preset--color--brand-orange);
}
.gp-header__nav .gp-nav__bundle > .wp-block-navigation-item__content::before {
content: "";
display: inline-block;
inline-size: 1.15em;
block-size: 1.15em;
margin-inline-end: 0.4em;
vertical-align: -0.2em;
background: currentColor;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.gp-header__nav .wp-block-navigation__submenu-container {
min-inline-size: 260px;
padding-block: 0.5rem;
border: 1px solid var(--wp--preset--color--border);
border-radius: 8px;
background: var(--wp--preset--color--surface);
box-shadow: 0 10px 20px rgba(4, 4, 4, 0.12);
}
.gp-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding: 0.5rem 1rem;
white-space: normal;
}
/* A dropdown near the right edge would hang past it. Core leaves the panel in
the layout while it is hidden, so that overflow widened the page even with
the menu closed — a horizontal scrollbar on every tablet. The last two items
are the ones close enough to the edge to need it, so their panels open
leftward. */
.gp-header__nav .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(-n+2) .wp-block-navigation__submenu-container {
inset-inline-start: auto;
inset-inline-end: 0;
}
/* Inside the mobile overlay the submenu is part of the list, not a dropdown:
the card, its rule and its shadow would be a panel floating in a panel. */
.gp-header__nav .is-menu-open .wp-block-navigation__submenu-container {
min-inline-size: 0;
padding-block: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.gp-header__nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
padding-inline: 0;
}
/* ---------- nav row, right-hand side ---------- */
.gp-header__navlinks {
flex: none;
gap: var(--wp--preset--spacing--40);
}
.gp-header__tracking { margin: 0; white-space: nowrap; }
.gp-header__find { margin: 0; }
.gp-header__tracking a,
.gp-header__find .gp-book-request__open {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0;
border: 0;
background: none;
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--nav);
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
/* Live's two utility entries — order tracking and "বই খুঁজে পাচ্ছেন না?" —
hold their ink and draw no rule under the pointer. */
.gp-header__tracking a:hover,
.gp-header__find .gp-book-request__open:hover {
color: var(--wp--preset--color--ink);
text-decoration: none;
}
/* Nothing in the header underlines on hover on live, and theme.json gives
every link that underline by default. The logo is a picture besides. */
.gp-header a:hover,
.gp-header .custom-logo-link:hover { text-decoration: none; }
.gp-header__tracking a::before,
.gp-header__find .gp-book-request__open::before {
content: "";
flex: none;
inline-size: 20px;
block-size: 20px;
background: currentColor;
}
.gp-header__find .gp-book-request__open::before {
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.gp-header__tracking a::before {
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* Between here and the mobile layout the search shares the top row, as it does
on the live site at tablet width — dropping it to its own row is what made
our header a third taller than theirs. */
@media (max-width: 1100px) {
.gp-header__search { flex-basis: 260px; }
}
@media (max-width: 640px) {
.gp-header__row { flex-wrap: wrap; }
/* Only once the top row is genuinely out of room does the search take one
of its own. */
.gp-header__search { order: 3; flex-basis: 100%; max-inline-size: none; }
}
/* The live mobile header is one row — hamburger, logo, then the wishlist and
cart — with the search below it. Ours has the hamburger in the nav row, a
sibling of the bar, so on mobile that row is lifted out of the flow and
pinned into the bar's left edge rather than restructured. Everything else
in the nav row is already hidden at this width, so what is pinned is the
hamburger alone. */
/*
* The nav row's right-hand links — "can't find a book?" and order tracking —
* leave at 1200px, which is where the live page drops them. Below that the
* menu alone fills the row, and keeping them was what pushed the row onto a
* second line all the way from 1199 down.
*
* Scoped through .gp-header to outrank the layout rule core emits for a flex
* group, which is the same specificity and comes later.
*/
@media (max-width: 1199px) {
.gp-header .gp-header__navlinks { display: none; }
}
/*
* The navigation block's own overlay breakpoint.
*
* Core turns the hamburger off at 600px and renders the menu inline above
* that; the live page keeps the hamburger up to 749px. The mobile header
* below is built around a hamburger, so the two have to agree — with core's
* 600 and the header's 782 the band between them drew a full fifteen-item
* menu absolutely positioned over the logo and the search box.
*
* Only the two rules that differ are restated; .is-menu-open is styled
* outside core's media query and already works at any width.
*/
@media (min-width: 600px) and (max-width: 749px) {
.gp-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
.gp-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 749px) {
.gp-header { position: relative; }
/* Centred on the header, not pinned 12px from its top: 12px happened to
match the logo's centre only at the one header height this was tuned
against. The header has grown since — the logo row alone is 40px — and
the hamburger stayed fixed relative to the header's edge while the logo
is centred relative to the header's height, so the two drifted apart.
Live centres its own toggle on the header the same way.
Centred with inset + margin, not a transform: this element wraps the