@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: "Carattere"; src: url("rnc_assets/fonts/Carattere-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Cornerstone"; src: url("rnc_assets/fonts/Cornerstone Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("rnc_assets/fonts/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } * { 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; /* 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; */ --carattere-font: "Carattere", "Inter", sans-serif; --cornerstone-font: "Cornerstone", "Inter", sans-serif; --montserrat-font: "Montserrat", "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; } .gray-bg { background: #D5D7D7 !important; color: #424242 !important; } .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--rnc { position: relative; background: var(--page-section-bg); color: var(--page-text-main); overflow: hidden; min-height: 86vh; display: flex; align-items: center; } .hero.hero--rnc .hero-container { width: min(1400px, calc(100% - 100px)); margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; grid-template-rows: 1fr auto; column-gap: 30px; row-gap: 0; align-items: stretch; min-height: calc(80vh - 160px); 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: 0.85fr 1.15fr; column-gap: 30px; align-items: end; /* align-items: center; */ margin-top: 36px; } .hero-bottom-left { display: flex; align-items: flex-end; } .hero-bottom-right { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; /* max-width: 62ch; */ } .hero-left--logo { justify-content: space-between; min-height: 100%; } .hero-logo { width: clamp(220px, 24vw, 265px); 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: 36px; line-height: 121%; font-weight: 400; letter-spacing: 0; color: var(--page-text-main); } .hero-description { margin: 0; max-width: 68ch; font-size: 15px; line-height: 20px; color: var(--page-text-main); } .hero-declare-container { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; } /* .hero-declare-container--client { margin-top: auto; padding-bottom: 6px; justify-content: flex-start; } */ /* .hero-declare-container--meta { width: 100%; max-width: 62ch; margin-top: 36px; padding-top: 18px; align-items: flex-start; } */ .hero-description-declare { margin: 0; font-size: 15px; line-height: 121%; color: #B1B1B1; } /* tablet */ @media (max-width: 768px) { .hero.hero--rnc .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: left; } .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; */ text-align: left; } .hero-bottom-right { justify-content: flex-start; align-items: center; text-align: left; } .hero-bottom-right { flex-direction: row; gap: 30px; max-width: unset; } .hero-copy { width: 100%; margin: 0; } .hero-description { width: 100%; max-width: 600px; margin: 0; } } /* mobile */ @media (max-width: 640px) { .hero.hero--rnc .hero-container { width: calc(100% - 36px); row-gap: 60px; } .hero-logo { width: min(62vw, 260px); } .hero-title { /* font-size: clamp(28px, 8vw, 42px); line-height: 1.12; */ margin-bottom: 18px; font-size: 24px; /* line-height: 34px; */ } .hero-description { font-size: 14px; /* line-height: 1.65; */ } .hero-declare-container { flex-direction: column; gap: 10px; } .hero-description-declare { font-size: 12px; } } /* ================= RNC 1968 Video Transition ================= */ .rnc-1968-transition { position: relative; isolation: isolate; /* min-height: 100vh; min-height: 100svh; */ display: flex; align-items: center; justify-content: center; padding: 60px 24px; overflow: hidden; /* Main monotone green */ background-color: #07633f; /* * Very subtle tonal variation. * All gradients remain within the same green family. */ background-image: radial-gradient( circle at 48% 38%, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 48% ), radial-gradient( circle at 15% 85%, rgba(0, 45, 27, 0.16) 0%, transparent 48% ), radial-gradient( circle at 88% 18%, rgba(0, 35, 21, 0.12) 0%, transparent 42% ), linear-gradient( 135deg, #086744 0%, #075f3d 50%, #075a39 100% ); } /* Film grain texture */ .rnc-1968-transition::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 180px 180px; opacity: 0.75; mix-blend-mode: soft-light; } /* Soft darker edges */ .rnc-1968-transition::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient( ellipse at center, transparent 45%, rgba(0, 25, 15, 0.16) 100% ); } /* Keep the content above the texture */ .rnc-1968-transition__inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; } /* Rounded video frame */ .rnc-1968-transition__media { position: relative; width: min(65vw, 1000px); aspect-ratio: 1.61 / 1; /* aspect-ratio: 16 / 10; */ overflow: hidden; border-radius: 33px; /* border-radius: clamp(16px, 2vw, 26px); */ background: #146E4E; /* * Helps prevent small edge flickering around * rounded videos in Chrome and Safari. */ transform: translateZ(0); backface-visibility: hidden; contain: paint; } .rnc-1968-transition__video { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.21); border-radius: inherit; background: #146E4E; } /* Caption container */ .rnc-1968-transition__caption { position: relative; width: 100%; min-height: 24px; margin-top: clamp(25px, 4vh, 40px); display: grid; place-items: center; color: #D09F18; text-align: center; font-family: var(--carattere-font); font-size: clamp(15px, 2.15vw, 28px); /* font-style: italic; */ font-weight: 400; line-height: 34px; } /* Both sentences occupy the same position */ .rnc-1968-transition__caption-line { grid-column: 1; grid-row: 1; opacity: 0; transform: translate3d(0, 4px, 0); animation-name: rnc1968CaptionSwitch; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; will-change: opacity, transform; } /* Question appears during the first three seconds */ .rnc-1968-transition__caption-line--question { animation-delay: 0s; } /* “Yes.” appears during the next three seconds */ .rnc-1968-transition__caption-line--answer { font-size: 36px; animation-delay: 2s; } @keyframes rnc1968CaptionSwitch { 0%, 42% { opacity: 1; transform: translate3d(0, 0, 0); } 50%, 100% { opacity: 0; transform: translate3d(0, -5px, 0); } } /* Tablet */ @media (max-width: 900px) { /* .rnc-1968-transition { min-height: 85svh; } */ .rnc-1968-transition__media { width: min(78vw, 760px); } } /* Mobile */ @media (max-width: 640px) { .rnc-1968-transition { /* min-height: 60svh; */ padding: 50px 20px; } .rnc-1968-transition__media { width: 85vw; /* aspect-ratio: 16 / 10; */ /* border-radius: 18px; */ } .rnc-1968-transition__caption { min-height: 22px; margin-top: 18px; font-size: 13px; } } /* Keep the caption static for reduced-motion users */ @media (prefers-reduced-motion: reduce) { .rnc-1968-transition__caption-line { animation: none; opacity: 0; transform: none; } .rnc-1968-transition__caption-line--question { opacity: 1; } } /* ================= RNC Heritage Duotone Section ================= */ .rnc-duotone-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } .rnc-heritage-section { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: 760px; /* min-height: clamp(620px, 47.56vw, 760px); */ display: flex; align-items: center; justify-content: center; padding: 180px 0; /* Figma shadow colour */ background: #371600; text-align: center; } /* Background image container */ .rnc-heritage-section__background { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #371600; } /* Apply the real two-colour tonal mapping */ .rnc-heritage-section__background img { width: 100%; height: 100%; display: block; object-fit: cover; /* * Keeps a similar crop to the Figma composition. * Increase 20% to move the photo downward. * Decrease it to show more of the upper area. */ object-position: center 20%; filter: url("#rnc-duotone-figma"); transform: scale(1.01); transform-origin: center; backface-visibility: hidden; } /* Fine full-image grain */ .rnc-heritage-section::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='13.1' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 140px 140px; /* mix-blend-mode: overlay; */ opacity: 0.3; } .rnc-heritage-section__inner-frame { max-width: 1400px; padding: 40px 20px; margin-top: 4rem; } /* Foreground content */ .rnc-heritage-section__inner { position: relative; z-index: 2; /* width: min(1400px, 100%); */ margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; box-shadow: none; text-align: center; } /* * Important: * Remove the rectangular overlay from the previous CSS. */ .rnc-heritage-section__inner::before, .rnc-heritage-section__inner::after { content: none !important; display: none !important; } .rnc-heritage-section__logo { width: clamp(175px, 16vw, 235px); height: auto; display: block; margin-bottom: 3rem; /* margin: 0 auto 32px; */ } .rnc-heritage-section__text { width: 100%; max-width: 780px; margin-bottom: 3rem; /* margin: 0 auto; */ color: #E2D1A3; font-size: 16px; font-weight: 400; line-height: 23px; text-align: center; } .rnc-heritage-section__icon { width: 100%; max-width: 52px; height: auto; display: block; margin-top: 2rem; margin-bottom: 3.5rem; /* margin: 34px auto 0; */ } /* Tablet */ @media (max-width: 900px) { .rnc-heritage-section { min-height: 620px; padding: 65px 30px; } .rnc-heritage-section__inner { width: min(680px, 100%); } .rnc-heritage-section__text { max-width: 620px; font-size: 14px; } .rnc-heritage-section__icon { max-width: 35px; } } /* Mobile */ @media (max-width: 640px) { .rnc-heritage-section { min-height: 640px; padding: 60px 22px; } .rnc-heritage-section__background img { object-position: center; } .rnc-heritage-section__logo { width: 145px; margin-bottom: 26px; } .rnc-heritage-section__text { max-width: 100%; font-size: 13px; line-height: 1.55; margin-bottom: 2rem; } .rnc-heritage-section__icon { width: 28px; margin-top: 1rem; } .rnc-heritage-section::after { background-size: 85px 85px; opacity: 0.25; } } /* ================= RNC Colour & Typography System ================= */ .rnc-brand-system { width: 100%; min-height: 920px; display: flex; flex-direction: row; background: #116044; overflow: hidden; border-top: 5px solid #ffffff; } .rnc-brand-system__panel-frame { width: 100%; /* width: min(1400px, calc(100% - 90px)); */ /* margin: 0 auto; */ display: flex; flex-direction: row; justify-content: center; } /* Both desktop columns */ .rnc-brand-system__panel { position: relative; isolation: isolate; overflow: hidden; /* width: 50%; */ /* min-height: 720px; */ } /* Keep content above the grain texture */ .rnc-brand-system__panel > * { position: relative; z-index: 2; } /* Shared vintage grain */ .rnc-brand-system__panel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 125px 125px; mix-blend-mode: soft-light; opacity: 0.32; } /* ================================================== LEFT COLUMN — COLOUR PALETTE ================================================== */ .rnc-brand-system__panel--palette { width: 50%; --palette-colour: #895431; display: flex; align-items: center; justify-content: center; background-color: var(--palette-colour); border-right: 5px solid #ffffff; transition: background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .rnc-brand-system__palette-list { /* width: min(245px, 70%); */ display: flex; flex-direction: column; align-items: center; gap: 30px; } /* Remove normal button appearance */ .rnc-brand-system__colour { position: relative; /* width: 100%; */ margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #FFFFFF38; font-family: var(--cornerstone-font); /* font-family: "Montserrat", "Inter", sans-serif; */ font-size: 16px; font-weight: 500; line-height: 100%; letter-spacing: 5%; text-align: left; text-transform: uppercase; cursor: pointer; opacity: 0.85; transform: translate3d(0, 0, 0); transition: color 0.35s ease, opacity 0.35s ease, transform 0.35s ease; } /* Active or hovered Pantone */ .rnc-brand-system__colour.is-active { color: #D09F18; opacity: 1; /* transform: translate3d(5px, 0, 0); */ } /* Small indicator before active colour */ /* .rnc-brand-system__colour::before { content: ""; position: absolute; top: 50%; left: -17px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0; transform: translateY(-50%) scale(0.5); transition: opacity 0.3s ease, transform 0.3s ease; } */ .rnc-brand-system__colour.is-active::before { opacity: 1; transform: translateY(-50%) scale(1); } .rnc-brand-system__colour:focus-visible { color: #D09F18; outline: 1px solid rgba(255, 255, 255, 0.7); outline-offset: 6px; } /* ================================================== RIGHT COLUMN — TYPOGRAPHY MONOTONE NOISE ================================================== */ .rnc-brand-system__panel--type { width: 50%; position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; /* Figma base colour */ background-color: #146E4E; overflow: hidden; } /* * Override the shared panel noise specifically * for the typography panel. */ .rnc-brand-system__panel--type::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; /* * Fine monochrome noise. * The texture covers the entire panel, * which corresponds to Figma Density 100%. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; /* * Smaller texture = finer grain. * This approximates Figma Size 0.5. */ background-size: 72px 72px; /* * Black noise over the green base. */ mix-blend-mode: multiply; /* Figma black noise at 25% */ opacity: 0.75; } /* Keep all typography content above the noise */ .rnc-brand-system__type-content { position: relative; z-index: 2; padding: 0 30px; } .rnc-brand-system__section-label, .rnc-brand-system__type-label { margin: 0; color: #F8EEE3; /* font-family: "Montserrat", "Inter", sans-serif; */ font-weight: 400; line-height: 100%; letter-spacing: 5%; } .rnc-brand-system__section-label { margin-bottom: 95px; font-size: 16px; } .rnc-brand-system__type-label { margin-bottom: 15px; font-size: 14px; } /* Title area */ .rnc-brand-system__type-group--title { margin-bottom: 69px; } .rnc-brand-system__cornerstone { margin: 0 0 13px; color: #D09F18; font-family: var(--cornerstone-font); font-size: clamp(32px, 4.1vw, 64px); font-weight: 500; line-height: 100%; letter-spacing: 5%; text-transform: uppercase; } .rnc-brand-system__rosella-samples { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 20px; margin-bottom: 22px; } /* ROSELLA transparent image */ .rnc-brand-system__rosella { display: block; width: 100%; max-width: 270px; height: auto; object-fit: contain; object-position: left center; } /* Slogan */ .rnc-brand-system__type-group--slogan { margin-bottom: 22px; } .rnc-brand-system__carattere { margin: 0; color: #D09F18; font-family: var(--carattere-font); font-size: 64px; font-weight: 400; line-height: 100%; letter-spacing: 5%; } /* Body text */ .rnc-brand-system__montserrat { margin: 0; color: #D09F18; font-family: var(--montserrat-font); font-size: clamp(32px, 4.25vw, 64px); font-weight: 400; line-height: 100%; letter-spacing: 3%; } /* ================================================== TABLET ================================================== */ @media (max-width: 1200px) { .rnc-brand-system__rosella { width: min(210px, 92%); } } @media (max-width: 1000px) { .rnc-brand-system, .rnc-brand-system__panel { min-height: 700px; } /* .rnc-brand-system__type-content { width: calc(100% - 60px); } */ .rnc-brand-system__section-label { margin-bottom: 70px; } .rnc-brand-system__type-group--title { margin-bottom: 55px; } .rnc-brand-system__palette-list { width: min(220px, 72%); } /* .rnc-brand-system__colour { font-size: 13px; } */ .rnc-brand-system__rosella { width: min(160px, 92%); } } /* ================================================== MOBILE ================================================== */ @media (max-width: 768px) { .rnc-brand-system { min-height: 0; flex-direction: column; border-top-width: 3px; } .rnc-brand-system__panel-frame { flex-direction: column; } .rnc-brand-system__panel { width: 100%; } /* Colour section becomes top section */ .rnc-brand-system__panel--palette { min-height: 360px; border-right: 0; border-bottom: 3px solid #ffffff; } .rnc-brand-system__palette-list { /* width: min(215px, calc(100% - 70px)); */ gap: 15px; } /* .rnc-brand-system__colour { font-size: 13px; line-height: 1.4; } */ /* Typography section */ .rnc-brand-system__panel--type { min-height: 390px; align-items: flex-start; justify-content: flex-start; } .rnc-brand-system__type-content { width: 100%; padding: 30px 34px 42px; } .rnc-brand-system__section-label { margin-bottom: 48px; font-size: 10px; } .rnc-brand-system__type-label { margin-bottom: 10px; font-size: 10px; } .rnc-brand-system__type-group--title { margin-bottom: 38px; } .rnc-brand-system__cornerstone { margin-bottom: 7px; /* font-size: clamp(25px, 8vw, 34px); */ } .rnc-brand-system__rosella { width: min(250px, 90%); } .rnc-brand-system__type-group--slogan { margin-bottom: 18px; } /* .rnc-brand-system__carattere { font-size: clamp(45px, 14vw, 61px); } */ /* .rnc-brand-system__montserrat { font-size: clamp(27px, 9vw, 39px); } */ /* .rnc-brand-system__panel::after { background-size: 95px 95px; opacity: 0.27; } */ } @media (max-width: 600px) { .rnc-brand-system__rosella { width: min(155px, 92%); } } /* Very small phones */ @media (max-width: 390px) { .rnc-brand-system__panel--palette { min-height: 350px; } .rnc-brand-system__panel--type { min-height: 370px; } .rnc-brand-system__type-content { padding-left: 32px; padding-right: 25px; } .rnc-brand-system__palette-list { width: 205px; } .rnc-brand-system__cornerstone { font-size: 28px; } .rnc-brand-system__rosella { width: min(125px, 92%); } .rnc-brand-system__carattere { font-size: 55px; } } /* ================= RNC Logo System Showcase ================= */ .rnc-logo-system { width: 100%; padding: clamp(90px, 10vw, 160px) 0; background: var(--page-section-bg); overflow: hidden; } /* * Same container system as your Hero section */ .rnc-logo-system__container { width: min(1400px, calc(100% - 100px)); margin: 0 auto; display: flex; align-items: center; justify-content: center; } /* * Preserve the complete image without cropping */ .rnc-logo-system__image { display: block; width: 100%; max-width: 900px; height: auto; object-fit: contain; object-position: center; } /* Tablet */ @media (max-width: 900px) { .rnc-logo-system { padding: 90px 0; } .rnc-logo-system__container { width: min(100%, calc(100% - 60px)); } .rnc-logo-system__image { max-width: 850px; } } /* Mobile */ @media (max-width: 640px) { .rnc-logo-system { padding: 65px 0; } .rnc-logo-system__container { width: calc(100% - 40px); } .rnc-logo-system__image { width: 100%; max-width: none; } } /* ================= RNC Interactive Stamp Section ================= */ .rnc-stamp-section { width: 100%; /* padding: clamp(30px, 4vw, 60px) 0; */ background: #f8eee3; overflow: hidden; /* * The normal cursor stays available until the custom * PNG has loaded successfully. JavaScript then adds * .has-rnc-custom-cursor and strictly hides it. */ cursor: crosshair; outline: none; } /* Same container system as the Hero */ .rnc-stamp-section__container { /* width: min(1400px, calc(100% - 100px)); */ margin: 0 auto; } /* The complete stamping area */ .rnc-stamp-section__stage { position: relative; isolation: isolate; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #f8eee3; user-select: none; -webkit-user-select: none; touch-action: manipulation; } /* ================================================== RNC STAMP SECTION — STRICT PNG CUSTOM CURSOR The native cursor is hidden only after the PNG has loaded successfully. This prevents an invisible cursor when the file path is incorrect or the image fails. ================================================== */ .rnc-stamp-custom-cursor { --rnc-cursor-width: 64px; --rnc-cursor-height: 64px; position: fixed; left: 0; top: 0; z-index: 999999; width: var(--rnc-cursor-width); height: var(--rnc-cursor-height); display: none; pointer-events: none; user-select: none; -webkit-user-select: none; opacity: 0; visibility: hidden; transform: translate3d(-200px, -200px, 0); transform-origin: center bottom; transition: opacity 90ms ease, visibility 90ms ease; will-change: transform; backface-visibility: hidden; } .rnc-stamp-custom-cursor__image { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; transform: scale(1) rotate(0deg); transform-origin: center bottom; transition: transform 110ms cubic-bezier(0.22, 1, 0.36, 1); backface-visibility: hidden; } @media (hover: hover) and (pointer: fine) { /* * Hide the browser cursor throughout the complete * stamping stage, including all of its child elements. */ .rnc-stamp-section.has-rnc-custom-cursor .rnc-stamp-section__stage, .rnc-stamp-section.has-rnc-custom-cursor .rnc-stamp-section__stage * { cursor: none !important; } .rnc-stamp-custom-cursor.is-ready { display: block; } .rnc-stamp-custom-cursor.is-visible { opacity: 1; visibility: visible; } .rnc-stamp-custom-cursor.is-pressed .rnc-stamp-custom-cursor__image { transform: scale(0.95) /* rotate(-4deg); */ } } /* * Touch devices do not display the custom cursor. */ @media (hover: none), (pointer: coarse) { .rnc-stamp-custom-cursor { display: none !important; } .rnc-stamp-section__stage, .rnc-stamp-section__stage * { cursor: default !important; } } @media (prefers-reduced-motion: reduce) { .rnc-stamp-custom-cursor, .rnc-stamp-custom-cursor__image { transition: none; } } /* Optional subtle paper texture */ /* .rnc-stamp-section__stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130' viewBox='0 0 130 130'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' seed='12' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 130px 130px; mix-blend-mode: multiply; opacity: 0.055; } */ /* ================================================== CENTRE BADGE — INSTANT IMAGE SWITCH ================================================== */ .rnc-stamp-section__centre { position: absolute; left: 50%; top: 50%; z-index: 3; width: clamp(220px, 28%, 450px); aspect-ratio: 1.2 / 1; transform: translate(-50%, -50%); pointer-events: none; } .rnc-stamp-section__centre-badge { position: absolute; inset: 0; width: 100%; height: 100%; display: none; object-fit: contain; object-position: center; /* No fade or movement */ opacity: 1; transform: none; transition: none; } .rnc-stamp-section__centre-badge.is-active { display: block; } /* ================================================== CLICK-POSITION STAMP LAYER ================================================== */ .rnc-stamp-section__stamps { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; } /* * Each stamp is created dynamically by JavaScript. * Its exact position and rotation are supplied through * CSS custom properties. */ .rnc-stamp-section__stamp { position: absolute; left: var(--stamp-x); top: var(--stamp-y); width: var(--stamp-width, 150px); height: auto; display: block; pointer-events: none; user-select: none; opacity: 0; transform: translate(-50%, -50%) rotate(var(--stamp-rotation, 0deg)) scale(1.15); transform-origin: center; backface-visibility: hidden; will-change: transform, opacity, filter; animation: rncStampAppearAndDisappear var(--stamp-duration, 3000ms) /* cubic-bezier(0.16, 1, 0.3, 1) */ forwards; } /* * Total animation duration: 3 seconds. * 0%–20%: * stamping impact * 20%–58%: * stamp remains visible * 58%–100%: * slowly fades away */ @keyframes rncStampAppearAndDisappear { 0% { opacity: 0; filter: blur(2px); transform: translate(-50%, -50%) rotate(var(--stamp-rotation)) scale(1.1); } 9% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) rotate(var(--stamp-rotation)) scale(0.90); } 16% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--stamp-rotation)) scale(1.08); } 22% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--stamp-rotation)) scale(1); } 58% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--stamp-rotation)) scale(1); } 100% { opacity: 0; filter: blur(0.4px); transform: translate(-50%, -50%) rotate(var(--stamp-rotation)) scale(0.96); } } /* Desktop */ @media (min-width: 901px) { .rnc-stamp-section__stamp { --stamp-width: clamp(105px, 12vw, 190px); } } /* Tablet */ @media (max-width: 900px) { .rnc-stamp-section__stamp { --stamp-width: clamp(95px, 18vw, 155px); } } /* Mobile */ @media (max-width: 640px) { .rnc-stamp-section__stamp { --stamp-width: clamp(75px, 25vw, 120px); } .rnc-stamp-section__centre { width: 47%; } } /* ================================================== TABLET ================================================== */ @media (max-width: 900px) { /* .rnc-stamp-section__container { width: min(100%, calc(100% - 60px)); } */ .rnc-stamp-section__centre { width: clamp(190px, 30%, 320px); } } /* ================================================== MOBILE ================================================== */ @media (max-width: 640px) { .rnc-stamp-section { /* padding: 25px 0; */ cursor: default; } /* .rnc-stamp-section__container { width: calc(100% - 36px); } */ .rnc-stamp-section__stage { aspect-ratio: 1 / 1; } .rnc-stamp-section__centre { width: 50%; } .rnc-stamp-section__stamp { --stamp-width: clamp(65px, 24vw, 110px); } .rnc-stamp-section__instruction { bottom: 10px; font-size: 8px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .rnc-stamp-section__centre-badge { transition: none; transform: none; } .rnc-stamp-section__stamp { animation: rncStampReducedMotion var(--stamp-duration, 3000ms) linear forwards; filter: none; } } @keyframes rncStampReducedMotion { 0%, 75% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--stamp-rotation, 0deg)) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--stamp-rotation, 0deg)) scale(1); } } /* ================================================== RNC STAMP SECTION — MOBILE INTERACTION HINT ================================================== */ .rnc-stamp-section__mobile-hint { display: none; /* * Keep the hint completely non-interactive so every * tap reaches the stamping stage underneath it. */ pointer-events: none; user-select: none; -webkit-user-select: none; } /* * Show only on touchscreen devices. */ @media (hover: none), (pointer: coarse) { .rnc-stamp-section__mobile-hint { position: absolute; /* * Keep the mobile interaction hint away from the * centre badge by anchoring it to the top-right. */ top: 5%; right: 50%; left: auto; z-index: 8; width: max-content; max-width: calc(100% - 32px); display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 7px; pointer-events: none; user-select: none; -webkit-user-select: none; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.94); transform-origin: top right; transition: opacity 260ms ease, visibility 260ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); } /* * Show the hint only while the section is visible * and before the first stamp has been placed. */ .rnc-stamp-section.is-stamp-section-visible:not(.has-stamped-once) .rnc-stamp-section__mobile-hint { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .rnc-stamp-section__mobile-hint-image { display: block; width: 80px; height: 80px; object-fit: contain; object-position: center; pointer-events: none; animation: rncMobileStampHint 1.55s ease-in-out infinite; transform-origin: center bottom; filter: drop-shadow( 0 7px 8px rgba(55, 22, 0, 0.16) ); } .rnc-stamp-section__mobile-hint-text { display: block; padding: 7px 13px; border-radius: 999px; background: rgba(248, 238, 227, 0.88); color: #006d47; font-family: "Montserrat", "Inter", sans-serif; font-size: 10px; font-weight: 500; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 7px 18px rgba(55, 22, 0, 0.1); } /* * Hide only after JavaScript confirms that a stamp * was successfully created inside the stage. */ .rnc-stamp-section.has-stamped-once .rnc-stamp-section__mobile-hint { opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.88); } } @keyframes rncMobileStampHint { 0%, 100% { transform: translateY(-4px) rotate(-4deg) scale(1); } 42% { transform: translateY(4px) rotate(-4deg) scale(0.9); } 58% { transform: translateY(0) rotate(-4deg) scale(1.05); } } @media (prefers-reduced-motion: reduce) { .rnc-stamp-section__mobile-hint-image { animation: none; } } /* ================= RNC Stationery Mouse Drift ================= */ .rnc-mockup-drift { position: relative; isolation: isolate; width: 100%; min-height: clamp(430px, 48vw, 750px); display: flex; align-items: center; background-color: #146e4e; overflow: hidden; } /* Monotone grain matching the brand-system panel */ .rnc-mockup-drift::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 72px 72px; mix-blend-mode: multiply; opacity: 0.25; } /* * Desktop viewport clips the first and last cards, * matching your reference composition. */ .rnc-mockup-drift__viewport { position: relative; z-index: 1; width: 100%; overflow: hidden; } /* Horizontally oversized row */ .rnc-mockup-drift__track { width: max-content; display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(45px, 6vw, 100px); /* * More horizontal padding gives the row more * available horizontal travelling distance. */ padding: clamp(65px, 8vw, 115px) clamp(100px, 10vw, 180px); transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; } .rnc-mockup-drift__item { flex: 0 0 auto; /* * This controls the visible outer frame width. * Keep these widths unchanged to preserve the * current horizontal travel pattern. */ width: var( --item-width, clamp(280px, 27vw, 420px) ); /* * This limits the visible frame shape. */ aspect-ratio: var( --item-ratio, 4 / 3 ); margin: 0; overflow: hidden; border-radius: var( --item-radius, 20px ); transform: translate3d( 0, var(--item-offset-y, 0px), 0 ) rotate(var(--item-rotation, 0deg)); transform-origin: center; backface-visibility: hidden; } .rnc-mockup-drift__item img { display: block; /* * The image fills the limited outer frame. */ width: 100%; height: 100%; object-fit: var( --item-fit, cover ); object-position: var( --image-position, center ); /* * This enlarges the image without enlarging * the outer card or changing track width. */ transform: translate3d( var(--image-x, 0px), var(--image-y, 0px), 0 ) scale(var(--image-scale, 1)); transform-origin: var( --image-origin, center ); border-radius: inherit; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; backface-visibility: hidden; } /* Slight lift when the pointer is over an image */ @media (hover: hover) and (pointer: fine) { .rnc-mockup-drift__item { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .rnc-mockup-drift__item:hover { transform: translate3d( 0, calc(var(--item-offset-y, 0px) - 8px), 0 ) rotate(var(--item-rotation, 0deg)) scale(1.015); } } /* ================================================== TABLET ================================================== */ @media (max-width: 1000px) { .rnc-mockup-drift { min-height: 500px; } .rnc-mockup-drift__track { gap: 65px; } } /* ================================================== RNC MOCKUP DRIFT — BOUNDED SMOOTH MOBILE GALLERY No clones and no looping. Existing card sizes, ratios, image zoom values and rotations are preserved. ================================================== */ @media (max-width: 768px) { .rnc-mockup-drift { min-height: auto; display: block; padding: 40px 0; overflow: hidden; } .rnc-mockup-drift__viewport { position: relative; width: 100%; max-width: 100%; margin: 0; overflow: hidden; /* Horizontal movement belongs to JavaScript. */ touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .rnc-mockup-drift__viewport.is-dragging { cursor: grabbing; } .rnc-mockup-drift__track { width: max-content; min-width: max-content; max-width: none; display: flex; flex-flow: row nowrap; align-items: center; gap: clamp(38px, 11vw, 55px); padding: 55px 24px; transform: translate3d( var(--rnc-mobile-gallery-x, 0px), 0, 0 ) !important; transition: none !important; will-change: transform; backface-visibility: hidden; transform-style: preserve-3d; user-select: none; -webkit-user-select: none; } .rnc-mockup-drift__item { flex: 0 0 auto; width: var( --mobile-width, min(58vw, 340px) ); aspect-ratio: var( --mobile-ratio, var(--item-ratio, 4 / 3) ); margin: 0; transform: translate3d( 0, var( --mobile-offset-y, var(--item-offset-y, 0px) ), 0 ) rotate(var(--item-rotation, 0deg)); transform-origin: center; backface-visibility: hidden; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .rnc-mockup-drift__item img { display: block; width: 100%; height: 100%; object-fit: var(--item-fit, cover); object-position: var(--image-position, center); transform: translate3d( var( --mobile-image-x, var(--image-x, 0px) ), var( --mobile-image-y, var(--image-y, 0px) ), 0 ) scale( var( --mobile-image-scale, var(--image-scale, 1) ) ); border-radius: var( --mobile-radius, 8px ); /* box-shadow: 0 14px 30px rgba(0, 45, 30, 0.14); */ pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; backface-visibility: hidden; } } @media (max-width: 390px) { .rnc-mockup-drift { padding: 45px 0; } .rnc-mockup-drift__track { gap: 42px; padding: 48px 20px; } } /* ================= RNC Cup Mockup Showcase ================= */ .rnc-cup-showcase { position: relative; isolation: isolate; width: 100%; min-height: clamp(520px, 52vw, 760px); display: flex; align-items: center; justify-content: center; padding: clamp(70px, 9vw, 130px) 0; background-color: #895431; border-top: 10px solid #ffffff; border-bottom: 10px solid #ffffff; overflow: hidden; } /* Optional subtle texture */ .rnc-cup-showcase::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 90px 90px; mix-blend-mode: soft-light; opacity: 0.16; } /* Same container system as the Hero */ .rnc-cup-showcase__container { position: relative; z-index: 1; width: min(1400px, calc(100% - 100px)); margin: 0 auto; display: flex; align-items: center; justify-content: center; } /* * The stage remains centred. * Both images are positioned relative to this area. */ .rnc-cup-showcase__stage { position: relative; width: min(720px, 68vw); aspect-ratio: 1.28 / 1; margin: 0 auto; } /* Shared image setup */ .rnc-cup-showcase__image { position: absolute; left: 50%; top: 50%; display: block; height: auto; object-fit: contain; object-position: center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; transform-origin: center; backface-visibility: hidden; /* * Reveal variables. * The normal resting value is zero movement * and full scale. */ --cup-reveal-x: 0px; --cup-reveal-y: 0px; --cup-reveal-scale: 1; } /* Left cup and saucer */ .rnc-cup-showcase__image--left { width: 76%; /* * The first translate preserves your existing * cup position. * * The second translate is only for revealing. */ transform: translate(-75%, -58%) translate3d( var(--cup-reveal-x), var(--cup-reveal-y), 0 ) scale(var(--cup-reveal-scale)); z-index: 1; } /* Right glass mug */ .rnc-cup-showcase__image--right { width: 70%; transform: translate(-22%, -45%) translate3d( var(--cup-reveal-x), var(--cup-reveal-y), 0 ) scale(var(--cup-reveal-scale)); z-index: 2; } @media (max-width: 900px) { .rnc-cup-showcase { min-height: 560px; padding: 80px 0; /* border-top: 4px solid #ffffff; border-bottom: 4px solid #ffffff; */ } .rnc-cup-showcase__container { width: min(100%, calc(100% - 60px)); } .rnc-cup-showcase__stage { width: min(650px, 82vw); } .rnc-cup-showcase__image--left { width: 77%; /* transform: translate(-67%, -48%); */ /* rotate(-1deg); */ } .rnc-cup-showcase__image--right { width: 71%; /* transform: translate(-33%, -47%); */ /* rotate(7deg); */ } } @media (max-width: 640px) { .rnc-cup-showcase { min-height: 420px; padding: 55px 0; border-top-width: 3px; border-bottom-width: 3px; } .rnc-cup-showcase__container { width: calc(100% - 30px); } .rnc-cup-showcase__stage { width: 100%; max-width: 450px; aspect-ratio: 1.05 / 1; } .rnc-cup-showcase__image--left { width: 82%; /* transform: translate(-68%, -49%); */ /* rotate(-1deg); */ } .rnc-cup-showcase__image--right { width: 76%; /* transform: translate(-31%, -47%); */ /* rotate(7deg); */ } .rnc-cup-showcase::before { background-size: 75px 75px; opacity: 0.14; } } /* ================================================== CUP SHOWCASE REVEAL ================================================== */ .rnc-reveal--cup-left { --cup-reveal-x: -48px; --cup-reveal-y: 18px; --cup-reveal-scale: 0.96; } .rnc-reveal--cup-right { --cup-reveal-x: 48px; --cup-reveal-y: 18px; --cup-reveal-scale: 0.96; } .rnc-reveal--cup-left.is-revealed, .rnc-reveal--cup-right.is-revealed { --cup-reveal-x: 0px; --cup-reveal-y: 0px; --cup-reveal-scale: 1; } /* ================= RNC Taste Image Trail ================= */ .rnc-taste-trail { --taste-green: #006d47; --taste-gold: #d09f18; /* --taste-cream: #f8eee3; */ position: relative; isolation: isolate; width: 100%; min-height: clamp(650px, 62vw, 1000px); display: grid; place-items: center; padding: clamp(85px, 9vw, 140px) 30px; overflow: hidden; background-color: var(--taste-green); color: var(--taste-gold); } /* Green monotone texture */ /* .rnc-taste-trail::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 75px 75px; mix-blend-mode: multiply; opacity: 0.24; } */ /* Main centred copy */ .rnc-taste-trail__content { position: relative; z-index: 2; width: min(800px, 82%); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; } .rnc-taste-trail__top-icon { width: 52px; height: auto; display: block; margin: 0 auto 50px; } .rnc-taste-trail__title { margin: 0; color: var(--taste-gold); font-family: var(--carattere-font); font-size: clamp(43px, 4.5vw, 64px); font-weight: 400; line-height: 62px; letter-spacing: 5%; text-align: center; } .rnc-taste-trail__title span { display: block; } .rnc-taste-trail__description { max-width: 600px; margin: 25px auto 0; color: var(--taste-gold); font-family: var(--carattere-font); font-size: clamp(17px, 1.4vw, 23px); font-weight: 400; line-height: 110%; letter-spacing: 5%; text-align: center; } /* ================================================== DESKTOP MOUSE IMAGE TRAIL ================================================== */ .rnc-taste-trail__desktop-layer { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; } /* * These images are generated by JavaScript only * after the mouse begins moving. */ /* ================================================== DESKTOP — QUICK POP THEN GRAVITY DROP ================================================== */ .rnc-taste-trail__desktop-image { position: absolute; left: var(--trail-x); top: var(--trail-y); z-index: var(--trail-z, 1); width: var(--trail-width, 240px); max-width: 32vw; max-height: 45vh; display: block; object-fit: contain; object-position: center; /* * The image does not fade. * It is visible immediately at a smaller scale. */ opacity: 1; transform: translate(-50%, -50%) rotate(var(--trail-rotation, 0deg)) scale(0.58); transform-origin: center; pointer-events: none; user-select: none; -webkit-user-drag: none; backface-visibility: hidden; will-change: transform; animation: rncTasteDesktopPopAndFall var(--trail-lifetime, 1850ms) linear forwards; } /* * Timeline: * * 0–18% = quick smooth pop * 18–28% = short hold * 28–100% = gravity fall * * Opacity always remains 1. * The section's overflow hides it after it falls out. */ @keyframes rncTasteDesktopPopAndFall { /* Small starting image */ 0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--trail-rotation, 0deg)) scale(0.58); } /* Quick pop */ 8% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--trail-rotation, 0deg)) scale(1.08); } /* Small bounce back */ 14% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--trail-rotation, 0deg)) scale(0.97); } /* Settle */ 20% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--trail-rotation, 0deg)) scale(1); } /* * Hold briefly before falling. * The timing function after this frame makes * the next movement accelerate like gravity. */ 30% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--trail-rotation, 0deg)) scale(1); animation-timing-function: cubic-bezier(0.45, 0, 1, 1); } /* * Remain visible and fall outside the section. * There is no opacity fade. */ 100% { opacity: 1; transform: translate( calc( -50% + var(--trail-fall-x, 0px) ), calc( -50% + var(--trail-fall-distance, 700px) ) ) rotate( calc( var(--trail-rotation, 0deg) + var(--trail-fall-rotation, 30deg) ) ) scale(1); } } /* ================================================== MOBILE AUTO STACK ================================================== */ .rnc-taste-trail__mobile-stack, .rnc-taste-trail__bottom-icon { display: none; } /* ================================================== MOBILE / TOUCH DEVICE ================================================== */ @media (max-width: 768px), (hover: none) { .rnc-taste-trail { /* min-height: 900px; */ display: block; padding: 72px 22px 75px; } .rnc-taste-trail__content { width: min(100%, 520px); } .rnc-taste-trail__top-icon { width: 26px; margin-bottom: 31px; } .rnc-taste-trail__title { /* max-width: 540px; */ font-size: clamp(24px, 6vw, 32px); line-height: 23px; } .rnc-taste-trail__description { max-width: 330px; margin-top: 25px; font-size: clamp(12px, 2.6vw, 20px); line-height: 115%; } /* Desktop cursor trail is completely disabled */ .rnc-taste-trail__desktop-layer { display: none; } .rnc-taste-trail__mobile-stack { position: relative; z-index: 3; width: min(78vw, 350px); height: min(78vw, 350px); display: block; margin: 28px auto 0; pointer-events: none; } /* ================================================== MOBILE — ENTER FROM THE RIGHT EDGE ================================================== */ .rnc-taste-trail__mobile-card { position: absolute; left: 50%; top: 50%; width: min(67vw, 285px); max-height: min(67vw, 285px); display: block; object-fit: contain; object-position: center; opacity: var(--stack-opacity, 1); z-index: var(--stack-z, 1); transform: translate(-50%, -50%) translate3d( var(--stack-x, 0px), var(--stack-y, 0px), 0 ) rotate(var(--stack-rotation, 0deg)) scale(var(--stack-scale, 1)); transform-origin: center; pointer-events: none; user-select: none; -webkit-user-drag: none; backface-visibility: hidden; will-change: transform, opacity; transition: transform 0.82s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease; } /* * The image begins outside the right edge. * Its vertical starting point and angle are * randomly provided by JavaScript. */ .rnc-taste-trail__mobile-card.is-entering { opacity: 1; transform: translate(-50%, -50%) translate3d( var(--card-enter-x, 100vw), var(--card-enter-y, 0px), 0 ) rotate( var(--card-enter-rotation, 12deg) ) scale(0.78); } /* Old cards can still leave toward the left */ .rnc-taste-trail__mobile-card.is-leaving { opacity: 0; transform: translate(-50%, -50%) translate3d(-70px, -12px, 0) rotate(-7deg) scale(0.86); } .rnc-taste-trail__bottom-icon { position: relative; z-index: 2; width: 19px; height: auto; display: block; margin: 23px auto 0; } } @media (max-width: 420px) { .rnc-taste-trail { /* min-height: 810px; */ padding-left: 20px; padding-right: 20px; } .rnc-taste-trail__mobile-stack { width: 82vw; height: 82vw; max-width: 330px; max-height: 330px; margin-top: 40px; } .rnc-taste-trail__mobile-card { width: 72vw; max-width: 275px; max-height: 275px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .rnc-taste-trail__desktop-image { animation: none; opacity: 1; transform: translate(-50%, -50%) rotate(var(--trail-rotation, 0deg)); } .rnc-taste-trail__mobile-card { transition: none; } } /* ================= RNC Outlet Collage ================= */ .rnc-outlet-collage { position: relative; isolation: isolate; width: 100%; min-height: clamp(760px, 115vw, 1550px); display: grid; place-items: center; padding: clamp(85px, 8vw, 125px) 0; overflow: hidden; background-color: #895431; } /* Subtle monotone texture */ /* .rnc-outlet-collage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 80px 80px; mix-blend-mode: multiply; opacity: 0.14; } */ .rnc-outlet-collage__container { position: relative; z-index: 1; width: min(1400px, calc(100% - 100px)); margin: 0 auto; display: flex; align-items: center; justify-content: center; } /* * Every card uses percentage positioning inside this * stage, so the overall arrangement scales together. */ .rnc-outlet-collage__stage { position: relative; width: min(980px, 78vw); aspect-ratio: 0.94 / 1; margin: 0 auto; } /* Individual overlapping card */ .rnc-outlet-collage__item { position: absolute; left: var(--x); top: var(--y); z-index: var(--z, 1); width: var(--w); /* * Each image can now have its own aspect ratio. */ aspect-ratio: var(--ratio, 4 / 3); display: block; margin: 0; padding: 0; border: 0; border-radius: var(--radius, 0px); outline: 0; /* * Required when using cover and image zoom. */ overflow: hidden; background: var(--item-background, transparent); cursor: pointer; transform: translate(0, 0) rotate(var(--rotation, 0deg)) scale(1); transform-origin: center; backface-visibility: hidden; will-change: transform; transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1), /* box-shadow 0.4s ease, */ filter 0.4s ease; } .rnc-outlet-collage__item img { display: block; width: 100%; height: 100%; object-fit: var(--fit, cover); object-position: var(--position, center); transform: translate( var(--image-x, 0px), var(--image-y, 0px) ) scale(var(--image-scale, 1)); transform-origin: var(--image-origin, center); user-select: none; -webkit-user-select: none; -webkit-user-drag: none; backface-visibility: hidden; /* box-shadow: 0 14px 32px rgba(44, 19, 4, 0.13); */ transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), /* box-shadow 0.4s ease, */ filter 0.4s ease; } /* Keep keyboard focus visible */ .rnc-outlet-collage__item:focus-visible { outline: 3px solid #f8eee3; outline-offset: 7px; } /* ================================================== DESKTOP HOVER ================================================== */ @media (min-width: 769px) and (hover: hover) and (pointer: fine) { .rnc-outlet-collage__item:hover, .rnc-outlet-collage__item:focus-visible { /* z-index: 30; */ transform: translate( var(--hover-x, 0px), var(--hover-y, -20px) ) rotate(var(--rotation, 0deg)) scale(1.09); } .rnc-outlet-collage__item:hover img, .rnc-outlet-collage__item:focus-visible img { filter: brightness(1.04); /* box-shadow: 0 28px 52px rgba(44, 19, 4, 0.3); */ } } /* ================================================== TABLET ================================================== */ @media (max-width: 900px) { .rnc-outlet-collage { min-height: clamp(700px, 112vw, 1000px); } .rnc-outlet-collage__container { width: min(100%, calc(100% - 50px)); } .rnc-outlet-collage__stage { width: min(700px, 88vw); } } /* ================================================== MOBILE ================================================== */ @media (max-width: 640px) { .rnc-outlet-collage { min-height: 650px; padding: 75px 0; } .rnc-outlet-collage__container { width: min(100%, calc(100% - 40px)); } /* * The same percentage positions are preserved. * Only the stage dimensions become mobile-sized. */ .rnc-outlet-collage__stage { width: 94vw; max-width: 500px; aspect-ratio: 0.8 / 1; } .rnc-outlet-collage__item { /* * Prevent lingering hover states on touch devices. */ transition: transform 0.2s ease; aspect-ratio: var( --mobile-ratio, var(--ratio, 4 / 3) ); } .rnc-outlet-collage__item:active { transform: translate(0, 0) rotate(var(--rotation, 0deg)) scale(0.98); } } @media (max-width: 390px) { .rnc-outlet-collage { min-height: 490px; padding: 60px 0; } .rnc-outlet-collage__stage { width: 96vw; } } /* ================= RNC Gallery Preview ================= */ body.rnc-preview-open { overflow: hidden; } .rnc-gallery-preview[hidden] { display: none !important; } .rnc-gallery-preview { position: fixed; inset: 0; z-index: 10000; display: grid; grid-template-columns: minmax(55px, 1fr) minmax(0, 1100px) minmax(55px, 1fr); align-items: center; padding: 30px; background: rgba(18, 9, 4, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.28s ease, visibility 0.28s ease; } .rnc-gallery-preview.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .rnc-gallery-preview__figure { grid-column: 2; width: 100%; height: min(82vh, 850px); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; } .rnc-gallery-preview__image { display: block; max-width: 100%; max-height: calc(100% - 40px); width: auto; height: auto; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); /* box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34); */ } /* Used briefly while changing image */ .rnc-gallery-preview__image.is-changing { opacity: 0; transform: scale(0.97); } .rnc-gallery-preview__counter { margin-top: 18px; color: rgba(248, 238, 227, 0.8); font-family: "Montserrat", "Inter", sans-serif; font-size: 12px; line-height: 1; letter-spacing: 0.08em; } .rnc-gallery-preview__close, .rnc-gallery-preview__nav { appearance: none; border: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(248, 238, 227, 0.11); color: #f8eee3; cursor: pointer; transition: background-color 0.25s ease, transform 0.25s ease; } .rnc-gallery-preview__close:hover, .rnc-gallery-preview__nav:hover { background: rgba(248, 238, 227, 0.22); } .rnc-gallery-preview__close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; font-size: 34px; line-height: 1; } .rnc-gallery-preview__nav { width: 54px; height: 54px; font-size: 24px; } .rnc-gallery-preview__nav--previous { grid-column: 1; justify-self: center; } .rnc-gallery-preview__nav--next { grid-column: 3; justify-self: center; } .rnc-gallery-preview__close:active, .rnc-gallery-preview__nav:active { transform: scale(0.92); } @media (max-width: 768px) { .rnc-gallery-preview { display: block; padding: max(72px, env(safe-area-inset-top)) 18px max(82px, env(safe-area-inset-bottom)); } .rnc-gallery-preview__figure { width: 100%; height: 100%; justify-content: center; } .rnc-gallery-preview__image { max-width: 94vw; max-height: 72svh; } .rnc-gallery-preview__close { top: max(16px, env(safe-area-inset-top)); right: 16px; width: 43px; height: 43px; font-size: 30px; } .rnc-gallery-preview__nav { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); width: 50px; height: 50px; font-size: 22px; } .rnc-gallery-preview__nav--previous { left: calc(50% - 66px); } .rnc-gallery-preview__nav--next { right: calc(50% - 66px); } .rnc-gallery-preview__counter { margin-top: 15px; } } /* ================= RNC Static Image Banners ================= */ .rnc-static-banner { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; } /* * Full-width banner by default. * * This is not limited to 1400px because your reference * shows the artwork extending across the whole section. */ .rnc-static-banner__container { width: 100%; margin: 0 auto; } .rnc-static-banner__picture { display: block; width: 100%; } .rnc-static-banner__image { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; /* transform: scale(1.4); transform-origin: 45% center; */ user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .rnc-static-banner__image.interior-banner{ transform: scale(1.4); transform-origin: 45% center; } /* ================================================== FIRST BANNER — INTERIOR ================================================== */ .rnc-static-banner--interior { background-color: #3b1f13; } @media (max-width: 768px) { .rnc-static-banner__image.interior-banner { transform: scale(1.55); transform-origin: 48% center; } } /* ================================================== SECOND BANNER — BRAND ELEMENTS Desktop: wide image Mobile: centre-focused portrait crop ================================================== */ .rnc-static-banner--elements { /* * Desktop reference size: * 668 × 288 */ --elements-ratio: 668 / 288; /* * Centre focus point. */ --elements-focus-x: 50%; --elements-focus-y: 50%; /* * Additional image enlargement. * Leave at 1 initially. */ --elements-scale: 1; position: relative; width: 100%; background-color: #895431; overflow: hidden; } /* * The container determines the visible banner shape. */ .rnc-static-banner--elements .rnc-static-banner__container { position: relative; width: 100%; aspect-ratio: var(--elements-ratio); margin: 0; overflow: hidden; } .rnc-static-banner--elements .rnc-static-banner__picture { display: block; width: 100%; height: 100%; overflow: hidden; } /* * Override the shared banner image rule. */ .rnc-static-banner--elements .rnc-static-banner__image { display: block; width: 100%; height: 100%; max-width: none; /* * Desktop shows the complete wide composition * because the frame uses the same aspect ratio. * * Mobile crops the sides and keeps the central * graphic focused. */ object-fit: cover; object-position: var(--elements-focus-x) var(--elements-focus-y); transform: scale(var(--elements-scale)); transform-origin: var(--elements-focus-x) var(--elements-focus-y); backface-visibility: hidden; } @media (max-width: 768px) { .rnc-static-banner--elements { /* * Mobile reference size: * approximately 267 × 287 */ --elements-ratio: 367 / 287; /* * Keep the icon system in the centre. */ --elements-focus-x: 50%; --elements-focus-y: 50%; --elements-scale: 1; } } @media (max-width: 640px) { .rnc-static-banner--elements { /* * Mobile reference size: * approximately 267 × 287 */ --elements-ratio: 267 / 287; /* * Keep the icon system in the centre. */ --elements-focus-x: 50%; --elements-focus-y: 50%; --elements-scale: 1; } } /* ================= RNC Packaging Showcase ================= */ .rnc-packaging-showcase { width: 100%; margin: 0; padding: 8px 12px; background-color: #ffffff; overflow: hidden; } .rnc-packaging-showcase__container { width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .rnc-packaging-showcase__item { position: relative; width: 100%; margin: 0; /* * Both sides maintain the same dimensions. * Change this ratio according to your exported images. */ aspect-ratio: 1.4 / 1; overflow: hidden; background-color: #f8eee3; } .rnc-packaging-showcase__image { width: 100%; height: 100%; display: block; /* * Cover gives a clean equal-height layout. */ object-fit: cover; object-position: center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; backface-visibility: hidden; } /* ================================================== MOBILE ================================================== */ @media (max-width: 768px) { .rnc-packaging-showcase { padding: 15px 30px; } .rnc-packaging-showcase__container { grid-template-columns: 1fr; gap: 8px; } .rnc-packaging-showcase__item { /* * The two images remain landscape on mobile, * matching your reference. */ aspect-ratio: 1.4 / 1; } } /* ================= RNC Website Mockup Showcase ================= */ .rnc-website-showcase { position: relative; isolation: isolate; width: 100%; /* min-height: clamp(430px, 48vw, 720px); */ margin: 0; /* padding: clamp(65px, 8vw, 110px) 0 0; */ background-color: #017246; overflow: hidden; } /* Optional green monotone texture */ /* .rnc-website-showcase::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 78px 78px; mix-blend-mode: multiply; opacity: 0.18; } */ /* * Same maximum-width system used by the other * sections, while keeping the mockup centred. */ .rnc-website-showcase__container { position: relative; z-index: 1; width: min(1400px, calc(100% - 100px)); height: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: flex-start; } /* Main laptop and website mockup */ .rnc-website-showcase__image { display: block; width: clamp(410px, 50vw, 800px); max-width: 100%; height: auto; margin: 0 auto; object-fit: contain; object-position: center top; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; backface-visibility: hidden; } @media (max-width: 900px) { /* .rnc-website-showcase { min-height: clamp(420px, 65vw, 600px); padding-top: 65px; } */ .rnc-website-showcase__container { width: calc(100% - 60px); } .rnc-website-showcase__image { width: clamp(280px, 52vw, 470px); } } @media (max-width: 900px) { .rnc-website-showcase__image { width: 100%; max-width: none; margin: 0 auto; } } @media (max-width: 640px) { /* .rnc-website-showcase { min-height: clamp(390px, 112vw, 520px); padding: clamp(38px, 11vw, 58px) 0 0; overflow: hidden; } */ .rnc-website-showcase__container { width: 100%; margin: 0; justify-content: center; } /* .rnc-website-showcase__image { width: 100%; max-width: none; margin: 0 auto; } */ .rnc-website-showcase::before { background-size: 68px 68px; opacity: 0.16; } } /* ================= RNC Social Media Grid ================= */ .rnc-social-grid { position: relative; isolation: isolate; width: 100%; padding: clamp(110px, 13vw, 190px) 0; overflow: hidden; background-color: #f8eee3; } .rnc-social-grid__viewport { position: relative; z-index: 1; width: min(920px, calc(100% - 100px)); margin: 0 auto; overflow: visible; } .rnc-social-grid__track { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; } .rnc-social-grid__item { position: relative; width: 100%; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background-color: #f8eee3; /* * The preview click is handled on the card itself. * Keeping the image non-interactive prevents native * image dragging without blocking the card click. */ pointer-events: auto; cursor: zoom-in; contain: paint; -webkit-tap-highlight-color: transparent; } .rnc-social-grid__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; /* * The parent card receives click, keyboard and * drag events. The image itself never intercepts them. */ pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; backface-visibility: hidden; } .rnc-social-grid__item:focus-visible { outline: 3px solid #006d47; outline-offset: 5px; } /* @media (hover: hover) and (pointer: fine) { .rnc-social-grid__item { transition: box-shadow 220ms ease; } .rnc-social-grid__item:hover, .rnc-social-grid__item:focus-visible { box-shadow: 0 16px 32px rgba(55, 22, 0, 0.14); } } */ /* ================================================== MOBILE — BOUNDED SMOOTH SOCIAL GALLERY No cloning or looping. Natural image ratios and the existing odd/even maximum widths remain unchanged. ================================================== */ @media (max-width: 768px) { .rnc-social-grid { padding: clamp(115px, 30vw, 165px) 0 clamp(90px, 22vw, 125px); overflow: hidden; } .rnc-social-grid__viewport { position: relative; width: 100%; margin: 0; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .rnc-social-grid__viewport.is-dragging { cursor: grabbing; } .rnc-social-grid__viewport.is-dragging .rnc-social-grid__item { cursor: grabbing; } .rnc-social-grid__track { width: max-content; min-width: max-content; max-width: none; display: flex; flex-flow: row nowrap; align-items: flex-start; gap: 16px; padding: 0 30px 16px; transform: translate3d( var(--rnc-social-gallery-x, 0px), 0, 0 ); transition: none !important; will-change: transform; backface-visibility: hidden; transform-style: preserve-3d; user-select: none; -webkit-user-select: none; } .rnc-social-grid__item { flex: 0 0 auto; width: min(63vw, 285px); max-width: 285px; height: auto; aspect-ratio: auto; margin: 0; overflow: hidden; opacity: 1; transform: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } .rnc-social-grid__item:nth-child(odd) { width: min(78vw, 350px); max-width: 350px; height: auto; aspect-ratio: auto; } .rnc-social-grid__item:nth-child(even) { width: min(63vw, 285px); max-width: 285px; height: auto; aspect-ratio: auto; } .rnc-social-grid__image { display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; } /* Desktop reveal remains disabled on the mobile gallery. */ .rnc-social-grid__item.rnc-reveal-ready, .rnc-social-grid__item.rnc-reveal--social, .rnc-social-grid__item.rnc-reveal--social-pop, .rnc-social-grid__item.is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } } @media (max-width: 390px) { .rnc-social-grid { padding-top: 105px; padding-bottom: 80px; } .rnc-social-grid__track { gap: 14px; padding-left: 20px; padding-right: 20px; } .rnc-social-grid__item { width: min(68vw, 265px); max-width: 265px; } .rnc-social-grid__item:nth-child(odd) { width: min(76vw, 290px); max-width: 290px; } .rnc-social-grid__item:nth-child(even) { width: min(68vw, 265px); max-width: 265px; } } /* ================================================== RNC REVERSIBLE SCROLL REVEAL No blur, no filter ================================================== */ .rnc-reveal-ready { --reveal-duration: 760ms; --reveal-exit-duration: 460ms; --reveal-delay: 0ms; /* * Exit uses no delay so the item responds * immediately when leaving the viewport. */ --reveal-active-duration: var(--reveal-exit-duration); --reveal-active-delay: 0ms; opacity: 0; transition: opacity var(--reveal-active-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-active-delay), transform var(--reveal-active-duration) cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-active-delay); backface-visibility: hidden; } /* * When entering, use the longer reveal duration * and the individual stagger delay. */ .rnc-reveal-ready.is-revealed { --reveal-active-duration: var(--reveal-duration); --reveal-active-delay: var(--reveal-delay); opacity: 1; } /* * GPU promotion exists only during a transition. * It is not left permanently active. */ .rnc-reveal-ready.is-reveal-animating { will-change: opacity, transform; } /* ================================================== LOGO SYSTEM ================================================== */ .rnc-reveal--logo { transform: translate3d(0, 34px, 0) scale(0.972); } .rnc-reveal--logo.is-revealed { transform: translate3d(0, 0, 0) scale(1); } /* ================================================== CUP SHOWCASE The cup positioning transforms remain in the existing cup CSS. Only these variables change. ================================================== */ .rnc-reveal--cup-left { --cup-reveal-x: -42px; --cup-reveal-y: 16px; --cup-reveal-scale: 0.965; } .rnc-reveal--cup-right { --cup-reveal-x: 42px; --cup-reveal-y: 16px; --cup-reveal-scale: 0.965; } .rnc-reveal--cup-left.is-revealed, .rnc-reveal--cup-right.is-revealed { --cup-reveal-x: 0px; --cup-reveal-y: 0px; --cup-reveal-scale: 1; } /* ================================================== PACKAGING SHOWCASE ================================================== */ .rnc-reveal--packaging-left { transform: translate3d(-38px, 20px, 0) scale(0.978); } .rnc-reveal--packaging-right { transform: translate3d(38px, 20px, 0) scale(0.978); } .rnc-reveal--packaging-left.is-revealed, .rnc-reveal--packaging-right.is-revealed { transform: translate3d(0, 0, 0) scale(1); } /* ================================================== SOCIAL GRID — DESKTOP CENTRE POP REVEAL Each social card grows from its own centre. JavaScript supplies a short stagger so the images appear one by one without using blur or filters. ================================================== */ @media (min-width: 769px) { .rnc-social-grid__item.rnc-reveal--social-pop { opacity: 0; transform: translate3d(0, 0, 0) scale(0.88); transform-origin: center center; /* * Preserve the existing hover shadow transition * while adding the reveal animation. */ transition: opacity var(--reveal-active-duration) cubic-bezier(0.34, 1.18, 0.64, 1) var(--reveal-active-delay), transform var(--reveal-active-duration) cubic-bezier(0.34, 1.18, 0.64, 1) var(--reveal-active-delay), box-shadow 220ms ease; backface-visibility: hidden; } .rnc-social-grid__item.rnc-reveal--social-pop.is-revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } /* ================================================== SOCIAL GRID — MOBILE SLIDER UNCHANGED ================================================== */ @media (max-width: 768px) { .rnc-social-grid__item.rnc-reveal-ready, .rnc-social-grid__item.rnc-reveal--social, .rnc-social-grid__item.rnc-reveal--social-pop, .rnc-social-grid__item.is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto !important; } } /* ================================================== REDUCED MOTION ================================================== */ @media (prefers-reduced-motion: reduce) { .rnc-reveal-ready, .rnc-reveal-ready.is-revealed { opacity: 1; transition: none; will-change: auto; } /* * These elements do not rely on transform * for their core positioning. */ .rnc-reveal--logo, .rnc-reveal--packaging-left, .rnc-reveal--packaging-right, .rnc-reveal--social-pop { transform: none; } /* * Preserve the cups' main positioning transforms. */ .rnc-reveal--cup-left, .rnc-reveal--cup-right { --cup-reveal-x: 0px; --cup-reveal-y: 0px; --cup-reveal-scale: 1; } }