/* ===== WebAnchor — Ocean theme + toggleable water effects ===== Theme (data-theme on ): reef — the light look (default) abyss — the dark "underwater" look Effects (classes on , each independently toggleable in Tweaks): fx-rays fx-caustics fx-waves fx-floor fx-bubbles fx-particles ============================================================================ */ /* ---------- FX stage ---------- */ #ocean-fx { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; } .fx-layer, .ocean-particles { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; } /* ---------- Light shafts (god rays) ---------- */ .ocean-rays { top: -25%; left: -10%; right: -10%; bottom: auto; height: 135%; background: linear-gradient(99deg, transparent 13%, rgba(180,238,252,0.24) 19%, rgba(180,238,252,0.05) 24%, transparent 30%), linear-gradient(94deg, transparent 37%, rgba(180,238,252,0.28) 45%, rgba(180,238,252,0.06) 51%, transparent 58%), linear-gradient(88deg, transparent 60%, rgba(180,238,252,0.22) 68%, rgba(180,238,252,0.05) 74%, transparent 82%), linear-gradient(91deg, transparent 84%, rgba(180,238,252,0.18) 90%, transparent 96%); mix-blend-mode: screen; transform-origin: 50% 0; animation: raySway 17s ease-in-out infinite; } @keyframes raySway { 0%, 100% { transform: skewX(0deg) translateX(0); } 50% { transform: skewX(-3.5deg) translateX(-2.5%); } } html.fx-rays .ocean-rays { opacity: 0.82; } html[data-theme="abyss"].fx-rays .ocean-rays { opacity: 1; } /* ---------- Seabed glow ---------- */ .ocean-floor { inset: auto 0 0 0; height: 46vh; background: radial-gradient(135% 100% at 50% 100%, color-mix(in srgb, var(--cyan) 18%, transparent), transparent 68%); } html.fx-floor .ocean-floor { opacity: 0.7; } html[data-theme="abyss"].fx-floor .ocean-floor { opacity: 1; } /* ---------- Rising bubbles ---------- */ .ocean-bubbles span { position: absolute; bottom: -50px; width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(185,232,247,0.25) 58%, transparent 72%); border: 1px solid rgba(200,238,252,0.28); animation: bubbleRise var(--dur, 14s) linear var(--delay, 0s) infinite; } @keyframes bubbleRise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 9% { opacity: 0.85; } 88% { opacity: 0.7; } 100% { transform: translateY(-106vh) translateX(22px); opacity: 0; } } html.fx-bubbles .ocean-bubbles { opacity: 0.7; } html[data-theme="abyss"].fx-bubbles .ocean-bubbles { opacity: 1; } /* ---------- Drifting current (suspended particles) ---------- */ .ocean-particles span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(216,243,255,0.9); box-shadow: 0 0 8px rgba(190,236,252,0.75); animation: particleDrift var(--dur, 30s) ease-in-out var(--delay, 0s) infinite; } @keyframes particleDrift { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 0.85; } 88% { opacity: 0.75; } 100% { transform: translate(var(--dx, 120px), var(--dy, -40px)); opacity: 0; } } html.fx-particles .ocean-particles { opacity: 0.85; } html[data-theme="abyss"].fx-particles .ocean-particles { opacity: 1; } @media (prefers-reduced-motion: reduce) { .ocean-rays, .ocean-caustics, .ocean-bubbles span, .ocean-particles span { animation: none; } } /* ============================================================================ THEME: REEF (light — default) ============================================================================ */ html[data-theme="reef"] body { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--cyan) 5%, transparent) 42%, color-mix(in srgb, var(--violet) 13%, transparent) 100%); } /* ============================================================================ THEME: ABYSS (dark underwater) ============================================================================ */ html[data-theme="abyss"] { --bg: #06182B; --bg-1: #0B2236; --bg-2: #0E2A40; --bg-3: #13344C; --bg-4: #1B4360; --line: rgba(150,205,238,0.12); --line-2: rgba(150,205,238,0.20); --line-3: rgba(150,205,238,0.32); --text: #EAF3FB; --text-dim: #BACEDE; --text-muted: #8BA4B9; --text-faint: #5F778C; --sh-1: 0 1px 2px rgba(0,0,0,0.30), 0 12px 28px -10px rgba(0,0,0,0.5); --sh-2: 0 1px 3px rgba(0,0,0,0.35), 0 30px 70px -24px rgba(0,0,0,0.62); background: radial-gradient(1200px 620px at 50% -12%, rgba(43,194,184,0.20), transparent 60%), linear-gradient(180deg, #0A2A44 0%, #06182B 40%, #030E1C 100%) fixed; color: var(--text); } html[data-theme="abyss"] body { background: linear-gradient(180deg, transparent 0%, rgba(2,11,22,0) 28%, rgba(2,10,20,0.6) 100%); } html[data-theme="abyss"] .card { background: linear-gradient(180deg, rgba(13,40,62,0.80), rgba(9,28,46,0.80)); border-color: var(--line); } html[data-theme="abyss"] .tile { background: rgba(13,40,62,0.62); } html[data-theme="abyss"] .glass { background: rgba(11,34,54,0.62); } html[data-theme="abyss"] .nav-inner { background: rgba(8,26,44,0.70); border-color: var(--line-2); box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 14px 40px -14px rgba(0,0,0,0.6); } html[data-theme="abyss"] .nav.scrolled .nav-inner { background: rgba(8,26,44,0.88); } html[data-theme="abyss"] .nav-links a:hover { background: rgba(150,205,238,0.08); } html[data-theme="abyss"] .pill { background: rgba(150,205,238,0.06); } html[data-theme="abyss"] .tag { background: rgba(150,205,238,0.05); } html[data-theme="abyss"] .btn-ghost { background: rgba(150,205,238,0.06); color: var(--text); } html[data-theme="abyss"] .chip-btn { background: rgba(150,205,238,0.05); color: var(--text-dim); } html[data-theme="abyss"] .input, html[data-theme="abyss"] .textarea { background: rgba(150,205,238,0.05); } html[data-theme="abyss"] .mobile-menu { background: rgba(4,16,28,0.96); } html[data-theme="abyss"] .app-tab { background: rgba(13,40,62,0.6); } html[data-theme="abyss"] .app-tab.on { background: linear-gradient(180deg, rgba(20,52,76,0.92), rgba(13,40,62,0.92)); } html[data-theme="abyss"] .grad-text-soft { background: linear-gradient(180deg, #EAF3FB 0%, #9FB8CE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="abyss"] .bg-grid { background-image: linear-gradient(rgba(150,205,238,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(150,205,238,0.05) 1px, transparent 1px); } html[data-theme="abyss"] .cta-block { background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 9%, transparent), color-mix(in srgb, var(--violet) 6%, transparent)); } html[data-theme="abyss"] ::-webkit-scrollbar-thumb { background: rgba(150,205,238,0.18); } /* ============================================================================ SANDY SEA FLOOR — a low sand band at the very bottom, holding the credits ============================================================================ */ .footer { padding-bottom: 0; } /* sand band sits flush */ .footer::before { display: none; } /* kill the old blue accent line */ .footer .footer-grid { border-bottom: 0; padding-bottom: 10px; } .seabed-band { --sand-top: #E9D7AB; --sand-bot: #D2B879; --sand-ink: #6E5A32; --sand-ink-dim: #8C7748; --stone: #BBA571; --text-dim: var(--sand-ink); --text-muted: var(--sand-ink-dim); position: relative; margin-top: 52px; padding: 10px 0 30px; overflow: visible; color: var(--sand-ink); background: linear-gradient(180deg, var(--sand-top) 0%, var(--sand-bot) 72%, color-mix(in srgb, var(--sand-bot) 84%, #1c1402) 100%); } .seabed-band::after { /* sand grain */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* wavy waterline where the sand rises into the sea */ .seabed-surf { position: absolute; top: -64px; left: 0; right: 0; height: 76px; line-height: 0; pointer-events: none; filter: drop-shadow(0 -5px 9px rgba(50,38,12,0.10)); } .seabed-surf svg { width: 100%; height: 76px; display: block; } .seabed-surf path { fill: var(--sand-top); } /* a couple of pebbles resting in the sand */ .seabed-band .pebble { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--sand-top) 78%, #fff), var(--stone) 66%, color-mix(in srgb, var(--stone) 64%, #000)); box-shadow: 0 7px 13px -6px rgba(48,36,10,0.5); z-index: 0; } .pebble-1 { width: 40px; height: 24px; left: 8%; bottom: 14px; transform: rotate(-12deg); } .pebble-2 { width: 24px; height: 16px; left: 19%; bottom: 30px; transform: rotate(9deg); } .pebble-3 { width: 52px; height: 30px; right: 7%; bottom: 10px; transform: rotate(15deg); } .seabed-band .wrap { position: relative; z-index: 1; } .seabed-band .footer-bottom { border-top: 0; padding-top: 0; } .seabed-band .pebble-text { color: var(--sand-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--sand-top) 74%, #fff), var(--stone)); padding: 6px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sand-ink) 14%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 6px 14px -6px rgba(58,44,14,0.4); letter-spacing: 0.01em; } /* ---- moonlit, cool-toned sand for Abyss ---- */ html[data-theme="abyss"] .seabed-band { --sand-top: #2E3A44; --sand-bot: #1A222C; --sand-ink: #C2D2DE; --sand-ink-dim: #8FA3B3; --stone: #4A5A66; background: linear-gradient(180deg, #33414C 0%, #202A33 64%, #121821 100%); } /* a soft moonlit teal rim where the sand rises into the deep */ html[data-theme="abyss"] .seabed-surf { filter: drop-shadow(0 -6px 14px rgba(43,194,184,0.28)); } html[data-theme="abyss"] .seabed-surf path { fill: #36444F; } /* Anchor + chain: in the gloomy Abyss the bright brand mark is too loud, so mute and slightly cool it to read like dark iron in deep water. */ html[data-theme="abyss"] #anchor-layer { filter: brightness(0.78) saturate(0.78); } html[data-theme="abyss"] .seabed-band::after { opacity: 0.32; } /* less grain, smoother wet sand */ html[data-theme="abyss"] .seabed-band .pebble { background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--sand-top) 72%, #9fc6d6), var(--stone) 64%, #141b22); box-shadow: 0 7px 14px -6px rgba(0,0,0,0.6), 0 0 10px -2px rgba(43,194,184,0.18); } html[data-theme="abyss"] .seabed-band .pebble-text { color: #DCE7EF; background: linear-gradient(180deg, #3a4751, #232d36); border-color: color-mix(in srgb, var(--sand-ink) 22%, transparent); box-shadow: 0 1px 0 rgba(190,225,240,0.10) inset, 0 6px 14px -6px rgba(0,0,0,0.6); }