/* BJC Content Sections — expressive homepage assemblies */ .bjc-cs-home { --bjc-cs-home-accent: var(--e-global-color-accent, #6750a4); --bjc-cs-home-background: transparent; --bjc-cs-home-copy-background: transparent; --bjc-cs-home-media-background: transparent; --bjc-cs-home-radius: 18px; position: relative; width: 100%; background: var(--bjc-cs-home-background); color: var(--e-global-color-text, #333); overflow: hidden; } .bjc-cs-home-shell { position: relative; width: min(100%, 1500px); margin-inline: auto; padding: clamp(2rem, 5vw, 5rem); } .bjc-cs-home-copy { position: relative; z-index: 3; background: var(--bjc-cs-home-copy-background); border-radius: var(--bjc-cs-home-radius); padding: clamp(1.5rem, 3vw, 3.25rem); } .bjc-cs-home-eyebrow { margin-bottom: .9rem; font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bjc-cs-home-accent); } .bjc-cs-home-heading { margin: 0 0 1.25rem; font-size: clamp(2.4rem, 5.4vw, 6rem); line-height: .96; letter-spacing: -.035em; color: var(--e-global-color-text, #222); } .bjc-cs-home-body { max-width: 62ch; font-size: clamp(1rem, 1.25vw, 1.22rem); line-height: 1.65; } .bjc-cs-home-body > :first-child { margin-top: 0; } .bjc-cs-home-body > :last-child { margin-bottom: 0; } .bjc-cs-home-note { margin-top: 1.1rem; font-size: .86rem; opacity: .7; } .bjc-cs-home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; margin-top: 1.6rem; } .bjc-cs-home-button, .bjc-cs-home-secondary { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; } .bjc-cs-home-button { padding: .9rem 1.35rem; border: 2px solid var(--bjc-cs-home-accent); border-radius: 7px; } .bjc-cs-home-button-filled { background: var(--bjc-cs-home-accent); color: #fff; } .bjc-cs-home-button-outline { background: transparent; color: var(--bjc-cs-home-accent); } .bjc-cs-home-button-soft { background: color-mix(in srgb, var(--bjc-cs-home-accent) 13%, transparent); color: var(--bjc-cs-home-accent); border-color: transparent; } .bjc-cs-home-button-pill { background: var(--bjc-cs-home-accent); color: #fff; border-radius: 999px; } .bjc-cs-home-secondary { color: var(--bjc-cs-home-accent); } .bjc-cs-home-media-wrap { position: relative; z-index: 2; min-width: 0; min-height: 180px; background: var(--bjc-cs-home-media-background); border-radius: var(--bjc-cs-home-radius); overflow: hidden; } .bjc-cs-home-media-wrap > .bjc-cs-media, .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) > img, .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe, .bjc-cs-home-media-wrap > .bjc-cs-embed > video { width:100%; max-width:100%; } .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) > img { display:block; height:auto; } .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe { display:block; } /* 1. Portal — huge visual with a floating copy plaque. */ .bjc-cs-home-portal .bjc-cs-home-shell { min-height: 620px; padding: clamp(1rem, 3vw, 2.5rem); } .bjc-cs-home-portal .bjc-cs-home-media-wrap { min-height: 560px; border-radius: calc(var(--bjc-cs-home-radius) * 1.35); box-shadow: 0 30px 70px rgba(0,0,0,.13); } .bjc-cs-home-portal .bjc-cs-home-copy { position: absolute; left: clamp(2rem, 6vw, 6rem); bottom: clamp(2rem, 5vw, 5rem); width: min(620px, 76%); background: color-mix(in srgb, var(--bjc-cs-home-copy-background, #fff) 92%, transparent); backdrop-filter: blur(10px); box-shadow: 0 18px 60px rgba(0,0,0,.16); } .bjc-cs-home-portal .bjc-cs-home-heading { font-size: clamp(2.4rem, 4.8vw, 5.2rem); } /* 2. Broadcast — built to carry a live video/music/plugin area. */ .bjc-cs-home-broadcast .bjc-cs-home-shell { display: grid; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; } .bjc-cs-home-broadcast .bjc-cs-home-media-wrap { padding: clamp(.5rem, 1vw, 1rem); border: 1px solid color-mix(in srgb, var(--bjc-cs-home-accent) 30%, transparent); box-shadow: 18px 18px 0 color-mix(in srgb, var(--bjc-cs-home-accent) 14%, transparent); } .bjc-cs-home-broadcast .bjc-cs-home-heading { font-size: clamp(2.6rem, 4.4vw, 5.5rem); } /* 3. Orbit — asymmetrical circular energy. */ .bjc-cs-home-orbit .bjc-cs-home-shell { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); align-items: center; gap: clamp(1.5rem, 4vw, 5rem); min-height: 600px; } .bjc-cs-home-orbit-mark { position: absolute; width: min(54vw, 700px); aspect-ratio: 1; border: 2px solid color-mix(in srgb, var(--bjc-cs-home-accent) 34%, transparent); border-radius: 50%; left: -8%; top: 50%; transform: translateY(-50%); } .bjc-cs-home-orbit-mark::before, .bjc-cs-home-orbit-mark::after { content: ""; position: absolute; inset: 8%; border: 1px solid color-mix(in srgb, var(--bjc-cs-home-accent) 22%, transparent); border-radius: 50%; } .bjc-cs-home-orbit-mark::after { inset: 22%; } .bjc-cs-home-orbit .bjc-cs-home-media-wrap { aspect-ratio: 1; border-radius: 50%; box-shadow: 0 30px 80px rgba(0,0,0,.15); } /* 4. Gallery Wall — framed artwork / slider / showpiece. */ .bjc-cs-home-gallery-wall .bjc-cs-home-shell { padding-block: clamp(3rem, 7vw, 7rem); } .bjc-cs-home-gallery-wall .bjc-cs-home-frame { position: relative; width: min(90%, 1180px); margin: 0 auto; padding: clamp(.7rem, 1.4vw, 1.2rem); border: 1px solid color-mix(in srgb, var(--bjc-cs-home-accent) 35%, transparent); } .bjc-cs-home-gallery-wall .bjc-cs-home-frame::before, .bjc-cs-home-gallery-wall .bjc-cs-home-frame::after { content: ""; position: absolute; z-index: 0; border: 1px solid color-mix(in srgb, var(--bjc-cs-home-accent) 22%, transparent); inset: -18px 28px 18px -28px; } .bjc-cs-home-gallery-wall .bjc-cs-home-frame::after { inset: 18px -28px -18px 28px; } .bjc-cs-home-gallery-wall .bjc-cs-home-media-wrap { z-index: 2; } .bjc-cs-home-gallery-wall .bjc-cs-home-copy { width: min(900px, 92%); margin: clamp(2.5rem, 5vw, 5rem) auto 0; text-align: center; } .bjc-cs-home-gallery-wall .bjc-cs-home-body { margin-inline: auto; } .bjc-cs-home-gallery-wall .bjc-cs-home-actions { justify-content: center; } /* 5. Ribbon — media punches through a broad horizontal signal band. */ .bjc-cs-home-ribbon { overflow: visible; } .bjc-cs-home-ribbon-band { position: absolute; inset: 22% 0 18%; background: color-mix(in srgb, var(--bjc-cs-home-accent) 12%, var(--bjc-cs-home-background)); transform: skewY(-2deg); } .bjc-cs-home-ribbon .bjc-cs-home-shell { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.95fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; } .bjc-cs-home-ribbon .bjc-cs-home-media-wrap { transform: rotate(-1.5deg); box-shadow: 0 22px 55px rgba(0,0,0,.14); } .bjc-cs-home-ribbon .bjc-cs-home-copy { transform: translateY(3%); } /* 6. Monolith — strong block, useful for plugins/products/music. */ /* 7. Crosscut — deliberately abstract diagonal composition. */ /* 8. Beacon — centred statement followed by a major live module. */ .bjc-cs-home-beacon .bjc-cs-home-shell { padding-block: clamp(3rem, 7vw, 8rem); } .bjc-cs-home-beacon .bjc-cs-home-copy { width: min(100%, 980px); margin-inline: auto; text-align: center; } .bjc-cs-home-beacon .bjc-cs-home-body { margin-inline: auto; } .bjc-cs-home-beacon .bjc-cs-home-actions { justify-content: center; } .bjc-cs-home-beacon-rule { width: min(55%, 600px); height: 1px; margin: clamp(2rem, 4vw, 4rem) auto; background: linear-gradient(90deg, transparent, var(--bjc-cs-home-accent), transparent); } .bjc-cs-home-beacon .bjc-cs-home-media-wrap { width: min(100%, 1240px); margin-inline: auto; padding: clamp(.5rem, 1vw, 1rem); border: 1px solid color-mix(in srgb, var(--bjc-cs-home-accent) 26%, transparent); box-shadow: 0 28px 70px rgba(0,0,0,.10); } @media (max-width: 900px) { .bjc-cs-home-orbit-mark { width: 90vw; left: -35%; } .bjc-cs-home-ribbon-band { inset: 30% 0 8%; } } @media (max-width: 767px) { .bjc-cs-home-shell { padding: 1.5rem; } .bjc-cs-home-copy { padding: 1.35rem; } .bjc-cs-home-heading { font-size: clamp(2.2rem, 12vw, 4rem); } .bjc-cs-home-portal .bjc-cs-home-shell { min-height: 520px; padding: .75rem; } .bjc-cs-home-portal .bjc-cs-home-copy { left: 1.35rem; right: 1.35rem; bottom: 1.35rem; width: auto; } .bjc-cs-home-orbit .bjc-cs-home-media-wrap { aspect-ratio: 4 / 3; border-radius: var(--bjc-cs-home-radius); } .bjc-cs-home-gallery-wall .bjc-cs-home-frame { width: 100%; } .bjc-cs-home-gallery-wall .bjc-cs-home-frame::before, .bjc-cs-home-gallery-wall .bjc-cs-home-frame::after { display: none; } } /* v0.8.0 homepage correction and expressive-design pass */ /* Shared media: make oEmbed/shortcode output occupy the designed frame. */ .bjc-cs-home-media-wrap > .bjc-cs-media, .bjc-cs-home-media-wrap > .bjc-cs-embed, .bjc-cs-home-media-wrap > .bjc-cs-media > iframe, .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe, .bjc-cs-home-media-wrap > .bjc-cs-media > video, .bjc-cs-home-media-wrap > .bjc-cs-embed > video { width: 100%; max-width: 100%; } .bjc-cs-home-primary-text { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; text-decoration: none; color: var(--bjc-cs-home-accent); } /* Portal: safer inset so captions/text cannot hug or clip against the left edge. */ .bjc-cs-home-portal .bjc-cs-home-copy { left: clamp(2.75rem, 6vw, 6.5rem); bottom: clamp(2.25rem, 5vw, 5rem); padding: clamp(1.85rem, 3.2vw, 3.4rem); } .bjc-cs-home-portal .bjc-cs-home-note { padding-left: .2rem; } /* Orbit: the media now fills the entire circular centre, including oEmbed video. */ .bjc-cs-home-orbit .bjc-cs-home-media-wrap { position: relative; aspect-ratio: 1; min-height: 0; } .bjc-cs-home-orbit .bjc-cs-home-copy { text-align: center; } .bjc-cs-home-orbit .bjc-cs-home-body { margin-inline: auto; } .bjc-cs-home-orbit .bjc-cs-home-actions { justify-content: center; } .bjc-cs-home-orbit .bjc-cs-home-note { text-align: center; } /* Gallery Wall: reduce dead vertical distance between exhibit and wording. */ .bjc-cs-home-gallery-wall .bjc-cs-home-copy { margin-top: clamp(1.1rem, 2.4vw, 2.25rem); } .bjc-cs-home-gallery-wall .bjc-cs-home-shell { padding-block: clamp(2.25rem, 5vw, 5rem); } /* Ribbon: contained or true browser-width crooked background. */ .bjc-cs-home-ribbon { overflow: hidden; } .bjc-cs-home-ribbon.bjc-cs-ribbon-contained .bjc-cs-home-ribbon-band { left: max(2%, calc((100% - 1500px) / 2)); right: max(2%, calc((100% - 1500px) / 2)); } .bjc-cs-home-ribbon.bjc-cs-ribbon-full .bjc-cs-home-ribbon-band { left: 50%; right: auto; width: 100vw; transform: translateX(-50%) skewY(-2deg); } /* Monolith rebuilt as a coherent two-sided slab. */ /* Crosscut: make the visual side substantially larger and taller. */ /* Beacon: statement and live feature belong together. */ .bjc-cs-home-beacon-rule { margin: clamp(1rem, 2vw, 1.75rem) auto; } .bjc-cs-home-beacon .bjc-cs-home-shell { padding-block: clamp(2.5rem, 5vw, 5.5rem); } /* VINYL ORBIT — music/player promotion with record-groove geometry. */ /* SOUNDWAVE — broad live-player/video area cut through an abstract waveform. */ .bjc-cs-home-soundwave .bjc-cs-home-shell { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:clamp(2rem,5vw,6rem); align-items:center; min-height:610px; } .bjc-cs-soundwave-bars { position:absolute; left:2%; right:2%; top:50%; height:190px; transform:translateY(-50%); display:flex; align-items:center; justify-content:space-around; gap:2%; opacity:.18; } .bjc-cs-soundwave-bars span { width:7%; background:var(--bjc-cs-home-accent); border-radius:999px; } .bjc-cs-soundwave-bars span:nth-child(1), .bjc-cs-soundwave-bars span:nth-child(9){height:24%} .bjc-cs-soundwave-bars span:nth-child(2), .bjc-cs-soundwave-bars span:nth-child(8){height:48%} .bjc-cs-soundwave-bars span:nth-child(3), .bjc-cs-soundwave-bars span:nth-child(7){height:76%} .bjc-cs-soundwave-bars span:nth-child(4), .bjc-cs-soundwave-bars span:nth-child(6){height:100%} .bjc-cs-soundwave-bars span:nth-child(5){height:58%} .bjc-cs-home-soundwave .bjc-cs-home-media-wrap { transform:rotate(-1deg); border-radius:calc(var(--bjc-cs-home-radius) * 1.35); box-shadow:0 28px 70px rgba(0,0,0,.14); } /* EQUALIZER — darker, performance-oriented player/plugin feature. */ .bjc-cs-home-equalizer .bjc-cs-home-shell { display:grid; grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr); gap:clamp(2rem,5vw,6rem); align-items:center; min-height:620px; } .bjc-cs-eq-grid { position:absolute; inset:8% 3%; background: repeating-linear-gradient(90deg, color-mix(in srgb,var(--bjc-cs-home-accent) 18%,transparent) 0 3px, transparent 3px 48px), repeating-linear-gradient(0deg, color-mix(in srgb,var(--bjc-cs-home-accent) 10%,transparent) 0 1px, transparent 1px 42px); clip-path:polygon(0 18%,100% 0,96% 82%,8% 100%); opacity:.65; } .bjc-cs-home-equalizer .bjc-cs-home-media-wrap { border:1px solid color-mix(in srgb,var(--bjc-cs-home-accent) 32%,transparent); box-shadow:18px 18px 0 color-mix(in srgb,var(--bjc-cs-home-accent) 13%,transparent); } /* PLUGIN CIRCUIT — for commercial software/plugin promotion. */ .bjc-cs-home-plugin-circuit .bjc-cs-home-shell { display:grid; grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr); gap:clamp(2rem,6vw,7rem); align-items:center; min-height:620px; } .bjc-cs-circuit-lines { position:absolute; inset:0; pointer-events:none; opacity:.32; } .bjc-cs-circuit-lines span { position:absolute; height:2px; background:var(--bjc-cs-home-accent); transform-origin:left center; } .bjc-cs-circuit-lines span::after { content:""; position:absolute; right:-7px; top:-6px; width:12px; height:12px; border:2px solid var(--bjc-cs-home-accent); border-radius:50%; background:var(--bjc-cs-home-background); } .bjc-cs-circuit-lines span:nth-child(1){width:36%;left:2%;top:20%;transform:rotate(13deg)} .bjc-cs-circuit-lines span:nth-child(2){width:28%;left:9%;bottom:17%;transform:rotate(-18deg)} .bjc-cs-circuit-lines span:nth-child(3){width:29%;right:7%;top:14%;transform:rotate(158deg)} .bjc-cs-home-plugin-circuit .bjc-cs-home-media-wrap { clip-path:polygon(5% 0,100% 0,95% 100%,0 92%); border-radius:0; box-shadow:0 30px 75px rgba(0,0,0,.13); } /* VIDEO PYRAMID — three independent video/image/embed slots. */ .bjc-cs-home-video-pyramid .bjc-cs-home-shell { padding-block:clamp(2.5rem,5vw,5rem); } .bjc-cs-home-video-pyramid .bjc-cs-home-copy { width:min(900px,100%); margin:0 auto 1.8rem; text-align:center; } .bjc-cs-home-video-pyramid .bjc-cs-home-body { margin-inline:auto; } .bjc-cs-home-video-pyramid .bjc-cs-home-actions { justify-content:center; } .bjc-cs-video-pyramid-stage { position:relative; width:min(1180px,100%); margin-inline:auto; padding:22px 0 12px; } .bjc-cs-video-pyramid-stage::before { content:""; position:absolute; inset:10% 5% 0; background:linear-gradient(135deg,color-mix(in srgb,var(--bjc-cs-home-accent) 12%,transparent),transparent 64%); clip-path:polygon(50% 0,100% 100%,0 100%); } .bjc-cs-video-pyramid-top { position:relative; z-index:2; width:min(58%,660px); margin:0 auto -3%; } .bjc-cs-video-pyramid-bottom { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,3vw,3rem); } .bjc-cs-home-video-pyramid .bjc-cs-home-media-wrap { aspect-ratio:16/9; min-height:0; border:6px solid color-mix(in srgb,var(--bjc-cs-home-accent) 11%,transparent); box-shadow:0 22px 50px rgba(0,0,0,.14); } /* BOOK STAGE — single homepage book spotlight. */ /* BOOK FAN — three covers as a theatrical fan, text beneath. */ @media (max-width: 900px) { .bjc-cs-video-pyramid-top { width:74%; margin-bottom:1rem; } } @media (max-width: 767px) { .bjc-cs-home-portal .bjc-cs-home-copy { left:1.7rem; right:1.7rem; } .bjc-cs-video-pyramid-top { width:100%; margin:0 0 1rem; } .bjc-cs-video-pyramid-bottom { grid-template-columns:1fr; } } .bjc-cs-home-soundwave::before { content:"♪"; right:4%; bottom:7%; transform:rotate(9deg); } /* v0.8.1 targeted homepage visual corrections */ /* PORTAL — keep floating copy safely inside the visual frame. */ .bjc-cs-home-portal .bjc-cs-home-copy { left: clamp(3rem, 7vw, 7rem); max-width: calc(100% - clamp(6rem, 14vw, 14rem)); overflow: visible; } .bjc-cs-home-portal .bjc-cs-home-copy, .bjc-cs-home-portal .bjc-cs-home-copy * { box-sizing: border-box; } /* ORBIT — centre media through the middle and fill the circular area. */ .bjc-cs-home-orbit .bjc-cs-home-shell { grid-template-columns: minmax(320px,.9fr) minmax(0,1.1fr); } .bjc-cs-home-orbit .bjc-cs-home-media-wrap { width: min(100%, 620px); aspect-ratio: 1; align-self: center; justify-self: center; display: flex; align-items: center; justify-content: center; } .bjc-cs-home-orbit .bjc-cs-home-copy { align-self: center; text-align: center; } .bjc-cs-home-orbit .bjc-cs-home-body { margin-inline: auto; } .bjc-cs-home-orbit .bjc-cs-home-actions { justify-content: center; } /* RIBBON — true full-browser-width background option. */ .bjc-cs-home-ribbon.bjc-cs-ribbon-full .bjc-cs-home-ribbon-band { left: 50%; right: auto; width: 100vw; transform: translateX(-50%) skewY(-2deg); } /* MONOLITH — media side fills the complete panel height. */ /* VINYL ORBIT — centre the media inside the record motif. */ /* VIDEO PYRAMID — move copy about 50% closer to the stack. */ .bjc-cs-home-video-pyramid .bjc-cs-home-copy { margin-bottom: clamp(.75rem, 1.5vw, 1.5rem) !important; } .bjc-cs-home-video-pyramid .bjc-cs-video-pyramid-stage { margin-top: 0 !important; } /* BOOK STAGE — centre featured book in the arch and shift composition right. */ /* BOOK FAN — bring text closer and fill the media display height. */ @media (max-width: 767px) { .bjc-cs-home-portal .bjc-cs-home-copy { left: 1.5rem; right: 1.5rem; max-width: none; } } /* v0.8.2 structural media-stage corrections */ /* Shared rule for layouts that require media to fill a designed frame. oEmbed output is positioned into the frame rather than allowed to keep its own intrinsic box. */ /* Orbit: the ring and the media now share one centred stage. */ .bjc-cs-home-orbit .bjc-cs-home-shell { grid-template-columns: minmax(360px,1fr) minmax(300px,.9fr); gap: clamp(2rem,5vw,6rem); align-items: center; } .bjc-cs-home-orbit-stage { position: relative; width: min(100%, 650px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark { position: absolute; inset: 0; width: auto; aspect-ratio: auto; left: auto; top: auto; transform: none; } .bjc-cs-home-orbit-stage .bjc-cs-home-media-wrap { width: 68%; aspect-ratio: 1; min-height: 0; border-radius: 50%; z-index: 2; } .bjc-cs-home-orbit-stage .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe { object-fit: cover; } .bjc-cs-home-orbit .bjc-cs-home-copy { text-align:center; } .bjc-cs-home-orbit .bjc-cs-home-body { margin-inline:auto; } .bjc-cs-home-orbit .bjc-cs-home-actions { justify-content:center; } /* Ribbon: breakout the SECTION to viewport width; content remains constrained by .home-shell. */ .bjc-cs-home-ribbon.bjc-cs-ribbon-full { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: visible; } .bjc-cs-home-ribbon.bjc-cs-ribbon-full .bjc-cs-home-ribbon-band { left: 0; right: 0; width: auto; transform: skewY(-2deg); } /* Monolith: real fixed media canvas; embed fills it rather than determining its height. */ /* Vinyl Orbit: record rings and media use one common circular stage. */ /* Book Stage: arch and media share the same visual container, guaranteeing centre alignment. */ /* Book Fan: equal governed frames for all three slots. */ /* v0.8.3 media-centering correction. Videos retain 16:9 geometry and are centred inside decorative stages. Images use the design-specific fit rules below. */ /* Neutralise inherited embed sizing in the affected Home layouts. */ /* Video iframes: preserve 16:9 and centre rather than stretching to a tall frame. */ /* Native video gets the same centred treatment. */ /* ORBIT — media is a centred disc in the middle of the ring system. */ .bjc-cs-home-orbit-stage { display: grid !important; place-items: center !important; } .bjc-cs-home-orbit-stage .bjc-cs-home-media-wrap { position: relative !important; width: 66% !important; aspect-ratio: 1 !important; min-height: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } .bjc-cs-home-orbit-stage .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* RIBBON — full-width background contains the complete visual composition. */ .bjc-cs-home-ribbon.bjc-cs-ribbon-full { padding-block: clamp(1.5rem, 3vw, 3rem); } .bjc-cs-home-ribbon.bjc-cs-ribbon-full .bjc-cs-home-ribbon-band { top: 4%; bottom: 4%; left: 0; right: 0; width: auto; height: auto; transform: skewY(-2deg); } .bjc-cs-home-ribbon.bjc-cs-ribbon-full .bjc-cs-home-shell { position: relative; z-index: 2; padding-block: clamp(2rem, 4vw, 4.5rem); } .bjc-cs-home-ribbon.bjc-cs-ribbon-full .bjc-cs-home-copy { transform: none; } /* MONOLITH — centre a correctly proportioned video vertically in the media half. */ /* VINYL ORBIT — centre media inside the record centre. */ /* BOOK STAGE — centre image/video in the arch instead of filling from the top. */ /* BOOK FAN — equal boxes, no black outline, videos vertically centred. */ /* v0.8.4 targeted homepage visual polish */ /* ORBIT — restore visible ring artwork and enlarge the centre by ~20%. */ .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark { display: block !important; z-index: 1 !important; border: 2px solid color-mix(in srgb, var(--bjc-cs-home-accent) 42%, transparent) !important; box-shadow: inset 0 0 0 20px color-mix(in srgb, var(--bjc-cs-home-accent) 4%, transparent), inset 0 0 0 40px color-mix(in srgb, var(--bjc-cs-home-accent) 3%, transparent); } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::before, .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::after { display:block !important; content:""; position:absolute; border-radius:50%; border:1px solid color-mix(in srgb, var(--bjc-cs-home-accent) 28%, transparent); } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::before { inset:10%; } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::after { inset:24%; } .bjc-cs-home-orbit-stage .bjc-cs-home-media-wrap { width: 79% !important; z-index: 2 !important; } /* CROSSCUT — centre media/caption, remove stray internal red bar, equalise copy padding. */ /* MONOLITH — equal left/right copy padding. */ /* VINYL ORBIT — more convincing vinyl record rim/groove treatment. */ /* BOOK STAGE — media box sizes more naturally around its content. */ /* BOOK FAN — tighter spacing, natural media height, no outline/shadow. */ /* v0.8.5 targeted visual corrections */ /* ORBIT — restore artwork visibly behind the central media. */ .bjc-cs-home-orbit-stage { position:relative !important; isolation:isolate; } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark { position:absolute !important; inset:0 !important; display:block !important; visibility:visible !important; opacity:1 !important; z-index:0 !important; border-radius:50%; border:2px solid color-mix(in srgb,var(--bjc-cs-home-accent) 44%,transparent) !important; background: radial-gradient(circle at center, transparent 0 27%, color-mix(in srgb,var(--bjc-cs-home-accent) 7%,transparent) 27% 28%, transparent 28% 41%, color-mix(in srgb,var(--bjc-cs-home-accent) 6%,transparent) 41% 42%, transparent 42% 100%) !important; box-shadow: inset 0 0 0 18px color-mix(in srgb,var(--bjc-cs-home-accent) 4%,transparent), inset 0 0 0 42px color-mix(in srgb,var(--bjc-cs-home-accent) 3%,transparent) !important; } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::before, .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::after { content:"" !important; display:block !important; position:absolute !important; border-radius:50% !important; border:1px solid color-mix(in srgb,var(--bjc-cs-home-accent) 30%,transparent) !important; } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::before { inset:9% !important; } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::after { inset:22% !important; } .bjc-cs-home-orbit-stage .bjc-cs-home-media-wrap { z-index:2 !important; } /* CROSSCUT — media entirely to the right of the diagonal and caption visible. */ /* VINYL ORBIT — centre media 25% larger and true black-groove record. */ /* BOOK STAGE — keep media entirely inside rounded container, with top padding. */ /* BOOK FAN — remove every inherited border/shadow from media and wrappers. */ /* v0.8.6 targeted visual correction pass */ /* ORBIT — return to thin centre rim with broad background arcs. */ .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark { background:none !important; border:0 !important; box-shadow:none !important; } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::before, .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::after { content:"" !important; display:block !important; position:absolute !important; border-radius:50% !important; border:2px solid color-mix(in srgb,var(--bjc-cs-home-accent) 30%,transparent) !important; } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::before { inset:-16% !important; } .bjc-cs-home-orbit-stage .bjc-cs-home-orbit-mark::after { inset:10% !important; } .bjc-cs-home-orbit-stage .bjc-cs-home-media-wrap { width:79% !important; border:3px solid color-mix(in srgb,var(--bjc-cs-home-accent) 22%,transparent) !important; box-shadow:0 26px 70px rgba(0,0,0,.12) !important; } /* CROSSCUT — force media completely to right of diagonal and preserve caption. */ /* VINYL ORBIT — convincing black vinyl disc with centre media acting as the record label. */ /* BOOK STAGE — media wrapper follows media proportions instead of cropping. */ /* BOOK FAN — remove remaining frame artefacts and pull text much closer. */ /* v0.8.7 final media-wrapper corrections */ /* CROSSCUT The clip is now applied to the OUTER frame, so iframe/video and image are clipped identically by the angled silhouette. */ /* VINYL ORBIT Finer groove texture + moving specular highlight so it reads as a record, not a black outline. */ /* BOOK STAGE New final frame owns all sizing. Images determine frame height naturally. Videos get equal padding on every side. */ /* BOOK FAN Final frame is completely undecorated. Text pulled ~45% closer. */ /* v0.8.8 direct-media / embedded-plugin separation */ /* CROSSCUT — both angled edges clip the actual direct media. Embedded plugin internals are left untouched. */ /* VINYL ORBIT — use the user's real record as the outer annulus. The ring is deliberately broad so the grooves read clearly. */ /* BOOK STAGE — media container follows direct image height. Video gets equal side/bottom padding and double top padding. Do NOT resize images/icons inside embedded plugins. */ /* BOOK FAN — style only the direct media element. Embedded plugin children (e.g. Crabby Hour caption icon) retain their own CSS. */ /* Critical: do not let generic Home media rules enlarge nested plugin icons/images. */ /* v0.8.9 CROSSCUT ONLY — make video extend beneath both angled edges. */ /* v0.8.10 CROSSCUT ONLY Apply the angled shape directly to video/iframe, exactly as required. Keep wrapper overflow visible so captions/content below are not cut off. */ /* Image behaviour remains the known-good angled Crosscut shape. */ /* Video gets the exact same polygon directly on the iframe/video itself. */ /* Anything below the media must remain visible. */ /* v0.8.11 CROSSCUT ONLY Restore the known-good outer parallelogram clip from v0.8.8. Keep the right edge unchanged. Overscan the video beneath the LEFT edge only. */ /* Remove the direct video clipping introduced in v0.8.10. */ /* Images remain untouched inside the already-correct outer frame. */ /* Video: preserve the correct right side and bleed only beneath the left angled cut. */ /* Preserve the caption visibility achieved in v0.8.10. */ /* ========================================================= v0.8.12 CROSSCUT CLEAN REBUILD This design intentionally uses a NEW root class so none of the historical .bjc-cs-home-crosscut patches apply. ========================================================= */ .bjc-cs-home-crosscut-clean { overflow:hidden; } .bjc-cs-home-crosscut-clean .bjc-cs-home-shell { position:relative; display:grid; grid-template-columns:minmax(300px,.78fr) minmax(520px,1.22fr); gap:clamp(5rem,8vw,9rem); align-items:center; min-height:620px; padding-block:clamp(2.5rem,5vw,5rem); } /* Text is kept safely inside its own column. */ .bjc-cs-home-crosscut-clean .bjc-cs-home-copy { position:relative; z-index:2; width:100%; max-width:500px; padding:0; } /* Decorative line sits in the EMPTY GRID GAP, not over the text. */ .bjc-cs-home-crosscut-clean .bjc-cs-home-crosscut-line { position:absolute; z-index:1; left:43.5%; top:-18%; width:2px; height:138%; background:var(--bjc-cs-home-accent); transform:rotate(14deg); transform-origin:center; opacity:.55; pointer-events:none; } .bjc-cs-home-crosscut-clean .bjc-cs-home-crosscut-line::after { content:""; position:absolute; width:14px; height:14px; left:-7px; top:43%; border:2px solid var(--bjc-cs-home-accent); border-radius:50%; background:var(--bjc-cs-home-background); } /* * One common visual frame for BOTH images and videos. * Crucial point: it is a genuine 16:9 box, so YouTube does not * expose its own black player background through a distorted frame. */ .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame { position:relative; z-index:2; width:100%; aspect-ratio:16 / 9; min-height:0; clip-path:polygon(8% 0,100% 0,92% 100%,0 100%); overflow:hidden; background:transparent; } /* Neutralise generic Home media sizing inside Crosscut only. */ .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame > .bjc-cs-home-media-wrap, .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame > .bjc-cs-home-media-wrap > .bjc-cs-media { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; min-height:0; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; overflow:hidden; clip-path:none; box-shadow:none; } /* Direct image: fill the parallelogram exactly. */ .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame > .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) > img { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; object-fit:cover; object-position:center; border:0; border-radius:0; clip-path:none; } /* YouTube / direct video: keep the player itself exactly 16:9 and fill the same common frame. No shifting, overscan or secondary clip-path. */ .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame > .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe, .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame > .bjc-cs-home-media-wrap > .bjc-cs-embed > video { position:absolute !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; aspect-ratio:16 / 9 !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; clip-path:none !important; box-shadow:none !important; background:#000; } /* If an embedded source outputs an ordinary caption after its media, never enlarge or crop it as media. */ .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame figcaption, .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame .wp-caption-text, .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame .bjc-cs-caption { position:static !important; width:auto !important; height:auto !important; min-height:0 !important; max-height:none !important; margin:.75rem 1rem 0 !important; padding:0 !important; overflow:visible !important; clip-path:none !important; } /* Tablet/mobile: return to a simple vertical composition. */ @media (max-width:900px) { .bjc-cs-home-crosscut-clean .bjc-cs-home-shell { grid-template-columns:1fr; gap:2.5rem; min-height:0; } .bjc-cs-home-crosscut-clean .bjc-cs-home-copy { max-width:none; } .bjc-cs-home-crosscut-clean .bjc-cs-home-crosscut-line { left:12%; top:46%; width:76%; height:1px; transform:rotate(-4deg); } .bjc-cs-home-crosscut-clean .bjc-cs-home-crosscut-line::after { left:48%; top:-7px; } .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame { clip-path:polygon(0 4%,100% 0,100% 96%,0 100%); } } /* ========================================================= v0.8.13 VINYL ORBIT CLEAN REBUILD The circular media is the centre of a real vinyl record. The supplied record PNG is used unchanged as the outer disc. Historical Vinyl Orbit rules have been removed. ========================================================= */ /* Decorative music notes retained, but kept separate from the record. */ /* * The stage is the full record diameter. * The centre media is 66.666% of that diameter. * That leaves a real vinyl band 25% of the media diameter * visible on EACH side. */ /* The supplied real record image. */ /* Centre artwork/video: this is the record's label/centre area. */ /* Neutralise generic media box geometry only inside this centre disc. */ /* Direct image fills the circular centre. */ /* Video/embed fills the centre without affecting nested plugin icons. */ /* Caption stays below the centre media if the renderer supplies one. */ /* ========================================================= v0.8.15 BOOK FAN CLEAN REBUILD Historical Book Fan CSS removed. This new root is isolated. ========================================================= */ .bjc-cs-home-book-fan-clean { position:relative; overflow:visible; } .bjc-cs-home-book-fan-clean .bjc-cs-home-shell { min-height:0; padding-block:clamp(2rem,4vw,4rem); } .bjc-cs-book-fan-clean-stage { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:clamp(.8rem,1.8vw,1.6rem); width:min(1000px,94%); margin:0 auto clamp(-1rem,-1.5vw,-.4rem); overflow:visible; } .bjc-cs-book-fan-clean-slot { position:relative; min-width:0; background:transparent; border:0; outline:0; box-shadow:none; filter:none; } .bjc-cs-book-fan-clean-left { transform:rotate(-7deg) translateY(5%); z-index:1; } .bjc-cs-book-fan-clean-centre { transform:translateY(-3%); z-index:3; } .bjc-cs-book-fan-clean-right { transform:rotate(7deg) translateY(5%); z-index:2; } /* One clean undecorated frame per item. */ .bjc-cs-book-fan-clean-frame, .bjc-cs-book-fan-clean-frame > .bjc-cs-home-media-wrap, .bjc-cs-book-fan-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-media { position:relative; display:block; width:100%; height:auto; min-height:0; max-height:none; margin:0; padding:0; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; background:transparent !important; overflow:visible; } /* Direct image: no artificial frame or dark outline. */ .bjc-cs-book-fan-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) > img { position:relative; display:block; width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important; margin:0 auto !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; background:transparent !important; object-fit:contain !important; } /* Direct video/oEmbed: true 16:9, with no plugin-added border/shadow. */ .bjc-cs-book-fan-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-embed { position:relative !important; display:block !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; background:transparent !important; overflow:visible !important; } .bjc-cs-book-fan-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe, .bjc-cs-book-fan-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-embed > video { position:relative !important; display:block !important; width:100% !important; height:auto !important; aspect-ratio:16 / 9 !important; max-width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; background:transparent !important; } /* * IMPORTANT: * The global Home rule makes every descendant image width:100%. * If an oEmbed/plugin places a small icon/image AFTER the iframe * (such as the Crabby Hour crab used with the caption), do not * allow that caption/icon image to become the full width of the slot. */ .bjc-cs-home-book-fan-clean .bjc-cs-embed iframe ~ img, .bjc-cs-home-book-fan-clean .bjc-cs-embed video ~ img, .bjc-cs-home-book-fan-clean .bjc-cs-embed iframe ~ * img, .bjc-cs-home-book-fan-clean .bjc-cs-embed video ~ * img { width:auto !important; height:auto !important; max-width:48px !important; max-height:48px !important; object-fit:contain !important; position:static !important; inset:auto !important; margin:0 .35em !important; padding:0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; filter:none !important; background:transparent !important; vertical-align:middle !important; } /* Keep Book Fan copy close to the fan without overlapping media. */ .bjc-cs-home-book-fan-clean .bjc-cs-home-copy { width:min(900px,100%); margin:0 auto !important; padding-top:clamp(1.2rem,2.2vw,2rem) !important; text-align:center; transform:translateY(0); } .bjc-cs-home-book-fan-clean .bjc-cs-home-body { margin-inline:auto; } .bjc-cs-home-book-fan-clean .bjc-cs-home-actions { justify-content:center; } @media (max-width:900px) { .bjc-cs-book-fan-clean-stage { gap:.75rem; width:96%; } .bjc-cs-home-book-fan-clean .bjc-cs-home-copy { transform:translateY(0); } } @media (max-width:767px) { .bjc-cs-book-fan-clean-stage { grid-template-columns:1fr; gap:1.4rem; width:min(92%,560px); margin-bottom:1.5rem; } .bjc-cs-book-fan-clean-left, .bjc-cs-book-fan-clean-centre, .bjc-cs-book-fan-clean-right { transform:none; } .bjc-cs-home-book-fan-clean .bjc-cs-home-copy { transform:none; } } /* ========================================================= v0.8.17 BOOK STAGE CLEAN REBUILD All historical Book Stage rules removed. ========================================================= */ /* Decorative arch sits behind the media only. */ /* The actual media is always above the arch and visible. */ /* Neutralise generic Home geometry inside Book Stage only. */ /* Direct image must display at its natural aspect ratio. */ /* Video keeps a clean 16:9 frame with the requested larger top padding. */ /* Keep copy in a normal right-hand column. */ /* v0.8.19 Book Stage image containment */ /* ========================================================= v0.8.20 BOOK STAGE — INTRINSIC MEDIA SIZING The media determines the stage height. No fixed media height. ========================================================= */ /* * This wrapper follows the actual media height. * Width is controlled; height is deliberately AUTO. */ /* Outer architectural arch scales with whatever height the frame acquires. */ /* Let the renderer wrappers participate in normal document flow. */ /* * IMAGE: * One dimension only is imposed. Height remains auto, so the * browser preserves the source image's intrinsic aspect ratio. * Works for 16:9, 9:16, square, book portrait, etc. */ /* * VIDEO: * iframe has no reliable intrinsic ratio, so give it 16:9 while * keeping the surrounding stage height automatic. */ /* Do not resize images/icons produced INSIDE a shortcode/embed. */ /* Copy remains an ordinary right-hand column. */ /* ========================================================= v0.8.22 BOOK STAGE — LARGE INTRINSIC STAGE One canonical Book Stage implementation. ========================================================= */ /* * The wrapper follows the media's real aspect ratio. * It is deliberately much larger than previous versions. */ /* Architectural stage grows around the actual media/content height. */ /* Normal-flow media wrappers; no fixed heights. */ /* Images preserve whatever aspect ratio was uploaded: 16:9, 9:16, square, portrait, etc. */ /* Video remains true 16:9 and substantially larger. */ /* * Book Stage is a single-feature presentation. Any ordinary IMG emitted * inside an EMBED after/beside the video is caption/plugin decoration, * not the main media. Hide those images completely so icons such as the * Crabby Hour crab cannot be enlarged by the global Home media rule. * Caption text remains untouched. */ /* Keep textual caption/plugin output compact underneath the video. */ /* Right-hand copy. */ /* ========================================================= v0.8.23 BOOK STAGE — CLEAN LARGE ADAPTIVE STAGE Direct media only. Nested plugin/shortcode output is untouched. ========================================================= */ /* * The frame width is large, but height is AUTO. * Images therefore keep their own ratio (16:9, 9:16, square, portrait). * Video contributes its normal 16:9 height. */ /* Architectural housing scales around the actual media/caption height. */ /* Content Sections' own immediate media wrapper only. */ /* v0.8.25 — media is intentionally housed inside the inner architectural line. */ /* Direct image only — nested shortcode/plugin images are deliberately excluded. */ /* * Embed wrapper: only the immediate iframe/video is sized here. * Any nested HTML/images/icons generated by another shortcode/plugin * remain completely under that plugin's own CSS and JavaScript. */ /* IMPORTANT: no rules at all target .bjc-cs-embed img or nested plugin descendants. */ /* ========================================================= v0.8.26 MONOLITH CLEAN REBUILD Direct media only; nested plugin/caption images are untouched. ========================================================= */ .bjc-cs-home-monolith-clean { position:relative; overflow:hidden; } .bjc-cs-home-monolith-clean .bjc-cs-home-shell { display:grid; grid-template-columns:minmax(360px,.82fr) minmax(520px,1.18fr); gap:0; align-items:stretch; min-height:640px; padding:0; } .bjc-cs-home-monolith-clean .bjc-cs-home-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,6vw,6rem); min-width:0; } .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:640px; padding:clamp(2rem,4vw,4rem); box-sizing:border-box; background:var(--bjc-cs-home-media-background); overflow:visible; } .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media > .bjc-cs-home-media-wrap { position:relative !important; display:block !important; width:100% !important; height:auto !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; overflow:visible !important; } .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media > .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) { position:relative !important; display:block !important; width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media > .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) > img { position:relative !important; display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:560px !important; margin:0 auto !important; padding:0 !important; object-fit:contain !important; object-position:center !important; border:0 !important; outline:0 !important; box-shadow:none !important; } .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media > .bjc-cs-home-media-wrap > .bjc-cs-embed { position:relative !important; display:block !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; overflow:visible !important; } .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media > .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe, .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media > .bjc-cs-home-media-wrap > .bjc-cs-embed > video { position:relative !important; display:block !important; width:100% !important; height:auto !important; aspect-ratio:16 / 9 !important; max-width:100% !important; margin:0 auto !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important; } @media (max-width:900px) { .bjc-cs-home-monolith-clean .bjc-cs-home-shell { grid-template-columns:1fr; min-height:0; } .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media { min-height:420px; padding:2rem; } } /* ========================================================= v0.8.27 VINYL ORBIT — CLEAN CENTRE-CROP IMPLEMENTATION The circular centre is completely covered by direct media. ========================================================= */ /* Circular record-centre media area. */ /* Immediate Content Sections wrapper fills the circular centre. */ /* Direct image fills the circle. */ /* * VIDEO: * A 16:9 rectangle cannot cover a square/circle without cropping. * Height is fixed to the circle; width becomes 16/9 of that height * (177.78%), then the player is centred. The circular wrapper crops * the left/right excess, so the entire centre hole is covered. */ /* Caption/plugin material may exist, but remains clipped by the circular centre. */ /* ========================================================= v0.8.28 VINYL ORBIT — CENTRED EMBED VIEWPORT One canonical Vinyl Orbit implementation. ========================================================= */ .bjc-cs-home-vinyl-orbit-clean { position:relative; overflow:hidden; } .bjc-cs-home-vinyl-orbit-clean .bjc-cs-home-shell { display:grid; grid-template-columns:minmax(320px,.82fr) minmax(520px,1.18fr); gap:clamp(3rem,6vw,7rem); align-items:center; min-height:680px; padding-block:clamp(3rem,6vw,6rem); } .bjc-cs-home-vinyl-orbit-clean .bjc-cs-home-copy { position:relative; z-index:3; max-width:520px; } .bjc-cs-home-vinyl-orbit-clean::before, .bjc-cs-home-vinyl-orbit-clean::after { position:absolute; z-index:0; color:color-mix(in srgb,var(--bjc-cs-home-accent) 15%,transparent); line-height:1; pointer-events:none; } .bjc-cs-home-vinyl-orbit-clean::before { content:"♫"; font-size:clamp(4rem,7vw,7rem); left:3%; top:2%; transform:rotate(-13deg); } .bjc-cs-home-vinyl-orbit-clean::after { content:"♪ ♫ ♪"; font-size:clamp(2.5rem,5vw,5rem); right:2%; top:5%; letter-spacing:.45em; white-space:nowrap; opacity:.75; } .bjc-cs-vinyl-clean-stage { position:relative; z-index:2; width:min(100%,650px); aspect-ratio:1 / 1; margin-inline:auto; } .bjc-cs-vinyl-clean-record { position:absolute; inset:0; background:url("../images/vinyl-record-real.png") center/contain no-repeat; pointer-events:none; z-index:1; } /* Circular centre acts purely as the record-label viewport. */ .bjc-cs-vinyl-clean-media { position:absolute; z-index:2; left:50%; top:50%; width:66.666%; aspect-ratio:1 / 1; transform:translate(-50%,-50%); border-radius:50%; overflow:hidden; background:#000; box-shadow:0 0 0 2px rgba(0,0,0,.58); } /* Content Sections wrapper fills the circular viewport. */ .bjc-cs-vinyl-clean-media > .bjc-cs-home-media-wrap { position:absolute !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; overflow:hidden !important; } /* Direct image fills the centre circle. */ .bjc-cs-vinyl-clean-media > .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; } .bjc-cs-vinyl-clean-media > .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) > img { position:absolute !important; inset:0 !important; display:block !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center !important; border:0 !important; box-shadow:none !important; } /* * EMBED / VIDEO: * Centre the COMPLETE embedded output as one unit. * Do not force it into a square. * The circular parent simply acts as a viewport and hides overflow. */ .bjc-cs-vinyl-clean-media > .bjc-cs-home-media-wrap > .bjc-cs-embed { position:relative !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; width:100% !important; height:auto !important; min-height:0 !important; max-width:none !important; max-height:none !important; margin:auto !important; padding:0 !important; border:0 !important; background:transparent !important; overflow:visible !important; transform:none !important; } /* Direct iframe/video keeps its natural widescreen proportions. */ .bjc-cs-vinyl-clean-media > .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe, .bjc-cs-vinyl-clean-media > .bjc-cs-home-media-wrap > .bjc-cs-embed > video { position:relative !important; display:block !important; width:100% !important; height:auto !important; aspect-ratio:16 / 9 !important; max-width:100% !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important; background:#000 !important; transform:none !important; } /* * Shortcode/plugin embeds may output their own wrapper containing * thumbnail/player + caption. Keep that wrapper centred as a whole. * The circle clips any excess naturally. */ .bjc-cs-vinyl-clean-media > .bjc-cs-home-media-wrap > .bjc-cs-embed > :not(iframe):not(video) { flex:0 0 auto !important; max-width:100% !important; margin-inline:auto !important; } /* The circular viewport is deliberately allowed to hide caption edges. */ @media (max-width:900px) { .bjc-cs-home-vinyl-orbit-clean .bjc-cs-home-shell { grid-template-columns:1fr; gap:2.5rem; min-height:0; } .bjc-cs-home-vinyl-orbit-clean .bjc-cs-home-copy { max-width:none; } .bjc-cs-vinyl-clean-stage { width:min(92vw,620px); } } /* ========================================================= v0.8.29 BOOK STAGE — ADAPTIVE CUT-CORNER FRAME One canonical Book Stage implementation. The decorative frame follows the real media dimensions. ========================================================= */ .bjc-cs-home-book-stage-clean { position:relative; overflow:visible; } .bjc-cs-home-book-stage-clean .bjc-cs-home-shell { display:grid; grid-template-columns:minmax(500px,1.18fr) minmax(320px,.82fr); gap:clamp(2.5rem,5vw,6rem); align-items:center; min-height:620px; padding-block:clamp(2.5rem,4vw,4.5rem); } .bjc-cs-book-stage-clean-visual { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-width:0; padding:clamp(1rem,2vw,2rem); } /* * The frame has NO fixed height. * Its height is created by the image/video/caption inside it. * Therefore the decorative outline automatically follows 16:9, * 9:16, square, portrait and other image ratios. */ .bjc-cs-book-stage-clean-frame { position:relative; z-index:2; display:block; width:min(96%,720px); height:auto; margin:0 auto; padding:clamp(1.2rem,2vw,1.8rem); box-sizing:border-box; background:transparent; border:0; outline:0; box-shadow:none; overflow:visible; } /* * NEW DESIGN: * two offset cut-corner outlines, rather than the old arch. * Both use inset:0 relative to the adaptive frame, so they scale * automatically with whatever media height the frame acquires. */ .bjc-cs-book-stage-clean-frame::before, .bjc-cs-book-stage-clean-frame::after { content:""; position:absolute; pointer-events:none; z-index:-1; box-sizing:border-box; clip-path:polygon( 8% 0, 92% 0, 100% 13%, 100% 87%, 92% 100%, 8% 100%, 0 87%, 0 13% ); } .bjc-cs-book-stage-clean-frame::before { inset:0; border:2px solid color-mix(in srgb,var(--bjc-cs-home-accent) 34%,transparent); background:color-mix(in srgb,var(--bjc-cs-home-accent) 3%,transparent); } .bjc-cs-book-stage-clean-frame::after { inset:clamp(.55rem,1vw,.9rem); border:1px solid color-mix(in srgb,var(--bjc-cs-home-accent) 19%,transparent); background:transparent; } /* Direct Content Sections media wrapper follows normal document flow. */ .bjc-cs-book-stage-clean-frame > .bjc-cs-home-media-wrap { position:relative !important; display:block !important; width:100% !important; height:auto !important; min-width:0 !important; min-height:0 !important; max-width:none !important; max-height:none !important; inset:auto !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; background:transparent !important; overflow:visible !important; } /* Direct image only: preserve source aspect ratio automatically. */ .bjc-cs-book-stage-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) { position:relative !important; display:block !important; width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } .bjc-cs-book-stage-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed) > img { position:relative !important; display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important; inset:auto !important; margin:0 auto !important; padding:0 !important; object-fit:contain !important; object-position:center !important; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important; filter:none !important; opacity:1 !important; visibility:visible !important; } /* Embed wrapper remains normal-flow so its height contributes to the frame. */ .bjc-cs-book-stage-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-embed { position:relative !important; display:block !important; width:100% !important; height:auto !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; overflow:visible !important; } /* Only direct iframe/video is sized. Nested plugin content is untouched. */ .bjc-cs-book-stage-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe, .bjc-cs-book-stage-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-embed > video { position:relative !important; display:block !important; width:100% !important; height:auto !important; aspect-ratio:16 / 9 !important; max-width:100% !important; inset:auto !important; margin:0 auto !important; padding:0 !important; border:0 !important; outline:0 !important; border-radius:0 !important; box-shadow:none !important; } /* Copy remains a normal right-side column. */ .bjc-cs-home-book-stage-clean .bjc-cs-home-copy { position:relative; z-index:2; transform:none; padding:0; } @media (max-width:900px) { .bjc-cs-home-book-stage-clean .bjc-cs-home-shell { grid-template-columns:1fr; gap:2.5rem; min-height:0; } .bjc-cs-book-stage-clean-visual { padding:1rem; } .bjc-cs-book-stage-clean-frame { width:min(96%,720px); } } /* v0.8.30 — native self-hosted Home video baseline. */ /* Book Fan self-hosted video uses the same clean geometry as other direct media. */ /* ========================================================= v0.8.31 HOME MEDIA CONTRACT All Home designs support: Image/GIF, External Video URL, Self-hosted Video, Shortcode/Embed. Nested plugin output is not treated as direct Content Sections media. ========================================================= */ /* Native self-hosted video baseline used by every Home design. */ .bjc-cs-home .bjc-cs-home-media-wrap > .bjc-cs-self-video { position:relative; display:block; width:100%; height:auto; min-width:0; min-height:0; max-width:100%; max-height:none; margin:0; padding:0; border:0; outline:0; box-shadow:none; background:transparent; overflow:visible; } .bjc-cs-home .bjc-cs-home-media-wrap > .bjc-cs-self-video > video { position:relative; display:block; width:100%; height:auto; max-width:100%; max-height:none; margin:0; padding:0; border:0; outline:0; box-shadow:none; background:transparent; } /* * FULL-FRAME DESIGNS * These designs intentionally make direct media fill a designed viewport. * The self-hosted video follows the same geometry as the direct image/oEmbed. */ .bjc-cs-home-portal .bjc-cs-home-media-wrap > .bjc-cs-self-video, .bjc-cs-home-orbit .bjc-cs-home-media-wrap > .bjc-cs-self-video, .bjc-cs-home-video-pyramid .bjc-cs-home-media-wrap > .bjc-cs-self-video { width:100% !important; height:100% !important; min-height:100% !important; overflow:hidden !important; } .bjc-cs-home-portal .bjc-cs-home-media-wrap > .bjc-cs-self-video > video, .bjc-cs-home-orbit .bjc-cs-home-media-wrap > .bjc-cs-self-video > video, .bjc-cs-home-video-pyramid .bjc-cs-home-media-wrap > .bjc-cs-self-video > video { width:100% !important; height:100% !important; min-height:100% !important; object-fit:cover !important; object-position:center !important; } /* Crosscut: native video fills the same clipped parallelogram as other media. */ .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame > .bjc-cs-home-media-wrap > .bjc-cs-self-video { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; overflow:hidden !important; } .bjc-cs-home-crosscut-clean .bjc-cs-crosscut-final-frame > .bjc-cs-home-media-wrap > .bjc-cs-self-video > video { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; object-position:center !important; } /* Monolith: native video stays proportional and is vertically centred by the slab. */ .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media > .bjc-cs-home-media-wrap > .bjc-cs-self-video { width:100% !important; height:auto !important; margin:auto 0 !important; } .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media > .bjc-cs-home-media-wrap > .bjc-cs-self-video > video { width:100% !important; height:auto !important; max-height:560px !important; object-fit:contain !important; object-position:center !important; } /* Vinyl Orbit: native video behaves as centre artwork and completely fills the circle. */ .bjc-cs-vinyl-clean-media > .bjc-cs-home-media-wrap > .bjc-cs-self-video { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; overflow:hidden !important; } .bjc-cs-vinyl-clean-media > .bjc-cs-home-media-wrap > .bjc-cs-self-video > video { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:center !important; } /* Book Fan: native MP4 follows its own aspect ratio like an image. */ .bjc-cs-book-fan-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-self-video, .bjc-cs-book-fan-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-self-video > video { width:100% !important; height:auto !important; max-width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; } /* Book Stage: native video contributes its real aspect-ratio height to the adaptive frame. */ .bjc-cs-book-stage-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-self-video, .bjc-cs-book-stage-clean-frame > .bjc-cs-home-media-wrap > .bjc-cs-self-video > video { position:relative !important; display:block !important; width:100% !important; height:auto !important; max-width:100% !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; } /* * Broadcast, Gallery Wall, Ribbon, Beacon, Soundwave, Equalizer and * Plugin Circuit use their existing media-wrap geometry. The shared * baseline above is sufficient, so no redundant per-design video rule * is required for them. */ /* Each book slot is its own clean presentation frame. */ /* Book imagery is allowed to preserve its own portrait/landscape ratio. */ /* Video slots stay usable if somebody chooses them, although the design is book-first. */ /* Stronger backing panels so pale books do not disappear into the composition. */ /* * Deliberately wider than ordinary Home sections. * This design needs horizontal room for four substantial book covers. */ /* Eyebrow + heading occupy the full top band. */ /* Lower band: compact explanatory copy + generous book stage. */ /* Four books now spread across nearly the entire stage width. */ /* Stronger book backing panel retained from v0.8.35. */ /* Override ordinary Home shell constraints for this wide composition. */ /* * Lower layout scales with the actual available frontend width. * The text has a controlled width; all remaining space belongs to the books. */ /* * No fixed pixel width and no oversized off-screen positioning. * Aspect-ratio makes the whole constellation scale as one unit. */ /* Percentage sizing keeps all four books inside the live frontend stage. */ /* Intermediate desktop: keep four books, simply scale the stage down. */ /* Tablet: copy moves above the books so the constellation gets full width. */ /* Phone: convert to a clean two-column book grid. */ /* * The decorative green field now extends beyond the section and fades * at its top and right edges instead of ending as a visible rectangle. */ /* * Stage is deliberately shallower than v0.8.37. The same available width * therefore produces materially larger book covers without clipping. */ /* Larger than v0.8.37, but still contained inside the stage. */ /* ========================================================= v0.8.45 BOOK CONSTELLATION — CANONICAL Stronger top/right/bottom fades + single-line closing statement. ========================================================= */ .bjc-cs-home-book-constellation { position:relative; width:100%; max-width:none; overflow:hidden; isolation:isolate; } /* * Decorative green field: * stronger feathering at TOP, RIGHT and BOTTOM. * The masks overlap so the field dissolves naturally into the page. */ .bjc-cs-home-book-constellation::before { content:""; position:absolute; top:-14%; right:-10%; bottom:-16%; left:40%; z-index:-4; background: radial-gradient(circle at 55% 55%, color-mix(in srgb,var(--bjc-cs-home-accent) 18%,transparent) 0 9%, transparent 9.5% 100%), radial-gradient(circle at 61% 57%, transparent 0 28%, color-mix(in srgb,var(--bjc-cs-home-accent) 15%,transparent) 28.3% 28.9%, transparent 29.2% 100%), linear-gradient(118deg, color-mix(in srgb,var(--bjc-cs-home-accent) 3%,transparent) 0 17%, color-mix(in srgb,var(--bjc-cs-home-accent) 10%,transparent) 17% 74%, color-mix(in srgb,var(--bjc-cs-home-accent) 4%,transparent) 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.25) 7%, #000 18%, #000 79%, rgba(0,0,0,.55) 88%, transparent 100%), linear-gradient(to right, #000 0, #000 74%, rgba(0,0,0,.75) 84%, rgba(0,0,0,.3) 93%, transparent 100%); -webkit-mask-composite:source-in; mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.25) 7%, #000 18%, #000 79%, rgba(0,0,0,.55) 88%, transparent 100%), linear-gradient(to right, #000 0, #000 74%, rgba(0,0,0,.75) 84%, rgba(0,0,0,.3) 93%, transparent 100%); mask-composite:intersect; pointer-events:none; } .bjc-cs-home-book-constellation .bjc-cs-book-constellation-shell { position:relative; display:block; box-sizing:border-box; width:100%; max-width:none; margin:0; padding:clamp(3rem,5vw,5.5rem) clamp(24px,4vw,72px); overflow:visible; } .bjc-cs-book-constellation-heading { position:relative; z-index:6; width:min(100%,1120px); margin:0 0 clamp(2.2rem,4vw,4rem); padding-left:clamp(.25rem,.6vw,.6rem); } .bjc-cs-book-constellation-heading::before { content:""; position:absolute; left:-1.2rem; top:.15rem; bottom:.25rem; width:3px; background:color-mix(in srgb,var(--bjc-cs-home-accent) 62%,transparent); } .bjc-cs-home-book-constellation .bjc-cs-book-constellation-heading .bjc-cs-home-eyebrow { margin-bottom:.7rem; } .bjc-cs-home-book-constellation .bjc-cs-book-constellation-heading .bjc-cs-home-heading { max-width:18ch; margin:0; line-height:.96; } .bjc-cs-book-constellation-main { position:relative; display:grid; grid-template-columns:clamp(290px,22vw,370px) minmax(0,1fr); gap:clamp(28px,3vw,58px); align-items:center; width:100%; min-width:0; } .bjc-cs-book-constellation-copy { position:relative; z-index:6; width:100%; max-width:370px; padding:clamp(1.2rem,2vw,1.8rem); background:color-mix(in srgb,var(--bjc-cs-home-background) 82%,transparent); border-left:3px solid color-mix(in srgb,var(--bjc-cs-home-accent) 45%,transparent); clip-path:polygon(0 0,96% 0,100% 10%,100% 100%,5% 100%,0 90%); overflow:visible; } .bjc-cs-home-book-constellation .bjc-cs-book-constellation-copy .bjc-cs-home-body, .bjc-cs-home-book-constellation .bjc-cs-book-constellation-copy .bjc-cs-home-note { max-width:none; } /* * Dedicated closing statement: * now a separate full-width row BELOW the copy/books layout. * It cannot disappear behind the book stage and remains visible in editor/live output. */ .bjc-cs-book-constellation-statement-row { position:relative; z-index:12; display:block; width:100%; max-width:none; margin-top:clamp(.75rem,1.5vw,1.5rem); overflow:visible; } .bjc-cs-book-constellation-closing-line { position:relative; z-index:12; display:block; width:100%; max-width:none; margin:0; padding:0; line-height:1.35; white-space:nowrap; overflow:visible; } .bjc-cs-book-constellation-stage { position:relative; box-sizing:border-box; width:100%; max-width:none; min-width:0; aspect-ratio:2.05 / 1; height:auto; margin:0; perspective:1200px; isolation:isolate; overflow:visible; } .bjc-cs-book-constellation-shape { position:absolute; pointer-events:none; z-index:-3; } .bjc-cs-book-constellation-shape-a { inset:5% 1% 7% 5%; background:color-mix(in srgb,var(--bjc-cs-home-accent) 9%,transparent); clip-path:polygon(14% 0,100% 10%,88% 100%,0 82%); transform:rotate(-3deg); } .bjc-cs-book-constellation-shape-b { left:7%; right:1%; top:14%; bottom:2%; border:2px solid color-mix(in srgb,var(--bjc-cs-home-accent) 31%,transparent); clip-path:polygon(6% 0,94% 0,100% 18%,92% 100%,8% 100%,0 18%); transform:rotate(2deg); } .bjc-cs-book-constellation-orbit { position:absolute; z-index:-2; left:11%; right:2%; top:7%; bottom:5%; border:1px solid color-mix(in srgb,var(--bjc-cs-home-accent) 35%,transparent); border-radius:50%; transform:rotate(-7deg); } .bjc-cs-book-constellation-orbit::before, .bjc-cs-book-constellation-orbit::after { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--bjc-cs-home-accent); opacity:.58; } .bjc-cs-book-constellation-orbit::before { left:9%; top:20%; } .bjc-cs-book-constellation-orbit::after { right:11%; bottom:14%; } .bjc-cs-book-constellation-book { position:absolute; box-sizing:border-box; width:24%; transform-origin:center bottom; transition:transform .22s ease; } .bjc-cs-book-constellation-book:hover { z-index:9; transform:translateY(-2%) rotate(0deg) scale(1.025); } .bjc-cs-book-constellation-book-1 { left:.5%; top:18%; z-index:2; transform:rotate(-8deg) translateY(3%); } .bjc-cs-book-constellation-book-2 { left:25%; top:2%; z-index:4; transform:rotate(-2.5deg); } .bjc-cs-book-constellation-book-3 { right:25%; top:2%; z-index:5; transform:rotate(2.5deg); } .bjc-cs-book-constellation-book-4 { right:.5%; top:18%; z-index:3; transform:rotate(8deg) translateY(3%); } .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap { position:relative; display:block; box-sizing:border-box; width:100%; height:auto; margin:0; padding:clamp(.45rem,.65vw,.7rem); background: linear-gradient( 145deg, color-mix(in srgb,var(--bjc-cs-home-accent) 17%,#d8d8d8), color-mix(in srgb,var(--bjc-cs-home-accent) 8%,#c7c7c7) ); border:1px solid color-mix(in srgb,var(--bjc-cs-home-accent) 38%,#888); box-shadow:0 22px 42px rgba(0,0,0,.22),0 4px 12px rgba(0,0,0,.12); overflow:hidden; } .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(0,0,0,.06)); } .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed):not(.bjc-cs-self-video), .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap > .bjc-cs-embed, .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap > .bjc-cs-self-video { position:relative; z-index:1; display:block; width:100%; height:auto; margin:0; padding:0; border:0; background:transparent; } .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed):not(.bjc-cs-self-video) > img, .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap > .bjc-cs-self-video > video, .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe, .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap > .bjc-cs-embed > video { display:block; width:100%; max-width:100%; height:auto; margin:0; padding:0; border:0; box-shadow:none; } .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap > .bjc-cs-media:not(.bjc-cs-embed):not(.bjc-cs-self-video) > img { object-fit:contain; } .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap > .bjc-cs-embed > iframe, .bjc-cs-book-constellation-book .bjc-cs-home-media-wrap > .bjc-cs-embed > video { aspect-ratio:16 / 9; } .bjc-cs-home-book-constellation .bjc-cs-book-constellation-link { display:block; width:100%; height:auto; color:inherit; text-decoration:none; border:0; outline-offset:4px; } .bjc-cs-home-book-constellation .bjc-cs-book-constellation-link > .bjc-cs-home-media-wrap { width:100%; } .bjc-cs-home-book-constellation .bjc-cs-book-constellation-link:focus-visible { outline:2px solid var(--bjc-cs-home-accent); } @media (max-width:1180px) { .bjc-cs-home-book-constellation .bjc-cs-book-constellation-shell { padding-inline:clamp(20px,3vw,36px); } .bjc-cs-book-constellation-main { grid-template-columns:clamp(270px,27vw,330px) minmax(0,1fr); gap:clamp(22px,2.5vw,36px); } .bjc-cs-book-constellation-book { width:23.5%; } } @media (max-width:920px) { .bjc-cs-book-constellation-main { grid-template-columns:1fr; } .bjc-cs-book-constellation-copy { max-width:720px; } .bjc-cs-book-constellation-stage { width:100%; aspect-ratio:1.8 / 1; } .bjc-cs-book-constellation-book { width:24%; } } @media (max-width:650px) { .bjc-cs-home-book-constellation .bjc-cs-book-constellation-shell { padding-inline:16px; } .bjc-cs-book-constellation-heading { margin-bottom:2rem; } .bjc-cs-home-book-constellation .bjc-cs-book-constellation-heading .bjc-cs-home-heading { max-width:none; } .bjc-cs-book-constellation-copy { max-width:none; } .bjc-cs-book-constellation-statement-row, .bjc-cs-book-constellation-closing-line { width:100%; max-width:100%; white-space:normal; } .bjc-cs-book-constellation-stage { height:auto; aspect-ratio:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; padding:1rem 0; } .bjc-cs-book-constellation-shape, .bjc-cs-book-constellation-orbit { display:none; } .bjc-cs-book-constellation-book { position:relative; inset:auto; width:auto; transform:none; } } /* ========================================================= v0.9.4 HOME SECTION SPACING + OPTIONAL TOP MARKER Real-world page-flow refinement. Decorative sections should fit their content closely; extra breathing room can be added outside the widget by the page builder when desired. ========================================================= */ .bjc-cs-home-shell > .bjc-cs-top-marker { position:relative; z-index:20; grid-column:1 / -1; width:100%; margin:0 0 clamp(.65rem,1.25vw,1.1rem); padding:0; } .bjc-cs-top-marker { display:block; box-sizing:border-box; line-height:1.2; } .bjc-cs-top-marker-left { text-align:left; } .bjc-cs-top-marker-center { text-align:center; } .bjc-cs-top-marker-right { text-align:right; } .bjc-cs-top-marker-image { display:block; width:90px; max-width:100%; height:auto; margin-bottom:.35rem; object-fit:contain; } .bjc-cs-top-marker-left .bjc-cs-top-marker-image { margin-left:0; margin-right:auto; } .bjc-cs-top-marker-center .bjc-cs-top-marker-image { margin-left:auto; margin-right:auto; } .bjc-cs-top-marker-right .bjc-cs-top-marker-image { margin-left:auto; margin-right:0; } .bjc-cs-top-marker-text { margin:0; padding:0; font-size:.78rem; font-weight:600; letter-spacing:.045em; line-height:1.3; color:inherit; } /* Remove unnecessary built-in vertical dead space from ordinary Home designs. */ .bjc-cs-home:not(.bjc-cs-home-portal) .bjc-cs-home-shell { min-height:0; padding-top:clamp(1rem,2vw,1.8rem); padding-bottom:clamp(1rem,2vw,1.8rem); } .bjc-cs-home .bjc-cs-home-media-wrap { min-height:0; } /* Designs that previously carried especially large top/bottom breathing room. */ .bjc-cs-home-gallery-wall .bjc-cs-home-shell, .bjc-cs-home-beacon .bjc-cs-home-shell, .bjc-cs-home-video-pyramid .bjc-cs-home-shell, .bjc-cs-home-book-fan-clean .bjc-cs-home-shell, .bjc-cs-home-book-stage-clean .bjc-cs-home-shell, .bjc-cs-home-vinyl-orbit-clean .bjc-cs-home-shell { padding-top:clamp(1rem,2vw,2rem); padding-bottom:clamp(1rem,2vw,2rem); } /* Content, not a historical minimum height, now determines these sections. */ .bjc-cs-home-orbit .bjc-cs-home-shell, .bjc-cs-home-soundwave .bjc-cs-home-shell, .bjc-cs-home-equalizer .bjc-cs-home-shell, .bjc-cs-home-plugin-circuit .bjc-cs-home-shell, .bjc-cs-home-book-stage-clean .bjc-cs-home-shell { min-height:0; } /* Monolith retains a useful media presence without forcing a 640px section. */ .bjc-cs-home-monolith-clean .bjc-cs-home-shell { min-height:0; } .bjc-cs-home-monolith-clean .bjc-cs-home-monolith-media { min-height:clamp(280px,32vw,420px); } /* Keep Book Constellation's approved composition, only reduce its outer dead space. */ .bjc-cs-home-book-constellation .bjc-cs-book-constellation-shell { padding-top:clamp(1.5rem,3vw,2.75rem); padding-bottom:clamp(1.5rem,3vw,2.75rem); } /* Portal is intentionally image-led; only make room for an optional marker. */ .bjc-cs-home-portal .bjc-cs-top-marker { position:absolute; top:clamp(.75rem,1.5vw,1.25rem); left:clamp(.75rem,1.5vw,1.25rem); right:clamp(.75rem,1.5vw,1.25rem); width:auto; z-index:30; margin:0; } @media (max-width:767px) { .bjc-cs-home:not(.bjc-cs-home-portal) .bjc-cs-home-shell { padding-top:.85rem; padding-bottom:.85rem; } .bjc-cs-home-shell > .bjc-cs-top-marker { margin-bottom:.65rem; } }