You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
847 lines
18 KiB
847 lines
18 KiB
/**
|
|
* 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);
|
|
}
|
|
}
|
|
|
|
/* ========================================
|
|
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-4;
|
|
}
|
|
|
|
.status-icon {
|
|
@apply flex items-center justify-center;
|
|
@apply w-25 h-25 rounded-full;
|
|
@apply text-6xl text-white;
|
|
@apply animate-pulse;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.status-icon {
|
|
@apply text-5xl;
|
|
}
|
|
}
|
|
|
|
.status-success .status-icon {
|
|
@apply bg-success;
|
|
}
|
|
|
|
.status-error .status-icon {
|
|
@apply bg-error;
|
|
}
|
|
|
|
/* 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-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;
|
|
}
|
|
}
|
|
|