, later in
document order than this block. An equal-specificity override would
lose the tie. "html body ..." is (0,2,2) and wins on specificity instead.
NOTE: no backticks anywhere in this block. The whole stylesheet is a JS
template literal, so one backtick in a comment ends the string and the build
dies with a parse error pointing at the next CSS property.
No ::before is used for the glow: the drawer is a flex column, so a
pseudo-element would become a flex ITEM and push the first menu row down.
The wash is a background layer instead. */
html body [data-webydo-header-drawer][aria-hidden]{
background:
radial-gradient(340px 240px at 100% 0,rgba(242,135,31,.18),transparent 70%),
linear-gradient(180deg,#1d1d23 0%,#151518 58%,#101013 100%) !important;
/* PHYSICAL left, not inline-start. The platform pins this drawer to the physical RIGHT edge
with !important regardless of direction, so in RTL its inline-START is the screen edge and an
accent there is invisible. The edge a person actually sees is the left one. */
border-left:3px solid var(--gold) !important;
box-shadow:-14px 0 46px rgba(0,0,0,.55) !important;
}
html body [data-webydo-header-drawer][aria-hidden] a{
color:#f4f2ee !important;
border-bottom:1px solid rgba(242,135,31,.18) !important;
}
html body [data-webydo-header-drawer][aria-hidden] a:hover,
html body [data-webydo-header-drawer][aria-hidden] a:focus-visible{
color:var(--gold) !important;
}
html body [data-webydo-header-drawer] a[data-hs-drawer-child]{
border-inline-start:2px solid rgba(242,135,31,.55) !important;
}
html body [data-webydo-header-drawer] [data-webydo-submenu-toggle]{
color:#f4f2ee !important;
}
html body [data-webydo-header-drawer] [data-webydo-drawer-close]{
color:var(--gold) !important;
}
/* ── buttons: a little light across the face on hover ───────────────────── */
.btn-primary{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.btn-primary::after{
content:"";position:absolute;inset-block:0;inset-inline-start:-60%;width:45%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
transform:skewX(-18deg);transition:inset-inline-start .55s cubic-bezier(.2,.7,.3,1);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(242,135,31,.65)}
.btn-primary:hover::after{inset-inline-start:130%}
/* ── one accessible focus ring for the whole page ───────────────────────── */
a:focus-visible,button:focus-visible,.btn-primary:focus-visible,video:focus-visible{
outline:3px solid var(--gold);outline-offset:3px;border-radius:6px;
}
/* ── section eyebrows get their hairline back ───────────────────────────── */
.s-eyebrow{display:inline-flex;align-items:center;gap:.55rem}
.s-eyebrow::before{
content:"";width:26px;height:2px;border-radius:2px;background:var(--gold);opacity:.8;
}
/* ── mobile: the film is the one thing that must not be cramped ─────────── */
@media (max-width:640px){
.film-frame{border-radius:12px}
.film-chrome span{display:none}
.film-note{font-size:.86rem}
}
/* ── motion, but only for people who want it ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
.pipe-step,.pipe-num,.btn-primary,.btn-primary::after{transition:none!important}
.pipe-step:hover{transform:none}
}
קידום פלוס – בניית אתרים ושיווק דיגיטלי
