/* Homepage hero video in place of the big picture (inc/hero-media.php). */ .hero-photo .sanam-hero-video { position: relative; width: 100%; line-height: 0; } .hero-photo .sanam-hero-video__el { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: transparent; } /* Rounded corners only, with a soft shadow. */ .hero-photo .sanam-hero-video--rounded .sanam-hero-video__el { border-radius: clamp(20px, 2.6vw, 34px); box-shadow: 0 30px 60px rgb(20 6 8 / .35); } /* Soft: rounded, and every edge fades out into the hero's background (no hard rectangle). */ .hero-photo .sanam-hero-video--soft .sanam-hero-video__el { border-radius: clamp(28px, 4vw, 56px); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; } /* Engraved: the picture sits in a hollow carved into the background. A layer on top casts the inner shadow from the top edge and catches a faint light on the bottom lip. */ .hero-photo .sanam-hero-video--engraved { --sanam-engrave-r: clamp(20px, 2.6vw, 34px); border-radius: var(--sanam-engrave-r); box-shadow: 0 1px 0 rgb(255 248 239 / .10), 0 -1px 0 rgb(0 0 0 / .35); } .hero-photo .sanam-hero-video--engraved :is(.sanam-hero-video__el, .sanam-hero-carousel__stage) { border-radius: var(--sanam-engrave-r); } .hero-photo .sanam-hero-video--engraved::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--sanam-engrave-r); pointer-events: none; box-shadow: inset 0 22px 34px -6px rgb(20 6 8 / .75), inset 0 5px 10px rgb(20 6 8 / .55), inset 10px 0 22px -10px rgb(20 6 8 / .45), inset -10px 0 22px -10px rgb(20 6 8 / .45), inset 0 -14px 22px -14px rgb(20 6 8 / .45), inset 0 -1px 0 rgb(255 248 239 / .14), inset 0 0 0 1px rgb(20 6 8 / .45); } @media (max-width: 767px) { .hero-photo .sanam-hero-video__el { aspect-ratio: 4 / 3; } } /* ---------- Carousel (pictures that change on their own) ---------- */ .hero-photo .sanam-hero-carousel__stage { position: relative; overflow: hidden; aspect-ratio: 16 / 10; } /* Beats the hero's own picture rules (which size every in .hero-photo). */ .elementor-18 .elementor-element.elementor-element-79712149 .hero-photo img.sanam-hero-carousel__slide, .hero-photo .sanam-hero-carousel__slide { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; opacity: 0; transform: scale(1.06) !important; transition: opacity 1.1s ease, transform 6s ease-out !important; } .elementor-18 .elementor-element.elementor-element-79712149 .hero-photo img.sanam-hero-carousel__slide.is-active, .hero-photo .sanam-hero-carousel__slide.is-active { opacity: 1; transform: scale(1) !important; } /* Video items in the carousel: same place and cross-fade as the pictures. */ html body .hero-photo video.sanam-hero-carousel__slide { position: absolute !important; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; opacity: 0; transition: opacity 1.1s ease !important; background: transparent; } html body .hero-photo video.sanam-hero-carousel__slide.is-active { opacity: 1; } .hero-photo .sanam-hero-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; line-height: 1; } .hero-photo .sanam-hero-carousel__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: rgb(255 248 239 / .35); cursor: pointer; transition: width .35s ease, background .35s ease; } .hero-photo .sanam-hero-carousel__dot.is-active { width: 26px; background: #e4aa58; } .hero-photo .sanam-hero-carousel__dot:focus-visible { outline: 2px solid #e4aa58; outline-offset: 3px; } @media (max-width: 767px) { .hero-photo .sanam-hero-carousel__stage { aspect-ratio: 4 / 3; } } /* Phones: the hero picture / video / carousel is almost full width, with a small gap on each side and soft corners, so it reads as part of the hero, not as a band splitting the page. */ @media (max-width: 767px) { html body .elementor-18 .elementor-element.elementor-element-79712149 .elementor-element.hero-photo { --sanam-hero-gap: 12px; width: calc(100vw - 2 * var(--sanam-hero-gap)) !important; max-width: calc(100vw - 2 * var(--sanam-hero-gap)) !important; --container-widget-width: calc(100vw - 2 * var(--sanam-hero-gap)) !important; margin-inline: calc(50% - 50vw + var(--sanam-hero-gap)) !important; align-self: center !important; } html body .elementor-18 .elementor-element.elementor-element-79712149 .hero-photo :is(.elementor-widget-container, .sanam-hero-carousel, .sanam-hero-carousel__stage, .sanam-hero-video) { width: 100% !important; max-width: 100% !important; margin: 0 !important; } html body .elementor-18 .elementor-element.elementor-element-79712149 .hero-photo img:not(.sanam-hero-carousel__slide) { width: 100% !important; max-width: 100% !important; height: auto !important; } html body .elementor-18 .elementor-element.elementor-element-79712149 .hero-photo :is(img:not(.sanam-hero-carousel__slide), .sanam-hero-carousel__stage, .sanam-hero-video__el, .sanam-hero-video--engraved) { border-radius: 18px !important; } html body .hero-photo .sanam-hero-video--engraved { --sanam-engrave-r: 18px; } html body .hero-photo .sanam-hero-video--engraved::after { border-radius: 18px !important; } } /* Carousel: pictures change on their own, no dots under them. */ html body .hero-photo .sanam-hero-carousel__dots { display: none !important; }