diff --git a/consultancy.html b/consultancy.html index a312d37..592ea92 100644 --- a/consultancy.html +++ b/consultancy.html @@ -9,6 +9,9 @@ + @@ -30,6 +33,10 @@ Consultancy Videos + Get in touch @@ -287,5 +294,11 @@ + diff --git a/devkits.html b/devkits.html index 469e9c9..fbe5804 100644 --- a/devkits.html +++ b/devkits.html @@ -9,6 +9,9 @@ + @@ -30,6 +33,10 @@ Consultancy Videos + Buy a devkit @@ -319,5 +326,11 @@ + diff --git a/index.html b/index.html index fde19ff..77e9043 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,9 @@ + @@ -30,6 +33,10 @@ Consultancy Videos + Buy a devkit @@ -324,5 +331,11 @@ + diff --git a/opensource.html b/opensource.html index 96022ea..9b59140 100644 --- a/opensource.html +++ b/opensource.html @@ -9,6 +9,9 @@ + @@ -30,6 +33,10 @@ Consultancy Videos + Buy a devkit @@ -368,5 +375,11 @@ + diff --git a/style.css b/style.css index dda6e90..6291d13 100644 --- a/style.css +++ b/style.css @@ -1011,3 +1011,95 @@ footer { .hero-ctas .btn { justify-content: center; } .price-block { flex-direction: column; align-items: flex-start; } } + +/* ── Dark mode toggle button ─────────────────── */ +.theme-toggle { + width: 36px; + height: 36px; + border-radius: 50%; + border: 1px solid var(--rule); + background: transparent; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: var(--ink-3); + flex-shrink: 0; + transition: color 0.15s, border-color 0.15s; + padding: 0; +} +.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); } +.theme-toggle .icon-sun { display: none; } +.theme-toggle .icon-moon { display: block; } + +/* ── Dark mode ───────────────────────────────── */ +html.dark { + color-scheme: dark; + --ink: #F0F0ED; + --ink-2: #A8A8A2; + --ink-3: #686864; + --ink-4: #4E4E4A; + --ink-5: #9A9A94; + --rule: #2C2C2A; + --rule-2: #232321; + --bg-off: #161615; + --dark-bg: #050504; +} + +html.dark ::selection { background: #F0F0ED; color: #0A0A0A; } + +html.dark body { + background: #0F0F0E; + color: #F0F0ED; +} + +html.dark .nav { + background: rgba(15,15,14,0.88); +} + +html.dark .theme-toggle .icon-sun { display: block; } +html.dark .theme-toggle .icon-moon { display: none; } + +html.dark .btn-dark { + background: #F0F0ED; + color: #0A0A0A; +} + +html.dark .btn-outline { + background: transparent; + border-color: #3A3A38; + color: #F0F0ED; +} + +html.dark .btn-outline:hover { border-color: #F0F0ED; } + +html.dark .industry-cell { background: #0F0F0E; } +html.dark .section-off .industry-cell { background: #161615; } + +html.dark .kit-item-icon { + background: #2C2C2A; + box-shadow: none; +} + +html.dark .footer-col-links { color: #9A9A94; } + +html.dark .hero-links a { border-bottom-color: #3A3A38; } + +html.dark .img-slot { + background: #161615; + border-color: #2C2C2A; +} + +html.dark .product-card.featured { + background: #F0F0ED; + color: #0A0A0A; + border-color: transparent; +} +html.dark .product-card.featured .product-card-tag { color: rgba(10,10,10,0.5); } +html.dark .product-card.featured .product-desc { color: rgba(10,10,10,0.7); } +html.dark .product-card.featured .product-features { color: rgba(10,10,10,0.85); } +html.dark .product-card.featured .product-price { color: #0A0A0A; } + +@media (prefers-color-scheme: dark) { + html:not([data-theme="light"]):not(.dark) { /* auto-apply if JS hasn't run yet */ } +} diff --git a/videos.html b/videos.html index 9588144..8401d6e 100644 --- a/videos.html +++ b/videos.html @@ -9,6 +9,9 @@ + @@ -30,6 +33,10 @@ Consultancy Videos + Buy a devkit @@ -407,5 +414,11 @@ video.addEventListener('ended', function() { overlay.style.opacity = '1'; overlay.style.pointerEvents = 'auto'; }); }); +