/* ============================================ scc-nav.css — Sure Cover Care Ltd Dropdown navigation styles. All classes prefixed with "scc-" so they will NOT interfere with any existing CSS. HOW TO USE: Add this line inside on every page, AFTER your existing stylesheet links: ============================================ */ /* ── Wrapper ── */ .scc-nav { display: flex; align-items: center; } /* ── Nav list ── */ .scc-nav__list { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.25rem; align-items: center; } /* ── Every top-level item ── */ .scc-nav__item > a { display: flex; align-items: center; gap: 0.35rem; color: var(--text-color, #333); font-family: var(--heading-font, 'Montserrat', sans-serif); font-weight: 500; font-size: 1rem; padding: 0.75rem 0.6rem; white-space: nowrap; position: relative; transition: color 0.2s ease; text-decoration: none; } /* underline effect */ .scc-nav__item > a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--primary-color, #28696d); transition: width 0.3s ease; } .scc-nav__item > a:hover::after, .scc-nav__item--active > a::after { width: 100%; } .scc-nav__item > a:hover { color: var(--primary-color, #28696d); } .scc-nav__item--active > a { color: var(--primary-color, #28696d); } /* ── Chevron arrow ── */ .scc-nav__arrow { font-size: 0.65rem; transition: transform 0.3s ease; display: inline-block; pointer-events: none; } .scc-nav__item--dropdown:hover .scc-nav__arrow, .scc-nav__item--dropdown.scc-open .scc-nav__arrow { transform: rotate(180deg); } /* ── Dropdown parent ── */ .scc-nav__item--dropdown { position: relative; } /* ── Dropdown menu ── */ .scc-nav__dropdown { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(-8px); background-color: #ffffff; border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13); border: 1px solid #e0e0e0; min-width: 210px; list-style: none; margin: 0; padding: 0.5rem 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; z-index: 9999; } /* triangle pointer */ .scc-nav__dropdown::before { content: ''; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; background-color: #ffffff; border-left: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; transform: translateX(-50%) rotate(45deg); } /* open on hover (desktop) */ .scc-nav__item--dropdown:hover .scc-nav__dropdown, .scc-nav__item--dropdown.scc-open .scc-nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } /* ── Dropdown links ── */ .scc-nav__dropdown li a { display: flex; align-items: center; gap: 0.65rem; padding: 0.65rem 1.2rem; color: #333333; font-family: var(--heading-font, 'Montserrat', sans-serif); font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } .scc-nav__dropdown li a i { color: var(--primary-color, #28696d); font-size: 0.82rem; width: 16px; text-align: center; flex-shrink: 0; } .scc-nav__dropdown li a:hover { background-color: rgba(40, 105, 109, 0.07); color: var(--primary-color, #28696d); padding-left: 1.6rem; } /* no underline on dropdown links */ .scc-nav__dropdown li a::after { display: none !important; } /* ── Divider line ── */ .scc-nav__divider { height: 1px; background-color: #e0e0e0; margin: 0.4rem 0; pointer-events: none; } /* ── Mobile toggle button ── */ .scc-nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; flex-direction: column; gap: 5px; margin-left: auto; } .scc-nav__toggle span { display: block; width: 25px; height: 3px; background-color: #333333; border-radius: 2px; transition: all 0.2s ease; } /* hamburger → X */ .scc-nav__toggle.scc-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .scc-nav__toggle.scc-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .scc-nav__toggle.scc-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ══════════════════════════ RESPONSIVE — tablet ══════════════════════════ */ @media (max-width: 900px) { .scc-nav__item > a { font-size: 0.88rem; padding: 0.75rem 0.4rem; } } /* ══════════════════════════ RESPONSIVE — mobile ══════════════════════════ */ @media (max-width: 768px) { .scc-nav__toggle { display: flex; } /* Slide-down full-width mobile menu */ .scc-nav__list { position: fixed; top: 55px; left: 0; width: 100%; background-color: #ffffff; flex-direction: column; align-items: stretch; padding: 0.5rem 0 1rem; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; z-index: 9998; gap: 0; max-height: calc(100vh - 55px); overflow-y: auto; } .scc-nav__list.scc-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .scc-nav__item { width: 100%; border-bottom: 1px solid #e0e0e0; } .scc-nav__item:last-child { border-bottom: none; } .scc-nav__item > a { display: flex; align-items: center; justify-content: space-between; padding: 0.95rem 1.5rem; font-size: 1rem; width: 100%; } /* no underline on mobile */ .scc-nav__item > a::after { display: none; } /* Mobile dropdown — slides open inline */ .scc-nav__dropdown { position: static; transform: none !important; box-shadow: none; border: none; border-radius: 0; border-top: 1px solid #e0e0e0; background-color: #f9f9f9; min-width: unset; width: 100%; opacity: 1; visibility: visible; pointer-events: auto; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.35s ease !important; } /* hide the triangle on mobile */ .scc-nav__dropdown::before { display: none; } .scc-nav__item--dropdown.scc-open .scc-nav__dropdown { max-height: 500px; } .scc-nav__dropdown li a { padding: 0.8rem 2rem; font-size: 0.95rem; border-bottom: 1px solid #e0e0e0; } .scc-nav__dropdown li:last-child a { border-bottom: none; } .scc-nav__dropdown li a:hover { padding-left: 2.5rem; } .scc-nav__divider { display: none; /* handled by border-bottom on links */ } }