Marco
2505a87717
Strategy: one layout breakpoint at lg (1024px), clamp() for fluid type. Navbar: hamburger menu (animated ✕) with max-h dropdown, resize-close, h-20 mobile / h-[6.25rem] desktop, blur triggers on scroll or menu-open. Hero: flex-col→lg:flex-row, clamp(2rem,5vw,4rem) heading, background-image scales responsively, gradient mask via .hero-mask only at lg+ in CSS. Divider: flex-wrap + gap-y for smaller screens. Tools: grid-cols-1→md:2→lg:3, removed fixed height and per-card paddingRight. Blog: featured flex-col→lg:flex-row, secondary flex-col→md:flex-row, excerpt hidden on mobile secondary cards to save space. About: flex-col→lg:flex-row, clamp on quote size, min-h-[18rem] for photo. Newsletter: flex-col→lg:flex-row, input+button stack on xs / row on sm+. Footer: flex-col→lg:flex-row, flex-wrap on legal links. globals.css: scroll-padding-top 5rem mobile / 6.25rem desktop. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
49 lines
1.1 KiB
CSS
49 lines
1.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--background: #f5f0e8;
|
|
--foreground: #222221;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: var(--font-geist-sans);
|
|
--font-mono: var(--font-geist-mono);
|
|
}
|
|
|
|
html {
|
|
scroll-padding-top: 5rem; /* mobile navbar height */
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
html {
|
|
scroll-padding-top: 6.25rem; /* desktop navbar height */
|
|
}
|
|
}
|
|
|
|
/* Hero image: gradient mask only on desktop where image is right-column */
|
|
.hero-mask {
|
|
-webkit-mask-image: none;
|
|
mask-image: none;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.hero-mask {
|
|
-webkit-mask-image:
|
|
linear-gradient(to right, transparent 0%, black 14%),
|
|
linear-gradient(to bottom, transparent 0%, black 10%);
|
|
-webkit-mask-composite: destination-in;
|
|
mask-image:
|
|
linear-gradient(to right, transparent 0%, black 14%),
|
|
linear-gradient(to bottom, transparent 0%, black 10%);
|
|
mask-composite: intersect;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
|
|
}
|