MohFarawati
dcffa87be7
Apply the Phase 2 warm-premium base additively (no existing page changes): - tailwind.config.ts: add fontSize roles (display, h1, h2, h3, title, body-lg, body, small, caption, overline) with line-height/tracking/weight; add fontFamily (sans/latin = Museo, arabic = Dubai); add section-sm/section-lg spacing rhythm. - globals.css: add Arabic-safe .eyebrow utility (uppercase + tracking on Latin, neutralised for html[lang="ar"]). Colors and fonts unchanged. Verified: tsc clean, eslint clean, tailwind build generates the new utilities with correct values.
711 lines
17 KiB
CSS
711 lines
17 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--background: 0 0% 100%;
|
|
--foreground: 222 24% 10%;
|
|
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222 24% 10%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222 24% 10%;
|
|
|
|
--primary: 9 73% 50%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 220 14% 96%;
|
|
--secondary-foreground: 222 22% 18%;
|
|
--muted: 220 14% 96%;
|
|
--muted-foreground: 220 10% 42%;
|
|
--accent: 220 14% 96%;
|
|
--accent-foreground: 222 22% 18%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--surface-1: 0 0% 100%;
|
|
--surface-2: 220 16% 97%;
|
|
--surface-3: 220 14% 94%;
|
|
--surface-inverse: 222 24% 12%;
|
|
--surface-inverse-foreground: 210 40% 98%;
|
|
|
|
--border: 220 13% 90%;
|
|
--border-strong: 220 11% 82%;
|
|
--input: 220 13% 90%;
|
|
--ring: 9 73% 50%;
|
|
|
|
--status-success: 145 63% 42%;
|
|
--status-success-soft: 145 58% 92%;
|
|
--status-warning: 36 92% 44%;
|
|
--status-warning-soft: 41 96% 90%;
|
|
|
|
--brand-primary: 9 73% 50%;
|
|
--brand-secondary: 12 64% 58%;
|
|
--hero-base: 260 22% 95%;
|
|
--hero-ink: 226 43% 11%;
|
|
--hero-left: 226 100% 85%;
|
|
--hero-right: 334 33% 91%;
|
|
--hero-bottom: 205 61% 88%;
|
|
--ambient-primary-alpha: 0.06;
|
|
--ambient-secondary-alpha: 0.04;
|
|
--ambient-grid-alpha: 0;
|
|
|
|
--radius-surface: 24px;
|
|
--radius-nested: 16px;
|
|
--radius-pill: 9999px;
|
|
|
|
--shadow-xs: 0 1px 2px hsl(220 26% 18% / 0.05);
|
|
--shadow-sm: 0 1px 3px hsl(220 26% 18% / 0.1), 0 1px 2px -1px hsl(220 26% 18% / 0.1);
|
|
--shadow-md: 0 4px 6px -1px hsl(220 26% 18% / 0.1), 0 2px 4px -2px hsl(220 26% 18% / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px hsl(220 26% 18% / 0.12), 0 4px 6px -4px hsl(220 26% 18% / 0.12);
|
|
--shadow-card: 0 1px 3px hsl(220 26% 18% / 0.1), 0 1px 2px -1px hsl(220 26% 18% / 0.08);
|
|
--shadow-panel: 0 4px 6px -1px hsl(220 26% 18% / 0.1), 0 2px 4px -2px hsl(220 26% 18% / 0.08);
|
|
--shadow-sidebar: inset 0 1px 0 hsl(0 0% 100% / 0.7);
|
|
|
|
--focus-ring: 0 0 0 3px hsl(var(--ring) / 0.18);
|
|
|
|
--container-narrow: 48rem;
|
|
--container-default: 72rem;
|
|
--container-wide: 80rem;
|
|
--container-admin: 88rem;
|
|
--header-height: 4.5rem;
|
|
--section-space: 3.5rem;
|
|
--content-space: 1.5rem;
|
|
|
|
--sidebar-background: 220 16% 97%;
|
|
--sidebar-foreground: 222 22% 16%;
|
|
--sidebar-primary: 9 73% 50%;
|
|
--sidebar-primary-foreground: 210 40% 98%;
|
|
--sidebar-accent: 220 14% 94%;
|
|
--sidebar-accent-foreground: 222 22% 18%;
|
|
--sidebar-border: 220 12% 86%;
|
|
--sidebar-ring: 9 73% 50%;
|
|
}
|
|
|
|
.dark {
|
|
--background: 222 22% 8%;
|
|
--foreground: 210 20% 96%;
|
|
|
|
--card: 222 22% 9%;
|
|
--card-foreground: 210 20% 96%;
|
|
--popover: 222 22% 9%;
|
|
--popover-foreground: 210 20% 96%;
|
|
|
|
--primary: 9 78% 56%;
|
|
--primary-foreground: 210 40% 98%;
|
|
--secondary: 222 16% 14%;
|
|
--secondary-foreground: 210 20% 94%;
|
|
--muted: 222 16% 14%;
|
|
--muted-foreground: 217 10% 64%;
|
|
--accent: 222 16% 14%;
|
|
--accent-foreground: 210 20% 94%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
--surface-1: 222 22% 9%;
|
|
--surface-2: 222 18% 12%;
|
|
--surface-3: 222 16% 15%;
|
|
--surface-inverse: 210 20% 96%;
|
|
--surface-inverse-foreground: 222 24% 10%;
|
|
|
|
--border: 222 14% 18%;
|
|
--border-strong: 222 12% 26%;
|
|
--input: 222 14% 18%;
|
|
--ring: 9 78% 56%;
|
|
|
|
--status-success: 145 68% 66%;
|
|
--status-success-soft: 145 36% 18%;
|
|
--status-warning: 42 96% 66%;
|
|
--status-warning-soft: 35 40% 18%;
|
|
|
|
--brand-primary: 9 78% 56%;
|
|
--brand-secondary: 12 74% 64%;
|
|
--hero-base: 222 24% 10%;
|
|
--hero-ink: 210 20% 96%;
|
|
--hero-left: 223 45% 24%;
|
|
--hero-right: 293 18% 22%;
|
|
--hero-bottom: 212 35% 20%;
|
|
--ambient-primary-alpha: 0.08;
|
|
--ambient-secondary-alpha: 0.05;
|
|
--ambient-grid-alpha: 0;
|
|
|
|
--shadow-xs: 0 1px 2px hsl(220 50% 2% / 0.32);
|
|
--shadow-sm: 0 1px 3px hsl(220 50% 2% / 0.28), 0 1px 2px -1px hsl(220 50% 2% / 0.28);
|
|
--shadow-md: 0 4px 6px -1px hsl(220 50% 2% / 0.32), 0 2px 4px -2px hsl(220 50% 2% / 0.32);
|
|
--shadow-lg: 0 10px 15px -3px hsl(220 50% 2% / 0.36), 0 4px 6px -4px hsl(220 50% 2% / 0.36);
|
|
--shadow-card: 0 1px 3px hsl(220 50% 2% / 0.28), 0 1px 2px -1px hsl(220 50% 2% / 0.28);
|
|
--shadow-panel: 0 4px 6px -1px hsl(220 50% 2% / 0.32), 0 2px 4px -2px hsl(220 50% 2% / 0.32);
|
|
--shadow-sidebar: inset 0 1px 0 hsl(210 25% 92% / 0.06);
|
|
|
|
--sidebar-background: 222 20% 10%;
|
|
--sidebar-foreground: 210 18% 88%;
|
|
--sidebar-primary: 9 78% 56%;
|
|
--sidebar-primary-foreground: 210 40% 98%;
|
|
--sidebar-accent: 222 16% 14%;
|
|
--sidebar-accent-foreground: 210 20% 94%;
|
|
--sidebar-border: 222 14% 20%;
|
|
--sidebar-ring: 9 78% 56%;
|
|
}
|
|
|
|
html {
|
|
color-scheme: light;
|
|
background-color: hsl(var(--background));
|
|
font-family: var(--font-museo), sans-serif;
|
|
}
|
|
|
|
html.dark {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
html[lang="ar"] {
|
|
font-family: var(--font-dubai), sans-serif;
|
|
}
|
|
|
|
.font-latin {
|
|
font-family: var(--font-museo), sans-serif;
|
|
}
|
|
|
|
.font-arabic {
|
|
font-family: var(--font-dubai), sans-serif;
|
|
}
|
|
|
|
/* Eyebrow / overline label. Latin gets uppercase + tracking; Arabic keeps
|
|
normal case and spacing so joined letterforms are not broken. */
|
|
.eyebrow {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
}
|
|
|
|
html[lang="ar"] .eyebrow {
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
|
|
body {
|
|
@apply min-h-screen text-foreground antialiased;
|
|
background-color: hsl(var(--background));
|
|
background-image: none;
|
|
font-family: inherit;
|
|
}
|
|
|
|
a {
|
|
@apply transition-colors;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
}
|
|
|
|
::selection {
|
|
background: hsl(var(--primary) / 0.2);
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
@layer utilities {
|
|
.hero-noise {
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
|
|
background-size: 180px 180px;
|
|
}
|
|
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.brand-gradient-text {
|
|
background-image: linear-gradient(
|
|
135deg,
|
|
hsl(var(--brand-primary)),
|
|
hsl(var(--brand-secondary))
|
|
);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.brand-glow {
|
|
box-shadow:
|
|
0 22px 60px -34px hsl(var(--brand-primary) / 0.38),
|
|
0 18px 44px -32px hsl(var(--brand-secondary) / 0.28);
|
|
}
|
|
|
|
.surface-grid {
|
|
background-image:
|
|
linear-gradient(hsl(var(--border) / 0.45) 1px, transparent 1px),
|
|
linear-gradient(90deg, hsl(var(--border) / 0.45) 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
background-position: center center;
|
|
}
|
|
|
|
.surface-ambient {
|
|
background-image:
|
|
radial-gradient(
|
|
circle at top,
|
|
hsl(var(--brand-primary) / calc(var(--ambient-primary-alpha) + 0.04)),
|
|
transparent 36%
|
|
),
|
|
radial-gradient(
|
|
circle at bottom right,
|
|
hsl(var(--brand-secondary) / calc(var(--ambient-secondary-alpha) + 0.03)),
|
|
transparent 32%
|
|
);
|
|
}
|
|
|
|
.site-content-frame {
|
|
position: relative;
|
|
isolation: isolate;
|
|
min-height: 100%;
|
|
overflow-x: clip;
|
|
}
|
|
|
|
.hero-surface {
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
.hero-home {
|
|
color: hsl(var(--hero-ink));
|
|
}
|
|
|
|
.hero-page {
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
.hero-sheet {
|
|
isolation: isolate;
|
|
}
|
|
|
|
.hero-sheet-base {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
.hero-sheet-veil {
|
|
display: none;
|
|
}
|
|
|
|
.hero-sheet-fade {
|
|
display: none;
|
|
}
|
|
|
|
.hero-title-line {
|
|
display: inline-block;
|
|
padding-inline: 0.02em;
|
|
padding-block-end: 0.05em;
|
|
}
|
|
|
|
.hero-title-accent {
|
|
background-image: linear-gradient(
|
|
135deg,
|
|
hsl(var(--primary)) 0%,
|
|
color-mix(in srgb, hsl(var(--primary)) 82%, hsl(var(--foreground))) 100%
|
|
);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.hero-title-accent-soft {
|
|
color: hsl(var(--hero-ink));
|
|
}
|
|
|
|
.dark .hero-title-accent {
|
|
background-image: linear-gradient(
|
|
135deg,
|
|
hsl(var(--primary)) 0%,
|
|
color-mix(in srgb, hsl(var(--primary)) 74%, hsl(var(--foreground))) 100%
|
|
);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.dark .hero-title-accent-soft {
|
|
color: hsl(var(--hero-ink));
|
|
}
|
|
|
|
.hero-scroll-link {
|
|
display: inline-flex;
|
|
height: 3.25rem;
|
|
width: 3.25rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 9999px;
|
|
border: 1px solid hsl(var(--border) / 0.55);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.16));
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.38),
|
|
0 18px 44px -28px rgba(15, 23, 42, 0.28);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
transition:
|
|
transform 220ms ease,
|
|
border-color 220ms ease,
|
|
background-color 220ms ease;
|
|
}
|
|
|
|
.hero-scroll-link:hover {
|
|
transform: translateY(2px);
|
|
border-color: hsl(var(--primary) / 0.42);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.22));
|
|
}
|
|
|
|
.hero-scroll-link svg {
|
|
animation: hero-scroll-bob 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
.dark .hero-scroll-link {
|
|
border-color: rgba(255, 255, 255, 0.12);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
|
0 18px 44px -28px rgba(0, 0, 0, 0.58);
|
|
}
|
|
|
|
.dark .hero-scroll-link:hover {
|
|
border-color: rgba(255, 255, 255, 0.18);
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
|
|
}
|
|
|
|
@keyframes hero-scroll-bob {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(4px);
|
|
}
|
|
}
|
|
|
|
.hero-header-bridge {
|
|
display: none;
|
|
}
|
|
|
|
.hero-content-bridge {
|
|
display: none;
|
|
}
|
|
|
|
.retro-led-panel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
--retro-led-dot-size: 0.12rem;
|
|
--retro-led-grid-gap: 0.16rem;
|
|
--retro-led-pad-x: 0.5rem;
|
|
--retro-led-pad-y: 0.36rem;
|
|
width: calc(
|
|
var(--retro-led-visible-columns) * var(--retro-led-dot-size) +
|
|
(var(--retro-led-visible-columns) - 1) * var(--retro-led-grid-gap) + 2 * var(--retro-led-pad-x)
|
|
);
|
|
max-width: 100%;
|
|
border-radius: 0.75rem;
|
|
padding: var(--retro-led-pad-y) var(--retro-led-pad-x);
|
|
background: linear-gradient(180deg, hsl(228 38% 7%), hsl(232 42% 5%));
|
|
}
|
|
|
|
.retro-led-viewport {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
min-height: calc(
|
|
var(--retro-led-visible-rows) * var(--retro-led-dot-size) +
|
|
(var(--retro-led-visible-rows) - 1) * var(--retro-led-grid-gap)
|
|
);
|
|
}
|
|
|
|
.retro-led-background {
|
|
position: absolute;
|
|
inset: var(--retro-led-pad-y) var(--retro-led-pad-x);
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--retro-led-visible-columns), var(--retro-led-dot-size));
|
|
grid-template-rows: repeat(var(--retro-led-visible-rows), var(--retro-led-dot-size));
|
|
gap: var(--retro-led-grid-gap);
|
|
}
|
|
|
|
.retro-led-track {
|
|
position: absolute;
|
|
inset-block-start: 0;
|
|
inset-inline-start: 0;
|
|
display: flex;
|
|
width: max-content;
|
|
align-items: center;
|
|
animation: retro-led-marquee 16s linear infinite;
|
|
will-change: transform;
|
|
}
|
|
|
|
.retro-led-message {
|
|
flex: none;
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--retro-led-message-columns), var(--retro-led-dot-size));
|
|
grid-template-rows: repeat(var(--retro-led-visible-rows), var(--retro-led-dot-size));
|
|
column-gap: var(--retro-led-grid-gap);
|
|
row-gap: var(--retro-led-grid-gap);
|
|
width: calc(
|
|
var(--retro-led-message-columns) * var(--retro-led-dot-size) +
|
|
(var(--retro-led-message-columns) - 1) * var(--retro-led-grid-gap)
|
|
);
|
|
height: calc(
|
|
var(--retro-led-visible-rows) * var(--retro-led-dot-size) +
|
|
(var(--retro-led-visible-rows) - 1) * var(--retro-led-grid-gap)
|
|
);
|
|
}
|
|
|
|
.retro-led-dot {
|
|
height: var(--retro-led-dot-size);
|
|
width: var(--retro-led-dot-size);
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.retro-led-background-dot {
|
|
background-color: hsl(228 18% 22%);
|
|
}
|
|
|
|
.retro-led-active-dot,
|
|
.retro-led-dot.is-lit {
|
|
background-color: hsl(var(--primary));
|
|
}
|
|
|
|
.retro-led-spacer {
|
|
flex: none;
|
|
width: calc(
|
|
var(--retro-led-repeat-gap-columns) * var(--retro-led-dot-size) +
|
|
(var(--retro-led-repeat-gap-columns) - 1) * var(--retro-led-grid-gap)
|
|
);
|
|
height: calc(
|
|
var(--retro-led-visible-rows) * var(--retro-led-dot-size) +
|
|
(var(--retro-led-visible-rows) - 1) * var(--retro-led-grid-gap)
|
|
);
|
|
}
|
|
|
|
.dark .retro-led-panel {
|
|
background: linear-gradient(180deg, hsl(228 38% 7%), hsl(232 42% 5%));
|
|
}
|
|
|
|
@keyframes retro-led-marquee {
|
|
from {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
to {
|
|
transform: translate3d(
|
|
calc(
|
|
-1 * (
|
|
var(--retro-led-message-columns) * var(--retro-led-dot-size) +
|
|
(var(--retro-led-message-columns) - 1) * var(--retro-led-grid-gap) +
|
|
var(--retro-led-repeat-gap-columns) * var(--retro-led-dot-size) +
|
|
(var(--retro-led-repeat-gap-columns) - 1) * var(--retro-led-grid-gap)
|
|
)
|
|
),
|
|
0,
|
|
0
|
|
);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.retro-led-track {
|
|
animation: none;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.retro-led-panel {
|
|
--retro-led-dot-size: 0.11rem;
|
|
--retro-led-grid-gap: 0.12rem;
|
|
--retro-led-pad-x: 0.42rem;
|
|
--retro-led-pad-y: 0.3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ── Magic Bento ── */
|
|
|
|
.mb-grid {
|
|
display: grid;
|
|
gap: 0.5em;
|
|
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
|
|
}
|
|
|
|
.mb-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
aspect-ratio: 4 / 3;
|
|
min-height: 200px;
|
|
width: 100%;
|
|
padding: 1.25em;
|
|
border-radius: var(--radius-nested, 16px);
|
|
border: 1px solid hsl(var(--border));
|
|
background: hsl(var(--surface-2));
|
|
font-weight: 300;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
--glow-x: 50%;
|
|
--glow-y: 50%;
|
|
--glow-intensity: 0;
|
|
--glow-radius: 200px;
|
|
}
|
|
|
|
.mb-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px hsl(var(--foreground) / 0.08);
|
|
}
|
|
|
|
.mb-card__header,
|
|
.mb-card__body {
|
|
display: flex;
|
|
position: relative;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.mb-card__header {
|
|
gap: 0.75em;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.mb-card__body {
|
|
flex-direction: column;
|
|
gap: 0.25em;
|
|
}
|
|
|
|
.mb-card__label {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.14em;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.mb-card__title {
|
|
font-weight: 500;
|
|
font-size: 1rem;
|
|
margin: 0;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.mb-card__desc {
|
|
font-size: 0.8rem;
|
|
line-height: 1.4;
|
|
color: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
.mb-card__extra {
|
|
margin-top: 0.5em;
|
|
}
|
|
|
|
.mb-card--autohide .mb-card__title,
|
|
.mb-card--autohide .mb-card__desc {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.mb-card--autohide .mb-card__title {
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
}
|
|
|
|
.mb-card--autohide .mb-card__desc {
|
|
-webkit-line-clamp: 3;
|
|
line-clamp: 3;
|
|
}
|
|
|
|
/* Responsive grid */
|
|
@media (max-width: 599px) {
|
|
.mb-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.mb-card {
|
|
min-height: 180px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.mb-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.mb-grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
.mb-card:nth-child(3) {
|
|
grid-column: span 2;
|
|
grid-row: span 2;
|
|
}
|
|
.mb-card:nth-child(4) {
|
|
grid-column: 1 / span 2;
|
|
grid-row: 2 / span 2;
|
|
}
|
|
.mb-card:nth-child(6) {
|
|
grid-column: 4;
|
|
grid-row: 3;
|
|
}
|
|
}
|
|
|
|
/* Border glow */
|
|
.mb-card--glow::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 6px;
|
|
background: radial-gradient(
|
|
var(--glow-radius) circle at var(--glow-x) var(--glow-y),
|
|
rgba(var(--glow-color, 220, 68, 22), calc(var(--glow-intensity) * 0.8)) 0%,
|
|
rgba(var(--glow-color, 220, 68, 22), calc(var(--glow-intensity) * 0.4)) 30%,
|
|
transparent 60%
|
|
);
|
|
border-radius: inherit;
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
z-index: 1;
|
|
}
|
|
|
|
.mb-card--glow:hover {
|
|
box-shadow:
|
|
0 4px 20px rgba(220, 68, 22, 0.15),
|
|
0 0 30px rgba(220, 68, 22, 0.08);
|
|
}
|
|
|
|
/* ── ScrollSmoother wrapper ── */
|
|
|
|
#smooth-wrapper {
|
|
overflow: hidden;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#smooth-content {
|
|
overflow: visible;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#smooth-wrapper {
|
|
overflow: visible;
|
|
position: relative;
|
|
}
|
|
}
|