/* Font fallback to prevent FOIT */ @font-face { font-family: 'Inter-fallback'; size-adjust: 100%; src: local('Arial'), local('Helvetica'), local('sans-serif'); font-display: swap; } /* General image optimization */ img { max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* 1. CSS Variables for Theming */ :root { /* Light mode colors - Purple & Pink palette */ --bg-primary: #fafafa; --bg-secondary: #ffffff; --bg-header: rgba(250, 250, 250, 0.95); --text-primary: #1a1a2e; --text-secondary: #4a4a6e; --text-muted: #5a5a6e; --text-light: #4a4a5e; --border-color: rgba(124, 58, 237, 0.15); --shadow-sm: rgba(124, 58, 237, 0.12); --shadow-md: rgba(124, 58, 237, 0.25); --accent-primary: #7c3aed; --accent-secondary: #8b5cf6; --accent-light: #f3e8ff; --accent-dark: #6d28d9; --chip-bg: #f3e8ff; --chip-text: #7c3aed; --search-bg: transparent; --search-border: rgba(124, 58, 237, 0.25); --purple-50: #faf5ff; --purple-100: #f3e8ff; --purple-500: #8b5cf6; --purple-600: #7c3aed; --purple-700: #6d28d9; --pink-400: #f472b6; --pink-500: #ec4899; --pink-600: #db2777; } [data-theme="dark"] { /* Dark mode colors - Purple & Pink palette */ --bg-primary: #0f0f1e; --bg-secondary: #1a1a2e; --bg-header: rgba(15, 15, 30, 0.95); --text-primary: #f5f3ff; --text-secondary: #e9d5ff; --text-muted: #a78bfa; --text-light: #c4b5fd; --border-color: rgba(167, 139, 250, 0.25); --shadow-sm: rgba(167, 139, 250, 0.2); --shadow-md: rgba(167, 139, 250, 0.35); --accent-primary: #a78bfa; --accent-secondary: #c4b5fd; --accent-light: #2d1b4e; --accent-dark: #a78bfa; --chip-bg: #2d1b4e; --chip-text: #c4b5fd; --search-bg: rgba(139, 92, 246, 0.1); --search-border: rgba(167, 139, 250, 0.35); } /* 2. Reset and base styles */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; height: 100%; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: "Inter", "Inter-fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; transition: background-color 0.3s ease, color 0.3s ease; animation: fadeIn 0.5s ease-in; display: flex; flex-direction: column; min-height: 100%; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* 3. Layout helpers */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* 4. Header and navigation */ .site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(20px) saturate(180%); background: rgba(250, 250, 250, 0.8); border-bottom: 1px solid var(--border-color); transition: background-color 0.3s ease, border-color 0.3s ease; animation: slideDown 0.4s ease-out; box-shadow: 0 1px 3px rgba(124, 58, 237, 0.1); } [data-theme="dark"] .site-header { background: rgba(15, 15, 30, 0.8); backdrop-filter: blur(20px) saturate(180%); } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; transition: transform 0.2s ease; gap: 0.55rem; } .logo:hover { transform: scale(1.05); } .logo-img { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25); background: #fff; } .logo-text { font-family: "Inter", sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 85%, rgba(236, 72, 153, 0.6) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: all 0.3s ease; } .main-nav { display: flex; align-items: center; gap: 1rem; } .nav-link { font-size: 0.9rem; text-decoration: none; color: var(--text-secondary); padding: 0.5rem 1rem; /* +2px breathing room */ border-radius: 999px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; z-index: 1; } .nav-link::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); backdrop-filter: blur(10px); opacity: 0; border-radius: 999px; transition: opacity 0.3s ease; z-index: -1; } .nav-link:hover::before { opacity: 1; } .nav-link:hover { color: #ffffff; transform: translateY(-2px); } .nav-link span { position: relative; z-index: 1; } .nav-link.active { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); backdrop-filter: blur(10px); color: #ffffff; box-shadow: 0 2px 12px rgba(124, 58, 237, 0.4); position: relative; z-index: 1; } .nav-link.active::before { opacity: 1; } .search-wrapper { margin-left: auto; } .search-input { padding: 0.5rem 1rem; border: 1px solid var(--search-border); border-radius: 999px; font-size: 0.9rem; width: 200px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); color: var(--text-primary); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-family: "Inter", system-ui, sans-serif; } [data-theme="dark"] .search-input { background: rgba(26, 26, 46, 0.5); backdrop-filter: blur(10px); } .search-input:focus { outline: none; border-color: var(--accent-primary); width: 250px; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); } .search-input::placeholder { color: var(--text-muted); } .theme-toggle { background: var(--bg-secondary); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin-left: 0.5rem; } /* Light mode only: hide theme switcher */ .theme-toggle { display: none !important; } [data-theme="dark"] .theme-toggle { background: rgba(26, 26, 46, 0.9); backdrop-filter: blur(10px); } .theme-toggle:hover { transform: scale(1.1) rotate(15deg); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); border-color: var(--accent-primary); background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); } .theme-icon { font-size: 1.2rem; transition: transform 0.3s ease; } .theme-toggle:hover .theme-icon { transform: rotate(-15deg); } /* CTA buttons */ .cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .button { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 999px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .button.primary { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%); color: #ffffff; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25); } .button.ghost { background: transparent; color: var(--accent-primary); border-color: rgba(124, 58, 237, 0.4); } .button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3); } [data-theme="dark"] .button.ghost { color: var(--accent-secondary); border-color: rgba(167, 139, 250, 0.5); } @media (max-width: 640px) { .cta { flex-direction: column; align-items: stretch; } .button { width: 100%; } } /* Hamburger menu button (hidden on desktop, shown on mobile) */ .hamburger-menu { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 24px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 101; transition: transform 0.3s ease; } .hamburger-menu:hover { transform: scale(1.1); } .hamburger-line { width: 100%; height: 3px; background: var(--text-primary); border-radius: 3px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Hamburger animation when active (transforms to X) */ .hamburger-menu.active .hamburger-line:nth-child(1) { transform: translateY(10.5px) rotate(45deg); } .hamburger-menu.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger-menu.active .hamburger-line:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); } /* Overlay when mobile menu is open */ .nav-overlay { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 99; opacity: 0; transition: opacity 0.3s ease; } .nav-overlay.active { display: block; opacity: 1; } /* 5. Hero Banner */ .hero-banner { position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 3rem; animation: fadeIn 0.8s ease-out; /* Mobile-first: keep hero lightweight (no big background image) */ background: linear-gradient(135deg, rgba(109, 40, 217, 0.14), rgba(124, 58, 237, 0.10), rgba(255, 255, 255, 0)); } /* Desktop/tablet: enable the hero background image */ @media (min-width: 768px) { .hero-banner { background-image: url('../img/hero-bg.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } } .hero-gradient { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.45) 60%, rgba(0, 0, 0, 0.4) 85%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, rgba(109, 40, 217, 0.3) 0%, rgba(124, 58, 237, 0.25) 30%, rgba(139, 92, 246, 0.2) 60%, rgba(167, 139, 250, 0.15) 85%, rgba(147, 51, 234, 0.25) 100%); opacity: 1; } [data-theme="dark"] .hero-gradient { background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.6) 100%), linear-gradient(135deg, rgba(76, 29, 149, 0.4) 0%, rgba(91, 33, 182, 0.35) 25%, rgba(109, 40, 217, 0.3) 50%, rgba(124, 58, 237, 0.35) 75%, rgba(139, 92, 246, 0.3) 100%); opacity: 1; } .hero-content { position: relative; z-index: 2; text-align: center; padding: 4rem 1.5rem; max-width: 800px; animation: fadeInUp 0.8s ease-out 0.2s both; } .hero-title { font-family: "Inter", sans-serif; font-size: 3.5rem; font-weight: 800; color: #ffffff; margin: 0 0 1.5rem; line-height: 1.1; letter-spacing: -0.03em; padding: 2px 4px; /* small padding for clarity */ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.5); animation: fadeInUp 0.8s ease-out 0.4s both; } .hero-description { font-size: 1.25rem; color: #ffffff; margin: 0; line-height: 1.6; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.5); animation: fadeInUp 0.8s ease-out 0.6s both; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* 6. Filters */ .filters { padding-bottom: 1rem; } .filters-inner { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip { border: none; padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); font-size: 0.85rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; z-index: 1; } .chip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); backdrop-filter: blur(10px); opacity: 0; border-radius: 999px; transition: opacity 0.3s ease; z-index: -1; } .chip:hover::before { opacity: 1; } .chip:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 4px 12px var(--shadow-sm); color: #ffffff; } .chip-active { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); backdrop-filter: blur(10px); color: #ffffff; box-shadow: 0 2px 12px rgba(124, 58, 237, 0.4); position: relative; z-index: 1; } .chip-active::before { opacity: 1; } /* 6. Featured Article Section */ .featured-section { padding: 2rem 0 3rem; } .featured-card { background: var(--bg-secondary); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 10px 25px var(--shadow-sm); overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--border-color); animation: fadeInUp 0.8s ease-out; } [data-theme="dark"] .featured-card { background: rgba(26, 26, 46, 0.9); backdrop-filter: blur(10px); } .featured-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px var(--shadow-md), 0 0 0 1px rgba(124, 58, 237, 0.25); border-color: var(--accent-primary); } .featured-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 15, 25, 0.14); } .featured-link { color: inherit; text-decoration: none; display: block; } .featured-image-wrapper { position: relative; overflow: hidden; width: 100%; } .featured-image { width: 100%; display: block; height: 500px; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); content-visibility: auto; contain-intrinsic-size: 1050px 600px; } .featured-card:hover .featured-image { transform: scale(1.05); } .featured-content { padding: 2.5rem 3rem 3rem; } .featured-date { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 0.5rem; transition: color 0.3s ease; } .featured-title { font-size: 2.2rem; margin: 0 0 1rem; line-height: 1.2; font-weight: 700; transition: color 0.3s ease; } .featured-card:hover .featured-title { color: var(--accent-primary); } .featured-excerpt { font-size: 1.15rem; color: var(--text-light); line-height: 1.7; max-width: 800px; transition: color 0.3s ease; } /* 7. Cards grid - Mobile First */ .cards-section { padding-bottom: 3rem; } /* Loading placeholders */ .loading-placeholder { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.5rem; box-shadow: 0 6px 16px var(--shadow-sm); } /* Reserve space to reduce CLS while content loads */ .featured-section .loading-bar.full { height: 600px; } .cards-section .loading-bar.full { height: 250px; } .loading-bar { height: 14px; border-radius: 999px; background: linear-gradient(90deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.25), rgba(124, 58, 237, 0.12)); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; } .loading-bar.short { width: 40%; } .loading-bar.med { width: 65%; } .loading-bar.long { width: 90%; } .loading-bar.full { width: 100%; height: 180px; border-radius: 12px; } .loading-stack { display: flex; flex-direction: column; gap: 0.75rem; } @keyframes shimmer { 0% { transform: translateX(0); } 100% { transform: translateX(200%); } } /* Mobile: 1 column by default */ .cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 2rem; } .card { background: var(--bg-secondary); backdrop-filter: blur(10px); border-radius: 16px; box-shadow: 0 10px 25px var(--shadow-sm); overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); animation: fadeInUp 0.6s ease-out; animation-fill-mode: both; border: 1px solid var(--border-color); } [data-theme="dark"] .card { background: rgba(26, 26, 46, 0.9); backdrop-filter: blur(10px); } .card:nth-child(1) { animation-delay: 0.1s; } .card:nth-child(2) { animation-delay: 0.2s; } .card:nth-child(3) { animation-delay: 0.3s; } .card:nth-child(4) { animation-delay: 0.4s; } .card:nth-child(5) { animation-delay: 0.5s; } .card:nth-child(6) { animation-delay: 0.6s; } .card:nth-child(7) { animation-delay: 0.7s; } .card:nth-child(8) { animation-delay: 0.8s; } .card:nth-child(9) { animation-delay: 0.9s; } .card-link { color: inherit; text-decoration: none; display: block; } .card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px var(--shadow-md), 0 0 0 1px rgba(124, 58, 237, 0.25); border-color: var(--accent-primary); } .card-image-wrapper { position: relative; overflow: hidden; } .card-image { width: 100%; display: block; height: 280px; object-fit: cover; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); content-visibility: auto; contain-intrinsic-size: 400px 250px; } .card:hover .card-image { transform: scale(1.1); } .language-pill { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.4rem 1rem; border-radius: 999px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.85) 0%, rgba(124, 58, 237, 0.85) 90%, rgba(236, 72, 153, 0.3) 100%); backdrop-filter: blur(15px) saturate(180%); -webkit-backdrop-filter: blur(15px) saturate(180%); color: #ffffff; font-size: 0.9rem; font-weight: 600; box-shadow: 0 2px 12px rgba(124, 58, 237, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .card-content { padding: 1.5rem 1.75rem 1.75rem; } .card-date { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 0.5rem; transition: color 0.3s ease; } .card-title { font-size: 1.4rem; margin: 0 0 0.5rem; line-height: 1.25; word-break: break-word; hyphens: auto; transition: color 0.3s ease; } .card:hover .card-title { color: var(--accent-primary); } .card-excerpt { font-size: 1rem; color: var(--text-light); line-height: 1.5; transition: color 0.3s ease; } /* Tablet: 2 columns */ @media (min-width: 768px) { .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } .card-image { height: 320px; } .card-content { padding: 1.75rem 2rem 2rem; } .featured-image { height: 600px; } .featured-content { padding: 3rem 4rem 4rem; } .featured-title { font-size: 2.5rem; } } /* Desktop: Keep 2 columns */ @media (min-width: 1024px) { .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } /* 8. Post page */ .post { padding-bottom: 3rem; } .post-header { padding-top: 2rem; } .post-date { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 0.4rem; transition: color 0.3s ease; } .post-title-row { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.4rem; } .post-title { font-size: 2rem; margin: 0 0 0.4rem; color: var(--text-primary); transition: color 0.3s ease; } .post-meta-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0; flex-wrap: wrap; } .language-pill-small { display: inline-flex; align-items: center; padding: 0.4rem 1rem; border-radius: 999px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.85) 0%, rgba(124, 58, 237, 0.85) 90%, rgba(236, 72, 153, 0.3) 100%); backdrop-filter: blur(15px) saturate(180%); -webkit-backdrop-filter: blur(15px) saturate(180%); color: #ffffff; font-size: 0.9rem; font-weight: 600; box-shadow: 0 2px 12px rgba(124, 58, 237, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); text-transform: uppercase; letter-spacing: 0.05em; } .post-meta { font-size: 0.9rem; color: var(--text-light); transition: color 0.3s ease; margin: 0; } .post-hero { margin-top: 1.5rem; } .post-hero-image { width: 100%; border-radius: 18px; } .post-body { margin-top: 2rem; max-width: 780px; } .post-body h2 { margin-top: 1.8rem; margin-bottom: 0.6rem; color: var(--text-primary); transition: color 0.3s ease; } .post-body p { margin-bottom: 0.9rem; color: var(--text-primary); line-height: 1.7; } /* Related Articles Section */ .related-articles { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid var(--border-color); } .related-articles-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 2rem; transition: color 0.3s ease; } .related-articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; max-width: 100%; } .related-article-card { background: var(--bg-secondary); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px var(--shadow-sm); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--border-color); } .related-article-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--shadow-md); border-color: var(--accent-primary); } .related-article-link { display: block; text-decoration: none; color: inherit; } .related-article-image-wrapper { width: 100%; height: 140px; overflow: hidden; position: relative; } .related-article-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .related-article-card:hover .related-article-image { transform: scale(1.05); } .related-article-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0; padding: 1rem 1rem 1.25rem; line-height: 1.4; transition: color 0.3s ease; } .related-article-card:hover .related-article-title { color: var(--accent-primary); } /* Responsive: Related Articles */ @media (min-width: 768px) { .related-articles-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } .related-article-image-wrapper { height: 160px; } } @media (max-width: 767px) { .related-articles-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .related-article-image-wrapper { height: 120px; } .related-article-title { font-size: 0.9rem; padding: 0.875rem; } } @media (max-width: 480px) { .related-articles-grid { grid-template-columns: 1fr; } } .post-body a { color: var(--accent-primary); text-decoration: none; transition: all 0.3s ease; border-bottom: 2px solid transparent; font-weight: 500; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 85%, rgba(236, 72, 153, 0.6) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .post-body a:hover { border-bottom-color: var(--accent-primary); transform: translateX(2px); -webkit-text-fill-color: var(--accent-primary); } /* Video responsive wrapper */ .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; margin: 1rem 0 1.5rem; } .video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* 9. Main content area - flex grow to push footer down */ .site-main { flex: 1; display: flex; flex-direction: column; } /* 9. About page */ .about { padding: 2.5rem 0 3rem; max-width: 780px; } .about-signature { text-align: right; margin-top: 2rem; margin-bottom: 0; } .about-signature b { font-weight: 700; color: var(--text-primary); } /* 10. Footer */ /* Video Section Styles */ .video-section { padding: 4rem 0; background: var(--bg-primary); } .video-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem; } .video-section-title { font-size: 2rem; font-weight: 800; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; } .view-all-videos { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; text-decoration: none; border-radius: 12px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } .view-all-videos:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4); } .videos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; max-width: 900px; margin: 0 auto; } .video-card { background: var(--bg-secondary); border-radius: 16px; overflow: hidden; border: 2px solid var(--border-color); transition: all 0.3s ease; cursor: pointer; position: relative; } .video-card:hover { transform: translateY(-8px); box-shadow: 0 12px 32px rgba(124, 58, 237, 0.25); border-color: var(--accent-secondary); } .video-thumbnail { position: relative; width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--accent-light), var(--bg-secondary)); overflow: hidden; } .video-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .video-cover-text { position: absolute; top: 14px; left: 14px; max-width: calc(100% - 28px); padding: 0.55rem 0.75rem; border-radius: 12px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.22); backdrop-filter: blur(6px); color: #fff; font-weight: 800; font-size: 1.1rem; line-height: 1.05; letter-spacing: -0.01em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); z-index: 3; pointer-events: none; /* don't block click */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .video-play-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.3); transition: background 0.3s ease; } .video-card:hover .video-play-overlay { background: rgba(0, 0, 0, 0.5); } .play-icon { width: 64px; height: 64px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .video-card:hover .play-icon { transform: scale(1.1); background: var(--accent-primary); } .play-icon svg { width: 28px; height: 28px; fill: var(--accent-primary); margin-left: 4px; } .video-card:hover .play-icon svg { fill: white; } .video-duration { position: absolute; bottom: 12px; right: 12px; background: rgba(0, 0, 0, 0.8); color: white; padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; } .video-info { padding: 1.5rem; } .video-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.75rem 0; } .video-description { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; } /* Video Modal */ .video-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 10000; align-items: center; justify-content: center; padding: 2rem; } .video-modal.active { display: flex; } .video-modal-content { position: relative; width: auto; max-width: 90vw; max-height: 90vh; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } /* Vertical video container (9:16 aspect ratio - TikTok/Shorts style) */ .video-modal-content.vertical { max-width: min(90vw, 500px); aspect-ratio: 9/16; } /* Horizontal video container (16:9 aspect ratio) */ .video-modal-content.horizontal { max-width: min(90vw, 1200px); aspect-ratio: 16/9; } .video-modal-close { position: absolute; top: -50px; right: 0; background: white; border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-primary); transition: all 0.3s ease; z-index: 10001; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .video-modal-close:hover { background: var(--accent-primary); color: white; transform: rotate(90deg) scale(1.1); } .video-modal video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; } /* Responsive adjustments */ @media (max-width: 768px) { .videos-grid { grid-template-columns: 1fr; gap: 1.5rem; } .video-section-header { flex-direction: column; align-items: flex-start; } .video-section-title { font-size: 1.75rem; } .video-modal { padding: 0.5rem; } .video-modal-content { max-width: 95vw; max-height: 95vh; border-radius: 12px; } .video-modal-content.vertical { max-width: min(95vw, 450px); } .video-modal-close { top: -45px; width: 40px; height: 40px; font-size: 24px; } } .site-footer { border-top: 1px solid var(--border-color); padding: 2rem 0 6rem; background: var(--bg-primary); transition: background-color 0.3s ease, border-color 0.3s ease; min-height: 120px; content-visibility: auto; contain-intrinsic-size: auto 120px; margin-bottom: 2rem; } /* Back to top button */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border: none; border-radius: 50%; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; } .back-to-top:hover { transform: translateY(-4px); box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4); } .back-to-top:active { transform: translateY(-2px); } .back-to-top svg { width: 24px; height: 24px; fill: white; } .footer-inner { text-align: center; } .footer-content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-bottom: 32px; } .footer-copyright { font-size: 0.85rem; color: var(--text-secondary); transition: color 0.3s ease; margin: 0; padding-bottom: 32px; font-weight: 500; z-index: 1; position: relative; } .footer-contacts { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; justify-content: center; } .contact-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border-radius: 999px; background: var(--bg-secondary); backdrop-filter: blur(10px); border: 1px solid var(--border-color); text-decoration: none; color: var(--text-primary); font-size: 0.9rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .contact-link::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .contact-link:hover::before { opacity: 1; } .contact-link:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); border-color: var(--accent-primary); } .contact-icon { width: 20px; height: 20px; transition: transform 0.3s ease; } .contact-link:hover .contact-icon { transform: scale(1.1); } .contact-text { position: relative; z-index: 1; } [data-theme="dark"] .contact-link { background: rgba(26, 26, 46, 0.9); backdrop-filter: blur(10px); } /* 11. Responsive tweaks - Mobile First */ /* Mobile nav/search hidden by default (shown only on mobile) */ /* Mobile navigation styles */ @media (max-width: 767px) { /* Keep header visible on mobile */ .site-header { display: block; } /* Ensure header-inner maintains flex layout on mobile */ .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .container { padding: 0 1.62rem; } /* Show hamburger button on mobile */ .hamburger-menu { display: flex; margin-left: auto; } /* Transform main-nav into sliding side menu */ .main-nav { position: fixed; top: 64px; right: -100%; width: 280px; max-width: 85vw; height: calc(100vh - 64px); height: calc(100dvh - 64px); background: var(--bg-secondary); backdrop-filter: blur(20px); border-left: 1px solid var(--border-color); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1); flex-direction: column; align-items: flex-start; padding: 2rem 1.5rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); gap: 0.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; } [data-theme="dark"] .main-nav { background: rgba(26, 26, 46, 0.95); backdrop-filter: blur(20px); } /* Show nav when active */ .main-nav.active { right: 0; } /* Stack nav links vertically */ .nav-link { width: 100%; padding: 0.75rem 1rem; text-align: left; font-size: 1rem; } /* Full-width search */ .search-wrapper { width: 100%; margin-left: 0; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); } .search-input { width: 100%; } .search-input:focus { width: 100%; } /* Stack theme toggle */ .theme-toggle { margin-left: 0; margin-top: 1rem; width: 40px; } /* Language switcher in mobile menu */ .language-switcher { width: 100%; margin-top: 0.5rem; } .lang-btn { width: 100%; display: flex; justify-content: space-between; padding: 0.75rem 1rem; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px; } .lang-dropdown { position: static; width: 100%; margin-top: 0.5rem; box-shadow: none; border: 1px solid var(--border-color); } /* Mobile Contact Buttons in Hamburger Menu */ .mobile-contact-menu { width: 100%; display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); } .mobile-contact-btn { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; border: 2px solid transparent; } .mobile-contact-btn .contact-icon { font-size: 1.5rem; display: flex; align-items: center; justify-content: center; } .mobile-contact-btn .contact-label { flex: 1; } /* Gmail Button */ .mobile-contact-btn.gmail-btn { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; } .mobile-contact-btn.gmail-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } /* Telegram Button */ .mobile-contact-btn.telegram-btn { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; } .mobile-contact-btn.telegram-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } /* WhatsApp Button */ .mobile-contact-btn.whatsapp-btn { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; } .mobile-contact-btn.whatsapp-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } /* VK Button */ .mobile-contact-btn.vk-btn { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; } .mobile-contact-btn.vk-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } /* Remove old mobile-nav-search section */ .mobile-nav-search { display: none; } } /* Hide mobile contact menu on desktop */ @media (min-width: 768px) { .mobile-contact-menu { display: none; } } .hero-title { font-size: 2rem; } .hero-description { font-size: 1.1rem; } .hero-banner { min-height: 300px; } .post-title { font-size: 1.6rem; } .featured-image { height: 400px; } .featured-content { padding: 2rem 1.5rem 2.5rem; } .featured-title { font-size: 1.8rem; } .featured-excerpt { font-size: 1rem; } /* Tablet and up */ @media (min-width: 768px) { .header-inner { height: 64px; padding: 0; flex-direction: row; align-items: center; gap: 0; } /* Show theme toggle on tablet and up */ .theme-toggle { display: flex; } .hero-title { font-size: 3rem; } .hero-description { font-size: 1.2rem; } .hero-banner { min-height: 450px; } .post-title { font-size: 2rem; } .search-input { width: 180px; } .search-input:focus { width: 220px; } } /* Desktop */ @media (min-width: 1024px) { .hero-title { font-size: 4rem; } .hero-description { font-size: 1.3rem; } .hero-banner { min-height: 500px; } } /* Mobile: Stack search below nav */ @media (max-width: 767px) { .main-nav { flex-wrap: wrap; width: 100%; } .search-wrapper { margin-left: 0; width: 100%; order: 3; } .search-input { width: 100%; } .search-input:focus { width: 100%; } .theme-toggle { order: 4; margin-top: 0.5rem; margin-left: 0; } .footer-contacts { flex-direction: column; gap: 1rem; width: 100%; max-width: 300px; margin: 0 auto; } .contact-link { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; } .footer-copyright { font-size: 0.9rem; color: var(--text-primary); font-weight: 600; padding-bottom: 32px; margin-bottom: 0; } .site-footer { padding: 2rem 0 calc(8rem + env(safe-area-inset-bottom, 0px)) !important; margin-bottom: 3rem !important; } .footer-content { padding-bottom: 2rem !important; } .back-to-top { bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); right: 1.5rem; width: 44px; height: 44px; } .back-to-top svg { width: 20px; height: 20px; } .site-header { position: sticky !important; top: 0 !important; z-index: 1000 !important; } } /* Platform Carousel Styles */ .platform-carousel-section { margin-top: 4rem; padding: 2rem 0; } .carousel-title { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: var(--text-primary); background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 85%, rgba(236, 72, 153, 0.6) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .carousel-container { position: relative; max-width: 900px; margin: 0 auto; overflow: hidden; border-radius: 16px; box-shadow: 0 10px 40px var(--shadow-md); background: var(--bg-secondary); border: 1px solid var(--border-color); } [data-theme="dark"] .carousel-container { background: rgba(26, 26, 46, 0.9); backdrop-filter: blur(10px); } .carousel-track-container { overflow: hidden; position: relative; } .carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .carousel-slide { min-width: 100%; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); } [data-theme="dark"] .carousel-slide { background: rgba(26, 26, 46, 0.5); } .carousel-image { width: 100%; height: auto; display: block; object-fit: contain; max-height: 500px; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(124, 58, 237, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; font-size: 2.5rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); } .carousel-btn:hover { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); transform: translateY(-50%) scale(1.1); box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6); } .carousel-btn:active { transform: translateY(-50%) scale(0.95); } .carousel-btn-prev { left: 1rem; } .carousel-btn-next { right: 1rem; } .carousel-indicators { display: flex; justify-content: center; gap: 0.5rem; padding: 1.5rem 0; flex-wrap: wrap; } .carousel-indicator { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent-primary); background: transparent; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; } .carousel-indicator:hover { background: var(--accent-secondary); transform: scale(1.2); } .carousel-indicator.active { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); transform: scale(1.3); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4); } /* Mobile adjustments for carousel */ @media (max-width: 767px) { .carousel-title { font-size: 1.5rem; } .carousel-btn { width: 40px; height: 40px; font-size: 2rem; } .carousel-btn-prev { left: 0.5rem; } .carousel-btn-next { right: 0.5rem; } .carousel-image { max-height: 300px; } } /* ======================================== Spanish Bites Page Styles ======================================== */ .spanish-bites { padding: 3rem 0; animation: fadeIn 0.6s ease-out; } .spanish-bites-header { text-align: center; margin-bottom: 3rem; animation: fadeInUp 0.8s ease-out; } .spanish-bites-header h1 { font-size: 2.5rem; font-weight: 800; margin: 0 0 1.5rem; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 70%, rgba(236, 72, 153, 0.8) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .spanish-bites-intro { font-size: 1.15rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.7; } .spanish-bites-description { font-size: 1rem; color: var(--text-light); line-height: 1.6; } /* Bites Grid */ .bites-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; } @media (min-width: 768px) { .bites-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } } @media (min-width: 1024px) { .bites-grid { gap: 3rem; } } /* Bite Card */ .bite-card { background: var(--bg-secondary); backdrop-filter: blur(10px); border-radius: 20px; padding: 2rem; box-shadow: 0 10px 25px var(--shadow-sm); border: 1px solid var(--border-color); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: translateY(30px); display: flex; flex-direction: column; height: 100%; } [data-theme="dark"] .bite-card { background: rgba(26, 26, 46, 0.9); backdrop-filter: blur(10px); } .bite-card.visible { opacity: 1; transform: translateY(0); } .bite-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px var(--shadow-md), 0 0 0 1px rgba(124, 58, 237, 0.25); border-color: var(--accent-primary); } .bite-content { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Bite Text */ .bite-text { margin-bottom: 1.5rem; flex-grow: 1; } .bite-text p { font-size: 1.05rem; line-height: 1.8; color: var(--text-primary); margin: 0; } .bite-text em { color: var(--accent-primary); font-style: italic; font-weight: 600; } /* Bite Card Title */ .bite-title { font-size: 1.1rem; font-weight: 700; color: var(--accent-primary); margin: 0 0 1rem; line-height: 1.3; } /* Translation Buttons */ .translation-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1rem; } .translation-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; border: 2px solid var(--border-color); border-radius: 999px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } [data-theme="dark"] .translation-btn { background: rgba(26, 26, 46, 0.5); } .translation-btn::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); opacity: 0; border-radius: 999px; transition: opacity 0.3s ease; z-index: -1; } .translation-btn:hover::before { opacity: 1; } .translation-btn:hover { color: #ffffff; border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } .translation-btn.active { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); color: #ffffff; border-color: var(--accent-primary); box-shadow: 0 4px 16px rgba(124, 58, 237, 0.4); } .translation-btn.active::before { opacity: 1; } .btn-icon { font-size: 1.1rem; line-height: 1; } /* Translation Content */ .translation-content { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); margin-top: 0; } .translation-content.active { max-height: 500px; opacity: 1; margin-top: 1rem; padding: 1.5rem; background: var(--accent-light); border-radius: 16px; border-left: 4px solid var(--accent-primary); } [data-theme="dark"] .translation-content.active { background: rgba(124, 58, 237, 0.1); border-left-color: var(--accent-secondary); } .translation-content p { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); margin: 0; } .translation-content em { color: var(--accent-primary); font-style: italic; font-weight: 600; } /* Spanish Bites Footer */ .spanish-bites-footer { text-align: center; margin-top: 4rem; padding: 2.5rem; background: var(--bg-secondary); backdrop-filter: blur(10px); border-radius: 20px; border: 1px solid var(--border-color); box-shadow: 0 10px 25px var(--shadow-sm); } [data-theme="dark"] .spanish-bites-footer { background: rgba(26, 26, 46, 0.9); } .spanish-bites-footer h2 { font-size: 1.8rem; margin: 0 0 1rem; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 70%, rgba(236, 72, 153, 0.8) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .spanish-bites-footer p { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1rem; } .contact-link-inline { color: var(--accent-primary); text-decoration: none; font-weight: 600; transition: all 0.3s ease; position: relative; } .contact-link-inline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(135deg, var(--accent-primary) 0%, rgba(236, 72, 153, 0.8) 100%); transition: width 0.3s ease; } .contact-link-inline:hover::after { width: 100%; } .contact-link-inline:hover { color: var(--accent-dark); } .footer-signature { margin-top: 1.5rem; font-size: 1.1rem; color: var(--text-light); } .footer-signature strong { color: var(--accent-primary); font-size: 1.2rem; } /* Mobile Responsive Adjustments */ @media (max-width: 767px) { .spanish-bites { padding: 2rem 0; } .spanish-bites-header h1 { font-size: 2rem; } .spanish-bites-intro, .spanish-bites-description { font-size: 0.95rem; } .bite-card { padding: 1.5rem; } .bite-text p { font-size: 1rem; } .translation-buttons { gap: 0.5rem; } .translation-btn { padding: 0.5rem 1rem; font-size: 0.85rem; } .spanish-bites-footer { padding: 2rem 1.5rem; } .spanish-bites-footer h2 { font-size: 1.5rem; } } /* =================================== Spanish Level Challenge Styles =================================== */ /* Level Section */ .level-section { padding: 4rem 0; min-height: calc(100vh - 80px); } /* Hero */ .level-hero { text-align: center; margin-bottom: 4rem; } .level-title { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1rem; } .level-subtitle { font-size: 1.2rem; color: var(--text-secondary); max-width: 700px; margin: 0 auto 2rem; line-height: 1.6; } .level-stats { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; } .stat-item { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; background: var(--bg-secondary); border-radius: 12px; border: 1px solid var(--border-color); } .stat-icon { font-size: 1.5rem; } .stat-label { font-size: 1rem; color: var(--text-secondary); } .stat-label strong { color: var(--accent-primary); font-weight: 700; } /* Levels Grid */ .levels-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 4rem; } /* Level Card */ .level-card { background: var(--bg-secondary); border-radius: 20px; padding: 2rem; border: 2px solid var(--border-color); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; display: flex; flex-direction: column; } [data-theme="dark"] .level-card { background: rgba(26, 26, 46, 0.9); } .level-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px var(--shadow-md); border-color: var(--accent-primary); } .level-card.locked { opacity: 0.6; cursor: not-allowed; } .level-card.locked:hover { transform: none; box-shadow: none; } .level-card.completed { border-color: #10b981; } .level-badge { font-size: 2rem; margin-bottom: 1rem; } .lock-icon { position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; opacity: 0.5; } .level-name { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; } .level-description { color: var(--text-secondary); margin-bottom: 1.5rem; flex-grow: 1; } /* Progress Bar */ .level-progress { margin-bottom: 1.5rem; } .progress-bar { width: 100%; height: 8px; background: var(--bg-primary); border-radius: 999px; overflow: hidden; margin-bottom: 0.5rem; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); border-radius: 999px; transition: width 0.5s ease; width: 0%; } .progress-text { font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; } /* Level Button */ .level-btn { width: 100%; padding: 0.875rem 1.5rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .level-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4); } .level-btn:disabled { background: var(--bg-tertiary); color: var(--text-secondary); cursor: not-allowed; opacity: 0.5; } /* Challenge Modal */ .challenge-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .challenge-modal.active { display: flex; } .challenge-content { background: var(--bg-primary); border-radius: 20px; padding: 2rem; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); } [data-theme="dark"] .challenge-content { background: var(--bg-secondary); } .close-btn { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 2rem; color: var(--text-secondary); cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; } .close-btn:hover { background: var(--bg-secondary); color: var(--text-primary); } /* Challenge */ .challenge { padding-top: 1rem; } .challenge-title { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.5rem; } .challenge-question { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 2rem; line-height: 1.6; } .challenge-options { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .option-btn { padding: 1rem 1.5rem; background: var(--bg-secondary); border: 2px solid var(--border-color); border-radius: 12px; font-size: 1rem; color: var(--text-primary); cursor: pointer; transition: all 0.3s ease; text-align: left; } [data-theme="dark"] .option-btn { background: rgba(26, 26, 46, 0.5); } .option-btn:hover:not(:disabled) { border-color: var(--accent-primary); background: var(--bg-tertiary); transform: translateX(5px); } .option-btn:disabled { cursor: not-allowed; } .option-btn.correct { border-color: #10b981; background: rgba(16, 185, 129, 0.1); color: #10b981; } .option-btn.incorrect { border-color: #ef4444; background: rgba(239, 68, 68, 0.1); color: #ef4444; } /* Challenge Feedback */ .challenge-feedback { margin-top: 1.5rem; padding: 1rem; border-radius: 12px; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; } .challenge-feedback.show { opacity: 1; transform: translateY(0); } .challenge-feedback p { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; } .challenge-feedback .correct { color: #10b981; } .challenge-feedback .incorrect { color: #ef4444; } .next-btn { width: 100%; padding: 1rem 1.5rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .next-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4); } /* Responsive */ @media (max-width: 768px) { .level-title { font-size: 2rem; } .level-subtitle { font-size: 1rem; } .levels-grid { grid-template-columns: 1fr; } .level-stats { flex-direction: column; gap: 1rem; } .challenge-content { padding: 1.5rem; } .challenge-title { font-size: 1.5rem; } .challenge-question { font-size: 1.1rem; } } /* C2 Completion Modal */ .c2-completion { text-align: center; padding: 2rem; max-width: 600px; margin: 0 auto; } .completion-header { margin-bottom: 2rem; } .completion-title { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, #fbbf24, #f59e0b, #dc2626); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; animation: celebration 2s ease-in-out infinite; } @keyframes celebration { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .completion-subtitle { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); } .completion-score { background: var(--bg-secondary); padding: 1.5rem; border-radius: 16px; margin-bottom: 2rem; border: 2px solid var(--accent-primary); } .score-text { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--text-primary); } .achievement-text { font-size: 1.1rem; color: var(--accent-primary); font-weight: 600; } .completion-reward { background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(236, 72, 153, 0.1)); padding: 1.5rem; border-radius: 16px; margin-bottom: 2rem; border: 2px solid var(--accent-secondary); } .reward-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; } .reward-text { font-size: 1.1rem; line-height: 1.6; color: var(--text-secondary); } .completion-contact { margin-bottom: 2rem; } .contact-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; } .contact-subtitle { font-size: 1rem; color: var(--text-secondary); margin-bottom: 1.5rem; } .contact-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .contact-btn { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; border-radius: 12px; text-decoration: none; transition: all 0.3s ease; min-width: 120px; border: 2px solid transparent; } .contact-btn:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .email-btn { background: linear-gradient(135deg, #3b82f6, #2563eb); color: white; } .email-btn:hover { border-color: #1d4ed8; } .telegram-btn { background: linear-gradient(135deg, #0088cc, #0077b5); color: white; } .telegram-btn:hover { border-color: #006699; } .whatsapp-btn { background: linear-gradient(135deg, #25d366, #128c7e); color: white; } .whatsapp-btn:hover { border-color: #075e54; } .btn-icon { font-size: 2rem; } .btn-text { font-size: 1rem; font-weight: 600; } .completion-footer { margin-top: 2rem; padding-top: 2rem; border-top: 2px solid var(--border-color); } .footer-message { font-size: 1rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 1rem; } .footer-signature { font-size: 1.1rem; font-weight: 600; font-style: italic; color: var(--text-primary); margin-bottom: 1.5rem; } .close-completion-btn { padding: 0.75rem 2rem; background: var(--bg-tertiary); color: var(--text-primary); border: 2px solid var(--border-color); border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .close-completion-btn:hover { background: var(--bg-secondary); border-color: var(--accent-primary); transform: translateY(-2px); } /* Responsive for C2 Completion */ @media (max-width: 768px) { .c2-completion { padding: 1rem; } .completion-title { font-size: 2rem; } .completion-subtitle { font-size: 1.2rem; } .contact-buttons { flex-direction: column; } .contact-btn { width: 100%; } } /* Hide lock icon on completed levels */ .level-card.completed .lock-icon { display: none; } /* Hearts System Styling */ .challenge-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; gap: 1rem; } .challenge-hearts { font-size: 1.5rem; letter-spacing: 0.25rem; animation: heartbeat 0.3s ease; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Game Over Modal */ .game-over-modal { text-align: center; padding: 2rem; max-width: 500px; margin: 0 auto; } .game-over-icon { font-size: 5rem; margin-bottom: 1rem; animation: heartbreak 0.6s ease; } @keyframes heartbreak { 0% { transform: scale(1); } 25% { transform: scale(1.2) rotate(-10deg); } 50% { transform: scale(1.1) rotate(10deg); } 75% { transform: scale(1.2) rotate(-5deg); } 100% { transform: scale(1); } } .game-over-title { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: 0.5rem; } .game-over-message { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem; } .game-over-hearts { background: var(--bg-secondary); padding: 1.5rem; border-radius: 16px; margin-bottom: 2rem; border: 2px solid rgba(239, 68, 68, 0.3); } .hearts-lost { font-size: 3rem; letter-spacing: 0.5rem; margin-bottom: 0.5rem; } .hearts-text { font-size: 1rem; color: var(--text-secondary); font-weight: 600; } .game-over-info { background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(236, 72, 153, 0.1)); padding: 1.5rem; border-radius: 16px; margin-bottom: 2rem; text-align: left; } .game-over-info p { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; } .game-over-info ul { list-style: none; padding: 0; margin: 0; } .game-over-info li { font-size: 1rem; color: var(--text-secondary); padding: 0.5rem 0; padding-left: 0.5rem; } /* Retry Button - Matches site design */ .retry-btn { width: 100%; padding: 1rem 1.5rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } .retry-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4); } .retry-btn:active { transform: translateY(0); } /* Responsive */ @media (max-width: 768px) { .challenge-header { flex-direction: column; align-items: flex-start; } .challenge-hearts { font-size: 1.3rem; } .game-over-modal { padding: 1.5rem; } .game-over-icon { font-size: 4rem; } .game-over-title { font-size: 2rem; } } /* Info Modal (Coming Soon) */ .info-modal { text-align: center; padding: 2rem; max-width: 450px; margin: 0 auto; } .info-icon { font-size: 5rem; margin-bottom: 1rem; animation: bounce 1s ease infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .info-title { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: 1rem; } .info-message { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 0.5rem; } .info-submessage { font-size: 1rem; color: var(--text-secondary); margin-bottom: 2rem; opacity: 0.8; } .info-btn { padding: 1rem 3rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } .info-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4); } /* Failed Level Modal */ .failed-modal { text-align: center; padding: 2rem; max-width: 500px; margin: 0 auto; } .failed-icon { font-size: 5rem; margin-bottom: 1rem; animation: shake 0.5s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } } .failed-title { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: 1.5rem; } .failed-score { background: var(--bg-secondary); padding: 1.5rem; border-radius: 16px; margin-bottom: 1.5rem; border: 2px solid rgba(239, 68, 68, 0.3); } .score-label { font-size: 1rem; color: var(--text-secondary); margin-bottom: 0.5rem; font-weight: 600; } .score-value { font-size: 2rem; font-weight: 800; color: var(--text-primary); } .failed-message { background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1)); padding: 1.5rem; border-radius: 16px; margin-bottom: 2rem; border: 2px solid rgba(239, 68, 68, 0.2); } .message-text { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 0.5rem; font-weight: 600; } .message-encourage { font-size: 1rem; color: var(--text-secondary); } /* Completion Modal (A1-C1) */ .completion-modal { text-align: center; padding: 2rem; max-width: 500px; margin: 0 auto; } .completion-icon { font-size: 5rem; margin-bottom: 1rem; animation: celebrate 0.6s ease; } @keyframes celebrate { 0% { transform: scale(0) rotate(0deg); } 50% { transform: scale(1.2) rotate(180deg); } 100% { transform: scale(1) rotate(360deg); } } .completion-title { font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; } .completion-subtitle { font-size: 1.3rem; font-weight: 600; color: var(--text-primary); margin-bottom: 2rem; } .completion-score { background: var(--bg-secondary); padding: 1.5rem; border-radius: 16px; margin-bottom: 1.5rem; border: 2px solid var(--accent-primary); } .completion-reward { background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(236, 72, 153, 0.1)); padding: 1.5rem; border-radius: 16px; margin-bottom: 2rem; border: 2px solid var(--accent-secondary); } .reward-icon { font-size: 3rem; margin-bottom: 0.5rem; animation: unlock 0.6s ease; } @keyframes unlock { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-10deg); } 100% { transform: translateY(0) rotate(0deg); } } .reward-text { font-size: 1.1rem; color: var(--text-primary); font-weight: 600; } .continue-btn { width: 100%; padding: 1rem 1.5rem; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white; border: none; border-radius: 12px; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } .continue-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4); } /* Responsive for new modals */ @media (max-width: 768px) { .info-modal, .failed-modal, .completion-modal { padding: 1.5rem; } .info-icon, .failed-icon, .completion-icon { font-size: 4rem; } .info-title, .failed-title, .completion-title { font-size: 2rem; } .completion-subtitle { font-size: 1.1rem; } .score-value { font-size: 1.5rem; } } /* Language Switcher */ .language-switcher { position: relative; margin-left: 0.5rem; } .lang-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.9rem; background: var(--bg-secondary); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.9rem; color: var(--text-secondary); font-family: "Inter", system-ui, sans-serif; } [data-theme="dark"] .lang-btn { background: rgba(26, 26, 46, 0.9); backdrop-filter: blur(10px); } .lang-btn:hover { border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } .lang-icon { font-size: 1.1rem; } .lang-text { font-weight: 600; letter-spacing: 0.02em; } .lang-dropdown { position: absolute; top: calc(100% + 0.5rem); right: 0; background: var(--bg-secondary); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: 0 10px 25px var(--shadow-md); min-width: 150px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; overflow: hidden; } [data-theme="dark"] .lang-dropdown { background: rgba(26, 26, 46, 0.95); backdrop-filter: blur(20px) saturate(180%); } .lang-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); } .lang-option { display: block; padding: 0.75rem 1.25rem; color: var(--text-secondary); text-decoration: none; transition: all 0.2s ease; font-size: 0.9rem; border-bottom: 1px solid var(--border-color); } .lang-option:last-child { border-bottom: none; } .lang-option:hover { background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary) 90%, rgba(236, 72, 153, 0.3) 100%); color: #ffffff; } .lang-option.active { background: var(--accent-light); color: var(--accent-primary); font-weight: 600; } /* =================================== Mobile Header & Footer Fixes - v7 =================================== */ /* Ensure header is always visible on mobile */ @media (max-width: 768px) { .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(250, 250, 250, 0.95); backdrop-filter: blur(10px); } .header-inner { padding: 0.75rem 1rem; } .logo { z-index: 1001; } .logo-img { width: 36px; height: 36px; } .logo-text { font-size: 1rem; } /* Ensure hamburger is always visible */ .hamburger-menu { z-index: 1001; position: relative; } /* Footer improvements */ .footer-copyright { color: var(--text-primary) !important; font-weight: 600 !important; font-size: 0.9rem; padding-bottom: 32px !important; margin-bottom: 0 !important; } /* Contact buttons mobile fix */ .contact-buttons { display: flex !important; flex-direction: column; gap: 1rem; width: 100%; } .contact-btn { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 1rem 1.5rem; font-size: 1rem; visibility: visible !important; opacity: 1 !important; } /* Gmail button specific fix */ .contact-btn[href*="mailto"] { background: linear-gradient(135deg, #ea4335 0%, #c5221f 100%) !important; color: white !important; display: flex !important; } /* Telegram button */ .contact-btn[href*="telegram"] { background: linear-gradient(135deg, #0088cc 0%, #006699 100%) !important; color: white !important; display: flex !important; } /* WhatsApp button */ .contact-btn[href*="whatsapp"] { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important; color: white !important; display: flex !important; } } /* Extra small mobile devices */ @media (max-width: 480px) { .header-inner { padding: 0.6rem 0.75rem; } .logo-img { width: 32px; height: 32px; } .logo-text { font-size: 0.95rem; } .footer-copyright { font-size: 0.85rem; padding-bottom: 32px !important; margin-bottom: 0 !important; } .contact-btn { min-height: 48px; padding: 0.9rem 1.25rem; font-size: 0.95rem; } }