mirror of
https://github.com/lukaszraczylo/beat-delivery-methodology.git
synced 2026-10-22 06:47:47 +00:00
538 lines
12 KiB
CSS
538 lines
12 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/* Ensure smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
/* Better touch targets on mobile */
|
|
button, a {
|
|
touch-action: manipulation;
|
|
}
|
|
|
|
/* Selection colors */
|
|
::selection {
|
|
@apply bg-blue-500/30 text-blue-900 dark:text-blue-100;
|
|
}
|
|
|
|
/* Improved focus visible for accessibility */
|
|
:focus-visible {
|
|
@apply outline-2 outline-offset-2 outline-blue-500;
|
|
}
|
|
|
|
.dark :focus-visible {
|
|
@apply outline-blue-400;
|
|
}
|
|
|
|
/* Skip link for accessibility */
|
|
.skip-link {
|
|
@apply sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded-lg;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-gray-100 dark:bg-gray-800;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-gray-300 dark:bg-gray-600 rounded-full;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-gray-400 dark:bg-gray-500;
|
|
}
|
|
|
|
/* Responsive base styles */
|
|
body {
|
|
@apply text-sm sm:text-base;
|
|
overflow-x: hidden;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Container that adapts to all screen sizes */
|
|
.container-responsive {
|
|
@apply w-full mx-auto px-4 sm:px-6 lg:px-8 xl:px-12 2xl:max-w-7xl 3xl:max-w-8xl 4xl:max-w-9xl;
|
|
}
|
|
|
|
/* Enhanced glass morphism */
|
|
.glass {
|
|
@apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-xl border border-white/30 dark:border-gray-700/50;
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.05),
|
|
0 2px 4px -2px rgba(0, 0, 0, 0.05),
|
|
inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.dark .glass {
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.3),
|
|
0 2px 4px -2px rgba(0, 0, 0, 0.2),
|
|
inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
/* Gradient text with animation */
|
|
.gradient-text {
|
|
@apply bg-clip-text text-transparent;
|
|
background-image: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #06b6d4 100%);
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 8s ease infinite;
|
|
}
|
|
|
|
.dark .gradient-text {
|
|
background-image: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #22d3ee 100%);
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
}
|
|
|
|
/* Modern shadow */
|
|
.shadow-modern {
|
|
box-shadow:
|
|
0 20px 25px -5px rgba(0, 0, 0, 0.08),
|
|
0 8px 10px -6px rgba(0, 0, 0, 0.05),
|
|
0 0 0 1px rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.dark .shadow-modern {
|
|
box-shadow:
|
|
0 20px 25px -5px rgba(0, 0, 0, 0.4),
|
|
0 8px 10px -6px rgba(0, 0, 0, 0.2),
|
|
0 0 0 1px rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
/* Primary button with enhanced effects */
|
|
.btn-primary {
|
|
@apply relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl font-semibold transition-all duration-300;
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(59, 130, 246, 0.3),
|
|
0 2px 4px -2px rgba(59, 130, 246, 0.2),
|
|
inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.btn-primary::before {
|
|
content: '';
|
|
@apply absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600 opacity-0 transition-opacity duration-300;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
@apply scale-105;
|
|
box-shadow:
|
|
0 10px 15px -3px rgba(59, 130, 246, 0.4),
|
|
0 4px 6px -4px rgba(59, 130, 246, 0.3),
|
|
inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.btn-primary:hover::before {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
.btn-primary:active {
|
|
@apply scale-100;
|
|
}
|
|
|
|
.btn-primary > * {
|
|
@apply relative z-10;
|
|
}
|
|
|
|
/* Secondary button */
|
|
.btn-secondary {
|
|
@apply glass text-gray-900 dark:text-gray-100 px-4 sm:px-6 py-2.5 sm:py-3 rounded-xl font-semibold transition-all duration-300;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
@apply scale-105;
|
|
box-shadow:
|
|
0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
0 4px 6px -4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.dark .btn-secondary:hover {
|
|
box-shadow:
|
|
0 10px 15px -3px rgba(0, 0, 0, 0.4),
|
|
0 4px 6px -4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Section titles - responsive */
|
|
.section-title {
|
|
@apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-3 sm:mb-4 tracking-tight;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.section-subtitle {
|
|
@apply text-base sm:text-lg md:text-xl text-gray-600 dark:text-gray-300 px-2 sm:px-0 leading-relaxed;
|
|
}
|
|
|
|
/* Enhanced card with 3D hover */
|
|
.card {
|
|
@apply glass p-4 sm:p-6 lg:p-8 rounded-2xl transition-all duration-500;
|
|
transform-style: preserve-3d;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.card:hover {
|
|
@apply -translate-y-1 sm:-translate-y-2;
|
|
box-shadow:
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.15),
|
|
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
|
|
}
|
|
|
|
.dark .card:hover {
|
|
box-shadow:
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05) inset;
|
|
}
|
|
|
|
/* Navigation link */
|
|
.nav-link {
|
|
@apply relative text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 font-medium transition-colors duration-200;
|
|
}
|
|
|
|
.nav-link::after {
|
|
content: '';
|
|
@apply absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 transition-all duration-300 rounded-full;
|
|
}
|
|
|
|
.nav-link:hover::after {
|
|
@apply w-full;
|
|
}
|
|
|
|
/* Icon box */
|
|
.icon-box {
|
|
@apply w-10 h-10 sm:w-12 sm:h-12 rounded-xl flex items-center justify-center flex-shrink-0;
|
|
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.group:hover .icon-box {
|
|
transform: scale(1.1) rotate(3deg);
|
|
}
|
|
|
|
/* Section padding - responsive */
|
|
.section-padding {
|
|
@apply py-12 sm:py-16 md:py-20 lg:py-24;
|
|
}
|
|
|
|
/* Gradient border effect */
|
|
.gradient-border {
|
|
position: relative;
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
|
|
}
|
|
|
|
.gradient-border::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
padding: 1px;
|
|
border-radius: inherit;
|
|
background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
|
|
-webkit-mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
mask:
|
|
linear-gradient(#fff 0 0) content-box,
|
|
linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
}
|
|
|
|
/* Shimmer loading effect */
|
|
.shimmer {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(255, 255, 255, 0) 0%,
|
|
rgba(255, 255, 255, 0.4) 50%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% { background-position: -200% 0; }
|
|
100% { background-position: 200% 0; }
|
|
}
|
|
|
|
/* Glow effects */
|
|
.glow-blue {
|
|
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.glow-purple {
|
|
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.1);
|
|
}
|
|
|
|
/* Number badge */
|
|
.number-badge {
|
|
@apply w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-white font-bold text-sm sm:text-base;
|
|
box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* Status indicators */
|
|
.status-dot {
|
|
@apply w-2 h-2 rounded-full;
|
|
animation: pulse-dot 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse-dot {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.5; transform: scale(1.2); }
|
|
}
|
|
|
|
/* Code block styling */
|
|
.code-block {
|
|
@apply font-mono text-xs sm:text-sm bg-gray-900 text-gray-100 p-3 sm:p-4 rounded-xl;
|
|
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Feature highlight */
|
|
.feature-highlight {
|
|
@apply relative;
|
|
}
|
|
|
|
.feature-highlight::before {
|
|
content: '';
|
|
@apply absolute -inset-2 bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-xl -z-10;
|
|
filter: blur(8px);
|
|
}
|
|
|
|
/* Mobile-optimized touch targets */
|
|
.touch-target {
|
|
@apply min-h-[44px] min-w-[44px];
|
|
}
|
|
|
|
/* Responsive table wrapper */
|
|
.table-wrapper {
|
|
@apply overflow-x-auto -mx-4 px-4 sm:mx-0 sm:px-0;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Responsive grid gaps */
|
|
.grid-responsive {
|
|
@apply gap-4 sm:gap-5 lg:gap-6;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Animation delays */
|
|
.animate-delay-100 { animation-delay: 0.1s; }
|
|
.animate-delay-200 { animation-delay: 0.2s; }
|
|
.animate-delay-300 { animation-delay: 0.3s; }
|
|
.animate-delay-400 { animation-delay: 0.4s; }
|
|
.animate-delay-500 { animation-delay: 0.5s; }
|
|
.animate-delay-600 { animation-delay: 0.6s; }
|
|
.animate-delay-700 { animation-delay: 0.7s; }
|
|
.animate-delay-800 { animation-delay: 0.8s; }
|
|
.animate-delay-1000 { animation-delay: 1s; }
|
|
.animate-delay-2000 { animation-delay: 2s; }
|
|
|
|
/* Custom animations */
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.6s ease-out forwards;
|
|
}
|
|
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.6s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
.animate-scale-in {
|
|
animation: scaleIn 0.5s ease-out forwards;
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slideInRight 0.5s ease-out forwards;
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-pulse-slow {
|
|
animation: pulse-slow 4s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spin-slow {
|
|
animation: spin 8s linear infinite;
|
|
}
|
|
|
|
/* Hover lift effect */
|
|
.hover-lift {
|
|
@apply transition-all duration-300;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
@apply -translate-y-1;
|
|
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Text balance for better typography */
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
|
|
/* Backdrop blur utilities */
|
|
.backdrop-blur-xs {
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Safe area for notched phones */
|
|
.safe-area-inset {
|
|
padding-left: env(safe-area-inset-left);
|
|
padding-right: env(safe-area-inset-right);
|
|
}
|
|
|
|
.safe-area-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
}
|
|
|
|
/* Keyframe animations */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
|
33% { transform: translateY(-15px) rotate(1deg); }
|
|
66% { transform: translateY(-8px) rotate(-1deg); }
|
|
}
|
|
|
|
@keyframes pulse-slow {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.7; }
|
|
}
|
|
|
|
/* Print styles */
|
|
@media print {
|
|
.glass {
|
|
@apply bg-white border-gray-200;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.gradient-text {
|
|
background: none !important;
|
|
@apply text-gray-900;
|
|
}
|
|
|
|
/* Hide non-essential elements when printing */
|
|
nav, footer, .no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Ensure good contrast for printed content */
|
|
body {
|
|
@apply text-black bg-white;
|
|
}
|
|
|
|
/* Page breaks */
|
|
.page-break {
|
|
page-break-before: always;
|
|
}
|
|
|
|
/* Prevent orphans and widows */
|
|
p, li {
|
|
orphans: 3;
|
|
widows: 3;
|
|
}
|
|
}
|
|
|
|
/* Mobile-specific optimizations */
|
|
@media (max-width: 640px) {
|
|
/* Larger touch targets on small screens */
|
|
button,
|
|
a {
|
|
@apply min-h-[44px] min-w-[44px];
|
|
}
|
|
|
|
/* Adjust card padding */
|
|
.card {
|
|
@apply p-4;
|
|
}
|
|
|
|
/* Smaller hero text on mobile */
|
|
.section-title {
|
|
@apply text-2xl;
|
|
}
|
|
}
|
|
|
|
/* Tablet optimizations */
|
|
@media (min-width: 768px) and (max-width: 1024px) {
|
|
.card {
|
|
@apply p-6;
|
|
}
|
|
}
|
|
|
|
/* Ultrawide screen optimizations */
|
|
@media (min-width: 1920px) {
|
|
/* Larger text for better readability at distance */
|
|
body {
|
|
@apply text-lg;
|
|
}
|
|
|
|
/* More spacious layouts */
|
|
.section-padding {
|
|
@apply py-28;
|
|
}
|
|
|
|
/* Larger cards */
|
|
.card {
|
|
@apply p-10;
|
|
}
|
|
}
|
|
|
|
/* Landscape mode on mobile */
|
|
@media (max-height: 500px) and (orientation: landscape) {
|
|
.section-padding {
|
|
@apply py-8;
|
|
}
|
|
|
|
.hero-min-height {
|
|
min-height: auto;
|
|
}
|
|
}
|