/* * geetkiseva — design tokens * * Every colour in theme.json points at one of these variables, so the whole * palette flips from a single attribute on . Three states have to work, * not two: the reader may have chosen light, chosen dark, or chosen nothing at * all — and "nothing" is the common case, where only the operating system * setting separates the two. * * :root → the full light palette (the default) * prefers-color-scheme: dark → dark, unless the reader chose light * [data-theme="dark"] → dark, whatever the system says * * Never declare a colour only inside a media query or a [data-theme] block. * A colour defined only there does not exist in the un-chosen state, and the * page ends up painting one theme's text on the other theme's background. */ :root { --gks-ground: #FAFAF8; --gks-surface: #F2F1EC; --gks-surface-2: #EFEDE6; --gks-rule: #D5D3CC; --gks-rule-soft: #E4E2DA; --gks-ink: #26251F; --gks-body: #3A3A36; --gks-muted: #6F6C64; --gks-faint: #8C897F; --gks-accent: #2F6F63; --gks-accent-soft: #DFEDE8; /* * The one colour on the site that is not teal. * * The player's rail marks every moment a block is sung, and a chorus has to * read differently from a stanza. Teal already means "a cue is set" and * cannot mean two things, so a stanza takes an amber warm enough to tell * apart at four pixels and quiet enough not to compete with the words above * it. Used nowhere else on the site. */ --gks-stanza: #9C6B3F; /* * The wash behind the block being sung. * * Light and dark need genuinely different values, not one colour at two * opacities: on paper the tint has to settle INTO the page, and on a dark * ground it has to lift OFF it. The same colour cannot do both. */ --gks-now: rgba(47, 111, 99, 0.07); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gks-ground: #141412; --gks-surface: #1C1B18; --gks-surface-2: #26251F; --gks-rule: #3D3B36; --gks-rule-soft: #2F2E29; --gks-ink: #F2F1EC; --gks-body: #D5D3CC; --gks-muted: #8C897F; --gks-faint: #7A776E; --gks-accent: #4FA894; --gks-accent-soft: #1E2E2A; --gks-stanza: #C9925C; --gks-now: rgba(79, 168, 148, 0.10); color-scheme: dark; } } :root[data-theme="dark"] { --gks-ground: #141412; --gks-surface: #1C1B18; --gks-surface-2: #26251F; --gks-rule: #3D3B36; --gks-rule-soft: #2F2E29; --gks-ink: #F2F1EC; --gks-body: #D5D3CC; --gks-muted: #8C897F; --gks-faint: #7A776E; --gks-accent: #4FA894; --gks-accent-soft: #1E2E2A; --gks-stanza: #C9925C; --gks-now: rgba(79, 168, 148, 0.10); color-scheme: dark; } /* * The interface, on a phone. * * Small text goes UP and headings come DOWN — the opposite of what a page * does when nobody has looked at it on a phone. A caption at 12px is a * squint held at arm's length while singing, and a 46px page title eats a * third of the screen before a single song is listed. * * Done by moving the SCALE rather than the components, so one block here * reaches every size on the site. This must sit after WordPress's own * global styles, which declare these on :root too — it does, because * tokens.css is enqueued and those are printed inline in the head. * * The lyrics are not in here. They have their own per-script metrics and a * reader control of their own, and neither wants a phone second-guessing it. */ @media (max-width: 34rem) { :root { --wp--preset--font-size--label: 0.8125rem; /* 12 -> 13 */ --wp--preset--font-size--small: 0.9375rem; /* 14 -> 15 */ --wp--preset--font-size--heading: 1.25rem; /* 27 -> 20 */ --wp--preset--font-size--title: 1.5rem; /* 34 -> 24 */ --wp--preset--font-size--display: 1.75rem; /* 46 -> 28 */ } } /* * The smallest a control may be under a thumb. * * Twenty of the site's thirty-six interface targets were under this, some as * small as 20px. Where a control is meant to look small, the TARGET grows and * the control does not — see .gks-b below, which stays a 36px circle inside a * 44px reach. */ :root { --gks-tap: 44px; } /* * Per-script typography. * * Devanagari, Tamil and Telugu carry marks above and below the line that clip * at Latin line heights. Each script therefore gets its own family, size and * line height, keyed off the lang attribute — which has to be correct on the * markup anyway, or browsers shape the text wrongly. * * Sizes come from the approved mockups: Devanagari 25px/2.1, Tamil 26px/1.7. * TELUGU IS A PLACEHOLDER — the mockups never set it. Check it against real * Telugu lyrics before launch; its stacked vowel signs may need more room. */ [lang|="hi"], [lang|="mr"] { font-family: var(--wp--preset--font-family--noto-serif-devanagari); line-height: var(--wp--custom--line-height--devanagari); } [lang|="ta"] { font-family: var(--wp--preset--font-family--noto-serif-tamil); line-height: var(--wp--custom--line-height--tamil); } [lang|="te"] { font-family: var(--wp--preset--font-family--noto-serif-telugu); line-height: var(--wp--custom--line-height--telugu); } /* Malayalam, like Telugu, is a placeholder until real lyrics are checked. */ [lang|="ml"] { font-family: var(--wp--preset--font-family--noto-serif-malayalam); line-height: var(--wp--custom--line-height--malayalam); } /* A line of lyrics in its own script, at reading size. */ .gks-lyric-line[lang|="hi"], .gks-lyric-line[lang|="mr"] { font-size: var(--wp--preset--font-size--lyric-native); } .gks-lyric-line[lang|="ta"], .gks-lyric-line[lang|="te"], .gks-lyric-line[lang|="ml"] { font-size: 1.625rem; /* 26px — Tamil in the mockups */ } /* Romanized and English lyrics are Latin, so they keep Literata. */ .gks-lyric-line[lang|="en"], .gks-lyric-line[lang$="-Latn"] { font-family: var(--wp--preset--font-family--literata); font-size: var(--wp--preset--font-size--lyric); line-height: var(--wp--custom--line-height--lyric); } /* * Small print, labels and anything that reads as interface rather than text. */ .gks-label { font-family: var(--wp--preset--font-family--ibm-plex-sans); font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--wp--preset--color--faint); } /* Lyrics get a narrower column than the page's content width. */ .gks-measure { max-width: var(--wp--custom--measure); } /* * The scrollbar, in the theme's own colours. * * The track is transparent rather than a colour of its own. A scrollbar is a * control, not a band down the side of the page, and whatever it happens to * sit over should carry on showing through. * * `thin` is narrower than the browser's default, which also shrinks the * sideways shift when a page long enough to scroll follows one that is not. * * No ::-webkit-scrollbar rules. Chrome, Edge and current Safari all honour * scrollbar-color and ignore the webkit ones once it is set, and they work out * the hover and pressed shades from the thumb colour themselves. */ /* The colour inherits, so saying it at the root reaches every scrolling box — * and re-reads the variables whenever the theme flips. */ :root { scrollbar-color: var(--gks-faint) transparent; } /* * The WIDTH does not inherit, though its neighbour does, so a value set at the * root never arrives anywhere. It has to be said on the scrolling box itself, * and the universal selector says it once for the page, the search panel, a * textarea, and anything added later. */ * { scrollbar-width: thin; } /* Keyboard users must be able to see where they are. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }