/*! * Hero Sequence 0.1.2 ยท Atelier (Process 51) * The stage of the start page after the approved hero "Richtung B, Raum und Licht": a pinned * stage with the process map, the title block of the drawing, the running case and the text * blocks that pass over the standing map. Three versions, chosen by a class on that * hero-sequence-mode.js sets before the first paint: * no class no script: the texts as plain sections, the end view as a still * .hero-sequence-moving the camera move, every picture a function of the scroll position * .hero-sequence-resting reduced motion: each station as a resting drawing below its text * Colours and type come from the website tokens (components/tokens/website.css) with a neutral * system fallback. The typography of the texts belongs to the page, not to this component. */ /* Defaults without specificity, so a page can override them without a fight. */ :where(.hero-sequence) { --hero-sequence-room: var(--website-color-room, Canvas); --hero-sequence-sheet: var(--website-color-sheet, Canvas); --hero-sequence-surface: var(--website-color-surface, Canvas); --hero-sequence-ink: var(--website-color-ink, CanvasText); --hero-sequence-ink-2: var(--website-color-ink-2, GrayText); --hero-sequence-line: var(--website-color-line, GrayText); --hero-sequence-light-line: var(--website-color-light-line, CanvasText); --hero-sequence-light-band: var(--website-color-light-band, transparent); --hero-sequence-light-dot: var(--website-color-light-dot, CanvasText); --hero-sequence-shadow: var(--website-shadow-color, rgba(0, 0, 0, 0.1)); --hero-sequence-font: var(--website-font-family, system-ui, sans-serif); --hero-sequence-font-map: var(--website-font-family-map, var(--hero-sequence-font)); /* The frame of the page around the stage (design language 2.1, rule 6). */ --hero-sequence-header-height: 64px; --hero-sequence-margin: 56px; --hero-sequence-text-width: clamp(300px, 29vw, 430px); --hero-sequence-content-width: 1180px; /* Written by the script once per resize: the window height in pixels. */ --hero-sequence-viewport-height: 100vh; /* The map: sizes of the words, the band under a carrying path, the running case. */ --hero-sequence-band-width: 10px; --hero-sequence-halo: 4px; --hero-sequence-case-dot: 4.5px; --hero-sequence-case-ring: 10px; --hero-sequence-arrow-size: 6.1px; --hero-sequence-arrow-size-per-weight: 1.5px; } @media (max-width: 759px) { :where(.hero-sequence) { --hero-sequence-header-height: 56px; --hero-sequence-margin: 18px; --hero-sequence-text-width: calc(100vw - 36px); --hero-sequence-band-width: 7px; --hero-sequence-halo: 3px; --hero-sequence-case-dot: 3.5px; --hero-sequence-case-ring: 7px; --hero-sequence-arrow-size: 4.2px; --hero-sequence-arrow-size-per-weight: 1.05px; } } /* ------------------------------------------------------------------ * * Without script: the texts as sections, one below the other * ------------------------------------------------------------------ */ .hero-sequence__pin { display: none; } .hero-sequence__texts { max-width: var(--hero-sequence-content-width); margin: 0 auto; padding: calc(var(--hero-sequence-header-height) + 56px) var(--hero-sequence-margin) 40px; } .hero-sequence__text { padding: 72px 0; border-top: 1px solid var(--hero-sequence-line); } .hero-sequence__text[data-hero-sequence-text="opening"] { padding-top: 24px; border-top: 0; } .hero-sequence__stills { display: none; } /* The end view as a still, drawn from the same data with the same custom properties. It follows both modes and is replaced by the live map as soon as the script runs. */ .hero-sequence__static { margin-top: 32px; } .hero-sequence__static-view { position: relative; width: 100%; aspect-ratio: 2 / 1; } .hero-sequence__static-view--mobile { display: none; } @media (max-width: 759px) { .hero-sequence__static-view--desktop { display: none; } .hero-sequence__static-view--mobile { display: block; aspect-ratio: 2 / 3; } } .hero-sequence-moving .hero-sequence__static, .hero-sequence-resting .hero-sequence__static { display: none; } /* ------------------------------------------------------------------ * * The camera move: the stage stands, the texts pass over it * ------------------------------------------------------------------ */ .hero-sequence-moving .hero-sequence { position: relative; } .hero-sequence-moving .hero-sequence__track { position: relative; } .hero-sequence-moving .hero-sequence__pin { display: block; position: sticky; top: 0; height: var(--hero-sequence-viewport-height); overflow: hidden; } .hero-sequence-moving .hero-sequence__texts { position: absolute; inset: 0; max-width: none; margin: 0; padding: 0; pointer-events: none; } .hero-sequence-moving .hero-sequence__text { position: absolute; left: var(--hero-sequence-margin); width: var(--hero-sequence-text-width); padding: 0; border: 0; transform: translateY(-50%); pointer-events: auto; /* Hidden until the first picture: before hero-sequence.js has written the place of each text, all of them would stand on top of each other at the top of the stage (seen for up to half a second on a slow connection). Every picture writes the visibility inline, so the first one shows the text that belongs to the scroll position. */ visibility: hidden; } .hero-sequence-moving .hero-sequence__text[data-hero-sequence-text="closing"] { width: min(var(--hero-sequence-text-width), 520px); } @media (max-width: 759px) { .hero-sequence-moving .hero-sequence__text[data-hero-sequence-text="opening"], .hero-sequence-moving .hero-sequence__text[data-hero-sequence-text="closing"] { transform: none; } } /* The map area: beside the text column on the desktop, room for the title block below; on the phone between the margins, from below the title block to 64 % of the window. */ .hero-sequence__map, .hero-sequence__case { position: absolute; top: calc(var(--hero-sequence-header-height) + 16px); right: 28px; bottom: 112px; left: calc(var(--hero-sequence-margin) + var(--hero-sequence-text-width) + 48px); } @media (max-width: 759px) { .hero-sequence__map, .hero-sequence__case { top: calc(var(--hero-sequence-header-height) + 50px); right: var(--hero-sequence-margin); bottom: auto; left: var(--hero-sequence-margin); height: calc(var(--hero-sequence-viewport-height) * 0.64 - var(--hero-sequence-header-height) - 50px); } } .hero-sequence__case { overflow: visible; pointer-events: none; } /* The running case: a dot in light on its path, in a ring of the band colour. */ .hero-sequence__case-ring { r: var(--hero-sequence-case-ring); fill: var(--hero-sequence-light-band); fill-opacity: 0.9; stroke: var(--hero-sequence-light-dot); stroke-opacity: 0.5; stroke-width: 1px; } .hero-sequence__case-dot { r: var(--hero-sequence-case-dot); fill: var(--hero-sequence-light-dot); } /* ------------------------------------------------------------------ * * Title block of the drawing * ------------------------------------------------------------------ */ .hero-sequence__title-block { position: absolute; right: var(--hero-sequence-margin); bottom: 32px; display: grid; grid-template-columns: 1fr auto; width: 360px; border: 1px solid var(--hero-sequence-ink-2); background: var(--hero-sequence-room); color: var(--hero-sequence-ink); font-family: var(--hero-sequence-font); } .hero-sequence__title-cell { min-width: 0; padding: 7px 10px 8px; } .hero-sequence__title-cell + .hero-sequence__title-cell { border-left: 1px solid var(--hero-sequence-line); } .hero-sequence__title-cell:nth-child(3) { border-left: 0; } .hero-sequence__title-cell:nth-child(n + 3) { border-top: 1px solid var(--hero-sequence-line); } .hero-sequence__title-field { display: block; margin-bottom: 4px; font-size: var(--website-font-size-title-block-field, 9.5px); font-weight: 700; line-height: 1; letter-spacing: var(--website-letter-spacing-label, 0.14em); text-transform: uppercase; color: var(--hero-sequence-ink-2); } .hero-sequence__title-values { display: grid; font-size: var(--website-font-size-title-block-value, 14px); font-weight: 400; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; } .hero-sequence__title-values > span { grid-area: 1 / 1; } .hero-sequence__title-values > span + span { opacity: 0; } @media (max-width: 759px) { .hero-sequence__title-block { top: calc(var(--hero-sequence-header-height) + 4px); right: var(--hero-sequence-margin); bottom: auto; left: var(--hero-sequence-margin); width: auto; grid-template-columns: auto auto 1fr; border-width: 1px 0; } .hero-sequence__title-cell { padding: 5px 8px 6px 0; } .hero-sequence__title-cell + .hero-sequence__title-cell { padding-left: 8px; } .hero-sequence__title-cell:nth-child(3) { border-left: 1px solid var(--hero-sequence-line); } .hero-sequence__title-cell:nth-child(n + 3) { border-top: 0; } .hero-sequence__title-cell:nth-child(4) { display: none; } .hero-sequence__title-field { margin-bottom: 3px; } } /* ------------------------------------------------------------------ * * Reduced motion: each station as a resting drawing below its text * ------------------------------------------------------------------ */ .hero-sequence-resting .hero-sequence__text:not([data-hero-sequence-text="opening"]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } .hero-sequence-resting .hero-sequence__stills { display: grid; gap: 24px; } .hero-sequence__still { position: relative; width: 100%; aspect-ratio: 2 / 1; } /* The drawing keeps a little room inside its frame, as in the mockup. */ .hero-sequence__still-map { position: absolute; inset: 5% 3%; } @media (max-width: 759px) { .hero-sequence-resting .hero-sequence__text:not([data-hero-sequence-text="opening"]) { gap: 24px; } .hero-sequence__still { aspect-ratio: 2 / 3; } } /* ------------------------------------------------------------------ * * The map in the website's look, drawn by components/process-graph * * Light is contrast, not glow (design language 2.1, rule 2). The script writes one number per * picture, --hero-sequence-light, and everything that does not carry sinks toward the sheet: * the sheets toward the room, side paths with light, tools and steps with a little more, * the roles with more still. Carrying paths, notes and the running case never dim. Words take * --hero-sequence-word-light, which never falls below 0.5, so they stay at 3:1. * ------------------------------------------------------------------ */ :where(.hero-sequence__map, .hero-sequence__still-map, .hero-sequence__static-view) { --hero-sequence-light: 1; --hero-sequence-word-light: 1; --hero-sequence-tools: 1; --hero-sequence-scale: 1; } .hero-sequence__map, .hero-sequence__still-map, .hero-sequence__static-view { /* shares of full strength per kind of element, from the light of the picture */ --hero-sequence-path-share: calc(var(--hero-sequence-light) * 100%); --hero-sequence-node-share: calc((0.35 + 0.65 * var(--hero-sequence-light)) * 100%); --hero-sequence-word-share: calc(var(--hero-sequence-word-light) * 100%); --hero-sequence-tool-word-share: calc((0.35 + 0.65 * var(--hero-sequence-word-light)) * 100%); --hero-sequence-role-share: calc((0.5 + 0.5 * var(--hero-sequence-word-light)) * 100%); --process-graph-sheet: color-mix( in srgb, var(--hero-sequence-room), var(--hero-sequence-sheet) calc((0.45 + 0.55 * var(--hero-sequence-light)) * 100%) ); --process-graph-surface: var(--process-graph-sheet); --process-graph-sheet-line: var(--hero-sequence-line); --process-graph-frame: var(--hero-sequence-surface); --process-graph-shadow: var(--hero-sequence-shadow); --process-graph-ink: var(--hero-sequence-ink); --process-graph-ink-2: var(--hero-sequence-ink-2); --process-graph-accent: var(--hero-sequence-light-line); --process-graph-accent-band: var(--hero-sequence-light-band); --process-graph-accent-band-width: calc(var(--hero-sequence-band-width) * max(0.7, var(--hero-sequence-scale))); --process-graph-red: var(--hero-sequence-ink); --process-graph-label-color: var(--hero-sequence-ink-2); --process-graph-external-dash: 7 4; /* Lines of the drawing as in Richtung B: 0.35 px plus 0.8 px per weight, arrowheads and the bar of a dead end with an outline of 1.1 px in their colour, arrowheads as long as Richtung B draws them at the camera scale of the explosion (8.5 and 6.5 px times 0.8 + 0.2 per weight, times about 0.9 and 0.8). */ --process-graph-edge-width: 0.35px; --process-graph-edge-width-per-weight: 0.8px; --process-graph-arrow-size: var(--hero-sequence-arrow-size); --process-graph-arrow-size-per-weight: var(--hero-sequence-arrow-size-per-weight); --process-graph-arrow-outline: 1.1px; --process-graph-label-font: var(--hero-sequence-font-map); --process-graph-label-weight: 400; --process-graph-label-size: var(--website-font-size-map-tool, 16px); --process-graph-label-halo: var(--hero-sequence-halo); --process-graph-step-font: var(--hero-sequence-font); --process-graph-step-weight: 700; --process-graph-plane-label-font: var(--hero-sequence-font); --process-graph-plane-label-size: var(--website-font-size-map-role, 12.5px); --process-graph-plane-label-weight: 700; --process-graph-plane-label-spacing: var(--website-letter-spacing-map-caps, 0.12em); --process-graph-plane-label-transform: uppercase; } /* process-graph sets its own size from the data; here the page decides the size. */ .hero-sequence__map, .hero-sequence__still-map { width: auto; aspect-ratio: auto; } /* Paths that do not carry sink toward the sheet with the light; the accent never does. */ .hero-sequence__map :is(.process-graph__map-edges, .process-graph__map-heads), .hero-sequence__still-map :is(.process-graph__map-edges, .process-graph__map-heads) { --process-graph-ink: color-mix(in srgb, var(--hero-sequence-sheet), var(--hero-sequence-ink) var(--hero-sequence-path-share)); --process-graph-ink-2: color-mix(in srgb, var(--hero-sequence-sheet), var(--hero-sequence-ink-2) var(--hero-sequence-path-share)); } .hero-sequence__map .process-graph__map-nodes, .hero-sequence__still-map .process-graph__map-nodes { --process-graph-ink: color-mix(in srgb, var(--hero-sequence-sheet), var(--hero-sequence-ink) var(--hero-sequence-node-share)); --process-graph-ink-2: color-mix(in srgb, var(--hero-sequence-sheet), var(--hero-sequence-ink-2) var(--hero-sequence-node-share)); } .hero-sequence__map .process-graph__map-shape, .hero-sequence__still-map .process-graph__map-shape, .hero-sequence__static-view .process-graph__map-shape { stroke-width: 1.3px; } .hero-sequence__map .process-graph__map-symbol, .hero-sequence__still-map .process-graph__map-symbol, .hero-sequence__static-view .process-graph__map-symbol { stroke-width: 1.3px; } .hero-sequence__map .process-graph__map-node--platform .process-graph__map-shape, .hero-sequence__still-map .process-graph__map-node--platform .process-graph__map-shape, .hero-sequence__static-view .process-graph__map-node--platform .process-graph__map-shape { rx: 8px; stroke-width: 1.1px; } /* Words. The tools, their frame and the edge words in the second ink; the steps in ink. How present the words are (the camera's `words`) process-graph draws itself, so the step boxes keep their size while the words are hidden. */ .hero-sequence__map .process-graph__map-node-label, .hero-sequence__still-map .process-graph__map-node-label, .hero-sequence__static-view .process-graph__map-node-label { fill: color-mix(in srgb, var(--hero-sequence-sheet), var(--hero-sequence-ink-2) var(--hero-sequence-tool-word-share)); } /* In the far oblique view only the steps carry their names (Richtung B, first impression). */ .hero-sequence__map .process-graph__map-node-label:not(.process-graph__map-step-label) { fill-opacity: var(--hero-sequence-tools); stroke-opacity: var(--hero-sequence-tools); } .hero-sequence__map .process-graph__map-step-label, .hero-sequence__still-map .process-graph__map-step-label, .hero-sequence__static-view .process-graph__map-step-label { fill: color-mix(in srgb, var(--hero-sequence-sheet), var(--hero-sequence-ink) var(--hero-sequence-tool-word-share)); } .hero-sequence__map .process-graph__map-edge-label, .hero-sequence__still-map .process-graph__map-edge-label, .hero-sequence__static-view .process-graph__map-edge-label { fill: color-mix(in srgb, var(--hero-sequence-sheet), var(--hero-sequence-ink-2) var(--hero-sequence-word-share)); } /* Notes ("Umweg", "Sackgasse") are ink in capitals and never dim. */ .hero-sequence__map .process-graph__map-note, .hero-sequence__still-map .process-graph__map-note, .hero-sequence__static-view .process-graph__map-note { fill: var(--hero-sequence-ink); font-family: var(--hero-sequence-font); font-size: calc(var(--website-font-size-map-note, 11.5px) * var(--process-graph-note-label-scale, 1)); font-weight: 700; letter-spacing: var(--website-letter-spacing-map-caps, 0.12em); text-transform: uppercase; } /* The role of a sheet: the person and the name in ink, dimmed half as much as a tool. */ .hero-sequence__map .process-graph__map-plane-name, .hero-sequence__still-map .process-graph__map-plane-name, .hero-sequence__static-view .process-graph__map-plane-name { fill: color-mix(in srgb, var(--hero-sequence-sheet), var(--hero-sequence-ink) var(--hero-sequence-role-share)); } .hero-sequence__map .process-graph__map-plane-icon, .hero-sequence__still-map .process-graph__map-plane-icon, .hero-sequence__static-view .process-graph__map-plane-icon { color: color-mix(in srgb, var(--hero-sequence-sheet), var(--hero-sequence-ink) var(--hero-sequence-role-share)); stroke-width: 1.2px; }