/* SPDX-License-Identifier: LicenseRef-Proprietary */ /* Every value the stylesheets use. Nothing else sets a color, a size or a duration; Stylelint fails on a raw one. The layers come in this order, and a later layer wins over an earlier one: - primitive: the raw values. Colors are in OKLCH. - theme: the colors by role, once for the dark theme (the default) and once for the light one. head.js sets data-theme on . - look-fun and look-pro: what differs per look, set when has data-look="fun" or "pro". A new look is a new layer for its own data-look value. The pro look sets the same tokens as the fun look and nothing else: type and space in rem, calmer motion, a plain stage, a green and a red with a contrast of 7:1 on the page, a card and the stage. - layout: the layout classes of layout.css, which has no rules of its own in this file. The unlayered stylesheets after this one win over all of them. */ @layer primitive, theme, look-fun, look-pro, layout; @layer primitive { :root { /* The palette: a hue family and the lightness in permille. The dark theme, the light theme and the pages that weight them use the same families. */ --white: oklch(100% 0 0deg); --gray-178: oklch(17.763777% 0 0deg); --gray-957: oklch(95.731011% 0.00398197 106.474581deg); --ink-185: oklch(18.45899% 0.01479164 304.460589deg); --ink-237: oklch(23.671975% 0.0075921 285.805509deg); --ink-708: oklch(70.825399% 0.0115092 286.102183deg); --ink-778: oklch(77.839408% 0.0098275 286.169159deg); --ink-944: oklch(94.42288% 0.0053419 286.296885deg); --violet-206: oklch(20.5604% 0.04669673 289.283757deg); --violet-213: oklch(21.344608% 0.03887597 287.202379deg); --violet-252: oklch(25.208311% 0.06082314 289.667087deg); --violet-266: oklch(26.579461% 0.05142761 287.266004deg); --violet-279: oklch(27.932773% 0.08150723 291.217487deg); --violet-345: oklch(34.54614% 0.06707384 288.244925deg); --violet-505: oklch(50.529418% 0.03152791 289.805519deg); --violet-545: oklch(54.485144% 0.0355754 289.146383deg); --violet-596: oklch(59.628323% 0.05155569 291.494377deg); --violet-901: oklch(90.102964% 0.04851584 298.482684deg); --violet-904: oklch(90.374147% 0.04715199 298.891125deg); --violet-911: oklch(91.111905% 0.03014636 296.206805deg); --violet-916: oklch(91.641932% 0.02995818 294.144018deg); --violet-924: oklch(92.385383% 0.03592343 299.726083deg); --violet-944: oklch(94.43262% 0.01608111 289.924509deg); --purple-434: oklch(43.409845% 0.17876851 290.917339deg); --purple-476: oklch(47.611321% 0.19890955 290.642906deg); --purple-677: oklch(67.697864% 0.19008563 293.887844deg); --slate-209: oklch(20.91994% 0.01896462 266.07127deg); --slate-413: oklch(41.331903% 0.01908089 269.682804deg); --slate-414: oklch(41.411321% 0.02590882 270.721166deg); --slate-432: oklch(43.206878% 0.02759516 269.030295deg); --slate-454: oklch(45.35132% 0.0221476 268.808399deg); --green-221: oklch(22.077332% 0.0350552 172.478238deg); --green-283: oklch(28.314327% 0.03934656 179.144583deg); --green-407: oklch(40.663011% 0.08066281 166.893733deg); --green-441: oklch(44.14074% 0.08826909 166.539989deg); --green-813: oklch(81.3094% 0.14814045 168.289031deg); --red-236: oklch(23.577456% 0.07464392 15.67681deg); --red-276: oklch(27.634837% 0.09675689 18.85934deg); --red-434: oklch(43.417672% 0.15721109 19.580416deg); --red-472: oklch(47.214612% 0.17120241 19.682702deg); --red-684: oklch(68.444138% 0.20598119 17.867544deg); --blue-543: oklch(54.310036% 0.24743306 269.535006deg); /* A color with an alpha: its family, its lightness and its opacity in percent. A browser keeps the alpha of a legacy rgb() color in 8 bits, so the percent is that of the nearest of 255 steps. */ --black: oklch(0% 0 0deg); --black-a40: oklch(0% 0 0deg / 40%); --black-a50: oklch(0% 0 0deg / 50.196078%); --violet-135-a70: oklch(13.501754% 0.0315192 289.256179deg / 70.196078%); --slate-126-a97: oklch(12.595076% 0.00536841 226.046283deg / 96.862745%); --slate-209-a14: oklch(20.91994% 0.01896462 266.07127deg / 14.117647%); --slate-209-a45: oklch(20.91994% 0.01896462 266.07127deg / 45.098039%); /* Fonts: the pixel font only for short labels, and the sans font for every sentence. The system fonts are those of the plain screens of the demo. */ --pixel: "Press Start 2P", "Courier New", monospace; --sans: "IBM Plex Sans", arial, sans-serif; --system-mono: ui-monospace, monospace; --system-sans: system-ui, sans-serif; /* The sizes of text and the line heights, named by their value in px and in percent. */ --font-10: 10px; --font-12: 12px; --font-13: 13px; --font-14: 14px; --font-15: 15px; --font-16: 16px; --font-17: 17px; --font-18: 18px; --font-19: 19px; --font-20: 20px; --font-22: 22px; --font-24: 24px; --font-26: 26px; --font-28: 28px; --font-30: 30px; --font-32: 32px; --font-36: 36px; --font-40: 40px; --font-44: 44px; --leading-100: 1; --leading-115: 1.15; --leading-120: 1.2; --leading-130: 1.3; --leading-140: 1.4; --leading-145: 1.45; --leading-150: 1.5; --leading-160: 1.6; --leading-170: 1.7; --tracking-wide: 0.06em; /* The width of a line of text, in the em of its font. */ --measure-hint: 18em; --measure-bubble: 26em; --measure-intro: 32em; --measure-teaser: 36em; --measure-text: 40em; --measure-prose: none; /* Space between and inside parts, named by its value in px. */ --space-0: 0px; --space-1: 1px; --space-2: 2px; --space-3: 3px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-72: 72px; /* The width of a line and the corners of a part, named by their value in px. --radius and --dialog-radius are the ones that a look sets. */ --border-1: 1px; --border-2: 2px; --border-3: 3px; --border-4: 4px; --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; --radius-14: 14px; --radius-16: 16px; --radius-18: 18px; /* The width of the page and of the demo, and the space beside the header, the main part and the footer, so their content lines up at the width of the page or less. */ --page-width: 1120px; --page-gutter: max(var(--space-16), calc((100vw - var(--page-width)) / 2)); --width-demo: 880px; --width-demo-card: 420px; /* What is left of the window when a part keeps the space of 16px at each side. */ --screen-width-fit: calc(100vw - var(--space-32)); --screen-height-fit: calc(100dvh - var(--space-32)); /* The two widths at which the layout changes. A media query cannot read them, so it writes the value. The first is for the homepage, the legal pages and the traps, and the second for the demo. */ --breakpoint-page: 760px; --breakpoint-demo: 640px; --breakpoint-demo-narrow: 360px; /* The width of one frame of the tallest character in character-pictures.js at the base size of the characters, and how long a sprite strip shows each frame. A frame of Jack, 256 px, shows one pixel of the art on one pixel on screen. A test checks that the frames of the tallest character are this size. */ --sprite-size: 256px; --sprite-frame-time: calc(1s / 12); /* How long each frame of the sprite strips shows in the art as drawn. */ --art-frame-time: 200ms; /* The parts of the homepage. */ --height-dark-area: 340px; --height-dark-area-phone: 260px; --height-scene: 380px; --height-scene-phone: 320px; --height-scene-pinned-phone: 32svh; --length-scene: 220svh; --length-scene-phone: 180svh; --width-trust-fact: 240px; --width-level-card: 300px; --size-way-out: 64px; --size-dot: 8px; --dot-core: 1.5px; --dot-edge: 2px; --dot-spacing: 10px; --size-bubble-tail: 14px; --bubble-tail-offset: -9px; --footer-room: 120px; --size-icon-button: 40px; --blur-nav: 8px; /* The traps and the dialogs. The traps that open at the top start 12px below the header, whose height site-header.js measures. */ --trap-top: calc(var(--header-height) + var(--space-12)); --width-trap-cookies: 720px; --width-trap-promo: 560px; --width-trap-notice: 400px; --width-trap-form: 380px; --width-trap-qr: 280px; --width-trap-chat: 360px; --width-settings: 360px; --size-qr: 160px; --size-trap-avatar: 36px; --min-height-trap-messages: 64px; --switch-width: 44px; --switch-height: 24px; --switch-knob: 16px; --switch-travel: 20px; /* The parts of the demo. */ --height-progress: 16px; --height-timer-track: 8px; --size-fake-icon: 48px; --size-demo-avatar: 40px; --size-call-avatar: 72px; --min-height-demo-messages: 240px; --play-icon-half-height: 5px; --play-icon-width: 8px; --width-qr-sticker: 200px; --size-qr-picture: 126px; --width-pay-page: 360px; --height-pay-input: 34px; --min-height-choice: 64px; --min-height-duel: 200px; /* How long motion takes, named by its value in ms, and how it speeds up and slows down. */ --duration-0: 0s; --duration-80: 80ms; --duration-150: 150ms; --duration-200: 200ms; --duration-250: 250ms; --duration-300: 300ms; --duration-350: 350ms; --duration-400: 400ms; --duration-600: 600ms; --duration-900: 900ms; --duration-1000: 1000ms; --duration-1200: 1200ms; --duration-sweep: 4s; --ease-in: ease-in; --ease-out: ease-out; --ease-in-out: ease-in-out; --ease-linear: linear; --ease-spring: cubic-bezier(0.3, 1.6, 0.5, 1); --ease-pop: cubic-bezier(0.3, 1.4, 0.5, 1); /* The layers in front of the page, from back to front. Jack beside the dark area of the fun homepage scrolls with the page, so he passes behind the sticky header. */ --layer-behind: -1; --layer-raised: 1; --layer-jack-beside-area: var(--layer-raised); --layer-header: calc(var(--layer-jack-beside-area) + 1); --layer-trap: calc(var(--layer-header) + 1); } } @layer theme { /* The colors of the homepage, the legal pages and the demo. The demo does not set a theme and shows the dark one. Each pair of text and background color used by the stylesheets has a contrast of at least 4.5:1, and --line-strong has 3:1 against --bg and --surface, also where --page-glow is strongest; a unit test checks it. Green belongs to Shelly, red and purple to Jack. */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: var(--violet-213); /* The color of the whole screen, which the demo changes with its light, and which the browser takes for its bar. */ --screen: var(--bg); --surface: var(--violet-266); --line: var(--violet-345); --line-strong: var(--violet-596); --text: var(--gray-957); --text-2: var(--ink-778); --muted: var(--ink-708); --shelly: var(--shelly-bright); --jack: var(--red-684); --jack-purple: var(--jack-purple-bright); --on-shelly: var(--green-221); --on-jack: var(--ink-237); --shadow: var(--black-a50); --backdrop: var(--violet-135-a70); --purple-glow-strength: 12%; --green-glow-strength: 0%; --glow-band: transparent; /* The light of the demo, which shows only the dark theme: the attack, the red cut of the alarm, the win of Jack and the win of Shelly. Every text color above has a contrast of at least 4.5:1 on each of them. The fake windows, the chat and the call are plain light cards, with --on-fake-window as their text and --fake-message behind each message of the chat. */ --mood-attack: var(--ink-185); --mood-alarm: var(--red-276); --mood-jack: var(--red-236); --mood-shelly: var(--green-283); --fake-window: var(--ink-944); --fake-message: var(--white); --on-fake-window: var(--ink-237); } :root[data-theme="light"] { color-scheme: light; --bg: var(--violet-944); --surface: var(--white); --line: var(--violet-911); --line-strong: var(--violet-545); --text: var(--slate-209); --text-2: var(--slate-432); --muted: var(--slate-454); --shelly: var(--green-441); --jack: var(--red-472); --jack-purple: var(--purple-476); --on-shelly: var(--white); --on-jack: var(--white); --shadow: var(--slate-209-a14); --backdrop: var(--slate-209-a45); --purple-glow-strength: 25%; --green-glow-strength: 20%; --glow-band: var(--violet-916); } :root { /* The green of Shelly and the purple of Jack in the dark theme, which the glow uses in both themes. */ --shelly-bright: var(--green-813); --jack-purple-bright: var(--purple-677); --page-glow: radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--jack-purple-bright) var(--purple-glow-strength), transparent), transparent 55%), radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--shelly-bright) var(--green-glow-strength), transparent), transparent 50%), linear-gradient(180deg, var(--glow-band), transparent 60%); --accent: var(--shelly); --on-accent: var(--on-shelly); --focus: var(--shelly); --success: var(--shelly); --danger: var(--jack); /* The stage on which Shelly and Jack stand on the homepage. */ --stage: var(--surface); --stage-outline: var(--line); /* The dark that covers a stage outside the light of a flashlight, tinted by the stage. */ --darkness: color-mix(in oklab, var(--stage) 12%, var(--slate-126-a97)); /* The same in both themes: the avatar of the chat trap in the blue of a chat app, and the white paper behind the QR code of a trap and the QR code sticker of the demo, with its dark text. */ --chat-avatar: var(--blue-543); --on-chat-avatar: var(--white); --qr-paper: var(--white); --on-qr-paper: var(--gray-178); /* The shadows: of the header while the page is scrolled, of a trap, of the fake windows of the demo and of the sticker with the QR code, the hard one of the comic bubble, and the glow of Shelly. The outline gives a character a dark edge in the light theme. */ --shadow-nav: 0 4px 12px var(--shadow); --shadow-trap: 0 16px 48px var(--shadow); --shadow-window: 0 12px 32px var(--black-a50); --shadow-sticker: 0 6px 16px var(--black-a40); --shadow-comic: 4px 4px 0 var(--text); --filter-shelly-glow: drop-shadow(0 0 12px var(--shelly)); --character-outline: drop-shadow(var(--border-1) 0 0 var(--text)) drop-shadow(calc(-1 * var(--border-1)) 0 0 var(--text)) drop-shadow(0 var(--border-1) 0 var(--text)) drop-shadow(0 calc(-1 * var(--border-1)) 0 var(--text)); } } @layer look-fun { /* How the pages weight the colors of the theme layer: a deeper purple, a purple stage for Shelly and Jack, a stronger glow with a hint of Shelly's green in both themes, and in the light theme dark outlines around the stage. The light glow is strong, so the text colors and the colors of Shelly and Jack are darker here to keep their contrast where the glow is strongest. */ :root[data-look="fun"]:not([data-theme="light"]) { --bg: var(--violet-206); --surface: var(--violet-252); --stage: var(--violet-279); --stage-outline: var(--line-strong); --purple-glow-strength: 16%; --green-glow-strength: 12%; } :root[data-look="fun"][data-theme="light"] { --bg: var(--violet-924); --stage: var(--violet-904); --stage-outline: var(--text); --line-strong: var(--violet-505); --text-2: var(--slate-414); --muted: var(--slate-413); --shelly: var(--green-407); --jack: var(--red-434); --jack-purple: var(--purple-434); --purple-glow-strength: 40%; --green-glow-strength: 30%; --glow-band: var(--violet-901); } /* The playful look: round corners and the width of a dialog. */ :root[data-look="fun"] { --radius: 12px; --dialog-radius: 16px; --dialog-width: 440px; /* What a look may change, with the values of the playful look. A stylesheet reads these tokens and never the value behind them, so another look sets the same names and the stylesheets stay the same. A unit test checks that every look sets all of them. */ /* Type: the body, the lead and the small text, the headings, the buttons and the labels. A heading, a button and a label come with the case of their text. */ --font-body: 400 var(--font-16)/var(--leading-150) var(--sans); --font-lead: 400 var(--font-18)/var(--leading-150) var(--sans); --font-small: 400 var(--font-14)/var(--leading-150) var(--sans); --font-h1: 700 var(--font-44)/var(--leading-115) var(--sans); --font-h1-phone: 700 var(--font-30)/var(--leading-115) var(--sans); --font-h2: 700 var(--font-40)/var(--leading-115) var(--sans); --font-h2-phone: 700 var(--font-28)/var(--leading-115) var(--sans); --font-h3: 700 var(--font-30)/var(--leading-120) var(--sans); --font-timeline-title: 700 var(--font-30)/var(--leading-115) var(--sans); --font-demo-title: 700 var(--font-32)/var(--leading-120) var(--sans); --font-demo-title-phone: 700 var(--font-26)/var(--leading-120) var(--sans); --font-headline: 700 var(--font-24)/var(--leading-130) var(--sans); --font-slogan: 600 var(--font-13)/var(--leading-150) var(--sans); --case-slogan: uppercase; --font-button: var(--font-13)/var(--leading-140) var(--pixel); --font-button-small: var(--font-12)/var(--leading-140) var(--pixel); --case-button: uppercase; --font-label: var(--font-12)/var(--leading-160) var(--pixel); --case-label: uppercase; --font-tag: var(--font-12)/var(--leading-140) var(--pixel); --font-badge: 600 var(--font-13)/var(--leading-140) var(--sans); --font-side: 700 var(--font-13)/var(--leading-150) var(--sans); --font-card-title: var(--font-label); --font-dialog-title: var(--font-14)/var(--leading-160) var(--pixel); --case-title: uppercase; --font-segmented: var(--font-10)/var(--leading-160) var(--pixel); --font-nav: 400 var(--font-15)/var(--leading-140) var(--sans); --font-bubble: 700 var(--font-17)/var(--leading-145) var(--sans); --font-bubble-phone: 700 var(--font-15)/var(--leading-145) var(--sans); /* Space and size: how far apart the sections and the parts of a card stand, and how large a control is at least. */ --section-pad: var(--space-56); --section-pad-phone: var(--space-56); --hero-pad: var(--space-72) 0 var(--space-56); --card-pad: var(--space-20); --control-pad: var(--space-14) var(--space-20); --control-pad-small: var(--space-8) var(--space-12); --target-min: auto; --header-position: sticky; --header-pad: var(--space-12); --topbar-pad: var(--space-16); --footer-link-display: inline; --link-decoration: none; --focus-width: var(--border-3); --focus-offset: var(--space-3); /* Motion: how many rounds a sprite strip plays, how far a button lifts and presses, where a card pops from, how far the screen shakes and how long a light and the screen-off beat last. */ --btn-lift: calc(-1 * var(--space-3)); --btn-press-scale: 0.95; --pop-from: scale(0.85) rotate(-2deg); --autoplay-rounds: 2; --shake-distance: var(--space-6); --mood-fade: var(--duration-400); --screen-off: var(--duration-600); /* The lights and the stages: how strong the red and the green light of a scene are, the floor of the lit part of the dark area, and the comic panel with its border, dot raster and shadow. */ --light-strength: 32%; --stage-pattern: repeating-linear-gradient(45deg, var(--stage) 0 var(--space-12), color-mix(in oklab, var(--stage) 90%, var(--text)) var(--space-12) var(--space-24)); --comic-border: var(--border-4); --comic-raster: radial-gradient(color-mix(in oklab, var(--shelly) 35%, transparent) var(--dot-core), transparent var(--dot-edge)) 0 0 / var(--dot-spacing) var(--dot-spacing); --sticker-tilt: -3deg; /* The size of the characters: on a small, a medium and a large scene, in the comic panel, in the duel and on the result card. */ --cast-s: calc(var(--sprite-size) / 2); --cast-m: var(--sprite-size); --cast-l: calc(var(--sprite-size) * 2); --comic-cast: var(--sprite-size); --comic-cast-phone: calc(var(--sprite-size) / 2); --duel-cast: calc(var(--sprite-size) / 2); --result-cast: calc(var(--sprite-size) / 2); /* The timeline: a row that scrolls sideways under a title that sticks, or a grid that wraps. */ --rail-wrap: nowrap; --rail-basis: 85%; --rail-basis-wide: 31%; --rail-overflow: auto; --rail-dots: flex; --rail-title-position: sticky; /* The demo: the columns of the answers, the Stop control, the safety line and the color of the main button before the light turns. */ --choices-columns: repeat(2, 1fr); --stop-idle-opacity: 0.4; --stop-size: var(--space-24); --safety-bg: transparent; --safety-border: 0; --safety-pad: 0; --safety-font: var(--font-small); --safety-color: var(--muted); --demo-accent: var(--jack-purple); --on-demo-accent: var(--on-jack); } /* The demo shows the dark theme, and in the playful look with the plain colors of that theme, not weighted like the pages. */ :root[data-look="fun"][data-fixed-theme] { --bg: var(--violet-213); --surface: var(--violet-266); } } @layer look-pro { /* The business look: calm colors, larger text in rem, so a browser with a larger font size scales everything, sentences, buttons and titles not in capitals, the pixel font for names and tags only, and a stage without stripes and with weak lights. Motion is off by default, and what moves does it plainly: buttons do not lift, shake or overshoot. A control is at least 44 px. */ :root[data-look="pro"] { --radius: 8px; --dialog-radius: 12px; --dialog-width: 27.5rem; --font-body: 400 1.125rem/1.6 var(--sans); --font-lead: 400 1.25rem/1.55 var(--sans); --font-small: 400 1rem/1.5 var(--sans); --font-h1: 700 2.5rem/1.15 var(--sans); --font-h1-phone: 700 1.875rem/1.2 var(--sans); --font-h2: 700 2rem/1.2 var(--sans); --font-h2-phone: 700 1.625rem/1.25 var(--sans); --font-h3: 700 1.5rem/1.3 var(--sans); --font-timeline-title: 700 1.5rem/1.3 var(--sans); --font-demo-title: 700 2rem/1.2 var(--sans); --font-demo-title-phone: 700 1.625rem/1.25 var(--sans); --font-headline: 700 1.5rem/1.3 var(--sans); --font-slogan: 600 1rem/1.5 var(--sans); --case-slogan: none; --font-button: 600 1.125rem/1.3 var(--sans); --font-button-small: 600 1rem/1.3 var(--sans); --case-button: none; --font-label: 0.875rem/1.6 var(--pixel); --case-label: uppercase; --font-tag: 0.875rem/1.4 var(--pixel); --font-badge: 600 1rem/1.4 var(--sans); --font-side: 600 1rem/1.5 var(--sans); --font-card-title: 700 1.25rem/1.3 var(--sans); --font-dialog-title: 700 1.375rem/1.3 var(--sans); --case-title: none; --font-segmented: 600 1rem/1.4 var(--sans); --font-nav: 400 1.0625rem/1.4 var(--sans); --font-bubble: 600 1.125rem/1.5 var(--sans); --font-bubble-phone: 600 1.125rem/1.5 var(--sans); --measure-text: 65ch; --measure-prose: 65ch; --section-pad: 5rem; --section-pad-phone: 3.5rem; --hero-pad: 4rem 0 5rem; --card-pad: 1.5rem; --control-pad: 0.75rem 1.25rem; --control-pad-small: 0.5rem 1rem; --target-min: 44px; --header-position: sticky; --header-pad: var(--space-12); --topbar-pad: var(--space-16); --size-icon-button: 44px; --min-height-choice: 56px; --footer-link-display: inline-flex; --link-decoration: underline; --focus-width: var(--border-3); --focus-offset: var(--space-2); --autoplay-rounds: 1; --btn-lift: 0px; --btn-press-scale: 1; --pop-from: scale(0.98); --shake-distance: 0px; --mood-fade: var(--duration-200); --screen-off: var(--duration-300); --ease-spring: cubic-bezier(0.2, 0, 0, 1); --ease-pop: cubic-bezier(0.2, 0, 0, 1); --light-strength: 10%; --page-glow: none; --darkness: var(--stage); --stage-pattern: linear-gradient(var(--stage), var(--stage)); --comic-border: var(--border-2); --comic-raster: none; --shadow-comic: none; --sticker-tilt: 0deg; --height-dark-area: 280px; --height-dark-area-phone: 220px; --height-scene: 280px; --height-scene-phone: 220px; --cast-s: calc(var(--sprite-size) / 2); --cast-m: calc(var(--sprite-size) / 2); --cast-l: var(--sprite-size); --comic-cast: calc(var(--sprite-size) / 2); --comic-cast-phone: calc(var(--sprite-size) / 2); --duel-cast: calc(var(--sprite-size) / 2); --result-cast: calc(var(--sprite-size) / 4); --rail-wrap: wrap; --rail-basis: 100%; --rail-basis-wide: calc(50% - var(--space-8)); --rail-overflow: visible; --rail-dots: none; --rail-title-position: static; --choices-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); --stop-idle-opacity: 1; --stop-size: 44px; --safety-bg: var(--surface); --safety-border: var(--border-4) solid var(--shelly); --safety-pad: 0.75rem 1rem; --safety-font: var(--font-body); --safety-color: var(--text); --demo-accent: var(--shelly); --on-demo-accent: var(--on-shelly); } /* A window that is not tall, such as one at a zoom of 400%, would lose its height to a header that does not scroll, so there the header scrolls away and uses less space. */ @media (height <= 480px) { :root[data-look="pro"] { --header-position: static; --header-pad: var(--space-4); --topbar-pad: var(--space-4) var(--space-16); } } /* The colors have a contrast of 7:1 for text and 4.4:1 for lines and the focus ring on the page, on a card and on the stage. Jack's red is never text on the stage. A selector with two attributes beats the theme, and the dark colors also apply to the demo, which does not follow a theme. */ :root[data-look="pro"][data-theme="light"] { --bg: oklch(98.5% 0.004 250deg); --surface: oklch(100% 0 0deg); --stage: oklch(95.5% 0.014 165deg); --line: oklch(90% 0.008 250deg); --line-strong: oklch(56% 0.015 250deg); --text: oklch(24% 0.025 260deg); --text-2: oklch(36% 0.02 260deg); --muted: oklch(42% 0.02 260deg); --shelly: oklch(43% 0.085 170deg); --on-shelly: oklch(100% 0 0deg); --jack: oklch(46% 0.16 25deg); --on-jack: oklch(100% 0 0deg); --jack-purple: oklch(45% 0.14 295deg); --focus: oklch(42% 0.15 262deg); --shadow: oklch(24% 0.025 260deg / 10%); --backdrop: oklch(24% 0.025 260deg / 45%); } :root[data-look="pro"]:not([data-theme="light"]) { --bg: oklch(20% 0.015 260deg); --surface: oklch(24.5% 0.018 260deg); --stage: oklch(27% 0.02 200deg); --line: oklch(34% 0.02 260deg); --line-strong: oklch(64% 0.02 260deg); --text: oklch(96% 0.005 250deg); --text-2: oklch(87% 0.01 250deg); --muted: oklch(82% 0.012 250deg); --shelly: oklch(80% 0.11 170deg); --on-shelly: oklch(20% 0.03 170deg); --jack: oklch(76% 0.13 22deg); --on-jack: oklch(20% 0.03 22deg); --jack-purple: oklch(78% 0.11 295deg); --focus: oklch(82% 0.1 240deg); --mood-attack: oklch(17% 0.012 285deg); --mood-alarm: oklch(28% 0.08 22deg); --mood-jack: oklch(24% 0.065 22deg); --mood-shelly: oklch(27% 0.045 170deg); --fake-window: oklch(95% 0.003 260deg); --on-fake-window: oklch(22% 0.01 260deg); } } /* The properties of the layout classes of layout.css are not inherited, so a stack in a stack keeps its own gap. --split-first is the width of the first column of a split. */ @property --layout-gap { syntax: "*"; inherits: false; } @property --split-first { syntax: "*"; inherits: false; }