/* ───────────────────────────────────────────────────────────────────────────── The Cozy Talk · evening From 20:00 to 06:00 on the reader's own clock the site turns into its evening self: a dark, warm room lit by three tealights in glass cups in the bottom right corner. The candles are also the switch: blowing them out brings back the light (day) look for the rest of that night, lighting them again brings the evening back. html.ct-dusk it is evening on the reader's clock (set in before the page paints, and by cozytalk.js) html.ct-night evening and the candles are lit: dark page (ct-dusk without ct-lamp-off) How the colours work: every colour of the theme is a variable (theme.json palette -> --ct-*). In the evening the page, text and surfaces swap to a dark warm set. Three kinds of places need more than a swap: dark islands parts that are dark in the day (footer, crisis strip, dark cards, the quote bubble, …) keep their day meaning inside (light text on a very dark surface) light islands parts that stay light in the evening (amber and light gradient backgrounds) keep the day palette inside, so their text stays dark fixed colours a few status colours (the live badge, warnings) get evening versions Every text colour below passes WCAG AA on the surface it sits on (checked with release screenshots). ───────────────────────────────────────────────────────────────────────────── */ /* ── The evening palette ─────────────────────────────────────────────────── */ html.ct-night { color-scheme: dark; --wp--preset--color--sand: #1B1511; /* the page */ --wp--preset--color--cream: #241C17; /* soft raised surfaces: header, chips, card-cream */ --wp--preset--color--ink: #F2E7DA; /* text */ --wp--preset--color--ink-2: #E6D8C6; /* secondary text */ --wp--preset--color--muted: #B8A48F; --wp--preset--color--line: #3B2F27; --wp--preset--color--peach: #43291E; --wp--preset--color--clay: #3F2C24; --wp--preset--color--sage: #4F7563; /* white text on it stays readable, and it shows on the dark page */ --wp--preset--color--sage-soft: #1F2B25; --wp--preset--color--ember-soft: #C9744F; --wp--preset--gradient--dawn: linear-gradient(160deg, #2A1F19 0%, #36231A 55%, #45291A 100%); --wp--preset--gradient--sage-mist: linear-gradient(160deg, #241C17 0%, #1F2B25 100%); --wp--preset--gradient--lamp: radial-gradient(80% 70% at 50% 0%, rgba(240, 178, 122, .16) 0%, rgba(36, 28, 23, 0) 70%), #241C17; --ct-sand: #1B1511; --ct-cream: #241C17; --ct-ink: #F2E7DA; --ct-ink-2: #E6D8C6; --ct-muted: #B8A48F; --ct-line: #3B2F27; --ct-peach: #43291E; --ct-clay: #3F2C24; --ct-sage: #4F7563; --ct-sage-soft: #1F2B25; --ct-ember-soft: #C9744F; --ct-paper: #2A211B; /* cards that are white in the day */ --ct-paper-warm: #2E241D; --ct-ember-text: #EE9A72; /* small accent text: 7:1 on the page */ scrollbar-color: #5A4638 #1B1511; /* the radio keeps its dark bar */ --ctr-ink: #120E0B; --ctr-ink2: #251C16; --ctr-sand: #F2E7DA; } html.ct-night body { background-color: #1B1511; color: #F2E7DA; } /* Headings' serif accent: the ember of the day is too dark for large text on the evening page */ html.ct-night :where(h1, h2, h3, h4, .ct-logo, .ct-footer__brand) em { color: #E88C5F; } html.ct-night .ct-step-no, html.ct-night .ct-line .ct-line__no a { color: #E88C5F; } /* Pictures a shade softer at night, never harsh against the dark */ html.ct-night .wp-site-blocks img { filter: brightness(.9) saturate(.95); } html.ct-night .ct-nav { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } html.ct-night :is(.ct-talk-card, .ct-post-card, .ct-related__card, .ct-popular__item):hover { border-color: #5A4638; } /* ── Dark islands: dark in the day, darker still in the evening, light text inside ── */ html.ct-night :is(.ct-crisis, .ct-footer, .ct-band--night, .is-style-card-dark, .is-style-bubble-quote, .ct-live__next, .ct-phone-list a, .ct-emergency--dim, .has-ink-background-color, .has-ink-2-background-color, .has-evening-gradient-background, :where(pre, .wp-block-code, .wp-block-preformatted), .ct-radio-art, .ct-talk-grid:not(.ct-search-grid) .wp-block-post:first-child .ct-talk-card) { --ct-sand: #F2E7DA; --ct-cream: #F7EEE2; --ct-ink: #120E0B; --ct-ink-2: #251C16; --ct-muted: #B8A48F; --ct-line: #3B2F27; --wp--preset--color--sand: #F2E7DA; --wp--preset--color--cream: #F7EEE2; --wp--preset--color--ink: #120E0B; --wp--preset--color--ink-2: #251C16; --ct-ember-text: #EE9A72; } html.ct-night .ct-footer { border-top: 1px solid #2E241D; } html.ct-night .ct-crisis { border-bottom: 1px solid #2E241D; } html.ct-night .is-style-card-dark, html.ct-night .is-style-bubble-quote, html.ct-night .ct-live__next, html.ct-night .ct-talk-grid:not(.ct-search-grid) .wp-block-post:first-child .ct-talk-card { box-shadow: inset 0 0 0 1px #33281F; } /* ── Light islands: stay light, keep the day palette inside ─────────────────── */ html.ct-night :is(.has-amber-background-color, .has-white-background-color, .has-dawn-gradient-background.ct-keep-light, .has-ember-glow-gradient-background, .ct-emergency:not(.ct-emergency--dim), .ct-btn-amber, .wp-block-button.is-style-amber, .wp-block-image.is-style-polaroid, .wp-block-gallery.is-style-scattered .wp-block-image) { color-scheme: light; --ct-sand: #F4EBDF; --ct-cream: #FFF8EF; --ct-ink: #241C17; --ct-ink-2: #33271F; --ct-muted: #6B5B4F; --ct-line: #E6D8C6; --ct-peach: #F3D9C6; --ct-clay: #E9C9B4; --ct-sage: #3F5E4F; --ct-sage-soft: #DCE5DC; --ct-paper: #fff; --ct-paper-warm: #FFFDF8; --ct-ember-text: color-mix(in srgb, #B4532F 78%, #241C17); --wp--preset--color--sand: #F4EBDF; --wp--preset--color--cream: #FFF8EF; --wp--preset--color--ink: #241C17; --wp--preset--color--ink-2: #33271F; --wp--preset--color--muted: #6B5B4F; --wp--preset--color--line: #E6D8C6; color: #241C17; } html.ct-night .wp-block-image.is-style-polaroid, html.ct-night .wp-block-gallery.is-style-scattered .wp-block-image { background: #F4EDE2; } /* ── Fixed colours with an evening version ─────────────────────────────────── */ html.ct-night .ct-live__badge:not(.is-closed) { background: #3A1D18; color: #F4A896; } html.ct-night .ct-live__crisis { color: #F4A896; } html.ct-night altcha-widget .altcha { --altcha-color-error-text: #F4A896; } html.ct-night .ct-letter__result.is-error, html.ct-night .ct-news__result.is-error { background: #3A231C; } html.ct-night .ct-letter__result.is-answered { background: #3A2C1C; } html.ct-night .ct-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8A48F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } html.ct-night .ct-fchip span { background: rgba(27, 21, 17, .12); } html.ct-night .ct-thought__btn:not(.is-share):not(.is-done) { background: color-mix(in srgb, var(--ct-paper) 80%, transparent); } /* Fluent Forms brings its own dark-grey text: follow the page instead */ html.ct-night .fluentform, html.ct-night .fluentform :is(label, .ff-el-form-control, .ff-el-help-message, .ff_t_c, .ff-el-form-check-label) { color: var(--ct-ink) !important; } html.ct-night .fluentform .ff-el-form-control { background: var(--ct-paper) !important; } html.ct-night .fluentform .ff-el-is-error .text-danger, html.ct-night .fluentform .error { color: #F4A896 !important; } html.ct-night .ff-message-success { color: var(--ct-ink); } /* The open talk */ html.ct-night .ctc { --c-peach: #43291E; } html.ct-night .ctc-msg.is-mod .ctc-msg__bubble { background: #22302A; border-color: #2E4238; } html.ct-night .ctc-msg.is-mod.is-mine .ctc-msg__bubble { background: #26362F; } html.ct-night :is(.ctc-msg__flag, .ctc__skind.is-ban) { background: #3A1D18; color: #F4A896; } html.ct-night .ctc__skind { background: #3A2A1A; color: #F0B27A; } html.ct-night .ctc-tool.is-danger:hover { background: #3A1D18; color: #F4A896; } html.ct-night .ctc-menu { box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .6); } html.ct-night .ctc .ctc-msg__quote { background: rgba(255, 255, 255, .06); } html.ct-night .ctc__title em { color: #E88C5F; } /* Changing between day and evening: colours ease over instead of snapping (only while switching) */ html.ct-switching, html.ct-switching * { transition: background-color .7s ease, color .7s ease, border-color .7s ease, fill .7s ease !important; } /* ── The candles ─────────────────────────────────────────────────────────── */ .ct-candles { display: none; position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: var(--ct-candles-bottom, 14px); z-index: 56; width: 132px; height: 70px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } html.ct-dusk .ct-candles { display: block; } .ct-candles svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Scrolling, or at the end of the page: a faint glow, so the text behind stays readable (cozytalk.js) */ .ct-candles { transition: opacity .45s ease, transform .45s ease; } .ct-candles.is-resting { opacity: .22; transform: scale(.9); transform-origin: 100% 100%; } .ct-candles.is-resting:hover, .ct-candles.is-resting:focus-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .ct-candles { transition: opacity .2s linear; } .ct-candles.is-resting { transform: none; } } .ct-candles:focus-visible { outline: 3px solid var(--ct-amber); outline-offset: 4px; border-radius: 14px; } /* Above the radio bar on phones, and the back-to-top button moves up out of their way */ @media (max-width: 640px) { .ct-candles { width: 104px; height: 55px; right: 12px; bottom: var(--ct-candles-bottom, 12px); } .ctr-has-bar .ct-candles { bottom: var(--ct-candles-bottom, 82px); } } /* The back-to-top button sits above the candles */ html.ct-dusk .ct-top { bottom: calc(var(--ct-candles-bottom, 14px) + 84px); } @media (max-width: 640px) { html.ct-dusk .ct-top { bottom: calc(var(--ct-candles-bottom, 12px) + 68px); } html.ct-dusk .ctr-has-bar .ct-top { bottom: calc(var(--ct-candles-bottom, 82px) + 68px); } } .ct-candle__glass { fill: rgba(255, 196, 130, .10); stroke: rgba(255, 214, 170, .42); stroke-width: 1.2; } html:not(.ct-night) .ct-candle__glass { fill: rgba(255, 255, 255, .55); stroke: rgba(107, 91, 79, .45); } .ct-candle__tin { fill: url(#ctTin); } .ct-candle__wax { fill: url(#ctWax); } .ct-candle__wick { stroke: #3A2A20; stroke-width: 1.4; stroke-linecap: round; } .ct-candle__halo { opacity: 0; transition: opacity .6s; } .ct-flame { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; transform: scale(.2); transition: opacity .35s, transform .35s; } html.ct-night .ct-flame { opacity: 1; transform: none; } html.ct-night .ct-candle__halo { opacity: 1; } @media (prefers-reduced-motion: no-preference) { html.ct-night .ct-flame { animation: ct-flicker 2.6s ease-in-out infinite; } html.ct-night .ct-candle:nth-child(2) .ct-flame { animation-duration: 3.1s; animation-delay: -.8s; } html.ct-night .ct-candle:nth-child(3) .ct-flame { animation-duration: 2.2s; animation-delay: -1.5s; } html.ct-night .ct-candle__halo { animation: ct-halo 3.4s ease-in-out infinite; } } @keyframes ct-flicker { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 18% { transform: scale(.96, 1.06) skewX(-2deg); } 35% { transform: scale(1.03, .95) skewX(1.5deg); } 52% { transform: scale(.98, 1.08) skewX(-1deg); } 70% { transform: scale(1.02, .97) skewX(2deg); } 86% { transform: scale(.97, 1.04) skewX(-1.5deg); } } @keyframes ct-halo { 0%, 100% { opacity: 1; } 30% { opacity: .82; } 55% { opacity: .95; } 78% { opacity: .86; } } /* Blown out: a thin curl of smoke rises from each wick */ .ct-smoke { opacity: 0; fill: none; stroke: rgba(160, 145, 130, .7); stroke-width: 1.2; stroke-linecap: round; } .ct-candles.is-blown .ct-smoke { animation: ct-smoke 2.2s ease-out forwards; } .ct-candles.is-blown .ct-candle:nth-child(2) .ct-smoke { animation-delay: .15s; } .ct-candles.is-blown .ct-candle:nth-child(3) .ct-smoke { animation-delay: .3s; } @keyframes ct-smoke { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-26px); } } /* The light of the candles on the page: a warm glow from the corner, trembling with the flames */ .ct-candlelight { display: none; position: fixed; inset: 0; z-index: 2147482000; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s ease; --ct-cx: calc(100% - 84px); --ct-cy: calc(100% - var(--ct-candles-bottom, 14px) - 28px); background: radial-gradient(circle at var(--ct-cx) var(--ct-cy), rgba(255, 178, 96, .34) 0, rgba(255, 150, 70, .16) 9vmax, rgba(255, 140, 60, .07) 22vmax, rgba(255, 140, 60, 0) 46vmax), radial-gradient(140% 70% at 100% 100%, rgba(255, 150, 70, .06), rgba(255, 150, 70, 0) 70%); } @media (max-width: 640px) { .ct-candlelight { --ct-cx: calc(100% - 64px); --ct-cy: calc(100% - var(--ct-candles-bottom, 12px) - 24px); } .ctr-has-bar .ct-candlelight { --ct-cy: calc(100% - var(--ct-candles-bottom, 82px) - 24px); } } html.ct-dusk .ct-candlelight { display: block; } html.ct-night .ct-candlelight { opacity: 1; } @media (prefers-reduced-motion: no-preference) { html.ct-night .ct-candlelight { animation: ct-candlelight 3.8s ease-in-out infinite; } } /* Resting candles (scrolling, end of the page) give less light too */ html.ct-night.ct-candles-resting .ct-candlelight { opacity: .4; animation: none; transition: opacity .6s ease; } @keyframes ct-candlelight { 0%, 100% { opacity: 1; } 22% { opacity: .86; } 40% { opacity: .96; } 63% { opacity: .82; } 81% { opacity: .94; } } @media print { .ct-candles, .ct-candlelight { display: none !important; } } /* The radio's small player window: just the player */ .ctr-popup-body .ct-candles, .ctr-popup-body .ct-candlelight { display: none !important; } @media (forced-colors: active) { .ct-candlelight { display: none !important; } }