/* * Melika Core — sign-in sheet, header login button, avatars. * Bottom sheet up to 820px wide (the site's phone breakpoint), a centered window above it. */ #mel-auth, .mel-hdr-acc, .mel-ava, .mel-photo-field { --mel-ink: #12261c; --mel-deep: #0c2419; --mel-jade: #1f5a40; --mel-jade-2: #2a7352; --mel-gold: #d4a441; --mel-gold-soft: #ecc875; --mel-mist: #eef2ea; --mel-paper: #f7f9f5; --mel-muted: #5c6b63; --mel-line: rgba(18, 38, 28, 0.12); --mel-danger: #b4432a; } /* ------------------------------------------------------------------ Shell */ html.mel-auth-open, html.mel-auth-open body { overflow: hidden !important; } #mel-auth { position: fixed; inset: 0; z-index: 100050; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: "Vazirmatn", Tahoma, sans-serif; direction: rtl; color: var(--mel-ink); } #mel-auth[hidden], #mel-auth [hidden] { display: none !important; } #mel-auth *, #mel-auth *::before, #mel-auth *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } #mel-auth .mel-auth__backdrop { position: absolute; inset: 0; background: rgba(12, 36, 25, 0.42); -webkit-backdrop-filter: blur(6px) saturate(1.1); backdrop-filter: blur(6px) saturate(1.1); opacity: 0; transition: opacity 0.35s ease; } #mel-auth.is-open .mel-auth__backdrop { opacity: 1; } #mel-auth .mel-auth__panel { position: relative; width: 100%; max-width: 440px; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; padding: 34px 32px 26px; border-radius: 28px; outline: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-150 -150 300 300'%3E%3Cg fill='none' stroke='%23d4a441' stroke-width='1' opacity='.28'%3E%3Cpolygon points='139,58 58,139 -58,139 -139,58 -139,-58 -58,-139 58,-139 139,-58'/%3E%3Cpolygon points='102,42 42,102 -42,102 -102,42 -102,-42 -42,-102 42,-102 102,-42'/%3E%3C/g%3E%3C/svg%3E") center -360px / 560px 560px no-repeat, linear-gradient(180deg, #f3f7f1 0, #ffffff 150px); box-shadow: 0 40px 90px -30px rgba(12, 36, 25, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.6) inset; transform: translateY(14px) scale(0.97); opacity: 0; transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; } #mel-auth.is-open .mel-auth__panel { transform: none; opacity: 1; } #mel-auth .mel-auth__grab { display: none; } #mel-auth .mel-auth__x { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; background: rgba(18, 38, 28, 0.05); color: var(--mel-ink); cursor: pointer; transition: background 0.2s ease; } #mel-auth .mel-auth__x:hover { background: rgba(18, 38, 28, 0.1); } /* ------------------------------------------------------------------ Head */ #mel-auth .mel-auth__top { display: flex; justify-content: center; margin-bottom: 14px; } #mel-auth .mel-auth__medal { position: relative; display: inline-flex; width: 76px; height: 76px; border-radius: 50%; background: var(--mel-deep); box-shadow: 0 0 0 4px #fff, 0 0 0 5.5px rgba(212, 164, 65, 0.55), 0 18px 34px -16px rgba(12, 36, 25, 0.6); overflow: hidden; } #mel-auth .mel-auth__medal img { width: 100%; height: 100%; object-fit: cover; } #mel-auth h2 { margin: 0 0 6px; font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1.5; color: var(--mel-ink); text-align: center; text-transform: none; letter-spacing: 0; } #mel-auth .mel-auth__lead { margin: 0 0 20px; font-size: 14px; line-height: 1.9; color: var(--mel-muted); text-align: center; } #mel-auth .mel-auth__lead b { color: var(--mel-ink); font-weight: 700; letter-spacing: 0.4px; } /* ------------------------------------------------------------------ Fields */ #mel-auth .mel-auth__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #mel-auth .mel-auth__field { position: relative; display: block; margin: 0 0 14px; } #mel-auth .mel-auth__field input { display: block; width: 100%; height: 58px; margin: 0; padding: 0 52px 0 18px; border: 1.5px solid var(--mel-line); border-radius: 18px; background: var(--mel-paper); box-shadow: none; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: 0.5px; color: var(--mel-ink); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } #mel-auth .mel-auth__field input[name="name"] { font-size: 16px; letter-spacing: 0; text-align: right; } #mel-auth .mel-auth__field input::placeholder { color: #9aa79f; font-weight: 400; letter-spacing: 0; } #mel-auth .mel-auth__field input:focus { outline: none; border-color: var(--mel-jade); background: #fff; box-shadow: 0 0 0 4px rgba(31, 90, 64, 0.12); } #mel-auth .mel-auth__fico { position: absolute; top: 50%; right: 17px; transform: translateY(-50%); color: var(--mel-jade); opacity: 0.75; pointer-events: none; } #mel-auth.has-error .mel-auth__field input { border-color: var(--mel-danger); } /* ------------------------------------------------------------------ Code boxes * One real field (transparent, laid over the boxes) holds the code; the boxes only draw it. */ #mel-auth .mel-auth__otp { position: relative; display: flex; justify-content: center; gap: 10px; margin: 2px 0 18px; } #mel-auth .mel-auth__otp .mel-auth__otp-in { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: none; background: transparent; box-shadow: none; opacity: 0.01; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; text-align: center; cursor: text; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; } #mel-auth .mel-auth__box { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 62px; border: 1.5px solid var(--mel-line); border-radius: 16px; background: var(--mel-paper); font-size: 26px; font-weight: 700; line-height: 1; color: var(--mel-ink); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } #mel-auth .mel-auth__box.is-filled { border-color: rgba(212, 164, 65, 0.8); background: #fffaf0; } #mel-auth .mel-auth__box.is-active { border-color: var(--mel-jade); background: #fff; box-shadow: 0 0 0 4px rgba(31, 90, 64, 0.12); } #mel-auth .mel-auth__box.is-active:empty::after { content: ""; width: 2px; height: 26px; border-radius: 2px; background: var(--mel-jade); animation: mel-caret 1s steps(1) infinite; } @keyframes mel-caret { 50% { opacity: 0; } } #mel-auth.has-error .mel-auth__box { border-color: var(--mel-danger); } #mel-auth.is-shaking .mel-auth__otp { animation: mel-shake 0.42s ease; } @keyframes mel-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } } @media (max-width: 380px) { #mel-auth .mel-auth__otp { gap: 7px; } #mel-auth .mel-auth__box { width: 46px; height: 56px; font-size: 22px; } } /* Password field: show / hide button */ #mel-auth .mel-auth__field--pass input { padding-left: 52px; } #mel-auth .mel-auth__eye { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 0; padding: 0; border: 0; border-radius: 12px; background: none; box-shadow: none; color: var(--mel-muted); cursor: pointer; } #mel-auth .mel-auth__eye.is-on { color: var(--mel-jade); background: rgba(31, 90, 64, 0.08); } #mel-auth.is-shaking [data-step="pass"] .mel-auth__field--pass { animation: mel-shake 0.42s ease; } /* ------------------------------------------------------------------ Buttons and small text */ #mel-auth .mel-auth__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; margin: 0; padding: 0 20px; border: 0; border-radius: 18px; overflow: hidden; cursor: pointer; background: linear-gradient(180deg, var(--mel-jade-2), var(--mel-jade)); color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: 0; text-transform: none; box-shadow: 0 16px 30px -16px rgba(31, 90, 64, 0.85); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } #mel-auth .mel-auth__btn:hover { transform: translateY(-1px); box-shadow: 0 20px 34px -16px rgba(31, 90, 64, 0.9); } #mel-auth .mel-auth__btn:active { transform: translateY(0); } #mel-auth .mel-auth__btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent); transform: skewX(-18deg); transition: left 0.7s ease; } #mel-auth .mel-auth__btn:hover::after { left: 120%; } #mel-auth .mel-auth__btn.is-loading { color: transparent; pointer-events: none; } #mel-auth .mel-auth__btn.is-loading::before { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2.4px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: mel-spin 0.7s linear infinite; } @keyframes mel-spin { to { transform: rotate(360deg); } } #mel-auth .mel-auth__fine { margin: 14px 0 0; font-size: 12.5px; line-height: 1.9; color: var(--mel-muted); text-align: center; } #mel-auth .mel-auth__link { display: inline; padding: 0 2px; border: 0; background: none; box-shadow: none; color: var(--mel-jade); font-family: inherit; font-size: inherit; font-weight: 700; cursor: pointer; text-transform: none; letter-spacing: 0; min-height: 0; } #mel-auth .mel-auth__link:hover { color: var(--mel-deep); text-decoration: underline; text-underline-offset: 4px; } #mel-auth .mel-auth__resend { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 26px; margin: 14px 0 0; font-size: 13px; color: var(--mel-muted); } #mel-auth .mel-auth__sending { display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; vertical-align: -1px; border: 2px solid rgba(31, 90, 64, 0.25); border-top-color: var(--mel-jade); border-radius: 50%; animation: mel-spin 0.7s linear infinite; } #mel-auth .mel-auth__resend [data-mel-timer] b { color: var(--mel-ink); font-weight: 700; } #mel-auth .mel-auth__msg { margin: 12px 0 0; font-size: 13px; line-height: 1.8; text-align: center; color: var(--mel-danger); } #mel-auth .mel-auth__msg:empty { display: none; } #mel-auth.is-step-code .mel-auth__msg, #mel-auth.is-step-pass .mel-auth__msg { display: block; min-height: 24px; margin-top: 8px; } #mel-auth .mel-auth__msg.is-ok { color: var(--mel-jade); } #mel-auth .mel-auth__alt { margin: 18px 0 0; padding-top: 16px; border-top: 1px dashed rgba(18, 38, 28, 0.14); font-size: 13px; color: var(--mel-muted); text-align: center; } #mel-auth .mel-auth__alt a { color: var(--mel-jade); font-weight: 700; text-decoration: none; } #mel-auth .mel-auth__alt a:hover { text-decoration: underline; text-underline-offset: 4px; } #mel-auth.is-step-name .mel-auth__alt, #mel-auth.is-step-done .mel-auth__alt { display: none; } #mel-auth .mel-auth__alt .mel-auth__link { font-size: inherit; } /* Steps slide in gently */ #mel-auth .mel-auth__step { animation: mel-step-in 0.38s cubic-bezier(0.2, 0.8, 0.2, 1); } #mel-auth .mel-auth__step[hidden] { display: none; } @keyframes mel-step-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } /* Done */ #mel-auth .mel-auth__done { padding: 6px 0 4px; text-align: center; } #mel-auth .mel-auth__check { display: inline-flex; margin-bottom: 10px; } #mel-auth .mel-auth__check circle { stroke: var(--mel-jade); stroke-width: 2.5; stroke-dasharray: 152; stroke-dashoffset: 152; animation: mel-draw 0.6s ease forwards; } #mel-auth .mel-auth__check path { stroke: var(--mel-gold); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: mel-draw 0.4s 0.45s ease forwards; } @keyframes mel-draw { to { stroke-dashoffset: 0; } } /* ------------------------------------------------------------------ Phones: bottom sheet */ @media (max-width: 820px) { #mel-auth { align-items: flex-end; padding: 0; } #mel-auth .mel-auth__panel { max-width: none; max-height: 92dvh; border-radius: 28px 28px 0 0; padding: 8px 20px calc(22px + env(safe-area-inset-bottom)); background-position: center -385px, 0 0; transform: translateY(100%); opacity: 1; transition: transform 0.45s cubic-bezier(0.2, 0.85, 0.25, 1); box-shadow: 0 -20px 60px -20px rgba(12, 36, 25, 0.45); } #mel-auth.is-open .mel-auth__panel { transform: translateY(var(--mel-drag, 0px)); } #mel-auth.is-dragging .mel-auth__panel { transition: none; } #mel-auth .mel-auth__grab { display: flex; justify-content: center; padding: 6px 0 14px; cursor: grab; touch-action: none; } #mel-auth .mel-auth__grab span { width: 42px; height: 5px; border-radius: 99px; background: rgba(18, 38, 28, 0.18); } #mel-auth .mel-auth__x { display: none; } #mel-auth .mel-auth__medal { width: 64px; height: 64px; } #mel-auth h2 { font-size: 20px; } #mel-auth .mel-auth__lead { margin-bottom: 18px; font-size: 13.5px; } /* The sheet follows the visible area (set from JS), so it never ends up under the keyboard. */ #mel-auth .mel-auth__panel { max-height: calc(100% - 16px); } /* Keyboard open: a compact sheet, so the field and the button both stay in sight above the keys. */ #mel-auth.is-kb .mel-auth__panel { padding-bottom: 14px; } #mel-auth.is-kb .mel-auth__grab { padding: 4px 0 8px; } #mel-auth.is-kb .mel-auth__top, #mel-auth.is-kb [data-step="phone"] .mel-auth__fine { display: none; } #mel-auth.is-kb .mel-auth__fine { margin-top: 8px; } #mel-auth.is-kb .mel-auth__alt { margin-top: 10px; padding-top: 10px; } #mel-auth.is-kb h2 { margin-bottom: 2px; font-size: 18px; } #mel-auth.is-kb .mel-auth__lead { margin-bottom: 12px; font-size: 13px; line-height: 1.8; } #mel-auth.is-kb .mel-auth__field { margin-bottom: 10px; } #mel-auth.is-kb .mel-auth__field input { height: 52px; } #mel-auth.is-kb .mel-auth__otp { margin-bottom: 12px; } #mel-auth.is-kb .mel-auth__box { height: 56px; } #mel-auth.is-kb .mel-auth__btn { height: 52px; } #mel-auth.is-kb .mel-auth__resend { margin-top: 8px; } } /* ------------------------------------------------------------------ Avatars */ .mel-ava { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; vertical-align: middle; font-family: "Vazirmatn", Tahoma, sans-serif; font-style: normal; line-height: 1; } .mel-ava img { display: block; width: 100%; height: 100%; object-fit: cover; } .mel-ava--letter { background: linear-gradient(145deg, var(--mel-gold-soft), var(--mel-gold)); color: var(--mel-deep); font-size: 14px; font-weight: 700; } .mel-ava--icon { background: var(--mel-mist); color: var(--mel-jade); } .mel-ava--lg { width: 72px; height: 72px; } .mel-ava--lg.mel-ava--letter { font-size: 28px; } /* Bottom bar: the account item shows the avatar instead of the icon */ .wd-toolbar .mel-has-ava .wd-tools-icon::before, .wd-toolbar .mel-has-ava .wd-tools-icon::after { display: none !important; } .wd-toolbar .mel-has-ava .wd-tools-icon { display: inline-flex; align-items: center; justify-content: center; } .wd-toolbar .mel-has-ava .mel-ava { width: 28px; height: 28px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(31, 90, 64, 0.35); } /* Header (desktop): avatar beside the account label */ .whb-header .mel-has-ava .wd-tools-icon::before { display: none !important; } .whb-header .mel-has-ava .wd-tools-icon { display: inline-flex; align-items: center; } .whb-header .mel-has-ava .mel-ava { width: 30px; height: 30px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); } /* Visitors: Woodmart's hover login form is replaced by the sheet */ .mel-guest .whb-header .wd-header-my-account .wd-dropdown { display: none !important; } /* Header (phones): login button or avatar, next to search */ .whb-header .mel-hdr-acc { display: inline-flex !important; align-items: center; width: auto !important; height: auto !important; margin-inline-end: 6px; padding: 0 !important; } .whb-header .mel-hdr-acc .mel-hdr-acc__btn { display: inline-flex !important; width: auto !important; min-width: 0 !important; align-items: center; gap: 6px; height: 36px !important; padding: 0 14px !important; border-radius: 999px !important; background: var(--mel-jade); color: #fff !important; font-family: "Vazirmatn", Tahoma, sans-serif; font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 20px -12px rgba(31, 90, 64, 0.9); } .whb-header .mel-hdr-acc .mel-hdr-acc__btn svg { flex: none; } .whb-header .mel-hdr-acc .mel-hdr-acc__me { display: inline-flex !important; width: auto !important; height: auto !important; border-radius: 50%; } .mel-hdr-acc__me .mel-ava { width: 34px; height: 34px; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(212, 164, 65, 0.7); } @media (min-width: 1025px) { .mel-hdr-acc { display: none; } } /* Account details: photo field */ .mel-photo-field { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; padding: 16px; border: 1px solid rgba(18, 38, 28, 0.08); border-radius: 18px; background: #f7f9f5; } .mel-photo-field__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .mel-photo-field__body label { display: flex; flex-direction: column; margin: 0; } .mel-photo-field__body label span { font-size: 12px; color: #5c6b63; } .mel-photo-field__body input[type="file"] { max-width: 100%; font-size: 13px; } .mel-photo-field__remove { flex-direction: row !important; align-items: center; gap: 6px; font-size: 13px; } @media (prefers-reduced-motion: reduce) { #mel-auth .mel-auth__panel, #mel-auth .mel-auth__backdrop, #mel-auth .mel-auth__step, #mel-auth .mel-auth__btn, #mel-auth .mel-auth__box { transition: none !important; animation: none !important; } #mel-auth .mel-auth__check circle, #mel-auth .mel-auth__check path { animation: none; stroke-dashoffset: 0; } } /* ------------------------------------------------------------------ Header: the account button just goes to the panel (no hover menu) */ /* Gold ring around the student's photo (bottom bar, header): how complete the profile is */ .mel-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 3px; border-radius: 50%; background: conic-gradient(#d4a441 0 var(--mel-pp, 0%), rgba(18, 38, 28, 0.2) var(--mel-pp, 0%) 100%); line-height: 0; } .mel-ring.is-full { background: linear-gradient(145deg, #ecc875, #d4a441); box-shadow: 0 0 10px rgba(212, 164, 65, 0.45); } .mel-ring .mel-ava { box-shadow: 0 0 0 2px #fff !important; } .wd-toolbar .mel-has-ava .mel-ring .mel-ava { width: 26px; height: 26px; } .mel-hdr-acc__me .mel-ring .mel-ava { width: 32px; height: 32px; } .mel-ring__n { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 0 5px; border-radius: 99px; background: #d4a441; color: #0c2419; font-family: "Vazirmatn", Tahoma, sans-serif; font-size: 9px; font-weight: 800; line-height: 14px; white-space: nowrap; box-shadow: 0 0 0 2px #fff; pointer-events: none; } .wd-toolbar .mel-has-ava .wd-tools-icon { overflow: visible !important; } .wd-toolbar .mel-has-ava .wd-toolbar-label { margin-top: 6px; } /* ------------------------------------------------------------------ Header «پیشخوان من»: a tidy account card on hover, with the profile mission */ .whb-header .wd-header-my-account .wd-dropdown-my-account { width: 300px !important; padding: 12px !important; border-radius: 22px !important; background: #fff !important; color: #12261c !important; border: 1px solid rgba(18, 38, 28, 0.08) !important; box-shadow: 0 30px 60px -28px rgba(12, 36, 25, 0.45) !important; font-family: "Vazirmatn", Tahoma, sans-serif; } .whb-header .wd-header-my-account .wd-dropdown-my-account::after { display: none !important; } .mel-dd__me { display: flex; align-items: center; gap: 12px; padding: 6px 6px 12px; } .mel-dd__me .mel-ring .mel-ava { width: 44px; height: 44px; font-size: 18px; } .mel-dd__who { display: flex; flex-direction: column; min-width: 0; } .mel-dd__who b { font-size: 15px; font-weight: 800; color: #12261c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mel-dd__who small { font-size: 11.5px; font-weight: 700; color: #7d5c12; } .mel-dd__mission { display: block; margin: 0 0 10px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(100deg, #fff8e8, #fffdf7); border: 1px solid rgba(212, 164, 65, 0.45); text-decoration: none !important; transition: transform 0.2s, box-shadow 0.2s; } .mel-dd__mission:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -18px rgba(212, 164, 65, 0.9); } .mel-dd__mission strong { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; color: #12261c; } .mel-dd__mission strong span { color: #7d5c12; } .mel-dd__bar { display: block; height: 6px; margin: 8px 0 6px; border-radius: 99px; background: linear-gradient(to left, #d4a441 0 var(--p, 0%), rgba(18, 38, 28, 0.08) var(--p, 0%) 100%); } .mel-dd__mission small { display: block; font-size: 11.5px; color: #5c6b63; } .mel-dd__mission.is-done { background: linear-gradient(100deg, #e7f0e6, #fff); border-color: rgba(31, 90, 64, 0.25); } .whb-header .wd-dropdown-my-account .wd-sub-menu { margin: 0 !important; padding: 6px 0 0 !important; border-top: 1px solid rgba(18, 38, 28, 0.07); } .whb-header .wd-dropdown-my-account .wd-sub-menu li { margin: 0 !important; } .whb-header .wd-dropdown-my-account .wd-sub-menu li > a { display: flex !important; align-items: center; gap: 10px; padding: 10px 10px !important; border-radius: 12px; color: #12261c !important; font-size: 13.5px !important; font-weight: 600 !important; text-transform: none !important; transition: background 0.2s; } .whb-header .wd-dropdown-my-account .wd-sub-menu li > a:hover { background: #eef2ea !important; color: #1f5a40 !important; } .whb-header .wd-dropdown-my-account .wd-sub-menu li > a::before { content: ""; flex: none; width: 18px; height: 18px; background: #1f5a40; -webkit-mask: var(--mel-dd-ico) center / contain no-repeat; mask: var(--mel-dd-ico) center / contain no-repeat; } .whb-header .wd-dropdown-my-account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 4px !important; padding-top: 4px !important; border-top: 1px dashed rgba(18, 38, 28, 0.1); } .whb-header .wd-dropdown-my-account .wd-sub-menu .woocommerce-MyAccount-navigation-link--customer-logout > a { color: #b4432a !important; } .whb-header .wd-dropdown-my-account .wd-sub-menu .woocommerce-MyAccount-navigation-link--customer-logout > a::before { background: #b4432a; } .whb-header .wd-dropdown-my-account .woocommerce-MyAccount-navigation-link--dashboard { --mel-dd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11l8-7 8 7v8.5a1.5 1.5 0 0 1-1.5 1.5H15v-6H9v6H5.5A1.5 1.5 0 0 1 4 19.5z'/%3E%3C/svg%3E"); } .whb-header .wd-dropdown-my-account .woocommerce-MyAccount-navigation-link--my-courses { --mel-dd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.6l5.2 3.4-5.2 3.4z'/%3E%3C/svg%3E"); } .whb-header .wd-dropdown-my-account .woocommerce-MyAccount-navigation-link--orders { --mel-dd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8h13l-1 12.5h-11z'/%3E%3Cpath d='M9 8V7a3 3 0 0 1 6 0v1'/%3E%3C/svg%3E"); } .whb-header .wd-dropdown-my-account .woocommerce-MyAccount-navigation-link--payments { --mel-dd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); } .whb-header .wd-dropdown-my-account .woocommerce-MyAccount-navigation-link--tickets { --mel-dd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h14a2 2 0 0 1 2 2v8.5a2 2 0 0 1-2 2h-7l-5 4v-4H5a2 2 0 0 1-2-2V6.5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E"); } .whb-header .wd-dropdown-my-account .woocommerce-MyAccount-navigation-link--edit-account { --mel-dd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M5 20c1-4 4-5.6 7-5.6s6 1.6 7 5.6'/%3E%3C/svg%3E"); } .whb-header .wd-dropdown-my-account .woocommerce-MyAccount-navigation-link--customer-logout { --mel-dd-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E"); }