@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; }