/* hikomi's look, shared by the website, the creator, the admin page and the * app. One idea runs through it: the character lives on your desktop, so the * pieces are the pieces of a desktop - light "windows" with a title strip, * a pastel wallpaper where a screen is shown, and the character's own speech * bubble (the logo's shape, in the logo's pink) wherever the character talks. * * Colours: ink on a cool pale ground. Pink is for the bubble and highlights, * never for small text - --pink-ink is the pink that reads on white. Teal * (the ribbons on the characters' cardigans) is the focus ring. * * Dark mode: the same desktop at night - the ground and windows go dark, * the ink goes light, the pink stays the pink. It follows the system setting * unless the visitor has flipped the switch (theme.js puts data-theme="light" * or "dark" on and remembers it). Because "ink" flips, anything that * is a solid dark block in light mode - buttons, the footer, a monitor bezel - * uses --solid / --band / --bezel, and text on pink uses --on-pink. * * Type: Bricolage Grotesque for headings, Onest for everything else. Both * are self-hosted (fonts/, SIL Open Font Licence) so no page asks a third * party for anything. */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/onest-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Onest"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/onest-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ground and surfaces */ --ground: #eceef6; /* the page */ --paper: #ffffff; /* a window */ --paper-2: #f4f5fa; /* a window's title strip, a quiet fill */ --line: #d9dbe8; /* hairlines and outlines */ --line-strong: #b9bccf; /* ink */ --ink: #1a1726; /* text, and the solid buttons */ --ink-2: #4a4560; /* secondary text */ --ink-3: #676280; /* hints and captions (4.5:1 on --ground) */ --ink-hover: #2e2942; /* solid blocks, which stay solid whichever way the ink goes */ --solid: #1a1726; /* a primary button */ --on-solid: #ffffff; --solid-hover: #2e2942; --on-pink: #1a1726; /* text on a pink fill, in both themes */ /* The character's speech bubble. Its colour is the visitor's to change (Settings > Speech bubble; theme.js sets --bubble and --on-bubble on ); the screentone dots and the shadow are worked out from it. */ --bubble: #ff96bc; /* the logo's pink, a touch lighter */ --on-bubble: #1a1726; /* It is a gradient made from that one colour: lighter and turned a little one way round the colour wheel at the top left, richer and turned the other way at the bottom right (for the pink: peach, pink, berry). With "Solid" chosen (theme.js puts data-bubble="solid" on ) both ends are the colour itself. Browsers without relative colours get solid. */ --bubble-a: var(--bubble); --bubble-b: var(--bubble); --bubble-fill: linear-gradient(135deg, var(--bubble-a), var(--bubble) 52%, var(--bubble-b)); --bubble-dot: color-mix(in oklab, var(--bubble-b) 80%, #5a0a2c); --bubble-shadow: color-mix(in srgb, color-mix(in oklab, var(--bubble) 45%, #000) 65%, transparent); --band: #1a1726; /* the footer */ --bezel: #1a1726; /* a monitor's frame */ --glass: rgba(236, 238, 246, .84); /* the header once the page scrolls */ /* the character's colours */ --pink: #ff7aa8; /* the bubble, highlights - a fill, not text */ --pink-soft: #ffe1ec; /* a pink wash behind something */ --pink-ink: #b8285f; /* pink that reads as text on white */ --teal: #1f6f8b; /* focus, links in running text */ --wall-a: #a8bff0; /* the wallpaper, wherever a screen is drawn */ --wall-b: #cdbdf2; --wall-pink-a: #f6b8cf; --wall-pink-b: #cdbdf2; --wall-sky-a: #a9d8e6; --wall-sky-b: #b8c6f2; --desk-wash: #fff4f8; /* the column a table is selling */ --code-k: #7b3fc4; /* keywords in drawn code */ /* states */ --ok: #1d7a4e; --warn: #9a5b00; --bad: #b3261e; /* shape */ --r-window: 14px; --r-control: 12px; --r-bubble: 22px; --shadow-window: 0 1px 0 rgba(26, 23, 38, .04), 0 24px 48px -26px rgba(26, 23, 38, .42); --shadow-lift: 0 2px 0 #000, 0 12px 26px -12px rgba(26, 23, 38, .55); --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --font-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif; --font-code: ui-monospace, "Cascadia Code", Consolas, monospace; /* the old names, still read by page-level styles */ --text: var(--ink); --muted: var(--ink-2); --accent: var(--pink-ink); --accent-soft: var(--pink-ink); --panel: var(--paper); --border: var(--line); color-scheme: light; } /* The same tokens at night. Written twice: once for a system set to dark (unless the visitor chose light), once for the switch set to dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #13111b; --paper: #1e1b2a; --paper-2: #272336; --line: #353047; --line-strong: #4f4968; --ink: #f1eefa; --ink-2: #c6bfda; --ink-3: #9d96b5; --ink-hover: #ffffff; --solid: #f1eefa; --on-solid: #1a1726; --solid-hover: #ffffff; --band: #0c0a12; --bezel: #08070d; --glass: rgba(19, 17, 27, .84); --pink-soft: #3d2334; --pink-ink: #ff9ec0; --teal: #72c7e2; --wall-a: #34406e; --wall-b: #4a3a74; --wall-pink-a: #5a2f4a; --wall-pink-b: #3f3470; --wall-sky-a: #24495a; --wall-sky-b: #2f3b6a; --desk-wash: #2a1f2e; --code-k: #c79bff; --ok: #5fd39a; --warn: #f0b35a; --bad: #ff7b72; --shadow-window: 0 0 0 1px #2c2840, 0 24px 48px -26px rgba(0, 0, 0, .85); --shadow-lift: 0 2px 0 #000, 0 12px 26px -12px rgba(0, 0, 0, .8); color-scheme: dark; } } :root[data-theme="dark"] { --ground: #13111b; --paper: #1e1b2a; --paper-2: #272336; --line: #353047; --line-strong: #4f4968; --ink: #f1eefa; --ink-2: #c6bfda; --ink-3: #9d96b5; --ink-hover: #ffffff; --solid: #f1eefa; --on-solid: #1a1726; --solid-hover: #ffffff; --band: #0c0a12; --bezel: #08070d; --glass: rgba(19, 17, 27, .84); --pink-soft: #3d2334; --pink-ink: #ff9ec0; --teal: #72c7e2; --wall-a: #34406e; --wall-b: #4a3a74; --wall-pink-a: #5a2f4a; --wall-pink-b: #3f3470; --wall-sky-a: #24495a; --wall-sky-b: #2f3b6a; --desk-wash: #2a1f2e; --code-k: #c79bff; --ok: #5fd39a; --warn: #f0b35a; --bad: #ff7b72; --shadow-window: 0 0 0 1px #2c2840, 0 24px 48px -26px rgba(0, 0, 0, .85); --shadow-lift: 0 2px 0 #000, 0 12px 26px -12px rgba(0, 0, 0, .8); color-scheme: dark; } body { background: var(--ground); color: var(--ink); } /* Things drawn twice, once per theme (the wordmark is dark ink on light and light on dark): mark each copy .only-light or .only-dark. */ .only-dark { display: none !important; } :root[data-theme="dark"] .only-dark { display: revert !important; } :root[data-theme="dark"] .only-light { display: none !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .only-dark { display: revert !important; } :root:not([data-theme="light"]) .only-light { display: none !important; } } /* The light/dark switch (theme.js wires any [data-theme-toggle] button). It shows the moon in light mode and the sun in dark mode: what you'd get. */ .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--paper); color: var(--ink); cursor: pointer; } .theme-toggle:hover { border-color: var(--ink-3); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .sun { display: none; } :root[data-theme="dark"] .theme-toggle .sun { display: block; } :root[data-theme="dark"] .theme-toggle .moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .moon { display: none; } } ::selection { background: var(--pink); color: var(--on-pink); } :focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; } /* The scrollbar, drawn in the page's own colours. */ html { scrollbar-color: var(--line-strong) var(--ground); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--ground); } ::-webkit-scrollbar-thumb { border: 3px solid var(--ground); border-radius: 999px; background: var(--line-strong); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } ::-webkit-scrollbar-corner { background: var(--ground); } /* The character talking: the logo's bubble. Add .tail-left / .tail-right for which way the tail points (it hangs under the bubble). */ @supports (color: oklch(from red l c h)) { :root:not([data-bubble="solid"]) { --bubble-a: oklch(from var(--bubble) calc(l + 0.08) calc(c * 0.8) calc(h + 24)); --bubble-b: oklch(from var(--bubble) calc(l - 0.07) calc(c * 1.25) calc(h - 28)); } } .bubble { position: relative; isolation: isolate; padding: 14px 18px; border-radius: var(--r-bubble); background: var(--bubble-fill); color: var(--on-bubble); font: 600 1rem/1.4 var(--font-body); box-shadow: 0 14px 26px -14px var(--bubble-shadow); } /* Screentone: manga halftone dots, a darker shade of the bubble's colour, big in the bottom corner and fading out across it - the way a comic shades a balloon. Every character bubble has them (the app's too). */ :is(.bubble, #bubble, html.overlay #pin-caption, .turn.assistant .msg)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(circle, var(--bubble-dot) 40%, transparent 43%) 0 0 / 7px 7px; -webkit-mask: radial-gradient(120% 140% at 100% 100%, #000, transparent 70%); mask: radial-gradient(120% 140% at 100% 100%, #000, transparent 70%); } .bubble::after { content: ""; position: absolute; bottom: -14px; width: 26px; height: 22px; background: inherit; clip-path: path("M0 0H26C22 10 14 18 2 22C6 14 6 8 0 0Z"); } /* A tail is one colour: the gradient's, where it leaves the bubble. */ .bubble::after { background: color-mix(in oklab, var(--bubble) 40%, var(--bubble-b)); } .bubble.tail-right::after { right: 28px; } .bubble.tail-left::after { left: 28px; transform: scaleX(-1); background: var(--bubble); } /* Out of the right side, pointing across at a character standing there. */ .bubble.tail-east::after { bottom: auto; left: calc(100% - 1px); top: calc(50% + 13px); transform-origin: 0 0; transform: rotate(-90deg); background: color-mix(in oklab, var(--bubble) 50%, var(--bubble-b)); } /* A window: white, with a title strip. */ .window { background: var(--paper); border-radius: var(--r-window); box-shadow: var(--shadow-window); overflow: hidden; } .window > .titlebar { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); font: 600 .82rem var(--font-body); color: var(--ink-2); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }