diff --git a/p/assets/styles/main.css b/p/assets/styles/main.css index f2e1eef..e1708af 100644 --- a/p/assets/styles/main.css +++ b/p/assets/styles/main.css @@ -167,16 +167,58 @@ main[data-page-content] { text-decoration: none; font-weight: 700; border: 1px solid transparent; + cursor: pointer; + transition: + transform 180ms ease, + background-color 180ms ease, + border-color 180ms ease, + color 180ms ease, + box-shadow 180ms ease, + opacity 180ms ease; + user-select: none; + -webkit-tap-highlight-color: transparent; } .button-primary { background: linear-gradient(145deg, var(--accent), var(--accent-strong)); color: #08101d; + box-shadow: 0 12px 28px rgba(2, 6, 23, 0.25); } .button-secondary { - background: rgba(255,255,255,0.03); + background: rgba(255,255,255,0.04); color: var(--text); + border-color: rgba(148, 163, 184, 0.18); +} + +.button:hover, +.button:focus-visible { + transform: translateY(-1px); + box-shadow: 0 14px 30px rgba(2, 6, 23, 0.28); +} + +.button-primary:hover, +.button-primary:focus-visible { + background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 86%, white), color-mix(in srgb, var(--accent-strong) 92%, white)); +} + +.button-secondary:hover, +.button-secondary:focus-visible { + background: rgba(125, 211, 252, 0.12); + border-color: rgba(125, 211, 252, 0.35); +} + +.button:focus-visible { + outline: 2px solid rgba(125, 211, 252, 0.85); + outline-offset: 2px; +} + +.button[aria-disabled="true"], +.button:disabled { + opacity: 0.55; + pointer-events: none; + transform: none; + box-shadow: none; }