/* Google Fonts are loaded in to avoid CSS @import render-blocking */ :root { /* Paleta cartoon inspirada en Rugrats - colores vibrantes y juguetones */ --brand-navy: #2E4BA6; /* azul cartoon vibrante */ --brand-teal: #00D4AA; /* verde-azul brillante */ --brand-pink: #FF69B4; /* rosa chicle vibrante */ --brand-orange: #FF8C42; /* naranja jugoso */ --brand-yellow: #FFD23F; /* amarillo sol brillante */ /* RGB variants for alpha uses */ --brand-pink-rgb: 255,105,180; --brand-yellow-rgb: 255,210,63; --brand-teal-rgb: 0,212,170; --brand-navy-rgb: 46,75,166; --brand-orange-rgb: 255,140,66; /* Colores adicionales cartoon */ --cartoon-purple: #9B59B6; --cartoon-green: #2ECC71; --cartoon-red: #E74C3C; --cartoon-light-blue: #74C0FC; /* Layout */ --layout-max-width: 1200px; /* Text colors */ --text-primary: #2C3E50; --text-secondary: #555; --bg-primary: rgba(255, 255, 255, 0.8); } /* Dark mode support */ @media (prefers-color-scheme: dark) { :root { --text-primary: #E8E8E8; --text-secondary: #B8B8B8; --bg-primary: rgba(30, 30, 40, 0.9); --brand-navy: #5A7FD6; --brand-teal: #2EEABC; --brand-pink: #FF8FC7; --brand-orange: #FFB075; } body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #1a1a2e 100%); } .container { background-color: var(--bg-primary); border-color: var(--brand-orange); color: var(--text-primary); } .log-box { background-color: rgba(30, 30, 40, 0.8); border-color: var(--brand-navy); color: var(--text-primary); } } /* Reset y base */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Fredoka", cursive; background: linear-gradient(135deg, var(--cartoon-light-blue) 0%, var(--brand-yellow) 25%, var(--brand-pink) 50%, var(--brand-teal) 75%, var(--cartoon-purple) 100%); background-attachment: fixed; color: var(--text-primary); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: 100vh; margin: 0; padding: 20px; /* animation: backgroundShift 8s ease-in-out infinite alternate; */ /* Removed to prevent content overlap */ /* Ensure proper stacking context */ position: relative; isolation: isolate; } body.noscroll { overflow: hidden; } /* Ensure `position: fixed` children (the spinner-backdrop) remain fixed to the viewport when the overlay is active. Animations or filters on `body` can create a containing block and break fixed positioning, so disable them here. */ body.noscroll { /* keep existing overflow rule */ overflow: hidden; /* stop background animation that applies a `filter` */ animation: none !important; /* clear any filter that would create a containing block */ filter: none !important; -webkit-filter: none !important; /* undo will-change if present */ will-change: auto !important; } @keyframes backgroundShift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(10deg); } } /* Container principal con estilo cartoon */ .container { /* background: linear-gradient(145deg, #ffffff, #f8f9ff); */ background-color: rgba(255, 255, 255, 0.98); /* Blanco con 98% de opacidad para mejor legibilidad */ padding: 40px; border-radius: 30px; box-shadow: 0 20px 40px rgba(var(--brand-navy-rgb), 0.15), 0 8px 16px rgba(var(--brand-pink-rgb), 0.1), inset 0 2px 0 rgba(255,255,255,0.8); width: 100%; max-width: var(--layout-max-width); margin: 0 auto 1.5rem auto; /* Remove top margin, header has bottom margin */ text-align: center; position: relative; z-index: 10; border: 4px solid var(--brand-orange); transform: rotate(-0.5deg); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); isolation: isolate; } .container:hover { transform: rotate(0deg) scale(1.01); box-shadow: 0 25px 50px rgba(var(--brand-navy-rgb), 0.2), 0 15px 25px rgba(var(--brand-pink-rgb), 0.15); } /* Subtitle text styling */ #subtitle { color: var(--brand-navy); font-size: 1.2rem; margin: 1rem 0; line-height: 1.6; } /* Header estilo cartoon */ .site-header { position: relative; width: calc(100% + 40px); /* Compensate body padding */ margin-left: -20px; margin-right: -20px; background: linear-gradient(135deg, var(--brand-navy), var(--cartoon-purple)); backdrop-filter: blur(10px); border-bottom: 6px solid var(--brand-yellow); padding: 20px; border-radius: 25px 25px 0 0; box-shadow: 0 8px 20px rgba(var(--brand-navy-rgb), 0.3), inset 0 2px 0 rgba(255,255,255,0.2); margin-bottom: 3rem; /* Extra space to prevent rotation overlap */ z-index: 1000; isolation: isolate; } .header-inner { margin: 0 auto; max-width: var(--layout-max-width); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .header-left { text-align: left; display: flex; align-items: center; gap: 15px; } .header-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end; } .brand { display: inline-flex; align-items: center; gap: 15px; text-decoration: none; transition: transform 0.3s ease; } .brand:hover { transform: scale(1.05) rotate(1deg); animation: bounce 0.6s ease; } @keyframes bounce { 0%, 20%, 60%, 100% { transform: translateY(0) scale(1.05); } 40% { transform: translateY(-10px) scale(1.1); } 80% { transform: translateY(-5px) scale(1.07); } } .site-logo { width: 55px; height: auto; border-radius: 50%; border: 3px solid var(--brand-yellow); box-shadow: 0 4px 12px rgba(var(--brand-yellow-rgb), 0.4); transition: all 0.3s ease; } .brand-text h1 { margin: 0; font-size: 1.5rem; color: #ffffff; font-family: "Bubblegum Sans", cursive; text-shadow: 3px 3px 0 var(--brand-pink), -1px -1px 0 var(--brand-teal); letter-spacing: 0.5px; line-height: 1.2; } .tagline { margin: 5px 0 0 0; color: var(--brand-yellow); font-size: 0.9rem; font-weight: 500; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } /* Navegación cartoon */ .header-nav .nav-list { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; flex-wrap: wrap; } .header-nav .nav-list a { color: #ffffff; text-decoration: none; padding: 12px 18px; border-radius: 20px; font-weight: 600; background: rgba(255,255,255,0.15); border: 2px solid transparent; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); font-size: 0.95rem; white-space: nowrap; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } .header-nav .nav-list a:hover, .header-nav .nav-list a:focus { background: var(--brand-yellow); color: var(--brand-navy); border-color: var(--brand-pink); transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 16px rgba(var(--brand-yellow-rgb), 0.4); text-shadow: none; } /* File input con estilo cartoon super divertido */ .file-input-container { background: linear-gradient(145deg, var(--brand-yellow), var(--brand-orange)); border: 4px dashed var(--brand-pink); border-radius: 25px; padding: 50px 30px; cursor: pointer; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--brand-navy); font-weight: 600; position: relative; overflow: hidden; transform: rotate(0.5deg); } .file-input-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px ); animation: stripes 20s linear infinite; opacity: 0; transition: opacity 0.3s ease; } @keyframes stripes { 0% { transform: translateX(-20px) translateY(-20px); } 100% { transform: translateX(20px) translateY(20px); } } .file-input-container:hover::before { opacity: 1; } .file-input-container:hover { border-color: var(--brand-teal); background: linear-gradient(145deg, var(--brand-teal), var(--cartoon-green)); transform: rotate(0deg) scale(1.03); box-shadow: 0 15px 30px rgba(var(--brand-pink-rgb), 0.3), 0 8px 16px rgba(var(--brand-teal-rgb), 0.2); animation: wiggle 0.8s ease; } @keyframes wiggle { 0%, 7% { transform: rotate(0deg) scale(1.03); } 15% { transform: rotate(-1deg) scale(1.03); } 20% { transform: rotate(1deg) scale(1.03); } 25% { transform: rotate(0deg) scale(1.03); } } .file-input-container.drag-over { border-color: var(--cartoon-green); background: linear-gradient(145deg, var(--cartoon-green), var(--brand-teal)); transform: scale(1.05); animation: pulse 1s ease infinite; } @keyframes pulse { 0%, 100% { transform: scale(1.05); } 50% { transform: scale(1.08); } } .file-input-container svg { margin-bottom: 20px; fill: var(--brand-navy); transition: all 0.3s ease; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2)); } .file-input-container:hover svg { fill: #ffffff; transform: scale(1.1) rotate(5deg); } .file-input { display: none; } #file-label { font-weight: 700; font-size: 1.3rem; margin-bottom: 10px; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); } .file-hint { display: block; margin-top: 15px; color: rgba(var(--brand-navy-rgb), 0.8); font-size: 1rem; font-weight: 500; } /* Botones cartoon súper divertidos */ .button { background: linear-gradient(135deg, var(--brand-pink), var(--cartoon-red)); color: #ffffff; padding: 18px 35px; border: none; border-radius: 25px; font-size: 1.1rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); font-weight: 700; margin-top: 25px; box-shadow: 0 8px 20px rgba(var(--brand-pink-rgb), 0.3), 0 4px 8px rgba(0,0,0,0.1); font-family: "Fredoka", cursive; text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; } .button:disabled { background: linear-gradient(135deg, rgba(var(--brand-orange-rgb),0.5), rgba(var(--brand-yellow-rgb),0.5)); cursor: not-allowed; opacity: 0.7; transform: none; } .button:hover:enabled { transform: translateY(-4px) scale(1.05); box-shadow: 0 12px 25px rgba(var(--brand-pink-rgb), 0.4), 0 8px 16px rgba(0,0,0,0.2); background: linear-gradient(135deg, var(--cartoon-red), var(--brand-pink)); } .button:active:enabled { transform: translateY(-2px) scale(1.02); animation: buttonPress 0.2s ease; } @keyframes buttonPress { 0% { transform: translateY(-4px) scale(1.05); } 50% { transform: translateY(-1px) scale(1.01); } 100% { transform: translateY(-2px) scale(1.02); } } /* Log box cartoon */ .log-box { background: linear-gradient(145deg, #ffffff, var(--cartoon-light-blue)); border-radius: 20px; text-align: left; padding: 25px; margin-top: 30px; height: 200px; overflow-y: auto; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New", monospace; color: var(--brand-navy); line-height: 1.6; border: 3px solid var(--brand-teal); font-size: 1rem; box-shadow: 0 8px 20px rgba(var(--brand-teal-rgb), 0.2), inset 0 2px 4px rgba(255,255,255,0.8); } .log-box { /* Standardize scrollbar appearance across browsers for the log area */ /* Firefox */ scrollbar-width: thin; scrollbar-color: rgba(var(--brand-teal-rgb), 0.85) rgba(0,0,0,0.04); } /* WebKit-based browsers (Chrome, Edge, Safari) */ .log-box::-webkit-scrollbar { width: 12px; height: 12px; } .log-box::-webkit-scrollbar-track { background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(0,0,0,0.02)); border-radius: 10px; margin: 6px 0; } .log-box::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(var(--brand-teal-rgb), 0.95), rgba(var(--brand-teal-rgb), 0.78)); border-radius: 10px; border: 3px solid rgba(255,255,255,0.6); /* create padding effect */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); } .log-box::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(var(--brand-pink-rgb),0.95), rgba(var(--brand-teal-rgb),0.85)); } /* When a keyboard focus lands on the log box make scrollbar and outline clear */ .log-box:focus { outline: 3px solid rgba(var(--brand-yellow-rgb), 0.22); outline-offset: 2px; } .log-box.hidden { display: none !important; } /* Spinner overlay */ .spinner-backdrop { position: fixed; inset: 0; /* top:0; right:0; bottom:0; left:0 */ width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 99999; pointer-events: auto; /* ensure clicks are blocked */ -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: fadeIn 180ms ease both; } .spinner-backdrop.hidden { display: none !important; pointer-events: none; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Fix: When the backdrop/spinner is shown we may add `body.noscroll`. Some ancestors (e.g. `.container`) use `transform` which creates a containing block and causes `position: fixed` children to be clipped to that ancestor instead of the viewport. Remove the transform while the backdrop is active so the overlay truly covers the viewport. */ body.noscroll .container { transform: none !important; } /* Extra defensive rules: ensure the backdrop fills the viewport */ .spinner-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; } .spinner { width: 72px; height: 72px; border-radius: 50%; position: relative; box-sizing: border-box; /* Outer ring subtle */ border: 8px solid rgba(255,255,255,0.08); /* Create a colorful top segment using conic-gradient for modern look */ background: conic-gradient( var(--brand-pink) 0deg 120deg, var(--brand-yellow) 120deg 240deg, var(--brand-teal) 240deg 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px)); mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 12px)); animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinner-text { color: #ffffff; margin-top: 18px; font-size: 1.1rem; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.6); } .sr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .log-box .download-link { color: var(--brand-pink); text-decoration: none; font-weight: bold; transition: color 0.3s ease; } .log-box .download-link:hover { color: var(--cartoon-red); text-decoration: underline; } .log-box .success { color: var(--cartoon-green); font-weight: bold; } .log-box .error { color: var(--cartoon-red); font-weight: bold; } .log-box .warning { color: var(--brand-orange); font-weight: bold; } /* SEO content con estilo cartoon */ .seo-content { text-align: left; margin-top: 30px; background: linear-gradient(145deg, rgba(var(--brand-yellow-rgb),0.1), rgba(var(--cartoon-light-blue),0.1)); border: 3px solid var(--brand-orange); padding: 25px; border-radius: 20px; color: var(--brand-navy); font-size: 1rem; box-shadow: 0 8px 20px rgba(var(--brand-orange-rgb), 0.1), inset 0 2px 4px rgba(255,255,255,0.6); } .seo-content h2 { color: var(--brand-navy); margin: 0 0 15px 0; font-size: 1.4rem; font-family: "Bubblegum Sans", cursive; text-shadow: 1px 1px 2px rgba(var(--brand-yellow-rgb), 0.3); } /* Install CTA section */ .install-cta { display: flex; align-items: center; justify-content: space-between; margin: 2rem 0; padding: 1.5rem 2rem; background: linear-gradient(135deg, rgba(var(--brand-teal-rgb), 0.1), rgba(var(--brand-navy-rgb), 0.05)); border: 3px solid var(--brand-teal); border-radius: 20px; gap: 1rem; } .install-cta-inner { flex: 1; } #install-cta-title { color: var(--brand-navy); margin: 0; font-size: 1.3rem; font-family: "Bubblegum Sans", cursive; } .seo-content h3 { color: var(--brand-pink); margin-top: 20px; margin-bottom: 10px; font-size: 1.1rem; font-weight: 600; } .seo-content ul, .seo-content ol { margin: 10px 0 15px 25px; } .seo-content li { margin-bottom: 8px; line-height: 1.5; } .seo-content dt { font-weight: 600; color: var(--brand-teal); margin-top: 12px; } .seo-content dd { margin: 6px 0 12px 0; color: var(--brand-navy); } /* Footer cartoon */ .footer { position: static; width: 100%; margin-top: 40px; padding: 25px; background: linear-gradient(135deg, var(--brand-navy), var(--cartoon-purple)); border-top: 6px solid var(--brand-yellow); border-radius: 0 0 25px 25px; text-align: center; box-shadow: 0 -8px 20px rgba(var(--brand-navy-rgb), 0.3), inset 0 2px 0 rgba(255,255,255,0.2); } .footer-inner { max-width: var(--layout-max-width); margin: 0 auto; } .footer-grid { display: flex; gap: 30px; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .footer-col { min-width: 200px; } .footer-links h4 { margin: 0 0 15px 0; color: #ffffff; font-family: "Bubblegum Sans", cursive; font-size: 1.1rem; } .footer-links ul { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: var(--brand-yellow); text-decoration: none; font-weight: 500; transition: all 0.3s ease; /* increase padding so tap targets meet 44x44px guideline while keeping visual style */ padding: 8px 12px; border-radius: 10px; display: inline-block; min-height: 44px; line-height: 1.2; } .footer-links a:hover { color: var(--brand-pink); background: rgba(255,255,255,0.1); transform: translateX(5px); } .footer-legal { color: var(--brand-teal); font-weight: 500; margin-top: 15px; } .footer-legal a { color: var(--brand-yellow); font-weight: 600; /* larger tappable area for legal links (privacy / powered-by) */ display: inline-block; padding: 8px 10px; min-height: 44px; line-height: 1.2; border-radius: 8px; } /* If link content is only an image or small icon, ensure image has padding so the clickable area remains large enough */ .footer-legal a img, .footer-links a img { display: inline-block; vertical-align: middle; max-height: 28px; padding: 8px; box-sizing: content-box; } /* Language selector cartoon */ .language-selector { position: relative; font-size: 1rem; color: var(--brand-yellow); display: flex; align-items: center; gap: 8px; white-space: nowrap; } .language-selector label { font-weight: 600; font-size: 0.9rem; } .language-selector select { background: var(--brand-navy); color: #ffffff; border: 3px solid var(--brand-yellow); border-radius: 15px; padding: 8px 15px; cursor: pointer; font-size: 1rem; font-weight: 600; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD23F'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; padding-right: 40px; transition: all 0.3s ease; } /* Standardize select dropdown appearance and stacking to avoid it being cut off */ #lang-select { min-width: 160px; max-width: 320px; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; z-index: 9999; /* ensure the native dropdown is visible above most custom elements */ background-clip: padding-box; } /* On focus show a stronger outline for accessibility */ #lang-select:focus { outline: 3px solid rgba(var(--brand-yellow-rgb), 0.35); transform: scale(1.02); } /* On small screens make the select larger and easier to tap */ @media (max-width: 480px) { #lang-select { min-width: 200px; max-width: 100%; padding-left: 12px; padding-right: 46px; } } .language-selector select:focus { outline: none; border-color: var(--brand-pink); box-shadow: 0 0 0 4px rgba(var(--brand-pink-rgb), 0.3); transform: scale(1.05); } /* PWA install button in header */ .pwa-install { display: inline-flex; align-items: center; margin-left: 12px; } .pwa-install-btn { background: transparent; border: 0; padding: 6px; border-radius: 8px; cursor: pointer; } .pwa-install-btn img { display: block; width: 36px; height: 36px; } /* Subtle bounce animation for the install icon */ @keyframes installBounce { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-6px) scale(1.05); } 60% { transform: translateY(0) scale(0.98); } 100% { transform: translateY(0) scale(1); } } .pwa-install-btn img { animation: installBounce 2.2s ease-in-out infinite; transform-origin: center bottom; } .pwa-install-btn:hover img, .pwa-install-btn:focus img { animation-play-state: paused; transform: translateY(-4px) scale(1.06); } /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { .pwa-install-btn img { animation: none !important; } } .pwa-install-btn:focus { outline: 3px solid var(--brand-yellow); } /* Force the PWA install button and icon visible even when inline styles try to hide it */ .pwa-install-btn, .pwa-install-btn img { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } /* Palette swatches cartoon */ .palette-swatches { margin-top: 25px; text-align: left; color: var(--brand-navy); } .palette-swatches .swatches { display: flex; gap: 15px; margin-top: 15px; flex-wrap: wrap; } .swatch { width: 80px; height: 60px; border-radius: 15px; display: flex; align-items: flex-end; justify-content: center; padding: 8px; font-size: 0.8rem; color: #ffffff; box-shadow: 0 8px 16px rgba(0,0,0,0.2), inset 0 2px 4px rgba(255,255,255,0.3); border: 3px solid #ffffff; transition: transform 0.3s ease; } .swatch:hover { transform: scale(1.1) rotate(3deg); } .swatch span { background: rgba(0,0,0,0.4); padding: 3px 8px; border-radius: 8px; font-weight: bold; } .swatch-navy { background: var(--brand-navy); } .swatch-teal { background: var(--brand-teal); } .swatch-pink { background: var(--brand-pink); } .swatch-orange { background: var(--brand-orange); } .swatch-yellow { background: var(--brand-yellow); color: var(--brand-navy); } /* Links globales cartoon */ a { color: var(--brand-teal); text-decoration: none; font-weight: 600; transition: all 0.3s ease; } a:hover, a:focus { color: var(--brand-pink); text-decoration: underline; text-shadow: 1px 1px 2px rgba(var(--brand-pink-rgb), 0.3); } /* Focus states accesibles cartoon */ button:focus, a:focus, .file-input:focus, .language-selector select:focus, .file-input-container:focus-within { outline: 3px solid var(--brand-yellow); outline-offset: 3px; } /* Responsividad cartoon */ @media (max-width: 1024px) { .header-inner { gap: 12px; } .brand-text h1 { font-size: 1.3rem; } .tagline { font-size: 0.85rem; } .header-nav .nav-list a { padding: 10px 14px; font-size: 0.9rem; } } @media (max-width: 768px) { body { padding: 0.5rem; } .container { padding: 25px 15px; margin: 0.5rem auto; max-width: calc(100% - 1rem); transform: rotate(0deg); } .brand-text h1 { font-size: 1.2rem; } .tagline { font-size: 0.8rem; } .file-input-container { padding: 30px 15px; font-size: 1rem; transform: rotate(0deg); } .site-header { padding: 15px; border-radius: 20px 20px 0 0; } .header-inner { flex-direction: column; gap: 15px; align-items: center; } .header-left { flex-direction: column; text-align: center; gap: 10px; } .header-actions { flex-direction: column; gap: 12px; width: 100%; align-items: center; justify-content: center; } .header-nav { width: 100%; } .header-nav .nav-list { justify-content: center; flex-wrap: wrap; gap: 8px; width: 100%; } .header-nav .nav-list a { padding: 10px 16px; font-size: 0.9rem; } .language-selector { width: 100%; justify-content: center; } .language-selector select { min-width: 180px; } .footer-grid { flex-direction: column; align-items: center; text-align: center; } .footer-col { min-width: auto; } /* On small screens increase spacing and make links full-width comfortable targets */ .footer-col { padding: 10px 0; } .footer-legal a, .footer-links a { padding: 12px 16px; min-width: 160px; text-align: center; } .swatches { justify-content: center; } .install-cta { flex-direction: column; text-align: center; padding: 1.25rem 1.5rem; } #install-cta-title { font-size: 1.2rem; } .breadcrumb { font-size: 0.85rem; padding: 0.6rem 0.8rem; } } @media (max-width: 480px) { body { padding: 0.25rem; } .site-header { padding: 12px 10px; border-radius: 15px 15px 0 0; } .site-logo { width: 45px; height: 45px; } .brand-text h1 { font-size: 1.1rem; } .tagline { font-size: 0.75rem; } .header-nav .nav-list { gap: 6px; } .header-nav .nav-list a { padding: 8px 12px; font-size: 0.85rem; } .container { padding: 20px 12px; margin: 0.25rem auto; max-width: calc(100% - 0.5rem); } .file-input-container { font-size: 0.95rem; padding: 25px 10px; } .log-box { font-size: 0.9rem; height: 150px; } .swatch { width: 60px; height: 50px; } .breadcrumb { font-size: 0.8rem; padding: 0.5rem 0.6rem; } .about-content h1 { font-size: 1.5rem; } .about-content h2 { font-size: 1.3rem; } .about-content h3 { font-size: 1.1rem; } .about-content p, .about-content ul li { font-size: 0.95rem; } .install-cta { padding: 1rem 1.25rem; } #install-cta-title { font-size: 1.1rem; } .pwa-install-btn img { width: 32px; height: 32px; } } /* Responsive rules for ad/download row: on mobile hide left ad and stack right ad under the button */ @media (max-width: 768px) { .ad-download-row { display: flex !important; flex-direction: column !important; align-items: center; gap: 12px; } /* hide left ad on small screens */ .ad-slot-left { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; } /* ensure right ad appears below the button and fits the viewport */ .ad-slot-right { order: 2; width: 100% !important; max-width: 480px !important; box-sizing: border-box; padding: 8px !important; } #download-all-btn { order: 1; width: auto; max-width: 360px; } } @media (max-width: 480px) { /* Make the right ad smaller and centered on very small screens */ .ad-slot-right { max-width: 120px !important; padding: 6px !important; margin: 0 auto !important; } #download-all-btn { width: 100% !important; max-width: 340px !important; padding-left: 18px !important; padding-right: 18px !important; } } /* Consent styles removed (consent modal/banner functionality removed) */ /* Consent banner for ads/analytics */ /* #consent-banner { max-width: calc(var(--layout-max-width) - 40px); } #consent-banner button { cursor: pointer; } @media (max-width: 480px) { #consent-banner { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; } #consent-banner button { width: 100%; } } */ /* Ensure ads use small banner sizes permitted by Google (desktop: 300x50, mobile: 320x50) */ /* Enforce very small banner ads (120x60) and keep strict layout alignment */ :root { --ad-height: 60px; --ad-width: 234px; } .ad-slot { display: flex; align-items: center; justify-content: center; padding: 0; /* remove extra padding so ad area remains exact */ box-sizing: border-box; height: var(--ad-height) !important; min-width: var(--ad-width); } .ad-slot .adsbygoogle, .ad-slot ins.adsbygoogle { width: var(--ad-width) !important; height: var(--ad-height) !important; max-width: var(--ad-width) !important; max-height: var(--ad-height) !important; display: block !important; margin: 0 auto !important; } /* Centralized styles for ad/download row and individual ad slots */ .ad-download-row { display: flex; align-items: center; justify-content: space-around; gap: 24px; margin: 18px 0; flex-wrap: wrap; /* ensure consistent row height that matches ads */ --ad-height: 60px; } /* Ensure vertical centering between ad boxes and the central button */ .ad-download-row { align-items: center !important; } .ad-download-row > .ad-slot { align-self: center !important; } .ad-download-row > button, .ad-download-row > .button { align-self: center !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; /* Remove the global top margin so the button sits vertically aligned with the ad slots. Force the button to the same height as the ads so they are visually centered together. */ margin-top: 0 !important; height: 60px !important; /* match .ad-slot height */ min-height: 60px !important; padding-left: 28px !important; padding-right: 28px !important; box-sizing: border-box; } .ad-slot { flex: 0 0 auto; min-width: var(--ad-width); max-width: 320px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #fff; padding: 0; box-sizing: border-box; height: var(--ad-height) !important; /* enforce requested height */ overflow: hidden; /* crop any larger content to keep layout */ } .ad-slot-left { border: 3px solid rgba(255,0,0,0.15); } .ad-slot-right { border: 3px solid rgba(0,0,255,0.12); } /* Prevent the central button from shifting on hover so vertical alignment is stable */ .ad-download-row > .button:hover, .ad-download-row > button:hover { transform: none !important; } /* Ensure the download button exactly matches ad height and doesn't gain extra margin */ .ad-download-row > button, .ad-download-row > .button { height: var(--ad-height) !important; min-height: var(--ad-height) !important; margin-top: 0 !important; } /* Consent banner styles moved from inline */ /* Fixed to the top of the viewport and horizontally centered. */ #consent-banner { position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; /* center horizontally */ top: 12px !important; /* place at the top */ background: rgba(255,255,255,0.98) !important; padding: 12px 16px !important; border-radius: 12px !important; box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important; display: flex !important; gap: 12px !important; align-items: center !important; justify-content: space-between !important; z-index: 10000 !important; /* high enough to stay on top of most content */ max-width: calc(var(--layout-max-width) - 40px) !important; pointer-events: auto !important; outline: none; } /* Ensure the banner doesn't grow beyond viewport height on small devices */ @media (max-height: 420px) { #consent-banner { top: 8px !important; left: 8px !important; right: 8px !important; padding: 10px !important; transform: none !important; } } /* Ensure banner content scrolls if text is long on very small devices */ #consent-banner .consent-text { max-height: 6.2rem; overflow: auto; } #consent-banner .consent-text { flex: 1; padding-right: 12px; font-size: 14px; color: #222; } #consent-banner .consent-actions { display: flex; gap: 8px; align-items: center; } #consent-banner .btn { padding: 8px 12px; border-radius: 8px; cursor: pointer; border: 2px solid #ccc; background: transparent; } #consent-banner .btn--accept { background: linear-gradient(135deg,#ff69b4,#ff8c42); color: #fff; border: none; } #consent-banner .btn--decline { background: transparent; color: #222; border: 2px solid #ccc; } @media (max-width: 480px) { #consent-banner { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; } #consent-banner .btn { width: 100%; } } /* Focus visible for accessibility when banner receives keyboard focus */ #consent-banner:focus { box-shadow: 0 0 0 4px rgba(var(--brand-yellow-rgb), 0.35) !important; outline: none !important; } #consent-banner .btn:focus { outline: 3px solid rgba(var(--brand-navy-rgb), 0.9) !important; outline-offset: 2px !important; } /* Small helper for SEO contact paragraph spacing moved from inline */ .seo-contact { margin-top: 12px; } /* Ensure ad elements are block-level and rely on .ad-slot sizing */ .adsbygoogle { display: block !important; } /* Force any iframe injected by AdSense to match requested dimensions */ .ad-slot iframe, .ad-slot ins > iframe, .ad-slot ins iframe { width: var(--ad-width) !important; height: var(--ad-height) !important; max-width: var(--ad-width) !important; max-height: var(--ad-height) !important; display: block !important; } /* Extra enforcement for ins.adsbygoogle elements and responsive safety */ ins.adsbygoogle, ins.adsbygoogle[style] { display: inline-block !important; width: var(--ad-width) !important; height: var(--ad-height) !important; max-width: var(--ad-width) !important; max-height: var(--ad-height) !important; overflow: hidden !important; } /* Some ad scripts insert iframes as children of ins; target them strongly */ ins.adsbygoogle > iframe, ins.adsbygoogle iframe { width: var(--ad-width) !important; height: var(--ad-height) !important; max-width: var(--ad-width) !important; max-height: var(--ad-height) !important; border: 0 !important; } /* Ensure the download button keeps exact ad height alignment */ .ad-download-row > button, .ad-download-row > .button { height: 60px !important; min-height: 60px !important; line-height: 1 !important; } /* Breadcrumb navigation */ .breadcrumb { margin: 0 0 1.5rem 0; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.95); border-radius: 8px; font-size: 0.9rem; border: 2px solid rgba(var(--brand-navy-rgb), 0.1); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; padding: 0; } .breadcrumb li { display: flex; align-items: center; color: #333; font-weight: 500; } .breadcrumb li:not(:last-child)::after { content: "›"; margin-left: 0.5rem; color: var(--brand-orange); font-weight: bold; font-size: 1.1rem; } .breadcrumb a { color: var(--brand-navy); text-decoration: none; transition: color 0.2s ease; font-weight: 600; } .breadcrumb a:hover, .breadcrumb a:focus { color: var(--brand-pink); text-decoration: underline; } .breadcrumb li:last-child { color: #555; font-weight: 600; } /* About page: ensure the main section has comfortable padding Note: .container already has border (4px solid orange), so section needs no border */ .about-page .container > section { padding: 2rem 2rem; /* comfortable inner spacing */ background: transparent; text-align: left; /* No border/shadow needed - container handles visual separation */ } @media (max-width: 768px) { .about-page .container > section { padding: 1.5rem 1.25rem; } } @media (max-width: 480px) { .about-page .container > section { padding: 1rem; } } /* About page: Uses standard .container styles - NO overrides All properties inherited: padding, margin, width, max-width, transform, border This ensures about page looks identical to home/blog pages */ /* Enhanced About page typography and spacing (consolidated) */ .about-page .container > section h2 { text-align: center; font-family: "Bubblegum Sans", cursive; font-size: 1.6rem; color: var(--brand-navy); margin: 0 0 0.6rem 0; text-shadow: 1px 1px 0 rgba(var(--brand-pink-rgb),0.15); } .about-page .container > section p, .about-page .container > section li, .about-page .container > section dd { color: #24303f; font-size: 1rem; line-height: 1.7; } .about-page .container > section > ul, .about-page .container > section > dl { max-width: 820px; margin: 0.5rem auto 1.25rem auto; } .about-page .container > section ul { list-style: none; /* remove default bullets */ padding-left: 0; /* rely on explicit spacing on items */ margin-left: 0; } .about-page .container > section ul li { margin-bottom: 0.6rem; padding-left: 0.6rem; /* keep readable left indent without bullets */ } .about-page .container > section dl { margin-top: 0.6rem; } .about-page .container > section dt { font-weight: 700; margin-top: 0.8rem; } .about-page .container > section dd { margin: 0.25rem 0 0.8rem 0; } /* Consolidated .about-content panel used by about.html to keep markup lean */ .about-content { background: linear-gradient(180deg, rgba(255,255,255,1), rgba(250,250,252,1)); border-radius: 14px; border: 1px solid rgba(0,0,0,0.06); padding: 2rem 2.75rem; box-shadow: 0 12px 36px rgba(16,24,40,0.12), inset 0 1px 0 rgba(255,255,255,0.8); max-width: 980px; margin: 2rem auto; /* center the content block; inner text blocks are constrained below */ text-align: center; position: relative; } .about-content h1 { margin-top: 0; margin-bottom: 1rem; font-size: 2rem; text-align: center; color: #000; font-weight: 700; line-height: 1.3; } .about-content h2 { margin-top: 2rem; margin-bottom: 1rem; font-size: 1.6rem; text-align: center; color: var(--brand-navy); font-weight: 700; line-height: 1.3; } .about-content h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; font-size: 1.3rem; text-align: left; color: #1a1a1a; font-weight: 600; line-height: 1.3; } /* Decorative accent bar at the top of the about card */ .about-content::before { content: ''; display: block; height: 6px; width: 64px; border-radius: 6px; background: linear-gradient(90deg, var(--brand-teal), var(--brand-pink)); position: absolute; top: -10px; left: 50%; transform: translateX(-50%); box-shadow: 0 6px 18px rgba(var(--brand-pink-rgb),0.08); } /* Constrain paragraphs, lists and dl to a centered column for better balance Keep text of these elements left-aligned for readability inside the column */ .about-content p, .about-content ul, .about-content dl { max-width: 900px; margin: 0.5rem auto 1rem auto; text-align: left; } /* Improve readability: slightly larger body text and more comfortable spacing */ .about-content p { font-size: 1.05rem; color: #1a1a1a; line-height: 1.7; font-weight: 400; } /* List styling: soft bullets using brand-teal */ .about-content ul { list-style: disc inside; padding-left: 1rem; } .about-content ul li { margin-bottom: 0.75rem; color: #1a1a1a; line-height: 1.6; } /* Ordered list styling */ .about-content ol { list-style: decimal inside; padding-left: 1rem; counter-reset: item; } .about-content ol li { margin-bottom: 0.75rem; color: #1a1a1a; line-height: 1.6; font-weight: 400; } /* Strong text for better contrast */ .about-content strong { color: #000; font-weight: 700; } /* Table styling for blog content */ .about-content table { width: 100%; max-width: 900px; margin: 1.5rem auto; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .about-content table thead { background: linear-gradient(135deg, var(--brand-navy), var(--cartoon-purple)); color: #fff; } .about-content table th { padding: 12px 15px; text-align: left; font-weight: 700; font-size: 0.95rem; border-bottom: 3px solid var(--brand-yellow); } .about-content table td { padding: 12px 15px; border-bottom: 1px solid #e0e0e0; color: #1a1a1a; font-size: 0.95rem; line-height: 1.5; } .about-content table tbody tr:nth-child(even) { background: rgba(var(--brand-teal-rgb), 0.05); } .about-content table tbody tr:hover { background: rgba(var(--brand-yellow-rgb), 0.1); } .about-content table tbody tr:last-child td { border-bottom: none; } /* Responsive tables */ @media (max-width: 768px) { .about-content table { font-size: 0.85rem; } .about-content table th, .about-content table td { padding: 10px 12px; } } @media (max-width: 480px) { .about-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .about-content table th, .about-content table td { padding: 8px 10px; font-size: 0.8rem; } } /* Definition list polish */ .about-content dt { color: var(--brand-navy); font-weight: 700; margin-top: 0.9rem; font-size: 1.05rem; } .about-content dd { margin-left: 0; color: #1a1a1a; line-height: 1.6; } /* Heading accent: underline bar */ .about-content h2 { position: relative; padding-bottom: 0.6rem; } .about-content h2::after { content: ''; display: block; width: 68px; height: 4px; border-radius: 4px; margin: 10px auto 0 auto; background: linear-gradient(90deg, var(--brand-teal), var(--brand-pink)); box-shadow: 0 6px 14px rgba(var(--brand-teal-rgb),0.06); } /* Links inside the about card should be visible but subtle */ .about-content a { color: var(--brand-navy); text-decoration: underline; font-weight: 700; } .about-content a:hover { color: var(--brand-teal); } /* Slight entrance animation for the card on load (prefers-reduced-motion respected) */ .about-content { opacity: 0; transform: translateY(6px); transition: opacity 360ms ease, transform 360ms cubic-bezier(.2,.9,.2,1); position: relative; z-index: 1; isolation: isolate; } @media (prefers-reduced-motion: no-preference) { .about-page .about-content.visible, body:not(.about-page) .about-content { opacity: 1; transform: translateY(0); } } .about-content ul { padding-left: 0.6rem; } .about-content ul li { margin-bottom: 0.6rem; } .about-content dl { max-width: 820px; } .about-content .button { margin-top: 1.25rem; } @media (max-width: 768px) { .about-content { padding: 1.25rem; margin: 0.75rem auto; } .about-content p, .about-content ul, .about-content dl { max-width: calc(100% - 24px); } } /* Inner column used to horizontally constrain content inside about panel */ .about-inner { max-width: 880px; margin: 0 auto; padding-left: 12px; /* ensure breathing room from left edge */ padding-right: 12px; } @media (max-width: 480px) { .about-content { padding-left: 14px; padding-right: 14px; } .about-inner { padding-left: 6px; padding-right: 6px; } } /* make links in about page match brand and be visible on light panel */ .about-page .container > section a { color: var(--brand-teal); text-decoration: underline; font-weight: 700; } .about-page .container > section a:hover { color: var(--brand-pink); } /* Add subtle separators between major blocks for better scanning */ .about-page .container > section h2 + p, .about-page .container > section h2 + ul, .about-page .container > section h2 + dl { margin-top: 0.2rem; } .about-page .container > section > * + h2 { margin-top: 1.25rem; } @media (max-width: 480px) { .about-page .container > section h2 { font-size: 1.35rem; } .about-page .container > section { padding: 0.9rem; } } /* ============================================================================ BLOG PAGES: Use exact same container styles as home page ============================================================================ - .blog-page .container inherits ALL styles from .container (line 122) - NO overrides of margin, padding, width, or any layout properties - Only .about-content is made transparent to avoid double styling ============================================================================ */ .blog-page .about-content { background: transparent; border: none; box-shadow: none; padding: 0 !important; margin: 0 !important; /* Override the responsive margin from line 1788 */ max-width: none !important; /* Don't restrict width, container already handles it */ } /* Remove the decorative top indicator for blog content */ .blog-page .about-content::before { display: none; } /* Note: .blog-page .container has NO overrides - it inherits: Desktop: margin: 0 auto 1.5rem auto (line 134) Tablet (768px): margin: 0.5rem auto (line 989) Mobile (480px): margin: 0.25rem auto (line 1123) This ensures blog has IDENTICAL margins to home page. */ /* ============================================================================ SEO FAQ SECTION - Optimized for Google Rich Results ============================================================================ */ .seo-faq-section { background: linear-gradient(135deg, rgba(46, 75, 166, 0.02), rgba(94, 192, 191, 0.02)); padding: 3rem 0; margin: 0; width: 100%; } .seo-faq-section .container { text-align: left; max-width: var(--layout-max-width); margin: 0 auto; padding: 0 20px; } .seo-faq-section h2 { text-align: center; font-family: "Bubblegum Sans", cursive; font-size: 2rem; color: var(--brand-navy); margin-top: 2rem; margin-bottom: 2rem; text-shadow: 2px 2px 0 rgba(var(--brand-pink-rgb), 0.2); } .seo-faq-section .container > div { background: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 1.5rem 2rem; margin-bottom: 1.5rem; border-left: 4px solid var(--brand-teal); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .seo-faq-section .container > div:hover { transform: translateX(8px); border-left-color: var(--brand-pink); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } .seo-faq-section h3 { font-family: "Fredoka", cursive; font-size: 1.3rem; color: var(--brand-navy); margin: 0 0 0.75rem 0; font-weight: 600; line-height: 1.4; } .seo-faq-section p { color: #24303f; font-size: 1rem; line-height: 1.7; margin: 0; } @media (max-width: 768px) { .seo-faq-section { padding: 2rem 0; } .seo-faq-section .container { padding: 0 12px; } .seo-faq-section .container > div { padding: 1.25rem 1.5rem; } .seo-faq-section h2 { font-size: 1.6rem; } .seo-faq-section h3 { font-size: 1.1rem; } } @media (max-width: 480px) { .seo-faq-section .container > div { padding: 1rem 1.25rem; margin-bottom: 1rem; } .seo-faq-section h2 { font-size: 1.4rem; margin-bottom: 1.5rem; } .seo-faq-section h3 { font-size: 1rem; } } /* Accessibility improvements */ /* Focus visible for keyboard navigation */ a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--brand-pink); outline-offset: 2px; } /* Skip to main content link */ .skip-to-main { position: absolute; left: -9999px; z-index: 999; padding: 1rem; background-color: var(--brand-navy); color: white; text-decoration: none; border-radius: 0 0 8px 0; } .skip-to-main:focus { left: 0; top: 0; } /* Ensure sufficient contrast for text */ .about-content table td { color: #1a1a1a; } /* Dark mode contrast improvements */ @media (prefers-color-scheme: dark) { .about-content table td { color: #e8e8e8; } .about-content table { background: rgba(30, 30, 40, 0.9); } .about-content table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.05); } } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }