/* Homepage hero slider — replaces the old duplicate search bar. Slides are image-only; the optional per-slide call-to-action button is the only decoration, fully styled from admin-set CSS custom properties below. */ .home-hero-slider{ margin:0; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); } .home-hero-swiper{ position:relative; height:220px; } @media (min-width:640px){ .home-hero-swiper{ height:300px; } } @media (min-width:1024px){ .home-hero-swiper{ height:380px; } } .home-hero-slide{ position:relative; width:100%; height:100%; background-size:cover; background-position:center; } .home-hero-swiper .swiper-button-prev, .home-hero-swiper .swiper-button-next{ width:38px; height:38px; background:rgba(0,0,0,0.28); border-radius:50%; backdrop-filter:blur(2px); transition:background .2s ease; background-repeat:no-repeat; background-position:center; background-size:12px; } .home-hero-swiper .swiper-button-prev:hover, .home-hero-swiper .swiper-button-next:hover{ background-color:rgba(0,0,0,0.45); } .home-hero-swiper .swiper-button-prev:after, .home-hero-swiper .swiper-button-next:after{ content:'' !important; } .home-hero-swiper .swiper-button-prev{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .home-hero-swiper .swiper-button-next{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .home-hero-swiper.swiper-rtl .swiper-button-prev{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .home-hero-swiper.swiper-rtl .swiper-button-next{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .home-hero-swiper .swiper-pagination-bullet{ background:#fff; opacity:.6; width:8px; height:8px; } .home-hero-swiper .swiper-pagination-bullet-active{ opacity:1; background:#D98A3D; } /* --- Call-to-action button --- */ /* The wrap covers the whole slide and only aligns its flex child — this is what lets one button sit in any of the 9 positions without needing 9 different absolute-position rules. pointer-events:none keeps empty space from blocking Swiper's drag/tap, re-enabled on the button itself. direction:ltr pins flex-start/flex-end to the physical left/right so "top-left" means the same visual corner on RTL (Kurdish/Arabic/Persian) and LTR pages alike — admins pick positions by what they see, not by the site language. */ .home-hero-btn-wrap{ position:absolute; inset:0; display:flex; direction:ltr; padding:1rem 1.25rem; pointer-events:none; --hb-scale:1; box-sizing:border-box; } .home-hero-btn-wrap.hb-pos-top-left{ align-items:flex-start; justify-content:flex-start; } .home-hero-btn-wrap.hb-pos-top-center{ align-items:flex-start; justify-content:center; } .home-hero-btn-wrap.hb-pos-top-right{ align-items:flex-start; justify-content:flex-end; } .home-hero-btn-wrap.hb-pos-center-left{ align-items:center; justify-content:flex-start; } .home-hero-btn-wrap.hb-pos-center{ align-items:center; justify-content:center; } .home-hero-btn-wrap.hb-pos-center-right{ align-items:center; justify-content:flex-end; } .home-hero-btn-wrap.hb-pos-bottom-left{ align-items:flex-end; justify-content:flex-start; } .home-hero-btn-wrap.hb-pos-bottom-center{ align-items:flex-end; justify-content:center; } .home-hero-btn-wrap.hb-pos-bottom-right{ align-items:flex-end; justify-content:flex-end; } /* Width is intentionally never set — inline-flex sizes to text + padding. */ .home-hero-btn{ pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; text-decoration:none; cursor:pointer; background:var(--hb-bg,#111827); color:var(--hb-color,#fff); border-style:solid; border-color:var(--hb-border-color,transparent); border-width:var(--hb-border-width,0px); border-radius:var(--hb-radius,999px); opacity:var(--hb-opacity,1); font-size:calc(var(--hb-font-size,14px) * var(--hb-scale,1)); font-weight:var(--hb-font-weight,700); line-height:1.2; padding:calc(var(--hb-pad-y,10px) * var(--hb-scale,1)) calc(var(--hb-pad-x,20px) * var(--hb-scale,1)); transform:translate(var(--hb-offset-x,0px), var(--hb-offset-y,0px)); transition:filter .18s ease, opacity .18s ease, transform .18s ease; box-shadow:0 4px 16px rgba(0,0,0,0.18); } .home-hero-btn.hb-hover-darken:hover{ filter:brightness(0.85); } .home-hero-btn.hb-hover-lighten:hover{ filter:brightness(1.18); } .home-hero-btn.hb-hover-scale:hover{ transform:translate(var(--hb-offset-x,0px), var(--hb-offset-y,0px)) scale(1.06); } .home-hero-btn.hb-hover-underline:hover{ text-decoration:underline; } /* Position (justify/align) stays fixed across breakpoints; only the button's own font/padding shrink slightly so it keeps fitting and stays readable on narrow screens. */ @media (max-width:639px){ .home-hero-btn-wrap{ padding:.75rem .9rem; --hb-scale:.82; } } @media (min-width:640px) and (max-width:1023px){ .home-hero-btn-wrap{ --hb-scale:.92; } } /* --- Empty-state placeholder (shown only until an admin adds a real banner in admin-home-banners.php) --- */ .home-hero-placeholder{ position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; padding:1.5rem 4rem 2rem; text-align:center; } .home-hero-placeholder-cta{ color:#fff; font-size:1.3rem; font-weight:800; line-height:1.35; text-shadow:0 2px 10px rgba(0,0,0,0.35); max-width:32rem; } @media (min-width:640px){ .home-hero-placeholder-cta{ font-size:1.7rem; } } @media (max-width:639px){ .home-hero-placeholder{ padding:1.1rem 3rem 1.5rem; } }