PageSourceSearch

https://www.theodorehq.com/solace/

html theodorehq.com collected 2026-10-01 23:45:26 UTC 97,579 bytes, 1,442 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" data-theme="dark">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Solace: Your Mac, in tune with the world around you</title>
7    <meta name="description" content="Solace, the automatic light and dark mode app for Mac. Switches your appearance, wallpaper and screen warmth by the sun, time of day, or the weather.">
8
9    <!-- Favicon -->
10    <link rel="icon" type="image/png" sizes="48x48" href="/solace/favicon-48.png">
11    <link rel="icon" type="image/png" sizes="192x192" href="/solace/favicon-192.png">
12    <link rel="icon" type="image/x-icon" href="/solace/favicon.ico">
13    <link rel="apple-touch-icon" sizes="192x192" href="/solace/favicon-192.png">
14
15    <!-- Canonical URL -->
16    <link rel="canonical" href="https://www.theodorehq.com/solace/">
17    <!-- Points AI crawlers and agents at the plain-text site index. Metadata,
18         not hidden body text: no cloaking, nothing a human is being shown
19         differently from a machine. -->
20    <link rel="alternate" type="text/plain" href="https://www.theodorehq.com/solace/llms.txt" title="llms.txt">
21
22    <!-- Open Graph -->
23    <meta property="og:title" content="Solace: Your Mac, in tune with the world around you">
24    <meta property="og:description" content="Automatic light and dark mode for Mac. Switches appearance, wallpaper, and warmth by the sun, time, or weather.">
25    <meta property="og:image" content="https://www.theodorehq.com/solace/images/og-image.png">
26    <meta property="og:image:type" content="image/png">
27    <meta property="og:image:width" content="2400">
28    <meta property="og:image:height" content="1260">
29    <meta property="og:image:alt" content="Solace: automatically switches your Mac's appearance, wallpaper, and screen warmth by the sun, time, and weather.">
30    <meta property="og:type" content="website">
31    <meta property="og:url" content="https://www.theodorehq.com/solace/">
32    <meta property="og:site_name" content="Solace">
33    <meta property="og:locale" content="en_GB">
34
35    <!-- Twitter Card -->
36    <meta name="twitter:card" content="summary_large_image">
37    <meta name="twitter:title" content="Solace: Your Mac, in tune with the world around you">
38    <meta name="twitter:description" content="Automatic light and dark mode for Mac. Switches appearance, wallpaper, and warmth by the sun, time, or weather.">
39    <meta name="twitter:image" content="https://www.theodorehq.com/solace/images/og-image.png">
40    <meta name="twitter:image:alt" content="Solace: automatically switches your Mac's appearance, wallpaper, and screen warmth by the sun, time, and weather.">
41    <meta name="twitter:site" content="@_theo_dore">
42    <meta name="twitter:creator" content="@_theo_dore">
43
44    <!-- The hero headline is the largest text on the page and sets Largest
45         Contentful Paint. Without this the font is only discovered after
46         fonts.css parses, so the headline paints in a fallback and then
47         repaints when the real font lands, which resets LCP to the later time.
48         Preloading fetches it alongside the CSS instead of after it. -->
49    <link rel="preload" href="/solace/fonts/plus-jakarta-sans-latin.woff2" as="font" type="font/woff2" crossorigin>
50    <link rel="stylesheet" href="/solace/css/fonts.css">
51    <!-- Clash Display: carries the Echo card's own brand identity in the collection grid -->
52    <link rel="stylesheet" href="/solace/css/style.css">
53    <link rel="stylesheet" href="/solace/css/animations.css">
54
55    <!-- Structured Data -->
56    
56<script type="application/ld+json">
57    {
58        "@context": "https://schema.org",
59        "@type": "SoftwareApplication",
60        "name": "Solace",
61        "description": "Automatic light and dark mode switching for macOS. Weather-aware appearance scheduling, wallpaper switching, evening warmth colour temperature, and keyboard shortcuts, all in one menu bar app.",
62        "url": "https://www.theodorehq.com/solace/",
63        "image": "https://www.theodorehq.com/solace/favicon-192.png",
64        "operatingSystem": "macOS",
65        "applicationCategory": "UtilitiesApplication",
66        "offers": {
67            "@type": "Offer",
68            "price": "9.99",
69            "priceCurrency": "USD",
70            "availability": "https://schema.org/InStock",
71            "url": "https://buy.polar.sh/polar_cl_RfdhJNk2t7dVY0aafXeOvNm1OlXz2zu3ycRDm0dZpeU"
72        },
73        "author": { "@id": "https://www.theodorehq.com/#organization" },
74        "video": {
75            "@type": "VideoObject",
76            "name": "Solace for macOS: Product Demo",
77            "description": "Overview of Solace features: solar scheduling, weather-aware switching, wallpaper management, evening warmth, and keyboard shortcuts.",
78            "thumbnailUrl": "https://www.theodorehq.com/solace/images/solace-demo-poster.jpg",
79            "uploadDate": "2026-03-01T00:00:00Z",
80            "duration": "PT1M41S",
81            "contentUrl": "https://www.theodorehq.com/solace/images/solace-demo.mp4"
82        }
83    }
84    </script>
84
85    
85<script type="application/ld+json">
86    {
87        "@context": "https://schema.org",
88        "@type": "Organization",
89        "@id": "https://www.theodorehq.com/#organization",
90        "name": "THEODORE HQ",
91        "url": "https://www.theodorehq.com",
92        "logo": "https://www.theodorehq.com/logo.png",
93        "contactPoint": {
94            "@type": "ContactPoint",
95            "email": "[email protected]",
96            "contactType": "customer support"
97        },
98        "sameAs": [
99            "https://github.com/theodorejharding",
100            "https://x.com/_theo_dore",
101            "https://youtu.be/ZJofjS7UHwk",
102            "https://www.producthunt.com/products/solace-8",
103            "https://macmenubar.com/solace/"
104        ]
105    }
106    </script>
106
107    
107<script type="application/ld+json">
108    {
109        "@context": "https://schema.org",
110        "@type": "WebSite",
111        "name": "Solace",
112        "url": "https://www.theodorehq.com/solace/"
113    }
114    </script>
114
115    
115<script type="application/ld+json">
116    {
117        "@context": "https://schema.org",
118        "@type": "FAQPage",
119        "mainEntity": [
120            {
121                "@type": "Question",
122                "name": "What does Solace do?",
123                "acceptedAnswer": {
124                    "@type": "Answer",
125                    "text": "One menu bar app that keeps your Mac in sync with the day. It switches light and dark automatically, warms the screen at night, swaps your wallpaper to match, and can turn dark on grey, overcast days. It replaces f.lux, a wallpaper switcher, and constant manual toggling."
126                }
127            },
128            {
129                "@type": "Question",
130                "name": "How does the automatic switching work?",
131                "acceptedAnswer": {
132                    "@type": "Answer",
133                    "text": "Solace follows your local sunrise and sunset, and you can move either one up to 2 hours earlier or later. It can also switch to dark on overcast days with weather-aware switching, and you can toggle instantly with a keyboard shortcut."
134                }
135            },
136            {
137                "@type": "Question",
138                "name": "Does it reduce blue light like Night Shift or f.lux?",
139                "acceptedAnswer": {
140                    "@type": "Answer",
141                    "text": "Yes. Evening Warmth eases your screen from cool daylight (6500K) to warm candlelight (1900K), from sunset, from a time you choose, or all the time. While it is on, Solace takes over from Night Shift and hands it back afterwards, with a Compatibility Mode for the newest Macs."
142                }
143            },
144            {
145                "@type": "Question",
146                "name": "Will it change my wallpaper too?",
147                "acceptedAnswer": {
148                    "@type": "Answer",
149                    "text": "Yes. Set a light wallpaper and a dark one, and Solace swaps them across all your displays the moment the mode changes."
150                }
151            },
152            {
153                "@type": "Question",
154                "name": "Is my data private?",
155                "acceptedAnswer": {
156                    "@type": "Answer",
157                    "text": "Solace collects nothing about you: no account, no tracking, no analytics. Your location is used only to find sunrise and sunset and, if you enable weather, to check Apple's WeatherKit. None of your data is ever sent to us."
158                }
159            },
160            {
161                "@type": "Question",
162                "name": "How much is it, and what do I get?",
163                "acceptedAnswer": {
164                    "@type": "Answer",
165                    "text": "Every feature is free to try for 14 days. After that it is a one-time $9.99: no subscription, no in-app purchases, and free updates. It needs macOS 13 Ventura or later and runs natively on Apple Silicon and Intel Macs, at around 3 MB."
166                }
167            },
168            {
169                "@type": "Question",
170                "name": "Is there a free trial?",
171                "acceptedAnswer": {
172                    "@type": "Answer",
173                    "text": "Yes. Download Solace and every feature is free for 14 days, with no card needed. When the trial ends, Solace pauses until you buy it and keeps all your settings. You can add your licence key any time: right-click the Solace menu bar icon, choose Settings, then Enter Key under Free Trial."
174                }
175            }
176        ]
177    }
178    </script>
vendor: 1 bytes, line 178
178
179<script defer src="/solace/js/source-capture.js?v=2"></script>
vendor: 1 bytes, line 179
179
180<script defer src="/solace/js/buy.js?v=2"></script>
vendor: 1 bytes, line 180
180
181<script defer src="https://analytics.theodorehq.com/script.js" data-website-id="11eb446a-097d-4443-ab9c-3cb1e15f0de6"></script>
181
182<link rel="stylesheet" href="/solace/css/support-flyout.css" media="print" onload="this.media='all'">
183<noscript><link rel="stylesheet" href="/solace/css/support-flyout.css"></noscript>
184<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 184-185
184
185<script async src="https://www.googletagmanager.com/gtag/js?id=
185G-EV1QSZW3LS
vendor: 12 bytes, line 185
185"></script>
186<script>
187  
vendor: 134 bytes, lines 187-191
187window.dataLayer = window.dataLayer || [];
188  function gtag(){dataLayer.push(arguments);}
189  gtag('js', new Date());
190
191  gtag('config', '
191G-EV1QSZW3LS
vendor: 4 bytes, line 191
191');
192</script>
192
193</head>
194<body>
195    <!-- Sky Background -->
196    <div id="sky" aria-hidden="true"></div>
197
198    <!-- Star Canvas -->
199    <canvas id="stars" aria-hidden="true"></canvas>
200
201    <!-- Interactive demo backdrop: full-viewport wallpaper that the embedded Solace demo drives -->
202    <div id="solaceDemoBg" aria-hidden="true">
203        <div class="sdbg sdbg-light"></div>
204        <div class="sdbg sdbg-dark"></div>
205        <div class="sdbg-warm"></div>
206    </div>
207
208    <!-- Rain Overlay (full viewport, for weather section) -->
209    <div id="rain-overlay" aria-hidden="true"></div>
210
211    <!-- Lightning Flash -->
212    <div id="lightning-flash" aria-hidden="true"></div>
213
214    <!-- Warm Overlay -->
215    <div id="warm-overlay" aria-hidden="true"></div>
216
217    <!-- Shooting Star -->
218    <div id="shooting-star" aria-hidden="true"></div>
219
220    <!-- Scroll Progress Bar -->
221    <div id="scroll-progress" aria-hidden="true"></div>
222
223    <!-- Theme toggle removed - theme now controlled by scroll position only -->
224
225    <!-- Toast Notification -->
226    <div id="toast" aria-live="polite"></div>
227
228    <!-- Navigation Bar - appears after hero CTA scrolls out of view -->
229    <nav class="nav-bar" id="navBar">
230        <div class="nav-pill" id="navPill">
231            <a href="#hero" class="nav-logo">
232                <img
233                    src="images/solace-logo-80.png"
234                    srcset="images/solace-logo-40.png 1x, images/solace-logo-80.png 2x"
235                    alt=""
236                    class="nav-logo-icon"
237                    width="32"
238                    height="32"
239                >
240                <span class="nav-logo-text">Solace</span>
241            </a>
242
243            <div class="nav-links">
244                <a href="#solution" class="nav-link">Features</a>
245                <a href="#pricing" class="nav-link">Pricing</a>
246                <a href="blog/" class="nav-link">Blog</a>
247                <a href="#faq" class="nav-link">FAQ</a>
248            </div>
249
250            <div class="nav-sep"></div>
251
252            <div class="nav-buy-group"><a class="nav-buy-btn nav-buy-download" href="/solace/downloads/Solace-latest.dmg">Download</a><span class="nav-buy-divider" aria-hidden="true"></span><a class="nav-buy-btn nav-buy-buy" href="https://buy.polar.sh/polar_cl_RfdhJNk2t7dVY0aafXeOvNm1OlXz2zu3ycRDm0dZpeU">Buy Solace</a></div>
253        </div>
254    </nav>
255
256    <!-- ==================== SECTIONS ==================== -->
257
258    <!-- Section 1: Hero - The Dawn -->
259    <section id="hero" class="section section-hero">
260        <div class="section-content">
261            <h1 class="hero-headline reveal">Your Mac, in tune with<br>the world around you.</h1>
262            <p class="hero-sub reveal">Solace is a Mac menu bar app that adapts your screen's appearance, warmth, and wallpaper, so your Mac always feels right.</p>
263            <div class="cta-pair hero-ctas reveal"><a href="/solace/downloads/Solace-latest.dmg" class="btn btn-primary btn-trial">Download Free Trial</a><a href="https://buy.polar.sh/polar_cl_RfdhJNk2t7dVY0aafXeOvNm1OlXz2zu3ycRDm0dZpeU" class="btn btn-primary btn-buy">Buy Once $9.99</a></div>
264            <div class="scroll-indicator reveal">
265                <span>Scroll to Learn More</span>
266                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
267                    <polyline points="6 9 12 15 18 9"/>
268                </svg>
269            </div>
270        </div>
271    </section>
272
273    <!-- Section 2: The Solution / Solace UI -->
274    <section id="solution" class="section section-solution">
275        <div class="section-content">
276            <span class="section-label reveal">MEET SOLACE</span>
277            <h2 class="section-headline reveal">One app. Always in sync.</h2>
278            <p class="section-body reveal">It lives in your menu bar. It watches the sun. It reads the weather. And it keeps your screen in harmony with the world outside.</p>
279
280            <!-- Interactive Solace demo (replaces the former static mockup) -->
281            <div class="solace-demo-embed reveal" aria-label="Interactive Solace demo">
282                <iframe id="solaceDemoFrame" class="solace-demo-frame" src="/solace/demo" title="Interactive Solace demo: try light and dark mode, wallpapers, schedule, evening warmth and weather-aware switching" loading="lazy" scrolling="no"></iframe>
283            </div>
284            
284<script>
285            (function(){
286                var f=document.getElementById('solaceDemoFrame'); if(!f)return;
287                var bg=document.getElementById('solaceDemoBg');
288                var section=document.getElementById('solution');
289                var warm=bg?bg.querySelector('.sdbg-warm'):null;
290                var ready=false,pending=false,wasIn=false;
291                function send(){try{f.contentWindow.postMessage({type:'solace-tour-start'},'*');}catch(e){}}
292                function updateContrast(){
293                    // Force the heading readable against whichever wallpaper is on screen.
294                    if(!section||!bg)return;
295                    var active=bg.classList.contains('active'), dark=bg.classList.contains('is-dark');
296                    section.classList.toggle('demo-dark',active&&dark);
297                    section.classList.toggle('demo-light',active&&!dark);
298                }
299                function applyState(d){
300                    if(!bg)return;
301                    bg.classList.toggle('is-dark',d.mode==='dark');
302                    if(warm)warm.style.opacity=d.warmthActive?(1-(d.warmth||0))*0.42:0;
303                    updateContrast();
304                }
305                window.addEventListener('message',function(e){
306                    if(!e||!e.data)return;
307                    if(e.data.type==='solace-demo-ready'){ready=true;if(pending){pending=false;send();}}
308                    else if(e.data.type==='solace-demo-height'&&e.data.height){f.style.height=e.data.height+'px';}
309                    else if(e.data.type==='solace-demo-state'){applyState(e.data);}
310                });
311                if('IntersectionObserver' in window){
312                    // Tour trigger: start fresh from step 1 each time the section is reached (re-arms once fully scrolled away)
313                    var io=new IntersectionObserver(function(es){es.forEach(function(en){
314                        var inView=en.isIntersecting&&en.intersectionRatio>=0.35;
315                        if(inView&&!wasIn){wasIn=true;if(ready)send();else pending=true;}
316                        else if(!inView&&en.intersectionRatio===0){wasIn=false;pending=false;}
317                    });},{threshold:[0,0.35,0.7]});
318                    io.observe(f);
319                    // Backdrop activation: fade the wallpaper in whenever the demo is anywhere near view
320                    if(bg){
321                        var bgIo=new IntersectionObserver(function(es){es.forEach(function(en){
322                            bg.classList.toggle('active',en.isIntersecting);
323                            updateContrast();
324                        });},{rootMargin:'-12% 0px -12% 0px',threshold:0});
325                        bgIo.observe(f);
326                    }
327                }
328            })();
329            </script>
329
330        </div>
331    </section>
332
333    <!-- Section 4: Wallpapers -->
334    <div class="wps-track" id="wallpapers">
335        <div class="wps-sticky">
336            <div class="wps-inner">
337
338                <!-- Left: Mac screen viewport -->
339                <div class="wps-viewport">
340                    <div class="wps-glow wps-glow-day" id="wpsGlow"></div>
341                    <div class="wps-screen">
342                        <!-- This screen renders about 500px wide on desktop and ~95vw on mobile,
343                             so the 2400px originals were roughly 4x more pixels than any display
344                             could use. The 1200px variants cover retina at both sizes; the
345                             originals stay in srcset for very high-density large screens. -->
346                        <img class="wps-img wps-img-day"   id="wpsImgDay"   src="images/wallpaper-light.webp" alt="" loading="eager"
347                             srcset="images/wallpaper-light-1200.webp 1200w, images/wallpaper-light.webp 2400w"
348                             sizes="(max-width: 860px) 95vw, 500px">
349                        <img class="wps-img wps-img-night" id="wpsImgNight" src="images/wallpaper-dark.webp"  alt="" loading="eager"
350                             srcset="images/wallpaper-dark-1200.webp 1200w, images/wallpaper-dark.webp 2400w"
351                             sizes="(max-width: 860px) 95vw, 500px">
352                        <div class="wps-vignette"></div>
353                        <div class="wps-menubar wps-mb-light" id="wpsMenubar">
354                            <span class="wps-mb-apple">&#63743;</span>
355                            <div class="wps-mb-menus">
356                                <span class="wps-mb-item wps-mb-bold">Finder</span>
357                                <span class="wps-mb-item">File</span>
358                                <span class="wps-mb-item">Edit</span>
359                                <span class="wps-mb-item">View</span>
360                            </div>
361                            <div class="wps-mb-right">
362                                <span class="wps-mb-clock" id="wpsClock">9:18 AM</span>
363                            </div>
364                        </div>
365                        <div class="wps-dock wps-dock-light" id="wpsDock">
366                            <div class="wps-di"></div>
367                            <div class="wps-di"></div>
368                            <div class="wps-di"></div>
369                            <div class="wps-di"></div>
370                            <div class="wps-di"></div>
371                            <div class="wps-dock-sep"></div>
372                            <div class="wps-di"></div>
373                        </div>
374                        <div class="wps-screen-edge"></div>
375                    </div>
376                </div>
377
378                <!-- Right: copy -->
379                <div class="wps-copy">
380                    <span class="section-label reveal">WALLPAPERS</span>
381
382                    <div class="wps-copy-states">
383                        <div class="wps-copy-state" id="wpsCopyDay">
384                            <h2 class="section-headline">One wallpaper<br>for the day.</h2>
385                            <p class="section-body">Your light mode wallpaper greets you each morning. Bright, crisp, tuned to the hour. Solace sets it before your eyes open.</p>
386                        </div>
387                        <div class="wps-copy-state wps-out" id="wpsCopyNight" aria-hidden="true">
388                            <h2 class="section-headline">Another one<br>for the night.</h2>
389                            <p class="section-body">At sunset, your desktop follows. No prompt. No interruption. The switch happens the moment the sky says so.</p>
390                        </div>
391                    </div>
392
393                    <!-- Light / Dark toggle pill -->
394                    <div class="wps-pill">
395                        <div class="wps-pill-thumb wps-thumb-day" id="wpsPillThumb"></div>
396                        <div class="wps-pill-opt wps-opt-active-day" id="wpsOptDay">
397                            <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M2 12h2M20 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/></svg>
398                            Light
399                        </div>
400                        <div class="wps-pill-opt wps-opt-inactive-night" id="wpsOptNight">
401                            <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>
402                            Dark
403                        </div>
404                    </div>
405                </div>
406
407            </div>
408        </div>
409    </div>
410
411    <!-- Section 5: Solar Intelligence -->
412    <section id="solar" class="section section-solar">
413        <div class="section-content two-col">
414            <div class="col-text">
415                <span class="section-label reveal">SOLAR SCHEDULING</span>
416                <h2 class="section-headline reveal">Sunrise. Sunset.<br>Sorted.</h2>
417                <p class="section-body reveal">Light mode arrives with the morning. Dark mode follows the dusk. Solace calculates exact solar times for your location, every day, every season. Adjust the offsets to taste. Your rhythm, your rules.</p>
418                <ul class="feature-list reveal">
419                    <li>
420                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="feature-icon"><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
421                        Location-aware. Never leaves your Mac.
422                    </li>
423                    <li>
424                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="feature-icon"><path d="M4 8h10M18 8h2M4 16h2M10 16h10"/><circle cx="16" cy="8" r="2.4"/><circle cx="8" cy="16" r="2.4"/></svg>
425                        Separate sunrise and sunset offsets
426                    </li>
427                    <li>
428                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="feature-icon"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v4h-4"/></svg>
429                        Recalculates daily as seasons change
430                    </li>
431                </ul>
432            </div>
433            <div class="col-visual">
434                <div class="sun-arc-visual reveal" role="img" aria-label="Sun arc visualization">
435                    <svg viewBox="0 0 400 250" class="sun-arc-svg">
436                        <defs>
437                            <linearGradient id="arc-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
438                                <stop offset="0%" stop-color="#7070DE"/>
439                                <stop offset="22%" stop-color="#FF9500"/>
440                                <stop offset="50%" stop-color="#4DA6FF"/>
441                                <stop offset="78%" stop-color="#FF9500"/>
442                                <stop offset="100%" stop-color="#7070DE"/>
443                            </linearGradient>
444                            <radialGradient id="arc-sun-glow">
445                                <stop offset="0%" stop-color="#FFD88A"/>
446                                <stop offset="55%" stop-color="rgba(255,149,0,0.45)"/>
447                                <stop offset="100%" stop-color="rgba(255,149,0,0)"/>
448                            </radialGradient>
449                        </defs>
450                        <line x1="24" y1="200" x2="376" y2="200" stroke="currentColor" stroke-opacity="0.16" stroke-width="1" stroke-dasharray="3 5"/>
451                        <path d="M 40 200 Q 200 -20 360 200" fill="none" stroke="currentColor" stroke-opacity="0.1" stroke-width="3" class="arc-base"/>
452                        <path d="M 40 200 Q 200 -20 360 200" fill="none" stroke="url
452(#arc-gradient)" stroke-width="3" stroke-linecap="round" class="arc-draw" style="stroke-dasharray:1000;stroke-dashoffset:1000"/>
453                        <circle cx="62" cy="171" r="3.6" fill="#9a9ae8" class="arc-mark"/>
454                        <circle cx="338" cy="171" r="3.6" fill="#9a9ae8" class="arc-mark"/>
455                        <circle cx="40" cy="200" r="22" fill="url(#arc-sun-glow)" class="arc-halo"/>
456                        <circle cx="40" cy="200" r="10" fill="#FFB44D" class="arc-sun"/>
457                        <text x="40" y="222" fill="currentColor" font-size="12" text-anchor="middle" opacity="0.6">7:59 AM</text>
458                        <text x="200" y="222" fill="currentColor" font-size="12" text-anchor="middle" opacity="0.6">12:00 PM</text>
459                        <text x="360" y="222" fill="currentColor" font-size="12" text-anchor="middle" opacity="0.6">4:28 PM</text>
460                        <text x="40" y="243" font-size="11" text-anchor="middle" font-weight="600" class="arc-lbl arc-lbl-dark1">Dark</text>
461                        <text x="200" y="243" font-size="11" text-anchor="middle" font-weight="600" class="arc-lbl arc-lbl-light">Light</text>
462                        <text x="360" y="243" font-size="11" text-anchor="middle" font-weight="600" class="arc-lbl arc-lbl-dark2">Dark</text>
463                    </svg>
464                </div>
465            </div>
466        </div>
467    </section>
468
469    <!-- Section 6: Golden Hour - The Transition -->
470    <section id="transition" class="section section-transition">
471        <div class="section-content">
472            <p class="transition-intro reveal">And then, the evening.</p>
473            <div class="transition-headline">
474                <span class="transition-word reveal" data-delay="0">The</span>
475                <span class="transition-word reveal" data-delay="1">light</span>
476                <span class="transition-word reveal" data-delay="2">softens.</span>
477            </div>
478            <p class="transition-follow reveal">So does your screen.</p>
479            <p class="transition-body reveal">At the time you choose, your display gently warms. Crisp daylight fades to soft candlelight. No sudden shifts. Just a slow, natural transition.</p>
480        </div>
481    </section>
482
483    <!-- Section 7: Evening Warmth -->
484    <section id="warmth" class="section section-warmth">
485        <div class="section-content two-col">
486            <div class="col-text">
487                <span class="section-label reveal">EVENING WARMTH</span>
488                <h2 class="section-headline reveal">Less blue light.<br>Better evenings.</h2>
489                <p class="section-body reveal">Evening Warmth runs on its own schedule, separate from dark mode. Start it at sunset, at a time you choose, or keep it on all day. Choose your colour temperature. The transition happens gradually, from 6500K daylight to 1900K candlelight.</p>
490                <ul class="feature-list reveal feature-list-warm">
491                    <li>
492                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="feature-icon"><path d="M14 14.8V5a2 2 0 0 0-4 0v9.8a4 4 0 1 0 4 0z"/></svg>
493                        Adjustable colour temperature
494                    </li>
495                    <li>
496                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="feature-icon"><path d="M3 17c4 0 4-10 9-10s5 10 9 10"/></svg>
497                        Gradual transition. No jarring shifts.
498                    </li>
499                    <li>
500                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="feature-icon"><path d="M12 3v3M5 19h14M6.3 11.3 4 9M19.7 11.3 22 9"/><path d="M8 19a4 4 0 0 1 8 0"/></svg>
501                        Resets automatically at sunrise
502                    </li>
503                </ul>
504            </div>
505            <div class="col-visual">
506                <div class="kelvin-visual reveal">
507                    <div class="kelvin-bloom" id="kelvin-bloom"></div>
508                    <div class="kelvin-label-row">
509                        <span class="kelvin-label warm">Warm</span>
510                        <span class="kelvin-label cool">Cool</span>
511                    </div>
512                    <div class="kelvin-track">
513                        <div class="kelvin-gradient"></div>
514                        <div class="kelvin-thumb" id="kelvin-thumb"></div>
515                    </div>
516                    <div class="kelvin-value" id="kelvin-value">4600K</div>
517                    <div class="kelvin-time">
518                        <svg viewBox="0 0 20 20" fill="currentColor" width="14" height="14"><circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M10 5v5l3 3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
519                        Starts at Sunset
520                    </div>
521                </div>
522            </div>
523        </div>
524    </section>
525
526    <!-- Section 8: Weather - Immersive Storm Experience (now last feature) -->
527    <section id="weather" class="section section-weather">
528        <div class="section-content">
529            <span class="section-label reveal">WEATHER AWARE</span>
530            <h2 class="section-headline reveal">Rainy Tuesday?<br>Your Mac already knows.</h2>
531            <p class="section-body reveal" style="margin-left:auto;margin-right:auto;text-align:center;">Dark mode activates when storm clouds roll in. Even at midday. Solace reads the forecast each morning and sets the day, so your screen never flickers back and forth. Choose how cloudy counts as dark, and see cloud, rain and UV at a glance, in &deg;C or &deg;F.</p>
532
533            <!-- Weather mockup pair: before/after -->
534            <div class="weather-mockup-pair reveal">
535                <div class="weather-mockup-card weather-before">
536                    <div class="wm-header light">
537                        <span class="wm-icon">&#9728;&#65039;</span>
538                        <span class="wm-title">Light Mode</span>
539                    </div>
540                    <div class="wm-body light">
541                        <div class="wm-row">
542                            <span>Weather</span>
543                            <span class="wm-pill active-green">Active</span>
544                        </div>
545                        <div class="wm-condition">
546                            <span class="wm-emoji">&#9728;&#65039;</span>
547                            <span>Clear &middot; 22&deg;C</span>
548                        </div>
549                        <div class="wm-status">
550                            <span class="wm-status-dot green"></span>
551                            No change expected
552                        </div>
553                    </div>
554                </div>
555
556                <div class="weather-arrow" aria-hidden="true">
557                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="28" height="28">
558                        <path d="M5 12h14M12 5l7 7-7 7"/>
559                    </svg>
560                </div>
561
562                <div class="weather-mockup-card weather-after">
563                    <div class="wm-header dark">
564                        <span class="wm-icon">&#127769;</span>
565                        <span class="wm-title">Dark Mode</span>
566                    </div>
567                    <div class="wm-body dark">
568                        <div class="wm-row">
569                            <span>Weather</span>
570                            <span class="wm-pill active-green">Active</span>
571                        </div>
572                        <div class="wm-condition">
573                            <span class="wm-emoji">&#9928;&#65039;</span>
574                            <span>Thunderstorm &middot; 14&deg;C</span>
575                        </div>
576                        <div class="wm-status">
577                            <span class="wm-status-dot amber"></span>
578                            Switched to dark mode
579                        </div>
580                    </div>
581                </div>
582            </div>
583            <p class="weather-cta reveal"><a href="#pricing">No other app does this.</a></p>
584        </div>
585    </section>
586
587    <!-- Section: Demonstration -->
588    <section id="demo" class="section section-demo">
589        <div class="section-content">
590            <span class="section-label reveal">DEMONSTRATION</span>
591            <h2 class="section-headline reveal">See it for yourself.</h2>
592
593            <div class="demo-player reveal" id="demoPlayer">
594
595                <!-- Video + overlay controls -->
596                <div class="demo-video-wrap" id="demoVideoWrap">
597                    <video class="demo-video" id="demoVideo" src="images/solace-demo.mp4" poster="images/solace-demo-poster.jpg" preload="metadata" playsinline></video>
598
599                    <!-- Centre play/pause tap target -->
600                    <button class="demo-center-btn" id="demoCenterBtn" aria-label="Play">
601                        <svg class="demo-center-icon demo-icon-play" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
602                        <svg class="demo-center-icon demo-icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="5" y="3" width="4" height="18" rx="1"/><rect x="15" y="3" width="4" height="18" rx="1"/></svg>
603                    </button>
604
605                    <!-- Bottom controls bar -->
606                    <div class="demo-controls" id="demoControls">
607
608                        <!-- Progress / scrub bar -->
609                        <div class="demo-scrub" id="demoScrub" role="slider" aria-label="Video progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-valuetext="0% played">
610                            <div class="demo-scrub-track">
611                                <div class="demo-scrub-fill" id="demoScrubFill"></div>
612                                <!-- Chapter tick marks on bar -->
613                                <span class="demo-tick" style="left:0%"></span>
614                                <span class="demo-tick" style="left:13.81%"></span>
615                                <span class="demo-tick" style="left:17.76%"></span>
616                                <span class="demo-tick" style="left:37.49%"></span>
617                                <span class="demo-tick" style="left:60.18%"></span>
618                                <span class="demo-tick" style="left:83.87%"></span>
619                                <div class="demo-scrub-thumb" id="demoScrubThumb"></div>
620                            </div>
621                        </div>
622
623                        <!-- Buttons row -->
624                        <div class="demo-controls-row">
625                            <div class="demo-controls-left">
626                                <button class="demo-btn" id="demoPlayBtn" aria-label="Play">
627                                    <svg class="demo-icon demo-icon-play" viewBox="0 0 24 24" fill="currentColor"><polygon points="5,3 19,12 5,21"/></svg>
628                                    <svg class="demo-icon demo-icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display:none"><rect x="5" y="3" width="4" height="18" rx="1"/><rect x="15" y="3" width="4" height="18" rx="1"/></svg>
629                                </button>
630                                <span class="demo-time" id="demoTime">0:00 <span class="demo-time-total">/ 1:41</span></span>
631                            </div>
632                            <div class="demo-controls-right">
633                                <button class="demo-btn" id="demoMuteBtn" aria-label="Mute">
634                                    <svg class="demo-icon demo-icon-unmuted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
635                                    <svg class="demo-icon demo-icon-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
636                                </button>
637                            </div>
638                        </div>
639
640                    </div><!-- /demo-controls -->
641                </div>
641<!-- /demo-video-wrap -->
642
643                <!-- Chapter row -->
644                <div class="demo-chapters">
645                    <button class="demo-chapter" data-time="0">
646                        <span class="demo-chapter-ts">0:00</span>
647                        <span class="demo-chapter-name">Intro</span>
648                    </button>
649                    <button class="demo-chapter" data-time="14">
650                        <span class="demo-chapter-ts">0:14</span>
651                        <span class="demo-chapter-name">Wallpapers</span>
652                    </button>
653                    <button class="demo-chapter" data-time="18">
654                        <span class="demo-chapter-ts">0:18</span>
655                        <span class="demo-chapter-name">Schedule</span>
656                    </button>
657                    <button class="demo-chapter" data-time="38">
658                        <span class="demo-chapter-ts">0:38</span>
659                        <span class="demo-chapter-name">Warmth</span>
660                    </button>
661                    <button class="demo-chapter" data-time="61">
662                        <span class="demo-chapter-ts">1:01</span>
663                        <span class="demo-chapter-name">Weather</span>
664                    </button>
665                    <button class="demo-chapter" data-time="85">
666                        <span class="demo-chapter-ts">1:25</span>
667                        <span class="demo-chapter-name">Keyboard</span>
668                    </button>
669                </div>
670
671            </div><!-- /demo-player -->
672        </div>
673    </section>
674
675    <!-- Section 10a: Comparison - Why Solace -->
676    <div class="section-comparison-outer" id="comparisonOuter">
677        <div class="section-comparison-sticky">
678            <div class="section-content">
679                <span class="section-label reveal">WHY SOLACE</span>
680                <h2 class="section-headline reveal">One app instead of four.</h2>
681                <p class="section-body reveal" style="margin-left:auto;margin-right:auto;">Most people piece together separate tools that each do one thing. They don't talk to each other. Half are abandoned. Solace replaces them all.</p>
682
683                <!-- Convergence Visual -->
684                <div class="convergence-stage" id="convergenceStage">
685                    <div class="orbit-ring"></div>
686
687                    <svg class="connecting-lines" viewBox="0 0 560 560" preserveAspectRatio="xMidYMid meet">
688                        <line x1="280" y1="100" x2="280" y2="235" />
689                        <line x1="460" y1="280" x2="325" y2="280" />
690                        <line x1="280" y1="460" x2="280" y2="325" />
691                        <line x1="100" y1="280" x2="235" y2="280" />
692                    </svg>
693
694                    <div class="convergence-center">
695                        <img src="images/solace-logo-80.png" srcset="images/solace-logo-40.png 1x, images/solace-logo-80.png 2x" alt="Solace" width="80" height="80" style="border-radius: 16px; width: 100%; height: 100%;">
696                    </div>
697
698                    <div class="pulse-ring"></div>
699                    <div class="pulse-ring"></div>
700                    <div class="pulse-ring"></div>
701
702                    <!-- Orbit nodes -->
703                    <div class="orbit-node" data-pos="top">
704                        <div class="node-inner">
705                            <div class="node-icon" style="background: linear-gradient(135deg, #5a5a5e, #48484c);">
706                                <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
707                                    <circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
708                                    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
709                                    <line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
710                                    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
711                                </svg>
712                            </div>
713                            <div class="node-name">f.lux</div>
714                            <div class="node-capability">Colour temperature only</div>
715                        </div>
716                    </div>
717                    <div class="orbit-node" data-pos="right">
718                        <div class="node-inner">
719                            <div class="node-icon" style="background: linear-gradient(135deg, #5a5a5e, #48484c);">
720                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
721                                    <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 12h18"/><circle cx="8" cy="7.5" r="1.5" fill="white" stroke="none"/><circle cx="16" cy="16.5" r="1.5" fill="white" stroke="none"/>
722                                </svg>
723                            </div>
724                            <div class="node-name">Umbra</div>
725                            <div class="node-capability">Wallpaper switching only</div>
726                        </div>
727                    </div>
728                    <div class="orbit-node" data-pos="bottom">
729                        <div class="node-inner">
730                            <div class="node-icon" style="background: linear-gradient(135deg, #5a5a5e, #48484c);">
731                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
732                                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
733                                </svg>
734                            </div>
735                            <div class="node-name">Nightfall</div>
736                            <div class="node-capability">Dark mode toggle only</div>
737                        </div>
738                    </div>
739                    <div class="orbit-node" data-pos="left">
740                        <div class="node-inner">
741                            <div class="node-icon" style="background: linear-gradient(135deg, #5a5a5e, #48484c);">
742                                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
743                                    <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
744                                </svg>
745                            </div>
746                            <div class="node-name">Shifty</div>
747                            <div class="node-capability">Night Shift control only</div>
748                        </div>
749                    </div>
750
751                    <!-- Merged feature labels -->
752                    <div class="merged-labels">
753                        <div class="merged-label" data-pos="top">
754                            <div class="label-icon" style="background: linear-gradient(135deg, #FF6B3A, #FF9500);">&#128293;</div>
755                            Evening Warmth
756                            <span class="label-check">&#10003;</span>
757                        </div>
758                        <div class="merged-label" data-pos="right">
759                            <div class="label-icon" style="background: linear-gradient(135deg, #7070DE, #9090EE);">&#127749;</div>
760                            Wallpaper Sync
761                            <span class="label-check">&#10003;</span>
762                        </div>
763                        <div class="merged-label" data-pos="bottom">
764                            <div class="label-icon" style="background: linear-gradient(135deg, #0A84FF, #5AC8FA);">&#9925;</div>
765                            Weather-Aware
766                            <span class="label-check">&#10003;</span>
767                        </div>
768                        <div class="merged-label" data-pos="left">
769                            <div class="label-icon" style="background: linear-gradient(135deg, #FF9500, #FFBD2E);">&#9728;&#65039;</div>
770                            Solar Scheduling
771                            <span class="label-check">&#10003;</span>
772                        </div>
773                    </div>
774                </div>
775
776                <div class="comparison-scroll-hint" id="comparisonScrollHint">
777                    Scroll to continue
778                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
779                </div>
780
781                <!-- Comparison table -->
782                <div class="comparison-table-wrapper" id="comparisonTableWrap">
783                    <table class="comparison-table">
784                        <thead>
785                            <tr>
786                                <th>Feature</th>
787                                <th class="solace-col">Solace</th>
788                                <th>f.lux</th>
789                                <th>Umbra</th>
790                                <th>Nightfall</th>
791                                <th>Shifty</th>
792                            </tr>
793                        </thead>
794                        <tbody>
795                            <tr><td>Custom dark mode scheduling</td><td class="solace-col"><span class="check">&#10003;</span></td><td>Sunset only</td><td><span class="cross">&#10005;</span></td><td><span class="cross">&#10005;</span></td><td>Via Night Shift</td></tr>
796                            <tr><td>Solar times (sunrise/sunset)</td><td class="solace-col"><span class="check">&#10003;</span></td><td><span class="check">&#10003;</span></td><td><span class="cross">&#10005;</span></td><td><span class="cross">&#10005;</span></td><td><span class="check">&#10003;</span></td></tr>
797                            <tr><td>Colour temperature</td><td class="solace-col"><span class="check">&#10003;</span></td><td><span class="check">&#10003;</span></td><td><span class="cross">&#10005;</span></td><td><span class="cross">&#10005;</span></td><td><span class="check">&#10003;</span></td></tr>
798                            <tr><td>Wallpaper switching</td><td class="solace-col"><span class="check">&#10003;</span></td><td><span class="cross">&#10005;</span></td><td><span class="check">&#10003;</span></td><td><span class="cross">&#10005;</span></td><td><span class="cross">&#10005;</span></td></tr>
799                            <tr><td>
799Multi-display support</td><td class="solace-col"><span class="check">&#10003;</span></td><td><span class="cross">&#10005;</span></td><td><span class="check">&#10003;</span></td><td><span class="cross">&#10005;</span></td><td><span class="cross">&#10005;</span></td></tr>
800                            <tr><td>Weather-aware switching</td><td class="solace-col"><span class="check">&#10003;</span></td><td><span class="cross">&#10005;</span></td><td><span class="cross">&#10005;</span></td><td><span class="cross">&#10005;</span></td><td><span class="cross">&#10005;</span></td></tr>
801                            <tr><td>Keyboard shortcut toggle</td><td class="solace-col"><span class="check">&#10003;</span></td><td><span class="cross">&#10005;</span></td><td><span class="check">&#10003;</span></td><td><span class="check">&#10003;</span></td><td><span class="check">&#10003;</span></td></tr>
802                            <tr><td>Actively maintained (2024+)</td><td class="solace-col"><span class="check">&#10003;</span></td><td>Last update 2023</td><td><span class="check">&#10003;</span></td><td><span class="check">&#10003;</span></td><td><span class="check">&#10003;</span></td></tr>
803                            <tr><td>No data collection</td><td class="solace-col"><span class="check">&#10003;</span></td><td><span class="cross">&#10005;</span></td><td><span class="check">&#10003;</span></td><td><span class="check">&#10003;</span></td><td><span class="check">&#10003;</span></td></tr>
804                            <tr><td>Price</td><td class="solace-col"><strong>$9.99</strong></td><td>$39</td><td>Free</td><td>Free</td><td>Free</td></tr>
805                        </tbody>
806                    </table>
807                </div>
808
809                <p class="comparison-swipe-hint">Swipe to see all apps &rarr;</p>
810                <p class="comparison-links reveal">Read the full comparisons: <a href="blog/posts/solace-vs-flux">Solace vs f.lux</a> &middot; <a href="blog/posts/solace-vs-nightfall">Solace vs Nightfall</a> &middot; <a href="blog/posts/solace-vs-umbra">Solace vs Umbra</a> &middot; <a href="blog/posts/solace-vs-shifty">Solace vs Shifty</a></p>
811            </div>
812        </div>
813    </div>
814
815    <!-- Section 10: Pricing -->
816    <section id="pricing" class="section section-pricing">
817        <div class="section-content">
818            <span class="section-label reveal">PRICING</span>
819            <h2 class="section-headline reveal">One app. One price.<br>Yours forever.</h2>
820
821            <div class="pricing-card glass reveal">
822                <div class="pricing-card-glow"></div>
823                <ul class="pricing-features">
824                    <li>
825                        <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg>
826                        <span><strong>Smart switching</strong><br>Follows the sun, your schedule, or the weather</span>
827                    </li>
828                    <li>
829                        <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg>
830                        <span><strong>Wallpaper pairs</strong><br>Light and dark wallpapers across every display</span>
831                    </li>
832                    <li>
833                        <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg>
834                        <span><strong>Evening warmth</strong><br>Blue light fades at sunset to protect your sleep</span>
835                    </li>
836                    <li>
837                        <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg>
838                        <span><strong>Instant toggle</strong><br>One keypress to switch, from any app</span>
839                    </li>
840                    <li>
841                        <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg>
842                        <span><strong>Always up to date</strong><br>Every future feature included, no upsells</span>
843                    </li>
844                    <li>
845                        <svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18"><path d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"/></svg>
846                        <span><strong>Private by design</strong><br>Runs entirely on your Mac. Zero data collection.</span>
847                    </li>
848                </ul>
849                <div class="cta-pair cta-pair--card"><a href="/solace/downloads/Solace-latest.dmg" class="btn btn-primary btn-trial">Download Free Trial</a><a href="https://buy.polar.sh/polar_cl_RfdhJNk2t7dVY0aafXeOvNm1OlXz2zu3ycRDm0dZpeU" class="btn btn-primary btn-buy">Buy Once $9.99</a></div>
850                <p class="cta-pair-note">Try every feature free for 14 days, then $9.99 once.</p>
851            </div>
852        </div>
853    </section>
854
855    <!-- ===== 14-Day Money-Back Guarantee (Theodore HQ house banner) ===== -->
856    <style>
857    .grt{
858      /* CUSTOMISE 1: light accent family for Solace (blue) */
859      --grt-accent:var(--moon-purple); --grt-accent-deep:#5757B8; --grt-accent-soft:rgba(112,112,222,.14); --grt-glow:#9A9AEE; --grt-warm:#E0A15A;
860      /* CUSTOMISE 3: fonts + token aliases mapped to Solace's theme vars */
861      --fd:var(--font-family); --fb:var(--font-family); --radius-lg:28px;
862      --ink1:var(--text-primary); --ink2:var(--text-secondary); --ink3:var(--text-tertiary); --ink4:var(--text-tertiary);
863      --card:var(--bg-card); --paper:var(--bg-main); --hairline:var(--border-subtle);
864      --ease-out-expo:cubic-bezier(.19,1,.22,1);
865      --orb-spring:linear(0,0.009,0.035 2.1%,0.141,0.281 6.7%,0.723 12.9%,0.938 16.7%,1.017,1.077,1.121 24.6%,1.149 26.9%,1.159,1.163,1.161,1.154 33.4%,1.129 36.8%,1.051 44.1%,1.017 47.6%,0.991,0.977 54.4%,0.975 58.5%,0.984 64.7%,1.001 80.4%,1.006,1.002 92.9%,1);
866    }
867    /* CUSTOMISE 2: dark accent family for Solace (lighter blue, keep both rules in sync) */
868    :root[data-theme="dark"] .grt{ --grt-accent:var(--moon-purple); --grt-accent-deep:#9A9AEE; --grt-accent-soft:rgba(112,112,222,.2); --grt-glow:#9A9AEE; --grt-warm:#F0BE7A; }
869    @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .grt{ --grt-accent:var(--moon-purple); --grt-accent-deep:#9A9AEE; --grt-accent-soft:rgba(112,112,222,.2); --grt-glow:#9A9AEE; --grt-warm:#F0BE7A; } }
870
871    /* REQUIRED: most host sites give p/h3/h4 a default margin (Echo does not). Without
872       this reset those margins leak into the callouts + heading and inflate the card
873       ~150-170px taller than it should be (wrong, too-square aspect ratio). Keep this. */
874    .grt h3,.grt h4,.grt p{margin:0}
875
876    .grt-band{position:relative;padding:0 var(--content-padding) clamp(38px,6vw,72px);margin-top:clamp(-104px,-7.6vw,-80px)}
877    .grt-wrap{position:relative;z-index:1;max-width:1100px;margin:0 auto} /* CUSTOMISE 6: match Solace section content width (1100) */
878    .grt-eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--grt-accent-deep)}
879    .grt-h{font-family:var(--fd);font-weight:600;letter-spacing:-.025em;color:var(--ink1);line-height:1.05}
880    .grt-h em{font-style:normal;color:var(--grt-accent-deep);position:relative;isolation:isolate;transition:color .4s var(--ease-out)}
881    .grt-h em::before{content:"";position:absolute;z-index:-1;left:-5px;right:-5px;bottom:.05em;height:.66em;
882      background:color-mix(in srgb,var(--grt-glow) 38%, transparent);border-radius:6px 11px 7px 9px;
883      transform:scaleX(0) rotate(-.8deg);transform-origin:right center;transition:transform .55s var(--ease-out)}
884    .grt-b .grt-card:hover .grt-h em::before{transform:scaleX(1) rotate(-.8deg);transform-origin:left center}
885    @media (prefers-reduced-motion:reduce){.grt-h em::before{transition:none}}
886    /* dark mode: a white marker covering the word + dark text on hover, so it stays readable */
887    :root[data-theme="dark"] .grt-h em::before{background:color-mix(in srgb,#fff 90%, transparent);height:1.02em;bottom:-.05em}
888    :root[data-theme="dark"] .grt-b .grt-card:hover .grt-h em{color:#15201B}
889    @media (prefers-color-scheme:dark){
890      :root:not([data-theme="light"]) .grt-h em::before{background:color-mix(in srgb,#fff 90%, transparent);height:1.02em;bottom:-.05em}
891      :root:not([data-theme="light"]) .grt-b .grt-card:hover .grt-h em{color:#15201B}
892    }
893    .grt-p{color:var(--ink2);line-height:1.6}
894
895    .grt-seal-ring{position:relative;width:216px;height:216px;display:grid;place-items:center;text-decoration:none;color:inherit;cursor:pointer;perspective:640px}
896    .grt-seal-ring::before{content:"";position:absolute;inset:34px;border-radius:50%;z-index:0;
897      background:radial-gradient(closest-side, color-mix(in srgb,var(--moon-purple) 15%, transparent), transparent 70%)}
898    .grt-seal-ring img{position:relative;z-index:1;width:131px;height:131px;display:block;
899      filter:drop-shadow(0 0 9px color-mix(in srgb,var(--moon-purple) 38%, transparent)) drop-shadow(0 0 20px color-mix(in srgb,var(--moon-purple) 18%, transparent)) drop-shadow(0 9px 18px color-mix(in srgb,var(--moon-purple) 18%, transparent));
900      transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));rotate:0deg;transition:transform .3s var(--ease-out), rotate .72s var(--orb-spring)}
901    .grt-seal-ring:hover img{rotate:-14deg;transition:transform .3s var(--ease-out), rotate .5s var(--orb-spring)}
902    .grt-seal-ring .grt-logo-dark{display:none}
903    :root[data-theme="dark"] .grt-seal-ring .grt-logo-light{display:none}
904    :root[data-theme="dark"] .grt-seal-ring .grt-logo-dark{display:block}
905    @media (prefers-color-scheme:dark){
906      :root:not([data-theme="light"]) .grt-seal-ring .grt-logo-light{display:none}
907      :root:not([data-theme="light"]) .grt-seal-ring .grt-logo-dark{display:block}
908    }
909    .grt-ring{position:absolute;inset:0;z-index:3;overflow:visible}
910    .grt-ring text{font-family:var(--fb);font-weight:700;font-size:10px;letter-spacing:1.4px;fill:var(--grt-accent-deep);text-transform:uppercase}
911    .grt-ring .t-name{fill:var(--grt-accent)}
912    @media (prefers-reduced-motion:no-preference){
913      .grt-ring{animation:grtSpin 34s linear infinite;transform-origin:50% 50%;transform-box:border-box}
914      @keyframes grtSpin{to{transform:rotate(360deg)}}
915    }
916    @media (prefers-reduced-motion:reduce){ .grt-seal-ring img,.grt-seal-ring:hover img{rotate:0deg;transition:none} }
917
918    .grt-b .grt-card{position:relative;display:flex;align-items:stretch;background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:0 30px 70px rgba(20,40,32,.13);overflow:hidden;transition:transform .55s var(--ease-out), box-shadow .5s var(--ease-out)}
919    .grt-b .grt-sealcol{flex:none;display:flex;align-items:center;justify-content:center;padding:clamp(22px,2.6vw,34px) clamp(12px,1.6vw,20px) clamp(22px,2.6vw,34px) clamp(44px,5vw,62px)}
920    .grt-b .grt-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:13px;padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,48px)}
921    .grt-b .grt-h{font-size:clamp(24px,3vw,33px)}
922    .grt-b .grt-p{font-size:15px;max-width:684px;text-wrap:pretty;color:var(--ink1)}
923    .grt-link{color:var(--grt-accent-deep);font-weight:600;text-decoration:none;transition:color .2s var(--ease-out)}
924    .grt-link:hover{color:var(--grt-accent)}
925
926    .grt-callouts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 22px;margin-top:24px}
927    .grt-co{display:flex;flex-direction:row;align-items:flex-start;gap:12px}
928    .grt-co .ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(150deg, color-mix(in srgb,var(--grt-accent) 18%, var(--card)), var(--grt-accent-soft));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--grt-accent) 20%, transparent);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),background .4s}
929    .grt-co .ic svg{width:19px;height:19px;fill:none;stroke:var(--grt-accent-deep);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s var(--ease-out)}
930    .grt-co h4{font-family:var(--fd);font-weight:600;font-size:15px;color:var(--ink1);letter-spacing:-.01em;transition:color .3s var(--ease-out)}
931    .grt-co p{font-size:12.5px;color:var(--ink2);line-height:1.5}
932    .grt-co:hover .ic{transform:scale(1.08);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--grt-glow) 55%,transparent), 0 9px 20px color-mix(in srgb,var(--grt-glow) 45%,transparent)}
933    .grt-co:hover h4{color:var(--grt-accent-deep)}
934    .grt-co.co-refund:hover .ic svg{transform:rotate(-360deg)}
935    .grt-co.co-check:hover .ic svg{transform:scale(1.14)}
936    .grt-co.co-support:hover .ic svg{transform:translateY(-2px) rotate(-7deg)}
937    @media (prefers-reduced-motion:reduce){ .grt-co:hover .ic,.grt-co:hover .ic svg{transform:none} }
938
939    .grt-b.grt-anim .grt-wrap{opacity:0;transform:translateY(30px);transition:opacity 1.05s var(--ease-out-expo), transform 1.05s var(--ease-out-expo)}
940    .grt-b.grt-anim .grt-seal-ring{opacity:0;transform:scale(.86);transition:opacity .95s var(--ease-out-expo) .22s, transform .95s var(--ease-out-expo) .22s}
941    .grt-b.grt-anim .grt-co{opacity:0;transform:translateY(14px);transition:opacity .85s var(--ease-out-expo), transform .85s var(--ease-out-expo)}
942    .grt-b.grt-anim .grt-co.co-refund{transition-delay:.5s}
943    .grt-b.grt-anim .grt-co.co-check{transition-delay:.66s}
944    .grt-b.grt-anim .grt-co.co-support{transition-delay:.82s}
945    .grt-b.grt-anim.grt-in .grt-wrap{opacity:1;transform:none}
946    .grt-b.grt-anim.grt-in .grt-seal-ring{opacity:1;transform:none}
947    .grt-b.grt-anim.grt-in .grt-co{opacity:1;transform:none}
948    @media (prefers-reduced-motion:reduce){ .grt-b.grt-anim .grt-wrap,.grt-b.grt-anim .grt-seal-ring,.grt-b.grt-anim .grt-co{opacity:1;transform:none;transition:none} }
949
950    .grt-b .grt-card:hover{transform:translateY(-4px);box-shadow:0 30px 70px rgba(20,40,32,.13), 0 0 0 1.5px color-mix(in srgb,var(--grt-glow) 82%, transparent), 0 0 48px color-mix(in srgb,var(--grt-glow) 58%, transparent)}
951    @media (prefers-reduced-motion:reduce){ .grt-b .grt-card:hover{transform:none} }
952
953    @media (max-width:760px){
954      .grt-b .grt-card{flex-direction:column}
955      .grt-b .grt-sealcol{padding-left:0;padding-right:0}
956      .grt-b .grt-body{align-items:center;text-align:center}
957      .grt-b .grt-p{max-width:48ch}
958      .grt-b .grt-p .grt-brk{display:none}
959      .grt-callouts{grid-template-columns:1fr;gap:16px;width:max-content;max-width:100%;margin:24px auto 0;text-align:left}
960      .grt-co{flex-direction:row;align-items:flex-start;gap:12px}
961    }
962    </style>
963    <section class="grt grt-b grt-band" id="guarantee" aria-label="14-day money-back guarantee">
964      <div class="grt-wrap">
965        <div class="grt-card">
966          <div class="grt-sealcol">
967            <a class="grt-seal-ring" href="https://theodorehq.com" aria-label="Theodore HQ">
968              <svg class="grt-ring" viewBox="0 0 150 150" aria-hidden="true">
969                <defs><path id="ringB" d="M75,75 m-66,0 a66,66 0 1,1 132,0 a66,66 0 1,1 -132,0"/></defs>
970                <text><textPath href="#ringB" startOffset="0" textLength="414" lengthAdjust="spacing"><tspan class="t-name">THEODORE HQ</tspan><tspan>&nbsp;&bull;&nbsp;</tspan><tspan>MONEY-BACK GUARANTEE</tspan><tspan>&nbsp;&bull;&nbsp;</tspan></textPath></text>
971              </svg>
972              <!-- CUSTOMISE 4: Solace's copy of the Theodore HQ sphere PNGs -->
973              <img class="grt-logo grt-logo-light" src="/solace/images/brand/theodorehq-round-light.png" alt="Theodore HQ">
974              <img class="grt-logo grt-logo-dark" src="/solace/images/brand/theodorehq-round-dark.png" alt="Theodore HQ">
975            </a>
976          </div>
977          <div class="grt-body">
978            <span class="grt-eyebrow">Our Promise</span>
979            <h3 class="grt-h">14-Day <em>Money-Back</em> Guarantee</h3>
980            <!-- CUSTOMISE 5: product name -->
981            <p class="grt-p">Solace is made by <a class="grt-link" href="https://theodorehq.com">THEODORE HQ</a>, and every app we make carries <br class="grt-brk">the same promise: only keep it if you love it.</p>
982            <div class="grt-callouts">
983              <div class="grt-co co-refund">
984                <span class="ic"><svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 1 2.6 6.3"/><path d="M3 20v-4h4"/></svg></span>
985                <div><h4>Full Refund</h4><p>Just email us within<br>14 days for your refund.</p></div>
986              </div>
987              <div class="grt-co co-check">
988                <span class="ic"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8.5 12.5l2.5 2.5 4.5-5"/></svg></span>
989                <div><h4>No Questions</h4><p>No forms, no hoops,<br>no friction.</p></div>
990              </div>
991              <div class="grt-co co-support">
992                <span class="ic"><svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H8l-4 4V6a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z"/></svg></span>
993                <div><h4>Human Support</h4><p>A person, not a bot,<br>replies within a day.</p></div>
994              </div>
995            </div>
996          </div>
997        </div>
998      </div>
999    </section>
1000    
1000<script>
1001    (function(){
1002      var band = document.querySelector('#guarantee.grt-b');
1003      if(!band) return;
1004      var reduce = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
1005      band.classList.add('grt-anim');
1006      if(reduce || !('IntersectionObserver' in window)){
1007        band.classList.add('grt-in');
1008      } else {
1009        var io = new IntersectionObserver(function(entries){
1010          entries.forEach(function(e){ if(e.isIntersecting){ band.classList.add('grt-in'); io.disconnect(); } });
1011        }, {threshold:0.25});
1012        io.observe(band);
1013      }
1014      if(!reduce){
1015        var seal = band.querySelector('.grt-seal-ring');
1016        if(seal){
1017          var MAX = 9;
1018          seal.addEventListener('pointermove', function(ev){
1019            var r = seal.getBoundingClientRect();
1020            var x = (ev.clientX - r.left) / r.width - 0.5;
1021            var y = (ev.clientY - r.top) / r.height - 0.5;
1022            seal.style.setProperty('--ry', (x * MAX * 2).toFixed(2) + 'deg');
1023            seal.style.setProperty('--rx', (-y * MAX * 2).toFixed(2) + 'deg');
1024          });
1025          seal.addEventListener('pointerleave', function(){
1026            seal.style.setProperty('--ry','0deg');
1027            seal.style.setProperty('--rx','0deg');
1028          });
1029        }
1030      }
1031    })();
1032    </script>
1032
1033
1034    <!-- Section 10b: Testimonials -->
1035    <section id="testimonials" class="section section-testimonials">
1036        <div class="section-content">
1037            <span class="section-label reveal">WHAT PEOPLE SAY</span>
1038            <h2 class="section-headline reveal">Loved by Mac users<br>who care about their screen.</h2>
1039
1040            <div class="testimonials-grid">
1041                <div class="testimonial-card glass reveal" data-delay="0">
1042                    <blockquote class="testimonial-quote">"I used to manually toggle dark mode twice a day. Now I forget Solace is even running. It just does the right thing, every single time."</blockquote>
1043                    <div class="testimonial-author">
1044                        <span class="testimonial-flag" aria-hidden="true">🇬🇧</span>
1045                        <span class="testimonial-name">James Mitchell</span>
1046                        <span class="testimonial-role">Software Developer, London</span>
1047                    </div>
1048                </div>
1049
1050                <div class="testimonial-card glass reveal" data-delay="1">
1051                    <blockquote class="testimonial-quote">"The evening warmth feature alone is worth it. My eyes feel so much better after long editing sessions. And the solar scheduling is spot on."</blockquote>
1052                    <div class="testimonial-author">
1053                        <span class="testimonial-flag" aria-hidden="true">🇫🇷</span>
1054                        <span class="testimonial-name">Sophie Laurent</span>
1055                        <span class="testimonial-role">Photographer, Paris</span>
1056                    </div>
1057                </div>
1058
1059                <div class="testimonial-card glass reveal" data-delay="2">
1060                    <blockquote class="testimonial-quote">"I replaced three separate apps with Solace. Weather-aware switching during overcast Portland days is genuinely brilliant. One app, everything handled."</blockquote>
1061                    <div class="testimonial-author">
1062                        <span class="testimonial-flag" aria-hidden="true">🇺🇸</span>
1063                        <span class="testimonial-name">Daniel Kim</span>
1064                        <span class="testimonial-role">UX Designer, Portland</span>
1065                    </div>
1066                </div>
1067
1068                <div class="testimonial-card glass reveal" data-delay="0">
1069                    <blockquote class="testimonial-quote">"Set it up in under a minute. Haven't opened it since. Would love an iOS companion app one day, but on Mac it's exactly what I wanted."</blockquote>
1070                    <div class="testimonial-author">
1071                        <span class="testimonial-flag" aria-hidden="true">🇨🇦</span>
1072                        <span class="testimonial-name">Amara Patel</span>
1073                        <span class="testimonial-role">Product Manager, Toronto</span>
1074                    </div>
1075                </div>
1076
1077                <div class="testimonial-card glass reveal" data-delay="1">
1078                    <blockquote class="testimonial-quote">"Finally, an app that gets multi-display right. Both my monitors switch wallpapers and appearance together. No other tool I tried could do that reliably."</blockquote>
1079                    <div class="testimonial-author">
1080                        <span class="testimonial-flag" aria-hidden="true">🇩🇪</span>
1081                        <span class="testimonial-name">Marcus Weber</span>
1082                        <span class="testimonial-role">Data Engineer, Berlin</span>
1083                    </div>
1084                </div>
1085
1086                <div class="testimonial-card glass reveal" data-delay="2">
1087                    <blockquote class="testimonial-quote">"I'm picky about my Mac setup. Solace nails the details. The gradual warmth transition is beautiful, and the keyboard shortcut for manual override is a nice touch."</blockquote>
1088                    <div class="testimonial-author">
1089                        <span class="testimonial-flag" aria-hidden="true">🇦🇺</span>
1090                        <span class="testimonial-name">
1090Elena Novak</span>
1091                        <span class="testimonial-role">Indie Developer, Melbourne</span>
1092                    </div>
1093                </div>
1094            </div>
1095        </div>
1096    </section>
1097
1098    <!-- Section 11: Privacy & Trust -->
1099    <section id="privacy" class="section section-privacy">
1100        <div class="section-content">
1101            <span class="section-label reveal">PRIVACY FIRST</span>
1102            <h2 class="section-headline reveal">What happens on your Mac<br>stays on your Mac.</h2>
1103
1104            <div class="trust-badges">
1105                <div class="trust-badge glass reveal" data-delay="0">
1106                    <div class="trust-icon">
1107                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="32" height="32">
1108                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
1109                            <path d="M9 12l2 2 4-4"/>
1110                        </svg>
1111                    </div>
1112                    <h3 class="trust-title">No Analytics</h3>
1113                    <p class="trust-body">Zero data collection. Zero tracking. We have no idea you exist.</p>
1114                </div>
1115                <div class="trust-badge glass reveal" data-delay="1">
1116                    <div class="trust-icon">
1117                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="32" height="32">
1118                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
1119                            <circle cx="12" cy="10" r="3"/>
1120                        </svg>
1121                    </div>
1122                    <h3 class="trust-title">Local Only</h3>
1123                    <p class="trust-body">Your location stays on your device. Solar times are calculated locally.</p>
1124                </div>
1125                <div class="trust-badge glass reveal" data-delay="2">
1126                    <div class="trust-icon">
1127                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="32" height="32">
1128                            <circle cx="12" cy="12" r="10"/>
1129                            <path d="M8 12l2 2 4-4"/>
1130                        </svg>
1131                    </div>
1132                    <h3 class="trust-title">No Account Needed</h3>
1133                    <p class="trust-body">No sign-up. No email. Install and go.</p>
1134                </div>
1135            </div>
1136        </div>
1137    </section>
1138
1139    <!-- Section 11c: FAQ -->
1140    <section id="faq" class="section section-faq">
1141        <div class="section-content">
1142            <div class="faq-layout">
1143                <div class="faq-head reveal">
1144                    <span class="section-label">Questions</span>
1145                    <h2 class="section-headline">Questions, answered.</h2>
1146                    <p class="faq-sub">The handful of things people ask before they switch to Solace.</p>
1147                </div>
1148                <div class="faq-list reveal" id="faqList">
1149                    <div class="faq-item open">
1150                        <h3 class="faq-qrow"><button class="faq-q" type="button" aria-expanded="true" aria-controls="faqa1">
1151                            <span class="faq-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M12 3l1.7 4.6L18.3 9.4l-4.6 1.7L12 15.7l-1.7-4.6L5.7 9.4l4.6-1.7z"/><path d="M18.5 14.5l.7 1.9 1.9.7-1.9.7-.7 1.9-.7-1.9-1.9-.7 1.9-.7z"/></svg></span>
1152                            <span class="faq-qtext">What does Solace do?</span>
1153                            <span class="faq-toggle" aria-hidden="true"></span>
1154                        </button></h3>
1155                        <div class="faq-awrap"><div class="faq-a" id="faqa1"><p>One menu bar app that keeps your Mac in sync with the day. It switches light and dark automatically, warms the screen at night, swaps your wallpaper to match, and can turn dark on grey, overcast days. It replaces f.lux, a wallpaper switcher, and constant manual toggling.</p></div></div>
1156                    </div>
1157                    <div class="faq-item">
1158                        <h3 class="faq-qrow"><button class="faq-q" type="button" aria-expanded="false" aria-controls="faqa2">
1159                            <span class="faq-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M4.5 4.5l1.4 1.4M18.1 18.1l1.4 1.4M2.5 12h2M19.5 12h2M4.5 19.5l1.4-1.4M18.1 5.9l1.4-1.4"/></svg></span>
1160                            <span class="faq-qtext">How does the automatic switching work?</span>
1161                            <span class="faq-toggle" aria-hidden="true"></span>
1162                        </button></h3>
1163                        <div class="faq-awrap"><div class="faq-a" id="faqa2"><p>Solace follows your local sunrise and sunset, and you can move either one up to 2 hours earlier or later. It can also switch to dark on overcast days with weather-aware switching, and you can toggle instantly with a keyboard shortcut. <a class="faq-link" href="blog/posts/schedule-dark-mode-mac">How to schedule dark mode on Mac</a></p></div></div>
1164                    </div>
1165                    <div class="faq-item">
1166                        <h3 class="faq-qrow"><button class="faq-q" type="button" aria-expanded="false" aria-controls="faqa3">
1167                            <span class="faq-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M12 3c.5 2.4 2 3.6 3.2 5C16.6 9.7 17.5 11 17.5 13a5.5 5.5 0 0 1-11 0c0-1.4.5-2.6 1.4-3.6C8.6 10.6 9 12 10.2 12c1 0 1.4-1 1.1-2.4C11 8 11 5.6 12 3z"/></svg></span>
1168                            <span class="faq-qtext">Does it reduce blue light like Night Shift or f.lux?</span>
1169                            <span class="faq-toggle" aria-hidden="true"></span>
1170                        </button></h3>
1171                        <div class="faq-awrap"><div class="faq-a" id="faqa3"><p>Yes. Evening Warmth eases your screen from cool daylight (6500K) to warm candlelight (1900K), from sunset, from a time you choose, or all the time. While it is on, Solace takes over from Night Shift and hands it back afterwards, with a Compatibility Mode for the newest Macs.</p></div></div>
1172                    </div>
1173                    <div class="faq-item">
1174                        <h3 class="faq-qrow"><button class="faq-q" type="button" aria-expanded="false" aria-controls="faqa4">
1175                            <span class="faq-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2.5"/><circle cx="8.5" cy="10" r="1.6"/><path d="M21 16l-4.5-4.5L9 19"/></svg></span>
1176                            <span class="faq-qtext">Will it change my wallpaper too?</span>
1177                            <span class="faq-toggle" aria-hidden="true"></span>
1178                        </button></h3>
1179                        <div class="faq-awrap"><div class="faq-a" id="faqa4"><p>Yes. Set a light wallpaper and a dark one, and Solace swaps them across all your displays the moment the mode changes. <a class="faq-link" href="blog/posts/change-mac-wallpaper-automatically-time-of-day">How to change your Mac wallpaper automatically</a>
1180                        <a class="faq-link" href="blog/posts/best-wallpaper-apps-mac">The best wallpaper apps for Mac, compared</a></p></div></div>
1181                    </div>
1182                    <div class="faq-item">
1183                        <h3 class="faq-qrow"><button class="faq-q" type="button" aria-expanded="false" aria-controls="faqa5">
1184                            <span class="faq-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><rect x="4.5" y="11" width="15" height="9" rx="2.2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></span>
1185                            <span class="faq-qtext">Is my data private?</span>
1186                            <span class="faq-toggle" aria-hidden="true"></span>
1187                        </button></h3>
1188                        <div class="faq-awrap"><div class="faq-a" id="faqa5"><p>Solace collects nothing about you: no account, no tracking, no anal
1188ytics. Your location is used only to find sunrise and sunset and, if you enable weather, to check Apple's WeatherKit. None of your data is ever sent to us.</p></div></div>
1189                    </div>
1190                    <div class="faq-item">
1191                        <h3 class="faq-qrow"><button class="faq-q" type="button" aria-expanded="false" aria-controls="faqa6">
1192                            <span class="faq-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"><path d="M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0l-6.2-6.2A2 2 0 0 1 3.8 13V5.8a2 2 0 0 1 2-2H13a2 2 0 0 1 1.4.6l6.2 6.2a2 2 0 0 1 0 2.8z"/><circle cx="8" cy="8" r="1.3"/></svg></span>
1193                            <span class="faq-qtext">How much is it, and what do I get?</span>
1194                            <span class="faq-toggle" aria-hidden="true"></span>
1195                        </button></h3>
1196                        <div class="faq-awrap"><div class="faq-a" id="faqa6"><p>Every feature is free to try for 14 days. After that it is a one-time $9.99: no subscription, no in-app purchases, and free updates. It needs macOS 13 Ventura or later and runs natively on Apple Silicon and Intel Macs, at around 3 MB.</p></div></div>
1197                    </div>
1198                    <div class="faq-item">
1199                        <h3 class="faq-qrow"><button class="faq-q" type="button" aria-expanded="false" aria-controls="faqa7">
1200                            <span class="faq-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg></span>
1201                            <span class="faq-qtext">Is there a free trial?</span>
1202                            <span class="faq-toggle" aria-hidden="true"></span>
1203                        </button></h3>
1204                        <div class="faq-awrap"><div class="faq-a" id="faqa7"><p>Yes. Download Solace and every feature is free for 14 days, with no card needed. When the trial ends, Solace pauses until you buy it and keeps all your settings. You can add your licence key any time: right-click the Solace menu bar icon, choose Settings, then Enter Key under Free Trial.</p></div></div>
1205                    </div>
1206                </div>
1207            </div>
1208        </div>
1209    </section>
1210    
1210<script>
1211    (function(){
1212        var list = document.getElementById('faqList');
1213        if (!list) return;
1214        list.setAttribute('data-enhanced', '');
1215
1216        // Measure content and leave the panel at an explicit pixel height (no animation).
1217        function fit(aw){
1218            var prev = aw.style.transition;
1219            aw.style.transition = 'none';
1220            aw.style.height = 'auto';
1221            var h = aw.scrollHeight;
1222            aw.style.height = h + 'px';
1223            void aw.offsetHeight;
1224            aw.style.transition = prev;
1225        }
1226        list.querySelectorAll('.faq-item.open .faq-awrap').forEach(fit);
1227
1228        function setOpen(item, open){
1229            var aw = item.querySelector('.faq-awrap');
1230            var btn = item.querySelector('.faq-q');
1231            if (open){
1232                item.classList.add('open');
1233                btn.setAttribute('aria-expanded', 'true');
1234                aw.style.height = aw.scrollHeight + 'px';
1235            } else {
1236                btn.setAttribute('aria-expanded', 'false');
1237                aw.style.height = aw.scrollHeight + 'px';
1238                void aw.offsetHeight;
1239                aw.style.height = '0px';
1240                item.classList.remove('open');
1241            }
1242        }
1243        list.addEventListener('click', function(e){
1244            var btn = e.target.closest('.faq-q');
1245            if (!btn) return;
1246            var item = btn.closest('.faq-item');
1247            setOpen(item, !item.classList.contains('open'));
1248        });
1249
1250        // Keep open panels fitted to content if the layout reflows.
1251        var rt;
1252        window.addEventListener('resize', function(){
1253            clearTimeout(rt);
1254            rt = setTimeout(function(){ list.querySelectorAll('.faq-item.open .faq-awrap').forEach(fit); }, 150);
1255        });
1256    })();
1257    </script>
1257
1258
1259    <!-- Comparison table: pop the checkmarks in when it scrolls into view -->
1260    
1260<script>
1261    (function(){
1262        var table = document.querySelector('.comparison-table');
1263        if (!table || !('IntersectionObserver' in window)) return;
1264        var checks = table.querySelectorAll('.check');
1265        if (!checks.length) return;
1266        checks.forEach(function(c, i){ c.style.transitionDelay = Math.min(i * 22, 420) + 'ms'; });
1267        table.classList.add('checks-armed');
1268        var io = new IntersectionObserver(function(entries){
1269            entries.forEach(function(e){
1270                if (e.isIntersecting){
1271                    requestAnimationFrame(function(){ table.classList.add('checks-in'); });
1272                    io.disconnect();
1273                }
1274            });
1275        });
1276        io.observe(table);
1277    })();
1278    </script>
1278
1279
1280    <!-- THEODORE HQ Collection - Charm, Atlas, Shiny -->
1281    <section class="catalogue-section" aria-label="From the THEODORE HQ Collection">
1282        <div class="catalogue-inner">
1283            <a class="cat-eyebrow cat-eyebrow-link" href="https://www.theodorehq.com/">From the <span class="cat-hq"><img class="cat-hq-logo cat-hq-light" src="images/brand/theodorehq-round-light.png" alt="" aria-hidden="true" width="16" height="16"><img class="cat-hq-logo cat-hq-dark" src="images/brand/theodorehq-round-dark-v2-icon.png" alt="" aria-hidden="true" width="16" height="16">Theodore HQ</span> collection</a>
1284            <h2 class="cat-display">Small studio. Serious craft.</h2>
1285
1286            <div class="catalogue-grid">
1287
1288                <!-- Charm -->
1289                <a href="https://www.theodorehq.com/charm/" class="cat-card cat-charm">
1290                    <div class="cat-brand">
1291                        <span class="cat-icon-wrap">
1292                            <img src="https://www.theodorehq.com/atlas/assets/charm-icon.png" alt="" class="cat-icon" width="46" height="46" loading="lazy">
1293                        </span>
1294                        <h3 class="cat-name">Charm</h3>
1295                    </div>
1296                    <p class="cat-tag">Your private writing partner for Mac: <strong>spelling, grammar, and prediction</strong> that learns how you write, <strong>entirely on-device</strong>.</p>
1297                </a>
1298
1299                <!-- Atlas -->
1300                <a href="https://www.theodorehq.com/atlas/" class="cat-card cat-atlas">
1301                    <div class="cat-brand">
1302                        <span class="cat-icon-wrap">
1303                            <img src="https://www.theodorehq.com/atlas/images/atlas-icon/atlas-icon-180.png" alt="" class="cat-icon" width="46" height="46" loading="lazy">
1304                        </span>
1305                        <h3 class="cat-name">Atlas</h3>
1306                    </div>
1307                    <p class="cat-tag">Every time zone, beautifully in view: a <strong>luminous world map</strong> showing <strong>daylight overlap</strong> for everyone in your day.</p>
1308                </a>
1309
1310                <!-- Shiny -->
1311                <a href="https://www.theodorehq.com/shiny/" class="cat-card cat-shiny">
1312                    <div class="cat-brand">
1313                        <span class="cat-icon-wrap">
1314                            <img src="https://www.theodorehq.com/atlas/assets/shiny-icon.png" alt="" class="cat-icon" width="46" height="46" loading="lazy">
1315                        </span>
1316                        <h3 class="cat-name">Shiny</h3>
1317                    </div>
1318                    <p class="cat-tag"><strong>One-tap memory cleanup</strong> and <strong>runaway app pausing</strong> keep your Mac quick, <strong>no restart</strong>.</p>
1319                </a>
1320
1321                <!-- Muse -->
1322                <a href="https://www.theodorehq.com/muse/" class="cat-card cat-muse">
1323                    <div class="cat-brand">
1324                        <span class="cat-icon-wrap">
1325                            <img src="images/muse-icon.png" alt="" class="cat-icon" width="46" height="46" loading="lazy">
1326                        </span>
1327                        <h3 class="cat-name">Muse</h3>
1328                    </div>
1329                    <p class="cat-tag">Collect, organise and reference your <strong>links, images and video</strong>: one private library with <strong>AI search that runs on your Mac</strong>.</p>
1330                </a>
1331
1332                <!-- Echo -->
1333                <a href="https://www.theodorehq.com/echo/" class="cat-card cat-echo">
1334                    <div class="cat-brand">
1335                        <span class="cat-icon-wrap">
1336                            <img src="images/echo-icon.png" alt="" class="cat-icon" width="46" height="46" loading="lazy">
1337                        </span>
1338                        <h3 class="cat-name">Echo</h3>
1339                    </div>
1340                    <p class="cat-tag"><strong>Every song, podcast and video</strong> remembered, ready to <strong>resume with one keystroke</strong>.</p>
1341                </a>
1342
1343                <!-- Chorus -->
1344                <a href="https://www.theodorehq.com/chorus/" class="cat-card cat-chorus">
1345                    <div class="cat-brand">
1346                        <span class="cat-icon-wrap">
1347                            <img src="images/chorus-icon.png" alt="" class="cat-icon" width="46" height="46" loading="lazy">
1348                        </span>
1349                        <h3 class="cat-name">Chorus</h3>
1350                    </div>
1351                    <p class="cat-tag">Complete control of your Mac's <strong>speakers and mics</strong>. <strong>Group your outputs</strong>, <strong>prioritise your inputs</strong>, and switch easily.</p>
1352                </a>
1353
1354            </div>
1355        </div>
1356    </section>
1357
1358    <!-- Section 12: Final CTA + Cinematic Starry Night -->
1359    <section id="cta-final" class="section section-final">
1360        <div class="section-content">
1361            <div class="final-nebula" aria-hidden="true"></div>
1362            <h2 class="final-headline reveal">Let your Mac adapt.</h2>
1363            <p class="final-sub reveal">One-time purchase. No subscription. Yours forever.</p>
1364            <div class="cta-pair reveal"><a href="/solace/downloads/Solace-latest.dmg" class="btn btn-primary btn-trial">Download Free Trial</a><a href="https://buy.polar.sh/polar_cl_RfdhJNk2t7dVY0aafXeOvNm1OlXz2zu3ycRDm0dZpeU" class="btn btn-primary btn-buy">Buy Once $9.99</a></div>
1365        </div>
1366    </section>
1367
1368    <!-- Footer -->
1369    <footer class="site-footer scf-host">
1370<div class="scf-blur" aria-hidden="true"></div>
1371        <div class="footer-content">
1372            <div class="footer-left">
1373                <a href="./" class="footer-brand">
1374                    <img src="images/solace-logo-40.png" srcset="images/solace-logo-40.png 1x, images/solace-logo-80.png 2x" alt="" class="footer-logo" width="24" height="24" style="border-radius: 5px;">
1375                    <span>Solace</span>
1376                </a>
1377                <a href="https://x.com/_theo_dore" target="_blank" rel="noopener noreferrer" class="footer-social" aria-label="Solace on X"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
1378            </div>
1379            <div class="footer-links">
1380                <a href="download">Download</a>
1381                <div class="footer-dropdown-wrapper">
1382                    <span class="footer-dropdown-trigger">Compare</span>
1383                    <div class="footer-dropdown-menu">
1384                        <a href="blog/posts/solace-vs-flux">Solace vs f.lux</a>
1385                        <a href="blog/posts/solace-vs-nightfall">Solace vs Nightfall</a>
1386                        <a href="blog/posts/solace-vs-umbra">Solace vs Umbra</a>
1387                        <a href="blog/posts/solace-vs-shifty">Solace vs Shifty</a>
1388                    </div>
1389                </div>
1390                <a href="blog/">Blog</a>
1391                <div class="scf scf-center">
1392  <a class="scf-trigger" href="https://support.theodorehq.com/solace/">Support Centre</a>
1393  <div class="scf-pos"><div class="scf-panel">
1394    <a class="scf-head" href="https://support.theodorehq.com/solace/">
1395      <img class="scf-icon" src="/solace/images/support-centre-icon.png" alt="" width="24" height="24">
1396      <span class="scf-names"><span class="scf-name">Solace</span><span class="scf-sub">Support Centre</span></span>
1397    </a>
1398    <div class="scf-rule"></div>
1399    <div class="scf-grid">
1400      <a class="scf-chip" style="--scf-i:0" href="https://support.theodorehq.com/solace/bugs/"><span class="scf-chip-in"><span class="scf-gx"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="9" r="4.2"/><path d="M8 7v2.2M8 11.4v.1"/><path d="M4.9 5.9 3.5 4.5M11.1 5.9l1.4-1.4"/></svg></span>Bugs</span></a>
1401      <a class="scf-chip" style="--scf-i:1" href="https://support.theodorehq.com/solace/features/"><span class="scf-chip-in"><span class="scf-gx"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2.2l1.5 3.4 3.7.4-2.8 2.5.8 3.6L8 10.2l-3.2 1.9.8-3.6L2.8 6l3.7-.4z"/></svg></span>Features</span></a>
1402      <a class="scf-chip" style="--scf-i:2" href="https://support.theodorehq.com/solace/roadmap/"><span class="scf-chip-in"><span class="scf-gx"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 4h11M2.5 8h8M2.5 12h5"/></svg></span>Roadmap</span></a>
1403      <a class="scf-chip" style="--scf-i:3" href="https://support.theodorehq.com/solace/changelog/"><span class="scf-chip-in"><span class="scf-gx"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="5.5"/><path d="M8 5.2V8l1.8 1.4"/></svg></span>Changelog</span></a>
1404      <a class="scf-chip" style="--scf-i:4" href="https://support.theodorehq.com/solace/testimonials/"><span class="scf-chip-in"><span class="scf-gx"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.5 8.6c0 2.5-2.5 4.4-5.5 4.4-.8 0-1.6-.1-2.3-.4L2.5 13.5l.9-2.4c-.6-.7-.9-1.6-.9-2.5 0-2.5 2.5-4.4 5.5-4.4s5.5 1.9 5.5 4.4z"/></svg></span>Testimonials</span></a>
1405      <a class="scf-chip" style="--scf-i:5" href="https://support.theodorehq.com/solace/faq/"><span class="scf-chip-in"><span class="scf-gx"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="8" cy="8" r="5.5"/><path d="M6.3 6.3c.2-.9 1-1.5 1.9-1.4.9.1 1.6.9 1.5 1.7-.1.9-1 1.2-1.5 1.8-.2.2-.2.4-.2.7"/><path d="M8 11.3v.1"/></svg></span>FAQ</span></a>
1406    </div>
1407  </div></div>
1408</div>
1409                <a href="mailto:[email protected]">Contact</a>
1410            </div>
1411            <!-- Secondary group: legal and the plain-text index, kept apart from
1412                 the links people actually came for. -->
1413            <div class="footer-meta">
1414                <div class="footer-dropdown-wrapper">
1415                    <span class="footer-dropdown-trigger">Legal</span>
1416                    <div class="footer-dropdown-menu">
1417                        <a href="terms">Terms</a>
1418                        <a href="privacy">Privacy</a>
1419                    </div>
1420                </div>
1421                <a class="footer-llms" href="/solace/llms.txt">llms.txt</a>
1422            </div>
1423            <p class="footer-copy">&copy;<span class="copy-year">2026</span> THEODORE HQ. All Rights Reserved.</p>
1424        </div>
1425    </footer>
1426
1427    <!-- Cursor Warmth Trail (desktop only) -->
1428    <div id="cursor-warmth" aria-hidden="true"></div>
1429
1430    <!-- defer: these blocked the first frame, which in turn held back the hero's
1431         reveal (its requestAnimationFrame cannot run before a frame is painted)
1432         and pushed LCP past 8s on mobile. defer keeps their execution order and
1433         still runs them before DOMContentLoaded, but lets the page paint first. -->
1434    
1434<script defer src="/solace/js/stars.js"></script>
1434
1435    
1435<script defer src="/solace/js/main.js"></script>
1435
1436
1437    <!-- Custom Event Tracking -->
1438    
1438<script defer src="/solace/js/tracking.js"></script>
1438
1439    
1439<script src="https://support.theodorehq.com/widget.js" data-product="solace" defer></script>
1439
1440</body>
1441</html>
1442

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.