jeffrey/wwwfiberdirekt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed the white box with shadow, shadow styling on several blocks

Browse Source
This commit is contained in:
Jeffrey 2026-03-02 15:33:21 +01:00
parent 5090c0f743
commit 707f76291e
6 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/(frontend)/globals.css
View File

@ -419,6 +419,14 @@ html:not([data-theme]) {
/* Button text (matches h4 range but with tighter line height) */
--text-fd-btn: clamp(1rem, 1.5vw + 0.125rem, 1.375rem);
--text-fd-btn--line-height: 1.2;
/* =============================
SHADOWS — Card Elevation
=============================
Subtle, evenly-distributed shadow wrapping the entire card.
Usage: shadow-fd-card, shadow-fd-card-hover */
--shadow-fd-card: 0 2px 24px 0 rgba(14, 35, 56, 0.06);
--shadow-fd-card-hover: 0 4px 32px 0 rgba(14, 35, 56, 0.10);
}

4
src/blocks/FDCardGridBlock/Component.tsx
View File

@ -39,7 +39,7 @@ const cardStyleMap: Record<
headingText: 'text-fd-navy dark:text-fd-yellow',
bodyText: 'text-fd-navy dark:text-white',
linkText: 'text-fd-navy/70 hover:text-fd-navy dark:text-fd-yellow/80 dark:hover:text-fd-yellow',
border: 'border-5 border-gray-200 dark:border-white/10 shadow-sm',
border: 'border-5 border-gray-200 dark:border-white/10 shadow-fd-card',
},
}
@ -154,7 +154,7 @@ export const FDCardGridBlockComponent: React.FC<FDCardGridBlockProps> = ({
<a
key={index}
href={card.cardLink}
className="block hover:shadow-lg hover:-translate-y-1 transition-all duration-200"
className="block hover:shadow-fd-card-hover hover:-translate-y-1 transition-all duration-200"
aria-label={card.heading || undefined}
>
{cardContent}

4
src/blocks/FDCodeEmbedBlock/Component.tsx
View File

@ -61,9 +61,9 @@ export const FDCodeEmbedBlockComponent: React.FC<FDCodeEmbedBlockProps> = ({
const embedWrapperClass =
embedBackground === 'card'
? `bg-white dark:bg-white/10 ${cardRadius} shadow-lg p-6 md:p-10 overflow-hidden`
? `bg-white dark:bg-white/10 ${cardRadius} shadow-fd-card p-6 md:p-10 overflow-hidden`
: embedBackground === 'navy-card'
? `bg-fd-navy ${cardRadius} shadow-lg p-6 md:p-10 overflow-hidden`
? `bg-fd-navy ${cardRadius} shadow-fd-card p-6 md:p-10 overflow-hidden`
: ''
useEffect(() => {

2
src/blocks/FDContactFormBlock/Component.tsx
View File

@ -371,7 +371,7 @@ export const FDContactFormBlockComponent: React.FC<FDContactFormBlockProps> = ({
className={`max-w-[720px] mx-auto p-8 md:p-12 ${cardRadius} ${
dark
? 'bg-white/5 border border-white/10 backdrop-blur-sm'
: 'bg-white shadow-lg border border-gray-100 dark:bg-white/5 dark:border-white/10 dark:backdrop-blur-sm'
: 'bg-white shadow-fd-card border border-gray-100 dark:bg-white/5 dark:border-white/10 dark:backdrop-blur-sm'
}`}
>
{formContent}

2
src/blocks/FDPricingCardBlock/Component.tsx
View File

@ -46,7 +46,7 @@ const cardStyleMap: Record<string, {
subtitle: 'text-fd-navy', body: 'text-fd-navy/80', bullet: 'text-fd-navy', isDark: false,
},
white: {
bg: 'bg-white dark:bg-white/10 shadow-lg dark:shadow-none',
bg: 'bg-white dark:bg-white/10 shadow-fd-card dark:shadow-none',
border: '',
title: 'text-fd-navy dark:text-fd-yellow',
subtitle: 'text-fd-navy dark:text-white',

2
src/blocks/FDWideCardBlock/Component.tsx
View File

@ -7,7 +7,7 @@ const cardBgMap: Record<string, { bg: string; heading: string; body: string; isD
navy: { bg: 'bg-fd-navy', heading: 'text-white', body: 'text-white/80', isDark: true },
yellow: { bg: 'bg-fd-yellow', heading: 'text-fd-navy', body: 'text-fd-navy/80', isDark: false },
gray: { bg: 'bg-fd-gray-light dark:bg-white/10', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false },
white: { bg: 'bg-white dark:bg-white/10 shadow-xl dark:shadow-none', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false },
white: { bg: 'bg-white dark:bg-white/10 shadow-fd-card dark:shadow-none', heading: 'text-fd-navy dark:text-white', body: 'text-fd-navy/80 dark:text-white/80', isDark: false },
}
const sectionBgMap: Record<string, string> = {