@charset "utf-8"; /* CSS Document */ @font-face { font-family: "Reuben"; src: url("founders_assets/fonts/Reuben.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Caveat"; src: url("founders_assets/fonts/Caveat-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /** {*/ /* margin: 0;*/ /* padding: 0;*/ /* box-sizing: border-box;*/ /*}*/ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* DEFAULT = dark mode look */ --page-bg: #0a0a0a; --page-section-bg: #0a0a0a; --page-text-main: #f5f5f5; --page-text-muted: #b1b1b1; --hero-title: #bbbbbb; /* cards / panels */ --page-card-bg: #0a0a0a; --page-card-soft-bg: #0a0a0a; /* accents (you can keep your current ones) */ --primary: #0a0a0a; --accent: #ff3366; --accent-hover: #ff1149; /* layout */ --container: 1400px; --gutter: 40px; /* special font */ --reuben-font: "Reuben", "Inter", sans-serif; --caveat-font: "Caveat", "Inter", sans-serif; } html { scroll-behavior: smooth; } section { scroll-margin-top: 70px; } body { font-family: 'Inter', sans-serif; background: var(--page-bg); color: var(--page-text-main); overflow-x: hidden; } /* When LIGHT theme is ON (template adds this class to ) */ body.tt-light-style-on { --page-bg: #ffffff; --page-section-bg: #ffffff; --page-text-main: #1E2722; --page-text-muted: #828282; --page-card-bg: #f7f7f7; --page-card-soft-bg: #f1f1f1; --hero-title: #464646; } /* ================= Founders Portfolio Isolation Fix ================= */ /* Prevent live website theme img max-width from breaking oversized artboard images */ .hero--founders img, .founders-guide-video img, .founders-cafe-intro img, .founders-palette img, .founders-brandbook-system img, .founders-world-bagel img, .founders-community img, .founders-good-social img, .founders-merch img, .founders-cap-section img, .founders-mug-story img { max-width: none; } /* But keep normal responsive image behavior for standard content images */ .hero-logo, .founders-cafe-intro__img, .founders-mug-story__image, .founders-mug-story__full-image, .cap-panel img { max-width: 100%; } /* Force portfolio sections to use full viewport width even inside live theme container */ .hero--founders, .founders-guide-video, .founders-cafe-intro, .founders-palette, .founders-brandbook-system, .founders-world-bagel, .founders-community, .founders-good-social, .founders-merch, .founders-cap-section, .founders-mug-story { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .hero--founders, .founders-guide-video, .founders-cafe-intro, .founders-palette, .founders-brandbook-system, .founders-world-bagel, .founders-community, .founders-good-social, .founders-merch, .founders-cap-section, .founders-mug-story { overflow: hidden; } /* ==================================================================== */ .logo-link { display: flex; align-items: center; text-decoration: none; transition: transform 0.3s ease; } .logo-link:hover { transform: scale(1.05); } .logo-svg { width: 40px; height: 40px; margin-right: 10px; } .logo-text { font-size: 28px; font-weight: 900; letter-spacing: -2px; background: linear-gradient(135deg, #fff, var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ================= HERO ================= */ .hero.hero--founders { position: relative; background: var(--page-section-bg); /* background: #ffffff; */ color: #1E2722; overflow: hidden; min-height: 95vh; display: flex; align-items: center; } .hero.hero--founders .hero-container { width: min(1400px, calc(100% - 100px)); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; column-gap: 30px; row-gap: 0; align-items: stretch; min-height: calc(65vh - 120px); padding: 60px 20px 40px; position: relative; z-index: 2; } .hero-left, .hero-right { display: flex; flex-direction: column; } .hero-left { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; } .hero-right { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; } .hero-bottom { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; align-items: center; margin-top: 36px; } .hero-bottom-left { display: flex; align-items: flex-end; } .hero-bottom-right { display: flex; justify-content: flex-end; align-items: flex-start; gap: 28px; flex-wrap: wrap; max-width: 56ch; } .hero-left--logo { justify-content: space-between; min-height: 100%; } .hero-logo-wrap { flex: 1; display: flex; align-items: flex-start; justify-content: flex-start; /* padding-top: 70px; */ } .hero-logo { width: clamp(220px, 24vw, 355px); max-width: 100%; height: auto; display: block; } .hero-right--content { justify-content: space-between; min-height: 100%; /* padding-top: 8px; */ } .hero-copy { max-width: 720px; padding-top: 0; } .hero-title { margin: 0 0 24px; font-size: 32px; line-height: 121%; font-weight: 400; letter-spacing: 0; color: var(--hero-title); /* color: #464646; */ } .hero-description { margin: 0; max-width: 60ch; font-size: 15px; font-weight: 400; line-height: 20px; color: #828282; } .hero-declare-container { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; } .hero-description-declare { margin: 0; font-size: 15px; font-weight: 400; line-height: 121%; color: #B1B1B1; } /* tablet */ @media (max-width: 991px) { .hero.hero--founders .hero-container { width: min(100%, calc(100% - 60px)); grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 32px; min-height: auto; } .hero-left { grid-column: 1; grid-row: 1; align-items: center; text-align: center; } .hero-right { grid-column: 1; grid-row: 2; text-align: center; } .hero-bottom { grid-column: 1; grid-row: 3; grid-template-columns: 1fr; row-gap: 14px; margin-top: 0; text-align: center; } .hero-bottom-left { display: none; } .hero-bottom-right { justify-content: center; align-items: center; text-align: center; } .hero-bottom-right { flex-direction: column; gap: 30px; max-width: unset; } .hero-copy { width: 100%; margin: 0 auto; } .hero-description { width: 100%; max-width: 600px; margin: 0 auto; } } /* mobile */ @media (max-width: 640px) { .hero.hero--founders .hero-container { width: calc(100% - 36px); row-gap: 28px; } .hero-logo { width: min(65vw, 300px); } .hero-title { margin-bottom: 18px; } .hero-declare-container { flex-direction: column; gap: 10px; } } /* ================= Founders Guide Video ================= */ .founders-guide-video { padding: 0; /* background: #ffffff; */ background: var(--page-section-bg); overflow: hidden; } .founders-guide-video__wrap { position: relative; width: 100%; overflow: hidden; background: #FFF6E7; /* background: #078f4f; */ } /* Desktop video layout */ .founders-guide-video__video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 940; object-fit: cover; object-position: center; background: #078f4f; } /* Mobile image hidden on desktop */ .founders-guide-video__mobile-img { display: none; } /* Mobile: hide video completely and show vertical image */ @media (max-width: 768px) { .founders-guide-video__video { display: none; } .founders-guide-video__mobile-img { display: block; width: 100%; aspect-ratio: 9 / 16; background-image: url("founders_assets/img/founders-guidebook-mobile.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #078f4f; } } /* ================= Founders Guide Video / Mobile Layout ================= */ .founders-guide-video { padding: 0; /* background: #ffffff; */ background: var(--page-section-bg); overflow: hidden; } .founders-guide-video__wrap { position: relative; width: 100%; overflow: hidden; background: #078f4f; } /* Desktop video */ .founders-guide-video__video { display: block; width: 100%; height: auto; aspect-ratio: 1920 / 940; object-fit: cover; object-position: center; background: #078f4f; } /* Hide mobile layout on desktop */ .founders-guide-mobile { display: none; } /* Mobile layout */ @media (max-width: 768px) { .founders-guide-video__video { display: none; } .founders-guide-mobile { display: block; position: relative; width: 100%; aspect-ratio: 375 / 545; overflow: hidden; background: #FFF6E7; } .founders-guide-mobile::before, .founders-guide-mobile::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* red background corner shapes */ /* .founders-guide-mobile::before { background: linear-gradient(135deg, #e83025 0 23%, transparent 23%), linear-gradient(315deg, #e83025 0 20%, transparent 20%); } */ .founders-guide-mobile__item { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; } .founders-guide-mobile__top-left { z-index: 1; width: 70%; left: 0; top: 0; } .founders-guide-mobile__top-right { z-index: 0; width: 93%; right: 0; top: 0; } /*--- deco lines style here ---*/ .founders-guide-mobile__deco-top { z-index: 0; width: 70%; right: 0; top: 11%; transform: rotate(1.62deg); } .founders-guide-mobile__deco-middle { z-index: 0; width: 20%; left: 0; top: 48%; /* transform: rotate(1.62deg); */ } .founders-guide-mobile__deco-bottom { z-index: 0; width: 70%; right: 8%; bottom: 9%; } /*-----------------------------*/ .founders-guide-mobile__character-left { z-index: 3; width: 47%; left: -5%; top: 1%; /* transform: rotate(0deg); */ } .founders-guide-mobile__cup { z-index: 3; width: 39%; right: 1%; top: 8%; /* transform: rotate(6deg); */ } .founders-guide-mobile__hashtag-1 { z-index: 4; width: 26%; left: 46%; top: 5%; /* transform: rotate(-12deg); */ } .founders-guide-mobile__hashtag-2 { z-index: 4; width: 20%; right: -3%; top: 32%; /* transform: rotate(18deg); */ } .founders-guide-mobile__logo { z-index: 5; width: 62%; left: 18%; top: 42%; } .founders-guide-mobile__brand { z-index: 4; width: 46%; left: 5%; bottom: 9.5%; } .founders-guide-mobile__character-right { z-index: 4; width: 50%; right: 0; bottom: 0; /* transform: rotate(-12deg); */ } .founders-guide-mobile__bottom-left { z-index: 1; width: 98%; left: 0; bottom: -1px; } .founders-guide-mobile__bottom-right { z-index: 0; width: 93%; right: 0; bottom: 0; } } /* ================= Founders Mobile Animation ================= */ @media (max-width: 768px) { .founders-guide-mobile__item { will-change: transform; backface-visibility: hidden; transform-style: preserve-3d; } /* Default: paused until JS adds .is-animated */ .founders-guide-mobile__character-left, .founders-guide-mobile__character-right, .founders-guide-mobile__cup, .founders-guide-mobile__brand, .founders-guide-mobile__hashtag-1, .founders-guide-mobile__hashtag-2, .founders-guide-mobile__top-left, .founders-guide-mobile__top-right, .founders-guide-mobile__bottom-left, .founders-guide-mobile__bottom-right { animation-play-state: paused; } /* Characters + cup: slight bottle shaking */ .founders-guide-mobile__character-left { transform-origin: 50% 50%; animation: foundersBottleShakeLeft 2.4s ease-in-out infinite; } .founders-guide-mobile__character-right { transform-origin: 50% 50%; animation: foundersBottleShakeRight 2.6s ease-in-out infinite; } .founders-guide-mobile__cup { transform-origin: 50% 70%; animation: foundersBottleShakeCup 1.6s ease-in-out infinite; } /* Brand + hashtags: zoom in/out from center */ .founders-guide-mobile__brand { transform-origin: center center; animation: foundersSoftPulse 2.2s ease-in-out infinite; } .founders-guide-mobile__hashtag-1 { transform-origin: center center; animation: foundersSoftPulseTilt1 2s ease-in-out infinite; } .founders-guide-mobile__hashtag-2 { transform-origin: center center; animation: foundersSoftPulseTilt2 2.15s ease-in-out infinite; } /* Background pieces: slight floating up/down */ .founders-guide-mobile__top-left, .founders-guide-mobile__top-right { animation: foundersBgFloat 2s ease-in-out infinite; } .founders-guide-mobile__bottom-left, .founders-guide-mobile__bottom-right { animation: foundersBottomBgFloat 2s ease-in-out infinite; } .founders-guide-mobile__top-right, .founders-guide-mobile__bottom-right { animation-duration: 4.6s; animation-delay: -1.2s; } .founders-guide-mobile__bottom-left { animation-duration: 3.3s; animation-delay: -0.7s; } /* Deco top has existing rotate, so use separate animation to preserve rotation */ /* .founders-guide-mobile__deco-top { transform-origin: center center; animation: foundersDecoTopFloat 4.2s ease-in-out infinite; animation-play-state: paused; } */ /* Play only when section is in view */ .founders-guide-mobile.is-animated .founders-guide-mobile__character-left, .founders-guide-mobile.is-animated .founders-guide-mobile__character-right, .founders-guide-mobile.is-animated .founders-guide-mobile__cup, .founders-guide-mobile.is-animated .founders-guide-mobile__brand, .founders-guide-mobile.is-animated .founders-guide-mobile__hashtag-1, .founders-guide-mobile.is-animated .founders-guide-mobile__hashtag-2, .founders-guide-mobile.is-animated .founders-guide-mobile__top-left, .founders-guide-mobile.is-animated .founders-guide-mobile__top-right, .founders-guide-mobile.is-animated .founders-guide-mobile__bottom-left, .founders-guide-mobile.is-animated .founders-guide-mobile__bottom-right { animation-play-state: running; } } /* Bottle-like shaking */ @keyframes foundersBottleShakeLeft { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-2px) rotate(-2.2deg); } 50% { transform: translateX(2px) rotate(2deg); } 75% { transform: translateX(-1px) rotate(-1.5deg); } } @keyframes foundersBottleShakeRight { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(2px) rotate(5.5deg); } 50% { transform: translateX(-2px) rotate(-5deg); } 75% { transform: translateX(1px) rotate(4.4deg); } } @keyframes foundersBottleShakeCup { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(1.5px) rotate(3.8deg); } 50% { transform: translateX(-1.5px) rotate(-2.8deg); } 75% { transform: translateX(1px) rotate(2.2deg); } } /* Brand / hashtag pulse */ @keyframes foundersSoftPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } @keyframes foundersSoftPulseTilt1 { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(-5deg); } } @keyframes foundersSoftPulseTilt2 { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.12) rotate(5deg); } } /* Background floating */ @keyframes foundersBgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* floating for bottom */ @keyframes foundersBottomBgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* Keep deco top original rotate */ @keyframes foundersDecoTopFloat { 0%, 100% { transform: rotate(1.62deg) translateY(0); } 50% { transform: rotate(1.62deg) translateY(-5px); } } /* Accessibility: stop animation when user prefers reduced motion */ @media (prefers-reduced-motion: reduce) { .founders-guide-mobile__item { animation: none !important; transform: none !important; } /* .founders-guide-mobile__deco-top { transform: rotate(1.62deg) !important; } */ } /* ================= Founders Cafe Intro ================= */ .founders-cafe-intro { padding: 95px 0 110px; background: var(--page-section-bg); /* background: #ffffff; */ overflow: hidden; } .founders-cafe-intro__wrap { width: min(1400px, calc(100% - 90px)); margin: 0 auto; display: grid; grid-template-columns: 0.95fr 1fr; align-items: center; column-gap: 90px; } .founders-cafe-intro__copy h2 { margin: 0 0 30px; color: #158246; font-size: clamp(32px, 2.45vw, 36px); line-height: 100%; font-weight: 400; font-family: var(--reuben-font); /* letter-spacing: -0.04em; */ } .founders-cafe-intro__copy p { margin: 0 0 22px; max-width: 560px; color: #8f8f8f; font-size: 20px; line-height: 25px; font-weight: 400; } .founders-cafe-intro__copy p:last-child { margin-bottom: 0; } .founders-cafe-intro__copy em { color: #088244; font-style: normal; font-weight: 500; } /* image wrapper */ .founders-cafe-intro__media { position: relative; width: 100%; padding-top: 36px; /* creates space for the tape */ display: flex; justify-content: center; } /* image */ .founders-cafe-intro__img { display: block; width: 100%; aspect-ratio: 480 / 354; object-fit: cover; object-position: center; } /* tape: fixed together with image because it is inside the media wrapper */ .founders-cafe-intro__tape { position: absolute; top: 6px; left: 50%; z-index: 3; width: 110px; height: auto; display: block; transform: translateX(-50%) rotate(-8deg); pointer-events: none; user-select: none; } .founders-cafe-intro__img { display: block; width: 100%; max-width: 575px; aspect-ratio: 82 / 61; /* aspect-ratio: 480 / 354; */ object-fit: cover; object-position: center; } /* tablet */ @media (max-width: 980px) { .founders-cafe-intro { padding: 80px 0 100px; } .founders-cafe-intro__wrap { width: calc(100% - 60px); grid-template-columns: 1fr; row-gap: 50px; } .founders-cafe-intro__copy { order: 2; text-align: center; } .founders-cafe-intro__copy p { max-width: 720px; margin: 0 auto; } .founders-cafe-intro__media { order: 1; max-width: 435px; margin: 0 auto; } } /* mobile */ @media (max-width: 640px) { .founders-cafe-intro { padding: 60px 0 80px; } .founders-cafe-intro__wrap { width: calc(100% - 36px); row-gap: 34px; padding: 0 20px; } .founders-cafe-intro__copy h2 { margin-bottom: 20px; font-size: 28px; } .founders-cafe-intro__copy p { font-size: 15px; line-height: 1.35; margin-bottom: 18px; } .founders-cafe-intro__media { padding-top: 28px; } .founders-cafe-intro__tape { width: 82px; top: 4px; transform: translateX(-50%) rotate(-8deg); } .founders-cafe-intro__img { aspect-ratio: 4 / 3; } } @media (max-width: 440px) { .founders-cafe-intro__copy h2 { margin: 0 auto 20px; max-width: 240px; /* max-width: 280px; */ } } /* ================= Founders Palette ================= */ .founders-palette { background: var(--page-section-bg); /* background: #ffffff; */ padding: 0; overflow: hidden; } .founders-palette__grid { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .founders-palette__card { min-height: 400px; display: grid; } .founders-palette__card--with-shades { grid-template-columns: 70% 30.5%; } .founders-palette__main { position: relative; padding: 35px 30px 25px; } .founders-palette__main--green { background: #008441; color: #ffffff; } .founders-palette__main--orange { background: #ee3400; color: #ffffff; } .founders-palette__main--pink { background: #e93a88; color: #ffffff; } .founders-palette__main--beige { background: #fff7e7; color: #008441; } .founders-palette__main h3 { margin: 0; font-size: 32px; line-height: 100%; font-weight: 700; /* letter-spacing: -0.02em; */ } .founders-palette__info { position: absolute; left: 30px; bottom: 25px; display: grid; grid-template-columns: auto 1fr; column-gap: 30px; font-size: 20px; line-height: 100%; font-weight: 400; } .founders-palette__shades { display: grid; grid-template-rows: repeat(5, 1fr); } .founders-palette__shades span { display: block; } @media (max-width: 1460px) { .founders-palette__info { font-size: 18px; } } @media (max-width: 1355px) { .founders-palette__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .founders-palette__card { min-height: 300px; } } /* Tablet */ @media (max-width: 900px) { .founders-palette__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .founders-palette__card { min-height: 260px; } .founders-palette__main h3 { font-size: 20px; } .founders-palette__info { font-size: 14px; } } /* Mobile */ @media (max-width: 640px) { .founders-palette__card { min-height: 200px; } .founders-palette__card--with-shades { grid-template-columns: 66% 34.5%; } .founders-palette__main { padding: 17px 18px 14px; } .founders-palette__main h3 { font-size: 16px; line-height: 1.12; } .founders-palette__info { left: 18px; bottom: 13px; column-gap: 15px; font-size: 12px; line-height: 1.15; } } @media (max-width: 470px) { .founders-palette__grid { grid-template-columns: 1fr; } .founders-palette__main { padding: 20px 25px 16px; } .founders-palette__info { left: 25px; bottom: 16px; } } /* ================= Founders Brandbook System ================= */ .founders-brandbook-system { background: #FFF5E6; overflow: hidden; padding: 50px 0 0; } .founders-brandbook-stage { position: relative; width: 100%; /* aspect-ratio: 1440 / 3500; */ aspect-ratio: 1440 / 2500; background: #FFF5E6; overflow: hidden; } .brandbook-deco-top { position: relative; left: 0; top: -1.65%; width: 32%; } .brandbook-deco-bottom { position: relative; left: -19%; top: 22%; width: 32%; transform: rotate(-1.62deg); } /* Brandbook section headings */ .brandbook-section-heading { position: absolute; text-align: center; pointer-events: none; user-select: none; z-index: 20; } .brandbook-section-heading h2 { margin: 0 0 8px; color: #FFF5E6; font-family: var(--reuben-font); font-size: 36px; line-height: 100%; font-weight: 400; /* letter-spacing: 0.01em; */ } .brandbook-section-heading p { margin: 0; color: #FFF5E6; font-size: 20px; line-height: 100%; font-weight: 400; } .brandbook-piece { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; } /* ================= Sticker Peel Effect ================= */ .sticker-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } .sticker-peel { --sticker-p: 10px; --sticker-peelback-hover: 20%; --sticker-peelback-active: 34%; --sticker-start: calc(-1 * var(--sticker-p)); --sticker-end: calc(100% + var(--sticker-p)); --sticker-rotate: 0deg; --peel-direction: 0deg; --sticker-shadow-opacity: 0.35; --drag-x: 0px; --drag-y: 0px; --flap-offset-x: 0%; --flap-offset-y: 0%; pointer-events: auto; cursor: grab; touch-action: none; overflow: visible; transform: translate3d(var(--drag-x), var(--drag-y), 0); transform-origin: center; will-change: transform; } .sticker-peel.is-dragging { cursor: grabbing; z-index: 999 !important; } .sticker-peel * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; } .sticker-container { position: relative; width: 100%; height: auto; overflow: visible; transform: rotate(var(--peel-direction)); transform-origin: center; } .sticker-main { position: relative; z-index: 2; width: 100%; height: auto; -webkit-clip-path: polygon( var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end) ); clip-path: polygon( var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end) ); transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1); filter: drop-shadow(2px 5px 7px rgba(0, 0, 0, var(--sticker-shadow-opacity))); } .sticker-image { display: block; width: 100%; height: auto; transform: rotate(var(--sticker-rotate)); pointer-events: none; } /* Peeled back side */ .sticker-flap { position: absolute; z-index: 3; width: 100%; height: 100%; left: 0; top: calc(-100% - var(--sticker-p) - var(--sticker-p)); clip-path: polygon( var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-start) var(--sticker-start) ); transform: translate(var(--flap-offset-x), var(--flap-offset-y)) scaleY(-1); transform-origin: bottom center; transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1), top 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .sticker-flap-image { display: block; width: 100%; height: auto; transform: rotate(var(--sticker-rotate)); filter: url(#stickerBackFill); opacity: 0.98; pointer-events: none; } /* subtle lighting on peeled part */ .sticker-flap::after { content: ""; position: absolute; inset: 0; background: transparent; /* background: linear-gradient( to bottom, rgba(255, 255, 255, 0.45), rgba(0, 0, 0, 0.12) ); */ mix-blend-mode: soft-light; pointer-events: none; } /* Hover / touch peel */ .sticker-peel:hover .sticker-main, .sticker-peel.touch-active .sticker-main { -webkit-clip-path: polygon( var(--sticker-start) var(--sticker-peelback-hover), var(--sticker-end) var(--sticker-peelback-hover), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end) ); clip-path: polygon( var(--sticker-start) var(--sticker-peelback-hover), var(--sticker-end) var(--sticker-peelback-hover), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end) ); } .sticker-peel:hover .sticker-flap, .sticker-peel.touch-active .sticker-flap { clip-path: polygon( var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-peelback-hover), var(--sticker-start) var(--sticker-peelback-hover) ); top: calc(-100% + 2 * var(--sticker-peelback-hover) - 1px); } /* Press peel */ .sticker-peel:active .sticker-main { clip-path: polygon( var(--sticker-start) var(--sticker-peelback-active), var(--sticker-end) var(--sticker-peelback-active), var(--sticker-end) var(--sticker-end), var(--sticker-start) var(--sticker-end) ); } .sticker-peel:active .sticker-flap { clip-path: polygon( var(--sticker-start) var(--sticker-start), var(--sticker-end) var(--sticker-start), var(--sticker-end) var(--sticker-peelback-active), var(--sticker-start) var(--sticker-peelback-active) ); top: calc(-100% + 2 * var(--sticker-peelback-active) - 1px); } .brandbook-drink-sticker, .brandbook-cup-sticker { --flap-offset-x: 0%; --flap-offset-y: -100%; } /* Top section */ .brandbook-person { width: 39%; right: 11%; top: 1.8%; z-index: 10; } .brandbook-drink-sticker { width: 8%; left: 43%; top: 14%; z-index: 12; } .brandbook-cup-sticker { width: 9%; right: 4%; top: 12%; z-index: 12; } .brandbook-photo-strip-desktop { width: 100%; left: 0; top: 0%; z-index: 4; } .brandbook-photo-strip-mobile { display: none; } .brandbook-about-copy { width: 38.5%; left: 8%; top: 7%; z-index: 11; } .brandbook-about-copy h2 { margin: 0 0 18px; color: #158246; font-size: 36px; line-height: 100%; font-weight: 400; font-family: var(--reuben-font); } .brandbook-about-copy p { margin: 0 0 14px; color: #000000; font-size: 20px; font-weight: 400; line-height: 100%; } .brandbook-about-copy strong { color: #EA3F32; font-weight: 400; } /* Background colour layers */ .brandbook-green-bg { width: 105%; left: -1%; top: 23.5%; z-index: 4; } .brandbook-green-pure-bg-mobile, .brandbook-pink-pure-bg-mobile, .brandbook-orange-pure-bg-mobile { display: none; } .brandbook-green-pure-bg-desktop { width: 100%; left: 0; top: 31%; z-index: 4; } .brandbook-pink-bg-desktop { width: 100%; left: 0; bottom: 35%; z-index: 4; } .brandbook-pink-bg-mobile { display: none; } .brandbook-pink-pure-bg-desktop { width: 100%; left: 0; bottom: 19%; z-index: 4; } .brandbook-orange-bg-top { width: 100%; left: 0; bottom: 12%; z-index: 4; } .brandbook-orange-pure-bg-desktop { width: 100%; left: 0; bottom: 10%; z-index: 4; } .brandbook-orange-bg-bottom { width: 100%; left: 0; bottom: 0%; z-index: 4; } /* Desktop position */ .brandbook-section-heading--green { width: 100%; left: 0%; top: 31%; } /* Green handwritten annotation notes */ .brandbook-note { z-index: 22; color: #FFF5E6; font-family: var(--caveat-font); text-align: center; transform-origin: center; } .brandbook-note p { margin: 0; font-size: 20px; line-height: 21px; font-weight: 400; white-space: nowrap; } .brandbook-curve { z-index: 21; overflow: visible; } .brandbook-curve path { fill: none; stroke: #FFF5E6; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; } .brandbook-curve--go path { fill: none; stroke: #158246; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* top section notes */ .brandbook-note--go p { color: #158246; font-size: 32px; } .brandbook-note--go { width: 26%; right: 0%; top: 3.8%; transform: rotate(-19.55deg); } .brandbook-curve--go { width: 11.1%; right: 9%; top: 4.6%; transform: rotate(-3.55deg); } /* Desktop: green section notes */ .brandbook-note--quirky { width: 28%; left: 10.8%; top: 35.5%; transform: rotate(-2deg); } .brandbook-curve--quirky { width: 5.1%; left: 24.4%; top: 37.6%; transform: rotate(12.71deg); } .brandbook-note--cutout { width: 20%; left: 8.2%; top: 47.8%; /* transform: rotate(-3deg); */ } .brandbook-curve--cutout { width: 4.3%; left: 21.2%; top: 46%; transform: rotate(-188deg); } .brandbook-note--imperfection { width: 18%; left: 74.6%; top: 37.6%; /* transform: rotate(-2deg); */ } .brandbook-curve--imperfection { width: 5.1%; right: 15.2%; top: 39.5%; transform: rotate(-35.43deg); } .brandbook-note--local { width: 20%; right: 15.8%; top: 51%; /* transform: rotate(-2deg); */ } .brandbook-curve--local { width: 1.5%; right: 28.4%; top: 49.4%; /* transform: rotate(-120deg); */ } /* Green icons one by one */ .green-witch-hat { width: 12%; left: 29%; top: 36%; z-index: 8; } .green-toy-car { width: 14%; left: 41%; top: 37.5%; z-index: 8; } .green-signboard { width: 14%; left: 57%; top: 35.5%; z-index: 8; } .green-pencil { width: 8%; left: 72%; top: 35.5%; z-index: 8; } .green-couple { width: 14.5%; left: 24%; top: 43.5%; z-index: 8; } .green-girl { width: 14%; left: 37%; top: 43%; z-index: 8; } .green-pizza { width: 13%; left: 49%; top: 43.5%; z-index: 8; } .green-dancer { width: 14.5%; left: 61%; top: 43%; z-index: 8; } /* .green-phone { width: 12%; left: 67%; top: 30%; z-index: 8; } */ .bakery-badge { width: 18%; left: 19%; bottom: 39%; z-index: 8; } /* Pink handwritten annotation notes */ /* Desktop: pink section notes */ .brandbook-note--outline { width: 20%; left: 8.8%; bottom: 34.5%; /* transform: rotate(-3deg); */ } .brandbook-curve--outline { width: 4.3%; left: 18.2%; bottom: 35.8%; transform: rotate(-188deg); } .brandbook-note--gradient { width: 18%; left: 71.6%; bottom: 33.5%; /* transform: rotate(-2deg); */ } .brandbook-curve--gradient { width: 2.8%; right: 20.2%; bottom: 34.8%; /* transform: rotate(-40.43deg); */ } /* Bakery icons one by one */ .bakery-cookie { width: 8%; left: 23%; top: 60%; z-index: 9; } .bakery-bagel { width: 8%; left: 33%; top: 59.5%; z-index: 9; } .bakery-croissant { width: 10%; left: 44%; top: 60.5%; z-index: 9; transform: rotate(-29.03deg); } .bakery-bagel2 { width: 8%; left: 57%; top: 60.5%; z-index: 9; } .bakery-sandwich { width: 11%; right: 23%; top: 59.5%; z-index: 9; } .bakery-cinnamon { width: 13%; left: 18%; top: 66.5%; z-index: 9; } .bakery-sandwich2 { width: 12%; left: 32%; top: 66.5%; z-index: 9; } .bakery-bread { width: 13%; left: 43%; top: 66.5%; z-index: 9; } .bakery-sandwich3 { width: 12%; left: 55%; top: 66.5%; z-index: 9; } .bakery-star { width: 10%; right: 21%; top: 67%; z-index: 9; } .food-badge { width: 18%; right: 16%; bottom: 17.8%; z-index: 8; } /* Orange handwritten annotation notes */ /* Desktop: orange section notes */ .brandbook-note--food { width: 20%; left: 20%; bottom: 16%; /* transform: rotate(-3deg); */ } .brandbook-curve--food { width: 4.3%; left: 29.6%; bottom: 13.8%; transform: rotate(20deg); } .brandbook-note--drinks { width: 18%; left: 71.6%; bottom: 13%; /* transform: rotate(-2deg); */ } .brandbook-curve--drinks { width: 4.8%; right: 19.2%; bottom: 11%; /* transform: rotate(-40.43deg); */ } /* Food icons one by one */ .food-pizza { width: 10%; left: 34%; top: 81%; z-index: 10; } .food-pasta { width: 9%; left: 48%; top: 82%; z-index: 10; } .food-plate { width: 14%; left: 59%; top: 81%; z-index: 10; } .food-can { width: 8%; left: 27%; top: 86.5%; z-index: 10; } .food-coconut { width: 10%; left: 36%; top: 87.5%; z-index: 10; } .food-glass { width: 11%; left: 46.5%; top: 88%; z-index: 10; } .food-cup { width: 10%; left: 58%; top: 88.5%; z-index: 10; } .food-bottle { width: 12%; left: 67.5%; top: 85.5%; z-index: 10; } @media (max-width: 1200px) { .brandbook-note--go p{ font-size: 26px; } /* .brandbook-about-copy h2, .brandbook-section-heading h2 { font-size: 32px; } */ .brandbook-about-copy p, .brandbook-section-heading p { font-size: 18px; } } @media (max-width: 1155px) { .brandbook-note--go p{ font-size: 24px; } .brandbook-about-copy h2, .brandbook-section-heading h2 { font-size: 30px; } .brandbook-about-copy p, .brandbook-section-heading p { font-size: 16px; } .brandbook-deco-top { top: -3.65%; } .brandbook-about-copy { top: 4%; } .brandbook-note--quirky { left: 5.8%; top: 34.5%; } .brandbook-note--cutout { left: 3.2%; } .brandbook-note--imperfection { left: 77.6%; top: 36%; } } @media (max-width: 1000px) { .brandbook-about-copy h2 { max-width: 220px; } .brandbook-note--go p{ font-size: 24px; } .brandbook-about-copy h2, .brandbook-section-heading h2 { font-size: 30px; } .brandbook-about-copy p, .brandbook-section-heading p { font-size: 15px; } } @media (max-width: 835px) { .brandbook-note--go p{ font-size: 20px; } .brandbook-about-copy h2, .brandbook-section-heading h2 { font-size: 28px; } .brandbook-about-copy p, .brandbook-section-heading p { font-size: 13.5px; } .brandbook-note p { font-size: 19px; } } @media (max-width: 768px) { .founders-brandbook-stage { /* aspect-ratio: 375 / 5000; */ aspect-ratio: 375 / 2500; /* aspect-ratio: 375 / 1520; */ } .brandbook-section-heading--green { width: 82%; left: 9%; top: 29.5%; } .brandbook-section-heading h2 { font-size: 36px; /* margin-bottom: 6px; */ } .brandbook-section-heading p { font-size: 20px; margin: 0 auto; width: 100%; max-width: 420px; /* line-height: 1.25; */ } .brandbook-deco-top, .brandbook-deco-bottom { display: none; } .brandbook-person { width: 58%; left: 22%; right: auto; top: 1%; } .brandbook-drink-sticker { width: 17%; left: 8%; top: 5%; } .brandbook-cup-sticker { width: 17%; right: 10%; top: 4.8%; } .brandbook-curve--go { width: 22.1%; right: 18%; top: 0.9%; } .brandbook-note--go { right: 13%; top: 0.4%; } .brandbook-note--go p{ font-size: 32px !important; } .brandbook-about-copy { margin: 0 auto; padding: 0 20px; width: 100%; left: 0%; top: 12.6%; } .brandbook-about-copy h2 { font-size: 36px; text-align: center; max-width: unset; } .brandbook-about-copy p { font-size: 20px; line-height: 1.3; text-align: center; margin: 0 auto; max-width: 390px; } .brandbook-photo-strip-desktop { display: none; } .brandbook-photo-strip-mobile { display: block !important; width: 100%; left: 0%; top: 12.6%; z-index: 4; } .brandbook-green-bg { width: 150%; left: -16%; top: 26.85%; transform: scaleX(-1); } .brandbook-green-pure-bg-desktop, .brandbook-pink-pure-bg-desktop, .brandbook-orange-pure-bg-desktop { display: none; } .brandbook-green-pure-bg-mobile { display: block; width: 100%; left: 0; top: 30%; z-index: 4; } .brandbook-pink-bg-desktop { display: none; } .brandbook-pink-bg-mobile { display: block; width: 100%; left: 0%; bottom: 38%; z-index: 4; } .brandbook-pink-pure-bg-mobile { display: block; width: 100%; left: 0; bottom: 17.5%; z-index: 4; } .brandbook-orange-bg-top { width: 200%; left: -33%; bottom: 16%; transform: rotate(-6deg); } .brandbook-orange-pure-bg-mobile { display: block; width: 100%; left: 0; bottom: 2%; z-index: 4; } .brandbook-orange-bg-bottom { width: 280%; left: -75%; bottom: -0.5%; transform: rotate(3deg); } .brandbook-note p { font-size: 20px; /* font-size: 10.5px; */ line-height: 1.1; } .brandbook-curve path { stroke-width: 1; } .brandbook-curve--go path { stroke-width: 2; } .brandbook-note--quirky { width: 54%; left: 30%; top: 33%; transform: rotate(0deg); } .brandbook-curve--quirky { width: 5%; left: 54%; top: 34.1%; transform: rotate(40.71deg); } .brandbook-note--cutout { width: 42%; left: 2%; top: 38.2%; transform: rotate(0deg); } .brandbook-curve--cutout { width: 7%; left: 19%; top: 37.1%; transform: rotate(-214deg); } .brandbook-note--imperfection { width: 37%; left: 0%; top: 40.3%; transform: rotate(0deg); } .brandbook-curve--imperfection { width: 8%; left: 22%; top: 41.4%; transform: rotate(13.43deg); } .brandbook-note--local { width: 46%; left: 35%; top: 51.4%; transform: rotate(0deg); } .brandbook-curve--local { width: 5%; left: 52%; top: 50.2%; transform: rotate(-26deg); } /* Green icons mobile */ .green-witch-hat { width: 22%; left: 53%; top: 34.1%; } .green-toy-car { width: 29%; left: 19%; top: 43.8%; transform: rotate(10.96deg); } .green-signboard { width: 28%; left: 55%; top: 46%; transform: rotate(32deg); } .green-pencil { width: 18%; left: 32%; top: 38.25%; transform: rotate(40deg); } .green-couple { width: 29%; left: 24%; top: 34%; transform: rotate(14.61deg); } .green-girl { width: 30%; left: 56%; top: 37.8%; transform: rotate(-15deg); } .green-pizza { width: 26%; left: 54%; top: 41.9%; } /* .green-phone { width: 16%; left: 54%; top: 40%; } */ .green-dancer { width: 30%; left: 25%; top: 46.5%; transform: rotate(-69deg); } .bakery-badge { width: 41%; left: 57%; top: 52%; z-index: 8; transform: rotate(24deg); } .brandbook-note--outline { width: 20%; left: 68.8%; top: 57.2%; height: fit-content; } .brandbook-curve--outline { width: 9.3%; left: 75.2%; top: 57.9%; transform: rotate(-43deg); } .brandbook-note--gradient { width: 18%; left: 20.6%; top: 76.5%; height: fit-content; } .brandbook-curve--gradient { width: 7.8%; left: 19%; top: 74.5%; transform: rotate(-36deg) scaleX(-1); } /* Bakery icons mobile */ .bakery-cookie { width: 18%; left: 28%; top: 57.2%; } .bakery-bagel { width: 16%; left: 32%; top: 68.9%; } .bakery-bagel2 { width: 18%; left: 56%; top: 73%; } .bakery-croissant { width: 22%; left: 25%; top: 65.6%; } .bakery-sandwich { width: 26%; left: 23%; top: 61%; } .bakery-sandwich2 { width: 25%; left: 58%; top: 68.9%; } .bakery-sandwich3 { width: 26%; left: 56%; top: 61%; } .bakery-cinnamon { width: 28%; left: 23%; top: 71.8%; } .bakery-bread { width: 32%; left: 50%; top: 64.8%; } .bakery-bowl { width: 24%; left: 56%; top: 35%; } .bakery-star { width: 21%; left: 56%; top: 57.4%; } /* Food icons mobile may continue below depending on your section height */ .food-badge { width: 40%; left: 21%; bottom: 18%; transform: rotate(-16deg); } .brandbook-note--food { left: 50%; top: 80.5%; height: fit-content; } .brandbook-curve--food { width: 9.3%; left: 59.6%; top: 81%; transform: rotate(-108deg); } .brandbook-note--drinks { left: 71.6%; top: 95%; height: fit-content; } .brandbook-curve--drinks{ width: 11.8%; right: 16.2%; top: 95.7%; transform: rotate(-20deg); } .food-pizza { width: 23%; left: 25%; top: 82%; } .food-pasta { width: 21%; left: 54%; top: 82.5%; } .food-plate { width: 33%; left: 22%; top: 86%; transform: rotate(-24.36deg); } .food-can { width: 19%; left: 58%; top: 86.5%; } .food-coconut { width: 19%; left: 54%; top: 94.5%; } .food-glass { width: 21%; left: 24.5%; top: 92.8%; } .food-cup { width: 20%; left: 29%; top: 90%; } .food-bottle { width: 27%; left: 51.5%; top: 90.1%; } } @media (max-width: 670px) { .brandbook-about-copy h2, .brandbook-section-heading h2 { font-size: 30px; } .brandbook-about-copy p, .brandbook-section-heading p, .brandbook-note p { font-size: 16px; } .brandbook-note--go { top: 0.2%; } .brandbook-note--go p { font-size: 28px !important; } } @media (max-width: 465px) { .brandbook-about-copy h2, .brandbook-section-heading h2 { font-size: 22px; } .brandbook-about-copy p, .brandbook-section-heading p { font-size: 13px; } .brandbook-note p { font-size: 14px; } .brandbook-note--go p { font-size: 24px !important; } } @media (max-width: 375px) { .brandbook-photo-strip-mobile { top: 13%; } .brandbook-about-copy { top: 12.2%; } .brandbook-about-copy h2, .brandbook-section-heading h2 { font-size: 20px; } .brandbook-about-copy h2 { margin: 0 0 10px; } .brandbook-note--quirky { left: 45%; top: 32.4%; } .brandbook-curve--quirky { width: 8%; left: 71%; top: 34%; transform: rotate(-65.29deg); } .brandbook-note--cutout { top: 37.5%; } .brandbook-curve--cutout { top: 36.5%; } .brandbook-curve--imperfection { top: 41.8%; } .brandbook-curve--food { left: 62.6%; } .green-pencil { top: 38.2%; } .green-couple { top: 33%; } } /* ================= Brandbook Top Reveal Sequence ================= */ /* 1. Person pop out */ .brandbook-person { opacity: 0; transform: translateY(28px) scale(0.82); transform-origin: 50% 75%; transition: opacity 0.45s ease, transform 0.72s cubic-bezier(0.22, 1.35, 0.36, 1); will-change: transform, opacity; } .founders-brandbook-system.is-brandbook-top-visible .brandbook-person { opacity: 1; transform: translateY(0) scale(1); } /* 2. Hide the green curve first */ .brandbook-curve--go path { stroke-dasharray: var(--brandbook-go-line-length, 500); stroke-dashoffset: var(--brandbook-go-line-length, 500); transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: 0s; } /* Draw curve after person pops */ .founders-brandbook-system.is-brandbook-top-visible .brandbook-curve--go path { stroke-dashoffset: 0; transition-delay: 0.3s; } /* 3. Hide words first */ .brandbook-note--go { opacity: 0; transform: rotate(-19.55deg) translateY(8px) scale(0.96); transform-origin: center; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0s; } /* Show words after curve is done */ .founders-brandbook-system.is-brandbook-top-visible .brandbook-note--go { opacity: 1; transform: rotate(-19.55deg) translateY(0) scale(1); transition-delay: 1.05s; } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .brandbook-person, .brandbook-note--go, .brandbook-curve--go path { transition: none !important; } .brandbook-person, .brandbook-note--go { opacity: 1 !important; transform: none !important; } .brandbook-note--go { transform: rotate(-19.55deg) !important; } .brandbook-curve--go path { stroke-dashoffset: 0 !important; } } /* ================= Founders World Bagel ================= */ .founders-world-bagel { background: #FFF5E6; overflow: hidden; padding: 0; } .founders-world-bagel__stage { position: relative; width: 100%; /* width: min(1400px, calc(100% - 90px)); */ margin: 0 auto; aspect-ratio: 1440 / 2000; background: #FFF5E6; overflow: hidden; } .world-bagel-deco-top { position: relative; width: 50%; left: 53%; top: 0%; z-index: 4; } .world-bagel-deco-2 { position: relative; width: 26%; left: 27%; top: 29%; z-index: 4; } .world-bagel-deco-3 { position: relative; width: 38%; left: -2%; top: 49%; z-index: 4; } .world-bagel-deco-4 { position: relative; width: 38%; left: 32%; top: 77.3%; z-index: 4; } .world-bagel-piece { position: absolute; display: block; height: auto; user-select: none; } .world-bagel-paper-img { display: block; width: 100%; height: auto; } /* top title paper */ .world-bagel-title-paper { width: 42%; left: 7%; top: 15%; z-index: 8; } .world-bagel-title-copy { position: absolute; inset: -8% 23% 35%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; } .world-bagel-title-copy h2 { margin: 0 0 18px; color: #158246; font-family: var(--reuben-font); font-size: 36px; /* font-size: clamp(18px, 1.55vw, 28px); */ line-height: 100%; font-weight: 400; } .world-bagel-title-copy p { margin: 0; /* max-width: 320px; */ color: #5B5B5B; font-size: 20px; /* font-size: clamp(10px, 0.72vw, 14px); */ line-height: 100%; font-weight: 400; } /* images */ .world-bagel-packaging { width: 47%; right: 0%; top: 8%; z-index: 5; aspect-ratio: 1.55 / 1; overflow: hidden; } .world-bagel-packaging img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .world-bagel-bakery-sticker { width: 10%; right: 18%; top: 27%; z-index: 9; } .world-bagel-tote { width: 36%; left: 7%; top: 32%; z-index: 6; transform: rotate(-5.89deg); aspect-ratio: 11 / 12; overflow: hidden; } .world-bagel-tote img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .world-bagel-tape-left { width: 15%; left: 3%; top: 53.2%; z-index: 10; } .world-bagel-character-standing { width: 20%; left: 32.5%; top: 50%; z-index: 11; } .world-bagel-copy-paper { width: 53%; right: 0%; top: 39%; z-index: 8; } .world-bagel-copy-paper img{ transform: rotate(180deg); } .world-bagel-copy-paper p { position: absolute; inset: 23% 20% 39%; margin: 0; color: #5B5B5B; font-size: 20px; /* font-size: clamp(9px, 0.68vw, 13px); */ line-height: 100%; text-align: center; } .world-bagel-signage { width: 45%; right: 12%; top: 63%; z-index: 6; transform: rotate(7.32deg); aspect-ratio: 4 / 3; overflow: hidden; } .world-bagel-signage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .world-bagel-tape-right { width: 16%; right: 9%; top: 60.3%; z-index: 10; } .world-bagel-hashtag { width: 14%; left: 44%; top: 82.8%; z-index: 9; } .world-bagel-character-car { width: 23%; right: 3.8%; top: 80%; z-index: 11; } /* World Bagel sticker peel items */ .world-bagel-character-standing.sticker-peel, .world-bagel-bakery-sticker.sticker-peel, .world-bagel-character-car.sticker-peel { pointer-events: auto; overflow: visible; } /* Make sure image follows wrapper width */ .world-bagel-character-standing .sticker-image, .world-bagel-character-standing .sticker-flap-image, .world-bagel-bakery-sticker .sticker-image, .world-bagel-bakery-sticker .sticker-flap-image, .world-bagel-character-car .sticker-image, .world-bagel-character-car .sticker-flap-image { width: 100%; height: auto; } /* Do not let reveal transition affect draggable stickers */ .world-bagel-piece.sticker-peel { transition: none !important; will-change: transform; pointer-events: auto; } /* Make sure stickers are visible when section reveal runs */ .founders-world-bagel .world-bagel-piece.sticker-peel { opacity: 1; } @media (max-width: 1715px) { .world-bagel-title-copy { inset: -10% 19% 33%; } .world-bagel-copy-paper p { inset: 20% 20% 39%; } } @media (max-width: 1495px) { .world-bagel-title-copy { inset: -10% 19% 26%; } .world-bagel-title-copy h2 { font-size: 30px; } .world-bagel-copy-paper p { inset: 18% 17% 32%; font-size: 18px; } } @media (max-width: 1245px) { .world-bagel-title-copy p { font-size: 18px; } .world-bagel-copy-paper p { font-size: 16px; } .world-bagel-title-copy { inset: -10% 16% 26%; } .world-bagel-title-paper { width: 50%; left: 2%; } .world-bagel-copy-paper { width: 56%; } .world-bagel-copy-paper p { inset: 18% 16% 32%; } .world-bagel-copy-paper img { min-height: 260px; } } @media (max-width: 955px) { .world-bagel-title-copy h2 { font-size: 24px; } .world-bagel-title-copy p { font-size: 16px; } .world-bagel-copy-paper p { font-size: 15px; } .world-bagel-title-copy { inset: -10% 16% 22%; } } @media (max-width: 768px) { .founders-world-bagel__stage { aspect-ratio: 375 / 1350; } .world-bagel-packaging { width: 68%; left: 15.5%; right: auto; top: 4%; aspect-ratio: 1.55 / 1; } .world-bagel-title-paper { width: 100%; left: 0%; top: 21%; } .world-bagel-title-copy { inset: -14% 16% 30%; } .world-bagel-title-copy h2 { font-size: 36px; margin-bottom: 14px; } .world-bagel-title-copy p { font-size: 20px; line-height: 100%; max-width: 400px; } .world-bagel-tote { width: 65%; left: 18%; top: 38.4%; /* transform: rotate(-5deg); */ aspect-ratio: 11 / 12.5; } .world-bagel-tape-left { width: 22%; left: 13%; top: 55%; } .world-bagel-character-standing { width: 30%; right: 1%; left: auto; top: 51%; } .world-bagel-deco-2 { position: relative; width: 100%; left: -22%; top: 32%; z-index: 4; } .world-bagel-copy-paper { width: 104%; left: 0%; right: auto; top: 63.5%; } .world-bagel-copy-paper img { min-height: unset; } .world-bagel-copy-paper p { inset: 21% 18% 34%; font-size: 16px; line-height: 100%; } .world-bagel-signage { width: 70%; left: 16%; right: auto; top: 77%; aspect-ratio: 4 / 3; } .world-bagel-tape-right { width: 25%; right: 10%; top: 75.4%; } .world-bagel-hashtag { width: 24%; left: 17%; top: 88.8%; } .world-bagel-character-car { width: 40%; right: -1%; top: 86.5%; } .world-bagel-bakery-sticker { width: 15%; right: 44%; top: 14%; } .world-bagel-deco-top, .world-bagel-deco-3, .world-bagel-deco-4 { display: none; } } @media (max-width: 605px) { .world-bagel-title-copy h2 { font-size: 28px; } .world-bagel-title-copy p { font-size: 16px; } .world-bagel-copy-paper p { inset: 18% 18% 34%; font-size: 13px; } .world-bagel-copy-paper img { min-height: 190px; } } @media (max-width: 445px) { .world-bagel-title-copy { inset: -14% 16% 24%; } .world-bagel-title-copy h2 { font-size: 20px; } .world-bagel-title-copy p { font-size: 14px; } .world-bagel-copy-paper p { inset: 18% 17% 34%; font-size: 12px; } .world-bagel-copy-paper img { min-height: 200px; } .world-bagel-signage { top: 79%; } .world-bagel-tape-right { top: 77.4%; } .world-bagel-character-car { top: 88.5%; } .world-bagel-hashtag { top: 90.8%; } } @media (max-width: 380px) { .world-bagel-title-copy p { font-size: 13px; } .world-bagel-copy-paper { top: 62%; } .world-bagel-copy-paper p { font-size: 11.5px; } } /* @media (max-width: 390px) { .founders-world-bagel__stage { aspect-ratio: 375 / 1700; } .world-bagel-title-copy h2 { font-size: 19px; } .world-bagel-title-copy p, .world-bagel-copy-paper p { font-size: 9px; } .world-bagel-copy-paper { top: 57.5%; } .world-bagel-signage { top: 74%; } } */ /* ================= World Bagel Selective Reveal ================= */ /* Keep all World Bagel pieces static and visible by default */ .world-bagel-piece { opacity: 1; } /* Only these 3 pieces should reveal */ .world-bagel-packaging, .world-bagel-tote, .world-bagel-signage { opacity: 0; transform-origin: center; transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } /* Hidden state */ .founders-world-bagel:not(.is-visible) .world-bagel-packaging { transform: translateY(30px) scale(0.96); } .founders-world-bagel:not(.is-visible) .world-bagel-tote { transform: translateY(30px) scale(0.96) rotate(-5.89deg); } .founders-world-bagel:not(.is-visible) .world-bagel-signage { transform: translateY(30px) scale(0.96) rotate(7.32deg); } /* Revealed state */ .founders-world-bagel.is-visible .world-bagel-packaging { opacity: 1; transform: translateY(0) scale(1); } .founders-world-bagel.is-visible .world-bagel-tote { opacity: 1; transform: translateY(0) scale(1) rotate(-5.89deg); } .founders-world-bagel.is-visible .world-bagel-signage { opacity: 1; transform: translateY(0) scale(1) rotate(7.32deg); } /* ================= Founders Community ================= */ .founders-community { background: #FFF5E6; overflow: hidden; padding: 0; } .founders-community__stage { position: relative; width: 100%; aspect-ratio: 1440 / 2040; background: #FFF5E6; overflow: hidden; } .community-bg, .community-piece { position: absolute; display: block; height: auto; user-select: none; } .community-bg { pointer-events: none; } .community-bg-green--desktop, .community-bg-orange--desktop { display: block; } .community-bg-orange--mobile1, .community-bg-orange--mobile2 { display: none; } .community-bg-green--desktop { width: 100%; left: 0; top: 0%; z-index: 1; } .community-bg-green--mobile1 { width: 100%; left: 0; top: 10%; z-index: 1; } .community-bg-green--mobile2 { display: none; } .community-bg-green--line { width: 27%; right: 0; top: 46%; z-index: 2; } /* .community-bg-green--mobile, .community-bg-orange--mobile { display: none; } */ /* background layers */ /* .community-bg-green { width: 100%; left: 0; top: 0; z-index: 1; } */ /* .community-bg-orange { width: 100%; left: 0; top: 70%; z-index: 2; } */ .community-bg-orange--desktop-top { width: 100%; left: 0; top: 50%; z-index: 1; } .community-bg-orange--desktop { width: 100%; left: 0; top: 64%; z-index: 2; } .community-bg-orange--desktop-bottom { width: 100%; left: 0; bottom: 0%; z-index: 1; } /* shared image wrapper */ .community-posters, .community-box, .community-bag, .community-menu, .community-tshirt { overflow: hidden; } .community-posters img, .community-box img, .community-bag img, .community-menu img, .community-tshirt img { display: block; width: 100%; height: 100%; object-fit: cover; } .community-posters img { object-position: left; width: 130%; } .community-box img { transform: scale(1.1); } /* green collage */ .community-piece-poster__tape { position: relative; width: 8%; left: 41.8%; top: 3.3%; z-index: 6; transform: rotate(-23.65deg); } .community-piece-poster__tape2 { position: relative; width: 8%; left: 33.8%; top: 46.8%; z-index: 6; transform: rotate(158.88deg); } .community-posters { width: 43%; left: 13%; top: 6.8%; z-index: 5; aspect-ratio: 59 / 40; transform: rotate(-10deg); } .community-box { width: 26%; left: 9.9%; top: 25%; z-index: 7; aspect-ratio: 1.15 / 1; } .community-bag { width: 29%; left: 30%; top: 28.6%; z-index: 6; aspect-ratio: 1.09 / 1; transform: rotate(-16.66deg); } .community-drink-sticker { width: 9.5%; right: 36.6%; top: 17.8%; z-index: 9; } .community-steak-sticker { width: 15%; left: 6%; top: 37%; z-index: 9; } /* .community-arrow { width: 19%; right: 24%; top: 24%; z-index: 8; } */ .community-copy { width: 26%; right: 9%; top: 27%; z-index: 8; color: #FFF5E6; } .community-copy h2 { margin: 0 0 20px; color: #ffffff; font-family: var(--reuben-font); font-size: clamp(22px, 3vw, 48px); line-height: 105%; font-weight: 400; } .community-copy__title { display: flex; flex-direction: column; width: 100%; } .community-copy__title span { position: relative; display: inline-block; width: fit-content; } /* .community-copy__title span::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: -8px; height: 4px; background: #ee3400; } */ .community-copy__title span:first-child { align-self: flex-start; } .community-copy__title span:last-child { align-self: flex-end; margin-top: 12px; } .community-copy p { margin: 0 0 18px; color: #ffffff; font-size: clamp(14px, 1.55vw, 20px); line-height: 100%; font-weight: 400; } .community-copy p:last-child { margin-bottom: 0; } /* orange section */ .community-menu { width: 50%; left: 5%; top: 60%; z-index: 6; aspect-ratio: 1.25 / 1; } .community-menu img { object-fit: contain; } .community-menu-label { width: 14%; left: 14%; top: 83%; z-index: 8; } .community-tshirt { width: 38%; right: 8%; top: 63%; z-index: 6; aspect-ratio: 1 / 1; overflow: visible; } .community-tshirt__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(0.985); transition: opacity 0.55s ease, transform 0.55s ease; } .community-tshirt__img.is-active { opacity: 1; transform: scale(1); } .community-pizza-sticker { width: 15%; left: 39%; top: 90%; z-index: 9; } /* .community-piece { opacity: 0; transition: opacity 0.55s ease; } .founders-community.is-visible .community-piece { opacity: 1; } */ /* ================= Community One-Time Pop Reveal ================= */ /* Preserve each piece's original rotation */ .community-posters { --community-final-transform: rotate(-10deg); } .community-box { --community-final-transform: none; } .community-bag { --community-final-transform: rotate(-16.66deg); } .community-menu { --community-final-transform: none; } /* Default hidden state */ .community-reveal-piece { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.88) var(--community-final-transform, none); transform-origin: center center; transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.22, 1.35, 0.36, 1); transition-delay: var(--community-reveal-delay, 0s); will-change: opacity, transform; backface-visibility: hidden; } /* Once revealed, keep visible forever */ .founders-community.is-community-revealed .community-reveal-piece { opacity: 1; transform: translate3d(0, 0, 0) scale(1) var(--community-final-transform, none); } /* After reveal, avoid extra GPU memory */ .founders-community.is-community-reveal-complete .community-reveal-piece { will-change: auto; } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .community-reveal-piece { opacity: 1 !important; transform: var(--community-final-transform, none) !important; transition: none !important; } } .community-piece { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; } .community-note { z-index: 22; color: #FFF5E6; font-family: var(--caveat-font); text-align: center; transform-origin: center; } .community-note p { margin: 0; font-size: 32px; line-height: 100%; font-weight: 400; white-space: nowrap; } .community-curve { z-index: 21; overflow: visible; } .community-curve path { fill: none; stroke: #FFF5E6; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; } .community-curve--menu { width: 5.3%; left: 14.2%; bottom: 13.8%; transform: rotate(-243deg); } .community-note--menu { width: 20%; left: 8.8%; bottom: 10.5%; /* transform: rotate(-3deg); */ } @media (max-width: 900px) { .community-note p { font-size: 28px; } } @media (max-width: 768px) { .founders-community__stage { aspect-ratio: 375 / 1500; } /* .community-bg-green--desktop, .community-bg-orange--desktop { display: none; } .community-bg-green--mobile, .community-bg-orange--mobile { display: block; } */ .community-bg-green--desktop { width: 285%; left: -132%; top: -3.9%; z-index: 1; } .community-bg-green--mobile1 { width: 100%; left: 0; top: 12.9%; z-index: 1; } .community-bg-green--mobile2 { display: block; width: 100%; left: 0; bottom: 0%; z-index: 1; } .community-bg-green--line { display: none; /* width: 27%; right: 0; top: 42%; z-index: 2; */ } .community-bg-orange--desktop { display: none; } .community-bg-orange--desktop-top { width: 300%; left: -1%; top: 36.2%; z-index: 1; transform: rotate(-2deg) scaleX(-1); } .community-bg-orange--mobile1 { display: block; width: 100%; left: 0; top: 54.4%; z-index: 2; } .community-bg-orange--mobile2 { display: block; width: 100%; left: 0; top: 58.9%; z-index: 2; } .community-bg-orange--desktop-bottom { width: 250%; left: 0; bottom: 0%; z-index: 1; } .community-piece-poster__tape { width: 9%; left: 64.8%; top: 2.8%; } .community-piece-poster__tape2 { width: 9%; left: 52.8%; top: 27.5%; } .community-posters { width: 68%; left: 16%; top: 4.5%; aspect-ratio: 1.47 / 1; /* transform: rotate(-6deg); */ } .community-box { width: 40%; left: 12%; top: 14.8%; /* aspect-ratio: 4 / 3; */ } .community-bag { width: 45%; right: 12%; left: auto; top: 17.3%; /* aspect-ratio: 4 / 5; */ /* transform: rotate(-9deg); */ } .community-drink-sticker { width: 14%; right: 5%; top: 11%; } .community-steak-sticker { width: 22%; left: 7%; top: 21%; } /* .community-arrow { width: 32%; right: 7%; top: 11.3%; } */ .community-copy { width: 78%; left: 11%; right: auto; top: 31.3%; text-align: center; } .community-copy h2 { font-size: 40px; line-height: 105%; margin-bottom: 18px; } .community-copy__title { align-items: center; } .community-copy__title span:first-child, .community-copy__title span:last-child { align-self: center; margin-top: 0; } .community-copy__title span::after { display: none; } .community-copy p { font-size: 20px; line-height: 100%; text-align: center; margin: 0 auto; margin-bottom: 13px; max-width: 450px; } .community-menu { width: 80%; left: 8%; top: 52%; aspect-ratio: 1.16 / 1; } .community-menu-label { width: 28%; left: 24%; top: 67.4%; } .community-note--menu { width: 36%; left: 25%; top: 70%; height: fit-content; } .community-curve--menu { width: 15.3%; left: 19.2%; top: 65.8%; transform: rotate(100deg); } .community-note p { font-size: 32px; } .community-tshirt { width: 80%; left: 10%; right: auto; top: 74%; aspect-ratio: 1 / 1; } .community-pizza-sticker { width: 28%; left: 22%; top: 94%; } .community-line--green { display: none !important; /* width: 58%; right: 3%; top: 11.3%; z-index: 10; */ } /* Hide desktop single orange line on mobile */ .community-line--orange { display: none !important; } /* Show two separate mobile lines */ .community-line--orange-mobile-menu, .community-line--orange-mobile-tshirt { display: block !important; width: 190%; /* left: -105%; */ z-index: 5; } /* Line below menu */ .community-line--orange-mobile-menu { left: -17%; top: 55.5%; } /* Line below t-shirt */ .community-line--orange-mobile-tshirt { left: -22%; top: 80%; } } @media (max-width: 525px) { .community-copy h2 { font-size: 28px; } .community-copy p { font-size: 16px; } } @media (max-width: 430px) { .community-copy h2 { font-size: 20px; margin: 0 0 12px; } .community-copy p { font-size: 14px; } .community-note p { font-size: 26px; } .community-copy { top: 30.3%; } .community-bg-orange--desktop-top { top: 37%; } } /* ================= Community Draw Lines - Loop ================= */ /* .community-line { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; overflow: visible; } .community-line path { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--line-length, 3000); stroke-dashoffset: var(--line-length, 3000); opacity: 1; } */ /* Start looping only when JS adds .is-looping */ /* .community-line.is-looping path { animation: communityLineDrawLoop 2.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes communityLineDrawLoop { 0% { stroke-dashoffset: var(--line-length, 3000); opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 78% { stroke-dashoffset: 0; opacity: 1; } 79% { stroke-dashoffset: var(--line-length, 3000); opacity: 0; } 100% { stroke-dashoffset: var(--line-length, 3000); opacity: 0; } } */ /* ================= Community Draw Lines ================= */ .community-line { position: absolute; display: block; height: auto; pointer-events: none; user-select: none; overflow: visible; } .community-line path { stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--line-length, 3000); stroke-dashoffset: var(--line-length, 3000); transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1); } .community-line.is-drawn path { stroke-dashoffset: 0; } /* red line in green section */ .community-line--green { width:58%; right: 12%; top: 13.2%; z-index: 4; } /* white line in orange section */ .community-line--orange { width: 118%; left: -8%; top: 68%; z-index: 5; } /* Mobile-only orange lines hidden on desktop */ .community-line--orange-mobile-menu, .community-line--orange-mobile-tshirt { display: none; } /* Desktop orange line */ .community-line--orange { display: block; } /* ================= Founders Good Social ================= */ .founders-good-social { background: #158246; overflow: hidden; padding: 0; } .founders-good-social__stage { position: relative; width: 100%; aspect-ratio: 1440 / 1540; background: #158246; overflow: hidden; } .good-social-bg, .good-social-piece { position: absolute; display: block; height: auto; user-select: none; } .good-social-bg { pointer-events: none; } .good-social-bg--green { width: 100%; left: 0; top: 0; height: 48%; background: #158246; z-index: 1; } .good-social-bg--paper { width: 100%; left: 0; top: 36.5%; height: 100%; /* height: 61.5%; */ background-color: #f7f7f7; background-image: url("founders_assets/img/good-social/social-paper-bg.png"); background-size: cover; background-position: center top; background-repeat: no-repeat; z-index: 2; } .good-social-bg--green--line-1 { position: absolute; width: 58%; left: -32%; top: 3%; z-index: 2; } .good-social-bg--green--line-2 { position: absolute; width: 40%; right: 3%; top: 27.8%; z-index: 2; } /* ---------- Good Food top section ---------- */ .good-social-food-copy { width: 28%; left: 28%; top: 10.5%; z-index: 8; text-align: left; color: #ffffff; } .good-social-food-copy h2 { margin: 0 -40px 20px; color: #ffffff; font-family: var(--reuben-font); font-size: clamp(28px, 3vw, 48px); line-height: 105%; font-weight: 400; max-width: 460px; } .good-social__title { display: flex; flex-direction: column; width: 100%; } .good-social__title span:first-child { align-self: flex-start; } .good-social__title span:last-child { align-self: flex-end; margin-top: 10px; } .good-social__title span { position: relative; display: inline-block; width: fit-content; } .good-social-food-copy p { margin: 0 auto; max-width: 620px; color: #ffffff; font-size: clamp(13px, 1.1vw, 20px); line-height: 100%; font-weight: 400; } .good-social-wrap-group { width: 45%; left: -7%; top: 16%; z-index: 6; transform: rotate(19.76deg); } .good-social-food-box { width: 42%; right: 2%; top: -2%; z-index: 7; } .good-social-food-character { width: 16%; left: 54%; top: 28%; z-index: 9; } /* ---------- Social Media bottom section ---------- */ .good-social-media-copy { width: 37%; left: 32%; top: 47.5%; z-index: 8; text-align: center; color: #158246; } .good-social-media-copy h2 { margin: 0 0 22px; color: #158246; font-family: var(--reuben-font); font-size: clamp(30px, 3.2vw, 54px); line-height: 100%; font-weight: 400; } .good-social-media-copy p { margin: 0 auto 16px; max-width: 720px; color: #158246; font-size: clamp(12px, 1vw, 18px); line-height: 115%; font-weight: 400; } .good-social-media-copy p:last-child { margin-bottom: 0; } /* ---------- Social Media Circular Gallery ---------- */ .good-social-gallery { width: 125%; height: 34%; left: -12.5%; top: 58%; z-index: 7; overflow: visible; cursor: grab; touch-action: pan-y; pointer-events: auto; } .good-social-gallery:active { cursor: grabbing; } .good-social-gallery__item { position: absolute; left: 50%; top: 50%; width: 20%; height: auto; transform: translate(-50%, -50%) translate3d(var(--gallery-x, 0px), var(--gallery-y, 0px), 0) rotate(var(--gallery-rotate, 0deg)) scale(var(--gallery-scale, 1)); transform-origin: center center; opacity: var(--gallery-opacity, 1); z-index: var(--gallery-z, 1); transition: none !important; backface-visibility: hidden; transform-style: preserve-3d; /* filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.14)); */ will-change: transform, opacity; } .good-social-gallery__item img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; } @media (max-width: 1115px) { .good-social-food-copy { width: 30%; left: 27%; top: 8.5%; } .good-social-media-copy { top: 45.5%; width: 42%; left: 30%; } } @media (max-width: 985px) { .good-social-food-copy { width: 35%; left: 22%; top: 5.5%; } .good-social-media-copy { top: 44.5%; width: 55%; left: 25%; } .good-social-media-copy h2 { margin: 0 0 16px; } } @media (max-width: 768px) { .founders-good-social__stage { aspect-ratio: 375 / 1170; } .good-social-bg--green { height: 49%; } .good-social-bg--paper { top: 57%; height: 51%; background-size: cover; background-position: center top; } .good-social-bg--green--line-1, .good-social-bg--green--line-2 { display: none; } .good-social-food-box { width: 82%; left: 9%; right: auto; top: 0%; } .good-social-food-copy { width: 78%; left: 11%; top: 28%; } .good-social-food-copy h2 { font-size: 40px; line-height: 105%; /* margin-bottom: 12px; */ margin: 0 auto 12px; max-width: unset; } .good-social__title span:first-child, .good-social__title span:last-child { align-self: center; } .good-social-food-copy p { font-size: 20px; line-height: 100%; max-width: 440px; text-align: center; } .good-social-wrap-group { width: 85%; left: -15%; top: 39.5%; z-index: 6; } .good-social-food-character { width: 32%; right: 5%; left: auto; top: 50.5%; transform: rotate(-22.92deg); } .good-social-media-copy { width: 84%; left: 8%; top: 63%; } .good-social-media-copy h2 { font-size: 40px; margin-bottom: 20px; } .good-social-media-copy p { font-size: 20px; line-height: 100%; max-width: 510px; margin-bottom: 20px; } .good-social-gallery { width: 70%; height: 23%; left: 15%; top: 75%; overflow: visible; } .good-social-gallery__item { width: 60%; } } @media (max-width: 575px) { .good-social-food-copy h2, .good-social-media-copy h2 { font-size: 30px; } .good-social-food-copy p, .good-social-media-copy p { font-size: 17px; max-width: 380px; } } @media (max-width: 460px) { .good-social-food-copy h2, .good-social-media-copy h2 { font-size: 24px; } /* .good-social-food-copy p, .good-social-media-copy p { font-size: 14px; } */ .good-social-media-copy p, .good-social-media-copy h2 { margin-bottom: 10px; } .good-social__title span:last-child { margin-top: 0; } .good-social-food-copy { top: 26%; } .good-social-gallery { top: 77%; } /* .good-social-media-copy { top: 61%; } */ } @media (max-width: 390px) { .good-social-food-copy p, .good-social-media-copy p { font-size: 14.5px; } .good-social-food-copy { top: 26%; } .good-social-gallery { top: 77%; } .good-social-media-copy { top: 61%; } } /* ================= Founders Merch Section ================= */ .founders-merch { background: #158246; overflow: hidden; padding: 0; } .founders-merch__stage { position: relative; width: 100%; aspect-ratio: 1440 / 625; background: #158246; overflow: hidden; } .merch-piece { position: absolute; display: block; height: auto; user-select: none; pointer-events: none; } /* Desktop layout */ .merch-tshirt { width: 66%; left: -3%; top: 0%; z-index: 3; } .merch-keychain-set { width: 50%; right: 0; top: -13%; z-index: 4; transform: rotate(11.42deg); } .merch-character-girl { width: 12%; left: 56%; bottom: -2%; z-index: 5; } .merch-character-bagel { width: 12%; left: 67%; bottom: 0%; z-index: 5; } .merch-character-burger { width: 14%; left: 79%; bottom: -3%; z-index: 5; } @media (max-width: 768px) { .founders-merch__stage { aspect-ratio: 375 / 535; } .merch-tshirt { width: 100%; left: 0; top: -2%; z-index: 3; } .merch-keychain-set { width: 100%; left: 0; right: auto; top: 31%; z-index: 4; transform: none } .merch-character-girl { width: 25%; left: 14%; bottom: -1%; } .merch-character-bagel { width: 25%; left: 38%; bottom: 0; } .merch-character-burger { width: 29%; left: 60%; bottom: -2%; } } /* @media (max-width: 430px) { .founders-merch__stage { aspect-ratio: 375 / 590; } .merch-tshirt { top: -1%; } .merch-keychain-set { top: 39%; } .merch-character-girl, .merch-character-bagel, .merch-character-burger { bottom: 2%; } } */ /* ================= Extra Scroll Reveal ================= */ /* Good Social food box reveal */ .good-social-food-box { opacity: 0; transform: translateY(36px) scale(0.92); transform-origin: center; transition: opacity 0.55s ease, transform 0.75s cubic-bezier(0.22, 1.35, 0.36, 1); will-change: opacity, transform; } .founders-good-social.is-food-box-visible .good-social-food-box { opacity: 1; transform: translateY(0) scale(1); } /* Merch t-shirt reveal */ .merch-tshirt { opacity: 0; transform: translateY(42px) scale(0.94); transform-origin: center bottom; transition: opacity 0.55s ease, transform 0.8s cubic-bezier(0.22, 1.35, 0.36, 1); will-change: opacity, transform; } .founders-merch.is-tshirt-visible .merch-tshirt { opacity: 1; transform: translateY(0) scale(1); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .good-social-food-box, .merch-tshirt { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ================= Founders Cap Section ================= */ .founders-cap-section { background: #FFF5E6; overflow: hidden; padding: 0; } .founders-cap-stage { position: relative; width: 100%; aspect-ratio: 1440 / 900; background: #FFF5E6; overflow: hidden; } .cap-panel { position: absolute; overflow: hidden; background: #FFF5E6; } .cap-panel img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Desktop layout */ .cap-panel-pink { width: 100%; height: 58%; left: 0; top: 0; } .cap-panel-black { width: 50%; height: 42%; left: 0; bottom: 0; } .cap-panel-white { width: 50%; height: 42%; right: 0; bottom: 0; } @media (max-width: 768px) { .founders-cap-stage { aspect-ratio: 375 / 660; } .cap-panel { width: 100%; height: 33.333%; left: 0; right: auto; } .cap-panel-pink { top: 0; bottom: auto; } .cap-panel-black { top: 33.333%; bottom: auto; } .cap-panel-white { top: 66.666%; bottom: auto; } .cap-panel img { object-fit: cover; object-position: center; } } /* ================= Founders Mug Story ================= */ .founders-mug-story { background: var(--page-section-bg); /* background: #ffffff; */ overflow: hidden; padding: clamp(90px, 12vw, 170px) 0; } .founders-mug-story__wrap { width: min(1400px, calc(100% - 90px)); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: clamp(60px, 7vw, 120px); } .founders-mug-story__media { position: relative; width: 100%; max-width: 560px; justify-self: center; padding-top: 35px; } .founders-mug-story__image-card { position: relative; width: 100%; aspect-ratio: 560 / 435; background: #FFF6E7; border-radius: 21px; overflow: hidden; } .founders-mug-story__image { position: absolute; left: 50%; top: 50%; display: block; width: 78%; height: auto; max-height: 82%; object-fit: contain; opacity: 0; transform: translate(-50%, -50%) scale(0.985); transition: opacity 0.55s ease, transform 0.55s ease; pointer-events: none; user-select: none; } .founders-mug-story__image.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); } .founders-mug-story__tape { position: absolute; width: 120px; height: auto; left: 30%; top: 0; z-index: 3; /* transform: translateX(-50%) rotate(-34deg); */ pointer-events: none; user-select: none; } .founders-mug-story__copy { max-width: 650px; } .founders-mug-story__copy h2 { margin: 0 0 30px; color: #008441; /* font-family: var(--reuben-font); */ font-size: clamp(28px, 2.6vw, 32px); line-height: 121%; font-weight: 700; } .founders-mug-story__copy p { margin: 0 0 20px; color: #8f8f8f; font-size: clamp(16px, 1.65vw, 20px); line-height: 25px; font-weight: 400; } .founders-mug-story__copy p:last-child { margin-bottom: 0; } @media (max-width: 768px) { .founders-mug-story { padding: 70px 0 85px; } .founders-mug-story__wrap { width: calc(100% - 46px); grid-template-columns: 1fr; row-gap: 48px; text-align: center; } .founders-mug-story__media { max-width: 350px; padding-top: 25px; } .founders-mug-story__image-card { border-radius: 21px; aspect-ratio: 320 / 235; } .founders-mug-story__image { width: 85%; } .founders-mug-story__tape { width: 74px; top: 0; } .founders-mug-story__copy { max-width: 440px; margin: 0 auto; } .founders-mug-story__copy h2 { font-size: 25px; /* line-height: 112%; */ margin-bottom: 26px; } .founders-mug-story__copy p { /* font-size: 14px; */ /* line-height: 118%; */ margin-bottom: 22px; } }