:root { --site-header-height: 6.15rem; } .site-header { border-block-end: 1px solid #E8E8E8; background: color-mix(in srgb, #FFF 94%, transparent); box-shadow: 0 .5rem 2.5rem color-mix(in srgb, #333 8%, transparent); backdrop-filter: blur(1.1rem); } .site-header__inner { width: min(calc(100% - clamp(2rem, 6vw, 6rem)), 90rem); min-height: var(--site-header-height); gap: clamp(1.1rem, 2.8vw, 2.8rem); } .brand, .footer-brand { color: #333; text-decoration: none; } .brand-logo { display: inline-flex; align-items: center; gap: .8rem; } .brand-logo__image { display: block; width: auto; height: 4.55rem; max-width: 15.25rem; object-fit: contain; } .brand-logo__mark-fallback { display: block; width: 4.55rem; height: 4.55rem; flex: 0 0 auto; background: #4796C2; -webkit-mask: url("../images/homepage/mushna-logo-fallback.png") center / contain no-repeat; mask: url("../images/homepage/mushna-logo-fallback.png") center / contain no-repeat; } .brand-logo__copy { display: grid; gap: .18rem; color: #333; font-family: var(--font-interface); line-height: 1; } .brand-logo__copy strong { color: #4796C2; font-size: 1.9rem; font-weight: 900; letter-spacing: .05em; line-height: 1; text-transform: uppercase; } .brand-logo__copy small { color: #333; font-size: .78rem; font-weight: 800; letter-spacing: .1em; line-height: 1.25; text-transform: uppercase; } .primary-nav ul { gap: clamp(.25rem, .65vw, .7rem); } .primary-nav a { min-height: 3rem; padding: .7rem clamp(.58rem, .82vw, .9rem); color: #333; font-size: 1rem; font-weight: 750; } .primary-nav a::after { background: #4796C2; } .primary-nav a:hover, .primary-nav a[aria-current="page"] { background: color-mix(in srgb, #4796C2 10%, #FFF); color: #333; } .nav-review-label { border-color: #4796C2; color: #333; font-size: .75rem; } .appearance-toggle, .nav-toggle { min-height: 3rem; border-color: #E8E8E8; background: #FFF; color: #333; font-size: .94rem; box-shadow: 0 .35rem 1.2rem color-mix(in srgb, #333 8%, transparent); } .appearance-toggle:hover, .nav-toggle:hover { border-color: #4796C2; background: color-mix(in srgb, #4796C2 8%, #FFF); color: #333; } .site-header :is(a, button):focus-visible, .site-footer a:focus-visible { outline: .2rem solid #4796C2; outline-offset: .2rem; box-shadow: 0 0 0 .2rem #FFF; } .site-footer { position: relative; overflow: hidden; border-block-start: 1px solid #E8E8E8; background: #FFF; color: #333; } .site-footer::before { position: absolute; inset: 0 0 auto; height: .35rem; background: #4796C2; content: ""; } .footer-dedication { color: #333; } .site-footer__inner { width: min(calc(100% - clamp(2rem, 6vw, 6rem)), 90rem); gap: clamp(2.4rem, 5vw, 5.25rem); padding-block: clamp(3.75rem, 6vw, 5.5rem); } .site-footer__inner--columns-3 { grid-template-columns: minmax(18rem, 1.45fr) minmax(10rem, .65fr) minmax(19rem, 1.15fr); } .site-footer__inner--columns-4 { grid-template-columns: minmax(17rem, 1.4fr) minmax(9rem, .65fr) minmax(10rem, .78fr) minmax(18rem, 1.12fr); } .footer-brand { display: inline-flex; margin-block-end: 1.25rem; } .brand-logo--footer .brand-logo__image, .brand-logo--footer .brand-logo__mark-fallback { width: auto; height: 5.2rem; } .footer-identity p, .footer-app p { color: #333; font-size: 1rem; line-height: 1.68; } .site-footer h2, .footer-kicker { color: #333; font-size: .9rem; } .footer-app h2 { color: #333; font-family: var(--font-display); font-size: clamp(1.75rem, 2.4vw, 2.3rem); letter-spacing: -.02em; line-height: 1.05; text-transform: none; } .footer-nav li + li { margin-block-start: .7rem; } .footer-nav a, .footer-app__detail { color: #333; font-size: 1rem; font-weight: 650; } .footer-nav a:hover, .footer-app__detail:hover { color: #333; text-decoration-color: #4796C2; text-decoration-thickness: .14rem; } .footer-socials ul { display: flex; gap: .85rem; margin: 1.5rem 0 0; padding: 0; list-style: none; } .footer-socials a { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border: 1px solid #E8E8E8; border-radius: 50%; background: #FFF; box-shadow: 0 .45rem 1.3rem color-mix(in srgb, #333 8%, transparent); } .footer-socials a:hover { border-color: #4796C2; transform: translateY(-.15rem); } .footer-socials img { display: block; width: 1.65rem; height: 1.65rem; object-fit: contain; } .store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block-start: 1.4rem; } .store-badge { display: inline-flex; width: auto; min-height: 0; padding: 0; border: 0; border-radius: .45rem; background: transparent; box-shadow: 0 .45rem 1.25rem color-mix(in srgb, #333 12%, transparent); } .store-badge:hover { background: transparent; transform: translateY(-.15rem); } .store-badge img { display: block; width: auto; height: 3rem; border-radius: .4rem; } .store-badges--footer .store-badge img { height: 3.1rem; } .site-footer__legal { width: min(calc(100% - clamp(2rem, 6vw, 6rem)), 90rem); border-block-start-color: #E8E8E8; color: #333; font-size: .9rem; } :root[data-theme="dark"] .site-header, :root[data-theme="dark"] .site-footer { border-color: color-mix(in srgb, #E8E8E8 24%, #333); background: color-mix(in srgb, #333 94%, transparent); color: #FFF; } :root[data-theme="dark"] .site-header :is(.brand, .primary-nav a, .appearance-toggle, .nav-toggle, .brand-logo__copy, .brand-logo__copy small), :root[data-theme="dark"] .site-footer :is(.footer-brand, p, h2, a, small, .footer-kicker) { color: #FFF; } :root[data-theme="dark"] .site-header :is(.appearance-toggle, .nav-toggle), :root[data-theme="dark"] .footer-socials a { border-color: color-mix(in srgb, #E8E8E8 25%, #333); background: #333; } :root[data-theme="dark"] .site-header :is(a, button):focus-visible, :root[data-theme="dark"] .site-footer a:focus-visible { box-shadow: 0 0 0 .2rem #333; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .site-header, :root:not([data-theme]) .site-footer { border-color: color-mix(in srgb, #E8E8E8 24%, #333); background: color-mix(in srgb, #333 94%, transparent); color: #FFF; } :root:not([data-theme]) .site-header :is(.brand, .primary-nav a, .appearance-toggle, .nav-toggle, .brand-logo__copy, .brand-logo__copy small), :root:not([data-theme]) .site-footer :is(.footer-brand, p, h2, a, small, .footer-kicker) { color: #FFF; } :root:not([data-theme]) .site-header :is(.appearance-toggle, .nav-toggle), :root:not([data-theme]) .footer-socials a { border-color: color-mix(in srgb, #E8E8E8 25%, #333); background: #333; } } @media (width <= 72rem) { .site-header__inner { gap: .75rem; } .brand-logo__image { width: auto; height: 3.9rem; max-width: 12.5rem; } .brand-logo__mark-fallback { width: 3.9rem; height: 3.9rem; } .brand-logo__copy small { display: none; } .primary-nav a { padding-inline: .5rem; font-size: .96rem; } } @media (width <= 68rem) { :root { --site-header-height: 5.15rem; } .site-header__inner { min-height: var(--site-header-height); } .site-header[data-menu-enhanced="true"] .primary-nav { inset-block-start: var(--site-header-height); padding: 1rem clamp(1rem, 5vw, 2.5rem) 2rem; border-block-end: 1px solid #E8E8E8; background: #FFF; box-shadow: 0 1.4rem 2.8rem color-mix(in srgb, #333 14%, transparent); } .site-header[data-menu-enhanced="true"] .primary-nav ul { gap: .35rem; } .site-header[data-menu-enhanced="true"] .primary-nav a { min-height: 3.35rem; padding: .75rem 1rem; color: #333; font-size: 1rem; } :root[data-theme="dark"] .site-header[data-menu-enhanced="true"] .primary-nav { border-color: color-mix(in srgb, #E8E8E8 24%, #333); background: #333; } :root[data-theme="dark"] .site-header[data-menu-enhanced="true"] .primary-nav a { color: #FFF; } .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-identity, .footer-app { grid-column: auto; } } @media (prefers-color-scheme: dark) and (width <= 68rem) { :root:not([data-theme]) .site-header[data-menu-enhanced="true"] .primary-nav { border-color: color-mix(in srgb, #E8E8E8 24%, #333); background: #333; } :root:not([data-theme]) .site-header[data-menu-enhanced="true"] .primary-nav a { color: #FFF; } } @media (width <= 48rem) { .site-header__inner { width: min(calc(100% - 1.5rem), 90rem); } .brand-logo__image { width: auto; height: 3.25rem; max-width: min(10.5rem, 43vw); } .brand-logo__mark-fallback { width: 3.25rem; height: 3.25rem; } .brand-logo__copy strong { font-size: 1.3rem; } .appearance-toggle__label, .nav-toggle > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .appearance-toggle, .nav-toggle { width: 3rem; padding: .5rem; } .site-footer__inner { grid-template-columns: 1fr; gap: 2.1rem; padding-block: 2.8rem; } .footer-identity, .footer-app { grid-column: 1; } .site-footer__legal { gap: .55rem; padding-block: 1rem 1.25rem; align-items: flex-start; flex-direction: column; } .brand-logo--footer .brand-logo__image, .brand-logo--footer .brand-logo__mark-fallback { height: 4.35rem; } .footer-brand { margin-block-end: .85rem; } .footer-socials ul, .store-badges { margin-block-start: 1rem; } } @media (width <= 22rem) { .brand-logo__copy { display: none; } .site-header__actions { gap: .25rem; } }