/* ========================================================================== Rabeie Holding — WhatsApp contact. Everything WhatsApp-shaped lives here: the always-visible floating button (rb_wa_float) and the post-submission click-to-send panel (rb_wa_footer). design.css is NOT touched; this sheet is enqueued after it and only ever adds .rb-* selectors, plus one padding override on the footer so the floating button cannot sit on top of the footer links. Both languages, one sheet. Every directional value is a logical property, so the button that sits bottom-RIGHT on the English page mirrors to bottom-LEFT on the Persian one purely from . ========================================================================== */ :root{ /* The site's own success green (design.css uses rgba(122,168,116,…) for the ok state). Reusing it keeps WhatsApp inside the palette instead of dropping a bright #25D366 onto a dark, muted page. */ --rb-wa:#7AA874; --rb-wa-light:#A6CFA1; } /* -------------------------------------------------------------------------- FLOATING BUTTON -------------------------------------------------------------------------- */ .rb-fab{ position:fixed; inset-block-end:clamp(16px,2.6vw,26px); inset-inline-end:clamp(16px,2.6vw,26px); /* Below header.site (60) so an open mobile nav covers it, and well below the skip link (200). */ z-index:55; display:flex;flex-direction:column;align-items:flex-end;gap:10px; font-family:var(--sans,-apple-system,'Segoe UI',Arial,sans-serif); } html[lang="fa"] .rb-fab{font-family:var(--fa,'Vazirmatn',Tahoma,Arial,sans-serif)} /* The post-submission panel carries better links than this button does — they already contain the visitor's message — so while that panel is on screen the button withdraws rather than competing with it. */ .rb-fab.is-aside{ opacity:0;visibility:hidden;pointer-events:none; transform:translateY(10px); transition:opacity .3s ease,visibility .3s ease,transform .3s ease; } .rb-fab-btn{ display:inline-flex;align-items:center;gap:11px;cursor:pointer; background:rgba(14,16,12,.94); color:var(--rb-wa-light,#A6CFA1); border:1px solid var(--gold,#B99C5B); border-radius:999px; padding:12px 22px; font:inherit;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600; text-decoration:none; box-shadow:0 12px 34px rgba(0,0,0,.5); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:background .35s var(--ease,ease),color .35s var(--ease,ease),border-color .35s var(--ease,ease); } html[lang="fa"] .rb-fab-btn{letter-spacing:0;text-transform:none;font-size:.9rem;font-weight:500} .rb-fab-btn:hover, .rb-fab-btn[aria-expanded="true"]{ background:var(--rb-wa,#7AA874);color:#0E100C;border-color:var(--rb-wa,#7AA874); } .rb-fab-btn:focus-visible{outline:2px solid var(--gold-soft,#D9C593);outline-offset:3px} .rb-fab-btn .rb-wa-glyph{width:21px;height:21px;fill:currentColor;flex:none;display:block} /* -------------------------------------------------------------------------- THE TWO-NUMBER MENU One button cannot dial two countries, so it opens a short list instead. It is a real popover over real elements: keyboard users reach it with Tab, move with the arrow keys and dismiss with Escape (assets/app.js). -------------------------------------------------------------------------- */ .rb-fab-menu{ display:flex;flex-direction:column;min-width:246px; background:rgba(14,16,12,.97); border:1px solid rgba(185,156,91,.55); box-shadow:0 20px 48px rgba(0,0,0,.58); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); overflow:hidden; } .rb-fab-menu[hidden]{display:none} .rb-fab-title{ margin:0;padding:13px 18px 9px; font-size:.62rem;letter-spacing:.24em;text-transform:uppercase; color:var(--gold,#B99C5B);font-weight:600; } html[lang="fa"] .rb-fab-title{letter-spacing:0;text-transform:none;font-size:.8rem;font-weight:500} .rb-fab-item{ display:flex;flex-direction:column;gap:2px; padding:12px 18px;text-decoration:none; color:#F6F3EA;font-size:.94rem;line-height:1.5; border-block-start:1px solid rgba(255,255,255,.08); transition:background .25s ease,color .25s ease; } .rb-fab-item:hover{background:var(--rb-wa,#7AA874);color:#0E100C} .rb-fab-item:focus-visible{ background:var(--rb-wa,#7AA874);color:#0E100C; outline:2px solid var(--gold-soft,#D9C593);outline-offset:-2px; } .rb-fab-item-num{font-size:.8rem;opacity:.7;letter-spacing:.05em} .rb-fab-item:hover .rb-fab-item-num, .rb-fab-item:focus-visible .rb-fab-item-num{opacity:.85} /* -------------------------------------------------------------------------- ENTRANCE — opt-out honoured -------------------------------------------------------------------------- */ @keyframes rb-fab-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .rb-fab{animation:rb-fab-in .55s var(--ease,cubic-bezier(.22,.61,.24,1)) .35s both} @media (prefers-reduced-motion:reduce){ .rb-fab{animation:none;opacity:1;transform:none} .rb-fab.is-aside{transition:none;transform:none} .rb-fab-btn,.rb-fab-item{transition:none} } /* -------------------------------------------------------------------------- SMALL SCREENS The label is dropped and the button becomes a circle, so it cannot reach across to the form's submit button (which sits at the inline-START edge in both languages, i.e. always on the opposite side). The aria-label stays, so nothing is lost to a screen reader. -------------------------------------------------------------------------- */ @media (max-width:560px){ .rb-fab-btn{width:54px;height:54px;padding:0;justify-content:center;border-radius:50%} .rb-fab-btn .rb-wa-glyph{width:25px;height:25px} .rb-fab-text{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .rb-fab-menu{min-width:min(76vw,268px)} } /* Room at the very bottom of the page so the button never covers the footer links or the language switch. design.css leaves padding-block-end at 0. */ footer{padding-block-end:26px} @media (max-width:560px){ footer{padding-block-end:78px} } /* -------------------------------------------------------------------------- POST-SUBMISSION PANEL (rb_wa_footer) Was an inline