/* Puzzle Creatives, brand layer. The template's mechanics stay (torn edges, script accents, polaroids, ribbons, rolling counters); only the accent, the imagery and a few travel-only stickers change. */ :root { --salmon-orange: #7a52e6; /* the one accent: buttons, script words, ribbon, rating pills */ --pearl-black: #1d1830; /* ink, dark ribbon, arrow chips */ --storm-dust: #4a4462; --smoothie: #d9ccf5; /* dashed arch border */ } /* ---------- hero: the blue moon sky (still) + twinkling stars drawn in code, a dark gradient under the copy ---------- */ .section.hero { background-image: url("art/rooftop.webp"); background-position: 0% 50%; background-size: cover; position: relative; overflow: hidden; } @media (max-width: 767px) { .section.hero { background-position: 62% 50%; } } .pc-stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; display: block; } .section.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(90deg, rgba(6, 4, 20, .78) 0%, rgba(6, 4, 20, .5) 38%, rgba(6, 4, 20, .08) 68%, rgba(6, 4, 20, 0) 100%), linear-gradient(270deg, rgba(6, 4, 20, .62) 0%, rgba(6, 4, 20, .3) 18%, rgba(6, 4, 20, 0) 42%), linear-gradient(180deg, rgba(6, 4, 20, .55) 0%, rgba(6, 4, 20, 0) 32%, rgba(6, 4, 20, 0) 62%, rgba(6, 4, 20, .5) 100%); } .section.hero > .w-container { position: relative; z-index: 2; } .hero-shap { z-index: 3; } /* ---------- logo (nav + footer): the full Puzzle Studio lockup ---------- */ .logo-image.pc-logo { height: 4.8rem; width: auto; max-width: none; display: block; } .footer-logo.pc-logo { height: 6.5rem; width: auto; max-width: none; display: block; } @media (max-width: 767px) { .logo-image.pc-logo { height: 3.4rem; } } /* ---------- wordmark (kept for reference, unused) ---------- */ .pc-wordmark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; } .pc-wordmark .pc-mark { height: 2.1rem; width: auto; display: block; } .pc-wordmark .pc-name { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1; color: #fff; white-space: nowrap; } .section.footer .pc-wordmark .pc-name { color: var(--pearl-black); } .logo-image.pc-wordmark, .footer-logo.pc-wordmark { max-width: none; width: auto; } /* ---------- icons (inline SVG, stroke) ---------- */ .pc-ico { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 99px; box-shadow: 0 6px 18px -6px rgba(29, 24, 48, .35); color: var(--salmon-orange); } .pc-ico svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .experiences-icon.pc-ico { width: 3.5rem; height: 3.5rem; max-width: none; left: 50%; margin-left: -1.75rem; } .experiences-icon.pc-ico svg { width: 1.6rem; height: 1.6rem; } .why-card-icon.pc-ico { width: 4rem; height: 4rem; max-width: none; flex: none; color: var(--pearl-black); box-shadow: none; } .why-card-icon.pc-ico svg { width: 1.75rem; height: 1.75rem; } /* ---------- travel-only stickers, retired ---------- */ .why-left-shap, .why-right-shap, .cta-left-image, .cta-right-image, .line-shap, .review-icon-wrpp { display: none !important; } /* ---------- studio art in the template's photo slots ---------- */ .descover-left-image, .featurd-image-left, .featured-image, .review-image { border: .45rem solid #fff; border-radius: .4rem; box-shadow: 0 14px 34px -14px rgba(29, 24, 48, .45); background: #fff; } .descover-left-image { aspect-ratio: 3 / 4; object-fit: cover; } .featurd-image-left, .featured-image { aspect-ratio: 4 / 5; object-fit: cover; } .review-image { aspect-ratio: 4 / 3; object-fit: cover; } .map-image { border-radius: 1rem; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 18px 40px -20px rgba(29, 24, 48, .5); } .cta-image { -webkit-mask-image: linear-gradient(rgba(0,0,0,0), #000 38%); mask-image: linear-gradient(rgba(0,0,0,0), #000 38%); aspect-ratio: 1536 / 760; object-fit: cover; object-position: 50% 82%; display: block; } .user-icon-v1, .user-icon-v2, .user-icon-v3, .user-icon-v4 { border: 3px solid #fff; border-radius: 99px; box-shadow: 0 8px 20px -8px rgba(29, 24, 48, .5); } .happy-clind-image.image-size { border-radius: 99px; } .review-adventor { border-radius: 99px; } /* the six tiles on the right of "the studio in numbers" */ .why-traveles-right-block.image-v1 { background-image: url("art/winter-cottage.webp"); } .why-traveles-right-block.image-v2 { background-image: url("art/kito.webp"); background-position: 50% 30%; } .why-traveles-right-block.image-v3 { background-image: url("art/moyo.webp"); background-position: 50% 25%; } .why-traveles-right-block.image-v4 { background-image: url("art/the-lit-wood.webp"); } .why-traveles-right-block.image-v5 { background-image: url("art/wings-of-light.webp"); } .why-traveles-right-block.image-v6 { background-image: url("art/the-dark-city.webp"); } /* ---------- the title ribbons under "On YouTube" ---------- */ .logo-image-wrpp.pc-ribbon { max-width: none; width: auto; font-family: "Kaushan Script", cursive; font-size: 1.55rem; line-height: 1; color: #fff; white-space: nowrap; } .logo-icon.pc-star { width: 1.1rem; height: 1.1rem; flex: none; } .logo-icon.pc-star svg { width: 100%; height: 100%; fill: #fff; opacity: .85; } /* footer: no world map behind the columns */ .section.footer { background-image: none !important; } /* ---------- small fixes for text that replaced prices ---------- */ .person { white-space: nowrap; } .day-text { white-space: nowrap; } @media (max-width: 767px) { .pc-wordmark .pc-name { font-size: 1.15rem; } .pc-wordmark .pc-mark { height: 1.6rem; } .logo-image-wrpp.pc-ribbon { font-size: 1.25rem; } } /* phone: the hero reads centred, badge, headline, paragraph, button */ @media (max-width: 767px) { .section.hero .hero-block-wrapper, .section.hero .hero-block, .section.hero .hero-heading-block, .section.hero .hero-paragraph-block, .section.hero .hero-buttton-block { align-items: center; justify-content: center; text-align: center; width: 100%; } .section.hero .hero-badga-block { margin-left: auto; margin-right: auto; } .section.hero .hero-heaidng, .section.hero .hero-paragraph-text { text-align: center; margin-left: auto; margin-right: auto; } .section.hero .primary-button.left { justify-content: center; display: flex; } .section.hero { background-position: 50% 50%; } } /* ---------- departments: a bento grid instead of the arch slider ---------- */ .pc-bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 15rem; gap: 1.25rem; margin-top: 3rem; } .pc-tile { position: relative; display: block; overflow: hidden; border-radius: 1.4rem; background-size: cover; background-position: 50% 30%; color: #fff; text-decoration: none; box-shadow: 0 18px 40px -24px rgba(29, 24, 48, .55); transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; } .pc-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 24, 0) 40%, rgba(10, 8, 24, .82) 100%); transition: opacity .4s; } .pc-tile:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -24px rgba(29, 24, 48, .6); } .pc-tile-hero { grid-column: span 7; grid-row: span 2; background-position: 50% 20%; } .pc-tile-a, .pc-tile-b { grid-column: span 5; } .pc-tile-c, .pc-tile-d, .pc-tile-e { grid-column: span 4; } .pc-tile-wide { grid-column: span 12; grid-row: span 1; background-position: 50% 45%; } .pc-tile-ico { position: absolute; top: 1rem; left: 1rem; z-index: 2; width: 2.6rem; height: 2.6rem; } .pc-tile-ico svg { width: 1.25rem; height: 1.25rem; } .pc-tile-tag { position: absolute; top: 1.1rem; right: 1.1rem; z-index: 2; font-family: "Kaushan Script", cursive; font-size: 1.05rem; line-height: 1; padding: .5rem .9rem .55rem; border-radius: 99px; background: var(--salmon-orange); color: #fff; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); } .pc-tile-text { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.15rem; z-index: 2; display: flex; flex-direction: column; gap: .2rem; } .pc-tile-title { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 1.35rem; line-height: 1.15; letter-spacing: -.01em; } .pc-tile-hero .pc-tile-title { font-size: 2.2rem; } .pc-tile-wide .pc-tile-title { font-size: 1.9rem; } .pc-tile-sub { font-size: .95rem; opacity: .85; } .pc-tile-hero .pc-tile-sub, .pc-tile-wide .pc-tile-sub { font-size: 1.05rem; } @media (max-width: 991px) { .pc-bento { grid-auto-rows: 13rem; gap: 1rem; } .pc-tile-hero { grid-column: span 12; grid-row: span 2; } .pc-tile-a, .pc-tile-b { grid-column: span 6; } .pc-tile-c, .pc-tile-d, .pc-tile-e { grid-column: span 4; } } @media (max-width: 620px) { .pc-bento { grid-auto-rows: 11.5rem; } .pc-tile-hero { grid-row: span 2; } .pc-tile-a, .pc-tile-b, .pc-tile-c, .pc-tile-d, .pc-tile-e { grid-column: span 6; } .pc-tile-hero .pc-tile-title { font-size: 1.7rem; } .pc-tile-wide .pc-tile-title { font-size: 1.5rem; } } /* six equal department tiles (the arch cards' information, without the arch) */ .pc-bento.pc-six { grid-auto-rows: 17rem; } .pc-bento.pc-six .pc-tile { grid-column: span 4; } @media (max-width: 991px) { .pc-bento.pc-six .pc-tile { grid-column: span 6; } } @media (max-width: 620px) { .pc-bento.pc-six { grid-auto-rows: 13rem; } .pc-bento.pc-six .pc-tile { grid-column: span 12; } } /* Text Novel: heading, then the deer photo in a frame beside a first-page excerpt. The photo used to run full-bleed at 3:2 (about 1000px tall on a desktop); it now sits in the container, capped in height, with the story doing the pulling. */ /* the blue band is a torn-paper vector: show BOTH tears (cover cropped the bottom one) and let it sit over the deer sky */ .section.journey { padding-bottom: 5rem !important; background-size: 100% 100% !important; z-index: 2; } .section.discover.pc-deer { position: relative; padding: 8rem 1.5rem 6rem !important; background-color: #1a1020 !important; background-image: none !important; overflow: hidden; margin-top: -4.5rem; } .pc-deer-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: none !important; width: 100% !important; margin: 0 0 2.5rem !important; padding: 0 !important; } .pc-deer-copy .why-travel-block-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; width: min(56rem, 100%); } .pc-deer-copy .experiences-heading-block, .pc-deer-copy .experiences-heading-block.max-width { max-width: none; width: 100%; text-align: center; } .section.discover.pc-deer .experiences-text { color: #fff; text-align: center; text-shadow: 0 2px 28px rgba(20, 8, 40, .55); } .section.discover.pc-deer .hero-badga-text.tex-change { color: var(--pc-accent) !important; } .pc-deer-copy .experiences-block { justify-content: center; } .pc-deer-frame { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr); gap: 0; width: min(72rem, 100%); margin: 0 auto; border-radius: 22px; overflow: hidden; background: #241530; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 80px rgba(0,0,0,.45); } .pc-deer-shot { display: block; line-height: 0; min-height: 100%; } /* Two pictures on one frame. The deer sets the mood and the emberlight sets the hook, so the frame holds the deer for seven seconds and Anita for five, then goes back. Twelve seconds round: 58.33% is the seventh second, 65% the end of the fade, 93.33% where the fade home begins. */ .pc-deer-swap { position: relative; } .pc-deer-swap img { position: absolute; inset: 0; } .pc-deer-swap .pc-swap-a { position: relative; animation: pc-swap-out 12s ease-in-out infinite; } .pc-deer-swap .pc-swap-b { opacity: 0; object-position: 50% 28%; animation: pc-swap-in 12s ease-in-out infinite; } @keyframes pc-swap-out { 0%,58.33% { opacity: 1 } 65%,93.33% { opacity: 0 } 100% { opacity: 1 } } @keyframes pc-swap-in { 0%,58.33% { opacity: 0 } 65%,93.33% { opacity: 1 } 100% { opacity: 0 } } @media (prefers-reduced-motion: reduce) { .pc-deer-swap .pc-swap-a, .pc-deer-swap .pc-swap-b { animation: none; } .pc-deer-swap .pc-swap-b { display: none; } } /* the line she hears, set apart from the prose around it */ .pc-deer-line { font-style: italic; color: #e6d6ff !important; } .pc-deer-story p.pc-deer-line::first-letter { font-size: inherit; float: none; padding: 0; color: inherit; } .pc-deer-shot img, .pc-deer-shot video { display: block; width: 100%; height: 100%; min-height: 26rem; max-height: 30rem; object-fit: cover; object-position: 50% 45%; background: #2a1555; } .pc-deer-story { text-align: left; margin: 0; padding: 2.5rem 2.5rem 2.25rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; color: #f3ecff; font-family: Georgia, "Times New Roman", serif; } .pc-deer-story figcaption { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .25rem; font-family: "Inter Tight", sans-serif; } .pc-deer-kicker { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #c8a0e8; font-weight: 600; } .pc-deer-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; color: #fff; } .pc-deer-story p { margin: 0; font-size: 1.06rem; line-height: 1.65; color: rgba(243,236,255,.88); } .pc-deer-story p:first-of-type::first-letter { font-size: 2.6em; line-height: .85; float: left; padding: .12em .1em 0 0; color: #c8a0e8; } .pc-deer-more { align-self: flex-start; margin-top: .5rem; padding: .7rem 1.2rem; border-radius: 999px; background: #fff; color: #1a1020; text-decoration: none; font: 600 .92rem "Inter Tight", sans-serif; transition: transform .2s, background .2s; } .pc-deer-more:hover { background: #c8a0e8; transform: translateY(-1px); } @media (max-width: 900px) { .pc-deer-frame { grid-template-columns: 1fr; } .pc-deer-shot img, .pc-deer-shot video { min-height: 0; height: 18rem; max-height: none; } .pc-deer-story { padding: 1.75rem 1.5rem 1.6rem; } } @media (max-width: 767px) { .section.journey { background-size: auto 100% !important; background-position: 50% 0 !important; } .section.discover.pc-deer { margin-top: -3rem; padding: 7.5rem 1rem 3.5rem !important; } } /* ---- Departments, Pixar-style showcase: square posters, 8px gaps, title treatments ---- */ .px-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 19rem; gap: 8px; margin: 3rem auto 0; max-width: 1200px; } .px-w8 { grid-column: span 8; } .px-w4 { grid-column: span 4; } .px-poster { position: relative; display: block; overflow: hidden; background: #0d0a16; color: #fff; text-decoration: none; border-radius: 0; box-shadow: none; } .px-poster > img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; animation: px-breathe 14s ease-in-out infinite; } /* Ken Burns: each poster slowly zooms in and back out; staggered so the six never move in lockstep; hover holds the frame */ @keyframes px-breathe { 0% { transform: scale(1); } 50% { transform: scale(1.09); } 100% { transform: scale(1); } } .px-poster:nth-child(1) > img { animation-delay: 0s; } .px-poster:nth-child(2) > img { animation-delay: -4s; } .px-poster:nth-child(3) > img { animation-delay: -9s; } .px-poster:nth-child(4) > img { animation-delay: -2s; } .px-poster:nth-child(5) > img { animation-delay: -11s; } .px-poster:nth-child(6) > img { animation-delay: -6s; } /* the breathe keeps going under the cursor, Aimar, Sep 5 */ @media (prefers-reduced-motion: reduce) { .px-poster > img { animation: none; } } .px-poster::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; } .px-wide { height: 100%; } .px-wide::after { background: linear-gradient(180deg, rgba(8,6,16,0) 60%, rgba(8,6,16,.25) 100%); } .px-tile { height: 100%; } .px-tile::after { background: linear-gradient(180deg, rgba(8,6,16,0) 60%, rgba(8,6,16,.25) 100%); } .px-feature { height: 100%; } .px-feature::after { background: linear-gradient(180deg, rgba(8,6,16,0) 60%, rgba(8,6,16,.25) 100%); } .px-text { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; left: 3.5rem; top: 50%; transform: translateY(-50%); max-width: 42%; } .px-tile .px-text { left: 1.5rem; right: 1.5rem; max-width: none; align-items: center; text-align: center; } .px-lock { display: inline-flex; align-items: baseline; gap: .35rem; font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.5); } .px-lock i { font-family: "Kaushan Script", cursive; font-style: normal; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; text-transform: none; } .px-lock em { font-style: normal; opacity: .7; } .px-title { font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 3rem; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; color: var(--c, #fff); text-shadow: 0 0 22px color-mix(in srgb, var(--c, #fff) 55%, transparent), 0 3px 0 rgba(0,0,0,.25), 0 12px 30px rgba(0,0,0,.55); } .px-title.px-script { font-family: "Kaushan Script", cursive; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 3.5rem; line-height: 1.05; } .px-tile .px-title { font-size: 2rem; } .px-sub { margin-top: .35rem; font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.88); text-shadow: 0 1px 10px rgba(0,0,0,.5); } @media (max-width: 991px) { .px-grid { grid-auto-rows: 15rem; } .px-text { left: 2.5rem; max-width: 55%; } .px-title { font-size: 3rem; } .px-title.px-script { font-size: 3.4rem; } .px-tile .px-title { font-size: 1.9rem; } } @media (max-width: 620px) { /* the same wide/narrow grid as the desktop, only smaller, Aimar, Sep 5 */ .px-grid { grid-auto-rows: 7.5rem; gap: 4px; } .px-wide::after { background: linear-gradient(90deg, rgba(8,6,16,.9) 0%, rgba(8,6,16,.7) 45%, rgba(8,6,16,.15) 100%); } .px-text { left: 1.5rem; max-width: 80%; } .px-title { font-size: 1.3rem; } .px-title.px-script { font-size: 1.5rem; } .px-tile .px-title { font-size: 1rem; } .px-text { left: .8rem; right: .8rem; max-width: none; } .px-tile .px-text { left: .5rem; right: .5rem; } .px-sub { font-size: .5rem; letter-spacing: .18em; } .px-lock { font-size: .6rem; } } /* Footer socials: Instagram as inline SVG, sized like the template's YouTube webp */ .social-link svg.pc-ig { width: 100%; height: auto; display: block; } /* Short Films tile carries the MOYO preview clip (scarf scene); the film itself moves, so no Ken Burns on it */ .px-poster > video.px-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; background: #0d0a16; } /* MOYO card in Worlds carries the scarf clip; same box as the card image */ video.featured-main-image { display: block; background: #0d0a16; } /* Hero: two pills side by side (Enter the studio · Watch on YouTube, moved down from the navbar) */ .section.hero .hero-buttton-block { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; } /* Phone: everything in the hero ~20% smaller */ @media (max-width: 479px) { .section.hero { padding-top: 6.5rem; padding-bottom: 4.5rem; } .section.hero .hero-heaidng { font-size: 1.9rem; line-height: 1.15; } .section.hero .hero-paragraph-text { font-size: .875rem; line-height: 1.45; max-width: 19rem; } .section.hero .hero-badga-block { max-width: none; padding: 0; } .section.hero .hero-badga-text { font-size: 13px !important; letter-spacing: .22em; white-space: normal; } .section.hero .hero-badga-text::before { width: 20px; margin-right: 10px; } .section.hero .hero-buttton-block { margin-top: 1.5rem; justify-content: center; } .section.hero .primary-btn { padding: .3rem .3rem .3rem 1.1rem; } .section.hero .btn-pill-text { font-size: .875rem; } .section.hero .button-text-pill { height: 1.15rem; } .section.hero .button-arrow-block { width: 2.1rem; height: 2.1rem; } } /* ---- Phone: Worlds cards swipe as a carousel; the sections read centred ---- */ @media (max-width: 767px) { .section.featured-tours .featured-item-block { display: flex; flex-wrap: nowrap; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -1.25rem; padding: 1.5rem 1.25rem 1.5rem; } .section.featured-tours .featured-item-block::-webkit-scrollbar { display: none; } .section.featured-tours .featured-item { flex: 0 0 82%; max-width: 82%; scroll-snap-align: center; transform: none !important; margin: 0 !important; } .section.featured-tours .featured-item .w-dyn-list, .section.featured-tours .featured-item .w-dyn-items, .section.featured-tours .featured-item .w-dyn-item, .section.featured-tours .featured-item-content-wrpp { width: 100%; } .section.featured-tours .featured-item-content-wrpp { text-align: left; } /* centring: every block in these sections stacks centred */ .section.featured-tours, .section.journey, .section.review, .section.blog, .section.footer, .section.why-travelers { text-align: center; } .section.featured-tours .featured-left-block, .section.featured-tours .featured-left-block div, .section.journey .journey-block div, .section.journey .journey-block, .section.review .review-block div, .section.review .review-block, .section.blog .blog-block div, .section.blog .blog-block, .section.footer .footer-left-block, .section.footer .footer-left-block div, .section.footer .footer-menu-block, .section.footer .footer-menu-block div { align-items: center; justify-content: center; } .section [class*="badga-block"], .section [class*="badga-block-wrpp"] { margin-left: auto; margin-right: auto; } .section .primary-button, .section .primary-button.left, .section .primary-button.right { display: flex; justify-content: center; } .section.footer .footer-left-paragrph, .section.journey .journey-paragraph, .section.review .review-paragraph, .section.blog .blog-paragraph { margin-left: auto; margin-right: auto; } .section.footer .social-icon-block { justify-content: center; } .section.footer .footer-menu-item-block { justify-items: center; } .section.footer .coppy-right-blcok, .section.footer .coppy-right-blcok > div { text-align: center; justify-content: center; align-items: center; margin-left: auto; margin-right: auto; width: 100%; } } /* ====================================================================== MIMI's brief, Sep 5 2026. Reference: Studio Kiln (library/studio-kiln-com). Eight rules, numbers from Kiln's DNA. Bank atoms pasted: reveal-up, glide, scroll-cue, link-dim, project-tile geometry. Overrides only; the template CSS is untouched. ====================================================================== */ :root { --salmon-orange: #FF6B00; --pc-ink: #0D0A16; --pc-paper: #fff; --pc-accent: #FF6B00; } /* 1. reveal law, the 93% line, once */ .rv { opacity: 0; transform: translateY(24px); transition: opacity .4s ease, transform .4s ease; } .rv.in { opacity: 1; transform: none; } /* 2. rhythm, one padding, hero is one viewport */ .section { padding: 120px 0 !important; background-color: var(--pc-paper) !important; } .section.hero { padding: 0 !important; min-height: 100vh; display: grid; align-content: end; padding-bottom: 14vh !important; background-color: var(--pc-ink) !important; } .section.cta { padding: 0 !important; } .section.footer { background-color: #F7F0E7 !important; padding: 120px 0 !important; } /* 3. type ladder, Inter Tight only; 64 / 18 / 16 / 14; eyebrows mono .32em */ .hero-badga-text, .text-font-change, .tex-change, .experiences-text, .pc-tile-tag { font-family: "Inter Tight", sans-serif !important; } .hero-badga-text { font: 500 18px/1 ui-monospace, "JetBrains Mono", Menlo, monospace !important; text-transform: uppercase; letter-spacing: .3em; color: var(--pc-accent) !important; white-space: nowrap; } .hero-badga-block { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .section.hero .hero-badga-block { max-width: none; } .hero-heaidng { font-size: 64px !important; font-weight: 400 !important; line-height: 1.05 !important; letter-spacing: -.02em; } .experiences-text, .featured-heading, .review-heaidng-text { font-size: 18px !important; font-weight: 600 !important; line-height: 1.2 !important; } .pc-tile-title { font-size: 18px !important; font-weight: 600 !important; } .pc-tile-sub, .pc-tile-tag { font-size: 14px !important; font-weight: 400 !important; opacity: 1; } /* 4. palette, paper, ink, one orange; torn paper and pastel fields go */ .hero-shap, .top-shap, .buttom-shap, .shap, .review-image-shap, .line-shap { display: none !important; } .pc-tile-tag { background: var(--pc-accent) !important; color: var(--pc-ink) !important; border-radius: 0 !important; box-shadow: none !important; padding: 8px 10px !important; } .pc-ico { background: var(--pc-paper) !important; box-shadow: none !important; } /* 5. hero, the art stays, a .35 scrim carries the words */ .section.hero { position: relative; } .section.hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); z-index: 1; pointer-events: none; } .section.hero > .w-layout-blockcontainer { position: relative; z-index: 2; } .bk-cue { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 3; display: grid; justify-items: center; gap: 12px; color: #fff; opacity: calc(clamp(0, (0.16 - var(--p, 0)) * 12, 1)); pointer-events: none; } .bk-cue span { font: 400 14px/1 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .32em; } .bk-cue i { width: 26px; height: 42px; border: 1px solid rgba(255,255,255,.5); display: grid; justify-items: center; padding-top: 6px; } .bk-cue i::before { content: ""; width: 6px; height: 6px; background: #fff; animation: bk-cue-drop 1.8s ease-in-out infinite; } @keyframes bk-cue-drop { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(18px); opacity: 1; } } /* 6. work grid, Kiln's tile: two columns of 45.8vw, 2.8vw gutters, 1:1 / 1.5:1, radius 0 */ .pc-bento { grid-template-columns: 45.8vw 45.8vw !important; column-gap: 2.8vw !important; row-gap: 10vh !important; grid-auto-rows: auto !important; width: 94.4vw; margin-left: calc(50% - 47.2vw); } .pc-tile, .pc-tile-hero, .pc-tile-a, .pc-tile-b, .pc-tile-c, .pc-tile-d, .pc-tile-e, .pc-tile-wide { grid-column: span 1 !important; grid-row: span 1 !important; } .pc-tile { aspect-ratio: 1 / 1; } .pc-tile:nth-child(even) { aspect-ratio: 1.5 / 1; } .pc-ico, .primary-button, .featured-image, .featurd-image-left, .map-image, .descover-left-image, .review-image, .cta-image, .review-adventor, img, .w-slider-dot { border-radius: 0 !important; box-shadow: none !important; } /* 7–8. motion and hover, opacity only; nothing else moves */ @media (hover: hover) and (pointer: fine) { /* the department tiles keep their own hover (lift + shadow), Aimar, Sep 5 */ .menu-link, .section.footer a, .social-link { transition: opacity .5s ease; } .menu-link:hover, .section.footer a:hover, .social-link:hover { opacity: .4; } } .menu-link.w--current { color: var(--pc-ink) !important; } .menu-link { min-height: 44px; display: inline-flex !important; align-items: center; padding: 0 12px !important; } .w-slider-dot { width: 44px !important; height: 44px !important; margin: 0 !important; background-clip: content-box; padding: 18px; } @media (max-width: 640px) { .section { padding: 72px 0 !important; } .section.hero { padding-bottom: 10vh !important; } .pc-bento { grid-template-columns: 1fr !important; width: 100%; margin-left: 0; row-gap: 40px !important; } .pc-tile, .pc-tile:nth-child(even) { aspect-ratio: 4 / 5; } .hero-heaidng { font-size: 40px !important; } } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .bk-cue { display: none; } } /* pass 2, what the first render still showed */ /* the torn paper stays on the novels band, compact, Aimar, Sep 5 */ .journey { padding: 64px 0 56px !important; background-size: 100% 100% !important; } .experiences-tex, .user-name, .text-span { font-family: "Inter Tight", sans-serif !important; font-style: normal !important; } .text-span, .cta-heading { font-size: 64px !important; line-height: 1.05 !important; font-weight: 400 !important; } /* the rolling counter's slot height is tied to its 100px digits, the one number kept at the template size */ /* the SplitText line masks were measured with Kaushan's metrics; Inter needs a hair less height to clear them */ .experiences-tex { font-size: 56px !important; line-height: 1.1 !important; } /* accent is a mark, never a text colour: orange on white is 2.86:1 (MIMI's own number) */ .hero-badga-text { color: var(--pc-ink) !important; } .hero-badga-text::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--pc-accent); vertical-align: middle; margin-right: 12px; } .section.hero .hero-badga-text { color: #fff !important; } .text-span { color: var(--pc-ink) !important; } .pc-deer .hero-badga-text { color: var(--pc-accent) !important; } .section.cta .primary-button, .section.cta .primary-button * { color: var(--pc-ink) !important; } /* headings are one size: the accent word inherits, no 56px word inside an 18px line */ .experiences-text, .featured-heading, .review-heaidng-text { font-size: 40px !important; line-height: 1.1 !important; font-weight: 600 !important; } .experiences-tex, .experiences-text .text-span, .featured-heading .text-span { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; } .gsap_split_line { overflow: visible !important; } .pc-tile { border-radius: 0 !important; } /* the deer sits under the torn paper: the band's tears are transparent, so no white behind them, and the deer tucks up under the bottom tear */ .section.journey { background-color: transparent !important; position: relative; z-index: 2; } .section.discover.pc-deer { margin-top: -9rem !important; } @media (max-width: 767px) { .section.discover.pc-deer { margin-top: -6rem !important; } } /* nav: burger hugs the right edge on desktop (the 21rem menu column centred it) */ @media (min-width: 992px) { .nav-menu .menu-item { align-items: flex-end; margin-left: auto; } /* The sheet opened 126px down and 16px in, floating in the middle of the hero with no relationship to the button that opened it. It hangs off the corner now, just under the burger and flush with the same edge. */ .nav-menu .menu-item-wrapper { right: 12px !important; top: 4.6rem !important; width: 21rem !important; } } /* Journal: the MOYO card is a background photo; centred it beheaded the boy. Anchor the top. */ .main-image-blog[style*="moyo.webp"] { background-position: 50% 0 !important; background-size: cover !important; } /* The house mark between the departments and the worlds: a quiet seam, not a section */ .pc-sigband { display: flex; justify-content: center; align-items: center; padding: 1rem 1.5rem 0; background: #fff; } .pc-sigband a { display: block; line-height: 0; } .pc-sigband img { height: 11rem; width: auto; display: block; filter: drop-shadow(0 12px 30px rgba(146, 98, 214, .25)); } @media (max-width: 767px) { .pc-sigband img { height: 7.5rem; } .pc-sigband { padding-top: .5rem; } } /* Hero without buttons: the description carries the weight, so it gets room to breathe */ .section.hero .hero-paragraph-text { max-width: 34rem; font-size: 1.08rem; line-height: 1.6; } @media (max-width: 767px) { .section.hero .hero-paragraph-text { max-width: 22rem; margin: 0 auto; font-size: .98rem; } } /* Phone menu: a sheet that slides in from the right edge instead of a dropdown under the burger. The interaction engine toggles display and writes an inline transform; the animation outranks the inline value, so the slide plays every time the sheet appears. */ @media (max-width: 767px) { .nav-menu .menu-item-wrapper { position: fixed !important; inset: 0 0 0 auto !important; width: min(20rem, 84vw) !important; max-width: none !important; height: 100dvh; padding-top: 5.5rem; box-sizing: border-box; overflow-y: auto; border-radius: 0 !important; box-shadow: -24px 0 60px rgba(0,0,0,.45); animation: pc-menu-in .42s cubic-bezier(.22,.9,.26,1) both; } @keyframes pc-menu-in { from { transform: translate3d(100%, 0, 0); opacity: .6; } to { transform: translate3d(0, 0, 0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .nav-menu .menu-item-wrapper { animation: none; } } } /* Phone hero: the scroll cue is a desktop gesture; with the longer description it rode over the last line */ @media (max-width: 767px) { .section.hero .bk-cue { display: none !important; } } /* ---- Phone: Worlds, heading, then the cards, then the button; arrows on the card edges ---- */ @media (max-width: 767px) { .section.featured-tours .featured-tours-block-wrapper { display: flex; flex-direction: column; } .section.featured-tours .featured-tours-block { display: contents; } .section.featured-tours .featured-left-block { order: 1; } .section.featured-tours .featured-itme-wrapper { order: 2; position: relative; } .section.featured-tours .featured-button-block { order: 3; display: flex; justify-content: center; margin-top: 1.75rem; } .pc-car-arrow { position: absolute; top: 34%; z-index: 4; width: 2.6rem; height: 2.6rem; border-radius: 999px; border: 0; background: rgba(255,255,255,.94); color: #1a1020; box-shadow: 0 8px 22px rgba(0,0,0,.28); display: grid; place-items: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; transition: transform .18s, opacity .2s; } .pc-car-arrow:active { transform: scale(.94); } .pc-car-arrow svg { width: 18px; height: 18px; } .pc-car-arrow.prev { left: -.35rem; } .pc-car-arrow.next { right: -.35rem; } .pc-car-arrow[disabled] { opacity: .35; pointer-events: none; } } @media (max-width: 767px) { .section.featured-tours .featured-button-block .primary-button.right { margin: 0 auto; justify-content: center; } } @media (max-width: 767px) { .section.featured-tours .featured-button-block { align-self: center !important; justify-self: center !important; width: auto; } } /* Journal: the Lion card shows Kito and the cub on the savanna road; keep both faces in frame */ .main-image-blog[style*="kito-savanna.webp"] { background-position: 38% 55% !important; background-size: cover !important; } /* ---- How we make it → Lisolo Novel promotion: lockup, pitch, install buttons ---- */ .pc-app-lockup { display: flex; align-items: center; gap: .9rem; margin: 1.1rem 0 .9rem; } .pc-app-lockup img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 10px 26px rgba(20, 8, 40, .28); flex: 0 0 auto; } .pc-app-lockup div { display: flex; flex-direction: column; gap: .2rem; } .pc-app-name { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; color: var(--pearl-black); } .pc-app-sub { font-size: .82rem; color: rgba(29, 19, 48, .62); } .pc-getrow { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.4rem; } .pc-get { display: inline-flex; align-items: center; gap: .7rem; padding: .6rem 1.2rem .6rem .95rem; border-radius: 14px; background: #1d1330; color: #fff; border: 1px solid #1d1330; cursor: pointer; font-family: "Inter Tight", sans-serif; text-align: left; transition: transform .18s, background .18s, box-shadow .18s; -webkit-tap-highlight-color: transparent; } .pc-get:hover { transform: translateY(-2px); background: #2b1c46; box-shadow: 0 12px 26px rgba(29, 19, 48, .28); } /* the reading door sits on the same pill as the two install buttons */ .pc-get-read { text-decoration: none; color: inherit; } .pc-get svg { flex: 0 0 auto; } .pc-get span { display: flex; flex-direction: column; line-height: 1.15; } .pc-get small { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; } .pc-get b { font-size: .98rem; font-weight: 600; white-space: nowrap; } .pc-get-web { font: 600 .9rem "Inter Tight", sans-serif; color: var(--pearl-black); text-decoration: none; border-bottom: 1px solid rgba(29,19,48,.3); padding-bottom: 1px; margin-left: .3rem; } .pc-get-web:hover { border-color: var(--pearl-black); } .pc-getnote { margin: .8rem 0 0; font-size: .86rem; color: rgba(29, 19, 48, .7); max-width: 34rem; } @media (max-width: 767px) { .pc-lisolo .pc-app-lockup { justify-content: center; text-align: left; } .pc-getrow { justify-content: center; } .pc-get { padding: .55rem 1rem .55rem .85rem; } .pc-get-web { width: 100%; text-align: center; margin: .4rem 0 0; border: 0; } .pc-getnote { margin-left: auto; margin-right: auto; } } /* Closing call: one voice, one weight, one word lit in the accent, no script font mid-sentence */ .section.cta .cta-heaidng { font-family: "Inter Tight", sans-serif !important; font-weight: 800 !important; letter-spacing: -.035em !important; line-height: .98 !important; text-wrap: balance; } .section.cta .cta-heaidng .text-span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; color: var(--pc-accent) !important; } .pc-cta-sub { margin: 1.4rem auto 0; max-width: 30rem; text-align: center; font: 500 1.08rem/1.55 "Inter Tight", sans-serif; color: rgba(29, 19, 48, .66); } @media (max-width: 767px) { .pc-cta-sub { font-size: .98rem; max-width: 22rem; } } /* the novels band: the purple cloud sky from Lisolo Novel plays behind it (the torn blue paper is gone); the copy goes white to sit on it, Aimar, Sep 6 */ .section.journey { background-image: none !important; background-color: #2a1555 !important; overflow: hidden; padding: 6rem 0 5.5rem !important; } .pc-journey-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; } .section.journey > .main-container { position: relative; z-index: 1; } .section.journey h2, .section.journey .experiences-tex, .section.journey .hero-badga-text { color: #fff !important; text-shadow: 0 2px 24px rgba(20, 8, 40, .45); } .section.discover.pc-deer { margin-top: 0 !important; } /* the sky drifts: the loop is slow, so the frame itself pans and breathes on top of it */ .pc-journey-sky { width: 120%; height: 120%; left: -10%; top: -10%; animation: pc-sky-drift 38s ease-in-out infinite alternate; will-change: transform; } @keyframes pc-sky-drift { from { transform: translate3d(-4%, 0, 0) scale(1); } to { transform: translate3d(4%, -2%, 0) scale(1.06); } } /* the little novel agent from Lisolo Novel floats over the band */ .pc-novel-agent { position: absolute; z-index: 2; right: 5%; top: 1.5rem; width: 132px; height: 132px; pointer-events: none; filter: hue-rotate(270deg) saturate(1.5) brightness(1.3); animation: pc-agent-float 6s ease-in-out infinite; } .pc-novel-agent dotlottie-wc { display: block; width: 100%; height: 100%; opacity: 0; transform: scale(.86) translateY(10px); filter: blur(18px); transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s cubic-bezier(.2,.8,.25,1); } .pc-novel-agent.on dotlottie-wc { opacity: 1; transform: none; filter: none; } .pc-novel-agent canvas { display: block; width: 100% !important; height: 100% !important; } @keyframes pc-agent-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-16px) rotate(2deg); } } @media (max-width: 991px) { .pc-novel-agent { width: 96px; height: 96px; right: 4%; top: 1rem; } } @media (prefers-reduced-motion: reduce) { .pc-journey-sky, .pc-novel-agent { animation: none; } .pc-novel-agent dotlottie-wc { transform: none; filter: none; } } /* every section title reads like the closing call: Inter Tight 800, tight, one weight, same size; the small labels lose their dash and take the same face, Aimar, Sep 6 */ .hero-badga-text::before { display: none !important; } .hero-badga-text { font: 800 1.15rem/1.1 "Inter Tight", sans-serif !important; text-transform: none; letter-spacing: -.02em !important; white-space: normal; } .experiences-text, .featured-heading, .review-heaidng-text, .featured-headig-block h2 { font-family: "Inter Tight", sans-serif !important; font-size: var(--_spacing---spacing-6xl) !important; font-weight: 800 !important; letter-spacing: -.035em !important; line-height: .98 !important; text-wrap: balance; } .experiences-tex, .experiences-text .text-span, .featured-heading .text-span, .featured-headig-block h2 .experiences-tex { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } @media (max-width: 991px) { .experiences-text, .featured-heading, .review-heaidng-text, .featured-headig-block h2 { font-size: var(--_typography---font-size-xl) !important; } } @media (max-width: 479px) { .experiences-text, .featured-heading, .review-heaidng-text, .featured-headig-block h2 { font-size: var(--_typography---font-size-x) !important; } } /* Phone menu, pass 2: the sheet is one solid surface, not a card floating in a clear column; the page dims behind it, Aimar, Sep 6 */ @media (max-width: 767px) { .nav-menu .menu-item-wrapper { background: var(--pearl-black); padding-top: 6rem; padding-bottom: 2rem; box-shadow: 0 0 0 100vmax rgba(10, 4, 20, .6), -24px 0 60px rgba(0,0,0,.45); width: min(22rem, 100vw) !important; } .nav-menu .menu-item-wrapper .menu-item-content-block { border-radius: 0 !important; background: transparent !important; padding: 0 1.5rem 2rem !important; min-height: 100%; } .nav-menu .menu-item-wrapper .menu-item-content:last-child { border-bottom: 0; } } @media (max-width: 479px) { .nav-menu .menu-item-wrapper { width: 100vw !important; box-shadow: none; } } @media (max-width: 767px) { .nav-menu .menu-item-block { position: relative; z-index: 1000; } } /* the hero title takes the same face as every other title: Inter Tight 800, tight, the closing call's size, Aimar, Sep 6 */ .section.hero .hero-heaidng { font-family: "Inter Tight", sans-serif !important; font-size: var(--_spacing---spacing-6xl) !important; font-weight: 800 !important; letter-spacing: -.035em !important; line-height: .98 !important; text-wrap: balance; } .section.hero .hero-heaidng .text-font-change { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; font-style: normal !important; line-height: inherit !important; letter-spacing: inherit !important; color: var(--pc-accent); } @media (max-width: 991px) { .section.hero .hero-heaidng { font-size: var(--_typography---font-size-xl) !important; } } @media (max-width: 479px) { .section.hero .hero-heaidng { font-size: var(--_typography---font-size-x) !important; } } /* all titles two notches smaller than the 7.5rem closing call: 4.5rem on desktop, Aimar, Sep 6 */ @media (min-width: 992px) { .experiences-text, .featured-heading, .review-heaidng-text, .featured-headig-block h2, .section.hero .hero-heaidng, .section.cta .cta-heaidng { font-size: 4.5rem !important; } } /* Phone hero: the dark shadow sits only at the bottom, under the copy, no side or top veils, no flat scrim, Aimar, Sep 6 */ @media (max-width: 767px) { .section.hero::before { background-image: linear-gradient(180deg, rgba(6, 4, 20, .6) 0%, rgba(6, 4, 20, .25) 16%, rgba(6, 4, 20, 0) 32%, rgba(6, 4, 20, 0) 50%, rgba(6, 4, 20, .55) 78%, rgba(6, 4, 20, .82) 100%) !important; } .section.hero::after { background: transparent !important; } } /* "How" section is now just the Lisolo Novel card from the novels page, no pitch, no slider, Aimar, Sep 6 */ .section.review.pc-appband { padding: 5rem 0 6rem !important; } .pc-appcard { max-width: 820px; margin: 0 auto; display: grid; gap: 22px; align-items: center; grid-template-columns: 100px minmax(0, 1fr); background: #1d1330; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 18px 24px; box-shadow: 0 40px 90px rgba(29, 19, 48, .35); text-align: center; } .pc-appicon { width: 100px; height: 100px; display: block; border-radius: 22px; box-shadow: 0 22px 50px rgba(0,0,0,.45); } .pc-appcopy { min-width: 0; padding-left: 22px; border-left: 1px solid rgba(200,160,232,.28); } .pc-app-eyebrow { display: block; font: 600 11px/1 "Inter Tight", sans-serif; letter-spacing: .24em; text-transform: uppercase; color: #c8a0e8; } .pc-app-title { font-family: "Inter Tight", sans-serif !important; font-size: clamp(1.5rem, 2.6vw, 1.95rem) !important; font-weight: 700 !important; letter-spacing: -.02em; line-height: 1.1; margin: 8px 0 0; color: #fff; } .pc-appcopy p { color: rgba(245,242,255,.72); line-height: 1.6; margin: 8px auto 0; font-size: 14.5px; max-width: 54ch; } .pc-appcard .pc-getrow { justify-content: center; gap: 12px; margin-top: 16px; } .pc-appcard .pc-get { background: linear-gradient(135deg, #9333ea, #c084fc); border: 0; color: #fff; padding: 12px 26px; border-radius: 999px; gap: 12px; font-weight: 600; white-space: nowrap; } .pc-appcard .pc-get:hover { background: linear-gradient(135deg, #9333ea, #c084fc); border-color: transparent; box-shadow: 0 12px 26px rgba(147,51,234,.4); } .pc-appcard .pc-get small { display: none; } .pc-appcard .pc-get b { font-size: 15px; } .pc-appcard .pc-getnote { color: rgba(245,242,255,.55); margin: 14px auto 0; font-size: 13px; } @media (max-width: 767px) { .pc-appcard { grid-template-columns: 82px minmax(0, 1fr); gap: 0; padding: 14px; border-radius: 20px; margin-inline: 1rem; } .pc-appicon { width: 76px; height: 76px; border-radius: 17px; } .pc-appcopy { padding-left: 14px; } .pc-app-eyebrow { font-size: 9px; letter-spacing: .18em; } .pc-app-title { font-size: 1.18rem !important; margin-top: 3px; } .pc-appcopy p { font-size: 11.5px; line-height: 1.4; margin-top: 4px; } .pc-appcopy-extra { display: none; } .pc-appcard .pc-getrow { gap: 8px; margin-top: 10px; } .pc-appcard .pc-get { padding: 12px 22px; gap: 6px; border-radius: 999px; font-size: 15px; } } /* a short line above the app card so the band doesn't read empty, Aimar, Sep 6 */ .pc-appband-lead { max-width: 30rem; margin: 0 auto 1.6rem; text-align: center; font: 500 1.15rem/1.45 "Inter Tight", sans-serif; color: rgba(29, 19, 48, .7); text-wrap: balance; } .section.review.pc-appband { padding-top: 3.5rem !important; } @media (max-width: 767px) { .pc-appband-lead { font-size: .98rem; max-width: 20rem; margin-bottom: 1.1rem; } } /* The novels-band sky is a still frame of the cloud loop, drifted by CSS, the