moh
2fc0641512
- Wrap #smooth-wrapper in an .app-shell: a fixed, inset, rounded, bordered panel. Its transform makes it the containing block for the fixed wrapper, so ScrollSmoother sizes the scroll viewport to the shell (content scrolls inside it) without fighting ScrollSmoother's inline styles. - Dock and corner controls stay outside the shell, on a brand-tinted 'desktop' wallpaper painted on body. - Reduced-motion path: the shell scrolls its content natively.
972 lines
23 KiB
CSS
972 lines
23 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;
|
|
/* The "desktop" behind the shell window: a subtle brand-tinted wallpaper. */
|
|
background-color: hsl(var(--surface-3));
|
|
background-image:
|
|
radial-gradient(1100px 780px at 12% -8%, hsl(var(--primary) / 0.16), transparent 55%),
|
|
radial-gradient(1000px 720px at 108% 112%, hsl(217 55% 45% / 0.16), transparent 55%);
|
|
background-attachment: fixed;
|
|
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;
|
|
}
|
|
|
|
/* ---- Layered hero backdrop (HeroMotionBackdrop) ---- */
|
|
.hero-backdrop-base {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
.hero-backdrop-grid {
|
|
position: absolute;
|
|
inset: 0;
|
|
background-image:
|
|
linear-gradient(hsl(var(--border) / 0.55) 1px, transparent 1px),
|
|
linear-gradient(90deg, hsl(var(--border) / 0.55) 1px, transparent 1px);
|
|
background-size: 30px 30px;
|
|
background-position: center top;
|
|
opacity: 0.55;
|
|
-webkit-mask-image: radial-gradient(ellipse 78% 58% at 50% 30%, #000 0%, transparent 72%);
|
|
mask-image: radial-gradient(ellipse 78% 58% at 50% 30%, #000 0%, transparent 72%);
|
|
}
|
|
|
|
.dark .hero-backdrop-grid {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.hero-backdrop-glow {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
radial-gradient(58% 46% at 50% 20%, hsl(var(--brand-primary) / 0.16), transparent 70%),
|
|
radial-gradient(46% 42% at 80% 10%, hsl(var(--brand-secondary) / 0.13), transparent 68%),
|
|
radial-gradient(48% 44% at 16% 18%, hsl(var(--brand-primary) / 0.1), transparent 66%);
|
|
}
|
|
|
|
.hero-orb {
|
|
position: absolute;
|
|
border-radius: 9999px;
|
|
filter: blur(64px);
|
|
will-change: transform;
|
|
}
|
|
|
|
.hero-orb-1 {
|
|
top: -10%;
|
|
inset-inline-start: -8%;
|
|
height: 32rem;
|
|
width: 32rem;
|
|
background: hsl(var(--brand-primary) / 0.18);
|
|
animation: hero-orb-drift-a 22s ease-in-out infinite;
|
|
}
|
|
|
|
.hero-orb-2 {
|
|
top: -6%;
|
|
inset-inline-end: -10%;
|
|
height: 28rem;
|
|
width: 28rem;
|
|
background: hsl(var(--brand-secondary) / 0.15);
|
|
animation: hero-orb-drift-b 27s ease-in-out infinite;
|
|
}
|
|
|
|
.hero-orb-3 {
|
|
bottom: -22%;
|
|
inset-inline-start: 24%;
|
|
height: 26rem;
|
|
width: 26rem;
|
|
background: hsl(var(--brand-primary) / 0.1);
|
|
animation: hero-orb-drift-a 31s ease-in-out infinite reverse;
|
|
}
|
|
|
|
.hero-backdrop-noise {
|
|
position: absolute;
|
|
inset: -8%;
|
|
opacity: 0.26;
|
|
mix-blend-mode: soft-light;
|
|
}
|
|
|
|
.dark .hero-backdrop-noise {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.hero-backdrop-floor {
|
|
position: absolute;
|
|
inset-inline: 0;
|
|
bottom: 0;
|
|
height: 40%;
|
|
background: linear-gradient(to bottom, transparent, hsl(var(--background)) 92%);
|
|
}
|
|
|
|
.hero-backdrop.is-compact .hero-backdrop-grid {
|
|
opacity: 0.32;
|
|
}
|
|
|
|
.hero-backdrop.is-compact .hero-orb {
|
|
opacity: 0.7;
|
|
filter: blur(72px);
|
|
}
|
|
|
|
@keyframes hero-orb-drift-a {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
33% {
|
|
transform: translate3d(70px, -48px, 0) scale(1.1);
|
|
}
|
|
66% {
|
|
transform: translate3d(-42px, 26px, 0) scale(0.94);
|
|
}
|
|
}
|
|
|
|
@keyframes hero-orb-drift-b {
|
|
0%,
|
|
100% {
|
|
transform: translate3d(0, 0, 0) scale(1);
|
|
}
|
|
33% {
|
|
transform: translate3d(-80px, 42px, 0) scale(0.92);
|
|
}
|
|
66% {
|
|
transform: translate3d(38px, -24px, 0) scale(1.08);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-orb {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
/* ---- Hero entrance ----
|
|
Per-element rise is disabled: the site `template.tsx` now runs one unified
|
|
page-transition animation on every navigation instead. ---- */
|
|
.hero-rise {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hero-content > *:nth-child(1) {
|
|
animation-delay: 0.06s;
|
|
}
|
|
.hero-content > *:nth-child(2) {
|
|
animation-delay: 0.14s;
|
|
}
|
|
.hero-content > *:nth-child(3) {
|
|
animation-delay: 0.22s;
|
|
}
|
|
.hero-content > *:nth-child(4) {
|
|
animation-delay: 0.3s;
|
|
}
|
|
.hero-content > *:nth-child(5) {
|
|
animation-delay: 0.38s;
|
|
}
|
|
.hero-content > *:nth-child(6) {
|
|
animation-delay: 0.46s;
|
|
}
|
|
|
|
@keyframes hero-rise-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(18px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Focused glow directly behind the hero title */
|
|
.hero-title {
|
|
position: relative;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.hero-title::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 46%;
|
|
z-index: -1;
|
|
width: 84%;
|
|
height: 74%;
|
|
transform: translate(-50%, -50%);
|
|
background: radial-gradient(closest-side, hsl(var(--brand-primary) / 0.2), transparent 78%);
|
|
filter: blur(48px);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dark .hero-title::before {
|
|
background: radial-gradient(closest-side, hsl(var(--brand-primary) / 0.3), transparent 78%);
|
|
}
|
|
|
|
/* Scroll cue pinned to the bottom of the home hero */
|
|
.hero-scroll-anchor {
|
|
position: absolute;
|
|
bottom: 1.5rem;
|
|
left: 50%;
|
|
z-index: 10;
|
|
transform: translateX(-50%);
|
|
opacity: 0;
|
|
animation: hero-fade-in 0.6s ease 0.7s forwards;
|
|
}
|
|
|
|
.hero-scroll-anchor:hover {
|
|
transform: translateX(-50%) translateY(2px);
|
|
}
|
|
|
|
@keyframes hero-fade-in {
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-rise,
|
|
.hero-scroll-anchor {
|
|
animation: none;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* ── App shell (macOS-style "window") ──
|
|
Frames the scrolling content: the shell is a fixed, inset, rounded panel and
|
|
— because it sets a `transform` — it becomes the containing block for the
|
|
position:fixed #smooth-wrapper inside it, so ScrollSmoother's own inline
|
|
`inset:0; width/height:100%` sizes the wrapper to the SHELL, not the viewport.
|
|
The dock and corner controls render outside the shell, on the ambient desktop. */
|
|
.app-shell {
|
|
position: fixed;
|
|
top: calc(env(safe-area-inset-top, 0px) + 12px);
|
|
left: 12px;
|
|
right: 12px;
|
|
bottom: calc(env(safe-area-inset-bottom, 0px) + 94px);
|
|
overflow: hidden;
|
|
border-radius: 28px;
|
|
border: 1px solid hsl(var(--foreground) / 0.12);
|
|
background: hsl(var(--background));
|
|
box-shadow:
|
|
0 40px 90px -30px rgba(0, 0, 0, 0.65),
|
|
inset 0 1px 0 hsl(var(--foreground) / 0.08);
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.app-shell {
|
|
top: calc(env(safe-area-inset-top, 0px) + 8px);
|
|
left: 8px;
|
|
right: 8px;
|
|
bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
|
|
border-radius: 22px;
|
|
}
|
|
}
|
|
|
|
/* ── ScrollSmoother wrapper (fills the shell) ── */
|
|
#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) {
|
|
/* No ScrollSmoother: let the shell itself scroll its content natively. */
|
|
.app-shell {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
#smooth-wrapper {
|
|
position: static;
|
|
inset: auto;
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: visible;
|
|
}
|
|
}
|