/* ========================================================= NAVIGATION.CSS Interaction layer for the top bar: hover states and the "קטלוג" mega-menu. Loads AFTER header.css and overrides the few rules there that this replaces (the old flat hover and the two-piece active underline). The whole language: one 1.5px brand rule -- blue 70 / red 30, red always on the physical right -- that sweeps out from the centre of whatever the pointer is on, and settles permanently under the page you are actually on. Nothing moves, nothing grows, nothing changes colour abruptly. Every transition is on transform or opacity only, so it stays smooth. ========================================================= */ :root { --nav-blue: #005E8E; --nav-red: #CC2F3A; --nav-ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* the shared rule, as a background image so a single element carries both segments. `to left` starts at the physical right, so red sits on the right at every direction. */ .nav-rule-bg { background-image: linear-gradient(to left, var(--nav-red) 0 30%, var(--nav-blue) 30% 100%); } /* --------------------------------------------------------- 1 — TOP BAR LINKS --------------------------------------------------------- */ .site-navigation__link, .site-navigation__trigger { position: relative; color: var(--color-text); transition: color 240ms var(--nav-ease); } /* header.css turns the link blue on hover; the rule below does the work instead, so the text only deepens to black. */ .site-navigation__link:hover, .site-navigation__trigger:hover, .site-navigation__item--open .site-navigation__trigger { color: #000000; } /* The bar itself must own a stacking context, or the panel -- however high its z-index -- paints under the hero section below it, which is position:relative and comes later. */ .site-header { position: relative; z-index: 50; } /* header.css draws the active state as two separate coloured pseudo-elements. They are retired here at the same specificity it used, otherwise its `.is-active::after` keeps winning. */ .site-navigation__link::before, .site-navigation__link.is-active::before { content: none; } .site-navigation__link::after, .site-navigation__link.is-active::after, .site-navigation__trigger::after { content: ""; position: absolute; /* header.css pins its active underline with `right` + a % width. Those are cleared FIRST -- `inset-inline` writes to left/right, so a later `right: auto` would undo it and collapse the rule. */ right: auto; left: auto; width: auto; inset-inline: 0; bottom: -17px; height: 1.5px; background-color: transparent; background-image: linear-gradient(to left, var(--nav-red) 0 30%, var(--nav-blue) 30% 100%); transform: scaleX(0); transform-origin: center; transition: transform 420ms var(--nav-ease); pointer-events: none; } .site-navigation__link:hover::after, .site-navigation__link:focus-visible::after, .site-navigation__trigger:hover::after, .site-navigation__trigger:focus-visible::after, .site-navigation__item--open .site-navigation__trigger::after, .site-navigation__link.is-active::after, .site-navigation__trigger.is-active::after { transform: scaleX(1); } /* "מאמרים" HAS NO PAGE YET -- so it is hidden, not greyed out. It was already not a link: it is a , so it is not focusable and not clickable, and a screen reader never announced it as something to follow. What it still did was occupy a slot in the main navigation that promises content that is not there. Hiding the LIST ITEM rather than the span is deliberate: the nav row has a 56px gap between items, so hiding only the span would leave a 56px hole where the word used to be. :has() is already relied on elsewhere in this project, and this degrades safely -- a browser that does not support it simply shows the word again, exactly as today. To bring the item back when the articles page exists, delete this one rule and the class from the markup. The muted-ink rule below is kept so that the styling is still correct if the item is ever un-hidden; its #B4B2AE fails contrast, which is why it must not come back as visible non-link text. */ .site-navigation__item:has(.site-navigation__link--soon) { display: none; } .site-navigation__link--soon { color: #B4B2AE; cursor: default; pointer-events: none; } .site-navigation__link--soon::after { content: none; } /* the trigger is a real