/* ================================================================ MAGNETIS HEADER — magnetis.ca No comp: this site is composed from the brand (the email-signature hand-off, Figma 38xDlJuZIdR6voilVCXPE4 node 83:619) and from what the current magnetis.ca already says. So the numbers here are decisions, not traced coordinates, and they are written down for the next person: band cream (base), ink (contrast) measure 1240 with a 56 gutter above 768 and a 24 gutter below — THE site measure, repeated in every band's style.css so every band's content starts on the same left edge (LESSONS.md 31). The header was the ONE band of seventeen carrying no mobile measure: at 390 its logo started at 56 where every band under it started at 24 signature 130 wide, 120 below 1024, its own aspect liens Poppins 16 in the bar, 20 in the drawer bouton red pill, 14/28 padding, radius 999 sous-menu white card, 1px accent hairline, SQUARE — this site rounds nothing but pills and circles — 268 wide, rows 44 tall; a nested list on the drawer's own cream below 1024 chevron the runtime's curated chevron-down at 16, stroke 2.25, its 44/24 pointer target overhanging the row rather than in it THREE HEIGHTS, ONE VARIABLE. --magnetis-bar-h is the header's height at rest, --magnetis-bar-h-scrolled once the page has moved, and --bar-now is whichever of the two is current. Everything that needs the number reads --bar-now; the spacer and the document's scroll-padding read --magnetis-bar-h, because the space the header reserves in the flow must NOT change (see below). WHY THE BAR IS FIXED AND THE ROOT IS A SPACER. A sticky header that changes height changes the height of a box that is still in the flow, so every pixel of the page after it moves by the difference — while the reader is scrolling, which is the one moment they would see it. The root holds a constant var(--magnetis-bar-h) of height, and the bar inside it is position: fixed, so the shrink relayouts the header alone and the document never moves. The height comes from min-block-size rather than padding for the same reason: one number, and the spacer cannot drift from the thing it is reserving space for. ================================================================ */ /* THE HEIGHTS LIVE ON :root, and that is the one thing in this file that reaches outside the block. A fixed bar covers the top of the viewport, so anything the browser scrolls INTO that viewport has to be told to stop short of it — and the property that says so, scroll-padding, only works on the scrolling box, which is the document. Core's skip link is the case that proves it: "Aller au contenu" scrolls #wp--skip-link--target to y 0, and measured before this rule it landed 76px UNDER the bar, so the one control a keyboard reader uses to escape the header delivered them behind it. Writing the number twice was the alternative; one fact in one place is worth the reach. */ :root { --magnetis-bar-h: 104px; --magnetis-bar-h-scrolled: 76px; --magnetis-logo-w: 130px; --magnetis-logo-w-scrolled: 108px; } html { /* The bar at its FULL height plus a step of air — the resting height, not the scrolled one, because an anchor jump can land either way and only the larger of the two is safe. */ scroll-padding-block-start: calc(var(--magnetis-bar-h) + var(--wp--preset--spacing--40)); } .wp-block-aisa-magnetis-ca-header { --bar-now: var(--magnetis-bar-h); box-sizing: border-box; /* The space the fixed bar occupies. Constant, on purpose. */ block-size: var(--magnetis-bar-h); } .wp-block-aisa-magnetis-ca-header.is-scrolled { --bar-now: var(--magnetis-bar-h-scrolled); } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bar { box-sizing: border-box; position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; min-block-size: var(--bar-now); display: flex; align-items: center; border-block-end: 1px solid var(--wp--preset--color--accent); transition: min-block-size 0.28s ease, box-shadow 0.28s ease; } .wp-block-aisa-magnetis-ca-header.is-scrolled .aisa-magnetis-ca-header__bar { box-shadow: 0 1px 12px rgba(33, 31, 50, 0.08); /* contrast at 8%, and no slug names a shadow */ } /* THE SITE MEASURE. Same three declarations in every band. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__inner { box-sizing: border-box; inline-size: min(1240px, 100% - 112px); margin-inline: auto; /* Two different gaps, which no single utility says — so this file owns both and render.php carries none. A gap-* on the element would tie with the row-gap below at (0,2,0) and win on source order, silently (LESSONS.md 52); the probe caught exactly that on the first build. The column gap is fluid because the desktop row did not fit: measured, it needed 1185px, so between 1024 and 1184 the nav wrapped to a second line and the phone number squeezed from 124px to 57px. */ column-gap: clamp(1.5rem, 2.5vw, 2rem); row-gap: var(--wp--preset--spacing--40); } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__logo { inline-size: var(--magnetis-logo-w); transition: inline-size 0.28s ease; } .wp-block-aisa-magnetis-ca-header.is-scrolled .aisa-magnetis-ca-header__logo { inline-size: var(--magnetis-logo-w-scrolled); } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__logo img { inline-size: 100%; block-size: auto; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__link, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__phone { line-height: 1; font-weight: 500; /* 44px of pointer without 44px of layout: negative block margins let the hit area overlap the band's own padding, so the row keeps its height. The drawer wants the opposite — there the rows ARE the layout — so the negative margin is lifted inside it. */ display: inline-flex; align-items: center; min-block-size: 44px; margin-block: -14px; transition: color 0.2s ease; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__link:hover, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__phone:hover { color: var(--wp--preset--color--primary); } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__link:focus-visible, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__phone:focus-visible, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__burger:focus-visible, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__cta:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__cta { box-sizing: border-box; padding: 14px 28px; min-block-size: 44px; justify-content: center; border-radius: 999px; line-height: 1; font-weight: 500; white-space: nowrap; transition: background-color 0.2s ease; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__cta:hover { background-color: var(--wp--preset--color--contrast); } /* --- the nav's own gap ------------------------------------------------ Fluid for the same reason the inner's is: 32px between five French labels is what did not fit at 1024. Owned here rather than as a gap-* for the reason given above — a utility would tie and win. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__nav { gap: var(--wp--preset--spacing--40); } /* --- the burger ------------------------------------------------------ Three rules of ink that become an X. It is a link to the panel, not a button, so the drawer still opens with view.js deleted (:target below); view.js gives it role="button" and aria-expanded the moment it runs. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__burger { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; margin-inline-end: -10px; /* optical: the bars sit on the gutter, the hit area overhangs it */ cursor: pointer; flex: 0 0 auto; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars::before, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars::after { display: block; inline-size: 24px; block-size: 2px; background-color: currentColor; transition: transform 0.25s ease, background-color 0.2s ease, inset-block-start 0.25s ease; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars { position: relative; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars::before, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars::after { content: ""; position: absolute; inset-inline-start: 0; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars::before { inset-block-start: -7px; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars::after { inset-block-start: 7px; } .wp-block-aisa-magnetis-ca-header.is-menu-open .aisa-magnetis-ca-header__bars { background-color: transparent; } .wp-block-aisa-magnetis-ca-header.is-menu-open .aisa-magnetis-ca-header__bars::before { inset-block-start: 0; transform: rotate(45deg); } .wp-block-aisa-magnetis-ca-header.is-menu-open .aisa-magnetis-ca-header__bars::after { inset-block-start: 0; transform: rotate(-45deg); } /* ================================================================== ABOVE 1024 — the row the site was designed as. The panel is display: contents, so __nav and __end are flex children of __inner and the layout is the one that shipped. A plain div with no semantics is the one safe place for display: contents; on an element that carries a role it drops that role from the tree. ================================================================== */ @media (min-width: 1024px) { .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__panel { display: contents; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__nav { gap: clamp(1.25rem, 2.2vw, 2rem); } } /* The phone is the first thing to go when the row is tight: the CTA is the action, and the number is in the footer of every page. Measured: with it, the row needs 1185px; without it, 1024 fits with 38px to spare. It comes back at 1200 — not 1185 — so the fit is not decided on the last pixel. It is always present in the drawer. */ @media (min-width: 1024px) and (max-width: 1199px) { .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__phone { display: none; } } /* ================================================================== BELOW 1024 — the drawer. Not "the nav wraps to its own row", which is what this file said before and which measured 274px of header on a 390px screen: three rows of links and the CTA on a line of its own, a quarter of the viewport spent on chrome above the fold. ================================================================== */ @media (max-width: 1023px) { :root { --magnetis-bar-h: 77px; --magnetis-bar-h-scrolled: 65px; --magnetis-logo-w: 120px; --magnetis-logo-w-scrolled: 104px; } /* The site's mobile measure, which this band did not have. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__inner { inline-size: min(1240px, 100% - 48px); } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__panel { box-sizing: border-box; position: fixed; /* Below the bar at its CURRENT height, so the sheet follows the shrink instead of arguing with it. Same variable, one source. */ inset-block-start: var(--bar-now); inset-block-end: 0; inset-inline: 0; z-index: 1; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--60); padding: var(--wp--preset--spacing--60) 24px var(--wp--preset--spacing--70); background-color: var(--wp--preset--color--base); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateY(-8px); /* visibility is delayed on the way out only, so the sheet is not focusable the instant it starts leaving but still animates. */ transition: opacity 0.22s ease, transform 0.22s ease, inset-block-start 0.28s ease, visibility 0s linear 0.22s; } /* Two ways in, one appearance: .is-menu-open is view.js, :target is the page with the script deleted (the burger is a real link to this id). */ .wp-block-aisa-magnetis-ca-header.is-menu-open .aisa-magnetis-ca-header__panel, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__panel:target { visibility: visible; opacity: 1; transform: none; transition: opacity 0.22s ease, transform 0.22s ease, inset-block-start 0.28s ease; } /* In the drawer the rows ARE the layout, so the hit area is real height rather than an overhang, and the links sit on the panel's left edge. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__link, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__phone { margin-block: 0; align-self: flex-start; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__nav { gap: var(--wp--preset--spacing--30); } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__cta { inline-size: 100%; min-block-size: 52px; } } /* ================================================================== THE SUBMENU — one link opens a list of children. Asked for as "a dropdown on hover", and hover is what a mouse gets. It is not the MECHANISM, because a hover-only menu is unopenable on a phone and unreachable by a keyboard. The mechanism is one class, .is-open on __group, and view.js is the only thing that writes it — from the chevron button, from hover with intent, and from focus. ONE STATE, ON PURPOSE. The obvious alternative is to let CSS own the mouse (:hover) and JavaScript own the rest, which is what the first draft of this file did. Then the panel is on screen while the button still says aria-expanded="false", because :hover never told it — the two halves disagree for as long as the pointer rests there. Hover intent also cannot be written in CSS: :hover opens on the first pixel of contact, so a pointer clipping the corner of the link on its way somewhere else throws a card over the page. There is no :target fallback here, and the burger in the drawer section above has one. That is not an inconsistency worth fixing: the drawer is how a reader on a phone reaches the rest of the site at all, and this is one link's children, every one of which is also listed on /expertises. WHY THE GROUP TAKES THE LINK'S BOX. __link carries min-block-size 44 with margin-block -14 (44px of pointer, 16px of layout — see above). Wrapping it would have made the group 16px tall with the link overflowing it, and the panel is positioned off the group. So the group takes those two declarations over and the link inside it goes back to margin-block 0: the row's height is unchanged and the group's lower edge is exactly the link's visual lower edge. ================================================================== */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__group { position: relative; display: flex; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__group .aisa-magnetis-ca-header__link { margin-block: 0; } /* The disclosure. THE HIT BOX OVERHANGS THE RHYTHM, IT DOES NOT OCCUPY IT. Measured with the box in the flow: every other pair of labels in the row sat 31.7px apart at 1440 and Expertise → Agence sat at 61.7 — the chevron's 24 of pointer and its margin had been inserted INTO the nav's own gap, so one item in five was spaced at nearly double. The same trick the burger uses ten rules down: a 44/24 target for a finger, and negative margins so what the row lays out is the GLYPH. --chev-gap is the air after the label; the box's own inset is taken back on both sides, which leaves the group's layout edge exactly on the glyph's. Change --chev and the two margins follow. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__toggle { --chev: 16px; /* the icon's box — aisa_icon( …, 'sm' ) */ --chev-hit: 24px; /* the pointer target around it */ --chev-gap: 8px; /* air between the label's ink and the chevron's INK */ /* Lucide draws chevron-down as m6 9 6 6 6-6 — x 6→18 of a 24 viewBox, so a quarter of the box is empty on each side. At 16px that is 4px of nothing, and spacing the row against the BOX put 8px before the mark and 35.7 after it where every other gap in the row is 31.7. Both margins below discount it, so the row is spaced against the ink. */ --chev-ink: calc(var(--chev) / 4); appearance: none; background: none; border: 0; padding: 0; margin-inline-start: calc(var(--chev-gap) - var(--chev-ink) - (var(--chev-hit) - var(--chev)) / 2); margin-inline-end: calc(0px - var(--chev-ink) - (var(--chev-hit) - var(--chev)) / 2); color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--chev-hit); min-block-size: 44px; flex: 0 0 auto; transition: color 0.2s ease; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__toggle:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px; } /* The runtime's curated chevron-down — a Lucide stroke path on currentColor, inline, so it costs no request and follows the link's colour. icons.css sizes it (sm is 1rem); the stroke is nudged up from Lucide's 2 because at 16px that renders 1.33px beside text set at 500, and the icon read lighter than the word it belongs to. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__chevron { inline-size: var(--chev); block-size: var(--chev); stroke-width: 2.25; transition: transform 0.2s ease; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__group.is-open .aisa-magnetis-ca-header__chevron { transform: rotate(180deg); } /* The glyph is background-color: currentColor, so colouring the BUTTON colours it, and the parent link takes the same red every other link in the row takes on hover — one colour, arrived at two ways. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__toggle:hover, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__group.is-open .aisa-magnetis-ca-header__toggle, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__group.is-open .aisa-magnetis-ca-header__link--parent { color: var(--wp--preset--color--primary); } /* Display, direction and surface are all declared HERE and never as utilities on the element: this panel wants display none in the drawer and flex above 1024, and `:root .flex{display:flex}` ties with this block's own selector and wins on source order (LESSONS.md 52). */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__sub { flex-direction: column; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__sublink { box-sizing: border-box; display: flex; align-items: center; min-block-size: 44px; padding: 10px 24px; line-height: 1.25; font-weight: 500; transition: color 0.2s ease; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__sublink:hover { color: var(--wp--preset--color--primary); } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__sublink:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: -2px; } /* --- above 1024: the card ------------------------------------------- */ @media (min-width: 1024px) { .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__group { align-items: center; min-block-size: 44px; margin-block: -14px; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__sub { display: flex; position: absolute; background-color: var(--wp--preset--color--base-2); /* The bar's LOWER EDGE, derived rather than guessed: the group is 44 tall and centred in the bar, so from its own lower edge the bar's is another (--bar-now - 44) / 2 away. One variable, so the panel follows the shrink instead of arguing with it. 43, not 44, and the 1px is the bar's own border-block-end: the group centres in the CONTENT box, which is a pixel shorter than the border box the panel has to meet. Written as 44 it measured half a pixel high at both heights and ate the hairline. */ inset-block-start: calc(100% + (var(--bar-now) - 43px) / 2); inset-inline-start: -25px; /* 24 of row padding + the card's own 1px border, so a child's text starts on the parent link's left edge exactly */ z-index: 5; min-inline-size: 268px; padding-block: var(--wp--preset--spacing--30); border: 1px solid var(--wp--preset--color--accent); box-shadow: 0 8px 24px rgba(33, 31, 50, 0.1); /* contrast at 10%, and no slug names a shadow */ /* visibility, not display, so the card can fade — and visibility hidden is also not focusable, so the seven children are out of the tab order while it is shut without a second mechanism. */ visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } /* THE BRIDGE. The card starts at the bar's lower edge, so there is real air between the link and it, and a pointer crossing that air would leave the group. This fills it with a transparent child OF THE CARD — a descendant, so the pointer never leaves — and costs no DOM. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__sub::before { content: ""; position: absolute; inset-block-end: 100%; inset-inline: 0; block-size: calc((var(--bar-now) - 43px) / 2); } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__group.is-open .aisa-magnetis-ca-header__sub { visibility: visible; opacity: 1; transform: none; transition: opacity 0.18s ease, transform 0.18s ease; } } /* --- below 1024: a nested list in the drawer ------------------------- No hover on a touch screen, and no card either — the drawer IS the surface. The collapse is display, not opacity: nothing else in the sheet animates, and a list that arrived with all seven already down would be the 274px header this band was rebuilt to stop being. The row runs the full measure and a TINTED DISC is the boundary: everything left of it goes to /expertises, the disc opens the list. Arrived at by the owner 2026-09-11 in five steps — "the label opens it too", which reached the disclosure but left the parent page with no route from the drawer; the link back on the word with a 1px separator at the split; the separator moved beside the caret; the hit areas moved to match it; and then the separator replaced by the disc, because a hairline asks a reader to infer a boundary where a filled shape is one. */ @media (max-width: 1023px) { .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__group { flex-wrap: wrap; align-items: center; inline-size: 100%; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__sub { display: none; flex-basis: 100%; margin-block-start: var(--wp--preset--spacing--30); border-inline-start: 1px solid var(--wp--preset--color--accent); /* the drawer's own cream, not a white card floating on it */ } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__group.is-open .aisa-magnetis-ca-header__sub { display: flex; } .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__sublink { padding-block: 8px; } /* THE CHEVRON GOES TO THE RIGHT EDGE and the button fills everything between, so the whole width of the row answers a thumb rather than 24px of it at the end of a word. flex: 1 replaces the fixed 24 box, which is why the overhang changes with it: centred in 24 the glyph had 4px of hit inset on each side and the margin discounted both, but pushed to the end of a wide button there is none — only the icon's OWN empty quarter is left to take back, so the mark lands on the measure's right edge rather than 4px inside it. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__toggle { position: relative; /* A 44 square of pointer — the size iOS asks for, and the size the 1px line could never be. -2 on the end so the DISC, not the glyph's ink, lands on the measure's right edge: a filled shape aligns by its box where a bare mark aligns by its ink. */ flex: 0 0 auto; inline-size: 44px; justify-content: center; margin-inline-start: 0; margin-inline-end: -2px; } /* EVERYTHING LEFT OF THE LINE GOES TO THE PAGE. The word alone was a 90px target in a 342px row, with the rest of the row answering the disclosure — so most of a row that reads as "Expertise" did not go to Expertise. The link takes the space instead and the chevron keeps its own end of it. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__link--parent { flex: 1 1 auto; } /* THE DISC, and it replaced a 1px accent separator on this edge (2026-09-11, the owner: "the separator doesn't look good"). The line was doing a job it was too quiet to do — a hairline in the middle of a row asks a reader to infer a boundary, where a filled shape simply is one. It also echoes the red pill sitting four rows below it in this same sheet, and circles are the one curve this design system allows besides that pill. 40 inside the 44 of pointer, so the target is bigger than the mark — the right way round. accent is the warm tint the palette keeps for exactly this; nothing here invents a colour. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__toggle::before { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; inline-size: 40px; block-size: 40px; border-radius: 50%; background-color: var(--wp--preset--color--accent); transition: background-color 0.2s ease; } /* Both are positioned with z-index auto, so they paint in tree order and the glyph lands on top of the disc. One declaration instead of a z-index, which would have made the button a stacking context. */ .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__chevron { position: relative; } } /* THE ADMIN BAR IS ALSO FIXED AT THE TOP, and it wins — it is printed after this stylesheet and painted above it. Anonymous visitors never see this, so it is invisible to every measurement taken against the front end without a cookie; the only person it breaks the site for is the owner, on their own site, while logged in. WordPress's own offsets: 32px above 782, 46px from 601 to 782, and below 601 the bar is position: absolute and scrolls away, so there is nothing to clear. */ body.admin-bar .aisa-magnetis-ca-header__bar { inset-block-start: 32px; } @media (max-width: 782px) { body.admin-bar .aisa-magnetis-ca-header__bar { inset-block-start: 46px; } } @media (max-width: 600px) { body.admin-bar .aisa-magnetis-ca-header__bar { inset-block-start: 0; } } /* The editor draws the header inside an iframe whose top is not the page's: a fixed bar there pins itself to the canvas and covers whatever is being edited. The block is static in that one context. */ .block-editor-iframe__body .wp-block-aisa-magnetis-ca-header { block-size: auto; } .block-editor-iframe__body .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bar { position: static; } @media (prefers-reduced-motion: reduce) { .wp-block-aisa-magnetis-ca-header a, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bar, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__logo, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__panel, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars::before, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__bars::after, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__sub, .wp-block-aisa-magnetis-ca-header .aisa-magnetis-ca-header__chevron { transition: none; } }