:root { --site-header-height: 5.5rem; --shell-surface: #FFF; --shell-ink: #1F1F1F; --shell-wordmark: #4796C2; --shell-muted: color-mix(in srgb, #1F1F1F 75%, #2F6F93); --shell-line: color-mix(in srgb, #2F6F93 20%, #FFF); --shell-soft: color-mix(in srgb, #4796C2 10%, #FFF); --shell-active: #2F6F93; --shell-landscape: #4796C2; --shell-social-filter: none; } :root[data-theme="dark"] { --shell-surface: #102B3E; --shell-social-filter: grayscale(1) invert(1) brightness(1.8); --shell-ink: #FFF; --shell-wordmark: #FFF; --shell-muted: color-mix(in srgb, #FFF 88%, #4796C2); --shell-line: color-mix(in srgb, #FFF 20%, var(--shell-surface)); --shell-soft: color-mix(in srgb, #4796C2 20%, var(--shell-surface)); --shell-active: color-mix(in srgb, #4796C2 40%, #FFF); --shell-landscape: #4796C2; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --shell-surface: #102B3E; --shell-social-filter: grayscale(1) invert(1) brightness(1.8); --shell-ink: #FFF; --shell-wordmark: #FFF; --shell-muted: color-mix(in srgb, #FFF 88%, #4796C2); --shell-line: color-mix(in srgb, #FFF 20%, var(--shell-surface)); --shell-soft: color-mix(in srgb, #4796C2 20%, var(--shell-surface)); --shell-active: color-mix(in srgb, #4796C2 40%, #FFF); --shell-landscape: #4796C2; } } .site-header { border-block-end: 1px solid var(--shell-line); background: var(--shell-surface); box-shadow: 0 .3rem 1.4rem color-mix(in srgb, #2F6F93 6%, transparent); backdrop-filter: none; } .site-header__inner { width: min(90%, 81rem); min-height: var(--site-header-height); gap: 1.25rem; } .brand, .footer-brand { color: var(--shell-ink); text-decoration: none; } .brand-logo { display: inline-flex; align-items: center; gap: .65rem; } .brand-logo__image { display: block; width: auto; height: 3.75rem; max-width: 13rem; object-fit: contain; } .brand-logo__mark-fallback { display: block; width: 3.5rem; height: 3.5rem; flex: 0 0 auto; background: url("../images/homepage/mushna-logo-fallback.png") center / contain no-repeat; } .brand-logo__copy { display: grid; gap: .25rem; line-height: 1; } .brand-logo__copy strong { color: var(--shell-wordmark); font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: .02em; line-height: 1; text-transform: uppercase; } .brand-logo__copy small { color: var(--shell-ink); font-family: var(--font-interface); font-size: .6rem; font-weight: 800; letter-spacing: .1em; line-height: 1.25; text-transform: uppercase; } .primary-nav { display: flex; flex: 1 1 auto; align-items: center; gap: 1.25rem; margin: 0; } .primary-nav > ul { flex: 1; gap: clamp(.25rem, 1.2vw, 1.2rem); } .primary-nav a { min-height: 2.75rem; padding: .6rem .65rem; border-radius: .5rem; color: var(--shell-ink); font-size: 1rem; font-weight: 750; } .primary-nav a:hover { background: var(--shell-soft); color: var(--shell-active); } .primary-nav a[aria-current="page"] { background: transparent; color: var(--shell-active); } :root .site-header[data-site-header] .primary-nav a:not(.primary-nav__app):is([aria-current="page"], :hover) { color: var(--shell-active); } .primary-nav a::after { inset-block-end: -.25rem; inset-inline: .6rem; height: .18rem; background: var(--shell-active); } .primary-nav > ul .shell-icon { display: none; } .primary-nav__utility { flex: 0 0 auto; } .primary-nav .primary-nav__app { min-height: 2.85rem; justify-content: center; gap: .6rem; padding-inline: 1.3rem; border: 1px solid #2F6F93; border-radius: 999px; background: linear-gradient(125deg, #2F6F93, color-mix(in srgb, #2F6F93 88%, #4796C2)); color: #FFF; box-shadow: inset 0 1px color-mix(in srgb, #FFF 18%, transparent); } .primary-nav .primary-nav__app:hover { background: #2F6F93; color: #FFF; } .primary-nav__app::after { display: none; } .shell-icon { flex: 0 0 auto; } .appearance-control { position: relative; } .appearance-toggle, .nav-toggle { min-height: 2.75rem; border: 1px solid var(--shell-line); border-radius: 999px; background: transparent; color: var(--shell-ink); box-shadow: none; } .appearance-toggle { gap: .5rem; padding: .5rem .8rem; } .appearance-toggle:hover, .nav-toggle:hover { border-color: #4796C2; background: var(--shell-soft); color: var(--shell-ink); } .appearance-toggle__label { display: none; } .appearance-toggle__sun { display: none; } .appearance-control[data-resolved="dark"] .appearance-toggle__sun { display: block; } .appearance-control[data-resolved="dark"] .appearance-toggle__moon { display: none; } .appearance-options { position: absolute; z-index: 2; inset-block-start: calc(100% + .6rem); inset-inline-end: 0; width: 10rem; padding: .35rem; border: 1px solid var(--shell-line); border-radius: .8rem; background: var(--shell-surface); box-shadow: 0 .6rem 1.5rem color-mix(in srgb, #1F1F1F 15%, transparent); } .appearance-options button { width: 100%; min-height: 2.75rem; justify-content: flex-start; border: 0; border-radius: .5rem; background: transparent; color: var(--shell-ink); box-shadow: none; } .appearance-options button[aria-pressed="true"], .appearance-options button:hover { background: var(--shell-soft); color: var(--shell-active); } .nav-review-label { border-color: var(--shell-active); color: var(--shell-ink); } .site-header :is(a, button):focus-visible, .site-footer a:focus-visible { outline: .18rem solid var(--shell-active); outline-offset: .2rem; box-shadow: 0 0 0 .2rem var(--shell-surface); } .site-footer { position: relative; isolation: isolate; overflow: hidden; border-block-start: 1px solid var(--shell-line); background: var(--shell-surface); color: var(--shell-ink); } .site-footer__inner, .site-footer__legal { position: relative; z-index: 1; width: min(90%, 81rem); } .site-footer__inner { gap: 0; padding-block: 2.75rem 6rem; } .site-footer__inner--columns-4 { grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.35fr); } .site-footer__inner--columns-3 { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.35fr); } .site-footer__inner > * { min-width: 0; } .footer-identity { padding-inline-end: 2.5rem; border-inline-end: 1px solid var(--shell-line); } .footer-nav { padding-inline-start: clamp(1.5rem, 3.5vw, 3rem); } .footer-app { padding-inline-start: clamp(1.5rem, 3.5vw, 3rem); border-inline-start: 1px solid var(--shell-line); } .footer-brand { display: inline-flex; margin-block-end: 1rem; } .footer-identity > p { max-width: 30ch; margin: 0; } .footer-identity p, .footer-app p { color: var(--shell-muted); font-size: 1rem; line-height: 1.5; } .site-footer h2 { margin: 0 0 .9rem; color: var(--shell-ink); font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; text-transform: none; } .footer-app__tagline { margin: 0 0 .45rem; font-weight: 750; } .footer-app > p:not(.footer-app__tagline) { margin: 0 0 .75rem; font-size: .94rem; } .footer-nav li + li { margin-block-start: .45rem; } .footer-nav a, .footer-app__detail { color: var(--shell-ink); font-size: 1rem; font-weight: 550; } .footer-nav a:hover, .footer-app__detail:hover { color: var(--shell-active); text-decoration: underline; } .footer-socials ul { display: flex; gap: .65rem; margin: 1.1rem 0 0; padding: 0; list-style: none; } .footer-socials a { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 50%; background: var(--shell-soft); } .footer-socials a:hover { outline: 1px solid var(--shell-active); } .footer-socials img { display: block; width: 1.4rem; height: 1.4rem; object-fit: contain; filter: var(--shell-social-filter); } .store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-block-start: 1.1rem; } .store-badge { display: inline-flex; width: auto; min-height: 0; padding: 0; border: 0; border-radius: .4rem; background: transparent; box-shadow: none; } .store-badge:hover { background: transparent; } .store-badge img { display: block; width: auto; height: 3rem; border-radius: .4rem; } .store-badges--footer { flex-wrap: nowrap; gap: .6rem; } .store-badges--footer .store-badge { min-width: 0; } .store-badges--footer .store-badge img { width: 100%; max-width: 9rem; height: auto; max-height: 2.75rem; object-fit: contain; } .footer-landscape { position: absolute; z-index: -1; inset: auto 0 3.5rem; width: 100%; height: 8rem; fill: var(--shell-landscape); pointer-events: none; } .footer-landscape__far { opacity: .09; } .footer-landscape__near { opacity: .13; } .footer-landscape__mosque { opacity: .28; } .site-footer__legal { padding-block: 1rem; border-color: var(--shell-line); color: var(--shell-muted); font-size: .94rem; } .site-footer__legal p:last-child { font-style: italic; } .footer-dedication { justify-content: center; color: var(--shell-muted); } @media (width > 68rem) { .primary-nav a { font-size: 1.125rem; } .primary-nav .primary-nav__app { min-height: 3rem; padding-inline: 1.5rem; } .site-footer h2 { font-size: 1.75rem; } .footer-identity p, .footer-nav a { font-size: 1.125rem; } .footer-app > p:not(.footer-app__tagline) { font-size: 1rem; } .footer-socials a { width: 3.25rem; height: 3.25rem; } .footer-socials img { width: 1.6rem; height: 1.6rem; } .store-badges--footer .store-badge img { max-width: 10.5rem; max-height: 3.25rem; } } @media (width <= 80rem) and (width > 68rem) { .site-header__inner { width: 94%; gap: .6rem; } .primary-nav { gap: .6rem; } .primary-nav > ul { gap: .1rem; } .primary-nav a { padding-inline: .45rem; font-size: .92rem; } .brand-logo__copy small { display: none; } .brand-logo__mark-fallback { width: 3rem; height: 3rem; } } @media (width <= 68rem) { :root { --site-header-height: 4.75rem; } .site-header__inner { width: min(calc(100% - 2rem), 81rem); gap: .75rem; } .site-header__actions { grid-column: 2; grid-row: 1; gap: .5rem; } .brand-logo__mark-fallback { width: 3rem; height: 3rem; } .brand-logo__image { height: 3rem; max-width: 12rem; } .brand-logo__copy strong { font-size: 1.6rem; } .brand-logo__copy small { display: none; } .nav-toggle { width: 2.75rem; padding: .65rem; border-color: transparent; border-radius: .5rem; } .nav-toggle > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .nav-toggle__icon { width: 1.4rem; } .site-header[data-menu-enhanced="true"] .primary-nav { position: absolute; inset: 100% 0 auto; width: 100%; max-height: calc(100dvh - var(--site-header-height) - var(--mushna-admin-bar-offset, 0px)); padding: .8rem max(1rem, calc((100vw - 40rem) / 2)) 1.2rem; border-block: 1px solid var(--shell-line); background: var(--shell-surface); box-shadow: 0 1rem 1.5rem color-mix(in srgb, #1F1F1F 12%, transparent); overscroll-behavior: contain; } .site-header[data-menu-enhanced="true"] .primary-nav ul { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: .25rem; } .site-header[data-menu-enhanced="true"] .primary-nav li + li { border: 0; } .site-header[data-menu-enhanced="true"] .primary-nav a { min-height: 3rem; justify-content: flex-start; gap: 1rem; padding: .65rem 1rem; border-radius: .8rem; color: var(--shell-ink); font-size: 1.05rem; } .site-header[data-menu-enhanced="true"] .primary-nav a[aria-current="page"] { background: var(--shell-soft); color: var(--shell-active); } .primary-nav > ul .shell-icon { display: block; } .primary-nav__utility { margin-block-start: 1rem; padding-block: 1rem; border-block: 1px solid var(--shell-line); } .site-header[data-menu-enhanced="true"] .primary-nav .primary-nav__app { justify-content: center; border-radius: 1rem; color: #FFF; } .primary-nav > .appearance-control { margin-block-start: .65rem; } .primary-nav .appearance-toggle { width: 100%; justify-content: flex-start; gap: 1rem; padding-inline: 1rem; border-color: transparent; } .primary-nav .appearance-toggle__label { position: static; display: inline; width: auto; height: auto; clip-path: none; font-size: .95rem; } .primary-nav .appearance-toggle__chevron { margin-inline-start: auto; } .primary-nav .appearance-options { position: static; display: flex; width: 100%; margin-block-start: .4rem; box-shadow: none; } .primary-nav .appearance-options[hidden] { display: none; } .primary-nav .appearance-options button { justify-content: center; } .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding-block: 2.5rem 5rem; } .footer-identity, .footer-nav, .footer-app { grid-column: auto; padding: 0; border: 0; } } @media (width <= 48rem) { .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; padding-block: 2rem 4.5rem; } .footer-identity, .footer-app { grid-column: 1 / -1; } .footer-identity > p { max-width: 38ch; } .footer-app { padding-block-start: 1.5rem; border-block-start: 1px solid var(--shell-line); } .site-footer h2 { font-size: 1.4rem; } .site-footer__legal { flex-direction: column; align-items: flex-start; gap: .3rem; padding-block: .8rem 1rem; } .footer-landscape { inset-block-end: 5rem; height: 5rem; } .store-badges--footer { margin-block-start: 1rem; } } @media (width <= 22rem) { .site-header__inner { width: calc(100% - 1.25rem); gap: .25rem; } .brand-logo { gap: .4rem; } .brand-logo__copy strong { font-size: 1.4rem; } .appearance-toggle { padding-inline: .65rem; } }