/* ═══════════════════════════════════════════════════════════ FERTILITY FOUNT — Hero Banner Carousel v6.0 ═══════════════════════════════════════════════════════════ - Full-bleed images, all slides fixed height - Bright white-based overlays (never dark) - Proper left/right/center content placement - Smooth fade transition between slides - Clinic brand logos on featured slides - Premium Fraunces + Outfit typography PREFIX: ff-hero-* ═══════════════════════════════════════════════════════════ */ @media(min-width:1440px){:root{--ff-hero-h:520px}} @media(max-width:1023px){:root{--ff-hero-h:440px}} @media(max-width:767px){:root{--ff-hero-h:420px}} @media(max-width:420px){:root{--ff-hero-h:400px}} @keyframes ff-hero-fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @keyframes ff-hero-progressFill{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ═══ HERO WRAPPER ═══ */ .ff-hero{position:relative;width:100%;background:var(--ff-white);border-bottom:1px solid var(--ff-sep)} .ff-hero-swiper{width:100%;overflow:hidden;height:var(--ff-hero-h)} .ff-hero-swiper .swiper-slide{height:var(--ff-hero-h)} /* ═══ SLIDE ═══ */ .ff-hero-slide{ position:relative;width:100%;height:100%; display:flex;align-items:center;overflow:hidden; } /* ═══ IMAGE — full-bleed, no zoom ═══ */ .ff-hero-img{position:absolute;inset:0;z-index:0} .ff-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block} /* ═══ OVERLAYS — white-based, bright ═══ */ .ff-hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none} .ff-hero-overlay--left{ background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 15%, rgba(255,255,255,.78) 30%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.28) 60%, rgba(255,255,255,.08) 75%, transparent 100% ); } .ff-hero-overlay--right{ background:linear-gradient(270deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 15%, rgba(255,255,255,.78) 30%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.28) 60%, rgba(255,255,255,.08) 75%, transparent 100% ); } .ff-hero-overlay--center{ background: linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,.15) 30%,rgba(255,255,255,.45) 70%,rgba(255,255,255,.75) 100%), radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.35) 40%,transparent 70%); } .ff-hero-overlay--none{background:transparent} /* Gradient BG slides */ .ff-hero-grad--sky{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 30%,#e0f2fe 60%,#f0f9ff 100%)} .ff-hero-grad--dots::before{ content:'';position:absolute;inset:0;z-index:0; background-image:radial-gradient(circle,rgba(0,119,182,.04) 1px,transparent 1px); background-size:20px 20px;pointer-events:none; } /* ═══════════════════════════════════════════════════════════ CONTENT — proper left/right/center placement Uses a full-width inner wrapper (max-width:1600px centered) then a content box that sits left, right, or center WITHIN it. ═══════════════════════════════════════════════════════════ */ .ff-hero-inner{ position:relative;z-index:2; width:100%;max-width:1600px; margin:0 auto; padding:0 clamp(28px,5vw,72px); display:flex; align-items:center; height:100%; } /* Content block — the actual text column */ .ff-hero-content{ display:flex;flex-direction:column;gap:12px; max-width:540px; } /* LEFT — content flush left (default) */ .ff-hero-inner--left{justify-content:flex-start} .ff-hero-inner--left .ff-hero-content{align-items:flex-start;text-align:left} /* RIGHT — content flush right */ .ff-hero-inner--right{justify-content:flex-end} .ff-hero-inner--right .ff-hero-content{align-items:flex-end;text-align:right} .ff-hero-inner--right .ff-hero-cta-wrap{justify-content:flex-end} .ff-hero-inner--right .ff-hero-meta{justify-content:flex-end} .ff-hero-inner--right .ff-hero-brand{justify-content:flex-end} .ff-hero-inner--right .ff-hero-brand-name{text-align:right} /* CENTER — content centered */ .ff-hero-inner--center{justify-content:center} .ff-hero-inner--center .ff-hero-content{align-items:center;text-align:center;max-width:620px} .ff-hero-inner--center .ff-hero-cta-wrap{justify-content:center} .ff-hero-inner--center .ff-hero-meta{justify-content:center} /* ─── Stagger entrance ─── */ .swiper-slide-active .ff-hero-content > *{animation:ff-hero-fadeUp .5s var(--ff-ease) both} .swiper-slide-active .ff-hero-brand{animation-delay:.03s} .swiper-slide-active .ff-hero-doctor{animation-delay:.03s} .swiper-slide-active .ff-hero-tag{animation-delay:.07s} .swiper-slide-active .ff-hero-title{animation-delay:.14s} .swiper-slide-active .ff-hero-sub{animation-delay:.22s} .swiper-slide-active .ff-hero-announce-badge{animation-delay:.28s} .swiper-slide-active .ff-hero-cta-wrap{animation-delay:.3s} .swiper-slide-active .ff-hero-meta{animation-delay:.36s} .swiper-slide:not(.swiper-slide-active) .ff-hero-content > *{opacity:0;transform:translateY(18px)} /* ═══ BRAND LOGO — clinic/sponsor logo ═══ */ .ff-hero-brand{ display:flex;align-items:center;gap:12px; margin-bottom:2px; } .ff-hero-brand-logo{ width:44px;height:44px;border-radius:10px; object-fit:contain; background:var(--ff-white); box-shadow:0 1px 6px rgba(0,0,0,.06); border:1px solid var(--ff-border); padding:4px; } .ff-hero-brand-name{ font-family:var(--ff-font); font-size:13px;font-weight:600; color:var(--ff-text-3); letter-spacing:.01em; line-height:1.3; } .ff-hero-brand-name small{ display:block;font-size:11px;font-weight:400; color:var(--ff-text-4);margin-top:1px; } /* ═══ TAG ═══ */ .ff-hero-tag{ display:inline-flex;align-items:center;gap:6px; padding:5px 14px;border-radius:100px; font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase; line-height:1.3;width:fit-content; } .ff-hero-tag i{font-size:8.5px} .ff-hero-tag--sponsored{background:rgba(255,140,0,.1);color:#b86e00;border:1px solid rgba(255,140,0,.12)} .ff-hero-tag--featured{background:rgba(0,119,182,.08);color:var(--ff-blue-deep);border:1px solid rgba(0,119,182,.1)} .ff-hero-tag--clinic{background:rgba(216,27,96,.07);color:var(--ff-pink-dark);border:1px solid rgba(216,27,96,.08)} .ff-hero-tag--explore{background:rgba(5,150,105,.07);color:#047857;border:1px solid rgba(5,150,105,.08)} .ff-hero-tag--doctor{background:rgba(124,58,237,.07);color:#6d28d9;border:1px solid rgba(124,58,237,.08)} .ff-hero-tag--announcement{background:rgba(0,119,182,.06);color:var(--ff-blue-deep);border:1px solid rgba(0,119,182,.08)} /* ═══ DOCTOR PROFILE — avatar + credentials ═══ */ .ff-hero-doctor{ display:flex;align-items:center;gap:14px;margin-bottom:2px; } .ff-hero-doctor-avatar{ width:64px;height:64px;border-radius:50%; object-fit:cover;object-position:top center; border:3px solid var(--ff-white); box-shadow:0 2px 12px rgba(0,0,0,.08); flex-shrink:0; } .ff-hero-doctor-info{display:flex;flex-direction:column;gap:2px} .ff-hero-doctor-name{ font-family:var(--ff-font);font-size:15px;font-weight:700; color:var(--ff-text);line-height:1.3; } .ff-hero-doctor-spec{ font-size:12.5px;font-weight:500;color:var(--ff-text-3);line-height:1.3; } .ff-hero-doctor-clinic{ font-size:11.5px;font-weight:400;color:var(--ff-text-4); display:flex;align-items:center;gap:4px; } .ff-hero-doctor-clinic i{font-size:9px} /* Right-aligned doctor */ .ff-hero-inner--right .ff-hero-doctor{flex-direction:row-reverse} .ff-hero-inner--right .ff-hero-doctor-info{align-items:flex-end;text-align:right} /* ═══ ANNOUNCEMENT BADGE ═══ */ .ff-hero-announce-badge{ display:inline-flex;align-items:center;gap:8px; padding:8px 18px;border-radius:var(--ff-r-sm); background:rgba(0,119,182,.05); border:1px solid rgba(0,119,182,.08); font-size:12.5px;font-weight:600;color:var(--ff-blue); width:fit-content; } .ff-hero-announce-badge i{font-size:14px} /* Announcement gradient */ .ff-hero-grad--ocean{ background:linear-gradient(135deg,#e0f2fe 0%,#bae6fd 20%,#e0f7fa 45%,#f0fdfa 70%,#f0f9ff 100%); } /* ═══ TITLE ═══ */ .ff-hero-title{ font-family:var(--ff-serif); font-size:clamp(25px,3.8vw,44px); font-weight:600;color:var(--ff-text); line-height:1.18;letter-spacing:-.015em; } /* ═══ SUBTITLE ═══ */ .ff-hero-sub{ font-size:clamp(13.5px,1.3vw,16px); font-weight:400;color:var(--ff-text-2); line-height:1.6;letter-spacing:.005em; max-width:480px; } /* ═══ CTA BUTTONS ═══ */ .ff-hero-cta-wrap{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px} .ff-hero-cta{ display:inline-flex;align-items:center;gap:8px; padding:12px 26px;border-radius:100px; font-size:13.5px;font-weight:600;letter-spacing:.01em; transition:all .3s var(--ff-ease); } .ff-hero-cta:hover{transform:translateY(-2px)} .ff-hero-cta:active{transform:translateY(0) scale(.97)} .ff-hero-cta i{font-size:11px;transition:transform .3s var(--ff-ease)} .ff-hero-cta:hover i.fa-arrow-right{transform:translateX(3px)} .ff-hero-cta--blue{background:var(--ff-blue);color:var(--ff-white);box-shadow:0 2px 12px rgba(0,119,182,.2)} .ff-hero-cta--blue:hover{box-shadow:0 6px 24px rgba(0,119,182,.25)} .ff-hero-cta--pink{background:var(--ff-pink);color:var(--ff-white);box-shadow:0 2px 12px rgba(216,27,96,.2)} .ff-hero-cta--pink:hover{box-shadow:0 6px 24px rgba(216,27,96,.25)} .ff-hero-cta--orange{background:var(--ff-orange);color:var(--ff-white);box-shadow:0 2px 12px rgba(255,140,0,.2)} .ff-hero-cta--orange:hover{box-shadow:0 6px 24px rgba(255,140,0,.25)} .ff-hero-cta--soft{ background:var(--ff-white);color:var(--ff-blue); box-shadow:0 1px 4px rgba(0,0,0,.05);border:1px solid rgba(0,119,182,.12); } .ff-hero-cta--soft:hover{background:rgba(0,119,182,.03);box-shadow:0 4px 14px rgba(0,119,182,.08)} .ff-hero-cta--soft-pink{ background:var(--ff-white);color:var(--ff-pink); box-shadow:0 1px 4px rgba(0,0,0,.05);border:1px solid rgba(216,27,96,.1); } .ff-hero-cta--soft-pink:hover{background:rgba(216,27,96,.03);box-shadow:0 4px 14px rgba(216,27,96,.08)} /* ═══ META LINE ═══ */ .ff-hero-meta{ display:flex;align-items:center;gap:10px;flex-wrap:wrap; font-size:12.5px;color:var(--ff-text-3);margin-top:2px; } .ff-hero-meta i{font-size:10.5px} .ff-hero-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--ff-text-4);flex-shrink:0} .ff-hero-stars{display:flex;gap:1.5px;color:#F59E0B} .ff-hero-stars i{font-size:11.5px} .ff-hero-verified{ display:inline-flex;align-items:center;gap:4px; padding:3px 9px 3px 7px;border-radius:100px; font-size:10.5px;font-weight:600; background:rgba(5,150,105,.07);color:#047857;border:1px solid rgba(5,150,105,.08); } .ff-hero-verified i{font-size:9.5px} /* ═══ PAGINATION ═══ */ .ff-hero-swiper .ff-hero-pagination{ bottom:16px !important; display:flex;align-items:center;justify-content:center;gap:7px; } .ff-hero-swiper .ff-hero-pagination .swiper-pagination-bullet{ width:8px;height:8px;border-radius:50%; background:rgba(0,119,182,.18);opacity:1;margin:0 !important; transition:all .35s var(--ff-ease); } .ff-hero-swiper .ff-hero-pagination .swiper-pagination-bullet:hover{background:rgba(0,119,182,.35)} .ff-hero-swiper .ff-hero-pagination .swiper-pagination-bullet-active{ width:28px;border-radius:100px;background:var(--ff-blue); } /* ═══ NAVIGATION ARROWS ═══ */ .ff-hero-swiper .ff-hero-prev, .ff-hero-swiper .ff-hero-next{ width:42px;height:42px;border-radius:50%; background:rgba(255,255,255,.88); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border:1px solid rgba(0,0,0,.04); box-shadow:0 2px 8px rgba(0,0,0,.05); color:var(--ff-text-2); opacity:0;transition:all .3s var(--ff-ease);z-index:12; } .ff-hero-swiper .ff-hero-prev::after, .ff-hero-swiper .ff-hero-next::after{font-size:13px;color:var(--ff-text-2)} .ff-hero:hover .ff-hero-prev, .ff-hero:hover .ff-hero-next{opacity:1} .ff-hero-swiper .ff-hero-prev:hover, .ff-hero-swiper .ff-hero-next:hover{ background:var(--ff-blue);border-color:var(--ff-blue); box-shadow:0 4px 14px rgba(0,119,182,.18); transform:translateY(-50%) scale(1.04); } .ff-hero-swiper .ff-hero-prev:hover::after, .ff-hero-swiper .ff-hero-next:hover::after{color:var(--ff-white)} .ff-hero-swiper .ff-hero-prev{left:clamp(10px,2vw,22px)} .ff-hero-swiper .ff-hero-next{right:clamp(10px,2vw,22px)} /* ═══ PROGRESS BAR ═══ */ .ff-hero-progress{ position:absolute;bottom:0;left:0;z-index:12; width:100%;height:3px;background:rgba(0,119,182,.05);overflow:hidden; } .ff-hero-progress-bar{ height:100%;background:linear-gradient(90deg,var(--ff-blue),var(--ff-pink)); transform-origin:left;transform:scaleX(0); } .ff-hero-progress-bar.ff-hero-progress-on{animation:ff-hero-progressFill 5s linear forwards} .ff-hero.ff-hero-paused .ff-hero-progress-bar{animation-play-state:paused} /* ═══ RESPONSIVE ═══ */ /* ── Tablet: optimized text sizes ── */ @media(max-width:1023px){ .ff-hero-title{font-size:clamp(22px,3.5vw,32px)} .ff-hero-sub{font-size:clamp(12.5px,1.2vw,14px);max-width:70%} .ff-hero-inner{padding:0 clamp(24px,4vw,48px)} .ff-hero-content{gap:10px} .ff-hero-cta{padding:10px 20px;font-size:13px} .ff-hero-meta{font-size:11.5px} .ff-hero-brand-name{font-size:12px} .ff-hero-brand-name small{font-size:10px} .ff-hero-doctor-name{font-size:14px} .ff-hero-doctor-spec{font-size:12px} } /* ── Mobile ── */ @media(max-width:767px){ /* Arrows hidden — swipe only */ .ff-hero-swiper .ff-hero-prev, .ff-hero-swiper .ff-hero-next{display:none} /* ── All content becomes left-aligned on mobile ── */ .ff-hero-inner{padding:0 20px} .ff-hero-inner--right{justify-content:flex-start !important} .ff-hero-inner--right .ff-hero-content{align-items:flex-start !important;text-align:left !important} .ff-hero-inner--center{justify-content:flex-start !important} .ff-hero-inner--center .ff-hero-content{align-items:flex-start !important;text-align:left !important} /* Force all child flex containers to left on mobile */ .ff-hero-content{max-width:100% !important;gap:9px} .ff-hero-cta-wrap{justify-content:flex-start !important} .ff-hero-meta{justify-content:flex-start !important} .ff-hero-brand{justify-content:flex-start !important;flex-direction:row !important} .ff-hero-brand-name{text-align:left !important} /* ── Doctor row resets to left ── */ .ff-hero-doctor{flex-direction:row !important;gap:10px} .ff-hero-doctor-info{align-items:flex-start !important;text-align:left !important} .ff-hero-doctor-avatar{width:50px;height:50px;border-width:2px} .ff-hero-doctor-name{font-size:13px} .ff-hero-doctor-spec{font-size:11px} .ff-hero-doctor-clinic{font-size:10.5px} /* ── Overlay: stronger on mobile for readability ── */ .ff-hero-overlay--left{ background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 20%, rgba(255,255,255,.85) 40%, rgba(255,255,255,.65) 58%, rgba(255,255,255,.35) 72%, rgba(255,255,255,.1) 85%, transparent 100% ) !important; } .ff-hero-overlay--right{ background:linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 20%, rgba(255,255,255,.85) 40%, rgba(255,255,255,.65) 58%, rgba(255,255,255,.35) 72%, rgba(255,255,255,.1) 85%, transparent 100% ) !important; } .ff-hero-overlay--center{ background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 20%, rgba(255,255,255,.8) 38%, rgba(255,255,255,.55) 55%, rgba(255,255,255,.25) 72%, transparent 100% ) !important; } /* ── Typography: mobile-optimised — compact and readable ── */ .ff-hero-title{font-size:clamp(18px,5vw,24px);line-height:1.2;letter-spacing:-.01em} .ff-hero-sub{font-size:12px;line-height:1.45;max-width:85%} .ff-hero-tag{font-size:9px;padding:3px 10px;letter-spacing:.4px} .ff-hero-tag i{font-size:7.5px} /* ── CTAs: compact ── */ .ff-hero-cta{padding:9px 16px;font-size:11.5px;gap:5px;border-radius:100px} .ff-hero-cta i{font-size:9.5px} .ff-hero-cta-wrap{gap:7px;margin-top:2px} /* ── Meta: compact single row ── */ .ff-hero-meta{font-size:10px;gap:6px;margin-top:0} .ff-hero-meta i{font-size:9px} .ff-hero-stars i{font-size:9.5px} .ff-hero-verified{font-size:9px;padding:2px 7px 2px 5px;gap:3px} .ff-hero-verified i{font-size:8px} .ff-hero-meta-dot{width:2.5px;height:2.5px} /* ── Brand logo: smaller ── */ .ff-hero-brand{gap:10px;margin-bottom:0} .ff-hero-brand-logo{width:34px;height:34px;border-radius:8px;padding:3px} .ff-hero-brand-name{font-size:12px} .ff-hero-brand-name small{font-size:10px} /* ── Accent line ── */ .ff-hero-accent{width:32px;height:2.5px} /* ── Announcement badge ── */ .ff-hero-announce-badge{font-size:11px;padding:6px 12px;gap:6px} .ff-hero-announce-badge i{font-size:12px} /* ── Pagination: closer to bottom ── */ .ff-hero-swiper .ff-hero-pagination{bottom:10px !important;gap:5px} .ff-hero-swiper .ff-hero-pagination .swiper-pagination-bullet{width:6px;height:6px} .ff-hero-swiper .ff-hero-pagination .swiper-pagination-bullet-active{width:20px} } /* ── Extra small phones ── */ @media(max-width:380px){ .ff-hero-inner{padding:0 16px} .ff-hero-title{font-size:17px} .ff-hero-sub{font-size:11px;max-width:90%} .ff-hero-cta{padding:8px 14px;font-size:11px} .ff-hero-brand-logo{width:30px;height:30px} .ff-hero-brand-name{font-size:11px} .ff-hero-brand-name small{font-size:9px} .ff-hero-doctor-avatar{width:42px;height:42px} .ff-hero-doctor-name{font-size:12px} .ff-hero-doctor-spec{font-size:10px} .ff-hero-doctor-clinic{font-size:9.5px} } @media(prefers-reduced-motion:reduce){ .swiper-slide-active .ff-hero-content > *{animation:none !important;opacity:1 !important;transform:none !important} .swiper-slide:not(.swiper-slide-active) .ff-hero-content > *{opacity:1;transform:none} .ff-hero-progress-bar{animation:none !important;transform:scaleX(1) !important} } /* ═══════════════════════════════════════════════════════════ FERTILITY FOUNT — Homepage Counter Section ═══════════════════════════════════════════════════════════ Version: 9.0 PREFIX: ff-hp-cou-* LAYOUT: ┌──────────────────────────────────┐ │ [ICON] 12,000+ │ ← icon left + number/title right │ Clinic Listed │ │ │ │ A growing network of fertility │ ← description full width, centered │ clinics, making it easier... │ └──────────────────────────────────┘ HOVER: - Background → soft brand color - Number + title + description → brand color - Icon turns to brand color via CSS filter (no JS) - Divider fades out, icon scales up ═══════════════════════════════════════════════════════════ */ .ff-hp-cou{width:100%;background:var(--ff-white);border-bottom:0px solid var(--ff-sep)} .ff-hp-cou-grid{display:grid;grid-template-columns:repeat(6,1fr)} .ff-hp-cou-card{ padding:22px clamp(14px,1.6vw,24px) 18px; position:relative;cursor:default; transition:all .3s var(--ff-ease); } .ff-hp-cou-card:hover{ box-shadow:0 4px 20px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.03); } .ff-hp-cou-card::after{ content:'';position:absolute;right:0;top:14%;height:72%;width:1px; background:var(--ff-sep);transition:opacity .3s var(--ff-ease); } .ff-hp-cou-card:last-child::after{display:none} .ff-hp-cou-card:hover::after{opacity:0} .ff-hp-cou-top{display:flex;align-items:center;gap:12px;margin-bottom:10px} .ff-hp-cou-ico{width:42px;height:42px;flex-shrink:0;transition:transform .3s var(--ff-ease)} .ff-hp-cou-ico img{width:100%;height:100%;object-fit:contain;transition:filter .3s var(--ff-ease);opacity:.55} .ff-hp-cou-card:hover .ff-hp-cou-ico{transform:scale(1.1)} .ff-hp-cou-card:hover .ff-hp-cou-ico img{opacity:1} /* Icon turns to card's brand color on hover — pure CSS, no JS */ .ff-hp-cou-card[data-color="blue"]:hover .ff-hp-cou-ico img{filter:brightness(0) invert(30%) sepia(98%) saturate(1800%) hue-rotate(178deg) brightness(96%)} .ff-hp-cou-card[data-color="orange"]:hover .ff-hp-cou-ico img{filter:brightness(0) invert(50%) sepia(100%) saturate(2000%) hue-rotate(18deg) brightness(105%)} .ff-hp-cou-card[data-color="green"]:hover .ff-hp-cou-ico img{filter:brightness(0) invert(35%) sepia(80%) saturate(800%) hue-rotate(130deg) brightness(95%)} .ff-hp-cou-card[data-color="purple"]:hover .ff-hp-cou-ico img{filter:brightness(0) invert(20%) sepia(90%) saturate(5000%) hue-rotate(252deg) brightness(90%)} .ff-hp-cou-card[data-color="pink"]:hover .ff-hp-cou-ico img{filter:brightness(0) invert(15%) sepia(95%) saturate(6000%) hue-rotate(330deg) brightness(90%)} .ff-hp-cou-card[data-color="amber"]:hover .ff-hp-cou-ico img{filter:brightness(0) invert(42%) sepia(99%) saturate(1500%) hue-rotate(25deg) brightness(100%)} .ff-hp-cou-head{min-width:0} .ff-hp-cou-num{font-size:clamp(20px,2.2vw,26px);font-weight:800;color:var(--ff-blue);line-height:1.15;letter-spacing:-.01em;transition:color .3s var(--ff-ease)} .ff-hp-cou-title{font-size:clamp(12px,1vw,13.5px);font-weight:700;color:var(--ff-text);line-height:1.3;transition:color .3s var(--ff-ease)} .ff-hp-cou-desc{font-size:clamp(10.5px,.85vw,11.5px);font-weight:400;color:var(--ff-text-4);line-height:1.5;text-align:center;transition:color .3s var(--ff-ease)} /* Hover text colors — background stays white, icon colored via CSS filter above */ .ff-hp-cou-card[data-color="blue"]:hover .ff-hp-cou-num{color:var(--ff-blue-deep)} .ff-hp-cou-card[data-color="blue"]:hover .ff-hp-cou-title{color:var(--ff-blue-deep)} .ff-hp-cou-card[data-color="blue"]:hover .ff-hp-cou-desc{color:var(--ff-blue)} .ff-hp-cou-card[data-color="orange"]:hover .ff-hp-cou-num{color:#c47200} .ff-hp-cou-card[data-color="orange"]:hover .ff-hp-cou-title{color:#c47200} .ff-hp-cou-card[data-color="orange"]:hover .ff-hp-cou-desc{color:var(--ff-orange)} .ff-hp-cou-card[data-color="green"]:hover .ff-hp-cou-num{color:#047857} .ff-hp-cou-card[data-color="green"]:hover .ff-hp-cou-title{color:#047857} .ff-hp-cou-card[data-color="green"]:hover .ff-hp-cou-desc{color:var(--ff-green)} .ff-hp-cou-card[data-color="purple"]:hover .ff-hp-cou-num{color:#5b21b6} .ff-hp-cou-card[data-color="purple"]:hover .ff-hp-cou-title{color:#5b21b6} .ff-hp-cou-card[data-color="purple"]:hover .ff-hp-cou-desc{color:var(--ff-purple)} .ff-hp-cou-card[data-color="pink"]:hover .ff-hp-cou-num{color:var(--ff-pink)} .ff-hp-cou-card[data-color="pink"]:hover .ff-hp-cou-title{color:var(--ff-pink)} .ff-hp-cou-card[data-color="pink"]:hover .ff-hp-cou-desc{color:var(--ff-pink)} .ff-hp-cou-card[data-color="amber"]:hover .ff-hp-cou-num{color:#92400e} .ff-hp-cou-card[data-color="amber"]:hover .ff-hp-cou-title{color:#92400e} .ff-hp-cou-card[data-color="amber"]:hover .ff-hp-cou-desc{color:var(--ff-amber)} /* Tablet + Small screens — single row scroll, white cards with premium shadow */ @media(max-width:1100px){ .ff-hp-cou{overflow:hidden;background:var(--ff-bg-2);padding:0px 0} .ff-hp-cou-grid{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; scroll-padding-left:clamp(16px,3vw,40px); } .ff-hp-cou-grid::-webkit-scrollbar{display:none} .ff-hp-cou-card{ flex:0 0 auto;min-width:200px;width:200px;scroll-snap-align:start; padding:18px 16px 14px; background:var(--ff-white); box-shadow:0 2px 12px rgba(0,0,0,.04),0 0 0 1px rgba(0,0,0,.03); } .ff-hp-cou-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04)} .ff-hp-cou-card::after{display:none !important} .ff-hp-cou-card:nth-child(n+4){border-top:none} } /* Mobile — slightly smaller cards */ @media(max-width:600px){ .ff-hp-cou-grid{scroll-padding-left:0px} .ff-hp-cou-card{min-width:155px;padding:14px 12px 12px;border-radius:0px} .ff-hp-cou-top{gap:8px;margin-bottom:6px} .ff-hp-cou-ico{width:30px;height:30px} .ff-hp-cou-num{font-size:18px} .ff-hp-cou-title{font-size:11px} .ff-hp-cou-desc{font-size:9.5px;line-height:1.4} } @media(max-width:380px){.ff-hp-cou-card{min-width:145px}} /* ═══════════════════════════════════════════════════════════ FERTILITY FOUNT — Featured Clinics ═══════════════════════════════════════════════════════════ Version: 4.0 PREFIX: ff-hp-fc-* FEATURES: - Flag images (not emoji) for cross-platform rendering - Checkbox-style save/bookmark with toggle state - Auto-scroll Swiper, pauses on hover - Country flags next to location - Clean elegant card design - Native app feel on mobile ═══════════════════════════════════════════════════════════ */ /* ═══ SECTION ═══ */ .ff-hp-fc{ width:100%; background:var(--ff-bg-page); padding:32px 0 36px; } /* ═══ HEADER ═══ */ .ff-hp-fc-hd{ margin:0 auto; padding:0 clamp(20px,4vw,56px); display:flex;align-items:center;justify-content:space-between; margin-bottom:18px; } .ff-hp-fc-label{font-size:18px;font-weight:700;color:var(--ff-text);font-family: var(--ff-font);} .ff-hp-fc-all{ font-size:13px;font-weight:600;color:var(--ff-blue); display:flex;align-items:center;gap:5px; transition:gap .2s var(--ff-ease); } .ff-hp-fc-all:hover{gap:8px} .ff-hp-fc-all i{font-size:10px} /* ═══ SWIPER ═══ */ .ff-hp-fc-wrap{ margin:0 auto; padding:0 clamp(20px,4vw,56px); position:relative; } .ff-hp-fc-wrap .swiper-slide{height:auto} /* ═══ CARD ═══ */ .ff-hp-fc-card{ background:var(--ff-white); border-radius:var(--ff-r-md); overflow:hidden; display:flex;flex-direction:column; height:100%; box-shadow:var(--ff-sh-sm); border:1px solid var(--ff-border); transition:all .3s var(--ff-ease); } .ff-hp-fc-card:hover{ box-shadow:0 6px 24px rgba(0,0,0,.08); transform:translateY(-2px); border-color:rgba(0,119,182,.1); } /* ═══ IMAGE ═══ */ .ff-hp-fc-img{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--ff-bg-2); } .ff-hp-fc-img img{ width:100%;height:100%;object-fit:cover; transition:transform .5s var(--ff-ease); } .ff-hp-fc-card:hover .ff-hp-fc-img img{transform:scale(1.03)} /* ═══ BOOKMARK — hidden checkbox + custom icon ═══ Uses real for toggle state. Label shows the icon. Checked = filled pink. */ .ff-hp-fc-save{ position:absolute;top:10px;right:10px; z-index:2; } .ff-hp-fc-save input{ position:absolute;opacity:0;width:0;height:0; pointer-events:none; } .ff-hp-fc-save label{ width:32px;height:32px;border-radius:50%; background:rgba(255,255,255,.9); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center; cursor:pointer; transition:all .2s var(--ff-ease); } .ff-hp-fc-save label:hover{background:var(--ff-white)} .ff-hp-fc-save label:active{transform:scale(.85)} /* Default — outline bookmark, grey */ .ff-hp-fc-save .ico-off{font-size:13px;color:var(--ff-text-4);display:block} .ff-hp-fc-save .ico-on{font-size:13px;color:var(--ff-pink);display:none} /* Checked — filled bookmark, pink, subtle pop */ .ff-hp-fc-save input:checked ~ label .ico-off{display:none} .ff-hp-fc-save input:checked ~ label .ico-on{display:block} .ff-hp-fc-save input:checked ~ label{ background:rgba(216,27,96,.08); } /* ═══ BODY ═══ */ .ff-hp-fc-body{ padding:14px 16px 0; flex:1;display:flex;flex-direction:column; } .ff-hp-fc-name{ font-size:14.5px;font-weight:700; color:var(--ff-text);line-height:1.35; margin-bottom:5px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } /* Location — flag image + city */ .ff-hp-fc-loc{ display:flex;align-items:center;gap:5px; font-size:12px;font-weight:400; color:var(--ff-text-3); margin-bottom:12px; } .ff-hp-fc-flag{ width:18px;height:13px; object-fit:cover; border-radius:2px; flex-shrink:0; box-shadow:0 0 0 .5px rgba(0,0,0,.08); } /* Price + Rating row */ .ff-hp-fc-row{ display:flex;align-items:flex-end;justify-content:space-between; gap:8px;margin-top:auto; } .ff-hp-fc-price{font-size:14px;font-weight:700;color:var(--ff-text);line-height:1.2} .ff-hp-fc-curr{display:block;font-size:10.5px;font-weight:500;color:var(--ff-text-4);margin-top:1px} .ff-hp-fc-rating{text-align:right} .ff-hp-fc-star{ font-size:13px;font-weight:700;color:var(--ff-text); display:flex;align-items:center;gap:3px;justify-content:flex-end; } .ff-hp-fc-star i{color:#FBBF24;font-size:11px} .ff-hp-fc-trust{font-size:10px;font-weight:400;color:var(--ff-text-4);margin-top:1px} /* ═══ FOOTER ═══ */ .ff-hp-fc-foot{padding:12px 16px 14px} .ff-hp-fc-btn{ display:flex;align-items:center;justify-content:center;gap:6px; width:100%;padding:10px 0; border-radius:var(--ff-r-sm); font-size:12.5px;font-weight:600; color:var(--ff-blue); background:transparent; border:1.5px solid rgba(0,119,182,.15); transition:all .25s var(--ff-ease); } .ff-hp-fc-btn:hover{ background:var(--ff-blue);color:var(--ff-white); border-color:var(--ff-blue); } .ff-hp-fc-btn i{font-size:10px;transition:transform .2s var(--ff-ease)} .ff-hp-fc-btn:hover i{transform:translateX(3px)} /* ═══ ARROWS ═══ */ .ff-hp-fc-prev, .ff-hp-fc-next{ width:36px;height:36px;border-radius:50%; background:var(--ff-white); border:1px solid var(--ff-border); box-shadow:0 2px 8px rgba(0,0,0,.06); display:flex;align-items:center;justify-content:center; font-size:13px;color:var(--ff-text-2); cursor:pointer;transition:all .25s var(--ff-ease); position:absolute;top:50%;transform:translateY(calc(-50% - 20px)); z-index:10; } .ff-hp-fc-prev{left:15px} .ff-hp-fc-next{right:15px} .ff-hp-fc-prev:hover,.ff-hp-fc-next:hover{ background:var(--ff-blue);color:var(--ff-white); border-color:var(--ff-blue);box-shadow:0 4px 14px rgba(0,119,182,.15); } .ff-hp-fc-prev:active,.ff-hp-fc-next:active{transform:translateY(calc(-50% - 20px)) scale(.92)} .ff-hp-fc-prev.swiper-button-disabled,.ff-hp-fc-next.swiper-button-disabled{opacity:.25;pointer-events:none} /* ═══ TABLET ═══ */ @media(max-width:1024px){ .ff-hp-fc{padding:28px 0 32px} .ff-hp-fc-prev{left:-8px} .ff-hp-fc-next{right:-8px} } /* ═══ MOBILE ═══ */ @media(max-width:767px){ .ff-hp-fc{padding:20px 0 24px} .ff-hp-fc-hd{padding:0 16px;margin-bottom:14px} .ff-hp-fc-label{font-size:16px} .ff-hp-fc-all{font-size:12px} .ff-hp-fc-wrap{padding:0 16px} .ff-hp-fc-prev,.ff-hp-fc-next{display:none} .ff-hp-fc-card{ border-radius:14px;border:none; box-shadow:0 1px 4px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.04); } .ff-hp-fc-card:hover{transform:none;box-shadow:0 1px 4px rgba(0,0,0,.06),0 0 0 .5px rgba(0,0,0,.04)} .ff-hp-fc-card:active{transform:scale(.98);transition:transform .15s var(--ff-ease)} .ff-hp-fc-img{aspect-ratio:16/10} .ff-hp-fc-body{padding:12px 14px 0} .ff-hp-fc-name{font-size:14px;margin-bottom:4px} .ff-hp-fc-loc{font-size:11.5px;margin-bottom:10px} .ff-hp-fc-flag{width:16px;height:12px} .ff-hp-fc-price{font-size:13.5px} .ff-hp-fc-curr{font-size:10px} .ff-hp-fc-star{font-size:12.5px} .ff-hp-fc-star i{font-size:10px} .ff-hp-fc-trust{font-size:9.5px} .ff-hp-fc-foot{padding:10px 14px 12px} .ff-hp-fc-btn{padding:9px 0;font-size:12px;border-radius:10px} .ff-hp-fc-save label{width:30px;height:30px} .ff-hp-fc-save{top:8px;right:8px} .ff-hp-fc-save .ico-off,.ff-hp-fc-save .ico-on{font-size:12px} } @media(max-width:380px){ .ff-hp-fc-name{font-size:13.5px} } /* Our work Css*/ .timeline-step:nth-child(odd){--color:#D81B60} .timeline-step:nth-child(even){--color:#0077B6} /* ═══ DESKTOP ZIGZAG — exact original ═══ */ .timeline{display:flex;justify-content:space-between;flex-wrap:nowrap;align-items:flex-start;margin:5px 0} .timeline-step{text-align:center;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:320px;width:100%} .timeline-step.top .title-desc-position{position:relative;top:10px;min-height:125px} .timeline-step.bottom .title-desc-position{position:relative;top:35px} .top .title-desc-position{order:-1} .bottom .step-line,.bottom .step-icon{order:-1} .bottom .title-desc-position{order:1} .step-circle{width:80px;height:80px;border-radius:50%;background:var(--color);box-shadow:inset 4px 4px 8px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:bold;margin:0;position:relative;z-index:2} .step-circle::before{content:"";position:absolute;top:50%;right:-20px;transform:translateY(-50%) rotate(0deg);width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:30px solid var(--color)} .step-circle::after{content:"";position:absolute;top:48%;right:-100px;width:100px;height:3px;background-color:var(--color);margin:0} .no-before::after{display:none}.no-before::before{display:none} .step-circle span{background:#f8f8f8;padding:12px 18px;border-radius:50%;box-shadow:inset -5px -5px 5px rgba(0,0,0,0.15);color:var(--color);z-index:2;transition:background .5s ease,color .5s ease,box-shadow .5s ease} .timeline-step:hover .step-circle span{background:var(--color);color:#fff;box-shadow:inset -3px -3px 5px rgba(0,0,0,0.25)} .step-title{font-weight:600;font-size:14px;margin-bottom:4px;color:var(--color);font-family:'Jost',sans-serif;transition:color .4s ease} .timeline-step:nth-child(odd):hover .step-title{color:#b71450} .timeline-step:nth-child(even):hover .step-title{color:#005a8c} .step-desc{font-size:10px;font-family:"Figtree",sans-serif;color:#999;letter-spacing:.5px;transition:color .4s ease} .timeline-step:hover .step-desc{color:#555} .step-line{width:2px;height:85px;background-color:var(--color);margin:0;opacity:.5;transition:opacity .4s ease} .timeline-step:hover .step-line{opacity:1} .step-icon{width:40px;height:40px;border:2px solid var(--color);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--color);font-size:18px;transition:background .4s ease} .timeline-step:nth-child(odd):hover .step-icon{background:rgba(216,27,96,.06)} .timeline-step:nth-child(even):hover .step-icon{background:rgba(0,119,182,.06)} .step-icon img{width:22px;height:22px;object-fit:contain} /* ═══ SECTION ═══ */ .ff-hw-section{background:#fff;padding:40px 0 36px} .ff-hw-inner{margin:0 auto;padding:0 clamp(20px,4vw,56px)} .clients-carousel-title{text-align:center;margin-bottom:6px} .clients-carousel-title h6{font-size:22px;font-weight:700;margin-bottom:8px;color:#1d1d1f; font-family: 'Jost', sans-serif;} .clients-carousel-title p{font-size:13px;color:#8e8e93;max-width:600px;margin:0 auto} .ff-hw-legend{display:flex;justify-content:center;gap:20px;margin-bottom:16px} .ff-hw-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#48484a} .ff-hw-legend-dot{width:9px;height:9px;border-radius:50%} .ff-hw-legend-dot.blue{background:#0077B6} .ff-hw-legend-dot.pink{background:#D81B60} .btoid-sup{text-align:center;margin-top:20px} .btoid-sup p{font-size:12px;color:#aeaeb2;max-width:700px;margin:0 auto 15px} .down-side{display:flex;justify-content:center;gap:16px;flex-wrap:wrap} .down-text a{text-decoration:none} .jor{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;transition:background .3s ease} .jor i{font-size:11px} .jor-blue{color:#0077B6;background:rgba(0,119,182,.06)}.jor-blue:hover{background:rgba(0,119,182,.12)}.jor-blue i{color:#0077B6} .jor-pink{color:#D81B60;background:rgba(216,27,96,.05)}.jor-pink:hover{background:rgba(216,27,96,.1)}.jor-pink i{color:#D81B60} .jor-orange{color:#FF8C00;background:rgba(255,140,0,.06)}.jor-orange:hover{background:rgba(255,140,0,.12)}.jor-orange i{color:#FF8C00} /* ═══════════════════════════════════════════════════════════ TABLET + MOBILE — CSS-only transform of same HTML Same .timeline and .timeline-step HTML. CSS reshapes into horizontal scroll timeline: - .timeline becomes horizontal scroll container - .step-circle becomes small dot on horizontal pipe - .title-desc-position + .step-icon become card above/below - .step-line becomes short vertical connector ═══════════════════════════════════════════════════════════ */ @media(max-width:1024px){ .ff-hw-section{padding:28px 0 24px} .ff-hw-inner{padding:0} .clients-carousel-title{padding:0 20px} .ff-hw-legend{padding:0 20px} /* Timeline becomes horizontal scroll */ .timeline{ display:flex; flex-wrap:nowrap; align-items:center; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0; padding:0 35px; height:260px; position:relative; } .timeline::-webkit-scrollbar{display:none} /* No ::before pipe — it doesn't scroll with content. Instead, each step gets a horizontal line segment using ::after on the step */ /* Each step becomes a narrow column */ .timeline-step{ width:55px;height:100%; flex-shrink:0; position:relative; display:flex;flex-direction:column; align-items:center; justify-content:center; scroll-snap-align:start; } /* ═══ CIRCLE — small dot on the pipe ═══ */ .step-circle{ width:30px;height:30px; position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); z-index:3; box-shadow:inset 2px 2px 4px rgba(0,0,0,0.15); font-size:10px; } .step-circle span{ padding:0; width:20px;height:20px; display:flex;align-items:center;justify-content:center; font-size:9px;font-weight:800; box-shadow:inset -1px -1px 2px rgba(0,0,0,0.1); } /* Hide arrow on mobile */ .step-circle::before{display:none} /* Hide desktop connecting line on mobile */ .step-circle::after{display:none !important} /* Horizontal line segment on each step — connects circles */ .timeline-step::after{ content:'';position:absolute; top:50%;left:50%; transform:translateY(-50%); width:55px; height:2px; background:#e0e0e0; z-index:0;/* behind circle which is z-index:3 */ } /* Last step (12) — no line after */ .timeline-step:last-child::after{display:none !important} /* ═══ VERTICAL LINE — short connector from pipe to card ═══ */ .step-line{ width:1.5px;height:10px; position:absolute; left:50%;transform:translateX(-50%); z-index:1;opacity:.3; } /* Patient (odd/top): line goes DOWN from pipe */ .timeline-step:nth-child(odd) .step-line{ top:calc(50% + 15px); } /* Clinic (even/bottom): line goes UP from pipe */ .timeline-step:nth-child(even) .step-line{ bottom:calc(50% + 15px);top:auto; } /* ═══ CARD — title-desc-position becomes the card ═══ */ .timeline-step .title-desc-position{ position:absolute !important; left:50%;transform:translateX(-50%); width:105px; height:100px; min-height:unset !important; padding:8px 6px; border-radius:12px; background:#fff; border:1px solid #f0f0f0; box-shadow:0 1px 4px rgba(0,0,0,.04); display:flex;flex-direction:column; align-items:center;text-align:center; justify-content:center; gap:3px; z-index:2; overflow:hidden; } /* Patient cards (odd/top): BELOW the pipe */ .timeline-step.top .title-desc-position{ top:calc(50% + 26px) !important; } /* Clinic cards (even/bottom): ABOVE the pipe */ .timeline-step.bottom .title-desc-position{ top:auto !important; bottom:calc(50% + 26px); } /* Reset ordering — not needed on mobile */ .top .title-desc-position{order:unset} .bottom .step-line,.bottom .step-icon{order:unset} .bottom .title-desc-position{order:unset} /* Title inside card */ .step-title{font-size:10px;margin-bottom:2px} /* Desc inside card */ .step-desc{font-size:7.5px;line-height:1.3;letter-spacing:0} /* ═══ ICON — hide on mobile (number on pipe is enough) ═══ */ .step-icon{ display:none; } .btoid-sup{padding:0 20px} .btoid-sup p{font-size:11px} .down-side{gap:10px} .jor{font-size:11px;padding:5px 12px} } @media(max-width:480px){ .timeline{height:250px;padding:0 30px;scroll-padding-left: 30px;} .timeline::before{display:none}/* no pseudo pipe needed */ .timeline-step{width:50px} .step-circle{width:26px;height:26px} .step-circle span{width:18px;height:18px;font-size:8px} .step-circle::after{display:none !important} .timeline-step::after{width:50px}/* match step width */ .timeline-step .title-desc-position{width:95px;height:92px;padding:6px 5px} .step-title{font-size:9px} .step-desc{font-size:7px} .clients-carousel-title h6{font-size:19px} .clients-carousel-title p{font-size:12px} } /* our work css end */ /* ═══════════════════════════════════════════════════════════ FERTILITY FOUNT — Popular Locations Version: 2.0 PREFIX: ff-hp-pl-* Desktop: 4×2 grid (two rows) Tablet: 3×2 or 2×2 Mobile: Horizontal scroll Rectangle landscape cards with gradient overlay ═══════════════════════════════════════════════════════════ */ /* ═══ SECTION ═══ */ .ff-hp-pl{ width:100%; background:var(--ff-white); padding:36px 0 40px; } /* ═══ HEADER ═══ */ .ff-hp-pl-hd{ margin:0 auto; padding:0 clamp(20px,4vw,56px); margin-bottom:20px; } .ff-hp-pl-label{font-size:18px;font-weight:700;color:var(--ff-text)} /* ═══ GRID — 4 columns × 2 rows ═══ */ .ff-hp-pl-grid{ margin:0 auto; padding:0 clamp(20px,4vw,56px); display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } /* ═══ CARD ═══ */ .ff-hp-pl-card{ display:block; border-radius:var(--ff-r-md); overflow:hidden; position:relative; aspect-ratio:16/9; background:var(--ff-bg-2); transition:all .3s var(--ff-ease); } .ff-hp-pl-card:hover{ box-shadow:0 6px 24px rgba(0,0,0,.1); transform:translateY(-2px); } /* Image */ .ff-hp-pl-card img.ff-hp-pl-img{ width:100%;height:100%; object-fit:cover; transition:transform .5s var(--ff-ease); } .ff-hp-pl-card:hover img.ff-hp-pl-img{transform:scale(1.04)} /* Gradient overlay — ensures text is readable on ANY image (light or dark) */ .ff-hp-pl-card::after{ content:'';position:absolute; bottom:0;left:0;right:0; height:70%; background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.3) 40%,rgba(0,0,0,.05) 70%,transparent 100%); pointer-events:none;z-index:1; transition:background .4s ease; } /* Hover — gradient gets slightly darker for better readability */ .ff-hp-pl-card:hover::after{ background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.08) 70%,transparent 100%); } /* Content */ .ff-hp-pl-info{ position:absolute; bottom:0;left:0;right:0; padding:10px 12px; z-index:2; display:flex;flex-direction:column; gap:2px; } /* City name */ .ff-hp-pl-city{ font-size:13px;font-weight:700; color:#fff;line-height:1.2; } /* Country — small flag + name */ .ff-hp-pl-country{ display:flex;align-items:center;gap:4px; font-size:10px;font-weight:400; color:rgba(255,255,255,.7); } .ff-hp-pl-flag{ width:12px;height:9px; object-fit:cover; border-radius:1px; box-shadow:0 0 0 .5px rgba(255,255,255,.15); } /* Clinic count */ .ff-hp-pl-count{ display:inline-flex;align-items:center;gap:3px; font-size:9px;font-weight:600; color:#fff; background:rgba(255,255,255,.12); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); padding:2px 7px; border-radius:100px; margin-top:2px; align-self:flex-start; transition:background .3s var(--ff-ease); } .ff-hp-pl-card:hover .ff-hp-pl-count{background:rgba(0,119,182,.65)} .ff-hp-pl-count i{font-size:8px} /* ═══ TABLET + SMALL SCREENS — single row horizontal scroll ═══ */ @media(max-width:1024px){ .ff-hp-pl{padding:28px 0 32px} .ff-hp-pl-grid{ display:flex; overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; gap:10px;padding:0 clamp(16px,3vw,56px); scroll-padding-left:clamp(16px,3vw,56px); } .ff-hp-pl-grid::-webkit-scrollbar{display:none} .ff-hp-pl-card{ flex:0 0 auto;width:clamp(220px,30vw,280px); scroll-snap-align:start; aspect-ratio:16/10; } .ff-hp-pl-city{font-size:13px} } /* ═══ MOBILE ═══ */ @media(max-width:600px){ .ff-hp-pl{padding:22px 0 26px} .ff-hp-pl-hd{padding:0 16px;margin-bottom:14px} .ff-hp-pl-label{font-size:16px} .ff-hp-pl-grid{gap:10px;padding:0 16px;scroll-padding-left:16px} .ff-hp-pl-card{ width:70%;flex:0 0 70%; border-radius:14px;aspect-ratio:16/10; } .ff-hp-pl-card:hover{transform:none;box-shadow:none} .ff-hp-pl-card:active{transform:scale(.98);transition:transform .15s var(--ff-ease)} .ff-hp-pl-info{padding:10px 12px} .ff-hp-pl-city{font-size:14px} .ff-hp-pl-country{font-size:10px} .ff-hp-pl-count{font-size:9px;padding:3px 7px} } @media(max-width:380px){.ff-hp-pl-card{width:78%;flex:0 0 78%}} /* ═══════════════════════════════════════════════════════════ FERTILITY FOUNT — Treatment Cards Version: 2.0 PREFIX: ff-hp-tr-* SVG icons with hover swap (data-hover-src like stats counter) Clinic count per treatment Background color change on hover Rich detailed card design 5×2 grid desktop, scroll mobile ═══════════════════════════════════════════════════════════ */ /* ═══ SECTION ═══ */ .ff-hp-tr{ width:100%; background:var(--ff-bg-page); padding:36px 0 40px; } /* ═══ HEADER ═══ */ .ff-hp-tr-hd{ margin:0 auto; padding:0 clamp(20px,4vw,56px); margin-bottom:20px; } .ff-hp-tr-label{font-size:18px;font-weight:700;color:var(--ff-text)} /* ═══ GRID — 5×2 ═══ */ .ff-hp-tr-grid{ margin:0 auto; padding:0 clamp(20px,4vw,56px); display:grid; grid-template-columns:repeat(6,1fr); gap:12px; } /* ═══ CARD COLORS via nth-child — 12 unique colors, no repeats ═══ */ .ff-hp-tr-card:nth-child(1){--c:#0077B6;--cbg:#eef8ff;--clight:rgba(0,119,182,.06)} .ff-hp-tr-card:nth-child(2){--c:#D81B60;--cbg:#fef2f7;--clight:rgba(216,27,96,.05)} .ff-hp-tr-card:nth-child(3){--c:#FF8C00;--cbg:#fff8f0;--clight:rgba(255,140,0,.06)} .ff-hp-tr-card:nth-child(4){--c:#059669;--cbg:#eefbf4;--clight:rgba(5,150,105,.06)} .ff-hp-tr-card:nth-child(5){--c:#7c3aed;--cbg:#f5f3ff;--clight:rgba(124,58,237,.05)} .ff-hp-tr-card:nth-child(6){--c:#0891b2;--cbg:#ecfeff;--clight:rgba(8,145,178,.06)} .ff-hp-tr-card:nth-child(7){--c:#dc2626;--cbg:#fef2f2;--clight:rgba(220,38,38,.05)} .ff-hp-tr-card:nth-child(8){--c:#4f46e5;--cbg:#eef2ff;--clight:rgba(79,70,229,.05)} .ff-hp-tr-card:nth-child(9){--c:#b45309;--cbg:#fffbeb;--clight:rgba(180,83,9,.05)} .ff-hp-tr-card:nth-child(10){--c:#0d9488;--cbg:#f0fdfa;--clight:rgba(13,148,136,.05)} .ff-hp-tr-card:nth-child(11){--c:#be185d;--cbg:#fdf2f8;--clight:rgba(190,24,93,.05)} .ff-hp-tr-card:nth-child(12){--c:#1d4ed8;--cbg:#eff6ff;--clight:rgba(29,78,216,.05)} /* ═══ CARD ═══ */ .ff-hp-tr-card{ display:flex;flex-direction:column; align-items:center;text-align:center; padding:22px 14px 18px; border-radius:var(--ff-r-md); background:var(--ff-white); border:1px solid var(--ff-border); gap:6px; height:100%; transition:all .35s var(--ff-ease); position:relative; } /* Hover — background fills with soft brand color */ .ff-hp-tr-card:hover{ background:var(--cbg); border-color:transparent; box-shadow:0 4px 18px rgba(0,0,0,.05); } /* ═══ ICON — SVG with CSS filter color change on hover ═══ */ .ff-hp-tr-ico{ width:50px;height:50px; border-radius:50%; background:var(--clight); display:flex;align-items:center;justify-content:center; flex-shrink:0; transition:all .4s var(--ff-ease); } .ff-hp-tr-ico img{ width:28px;height:28px; object-fit:contain; opacity:.55; transition:all .4s var(--ff-ease); } /* Hover — circle fills brand color, icon turns white via CSS filter */ .ff-hp-tr-card:hover .ff-hp-tr-ico{ background:var(--c); box-shadow:0 4px 12px rgba(0,0,0,.1); } .ff-hp-tr-card:hover .ff-hp-tr-ico img{ opacity:1; filter:brightness(0) invert(1); } /* ═══ TITLE ═══ */ .ff-hp-tr-title{ font-size:13.5px;font-weight:700; color:var(--ff-text);line-height:1.25; transition:color .35s var(--ff-ease); } .ff-hp-tr-card:hover .ff-hp-tr-title{color:var(--c)} /* ═══ DESCRIPTION ═══ */ .ff-hp-tr-desc{ font-size:10px;font-weight:400; color:var(--ff-text-4);line-height:1.45; transition:color .35s var(--ff-ease); } .ff-hp-tr-card:hover .ff-hp-tr-desc{color:var(--ff-text-3)} /* ═══ DIVIDER ═══ */ .ff-hp-tr-div{ width:30px;height:1px; background:var(--ff-border); transition:all .35s var(--ff-ease); } .ff-hp-tr-card:hover .ff-hp-tr-div{ width:40px; background:var(--c); opacity:.3; } /* ═══ CLINIC COUNT ═══ */ .ff-hp-tr-count{ display:flex;align-items:center;gap:4px; font-size:10px;font-weight:600; color:var(--ff-text-4); transition:color .35s var(--ff-ease); } .ff-hp-tr-count i{font-size:9px} .ff-hp-tr-card:hover .ff-hp-tr-count{color:var(--c)} /* ═══ ARROW — subtle "explore" indicator ═══ */ .ff-hp-tr-arrow{ font-size:11px; color:var(--ff-text-4); opacity:0; transition:all .3s var(--ff-ease); margin-top:auto; } .ff-hp-tr-card:hover .ff-hp-tr-arrow{ opacity:1; color:var(--c); } /* ═══ TABLET — single row horizontal scroll ═══ */ @media(max-width:1024px){ .ff-hp-tr{padding:28px 0 32px} .ff-hp-tr-grid{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none; gap:10px;padding:0 clamp(16px,3vw,56px); scroll-padding-left:clamp(16px,3vw,56px); } .ff-hp-tr-grid::-webkit-scrollbar{display:none} .ff-hp-tr-card{ flex:0 0 auto;min-width:160px;width:225px; scroll-snap-align:start;padding:18px 12px 14px; } } /* ═══ MOBILE — single row, smaller cards ═══ */ @media(max-width:600px){ .ff-hp-tr{padding:22px 0 26px} .ff-hp-tr-hd{padding:0 16px;margin-bottom:14px} .ff-hp-tr-label{font-size:16px} .ff-hp-tr-grid{gap:10px;padding:0 16px;scroll-padding-left:16px} .ff-hp-tr-card{ min-width:140px; border-radius:14px;padding:16px 10px 12px; } .ff-hp-tr-card:hover{transform:none;box-shadow:none;background:var(--ff-white)} .ff-hp-tr-card:active{background:var(--cbg);transition:background .15s var(--ff-ease)} .ff-hp-tr-ico{width:44px;height:44px} .ff-hp-tr-ico img{width:24px;height:24px} .ff-hp-tr-title{font-size:12px} .ff-hp-tr-desc{font-size:9px} .ff-hp-tr-count{font-size:9px} .ff-hp-tr-arrow{display:none} } @media(max-width:380px){.ff-hp-tr-card{min-width:130px}} /* ═══════════════════════════════════════════════════════════ FERTILITY FOUNT — CTA Banner Version: 2.0 PREFIX: ff-hp-cta-* Full width, background image, compact, two action buttons. ═══════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} body{font-family:'Outfit',-apple-system,sans-serif;-webkit-font-smoothing:antialiased} a{text-decoration:none;color:inherit} .ff-hp-cta{ width:100%; position:relative; overflow:hidden; background:#0a1628; } /* Background image */ .ff-hp-cta-bg{ position:absolute;inset:0; z-index:0; } .ff-hp-cta-bg img{ width:100%;height:100%; object-fit:cover; opacity:.25; } /* Gradient overlay on top of image */ .ff-hp-cta::after{ content:'';position:absolute;inset:0; background:linear-gradient(90deg,rgba(0,119,182,.85) 0%,rgba(216,27,96,.6) 100%); z-index:1; } /* Content */ .ff-hp-cta-inner{ position:relative;z-index:2; margin:0 auto; padding:36px clamp(20px,4vw,56px); display:flex; align-items:center; justify-content:space-between; gap:24px; } /* Left — text */ .ff-hp-cta-text{flex:1;min-width:0} .ff-hp-cta-title{ font-family:'Fraunces',Georgia,serif; font-size:clamp(18px,2.2vw,26px); font-weight:700; color:#fff; line-height:1.3; margin-bottom:6px; } .ff-hp-cta-sub{ font-size:clamp(12px,1.1vw,14px); font-weight:400; color:rgba(255,255,255,.7); line-height:1.5; } /* Right — buttons */ .ff-hp-cta-actions{ display:flex; gap:12px; flex-shrink:0; } .ff-hp-cta-btn{ display:inline-flex;align-items:center;gap:7px; padding:11px 24px; border-radius:100px; font-size:13px;font-weight:700; font-family:'Outfit',sans-serif; border:none;cursor:pointer; transition:all .3s cubic-bezier(.25,.1,.25,1); white-space:nowrap; } .ff-hp-cta-btn i{font-size:10px;transition:transform .2s ease} .ff-hp-cta-btn:hover i{transform:translateX(3px)} .ff-hp-cta-btn:active{transform:scale(.97)} /* Primary — white button */ .ff-hp-cta-btn.primary{ background:#fff; color:#0077B6; } .ff-hp-cta-btn.primary:hover{ background:#f0f0f0; box-shadow:0 4px 16px rgba(0,0,0,.15); } /* Secondary — outline button */ .ff-hp-cta-btn.secondary{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); } .ff-hp-cta-btn.secondary:hover{ border-color:#fff; background:rgba(255,255,255,.1); } /* ═══ 13" LAPTOP ═══ */ @media(max-width:1280px){ .ff-hp-cta-inner{padding:32px clamp(20px,4vw,48px)} } /* ═══ TABLET ═══ */ @media(max-width:768px){ .ff-hp-cta-inner{ flex-direction:column; text-align:center; gap:16px; padding:28px 20px; } .ff-hp-cta-actions{justify-content:center} } /* ═══ MOBILE ═══ */ @media(max-width:480px){ .ff-hp-cta-inner{padding:24px 16px;gap:14px} .ff-hp-cta-title{font-size:16px} .ff-hp-cta-sub{font-size:11px} .ff-hp-cta-actions{ flex-direction:row; gap:8px; } .ff-hp-cta-btn{ padding:9px 16px;font-size:11px; } } /* ═══════════════════════════════════════════════════════════ FERTILITY FOUNT — Trending Clinics Version: 7.0 PREFIX: ff-hp-tc-* FEATURES: - Country flag tabs to filter clinics by country - Two-row Swiper grid on desktop, single row on mobile - 16:9 horizontal image cards with gradient overlay - Hover: info slides up, trending pill + star rating revealed - Orange rank badge always visible (#1, #2, #3...) - Orange glow border + image zoom on hover - No flex on header/tabs (prevents body overflow + sticky header issues) - Uses display:table for desktop header layout - Uses display:inline-block for tabs (no flex) - All slides in HTML (no JSON) — replace with PHP loop in production - Native lazy loading on all images - Filtering: JS clones matching slides, destroys/reinits Swiper DEPENDENCIES: - Swiper 11.0.5 (CSS + JS) - Font Awesome 6.5.1 - Google Fonts: Outfit - Flag images: flagcdn.com/w40/{code}.png LAYOUT: - Desktop (1536px+): 5 columns × 2 rows - Large (1280px): 4 columns × 2 rows - Tablet (1024px): 3.2 columns × 2 rows - Small tablet (640px): 2.3 columns × 2 rows - Mobile (<768px): single row, 1.15–1.6 cards COLORS: - Accent: Orange (--ff-orange) — trending = hot - Trend pill: Green (--ff-green) - Star pill: Dark blur glass - Gradient: Multi-stop smooth (no hard line) URL STRUCTURE: /clinic/{slug} ═══════════════════════════════════════════════════════════ */ /* ─── Section container ─── overflow:hidden prevents any child (Swiper, tabs) from causing horizontal body scroll or white space on right */ .ff-hp-tc{width:100%;background:var(--ff-bg-page);padding:36px 0 40px;overflow:hidden} /* ─── Header row ─── display:table creates a single-line layout: title (left) + tabs (right) without using flex. Flex was causing sticky header conflicts on mobile. On mobile, overridden to display:block (stacked). */ .ff-hp-tc-hd{margin:0 auto;padding:0 clamp(20px,4vw,56px);margin-bottom:18px;display:table;width:100%} /* ─── Section title ─── table-cell keeps it on the same line as tabs on desktop */ .ff-hp-tc-label{font-size:18px;font-weight:700;color:var(--ff-text);display:table-cell;vertical-align:middle;white-space:nowrap;padding-right:20px} /* ─── Country filter tabs ─── table-cell + text-align:right pushes tabs to the right. Scrolls horizontally if too many tabs. Uses inline-block tabs (not flex) to prevent overflow issues. Hidden scrollbar for clean look. */ .ff-hp-tc-tabs{ display:table-cell;vertical-align:middle; text-align:right; overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-webkit-overflow-scrolling:touch; white-space:nowrap; -ms-overflow-style:none; padding-bottom:2px; } .ff-hp-tc-tabs::-webkit-scrollbar{display:none} /* ─── Individual tab button ─── inline-block (NOT flex) — prevents body overflow. Flag image aligned with vertical-align:middle. Active state: orange text + orange-tinted background. margin-right for spacing (no gap — that's flex-only). */ .ff-hp-tc-tab{ display:inline-block;vertical-align:middle; padding:6px 14px;border-radius:100px; font-size:12px;font-weight:600;color:var(--ff-text-3); background:var(--ff-white);white-space:nowrap; transition:all .25s var(--ff-ease); border:1px solid var(--ff-border); margin-right:6px; } .ff-hp-tc-tab:last-child{margin-right:0} .ff-hp-tc-tab:hover{color:var(--ff-text-2);background:#f0f0f0} .ff-hp-tc-tab.active{color:var(--ff-orange);background:rgba(255,140,0,.06);border-color:rgba(255,140,0,.15)} /* ─── Flag inside tab ─── inline-block + vertical-align:middle aligns flag with text. margin-top:-1px for optical alignment. */ .ff-hp-tc-tab img{display:inline-block;vertical-align:middle;width:16px;height:12px;object-fit:cover;border-radius:1.5px;box-shadow:0 0 0 .5px rgba(0,0,0,.08);margin-right:4px;margin-top:-1px} /* ─── Swiper container ─── overflow:hidden on both wrapper and Swiper prevents slides from causing horizontal scroll. */ .ff-hp-tc-wrap{margin:0 auto;padding:0 clamp(20px,4vw,56px);position:relative;overflow:hidden} #ffHpTcSwiper{overflow:hidden} /* ─── Card ─── Full-image card with 16:9 aspect ratio. Hover: orange border glow + image zoom. border starts transparent, turns orange on hover. */ .ff-hp-tc-card{display:block;border-radius:var(--ff-r-md);overflow:hidden;position:relative;aspect-ratio:16/9;background:var(--ff-bg-2);transition:all .35s var(--ff-ease);border:2px solid transparent} .ff-hp-tc-card:hover{border-color:var(--ff-orange);box-shadow:0 4px 20px rgba(255,140,0,.15)} /* ─── Card image ─── Covers entire card. Zoom 1.04 on hover. loading="lazy" for native lazy loading. */ .ff-hp-tc-card img.ff-hp-tc-photo{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ff-ease)} .ff-hp-tc-card:hover .ff-hp-tc-photo{transform:scale(1.04)} /* ─── Gradient overlay ─── 5-stop gradient for smooth fade — NO hard line. Darker at bottom (where text sits), fades to transparent. Gets slightly darker on hover for better text readability. Works on both light and dark images. */ .ff-hp-tc-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.4) 20%,rgba(0,0,0,.15) 40%,rgba(0,0,0,.03) 60%,transparent 75%);pointer-events:none;z-index:1;transition:all .4s var(--ff-ease)} .ff-hp-tc-card:hover::after{background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.5) 25%,rgba(0,0,0,.25) 45%,rgba(0,0,0,.08) 65%,transparent 80%)} /* ─── Rank badge ─── Orange circle with white number (#1, #2, etc.) Always visible (not hidden on hover like star/trend). Position: top-left corner of card. JS updates rank number when filtering by country. */ .ff-hp-tc-rank{position:absolute;top:10px;left:10px;width:28px;height:28px;border-radius:50%;background:var(--ff-orange);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--ff-white);box-shadow:0 2px 8px rgba(255,140,0,.3);z-index:3} /* ─── Info overlay (name + location) ─── Positioned at bottom of card, on top of gradient. On hover: slides up 8px to make room for reveal row. Always visible — user sees clinic name without hovering. */ .ff-hp-tc-info{position:absolute;bottom:0;left:0;right:0;padding:12px 14px;z-index:2;display:flex;flex-direction:column;gap:3px;transition:transform .4s var(--ff-ease)} .ff-hp-tc-card:hover .ff-hp-tc-info{transform:translateY(-8px)} /* ─── Clinic name ─── White, bold, single line with ellipsis overflow. */ .ff-hp-tc-name{font-size:13.5px;font-weight:700;color:#fff;line-height:1.25;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} /* ─── Location (flag + city) ─── Flag image + text. Slightly transparent white. */ .ff-hp-tc-loc{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:400;color:rgba(255,255,255,.7)} .ff-hp-tc-flag{width:14px;height:10px;object-fit:cover;border-radius:1px;box-shadow:0 0 0 .5px rgba(255,255,255,.15)} /* ─── Reveal row (trending pill + star rating) ─── Hidden by default (opacity:0, translateY:6px). On hover: fades in and slides up with .08s delay. On mobile: always visible (no hover on touch devices). Contains two glass-blur pills side by side. */ .ff-hp-tc-reveal{display:flex;align-items:center;gap:8px;margin-top:2px;opacity:0;transform:translateY(6px);transition:all .35s var(--ff-ease) .08s} .ff-hp-tc-card:hover .ff-hp-tc-reveal{opacity:1;transform:translateY(0)} /* ─── Trending pill ─── Green glass pill showing growth percentage. e.g. "↗ +18%" */ .ff-hp-tc-trend{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;color:var(--ff-white);background:rgba(5,150,105,.75);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:3px 8px;border-radius:100px} .ff-hp-tc-trend i{font-size:8px} /* ─── Star rating pill ─── Dark glass pill showing star rating. e.g. "★ 4.8" */ .ff-hp-tc-star-pill{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;color:var(--ff-white);background:rgba(0,0,0,.3);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:3px 8px;border-radius:100px} .ff-hp-tc-star-pill i{color:#FBBF24;font-size:8px} /* ─── Navigation arrows ─── Circular white buttons, turn orange on hover. Positioned outside the Swiper on left/right. Hidden on mobile (swipe-only). */ .ff-hp-tc-prev,.ff-hp-tc-next{width:36px;height:36px;border-radius:50%;background:var(--ff-white);border:1px solid var(--ff-border);box-shadow:0 2px 8px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ff-text-2);cursor:pointer;transition:all .25s var(--ff-ease);position:absolute;top:50%;transform:translateY(-50%);z-index:10} .ff-hp-tc-prev{left:-14px}.ff-hp-tc-next{right:-14px} .ff-hp-tc-prev:hover,.ff-hp-tc-next:hover{background:var(--ff-orange);color:var(--ff-white);border-color:var(--ff-orange);box-shadow:0 4px 14px rgba(255,140,0,.15)} /* ─── 13" Laptop (1280px) ─── Slightly smaller text to fit 4 columns */ @media(max-width:1280px){.ff-hp-tc-name{font-size:12.5px}.ff-hp-tc-info{padding:10px 12px}} /* ─── Tablet (1024px) ─── Tighter arrow positioning */ @media(max-width:1024px){.ff-hp-tc{padding:28px 0 32px}.ff-hp-tc-prev{left:-8px}.ff-hp-tc-next{right:-8px}} /* ─── Mobile (<768px) ─── - Header: display:block (stacked — title above, tabs below) - Tabs: full-width horizontal scroll with negative margin trick - Single row Swiper (no grid — handled by JS) - Reveal row always visible (no hover on touch) - Arrows hidden (swipe only) - Press-down scale on tap */ @media(max-width:767px){ .ff-hp-tc{padding:22px 0 26px} /* Header stacks vertically */ .ff-hp-tc-hd{padding:0 16px;margin-bottom:12px;display:block} .ff-hp-tc-label{display:block;font-size:16px;margin-bottom:10px;padding-right:0} /* Tabs extend to screen edges for full-width scroll */ .ff-hp-tc-tabs{display:block;text-align:left;padding:0;margin:0 -16px;padding-left:16px;padding-right:16px} .ff-hp-tc-tab{padding:5px 12px;font-size:11px} .ff-hp-tc-wrap{padding:0 16px} /* Hide arrows — swipe only on mobile */ .ff-hp-tc-prev,.ff-hp-tc-next{display:none} /* iOS-style card: no border, subtle shadow, press-down on tap */ .ff-hp-tc-card{border-radius:14px;border-width:1.5px} .ff-hp-tc-card:active{transform:scale(.98);transition:transform .15s var(--ff-ease)} /* Show reveal row always — no hover on touch devices */ .ff-hp-tc-reveal{opacity:1;transform:translateY(0)} .ff-hp-tc-name{font-size:12px} .ff-hp-tc-loc{font-size:10px} .ff-hp-tc-info{padding:10px 12px} .ff-hp-tc-rank{width:24px;height:24px;font-size:9px;top:8px;left:8px} } /* ═══════════════════════════════════════════════════════════ FERTILITY FOUNT — Top Fertility Brands Version: 15.0 (PRODUCTION) PREFIX: ff-hp-br-* HOMEPAGE SECTION #11 SINGLE LOOP ARCHITECTURE: ONE