/* ===================================================================== TOP MENU POLISH (TEST build) - official horizontal logo: proper "Ear Clear" word space, NURSES centred under it - layered depth: soft top light, gold hairline edge, lifted shadow - "you are here" marker on the current section - one button language (plum primary, plum-outline secondary) ===================================================================== */ /* ---------- logo ---------- */ .nav__brand{gap:14px !important;align-items:center} .nav__mark{height:46px !important;width:auto;transition:height .35s cubic-bezier(.22,.8,.28,1)} .nav__words{height:44px !important;width:auto;margin-top:0 !important;transition:height .35s cubic-bezier(.22,.8,.28,1)} /* ---------- the bar itself: glass with real depth ---------- */ .nav{ background: linear-gradient(180deg,rgba(255,252,247,.94) 0%,rgba(250,244,236,.82) 55%,rgba(244,236,226,.72) 100%) !important; border-bottom:1px solid rgba(201,162,91,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.35), 0 1px 0 rgba(201,162,91,.18), 0 14px 30px -16px rgba(74,50,32,.34), 0 3px 8px -2px rgba(74,50,32,.07) !important; } @media (min-width:901px){ .nav{padding-top:12px !important;padding-bottom:12px !important} .nav.sp-fixed{ padding-top:8px !important;padding-bottom:8px !important; background:linear-gradient(180deg,rgba(255,252,247,.92),rgba(247,240,231,.84)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 0 rgba(201,162,91,.28), 0 18px 36px -16px rgba(74,50,32,.40), 0 4px 10px -3px rgba(74,50,32,.10) !important; } .nav.sp-fixed .nav__mark{height:38px !important} .nav.sp-fixed .nav__words{height:36px !important} } /* ---------- links: serif (matches the "Ear Clear" lettering), calm hover, pressed-in "you are here" ---------- Every rule starts with ".nav .nav__links" so it beats the older one-class rules lower in the page. To go back to the spaced-capitals option: font-family 'Outfit', add text-transform:uppercase, letter-spacing .13em, font-size .82rem, and give the left padding an extra .13em (trailing letter-spacing). */ .nav .nav__links .nav__link{ font-family:'Playfair Display',Georgia,'Times New Roman',serif !important; font-weight:500 !important;text-transform:none;letter-spacing:.005em !important; color:#3B2F28 !important;opacity:1 !important; transition:background-color .25s ease,color .25s ease,box-shadow .25s ease; } /* no sliding underline, no dot: those were the "light effect" */ .nav .nav__links .nav__link::before, .nav .nav__links .nav__link::after{display:none !important} @media (min-width:901px){ .nav .nav__links .nav__link{ --lp:clamp(12px,1.15vw,18px); font-size:1.04rem !important; padding:9px var(--lp) !important;border-radius:999px; } /* hover: the word deepens to plum and one thin gold line glides under it (see .nav__glide below and nav.js). No background fades in and out, so hopping between links can't flicker. */ .nav .nav__links{position:relative} .nav .nav__links .nav__link:hover, .nav .nav__links .nav__link:focus-visible{color:#482C5B !important} .nav .nav__links .nav__link:focus-visible{outline:none} .nav__glide{ position:absolute;left:0;bottom:3px;height:2px;width:0;border-radius:2px;pointer-events:none; background:linear-gradient(90deg,#C9A25B,#E6B85C);opacity:0; transition:transform .38s cubic-bezier(.22,.8,.28,1),width .38s cubic-bezier(.22,.8,.28,1),opacity .22s ease; } .nav__glide.is-instant{transition:none} /* current section: pressed into the bar, like the round icons elsewhere on the site */ .nav .nav__links .nav__link.is-active, .nav .nav__links .nav__link.is-active:hover{ color:#482C5B !important;background:#F3EADD; box-shadow:inset 2px 2px 5px rgba(148,124,100,.30),inset -2px -2px 5px rgba(255,255,255,.95); } } @media (max-width:900px){ .nav__glide{display:none} .nav .nav__links .nav__link{font-size:1.12rem !important} .nav .nav__links .nav__link.is-active{background:rgba(201,162,91,.16) !important;color:#482C5B !important} } /* ---------- right-hand group: a quiet divider, then the two buttons ---------- */ .nav__cta{position:relative;padding-left:22px} .nav__cta::before{ content:'';position:absolute;left:0;top:50%;height:26px;width:1px;transform:translateY(-50%); background:linear-gradient(180deg,rgba(201,162,91,0),rgba(201,162,91,.6),rgba(201,162,91,0)); } .nav__book{ background:linear-gradient(160deg,#5A3A74 0%,#482C5B 55%,#3A2349 100%) !important; box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 2px 4px rgba(53,34,75,.2),0 12px 22px -10px rgba(53,34,75,.6) !important; font-weight:600 !important; } .nav__book{transition:background .25s ease,box-shadow .25s ease,transform .2s ease !important} .nav__book:hover{ transform:translateY(-1px) !important; background:linear-gradient(160deg,#654085 0%,#523263 55%,#412855 100%) !important; box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 2px 4px rgba(53,34,75,.2),0 10px 18px -10px rgba(53,34,75,.55) !important; } .nav__book:active{transform:none !important} .nav__phone{ color:#482C5B !important;font-weight:600 !important; background:linear-gradient(160deg,#FFFDFA,#F6EFE6) !important; border:1.5px solid rgba(72,44,91,.4) !important; box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 14px -8px rgba(74,50,32,.28) !important; } .nav__phone{transition:background .25s ease,border-color .25s ease !important} .nav__phone:hover{transform:none !important;border-color:#482C5B !important;background:#fff !important;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 6px 14px -8px rgba(74,50,32,.28) !important} /* ---------- phones ---------- */ @media (max-width:620px){ .nav__brand{gap:10px !important} .nav__mark{height:36px !important} .nav__words{height:34px !important} } @media (max-width:360px){ .nav__mark{height:32px !important} .nav__words{height:30px !important} } @media (max-width:900px){.nav__cta::before{display:none}.nav__cta{padding-left:0}}