.elementor-kit-3{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-f6ef868:#EE3B7B;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-3 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --ink:#141414; --ink-2:#1d1d1d; --paper:#f4f1ea; --white:#ffffff; --pink:#ee3b7b; --pink-d:#d42a68; --orange:#ff7300; --orange-d:#f26500; --lime:#cddc28; --disp:"Champ", system-ui, sans-serif; --sans:"Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --serif:"Panama", Georgia, "Times New Roman", serif; --mono:"Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace; --script:"Palmer Script", "Palmer Lake Script", "Brush Script MT", cursive; --r-panel:1.875rem; --r-card:1.375rem; --r-pill:6.25rem; --r-chip:0.5625rem; --pad:1rem; --maxw:90rem; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --text-xs:clamp(0.75rem, 0.72rem + 0.20vw, 0.875rem); --text-s:clamp(0.875rem, 0.84rem + 0.25vw, 1rem); --text-m:clamp(1rem, 0.96rem + 0.30vw, 1.125rem); --text-l:clamp(1.125rem, 1.06rem + 0.45vw, 1.375rem); --h-s:clamp(1.375rem, 1.20rem + 0.90vw, 1.875rem); --h-m:clamp(1.75rem, 1.45rem + 1.40vw, 2.50rem); --h-l:clamp(2.25rem, 1.75rem + 2.30vw, 3.50rem); --h-xl:clamp(2.75rem, 2.00rem + 3.20vw, 4.50rem); --transparent:#00000000; --r-btn:0.5rem; --h-2xl:clamp(5.5rem, 4rem + 6.40vw, 9rem); --mNw-max-content:max-content; --negative-space:-1rem; --spill:calc(100% + 2rem); } /* Start custom CSS *//* ========================================================= NACION SUSHI — HOT PICKS SWIPER ========================================================= */ .mNw-hotpicks-carousel { width: 100%; max-width: 100%; overflow: hidden; } /* Swiper track */ .mNw-hotpicks-carousel > .swiper-wrapper { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; width: 100%; max-width: none; } /* Atomic Loop Item = Swiper slide */ .mNw-hotpicks-carousel > .swiper-wrapper > .swiper-slide { flex-shrink: 0 !important; min-width: 0; max-width: none !important; } /* Make the actual food card fill its Swiper slide */ .mNw-hotpicks-carousel .swiper-slide > .mNw-menu-card { width: 100%; height: 100%; } /* ========================================================= MNW — SMOOTH ATOMIC IMAGE CAROUSEL Elementor v4 ========================================================= */ .mNw-smooth-slider { --mnw-speed: 35s; } /* --------------------------------------------------------- TRACK --------------------------------------------------------- */ .mNw-smooth-slider__track { animation: mNw-smooth-slider-scroll var(--mnw-speed) linear infinite; will-change: transform; } .mNw-smooth-slider--left .mNw-smooth-slider__track { animation-direction: normal; } .mNw-smooth-slider--right .mNw-smooth-slider__track { animation-direction: reverse; } /* --------------------------------------------------------- CONTINUOUS MOVEMENT --------------------------------------------------------- */ @keyframes mNw-smooth-slider-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* --------------------------------------------------------- ACCESSIBILITY --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .mNw-smooth-slider__track { animation-play-state: paused; } } /* ========================================================== NACION SUSHI — IMAGE CLIPPED TO SVG WORDMARK Elementor v4 ---------------------------------------------------------- STRUCTURE: Flexbox .mNw-wordmark-mask └── Image element ========================================================== */ /* ---------------------------------------------------------- 1. WRAPPER ---------------------------------------------------------- */ .mNw-wordmark-mask { /* SVG mask */ --mnw-mask: url("/wp-content/uploads/sites/2/2026/09/nacionsushi-wording.svg"); /* Pink offset shadow */ --mnw-shadow-color: #ee3b7b; --mnw-shadow-x: 9px; --mnw-shadow-y: 9px; /* * IMPORTANT: * Replace this with the actual SVG viewBox ratio. * * Example: * viewBox="0 0 1280 230" * aspect-ratio: 1280 / 230; */ aspect-ratio: 1280 / 230; position: relative; width: 72%; /* * Keep visible so the pink offset * can extend outside the wrapper. */ overflow: visible; /* * Creates an independent stacking context. */ isolation: isolate; /* * Prevent inline/image baseline spacing. */ line-height: 0; } /* ---------------------------------------------------------- 2. PINK WORDMARK / DROP SHADOW ---------------------------------------------------------- */ .mNw-wordmark-mask::before { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background-color: var(--mnw-shadow-color); transform: translate( var(--mnw-shadow-x), var(--mnw-shadow-y) ); /* Safari / Chrome */ -webkit-mask-image: var(--mnw-mask); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 100% 100%; /* Standard */ mask-image: var(--mnw-mask); mask-repeat: no-repeat; mask-position: center; mask-size: 100% 100%; z-index: 0; pointer-events: none; } /* ---------------------------------------------------------- 3. ELEMENTOR V4 IMAGE ---------------------------------------------------------- */ .mNw-wordmark-mask > img, .mNw-wordmark-mask .e-image-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* * Crop the source photograph inside * the dimensions of the wordmark. */ object-fit: cover; /* * Controls which part of the photograph * appears inside the letters. * * Try: * center center * center 40% * center 70% */ object-position: center center; /* SVG MASK — WebKit */ -webkit-mask-image: var(--mnw-mask); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 100% 100%; /* SVG MASK — Standard */ mask-image: var(--mnw-mask); mask-repeat: no-repeat; mask-position: center; mask-size: 100% 100%; z-index: 1; } /* ---------------------------------------------------------- 4. TABLET ---------------------------------------------------------- */ @media (max-width: 1024px) { .mNw-wordmark-mask { --mnw-shadow-x: 7px; --mnw-shadow-y: 7px; } } /* ---------------------------------------------------------- 5. MOBILE ---------------------------------------------------------- */ @media (max-width: 767px) { .mNw-wordmark-mask { --mnw-shadow-x: 5px; --mnw-shadow-y: 5px; } } /* ========================================================== NACION SUSHI — STAR ISOLOGO IMAGE MASK Elementor v4 STRUCTURE: Flexbox .mNw-isologo-mask └── Image ========================================================== */ /* ---------------------------------------------------------- 1. STAR WRAPPER ---------------------------------------------------------- */ .mNw-isologo-mask { /* SVG */ --mnw-isologo-mask: url("/wp-content/uploads/sites/2/2026/09/isologo-icon.svg"); /* Pink offset */ --mnw-isologo-shadow-color: #ee3b7b; --mnw-isologo-shadow-x: 12px; --mnw-isologo-shadow-y: 9px; /* * Size of complete star component */ width: 18vw; /* * Star SVG is effectively square */ aspect-ratio: 1 / 1; position: relative; /* * Allow pink copy to extend * outside the wrapper. */ overflow: visible; /* * Independent z-index context */ isolation: isolate; line-height: 0; /* * Do NOT apply filter here. */ filter: none; } /* ---------------------------------------------------------- 2. PINK STAR OFFSET ---------------------------------------------------------- */ .mNw-isologo-mask::before { content: ""; position: absolute; inset: 0; width: 100%; height: 100%; background-color: var(--mnw-isologo-shadow-color); transform: translate( var(--mnw-isologo-shadow-x), var(--mnw-isologo-shadow-y) ); /* ----------------------------------------- SVG MASK — WEBKIT ----------------------------------------- */ -webkit-mask-image: var(--mnw-isologo-mask); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; /* ----------------------------------------- SVG MASK — STANDARD ----------------------------------------- */ mask-image: var(--mnw-isologo-mask); mask-repeat: no-repeat; mask-position: center; mask-size: contain; /* * Explicit alpha mask */ mask-mode: alpha; z-index: 0; pointer-events: none; } /* ---------------------------------------------------------- 3. ELEMENTOR V4 IMAGE ---------------------------------------------------------- */ .mNw-isologo-mask > img, .mNw-isologo-mask .e-image-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; /* * Fill square canvas with photo. */ object-fit: cover; /* * Move source image inside star if necessary. * * Examples: * center center * 60% center * center 40% */ object-position: center center; /* ----------------------------------------- REMOVE FILTER COMPOSITING ----------------------------------------- */ filter: none !important; opacity: 1; /* ----------------------------------------- SVG MASK — WEBKIT ----------------------------------------- */ -webkit-mask-image: var(--mnw-isologo-mask); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; /* ----------------------------------------- SVG MASK — STANDARD ----------------------------------------- */ mask-image: var(--mnw-isologo-mask); mask-repeat: no-repeat; mask-position: center; mask-size: contain; mask-mode: alpha; z-index: 1; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1024px) { .mNw-isologo-mask { width: clamp(120px, 22vw, 280px); --mnw-isologo-shadow-x: 8px; --mnw-isologo-shadow-y: 8px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .mNw-isologo-mask { width: clamp(100px, 32vw, 200px); --mnw-isologo-shadow-x: 5px; --mnw-isologo-shadow-y: 5px; } }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Roboto'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://nacionsushi.site/pa/wp-content/uploads/sites/2/2026/09/roboto-regular-webfont.woff2') format('woff2'), url('https://nacionsushi.site/pa/wp-content/uploads/sites/2/2026/09/roboto-regular-webfont-1.woff') format('woff'); } /* End Custom Fonts CSS */