.elementor-kit-17{--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-size:calc(var(--heading-l-size) * 1.618);--e-global-typography-primary-font-weight:bold;--e-global-typography-primary-line-height:1em;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-size:calc(var(--heading-m-size) * 1.618);--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1em;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:calc(var(--text-s-size) * 1.618);--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-size:calc(var(--text-m-size) * 1.1);--e-global-typography-accent-font-weight:500;--e-global-typography-1b24b8a-font-size:calc(var(--heading-s-size) * 1.618);--e-global-typography-fd23c12-font-size:calc(var(--text-xl-size) * 1.618);--e-global-typography-de19227-font-size:calc(var(--text-l-size) * 1.618);--e-global-typography-a8c5511-font-size:calc(var(--text-m-size) * 1.618);--e-global-typography-9f0aa1d-font-size:calc(var(--text-xs-base) * 1.618);--e-global-typography-2831f43-font-size:calc(var(--text-xs-base));--e-global-typography-d78d18c-font-size:calc(var(--text-s-size) * 1.1);}.elementor-kit-17 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:80rem;}.e-con{--container-max-width:80rem;--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){margin-block-end:1.25rem;}.elementor-element{--widgets-spacing:1.25rem 1.25rem;--widgets-spacing-row:1.25rem;--widgets-spacing-column:1.25rem;}{}h1.entry-title{display:var(--page-title-display);}@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; ----mNw-lh-tight:1.1ch; ----mNw-lh-ui:1.3ch; ----mNw-lh-body:1.6ch; --h-2xl:clamp(5.5rem, 4.00rem + 6.40vw, 9.0rem); --h-1xl:clamp(3.75rem, 2.75rem + 4.3vw, 6rem); --text-xl:clamp(1.375rem, 1.20rem + 0.90vw, 1.875rem); --black:#000000; } /* Start custom CSS *//* ========================================================== 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/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/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; } } /* Make Elementor's YouTube element fill the wrapper */ .mNw-yt__video > * { width: 100% !important; height: 100% !important; } /* Make the actual YouTube iframe fill the available space */ .mNw-yt__video iframe { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; border: 0; }/* 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/wp-content/uploads/2026/09/roboto-regular-webfont.woff2') format('woff2'), url('https://nacionsushi.site/wp-content/uploads/2026/09/roboto-regular-webfont.woff') format('woff'); } /* End Custom Fonts CSS */