Import source: src/app/globals
Import the existing local project snapshot. This commit organizes existing files; it does not represent newly developed functionality.
This commit is contained in:
arsam
@@ -0,0 +1,547 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
/* Porcelain light theme */
|
||||
--background: 220 20% 96%;
|
||||
--foreground: 224 18% 12%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 224 18% 12%;
|
||||
--primary: 224 88% 53%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 220 14% 92%;
|
||||
--secondary-foreground: 224 18% 14%;
|
||||
--muted: 220 14% 93%;
|
||||
--muted-foreground: 224 8% 44%;
|
||||
--accent: 30 100% 48%;
|
||||
--accent-foreground: 224 18% 12%;
|
||||
--destructive: 4 74% 49%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--success: 154 84% 30%;
|
||||
--warning: 31 95% 42%;
|
||||
--border: 220 12% 86%;
|
||||
--input: 220 12% 86%;
|
||||
--ring: 224 88% 53%;
|
||||
|
||||
/* Aurora companions (hue triplets) */
|
||||
--aurora-a: 224 88% 60%;
|
||||
--aurora-b: 200 80% 55%;
|
||||
--aurora-c: 0 0% 70%;
|
||||
--aurora-opacity: 0.18;
|
||||
|
||||
/* Liquid glass */
|
||||
--glass-alpha: 0.78;
|
||||
--glass-blur: 3px;
|
||||
--glass-saturate: 112%;
|
||||
--glass-edge-alpha: 0.7;
|
||||
|
||||
--radius: 12px;
|
||||
--sidebar-width: 256px;
|
||||
--header-height: 56px;
|
||||
}
|
||||
|
||||
/* Pitch-black dark theme — strictly neutral grays, zero hue cast.
|
||||
* Color enters only through the user-selected accent. */
|
||||
.dark {
|
||||
--background: 0 0% 0%;
|
||||
--foreground: 0 0% 96%;
|
||||
--card: 0 0% 10%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
--primary: 222 95% 63%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 0 0% 14%;
|
||||
--secondary-foreground: 0 0% 95%;
|
||||
--muted: 0 0% 12%;
|
||||
--muted-foreground: 0 0% 64%;
|
||||
--accent: 31 100% 54%;
|
||||
--accent-foreground: 0 0% 0%;
|
||||
--destructive: 4 78% 56%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--success: 154 70% 44%;
|
||||
--warning: 36 95% 56%;
|
||||
--border: 0 0% 17%;
|
||||
--input: 0 0% 17%;
|
||||
--ring: 222 95% 63%;
|
||||
|
||||
--aurora-opacity: 0.16;
|
||||
--glass-alpha: 0.62;
|
||||
--glass-edge-alpha: 0.14;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Accent presets — applied as data-accent on <html>.
|
||||
* ------------------------------------------------------------------------- */
|
||||
[data-accent="violet"] {
|
||||
--primary: 261 78% 56%;
|
||||
--ring: 261 78% 56%;
|
||||
--aurora-a: 261 80% 62%;
|
||||
}
|
||||
.dark[data-accent="violet"] {
|
||||
--primary: 260 90% 67%;
|
||||
--ring: 260 90% 67%;
|
||||
}
|
||||
|
||||
[data-accent="emerald"] {
|
||||
--primary: 161 92% 30%;
|
||||
--ring: 161 92% 30%;
|
||||
--aurora-a: 160 80% 45%;
|
||||
}
|
||||
.dark[data-accent="emerald"] {
|
||||
--primary: 158 68% 44%;
|
||||
--ring: 158 68% 44%;
|
||||
}
|
||||
|
||||
[data-accent="sunset"] {
|
||||
--primary: 24 94% 50%;
|
||||
--primary-foreground: 24 90% 98%;
|
||||
--ring: 24 94% 50%;
|
||||
--aurora-a: 24 94% 55%;
|
||||
}
|
||||
.dark[data-accent="sunset"] {
|
||||
--primary: 26 96% 56%;
|
||||
--primary-foreground: 24 95% 7%;
|
||||
--ring: 26 96% 56%;
|
||||
}
|
||||
|
||||
[data-accent="rose"] {
|
||||
--primary: 345 82% 51%;
|
||||
--ring: 345 82% 51%;
|
||||
--aurora-a: 345 85% 60%;
|
||||
}
|
||||
.dark[data-accent="rose"] {
|
||||
--primary: 347 90% 64%;
|
||||
--ring: 347 90% 64%;
|
||||
}
|
||||
|
||||
[data-accent="cyan"] {
|
||||
--primary: 196 95% 38%;
|
||||
--ring: 196 95% 38%;
|
||||
--aurora-a: 196 95% 50%;
|
||||
}
|
||||
.dark[data-accent="cyan"] {
|
||||
--primary: 194 92% 52%;
|
||||
--primary-foreground: 200 95% 6%;
|
||||
--ring: 194 92% 52%;
|
||||
}
|
||||
|
||||
/* In dark mode the ambient companions are strictly monochrome — only the
|
||||
* primary blob carries the accent hue. Declared after the accent presets so
|
||||
* it wins regardless of the selected accent. */
|
||||
.dark {
|
||||
--aurora-b: 0 0% 55%;
|
||||
--aurora-c: 0 0% 35%;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Glass intensity — applied as data-glass on <html>.
|
||||
* ------------------------------------------------------------------------- */
|
||||
[data-glass="off"] {
|
||||
--glass-alpha: 1;
|
||||
--glass-blur: 0px;
|
||||
--glass-saturate: 100%;
|
||||
}
|
||||
[data-glass="subtle"] {
|
||||
--glass-alpha: 0.86;
|
||||
--glass-blur: 2px;
|
||||
--glass-saturate: 108%;
|
||||
}
|
||||
[data-glass="heavy"] {
|
||||
--glass-alpha: 0.54;
|
||||
--glass-blur: 10px;
|
||||
--glass-saturate: 135%;
|
||||
}
|
||||
.dark[data-glass="subtle"] {
|
||||
--glass-alpha: 0.76;
|
||||
}
|
||||
.dark[data-glass="heavy"] {
|
||||
--glass-alpha: 0.34;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Corner radius — applied as data-radius on <html>.
|
||||
* ------------------------------------------------------------------------- */
|
||||
[data-radius="sharp"] {
|
||||
--radius: 6px;
|
||||
}
|
||||
[data-radius="soft"] {
|
||||
--radius: 18px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Base
|
||||
* ------------------------------------------------------------------------- */
|
||||
* {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--border)) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--border));
|
||||
border: 3px solid transparent;
|
||||
border-radius: 999px;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted-foreground) / 0.55);
|
||||
border: 3px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100%;
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-feature-settings:
|
||||
"rlig" 1,
|
||||
"calt" 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: hsl(var(--primary) / 0.22);
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-bottom-width: 2px;
|
||||
border-radius: 6px;
|
||||
background: hsl(var(--muted) / 0.8);
|
||||
padding: 1px 6px;
|
||||
font-family: var(--font-mono), ui-monospace, monospace;
|
||||
font-size: 11px;
|
||||
color: hsl(var(--muted-foreground));
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
.focus-ring {
|
||||
@apply outline-none ring-offset-2 ring-offset-background focus-visible:ring-2 focus-visible:ring-ring;
|
||||
}
|
||||
|
||||
.density-compact {
|
||||
--header-height: 56px;
|
||||
}
|
||||
|
||||
.density-comfortable {
|
||||
--header-height: 64px;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Liquid glass surfaces — iOS-style: translucent fill, saturated backdrop
|
||||
* blur, and a refraction ring made of four inset specular edges (bright top,
|
||||
* faint sides and bottom).
|
||||
* ------------------------------------------------------------------------- */
|
||||
@layer components {
|
||||
.glass-panel {
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
hsl(0 0% 100% / 0.09),
|
||||
hsl(0 0% 100% / 0.02) 38%,
|
||||
transparent 70%
|
||||
),
|
||||
hsl(var(--card) / var(--glass-alpha));
|
||||
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
|
||||
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
|
||||
border: 1px solid hsl(var(--border) / 0.7);
|
||||
box-shadow:
|
||||
inset 0 1px 0 0 hsl(0 0% 100% / var(--glass-edge-alpha)),
|
||||
inset 0 -1px 0 0 hsl(0 0% 100% / calc(var(--glass-edge-alpha) * 0.3)),
|
||||
inset 1px 0 0 0 hsl(0 0% 100% / calc(var(--glass-edge-alpha) * 0.2)),
|
||||
inset -1px 0 0 0 hsl(0 0% 100% / calc(var(--glass-edge-alpha) * 0.2)),
|
||||
0 1px 2px rgb(0 0 0 / 0.06),
|
||||
0 16px 40px -24px rgb(0 0 0 / 0.3);
|
||||
}
|
||||
|
||||
.dark .glass-panel {
|
||||
border-color: hsl(0 0% 100% / 0.1);
|
||||
box-shadow:
|
||||
inset 0 1px 0 0 hsl(0 0% 100% / var(--glass-edge-alpha)),
|
||||
inset 0 -1px 0 0 hsl(0 0% 100% / calc(var(--glass-edge-alpha) * 0.3)),
|
||||
inset 1px 0 0 0 hsl(0 0% 100% / calc(var(--glass-edge-alpha) * 0.2)),
|
||||
inset -1px 0 0 0 hsl(0 0% 100% / calc(var(--glass-edge-alpha) * 0.2)),
|
||||
0 1px 2px rgb(0 0 0 / 0.5),
|
||||
0 20px 48px -28px rgb(0 0 0 / 0.85);
|
||||
}
|
||||
|
||||
/* Chrome surfaces: floating header + sidebar rails. */
|
||||
.glass-bar {
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
hsl(0 0% 100% / 0.08),
|
||||
hsl(0 0% 100% / 0.02) 45%,
|
||||
transparent 75%
|
||||
),
|
||||
hsl(var(--card) / min(calc(var(--glass-alpha) + 0.12), 0.96));
|
||||
-webkit-backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(var(--glass-saturate));
|
||||
backdrop-filter: blur(calc(var(--glass-blur) + 1px)) saturate(var(--glass-saturate));
|
||||
box-shadow:
|
||||
inset 0 1px 0 0 hsl(0 0% 100% / var(--glass-edge-alpha)),
|
||||
inset 0 -1px 0 0 hsl(0 0% 100% / calc(var(--glass-edge-alpha) * 0.25)),
|
||||
0 12px 32px -20px rgb(0 0 0 / 0.45);
|
||||
}
|
||||
|
||||
.dark .glass-bar {
|
||||
box-shadow:
|
||||
inset 0 1px 0 0 hsl(0 0% 100% / var(--glass-edge-alpha)),
|
||||
inset 0 -1px 0 0 hsl(0 0% 100% / calc(var(--glass-edge-alpha) * 0.25)),
|
||||
0 12px 36px -18px rgb(0 0 0 / 0.9);
|
||||
}
|
||||
|
||||
/* Floating surfaces: dialogs, popovers, menus. Most opaque. */
|
||||
.glass-modal {
|
||||
background:
|
||||
linear-gradient(180deg, hsl(0 0% 100% / 0.08), transparent 40%),
|
||||
hsl(var(--card) / min(calc(var(--glass-alpha) + 0.28), 1));
|
||||
-webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(var(--glass-saturate));
|
||||
backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(var(--glass-saturate));
|
||||
border: 1px solid hsl(var(--border) / 0.75);
|
||||
box-shadow:
|
||||
inset 0 1px 0 0 hsl(0 0% 100% / var(--glass-edge-alpha)),
|
||||
inset 0 -1px 0 0 hsl(0 0% 100% / calc(var(--glass-edge-alpha) * 0.3)),
|
||||
0 24px 64px -24px rgb(0 0 0 / 0.5);
|
||||
}
|
||||
|
||||
.dark .glass-modal {
|
||||
border-color: hsl(0 0% 100% / 0.12);
|
||||
box-shadow:
|
||||
inset 0 1px 0 0 hsl(0 0% 100% / var(--glass-edge-alpha)),
|
||||
inset 0 -1px 0 0 hsl(0 0% 100% / calc(var(--glass-edge-alpha) * 0.3)),
|
||||
0 24px 72px -20px rgb(0 0 0 / 0.95);
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(100deg, hsl(var(--foreground)) 35%, hsl(var(--primary)) 140%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: hsl(var(--muted) / 0.7);
|
||||
}
|
||||
|
||||
.skeleton::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(90deg, transparent, hsl(var(--foreground) / 0.07), transparent);
|
||||
animation: shimmer 1.6s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
/* Legacy shadow helpers, softened to match the glass language. */
|
||||
.dark .shadow-panel {
|
||||
box-shadow: 0 1px 0 hsl(var(--border) / 0.7);
|
||||
}
|
||||
|
||||
.dark .shadow-raised {
|
||||
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.72);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Ambient background: aurora blobs + grid + grain.
|
||||
* Hidden entirely when data-ambiance="off".
|
||||
* ------------------------------------------------------------------------- */
|
||||
.aurora {
|
||||
position: absolute;
|
||||
border-radius: 9999px;
|
||||
filter: blur(52px);
|
||||
opacity: var(--aurora-opacity);
|
||||
}
|
||||
|
||||
.aurora-1 {
|
||||
top: -22vh;
|
||||
left: -12vw;
|
||||
height: 60vh;
|
||||
width: 46vw;
|
||||
min-width: 420px;
|
||||
min-height: 420px;
|
||||
background: radial-gradient(closest-side, hsl(var(--aurora-a) / 0.7), transparent 70%);
|
||||
animation: aurora-drift-1 48s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.aurora-2 {
|
||||
top: 4vh;
|
||||
right: -16vw;
|
||||
height: 56vh;
|
||||
width: 42vw;
|
||||
min-width: 380px;
|
||||
min-height: 380px;
|
||||
background: radial-gradient(closest-side, hsl(var(--aurora-b) / 0.4), transparent 70%);
|
||||
animation: aurora-drift-2 58s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.aurora-3 {
|
||||
bottom: -26vh;
|
||||
left: 24vw;
|
||||
height: 54vh;
|
||||
width: 44vw;
|
||||
min-width: 380px;
|
||||
min-height: 380px;
|
||||
background: radial-gradient(closest-side, hsl(var(--aurora-c) / 0.3), transparent 70%);
|
||||
animation: aurora-drift-3 64s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.ambient-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image:
|
||||
linear-gradient(hsl(var(--foreground) / 0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, hsl(var(--foreground) / 0.04) 1px, transparent 1px);
|
||||
background-size: 56px 56px;
|
||||
-webkit-mask-image: radial-gradient(ellipse 90% 64% at 50% 0%, black 30%, transparent 75%);
|
||||
mask-image: radial-gradient(ellipse 90% 64% at 50% 0%, black 30%, transparent 75%);
|
||||
}
|
||||
|
||||
.grain {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
|
||||
background-size: 160px 160px;
|
||||
opacity: 0.028;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
.dark .grain {
|
||||
opacity: 0.06;
|
||||
}
|
||||
|
||||
[data-ambiance="off"] .aurora,
|
||||
[data-ambiance="off"] .ambient-grid,
|
||||
[data-ambiance="off"] .grain {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes aurora-drift-1 {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(10vw, 8vh, 0) scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes aurora-drift-2 {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0) scale(1.1) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(-8vw, 12vh, 0) scale(0.95) rotate(20deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes aurora-drift-3 {
|
||||
from {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
to {
|
||||
transform: translate3d(-10vw, -8vh, 0) scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Motion: entrance choreography
|
||||
* ------------------------------------------------------------------------- */
|
||||
@keyframes rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.anim-rise {
|
||||
animation: rise 0.16s cubic-bezier(0.22, 0.61, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.stagger > * {
|
||||
animation: rise 0.16s cubic-bezier(0.22, 0.61, 0.36, 1) both;
|
||||
}
|
||||
|
||||
.stagger > *:nth-child(1) {
|
||||
animation-delay: 0.02s;
|
||||
}
|
||||
.stagger > *:nth-child(2) {
|
||||
animation-delay: 0.03s;
|
||||
}
|
||||
.stagger > *:nth-child(3) {
|
||||
animation-delay: 0.05s;
|
||||
}
|
||||
.stagger > *:nth-child(4) {
|
||||
animation-delay: 0.07s;
|
||||
}
|
||||
.stagger > *:nth-child(5) {
|
||||
animation-delay: 0.08s;
|
||||
}
|
||||
.stagger > *:nth-child(6) {
|
||||
animation-delay: 0.09s;
|
||||
}
|
||||
.stagger > *:nth-child(7) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.stagger > *:nth-child(8) {
|
||||
animation-delay: 0.11s;
|
||||
}
|
||||
.stagger > *:nth-child(9) {
|
||||
animation-delay: 0.12s;
|
||||
}
|
||||
.stagger > *:nth-child(10) {
|
||||
animation-delay: 0.13s;
|
||||
}
|
||||
.stagger > *:nth-child(n + 11) {
|
||||
animation-delay: 0.14s;
|
||||
}
|
||||
Reference in New Issue
Block a user