/* src/styles/case-figures.css */ /* Case-study gallery — the `/proekti/:slug` body outlet. * * Ships as a code asset, not editor CSS: body content is markdown-rendered * at publish time, so its elements are not page-tree nodes and editor class * rules for them would not survive the publish tree-shake. Interactive state * (video pointer-events, the compare handle and grip) is set inline from * motion.js — only static base styles live here. */ .case-figures p { margin: 0; } .case-figures img, .case-figures video { display: block; width: 100%; /* Gallery media is presentation, not content to drag or select. Videos * keep pointer events here — JS sets pointer-events: none inline only when * it strips the controls, so the no-JS / reduced-motion state stays usable. */ user-select: none; -webkit-user-drag: none; } .case-figures iframe { display: block; width: 100%; /* Vimeo/YouTube embeds arrive as raw width="640" height="360" attributes * from the source markdown — without this the iframe renders at that fixed * size instead of filling the column like every other gallery item, which * reads as a blank gap around it. aspect-ratio + height:auto lets a * replaced element scale responsively off its authored 16:9 dimensions. */ aspect-ratio: 16 / 9; height: auto; border: 0; } .img-compare:focus-visible { outline: 2px solid var(--color-brand); outline-offset: -2px; } /* src/styles/page-fade.css */ /* Embrand Studio — page fade overlay. * * One fixed white sheet, drawn as html::after so it exists at first paint, * before has even been parsed. src/scripts/page-fade.js drives it * through three states on : * * hold opaque, no animation — from head parse until there is something * to reveal. Without this the fade clock starts when the script * parses, so the sheet is gone before the page has painted and * content appears to land on top of it. * enter opaque -> transparent (arriving on a page) * exit transparent -> opaque (leaving through an internal link) * * --page-fade-enter is written inline by the script: 500ms on a cold load, * 125ms when the visitor arrived from an internal link. The value below is * the fallback if the script never gets to run. */ :root { --page-fade-enter: 500ms; --page-fade-exit: 125ms; } html::after { content: ''; position: fixed; inset: 0; z-index: 2147483647; background: #fff; opacity: 0; pointer-events: none; } /* Holding and closing both swallow pointer events, so nothing behind the * sheet can be clicked while it is covering the page. */ html[data-page-fade='hold']::after { opacity: 1; pointer-events: auto; } html[data-page-fade='enter']::after { animation: eb-page-fade-enter var(--page-fade-enter) ease forwards; } html[data-page-fade='exit']::after { animation: eb-page-fade-exit var(--page-fade-exit) ease forwards; pointer-events: auto; } @keyframes eb-page-fade-enter { from { opacity: 1; } to { opacity: 0; } } @keyframes eb-page-fade-exit { from { opacity: 0; } to { opacity: 1; } } /* The script bails out entirely under reduced motion; this is belt and * braces so a stale attribute can never leave a sheet on screen. */ @media (prefers-reduced-motion: reduce) { html::after { display: none; } } /* src/styles/rich-body.css */ /* Rich-text body content — the markdown-rendered `` regions. * * Ships as a code asset, not editor CSS, for the same reason `case-figures.css` * does: the elements inside a rendered outlet (`

`, ``, `