diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css index 3c2d72f..89af60c 100644 --- a/components/Navbar/Navbar.module.css +++ b/components/Navbar/Navbar.module.css @@ -53,26 +53,34 @@ background-color: inherit; position: fixed; inset: var(--nav-h) 0 0 0; - overflow-x: hidden; - overflow-y: auto; - max-height: 0; - overflow: hidden; + display: flex; + flex-direction: column; + opacity: 0; + visibility: hidden; pointer-events: none; - transition: max-height 400ms ease; - /* Scrollbar ausblenden (Firefox/IE/Edge legacy) */ + overflow-y: auto; + transform: translateY(-12px); + transition: + opacity 220ms ease, + transform 220ms ease, + visibility 0s linear 220ms; scrollbar-width: none; -ms-overflow-style: none; } -/* Chrome/Safari/Opera */ .nav-links::-webkit-scrollbar { display: none; } .nav-links.open { - max-height: 100vh; + opacity: 1; + visibility: visible; pointer-events: auto; - overflow-y: auto; + transform: translateY(0); + transition: + opacity 220ms ease, + transform 220ms ease, + visibility 0s linear 0s; } .nav-links li { @@ -168,8 +176,7 @@ } .nav { - padding: var(--nav-padding-tb) var(--nav-padding-lr) var(--nav-padding-tb) - var(--nav-padding-lr); + padding: var(--nav-padding-tb) var(--nav-padding-lr); } .nav-logo-image { @@ -180,24 +187,30 @@ .nav-links { position: static; inset: auto; - overflow: visible; display: flex; - align-items: center; flex-direction: row; - pointer-events: auto; - transform: none; - transition: none; + align-items: center; + gap: 0; + + overflow: visible; max-height: none; + + opacity: 1; + visibility: visible; + pointer-events: auto; + + transform: none; + clip-path: none; + + background-color: transparent; + transition: none; } .nav-links > li a { padding: 16px 12px; } - .nav-links > li:first-child { - padding: 0; - } - + .nav-links > li:first-child, .nav-links > li:last-child { padding: 0; } diff --git a/components/Navbar/NavbarSubMenu.module.css b/components/Navbar/NavbarSubMenu.module.css index bb1bfdb..4e7770b 100644 --- a/components/Navbar/NavbarSubMenu.module.css +++ b/components/Navbar/NavbarSubMenu.module.css @@ -10,20 +10,28 @@ max-height: 0; opacity: 1; overflow: hidden; + visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: max-height 250ms ease, opacity 180ms ease, - transform 180ms ease; + transform 180ms ease, + visibility 0s linear 300ms; background-color: var(--nav-bg); } .nav-submenu.open { max-height: var(--submenu-h); opacity: 1; + visibility: visible; pointer-events: auto; transform: translateY(0); + transition: + max-height 250ms ease, + opacity 180ms ease, + transform 180ms ease, + visibility 0s linear 0s; } .nav-submenu-inner { @@ -95,11 +103,8 @@ box-shadow: 0 4px 6px -6px rgb(0 0 0 / 30%); opacity: 0; transform: translateY(-8px); - transition: - max-height 300ms, - opacity 300ms, - transform 300ms ease; } + .nav-submenu-list li a:focus-visible { outline: 2px solid var(--nav-outline-color); outline-offset: 2px; diff --git a/styles/buttons.css b/styles/buttons.css index 539836f..736db1f 100644 --- a/styles/buttons.css +++ b/styles/buttons.css @@ -1,13 +1,13 @@ :root { /* Colors */ - --btn-bg-primary: #474747; - --btn-bg-primary-hover: #3b3b3b; + --btn-bg-primary: #267361; + --btn-bg-primary-hover: #267361; --btn-bg-primary-active: #353030; --btn-text-light: #fefcfb; - --btn-text-dark: #474747; + --btn-text-dark: #267361; - --btn-border-primary: #474747; + --btn-border-primary: #267361; --btn-border-ghost: #e9e9e9; --btn-border-ghost-hover: #ececec; --btn-border-ghost-active: #e1e1e1; @@ -29,16 +29,16 @@ --btn-px: 16px; --btn-py-lg: 16px; --btn-px-lg: 24px; - --btn-radius: 4px; + --btn-radius: 50px; --btn-gap: 8px; --btn-max-height: 52px; --btn-icon-size: 18px; --btn-tertiary-px: 4px; /* Typography */ - --btn-font-family: inherit; + --btn-font-family: var(--font-body); --btn-font-size: 0.889rem; - --btn-font-weight: 600; + --btn-font-weight: var(--font-weight-bold); --btn-line-height: 1; /* Shadow */ @@ -240,5 +240,6 @@ @media (min-width: 768px) { .btn { padding: var(--btn-py-lg) var(--btn-px-lg); + font-size: 1rem; } } diff --git a/styles/tokens.css b/styles/tokens.css index fc21551..c8aa1f7 100644 --- a/styles/tokens.css +++ b/styles/tokens.css @@ -11,7 +11,36 @@ --space-4: 16px; --space-5: 20px; --space-6: 24px; - --space-7: 32px; + --space-7: 28px; + --space-8: 32px; + --space-9: 36px; + --space-10: 40px; + --space-11: 44px; + --space-12: 48px; + --space-13: 52px; + --space-14: 56px; + --space-15: 60px; + --space-16: 64px; + --space-17: 68px; + --space-18: 72px; + --space-19: 76px; + --space-20: 80px; + --space-21: 84px; + --space-22: 88px; + --space-23: 92px; + --space-24: 96px; + --space-25: 100px; + --space-26: 104px; + --space-27: 108px; + --space-28: 112px; + --space-29: 116px; + --space-30: 120px; + --space-31: 124px; + --space-32: 128px; + --space-33: 132px; + --space-34: 136px; + --space-35: 140px; + --space-36: 144px; /* Colors */ --color-surface: #ffffff; diff --git a/styles/typography.css b/styles/typography.css index 0f7b4af..2d6f114 100644 --- a/styles/typography.css +++ b/styles/typography.css @@ -29,26 +29,6 @@ --font-heading-color: #302e2e; } -/* @media (min-width: 768px) { - :root { - --font-size-h1: 2.566rem; - --font-size-h2: 2.281rem; - --font-size-h3: 2.027rem; - --font-size-h4: 1.802rem; - --font-size-h5: 1.602rem; - } -} -*/ -/* @media (min-width: 1024px) { - :root { - --font-size-h1: 3.247rem; - --font-size-h2: 2.566rem; - --font-size-h3: 2.027rem; - --font-size-h4: 1.802rem; - --font-size-h5: 1.602rem; - } -} */ - a { color: inherit; text-decoration: none; @@ -69,7 +49,7 @@ small, .lead, .text-lead { font-size: var(--font-size-lead); - line-height: 1.6; + line-height: 1.4; } h1,