/* ========================================================================== caminarte.es — Coming Soon La Palma volcanic island — 8 presets + procedural generator ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: 'Source Sans 3', 'Source Sans Pro', -apple-system, sans-serif; font-weight: 300; line-height: 1.6; color: #ffffff; -webkit-font-smoothing: antialiased; min-height: 100vh; transition: background 1.5s ease-in-out; } /* Noise texture overlay */ body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20height%3D%22512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.875%22%2F%3E%3CfeColorMatrix%20values%3D%220.04%200%200%200%200%200%200.035%200%200%200%200%200%200.035%200%200%200%200%200%200.55%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20filter%3D%22url(%23n)%22%20width%3D%22512%22%20height%3D%22512%22%20fill%3D%22transparent%22%2F%3E%3C%2Fsvg%3E"); background-size: 512px; background-repeat: repeat; } /* === PRESET BACKGROUNDS (applied via data-bg-theme on ) === */ /* 1. Cumbre Vieja — 2021 eruption at twilight */ [data-bg-theme="cumbre-vieja"] body, body { background: radial-gradient(ellipse 40% 50% at 30% 80%, rgba(255,80,0,0.6) 0%, transparent 70%), radial-gradient(circle at 70% 90%, rgba(255,140,0,0.4) 0%, transparent 50%), radial-gradient(ellipse 80% 30% at 50% 100%, rgba(200,40,0,0.5) 0%, transparent 60%), linear-gradient(175deg, #0a0405 0%, #1a0808 12%, #2d0a06 22%, #4a1008 32%, #6b1a0a 42%, #8b2010 52%, #b83a08 62%, #d45500 72%, #e87000 82%, #cc4400 90%, #1a0a04 100%); } /* 2. Caldera de Taburiente — dawn inside the crater */ [data-bg-theme="caldera-taburiente"] body { background: radial-gradient(ellipse 60% 40% at 70% 15%, rgba(255,200,100,0.35) 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 20% 70%, rgba(30,80,60,0.4) 0%, transparent 60%), radial-gradient(circle at 80% 50%, rgba(180,160,80,0.2) 0%, transparent 40%), linear-gradient(160deg, #1a2a20 0%, #1e3325 8%, #264030 16%, #2e4d38 24%, #3a5e42 32%, #4a7050 42%, #5a804a 52%, #7a9045 60%, #9a9540 68%, #b89a48 76%, #c8a050 84%, #8a7838 92%, #3a4a28 100%); } /* 3. Roque de los Muchachos — midnight at the observatory */ [data-bg-theme="roque-muchachos"] body { background: radial-gradient(ellipse 30% 40% at 65% 25%, rgba(100,120,200,0.3) 0%, transparent 70%), radial-gradient(circle at 40% 40%, rgba(140,100,180,0.15) 0%, transparent 50%), radial-gradient(ellipse 100% 20% at 50% 95%, rgba(40,60,120,0.4) 0%, transparent 60%), radial-gradient(circle at 25% 60%, rgba(60,40,100,0.2) 0%, transparent 35%), linear-gradient(180deg, #02030a 0%, #050814 8%, #080e22 16%, #0c1430 26%, #101a3e 36%, #14204a 46%, #162050 56%, #141c45 66%, #10163a 76%, #0a1030 86%, #060a20 93%, #030510 100%); } /* 4. Laurisilva — inside the prehistoric cloud forest */ [data-bg-theme="laurisilva"] body { background: radial-gradient(ellipse 25% 35% at 35% 30%, rgba(140,180,60,0.25) 0%, transparent 70%), radial-gradient(ellipse 30% 25% at 70% 50%, rgba(100,160,80,0.2) 0%, transparent 60%), radial-gradient(circle at 50% 20%, rgba(180,200,100,0.15) 0%, transparent 45%), linear-gradient(170deg, #0a1a0e 0%, #0e2214 8%, #142a1a 16%, #1a3620 26%, #204228 36%, #264e30 46%, #2c5a38 54%, #326640 62%, #2e5a38 70%, #284e32 78%, #1e3a24 86%, #142a1a 93%, #0a1a0e 100%); } /* 5. Playa Negra — black volcanic sand meets Atlantic */ [data-bg-theme="playa-negra"] body { background: radial-gradient(ellipse 80% 30% at 50% 45%, rgba(0,180,200,0.25) 0%, transparent 70%), radial-gradient(ellipse 40% 20% at 30% 55%, rgba(255,255,255,0.08) 0%, transparent 50%), radial-gradient(circle at 75% 30%, rgba(60,140,180,0.2) 0%, transparent 40%), linear-gradient(180deg, #0a2a3a 0%, #0e3648 8%, #144458 16%, #1a5268 26%, #206878 36%, #1a8a90 44%, #18a0a0 50%, #1a8888 56%, #1a6a70 64%, #184a50 72%, #142a30 80%, #101a1e 88%, #0a1012 94%, #060808 100%); } /* 6. Salinas de Fuencaliente — salt flats at golden hour */ [data-bg-theme="salinas"] body { background: radial-gradient(ellipse 60% 30% at 50% 30%, rgba(255,200,140,0.35) 0%, transparent 65%), radial-gradient(circle at 30% 70%, rgba(220,160,160,0.2) 0%, transparent 45%), radial-gradient(ellipse 40% 50% at 80% 60%, rgba(255,180,120,0.15) 0%, transparent 55%), linear-gradient(165deg, #4a3028 0%, #5e3828 8%, #7a4830 16%, #986038 24%, #b87840 32%, #d09048 40%, #dca050 48%, #e0b060 56%, #d8a858 64%, #c89450 72%, #b08048 80%, #8a6040 88%, #604030 94%, #3a2820 100%); } /* 7. Platanera — banana plantation after rain */ [data-bg-theme="platanera"] body { background: radial-gradient(ellipse 35% 40% at 60% 35%, rgba(180,200,40,0.2) 0%, transparent 65%), radial-gradient(circle at 25% 65%, rgba(80,140,30,0.25) 0%, transparent 50%), radial-gradient(ellipse 50% 25% at 50% 90%, rgba(40,30,15,0.4) 0%, transparent 60%), linear-gradient(175deg, #1a2810 0%, #223412 8%, #2e4418 16%, #3a5820 24%, #4a6e28 34%, #5a8430 44%, #68962a 54%, #78a228 60%, #6a9024 66%, #587a20 74%, #44601a 82%, #2e4414 90%, #1a2810 100%); } /* 8. Mirador del Time — sunset over the Aridane Valley */ [data-bg-theme="mirador"] body { background: radial-gradient(ellipse 70% 30% at 50% 85%, rgba(255,160,40,0.4) 0%, transparent 70%), radial-gradient(circle at 30% 70%, rgba(255,100,60,0.25) 0%, transparent 50%), radial-gradient(ellipse 40% 30% at 75% 60%, rgba(200,60,100,0.2) 0%, transparent 55%), radial-gradient(circle at 50% 30%, rgba(80,40,120,0.15) 0%, transparent 40%), linear-gradient(180deg, #0e0820 0%, #1a0e30 8%, #2a1440 14%, #401a4a 20%, #5a2050 26%, #762858 32%, #903060 38%, #aa3858 44%, #c44848 50%, #d86040 56%, #e87830 62%, #f09028 68%, #f4a830 74%, #e89838 80%, #c07838 86%, #805030 92%, #3a2818 100%); } /* === COMING SOON === */ .coming-soon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-height: 100vh; text-align: center; padding: 2rem; } .coming-soon__content { max-width: 600px; } .coming-soon__title { font-size: 3.5rem; font-weight: 200; letter-spacing: 0.15em; text-transform: lowercase; color: rgba(255,255,255,0.9); margin-bottom: 1rem; } .title-bold { font-weight: 400; } .hero-separator { width: 60px; height: 1px; background: rgba(255,255,255,0.25); margin: 1.5rem auto; border: none; } .coming-soon__subtitle { font-size: 1.2rem; font-weight: 300; color: rgba(255,255,255,0.45); letter-spacing: 0.05em; } /* === DEV PANEL (localhost / Tailscale only) === */ .dev-panel { position: fixed; bottom: 20px; left: 20px; z-index: 99999; display: flex; gap: 10px; align-items: flex-end; } .dev-presets { right: auto !important; left: 0; bottom: 54px; } .dev-btn { width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.5); transition: transform 0.2s, background 0.2s; color: #fff; } .dev-btn:hover { transform: scale(1.1); background: rgba(40,40,40,0.8); } .dev-presets { display: none; flex-direction: column; gap: 4px; position: absolute; bottom: 54px; right: 0; background: rgba(8,8,8,0.94); backdrop-filter: blur(16px); border-radius: 10px; padding: 8px; min-width: 300px; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.7); } .dev-preset { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; background: transparent; color: rgba(255,255,255,0.65); cursor: pointer; font-family: inherit; font-size: 11px; text-align: left; transition: all 0.15s; } .dev-preset:hover { background: rgba(255,255,255,0.06); color: #fff; } .dev-preset.active { border-color: rgba(255,255,255,0.25); color: #fff; } .dev-swatch { width: 36px; height: 24px; border-radius: 3px; flex-shrink: 0; } .dev-mood-label { font-size: 9px; color: rgba(255,255,255,0.35); margin-top: 2px; } @media (max-width: 480px) { .coming-soon__title { font-size: 2.2rem; } .coming-soon__subtitle { font-size: 1rem; } .dev-presets { min-width: 250px; } }