From 0167e9fe921decb416e099802b9049022fe5d65d Mon Sep 17 00:00:00 2001 From: kudinDmitriyUp Date: Thu, 16 Apr 2026 03:27:01 +0000 Subject: [PATCH] Bob AI: Apply glassmorphic styles to key elements across the website --- src/index.css | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/index.css b/src/index.css index 04fc61e..8af7d13 100644 --- a/src/index.css +++ b/src/index.css @@ -133,7 +133,7 @@ html { body { margin: 0; - background-color: var(--background); + background: linear-gradient(to bottom right, var(--background), var(--background-accent)); color: var(--foreground); font-family: "Inter", sans-serif; position: relative; @@ -152,15 +152,21 @@ h6 { } /* WEBILD_CARD_STYLE */ -/* @cards/solid */ +/* @cards/glassmorphism */ .card { - background: var(--color-card); + background: color-mix(in srgb, var(--color-card) 50%, transparent); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid color-mix(in srgb, var(--color-card) 70%, transparent); } /* WEBILD_PRIMARY_BUTTON */ /* @primaryButtons/depth-layers */ .primary-button { - background: var(--color-primary-cta); + background: color-mix(in srgb, var(--color-primary-cta) 80%, transparent); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + border: 1px solid color-mix(in srgb, var(--color-primary-cta-text) 20%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 2px 4px color-mix(in srgb, var(--color-primary-cta) 20%, transparent), 0 4px 8px color-mix(in srgb, var(--color-primary-cta) 15%, transparent), 0 8px 16px color-mix(in srgb, var(--color-primary-cta) 10%, transparent), 0 16px 32px color-mix(in srgb, var(--color-primary-cta) 5%, transparent); } @@ -170,6 +176,9 @@ h6 { background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%), - var(--color-secondary-cta); + color-mix(in srgb, var(--color-secondary-cta) 50%, transparent); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + border: 1px solid color-mix(in srgb, var(--color-secondary-cta) 70%, transparent); box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent); } -- 2.49.1