diff --git a/css/style.css b/css/style.css index 9526815..5a4d4eb 100644 --- a/css/style.css +++ b/css/style.css @@ -189,10 +189,7 @@ --shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box); --shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box); - --border: #d8d8d8; - --header-offset: 6.5rem; - --overlay: light-dark(rgb(247 247 247 / 0.8), rgb(18 18 18 / 0.8)); - --panel: rgb(255 255 255 / 0.76); + --overlay: light-dark(rgb(247 247 247 / 0.4), rgb(18 18 18 / 0.4)); } *, @@ -618,8 +615,8 @@ button:active, .button-primary:active, .logo:active { position: fixed; inset: 0; background: var(--overlay); - backdrop-filter: blur(6px); - -webkit-backdrop-filter: blur(6px); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; @@ -629,19 +626,16 @@ button:active, .button-primary:active, .logo:active { .mobile-menu { position: fixed; top: 7rem; - right: 1rem; - left: 1rem; + right: var(--spacing-5); + left: var(--spacing-5); width: auto; max-width: none; max-height: calc(100dvh - 7.5rem); overflow-y: auto; margin-inline: 0; - background: var(--panel); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border: 1px solid rgb(255 255 255 / 0.45); - border-radius: 1rem; - box-shadow: 0 20px 50px rgb(0 0 0 / 0.16); + background: var(--color-button-secondary); + border-radius: var(--radius-xxl); + box-shadow: var(--shadow-button); padding: 1rem; opacity: 0; transform: translateY(1rem) scale(0.98); @@ -653,6 +647,9 @@ button:active, .button-primary:active, .logo:active { .mobile-menu ul { display: grid; gap: 0.5rem; + margin: 0; + padding: 0; + list-style: none; } .mobile-menu a { @@ -1007,6 +1004,10 @@ footer a:visited { .menu-bar { gap: var(--spacing-3); } + .mobile-menu { + right: var(--spacing-4); + left: var(--spacing-4); + } } @media print,