/* * Themes for the public site (src/theme.php). * * The site's own look is the captured Twenty Seventeen theme, which paints * in fixed colours rather than custom properties. So rather than re-skin * it, each theme sets four values here -- the page wash, the surface the * content sits on, the ink, and an accent -- and a short list of rules * below maps them onto the handful of places that actually carry colour. * Photographs, headshots and the badges are left exactly as they are. * * data-theme is put on by serve_document(); the picker at the foot * of every page is plain links, so this works with JavaScript off. */ :root { --spark-wash: #ffffff; /* behind everything */ --spark-surface: #ffffff; /* the sheet the words sit on */ --spark-ink: #333333; --spark-ink-soft:#767676; --spark-accent: #6d3f8f; --spark-edge: #eeeeee; } [data-theme="island"] { --spark-wash: #fbf4e6; --spark-surface: #fffdf8; --spark-ink: #123037; --spark-ink-soft: #5c757b; --spark-accent: #0e7c86; --spark-edge: #ece0cc; } [data-theme="mountain"] { --spark-wash: #eef1f5; --spark-surface: #ffffff; --spark-ink: #1b2733; --spark-ink-soft: #5d6d7e; --spark-accent: #3a5a78; --spark-edge: #dde4ec; } [data-theme="forest"] { --spark-wash: #eef3ea; --spark-surface: #fdfefc; --spark-ink: #172419; --spark-ink-soft: #55654f; --spark-accent: #2f6b3f; --spark-edge: #dde7d8; } [data-theme="cruise"] { --spark-wash: #eef2f8; --spark-surface: #ffffff; --spark-ink: #101c2c; --spark-ink-soft: #52627a; --spark-accent: #12386b; --spark-edge: #dbe3ef; } [data-theme="desert"] { --spark-wash: #fdf3e8; --spark-surface: #fffcf7; --spark-ink: #2d1a12; --spark-ink-soft: #6d5445; --spark-accent: #b1512c; --spark-edge: #f0dcc8; } [data-theme="aurora"] { --spark-wash: #101720; --spark-surface: #18212c; --spark-ink: #e6edf5; --spark-ink-soft: #a9b8c8; --spark-accent: #6fd3c4; --spark-edge: #2a3543; color-scheme: dark; } /* ---- Where those four values land -------------------------------- */ body, .site-content-contain, .site-footer, .site-header { background-color: var(--spark-wash); } .site-content, .entry-content, .page .panel-content .entry-content { color: var(--spark-ink); } .entry-content a:not(.wp-block-button__link), .site-info a, .entry-title a { color: var(--spark-accent); } .entry-content a:not(.wp-block-button__link):hover { color: var(--spark-ink); } .entry-title, h1, h2, h3, h4, h5, h6 { color: var(--spark-ink); } .wp-block-separator, hr { border-color: var(--spark-edge); } /* The dark theme has more to say, because the theme paints several surfaces white outright. Photographs keep their own colours. */ [data-theme="aurora"] .site-content, [data-theme="aurora"] .panel-content, [data-theme="aurora"] .entry-content, [data-theme="aurora"] .site-footer, [data-theme="aurora"] .navigation-top, [data-theme="aurora"] .site-header { background-color: var(--spark-wash); color: var(--spark-ink); } [data-theme="aurora"] .site-title a, [data-theme="aurora"] .site-description, [data-theme="aurora"] .entry-meta, [data-theme="aurora"] .entry-meta a, [data-theme="aurora"] p, [data-theme="aurora"] li, [data-theme="aurora"] strong { color: var(--spark-ink); } [data-theme="aurora"] .wp-block-image img, [data-theme="aurora"] .wp-block-gallery img { filter: brightness(.94); } [data-theme="aurora"] .spark-initials { filter: invert(.88) hue-rotate(180deg); } /* ---- The picker itself ------------------------------------------- */ .spark-theme-bar { /* The front page's header image is fixed behind the content; without a stacking context of its own the bar ends up underneath it. */ position: relative; z-index: 3; background: var(--spark-wash); border-top: 1px solid var(--spark-edge); color: var(--spark-ink-soft); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-size: 14px; padding: 18px 16px 26px; text-align: center; } .spark-theme-label { display: block; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-bottom: 10px; } .spark-theme-list { display: flex; flex-wrap: wrap; gap: 6px 8px; justify-content: center; list-style: none; margin: 0 0 10px; padding: 0; } .spark-theme-list li { margin: 0; } .spark-theme-link { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--spark-edge); border-radius: 999px; background: var(--spark-surface); color: var(--spark-ink-soft); text-decoration: none; box-shadow: none; } .spark-theme-link:hover { border-color: var(--spark-accent); color: var(--spark-ink); } .spark-theme-link.is-here { border-color: var(--spark-accent); color: var(--spark-ink); font-weight: 600; } .spark-theme-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--spark-edge); background: linear-gradient(135deg, var(--sw1) 0 50%, var(--sw2) 50% 100%); } .spark-theme-note { margin: 0; font-size: 12px; opacity: .8; } @media (max-width: 480px) { .spark-theme-link { padding: 5px 10px; font-size: 13px; } }