/* ========================================================================== HalalVerified — main stylesheet Colours come from the Customizer as --hv-primary / --hv-dark / --hv-accent. ========================================================================== */ :root { --hv-primary: #1f9a45; --hv-dark: #0b4d2c; --hv-accent: #f2a516; --hv-primary-soft: color-mix(in srgb, var(--hv-primary) 12%, #fff); --hv-ink: #16201a; --hv-text: #3d4741; --hv-muted: #6b756f; --hv-line: #e4e8e5; --hv-bg: #f4f6f4; --hv-card: #fff; --hv-red: #d23b2f; --hv-red-soft: #fde8e6; --hv-amber: #c77800; --hv-amber-soft: #fff3dc; --hv-grey-soft: #eef0ef; --hv-radius: 12px; --hv-radius-sm: 8px; --hv-shadow: 0 1px 2px rgba(16, 32, 22, .05), 0 4px 16px rgba(16, 32, 22, .06); --hv-shadow-lg: 0 10px 34px rgba(16, 32, 22, .14); --hv-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --hv-head: "Rubik", "Inter", system-ui, sans-serif; --hv-max: 1440px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font: 15px/1.6 var(--hv-font); color: var(--hv-text); background: var(--hv-bg); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--hv-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--hv-head); color: var(--hv-ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 600; } p { margin: 0 0 1em; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid color-mix(in srgb, var(--hv-primary) 55%, transparent); outline-offset: 2px; border-radius: 4px; } [hidden] { display: none !important; } .screen-reader-text, .hv-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .hv-skip { position: absolute; right: 8px; top: -80px; z-index: 999; background: #fff; padding: 8px 14px; border-radius: 6px; } .hv-skip:focus { top: 8px; } .hv-container { width: 100%; max-width: var(--hv-max); margin: 0 auto; padding: 0 24px; } .hv-container--narrow { max-width: 860px; } .hv-main { min-height: 50vh; } .hv-muted { color: var(--hv-muted); } .hv-ico { width: 20px; height: 20px; flex: none; } /* -------------------------------------------------------------------------- Buttons, inputs, chips ----------------------------------------------------------------------- */ .hv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: var(--hv-radius-sm); border: 1.5px solid transparent; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none !important; transition: background .15s, color .15s, border-color .15s, transform .1s; white-space: nowrap; } .hv-btn:active { transform: translateY(1px); } .hv-btn .hv-ico { width: 18px; height: 18px; } .hv-btn--primary { background: var(--hv-primary); color: #fff; } .hv-btn--primary:hover { background: color-mix(in srgb, var(--hv-primary) 85%, #000); } .hv-btn--dark { background: var(--hv-dark); color: #fff; } .hv-btn--dark:hover { background: color-mix(in srgb, var(--hv-dark) 80%, #000); } .hv-btn--light { background: #fff; color: var(--hv-ink); border-color: #fff; } .hv-btn--light:hover { background: var(--hv-grey-soft); } .hv-btn--outline { background: #fff; color: var(--hv-ink); border-color: var(--hv-line); } .hv-btn--outline:hover { border-color: var(--hv-primary); color: var(--hv-primary); } .hv-btn--sm { padding: 8px 14px; font-size: 13.5px; } .hv-btn--lg { padding: 14px 22px; font-size: 16px; } .hv-btn--block { width: 100%; } .hv-iconbtn { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1.5px solid var(--hv-line); border-radius: var(--hv-radius-sm); background: #fff; color: var(--hv-ink); } .hv-iconbtn:hover { border-color: var(--hv-primary); color: var(--hv-primary); } .hv-link { background: none; border: 0; padding: 0; color: var(--hv-primary); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; } .hv-input { position: relative; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--hv-line); border-radius: var(--hv-radius-sm); padding: 0 12px; min-height: 44px; flex: 1; } .hv-input:focus-within { border-color: var(--hv-primary); } .hv-input > .hv-ico { color: var(--hv-muted); width: 18px; height: 18px; } .hv-input input, .hv-input select { border: 0; outline: 0; background: transparent; font: inherit; color: var(--hv-ink); width: 100%; min-height: 40px; padding: 0; appearance: none; } .hv-input--select::after { content: ""; position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; border: solid var(--hv-muted); border-width: 0 0 2px 2px; transform: translateY(-70%) rotate(-45deg); pointer-events: none; } .hv-input--select select { padding-left: 24px; cursor: pointer; } .hv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--hv-primary-soft); color: var(--hv-dark); } .hv-chip--light { background: rgba(255,255,255,.18); color: #fff; } /* Status badges */ .hv-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 4px 3px 10px; border-radius: 999px; } .hv-status__dot { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; } .hv-status__dot .hv-ico { width: 12px; height: 12px; stroke-width: 3; } .hv-status.is-halal { background: var(--hv-primary-soft); color: var(--hv-dark); } .hv-status.is-halal .hv-status__dot { background: var(--hv-primary); } .hv-status.is-haram { background: var(--hv-red-soft); color: #9b2219; } .hv-status.is-haram .hv-status__dot { background: var(--hv-red); } .hv-status.is-doubtful { background: var(--hv-amber-soft); color: #8a5200; } .hv-status.is-doubtful .hv-status__dot { background: var(--hv-amber); } .hv-status.is-unverified { background: var(--hv-grey-soft); color: var(--hv-muted); } .hv-status.is-unverified .hv-status__dot { background: #9aa39e; } .hv-verified { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px 4px 10px; border-radius: 6px; background: var(--hv-primary); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .01em; } .hv-verified .hv-ico { width: 15px; height: 15px; } .hv-rating { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--hv-text); } .hv-rating .hv-ico { color: var(--hv-accent); width: 17px; height: 17px; } .hv-rating strong { color: var(--hv-ink); } .hv-open { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--hv-muted); } .hv-open i { width: 9px; height: 9px; border-radius: 50%; background: #9aa39e; } .hv-open.is-open { color: var(--hv-text); } .hv-open.is-open i { background: var(--hv-primary); box-shadow: 0 0 0 3px var(--hv-primary-soft); } .hv-open b { font-weight: 600; } .hv-open.is-open b { color: var(--hv-primary); } /* -------------------------------------------------------------------------- Header ----------------------------------------------------------------------- */ .hv-header { background: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--hv-line); } .admin-bar .hv-header { top: 32px; } @media (max-width: 782px) { .admin-bar .hv-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .hv-header { top: 0; } } .hv-header__top { display: flex; align-items: center; gap: 24px; padding-top: 12px; padding-bottom: 12px; } .hv-brand { flex: none; } .hv-brand .custom-logo { max-height: 52px; width: auto; } .hv-brand__tagline { font-size: 11px; color: var(--hv-muted); margin: 2px 0 0; } .hv-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none !important; } .hv-logo__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--hv-primary); color: var(--hv-primary); } .hv-logo__mark .hv-ico { width: 20px; height: 20px; stroke-width: 3.2; } .hv-logo__text { font-family: var(--hv-head); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1; } .hv-logo__text b { color: var(--hv-primary); font-weight: 700; } .hv-logo__text span { color: var(--hv-dark); } .hv-logo--light .hv-logo__mark { border-color: #fff; color: #fff; } .hv-logo--light .hv-logo__text b { color: #fff; } .hv-search { flex: 1; max-width: 520px; display: flex; border: 1.5px solid var(--hv-line); border-radius: var(--hv-radius-sm); overflow: hidden; background: #fff; } .hv-search:focus-within { border-color: var(--hv-primary); } .hv-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 10px 14px; font: inherit; font-size: 14px; } .hv-search button { border: 0; background: var(--hv-primary); color: #fff; width: 48px; display: grid; place-items: center; } .hv-header__links { display: flex; align-items: center; gap: 18px; margin-right: auto; font-size: 14px; } .hv-header__city { display: inline-flex; align-items: center; gap: 4px; color: var(--hv-ink); font-weight: 500; } .hv-header__city .hv-ico { width: 17px; height: 17px; color: var(--hv-dark); } .hv-toplinks { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; } .hv-toplinks a { color: var(--hv-ink); font-weight: 500; } .hv-header__fav { position: relative; color: var(--hv-ink); display: grid; place-items: center; width: 36px; height: 36px; } .hv-fav-count { position: absolute; top: -2px; left: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hv-primary); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } .hv-burger { display: none; margin-right: auto; background: none; border: 0; color: var(--hv-ink); padding: 6px; } .hv-burger .hv-ico { width: 28px; height: 28px; } .hv-nav { background: var(--hv-dark); } .hv-nav__list { display: flex; list-style: none; margin: 0; padding: 0; gap: 4px; } .hv-nav__list > li { position: relative; } .hv-nav__list a { display: flex; align-items: center; gap: 10px; color: #fff; padding: 15px 18px; font-weight: 500; font-size: 14.5px; text-decoration: none !important; border-bottom: 3px solid transparent; } .hv-nav__list a:hover, .hv-nav__list .current-menu-item > a, .hv-nav__list .current-menu-ancestor > a, .hv-nav__list .current_page_item > a { background: rgba(255,255,255,.08); border-bottom-color: var(--hv-primary); } .hv-nav__list .hv-ico { width: 21px; height: 21px; } .hv-nav__list .sub-menu { position: absolute; top: 100%; right: 0; min-width: 220px; list-style: none; margin: 0; padding: 6px; background: #fff; border-radius: var(--hv-radius-sm); box-shadow: var(--hv-shadow-lg); display: none; z-index: 10; } .hv-nav__list li:hover > .sub-menu, .hv-nav__list li:focus-within > .sub-menu { display: block; } .hv-nav__list .sub-menu a { color: var(--hv-ink); padding: 9px 12px; border: 0; border-radius: 6px; } .hv-nav__list .sub-menu a:hover { background: var(--hv-bg); } .hv-nav__mobile-extra { display: none; } /* -------------------------------------------------------------------------- Hero + feature cards ----------------------------------------------------------------------- */ .hv-hero { position: relative; color: #fff; padding: 64px 0 120px; background: radial-gradient(1200px 500px at 85% 40%, rgba(242,165,22,.25), transparent 60%), linear-gradient(-120deg, #07150d 0%, #0f2a1a 45%, #2a1d0f 100%); overflow: hidden; } .hv-hero.has-image { background: linear-gradient(-90deg, rgba(5,12,8,.92) 0%, rgba(5,12,8,.72) 38%, rgba(5,12,8,.15) 75%), var(--hv-hero-img) center / cover no-repeat; } .hv-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; position: relative; } .hv-hero__content { max-width: 780px; } .hv-hero__title { color: #fff; font-size: clamp(34px, 4.6vw, 56px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin-bottom: 18px; } .hv-hl { color: var(--hv-primary); filter: brightness(1.25); } .hv-hero__text { font-size: clamp(16px, 1.5vw, 19px); color: rgba(255,255,255,.9); max-width: 560px; margin-bottom: 28px; } .hv-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; } .hv-hero__badge { flex: none; width: 170px; height: 170px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); display: grid; place-items: center; text-align: center; padding: 24px; transform: rotate(8deg); font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 19px; line-height: 1.2; color: #fff; align-self: flex-start; } .hv-hero__badge .hv-ico { width: 36px; height: 36px; margin: 4px auto 0; opacity: .9; } .hv-features { position: relative; z-index: 2; margin-top: -80px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .hv-feature { background: #fff; border-radius: var(--hv-radius); box-shadow: var(--hv-shadow); padding: 22px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; color: var(--hv-text); text-decoration: none !important; transition: transform .15s, box-shadow .15s; } .hv-feature:hover { transform: translateY(-3px); box-shadow: var(--hv-shadow-lg); } .hv-feature__ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; background: var(--hv-primary-soft); color: var(--hv-dark); } .hv-feature__ico .hv-ico { width: 30px; height: 30px; stroke-width: 2; } .hv-feature--3 .hv-feature__ico, .hv-feature--4 .hv-feature__ico, .hv-feature--5 .hv-feature__ico { background: #fbefe2; color: #9a4f12; } .hv-feature strong { font-family: var(--hv-head); font-size: 17px; color: var(--hv-ink); font-weight: 600; } .hv-feature span { font-size: 14px; color: var(--hv-muted); line-height: 1.45; } /* -------------------------------------------------------------------------- Homepage grid ----------------------------------------------------------------------- */ .hv-home { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-top: 28px; align-items: start; } .hv-home__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } .hv-home__side { position: sticky; top: 140px; } .hv-panel { background: var(--hv-card); border-radius: var(--hv-radius); box-shadow: var(--hv-shadow); padding: 20px; } .hv-panel--tight { padding: 10px; } .hv-panel--green { background: var(--hv-dark); color: rgba(255,255,255,.9); } .hv-panel--green h2 { color: #fff; } .hv-panel + .hv-panel { margin-top: 18px; } .hv-section { margin-bottom: 0; } .hv-section.hv-container { margin-top: 36px; } .hv-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .hv-section__title { font-size: 22px; margin: 0; } h3.hv-section__title { font-size: 17px; } .hv-viewall { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; white-space: nowrap; } .hv-viewall .hv-ico { width: 15px; height: 15px; } .hv-grid { display: grid; gap: 16px; } .hv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hv-grid--products { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); } .hv-grid--products-lg { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .hv-archive .hv-grid--4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } /* -------------------------------------------------------------------------- Cards ----------------------------------------------------------------------- */ .hv-card { position: relative; background: #fff; border-radius: var(--hv-radius); overflow: hidden; display: flex; flex-direction: column; } .hv-archive .hv-card, .hv-section.hv-container .hv-card { box-shadow: var(--hv-shadow); } .hv-card__media { position: relative; display: block; aspect-ratio: 16 / 10.5; border-radius: var(--hv-radius-sm); overflow: hidden; background: var(--hv-grey-soft); } .hv-card__media img, .hv-card__media .hv-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .hv-card:hover .hv-card__media img { transform: scale(1.04); } .hv-card__media .hv-verified { position: absolute; top: 10px; right: 10px; } .hv-ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 100px; background: linear-gradient(-135deg, var(--hv-primary-soft), #f7efe3); color: color-mix(in srgb, var(--hv-dark) 55%, transparent); } .hv-ph .hv-ico { width: 38px; height: 38px; stroke-width: 1.4; } .hv-card__body { padding: 12px 2px 4px; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .hv-archive .hv-card__body, .hv-section.hv-container .hv-card__body { padding: 14px 16px 16px; } .hv-card__title { font-size: 17px; margin: 0; font-weight: 600; } .hv-card__title a { color: var(--hv-ink); } .hv-card__title--sm { font-size: 14.5px; line-height: 1.3; margin-top: 6px; } .hv-card__meta { font-size: 13.5px; color: var(--hv-muted); margin: 0; max-width: 100%; } .hv-card--listing .hv-card__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-card__type { font-size: 13.5px; color: var(--hv-text); margin: 0; } .hv-card__loc { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--hv-text); margin: 0; } .hv-card__loc .hv-ico { width: 16px; height: 16px; color: var(--hv-muted); } .hv-card__excerpt { font-size: 14px; margin: 4px 0; } .hv-tick { display: inline-flex; color: var(--hv-primary); vertical-align: -3px; } .hv-tick .hv-ico { width: 17px; height: 17px; } .hv-fav { position: absolute; top: 8px; left: 8px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--hv-ink); display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: transform .15s; } .hv-fav:hover { transform: scale(1.08); } .hv-fav .hv-ico { width: 19px; height: 19px; } .hv-fav.is-saved { color: #e0334a; } .hv-fav.is-saved .hv-ico { fill: currentColor; } .hv-fav--inline { position: static; box-shadow: none; border: 1.5px solid var(--hv-line); border-radius: var(--hv-radius-sm); width: 42px; height: 42px; } .hv-card--listing .hv-card__media .hv-fav { background: transparent; color: #fff; box-shadow: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } .hv-card--listing .hv-card__media .hv-fav.is-saved { color: #ff4d67; } /* Product card */ .hv-card--product { border: 1px solid var(--hv-line); padding: 12px; } .hv-card--product .hv-fav { top: 6px; left: 6px; box-shadow: none; background: transparent; } .hv-card__pimg { display: grid; place-items: center; height: 110px; margin-bottom: 8px; } .hv-card__pimg img { max-height: 110px; width: auto; object-fit: contain; } .hv-card__pimg .hv-ph { border-radius: var(--hv-radius-sm); height: 110px; } .hv-card--product .hv-card__body { padding: 0; } .hv-card--product .hv-status { font-size: 12px; } .hv-card--product.is-hidden { display: none; } /* Post card */ .hv-card--post .hv-card__media { border-radius: 0; aspect-ratio: 16 / 8; } /* Row (mosque) */ .hv-row { display: flex; align-items: center; gap: 14px; position: relative; padding: 6px; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-sm); background: #fff; } .hv-panel--tight .hv-row { border: 0; } .hv-row + .hv-row { margin-top: 10px; } .hv-row__media { flex: none; width: 96px; height: 70px; border-radius: 6px; overflow: hidden; } .hv-row__media img, .hv-row__media .hv-ph { width: 100%; height: 100%; object-fit: cover; min-height: 0; } .hv-row__media .hv-ph .hv-ico { width: 26px; height: 26px; } .hv-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; } .hv-row__title { font-size: 15px; margin: 0; } .hv-row__title a { color: var(--hv-ink); } .hv-row__title a::after { content: ""; position: absolute; inset: 0; } .hv-row .hv-rating, .hv-row .hv-card__loc { font-size: 13px; } .hv-row__chev { color: var(--hv-muted); } .hv-mosques { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; } .hv-mosques__map { position: relative; min-height: 240px; border-radius: var(--hv-radius-sm); overflow: hidden; background: var(--hv-grey-soft); } .hv-mosques__map .hv-map { position: absolute; inset: 0; height: 100%; } .hv-mapbtn { position: absolute; left: 10px; bottom: 10px; z-index: 500; } /* Product filter chips */ .hv-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; scrollbar-width: thin; } .hv-chipbtn { border: 1px solid var(--hv-line); background: #fff; color: var(--hv-text); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; white-space: nowrap; } .hv-chipbtn:hover { border-color: var(--hv-primary); } .hv-chipbtn.is-active { background: var(--hv-ink); border-color: var(--hv-ink); color: #fff; } /* Scanner promo */ .hv-scancta { display: flex; align-items: center; gap: 20px; padding: 22px 26px; border-radius: var(--hv-radius); background: linear-gradient(-110deg, var(--hv-dark), color-mix(in srgb, var(--hv-primary) 80%, var(--hv-dark))); color: rgba(255,255,255,.9); } .hv-scancta__ico { width: 58px; height: 58px; border-radius: 14px; background: rgba(255,255,255,.14); display: grid; place-items: center; color: #fff; flex: none; } .hv-scancta__ico .hv-ico { width: 30px; height: 30px; } .hv-scancta__text { flex: 1; } .hv-scancta h2 { color: #fff; font-size: 20px; margin-bottom: 2px; } .hv-scancta p { margin: 0; } /* Near you panel */ .hv-near__title { font-size: 21px; } .hv-near__form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .hv-near__row { display: flex; gap: 8px; } .hv-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .hv-tab span { text-align: center; } .hv-tab { cursor: pointer; } .hv-tab input { position: absolute; opacity: 0; pointer-events: none; } .hv-tab span { display: block; padding: 7px 6px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--hv-text); border: 1px solid transparent; } .hv-tab input:checked + span { background: var(--hv-dark); color: #fff; } .hv-tab input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--hv-primary) 55%, transparent); } .hv-near .hv-section__head { margin-top: 6px; margin-bottom: 10px; } .hv-cuisines { display: grid; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 4px; list-style: none; padding: 0; margin: 0 0 22px; } .hv-cuisines a { overflow-wrap: anywhere; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--hv-ink); text-align: center; line-height: 1.2; text-decoration: none; } .hv-cuisines__ico { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--hv-line); display: grid; place-items: center; color: #b45a12; transition: border-color .15s; } .hv-cuisines a:hover .hv-cuisines__ico { border-color: var(--hv-primary); } .hv-suburbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; list-style: none; padding: 0; margin: 0; } .hv-suburbs a { display: grid; place-items: center; min-height: 54px; padding: 6px; border: 1px solid var(--hv-line); border-radius: var(--hv-radius-sm); font-size: 12.5px; color: var(--hv-ink); text-align: center; text-decoration: none; background: var(--hv-bg); } .hv-suburbs a:hover { border-color: var(--hv-primary); color: var(--hv-primary); } /* Near me */ .hv-dist { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--hv-dark); background: var(--hv-primary-soft); padding: 2px 7px 2px 9px; border-radius: 999px; margin-top: 2px; } .hv-dist .hv-ico { width: 14px; height: 14px; } .hv-row .hv-dist { font-size: 12px; } .hv-nearbtn .hv-ico { color: var(--hv-primary); } [data-near].is-loading { opacity: .6; cursor: progress; } .hv-geobar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; flex: 1 1 100%; padding-top: 10px; border-top: 1px solid var(--hv-line); } .hv-geobar__label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--hv-dark); } .hv-geobar__label .hv-ico { color: var(--hv-primary); } .hv-filters .hv-input.hv-geobar__radius { flex: 0 1 200px; } .hv-maptoggle { margin-bottom: 18px; } .hv-maptoggle > summary { list-style: none; cursor: pointer; margin-bottom: 12px; } .hv-maptoggle > summary::-webkit-details-marker { display: none; } .hv-maptoggle__hide, .hv-maptoggle[open] .hv-maptoggle__show { display: none; } .hv-maptoggle[open] .hv-maptoggle__hide { display: inline; } /* Maps */ .hv-map { width: 100%; height: 280px; border-radius: var(--hv-radius-sm); z-index: 0; } .hv-map--lg { height: 380px; margin-bottom: 20px; box-shadow: var(--hv-shadow); } .hv-map--side { height: 220px; margin-top: 14px; } .hv-marker { background: var(--hv-primary); color: #fff; width: 34px !important; height: 34px !important; margin: -34px -17px 0 0 !important; border-radius: 50% 50% 0 50%; transform: rotate(45deg); display: grid; place-items: center; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); } .hv-marker svg { transform: rotate(-45deg); width: 17px; height: 17px; stroke-width: 2.2; } .leaflet-popup-content { font-family: var(--hv-font); } .leaflet-popup-content a { font-weight: 600; } .hv-empty { text-align: center; padding: 40px 20px; color: var(--hv-muted); } .hv-empty > .hv-ico { width: 44px; height: 44px; margin: 0 auto 10px; opacity: .5; } /* -------------------------------------------------------------------------- Inner pages ----------------------------------------------------------------------- */ .hv-pagehead { background: var(--hv-dark); color: rgba(255,255,255,.88); padding: 40px 0 44px; } .hv-pagehead__title { color: #fff; font-size: clamp(28px, 3.4vw, 40px); margin: 6px 0 6px; } .hv-pagehead__text { margin: 0; max-width: 720px; } .hv-pagehead__text p { margin: 0; } .hv-pagehead__actions { margin-top: 18px; } .hv-archive { padding-top: 26px; padding-bottom: 48px; } .hv-count { color: var(--hv-muted); font-size: 14px; margin: 0 0 14px; } .hv-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 20px; background: #fff; padding: 14px; border-radius: var(--hv-radius); box-shadow: var(--hv-shadow); } .hv-filters .hv-input { flex: 1 1 180px; } .hv-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 36px; padding: 24px 28px; border-radius: var(--hv-radius); background: var(--hv-primary-soft); } .hv-banner h2 { margin: 0 0 2px; font-size: 20px; } .hv-banner p { margin: 0; } .pagination, .nav-links { display: flex; justify-content: center; gap: 6px; margin-top: 30px; flex-wrap: wrap; } .page-numbers { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: var(--hv-radius-sm); background: #fff; box-shadow: var(--hv-shadow); color: var(--hv-ink); font-weight: 600; } .page-numbers.current { background: var(--hv-primary); color: #fff; } .hv-back { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; margin: 18px 0 12px; } .hv-back .hv-ico { width: 17px; height: 17px; } /* Single listing */ .hv-single__hero { height: clamp(200px, 32vw, 380px); background: var(--hv-dark); overflow: hidden; } .hv-single__hero .hv-single__img, .hv-single__hero .hv-ph { width: 100%; height: 100%; object-fit: cover; } .hv-single__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; margin-top: -70px; position: relative; padding-bottom: 40px; } .hv-single__layout .hv-back { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); margin-top: 0; } .hv-single__main > .hv-panel + .hv-panel, .hv-single__main > section { margin-top: 18px; } .hv-single__side { padding-top: 38px; } .hv-single__badges { display: flex; gap: 8px; margin-bottom: 10px; } .hv-single__title { font-size: clamp(26px, 3vw, 36px); margin-bottom: 4px; } .hv-single__sub { color: var(--hv-muted); margin-bottom: 10px; } .hv-single__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin-bottom: 16px; } .hv-single__actions { display: flex; flex-wrap: wrap; gap: 8px; } .hv-halalbox h2, .hv-panel > h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; } .hv-halalbox h2 .hv-ico { color: var(--hv-primary); width: 24px; height: 24px; } .hv-halalbox { border-right: 4px solid var(--hv-primary); } .hv-halalbox.is-expired { border-right-color: var(--hv-amber); } .hv-warn { color: var(--hv-amber); } .hv-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 12px; } .hv-dl dt { color: var(--hv-muted); font-size: 14px; } .hv-dl dd { margin: 0; color: var(--hv-ink); } .hv-dl--table { grid-template-columns: 140px 1fr; gap: 0; } .hv-dl--table dt, .hv-dl--table dd { padding: 10px 0; border-bottom: 1px solid var(--hv-line); font-size: 14px; } .hv-side__title { font-size: 18px; } .hv-side__sub { display: flex; align-items: center; gap: 6px; font-size: 15px; margin-top: 16px; } .hv-side__sub .hv-ico { width: 17px; height: 17px; } .hv-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .hv-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; word-break: break-word; } .hv-contact .hv-ico { color: var(--hv-primary); width: 18px; height: 18px; margin-top: 2px; } .hv-hours { font-size: 14px; margin: 0; } .hv-ticks { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; } .hv-ticks li { display: flex; gap: 8px; align-items: flex-start; } .hv-ticks .hv-ico { color: var(--hv-primary); width: 18px; height: 18px; margin-top: 3px; stroke-width: 2.6; } .hv-panel--green .hv-ticks .hv-ico { color: #7fe0a0; } .hv-report summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--hv-ink); list-style: none; } .hv-report summary::-webkit-details-marker { display: none; } .hv-report summary .hv-ico { color: var(--hv-amber); } .hv-report[open] summary { margin-bottom: 14px; } /* Reviews */ .hv-comments__title { font-size: 20px; } .hv-comments__list { list-style: none; padding: 0; margin: 0 0 24px; } .hv-comments__list .comment { padding: 14px 0; border-bottom: 1px solid var(--hv-line); } .hv-comments__list .children { list-style: none; padding-right: 24px; } .comment-meta { display: flex; gap: 10px; align-items: center; font-size: 13.5px; } .comment-author { display: flex; gap: 10px; align-items: center; } .comment-author img { border-radius: 50%; } .comment-metadata a { color: var(--hv-muted); } .comment-content { margin-top: 8px; } .reply a { font-size: 13px; font-weight: 600; } .hv-review-stars { display: flex; gap: 2px; margin-bottom: 4px; } .hv-review-stars .hv-ico { width: 16px; height: 16px; } .hv-review-stars .on { color: var(--hv-accent); } .hv-review-stars .off { color: #d9ddda; } .hv-stars-input { border: 0; padding: 0; margin: 0 0 14px; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; } .hv-stars-input legend { width: 100%; font-weight: 600; color: var(--hv-ink); margin-bottom: 4px; float: right; } .hv-stars-input input { position: absolute; opacity: 0; } .hv-stars-input label { cursor: pointer; color: #d0d5d2; } .hv-stars-input label .hv-ico { width: 30px; height: 30px; } .hv-stars-input label:hover, .hv-stars-input label:hover ~ label, .hv-stars-input input:checked ~ label { color: var(--hv-accent); } .hv-stars-input input:focus-visible + label { outline: 2px solid var(--hv-primary); border-radius: 4px; } .comment-form p { margin-bottom: 12px; } .comment-form label { display: block; font-weight: 600; color: var(--hv-ink); margin-bottom: 4px; font-size: 14px; } .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea, .hv-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .hv-form select, .hv-form textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--hv-line); border-radius: var(--hv-radius-sm); font: inherit; color: var(--hv-ink); background: #fff; } .comment-form input:focus, .comment-form textarea:focus, .hv-form input:focus, .hv-form select:focus, .hv-form textarea:focus { outline: 0; border-color: var(--hv-primary); } .comment-form .submit { background: var(--hv-primary); color: #fff; border: 0; padding: 12px 22px; border-radius: var(--hv-radius-sm); font-weight: 600; } .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; } .comment-form-cookies-consent label { font-weight: 400; } /* Forms */ .hv-form__title { font-size: 20px; } .hv-form__intro { color: var(--hv-muted); } .hv-form__grid { display: flex; flex-wrap: wrap; gap: 14px 2%; margin-bottom: 14px; } .hv-field { flex: 0 0 100%; min-width: 0; } .hv-field.hv-w-half { flex: 0 0 49%; } .hv-field.hv-w-third { flex: 0 0 32%; } .hv-field.hv-w-quarter { flex: 0 0 23.5%; } .hv-field > label { display: block; font-weight: 600; color: var(--hv-ink); font-size: 14px; margin-bottom: 5px; } .hv-field .req { color: var(--hv-red); } .hv-field select { appearance: none; background-image: linear-gradient(-45deg, transparent 50%, var(--hv-muted) 50%), linear-gradient(-135deg, var(--hv-muted) 50%, transparent 50%); background-position: calc(100% - (100% - 18px)) 50%, calc(100% - (100% - 13px)) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-left: 32px; } .hv-field--file input { font-size: 14px; } .hv-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; cursor: pointer; } .hv-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--hv-primary); } .hv-field.has-error input, .hv-field.has-error select, .hv-field.has-error textarea { border-color: var(--hv-red); } .hv-field__err { color: var(--hv-red); font-size: 13px; margin: 4px 0 0; } .hv-form__privacy { font-size: 13px; color: var(--hv-muted); } .hv-form.is-loading button[type=submit] { opacity: .65; pointer-events: none; } .hv-notice { padding: 12px 16px; border-radius: var(--hv-radius-sm); margin: 0 0 14px; font-weight: 500; } .hv-notice.is-success { background: var(--hv-primary-soft); color: var(--hv-dark); } .hv-notice.is-error { background: var(--hv-red-soft); color: #9b2219; } .hv-formpage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; padding-top: 28px; padding-bottom: 48px; align-items: start; } .hv-formpage__side .hv-panel--green h2 { font-size: 19px; } /* Prose */ .hv-prose { font-size: 16px; line-height: 1.75; } .hv-prose h2 { font-size: 24px; margin-top: 1.4em; } .hv-prose h3 { font-size: 19px; margin-top: 1.2em; } .hv-prose > :first-child { margin-top: 0; } .hv-prose img { border-radius: var(--hv-radius-sm); } .hv-prose__img { width: 100%; border-radius: var(--hv-radius-sm); margin-bottom: 20px; } .hv-prose ul, .hv-prose ol { padding-right: 1.3em; } .hv-prose blockquote { border-right: 4px solid var(--hv-primary); margin: 1.4em 0; padding: .2em 1.2em .2em 0; color: var(--hv-ink); } .hv-container--narrow > .hv-panel { margin-top: 28px; margin-bottom: 28px; } .hv-blog { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; padding-top: 28px; padding-bottom: 28px; align-items: start; } .hv-widget { background: #fff; padding: 20px; border-radius: var(--hv-radius); box-shadow: var(--hv-shadow); margin-bottom: 18px; } .hv-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .hv-tags a, .hv-tags li > a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--hv-line); border-radius: 999px; font-size: 13.5px; color: var(--hv-ink); } .hv-tags .hv-ico { width: 16px; height: 16px; } .post-navigation .nav-links { justify-content: space-between; } .post-navigation a { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; } .hv-share { margin-top: 24px; } /* -------------------------------------------------------------------------- Product result ----------------------------------------------------------------------- */ .hv-product-page { padding-bottom: 48px; max-width: 980px; } .hv-result { padding: 24px; } .hv-result__top { display: flex; gap: 24px; align-items: flex-start; margin-bottom: 20px; } .hv-result__img { flex: none; width: 170px; height: 190px; display: grid; place-items: center; background: #fff; } .hv-result__img img { max-height: 190px; width: auto; object-fit: contain; } .hv-result__img .hv-ph { border-radius: var(--hv-radius); } .hv-result__info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .hv-result__info .hv-verified { background: var(--hv-primary-soft); color: var(--hv-dark); border-radius: 999px; margin-bottom: 8px; } .hv-result__info .hv-verified .hv-ico { color: var(--hv-primary); } .hv-result__title { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 6px; } .hv-result__brand { color: var(--hv-text); margin: 0; } .hv-result__size { color: var(--hv-muted); margin: 0 0 12px; } .hv-result__tools { display: flex; gap: 8px; } .hv-verdict { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--hv-radius); margin-bottom: 22px; } .hv-verdict__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; } .hv-verdict__ico .hv-ico { width: 26px; height: 26px; stroke-width: 3; } .hv-verdict strong { display: block; font-family: var(--hv-head); font-size: 22px; line-height: 1.1; } .hv-verdict span { font-size: 14px; } .hv-verdict.is-halal { background: var(--hv-primary-soft); color: var(--hv-dark); } .hv-verdict.is-halal .hv-verdict__ico { background: var(--hv-primary); } .hv-verdict.is-haram { background: var(--hv-red-soft); color: #8d1f17; } .hv-verdict.is-haram .hv-verdict__ico { background: var(--hv-red); } .hv-verdict.is-doubtful { background: var(--hv-amber-soft); color: #7a4700; } .hv-verdict.is-doubtful .hv-verdict__ico { background: var(--hv-amber); } .hv-verdict.is-unverified { background: var(--hv-grey-soft); color: var(--hv-text); } .hv-verdict.is-unverified .hv-verdict__ico { background: #8e9893; } .hv-ptabs__nav { display: flex; gap: 4px; border-bottom: 1px solid var(--hv-line); margin-bottom: 8px; overflow-x: auto; } .hv-ptabs__nav button { background: none; border: 0; border-bottom: 2.5px solid transparent; padding: 10px 14px; font-size: 14px; font-weight: 500; color: var(--hv-muted); white-space: nowrap; } .hv-ptabs__nav button.is-active { color: var(--hv-dark); border-bottom-color: var(--hv-primary); font-weight: 600; } .hv-ptabs__panel { padding: 8px 0; } .hv-result__notes { margin-top: 16px; font-size: 14px; color: var(--hv-muted); } .hv-flags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 14px; border-radius: var(--hv-radius-sm); background: var(--hv-amber-soft); margin-top: 10px; font-size: 14px; } .hv-flag { background: #fff; border: 1px solid #f0d49a; color: #7a4700; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; } .hv-disclaimer { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--hv-muted); margin: 18px 0 0; } .hv-disclaimer .hv-ico { width: 17px; height: 17px; margin-top: 2px; } .hv-result__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hv-line); } .hv-result__foot .hv-report { flex: 1 1 100%; } /* -------------------------------------------------------------------------- Scanner app ----------------------------------------------------------------------- */ .hv-scanpage { padding-top: 26px; padding-bottom: 48px; } .hv-scanpage__intro h1 { font-size: clamp(26px, 3vw, 36px); } .hv-scanapp { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 24px; align-items: start; } .hv-phone { background: #fff; border-radius: 22px; box-shadow: var(--hv-shadow-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 640px; position: sticky; top: 130px; } .hv-phone__bar { background: #111; color: #fff; display: flex; align-items: center; gap: 8px; padding: 16px; min-height: 58px; } .hv-phone__bar h2 { color: #fff; font-size: 17px; margin: 0; flex: 1; text-align: center; } .hv-phone__back { background: none; border: 0; color: #fff; padding: 0; } .hv-view { display: none; padding: 0 0 16px; flex: 1; } .hv-view.is-active { display: block; } .hv-view[data-view="history"], .hv-view[data-view="favourites"], .hv-view[data-view="search"] { padding: 16px; } .hv-cam { position: relative; aspect-ratio: 4 / 3.3; background: #1a1d1b; overflow: hidden; } .hv-cam video, .hv-cam__lib { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hv-cam__lib video { object-fit: cover; width: 100% !important; height: 100% !important; } .hv-cam__lib img, .hv-cam__lib #qr-shaded-region { display: none !important; } .hv-cam__frame { position: absolute; inset: 18% 12%; pointer-events: none; } .hv-cam__frame i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--hv-primary); } .hv-cam__frame i:nth-child(1) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; } .hv-cam__frame i:nth-child(2) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; } .hv-cam__frame i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; } .hv-cam__frame i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; } .hv-cam__laser { position: absolute; right: 8%; left: 8%; top: 50%; height: 2px; background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; opacity: 0; } .hv-cam.is-live .hv-cam__laser { opacity: 1; animation: hv-laser 2s ease-in-out infinite; } @keyframes hv-laser { 0%, 100% { top: 22%; } 50% { top: 78%; } } @media (prefers-reduced-motion: reduce) { .hv-cam.is-live .hv-cam__laser { animation: none; } } .hv-cam__idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: rgba(255,255,255,.75); } .hv-cam__idle > .hv-ico { width: 54px; height: 54px; opacity: .4; } .hv-cam.is-live .hv-cam__idle { display: none; } .hv-cam__photo { color: #c8f1d4; cursor: pointer; font-size: 14px; } .hv-cam__hint { position: absolute; right: 0; left: 0; bottom: 0; margin: 0; padding: 10px; text-align: center; color: #fff; font-size: 13px; background: linear-gradient(transparent, rgba(0,0,0,.65)); } .hv-cam__stop { position: absolute; top: 10px; left: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; z-index: 3; } .hv-scan__status { min-height: 1.5em; text-align: center; font-size: 13.5px; color: var(--hv-muted); margin: 10px 16px 0; } .hv-scan__status.is-error { color: var(--hv-red); } .hv-or { display: flex; align-items: center; gap: 12px; margin: 6px 16px 12px; color: var(--hv-muted); font-size: 13px; font-weight: 600; } .hv-or::before, .hv-or::after { content: ""; flex: 1; height: 1px; background: var(--hv-line); } .hv-scan__manual { padding: 0 16px; display: flex; flex-direction: column; gap: 12px; position: relative; } .hv-suggest { position: absolute; top: 48px; right: 16px; left: 16px; z-index: 5; list-style: none; margin: 0; padding: 4px; background: #fff; border-radius: var(--hv-radius-sm); box-shadow: var(--hv-shadow-lg); max-height: 280px; overflow: auto; } .hv-phone__tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hv-line); margin-top: auto; } .hv-phone__tabs button { background: none; border: 0; padding: 10px 4px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: var(--hv-muted); } .hv-phone__tabs button.is-active { color: var(--hv-primary); font-weight: 600; } .hv-phone__tabs .hv-ico { width: 22px; height: 22px; } .hv-list { list-style: none; margin: 0; padding: 0; } .hv-list li + li { border-top: 1px solid var(--hv-line); } .hv-list__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; background: none; border: 0; text-align: right; color: inherit; border-radius: 6px; } .hv-list__item:hover { background: var(--hv-bg); text-decoration: none; } .hv-list__thumb { width: 44px; height: 44px; flex: none; border-radius: 8px; overflow: hidden; background: var(--hv-grey-soft); display: grid; place-items: center; color: var(--hv-muted); } .hv-list__thumb img { width: 100%; height: 100%; object-fit: contain; } .hv-list__thumb .hv-ico { width: 20px; height: 20px; } .hv-list__text { flex: 1; min-width: 0; } .hv-list__text strong { display: block; color: var(--hv-ink); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hv-list__text span { font-size: 12.5px; color: var(--hv-muted); } .hv-list .hv-status { font-size: 11.5px; padding-left: 8px; flex: none; } .hv-list__empty { text-align: center; color: var(--hv-muted); padding: 30px 10px; font-size: 14px; } .hv-list__clear { margin: 12px auto 0; display: block; } .hv-result--app { min-height: 640px; } .hv-result__empty { text-align: center; padding: 60px 20px; color: var(--hv-muted); max-width: 440px; margin: 0 auto; } .hv-result__empty > .hv-ico { width: 60px; height: 60px; margin: 0 auto 14px; opacity: .35; } .hv-steps { text-align: right; display: inline-flex; flex-direction: column; gap: 6px; padding-right: 1.2em; margin-top: 10px; } .hv-result__src { font-size: 13px; color: var(--hv-muted); margin-top: 16px; } .hv-request { margin-top: 24px; scroll-margin-top: 140px; } .hv-skeleton { height: 14px; border-radius: 6px; background: linear-gradient(-90deg, var(--hv-grey-soft), #f8f9f8, var(--hv-grey-soft)); background-size: 200% 100%; animation: hv-sk 1.2s infinite; margin: 10px 0; } @keyframes hv-sk { to { background-position: 300% 0; } } /* -------------------------------------------------------------------------- Footer + toast ----------------------------------------------------------------------- */ .hv-footer { background: var(--hv-dark); color: rgba(255,255,255,.75); margin-top: 56px; padding-top: 48px; font-size: 14.5px; } .hv-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 32px; padding-bottom: 36px; } .hv-footer__about p { margin: 14px 0; max-width: 360px; } .hv-footer__title { color: #fff; font-size: 16px; margin-bottom: 14px; } .hv-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .hv-footer a:not(.hv-btn) { color: rgba(255,255,255,.85); } .hv-footer a:not(.hv-btn):hover { color: #fff; } .hv-footer .hv-logo__text { font-size: 24px; } .hv-socials { display: flex; gap: 8px; } .hv-socials a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); } .hv-socials a:hover { background: var(--hv-primary); } .hv-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 18px; padding-bottom: 24px; font-size: 13px; } .hv-footer__disclaimer { color: rgba(255,255,255,.6); max-width: 900px; } .hv-toast { position: fixed; right: 50%; bottom: 24px; transform: translateX(50%); background: var(--hv-ink); color: #fff; padding: 11px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; z-index: 1000; box-shadow: var(--hv-shadow-lg); } .hv-404 { padding: 60px 24px; } .search-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto 20px; } .search-form label { flex: 1; min-width: 0; display: flex; } .search-form .search-field { flex: 1; width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 13px; border: 1.5px solid var(--hv-line); border-radius: var(--hv-radius-sm); font: inherit; } .search-form .search-submit { background: var(--hv-primary); color: #fff; border: 0; padding: 0 18px; border-radius: var(--hv-radius-sm); font-weight: 600; } /* WordPress core alignments */ .alignwide { margin-right: -40px; margin-left: -40px; max-width: calc(100% + 80px); } .alignfull { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); max-width: 100vw; width: 100vw; } .wp-caption-text, figcaption { font-size: 13px; color: var(--hv-muted); text-align: center; } /* -------------------------------------------------------------------------- Responsive ----------------------------------------------------------------------- */ @media (max-width: 1320px) { .hv-header__city { display: none; } } @media (max-width: 1100px) { .hv-header__links { display: none; } .hv-burger { display: block; } .hv-search { max-width: none; } .hv-nav { display: none; } .hv-nav.is-open { display: block; } .hv-nav__list { flex-direction: column; gap: 0; padding: 8px 0; } .hv-nav__list a { border-bottom: 0; border-right: 3px solid transparent; padding: 13px 8px; } .hv-nav__list .sub-menu { position: static; display: block; box-shadow: none; background: transparent; padding-right: 30px; } .hv-nav__list .sub-menu a { color: #fff; } .hv-nav__mobile-extra { display: flex; flex-direction: column; gap: 12px; padding: 0 0 18px; border-top: 1px solid rgba(255,255,255,.12); } .hv-nav__list--secondary { padding-bottom: 0; } .hv-features { grid-template-columns: repeat(3, 1fr); } .hv-home { grid-template-columns: 1fr; } .hv-home__side { position: static; } .hv-single__layout, .hv-formpage, .hv-blog { grid-template-columns: 1fr; } .hv-single__side { padding-top: 0; } .hv-scanapp { grid-template-columns: 1fr; } .hv-phone { position: static; max-width: 460px; width: 100%; margin: 0 auto; min-height: 0; } .hv-result--app { min-height: 0; } .hv-footer__grid { grid-template-columns: 1fr 1fr; } .hv-hero__badge { width: 140px; height: 140px; font-size: 16px; } } @media (max-width: 760px) { body { font-size: 15px; } .hv-container { padding: 0 16px; } .hv-header__top { flex-wrap: wrap; gap: 10px; } .hv-brand__tagline { display: none; } .hv-logo__text { font-size: 23px; } .hv-logo__mark { width: 30px; height: 30px; border-width: 2.5px; } .hv-search { order: 3; flex: 1 1 100%; } .hv-hero { padding: 40px 0 96px; } .hv-hero__badge { display: none; } .hv-hero__btns .hv-btn { flex: 1 1 100%; } .hv-features { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: -64px; } .hv-feature { padding: 16px 12px; } .hv-feature:last-child { grid-column: 1 / -1; } .hv-feature__ico { width: 52px; height: 52px; } .hv-feature span { font-size: 13px; } .hv-panel { padding: 16px; } .hv-scroll-x { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; } .hv-scroll-x::-webkit-scrollbar { display: none; } .hv-scroll-x > * { flex: 0 0 70%; scroll-snap-align: start; } .hv-grid--products.hv-scroll-x > * { flex-basis: 44%; } .hv-grid--3, .hv-grid--4 { grid-template-columns: 1fr; } .hv-archive .hv-grid--4 { grid-template-columns: 1fr; } .hv-grid--products-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hv-mosques { grid-template-columns: 1fr; } .hv-scancta { flex-direction: column; text-align: center; } .hv-field.hv-w-half, .hv-field.hv-w-third, .hv-field.hv-w-quarter { flex: 0 0 100%; } .hv-result { padding: 16px; } .hv-result__top { gap: 14px; } .hv-result__img { width: 100px; height: 130px; } .hv-dl--table { grid-template-columns: 110px 1fr; } .hv-footer__grid { grid-template-columns: 1fr; gap: 26px; } .hv-single__layout { margin-top: -40px; } .hv-phone { border-radius: 16px; } .alignwide { margin-right: 0; margin-left: 0; max-width: 100%; } } /* ========================================================================== v1.2 features ========================================================================== */ /* Halal details */ .hv-hdchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .hv-hdchip { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--hv-grey-soft); color: var(--hv-text); } .hv-hdchip.is-good { background: var(--hv-primary-soft); color: var(--hv-dark); } .hv-hdchip.is-warn { background: var(--hv-amber-soft); color: #7a4700; } .hv-hd__list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .hv-hd__list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--hv-radius-sm); background: var(--hv-bg); } .hv-hd__list li .hv-ico { flex: none; margin-top: 2px; } .hv-hd__list li.is-good .hv-ico { color: var(--hv-primary); } .hv-hd__list li.is-warn .hv-ico { color: var(--hv-amber); } .hv-hd__list li.is-info .hv-ico { color: var(--hv-muted); } .hv-hd__list small { display: block; font-size: 12px; color: var(--hv-muted); line-height: 1.3; } .hv-hd__list span { font-weight: 500; color: var(--hv-ink); line-height: 1.35; } .hv-hd__note { font-size: 13px; color: var(--hv-muted); margin: 0; } .hv-hdfilter { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; order: 5; } .hv-togglechip { cursor: pointer; } .hv-togglechip input { position: absolute; opacity: 0; pointer-events: none; } .hv-togglechip span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--hv-line); border-radius: 999px; font-size: 13px; font-weight: 500; background: #fff; } .hv-togglechip input:checked + span { background: var(--hv-dark); border-color: var(--hv-dark); color: #fff; } .hv-togglechip input:checked + span::before { content: "✓"; font-weight: 700; } .hv-togglechip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--hv-primary) 55%, transparent); } .hv-filters > .hv-btn, .hv-filters > .hv-link { order: 6; } .hv-filters .hv-geobar, .hv-filters .hv-nearbtn { order: 7; } /* Install bar */ .hv-install { position: fixed; right: 16px; left: 16px; bottom: 16px; z-index: 900; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; background: #fff; border-radius: 14px; box-shadow: var(--hv-shadow-lg); transform: translateY(140%); transition: transform .25s ease; } .hv-install.is-in { transform: none; } .hv-install__ico img { width: 40px; height: 40px; border-radius: 10px; } .hv-install__text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; } .hv-install__text strong { display: block; color: var(--hv-ink); font-size: 14.5px; } .hv-install__text span { color: var(--hv-muted); } .hv-install__close { background: none; border: 0; color: var(--hv-muted); padding: 4px; } @media (prefers-reduced-motion: reduce) { .hv-install { transition: none; } } /* Prayer times */ .hv-prayer__title { display: flex; align-items: center; gap: 8px; font-size: 19px; } .hv-prayer__title .hv-ico { color: var(--hv-primary); } .hv-prayer__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .hv-prayer__place { display: block; color: var(--hv-ink); font-family: var(--hv-head); font-size: 17px; } .hv-prayer__date { font-size: 13px; color: var(--hv-muted); } .hv-prayer__locate { width: 38px; height: 38px; } .hv-prayer__next { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; border-radius: var(--hv-radius-sm); background: var(--hv-dark); color: rgba(255,255,255,.8); margin-bottom: 12px; } .hv-prayer__next span { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; flex: 1 1 100%; } .hv-prayer__next strong { color: #fff; font-family: var(--hv-head); font-size: 22px; font-weight: 600; } .hv-prayer__next em { font-style: normal; color: #9be3b4; font-weight: 600; } .hv-prayer__list { list-style: none; margin: 0; padding: 0; } .hv-prayer__list li { display: flex; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid var(--hv-line); } .hv-prayer__list li:last-child { border-bottom: 0; } .hv-prayer__list li b { color: var(--hv-ink); font-variant-numeric: tabular-nums; } .hv-prayer__list li.is-sun { color: var(--hv-muted); } .hv-prayer__list li.is-sun b { color: var(--hv-muted); font-weight: 500; } .hv-prayer__list li.is-next { background: var(--hv-primary-soft); border-radius: 6px; padding-right: 10px; padding-left: 10px; border-bottom-color: transparent; } .hv-prayer__list li.is-next span, .hv-prayer__list li.is-next b { color: var(--hv-dark); font-weight: 700; } .hv-prayer__nav { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; } .hv-prayer__note { font-size: 12.5px; color: var(--hv-muted); margin: 12px 0 0; } .hv-prayer--full .hv-prayer__list li { padding: 12px 6px; font-size: 16px; } .hv-prayer-side { margin-bottom: 18px; } .hv-prayer-side .hv-prayer__list li { padding: 7px 4px; font-size: 14px; } .hv-prayer-side .hv-viewall { margin-top: 10px; display: inline-flex; } .hv-prayerpage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding-top: 26px; padding-bottom: 40px; align-items: start; } .hv-prayerpage .hv-panel + .hv-panel { margin-top: 0; } .hv-prayerpage__content { grid-column: 1 / -1; } /* Qibla */ .hv-qibla { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; } .hv-qibla__compass { position: relative; width: 220px; height: 220px; flex: none; margin: 0 auto; } .hv-qibla__dial { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--hv-line); background: radial-gradient(circle, #fff 55%, var(--hv-bg) 100%); transition: transform .2s linear; } .hv-qibla__dial span { position: absolute; font-weight: 700; font-size: 13px; color: var(--hv-muted); } .hv-qibla__dial .n { top: 8px; right: 50%; transform: translateX(50%); color: var(--hv-red); } .hv-qibla__dial .s { bottom: 8px; right: 50%; transform: translateX(50%); } .hv-qibla__dial .e { left: 10px; top: 50%; transform: translateY(-50%); } .hv-qibla__dial .w { right: 10px; top: 50%; transform: translateY(-50%); } .hv-qibla__needle { position: absolute; right: 50%; top: 18px; bottom: 50%; width: 4px; margin-right: -2px; background: var(--hv-primary); border-radius: 2px; transform-origin: 50% 100%; transition: transform .2s linear; } .hv-qibla__needle::after { content: ""; position: absolute; right: 50%; bottom: -8px; width: 16px; height: 16px; margin-right: -8px; border-radius: 50%; background: var(--hv-dark); } .hv-qibla__kaaba { position: absolute; top: -14px; right: 50%; width: 22px; height: 22px; margin-right: -11px; background: #111; border-radius: 3px; box-shadow: inset 0 5px 0 #c8a24a; } .hv-qibla.is-aligned .hv-qibla__needle { background: #e0a800; } .hv-qibla__info { flex: 1 1 240px; } .hv-qibla__info h2 { font-size: 20px; } .hv-qibla__deg strong { font-family: var(--hv-head); font-size: 30px; color: var(--hv-ink); } .hv-qibla__deg span { color: var(--hv-muted); } .hv-qibla__status { min-height: 1.4em; font-weight: 600; color: var(--hv-dark); margin: 10px 0 4px; } .hv-qibla__tip { font-size: 13px; color: var(--hv-muted); margin: 0; } @media (max-width: 900px) { .hv-prayerpage { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .hv-qibla__dial, .hv-qibla__needle { transition: none; } } /* Ingredient guide */ .hv-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; } .hv-az a { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 8px; background: #fff; box-shadow: var(--hv-shadow); font-weight: 700; color: var(--hv-ink); } .hv-ingletter { scroll-margin-top: 140px; margin-bottom: 18px; } .hv-ingletter h2 { font-size: 22px; color: var(--hv-dark); margin-bottom: 8px; } .hv-inglist { list-style: none; padding: 0; margin: 0; background: #fff; border-radius: var(--hv-radius); box-shadow: var(--hv-shadow); overflow: hidden; } .hv-inglist li + li { border-top: 1px solid var(--hv-line); } .hv-inglist a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; color: var(--hv-text); text-decoration: none; } .hv-inglist a:hover { background: var(--hv-bg); } .hv-inglist__name { font-weight: 600; color: var(--hv-ink); flex: 1 1 220px; } .hv-inglist__name em { font-style: normal; font-weight: 500; color: var(--hv-muted); margin-right: 4px; } .hv-inglist__fn { font-size: 13px; color: var(--hv-muted); flex: 0 1 180px; } .hv-inglink { color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; font-weight: 600; } .hv-inglink.is-halal { text-decoration-color: var(--hv-primary); } .hv-inglink.is-doubtful { text-decoration-color: var(--hv-amber); } .hv-inglink.is-haram { text-decoration-color: var(--hv-red); } /* Community confirmations */ .hv-confirmed { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--hv-dark); margin-top: 2px; } .hv-confirmed .hv-ico { width: 14px; height: 14px; color: var(--hv-primary); } .hv-community { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; } .hv-community__status { display: flex; gap: 12px; align-items: center; flex: 1 1 300px; } .hv-community__ico { width: 44px; height: 44px; border-radius: 50%; background: var(--hv-primary-soft); color: var(--hv-dark); display: grid; place-items: center; flex: none; } .hv-community__status strong { display: block; color: var(--hv-ink); } .hv-community__status span { font-size: 13.5px; color: var(--hv-muted); } .hv-community__form { flex: 1 1 100%; } .hv-community__form > summary { list-style: none; cursor: pointer; display: inline-flex; } .hv-community__form > summary::-webkit-details-marker { display: none; } .hv-community__form[open] > summary { margin-bottom: 14px; } .hv-community__form .hv-form { display: block; } .hv-community__form .hv-link { margin-right: 14px; } @media (min-width: 761px) { .hv-community__form:not([open]) { flex: 0 0 auto; } } /* Watch */ .hv-watch { margin: 0 0 20px; padding: 14px 16px; border: 1px dashed var(--hv-line); border-radius: var(--hv-radius-sm); } .hv-watch__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; } .hv-watch__ico { color: var(--hv-primary); margin-top: 2px; } .hv-watch__head strong { display: block; color: var(--hv-ink); } .hv-watch__head span { font-size: 13.5px; color: var(--hv-muted); } .hv-watch__form { display: flex; gap: 8px; flex-wrap: wrap; } .hv-watch__form .hv-field { flex: 1 1 200px; } .hv-watch .hv-form__msg .hv-notice { margin-bottom: 0; } .hv-result--app .hv-watch { margin-top: 18px; } /* Landing pages & cross-links */ .hv-crumbs { font-size: 13.5px; color: rgba(255,255,255,.7); } .hv-crumbs a { color: rgba(255,255,255,.9); } .hv-landing__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .hv-landing__facts .hv-panel { margin: 0; padding: 14px 18px; display: flex; align-items: baseline; gap: 8px; } .hv-landing__facts b { font-family: var(--hv-head); font-size: 28px; color: var(--hv-dark); } .hv-landing__facts span { color: var(--hv-muted); } .hv-landing__more { margin-top: 30px; display: grid; gap: 18px; } .hv-landing__faq { margin-top: 24px; } .hv-combolinks { margin: 0 0 20px; } .hv-combolinks h2 { font-size: 17px; margin-bottom: 10px; } .hv-combolinks ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .hv-combolinks a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; background: #fff; border: 1px solid var(--hv-line); border-radius: 999px; font-size: 14px; color: var(--hv-ink); text-decoration: none; } .hv-combolinks a:hover { border-color: var(--hv-primary); color: var(--hv-primary); } .hv-combolinks a span { font-size: 12px; font-weight: 700; color: var(--hv-muted); background: var(--hv-bg); border-radius: 999px; padding: 0 7px; } .hv-combolinks--plain { margin: 0; } @media (max-width: 760px) { .hv-landing__facts { grid-template-columns: 1fr; } } /* Events */ .hv-event { display: flex; gap: 14px; background: #fff; border-radius: var(--hv-radius); box-shadow: var(--hv-shadow); padding: 14px; } .hv-panel .hv-event { box-shadow: none; padding: 10px 0; border-radius: 0; } .hv-panel .hv-event + .hv-event { border-top: 1px solid var(--hv-line); } .hv-event__date { flex: none; width: 62px; border-radius: 10px; background: var(--hv-primary-soft); color: var(--hv-dark); text-align: center; display: flex; flex-direction: column; justify-content: center; padding: 8px 4px; text-decoration: none !important; align-self: flex-start; } .hv-event__date span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .hv-event__date b { font-family: var(--hv-head); font-size: 26px; line-height: 1.05; } .hv-event__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .hv-event__title { font-size: 16.5px; margin: 2px 0; } .hv-event__title a { color: var(--hv-ink); } .hv-event__meta { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; margin: 0; color: var(--hv-text); } .hv-event__meta .hv-ico { width: 16px; height: 16px; color: var(--hv-muted); margin-top: 2px; } .hv-event__cost { font-size: 13px; font-weight: 600; color: var(--hv-dark); margin: 0; } .hv-evbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; } .hv-evbar .hv-chips { margin: 0; padding: 0; } .hv-chips a.hv-chipbtn { text-decoration: none; } .hv-seg { display: inline-flex; background: #fff; border-radius: 10px; box-shadow: var(--hv-shadow); padding: 4px; } .hv-seg a { padding: 8px 16px; border-radius: 7px; font-weight: 600; font-size: 14px; color: var(--hv-text); text-decoration: none; } .hv-seg a.is-active { background: var(--hv-dark); color: #fff; } .hv-evmonth { font-size: 18px; margin: 22px 0 12px; color: var(--hv-dark); } .hv-cal { background: #fff; border-radius: var(--hv-radius); box-shadow: var(--hv-shadow); padding: 16px; } .hv-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .hv-cal__head h2 { margin: 0; font-size: 20px; } .hv-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .hv-cal__dow { font-size: 12px; font-weight: 700; color: var(--hv-muted); text-align: center; padding: 6px 0; text-transform: uppercase; } .hv-cal__day { min-height: 92px; border: 1px solid var(--hv-line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .hv-cal__day.is-empty { border: 0; } .hv-cal__day.is-today { border-color: var(--hv-primary); box-shadow: inset 0 0 0 1px var(--hv-primary); } .hv-cal__num { font-size: 13px; font-weight: 700; color: var(--hv-ink); } .hv-cal__ev { display: block; font-size: 12px; line-height: 1.25; padding: 3px 6px; border-radius: 5px; background: var(--hv-primary-soft); color: var(--hv-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } .hv-cal__ev:hover { background: var(--hv-primary); color: #fff; } .hv-single__layout.is-flat { margin-top: 0; } .hv-single__layout.is-flat .hv-back { color: var(--hv-primary); text-shadow: none; margin-top: 18px; } .hv-single__layout.is-flat .hv-single__side { padding-top: 58px; } @media (max-width: 760px) { .hv-cal__grid { gap: 2px; } .hv-cal__day { min-height: 54px; padding: 4px; } .hv-cal__ev { font-size: 0; padding: 0; height: 6px; border-radius: 3px; background: var(--hv-primary); } .hv-single__layout.is-flat .hv-single__side { padding-top: 0; } } /* Featured & deals */ .hv-featured { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: var(--hv-accent); color: #3b2600; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; letter-spacing: .02em; } .hv-dealribbon { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: var(--hv-red); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; } .hv-featstrip { margin-bottom: 26px; padding: 18px; border-radius: var(--hv-radius); background: linear-gradient(-135deg, #fff8e8, #fff); border: 1px solid #f3dfae; } .hv-featstrip .hv-section__head { align-items: center; } .hv-featstrip__note { font-size: 12px; color: #8a6a1f; font-weight: 600; } .hv-featstrip--home { background: linear-gradient(-135deg, #fff8e8, #fff); } .hv-deals h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; } .hv-deals h2 .hv-ico { color: var(--hv-accent); } .hv-deals__list { display: grid; gap: 12px; } .hv-deal { display: flex; background: #fff; border-radius: var(--hv-radius); box-shadow: var(--hv-shadow); overflow: hidden; } .hv-deals .hv-deal { box-shadow: none; border: 1px solid var(--hv-line); } .hv-deal__badge { flex: none; width: 104px; display: grid; place-items: center; text-align: center; padding: 12px; background: var(--hv-dark); color: #fff; font-family: var(--hv-head); font-size: 19px; font-weight: 700; line-height: 1.15; border-left: 2px dashed rgba(255,255,255,.35); } .hv-deal__body { flex: 1; min-width: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .hv-deal__title { font-size: 16px; margin: 0; } .hv-deal__place { margin: 0; font-size: 13.5px; color: var(--hv-muted); } .hv-deal__place a { font-weight: 600; } .hv-deal__text { margin: 0; font-size: 14px; } .hv-deal__foot { display: flex; gap: 10px; align-items: center; margin-top: 4px; flex-wrap: wrap; } .hv-deal__code { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: .06em; padding: 4px 10px; border: 1.5px dashed var(--hv-primary); border-radius: 6px; background: var(--hv-primary-soft); color: var(--hv-dark); } .hv-deal__until { font-size: 12.5px; color: var(--hv-muted); } .hv-deal__terms { font-size: 12.5px; color: var(--hv-muted); } .hv-deal__terms summary { cursor: pointer; } .hv-chip--ramadan { background: #efe6ff; color: #4b2a8a; } .hv-promo__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .hv-promo__pkg { border: 1px solid var(--hv-line); border-radius: var(--hv-radius-sm); padding: 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .hv-promo__pkg strong { color: var(--hv-ink); } .hv-promo__pkg b { font-family: var(--hv-head); font-size: 24px; color: var(--hv-dark); } .hv-promo__pkg span { font-size: 13px; color: var(--hv-muted); margin-bottom: 6px; } .hv-promo__note { font-size: 12.5px; color: var(--hv-muted); margin: 10px 0 0; } /* Owner dashboard */ .hv-owner { padding-top: 22px; padding-bottom: 48px; } .hv-owner__auth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .hv-owner__auth .hv-panel + .hv-panel { margin-top: 0; } .hv-owner__auth #loginform p { margin-bottom: 12px; } .hv-owner__auth #loginform label { display: block; font-weight: 600; color: var(--hv-ink); font-size: 14px; margin-bottom: 4px; } .hv-owner__auth #loginform input[type=text], .hv-owner__auth #loginform input[type=password] { width: 100%; padding: 11px 13px; border: 1.5px solid var(--hv-line); border-radius: var(--hv-radius-sm); font: inherit; } .hv-owner__auth #loginform .login-remember label { font-weight: 400; display: flex; gap: 8px; align-items: center; } .hv-owner__auth #wp-submit { background: var(--hv-primary); color: #fff; border: 0; padding: 12px 24px; border-radius: var(--hv-radius-sm); font-weight: 600; cursor: pointer; } .hv-owner__h { font-size: 24px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .hv-owner__h .hv-link { font-size: 14px; } .hv-owner__form .hv-panel h3, .hv-owner .hv-panel h3 { font-size: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .hv-owner__form > .hv-btn { margin-top: 18px; } .hv-field__help { display: block; font-size: 12.5px; color: var(--hv-muted); margin-top: 4px; } .hv-owner__thumb img { width: 110px; height: 110px; object-fit: cover; border-radius: 8px; margin-bottom: 8px; } .hv-owner__gal { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .hv-owner__gal label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 400; } .hv-owner__gal img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; } .hv-owner__card .hv-owner__head { display: flex; gap: 16px; align-items: center; } .hv-owner__img { width: 84px; height: 84px; border-radius: 10px; overflow: hidden; flex: none; } .hv-owner__img img, .hv-owner__img .hv-ph { width: 100%; height: 100%; object-fit: cover; min-height: 0; } .hv-owner__card h2 { font-size: 20px; margin: 0 0 2px; } .hv-owner__card .hv-muted { margin: 0 0 6px; font-size: 14px; } .hv-owner__stats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .hv-owner__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hv-line); } .hv-owner__promo { margin-top: 14px; } .hv-owner__promo summary { cursor: pointer; font-weight: 600; color: var(--hv-ink); display: inline-flex; gap: 6px; align-items: center; } .hv-owner__promo summary .hv-ico { color: var(--hv-accent); } .hv-owner__promo[open] summary { margin-bottom: 12px; } .hv-owner .hv-list__item form { margin-right: auto; } .hv-claim { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; border: 1px dashed var(--hv-line); box-shadow: none; } .hv-claim strong { color: var(--hv-ink); } .hv-claim span { font-size: 13.5px; color: var(--hv-muted); } .hv-ownerlink { margin-bottom: 18px; } .hv-claimsearch .hv-list { margin-top: 8px; } .hv-gallery { padding: 10px; } .hv-gallery__row { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; } .hv-gallery__row a { flex: 0 0 150px; scroll-snap-align: start; } .hv-gallery__row img { width: 150px; height: 150px; object-fit: cover; border-radius: 8px; } @media (max-width: 900px) { .hv-owner__auth { grid-template-columns: 1fr; } } /* Ramadan & Eid */ .hv-seasonbar { background: linear-gradient(-90deg, #1d1647, #2c2468 60%, #3b2b6e); color: rgba(255,255,255,.88); font-size: 14px; } .hv-seasonbar.is-eid_fitr, .hv-seasonbar.is-eid_adha { background: linear-gradient(-90deg, #6b4b00, #a77a12); } .hv-seasonbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 9px; padding-bottom: 9px; } .hv-seasonbar__moon { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 5px 3px 0 0 #f6d77a; transform: rotate(20deg); flex: none; } .hv-seasonbar strong { color: #fff; } .hv-seasonbar b { color: #f6d77a; font-variant-numeric: tabular-nums; } .hv-seasonbar em { font-style: normal; color: rgba(255,255,255,.7); } .hv-seasonbar__sep { margin: 0 4px; opacity: .5; } .hv-seasonbar__link { margin-right: auto; color: #f6d77a; font-weight: 600; } .hv-seasonbar__link:hover { color: #fff; } .hv-hdchip.is-ramadan { background: #efe6ff; color: #4b2a8a; } .hv-ramadanbox { border-right: 4px solid #5b3fb0; } .hv-ramadanbox h2 { font-size: 19px; } .hv-ramadan { background: linear-gradient(-160deg, #f5f1ff, #fff 55%); } .hv-ramadan__h { font-size: 15px; color: #4b2a8a; text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 10px; } .hv-ramadan .hv-section__head + .hv-ramadan__h { margin-top: 4px; } @media (max-width: 760px) { .hv-seasonbar__link { margin-right: 0; } .hv-seasonbar { font-size: 13px; } } /* Evidence & attribution */ .hv-why { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--hv-radius-sm); background: var(--hv-bg); } .hv-why h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--hv-muted); margin-bottom: 6px; } .hv-why p { margin: 0 0 6px; font-size: 14.5px; } .hv-why__basis { display: flex; gap: 6px; align-items: center; color: var(--hv-ink); } .hv-why__basis .hv-ico { color: var(--hv-primary); width: 18px; height: 18px; } .hv-why__meta { font-size: 13px !important; color: var(--hv-muted); margin: 6px 0 0 !important; } .hv-offcredit { font-size: 12px; color: var(--hv-muted); margin: 10px 0 0; } .hv-footer .hv-offcredit { color: rgba(255,255,255,.55); } .hv-footer .hv-offcredit a { color: rgba(255,255,255,.75) !important; } .hv-turnstile { margin: 4px 0 12px; min-height: 65px; } .hv-watch .hv-turnstile { flex: 1 1 100%; margin: 0; } /* Push notifications */ .hv-pushrow { margin: 12px 0 0; } .hv-pushbar { display: flex; justify-content: center; padding-top: 10px; } .hv-pushbtn { gap: 6px; } .hv-pushbtn[hidden] { display: none !important; } .hv-pushbtn.is-on { background: var(--hv-primary-soft); border-color: var(--hv-primary); color: var(--hv-primary); } .hv-pushbtn svg { width: 16px; height: 16px; } /* Mosque iqamah timetable */ .hv-iqamah { margin-top: 20px; } .hv-iqamah__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; } .hv-iqamah__table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-variant-numeric: tabular-nums; } .hv-iqamah__table th, .hv-iqamah__table td { padding: 9px 8px; border-bottom: 1px solid var(--hv-line); text-align: start; } .hv-iqamah__table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--hv-muted); font-weight: 600; } .hv-iqamah__table tbody th { font-weight: 600; } .hv-iqamah__iq { font-weight: 700; color: var(--hv-primary); } .hv-iqamah__table tr.is-next { background: var(--hv-primary-soft); } .hv-iqamah__table tr.is-next th::after { content: " •"; color: var(--hv-primary); } .hv-iqamah__jumuah td { font-weight: 600; } .hv-iqamah__note { margin: 10px 0 0; } .hv-iqamah__foot { font-size: .82rem; margin: 10px 0 0; } /* Visitor accounts */ .hv-header__account { position: relative; color: var(--hv-ink); display: grid; place-items: center; width: 36px; height: 36px; } .hv-header__account svg { width: 22px; height: 22px; } .hv-header__account.is-in::after { content: ""; position: absolute; left: 5px; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--hv-primary); border: 2px solid #fff; } .hv-account { padding-top: 28px; padding-bottom: 48px; } .hv-account__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .hv-account__main, .hv-account__side { display: grid; gap: 20px; } .hv-account__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .hv-account h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; margin: 0 0 12px; } .hv-account h2 svg { width: 20px; height: 20px; color: var(--hv-primary); } .hv-account__alerts { list-style: none; margin: 0 0 10px; padding: 0; } .hv-account__alerts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hv-line); } .hv-account__pw { margin: 4px 0 14px; } .hv-account__pw summary, .hv-account__delete summary { cursor: pointer; font-weight: 600; } .hv-account__pw[open] summary { margin-bottom: 10px; } .hv-account__delete summary { color: var(--hv-red); } .hv-account__delete form { margin-top: 10px; } .hv-account .hv-form .hv-field { margin-bottom: 12px; } .hv-checklist { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; } .hv-checklist li { display: flex; gap: 8px; align-items: flex-start; } .hv-checklist svg { width: 18px; height: 18px; color: var(--hv-primary); flex: none; margin-top: 2px; } .hv-small { font-size: .86rem; } .hv-form__foot { font-size: .82rem; color: var(--hv-muted); margin: 10px 0 0; } .hv-btn--danger { background: var(--hv-red); color: #fff; border-color: var(--hv-red); margin-top: 10px; } .hv-memberbadge { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--hv-primary-soft); color: var(--hv-dark); margin: 0 0 6px 8px; vertical-align: middle; } .hv-memberbadge svg { width: 12px; height: 12px; } .hv-memberbadge--team { background: var(--hv-dark); color: #fff; } .hv-memberbadge--owner { background: #fff4d6; color: #7a5600; } @media (max-width: 900px) { .hv-account__grid { grid-template-columns: 1fr; } } /* Weekly digest signup */ .hv-newsletter { max-width: 520px; } .hv-newsletter__title { margin: 0 0 4px; font-size: 18px; } .hv-newsletter__text { margin: 0 0 12px; opacity: .85; } .hv-newsletter__row { display: flex; gap: 8px; } .hv-newsletter__row input { flex: 1 1 0; width: 0; min-width: 0; padding: 11px 14px; border-radius: var(--hv-radius-sm, 8px); border: 1px solid var(--hv-line); font: inherit; } .hv-newsletter__msg { margin: 10px 0 0; font-weight: 600; } .hv-newsletter__msg.is-error { color: var(--hv-red); } .hv-newsletter.is-done .hv-newsletter__row { display: none; } .hv-newsletter .hv-turnstile { margin-top: 10px; min-height: 0; } .hv-newsletter--footer { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); gap: 8px 32px; align-items: center; padding: 0 0 24px; margin: 0 0 20px; border-bottom: 1px solid rgba(255,255,255,.12); } .hv-newsletter--footer .hv-newsletter__title { color: #fff; grid-column: 1; } .hv-newsletter--footer .hv-newsletter__text { grid-column: 1; margin: 0; color: rgba(255,255,255,.8); } .hv-newsletter--footer .hv-newsletter__row { grid-column: 2; grid-row: 1 / span 2; } .hv-newsletter--footer .hv-newsletter__row input { border-color: transparent; } .hv-newsletter--footer .hv-newsletter__msg, .hv-newsletter--footer .hv-turnstile { grid-column: 2; color: #fff; } .hv-newsletter--footer .hv-newsletter__msg.is-error { color: #ffb4ab; } @media (max-width: 760px) { .hv-newsletter--footer { grid-template-columns: minmax(0, 1fr); } .hv-newsletter--footer .hv-newsletter__row, .hv-newsletter--footer .hv-newsletter__msg, .hv-newsletter--footer .hv-turnstile { grid-column: 1; grid-row: auto; } } /* Owner dashboard stats */ .hv-ownerstats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 14px; color: var(--hv-muted); align-items: baseline; } .hv-ownerstats__label { font-weight: 600; color: var(--hv-ink); } .hv-ownerstats b { color: var(--hv-ink); } /* Wide fonts (e.g. Arabic) make inputs' default width larger — never let one overflow. */ input, select, textarea { max-width: 100%; } /* Language switcher */ .hv-lang { position: relative; } .hv-lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 6px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--hv-ink); } .hv-lang summary::-webkit-details-marker { display: none; } .hv-lang summary:hover { background: var(--hv-primary-soft); } .hv-lang summary svg { width: 18px; height: 18px; } .hv-lang ul { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 190px; background: #fff; border-radius: 10px; box-shadow: var(--hv-shadow-lg); } .hv-lang a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--hv-ink); text-decoration: none; } .hv-lang a:hover, .hv-lang a[aria-current] { background: var(--hv-primary-soft); } .hv-lang a[aria-current] { font-weight: 700; } /* Breadcrumbs */ .hv-crumbs ol { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 13.5px; } .hv-crumbs li { display: inline-flex; align-items: center; gap: 4px; opacity: .85; } .hv-crumbs li + li::before { content: "›"; opacity: .7; } .hv-crumbs a { color: inherit; text-decoration: none; } .hv-crumbs a:hover { text-decoration: underline; } .hv-crumbs [aria-current] { font-weight: 600; opacity: 1; } .hv-pagehead .hv-crumbs { color: rgba(255,255,255,.85); } .hv-single__layout .hv-crumbs { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5); margin-top: 0; } .hv-single__layout.is-flat .hv-crumbs, .hv-result + .hv-crumbs, .hv-container > .hv-crumbs { color: var(--hv-muted); text-shadow: none; margin-top: 18px; } /* City prayer-time pages */ .hv-pcity { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; padding-top: 26px; padding-bottom: 40px; align-items: start; } .hv-pcity__main, .hv-pcity__side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; } .hv-pcity__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } .hv-pcity__time { background: var(--hv-bg); border-radius: var(--hv-radius-sm); padding: 14px 10px; text-align: center; display: grid; gap: 4px; } .hv-pcity__time strong { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--hv-ink); } .hv-pcity__name { font-size: 13px; color: var(--hv-muted); font-weight: 600; } .hv-pcity__name small { display: block; font-weight: 500; } .hv-pcity__time.is-next { background: var(--hv-dark); } .hv-pcity__time.is-next strong, .hv-pcity__time.is-next .hv-pcity__name { color: #fff; } .hv-pcity__note { font-size: 13.5px; color: var(--hv-muted); margin: 14px 0 0; } .hv-tablewrap { overflow-x: auto; } .hv-pcity__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; } .hv-pcity__table th, .hv-pcity__table td { padding: 7px 8px; border-bottom: 1px solid var(--hv-line); text-align: center; white-space: nowrap; } .hv-pcity__table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--hv-muted); } .hv-pcity__table tbody th { text-align: start; font-weight: 600; } .hv-pcity__table tr.is-today { background: var(--hv-primary-soft); font-weight: 700; } .hv-citylinks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; } .hv-citylinks a { color: var(--hv-primary); text-decoration: none; font-weight: 500; } .hv-citylinks a[aria-current] { color: var(--hv-ink); font-weight: 700; } .hv-pcity__side .hv-citylinks { grid-template-columns: 1fr 1fr; } @media (max-width: 900px) { .hv-pcity { grid-template-columns: minmax(0, 1fr); } .hv-pcity__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .hv-pagehead .hv-container > .hv-crumbs { color: rgba(255,255,255,.88); margin-top: 0; } .hv-pcity__time strong { white-space: nowrap; } @media (max-width: 480px) { .hv-pcity__time { padding: 12px 4px; } .hv-pcity__time strong { font-size: 17px; } } /* ---- RTL extras (appended by tools/build-rtl.sh) ---- */ :root { --hv-font: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif; --hv-head: 'Noto Sans Arabic', 'Rubik', system-ui, sans-serif; } body, button, input, select, textarea { font-family: var(--hv-font); } html[lang^="ur"] body { line-height: 1.8; } .hv-ico--arrow-right, .hv-ico--arrow-left, .hv-ico--chevron-right { transform: scaleX(-1); } .hv-logo__text { direction: ltr; unicode-bidi: isolate; } [data-barcode], input[type="email"], input[type="tel"], input[type="url"], .hv-iqamah__table td { direction: ltr; unicode-bidi: plaintext; } .leaflet-container { direction: ltr; }