/* ========================================================================================== site.css — statischer Nachbau von irenemjyu.cargo.site (Cargo 3) Reihenfolge (wie in Cargo): Schriften → Cargo static-css (Rahmen) → Irenes Cargo-Stylesheet (nur Schriftnamen ersetzt) → was Cargo zur Laufzeit daraus erzeugt → Bausteine (column-set, media-item, Galerien, Diashow, Zoom, Scroll-Animation, Flugobjekte). Quellen: specs/01…04. Das page-lokale CSS (local_css) steht danach in /css/local.css. ========================================================================================== */ /* ---- Schriften: Geist / Geist Mono (SIL OFL) als freier Ersatz für ABC Diatype (nur für Cargo lizenziert). Abstimmung auf das Original (gemessen an den Textboxen der Referenz, tools/check.sh): - size-adjust: Geist läuft bei Fließtext ~3,5–4,5 % breiter als Diatype (fett ~7,5 %); ohne Ausgleich brechen Absätze früher um (je-taime mobil, palms-in-memories). 95.5 % bzw. 92.8 % (Gewicht 550–900). 95.5 % liegt mitten im Bereich 95.3–95.7 %, in dem auf allen 28 Seiten × 2 Ansichten jeder Zeilenumbruch wie mit Diatype fällt – bis auf eine Zeile (summer mobil: Geist ist dort schmaler, keine globale Lösung). Geprüft mit einem Umbruch-Vergleich Wort für Wort gegen denselben Nachbau mit Diatype (nur lokal). 96.4 % brach jacquemus mobil (2 Zeilen) und manifesto mobil (4 Zeilen) anders um, ≤ 95.0 % jacquemus desktop. - ascent/descent-override: vertikale Maße von Diatype (hhea 0.968 / 0.358 em), geteilt durch size-adjust, weil Chromium die Overrides mit size-adjust skaliert → Zeilenboxen sind so hoch wie im Original. */ @font-face{font-family:"Site Sans";src:url(/fonts/Geist-Variable.woff2) format("woff2");font-weight:100 549;font-style:normal;font-display:block;size-adjust:95.5%;ascent-override:101.361%;descent-override:37.487%;line-gap-override:0%} @font-face{font-family:"Site Sans";src:url(/fonts/Geist-Variable.woff2) format("woff2");font-weight:550 900;font-style:normal;font-display:block;size-adjust:92.8%;ascent-override:104.310%;descent-override:38.578%;line-gap-override:0%} @font-face{font-family:"Site Mono";src:url(/fonts/GeistMono-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:block;ascent-override:96.800%;descent-override:35.800%;line-gap-override:0%} /* ================= base-shell.css — 01-base-layout (subset of Cargo static-css + fe.css body) ================= */ *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} :focus{outline:0} html,body{min-height:var(--viewport-height,100vh);margin:0;padding:0} html{--mobile-scale:1;font-size:var(--base-size);touch-action:manipulation;position:relative} html.mobile{font-size:calc(var(--base-size)*var(--mobile-scale))} /* no-JS fallback for --base-size (the head bootstrap overwrites it inline on ) */ html{--base-size:calc(min(100vw,100vh)*0.0144)} @media (max-aspect-ratio:9/16){html{--base-size:calc(100vw*0.0224)}} body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;display:flex;flex-direction:column;width:100%;min-height:var(--viewport-height,100vh);justify-content:flex-start;margin:0;padding:0;background-color:#fff;position:relative} html,body{overflow-anchor:none} /* fe.css "body,.light-mode{…}": only text outside bodycopy uses it, text-rendering inherits everywhere */ body{font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;font-size:14.5px;line-height:1.65;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;text-align:left} body.mobile{font-size:16px;line-height:1.5} .page a.active,bodycopy * a{text-decoration-color:unset;-webkit-text-decoration-color:unset} .content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:100%;position:relative;flex-grow:1;border-color:transparent;border-width:0} .pages{width:100%;flex:1 0 auto} @supports (height:100svh){.page.stacked-page:not(.fixed){--viewport-height:100svh}} .page{position:relative;isolation:isolate;display:flex;justify-content:center;flex-wrap:nowrap;flex-direction:row;max-width:100%;width:100%;flex:0} .mobile .page{flex-wrap:wrap} .page.overlay{position:absolute} .page.pinned-top,.page.pinned-bottom{flex:0;z-index:2;left:0;right:0} .page.pinned-top{top:0} .page.pinned-bottom{bottom:0} .page.overlay,.page.overlay .page-layout{pointer-events:none} .page.overlay .page-content bodycopy a,.page.overlay .page-content bodycopy img,.page.overlay .page-content bodycopy video,.page.overlay .page-content bodycopy .linked,.page.overlay .page-content bodycopy .zoomable,.page.overlay .page-content bodycopy gallery-slideshow{pointer-events:auto} .page-layout{flex-grow:1;position:relative;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;width:0%} .page-content{display:flex;flex-direction:row;height:100%;align-items:flex-start;border-color:transparent;border-width:0;width:100%;position:relative;isolation:isolate} h1,h2,h3,h4,h5,h6{contain:layout} bodycopy{display:block;contain:layout;word-wrap:break-word;position:relative;max-width:100%;width:100%;-webkit-nbsp-mode:normal;--font-scale:1} bodycopy *{border-width:0} a{color:inherit} s *{text-transform:inherit} small{max-width:100%;text-decoration:inherit} b,strong{font-weight:bolder} .small-caps{font-variant:small-caps;text-transform:lowercase} .no-wrap{white-space:nowrap} media-item .caption.empty{display:none} column-set+*,gallery-grid+*,gallery-columnized+*,gallery-justify+*,gallery-slideshow+*,gallery-freeform+*,media-item+*{--gutter-expand:1} column-unit>*:first-child{--gutter-expand:0} /* ======= Irenes Cargo-Stylesheet (unverändert, nur Schriftnamen ersetzt: "Diatype Variable" → "Site Sans", "Diatype Mono Variable" → "Site Mono"; die ungenutzten shop-product-Regeln sind entfernt – sie verwiesen auf ein Bild bei static.cargo.site) ======= */ html { --mobile-scale: 1.39; --mobile-padding-offset: 0.31; } body { --swatch-1: rgba(255, 255, 255, 0.85); --swatch-2: rgba(255, 255, 255, 0.75); --swatch-3: rgba(255, 255, 255, 0.6); --swatch-4: rgba(255, 255, 255, 0.4); --swatch-5: rgba(255, 255, 255, 0.25); background-color: #000000; } body.mobile { } a:active, .linked:active, .zoomable::part(media):active { opacity: 0.7; } .page a.active { color: rgba(255, 255, 255, 0.4); } sub { position: relative; vertical-align: baseline; top: 0.3em; } sup { position: relative; vertical-align: baseline; top: -0.4em; } .small-caps { font-variant: small-caps; text-transform: lowercase; } ol { margin: 0; padding: 0 0 0 2.5em; } ul { margin: 0; padding: 0 0 0 2.0em; } ul.lineated { margin: 0; padding: 0; list-style-type: none; margin: 0 0 0 3em; text-indent: -3em; } blockquote { margin: 0; padding: 0 0 0 2em; } hr { background: rgba(255, 255, 255, 0.75); border: 0; height: 1px; display: block; } .content { border-color: rgba(0,0,0,.85); } bodycopy { font-size: 1.7rem; font-weight: 400; color: rgba(255, 255, 255, 0.85); font-family: "Site Sans"; font-style: normal; line-height: 1.2; letter-spacing: 0em; display: block; font-variation-settings: 'slnt' 0, 'MONO' 0; } bodycopy a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } bodycopy a:hover { } h1 { font-family: "Site Sans"; font-style: normal; font-weight: 443; margin: 0; font-size: 3.8rem; line-height: 1; color: rgba(255, 255, 255, 0.85); letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; } .mobile h1 { font-size: 3.4rem; } h1 a { color: rgba(255, 255, 255, 0.85); text-decoration: none; } h1 a:hover { } h2 { font-family: "Site Sans"; font-style: normal; font-weight: 400; margin: 0; color: rgba(255, 255, 255, 0.75); font-size: 2rem; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; } h2 a { color: rgba(255, 255, 255, 0.75); text-decoration: none; } h2 a:hover { } .caption { font-size: 1.2rem; font-weight: 400; color: rgba(255, 255, 255, 0.4); font-family: "Site Mono"; font-style: normal; line-height: 1.3; letter-spacing: 0em; display: block; font-variation-settings: 'slnt' 0, 'MONO' 1; } .caption a { color: rgba(255, 255, 255, 0.4); text-decoration: underline; } .caption a:hover { } media-item .caption { margin-top: .5em; } gallery-grid .caption, gallery-columnized .caption, gallery-justify .caption { margin-bottom: 2em; } [thumbnail-index] .caption { text-align: center; } [thumbnail-index] .caption .tags { margin-top: 0.25em; } .page { justify-content: flex-start; } .page-content { padding: 3rem; text-align: left; } .mobile [id] .page-layout { max-width: 100%; } .page-layout { align-items: flex-start; max-width: 100%; } media-item::part(media) { border-radius: 1.5rem; border: 0; padding: 0; } .quick-view { height: 100%; width: 100%; padding: 3rem; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; } .quick-view-background { background-color: #000000; } .quick-view .caption { color: #000000; padding: 20px 0; text-align: center; transition: 100ms opacity ease-in-out; position: absolute; bottom: 0; left: 0; right: 0; } .quick-view .caption-background { padding: 0.5rem 1rem; display: inline-block; background: rgba(255, 255, 255, 0.85); border-radius: .5rem; text-align: left; max-width: 50rem; } .mobile .quick-view { width: 100%; height: 100%; margin: 0; padding: 10px; } .mobile .quick-view .caption { padding: 10px 0; } .button-6 { --text-style: "button 6"; font-size: 1.7rem; font-weight: 400; font-family: "Site Sans"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #ffffff; background: rgba(0, 0, 0, 0.4); display: inline-block; border-radius: 999rem; padding-top: 0.7rem; padding-right: 1.5rem; padding-bottom: 0.7rem; padding-left: 1.5rem; } .button-6 a { color: #ffffff; text-decoration: underline; } .button-6 a:hover { } .button-6 a.active { color: #ffffff; text-decoration: none; } .button-6-1 { --text-style: "button 6-1"; font-size: 1.7rem; font-weight: 400; font-family: "Site Sans"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #ffffff; background: rgba(0, 0, 0, 0.4); display: inline-block; border-radius: 999rem; padding-top: 0.7rem; padding-right: 1.5rem; padding-bottom: 0.7rem; padding-left: 1.5rem; } .button-6-1 a { color: #ffffff; text-decoration: underline; } .button-6-1 a:hover { } .button-6-1 a.active { color: #ffffff; text-decoration: none; } .button-6-2 { --text-style: "button 6-2"; font-size: 1.7rem; font-weight: 400; font-family: "Site Sans"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #ffffff; background: rgba(0, 0, 0, 0.4); display: inline-block; border-radius: 999rem; padding-top: 0.7rem; padding-right: 1.5rem; padding-bottom: 0.7rem; padding-left: 1.5rem; filter: drop-shadow(0rem 0rem 7.88rem rgba(0, 0, 0, 0.25)); will-change: filter; } .button-6-2 a { color: #ffffff; text-decoration: underline; } .button-6-2 a:hover { } .button-6-2 a.active { color: #ffffff; text-decoration: none; } .text-style-406065 { --text-style: "Text Style 406065"; font-family: "Site Sans"; font-style: normal; font-weight: 400; font-size: 5.2rem; line-height: 1; color: rgba(0, 0, 0, 0.85); letter-spacing: -0.02em; font-variation-settings: 'slnt' 0, 'MONO' 0; display: inline-block; border-width: 0.1rem; border-color: rgba(0,0,0,0.85); border-style: solid; border-radius: 0.5rem; padding: 0.5rem; padding-left: 1rem; padding-right: 1rem; } .text-style-406065 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; transition: color 0.3s ease; } .text-style-406065 a:hover { color: purple ; } .text-style-4060650-1 { --text-style: "Text Style 4060650-1"; font-family: "Site Sans"; font-style: normal; font-weight: 400; font-size: 5.2rem; line-height: 1; color: rgba(0, 0, 0, 0.85); letter-spacing: -0.02em; font-variation-settings: 'slnt' 0, 'MONO' 0; display: inline-block; border-width: 0.1rem; border-color: rgba(0,0,0,0.85); border-style: solid; border-radius: 0.5rem; padding: 0.5rem; padding-left: 1rem; padding-right: 1rem; } .text-style-4060650-1 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; transition: color 0.3s ease; } .text-style-4060650-1 a:hover { color: red; } .button-4 { --text-style: "button 4"; font-size: 1.7rem; font-weight: 400; font-family: "Site Sans"; font-style: normal; line-height: 1.2; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; display: inline-block; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.2rem; } .button-4 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4 a:hover { } .button-4 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-1 { --text-style: "button 4-1"; font-family: "Site Sans"; font-style: normal; font-weight: 400; font-size: 5.2rem; line-height: 1; letter-spacing: -0.02em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; display: inline-block; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.2rem; } .button-4-1 a { transition: color 0.3s ease; color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-1 a:hover { } .button-4-1 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-2 { --text-style: "button 4-2"; font-size: 1.70rem; font-weight: 646; font-family: "Site Sans"; font-style: normal; line-height: 1.3; letter-spacing: 0em; font-variation-settings: 'slnt' 0, 'MONO' 0; color: #000000; display: inline-block; border-radius: 986.4rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.1rem; border-color: rgba(0,0,0,0.85); border-style: solid; } .button-4-2 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4-2 a:hover { } .button-4-2 a.active { color: rgba(0, 0, 0, 0.85); text-decoration: none; } .text-style-406065-copy-2 { --text-style: "Text Style 406065 copy 2"; font-family: "Site Sans"; font-style: normal; font-weight: 400; font-size: 5.2rem; line-height: 1; color: rgba(0, 0, 0, 0.85); letter-spacing: -0.02em; font-variation-settings: 'slnt' 0, 'MONO' 0; display: inline-block; border-width: 0.1rem; border-color: rgba(0,0,0,0.85); border-style: solid; border-radius: 0.5rem; padding: 0.5rem; padding-left: 1rem; padding-right: 1rem; } .text-style-406065-copy-2 a { color: rgba(0, 0, 0, 0.85); text-decoration: none; transition: color 0.3s ease; } .text-style-406065-copy-2 a:hover { color: green; } .mobile .quick-view .caption-background { max-width: 100vw; } ::part(slideshow-nav) { --button-size: 30px; --button-inset: 20px; --button-icon-color: rgba(0, 0, 0, 0.9); --button-icon-stroke-width: 1.5px; --button-icon-stroke-linecap: none; --button-background-color: rgba(168, 168, 168, 0.6); --button-background-radius: 50%; --button-active-opacity: 0.7; } gallery-slideshow::part(slideshow-nav) { --button-inset: 15px; } .quick-view::part(slideshow-nav) { } .wallpaper-slideshow::part(slideshow-nav) { } .mobile ::part(slideshow-nav) { --button-inset: 10px; } .mobile .quick-view::part(slideshow-nav) { --button-inset: 25px; } audio-player { --text-color: rgba(255, 255, 255, 0.85); --text-padding: 0 1.2em 0 1.0em; --background-color: rgba(255, 255, 255, 0); --buffer-background-color: rgba(255, 255, 255, 0.075); --progress-background-color: rgba(255, 255, 255, 0.12); --border-lines: 1px solid rgba(255, 255, 255, 0.25); font-size: 1.2rem; width: 32rem; height: 2.75em; font-family: "Site Sans"; font-style: normal; font-weight: 400; font-variation-settings: 'slnt' 0, 'MONO' 0; line-height: normal; letter-spacing: 0em; margin-bottom: 0.5em; border-radius: 10em; } audio-player::part(button) { --icon-color: rgba(255, 255, 255, 0.85); --icon-size: 32%; --play-text: ''; --pause-text: ''; width: 3.15em; display: inline-flex; justify-content: center; cursor: pointer; } audio-player::part(play-icon) { padding-left: 0.6em; } audio-player::part(pause-icon) { padding-left: 0.4em; } audio-player::part(progress-indicator) { border-right: 1px solid rgba(255, 255, 255, 0); height: 100%; cursor: ew-resize; } audio-player::part(separator) { border-right: var(--border-lines); } body.mobile audio-player { max-width: 100%; } /* ================= base-generated.css — what Cargo generates at runtime from the site stylesheet ================= */ /* (a) #mobile-offset-styles (dc() over the site stylesheet) */ .mobile .page-content{padding-top:calc(3rem * var(--mobile-padding-offset));padding-right:calc(3rem * var(--mobile-padding-offset));padding-bottom:calc(3rem * var(--mobile-padding-offset));padding-left:calc(3rem * var(--mobile-padding-offset))} /* (b) #text-style-font-sizes (setInheritableFontSizes) */ bodycopy{--font-size:1.7rem} bodycopy,bodycopy *{font-size:calc(var(--font-scale) * var(--font-size))} h1{--font-size:3.8rem} h1{font-size:calc(var(--font-scale) * var(--font-size))} .mobile h1{--font-size:3.4rem} .mobile h1{font-size:calc(var(--font-scale) * var(--font-size))} h2{--font-size:2rem} h2{font-size:calc(var(--font-scale) * var(--font-size))} .caption{--font-size:1.2rem} .caption{font-size:calc(var(--font-scale) * var(--font-size))} .button-6{--font-size:1.7rem} .button-6{font-size:calc(var(--font-scale) * var(--font-size))} .button-6-1{--font-size:1.7rem} .button-6-1{font-size:calc(var(--font-scale) * var(--font-size))} .button-6-2{--font-size:1.7rem} .button-6-2{font-size:calc(var(--font-scale) * var(--font-size))} .text-style-406065{--font-size:5.2rem} .text-style-406065{font-size:calc(var(--font-scale) * var(--font-size))} .text-style-4060650-1{--font-size:5.2rem} .text-style-4060650-1{font-size:calc(var(--font-scale) * var(--font-size))} .button-4{--font-size:1.7rem} .button-4{font-size:calc(var(--font-scale) * var(--font-size))} .button-4-1{--font-size:5.2rem} .button-4-1{font-size:calc(var(--font-scale) * var(--font-size))} .button-4-2{--font-size:1.7rem} .button-4-2{font-size:calc(var(--font-scale) * var(--font-size))} .text-style-406065-copy-2{--font-size:5.2rem} .text-style-406065-copy-2{font-size:calc(var(--font-scale) * var(--font-size))} audio-player{--font-size:1.2rem} audio-player{font-size:calc(var(--font-scale) * var(--font-size))} /* (c) #link-styles (setLinkStyles: ".X a" of text styles re-emitted as "a.X" so they beat "bodycopy a") */ a.caption{color:rgba(255,255,255,0.4);text-decoration:underline} a.button-6,a.button-6-1,a.button-6-2{color:rgb(255,255,255);text-decoration:underline} a.active.button-6,a.active.button-6-1,a.active.button-6-2{color:rgb(255,255,255);text-decoration:none} a.text-style-406065{color:rgba(0,0,0,0.85);text-decoration:none;transition:color 0.3s} a:hover.text-style-406065{color:purple} a.text-style-4060650-1{color:rgba(0,0,0,0.85);text-decoration:none;transition:color 0.3s} a:hover.text-style-4060650-1{color:red} a.button-4,a.active.button-4{color:rgba(0,0,0,0.85);text-decoration:none} a.button-4-1,a.active.button-4-1{transition:color 0.3s;color:rgba(0,0,0,0.85);text-decoration:none} a.button-4-2,a.active.button-4-2{color:rgba(0,0,0,0.85);text-decoration:none} a.text-style-406065-copy-2{color:rgba(0,0,0,0.85);text-decoration:none;transition:color 0.3s} a:hover.text-style-406065-copy-2{color:green} /* text-icon (Cargo :host style; the SVG is injected as a light-DOM child at build time) */ text-icon{display:inline-block;position:relative;vertical-align:baseline;height:1.2em;width:auto;aspect-ratio:1;margin-top:-1em;margin-bottom:-.25em;contain:layout} text-icon>svg{display:block;position:absolute;inset:0;width:100%;height:100%;fill:currentColor} /* pin "adjust" padding: CargoLite.base writes --pin-padding-top/-bottom (px) on the page; the rem fallbacks are this site's pin heights (top-nav 7.9rem / 5.88rem, footer 8.3rem / 5.415rem) */ .pages>.page{padding-top:var(--pin-padding-top,7.9rem);padding-bottom:var(--pin-padding-bottom,8.3rem)} .mobile .pages>.page{padding-top:var(--pin-padding-top,5.88rem);padding-bottom:var(--pin-padding-bottom,5.415rem)} /* ========================================================================== column-set / column-unit — Cargo 3 parity (light DOM, no shadow root) Source of truth: fe.js class Mv (custom element "column-set"), helper iu() (column map) and di() (unit parser); static-css rules "column-set+*{--gutter-expand:1}" and "column-unit>*:first-child{--gutter-expand:0}". Works WITHOUT JS (sub-pixel exact except Cargo's integer rounding). With JS (CargoLite.columnSets.layout) widths/gutter become px-identical. ========================================================================== */ /* --- host (= Cargo ":host" of column-set) ------------------------------- */ column-set { --cs-g: 1rem; /* gutter attr, default "1rem" (Mv.defaultProps) */ --cs-gap: var(--cs-g); /* effective gutter; JS overwrites with rounded px */ --cs-cols: 12; /* units attr default 12 */ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; width: 100%; position: relative; contain: layout; clear: both; margin-top: calc(var(--gutter-expand, 0) * var(--cs-gap)); } /* gutter values used on this site ("1" has no unit -> di() appends "rem") */ column-set[gutter="2rem"] { --cs-g: 2rem; } column-set[gutter="1"], column-set[gutter="1rem"] { --cs-g: 1rem; } column-set[gutter="0.0rem"], column-set[gutter="0rem"], column-set[gutter="0"] { --cs-g: 0rem; } /* Cargo only slots children; anything else is not rendered */ column-set > :not(column-unit) { display: none; } /* --- units (= Cargo "::slotted(column-unit)") ---------------------------- */ column-unit { --cs-span: 1; display: block; word-wrap: break-word; position: relative; max-width: 100%; flex-grow: 0; flex-shrink: 0; /* 12-col formula: span*(W+g)/12 - g (W = column-set width, g = gutter) */ flex-basis: calc((100% + var(--cs-gap)) * var(--cs-span) / var(--cs-cols) - var(--cs-gap)); width: calc((100% + var(--cs-gap)) * var(--cs-span) / var(--cs-cols) - var(--cs-gap)); } column-unit:not(:last-child) { margin-right: var(--cs-gap); } column-unit:last-child { flex-grow: 1; } column-unit[span="1"] { --cs-span: 1; } column-unit[span="2"] { --cs-span: 2; } column-unit[span="3"] { --cs-span: 3; } column-unit[span="4"] { --cs-span: 4; } column-unit[span="5"] { --cs-span: 5; } column-unit[span="6"] { --cs-span: 6; } column-unit[span="7"] { --cs-span: 7; } column-unit[span="8"] { --cs-span: 8; } column-unit[span="9"] { --cs-span: 9; } column-unit[span="10"] { --cs-span: 10; } column-unit[span="11"] { --cs-span: 11; } column-unit[span="12"] { --cs-span: 12; } /* No span attribute on any unit ("uniform"): columns = number of units, i.e. equal widths (W-(n-1)g)/n. Every span-less set on this site (top-nav, footer) has ONLY span-less units, so :not([span]) is safe. */ column-unit:not([span]) { flex: 1 1 0; width: auto; min-width: 0; } /* --- JS-exact mode: CargoLite writes px values like Cargo does --------- */ column-set[data-cs-js] > column-unit { flex: 0 0 var(--column-width); width: var(--column-width); min-width: auto; } column-set[data-cs-js] > column-unit:last-child { flex-grow: 1; } column-set[data-cs-js] > column-unit[data-cs-hide] { display: none; } /* --- mobile (html.mobile): stack unless mobile-stack="false" ------------ */ html.mobile column-set { /* Cargo: calc( var(--mobile-padding-offset, 1) * ) — 0.31 on this site */ --cs-gap: calc(var(--mobile-padding-offset, 1) * var(--cs-g)); } html.mobile column-set:not([mobile-stack="false"]) { flex-direction: column; align-items: start; flex-wrap: nowrap; height: auto; row-gap: var(--cs-gap); /* == Cargo margin-bottom on every visible unit but the last */ } html.mobile column-set:not([mobile-stack="false"]) > column-unit { flex: 0 0 auto; width: 100%; margin-right: 0; } html.mobile column-set:not([mobile-stack="false"]) > column-unit:last-child { flex-grow: 1; } /* empty unit (no element child, no non-whitespace text; counts as whitespace) */ html.mobile column-set:not([mobile-stack="false"]) > column-unit[data-empty], html.mobile column-set[mobile-hide-empty="true"] > column-unit[data-empty] { display: none; } html.mobile column-set[data-cs-js]:not([mobile-stack="false"]) > column-unit { flex: 0 0 auto; width: var(--column-width); } /* ========================================================================================== media-item (lose Bilder außerhalb von Galerien) — Cargo media-item :host + Schatten-CSS im Light DOM. :host{display:inline-flex;vertical-align:bottom;width:var(--resize-parent-width,100%); max-width:calc(scale * var(--resize-parent-width,100%))} (limit-by "width", Standard scale 100%) .sizing-frame{height:0;padding-bottom:} [part=media]{absolute, object-fit:cover} Der Generator schreibt --mi-scale (scale-Attribut) und --mi-ar (h/w) auf jedes media-item. Galerie-Regeln weiter unten überschreiben das für Bilder in Galerien. ========================================================================================== */ media-item { display: inline-flex; vertical-align: bottom; flex-direction: column; position: relative; box-sizing: border-box; margin: 0; padding: 0; width: var(--resize-parent-width, 100%); max-width: calc(var(--mi-scale, 1) * var(--resize-parent-width, 100%)); transform-origin: center center; z-index: var(--z-index, initial); } media-item > .media-frame { display: block; position: relative; width: 100%; flex-grow: 1; height: 0; padding-bottom: var(--frame-padding, var(--mi-ar, 62.5%)); isolation: isolate; } media-item > .media-frame > img, media-item > .media-frame > video { object-position: center center; display: block; margin: 0; box-sizing: border-box; width: 100%; min-width: 100%; min-height: 100%; height: 100%; max-width: none; position: absolute; inset: 0; overflow: clip; overflow-clip-margin: content-box; object-fit: var(--object-fit, cover); /* site stylesheet: media-item::part(media){border-radius:1.5rem;border:0;padding:0}; media-style des Bildes steht inline auf dem und gewinnt */ border-radius: 1.5rem; border: 0; padding: 0; } media-item > .media-frame > img::selection { background: transparent; } media-item > figcaption { width: 100%; } /* =================================================================== gallery-grid + gallery-columnized (Cargo 3 parity, spec 03) JS (CargoLite.galleries) adds [data-cl] and absolute positions. Everything under :not([data-cl]) is only the no-JS / pre-JS fallback. =================================================================== */ gallery-grid, gallery-columnized { display: block; position: relative; box-sizing: border-box; width: var(--resize-parent-width, 100%); max-width: 100%; /* Cargo :host margin-top: calc(var(--gutter-expand, 0) * px) */ margin-top: calc(var(--gutter-expand, 0) * var(--cl-gh, 0px)); } gallery-grid[hidden], gallery-columnized[hidden] { display: none; } /* Cargo renders ONLY slotted s; any other light-DOM child is invisible */ gallery-grid > :not(media-item, a, .cl-probe), gallery-columnized > :not(media-item, a, .cl-probe) { display: none; } /* size probe (JS) — same trick as Cargo's $r component (shared with spec 04: absolute, 100% wide, 0 high) */ .cl-probe { display: block; position: absolute; left: 0; top: 0; width: 100%; min-width: 100%; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; z-index: -1; } .cl-probe > div { height: 0; } /* ---------- item boxes ---------- */ :is(gallery-grid, gallery-columnized) > a { display: block; color: inherit; text-decoration: none; } /* Vorschau-Index: bei Cargo trägt das media-item.linked selbst das href, beim Drücken dimmt nur .linked:active auf 0.7. Hier umschließt ein das media-item; ohne diese Regel dimmten a:active und .linked:active beide (0.7 × 0.7). */ :is(gallery-grid, gallery-columnized) > a:active { opacity: 1; } :is(gallery-grid, gallery-columnized) > a > media-item, :is(gallery-grid, gallery-columnized) > media-item { display: flex; flex-direction: column; position: relative; width: 100%; max-width: none; margin: 0; padding: 0; box-sizing: border-box; } :is(gallery-grid, gallery-columnized)[data-cl] > :is(media-item, a) { position: absolute; margin: 0; box-sizing: border-box; max-width: none; } /* ---------- frame + image (replaces the shadow .sizing-frame / [part=media]) ---------- */ :is(gallery-grid, gallery-columnized)[data-cl] media-item > .media-frame { position: relative; display: block; flex: 0 0 auto; box-sizing: border-box; width: 100%; height: var(--frame-padding, auto); padding: 0; aspect-ratio: auto; } :is(gallery-grid, gallery-columnized)[data-cl] media-item > .media-frame > :is(img, video) { position: absolute; inset: 0; display: block; margin: 0; box-sizing: border-box; width: 100%; height: 100%; min-width: 100%; min-height: 100%; max-width: none; max-height: none; object-fit: var(--cl-object-fit, var(--object-fit, cover)); object-position: center center; overflow: clip; overflow-clip-margin: content-box; } /* media-style declarations (border-radius, padding) are inline on the ; the site default (media-item::part(media){border-radius:1.5rem}) is in the media-item section above. */ /* ---------- fallback before/without JS (approximate) ---------- */ gallery-grid:not([data-cl]) { display: grid; grid-template-columns: repeat(var(--cl-cols, 3), minmax(0, 1fr)); gap: 1rem; align-items: start; } gallery-columnized:not([data-cl]) { columns: var(--cl-cols, 3); column-gap: 1rem; } gallery-columnized:not([data-cl]) > * { break-inside: avoid; margin-bottom: 1rem; } :is(gallery-grid, gallery-columnized):not([data-cl]) media-item > .media-frame > img { display: block; width: 100%; height: auto; box-sizing: border-box; } :is(gallery-grid, gallery-columnized)[columns="1"] { --cl-cols: 1; } :is(gallery-grid, gallery-columnized)[columns="2"] { --cl-cols: 2; } :is(gallery-grid, gallery-columnized)[columns="3"] { --cl-cols: 3; } :is(gallery-grid, gallery-columnized)[columns="4"] { --cl-cols: 4; } :is(gallery-grid, gallery-columnized)[columns="5"] { --cl-cols: 5; } :is(gallery-grid, gallery-columnized)[columns="6"] { --cl-cols: 6; } html.mobile :is(gallery-grid, gallery-columnized)[mobile-columns="1"] { --cl-cols: 1; } html.mobile :is(gallery-grid, gallery-columnized)[mobile-columns="2"] { --cl-cols: 2; } html.mobile :is(gallery-grid, gallery-columnized)[mobile-columns="3"] { --cl-cols: 3; } html.mobile :is(gallery-grid, gallery-columnized)[mobile-columns="4"] { --cl-cols: 4; } /* ========================================================================== CargoLite 04 — gallery-justify · gallery-freeform · gallery-slideshow · quick view (lightbox) · scroll animation · flying objects Pairs with cl04.js. All numbers are taken from Cargo 3 fe.js / static-css and the site stylesheet (see spec 04). ========================================================================== */ /* (static-css gutter hand-over and .cl-probe: defined once above) */ .cl-row-break { flex: 0 0 100%; width: 100%; height: 0; margin: 0; padding: 0; border: 0; } /* shared: a laid-out gallery item. The frame height comes from JS (--cl-frame-h), the image fills the frame like Cargo's [part=media] (object-fit: cover, or fill on the last item of a justified row). */ gallery-justify > media-item, gallery-freeform > media-item, gallery-slideshow media-item { box-sizing: border-box; flex-direction: column; flex-shrink: 0; flex-grow: 0; margin: 0; padding: 0; min-width: 0; vertical-align: top; } gallery-justify > media-item > .media-frame, gallery-freeform > media-item > .media-frame, gallery-slideshow media-item > .media-frame { position: relative; display: block; box-sizing: border-box; flex: none; width: 100%; height: var(--cl-frame-h, auto); aspect-ratio: auto; padding: 0; margin: 0; overflow: hidden; } gallery-justify > media-item > .media-frame > img, gallery-freeform > media-item > .media-frame > img, gallery-slideshow media-item > .media-frame > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: var(--object-fit, cover); object-position: center center; /* radius: site default / inline media-style on the */ } /* --- gallery-justify ------------------------------------------------------ */ gallery-justify { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; position: relative; box-sizing: border-box; width: 100%; max-width: 100%; margin-top: calc(var(--gutter-expand, 0) * var(--cl-gh, 0px)); } gallery-justify > media-item { display: flex; position: relative; max-width: 100%; } /* --- gallery-freeform ----------------------------------------------------- */ gallery-freeform { display: block; position: relative; box-sizing: border-box; width: 100%; max-width: 100%; contain: layout; } gallery-freeform.cl-ff-free > media-item { display: flex; position: absolute; top: 0; left: 0; max-width: none; } gallery-freeform.cl-ff-free[hover-pop="true"] > media-item:hover { z-index: 99999 !important; } /* mobile: Cargo renders freeform as a gallery-grid (mobile-grid default true) */ gallery-freeform.cl-ff-grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; contain: none; margin-top: calc(var(--gutter-expand, 0) * var(--cl-gh, 0px)); } gallery-freeform.cl-ff-grid > media-item { display: flex; position: relative; max-width: 100%; } /* --- gallery-slideshow ---------------------------------------------------- */ gallery-slideshow { display: block; position: relative; box-sizing: border-box; width: 100%; max-width: 100%; opacity: 0; transition: opacity .2s ease-in-out; /* :host opacity until loaded */ overflow-x: clip; overflow-y: visible; /* .slideshow-wrapper */ -webkit-user-select: none; user-select: none; touch-action: pan-y; outline: 0; } gallery-slideshow.cl-ss-loaded { opacity: 1; } gallery-slideshow > .cl-ss-track { position: relative; height: var(--slide-height, auto); backface-visibility: hidden; } gallery-slideshow > .cl-ss-track > media-item { position: absolute; top: 0; left: 0; width: var(--cl-ss-w); max-width: none; height: var(--slide-height); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: var(--cl-ss-halign, center); /* frame align-self (horizontal-align) */ align-content: var(--cl-ss-valign, center); /* frame align-content (vertical-align) */ visibility: hidden; } gallery-slideshow > .cl-ss-track > media-item.cl-ss-show { visibility: visible; } gallery-slideshow > .cl-ss-track > media-item > .media-frame { width: var(--item-width, 100%); } gallery-slideshow img { -webkit-user-drag: none; } gallery-slideshow > .cl-ss-track > media-item > .caption { display: none; } /* no captions on this site */ gallery-slideshow.cl-ss-fade > .cl-ss-track > media-item { transition: opacity var(--cl-ss-fade, .8s) cubic-bezier(.24,0,.29,1); } /* slideshow + quick-view navigation buttons (Cargo ::part(slideshow-nav*) + site stylesheet) */ .cl-nav { --button-size: 30px; --button-inset: 20px; --button-icon-color: rgba(0, 0, 0, 0.9); --button-icon-stroke-width: 1.5px; --button-background-color: rgba(168, 168, 168, 0.6); --button-active-opacity: 0.7; pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; transition: opacity 222ms ease-in-out; } .cl-nav-prev, .cl-nav-next { position: absolute; top: 0; bottom: 0; pointer-events: auto; cursor: pointer; } .cl-nav-prev { left: 0; } .cl-nav-next { right: 0; } .cl-nav-close { position: absolute; top: 0; right: 0; pointer-events: auto; cursor: pointer; } .cl-nav-prev:active, .cl-nav-next:active, .cl-nav-close:active { opacity: var(--button-active-opacity); } .cl-nav svg { position: absolute; margin: auto; width: var(--button-size); height: var(--button-size); overflow: visible; } .cl-nav-prev svg { top: 0; bottom: 0; left: var(--button-inset); } .cl-nav-next svg { top: 0; bottom: 0; right: var(--button-inset); transform: scaleX(-1); } .cl-nav-close svg { top: var(--button-inset); right: var(--button-inset); } .cl-nav svg rect { fill: var(--button-background-color); stroke: none; } .cl-nav svg path { fill: none; stroke: var(--button-icon-color); stroke-width: var(--button-icon-stroke-width); stroke-linecap: butt; } gallery-slideshow > .cl-ss-nav { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: var(--slide-height); opacity: 0; --button-inset: 15px; } .mobile gallery-slideshow > .cl-ss-nav { --button-inset: 10px; } gallery-slideshow.cl-ss-nav-on > .cl-ss-nav { opacity: 1; } /* --- quick view (PhotoSwipe-based lightbox) -------------------------------- */ .cl-qv { position: fixed; inset: 0; z-index: 5001; box-sizing: border-box; padding: 3rem; touch-action: none; -webkit-text-size-adjust: 100%; outline: 0; overflow: hidden; } .mobile .cl-qv { padding: 10px; } .cl-qv.cl-qv-fade { opacity: 0.001; transition: opacity 333ms cubic-bezier(.4, 0, .22, 1); } .cl-qv.cl-qv-fade.cl-qv-in { opacity: 1; } .cl-qv-bg { position: absolute; inset: 0; background-color: #000; opacity: 0; will-change: opacity; transition: opacity 222ms cubic-bezier(.4, 0, .22, 1); } .cl-qv-strip { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .cl-qv-img { position: absolute; left: 0; top: 0; display: block; max-width: none; margin: 0; object-fit: cover; transform-origin: 0 0; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; cursor: default; } .cl-qv-ui { position: fixed; inset: 0; z-index: 5002; opacity: 0; } .mobile .cl-qv-ui { --button-inset: 25px; } .cl-qv-ui.cl-on { opacity: 1; } html.cl-touch.mobile .cl-qv-ui .cl-nav-prev, html.cl-touch.mobile .cl-qv-ui .cl-nav-next { pointer-events: none; opacity: 0; } /* zoomable media: cursor + press feedback (site stylesheet .zoomable::part(media):active) */ media-item.zoomable > .media-frame { cursor: zoom-in; } .zoomable > .media-frame > img:active { opacity: 0.7; } /* --- scroll animation (site_design.images.scroll_animation = true) --------- */ /* hidden state only; the fade-up itself runs as Web Animations in cargo-lite.js §6 (1000 ms, Cargo easing) */ media-item.cl-st-hidden { translate: 0 40px; } media-item.cl-st-hidden > .media-frame { opacity: 0; } /* --- flying objects (media-item uses="flying-object") --------------------- */ div.flying-object { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; overflow: hidden; } div.flying-object, div.flying-object * { -webkit-user-select: none; user-select: none; pointer-events: none !important; } div.flying-object > media-item { display: none !important; } /* the flight layer is a in like Cargo's body > media-item[no-component] host */ media-item.cl-fly-layer { display: block; position: fixed; inset: 0; z-index: 5000; overflow: hidden; pointer-events: none; width: auto; max-width: none; vertical-align: top; } .cl-flier { position: absolute; top: 0; left: 0; z-index: 9995; pointer-events: none; transform: translateX(-100%) translateY(-100%); } .cl-spinner { position: relative; display: flex; align-items: center; justify-content: center; width: var(--fly-size); height: var(--fly-size); } .cl-spinner.cl-spin { animation: cl-spin var(--spin-dur) linear infinite var(--spin-dir, normal); } .cl-spinner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; padding: 0; border: none; max-width: none; } @keyframes cl-spin { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(3600deg); } } /* ========================================================================================== Ruhiger Modus für automatische Messungen (html.cl-static: navigator.webdriver oder ?static): keine Scroll-Einblendung, keine Diashow-Automatik, keine Überblendungen (siehe cargo-lite.js). ========================================================================================== */ html.cl-static gallery-slideshow { transition: none; } html.cl-static .cl-nav { transition: none; } html.cl-static .cl-spinner.cl-spin { animation: none; } /* Sticker ruhen ungedreht an festen Punkten */ /* vor dem Skript (html.cl-js, cargo-lite.js hat die Galerie noch nicht gesetzt): Galerie-Bilder ausblenden. Sonst standen alle Bilder von justify/freeform/slideshow mit voller Breite und 0 px Höhe übereinander im Bild, jedes lazy-Bild galt als sichtbar und lud mit sizes="auto" in Galeriebreite (je-taime mobil 2,5 MB statt 0,6 MB, alle 21 Dias von jacquemus); Raster/Spalten luden in der Ersatzbreite und nach dem Layout ein zweites Mal. Sichtbar war vorher ohnehin nichts davon (Bildhöhe 0, Diashow opacity 0) bzw. es sprang beim Layout. Das Skript setzt [data-cl] (Raster, Spalten, justify, freeform) bzw. hängt die Dias in .cl-ss-track um. Lädt das Skript nicht, entfernt onerror am