/* ========================================================= NEDA eCAMPUS — WORDPRESS SITE HEADER + FRONT PAGE COMPLETE global stylesheet — v3.7 (2026-08-01) Theme: Online LMS (WordPress block / FSE theme) Site: https://www.nedaecampus.com WHERE TO PASTE — this is the WHOLE set. Select everything in the box and replace it. Do not append: Appearance > Editor > Styles > (three dots) > Additional CSS Companion script: Neda_WordPress_Header_JS.txt --------------------------------------------------------- !! NEVER PUT A "LESS-THAN" SIGN IN THIS FILE !! WordPress validates the Additional CSS box by looking for an opening angle bracket followed by an optional slash and a word character. If it finds one it rejects the ENTIRE stylesheet with "The custom CSS is invalid. Do not use markup." — nothing is saved. It scans the raw text, so this applies inside COMMENTS too. v3.5 was rejected purely because two comments mentioned an li element and a main element in angle brackets. The CSS itself was perfectly valid. So: never write an HTML tag name in angle brackets anywhere in this file, not even in a comment. Name elements in words instead. The greater-than sign is fine and is used freely as the child combinator; only the less-than sign is rejected. --------------------------------------------------------- --------------------------------------------------------- HOW THE TWO LAYOUTS ARE CHOSEN The CSS decides on its own, with no JavaScript involved: below 1200px viewport -> hamburger | logo | icon buttons 1200px and above -> logo | menu | language | buttons Paste the stylesheet and the desktop menu works, the mobile hamburger works, and nothing depends on a script running. The companion script only REFINES this: it collapses early when a translated language is too wide, and moves the language selector into the hamburger overlay. It also adds the scrolled state (section 8) — without it the header is still sticky, it simply stays white instead of going dark. --------------------------------------------------------- STATES .neda-header-row.is-neda-collapsed force hamburger layout .neda-header-row.is-neda-tight condense desktop layout header.wp-block-template-part.is-neda-scrolled page has been scrolled COLLAPSED ORDER, both directions: LTR, from the left: hamburger | logo | log-in | register RTL, from the right: hamburger | logo | log-in | register COLOUR POLICY — only the 8 official Neda brand colours. Every soft border / ring / shadow / veil is a transparent version of an official colour (Black, White or Cyan) — never a new hue. Primary Lime #C4C40E Cherry Red #D7263D Primary Cyan #0EC4C5 Golden Yellow #F2B705 White #FFFFFF Black #000000 INTERACTION MODEL menu item black, lime on hover, never underlined menu item, scrolled white, lime on hover dropdown always white, Neda Cyan row + white text on hover log-in / register cherry red on hover, white text hamburger cherry red on hover, white icon header, scrolled Black at 70%, sticky to the top VERIFIED DOM (live, 2026-07-31) header.wp-block-template-part -- the sticky element header.wp-block-group.alignfull -- the white bar div.neda-header-row -- max-width 1200px 1 figure.neda-header-logo 2 nav.neda-header-nav 3 div.gtranslate_wrapper -- NOT inside the nav block 4 div.neda-auth-group RTL is signalled by html.translated-rtl and html[lang="fa"]. ========================================================= */ /* --------------------------------------------------------- 0. TOKENS --------------------------------------------------------- */ .neda-header-row { --nh-lime: #C4C40E; --nh-cyan: #0EC4C5; --nh-cherry: #D7263D; --nh-white: #FFFFFF; --nh-black: #000000; --nh-radius: 10px; --nh-control: 46px; --nh-icon: 21px; --nh-gap: clamp(18px, 1.7vw, 30px); --nh-hairline: rgba(0, 0, 0, 0.18); --nh-ease: 0.15s ease; } /* ========================================================= 1. STICKY HEADER The sticky element is the OUTER template part, not the white bar. position:sticky is constrained by the parent's box, and the white bar's parent is exactly its own height — sticking it there would unstick immediately. The overflow-x line is required, not cosmetic. The theme sets overflow-x:hidden on html and body, which turns them into scroll containers and kills position:sticky outright (verified: the header scrolled clean off the page). "clip" suppresses sideways scrolling the same way WITHOUT creating a scroll container, so sticky survives. ========================================================= */ html, body { overflow-x: clip !important; } header.wp-block-template-part { position: sticky !important; top: 0; z-index: 999; } /* The open mobile overlay must sit above the sticky header. */ .wp-block-navigation__responsive-container.is-menu-open { z-index: 100000 !important; } /* Keep the bar's own background painting over page content. 0.5s matches the veil in section 8 so the white and the dark layer cross-fade together instead of stepping. */ header.wp-block-template-part > header { position: relative; transition: background-color 0.5s ease; } /* ========================================================= 2. COMPACT HEADER — the layout below 1200px Order: hamburger, logo, icon buttons. ========================================================= */ /* !important is load-bearing on the layout properties below. WordPress emits core-block-supports-inline-css AFTER the Additional CSS box, and it sets flex-wrap, justify-content and gap on this very element through its generated .wp-container-core-group-is-layout-* class. Same specificity, later in the document, so it wins every tie. Without !important the gap silently reverts to 30px and the justification to space-between. */ .neda-header-row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100%; column-gap: 10px !important; row-gap: 0 !important; } .neda-header-row > * { flex: 0 0 auto !important; min-width: 0; } .neda-header-row .neda-header-nav { order: 1; } .neda-header-row .neda-header-logo { order: 2; } .neda-header-row .neda-auth-group { order: 3; margin-inline-start: auto !important; } .neda-header-row .gtranslate_wrapper { order: 4; } /* ---- Logo ---------------------------------------------- */ .neda-header-logo { margin: 0 !important; } .neda-header-logo img { display: block; width: clamp(145px, 20vw, 180px); max-width: none; height: auto; } /* ---- Hamburger ----------------------------------------- */ .neda-header-row .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; } .neda-header-row .wp-block-navigation__responsive-container-open { display: inline-flex !important; align-items: center; justify-content: center; width: var(--nh-control); height: var(--nh-control); padding: 0 !important; border: 1px solid var(--nh-hairline); border-radius: var(--nh-radius) !important; background: var(--nh-white); color: var(--nh-black); box-sizing: border-box; transition: background-color var(--nh-ease), border-color var(--nh-ease), color var(--nh-ease); } .neda-header-row .wp-block-navigation__responsive-container-open:hover { background: var(--nh-cherry); border-color: var(--nh-cherry); color: var(--nh-white); } .neda-header-row .wp-block-navigation__responsive-container-open svg { width: 24px; height: 24px; fill: currentColor; } /* ---- Authentication buttons as Neda icon squares -------- font-size:0 hides the label visually but leaves the text in the accessibility tree, so each button keeps its accessible name — in the CURRENT language, which a fixed aria-label would not. */ .neda-auth-group { margin: 0 !important; padding: 0 !important; } .neda-auth-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center; column-gap: 9px !important; } .neda-auth-actions .wp-block-button { margin: 0 !important; width: auto !important; } .neda-auth-actions .wp-block-button.has-custom-width, .neda-auth-actions .wp-block-button.wp-block-button__width-50 { width: auto !important; } .neda-auth-actions .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; width: var(--nh-control); min-width: var(--nh-control); height: var(--nh-control); min-height: var(--nh-control); padding: 0 !important; border-radius: var(--nh-radius) !important; font-size: 0 !important; line-height: 0; box-sizing: border-box; transition: background-color var(--nh-ease), color var(--nh-ease); } /* Both buttons go cherry red on hover, in every state and at every width. */ .neda-auth-actions .wp-block-button__link:hover, .neda-auth-actions .wp-block-button__link:focus-visible { background-color: var(--nh-cherry) !important; color: var(--nh-white) !important; } .neda-auth-actions .wp-block-button__link::before { content: ""; display: block; width: var(--nh-icon); height: var(--nh-icon); background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .neda-login-action .wp-block-button__link::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17v-3H3v-4h7V7l5 5-5 5Zm4-13h5a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-5v-2h5V6h-5V4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 17v-3H3v-4h7V7l5 5-5 5Zm4-13h5a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-5v-2h5V6h-5V4Z'/%3E%3C/svg%3E"); } .neda-register-action .wp-block-button__link::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v2h10.25A7 7 0 0 1 11 19c0-2.1.93-3.98 2.4-5.26A12.74 12.74 0 0 0 9 13Zm10 0h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v2h10.25A7 7 0 0 1 11 19c0-2.1.93-3.98 2.4-5.26A12.74 12.74 0 0 0 9 13Zm10 0h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3Z'/%3E%3C/svg%3E"); } /* ========================================================= 3. FULL DESKTOP — 1200px and above Pure CSS. No script needed. ========================================================= */ @media (min-width: 1200px) { .neda-header-row:not(.is-neda-collapsed) { justify-content: space-between !important; column-gap: var(--nh-gap) !important; } .neda-header-row:not(.is-neda-collapsed) .neda-header-logo, .neda-header-row:not(.is-neda-collapsed) .neda-header-nav, .neda-header-row:not(.is-neda-collapsed) .gtranslate_wrapper, .neda-header-row:not(.is-neda-collapsed) .neda-auth-group { order: 0; } .neda-header-row:not(.is-neda-collapsed) .neda-auth-group { margin-inline-start: 0 !important; } .neda-header-row:not(.is-neda-collapsed) .neda-header-logo img { width: clamp(170px, 11.5vw, 202px); } .neda-header-row:not(.is-neda-collapsed) .wp-block-navigation__responsive-container:not(.is-menu-open) { display: block !important; } .neda-header-row:not(.is-neda-collapsed) .wp-block-navigation__responsive-container-open { display: none !important; } .neda-header-row:not(.is-neda-collapsed) .neda-header-nav .wp-block-navigation__container { display: flex; flex-wrap: nowrap !important; align-items: center; justify-content: center; column-gap: clamp(16px, 1.3vw, 26px); } /* Top-level labels stay on one line. Submenu labels are explicitly released in section 5 so long titles can wrap. */ .neda-header-row:not(.is-neda-collapsed) > .neda-header-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .neda-header-row:not(.is-neda-collapsed) > .neda-header-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label { white-space: nowrap !important; } /* ---- Buttons return to text ------------------------- */ .neda-header-row:not(.is-neda-collapsed) .neda-auth-actions { column-gap: 12px !important; } .neda-header-row:not(.is-neda-collapsed) .neda-auth-actions .wp-block-button__link { width: auto; min-width: 0; height: auto; min-height: var(--nh-control); padding: 11px 20px !important; font-size: clamp(15px, 0.95vw, 17px) !important; line-height: 1; white-space: nowrap !important; } .neda-header-row:not(.is-neda-collapsed) .neda-auth-actions .wp-block-button__link::before { display: none; } /* ---- Condensed variant, set by the script ----------- */ .neda-header-row.is-neda-tight:not(.is-neda-collapsed) .neda-header-logo img { width: clamp(158px, 10vw, 176px); } .neda-header-row.is-neda-tight:not(.is-neda-collapsed) .neda-header-nav .wp-block-navigation__container { column-gap: 14px; font-size: 0.94em; } .neda-header-row.is-neda-tight:not(.is-neda-collapsed) .neda-auth-actions .wp-block-button__link { padding-inline: 15px !important; font-size: 15px !important; } } /* ========================================================= 4. MENU ITEMS — colour, weight and hover Revised 2026-08-02 for contrast. Cyan and lime are both far too light to carry text on white — lime on white measures about 1.9:1, where AA wants 4.5:1 — so neither is used for text on the white bar any more. white bar black text, BOLD, CHERRY RED on hover scrolled bar white text, BOLD, LIME on hover (section 8) Both rules hold at every width and in both directions: the mobile panel uses the same selectors (section 7) and the RTL section carries no colours of its own. ========================================================= */ .neda-header-row .wp-block-navigation-item__content, .neda-header-row .wp-block-navigation-item__content:visited { color: var(--nh-black); text-decoration: none !important; transition: color var(--nh-ease), background-color var(--nh-ease); } .neda-header-row .wp-block-navigation-item__content:hover, .neda-header-row .wp-block-navigation-item__content:focus { color: var(--nh-cherry); text-decoration: none !important; } /* ---- Weight --------------------------------------------- Top level bold, submenu regular (section 5 sets the submenu). The theme writes font-weight:500 as an INLINE style on the navigation block, and an inline style beats any selector, so !important is the only thing that reaches it. Scoped to DIRECT children of the container so it applies to the desktop bar and the mobile panel alike, without ever touching a dropdown row. */ .neda-header-row .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content, .neda-header-row .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label { font-weight: 700 !important; } /* The theme underlines navigation links on hover. Off, everywhere. */ .neda-header-row .wp-block-navigation a, .neda-header-row .wp-block-navigation a:hover, .neda-header-row .wp-block-navigation a:focus, .wp-block-navigation__responsive-container-content a, .wp-block-navigation__responsive-container-content a:hover { text-decoration: none !important; } /* ---- Submenu chevrons ----------------------------------- The arrow is a BUTTON that is a sibling of the link, not a child, so it never inherits the link's hover colour. It has to be coloured off the parent list item instead. The svg path is drawn with BOTH stroke and fill, so both need currentColor or the arrow stays black. */ .neda-header-row .wp-block-navigation-submenu__toggle { color: var(--nh-black); background: transparent; transition: color var(--nh-ease); } .neda-header-row .wp-block-navigation-submenu__toggle svg, .neda-header-row .wp-block-navigation-submenu__toggle svg path { fill: currentColor !important; stroke: currentColor !important; } /* Hover anywhere on the item turns the arrow cherry with the text. Section 8 flips both to lime on the scrolled bar. */ .neda-header-row .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle, .neda-header-row .wp-block-navigation-item:focus-within > .wp-block-navigation-submenu__toggle { color: var(--nh-cherry); } /* ========================================================= 5. DROPDOWN SOLID white, cherry row on hover, and narrow enough that a long title wraps onto a second line. THE NEDA DROPDOWN GEOMETRY, universal and the shape every future dropdown copies: card 12px radius, 6px padding on ALL four sides, SOLID white — no transparency, no backdrop blur row 8px radius, inset by that padding hover CHERRY RED fill with WHITE text result the hover fill is a rounded pill floating inside the card, never touching its edges or corners The 6px padding is what does the work. A row with a radius but no padding around it still collides with the card's own corner and reads as a mis-cut rectangle. The card is light in EVERY state, scrolled or not, so the rows below never have to re-colour. WHY THE TRANSPARENCY HAD TO GO (2026-08-02). At 85% the card rendered as TWO layers: core's own rule .wp-block-navigation .wp-block-navigation-item { background-color: inherit } makes every list item repaint the card's colour on top of the card. Two coats of 85% white compose to about 98%, so the rows read as almost solid while the 6px padding frame around them stayed at 85% and let the page show through. The result was a pale border inside a pale card. Solid white removes the cause, and the list items are pinned transparent below so the same doubling can never come back. Cherry replaced cyan here on 2026-08-02: one hover colour for every menu and dropdown on the site. ========================================================= */ .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container { width: 232px !important; min-width: 232px !important; max-width: 232px !important; padding: 6px !important; background-color: var(--nh-white) !important; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--nh-hairline) !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); overflow: hidden; } /* Release the one-line rule so long titles break onto two. */ .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__label { white-space: normal !important; overflow-wrap: break-word; line-height: 1.3; } .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; width: 100%; padding: 9px 12px !important; border-radius: 8px; color: var(--nh-black) !important; background-color: transparent; box-sizing: border-box; } /* Regular weight at rest, bold only on hover. The card is 232px wide, not 212px, precisely so the extra weight cannot push a two-line label onto a third line and make the card jump. */ .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__label { font-weight: 400 !important; } /* List items must NOT paint a background. Core sets background-color:inherit on every navigation item, which made each row repaint the card's own colour on top of it. Harmless while the card is opaque, and the cause of the double-layer card the moment it is not — pinned here so it cannot return. */ .neda-header-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { background-color: transparent !important; box-shadow: none !important; } /* CHERRY row on hover, WHITE BOLD text — the universal Neda hover, shared with the user menu and the language list. The colour is written as a literal rather than var(), so it cannot be affected by a custom property redefined further up the tree. It is exactly Cherry Red. */ .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus, .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content { background-color: #D7263D !important; color: #FFFFFF !important; font-weight: 700 !important; text-decoration: none !important; } /* The label sits in its own span, which can carry its own colour and weight. Force both, or the text keeps the resting values on the cherry row. */ .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label, .neda-header-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content .wp-block-navigation-item__label { color: #FFFFFF !important; font-weight: 700 !important; } /* ========================================================= 6. LANGUAGE SELECTOR (GTranslate float switcher) ========================================================= */ .neda-header-row .gtranslate_wrapper { line-height: 0; } .neda-header-row #gt_float_wrapper, .neda-header-row .gt_float_switcher { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin: 0 !important; box-shadow: none !important; background: transparent !important; } /* THE APPEARANCE OF THE SWITCHER IS NOT SET HERE. Revised 2026-08-02. GTranslate scopes its own styles under the id #gt_float_wrapper, and an id outranks any selector built from classes alone. Everything this section used to declare - a white pill with a radius, a lime hover border, a 44px button height, uppercase text and a styled options list - either lost to that id or, worse, half-won and left the switcher looking like a button with the wrong measurements. The widget is therefore owned entirely by the plugin's own Custom CSS box, kept in Gtranslate_CSS.txt. This section keeps only what that box cannot do: pulling the floating widget out of its fixed position and into the header row, above. The one exception is the signed-in user menu in section 15, where the switcher becomes a menu row - and even there the colour rules live in the GTranslate box, for the same reason. The selector is a label, not a control: flag, language, arrow. No fill, no border, no hover. */ .gt_float_switcher { font-size: 15px !important; } .gt_float_switcher .gt-current-lang { white-space: nowrap; } /* ========================================================= 7. MOBILE MENU PANEL Core renders this as an opaque full-screen sheet. It is reshaped here into a frosted panel that slides in from the left and never covers the whole screen on a larger phone. Structure core gives us: .responsive-container fixed, inset 0 -> becomes the scrim .responsive-close the box inside -> becomes the panel .responsive-dialog button.responsive-container-close .responsive-container-content [parked language selector] ul.wp-block-navigation__container ========================================================= */ /* The scrim behind the panel. It starts BELOW the header rather than covering it, so the logo and the close control stay visible and the panel never hides the bar it came from. --nh-header-h is measured and set by the companion script; the fallback covers the no-script case and the first frame before it runs. */ .wp-block-navigation__responsive-container.is-menu-open { top: var(--nh-header-h, 60px) !important; bottom: 0 !important; height: auto !important; background-color: rgba(0, 0, 0, 0.35) !important; padding: 0 !important; display: flex !important; align-items: stretch !important; justify-content: flex-start !important; } /* The panel itself: 70% white, frosted, capped so it never swallows a large phone screen. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { width: 84vw !important; max-width: 330px; height: 100%; margin: 0 !important; padding: 18px 16px 28px !important; box-sizing: border-box; overflow-y: auto; background-color: rgba(255, 255, 255, 0.85) !important; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); animation: neda-panel-in 0.28s ease both; } @keyframes neda-panel-in { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { animation: none; } } /* Left-align everything in the panel. Core centres it. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { width: 100% !important; max-width: 100%; align-items: flex-start !important; justify-content: flex-start !important; text-align: left; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { width: 100%; } /* Close control, styled as a Neda button: lime square with the 10px radius, cherry red on hover, white icon throughout. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { display: flex !important; align-items: center; justify-content: center; width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background-color: #C4C40E !important; color: #FFFFFF !important; box-sizing: border-box; cursor: pointer; transition: background-color 0.15s ease; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible { background-color: #D7263D !important; color: #FFFFFF !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; fill: currentColor; } /* ---- Panel rows ----------------------------------------- */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { display: block !important; width: 100%; padding: 11px 12px !important; border-radius: 10px; color: #000000 !important; box-sizing: border-box; } /* Revised 2026-08-02. The panel now follows the same two rules as the desktop header, so a phone and a laptop behave alike: top-level row black bold, CHERRY RED text on touch/hover, no fill — it is a menu item, not a dropdown submenu row regular, CYAN fill with BLACK BOLD text Nothing here is direction-scoped, so RTL inherits it. */ /* ---- Top-level rows ---- */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:active { background-color: transparent !important; color: #D7263D !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover .wp-block-navigation-item__label, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:active .wp-block-navigation-item__label { color: #D7263D !important; } /* The chevron belongs to the row, so it turns with it. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle { color: #D7263D !important; } /* ---- Submenu rows ---- */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active { background-color: #D7263D !important; color: #FFFFFF !important; font-weight: 700 !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active .wp-block-navigation-item__label { color: #FFFFFF !important; font-weight: 700 !important; } /* ---- Submenus: indented, not a floating card ------------- Section 5 styles the DESKTOP dropdown as a 232px white card. That selector is scoped to the closed container, so it does not reach in here — these rules keep the panel flat. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { position: static !important; width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 0 0 4px 14px !important; /* the indent */ background-color: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 0.95em; padding: 9px 12px !important; } /* Regular at rest — the bold above is a hover state only. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label { font-weight: 400 !important; } /* ---- Parked language selector, on top -------------------- */ .wp-block-navigation__responsive-container-content .gtranslate_wrapper[data-neda-parked] { order: -1; width: 100%; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); line-height: normal; } .wp-block-navigation__responsive-container-content .gtranslate_wrapper[data-neda-parked] .gt_float_switcher { display: inline-block !important; } /* ========================================================= 8. SCROLLED STATE Set by the companion script once the page moves past 10px. Header goes Black at 70%, menu items go white. The dropdown deliberately stays white in every state. ========================================================= */ /* The dark veil is painted by a PSEUDO-ELEMENT, not by the bar itself. This is not decoration — it is a bug fix. backdrop-filter (like transform and filter) makes an element a containing block for position:fixed descendants. The mobile menu overlay is a fixed descendant of this bar, so putting backdrop-filter on the bar trapped the whole overlay inside the header box: on mobile, once scrolled, the menu opened inside the header strip and was effectively invisible. A pseudo-element carries the blur without becoming the containing block for the overlay, because the overlay is not its descendant. */ /* WHY THE VEIL EXISTS AT ALL TIMES The veil is declared here in its RESTING state — fully transparent, zero blur — and only its values change when the scrolled class arrives. That is what makes the change fade. A pseudo-element that is created by the scrolled rule alone has nothing to animate from: it simply appears, which is why the header used to snap from white to black in one frame. Declaring it up front gives the browser two states to interpolate between. The blur rests at 0px rather than "none" for the same reason: none is not interpolable, 0px is. */ header.wp-block-template-part > header::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background-color: rgba(0, 0, 0, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); pointer-events: none; transition: background-color 0.5s ease, -webkit-backdrop-filter 0.5s ease, backdrop-filter 0.5s ease; } header.wp-block-template-part.is-neda-scrolled > header::before { background-color: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* The white bar fades out underneath as the veil fades in, so the two cross-fade into the translucent end state. Matching durations keep them in step. */ header.wp-block-template-part.is-neda-scrolled > header { background-color: transparent !important; } /* Keep the header contents above that veil. */ header.wp-block-template-part > header > * { position: relative; z-index: 1; } /* Top-level menu items only — section 5 keeps dropdown text black. */ header.wp-block-template-part.is-neda-scrolled .neda-header-row .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { color: var(--nh-white); } header.wp-block-template-part.is-neda-scrolled .neda-header-row .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover { color: var(--nh-lime); } /* The chevrons follow the items: white when scrolled, lime on hover. Without this they stay black on the dark bar. */ header.wp-block-template-part.is-neda-scrolled .neda-header-row .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle { color: var(--nh-white); } header.wp-block-template-part.is-neda-scrolled .neda-header-row .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle { color: var(--nh-lime); } /* Hamburger sits on a dark bar: white outline, white icon. Hover is still cherry red. */ header.wp-block-template-part.is-neda-scrolled .wp-block-navigation__responsive-container-open { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: var(--nh-white); } header.wp-block-template-part.is-neda-scrolled .wp-block-navigation__responsive-container-open:hover { background: var(--nh-cherry); border-color: var(--nh-cherry); color: var(--nh-white); } /* ========================================================= 9. RTL — Arabic and Persian The three RTL hooks are written out longhand rather than grouped with :is(). :is() is valid CSS and every browser understands it, but the linter built into the WordPress editor is old enough to flag it as a syntax error. Longhand is verbose and behaves identically. ========================================================= */ html.translated-rtl .neda-header-row, html[lang^="ar"] .neda-header-row, html[lang^="fa"] .neda-header-row { direction: rtl; } @media (min-width: 1200px) { html.translated-rtl .neda-header-row:not(.is-neda-collapsed) .neda-header-nav .wp-block-navigation__container, html[lang^="ar"] .neda-header-row:not(.is-neda-collapsed) .neda-header-nav .wp-block-navigation__container, html[lang^="fa"] .neda-header-row:not(.is-neda-collapsed) .neda-header-nav .wp-block-navigation__container { justify-content: flex-start; } } html.translated-rtl .wp-block-navigation__submenu-container, html[lang^="ar"] .wp-block-navigation__submenu-container, html[lang^="fa"] .wp-block-navigation__submenu-container { direction: rtl; text-align: right; } /* Mobile overlay. Core's .items-justified-center outranks a plain declaration, so align-items needs !important. Delete the three align-items lines to leave the RTL overlay centred. */ html.translated-rtl .wp-block-navigation__responsive-container-content, html[lang^="ar"] .wp-block-navigation__responsive-container-content, html[lang^="fa"] .wp-block-navigation__responsive-container-content { direction: rtl; text-align: right; align-items: flex-start !important; } html.translated-rtl .wp-block-navigation__responsive-container-content .wp-block-navigation__container, html[lang^="ar"] .wp-block-navigation__responsive-container-content .wp-block-navigation__container, html[lang^="fa"] .wp-block-navigation__responsive-container-content .wp-block-navigation__container { direction: rtl; text-align: right; align-items: flex-start !important; } html.translated-rtl .gt_float_switcher .gt_options, html[lang^="ar"] .gt_float_switcher .gt_options, html[lang^="fa"] .gt_float_switcher .gt_options, html.translated-rtl .gt_float_switcher .gt-current-lang, html[lang^="ar"] .gt_float_switcher .gt-current-lang, html[lang^="fa"] .gt_float_switcher .gt-current-lang { direction: rtl; text-align: right; } /* --------------------------------------------------------- RTL MOBILE PANEL The panel slides in from the RIGHT and everything inside it reads right to left. These selectors repeat the full .is-menu-open chain from section 7 on purpose. Section 7's panel rules carry three classes; a shorter RTL selector would lose the tie and the panel would stay on the left. Specificity here has to beat it, not merely match it. --------------------------------------------------------- */ /* Panel to the right edge. */ html.translated-rtl .wp-block-navigation__responsive-container.is-menu-open, html[lang^="ar"] .wp-block-navigation__responsive-container.is-menu-open, html[lang^="fa"] .wp-block-navigation__responsive-container.is-menu-open { justify-content: flex-end !important; } /* Slide in from the right instead of the left. */ html.translated-rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close, html[lang^="ar"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close, html[lang^="fa"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { direction: rtl; animation-name: neda-panel-in-rtl; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); } @keyframes neda-panel-in-rtl { from { transform: translateX(100%); } to { transform: translateX(0); } } /* Contents right-aligned. In a column flex container with direction rtl, flex-start already resolves to the right edge, so the alignment keyword stays flex-start. */ html.translated-rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, html[lang^="ar"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, html[lang^="fa"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, html.translated-rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, html[lang^="ar"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, html[lang^="fa"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { direction: rtl !important; text-align: right !important; align-items: flex-start !important; } /* Every row reads right to left. */ html.translated-rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, html[lang^="ar"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, html[lang^="fa"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { text-align: right !important; direction: rtl; } /* Submenu indent mirrors to the right. */ html.translated-rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container, html[lang^="ar"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container, html[lang^="fa"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { padding: 0 14px 4px 0 !important; text-align: right !important; } /* Close button moves to the top left, mirroring its LTR spot. */ html.translated-rtl .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close, html[lang^="ar"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close, html[lang^="fa"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { right: auto !important; left: 0 !important; } /* Parked language selector reads right to left too. */ html.translated-rtl .wp-block-navigation__responsive-container-content .gtranslate_wrapper[data-neda-parked], html[lang^="ar"] .wp-block-navigation__responsive-container-content .gtranslate_wrapper[data-neda-parked], html[lang^="fa"] .wp-block-navigation__responsive-container-content .gtranslate_wrapper[data-neda-parked] { direction: rtl; text-align: right; } /* ========================================================= 10. MOBILE SPACING Page margins of 15px, and the hamburger sitting close to the logo. Change the 781px below to move where this starts. The padding needs !important: it is set on the element as an inline style by the block editor, using the theme's spacing preset (30px at phone widths). ========================================================= */ @media (max-width: 781px) { header.wp-block-template-part > header { padding-left: 15px !important; padding-right: 15px !important; } .neda-header-row { column-gap: 10px !important; } } /* ========================================================= 11. SMALL MOBILE ========================================================= */ @media (max-width: 520px) { .neda-header-row { --nh-control: 40px; --nh-icon: 18px; column-gap: 8px !important; } .neda-header-logo img { width: 124px; } .neda-auth-actions { column-gap: 7px !important; } .neda-header-row .wp-block-navigation__responsive-container-open svg { width: 21px; height: 21px; } } /* ========================================================= 12. FRONT PAGE — HERO OVERLAY A 30% Black veil between the background photograph and the text, so the white headline holds up over the bright parts of the image. Scoped to body.home and the FIRST block in the main element. to match exactly one element. Drop the `body.home` if the same hero is ever reused on other pages. ========================================================= */ body.home main > .wp-block-group:first-child { position: relative; } body.home main > .wp-block-group:first-child::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); pointer-events: none; z-index: 0; } /* Lift the headline, paragraph and buttons above the veil. */ body.home main > .wp-block-group:first-child > * { position: relative; z-index: 1; } /* Both hero buttons rest with BLACK text and go cherry red with WHITE text on hover, whatever colour they rest at — "Start Learning Free" is cyan, "Explore Learning Experiences" is the lime-outlined one. The second button's label is wrapped in a mark element that carries its own inline colour, which no rule on the link can reach. It is targeted directly, and its highlight background is cleared so the cherry fill shows through. */ body.home main > .wp-block-group:first-child .wp-block-button__link, body.home main > .wp-block-group:first-child .wp-block-button__link mark { color: #000000 !important; transition: background-color 0.15s ease, color 0.15s ease; } /* Only the MARK's own highlight is cleared. The link keeps the fill the editor gave it — clearing that here would strip the cyan off "Start Learning Free". */ body.home main > .wp-block-group:first-child .wp-block-button__link mark { background-color: transparent !important; } body.home main > .wp-block-group:first-child .wp-block-button__link:hover, body.home main > .wp-block-group:first-child .wp-block-button__link:focus-visible { background-color: #D7263D !important; color: #FFFFFF !important; border-color: #D7263D !important; } body.home main > .wp-block-group:first-child .wp-block-button__link:hover mark, body.home main > .wp-block-group:first-child .wp-block-button__link:focus-visible mark { color: #FFFFFF !important; background-color: transparent !important; } /* ========================================================= 13. FRONT PAGE — "WHY CHOOSE NEDA eCAMPUS?" CARDS The four small cards beside the AI panel. Equal size, card surface, no border, gentle lift on hover. Scoped through .features-featured-card so it reaches those four columns only. The page has 19 columns carrying the same background/border classes — an unscoped rule would restyle all of them. Verified to match exactly 4. ========================================================= */ /* "Visit Creators' Corner" — the one button in this section, inside the featured panel. Lime fill, black text at rest per the house button rule; cherry red on hover like the hero pair. The editor wrote textColor:white (has-white-color, WordPress's own !important utility class), which is beaten here on specificity alone — two classes outrank one. */ .features-featured-card .wp-block-button__link { color: #000000 !important; transition: background-color 0.15s ease, color 0.15s ease; } .features-featured-card .wp-block-button__link:hover, .features-featured-card .wp-block-button__link:focus-visible { background-color: #D7263D !important; color: #FFFFFF !important; } /* The featured card's own copy (title already resolves to text-dark correctly; the paragraph carries the theme's text-gray preset, which resolves to a cyan that fails contrast — same bug as the four cards below, forced to black here too. */ .features-featured-card p { color: #000000 !important; } /* border-radius needs !important: the block editor writes border-top-left-radius:8px and friends as an INLINE style on each column, which beats a plain declaration here. Revised 2026-08-02: pale cyan card, pale lime on hover, a deeper lift, and black copy. #ECF9F8 and #F1F3D6 are tints of Primary Cyan and Primary Lime rather than members of the eight-colour set — the only two surface tints in the file. */ .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column { background-color: #ECF9F8 !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column:hover { background-color: #F1F3D6 !important; transform: scale(1.06); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); z-index: 2; } /* ---- Card copy ------------------------------------------- Both the title and the paragraph carry an INLINE colour from the editor (text-dark and text-gray), and the theme resolves text-gray to a cyan that fails contrast on a light card. Both are forced to black. The title's inline font-size is a clamp() and the paragraph's is a flat 14px. The hover sizes repeat those exact values plus 1pt (1.333px), which is the only way to add a fixed amount to a value that is not otherwise readable from CSS — an em here would resolve against the PARENT's size, not the element's. */ .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column :is(h1, h2, h3, h4, h5, h6), .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column p { color: #000000 !important; transition: font-size 0.2s ease; } .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column:hover :is(h1, h2, h3, h4, h5, h6) { font-size: calc( clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.455), 18px) + 1.333px) !important; } .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column:hover p { font-size: 15.333px !important; } /* ---- Equal size ------------------------------------------ The four cards live in TWO separate .wp-block-columns rows, so nothing in the normal flow can equalise them. Giving the rows flex:1 does not work either: a flex item will not shrink below its own content, so the taller row simply keeps its height and the shorter one absorbs the slack (measured 248px against 293px). Instead the two row wrappers are removed from the layout with display:contents, which promotes all four cards to be direct children of one 2x2 grid. grid-auto-rows:1fr then sizes every row to the tallest card, so all four end up identical. Only above 782px, where WordPress stops stacking columns. */ @media (min-width: 782px) { .features-featured-card ~ .wp-block-column { display: grid !important; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 30px; align-content: start; } .features-featured-card ~ .wp-block-column > .wp-block-columns { display: contents !important; } .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column { width: auto !important; height: auto !important; flex-basis: auto !important; margin: 0 !important; } } @media (prefers-reduced-motion: reduce) { .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column, .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column :is(h1, h2, h3, h4, h5, h6), .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column p { transition: none; } .features-featured-card ~ .wp-block-column .wp-block-columns > .wp-block-column:hover { transform: none; } } /* ========================================================= 13b. FRONT PAGE — "THE NEDA LEARNING ECOSYSTEM" CARDS Five course-type cards (Audio Pro, Live Class, Flex Learn, Skill Bites, Quest Lab), fixed two rows: 3 across, then 2 across, via a 6-column grid where the first three cards span 2 columns each (row 1) and the last two span 3 each (row 2) — same trick as the old tablet tier, now the only tier. Below 640px that collapses to one column. Each card is its own 2-row grid (2fr image / 1fr text), and aspect-ratio on the card is what turns that fraction into an actual "image is 2/3 of the card" — grid-template-rows can't do that on its own without a definite card height to divide. Surface is the same pale-cyan/pale-lime hover pair as the "Why Choose" mini-cards above (section 13), per instruction to reuse that block's colours here. Image zone: photo fills it (object-fit:cover) with a flat 30% black tint baked on via an inset box-shadow (no extra overlay element), title sitting bottom-left INSIDE the photo in white. Text zone: black body copy top-aligned, button bottom-right — pushed down with margin-top:auto on the buttons wrapper, which only works because the grid stretches the text zone to its full row height by default. */ /* ALL FIVE CARDS ARE THE SAME SIZE. That is the whole reason for the 6-column grid: every card spans exactly 2 columns, so row 2 does NOT stretch its two cards to half the width each. Instead row 2 is CENTRED by starting its cards at columns 2 and 4, which leaves one column of slack at each end and keeps all five cards identical. row 1 |1 2|3 4|5 6| spans 2, starting at 1 / 3 / 5 row 2 . |2 3|4 5| . spans 2, starting at 2 / 4 -> centred Below 1140px three squares get too narrow for the copy to clear the button, so it drops to two columns (2-2-1) and then one. Card width is uniform in every tier. */ .neda-ecosystem-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 40px; } .neda-ecosystem-card:nth-child(1) { grid-column: 1 / span 2; } .neda-ecosystem-card:nth-child(2) { grid-column: 3 / span 2; } .neda-ecosystem-card:nth-child(3) { grid-column: 5 / span 2; } .neda-ecosystem-card:nth-child(4) { grid-column: 2 / span 2; } .neda-ecosystem-card:nth-child(5) { grid-column: 4 / span 2; } .neda-ecosystem-card { display: grid; /* 2.4fr rather than a literal 2fr: the card's own 16px padding and the 16px row-gap come off the top and bottom before the fr units divide what's left, so a plain 2fr/1fr split renders the photo at 0.58 of the card, not 0.67. 2.4fr puts it at ~0.62 — matching the mockup — while still leaving the text row enough height to clear a two-line description plus the button. */ grid-template-rows: 2.4fr 1fr; row-gap: 16px; aspect-ratio: 1 / 1; min-width: 0; padding: 16px; box-sizing: border-box; border-radius: 12px; background-color: #ECF9F8; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; /* The grid wrapper is ALSO an is-layout-flow group, so WordPress hands every card after the first a ~30px margin-top — which is why card 1 sat higher than the rest of its row. Fourth instance of this bug in this one section; see the note on .neda-ecosystem-card-text. */ margin-top: 0 !important; } .neda-ecosystem-card:hover { background-color: #F1F3D6; transform: scale(1.06); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16); z-index: 2; } .neda-ecosystem-card-img { position: relative; overflow: hidden; border-radius: 8px; } .neda-ecosystem-card-img figure, .neda-ecosystem-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; } .neda-ecosystem-card-img img { object-fit: cover; /* 30% flat black tint, without a second element */ box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.3); } .neda-ecosystem-card-title { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #FFFFFF !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); /* WordPress's own block-gap CSS gives non-first flow children a stray margin-top — neutralised here, see the .neda-ecosystem- card-text rule below for the fuller explanation. */ margin: 0 !important; } .neda-ecosystem-card-text { display: flex; flex-direction: column; height: 100%; /* .neda-ecosystem-card is also an is-layout-flow group, so WordPress gives ITS second child (this one) the same stray block-gap margin-top described below — it was shoving the whole text zone past the card's own bottom padding, off the bottom of the card. */ margin-top: 0 !important; } .neda-ecosystem-card-text p { color: #000000 !important; margin: 0 !important; } /* Same stray block-gap margin as section 13's cards and 13b's old layout — WordPress adds margin-top to every non-first flow child of a group. Zeroed and replaced with an explicit push-to-bottom, which only reads correctly because .neda-ecosystem-card-text is a flex column filling its full grid row (height:100% above). */ .neda-ecosystem-card-text .wp-block-buttons { margin: 0 !important; margin-top: auto !important; } .neda-ecosystem-card .wp-block-button__link { color: #000000 !important; } .neda-ecosystem-card .wp-block-button__link:hover, .neda-ecosystem-card .wp-block-button__link:focus-visible { background-color: #D7263D !important; color: #FFFFFF !important; } @media (max-width: 1139px) and (min-width: 641px) { .neda-ecosystem-grid { grid-template-columns: repeat(2, 1fr); } .neda-ecosystem-card:nth-child(n) { grid-column: auto; } } @media (max-width: 640px) { .neda-ecosystem-grid { grid-template-columns: 1fr; gap: 24px; } .neda-ecosystem-card:nth-child(n) { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .neda-ecosystem-card { transition: none; } .neda-ecosystem-card:hover { transform: none; } } /* ========================================================= 13c. REMOVED 2026-08-02 — the VANTA.NET background that used to sit behind "The Neda Learning Ecosystem". Taken out at the user's request. The script, the two vendor libraries and these rules all went together, and nothing had to be put back in their place: every rule here was inert until the script applied .neda-ecosystem-section, so the section simply shows its own background again — #F8F9EA, set on the block in the editor, verified live after removal. (The comment this replaced said "plain white". It was not.) git log -- assets/neda-vanta-ecosystem.js has the whole thing if it is ever wanted back. ========================================================= */ /* ========================================================= 16. BUTTONS — one global rule "Button text is always bold, in all situations." The editor writes font-weight:600 as an INLINE style on every button link, and the second hero button hides its label in a mark element, so both need !important to reach. ========================================================= */ .wp-block-button__link, .wp-block-button__link mark, .wp-element-button { font-weight: 700 !important; } /* THE 10px CORNER RULE. Every button and every control in the system carries the same radius, so the editor's per-block values (6px here, 8px there, written INLINE on each link) are overridden rather than curated one at a time. Dropdown cards are 12px and dropdown rows are 8px — those are the only other two radii in the design, and they live in sections 5 and 15. */ .wp-block-button__link, .wp-element-button { border-radius: var(--nh-radius, 10px) !important; } /* ========================================================= 14. ACCESSIBILITY ========================================================= */ .neda-header-row .wp-block-button__link:focus-visible, .neda-header-row .wp-block-navigation__responsive-container-open:focus-visible, .wp-block-navigation__responsive-container-close:focus-visible, .neda-header-row .wp-block-navigation-item__content:focus-visible, .gt_float_switcher .gt-selected:focus-visible, .wp-block-navigation__responsive-container-content .gtranslate_wrapper[data-neda-parked] a:focus-visible { outline: 3px solid #0EC4C5; outline-offset: 3px; border-radius: 10px; } @media (prefers-reduced-motion: reduce) { .neda-header-row *, header.wp-block-template-part > header { transition: none !important; } } /* ========================================================= 15. USER MENU — the logged-in header control Added 2026-08-01, companion to the v3.5 header script. WHAT REPLACES WHAT Logged out : the Log in / Register buttons, untouched. Logged in : the script hides .neda-auth-actions and mounts .neda-user-menu in its place, inside the same .neda-auth-group cell, so the header layout, the fit measurement and the RTL rules all keep working with no change. STRUCTURE THE SCRIPT BUILDS div.neda-user-menu button.neda-user-trigger avatar + name + caret span.neda-user-avatar img, or initials span.neda-user-name span.neda-user-caret div.neda-user-panel the dropdown div.neda-user-head avatar + full name + email a.neda-user-item one per menu entry div.neda-user-item.neda-user-lang hosts the GTranslate switcher WHY THE PANEL IS overflow:visible GTranslate opens its language list as an absolutely positioned child of its own switcher. With overflow:hidden on the panel that list is clipped to a few pixels. The corners are therefore rounded on the ITEMS instead of being clipped by the panel. COLOUR POLICY, unchanged: only the 8 official brand colours, every soft edge a transparent Black, White or Cyan. ========================================================= */ /* ---- The admin bar --------------------------------------- Nothing to do here any more. The plugin hides the WordPress toolbar with the show_admin_bar filter for anyone who cannot reach wp-admin, so it is never rendered rather than being hidden after the fact. The CSS that used to do that job, and the html.neda-user-menu-on / .neda-adminbar-keep classes it depended on, were deleted in v4.0. --------------------------------------------------------- */ /* ---- Wrapper --------------------------------------------- */ .neda-user-menu { position: relative; display: flex; align-items: center; line-height: 0; } /* The script hides the buttons; this is the belt to that braces, so there is no flash of two controls. */ .neda-auth-group[data-neda-authed] .neda-auth-actions { display: none !important; } /* ---- Trigger --------------------------------------------- Styled as a CONTROL, not an action: hairline box, lime edge on hover — the same language the GTranslate switcher speaks in section 6. Cherry red stays reserved for log in, register and log out. */ .neda-user-trigger { display: inline-flex; align-items: center; gap: 10px; max-width: 240px; height: var(--nh-control); margin: 0; padding: 0; border: 0; background: transparent; color: var(--nh-black); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; box-sizing: border-box; transition: color var(--nh-ease); } /* No box, so the greeting itself carries the state — the same black-to-cherry move every menu item makes on the white bar. Section 8 flips it to white-to-lime on the scrolled bar. */ .neda-user-trigger:hover, .neda-user-menu.is-open .neda-user-trigger { color: var(--nh-cherry); } /* ---- Avatar ---------------------------------------------- A real image when the user has one, initials on Primary Lime when they do not. Black on lime, not white on cyan: this is text, and it has to pass a contrast check. */ /* SQUARE with the 10px Neda corner, not a circle — the same radius every control and every button in the system uses. */ .neda-user-avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--nh-radius); overflow: hidden; background: var(--nh-lime); color: var(--nh-black); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .neda-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--nh-radius); } /* The generic glyph, used when there is neither an avatar nor a readable name. */ .neda-user-avatar[data-neda-avatar="glyph"] { background: var(--nh-lime); } .neda-user-avatar[data-neda-avatar="glyph"]::before { content: ""; width: 20px; height: 20px; background-color: var(--nh-black); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 5v3h16v-3c0-2.33-2.67-5-8-5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 5v3h16v-3c0-2.33-2.67-5-8-5Z'/%3E%3C/svg%3E"); } /* ---- Name and caret --------------------------------------- */ .neda-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; } .neda-user-caret { flex: 0 0 auto; width: 14px; height: 14px; background-color: currentColor; transition: transform var(--nh-ease); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.4 8.6 12 13.2l4.6-4.6L18 10l-6 6-6-6 1.4-1.4Z'/%3E%3C/svg%3E"); } .neda-user-menu.is-open .neda-user-caret { transform: rotate(180deg); } /* ---- Panel ------------------------------------------------ */ .neda-user-panel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 30; min-width: 244px; max-width: 300px; padding: 6px; background: var(--nh-white); border: 1px solid var(--nh-hairline); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); box-sizing: border-box; line-height: 1.3; overflow: visible; /* see the note at the top of section 15 */ } .neda-user-panel[hidden] { display: none; } /* ---- Panel head ------------------------------------------- */ .neda-user-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--nh-hairline); } .neda-user-head .neda-user-avatar { width: 42px; height: 42px; font-size: 15px; } .neda-user-identity { min-width: 0; } .neda-user-fullname { display: block; font-size: 15px; font-weight: 700; color: var(--nh-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .neda-user-email { display: block; font-size: 13px; color: rgba(0, 0, 0, 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .neda-user-email:empty { display: none; } /* ---- Items ------------------------------------------------ */ .neda-user-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--nh-black) !important; font-size: 15px; text-decoration: none !important; box-sizing: border-box; transition: background-color var(--nh-ease), color var(--nh-ease); } /* Every row behaves the same way: a plain link at rest, a solid CHERRY RED button on hover with white bold text. That includes the language row, which is a div rather than a link — it is listed here so the language selector cannot look like a button parked inside a menu. */ a.neda-user-item:hover, a.neda-user-item:focus, .neda-user-lang:hover, .neda-user-lang:focus-within { background-color: var(--nh-cherry); color: #FFFFFF !important; font-weight: 700; } .neda-user-item::before { content: ""; flex: 0 0 auto; width: 19px; height: 19px; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } /* Icon set. The script writes data-neda-icon; anything it does not recognise falls back to "link", so a new menu entry can be added in the script alone. */ .neda-user-item[data-neda-icon="user"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 5v3h16v-3c0-2.33-2.67-5-8-5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 5v3h16v-3c0-2.33-2.67-5-8-5Z'/%3E%3C/svg%3E"); } .neda-user-item[data-neda-icon="globe"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.93 6h-2.95a15.6 15.6 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.93 8ZM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96ZM4.26 14a8.06 8.06 0 0 1 0-4h3.38a16.6 16.6 0 0 0 0 4Zm.81 2h2.95c.35 1.25.82 2.45 1.38 3.56A7.99 7.99 0 0 1 5.07 16Zm2.95-8H5.07a7.99 7.99 0 0 1 4.33-3.56A15.6 15.6 0 0 0 8.02 8ZM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96ZM14.34 14H9.66a14.9 14.9 0 0 1 0-4h4.68a14.9 14.9 0 0 1 0 4Zm.26 5.56c.56-1.11 1.03-2.31 1.38-3.56h2.95a7.99 7.99 0 0 1-4.33 3.56ZM16.36 14a16.6 16.6 0 0 0 0-4h3.38a8.06 8.06 0 0 1 0 4Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.93 6h-2.95a15.6 15.6 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.93 8ZM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96ZM4.26 14a8.06 8.06 0 0 1 0-4h3.38a16.6 16.6 0 0 0 0 4Zm.81 2h2.95c.35 1.25.82 2.45 1.38 3.56A7.99 7.99 0 0 1 5.07 16Zm2.95-8H5.07a7.99 7.99 0 0 1 4.33-3.56A15.6 15.6 0 0 0 8.02 8ZM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96ZM14.34 14H9.66a14.9 14.9 0 0 1 0-4h4.68a14.9 14.9 0 0 1 0 4Zm.26 5.56c.56-1.11 1.03-2.31 1.38-3.56h2.95a7.99 7.99 0 0 1-4.33 3.56ZM16.36 14a16.6 16.6 0 0 0 0-4h3.38a8.06 8.06 0 0 1 0 4Z'/%3E%3C/svg%3E"); } .neda-user-item[data-neda-icon="logout"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 13v-2H7V8l-5 4 5 4v-3h9ZM20 3h-9a2 2 0 0 0-2 2v3h2V5h9v14h-9v-3H9v3a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 13v-2H7V8l-5 4 5 4v-3h9ZM20 3h-9a2 2 0 0 0-2 2v3h2V5h9v14h-9v-3H9v3a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z'/%3E%3C/svg%3E"); } .neda-user-item[data-neda-icon="dashboard"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3Zm10 0h8v5h-8V3ZM3 13h8v8H3v-8Zm10-3h8v11h-8V10Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3V3Zm10 0h8v5h-8V3ZM3 13h8v8H3v-8Zm10-3h8v11h-8V10Z'/%3E%3C/svg%3E"); } .neda-user-item[data-neda-icon="link"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm11-3v8h-2V6.41l-8.29 8.3-1.42-1.42 8.3-8.29H13V3Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Zm11-3v8h-2V6.41l-8.29 8.3-1.42-1.42 8.3-8.29H13V3Z'/%3E%3C/svg%3E"); } /* ---- The language row ------------------------------------- The GTranslate switcher is MOVED into this row by the script while the user is signed in. Section 6 dresses that widget as a STANDALONE CONTROL in the header — a white box with a hairline border and its own radius — which is exactly wrong inside a menu, where it read as a button sitting in a list. Everything that makes it a box is stripped here so the row looks like Profile and Log out: an icon, a label, and nothing else. The flags stay, because they are the fastest way to recognise a language. The overrides are marked !important because section 6 already uses !important on the same properties, and GTranslate itself writes inline styles onto the switcher after load. */ .neda-user-lang { gap: 10px; padding: 9px 10px; cursor: pointer; } .neda-user-lang .gtranslate_wrapper { flex: 1 1 auto; min-width: 0; line-height: 0; } .neda-user-lang #gt_float_wrapper, .neda-user-lang .gt_float_switcher { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-size: 15px !important; color: inherit !important; } .neda-user-lang .gt_float_switcher .gt-selected { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .neda-user-lang .gt_float_switcher .gt-selected .gt-current-lang { height: auto !important; padding: 0 !important; background: transparent !important; color: inherit !important; text-transform: none; font-weight: inherit; } /* The row is the hover target, so the label follows its colour instead of GTranslate's own. */ .neda-user-lang:hover .gt_float_switcher, .neda-user-lang:hover .gt-current-lang, .neda-user-lang:focus-within .gt_float_switcher, .neda-user-lang:focus-within .gt-current-lang { color: #FFFFFF !important; } /* The switcher's own caret is the affordance for its list, so it is kept — just recoloured with the row. */ .neda-user-lang .gt_float_switcher .gt-selected .gt-current-lang img { border-radius: 2px; } /* The list itself keeps GTranslate's white card. It must clear the panel edge and stay readable on its own background, which is why the row's white text is not inherited into it. */ .neda-user-lang .gt_float_switcher .gt_options { z-index: 40; } .neda-user-lang .gt_float_switcher .gt_options, .neda-user-lang .gt_float_switcher .gt_options a { color: #000000 !important; background-color: #FFFFFF !important; font-weight: 400 !important; } .neda-user-lang .gt_float_switcher .gt_options a:hover { background-color: var(--nh-cherry) !important; color: #FFFFFF !important; } /* ---- Scrolled state --------------------------------------- The bar is Black at 70% here, so the trigger has to invert. The PANEL never inverts: like the navigation dropdown in section 5, it stays white in every state. */ header.wp-block-template-part.is-neda-scrolled .neda-user-trigger { background: transparent; color: var(--nh-white); } header.wp-block-template-part.is-neda-scrolled .neda-user-trigger:hover, header.wp-block-template-part.is-neda-scrolled .neda-user-menu.is-open .neda-user-trigger { color: var(--nh-lime); } /* ---- Compact header --------------------------------------- Below 1200px, and whenever the script has collapsed the row, the greeting is dropped and the trigger becomes the avatar square plus its caret. The CARET STAYS at every width — it is the only thing marking the control as a menu once the words are gone. */ @media (max-width: 1199.98px) { .neda-user-name { display: none; } .neda-user-trigger { width: auto; gap: 4px; padding: 0; justify-content: center; } .neda-user-panel { position: fixed; top: calc(var(--nh-header-h, 76px) + 8px); inset-inline-end: 12px; inset-inline-start: auto; min-width: 240px; max-width: min(300px, calc(100vw - 24px)); } } .neda-header-row.is-neda-collapsed .neda-user-name, .neda-header-row.is-neda-collapsed .neda-user-caret { display: none; } .neda-header-row.is-neda-collapsed .neda-user-trigger { width: var(--nh-control); padding: 0; justify-content: center; } .neda-header-row.is-neda-tight .neda-user-name { max-width: 92px; } /* ---- Focus ring, matching section 14 ---------------------- */ .neda-user-trigger:focus-visible, .neda-user-item:focus-visible { outline: 3px solid #0EC4C5; outline-offset: 3px; border-radius: 10px; } @media (prefers-reduced-motion: reduce) { .neda-user-caret, .neda-user-trigger, .neda-user-item { transition: none !important; } } /* ========================================================= 17. FRONT PAGE — THE SEARCH BAR Added 2026-08-02. THE BRIEF On a phone it fills the row, with a small gutter each side. It then keeps THAT WIDTH as the screen grows, and once there is spare room it sits at the RIGHT — at the LEFT in Arabic and Persian. THE MEASUREMENT A 5.5" phone reports a 414px viewport, and the header's own gutter at that width is 15px a side, so the bar is 414 - 15 - 15 = 384px wide on that phone. 384px is therefore the cap it keeps for ever after. Below 414px it simply fills whatever row it has; above it, it stops growing. HOW IT IS BUILT The form reproduces the header row's box exactly - the same fluid gutter, the same 1200px measure - so the bar's right edge lands on the same vertical line as the logo, the menu and the account control above it, at EVERY width. Measured rather than guessed: the header gutter is 15px below 782px and min(5vw, 50px) above it, and the row is capped at 1200px inside that. The field itself is a flex item pushed to the end of that box. justify-content:flex-end is what does the alignment, and it is direction-aware by definition: flex-end is the right in LTR and the left in RTL, with no separate rule and nothing to keep in sync. WHAT IT OVERRIDES The block ships an inline width:50% on its inner wrapper and inline side margins on the form. Both are inline styles, so both need !important to reach. ========================================================= */ :is(body.home, body.neda-course-type) main form.wp-block-search { --ne-search-gutter: 15px; --ne-search-cap: 384px; display: flex; justify-content: flex-end; width: calc(100% - 2 * var(--ne-search-gutter)) !important; max-width: 1200px; margin-inline: auto !important; padding-inline: 0; box-sizing: border-box; } /* The header widens its gutter at the same breakpoint. */ @media (min-width: 782px) { :is(body.home, body.neda-course-type) main form.wp-block-search { --ne-search-gutter: min(5vw, 50px); } } /* The field plus its button. min() gives the two behaviours in one line: fluid while the row is narrower than the cap, locked at the cap once it is wider. */ :is(body.home, body.neda-course-type) main form.wp-block-search .wp-block-search__inside-wrapper { width: min(var(--ne-search-cap), 100%) !important; max-width: 100%; flex: 0 0 auto; } /* The gap between field and button is written by core as a physical margin-left, which puts it on the wrong side in RTL. Replaced with the logical equivalent. */ :is(body.home, body.neda-course-type) main form.wp-block-search .wp-block-search__button { margin-left: 0 !important; margin-inline-start: 12px !important; } /* 10px corners, per the Neda corner rule. The editor already wrote them inline on this block; these are here so the rule survives someone editing the block and losing them. */ :is(body.home, body.neda-course-type) main form.wp-block-search .wp-block-search__input, :is(body.home, body.neda-course-type) main form.wp-block-search .wp-block-search__button { border-radius: var(--nh-radius, 10px) !important; } :is(body.home, body.neda-course-type) main form.wp-block-search .wp-block-search__input { min-width: 0; border: 1px solid rgba(0, 0, 0, 0.18); } :is(body.home, body.neda-course-type) main form.wp-block-search .wp-block-search__input:focus-visible { outline: 3px solid #0EC4C5; outline-offset: 2px; } /* The submit button follows the button rule: cherry on hover, white text, and bold like every other button. */ :is(body.home, body.neda-course-type) main form.wp-block-search .wp-block-search__button { transition: background-color 0.15s ease, color 0.15s ease; } :is(body.home, body.neda-course-type) main form.wp-block-search .wp-block-search__button:hover, :is(body.home, body.neda-course-type) main form.wp-block-search .wp-block-search__button:focus-visible { background-color: #D7263D !important; color: #FFFFFF !important; border-color: #D7263D !important; }