/** * TransferJet — masthead (M5). * * Two jobs: * 1. Promote the desktop navigation to its own full-width row, so the 2px * bottom border already carried by `.navigation > ul` (navigation.css) * spans the container edge to edge and becomes the continuous divider of * the SpeedTheme design rather than stopping at the width of the menu. * 2. Style the search field, which header.phtml renders as an inline pill at * lg and as the contents of the #search-content panel below lg. * * The row split is done here rather than in the header.phtml override because * html/header/topmenu.phtml echoes its children with no element of its own: * topmenu_mobile and topmenu_desktop are siblings inside the header's flex row, * so moving the `topmenu` block in markup would carry the mobile menu trigger * down into the second row with the desktop nav. Reordering `.navigation` * alone leaves the mobile trigger where it is. * * Structure this relies on (see the TJ notes in header.phtml): * * #header * > div.container flex flex-wrap lg:flex-nowrap ... * > div logo * > (topmenu) mobile trigger + dialog, then nav.navigation * > div#search-content panel below lg, inline field at lg * > div search toggle / customer / cart * * #header's own border and shadow are no longer removed here — they are scoped * to below lg in the template's class list, because below lg the navigation is * display:none and the header border is the only separator between the * masthead and the breadcrumbs. */ /* --------------------------------------------------------------------------- Row layout. Everything here is plain CSS on semantic classes rather than Tailwind utilities in the template. The first pass used lg:w-auto, lg:ms-auto and w-[220px]; none of them reached the compiled stylesheet, so the logo stayed full width at lg, the search field wrapped below it instead of sitting opposite, and the logo's width attribute governed on mobile at 400px. Utilities that already existed elsewhere in the theme — hidden, lg:block — worked, which is what made the failure look like three unrelated bugs. This file is layout-loaded, so these rules need a cache flush and no rebuild, and nothing here depends on a class being generated. --------------------------------------------------------------------------- */ /* Below lg: the logo owns a centred row of its own, and the desktop field is absent entirely — search below lg is the #search-content panel. */ /* Below lg the logo row is a band of its own, closed by a divider, with the menu and icon row beneath it — two rules rather than one, which is what gives the mobile header its structure. The negative inline margin cancels the container's 24px padding so the divider reaches the viewport edges; the padding puts the logo back where it was. Below lg the container has no max-width, so container width is viewport width and this bleeds cleanly. */ .tj-masthead__logo { border-bottom: 1px solid #eceae9; display: flex; /* Wider than the line it sits on, so it always wraps to a row of its own inside the container's flex-wrap. width:100% would not do it: the negative margins mean the box has to be 100% + 3rem to reach both viewport edges, and at exactly 100% it would sit 24px short on the right while still leaving room beside it. */ flex: 0 0 auto; justify-content: center; /* Enough that the menu trigger below clears the divider. At 0.5rem the outlined button sat close enough to the rule to read as attached to it. */ margin-bottom: 0.875rem; margin-inline: -1.5rem; padding: 0.875rem 1.5rem; width: calc(100% + 3rem); } /* The container's own vertical padding is handed to the two rows: the logo band owns its 14px, the menu row 8px above and below. 8, not 12, because the menu row's own controls already carry padding — the trigger 8px, the icon buttons 4px — so its measured gap and its optical gap are not the same number. Matching 14 to 14 on paper left the second row looking noticeably airier than the first. */ #header > .container { /* A hair of space above the logo band so it does not butt against whatever sits above it, and a little more below the menu row for the same reason as the logo's bottom margin. */ padding-top: 0.125rem; padding-bottom: 0.75rem; } /* The trigger is one outlined button holding both the glyph and the label. * It was a filled grey square with the label floating beside it, which read as a caption for the square rather than as part of the same control — even though both have always been inside one button. Outlining the button itself makes the target visible, and puts the masthead on the same white-and-#cfcdcb the filter trigger, the category tiles, the pagination roundels and the add-to-cart modal's secondary all use. One idea for "a control you can press", rather than a filled square here and an outline everywhere else. */ .tj-mobile-menu > button { align-items: center; background: #fff; border: 1px solid #cfcdcb; border-radius: 8px; box-sizing: border-box; display: inline-flex; gap: 0.625rem; height: 42px; padding-inline: 0.875rem; transition: background-color 0.2s ease, border-color 0.2s ease; } .tj-mobile-menu > button:hover { background: #f7f7f7; border-color: #a8a5a3; } .tj-mobile-menu > button > svg { height: 22px; width: 22px; } /* The design asks for 14px semibold. Roboto has no 600, so this is 700 — the nearest real face. 500 was tried and reads too close to the body text for the primary navigation entry point. */ .tj-mobile-menu > button > span { font-size: 15px; font-weight: 700; } /* The action glyphs, sized below lg. * This was only ever set inside the lg block, so on a phone each icon fell back to whatever its own template asked for: the search glyph 24, the cart 28 with md:h-6 md:w-6, and the account glyph whatever Hyvä's customer block ships. The cart was visibly the odd one out. 26 rather than the desktop 30: it lifts search and account without shrinking the cart enough to notice. Same reason as the desktop rule for setting it here rather than on the icons — the account glyph comes from a block this theme does not override. */ .tj-masthead__actions svg { height: 26px; width: 26px; } .tj-masthead__actions { gap: 1rem; } .tj-masthead__search { display: none; } .tj-logo { height: 35px; width: 220px; } @media (min-width: 1024px) { /* Hyvä puts border-b and shadow on #header. On desktop the navigation row's own 2px rule is the divider and these stack a second, full-bleed line beneath it. Below lg the navigation is display:none, so there they are the only separator from the breadcrumbs and must stay. */ #header { border-bottom: 0; box-shadow: none; } /* header.phtml sets lg:flex-nowrap, which pins the children to one line. Wrapping is what lets the nav take a row of its own. */ #header > .container { flex-wrap: wrap; } /* order:1 puts the nav after the logo, the search field and the icon cluster, all of which sit at the default order:0, so the visual order is logo + search + icons, then nav — regardless of the nav appearing between them in the DOM. */ #header > .container > .navigation { /* 5px of air between the logo row and the menu. The nav links carry 20px of their own padding above the labels, so this reads as a small nudge rather than a gap of its own. */ margin-top: 5px; order: 1; width: 100%; } /* The logo stops owning a row and becomes the leftmost item. The container's own align-items:center then puts the search field and the icons on the logo's vertical centre, as the reference has them. */ .tj-masthead__logo { border-bottom: 0; flex: 0 0 auto; justify-content: flex-start; margin-bottom: 0; margin-inline: 0; padding: 0; width: auto; } /* margin-inline-start:auto pushes the field off the logo and hard against the icon cluster, so it sits opposite the logo rather than beside it. */ .tj-masthead__search { display: block; margin-inline-end: 1rem; margin-inline-start: auto; } .tj-masthead__search .tj-search { width: 384px; } /* 380 / 6.2857 is 60.45; 60 is a 0.7% squash on an SVG, not visible, and keeps the number whole. */ .tj-logo { height: 60px; width: 380px; } /* Hyvä sets py-3 on the container. More air above than below, so the row sits slightly low in its own space rather than centred in it — the navigation rule beneath already provides a hard bottom edge. */ #header > .container { padding-bottom: 1.375rem; padding-top: 2rem; } /* Sized here rather than on the icons: the cart glyph is written in header.phtml, but the account glyph comes from Hyvä's customer block, which this theme does not override. CSS reaches both. */ .tj-masthead__actions svg { height: 30px; width: 30px; } /* Two separate jobs, so two separate properties. gap is the visual one: Hyvä sets gap-1 (4px) from md up, which at 30px glyphs leaves them looking crowded together. padding is the one that matters for pointing at them. It grows each target from 30px to 44px square — the WCAG 2.5.8 size — without moving the glyph. Raising the gap alone would have separated them without making either easier to hit. Targeted by id because the two are not siblings: the cart button is a direct child of the cluster, while the account button sits inside a wrapper div from Hyvä's customer block. Both ids are stable. */ .tj-masthead__actions { gap: 0.5rem; } #customer-menu, #menu-cart-icon { padding: 0.4375rem; } /* Taller to balance the 30px glyphs. Height only — the horizontal inset and the type stay where they were, so the text does not move. */ .tj-search .form-input { height: 48px; } /* Pinned rather than stretched, so the glyph stays on the type's centre line while the hit area is a full 48 square. */ .tj-search__submit { height: 48px; inset-inline-start: 16px; width: 48px; } .tj-search .form-input { padding-inline-start: 64px; } } /* --------------------------------------------------------------------------- Search field. Measured from speedoptions.no: 393 x 38, fully rounded, filled #f2f2f2 with — taken to 48 at every width, since 38 is small for a touch target and the panel field below lg is now the one most people will use; see the note on the mobile/desktop boundary in filters.css. Originally no border, placeholder in mid grey, magnifier inset on the leading edge. .form-input is Hyvä's own input component, so everything below is an override of it rather than a fresh set of rules. Scoped to .tj-search rather than to #search-content, because there are two fields from two templates — the inline one at lg and the panel one below lg — and only the second sits inside #search-content. --------------------------------------------------------------------------- */ .tj-search .form-input { background-color: #f2f2f2; border-color: transparent; border-radius: 9999px; box-shadow: none; height: 48px; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .tj-search .form-input::placeholder { color: #8d8b89; opacity: 1; } /* The leading button is a square the size of the pill's end cap, so the magnifier's centre lands on the centre of the rounded end: 19px in at 38 tall, 24px in at 48. The templates previously carried w-11 / ps-11, a fixed 44 that matched neither. Everything is declared here, including the reset of padding and border. Sizing alone is not enough — the button inherits horizontal padding, and with border-box that shrinks the content area, so justify-content: center would centre the glyph inside an already-offset box. The inset is a deliberate departure from that geometric centre, and it has moved twice. It started at 8px: centred in the cap, a 20px glyph leaves only 9px of clearance against the pill's edge, which reads as crowded even though it is mathematically correct — the rounded edge curves in toward the glyph, so the optical gap is smaller than the measured one. 8px turned out to still read as crowded on screen, so it is 14px here and 16px at lg. The input's leading padding moves by the same amount in both cases, keeping the gap between glyph and placeholder unchanged — 56 to 62, and 58 to 64. Change one without the other and the placeholder shifts. */ .tj-search__submit { align-items: center; background: transparent; border: 0; color: #8d8b89; display: flex; height: 48px; inset-block-start: 0; inset-inline-start: 14px; justify-content: center; padding: 0; position: absolute; width: 38px; } .tj-search .form-input { padding-inline-start: 62px; } /* The focus lift, measured from the reference: the fill lightens toward white and the pill picks up a soft shadow, slightly heavier below so it reads as elevation rather than a glow. Geometry does not change — the apparent height increase on the reference is shadow bleed, not a taller field. */ .tj-search .form-input:focus { background-color: #fbfbfb; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.10); outline: none; } /* Deviation from the reference, deliberate: live has no focus ring, and a shadow alone is a weak focus indicator against a white masthead. Mouse users see exactly what the reference shows; keyboard users get something legible. Primary red rather than secondary blue: the search button's activated state already tints red, and two different accent colours on the same control reads as a mistake. Blue stays the navigation's colour. */ .tj-search .form-input:focus-visible { outline: 2px solid var(--color-primary); /* Negative, so the ring sits just inside the pill's edge rather than floating around it. On a fully rounded field an outset ring reads as a second, detached shape. */ outline-offset: -2px; } /* Chrome and Safari draw their own clear affordance on type="search", which collides with the pill's trailing radius. */ .tj-search .form-input::-webkit-search-decoration, .tj-search .form-input::-webkit-search-cancel-button { -webkit-appearance: none; }