/* ============================================
Meme Forge Pro - Unified Stylesheet
============================================ */
/* ============================================
CSS Reset & Base Setup
============================================ */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================
CSS Custom Properties (Variables)
============================================ */
:root {
/* Color Scheme - Dark Theme (Default) */
--primary-bg: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
--secondary-bg: rgba(30, 30, 50, 0.8);
--tertiary-bg: rgba(40, 40, 70, 0.6);
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
/* Text Colors */
--text-primary: #ffffff;
--text-secondary: #b8c1ec;
--text-muted: #8892b0;
/* Accent Colors */
--accent-primary: #00d4ff;
--accent-secondary: #7c3aed;
--accent-gradient: linear-gradient(135deg, #00d4ff 0%, #7c3aed 50%, #ec4899 100%);
--success-color: #10b981;
--error-color: #ef4444;
--warning-color: #f59e0b;
/* Shadows & Effects */
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
--shadow-md: 0 8px 25px rgba(0, 0, 0, 0.15);
--shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.25);
--glow: 0 0 30px rgba(0, 212, 255, 0.3);
--glass-backdrop: blur(20px);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
/* Typography */
--font-primary: 'Kanit', system-ui, sans-serif;
--font-heading: 'Space Grotesk', sans-serif;
--font-display: 'Poppins', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Spacing Scale */
--space-xs: 0.25rem;
/* 4px */
--space-sm: 0.5rem;
/* 8px */
--space-md: 1rem;
/* 16px */
--space-lg: 1.5rem;
/* 24px */
--space-xl: 2rem;
/* 32px */
--space-2xl: 3rem;
/* 48px */
--space-3xl: 4rem;
/* 64px */
/* Border Radius */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
/* Transitions */
--transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
--bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Layout Breakpoints */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
}
/* Light Theme Override */
[data-theme="light"] {
--primary-bg: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
--secondary-bg: rgba(255, 255, 255, 0.9);
--tertiary-bg: rgba(248, 250, 252, 0.8);
--glass-bg: rgba(255, 255, 255, 0.7);
--glass-border: rgba(0, 0, 0, 0.1);
--text-primary: #1e293b;
--text-secondary: #475569;
--text-muted: #64748b;
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
--shadow-md: 0 8px 25px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 15px 35px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.15);
--glow: 0 0 30px rgba(14, 165, 233, 0.2);
}
/* ============================================
Base Body & Background
============================================ */
body {
font-family: var(--font-primary);
background: var(--primary-bg);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* Animated Background */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.3) 0%, transparent 50%);
animation: backgroundShift 15s ease-in-out infinite;
z-index: -1;
pointer-events: none;
}
@keyframes backgroundShift {
0%, 100% {
opacity: 0.4;
transform: scale(1) rotate(0deg);
}
33% {
opacity: 0.6;
transform: scale(1.1) rotate(120deg);
}
66% {
opacity: 0.5;
transform: scale(0.9) rotate(240deg);
}
}
/* ============================================
Enhanced Responsive Main Layout
============================================ */
.main-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
max-width: 1600px;
margin: var(--space-xl) auto;
padding: 0 var(--space-md);
}
/* Large Desktop Layout */
@media (min-width: 1200px) {
.main-grid {
grid-template-columns: 420px 1fr;
gap: var(--space-2xl);
margin: var(--space-2xl) auto;
}
}
/* Desktop Layout */
@media (min-width: 1024px) and (max-width: 1199px) {
.main-grid {
grid-template-columns: 380px 1fr;
gap: var(--space-xl);
}
}
/* Tablet Layout */
@media (min-width: 768px) and (max-width: 1023px) {
.main-grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
max-width: 100%;
}
.controls-panel {
order: 2;
}
.preview-panel {
order: 1;
}
}
/* Mobile Layout */
@media (max-width: 767px) {
.main-grid {
gap: var(--space-md);
margin: var(--space-md) auto;
padding: 0 var(--space-sm);
}
.controls-panel {
order: 2;
}
.preview-panel {
order: 1;
}
}
/* ============================================
Glass Panel System
============================================ */
.glass-panel {
background: var(--glass-bg);
backdrop-filter: var(--glass-backdrop);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
box-shadow: var(--glass-shadow);
position: relative;
overflow: hidden;
transition: var(--transition-normal);
}
.glass-panel:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-xl);
}
.glass-panel::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: var(--accent-gradient);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
opacity: 0.6;
pointer-events: none;
}
/* Panel Responsive Adjustments */
@media (max-width: 768px) {
.glass-panel {
padding: var(--space-lg);
border-radius: var(--radius-lg);
}
}
/* ============================================
Header Section
============================================ */
header {
background: var(--glass-bg);
backdrop-filter: var(--glass-backdrop);
border-bottom: 1px solid var(--glass-border);
padding: var(--space-xl) var(--space-md);
text-align: center;
box-shadow: var(--glass-shadow);
}
header h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-family: var(--font-heading);
font-weight: 800;
letter-spacing: -0.02em;
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-sm);
animation: titleGlow 3s ease-in-out infinite alternate;
}
@keyframes titleGlow {
from {
filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
}
to {
filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.5));
}
}
header p {
color: var(--text-secondary);
font-size: 1.2rem;
font-weight: 500;
margin-bottom: var(--space-md);
}
/* Theme Switcher */
.theme-switcher {
position: absolute;
top: var(--space-md);
right: var(--space-md);
background: var(--glass-bg);
backdrop-filter: var(--glass-backdrop);
border: 1px solid var(--glass-border);
border-radius: var(--radius-full);
padding: var(--space-sm) var(--space-md);
color: var(--text-primary);
cursor: pointer;
transition: var(--transition-normal);
font-size: 0.9rem;
font-weight: 600;
display: flex;
align-items: center;
gap: var(--space-sm);
box-shadow: var(--shadow-md);
}
.theme-switcher:hover {
transform: scale(1.05);
box-shadow: var(--glow);
}
/* ============================================
Form Controls & Inputs
============================================ */
.input-group {
margin-bottom: var(--space-lg);
}
.input-group label {
display: block;
margin-bottom: var(--space-sm);
font-weight: 600;
color: var(--text-primary);
font-size: 1rem;
}
.input-group input[type="text"],
.input-group input[type="file"],
.input-group textarea {
width: 100%;
padding: var(--space-md);
background: var(--tertiary-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 1rem;
transition: var(--transition-normal);
font-family: inherit;
}
.input-group input[type="text"]:focus,
.input-group input[type="file"]:focus,
.input-group textarea:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
background: var(--glass-bg);
}
.input-group input[type="text"]::placeholder,
.input-group textarea::placeholder {
color: var(--text-muted);
}
/* File Upload Styling */
.file-upload-container {
position: relative;
overflow: hidden;
display: inline-block;
width: 100%;
}
.file-upload-container input[type="file"] {
position: absolute;
left: -9999px;
}
.file-upload-label {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-lg);
background: var(--tertiary-bg);
border: 2px dashed var(--glass-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-normal);
text-align: center;
font-weight: 500;
color: var(--text-secondary);
}
.file-upload-label:hover {
border-color: var(--accent-primary);
background: var(--glass-bg);
color: var(--accent-primary);
transform: translateY(-2px);
}
/* Button System */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-lg);
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-normal);
text-decoration: none;
font-family: inherit;
position: relative;
overflow: hidden;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
.btn-primary {
background: var(--accent-gradient);
color: white;
border: 1px solid transparent;
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
filter: brightness(1.1);
}
.btn-secondary {
background: var(--tertiary-bg);
color: var(--text-primary);
border: 1px solid var(--glass-border);
}
.btn-secondary:hover:not(:disabled) {
background: var(--glass-bg);
border-color: var(--accent-primary);
color: var(--accent-primary);
transform: translateY(-2px);
}
.button-group {
display: flex;
gap: var(--space-md);
margin-top: var(--space-xl);
flex-wrap: wrap;
justify-content: center
}
@media (max-width: 640px) {
.button-group {
flex-direction: column;
}
.btn {
width: 100%;
padding: var(--space-lg);
}
}
/* ============================================
Canvas & Preview Area
============================================ */
.preview-panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 600px;
}
.canvas-container {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-xl);
transition: var(--transition-normal);
user-select: none;
margin-bottom: var(--space-lg);
}
.canvas-container:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl), var(--glow);
}
#meme-canvas {
display: block;
max-width: 100%;
height: auto;
border-radius: inherit;
transition: var(--transition-fast);
}
.canvas-info {
text-align: center;
margin-top: var(--space-md);
color: var(--text-muted);
font-size: 0.9rem;
font-family: var(--font-mono);
}
/* Canvas Responsive Sizing */
@media (max-width: 768px) {
.canvas-container {
width: 100%;
max-width: 100%;
}
#meme-canvas {
width: 100%;
max-width: 100%;
}
}
/* ============================================
Template Gallery
============================================ */
.templates-showcase {
background: var(--secondary-bg);
padding: var(--space-3xl) 0;
margin-top: var(--space-2xl);
border-top: 1px solid var(--glass-border);
}
.templates-section {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--space-md);
}
.templates-header {
text-align: center;
margin-bottom: var(--space-2xl);
}
.templates-header h2 {
font-size: 3rem;
font-weight: 700;
margin-bottom: var(--space-md);
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--font-heading);
}
.template-count {
background: var(--glass-bg);
color: var(--accent-primary);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-full);
font-size: 1rem;
font-weight: 600;
border: 1px solid var(--glass-border);
display: inline-block;
}
.templates {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-lg);
}
.template-item {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: var(--transition-normal);
position: relative;
}
.template-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-xl);
border-color: var(--accent-primary);
}
.template-item img {
width: 100%;
height: 160px;
object-fit: cover;
transition: var(--transition-normal);
}
.template-item:hover img {
transform: scale(1.05);
}
.template-item .template-name {
padding: var(--space-md);
font-weight: 600;
color: var(--text-primary);
text-align: center;
background: var(--tertiary-bg);
}
/* Template Responsive Grid */
@media (max-width: 1200px) {
.templates {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
@media (max-width: 768px) {
.templates-header h2 {
font-size: 2.5rem;
}
.templates {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-md);
}
.template-item img {
height: 120px;
}
}
@media (max-width: 480px) {
.templates {
grid-template-columns: repeat(2, 1fr);
}
.templates-header h2 {
font-size: 2rem;
}
}
/* ============================================
Features Section
============================================ */
.features {
background: var(--tertiary-bg);
padding: var(--space-3xl) 0;
position: relative;
overflow: hidden;
}
.features::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--accent-gradient);
opacity: 0.8;
}
.features h2 {
text-align: center;
font-size: 3rem;
font-weight: 700;
margin-bottom: var(--space-2xl);
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--font-heading);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-xl);
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--space-md);
}
.feature-item {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
text-align: center;
transition: var(--transition-normal);
position: relative;
overflow: hidden;
}
.feature-item:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-xl);
border-color: var(--accent-primary);
}
.feature-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--accent-gradient);
opacity: 0;
transition: var(--transition-normal);
}
.feature-item:hover::before {
opacity: 1;
}
.feature-icon {
font-size: 3rem;
margin-bottom: var(--space-lg);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.feature-item h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: var(--space-md);
color: var(--text-primary);
}
.feature-item p {
color: var(--text-secondary);
line-height: 1.6;
}
@media (max-width: 768px) {
.features h2 {
font-size: 2.5rem;
}
.feature-grid {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.feature-item {
padding: var(--space-lg);
}
}
/* ============================================
Draggable Text System
============================================ */
.drag-instructions {
background: linear-gradient(135deg,
rgba(0, 212, 255, 0.1),
rgba(255, 0, 150, 0.1));
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
padding: var(--space-lg);
margin-top: var(--space-lg);
text-align: center;
position: relative;
overflow: hidden;
}
.drag-instructions::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: var(--accent-gradient);
opacity: 0.6;
}
.drag-instructions p {
color: var(--text-primary);
font-size: 1rem;
margin: 0 0 var(--space-md) 0;
line-height: 1.6;
font-weight: 500;
}
.drag-instructions strong {
color: var(--accent-primary);
font-weight: 700;
}
.reset-positions-btn {
background: var(--glass-bg);
border: 1px solid var(--accent-primary);
color: var(--accent-primary);
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-md);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition-normal);
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.reset-positions-btn:hover {
background: var(--accent-primary);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* Canvas Cursor States */
#meme-canvas.grabbable {
cursor: grab !important;
filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.3));
}
#meme-canvas.dragging {
cursor: grabbing !important;
filter: drop-shadow(0 0 12px rgba(0, 212, 255, 0.5));
transform: scale(1.01);
}
/* Position Tooltips */
.position-tooltip {
position: fixed !important;
background: rgba(0, 0, 0, 0.9) !important;
color: #00d4ff !important;
padding: 6px 10px !important;
border-radius: 6px !important;
font-size: 12px !important;
font-family: var(--font-mono) !important;
font-weight: 600 !important;
z-index: 10000 !important;
pointer-events: none !important;
white-space: nowrap !important;
border: 1px solid rgba(0, 212, 255, 0.3) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
backdrop-filter: blur(10px) !important;
transition: opacity 0.2s ease !important;
animation: tooltipFadeIn 0.2s ease !important;
}
@keyframes tooltipFadeIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ============================================
Loading & Notifications
============================================ */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: var(--accent-primary);
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: var(--transition-normal);
}
.loading-overlay.show {
opacity: 1;
visibility: visible;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(255, 255, 255, 0.1);
border-left: 4px solid var(--accent-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: var(--space-md);
}
.loading-text {
color: var(--text-primary);
font-size: 1.1rem;
font-weight: 500;
text-align: center;
font-family: var(--font-display);
letter-spacing: 0.02em;
animation: fadeInOut 2s ease-in-out infinite;
margin-top: var(--space-md);
}
@keyframes fadeInOut {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
.toast {
position: fixed;
top: var(--space-xl);
right: var(--space-xl);
background: var(--glass-bg);
backdrop-filter: var(--glass-backdrop);
color: var(--text-primary);
padding: var(--space-md) var(--space-xl);
border-radius: var(--radius-md);
box-shadow: var(--glass-shadow);
border: 1px solid var(--glass-border);
z-index: 1000;
transform: translateX(100%);
transition: var(--transition-normal);
font-weight: 500;
}
.toast.show {
transform: translateX(0);
}
.toast.success {
border-left: 4px solid var(--success-color);
}
.toast.error {
border-left: 4px solid var(--error-color);
}
/* ============================================
Footer
============================================ */
footer {
background: var(--glass-bg);
backdrop-filter: var(--glass-backdrop);
border-top: 1px solid var(--glass-border);
margin-top: var(--space-3xl);
position: relative;
overflow: hidden;
}
footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--accent-gradient);
opacity: 0.6;
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
padding: var(--space-2xl) var(--space-md);
text-align: center;
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.footer-content p {
color: var(--text-secondary);
margin: 0;
}
.footer-links {
display: flex;
justify-content: center;
gap: var(--space-xl);
flex-wrap: wrap;
}
.footer-links a {
color: var(--text-muted);
text-decoration: none;
transition: var(--transition-normal);
font-weight: 500;
}
.footer-links a:hover {
color: var(--accent-primary);
transform: translateY(-2px);
}
.footer-author {
color: var(--text-muted);
font-size: 0.9rem;
}
.footer-author a {
color: var(--accent-primary);
text-decoration: none;
font-weight: 600;
}
.footer-author a:hover {
text-decoration: underline;
}
@media (max-width: 640px) {
.footer-links {
flex-direction: column;
gap: var(--space-md);
}
.footer-content {
padding: var(--space-xl) var(--space-sm);
}
}
/* ============================================
Modal System
============================================ */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: var(--transition-normal);
}
.modal.show {
opacity: 1;
visibility: visible;
}
.modal-content {
background: var(--glass-bg);
backdrop-filter: var(--glass-backdrop);
border: 1px solid var(--glass-border);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
position: relative;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-lg);
}
.modal-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.modal-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-muted);
cursor: pointer;
transition: var(--transition-normal);
padding: var(--space-sm);
border-radius: var(--radius-sm);
}
.modal-close:hover {
color: var(--text-primary);
background: var(--tertiary-bg);
}
.modal-body {
color: var(--text-secondary);
line-height: 1.6;
}
/* ============================================
Enhanced Modal Content Styling
============================================ */
.about-content {
color: var(--text-secondary);
}
.about-hero {
text-align: center;
margin-bottom: var(--space-xl);
padding-bottom: var(--space-lg);
border-bottom: 1px solid var(--glass-border);
}
.about-icon {
font-size: 4rem;
margin-bottom: var(--space-md);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.about-hero h3 {
font-size: 2rem;
font-weight: 700;
background: var(--accent-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: var(--space-sm);
font-family: var(--font-heading);
}
.about-tagline {
font-style: italic;
color: var(--accent-primary);
font-weight: 500;
font-size: 1.1rem;
}
.about-section {
margin-bottom: var(--space-xl);
}
.about-section h4 {
color: var(--text-primary);
font-size: 1.3rem;
font-weight: 600;
margin-bottom: var(--space-md);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.about-section p {
line-height: 1.6;
margin-bottom: var(--space-md);
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li {
padding: var(--space-sm) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: flex-start;
gap: var(--space-sm);
}
.feature-list li:last-child {
border-bottom: none;
}
.feature-list strong {
color: var(--accent-primary);
}
.tech-stack {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
}
.tech-item {
background: var(--tertiary-bg);
color: var(--accent-primary);
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-full);
font-size: 0.9rem;
font-weight: 500;
border: 1px solid var(--glass-border);
transition: var(--transition-normal);
}
.tech-item:hover {
background: var(--accent-primary);
color: white;
transform: translateY(-2px);
}
.developer-info {
background: var(--tertiary-bg);
border-radius: var(--radius-md);
padding: var(--space-lg);
border: 1px solid var(--glass-border);
}
.developer-info p {
margin-bottom: var(--space-md);
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
}
.developer-links {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.developer-links a {
color: var(--accent-primary);
text-decoration: none;
font-weight: 500;
padding: var(--space-sm) var(--space-md);
background: var(--glass-bg);
border-radius: var(--radius-sm);
border: 1px solid var(--glass-border);
transition: var(--transition-normal);
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.developer-links a:hover {
background: var(--accent-primary);
color: white;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.about-footer {
text-align: center;
padding-top: var(--space-lg);
border-top: 1px solid var(--glass-border);
margin-top: var(--space-xl);
}
.about-footer p {
margin-bottom: var(--space-sm);
}
.version {
font-size: 0.9rem;
color: var(--text-muted);
font-family: var(--font-mono);
}
/* Modal Animation Enhancements */
.modal {
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal.show .modal-content {
animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Responsive Modal */
@media (max-width: 768px) {
.modal-content {
margin: var(--space-md);
padding: var(--space-lg);
max-height: 90vh;
}
.about-hero h3 {
font-size: 1.5rem;
}
.about-icon {
font-size: 3rem;
}
.developer-links {
flex-direction: column;
}
.tech-stack {
justify-content: center;
}
}
/* ============================================
Particle Background Animation
============================================ */
.particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: var(--accent-primary);
border-radius: 50%;
opacity: 0.6;
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.6;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 1;
}
}
/* ============================================
Utility Classes
============================================ */
.hidden {
display: none !important;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
/* ============================================
Print Styles
============================================ */
@media print {
.particles,
.loading-overlay,
header,
footer,
.button-group {
display: none !important;
}
.glass-panel {
background: white !important;
border: 1px solid #ccc !important;
box-shadow: none !important;
backdrop-filter: none !important;
}
body {
background: white !important;
}
* {
color: black !important;
}
}
/* ============================================
Accessibility Improvements
============================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Focus styles for keyboard navigation */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--glass-bg: rgba(255, 255, 255, 0.2);
--glass-border: rgba(255, 255, 255, 0.4);
--text-muted: #a0a0a0;
}
[data-theme="light"] {
--glass-bg: rgba(0, 0, 0, 0.1);
--glass-border: rgba(0, 0, 0, 0.3);
}
}
/* Enhanced Mobile Navigation */
@media (max-width: 640px) {
.header-content {
flex-wrap: wrap;
gap: var(--space-sm);
}
.theme-switcher {
order: 3;
width: 100%;
justify-content: center;
margin-top: var(--space-sm);
}
}
/* Improved Canvas Scaling */
@media (max-width: 480px) {
.canvas-container {
margin: 0 -var(--space-sm);
border-radius: 0;
}
#meme-canvas {
border-radius: 0;
}
}
/* Better Button Spacing */
@media (max-width: 640px) {
.drag-instructions {
padding: var(--space-md);
margin: var(--space-md) -var(--space-sm);
}
.reset-positions-btn {
width: 100%;
justify-content: center;
padding: var(--space-md);
}
}
/* Enhanced Feature Grid */
@media (max-width: 640px) {
.feature-grid {
grid-template-columns: 1fr;
gap: var(--space-md);
padding: 0 var(--space-sm);
}
.feature-item {
padding: var(--space-md);
}
.feature-icon {
font-size: 2.5rem;
}
}
/* Improved Template Grid */
@media (max-width: 360px) {
.templates {
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
}
.template-item img {
height: 100px;
}
.template-item .template-name {
padding: var(--space-sm);
font-size: 0.8rem;
}
}