129 lines
2.8 KiB
CSS
129 lines
2.8 KiB
CSS
@import "tailwindcss";
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
|
|
|
|
/* ------------------------------------------------ */
|
|
/* Base Typography & Rendering Improvements */
|
|
/* ------------------------------------------------ */
|
|
|
|
html {
|
|
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
|
|
}
|
|
|
|
body {
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
html, body {
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
/* ------------------------------------------------ */
|
|
/* Liquid Glass System */
|
|
/* ------------------------------------------------ */
|
|
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.62);
|
|
backdrop-filter: blur(22px) saturate(1.35);
|
|
-webkit-backdrop-filter: blur(22px) saturate(1.35);
|
|
border: 1px solid rgba(0, 0, 0, 0.07);
|
|
box-shadow:
|
|
0 22px 70px rgba(0, 0, 0, 0.08),
|
|
0 2px 12px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.glass-strong {
|
|
background: rgba(255, 255, 255, 0.72);
|
|
backdrop-filter: blur(26px) saturate(1.45);
|
|
-webkit-backdrop-filter: blur(26px) saturate(1.45);
|
|
border: 1px solid rgba(0, 0, 0, 0.08);
|
|
box-shadow:
|
|
0 28px 90px rgba(0, 0, 0, 0.10),
|
|
0 3px 16px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
|
|
/* ------------------------------------------------ */
|
|
/* Specular Highlight Overlay (Apple-like sheen) */
|
|
/* ------------------------------------------------ */
|
|
|
|
.specular {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.specular::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -40%;
|
|
background: radial-gradient(
|
|
circle at 30% 20%,
|
|
rgba(255, 255, 255, 0.65),
|
|
rgba(255, 255, 255, 0.00) 55%
|
|
);
|
|
transform: rotate(-8deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.specular::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(255, 255, 255, 0.18),
|
|
rgba(255, 255, 255, 0.00) 30%,
|
|
rgba(0, 0, 0, 0.02)
|
|
);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hide scrollbars for gallery */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* ------------------------------------------------ */
|
|
/* Optional Subtle Noise Layer (if used) */
|
|
/* ------------------------------------------------ */
|
|
|
|
.noise-overlay {
|
|
pointer-events: none;
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.06;
|
|
mix-blend-mode: soft-light;
|
|
background-image: url("/noise.png");
|
|
}
|
|
|
|
/* --- Force single (browser) scrollbar only --- */
|
|
html,
|
|
body {
|
|
height: auto !important;
|
|
min-height: 100% !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
body {
|
|
overflow-x: hidden !important;
|
|
}
|
|
|
|
/* Kill any accidental nested scroll containers */
|
|
#__next,
|
|
main,
|
|
[data-scroll-container="true"] {
|
|
overflow: visible !important;
|
|
height: auto !important;
|
|
max-height: none !important;
|
|
} |