/* Dark theme for preCICE landing page Demonstrates CSS custom properties approach for the Bootstrap upgrade / Hugo migration. Toggle via [data-theme="dark"] on element. */ /* ── Light theme (default) ── */ :root { --bg-primary: #ffffff; --bg-secondary: rgba(10, 118, 187, 0.08); --bg-accent: #0A76BB; --bg-card: #ffffff; --bg-news: #e6f2ff; --text-primary: #040606; --text-secondary: #666666; --text-muted: #808080; --text-on-accent: #ffffff; --border-color: rgba(10, 118, 187, 0.10); --border-card: #ddd; --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.05); --brand-blue: #0A76BB; --brand-orange: #ED762C; --brand-dark-blue: #085E95; --navbar-bg: #ffffff; --navbar-border: #0A76BB; --navbar-text: #0A76BB; --footer-bg: #0A76BB; --footer-text: #ffffff; --toggle-icon: "\f186"; /* moon */ } /* ── Dark theme ── */ [data-theme="dark"] { --bg-primary: #0d1117; --bg-secondary: #161b22; --bg-accent: #0e4f7c; --bg-card: #1c2128; --bg-news: #161b22; --text-primary: #e6edf3; --text-secondary: #b1bac4; --text-muted: #8b949e; --text-on-accent: #e6edf3; --border-color: #30363d; --border-card: #30363d; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --brand-blue: #58a6dc; --brand-orange: #f0915a; --brand-dark-blue: #58a6dc; --navbar-bg: #0d1117; --navbar-border: #30363d; --navbar-text: #58a6dc; --footer-bg: #161b22; --footer-text: #b1bac4; --toggle-icon: "\f185"; /* sun */ } /* ── Apply variables to landing page ── */ [data-theme="dark"] body { background-color: var(--bg-primary); color: var(--text-primary); } [data-theme="dark"] .navbar-inverse { background-color: var(--navbar-bg); border-bottom-color: var(--navbar-border); } [data-theme="dark"] .navbar-inverse .navbar-nav > li > a, [data-theme="dark"] .navbar-inverse .navbar-nav > li > a:focus { color: var(--navbar-text); } [data-theme="dark"] .navbar-inverse .navbar-toggle { border-color: var(--navbar-text); } [data-theme="dark"] .navbar-inverse .navbar-toggle .icon-bar { background-color: var(--navbar-text); } [data-theme="dark"] .section { color: var(--text-primary); } [data-theme="dark"] h1, [data-theme="dark"] h1.title, [data-theme="dark"] h2, [data-theme="dark"] h2.subtitle { color: var(--text-primary); } [data-theme="dark"] h3 { color: var(--text-secondary); } [data-theme="dark"] h4, [data-theme="dark"] h5 { color: var(--text-muted); } [data-theme="dark"] p, [data-theme="dark"] li { color: var(--text-secondary); } [data-theme="dark"] strong { color: var(--text-primary); } [data-theme="dark"] a { color: var(--brand-blue); } /* Panels & cards */ [data-theme="dark"] .panel-primary { border-color: var(--border-card); } [data-theme="dark"] .panel-body, [data-theme="dark"] .panel { background-color: var(--bg-card); color: var(--text-primary); } [data-theme="dark"] .panel-heading-precice { color: var(--text-primary); } [data-theme="dark"] .panel-body p, [data-theme="dark"] .panel-body li, [data-theme="dark"] .panel-body a { color: var(--text-secondary); } [data-theme="dark"] .panel-body strong { color: var(--text-primary); } /* Backgrounds */ [data-theme="dark"] .background-light { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .background-light .panel-primary { border-color: var(--border-card); } [data-theme="dark"] .background-light h2.section-header { color: var(--brand-blue); } [data-theme="dark"] .background-dark { background-color: var(--bg-accent); } /* News section */ [data-theme="dark"] #latest-news { background-color: var(--bg-news); } [data-theme="dark"] .news-card { background: var(--bg-card); border-color: var(--border-card); box-shadow: var(--shadow-card); } [data-theme="dark"] .news-card h4, [data-theme="dark"] .news-card strong { color: var(--text-primary); } [data-theme="dark"] .adapter p, [data-theme="dark"] a.adapter { color: var(--text-primary); } /* Buttons */ [data-theme="dark"] .btn-primary { background-color: var(--brand-blue); border-color: var(--brand-blue); color: var(--bg-primary); } [data-theme="dark"] .btn-primary:hover { background-color: var(--brand-orange); border-color: var(--brand-orange); } [data-theme="dark"] .btn-default { color: var(--text-primary); border-color: var(--border-card); background-color: var(--bg-card); } [data-theme="dark"] .btn-default:hover { background-color: var(--bg-secondary); } [data-theme="dark"] .btn-secondary { color: var(--text-primary); border-color: var(--brand-orange); } /* Testimonials */ [data-theme="dark"] .quote, [data-theme="dark"] .quote a, [data-theme="dark"] .quote a:visited { color: var(--text-secondary); } [data-theme="dark"] img.testimonial { border-color: var(--border-card); } /* Logo wall */ [data-theme="dark"] .logo, [data-theme="dark"] .logo > div, [data-theme="dark"] .logo > p { opacity: 0.85; filter: brightness(1.5); } [data-theme="dark"] .logo:hover, [data-theme="dark"] .logo:hover > div, [data-theme="dark"] .logo:hover > p { opacity: 1; filter: brightness(1.8); } /* Footer */ [data-theme="dark"] footer.background-dark { background-color: var(--footer-bg); } /* Book cover */ [data-theme="dark"] .book { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } /* ── Theme toggle button ── */ .theme-toggle { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--navbar-text, #0A76BB); padding: 4px 10px; margin-top: 11px; line-height: 20px; transition: color 0.2s ease; } .theme-toggle:hover { color: var(--brand-orange, #ED762C); } .theme-toggle:focus { outline: none; } /* ── Contributors footer section ── */ #contributors-section { padding: 50px 0 30px; background-color: var(--bg-secondary, rgba(10, 118, 187, 0.08)); border-top: 1px solid var(--border-color, rgba(10, 118, 187, 0.10)); } #contributors-section h2 { color: var(--brand-dark-blue, #085E95); font-weight: 700; margin-bottom: 30px; } .contributors-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 25px; } .contributor-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border-card, #ddd); transition: transform 0.2s ease, border-color 0.2s ease; opacity: 0.8; } .contributor-avatar:hover { transform: scale(1.3); border-color: var(--brand-blue, #0A76BB); opacity: 1; z-index: 1; } [data-theme="dark"] #contributors-section { background-color: var(--bg-secondary); border-top-color: var(--border-color); } [data-theme="dark"] #contributors-section h2 { color: var(--brand-blue); } [data-theme="dark"] .contributor-avatar { border-color: var(--border-card); } /* ── Smooth theme transition ── */ body, .navbar-inverse, .panel, .panel-body, .background-light, .background-dark, .news-card, footer, a, p, h1, h2, h3, h4, h5, strong, .btn-primary, .btn-default, #latest-news, #contributors-section { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }