/* ========================================================================== World Of Orient — global styles for /blocks (acf/, block.json pattern). BEM classes (.wof-__part), one file for all blocks, loaded on the front end and inside the block editor canvas (inc/acf/block-settings.php). ========================================================================== */ /* Brand tokens, scoped to block roots (other stylesheets define their own --wof-* locally). */ :where(.wof-block, .wof-contact){ --wof-gold:#C9A964; --wof-gold-hover:#B0903F; --wof-gold-soft:#E6D9BD; --wof-ink:#101010; --wof-cream:#F8F6F1; --wof-grey:#F8F8F8; --wof-navy:#171F32; --wof-text:#333; --wof-line:rgba(16,16,16,.10); --wof-muted:rgba(16,16,16,.60); --wof-error:#a63f3a; --wof-ease:cubic-bezier(.6,.05,0,1); } /* ========================================================================== Shared primitives ========================================================================== */ /* Block pages: sections carry their own vertical rhythm, so drop Educavo's 100px/80px #content padding (default.css / responsive.css). */ .main-contain #content.wof-blocks-page, .main-contain #content.wof-home{padding-top:0;padding-bottom:0} /* Educavo sets `html, body{overflow-x:hidden}`, which turns into a scroll container and breaks position:sticky (acf/showcase). `clip` still hides the horizontal overflow without creating one; old browsers keep `hidden`. */ html body{overflow-x:hidden;overflow-x:clip} /* Section shell: 1800px container with 32px sides everywhere (16px ≤479px). Inner pages 70px rhythm, "--wide" (home sections) 80px. */ .wof-block{position:relative;padding:70px 0;background-color:#fff;color:var(--wof-text);background-size:cover;background-position:center} .wof-block *, .wof-block *::before, .wof-block *::after{box-sizing:border-box} .wof-block__inner{max-width:1800px;margin:0 auto;padding:0 32px} .wof-block[class*="--wide"]{padding:80px 0} .wof-block--bg-grey{background-color:var(--wof-grey)} .wof-block--bg-cream{background-color:var(--wof-cream)} .wof-block--bg-dark{background-color:var(--wof-navy);color:rgba(255,255,255,.78)} .wof-block--bg-image{background-color:var(--wof-ink);color:rgba(255,255,255,.88)} .wof-block--bg-image::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.62),rgba(10,10,10,.5))} .wof-block--bg-image > .wof-block__inner{position:relative} .wof-block__actions{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:14px} .wof-block__actions--center{justify-content:center;flex-direction:column} .wof-block__cta{margin-top:46px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px} .wof-block__cta-text{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:var(--wof-ink);margin:0;max-width:560px} /* Heading: eyebrow + title + text. "--content" = inner pages, "--brand" = home sections. */ .wof-heading{margin:0 0 26px} .wof-heading:last-child{margin-bottom:0} .wof-heading__eyebrow{display:block;font-family:"Rubik",sans-serif;font-size:16px;font-weight:500;line-height:28px;letter-spacing:1px;color:var(--wof-gold);margin:0 0 10px} .wof-heading__title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:36px;line-height:40px;letter-spacing:-1px;color:var(--wof-ink);margin:0 0 26px;text-wrap:balance} .wof-heading__title:last-child{margin-bottom:0} .wof-heading--center{text-align:center} .wof-heading--brand{margin-bottom:52px} .wof-heading--brand .wof-heading__eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:"Nunito",Arial,sans-serif;font-size:13px;font-weight:800;line-height:1;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px} .wof-heading--brand .wof-heading__title{font-weight:600;font-size:clamp(30px,3.5vw,48px);line-height:1.06;letter-spacing:-.5px;margin:0} .wof-heading--brand .wof-heading__text{margin-top:18px} .wof-heading--brand .wof-heading__text, .wof-heading--brand .wof-heading__text p{font-size:16.5px;line-height:1.72;color:#5a5a5a} .wof-heading--brand.wof-heading--center{max-width:840px;margin-left:auto;margin-right:auto} .wof-heading--brand.wof-heading--center .wof-heading__text{max-width:760px;margin-left:auto;margin-right:auto} .wof-block--bg-dark .wof-heading__title, .wof-block--bg-image .wof-heading__title{color:#fff} .wof-block--bg-dark .wof-heading__text, .wof-block--bg-dark .wof-heading__text p, .wof-block--bg-image .wof-heading__text, .wof-block--bg-image .wof-heading__text p{color:rgba(255,255,255,.82)} /* Rich text */ .wof-prose{font-size:16px;line-height:27.2px;color:var(--wof-text)} .wof-prose > :last-child{margin-bottom:0} .wof-prose p{margin:0 0 26px} .wof-prose h2, .wof-prose h3, .wof-prose h4{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;letter-spacing:-1px;color:var(--wof-ink);margin:0 0 26px} .wof-prose h2{font-size:36px;line-height:40px} .wof-prose h3{font-size:28px;line-height:32px} .wof-prose h4{font-size:22px;line-height:28px} .wof-prose ul, .wof-prose ol{margin:0 0 24px 48px;padding:0} .wof-prose li{margin:0} .wof-prose a{color:var(--wof-gold);text-decoration:none} .wof-prose a:hover{color:var(--wof-gold-hover)} .wof-prose strong{font-weight:700;color:inherit} .wof-prose--compact{line-height:28.8px;color:#555} .wof-prose--compact p{margin-bottom:14px} /* Buttons: .wof-btn lives in assets/css/wof-buttons.css (site-wide, loaded last). */ /* Bundle offer above the WooCommerce Cart / Checkout blocks (inc/child-functions.php) */ .wof-bundle-notice{display:flex;align-items:flex-start;gap:12px;margin:0 0 28px;padding:16px 20px;border:1px solid #efe9dc;border-left:3px solid #C9A964;border-radius:12px;background:#F8F6F1;font-family:"Nunito",Arial,sans-serif;color:#101010} .wof-bundle-notice .bi{flex:none;margin-top:2px;font-size:20px;line-height:1;color:#B0903F} .wof-bundle-notice p{margin:0;font-size:15.5px;line-height:1.6;color:#101010} .wof-bundle-notice a{color:#B0903F;font-weight:700;text-decoration:underline;text-underline-offset:3px} .wof-bundle-notice a:hover{color:#101010} .wof-bundle-notice--success{border-left-color:#5a8f5c} .wof-bundle-notice--success .bi{color:#5a8f5c} /* Icon list (Bootstrap Icons) */ .wof-icon-list{list-style:none;margin:0 0 22px;padding:0} .wof-icon-list__item{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:#444} .wof-icon-list__icon{color:var(--wof-gold);width:18px;text-align:center;flex:none} .wof-icon-list__item a{color:inherit;text-decoration:none} .wof-icon-list__item a:hover{color:var(--wof-gold-hover)} /* Media */ .wof-video-frame{border-radius:8px;overflow:hidden;box-shadow:0 14px 50px rgba(16,16,16,.18);background:#000;max-width:900px} .wof-video-frame video{display:block;width:100%;height:auto;background:#000} .wof-video-frame--center{margin:0 auto} .wof-poster{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px;border-radius:8px;overflow:hidden; background-color:var(--wof-ink);background-size:cover;background-position:center} .wof-poster::before{content:"";position:absolute;inset:0;background:rgba(10,10,10,.18)} .wof-poster__play, .wof-poster__play:visited{position:relative;display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%; background:#fff;color:var(--wof-gold);box-shadow:0 0 0 14px rgba(255,255,255,.22);transition:background-color .25s ease,color .25s ease,transform .25s ease} .wof-poster__play .bi{display:block;margin-left:4px;font-size:30px;line-height:1} .wof-poster__play:hover, .wof-poster__play:focus-visible{background:var(--wof-gold);color:var(--wof-ink);transform:scale(1.05)} .wof-carousel{position:relative} .wof-carousel .slick-list{overflow:hidden;border-radius:6px} .wof-carousel__item img{display:block;width:100%;height:auto;border-radius:6px} .wof-carousel .wof-carousel__arrow{position:absolute;z-index:3;top:auto;left:auto;bottom:16px;transform:none;width:44px;height:44px;margin:0;border-radius:50%;border:0;padding:0;cursor:pointer; display:flex;align-items:center;justify-content:center;background:#fff;color:var(--wof-ink);font-size:0;box-shadow:0 8px 22px rgba(16,16,16,.14);transition:background-color .25s ease} .wof-carousel .wof-carousel__arrow::before, .wof-carousel .wof-carousel__arrow::after{display:none} .wof-carousel .wof-carousel__arrow:hover{background:var(--wof-gold)} .wof-carousel .wof-carousel__arrow--prev{right:72px} .wof-carousel .wof-carousel__arrow--next{right:16px} /* CF7 forms in blocks (.wof-form card, acf/form-cta) — same field look as the contact form */ .wof-form{background:#fff;border:1px solid #efe9dc;border-radius:16px;padding:clamp(24px,3.5vw,48px)} .wof-form .wpcf7 form{margin:0} .wof-form .rs-free-course-contact{display:flex;flex-direction:column;gap:16px} .wof-form .wpcf7 .row{display:flex;gap:16px;margin:0} .wof-form .wpcf7 .row > [class*="col-"]{flex:1 1 0;min-width:0;max-width:none;padding:0} .wof-form .form-field p, .wof-form .form-btn p{margin:0} .wof-form .form-field br{display:none} .wof-form .wpcf7-form-control-wrap{display:block} .wof-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-checkbox):not(.wpcf7-radio):not(.wpcf7-acceptance){ display:block;width:100%;height:54px;margin:0;padding:14px 18px; border:1px solid transparent;border-radius:7px;background:var(--wof-cream);box-shadow:none;outline:none; font-family:"Nunito",Arial,sans-serif;font-size:16px;font-weight:500;line-height:1.4;color:var(--wof-ink); transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease} .wof-form textarea.wpcf7-form-control{height:160px !important;resize:vertical} .wof-form select.wpcf7-form-control{-webkit-appearance:none;appearance:none;padding-right:48px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23101010' stroke-width='1.6' d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 18px center} .wof-form .wpcf7-form-control::placeholder{color:rgba(16,16,16,.45);opacity:1} .wof-form select.wpcf7-form-control:has(option:checked[value=""]){color:rgba(16,16,16,.45)} .wof-form .wpcf7-form-control:not(.wpcf7-submit):hover{border-color:#e6dfcf} .wof-form .wpcf7-form-control:not(.wpcf7-submit):focus{border-color:var(--wof-gold);background-color:#fff;box-shadow:0 0 0 3px rgba(201,169,100,.2)} .wof-form .wpcf7-form-control.wpcf7-not-valid{border-color:var(--wof-error)} .wof-form .wpcf7-not-valid-tip{margin-top:6px;font-size:13px;color:var(--wof-error)} .wof-form .form-btn{position:relative;margin:8px 0 0} .wof-form .wpcf7-submit{display:flex;width:100%;height:auto} .wof-form .form-btn .wpcf7-spinner{position:absolute;top:50%;right:16px;margin:-12px 0 0} .wof-form .wpcf7 form .wpcf7-response-output{margin:16px 0 0;padding:12px 16px;border-width:1px;border-radius:7px;font-size:15px;line-height:1.5} /* dark grounds (newsletter): translucent card, light fields */ .wof-block--bg-dark .wof-form{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)} .wof-block--bg-dark .wof-form .wpcf7-form-control:not(.wpcf7-submit){background-color:rgba(255,255,255,.08) !important;color:#fff !important} .wof-block--bg-dark .wof-form .wpcf7-form-control:not(.wpcf7-submit):hover{border-color:rgba(255,255,255,.2)} .wof-block--bg-dark .wof-form .wpcf7-form-control:not(.wpcf7-submit):focus{background-color:rgba(255,255,255,.12) !important;border-color:var(--wof-gold)} .wof-block--bg-dark .wof-form .wpcf7-form-control::placeholder{color:rgba(255,255,255,.55)} .wof-block--bg-dark .wof-form select.wpcf7-form-control:has(option:checked[value=""]){color:rgba(255,255,255,.55) !important} .wof-block--bg-dark .wof-form .wpcf7 form .wpcf7-response-output{color:#fff} /* ========================================================================== Hero (acf/hero) ========================================================================== */ .wof-hero.wof-block{padding:0;position:relative;left:50%;right:50%;width:100vw;margin-left:-50vw;margin-right:-50vw; height:100dvh;min-height:640px;max-height:1100px;overflow:hidden;background:#000;font-family:"Nunito",Arial,sans-serif} .wof-hero__slider, .wof-hero .slick-list, .wof-hero .slick-track{height:100% !important} .wof-hero__slide{position:relative;height:100dvh;min-height:640px;max-height:1100px} .wof-hero__bg{position:absolute;inset:0} .wof-hero__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)} .wof-hero .slick-active .wof-hero__bg img{transform:scale(1.14);transition:transform 8s ease-out} .wof-hero__veil{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(10,10,10,.6) 0%,rgba(10,10,10,.12) 22%,rgba(10,10,10,0) 42%,rgba(10,10,10,.5) 74%,rgba(10,10,10,.88) 100%)} .wof-hero__wrap{position:absolute;inset:0;z-index:5;max-width:1800px;margin:0 auto;padding:0 clamp(20px,4vw,48px);display:flex;align-items:flex-end} .wof-hero__content{width:100%;max-width:820px;padding-bottom:clamp(96px,14vh,170px);display:flex;flex-direction:column;align-items:flex-start;gap:22px} .wof-hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff} .wof-hero__title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;color:var(--wof-gold);font-size:clamp(42px,6.4vw,92px);line-height:.98;letter-spacing:-1px;margin:0;text-wrap:balance} .wof-hero__title em{font-style:italic;color:var(--wof-cream)} .wof-hero__text{max-width:560px;font-size:clamp(16px,1.4vw,19px);font-weight:600;line-height:1.55;color:rgba(255,255,255,.85);margin:0} .wof-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px} .wof-hero__slider.slick-initialized .wof-hero__reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--wof-ease),transform .7s var(--wof-ease)} .wof-hero__slider.slick-initialized .slick-active .wof-hero__reveal{opacity:1;transform:none} .wof-hero .slick-active .wof-hero__reveal--1{transition-delay:.12s} .wof-hero .slick-active .wof-hero__reveal--2{transition-delay:.24s} .wof-hero .slick-active .wof-hero__reveal--3{transition-delay:.36s} .wof-hero .slick-active .wof-hero__reveal--4{transition-delay:.48s} .wof-hero__dots{position:absolute;z-index:8;left:clamp(20px,4vw,48px);bottom:clamp(48px,7vh,72px)} .wof-hero__dots ul{display:flex;gap:9px;margin:0;padding:0;list-style:none} .wof-hero__dots li{width:32px;height:4px} .wof-hero__dots li button{width:32px;height:4px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.34);text-indent:-9999px;overflow:hidden;cursor:pointer;transition:background-color .3s} .wof-hero__dots li.slick-active button{background:var(--wof-gold)} .wof-hero__arrow{position:absolute;z-index:8;bottom:clamp(44px,6.5vh,66px);width:50px;height:50px;border-radius:50%;padding:0; border:1px solid rgba(255,255,255,.3);background:rgba(10,10,10,.25);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s} .wof-hero__arrow svg{width:20px;height:20px;flex:none} .wof-hero__arrow:hover{background:var(--wof-gold);border-color:var(--wof-gold);color:var(--wof-ink)} .wof-hero__arrow--prev{right:calc(clamp(20px,4vw,48px) + 62px)} .wof-hero__arrow--next{right:clamp(20px,4vw,48px)} /* ========================================================================== Products (acf/products) — cards: assets/css/wof-product.css ========================================================================== */ .wof-products .wof-block__actions{margin-top:40px} /* ========================================================================== Split (acf/split) ========================================================================== */ .wof-split__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:start} .wof-split--align-center .wof-split__grid{align-items:center} .wof-split--media-left .wof-split__media{order:-1} .wof-split--no-media .wof-split__grid{grid-template-columns:minmax(0,1fr)} .wof-split__image{display:block;width:100%;height:auto;border-radius:6px} .wof-split .wof-block__actions{margin-top:22px} .wof-split[class*="--wide"] .wof-heading--brand{margin-bottom:0} .wof-split[class*="--wide"] .wof-heading__text{margin:18px 0 0} .wof-split[class*="--wide"] .wof-heading__text p{margin-bottom:14px} .wof-split[class*="--wide"] .wof-block__actions{margin-top:40px} /* Media column: fixed height, every media type fills it. */ .wof-split__media{height:560px} .wof-split__media > *, .wof-split__media .wof-carousel .slick-list, .wof-split__media .wof-carousel .slick-track, .wof-split__media .wof-carousel .slick-slide, .wof-split__media .wof-carousel .slick-slide > div, .wof-split__media .wof-carousel__item{height:100%} .wof-split__media .wof-split__image, .wof-split__media .wof-carousel__item img{width:100%;height:100%;object-fit:cover} .wof-split__media--poster .wof-poster{min-height:0} .wof-split__media--video .wof-video-frame{max-width:none} .wof-split__media--video video{height:100%;object-fit:cover} /* ========================================================================== Story (acf/story) — statement headline, wide image 2/3, serif side text 1/3 ========================================================================== */ .wof-block.wof-story > .wof-block__inner{max-width:1800px;padding:0 32px} .wof-story__head{max-width:864px;margin:0 0 64px} .wof-story__eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;font-family:"Nunito",Arial,sans-serif;font-size:13px;font-weight:800;line-height:1;letter-spacing:2px;text-transform:uppercase;color:var(--wof-gold)} .wof-story__title{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(38px,4.8vw,64px);line-height:.98;letter-spacing:-1px;color:var(--wof-ink);text-wrap:balance} .wof-story__title em{font-style:italic;color:var(--wof-gold-hover)} .wof-story__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;align-items:start} .wof-story--image-right .wof-story__media{order:2} .wof-story--no-image .wof-story__grid{grid-template-columns:minmax(0,1fr);max-width:640px} .wof-story__media{height:562px;border-radius:16px;overflow:hidden;background:var(--wof-cream)} .wof-story__image{display:block;width:100%;height:100%;object-fit:cover} .wof-story__side{display:flex;flex-direction:column;align-items:flex-start;gap:28px} .wof-story__text{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(20px,1.75vw,25px);font-weight:500;line-height:1.38;letter-spacing:-.1px;color:var(--wof-ink)} .wof-story__text p{margin:0 0 18px} .wof-story__text > :last-child{margin-bottom:0} .wof-story__text strong{font-weight:700} /* ========================================================================== Cover (acf/cover) — full-width image + overlay, content top, button bottom ========================================================================== */ .wof-block.wof-cover{display:flex;height:800px;padding:80px 0;overflow:hidden;background-color:var(--wof-ink);color:#fff} .wof-cover__bg{position:absolute;inset:0;z-index:0} .wof-cover__image{display:block;width:100%;height:100%;object-fit:cover} .wof-cover__overlay{position:absolute;inset:0;z-index:1;background:#000;opacity:var(--wof-cover-overlay,.3)} .wof-block.wof-cover > .wof-block__inner{position:relative;z-index:2;width:100%;max-width:1800px;padding:0 32px} .wof-cover__inner{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:48px;height:100%} .wof-cover__head{display:flex;flex-direction:column;align-items:flex-start;gap:32px;max-width:864px} .wof-cover__eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:"Nunito",Arial,sans-serif;font-size:12.5px;font-weight:800;line-height:1;letter-spacing:2px;text-transform:uppercase;color:#fff} .wof-cover__title{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(44px,5.6vw,80px);line-height:.96;letter-spacing:-1px;color:#fff;text-wrap:balance} .wof-cover__title em{font-style:italic;color:var(--wof-gold)} .wof-cover__text{max-width:620px;font-family:"Nunito",Arial,sans-serif;font-size:17px;font-weight:500;line-height:1.65;color:rgba(255,255,255,.85)} .wof-cover__text p{margin:0 0 14px} .wof-cover__text > :last-child{margin-bottom:0} /* ========================================================================== Showcase (acf/showcase) — pill video that opens to full screen on scroll, text + two buttons under it, statements passing over the video. Base = no JS / editor: static pill, statements below on ink. .is-ready (assets/js/wof-showcase.js) = pinned stage; the frame covers the screen and is clipped to the pill slot by --t/--r/--b/--l × --q (1 → 0); the video box follows the same insets so the pill shows the whole shot. ========================================================================== */ .wof-block.wof-showcase{padding:0;background-color:var(--wof-cream);overflow:clip} .wof-showcase__stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(160px,clamp(200px,40vh,480px)) auto;align-content:center;height:min(100vh,860px);padding:80px 16px 0} .wof-showcase__heading{grid-area:1 / 1;justify-self:center;max-width:760px;margin:0 0 32px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(34px,3.6vw,52px);line-height:1.02;letter-spacing:-.5px;color:var(--wof-ink);text-align:center;text-wrap:balance} .wof-showcase__heading em{font-style:italic;color:var(--wof-gold)} .wof-showcase__slot, .wof-showcase__frame{grid-area:2 / 1;justify-self:center;width:clamp(240px,56vw,1040px);height:100%} .wof-showcase__frame{position:relative;overflow:hidden;border-radius:400px;background-color:var(--wof-ink)} .wof-showcase__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--wof-showcase-focus,50%) center} .wof-showcase__shade{position:absolute;inset:0;background:var(--wof-ink);opacity:0;pointer-events:none} .wof-showcase__lead{grid-area:3 / 1;display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px 0 max(32px,5vh);text-align:center} .wof-showcase__text{margin:0;max-width:560px;font-family:"Nunito",Arial,sans-serif;font-size:17px;font-weight:500;line-height:1.6;color:rgba(16,16,16,.88);text-wrap:balance} .wof-showcase__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .wof-showcase__scroll{background-color:var(--wof-ink)} .wof-showcase__spacer{display:none} .wof-showcase__statements{display:flex;flex-direction:column;align-items:center;gap:72px;padding:96px 16px;color:#fff;text-align:center} .wof-showcase__statement{display:flex;flex-direction:column;align-items:center;gap:28px;max-width:720px} .wof-showcase__label{display:inline-flex;align-items:center;gap:9px;font-family:"Nunito",Arial,sans-serif;font-size:12.5px;font-weight:800;line-height:1;letter-spacing:2px;text-transform:uppercase;color:#fff} .wof-showcase__title{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(40px,4.4vw,60px);line-height:1;letter-spacing:-.5px;color:#fff;text-wrap:balance;text-shadow:0 2px 28px rgba(0,0,0,.28)} .wof-showcase__title em{font-style:italic;color:var(--wof-gold)} .wof-showcase--preview .wof-showcase__stage{height:640px} .wof-showcase.is-ready .wof-showcase__stage{position:sticky;top:0;z-index:1;height:100vh;height:100svh;padding-top:calc(var(--wof-hh,110px) + 3vh)} .wof-showcase.is-ready .wof-showcase__frame{grid-area:auto;justify-self:stretch;width:auto;position:absolute;inset:0 0 auto;z-index:1;height:100vh;height:100lvh;border-radius:0;will-change:clip-path; clip-path:inset(calc(var(--t,0px) * var(--q,1)) calc(var(--r,0px) * var(--q,1)) calc(var(--b,0px) * var(--q,1)) calc(var(--l,0px) * var(--q,1)) round calc(400px * var(--q,1)))} .wof-showcase.is-ready .wof-showcase__video{inset:calc(var(--t,0px) * var(--q,1)) auto auto calc(var(--l,0px) * var(--q,1)); width:calc(100% - (var(--l,0px) + var(--r,0px)) * var(--q,1));height:calc(100% - (var(--t,0px) + var(--b,0px)) * var(--q,1))} .wof-showcase.is-ready .wof-showcase__shade{opacity:calc((1 - var(--q,1)) * .45)} .wof-showcase.is-ready .wof-showcase__heading, .wof-showcase.is-ready .wof-showcase__lead{position:relative;z-index:0;opacity:calc(1 - (1 - var(--q,1)) * 3)} .wof-showcase.is-expanded .wof-showcase__heading, .wof-showcase.is-expanded .wof-showcase__lead{visibility:hidden} .wof-showcase.is-ready .wof-showcase__scroll{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh;background:none;pointer-events:none} .wof-showcase.is-ready .wof-showcase__spacer{display:block;height:130vh;height:130svh} .wof-showcase.is-ready .wof-showcase__statements{gap:0;padding:0 16px 10vh} .wof-showcase.is-ready .wof-showcase__statement{justify-content:center;min-height:90vh;min-height:90svh} /* ========================================================================== Intro (acf/intro) ========================================================================== */ .wof-intro{text-align:center} .wof-intro .wof-heading--brand{margin-bottom:0} .wof-intro .wof-heading--brand .wof-heading__text{max-width:900px} .wof-intro .wof-heading--brand .wof-heading__text p{margin-bottom:26px} .wof-intro .wof-heading--brand .wof-heading__text p:last-child{margin-bottom:0} .wof-intro .wof-heading--brand + .wof-block__actions{margin-top:66px} .wof-intro .wof-heading--content{max-width:900px;margin-left:auto;margin-right:auto} .wof-intro.wof-block--bg-image{padding:clamp(96px,12vw,160px) 0} .wof-intro.wof-block--bg-image .wof-heading__title{font-size:clamp(40px,5vw,64px);line-height:1.04} .wof-intro__note{margin:6px 0 0;font-size:15px;line-height:1.6;color:inherit} /* ========================================================================== FAQ (acf/faq) — label + headline + CTA (sticky, left) beside question cards, video card at the bottom right that plays in a