/* -------------------------------------------- dark-mode.css Adds an opt-in dark theme + the floating toggle button. Activated when is set by js/dark-mode.js (which also respects prefers-color-scheme on first visit and persists the user's choice in localStorage). -------------------------------------------- */ /* ----- Floating toggle button ----- Hidden on the bare home page (one-page-layout) since the hero has its own dark aesthetic and the toggle has no visible effect there. As soon as an AJAX sub-page is loaded as an overlay (.is-ajax-page-visible), the toggle appears so users can switch the overlay content's theme. On standalone classic-page-layout pages the toggle is always visible. */ .one-page-layout .theme-toggle { display: none; } .one-page-layout.is-ajax-page-visible .theme-toggle { display: inline-flex; } .theme-toggle { position: fixed; top: 1em; right: 1em; z-index: 10000; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); background: #ffffff; color: #1f2937; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } .theme-toggle:hover, .theme-toggle:focus { transform: scale(1.08); outline: none; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline-block; } [data-theme="dark"] .theme-toggle { background: #2a2d33; color: #f3f4f6; border-color: rgba(255, 255, 255, 0.2); } [data-theme="dark"] .theme-toggle .icon-sun { display: inline-block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ----- Dark theme overrides ----- */ [data-theme="dark"] body, [data-theme="dark"] #page, [data-theme="dark"] .site-main, [data-theme="dark"] .cd-main, [data-theme="dark"] .site-content, [data-theme="dark"] .one-page-content { background-color: #14161a; color: #e5e7eb; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .entry-title, [data-theme="dark"] .section-title h2 i { color: #f3f4f6; } [data-theme="dark"] a { color: #6ee7a4; } [data-theme="dark"] a:hover, [data-theme="dark"] a:focus { color: #34d399; } [data-theme="dark"] .boxed { background-color: #1f2227; color: #e5e7eb; } [data-theme="dark"] .boxed.is-dark { background-color: #0f1115; color: #e5e7eb; } [data-theme="dark"] .event h3 { color: #9ca3af; } [data-theme="dark"] .event h4 { color: #f3f4f6; } [data-theme="dark"] .event h5 { color: #d1d5db; } [data-theme="dark"] .event li, [data-theme="dark"] .event p { color: #d1d5db; } [data-theme="dark"] .skill-unit { color: #e5e7eb; } [data-theme="dark"] .skill-unit .bar { background-color: #2a2d33; } [data-theme="dark"] .filters a { color: #d1d5db; } [data-theme="dark"] .filters .current a { color: #6ee7a4; } [data-theme="dark"] .media-cell-desc h3 { color: #f3f4f6; } [data-theme="dark"] .service h3, [data-theme="dark"] .process h4, [data-theme="dark"] .fun-fact h4 { color: #e5e7eb; } [data-theme="dark"] .fun-fact h4 a { color: inherit; } [data-theme="dark"] .site-footer { background-color: #0f1115; } [data-theme="dark"] .site-footer .textwidget p, [data-theme="dark"] .site-footer .textwidget a { color: #e5e7eb; } [data-theme="dark"] .button.primary { background-color: #34d399; color: #0f1115; } [data-theme="dark"] .button.primary:hover { background-color: #6ee7a4; color: #0f1115; } [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="file"], [data-theme="dark"] textarea { background-color: #1f2227; color: #f3f4f6; border-color: #374151; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #9ca3af; } [data-theme="dark"] #back-to-top { background-color: #34d399; color: #0f1115; } /* Decorative #f3f3f3 stripe behind the AJAX-loaded H1 title - meant to be a subtle off-white shadow on a white page, looks like a stripe on dark. Hide it. */ [data-theme="dark"] .one-page-content h1::before { display: none; } /* Contact-page quick-fact icons are dark SVG line-art designed for white bg - invert them in dark mode so they read as light icons on the dark card. */ [data-theme="dark"] .fun-fact img { filter: invert(1) brightness(0.85); } /* Portfolio cards: media-box + the white description block beneath each image */ [data-theme="dark"] .media-box { background-color: #1f2227; } [data-theme="dark"] .media-cell-desc { background-color: #1f2227; color: #e5e7eb; } [data-theme="dark"] .media-cell-desc h3, [data-theme="dark"] .media-cell-desc h3 a:not(:hover) { color: #f3f4f6; } /* Soften the white image-mask so it doesn't blow out in dark mode */ [data-theme="dark"] .media-box .mask { background-color: rgba(20, 22, 26, 0.4); } /* Client logos: most are colorful or have dark glyphs designed for white bg. Make the whole .client tile light in dark mode so logos sit on the backdrop they were designed for, rather than wrapping each tiny . */ [data-theme="dark"] .client { background-color: #f3f4f6; border-color: rgba(255, 255, 255, 0.08); border-radius: 6px; } [data-theme="dark"] .client img { background: transparent; padding: 0; border-radius: 0; } /* Work-process circles already use white - in dark mode give them a soft border so they feel intentional without a drop-shadow (the shadow used to wash over the text label below each circle). */ [data-theme="dark"] .process { border: 1px solid rgba(255, 255, 255, 0.08); } /* The text label is positioned to start at ~74px from the top of the 80px circle - fine when the circle is invisible (white on white in light mode), but in dark mode the circle is solid white so the label sits ON it. Push the label clearly below the circle with extra top margin + a small gap, and bump the .process bottom margin so rows don't crowd. */ [data-theme="dark"] .process { margin-bottom: 60px; } [data-theme="dark"] .process h4 { position: relative; z-index: 1; margin-top: 44px; color: #f3f4f6; } /* The first/last child variants use #eaebe7 / #ebebe7 - keep that tonal hint */ [data-theme="dark"] .row > div:first-child .process, [data-theme="dark"] .elementor-column:first-child .process, [data-theme="dark"] .row > div:last-child .process, [data-theme="dark"] .elementor-column:last-child .process { background: #e5e7eb; } /* Dashed connector line between process steps - barely visible on dark */ [data-theme="dark"] .process:after { border-bottom-color: rgba(255, 255, 255, 0.15); } /* Close-page button: keep its dark chrome but desaturate the bright-white hover X to fit theme */ [data-theme="dark"] .close-page { background: #1f2227; } [data-theme="dark"] .close-page:hover:before, [data-theme="dark"] .close-page:hover:after { background-color: #f3f4f6; } [data-theme="dark"] .close-page .close-text { color: #f3f4f6; } /* Form input focus underline */ [data-theme="dark"] input[type="text"]:focus, [data-theme="dark"] input[type="email"]:focus, [data-theme="dark"] textarea:focus { outline: none; border-color: #34d399; } /* ----- Shared motion ----- */ body, #page, .site-main, .site-content, .one-page-content, .boxed, input, textarea, .button, .theme-toggle, .site-footer { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } @media (prefers-reduced-motion: reduce) { body, #page, .site-main, .site-content, .one-page-content, .boxed, input, textarea, .button, .theme-toggle, .site-footer { transition: none; } } /* ----- Hide the music autoplay dialog when a stored preference exists ----- Set by js/music-preference.js before paint, so the dialog never flashes for returning visitors. */ html.music-preference-set .bg-music-confirm { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* ----- Visually hidden (accessible to screen readers only) ----- */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ----- Skip to main content (keyboard-accessibility) ----- */ .skip-link { position: absolute; top: -100px; left: 0; z-index: 10001; padding: 0.8em 1.2em; background: #1f2937; color: #ffffff !important; text-decoration: none; font-weight: 600; border-radius: 0 0 8px 0; transition: top 0.2s ease; } .skip-link:focus { top: 0; outline: 3px solid #4ECE99; outline-offset: -3px; } /* ----- Home-page footer contrast bump (WCAG AA) ----- Original was rgba(255,255,255,0.25) which fails contrast against the dark hero gradient. */ .home-footer { color: rgba(255, 255, 255, 0.6); } /* ----- Social row used on contact page ----- */ .social-row { margin: 2em 0; } /* ----- Compact social icons used in the home-page footer ----- */ /* (Distinct from .home-social, which is a position:fixed brand strip reserved by the original template for large bottom-left icons.) */ .home-footer-links { margin: 0 0 0.4em 0; text-align: right; line-height: 1; } .home-footer-links a.social-link { display: inline-block; width: 30px; height: 30px; line-height: 28px; margin: 0 0 0 0.4em; padding: 0; font-size: 13px; font-family: "fontello"; text-align: center; color: rgba(255, 255, 255, 0.7); background: transparent; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .home-footer-links a.social-link:hover, .home-footer-links a.social-link:focus { color: #ffffff; border-color: #ffffff; background-color: rgba(255, 255, 255, 0.1); } /* -------------------------------------------- Contact-form polish (Scoped to .contact-form so it doesn't override the underline-only input style used elsewhere.) -------------------------------------------- */ .contact-form { margin: 1.6em auto 0; max-width: 680px; padding: 2em; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06); } .contact-form p { margin: 0 0 1.2em 0; } /* Two-column row for name + email on wider screens */ .contact-form .form-row { display: flex; gap: 1em; margin: 0 0 1.2em 0; } .contact-form .form-row > p { flex: 1 1 0; margin: 0; } @media (max-width: 600px) { .contact-form .form-row { flex-direction: column; gap: 1.2em; } } /* Proper input + textarea fields (override the underline-only base) */ .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: 0.85em 1em; font-size: 0.95rem; line-height: 1.4; color: #1f2937; background: #fafafa; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; outline: none; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .contact-form textarea { min-height: 9em; resize: vertical; } .contact-form input[type="text"]:hover, .contact-form input[type="email"]:hover, .contact-form textarea:hover { border-color: rgba(0, 0, 0, 0.22); background: #ffffff; } .contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form textarea:focus { border-color: #4ECE99; background: #ffffff; box-shadow: 0 0 0 3px rgba(78, 206, 153, 0.18); } .contact-form ::placeholder { color: #9ca3af; text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 400; } /* Custom file-upload control */ .contact-form input[type="file"] { width: 100%; padding: 0; font-size: 0.9rem; color: #6b7280; cursor: pointer; } .contact-form input[type="file"]::file-selector-button { margin-right: 1em; padding: 0.7em 1.2em; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #1f2937; background: #f3f4f6; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .contact-form input[type="file"]::file-selector-button:hover { background: #e5e7eb; border-color: rgba(0, 0, 0, 0.2); } /* Polished SEND button */ .contact-form .button.primary, .contact-form button.submit { width: 100%; margin: 0.4em 0 0 0; padding: 1em 1.5em; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; background: #4ECE99; border: 1px solid #4ECE99; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 14px rgba(78, 206, 153, 0.25); transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .contact-form .button.primary:hover, .contact-form button.submit:hover { background: #3eb985; border-color: #3eb985; color: #ffffff !important; box-shadow: 0 6px 20px rgba(78, 206, 153, 0.35); transform: translateY(-1px); } .contact-form .button.primary:active, .contact-form button.submit:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(78, 206, 153, 0.25); } /* Kill the inherited slide-in pseudo-element overlay from base .button styles */ .contact-form .button.primary:after, .contact-form button.submit:after { display: none; } /* ----- Dark-mode overrides for the contact form ----- */ [data-theme="dark"] .contact-form { background: #1f2227; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .contact-form input[type="text"], [data-theme="dark"] .contact-form input[type="email"], [data-theme="dark"] .contact-form textarea { color: #f3f4f6; background: #14161a; border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .contact-form input[type="text"]:hover, [data-theme="dark"] .contact-form input[type="email"]:hover, [data-theme="dark"] .contact-form textarea:hover { border-color: rgba(255, 255, 255, 0.22); background: #1a1d23; } [data-theme="dark"] .contact-form input[type="text"]:focus, [data-theme="dark"] .contact-form input[type="email"]:focus, [data-theme="dark"] .contact-form textarea:focus { border-color: #34d399; background: #1a1d23; box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); } [data-theme="dark"] .contact-form ::placeholder { color: #6b7280; } [data-theme="dark"] .contact-form input[type="file"] { color: #9ca3af; } [data-theme="dark"] .contact-form input[type="file"]::file-selector-button { color: #e5e7eb; background: #2a2d33; border-color: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .contact-form input[type="file"]::file-selector-button:hover { background: #34383f; border-color: rgba(255, 255, 255, 0.22); } [data-theme="dark"] .contact-form .button.primary, [data-theme="dark"] .contact-form button.submit { color: #0f1115; background: #34d399; border-color: #34d399; box-shadow: 0 4px 14px rgba(52, 211, 153, 0.25); } [data-theme="dark"] .contact-form .button.primary:hover, [data-theme="dark"] .contact-form button.submit:hover { background: #6ee7a4; border-color: #6ee7a4; color: #0f1115 !important; box-shadow: 0 6px 20px rgba(52, 211, 153, 0.35); }