/* ========================================================================== La Maison de Saule — colour themes Willow is the default and lives in styles.css. theme.js sets data-palette on for the others, and data-theme for light/dark. Every palette has a light and a dark set, all checked for contrast. ========================================================================== */ /* Garden */ :root[data-palette="garden"] { --ground: #F6F5EE; --surface: #FDFDF8; --surface-2: #ECEEE2; --ink: #2A2F28; --ink-soft: #5A6156; --ink-faint: #7C8378; --line: #DADDCD; --accent: #3F5A3A; --accent-bg: #3F5A3A; --accent-on: #F4F7EF; --blush: #7D8F62; --blush-wash: #E8ECDD; --sage: #8A6B3F; --sage-wash: #F1EBDD; --gold: #9A7638; } @media (prefers-color-scheme: dark) { :root[data-palette="garden"]:not([data-theme="light"]) { --ground: #161A16; --surface: #1E231D; --surface-2: #252B24; --ink: #EBEFE6; --ink-soft: #AEB6A8; --ink-faint: #858D80; --line: #333B31; --accent: #A9C79A; --accent-bg: #3F5A3A; --accent-on: #F4F7EF; --blush: #9FB585; --blush-wash: #232B20; --sage: #D2B27E; --sage-wash: #2A261D; --gold: #D7B36F; } } :root[data-palette="garden"][data-theme="dark"] { --ground: #161A16; --surface: #1E231D; --surface-2: #252B24; --ink: #EBEFE6; --ink-soft: #AEB6A8; --ink-faint: #858D80; --line: #333B31; --accent: #A9C79A; --accent-bg: #3F5A3A; --accent-on: #F4F7EF; --blush: #9FB585; --blush-wash: #232B20; --sage: #D2B27E; --sage-wash: #2A261D; --gold: #D7B36F; } /* River */ :root[data-palette="river"] { --ground: #F3F6F7; --surface: #FCFDFD; --surface-2: #E6EDEF; --ink: #22303A; --ink-soft: #52616B; --ink-faint: #76848C; --line: #D3DDE1; --accent: #1F4E63; --accent-bg: #1F4E63; --accent-on: #F1F7FA; --blush: #4A7F92; --blush-wash: #E1EEF2; --sage: #5F7D61; --sage-wash: #E7EEE5; --gold: #977636; } @media (prefers-color-scheme: dark) { :root[data-palette="river"]:not([data-theme="light"]) { --ground: #121A1F; --surface: #1A242A; --surface-2: #212D34; --ink: #E6EEF1; --ink-soft: #A6B5BC; --ink-faint: #7D8C93; --line: #2E3C44; --accent: #8FC3D6; --accent-bg: #265C74; --accent-on: #F1F7FA; --blush: #7FB2C4; --blush-wash: #1C2D35; --sage: #9DBB9F; --sage-wash: #1F2A22; --gold: #D5B373; } } :root[data-palette="river"][data-theme="dark"] { --ground: #121A1F; --surface: #1A242A; --surface-2: #212D34; --ink: #E6EEF1; --ink-soft: #A6B5BC; --ink-faint: #7D8C93; --line: #2E3C44; --accent: #8FC3D6; --accent-bg: #265C74; --accent-on: #F1F7FA; --blush: #7FB2C4; --blush-wash: #1C2D35; --sage: #9DBB9F; --sage-wash: #1F2A22; --gold: #D5B373; } /* Terracotta */ :root[data-palette="terracotta"] { --ground: #FAF4EC; --surface: #FFFCF7; --surface-2: #F1E6D8; --ink: #33271F; --ink-soft: #69584C; --ink-faint: #8C7B6E; --line: #E6D6C3; --accent: #9A4524; --accent-bg: #9A4524; --accent-on: #FFF5EE; --blush: #B86F49; --blush-wash: #F6E6DA; --sage: #62724F; --sage-wash: #E9EBDD; --gold: #977636; } @media (prefers-color-scheme: dark) { :root[data-palette="terracotta"]:not([data-theme="light"]) { --ground: #1C1612; --surface: #251D18; --surface-2: #2D241E; --ink: #F3E9E0; --ink-soft: #BCAA9C; --ink-faint: #917F72; --line: #3E322A; --accent: #EFA482; --accent-bg: #8C3E20; --accent-on: #FFF5EE; --blush: #D9997A; --blush-wash: #35251D; --sage: #AEBB98; --sage-wash: #252A20; --gold: #D7B36F; } } :root[data-palette="terracotta"][data-theme="dark"] { --ground: #1C1612; --surface: #251D18; --surface-2: #2D241E; --ink: #F3E9E0; --ink-soft: #BCAA9C; --ink-faint: #917F72; --line: #3E322A; --accent: #EFA482; --accent-bg: #8C3E20; --accent-on: #FFF5EE; --blush: #D9997A; --blush-wash: #35251D; --sage: #AEBB98; --sage-wash: #252A20; --gold: #D7B36F; } /* Lavender */ :root[data-palette="lavender"] { --ground: #F8F6FA; --surface: #FFFEFF; --surface-2: #EEEAF3; --ink: #2C2733; --ink-soft: #5E5768; --ink-faint: #847D8E; --line: #DFD9E6; --accent: #54407A; --accent-bg: #54407A; --accent-on: #F7F3FC; --blush: #8470A8; --blush-wash: #EEE8F6; --sage: #5F7558; --sage-wash: #E8EDE4; --gold: #977636; } @media (prefers-color-scheme: dark) { :root[data-palette="lavender"]:not([data-theme="light"]) { --ground: #17151C; --surface: #1F1C26; --surface-2: #27232F; --ink: #EEEAF3; --ink-soft: #B1A9BC; --ink-faint: #878093; --line: #37313F; --accent: #C6B3EA; --accent-bg: #5C4786; --accent-on: #F7F3FC; --blush: #AE9BD2; --blush-wash: #282236; --sage: #A4BB9C; --sage-wash: #212A20; --gold: #D4B475; } } :root[data-palette="lavender"][data-theme="dark"] { --ground: #17151C; --surface: #1F1C26; --surface-2: #27232F; --ink: #EEEAF3; --ink-soft: #B1A9BC; --ink-faint: #878093; --line: #37313F; --accent: #C6B3EA; --accent-bg: #5C4786; --accent-on: #F7F3FC; --blush: #AE9BD2; --blush-wash: #282236; --sage: #A4BB9C; --sage-wash: #212A20; --gold: #D4B475; } /* Stone */ :root[data-palette="stone"] { --ground: #F5F3EF; --surface: #FDFCFA; --surface-2: #EBE7E0; --ink: #262422; --ink-soft: #5B5752; --ink-faint: #7F7A73; --line: #DAD5CC; --accent: #262422; --accent-bg: #262422; --accent-on: #F8F5EF; --blush: #8F6F34; --blush-wash: #F0E9DA; --sage: #5F6A5A; --sage-wash: #E9EBE4; --gold: #8F6F34; } @media (prefers-color-scheme: dark) { :root[data-palette="stone"]:not([data-theme="light"]) { --ground: #151413; --surface: #1D1C1A; --surface-2: #252321; --ink: #EFECE6; --ink-soft: #B3AEA6; --ink-faint: #88837C; --line: #35322E; --accent: #E3C98F; --accent-bg: #4A4337; --accent-on: #FAF6EC; --blush: #CDAE6E; --blush-wash: #2A251B; --sage: #A7B29F; --sage-wash: #22261F; --gold: #D7B36F; } } :root[data-palette="stone"][data-theme="dark"] { --ground: #151413; --surface: #1D1C1A; --surface-2: #252321; --ink: #EFECE6; --ink-soft: #B3AEA6; --ink-faint: #88837C; --line: #35322E; --accent: #E3C98F; --accent-bg: #4A4337; --accent-on: #FAF6EC; --blush: #CDAE6E; --blush-wash: #2A251B; --sage: #A7B29F; --sage-wash: #22261F; --gold: #D7B36F; } /* The logos are pink PNGs. On any other palette, paint them in the palette's colour through their own transparency. */ :root[data-palette] :is(.hero-logo, .bar-logo) { object-position: -10000px 0; background: var(--blush); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; } :root[data-palette] .hero-logo { --logo: url("img/logo-willow.png"); } :root[data-palette] .bar-logo { --logo: url("img/logo-mark.png"); } body { transition: background-color .25s ease, color .25s ease; } /* ---------- button in the top bar ---------- */ .bar-btn { flex: none; white-space: nowrap; } .bar-icon { width: 38px; padding: 0; color: var(--ink-soft); } /* With Back, Menu and this button all showing, a 375px phone is tight: pull the buttons in a little so the name isn't cut off. */ @media (max-width: 420px) { .bar { gap: 6px; padding-inline: 12px; } .bar-btn:not(.bar-icon) { padding-inline: 10px; } .bar-icon { width: 36px; } } .bar-icon[aria-expanded="true"] { border-color: var(--blush); color: var(--accent); } /* ---------- the sheet ---------- */ .theme-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(20, 14, 16, .32); touch-action: none; animation: theme-fade .2s ease; } .theme-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); border-radius: 22px 22px 0 0; background: var(--surface); color: var(--ink); box-shadow: 0 -12px 40px -14px rgba(0, 0, 0, .4); overscroll-behavior: contain; animation: theme-rise .26s cubic-bezier(.2, .8, .25, 1); } /* grab handle, purely visual */ .theme-sheet::before { content: ""; display: block; width: 38px; height: 4px; margin: 0 auto 8px; border-radius: 2px; background: var(--line); } .theme-head { display: flex; align-items: center; justify-content: space-between; } .theme-head h2 { font-size: 1.3rem; } .theme-close { width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: none; color: var(--ink-faint); font-size: 1.6rem; line-height: 1; cursor: pointer; } .theme-label { margin: 14px 0 8px; font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); } /* Match phone / Light / Dark as one segmented control */ .theme-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; border-radius: 12px; background: var(--surface-2); } .theme-modes button { min-height: 44px; padding: 6px 4px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-soft); font-size: .9rem; cursor: pointer; } .theme-modes button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, .14); } .theme-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .theme-swatches button { display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 76px; padding: 11px 4px 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--ground); color: var(--ink-soft); font-size: .84rem; cursor: pointer; -webkit-tap-highlight-color: transparent; } .theme-swatches button[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); color: var(--ink); font-weight: 500; } .theme-chip { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 75%, var(--c3) 75%); box-shadow: 0 0 0 1px rgba(128, 128, 128, .25); } [data-palette="willow"] > .theme-chip { --c1: #6D2B43; --c2: #B07289; --c3: #76886A; } [data-palette="garden"] > .theme-chip { --c1: #3F5A3A; --c2: #7D8F62; --c3: #C2A36F; } [data-palette="river"] > .theme-chip { --c1: #1F4E63; --c2: #4A7F92; --c3: #9DBB9F; } [data-palette="terracotta"] > .theme-chip { --c1: #9A4524; --c2: #C27A55; --c3: #8C9A74; } [data-palette="lavender"] > .theme-chip { --c1: #54407A; --c2: #8C77B0; --c3: #A4BB9C; } [data-palette="stone"] > .theme-chip { --c1: #3A3734; --c2: #B8964F; --c3: #8C8579; } .theme-sheet button:focus-visible { outline: 2px solid var(--blush); outline-offset: 2px; } @keyframes theme-rise { from { transform: translateY(100%); } } @keyframes theme-fade { from { opacity: 0; } } /* Tablet and up: a small panel under the button instead of a sheet */ @media (min-width: 640px) { .theme-scrim { background: transparent; animation: none; } .theme-sheet { left: auto; right: 16px; bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 62px); width: 340px; padding: 12px 18px 18px; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow), 0 18px 40px -18px rgba(0, 0, 0, .35); animation: theme-fade .15s ease; } .theme-sheet::before { display: none; } }