/* ------------------------- Base and Layout Settings ---------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg); color: var(--text); margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; min-height: 100vh; display: flex; flex-direction: column; } main#content { flex: 1 0 auto; padding: 1rem; max-width: 100%; width: 100%; } .footer { padding: 1rem; background-color: var(--footer-bg); color: var(--footer-color); text-align: center; flex-shrink: 0; } .td-footer { margin-left: 0 !important; } /* ------------------------- Navbar Responsive Menu ---------------------------- */ html, body { margin: 0; padding: 0; } @media (max-width: 991.98px) { .td-navbar .navbar-toggler { display: block !important; border: none; background: transparent; } /* Let Bootstrap handle collapse — no !important hiding */ #main_navbar.collapse.show { display: flex; flex-direction: column; width: 100%; background: var(--bs-body-bg, #fff); padding: 0.5rem 1rem; } #main_navbar .navbar-nav { flex-direction: column; gap: 0.5rem; text-align: center; } } @media (min-width: 992px) { .td-navbar .navbar-toggler { display: none !important; } } /* Custom hamburger icon */ .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .navbar-toggler:focus { outline: none; box-shadow: none; } /* ------------------------- Dark Mode Support ---------------------------- */ :root { --bg: #ffffff; --text: #111111; --footer-bg: #f1f1f1; --footer-color: #333333; } @media (prefers-color-scheme: dark) { :root { --bg: #42414E; --text: #ffffff; --footer-bg: #222222; --footer-color: #efefef; } body { background-color: var(--bg); color: var(--text); } .navbar ul.navbar-nav, .navbar { background: #204766; } .navbar .footer { background-color: var(--footer-bg); color: var(--footer-color); } .navbar { background-color: #204766; /* darker tone for dark mode */ } } .navbar.bg-dark { background-color: #42414E !important; } .navbar { background-color: #30638e; /* Light mode blue */ } @media (prefers-color-scheme: dark) { .navbar { background-color: #204766; /* Darker blue for dark mode */ } } /* ------------------------- Code block for darkmode ---------------------------- */ /* If using a dark mode class on , for example */ body.dark .highlight, body.dark .highlight pre.chroma, body.dark .highlight code { background-color: #42414E !important; /* dark background color */ color: #c5c8c6 !important; /* light text color */ } /* Optional: style the code line spans and tokens for readability */ body.dark .highlight .line, body.dark .highlight span { color: #c5c8c6 !important; } /* For better contrast on 'click-to-copy' button */ body.dark .click-to-copy button { background-color: #44475a; color: #f8f8f2; border: none; } /* Adjust scrollbar or outline if needed */ body.dark .highlight pre.chroma:focus { outline: 2px solid #6272a4; /* visible focus state */ } /* Alternatively, if using prefers-color-scheme */ @media (prefers-color-scheme: dark) { .highlight, .highlight pre.chroma, .highlight code { background-color: #42414E !important; color: #c5c8c6 !important; } .click-to-copy button { background-color: #44475a; color: #f8f8f2; } } /* Inline code for dark mode*/ /* Normal (light) mode - white background */ code, .td-content li > code, .td-content table code { background-color: #fff; /* white bg for light mode */ color: #333; /* dark text */ border: 1px solid #ccc; /* light gray border */ border-radius: 0.375rem; padding: 0.2em 0.4em; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05); transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* Dark mode - with #42414E background */ body.dark code, body.dark .td-content li > code, body.dark .td-content table code { background-color: #42414E; /* your dark background */ color: #e0e0e0; /* light text for contrast */ border: 1px solid #6c6b7d; /* medium gray border suited to #42414E */ box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12); } /* Optional hover effect (good for both modes) */ code:hover, .td-content li > code:hover, .td-content table code:hover { border-color: #888; box-shadow: inset 0 1px 4px rgba(0,0,0,0.1); cursor: text; } body.dark code:hover, body.dark .td-content li > code:hover, body.dark .td-content table code:hover { border-color: #8f8f9f; box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.18); } body.dark code, body.dark .td-content li > code, body.dark .td-content table code { background-color: #333345 !important; color: #fffffa !important; border: 1px solid #6c6b7d !important; } @media (prefers-color-scheme: dark) { code, .td-content li > code, .td-content table code { background-color: #333345 !important; color: #fffffa !important; border: 1px solid #6c6b7d !important; } } /* Scoped to contact form on netlify */ .contact-form { max-width: 400px; margin: 2em 0 2em 0; display: flex; flex-direction: column; gap: 1em; background: #444450; padding: 2em 2em 1em; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); } .form-group { display: flex; flex-direction: column; } .form-group label { margin-bottom: 0.4em; font-weight: 500; color: #fff; } .contact-form input, .contact-form textarea { padding: 0.7em; border: 1px solid #bbb; border-radius: 4px; font-size: 1em; color: #333; background: #fff; width: 100%; box-sizing: border-box; } .contact-form textarea { min-height: 80px; resize: vertical; } .recaptcha { margin-bottom: 1em; } .submit-btn { background: #2981f5; color: #fff; border: none; padding: 0.8em 0; border-radius: 4px; font-size: 1.1em; font-weight: 600; cursor: pointer; transition: background 0.2s; } .submit-btn:hover { background: #1551a8; } .thin-line { border: none; border-bottom: 1px solid #ccc; /* thin hairline divider */ margin: 0.5em 0 1em 0; width: 100%; } .contact-buttons { display: flex; gap: 1.5em; margin-bottom: 1.5em; flex-wrap: wrap; /* wrap on smaller screens */ } .contact-btn { text-decoration: none; color: #2981f5; font-weight: 600; display: flex; align-items: center; gap: 0.4em; transition: color 0.3s ease; } .contact-btn i { font-size: 1.2em; } /* Hover color */ .contact-btn:hover { color: #1551a8; } /* ------------------------- Copy button for darkmode ---------------------------- */ /* Scoped to dark mode (adjust selector to your dark mode class or media query) */ body.dark .td-click-to-copy, @media (prefers-color-scheme: dark) { .td-click-to-copy { opacity: 1 !important; visibility: visible !important; background-color: #44475a !important; /* dark gray background */ color: #f8f8f2 !important; /* light icon */ border: none !important; box-shadow: 0 0 5px rgba(0,0,0,0.3); padding: 0.25rem 0.4rem; border-radius: 4px; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, color 0.3s ease; cursor: pointer; position: absolute; top: 8px; right: 8px; z-index: 10; /* make sure it's on top */ } .td-click-to-copy:hover, .td-click-to-copy:focus { background-color: #6272a4 !important; color: #ffffff !important; outline: none; } } /* Ensure the FontAwesome icon inherits color */ body.dark .td-click-to-copy.fas, @media (prefers-color-scheme: dark) { .td-click-to-copy.fas { color: inherit !important; } } /* Optional: Position button inside code block */ .click-to-copy { position: relative; } .click-to-copy button.td-click-to-copy { position: absolute; top: 8px; right: 8px; z-index: 10; } /* ------------------------- Accessibility and Interaction ---------------------------- */ .navbar ul.navbar-nav { list-style: none; } .navbar ul.navbar-nav li.nav-item a.nav-link:hover, .navbar ul.navbar-nav li.nav-item a.nav-link.active { color: #007bff; text-decoration: none; } /* ------------------------- Additional Helpers & Fixes ---------------------------- */ .flex-fill { flex: 1 1 auto !important; } .container, .navbar, main, footer { max-width: 100%; box-sizing: border-box; padding-left: 15px; padding-right: 15px; } .navbar { position: relative; z-index: 1000; margin-bottom: 0 !important; padding-left: 0; padding-right: 0; } .hero-section { margin: 0; padding: 0; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: #D3F3EE; color: #000; /* black/dark text for contrast */ margin-top: 0rem; padding-top: 0rem; } @media (prefers-color-scheme: dark) { .hero-section { background-color: #1e3d3a; /* your chosen dark color */ color: #eee; } } .hero-section { position: relative; /* needed for top offset to take effect */ top: -20px; /* move section upward */ } .hero-content { max-width: 1140px; margin: 0 auto; } .hero-section .container { margin-top: 0 !important; padding-top: 0 !important; }