diff --git a/css/style.css b/css/style.css index 5383732..7b238bd 100644 --- a/css/style.css +++ b/css/style.css @@ -129,6 +129,7 @@ --shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2); --shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2); + /* Semantic tokens: contextual usage */ --color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900)); @@ -149,6 +150,8 @@ --color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-100)); --color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400)); + --color-text-primary-inverted: light-dark(var(--color-neutral-100), var(--color-neutral-900)); + --color-text-secondary-inverted: light-dark(var(--color-neutral-400), var(--color-neutral-700)); --color-primary-button: var(--color-orange-red-500); --color-primary-button-hover: var(--color-orange-500); @@ -156,6 +159,7 @@ --color-menu-button: none; --color-menu-button-hover: light-dark(var(--color-neutral-400), var(--color-neutral-600)); + --color-menu-button-active: light-dark(var(--color-neutral-500), var(--color-neutral-700)); --color-text-button: var(--color-neutral-900); --color-text-button-hover: var(--color-neutral-100); @@ -384,18 +388,18 @@ button, .link-button, .logo, .desktop-nav a[aria-current="page"], .menu-button-secondary { background: var(--color-secondary); - color: var(--color-text-button); + color: var(--color-text-primary-inverted); box-shadow: var(--shadow-button); } -.logo { +.logo, .menu-button-secondary { padding: 1rem; aspect-ratio: 1/1; } .logo svg { - height: 1.75em; - width: 1.75em; + height: 2em; + width: 2em; flex: none; display: block; } @@ -407,17 +411,43 @@ button, .link-button, .logo, .desktop-nav a[aria-current="page"], button:hover, .link-button:hover, .logo:hover, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover { background: var(--color-primary-button-hover); color: var(--color-text-button); + text-decoration: none; } .menu-button:hover { background: var(--color-menu-button-hover); color: var(--color-menu-text-button-hover); + text-decoration: underline; + text-underline-offset: 0.175rem; + text-decoration-thickness: 0.075rem; + transition: 0.2s; +} + +.menu-button-secondary:hover { + background: var(--color-secondary-hover); + color: var(--color-text-primary-inverted); } button:active, .link-button:active, .logo:active, .desktop-nav a[aria-current="page"]:active, .mobile-menu a[aria-current="page"]:active { background: var(--color-primary-button-active); box-shadow: var(--shadow-button-active); color: var(--color-text-button-active); + text-decoration: none; +} + +.menu-button:active { + background: var(--color-menu-button-active); + color: var(--color-menu-text-button-hover); + text-decoration: underline; + text-underline-offset: 0.175rem; + text-decoration-thickness: 0.075rem; + transition: 0.2s; +} + +.menu-button-secondary:active { + background: var(--color-secondary-active); + color: var(--color-text-primary); + box-shadow: var(--shadow-button-active); } button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:visited, .mobile-menu a[aria-current="page"]:visited { @@ -425,6 +455,11 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current text-decoration: none; } +.menu-button-secondary:visited { + color: var(--color-text-primary); + text-decoration: none; +} + .link-button span { margin-right: 0.3em; } @@ -532,7 +567,7 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current .desktop-nav-secondary ul { display: flex; align-items: stretch; - gap: var(--spacing-4); + gap: var(--spacing-3); margin: 0; padding: 0; list-style: none; @@ -545,25 +580,13 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current } .desktop-nav-secondary svg { - color: var(--color-secondary); - height: 1.5em; - width: 1.5em; + color: currentcolor; + height: 1em; + width: 1em; flex: none; display: block; } -.desktop-nav-secondary svg:hover { - color: var(--color-secondary-hover); -} - -.desktop-nav-secondary svg:active { - color: var(--color-secondary-active); -} - -.desktop-nav-secondary svg path { - fill: currentColor; -} - .menu-toggle, .menu-close { width: 44px;