c385779221
- Add orange AlertCircle icon to FormMessage component for better visibility of validation errors. - Update styleguide to demonstrate new alert components with icons for error, success, and warning messages. - Refactor CSS for status messages and form error messages to improve layout and accessibility compliance.
925 lines
21 KiB
CSS
925 lines
21 KiB
CSS
/**
|
||
* experimenta Design System - Tailwind CSS v4
|
||
*
|
||
* This file contains:
|
||
* - CSS Custom Properties for the experimenta theme
|
||
* - Tailwind base styles
|
||
* - Custom component classes
|
||
* - Utility classes for the design system
|
||
*/
|
||
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
|
||
/* ========================================
|
||
FONT FACE DECLARATIONS (Roboto - Local)
|
||
======================================== */
|
||
|
||
/**
|
||
* Roboto Variable Font - Local Hosting
|
||
*
|
||
* Font files are hosted locally for DSGVO compliance and better performance.
|
||
* This variable font supports all weights from 100-900.
|
||
*
|
||
* Format: WOFF2 (best compression, modern browsers)
|
||
* Coverage: Latin characters
|
||
* File location: /public/fonts/roboto/Roboto-VariableFont-latin.woff2
|
||
*/
|
||
|
||
/* Roboto Variable Font - Normal Style (Latin) */
|
||
/* Supports all weights from 100-900 (including 300, 400, 500, 700 that we use) */
|
||
@font-face {
|
||
font-family: 'Roboto';
|
||
font-style: normal;
|
||
font-weight: 100 900;
|
||
font-stretch: 100%;
|
||
font-display: block;
|
||
src: url('/fonts/roboto/Roboto-VariableFont-latin.woff2') format('woff2');
|
||
unicode-range:
|
||
U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
|
||
U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||
}
|
||
|
||
/* ========================================
|
||
CSS CUSTOM PROPERTIES
|
||
======================================== */
|
||
|
||
@layer base {
|
||
:root {
|
||
/* shadcn-ui CSS variables (HSL format) - customized for experimenta */
|
||
--background: 222.2 84% 4.9%;
|
||
--foreground: 210 40% 98%;
|
||
--card: 222.2 84% 4.9%;
|
||
--card-foreground: 210 40% 98%;
|
||
--popover: 222.2 84% 4.9%;
|
||
--popover-foreground: 210 40% 98%;
|
||
/* Primary: experimenta Pink #e6007e */
|
||
--primary: 328 100% 45%;
|
||
--primary-foreground: 210 40% 98%;
|
||
--secondary: 217.2 32.6% 17.5%;
|
||
--secondary-foreground: 210 40% 98%;
|
||
--muted: 217.2 32.6% 17.5%;
|
||
--muted-foreground: 215 20.2% 65.1%;
|
||
/* Accent: experimenta Orange #f59d24 */
|
||
--accent: 35 91% 55%;
|
||
--accent-foreground: 222.2 47.4% 11.2%;
|
||
--destructive: 0 62.8% 30.6%;
|
||
--destructive-foreground: 210 40% 98%;
|
||
--border: 217.2 32.6% 17.5%;
|
||
--input: 217.2 32.6% 17.5%;
|
||
--ring: 212.7 26.8% 83.9%;
|
||
--radius: 0.5rem;
|
||
|
||
/* Primary Colors */
|
||
--color-primary: #e6007e;
|
||
--color-primary-hover: #c2006a;
|
||
--color-primary-light: #ff4081;
|
||
|
||
--color-secondary: #e91e63;
|
||
--color-secondary-dark: #c2185b;
|
||
|
||
--color-accent: #f59d24;
|
||
--color-accent-hover: #ffb347;
|
||
|
||
--color-red: #e40521;
|
||
|
||
/* Purple Variants (Background) */
|
||
--color-purple-dark: #2e1065;
|
||
--color-purple-deeper: #1a0a3a;
|
||
--color-purple-darkest: #0f051d;
|
||
|
||
/* Semantic Colors */
|
||
--color-success: #46c74a;
|
||
--color-success-dark: #3ba83e;
|
||
|
||
--color-error: #e53e3e;
|
||
--color-error-dark: #c53030;
|
||
|
||
--color-warning: #f59d24;
|
||
--color-warning-dark: #dd8a1e;
|
||
|
||
--color-info: #4299e1;
|
||
--color-info-dark: #3182ce;
|
||
|
||
/* Background Gradients */
|
||
--bg-gradient-primary: linear-gradient(135deg, #2e1065 0%, #1a0a3a 50%, #0f051d 100%);
|
||
--bg-gradient-footer: linear-gradient(135deg, #1a0a3a 0%, #0f051d 100%);
|
||
--bg-gradient-glass: linear-gradient(
|
||
135deg,
|
||
rgba(255, 255, 255, 0.1),
|
||
rgba(255, 255, 255, 0.05)
|
||
);
|
||
--bg-gradient-button: linear-gradient(to left, #e6007e, #e6007e, #e40521, #e6007e);
|
||
--bg-gradient-success: linear-gradient(90deg, #46c74a 0%, #66d96a 50%, #46c74a 100%);
|
||
|
||
/* Header & Footer */
|
||
--bg-header: rgba(46, 16, 101, 0.95);
|
||
|
||
/* Glass-morphism */
|
||
--glass-border: 1px solid rgba(255, 255, 255, 0.2);
|
||
--glass-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||
|
||
/* Section Backgrounds */
|
||
--bg-section: rgba(255, 255, 255, 0.08);
|
||
--bg-section-hover: rgba(255, 255, 255, 0.15);
|
||
|
||
/* Text Colors */
|
||
--text-primary: #ffffff;
|
||
--text-secondary: rgba(255, 255, 255, 0.9);
|
||
--text-muted: rgba(255, 255, 255, 0.8);
|
||
--text-disabled: rgba(255, 255, 255, 0.5);
|
||
|
||
--text-dark: #333333;
|
||
--text-dark-secondary: #666666;
|
||
|
||
/* Border Colors */
|
||
--border-accent: 4px solid #f59d24;
|
||
--border-light: 1px solid rgba(255, 255, 255, 0.2);
|
||
--border-footer: 1px solid rgba(255, 255, 255, 0.1);
|
||
|
||
/* Spacing */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-8: 30px;
|
||
--space-10: 40px;
|
||
--space-15: 60px;
|
||
--space-20: 80px;
|
||
|
||
/* Border Radius */
|
||
--radius-sm: 6px;
|
||
--radius-md: 12px;
|
||
--radius-lg: 15px;
|
||
--radius-xl: 20px;
|
||
--radius-2xl: 25px;
|
||
|
||
/* Containers */
|
||
--container-main: 800px;
|
||
--container-wide: 1200px;
|
||
--container-full: 1760px;
|
||
}
|
||
|
||
/* Base Styles */
|
||
* {
|
||
@apply box-border;
|
||
}
|
||
|
||
html {
|
||
@apply w-full overflow-x-hidden;
|
||
}
|
||
|
||
body {
|
||
@apply font-sans antialiased;
|
||
@apply bg-gradient-primary;
|
||
@apply text-white;
|
||
@apply min-h-screen w-full;
|
||
@apply overflow-x-hidden m-0 p-0;
|
||
background-attachment: fixed;
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Typography */
|
||
h1 {
|
||
@apply text-4xl md:text-3xl sm:text-2xl;
|
||
@apply font-light tracking-tight;
|
||
@apply mb-8;
|
||
}
|
||
|
||
h2 {
|
||
@apply text-3xl md:text-2xl sm:text-xl;
|
||
@apply font-light;
|
||
@apply mb-6;
|
||
}
|
||
|
||
h3 {
|
||
@apply text-2xl md:text-xl sm:text-lg;
|
||
@apply font-normal;
|
||
@apply mb-4;
|
||
}
|
||
|
||
p {
|
||
@apply text-lg md:text-base sm:text-sm;
|
||
@apply leading-relaxed;
|
||
}
|
||
|
||
a {
|
||
@apply transition-colors duration-300;
|
||
}
|
||
|
||
/* Focus Styles (Accessibility) */
|
||
*:focus-visible {
|
||
@apply outline-none ring-2 ring-accent ring-offset-2;
|
||
ring-offset-color: var(--color-purple-darkest);
|
||
}
|
||
}
|
||
|
||
/* ========================================
|
||
TAILWIND THEME INTEGRATION
|
||
======================================== */
|
||
|
||
/**
|
||
* @theme inline - Make CSS variables available to Tailwind CSS v4
|
||
* This allows shadcn-nuxt components to use these colors directly
|
||
*/
|
||
@theme inline {
|
||
/* Map shadcn-ui CSS variables to Tailwind colors */
|
||
--color-background: hsl(var(--background));
|
||
--color-foreground: hsl(var(--foreground));
|
||
--color-card: hsl(var(--card));
|
||
--color-card-foreground: hsl(var(--card-foreground));
|
||
--color-popover: hsl(var(--popover));
|
||
--color-popover-foreground: hsl(var(--popover-foreground));
|
||
--color-primary: hsl(var(--primary));
|
||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||
--color-secondary: hsl(var(--secondary));
|
||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||
--color-muted: hsl(var(--muted));
|
||
--color-muted-foreground: hsl(var(--muted-foreground));
|
||
--color-accent: hsl(var(--accent));
|
||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||
--color-destructive: hsl(var(--destructive));
|
||
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
||
--color-border: hsl(var(--border));
|
||
--color-input: hsl(var(--input));
|
||
--color-ring: hsl(var(--ring));
|
||
|
||
/* Border radius tokens */
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
}
|
||
|
||
/* ========================================
|
||
COMPONENT CLASSES
|
||
======================================== */
|
||
|
||
@layer components {
|
||
/* Buttons */
|
||
.btn-primary {
|
||
@apply px-8 py-2.5 rounded-2xl;
|
||
@apply text-lg font-medium text-white;
|
||
@apply cursor-pointer;
|
||
@apply transition-all duration-1000;
|
||
@apply outline-0 border-0;
|
||
background: var(--color-primary);
|
||
background-image: var(--bg-gradient-button);
|
||
background-size: 300%;
|
||
background-position: left;
|
||
line-height: 1.7em;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-position: right;
|
||
}
|
||
|
||
/* experimenta Button (Official Design) */
|
||
.btn-experimenta {
|
||
@apply inline-block relative;
|
||
@apply px-[30px] py-[10px];
|
||
@apply text-lg font-medium text-white;
|
||
@apply rounded-[25px];
|
||
@apply cursor-pointer;
|
||
@apply border-0 outline-0;
|
||
@apply no-underline;
|
||
background: var(--color-primary);
|
||
background-image: var(--bg-gradient-button);
|
||
background-size: 300%;
|
||
background-position: 0%;
|
||
line-height: 1.7em;
|
||
transition:
|
||
background-position 1s,
|
||
all 0.3s ease;
|
||
}
|
||
|
||
.btn-experimenta:hover {
|
||
background-position: 100%;
|
||
}
|
||
|
||
/* Responsive button sizes */
|
||
@media (max-width: 480px) {
|
||
.btn-primary {
|
||
@apply px-6 py-2 text-base;
|
||
}
|
||
|
||
.btn-experimenta {
|
||
@apply px-6 py-2 text-base;
|
||
}
|
||
}
|
||
|
||
/* Secondary Button (White Border) */
|
||
.btn-secondary {
|
||
@apply inline-block relative;
|
||
@apply px-[30px] py-[10px];
|
||
@apply text-lg font-medium text-white;
|
||
@apply rounded-[25px];
|
||
@apply cursor-pointer;
|
||
@apply bg-transparent;
|
||
@apply border-2 border-white/30;
|
||
@apply outline-0;
|
||
@apply no-underline;
|
||
line-height: 1.7em;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
@apply bg-white text-purple-darkest;
|
||
@apply border-white;
|
||
}
|
||
|
||
/* Destructive Button (EXP Signalorange - Warning/Danger Actions) */
|
||
.btn-destructive {
|
||
@apply inline-block relative;
|
||
@apply px-[30px] py-[10px];
|
||
@apply text-lg font-medium text-white;
|
||
@apply rounded-[25px];
|
||
@apply cursor-pointer;
|
||
@apply border-0 outline-0;
|
||
@apply no-underline;
|
||
background: #ea5b0c;
|
||
background-image: linear-gradient(to left, #ea5b0c, #ea5b0c, #c7490a, #ea5b0c);
|
||
background-size: 300%;
|
||
background-position: 0%;
|
||
line-height: 1.7em;
|
||
transition:
|
||
background-position 1s,
|
||
all 0.3s ease;
|
||
}
|
||
|
||
.btn-destructive:hover {
|
||
background-position: 100%;
|
||
}
|
||
|
||
/* Cards */
|
||
.card-glass {
|
||
background: var(--bg-gradient-glass);
|
||
backdrop-filter: blur(15px);
|
||
@apply rounded-xl border shadow-glass;
|
||
border: var(--border-light);
|
||
@apply p-15 md:p-10 sm:p-8;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.card-glass {
|
||
@apply rounded-lg;
|
||
}
|
||
}
|
||
|
||
.card-info {
|
||
background: var(--bg-section);
|
||
@apply rounded-xl;
|
||
@apply p-8 md:p-6 sm:p-5;
|
||
@apply border-l-4 border-accent;
|
||
}
|
||
|
||
.card-info h3 {
|
||
@apply text-accent font-medium mb-4;
|
||
}
|
||
|
||
/* White Info Card - like experimenta.science homepage */
|
||
.card-white {
|
||
@apply bg-white rounded-2xl;
|
||
@apply p-8 md:p-6 sm:p-5;
|
||
@apply shadow-lg;
|
||
@apply transition-transform duration-300;
|
||
}
|
||
|
||
.card-white:hover {
|
||
@apply -translate-y-1;
|
||
}
|
||
|
||
.card-white h2,
|
||
.card-white h3 {
|
||
@apply text-black font-bold mb-4;
|
||
@apply text-2xl md:text-xl;
|
||
}
|
||
|
||
.card-white p {
|
||
@apply text-gray-800 text-base leading-relaxed mb-6;
|
||
}
|
||
|
||
.card-white a {
|
||
@apply text-experimenta-primary font-bold;
|
||
@apply inline-flex items-center gap-2;
|
||
@apply transition-colors duration-300;
|
||
}
|
||
|
||
.card-white a:hover {
|
||
@apply text-experimenta-accent;
|
||
}
|
||
|
||
.card-white a::after {
|
||
content: '›';
|
||
@apply text-2xl font-normal;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Progress Card - with Safrangold accent border */
|
||
.card-progress {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
@apply rounded-2xl md:rounded-lg;
|
||
@apply p-8 md:p-6 sm:p-5;
|
||
}
|
||
|
||
/* Accent Border (Left) - Safrangold (#f59d24) */
|
||
.card-accent-border {
|
||
border-left: 6px solid #f59d24;
|
||
@apply rounded-l-lg;
|
||
}
|
||
|
||
/* Progress Bar Components */
|
||
.card-progress .progress-header {
|
||
@apply flex justify-between items-center mb-5 flex-wrap gap-2;
|
||
}
|
||
|
||
.card-progress .progress-title {
|
||
@apply text-xl font-medium m-0;
|
||
color: #f59d24;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.card-progress .progress-stats {
|
||
@apply text-lg font-normal;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.card-progress .progress-bar-wrapper {
|
||
@apply relative w-full;
|
||
height: 50px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border-radius: 25px;
|
||
overflow: hidden;
|
||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.card-progress .progress-bar {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #46c74a 0%, #66d96a 50%, #46c74a 100%);
|
||
border-radius: 25px;
|
||
@apply transition-all duration-300;
|
||
position: relative;
|
||
background-size: 200% 100%;
|
||
animation: shimmer 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes shimmer {
|
||
0% {
|
||
background-position: -200% 0;
|
||
}
|
||
100% {
|
||
background-position: 200% 0;
|
||
}
|
||
}
|
||
|
||
.card-progress .progress-percentage {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 20px;
|
||
@apply font-bold text-white;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
|
||
z-index: 2;
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.card-info p {
|
||
@apply text-white/90;
|
||
}
|
||
|
||
/* Status Messages */
|
||
.status-message {
|
||
@apply flex items-center gap-3;
|
||
padding: 0.75rem 1rem;
|
||
border-radius: 0.5rem;
|
||
background-color: rgba(255, 255, 255, 0.15); /* White with 15% opacity */
|
||
color: #ffffff; /* White text */
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-icon {
|
||
@apply flex items-center justify-center;
|
||
@apply flex-shrink-0;
|
||
width: 1.5rem;
|
||
height: 1.5rem;
|
||
}
|
||
|
||
.status-success {
|
||
@apply border-l-4 border-success;
|
||
}
|
||
|
||
.status-success .status-icon {
|
||
@apply text-success;
|
||
}
|
||
|
||
.status-error {
|
||
@apply border-l-4 border-warning;
|
||
}
|
||
|
||
.status-error .status-icon {
|
||
@apply text-warning;
|
||
}
|
||
|
||
.status-warning {
|
||
@apply border-l-4 border-warning;
|
||
}
|
||
|
||
.status-warning .status-icon {
|
||
@apply text-warning;
|
||
}
|
||
|
||
.status-info {
|
||
@apply border-l-4 border-accent;
|
||
}
|
||
|
||
.status-info .status-icon {
|
||
@apply text-accent;
|
||
}
|
||
|
||
/* Progress Bar */
|
||
.progress-container {
|
||
background: var(--bg-section);
|
||
@apply rounded-2xl md:rounded-lg;
|
||
@apply p-8 md:p-6 sm:p-5;
|
||
@apply border-l-4 border-accent;
|
||
}
|
||
|
||
.progress-header {
|
||
@apply flex justify-between items-center;
|
||
@apply flex-wrap gap-4;
|
||
@apply mb-5;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.progress-header {
|
||
@apply flex-col items-start gap-4;
|
||
}
|
||
}
|
||
|
||
.progress-title {
|
||
@apply text-xl md:text-lg sm:text-base;
|
||
@apply font-medium text-accent;
|
||
@apply m-0;
|
||
}
|
||
|
||
.progress-stats {
|
||
@apply text-lg md:text-base sm:text-sm;
|
||
@apply text-white/90 font-normal;
|
||
}
|
||
|
||
.progress-bar-wrapper {
|
||
@apply relative w-full h-8 md:h-7 sm:h-6;
|
||
@apply bg-white/10;
|
||
@apply overflow-hidden;
|
||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
|
||
border-radius: 25px;
|
||
}
|
||
|
||
.progress-bar {
|
||
@apply h-full;
|
||
background: var(--bg-gradient-success);
|
||
@apply transition-all duration-500;
|
||
@apply animate-shimmer;
|
||
background-size: 200%;
|
||
border-radius: 25px;
|
||
}
|
||
|
||
.progress-percentage {
|
||
@apply absolute inset-0;
|
||
@apply flex items-center justify-center;
|
||
@apply text-base md:text-sm font-semibold text-white;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
|
||
@apply z-10;
|
||
}
|
||
|
||
/* Forms */
|
||
.form-field {
|
||
@apply mb-6;
|
||
}
|
||
|
||
.form-label {
|
||
@apply block text-lg md:text-base font-medium text-white/90;
|
||
@apply mb-3;
|
||
}
|
||
|
||
.form-input {
|
||
@apply w-full px-4 py-3;
|
||
@apply bg-white/10 border border-white/20;
|
||
@apply rounded-xl;
|
||
@apply text-white;
|
||
@apply transition-all duration-300;
|
||
}
|
||
|
||
.form-input::placeholder {
|
||
@apply text-white/50;
|
||
}
|
||
|
||
.form-input:hover {
|
||
@apply bg-white/15;
|
||
}
|
||
|
||
.form-input:focus {
|
||
@apply outline-none ring-2 ring-accent;
|
||
}
|
||
|
||
/* Form Error Message - High contrast with orange accent */
|
||
.form-error {
|
||
margin-top: 0.5rem;
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
padding: 0.75rem 1rem;
|
||
border-radius: 0.5rem;
|
||
border-left: 4px solid var(--color-warning); /* Orange left border for accessibility */
|
||
background-color: rgba(255, 255, 255, 0.15); /* White with 15% opacity */
|
||
color: #ffffff; /* White text */
|
||
transition: all 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.form-checkbox {
|
||
@apply flex items-start gap-3 cursor-pointer;
|
||
}
|
||
|
||
.checkbox-input {
|
||
@apply w-5 h-5 mt-0.5;
|
||
@apply rounded border-2 border-white/30;
|
||
@apply bg-white/10;
|
||
@apply cursor-pointer;
|
||
@apply transition-all duration-300;
|
||
}
|
||
|
||
.checkbox-input:checked {
|
||
@apply bg-accent border-accent;
|
||
}
|
||
|
||
.checkbox-input:focus {
|
||
@apply ring-2 ring-accent;
|
||
}
|
||
|
||
.checkbox-label {
|
||
@apply text-base text-white/90;
|
||
}
|
||
|
||
/* Links */
|
||
.link-primary {
|
||
@apply text-accent;
|
||
@apply font-medium;
|
||
@apply transition-colors duration-300;
|
||
}
|
||
|
||
.link-primary:hover {
|
||
@apply brightness-125;
|
||
}
|
||
|
||
.link-accent {
|
||
@apply text-accent;
|
||
@apply font-medium;
|
||
@apply transition-colors duration-300;
|
||
}
|
||
|
||
.link-accent:hover {
|
||
@apply brightness-125;
|
||
}
|
||
|
||
/* Header & Footer */
|
||
.header-wrapper {
|
||
background: var(--bg-header);
|
||
backdrop-filter: blur(10px);
|
||
@apply relative z-50;
|
||
@apply py-8;
|
||
}
|
||
|
||
.header-content {
|
||
@apply max-w-container-wide mx-auto;
|
||
@apply px-5;
|
||
@apply flex justify-center items-center;
|
||
}
|
||
|
||
.footer {
|
||
background: var(--bg-gradient-footer);
|
||
@apply mt-20;
|
||
@apply relative;
|
||
}
|
||
|
||
.footer-content {
|
||
@apply max-w-container-wide mx-auto;
|
||
@apply px-5 py-15;
|
||
}
|
||
|
||
.footer-bottom {
|
||
border-top: var(--border-footer);
|
||
@apply pt-8;
|
||
@apply flex justify-between items-center;
|
||
@apply flex-wrap gap-5;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.footer-bottom {
|
||
@apply flex-col text-center gap-4;
|
||
}
|
||
}
|
||
|
||
.footer-bottom p {
|
||
@apply text-white/80 text-base md:text-sm;
|
||
@apply font-normal m-0;
|
||
}
|
||
|
||
.footer-bottom-links {
|
||
@apply flex gap-8 md:gap-5;
|
||
}
|
||
|
||
.footer-bottom-links a {
|
||
@apply text-white/80 no-underline;
|
||
@apply text-base md:text-sm font-bold;
|
||
@apply transition-colors duration-300;
|
||
}
|
||
|
||
.footer-bottom-links a:hover {
|
||
@apply text-primary-light;
|
||
}
|
||
|
||
/* Logo */
|
||
.logo {
|
||
@apply flex items-center no-underline text-white;
|
||
@apply transition-all duration-300;
|
||
}
|
||
|
||
.logo:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.logo-svg {
|
||
@apply w-[300px] md:w-[250px] sm:w-[200px];
|
||
@apply h-auto;
|
||
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
|
||
}
|
||
|
||
/* Contact Info */
|
||
.contact-info {
|
||
background: var(--bg-section);
|
||
@apply rounded-xl;
|
||
@apply p-10 md:p-6 sm:p-5;
|
||
@apply text-center;
|
||
@apply border-l-4 border-accent;
|
||
}
|
||
|
||
.contact-info p {
|
||
@apply text-lg md:text-base sm:text-sm;
|
||
@apply text-white/90;
|
||
@apply mb-8;
|
||
@apply leading-relaxed;
|
||
}
|
||
|
||
.contact-item {
|
||
@apply m-5 p-0;
|
||
@apply bg-transparent border-0;
|
||
}
|
||
|
||
.contact-item strong {
|
||
@apply text-accent;
|
||
@apply block mb-3;
|
||
@apply text-lg md:text-base font-semibold;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.contact-item a {
|
||
@apply text-white no-underline;
|
||
@apply text-lg md:text-base font-normal;
|
||
@apply transition-colors duration-300;
|
||
word-break: break-all;
|
||
overflow-wrap: break-word;
|
||
}
|
||
|
||
.contact-item a:hover {
|
||
@apply text-accent-hover;
|
||
}
|
||
|
||
/* Info Section */
|
||
.info-section {
|
||
background: var(--bg-section);
|
||
@apply rounded-xl;
|
||
@apply p-8 md:p-6 sm:p-5;
|
||
@apply text-center;
|
||
@apply border-l-4 border-accent;
|
||
}
|
||
|
||
.info-section p {
|
||
@apply text-lg md:text-base sm:text-sm;
|
||
@apply text-white/90;
|
||
@apply m-0 leading-relaxed;
|
||
}
|
||
|
||
.info-section a {
|
||
@apply text-accent underline;
|
||
@apply font-medium;
|
||
@apply text-lg md:text-base sm:text-sm;
|
||
@apply transition-colors duration-300;
|
||
}
|
||
|
||
.info-section a:hover {
|
||
@apply text-primary-light;
|
||
}
|
||
}
|
||
|
||
/* ========================================
|
||
UTILITY CLASSES
|
||
======================================== */
|
||
|
||
@layer utilities {
|
||
/* Container utilities */
|
||
.container-main {
|
||
@apply max-w-container-main mx-auto;
|
||
}
|
||
|
||
.container-wide {
|
||
@apply max-w-container-wide mx-auto;
|
||
}
|
||
|
||
.container-full {
|
||
@apply max-w-container-full mx-auto;
|
||
}
|
||
|
||
/* Background utilities */
|
||
.bg-gradient-primary {
|
||
background: var(--bg-gradient-primary);
|
||
}
|
||
|
||
.bg-gradient-footer {
|
||
background: var(--bg-gradient-footer);
|
||
}
|
||
|
||
.bg-gradient-glass {
|
||
background: var(--bg-gradient-glass);
|
||
}
|
||
|
||
.bg-gradient-button {
|
||
background: var(--bg-gradient-button);
|
||
}
|
||
|
||
.bg-gradient-success {
|
||
background: var(--bg-gradient-success);
|
||
}
|
||
|
||
.bg-header {
|
||
background: var(--bg-header);
|
||
}
|
||
|
||
.bg-section {
|
||
background: var(--bg-section);
|
||
}
|
||
|
||
.bg-section-hover {
|
||
background: var(--bg-section-hover);
|
||
}
|
||
|
||
/* Backdrop utilities */
|
||
.backdrop-blur-xl {
|
||
backdrop-filter: blur(15px);
|
||
}
|
||
|
||
/* Shadow utilities */
|
||
.shadow-glass {
|
||
box-shadow: var(--glass-shadow);
|
||
}
|
||
|
||
/* Hover effects */
|
||
.hover-scale {
|
||
@apply transition-transform duration-300;
|
||
}
|
||
|
||
.hover-scale:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
/* Mobile-specific utilities */
|
||
@media (max-width: 768px) {
|
||
.mobile-scroll-bg {
|
||
background-attachment: scroll !important;
|
||
}
|
||
}
|
||
|
||
/* Text utilities */
|
||
.text-shadow-lg {
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
|
||
}
|
||
|
||
/* Responsive padding utilities */
|
||
.responsive-padding {
|
||
@apply p-15 md:p-10 sm:p-8;
|
||
}
|
||
|
||
.responsive-padding-section {
|
||
@apply p-8 md:p-6 sm:p-5;
|
||
}
|
||
}
|