/*
* Cinewide's tokens (docs/UI-AUDIT.md, 2.1): the one file the site, the extension and the
* dashboard each take into their own build. Dark only; there is no light theme.
*
* A test reads this file and checks every pair of text and ground the components use
* against WCAG AA (brand/brand.test.mjs). A colour is changed here and nowhere else.
*/
:root {
color-scheme: dark;
/* Colour */
--cw-bg: #08090b;
--cw-raised: #121418;
/* Lines that only divide: never the only edge of a control. */
--cw-line: #23262d;
--cw-text: #f3efe6;
/* Quieter text, and the edge of a field. */
--cw-text-2: #9a9da6;
/* The one accent, with black text on it. */
--cw-accent: #ffb547;
--cw-on-accent: #000000;
/* Destructive actions only. */
--cw-danger: #ff5f57;
--cw-on-danger: #000000;
/* The screen of a frame: the black of a picture's bars. */
--cw-screen: #000000;
/* Type */
--cw-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--cw-display-width: 125;
--cw-display-weight: 800;
--cw-display-tracking: -0.02em;
--cw-body-width: 100;
--cw-body-weight: 400;
--cw-strong-weight: 600;
/* The scale, from small print to the first screen's line. */
--cw-size-xs: 0.75rem;
--cw-size-s: 0.875rem;
--cw-size-m: 1rem;
--cw-size-l: 1.25rem;
--cw-size-xl: 1.75rem;
--cw-size-2xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
--cw-size-3xl: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
--cw-leading: 1.5;
--cw-leading-tight: 1.05;
/* Space and shape */
--cw-space-1: 0.25rem;
--cw-space-2: 0.5rem;
--cw-space-3: 0.75rem;
--cw-space-4: 1rem;
--cw-space-5: 1.5rem;
--cw-space-6: 2rem;
--cw-space-7: 3rem;
--cw-space-8: 4.5rem;
--cw-radius: 6px;
--cw-radius-l: 10px;
/* The corner marks: their arm and their stroke. */
--cw-mark: 14px;
--cw-mark-stroke: 2px;
--cw-focus: 2px;
/* Motion: exactly one, the bars sliding out. */
--cw-motion: 600ms;
--cw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/*
* The font and the type (docs/UI-AUDIT.md, 2.2). A build puts this after tokens.css, and
* the font at fonts/archivo.woff2 beside the stylesheet it makes.
*/
@font-face {
font-family: 'Archivo';
src: url('fonts/archivo.woff2') format('woff2');
font-weight: 400 800;
font-stretch: 100% 125%;
font-style: normal;
font-display: swap;
}
html {
background: var(--cw-bg);
color: var(--cw-text);
font-family: var(--cw-font);
font-size: 100%;
font-weight: var(--cw-body-weight);
font-stretch: 100%;
line-height: var(--cw-leading);
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--cw-bg);
/* Chrome gives a page of an extension its own font and size on the body: the brand's
are set here, where they are not inherited past it. */
font-family: var(--cw-font);
font-size: 1rem;
}
/* Display: wide, heavy and tight. */
.cw-display {
font-stretch: 125%;
font-weight: var(--cw-display-weight);
letter-spacing: var(--cw-display-tracking);
line-height: var(--cw-leading-tight);
text-wrap: balance;
}
strong,
b {
font-weight: var(--cw-strong-weight);
}
/* Figures that line up: ratios, prices, dates. */
.cw-tabular {
font-variant-numeric: tabular-nums;
}
a {
color: var(--cw-accent);
text-underline-offset: 0.18em;
}
/* Focus always shows: the accent, apart from what it rings. */
:focus-visible {
outline: var(--cw-focus) solid var(--cw-accent);
outline-offset: 2px;
}
::selection {
background: var(--cw-accent);
color: var(--cw-on-accent);
}
/* Read by a screen reader, and not drawn. */
.cw-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/*
* Cinewide's components (docs/UI-AUDIT.md, 2.3 to 2.4): classes, so that the site's HTML,
* the extension's DOM and the dashboard's React draw the same markup. A build puts this
* after tokens.css and base.css. The markup each expects is written above it.
*/
/* ---- The gate ---------------------------------------------------------------------------
*
* A 21:9 screen, a picture on it, and the bars around the picture, which slide away.
*
*
*
*
* (and --bottom, --left, --right)
*
*
* 16 : 92.39 : 1
*
*
*
* Drawn after: the picture as the screen shows it once Smart has run, and the bars gone.
* Before: `data-state="before"` on the gate, or a `.cw-gate-switch` checkbox before it that
* is not checked. `cw-gate--opens` plays the one motion as the page loads.
*
* The numbers are of the page's own example, worked out from the engine's (`fit.ts`): a
* 2.39 : 1 film inside a 16:9 video, on a 21:9 screen. After, the picture is as wide as the
* screen, 21 / 2.39 / 9 = 97.6 % of its height. Before, it is as wide as the 16:9 video,
* 16 / 21 = 76.2 % of the screen; the side bars are the rest of the width, and the bars
* above and below the rest of the height, (100 - 97.6 × 0.762) / 2 = 12.8 %.
*/
.cw-gate {
--cw-picture-w: 100%;
--cw-picture-h: 97.63%;
--cw-from: 0.7619;
--cw-bar-x: 11.905%;
--cw-bar-y: 12.81%;
--cw-gate-delay: 500ms;
position: relative;
margin: 0;
}
.cw-gate__screen {
position: relative;
aspect-ratio: 21 / 9;
overflow: hidden;
background: var(--cw-screen);
border-radius: 2px;
}
.cw-gate__picture {
position: absolute;
left: 50%;
top: 50%;
width: var(--cw-picture-w);
height: var(--cw-picture-h);
object-fit: cover;
display: block;
transform: translate(-50%, -50%);
transition: transform var(--cw-motion) var(--cw-ease-out);
}
/* A bar: black, with one edge of light on the side of the picture. */
.cw-gate__bar {
position: absolute;
background: var(--cw-screen);
transition: transform var(--cw-motion) var(--cw-ease-out);
}
.cw-gate__bar--top,
.cw-gate__bar--bottom {
left: 0;
right: 0;
height: var(--cw-bar-y);
}
.cw-gate__bar--left,
.cw-gate__bar--right {
top: 0;
bottom: 0;
width: var(--cw-bar-x);
}
.cw-gate__bar--top {
top: 0;
box-shadow: inset 0 -1px 0 var(--cw-line);
transform: translateY(-100%);
}
.cw-gate__bar--bottom {
bottom: 0;
box-shadow: inset 0 1px 0 var(--cw-line);
transform: translateY(100%);
}
.cw-gate__bar--left {
left: 0;
box-shadow: inset -1px 0 0 var(--cw-line);
transform: translateX(-100%);
}
.cw-gate__bar--right {
right: 0;
box-shadow: inset 1px 0 0 var(--cw-line);
transform: translateX(100%);
}
.cw-gate__label {
position: absolute;
top: var(--cw-space-3);
right: var(--cw-space-3);
}
/* Before: the picture as small as it was, and the bars in place. */
.cw-gate[data-state='before'] .cw-gate__picture,
.cw-gate-switch:not(:checked) ~ .cw-gate .cw-gate__picture {
transform: translate(-50%, -50%) scale(var(--cw-from));
}
.cw-gate[data-state='before'] .cw-gate__bar,
.cw-gate-switch:not(:checked) ~ .cw-gate .cw-gate__bar {
transform: none;
}
.cw-gate[data-state='before'] .cw-ratio__from,
.cw-gate-switch:not(:checked) ~ .cw-gate .cw-ratio__from {
opacity: 1;
}
.cw-gate[data-state='before'] .cw-ratio__to,
.cw-gate-switch:not(:checked) ~ .cw-gate .cw-ratio__to {
opacity: 0;
}
/* The one motion, as the page loads: from before to after. */
@keyframes cw-gate-picture {
from {
transform: translate(-50%, -50%) scale(var(--cw-from));
}
}
@keyframes cw-gate-bar {
from {
transform: none;
}
}
/* The label holds its first words until the bars are gone, then changes: no motion. */
@keyframes cw-gate-hold-shown {
from,
to {
opacity: 1;
}
}
@keyframes cw-gate-hold-hidden {
from,
to {
opacity: 0;
}
}
.cw-gate--opens .cw-gate__picture {
animation: cw-gate-picture var(--cw-motion) var(--cw-ease-out) var(--cw-gate-delay) backwards;
}
.cw-gate--opens .cw-gate__bar {
animation: cw-gate-bar var(--cw-motion) var(--cw-ease-out) var(--cw-gate-delay) backwards;
}
.cw-gate--opens .cw-ratio__from {
animation: cw-gate-hold-shown calc(var(--cw-gate-delay) + var(--cw-motion)) step-end backwards;
}
.cw-gate--opens .cw-ratio__to {
animation: cw-gate-hold-hidden calc(var(--cw-gate-delay) + var(--cw-motion)) step-end backwards;
}
/* ---- The ratio label ------------------------------------------------------------------
*
* 2.39 : 1
* 16 : 92.39 : 1
*/
.cw-ratio {
display: inline-grid;
align-items: center;
padding: 0.2em 0.6em;
border-radius: 4px;
background: var(--cw-bg);
color: var(--cw-text);
font-size: var(--cw-size-s);
font-stretch: 125%;
font-weight: var(--cw-strong-weight);
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
line-height: 1.3;
white-space: nowrap;
}
.cw-ratio__from,
.cw-ratio__to {
grid-area: 1 / 1;
transition: opacity 0s linear var(--cw-motion);
}
.cw-ratio__from {
opacity: 0;
}
/* ---- Corner marks ---------------------------------------------------------------------
*
* The two corners of the icon, in the accent: on a gate, or on any box with `cw-corners`.
*/
.cw-corners,
.cw-gate {
position: relative;
}
.cw-corners::before,
.cw-corners::after,
.cw-gate::before,
.cw-gate::after {
content: '';
position: absolute;
z-index: 1;
width: var(--cw-mark);
height: var(--cw-mark);
border: 0 solid var(--cw-accent);
pointer-events: none;
}
.cw-corners::before,
.cw-gate::before {
top: calc(-1 * var(--cw-mark-stroke) - 4px);
left: calc(-1 * var(--cw-mark-stroke) - 4px);
border-top-width: var(--cw-mark-stroke);
border-left-width: var(--cw-mark-stroke);
}
.cw-corners::after,
.cw-gate::after {
right: calc(-1 * var(--cw-mark-stroke) - 4px);
bottom: calc(-1 * var(--cw-mark-stroke) - 4px);
border-right-width: var(--cw-mark-stroke);
border-bottom-width: var(--cw-mark-stroke);
}
/* ---- Keycaps --------------------------------------------------------------------------
*
* AltShiftS
*/
.cw-keys {
display: inline-flex;
flex-wrap: wrap;
gap: 0.25em;
vertical-align: middle;
}
.cw-key {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.9em;
padding: 0.15em 0.5em 0.2em;
border: 1px solid var(--cw-line);
border-bottom-width: 3px;
border-radius: 5px;
background: var(--cw-raised);
color: var(--cw-text);
font-family: var(--cw-font);
font-size: 0.8em;
font-weight: var(--cw-strong-weight);
font-variant-numeric: tabular-nums;
line-height: 1.2;
white-space: nowrap;
}
/* On an amber button the keycaps are drawn in black. */
.cw-button--primary .cw-key {
border-color: rgb(0 0 0 / 0.55);
background: transparent;
color: var(--cw-on-accent);
}
/* ---- Buttons ----------------------------------------------------------------------------
*
* the one thing to press
*
* … beside a primary action
* destructive actions only
*
*
* (and --bottom, --left, --right)
*