@import url(“https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Noto+Serif+JP:wght@200;300;400&display=swap”);
#toratora-spa {
–main: #0500f5;
–black: #0a0a23;
–black-dark: #0000D2D6;
–white: #f3edea;
–gray: #e3d5cf;
–red: #e43f13;
–yellow: #efc239;
–font-main: “Raleway”, sans-serif;
–font-headers: “Raleway”, sans-serif;
–wp–preset–font-size–small: 14px;
–wp–preset–font-size–regular: 16px;
–wp–preset–font-size–medium: 20px;
–wp–preset–font-size–large: 24px;
–wp–preset–font-size–x-large: 42px;
–ease: cubic-bezier(.22, 1, .36, 1);
–header-space: 96px;
–side-space: clamp(18px, 5vw, 72px);
}
#toratora-spa,
#toratora-spa * {
box-sizing: border-box;
}
#toratora-spa {
margin: 0;
overflow: hidden;
font-family: var(–font-main);
font-size: var(–wp–preset–font-size–regular);
line-height: 1.55;
color: var(–black);
background: var(–black-dark);
text-rendering: geometricPrecision;
}
#toratora-spa img {
display: block;
max-width: 100%;
height: auto;
}
#toratora-spa a {
color: inherit;
text-decoration: none;
}
#toratora-spa button,
#toratora-spa input,
#toratora-spa select {
font: inherit;
}
#toratora-spa button {
cursor: pointer;
}
#toratora-spa h1,
#toratora-spa h2,
#toratora-spa h3,
#toratora-spa p {
margin: 0;
}
#toratora-spa h1,
#toratora-spa h2,
#toratora-spa h3 {
font-family: var(–font-headers);
font-weight: 300;
line-height: .95;
letter-spacing: 0;
text-transform: uppercase;
}
#toratora-spa .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#toratora-spa.site-shell {
position: relative;
width: 100vw;
height: 100vh;
height: 100svh;
min-height: 620px;
margin-right: calc(50% – 50vw);
margin-left: calc(50% – 50vw);
overflow: hidden;
background: var(–black-dark);
}
#toratora-spa .site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 18px;
min-height: var(–header-space);
padding: 24px var(–side-space) 0;
color: var(–white);
pointer-events: none;
}
#toratora-spa .site-header > * {
pointer-events: auto;
}
#toratora-spa .lte-logo {
display: inline-flex;
width: 104px;
align-items: center;
justify-self: start;
}
#toratora-spa .lte-logo img {
max-height: 68px;
object-fit: contain;
}
#toratora-spa .header-wordmark {
justify-self: center;
color: rgba(243, 237, 234, .82);
font-size: var(–wp–preset–font-size–small);
font-weight: 700;
text-transform: uppercase;
}
#toratora-spa .header-actions {
display: inline-flex;
justify-self: end;
align-items: center;
gap: 16px;
}
#toratora-spa .text-link {
font-size: var(–wp–preset–font-size–small);
font-weight: 700;
text-transform: uppercase;
}
#toratora-spa .nav-toggle {
position: relative;
width: 48px;
height: 48px;
padding: 0;
color: currentColor;
background: transparent;
border: 0;
}
#toratora-spa .nav-toggle span {
position: absolute;
left: 10px;
width: 28px;
height: 2px;
background: currentColor;
transition: transform .28s var(–ease), opacity .2s ease;
}
#toratora-spa .nav-toggle span:nth-child(1) {
top: 16px;
}
#toratora-spa .nav-toggle span:nth-child(2) {
top: 24px;
}
#toratora-spa .nav-toggle span:nth-child(3) {
top: 32px;
}
#toratora-spa .nav-open .nav-toggle span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#toratora-spa .nav-open .nav-toggle span:nth-child(2) {
opacity: 0;
}
#toratora-spa .nav-open .nav-toggle span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
#toratora-spa .page-nav {
position: fixed;
left: var(–side-space);
bottom: 26px;
z-index: 30;
display: flex;
flex-wrap: wrap;
gap: 8px;
color: var(–white);
}
#toratora-spa .page-nav a {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 7px 11px;
border: 1px solid rgba(243, 237, 234, .36);
border-radius: 999px;
color: rgba(243, 237, 234, .78);
font-size: var(–wp–preset–font-size–small);
font-weight: 700;
text-transform: uppercase;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
#toratora-spa .page-nav a.is-active,
#toratora-spa .page-nav a:hover,
#toratora-spa .page-nav a:focus-visible {
color: var(–black);
background: var(–yellow);
border-color: var(–yellow);
}
#toratora-spa .panel {
position: absolute;
inset: 0;
display: grid;
min-height: 100svh;
padding: var(–header-space) var(–side-space) 84px;
overflow: hidden;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(18px) scale(.99);
}
#toratora-spa .panel.is-active {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
}
#toratora-spa .panel__scroll {
height: 100%;
min-height: 0;
overflow: auto;
scrollbar-width: thin;
}
#toratora-spa .panel__eyebrow {
display: block;
margin-bottom: 16px;
color: var(–red);
font-size: var(–wp–preset–font-size–small);
font-weight: 800;
text-transform: uppercase;
}
#toratora-spa .panel__title {
font-size: clamp(54px, 8vw, 132px);
}
#toratora-spa .panel__copy {
max-width: 650px;
color: rgba(10, 10, 35, .76);
font-size: var(–wp–preset–font-size–medium);
}
#toratora-spa .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 12px 20px;
border: 1px solid currentColor;
border-radius: 999px;
color: var(–white);
background: var(–main);
font-size: var(–wp–preset–font-size–small);
font-weight: 800;
text-transform: uppercase;
transition: transform .25s ease, background .25s ease, color .25s ease;
}
#toratora-spa .btn:hover,
#toratora-spa .btn:focus-visible {
color: var(–black);
background: var(–yellow);
transform: translateY(-2px);
}
#toratora-spa .btn.light {
color: var(–white);
background: transparent;
}
#toratora-spa .btn.dark {
color: var(–black);
background: transparent;
}
#toratora-spa .button-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
#toratora-spa .home-panel {
align-items: center;
color: var(–white);
background: var(–black-dark);
isolation: isolate;
}
#toratora-spa .home-panel::before {
position: absolute;
inset: 0;
z-index: -3;
background:
linear-gradient(90deg, rgba(3, 3, 15, .96) 0%, rgba(3, 3, 15, .86) 42%, rgba(10, 10, 35, .72) 100%),
radial-gradient(circle at 84% 24%, rgba(228, 63, 19, .26), transparent 30%),
radial-gradient(circle at 12% 78%, rgba(239, 194, 57, .10), transparent 28%),
linear-gradient(130deg, #03030f 0%, #0a0a23 54%, #121225 100%);
content: “”;
}
#toratora-spa .home-panel::after {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 50%;
z-index: -2;
background-image: url(“https://toratora.ae/wp-content/uploads/2026/03/AfS_ToraTora_Pattern-1024×1024.jpg”);
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
content: “”;
opacity: .12;
mix-blend-mode: screen;
pointer-events: none;
}
#toratora-spa .hero-art {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
#toratora-spa .hero-shape {
position: absolute;
overflow: hidden;
background: #111;
box-shadow: 0 38px 110px rgba(0, 0, 0, .34);
opacity: .82;
}
#toratora-spa .hero-shape img {
width: 100%;
height: 100%;
object-fit: cover;
}
#toratora-spa .hero-shape–one {
left: 51vw;
top: 20vh;
width: min(24vw, 390px);
height: min(27vw, 430px);
border-radius: 50% 50% 8px 8px;
transform: rotate(-8deg);
}
#toratora-spa .hero-shape–two {
left: 36vw;
top: 39vh;
width: min(38vw, 660px);
height: min(22vw, 320px);
clip-path: polygon(0 16%, 100% 0, 88% 100%, 8% 86%);
transform: rotate(5deg);
}
#toratora-spa .hero-shape–three {
right: -2vw;
top: 31vh;
width: min(24vw, 380px);
height: min(30vw, 470px);
border-radius: 8px 8px 50% 50%;
transform: rotate(9deg);
}
#toratora-spa .hero-kana {
position: absolute;
right: 7vw;
bottom: 19vh;
color: rgba(239, 194, 57, .22);
font-family: “Noto Serif JP”, serif;
font-size: clamp(72px, 13vw, 210px);
font-weight: 200;
line-height: 1;
}
#toratora-spa .home-content {
position: relative;
z-index: 4;
display: grid;
gap: 20px;
width: min(590px, 100%);
margin: 0;
text-align: left;
}
#toratora-spa .home-content h1 {
max-width: 11ch;
font-size: clamp(46px, 5.6vw, 88px);
text-shadow: 0 14px 48px rgba(0, 0, 0, .5);
}
#toratora-spa .home-content p {
max-width: 520px;
color: rgba(243, 237, 234, .9);
font-size: var(–wp–preset–font-size–medium);
text-shadow: 0 10px 28px rgba(0, 0, 0, .52);
}
#toratora-spa .home-brand {
position: absolute;
left: 4vw;
right: 4vw;
bottom: -14px;
z-index: 0;
color: rgba(243, 237, 234, .17);
font-size: clamp(62px, 15vw, 224px);
font-weight: 300;
line-height: .8;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
pointer-events: none;
}
#toratora-spa .home-marquee {
position: absolute;
left: 0;
right: 0;
bottom: clamp(92px, 8vw, 128px);
z-index: 1;
overflow: hidden;
color: rgba(243, 237, 234, .26);
white-space: nowrap;
}
#toratora-spa .gsap-marquee__track {
display: flex;
width: max-content;
will-change: transform;
}
#toratora-spa .gsap-marquee__line {
display: flex;
gap: 20px;
padding-right: 20px;
font-size: clamp(16px, 1.7vw, 28px);
font-weight: 500;
text-transform: uppercase;
}
#toratora-spa .overlay-menu {
position: fixed;
inset: 0;
z-index: 40;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
gap: 42px;
padding: var(–header-space) var(–side-space) 48px;
color: var(–white);
background: var(–main);
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-20px);
}
#toratora-spa .nav-open .overlay-menu {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
#toratora-spa .overlay-menu ul {
display: grid;
gap: clamp(10px, 2.5vh, 24px);
align-self: center;
margin: 0;
padding: 0;
list-style: none;
}
#toratora-spa .overlay-menu a {
display: inline-block;
font-size: clamp(44px, 8.4vw, 132px);
font-weight: 300;
line-height: .86;
text-transform: uppercase;
transition: color .2s ease, transform .2s ease;
}
#toratora-spa .overlay-menu a:hover,
#toratora-spa .overlay-menu a:focus-visible {
color: var(–yellow);
transform: translateX(10px);
}
#toratora-spa .overlay-aside {
align-self: end;
display: grid;
gap: 18px;
color: rgba(255, 255, 255, .82);
}
#toratora-spa .overlay-aside strong {
display: block;
color: var(–white);
font-size: var(–wp–preset–font-size–large);
font-weight: 500;
line-height: 1.2;
text-transform: uppercase;
}
#toratora-spa .story-panel {
color: var(–white);
background: var(–red);
}
#toratora-spa .story-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
gap: clamp(28px, 5vw, 72px);
align-items: center;
height: 100%;
}
#toratora-spa .story-copy {
display: grid;
gap: 24px;
max-width: 1100px;
}
#toratora-spa .story-copy .panel__title {
color: var(–white);
font-size: clamp(46px, 5.3vw, 86px);
line-height: 1.05;
}
#toratora-spa .story-copy p {
max-width: 920px;
color: rgba(255, 255, 255, .9);
font-size: clamp(18px, 2vw, 30px);
line-height: 1.35;
text-transform: uppercase;
}
#toratora-spa .story-figure {
position: relative;
align-self: stretch;
min-height: 480px;
}
#toratora-spa .story-figure img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50% 50% 8px 8px;
}
#toratora-spa .story-figure::after {
position: absolute;
right: -20px;
bottom: 32px;
width: 42%;
aspect-ratio: 1;
border: 18px solid var(–yellow);
border-radius: 50%;
content: “”;
}
#toratora-spa .menu-panel {
color: var(–black);
background: var(–white);
}
#toratora-spa .menu-layout {
display: grid;
grid-template-rows: auto 1fr;
gap: clamp(28px, 5vh, 58px);
height: 100%;
min-height: 0;
}
#toratora-spa .menu-heading {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
}
#toratora-spa .menu-heading h2 {
font-size: clamp(62px, 11vw, 180px);
line-height: .8;
}
#toratora-spa .menu-heading p {
max-width: 360px;
color: rgba(10, 10, 35, .72);
text-transform: uppercase;
}
#toratora-spa .menu-list {
min-height: 0;
overflow: auto;
border-top: 1px solid rgba(10, 10, 35, .32);
}
#toratora-spa .menu-row {
position: relative;
display: grid;
grid-template-columns: 86px minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
min-height: 92px;
padding: 14px 0;
border-bottom: 1px solid rgba(10, 10, 35, .32);
}
#toratora-spa .menu-row img {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
}
#toratora-spa .menu-row h3 {
color: var(–black);
font-size: clamp(26px, 3.1vw, 52px);
font-weight: 400;
}
#toratora-spa .menu-row p {
color: rgba(10, 10, 35, .66);
font-size: var(–wp–preset–font-size–small);
}
#toratora-spa .menu-row strong {
color: var(–black);
font-size: clamp(22px, 2.4vw, 42px);
font-weight: 400;
}
#toratora-spa .menu-section {
padding: 22px 0 6px;
}
#toratora-spa .menu-section__label {
display: inline-block;
margin: 0 0 10px;
color: var(–red);
font-size: var(–wp–preset–font-size–small);
font-weight: 800;
text-transform: uppercase;
letter-spacing: .02em;
}
#toratora-spa .menu-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid rgba(10, 10, 35, .32);
}
#toratora-spa .menu-item__name {
color: var(–black);
font-size: clamp(18px, 2.2vw, 34px);
font-weight: 400;
text-transform: uppercase;
line-height: 1.1;
}
#toratora-spa .menu-item__desc {
margin-top: 6px;
color: rgba(10, 10, 35, .66);
font-size: var(–wp–preset–font-size–small);
text-transform: none;
}
#toratora-spa .menu-item__price {
color: var(–black);
font-size: clamp(18px, 2vw, 30px);
font-weight: 400;
}
#toratora-spa .menu-item__price:empty {
display: none;
}
#toratora-spa .gallery-panel {
color: var(–black);
background: var(–gray);
}
#toratora-spa .gallery-layout {
display: grid;
grid-template-columns: .72fr minmax(280px, .9fr) .72fr;
gap: 34px;
align-items: center;
height: 100%;
}
#toratora-spa .gallery-side {
display: grid;
gap: 18px;
align-content: center;
}
#toratora-spa .gallery-side h2 {
font-size: clamp(34px, 4.8vw, 76px);
}
#toratora-spa .gallery-side p {
color: rgba(10, 10, 35, .74);
text-transform: uppercase;
}
#toratora-spa .gallery-center {
position: relative;
height: min(76svh, 720px);
min-height: 420px;
overflow: hidden;
background: var(–black);
}
#toratora-spa .gallery-center img {
width: 100%;
height: 100%;
object-fit: cover;
}
#toratora-spa .gallery-stack {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
#toratora-spa .gallery-stack a {
aspect-ratio: 1;
overflow: hidden;
background: var(–black);
}
#toratora-spa .gallery-stack img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
#toratora-spa .gallery-stack a:hover img {
transform: scale(1.06);
}
#toratora-spa .contact-panel {
color: var(–black);
background: var(–white);
}
#toratora-spa .contact-layout {
display: grid;
grid-template-columns: minmax(0, .98fr) minmax(310px, 1fr);
gap: 44px;
align-items: center;
height: 100%;
}
#toratora-spa .contact-info {
display: grid;
gap: 34px;
}
#toratora-spa .contact-info h2 {
font-size: clamp(48px, 7.5vw, 128px);
}
#toratora-spa .contact-list {
display: grid;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
text-transform: uppercase;
}
#toratora-spa .contact-list span {
display: block;
color: var(–red);
font-weight: 800;
}
#toratora-spa .contact-card {
position: relative;
min-height: 620px;
overflow: hidden;
}
#toratora-spa .contact-card img {
width: 100%;
height: 100%;
min-height: 620px;
object-fit: cover;
clip-path: circle(48% at 50% 50%);
}
#toratora-spa .contact-card__text {
position: absolute;
top: 48px;
right: 10px;
z-index: 2;
max-width: 340px;
text-align: right;
text-transform: uppercase;
}
#toratora-spa .contact-card__text strong {
display: block;
font-size: clamp(28px, 3.4vw, 54px);
font-weight: 400;
line-height: 1;
}
#toratora-spa .footer-strip {
position: fixed;
right: var(–side-space);
bottom: 26px;
z-index: 30;
display: flex;
gap: 16px;
align-items: center;
color: rgba(243, 237, 234, .78);
font-size: var(–wp–preset–font-size–small);
font-weight: 700;
text-transform: uppercase;
}
#toratora-spa .panel[data-theme=”light”] ~ .footer-strip,
#toratora-spa.light-panel .footer-strip,
#toratora-spa.light-panel .page-nav {
color: rgba(10, 10, 35, .78);
}
#toratora-spa.light-panel .page-nav a {
color: rgba(10, 10, 35, .72);
border-color: rgba(10, 10, 35, .24);
}
#toratora-spa.light-panel .page-nav a.is-active,
#toratora-spa.light-panel .page-nav a:hover,
#toratora-spa.light-panel .page-nav a:focus-visible {
color: var(–white);
background: var(–main);
border-color: var(–main);
}
#toratora-spa.light-panel .site-header {
color: var(–black);
}
#toratora-spa.nav-open .site-header,
#toratora-spa.nav-open .footer-strip,
#toratora-spa.nav-open .page-nav {
color: var(–white);
}
@media (max-width: 1100px) {
#toratora-spa {
overflow: hidden;
}
#toratora-spa.site-shell {
min-height: 100svh;
}
#toratora-spa .panel {
overflow: auto;
}
#toratora-spa .story-grid,
#toratora-spa .contact-layout {
grid-template-columns: 1fr;
height: auto;
min-height: 100%;
}
#toratora-spa .story-figure,
#toratora-spa .contact-card {
min-height: 420px;
}
#toratora-spa .story-figure img,
#toratora-spa .contact-card img {
min-height: 420px;
}
#toratora-spa .gallery-layout {
grid-template-columns: 1fr;
height: auto;
min-height: 100%;
}
#toratora-spa .gallery-center {
height: 54svh;
}
#toratora-spa .menu-heading {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
#toratora-spa {
–header-space: 82px;
–side-space: 18px;
}
#toratora-spa .site-header {
grid-template-columns: auto 1fr auto;
padding-top: 16px;
}
#toratora-spa .header-wordmark {
display: none;
}
#toratora-spa .lte-logo {
width: 84px;
}
#toratora-spa .panel {
padding-bottom: 98px;
}
#toratora-spa .home-panel {
align-items: start;
padding-top: 120px;
}
#toratora-spa .home-content {
width: min(100%, 520px);
text-align: left;
}
#toratora-spa .home-content p {
margin: 0;
}
#toratora-spa .hero-shape–one {
left: 6vw;
top: 60vh;
width: 40vw;
height: 45vw;
}
#toratora-spa .hero-shape–two {
left: 31vw;
top: 62vh;
width: 60vw;
height: 36vw;
}
#toratora-spa .hero-shape–three {
right: -20vw;
top: 55vh;
width: 45vw;
height: 56vw;
}
#toratora-spa .home-brand {
bottom: 84px;
font-size: clamp(48px, 18vw, 96px);
}
#toratora-spa .home-marquee {
bottom: 150px;
}
#toratora-spa .home-panel::after {
top: auto;
bottom: 0;
width: 100%;
height: 50%;
opacity: .06;
}
#toratora-spa .page-nav {
left: 18px;
right: 18px;
bottom: 18px;
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 2px;
}
#toratora-spa .footer-strip {
display: none;
}
#toratora-spa .overlay-menu {
grid-template-columns: 1fr;
align-content: center;
}
#toratora-spa .overlay-aside {
align-self: start;
}
#toratora-spa .menu-row {
grid-template-columns: 62px minmax(0, 1fr) auto;
min-height: 80px;
gap: 12px;
}
#toratora-spa .menu-row img {
width: 52px;
height: 52px;
}
#toratora-spa .menu-row p {
display: none;
}
#toratora-spa .contact-card__text {
top: 24px;
right: 0;
left: 0;
max-width: none;
padding: 0 10px;
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
#toratora-spa *,
#toratora-spa *::before,
#toratora-spa *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
Tora Tora Dubai
Authentic Japanese Ramen in Dubai
Roar into bold Japanese flavours at Tora Tora – a vibrant ramen joint bringing Japanese street culture and authentic comfort food to Dubai.
RAMEN•JAPANESE STREET CULTURE•BOLD FLAVOURS•DUBAI•TORA TORA•
RAMEN•JAPANESE STREET CULTURE•BOLD FLAVOURS•DUBAI•TORA TORA•
Tora Tora
(function () {
const root = document.getElementById(“toratora-spa”);
if (!root) return;
const panels = Array.from(root.querySelectorAll(“.panel”));
const navLinks = Array.from(root.querySelectorAll(“.nav-link”));
const navToggle = root.querySelector(“.nav-toggle”);
const prefersReducedMotion = window.matchMedia(“(prefers-reduced-motion: reduce)”).matches;
let activePanel = root.querySelector(“.panel.is-active”);
let isAnimating = false;
function closeMenu() {
root.classList.remove(“nav-open”);
navToggle.setAttribute(“aria-expanded”, “false”);
}
function setTheme(panel) {
const isLight = panel.dataset.theme === “light”;
root.classList.toggle(“light-panel”, isLight);
root.classList.toggle(“dark-panel”, !isLight);
}
function markActive(id) {
navLinks.forEach(function (link) {
link.classList.toggle(“is-active”, link.dataset.target === id);
});
}
function revealPanelContent(panel) {
if (!window.gsap || prefersReducedMotion) return;
const items = panel.querySelectorAll(“.gsap-fade-up”);
const staggerGroups = panel.querySelectorAll(“.gsap-stagger”);
const reveals = panel.querySelectorAll(“.gsap-reveal”);
const galleryItems = panel.querySelectorAll(“.gsap-gallery-item”);
gsap.fromTo(items, { autoAlpha: 0, y: 24 }, { autoAlpha: 1, y: 0, duration: .58, stagger: .07, ease: “power2.out” });
staggerGroups.forEach(function (group) {
gsap.fromTo(group.children, { autoAlpha: 0, y: 22 }, { autoAlpha: 1, y: 0, duration: .5, stagger: .06, ease: “power2.out” });
});
gsap.fromTo(reveals, { autoAlpha: 0, scale: .97 }, { autoAlpha: 1, scale: 1, duration: .62, stagger: .06, ease: “power2.out” });
gsap.fromTo(galleryItems, { autoAlpha: 0, scale: .94 }, { autoAlpha: 1, scale: 1, duration: .5, stagger: .06, ease: “power2.out” });
}
function showPanel(id, updateHash) {
const nextPanel = root.querySelector(“#” + CSS.escape(id));
if (!nextPanel) return;
if (nextPanel === activePanel) {
closeMenu();
markActive(id);
return;
}
if (isAnimating) return;
closeMenu();
markActive(id);
setTheme(nextPanel);
if (updateHash !== false && history.pushState) {
history.pushState(null, “”, “#” + id);
}
if (!window.gsap || prefersReducedMotion) {
activePanel.classList.remove(“is-active”);
nextPanel.classList.add(“is-active”);
activePanel = nextPanel;
revealPanelContent(nextPanel);
return;
}
isAnimating = true;
nextPanel.classList.add(“is-active”);
gsap.set(nextPanel, { autoAlpha: 0, y: 24, scale: .99 });
gsap.timeline({
defaults: { ease: “power3.out” },
onComplete: function () {
panels.forEach(function (panel) {
if (panel !== nextPanel) {
panel.classList.remove(“is-active”);
gsap.set(panel, { clearProps: “all” });
}
});
gsap.set(nextPanel, { clearProps: “all” });
activePanel = nextPanel;
isAnimating = false;
revealPanelContent(nextPanel);
}
})
.to(activePanel, { autoAlpha: 0, y: -18, scale: .99, duration: .42 }, 0)
.to(nextPanel, { autoAlpha: 1, y: 0, scale: 1, duration: .64 }, .06);
}
navToggle.addEventListener(“click”, function () {
const isOpen = root.classList.toggle(“nav-open”);
navToggle.setAttribute(“aria-expanded”, String(isOpen));
});
document.addEventListener(“keydown”, function (event) {
if (event.key === “Escape”) {
closeMenu();
}
});
navLinks.forEach(function (link) {
link.addEventListener(“click”, function (event) {
const target = link.dataset.target;
if (!target) return;
event.preventDefault();
showPanel(target, true);
});
});
window.addEventListener(“popstate”, function () {
const id = location.hash.replace(“#”, “”) || “home”;
showPanel(id, false);
});
const initialId = location.hash.replace(“#”, “”) || “home”;
const initialPanel = root.querySelector(“#” + CSS.escape(initialId)) || root.querySelector(“#home”);
panels.forEach(function (panel) {
panel.classList.toggle(“is-active”, panel === initialPanel);
});
activePanel = initialPanel;
markActive(initialPanel.id);
setTheme(initialPanel);
if (window.gsap && !prefersReducedMotion) {
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
gsap.timeline({ defaults: { ease: “power3.out” } })
.from(“.hero-shape”, { autoAlpha: 0, scale: .86, y: 28, duration: .9, stagger: .08 })
.from(“.home-content .gsap-fade-up”, { autoAlpha: 0, y: 28, duration: .65, stagger: .08 }, “-=.45”)
.from(“.home-brand”, { autoAlpha: 0, y: 40, duration: .75 }, “-=.45”);
gsap.to(“.gsap-marquee__track”, {
xPercent: -50,
repeat: -1,
duration: 28,
ease: “none”
});
if (window.matchMedia(“(min-width: 760px)”).matches) {
panels.forEach(function (panel) {
panel.querySelectorAll(“.gsap-parallax img”).forEach(function (image) {
panel.addEventListener(“mousemove”, function (event) {
if (panel !== activePanel) return;
const rect = panel.getBoundingClientRect();
const x = (event.clientX – rect.left) / rect.width – .5;
const y = (event.clientY – rect.top) / rect.height – .5;
gsap.to(image, { x: x * -18, y: y * -18, duration: .7, ease: “power2.out” });
});
});
});
}
}
})();
