<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-amber-100 to-amber-200 dark:from-stone-900 dark:to-stone-800 font-sans min-h-screen">
<div class="max-w-6xl mx-auto rounded-3xl shadow-2xl p-6 sm:p-8 md:p-10 bg-gradient-to-br from-orange-200 to-amber-300 dark:from-stone-700 dark:to-stone-900 border-4 border-amber-400 dark:border-stone-600 transform perspective-1000 -rotate-x-3 -rotate-y-2 translate-z-10">
<!-- Title Bar - Mimics a metallic plate -->
<div class="flex items-center justify-between p-4 sm:p-5 md:p-6 mb-8 rounded-xl bg-gradient-to-r from-amber-500 to-orange-600 dark:from-stone-600 dark:to-stone-700 shadow-inner-xl border border-amber-600 dark:border-stone-500 relative transform -rotate-x-1 translate-z-5">
<h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-stone-900 dark:text-stone-100 drop-shadow-lg [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
<span class="relative inline-block">
<span class="absolute -inset-1 bg-amber-700 dark:bg-stone-800 rounded-full blur-sm"></span>
<span class="relative text-stone-100 dark:text-amber-300">Love Compass</span>
</span>
<br class="sm:hidden"/> <span class="text-amber-800 dark:text-amber-200">V 2.0</span>
</h1>
<div class="flex space-x-2 sm:space-x-4">
<button class="p-3 rounded-full bg-amber-400 dark:bg-stone-500 shadow-md transform hover:scale-110 active:scale-95 transition-all duration-200 relative group">
<svg class="w-6 h-6 text-stone-800 dark:text-stone-300 group-hover:animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.515-1.332 1.947-2.186 3.488-2.186 2.502 0 4.296 2.213 4.296 4.697 0 1.229-.567 2.458-1.57 3.518L9.504 18.25c-.272.775-.417.817-.417.817H7.72V15.5l5.207-6.096L9 2.5 10.325 4.317zM20 7.5v9a2 2 0 01-2 2H6a2 2 0 01-2-2V7.5a2 2 0 012-2h12a2 2 0 012 2z"></path></svg>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-1 px-2 text-xs rounded-lg bg-stone-800 dark:bg-stone-200 text-white dark:text-stone-800 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Settings</span>
</button>
<button class="p-3 rounded-full bg-amber-400 dark:bg-stone-500 shadow-md transform hover:scale-110 active:scale-95 transition-all duration-200 relative group">
<svg class="w-6 h-6 text-stone-800 dark:text-stone-300 group-hover:animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9.247a3.75 3.75 0 100 5.506 3.75 3.75 0 000-5.506zM20.941 11H3.059L1.5 12.5 3.059 14H20.941L22.5 12.5 20.941 11zM12 21.75a9.75 9.75 0 110-19.5 9.75 9.75 0 010 19.5z"></path></svg>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-1 px-2 text-xs rounded-lg bg-stone-800 dark:bg-stone-200 text-white dark:text-stone-800 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Info</span>
</button>
</div>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Infographic Card 1: Connection Meter -->
<div class="col-span-1 rounded-2xl p-6 bg-gradient-to-br from-amber-300 to-orange-400 dark:from-stone-800 dark:to-stone-900 shadow-xl border-4 border-amber-400 dark:border-stone-700 transform hover:scale-105 active:scale-98 transition-transform duration-300 relative overflow-hidden group">
<div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-amber-500 dark:bg-stone-600 opacity-30 transform rotate-45"></div>
<div class="absolute -bottom-10 -left-10 w-40 h-40 rounded-full bg-orange-500 dark:bg-stone-700 opacity-30 transform -rotate-45"></div>
<h2 class="text-2xl font-bold mb-4 text-stone-800 dark:text-stone-100 relative z-10">Connection Meter</h2>
<p class="text-sm text-stone-700 dark:text-stone-300 mb-6 relative z-10">How well do you connect with others?</p>
<div class="relative flex items-center justify-center mb-6 z-10">
<div class="w-36 h-36 rounded-full bg-gradient-to-br from-amber-400 to-orange-500 dark:from-stone-600 dark:to-stone-700 shadow-inner-xl p-2">
<div class="w-full h-full rounded-full bg-stone-100 dark:bg-stone-900 flex items-center justify-center relative">
<div class="absolute inset-0 rounded-full pointer-events-none border-4 border-amber-600 dark:border-stone-400 border-dashed animate-spin-slow"></div>
<div class="relative z-10 text-5xl font-extrabold text-orange-700 dark:text-orange-400 drop-shadow-lg [text-shadow:_0_2px_0_rgb(0_0_0_/_30%)]">75%</div>
<div class="absolute w-1 h-16 bg-red-500 origin-bottom rounded-full transform rotate-[135deg] animate-pulse-light"></div>
</div>
</div>
</div>
<div class="flex justify-around text-center text-sm font-semibold text-stone-700 dark:text-stone-300 relative z-10">
<div>
<span class="block text-xs uppercase text-stone-600 dark:text-stone-400">Matches</span>
<span class="text-lg font-bold text-orange-700 dark:text-orange-400">120</span>
</div>
<div>
<span class="block text-xs uppercase text-stone-600 dark:text-stone-400">Engagements</span>
<span class="text-lg font-bold text-orange-700 dark:text-orange-400">88</span>
</div>
<div>
<span class="block text-xs uppercase text-stone-600 dark:text-stone-400">Conversations</span>
<span class="text-lg font-bold text-orange-700 dark:text-orange-400">65</span>
</div>
</div>
</div>
<!-- Infographic Card 2: Interest Affinity Dial -->
<div class="col-span-1 rounded-2xl p-6 bg-gradient-to-br from-amber-300 to-orange-400 dark:from-stone-800 dark:to-stone-900 shadow-xl border-4 border-amber-400 dark:border-stone-700 transform hover:scale-105 active:scale-98 transition-transform duration-300 relative overflow-hidden group">
<div class="absolute inset-0 bg-stone-100 dark:bg-stone-900 opacity-20 transform -skew-y-6 -skew-x-3 rotate-12 group-hover:rotate-0 transition-transform duration-500"></div>
<h2 class="text-2xl font-bold mb-4 text-stone-800 dark:text-stone-100 relative z-10">Interest Affinity</h2>
<p class="text-sm text-stone-700 dark:text-stone-300 mb-6 relative z-10">Discover shared passions and hobbies.</p>
<div class="relative flex items-center justify-center mb-6 z-10">
<div class="w-40 h-40 rounded-full bg-gradient-to-br from-stone-200 to-stone-400 dark:from-stone-600 dark:to-stone-800 shadow-inner p-3 flex items-center justify-center">
<div class="w-full h-full rounded-full bg-stone-300 dark:bg-stone-700 relative">
<div class="absolute inset-0 rounded-full border-4 border-stone-500 dark:border-stone-400"></div>
<div class="absolute z-10 text-center w-full h-full flex flex-col justify-center items-center pointer-events-none">
<span class="text-4xl font-extrabold text-orange-700 dark:text-orange-400 drop-shadow-lg [text-shadow:_0_2px_0_rgb(0_0_0_/_30%)]">8/10</span>
<span class="text-sm text-stone-700 dark:text-stone-300">Avg Score</span>
</div>
<div class="absolute top-1/2 left-1/2 w-2 h-2 bg-red-600 rounded-full -translate-x-1/2 -translate-y-1/2 z-20 shadow-lg"></div>
<div class="absolute top-1/2 left-1/2 w-1 h-1/2 bg-red-600 origin-[bottom_center] transform -translate-x-1/2 -translate-y-1/2 rotate-[120deg] z-10 rounded-full shadow-md"></div>
<div class="absolute inset-0 rounded-full animate-rotate-slow">
<!-- Dial markers -->
<div class="w-2 h-2 bg-stone-500 dark:bg-stone-400 rounded-full absolute top-2 left-1/2 -translate-x-1/2"></div>
<div class="w-2 h-2 bg-stone-500 dark:bg-stone-400 rounded-full absolute bottom-2 left-1/2 -translate-x-1/2"></div>
<div class="w-2 h-2 bg-stone-500 dark:bg-stone-400 rounded-full absolute left-2 top-1/2 -translate-y-1/2"></div>
<div class="w-2 h-2 bg-stone-500 dark:bg-stone-400 rounded-full absolute right-2 top-1/2 -translate-y-1/2"></div>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-3 text-sm text-stone-700 dark:text-stone-300 relative z-10">
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-green-500 dark:bg-green-400 shadow-md"></span>
<span>Music Fans</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-blue-500 dark:bg-blue-400 shadow-md"></span>
<span>Movie Buffs</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400 shadow-md"></span>
<span>Adventure Seekers</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-red-500 dark:bg-red-400 shadow-md"></span>
<span>Foodies</span>
</div>
</div>
</div>
<!-- Infographic Card 3: Personality Traits Board -->
<div class="col-span-1 rounded-2xl p-6 bg-gradient-to-br from-amber-300 to-orange-400 dark:from-stone-800 dark:to-stone-900 shadow-xl border-4 border-amber-400 dark:border-stone-700 transform hover:scale-105 active:scale-98 transition-transform duration-300 relative overflow-hidden group">
<div class="absolute -top-20 -left-20 w-40 h-40 rounded-full bg-amber-400 dark:bg-stone-700 opacity-20 transform scale-150"></div>
<h2 class="text-2xl font-bold mb-4 text-stone-800 dark:text-stone-100 relative z-10">Personality Traits</h2>
<p class="text-sm text-stone-700 dark:text-stone-300 mb-6 relative z-10">Your unique qualities at a glance.</p>
<div class="space-y-4 relative z-10">
<div class="p-3 rounded-lg bg-emerald-300 dark:bg-emerald-600 shadow-inset flex items-center justify-between transform hover:scale-102 hover:shadow-lg transition-transform duration-200">
<span class="font-medium text-emerald-800 dark:text-emerald-100">Adventurous</span>
<span class="text-emerald-700 dark:text-emerald-200 text-lg font-bold">★★★★★</span>
</div>
<div class="p-3 rounded-lg bg-orange-300 dark:bg-orange-600 shadow-inset flex items-center justify-between transform hover:scale-102 hover:shadow-lg transition-transform duration-200">
<span class="font-medium text-orange-800 dark:text-orange-100">Humorous</span>
<span class="text-orange-700 dark:text-orange-200 text-lg font-bold">★★★★☆</span>
</div>
<div class="p-3 rounded-lg bg-blue-300 dark:bg-blue-600 shadow-inset flex items-center justify-between transform hover:scale-102 hover:shadow-lg transition-transform duration-200">
<span class="font-medium text-blue-800 dark:text-blue-100">Optimistic</span>
<span class="text-blue-700 dark:text-blue-200 text-lg font-bold">★★★★★</span>
</div>
<div class="p-3 rounded-lg bg-purple-300 dark:bg-purple-600 shadow-inset flex items-center justify-between transform hover:scale-102 hover:shadow-lg transition-transform duration-200">
<span class="font-medium text-purple-800 dark:text-purple-100">Thoughtful</span>
<span class="text-purple-700 dark:text-purple-200 text-lg font-bold">★★★☆☆</span>
</div>
</div>
</div>
<!-- Infographic Card 4: Compatibility Graph (full width on small screens) -->
<div class="col-span-1 md:col-span-2 rounded-2xl p-6 bg-gradient-to-br from-amber-300 to-orange-400 dark:from-stone-800 dark:to-stone-900 shadow-xl border-4 border-amber-400 dark:border-stone-700 transform hover:scale-105 active:scale-98 transition-transform duration-300 relative overflow-hidden group">
<div class="absolute -bottom-16 -right-16 w-60 h-60 rounded-full bg-red-400 dark:bg-red-700 opacity-20 transform scale-125"></div>
<h2 class="text-2xl font-bold mb-4 text-stone-800 dark:text-stone-100 relative z-10">Compatibility Flow</h2>
<p class="text-sm text-stone-700 dark:text-stone-300 mb-6 relative z-10">Visualizing your strongest connections.</p>
<div class="relative h-64 bg-stone-100 dark:bg-stone-900 rounded-lg p-4 shadow-inner-lg border-2 border-stone-300 dark:border-stone-700 relative z-10">
<!-- Graph area - simple visual representation -->
<div class="w-full h-full flex flex-col justify-end items-start">
<div class="flex w-full items-end justify-around h-full">
<div class="flex flex-col items-center">
<div class="w-8 lg:w-12 h-20 bg-red-500 dark:bg-red-400 rounded-t-full shadow-lg border-2 border-red-600 dark:border-red-500 transform hover:scale-y-110 transition-transform origin-bottom animate-grow"></div>
<span class="mt-2 text-xs text-stone-700 dark:text-stone-300 font-semibold">Trust</span>
</div>
<div class="flex flex-col items-center">
<div class="w-8 lg:w-12 h-32 bg-blue-500 dark:bg-blue-400 rounded-t-full shadow-lg border-2 border-blue-600 dark:border-blue-500 transform hover:scale-y-110 transition-transform origin-bottom animate-grow delay-100"></div>
<span class="mt-2 text-xs text-stone-700 dark:text-stone-300 font-semibold">Humor</span>
</div>
<div class="flex flex-col items-center">
<div class="w-8 lg:w-12 h-24 bg-green-500 dark:bg-green-400 rounded-t-full shadow-lg border-2 border-green-600 dark:border-green-500 transform hover:scale-y-110 transition-transform origin-bottom animate-grow delay-200"></div>
<span class="mt-2 text-xs text-stone-700 dark:text-stone-300 font-semibold">Interests</span>
</div>
<div class="flex flex-col items-center">
<div class="w-8 lg:w-12 h-40 bg-purple-500 dark:bg-purple-400 rounded-t-full shadow-lg border-2 border-purple-600 dark:border-purple-500 transform hover:scale-y-110 transition-transform origin-bottom animate-grow delay-300"></div>
<span class="mt-2 text-xs text-stone-700 dark:text-stone-300 font-semibold">Values</span>
</div>
</div>
</div>
<!-- Grid lines for graph -->
<div class="absolute inset-0 border-r border-b border-stone-200 dark:border-stone-800 pointer-events-none"></div>
<div class="absolute inset-0 border-l border-t border-stone-200 dark:border-stone-800 pointer-events-none"></div>
</div>
</div>
<!-- Infographic Card 5: Top Matched Profiles -->
<div class="col-span-1 rounded-2xl p-6 bg-gradient-to-br from-amber-300 to-orange-400 dark:from-stone-800 dark:to-stone-900 shadow-xl border-4 border-amber-400 dark:border-stone-700 transform hover:scale-105 active:scale-98 transition-transform duration-300 relative overflow-hidden group">
<div class="absolute -top-10 -right-10 w-40 h-40 bg-purple-400 dark:bg-purple-700 opacity-20 rounded-full animate-pulse-slow"></div>
<h2 class="text-2xl font-bold mb-4 text-stone-800 dark:text-stone-100 relative z-10">Top Matched Profiles</h2>
<p class="text-sm text-stone-700 dark:text-stone-300 mb-6 relative z-10">See who you're most compatible with.</p>
<div class="space-y-4 relative z-10">
<a href="#" class="flex items-center gap-4 p-3 rounded-xl bg-orange-200 dark:bg-stone-700 shadow-inset border border-orange-300 dark:border-stone-600 transform hover:scale-102 hover:shadow-lg transition-transform duration-200 group">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Profile 1" class="w-16 h-16 rounded-full border-4 border-amber-500 dark:border-stone-500 outline outline-2 outline-offset-2 outline-amber-700 dark:outline-orange-400 shadow-md group-hover:scale-105 transition-transform object-cover">
<div>
<h3 class="text-lg font-bold text-stone-800 dark:text-stone-100 drop-shadow-md">Sarah L.</h3>
<p class="text-sm text-stone-700 dark:text-stone-300">92% Match - Traveler, Artist</p>
</div>
<svg class="ml-auto w-6 h-6 text-amber-700 dark:text-orange-400 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
<a href="#" class="flex items-center gap-4 p-3 rounded-xl bg-orange-200 dark:bg-stone-700 shadow-inset border border-orange-300 dark:border-stone-600 transform hover:scale-102 hover:shadow-lg transition-transform duration-200 group">
<img src="https://randomuser.me/api/portraits/men/25.jpg" alt="Profile 2" class="w-16 h-16 rounded-full border-4 border-amber-500 dark:border-stone-500 outline outline-2 outline-offset-2 outline-amber-700 dark:outline-orange-400 shadow-md group-hover:scale-105 transition-transform object-cover">
<div>
<h3 class="text-lg font-bold text-stone-800 dark:text-stone-100 drop-shadow-md">Mark D.</h3>
<p class="text-sm text-stone-700 dark:text-stone-300">88% Match - Gamer, Coder</p>
</div>
<svg class="ml-auto w-6 h-6 text-amber-700 dark:text-orange-400 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
</div>
</div>
<!-- Footer Control Panel - Mimics a metallic plate with buttons -->
<div class="mt-8 p-4 sm:p-5 md:p-6 rounded-xl bg-gradient-to-r from-amber-500 to-orange-600 dark:from-stone-600 dark:to-stone-700 shadow-inner-xl border border-amber-600 dark:border-stone-500 flex flex-wrap justify-center gap-4 relative transform rotate-x-2 translate-z-5">
<button class="p-3 sm:p-4 rounded-full bg-amber-400 dark:bg-stone-500 shadow-md transform hover:scale-110 active:scale-95 transition-all duration-200 relative group">
<svg class="w-7 h-7 text-stone-800 dark:text-stone-300 group-hover:animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-1 px-2 text-xs rounded-lg bg-stone-800 dark:bg-stone-200 text-white dark:text-stone-800 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Add Data</span>
</button>
<button class="p-3 sm:p-4 rounded-full bg-amber-400 dark:bg-stone-500 shadow-md transform hover:scale-110 active:scale-95 transition-all duration-200 relative group">
<svg class="w-7 h-7 text-stone-800 dark:text-stone-300 group-hover:rotate-180 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582M15 15h5v-.582m-9-3.5a9 9 0 110-18 9 9 0 010 18z"></path></svg>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-1 px-2 text-xs rounded-lg bg-stone-800 dark:bg-stone-200 text-white dark:text-stone-800 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Refresh</span>
</button>
<button class="p-3 sm:p-4 rounded-full bg-amber-400 dark:bg-stone-500 shadow-md transform hover:scale-110 active:scale-95 transition-all duration-200 relative group">
<svg class="w-7 h-7 text-stone-800 dark:text-stone-300 group-hover:animate-ping-once" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8H7m14 0a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v2zm-2 4H7m4 2a2 2 0 01-2-2V8a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2z"></path></svg>
<span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-1 px-2 text-xs rounded-lg bg-stone-800 dark:bg-stone-200 text-white dark:text-stone-800 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Share Info</span>
</button>
</div>
</div>
</div>
<style>
/* Custom Keyframes for Skeuomorphism */
@keyframes shadow-pulse {
0% { filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.4)); }
50% { filter: drop-shadow(0 0 15px rgba(255, 165, 0, 0.8)); }
100% { filter: drop-shadow(0 0 5px rgba(255, 165, 0, 0.4)); }
}
.animate-shadow-pulse { animation: shadow-pulse 3s infinite ease-in-out; }
@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 10s linear infinite; }
@keyframes pulse-light {
0% { transform: rotate(135deg) scale(0.9); opacity: 0.8; }
50% { transform: rotate(135deg) scale(1.1); opacity: 1; }
100% { transform: rotate(135deg) scale(0.9); opacity: 0.8; }
}
.animate-pulse-light { animation: pulse-light 2s infinite ease-in-out; }
@keyframes rotate-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.animate-rotate-slow { animation: rotate-slow 20s linear infinite; }
@keyframes grow {
0% { transform: scaleY(0); opacity: 0; }
100% { transform: scaleY(1); opacity: 1; }
}
.animate-grow { animation: grow 0.5s ease-out forwards; }
@keyframes ping-once {
0% { transform: scale(1); opacity: 1; }
75%, 100% { transform: scale(2); opacity: 0; }
}
.group-hover\:animate-ping-once:hover > svg { animation: ping-once 1s cubic-bezier(0, 0, 0.2, 1); }
/* Custom shadow-inner-xl for deep inset look */
.shadow-inner-xl {
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.2),
inset 0 -2px 4px 0 rgba(255, 255, 255, 0.7),
inset 0 4px 8px 0 rgba(0, 0, 0, 0.1),
inset 0 -4px 8px 0 rgba(255, 255, 255, 0.4);
}
.dark .shadow-inner-xl {
box-shadow: inset 0 2px 4px 0 rgba(255, 255, 255, 0.1),
inset 0 -2px 4px 0 rgba(0, 0, 0, 0.6),
inset 0 4px 8px 0 rgba(255, 255, 255, 0.05),
inset 0 -4px 8px 0 rgba(0, 0, 0, 0.3);
}
/* Custom shadow-inset for a softer inset look */
.shadow-inset {
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1),
inset 0 -1px 2px 0 rgba(255, 255, 255, 0.5);
}
.dark .shadow-inset {
box-shadow: inset 0 1px 2px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 2px 0 rgba(0, 0, 0, 0.4);
}
/* Skew transforms for the overall container to give angled feel */
.perspective-1000 {
perspective: 1000px;
}
.rotate-x-3 {
transform: rotateX(3deg);
}
.rotate-y-2 {
transform: rotateY(2deg);
}
.translate-z-10 {
transform: translateZ(10px);
}
.rotate-x-2 {
transform: rotateX(2deg);
}
.-rotate-x-3 {
transform: rotateX(-3deg);
}
.-rotate-y-2 {
transform: rotateY(-2deg);
}
.-rotate-x-1 {
transform: rotateX(-1deg);
}
/* Remove outline on focus from buttons for cleaner skeuomorphic look, ensure accessibility with shadow/scale */
button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.5), inset 0 0 0 1px rgba(255, 165, 0, 0.8);
}
.dark button:focus-visible {
box-shadow: 0 0 0 3px rgba(120, 120, 120, 0.5), inset 0 0 0 1px rgba(120, 120, 120, 0.8);
}
</style>
