64898b2c79
Some checks failed
Code scanning / CodeQL (push) Failing after 15s
Zulip production suite / Ubuntu 22.04 production build (push) Failing after 26s
Zulip production suite / Debian 12 production install with custom db name and user (push) Has been skipped
Zulip production suite / Ubuntu 22.04 production install and PostgreSQL upgrade with pgroonga (push) Has been skipped
Zulip production suite / Ubuntu 24.04 production install (push) Has been skipped
Zulip production suite / Ubuntu 26.04 production install (push) Has been skipped
Zulip production suite / Debian 13 production install (push) Has been skipped
Zulip production suite / 7.0 Version Upgrade (push) Has been skipped
Zulip production suite / 8.0 Version Upgrade (push) Has been skipped
Zulip production suite / 6.0 Version Upgrade (push) Has been skipped
Zulip production suite / 10.0 Version Upgrade (push) Has been skipped
Zulip production suite / 9.0 Version Upgrade (push) Has been skipped
Zulip production suite / 12.0 Version Upgrade (push) Has been skipped
Zulip production suite / 11.0 Version Upgrade (push) Has been skipped
GitHub Actions Security Analysis with zizmor / zizmor (push) Failing after 3s
Zulip CI / Debian 12 (Python 3.11, backend + documentation) (push) Failing after 26s
Zulip CI / Ubuntu 22.04 (Python 3.10, backend + frontend) (push) Failing after 3s
Zulip CI / Ubuntu 24.04 (Python 3.12, backend) (push) Failing after 25s
Zulip CI / Ubuntu 26.04 (Python 3.14, backend) (push) Failing after 25s
Zulip CI / Debian 13 (Python 3.13, backend) (push) Failing after 28s
Zulip production suite / Required jobs (push) Has been cancelled
Zulip CI / Required jobs (push) Has been cancelled
API Documentation Update Check / check-feature-level-updated (push) Has been cancelled
API Documentation Update Check / notify-if-api-docs-changed (push) Has been cancelled
764 lines
21 KiB
CSS
764 lines
21 KiB
CSS
:root {
|
|
/* Actual navbar height is determined by label padding
|
|
(16px top/bottom) and line-height (28px): 16 + 28 + 16 = 60px.
|
|
Keep this variable in sync with those values. */
|
|
--navbar-height: 60px;
|
|
--announcement-banner-background: hsl(216deg 90% 82%);
|
|
--announcement-banner-foreground: hsl(240deg 100% 5.9%);
|
|
--announcement-banner-border: hsl(240deg 100% 5.9% / 12%);
|
|
--announcement-banner-link-underline: hsl(240deg 100% 5.9% / 80%);
|
|
}
|
|
|
|
/* Suppress rubber-band overscroll on marketing pages: the banner is
|
|
sticky and in-flow while .top-menu is fixed, so during overscroll
|
|
above scroll: 0 the banner briefly drifts down with the document
|
|
while the navbar stays pinned, exposing a gap and visually
|
|
overlapping the navbar's top edge. */
|
|
html {
|
|
overscroll-behavior-y: none;
|
|
}
|
|
|
|
/* Announcement banner above the marketing nav, shown when
|
|
LANDING_PAGE_NAVBAR_MESSAGE is configured. Lives in navbar.css
|
|
(loaded by every marketing-page bundle, including landing-page-hello)
|
|
so /hello renders it identically to /plans, /why-zulip, etc.
|
|
|
|
position: sticky keeps the banner in flow — so .top-menu's
|
|
`position: fixed; top: auto` still resolves to "just below this
|
|
banner" — while pinning the banner to the viewport top on scroll.
|
|
z-index 11 sits above .top-menu (z-index 10) so the two sit
|
|
flush during scroll without flicker. */
|
|
#navbar-custom-message {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 11;
|
|
padding: 10px;
|
|
text-align: center;
|
|
font-size: 1.125rem; /* 18px at 16px/1rem */
|
|
font-weight: 450;
|
|
letter-spacing: 0.01em;
|
|
background: var(--announcement-banner-background);
|
|
color: var(--announcement-banner-foreground);
|
|
border-bottom: 1px solid var(--announcement-banner-border);
|
|
|
|
& a {
|
|
color: var(--announcement-banner-foreground);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--announcement-banner-link-underline);
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 2px;
|
|
transition: text-decoration-color 0.2s;
|
|
}
|
|
|
|
& a:hover {
|
|
text-decoration-color: var(--announcement-banner-foreground);
|
|
}
|
|
}
|
|
|
|
details summary::-webkit-details-marker {
|
|
/* Hide the default arrow on Safari. */
|
|
display: none;
|
|
}
|
|
|
|
.top-menu :focus-visible {
|
|
/* Show white outline by default */
|
|
/* This overrides outline-style: auto which
|
|
renders a double outline of white and dark blue */
|
|
outline: 1px solid hsl(0deg 0% 100%);
|
|
|
|
&.top-menu-item,
|
|
&.nav-menu-label {
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
.nav-zulip-logo {
|
|
background-image: url("data:image/svg+xml,%3Csvg width='108' height='28' viewBox='0 0 108 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_555_12341234)'%3E%3Cpath d='M25.0534 4.18667C25.0534 5.59714 24.4217 6.85034 23.4589 7.6106L14.1128 15.9802C13.9392 16.1294 13.7136 15.8888 13.8388 15.688L17.267 8.80536C17.3631 8.61266 17.2385 8.37582 17.0414 8.37582H3.7444C1.68498 8.37582 0 6.49104 0 4.18791C0 1.88416 1.68498 6.14715e-07 3.7444 6.14715e-07H21.309C23.3684 -0.00124264 25.0534 1.88353 25.0534 4.18667ZM3.7444 28H21.309C23.3684 28 25.0534 26.1152 25.0534 23.8121C25.0534 21.5083 23.3684 19.6242 21.309 19.6242H8.01203C7.81489 19.6242 7.69029 19.3873 7.78638 19.1946L11.2146 12.312C11.3398 12.1112 11.1142 11.8706 10.9406 12.0198L1.59447 20.3882C0.631713 21.1478 0 22.4016 0 23.8121C0 26.1152 1.68498 28 3.7444 28ZM36.136 20.2825L43.8715 9.11804V9.02107H36.8588V5.97633H48.6431V8.10292L41.0762 19.1225V19.2195H48.764V22.2642H36.136V20.2825V20.2825ZM57.1505 5.97633V15.353C57.1505 18.1559 58.2106 19.5819 60.0909 19.5819C62.0189 19.5819 63.0789 18.2286 63.0789 15.353V5.97633H66.7421V15.1105C66.7421 20.137 64.2116 22.5291 59.97 22.5291C55.8728 22.5291 53.4631 20.2576 53.4631 15.0621V5.97633H57.1505V5.97633ZM72.3333 5.97633H76.0207V19.1704H82.4792V22.2636H72.3333V5.97633ZM90.7454 5.97633V22.2636H87.058V5.97633H90.7454ZM96.3359 6.1939C97.4686 6.00058 99.0593 5.85574 101.3 5.85574C103.566 5.85574 105.181 6.29088 106.265 7.16054C107.301 7.98233 108 9.33561 108 10.9301C108 12.5252 107.47 13.8785 106.506 14.7966C105.253 15.9808 103.397 16.5123 101.228 16.5123C100.747 16.5123 100.313 16.4881 99.9756 16.4396V22.2636H96.3366V6.1939H96.3359ZM99.975 13.5888C100.288 13.6615 100.674 13.6851 101.204 13.6851C103.156 13.6851 104.361 12.6943 104.361 11.0271C104.361 9.52894 103.324 8.63442 101.493 8.63442C100.746 8.63442 100.24 8.70715 99.975 8.77926V13.5888V13.5888Z' fill='white'%3E%3C/path%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_555_12341234'%3E%3Crect width='108' height='28' fill='white'%3E%3C/rect%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
width: 108px;
|
|
}
|
|
|
|
.top-menu {
|
|
position: fixed;
|
|
width: 100%;
|
|
background: hsl(240deg 100% 10% / 60%);
|
|
backdrop-filter: blur(10px);
|
|
color: hsl(0deg 0% 100%);
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
transition: background-color 0.3s ease-out;
|
|
|
|
&:hover {
|
|
background: hsl(240deg 100% 10% / 85%);
|
|
}
|
|
}
|
|
|
|
.top-menu-container {
|
|
/* 1280px + 32px for paddings on the edges */
|
|
max-width: 1312px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-menu-logo {
|
|
overflow: hidden;
|
|
opacity: 0.85;
|
|
/* 14*2 = 28px = height of logo svg */
|
|
padding: 14px;
|
|
margin: 0 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.top-menu-items-group-1,
|
|
.top-menu-items-group-2 {
|
|
display: flex;
|
|
}
|
|
|
|
.top-menu-items-group-1 {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.top-menu-mobile a {
|
|
&,
|
|
&:hover,
|
|
&:focus,
|
|
&:visited {
|
|
color: hsl(0deg 0% 100% / 80%);
|
|
}
|
|
}
|
|
|
|
.top-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-shrink: 0;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
padding: 14px;
|
|
user-select: none;
|
|
cursor: pointer;
|
|
transition-property: background, color;
|
|
transition-duration: 0.05s;
|
|
transition-timing-function: ease-out;
|
|
|
|
&,
|
|
&:visited {
|
|
color: hsl(0deg 0% 100% / 80%);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.top-menu-item:hover {
|
|
color: hsl(0deg 0% 100%);
|
|
background: hsl(240deg 100% 10% / 10%);
|
|
transition-duration: 0.05s;
|
|
}
|
|
|
|
.top-menu-item:active {
|
|
color: hsl(0deg 0% 100%);
|
|
background: hsl(240deg 100% 10% / 20%);
|
|
}
|
|
|
|
.top-menu-item.top-menu-tab,
|
|
.top-menu-item.top-menu-tab:hover,
|
|
.top-menu-item.top-menu-tab:active {
|
|
opacity: 1;
|
|
background: none;
|
|
}
|
|
|
|
.top-menu-item-spacer {
|
|
flex-shrink: 1;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.top-menu-item input[type="radio"],
|
|
.top-menu-tab-input-unselect {
|
|
display: none;
|
|
}
|
|
|
|
.top-menu-item.top-menu-tab {
|
|
padding: 0;
|
|
position: relative;
|
|
cursor: auto;
|
|
}
|
|
|
|
.top-menu-tab-unselect {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.top-menu-tab-input:checked + label {
|
|
transition:
|
|
background,
|
|
color 0.2s;
|
|
background: hsl(240deg 100% 10% / 60%);
|
|
color: hsl(0deg 0% 100%);
|
|
pointer-events: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.top-menu-tab label {
|
|
padding: 16px;
|
|
cursor: pointer;
|
|
transition-property: background, color;
|
|
transition-duration: 0.1s;
|
|
transition-timing-function: ease-out;
|
|
z-index: 5;
|
|
color: hsl(0deg 0% 100% / 80%);
|
|
|
|
/* Override bootstrap */
|
|
margin-bottom: 0;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
}
|
|
|
|
.top-menu-tab label::after {
|
|
pointer-events: none;
|
|
content: " ";
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
width: 16px;
|
|
height: 16px;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255%2c255%2c255%2c0.8)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
background-size: 16px;
|
|
margin-left: 2px;
|
|
margin-right: -8px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.top-menu-tab .top-menu-tab-input:checked + label::after {
|
|
transform: rotate(-180deg);
|
|
}
|
|
|
|
.top-menu-tab .top-menu-tab-input:not(:checked) + label:hover {
|
|
background: hsl(240deg 100% 10% / 10%);
|
|
color: hsl(0deg 0% 100%);
|
|
transition-duration: 0.1s;
|
|
}
|
|
|
|
.top-menu-tab .top-menu-tab-input:not(:checked) + label:active {
|
|
background: hsl(240deg 100% 10% / 20%);
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.top-menu-tab label.top-menu-tab-user-label::after {
|
|
display: block;
|
|
position: absolute;
|
|
right: 16px;
|
|
top: 50%;
|
|
transform: translateY(-45%);
|
|
}
|
|
|
|
.top-menu-tab
|
|
.top-menu-tab-input:checked
|
|
+ label.top-menu-tab-user-label::after {
|
|
transform: translateY(-45%) rotate(-180deg);
|
|
}
|
|
|
|
.top-menu-submenu-backdrop {
|
|
background: hsl(240deg 100% 10% / 60%);
|
|
opacity: 0;
|
|
height: 0;
|
|
width: 100%;
|
|
transition: 0.05s;
|
|
transition-property:
|
|
height, opacity; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
|
|
}
|
|
|
|
.top-menu-tab-input-unselect:not(:checked) + .top-menu-submenu-backdrop {
|
|
height: 334px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.top-menu-tab-label-unselect {
|
|
position: absolute;
|
|
display: none;
|
|
/* To account for scrollbar if any present. */
|
|
right: 15px;
|
|
top: var(--navbar-height);
|
|
width: 44px;
|
|
height: 44px;
|
|
background-size: 32px;
|
|
background-repeat: no-repeat;
|
|
/* Close menu icon */
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,1)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
|
|
background-position: center;
|
|
cursor: pointer;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.top-menu-tab-label-unselect:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.top-menu-tab-label-unselect:active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.top-menu-tab-input-unselect:not(:checked) ~ .top-menu-tab-label-unselect {
|
|
display: block;
|
|
}
|
|
|
|
.top-menu-submenu {
|
|
position: absolute;
|
|
top: var(--navbar-height);
|
|
display: flex;
|
|
gap: 16px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: 0.2s;
|
|
transition-property: opacity, visibility;
|
|
}
|
|
|
|
#case-studies-submenu {
|
|
width: 100vw;
|
|
position: fixed;
|
|
left: 0;
|
|
justify-content: center;
|
|
|
|
@media (width <= 1300px) {
|
|
flex-wrap: wrap;
|
|
place-content: baseline flex-start;
|
|
height: calc(100vh - var(--navbar-height));
|
|
overflow-y: auto;
|
|
width: 100vw;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
& > .top-menu-submenu-column:last-child {
|
|
/* Bottom padding provides space for the scroll fade
|
|
indicator so no content is obscured at end of scroll. */
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
/* Fade bottom edge to hint at scrollable content. */
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
hsl(0deg 0% 0%) calc(100% - 50px),
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
/* Prevent background scrolling when the case studies dropdown
|
|
covers the full viewport height on narrower desktop screens.
|
|
Lower bound excludes widths where the desktop navbar is hidden. */
|
|
@media (width > 1100px) and (width <= 1300px) {
|
|
body:has(#top-menu-tab-case-studies:checked) {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
.top-menu-tab .top-menu-tab-user-label {
|
|
max-width: 140px;
|
|
padding-right: 28px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.top-menu-tab-user-img {
|
|
width: 24px;
|
|
height: 24px;
|
|
display: inline;
|
|
vertical-align: middle;
|
|
border-radius: 3px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.top-menu-mobile-user-img {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline;
|
|
vertical-align: text-top;
|
|
border-radius: 3px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
@media (width <= 1400px) {
|
|
.top-menu-submenu.signup-column {
|
|
justify-content: flex-end;
|
|
right: 55px;
|
|
}
|
|
}
|
|
|
|
@media (width <= 1024px) {
|
|
.top-menu-tab .top-menu-tab-user-label {
|
|
max-width: 40px;
|
|
}
|
|
|
|
.top-menu-tab .top-menu-tab-user-label .top-menu-tab-user-name {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.top-menu-tab-input:checked ~ .top-menu-submenu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.top-menu-submenu-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-top: 16px;
|
|
flex-shrink: 0;
|
|
max-width: 420px;
|
|
|
|
.top-menu-submenu-list {
|
|
margin: 0;
|
|
padding-left: 0;
|
|
list-style: none;
|
|
|
|
.top-menu-submenu-list-item {
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
color: hsl(0deg 0% 100% / 90%);
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: hsl(0deg 0% 100% / 10%);
|
|
}
|
|
|
|
&:active {
|
|
background: hsl(0deg 0% 100% / 20%);
|
|
}
|
|
|
|
& a {
|
|
display: block;
|
|
padding: 6px 16px;
|
|
text-decoration: none;
|
|
line-height: 125%;
|
|
color: hsl(0deg 0% 100% / 90%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-menu-mobile .top-menu-mobile-item a {
|
|
padding: 10px 10px 10px 53px;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
display: block;
|
|
|
|
&:hover {
|
|
background: hsl(0deg 0% 100% / 10%);
|
|
}
|
|
|
|
&:active {
|
|
background: hsl(0deg 0% 100% / 20%);
|
|
}
|
|
}
|
|
|
|
.top-menu-submenu-section {
|
|
padding-left: 16px;
|
|
font-size: 17px;
|
|
opacity: 0.6;
|
|
margin-bottom: 4px;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.top-menu-mobile {
|
|
display: none;
|
|
background: hsl(240deg 100% 10% / 40%);
|
|
backdrop-filter: blur(10px);
|
|
z-index: 20;
|
|
|
|
/* No `top` — defaults to auto, which resolves to the static
|
|
position (just below the sticky banner when one is present,
|
|
or at the viewport top otherwise). Same trick as .top-menu
|
|
above. The [open] state below pins to top: 0 so the expanded
|
|
panel covers the full viewport. */
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--navbar-height);
|
|
|
|
overflow: auto;
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
letter-spacing: 0.02em;
|
|
font-feature-settings:
|
|
"pnum" on,
|
|
"lnum" on;
|
|
color: hsl(0deg 0% 100% / 80%);
|
|
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.top-menu-mobile[open] {
|
|
top: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
background: hsl(240deg 100% 5.9% / 80%);
|
|
backdrop-filter: blur(20px);
|
|
}
|
|
|
|
/* When a banner is present, keep it visible above the open menu by
|
|
pushing the panel down by the banner's actual rendered height.
|
|
--announcement-banner-height is set by header.ts only while the menu is open
|
|
(via a ResizeObserver scoped to that interval), so the offset
|
|
stays accurate when the announcement wraps onto multiple lines on
|
|
narrow viewports without paying for an observer the rest of the
|
|
time. The 42px fallback covers the first frame before JS runs. */
|
|
:has(#navbar-custom-message) .top-menu-mobile[open] {
|
|
top: var(--announcement-banner-height, 42px);
|
|
height: calc(100% - var(--announcement-banner-height, 42px));
|
|
}
|
|
|
|
.top-menu-mobile-items-group-1,
|
|
.top-menu-mobile-items-group-2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.top-menu-mobile-items-group-1 summary,
|
|
.top-menu-mobile-items-group-1 a,
|
|
.top-menu-mobile-items-group-2 summary,
|
|
.top-menu-mobile-items-group-2 a {
|
|
cursor: pointer;
|
|
transition: background 0.4s ease-out;
|
|
}
|
|
|
|
.top-menu-mobile-items-group-1 summary,
|
|
.top-menu-mobile-items-group-2 summary {
|
|
padding: 10px 10px 10px 23px;
|
|
user-select: none;
|
|
}
|
|
|
|
.top-menu-mobile-items-group-1 a,
|
|
.top-menu-mobile-items-group-2 a {
|
|
padding-left: 53px;
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.top-menu-mobile-items-group-1 summary:hover,
|
|
.top-menu-mobile-items-group-2 summary:hover {
|
|
background: hsl(0deg 0% 100% / 10%);
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.top-menu-mobile-items-group-1 summary:active,
|
|
.top-menu-mobile-items-group-2 summary:active {
|
|
background: hsl(0deg 0% 100% / 10%);
|
|
}
|
|
|
|
/* We display: block here instead of the default
|
|
display: list-item largely for the sake of Safari,
|
|
which as of early 2026 still ignores the ::marker
|
|
line below. Because we're overriding the default
|
|
markers on all browsers, this display mode doesn't
|
|
impact other browsers, either. */
|
|
.top-menu-mobile-item-summary {
|
|
display: block;
|
|
}
|
|
|
|
.top-menu-mobile-item-summary::marker {
|
|
content: "";
|
|
}
|
|
|
|
.top-menu-mobile-item-summary::before {
|
|
content: "";
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-top: -4px;
|
|
margin-right: 4px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255%2c255%2c255%2c0.7)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
|
|
transition: transform 0.12s ease-out;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.top-menu-mobile details[open] > summary::before {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
.top-menu-mobile-submenu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 18px;
|
|
margin-bottom: 18px;
|
|
|
|
.top-menu-submenu-list {
|
|
margin: 0;
|
|
list-style: none;
|
|
|
|
.top-menu-submenu-list-item {
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
line-height: 26px;
|
|
color: hsl(0deg 0% 100% / 90%);
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background: hsl(0deg 0% 100% / 10%);
|
|
}
|
|
|
|
&:active {
|
|
background: hsl(0deg 0% 100% / 20%);
|
|
}
|
|
|
|
& a {
|
|
text-decoration: none;
|
|
padding: 5px 0 5px 53px;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-menu-mobile-submenu-section {
|
|
letter-spacing: 0.1em;
|
|
color: hsl(0deg 0% 100% / 40%);
|
|
text-transform: uppercase;
|
|
margin-top: 8px;
|
|
font-size: 17px;
|
|
padding-left: 53px;
|
|
user-select: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.top-menu-mobile-summary {
|
|
cursor: pointer;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
transition: 0.3s;
|
|
transition-property: background, backdrop-filter;
|
|
height: var(--navbar-height);
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.top-menu-mobile-summary:active {
|
|
background: hsl(229deg 47% 17% / 80%);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.top-menu-mobile[open] > .top-menu-mobile-summary {
|
|
background: hsl(229deg 47% 17% / 80%);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* For browsers which don't support blur */
|
|
@supports not (
|
|
(backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))
|
|
) {
|
|
.top-menu {
|
|
background: hsl(240deg 100% 10% / 80%);
|
|
}
|
|
|
|
.top-menu-mobile {
|
|
background: hsl(240deg 100% 10% / 80%);
|
|
}
|
|
|
|
.top-menu-mobile[open] {
|
|
background: hsl(240deg 100% 5.9% / 100%);
|
|
}
|
|
|
|
.top-menu-mobile-summary:active {
|
|
background: hsl(229deg 47% 17% / 95%);
|
|
}
|
|
|
|
.top-menu-mobile[open] > .top-menu-mobile-summary {
|
|
background: hsl(229deg 47% 17% / 95%);
|
|
}
|
|
}
|
|
|
|
.top-menu-mobile[open] > .top-menu-mobile-summary:active {
|
|
background: hsl(229deg 47% 20% / 100%);
|
|
}
|
|
|
|
.top-menu-mobile-summary::marker {
|
|
content: "";
|
|
display: none;
|
|
}
|
|
|
|
.top-menu-mobile-summary::after {
|
|
display: block;
|
|
height: 32px;
|
|
float: right;
|
|
content: "MENU";
|
|
line-height: 32px;
|
|
color: hsl(0deg 0% 100% / 80%);
|
|
padding-right: 38px;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
letter-spacing: 2px;
|
|
margin-right: 16px;
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='3' y1='12' x2='21' y2='12'%3e%3c/line%3e%3cline x1='3' y1='6' x2='21' y2='6'%3e%3c/line%3e%3cline x1='3' y1='18' x2='21' y2='18'%3e%3c/line%3e%3c/svg%3e");
|
|
background-repeat: no-repeat;
|
|
background-size: 32px;
|
|
background-position: right;
|
|
transition:
|
|
background,
|
|
letter-spacing 0.2s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
|
|
}
|
|
|
|
.top-menu-mobile-summary:active::after {
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.top-menu-mobile[open] > summary::after {
|
|
content: "Close";
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.9)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.top-menu-mobile-summary:hover {
|
|
background: hsl(229deg 47% 18% / 100%);
|
|
}
|
|
|
|
.top-menu-mobile[open] > .top-menu-mobile-summary:hover {
|
|
background: hsl(229deg 47% 18% / 100%);
|
|
}
|
|
|
|
.top-menu-mobile-summary:hover::after {
|
|
letter-spacing: 4px;
|
|
}
|
|
}
|
|
|
|
/* menu responsivity */
|
|
@media (width <= 1311px) {
|
|
.top-menu {
|
|
background: hsl(240deg 100% 10% / 50%);
|
|
}
|
|
|
|
.top-menu-logo {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.top-menu-item {
|
|
padding: 16px 12px;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
|
|
@media (width <= 1100px) {
|
|
.top-menu {
|
|
display: none;
|
|
}
|
|
|
|
.top-menu-logo {
|
|
margin-right: unset;
|
|
display: inline-block;
|
|
}
|
|
|
|
.top-menu-mobile {
|
|
display: block;
|
|
}
|
|
}
|