/* Sradha Women Care - top bar, header, drawer, footer. Single breakpoint at 1240px, matching the prototype. */ .swc-topbar,.swc-header,.swc-ticker,.swc-drawer,.swc-footer{ --navy:#1e2c6b; --navy-2:#2b3e8c; --magenta:#c60c76; --magenta-light:#ff5cb1; --ink:#1b1b22; --body:#42424f; --muted:#5c5c6b; --page:#fcfcff; --soft:#f4f2f8; --border:#dcdce4; --on-navy:#c6cade; --on-navy-2:#b9c0da; --tap:44px; box-sizing:border-box; } .swc-topbar *,.swc-header *,.swc-ticker *,.swc-drawer *,.swc-footer *{box-sizing:border-box} /* ---------------- top status bar ---------------- */ .swc-topbar{ display:flex;align-items:center;gap:14px; min-height:36px;padding:0 clamp(16px,4vw,52px); background:var(--navy);color:var(--on-navy); font-family:"Public Sans",sans-serif;font-size:13px; white-space:nowrap;overflow:hidden; } .swc-topbar a{color:var(--on-navy);text-decoration:none} .swc-topbar a:hover{color:#fff} .swc-status{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:#fff} .swc-status__dot{ width:8px;height:8px;border-radius:50%;background:#39d98a;flex:none; animation:swc-pulse 2.4s ease-out infinite; } .swc-status--soon .swc-status__dot{background:#f5b301;animation:none} .swc-status--closed .swc-status__dot{background:#9aa0b5;animation:none} @keyframes swc-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(57,217,138,.55)} 70%{box-shadow:0 0 0 7px rgba(57,217,138,0)} } .swc-topbar__desk{display:inline-flex;align-items:center;gap:6px} .swc-topbar__desk + .swc-topbar__desk{margin-left:4px} .swc-topbar__desk:nth-of-type(2){margin-left:auto} .swc-topbar__chat{ display:none;margin-left:auto; background:var(--magenta);color:#fff!important;font-weight:700; padding:4px 14px;border-radius:999px;font-size:12.5px; } /* ---------------- header ---------------- */ .swc-header{ display:flex;align-items:center;gap:clamp(12px,2vw,24px); padding:clamp(12px,1.5vw,18px) clamp(16px,4vw,52px); background:#fff; transition:box-shadow .25s ease; } /* Sticky has to live on the theme's header wrapper: the Elementor container around the shortcode is only as tall as the bar itself, so a sticky set on .swc-header would unpin as soon as that container scrolls past. top:-36px lets the 36px status strip scroll away and pins the header at 0. */ /* Scoped to the theme's header element only. NB: in this UAE build `ehf-header` is a body class, so it must not be used here - it would make sticky. */ .site > header{ position:sticky!important;top:-36px;z-index:300;background:#fff; } /* .swc-scrolled is set past 8px of scroll */ .swc-scrolled .swc-header,.swc-header.swc-scrolled{box-shadow:0 2px 14px rgba(27,27,34,.10)} .swc-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0} .swc-brand__mark{width:clamp(42px,5vw,74px);height:auto;display:block;flex:none} .swc-brand__text{display:flex;flex-direction:column;min-width:0} .swc-brand__name{ font-family:"Poppins",sans-serif;font-weight:700; font-size:clamp(16px,1.6vw,21px);line-height:1.15;color:var(--navy); text-wrap:balance; } .swc-brand__tag{ font-family:"Public Sans",sans-serif;font-weight:700;font-size:11.5px; letter-spacing:.06em;color:var(--magenta);margin-top:3px; } .swc-nav{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);margin-left:auto} .swc-nav > a,.swc-dd__top{ font-family:"Public Sans",sans-serif;font-weight:600;font-size:15px; color:var(--navy);text-decoration:none;white-space:nowrap; } .swc-nav > a:hover,.swc-dd__top:hover{color:var(--magenta)} /* dropdowns */ .swc-dd{position:relative;display:inline-flex} .swc-dd__menu{ position:absolute;top:100%;left:-12px;z-index:60; display:flex;flex-direction:column;width:330px;padding:8px; background:#fff;border-radius:14px;box-shadow:0 20px 48px rgba(27,27,34,.20); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .2s ease,transform .2s ease,visibility .2s; } .swc-dd:hover .swc-dd__menu,.swc-dd:focus-within .swc-dd__menu{opacity:1;visibility:visible;transform:none} .swc-dd__item{ display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:10px; text-decoration:none;transition:background .18s ease,transform .18s ease; } .swc-dd__item:hover{background:var(--soft);transform:translateX(6px)} .swc-dd__item strong{font-family:"Poppins",sans-serif;font-weight:600;font-size:14.5px;color:var(--navy)} .swc-dd__item small{font-size:12.5px;line-height:1.4;color:var(--muted)} .swc-header__actions{display:flex;align-items:center;gap:10px;margin-left:12px} .swc-header__phone{ font-family:"Poppins",sans-serif;font-weight:600;font-size:15px; color:var(--navy);text-decoration:none;white-space:nowrap; } .swc-header__book{ display:inline-flex;align-items:center;min-height:var(--tap); padding:13px 18px;border-radius:9px;background:var(--magenta);color:#fff; font-family:"Public Sans",sans-serif;font-weight:700;font-size:14px; text-decoration:none;white-space:nowrap;transition:box-shadow .2s ease,transform .12s ease; } .swc-header__book:hover{box-shadow:0 10px 26px rgba(198,12,118,.34);color:#fff} .swc-header__book:active{transform:scale(.97)} .swc-header__call{display:none} .swc-burger{display:none} .swc-header__icon{display:inline-flex} /* ---------------- ticker ---------------- */ .swc-ticker{ overflow:hidden;background:var(--navy);padding:11px 0; max-height:60px;transition:max-height .3s ease,padding .3s ease; } .swc-ticker__track{ display:flex;width:max-content;gap:26px;padding-right:26px;white-space:nowrap; font-family:"Public Sans",sans-serif;font-weight:700;font-size:12.5px;line-height:1; letter-spacing:.06em;text-transform:uppercase;color:#fff; animation:swc-ticker 30s linear infinite; } .swc-ticker:hover .swc-ticker__track{animation-play-state:paused} .swc-ticker__sep{color:var(--magenta-light)} @keyframes swc-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* the strip retracts once the page is scrolled, so the pinned header stays slim */ body.swc-scrolled .swc-ticker,.swc-scrolled .swc-ticker{max-height:0;padding:0} @media (prefers-reduced-motion:reduce){ .swc-ticker__track{animation:none} .swc-ticker{transition:none} } /* ---------------- icons ---------------- */ .swc-topbar__desk svg,.swc-topbar__chat svg{flex:none;opacity:.85} .swc-footer__col a svg,.swc-footer__col h3 svg{flex:none;margin-right:8px;opacity:.9} .swc-footer__col h3{display:flex;align-items:center} .swc-header__icon{ display:inline-flex;align-items:center;justify-content:center; width:44px;height:44px;flex:none; border:2px solid var(--on-navy-2);border-radius:10px; color:var(--navy-2);text-decoration:none;transition:background .18s ease; } .swc-header__icon:hover{background:var(--soft);color:var(--navy-2)} .swc-header__call svg{margin-right:6px} /* ---------------- drawer ---------------- */ .swc-drawer{ position:fixed;inset:0;z-index:9500;display:none; background:rgba(27,27,34,.5); } .swc-drawer.is-open{display:block} .swc-drawer__inner{ position:absolute;top:0;right:0;bottom:0;width:min(88vw,380px); background:#fff;padding:20px 20px max(20px,env(safe-area-inset-bottom)); display:flex;flex-direction:column;gap:2px;overflow-y:auto;-webkit-overflow-scrolling:touch; box-shadow:-10px 0 40px rgba(27,27,34,.22); } .swc-drawer__inner > a{ display:flex;align-items:center;min-height:var(--tap); padding:10px 8px;border-bottom:1px solid var(--border); font-family:"Public Sans",sans-serif;font-weight:600;font-size:16px; color:var(--navy);text-decoration:none; } .swc-drawer__group{ display:flex;align-items:center;justify-content:space-between; width:100%;min-height:var(--tap);padding:10px 8px; border:0;border-bottom:1px solid var(--border);background:transparent; font-family:"Public Sans",sans-serif;font-weight:700;font-size:16px; color:var(--navy);text-align:left;cursor:pointer; } .swc-drawer__group[aria-expanded="true"] span{transform:rotate(45deg)} .swc-drawer__group span{transition:transform .2s ease;color:var(--magenta);font-size:20px;line-height:1} .swc-drawer__sub{display:flex;flex-direction:column;overflow:hidden;transition:height .3s ease} .swc-drawer__sub a{ display:flex;align-items:center;min-height:var(--tap); padding:8px 8px 8px 20px;border-bottom:1px solid var(--border); font-size:14.5px;color:var(--body);text-decoration:none; } .swc-drawer__sub a:hover{background:var(--soft)} .swc-drawer__book{ margin-top:16px;justify-content:center!important; background:var(--navy-2);color:#fff!important;border-radius:10px;border-bottom:0!important; font-family:"Public Sans",sans-serif;font-weight:700; } /* ---------------- footer ---------------- */ .swc-footer{ background:var(--navy);color:var(--on-navy); padding:clamp(48px,5vw,72px) clamp(20px,4vw,52px) clamp(24px,3vw,36px); font-family:"Public Sans",sans-serif;font-size:14.5px;line-height:1.6; } .swc-footer__grid{ max-width:1240px;margin:0 auto; display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:clamp(26px,4.5vw,44px); } .swc-footer__col{display:flex;flex-direction:column;gap:8px;min-width:0} .swc-footer__col h3{ font-family:"Poppins",sans-serif;font-weight:700;font-size:15px;color:#fff;margin:0 0 4px; } .swc-footer__col a{ color:var(--on-navy);text-decoration:none;min-height:32px;display:flex;align-items:center; transition:color .18s ease; } .swc-footer__col a:hover{color:#fff} .swc-footer__col p{margin:0} .swc-footer__logo{width:64px;height:auto;background:#fff;border-radius:12px;padding:6px} .swc-footer__lead{color:var(--on-navy-2);font-size:14px} .swc-footer__note{color:var(--on-navy-2);font-size:12.5px;font-style:italic;margin-top:4px} .swc-footer__base{ max-width:1240px;margin:clamp(28px,3vw,40px) auto 0;padding-top:20px; border-top:1px solid rgba(255,255,255,.14); display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between; font-size:13px;color:var(--on-navy-2); } .swc-footer__legal{display:flex;gap:16px} .swc-footer__legal a{color:var(--on-navy-2);text-decoration:none;min-height:32px;display:inline-flex;align-items:center} .swc-footer__legal a:hover{color:#fff} /* ---------------- mobile / tablet: the single 1240px switch ---------------- */ @media (max-width:1240px){ /* top bar collapses to status + Chat only, one 36px row */ .swc-topbar__desk{display:none} .swc-topbar__chat{display:inline-flex;align-items:center;min-height:24px} .swc-topbar{gap:10px;font-size:12.5px} /* tagline hidden, wordmark may wrap to two lines */ .swc-brand__tag{display:none} .swc-brand__name{white-space:normal} /* desktop nav out, hamburger + call in */ .swc-nav{display:none} .swc-header__phone,.swc-header__book,.swc-header__icon{display:none} .swc-header__actions{margin-left:auto} .swc-header__call{ display:inline-flex;align-items:center;justify-content:center; min-width:var(--tap);min-height:var(--tap);padding:0 16px; border:2px solid var(--on-navy-2);border-radius:10px; font-family:"Public Sans",sans-serif;font-weight:700;font-size:15px; color:var(--navy);text-decoration:none; } .swc-burger{ display:inline-flex;flex-direction:column;justify-content:center;gap:5px; min-width:var(--tap);min-height:var(--tap);padding:10px; border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer; } .swc-burger span{display:block;height:2px;width:20px;background:var(--navy);border-radius:2px} } @media (prefers-reduced-motion:reduce){ .swc-status__dot{animation:none} .swc-dd__menu,.swc-dd__item,.swc-drawer__sub,.swc-drawer__group span, .swc-header__book{transition:none!important} }