diff --git a/src/index.css b/src/index.css index fab2399..d32a5c5 100644 --- a/src/index.css +++ b/src/index.css @@ -16,7 +16,7 @@ --background-accent: #8b6914; /* @layout/border-radius/rounded */ - --radius: 9999px; + --radius: 0.5rem; /* @layout/content-width/medium */ --width-content-width: clamp(40rem, 72.5vw, 100rem); @@ -158,18 +158,17 @@ h6 { .card { /* WEBILD_CARD_STYLE */ - /* @cards/inset */ - background: color-mix(in srgb, var(--color-card) 95%, var(--color-accent) 5%); - box-shadow: - inset 2px 2px 4px color-mix(in srgb, var(--color-foreground) 8%, transparent), - inset -2px -2px 4px color-mix(in srgb, var(--color-background) 20%, transparent); + /* @cards/elevated-border */ + background: linear-gradient(180deg, color-mix(in srgb, var(--color-card) 100%, var(--color-foreground) 3%) 0%, var(--color-card) 100%); + box-shadow: 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 8%, transparent), 0 4px 6px -1px color-mix(in srgb, var(--color-foreground) 5%, transparent), 0 10px 15px -3px color-mix(in srgb, var(--color-foreground) 4%, transparent); + border: 1px solid color-mix(in srgb, var(--color-foreground) 6%, transparent); } .primary-button { /* WEBILD_PRIMARY_BUTTON */ - /* @primaryButtons/metallic */ - background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-cta) 80%, var(--color-foreground)) 0%, var(--color-primary-cta) 25%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 50%, var(--color-primary-cta) 75%, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 100%); - box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 30%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--color-background) 50%, transparent); + /* @primaryButtons/neon-outline */ + background: var(--color-primary-cta); + box-shadow: 0 0 5px color-mix(in srgb, var(--color-accent) 50%, transparent), 0 0 15px color-mix(in srgb, var(--color-accent) 30%, transparent), 0 0 30px color-mix(in srgb, var(--color-accent) 15%, transparent), inset 0 0 8px color-mix(in srgb, var(--color-accent) 10%, transparent); } .secondary-button {