/* B Living blocks – front-end. The hero reuses the theme's Bootstrap + style.css rules; these are only the adjustments needed because the block lives inside page content rather than directly under . */ /* front-page.php gets its height from `html, body, .masterhead { height:100% }`. Inside the_content() there is no unbroken chain of percentage heights, so the hero is pinned to the viewport explicitly. Higher specificity than `.masterhead` so it wins regardless of stylesheet order. */ header.bliving-hero { height: 100vh; position: relative; } /* Neutralise any theme/editor content wrapper padding around the hero. */ header.bliving-hero.alignfull { margin-left: 0; margin-right: 0; max-width: none; } /* the_post_thumbnail() emits width/height attributes. The theme caps width with .mw-100 but never releases the height, so a thumbnail whose intrinsic size differs from the others renders stretched. Keep every block image proportional regardless of what an editor uploads. */ .wp-block-bliving-projects-grid img, .wp-block-bliving-text-media img, .wp-block-bliving-services img, .wp-block-bliving-video-carousel img { height: auto; } /* Multi-item carousel: view.js clones the following items into each slide, and the slide must lay them out in a row so .carousel-inner's overflow clips to the visible pair. Matches the live site's computed layout. */ .carousell .carousel-item.active, .carousell .carousel-item-next, .carousell .carousel-item-prev { display: flex; flex-wrap: nowrap; } /* Photothèque lightbox */ .bliving-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(10, 12, 30, .94); overflow: hidden; /* The drag owns the gesture: without this the browser pans or swipe-navigates. */ touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; } .bliving-lightbox[hidden] { display: none; } .bliving-lightbox.is-dragging { cursor: grabbing; } /* Three viewport-wide cells; JS parks the track on the middle one. */ .bliving-lightbox__track { position: absolute; top: 0; left: 0; width: 300%; height: 100%; display: flex; will-change: transform; } .bliving-lightbox__track.is-animating { transition: transform .28s cubic-bezier(.22, .61, .36, 1); } .bliving-lightbox__cell { flex: 0 0 33.3333%; display: flex; align-items: center; justify-content: center; } .bliving-lightbox__img { max-width: 88vw; max-height: 84vh; object-fit: contain; -webkit-user-drag: none; } .bliving-lightbox button { position: absolute; z-index: 2; background: transparent; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; padding: 12px 20px; } .bliving-lightbox__close { top: 10px; right: 18px; font-size: 40px; } /* Positioned explicitly: these used to be centred by the overlay's flex static position, which the track replaced. */ .bliving-lightbox__prev, .bliving-lightbox__next { top: 50%; transform: translateY(-50%); } .bliving-lightbox__prev { left: 8px; } .bliving-lightbox__next { right: 8px; } .bliving-lightbox__count { position: absolute; z-index: 2; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; opacity: .75; margin: 0; font-size: 14px; } @media (prefers-reduced-motion: reduce) { .bliving-lightbox__track.is-animating { transition: none; } } .pt__card { cursor: pointer; } /* ---- Lazy YouTube embed ------------------------------------------------ Skeleton while the poster loads, then the poster, then the real iframe on click. Keeps the page from booting two dozen third-party players. */ .bliving-yt { position: relative; width: 100%; height: var(--bliving-yt-h, 210px); overflow: hidden; background: #e9ecf2; cursor: pointer; } .bliving-yt__poster { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .35s ease; } .bliving-yt.is-ready .bliving-yt__poster { opacity: 1; } /* Shimmer, shown only while loading. */ .bliving-yt.is-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e9ecf2 0%, #f5f7fa 50%, #e9ecf2 100%); background-size: 200% 100%; animation: bliving-shimmer 1.2s ease-in-out infinite; } @keyframes bliving-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .bliving-yt.is-error::after { animation: none; background: #e9ecf2; } .bliving-yt__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 68px; height: 48px; border: 0; border-radius: 12px; background: rgba(28, 28, 28, .72); cursor: pointer; padding: 0; transition: background .2s ease, opacity .35s ease; opacity: 0; z-index: 2; } .bliving-yt.is-ready .bliving-yt__play { opacity: 1; } .bliving-yt:hover .bliving-yt__play { background: #f00; } .bliving-yt__play span { display: block; width: 0; height: 0; margin: 0 auto; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; } .bliving-yt iframe { width: 100%; height: 100%; border: 0; display: block; } @media (prefers-reduced-motion: reduce) { .bliving-yt.is-loading::after { animation: none; } .bliving-yt__poster, .bliving-yt__play { transition: none; } } /* ---- Project tile frame ------------------------------------------------ The offset navy frame used to be baked into every thumbnail, so swapping a photo meant editing the file in Photoshop first. It is drawn here instead: drop in any plain photo and the frame follows. Geometry matches the originals — a solid rectangle the same size as the photo, shifted up and left by ~12px (measured 12-15px on a 434px thumb). */ .wp-block-bliving-projects-grid img.bliving-framed { display: block; width: calc(100% - 12px); margin: 12px 0 0 12px; box-shadow: -12px -12px 0 0 #26326e; /* Lock the tile proportion (the original thumbnails were all ~421x300) and crop to fill. Without this a 16:9 photo makes its tile shorter than the rest of the row — which is the whole thing we are trying to avoid. */ aspect-ratio: 421 / 300; height: auto; object-fit: cover; object-position: center; } @media (max-width: 767px) { .wp-block-bliving-projects-grid img.bliving-framed { width: calc(100% - 8px); margin: 8px 0 0 8px; box-shadow: -8px -8px 0 0 #26326e; } } /* Hero image fit. The block passes its imageFit setting as a custom property rather than as object-fit directly: an inline style beats any stylesheet rule, which would make the phone override below impossible without !important. */ header.bliving-hero .img-slide1 { object-fit: var(--bl-hero-fit, cover); object-position: var(--bl-hero-pos, 50% 50%); } /* On phones