@charset "utf-8"; /* CSS Document */ * { 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; } 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; } .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; } /* Tablet screens */ @media (max-width: 900px) { .hero-container { grid-template-columns: 1fr; text-align: center; padding-top: 120px; } .hero-left { padding-right: 0; max-width: 600px; margin: 0 auto; } /* .hero-stats { justify-content: center; } */ .hero-right { display: none; } .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } } /* Medium screens - stack navigation */ @media (max-width: 1070px) and (min-width: 769px) { nav { padding: 15px 30px; } /* .nav-container { flex-direction: column; gap: 15px; } .nav-links { width: 100%; justify-content: center; } .nav-links a { font-size: 12px; } nav.scrolled { padding: 10px 30px; } */ .hero-container { padding: 0 30px; } .hero-title { font-size: 40px; } .hero-image-wrapper { max-width: 400px; } section { scroll-margin-top: 100px; } } /* Hero Section */ .hero { height: 75vh; position: relative; overflow: hidden; background: var(--page-section-bg); color: var(--page-text-main); } @media (max-width: 580px) { .hero { height: 80vh !important; } } @media (max-width: 400px) { .hero { height: 105vh !important; } } .hero-banner { height: 100%; } .home_banner_logo { position: absolute; top: 40%; left: 0; width: 55%; max-width: 370px; padding-left: 30px; } .hero-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .hero-bg::before { content: ''; position: absolute; width: 150%; height: 150%; top: -25%; left: -25%; /* background: conic-gradient(from 180deg at 50% 50%, #ff3366 0deg, #000 60deg, #ff3366 120deg, #000 180deg, #ff3366 240deg, #000 300deg, #ff3366 360deg); */ /* animation: spin 20s linear infinite; */ opacity: 0.15; } .hero-bg::after { content: ''; position: absolute; width: 100%; height: 100%; /* background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%); */ } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* --- HERO LAYOUT --- */ .hero-container{ /* 2 columns: left info | right content */ display: grid; grid-template-columns: 1fr 1fr; /* tweak ratio */ column-gap: 56px; max-width: 1400px; margin: 0 auto; padding: 50px; /* give breathing room so the bottom lines can align visually */ min-height: clamp(420px, 58vh, 720px); align-items: stretch; /* both columns same height */ } /* make each side a vertical stack */ .hero-left, .hero-right{ display: flex; flex-direction: column; } /* RIGHT COLUMN (title + paragraph at top, meta at bottom) */ .hero-title{ margin: 0 0 16px; font-size: 36px; font-weight: 400; color: var(--page-text-main); line-height: 121%; } .hero-description{ font-size: 15px; font-weight: 400; color: var(--page-text-main); line-height: 20px; max-width: 64ch; margin: 0 0 28px; } /* LEFT COLUMN (no image — keep spacer if you ever add one) */ .hero-image-wrapper{ flex: 1; } /* keeps top area open on the left */ /* push both declare rows to the very bottom baseline */ .hero-left .hero-declare-container, .hero-right .hero-declare-container{ margin-top: auto; /* 👈 key line */ } /* optional: lighter client label look */ .hero-description-declare{ color: var(--page-text-muted); } /* spacing and rhythm */ .hero-declare-container{ display: flex; gap: 28px; flex-wrap: wrap; max-width: 500px; width: 100%; } /* tablet/mobile: stack with clean spacing */ @media (max-width: 900px){ .hero { height: 82vh; } .hero-container{ grid-template-columns: 1fr; row-gap: 24px; min-height: unset; } .hero-declare-container { flex-direction: column; } .hero-right .hero-declare-container{ order: 2; /* put client label below content when stacked */ margin-top: 16px; } } /*------------------------------ Video card ----------------------------*/ /* Home banner section spacing (optional, tweak as you like) */ #homeBanner { padding: 40px 0; /* some breathing space around the video */ } /* Wrapper */ .video-card { position: relative; width: 100%; /* max-width: 1200px; */ margin: 40px 0 0; overflow: hidden; /* border-radius: 16px; */ } /* Give it a fixed aspect ratio (desktop: 16:9) */ .video-card::before { content: ""; display: block; padding-top: 56.25%; /* 16 / 9 = 0.5625 */ } /* Make the video fill and crop inside this frame */ .video-card__video { position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 */ width: 100%; height: 100%; /* display: block; */ object-fit: cover; /* crop instead of letterbox */ object-position: center 70%; /* focus lower area (red podium + cups) */ } @media (max-width: 768px) { #homeBanner { padding: 16px 0; /* optional: reduce side padding on mobile */ } .video-card { max-width: 100%; border-radius: 0; /* full-bleed on mobile, optional */ } /* Taller ratio on mobile so KV looks bigger */ .video-card::before { padding-top: 80%; /* 4:5-ish, adjust if you want */ } /* Taller ratio on mobile so KV looks bigger */ /* .brand-exp.video-card::before { padding-top: 125%; } */ /* Push frame further down so red box is really the focus */ .video-card__video { object-position: center 75%; } .see-more-svg { width: 70% !important; } .see-more-btn::before { content: ""; position: absolute; width: 68px; height: 68px; border-radius: 50%; background: #ffffff; /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); */ } } /* container under the KV */ .see-more-section { display: flex; justify-content: center; align-items: center; padding: 32px 0 0 0; /* adjust spacing as you like */ margin-top: -160px; /* pull it up to overlap slightly with the podium */ /* margin-bottom: 56px; */ } /* clickable circle */ .see-more-btn { position: relative; width: 200px; height: 200px; display: inline-flex; justify-content: center; align-items: center; text-decoration: none; } /* white inner circle behind arrow */ .see-more-btn::before { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; background: #ffffff; /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); */ } /* SVG circle + text */ .see-more-svg { width: 75%; height: 100%; } /* circular text style */ .see-more-text { font-size: 16px; letter-spacing: 0.5px; /* text-transform: uppercase; */ stroke: black; stroke-width: 0.5px; fill: transparent; /* match your Nissin red / accent color */ } /* center arrow */ .see-more-arrow { position: absolute; left: 52%; top: 48%; /* square box so rotation doesn't shift layout */ width: 85px; height: 85px; display: flex; align-items: center; justify-content: center; font-size: 85px; color: #ff0000; /* arrow color */ z-index: 1; transform-origin: 50% 50%; /* center in the circle, angle will be overridden by JS */ transform: translate(-50%, -50%) rotate(0deg); transition: transform 0.2s linear, color 0.2s ease; } /* hover effect */ /* .see-more-btn:hover .see-more-arrow { transform: translateX(4px); } */ .see-more-btn:hover .see-more-text { fill: #000; } /* optional: slightly smaller on mobile */ /* mobile adjustments */ @media (max-width: 480px) { .see-more-btn { width: 120px; height: 120px; } .see-more-btn::before { height: 80px; width: 80px; } .see-more-svg { width: 85% !important; } /* .see-more-text { font-size: 15px; } */ .see-more-section { margin-top: -115px; margin-bottom: 40px; } .see-more-arrow { font-size: 50px; } } @media (max-width: 600px) { .see-more-btn { width: 120px; height: 120px; } .see-more-btn::before { height: 80px; width: 80px; } .see-more-svg { width: 85% !important; } /* .see-more-text { font-size: 9.5px; } */ .see-more-section { margin-top: -115px; margin-bottom: 40px; } .see-more-arrow { font-size: 50px; /* left: 18%; top: 12%; */ } } /* If you want full-bleed hero style across the screen, you can also do: */ /* #homeBanner { padding: 0; } .video-card { max-width: none; border-radius: 0; } */ /* Hide the play button if you don't need it anymore */ .video-card__play { display: none; } /*--------------------------- About box --------------------------------*/ /* outer section */ /* .case-section { padding: 72px 16px; background: #ffffff; } */ /* big red frame around both columns */ .case-frame { max-width: 1400px; margin: 0 auto; /* border: 2px solid var(--accent); */ display: flex; align-items: center; /* gap: 40px; */ padding: 50px; box-sizing: border-box; /* background: var(--page-card-bg); */ } /* left & right columns */ .case-copy { flex: 1 1 60%; } .case-visual { flex: 1 1 40%; display: flex; align-items: center; justify-content: center; } .case-visual img { width: 100%; height: auto; display: block; } /* inner red frame on the left panel */ .about-box-panel { border: 2px solid var(--nissin-red); /* background: #ffffff; */ } /* header grid: 3 cells */ .about-box-header-grid { display: grid; grid-template-columns: 120px 1fr; border-bottom: 2px solid var(--nissin-red); } .about-box-cell { min-height: 80px; display: flex; align-items: center; padding: 16px 20px; /* border-right: 2px solid var(--nissin-red); */ } .about-box-cell:last-child { border-right: none; } /* step circle "01" */ .about-step-wrapper { width: 100%; display: flex; justify-content: center; } /* container for icon + number badge */ .about-step-circle { position: relative; display: inline-block; /* shrink to the size of the icon */ } /* Nissin icon itself */ .about-step-circle img { display: block; width: 100px; /* adjust to match your design */ height: auto; } /* 01 badge */ .about-step-number { position: absolute; bottom: 9px; /* push it slightly below the icon */ left: 50%; transform: translateX(-50%);/* center horizontally; tweak if needed */ width: 32px; height: 32px; border-radius: 50%; background: transparent; /* Nissin red (or use your var) */ color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 24px; /* box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); */ } /* title cell */ .about-box-title { font-size: 36px; font-weight: 400; margin: 0; color: var(--page-text-main); } /* empty cell: keep structure but visually calm */ .about-box-cell--empty { justify-content: flex-end; } /* body copy block */ .about-box-body { padding: 24px 24px 28px; /* background: #f7f7f7; */ font-size: 15px; line-height: 1.7; color: var(--page-text-muted); } .about-box-body p { margin: 0 0 12px; color: var(--page-text-muted); line-height: 20px; } .about-box-body p:last-child { margin-bottom: 0; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 992px) { .case-frame { flex-direction: column; padding: 50px; } .about-box-header-grid { grid-template-columns: auto !important; grid-template-rows: auto auto auto !important; } .about-box-cell { justify-content: center; } .about-box-body { text-align: center; } .about-box-cell--empty { display: none; /* hide third empty cell on smaller screens */ } } @media (max-width: 600px) { .case-section { padding: 45px 0 !important; } .case-frame { /* padding: 20px; */ gap: 20px; } /* .about-box-body { padding: 20px; font-size: 13px; } */ .about-box-title { text-align: center; font-size: 18px !important; } /* .about-step-circle { width: 100%; height: 100%; font-size: 13px; } */ } /*---------------------------- Home Banner with Logo -------------------*/ /* section */ .home-banner { padding: 0; background:#fff; } .home-banner__media{ position: relative; /* anchor for absolute logo */ overflow: hidden; } .home-banner__img{ display:block; width:100%; height:auto; /* optional: lock a consistent height/crop */ aspect-ratio: 29 / 16; } /* align the logo to the page content line */ .home-banner__logo{ position:absolute; top: 48%; /* tweak vertical placement */ transform: translateY(-50%); left: calc( (100vw - min(var(--container), 100vw - 2*var(--gutter)))/2 + var(--gutter) ); width: clamp(160px, 18vw, 320px); /* responsive logo size */ height: auto; pointer-events: none; /* it’s decorative */ } /* smaller screens: tighter gutter & slightly higher logo */ @media (max-width: 640px){ :root{ --gutter: 20px; } .home-banner__logo{ top: 42%; } } /*---------------------------- Color Palette Section -------------------*/ .palette-section { padding: 40px 0; } .palette-grid { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* each color block */ .swatch { position: relative; background: var(--swatch-color, #000); min-height: 570px; /* adjust height as you like */ padding: 24px 18px; color: #fff; box-sizing: border-box; } /* top text */ .swatch-meta p { font-size: 14px; line-height: 121%; margin: 0; white-space: nowrap; } /* bottom Pantone label */ .swatch-label { position: absolute; left: 18px; bottom: 18px; font-size: 14px; font-weight: 600; text-transform: uppercase; } /* small-screen tweaks if needed */ @media (max-width: 1400px) { .palette-grid { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); } /* .swatch { min-height: 200px; } */ } @media (max-width: 890px) { .palette-grid { grid-template-columns: auto auto auto; } .swatch { min-height: 300px; } } @media (max-width: 600px) { .palette-grid { padding: 0 25px; } /* .swatch { min-height: 200px; } */ } @media (max-width: 500px) { .palette-grid { grid-template-columns: auto auto; } .swatch { min-height: 200px; } .swatch-meta p, .swatch-label { font-size: 12px; } } /*--------------------- Mockup --------------------------*/ .case-mockup { padding: 60px 0; /* background: #f7f7f7; optional */ } .case-mockup-grid { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; gap: 24px; } /* cards */ .mockup-item { position: relative; /* border-radius: 12px; */ overflow: hidden; /* background: #ddd; fallback while loading */ } /* keep images nicely cropped */ .mockup-item img { display: block; width: 100%; height: 100%; object-fit: cover; } /* aspect ratios so it feels like your mockup */ .mockup-item--logo, .mockup-item--cards { aspect-ratio: 4 / 3; /* top two: more “photo” shape */ } .mockup-item--stationery { aspect-ratio: 16 / 9; /* bottom: more panoramic */ } /* desktop layout */ @media (min-width: 900px) { .case-mockup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* bottom visual spans full width */ .mockup-item--stationery { grid-column: 1 / -1; } } /* small screens: stack full width */ @media (max-width: 899.98px) { .case-mockup-grid { padding: 0 40px; } } /*----------------------- Brand expression ------------------------*/ .brand-exp { padding: 60px 0 0; background: var(--page-section-bg); } .brand-exp__container { max-width: 1400px; margin: 0 auto; padding: 0 40px; } /* intro row: title left, paragraph right */ .brand-exp__intro { display: grid; grid-template-columns: 1fr 1.6fr; /* tweak to taste */ gap: 24px; align-items: start; margin-bottom: 20px; } .brand-exp__title { font-size: 36px; font-weight: 400; line-height: 121%; color: var(--page-text-main); margin: 0; } .brand-exp__desc { margin: 0; color: var(--page-text-muted); font-size: 15px; line-height: 20px; max-width: 640px; } @media (max-width: 640px) { /* .brand-exp__container { padding: 0 20px; } */ .brand-exp__title { font-size: 24px; } .brand-exp__intro { grid-template-columns: 1fr; /* stack title over text on mobile */ gap: 12px; } } /* make the video fill the box nicely */ /* .brand-exp__video { width: 100%; height: 100%; object-fit: cover; display: block; } */ /*---------------------- Slogan -------------------------*/ /* banner */ .slogan { padding: 0; background: var(--page-section-bg); } .slogan__media{ position: relative; /* anchor for absolute text */ overflow: hidden; } .slogan__media img{ display: block; width: 100%; height: auto; } /* text aligns to the same left line as your container */ .slogan__text{ position: absolute; top: 45%; /* vertical placement (tweak) */ left: calc( (100vw - min(var(--container), 100vw - 2*var(--gutter)))/2 + var(--gutter) ); transform: translateY(-50%); /* center around that top */ max-width: 37ch; /* optional */ margin: 0; color: #fff; font-size: clamp(16px, 2.5vw, 36px); line-height: 1.4; } /* smaller screens: just use the gutter */ @media (max-width: 640px){ :root{ --gutter: 20px; } .slogan__text{ top: 40%; } } /*---------------------- Brochure -------------------------*/ .case-grid { padding: 60px 0; } .case-grid__wrap { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .case-card { overflow: hidden; background: #e6e6e6; /* loading fallback */ /* keep consistent visual height like the mockup */ aspect-ratio: 4 / 3; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06); } /* image fill & crop */ .case-card > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); /* crisper scaling */ } /* subtle hover */ @media (hover:hover) { .case-card { transition: transform .25s ease, box-shadow .25s ease; } .case-card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 14px 32px rgba(0,0,0,.10); } } /* tablet: keep 2-up but reduce padding/gap */ @media (max-width: 1024px) { .case-grid__wrap { gap: 18px; } } /* mobile: stack 1-up, keep nice ratio */ @media (max-width: 640px) { .case-grid__wrap { grid-template-columns: 1fr; padding: 0 20px; gap: 16px; } .case-card { aspect-ratio: 16 / 11; } /* a bit wider on phones */ } /*---------------------- Touchpoint -------------------------*/ .touchpoint { padding: 80px 0; } .tp-grid { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; gap: 32px; grid-template-columns: repeat(12, 1fr); } /* Cards (rounded + crop) */ .tp-card { overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.06); } .tp-card img { width:100%; height:100%; object-fit: cover; display:block; } /* Text */ .tp-text { grid-column: 6 / 13; grid-row: 1; align-self: start; } .tp-title { margin:0 0 14px; font-size: 36px; line-height:121%; font-weight: 400; color: var(--page-text-main); } .tp-copy { margin:0; font-size: 15px; color:#B1B1B1; line-height:20px; } /* Image placement (desktop) */ .tp-img--tl { grid-column: 1 / 5; grid-row: 1; aspect-ratio: 1 / 1; } /* small square */ .tp-img--bl { grid-column: 2 / 8; grid-row: 3; aspect-ratio: 3 / 2; margin-top: -100px; } /* wide */ .tp-img--br { grid-column: 9 / 13; grid-row: 2; aspect-ratio: 4 / 3; margin-top: -100px; } /* medium */ /* Tablet: keep feel but compress */ @media (max-width: 1080px) { .tp-grid { gap: 24px; } .tp-text { grid-column: 6 / 13; } /* .tp-img--tl { grid-column: 1 / 6; } */ .tp-img--bl { margin-top: -110px; } .tp-img--br { margin-top: -20px; } } /* Mobile: stack text first then images */ @media (max-width: 900px) { .tp-title { font-size: 24px; } .tp-grid { grid-template-columns: 1fr; gap: 20px; } .tp-text { grid-column: 1; } .tp-img--tl, .tp-img--bl, .tp-img--br { grid-column: 1; } .tp-img--tl { aspect-ratio: 4/3; grid-row: 2;} .tp-img--bl { aspect-ratio: 16/10; margin-top: 0; grid-row: 3; } .tp-img--br { aspect-ratio: 4/3; margin-top: 0; grid-row: 4; } } /*---------------------- Director's talk -------------------------*/ .case-section { padding: 80px 0; background: var(--page-section-bg); } .director_talk { font-size: 24px; text-align: center; line-height: 30px; color: var(--page-text-main); } .director_label { font-size: 20px; text-align: center; line-height: 121%; color: var(--page-text-muted); } @media (max-width: 1080px) { .frame-director-talk { max-width: 900px !important; } .director_talk { font-size: 20px; } .director_label { font-size: 16px; } } @media (max-width: 900px) { .frame-director-talk { max-width: 700px !important; } } @media (max-width: 700px) { .frame-director-talk { max-width: 550px !important; } .director_talk { font-size: 18px; } .director_label { font-size: 14px; } } /*---------------------- Gallery -------------------------*/ /* --- Layout shell --- */ .stacked-carousel{ --card-w: clamp(220px, 28vw, 420px); --card-h: clamp(280px, 36vw, 560px); --gap: clamp(12px, 3vw, 28px); --blur: 0.6rem; /* background softness on side cards */ position: relative; padding: 50px 0 100px; overflow: hidden; /* hides far off-canvas cards */ } /* track holds cards; we transform cards individually, not the track */ .sc-track{ position: relative; height: var(--card-h); display: grid; place-items: center; } /* cards */ .sc-card{ position: absolute; width: var(--card-w); height: var(--card-h); overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); transform-origin: center center; transition: transform .55s cubic-bezier(.22,.61,.36,1), filter .35s ease, opacity .35s ease, z-index .2s linear; cursor: pointer; will-change: transform, filter, opacity; background:#e8e9ea; } /* images */ .sc-card img{ width: 100%; height: 100%; object-fit: cover; display:block; } /* positional states assigned via [data-pos] = -2..2 */ .sc-card[data-pos="0"]{ z-index: 5; transform: translateX(0) scale(1); filter: none; opacity: 1; } .sc-card[data-pos="-1"]{ z-index: 4; transform: translateX(calc(-1 * (var(--card-w) * .52 + var(--gap)))) scale(.9); /* filter: saturate(.95) contrast(.98) blur(0); */ opacity: .98; } .sc-card[data-pos="1"]{ z-index: 4; transform: translateX(calc(var(--card-w) * .52 + var(--gap))) scale(.9); /* filter: saturate(.95) contrast(.98) blur(0); */ opacity: .98; } .sc-card[data-pos="-2"]{ z-index: 3; transform: translateX(calc(-1 * (var(--card-w) * 1.04 + var(--gap) * 3))) scale(.8); /* filter: blur(var(--blur)) brightness(.98); */ opacity: .9; } .sc-card[data-pos="2"]{ z-index: 3; transform: translateX(calc(var(--card-w) * 1.04 + var(--gap) * 3)) scale(.8); /* filter: blur(var(--blur)) brightness(.98); */ opacity: .9; } /* cards beyond ±2 are hidden off-canvas (for long lists) */ .sc-card[data-pos="off-left"]{ transform: translateX(-160%) scale(.7); opacity: 0; z-index: 1; pointer-events: none; } .sc-card[data-pos="off-right"]{ transform: translateX(160%) scale(.7); opacity: 0; z-index: 1; pointer-events: none; } /* controls */ .sc-btn{ position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.8); border: none; border-radius: 999px; padding: 10px 14px; font-size: 18px; box-shadow: 0 6px 14px rgba(0,0,0,.12); cursor: pointer; user-select: none; } .sc-prev{ left: 12px; } .sc-next{ right: 12px; } @media (max-width: 640px){ .sc-btn{ display:none; } /* tap cards instead on phones */ } /*---------------------- Website/ mobile mockup -------------------------*/ .web-mobile-showcase { padding: 80px 0; background: var(--page-card-soft-bg); } .wm-container { max-width: 1400px; margin: 0 auto; padding: 0 40px; position: relative; display: flex; justify-content: center; align-items: flex-end; } /* main web mockup */ .wm-web { width: clamp(600px, 70%, 900px); /* aspect-ratio: 4 / 3; */ border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04); } .wm-web img { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 2px 15px 29.6px -3px #00000033; } /* phone mockup overlay */ .wm-mobile { position: absolute; right: 11%; bottom: 8%; width: clamp(180px, 25%, 260px); border-radius: 30px; overflow: hidden; box-shadow: 2px 15px 26px -3px #00000033; background: #fff; } .wm-mobile img { width: 100%; height: 100%; object-fit: cover; display: block; } /* tablet adjustments */ @media (max-width: 1024px) { .wm-container { padding: 0 24px; } .wm-mobile { right: 8%; bottom: 6%; } } /* mobile: stack */ @media (max-width: 768px) { /* .wm-container { flex-direction: column; align-items: center; } */ .wm-web { /* width: 100%; */ max-width: 500px; /* aspect-ratio: 4 / 3; */ } } @media (max-width: 640px) { .wm-web { max-width: 400px; /* aspect-ratio: 4 / 3; */ } .wm-mobile { max-width: 150px; } } @media (max-width: 490px) { .wm-web { max-width: 300px; /* aspect-ratio: 4 / 3; */ } .wm-mobile { max-width: 120px; } } /*---------------------- Award -------------------------*/ .award { padding: 100px 0; background: var(--page-section-bg); } .award__wrap { max-width: 1400px; margin: 0 auto; padding: 0 40px; display: grid; grid-template-columns: 1.2fr 1fr; /* image | text */ gap: 40px; align-items: start; } /* image block */ .award__media { /* border-radius: 12px; */ overflow: hidden; /* background: #e9eaec; */ aspect-ratio: 3 / 2; /* similar crop to mockup */ } .award__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* text block */ .award__text { max-width: 56ch; color: var(--page-text-muted); line-height: 21px; font-size: 14px; display: grid; gap: 15px; /* spacing between paragraphs */ align-self: flex-end; /* vertical balance vs image */ } /* tablet */ @media (max-width: 1024px) { .award__wrap { /* padding: 0 24px; */ gap: 30px; grid-template-columns: 1fr 1fr; } } /* mobile: stack */ @media (max-width: 900px) { .award__wrap { /* padding: 0 20px; */ grid-template-columns: 1fr; } .award__media { aspect-ratio: 3 / 2; } .award__text { max-width: none; } } /*---------------------- Anniversary -------------------------*/ /* Whole section */ .anniversary { padding: 80px 0px; /* background: #ffffff; */ } /* 3-column flex row: left wave / text / right wave */ .anniversary-layout { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: center; } /* waves */ .anniversary-wave { flex: 0 0 auto; } .anniversary-wave img { display: block; width: 125px; /* adjust to match your artwork */ height: auto; } /* center text block */ .anniversary-content { max-width: 800px; /* keeps text narrow like your expected design */ text-align: center; padding: 0 48px; /* space between waves and text */ } .anniversary-title { font-size: 24px; line-height: 1.4; font-weight: 500; color: #949494; margin: 0 0 20px; } .anniversary-text { font-size: 15px; line-height: 1.8; color: #949494; margin: 0 0 10px; } .anniversary-text:last-child { margin-bottom: 0; } /* Desktop: staggered waves */ @media (min-width: 769px) { .anniversary-layout { align-items: stretch; /* allow children to sit at top/bottom */ } .anniversary-wave--left { align-self: flex-end; /* bottom of the text block */ } .anniversary-wave--right { align-self: flex-start; /* top of the text block */ } .anniversary-content { align-self: center; /* keep text vertically centered */ } } /* ---------- Mobile / tablet: stack top–text–bottom ---------- */ @media (max-width: 768px) { .anniversary-layout { flex-direction: column; } .anniversary-wave img { width: 85px; /* adjust to match your artwork */ } .anniversary-wave--left { order: 0; margin-bottom: 40px; align-self: flex-start; } .anniversary-content { order: 1; padding: 0 50px; } .anniversary-wave--right { order: 2; margin-top: 20px; align-self: flex-end; } .anniversary-title { font-size: 20px; } } /*------------------------ Carousel slideshow ---------------------*/ /* Wrapper */ /* Outer section */ .nissin-triptych { padding: 72px 16px; background: #ffffff; display: flex; justify-content: center; } /* Carousel track: fixed ratio, centered */ .nissin-triptych-track { position: relative; width: min(100%, 1200px); aspect-ratio: 16 / 9; /* adjust if you need a taller/shorter look */ margin: 0 auto; overflow: visible; } /* Each slide is absolutely positioned relative to center */ .nissin-triptych-item { position: absolute; top: 50%; left: 50%; width: 32%; /* width of each image; tweak to taste */ transform: translate(-50%, -50%); opacity: 0; transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 1s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 1s ease-out; will-change: transform, opacity, box-shadow; } .nissin-triptych-item img { width: 100%; height: 100%; object-fit: cover; display: block; } /* left position: moved left, slightly smaller, semi-transparent */ .nissin-triptych-item.pos-left { transform: translate(-155%, -50%) scale(0.96); opacity: 0.8; box-shadow: none; } /* center position: in the middle, bigger, with shadow */ .nissin-triptych-item.pos-center { transform: translate(-50%, -50%) scale(1.03); opacity: 1; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); z-index: 1; } /* right position: moved right, slightly smaller, semi-transparent */ .nissin-triptych-item.pos-right { transform: translate(55%, -50%) scale(0.96); opacity: 0.8; box-shadow: none; } /* (optional) on very small screens, make movement a bit tighter */ @media (max-width: 768px) { /* .nissin-triptych-track { aspect-ratio: 4 / 5; } */ /* .nissin-triptych-item { width: 70%; } */ .nissin-triptych-item.pos-left { transform: translate(-155%, -50%) scale(0.9); } .nissin-triptych-item.pos-center { transform: translate(-50%, -50%) scale(1.05); } .nissin-triptych-item.pos-right { transform: translate(55%, -50%) scale(0.9); } } /* ---------- MARKETING MATERIALS SECTION ---------- */ .mm-section { padding: 96px 24px 120px; background: #ffffff; } .mm-inner { max-width: 1200px; margin: 0 auto; position: relative; } /* header: step label + copy side-by-side */ .mm-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; margin-bottom: 56px; } /* step icon + number + title */ .mm-step { display: flex; align-items: center; gap: 16px; } /* icon with number overlay (reuse idea from previous section) */ .mm-step-icon { position: relative; display: inline-block; } .mm-step-icon img { display: block; width: 72px; /* adjust to your icon size */ height: auto; } .mm-step-number { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: #e30613; /* Nissin red */ color: #ffffff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); } .mm-step-label { font-size: 18px; font-weight: 600; color: #444444; } /* intro paragraph */ .mm-intro { max-width: 520px; font-size: 13px; line-height: 1.8; color: #777777; } /* IMAGE GRID */ .mm-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-auto-rows: auto; column-gap: 48px; row-gap: 40px; } /* base image card */ .mm-item img { width: 100%; height: auto; display: block; object-fit: cover; } /* positions to mimic the layout in your screenshot */ /* big magenta poster – bottom-left */ .mm-item--poster { grid-column: 1 / 2; grid-row: 2 / 3; margin-top: -260px; } /* square Mala Tang visual – top-right */ .mm-item--mala { grid-column: 2 / 4; grid-row: 1 / 2; } /* promo card – bottom-right, shifted left & up a bit */ .mm-item--promo { grid-column: 2 / 3; grid-row: 3 / 4; justify-self: start; /* align to left side of column 2 */ transform: translate(-190px, 0px); /* tweak -40px values until it lines up exactly how you like */ } /* optional subtle drop shadows to make images feel printed */ .mm-item--poster img, .mm-item--promo img { aspect-ratio: 1 / 1; /* box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18); */ } /* small decorative waves */ .mm-wave { position: absolute; width: 100px; height: auto; } /* positions roughly matching your reference – tweak as needed */ .mm-wave--left { left: 10%; bottom: 12%; } .mm-wave--right { right: 0%; /* right: -4%; */ top: 55%; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 768px) { .mm-header { flex-direction: column; align-items: flex-start; gap: 24px; } .mm-intro { max-width: none; } .mm-grid { grid-template-columns: 1fr; column-gap: 0; padding: 0 35px; } .mm-item--poster, .mm-item--mala, .mm-item--promo { grid-column: 1 / -1; grid-row: auto; transform: unset; margin-top: 0; } .mm-wave--left { display: none; } .mm-wave--right { display: none; } } @media (max-width: 600px) { .mm-section { padding: 72px 16px 96px; } .mm-step-icon img { width: 60px; } .mm-step-label { font-size: 16px; } .mm-wave { width: 52px; } } /*-----------------------------------------------------------------------*/ /* SECTION BACKGROUND */ .display-stage { padding: 72px 16px; background: linear-gradient(180deg, #FFFFFF 0%, #EBFCFF 64.9%, #D2EFF5 100%); } /* STAGE AREA (desktop = 16:9, mobile overridden later) */ .display-stage-inner { position: relative; max-width: 1200px; margin: 0 auto; aspect-ratio: 16 / 9; } /* main product image centered */ .display-hero { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: 85%; /* hero width relative to stage */ } .display-hero img { width: 100%; height: auto; display: block; } /* base style for all decor elements */ .decor { position: absolute; pointer-events: none; } /* clouds */ .decor-cloud { width: 110px; height: auto; } .cloud-left { top: 50%; left: 3%; width: 60px; } .cloud-left-up { top: 25%; left: 10%; width: 50px; } .cloud-right { top: 45%; right: 8%; width: 50px; } /* fireworks (desktop positions) */ .decor-fw { height: auto; /* width will vary slightly per asset; start with this */ width: 180px; } .fw-first-top-left { top: -3%; left: -11%; } .fw-top-left { top: 35%; left: 14%; } .fw-first-top-right { top: -8%; right: 0%; width: 80px; } .fw-top-right { top: 13%; right: 9%; width: 120px; } .fw-bottom-left { bottom: 10%; left: 0%; width: 90px; } .fw-bottom-right { bottom: -6%; right: 0%; } /* dots (Figma ellipses) */ .dot { width: 12px; height: 12px; border-radius: 50%; } .dot-orange { background-color: #F15928; } .dot-yellow { background-color: #EBEA35; } .dot-blue { background-color: #5388c7; } /* desktop dot locations – tweak as needed */ .dot-orange.dot-1 { bottom: 33%; left: 3%; width: 8px; height: 8px; } .dot-orange.dot-2 { bottom: 0%; right: 18%; } .dot-orange.dot-3 { top: 39%; right: 19%; width: 8px; height: 8px; } .dot-blue.dot-1 { top: 0%; right: 20%; width: 8px; height: 8px; } .dot-blue.dot-2 { top: 39%; left: 11%; } .dot-yellow.dot-1 { top: 65%; right: 9%; } .dot-yellow.dot-2 { top: 6%; left: 29%; } /* ------------ MOBILE LAYOUT ------------ */ @media (max-width: 768px) { .display-stage-inner { /* max-width: 420px; */ aspect-ratio: 3 / 4; /* taller canvas */ } /* hero smaller & a bit higher */ .display-hero { width: 100%; bottom: 10%; } /* reposition clouds */ .cloud-left { top: 45%; left: 85%; } .cloud-left-up { top: 15%; left: 10%; } .cloud-right { display: none; } /* fireworks repositioned like your tall mockup */ .decor-fw { width: 110px; } .fw-first-top-right, .fw-first-top-left, .dot.dot-blue.dot-1 { display: none; } .fw-top-left { top: 8%; left: 64%; transform: translateX(-50%); } .fw-top-right { top: 92%; right: 0%; width: 70px; } .fw-bottom-left { top: 38%; left: -6%; } .fw-bottom-right { bottom: 5%; left: 30%; } /* dots for mobile */ .dot-orange.dot-1 { bottom: 32%; left: 0%; } .dot-orange.dot-2 { bottom: 0%; left: 20%; } .dot-orange.dot-3 { top: 31%; right: 40%; width: 11px; height: 11px; } .dot-yellow.dot-1 { top: 55%; right: 9%; } .dot-yellow.dot-2 { top: 45%; left: 38%; } } @media (max-width: 540px) { .decor-fw:nth-of-type(4) { width: 80px; left:75%; } .cloud-left { left: 80%; } } /*---------- Animate effects --------------*/ /* pulse scale for fireworks + dots */ .decor-fw, .dot { animation: pulseScale 2s ease-in-out infinite; transform-origin: center; will-change: transform; } /* small variation so they don't all pulse in sync */ .decor-fw:nth-of-type(1), .dot:nth-of-type(1) { animation-delay: 0.5s; } .decor-fw:nth-of-type(2), .dot:nth-of-type(2) { animation-delay: 0.6s; } .decor-fw:nth-of-type(3), .dot:nth-of-type(3) { animation-delay: 0.3s; } .decor-fw:nth-of-type(4), .dot:nth-of-type(4) { animation-delay: 0.8s; } @keyframes pulseScale { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.15); /* slightly larger – tweak if too much */ } } /* subtle horizontal float for clouds */ .decor-cloud { animation: floatCloud 3s ease-in-out infinite; will-change: transform; } .cloud-left { animation-direction: alternate; /* same keyframes, forwards */ } .cloud-right { animation-direction: alternate-reverse; /* plays keyframes reversed */ } @keyframes floatCloud { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(25px); /* move a little to the right */ } } /*---------------------- Hero Section with Carousel -------------------------*/ .hero-right { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; } .hero-image-wrapper { position: relative; width: 100%; max-width: 500px; height: 600px; } .hero-carousel { position: relative; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .carousel-slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; transform: scale(1.1); } .carousel-slide.active { opacity: 1; transform: scale(1); animation: kenburns 12s ease-out; } @keyframes kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.05); } } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; } .carousel-indicators { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; } .indicator { width: 40px; height: 3px; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s ease; border-radius: 3px; } .indicator.active { background: var(--accent); width: 60px; } .carousel-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, transparent 50%, rgba(0, 0, 0, 0.3) 100%); pointer-events: none; } @keyframes fadeInScale { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); animation: bounce 2s ease infinite; z-index: 3; } .scroll-indicator span { display: block; width: 30px; height: 50px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 25px; position: relative; } .scroll-indicator span::after { content: ''; display: block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); top: 10px; animation: scrollDot 2s ease infinite; } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(10px); } } @keyframes scrollDot { 0% { top: 10px; opacity: 1; } 50% { top: 30px; opacity: 0.5; } 100% { top: 10px; opacity: 1; } } /* Collections Grid */ .collections { padding: 120px 50px 100px; max-width: 1400px; margin: 0 auto; position: relative; } .section-header { text-align: center; margin-bottom: 60px; } .section-title { font-size: 48px; letter-spacing: -2px; margin-bottom: 20px; } .section-subtitle { color: var(--text-muted); font-size: 18px; letter-spacing: 2px; text-transform: uppercase; } /* Animations */ @keyframes fadeInUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Responsive */ @media (max-width: 768px) { /* nav { padding: 15px 20px; } .nav-links { display: none; } .menu-toggle { display: flex; } .mobile-nav { display: block; } */ .hero-container { grid-template-columns: 1fr; padding: 0 50px; text-align: center; } .hero-left { padding-right: 0; padding-top: 100px; } .hero-title { font-size: 35px; } /* .hero-stats { justify-content: center; gap: 30px; } .stat-number { font-size: 28px; } */ .hero-right { display: none; } /* .cta-group { flex-direction: column; align-items: center; } .cta-button { width: 220px; text-align: center; padding: 16px 30px; } .collections, .featured, .contact { padding: 80px 20px 50px; } */ section { scroll-margin-top: 60px; } .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } }