055d682167
All checks were successful
Build Docker Image / build (push) Successful in 5m41s
Three-tier glass system (glass-underlay, glass-capsule, glass-chip), pill-glass capsules with inner shine for header nav pills, two-layer header backdrop with fade mask, solid white left panel and juicy rounded-t-3xl bottom sheet for map interactions, bold/black headings throughout.
206 lines
6.7 KiB
CSS
206 lines
6.7 KiB
CSS
@import "tailwindcss";
|
|
@plugin "daisyui";
|
|
|
|
@plugin "daisyui/theme" {
|
|
name: "cupcake";
|
|
default: true;
|
|
prefersdark: false;
|
|
color-scheme: "light";
|
|
--color-base-100: oklch(97.788% 0.004 56.375);
|
|
--color-base-200: oklch(93.982% 0.007 61.449);
|
|
--color-base-300: oklch(91.586% 0.006 53.44);
|
|
--color-base-content: oklch(23.574% 0.066 313.189);
|
|
--color-primary: oklch(85% 0.138 181.071);
|
|
--color-primary-content: oklch(43% 0.078 188.216);
|
|
--color-secondary: oklch(89% 0.061 343.231);
|
|
--color-secondary-content: oklch(45% 0.187 3.815);
|
|
--color-accent: oklch(90% 0.076 70.697);
|
|
--color-accent-content: oklch(47% 0.157 37.304);
|
|
--color-neutral: oklch(27% 0.006 286.033);
|
|
--color-neutral-content: oklch(92% 0.004 286.32);
|
|
--color-info: oklch(68% 0.169 237.323);
|
|
--color-info-content: oklch(29% 0.066 243.157);
|
|
--color-success: oklch(69% 0.17 162.48);
|
|
--color-success-content: oklch(26% 0.051 172.552);
|
|
--color-warning: oklch(79% 0.184 86.047);
|
|
--color-warning-content: oklch(28% 0.066 53.813);
|
|
--color-error: oklch(64% 0.246 16.439);
|
|
--color-error-content: oklch(27% 0.105 12.094);
|
|
--radius-selector: 2rem;
|
|
--radius-field: 2rem;
|
|
--radius-box: 2rem;
|
|
--size-selector: 0.3125rem;
|
|
--size-field: 0.3125rem;
|
|
--border: 0.5px;
|
|
--depth: 1;
|
|
--noise: 0;
|
|
}
|
|
|
|
@layer components {
|
|
/* ── Three-tier glass system (Apple-style glassmorphism) ── */
|
|
|
|
/* Tier 1 — lightest underlay, large panels / sidebars */
|
|
.glass-underlay {
|
|
background: rgba(255, 255, 255, 0.34);
|
|
box-shadow:
|
|
0 16px 44px rgba(24, 20, 12, 0.11),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
}
|
|
|
|
/* Tier 2 — medium capsule, nav pills / search bar */
|
|
.glass-capsule {
|
|
background: rgba(255, 255, 255, 0.56);
|
|
box-shadow:
|
|
0 8px 24px rgba(24, 20, 12, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.56);
|
|
backdrop-filter: blur(22px);
|
|
-webkit-backdrop-filter: blur(22px);
|
|
}
|
|
|
|
/* Tier 3 — densest chip, small tags / badges */
|
|
.glass-chip {
|
|
background: rgba(255, 255, 255, 0.72);
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
|
|
/* Legacy aliases — keep backward compat during transition */
|
|
.glass-soft {
|
|
background: rgba(255, 255, 255, 0.34);
|
|
box-shadow:
|
|
0 16px 44px rgba(24, 20, 12, 0.11),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.4);
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.glass-bright {
|
|
background: rgba(255, 255, 255, 0.56);
|
|
box-shadow:
|
|
0 8px 24px rgba(24, 20, 12, 0.1),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.56);
|
|
backdrop-filter: blur(22px);
|
|
-webkit-backdrop-filter: blur(22px);
|
|
}
|
|
}
|
|
|
|
/* ── Header glass: two-layer Apple-style glassmorphism ── */
|
|
|
|
.header-glass {
|
|
background: transparent;
|
|
}
|
|
|
|
/* Layer 1: frosted bar backdrop — fades to transparent at bottom */
|
|
.header-glass-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
height: 350%;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
-webkit-backdrop-filter: blur(16px) saturate(180%);
|
|
backdrop-filter: blur(16px) saturate(180%);
|
|
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 65%, transparent 100%);
|
|
mask-image: linear-gradient(to bottom, black 0%, black 20%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 65%, transparent 100%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Layer 2: capsule pills — denser frosted glass with inner shine */
|
|
.pill-glass {
|
|
position: relative;
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 1px solid rgba(255, 255, 255, 0.16);
|
|
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
|
backdrop-filter: blur(20px) saturate(180%);
|
|
box-shadow:
|
|
0 8px 32px rgba(31, 38, 135, 0.2),
|
|
inset 0 4px 20px rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Inner shine highlight — liquid glass refraction */
|
|
.pill-glass::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
box-shadow:
|
|
inset -10px -8px 0 -11px rgba(255, 255, 255, 1),
|
|
inset 0 -9px 0 -8px rgba(255, 255, 255, 1);
|
|
opacity: 0.6;
|
|
filter: blur(1px) brightness(115%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
@plugin "daisyui/theme" {
|
|
name: "silk";
|
|
default: false;
|
|
prefersdark: false;
|
|
color-scheme: "light";
|
|
--color-base-100: oklch(97% 0.0035 67.78);
|
|
--color-base-200: oklch(95% 0.0081 61.42);
|
|
--color-base-300: oklch(90% 0.0081 61.42);
|
|
--color-base-content: oklch(40% 0.0081 61.42);
|
|
--color-primary: oklch(23.27% 0.0249 284.3);
|
|
--color-primary-content: oklch(94.22% 0.2505 117.44);
|
|
--color-secondary: oklch(23.27% 0.0249 284.3);
|
|
--color-secondary-content: oklch(73.92% 0.2135 50.94);
|
|
--color-accent: oklch(23.27% 0.0249 284.3);
|
|
--color-accent-content: oklch(88.92% 0.2061 189.9);
|
|
--color-neutral: oklch(20% 0 0);
|
|
--color-neutral-content: oklch(80% 0.0081 61.42);
|
|
--color-info: oklch(80.39% 0.1148 241.68);
|
|
--color-info-content: oklch(30.39% 0.1148 241.68);
|
|
--color-success: oklch(83.92% 0.0901 136.87);
|
|
--color-success-content: oklch(23.92% 0.0901 136.87);
|
|
--color-warning: oklch(83.92% 0.1085 80);
|
|
--color-warning-content: oklch(43.92% 0.1085 80);
|
|
--color-error: oklch(75.1% 0.1814 22.37);
|
|
--color-error-content: oklch(35.1% 0.1814 22.37);
|
|
--radius-selector: 2rem;
|
|
--radius-field: 1rem;
|
|
--radius-box: 1rem;
|
|
--size-selector: 0.28125rem;
|
|
--size-field: 0.28125rem;
|
|
--border: 0.5px;
|
|
--depth: 0;
|
|
--noise: 0;
|
|
}
|
|
|
|
@plugin "daisyui/theme" {
|
|
name: "night";
|
|
default: false;
|
|
prefersdark: true;
|
|
color-scheme: "dark";
|
|
--color-base-100: oklch(20.768% 0.039 265.754);
|
|
--color-base-200: oklch(19.314% 0.037 265.754);
|
|
--color-base-300: oklch(17.86% 0.034 265.754);
|
|
--color-base-content: oklch(84.153% 0.007 265.754);
|
|
--color-primary: oklch(75.351% 0.138 232.661);
|
|
--color-primary-content: oklch(15.07% 0.027 232.661);
|
|
--color-secondary: oklch(68.011% 0.158 276.934);
|
|
--color-secondary-content: oklch(13.602% 0.031 276.934);
|
|
--color-accent: oklch(72.36% 0.176 350.048);
|
|
--color-accent-content: oklch(14.472% 0.035 350.048);
|
|
--color-neutral: oklch(27.949% 0.036 260.03);
|
|
--color-neutral-content: oklch(85.589% 0.007 260.03);
|
|
--color-info: oklch(68.455% 0.148 237.251);
|
|
--color-info-content: oklch(0% 0 0);
|
|
--color-success: oklch(78.452% 0.132 181.911);
|
|
--color-success-content: oklch(15.69% 0.026 181.911);
|
|
--color-warning: oklch(83.242% 0.139 82.95);
|
|
--color-warning-content: oklch(16.648% 0.027 82.95);
|
|
--color-error: oklch(71.785% 0.17 13.118);
|
|
--color-error-content: oklch(14.357% 0.034 13.118);
|
|
--radius-selector: 1rem;
|
|
--radius-field: 1rem;
|
|
--radius-box: 1rem;
|
|
--size-selector: 0.25rem;
|
|
--size-field: 0.25rem;
|
|
--border: 0.5px;
|
|
--depth: 0;
|
|
--noise: 0;
|
|
}
|