/* * Keralam Times: three Kerala looks, each by day and by night. Every page * loads this after its own styles; site.js sets data-look and data-mode on . * * kasavu Handloom cotton with a gold zari border, like a kasavu mundu; * by night, dark teak lit by a brass nilavilakku. * mural The five pigments of Kerala murals (red and yellow ochre, * verdigris green, lamp black, lime white) on warm plaster. * backwater Morning mist over the backwaters, palms along the bank and a * kettuvallam on the water; by night, the same under the moon. * * Each look sets the colours all the games share (--bg, --surface, --ink, * --ink-soft, --line, --line-strong, --key, --gold, --accent, --overlay), plus: * --page the page's texture and light, layered over --bg * --band the border along the top of the page * --motif the drawing in the page's corner (a mask, filled with --motif-ink) * A game's own colours for right and wrong, tiles and maps stay its own. */ /* ----- Kasavu & nilavilakku */ html[data-look="kasavu"][data-mode="light"] { --bg: #F7F0E0; --surface: #FFFCF3; --ink: #2A1C0E; --ink-soft: #6A5641; --line: #E5D5B3; --line-strong: #B39A6C; --key: #EFE2C4; --gold: #B8862B; --accent: #B0392B; --overlay: rgba(42, 28, 14, 0.45); --page: repeating-linear-gradient(0deg, rgba(120, 88, 34, 0.035) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(120, 88, 34, 0.03) 0 1px, transparent 1px 4px); --band: linear-gradient(to bottom, #C9962C 0 4px, #F7F0E0 4px 5px, #C9962C 5px 7px, transparent 7px); --band-h: 7px; --motif: url("looks/nilavilakku.svg"); --motif-ink: #B8862B; --motif-opacity: 0.13; color-scheme: light; } html[data-look="kasavu"][data-mode="dark"] { --bg: #1A110A; --surface: #26190F; --ink: #F5E7CD; --ink-soft: #C4A77F; --line: #45311E; --line-strong: #7B5C39; --key: #332318; --gold: #E4B24C; --accent: #F08040; --overlay: rgba(0, 0, 0, 0.62); --page: radial-gradient(ellipse 70% 42% at 50% -6%, rgba(255, 168, 56, 0.24), transparent 72%), radial-gradient(ellipse 45% 30% at 88% 100%, rgba(255, 168, 56, 0.1), transparent 70%), repeating-linear-gradient(96deg, rgba(255, 214, 160, 0.022) 0 2px, transparent 2px 11px); --band: linear-gradient(to bottom, #E4B24C 0 4px, #1A110A 4px 5px, #E4B24C 5px 7px, transparent 7px); --band-h: 7px; --motif: url("looks/nilavilakku.svg"); --motif-ink: #E4B24C; --motif-opacity: 0.2; color-scheme: dark; } /* ----- Kerala mural */ html[data-look="mural"][data-mode="light"] { --bg: #F2E0BA; --surface: #FBF1DA; --ink: #1F1812; --ink-soft: #694A2B; --line: #DFC28C; --line-strong: #AE874B; --key: #EDD5A3; --gold: #C98A16; --accent: #A8321D; --overlay: rgba(31, 24, 18, 0.5); --page: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(168, 50, 29, 0.07), transparent 70%), url("looks/plaster.svg"); --band: url("looks/mural-band.svg") repeat-x left top / auto 12px; --band-h: 12px; --motif: url("looks/lotus.svg"); --motif-ink: #A8321D; --motif-opacity: 0.1; color-scheme: light; } html[data-look="mural"][data-mode="dark"] { --bg: #19140F; --surface: #251E17; --ink: #F6E5C4; --ink-soft: #CFAB74; --line: #473826; --line-strong: #8A6A3E; --key: #322920; --gold: #E8A93A; --accent: #E0613F; --overlay: rgba(0, 0, 0, 0.62); --page: radial-gradient(ellipse 60% 40% at 0% 0%, rgba(214, 155, 36, 0.09), transparent 70%), radial-gradient(ellipse 50% 35% at 100% 100%, rgba(168, 50, 29, 0.12), transparent 70%), url("looks/plaster.svg"); --band: url("looks/mural-band.svg") repeat-x left top / auto 12px; --band-h: 12px; --motif: url("looks/lotus.svg"); --motif-ink: #D69B24; --motif-opacity: 0.12; color-scheme: dark; } /* A mural's names are written in red ochre */ html[data-look="mural"][data-mode="light"] .masthead .name, html[data-look="mural"][data-mode="light"] .wordmark { color: #A8321D; } html[data-look="mural"][data-mode="dark"] .masthead .name, html[data-look="mural"][data-mode="dark"] .wordmark { color: #E8A93A; } /* ----- Backwaters */ html[data-look="backwater"][data-mode="light"] { --bg: #EDF4EF; --surface: #FAFDFB; --ink: #0F2E2A; --ink-soft: #4A6A63; --line: #C6DBD3; --line-strong: #83A69B; --key: #DCEAE4; --gold: #BF973A; --accent: #C5602C; --overlay: rgba(15, 46, 42, 0.45); --page: radial-gradient(ellipse 50% 30% at 85% 0%, rgba(255, 236, 190, 0.55), transparent 70%), linear-gradient(to bottom, #F4F8F1 0%, #E4F0EB 55%, #D2E6E0 100%); --band: linear-gradient(#2F7C6D, #2F7C6D); --band-mask: url("looks/ripple.svg") repeat-x left top / auto 8px; --band-h: 8px; --motif: url("looks/palms.svg"); --motif-ink: #1F5A4F; --motif-opacity: 0.16; color-scheme: light; } html[data-look="backwater"][data-mode="dark"] { --bg: #0B1B20; --surface: #122930; --ink: #E0EEEA; --ink-soft: #8FB1A9; --line: #22434B; --line-strong: #4E7780; --key: #1A333A; --gold: #DDB65C; --accent: #F2934E; --overlay: rgba(0, 0, 0, 0.62); --page: linear-gradient(to bottom, #0A161B 0%, #0D2127 60%, #103038 100%); --band: linear-gradient(#5FA89A, #5FA89A); --band-mask: url("looks/ripple.svg") repeat-x left top / auto 8px; --band-h: 8px; --motif: url("looks/palms.svg"); --motif-ink: #02100E; --motif-opacity: 0.75; color-scheme: dark; } /* ----- Putting it on the page */ html[data-look] body { position: relative; background-color: var(--bg); background-image: var(--page); background-attachment: fixed; } /* The border along the top */ html[data-look] body::after { content: ""; position: absolute; z-index: 40; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: var(--band-h); background: var(--band); -webkit-mask: var(--band-mask, none); mask: var(--band-mask, none); pointer-events: none; } /* The drawing: a lamp or a lotus in the corner, palms along the bottom */ html[data-look] body::before { content: ""; position: fixed; z-index: -1; right: max(0px, calc(50vw - 520px)); bottom: 0; width: min(34vh, 42vw, 240px); height: min(70vh, 480px); background: var(--motif-ink); opacity: var(--motif-opacity); -webkit-mask: var(--motif) no-repeat right bottom / contain; mask: var(--motif) no-repeat right bottom / contain; pointer-events: none; } html[data-look="mural"] body::before { right: -8vmin; bottom: -8vmin; width: min(62vmin, 520px); height: min(62vmin, 520px); } html[data-look="backwater"] body::before { left: 0; right: 0; width: auto; height: min(30vh, 260px); -webkit-mask: var(--motif) no-repeat center bottom / auto 100%; mask: var(--motif) no-repeat center bottom / auto 100%; } /* ----- The front page: the look's drawing around the nameplate */ html[data-look] body.home::before { display: none; } html[data-look] .masthead[data-site="home"]::before, html[data-look] .masthead[data-site="home"]::after { content: ""; position: absolute; z-index: -1; bottom: 14px; width: clamp(54px, 14vw, 80px); height: clamp(118px, 30vw, 162px); background: var(--motif-ink); opacity: calc(var(--motif-opacity) * 2.2); -webkit-mask: var(--motif) no-repeat center bottom / contain; mask: var(--motif) no-repeat center bottom / contain; pointer-events: none; } html[data-look] .masthead[data-site="home"]::before { left: 0; } html[data-look] .masthead[data-site="home"]::after { right: 0; } /* Two lamps, lit */ html[data-look="kasavu"][data-mode="dark"] .masthead[data-site="home"]::before, html[data-look="kasavu"][data-mode="dark"] .masthead[data-site="home"]::after { opacity: 0.55; filter: drop-shadow(0 0 14px rgba(255, 176, 64, 0.55)); } /* Two lotuses, turned a little */ html[data-look="mural"] .masthead[data-site="home"]::before, html[data-look="mural"] .masthead[data-site="home"]::after { bottom: auto; top: 36%; width: clamp(90px, 22vw, 170px); height: clamp(90px, 22vw, 170px); -webkit-mask-position: center; mask-position: center; } html[data-look="mural"] .masthead[data-site="home"]::before { left: calc(clamp(90px, 22vw, 170px) * -0.42); transform: rotate(11deg); } html[data-look="mural"] .masthead[data-site="home"]::after { right: calc(clamp(90px, 22vw, 170px) * -0.42); transform: rotate(-11deg); } /* The bank of the backwater, across the whole nameplate */ html[data-look="backwater"] .masthead[data-site="home"]::before { left: 0; right: 0; bottom: 0; width: auto; height: clamp(110px, 32vw, 210px); opacity: calc(var(--motif-opacity) * 1.6); -webkit-mask: var(--motif) no-repeat center bottom / auto 100%; mask: var(--motif) no-repeat center bottom / auto 100%; } html[data-look="backwater"] .masthead[data-site="home"]::after { display: none; } html[data-look="backwater"][data-mode="dark"] .masthead[data-site="home"]::before { opacity: 0.95; background: #03110F; } /* Moonlight on the water behind the palms, and the moon itself where there's room */ html[data-look="backwater"][data-mode="dark"] .masthead[data-site="home"] { background: radial-gradient(ellipse 75% 55% at 50% 100%, rgba(140, 200, 188, 0.2), transparent 72%); } @media (min-width: 760px) { html[data-look="backwater"][data-mode="dark"] .masthead[data-site="home"] { background: radial-gradient(circle at 88% 58%, rgba(246, 236, 196, 0.9) 0 16px, rgba(246, 236, 196, 0.14) 17px, transparent 90px), radial-gradient(ellipse 75% 55% at 50% 100%, rgba(140, 200, 188, 0.2), transparent 72%); } } /* Games fill their own panels with --bg; let the page show through where it can */ html[data-look] .app { background: transparent; }