.elementor-498 .elementor-element.elementor-element-ac5fe57{--display:flex;}.elementor-498 .elementor-element.elementor-element-5a17db0{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-498 .elementor-element.elementor-element-196bb54{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-498 .elementor-element.elementor-element-4e47ed2{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-498 .elementor-element.elementor-element-ac5124e{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-498 .elementor-element.elementor-element-10c4376{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-498 .elementor-element.elementor-element-3961a2f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-498 .elementor-element.elementor-element-8d35115{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-498 .elementor-element.elementor-element-ac5fe57{--width:100%;}.elementor-498 .elementor-element.elementor-element-5a17db0{--width:100%;}.elementor-498 .elementor-element.elementor-element-196bb54{--width:100%;}.elementor-498 .elementor-element.elementor-element-4e47ed2{--width:100%;}.elementor-498 .elementor-element.elementor-element-ac5124e{--width:100%;}.elementor-498 .elementor-element.elementor-element-10c4376{--width:100%;}.elementor-498 .elementor-element.elementor-element-3961a2f{--width:100%;}.elementor-498 .elementor-element.elementor-element-8d35115{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-5a17db0 *//* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 01 — A WORLD OF POSSIBILITIES CSS DESKTOP v1.0 ELEMENTOR ID: #wh-printables-hero ELEMENTOR CLASSES: wh-printables-hero-section wh-theme-light SCOPE: Desktop only (min-width: 1025px) TABLET / MOBILE / JS: Pending ========================================================= */ @media (min-width: 1025px) { /* ======================================================= 01 — ELEMENTOR CONTAINER ======================================================== */ #wh-printables-hero { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; isolation: isolate; } #wh-printables-hero .elementor-widget-html, #wh-printables-hero .elementor-widget-container { width: 100%; } /* ======================================================= 02 — GLOBAL HERO FOUNDATION ======================================================== */ #wh-printables-hero .whp-hero { --whp-ink: #20212a; --whp-cream: #fff9f0; --whp-coral: #f57760; --whp-amber: #f5b942; --whp-teal: #159e9b; position: relative; display: flex; align-items: center; width: 100%; min-height: max(760px, 100svh); padding: 130px 0 90px; background: radial-gradient( ellipse at 77% 42%, rgba(255, 221, 170, 0.38), transparent 49% ), linear-gradient( 135deg, #fffdf8 0%, #fff8ed 55%, #fff1df 100% ); color: var(--whp-ink); overflow: hidden; isolation: isolate; } #wh-printables-hero .whp-hero *, #wh-printables-hero .whp-hero *::before, #wh-printables-hero .whp-hero *::after { box-sizing: border-box; } /* ======================================================= 03 — ATMOSPHERE / SOFT GLOWS ======================================================== */ #wh-printables-hero .whp-hero__atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } #wh-printables-hero .whp-hero__glow { position: absolute; display: block; border-radius: 50%; filter: blur(65px); opacity: 0.55; pointer-events: none; } #wh-printables-hero .whp-hero__glow--amber { width: 490px; height: 490px; right: 8%; top: 13%; background: rgba(245, 185, 66, 0.25); } #wh-printables-hero .whp-hero__glow--coral { width: 390px; height: 390px; right: -8%; bottom: -20%; background: rgba(245, 119, 96, 0.21); } #wh-printables-hero .whp-hero__glow--teal { width: 340px; height: 340px; left: -13%; bottom: -20%; background: rgba(21, 158, 155, 0.12); } /* ======================================================= 04 — MAIN EDITORIAL GRID ======================================================== */ #wh-printables-hero .whp-hero__container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); align-items: center; width: min(1440px, 92%); min-height: 590px; margin: 0 auto; gap: clamp(24px, 3vw, 60px); } /* ======================================================= 05 — CONTENT ======================================================== */ #wh-printables-hero .whp-hero__content { position: relative; z-index: 5; max-width: 650px; } #wh-printables-hero .whp-hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 750; letter-spacing: 0.19em; line-height: 1.5; text-transform: uppercase; color: #966a39; } #wh-printables-hero .whp-hero__eyebrow::before { content: ""; display: block; width: 29px; height: 2px; border-radius: 4px; background: var(--whp-coral); } #wh-printables-hero .whp-hero__title { margin: 0 0 28px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(64px, 5.25vw, 94px); font-weight: 800; line-height: 0.99; letter-spacing: -0.065em; color: var(--whp-ink); } #wh-printables-hero .whp-hero__title-accent { display: block; width: fit-content; max-width: 100%; padding: 0.04em 0.04em 0.12em 0; background: linear-gradient( 110deg, #ed7859 0%, #e99a50 55%, #e6b05d 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-hero .whp-hero__description { max-width: 475px; margin: 0 0 35px; font-family: "Inter", sans-serif; font-size: clamp(16px, 1.13vw, 18px); font-weight: 400; line-height: 1.85; letter-spacing: -0.012em; color: #65616a; } /* ======================================================= 06 — PREMIUM PRIMARY CTA ======================================================== */ #wh-printables-hero .whp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } #wh-printables-hero .whp-hero__button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 59px; padding: 17px 26px; border: 1px solid transparent; border-radius: 999px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; overflow: hidden; transition: background-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease, color 0.35s ease; } #wh-printables-hero .whp-hero__button--primary { background: var(--whp-coral); color: #fff; box-shadow: 0 10px 25px rgba(245, 119, 96, 0.17), 0 4px 9px rgba(245, 119, 96, 0.08); } #wh-printables-hero .whp-hero__button--primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 20%, rgba(255, 255, 255, 0.24) 50%, transparent 80% ); transform: translateX(-130%); transition: transform 0.65s ease; pointer-events: none; } #wh-printables-hero .whp-hero__button svg { position: relative; flex: none; transition: transform 0.3s ease; } #wh-printables-hero .whp-hero__button:hover { transform: translateY(-3px); background: #e86b54; color: #fff; box-shadow: 0 15px 30px rgba(245, 119, 96, 0.23); } #wh-printables-hero .whp-hero__button:hover::before { transform: translateX(130%); } #wh-printables-hero .whp-hero__button:hover svg { transform: translateX(5px); } #wh-printables-hero .whp-hero__button:focus-visible { outline: 3px solid var(--whp-teal); outline-offset: 5px; } /* ======================================================= 07 — MICROCOPY ======================================================== */ #wh-printables-hero .whp-hero__microcopy { display: flex; align-items: center; gap: 13px; margin-top: 38px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; line-height: 1.6; color: #8d8580; } #wh-printables-hero .whp-hero__microcopy-line { flex: none; display: block; width: 24px; height: 1px; background: #d9a678; } /* ======================================================= 08 — VISUAL STAGE / DEPTH ======================================================== */ #wh-printables-hero .whp-hero__visual { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 620px; perspective: 1300px; } #wh-printables-hero .whp-hero__stage { position: relative; width: min(100%, 620px); height: 580px; transform-style: preserve-3d; } /* ======================================================= 09 — ORBITAL RINGS ======================================================== */ #wh-printables-hero .whp-hero__stage-ring { position: absolute; z-index: 0; width: 490px; height: 490px; max-width: 100%; top: 50%; left: 50%; border: 1px solid rgba(205, 154, 110, 0.28); border-radius: 50%; transform: translate(-50%, -50%) rotate(-24deg) scaleY(0.77); pointer-events: none; } #wh-printables-hero .whp-hero__stage-ring--inner { width: 355px; height: 355px; border-style: dashed; border-color: rgba(21, 158, 155, 0.20); transform: translate(-50%, -50%) rotate(23deg) scaleY(0.87); } /* ======================================================= 10 — FLOATING PAPER BASE ======================================================== */ #wh-printables-hero .whp-hero__sheet { position: absolute; width: 240px; height: 310px; padding: 9px; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: 0 35px 65px rgba(65, 47, 39, 0.17), 0 12px 25px rgba(65, 47, 39, 0.09), 0 2px 5px rgba(65, 47, 39, 0.04); transform-style: preserve-3d; backface-visibility: hidden; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.7s ease; will-change: transform; } #wh-printables-hero .whp-hero__sheet-inner { width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: #fff8ef; } #wh-printables-hero .whp-hero__sheet-inner svg { display: block; width: 100%; height: 100%; } /* ======================================================= 11 — INDIVIDUAL SHEET COMPOSITION ======================================================== */ #wh-printables-hero .whp-hero__sheet--one { z-index: 3; top: 125px; left: 185px; transform: translateZ(90px) rotate(-7deg) rotateY(-8deg); } #wh-printables-hero .whp-hero__sheet--two { z-index: 2; top: 55px; left: 75px; transform: translateZ(15px) rotate(-24deg) rotateY(12deg); } #wh-printables-hero .whp-hero__sheet--three { z-index: 1; top: 160px; left: 320px; transform: translateZ(-30px) rotate(18deg) rotateY(-13deg); } /* ======================================================= 12 — WOW HOVER / CREATIVE FAN Pure CSS, no JS required ======================================================== */ #wh-printables-hero .whp-hero__stage:hover .whp-hero__sheet--one { transform: translate3d(0, -26px, 130px) rotate(-3deg) rotateY(-5deg); } #wh-printables-hero .whp-hero__stage:hover .whp-hero__sheet--two { transform: translate3d(-29px, -18px, 35px) rotate(-31deg) rotateY(9deg); } #wh-printables-hero .whp-hero__stage:hover .whp-hero__sheet--three { transform: translate3d(30px, -13px, -10px) rotate(25deg) rotateY(-9deg); } #wh-printables-hero .whp-hero__stage:hover .whp-hero__sheet { box-shadow: 0 46px 75px rgba(65, 47, 39, 0.19), 0 15px 30px rgba(65, 47, 39, 0.09); } /* ======================================================= 13 — ORBIT ELEMENTS ======================================================== */ #wh-printables-hero .whp-hero__orbit { position: absolute; z-index: 4; display: block; border-radius: 50%; pointer-events: none; } #wh-printables-hero .whp-hero__orbit--one { width: 26px; height: 26px; top: 110px; right: 95px; background: var(--whp-teal); box-shadow: 0 7px 16px rgba(21, 158, 155, 0.24); } #wh-printables-hero .whp-hero__orbit--two { width: 14px; height: 14px; bottom: 95px; left: 95px; background: var(--whp-coral); } #wh-printables-hero .whp-hero__orbit--three { width: 11px; height: 11px; top: 65px; left: 270px; background: var(--whp-amber); } /* ======================================================= 14 — DECORATIVE SPARKS ======================================================== */ #wh-printables-hero .whp-hero__spark { position: absolute; z-index: 5; display: block; width: 43px; height: 43px; filter: drop-shadow( 0 6px 8px rgba(91, 64, 41, 0.08) ); pointer-events: none; } #wh-printables-hero .whp-hero__spark--one { top: 35px; right: 155px; transform: rotate(19deg); } #wh-printables-hero .whp-hero__spark--two { width: 30px; height: 30px; bottom: 83px; right: 125px; transform: rotate(-17deg); } /* ======================================================= 15 — SCROLL CUE ======================================================== */ #wh-printables-hero .whp-hero__scroll-cue { position: absolute; z-index: 4; bottom: 28px; left: 50%; display: flex; align-items: center; gap: 12px; transform: translateX(-50%); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 750; letter-spacing: 0.2em; line-height: 1.4; color: #978a7d; pointer-events: none; } #wh-printables-hero .whp-hero__scroll-cue svg { color: var(--whp-coral); } /* ======================================================= 16 — INTERMEDIATE DESKTOP ADJUSTMENTS ======================================================== */ @media (max-width: 1399px) { #wh-printables-hero .whp-hero__container { width: 94%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } #wh-printables-hero .whp-hero__title { font-size: clamp(58px, 5vw, 76px); } #wh-printables-hero .whp-hero__stage { transform: scale(0.86); transform-origin: center; flex: none; width: 620px; } #wh-printables-hero .whp-hero__visual { overflow: visible; } } @media (min-width: 1025px) and (max-width: 1160px) { #wh-printables-hero .whp-hero__title { font-size: 57px; } #wh-printables-hero .whp-hero__stage { transform: scale(0.72); } #wh-printables-hero .whp-hero__description { font-size: 16px; } } /* ======================================================= 17 — REDUCED MOTION ACCESSIBILITY ======================================================== */ @media (prefers-reduced-motion: reduce) { #wh-printables-hero .whp-hero__sheet, #wh-printables-hero .whp-hero__button, #wh-printables-hero .whp-hero__button svg, #wh-printables-hero .whp-hero__button::before { transition: none; } #wh-printables-hero .whp-hero__stage:hover .whp-hero__sheet--one { transform: translateZ(90px) rotate(-7deg) rotateY(-8deg); } #wh-printables-hero .whp-hero__stage:hover .whp-hero__sheet--two { transform: translateZ(15px) rotate(-24deg) rotateY(12deg); } #wh-printables-hero .whp-hero__stage:hover .whp-hero__sheet--three { transform: translateZ(-30px) rotate(18deg) rotateY(-13deg); } } } /* ========================================================= END — PRINTABLES SECTION 01 / CSS DESKTOP v1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 01 — A WORLD OF POSSIBILITIES CSS TABLET + MOBILE v1.0 ELEMENTOR ID: #wh-printables-hero ELEMENTOR CLASSES: wh-printables-hero-section wh-theme-light TABLET: 768px – 1024px MOBILE: 0px – 767px DESKTOP: APPROVED / UNTOUCHED HTML: UNCHANGED ========================================================= */ /* ========================================================= 01 — SHARED RESPONSIVE FOUNDATION ========================================================= */ @media (max-width: 1024px) { #wh-printables-hero { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; isolation: isolate; } #wh-printables-hero .elementor-widget-html, #wh-printables-hero .elementor-widget-container { width: 100%; max-width: 100%; } #wh-printables-hero .whp-hero { --whp-ink: #20212a; --whp-cream: #fff9f0; --whp-coral: #f57760; --whp-amber: #f5b942; --whp-teal: #159e9b; position: relative; display: block; width: 100%; background: radial-gradient( ellipse at 70% 60%, rgba(255, 221, 170, 0.28), transparent 60% ), linear-gradient( 140deg, #fffdf8 0%, #fff8ed 65%, #fff1df 100% ); color: var(--whp-ink); overflow: hidden; isolation: isolate; } #wh-printables-hero .whp-hero *, #wh-printables-hero .whp-hero *::before, #wh-printables-hero .whp-hero *::after { box-sizing: border-box; } /* ATMOSPHERE */ #wh-printables-hero .whp-hero__atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } #wh-printables-hero .whp-hero__glow { position: absolute; display: block; border-radius: 50%; filter: blur(55px); opacity: 0.45; pointer-events: none; } #wh-printables-hero .whp-hero__glow--amber { width: 360px; height: 360px; right: -10%; top: 34%; background: rgba(245,185,66,0.22); } #wh-printables-hero .whp-hero__glow--coral { width: 290px; height: 290px; right: -15%; bottom: 0; background: rgba(245,119,96,0.16); } #wh-printables-hero .whp-hero__glow--teal { width: 250px; height: 250px; left: -18%; bottom: 10%; background: rgba(21,158,155,0.12); } /* EDITORIAL STRUCTURE */ #wh-printables-hero .whp-hero__container { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; } #wh-printables-hero .whp-hero__content { position: relative; z-index: 5; width: 100%; } /* TYPOGRAPHY */ #wh-printables-hero .whp-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.15em; line-height: 1.5; text-transform: uppercase; color: #966a39; } #wh-printables-hero .whp-hero__eyebrow::before { content: ""; display: block; flex: none; width: 24px; height: 2px; background: var(--whp-coral); } #wh-printables-hero .whp-hero__title { padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; letter-spacing: -0.065em; color: var(--whp-ink); } #wh-printables-hero .whp-hero__title-accent { display: block; width: fit-content; max-width: 100%; padding: 0.04em 0.04em 0.12em 0; background: linear-gradient( 110deg, #ed7859 0%, #e99a50 55%, #e6b05d 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-hero .whp-hero__description { font-family: "Inter", sans-serif; font-weight: 400; letter-spacing: -0.012em; color: #65616a; } /* PRIMARY CTA */ #wh-printables-hero .whp-hero__actions { display: flex; align-items: center; flex-wrap: wrap; } #wh-printables-hero .whp-hero__button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 54px; padding: 16px 23px; background: var(--whp-coral); color: #ffffff; border: 1px solid transparent; border-radius: 999px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; text-decoration: none; box-shadow: 0 9px 23px rgba(245,119,96,0.17); -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #wh-printables-hero .whp-hero__button svg { display: block; flex: none; width: 19px; height: 19px; } #wh-printables-hero .whp-hero__button:focus-visible { outline: 3px solid var(--whp-teal); outline-offset: 4px; } /* MICROCOPY */ #wh-printables-hero .whp-hero__microcopy { display: flex; align-items: center; gap: 11px; font-family: "Inter", sans-serif; font-weight: 500; line-height: 1.6; color: #8d8580; } #wh-printables-hero .whp-hero__microcopy-line { display: block; flex: none; width: 23px; height: 1px; background: #d9a678; } /* VISUAL FOUNDATION */ #wh-printables-hero .whp-hero__visual { position: relative; z-index: 2; display: block; width: 100%; perspective: 1300px; pointer-events: none; } #wh-printables-hero .whp-hero__stage { position: absolute; width: 620px; height: 580px; top: 50%; left: 50%; transform-origin: center center; transform-style: preserve-3d; } /* ORBITAL RINGS */ #wh-printables-hero .whp-hero__stage-ring { position: absolute; z-index: 0; width: 490px; height: 490px; top: 50%; left: 50%; border: 1px solid rgba(205,154,110,0.28); border-radius: 50%; transform: translate(-50%,-50%) rotate(-24deg) scaleY(0.77); } #wh-printables-hero .whp-hero__stage-ring--inner { width: 355px; height: 355px; border-style: dashed; border-color: rgba(21,158,155,0.20); transform: translate(-50%,-50%) rotate(23deg) scaleY(0.87); } /* PAPER BASE */ #wh-printables-hero .whp-hero__sheet { position: absolute; width: 240px; height: 310px; padding: 9px; background: #ffffff; border: 1px solid rgba(255,255,255,0.9); border-radius: 8px; box-shadow: 0 30px 55px rgba(65,47,39,0.16), 0 10px 22px rgba(65,47,39,0.08); transform-style: preserve-3d; backface-visibility: hidden; } #wh-printables-hero .whp-hero__sheet-inner { width: 100%; height: 100%; overflow: hidden; border-radius: 3px; background: #fff8ef; } #wh-printables-hero .whp-hero__sheet-inner svg { display: block; width: 100%; height: 100%; } /* PAPER POSITIONS */ #wh-printables-hero .whp-hero__sheet--one { z-index: 3; top: 125px; left: 185px; transform: translateZ(90px) rotate(-7deg); } #wh-printables-hero .whp-hero__sheet--two { z-index: 2; top: 55px; left: 75px; transform: translateZ(15px) rotate(-24deg); } #wh-printables-hero .whp-hero__sheet--three { z-index: 1; top: 160px; left: 320px; transform: translateZ(-30px) rotate(18deg); } /* DECORATIVE ELEMENTS */ #wh-printables-hero .whp-hero__orbit { position: absolute; z-index: 4; display: block; border-radius: 50%; } #wh-printables-hero .whp-hero__orbit--one { width: 26px; height: 26px; top: 110px; right: 95px; background: var(--whp-teal); } #wh-printables-hero .whp-hero__orbit--two { width: 14px; height: 14px; bottom: 95px; left: 95px; background: var(--whp-coral); } #wh-printables-hero .whp-hero__orbit--three { width: 11px; height: 11px; top: 65px; left: 270px; background: var(--whp-amber); } #wh-printables-hero .whp-hero__spark { position: absolute; z-index: 5; display: block; width: 43px; height: 43px; } #wh-printables-hero .whp-hero__spark--one { top: 35px; right: 155px; transform: rotate(19deg); } #wh-printables-hero .whp-hero__spark--two { width: 30px; height: 30px; bottom: 83px; right: 125px; transform: rotate(-17deg); } /* SCROLL CUE */ #wh-printables-hero .whp-hero__scroll-cue { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 750; letter-spacing: 0.16em; color: #978a7d; pointer-events: none; } #wh-printables-hero .whp-hero__scroll-cue svg { color: var(--whp-coral); } } /* ========================================================= 02 — TABLET 768px – 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { #wh-printables-hero .whp-hero { min-height: 0; padding: 145px 0 65px; } #wh-printables-hero .whp-hero__container { gap: 0; } #wh-printables-hero .whp-hero__content { width: min(680px, 86%); margin: 0 auto; text-align: center; } #wh-printables-hero .whp-hero__eyebrow { justify-content: center; margin-bottom: 22px; font-size: 10px; } #wh-printables-hero .whp-hero__title { margin: 0 0 24px; font-size: clamp(58px, 8vw, 78px); line-height: 1.02; } #wh-printables-hero .whp-hero__title-accent { margin-left: auto; margin-right: auto; } #wh-printables-hero .whp-hero__description { max-width: 570px; margin: 0 auto 29px; font-size: 16px; line-height: 1.8; } #wh-printables-hero .whp-hero__actions { justify-content: center; } #wh-printables-hero .whp-hero__microcopy { justify-content: center; margin-top: 25px; font-size: 12px; } /* COMPACT EDITORIAL GALLERY */ #wh-printables-hero .whp-hero__visual { height: 475px; margin-top: 10px; } #wh-printables-hero .whp-hero__stage { transform: translate(-50%,-50%) scale(0.76); } #wh-printables-hero .whp-hero__scroll-cue { bottom: 26px; left: 50%; transform: translateX(-50%); } } /* ========================================================= 03 — MOBILE 0px – 767px ========================================================= */ @media (max-width: 767px) { #wh-printables-hero .whp-hero { min-height: 0; padding: 120px 0 46px; } #wh-printables-hero .whp-hero__container { gap: 0; } #wh-printables-hero .whp-hero__content { width: calc(100% - 42px); max-width: 520px; margin: 0 auto; text-align: left; } #wh-printables-hero .whp-hero__eyebrow { margin-bottom: 20px; font-size: 9px; letter-spacing: 0.12em; } #wh-printables-hero .whp-hero__eyebrow::before { width: 18px; } #wh-printables-hero .whp-hero__title { margin: 0 0 23px; font-size: clamp(44px, 11.6vw, 68px); line-height: 1.03; letter-spacing: -0.06em; overflow-wrap: normal; } #wh-printables-hero .whp-hero__title-accent { max-width: 100%; } #wh-printables-hero .whp-hero__description { max-width: 450px; margin: 0 0 26px; font-size: 15px; line-height: 1.75; } /* MOBILE CTA */ #wh-printables-hero .whp-hero__actions { width: 100%; } #wh-printables-hero .whp-hero__button { min-height: 54px; padding: 15px 22px; gap: 16px; font-size: 12.5px; } #wh-printables-hero .whp-hero__button:active { background: #e86b54; transform: scale(0.985); } #wh-printables-hero .whp-hero__microcopy { margin-top: 24px; font-size: 11px; } /* MOBILE GALLERY */ #wh-printables-hero .whp-hero__visual { height: clamp(290px, 85vw, 390px); margin-top: 12px; } #wh-printables-hero .whp-hero__stage { transform: translate(-50%,-50%) scale(0.52); } /* SCROLL CUE */ #wh-printables-hero .whp-hero__scroll-cue { position: relative; bottom: auto; left: auto; width: fit-content; margin: 0 auto; transform: none; font-size: 9px; } } /* ========================================================= 04 — SMALL MOBILE Up to 390px ========================================================= */ @media (max-width: 390px) { #wh-printables-hero .whp-hero { padding-top: 112px; } #wh-printables-hero .whp-hero__content { width: calc(100% - 36px); } #wh-printables-hero .whp-hero__eyebrow { font-size: 8px; letter-spacing: 0.09em; } #wh-printables-hero .whp-hero__title { font-size: clamp(40px, 11.5vw, 46px); } #wh-printables-hero .whp-hero__description { font-size: 14px; } #wh-printables-hero .whp-hero__visual { height: 285px; } #wh-printables-hero .whp-hero__stage { transform: translate(-50%,-50%) scale(0.44); } } /* ========================================================= 05 — TOUCH DEVICES / ACCESSIBILITY ========================================================= */ @media (hover: none) and (max-width: 1024px) { #wh-printables-hero .whp-hero__sheet { transition: none; } #wh-printables-hero .whp-hero__button { transition: none; } } @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-printables-hero .whp-hero *, #wh-printables-hero .whp-hero *::before, #wh-printables-hero .whp-hero *::after { animation: none !important; transition: none !important; } } /* ========================================================= END — PRINTABLES SECTION 01 / CSS TABLET + MOBILE v1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 01 — MOBILE WOW v1.1 Ambient floating paper animation MOBILE ONLY: max-width 767px Desktop / Tablet: UNTOUCHED ========================================================= */ @media (max-width: 767px) { /* PAPER 01 — FRONT */ #wh-printables-hero .whp-hero__sheet--one { animation: whp-mobile-float-one 5.5s ease-in-out infinite; } /* PAPER 02 — LEFT */ #wh-printables-hero .whp-hero__sheet--two { animation: whp-mobile-float-two 6.7s ease-in-out infinite; } /* PAPER 03 — RIGHT */ #wh-printables-hero .whp-hero__sheet--three { animation: whp-mobile-float-three 6.1s ease-in-out infinite; } } /* ========================================================= MOBILE FLOAT KEYFRAMES ========================================================= */ @keyframes whp-mobile-float-one { 0%, 100% { transform: translate3d(0, 0, 90px) rotate(-7deg); } 50% { transform: translate3d(0, -11px, 90px) rotate(-4deg); } } @keyframes whp-mobile-float-two { 0%, 100% { transform: translate3d(0, 0, 15px) rotate(-24deg); } 50% { transform: translate3d(-7px, -14px, 15px) rotate(-27deg); } } @keyframes whp-mobile-float-three { 0%, 100% { transform: translate3d(0, 0, -30px) rotate(18deg); } 50% { transform: translate3d(9px, -10px, -30px) rotate(21deg); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (max-width: 767px) and (prefers-reduced-motion: reduce) { #wh-printables-hero .whp-hero__sheet { animation: none !important; } } /* ========================================================= END — MOBILE WOW v1.1 ========================================================= *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-196bb54 *//* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 02 — FOLLOW YOUR CURIOSITY THE DISCOVERY CANVAS CSS DESKTOP v1.0 ELEMENTOR CSS ID: #wh-printables-discovery ELEMENTOR CSS CLASSES: wh-printables-discovery-section wh-theme-light DESKTOP: min-width 1025px TABLET / MOBILE: PENDING SECTION 01: UNTOUCHED ========================================================= */ @media (min-width: 1025px) { /* ======================================================= 01 — ELEMENTOR CONTAINER ======================================================== */ #wh-printables-discovery { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; isolation: isolate; } #wh-printables-discovery .elementor-widget-html, #wh-printables-discovery .elementor-widget-container { width: 100%; max-width: 100%; } /* ======================================================= 02 — SECTION FOUNDATION ======================================================== */ #wh-printables-discovery .whp-discovery { --whpd-ink: #20212a; --whpd-cream: #fffaf2; --whpd-coral: #f57760; --whpd-amber: #f5b942; --whpd-teal: #159e9b; position: relative; width: 100%; padding: clamp(110px, 10vw, 160px) 0 115px; background: radial-gradient( ellipse at 4% 50%, rgba(245, 185, 66, 0.075), transparent 38% ), linear-gradient( 180deg, #fffaf2 0%, #fffdf9 65%, #fff9f0 100% ); color: var(--whpd-ink); overflow: hidden; isolation: isolate; } #wh-printables-discovery .whp-discovery *, #wh-printables-discovery .whp-discovery *::before, #wh-printables-discovery .whp-discovery *::after { box-sizing: border-box; } /* ======================================================= 03 — BACKGROUND ATMOSPHERE ======================================================== */ #wh-printables-discovery .whp-discovery__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-discovery .whp-discovery__glow { position: absolute; display: block; border-radius: 50%; filter: blur(80px); } #wh-printables-discovery .whp-discovery__glow--one { width: 470px; height: 470px; top: 20%; left: -18%; background: rgba(245, 185, 66, 0.12); } #wh-printables-discovery .whp-discovery__glow--two { width: 420px; height: 420px; bottom: -15%; right: -12%; background: rgba(21, 158, 155, 0.09); } /* ======================================================= 04 — CONTENT WIDTH ======================================================== */ #wh-printables-discovery .whp-discovery__container { position: relative; z-index: 2; width: min(1440px, 90%); margin: 0 auto; } /* ======================================================= 05 — EDITORIAL HEADER ======================================================== */ #wh-printables-discovery .whp-discovery__header { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: end; column-gap: clamp(35px, 5vw, 90px); margin-bottom: 66px; } #wh-printables-discovery .whp-discovery__heading-group { min-width: 0; } #wh-printables-discovery .whp-discovery__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 750; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase; color: #997442; } #wh-printables-discovery .whp-discovery__eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--whpd-coral); } #wh-printables-discovery .whp-discovery__title { margin: 0; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(64px, 5.9vw, 94px); font-weight: 800; line-height: 1.02; letter-spacing: -0.065em; color: var(--whpd-ink); } #wh-printables-discovery .whp-discovery__title-accent { display: block; width: fit-content; max-width: 100%; padding: 0.03em 0.04em 0.1em 0; background: linear-gradient( 110deg, #ed7859 0%, #e8a458 55%, #dcb35d 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-discovery .whp-discovery__intro { max-width: 420px; padding-bottom: 13px; } #wh-printables-discovery .whp-discovery__intro p { margin: 0; font-family: "Inter", sans-serif; font-size: clamp(16px, 1.25vw, 18px); font-weight: 400; line-height: 1.9; color: #777079; } /* ======================================================= 06 — ASYMMETRIC DISCOVERY CANVAS ======================================================== */ #wh-printables-discovery .whp-discovery__canvas { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); grid-template-rows: repeat(2, minmax(0, 285px)); gap: 24px; width: 100%; } /* ======================================================= 07 — SHARED PANEL SYSTEM ======================================================== */ #wh-printables-discovery .whp-discovery__panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 26px; isolation: isolate; box-shadow: 0 16px 40px rgba(35, 28, 29, 0.055), 0 2px 8px rgba(35, 28, 29, 0.025); transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.55s ease; } #wh-printables-discovery .whp-discovery__panel--one { grid-column: 1; grid-row: 1 / 3; background: #ddebe4; color: #20212a; } #wh-printables-discovery .whp-discovery__panel--two { grid-column: 2; grid-row: 1; background: #292932; color: #ffffff; } #wh-printables-discovery .whp-discovery__panel--three { grid-column: 2; grid-row: 2; background: #f8e6d4; color: #20212a; } /* ======================================================= 08 — ARTWORK FOUNDATION ======================================================== */ #wh-printables-discovery .whp-discovery__panel-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-discovery .whp-discovery__panel-art > svg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.7s ease; transform-origin: center center; } /* A subtle gradient keeps the copy legible */ #wh-printables-discovery .whp-discovery__panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 0deg, rgba(18, 24, 27, 0.52) 0%, rgba(18, 24, 27, 0.12) 29%, transparent 70% ); opacity: 0; pointer-events: none; transition: opacity 0.55s ease; } #wh-printables-discovery .whp-discovery__panel--two::after { background: linear-gradient( 0deg, rgba(10, 10, 18, 0.82) 0%, rgba(10, 10, 18, 0.15) 50%, transparent 90% ); opacity: 1; } /* ======================================================= 09 — PANEL CONTENT ======================================================== */ #wh-printables-discovery .whp-discovery__panel-content { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; left: 38px; right: 38px; bottom: 33px; } #wh-printables-discovery .whp-discovery__panel-index { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 750; letter-spacing: 0.17em; line-height: 1.4; color: inherit; opacity: 0.85; } #wh-printables-discovery .whp-discovery__panel-content h3 { max-width: 95%; margin: 0 0 11px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(26px, 2.4vw, 36px); font-weight: 750; letter-spacing: -0.045em; line-height: 1.1; color: inherit; } #wh-printables-discovery .whp-discovery__panel-content p { max-width: 360px; margin: 0; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 450; line-height: 1.65; color: inherit; opacity: 0.84; } #wh-printables-discovery .whp-discovery__panel--one .whp-discovery__panel-content { left: 48px; right: 48px; bottom: 45px; } #wh-printables-discovery .whp-discovery__panel--one .whp-discovery__panel-content h3 { font-size: clamp(36px, 3.15vw, 49px); } /* ======================================================= 10 — ARROW DECORATION ======================================================== */ #wh-printables-discovery .whp-discovery__panel-arrow { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid currentColor; font-family: "Inter", sans-serif; font-size: 24px; font-weight: 400; line-height: 1; opacity: 0.85; transition: transform 0.4s ease, background-color 0.4s ease, color 0.4s ease; } /* ======================================================= 11 — FEATURED PANEL DECORATION ======================================================== */ #wh-printables-discovery .whp-discovery__art-orbit { position: absolute; z-index: 1; top: 13%; right: 12%; width: 190px; height: 190px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; transform: rotate(-20deg) scaleY(0.73); } #wh-printables-discovery .whp-discovery__art-spark { position: absolute; z-index: 2; width: 18px; height: 18px; top: 18%; right: 30%; background: #ffffff; clip-path: polygon( 50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39% ); } /* ======================================================= 12 — WOW: CREATIVE PANEL LIFT ======================================================== */ #wh-printables-discovery .whp-discovery__panel:hover { transform: translateY(-9px); box-shadow: 0 35px 65px rgba(35, 28, 29, 0.13), 0 8px 20px rgba(35, 28, 29, 0.06); } #wh-printables-discovery .whp-discovery__panel:hover .whp-discovery__panel-art > svg { transform: scale(1.095) rotate(-1.5deg); filter: saturate(1.08); } #wh-printables-discovery .whp-discovery__panel--three:hover .whp-discovery__panel-art > svg { transform: scale(1.095) rotate(2deg); } #wh-printables-discovery .whp-discovery__panel--one:hover .whp-discovery__art-orbit { animation: whpd-orbit-drift 7s linear infinite; } #wh-printables-discovery .whp-discovery__panel--one:hover .whp-discovery__art-spark { animation: whpd-spark-pulse 2s ease-in-out infinite; } /* ======================================================= 13 — WOW: EDITORIAL REVEAL ======================================================== */ #wh-printables-discovery .whp-discovery__panel:hover::after { opacity: 0.10; } #wh-printables-discovery .whp-discovery__panel--two:hover::after { opacity: 1; } #wh-printables-discovery .whp-discovery__panel:hover .whp-discovery__panel-arrow { transform: translate(4px, -4px); } /* ======================================================= 14 — WOW: GALLERY FOCUS ======================================================== */ @media (hover: hover) { #wh-printables-discovery .whp-discovery__canvas:hover .whp-discovery__panel:not(:hover) { filter: saturate(0.88); } #wh-printables-discovery .whp-discovery__panel { transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.55s ease, filter 0.5s ease; } } /* ======================================================= 15 — CLOSING MESSAGE ======================================================== */ #wh-printables-discovery .whp-discovery__closing { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 66px; } #wh-printables-discovery .whp-discovery__closing-line { width: clamp(45px, 7vw, 110px); height: 1px; background: linear-gradient( 90deg, transparent, rgba(166, 144, 122, 0.50) ); } #wh-printables-discovery .whp-discovery__closing-line:last-child { transform: rotate(180deg); } #wh-printables-discovery .whp-discovery__closing p { max-width: 530px; margin: 0; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 450; line-height: 1.8; color: #81777a; text-align: center; } /* ======================================================= 16 — SMALL DESKTOP ADJUSTMENTS ======================================================== */ @media (max-width: 1279px) { #wh-printables-discovery .whp-discovery__canvas { grid-template-rows: repeat(2, minmax(0, 265px)); gap: 18px; } #wh-printables-discovery .whp-discovery__panel-content { left: 27px; right: 27px; bottom: 26px; } #wh-printables-discovery .whp-discovery__panel--one .whp-discovery__panel-content { left: 35px; right: 35px; bottom: 35px; } #wh-printables-discovery .whp-discovery__panel-content h3 { font-size: 27px; } } /* ======================================================= 17 — REDUCED MOTION ======================================================== */ @media (prefers-reduced-motion: reduce) { #wh-printables-discovery .whp-discovery__panel, #wh-printables-discovery .whp-discovery__panel-art > svg, #wh-printables-discovery .whp-discovery__panel-arrow { transition: none !important; } #wh-printables-discovery .whp-discovery__panel:hover { transform: none; } #wh-printables-discovery .whp-discovery__panel:hover .whp-discovery__panel-art > svg { transform: none; } #wh-printables-discovery .whp-discovery__art-orbit, #wh-printables-discovery .whp-discovery__art-spark { animation: none !important; } } } /* ========================================================= 18 — WOW KEYFRAMES ========================================================= */ @keyframes whpd-orbit-drift { 0% { transform: rotate(-20deg) scaleY(0.73); } 100% { transform: rotate(340deg) scaleY(0.73); } } @keyframes whpd-spark-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: 0.65; } } /* ========================================================= END — PRINTABLES SECTION 02 / CSS DESKTOP v1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 02 — FOLLOW YOUR CURIOSITY THE DISCOVERY CANVAS CSS TABLET + MOBILE + WOW v1.0 ELEMENTOR ID: #wh-printables-discovery ELEMENTOR CLASSES: wh-printables-discovery-section wh-theme-light TABLET: 768px - 1024px MOBILE: 0px - 767px DESKTOP APPROVED / UNTOUCHED HTML / SVG UNCHANGED ========================================================= */ /* ========================================================= 01 — SHARED RESPONSIVE FOUNDATION ========================================================= */ @media (max-width: 1024px) { /* ELEMENTOR CONTAINER */ #wh-printables-discovery { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; isolation: isolate; } #wh-printables-discovery .elementor-widget-html, #wh-printables-discovery .elementor-widget-container { width: 100%; max-width: 100%; } /* SECTION FOUNDATION */ #wh-printables-discovery .whp-discovery { --whpd-ink: #20212a; --whpd-cream: #fffaf2; --whpd-coral: #f57760; --whpd-amber: #f5b942; --whpd-teal: #159e9b; position: relative; width: 100%; background: radial-gradient( ellipse at 5% 45%, rgba(245,185,66,0.075), transparent 42% ), linear-gradient( 180deg, #fffaf2 0%, #fffdf9 65%, #fff9f0 100% ); color: var(--whpd-ink); overflow: hidden; isolation: isolate; } #wh-printables-discovery .whp-discovery *, #wh-printables-discovery .whp-discovery *::before, #wh-printables-discovery .whp-discovery *::after { box-sizing: border-box; } /* ATMOSPHERE */ #wh-printables-discovery .whp-discovery__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-discovery .whp-discovery__glow { position: absolute; display: block; border-radius: 50%; filter: blur(65px); opacity: 0.65; } #wh-printables-discovery .whp-discovery__glow--one { width: 330px; height: 330px; top: 10%; left: -24%; background: rgba(245,185,66,0.13); } #wh-printables-discovery .whp-discovery__glow--two { width: 300px; height: 300px; bottom: 0; right: -20%; background: rgba(21,158,155,0.10); } /* CONTENT CONTAINER */ #wh-printables-discovery .whp-discovery__container { position: relative; z-index: 2; width: min(100% - 48px, 900px); margin: 0 auto; } /* EDITORIAL HEADER */ #wh-printables-discovery .whp-discovery__header { display: flex; flex-direction: column; align-items: flex-start; } #wh-printables-discovery .whp-discovery__heading-group { min-width: 0; width: 100%; } #wh-printables-discovery .whp-discovery__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.15em; line-height: 1.5; text-transform: uppercase; color: #997442; } #wh-printables-discovery .whp-discovery__eyebrow::before { content: ""; display: block; flex: none; width: 24px; height: 2px; background: var(--whpd-coral); } #wh-printables-discovery .whp-discovery__title { padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; line-height: 1.03; letter-spacing: -0.06em; color: var(--whpd-ink); } #wh-printables-discovery .whp-discovery__title-accent { display: block; width: fit-content; max-width: 100%; padding: 0.03em 0.04em 0.1em 0; background: linear-gradient( 110deg, #ed7859 0%, #e8a458 55%, #dcb35d 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-discovery .whp-discovery__intro p { margin: 0; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.8; color: #777079; } /* DISCOVERY CANVAS */ #wh-printables-discovery .whp-discovery__canvas { position: relative; display: grid; width: 100%; } /* PANEL FOUNDATION */ #wh-printables-discovery .whp-discovery__panel { position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; border-radius: 22px; box-shadow: 0 15px 35px rgba(35,28,29,0.07), 0 3px 9px rgba(35,28,29,0.03); } #wh-printables-discovery .whp-discovery__panel--one { background: #ddebe4; color: #20212a; } #wh-printables-discovery .whp-discovery__panel--two { background: #292932; color: #ffffff; } #wh-printables-discovery .whp-discovery__panel--three { background: #f8e6d4; color: #20212a; } /* ARTWORK */ #wh-printables-discovery .whp-discovery__panel-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-discovery .whp-discovery__panel-art > svg { display: block; width: 100%; height: 100%; transform-origin: center center; animation: whpd-responsive-art-drift 9s ease-in-out infinite alternate; } /* DIFFERENT ART RHYTHMS */ #wh-printables-discovery .whp-discovery__panel--two .whp-discovery__panel-art > svg { animation-duration: 11s; animation-delay: -3s; } #wh-printables-discovery .whp-discovery__panel--three .whp-discovery__panel-art > svg { animation-duration: 10s; animation-delay: -5s; } /* CONTENT CONTRAST */ #wh-printables-discovery .whp-discovery__panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 0deg, rgba(255,250,242,0.87) 0%, rgba(255,250,242,0.30) 27%, transparent 65% ); pointer-events: none; } #wh-printables-discovery .whp-discovery__panel--two::after { background: linear-gradient( 0deg, rgba(10,10,18,0.87) 0%, rgba(10,10,18,0.35) 34%, transparent 80% ); } /* PANEL COPY */ #wh-printables-discovery .whp-discovery__panel-content { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; } #wh-printables-discovery .whp-discovery__panel-index { display: inline-flex; align-items: center; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.15em; line-height: 1.4; color: inherit; opacity: 0.85; } #wh-printables-discovery .whp-discovery__panel-content h3 { margin: 0; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 750; line-height: 1.12; letter-spacing: -0.045em; color: inherit; } #wh-printables-discovery .whp-discovery__panel-content p { margin: 0; font-family: "Inter", sans-serif; font-weight: 450; line-height: 1.6; color: inherit; } /* DECORATIVE ARROW */ #wh-printables-discovery .whp-discovery__panel-arrow { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1; opacity: 0.75; } /* FEATURED ORBIT */ #wh-printables-discovery .whp-discovery__art-orbit { position: absolute; z-index: 1; width: 165px; height: 165px; top: 12%; right: 14%; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%; animation: whpd-responsive-orbit 18s linear infinite; } #wh-printables-discovery .whp-discovery__art-spark { position: absolute; z-index: 2; width: 17px; height: 17px; top: 19%; right: 29%; background: #ffffff; clip-path: polygon( 50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39% ); animation: whpd-responsive-spark 3.5s ease-in-out infinite; } /* CLOSING MESSAGE */ #wh-printables-discovery .whp-discovery__closing { display: flex; align-items: center; justify-content: center; gap: 18px; } #wh-printables-discovery .whp-discovery__closing-line { flex: 1; max-width: 85px; height: 1px; background: rgba(166,144,122,0.40); } #wh-printables-discovery .whp-discovery__closing p { margin: 0; max-width: 460px; font-family: "Inter", sans-serif; font-weight: 450; line-height: 1.75; color: #81777a; text-align: center; } } /* ========================================================= 02 — TABLET 768px – 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { #wh-printables-discovery .whp-discovery { padding: 95px 0 90px; } #wh-printables-discovery .whp-discovery__container { width: min(100% - 64px, 900px); } /* HEADER */ #wh-printables-discovery .whp-discovery__header { gap: 23px; margin-bottom: 46px; } #wh-printables-discovery .whp-discovery__eyebrow { margin-bottom: 18px; font-size: 10px; } #wh-printables-discovery .whp-discovery__title { margin: 0; font-size: clamp(60px, 7.7vw, 78px); } #wh-printables-discovery .whp-discovery__intro { max-width: 570px; } #wh-printables-discovery .whp-discovery__intro p { font-size: 16px; } /* ASYMMETRIC TABLET GRID */ #wh-printables-discovery .whp-discovery__canvas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 370px 290px; gap: 18px; } #wh-printables-discovery .whp-discovery__panel--one { grid-column: 1 / -1; grid-row: 1; } #wh-printables-discovery .whp-discovery__panel--two { grid-column: 1; grid-row: 2; } #wh-printables-discovery .whp-discovery__panel--three { grid-column: 2; grid-row: 2; } /* PANEL CONTENT */ #wh-printables-discovery .whp-discovery__panel-content { left: 25px; right: 25px; bottom: 27px; } #wh-printables-discovery .whp-discovery__panel--one .whp-discovery__panel-content { left: 37px; right: 37px; bottom: 35px; } #wh-printables-discovery .whp-discovery__panel-index { margin-bottom: 10px; font-size: 9px; } #wh-printables-discovery .whp-discovery__panel-content h3 { margin-bottom: 9px; font-size: clamp(23px, 2.7vw, 30px); } #wh-printables-discovery .whp-discovery__panel--one .whp-discovery__panel-content h3 { font-size: 39px; } #wh-printables-discovery .whp-discovery__panel-content p { max-width: calc(100% - 48px); font-size: 12px; } #wh-printables-discovery .whp-discovery__panel-arrow { width: 38px; height: 38px; font-size: 21px; } /* CLOSING */ #wh-printables-discovery .whp-discovery__closing { margin-top: 45px; } #wh-printables-discovery .whp-discovery__closing p { font-size: 13px; } } /* ========================================================= 03 — MOBILE 0px – 767px ========================================================= */ @media (max-width: 767px) { #wh-printables-discovery .whp-discovery { padding: 82px 0 75px; } #wh-printables-discovery .whp-discovery__container { width: calc(100% - 42px); max-width: 540px; } /* HEADER */ #wh-printables-discovery .whp-discovery__header { gap: 17px; margin-bottom: 35px; } #wh-printables-discovery .whp-discovery__eyebrow { margin-bottom: 17px; font-size: 9px; letter-spacing: 0.12em; } #wh-printables-discovery .whp-discovery__eyebrow::before { width: 19px; } #wh-printables-discovery .whp-discovery__title { margin: 0; font-size: clamp(43px, 10.8vw, 65px); line-height: 1.04; } #wh-printables-discovery .whp-discovery__intro { max-width: 450px; } #wh-printables-discovery .whp-discovery__intro p { font-size: 14px; line-height: 1.8; } /* VERTICAL MOBILE GALLERY */ #wh-printables-discovery .whp-discovery__canvas { display: flex; flex-direction: column; gap: 17px; } #wh-printables-discovery .whp-discovery__panel { width: 100%; flex: none; border-radius: 20px; } #wh-printables-discovery .whp-discovery__panel--one { height: clamp(310px, 91vw, 420px); } #wh-printables-discovery .whp-discovery__panel--two, #wh-printables-discovery .whp-discovery__panel--three { height: clamp(245px, 70vw, 310px); } /* COPY */ #wh-printables-discovery .whp-discovery__panel-content { left: 24px; right: 24px; bottom: 25px; } #wh-printables-discovery .whp-discovery__panel-index { margin-bottom: 10px; font-size: 9px; } #wh-printables-discovery .whp-discovery__panel-content h3 { max-width: calc(100% - 36px); margin-bottom: 9px; font-size: clamp(25px, 7vw, 33px); } #wh-printables-discovery .whp-discovery__panel-content p { max-width: calc(100% - 45px); font-size: 12px; } #wh-printables-discovery .whp-discovery__panel-arrow { width: 39px; height: 39px; font-size: 21px; } /* FEATURED PANEL */ #wh-printables-discovery .whp-discovery__panel--one .whp-discovery__panel-content h3 { font-size: clamp(31px, 8vw, 40px); } /* CLOSING */ #wh-printables-discovery .whp-discovery__closing { margin-top: 43px; gap: 13px; } #wh-printables-discovery .whp-discovery__closing p { max-width: 280px; font-size: 12px; line-height: 1.75; } } /* ========================================================= 04 — SMALL MOBILE REFINEMENT Up to 390px ========================================================= */ @media (max-width: 390px) { #wh-printables-discovery .whp-discovery__container { width: calc(100% - 36px); } #wh-printables-discovery .whp-discovery__title { font-size: clamp(39px, 10.4vw, 43px); } #wh-printables-discovery .whp-discovery__panel-content { left: 20px; right: 20px; bottom: 22px; } #wh-printables-discovery .whp-discovery__panel--two, #wh-printables-discovery .whp-discovery__panel--three { height: 265px; } #wh-printables-discovery .whp-discovery__panel-content h3 { font-size: 25px; } } /* ========================================================= 05 — TABLET POINTER HOVER ONLY DEVICES WITH REAL HOVER ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) and (hover: hover) and (pointer: fine) { #wh-printables-discovery .whp-discovery__panel { transition: transform 0.45s ease, box-shadow 0.45s ease; } #wh-printables-discovery .whp-discovery__panel:hover { transform: translateY(-7px); box-shadow: 0 25px 50px rgba(35,28,29,0.13); } } /* ========================================================= 06 — RESPONSIVE WOW KEYFRAMES ========================================================= */ @keyframes whpd-responsive-art-drift { 0% { transform: scale(1.06) translate3d(-1%, 0, 0) rotate(-0.7deg); } 50% { transform: scale(1.11) translate3d(1%, -1%, 0) rotate(0.5deg); } 100% { transform: scale(1.07) translate3d(0, 1%, 0) rotate(-0.4deg); } } @keyframes whpd-responsive-orbit { 0% { transform: rotate(-20deg) scaleY(0.73); } 100% { transform: rotate(340deg) scaleY(0.73); } } @keyframes whpd-responsive-spark { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.45); opacity: 0.55; } } /* ========================================================= 07 — REDUCED MOTION ACCESSIBILITY ========================================================= */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-printables-discovery .whp-discovery__panel-art > svg, #wh-printables-discovery .whp-discovery__art-orbit, #wh-printables-discovery .whp-discovery__art-spark { animation: none !important; } #wh-printables-discovery .whp-discovery__panel { transition: none !important; } #wh-printables-discovery .whp-discovery__panel:hover { transform: none !important; } } /* ========================================================= END — PRINTABLES SECTION 02 / CSS TABLET + MOBILE + WOW v1.0 ========================================================= *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-4e47ed2 *//* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 03 — MADE TO INSPIRE THE CREATIVE SPOTLIGHT CSS DESKTOP + WOW v1.0 ELEMENTOR ID: #wh-printables-spotlight ELEMENTOR CLASSES: wh-printables-spotlight-section wh-theme-dark DESKTOP: min-width 1025px TABLET / MOBILE: PENDING SECTIONS 01 + 02: UNTOUCHED ========================================================= */ @media (min-width: 1025px) { /* ======================================================= 01 — ELEMENTOR CONTAINER ======================================================== */ #wh-printables-spotlight { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; isolation: isolate; } #wh-printables-spotlight .elementor-widget-html, #wh-printables-spotlight .elementor-widget-container { width: 100%; max-width: 100%; } /* ======================================================= 02 — DARK CINEMATIC FOUNDATION ======================================================== */ #wh-printables-spotlight .whp-spotlight { --whps-ink: #20212a; --whps-deep: #171820; --whps-cream: #fff8ed; --whps-coral: #f57760; --whps-amber: #f5b942; --whps-teal: #59c8b6; position: relative; width: 100%; min-height: 950px; padding: 132px 0 105px; background: radial-gradient( ellipse at 24% 52%, rgba(84, 91, 117, 0.17), transparent 53% ), linear-gradient( 145deg, #242530 0%, #191a23 53%, #11131b 100% ); color: var(--whps-cream); overflow: hidden; isolation: isolate; } #wh-printables-spotlight .whp-spotlight *, #wh-printables-spotlight .whp-spotlight *::before, #wh-printables-spotlight .whp-spotlight *::after { box-sizing: border-box; } /* ======================================================= 03 — CINEMATIC ATMOSPHERE ======================================================== */ #wh-printables-spotlight .whp-spotlight__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-spotlight .whp-spotlight__glow { position: absolute; display: block; border-radius: 50%; filter: blur(85px); pointer-events: none; } #wh-printables-spotlight .whp-spotlight__glow--amber { width: 600px; height: 600px; top: 28%; left: 6%; background: rgba(245, 185, 66, 0.11); } #wh-printables-spotlight .whp-spotlight__glow--coral { width: 480px; height: 480px; bottom: -19%; right: -12%; background: rgba(245, 119, 96, 0.12); } #wh-printables-spotlight .whp-spotlight__glow--teal { width: 470px; height: 470px; top: 5%; right: 14%; background: rgba(21, 158, 155, 0.12); } /* Subtle texture without external images */ #wh-printables-spotlight .whp-spotlight__grain { position: absolute; inset: 0; background-image: radial-gradient( rgba(255,255,255,0.19) 0.55px, transparent 0.75px ); background-size: 7px 7px; opacity: 0.065; } #wh-printables-spotlight .whp-spotlight__vignette { position: absolute; inset: 0; background: radial-gradient( ellipse at 50% 48%, transparent 28%, rgba(5, 7, 13, 0.4) 100% ); } /* ======================================================= 04 — CONTENT CONTAINER ======================================================== */ #wh-printables-spotlight .whp-spotlight__container { position: relative; z-index: 2; width: min(1440px, 90%); margin: 0 auto; } /* ======================================================= 05 — EDITORIAL HEADING ======================================================== */ #wh-printables-spotlight .whp-spotlight__header { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: clamp(35px, 5vw, 100px); margin-bottom: 65px; } #wh-printables-spotlight .whp-spotlight__heading { min-width: 0; } #wh-printables-spotlight .whp-spotlight__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 23px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 750; letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase; color: #e5b76f; } #wh-printables-spotlight .whp-spotlight__eyebrow::before { content: ""; display: block; width: 29px; height: 2px; background: var(--whps-coral); } #wh-printables-spotlight .whp-spotlight__title { margin: 0; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(65px, 6.3vw, 102px); font-weight: 800; line-height: 0.99; letter-spacing: -0.066em; color: var(--whps-cream); } #wh-printables-spotlight .whp-spotlight__title-accent { display: block; width: fit-content; max-width: 100%; padding: 0.03em 0.04em 0.11em 0; background: linear-gradient( 110deg, #f57760 0%, #f5aa69 52%, #f5c66a 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-spotlight .whp-spotlight__intro { max-width: 430px; padding-bottom: 14px; } #wh-printables-spotlight .whp-spotlight__intro p { margin: 0; font-family: "Inter", sans-serif; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.9; font-weight: 400; color: #c3bfca; } /* ======================================================= 06 — MAIN CINEMATIC SHOWCASE ======================================================== */ #wh-printables-spotlight .whp-spotlight__showcase { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: clamp(35px, 5vw, 90px); width: 100%; min-height: 570px; border: 1px solid rgba(255,255,255,0.075); border-radius: 32px; background: radial-gradient( ellipse at 29% 46%, rgba(245,185,66,0.075), transparent 55% ), linear-gradient( 125deg, rgba(255,255,255,0.043), rgba(255,255,255,0.012) ); box-shadow: 0 32px 90px rgba(0,0,0,0.17), inset 0 1px 0 rgba(255,255,255,0.055); overflow: hidden; isolation: isolate; } /* Top light reflection */ #wh-printables-spotlight .whp-spotlight__showcase::before { content: ""; position: absolute; z-index: 0; width: 70%; height: 1px; top: 0; left: 15%; background: linear-gradient( 90deg, transparent, rgba(245,185,66,0.35), transparent ); } /* ======================================================= 07 — 3D STAGE ======================================================== */ #wh-printables-spotlight .whp-spotlight__stage { position: relative; z-index: 1; width: 100%; height: 570px; min-width: 0; perspective: 1300px; transform-style: preserve-3d; isolation: isolate; } /* Stage floor glow */ #wh-printables-spotlight .whp-spotlight__stage-light { position: absolute; z-index: 0; width: 520px; height: 420px; left: 50%; top: 48%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient( ellipse, rgba(245,185,66,0.20) 0%, rgba(245,119,96,0.11) 35%, transparent 72% ); filter: blur(29px); animation: whps-light-breathe 8s ease-in-out infinite; } /* Large background halo */ #wh-printables-spotlight .whp-spotlight__stage-halo { position: absolute; z-index: 0; width: 430px; height: 430px; left: 50%; top: 50%; border: 1px solid rgba(245,185,66,0.17); border-radius: 50%; box-shadow: 0 0 70px rgba(245,185,66,0.045), inset 0 0 65px rgba(245,185,66,0.025); transform: translate(-50%,-50%) rotate(-20deg) scaleY(0.84); animation: whps-halo-breathe 10s ease-in-out infinite; } /* ======================================================= 08 — SCULPTURES FOUNDATION ======================================================== */ #wh-printables-spotlight .whp-spotlight__art { position: absolute; display: block; width: 310px; height: 390px; top: 50%; left: 50%; transform-style: preserve-3d; backface-visibility: hidden; filter: drop-shadow(0 28px 30px rgba(0,0,0,0.24)); will-change: transform; transition: filter 0.7s ease; } #wh-printables-spotlight .whp-spotlight__art svg { display: block; width: 100%; height: 100%; } /* ======================================================= 09 — BACK SCULPTURE ======================================================== */ #wh-printables-spotlight .whp-spotlight__art--back { z-index: 1; animation: whps-sculpture-back 8s ease-in-out infinite; } /* ======================================================= 10 — MIDDLE SCULPTURE ======================================================== */ #wh-printables-spotlight .whp-spotlight__art--middle { z-index: 2; animation: whps-sculpture-middle 9.5s ease-in-out infinite; } /* ======================================================= 11 — FRONT SCULPTURE ======================================================== */ #wh-printables-spotlight .whp-spotlight__art--front { z-index: 3; animation: whps-sculpture-front 7.5s ease-in-out infinite; } /* ======================================================= 12 — WOW: HOVER SPOTLIGHT ======================================================== */ @media (hover: hover) and (pointer: fine) { #wh-printables-spotlight .whp-spotlight__stage:hover .whp-spotlight__art--back { animation-play-state: paused; transform: translate3d(-75%, -63%, -60px) rotate(-23deg) rotateY(12deg); } #wh-printables-spotlight .whp-spotlight__stage:hover .whp-spotlight__art--middle { animation-play-state: paused; transform: translate3d(-25%, -52%, 45px) rotate(17deg) rotateY(-9deg); } #wh-printables-spotlight .whp-spotlight__stage:hover .whp-spotlight__art--front { animation-play-state: paused; transform: translate3d(-52%, -41%, 115px) rotate(-4deg) rotateY(-4deg); } #wh-printables-spotlight .whp-spotlight__stage:hover .whp-spotlight__stage-light { filter: blur(19px); } } /* ======================================================= 13 — FLOATING PARTICLES ======================================================== */ #wh-printables-spotlight .whp-spotlight__particle { position: absolute; z-index: 5; display: block; border-radius: 50%; pointer-events: none; animation: whps-particle-float 6s ease-in-out infinite alternate; } #wh-printables-spotlight .whp-spotlight__particle--one { width: 17px; height: 17px; top: 19%; left: 19%; background: var(--whps-coral); animation-delay: -1s; } #wh-printables-spotlight .whp-spotlight__particle--two { width: 11px; height: 11px; top: 30%; right: 12%; background: var(--whps-teal); animation-delay: -3s; } #wh-printables-spotlight .whp-spotlight__particle--three { width: 8px; height: 8px; bottom: 16%; left: 25%; background: var(--whps-amber); animation-delay: -2s; } #wh-printables-spotlight .whp-spotlight__particle--four { width: 13px; height: 13px; bottom: 22%; right: 17%; background: #dba6bb; animation-delay: -4s; } /* ======================================================= 14 — DECORATIVE SPARKS ======================================================== */ #wh-printables-spotlight .whp-spotlight__spark { position: absolute; z-index: 5; display: block; width: 42px; height: 42px; filter: drop-shadow(0 0 14px rgba(245,185,66,0.15)); pointer-events: none; animation: whps-spark-glow 5s ease-in-out infinite; } #wh-printables-spotlight .whp-spotlight__spark--one { top: 12%; right: 24%; } #wh-printables-spotlight .whp-spotlight__spark--two { width: 27px; height: 27px; bottom: 15%; left: 16%; animation-delay: -2.5s; } /* ======================================================= 15 — STORY PANEL ======================================================== */ #wh-printables-spotlight .whp-spotlight__story { position: relative; z-index: 6; width: 100%; max-width: 460px; padding: 45px 55px 45px 0; } #wh-printables-spotlight .whp-spotlight__story-index { display: inline-block; margin-bottom: 23px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 750; letter-spacing: 0.2em; line-height: 1.5; color: #e7b97a; } #wh-printables-spotlight .whp-spotlight__story-title { margin: 0 0 25px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(42px, 3.55vw, 58px); font-weight: 750; letter-spacing: -0.055em; line-height: 1.08; color: var(--whps-cream); } #wh-printables-spotlight .whp-spotlight__story-title em { display: block; font-style: normal; color: var(--whps-teal); } #wh-printables-spotlight .whp-spotlight__story-description { max-width: 390px; margin: 0; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.9; color: #c3bdc8; } #wh-printables-spotlight .whp-spotlight__story-divider { width: 100%; height: 1px; margin: 31px 0 23px; background: linear-gradient( 90deg, rgba(245,185,66,0.38), rgba(255,255,255,0.06), transparent ); } #wh-printables-spotlight .whp-spotlight__story-footnote { display: flex; align-items: center; gap: 13px; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; line-height: 1.6; color: #b4abb6; } #wh-printables-spotlight .whp-spotlight__story-symbol { font-size: 25px; line-height: 1; color: var(--whps-coral); } /* ======================================================= 16 — EDITORIAL CLOSING ======================================================== */ #wh-printables-spotlight .whp-spotlight__closing { display: flex; align-items: center; justify-content: center; gap: 27px; margin-top: 65px; } #wh-printables-spotlight .whp-spotlight__closing-line { width: clamp(50px, 7vw, 120px); height: 1px; background: linear-gradient( 90deg, transparent, rgba(245,185,66,0.43) ); } #wh-printables-spotlight .whp-spotlight__closing-line:last-child { transform: rotate(180deg); } #wh-printables-spotlight .whp-spotlight__closing p { max-width: 550px; margin: 0; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 450; line-height: 1.8; text-align: center; color: #aea8b6; } /* ======================================================= 17 — COMPACT DESKTOP 1025px – 1279px ======================================================== */ @media (max-width: 1279px) { #wh-printables-spotlight .whp-spotlight__container { width: 94%; } #wh-printables-spotlight .whp-spotlight__showcase { grid-template-columns: 1fr 0.9fr; gap: 20px; min-height: 525px; } #wh-printables-spotlight .whp-spotlight__stage { height: 525px; } #wh-printables-spotlight .whp-spotlight__art { width: 265px; height: 340px; } #wh-printables-spotlight .whp-spotlight__story { padding: 30px 30px 30px 0; } #wh-printables-spotlight .whp-spotlight__story-title { font-size: 43px; } #wh-printables-spotlight .whp-spotlight__title { font-size: 70px; } } /* ======================================================= 18 — ACCESSIBILITY ======================================================== */ @media (prefers-reduced-motion: reduce) { #wh-printables-spotlight .whp-spotlight__art, #wh-printables-spotlight .whp-spotlight__stage-light, #wh-printables-spotlight .whp-spotlight__stage-halo, #wh-printables-spotlight .whp-spotlight__particle, #wh-printables-spotlight .whp-spotlight__spark { animation: none !important; transition: none !important; } #wh-printables-spotlight .whp-spotlight__art--back { transform: translate3d(-75%, -57%, -60px) rotate(-20deg); } #wh-printables-spotlight .whp-spotlight__art--middle { transform: translate3d(-25%, -53%, 45px) rotate(15deg); } #wh-printables-spotlight .whp-spotlight__art--front { transform: translate3d(-52%, -43%, 115px) rotate(-7deg); } } } /* ========================================================= 19 — DESKTOP WOW KEYFRAMES ========================================================= */ @keyframes whps-sculpture-back { 0%, 100% { transform: translate3d(-75%, -57%, -60px) rotate(-20deg) rotateY(10deg); } 50% { transform: translate3d(-77%, -61%, -60px) rotate(-23deg) rotateY(14deg); } } @keyframes whps-sculpture-middle { 0%, 100% { transform: translate3d(-25%, -53%, 45px) rotate(15deg) rotateY(-8deg); } 50% { transform: translate3d(-22%, -57%, 45px) rotate(18deg) rotateY(-12deg); } } @keyframes whps-sculpture-front { 0%, 100% { transform: translate3d(-52%, -43%, 115px) rotate(-7deg) rotateY(-4deg); } 50% { transform: translate3d(-50%, -47%, 115px) rotate(-4deg) rotateY(-7deg); } } @keyframes whps-light-breathe { 0%, 100% { opacity: 0.7; transform: translate(-50%,-50%) scale(0.95); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } } @keyframes whps-halo-breathe { 0%, 100% { opacity: 0.5; transform: translate(-50%,-50%) rotate(-20deg) scaleY(0.84) scale(0.97); } 50% { opacity: 0.9; transform: translate(-50%,-50%) rotate(-12deg) scaleY(0.84) scale(1.04); } } @keyframes whps-particle-float { 0% { transform: translate3d(0,0,0); opacity: 0.65; } 100% { transform: translate3d(8px,-17px,0); opacity: 1; } } @keyframes whps-spark-glow { 0%, 100% { transform: scale(0.9) rotate(0deg); opacity: 0.7; } 50% { transform: scale(1.23) rotate(22deg); opacity: 1; } } /* ========================================================= END — PRINTABLES SECTION 03 / CSS DESKTOP + WOW v1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 03 — MADE TO INSPIRE THE CREATIVE SPOTLIGHT CSS TABLET + MOBILE + WOW v1.0 ELEMENTOR ID: #wh-printables-spotlight ELEMENTOR CLASSES: wh-printables-spotlight-section wh-theme-dark TABLET: 768px - 1024px MOBILE: 0px - 767px DESKTOP: APPROVED / UNTOUCHED HTML / SVG: UNCHANGED ========================================================= */ /* ========================================================= 01 — SHARED RESPONSIVE FOUNDATION ========================================================= */ @media (max-width: 1024px) { /* ELEMENTOR CONTAINER */ #wh-printables-spotlight { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; isolation: isolate; } #wh-printables-spotlight .elementor-widget-html, #wh-printables-spotlight .elementor-widget-container { width: 100%; max-width: 100%; } /* DARK SECTION FOUNDATION */ #wh-printables-spotlight .whp-spotlight { --whps-ink: #20212a; --whps-deep: #171820; --whps-cream: #fff8ed; --whps-coral: #f57760; --whps-amber: #f5b942; --whps-teal: #59c8b6; position: relative; width: 100%; min-height: 0; background: radial-gradient( ellipse at 50% 45%, rgba(84,91,117,0.13), transparent 57% ), linear-gradient( 145deg, #242530 0%, #191a23 55%, #11131b 100% ); color: var(--whps-cream); overflow: hidden; isolation: isolate; } #wh-printables-spotlight .whp-spotlight *, #wh-printables-spotlight .whp-spotlight *::before, #wh-printables-spotlight .whp-spotlight *::after { box-sizing: border-box; } /* ATMOSPHERE */ #wh-printables-spotlight .whp-spotlight__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-spotlight .whp-spotlight__glow { position: absolute; display: block; border-radius: 50%; filter: blur(65px); pointer-events: none; } #wh-printables-spotlight .whp-spotlight__glow--amber { width: 380px; height: 380px; top: 26%; left: -12%; background: rgba(245,185,66,0.11); } #wh-printables-spotlight .whp-spotlight__glow--coral { width: 330px; height: 330px; bottom: -10%; right: -20%; background: rgba(245,119,96,0.12); } #wh-printables-spotlight .whp-spotlight__glow--teal { width: 300px; height: 300px; top: 10%; right: -9%; background: rgba(21,158,155,0.11); } /* TEXTURE AND VIGNETTE */ #wh-printables-spotlight .whp-spotlight__grain { position: absolute; inset: 0; background-image: radial-gradient( rgba(255,255,255,0.19) 0.55px, transparent 0.75px ); background-size: 7px 7px; opacity: 0.065; } #wh-printables-spotlight .whp-spotlight__vignette { position: absolute; inset: 0; background: radial-gradient( ellipse at 50% 48%, transparent 28%, rgba(5,7,13,0.35) 100% ); } /* MAIN CONTAINER */ #wh-printables-spotlight .whp-spotlight__container { position: relative; z-index: 2; width: min(100% - 48px, 900px); margin: 0 auto; } /* HEADER */ #wh-printables-spotlight .whp-spotlight__header { display: flex; flex-direction: column; align-items: flex-start; } #wh-printables-spotlight .whp-spotlight__heading { width: 100%; min-width: 0; } #wh-printables-spotlight .whp-spotlight__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.15em; line-height: 1.5; text-transform: uppercase; color: #e5b76f; } #wh-printables-spotlight .whp-spotlight__eyebrow::before { content: ""; display: block; flex: none; width: 24px; height: 2px; background: var(--whps-coral); } #wh-printables-spotlight .whp-spotlight__title { margin: 0; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; line-height: 1.02; letter-spacing: -0.065em; color: var(--whps-cream); } #wh-printables-spotlight .whp-spotlight__title-accent { display: block; width: fit-content; max-width: 100%; padding: 0.03em 0.04em 0.11em 0; background: linear-gradient( 110deg, #f57760 0%, #f5aa69 52%, #f5c66a 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-spotlight .whp-spotlight__intro p { margin: 0; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.85; color: #c3bfca; } /* SHOWCASE FOUNDATION */ #wh-printables-spotlight .whp-spotlight__showcase { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; border: 1px solid rgba(255,255,255,0.075); border-radius: 25px; background: radial-gradient( ellipse at 50% 28%, rgba(245,185,66,0.075), transparent 58% ), linear-gradient( 125deg, rgba(255,255,255,0.043), rgba(255,255,255,0.012) ); box-shadow: 0 25px 65px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.055); overflow: hidden; isolation: isolate; } #wh-printables-spotlight .whp-spotlight__showcase::before { content: ""; position: absolute; z-index: 0; top: 0; left: 15%; width: 70%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(245,185,66,0.35), transparent ); } /* CINEMATIC STAGE */ #wh-printables-spotlight .whp-spotlight__stage { position: relative; z-index: 1; width: 100%; min-width: 0; flex: none; perspective: 1300px; transform-style: preserve-3d; isolation: isolate; overflow: hidden; pointer-events: none; } /* AMBIENT LIGHT */ #wh-printables-spotlight .whp-spotlight__stage-light { position: absolute; z-index: 0; width: min(90%, 470px); aspect-ratio: 1.2; top: 50%; left: 50%; border-radius: 50%; background: radial-gradient( ellipse, rgba(245,185,66,0.20) 0%, rgba(245,119,96,0.11) 35%, transparent 72% ); filter: blur(24px); animation: whps-responsive-light 8s ease-in-out infinite; } /* HALO */ #wh-printables-spotlight .whp-spotlight__stage-halo { position: absolute; z-index: 0; width: min(80%, 390px); aspect-ratio: 1; top: 50%; left: 50%; border: 1px solid rgba(245,185,66,0.20); border-radius: 50%; box-shadow: 0 0 55px rgba(245,185,66,0.04), inset 0 0 50px rgba(245,185,66,0.025); animation: whps-responsive-halo 11s ease-in-out infinite; } /* THREE SCULPTURES */ #wh-printables-spotlight .whp-spotlight__art { position: absolute; display: block; width: 290px; height: 363px; top: 50%; left: 50%; transform-style: preserve-3d; backface-visibility: hidden; filter: drop-shadow(0 22px 25px rgba(0,0,0,0.25)); will-change: transform; } #wh-printables-spotlight .whp-spotlight__art svg { display: block; width: 100%; height: 100%; } #wh-printables-spotlight .whp-spotlight__art--back { z-index: 1; animation: whps-responsive-back 8s ease-in-out infinite; } #wh-printables-spotlight .whp-spotlight__art--middle { z-index: 2; animation: whps-responsive-middle 9.5s ease-in-out infinite; } #wh-printables-spotlight .whp-spotlight__art--front { z-index: 3; animation: whps-responsive-front 7.5s ease-in-out infinite; } /* PARTICLES */ #wh-printables-spotlight .whp-spotlight__particle { position: absolute; z-index: 5; display: block; border-radius: 50%; animation: whps-responsive-particle 6s ease-in-out infinite alternate; } #wh-printables-spotlight .whp-spotlight__particle--one { width: 14px; height: 14px; top: 19%; left: 18%; background: var(--whps-coral); } #wh-printables-spotlight .whp-spotlight__particle--two { width: 10px; height: 10px; top: 30%; right: 14%; background: var(--whps-teal); animation-delay: -2s; } #wh-printables-spotlight .whp-spotlight__particle--three { width: 8px; height: 8px; bottom: 16%; left: 25%; background: var(--whps-amber); animation-delay: -3s; } #wh-printables-spotlight .whp-spotlight__particle--four { width: 11px; height: 11px; bottom: 22%; right: 18%; background: #dba6bb; animation-delay: -4s; } /* SPARKS */ #wh-printables-spotlight .whp-spotlight__spark { position: absolute; z-index: 5; display: block; width: 38px; height: 38px; filter: drop-shadow(0 0 12px rgba(245,185,66,0.14)); animation: whps-responsive-spark 5s ease-in-out infinite; } #wh-printables-spotlight .whp-spotlight__spark--one { top: 13%; right: 24%; } #wh-printables-spotlight .whp-spotlight__spark--two { width: 25px; height: 25px; bottom: 14%; left: 17%; animation-delay: -2.5s; } /* STORY PANEL */ #wh-printables-spotlight .whp-spotlight__story { position: relative; z-index: 6; width: 100%; } #wh-printables-spotlight .whp-spotlight__story-index { display: inline-block; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.18em; line-height: 1.5; color: #e7b97a; } #wh-printables-spotlight .whp-spotlight__story-title { padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 750; letter-spacing: -0.055em; line-height: 1.08; color: var(--whps-cream); } #wh-printables-spotlight .whp-spotlight__story-title em { display: block; font-style: normal; color: var(--whps-teal); } #wh-printables-spotlight .whp-spotlight__story-description { max-width: 450px; margin: 0; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.85; color: #c3bdc8; } #wh-printables-spotlight .whp-spotlight__story-divider { width: 100%; height: 1px; background: linear-gradient( 90deg, rgba(245,185,66,0.38), rgba(255,255,255,0.06), transparent ); } #wh-printables-spotlight .whp-spotlight__story-footnote { display: flex; align-items: center; gap: 12px; font-family: "Inter", sans-serif; font-weight: 500; line-height: 1.6; color: #b4abb6; } #wh-printables-spotlight .whp-spotlight__story-symbol { font-size: 24px; line-height: 1; color: var(--whps-coral); } /* EDITORIAL CLOSING */ #wh-printables-spotlight .whp-spotlight__closing { display: flex; align-items: center; justify-content: center; } #wh-printables-spotlight .whp-spotlight__closing-line { flex: 1; max-width: 90px; height: 1px; background: rgba(245,185,66,0.35); } #wh-printables-spotlight .whp-spotlight__closing p { max-width: 500px; margin: 0; font-family: "Inter", sans-serif; font-weight: 450; line-height: 1.8; text-align: center; color: #aea8b6; } } /* ========================================================= 02 — TABLET 768px - 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { #wh-printables-spotlight .whp-spotlight { padding: 100px 0 90px; } #wh-printables-spotlight .whp-spotlight__container { width: min(100% - 64px, 900px); } /* HEADER */ #wh-printables-spotlight .whp-spotlight__header { gap: 24px; margin-bottom: 47px; } #wh-printables-spotlight .whp-spotlight__eyebrow { margin-bottom: 18px; font-size: 10px; } #wh-printables-spotlight .whp-spotlight__title { font-size: clamp(64px, 8vw, 84px); } #wh-printables-spotlight .whp-spotlight__intro { max-width: 570px; } #wh-printables-spotlight .whp-spotlight__intro p { font-size: 16px; } /* SHOWCASE */ #wh-printables-spotlight .whp-spotlight__showcase { gap: 0; } #wh-printables-spotlight .whp-spotlight__stage { height: 430px; } #wh-printables-spotlight .whp-spotlight__art { width: 285px; height: 356px; } /* STORY */ #wh-printables-spotlight .whp-spotlight__story { max-width: 650px; margin: 0 auto; padding: 0 45px 48px; text-align: center; } #wh-printables-spotlight .whp-spotlight__story-index { margin-bottom: 15px; font-size: 10px; } #wh-printables-spotlight .whp-spotlight__story-title { margin: 0 0 20px; font-size: 47px; } #wh-printables-spotlight .whp-spotlight__story-description { margin: 0 auto; font-size: 15px; } #wh-printables-spotlight .whp-spotlight__story-divider { margin: 25px 0 19px; } #wh-printables-spotlight .whp-spotlight__story-footnote { justify-content: center; font-size: 12px; } /* CLOSING */ #wh-printables-spotlight .whp-spotlight__closing { gap: 20px; margin-top: 51px; } #wh-printables-spotlight .whp-spotlight__closing p { font-size: 13px; } } /* ========================================================= 03 — MOBILE 0px - 767px ========================================================= */ @media (max-width: 767px) { #wh-printables-spotlight .whp-spotlight { padding: 80px 0 73px; } #wh-printables-spotlight .whp-spotlight__container { width: calc(100% - 42px); max-width: 540px; } /* HEADER */ #wh-printables-spotlight .whp-spotlight__header { gap: 17px; margin-bottom: 34px; } #wh-printables-spotlight .whp-spotlight__eyebrow { margin-bottom: 17px; font-size: 9px; letter-spacing: 0.12em; } #wh-printables-spotlight .whp-spotlight__eyebrow::before { width: 19px; } #wh-printables-spotlight .whp-spotlight__title { font-size: clamp(45px, 11.5vw, 68px); line-height: 1.03; } #wh-printables-spotlight .whp-spotlight__intro { max-width: 440px; } #wh-printables-spotlight .whp-spotlight__intro p { font-size: 14px; line-height: 1.8; } /* SHOWCASE */ #wh-printables-spotlight .whp-spotlight__showcase { border-radius: 22px; } #wh-printables-spotlight .whp-spotlight__stage { height: clamp(290px, 84vw, 395px); } #wh-printables-spotlight .whp-spotlight__art { width: clamp(190px, 57vw, 260px); height: auto; aspect-ratio: 400 / 500; } #wh-printables-spotlight .whp-spotlight__stage-halo { width: 80%; } #wh-printables-spotlight .whp-spotlight__stage-light { width: 95%; } /* STORY */ #wh-printables-spotlight .whp-spotlight__story { padding: 0 25px 34px; text-align: left; } #wh-printables-spotlight .whp-spotlight__story-index { margin-bottom: 15px; font-size: 9px; } #wh-printables-spotlight .whp-spotlight__story-title { margin: 0 0 18px; font-size: clamp(34px, 9vw, 46px); } #wh-printables-spotlight .whp-spotlight__story-description { font-size: 13px; line-height: 1.8; } #wh-printables-spotlight .whp-spotlight__story-divider { margin: 23px 0 18px; } #wh-printables-spotlight .whp-spotlight__story-footnote { font-size: 11px; } /* PARTICLE REFINEMENTS */ #wh-printables-spotlight .whp-spotlight__particle--one { left: 12%; } #wh-printables-spotlight .whp-spotlight__particle--two { right: 9%; } #wh-printables-spotlight .whp-spotlight__spark--one { right: 14%; width: 29px; height: 29px; } #wh-printables-spotlight .whp-spotlight__spark--two { left: 10%; width: 21px; height: 21px; } /* CLOSING */ #wh-printables-spotlight .whp-spotlight__closing { gap: 13px; margin-top: 42px; } #wh-printables-spotlight .whp-spotlight__closing p { max-width: 270px; font-size: 12px; line-height: 1.7; } } /* ========================================================= 04 — SMALL MOBILE Up to 390px ========================================================= */ @media (max-width: 390px) { #wh-printables-spotlight .whp-spotlight__container { width: calc(100% - 36px); } #wh-printables-spotlight .whp-spotlight__title { font-size: clamp(42px, 11vw, 47px); } #wh-printables-spotlight .whp-spotlight__stage { height: 285px; } #wh-printables-spotlight .whp-spotlight__art { width: 190px; } #wh-printables-spotlight .whp-spotlight__story { padding: 0 20px 30px; } #wh-printables-spotlight .whp-spotlight__story-title { font-size: 33px; } #wh-printables-spotlight .whp-spotlight__story-description { font-size: 12px; } } /* ========================================================= 05 — RESPONSIVE WOW KEYFRAMES Independent floating sculptures ========================================================= */ @keyframes whps-responsive-back { 0%, 100% { transform: translate3d(-75%, -57%, -60px) rotate(-20deg) rotateY(10deg); } 50% { transform: translate3d(-78%, -62%, -60px) rotate(-23deg) rotateY(13deg); } } @keyframes whps-responsive-middle { 0%, 100% { transform: translate3d(-25%, -53%, 45px) rotate(15deg) rotateY(-8deg); } 50% { transform: translate3d(-22%, -58%, 45px) rotate(18deg) rotateY(-11deg); } } @keyframes whps-responsive-front { 0%, 100% { transform: translate3d(-52%, -43%, 115px) rotate(-7deg) rotateY(-4deg); } 50% { transform: translate3d(-50%, -48%, 115px) rotate(-4deg) rotateY(-7deg); } } @keyframes whps-responsive-light { 0%, 100% { opacity: 0.65; transform: translate(-50%, -50%) scale(0.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); } } @keyframes whps-responsive-halo { 0%, 100% { opacity: 0.52; transform: translate(-50%, -50%) rotate(-18deg) scaleY(0.84) scale(0.97); } 50% { opacity: 0.88; transform: translate(-50%, -50%) rotate(-12deg) scaleY(0.84) scale(1.04); } } @keyframes whps-responsive-particle { 0% { transform: translate3d(0, 0, 0); opacity: 0.65; } 100% { transform: translate3d(7px, -13px, 0); opacity: 1; } } @keyframes whps-responsive-spark { 0%, 100% { transform: scale(0.9) rotate(0deg); opacity: 0.7; } 50% { transform: scale(1.2) rotate(18deg); opacity: 1; } } /* ========================================================= 06 — REDUCED MOTION ACCESSIBILITY ========================================================= */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-printables-spotlight .whp-spotlight__art, #wh-printables-spotlight .whp-spotlight__stage-light, #wh-printables-spotlight .whp-spotlight__stage-halo, #wh-printables-spotlight .whp-spotlight__particle, #wh-printables-spotlight .whp-spotlight__spark { animation: none !important; transition: none !important; } #wh-printables-spotlight .whp-spotlight__art--back { transform: translate3d(-75%, -57%, -60px) rotate(-20deg); } #wh-printables-spotlight .whp-spotlight__art--middle { transform: translate3d(-25%, -53%, 45px) rotate(15deg); } #wh-printables-spotlight .whp-spotlight__art--front { transform: translate3d(-52%, -43%, 115px) rotate(-7deg); } #wh-printables-spotlight .whp-spotlight__stage-light, #wh-printables-spotlight .whp-spotlight__stage-halo { transform: translate(-50%, -50%); } } /* ========================================================= END — PRINTABLES SECTION 03 / CSS TABLET + MOBILE + WOW v1.0 ========================================================= *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ac5124e *//* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 04 — EXPLORE THE COLLECTION THE CREATIVE LIBRARY CSS DESKTOP + WOW v1.0 ELEMENTOR ID: #wh-printables-collection ELEMENTOR CLASSES: wh-printables-collection-section wh-theme-light DESKTOP: min-width 1025px TABLET / MOBILE: PENDING SECTIONS 01, 02, 03: UNTOUCHED ========================================================= */ @media (min-width: 1025px) { /* ======================================================= 01 — ELEMENTOR CONTAINER ======================================================== */ #wh-printables-collection { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; isolation: isolate; } #wh-printables-collection .elementor-widget-html, #wh-printables-collection .elementor-widget-container { width: 100%; max-width: 100%; } /* ======================================================= 02 — CREATIVE LIBRARY FOUNDATION ======================================================== */ #wh-printables-collection .whp-collection { --whpc-ink: #20212a; --whpc-cream: #fffaf2; --whpc-coral: #f57760; --whpc-amber: #f5b942; --whpc-teal: #159e9b; position: relative; width: 100%; min-height: 900px; padding: clamp(110px, 9vw, 145px) 0 110px; background: radial-gradient( ellipse at 80% 45%, rgba(245, 185, 66, 0.09), transparent 46% ), linear-gradient( 180deg, #fffaf2 0%, #fffdf9 58%, #fff8ee 100% ); color: var(--whpc-ink); overflow: hidden; isolation: isolate; } #wh-printables-collection .whp-collection *, #wh-printables-collection .whp-collection *::before, #wh-printables-collection .whp-collection *::after { box-sizing: border-box; } /* ======================================================= 03 — BACKGROUND ATMOSPHERE ======================================================== */ #wh-printables-collection .whp-collection__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-collection .whp-collection__glow { position: absolute; display: block; border-radius: 50%; filter: blur(85px); pointer-events: none; } #wh-printables-collection .whp-collection__glow--one { width: 510px; height: 510px; top: 27%; right: -12%; background: rgba(245, 185, 66, 0.17); } #wh-printables-collection .whp-collection__glow--two { width: 420px; height: 420px; bottom: -15%; left: -12%; background: rgba(21, 158, 155, 0.095); } #wh-printables-collection .whp-collection__decoration { position: absolute; width: 165px; height: 165px; top: 9%; right: 6%; opacity: 0.58; animation: whpc-decoration-orbit 24s linear infinite; } /* ======================================================= 04 — CONTENT CONTAINER ======================================================== */ #wh-printables-collection .whp-collection__container { position: relative; z-index: 2; width: min(1440px, 90%); margin: 0 auto; } /* ======================================================= 05 — EDITORIAL HEADER ======================================================== */ #wh-printables-collection .whp-collection__header { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: end; gap: clamp(35px, 5vw, 95px); margin-bottom: 68px; } #wh-printables-collection .whp-collection__heading { min-width: 0; } #wh-printables-collection .whp-collection__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 750; letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase; color: #98723d; } #wh-printables-collection .whp-collection__eyebrow::before { content: ""; display: block; width: 28px; height: 2px; background: var(--whpc-coral); } #wh-printables-collection .whp-collection__title { margin: 0; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(60px, 5.4vw, 87px); font-weight: 800; line-height: 1.02; letter-spacing: -0.065em; color: var(--whpc-ink); } #wh-printables-collection .whp-collection__title-accent { display: block; width: fit-content; max-width: 100%; padding: 0.03em 0.04em 0.11em 0; background: linear-gradient( 110deg, #ed7859 0%, #e89c57 55%, #deb25e 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-collection .whp-collection__intro { max-width: 440px; padding-bottom: 13px; } #wh-printables-collection .whp-collection__intro p { margin: 0; font-family: "Inter", sans-serif; font-size: clamp(16px, 1.2vw, 18px); font-weight: 400; line-height: 1.9; color: #777079; } /* ======================================================= 06 — LIBRARY STAGE ======================================================== */ #wh-printables-collection .whp-collection__library { position: relative; width: 100%; min-height: 530px; isolation: isolate; } /* ======================================================= 07 — EDITORIAL EMPTY STATE ======================================================== */ #wh-printables-collection .whp-collection__empty { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(35px, 4vw, 75px); width: 100%; min-height: 530px; padding: clamp(35px, 5vw, 70px); border: 1px solid rgba(210, 178, 146, 0.23); border-radius: 34px; background: radial-gradient( ellipse at 22% 48%, rgba(245, 185, 66, 0.085), transparent 54% ), linear-gradient( 135deg, #fffdf8 0%, #fff5e9 100% ); box-shadow: 0 25px 65px rgba(104, 72, 49, 0.055), 0 5px 15px rgba(104, 72, 49, 0.025); overflow: hidden; transition: box-shadow 0.65s ease, border-color 0.65s ease; } /* Fine decorative frame */ #wh-printables-collection .whp-collection__empty::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(222, 193, 165, 0.24); border-radius: 25px; pointer-events: none; } /* Soft internal lighting */ #wh-printables-collection .whp-collection__empty::after { content: ""; position: absolute; width: 410px; height: 410px; top: 50%; left: 27%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient( circle, rgba(245, 185, 66, 0.16), rgba(245, 119, 96, 0.055) 45%, transparent 72% ); filter: blur(22px); opacity: 0.65; pointer-events: none; transition: transform 0.9s ease, opacity 0.9s ease; } /* ======================================================= 08 — CREATIVE ARTWORK ======================================================== */ #wh-printables-collection .whp-collection__empty-art { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; perspective: 1100px; transform-style: preserve-3d; } #wh-printables-collection .whp-collection__empty-art svg { display: block; width: min(100%, 580px); height: auto; overflow: visible; transform-origin: 50% 50%; filter: drop-shadow(0 22px 28px rgba(83, 58, 47, 0.11)); animation: whpc-art-breathe 8s ease-in-out infinite; transition: filter 0.7s ease; } /* ======================================================= 09 — STORY CONTENT ======================================================== */ #wh-printables-collection .whp-collection__empty-content { position: relative; z-index: 3; width: 100%; max-width: 480px; } #wh-printables-collection .whp-collection__empty-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 750; letter-spacing: 0.17em; line-height: 1.5; color: #a77748; } #wh-printables-collection .whp-collection__empty-eyebrow::before { content: "✳"; font-size: 16px; line-height: 1; color: var(--whpc-coral); } #wh-printables-collection .whp-collection__empty-title { margin: 0 0 25px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(42px, 3.4vw, 56px); font-weight: 750; letter-spacing: -0.055em; line-height: 1.08; color: var(--whpc-ink); } #wh-printables-collection .whp-collection__empty-title em { display: block; font-style: normal; color: var(--whpc-teal); } #wh-printables-collection .whp-collection__empty-description { max-width: 400px; margin: 0; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.9; color: #6f6971; } #wh-printables-collection .whp-collection__empty-footnote { display: flex; align-items: center; gap: 13px; margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(193, 157, 123, 0.25); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; line-height: 1.6; color: #91837b; } #wh-printables-collection .whp-collection__empty-symbol { font-size: 23px; line-height: 1; color: var(--whpc-coral); } /* ======================================================= 10 — WOW: CREATIVE REVEAL Soft artistic hover interaction ======================================================== */ @media (hover: hover) and (pointer: fine) { #wh-printables-collection .whp-collection__empty:hover { border-color: rgba(245, 119, 96, 0.32); box-shadow: 0 34px 75px rgba(104, 72, 49, 0.085), 0 7px 20px rgba(104, 72, 49, 0.035); } #wh-printables-collection .whp-collection__empty:hover::after { transform: translate(-50%, -50%) scale(1.22); opacity: 1; } #wh-printables-collection .whp-collection__empty:hover .whp-collection__empty-art svg { filter: drop-shadow(0 30px 36px rgba(83, 58, 47, 0.17)); } } /* ======================================================= 11 — WOW: ART LAYER REVEAL Independent SVG transformations ======================================================== */ #wh-printables-collection .whp-collection__empty-art svg > g { transform-box: fill-box; transform-origin: center; } #wh-printables-collection .whp-collection__empty-art svg > g:nth-of-type(1) { transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1); } #wh-printables-collection .whp-collection__empty-art svg > g:nth-of-type(2) { transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1); } @media (hover: hover) and (pointer: fine) { #wh-printables-collection .whp-collection__empty:hover .whp-collection__empty-art svg > g:nth-of-type(1) { transform: translate(-12px, -9px) rotate(-3deg); } #wh-printables-collection .whp-collection__empty:hover .whp-collection__empty-art svg > g:nth-of-type(2) { transform: translate(14px, 9px) rotate(3deg); } } /* ======================================================= 12 — FUTURE WOOCOMMERCE CATALOG Keep the empty integration container hidden. Product rendering and controls will be added only when real products are available. ======================================================== */ #wh-printables-collection .whp-collection__catalog[hidden] { display: none !important; } /* ======================================================= 13 — EDITORIAL CLOSING ======================================================== */ #wh-printables-collection .whp-collection__closing { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 65px; } #wh-printables-collection .whp-collection__closing-line { width: clamp(50px, 7vw, 115px); height: 1px; background: linear-gradient( 90deg, transparent, rgba(173, 143, 116, 0.5) ); } #wh-printables-collection .whp-collection__closing-line:last-child { transform: rotate(180deg); } #wh-printables-collection .whp-collection__closing p { margin: 0; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 450; line-height: 1.8; text-align: center; color: #81777a; } /* ======================================================= 14 — COMPACT DESKTOP 1025px - 1279px ======================================================== */ @media (max-width: 1279px) { #wh-printables-collection .whp-collection__container { width: 94%; } #wh-printables-collection .whp-collection__title { font-size: clamp(57px, 5vw, 70px); } #wh-printables-collection .whp-collection__empty { gap: 25px; padding: 45px; } #wh-printables-collection .whp-collection__empty-title { font-size: 42px; } } /* ======================================================= 15 — REDUCED MOTION ======================================================== */ @media (prefers-reduced-motion: reduce) { #wh-printables-collection .whp-collection__decoration, #wh-printables-collection .whp-collection__empty-art svg { animation: none !important; } #wh-printables-collection .whp-collection__empty, #wh-printables-collection .whp-collection__empty::after, #wh-printables-collection .whp-collection__empty-art svg, #wh-printables-collection .whp-collection__empty-art svg > g { transition: none !important; } #wh-printables-collection .whp-collection__empty:hover .whp-collection__empty-art svg > g { transform: none !important; } } } /* ========================================================= 16 — DESKTOP WOW KEYFRAMES ========================================================= */ @keyframes whpc-art-breathe { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg) scale(0.985); } 50% { transform: translate3d(0, -9px, 0) rotate(1deg) scale(1.025); } } @keyframes whpc-decoration-orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ========================================================= END — PRINTABLES SECTION 04 / CSS DESKTOP + WOW v1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 04 — EXPLORE THE COLLECTION THE CREATIVE LIBRARY CSS TABLET + MOBILE + WOW v1.0 ELEMENTOR ID: #wh-printables-collection ELEMENTOR CLASSES: wh-printables-collection-section wh-theme-light TABLET: 768px - 1024px MOBILE: 0px - 767px DESKTOP: APPROVED / UNTOUCHED HTML / SVG: UNCHANGED ========================================================= */ /* ========================================================= 01 — SHARED RESPONSIVE FOUNDATION ========================================================= */ @media (max-width: 1024px) { /* ELEMENTOR CONTAINER */ #wh-printables-collection { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; isolation: isolate; } #wh-printables-collection .elementor-widget-html, #wh-printables-collection .elementor-widget-container { width: 100%; max-width: 100%; min-width: 0; } /* SECTION FOUNDATION */ #wh-printables-collection .whp-collection { --whpc-ink: #20212a; --whpc-cream: #fffaf2; --whpc-coral: #f57760; --whpc-amber: #f5b942; --whpc-teal: #159e9b; position: relative; width: 100%; min-height: 0; background: radial-gradient( ellipse at 70% 50%, rgba(245,185,66,0.09), transparent 50% ), linear-gradient( 180deg, #fffaf2 0%, #fffdf9 58%, #fff8ee 100% ); color: var(--whpc-ink); overflow: hidden; isolation: isolate; } #wh-printables-collection .whp-collection *, #wh-printables-collection .whp-collection *::before, #wh-printables-collection .whp-collection *::after { box-sizing: border-box; } /* ATMOSPHERE */ #wh-printables-collection .whp-collection__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-collection .whp-collection__glow { position: absolute; display: block; border-radius: 50%; filter: blur(65px); } #wh-printables-collection .whp-collection__glow--one { width: 350px; height: 350px; top: 27%; right: -20%; background: rgba(245,185,66,0.15); } #wh-printables-collection .whp-collection__glow--two { width: 300px; height: 300px; bottom: -10%; left: -22%; background: rgba(21,158,155,0.09); } #wh-printables-collection .whp-collection__decoration { position: absolute; width: 120px; height: 120px; top: 8%; right: -25px; opacity: 0.45; animation: whpc-responsive-decoration 28s linear infinite; } /* CONTENT CONTAINER */ #wh-printables-collection .whp-collection__container { position: relative; z-index: 2; width: min(100% - 48px, 900px); margin: 0 auto; } /* EDITORIAL HEADER */ #wh-printables-collection .whp-collection__header { display: flex; flex-direction: column; align-items: flex-start; } #wh-printables-collection .whp-collection__heading { width: 100%; min-width: 0; } #wh-printables-collection .whp-collection__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.15em; line-height: 1.5; text-transform: uppercase; color: #98723d; } #wh-printables-collection .whp-collection__eyebrow::before { content: ""; display: block; flex: none; width: 24px; height: 2px; background: var(--whpc-coral); } #wh-printables-collection .whp-collection__title { margin: 0; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; line-height: 1.03; letter-spacing: -0.06em; color: var(--whpc-ink); } #wh-printables-collection .whp-collection__title-accent { display: block; width: fit-content; max-width: 100%; padding: 0.03em 0.04em 0.11em 0; background: linear-gradient( 110deg, #ed7859 0%, #e89c57 55%, #deb25e 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-collection .whp-collection__intro p { margin: 0; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.8; color: #777079; } /* LIBRARY FOUNDATION */ #wh-printables-collection .whp-collection__library { position: relative; width: 100%; min-height: 0; isolation: isolate; } /* EMPTY STATE */ #wh-printables-collection .whp-collection__empty { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 0; border: 1px solid rgba(210,178,146,0.23); border-radius: 26px; background: radial-gradient( ellipse at 50% 35%, rgba(245,185,66,0.09), transparent 58% ), linear-gradient( 135deg, #fffdf8 0%, #fff5e9 100% ); box-shadow: 0 20px 48px rgba(104,72,49,0.055), 0 4px 12px rgba(104,72,49,0.025); overflow: hidden; } /* DECORATIVE FRAME */ #wh-printables-collection .whp-collection__empty::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(222,193,165,0.22); border-radius: 19px; pointer-events: none; } /* BACKGROUND LIGHT */ #wh-printables-collection .whp-collection__empty::after { content: ""; position: absolute; width: 75%; aspect-ratio: 1; top: 30%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient( circle, rgba(245,185,66,0.15), rgba(245,119,96,0.045) 45%, transparent 72% ); filter: blur(20px); pointer-events: none; animation: whpc-responsive-light 9s ease-in-out infinite; } /* CREATIVE ART */ #wh-printables-collection .whp-collection__empty-art { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; perspective: 1100px; } #wh-printables-collection .whp-collection__empty-art svg { display: block; width: 100%; height: auto; max-width: 600px; overflow: visible; filter: drop-shadow(0 16px 24px rgba(83,58,47,0.09)); animation: whpc-responsive-art 8s ease-in-out infinite; } /* * Animate SVG planes independently using * the transforms already present in the HTML. * * SVG transform attribute: * Original group positioning is preserved * by animating the CSS transform as a small * additional motion using translate/rotate. */ #wh-printables-collection .whp-collection__empty-art svg > g { transform-box: fill-box; transform-origin: center; } #wh-printables-collection .whp-collection__empty-art svg > g:nth-of-type(1) { animation: whpc-responsive-plane-back 8.5s ease-in-out infinite; } #wh-printables-collection .whp-collection__empty-art svg > g:nth-of-type(2) { animation: whpc-responsive-plane-front 7.5s ease-in-out infinite; } /* STORY CONTENT */ #wh-printables-collection .whp-collection__empty-content { position: relative; z-index: 3; width: 100%; } #wh-printables-collection .whp-collection__empty-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.15em; line-height: 1.5; color: #a77748; } #wh-printables-collection .whp-collection__empty-eyebrow::before { content: "✳"; font-size: 16px; line-height: 1; color: var(--whpc-coral); } #wh-printables-collection .whp-collection__empty-title { padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 750; letter-spacing: -0.055em; line-height: 1.09; color: var(--whpc-ink); } #wh-printables-collection .whp-collection__empty-title em { display: block; font-style: normal; color: var(--whpc-teal); } #wh-printables-collection .whp-collection__empty-description { margin: 0; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.8; color: #6f6971; } #wh-printables-collection .whp-collection__empty-footnote { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(193,157,123,0.25); font-family: "Inter", sans-serif; font-weight: 500; line-height: 1.6; color: #91837b; } #wh-printables-collection .whp-collection__empty-symbol { flex: none; font-size: 22px; line-height: 1; color: var(--whpc-coral); } /* HIDDEN FUTURE CATALOG */ #wh-printables-collection .whp-collection__catalog[hidden] { display: none !important; } /* EDITORIAL CLOSING */ #wh-printables-collection .whp-collection__closing { display: flex; align-items: center; justify-content: center; } #wh-printables-collection .whp-collection__closing-line { flex: 1; max-width: 90px; height: 1px; background: rgba(173,143,116,0.40); } #wh-printables-collection .whp-collection__closing p { margin: 0; font-family: "Inter", sans-serif; font-weight: 450; line-height: 1.8; text-align: center; color: #81777a; } } /* ========================================================= 02 — TABLET 768px - 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { #wh-printables-collection .whp-collection { padding: 98px 0 90px; } #wh-printables-collection .whp-collection__container { width: min(100% - 64px, 900px); } /* HEADER */ #wh-printables-collection .whp-collection__header { gap: 24px; margin-bottom: 48px; } #wh-printables-collection .whp-collection__eyebrow { margin-bottom: 18px; font-size: 10px; } #wh-printables-collection .whp-collection__title { font-size: clamp(61px, 7.7vw, 82px); } #wh-printables-collection .whp-collection__intro { max-width: 570px; } #wh-printables-collection .whp-collection__intro p { font-size: 16px; } /* LIBRARY STAGE */ #wh-printables-collection .whp-collection__empty { padding: 32px 55px 55px; gap: 0; } #wh-printables-collection .whp-collection__empty-art { max-width: 510px; margin: 0 auto 8px; } #wh-printables-collection .whp-collection__empty-content { max-width: 570px; margin: 0 auto; text-align: center; } #wh-printables-collection .whp-collection__empty-eyebrow { justify-content: center; margin-bottom: 18px; font-size: 10px; } #wh-printables-collection .whp-collection__empty-title { margin: 0 0 20px; font-size: clamp(43px, 5.4vw, 57px); } #wh-printables-collection .whp-collection__empty-description { max-width: 460px; margin: 0 auto; font-size: 15px; } #wh-printables-collection .whp-collection__empty-footnote { justify-content: center; margin-top: 27px; padding-top: 20px; font-size: 12px; } /* CLOSING */ #wh-printables-collection .whp-collection__closing { gap: 20px; margin-top: 53px; } #wh-printables-collection .whp-collection__closing p { font-size: 13px; } } /* ========================================================= 03 — MOBILE 0px - 767px ========================================================= */ @media (max-width: 767px) { #wh-printables-collection .whp-collection { padding: 81px 0 73px; } #wh-printables-collection .whp-collection__container { width: calc(100% - 42px); max-width: 540px; } /* HEADER */ #wh-printables-collection .whp-collection__header { gap: 18px; margin-bottom: 35px; } #wh-printables-collection .whp-collection__eyebrow { margin-bottom: 17px; font-size: 9px; letter-spacing: 0.12em; } #wh-printables-collection .whp-collection__eyebrow::before { width: 19px; } #wh-printables-collection .whp-collection__title { font-size: clamp(42px, 10.5vw, 64px); line-height: 1.04; } #wh-printables-collection .whp-collection__intro { max-width: 440px; } #wh-printables-collection .whp-collection__intro p { font-size: 14px; } /* LIBRARY CARD */ #wh-printables-collection .whp-collection__empty { padding: 18px 22px 32px; border-radius: 22px; } #wh-printables-collection .whp-collection__empty::before { inset: 8px; border-radius: 16px; } #wh-printables-collection .whp-collection__empty-art { max-width: 380px; margin: 0 auto 8px; } #wh-printables-collection .whp-collection__empty-content { max-width: 420px; text-align: left; } #wh-printables-collection .whp-collection__empty-eyebrow { margin-bottom: 17px; font-size: 9px; letter-spacing: 0.11em; } #wh-printables-collection .whp-collection__empty-title { margin: 0 0 18px; font-size: clamp(33px, 8.6vw, 46px); } #wh-printables-collection .whp-collection__empty-description { font-size: 13px; } #wh-printables-collection .whp-collection__empty-footnote { margin-top: 25px; padding-top: 18px; font-size: 11px; } /* CLOSING */ #wh-printables-collection .whp-collection__closing { gap: 13px; margin-top: 44px; } #wh-printables-collection .whp-collection__closing p { max-width: 260px; font-size: 12px; } } /* ========================================================= 04 — SMALL MOBILE Up to 390px ========================================================= */ @media (max-width: 390px) { #wh-printables-collection .whp-collection__container { width: calc(100% - 36px); } #wh-printables-collection .whp-collection__title { font-size: clamp(39px, 10.3vw, 43px); } #wh-printables-collection .whp-collection__empty { padding: 15px 18px 28px; } #wh-printables-collection .whp-collection__empty-art { margin-bottom: 2px; } #wh-printables-collection .whp-collection__empty-title { font-size: 32px; } #wh-printables-collection .whp-collection__empty-description { font-size: 12px; } #wh-printables-collection .whp-collection__empty-footnote { font-size: 10px; } } /* ========================================================= 05 — RESPONSIVE WOW ANIMATIONS ========================================================= */ @keyframes whpc-responsive-art { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.7deg) scale(0.985); } 50% { transform: translate3d(0, -9px, 0) rotate(0.7deg) scale(1.02); } } @keyframes whpc-responsive-plane-back { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-7px, -8px) rotate(-2deg); } } @keyframes whpc-responsive-plane-front { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(8px, 7px) rotate(2deg); } } @keyframes whpc-responsive-light { 0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.95); } 50% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.1); } } @keyframes whpc-responsive-decoration { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ========================================================= 06 — TOUCH BEHAVIOR No hover dependency on touch devices. ========================================================= */ @media (max-width: 1024px) and (hover: none) { #wh-printables-collection .whp-collection__empty { -webkit-tap-highlight-color: transparent; } } /* ========================================================= 07 — REDUCED MOTION ACCESSIBILITY ========================================================= */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-printables-collection .whp-collection__decoration, #wh-printables-collection .whp-collection__empty-art svg, #wh-printables-collection .whp-collection__empty-art svg > g, #wh-printables-collection .whp-collection__empty::after { animation: none !important; transition: none !important; } #wh-printables-collection .whp-collection__empty-art svg { transform: none !important; } #wh-printables-collection .whp-collection__empty-art svg > g { transform: none !important; } #wh-printables-collection .whp-collection__empty::after { transform: translate(-50%, -50%) !important; } } /* ========================================================= END — PRINTABLES SECTION 04 / CSS TABLET + MOBILE + WOW v1.0 ========================================================= *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-10c4376 *//* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 05 — FROM DOWNLOAD TO DELIGHT DIGITAL TO TANGIBLE EXPERIENCE CSS DESKTOP + AMBIENT WOW v1.0 ELEMENTOR ID: #wh-printables-transformation ELEMENTOR CLASSES: wh-printables-transformation-section wh-theme-dark DESKTOP: min-width 1025px TABLET / MOBILE: PENDING SCROLL JAVASCRIPT: PENDING SECTIONS 01–04: UNTOUCHED ========================================================= */ @media (min-width: 1025px) { /* ======================================================= 01 — ELEMENTOR CONTAINER ======================================================== */ #wh-printables-transformation { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; isolation: isolate; } #wh-printables-transformation .elementor-widget-html, #wh-printables-transformation .elementor-widget-container { width: 100%; max-width: 100%; } /* ======================================================= 02 — DEEP TEAL FOUNDATION ======================================================== */ #wh-printables-transformation .whp-transform { --wht-ink: #10272d; --wht-deep: #0d252b; --wht-cream: #fff8ed; --wht-coral: #f57760; --wht-amber: #f5b942; --wht-teal: #69d0bf; position: relative; width: 100%; padding: 130px 0 110px; background: radial-gradient( ellipse at 50% 44%, rgba(36, 115, 115, 0.30), transparent 62% ), linear-gradient( 145deg, #10383e 0%, #102c34 48%, #0c2029 100% ); color: var(--wht-cream); overflow: hidden; isolation: isolate; } #wh-printables-transformation .whp-transform *, #wh-printables-transformation .whp-transform *::before, #wh-printables-transformation .whp-transform *::after { box-sizing: border-box; } /* ======================================================= 03 — ATMOSPHERE ======================================================== */ #wh-printables-transformation .whp-transform__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-transformation .whp-transform__glow { position: absolute; display: block; border-radius: 50%; filter: blur(85px); opacity: 0.75; } #wh-printables-transformation .whp-transform__glow--teal { width: 600px; height: 600px; left: -15%; top: 19%; background: rgba(32, 173, 164, 0.19); } #wh-printables-transformation .whp-transform__glow--amber { width: 550px; height: 550px; right: 2%; top: 29%; background: rgba(245, 185, 66, 0.105); } #wh-printables-transformation .whp-transform__glow--coral { width: 400px; height: 400px; right: -10%; bottom: -18%; background: rgba(245, 119, 96, 0.12); } #wh-printables-transformation .whp-transform__grain { position: absolute; inset: 0; opacity: 0.055; background-image: radial-gradient( rgba(255,255,255,0.24) 0.6px, transparent 0.8px ); background-size: 8px 8px; } /* ======================================================= 04 — MAIN CONTAINER ======================================================== */ #wh-printables-transformation .whp-transform__container { position: relative; z-index: 2; width: min(1440px, 90%); margin: 0 auto; } /* ======================================================= 05 — EDITORIAL HEADER ======================================================== */ #wh-printables-transformation .whp-transform__header { position: relative; max-width: 870px; margin: 0 auto 75px; text-align: center; } #wh-printables-transformation .whp-transform__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 25px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 750; line-height: 1.5; letter-spacing: 0.19em; text-transform: uppercase; color: #f0c587; } #wh-printables-transformation .whp-transform__eyebrow::before, #wh-printables-transformation .whp-transform__eyebrow::after { content: ""; display: block; width: 25px; height: 1px; background: rgba(245,185,66,0.65); } #wh-printables-transformation .whp-transform__title { margin: 0 0 27px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(66px, 6.5vw, 103px); font-weight: 800; line-height: 1.02; letter-spacing: -0.065em; color: var(--wht-cream); } #wh-printables-transformation .whp-transform__title-accent { display: block; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0.03em 0.04em 0.12em; background: linear-gradient( 110deg, #6dd8c5 0%, #f0ce83 55%, #f58d72 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-transformation .whp-transform__description { max-width: 640px; margin: 0 auto; font-family: "Inter", sans-serif; font-size: clamp(16px, 1.25vw, 18px); font-weight: 400; line-height: 1.85; color: #c2d8d7; } /* ======================================================= 06 — PANORAMIC EXPERIENCE ======================================================== */ #wh-printables-transformation .whp-transform__experience { position: relative; width: 100%; padding: 55px 45px 35px; border: 1px solid rgba(153, 218, 209, 0.15); border-radius: 34px; background: radial-gradient( ellipse at 50% 44%, rgba(79, 187, 169, 0.09), transparent 60% ), linear-gradient( 135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01) ); box-shadow: 0 35px 90px rgba(0,0,0,0.17), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; isolation: isolate; } /* ======================================================= 07 — STAGE ATMOSPHERE ======================================================== */ #wh-printables-transformation .whp-transform__stage-atmosphere { position: absolute; inset: 0; z-index: 0; pointer-events: none; } #wh-printables-transformation .whp-transform__stage-light { position: absolute; width: 620px; height: 420px; top: 38%; left: 50%; border-radius: 50%; background: radial-gradient( ellipse, rgba(108, 207, 188, 0.15), rgba(245, 185, 66, 0.07) 40%, transparent 72% ); filter: blur(24px); animation: wht-stage-light 9s ease-in-out infinite; } #wh-printables-transformation .whp-transform__stage-orbit { position: absolute; top: 49%; left: 50%; width: 520px; height: 300px; border: 1px solid rgba(105,208,191,0.13); border-radius: 50%; transform: translate(-50%,-50%) rotate(-16deg); } #wh-printables-transformation .whp-transform__stage-orbit--two { width: 420px; height: 240px; border-color: rgba(245,185,66,0.13); border-style: dashed; transform: translate(-50%,-50%) rotate(18deg); } /* ======================================================= 08 — VISUAL STORY GRID ======================================================== */ #wh-printables-transformation .whp-transform__visual { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 0.56fr) minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; min-height: 470px; perspective: 1300px; } /* ======================================================= 09 — DIGITAL BEGINNING ======================================================== */ #wh-printables-transformation .whp-transform__digital { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 27px; min-width: 0; } #wh-printables-transformation .whp-transform__digital-frame { position: relative; width: clamp(230px, 22vw, 310px); padding: 10px; background: linear-gradient( 145deg, #243e48, #102830 ); border: 2px solid rgba(139,220,214,0.35); border-radius: 17px; box-shadow: 0 30px 58px rgba(0,0,0,0.26), 0 0 40px rgba(52,190,178,0.08), inset 0 1px 0 rgba(255,255,255,0.10); transform: rotateY(8deg) rotate(-4deg); transform-style: preserve-3d; transition: transform 0.75s cubic-bezier(.2,.8,.2,1), box-shadow 0.75s ease; } #wh-printables-transformation .whp-transform__digital-topbar { display: flex; align-items: center; gap: 6px; height: 24px; padding-left: 7px; } #wh-printables-transformation .whp-transform__digital-topbar span { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(210,246,238,0.42); } #wh-printables-transformation .whp-transform__digital-topbar span:first-child { background: var(--wht-coral); } #wh-printables-transformation .whp-transform__digital-screen { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #25515a; } #wh-printables-transformation .whp-transform__digital-screen svg { display: block; width: 100%; height: 100%; } #wh-printables-transformation .whp-transform__digital-screen::after { content: ""; position: absolute; inset: 35px 10px 10px; background: linear-gradient( 115deg, rgba(255,255,255,0.13), transparent 40%, rgba(255,255,255,0.025) 75% ); border-radius: 8px; pointer-events: none; } /* ======================================================= 10 — TANGIBLE CREATION ======================================================== */ #wh-printables-transformation .whp-transform__tangible { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 27px; min-width: 0; } #wh-printables-transformation .whp-transform__paper { position: relative; z-index: 2; width: clamp(230px, 22vw, 310px); aspect-ratio: 4 / 5; padding: 10px; background: #ffffff; border-radius: 4px; box-shadow: 0 35px 65px rgba(0,0,0,0.28), 0 7px 16px rgba(0,0,0,0.13); transform: rotateY(-8deg) rotate(6deg); transition: transform 0.75s cubic-bezier(.2,.8,.2,1), box-shadow 0.75s ease; } #wh-printables-transformation .whp-transform__paper svg { display: block; width: 100%; height: 100%; border-radius: 2px; } #wh-printables-transformation .whp-transform__paper-shadow { position: absolute; z-index: 0; width: 250px; height: 50px; top: 77%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.27); filter: blur(27px); border-radius: 50%; } /* ======================================================= 11 — VISUAL LABELS ======================================================== */ #wh-printables-transformation .whp-transform__visual-label { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 750; letter-spacing: 0.18em; line-height: 1.5; color: #e2c798; text-align: center; } /* ======================================================= 12 — TRANSFORMATION BRIDGE ======================================================== */ #wh-printables-transformation .whp-transform__bridge { position: relative; z-index: 4; width: 100%; height: 260px; min-width: 0; pointer-events: none; } #wh-printables-transformation .whp-transform__bridge-path { position: absolute; width: 145%; height: 100%; top: 0; left: -22.5%; overflow: visible; filter: drop-shadow( 0 0 8px rgba(245,185,66,0.19) ); } #wh-printables-transformation .whp-transform__bridge-line { stroke-dasharray: 7 13; animation: wht-bridge-flow 10s linear infinite; } #wh-printables-transformation .whp-transform__bridge-line--two { stroke-dasharray: 4 14; animation-duration: 13s; animation-direction: reverse; } #wh-printables-transformation .whp-transform__bridge-particle { position: absolute; z-index: 5; display: block; border-radius: 50%; animation: wht-particle-drift 5s ease-in-out infinite alternate; } #wh-printables-transformation .whp-transform__bridge-particle--one { top: 20%; left: 10%; width: 10px; height: 10px; background: var(--wht-amber); } #wh-printables-transformation .whp-transform__bridge-particle--two { top: 65%; left: 30%; width: 7px; height: 7px; background: var(--wht-teal); animation-delay: -2s; } #wh-printables-transformation .whp-transform__bridge-particle--three { top: 30%; right: 12%; width: 12px; height: 12px; background: var(--wht-coral); animation-delay: -3s; } #wh-printables-transformation .whp-transform__bridge-particle--four { bottom: 18%; right: 27%; width: 6px; height: 6px; background: #ffffff; animation-delay: -1s; } #wh-printables-transformation .whp-transform__bridge-spark { position: absolute; z-index: 6; width: 46px; height: 46px; top: 50%; left: 50%; transform: translate(-50%,-50%); filter: drop-shadow( 0 0 20px rgba(245,185,66,0.28) ); animation: wht-spark-pulse 5s ease-in-out infinite; } /* ======================================================= 13 — DESKTOP WOW / HOVER ======================================================== */ @media (hover: hover) and (pointer: fine) { #wh-printables-transformation .whp-transform__visual:hover .whp-transform__digital-frame { transform: translateY(-8px) rotateY(3deg) rotate(-2deg); box-shadow: 0 38px 65px rgba(0,0,0,0.30), 0 0 55px rgba(52,190,178,0.16); } #wh-printables-transformation .whp-transform__visual:hover .whp-transform__paper { transform: translateY(-10px) rotateY(-3deg) rotate(3deg); box-shadow: 0 44px 75px rgba(0,0,0,0.30); } } /* ======================================================= 14 — PROGRESS BAR VISUAL ONLY UNTIL SCROLL JS ======================================================== */ #wh-printables-transformation .whp-transform__progress { position: relative; z-index: 5; display: flex; align-items: center; gap: 23px; width: min(650px, 85%); margin: 42px auto 5px; } #wh-printables-transformation .whp-transform__progress-label { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 750; letter-spacing: 0.17em; color: #a7c9c4; } #wh-printables-transformation .whp-transform__progress-track { position: relative; flex: 1; height: 3px; border-radius: 5px; background: rgba(255,255,255,0.16); overflow: hidden; } #wh-printables-transformation .whp-transform__progress-fill { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, #69d0bf, #f5b942, #f57760 ); box-shadow: 0 0 12px rgba(245,185,66,0.22); } /* ======================================================= 15 — THREE NARRATIVE STEPS ======================================================== */ #wh-printables-transformation .whp-transform__steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(28px, 4vw, 65px); margin-top: 85px; } #wh-printables-transformation .whp-transform__step { position: relative; display: flex; align-items: flex-start; gap: 22px; padding-top: 27px; border-top: 1px solid rgba(157,218,208,0.25); } #wh-printables-transformation .whp-transform__step::before { content: ""; position: absolute; width: 42px; height: 2px; left: 0; top: -1px; background: var(--wht-amber); } #wh-printables-transformation .whp-transform__step-number { flex: none; font-family: "Bricolage Grotesque", sans-serif; font-size: 31px; font-weight: 750; line-height: 1.1; color: var(--wht-teal); } #wh-printables-transformation .whp-transform__step-content h3 { margin: 0 0 13px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(21px, 1.7vw, 27px); font-weight: 750; letter-spacing: -0.04em; line-height: 1.15; color: var(--wht-cream); } #wh-printables-transformation .whp-transform__step-content p { max-width: 310px; margin: 0; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.8; color: #b4cecb; } /* ======================================================= 16 — EDITORIAL CLOSING ======================================================== */ #wh-printables-transformation .whp-transform__closing { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 92px; } #wh-printables-transformation .whp-transform__closing-line { width: clamp(50px, 7vw, 125px); height: 1px; background: linear-gradient( 90deg, transparent, rgba(245,185,66,0.45) ); } #wh-printables-transformation .whp-transform__closing-line:last-child { transform: rotate(180deg); } #wh-printables-transformation .whp-transform__closing p { max-width: 570px; margin: 0; font-family: "Inter", sans-serif; font-size: 15px; font-weight: 450; line-height: 1.85; text-align: center; color: #bed7d1; } /* ======================================================= 17 — COMPACT DESKTOP 1025px–1279px ======================================================== */ @media (max-width: 1279px) { #wh-printables-transformation .whp-transform__container { width: 94%; } #wh-printables-transformation .whp-transform__experience { padding: 45px 25px 32px; } #wh-printables-transformation .whp-transform__digital-frame, #wh-printables-transformation .whp-transform__paper { width: 230px; } #wh-printables-transformation .whp-transform__visual { grid-template-columns: minmax(0,1fr) minmax(105px,0.45fr) minmax(0,1fr); } #wh-printables-transformation .whp-transform__step { gap: 14px; } } /* ======================================================= 18 — REDUCED MOTION ======================================================== */ @media (prefers-reduced-motion: reduce) { #wh-printables-transformation .whp-transform__stage-light, #wh-printables-transformation .whp-transform__bridge-line, #wh-printables-transformation .whp-transform__bridge-particle, #wh-printables-transformation .whp-transform__bridge-spark { animation: none !important; } #wh-printables-transformation .whp-transform__digital-frame, #wh-printables-transformation .whp-transform__paper { transition: none !important; } #wh-printables-transformation .whp-transform__visual:hover .whp-transform__digital-frame { transform: rotateY(8deg) rotate(-4deg); } #wh-printables-transformation .whp-transform__visual:hover .whp-transform__paper { transform: rotateY(-8deg) rotate(6deg); } } } /* ========================================================= 19 — DESKTOP ANIMATION KEYFRAMES ========================================================= */ @keyframes wht-stage-light { 0%, 100% { opacity: 0.65; transform: translate(-50%,-50%) scale(0.94); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } } @keyframes wht-bridge-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -200; } } @keyframes wht-particle-drift { 0% { transform: translate3d(0,0,0); opacity: 0.65; } 100% { transform: translate3d(9px,-17px,0); opacity: 1; } } @keyframes wht-spark-pulse { 0%, 100% { transform: translate(-50%,-50%) scale(0.85); opacity: 0.65; } 50% { transform: translate(-50%,-50%) scale(1.2); opacity: 1; } } /* ========================================================= END — PRINTABLES SECTION 05 / CSS DESKTOP + AMBIENT WOW v1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 05 — FROM DOWNLOAD TO DELIGHT DIGITAL TO TANGIBLE EXPERIENCE CSS TABLET + MOBILE + WOW v1.0 ELEMENTOR ID: #wh-printables-transformation ELEMENTOR CLASSES: wh-printables-transformation-section wh-theme-dark TABLET: 768px - 1024px MOBILE: 0px - 767px DESKTOP: APPROVED / UNTOUCHED SCROLL JS: PENDING ========================================================= */ /* ========================================================= 01 — RESPONSIVE FOUNDATION ========================================================= */ @media (max-width: 1024px) { /* ELEMENTOR CONTAINER */ #wh-printables-transformation { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; isolation: isolate; } #wh-printables-transformation .elementor-widget-html, #wh-printables-transformation .elementor-widget-container { width: 100%; max-width: 100%; min-width: 0; } /* SECTION FOUNDATION */ #wh-printables-transformation .whp-transform { --wht-ink: #10272d; --wht-deep: #0d252b; --wht-cream: #fff8ed; --wht-coral: #f57760; --wht-amber: #f5b942; --wht-teal: #69d0bf; position: relative; width: 100%; min-height: 0; background: radial-gradient( ellipse at 50% 42%, rgba(36, 115, 115, 0.27), transparent 62% ), linear-gradient( 145deg, #10383e 0%, #102c34 48%, #0c2029 100% ); color: var(--wht-cream); overflow: hidden; isolation: isolate; } #wh-printables-transformation .whp-transform *, #wh-printables-transformation .whp-transform *::before, #wh-printables-transformation .whp-transform *::after { box-sizing: border-box; } /* ATMOSPHERE */ #wh-printables-transformation .whp-transform__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-transformation .whp-transform__glow { position: absolute; display: block; border-radius: 50%; filter: blur(65px); opacity: 0.75; } #wh-printables-transformation .whp-transform__glow--teal { width: 380px; height: 380px; left: -25%; top: 19%; background: rgba(32, 173, 164, 0.19); } #wh-printables-transformation .whp-transform__glow--amber { width: 360px; height: 360px; right: -18%; top: 38%; background: rgba(245, 185, 66, 0.11); } #wh-printables-transformation .whp-transform__glow--coral { width: 300px; height: 300px; right: -20%; bottom: -10%; background: rgba(245, 119, 96, 0.11); } #wh-printables-transformation .whp-transform__grain { position: absolute; inset: 0; opacity: 0.055; background-image: radial-gradient( rgba(255,255,255,0.24) 0.6px, transparent 0.8px ); background-size: 8px 8px; } /* MAIN CONTAINER */ #wh-printables-transformation .whp-transform__container { position: relative; z-index: 2; width: min(100% - 48px, 900px); margin: 0 auto; } /* HEADER */ #wh-printables-transformation .whp-transform__header { position: relative; width: 100%; margin-left: auto; margin-right: auto; text-align: center; } #wh-printables-transformation .whp-transform__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.15em; line-height: 1.5; text-transform: uppercase; color: #f0c587; } #wh-printables-transformation .whp-transform__eyebrow::before, #wh-printables-transformation .whp-transform__eyebrow::after { content: ""; display: block; flex: none; width: 20px; height: 1px; background: rgba(245,185,66,0.65); } #wh-printables-transformation .whp-transform__title { padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; line-height: 1.03; letter-spacing: -0.06em; color: var(--wht-cream); } #wh-printables-transformation .whp-transform__title-accent { display: block; width: fit-content; max-width: 100%; margin: 0 auto; padding: 0.03em 0.04em 0.12em; background: linear-gradient( 110deg, #6dd8c5 0%, #f0ce83 55%, #f58d72 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-transformation .whp-transform__description { margin: 0 auto; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.8; color: #c2d8d7; } /* EXPERIENCE FOUNDATION */ #wh-printables-transformation .whp-transform__experience { position: relative; width: 100%; border: 1px solid rgba(153,218,209,0.15); border-radius: 26px; background: radial-gradient( ellipse at 50% 44%, rgba(79,187,169,0.09), transparent 60% ), linear-gradient( 135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01) ); box-shadow: 0 25px 65px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden; isolation: isolate; } /* STAGE ATMOSPHERE */ #wh-printables-transformation .whp-transform__stage-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-transformation .whp-transform__stage-light { position: absolute; width: 85%; height: 55%; top: 43%; left: 50%; border-radius: 50%; background: radial-gradient( ellipse, rgba(108,207,188,0.15), rgba(245,185,66,0.07) 40%, transparent 72% ); filter: blur(23px); animation: wht-responsive-light 9s ease-in-out infinite; } #wh-printables-transformation .whp-transform__stage-orbit { position: absolute; top: 43%; left: 50%; width: 70%; height: 30%; border: 1px solid rgba(105,208,191,0.13); border-radius: 50%; transform: translate(-50%,-50%) rotate(-16deg); } #wh-printables-transformation .whp-transform__stage-orbit--two { width: 55%; height: 23%; border-color: rgba(245,185,66,0.13); border-style: dashed; transform: translate(-50%,-50%) rotate(18deg); } /* VISUAL FOUNDATION */ #wh-printables-transformation .whp-transform__visual { position: relative; z-index: 2; width: 100%; min-width: 0; } /* DIGITAL PANEL */ #wh-printables-transformation .whp-transform__digital, #wh-printables-transformation .whp-transform__tangible { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; } #wh-printables-transformation .whp-transform__digital-frame { position: relative; width: 100%; max-width: 290px; padding: 9px; background: linear-gradient(145deg,#243e48,#102830); border: 2px solid rgba(139,220,214,0.35); border-radius: 16px; box-shadow: 0 23px 48px rgba(0,0,0,0.25), 0 0 30px rgba(52,190,178,0.07); transform: rotate(-4deg); transform-origin: center; animation: wht-responsive-digital 7s ease-in-out infinite; } #wh-printables-transformation .whp-transform__digital-topbar { display: flex; align-items: center; gap: 6px; height: 22px; padding-left: 6px; } #wh-printables-transformation .whp-transform__digital-topbar span { width: 7px; height: 7px; display: block; border-radius: 50%; background: rgba(210,246,238,0.42); } #wh-printables-transformation .whp-transform__digital-topbar span:first-child { background: var(--wht-coral); } #wh-printables-transformation .whp-transform__digital-screen { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 7px; background: #25515a; } #wh-printables-transformation .whp-transform__digital-screen svg { display: block; width: 100%; height: 100%; } /* PAPER PANEL */ #wh-printables-transformation .whp-transform__paper { position: relative; z-index: 2; width: 100%; max-width: 290px; aspect-ratio: 4 / 5; padding: 9px; background: #ffffff; border-radius: 4px; box-shadow: 0 25px 50px rgba(0,0,0,0.27), 0 6px 13px rgba(0,0,0,0.11); transform: rotate(5deg); transform-origin: center; animation: wht-responsive-paper 7.8s ease-in-out infinite; } #wh-printables-transformation .whp-transform__paper svg { display: block; width: 100%; height: 100%; } #wh-printables-transformation .whp-transform__paper-shadow { position: absolute; z-index: 0; width: 85%; height: 35px; top: 70%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.28); filter: blur(23px); border-radius: 50%; } /* VISUAL LABELS */ #wh-printables-transformation .whp-transform__visual-label { display: block; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.15em; line-height: 1.5; text-align: center; color: #e2c798; } /* BRIDGE FOUNDATION */ #wh-printables-transformation .whp-transform__bridge { position: relative; z-index: 4; min-width: 0; pointer-events: none; } #wh-printables-transformation .whp-transform__bridge-path { position: absolute; display: block; width: 100%; height: 100%; inset: 0; overflow: visible; filter: drop-shadow(0 0 8px rgba(245,185,66,0.20)); } #wh-printables-transformation .whp-transform__bridge-line { stroke-dasharray: 7 13; animation: wht-bridge-flow 10s linear infinite; } #wh-printables-transformation .whp-transform__bridge-line--two { stroke-dasharray: 4 14; animation-duration: 13s; animation-direction: reverse; } /* BRIDGE PARTICLES */ #wh-printables-transformation .whp-transform__bridge-particle { position: absolute; z-index: 5; display: block; border-radius: 50%; animation: wht-responsive-particle 5.5s ease-in-out infinite alternate; } #wh-printables-transformation .whp-transform__bridge-particle--one { top: 18%; left: 15%; width: 10px; height: 10px; background: var(--wht-amber); } #wh-printables-transformation .whp-transform__bridge-particle--two { top: 64%; left: 32%; width: 7px; height: 7px; background: var(--wht-teal); animation-delay: -2s; } #wh-printables-transformation .whp-transform__bridge-particle--three { top: 28%; right: 16%; width: 10px; height: 10px; background: var(--wht-coral); animation-delay: -3s; } #wh-printables-transformation .whp-transform__bridge-particle--four { bottom: 18%; right: 27%; width: 6px; height: 6px; background: #ffffff; animation-delay: -1s; } #wh-printables-transformation .whp-transform__bridge-spark { position: absolute; z-index: 6; width: 39px; height: 39px; top: 50%; left: 50%; filter: drop-shadow(0 0 16px rgba(245,185,66,0.27)); animation: wht-responsive-spark 5s ease-in-out infinite; } /* PROGRESS BAR — VISUAL UNTIL JS */ #wh-printables-transformation .whp-transform__progress { position: relative; z-index: 5; display: flex; align-items: center; width: 100%; } #wh-printables-transformation .whp-transform__progress-label { font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.14em; color: #a7c9c4; } #wh-printables-transformation .whp-transform__progress-track { position: relative; flex: 1; min-width: 0; height: 3px; border-radius: 5px; background: rgba(255,255,255,0.16); overflow: hidden; } #wh-printables-transformation .whp-transform__progress-fill { display: block; width: 0%; height: 100%; border-radius: inherit; background: linear-gradient( 90deg, #69d0bf, #f5b942, #f57760 ); } /* NARRATIVE STEPS */ #wh-printables-transformation .whp-transform__steps { position: relative; display: grid; } #wh-printables-transformation .whp-transform__step { position: relative; display: flex; align-items: flex-start; border-top: 1px solid rgba(157,218,208,0.25); } #wh-printables-transformation .whp-transform__step::before { content: ""; position: absolute; left: 0; top: -1px; width: 37px; height: 2px; background: var(--wht-amber); } #wh-printables-transformation .whp-transform__step-number { flex: none; font-family: "Bricolage Grotesque", sans-serif; font-weight: 750; line-height: 1.1; color: var(--wht-teal); } #wh-printables-transformation .whp-transform__step-content h3 { padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 750; letter-spacing: -0.04em; line-height: 1.15; color: var(--wht-cream); } #wh-printables-transformation .whp-transform__step-content p { margin: 0; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.75; color: #b4cecb; } /* EDITORIAL CLOSING */ #wh-printables-transformation .whp-transform__closing { display: flex; align-items: center; justify-content: center; } #wh-printables-transformation .whp-transform__closing-line { flex: 1; max-width: 95px; height: 1px; background: rgba(245,185,66,0.37); } #wh-printables-transformation .whp-transform__closing p { margin: 0; font-family: "Inter", sans-serif; font-weight: 450; line-height: 1.8; text-align: center; color: #bed7d1; } } /* ========================================================= 02 — TABLET 768px - 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { #wh-printables-transformation .whp-transform { padding: 100px 0 90px; } #wh-printables-transformation .whp-transform__container { width: min(100% - 64px, 900px); } /* HEADER */ #wh-printables-transformation .whp-transform__header { max-width: 720px; margin-bottom: 55px; } #wh-printables-transformation .whp-transform__eyebrow { margin-bottom: 20px; font-size: 10px; } #wh-printables-transformation .whp-transform__title { margin: 0 0 24px; font-size: clamp(62px, 8vw, 83px); } #wh-printables-transformation .whp-transform__description { max-width: 570px; font-size: 16px; } /* HORIZONTAL EXPERIENCE */ #wh-printables-transformation .whp-transform__experience { padding: 40px 25px 33px; } #wh-printables-transformation .whp-transform__visual { display: grid; grid-template-columns: minmax(0, 1fr) minmax(65px, 0.42fr) minmax(0, 1fr); align-items: center; gap: 10px; min-height: 340px; } #wh-printables-transformation .whp-transform__digital, #wh-printables-transformation .whp-transform__tangible { gap: 23px; } #wh-printables-transformation .whp-transform__digital-frame, #wh-printables-transformation .whp-transform__paper { width: min(100%, 230px); } #wh-printables-transformation .whp-transform__bridge { width: 100%; height: 190px; } #wh-printables-transformation .whp-transform__visual-label { font-size: 9px; } #wh-printables-transformation .whp-transform__progress { gap: 15px; width: min(550px, 94%); margin: 42px auto 0; } #wh-printables-transformation .whp-transform__progress-label { font-size: 9px; } /* STEPS */ #wh-printables-transformation .whp-transform__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 65px; } #wh-printables-transformation .whp-transform__step { gap: 13px; padding-top: 24px; } #wh-printables-transformation .whp-transform__step-number { font-size: 27px; } #wh-printables-transformation .whp-transform__step-content h3 { margin: 0 0 11px; font-size: 20px; } #wh-printables-transformation .whp-transform__step-content p { font-size: 12px; } /* CLOSING */ #wh-printables-transformation .whp-transform__closing { gap: 20px; margin-top: 69px; } #wh-printables-transformation .whp-transform__closing p { max-width: 490px; font-size: 13px; } } /* ========================================================= 03 — MOBILE 0px - 767px ========================================================= */ @media (max-width: 767px) { #wh-printables-transformation .whp-transform { padding: 82px 0 75px; } #wh-printables-transformation .whp-transform__container { width: calc(100% - 42px); max-width: 540px; } /* HEADER */ #wh-printables-transformation .whp-transform__header { margin-bottom: 35px; } #wh-printables-transformation .whp-transform__eyebrow { margin-bottom: 18px; font-size: 9px; letter-spacing: 0.12em; } #wh-printables-transformation .whp-transform__eyebrow::before, #wh-printables-transformation .whp-transform__eyebrow::after { width: 15px; } #wh-printables-transformation .whp-transform__title { margin: 0 0 22px; font-size: clamp(42px, 10.5vw, 65px); } #wh-printables-transformation .whp-transform__description { max-width: 430px; font-size: 14px; } /* VERTICAL STORY EXPERIENCE */ #wh-printables-transformation .whp-transform__experience { padding: 36px 18px 30px; border-radius: 23px; } #wh-printables-transformation .whp-transform__visual { display: flex; flex-direction: column; align-items: center; gap: 0; min-height: 0; } #wh-printables-transformation .whp-transform__digital, #wh-printables-transformation .whp-transform__tangible { width: 100%; gap: 19px; } #wh-printables-transformation .whp-transform__digital-frame, #wh-printables-transformation .whp-transform__paper { width: min(68%, 245px); } #wh-printables-transformation .whp-transform__visual-label { font-size: 10px; } /* VERTICAL BRIDGE */ #wh-printables-transformation .whp-transform__bridge { width: min(150px, 55%); height: 155px; margin: 4px auto 10px; } #wh-printables-transformation .whp-transform__bridge-path { width: 155px; height: 120px; top: 50%; left: 50%; inset: auto; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center; } #wh-printables-transformation .whp-transform__bridge-spark { width: 34px; height: 34px; } /* PROGRESS */ #wh-printables-transformation .whp-transform__progress { gap: 10px; margin: 35px auto 0; } #wh-printables-transformation .whp-transform__progress-label { font-size: 8px; letter-spacing: 0.10em; } /* NARRATIVE STEPS */ #wh-printables-transformation .whp-transform__steps { grid-template-columns: 1fr; gap: 31px; margin-top: 59px; } #wh-printables-transformation .whp-transform__step { gap: 20px; padding-top: 22px; } #wh-printables-transformation .whp-transform__step-number { font-size: 29px; } #wh-printables-transformation .whp-transform__step-content h3 { margin: 0 0 10px; font-size: 24px; } #wh-printables-transformation .whp-transform__step-content p { max-width: 330px; font-size: 13px; } /* CLOSING */ #wh-printables-transformation .whp-transform__closing { gap: 13px; margin-top: 62px; } #wh-printables-transformation .whp-transform__closing p { max-width: 285px; font-size: 12px; } } /* ========================================================= 04 — SMALL MOBILE Up to 390px ========================================================= */ @media (max-width: 390px) { #wh-printables-transformation .whp-transform__container { width: calc(100% - 36px); } #wh-printables-transformation .whp-transform__title { font-size: clamp(39px, 10.3vw, 44px); } #wh-printables-transformation .whp-transform__experience { padding: 30px 13px 27px; } #wh-printables-transformation .whp-transform__digital-frame, #wh-printables-transformation .whp-transform__paper { width: min(70%, 225px); } #wh-printables-transformation .whp-transform__bridge { height: 135px; } } /* ========================================================= 05 — RESPONSIVE WOW ANIMATIONS ========================================================= */ @keyframes wht-responsive-digital { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(-2deg); } } @keyframes wht-responsive-paper { 0%, 100% { transform: translateY(0) rotate(5deg); } 50% { transform: translateY(-11px) rotate(3deg); } } @keyframes wht-responsive-light { 0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.95); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } } @keyframes wht-responsive-particle { 0% { transform: translate3d(0,0,0); opacity: 0.6; } 100% { transform: translate3d(7px,-13px,0); opacity: 1; } } @keyframes wht-responsive-spark { 0%, 100% { transform: translate(-50%,-50%) scale(0.85); opacity: 0.7; } 50% { transform: translate(-50%,-50%) scale(1.22); opacity: 1; } } /* ========================================================= 06 — TOUCH BEHAVIOR ========================================================= */ @media (max-width: 1024px) and (hover: none) { #wh-printables-transformation .whp-transform__digital-frame, #wh-printables-transformation .whp-transform__paper { -webkit-tap-highlight-color: transparent; } } /* ========================================================= 07 — REDUCED MOTION ACCESSIBILITY ========================================================= */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-printables-transformation .whp-transform__digital-frame, #wh-printables-transformation .whp-transform__paper, #wh-printables-transformation .whp-transform__stage-light, #wh-printables-transformation .whp-transform__bridge-line, #wh-printables-transformation .whp-transform__bridge-particle, #wh-printables-transformation .whp-transform__bridge-spark { animation: none !important; transition: none !important; } #wh-printables-transformation .whp-transform__digital-frame { transform: rotate(-4deg); } #wh-printables-transformation .whp-transform__paper { transform: rotate(5deg); } #wh-printables-transformation .whp-transform__stage-light { transform: translate(-50%, -50%); } #wh-printables-transformation .whp-transform__bridge-spark { transform: translate(-50%, -50%); } } /* ========================================================= END — PRINTABLES SECTION 05 / CSS TABLET + MOBILE + WOW v1.0 ========================================================= */ /* ========================================================= PRINTABLES — SECTION 05 MOBILE SPACING FIX Lower transformation bridge slightly ========================================================= */ @media (max-width: 767px) { #wh-printables-transformation .whp-transform__digital { margin-bottom: 10px; } #wh-printables-transformation .whp-transform__bridge { height: 170px; margin: 18px auto 18px; } #wh-printables-transformation .whp-transform__bridge-path { top: 56%; } #wh-printables-transformation .whp-transform__stage-orbit { top: 47%; } #wh-printables-transformation .whp-transform__stage-orbit--two { top: 47%; } } @media (max-width: 390px) { #wh-printables-transformation .whp-transform__bridge { height: 155px; margin: 16px auto 16px; } } /* ========================================================= PRINTABLES — SECTION 05 MOBILE SPACING FIX v2 Rebalance bridge between screen and paper ========================================================= */ @media (max-width: 767px) { #wh-printables-transformation .whp-transform__digital { margin-bottom: 4px; } #wh-printables-transformation .whp-transform__bridge { width: min(140px, 52%); height: 138px; margin: 10px auto 14px; } #wh-printables-transformation .whp-transform__bridge-path { width: 145px; height: 112px; top: 52%; left: 50%; inset: auto; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center; } #wh-printables-transformation .whp-transform__stage-orbit { top: 45%; } #wh-printables-transformation .whp-transform__stage-orbit--two { top: 45%; } #wh-printables-transformation .whp-transform__tangible { margin-top: 6px; } } @media (max-width: 390px) { #wh-printables-transformation .whp-transform__bridge { width: min(132px, 50%); height: 126px; margin: 8px auto 12px; } #wh-printables-transformation .whp-transform__bridge-path { width: 136px; height: 104px; top: 52%; } #wh-printables-transformation .whp-transform__tangible { margin-top: 4px; } } /* ========================================================= WONDERHUE — PRINTABLES SECTION 05 — MOBILE BRIDGE FIX v3 Keep original vertical layout. Contain bridge artwork in the middle. DESKTOP AND TABLET UNTOUCHED. ========================================================= */ @media (max-width: 767px) { /* Space between both illustrations */ #wh-printables-transformation .whp-transform__digital { margin-bottom: 0; } #wh-printables-transformation .whp-transform__bridge { width: 110px; height: 145px; margin: 12px auto 14px; flex: 0 0 auto; } /* Scale the SVG artwork instead of shifting the stage */ #wh-printables-transformation .whp-transform__bridge-path { position: absolute; width: 120px; height: 90px; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center; overflow: visible; } /* Central glow */ #wh-printables-transformation .whp-transform__bridge-spark { top: 50%; left: 50%; } /* Keep the printed sheet in normal flow */ #wh-printables-transformation .whp-transform__tangible { margin-top: 0; } /* Background orbits remain decorative */ #wh-printables-transformation .whp-transform__stage-orbit, #wh-printables-transformation .whp-transform__stage-orbit--two { opacity: 0.45; } } @media (max-width: 390px) { #wh-printables-transformation .whp-transform__bridge { height: 135px; margin: 10px auto 12px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3961a2f *//* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 06 — A LITTLE MORE ABOUT YOUR DOWNLOAD THE CREATIVE GUIDE CSS DESKTOP + LIVING PAPER WOW v1.0 ELEMENTOR CSS ID: wh-printables-guide ELEMENTOR CSS CLASSES: wh-printables-guide-section wh-theme-light DESKTOP: 1025px AND UP TABLET / MOBILE: PENDING SECTIONS 01–05: UNTOUCHED ========================================================= */ @media (min-width: 1025px) { /* ======================================================= 01 — ELEMENTOR CONTAINER ======================================================== */ #wh-printables-guide { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: visible; isolation: isolate; } #wh-printables-guide .elementor-widget-html, #wh-printables-guide .elementor-widget-container { width: 100%; max-width: 100%; min-width: 0; } /* ======================================================= 02 — CREATIVE GUIDE FOUNDATION ======================================================== */ #wh-printables-guide .whp-guide { --whg-ink: #22232b; --whg-cream: #fbf6ed; --whg-coral: #f57760; --whg-amber: #f5b942; --whg-teal: #159e9b; --whg-muted: #716c72; position: relative; width: 100%; min-height: 850px; padding: clamp(115px, 10vw, 155px) 0; background: radial-gradient( ellipse at 21% 66%, rgba(245, 185, 66, 0.10), transparent 48% ), linear-gradient( 180deg, #fffaf3 0%, #fbf6ed 55%, #fffaf5 100% ); color: var(--whg-ink); overflow: hidden; isolation: isolate; } #wh-printables-guide .whp-guide *, #wh-printables-guide .whp-guide *::before, #wh-printables-guide .whp-guide *::after { box-sizing: border-box; } /* ======================================================= 03 — BACKGROUND ATMOSPHERE ======================================================== */ #wh-printables-guide .whp-guide__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-guide .whp-guide__glow { position: absolute; display: block; border-radius: 50%; filter: blur(85px); pointer-events: none; } #wh-printables-guide .whp-guide__glow--amber { width: 500px; height: 500px; left: -12%; bottom: -12%; background: rgba(245, 185, 66, 0.16); } #wh-printables-guide .whp-guide__glow--teal { width: 440px; height: 440px; right: -13%; top: 5%; background: rgba(21, 158, 155, 0.075); } #wh-printables-guide .whp-guide__corner-drawing { position: absolute; width: 195px; height: 195px; top: 8%; right: 5%; opacity: 0.55; animation: whg-corner-rotate 32s linear infinite; } /* ======================================================= 04 — MAIN EDITORIAL CONTAINER ======================================================== */ #wh-printables-guide .whp-guide__container { position: relative; z-index: 2; width: min(1420px, 90%); margin: 0 auto; } #wh-printables-guide .whp-guide__layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: clamp(65px, 8vw, 145px); } /* ======================================================= 05 — LEFT EDITORIAL COLUMN ======================================================== */ #wh-printables-guide .whp-guide__editorial { position: relative; min-width: 0; } #wh-printables-guide .whp-guide__header { position: relative; z-index: 4; max-width: 665px; } #wh-printables-guide .whp-guide__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 25px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 750; letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase; color: #a27a42; } #wh-printables-guide .whp-guide__eyebrow::before { content: ""; display: block; flex: none; width: 27px; height: 2px; background: var(--whg-coral); } #wh-printables-guide .whp-guide__title { margin: 0 0 28px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(54px, 5.05vw, 78px); font-weight: 800; line-height: 1.04; letter-spacing: -0.063em; color: var(--whg-ink); } #wh-printables-guide .whp-guide__title-accent { display: block; max-width: 100%; padding: 0.02em 0 0.09em; background: linear-gradient( 110deg, #159e9b 0%, #319d97 52%, #e6a95e 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-guide .whp-guide__introduction { max-width: 490px; margin: 0; font-family: "Inter", sans-serif; font-size: clamp(16px, 1.15vw, 18px); font-weight: 400; line-height: 1.9; color: var(--whg-muted); } /* ======================================================= 06 — LIVING PAPER ARTWORK ======================================================== */ #wh-printables-guide .whp-guide__art { position: relative; z-index: 2; width: min(100%, 610px); height: clamp(375px, 34vw, 490px); margin-top: 46px; perspective: 1100px; transform-style: preserve-3d; filter: drop-shadow(0 30px 33px rgba(94, 70, 46, 0.075)); } /* Gentle halo behind the papers */ #wh-printables-guide .whp-guide__art::before { content: ""; position: absolute; width: 73%; height: 70%; top: 16%; left: 16%; border-radius: 50%; background: radial-gradient( circle, rgba(245, 185, 66, 0.16), rgba(21, 158, 155, 0.055) 47%, transparent 74% ); filter: blur(26px); pointer-events: none; transition: transform 0.8s ease, opacity 0.8s ease; } /* ======================================================= 07 — SHARED PAPER STYLING ======================================================== */ #wh-printables-guide .whp-guide__paper { position: absolute; width: clamp(205px, 19vw, 275px); aspect-ratio: 300 / 390; padding: 9px; border-radius: 9px; background: #fffdf9; border: 1px solid rgba(186, 153, 118, 0.15); box-shadow: 0 24px 42px rgba(86, 66, 50, 0.14), 0 5px 12px rgba(86, 66, 50, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.85); transform-origin: 50% 65%; transition: transform 0.85s cubic-bezier(.2,.8,.2,1), box-shadow 0.85s ease; } #wh-printables-guide .whp-guide__paper svg { display: block; width: 100%; height: 100%; border-radius: 5px; overflow: hidden; } /* ======================================================= 08 — PAPER POSITIONS ======================================================== */ /* BACK — TEAL / AMBER */ #wh-printables-guide .whp-guide__paper--back { z-index: 1; top: 11%; left: 4%; transform: rotate(-15deg) translate3d(0, 0, -30px); } /* MIDDLE — CORAL / TEAL */ #wh-printables-guide .whp-guide__paper--middle { z-index: 2; top: 3%; left: 29%; transform: rotate(12deg) translate3d(0, 0, 0); } /* FRONT — SIGNATURE ART */ #wh-printables-guide .whp-guide__paper--front { z-index: 3; top: 22%; left: 17%; transform: rotate(-2deg) translate3d(0, 0, 40px); box-shadow: 0 32px 58px rgba(86, 66, 50, 0.18), 0 8px 18px rgba(86, 66, 50, 0.08); } /* ======================================================= 09 — LIVING PAPER WOW Independent hover transforms ======================================================== */ @media (hover: hover) and (pointer: fine) { #wh-printables-guide .whp-guide__art:hover::before { transform: scale(1.16); opacity: 1; } #wh-printables-guide .whp-guide__art:hover .whp-guide__paper--back { transform: translate3d(-22px, -14px, -30px) rotate(-20deg); } #wh-printables-guide .whp-guide__art:hover .whp-guide__paper--middle { transform: translate3d(25px, -18px, 0) rotate(17deg); } #wh-printables-guide .whp-guide__art:hover .whp-guide__paper--front { transform: translate3d(0, 16px, 55px) rotate(0deg); box-shadow: 0 43px 70px rgba(86, 66, 50, 0.19), 0 11px 23px rgba(86, 66, 50, 0.09); } } /* ======================================================= 10 — DECORATIVE SPARKS ======================================================== */ #wh-printables-guide .whp-guide__spark { position: absolute; z-index: 5; display: block; width: fit-content; font-family: "Bricolage Grotesque", sans-serif; line-height: 1; pointer-events: none; } #wh-printables-guide .whp-guide__spark--one { top: 3%; left: 5%; font-size: 43px; color: var(--whg-coral); animation: whg-spark-breathe 6s ease-in-out infinite; } #wh-printables-guide .whp-guide__spark--two { top: 13%; right: 1%; font-size: 39px; color: var(--whg-amber); animation: whg-spark-breathe 7s ease-in-out infinite -2s; } #wh-printables-guide .whp-guide__spark--three { left: 4%; bottom: 10%; font-size: 27px; color: var(--whg-teal); animation: whg-spark-breathe 6.5s ease-in-out infinite -3s; } /* ======================================================= 11 — RIGHT INFORMATION COLUMN ======================================================== */ #wh-printables-guide .whp-guide__information { position: relative; min-width: 0; padding-top: 10px; } #wh-printables-guide .whp-guide__information-heading { margin-bottom: 46px; } #wh-printables-guide .whp-guide__information-eyebrow { display: inline-block; margin-bottom: 17px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 750; line-height: 1.5; letter-spacing: 0.19em; text-transform: uppercase; color: #aa7b43; } #wh-printables-guide .whp-guide__information-heading p { max-width: 385px; margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(24px, 2.1vw, 32px); font-weight: 650; line-height: 1.25; letter-spacing: -0.045em; color: #36323a; } /* ======================================================= 12 — EDITORIAL ENTRIES ======================================================== */ #wh-printables-guide .whp-guide__entry { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: clamp(15px, 1.8vw, 28px); padding: 32px 6px 34px; border-top: 1px solid rgba(169, 147, 124, 0.28); transition: padding-left 0.5s cubic-bezier(.2,.8,.2,1), background-color 0.5s ease; } #wh-printables-guide .whp-guide__entry-number { font-family: "Bricolage Grotesque", sans-serif; font-size: 29px; font-weight: 750; line-height: 1.1; color: var(--whg-teal); transition: color 0.45s ease, transform 0.45s ease; } #wh-printables-guide .whp-guide__entry-content { min-width: 0; } #wh-printables-guide .whp-guide__entry-content h3 { margin: 0 0 13px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(21px, 1.85vw, 27px); font-weight: 750; line-height: 1.18; letter-spacing: -0.042em; color: var(--whg-ink); } #wh-printables-guide .whp-guide__entry-content p { max-width: 410px; margin: 0; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.85; color: var(--whg-muted); } /* Accent line */ #wh-printables-guide .whp-guide__entry-accent { position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: linear-gradient( 90deg, var(--whg-teal), var(--whg-amber), var(--whg-coral) ); transition: width 0.7s cubic-bezier(.2,.8,.2,1); pointer-events: none; } /* Editorial hover */ @media (hover: hover) and (pointer: fine) { #wh-printables-guide .whp-guide__entry:hover { padding-left: 15px; background: rgba(255, 255, 255, 0.24); } #wh-printables-guide .whp-guide__entry:hover .whp-guide__entry-number { color: var(--whg-coral); transform: translateY(-3px); } #wh-printables-guide .whp-guide__entry:hover .whp-guide__entry-accent { width: 100%; } } /* ======================================================= 13 — CLOSING NOTE ======================================================== */ #wh-printables-guide .whp-guide__note { display: flex; align-items: center; gap: 16px; margin-top: 22px; padding: 25px 0; border-top: 1px solid rgba(169, 147, 124, 0.28); } #wh-printables-guide .whp-guide__note-symbol { flex: none; font-family: "Bricolage Grotesque", sans-serif; font-size: 27px; line-height: 1; color: var(--whg-coral); } #wh-printables-guide .whp-guide__note p { max-width: 380px; margin: 0; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; line-height: 1.75; color: #928477; } /* ======================================================= 14 — COMPACT DESKTOP 1025px - 1279px ======================================================== */ @media (max-width: 1279px) { #wh-printables-guide .whp-guide__container { width: 94%; } #wh-printables-guide .whp-guide__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } #wh-printables-guide .whp-guide__title { font-size: clamp(52px, 5vw, 64px); } #wh-printables-guide .whp-guide__art { height: 405px; } #wh-printables-guide .whp-guide__paper { width: 220px; } #wh-printables-guide .whp-guide__entry { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; } #wh-printables-guide .whp-guide__entry-content h3 { font-size: 22px; } } /* ======================================================= 15 — REDUCED MOTION ACCESSIBILITY ======================================================== */ @media (prefers-reduced-motion: reduce) { #wh-printables-guide .whp-guide__corner-drawing, #wh-printables-guide .whp-guide__spark { animation: none !important; } #wh-printables-guide .whp-guide__paper, #wh-printables-guide .whp-guide__entry, #wh-printables-guide .whp-guide__entry-number, #wh-printables-guide .whp-guide__entry-accent, #wh-printables-guide .whp-guide__art::before { transition: none !important; } #wh-printables-guide .whp-guide__art:hover .whp-guide__paper--back { transform: rotate(-15deg) translate3d(0,0,-30px); } #wh-printables-guide .whp-guide__art:hover .whp-guide__paper--middle { transform: rotate(12deg) translate3d(0,0,0); } #wh-printables-guide .whp-guide__art:hover .whp-guide__paper--front { transform: rotate(-2deg) translate3d(0,0,40px); } } } /* ========================================================= 16 — DESKTOP ANIMATION KEYFRAMES ========================================================= */ @keyframes whg-corner-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes whg-spark-breathe { 0%, 100% { opacity: 0.55; transform: translateY(0) scale(0.9); } 50% { opacity: 1; transform: translateY(-8px) scale(1.12); } } /* ========================================================= END — PRINTABLES SECTION 06 / CSS DESKTOP + LIVING PAPER WOW v1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 06 — A LITTLE MORE ABOUT YOUR DOWNLOAD THE CREATIVE GUIDE CSS TABLET + MOBILE + LIVING PAPER WOW v1.0 ELEMENTOR CSS ID: #wh-printables-guide ELEMENTOR CSS CLASSES: wh-printables-guide-section wh-theme-light TABLET: 768px - 1024px MOBILE: up to 767px DESKTOP: APPROVED / UNTOUCHED HTML / SVG: UNCHANGED JAVASCRIPT: NOT REQUIRED ========================================================= */ /* ========================================================= 01 — SHARED RESPONSIVE FOUNDATION ========================================================= */ @media (max-width: 1024px) { /* ------------------------------------------------------- ELEMENTOR CONTAINER -------------------------------------------------------- */ #wh-printables-guide { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; isolation: isolate; } #wh-printables-guide .elementor-widget-html, #wh-printables-guide .elementor-widget-container { width: 100%; max-width: 100%; min-width: 0; } /* ------------------------------------------------------- SECTION FOUNDATION -------------------------------------------------------- */ #wh-printables-guide .whp-guide { --whg-ink: #22232b; --whg-cream: #fbf6ed; --whg-coral: #f57760; --whg-amber: #f5b942; --whg-teal: #159e9b; --whg-muted: #716c72; position: relative; width: 100%; min-height: 0; background: radial-gradient( ellipse at 38% 48%, rgba(245, 185, 66, 0.09), transparent 52% ), linear-gradient( 180deg, #fffaf3 0%, #fbf6ed 55%, #fffaf5 100% ); color: var(--whg-ink); overflow: hidden; isolation: isolate; } #wh-printables-guide .whp-guide *, #wh-printables-guide .whp-guide *::before, #wh-printables-guide .whp-guide *::after { box-sizing: border-box; } /* ------------------------------------------------------- BACKGROUND ATMOSPHERE -------------------------------------------------------- */ #wh-printables-guide .whp-guide__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-guide .whp-guide__glow { position: absolute; display: block; border-radius: 50%; filter: blur(65px); pointer-events: none; } #wh-printables-guide .whp-guide__glow--amber { width: 360px; height: 360px; left: -25%; top: 24%; background: rgba(245, 185, 66, 0.13); } #wh-printables-guide .whp-guide__glow--teal { width: 320px; height: 320px; right: -24%; bottom: 9%; background: rgba(21, 158, 155, 0.075); } #wh-printables-guide .whp-guide__corner-drawing { position: absolute; width: 130px; height: 130px; top: 6%; right: -22px; opacity: 0.35; animation: whg-corner-rotate 32s linear infinite; } /* ------------------------------------------------------- MAIN CONTAINER -------------------------------------------------------- */ #wh-printables-guide .whp-guide__container { position: relative; z-index: 2; width: min(100% - 48px, 900px); margin: 0 auto; } #wh-printables-guide .whp-guide__layout { display: flex; flex-direction: column; align-items: stretch; width: 100%; } /* ------------------------------------------------------- EDITORIAL INTRODUCTION -------------------------------------------------------- */ #wh-printables-guide .whp-guide__editorial, #wh-printables-guide .whp-guide__information { position: relative; width: 100%; min-width: 0; } #wh-printables-guide .whp-guide__header { position: relative; z-index: 4; width: 100%; } #wh-printables-guide .whp-guide__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.15em; line-height: 1.5; text-transform: uppercase; color: #a27a42; } #wh-printables-guide .whp-guide__eyebrow::before { content: ""; display: block; flex: none; width: 24px; height: 2px; background: var(--whg-coral); } #wh-printables-guide .whp-guide__title { margin: 0; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; line-height: 1.05; letter-spacing: -0.058em; overflow-wrap: normal; color: var(--whg-ink); } #wh-printables-guide .whp-guide__title-accent { display: block; max-width: 100%; padding: 0.02em 0 0.1em; background: linear-gradient( 110deg, #159e9b 0%, #319d97 52%, #e6a95e 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } #wh-printables-guide .whp-guide__introduction { margin: 0; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.85; color: var(--whg-muted); } /* ------------------------------------------------------- LIVING PAPER STAGE -------------------------------------------------------- */ #wh-printables-guide .whp-guide__art { position: relative; z-index: 2; width: 100%; margin-left: auto; margin-right: auto; perspective: 1000px; transform-style: preserve-3d; filter: drop-shadow( 0 20px 24px rgba(94, 70, 46, 0.075) ); } #wh-printables-guide .whp-guide__art::before { content: ""; position: absolute; width: 75%; height: 70%; top: 16%; left: 12%; border-radius: 50%; background: radial-gradient( circle, rgba(245, 185, 66, 0.15), rgba(21, 158, 155, 0.055) 47%, transparent 74% ); filter: blur(23px); pointer-events: none; animation: whg-responsive-halo 9s ease-in-out infinite; } /* ------------------------------------------------------- PAPER FOUNDATION -------------------------------------------------------- */ #wh-printables-guide .whp-guide__paper { position: absolute; width: var(--whg-paper-width); aspect-ratio: 300 / 390; padding: 7px; border-radius: 8px; background: #fffdf9; border: 1px solid rgba(186, 153, 118, 0.15); box-shadow: 0 19px 34px rgba(86, 66, 50, 0.14), 0 4px 11px rgba(86, 66, 50, 0.055); transform-origin: center 65%; backface-visibility: hidden; will-change: transform; } #wh-printables-guide .whp-guide__paper svg { display: block; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; } /* ------------------------------------------------------- THREE INDEPENDENT PAPER ANIMATIONS Each animation preserves the paper rotation. -------------------------------------------------------- */ #wh-printables-guide .whp-guide__paper--back { z-index: 1; top: 11%; left: 13%; animation: whg-responsive-paper-back 8.5s ease-in-out infinite; } #wh-printables-guide .whp-guide__paper--middle { z-index: 2; top: 4%; left: 43%; animation: whg-responsive-paper-middle 9.5s ease-in-out infinite; } #wh-printables-guide .whp-guide__paper--front { z-index: 3; top: 22%; left: 28%; animation: whg-responsive-paper-front 8s ease-in-out infinite; box-shadow: 0 25px 46px rgba(86, 66, 50, 0.16), 0 6px 15px rgba(86, 66, 50, 0.07); } /* ------------------------------------------------------- SPARKS -------------------------------------------------------- */ #wh-printables-guide .whp-guide__spark { position: absolute; z-index: 5; display: block; font-family: "Bricolage Grotesque", sans-serif; line-height: 1; pointer-events: none; animation: whg-spark-breathe 6.5s ease-in-out infinite; } #wh-printables-guide .whp-guide__spark--one { top: 7%; left: 10%; font-size: 31px; color: var(--whg-coral); } #wh-printables-guide .whp-guide__spark--two { top: 12%; right: 7%; font-size: 30px; color: var(--whg-amber); animation-delay: -2s; } #wh-printables-guide .whp-guide__spark--three { bottom: 14%; left: 10%; font-size: 23px; color: var(--whg-teal); animation-delay: -3.5s; } /* ------------------------------------------------------- INFORMATION HEADING -------------------------------------------------------- */ #wh-printables-guide .whp-guide__information-heading { margin-bottom: 28px; } #wh-printables-guide .whp-guide__information-eyebrow { display: inline-block; font-family: "Inter", sans-serif; font-weight: 750; letter-spacing: 0.17em; line-height: 1.5; text-transform: uppercase; color: #aa7b43; } #wh-printables-guide .whp-guide__information-heading p { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 650; line-height: 1.25; letter-spacing: -0.04em; color: #36323a; } /* ------------------------------------------------------- INFORMATION ENTRIES -------------------------------------------------------- */ #wh-printables-guide .whp-guide__entry { position: relative; display: grid; grid-template-columns: 45px minmax(0, 1fr); align-items: start; gap: 15px; border-top: 1px solid rgba(169, 147, 124, 0.28); } #wh-printables-guide .whp-guide__entry::before { content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 2px; background: var(--whg-amber); } #wh-printables-guide .whp-guide__entry-number { font-family: "Bricolage Grotesque", sans-serif; font-weight: 750; line-height: 1.1; color: var(--whg-teal); } #wh-printables-guide .whp-guide__entry-content { min-width: 0; } #wh-printables-guide .whp-guide__entry-content h3 { margin: 0 0 11px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 750; line-height: 1.18; letter-spacing: -0.04em; color: var(--whg-ink); } #wh-printables-guide .whp-guide__entry-content p { margin: 0; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.8; color: var(--whg-muted); } /* Original hover accent is not needed for touch */ #wh-printables-guide .whp-guide__entry-accent { display: none; } /* ------------------------------------------------------- ENDING NOTE -------------------------------------------------------- */ #wh-printables-guide .whp-guide__note { display: flex; align-items: center; gap: 14px; border-top: 1px solid rgba(169, 147, 124, 0.28); } #wh-printables-guide .whp-guide__note-symbol { flex: none; font-family: "Bricolage Grotesque", sans-serif; line-height: 1; color: var(--whg-coral); } #wh-printables-guide .whp-guide__note p { margin: 0; font-family: "Inter", sans-serif; font-weight: 500; line-height: 1.75; color: #928477; } } /* ========================================================= 02 — TABLET 768px - 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { #wh-printables-guide .whp-guide { padding: 100px 0 92px; } #wh-printables-guide .whp-guide__container { width: min(100% - 64px, 840px); } #wh-printables-guide .whp-guide__layout { gap: 55px; } /* EDITORIAL */ #wh-printables-guide .whp-guide__header { max-width: 740px; } #wh-printables-guide .whp-guide__eyebrow { margin-bottom: 20px; font-size: 10px; } #wh-printables-guide .whp-guide__title { margin-bottom: 24px; font-size: clamp(57px, 7.7vw, 79px); } #wh-printables-guide .whp-guide__introduction { max-width: 530px; font-size: 16px; } /* ART */ #wh-printables-guide .whp-guide__art { --whg-paper-width: clamp(205px, 29vw, 255px); max-width: 590px; height: 430px; margin-top: 35px; } /* INFORMATION */ #wh-printables-guide .whp-guide__information { max-width: 750px; margin: 0 auto; } #wh-printables-guide .whp-guide__information-eyebrow { margin-bottom: 15px; font-size: 10px; } #wh-printables-guide .whp-guide__information-heading p { max-width: 560px; font-size: 30px; } #wh-printables-guide .whp-guide__entry { padding: 28px 0 30px; grid-template-columns: 50px minmax(0, 1fr); gap: 19px; } #wh-printables-guide .whp-guide__entry-number { font-size: 28px; } #wh-printables-guide .whp-guide__entry-content h3 { font-size: 25px; } #wh-printables-guide .whp-guide__entry-content p { max-width: 540px; font-size: 14px; } #wh-printables-guide .whp-guide__note { margin-top: 12px; padding: 23px 0; } #wh-printables-guide .whp-guide__note-symbol { font-size: 25px; } #wh-printables-guide .whp-guide__note p { font-size: 13px; } } /* ========================================================= 03 — MOBILE 0px - 767px ========================================================= */ @media (max-width: 767px) { #wh-printables-guide .whp-guide { padding: 82px 0 75px; } #wh-printables-guide .whp-guide__container { width: calc(100% - 42px); max-width: 540px; } #wh-printables-guide .whp-guide__layout { gap: 34px; } /* EDITORIAL */ #wh-printables-guide .whp-guide__eyebrow { margin-bottom: 18px; font-size: 9px; letter-spacing: 0.12em; } #wh-printables-guide .whp-guide__eyebrow::before { width: 19px; } #wh-printables-guide .whp-guide__title { margin-bottom: 21px; font-size: clamp(38px, 9.6vw, 60px); line-height: 1.06; } /* * The accent can wrap naturally on narrow screens. * No horizontal overflow. */ #wh-printables-guide .whp-guide__title-accent { overflow-wrap: break-word; } #wh-printables-guide .whp-guide__introduction { max-width: 430px; font-size: 14px; } /* ART */ #wh-printables-guide .whp-guide__art { --whg-paper-width: clamp(130px, 41vw, 195px); width: 100%; max-width: 380px; height: clamp(255px, 80vw, 360px); margin-top: 30px; } /* PAPER POSITIONS */ #wh-printables-guide .whp-guide__paper--back { left: 8%; top: 11%; } #wh-printables-guide .whp-guide__paper--middle { left: 41%; top: 4%; } #wh-printables-guide .whp-guide__paper--front { left: 25%; top: 21%; } /* SPARKS */ #wh-printables-guide .whp-guide__spark--one { top: 2%; left: 5%; font-size: 27px; } #wh-printables-guide .whp-guide__spark--two { top: 6%; right: 3%; font-size: 27px; } #wh-printables-guide .whp-guide__spark--three { bottom: 7%; left: 4%; font-size: 20px; } /* INFORMATION */ #wh-printables-guide .whp-guide__information-heading { margin-bottom: 26px; } #wh-printables-guide .whp-guide__information-eyebrow { margin-bottom: 13px; font-size: 9px; } #wh-printables-guide .whp-guide__information-heading p { max-width: 440px; font-size: clamp(24px, 6.4vw, 31px); } #wh-printables-guide .whp-guide__entry { grid-template-columns: 39px minmax(0, 1fr); gap: 13px; padding: 25px 0 28px; } #wh-printables-guide .whp-guide__entry-number { font-size: 25px; } #wh-printables-guide .whp-guide__entry-content h3 { font-size: clamp(20px, 5.3vw, 25px); } #wh-printables-guide .whp-guide__entry-content p { max-width: 410px; font-size: 13px; } /* NOTE */ #wh-printables-guide .whp-guide__note { margin-top: 8px; padding: 21px 0; } #wh-printables-guide .whp-guide__note-symbol { font-size: 23px; } #wh-printables-guide .whp-guide__note p { font-size: 12px; } } /* ========================================================= 04 — SMALL MOBILE Up to 390px ========================================================= */ @media (max-width: 390px) { #wh-printables-guide .whp-guide__container { width: calc(100% - 36px); } #wh-printables-guide .whp-guide__title { font-size: clamp(36px, 9.4vw, 41px); } #wh-printables-guide .whp-guide__art { --whg-paper-width: clamp(122px, 39vw, 153px); height: 265px; } #wh-printables-guide .whp-guide__entry { grid-template-columns: 35px minmax(0, 1fr); gap: 11px; } #wh-printables-guide .whp-guide__entry-content h3 { font-size: 19px; } #wh-printables-guide .whp-guide__entry-content p { font-size: 12px; } } /* ========================================================= 05 — LIVING PAPER WOW TABLET + MOBILE ANIMATIONS ========================================================= */ /* * Important: * All rotations are embedded in the keyframes. * This prevents the papers from jumping between * their initial and animated positions. */ @keyframes whg-responsive-paper-back { 0%, 100% { transform: translate3d(0, 0, -25px) rotate(-15deg); } 50% { transform: translate3d(-7px, -9px, -25px) rotate(-18deg); } } @keyframes whg-responsive-paper-middle { 0%, 100% { transform: translate3d(0, 0, 0) rotate(12deg); } 50% { transform: translate3d(8px, -11px, 0) rotate(15deg); } } @keyframes whg-responsive-paper-front { 0%, 100% { transform: translate3d(0, 0, 30px) rotate(-2deg); } 50% { transform: translate3d(0, 10px, 38px) rotate(0deg); } } @keyframes whg-responsive-halo { 0%, 100% { opacity: 0.55; transform: scale(0.95); } 50% { opacity: 0.95; transform: scale(1.12); } } /* ========================================================= 06 — ACCESSIBILITY REDUCED MOTION ========================================================= */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-printables-guide .whp-guide__paper, #wh-printables-guide .whp-guide__art::before, #wh-printables-guide .whp-guide__spark, #wh-printables-guide .whp-guide__corner-drawing { animation: none !important; transition: none !important; } #wh-printables-guide .whp-guide__paper--back { transform: translate3d(0, 0, -25px) rotate(-15deg); } #wh-printables-guide .whp-guide__paper--middle { transform: translate3d(0, 0, 0) rotate(12deg); } #wh-printables-guide .whp-guide__paper--front { transform: translate3d(0, 0, 30px) rotate(-2deg); } #wh-printables-guide .whp-guide__art::before { transform: none !important; } } /* ========================================================= END — PRINTABLES SECTION 06 / CSS TABLET + MOBILE + LIVING PAPER WOW v1.0 ========================================================= *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-8d35115 *//* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 07 — YOUR NEXT CREATIVE MOMENT STARTS HERE THE FINAL CREATIVE SPARK CSS DESKTOP + WOW v1.0 ELEMENTOR ID: #wh-printables-finale ELEMENTOR CLASSES: wh-printables-finale-section wh-theme-dark DESKTOP: 1025px+ TABLET / MOBILE: PENDING SECTIONS 01–06: UNTOUCHED ========================================================= */ @media (min-width: 1025px) { /* ======================================================= 01 — ELEMENTOR FOUNDATION ======================================================== */ #wh-printables-finale { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; isolation: isolate; overflow: hidden; } #wh-printables-finale .elementor-widget-html, #wh-printables-finale .elementor-widget-container { width: 100%; max-width: 100%; min-width: 0; } /* ======================================================= 02 — CINEMATIC FOUNDATION ======================================================== */ #wh-printables-finale .whp-finale { --whf-ink: #101e27; --whf-cream: #fff8ed; --whf-teal: #65d0c1; --whf-amber: #f5b942; --whf-coral: #f57760; position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 840px; padding: 165px 0 75px; background: radial-gradient( ellipse at 50% 44%, rgba(25, 93, 95, 0.32), transparent 57% ), linear-gradient( 155deg, #142d34 0%, #101e29 53%, #111c28 100% ); color: var(--whf-cream); overflow: hidden; isolation: isolate; } #wh-printables-finale .whp-finale *, #wh-printables-finale .whp-finale *::before, #wh-printables-finale .whp-finale *::after { box-sizing: border-box; } /* ======================================================= 03 — ATMOSPHERE ======================================================== */ #wh-printables-finale .whp-finale__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-finale .whp-finale__glow { position: absolute; display: block; border-radius: 50%; filter: blur(90px); pointer-events: none; animation: whf-glow-breathe 13s ease-in-out infinite; } #wh-printables-finale .whp-finale__glow--teal { top: 10%; left: -14%; width: 530px; height: 530px; background: rgba(64, 194, 182, 0.16); } #wh-printables-finale .whp-finale__glow--amber { top: 22%; left: 50%; width: 600px; height: 540px; margin-left: -300px; background: rgba(245, 185, 66, 0.095); animation-delay: -4s; } #wh-printables-finale .whp-finale__glow--coral { right: -15%; bottom: -15%; width: 520px; height: 520px; background: rgba(245, 119, 96, 0.13); animation-delay: -8s; } #wh-printables-finale .whp-finale__grain { position: absolute; inset: 0; opacity: 0.07; background-image: radial-gradient( rgba(255, 255, 255, 0.3) 0.65px, transparent 0.9px ); background-size: 9px 9px; } /* ======================================================= 04 — FLOATING BACKGROUND ORBS ======================================================== */ #wh-printables-finale .whp-finale__orb { position: absolute; display: block; border-radius: 50%; pointer-events: none; animation: whf-orb-float 11s ease-in-out infinite; } #wh-printables-finale .whp-finale__orb--one { top: 17%; left: 12%; width: 15px; height: 15px; background: var(--whf-coral); box-shadow: 0 0 30px rgba(245,119,96,0.3); } #wh-printables-finale .whp-finale__orb--two { top: 64%; right: 13%; width: 10px; height: 10px; background: var(--whf-teal); animation-delay: -3s; } #wh-printables-finale .whp-finale__orb--three { bottom: 18%; left: 21%; width: 7px; height: 7px; background: var(--whf-amber); animation-delay: -6s; } /* ======================================================= 05 — FULL-BLEED CREATIVE UNIVERSE ======================================================== */ #wh-printables-finale .whp-finale__universe { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; } #wh-printables-finale .whp-finale__art { display: block; width: max(100%, 1450px); height: auto; max-width: none; opacity: 0.83; overflow: visible; transform-origin: center; animation: whf-universe-breathe 17s ease-in-out infinite; } /* ======================================================= 06 — FLOWING CREATIVE PATHS ======================================================== */ #wh-printables-finale .whp-finale__path { fill: none; transform-origin: center; animation: whf-path-shimmer 9s ease-in-out infinite; } #wh-printables-finale .whp-finale__path--two { animation: whf-dashed-flow 18s linear infinite; } #wh-printables-finale .whp-finale__path--three { animation-delay: -4s; } /* ======================================================= 07 — ORBITAL RINGS ======================================================== */ #wh-printables-finale .whp-finale__svg-orbit { transform-box: fill-box; transform-origin: center; } #wh-printables-finale .whp-finale__svg-orbit--one { animation: whf-orbit-rotate 43s linear infinite; } #wh-printables-finale .whp-finale__svg-orbit--two { animation: whf-orbit-rotate 55s linear infinite reverse; } /* ======================================================= 08 — CENTRAL CREATIVE SPARK ======================================================== */ #wh-printables-finale .whp-finale__svg-aura { transform-box: fill-box; transform-origin: center; animation: whf-aura-pulse 9s ease-in-out infinite; } #wh-printables-finale .whp-finale__core { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 28px rgba(245,185,66,0.20)); animation: whf-core-pulse 8s ease-in-out infinite; } /* ======================================================= 09 — FLOATING SVG PARTICLES ======================================================== */ #wh-printables-finale .whp-finale__svg-particle { transform-box: fill-box; transform-origin: center; animation: whf-particle-drift 8s ease-in-out infinite alternate; } #wh-printables-finale .whp-finale__svg-particle--two { animation-delay: -3s; animation-duration: 11s; } #wh-printables-finale .whp-finale__svg-particle--three { animation-delay: -5s; animation-duration: 9s; } #wh-printables-finale .whp-finale__svg-particle--four { animation-delay: -2s; } #wh-printables-finale .whp-finale__svg-particle--five { animation-delay: -6s; animation-duration: 12s; } /* ======================================================= 10 — MAIN CONTENT LAYER ======================================================== */ #wh-printables-finale .whp-finale__container { position: relative; z-index: 5; width: min(1200px, 90%); margin: 0 auto; } #wh-printables-finale .whp-finale__content { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0 auto; text-align: center; } /* * A subtle dark veil immediately behind the copy * preserves readability over the moving SVG. */ #wh-printables-finale .whp-finale__content::before { content: ""; position: absolute; z-index: -1; width: min(100%, 1050px); height: 120%; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient( ellipse, rgba(12, 28, 35, 0.78) 0%, rgba(12, 28, 35, 0.58) 43%, transparent 75% ); pointer-events: none; } /* ======================================================= 11 — EYEBROW ======================================================== */ #wh-printables-finale .whp-finale__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 30px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 750; line-height: 1.5; letter-spacing: 0.21em; text-transform: uppercase; color: #f1ca88; } #wh-printables-finale .whp-finale__eyebrow::before, #wh-printables-finale .whp-finale__eyebrow::after { content: ""; width: 30px; height: 1px; background: rgba(245,185,66,0.65); } /* ======================================================= 12 — CINEMATIC HEADLINE ======================================================== */ #wh-printables-finale .whp-finale__title { max-width: 1120px; margin: 0 0 30px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(70px, 6.8vw, 108px); font-weight: 800; line-height: 1.04; letter-spacing: -0.065em; color: var(--whf-cream); text-wrap: balance; } #wh-printables-finale .whp-finale__title-accent { display: block; max-width: 100%; padding: 0.02em 0.03em 0.1em; background: linear-gradient( 110deg, #6dd8c5 8%, #f3cf81 52%, #f68d73 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ======================================================= 13 — DESCRIPTION ======================================================== */ #wh-printables-finale .whp-finale__description { max-width: 610px; margin: 0 auto; font-family: "Inter", sans-serif; font-size: clamp(16px, 1.25vw, 18px); font-weight: 400; line-height: 1.9; color: #ccdad8; text-wrap: pretty; } /* ======================================================= 14 — PRIMARY CTA ======================================================== */ #wh-printables-finale .whp-finale__actions { display: flex; justify-content: center; align-items: center; margin-top: 42px; } #wh-printables-finale .whp-finale__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 64px; padding: 11px 13px 11px 32px; border: 1px solid transparent; border-radius: 999px; background: var(--whf-coral); color: #171e26; text-decoration: none; cursor: pointer; box-shadow: 0 18px 40px rgba(245,119,96,0.21), inset 0 1px 0 rgba(255,255,255,0.22); overflow: hidden; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; } #wh-printables-finale .whp-finale__cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 20%, rgba(255,255,255,0.20) 50%, transparent 80% ); transform: translateX(-130%); transition: transform 0.7s ease; pointer-events: none; } #wh-printables-finale .whp-finale__cta-text { position: relative; z-index: 2; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 750; line-height: 1.4; letter-spacing: 0.005em; color: inherit; white-space: nowrap; } #wh-printables-finale .whp-finale__cta-icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: rgba(21,30,38,0.13); transition: transform 0.4s cubic-bezier(.2,.8,.2,1), background-color 0.4s ease; } #wh-printables-finale .whp-finale__cta-icon svg { display: block; width: 20px; height: 20px; } /* ======================================================= 15 — CTA HOVER WOW ======================================================== */ @media (hover: hover) and (pointer: fine) { #wh-printables-finale .whp-finale__cta:hover { transform: translateY(-5px); background: #ff896f; box-shadow: 0 24px 54px rgba(245,119,96,0.32), 0 0 35px rgba(245,119,96,0.10); } #wh-printables-finale .whp-finale__cta:hover::before { transform: translateX(130%); } #wh-printables-finale .whp-finale__cta:hover .whp-finale__cta-icon { transform: translateX(4px); background: rgba(21,30,38,0.20); } } #wh-printables-finale .whp-finale__cta:focus-visible { outline: 3px solid #fff8ed; outline-offset: 5px; } /* ======================================================= 16 — FINAL MICROCOPY ======================================================== */ #wh-printables-finale .whp-finale__microcopy { margin: 28px 0 0; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.035em; line-height: 1.6; color: #b9d5d0; } /* ======================================================= 17 — BOTTOM SIGNATURE ======================================================== */ #wh-printables-finale .whp-finale__signature { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 27px; width: min(550px, 80%); margin: 100px auto 0; } #wh-printables-finale .whp-finale__signature-line { flex: 1; height: 1px; background: linear-gradient( 90deg, transparent, rgba(174,215,204,0.35) ); } #wh-printables-finale .whp-finale__signature-line:last-of-type { transform: rotate(180deg); } #wh-printables-finale .whp-finale__signature-text { flex: none; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; color: #9bc9c0; white-space: nowrap; } /* ======================================================= 18 — COMPACT DESKTOP 1025px - 1279px ======================================================== */ @media (max-width: 1279px) { #wh-printables-finale .whp-finale { min-height: 780px; padding-top: 145px; } #wh-printables-finale .whp-finale__container { width: 94%; } #wh-printables-finale .whp-finale__title { font-size: clamp(67px, 6.7vw, 86px); } #wh-printables-finale .whp-finale__art { width: 1450px; } } /* ======================================================= 19 — REDUCED MOTION ======================================================== */ @media (prefers-reduced-motion: reduce) { #wh-printables-finale .whp-finale__glow, #wh-printables-finale .whp-finale__orb, #wh-printables-finale .whp-finale__art, #wh-printables-finale .whp-finale__path, #wh-printables-finale .whp-finale__svg-orbit, #wh-printables-finale .whp-finale__svg-aura, #wh-printables-finale .whp-finale__core, #wh-printables-finale .whp-finale__svg-particle { animation: none !important; } #wh-printables-finale .whp-finale__cta, #wh-printables-finale .whp-finale__cta::before, #wh-printables-finale .whp-finale__cta-icon { transition: none !important; } #wh-printables-finale .whp-finale__cta:hover, #wh-printables-finale .whp-finale__cta:hover .whp-finale__cta-icon { transform: none !important; } } } /* ========================================================= 20 — FINAL CREATIVE SPARK KEYFRAMES ========================================================= */ @keyframes whf-glow-breathe { 0%, 100% { opacity: 0.62; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.1); } } @keyframes whf-orb-float { 0%, 100% { opacity: 0.5; transform: translate3d(0, 0, 0); } 50% { opacity: 1; transform: translate3d(12px, -18px, 0); } } @keyframes whf-universe-breathe { 0%, 100% { transform: scale(0.985) rotate(-0.4deg); } 50% { transform: scale(1.035) rotate(0.4deg); } } @keyframes whf-path-shimmer { 0%, 100% { opacity: 0.43; } 50% { opacity: 0.90; } } @keyframes whf-dashed-flow { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -360; } } @keyframes whf-orbit-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes whf-aura-pulse { 0%, 100% { opacity: 0.58; transform: scale(0.84); } 50% { opacity: 1; transform: scale(1.18); } } @keyframes whf-core-pulse { 0%, 100% { opacity: 0.76; transform: scale(0.88) rotate(-4deg); } 50% { opacity: 1; transform: scale(1.12) rotate(4deg); } } @keyframes whf-particle-drift { 0% { opacity: 0.45; transform: translate3d(0, 0, 0) scale(0.85); } 100% { opacity: 1; transform: translate3d(16px, -20px, 0) scale(1.1); } } /* ========================================================= END — PRINTABLES SECTION 07 / CSS DESKTOP + FINAL SPARK WOW v1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 07 — YOUR NEXT CREATIVE MOMENT STARTS HERE THE FINAL CREATIVE SPARK CSS TABLET + MOBILE + WOW v1.0 ELEMENTOR CSS ID: #wh-printables-finale ELEMENTOR CSS CLASSES: wh-printables-finale-section wh-theme-dark TABLET: 768px - 1024px MOBILE: 0px - 767px DESKTOP: APPROVED / UNTOUCHED HTML / SVG: UNCHANGED JS: NOT REQUIRED SECTIONS 01–06: UNTOUCHED ========================================================= */ /* ========================================================= 01 — SHARED RESPONSIVE FOUNDATION ========================================================= */ @media (max-width: 1024px) { /* ------------------------------------------------------- ELEMENTOR CONTAINER -------------------------------------------------------- */ #wh-printables-finale { position: relative; width: 100%; max-width: none; margin: 0; padding: 0; overflow: hidden; isolation: isolate; } #wh-printables-finale .elementor-widget-html, #wh-printables-finale .elementor-widget-container { width: 100%; max-width: 100%; min-width: 0; } /* ------------------------------------------------------- CINEMATIC FOUNDATION -------------------------------------------------------- */ #wh-printables-finale .whp-finale { --whf-ink: #101e27; --whf-cream: #fff8ed; --whf-teal: #65d0c1; --whf-amber: #f5b942; --whf-coral: #f57760; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 0; background: radial-gradient( ellipse at 50% 42%, rgba(25, 93, 95, 0.29), transparent 62% ), linear-gradient( 155deg, #142d34 0%, #101e29 53%, #111c28 100% ); color: var(--whf-cream); overflow: hidden; isolation: isolate; } #wh-printables-finale .whp-finale *, #wh-printables-finale .whp-finale *::before, #wh-printables-finale .whp-finale *::after { box-sizing: border-box; } /* ------------------------------------------------------- ATMOSPHERE -------------------------------------------------------- */ #wh-printables-finale .whp-finale__atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-printables-finale .whp-finale__glow { position: absolute; display: block; border-radius: 50%; filter: blur(65px); animation: whf-glow-breathe 13s ease-in-out infinite; } #wh-printables-finale .whp-finale__glow--teal { top: 10%; left: -30%; width: 380px; height: 380px; background: rgba(64, 194, 182, 0.15); } #wh-printables-finale .whp-finale__glow--amber { top: 26%; left: 50%; width: 420px; height: 420px; margin-left: -210px; background: rgba(245, 185, 66, 0.085); animation-delay: -4s; } #wh-printables-finale .whp-finale__glow--coral { right: -32%; bottom: -16%; width: 370px; height: 370px; background: rgba(245, 119, 96, 0.12); animation-delay: -8s; } #wh-printables-finale .whp-finale__grain { position: absolute; inset: 0; opacity: 0.065; background-image: radial-gradient( rgba(255,255,255,0.3) 0.65px, transparent 0.9px ); background-size: 9px 9px; } /* ------------------------------------------------------- AMBIENT ORBS -------------------------------------------------------- */ #wh-printables-finale .whp-finale__orb { position: absolute; display: block; border-radius: 50%; animation: whf-orb-float 11s ease-in-out infinite; } #wh-printables-finale .whp-finale__orb--one { top: 14%; left: 8%; width: 11px; height: 11px; background: var(--whf-coral); } #wh-printables-finale .whp-finale__orb--two { top: 63%; right: 10%; width: 9px; height: 9px; background: var(--whf-teal); animation-delay: -3s; } #wh-printables-finale .whp-finale__orb--three { bottom: 17%; left: 15%; width: 7px; height: 7px; background: var(--whf-amber); animation-delay: -6s; } /* ------------------------------------------------------- SVG CREATIVE UNIVERSE -------------------------------------------------------- */ #wh-printables-finale .whp-finale__universe { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; } #wh-printables-finale .whp-finale__art { display: block; flex: none; width: var(--whf-universe-width, 1150px); max-width: none; height: auto; opacity: 0.7; transform-origin: center; animation: whf-responsive-universe 17s ease-in-out infinite; } /* ------------------------------------------------------- SVG CREATIVE PATHS -------------------------------------------------------- */ #wh-printables-finale .whp-finale__path { fill: none; animation: whf-path-shimmer 9s ease-in-out infinite; } #wh-printables-finale .whp-finale__path--two { animation: whf-dashed-flow 18s linear infinite; } #wh-printables-finale .whp-finale__path--three { animation-delay: -4s; } /* ------------------------------------------------------- ORBITAL RINGS -------------------------------------------------------- */ #wh-printables-finale .whp-finale__svg-orbit { transform-box: fill-box; transform-origin: center; } #wh-printables-finale .whp-finale__svg-orbit--one { animation: whf-orbit-rotate 43s linear infinite; } #wh-printables-finale .whp-finale__svg-orbit--two { animation: whf-orbit-rotate 55s linear infinite reverse; } /* ------------------------------------------------------- CREATIVE CORE -------------------------------------------------------- */ #wh-printables-finale .whp-finale__svg-aura { transform-box: fill-box; transform-origin: center; animation: whf-aura-pulse 9s ease-in-out infinite; } #wh-printables-finale .whp-finale__core { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 22px rgba(245,185,66,0.19)); animation: whf-core-pulse 8s ease-in-out infinite; } /* ------------------------------------------------------- SVG PARTICLES -------------------------------------------------------- */ #wh-printables-finale .whp-finale__svg-particle { transform-box: fill-box; transform-origin: center; animation: whf-particle-drift 8s ease-in-out infinite alternate; } #wh-printables-finale .whp-finale__svg-particle--two { animation-delay: -3s; animation-duration: 11s; } #wh-printables-finale .whp-finale__svg-particle--three { animation-delay: -5s; animation-duration: 9s; } #wh-printables-finale .whp-finale__svg-particle--four { animation-delay: -2s; } #wh-printables-finale .whp-finale__svg-particle--five { animation-delay: -6s; animation-duration: 12s; } /* ------------------------------------------------------- MAIN CONTENT -------------------------------------------------------- */ #wh-printables-finale .whp-finale__container { position: relative; z-index: 5; width: min(100% - 48px, 900px); margin: 0 auto; } #wh-printables-finale .whp-finale__content { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0 auto; text-align: center; } /* Keep the animated universe behind a soft veil */ #wh-printables-finale .whp-finale__content::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%); background: radial-gradient( ellipse, rgba(12,28,35,0.79) 0%, rgba(12,28,35,0.55) 46%, transparent 77% ); pointer-events: none; } /* ------------------------------------------------------- EYEBROW -------------------------------------------------------- */ #wh-printables-finale .whp-finale__eyebrow { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: "Inter", sans-serif; font-weight: 750; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: #f1ca88; } #wh-printables-finale .whp-finale__eyebrow::before, #wh-printables-finale .whp-finale__eyebrow::after { content: ""; width: 22px; height: 1px; background: rgba(245,185,66,0.65); } /* ------------------------------------------------------- HEADLINE -------------------------------------------------------- */ #wh-printables-finale .whp-finale__title { width: 100%; margin: 0; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; line-height: 1.045; letter-spacing: -0.06em; color: var(--whf-cream); text-wrap: balance; } #wh-printables-finale .whp-finale__title-accent { display: block; max-width: 100%; padding: 0.02em 0.02em 0.10em; background: linear-gradient( 110deg, #6dd8c5 8%, #f3cf81 52%, #f68d73 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ------------------------------------------------------- DESCRIPTION -------------------------------------------------------- */ #wh-printables-finale .whp-finale__description { margin-left: auto; margin-right: auto; font-family: "Inter", sans-serif; font-weight: 400; line-height: 1.85; color: #ccdad8; } /* ------------------------------------------------------- PRIMARY CTA -------------------------------------------------------- */ #wh-printables-finale .whp-finale__actions { display: flex; align-items: center; justify-content: center; width: 100%; } #wh-printables-finale .whp-finale__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 58px; max-width: 100%; padding: 10px 11px 10px 25px; border: 1px solid transparent; border-radius: 999px; background: var(--whf-coral); color: #171e26; text-decoration: none; cursor: pointer; box-shadow: 0 15px 35px rgba(245,119,96,0.19); -webkit-tap-highlight-color: transparent; } #wh-printables-finale .whp-finale__cta-text { position: relative; z-index: 2; font-family: "Inter", sans-serif; font-weight: 750; line-height: 1.4; color: inherit; white-space: nowrap; } #wh-printables-finale .whp-finale__cta-icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; background: rgba(21,30,38,0.13); } #wh-printables-finale .whp-finale__cta-icon svg { display: block; width: 20px; height: 20px; } /* Focus is visible for keyboard navigation */ #wh-printables-finale .whp-finale__cta:focus-visible { outline: 3px solid #fff8ed; outline-offset: 5px; } /* ------------------------------------------------------- MICROCOPY -------------------------------------------------------- */ #wh-printables-finale .whp-finale__microcopy { margin-bottom: 0; font-family: "Inter", sans-serif; font-weight: 500; line-height: 1.6; letter-spacing: 0.025em; color: #b9d5d0; } /* ------------------------------------------------------- FINAL SIGNATURE -------------------------------------------------------- */ #wh-printables-finale .whp-finale__signature { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; width: min(100% - 48px, 500px); margin-left: auto; margin-right: auto; } #wh-printables-finale .whp-finale__signature-line { flex: 1; min-width: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(174,215,204,0.35) ); } #wh-printables-finale .whp-finale__signature-line:last-of-type { transform: rotate(180deg); } #wh-printables-finale .whp-finale__signature-text { flex: none; font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: 0.17em; line-height: 1.5; color: #9bc9c0; white-space: nowrap; } } /* ========================================================= 02 — TABLET 768px - 1024px ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { #wh-printables-finale .whp-finale { min-height: 760px; padding: 125px 0 65px; } #wh-printables-finale .whp-finale__container { width: min(100% - 64px, 850px); } /* SVG UNIVERSE */ #wh-printables-finale .whp-finale__art { --whf-universe-width: 1120px; opacity: 0.68; } /* CONTENT */ #wh-printables-finale .whp-finale__eyebrow { margin-bottom: 27px; font-size: 10px; } #wh-printables-finale .whp-finale__title { margin-bottom: 28px; font-size: clamp(62px, 8vw, 83px); } #wh-printables-finale .whp-finale__description { max-width: 590px; font-size: 16px; } /* CTA */ #wh-printables-finale .whp-finale__actions { margin-top: 37px; } #wh-printables-finale .whp-finale__cta-text { font-size: 13px; } #wh-printables-finale .whp-finale__microcopy { margin-top: 25px; font-size: 12px; } /* SIGNATURE */ #wh-printables-finale .whp-finale__signature { gap: 23px; margin-top: 85px; } #wh-printables-finale .whp-finale__signature-text { font-size: 9px; } } /* ========================================================= 03 — MOBILE 0px - 767px ========================================================= */ @media (max-width: 767px) { #wh-printables-finale .whp-finale { min-height: 690px; padding: 103px 0 55px; } #wh-printables-finale .whp-finale__container { width: calc(100% - 42px); max-width: 540px; } /* MOBILE UNIVERSE Keep artistic center behind the headline. Prevent oversized paths from causing overflow. */ #wh-printables-finale .whp-finale__art { --whf-universe-width: 780px; opacity: 0.46; } #wh-printables-finale .whp-finale__content::before { width: 140%; height: 122%; background: radial-gradient( ellipse, rgba(12,28,35,0.87) 0%, rgba(12,28,35,0.65) 51%, transparent 83% ); } /* EYEBROW */ #wh-printables-finale .whp-finale__eyebrow { margin-bottom: 24px; gap: 8px; font-size: 9px; letter-spacing: 0.12em; } #wh-printables-finale .whp-finale__eyebrow::before, #wh-printables-finale .whp-finale__eyebrow::after { width: 15px; } /* TITLE */ #wh-printables-finale .whp-finale__title { margin-bottom: 23px; font-size: clamp(39px, 10.2vw, 63px); line-height: 1.07; } #wh-printables-finale .whp-finale__title-accent { overflow-wrap: normal; } /* DESCRIPTION */ #wh-printables-finale .whp-finale__description { max-width: 440px; font-size: 14px; line-height: 1.8; } /* CTA */ #wh-printables-finale .whp-finale__actions { margin-top: 32px; } #wh-printables-finale .whp-finale__cta { gap: 13px; min-height: 56px; padding: 9px 9px 9px 22px; } #wh-printables-finale .whp-finale__cta-text { font-size: 12px; } #wh-printables-finale .whp-finale__cta-icon { width: 36px; height: 36px; flex-basis: 36px; } #wh-printables-finale .whp-finale__cta-icon svg { width: 18px; height: 18px; } /* MICROCOPY */ #wh-printables-finale .whp-finale__microcopy { margin-top: 24px; font-size: 12px; } /* SIGNATURE */ #wh-printables-finale .whp-finale__signature { gap: 15px; margin-top: 73px; width: calc(100% - 42px); } #wh-printables-finale .whp-finale__signature-text { font-size: 9px; letter-spacing: 0.12em; } } /* ========================================================= 04 — SMALL MOBILE Up to 390px ========================================================= */ @media (max-width: 390px) { #wh-printables-finale .whp-finale { min-height: 650px; padding-top: 88px; } #wh-printables-finale .whp-finale__container { width: calc(100% - 36px); } #wh-printables-finale .whp-finale__title { font-size: clamp(35px, 9.5vw, 40px); } #wh-printables-finale .whp-finale__description { font-size: 13px; } #wh-printables-finale .whp-finale__cta { gap: 10px; padding-left: 18px; } #wh-printables-finale .whp-finale__cta-text { font-size: 11px; } #wh-printables-finale .whp-finale__art { --whf-universe-width: 700px; } } /* ========================================================= 05 — TOUCH WOW Subtle automatic arrow movement ========================================================= */ @media (max-width: 1024px) and (hover: none) { #wh-printables-finale .whp-finale__cta-icon svg { animation: whf-responsive-arrow 4.5s ease-in-out infinite; } #wh-printables-finale .whp-finale__cta:active { background: #ff896f; transform: scale(0.98); } } /* ========================================================= 06 — RESPONSIVE WOW KEYFRAMES ========================================================= */ @keyframes whf-responsive-universe { 0%, 100% { transform: scale(0.98) rotate(-0.35deg); } 50% { transform: scale(1.035) rotate(0.35deg); } } @keyframes whf-responsive-arrow { 0%, 65%, 100% { transform: translateX(0); } 78% { transform: translateX(5px); } 88% { transform: translateX(0); } } /* ========================================================= 07 — ACCESSIBILITY REDUCED MOTION ========================================================= */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-printables-finale .whp-finale__glow, #wh-printables-finale .whp-finale__orb, #wh-printables-finale .whp-finale__art, #wh-printables-finale .whp-finale__path, #wh-printables-finale .whp-finale__svg-orbit, #wh-printables-finale .whp-finale__svg-aura, #wh-printables-finale .whp-finale__core, #wh-printables-finale .whp-finale__svg-particle, #wh-printables-finale .whp-finale__cta-icon svg { animation: none !important; transition: none !important; } #wh-printables-finale .whp-finale__cta { transition: none !important; } #wh-printables-finale .whp-finale__cta:active { transform: none !important; } } /* ========================================================= END — PRINTABLES SECTION 07 / CSS TABLET + MOBILE + WOW v1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — PRINTABLES SECTION 07 — FINAL CREATIVE SPARK CTA WOW RESPONSIVE FIX v1.1 TABLET + MOBILE ONLY DESKTOP APPROVED / UNTOUCHED Automatic motion without hover dependency. ========================================================= */ @media (max-width: 1024px) { /* ======================================================= 01 — BUTTON AMBIENT GLOW ======================================================== */ #wh-printables-finale .whp-finale__cta { position: relative; overflow: hidden; animation: whf-cta-responsive-glow 5s ease-in-out infinite; transition: transform 0.2s ease, background-color 0.2s ease; } /* ======================================================= 02 — AUTOMATIC LIGHT SWEEP ======================================================== */ #wh-printables-finale .whp-finale__cta::before { content: ""; position: absolute; inset: 0; display: block; background: linear-gradient( 110deg, transparent 20%, rgba(255,255,255,0.25) 50%, transparent 80% ); transform: translateX(-150%); animation: whf-cta-responsive-shine 5s ease-in-out infinite; pointer-events: none; } /* ======================================================= 03 — ARROW MOTION Applies even in Elementor device previews. ======================================================== */ #wh-printables-finale .whp-finale__cta-icon svg { animation: whf-cta-responsive-arrow 5s ease-in-out infinite; } /* ======================================================= 04 — TOUCH FEEDBACK ======================================================== */ #wh-printables-finale .whp-finale__cta:active { transform: scale(0.97); background: #ff896f; } } /* ========================================================= 05 — WOW KEYFRAMES ========================================================= */ @keyframes whf-cta-responsive-glow { 0%, 100% { box-shadow: 0 15px 35px rgba(245,119,96,0.19); } 50% { box-shadow: 0 18px 44px rgba(245,119,96,0.37), 0 0 18px rgba(245,119,96,0.13); } } @keyframes whf-cta-responsive-shine { 0%, 45% { transform: translateX(-150%); } 75%, 100% { transform: translateX(150%); } } @keyframes whf-cta-responsive-arrow { 0%, 45%, 100% { transform: translateX(0); } 60% { transform: translateX(6px); } 75% { transform: translateX(0); } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-printables-finale .whp-finale__cta, #wh-printables-finale .whp-finale__cta::before, #wh-printables-finale .whp-finale__cta-icon svg { animation: none !important; } } /* ========================================================= END — PRINTABLES SECTION 07 CTA WOW RESPONSIVE FIX v1.1 ========================================================= *//* End custom CSS */