.elementor-606 .elementor-element.elementor-element-5673911{--display:flex;}.elementor-606 .elementor-element.elementor-element-048d26d{--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-606 .elementor-element.elementor-element-ca8c5a3{--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-606 .elementor-element.elementor-element-91c6533{--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-606 .elementor-element.elementor-element-5774d28{--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-606 .elementor-element.elementor-element-f72f870{--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-606 .elementor-element.elementor-element-eacfca5{--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-606 .elementor-element.elementor-element-6232173{--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-606 .elementor-element.elementor-element-5673911{--width:100%;}.elementor-606 .elementor-element.elementor-element-048d26d{--width:100%;}.elementor-606 .elementor-element.elementor-element-ca8c5a3{--width:100%;}.elementor-606 .elementor-element.elementor-element-91c6533{--width:100%;}.elementor-606 .elementor-element.elementor-element-5774d28{--width:100%;}.elementor-606 .elementor-element.elementor-element-f72f870{--width:100%;}.elementor-606 .elementor-element.elementor-element-eacfca5{--width:100%;}.elementor-606 .elementor-element.elementor-element-6232173{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-048d26d *//* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 01 — THE LIBRARY CSS DESKTOP · V1.0 TARGET: #wh-books-hero BREAKPOINT: Desktop >= 1025px HTML: whb-hero HEADER ENGINE: wh-theme-light Tablet + Mobile will be handled separately. ========================================================= */ /* ========================================================= 01 — SECTION FOUNDATION ========================================================= */ #wh-books-hero { --whb-ink: #27242B; --whb-ink-soft: #625C62; --whb-paper: #F8F4ED; --whb-paper-deep: #F1E9DE; --whb-coral: #EF806D; --whb-teal: #69B8AF; --whb-gold: #E7B66B; position: relative; width: 100%; padding: 0; margin: 0; overflow: hidden; isolation: isolate; background: var(--whb-paper); } #wh-books-hero, #wh-books-hero * { box-sizing: border-box; } #wh-books-hero .whb-hero { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 850px; min-height: max(850px, 100svh); margin: 0; padding: 125px 0 38px; background: radial-gradient( ellipse at 79% 38%, rgba(255, 224, 184, .25) 0%, transparent 44% ), linear-gradient( 135deg, #FBF8F2 0%, #F8F4ED 54%, #F3EADF 100% ); color: var(--whb-ink); } /* ========================================================= 02 — AMBIENT BACKGROUND ========================================================= */ #wh-books-hero .whb-hero__ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-books-hero .whb-hero__ambient-glow { position: absolute; display: block; border-radius: 50%; filter: blur(75px); opacity: .65; } #wh-books-hero .whb-hero__ambient-glow--a { width: 480px; height: 480px; top: 2%; right: 8%; background: rgba(247, 197, 143, .32); } #wh-books-hero .whb-hero__ambient-glow--b { width: 390px; height: 390px; bottom: -12%; right: 31%; background: rgba(118, 191, 180, .14); } #wh-books-hero .whb-hero__ambient-grain { position: absolute; inset: 0; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E"); background-size: 180px 180px; pointer-events: none; } /* ========================================================= 03 — EDITORIAL GRID ========================================================= */ #wh-books-hero .whb-hero__container { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 60px); width: min(100% - 112px, 1510px); margin: auto; } /* ========================================================= 04 — EDITORIAL CONTENT ========================================================= */ #wh-books-hero .whb-hero__content { position: relative; z-index: 5; min-width: 0; padding: 22px 0 36px; } /* ========================================================= 05 — EYEBROW ========================================================= */ #wh-books-hero .whb-hero__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .17em; line-height: 1.5; color: #746B6A; } #wh-books-hero .whb-hero__eyebrow-symbol { color: var(--whb-coral); font-size: 24px; line-height: 1; } #wh-books-hero .whb-hero__eyebrow-divider { width: 23px; height: 1px; background: #C4B6A9; } /* ========================================================= 06 — MONUMENTAL HEADLINE ========================================================= */ #wh-books-hero .whb-hero__title { display: block; max-width: 780px; margin: 0 0 31px; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(72px, 6.5vw, 122px); font-weight: 800; line-height: .94; letter-spacing: -.075em; text-transform: none; color: var(--whb-ink); } #wh-books-hero .whb-hero__title-line { display: block; white-space: nowrap; } #wh-books-hero .whb-hero__title-line + .whb-hero__title-line { margin-top: 8px; } #wh-books-hero .whb-hero__title-accent { position: relative; display: inline-block; color: #D87362; } #wh-books-hero .whb-hero__period { color: var(--whb-ink); } /* ========================================================= 07 — INTRO TEXT ========================================================= */ #wh-books-hero .whb-hero__intro { max-width: 510px; } #wh-books-hero .whb-hero__lead { margin: 0 0 15px; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(21px, 1.55vw, 27px); font-weight: 600; line-height: 1.32; letter-spacing: -.025em; color: #383038; } #wh-books-hero .whb-hero__description { max-width: 470px; margin: 0; font-family: "Inter", sans-serif; font-size: clamp(14px, .98vw, 16px); font-weight: 400; line-height: 1.85; letter-spacing: -.01em; color: var(--whb-ink-soft); } /* ========================================================= 08 — ACTIONS ========================================================= */ #wh-books-hero .whb-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 38px; } #wh-books-hero .whb-hero__button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease; } #wh-books-hero .whb-hero__button--primary { min-height: 62px; padding: 8px 10px 8px 26px; border: 1px solid var(--whb-coral); border-radius: 100px; color: #FFFFFF; background: var(--whb-coral); box-shadow: 0 12px 28px rgba(224, 117, 98, .18); } #wh-books-hero .whb-hero__button-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .3s ease, transform .3s ease; } #wh-books-hero .whb-hero__button-icon svg { display: block; width: 20px; height: 20px; } #wh-books-hero .whb-hero__button--primary:hover { transform: translateY(-3px); background: #DC6F5C; border-color: #DC6F5C; color: #FFFFFF; box-shadow: 0 17px 34px rgba(224, 117, 98, .26); } #wh-books-hero .whb-hero__button--primary:hover .whb-hero__button-icon { transform: translateX(3px); background: rgba(255, 255, 255, .27); } #wh-books-hero .whb-hero__button--secondary { min-height: 55px; padding: 7px 0; border: 0; background: transparent; color: var(--whb-ink); } #wh-books-hero .whb-hero__secondary-arrow { display: block; width: 19px; height: 19px; transition: transform .3s ease; } #wh-books-hero .whb-hero__button--secondary:hover { color: #D87362; } #wh-books-hero .whb-hero__button--secondary:hover .whb-hero__secondary-arrow { transform: translate(3px, -3px); } #wh-books-hero .whb-hero__button:focus-visible, #wh-books-hero .whb-hero__scroll:focus-visible { outline: 3px solid var(--whb-teal); outline-offset: 5px; } /* ========================================================= 09 — EDITORIAL SIGNATURE ========================================================= */ #wh-books-hero .whb-hero__signature { display: flex; align-items: center; gap: 15px; margin-top: 59px; font-family: "Inter", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .17em; line-height: 1.5; color: #968980; } #wh-books-hero .whb-hero__signature-line { width: 42px; height: 1px; flex: 0 0 42px; background: var(--whb-coral); } /* ========================================================= 10 — VISUAL COLUMN ========================================================= */ #wh-books-hero .whb-hero__visual { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; flex-direction: column; min-width: 0; width: 100%; } #wh-books-hero .whb-hero__visual-stage { position: relative; display: grid; place-items: center; width: 100%; max-width: 780px; aspect-ratio: 760 / 780; margin: 0 auto; perspective: 1100px; } #wh-books-hero .whb-hero__visual-halo { position: absolute; z-index: 0; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle, rgba(255, 237, 205, .95) 0%, rgba(248, 209, 174, .35) 42%, rgba(255, 235, 212, 0) 73% ); filter: blur(9px); transform: translateY(-2%); } #wh-books-hero .whb-hero__artwork { position: relative; z-index: 2; display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow( 0 18px 34px rgba(80, 60, 53, .075) ); } /* ========================================================= 11 — SVG BOOK DETAILS ========================================================= */ #wh-books-hero .whb-hero__svg-book { transform-box: view-box; transform-origin: center; will-change: auto; } #wh-books-hero .whb-hero__svg-sparks { opacity: .9; } /* ========================================================= 12 — FLOATING LABELS ========================================================= */ #wh-books-hero .whb-hero__floating-label { position: absolute; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .83); border-radius: 100px; background: rgba(255, 252, 247, .86); box-shadow: 0 12px 32px rgba(77, 57, 51, .085); color: #5C5053; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: -.015em; line-height: 1.2; white-space: nowrap; pointer-events: none; } #wh-books-hero .whb-hero__floating-label--one { top: 24%; left: -1%; transform: rotate(-7deg); } #wh-books-hero .whb-hero__floating-label--two { right: -2%; bottom: 15%; transform: rotate(6deg); } #wh-books-hero .whb-hero__label-star { color: #DBA456; font-size: 16px; line-height: 1; } #wh-books-hero .whb-hero__label-spark { color: #D97A70; font-size: 15px; line-height: 1; } /* ========================================================= 13 — VISUAL CAPTION ========================================================= */ #wh-books-hero .whb-hero__visual-caption { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(88%, 660px); margin-top: -8px; color: #9A8D83; font-family: "Inter", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .17em; line-height: 1.5; } /* ========================================================= 14 — BOTTOM DISCOVERY BAR ========================================================= */ #wh-books-hero .whb-hero__bottom { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100% - 112px, 1510px); margin: 32px auto 0; } #wh-books-hero .whb-hero__bottom-rule { width: 100%; height: 1px; position: absolute; top: -23px; left: 0; background: rgba(95, 79, 75, .14); } #wh-books-hero .whb-hero__scroll { display: inline-flex; align-items: center; gap: 11px; padding: 6px 0; background: transparent; color: #80746E; text-decoration: none; font-family: "Inter", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .18em; line-height: 1.4; transition: color .3s ease; } #wh-books-hero .whb-hero__scroll-icon { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(98, 79, 75, .24); border-radius: 50%; } #wh-books-hero .whb-hero__scroll-icon svg { width: 15px; height: 15px; } #wh-books-hero .whb-hero__scroll:hover { color: #D87362; } #wh-books-hero .whb-hero__bottom-index { font-family: "Inter", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .18em; line-height: 1.4; color: #A2968B; } /* ========================================================= 15 — COMPACT DESKTOP ADAPTATION DESKTOP ONLY ========================================================= */ @media (min-width: 1025px) and (max-width: 1360px) { #wh-books-hero .whb-hero__container, #wh-books-hero .whb-hero__bottom { width: calc(100% - 88px); } #wh-books-hero .whb-hero__container { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; } #wh-books-hero .whb-hero__title { font-size: clamp(67px, 6.5vw, 91px); } #wh-books-hero .whb-hero__eyebrow { font-size: 9px; gap: 9px; } #wh-books-hero .whb-hero__floating-label { font-size: 10px; padding: 10px 13px; } } /* ========================================================= 16 — SHORT DESKTOP VIEWPORTS ========================================================= */ @media (min-width: 1025px) and (max-height: 800px) { #wh-books-hero .whb-hero { padding-top: 110px; padding-bottom: 27px; } #wh-books-hero .whb-hero__eyebrow { margin-bottom: 24px; } #wh-books-hero .whb-hero__title { margin-bottom: 24px; } #wh-books-hero .whb-hero__actions { margin-top: 28px; } #wh-books-hero .whb-hero__signature { margin-top: 38px; } } /* ========================================================= 17 — REDUCED MOTION SUPPORT ========================================================= */ @media (prefers-reduced-motion: reduce) { #wh-books-hero *, #wh-books-hero *::before, #wh-books-hero *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ========================================================= END — BOOKS / SECTION 01 CSS DESKTOP V1.0 ========================================================= */ /* ========================================================= BOOKS — SECTION 01 VISUAL FIX PATCH · CAPTION CLEARANCE Add below the current Section 01 CSS ========================================================= */ @media (min-width: 1025px) { #wh-books-hero .whb-hero__visual-stage { margin-bottom: 42px; } #wh-books-hero .whb-hero__artwork { transform: translateY(-18px) scale(.96); transform-origin: center center; } #wh-books-hero .whb-hero__floating-label--two { bottom: 18%; } #wh-books-hero .whb-hero__visual-caption { position: relative; z-index: 8; margin-top: 8px; padding-top: 6px; } } /* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 01 — THE LIVING LIBRARY RESPONSIVE CSS · TABLET + MOBILE V1.0 CSS ID: #wh-books-hero BREAKPOINTS: Tablet Landscape : 1024px – 821px Tablet Portrait : 820px – 768px Mobile : 767px and below Small Mobile : 390px and below IMPORTANT: Add AFTER Desktop CSS and visual fix. Do not replace existing styles. ========================================================= */ /* ========================================================= 01 — RESPONSIVE GLOBAL SAFETY Applies to Tablet and Mobile only ========================================================= */ @media (max-width: 1024px) { #wh-books-hero { max-width: 100%; overflow: hidden; } #wh-books-hero .whb-hero { min-height: 0; overflow: hidden; } #wh-books-hero .whb-hero__container { position: relative; z-index: 2; max-width: 100%; } #wh-books-hero .whb-hero__content, #wh-books-hero .whb-hero__visual { min-width: 0; } #wh-books-hero .whb-hero__title, #wh-books-hero .whb-hero__title-line { max-width: 100%; } #wh-books-hero .whb-hero__button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #wh-books-hero .whb-hero__visual-stage { isolation: isolate; } #wh-books-hero .whb-hero__artwork { max-width: 100%; transform-origin: center center; } #wh-books-hero .whb-hero__visual-caption { position: relative; z-index: 5; } } /* ========================================================= 02 — TABLET LANDSCAPE 821px – 1024px Keep a two-column editorial composition. ========================================================= */ @media (min-width: 821px) and (max-width: 1024px) { #wh-books-hero .whb-hero { min-height: 740px; padding: 125px 0 34px; } #wh-books-hero .whb-hero__container { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: 18px; width: calc(100% - 72px); margin: auto; } #wh-books-hero .whb-hero__content { padding: 12px 0 25px; } #wh-books-hero .whb-hero__eyebrow { gap: 9px; margin-bottom: 26px; font-size: 8px; letter-spacing: .13em; } #wh-books-hero .whb-hero__eyebrow-symbol { font-size: 19px; } #wh-books-hero .whb-hero__eyebrow-divider { width: 15px; } #wh-books-hero .whb-hero__title { font-size: clamp(51px, 6vw, 66px); line-height: .98; letter-spacing: -.068em; margin-bottom: 25px; } #wh-books-hero .whb-hero__title-line { white-space: nowrap; } #wh-books-hero .whb-hero__lead { font-size: 19px; line-height: 1.36; } #wh-books-hero .whb-hero__description { font-size: 13px; line-height: 1.75; } #wh-books-hero .whb-hero__actions { gap: 15px; margin-top: 29px; } #wh-books-hero .whb-hero__button { font-size: 11px; } #wh-books-hero .whb-hero__button--primary { min-height: 54px; padding: 7px 7px 7px 17px; gap: 9px; } #wh-books-hero .whb-hero__button-icon { width: 37px; height: 37px; } #wh-books-hero .whb-hero__signature { margin-top: 35px; font-size: 8px; letter-spacing: .12em; } /* Art sculpture */ #wh-books-hero .whb-hero__visual-stage { width: 100%; margin-bottom: 33px; } #wh-books-hero .whb-hero__artwork { transform: translateY(-12px) scale(.94); } #wh-books-hero .whb-hero__floating-label { font-size: 9px; padding: 9px 12px; } #wh-books-hero .whb-hero__floating-label--one { left: -3%; top: 23%; } #wh-books-hero .whb-hero__floating-label--two { right: -3%; bottom: 21%; } #wh-books-hero .whb-hero__visual-caption { width: 92%; margin-top: 0; font-size: 7px; letter-spacing: .1em; } #wh-books-hero .whb-hero__bottom { width: calc(100% - 72px); margin-top: 39px; } #wh-books-hero .whb-hero__scroll, #wh-books-hero .whb-hero__bottom-index { font-size: 8px; } } /* ========================================================= 03 — TABLET PORTRAIT 768px – 820px Vertical editorial composition. ========================================================= */ @media (min-width: 768px) and (max-width: 820px) { #wh-books-hero .whb-hero { min-height: 0; padding: 135px 0 38px; } #wh-books-hero .whb-hero__container { display: flex; flex-direction: column; align-items: stretch; gap: 22px; width: calc(100% - 92px); max-width: 680px; margin: 0 auto; } #wh-books-hero .whb-hero__content { width: 100%; padding: 0; } #wh-books-hero .whb-hero__eyebrow { font-size: 10px; margin-bottom: 29px; } #wh-books-hero .whb-hero__title { max-width: 680px; font-size: clamp(75px, 10vw, 91px); line-height: .95; margin-bottom: 28px; } #wh-books-hero .whb-hero__lead { font-size: 24px; } #wh-books-hero .whb-hero__description { max-width: 510px; font-size: 15px; } #wh-books-hero .whb-hero__actions { margin-top: 29px; gap: 26px; } #wh-books-hero .whb-hero__signature { margin-top: 35px; } /* Centered sculpture */ #wh-books-hero .whb-hero__visual { width: 100%; } #wh-books-hero .whb-hero__visual-stage { width: min(100%, 650px); margin: 0 auto 44px; } #wh-books-hero .whb-hero__artwork { transform: translateY(-16px) scale(.96); } #wh-books-hero .whb-hero__floating-label--one { left: 0; } #wh-books-hero .whb-hero__floating-label--two { right: 0; bottom: 19%; } #wh-books-hero .whb-hero__visual-caption { width: 90%; margin-top: 4px; } #wh-books-hero .whb-hero__bottom { width: calc(100% - 92px); max-width: 680px; margin-top: 48px; } } /* ========================================================= 04 — MOBILE 0px – 767px Vertical Pocket Library experience. ========================================================= */ @media (max-width: 767px) { #wh-books-hero .whb-hero { min-height: 0; padding: 112px 0 30px; } /* Ambient atmosphere */ #wh-books-hero .whb-hero__ambient-glow--a { width: 310px; height: 310px; top: 20%; right: -35%; filter: blur(60px); } #wh-books-hero .whb-hero__ambient-glow--b { width: 260px; height: 260px; bottom: 12%; right: 30%; opacity: .45; } /* Main vertical composition */ #wh-books-hero .whb-hero__container { display: flex; flex-direction: column; align-items: stretch; gap: 25px; width: calc(100% - 40px); max-width: 520px; margin: 0 auto; } #wh-books-hero .whb-hero__content { width: 100%; padding: 0; } /* Eyebrow */ #wh-books-hero .whb-hero__eyebrow { gap: 8px; margin-bottom: 26px; font-size: 8px; letter-spacing: .115em; line-height: 1.5; } #wh-books-hero .whb-hero__eyebrow-symbol { font-size: 20px; } #wh-books-hero .whb-hero__eyebrow-divider { width: 14px; } /* Headline */ #wh-books-hero .whb-hero__title { max-width: 100%; margin-bottom: 25px; font-size: clamp(47px, 11.5vw, 79px); font-weight: 800; line-height: .99; letter-spacing: -.075em; } #wh-books-hero .whb-hero__title-line { display: block; white-space: nowrap; } #wh-books-hero .whb-hero__title-line + .whb-hero__title-line { margin-top: 7px; } /* Intro */ #wh-books-hero .whb-hero__intro { max-width: 460px; } #wh-books-hero .whb-hero__lead { margin-bottom: 13px; font-size: clamp(19px, 4.7vw, 24px); line-height: 1.3; } #wh-books-hero .whb-hero__description { max-width: 440px; font-size: 14px; line-height: 1.75; } /* CTA actions */ #wh-books-hero .whb-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px 22px; margin-top: 29px; } #wh-books-hero .whb-hero__button { font-size: 12px; } #wh-books-hero .whb-hero__button--primary { min-height: 56px; padding: 7px 8px 7px 20px; gap: 13px; } #wh-books-hero .whb-hero__button-icon { width: 39px; height: 39px; } #wh-books-hero .whb-hero__button--secondary { min-height: 45px; } /* Signature */ #wh-books-hero .whb-hero__signature { gap: 12px; margin-top: 35px; font-size: 8px; letter-spacing: .13em; } #wh-books-hero .whb-hero__signature-line { width: 30px; flex-basis: 30px; } /* Creative sculpture */ #wh-books-hero .whb-hero__visual { width: 100%; } #wh-books-hero .whb-hero__visual-stage { width: 100%; max-width: 520px; margin: 0 auto 26px; } #wh-books-hero .whb-hero__artwork { width: 100%; transform: translateY(-10px) scale(.94); transform-origin: center center; } #wh-books-hero .whb-hero__visual-halo { width: 85%; opacity: .8; } /* Floating notes */ #wh-books-hero .whb-hero__floating-label { font-size: 9px; padding: 9px 11px; gap: 6px; } #wh-books-hero .whb-hero__floating-label--one { top: 23%; left: -1%; } #wh-books-hero .whb-hero__floating-label--two { bottom: 20%; right: -1%; } /* Art caption */ #wh-books-hero .whb-hero__visual-caption { width: 96%; margin-top: 4px; gap: 12px; font-size: 7px; letter-spacing: .08em; line-height: 1.5; } #wh-books-hero .whb-hero__visual-caption span:last-child { text-align: right; } /* Bottom indicator */ #wh-books-hero .whb-hero__bottom { width: calc(100% - 40px); max-width: 520px; margin-top: 48px; } #wh-books-hero .whb-hero__bottom-rule { top: -19px; } #wh-books-hero .whb-hero__scroll { gap: 8px; font-size: 8px; letter-spacing: .11em; } #wh-books-hero .whb-hero__scroll-icon { width: 28px; height: 28px; } #wh-books-hero .whb-hero__bottom-index { font-size: 8px; letter-spacing: .1em; text-align: right; } } /* ========================================================= 05 — SMALL MOBILE 391px – 430px ========================================================= */ @media (min-width: 391px) and (max-width: 430px) { #wh-books-hero .whb-hero__title { font-size: clamp(47px, 11.25vw, 51px); } #wh-books-hero .whb-hero__floating-label { font-size: 8px; } } /* ========================================================= 06 — EXTRA SMALL MOBILE Up to 390px ========================================================= */ @media (max-width: 390px) { #wh-books-hero .whb-hero { padding-top: 102px; } #wh-books-hero .whb-hero__container, #wh-books-hero .whb-hero__bottom { width: calc(100% - 32px); } #wh-books-hero .whb-hero__eyebrow { font-size: 7px; gap: 7px; } #wh-books-hero .whb-hero__title { font-size: clamp(39px, 11.1vw, 44px); letter-spacing: -.075em; } #wh-books-hero .whb-hero__lead { font-size: 19px; } #wh-books-hero .whb-hero__description { font-size: 13px; } #wh-books-hero .whb-hero__actions { gap: 10px 17px; } #wh-books-hero .whb-hero__button--primary { min-height: 53px; padding-left: 16px; gap: 10px; } #wh-books-hero .whb-hero__button-icon { width: 36px; height: 36px; } #wh-books-hero .whb-hero__signature { font-size: 7px; } #wh-books-hero .whb-hero__visual-stage { margin-bottom: 25px; } #wh-books-hero .whb-hero__artwork { transform: translateY(-8px) scale(.92); } #wh-books-hero .whb-hero__floating-label { font-size: 7px; padding: 7px 9px; } #wh-books-hero .whb-hero__floating-label--one { top: 22%; left: -1%; } #wh-books-hero .whb-hero__floating-label--two { bottom: 21%; right: -1%; } #wh-books-hero .whb-hero__visual-caption { font-size: 6.5px; letter-spacing: .06em; } #wh-books-hero .whb-hero__bottom-index { font-size: 7px; } } /* ========================================================= 07 — TOUCH INTERACTION No hover-dependent functionality. ========================================================= */ @media (hover: none) and (pointer: coarse) { #wh-books-hero .whb-hero__button--primary:hover { transform: none; background: var(--whb-coral); border-color: var(--whb-coral); box-shadow: 0 12px 28px rgba(224, 117, 98, .18); } #wh-books-hero .whb-hero__button--primary:hover .whb-hero__button-icon { transform: none; } #wh-books-hero .whb-hero__button--secondary:hover .whb-hero__secondary-arrow { transform: none; } #wh-books-hero .whb-hero__button:active { opacity: .85; } } /* ========================================================= 08 — RESPONSIVE REDUCED MOTION ========================================================= */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-books-hero .whb-hero__visual-halo, #wh-books-hero .whb-hero__artwork, #wh-books-hero .whb-hero__floating-label { animation: none !important; transition: none !important; } } /* ========================================================= END — BOOKS / SECTION 01 TABLET + MOBILE CSS V1.0 ========================================================= *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ca8c5a3 *//* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 02 — FIND YOUR WORLD DESKTOP CSS · V1.0 SECTION ID: #wh-books-worlds HEADER ENGINE: wh-theme-dark BREAKPOINT: Desktop >= 1025px CSS scoped to Section 02. Tablet / Mobile CSS will be added separately. ========================================================= */ /* ========================================================= 01 — FOUNDATION ========================================================= */ #wh-books-worlds { --whbw-ink: #171820; --whbw-ink-deep: #101118; --whbw-ink-soft: #24252F; --whbw-white: #F9F6F0; --whbw-muted: #B7B2BC; --whbw-muted-soft: #898592; --whbw-coral: #EF8874; --whbw-gold: #E8BD81; --whbw-teal: #75C0B6; --whbw-line: rgba(255,255,255,.13); position: relative; width: 100%; margin: 0; padding: 0; background: var(--whbw-ink); color: var(--whbw-white); isolation: isolate; } #wh-books-worlds, #wh-books-worlds * { box-sizing: border-box; } #wh-books-worlds .whbw { position: relative; width: 100%; min-height: 920px; overflow: hidden; padding: clamp(115px, 10vw, 165px) 0 clamp(75px, 7vw, 110px); background: radial-gradient( ellipse at 78% 42%, rgba(80, 70, 91, .25), transparent 55% ), linear-gradient( 145deg, #20212B 0%, #171820 47%, #101118 100% ); font-family: "Inter", sans-serif; } /* ========================================================= 02 — AMBIENT BACKGROUND ========================================================= */ #wh-books-worlds .whbw__ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-books-worlds .whbw__glow { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: .55; } #wh-books-worlds .whbw__glow--one { width: 650px; height: 650px; top: 10%; right: -12%; background: rgba(218, 117, 115, .13); } #wh-books-worlds .whbw__glow--two { width: 520px; height: 520px; bottom: -18%; left: 7%; background: rgba(75, 169, 162, .12); } #wh-books-worlds .whbw__grid-texture { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient( rgba(255,255,255,.055) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.055) 1px, transparent 1px ); background-size: 96px 96px; mask-image: linear-gradient( to bottom, transparent 0%, black 28%, black 78%, transparent 100% ); } /* ========================================================= 03 — SECTION INTRO ========================================================= */ #wh-books-worlds .whbw__intro { position: relative; z-index: 3; width: min(100% - 112px, 1510px); margin: 0 auto 64px; } #wh-books-worlds .whbw__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 27px; color: var(--whbw-gold); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .18em; line-height: 1.5; } #wh-books-worlds .whbw__eyebrow-icon { font-size: 23px; line-height: 1; } #wh-books-worlds .whbw__eyebrow-line { width: 34px; height: 1px; background: rgba(232,189,129,.46); } #wh-books-worlds .whbw__title { margin: 0; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(72px, 7.7vw, 126px); font-weight: 800; line-height: .99; letter-spacing: -.075em; color: var(--whbw-white); } #wh-books-worlds .whbw__title em { font-style: normal; color: var(--whbw-coral); } #wh-books-worlds .whbw__intro-text { max-width: 630px; margin: 24px 0 0; font-family: "Inter", sans-serif; font-size: clamp(15px, 1.12vw, 18px); font-weight: 400; line-height: 1.8; color: var(--whbw-muted); } /* ========================================================= 04 — INTERACTIVE EXPERIENCE GRID ========================================================= */ #wh-books-worlds .whbw__experience { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(275px, .75fr) minmax(0, 1.65fr); align-items: stretch; gap: clamp(26px, 3.8vw, 65px); width: min(100% - 112px, 1510px); margin: 0 auto; } /* ========================================================= 05 — AGE SELECTOR ========================================================= */ #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; border-left: 1px solid var(--whbw-line); } #wh-books-worlds .whbw__tab { position: relative; display: grid; grid-template-columns: 25px 73px minmax(0,1fr); align-items: center; gap: 13px; width: 100%; min-height: 83px; margin: 0; padding: 15px 15px 15px 22px; border: 0; border-radius: 0; background: transparent; color: var(--whbw-muted-soft); text-align: left; font-family: "Inter", sans-serif; cursor: pointer; transition: color .35s ease, background .35s ease, transform .35s ease; } #wh-books-worlds .whbw__tab::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -2px; width: 3px; border-radius: 20px; background: var(--whbw-coral); opacity: 0; transform: scaleY(.3); transition: opacity .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); } #wh-books-worlds .whbw__tab-number { font-size: 10px; font-weight: 700; letter-spacing: .08em; opacity: .6; } #wh-books-worlds .whbw__tab-age { font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(23px, 2.25vw, 34px); font-weight: 800; letter-spacing: -.055em; white-space: nowrap; } #wh-books-worlds .whbw__tab-name { font-size: clamp(10px, .9vw, 13px); font-weight: 600; line-height: 1.45; } /* Hover */ @media (hover: hover) and (pointer: fine) { #wh-books-worlds .whbw__tab:hover { color: var(--whbw-white); background: rgba(255,255,255,.035); } #wh-books-worlds .whbw__tab:hover .whbw__tab-age { color: var(--whbw-gold); } } /* Selected state */ #wh-books-worlds .whbw__tab.is-active, #wh-books-worlds .whbw__tab[aria-selected="true"] { color: var(--whbw-white); background: linear-gradient( 90deg, rgba(239,136,116,.12), rgba(239,136,116,0) ); } #wh-books-worlds .whbw__tab.is-active::before, #wh-books-worlds .whbw__tab[aria-selected="true"]::before { opacity: 1; transform: scaleY(1); } #wh-books-worlds .whbw__tab.is-active .whbw__tab-age, #wh-books-worlds .whbw__tab[aria-selected="true"] .whbw__tab-age { color: var(--whbw-coral); } #wh-books-worlds .whbw__tab:focus-visible { outline: 2px solid var(--whbw-teal); outline-offset: -3px; z-index: 2; } /* ========================================================= 06 — CINEMATIC WORLD STAGE ========================================================= */ #wh-books-worlds .whbw__stage { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 600px; padding: clamp(32px, 3.5vw, 55px); overflow: hidden; isolation: isolate; border: 1px solid rgba(255,255,255,.17); border-radius: 26px; background: linear-gradient( 135deg, #C7A079 0%, #AC827D 45%, #527E7D 100% ); box-shadow: 0 36px 90px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.15); } /* ========================================================= 07 — ABSTRACT WORLD ART Temporary CSS scenery until actual images are added. ========================================================= */ #wh-books-worlds .whbw__stage-art { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-books-worlds .whbw__stage-image { position: absolute; inset: 0; background: radial-gradient( circle at 73% 31%, rgba(255,241,199,.9) 0%, rgba(255,222,172,.42) 13%, transparent 28% ), radial-gradient( ellipse at 70% 68%, rgba(81,158,151,.8) 0%, transparent 55% ), linear-gradient( 135deg, #D0A57F 0%, #D89386 43%, #438E87 100% ); transform: scale(1.02); transition: opacity .65s ease, transform 1.1s cubic-bezier(.2,.75,.2,1), background .6s ease; } #wh-books-worlds .whbw__stage-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(17,20,28,.76) 0%, rgba(17,20,28,.46) 45%, rgba(17,20,28,.03) 100% ), linear-gradient( 0deg, rgba(17,20,28,.55), transparent 50% ); } /* Decorative orbits */ #wh-books-worlds .whbw__stage-orbit { position: absolute; display: block; border: 1px solid rgba(255,255,255,.20); border-radius: 50%; } #wh-books-worlds .whbw__stage-orbit--one { width: 640px; height: 640px; top: -220px; right: -250px; } #wh-books-worlds .whbw__stage-orbit--two { width: 430px; height: 430px; bottom: -280px; right: -100px; border-color: rgba(255,255,255,.12); } #wh-books-worlds .whbw__stage-spark { position: absolute; color: rgba(255,241,211,.85); line-height: 1; } #wh-books-worlds .whbw__stage-spark--one { top: 17%; right: 18%; font-size: 27px; } #wh-books-worlds .whbw__stage-spark--two { bottom: 24%; right: 12%; font-size: 36px; opacity: .7; } /* ========================================================= 08 — STAGE CONTENT ========================================================= */ #wh-books-worlds .whbw__stage-content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-height: 0; color: #FFFFFF; } /* Topline */ #wh-books-worlds .whbw__stage-topline { display: flex; align-items: center; justify-content: space-between; gap: 20px; } #wh-books-worlds .whbw__stage-kicker { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .19em; line-height: 1.5; color: rgba(255,255,255,.8); } #wh-books-worlds .whbw__stage-count { font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #FFFFFF; } #wh-books-worlds .whbw__stage-count-separator { padding: 0 7px; opacity: .5; } /* Main story */ #wh-books-worlds .whbw__stage-copy { max-width: 590px; padding: 50px 0; } #wh-books-worlds .whbw__stage-age { margin: 0 0 16px; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: #FFE0AD; } #wh-books-worlds .whbw__stage-title { max-width: 560px; margin: 0; padding: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(48px, 5vw, 83px); font-weight: 800; letter-spacing: -.068em; line-height: 1.02; color: #FFFFFF; text-wrap: balance; } #wh-books-worlds .whbw__stage-description { max-width: 450px; margin: 22px 0 0; font-family: "Inter", sans-serif; font-size: clamp(15px, 1.08vw, 17px); font-weight: 400; line-height: 1.65; color: rgba(255,255,255,.88); } /* ========================================================= 09 — STAGE CTA ========================================================= */ #wh-books-worlds .whbw__stage-cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 23px; width: fit-content; max-width: 100%; min-height: 59px; margin-top: 35px; padding: 8px 9px 8px 23px; border: 1px solid rgba(255,255,255,.45); border-radius: 100px; background: rgba(255,255,255,.96); color: #24232B; text-decoration: none; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.3; cursor: pointer; box-shadow: 0 14px 32px rgba(20,15,20,.15); transition: background .3s ease, transform .3s ease, box-shadow .3s ease; } #wh-books-worlds .whbw__cta-arrow { display: grid; place-items: center; flex: 0 0 41px; width: 41px; height: 41px; border-radius: 50%; color: #FFFFFF; background: var(--whbw-coral); transition: transform .3s ease; } #wh-books-worlds .whbw__cta-arrow svg { width: 19px; height: 19px; } @media (hover: hover) and (pointer: fine) { #wh-books-worlds .whbw__stage-cta:hover { transform: translateY(-3px); background: #FFFFFF; box-shadow: 0 19px 43px rgba(20,15,20,.23); color: #24232B; } #wh-books-worlds .whbw__stage-cta:hover .whbw__cta-arrow { transform: translateX(3px); } } #wh-books-worlds .whbw__stage-cta:focus-visible { outline: 3px solid var(--whbw-teal); outline-offset: 4px; } /* ========================================================= 10 — STAGE FOOTER ========================================================= */ #wh-books-worlds .whbw__stage-footer { display: flex; justify-content: space-between; align-items: center; gap: 25px; width: 100%; padding-top: 23px; border-top: 1px solid rgba(255,255,255,.25); font-family: "Inter", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .17em; color: rgba(255,255,255,.78); } #wh-books-worlds .whbw__stage-progress { width: 125px; flex-shrink: 0; } #wh-books-worlds .whbw__progress-track { display: block; width: 100%; height: 3px; overflow: hidden; border-radius: 100px; background: rgba(255,255,255,.28); } #wh-books-worlds .whbw__progress-fill { display: block; width: 16.6667%; height: 100%; border-radius: inherit; background: #FFFFFF; transition: width .65s cubic-bezier(.22,1,.36,1); } /* ========================================================= 11 — SECTION OUTRO ========================================================= */ #wh-books-worlds .whbw__outro { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 27px; width: min(100% - 112px, 1510px); margin: 69px auto 0; } #wh-books-worlds .whbw__outro-line { width: 70px; height: 1px; flex: 0 0 70px; background: var(--whbw-coral); } #wh-books-worlds .whbw__outro p { margin: 0; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(17px, 1.65vw, 23px); font-weight: 500; line-height: 1.45; letter-spacing: -.025em; color: #D5D0D5; } #wh-books-worlds .whbw__outro-star { color: var(--whbw-gold); font-size: 27px; } /* ========================================================= 12 — COMPACT DESKTOP 1025px — 1360px ========================================================= */ @media (min-width: 1025px) and (max-width: 1360px) { #wh-books-worlds .whbw__intro, #wh-books-worlds .whbw__experience, #wh-books-worlds .whbw__outro { width: calc(100% - 88px); } #wh-books-worlds .whbw__experience { grid-template-columns: minmax(270px, .82fr) minmax(0, 1.5fr); gap: 28px; } #wh-books-worlds .whbw__tab { grid-template-columns: 22px 64px minmax(0,1fr); gap: 9px; padding-left: 17px; } #wh-books-worlds .whbw__tab-age { font-size: 27px; } #wh-books-worlds .whbw__tab-name { font-size: 11px; } #wh-books-worlds .whbw__stage { min-height: 560px; padding: 35px; } #wh-books-worlds .whbw__stage-title { font-size: clamp(49px, 4.8vw, 69px); } } /* ========================================================= 13 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #wh-books-worlds *, #wh-books-worlds *::before, #wh-books-worlds *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================= END — WONDERHUE BOOKS SECTION 02 — CSS DESKTOP V1.0 ========================================================= */ /* ========================================================= BOOKS — SECTION 02 WOW JS TRANSITION SUPPORT · V1.0 ========================================================= */ #wh-books-worlds .whbw__stage-copy { transition: opacity .3s ease, transform .5s cubic-bezier(.22,1,.36,1); } #wh-books-worlds .whbw__stage.is-transitioning .whbw__stage-copy { opacity: .2; transform: translateY(10px); } #wh-books-worlds .whbw__stage { transition: box-shadow .6s ease, border-color .6s ease; } #wh-books-worlds .whbw__stage:hover { box-shadow: 0 40px 100px rgba(0,0,0,.3), 0 0 65px var(--whbw-active-glow, transparent); } @media (prefers-reduced-motion: reduce) { #wh-books-worlds .whbw__stage-copy, #wh-books-worlds .whbw__stage { transition: none !important; } } /* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 02 — FIND YOUR WORLD CSS TABLET + MOBILE · V2.0 TARGET: #wh-books-worlds TABLET: 768px – 1024px MOBILE: 0px – 767px TABLET: 3 columns × 2 rows + stage below MOBILE: Single horizontal swipe row + stage below REPLACES RESPONSIVE CSS V1.0 ENTIRELY. KEEP: - Desktop CSS - WOW Transition CSS - HTML - JavaScript ========================================================= */ /* ========================================================= 01 — RESPONSIVE FOUNDATION ========================================================= */ @media (max-width: 1024px) { #wh-books-worlds { width: 100%; max-width: 100%; overflow: clip; } #wh-books-worlds .whbw { width: 100%; min-height: 0; overflow: clip; } #wh-books-worlds .whbw__intro, #wh-books-worlds .whbw__experience, #wh-books-worlds .whbw__outro { min-width: 0; max-width: 100%; } /* Override Desktop grid */ #wh-books-worlds .whbw__experience { display: flex; flex-direction: column; align-items: stretch; } #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { min-width: 0; border-left: 0; } #wh-books-worlds .whbw__stage { width: 100%; min-width: 0; } #wh-books-worlds .whbw__stage-title { overflow-wrap: break-word; } #wh-books-worlds .whbw__stage-cta { max-width: 100%; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } } /* ========================================================= 02 — TABLET 768px – 1024px SIX AGES: 3 COLUMNS × 2 ROWS ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { #wh-books-worlds .whbw { padding: 105px 0 76px; } /* INTRO */ #wh-books-worlds .whbw__intro { width: calc(100% - 80px); max-width: 920px; margin: 0 auto 35px; } #wh-books-worlds .whbw__eyebrow { margin-bottom: 20px; font-size: 9px; } #wh-books-worlds .whbw__title { font-size: clamp(64px, 8.2vw, 94px); line-height: .98; } #wh-books-worlds .whbw__intro-text { max-width: 600px; margin-top: 19px; font-size: 15px; line-height: 1.7; } /* EXPERIENCE */ #wh-books-worlds .whbw__experience { width: calc(100% - 80px); max-width: 920px; gap: 20px; margin: 0 auto; } /* IMPORTANT: Force actual 3-column grid. Prevent Elementor/global button rules from stretching each tab into a row. */ #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row; grid-auto-rows: minmax(84px, auto); align-items: stretch; justify-content: stretch; gap: 10px !important; width: 100%; max-width: 100%; padding: 0; margin: 0; overflow: visible; } /* COMPACT AGE CARDS */ #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 > .whbw__tab { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; grid-column: auto; gap: 4px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 84px !important; margin: 0 !important; padding: 12px 15px !important; border: 1px solid rgba(255,255,255,.15); border-radius: 14px; background: rgba(255,255,255,.04); text-align: left; white-space: normal; box-shadow: none; } #wh-books-worlds .whbw__tab::before { top: 11px; bottom: 11px; left: -1px; width: 3px; } #wh-books-worlds .whbw__tab-number { font-size: 8px; line-height: 1.2; } #wh-books-worlds .whbw__tab-age { font-size: clamp(23px, 2.9vw, 31px); line-height: 1; } #wh-books-worlds .whbw__tab-name { font-size: clamp(9px, 1.05vw, 11px); line-height: 1.3; overflow-wrap: break-word; } #wh-books-worlds .whbw__tab.is-active, #wh-books-worlds .whbw__tab[aria-selected="true"] { border-color: rgba(239,136,116,.52); background: rgba(239,136,116,.12); } /* STAGE DIRECTLY BELOW SELECTOR */ #wh-books-worlds .whbw__stage { min-height: 470px; margin: 0; padding: 35px 39px; border-radius: 22px; } #wh-books-worlds .whbw__stage-copy { max-width: 540px; padding: 38px 0; } #wh-books-worlds .whbw__stage-title { font-size: clamp(50px, 6.7vw, 76px); line-height: 1.02; } #wh-books-worlds .whbw__stage-description { font-size: 15px; } #wh-books-worlds .whbw__stage-cta { min-height: 55px; margin-top: 26px; } /* OUTRO */ #wh-books-worlds .whbw__outro { width: calc(100% - 80px); max-width: 920px; gap: 20px; margin: 44px auto 0; } #wh-books-worlds .whbw__outro p { font-size: 19px; } } /* ========================================================= 03 — MOBILE 0px – 767px SINGLE HORIZONTAL SWIPE SELECTOR ========================================================= */ @media (max-width: 767px) { #wh-books-worlds .whbw { padding: 76px 0 58px; } /* AMBIENT */ #wh-books-worlds .whbw__glow--one { width: 310px; height: 310px; top: 12%; right: -38%; filter: blur(60px); } #wh-books-worlds .whbw__glow--two { width: 290px; height: 290px; bottom: -4%; left: -35%; filter: blur(60px); } #wh-books-worlds .whbw__grid-texture { background-size: 64px 64px; opacity: .12; } /* INTRO */ #wh-books-worlds .whbw__intro { width: calc(100% - 40px); max-width: 520px; margin: 0 auto 29px; } #wh-books-worlds .whbw__eyebrow { gap: 8px; margin-bottom: 18px; font-size: 8px; letter-spacing: .12em; } #wh-books-worlds .whbw__eyebrow-icon { font-size: 19px; } #wh-books-worlds .whbw__eyebrow-line { width: 18px; } #wh-books-worlds .whbw__title { font-size: clamp(45px, 10.7vw, 75px); line-height: .99; letter-spacing: -.07em; text-wrap: balance; } #wh-books-worlds .whbw__intro-text { max-width: 430px; margin-top: 18px; font-size: 14px; line-height: 1.7; } /* EXPERIENCE */ #wh-books-worlds .whbw__experience { width: 100%; max-width: 100%; gap: 17px; margin: 0 auto; } /* HORIZONTAL SWIPE ROW !important protects against global Elementor button/container rules. */ #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 9px !important; width: 100% !important; min-width: 0; max-width: 100%; padding: 0 20px 12px !important; margin: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; scroll-padding-inline: 20px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Do not let child items shrink */ box-sizing: border-box; } #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3::-webkit-scrollbar { display: none; } /* MOBILE AGE CARDS */ #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 > .whbw__tab { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; flex: 0 0 116px !important; width: 116px !important; min-width: 116px !important; max-width: 116px !important; min-height: 84px !important; gap: 5px !important; margin: 0 !important; padding: 12px !important; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; background: rgba(255,255,255,.045); color: #D0CBD4; text-align: left; white-space: normal; scroll-snap-align: start; box-shadow: none; } #wh-books-worlds .whbw__tab::before { top: 10px; bottom: 10px; left: -1px; width: 3px; } #wh-books-worlds .whbw__tab-number { font-size: 8px; line-height: 1; } #wh-books-worlds .whbw__tab-age { font-size: 25px; line-height: 1; white-space: nowrap; } #wh-books-worlds .whbw__tab-name { font-size: 9px; line-height: 1.25; overflow-wrap: break-word; } #wh-books-worlds .whbw__tab.is-active, #wh-books-worlds .whbw__tab[aria-selected="true"] { border-color: rgba(239,136,116,.55); background: rgba(239,136,116,.14); color: #FFFFFF; } /* STAGE — CLOSE TO THE SELECTOR */ #wh-books-worlds .whbw__stage { width: calc(100% - 40px); max-width: 520px; min-height: 445px; margin: 0 auto; padding: 25px 22px; border-radius: 20px; } #wh-books-worlds .whbw__stage-topline { gap: 12px; } #wh-books-worlds .whbw__stage-kicker { font-size: 8px; letter-spacing: .12em; } #wh-books-worlds .whbw__stage-count { font-size: 10px; } #wh-books-worlds .whbw__stage-copy { max-width: 100%; padding: 26px 0; } #wh-books-worlds .whbw__stage-age { margin-bottom: 12px; font-size: 9px; letter-spacing: .14em; } #wh-books-worlds .whbw__stage-title { max-width: 100%; font-size: clamp(37px, 9.1vw, 61px); line-height: 1.03; letter-spacing: -.06em; overflow-wrap: break-word; hyphens: none; } #wh-books-worlds .whbw__stage-description { max-width: 330px; margin-top: 15px; font-size: 13px; line-height: 1.6; } /* CTA */ #wh-books-worlds .whbw__stage-cta { min-height: 52px; max-width: 100%; gap: 10px; margin-top: 22px; padding: 7px 7px 7px 15px; font-size: 11px; line-height: 1.3; border-radius: 50px; } #wh-books-worlds .whbw__cta-arrow { flex: 0 0 36px; width: 36px; height: 36px; } #wh-books-worlds .whbw__cta-arrow svg { width: 17px; height: 17px; } /* FOOTER */ #wh-books-worlds .whbw__stage-footer { align-items: flex-end; gap: 12px; padding-top: 16px; font-size: 7px; line-height: 1.5; letter-spacing: .1em; } #wh-books-worlds .whbw__stage-progress { width: 73px; flex-shrink: 0; } /* WORLD ART */ #wh-books-worlds .whbw__stage-image { background-size: cover; background-position: center; } #wh-books-worlds .whbw__stage-overlay { background: linear-gradient( 0deg, rgba(17,20,28,.80) 0%, rgba(17,20,28,.49) 48%, rgba(17,20,28,.14) 100% ); } #wh-books-worlds .whbw__stage-orbit--one { width: 370px; height: 370px; top: -135px; right: -220px; } #wh-books-worlds .whbw__stage-orbit--two { width: 280px; height: 280px; bottom: -180px; right: -130px; } #wh-books-worlds .whbw__stage-spark--one { top: 15%; right: 17%; font-size: 22px; } #wh-books-worlds .whbw__stage-spark--two { bottom: 24%; right: 10%; font-size: 25px; } /* OUTRO */ #wh-books-worlds .whbw__outro { width: calc(100% - 40px); max-width: 520px; justify-content: flex-start; gap: 14px; margin: 36px auto 0; } #wh-books-worlds .whbw__outro-line { width: 28px; flex: 0 0 28px; } #wh-books-worlds .whbw__outro p { font-size: 15px; line-height: 1.45; } #wh-books-worlds .whbw__outro-star { font-size: 20px; } } /* ========================================================= 04 — SMALL MOBILE 391px – 430px ========================================================= */ @media (min-width: 391px) and (max-width: 430px) { #wh-books-worlds .whbw__stage-title { font-size: clamp(37px, 8.9vw, 41px); } #wh-books-worlds .whbw__stage { min-height: 455px; } } /* ========================================================= 05 — EXTRA SMALL MOBILE 0px – 390px ========================================================= */ @media (max-width: 390px) { #wh-books-worlds .whbw { padding: 68px 0 54px; } #wh-books-worlds .whbw__intro { width: calc(100% - 32px); } #wh-books-worlds .whbw__title { font-size: clamp(40px, 10.5vw, 47px); } #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { padding-left: 16px !important; padding-right: 16px !important; scroll-padding-inline: 16px; } #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 > .whbw__tab { flex-basis: 110px !important; width: 110px !important; min-width: 110px !important; max-width: 110px !important; min-height: 82px !important; padding: 10px !important; } #wh-books-worlds .whbw__tab-age { font-size: 24px; } #wh-books-worlds .whbw__stage { width: calc(100% - 32px); min-height: 455px; padding: 22px 18px; } #wh-books-worlds .whbw__stage-title { font-size: clamp(34px, 9vw, 38px); } #wh-books-worlds .whbw__stage-description { font-size: 12px; } #wh-books-worlds .whbw__stage-cta { padding-left: 13px; font-size: 10px; } #wh-books-worlds .whbw__stage-progress { width: 60px; } #wh-books-worlds .whbw__outro { width: calc(100% - 32px); } #wh-books-worlds .whbw__outro p { font-size: 14px; } } /* ========================================================= 06 — TOUCH INTERACTION ========================================================= */ @media (hover: none) and (pointer: coarse) { #wh-books-worlds .whbw__tab:hover { transform: none; } #wh-books-worlds .whbw__stage:hover { box-shadow: 0 36px 90px rgba(0,0,0,.22); } #wh-books-worlds .whbw__tab:active { opacity: .88; } #wh-books-worlds .whbw__stage-cta:active { opacity: .9; } } /* ========================================================= 07 — REDUCED MOTION ========================================================= */ @media (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { scroll-behavior: auto; } #wh-books-worlds .whbw__stage-image, #wh-books-worlds .whbw__stage-copy { transition: none !important; } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 02 TABLET + MOBILE CSS V2.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 02 — LAYOUT RESCUE V3.0 PURPOSE: Force Tablet and Mobile .elementor-606 .elementor-element.elementor-element-ca8c5a3 layout. Desktop remains unchanged. No HTML or JavaScript changes. ========================================================= */ /* ========================================================= 01 — TABLET: SIX BUTTONS IN 3 × 2 GRID ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1024px) { #wh-books-worlds .whbw .whbw__experience > .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: repeat(2, auto) !important; flex-direction: unset !important; width: 100% !important; height: auto !important; gap: 10px !important; padding: 0 !important; margin: 0 !important; align-items: stretch !important; justify-content: stretch !important; } #wh-books-worlds .whbw .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 > button.whbw__tab { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; grid-column: auto !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 88px !important; padding: 12px 15px !important; margin: 0 !important; gap: 5px !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 14px !important; } } /* ========================================================= 02 — MOBILE: SINGLE HORIZONTAL SWIPE ROW ========================================================= */ @media screen and (max-width: 767px) { #wh-books-worlds .whbw .whbw__experience > .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; padding: 0 20px 12px !important; margin: 0 !important; gap: 9px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #wh-books-worlds .whbw .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 > button.whbw__tab { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; flex: 0 0 116px !important; width: 116px !important; min-width: 116px !important; max-width: 116px !important; height: auto !important; min-height: 88px !important; padding: 12px !important; margin: 0 !important; gap: 5px !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 14px !important; scroll-snap-align: start; } #wh-books-worlds .whbw .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3::-webkit-scrollbar { display: none; } } /* ========================================================= END — LAYOUT RESCUE V3.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 02 — RESPONSIVE LAYOUT RESCUE V4.0 APPEND AT THE VERY END OF SECTION 02 CSS PURPOSE: - Override persistent vertical .elementor-606 .elementor-element.elementor-element-ca8c5a3 layout - Tablet: 3 x 2 compact age grid - Mobile: horizontal swipe .elementor-606 .elementor-element.elementor-element-ca8c5a3 - Maintain cinematic stage - Do not modify Desktop above 1024px HTML and JS remain unchanged. ========================================================= */ /* ========================================================= 01 — CONTAINER PREPARATION ========================================================= */ #wh-books-worlds { container-type: inline-size; container-name: whbw-layout; } /* ========================================================= 02 — TABLET LAYOUT ========================================================= */ @container whbw-layout (min-width: 768px) and (max-width: 1024px) { #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-flow: row !important; gap: 10px !important; } #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 > .whbw__tab { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; min-height: 88px !important; padding: 12px 15px !important; margin: 0 !important; border-radius: 14px !important; } } /* ========================================================= 03 — MOBILE LAYOUT ========================================================= */ @container whbw-layout (max-width: 767px) { #wh-books-worlds .whbw__experience { display: flex !important; flex-direction: column !important; } #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; gap: 9px !important; padding: 0 20px 12px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 > .whbw__tab { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; flex: 0 0 116px !important; width: 116px !important; min-width: 116px !important; max-width: 116px !important; min-height: 88px !important; padding: 12px !important; margin: 0 !important; border-radius: 14px !important; } } /* ========================================================= 04 — VIEWPORT FALLBACK Works if container queries aren't supported. ========================================================= */ @supports not (container-type: inline-size) { @media (min-width: 768px) and (max-width: 1024px) { #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 767px) { #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; } #wh-books-worlds .whbw__.elementor-606 .elementor-element.elementor-element-ca8c5a3 > .whbw__tab { flex: 0 0 116px !important; width: 116px !important; min-width: 116px !important; } } } /* ========================================================= END — BOOKS SECTION 02 RESPONSIVE LAYOUT RESCUE V4.0 ========================================================= *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-91c6533 *//* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 03 — THE BOOK COLLECTION DESKTOP CSS · V1.0 SECTION ID: #wh-books-collection HEADER ENGINE: wh-theme-light BREAKPOINT: Desktop >= 1025px HTML: BOOK COLLECTION V1.0 JAVASCRIPT: GALLERY ENGINE V1.0 Tablet / Mobile CSS will be added separately. ========================================================= */ /* ========================================================= 01 — FOUNDATION ========================================================= */ #wh-books-collection { --whbc-cream: #F8F5EF; --whbc-paper: #FFFCF7; --whbc-ink: #22232B; --whbc-muted: #746F73; --whbc-coral: #EF8874; --whbc-coral-deep: #D46C5C; --whbc-gold: #E8BD81; --whbc-teal: #75C0B6; --whbc-line: rgba(34,35,43,.13); position: relative; width: 100%; margin: 0; padding: 0; background: var(--whbc-cream); color: var(--whbc-ink); isolation: isolate; } #wh-books-collection, #wh-books-collection * { box-sizing: border-box; } #wh-books-collection [hidden] { display: none !important; } #wh-books-collection .whbc { position: relative; width: 100%; min-height: 900px; padding: clamp(115px, 10vw, 165px) 0 clamp(85px, 8vw, 125px); overflow: hidden; background: radial-gradient( ellipse at 94% 14%, rgba(239,136,116,.10), transparent 36% ), radial-gradient( ellipse at 5% 83%, rgba(117,192,182,.10), transparent 37% ), linear-gradient( 145deg, #F9F6F0 0%, #F7F2EB 55%, #FDF9F3 100% ); font-family: "Inter", sans-serif; } #wh-books-collection .whbc__container { position: relative; z-index: 2; width: min(calc(100% - 112px), 1510px); margin: 0 auto; } /* ========================================================= 02 — DECORATIVE BACKGROUND ========================================================= */ #wh-books-collection .whbc__background { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-books-collection .whbc__glow { position: absolute; display: block; border-radius: 50%; filter: blur(90px); pointer-events: none; } #wh-books-collection .whbc__glow--one { width: 680px; height: 680px; top: -200px; right: -260px; background: rgba(239,136,116,.13); } #wh-books-collection .whbc__glow--two { width: 570px; height: 570px; bottom: -210px; left: -190px; background: rgba(117,192,182,.15); } #wh-books-collection .whbc__shape { position: absolute; display: block; opacity: .55; } #wh-books-collection .whbc__shape--one { width: 160px; height: 160px; top: 180px; right: 5%; border: 1px solid rgba(239,136,116,.20); border-radius: 50%; } #wh-books-collection .whbc__shape--two { width: 85px; height: 85px; top: 280px; right: 13%; border: 1px solid rgba(117,192,182,.35); border-radius: 24px; transform: rotate(28deg); } #wh-books-collection .whbc__shape--three { width: 110px; height: 110px; bottom: 170px; left: -55px; border: 1px solid rgba(232,189,129,.38); border-radius: 50%; } #wh-books-collection .whbc__texture { position: absolute; inset: 0; opacity: .15; background-image: radial-gradient( rgba(46,43,47,.20) .55px, transparent .55px ); background-size: 9px 9px; mask-image: linear-gradient( to bottom, transparent, black 22%, black 78%, transparent ); } /* ========================================================= 03 — EDITORIAL INTRO ========================================================= */ #wh-books-collection .whbc__intro { position: relative; width: 100%; margin-bottom: 75px; } #wh-books-collection .whbc__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 31px; color: var(--whbc-coral-deep); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .18em; line-height: 1.5; } #wh-books-collection .whbc__eyebrow-icon { font-size: 24px; line-height: 1; color: var(--whbc-coral); } #wh-books-collection .whbc__eyebrow-line { display: block; width: 36px; height: 1px; background: rgba(212,108,92,.45); } /* ========================================================= 04 — HEADING COMPOSITION ========================================================= */ #wh-books-collection .whbc__heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } #wh-books-collection .whbc__title { margin: 0; padding: 0; max-width: 1050px; color: var(--whbc-ink); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(70px, 7.25vw, 119px); font-weight: 800; line-height: .99; letter-spacing: -.074em; } #wh-books-collection .whbc__title em { font-style: normal; color: var(--whbc-coral-deep); } #wh-books-collection .whbc__heading-aside { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; flex: 0 0 160px; gap: 12px; padding-bottom: 15px; color: var(--whbc-muted); font-family: "Inter", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .15em; line-height: 1.6; } #wh-books-collection .whbc__heading-symbol { color: var(--whbc-teal); font-size: 46px; line-height: 1; } #wh-books-collection .whbc__intro-text { max-width: 670px; margin: 27px 0 0; color: var(--whbc-muted); font-family: "Inter", sans-serif; font-size: clamp(15px, 1.15vw, 18px); font-weight: 400; line-height: 1.85; } /* ========================================================= 05 — COLLECTION TOOLBAR ========================================================= */ #wh-books-collection .whbc__toolbar { position: relative; width: 100%; padding: 31px 0 36px; border-top: 1px solid var(--whbc-line); border-bottom: 1px solid var(--whbc-line); margin-bottom: 55px; } #wh-books-collection .whbc__toolbar-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 25px; } #wh-books-collection .whbc__toolbar-label { font-family: "Inter", sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .18em; line-height: 1.4; color: var(--whbc-ink); } #wh-books-collection .whbc__toolbar-count { font-family: "Inter", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--whbc-muted); } /* ========================================================= 06 — INTERACTIVE AGE FILTERS ========================================================= */ #wh-books-collection .whbc__filters { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px; } #wh-books-collection .whbc__filter { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 47px; margin: 0; padding: 12px 20px; border: 1px solid rgba(34,35,43,.16); border-radius: 100px; background: transparent; color: var(--whbc-ink); text-align: center; text-decoration: none; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; } #wh-books-collection .whbc__filter.is-active, #wh-books-collection .whbc__filter[aria-pressed="true"] { background: var(--whbc-ink); color: #FFFFFF; border-color: var(--whbc-ink); box-shadow: 0 9px 23px rgba(34,35,43,.13); } @media (hover: hover) and (pointer: fine) { #wh-books-collection .whbc__filter:not(.is-active):hover { background: rgba(239,136,116,.12); border-color: rgba(212,108,92,.42); color: var(--whbc-coral-deep); transform: translateY(-2px); } } #wh-books-collection .whbc__filter:focus-visible { outline: 3px solid var(--whbc-teal); outline-offset: 4px; } /* ========================================================= 07 — BOOK COLLECTION GRID ========================================================= */ #wh-books-collection .whbc__collection { position: relative; width: 100%; min-height: 400px; } #wh-books-collection .whbc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; column-gap: clamp(20px, 2.4vw, 40px); row-gap: 70px; width: 100%; } /* ========================================================= 08 — BOOK CARD ========================================================= */ #wh-books-collection .whbc__card { position: relative; min-width: 0; } #wh-books-collection .whbc__card-link { display: flex; flex-direction: column; width: 100%; height: 100%; color: inherit; text-decoration: none; cursor: pointer; } #wh-books-collection .whbc__card-media { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; padding: clamp(16px, 2vw, 29px); overflow: hidden; border-radius: 17px; background: linear-gradient( 145deg, #F2E7D9, #EDE2D6 ); border: 1px solid rgba(34,35,43,.07); box-shadow: 0 15px 34px rgba(49,41,39,.075), inset 0 1px 0 rgba(255,255,255,.75); transition: transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease, background .6s ease; } #wh-books-collection .whbc__card:nth-child(4n+2) .whbc__card-media { background: linear-gradient( 145deg, #E5EEE9, #DBE8E5 ); } #wh-books-collection .whbc__card:nth-child(4n+3) .whbc__card-media { background: linear-gradient( 145deg, #F2E6E6, #E8D9DD ); } #wh-books-collection .whbc__card:nth-child(4n+4) .whbc__card-media { background: linear-gradient( 145deg, #EAE4EF, #DDDCE7 ); } /* ========================================================= 09 — ACTUAL BOOK COVER ========================================================= */ #wh-books-collection .whbc__card-cover { position: relative; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; border-radius: 3px; filter: drop-shadow( 0 15px 17px rgba(30,25,31,.19) ); transition: transform .65s cubic-bezier(.22,1,.36,1), filter .65s ease; } /* ========================================================= 10 — BOOK CARD ARROW ========================================================= */ #wh-books-collection .whbc__card-arrow { position: absolute; top: 15px; right: 15px; display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: rgba(255,255,255,.91); color: var(--whbc-ink); font-size: 20px; line-height: 1; opacity: 0; transform: translateY(7px); transition: opacity .35s ease, transform .45s ease, background .35s ease; } /* ========================================================= 11 — BOOK CARD TEXT ========================================================= */ #wh-books-collection .whbc__card-info { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 22px 3px 0; } #wh-books-collection .whbc__card-age { display: block; margin-bottom: 10px; color: var(--whbc-coral-deep); font-family: "Inter", sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .16em; line-height: 1.4; } #wh-books-collection .whbc__card-title { margin: 0; padding: 0; color: var(--whbc-ink); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(20px, 1.8vw, 28px); font-weight: 800; letter-spacing: -.045em; line-height: 1.2; transition: color .3s ease; } #wh-books-collection .whbc__card-description { margin: 11px 0 0; color: var(--whbc-muted); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 400; line-height: 1.7; } #wh-books-collection .whbc__card-action { display: inline-block; margin-top: 17px; padding-bottom: 5px; border-bottom: 1px solid rgba(212,108,92,.35); color: var(--whbc-coral-deep); font-family: "Inter", sans-serif; font-size: 11px; font-weight: 800; line-height: 1.4; transition: color .3s ease, border-color .3s ease; } /* ========================================================= 12 — CARD HOVER EXPERIENCE ========================================================= */ @media (hover: hover) and (pointer: fine) { #wh-books-collection .whbc__card-link:hover .whbc__card-media { transform: translateY(-8px); box-shadow: 0 28px 55px rgba(49,41,39,.14), inset 0 1px 0 rgba(255,255,255,.75); } #wh-books-collection .whbc__card-link:hover .whbc__card-cover { transform: translateY(-4px) scale(1.035); filter: drop-shadow( 0 20px 20px rgba(30,25,31,.22) ); } #wh-books-collection .whbc__card-link:hover .whbc__card-arrow { opacity: 1; transform: translateY(0); } #wh-books-collection .whbc__card-link:hover .whbc__card-title { color: var(--whbc-coral-deep); } #wh-books-collection .whbc__card-link:hover .whbc__card-action { border-color: var(--whbc-coral-deep); } } #wh-books-collection .whbc__card-link:focus-visible { outline: 3px solid var(--whbc-teal); outline-offset: 6px; border-radius: 12px; } /* ========================================================= 13 — EMPTY COLLECTION STATE ========================================================= */ #wh-books-collection .whbc__empty { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 475px; padding: 65px 30px; border: 1px solid rgba(34,35,43,.10); border-radius: 27px; background: radial-gradient( circle at 50% 12%, rgba(239,136,116,.10), transparent 45% ), rgba(255,255,255,.49); text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 16px 45px rgba(49,41,39,.025); } /* ========================================================= 14 — EMPTY STATE ART ========================================================= */ #wh-books-collection .whbc__empty-art { position: relative; display: grid; place-items: center; width: 220px; height: 172px; margin-bottom: 22px; } #wh-books-collection .whbc__empty-circle { position: absolute; width: 168px; height: 168px; border-radius: 50%; background: linear-gradient( 145deg, rgba(239,136,116,.19), rgba(232,189,129,.24) ); } #wh-books-collection .whbc__empty-book { position: relative; z-index: 2; width: 162px; height: auto; color: var(--whbc-ink); filter: drop-shadow( 0 9px 10px rgba(34,35,43,.075) ); } #wh-books-collection .whbc__empty-star { position: absolute; z-index: 3; color: var(--whbc-coral); line-height: 1; } #wh-books-collection .whbc__empty-star--one { top: 3px; right: 15px; font-size: 35px; } #wh-books-collection .whbc__empty-star--two { bottom: 15px; left: 15px; color: var(--whbc-teal); font-size: 28px; } /* ========================================================= 15 — EMPTY STATE TEXT ========================================================= */ #wh-books-collection .whbc__empty-eyebrow { display: block; margin-bottom: 17px; color: var(--whbc-coral-deep); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .18em; line-height: 1.5; } #wh-books-collection .whbc__empty-title { max-width: 700px; margin: 0; padding: 0; color: var(--whbc-ink); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(37px, 4vw, 63px); font-weight: 800; letter-spacing: -.065em; line-height: 1.08; } #wh-books-collection .whbc__empty-text { max-width: 530px; margin: 19px 0 0; color: var(--whbc-muted); font-family: "Inter", sans-serif; font-size: 15px; font-weight: 400; line-height: 1.8; } /* ========================================================= 16 — SECTION FOOTER ========================================================= */ #wh-books-collection .whbc__footer { position: relative; display: flex; align-items: center; justify-content: center; gap: 26px; width: 100%; margin-top: 78px; } #wh-books-collection .whbc__footer-line { display: block; flex: 0 0 70px; width: 70px; height: 1px; background: var(--whbc-coral); } #wh-books-collection .whbc__footer-message { color: #646068; font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(18px, 1.8vw, 25px); font-weight: 500; letter-spacing: -.025em; line-height: 1.4; } #wh-books-collection .whbc__footer-symbol { color: var(--whbc-teal); font-size: 31px; line-height: 1; } /* ========================================================= 17 — COMPACT DESKTOP 1025px — 1360px ========================================================= */ @media (min-width: 1025px) and (max-width: 1360px) { #wh-books-collection .whbc__container { width: calc(100% - 88px); } #wh-books-collection .whbc__title { font-size: clamp(68px, 7vw, 95px); } #wh-books-collection .whbc__heading-aside { flex-basis: 125px; } #wh-books-collection .whbc__grid { column-gap: 24px; row-gap: 58px; } #wh-books-collection .whbc__card-media { padding: 19px; } #wh-books-collection .whbc__filter { padding: 11px 17px; font-size: 11px; } } /* ========================================================= 18 — ACCESSIBILITY ========================================================= */ @media (prefers-reduced-motion: reduce) { #wh-books-collection *, #wh-books-collection *::before, #wh-books-collection *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 03 DESKTOP CSS V1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 03 — THE BOOK COLLECTION CSS TABLET + MOBILE · V1.0 TABLET: 768px — 1024px MOBILE: 0px — 767px APPEND AFTER DESKTOP CSS V1.0 DESKTOP REMAINS UNCHANGED ========================================================= */ /* ========================================================= 01 — SHARED TABLET + MOBILE ========================================================= */ @media screen and (max-width: 1024px) { #wh-books-collection .whbc { min-height: 0; } #wh-books-collection .whbc__container { min-width: 0; max-width: 100%; } #wh-books-collection .whbc__heading-row { min-width: 0; } #wh-books-collection .whbc__title { overflow-wrap: normal; text-wrap: balance; } #wh-books-collection .whbc__collection { min-height: 0; } #wh-books-collection .whbc__card { min-width: 0; } #wh-books-collection .whbc__card-cover { max-width: 100%; object-fit: contain; } #wh-books-collection .whbc__filter { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #wh-books-collection .whbc__glow--one { width: 440px; height: 440px; right: -190px; filter: blur(70px); } #wh-books-collection .whbc__glow--two { width: 390px; height: 390px; left: -160px; filter: blur(70px); } } /* ========================================================= 02 — TABLET 768px — 1024px ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1024px) { /* SECTION */ #wh-books-collection .whbc { padding: 105px 0 82px; } #wh-books-collection .whbc__container { width: calc(100% - 72px); max-width: 940px; } /* INTRO */ #wh-books-collection .whbc__intro { margin-bottom: 52px; } #wh-books-collection .whbc__eyebrow { gap: 10px; margin-bottom: 23px; font-size: 9px; } #wh-books-collection .whbc__heading-row { align-items: flex-end; gap: 22px; } #wh-books-collection .whbc__title { font-size: clamp(62px, 8vw, 88px); line-height: 1; letter-spacing: -.07em; } #wh-books-collection .whbc__heading-aside { flex: 0 0 110px; padding-bottom: 8px; font-size: 8px; } #wh-books-collection .whbc__heading-symbol { font-size: 37px; } #wh-books-collection .whbc__intro-text { max-width: 580px; margin-top: 22px; font-size: 15px; line-height: 1.75; } /* TOOLBAR */ #wh-books-collection .whbc__toolbar { padding: 25px 0 29px; margin-bottom: 38px; } #wh-books-collection .whbc__toolbar-heading { margin-bottom: 20px; } #wh-books-collection .whbc__toolbar-label { font-size: 10px; } #wh-books-collection .whbc__toolbar-count { font-size: 9px; } #wh-books-collection .whbc__filters { display: flex; flex-wrap: wrap; gap: 9px; } #wh-books-collection .whbc__filter { width: auto; min-height: 43px; padding: 10px 15px; font-size: 11px; } /* BOOK GALLERY — 3 COLUMNS */ #wh-books-collection .whbc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 52px; } #wh-books-collection .whbc__card-media { padding: 20px; border-radius: 15px; } #wh-books-collection .whbc__card-info { padding-top: 18px; } #wh-books-collection .whbc__card-title { font-size: clamp(20px, 2.5vw, 25px); } #wh-books-collection .whbc__card-description { font-size: 12px; } /* EMPTY STATE */ #wh-books-collection .whbc__empty { min-height: 390px; padding: 45px 28px; border-radius: 23px; } #wh-books-collection .whbc__empty-art { width: 185px; height: 145px; margin-bottom: 19px; } #wh-books-collection .whbc__empty-circle { width: 142px; height: 142px; } #wh-books-collection .whbc__empty-book { width: 138px; } #wh-books-collection .whbc__empty-title { font-size: clamp(39px, 5vw, 52px); } #wh-books-collection .whbc__empty-text { max-width: 470px; font-size: 14px; } /* FOOTER */ #wh-books-collection .whbc__footer { gap: 20px; margin-top: 54px; } #wh-books-collection .whbc__footer-message { font-size: 20px; } #wh-books-collection .whbc__footer-symbol { font-size: 26px; } } /* ========================================================= 03 — MOBILE 0px — 767px ========================================================= */ @media screen and (max-width: 767px) { /* SECTION */ #wh-books-collection .whbc { padding: 76px 0 60px; } #wh-books-collection .whbc__container { width: calc(100% - 40px); max-width: 520px; } /* BACKGROUND */ #wh-books-collection .whbc__shape--one { width: 100px; height: 100px; top: 160px; right: -45px; } #wh-books-collection .whbc__shape--two { width: 56px; height: 56px; top: 245px; right: 5%; } #wh-books-collection .whbc__shape--three { width: 70px; height: 70px; bottom: 100px; left: -35px; } /* INTRO */ #wh-books-collection .whbc__intro { margin-bottom: 39px; } #wh-books-collection .whbc__eyebrow { gap: 8px; margin-bottom: 20px; font-size: 8px; letter-spacing: .12em; } #wh-books-collection .whbc__eyebrow-icon { font-size: 19px; } #wh-books-collection .whbc__eyebrow-line { width: 19px; } #wh-books-collection .whbc__heading-row { display: block; } #wh-books-collection .whbc__title { max-width: 100%; font-size: clamp(43px, 10.2vw, 70px); line-height: 1.02; letter-spacing: -.069em; } #wh-books-collection .whbc__heading-aside { display: none; } #wh-books-collection .whbc__intro-text { max-width: 440px; margin-top: 20px; font-size: 14px; line-height: 1.72; } /* TOOLBAR */ #wh-books-collection .whbc__toolbar { padding: 23px 0 23px; margin-bottom: 31px; } #wh-books-collection .whbc__toolbar-heading { gap: 12px; margin-bottom: 18px; } #wh-books-collection .whbc__toolbar-label { font-size: 9px; letter-spacing: .11em; } #wh-books-collection .whbc__toolbar-count { font-size: 9px; letter-spacing: .05em; white-space: nowrap; } /* HORIZONTAL AGE FILTERS */ #wh-books-collection .whbc__filters { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 8px; width: 100%; max-width: 100%; padding: 0 0 10px; margin: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #wh-books-collection .whbc__filters::-webkit-scrollbar { display: none; } #wh-books-collection .whbc__filter { flex: 0 0 auto; width: auto; min-width: max-content; min-height: 42px; padding: 11px 16px; margin: 0; font-size: 11px; scroll-snap-align: start; } /* BOOK GALLERY — 2 COLUMNS */ #wh-books-collection .whbc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 35px; width: 100%; } #wh-books-collection .whbc__card-media { aspect-ratio: 3 / 4; padding: 11px; border-radius: 12px; } #wh-books-collection .whbc__card-cover { max-width: 100%; max-height: 100%; object-fit: contain; } #wh-books-collection .whbc__card-arrow { top: 8px; right: 8px; width: 28px; height: 28px; font-size: 15px; } #wh-books-collection .whbc__card-info { padding: 14px 1px 0; } #wh-books-collection .whbc__card-age { margin-bottom: 7px; font-size: 8px; letter-spacing: .1em; } #wh-books-collection .whbc__card-title { font-size: clamp(16px, 4.4vw, 21px); letter-spacing: -.035em; line-height: 1.23; } #wh-books-collection .whbc__card-description { margin-top: 8px; font-size: 11px; line-height: 1.55; } #wh-books-collection .whbc__card-action { margin-top: 12px; font-size: 10px; } /* EMPTY STATE */ #wh-books-collection .whbc__empty { min-height: 340px; padding: 39px 20px; border-radius: 19px; } #wh-books-collection .whbc__empty-art { width: 156px; height: 119px; margin-bottom: 20px; } #wh-books-collection .whbc__empty-circle { width: 118px; height: 118px; } #wh-books-collection .whbc__empty-book { width: 118px; } #wh-books-collection .whbc__empty-star--one { top: 0; right: 0; font-size: 26px; } #wh-books-collection .whbc__empty-star--two { bottom: 3px; left: 2px; font-size: 23px; } #wh-books-collection .whbc__empty-eyebrow { margin-bottom: 12px; font-size: 8px; letter-spacing: .12em; } #wh-books-collection .whbc__empty-title { max-width: 100%; font-size: clamp(29px, 8vw, 43px); line-height: 1.09; } #wh-books-collection .whbc__empty-text { max-width: 330px; margin-top: 15px; font-size: 12px; line-height: 1.65; } /* FOOTER */ #wh-books-collection .whbc__footer { gap: 12px; margin-top: 42px; } #wh-books-collection .whbc__footer-line { flex: 0 0 28px; width: 28px; } #wh-books-collection .whbc__footer-message { font-size: 15px; line-height: 1.45; } #wh-books-collection .whbc__footer-symbol { font-size: 20px; } } /* ========================================================= 04 — EXTRA SMALL MOBILE 0px — 390px ========================================================= */ @media screen and (max-width: 390px) { #wh-books-collection .whbc { padding: 68px 0 54px; } #wh-books-collection .whbc__container { width: calc(100% - 32px); } #wh-books-collection .whbc__title { font-size: clamp(39px, 10.2vw, 44px); } #wh-books-collection .whbc__filters { gap: 7px; } #wh-books-collection .whbc__filter { min-height: 40px; padding: 10px 13px; font-size: 10px; } #wh-books-collection .whbc__grid { column-gap: 10px; row-gap: 30px; } #wh-books-collection .whbc__card-media { padding: 9px; } #wh-books-collection .whbc__card-title { font-size: 16px; } #wh-books-collection .whbc__empty { padding: 35px 16px; } #wh-books-collection .whbc__empty-title { font-size: clamp(27px, 7.9vw, 31px); } #wh-books-collection .whbc__footer-message { font-size: 14px; } } /* ========================================================= 05 — TOUCH INTERACTION ========================================================= */ @media (hover: none) and (pointer: coarse) { #wh-books-collection .whbc__filter:hover { transform: none; } #wh-books-collection .whbc__card-link:hover .whbc__card-media { transform: none; } #wh-books-collection .whbc__card-link:active .whbc__card-media { transform: scale(.985); } #wh-books-collection .whbc__filter:active { transform: scale(.97); } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 03 TABLET + MOBILE CSS V1.0 ========================================================= *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-5774d28 *//* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 04 — BEYOND THE PAGES DESKTOP CSS · V1.0 SECTION ID: #wh-books-beyond HEADER ENGINE: wh-theme-dark BREAKPOINT: Desktop >= 1025px HTML: BEYOND THE PAGES V1.0 JS: WOW REVEAL V1.0 Tablet / Mobile will follow separately. ========================================================= */ /* ========================================================= 01 — FOUNDATION ========================================================= */ #wh-books-beyond { --whbp-ink: #171820; --whbp-deep: #101118; --whbp-panel: #242630; --whbp-white: #F9F6F0; --whbp-muted: #B8B3BF; --whbp-gold: #E8BD81; --whbp-coral: #EF8874; --whbp-teal: #75C0B6; --whbp-line: rgba(255,255,255,.13); position: relative; width: 100%; margin: 0; padding: 0; background: var(--whbp-ink); color: var(--whbp-white); isolation: isolate; } #wh-books-beyond, #wh-books-beyond * { box-sizing: border-box; } #wh-books-beyond .whbp { position: relative; width: 100%; min-height: 1100px; padding: clamp(120px, 10vw, 165px) 0 clamp(105px, 9vw, 145px); overflow: hidden; background: radial-gradient( ellipse at 85% 14%, rgba(123,95,127,.14), transparent 40% ), radial-gradient( ellipse at 12% 75%, rgba(57,111,110,.12), transparent 40% ), linear-gradient( 150deg, #20212B 0%, #171820 48%, #101118 100% ); font-family: "Inter", sans-serif; } /* ========================================================= 02 — AMBIENT BACKGROUND ========================================================= */ #wh-books-beyond .whbp__ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-books-beyond .whbp__glow { position: absolute; display: block; border-radius: 50%; filter: blur(95px); opacity: .55; } #wh-books-beyond .whbp__glow--one { width: 680px; height: 680px; top: -190px; right: -220px; background: rgba(239,136,116,.14); } #wh-books-beyond .whbp__glow--two { width: 620px; height: 620px; bottom: 5%; left: -240px; background: rgba(117,192,182,.13); } #wh-books-beyond .whbp__texture { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient( rgba(255,255,255,.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.05) 1px, transparent 1px ); background-size: 100px 100px; mask-image: linear-gradient( to bottom, transparent, black 16%, black 82%, transparent ); } #wh-books-beyond .whbp__orbit { position: absolute; display: block; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; } #wh-books-beyond .whbp__orbit--one { width: 780px; height: 780px; top: 5%; right: -430px; } #wh-books-beyond .whbp__orbit--two { width: 620px; height: 620px; bottom: 4%; left: -390px; } /* ========================================================= 03 — EDITORIAL INTRO ========================================================= */ #wh-books-beyond .whbp__intro { position: relative; z-index: 2; width: min(calc(100% - 112px), 1510px); margin: 0 auto 115px; } #wh-books-beyond .whbp__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; color: var(--whbp-gold); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; line-height: 1.5; letter-spacing: .18em; } #wh-books-beyond .whbp__eyebrow-symbol { color: var(--whbp-coral); font-size: 24px; line-height: 1; } #wh-books-beyond .whbp__eyebrow-line { width: 38px; height: 1px; background: rgba(232,189,129,.45); } /* ========================================================= 04 — MAIN TITLE ========================================================= */ #wh-books-beyond .whbp__title { max-width: 1200px; margin: 0; padding: 0; color: var(--whbp-white); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(84px, 9.1vw, 150px); font-weight: 800; line-height: .96; letter-spacing: -.079em; } #wh-books-beyond .whbp__title-break { display: block; } #wh-books-beyond .whbp__title em { font-style: normal; color: var(--whbp-coral); } #wh-books-beyond .whbp__intro-copy { max-width: 680px; margin: 34px 0 0; color: var(--whbp-muted); font-family: "Inter", sans-serif; font-size: clamp(16px, 1.25vw, 19px); font-weight: 400; line-height: 1.85; } #wh-books-beyond .whbp__intro-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 90px; padding-bottom: 26px; border-bottom: 1px solid var(--whbp-line); } #wh-books-beyond .whbp__intro-note { color: var(--whbp-gold); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .18em; } #wh-books-beyond .whbp__intro-scroll { display: flex; align-items: center; gap: 13px; color: var(--whbp-muted); font-family: "Inter", sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .15em; } #wh-books-beyond .whbp__intro-scroll-line { width: 37px; height: 1px; background: var(--whbp-coral); } #wh-books-beyond .whbp__intro-scroll-arrow { color: var(--whbp-coral); font-size: 19px; line-height: 1; } /* ========================================================= 05 — CHAPTER JOURNEY ========================================================= */ #wh-books-beyond .whbp__journey { position: relative; z-index: 2; width: min(calc(100% - 112px), 1510px); margin: 0 auto; } #wh-books-beyond .whbp__chapter { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(65px, 8vw, 150px); min-height: 690px; padding: 55px 0; border-bottom: 1px solid var(--whbp-line); } #wh-books-beyond .whbp__chapter:last-child { border-bottom: 0; } /* ========================================================= 06 — ALTERNATING COMPOSITION ========================================================= */ #wh-books-beyond .whbp__chapter--discover .whbp__chapter-visual { grid-column: 1; grid-row: 1; } #wh-books-beyond .whbp__chapter--discover .whbp__chapter-copy { grid-column: 2; grid-row: 1; } #wh-books-beyond .whbp__chapter--create .whbp__chapter-visual { grid-column: 2; grid-row: 1; } #wh-books-beyond .whbp__chapter--create .whbp__chapter-copy { grid-column: 1; grid-row: 1; } #wh-books-beyond .whbp__chapter--connect .whbp__chapter-visual { grid-column: 1; grid-row: 1; } #wh-books-beyond .whbp__chapter--connect .whbp__chapter-copy { grid-column: 2; grid-row: 1; } /* ========================================================= 07 — VISUAL ART FRAME ========================================================= */ #wh-books-beyond .whbp__chapter-visual { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; min-height: 440px; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 36px; background: radial-gradient( circle at 50% 42%, rgba(255,255,255,.065), transparent 63% ), rgba(255,255,255,.025); box-shadow: 0 35px 95px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.06); } /* ========================================================= 08 — ABSTRACT ART FOUNDATION ========================================================= */ #wh-books-beyond .whbp__art { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; } #wh-books-beyond .whbp__art-halo { position: absolute; width: 66%; aspect-ratio: 1 / 1; border-radius: 50%; filter: blur(25px); opacity: .52; } #wh-books-beyond .whbp__art-symbol { position: relative; z-index: 4; display: grid; place-items: center; width: 155px; height: 155px; border-radius: 50%; color: #FFFFFF; font-size: 100px; line-height: 1; text-shadow: 0 12px 35px rgba(0,0,0,.13); animation: whbpSymbolFloat 6.5s ease-in-out infinite; } #wh-books-beyond .whbp__art-spark { position: absolute; z-index: 5; color: var(--whbp-white); line-height: 1; animation: whbpSparkFloat 7s ease-in-out infinite; } #wh-books-beyond .whbp__art-spark--one { top: 22%; right: 23%; font-size: 35px; } #wh-books-beyond .whbp__art-spark--two { bottom: 23%; left: 22%; font-size: 47px; animation-delay: -3.2s; } /* ========================================================= 09 — DISCOVER ART ========================================================= */ #wh-books-beyond .whbp__art--discover { background: radial-gradient( circle at 50% 50%, rgba(232,189,129,.16), transparent 62% ), linear-gradient( 135deg, #373039, #242631 68%, #222D33 ); } #wh-books-beyond .whbp__art--discover .whbp__art-halo { background: rgba(232,189,129,.47); } #wh-books-beyond .whbp__art--discover .whbp__art-symbol { color: #FFE0AA; } #wh-books-beyond .whbp__art-ring { position: absolute; width: 70%; aspect-ratio: 1 / 1; border: 1px solid rgba(232,189,129,.45); border-radius: 50%; transform: rotate(-20deg); } #wh-books-beyond .whbp__art-ring--one { width: 65%; animation: whbpOrbitRotate 30s linear infinite; } #wh-books-beyond .whbp__art-ring--two { width: 85%; border-color: rgba(232,189,129,.20); animation: whbpOrbitRotate 48s linear infinite reverse; } /* ========================================================= 10 — CREATE ART ========================================================= */ #wh-books-beyond .whbp__art--create { background: radial-gradient( circle at 52% 50%, rgba(239,136,116,.18), transparent 62% ), linear-gradient( 145deg, #432F3B, #2B2937 62%, #3C343A ); } #wh-books-beyond .whbp__art--create .whbp__art-halo { background: rgba(239,136,116,.47); } #wh-books-beyond .whbp__art--create .whbp__art-symbol { color: #FFB09D; } #wh-books-beyond .whbp__art-stroke { position: absolute; display: block; width: 58%; height: 19%; border: 2px solid rgba(239,136,116,.38); border-radius: 50%; } #wh-books-beyond .whbp__art-stroke--one { transform: rotate(-35deg); animation: whbpStrokeDrift 12s ease-in-out infinite; } #wh-books-beyond .whbp__art-stroke--two { width: 75%; height: 28%; border-color: rgba(232,189,129,.25); transform: rotate(48deg); animation: whbpStrokeDrift 16s ease-in-out infinite reverse; } #wh-books-beyond .whbp__art-stroke--three { width: 46%; height: 13%; border-color: rgba(255,255,255,.23); transform: rotate(105deg); } /* ========================================================= 11 — CONNECT ART ========================================================= */ #wh-books-beyond .whbp__art--connect { background: radial-gradient( circle at 48% 47%, rgba(117,192,182,.19), transparent 64% ), linear-gradient( 145deg, #263C40, #242B36 62%, #293D3F ); } #wh-books-beyond .whbp__art--connect .whbp__art-halo { background: rgba(117,192,182,.45); } #wh-books-beyond .whbp__art--connect .whbp__art-symbol { color: #A4E3D7; font-size: 88px; } #wh-books-beyond .whbp__art-circle { position: absolute; width: 43%; aspect-ratio: 1 / 1; border: 2px solid rgba(117,192,182,.34); border-radius: 50%; } #wh-books-beyond .whbp__art-circle--one { transform: translateX(-34%); animation: whbpCircleMeetLeft 8s ease-in-out infinite; } #wh-books-beyond .whbp__art-circle--two { transform: translateX(34%); border-color: rgba(232,189,129,.32); animation: whbpCircleMeetRight 8s ease-in-out infinite; } #wh-books-beyond .whbp__art-circle--three { width: 73%; border-width: 1px; border-color: rgba(255,255,255,.15); } /* ========================================================= 12 — CHAPTER CONTENT ========================================================= */ #wh-books-beyond .whbp__chapter-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: 25px 0; } #wh-books-beyond .whbp__chapter-index { display: block; margin-bottom: 37px; color: var(--whbp-muted); font-family: "Inter", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .17em; } #wh-books-beyond .whbp__chapter-index span { color: #777581; } #wh-books-beyond .whbp__chapter-eyebrow { display: block; margin-bottom: 17px; color: var(--whbp-gold); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .18em; line-height: 1.5; } #wh-books-beyond .whbp__chapter--create .whbp__chapter-eyebrow { color: var(--whbp-coral); } #wh-books-beyond .whbp__chapter--connect .whbp__chapter-eyebrow { color: var(--whbp-teal); } #wh-books-beyond .whbp__chapter-title { margin: 0; padding: 0; color: var(--whbp-white); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(66px, 7vw, 114px); font-weight: 800; line-height: .98; letter-spacing: -.075em; } #wh-books-beyond .whbp__chapter-title span { color: var(--whbp-gold); } #wh-books-beyond .whbp__chapter--create .whbp__chapter-title span { color: var(--whbp-coral); } #wh-books-beyond .whbp__chapter--connect .whbp__chapter-title span { color: var(--whbp-teal); } #wh-books-beyond .whbp__chapter-text { max-width: 485px; margin: 25px 0 0; color: var(--whbp-muted); font-family: "Inter", sans-serif; font-size: clamp(15px, 1.25vw, 18px); font-weight: 400; line-height: 1.85; } #wh-books-beyond .whbp__chapter-signature { display: flex; align-items: center; gap: 20px; margin-top: 37px; padding-bottom: 9px; border-bottom: 1px solid rgba(255,255,255,.19); color: var(--whbp-white); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .15em; line-height: 1.4; } #wh-books-beyond .whbp__chapter-signature span { color: var(--whbp-coral); font-size: 19px; line-height: 1; } /* ========================================================= 13 — EDITORIAL FINALE ========================================================= */ #wh-books-beyond .whbp__finale { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(calc(100% - 112px), 1510px); margin: 110px auto 0; padding: 115px 45px 15px; border-top: 1px solid var(--whbp-line); text-align: center; } #wh-books-beyond .whbp__finale-star { color: var(--whbp-coral); font-size: 48px; line-height: 1; margin-bottom: 30px; } #wh-books-beyond .whbp__finale-text { max-width: 1150px; margin: 0; color: var(--whbp-muted); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(42px, 5.7vw, 86px); font-weight: 600; line-height: 1.16; letter-spacing: -.063em; text-wrap: balance; } #wh-books-beyond .whbp__finale-text strong { color: var(--whbp-white); font-weight: 800; } #wh-books-beyond .whbp__finale-bottom { display: flex; align-items: center; justify-content: center; gap: 27px; width: 100%; margin-top: 85px; color: var(--whbp-gold); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .17em; } #wh-books-beyond .whbp__finale-line { display: block; flex: 0 1 75px; width: 75px; height: 1px; background: rgba(232,189,129,.36); } /* ========================================================= 14 — ANIMATIONS ========================================================= */ @keyframes whbpSymbolFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-13px) rotate(5deg); } } @keyframes whbpSparkFloat { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(-14px); opacity: 1; } } @keyframes whbpOrbitRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes whbpStrokeDrift { 0%, 100% { transform: rotate(-35deg) scale(1); } 50% { transform: rotate(-20deg) scale(1.07); } } @keyframes whbpCircleMeetLeft { 0%, 100% { transform: translateX(-34%); } 50% { transform: translateX(-20%); } } @keyframes whbpCircleMeetRight { 0%, 100% { transform: translateX(34%); } 50% { transform: translateX(20%); } } /* ========================================================= 15 — COMPACT DESKTOP 1025px — 1360px ========================================================= */ @media (min-width: 1025px) and (max-width: 1360px) { #wh-books-beyond .whbp__intro, #wh-books-beyond .whbp__journey, #wh-books-beyond .whbp__finale { width: calc(100% - 88px); } #wh-books-beyond .whbp__title { font-size: clamp(78px, 8.5vw, 118px); } #wh-books-beyond .whbp__chapter { gap: 55px; min-height: 610px; } #wh-books-beyond .whbp__chapter-visual { min-height: 390px; border-radius: 29px; } #wh-books-beyond .whbp__chapter-title { font-size: clamp(62px, 6.5vw, 87px); } #wh-books-beyond .whbp__chapter-text { font-size: 15px; } } /* ========================================================= 16 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #wh-books-beyond *, #wh-books-beyond *::before, #wh-books-beyond *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 04 DESKTOP CSS V1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 04 — BEYOND THE PAGES TABLET + MOBILE CSS · V1.0 SECTION ID: #wh-books-beyond TABLET: 768px — 1024px MOBILE: 0px — 767px APPEND AFTER DESKTOP CSS V1.0 DO NOT MODIFY: - Desktop CSS - HTML V1.0 - WOW Reveal JS V1.0 ========================================================= */ /* ========================================================= 01 — SHARED RESPONSIVE FOUNDATION ========================================================= */ @media screen and (max-width: 1024px) { #wh-books-beyond .whbp { width: 100%; min-height: 0; overflow: hidden; } #wh-books-beyond .whbp__intro, #wh-books-beyond .whbp__journey, #wh-books-beyond .whbp__finale { min-width: 0; max-width: 100%; } #wh-books-beyond .whbp__chapter { min-width: 0; } #wh-books-beyond .whbp__chapter-visual { min-width: 0; max-width: 100%; } #wh-books-beyond .whbp__chapter-copy { min-width: 0; } #wh-books-beyond .whbp__title, #wh-books-beyond .whbp__chapter-title, #wh-books-beyond .whbp__finale-text { overflow-wrap: break-word; } #wh-books-beyond .whbp__glow--one { width: 470px; height: 470px; right: -210px; filter: blur(70px); } #wh-books-beyond .whbp__glow--two { width: 430px; height: 430px; left: -220px; filter: blur(70px); } #wh-books-beyond .whbp__orbit--one { width: 490px; height: 490px; right: -280px; } #wh-books-beyond .whbp__orbit--two { width: 440px; height: 440px; left: -270px; } } /* ========================================================= 02 — TABLET 768px — 1024px Alternating 2-column layout remains. ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1024px) { /* SECTION */ #wh-books-beyond .whbp { padding: 105px 0 90px; } /* INTRO */ #wh-books-beyond .whbp__intro { width: calc(100% - 72px); max-width: 940px; margin: 0 auto 75px; } #wh-books-beyond .whbp__eyebrow { gap: 10px; margin-bottom: 27px; font-size: 9px; } #wh-books-beyond .whbp__eyebrow-symbol { font-size: 20px; } #wh-books-beyond .whbp__title { max-width: 100%; font-size: clamp(66px, 8.8vw, 98px); line-height: .98; letter-spacing: -.073em; } #wh-books-beyond .whbp__intro-copy { max-width: 610px; margin-top: 25px; font-size: 16px; line-height: 1.75; } #wh-books-beyond .whbp__intro-bottom { margin-top: 58px; padding-bottom: 22px; } #wh-books-beyond .whbp__intro-note { font-size: 9px; } #wh-books-beyond .whbp__intro-scroll { font-size: 8px; } /* JOURNEY */ #wh-books-beyond .whbp__journey { width: calc(100% - 72px); max-width: 940px; } #wh-books-beyond .whbp__chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(25px, 4vw, 42px); min-height: 470px; padding: 43px 0; } /* Keep Desktop alternating order */ #wh-books-beyond .whbp__chapter-visual { min-height: 0; aspect-ratio: 1 / 1; border-radius: 24px; } #wh-books-beyond .whbp__art-symbol { width: 110px; height: 110px; font-size: 73px; } #wh-books-beyond .whbp__art--connect .whbp__art-symbol { font-size: 67px; } #wh-books-beyond .whbp__art-spark--one { font-size: 25px; } #wh-books-beyond .whbp__art-spark--two { font-size: 34px; } /* CHAPTER TEXT */ #wh-books-beyond .whbp__chapter-copy { padding: 12px 0; } #wh-books-beyond .whbp__chapter-index { margin-bottom: 24px; font-size: 11px; } #wh-books-beyond .whbp__chapter-eyebrow { margin-bottom: 12px; font-size: 9px; } #wh-books-beyond .whbp__chapter-title { font-size: clamp(49px, 6.4vw, 72px); line-height: 1; } #wh-books-beyond .whbp__chapter-text { max-width: 100%; margin-top: 18px; font-size: 14px; line-height: 1.7; } #wh-books-beyond .whbp__chapter-signature { gap: 12px; margin-top: 24px; font-size: 9px; letter-spacing: .11em; } /* FINALE */ #wh-books-beyond .whbp__finale { width: calc(100% - 72px); max-width: 940px; margin: 75px auto 0; padding: 80px 24px 10px; } #wh-books-beyond .whbp__finale-star { margin-bottom: 24px; font-size: 39px; } #wh-books-beyond .whbp__finale-text { font-size: clamp(43px, 5.7vw, 66px); } #wh-books-beyond .whbp__finale-bottom { gap: 19px; margin-top: 56px; font-size: 9px; } } /* ========================================================= 03 — MOBILE 0px — 767px Every chapter: 1. Visual 2. Text ========================================================= */ @media screen and (max-width: 767px) { /* SECTION */ #wh-books-beyond .whbp { padding: 78px 0 66px; } /* AMBIENT */ #wh-books-beyond .whbp__texture { background-size: 65px 65px; opacity: .12; } #wh-books-beyond .whbp__orbit--one { width: 300px; height: 300px; top: 4%; right: -190px; } #wh-books-beyond .whbp__orbit--two { width: 290px; height: 290px; bottom: 7%; left: -190px; } /* INTRO */ #wh-books-beyond .whbp__intro { width: calc(100% - 40px); max-width: 520px; margin: 0 auto 52px; } #wh-books-beyond .whbp__eyebrow { gap: 8px; margin-bottom: 22px; font-size: 8px; letter-spacing: .12em; } #wh-books-beyond .whbp__eyebrow-symbol { font-size: 19px; } #wh-books-beyond .whbp__eyebrow-line { width: 20px; } #wh-books-beyond .whbp__title { max-width: 100%; font-size: clamp(43px, 10.7vw, 75px); line-height: .99; letter-spacing: -.07em; } #wh-books-beyond .whbp__title-break { display: block; } #wh-books-beyond .whbp__intro-copy { max-width: 430px; margin-top: 23px; font-size: 14px; line-height: 1.7; } #wh-books-beyond .whbp__intro-bottom { align-items: flex-start; justify-content: flex-start; margin-top: 43px; padding-bottom: 19px; } #wh-books-beyond .whbp__intro-note { font-size: 9px; line-height: 1.5; letter-spacing: .12em; } #wh-books-beyond .whbp__intro-scroll { display: none; } /* JOURNEY */ #wh-books-beyond .whbp__journey { width: calc(100% - 40px); max-width: 520px; } #wh-books-beyond .whbp__chapter { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px; min-height: 0; padding: 0 0 49px; margin-bottom: 49px; } #wh-books-beyond .whbp__chapter:last-child { margin-bottom: 0; padding-bottom: 0; } /* VISUAL ALWAYS FIRST */ #wh-books-beyond .whbp__chapter-visual { order: 1; grid-column: auto; grid-row: auto; width: 100%; min-height: 0; aspect-ratio: 1 / 1; border-radius: 23px; } /* CONTENT ALWAYS SECOND */ #wh-books-beyond .whbp__chapter-copy { order: 2; grid-column: auto; grid-row: auto; width: 100%; padding: 0 3px; } /* ART */ #wh-books-beyond .whbp__art-halo { width: 69%; filter: blur(20px); } #wh-books-beyond .whbp__art-symbol { width: 125px; height: 125px; font-size: 85px; } #wh-books-beyond .whbp__art--connect .whbp__art-symbol { font-size: 74px; } #wh-books-beyond .whbp__art-spark--one { top: 19%; right: 19%; font-size: 27px; } #wh-books-beyond .whbp__art-spark--two { bottom: 18%; left: 20%; font-size: 36px; } /* CHAPTER COPY */ #wh-books-beyond .whbp__chapter-index { margin-bottom: 24px; font-size: 11px; } #wh-books-beyond .whbp__chapter-eyebrow { margin-bottom: 11px; font-size: 9px; letter-spacing: .14em; } #wh-books-beyond .whbp__chapter-title { font-size: clamp(53px, 14vw, 85px); line-height: 1; letter-spacing: -.072em; } #wh-books-beyond .whbp__chapter-text { max-width: 440px; margin-top: 19px; font-size: 14px; line-height: 1.75; } #wh-books-beyond .whbp__chapter-signature { gap: 15px; margin-top: 26px; padding-bottom: 9px; font-size: 9px; letter-spacing: .12em; } /* FINALE */ #wh-books-beyond .whbp__finale { width: calc(100% - 40px); max-width: 520px; margin: 68px auto 0; padding: 65px 0 0; } #wh-books-beyond .whbp__finale-star { margin-bottom: 25px; font-size: 35px; } #wh-books-beyond .whbp__finale-text { max-width: 100%; font-size: clamp(35px, 9.7vw, 61px); line-height: 1.13; letter-spacing: -.06em; } #wh-books-beyond .whbp__finale-bottom { gap: 12px; margin-top: 46px; font-size: 8px; letter-spacing: .11em; line-height: 1.5; } #wh-books-beyond .whbp__finale-line { flex: 0 1 32px; width: 32px; } } /* ========================================================= 04 — EXTRA SMALL MOBILE 0px — 390px ========================================================= */ @media screen and (max-width: 390px) { #wh-books-beyond .whbp { padding: 69px 0 57px; } #wh-books-beyond .whbp__intro, #wh-books-beyond .whbp__journey, #wh-books-beyond .whbp__finale { width: calc(100% - 32px); } #wh-books-beyond .whbp__title { font-size: clamp(39px, 10.3vw, 46px); } #wh-books-beyond .whbp__chapter { gap: 25px; margin-bottom: 42px; padding-bottom: 42px; } #wh-books-beyond .whbp__chapter-visual { border-radius: 19px; } #wh-books-beyond .whbp__art-symbol { width: 100px; height: 100px; font-size: 73px; } #wh-books-beyond .whbp__art--connect .whbp__art-symbol { font-size: 64px; } #wh-books-beyond .whbp__chapter-title { font-size: clamp(48px, 13.4vw, 57px); } #wh-books-beyond .whbp__chapter-text { font-size: 13px; } #wh-books-beyond .whbp__finale-text { font-size: clamp(32px, 9.2vw, 37px); } #wh-books-beyond .whbp__finale-bottom { gap: 8px; font-size: 7px; } #wh-books-beyond .whbp__finale-line { flex-basis: 23px; width: 23px; } } /* ========================================================= 05 — TOUCH DEVICES ========================================================= */ @media (hover: none) and (pointer: coarse) { #wh-books-beyond .whbp__chapter-visual { -webkit-tap-highlight-color: transparent; } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media screen and (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-books-beyond .whbp__art-symbol, #wh-books-beyond .whbp__art-ring, #wh-books-beyond .whbp__art-stroke, #wh-books-beyond .whbp__art-circle, #wh-books-beyond .whbp__art-spark { animation: none !important; } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 04 TABLET + MOBILE CSS V1.0 ========================================================= *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f72f870 *//* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 05 — A LITTLE PEEK INSIDE DESKTOP CSS · V1.0 SECTION ID: #wh-books-inside HEADER ENGINE: wh-theme-light DESKTOP: >= 1025px HTML: A LITTLE PEEK INSIDE V1.0 JS: INTERIOR PREVIEW ENGINE V1.0 TABLET / MOBILE: To be added separately. ========================================================= */ /* ========================================================= 01 — FOUNDATION ========================================================= */ #wh-books-inside { --whbi-paper: #F8F5EF; --whbi-cream: #FFFCF7; --whbi-ink: #22232B; --whbi-muted: #746F73; --whbi-coral: #EF8874; --whbi-coral-deep: #D46C5C; --whbi-gold: #E8BD81; --whbi-teal: #75C0B6; --whbi-line: rgba(34,35,43,.13); position: relative; width: 100%; margin: 0; padding: 0; background: var(--whbi-paper); color: var(--whbi-ink); isolation: isolate; } #wh-books-inside, #wh-books-inside * { box-sizing: border-box; } #wh-books-inside [hidden] { display: none !important; } #wh-books-inside .whbi { position: relative; width: 100%; min-height: 950px; padding: clamp(115px, 10vw, 165px) 0 clamp(85px, 8vw, 125px); overflow: hidden; background: radial-gradient( ellipse at 90% 15%, rgba(239,136,116,.12), transparent 38% ), radial-gradient( ellipse at 7% 85%, rgba(117,192,182,.12), transparent 39% ), linear-gradient( 145deg, #FAF7F1 0%, #F6F0E9 53%, #FFFBF5 100% ); font-family: "Inter", sans-serif; } /* ========================================================= 02 — AMBIENT BACKGROUND ========================================================= */ #wh-books-inside .whbi__ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-books-inside .whbi__glow { position: absolute; display: block; border-radius: 50%; filter: blur(90px); } #wh-books-inside .whbi__glow--one { width: 680px; height: 680px; top: -220px; right: -240px; background: rgba(239,136,116,.14); } #wh-books-inside .whbi__glow--two { width: 580px; height: 580px; bottom: -210px; left: -180px; background: rgba(117,192,182,.14); } #wh-books-inside .whbi__shape { position: absolute; display: block; opacity: .6; } #wh-books-inside .whbi__shape--one { width: 175px; height: 175px; top: 210px; right: 5%; border: 1px solid rgba(239,136,116,.25); border-radius: 50%; } #wh-books-inside .whbi__shape--two { width: 90px; height: 90px; bottom: 195px; left: -35px; border: 1px solid rgba(117,192,182,.38); border-radius: 25px; transform: rotate(30deg); } #wh-books-inside .whbi__texture { position: absolute; inset: 0; opacity: .12; background-image: radial-gradient( rgba(46,43,47,.25) .55px, transparent .55px ); background-size: 9px 9px; mask-image: linear-gradient( to bottom, transparent, black 19%, black 82%, transparent ); } /* ========================================================= 03 — EDITORIAL INTRO ========================================================= */ #wh-books-inside .whbi__intro { position: relative; z-index: 2; width: min(calc(100% - 112px), 1510px); margin: 0 auto 95px; } #wh-books-inside .whbi__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 31px; color: var(--whbi-coral-deep); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .18em; line-height: 1.5; } #wh-books-inside .whbi__eyebrow-symbol { color: var(--whbi-coral); font-size: 24px; line-height: 1; } #wh-books-inside .whbi__eyebrow-line { width: 36px; height: 1px; background: rgba(212,108,92,.45); } #wh-books-inside .whbi__title { max-width: 1150px; margin: 0; padding: 0; color: var(--whbi-ink); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(78px, 8.3vw, 137px); font-weight: 800; line-height: .98; letter-spacing: -.078em; } #wh-books-inside .whbi__title > span { display: block; } #wh-books-inside .whbi__title em { color: var(--whbi-coral-deep); font-style: normal; } #wh-books-inside .whbi__intro-copy { max-width: 670px; margin: 29px 0 0; color: var(--whbi-muted); font-family: "Inter", sans-serif; font-size: clamp(15px, 1.2vw, 19px); font-weight: 400; line-height: 1.85; } /* ========================================================= 04 — EDITORIAL EXPERIENCE GRID ========================================================= */ #wh-books-inside .whbi__experience { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(45px, 5.2vw, 90px); width: min(calc(100% - 112px), 1510px); margin: 0 auto; } /* ========================================================= 05 — LEFT STORY PANEL ========================================================= */ #wh-books-inside .whbi__story { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 30px 0; } #wh-books-inside .whbi__story-index { display: block; margin-bottom: 28px; color: var(--whbi-coral-deep); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; line-height: 1.5; letter-spacing: .16em; } #wh-books-inside .whbi__story-title { margin: 0; padding: 0; max-width: 570px; color: var(--whbi-ink); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(47px, 4.5vw, 76px); font-weight: 800; line-height: 1.07; letter-spacing: -.071em; } #wh-books-inside .whbi__story-title em { display: block; color: var(--whbi-coral-deep); font-style: normal; } #wh-books-inside .whbi__story-copy { max-width: 460px; margin: 28px 0 0; color: var(--whbi-muted); font-family: "Inter", sans-serif; font-size: clamp(15px, 1.15vw, 17px); font-weight: 400; line-height: 1.85; } #wh-books-inside .whbi__story-footer { display: flex; align-items: center; gap: 18px; margin-top: 49px; color: var(--whbi-ink); font-family: "Inter", sans-serif; font-size: 9px; font-weight: 800; line-height: 1.5; letter-spacing: .15em; } #wh-books-inside .whbi__story-line { flex: 0 0 48px; width: 48px; height: 1px; background: var(--whbi-coral-deep); } /* ========================================================= 06 — BOOK VIEWER ========================================================= */ #wh-books-inside .whbi__viewer { position: relative; width: 100%; min-width: 0; padding: clamp(25px, 2.7vw, 43px); border: 1px solid rgba(34,35,43,.10); border-radius: 30px; background: radial-gradient( ellipse at 50% 30%, rgba(255,255,255,.83), transparent 75% ), linear-gradient( 150deg, #EBDFD2, #E5D8CA 50%, #EBDDD2 ); box-shadow: 0 30px 78px rgba(69,52,46,.10), inset 0 1px 0 rgba(255,255,255,.7); } /* ========================================================= 07 — VIEWER TOP BAR ========================================================= */ #wh-books-inside .whbi__viewer-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 31px; } #wh-books-inside .whbi__viewer-label { color: #625C5B; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .17em; line-height: 1.4; } #wh-books-inside .whbi__viewer-counter { color: var(--whbi-ink); font-family: "Inter", sans-serif; font-size: 12px; font-weight: 800; line-height: 1.4; letter-spacing: .08em; } #wh-books-inside .whbi__counter-divider { padding: 0 7px; color: #999087; } /* ========================================================= 08 — OPEN BOOK STAGE ========================================================= */ #wh-books-inside .whbi__book-stage { position: relative; display: grid; place-items: center; width: 100%; padding: 25px 8px 40px; isolation: isolate; perspective: 1300px; } /* ========================================================= 09 — BOOK SHADOW ========================================================= */ #wh-books-inside .whbi__book-shadow { position: absolute; z-index: 0; width: 83%; height: 35px; bottom: 18px; left: 8.5%; border-radius: 50%; background: rgba(64,43,36,.29); filter: blur(23px); transform: translateY(5px); } /* ========================================================= 10 — OPEN BOOK ========================================================= */ #wh-books-inside .whbi__book { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; width: 100%; aspect-ratio: 1.46 / 1; overflow: hidden; border: 1px solid rgba(84,61,47,.19); border-radius: 7px 13px 13px 7px; background: var(--whbi-cream); transform: rotateX(3deg) rotateY(-2deg); box-shadow: 0 8px 0 -4px #D5C7B7, 0 13px 0 -7px #C9B8A6, 0 22px 38px rgba(56,39,33,.17), 0 37px 55px rgba(56,39,33,.11); transition: opacity .35s ease, transform .65s cubic-bezier(.22,1,.36,1); } /* ========================================================= 11 — LEFT & RIGHT PAGES ========================================================= */ #wh-books-inside .whbi__page { position: relative; display: grid; place-items: center; width: 100%; min-width: 0; height: 100%; overflow: hidden; background: #FFFCF7; } #wh-books-inside .whbi__page--left { box-shadow: inset -17px 0 24px -17px rgba(49,37,29,.22), inset 3px 0 5px rgba(255,255,255,.7); } #wh-books-inside .whbi__page--right { box-shadow: inset 17px 0 24px -17px rgba(49,37,29,.22), inset -3px 0 5px rgba(255,255,255,.7); } /* ========================================================= 12 — REAL INTERIOR IMAGES ========================================================= */ #wh-books-inside .whbi__page-image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; background: #FFFFFF; } /* ========================================================= 13 — PAGE PLACEHOLDERS ========================================================= */ #wh-books-inside .whbi__page-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: #C2B1A1; background: radial-gradient( circle at 50% 45%, rgba(232,189,129,.09), transparent 65% ), #FFFCF7; } #wh-books-inside .whbi__page-placeholder svg { width: clamp(60px, 6vw, 100px); height: auto; opacity: .72; } /* ========================================================= 14 — CENTER BOOK SPINE ========================================================= */ #wh-books-inside .whbi__book-spine { position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 18px; transform: translateX(-50%); pointer-events: none; background: linear-gradient( 90deg, rgba(76,54,40,.17) 0%, rgba(76,54,40,.06) 26%, rgba(255,255,255,.12) 49%, rgba(76,54,40,.08) 73%, rgba(76,54,40,.18) 100% ); } /* ========================================================= 15 — PREVIEW INFORMATION ========================================================= */ #wh-books-inside .whbi__preview-info { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding-top: 25px; border-top: 1px solid rgba(91,73,64,.19); } #wh-books-inside .whbi__preview-details { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; } #wh-books-inside .whbi__preview-eyebrow { color: var(--whbi-coral-deep); font-family: "Inter", sans-serif; font-size: 9px; font-weight: 800; line-height: 1.4; letter-spacing: .16em; } #wh-books-inside .whbi__preview-name { margin: 0; color: var(--whbi-ink); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(16px, 1.45vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; } /* ========================================================= 16 — FUNCTIONAL NAVIGATION BUTTONS ========================================================= */ #wh-books-inside .whbi__controls { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } #wh-books-inside .whbi__control { appearance: none; -webkit-appearance: none; display: grid; place-items: center; flex: 0 0 49px; width: 49px; height: 49px; min-width: 49px; margin: 0; padding: 0; border: 1px solid rgba(34,35,43,.19); border-radius: 50%; background: var(--whbi-cream); color: var(--whbi-ink); cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, opacity .3s ease; } #wh-books-inside .whbi__control svg { display: block; width: 20px; height: 20px; } #wh-books-inside .whbi__control--next:not(:disabled) { background: var(--whbi-ink); color: #FFFFFF; border-color: var(--whbi-ink); } #wh-books-inside .whbi__control:disabled { opacity: .33; cursor: not-allowed; box-shadow: none; } @media (hover: hover) and (pointer: fine) { #wh-books-inside .whbi__control:not(:disabled):hover { transform: translateY(-3px); border-color: var(--whbi-coral-deep); background: var(--whbi-coral-deep); color: #FFFFFF; } } #wh-books-inside .whbi__control:focus-visible { outline: 3px solid var(--whbi-teal); outline-offset: 4px; } /* ========================================================= 17 — EMPTY PREVIEW MESSAGE ========================================================= */ #wh-books-inside .whbi__empty-note { margin: 20px 0 0; color: #847B74; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 500; line-height: 1.6; text-align: center; } /* ========================================================= 18 — PAGE TRANSITION SUPPORT ========================================================= */ #wh-books-inside .whbi__book-stage.is-transitioning .whbi__book { opacity: .35; transform: rotateX(5deg) rotateY(-5deg) translateY(8px) scale(.985); } /* ========================================================= 19 — EDITORIAL FINALE ========================================================= */ #wh-books-inside .whbi__finale { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; width: min(calc(100% - 112px), 1510px); margin: 110px auto 0; padding: 90px 30px 0; border-top: 1px solid var(--whbi-line); text-align: center; } #wh-books-inside .whbi__finale-symbol { color: var(--whbi-coral); font-size: 41px; line-height: 1; } #wh-books-inside .whbi__finale p { max-width: 1000px; margin: 0; color: var(--whbi-muted); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(39px, 4.7vw, 72px); font-weight: 600; line-height: 1.17; letter-spacing: -.063em; text-wrap: balance; } #wh-books-inside .whbi__finale strong { display: block; color: var(--whbi-ink); font-weight: 800; } #wh-books-inside .whbi__finale-line { display: block; width: 80px; height: 2px; margin-top: 10px; background: var(--whbi-coral); border-radius: 10px; } /* ========================================================= 20 — COMPACT DESKTOP 1025px — 1360px ========================================================= */ @media (min-width: 1025px) and (max-width: 1360px) { #wh-books-inside .whbi__intro, #wh-books-inside .whbi__experience, #wh-books-inside .whbi__finale { width: calc(100% - 88px); } #wh-books-inside .whbi__title { font-size: clamp(75px, 7.8vw, 110px); } #wh-books-inside .whbi__experience { grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr); gap: 40px; } #wh-books-inside .whbi__story-title { font-size: clamp(47px, 4.5vw, 61px); } #wh-books-inside .whbi__story-copy { font-size: 15px; } #wh-books-inside .whbi__viewer { padding: 26px; } #wh-books-inside .whbi__book-stage { padding: 18px 6px 31px; } } /* ========================================================= 21 — TOUCH INTERACTION ========================================================= */ @media (hover: none) and (pointer: coarse) { #wh-books-inside .whbi__control:not(:disabled):active { transform: scale(.95); } } /* ========================================================= 22 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #wh-books-inside *, #wh-books-inside *::before, #wh-books-inside *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 05 DESKTOP CSS V1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 05 — A LITTLE PEEK INSIDE TABLET + MOBILE CSS · V1.0 TABLET: 768px — 1024px MOBILE: 0px — 767px APPEND AFTER DESKTOP CSS V1.0 PRESERVE: - Desktop CSS - HTML V1.0 - Interior Preview Engine JS V1.0 ========================================================= */ /* ========================================================= 01 — RESPONSIVE FOUNDATION ========================================================= */ @media screen and (max-width: 1024px) { #wh-books-inside .whbi { width: 100%; min-height: 0; overflow: hidden; } #wh-books-inside .whbi__intro, #wh-books-inside .whbi__experience, #wh-books-inside .whbi__finale { min-width: 0; max-width: 100%; } #wh-books-inside .whbi__experience { display: flex; flex-direction: column; align-items: stretch; } #wh-books-inside .whbi__story, #wh-books-inside .whbi__viewer { width: 100%; min-width: 0; } #wh-books-inside .whbi__book-stage { width: 100%; min-width: 0; } #wh-books-inside .whbi__book { width: 100%; min-width: 0; } #wh-books-inside .whbi__glow--one { width: 450px; height: 450px; right: -200px; filter: blur(70px); } #wh-books-inside .whbi__glow--two { width: 420px; height: 420px; left: -200px; filter: blur(70px); } } /* ========================================================= 02 — TABLET 768px — 1024px ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1024px) { /* SECTION */ #wh-books-inside .whbi { padding: 105px 0 85px; } /* INTRO */ #wh-books-inside .whbi__intro { width: calc(100% - 80px); max-width: 940px; margin: 0 auto 65px; } #wh-books-inside .whbi__eyebrow { gap: 10px; margin-bottom: 25px; font-size: 9px; } #wh-books-inside .whbi__eyebrow-symbol { font-size: 21px; } #wh-books-inside .whbi__title { max-width: 100%; font-size: clamp(65px, 8.5vw, 96px); line-height: .99; } #wh-books-inside .whbi__intro-copy { max-width: 625px; margin-top: 24px; font-size: 16px; line-height: 1.75; } /* EXPERIENCE */ #wh-books-inside .whbi__experience { width: calc(100% - 80px); max-width: 940px; gap: 43px; margin: 0 auto; } /* STORY */ #wh-books-inside .whbi__story { padding: 0; } #wh-books-inside .whbi__story-index { margin-bottom: 19px; font-size: 9px; } #wh-books-inside .whbi__story-title { max-width: 720px; font-size: clamp(48px, 6vw, 67px); } #wh-books-inside .whbi__story-copy { max-width: 650px; margin-top: 20px; font-size: 15px; line-height: 1.75; } #wh-books-inside .whbi__story-footer { margin-top: 28px; font-size: 9px; } /* VIEWER */ #wh-books-inside .whbi__viewer { max-width: 850px; margin: 0 auto; padding: 34px; border-radius: 26px; } #wh-books-inside .whbi__viewer-top { margin-bottom: 24px; } #wh-books-inside .whbi__viewer-label { font-size: 10px; } #wh-books-inside .whbi__book-stage { padding: 18px 8px 35px; } #wh-books-inside .whbi__book { aspect-ratio: 1.46 / 1; } #wh-books-inside .whbi__book-spine { width: 16px; } /* PREVIEW DETAILS */ #wh-books-inside .whbi__preview-info { padding-top: 22px; margin-top: 13px; } #wh-books-inside .whbi__preview-name { font-size: 20px; } #wh-books-inside .whbi__control { flex-basis: 46px; width: 46px; height: 46px; min-width: 46px; } /* FINALE */ #wh-books-inside .whbi__finale { width: calc(100% - 80px); max-width: 940px; margin: 80px auto 0; padding: 75px 22px 0; gap: 24px; } #wh-books-inside .whbi__finale p { font-size: clamp(43px, 5.7vw, 66px); } } /* ========================================================= 03 — MOBILE 0px — 767px ========================================================= */ @media screen and (max-width: 767px) { /* SECTION */ #wh-books-inside .whbi { padding: 78px 0 65px; } /* AMBIENT */ #wh-books-inside .whbi__shape--one { width: 105px; height: 105px; top: 155px; right: -45px; } #wh-books-inside .whbi__shape--two { width: 63px; height: 63px; bottom: 100px; left: -32px; } /* INTRO */ #wh-books-inside .whbi__intro { width: calc(100% - 40px); max-width: 520px; margin: 0 auto 50px; } #wh-books-inside .whbi__eyebrow { gap: 8px; margin-bottom: 21px; font-size: 8px; letter-spacing: .12em; } #wh-books-inside .whbi__eyebrow-symbol { font-size: 19px; } #wh-books-inside .whbi__eyebrow-line { width: 21px; } #wh-books-inside .whbi__title { max-width: 100%; font-size: clamp(44px, 10.6vw, 72px); line-height: 1.01; letter-spacing: -.07em; } #wh-books-inside .whbi__intro-copy { max-width: 440px; margin-top: 21px; font-size: 14px; line-height: 1.72; } /* EXPERIENCE */ #wh-books-inside .whbi__experience { width: calc(100% - 40px); max-width: 520px; gap: 33px; margin: 0 auto; } /* STORY */ #wh-books-inside .whbi__story { padding: 0; } #wh-books-inside .whbi__story-index { margin-bottom: 16px; font-size: 9px; letter-spacing: .12em; } #wh-books-inside .whbi__story-title { max-width: 100%; font-size: clamp(39px, 10vw, 58px); line-height: 1.08; letter-spacing: -.068em; } #wh-books-inside .whbi__story-copy { max-width: 440px; margin-top: 20px; font-size: 14px; line-height: 1.72; } #wh-books-inside .whbi__story-footer { gap: 12px; margin-top: 24px; font-size: 8px; letter-spacing: .1em; } #wh-books-inside .whbi__story-line { flex-basis: 30px; width: 30px; } /* VIEWER */ #wh-books-inside .whbi__viewer { width: 100%; max-width: 100%; padding: 19px 15px 23px; border-radius: 21px; } #wh-books-inside .whbi__viewer-top { gap: 12px; margin-bottom: 17px; } #wh-books-inside .whbi__viewer-label { font-size: 9px; letter-spacing: .11em; } #wh-books-inside .whbi__viewer-counter { font-size: 11px; } /* OPEN BOOK */ #wh-books-inside .whbi__book-stage { padding: 12px 2px 27px; perspective: 900px; } #wh-books-inside .whbi__book { width: 100%; aspect-ratio: 1.46 / 1; border-radius: 5px 9px 9px 5px; transform: rotateX(2deg) rotateY(-1deg); box-shadow: 0 6px 0 -3px #D5C7B7, 0 10px 0 -6px #C9B8A6, 0 14px 25px rgba(56,39,33,.17); } #wh-books-inside .whbi__book-shadow { width: 82%; height: 20px; bottom: 12px; left: 9%; filter: blur(16px); } #wh-books-inside .whbi__book-spine { width: 10px; } #wh-books-inside .whbi__page-placeholder svg { width: clamp(36px, 11vw, 66px); } #wh-books-inside .whbi__page-image { object-fit: contain; } /* PREVIEW INFORMATION */ #wh-books-inside .whbi__preview-info { align-items: center; gap: 10px; margin-top: 12px; padding-top: 17px; } #wh-books-inside .whbi__preview-details { gap: 5px; min-width: 0; flex: 1; } #wh-books-inside .whbi__preview-eyebrow { font-size: 8px; letter-spacing: .11em; } #wh-books-inside .whbi__preview-name { font-size: clamp(14px, 4vw, 18px); line-height: 1.3; overflow-wrap: anywhere; } /* NAVIGATION */ #wh-books-inside .whbi__controls { gap: 7px; flex-shrink: 0; } #wh-books-inside .whbi__control { flex: 0 0 40px; width: 40px; height: 40px; min-width: 40px; } #wh-books-inside .whbi__control svg { width: 17px; height: 17px; } /* EMPTY MESSAGE */ #wh-books-inside .whbi__empty-note { margin-top: 17px; font-size: 11px; line-height: 1.6; } /* FINALE */ #wh-books-inside .whbi__finale { width: calc(100% - 40px); max-width: 520px; margin: 65px auto 0; padding: 58px 0 0; gap: 21px; } #wh-books-inside .whbi__finale-symbol { font-size: 34px; } #wh-books-inside .whbi__finale p { max-width: 100%; font-size: clamp(34px, 9.1vw, 58px); line-height: 1.15; letter-spacing: -.06em; } #wh-books-inside .whbi__finale-line { width: 60px; margin-top: 5px; } } /* ========================================================= 04 — EXTRA SMALL MOBILE 0px — 390px ========================================================= */ @media screen and (max-width: 390px) { #wh-books-inside .whbi { padding: 69px 0 57px; } #wh-books-inside .whbi__intro, #wh-books-inside .whbi__experience, #wh-books-inside .whbi__finale { width: calc(100% - 32px); } #wh-books-inside .whbi__title { font-size: clamp(40px, 10.3vw, 45px); } #wh-books-inside .whbi__story-title { font-size: clamp(36px, 9.8vw, 41px); } #wh-books-inside .whbi__story-copy { font-size: 13px; } #wh-books-inside .whbi__viewer { padding: 16px 12px 20px; border-radius: 18px; } #wh-books-inside .whbi__viewer-label { font-size: 8px; } #wh-books-inside .whbi__book-stage { padding: 9px 1px 23px; } #wh-books-inside .whbi__control { flex-basis: 36px; width: 36px; height: 36px; min-width: 36px; } #wh-books-inside .whbi__control svg { width: 16px; height: 16px; } #wh-books-inside .whbi__preview-name { font-size: 13px; } #wh-books-inside .whbi__finale p { font-size: clamp(30px, 8.8vw, 35px); } } /* ========================================================= 05 — TOUCH DEVICE SUPPORT ========================================================= */ @media (hover: none) and (pointer: coarse) { #wh-books-inside .whbi__control { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 05 TABLET + MOBILE CSS V1.0 ========================================================= *//* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-eacfca5 *//* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 06 — YOUR NEXT CHAPTER DESKTOP CSS · V1.0 CONTAINER ID: #wh-books-next THEME: wh-theme-dark DESKTOP: 1025px+ HTML: YOUR NEXT CHAPTER V1.0 JS: WOW REVEAL V1.0 TABLET / MOBILE WILL FOLLOW SEPARATELY. ========================================================= */ /* ========================================================= 01 — FOUNDATION ========================================================= */ #wh-books-next { --whbn-ink: #171820; --whbn-deep: #101118; --whbn-white: #F9F6F0; --whbn-muted: #B8B3BF; --whbn-gold: #E8BD81; --whbn-coral: #EF8874; --whbn-teal: #75C0B6; --whbn-line: rgba(255,255,255,.14); position: relative; width: 100%; margin: 0; padding: 0; background: var(--whbn-ink); color: var(--whbn-white); isolation: isolate; } #wh-books-next, #wh-books-next * { box-sizing: border-box; } #wh-books-next .whbn { position: relative; width: 100%; min-height: 950px; padding: clamp(115px, 10vw, 165px) 0 clamp(100px, 8vw, 135px); overflow: hidden; background: radial-gradient( ellipse at 85% 13%, rgba(239,136,116,.12), transparent 38% ), radial-gradient( ellipse at 8% 77%, rgba(117,192,182,.10), transparent 42% ), linear-gradient( 150deg, #20212B 0%, #171820 53%, #101118 100% ); font-family: "Inter", sans-serif; } /* ========================================================= 02 — ATMOSPHERIC BACKGROUND ========================================================= */ #wh-books-next .whbn__ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-books-next .whbn__glow { position: absolute; display: block; border-radius: 50%; filter: blur(95px); opacity: .7; } #wh-books-next .whbn__glow--one { width: 680px; height: 680px; top: -230px; right: -210px; background: rgba(239,136,116,.16); } #wh-books-next .whbn__glow--two { width: 620px; height: 620px; bottom: -160px; left: -250px; background: rgba(117,192,182,.14); } #wh-books-next .whbn__orbit { position: absolute; display: block; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; } #wh-books-next .whbn__orbit--one { width: 760px; height: 760px; top: 3%; right: -450px; } #wh-books-next .whbn__orbit--two { width: 590px; height: 590px; bottom: 1%; left: -370px; } #wh-books-next .whbn__texture { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient( rgba(255,255,255,.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.045) 1px, transparent 1px ); background-size: 105px 105px; mask-image: linear-gradient( to bottom, transparent, black 15%, black 85%, transparent ); } /* ========================================================= 03 — EDITORIAL INTRO ========================================================= */ #wh-books-next .whbn__intro { position: relative; z-index: 2; width: min(calc(100% - 112px), 1510px); margin: 0 auto 110px; } #wh-books-next .whbn__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; color: var(--whbn-gold); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .18em; line-height: 1.5; } #wh-books-next .whbn__eyebrow-symbol { color: var(--whbn-coral); font-size: 24px; line-height: 1; } #wh-books-next .whbn__eyebrow-line { width: 38px; height: 1px; background: rgba(232,189,129,.45); } #wh-books-next .whbn__title { max-width: 1250px; margin: 0; padding: 0; color: var(--whbn-white); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(85px, 9vw, 150px); font-weight: 800; line-height: .96; letter-spacing: -.078em; } #wh-books-next .whbn__title > span { display: block; } #wh-books-next .whbn__title em { color: var(--whbn-coral); font-style: normal; } #wh-books-next .whbn__intro-copy { max-width: 650px; margin: 30px 0 0; color: var(--whbn-muted); font-family: "Inter", sans-serif; font-size: clamp(16px, 1.25vw, 19px); font-weight: 400; line-height: 1.8; } /* ========================================================= 04 — JOURNEY CONTAINER ========================================================= */ #wh-books-next .whbn__journey { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(22px, 3vw, 48px); width: min(calc(100% - 112px), 1510px); margin: 0 auto; } /* ========================================================= 05 — CONNECTING TRACK ========================================================= */ #wh-books-next .whbn__journey-track { position: absolute; z-index: 0; top: 32px; left: 7%; right: 7%; height: 2px; pointer-events: none; } #wh-books-next .whbn__journey-track-line { display: block; width: 100%; height: 100%; background: linear-gradient( 90deg, var(--whbn-gold) 0%, var(--whbn-coral) 50%, var(--whbn-teal) 100% ); opacity: .46; } /* ========================================================= 06 — JOURNEY STEP FOUNDATION ========================================================= */ #wh-books-next .whbn__step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 0; } /* ========================================================= 07 — STEP TOP ========================================================= */ #wh-books-next .whbn__step-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 65px; margin-bottom: 30px; } #wh-books-next .whbn__step-number { color: var(--whbn-white); font-family: "Inter", sans-serif; font-size: 16px; font-weight: 800; letter-spacing: .12em; line-height: 1; } #wh-books-next .whbn__step-number span { color: #8F8B99; font-size: 11px; } #wh-books-next .whbn__step-symbol { display: grid; place-items: center; flex: 0 0 63px; width: 63px; height: 63px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: #242631; color: var(--whbn-gold); font-size: 26px; line-height: 1; box-shadow: 0 0 0 8px var(--whbn-ink); } #wh-books-next .whbn__step--explore .whbn__step-symbol { color: var(--whbn-coral); } #wh-books-next .whbn__step--create .whbn__step-symbol { color: var(--whbn-teal); } /* ========================================================= 08 — ART FRAME ========================================================= */ #wh-books-next .whbn__step-art { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / .91; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; background: radial-gradient( circle at 50% 45%, rgba(255,255,255,.07), transparent 67% ), #272833; box-shadow: 0 30px 75px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.045); } /* ========================================================= 09 — ART GLYPHS ========================================================= */ #wh-books-next .whbn__art-glyph { position: relative; z-index: 3; display: grid; place-items: center; color: var(--whbn-white); font-size: clamp(85px, 8vw, 135px); line-height: 1; text-shadow: 0 14px 36px rgba(0,0,0,.16); animation: whbnGlyphFloat 7s ease-in-out infinite; } #wh-books-next .whbn__art-spark { position: absolute; z-index: 4; top: 20%; right: 20%; font-size: 38px; line-height: 1; color: var(--whbn-white); animation: whbnSparkFloat 6.5s ease-in-out infinite; } /* ========================================================= 10 — ART 01: FIND YOUR BOOK ========================================================= */ #wh-books-next .whbn__step--discover .whbn__step-art { background: radial-gradient( circle at 50% 46%, rgba(232,189,129,.20), transparent 62% ), linear-gradient( 145deg, #38313A, #252934 70%, #27333A ); } #wh-books-next .whbn__step--discover .whbn__art-glyph { color: #FFE1AD; } #wh-books-next .whbn__art-orbit { position: absolute; display: block; width: 65%; aspect-ratio: 1 / 1; border: 1px solid rgba(232,189,129,.43); border-radius: 50%; animation: whbnOrbitSpin 30s linear infinite; } #wh-books-next .whbn__art-orbit--two { width: 86%; border-color: rgba(232,189,129,.19); animation-direction: reverse; animation-duration: 45s; } /* ========================================================= 11 — ART 02: GET TO KNOW IT ========================================================= */ #wh-books-next .whbn__step--explore .whbn__step-art { background: radial-gradient( circle at 48% 43%, rgba(239,136,116,.23), transparent 64% ), linear-gradient( 145deg, #44303C, #302B39 65%, #3A313C ); } #wh-books-next .whbn__step--explore .whbn__art-glyph { color: #FFB19F; } #wh-books-next .whbn__art-sheet { position: absolute; display: block; width: 41%; height: 55%; border: 1px solid rgba(255,255,255,.22); border-radius: 12px; background: rgba(255,255,255,.055); } #wh-books-next .whbn__art-sheet--back { transform: translate(-13%, -2%) rotate(-17deg); } #wh-books-next .whbn__art-sheet--front { transform: translate(13%, 3%) rotate(13deg); border-color: rgba(239,136,116,.42); } /* ========================================================= 12 — ART 03: MAKE IT YOURS ========================================================= */ #wh-books-next .whbn__step--create .whbn__step-art { background: radial-gradient( circle at 50% 45%, rgba(117,192,182,.23), transparent 64% ), linear-gradient( 145deg, #263D41, #282D39 65%, #303C40 ); } #wh-books-next .whbn__step--create .whbn__art-glyph { color: #A9E5DA; font-size: clamp(80px, 7.5vw, 125px); } #wh-books-next .whbn__art-circle { position: absolute; width: 46%; aspect-ratio: 1 / 1; border: 1px solid rgba(117,192,182,.43); border-radius: 50%; } #wh-books-next .whbn__art-circle--one { transform: translateX(-30%); animation: whbnMeetLeft 8s ease-in-out infinite; } #wh-books-next .whbn__art-circle--two { transform: translateX(30%); border-color: rgba(232,189,129,.33); animation: whbnMeetRight 8s ease-in-out infinite; } /* ========================================================= 13 — STEP COPY ========================================================= */ #wh-books-next .whbn__step-content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 35px 3px 0; } #wh-books-next .whbn__step-eyebrow { display: block; margin-bottom: 19px; color: var(--whbn-gold); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .16em; line-height: 1.5; } #wh-books-next .whbn__step--explore .whbn__step-eyebrow { color: var(--whbn-coral); } #wh-books-next .whbn__step--create .whbn__step-eyebrow { color: var(--whbn-teal); } #wh-books-next .whbn__step-title { margin: 0; padding: 0; color: var(--whbn-white); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(39px, 3.5vw, 62px); font-weight: 800; line-height: 1.05; letter-spacing: -.065em; } #wh-books-next .whbn__step-title span { display: block; } #wh-books-next .whbn__step-copy { max-width: 430px; margin: 21px 0 0; color: var(--whbn-muted); font-family: "Inter", sans-serif; font-size: clamp(14px, 1.15vw, 17px); font-weight: 400; line-height: 1.8; } /* ========================================================= 14 — FINALE ========================================================= */ #wh-books-next .whbn__finale { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 45px; width: min(calc(100% - 112px), 1510px); margin: 115px auto 0; padding: 70px 0 0; border-top: 1px solid var(--whbn-line); } #wh-books-next .whbn__finale-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; } #wh-books-next .whbn__finale-eyebrow { color: var(--whbn-gold); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .17em; line-height: 1.5; } #wh-books-next .whbn__finale-title { max-width: 890px; margin: 0; color: var(--whbn-muted); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(36px, 4.3vw, 68px); font-weight: 600; line-height: 1.15; letter-spacing: -.06em; } #wh-books-next .whbn__finale-title strong { display: block; color: var(--whbn-white); font-weight: 800; } /* ========================================================= 15 — REAL CTA BUTTON ========================================================= */ #wh-books-next .whbn__cta { display: inline-flex; align-items: center; justify-content: center; gap: 25px; flex-shrink: 0; min-height: 61px; padding: 18px 25px; border: 1px solid var(--whbn-coral); border-radius: 100px; background: var(--whbn-coral); color: #171820; font-family: "Inter", sans-serif; font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: .095em; text-decoration: none; box-shadow: 0 16px 40px rgba(239,136,116,.13); transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease; } #wh-books-next .whbn__cta svg { display: block; width: 21px; height: 21px; flex-shrink: 0; transition: transform .3s ease; } @media (hover: hover) and (pointer: fine) { #wh-books-next .whbn__cta:hover { transform: translateY(-4px); background: var(--whbn-white); border-color: var(--whbn-white); color: var(--whbn-ink); box-shadow: 0 20px 50px rgba(0,0,0,.25); } #wh-books-next .whbn__cta:hover svg { transform: translateX(5px); } } #wh-books-next .whbn__cta:focus-visible { outline: 3px solid var(--whbn-teal); outline-offset: 5px; } /* ========================================================= 16 — ANIMATION KEYFRAMES ========================================================= */ @keyframes whbnGlyphFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } } @keyframes whbnSparkFloat { 0%, 100% { transform: translateY(0) rotate(0); opacity: .65; } 50% { transform: translateY(-12px) rotate(15deg); opacity: 1; } } @keyframes whbnOrbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes whbnMeetLeft { 0%, 100% { transform: translateX(-30%); } 50% { transform: translateX(-18%); } } @keyframes whbnMeetRight { 0%, 100% { transform: translateX(30%); } 50% { transform: translateX(18%); } } /* ========================================================= 17 — COMPACT DESKTOP 1025px — 1360px ========================================================= */ @media screen and (min-width: 1025px) and (max-width: 1360px) { #wh-books-next .whbn__intro, #wh-books-next .whbn__journey, #wh-books-next .whbn__finale { width: calc(100% - 88px); } #wh-books-next .whbn__title { font-size: clamp(78px, 8.2vw, 115px); } #wh-books-next .whbn__journey { gap: 24px; } #wh-books-next .whbn__step-art { border-radius: 25px; } #wh-books-next .whbn__step-content { padding-top: 29px; } #wh-books-next .whbn__step-title { font-size: clamp(37px, 3.65vw, 51px); } #wh-books-next .whbn__step-copy { font-size: 14px; } #wh-books-next .whbn__finale { gap: 30px; } #wh-books-next .whbn__finale-title { font-size: clamp(36px, 4vw, 55px); } #wh-books-next .whbn__cta { gap: 15px; padding: 17px 21px; font-size: 10px; } } /* ========================================================= 18 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #wh-books-next *, #wh-books-next *::before, #wh-books-next *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 06 DESKTOP CSS V1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 06 — YOUR NEXT CHAPTER TABLET + MOBILE CSS · V1.0 SECTION ID: #wh-books-next TABLET: 768px — 1024px MOBILE: 0px — 767px APPEND AFTER DESKTOP CSS V1.0 KEEP UNCHANGED: - Desktop CSS - HTML V1.0 - WOW Reveal JS V1.0 ========================================================= */ /* ========================================================= 01 — RESPONSIVE FOUNDATION ========================================================= */ @media screen and (max-width: 1024px) { #wh-books-next .whbn { width: 100%; min-height: 0; overflow: hidden; } #wh-books-next .whbn__intro, #wh-books-next .whbn__journey, #wh-books-next .whbn__finale { max-width: 100%; min-width: 0; } #wh-books-next .whbn__title, #wh-books-next .whbn__step-title, #wh-books-next .whbn__finale-title { overflow-wrap: break-word; } #wh-books-next .whbn__step, #wh-books-next .whbn__step-content { min-width: 0; } #wh-books-next .whbn__glow--one { width: 450px; height: 450px; right: -210px; filter: blur(70px); } #wh-books-next .whbn__glow--two { width: 430px; height: 430px; left: -210px; filter: blur(70px); } #wh-books-next .whbn__orbit--one { width: 490px; height: 490px; right: -290px; } #wh-books-next .whbn__orbit--two { width: 430px; height: 430px; left: -260px; } } /* ========================================================= 02 — TABLET 768px — 1024px Vertical editorial journey: Number + visual + narrative copy ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1024px) { /* SECTION */ #wh-books-next .whbn { padding: 105px 0 90px; } /* INTRO */ #wh-books-next .whbn__intro { width: calc(100% - 80px); max-width: 940px; margin: 0 auto 75px; } #wh-books-next .whbn__eyebrow { gap: 10px; margin-bottom: 27px; font-size: 9px; } #wh-books-next .whbn__eyebrow-symbol { font-size: 21px; } #wh-books-next .whbn__title { max-width: 100%; font-size: clamp(70px, 8.5vw, 105px); line-height: .98; } #wh-books-next .whbn__intro-copy { margin-top: 25px; font-size: 16px; line-height: 1.75; } /* JOURNEY */ #wh-books-next .whbn__journey { display: flex; flex-direction: column; gap: 65px; width: calc(100% - 80px); max-width: 940px; margin: 0 auto; } /* VERTICAL CONNECTION */ #wh-books-next .whbn__journey-track { top: 20px; bottom: 20px; left: 30px; right: auto; width: 2px; height: auto; } #wh-books-next .whbn__journey-track-line { width: 2px; height: 100%; background: linear-gradient( to bottom, var(--whbn-gold), var(--whbn-coral), var(--whbn-teal) ); opacity: .38; } /* STEP */ #wh-books-next .whbn__step { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); grid-template-rows: auto 1fr; column-gap: 37px; row-gap: 18px; align-items: center; padding-left: 85px; } #wh-books-next .whbn__step-top { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; min-height: 62px; margin: 0; gap: 22px; } #wh-books-next .whbn__step-number { font-size: 13px; } #wh-books-next .whbn__step-symbol { position: absolute; top: 0; left: 0; width: 62px; height: 62px; flex-basis: 62px; font-size: 25px; box-shadow: 0 0 0 7px #171820; } /* VISUAL */ #wh-books-next .whbn__step-art { grid-column: 1; grid-row: 2; width: 100%; aspect-ratio: 1 / 1; border-radius: 25px; } #wh-books-next .whbn__art-glyph { font-size: 85px; } #wh-books-next .whbn__step--create .whbn__art-glyph { font-size: 78px; } /* COPY */ #wh-books-next .whbn__step-content { grid-column: 2; grid-row: 2; padding: 0; } #wh-books-next .whbn__step-eyebrow { margin-bottom: 14px; font-size: 9px; } #wh-books-next .whbn__step-title { font-size: clamp(43px, 5vw, 64px); line-height: 1.05; } #wh-books-next .whbn__step-copy { margin-top: 17px; font-size: 14px; line-height: 1.75; } /* FINALE */ #wh-books-next .whbn__finale { width: calc(100% - 80px); max-width: 940px; margin: 95px auto 0; padding-top: 65px; align-items: flex-start; flex-direction: column; gap: 36px; } #wh-books-next .whbn__finale-title { font-size: clamp(45px, 5.8vw, 66px); } #wh-books-next .whbn__cta { min-height: 58px; padding: 17px 25px; } } /* ========================================================= 03 — MOBILE 0px — 767px One continuous vertical reading journey. ========================================================= */ @media screen and (max-width: 767px) { /* SECTION */ #wh-books-next .whbn { padding: 80px 0 68px; } /* BACKGROUND */ #wh-books-next .whbn__texture { background-size: 65px 65px; opacity: .11; } #wh-books-next .whbn__orbit--one { width: 310px; height: 310px; right: -210px; } #wh-books-next .whbn__orbit--two { width: 280px; height: 280px; left: -190px; } /* INTRO */ #wh-books-next .whbn__intro { width: calc(100% - 40px); max-width: 520px; margin: 0 auto 59px; } #wh-books-next .whbn__eyebrow { gap: 8px; margin-bottom: 23px; font-size: 8px; letter-spacing: .12em; } #wh-books-next .whbn__eyebrow-symbol { font-size: 19px; } #wh-books-next .whbn__eyebrow-line { width: 20px; } #wh-books-next .whbn__title { max-width: 100%; font-size: clamp(48px, 11.2vw, 77px); line-height: .99; letter-spacing: -.071em; } #wh-books-next .whbn__intro-copy { max-width: 420px; margin-top: 22px; font-size: 14px; line-height: 1.7; } /* JOURNEY */ #wh-books-next .whbn__journey { display: flex; flex-direction: column; gap: 53px; width: calc(100% - 40px); max-width: 520px; margin: 0 auto; } /* VERTICAL CONNECTION LINE */ #wh-books-next .whbn__journey-track { top: 22px; bottom: 20px; left: 23px; right: auto; width: 2px; height: auto; } #wh-books-next .whbn__journey-track-line { width: 2px; height: 100%; background: linear-gradient( to bottom, var(--whbn-gold), var(--whbn-coral), var(--whbn-teal) ); opacity: .35; } /* EACH STEP */ #wh-books-next .whbn__step { display: flex; flex-direction: column; align-items: stretch; padding-left: 0; } /* STEP HEADER */ #wh-books-next .whbn__step-top { display: flex; align-items: center; justify-content: flex-start; gap: 20px; min-height: 48px; margin-bottom: 24px; padding-left: 64px; } #wh-books-next .whbn__step-number { font-size: 13px; } #wh-books-next .whbn__step-number span { font-size: 10px; } #wh-books-next .whbn__step-symbol { position: absolute; top: 0; left: 0; flex-basis: 48px; width: 48px; height: 48px; font-size: 22px; box-shadow: 0 0 0 6px #171820; } /* VISUAL */ #wh-books-next .whbn__step-art { width: 100%; max-width: 100%; aspect-ratio: 1 / .84; border-radius: 23px; } #wh-books-next .whbn__art-glyph { font-size: clamp(90px, 26vw, 130px); } #wh-books-next .whbn__step--create .whbn__art-glyph { font-size: clamp(80px, 23vw, 115px); } #wh-books-next .whbn__art-spark { font-size: 30px; } /* CONTENT */ #wh-books-next .whbn__step-content { padding: 29px 3px 0; } #wh-books-next .whbn__step-eyebrow { margin-bottom: 13px; font-size: 9px; letter-spacing: .14em; } #wh-books-next .whbn__step-title { font-size: clamp(46px, 12vw, 72px); line-height: 1.03; letter-spacing: -.07em; } #wh-books-next .whbn__step-copy { max-width: 440px; margin-top: 17px; font-size: 14px; line-height: 1.75; } /* FINALE */ #wh-books-next .whbn__finale { width: calc(100% - 40px); max-width: 520px; display: flex; flex-direction: column; align-items: stretch; gap: 30px; margin: 75px auto 0; padding-top: 55px; } #wh-books-next .whbn__finale-copy { gap: 16px; } #wh-books-next .whbn__finale-eyebrow { font-size: 9px; letter-spacing: .13em; } #wh-books-next .whbn__finale-title { font-size: clamp(38px, 10.2vw, 60px); line-height: 1.13; } /* FUNCTIONAL CTA */ #wh-books-next .whbn__cta { display: flex; justify-content: space-between; width: 100%; max-width: 100%; min-height: 58px; padding: 17px 23px; gap: 15px; font-size: 10px; letter-spacing: .08em; } #wh-books-next .whbn__cta svg { width: 20px; height: 20px; } } /* ========================================================= 04 — EXTRA SMALL MOBILE 0px — 390px ========================================================= */ @media screen and (max-width: 390px) { #wh-books-next .whbn { padding: 70px 0 60px; } #wh-books-next .whbn__intro, #wh-books-next .whbn__journey, #wh-books-next .whbn__finale { width: calc(100% - 32px); } #wh-books-next .whbn__title { font-size: clamp(44px, 10.8vw, 51px); } #wh-books-next .whbn__step-art { border-radius: 19px; } #wh-books-next .whbn__step-title { font-size: clamp(43px, 11.4vw, 49px); } #wh-books-next .whbn__step-copy { font-size: 13px; } #wh-books-next .whbn__finale-title { font-size: clamp(35px, 9.5vw, 40px); } #wh-books-next .whbn__cta { padding: 16px 19px; font-size: 9px; } } /* ========================================================= 05 — TOUCH DEVICE SUPPORT ========================================================= */ @media (hover: none) and (pointer: coarse) { #wh-books-next .whbn__cta { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #wh-books-next .whbn__cta:active { transform: scale(.98); } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 06 TABLET + MOBILE CSS V1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 06 — YOUR NEXT CHAPTER TABLET + MOBILE SYMBOL COLOR REFINEMENT · V1.0 PURPOSE: Replace dark outer shadow ring with clear color-coded circles per step. TABLET + MOBILE ONLY ========================================================= */ @media screen and (max-width: 1024px) { /* --------------------------------------------- BASE SYMBOL STYLE ---------------------------------------------- */ #wh-books-next .whbn__step-symbol { border-width: 1px; border-style: solid; box-shadow: none; } /* --------------------------------------------- STEP 01 — FIND YOUR BOOK ---------------------------------------------- */ #wh-books-next .whbn__step--discover .whbn__step-symbol { background: rgba(232,189,129,.18); border-color: rgba(232,189,129,.42); color: #FFE1AD; } /* --------------------------------------------- STEP 02 — GET TO KNOW IT ---------------------------------------------- */ #wh-books-next .whbn__step--explore .whbn__step-symbol { background: rgba(239,136,116,.18); border-color: rgba(239,136,116,.42); color: #FFB19F; } /* --------------------------------------------- STEP 03 — MAKE IT YOURS ---------------------------------------------- */ #wh-books-next .whbn__step--create .whbn__step-symbol { background: rgba(117,192,182,.18); border-color: rgba(117,192,182,.42); color: #A9E5DA; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6232173 *//* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 07 — ONE MORE WORLD AWAITS DESKTOP CSS · V1.0 CONTAINER ID: #wh-books-finale THEME: wh-theme-light DESKTOP: 1025px+ HTML: ONE MORE WORLD AWAITS V1.0 JS: WOW REVEAL V1.0 TABLET + MOBILE: To be added separately. NAVBAR / FOOTER: Not modified. ========================================================= */ /* ========================================================= 01 — FOUNDATION ========================================================= */ #wh-books-finale { --whbf-ink: #22232B; --whbf-paper: #F8F5EF; --whbf-cream: #FFFCF7; --whbf-muted: #746F73; --whbf-coral: #EF8874; --whbf-coral-deep: #D46C5C; --whbf-gold: #E8BD81; --whbf-teal: #75C0B6; --whbf-line: rgba(34,35,43,.13); position: relative; width: 100%; margin: 0; padding: 0; background: var(--whbf-paper); color: var(--whbf-ink); isolation: isolate; } #wh-books-finale, #wh-books-finale * { box-sizing: border-box; } #wh-books-finale .whbf { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 880px; padding: clamp(100px, 9vw, 145px) 0 clamp(105px, 9vw, 150px); overflow: hidden; background: radial-gradient( ellipse at 8% 15%, rgba(232,189,129,.12), transparent 39% ), radial-gradient( ellipse at 88% 85%, rgba(117,192,182,.12), transparent 39% ), linear-gradient( 145deg, #FFFCF7 0%, #F8F5EF 55%, #F4EEE6 100% ); font-family: "Inter", sans-serif; } /* ========================================================= 02 — ATMOSPHERIC BACKGROUND ========================================================= */ #wh-books-finale .whbf__ambient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-books-finale .whbf__glow { position: absolute; display: block; border-radius: 50%; filter: blur(90px); } #wh-books-finale .whbf__glow--one { width: 650px; height: 650px; top: -230px; left: -250px; background: rgba(232,189,129,.18); } #wh-books-finale .whbf__glow--two { width: 690px; height: 690px; bottom: -280px; right: -250px; background: rgba(117,192,182,.15); } #wh-books-finale .whbf__glow--three { width: 460px; height: 460px; top: 35%; right: 15%; background: rgba(239,136,116,.09); } #wh-books-finale .whbf__orbit { position: absolute; display: block; border: 1px solid rgba(212,108,92,.12); border-radius: 50%; } #wh-books-finale .whbf__orbit--one { width: 730px; height: 730px; top: -280px; right: -430px; } #wh-books-finale .whbf__orbit--two { width: 580px; height: 580px; bottom: -290px; left: -330px; border-color: rgba(117,192,182,.17); } #wh-books-finale .whbf__texture { position: absolute; inset: 0; opacity: .13; background-image: radial-gradient( rgba(58,48,45,.22) .6px, transparent .6px ); background-size: 11px 11px; mask-image: linear-gradient( to bottom, transparent, black 15%, black 88%, transparent ); } /* ========================================================= 03 — MAIN EDITORIAL FRAME ========================================================= */ #wh-books-finale .whbf__frame { position: relative; z-index: 2; display: flex; flex-direction: column; width: min(calc(100% - 112px), 1510px); min-height: 690px; margin: 0 auto; padding: clamp(33px, 3.8vw, 60px) clamp(35px, 5vw, 82px) clamp(30px, 3.4vw, 55px); overflow: hidden; border: 1px solid rgba(157,117,93,.14); border-radius: 37px; background: radial-gradient( ellipse at 50% 38%, rgba(255,255,255,.57), transparent 70% ), linear-gradient( 145deg, #F2E8DD 0%, #F0E5D8 53%, #F5EADD 100% ); box-shadow: 0 35px 100px rgba(82,59,46,.085), inset 0 1px 0 rgba(255,255,255,.75); } /* ========================================================= 04 — DECORATIVE ART LAYER ========================================================= */ #wh-books-finale .whbf__decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } #wh-books-finale .whbf__decor-star { position: absolute; display: block; line-height: 1; animation: whbfStarFloat 8s ease-in-out infinite; } #wh-books-finale .whbf__decor-star--one { top: 21%; left: 8%; color: var(--whbf-coral); font-size: 82px; } #wh-books-finale .whbf__decor-star--two { top: 28%; right: 9%; color: var(--whbf-teal); font-size: 105px; animation-delay: -3s; } #wh-books-finale .whbf__decor-star--three { bottom: 23%; left: 16%; color: #D7A961; font-size: 63px; animation-delay: -5s; } /* ========================================================= 05 — DECORATIVE RINGS ========================================================= */ #wh-books-finale .whbf__decor-ring { position: absolute; display: block; border-radius: 50%; animation: whbfRingDrift 13s ease-in-out infinite; } #wh-books-finale .whbf__decor-ring--one { width: 255px; height: 255px; top: -112px; left: -90px; border: 2px solid rgba(239,136,116,.23); } #wh-books-finale .whbf__decor-ring--two { width: 315px; height: 315px; bottom: -175px; right: -110px; border: 2px solid rgba(117,192,182,.25); animation-delay: -6s; } /* ========================================================= 06 — DECORATIVE ART SWISHES ========================================================= */ #wh-books-finale .whbf__decor-swish { position: absolute; display: block; width: 230px; height: 75px; border: 2px solid rgba(212,108,92,.22); border-radius: 50%; transform: rotate(-32deg); } #wh-books-finale .whbf__decor-swish--one { top: 31%; left: -85px; } #wh-books-finale .whbf__decor-swish--two { bottom: 26%; right: -95px; width: 270px; height: 85px; border-color: rgba(117,192,182,.27); transform: rotate(33deg); } /* ========================================================= 07 — TOP EDITORIAL BAR ========================================================= */ #wh-books-finale .whbf__top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; } #wh-books-finale .whbf__eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; color: var(--whbf-coral-deep); font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; line-height: 1.5; letter-spacing: .17em; } #wh-books-finale .whbf__eyebrow-symbol { color: var(--whbf-coral); font-size: 23px; line-height: 1; } #wh-books-finale .whbf__eyebrow-line { width: 37px; height: 1px; background: rgba(212,108,92,.4); } #wh-books-finale .whbf__top-star { color: var(--whbf-coral); font-size: 34px; line-height: 1; } /* ========================================================= 08 — MAIN CONTENT ========================================================= */ #wh-books-finale .whbf__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; width: 100%; padding: clamp(75px, 7vw, 110px) 0 clamp(70px, 6vw, 95px); text-align: center; } /* ========================================================= 09 — PRETITLE ========================================================= */ #wh-books-finale .whbf__pretitle { display: block; margin-bottom: 27px; color: #A47B56; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; line-height: 1.5; letter-spacing: .2em; } /* ========================================================= 10 — MAIN FINALE TITLE ========================================================= */ #wh-books-finale .whbf__title { max-width: 1280px; margin: 0; padding: 0; color: var(--whbf-ink); font-family: "Bricolage Grotesque", sans-serif; font-size: clamp(80px, 8.4vw, 145px); font-weight: 800; line-height: .98; letter-spacing: -.083em; text-wrap: balance; } #wh-books-finale .whbf__title > span { display: block; } #wh-books-finale .whbf__title em { color: var(--whbf-coral-deep); font-style: normal; } /* ========================================================= 11 — DESCRIPTION ========================================================= */ #wh-books-finale .whbf__description { max-width: 600px; margin: 29px 0 0; color: var(--whbf-muted); font-family: "Inter", sans-serif; font-size: clamp(16px, 1.3vw, 19px); font-weight: 400; line-height: 1.8; } /* ========================================================= 12 — ACTIONS ========================================================= */ #wh-books-finale .whbf__actions { display: flex; flex-direction: column; align-items: center; gap: 23px; margin-top: 41px; } /* ========================================================= 13 — PRIMARY FUNCTIONAL CTA ========================================================= */ #wh-books-finale .whbf__cta { display: inline-flex; align-items: center; justify-content: center; gap: 27px; min-height: 65px; padding: 13px 15px 13px 30px; border: 1px solid var(--whbf-coral); border-radius: 100px; background: var(--whbf-coral); color: var(--whbf-ink); font-family: "Inter", sans-serif; font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: .13em; text-decoration: none; box-shadow: 0 17px 42px rgba(212,108,92,.17); transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; } #wh-books-finale .whbf__cta-text { display: inline-block; } #wh-books-finale .whbf__cta-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: rgba(34,35,43,.12); transition: background .3s ease, transform .3s ease; } #wh-books-finale .whbf__cta-icon svg { display: block; width: 20px; height: 20px; } @media (hover: hover) and (pointer: fine) { #wh-books-finale .whbf__cta:hover { transform: translateY(-4px); background: var(--whbf-ink); border-color: var(--whbf-ink); color: #FFFFFF; box-shadow: 0 23px 52px rgba(34,35,43,.18); } #wh-books-finale .whbf__cta:hover .whbf__cta-icon { background: rgba(255,255,255,.15); transform: translate(3px, -3px); } } #wh-books-finale .whbf__cta:focus-visible { outline: 3px solid var(--whbf-teal); outline-offset: 5px; } /* ========================================================= 14 — SECONDARY EDITORIAL LABEL Not a clickable link yet. Explore by Age URL is pending verification. ========================================================= */ #wh-books-finale .whbf__secondary { display: inline-flex; align-items: center; justify-content: center; gap: 11px; color: #8C7C75; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 800; line-height: 1.5; letter-spacing: .13em; } #wh-books-finale .whbf__secondary svg { display: block; width: 17px; height: 17px; opacity: .65; } #wh-books-finale .whbf__secondary--pending { cursor: default; } /* ========================================================= 15 — BOTTOM EDITORIAL SIGNATURE ========================================================= */ #wh-books-finale .whbf__bottom { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 23px; width: 100%; } #wh-books-finale .whbf__bottom-line { flex: 0 1 70px; width: 70px; height: 1px; background: rgba(164,123,86,.36); } #wh-books-finale .whbf__bottom-symbol { color: var(--whbf-coral-deep); font-size: 15px; line-height: 1; } #wh-books-finale .whbf__bottom-text { color: #A47B56; font-family: "Inter", sans-serif; font-size: 9px; font-weight: 800; line-height: 1.5; letter-spacing: .16em; text-align: center; } /* ========================================================= 16 — ANIMATIONS ========================================================= */ @keyframes whbfStarFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(9deg); } } @keyframes whbfRingDrift { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(16px) scale(1.04); } } /* ========================================================= 17 — COMPACT DESKTOP 1025px — 1360px ========================================================= */ @media screen and (min-width: 1025px) and (max-width: 1360px) { #wh-books-finale .whbf__frame { width: calc(100% - 88px); min-height: 650px; padding: 38px 45px 35px; } #wh-books-finale .whbf__title { font-size: clamp(75px, 8vw, 110px); } #wh-books-finale .whbf__decor-star--one { left: 4%; font-size: 65px; } #wh-books-finale .whbf__decor-star--two { right: 4%; font-size: 80px; } #wh-books-finale .whbf__content { padding: 80px 0; } } /* ========================================================= 18 — REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #wh-books-finale *, #wh-books-finale *::before, #wh-books-finale *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 07 DESKTOP CSS V1.0 ========================================================= */ /* ========================================================= WONDERHUE STUDIO — BOOKS SECTION 07 — ONE MORE WORLD AWAITS TABLET + MOBILE CSS · V1.0 CONTAINER: #wh-books-finale TABLET: 768px - 1024px MOBILE: 0px - 767px APPEND AFTER DESKTOP CSS V1.0 PRESERVE: - Desktop CSS - HTML V1.0 - WOW Reveal JS V1.0 - Global Navbar - Global Footer ========================================================= */ /* ========================================================= 01 — RESPONSIVE FOUNDATION TABLET + MOBILE ========================================================= */ @media screen and (max-width: 1024px) { #wh-books-finale .whbf { width: 100%; min-height: 0; overflow: hidden; } #wh-books-finale .whbf__frame { width: 100%; min-width: 0; } #wh-books-finale .whbf__content { min-width: 0; } #wh-books-finale .whbf__title, #wh-books-finale .whbf__description { overflow-wrap: break-word; } /* Ambient elements */ #wh-books-finale .whbf__glow--one { width: 460px; height: 460px; left: -210px; filter: blur(70px); } #wh-books-finale .whbf__glow--two { width: 480px; height: 480px; right: -210px; filter: blur(70px); } #wh-books-finale .whbf__glow--three { width: 330px; height: 330px; right: 5%; filter: blur(65px); } #wh-books-finale .whbf__orbit--one { width: 490px; height: 490px; right: -310px; } #wh-books-finale .whbf__orbit--two { width: 410px; height: 410px; left: -260px; } } /* ========================================================= 02 — TABLET 768px - 1024px ========================================================= */ @media screen and (min-width: 768px) and (max-width: 1024px) { /* SECTION */ #wh-books-finale .whbf { padding: 95px 0 105px; } /* FRAME */ #wh-books-finale .whbf__frame { width: calc(100% - 72px); max-width: 940px; min-height: 650px; padding: 36px 36px 34px; border-radius: 30px; } /* TOP BAR */ #wh-books-finale .whbf__eyebrow { gap: 10px; font-size: 9px; letter-spacing: .14em; } #wh-books-finale .whbf__eyebrow-symbol { font-size: 21px; } #wh-books-finale .whbf__top-star { font-size: 29px; } /* DECORATIONS */ #wh-books-finale .whbf__decor-star--one { top: 22%; left: 4%; font-size: 57px; } #wh-books-finale .whbf__decor-star--two { top: 30%; right: 4%; font-size: 68px; } #wh-books-finale .whbf__decor-star--three { bottom: 22%; left: 9%; font-size: 44px; } #wh-books-finale .whbf__decor-ring--one { width: 200px; height: 200px; top: -100px; left: -95px; } #wh-books-finale .whbf__decor-ring--two { width: 245px; height: 245px; bottom: -140px; right: -100px; } #wh-books-finale .whbf__decor-swish--one { width: 180px; height: 60px; left: -85px; } #wh-books-finale .whbf__decor-swish--two { width: 210px; height: 65px; right: -90px; } /* CENTER CONTENT */ #wh-books-finale .whbf__content { padding: 85px 0 80px; } #wh-books-finale .whbf__pretitle { margin-bottom: 24px; font-size: 9px; } #wh-books-finale .whbf__title { max-width: 100%; font-size: clamp(65px, 8vw, 98px); line-height: 1; letter-spacing: -.078em; } #wh-books-finale .whbf__description { max-width: 550px; margin-top: 24px; font-size: 16px; line-height: 1.75; } /* ACTIONS */ #wh-books-finale .whbf__actions { gap: 22px; margin-top: 35px; } #wh-books-finale .whbf__cta { min-height: 61px; padding: 12px 14px 12px 27px; font-size: 10px; } #wh-books-finale .whbf__cta-icon { flex-basis: 38px; width: 38px; height: 38px; } #wh-books-finale .whbf__secondary { font-size: 9px; } /* BOTTOM SIGNATURE */ #wh-books-finale .whbf__bottom { gap: 15px; } #wh-books-finale .whbf__bottom-line { flex-basis: 48px; width: 48px; } #wh-books-finale .whbf__bottom-text { font-size: 8px; letter-spacing: .13em; } } /* ========================================================= 03 — MOBILE 0px - 767px ========================================================= */ @media screen and (max-width: 767px) { /* SECTION */ #wh-books-finale .whbf { padding: 69px 0 78px; } /* BACKGROUND TEXTURE */ #wh-books-finale .whbf__texture { background-size: 8px 8px; opacity: .10; } /* FRAME */ #wh-books-finale .whbf__frame { width: calc(100% - 32px); max-width: 520px; min-height: 0; margin: 0 auto; padding: 23px 18px 26px; border-radius: 25px; } /* TOP BAR */ #wh-books-finale .whbf__top { gap: 10px; } #wh-books-finale .whbf__eyebrow { gap: 7px; font-size: 8px; letter-spacing: .09em; } #wh-books-finale .whbf__eyebrow-symbol { font-size: 19px; } #wh-books-finale .whbf__eyebrow-line { width: 18px; } #wh-books-finale .whbf__top-star { font-size: 23px; } /* DECORATIVE STARS */ #wh-books-finale .whbf__decor-star--one { top: 20%; left: -6px; font-size: 35px; opacity: .65; } #wh-books-finale .whbf__decor-star--two { top: 29%; right: -7px; font-size: 43px; opacity: .55; } #wh-books-finale .whbf__decor-star--three { bottom: 16%; left: 3%; font-size: 31px; opacity: .58; } /* DECORATIVE RINGS */ #wh-books-finale .whbf__decor-ring--one { width: 135px; height: 135px; top: -75px; left: -68px; } #wh-books-finale .whbf__decor-ring--two { width: 165px; height: 165px; bottom: -95px; right: -80px; } /* DECORATIVE SWISHES */ #wh-books-finale .whbf__decor-swish--one { width: 125px; height: 43px; top: 35%; left: -75px; } #wh-books-finale .whbf__decor-swish--two { width: 140px; height: 45px; bottom: 25%; right: -90px; } /* MAIN CONTENT */ #wh-books-finale .whbf__content { padding: 94px 0 93px; width: 100%; } #wh-books-finale .whbf__pretitle { max-width: 275px; margin-bottom: 23px; font-size: 8px; line-height: 1.6; letter-spacing: .12em; } /* MAIN TITLE */ #wh-books-finale .whbf__title { max-width: 100%; font-size: clamp(43px, 10.5vw, 76px); line-height: 1.03; letter-spacing: -.075em; } #wh-books-finale .whbf__title > span { display: block; } /* DESCRIPTION */ #wh-books-finale .whbf__description { max-width: 320px; margin-top: 24px; font-size: 14px; line-height: 1.7; } /* ACTION GROUP */ #wh-books-finale .whbf__actions { width: 100%; gap: 21px; margin-top: 33px; } /* PRIMARY CTA */ #wh-books-finale .whbf__cta { gap: 17px; min-height: 57px; max-width: 100%; padding: 10px 11px 10px 23px; font-size: 10px; letter-spacing: .09em; } #wh-books-finale .whbf__cta-icon { flex-basis: 36px; width: 36px; height: 36px; } #wh-books-finale .whbf__cta-icon svg { width: 18px; height: 18px; } /* SECONDARY LABEL */ #wh-books-finale .whbf__secondary { gap: 8px; font-size: 9px; letter-spacing: .10em; } #wh-books-finale .whbf__secondary svg { width: 15px; height: 15px; } /* BOTTOM SIGNATURE */ #wh-books-finale .whbf__bottom { flex-wrap: wrap; gap: 9px; } #wh-books-finale .whbf__bottom-text { max-width: 220px; font-size: 8px; line-height: 1.6; letter-spacing: .10em; } #wh-books-finale .whbf__bottom-line { flex: 0 1 19px; width: 19px; } #wh-books-finale .whbf__bottom-symbol { font-size: 12px; } } /* ========================================================= 04 — EXTRA SMALL MOBILE 0px - 390px ========================================================= */ @media screen and (max-width: 390px) { #wh-books-finale .whbf { padding: 59px 0 65px; } #wh-books-finale .whbf__frame { width: calc(100% - 24px); padding: 20px 14px 23px; border-radius: 20px; } #wh-books-finale .whbf__eyebrow { gap: 6px; font-size: 7px; } #wh-books-finale .whbf__eyebrow-line { width: 12px; } #wh-books-finale .whbf__content { padding: 85px 0 80px; } #wh-books-finale .whbf__pretitle { font-size: 7px; } #wh-books-finale .whbf__title { font-size: clamp(39px, 10.2vw, 46px); } #wh-books-finale .whbf__description { font-size: 13px; } #wh-books-finale .whbf__cta { padding-left: 18px; gap: 13px; font-size: 9px; } #wh-books-finale .whbf__cta-icon { flex-basis: 34px; width: 34px; height: 34px; } #wh-books-finale .whbf__bottom { gap: 7px; } #wh-books-finale .whbf__bottom-text { max-width: 190px; font-size: 7px; } #wh-books-finale .whbf__bottom-line { flex-basis: 12px; width: 12px; } } /* ========================================================= 05 — TOUCH DEVICES ========================================================= */ @media (hover: none) and (pointer: coarse) { #wh-books-finale .whbf__cta { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } #wh-books-finale .whbf__cta:active { transform: scale(.97); } } /* ========================================================= 06 — REDUCED MOTION ========================================================= */ @media screen and (max-width: 1024px) and (prefers-reduced-motion: reduce) { #wh-books-finale .whbf__decor-star, #wh-books-finale .whbf__decor-ring { animation: none !important; } } /* ========================================================= END — WONDERHUE STUDIO BOOKS / SECTION 07 TABLET + MOBILE CSS V1.0 ========================================================= *//* End custom CSS */