/* 3d-work-splunkyard.css: the Splunkyard dossier (works/splunkyard.html). Loads after 3d.css. Wide screens: the story is one left column, the 3D model lives in the free column on the right (a fixed "dock"). Narrow screens: the model sits above the title and shrinks to a small badge while reading. Everything here is DOM + CSS; the scene is in work-splunkyard.js. */ :root { --yard-col: 100%; --yard-ml: 0px; --yard-gap: 22px; --yard-slot: 290px; /* narrow screens: the model sits in a slot above each stage and below the status text */ } @media (min-width: 1180px) { :root { --yard-col: clamp(680px, 56vw, 880px); --yard-ml: clamp(24px, 6.2vw, 120px); } } /* ------------------------------------------------------------------ column + scrim */ @media (min-width: 1180px) { main > .case.wrap { width: var(--yard-col); margin-left: var(--yard-ml); margin-right: 0; --scrim: 0.3; --scrim-x0: 0.62; --scrim-x1: 1.08; --scrim-feather: 200; } } main > .case { padding-top: 24px; counter-reset: fig; } /* ------------------------------------------------------------------ hero */ .case-hero { position: relative; min-height: calc(100vh - var(--header) - 24px - 48px); min-height: calc(100svh - var(--header) - 24px - 48px); display: flex; flex-direction: column; justify-content: center; padding: 24px 0 8vh; } .case-hero .back { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 24px; } .case-hero .kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .case-hero .kicker::before { content: ""; width: 34px; height: 1px; background: var(--accent); flex: none; } .case-hero h1 { max-width: none; margin: 0 0 30px; font-size: clamp(60px, 10.6vw, 156px); line-height: 0.84; letter-spacing: -0.046em; } .case-hero .lede { max-width: 31em; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; color: #b3ae9e; } .case-hero::after { /* a quiet scroll cue, no words */ content: ""; position: absolute; left: 0; bottom: 3vh; width: 1px; height: 56px; background: linear-gradient(var(--accent), rgba(var(--accent-rgb), 0)); transform-origin: top; animation: yard-cue 3.2s var(--ease-io) infinite; transition: filter 0.4s var(--ease); } html.yard-scrolled .case-hero::after { filter: opacity(0); } @keyframes yard-cue { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } @media (max-width: 1179px) { .case-hero { min-height: 0; justify-content: flex-start; padding: min(44svh, 360px) 0 28px; /* the model sits in this space (work-splunkyard.js reads it) */ } .case-hero .back { margin-bottom: 22px; } .case-hero h1 { font-size: clamp(56px, 21vw, 132px); margin-bottom: 22px; } .case-hero::after { display: none; } } /* ------------------------------------------------------------------ the reading block: stage ladder + intro text */ .case-read { margin-top: 72px; } @media (min-width: 801px) { .case-read { grid-template-columns: 216px minmax(0, 1fr); gap: 44px; } } .chain { gap: 0; } .chain li { position: relative; padding: 0 0 28px 30px; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink-faint); } .chain li.is-on { background: none; box-shadow: none; border: 0; color: var(--ink); } .chain li:last-child { padding-bottom: 0; } .chain li::before { /* the node */ content: ""; position: absolute; left: 0; top: 3px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ink-faint); background: var(--bg); transition: background 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.6s var(--ease), scale 0.6s var(--ease); } .chain li::after { /* the wire to the next node */ content: ""; position: absolute; left: 4px; top: 17px; bottom: 5px; width: 1px; background: var(--line-strong); transition: background 0.8s var(--ease); } .chain li:last-child::after { display: none; } .chain li.is-on::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.65); scale: 1.2; } .chain li.is-on::after { background: linear-gradient(var(--accent), rgba(var(--accent-rgb), 0.18)); } .chain li i { margin-bottom: 4px; } .chain li b { font-family: var(--font-serif); font-weight: 400; font-size: 25px; line-height: 1.05; letter-spacing: -0.02em; } .chain li span { margin-top: 5px; font-size: 13px; line-height: 1.42; color: var(--ink-faint); } .chain li.is-on span { color: var(--ink-dim); } .read-line { max-width: 56ch; margin-bottom: 24px; } .case-read .read-line { color: #cfcabb; } @media (max-width: 800px) { .case-read { margin-top: 44px; } .chain li { padding-bottom: 22px; } .chain li span { display: block; } } /* ------------------------------------------------------------------ stages: a rule, a mark, a serif lead line */ .stage { position: relative; margin-top: 88px; } .stage::before { content: ""; display: block; height: 1px; margin-bottom: 26px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.6), rgba(var(--accent-rgb), 0) 82%); } .read-line[data-mark] { max-width: 21em; margin-bottom: 36px; font-family: var(--font-serif); font-size: clamp(27px, 2.5vw, 35px); line-height: 1.15; letter-spacing: -0.024em; color: var(--paper); } .read-line[data-mark]::before { content: attr(data-mark); display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; color: var(--accent); } .stage .read-line:not([data-mark]) { margin-bottom: 20px; } /* figures: a dossier plate number above each one */ .case-shot { counter-increment: fig; margin: 4px 0 68px; } .case-shot::before { content: "Fig. " counter(fig, decimal-leading-zero); display: block; padding: 12px 18px 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; color: var(--ink-faint); } .case-shot .shot-frame { margin-top: 12px; } .case-shot.is-plane::before { padding: 0; } .case-shot.is-plane .shot-frame { margin-top: 12px; } .stage > .case-shot:last-child, .stage > .case-aside { margin-bottom: 0; } /* status: the closing page of the dossier */ .case-aside { margin-top: 40px; padding-top: 60px; padding-bottom: 40px; } .case-aside .kicker { display: flex; align-items: center; gap: 14px; } .case-aside .kicker::before { content: ""; width: 34px; height: 1px; background: var(--accent); flex: none; } .case-aside h2 { font-size: clamp(46px, 6.6vw, 96px); line-height: 0.9; letter-spacing: -0.042em; margin-bottom: 30px; } .case-aside .read-line { font-size: 18px; color: #cfcabb; max-width: 46ch; margin-bottom: 16px; } @media (max-width: 1179px) { /* narrow: leave room for the model above each stage and below the status text */ .stage { margin-top: calc(var(--yard-slot) + 36px); } .case-aside { padding-bottom: calc(var(--yard-slot) + 40px); } } /* ------------------------------------------------------------------ dock + rail (created by work-splunkyard.js) */ .yard-dock { /* an invisible box: the scene reads its rectangle */ position: fixed; z-index: 0; pointer-events: none; visibility: hidden; top: calc(var(--header) + 8px); right: 8px; width: min(124px, 30vw); height: min(124px, 30vw); } .yard-rail { position: fixed; z-index: 45; pointer-events: none; left: 50%; bottom: calc(14px + var(--lift, 0px)); translate: -50% 10px; display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(var(--bg-rgb), 0.92); font-family: var(--font-mono); color: var(--ink-dim); opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), translate 0.8s var(--ease), visibility 0s 0.6s; } .yard-rail.is-on { opacity: 1; translate: -50% 0; visibility: visible; transition-delay: 0s; } .yard-rail .yr-head { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .yard-rail .yr-n { font-family: var(--font-serif); font-size: 24px; line-height: 0.9; letter-spacing: -0.03em; color: var(--accent); min-width: 1.15em; } .yard-rail .yr-of { font-size: 10px; letter-spacing: 0.18em; color: var(--ink-faint); } .yard-rail .yr-n, .yard-rail .yr-name, .yard-rail .yr-of { text-shadow: 0 0 14px var(--bg), 0 0 4px var(--bg); } .yard-rail .yr-name { font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); min-width: 4.6em; } .yard-rail .yr-bar { display: grid; grid-template-columns: repeat(5, 18px); gap: 4px; } .yard-rail .yr-bar i { position: relative; display: block; height: 2px; background: rgba(var(--ink-rgb), 0.16); overflow: hidden; } .yard-rail .yr-bar i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left center; transform: scaleX(var(--f, 0)); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6); } @media (min-width: 1180px) { .yard-dock { left: calc(var(--yard-ml) + var(--yard-col) + var(--yard-gap)); right: 20px; width: auto; top: calc(var(--header) + 18px); bottom: 124px; height: auto; } .yard-rail { left: calc(var(--yard-ml) + var(--yard-col) + var(--yard-gap) + 6px); right: 28px; bottom: calc(36px + var(--lift, 0px)); translate: 0 10px; display: block; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .yard-rail.is-on { translate: 0 0; } .yard-rail .yr-head { gap: 14px; margin-bottom: 16px; } .yard-rail .yr-n { font-size: 54px; } .yard-rail .yr-of { font-size: 11px; } .yard-rail .yr-name { font-size: 17px; margin-left: auto; text-align: right; } .yard-rail .yr-bar { grid-template-columns: repeat(5, 1fr); gap: 6px; } .yard-rail .yr-bar i { height: 2px; } } /* ------------------------------------------------------------------ calm / reduced motion */ html[data-calm] .case-hero::after { animation: none; opacity: 0.6; transform: none; } @media (prefers-reduced-motion: reduce) { .case-hero::after { animation: none; opacity: 0.6; transform: none; } } /* ------------------------------------------------------------------ no WebGL, or no JavaScript: a finished page with a flat drawing in place of the model */ :root { --yard-flat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 440' fill='none' stroke-linejoin='round'%3E%3Cg stroke='%237ee0c6' stroke-opacity='.5'%3E%3Cpath d='M18 18h384v118H18zM18 170h384v118H18zM18 322h384v100H18z' stroke-dasharray='3 5' stroke-opacity='.25'/%3E%3C/g%3E%3Cg stroke='%23ece7d8' stroke-opacity='.62'%3E%3Cpath d='M36 52h74v26H36zM36 52l10-10h74l-10 10M110 52l10-10v26l-10 10M130 52h74v26h-74zM130 52l10-10h74l-10 10M204 52l10-10v26l-10 10M224 52h74v26h-74zM224 52l10-10h74l-10 10M298 52l10-10v26l-10 10M318 52h74v26h-74zM318 52l10-10h74l-10 10M392 52l10-10v26l-10 10' transform='translate(0 18) scale(.92 1)'/%3E%3C/g%3E%3Cg stroke='%237ee0c6' stroke-opacity='.7'%3E%3Cpath d='M70 206h74v26H70zM70 206l10-10h74l-10 10M144 206l10-10v26l-10 10M236 206h74v26h-74zM236 206l10-10h74l-10 10M310 206l10-10v26l-10 10'/%3E%3C/g%3E%3Cg stroke='%239ba39c' stroke-opacity='.7'%3E%3Cpath d='M36 350h74v26H36zM36 350l10-10h74l-10 10M110 350l10-10v26l-10 10M168 350h74v26h-74zM168 350l10-10h74l-10 10M242 350l10-10v26l-10 10M300 350h74v26h-74zM300 350l10-10h74l-10 10M374 350l10-10v26l-10 10'/%3E%3C/g%3E%3Cg stroke='%23d6ff3c' stroke-opacity='.55' stroke-dasharray='2 4'%3E%3Cpath d='M107 232v100M273 232v100M210 100v80'/%3E%3C/g%3E%3Ccircle cx='210' cy='100' r='3' fill='%23d6ff3c' stroke='none'/%3E%3C/svg%3E"); } :is(html.no-webgl, html:not(.js-3d)) .stage { margin-top: 72px; } :is(html.no-webgl, html:not(.js-3d)) .case-aside { padding-bottom: 40px; } :is(html.no-webgl, html:not(.js-3d)) .case-hero::before { content: ""; position: absolute; pointer-events: none; background: var(--yard-flat) center / contain no-repeat; opacity: 0.9; } html.no-webgl .yard-dock { display: none; } @media (min-width: 1180px) { :is(html.no-webgl, html:not(.js-3d)) .case-hero::before { left: calc(100% + var(--yard-gap)); width: min(440px, calc(100vw - var(--yard-ml) - var(--yard-col) - 64px)); top: 4%; bottom: 8%; } /* the wide page keeps its drawing in the free column for the whole read (the rail sits under it) */ html.no-webgl .case-hero::before { display: none; } html.no-webgl .yard-dock { display: block; visibility: visible; background: var(--yard-flat) center / contain no-repeat; opacity: 0.55; } } @media (max-width: 1179px) { :is(html.no-webgl, html:not(.js-3d)) .case-hero::before { left: 0; right: 0; top: 0; height: min(40svh, 320px); } :is(html.no-webgl, html:not(.js-3d)) .case-hero { padding-top: min(44svh, 360px); } } /* no JavaScript: the header and footer come from