/* MetaFish theme tokens — light / dark. data-theme on : absent or "light" → light; "dark" → dark. js/theme.js handles "auto" by resolving prefers-color-scheme to one of the two. */ :root { /* Surfaces */ --bg: #ffffff; --bg-alt: #f7f7f7; /* subtle alt sections (about/services/journal/footer) */ --bg-soft: #f2f2f2; --card: #ffffff; /* Text */ --fg: #292929; /* headings, strong links */ --fg-body: #898989; /* body base */ --fg-muted: #999999; /* secondary text, nav */ --fg-dim: #afafaf; /* tertiary / disabled */ /* Lines / borders */ --rule: #dddddd; --rule-soft: #eeeeee; /* Brand */ --accent: #1abc9c; --accent-2: #b8a07e; /* warm accent used throughout */ --on-accent: #ffffff; /* Nav shadow */ --nav-shadow: 0 2px 92px rgba(0, 0, 0, 0.18); /* MetaFish logo text gradient (fish paths keep their authored blues) */ --logo-text-start: #013353; --logo-text-end: #0a67a7; } html[data-theme="dark"] { --bg: #0f141a; --bg-alt: #151c25; --bg-soft: #1a2230; --card: #151c25; --fg: #e6edf3; --fg-body: rgba(230, 237, 243, 0.82); --fg-muted: rgba(230, 237, 243, 0.60); --fg-dim: rgba(230, 237, 243, 0.40); --rule: rgba(255, 255, 255, 0.10); --rule-soft: rgba(255, 255, 255, 0.06); --accent: #1abc9c; --accent-2: #c9b38e; /* brighten warm accent a touch on dark */ --on-accent: #0c1217; --nav-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); /* Logo text flips to light tones on dark backgrounds */ --logo-text-start: #ffffff; --logo-text-end: #82dcff; } /* deposit-addiction.html uses scoped .dap-* styles that implement their own dual-theme palette; no forced-dark override here. The page respects the user's theme choice via . */ /* =========================================================== */ /* Inline MetaFish logo (injected by js/nav.js) */ /* Fish paths keep authored blues; wordmark uses --logo-text-*, */ /* so the text flips automatically when the theme changes. */ /* =========================================================== */ .logo a { display: inline-block; line-height: 0; } .logo .mf-logo { height: 40px; width: auto; display: block; /* Block the global "color transition" rule below from bleeding into SVG fill/stop-color on every theme tick. */ transition: none !important; } .logo .mf-logo * { transition: none !important; } @media (max-width: 991px) { .logo .mf-logo { height: 36px; } } /* --- entrance animations (play once per nav mount / page load) --- */ /* Whole fish cluster floats up + fades in from below */ @keyframes mf-fish-float { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .mf-logo .mf-fish-float { opacity: 0; animation: mf-fish-float 900ms cubic-bezier(.22, 1, .36, 1) forwards; transform-origin: 500px 400px; } /* Continuous breathing — more pronounced so it's actually visible at 40px */ @keyframes mf-fish-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } } .mf-logo .mf-fish-breathe { transform-origin: 500px 400px; animation: mf-fish-breathe 3.6s ease-in-out 1.8s infinite; } /* Per-path opacity cascade: 15% → 100%, staggered via inline animation-delay */ @keyframes mf-fish-fade { from { opacity: 0.15; } to { opacity: 1; } } .mf-logo .mf-fish-path { opacity: 0.15; animation: mf-fish-fade 500ms ease forwards; } /* "MetaFish" wordmark — single fade-in after the fish lands, then stays put. No per-letter animation: it was unreliable on SVG and left half the wordmark clipped in some browsers. Typewriter feel is preserved via the fish-first-then-text staging. */ @keyframes mf-word-in { from { opacity: 0; } to { opacity: 1; } } .mf-logo .mf-logo-text { opacity: 0; animation: mf-word-in 420ms ease 520ms forwards; } /* Reduced motion: show the logo instantly, skip looping breathe */ @media (prefers-reduced-motion: reduce) { .mf-logo .mf-fish-float, .mf-logo .mf-fish-path, .mf-logo .mf-logo-text { opacity: 1 !important; animation: none !important; transform: none !important; } .mf-logo .mf-fish-breathe { animation: none !important; } } /* The dark-nav wrapper (deposit-addiction) already forces dark tokens via body.dap-page — no extra logo rule needed there. */ /* Smooth transitions when theme flips — only for colors, not everything */ html:not([data-no-theme-transition]) body, html:not([data-no-theme-transition]) body * { transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease; } /* =========================================================== */ /* THEME TOGGLE (sun / moon / auto) */ /* Lives in nav next to lang-toggle; styles shared across navs */ /* =========================================================== */ .theme-toggle { display: inline-flex; align-items: center; gap: 2px; background: rgba(0, 0, 0, 0.06); border-radius: 999px; padding: 3px; margin-left: 12px; vertical-align: middle; line-height: 1; } .theme-toggle button { border: none; background: transparent; color: #777; padding: 0 8px; font-size: 11px; letter-spacing: 1px; cursor: pointer; border-radius: 999px; font-family: inherit; line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; } .theme-toggle button svg { width: 14px; height: 14px; display: block; } .theme-toggle button:focus { outline: none; } .theme-toggle button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(26,188,156,0.35); } .theme-toggle button.active { background: #1abc9c; color: #fff; } html[data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .theme-toggle button { color: rgba(255, 255, 255, 0.55); } html[data-theme="dark"] .theme-toggle button.active { background: #1abc9c; color: #fff; } /* Dark-nav variant (deposit-addiction uses .dap-nav wrapper) */ .dap-nav .theme-toggle { background: rgba(255, 255, 255, 0.08); } .dap-nav .theme-toggle button { color: rgba(255, 255, 255, 0.55); } .dap-nav .theme-toggle button.active { background: #fff; color: #000; } @media (max-width: 991px) { .theme-toggle { margin-left: 0; margin-top: 8px; } } /* =========================================================== */ /* Image adjustment in dark mode */ /* Hero/portfolio/journal images are designed for light; */ /* knock them down very slightly so they don't glare on dark. */ /* =========================================================== */ html[data-theme="dark"] #header, html[data-theme="dark"] .portfolio-thumbnail img, html[data-theme="dark"] .journal-block img, html[data-theme="dark"] #about .about-img img { filter: brightness(0.88) contrast(1.02); }