/* ================================================================ istay.space — Global Stylesheet Extends Tailwind (twind) with custom scrollbar, smooth scroll, focus-visible ring, and typography baseline. ================================================================ */ @tailwind base; @tailwind components; @tailwind utilities; /* --- Google Fonts (loaded via _app.tsx ) --- */ /* Plus Jakarta Sans: 300 400 500 600 700 800 */ /* --- Smooth Scroll & Box Sizing --- */ html { scroll-behavior: smooth; box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; } h1, h2, h3, h4, h5, h6, .font-outfit { font-family: 'Outfit', sans-serif; } *, *::before, *::after { box-sizing: inherit; } /* --- Selection Color --- */ ::selection { background-color: #4ade80; /* mint-400 */ color: #000000; } /* --- Modern Premium Utilities --- */ .premium-border { border: 1px solid rgba(0, 0, 0, 0.08); } .premium-shadow { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.04); } .premium-shadow-lg { box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12), 0 8px 20px -10px rgba(0, 0, 0, 0.05); } .premium-card { @apply bg-white rounded-[1.5rem] border border-gray-100 shadow-premium transition-all duration-300; } .premium-card:hover { @apply shadow-premium-hover -translate-y-1; } .premium-btn { @apply px-8 py-4 font-semibold rounded-2xl transition-all duration-300 active:scale-[0.98]; } /* Redefine Brutal classes for legacy support with softer look */ .brutal-border { border: 1.5px solid #111827; } .brutal-shadow { box-shadow: 4px 4px 0px 0px #111827; } .brutal-shadow-lg { box-shadow: 6px 6px 0px 0px #111827; } .brutal-card { @apply brutal-border bg-white rounded-3xl transition-all duration-300; } .brutal-card:hover { @apply -translate-x-0.5 -translate-y-0.5 shadow-[6px_6px_0px_0px_#111827]; } /* --- Custom Scrollbar (Modern) --- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; /* gray-300 */ border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; /* gray-400 */ } /* --- Focus Visible Ring --- */ :focus-visible { outline: 2px solid #14b8a6; outline-offset: 3px; border-radius: 8px; } /* --- Range Slider Styling --- */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: #e5e7eb; /* gray-200 */ cursor: pointer; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #14b8a6; /* brand-500 */ border: 3px solid #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); cursor: grab; transition: all 0.2s ease; } input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); } /* --- Legal Page Prose --- */ .prose-legal h2 { @apply text-xl font-bold text-gray-900 mt-8 mb-4; } .prose-legal p { @apply text-gray-600 leading-relaxed mb-4; } .prose-legal ul { @apply list-disc pl-6 text-gray-600 leading-relaxed mb-4; } .prose-legal li { @apply mb-2; } /* --- Animations --- */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 5s ease-in-out infinite; } /* Noise texture overlay (Softened) */ .noise-bg::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; } .glass-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.3); } .grad-text { @apply bg-clip-text text-transparent bg-gradient-to-r from-emerald-500 to-teal-600; }